{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "device-kit",
  "title": "Device Kit",
  "author": "Visant Labs <visantsupply@gmail.com>",
  "description": "Aparelho y2k industrial em peças: carcaça de alumínio, LCD na luz da marca, LED, encoder e chave.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/visant/ui/device-shell.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Device Shell: a carcaça de alumínio escovado do kit de aparelho (`device-*`).\n *\n * Só a casca: textura escovada, ruído fino, luz na borda de cima, sombra em três camadas.\n * O conteúdo (display, teclas, encoder) entra como filho. O material mora em `device-kit.css`\n * (variáveis `--dk-*`, claro e escuro); aqui não há cor.\n *\n * Tamanhos: `sm` é uma unidade de rack ou um controle de linha (raio 12), `md` o aparelho de\n * bolso do Gravador (raio 36), `lg` um aparelho de mesa.\n */\nexport type DeviceSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface DeviceShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: DeviceSize;\n}\n\nexport const DeviceShell = React.forwardRef<HTMLDivElement, DeviceShellProps>(function DeviceShell(\n  { size = \"md\", className, ...rest },\n  ref,\n) {\n  return <div ref={ref} data-size={size} className={cn(\"dk-shell\", className)} {...rest} />;\n});\n\n/** Texto gravado no metal: rótulo de marca, nome de canal, nome do serviço. */\nexport function DeviceEngraving({ className, ...rest }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={cn(\"dk-engrave\", className)} {...rest} />;\n}\n\n/** Parafuso de fenda, para as orelhas de uma unidade de rack. Decorativo. */\nexport function DeviceScrew({ className }: { className?: string }) {\n  return <span aria-hidden className={cn(\"dk-screw\", className)} />;\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/visant/ui/device-lcd.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Device LCD: o display de vidro do kit de aparelho, com a tinta na luz da marca (`--brand`).\n *\n * `lit` é o backlight: apagado, o vidro fica a 58% e escuro; aceso, a tinta sobe e o fundo\n * esquenta. Use aceso quando o aparelho trabalha (grava, toca, gira) e apagado em repouso.\n *\n * O vidro (reflexo e linhas de varredura) é uma camada por cima, sem pegar clique. O conteúdo\n * vai em `children` e herda a cor da tinta: `DeviceReadout` para o número grande ou o timecode,\n * `DeviceSegments` para um medidor, `DeviceProgress` para uma barra em segmentos.\n */\nexport interface DeviceLcdProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Backlight aceso. Padrão: aceso. */\n  lit?: boolean;\n  size?: \"sm\" | \"md\";\n  /** Classe da tela (o vidro), para altura e respiro. */\n  screenClassName?: string;\n}\n\nexport function DeviceLcd({ lit = true, size = \"md\", className, screenClassName, children, ...rest }: DeviceLcdProps) {\n  return (\n    <div data-lit={lit ? \"\" : undefined} data-size={size} className={cn(\"dk-lcd\", className)} {...rest}>\n      <div className={cn(\"dk-lcd-screen\", screenClassName)}>\n        <div className=\"dk-lcd-in\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\n/** `hh:mm:ss` de um tempo em ms. */\nexport function timecode(ms: number) {\n  const s = Math.max(0, Math.floor(ms / 1000));\n  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60);\n  return [h, m, s % 60].map((n) => String(n).padStart(2, \"0\")).join(\":\");\n}\n\nexport interface DeviceReadoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `lg` é o timecode do gravador (38px); `sm` cabe numa unidade de rack. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Brilho da tinta: o número está vivo (gravando, tocando). */\n  glow?: boolean;\n}\n\n/** O número do display, em algarismos tabulares para não pular enquanto corre. */\nexport function DeviceReadout({ size = \"lg\", glow = false, className, ...rest }: DeviceReadoutProps) {\n  return <div data-size={size} data-glow={glow ? \"\" : undefined} className={cn(\"dk-readout\", className)} {...rest} />;\n}\n\nexport interface DeviceSegmentsProps {\n  /** De 0 a 1. */\n  value: number;\n  /** Quantos segmentos. Padrão: 10. */\n  count?: number;\n  /** Com rótulo, vira um `meter` acessível; sem, é só desenho (o valor já está dito em outro lugar). */\n  label?: string;\n  className?: string;\n}\n\n/** Medidor em segmentos de LCD (volume, nível). */\nexport function DeviceSegments({ value, count = 10, label, className }: DeviceSegmentsProps) {\n  const v = Math.min(1, Math.max(0, value));\n  const on = Math.round(v * count);\n  const a11y = label\n    ? { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": 0, \"aria-valuemax\": 100, \"aria-valuenow\": Math.round(v * 100) }\n    : { \"aria-hidden\": true };\n  return (\n    <span className={cn(\"dk-segments\", className)} {...a11y}>\n      {Array.from({ length: count }, (_, i) => <i key={i} data-on={i < on ? \"\" : undefined} />)}\n    </span>\n  );\n}\n\nexport interface DeviceProgressProps {\n  /** De 0 a 1. Sem valor, a barra fica vazia. */\n  value: number;\n  segments?: number;\n  /** Nome da barra para leitor de tela. */\n  label: string;\n  /** O que o leitor de tela diz, se a porcentagem não basta (\"3 de 12\"). */\n  valueText?: string;\n  className?: string;\n}\n\n/** Barra de progresso em segmentos, na tinta do LCD. */\nexport function DeviceProgress({ value, segments = 24, label, valueText, className }: DeviceProgressProps) {\n  const v = Math.min(1, Math.max(0, value));\n  const on = Math.round(v * segments);\n  return (\n    <div role=\"progressbar\" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(v * 100)}\n      aria-valuetext={valueText} className={cn(\"dk-progress\", className)}>\n      {Array.from({ length: segments }, (_, i) => <i key={i} data-on={i < on ? \"\" : undefined} />)}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/visant/ui/device-led.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Device LED: a luz de estado do kit de aparelho.\n *\n * - `off` apagado (a lente fica, sem luz);\n * - `on` aceso parado;\n * - `breathe` respira: trabalhando, gravando;\n * - `blink` pisca devagar: em trânsito, pausado, subindo;\n * - `error` aceso em vermelho, qualquer que seja o tom.\n *\n * O tom `red` é a luz de gravação; o `brand` acende no `--brand` da casa. Com movimento\n * reduzido, `breathe` e `blink` ficam acesos parados: o estado continua visível, só não mexe.\n *\n * Com `label`, o LED se anuncia como imagem com nome (\"no ar\"); sem, é decorativo e o estado\n * precisa estar escrito ao lado.\n */\nexport type DeviceLedState = \"off\" | \"on\" | \"breathe\" | \"blink\" | \"error\";\n\nexport interface DeviceLedProps {\n  state?: DeviceLedState;\n  tone?: \"red\" | \"brand\";\n  /** `xs` 6px, `sm` 10px, `md` 14px, `lg` 26px (o LED do REC). */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n  label?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function DeviceLed({ state = \"off\", tone = \"brand\", size = \"sm\", label, title, className }: DeviceLedProps) {\n  return (\n    <span data-state={state} data-tone={tone} data-size={size} title={title}\n      className={cn(\"dk-led\", className)}\n      {...(label ? { role: \"img\", \"aria-label\": label } : { \"aria-hidden\": true })} />\n  );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/visant/ui/device-key.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Device Key e Device Switch: as peças que o dedo aperta no kit de aparelho.\n *\n * **DeviceKey** é um botão físico que afunda. Afunda ao apertar (`:active`), por um instante\n * quando um atalho de teclado o aciona (`pressing`, para o atalho e o clique contarem a mesma\n * história) e fica travado afundado com `pressed` (vira `aria-pressed`), como o REC de um\n * gravador enquanto grava. `ring` é o anel torneado; `square`, a tecla pequena.\n *\n * **DeviceSwitch** é a chave deslizante de ligar e desligar (`role=\"switch\"`). `busy` marca o\n * trânsito (subindo, parando): a chave não aceita outro toque até o estado chegar.\n */\nexport interface DeviceKeyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  shape?: \"ring\" | \"square\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Travado afundado. Vira `aria-pressed`; sem valor, a tecla não é de alternar. */\n  pressed?: boolean;\n  /** Afundado por um instante (o atalho de teclado acionou a tecla). */\n  pressing?: boolean;\n}\n\nexport const DeviceKey = React.forwardRef<HTMLButtonElement, DeviceKeyProps>(function DeviceKey(\n  { shape = \"square\", size = \"md\", pressed, pressing = false, className, type = \"button\", ...rest },\n  ref,\n) {\n  return (\n    <button ref={ref} type={type} data-shape={shape} data-size={size}\n      data-pressed={pressing ? \"\" : undefined} aria-pressed={pressed}\n      className={cn(\"dk-key\", className)} {...rest} />\n  );\n});\n\n/** Marca uma tecla como apertada por um instante: `const [qual, apertar] = usePressFlash()`. */\nexport function usePressFlash(ms = 140) {\n  const [which, setWhich] = React.useState<string | null>(null);\n  const t = React.useRef<number>();\n  const flash = React.useCallback((k: string) => {\n    setWhich(k);\n    window.clearTimeout(t.current);\n    t.current = window.setTimeout(() => setWhich(null), ms);\n  }, [ms]);\n  React.useEffect(() => () => window.clearTimeout(t.current), []);\n  return [which, flash] as const;\n}\n\nexport interface DeviceSwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  checked: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  /** Em trânsito: a chave fica onde foi posta e não aceita outro toque. */\n  busy?: boolean;\n  size?: \"sm\" | \"md\";\n}\n\nexport const DeviceSwitch = React.forwardRef<HTMLButtonElement, DeviceSwitchProps>(function DeviceSwitch(\n  { checked, onCheckedChange, busy = false, size = \"md\", disabled, className, onClick, ...rest },\n  ref,\n) {\n  return (\n    <button ref={ref} type=\"button\" role=\"switch\" aria-checked={checked} aria-busy={busy || undefined}\n      data-size={size} disabled={disabled || busy}\n      onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) onCheckedChange?.(!checked); }}\n      className={cn(\"dk-switch\", className)} {...rest}>\n      <span className=\"dk-switch-lit\" aria-hidden />\n      <span className=\"dk-switch-thumb\" aria-hidden />\n    </button>\n  );\n});\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/visant/ui/device-encoder.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Device Encoder: o encoder do kit de aparelho, um controle que anda em detentes.\n *\n * Arrasto vertical (12 px por detente), roda do mouse (um detente a cada 60 de deltaY, com\n * listener não passivo para a página não rolar enquanto gira), setas (cima/direita sobe) e\n * PageUp/PageDown (dez detentes). É um `role=\"slider\"`.\n *\n * Duas formas de usar:\n * - **Valor**: `value`, `min`, `max`, `step` e `onValueChange`. O encoder anda e prende nos\n *   limites; Home/End vão às pontas.\n * - **Detente**: só `onDetent(+1 | -1)`, quando o que o giro faz muda com o estado (o Gravador\n *   navega entre notas parado e é volume tocando). Passe `value/min/max/valueText` para o\n *   leitor de tela saber onde está.\n *\n * `position` controla o desenho (quantos detentes já girou), para quando o giro vem de fora,\n * por exemplo de um atalho de teclado no aparelho inteiro. Sem ela, o encoder conta sozinho.\n *\n * `wheel` é a roda serrilhada de lado; `knob`, o botão giratório com risco de posição.\n */\nexport interface DeviceEncoderProps {\n  variant?: \"wheel\" | \"knob\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  label: string;\n  value?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  valueText?: string;\n  onValueChange?: (v: number) => void;\n  onDetent?: (d: 1 | -1) => void;\n  position?: number;\n  disabled?: boolean;\n  orientation?: \"vertical\" | \"horizontal\";\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst PASSO_ARRASTO = 12; // px por detente\nconst PASSO_RODA = 60; // deltaY por detente (roda de mouse manda ~100; trackpad soma)\nconst GRAUS_POR_DETENTE = 15;\n\nexport const DeviceEncoder = React.forwardRef<HTMLDivElement, DeviceEncoderProps>(function DeviceEncoder(\n  { variant = \"wheel\", size = \"md\", label, value, min = 0, max = 100, step = 1, valueText, onValueChange, onDetent,\n    position, disabled = false, orientation = \"vertical\", className, style },\n  ref,\n) {\n  const el = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => el.current!);\n  const [proprio, setProprio] = React.useState(0);\n  const giro = position ?? proprio;\n\n  // O valor anda aqui também: vários detentes no mesmo quadro (roda, arrasto) chegam antes do render.\n  const atual = React.useRef({ value, min, max, step, onValueChange, onDetent, disabled });\n  atual.current = { value, min, max, step, onValueChange, onDetent, disabled };\n  const detente = React.useCallback((d: 1 | -1) => {\n    const a = atual.current;\n    if (a.disabled) return;\n    setProprio((g) => g + d);\n    a.onDetent?.(d);\n    if (a.onValueChange && a.value != null) {\n      const v = Math.min(a.max, Math.max(a.min, a.value + d * a.step));\n      if (v !== a.value) { a.value = v; a.onValueChange(v); }\n    }\n  }, []);\n  const ir = (v: number) => {\n    const a = atual.current;\n    if (a.disabled || !a.onValueChange || a.value == null || v === a.value) return;\n    setProprio((g) => g + Math.sign(v - a.value!));\n    a.value = v;\n    a.onValueChange(v);\n  };\n\n  React.useEffect(() => {\n    const no = el.current;\n    if (!no) return;\n    let soma = 0;\n    const roda = (e: WheelEvent) => {\n      e.preventDefault();\n      soma += e.deltaMode === 1 ? e.deltaY * 40 : e.deltaY;\n      while (Math.abs(soma) >= PASSO_RODA) {\n        detente(soma < 0 ? 1 : -1);\n        soma -= Math.sign(soma) * PASSO_RODA;\n      }\n    };\n    no.addEventListener(\"wheel\", roda, { passive: false });\n    return () => no.removeEventListener(\"wheel\", roda);\n  }, [detente]);\n\n  const arrasto = React.useRef<{ y: number; resto: number } | null>(null);\n  const [arrastando, setArrastando] = React.useState(false);\n  const onPointerDown = (e: React.PointerEvent) => {\n    if (disabled) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    arrasto.current = { y: e.clientY, resto: 0 };\n    setArrastando(true);\n  };\n  const onPointerMove = (e: React.PointerEvent) => {\n    const a = arrasto.current;\n    if (!a) return;\n    a.resto += a.y - e.clientY; // para cima é positivo\n    a.y = e.clientY;\n    while (Math.abs(a.resto) >= PASSO_ARRASTO) {\n      detente(a.resto > 0 ? 1 : -1);\n      a.resto -= Math.sign(a.resto) * PASSO_ARRASTO;\n    }\n  };\n  const soltar = () => { arrasto.current = null; setArrastando(false); };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const k = e.key;\n    const f =\n      k === \"ArrowUp\" || k === \"ArrowRight\" ? () => detente(1)\n      : k === \"ArrowDown\" || k === \"ArrowLeft\" ? () => detente(-1)\n      : k === \"PageUp\" ? () => { for (let i = 0; i < 10; i++) detente(1); }\n      : k === \"PageDown\" ? () => { for (let i = 0; i < 10; i++) detente(-1); }\n      : k === \"Home\" && onValueChange ? () => ir(min)\n      : k === \"End\" && onValueChange ? () => ir(max)\n      : null;\n    if (!f) return;\n    e.preventDefault(); // um atalho do aparelho inteiro (que olha defaultPrevented) não anda de novo\n    f();\n  };\n\n  return (\n    <div ref={el} role=\"slider\" tabIndex={disabled ? -1 : 0} aria-label={label} aria-orientation={orientation}\n      aria-valuemin={min} aria-valuemax={max} aria-valuenow={value} aria-valuetext={valueText}\n      aria-disabled={disabled || undefined}\n      data-variant={variant} data-size={size} data-dragging={arrastando ? \"\" : undefined}\n      className={cn(\"dk-encoder\", className)} style={style}\n      onKeyDown={onKeyDown} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={soltar} onPointerCancel={soltar}>\n      {variant === \"wheel\" ? (\n        <span className=\"dk-knurl\" aria-hidden style={{ transform: `translateY(${(((giro * 2) % 8) + 8) % 8}px)` }} />\n      ) : (\n        <span className=\"dk-knob-cap\" aria-hidden style={{ transform: `rotate(${giro * GRAUS_POR_DETENTE}deg)` }} />\n      )}\n    </div>\n  );\n});\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    "@layer base": {
      ":root": {
        "--dk-alu-hi": "oklch(0.955 0.003 250)",
        "--dk-alu": "oklch(0.905 0.004 250)",
        "--dk-alu-lo": "oklch(0.835 0.006 250)",
        "--dk-edge": "oklch(0.72 0.006 250 / 0.55)",
        "--dk-hl": "oklch(1 0 0 / 0.9)",
        "--dk-shade": "oklch(0.25 0.01 250)",
        "--dk-brush": "oklch(1 0 0 / 0.07)",
        "--dk-brush-dark": "oklch(0.4 0.01 250 / 0.035)",
        "--dk-engrave": "oklch(0.52 0.006 250)",
        "--dk-engrave-hl": "oklch(1 0 0 / 0.75)",
        "--dk-hole": "oklch(0.32 0.008 250)",
        "--dk-lcd": "oklch(0.2 0.012 235)",
        "--dk-lcd-deep": "oklch(0.15 0.012 235)",
        "--dk-led-red": "oklch(0.64 0.235 27)",
        "--dk-led-red-off": "oklch(0.47 0.12 27)",
        "--dk-led-red-glow": "oklch(0.64 0.235 27 / 0.55)",
        "--dk-lens-off": "oklch(0.62 0.01 250)"
      },
      ".dark": {
        "--dk-alu-hi": "oklch(0.43 0.005 250)",
        "--dk-alu": "oklch(0.355 0.005 250)",
        "--dk-alu-lo": "oklch(0.285 0.005 250)",
        "--dk-edge": "oklch(0.2 0.004 250 / 0.9)",
        "--dk-hl": "oklch(1 0 0 / 0.22)",
        "--dk-shade": "oklch(0 0 0)",
        "--dk-brush": "oklch(1 0 0 / 0.035)",
        "--dk-brush-dark": "oklch(0 0 0 / 0.06)",
        "--dk-engrave": "oklch(0.7 0.005 250)",
        "--dk-engrave-hl": "oklch(0 0 0 / 0.55)",
        "--dk-hole": "oklch(0.13 0.004 250)",
        "--dk-lcd": "oklch(0.14 0.01 235)",
        "--dk-lcd-deep": "oklch(0.1 0.01 235)",
        "--dk-led-red-off": "oklch(0.4 0.1 27)",
        "--dk-lens-off": "oklch(0.24 0.006 250)"
      }
    },
    "@layer components": {
      ".dk-lcd, .dk-key, .dk-switch": {
        "--dk-ink": "color-mix(in oklch, var(--brand) 88%, white)"
      },
      ".dk-shell": {
        "--dk-shell-pad": "22px",
        "--dk-shell-r": "36px",
        "--dk-shell-depth": "0 1px 1px oklch(from var(--dk-shade) l c h / 0.12), 0 10px 24px -10px oklch(from var(--dk-shade) l c h / 0.32), 0 36px 64px -28px oklch(from var(--dk-shade) l c h / 0.4)",
        "position": "relative",
        "padding": "var(--dk-shell-pad)",
        "border-radius": "var(--dk-shell-r)",
        "outline": "none",
        "background": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\"), repeating-linear-gradient(180deg, var(--dk-brush) 0 1px, transparent 1px 2px, var(--dk-brush-dark) 2px 3px, transparent 3px 5px), linear-gradient(165deg, var(--dk-alu-hi) 0%, var(--dk-alu) 48%, var(--dk-alu-lo) 100%)",
        "box-shadow": "inset 0 1px 0 var(--dk-hl), inset 0 -1px 0 oklch(from var(--dk-shade) l c h / 0.18), inset 0 0 0 1px var(--dk-edge), var(--dk-shell-depth)"
      },
      ".dk-shell[data-size=\"sm\"]": {
        "--dk-shell-pad": "8px 12px",
        "--dk-shell-r": "12px",
        "--dk-shell-depth": "0 1px 1px oklch(from var(--dk-shade) l c h / 0.12), 0 4px 10px -6px oklch(from var(--dk-shade) l c h / 0.32)"
      },
      ".dk-shell[data-size=\"lg\"]": {
        "--dk-shell-pad": "28px",
        "--dk-shell-r": "44px"
      },
      ".dk-shell:focus-visible": {
        "outline": "2px solid var(--ring)",
        "outline-offset": "4px"
      },
      ".dk-screw": {
        "display": "inline-block",
        "flex": "none",
        "width": "8px",
        "height": "8px",
        "border-radius": "50%",
        "background": "linear-gradient(135deg, transparent 44%, oklch(from var(--dk-shade) l c h / 0.45) 45% 55%, transparent 56%), radial-gradient(circle at 40% 35%, var(--dk-alu-hi), var(--dk-alu-lo))",
        "box-shadow": "inset 0 0 0 1px var(--dk-edge), 0 1px 0 var(--dk-hl)"
      },
      ".dk-engrave": {
        "font-size": "10px",
        "font-weight": "700",
        "letter-spacing": "0.22em",
        "text-transform": "uppercase",
        "color": "var(--dk-engrave)",
        "text-shadow": "0 1px 0 var(--dk-engrave-hl)",
        "user-select": "none"
      },
      ".dk-lcd": {
        "--dk-lcd-r": "13px",
        "padding": "5px",
        "border-radius": "calc(var(--dk-lcd-r) + 5px)",
        "background": "linear-gradient(180deg, oklch(from var(--dk-shade) l c h / 0.22), oklch(from var(--dk-shade) l c h / 0.04) 40%, var(--dk-hl))",
        "box-shadow": "inset 0 1px 2px oklch(from var(--dk-shade) l c h / 0.25)"
      },
      ".dk-lcd[data-size=\"sm\"]": {
        "--dk-lcd-r": "5px",
        "padding": "3px"
      },
      ".dk-lcd-screen": {
        "position": "relative",
        "overflow": "hidden",
        "padding": "10px 12px",
        "border-radius": "var(--dk-lcd-r)",
        "color": "var(--dk-ink)",
        "background": "radial-gradient(120% 90% at 50% 0%, var(--dk-lcd), var(--dk-lcd-deep))",
        "box-shadow": "inset 0 2px 6px oklch(0 0 0 / 0.55), inset 0 0 0 1px oklch(0 0 0 / 0.5)",
        "display": "flex",
        "flex-direction": "column",
        "font-family": "var(--font-sans)",
        "transition": "background var(--dur-slow) var(--ease-out)"
      },
      ".dk-lcd[data-size=\"sm\"] .dk-lcd-screen": {
        "padding": "3px 7px",
        "box-shadow": "inset 0 1px 3px oklch(0 0 0 / 0.55), inset 0 0 0 1px oklch(0 0 0 / 0.5)"
      },
      ".dk-lcd-screen::before": {
        "content": "\"\"",
        "position": "absolute",
        "inset": "0",
        "pointer-events": "none",
        "z-index": "2",
        "background": "linear-gradient(168deg, oklch(1 0 0 / 0.07) 0%, oklch(1 0 0 / 0.02) 34%, transparent 35%), repeating-linear-gradient(180deg, oklch(0 0 0 / 0.16) 0 1px, transparent 1px 3px)"
      },
      ".dk-lcd-in": {
        "position": "relative",
        "z-index": "1",
        "display": "flex",
        "flex-direction": "column",
        "height": "100%",
        "opacity": "0.58",
        "transition": "opacity var(--dur-slow) var(--ease-out)"
      },
      ".dk-lcd[data-lit] .dk-lcd-in": {
        "opacity": "1"
      },
      ".dk-lcd[data-lit] .dk-lcd-screen": {
        "background": "radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--dk-lcd) 88%, var(--dk-ink)), var(--dk-lcd-deep))"
      },
      ".dk-readout": {
        "font-size": "38px",
        "font-weight": "500",
        "line-height": "1",
        "letter-spacing": "-0.03em",
        "font-variant-numeric": "tabular-nums"
      },
      ".dk-readout[data-size=\"sm\"]": {
        "font-size": "12px",
        "font-weight": "600",
        "letter-spacing": "0.04em"
      },
      ".dk-readout[data-size=\"md\"]": {
        "font-size": "22px"
      },
      ".dk-readout[data-glow]": {
        "text-shadow": "0 0 8px color-mix(in oklch, var(--dk-ink) 45%, transparent)"
      },
      ".dk-segments": {
        "display": "inline-flex",
        "gap": "2px"
      },
      ".dk-segments > i": {
        "width": "4px",
        "height": "9px",
        "border-radius": "1px",
        "background": "currentColor",
        "opacity": "0.2"
      },
      ".dk-segments > i[data-on]": {
        "opacity": "1"
      },
      ".dk-progress": {
        "display": "flex",
        "gap": "2px",
        "width": "100%",
        "height": "6px"
      },
      ".dk-progress > i": {
        "flex": "1",
        "border-radius": "1px",
        "background": "currentColor",
        "opacity": "0.2"
      },
      ".dk-progress > i[data-on]": {
        "opacity": "1"
      },
      ".dk-led": {
        "--dk-led-size": "10px",
        "--dk-on": "var(--dk-led-red)",
        "--dk-off": "var(--dk-led-red-off)",
        "--dk-glow": "var(--dk-led-red-glow)",
        "position": "relative",
        "display": "inline-block",
        "flex": "none",
        "width": "var(--dk-led-size)",
        "height": "var(--dk-led-size)",
        "border-radius": "50%",
        "background": "radial-gradient(circle at 40% 35%, color-mix(in oklch, var(--dk-off) 70%, white), var(--dk-off) 60%)",
        "box-shadow": "inset 0 1px 2px oklch(0 0 0 / 0.35), 0 1px 0 var(--dk-hl)",
        "transition": "background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)"
      },
      ".dk-led[data-size=\"xs\"]": {
        "--dk-led-size": "6px"
      },
      ".dk-led[data-size=\"md\"]": {
        "--dk-led-size": "14px"
      },
      ".dk-led[data-size=\"lg\"]": {
        "--dk-led-size": "26px"
      },
      ".dk-led[data-tone=\"brand\"]:not([data-state=\"error\"])": {
        "--dk-on": "var(--brand)",
        "--dk-off": "var(--dk-lens-off)",
        "--dk-glow": "color-mix(in oklch, var(--brand) 55%, transparent)"
      },
      ".dk-led[data-tone=\"brand\"][data-state=\"off\"]": {
        "background": "radial-gradient(circle at 40% 35%, color-mix(in oklch, var(--dk-off) 75%, white), var(--dk-off) 65%)"
      },
      ".dk-led::after": {
        "content": "\"\"",
        "position": "absolute",
        "inset": "calc(var(--dk-led-size) * -0.35)",
        "border-radius": "50%",
        "pointer-events": "none",
        "background": "radial-gradient(circle, var(--dk-glow), transparent 68%)",
        "opacity": "0",
        "transition": "opacity var(--dur-slow) var(--ease-out)"
      },
      ".dk-led:not([data-state=\"off\"])": {
        "background": "radial-gradient(circle at 40% 35%, color-mix(in oklch, var(--dk-on) 55%, white), var(--dk-on) 62%)",
        "box-shadow": "inset 0 -1px 2px oklch(0 0 0 / 0.25), 0 0 calc(var(--dk-led-size) * 0.25 + 3px) var(--dk-glow)"
      },
      ".dk-led[data-state=\"on\"]::after, .dk-led[data-state=\"error\"]::after": {
        "opacity": "0.7"
      },
      ".dk-led[data-state=\"breathe\"]::after": {
        "opacity": "1",
        "animation": "dk-breathe 1.6s ease-in-out infinite"
      },
      ".dk-led[data-state=\"blink\"]": {
        "animation": "dk-dim 1.2s steps(2, jump-none) infinite"
      },
      ".dk-key": {
        "-webkit-tap-highlight-color": "transparent",
        "position": "relative",
        "border": "0",
        "padding": "0",
        "cursor": "pointer",
        "color": "var(--dk-engrave)",
        "outline": "none",
        "display": "grid",
        "place-items": "center",
        "flex": "none",
        "transition": "transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), opacity var(--dur-fast) var(--ease-out)"
      },
      ".dk-key:focus-visible": {
        "outline": "2px solid var(--ring)",
        "outline-offset": "3px"
      },
      ".dk-key:disabled": {
        "cursor": "default"
      },
      ".dk-key:disabled > svg": {
        "opacity": "0.35"
      },
      ".dk-key[data-shape=\"ring\"]": {
        "--dk-key-size": "72px",
        "width": "var(--dk-key-size)",
        "height": "var(--dk-key-size)",
        "border-radius": "50%",
        "background": "repeating-radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.05) 0 1px, transparent 1px 2.5px), conic-gradient(from 210deg, var(--dk-alu-hi), var(--dk-alu-lo), var(--dk-alu-hi), var(--dk-alu-lo), var(--dk-alu-hi))",
        "box-shadow": "inset 0 1px 0 var(--dk-hl), inset 0 -1px 1px oklch(from var(--dk-shade) l c h / 0.2), 0 0 0 5px oklch(from var(--dk-shade) l c h / 0.05), 0 0 0 6px var(--dk-hl), 0 3px 6px -1px oklch(from var(--dk-shade) l c h / 0.3), 0 10px 18px -8px oklch(from var(--dk-shade) l c h / 0.35)"
      },
      ".dk-key[data-shape=\"ring\"][data-size=\"sm\"]": {
        "--dk-key-size": "52px"
      },
      ".dk-key[data-shape=\"ring\"][data-size=\"lg\"]": {
        "--dk-key-size": "92px"
      },
      ".dk-key[data-shape=\"square\"]": {
        "--dk-key-size": "40px",
        "width": "var(--dk-key-size)",
        "height": "var(--dk-key-size)",
        "border-radius": "calc(var(--dk-key-size) / 3)",
        "background": "linear-gradient(170deg, var(--dk-alu-hi), var(--dk-alu-lo))",
        "box-shadow": "inset 0 1px 0 var(--dk-hl), inset 0 0 0 1px var(--dk-edge), 0 2px 4px -1px oklch(from var(--dk-shade) l c h / 0.25), 0 6px 12px -8px oklch(from var(--dk-shade) l c h / 0.4)"
      },
      ".dk-key[data-shape=\"square\"][data-size=\"sm\"]": {
        "--dk-key-size": "30px"
      },
      ".dk-key[data-shape=\"square\"][data-size=\"lg\"]": {
        "--dk-key-size": "48px"
      },
      ".dk-key[data-shape=\"square\"] > svg": {
        "width": "14px",
        "height": "14px",
        "filter": "drop-shadow(0 1px 0 var(--dk-engrave-hl))"
      },
      ".dk-key[data-shape=\"square\"][data-size=\"sm\"] > svg": {
        "width": "12px",
        "height": "12px"
      },
      ".dk-key:active:not(:disabled), .dk-key[data-pressed]": {
        "transform": "translateY(1.5px) scale(0.985)"
      },
      ".dk-key[data-shape=\"ring\"]:active, .dk-key[data-shape=\"ring\"][data-pressed], .dk-key[data-shape=\"ring\"][aria-pressed=\"true\"]": {
        "box-shadow": "inset 0 2px 4px oklch(from var(--dk-shade) l c h / 0.22), inset 0 -1px 0 var(--dk-hl), 0 0 0 5px oklch(from var(--dk-shade) l c h / 0.07), 0 0 0 6px var(--dk-hl), 0 1px 2px oklch(from var(--dk-shade) l c h / 0.25)"
      },
      ".dk-key[data-shape=\"ring\"][aria-pressed=\"true\"]": {
        "transform": "translateY(1.5px)"
      },
      ".dk-key[data-shape=\"square\"]:active:not(:disabled), .dk-key[data-shape=\"square\"][data-pressed], .dk-key[data-shape=\"square\"][aria-pressed=\"true\"]": {
        "box-shadow": "inset 0 2px 3px oklch(from var(--dk-shade) l c h / 0.2), inset 0 0 0 1px var(--dk-edge), 0 1px 1px oklch(from var(--dk-shade) l c h / 0.15)"
      },
      ".dk-key[data-shape=\"square\"][aria-pressed=\"true\"]": {
        "transform": "translateY(1px)",
        "color": "var(--dk-ink)"
      },
      ".dk-key[data-shape=\"square\"][aria-pressed=\"true\"] > svg": {
        "filter": "drop-shadow(0 0 4px color-mix(in oklch, var(--brand) 60%, transparent))",
        "color": "color-mix(in oklch, var(--brand) 70%, var(--dk-engrave))"
      },
      ".dk-switch": {
        "--dk-sw-w": "46px",
        "--dk-sw-h": "22px",
        "-webkit-tap-highlight-color": "transparent",
        "position": "relative",
        "flex": "none",
        "border": "0",
        "padding": "0",
        "cursor": "pointer",
        "outline": "none",
        "width": "var(--dk-sw-w)",
        "height": "var(--dk-sw-h)",
        "border-radius": "6px",
        "background": "linear-gradient(180deg, var(--dk-lcd-deep), var(--dk-lcd))",
        "box-shadow": "inset 0 2px 3px oklch(0 0 0 / 0.5), inset 0 0 0 1px oklch(0 0 0 / 0.45), 0 1px 0 var(--dk-hl)"
      },
      ".dk-switch[data-size=\"sm\"]": {
        "--dk-sw-w": "38px",
        "--dk-sw-h": "18px",
        "border-radius": "5px"
      },
      ".dk-switch:focus-visible": {
        "outline": "2px solid var(--ring)",
        "outline-offset": "3px"
      },
      ".dk-switch:disabled": {
        "cursor": "default"
      },
      ".dk-switch[aria-busy=\"true\"]": {
        "cursor": "progress"
      },
      ".dk-switch-lit": {
        "position": "absolute",
        "inset": "4px auto 4px 5px",
        "width": "calc(var(--dk-sw-w) / 2 - 8px)",
        "border-radius": "2px",
        "pointer-events": "none",
        "background": "var(--dk-ink)",
        "opacity": "0",
        "box-shadow": "0 0 6px color-mix(in oklch, var(--brand) 60%, transparent)",
        "transition": "opacity var(--dur-base) var(--ease-out)"
      },
      ".dk-switch[aria-checked=\"true\"] .dk-switch-lit": {
        "opacity": "0.9"
      },
      ".dk-switch-thumb": {
        "position": "absolute",
        "top": "2px",
        "bottom": "2px",
        "left": "2px",
        "width": "calc(var(--dk-sw-w) / 2)",
        "border-radius": "4px",
        "pointer-events": "none",
        "background": "repeating-linear-gradient(90deg, oklch(from var(--dk-shade) l c h / 0.22) 0 1px, var(--dk-hl) 1px 2px, transparent 2px 4px) center / 12px 60% no-repeat, linear-gradient(180deg, var(--dk-alu-hi), var(--dk-alu-lo))",
        "box-shadow": "inset 0 1px 0 var(--dk-hl), inset 0 0 0 1px var(--dk-edge), 0 1px 2px oklch(from var(--dk-shade) l c h / 0.45)",
        "transition": "transform var(--dur-base) var(--ease-out)"
      },
      ".dk-switch[aria-checked=\"true\"] .dk-switch-thumb": {
        "transform": "translateX(calc(var(--dk-sw-w) / 2 - 4px))"
      },
      ".dk-switch:disabled:not([aria-busy=\"true\"]) .dk-switch-thumb": {
        "opacity": "0.6"
      },
      ".dk-switch:active:not(:disabled) .dk-switch-thumb": {
        "box-shadow": "inset 0 1px 0 var(--dk-hl), inset 0 0 0 1px var(--dk-edge), 0 0 1px oklch(from var(--dk-shade) l c h / 0.45)"
      },
      ".dk-encoder": {
        "position": "relative",
        "flex": "none",
        "outline": "none",
        "touch-action": "none",
        "cursor": "ns-resize"
      },
      ".dk-encoder:focus-visible": {
        "outline": "2px solid var(--ring)",
        "outline-offset": "2px"
      },
      ".dk-encoder[data-dragging]": {
        "cursor": "grabbing"
      },
      ".dk-encoder[aria-disabled=\"true\"]": {
        "cursor": "default",
        "opacity": "0.6"
      },
      ".dk-encoder[data-variant=\"wheel\"]": {
        "width": "16px",
        "height": "104px",
        "border-radius": "7px",
        "overflow": "hidden",
        "background": "linear-gradient(90deg, var(--dk-alu-lo), var(--dk-alu-hi) 45%, var(--dk-alu-lo))",
        "box-shadow": "inset 0 0 0 1px var(--dk-edge), 2px 2px 4px -1px oklch(from var(--dk-shade) l c h / 0.35)"
      },
      ".dk-encoder[data-variant=\"wheel\"]::after": {
        "content": "\"\"",
        "position": "absolute",
        "inset": "0",
        "pointer-events": "none",
        "background": "linear-gradient(180deg, oklch(from var(--dk-shade) l c h / 0.45), transparent 26%, transparent 74%, oklch(from var(--dk-shade) l c h / 0.45))"
      },
      ".dk-knurl": {
        "position": "absolute",
        "left": "0",
        "right": "0",
        "top": "-12px",
        "bottom": "-12px",
        "background": "repeating-linear-gradient(180deg, oklch(from var(--dk-shade) l c h / 0.35) 0 1px, var(--dk-hl) 1px 2px, transparent 2px 4px)",
        "transition": "transform var(--dur-press) var(--ease-out)"
      },
      ".dk-encoder[data-variant=\"knob\"]": {
        "--dk-knob-size": "44px",
        "width": "var(--dk-knob-size)",
        "height": "var(--dk-knob-size)",
        "border-radius": "50%",
        "background": "repeating-conic-gradient(from 0deg, oklch(from var(--dk-shade) l c h / 0.28) 0 2deg, transparent 2deg 10deg)",
        "box-shadow": "0 0 0 1px var(--dk-edge), 0 3px 6px -2px oklch(from var(--dk-shade) l c h / 0.4), 0 8px 14px -8px oklch(from var(--dk-shade) l c h / 0.35)"
      },
      ".dk-encoder[data-variant=\"knob\"][data-size=\"sm\"]": {
        "--dk-knob-size": "32px"
      },
      ".dk-encoder[data-variant=\"knob\"][data-size=\"lg\"]": {
        "--dk-knob-size": "64px"
      },
      ".dk-knob-cap": {
        "position": "absolute",
        "inset": "3px",
        "border-radius": "50%",
        "background": "repeating-radial-gradient(circle at 50% 50%, oklch(1 0 0 / 0.05) 0 1px, transparent 1px 2.5px), conic-gradient(from 210deg, var(--dk-alu-hi), var(--dk-alu-lo), var(--dk-alu-hi), var(--dk-alu-lo), var(--dk-alu-hi))",
        "box-shadow": "inset 0 1px 0 var(--dk-hl), inset 0 -1px 1px oklch(from var(--dk-shade) l c h / 0.2)",
        "transition": "transform var(--dur-press) var(--ease-out)"
      },
      ".dk-knob-cap::before": {
        "content": "\"\"",
        "position": "absolute",
        "left": "50%",
        "top": "12%",
        "width": "2px",
        "height": "26%",
        "margin-left": "-1px",
        "border-radius": "1px",
        "background": "var(--dk-engrave)",
        "box-shadow": "0 1px 0 var(--dk-engrave-hl)"
      }
    },
    "@keyframes dk-breathe": {
      "0%, 100%": {
        "opacity": "0.55"
      },
      "50%": {
        "opacity": "1"
      }
    },
    "@keyframes dk-dim": {
      "0%": {
        "opacity": "1"
      },
      "100%": {
        "opacity": "0.55"
      }
    },
    "@media (prefers-reduced-motion: reduce)": {
      ".dk-key, .dk-knurl, .dk-knob-cap, .dk-led, .dk-lcd-in, .dk-lcd-screen, .dk-switch-thumb, .dk-switch-lit": {
        "transition": "none"
      },
      ".dk-led[data-state=\"breathe\"]::after, .dk-led[data-state=\"blink\"]": {
        "animation": "none"
      },
      ".dk-key:active:not(:disabled), .dk-key[data-pressed]": {
        "transform": "none"
      }
    }
  },
  "meta": {
    "uso": {
      "quando": "Controle cujo gesto físico é a função: gravar, girar, acender, ligar",
      "evite": "Lista, tabela, formulário e navegação; switch comum: liquid-toggle"
    }
  },
  "categories": [
    "controles",
    "aparelho",
    "hardware",
    "led",
    "encoder",
    "knob",
    "switch",
    "lcd",
    "rack"
  ],
  "type": "registry:ui"
}