{
  "name": "transport-button",
  "type": "registry:ui",
  "title": "TransportButton",
  "description": "A persistent surface control: icon · micro-label · printed key · pressed tone. Density-aware — compacts to a 32px icon under data-density=\"bench\". Held keys sit physically sunken.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "tooltip",
    "utils"
  ],
  "files": [
    {
      "path": "components/instruments/TransportButton.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * TransportButton — a persistent surface control with its key printed\n * on it: icon · micro-label · printed key · pressed tone.\n *\n * Density-aware: under data-density=\"bench\" it compacts to a 32px icon\n * control and its label moves into the Tooltip; on performance surfaces\n * it stays the full labeled key. `hotkey` is optional — never print a\n * key that doesn't work (G2).\n *\n * Use when: always-visible surface-level controls (console zones,\n * transport rows).\n * Don't use when: one-off form/header actions (Button) or one-shots (Pad).\n */\n\nimport { Tooltip } from '@/components/ui/Tooltip'\nimport { cn } from '@/lib/utils'\n\ninterface TransportButtonProps {\n  label: string\n  hotkey?: string\n  icon: React.ReactNode\n  onClick: () => void\n  pressed?: boolean\n  disabled?: boolean\n  /** Only the stop family wears danger (§7.a). */\n  tone?: 'default' | 'danger'\n  /** Copy (§9): the full tooltip line — override from your copy module;\n   *  per-device where verbs differ (never tell a phone to \"press\"). */\n  tooltip?: string\n}\n\nexport function TransportButton({\n  label,\n  hotkey,\n  icon,\n  onClick,\n  pressed,\n  disabled,\n  tone = 'default',\n  tooltip = hotkey ? `${label} — press ${hotkey}` : label,\n}: TransportButtonProps) {\n  return (\n    <Tooltip content={tooltip}>\n      <button\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-pressed={pressed}\n        aria-label={label}\n        className={cn(\n          // Console keys travel: 1px down under the thumb, and a held key\n          // (Hold, Duck, Loop) sits physically sunken until released.\n          'flex h-12 w-[58px] flex-col items-center justify-center gap-1 rounded-sm border',\n          'transition-[color,background-color,border-color,box-shadow,transform] duration-instant',\n          'active:translate-y-px',\n          '[[data-density=bench]_&]:h-8 [[data-density=bench]_&]:w-8 [[data-density=bench]_&]:gap-0',\n          'disabled:cursor-default disabled:opacity-35 disabled:active:translate-y-0',\n          pressed\n            ? tone === 'danger'\n              ? 'key-sunken border-danger-rim bg-danger-held text-danger'\n              : 'key-sunken border-brass-rim bg-brass-held text-brass-hot'\n            : 'border-hairline bg-fill-rest text-ink-mute hover:border-hairline-strong hover:bg-fill-hover hover:text-ink'\n        )}\n      >\n        {icon}\n        <span className=\"text-nano uppercase tracking-key opacity-80 [[data-density=bench]_&]:hidden\">\n          {label}\n        </span>\n      </button>\n    </Tooltip>\n  )\n}\n",
      "target": "components/instruments/TransportButton.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "instrument",
      "gRules": [
        "G2",
        "G7"
      ],
      "useWhen": "Always-visible surface-level controls — console zones, transport rows.",
      "dontUseWhen": "One-off form/header actions (Button) or one-shots (Pad).",
      "states": [
        "resting",
        "pressed/held (sunken)",
        "danger pressed (the stop family)",
        "disabled (dark, honest)",
        "bench density (icon only)"
      ],
      "keyboard": [],
      "acceptanceTests": [
        "hotkey is optional — never print a key that doesn't work (G2).",
        "Only the stop family wears danger.",
        "A held toggle sits sunken (edge-sunken), not tinted."
      ]
    }
  }
}