{
  "name": "intensity-bands",
  "type": "registry:ui",
  "title": "IntensityBands",
  "description": "The 1–N stepped state selector with printed number keys: the same scene, hotter. Band names are your metaphor's words; the number row fires them.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "kbd",
    "utils"
  ],
  "files": [
    {
      "path": "components/instruments/IntensityBands.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * IntensityBands — the 1–N stepped state selector with printed number\n * keys: the same scene, hotter. Bands are your metaphor's words\n * (Ambient→Resolve, Energy 1–4); the number row fires them (§5).\n *\n * Use when: stepping one dimension of the live thing through named\n * levels.\n * Don't use when: continuous values (Slider) or exclusive views\n * (SegmentedControl — bands are a performance instrument, not a filter).\n */\n\nimport { cn } from '@/lib/utils'\nimport { Kbd } from '@/components/ui/Kbd'\n\nconst BAND_HEIGHTS = ['h-2', 'h-3.5', 'h-5', 'h-3'] as const\n\ninterface IntensityBandsProps {\n  /** The band names, in order — keys 1..N print automatically. */\n  bands: readonly string[]\n  /** The active band (1-based), or null when nothing is live. */\n  value: number | null\n  onChange: (band: number) => void\n  /** Accessible name for the group (\"Intensity\", \"Energy\"). */\n  label: string\n  /** The band that runs hot (wears ember instead of the accent). */\n  hotBand?: number\n  disabled?: boolean\n  className?: string\n}\n\nexport function IntensityBands({\n  bands,\n  value,\n  onChange,\n  label,\n  hotBand = 3,\n  disabled,\n  className,\n}: IntensityBandsProps) {\n  return (\n    <div role=\"group\" aria-label={label} className={cn('flex items-end gap-1.5', className)}>\n      {bands.map((name, index) => {\n        const band = index + 1\n        const isActive = value === band\n        return (\n          <button\n            key={name}\n            type=\"button\"\n            disabled={disabled}\n            onClick={() => onChange(band)}\n            aria-pressed={isActive}\n            aria-label={`${label} ${band}: ${name}`}\n            className={cn(\n              // Console physics: the band key travels 1px like its siblings.\n              'group flex w-[72px] flex-col items-center gap-2 rounded-sm px-1.5 pb-2 pt-3',\n              // Density (§2.6) is ambient: bands are performance-native;\n              // under a bench ancestor the keys narrow and tighten.\n              '[[data-density=bench]_&]:w-14 [[data-density=bench]_&]:gap-1 [[data-density=bench]_&]:pb-1.5 [[data-density=bench]_&]:pt-2',\n              'transition-[color,background-color,transform] duration-instant',\n              'hover:bg-fill-hover active:translate-y-px disabled:opacity-40',\n              isActive && 'bg-fill-hover'\n            )}\n          >\n            <span\n              className={cn(\n                'w-full rounded-full transition-[background-color,box-shadow,opacity] duration-ui',\n                BAND_HEIGHTS[index % BAND_HEIGHTS.length],\n                isActive\n                  ? cn(\n                      // The lit band glows — glow is state (G7): this IS\n                      // what is live right now. The glow derives from\n                      // --brass so retuning the accent (§2.9) reaches it.\n                      'shadow-[0_0_14px_color-mix(in_srgb,var(--brass)_45%,transparent)]',\n                      band === hotBand ? 'bg-ember' : 'bg-brass'\n                    )\n                  : 'bg-ink/15 group-hover:bg-ink/25'\n              )}\n            />\n            <span\n              className={cn(\n                'text-micro uppercase tracking-key transition-colors',\n                isActive ? 'text-brass-hot' : 'text-ink-faint group-hover:text-ink-mute'\n              )}\n            >\n              {name}\n            </span>\n            <Kbd tone={isActive ? 'brass' : 'default'}>{band}</Kbd>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n",
      "target": "components/instruments/IntensityBands.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "instrument",
      "gRules": [
        "G1",
        "G2",
        "G7"
      ],
      "useWhen": "Stepping one dimension of the live thing through named levels (Ambient→Resolve, Energy 1–4).",
      "dontUseWhen": "Continuous values (Slider) or exclusive views (SegmentedControl — bands are an instrument, not a filter).",
      "states": [
        "inactive bands",
        "active band (lit + glow — this IS what is live)",
        "the hot band (ember)",
        "disabled"
      ],
      "keyboard": [
        {
          "keys": "1…N",
          "does": "fires the band via the surface map; the keys are printed on the control"
        }
      ],
      "acceptanceTests": [
        "The number keys print from the band order — help cannot drift (G2)."
      ]
    }
  }
}