{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blueprint-grid",
  "title": "Blueprint Grid",
  "description": "A technical blueprint lattice — ruled lines, a dot matrix, or a perspective floor — with a diagonal light sweep and a cursor spotlight. Pure CSS.",
  "registryDependencies": ["@godui/godui-theme"],
  "files": [
    {
      "path": "packages/components/src/blueprint-grid/blueprint-grid.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport type BlueprintGridVariant = \"lines\" | \"dots\" | \"perspective\";\n\nexport type BlueprintGridProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Grid style: ruled `lines`, a `dots` matrix, or a floor-fading `perspective` grid. */\n  variant?: BlueprintGridVariant;\n  /** Cell size in px. */\n  cellSize?: number;\n  /** Line / dot color, any CSS color string. Defaults to the `--color-border` token. */\n  color?: string;\n  /** Render the diagonal light sweep traveling across the lattice. */\n  sweep?: boolean;\n  /** Seconds for one sweep pass. */\n  sweepDuration?: number;\n  /** Light up the grid in a glowing spotlight that follows the cursor. */\n  spotlight?: boolean;\n  /** Color the spotlit cells light up in. Defaults to the `--color-primary` token. */\n  spotlightColor?: string;\n  /** Radius (px) of the cursor spotlight. */\n  spotlightRadius?: number;\n};\n\n/**\n * A technical blueprint lattice — ruled lines, a dot matrix, or a perspective\n * floor — with a diagonal light sweep and an optional cursor spotlight that\n * lights up nearby cells. Pure CSS. Drop it as the first child of a\n * `relative overflow-hidden` container.\n */\nconst BlueprintGrid = React.forwardRef<HTMLDivElement, BlueprintGridProps>(\n  (\n    {\n      className,\n      style,\n      variant = \"lines\",\n      cellSize = 32,\n      color = \"var(--border)\",\n      sweep = true,\n      sweepDuration = 8,\n      spotlight = true,\n      spotlightColor = \"var(--primary)\",\n      spotlightRadius = 200,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);\n\n    // The spotlight reacts to the pointer over the background *and* over any\n    // content stacked above it: listen on the nearest positioned ancestor (the\n    // `relative` wrapper) so movement anywhere in the hero is tracked.\n    React.useEffect(() => {\n      const root = rootRef.current;\n      if (!root || !spotlight) return;\n      const target = root.offsetParent ?? root;\n      const onMove = (e: Event) => {\n        const ev = e as PointerEvent;\n        const rect = root.getBoundingClientRect();\n        root.style.setProperty(\"--bx\", `${ev.clientX - rect.left}px`);\n        root.style.setProperty(\"--by\", `${ev.clientY - rect.top}px`);\n        root.style.setProperty(\"--bo\", \"0.55\");\n      };\n      const onLeave = () => root.style.setProperty(\"--bo\", \"0\");\n      target.addEventListener(\"pointermove\", onMove);\n      target.addEventListener(\"pointerleave\", onLeave);\n      return () => {\n        target.removeEventListener(\"pointermove\", onMove);\n        target.removeEventListener(\"pointerleave\", onLeave);\n      };\n    }, [spotlight]);\n\n    const buildGrid = (c: string) =>\n      variant === \"dots\"\n        ? `radial-gradient(${c} 1px, transparent 1.5px)`\n        : `linear-gradient(to right, ${c} 1px, transparent 1px), linear-gradient(to bottom, ${c} 1px, transparent 1px)`;\n    const gridSize =\n      variant === \"dots\"\n        ? `${cellSize}px ${cellSize}px`\n        : `${cellSize}px ${cellSize}px, ${cellSize}px ${cellSize}px`;\n\n    const baseGrid: React.CSSProperties = {\n      backgroundImage: buildGrid(color),\n      backgroundSize: gridSize,\n    };\n\n    // Spotlight: an accent-colored copy of the grid plus a soft glow, both\n    // clipped to a disc that follows the cursor.\n    const spotMask = `radial-gradient(circle ${spotlightRadius}px at var(--bx, 50%) var(--by, 50%), #000 0%, #000 35%, transparent 75%)`;\n    const spotStyle: React.CSSProperties = {\n      backgroundImage: `radial-gradient(circle ${spotlightRadius}px at var(--bx, 50%) var(--by, 50%), color-mix(in oklab, ${spotlightColor}, transparent 90%), transparent 65%), ${buildGrid(`color-mix(in oklab, ${spotlightColor}, transparent 35%)`)}`,\n      backgroundSize: `auto, ${gridSize}`,\n      opacity: \"var(--bo)\",\n      WebkitMaskImage: spotMask,\n      maskImage: spotMask,\n    };\n\n    return (\n      <div\n        ref={rootRef}\n        data-slot=\"blueprint-grid\"\n        aria-hidden=\"true\"\n        className={`absolute inset-0 z-base overflow-hidden ${className ?? \"\"}`}\n        style={\n          {\n            \"--bo\": \"0\",\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {variant === \"perspective\" ? (\n          <div className=\"absolute inset-0 [perspective:600px] [perspective-origin:50%_0%]\">\n            <div\n              className=\"absolute right-[-50%] bottom-0 left-[-50%] h-[160%] origin-bottom opacity-50 [transform:rotateX(72deg)] [mask-image:linear-gradient(to_top,#000,transparent)]\"\n              style={baseGrid}\n            />\n          </div>\n        ) : (\n          <div className=\"absolute inset-0 opacity-50\" style={baseGrid} />\n        )}\n\n        {/* Cursor spotlight: accent-colored cells + glow following the pointer. */}\n        {spotlight && variant !== \"perspective\" && (\n          <div\n            className=\"absolute inset-0 [transition:opacity_300ms_ease-out]\"\n            style={spotStyle}\n          />\n        )}\n\n        {/* Diagonal light sweep. */}\n        {sweep && (\n          <div\n            className=\"absolute top-0 left-0 h-[140%] w-[55%] motion-reduce:hidden animate-blueprint-sweep [will-change:transform]\"\n            style={\n              {\n                \"--blueprint-speed\": `${sweepDuration}s`,\n                backgroundImage: `linear-gradient(90deg, transparent, color-mix(in oklab, ${color}, transparent 20%), transparent)`,\n                filter: \"blur(14px)\",\n              } as React.CSSProperties\n            }\n          />\n        )}\n      </div>\n    );\n  },\n);\nBlueprintGrid.displayName = \"BlueprintGrid\";\n\nexport { BlueprintGrid };\n",
      "type": "registry:ui",
      "target": "components/godui/blueprint-grid.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-blueprint-sweep": "blueprint-sweep var(--blueprint-speed, 8s) linear infinite"
    }
  },
  "css": {
    "@keyframes blueprint-sweep": {
      "0%": {
        "transform": "translate(-50%, -50%) rotate(var(--blueprint-angle, 25deg))",
        "opacity": "0"
      },
      "15%, 85%": {
        "opacity": "1"
      },
      "100%": {
        "transform": "translate(150%, 150%) rotate(var(--blueprint-angle, 25deg))",
        "opacity": "0"
      }
    }
  },
  "type": "registry:ui"
}