{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-beam-demo",
  "type": "registry:component",
  "registryDependencies": [
    "grid-beam"
  ],
  "files": [
    {
      "path": "registry/default/example/grid-beam-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { useTheme } from \"next-themes\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  GridBeam,\n  GridBeamCanvas,\n  GridBeamContent,\n  GridBeamDividers,\n  useGridBeam,\n  type GridBeamPaletteKey,\n} from \"@/registry/default/ui/grid-beam\"\n\nconst DEMO_DATA = [\n  [\"Project\", \"Status\", \"Lead\", \"Progress\"],\n  [\"Quantum Core\", \"Active\", \"Aria Chen\", \"78%\"],\n  [\"Nebula API\", \"Review\", \"Kai Tanaka\", \"92%\"],\n  [\"Void Engine\", \"Active\", \"Zara Osei\", \"45%\"],\n  [\"Pulse Sync\", \"Paused\", \"Lev Petrov\", \"61%\"],\n] as const\n\n/** Status → shadcn chart tokens (light & dark follow `globals.css` variables). */\nconst STATUS_BADGE_CLASS: Record<string, string> = {\n  Active: \"border border-chart-2/25 bg-chart-2/10 text-chart-2\",\n  Review: \"border border-chart-1/25 bg-chart-1/10 text-chart-1\",\n  Paused: \"border border-chart-4/25 bg-chart-4/10 text-chart-4\",\n}\n\nconst PROGRESS_FILL: Record<GridBeamPaletteKey, string> = {\n  colorful: \"linear-gradient(90deg, var(--chart-3), var(--chart-1))\",\n  ocean: \"linear-gradient(90deg, var(--chart-2), var(--chart-1))\",\n  sunset: \"linear-gradient(90deg, var(--chart-4), var(--chart-5))\",\n  mono: \"linear-gradient(90deg, var(--muted-foreground), var(--foreground))\",\n}\n\nconst VARIANTS: GridBeamPaletteKey[] = [\"colorful\", \"mono\", \"ocean\", \"sunset\"]\n\nfunction pillClass(active: boolean) {\n  return cn(\n    \"border-border font-inherit cursor-pointer rounded-full border px-3.5 py-1.5 text-xs transition-colors\",\n    active\n      ? \"bg-accent text-accent-foreground\"\n      : \"text-muted-foreground fine-hover:hover:bg-muted/60 bg-transparent\"\n  )\n}\n\nfunction beamThemeFromResolved(resolved: string | undefined): \"dark\" | \"light\" {\n  return resolved === \"dark\" ? \"dark\" : \"light\"\n}\n\n/** Headless API: compose layers yourself (same animation as {@link GridBeam}). */\nfunction HeadlessMetricsStrip({\n  variant,\n  beamTheme,\n  active,\n  breathe,\n}: {\n  variant: GridBeamPaletteKey\n  beamTheme: \"dark\" | \"light\"\n  active: boolean\n  breathe: boolean\n}) {\n  const { canvasRef, rows, cols } = useGridBeam({\n    rows: 2,\n    cols: 3,\n    colorVariant: variant,\n    theme: beamTheme,\n    active,\n    breathe,\n    duration: 4.2,\n    strength: 0.85,\n  })\n\n  return (\n    <div className=\"border-border bg-card/40 relative overflow-hidden rounded-xl border\">\n      <GridBeamDividers cols={cols} rows={rows} />\n      <GridBeamCanvas borderRadius={12} ref={canvasRef} />\n      <GridBeamContent>\n        <div\n          className=\"grid h-full\"\n          style={{\n            gridTemplateColumns: \"repeat(3, 1fr)\",\n            gridTemplateRows: \"repeat(2, 1fr)\",\n          }}\n        >\n          {[\n            { label: \"Latency\", value: \"12ms\", delta: \"-3ms\" },\n            { label: \"Throughput\", value: \"2.4k\", delta: \"+180\" },\n            { label: \"Uptime\", value: \"99.97%\", delta: \"+0.02%\" },\n            { label: \"Requests\", value: \"847k\", delta: \"+12k\" },\n            { label: \"Errors\", value: \"0.03%\", delta: \"-0.01%\" },\n            { label: \"Cache Hit\", value: \"94.2%\", delta: \"+1.8%\" },\n          ].map((item) => (\n            <div\n              className=\"flex flex-col gap-1.5 px-[18px] py-5\"\n              key={item.label}\n            >\n              <span className=\"text-muted-foreground text-[10.5px] font-medium tracking-widest uppercase\">\n                {item.label}\n              </span>\n              <span className=\"text-foreground text-[22px] font-bold tracking-tight tabular-nums\">\n                {item.value}\n              </span>\n              <span className=\"text-chart-2 text-[11.5px] tabular-nums\">\n                {item.delta}\n              </span>\n            </div>\n          ))}\n        </div>\n      </GridBeamContent>\n    </div>\n  )\n}\n\nfunction DemoTableCell({\n  cell,\n  isProgress,\n  isStatus,\n  progressFill,\n  statusClass,\n}: {\n  cell: string\n  isProgress: boolean\n  isStatus: boolean\n  progressFill: string\n  statusClass: string | undefined\n}) {\n  if (isStatus && statusClass) {\n    return (\n      <span\n        className={cn(\n          \"rounded-lg px-2.5 py-0.5 text-xs font-medium\",\n          statusClass\n        )}\n      >\n        {cell}\n      </span>\n    )\n  }\n  if (isProgress) {\n    return (\n      <div className=\"flex w-full items-center gap-2.5\">\n        <div className=\"bg-muted h-[3px] flex-1 overflow-hidden rounded-sm\">\n          <div\n            className=\"h-full rounded-sm\"\n            style={{\n              width: cell,\n              background: progressFill,\n            }}\n          />\n        </div>\n        <span className=\"text-muted-foreground min-w-[28px] text-[11px] tabular-nums\">\n          {cell}\n        </span>\n      </div>\n    )\n  }\n  return cell\n}\n\nexport default function GridBeamDemo() {\n  const [variant, setVariant] = useState<GridBeamPaletteKey>(\"colorful\")\n  const [isActive, setIsActive] = useState(true)\n  const [breathe, setBreathe] = useState(true)\n\n  const { resolvedTheme, setTheme } = useTheme()\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const beamTheme = beamThemeFromResolved(resolvedTheme)\n  const progressFill =\n    PROGRESS_FILL[variant] ??\n    \"linear-gradient(90deg, var(--muted-foreground), var(--foreground))\"\n\n  return (\n    <main className=\"text-foreground flex w-full flex-col items-center justify-center font-sans transition-colors\">\n      <h1 className=\"from-foreground to-muted-foreground mb-1 bg-gradient-to-br from-20% bg-clip-text text-[clamp(22px,3.5vw,32px)] font-bold tracking-tight text-transparent\">\n        GridBeam\n      </h1>\n      <p className=\"text-muted-foreground mb-7 text-[13px] tracking-wide\">\n        Soft glowing beams along grid dividers\n      </p>\n\n      <div className=\"mb-6 flex flex-wrap items-center justify-center gap-1.5\">\n        {VARIANTS.map((v) => (\n          <button\n            className={pillClass(variant === v)}\n            key={v}\n            onClick={() => setVariant(v)}\n            type=\"button\"\n          >\n            {v}\n          </button>\n        ))}\n        <span aria-hidden className=\"bg-border mx-0.5 h-6 w-px\" />\n        <button\n          className={pillClass(false)}\n          disabled={!mounted}\n          onClick={() => setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")}\n          type=\"button\"\n        >\n          {mounted && resolvedTheme === \"dark\" ? \"☀ light\" : \"● dark\"}\n        </button>\n        <button\n          className={pillClass(isActive)}\n          onClick={() => setIsActive(!isActive)}\n          type=\"button\"\n        >\n          {isActive ? \"⏸ pause\" : \"▶ play\"}\n        </button>\n        <button\n          className={pillClass(breathe)}\n          onClick={() => setBreathe(!breathe)}\n          type=\"button\"\n        >\n          {breathe ? \"~ breathe\" : \"— static\"}\n        </button>\n      </div>\n\n      <div className=\"w-full max-w-[660px] space-y-7\">\n        <section className=\"space-y-2\">\n          <h2 className=\"text-foreground text-sm font-medium\">\n            Composed <code className=\"text-muted-foreground\">GridBeam</code>\n          </h2>\n          <GridBeam\n            active={isActive}\n            borderRadius={12}\n            breathe={breathe}\n            className=\"border-border bg-card/40 border\"\n            colorVariant={variant}\n            cols={DEMO_DATA[0].length}\n            duration={3.4}\n            rows={DEMO_DATA.length}\n            strength={1}\n            theme={beamTheme}\n          >\n            <div\n              className=\"grid h-full\"\n              style={{\n                gridTemplateColumns: `repeat(${DEMO_DATA[0].length}, 1fr)`,\n                gridTemplateRows: `repeat(${DEMO_DATA.length}, 1fr)`,\n              }}\n            >\n              {DEMO_DATA.flat().map((cell, i) => {\n                const row = Math.floor(i / DEMO_DATA[0].length)\n                const col = i % DEMO_DATA[0].length\n                const isHeader = row === 0\n                const isStatus = col === 1 && !isHeader\n                const isProgress = col === 3 && !isHeader\n                const statusClass = isStatus\n                  ? STATUS_BADGE_CLASS[cell]\n                  : undefined\n                return (\n                  <div\n                    className={cn(\n                      \"flex items-center px-[18px] py-3.5\",\n                      isHeader\n                        ? \"text-muted-foreground text-[10.5px] font-semibold tracking-widest uppercase\"\n                        : \"text-sm\"\n                    )}\n                    key={`${row}-${col}-${cell}`}\n                  >\n                    <DemoTableCell\n                      cell={cell}\n                      isProgress={isProgress}\n                      isStatus={isStatus}\n                      progressFill={progressFill}\n                      statusClass={statusClass}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </GridBeam>\n        </section>\n\n        <section className=\"space-y-2\">\n          <h2 className=\"text-foreground text-sm font-medium\">\n            Headless{\" \"}\n            <code className=\"text-muted-foreground\">\n              useGridBeam + Dividers / Canvas / Content\n            </code>\n          </h2>\n          <HeadlessMetricsStrip\n            active={isActive}\n            beamTheme={beamTheme}\n            breathe={breathe}\n            variant={variant}\n          />\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}