{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:component",
  "title": "Dither Button",
  "description": "Dithered buttons — a native <button> filled with the charts' ordered-dither texture (gradient / dotted / hatched / solid), easing denser and brighter on hover and press, with optional bloom. Standalone: installs without the chart engine.",
  "author": "ripgrim",
  "categories": [
    "buttons"
  ],
  "version": "0.1.0",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/dither-kit/button.tsx",
      "type": "registry:component",
      "target": "components/dither-kit/button.tsx",
      "content": "\"use client\"\n\nimport { type ComponentProps, useEffect, useRef } from \"react\"\nimport { cn } from \"./lib\"\nimport { rgb } from \"./palette\"\nimport {\n  BAYER4,\n  clamp01,\n  fillOf,\n  type PixelBloom,\n  type PixelColor,\n  pixelBloomStyle,\n  pixelPrefersReducedMotion,\n} from \"./pixel\"\n\nconst CELL = 2 // css px per dither cell — same chunk as the charts\n\nexport type ButtonVariant = \"gradient\" | \"dotted\" | \"hatched\" | \"solid\"\n\nexport type DitherButtonProps = ComponentProps<\"button\"> & {\n  /** Fill colour — a palette name or a hue (0–360). */\n  color?: PixelColor\n  /** Fill texture — the same four variants the charts use. */\n  variant?: ButtonVariant\n  /** Glow on the dither fill. */\n  bloom?: PixelBloom\n}\n\ntype PaintState = {\n  fill: [number, number, number]\n  variant: ButtonVariant\n}\n\n/**\n * Paint one frame of the button fill: the ordered-dither texture (dense at the\n * bottom, dissolving upward for \"gradient\") capped by a soft border outline,\n * with `intensity` (0 rest, 1 hover, ~1.5 pressed) lifting density and alpha —\n * the same lift the charts do on hover.\n */\nfunction paintButton(\n  ctx: CanvasRenderingContext2D,\n  bloomCtx: CanvasRenderingContext2D | null,\n  cols: number,\n  rows: number,\n  { fill, variant }: PaintState,\n  intensity: number\n): void {\n  ctx.clearRect(0, 0, cols, rows)\n  const bias = variant === \"dotted\" ? 0.12 : 0\n  for (let y = 0; y < rows; y++) {\n    const density =\n      variant === \"gradient\"\n        ? 0.25 + 0.75 * ((y + 0.5) / rows)\n        : variant === \"dotted\"\n          ? 0.5\n          : 0.75\n    for (let x = 0; x < cols; x++) {\n      if (variant === \"hatched\" && ((x + y) & 3) >= 2) continue\n      const lit =\n        variant === \"solid\" ||\n        density > BAYER4[y & 3][x & 3] - 0.1 * intensity - bias\n      if (variant === \"dotted\" && !lit) continue\n      const k = (0.3 + density * 0.7) * (1 + 0.22 * intensity)\n      ctx.fillStyle = rgb(fill, 1, clamp01(lit ? k : k * 0.4))\n      ctx.fillRect(x, y, 1, 1)\n    }\n  }\n  // Soft outline in the fill colour, brightening a touch on hover.\n  ctx.fillStyle = rgb(fill, 1, clamp01(0.5 + 0.25 * intensity))\n  ctx.fillRect(0, 0, cols, 1)\n  ctx.fillRect(0, rows - 1, cols, 1)\n  ctx.fillRect(0, 0, 1, rows)\n  ctx.fillRect(cols - 1, 0, 1, rows)\n  if (bloomCtx) {\n    bloomCtx.clearRect(0, 0, cols, rows)\n    bloomCtx.drawImage(ctx.canvas, 0, 0)\n  }\n}\n\n/**\n * Dithered button — a native `<button>` whose background is the charts'\n * ordered-dither fill on a low-res canvas. Hover eases the dither denser and\n * brighter; pressing lifts it further. Standalone: shares only the pixel\n * primitives and palette with the rest of the kit.\n */\nexport function DitherButton({\n  color = \"blue\",\n  variant = \"gradient\",\n  bloom = \"off\",\n  className,\n  children,\n  ...props\n}: DitherButtonProps) {\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const bloomRef = useRef<HTMLCanvasElement>(null)\n\n  useEffect(() => {\n    const button = buttonRef.current\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext(\"2d\")\n    if (!button || !canvas || !ctx) return\n    const bloomCanvas = bloomRef.current\n    const bloomCtx = bloomCanvas?.getContext(\"2d\") ?? null\n    const state: PaintState = { fill: fillOf(color), variant }\n    const reduce = pixelPrefersReducedMotion()\n\n    let cols = 0\n    let rows = 0\n    let intensity = 0\n    let target = 0\n    let hovered = false\n    let raf = 0\n\n    const paint = () =>\n      paintButton(ctx, bloomCtx, cols, rows, state, intensity)\n\n    const tick = () => {\n      const d = target - intensity\n      if (Math.abs(d) < 0.01) {\n        intensity = target\n        paint()\n        raf = 0\n        return\n      }\n      intensity += d * 0.16\n      paint()\n      raf = requestAnimationFrame(tick)\n    }\n\n    // Ease toward the new lift target — the loop only runs while settling.\n    const setTarget = (t: number) => {\n      target = t\n      if (reduce) {\n        intensity = t\n        paint()\n      } else if (!raf) {\n        raf = requestAnimationFrame(tick)\n      }\n    }\n\n    const resize = () => {\n      const box = button.getBoundingClientRect()\n      cols = Math.max(4, Math.round(box.width / CELL))\n      rows = Math.max(4, Math.round(box.height / CELL))\n      canvas.width = cols\n      canvas.height = rows\n      if (bloomCanvas) {\n        bloomCanvas.width = cols\n        bloomCanvas.height = rows\n      }\n      paint()\n    }\n    resize()\n\n    const enter = () => {\n      hovered = true\n      setTarget(1)\n    }\n    const leave = () => {\n      hovered = false\n      setTarget(0)\n    }\n    const down = () => setTarget(1.5)\n    const up = () => setTarget(hovered ? 1 : 0)\n    button.addEventListener(\"pointerenter\", enter)\n    button.addEventListener(\"pointerleave\", leave)\n    button.addEventListener(\"pointerdown\", down)\n    button.addEventListener(\"pointerup\", up)\n    button.addEventListener(\"pointercancel\", up)\n\n    const ro =\n      typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(resize) : null\n    ro?.observe(button)\n\n    return () => {\n      if (raf) cancelAnimationFrame(raf)\n      button.removeEventListener(\"pointerenter\", enter)\n      button.removeEventListener(\"pointerleave\", leave)\n      button.removeEventListener(\"pointerdown\", down)\n      button.removeEventListener(\"pointerup\", up)\n      button.removeEventListener(\"pointercancel\", up)\n      ro?.disconnect()\n    }\n  }, [color, variant, bloom])\n\n  const bloomStyle = pixelBloomStyle(bloom)\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={cn(\n        \"relative isolate overflow-hidden rounded-md px-4 py-2 font-mono text-xs text-foreground transition-opacity focus-visible:ring-1 focus-visible:ring-foreground/40 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40\",\n        className\n      )}\n      {...props}\n    >\n      <canvas\n        ref={canvasRef}\n        aria-hidden\n        className=\"absolute inset-0 -z-10 h-full w-full\"\n        style={{ imageRendering: \"pixelated\" }}\n      />\n      {bloomStyle && (\n        <canvas\n          ref={bloomRef}\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 -z-10 h-full w-full\"\n          style={bloomStyle}\n        />\n      )}\n      <span className=\"relative\">{children}</span>\n    </button>\n  )\n}\n"
    },
    {
      "path": "components/dither-kit/pixel.ts",
      "type": "registry:component",
      "target": "components/dither-kit/pixel.ts",
      "content": "// Standalone pixel primitives for the non-chart Dither Kit pieces (avatar,\n// gradient). Deliberately free of the chart engine so those items install\n// without `core` — only palette.ts is shared. The Bayer matrix and bloom\n// presets mirror dither-paint.ts so everything reads as one texture.\n\nimport { type DitherColor, PALETTE, type Rgb } from \"./palette\"\n\n// 4×4 ordered (Bayer) matrix, normalized to 0–1 thresholds — the same matrix\n// the charts dither with.\nexport const BAYER4 = [\n  [0, 8, 2, 10],\n  [12, 4, 14, 6],\n  [3, 11, 1, 9],\n  [15, 7, 13, 5],\n].map((row) => row.map((v) => (v + 0.5) / 16))\n\nexport const clamp01 = (t: number) => (t < 0 ? 0 : t > 1 ? 1 : t)\n\n/** 32-bit FNV-1a hash — turns any string seed into a stable uint32. */\nexport function fnv1a(str: string): number {\n  let h = 0x811c9dc5\n  for (let i = 0; i < str.length; i++) {\n    h ^= str.charCodeAt(i)\n    h = Math.imul(h, 0x01000193)\n  }\n  return h >>> 0\n}\n\n/** Tiny deterministic PRNG (xorshift32) — returns floats in [0, 1). */\nexport function xorshift32(seed: number): () => number {\n  let s = seed || 0x9e3779b9\n  return () => {\n    s ^= s << 13\n    s >>>= 0\n    s ^= s >>> 17\n    s ^= s << 5\n    s >>>= 0\n    return s / 0x100000000\n  }\n}\n\n/** A named palette colour or a raw hue (0–360). */\nexport type PixelColor = DitherColor | number\n\n/** Hue (0–360) → an rgb fill tuned to sit alongside the chart palette. */\nexport function hueFill(hue: number): Rgb {\n  const h = ((hue % 360) + 360) % 360\n  const s = 0.85\n  const l = 0.58\n  const c = (1 - Math.abs(2 * l - 1)) * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = l - c / 2\n  const [r, g, b] =\n    h < 60\n      ? [c, x, 0]\n      : h < 120\n        ? [x, c, 0]\n        : h < 180\n          ? [0, c, x]\n          : h < 240\n            ? [0, x, c]\n            : h < 300\n              ? [x, 0, c]\n              : [c, 0, x]\n  return [\n    Math.round((r + m) * 255),\n    Math.round((g + m) * 255),\n    Math.round((b + m) * 255),\n  ]\n}\n\n/** Resolve a {@link PixelColor} to its rgb fill. */\nexport function fillOf(color: PixelColor): Rgb {\n  return typeof color === \"number\" ? hueFill(color) : PALETTE[color].fill\n}\n\n// Bloom — same recipe as the charts: a blurred copy of the crisp canvas,\n// composited additively so the glow stays in the dither's own colour.\nexport type PixelBloom = \"off\" | \"low\" | \"high\" | \"aura\"\n\nconst BLOOM_PRESET: Record<\n  Exclude<PixelBloom, \"off\">,\n  { blur: number; brightness: number; opacity: number; saturate: number }\n> = {\n  low: { blur: 3, brightness: 1.35, opacity: 0.7, saturate: 1.4 },\n  high: { blur: 5, brightness: 1.5, opacity: 0.78, saturate: 1.5 },\n  aura: { blur: 15, brightness: 2.9, opacity: 0.1, saturate: 3 },\n}\n\nexport type PixelBloomStyle = {\n  filter: string\n  opacity: number\n  mixBlendMode: \"plus-lighter\"\n  imageRendering: \"auto\"\n}\n\n/** Style for the bloom layer canvas. null when off. */\nexport function pixelBloomStyle(bloom: PixelBloom): PixelBloomStyle | null {\n  if (bloom === \"off\") return null\n  const cfg = BLOOM_PRESET[bloom]\n  return {\n    filter: `blur(${cfg.blur}px) brightness(${cfg.brightness}) saturate(${cfg.saturate})`,\n    opacity: cfg.opacity,\n    mixBlendMode: \"plus-lighter\",\n    imageRendering: \"auto\",\n  }\n}\n\n/** Whether the OS asks for reduced motion (skip entrances). */\nexport function pixelPrefersReducedMotion(): boolean {\n  return (\n    window.matchMedia?.(\"(prefers-reduced-motion: reduce)\")?.matches ?? false\n  )\n}\n"
    },
    {
      "path": "components/dither-kit/palette.ts",
      "type": "registry:component",
      "target": "components/dither-kit/palette.ts",
      "content": "// Shared seed palette for the dither chart family. Mirrors the seeds in\n// `dither-chart.tsx` so a series rendered through the composable engine reads\n// with the exact same fill / line / star hues as the legacy sparkline.\n\nexport type Rgb = [number, number, number]\n\nexport type DitherColor =\n  | \"green\"\n  | \"blue\"\n  | \"purple\"\n  | \"pink\"\n  | \"orange\"\n  | \"red\"\n  | \"grey\"\n\nexport type Seed = { fill: Rgb; line: Rgb; star: Rgb }\n\n// Each seed: the area-fill hue, the bright series line, and the star sparkle.\nexport const PALETTE: Record<DitherColor, Seed> = {\n  green: { fill: [40, 210, 110], line: [150, 255, 180], star: [200, 255, 220] },\n  blue: { fill: [53, 143, 243], line: [150, 200, 255], star: [205, 228, 255] },\n  purple: {\n    fill: [150, 110, 255],\n    line: [200, 175, 255],\n    star: [225, 210, 255],\n  },\n  pink: { fill: [240, 90, 190], line: [255, 170, 220], star: [255, 205, 235] },\n  orange: {\n    fill: [255, 150, 50],\n    line: [255, 195, 130],\n    star: [255, 220, 175],\n  },\n  red: { fill: [240, 70, 70], line: [255, 150, 140], star: [255, 195, 185] },\n  // No-data: a muted grey so empty metrics read as \"nothing here\".\n  grey: { fill: [92, 92, 100], line: [140, 140, 150], star: [165, 165, 175] },\n}\n\nexport const rgb = ([r, g, b]: Rgb, k = 1, a = 1) =>\n  `rgba(${Math.round(r * k)},${Math.round(g * k)},${Math.round(b * k)},${a})`\n\nexport const seedOfColor = (color: DitherColor): Seed => PALETTE[color]\n\nexport const isDitherColor = (value: unknown): value is DitherColor =>\n  typeof value === \"string\" && value in PALETTE\n"
    },
    {
      "path": "components/dither-kit/lib.ts",
      "type": "registry:component",
      "target": "components/dither-kit/lib.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\n/** Tailwind-aware className combiner — local copy so the chart pack is\n * self-contained and portable as a registry. */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"
    }
  ]
}