{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mini-map-panel",
  "type": "registry:component",
  "title": "Mini Map Panel",
  "description": "Viewport overview panel showing canvas bounds, markers, and the current zoom window.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/mini-map-panel/mini-map-panel.tsx",
      "content": "import { forwardRef } from \"react\";\n\nimport { 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 = forwardRef<HTMLDivElement, MiniMapPanelProps>(\n  (\n    { className, markers = [], title = \"Overview\", viewport, world, ...props },\n    ref,\n  ) => {\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);\n\nMiniMapPanel.displayName = \"MiniMapPanel\";\n\nexport { MiniMapPanel };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}