{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mini-map-panel",
  "title": "Mini Map Panel",
  "description": "Viewport overview panel showing canvas bounds, markers, and the current zoom window.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/mini-map-panel/mini-map-panel.tsx",
      "content": "import { cn } from \"@vllnt/ui\";\n\nexport type MiniMapMarker = {\n  id: string;\n  label?: string;\n  x: number;\n  y: number;\n};\n\nexport type MiniMapPanelProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  markers?: MiniMapMarker[];\n  title?: string;\n  viewport: {\n    height: number;\n    width: number;\n    x: number;\n    y: number;\n    zoom: number;\n  };\n  world: {\n    height: number;\n    width: number;\n  };\n};\n\nconst MiniMapPanel = ({\n  className,\n  markers = [],\n  ref,\n  title = \"Overview\",\n  viewport,\n  world,\n  ...props\n}: MiniMapPanelProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const viewportWidth = Math.max(\n    (viewport.width / viewport.zoom / world.width) * 100,\n    8,\n  );\n  const viewportHeight = Math.max(\n    (viewport.height / viewport.zoom / world.height) * 100,\n    8,\n  );\n  const viewportLeft = Math.min(\n    Math.max((viewport.x / world.width) * 100, 0),\n    100 - viewportWidth,\n  );\n  const viewportTop = Math.min(\n    Math.max((viewport.y / world.height) * 100, 0),\n    100 - viewportHeight,\n  );\n\n  return (\n    <div\n      className={cn(\n        \"w-52 rounded-sm border border-border bg-background p-3 font-mono\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div>\n          <div className=\"text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground\">\n            {title}\n          </div>\n          <div className=\"mt-1 text-xs text-muted-foreground\">\n            Zoom {Math.round(viewport.zoom * 100)}%\n          </div>\n        </div>\n      </div>\n      <div className=\"relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background\">\n        {markers.map((marker) => (\n          <div\n            className=\"absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground\"\n            key={marker.id}\n            style={{\n              left: `${(marker.x / world.width) * 100}%`,\n              top: `${(marker.y / world.height) * 100}%`,\n            }}\n            title={marker.label}\n          />\n        ))}\n        <div\n          className=\"absolute border border-foreground/80 bg-transparent\"\n          style={{\n            height: `${viewportHeight}%`,\n            left: `${viewportLeft}%`,\n            top: `${viewportTop}%`,\n            width: `${viewportWidth}%`,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nMiniMapPanel.displayName = \"MiniMapPanel\";\n\nexport { MiniMapPanel };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}