{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-matrix",
  "title": "Dot Matrix",
  "description": "A 5×7 bitmap numeral face for sensor readouts. Dot, square and LED variants.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/dot-matrix.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A 5×7 bitmap face. The reference set uses a dotted numeral inside the\n * glucose ring — it reads as an instrument readout rather than as type, which\n * is exactly the distinction worth keeping: sensor values get the matrix,\n * everything else gets the display face.\n */\nconst GLYPHS: Record<string, string[]> = {\n  \"0\": [\"01110\", \"10001\", \"10011\", \"10101\", \"11001\", \"10001\", \"01110\"],\n  \"1\": [\"00100\", \"01100\", \"00100\", \"00100\", \"00100\", \"00100\", \"01110\"],\n  \"2\": [\"01110\", \"10001\", \"00001\", \"00010\", \"00100\", \"01000\", \"11111\"],\n  \"3\": [\"11111\", \"00010\", \"00100\", \"00010\", \"00001\", \"10001\", \"01110\"],\n  \"4\": [\"00010\", \"00110\", \"01010\", \"10010\", \"11111\", \"00010\", \"00010\"],\n  \"5\": [\"11111\", \"10000\", \"11110\", \"00001\", \"00001\", \"10001\", \"01110\"],\n  \"6\": [\"00110\", \"01000\", \"10000\", \"11110\", \"10001\", \"10001\", \"01110\"],\n  \"7\": [\"11111\", \"00001\", \"00010\", \"00100\", \"01000\", \"01000\", \"01000\"],\n  \"8\": [\"01110\", \"10001\", \"10001\", \"01110\", \"10001\", \"10001\", \"01110\"],\n  \"9\": [\"01110\", \"10001\", \"10001\", \"01111\", \"00001\", \"00010\", \"01100\"],\n  \"%\": [\"11001\", \"11010\", \"00010\", \"00100\", \"01000\", \"01011\", \"10011\"],\n  \"-\": [\"00000\", \"00000\", \"00000\", \"11111\", \"00000\", \"00000\", \"00000\"],\n  \"+\": [\"00000\", \"00100\", \"00100\", \"11111\", \"00100\", \"00100\", \"00000\"],\n  \".\": [\"00000\", \"00000\", \"00000\", \"00000\", \"00000\", \"01100\", \"01100\"],\n  \":\": [\"00000\", \"01100\", \"01100\", \"00000\", \"01100\", \"01100\", \"00000\"],\n  \"/\": [\"00001\", \"00010\", \"00010\", \"00100\", \"01000\", \"01000\", \"10000\"],\n  \" \": [\"00000\", \"00000\", \"00000\", \"00000\", \"00000\", \"00000\", \"00000\"],\n}\n\nconst matrix = cva(\"block overflow-visible\", {\n  variants: {\n    tone: {\n      chalk: \"text-white\",\n      ink: \"text-ink dark:text-white\",\n      current: \"text-current\",\n      volt: \"text-volt\",\n      flare: \"text-flare\",\n    },\n  },\n  defaultVariants: { tone: \"chalk\" },\n})\n\nexport interface DotMatrixProps\n  extends React.ComponentProps<\"svg\">,\n    VariantProps<typeof matrix> {\n  value: string | number\n  /** `dot` is the reference. `square` reads more industrial; `led` adds bloom. */\n  variant?: \"dot\" | \"square\" | \"led\"\n  /** Radius of a single cell mark. */\n  dotSize?: number\n  /** Centre-to-centre spacing between cells. */\n  spacing?: number\n  /** Cells between characters. */\n  tracking?: number\n  /** Renders the unlit cells faintly, like a real matrix panel. */\n  showOffCells?: boolean\n}\n\nexport function DotMatrix({\n  value,\n  variant = \"dot\",\n  dotSize = 1.6,\n  spacing = 4,\n  tracking = 1,\n  showOffCells = false,\n  tone,\n  className,\n  ...props\n}: DotMatrixProps) {\n  const chars = String(value).split(\"\")\n  const glyphs = chars.map((c) => GLYPHS[c] ?? GLYPHS[\" \"])\n  const cols = glyphs.length * 5 + Math.max(0, glyphs.length - 1) * tracking\n  const width = (cols - 1) * spacing + dotSize * 2\n  const height = 6 * spacing + dotSize * 2\n\n  const cells: React.ReactElement[] = []\n  let colOffset = 0\n\n  glyphs.forEach((glyph, gi) => {\n    glyph.forEach((row, r) => {\n      row.split(\"\").forEach((bit, c) => {\n        const on = bit === \"1\"\n        if (!on && !showOffCells) return\n        const cx = dotSize + (colOffset + c) * spacing\n        const cy = dotSize + r * spacing\n        cells.push(\n          variant === \"square\" ? (\n            <rect\n              key={`${gi}-${r}-${c}`}\n              x={cx - dotSize}\n              y={cy - dotSize}\n              width={dotSize * 2}\n              height={dotSize * 2}\n              fill=\"currentColor\"\n              opacity={on ? 1 : 0.12}\n            />\n          ) : (\n            <circle\n              key={`${gi}-${r}-${c}`}\n              cx={cx}\n              cy={cy}\n              r={dotSize}\n              fill=\"currentColor\"\n              opacity={on ? 1 : 0.12}\n            />\n          ),\n        )\n      })\n    })\n    colOffset += 5 + tracking\n  })\n\n  return (\n    <svg\n      viewBox={`0 0 ${width} ${height}`}\n      role=\"img\"\n      aria-label={String(value)}\n      width={width}\n      height={height}\n      className={cn(\n        matrix({ tone }),\n        variant === \"led\" && \"drop-shadow-[0_0_4px_currentColor]\",\n        className,\n      )}\n      {...props}\n    >\n      {cells}\n    </svg>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}