{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-knob-gallery-machined",
  "type": "registry:ui",
  "title": "Machined Knob Kit",
  "description": "Eight custom Canvas knob surfaces with a shared analytic lighting renderer.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/gallery-knob-gallery-core.json"
  ],
  "files": [
    {
      "path": "components/ui/knob-gallery-machined.tsx",
      "content": "/**\n * Source: https://pluginui.com/controls\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\nimport { useEffect, useRef, useState } from \"react\"\nimport type {\n  GalleryKnobDesignProps,\n  KnobOption,\n  SurfaceStudy,\n} from \"maruaudio/ui/shared/knob-gallery-types\"\nimport {\n  renderMachinedKnob,\n  type MachinedStyle,\n} from \"maruaudio/ui/shared/knob-gallery-machined-render\"\n\nexport function machinedDesign(style: MachinedStyle, study?: SurfaceStudy) {\n  return function MachinedArtwork({\n    value,\n    size,\n    accent,\n    light,\n  }: GalleryKnobDesignProps) {\n    const canvasRef = useRef<HTMLCanvasElement>(null)\n    const [visible, setVisible] = useState(false)\n    useEffect(() => {\n      const canvas = canvasRef.current\n      if (!canvas) return\n      if (typeof IntersectionObserver === \"undefined\") {\n        setVisible(true)\n        return\n      }\n      const observer = new IntersectionObserver(\n        ([entry]) => setVisible(entry.isIntersecting),\n        { rootMargin: \"80px\" }\n      )\n      observer.observe(canvas)\n      return () => observer.disconnect()\n    }, [])\n    useEffect(() => {\n      if (visible && canvasRef.current)\n        renderMachinedKnob(\n          canvasRef.current,\n          style,\n          value,\n          size,\n          accent,\n          light,\n          study\n        )\n    }, [\n      visible,\n      value,\n      size,\n      accent,\n      light.azimuth,\n      light.elevation,\n      light.intensity,\n    ])\n    return (\n      <canvas\n        ref={canvasRef}\n        aria-hidden=\"true\"\n        style={{ width: size, height: size, display: \"block\" }}\n      />\n    )\n  }\n}\n\nexport const MACHINED_PEARL_OPTION: KnobOption = {\n  id: \"machined-pearl\",\n  name: \"Pearl thumbprint\",\n  family: \"Machined\",\n  technique: \"Canvas · analytic dome + rotating depression\",\n  description:\n    \"A softly rounded pearl cap with a small thumb dent. The crater turns through one fixed light; the highlight stays on the same side.\",\n  Design: /* @__PURE__ */ machinedDesign(\"pearl\"),\n}\n\nexport const MACHINED_ALLOY_OPTION: KnobOption = {\n  id: \"machined-alloy\",\n  name: \"Studio alloy\",\n  family: \"Machined\",\n  technique: \"Canvas · beveled profile + brushed material\",\n  description:\n    \"A restrained brushed-aluminum puck with a broad machined bevel, dark engraved index and fine directional grain.\",\n  Design: /* @__PURE__ */ machinedDesign(\"alloy\"),\n}\n\nexport const MACHINED_FLUTED_OPTION: KnobOption = {\n  id: \"machined-fluted\",\n  name: \"Fluted silver\",\n  family: \"Machined\",\n  technique: \"Canvas · 24 flutes + analytic surface normals\",\n  description:\n    \"A narrow silver face inside a scalloped finger grip. Twenty-four flutes catch light individually as the knob turns.\",\n  Design: /* @__PURE__ */ machinedDesign(\"fluted\"),\n}\n\nexport const MACHINED_RUBBER_OPTION: KnobOption = {\n  id: \"machined-rubber\",\n  name: \"Soft grip\",\n  family: \"Machined\",\n  technique: \"Canvas · lobed silhouette + matte material\",\n  description:\n    \"A dark rubber cap with twelve broad lugs and an accent dot inside a tactile thumb well. Soft reflections give it a quieter presence.\",\n  Design: /* @__PURE__ */ machinedDesign(\"rubber\"),\n}\n\nexport const MACHINED_PORCELAIN_OPTION: KnobOption = {\n  id: \"machined-porcelain\",\n  name: \"Porcelain saucer\",\n  family: \"Machined\",\n  technique: \"Canvas · concave field + glazed rim\",\n  description:\n    \"A warm ceramic bowl with a raised glazed lip and a slim ink index. Its concavity reverses the highlight behavior of a dome.\",\n  Design: /* @__PURE__ */ machinedDesign(\"porcelain\"),\n}\n\nexport const MACHINED_BRASS_OPTION: KnobOption = {\n  id: \"machined-brass\",\n  name: \"Knurled brass\",\n  family: \"Machined\",\n  technique: \"Canvas · crossed micro-ridges + metallic reflection\",\n  description:\n    \"A gold-toned dial with diamond knurling, a smooth engraved face and concentric tool cuts. Rotating ridges sparkle under fixed light.\",\n  Design: /* @__PURE__ */ machinedDesign(\"brass\"),\n}\n\nexport const MACHINED_CHROME_OPTION: KnobOption = {\n  id: \"machined-chrome\",\n  name: \"Liquid chrome\",\n  family: \"Machined\",\n  technique: \"Canvas · concave normals + analytic environment bands\",\n  description:\n    \"A reflective dish with a mirror-polished rolled rim. Procedural softbox and dark horizon reflections describe the form without a 3D renderer.\",\n  Design: /* @__PURE__ */ machinedDesign(\"chrome\"),\n}\n\nexport const MACHINED_STEPPED_OPTION: KnobOption = {\n  id: \"machined-stepped\",\n  name: \"Concentric mill\",\n  family: \"Machined\",\n  technique: \"Canvas · stepped radial height field\",\n  description:\n    \"A compact industrial dial made of four descending circular terraces. Fine milled grooves and an accent center index add mechanical precision.\",\n  Design: /* @__PURE__ */ machinedDesign(\"stepped\"),\n}\n\nexport const MACHINED_OPTIONS: KnobOption[] = [\n  MACHINED_PEARL_OPTION,\n  MACHINED_ALLOY_OPTION,\n  MACHINED_FLUTED_OPTION,\n  MACHINED_RUBBER_OPTION,\n  MACHINED_PORCELAIN_OPTION,\n  MACHINED_BRASS_OPTION,\n  MACHINED_CHROME_OPTION,\n  MACHINED_STEPPED_OPTION,\n]\n",
      "type": "registry:component",
      "target": "@ui/knob-gallery-machined.tsx"
    }
  ]
}