{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token-glyph",
  "title": "TokenGlyph",
  "description": "Color, typography, and spacing illustrations.",
  "registryDependencies": [
    "@jbm/tokens",
    "@jbm/paper"
  ],
  "files": [
    {
      "path": "registry/jbm/ui/token-glyph.tsx",
      "content": "import type * as React from \"react\"\nimport { color, font } from \"../lib/tokens\"\nimport { paperShadow } from \"./paper\"\nexport type TokenKind = \"color\" | \"type\" | \"space\"\n/** Token glyphs: two overlapping swatches (color), \"Aa\" (type), a dimension line between two blocks (spacing). */\nexport function TokenGlyph({\n  kind,\n  size = 150,\n  style,\n}: {\n  kind: TokenKind\n  size?: number\n  style?: React.CSSProperties\n}) {\n  const s = size\n  if (kind === \"color\")\n    return (\n      <div style={{ width: s, height: s, position: \"relative\", ...style }}>\n        <div\n          style={{\n            position: \"absolute\",\n            left: s * 0.06,\n            top: s * 0.2,\n            width: s * 0.56,\n            height: s * 0.56,\n            borderRadius: \"50%\",\n            background: color.ink,\n            boxShadow: paperShadow,\n          }}\n        />\n        <div\n          style={{\n            position: \"absolute\",\n            left: s * 0.4,\n            top: s * 0.3,\n            width: s * 0.56,\n            height: s * 0.56,\n            borderRadius: \"50%\",\n            background: color.accent,\n            boxShadow: paperShadow,\n          }}\n        />\n      </div>\n    )\n  if (kind === \"type\")\n    return (\n      <div\n        style={{\n          width: s,\n          height: s,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          ...style,\n        }}\n      >\n        <div\n          style={{\n            fontFamily: font.sans,\n            fontSize: s * 0.7,\n            fontWeight: 800,\n            letterSpacing: -s * 0.03,\n            color: color.ink,\n            lineHeight: 1,\n          }}\n        >\n          A<span style={{ color: color.accent }}>a</span>\n        </div>\n      </div>\n    )\n  const bw = s * 0.26\n  return (\n    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={style}>\n      <rect\n        x={s * 0.06}\n        y={s * 0.3}\n        width={bw}\n        height={s * 0.44}\n        rx={s * 0.05}\n        fill={color.ink}\n      />\n      <rect\n        x={s * 0.68}\n        y={s * 0.3}\n        width={bw}\n        height={s * 0.44}\n        rx={s * 0.05}\n        fill={color.ink}\n      />\n      <line\n        x1={s * 0.35}\n        y1={s * 0.52}\n        x2={s * 0.65}\n        y2={s * 0.52}\n        stroke={color.accent}\n        strokeWidth={s * 0.035}\n        strokeLinecap=\"round\"\n      />\n      <path\n        d={`M ${s * 0.42} ${s * 0.44} L ${s * 0.35} ${s * 0.52} L ${s * 0.42} ${s * 0.6}`}\n        fill=\"none\"\n        stroke={color.accent}\n        strokeWidth={s * 0.035}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d={`M ${s * 0.58} ${s * 0.44} L ${s * 0.65} ${s * 0.52} L ${s * 0.58} ${s * 0.6}`}\n        fill=\"none\"\n        stroke={color.accent}\n        strokeWidth={s * 0.035}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n",
      "type": "registry:ui",
      "target": "src/jbm/ui/token-glyph.tsx"
    }
  ],
  "type": "registry:ui"
}