{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-command",
  "title": "Copy command",
  "author": "WLKR Labs",
  "description": "A copyable command with honest clipboard feedback and a manual fallback.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/wlkr/copy-command.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nconst styles = `\n.wlkr-copy-icon{width:16px;height:16px;overflow:visible}\n.wlkr-copy-icon g{transform-origin:12px 12px;transition:opacity 180ms ease,transform 180ms ease}\n.wlkr-copy-icon g[data-visible=false]{opacity:0;transform:scale(.65) rotate(-12deg)}\n.wlkr-copy-icon g[data-visible=true]{opacity:1;transform:scale(1) rotate(0)}\n.wlkr-copy-success{color:var(--success,#087d3d)}\n.dark .wlkr-copy-success{color:var(--success,#33f282)}\n.wlkr-copy-error{color:var(--destructive,#b42318)}\n@media(prefers-reduced-motion:reduce){.wlkr-copy-icon g{transition:none}}\n`\n\n/** A fixed-slot copy control. Feedback is visual in the icon and announced off-screen. */\nexport function CopyCommand({ command, className }: { command: string; className?: string }) {\n  const [state, setState] = React.useState<\"idle\" | \"copying\" | \"copied\" | \"error\">(\"idle\")\n  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n  const mounted = React.useRef(true)\n  const locked = React.useRef(false)\n  React.useEffect(() => { mounted.current = true; return () => { mounted.current = false; if (timer.current) clearTimeout(timer.current) } }, [])\n  async function copy() {\n    if (locked.current) return\n    locked.current = true\n    if (timer.current) clearTimeout(timer.current)\n    setState(\"copying\")\n    try {\n      await navigator.clipboard.writeText(command)\n      if (mounted.current) {\n        setState(\"copied\")\n        timer.current = setTimeout(() => setState(\"idle\"), 2200)\n      }\n    } catch { if (mounted.current) setState(\"error\") }\n    finally { locked.current = false }\n  }\n  return (\n    <div className={cn(\"relative flex min-w-0 items-center gap-4\", className)}>\n      <style>{styles}</style>\n      <code className=\"min-w-0 flex-1 overflow-x-auto py-3 text-sm whitespace-pre\">{command}</code>\n      <Button type=\"button\" variant=\"ghost\" size=\"icon\" onClick={copy} disabled={state === \"copying\"} style={{ width: 44, height: 44, flexShrink: 0, padding: 0 }} aria-label={state === \"copied\" ? \"Command copied; copy again\" : state === \"error\" ? \"Copy failed; try again\" : \"Copy command\"}>\n        <svg className=\"wlkr-copy-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n          <g data-visible={state === \"idle\" || state === \"copying\"}><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\" /><path d=\"M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3\" /></g>\n          <g data-visible={state === \"copied\"} className=\"wlkr-copy-success\"><path d=\"m5 12 4 4L19 6\" /></g>\n          <g data-visible={state === \"error\"} className=\"wlkr-copy-error\"><path d=\"m6 6 12 12M18 6 6 18\" /></g>\n        </svg>\n      </Button>\n      <span role=\"status\" className=\"sr-only\">{state === \"error\" ? \"Clipboard unavailable. Select and copy the command, or try again.\" : state === \"copied\" ? \"Copied to clipboard.\" : \"\"}</span>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/wlkr/copy-command.tsx"
    }
  ],
  "type": "registry:component"
}