{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-spectral-fader",
  "type": "registry:ui",
  "title": "Spectral band fader",
  "description": "Reusable controlled graphite fader with scoped material artwork.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-fader.json",
    "https://pluginui.com/r/gallery-spectral-control-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/spectral-fader.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/spectral-fader\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 type { CSSProperties } from \"react\"\nimport \"@/components/ui/spectral-controls.css\"\n// Four sampled illustrative profiles; the consumer value shifts their height.\nconst PROFILES = [\n  [58, 68, 55, 62, 59, 65, 61, 64, 70, 67, 74, 59, 66, 56, 64, 61, 58, 55],\n  [85, 82, 78, 82, 89, 72, 76, 83, 91, 87, 83, 77, 73, 83, 89, 79, 84, 87],\n  [35, 34, 35, 32, 43, 37, 42, 38, 47, 40, 44, 37, 41, 46, 40, 49, 43, 40],\n  [88, 94, 91, 81, 86, 93, 99, 96, 94, 88, 86, 91, 95, 89, 87, 93, 94, 90],\n] as const\nconst PROFILE_DEFAULTS = [5 / 14, 10 / 14, 3 / 14, 11 / 14]\nimport {\n  Fader,\n  type FaderProps,\n  type FaderDesignState,\n} from \"@/components/ui/fader\"\n\nexport interface SpectralFaderProps extends FaderProps {\n  accent?: string\n  width?: number\n  kind?: \"spectrum\" | \"meter\"\n  readout?: string\n  seed?: number\n}\n\n/** Pure artwork; the shared Fader owns track gestures and formatted values. */\nexport function SpectralFaderDesign({\n  value01,\n  length,\n  disabled,\n  formattedValue,\n  accent = \"#ffb179\",\n  width = 170,\n  kind = \"spectrum\",\n  seed = 0,\n}: FaderDesignState &\n  Pick<SpectralFaderProps, \"accent\" | \"width\" | \"kind\" | \"seed\">) {\n  const profileIndex = ((Math.round(seed) % 4) + 4) % 4\n  return (\n    <div\n      className=\"spectral-fader\"\n      data-kind={kind}\n      style={\n        { height: length, width, \"--spectral-accent\": accent } as CSSProperties\n      }\n      aria-disabled={disabled || undefined}\n    >\n      <>\n        <span className=\"spectral-fader__bars\" aria-hidden=\"true\">\n          {Array.from({ length: kind === \"meter\" ? 2 : 18 }, (_, i) => {\n            const h =\n              kind === \"meter\"\n                ? 88\n                : PROFILES[profileIndex]![i]! +\n                  (value01 - PROFILE_DEFAULTS[profileIndex]!) * 45\n            return (\n              <i key={i} style={{ height: `${Math.max(4, Math.min(99, h))}%` }}>\n                <b\n                  style={{\n                    height: kind === \"meter\" ? \"100%\" : `${18 + value01 * 12}%`,\n                  }}\n                />\n              </i>\n            )\n          })}\n        </span>\n        <span\n          className=\"spectral-fader__line\"\n          style={{ top: `${(1 - value01) * 100}%` }}\n          aria-hidden=\"true\"\n        >\n          <output>{formattedValue}</output>\n        </span>\n      </>\n    </div>\n  )\n}\n\n/** Convenience visual preset with the ordinary Fader contract. */\nexport function SpectralFader({\n  label = \"Band amount\",\n  accent = \"#ffb179\",\n  length = 240,\n  width = 170,\n  kind = \"spectrum\",\n  readout,\n  seed = 0,\n  orientation = \"vertical\",\n  ...control\n}: SpectralFaderProps) {\n  return (\n    <Fader\n      {...control}\n      label={label}\n      hideLabel\n      hideValue\n      length={length}\n      orientation={orientation}\n      thickness={width}\n      capInset={0}\n      format={readout === undefined ? control.format : () => readout}\n      renderDesign={(state) => (\n        <SpectralFaderDesign\n          {...state}\n          accent={accent}\n          width={width}\n          kind={kind}\n          seed={seed}\n        />\n      )}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/spectral-fader.tsx"
    }
  ]
}