{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "zoom-hud",
  "title": "Zoom HUD",
  "description": "Zoom controls with current percentage, increment buttons, and reset action for canvas views.",
  "dependencies": [
    "@vllnt/ui@^0.3.0",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/zoom-hud/zoom-hud.tsx",
      "content": "import { Minus, Plus, RotateCcw } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\n\nexport type ZoomHUDProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  onReset?: () => void;\n  onZoomIn?: () => void;\n  onZoomOut?: () => void;\n  zoom: number;\n};\n\nconst ZoomHUD = ({\n  className,\n  onReset,\n  onZoomIn,\n  onZoomOut,\n  ref,\n  zoom,\n  ...props\n}: ZoomHUDProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(\n      \"inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono\",\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <Button\n      aria-label=\"Zoom out\"\n      onClick={onZoomOut}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"ghost\"\n    >\n      <Minus className=\"size-4\" />\n    </Button>\n    <div className=\"min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground\">\n      {Math.round(zoom * 100)}%\n    </div>\n    <Button\n      aria-label=\"Zoom in\"\n      onClick={onZoomIn}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"ghost\"\n    >\n      <Plus className=\"size-4\" />\n    </Button>\n    <Button\n      aria-label=\"Reset zoom\"\n      onClick={onReset}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"ghost\"\n    >\n      <RotateCcw className=\"size-4\" />\n    </Button>\n  </div>\n);\n\nZoomHUD.displayName = \"ZoomHUD\";\n\nexport { ZoomHUD };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}