@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/dither-canvas/dither-engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-engine.js","names":[],"sources":["../../../src/components/dither-canvas/dither-engine.ts"],"sourcesContent":["// Ported from amicro \"Dither Charts\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\n\n/*\n * The pure half of the dither engine: no React, no DOM beyond the canvas\n * context it is handed. Everything a dither chart needs to decide *how big a\n * cell is* lives here, so it can be unit-tested without a canvas.\n *\n * The technique, as amicro draws it: the plot is a grid of fixed cells\n * (~4.6 CSS px). Each cell is drawn as one small square, centred in the cell,\n * whose side is `cell × density`. Density is built from three ingredients —\n * a shape term (distance, fill level) eased with smoothstep, a time-based sum of\n * sines for shimmer, and a per-cell hash for jitter — and the region is clipped\n * to the shape's path. amicro's hash was `fract(sin(…) × 43758)` and two charts\n * used Math.random; this one is an integer hash, so a frame is the same on every\n * machine and every render (and a test can assert it).\n */\n\n/** Default cell pitch in CSS pixels, as amicro's donut draws it. */\nexport const DITHER_CELL = 4.6;\n\n/** Axis-aligned rectangle in CSS pixels. */\nexport interface DitherBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function lerp(from: number, to: number, t: number): number {\n  return from + (to - from) * t;\n}\n\n/** Hermite ease between two edges; 0 below `edge0`, 1 above `edge1`. */\nexport function smoothstep(edge0: number, edge1: number, value: number): number {\n  if (edge0 === edge1) return value < edge0 ? 0 : 1;\n  const x = clamp((value - edge0) / (edge1 - edge0), 0, 1);\n  return x * x * (3 - 2 * x);\n}\n\n/**\n * Deterministic per-cell hash in [0, 1).\n *\n * Coordinates are quantised to 1/100 px so the float noise in a cell's centre\n * never changes its jitter. `seed` gives a second, independent field (the\n * particle layer uses one) from the same cell.\n */\nexport function hash2(x: number, y: number, seed = 0): number {\n  let h =\n    Math.imul(Math.round(x * 100) | 0, 0x27d4eb2d) ^\n    Math.imul(Math.round(y * 100) | 0, 0x165667b1);\n  h = Math.imul(h ^ Math.imul(seed | 0, 0x9e3779b1), 0x85ebca6b);\n  h ^= h >>> 13;\n  h = Math.imul(h, 0xc2b2ae35);\n  h ^= h >>> 16;\n  return (h >>> 0) / 4294967296;\n}\n\n/**\n * amicro's shimmer: a sum of sines eased into 0..1. Pass the raw terms (each\n * in −1..1) so each chart keeps its own wave; with no terms — the reduced-motion\n * case — it is the neutral 0.5.\n */\nexport function shimmer(...waves: number[]): number {\n  let sum = 0;\n  for (const wave of waves) sum += wave;\n  return smoothstep(-1.5, 1.5, sum);\n}\n\n/** The two-sine drift amicro's device donut and revenue fill share. */\nexport function drift(x: number, y: number, time: number): number {\n  return shimmer(Math.sin(x * 0.05 + time), Math.sin(y * 0.05 + time * 0.7));\n}\n\n/**\n * The drawn square for one cell: centred, side `cell × density`, never larger\n * than the cell. Returns null when the density leaves nothing to draw.\n */\nexport function cellSquare(\n  x: number,\n  y: number,\n  cell: number,\n  density: number,\n): [x: number, y: number, size: number] | null {\n  const size = cell * clamp(density, 0, 1);\n  if (size <= 0.05) return null;\n  return [x + (cell - size) / 2, y + (cell - size) / 2, size];\n}\n\n/**\n * Visits every cell overlapping `bounds`, on a grid anchored at the canvas\n * origin. Anchoring matters: a grid anchored to each shape would swim as the\n * shape animates, and two shapes would not share cells.\n */\nexport function forEachCell(\n  bounds: DitherBounds,\n  cell: number,\n  visit: (x: number, y: number) => void,\n): void {\n  if (cell <= 0 || bounds.width <= 0 || bounds.height <= 0) return;\n  const x0 = Math.floor(bounds.x / cell) * cell;\n  const y0 = Math.floor(bounds.y / cell) * cell;\n  const x1 = bounds.x + bounds.width;\n  const y1 = bounds.y + bounds.height;\n  for (let x = x0; x < x1; x += cell) {\n    for (let y = y0; y < y1; y += cell) visit(x, y);\n  }\n}\n\n/**\n * Density function for one cell. `cx`/`cy` are the cell's centre and `x`/`y`\n * its top-left corner, both in CSS pixels. Return 0..1 — the fraction of the\n * cell the square covers; 0 or less skips the cell.\n */\nexport type DitherDensity = (cx: number, cy: number, x: number, y: number) => number;\n\nexport interface DitherFillOptions {\n  /** Region to scan. Keep it tight: every cell in it runs `density`. */\n  bounds: DitherBounds;\n  density: DitherDensity;\n  /** Cell pitch in CSS pixels. Defaults to DITHER_CELL. */\n  cell?: number;\n  /** Clip region — usually a Path2D from `makePath`. Omit to fill the bounds. */\n  clip?: Path2D | null;\n  /** Resolved colour (`frame.color(\"primary\")`). Omit to keep the current fillStyle. */\n  color?: string;\n  /** Multiplies the current globalAlpha for this fill. */\n  alpha?: number;\n}\n\n/**\n * Fills a region with dithered cells. Saves and restores the context, so the\n * clip, colour and alpha never leak into the next shape. Returns the number of\n * squares drawn.\n */\nexport function ditherFill(ctx: CanvasRenderingContext2D, options: DitherFillOptions): number {\n  const cell = options.cell ?? DITHER_CELL;\n  let drawn = 0;\n  ctx.save();\n  if (options.clip) ctx.clip(options.clip);\n  if (options.color !== undefined) ctx.fillStyle = options.color;\n  if (options.alpha !== undefined) ctx.globalAlpha *= clamp(options.alpha, 0, 1);\n  forEachCell(options.bounds, cell, (x, y) => {\n    const square = cellSquare(x, y, cell, options.density(x + cell / 2, y + cell / 2, x, y));\n    if (!square) return;\n    ctx.fillRect(square[0], square[1], square[2], square[2]);\n    drawn += 1;\n  });\n  ctx.restore();\n  return drawn;\n}\n\n/* Colour ------------------------------------------------------------------ */\n\n/**\n * Turns a colour reference into a CSS value:\n * `\"primary\"` and `\"--color-primary\"` become `var(--color-primary)`; anything\n * else (`var(…)`, `color-mix(…)`, `currentColor`) is passed through.\n */\nexport function tokenToCss(token: string): string {\n  if (token.startsWith(\"--\")) return `var(${token})`;\n  if (/^[a-z][a-z0-9-]*$/.test(token) && token !== \"currentcolor\" && token !== \"transparent\") {\n    return `var(--color-${token})`;\n  }\n  return token;\n}\n\n/**\n * Resolves a colour token to a concrete value a canvas accepts, as seen from\n * `element` — so a theme scoped to a subtree applies. A hidden probe element\n * lets the browser do the resolving, which also settles `color-mix()` and\n * nested `var()`s that a canvas fillStyle would reject.\n */\nexport function resolveColor(element: Element, token: string): string {\n  const css = tokenToCss(token);\n  const doc = element.ownerDocument;\n  const view = doc.defaultView;\n  if (!view) return css;\n  const host = element.parentElement ?? doc.body;\n  const probe = doc.createElement(\"span\");\n  probe.style.display = \"none\";\n  probe.style.color = css;\n  host.appendChild(probe);\n  const resolved = view.getComputedStyle(probe).color;\n  probe.remove();\n  if (resolved && !resolved.includes(\"var(\")) return resolved;\n  // No resolution (a detached element, or a DOM without CSS): fall back to the\n  // custom property's own value, then to the expression itself.\n  const name = /^var\\((--[\\w-]+)\\)$/.exec(css)?.[1];\n  const raw = name ? view.getComputedStyle(element).getPropertyValue(name).trim() : \"\";\n  return raw || css;\n}\n\n/**\n * Default series colours: one hue — the theme's primary — stepped toward the\n * card surface, as amicro's monochrome ramp is. Status tokens (success,\n * warning, destructive) are deliberately absent: they mean state, not series.\n * Identity never rests on colour alone; every chart also names each series in\n * a legend, its readout and its data table.\n */\nexport const DITHER_PALETTE: readonly string[] = [\n  \"primary\",\n  \"color-mix(in oklab, var(--color-primary) 72%, var(--color-card))\",\n  \"color-mix(in oklab, var(--color-primary) 50%, var(--color-card))\",\n  \"color-mix(in oklab, var(--color-primary) 34%, var(--color-card))\",\n  \"color-mix(in oklab, var(--color-primary) 22%, var(--color-card))\",\n  \"muted-foreground\",\n];\n\n/** The colour for series `index`: its own if given, else the palette in order. */\nexport function seriesColor(index: number, color?: string): string {\n  return color ?? DITHER_PALETTE[index % DITHER_PALETTE.length] ?? \"primary\";\n}\n\n/* Value animation ---------------------------------------------------------- */\n\nexport interface SpringConfig {\n  stiffness?: number;\n  damping?: number;\n  mass?: number;\n  /** Distance and speed below which the spring snaps to rest. */\n  precision?: number;\n}\n\nexport interface Spring {\n  readonly value: number;\n  readonly target: number;\n  readonly velocity: number;\n  /** Aims the spring at a new target; it moves on the next `step`. */\n  set(target: number): void;\n  /** Places the spring at rest on `value`. */\n  jump(value: number): void;\n  /** Advances by `dt` seconds. Returns true while still moving. */\n  step(dt: number, reducedMotion?: boolean): boolean;\n}\n\n/** amicro's number spring (motion's useSpring at 190 / 27 / 0.7). */\nexport const DEFAULT_SPRING: Required<SpringConfig> = {\n  stiffness: 190,\n  damping: 27,\n  mass: 0.7,\n  precision: 0.001,\n};\n\n/**\n * A damped spring for canvas values. Integrated in fixed sub-steps, so a long\n * frame (a tab coming back into view) cannot make it explode. Under reduced\n * motion `step` jumps straight to the target: the settled value, drawn once.\n */\nexport function createSpring(initial: number, config: SpringConfig = {}): Spring {\n  const { stiffness, damping, mass, precision } = { ...DEFAULT_SPRING, ...config };\n  let value = initial;\n  let target = initial;\n  let velocity = 0;\n  return {\n    get value() {\n      return value;\n    },\n    get target() {\n      return target;\n    },\n    get velocity() {\n      return velocity;\n    },\n    set(next) {\n      target = next;\n    },\n    jump(next) {\n      value = next;\n      target = next;\n      velocity = 0;\n    },\n    step(dt, reducedMotion = false) {\n      if (reducedMotion) {\n        value = target;\n        velocity = 0;\n        return false;\n      }\n      let remaining = clamp(dt, 0, 0.1);\n      while (remaining > 0) {\n        const h = Math.min(remaining, 1 / 240);\n        const force = -stiffness * (value - target) - damping * velocity;\n        velocity += (force / mass) * h;\n        value += velocity * h;\n        remaining -= h;\n      }\n      const scale = Math.max(1, Math.abs(target));\n      if (\n        Math.abs(value - target) < precision * scale &&\n        Math.abs(velocity) < precision * scale\n      ) {\n        value = target;\n        velocity = 0;\n        return false;\n      }\n      return true;\n    },\n  };\n}\n\nexport interface SpringList {\n  readonly values: number[];\n  /** Aims at new targets. A different length resamples the current values. */\n  set(targets: readonly number[]): void;\n  jump(targets: readonly number[]): void;\n  step(dt: number, reducedMotion?: boolean): boolean;\n}\n\n/**\n * Resamples `values` to `length` points by nearest index, so a 7-point series\n * can morph into a 30-point one without a jump to zero (amicro's range switch).\n */\nexport function resample(values: readonly number[], length: number): number[] {\n  if (length <= 0) return [];\n  if (values.length === 0) return Array.from({ length }, () => 0);\n  if (values.length === length) return [...values];\n  return Array.from({ length }, (_, index) => {\n    const t = length === 1 ? 0 : index / (length - 1);\n    return values[Math.round(t * (values.length - 1))] ?? 0;\n  });\n}\n\n/** A list of springs that animates an array of values together. */\nexport function createSprings(\n  initial: readonly number[],\n  config: SpringConfig = {},\n): SpringList {\n  let springs = initial.map((value) => createSpring(value, config));\n  const list: SpringList = {\n    get values() {\n      return springs.map((spring) => spring.value);\n    },\n    set(targets) {\n      if (targets.length !== springs.length) {\n        springs = resample(list.values, targets.length).map((value) =>\n          createSpring(value, config),\n        );\n      }\n      targets.forEach((target, index) => springs[index]?.set(target));\n    },\n    jump(targets) {\n      springs = targets.map((value) => createSpring(value, config));\n    },\n    step(dt, reducedMotion = false) {\n      let moving = false;\n      for (const spring of springs) moving = spring.step(dt, reducedMotion) || moving;\n      return moving;\n    },\n  };\n  return list;\n}\n"],"mappings":";;AAkBA,MAAa,cAAc;AAU3B,SAAgB,MAAM,OAAe,KAAa,KAAqB;CACrE,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAgB,KAAK,MAAc,IAAY,GAAmB;CAChE,OAAO,QAAQ,KAAK,QAAQ;AAC9B;;AAGA,SAAgB,WAAW,OAAe,OAAe,OAAuB;CAC9E,IAAI,UAAU,OAAO,OAAO,QAAQ,QAAQ,IAAI;CAChD,MAAM,IAAI,OAAO,QAAQ,UAAU,QAAQ,QAAQ,GAAG,CAAC;CACvD,OAAO,IAAI,KAAK,IAAI,IAAI;AAC1B;;;;;;;;AASA,SAAgB,MAAM,GAAW,GAAW,OAAO,GAAW;CAC5D,IAAI,IACF,KAAK,KAAK,KAAK,MAAM,IAAI,GAAG,IAAI,GAAG,SAAU,IAC7C,KAAK,KAAK,KAAK,MAAM,IAAI,GAAG,IAAI,GAAG,SAAU;CAC/C,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,GAAG,UAAU,GAAG,UAAU;CAC7D,KAAK,MAAM;CACX,IAAI,KAAK,KAAK,GAAG,UAAU;CAC3B,KAAK,MAAM;CACX,QAAQ,MAAM,KAAK;AACrB;;;;;;AAOA,SAAgB,QAAQ,GAAG,OAAyB;CAClD,IAAI,MAAM;CACV,KAAK,MAAM,QAAQ,OAAO,OAAO;CACjC,OAAO,WAAW,MAAM,KAAK,GAAG;AAClC;;AAGA,SAAgB,MAAM,GAAW,GAAW,MAAsB;CAChE,OAAO,QAAQ,KAAK,IAAI,IAAI,MAAO,IAAI,GAAG,KAAK,IAAI,IAAI,MAAO,OAAO,EAAG,CAAC;AAC3E;;;;;AAMA,SAAgB,WACd,GACA,GACA,MACA,SAC6C;CAC7C,MAAM,OAAO,OAAO,MAAM,SAAS,GAAG,CAAC;CACvC,IAAI,QAAQ,KAAM,OAAO;CACzB,OAAO;EAAC,KAAK,OAAO,QAAQ;EAAG,KAAK,OAAO,QAAQ;EAAG;CAAI;AAC5D;;;;;;AAOA,SAAgB,YACd,QACA,MACA,OACM;CACN,IAAI,QAAQ,KAAK,OAAO,SAAS,KAAK,OAAO,UAAU,GAAG;CAC1D,MAAM,KAAK,KAAK,MAAM,OAAO,IAAI,IAAI,IAAI;CACzC,MAAM,KAAK,KAAK,MAAM,OAAO,IAAI,IAAI,IAAI;CACzC,MAAM,KAAK,OAAO,IAAI,OAAO;CAC7B,MAAM,KAAK,OAAO,IAAI,OAAO;CAC7B,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,MAC5B,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,MAAM,MAAM,GAAG,CAAC;AAElD;;;;;;AA4BA,SAAgB,WAAW,KAA+B,SAAoC;CAC5F,MAAM,OAAO,QAAQ,QAAA;CACrB,IAAI,QAAQ;CACZ,IAAI,KAAK;CACT,IAAI,QAAQ,MAAM,IAAI,KAAK,QAAQ,IAAI;CACvC,IAAI,QAAQ,UAAU,KAAA,GAAW,IAAI,YAAY,QAAQ;CACzD,IAAI,QAAQ,UAAU,KAAA,GAAW,IAAI,eAAe,MAAM,QAAQ,OAAO,GAAG,CAAC;CAC7E,YAAY,QAAQ,QAAQ,OAAO,GAAG,MAAM;EAC1C,MAAM,SAAS,WAAW,GAAG,GAAG,MAAM,QAAQ,QAAQ,IAAI,OAAO,GAAG,IAAI,OAAO,GAAG,GAAG,CAAC,CAAC;EACvF,IAAI,CAAC,QAAQ;EACb,IAAI,SAAS,OAAO,IAAI,OAAO,IAAI,OAAO,IAAI,OAAO,EAAE;EACvD,SAAS;CACX,CAAC;CACD,IAAI,QAAQ;CACZ,OAAO;AACT;;;;;;AASA,SAAgB,WAAW,OAAuB;CAChD,IAAI,MAAM,WAAW,IAAI,GAAG,OAAO,OAAO,MAAM;CAChD,IAAI,oBAAoB,KAAK,KAAK,KAAK,UAAU,kBAAkB,UAAU,eAC3E,OAAO,eAAe,MAAM;CAE9B,OAAO;AACT;;;;;;;AAQA,SAAgB,aAAa,SAAkB,OAAuB;CACpE,MAAM,MAAM,WAAW,KAAK;CAC5B,MAAM,MAAM,QAAQ;CACpB,MAAM,OAAO,IAAI;CACjB,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,OAAO,QAAQ,iBAAiB,IAAI;CAC1C,MAAM,QAAQ,IAAI,cAAc,MAAM;CACtC,MAAM,MAAM,UAAU;CACtB,MAAM,MAAM,QAAQ;CACpB,KAAK,YAAY,KAAK;CACtB,MAAM,WAAW,KAAK,iBAAiB,KAAK,CAAC,CAAC;CAC9C,MAAM,OAAO;CACb,IAAI,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,OAAO;CAGnD,MAAM,OAAO,sBAAsB,KAAK,GAAG,CAAC,GAAG;CAE/C,QADY,OAAO,KAAK,iBAAiB,OAAO,CAAC,CAAC,iBAAiB,IAAI,CAAC,CAAC,KAAK,IAAI,OACpE;AAChB;;;;;;;;AASA,MAAa,iBAAoC;CAC/C;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,YAAY,OAAe,OAAwB;CACjE,OAAO,SAAS,eAAe,QAAQ,eAAe,WAAW;AACnE;;AAyBA,MAAa,iBAAyC;CACpD,WAAW;CACX,SAAS;CACT,MAAM;CACN,WAAW;AACb;;;;;;AAOA,SAAgB,aAAa,SAAiB,SAAuB,CAAC,GAAW;CAC/E,MAAM,EAAE,WAAW,SAAS,MAAM,cAAc;EAAE,GAAG;EAAgB,GAAG;CAAO;CAC/E,IAAI,QAAQ;CACZ,IAAI,SAAS;CACb,IAAI,WAAW;CACf,OAAO;EACL,IAAI,QAAQ;GACV,OAAO;EACT;EACA,IAAI,SAAS;GACX,OAAO;EACT;EACA,IAAI,WAAW;GACb,OAAO;EACT;EACA,IAAI,MAAM;GACR,SAAS;EACX;EACA,KAAK,MAAM;GACT,QAAQ;GACR,SAAS;GACT,WAAW;EACb;EACA,KAAK,IAAI,gBAAgB,OAAO;GAC9B,IAAI,eAAe;IACjB,QAAQ;IACR,WAAW;IACX,OAAO;GACT;GACA,IAAI,YAAY,MAAM,IAAI,GAAG,EAAG;GAChC,OAAO,YAAY,GAAG;IACpB,MAAM,IAAI,KAAK,IAAI,WAAW,IAAI,GAAG;IACrC,MAAM,QAAQ,CAAC,aAAa,QAAQ,UAAU,UAAU;IACxD,YAAa,QAAQ,OAAQ;IAC7B,SAAS,WAAW;IACpB,aAAa;GACf;GACA,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,CAAC;GAC1C,IACE,KAAK,IAAI,QAAQ,MAAM,IAAI,YAAY,SACvC,KAAK,IAAI,QAAQ,IAAI,YAAY,OACjC;IACA,QAAQ;IACR,WAAW;IACX,OAAO;GACT;GACA,OAAO;EACT;CACF;AACF;;;;;AAcA,SAAgB,SAAS,QAA2B,QAA0B;CAC5E,IAAI,UAAU,GAAG,OAAO,CAAC;CACzB,IAAI,OAAO,WAAW,GAAG,OAAO,MAAM,KAAK,EAAE,OAAO,SAAS,CAAC;CAC9D,IAAI,OAAO,WAAW,QAAQ,OAAO,CAAC,GAAG,MAAM;CAC/C,OAAO,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,UAAU;EAC1C,MAAM,IAAI,WAAW,IAAI,IAAI,SAAS,SAAS;EAC/C,OAAO,OAAO,KAAK,MAAM,KAAK,OAAO,SAAS,EAAE,MAAM;CACxD,CAAC;AACH;;AAGA,SAAgB,cACd,SACA,SAAuB,CAAC,GACZ;CACZ,IAAI,UAAU,QAAQ,KAAK,UAAU,aAAa,OAAO,MAAM,CAAC;CAChE,MAAM,OAAmB;EACvB,IAAI,SAAS;GACX,OAAO,QAAQ,KAAK,WAAW,OAAO,KAAK;EAC7C;EACA,IAAI,SAAS;GACX,IAAI,QAAQ,WAAW,QAAQ,QAC7B,UAAU,SAAS,KAAK,QAAQ,QAAQ,MAAM,CAAC,CAAC,KAAK,UACnD,aAAa,OAAO,MAAM,CAC5B;GAEF,QAAQ,SAAS,QAAQ,UAAU,QAAQ,MAAM,EAAE,IAAI,MAAM,CAAC;EAChE;EACA,KAAK,SAAS;GACZ,UAAU,QAAQ,KAAK,UAAU,aAAa,OAAO,MAAM,CAAC;EAC9D;EACA,KAAK,IAAI,gBAAgB,OAAO;GAC9B,IAAI,SAAS;GACb,KAAK,MAAM,UAAU,SAAS,SAAS,OAAO,KAAK,IAAI,aAAa,KAAK;GACzE,OAAO;EACT;CACF;CACA,OAAO;AACT"}

package/dist/components/dither-canvas/dither-geometry.d.ts

@@ -0,0 +1,73 @@
+//#region src/components/dither-canvas/dither-geometry.d.ts
+interface PathSink {
+  moveTo(x: number, y: number): void;
+  lineTo(x: number, y: number): void;
+  arc(x: number, y: number, radius: number, start: number, end: number, ccw?: boolean): void;
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+  bezierCurveTo(c1x: number, c1y: number, c2x: number, c2y: number, x: number, y: number): void;
+  closePath(): void;
+}
+interface Point {
+  x: number;
+  y: number;
+}
+/**
+ * Builds a Path2D from a tracer. Returns null where Path2D does not exist
+ * (server rendering, some test DOMs), so callers simply skip the clip.
+ */
+declare function makePath(trace: (sink: PathSink) => void): Path2D | null;
+/** Normalises an angle into [0, 2π). */
+declare function normalizeAngle(angle: number): number;
+interface Wedge {
+  index: number;
+  /** Fraction of the whole, 0..1. */
+  share: number;
+  start: number;
+  end: number;
+  mid: number;
+}
+/**
+ * Splits a circle into wedges, clockwise from 12 o'clock by default, leaving
+ * `gap` radians between neighbours (amicro's graph donut uses 0.07).
+ * Negative and non-finite values count as zero.
+ */
+declare function pieWedges(values: readonly number[], options?: {
+  start?: number;
+  gap?: number;
+}): Wedge[];
+/** True when `angle` lies within the wedge's sweep. */
+declare function angleInWedge(angle: number, start: number, end: number): boolean;
+/**
+ * The wedge under a point, or null — hit-testing for a donut from pointer
+ * coordinates, so hover never needs to read pixels back.
+ */
+declare function wedgeAt(wedges: readonly Wedge[], center: Point, inner: number, outer: number, point: Point): number | null;
+/** A plain annular sector (amicro's device donut). */
+declare function traceWedge(sink: PathSink, center: Point, inner: number, outer: number, start: number, end: number): void;
+/** An annular sector with rounded corners (amicro's graph donut). */
+declare function traceRoundedWedge(sink: PathSink, center: Point, inner: number, outer: number, start: number, end: number, radius: number): void;
+/** A rectangle with separate top and bottom corner radii (a stacked segment). */
+declare function traceRoundedRect(sink: PathSink, x: number, y: number, width: number, height: number, radiusTop: number, radiusBottom?: number): void;
+/**
+ * Tangents for a monotone cubic spline (Fritsch–Carlson). Monotone means the
+ * curve never overshoots its data: a smooth line that invents a dip below zero
+ * between two positive days is lying.
+ */
+declare function monotoneTangents(points: readonly Point[]): number[];
+/**
+ * Traces a monotone spline through `points`. With `baseline`, it closes the
+ * shape down to that y — the region under the line, ready to clip a fill.
+ */
+declare function traceSpline(sink: PathSink, points: readonly Point[], baseline?: number): void;
+/** Traces straight segments through `points`, optionally closed to a baseline. */
+declare function tracePolyline(sink: PathSink, points: readonly Point[], baseline?: number): void;
+/** Linear interpolation of a series at fractional index `at` (0..length−1). */
+declare function valueAt(values: readonly number[], at: number): number;
+/**
+ * A round axis maximum just above `value`: 1, 2 or 5 × 10ⁿ, with 5% headroom
+ * (amicro's getAxisMax). Zero and negatives give 1.
+ */
+declare function niceMax(value: number): number;
+//#endregion
+export { PathSink, Point, Wedge, angleInWedge, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, valueAt, wedgeAt };
+//# sourceMappingURL=dither-geometry.d.ts.map

package/dist/components/dither-canvas/dither-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-geometry.d.ts","names":[],"sources":["../../../src/components/dither-canvas/dither-geometry.ts"],"mappings":";UASiB;EACf,OAAO,WAAW;EAClB,OAAO,WAAW;EAClB,IAAI,WAAW,WAAW,gBAAgB,eAAe,aAAa;EACtE,MAAM,YAAY,YAAY,YAAY,YAAY;EACtD,cAAc,aAAa,aAAa,aAAa,aAAa,WAAW;EAC7E;;UAGe;EACf;EACA;;;;;;iBAOc,SAAS,QAAQ,MAAM,oBAAoB;;iBAU3C,eAAe;UAId;EACf;;EAEA;EACA;EACA;EACA;;;;;;;iBAQc,UACd,2BACA;EAAW;EAAgB;IAC1B;;iBAuBa,aAAa,eAAe,eAAe;;;;;iBAS3C,QACd,iBAAiB,SACjB,QAAQ,OACR,eACA,eACA,OAAO;;iBAcO,WACd,MAAM,UACN,QAAQ,OACR,eACA,eACA,eACA;;iBAWc,kBACd,MAAM,UACN,QAAQ,OACR,eACA,eACA,eACA,aACA;;iBA0Bc,iBACd,MAAM,UACN,WACA,WACA,eACA,gBACA,mBACA;;;;;;iBAsBc,iBAAiB,iBAAiB;;;;;iBAwClC,YAAY,MAAM,UAAU,iBAAiB,SAAS;;iBA2BtD,cACd,MAAM,UACN,iBAAiB,SACjB;;iBAec,QAAQ,2BAA2B;;;;;iBAcnC,QAAQ"}

package/dist/components/dither-canvas/dither-geometry.js

@@ -0,0 +1,205 @@
+//#region src/components/dither-canvas/dither-geometry.ts
+/**
+* Builds a Path2D from a tracer. Returns null where Path2D does not exist
+* (server rendering, some test DOMs), so callers simply skip the clip.
+*/
+function makePath(trace) {
+	if (typeof Path2D === "undefined") return null;
+	const path = new Path2D();
+	trace(path);
+	return path;
+}
+const TAU = Math.PI * 2;
+/** Normalises an angle into [0, 2π). */
+function normalizeAngle(angle) {
+	return (angle % TAU + TAU) % TAU;
+}
+/**
+* Splits a circle into wedges, clockwise from 12 o'clock by default, leaving
+* `gap` radians between neighbours (amicro's graph donut uses 0.07).
+* Negative and non-finite values count as zero.
+*/
+function pieWedges(values, options = {}) {
+	const start = options.start ?? -Math.PI / 2;
+	const gap = options.gap ?? 0;
+	const clean = values.map((value) => Number.isFinite(value) && value > 0 ? value : 0);
+	const total = clean.reduce((sum, value) => sum + value, 0);
+	let cursor = start;
+	return clean.map((value, index) => {
+		const share = total > 0 ? value / total : 0;
+		const sweep = share * TAU;
+		const half = sweep > gap ? gap / 2 : sweep / 2;
+		const wedge = {
+			index,
+			share,
+			start: cursor + half,
+			end: cursor + sweep - half,
+			mid: cursor + sweep / 2
+		};
+		cursor += sweep;
+		return wedge;
+	});
+}
+/** True when `angle` lies within the wedge's sweep. */
+function angleInWedge(angle, start, end) {
+	if (end <= start) return false;
+	return normalizeAngle(angle - start) <= end - start;
+}
+/**
+* The wedge under a point, or null — hit-testing for a donut from pointer
+* coordinates, so hover never needs to read pixels back.
+*/
+function wedgeAt(wedges, center, inner, outer, point) {
+	const dx = point.x - center.x;
+	const dy = point.y - center.y;
+	const distance = Math.hypot(dx, dy);
+	if (distance < inner || distance > outer) return null;
+	const angle = Math.atan2(dy, dx);
+	const hit = wedges.find((wedge) => wedge.share > 0 && angleInWedge(angle, wedge.start, wedge.end));
+	return hit ? hit.index : null;
+}
+/** A plain annular sector (amicro's device donut). */
+function traceWedge(sink, center, inner, outer, start, end) {
+	if (end - start <= 1e-4) return;
+	sink.moveTo(center.x + outer * Math.cos(start), center.y + outer * Math.sin(start));
+	sink.arc(center.x, center.y, outer, start, end);
+	sink.lineTo(center.x + inner * Math.cos(end), center.y + inner * Math.sin(end));
+	sink.arc(center.x, center.y, inner, end, start, true);
+	sink.closePath();
+}
+/** An annular sector with rounded corners (amicro's graph donut). */
+function traceRoundedWedge(sink, center, inner, outer, start, end, radius) {
+	const sweep = end - start;
+	if (sweep <= .001) return;
+	const r = Math.max(0, Math.min(radius, (outer - inner) / 2, sweep * inner / 2));
+	if (r === 0) {
+		traceWedge(sink, center, inner, outer, start, end);
+		return;
+	}
+	const { x: cx, y: cy } = center;
+	const at = (distance, angle) => [cx + distance * Math.cos(angle), cy + distance * Math.sin(angle)];
+	const [isx, isy] = at(inner, start + r / inner);
+	sink.moveTo(isx, isy);
+	sink.arc(cx, cy, inner, start + r / inner, end - r / inner);
+	sink.arcTo(...at(inner, end), ...at(outer, end), r);
+	sink.arcTo(...at(outer, end), ...at(outer, end - r / outer), r);
+	sink.arc(cx, cy, outer, end - r / outer, start + r / outer, true);
+	sink.arcTo(...at(outer, start), ...at(inner, start), r);
+	sink.arcTo(...at(inner, start), isx, isy, r);
+	sink.closePath();
+}
+/** A rectangle with separate top and bottom corner radii (a stacked segment). */
+function traceRoundedRect(sink, x, y, width, height, radiusTop, radiusBottom = radiusTop) {
+	if (width <= 0 || height <= 0) return;
+	const top = Math.max(0, Math.min(radiusTop, width / 2, height / 2));
+	const bottom = Math.max(0, Math.min(radiusBottom, width / 2, height / 2));
+	sink.moveTo(x + top, y);
+	sink.lineTo(x + width - top, y);
+	sink.arcTo(x + width, y, x + width, y + top, top);
+	sink.lineTo(x + width, y + height - bottom);
+	sink.arcTo(x + width, y + height, x + width - bottom, y + height, bottom);
+	sink.lineTo(x + bottom, y + height);
+	sink.arcTo(x, y + height, x, y + height - bottom, bottom);
+	sink.lineTo(x, y + top);
+	sink.arcTo(x, y, x + top, y, top);
+	sink.closePath();
+}
+/**
+* Tangents for a monotone cubic spline (Fritsch–Carlson). Monotone means the
+* curve never overshoots its data: a smooth line that invents a dip below zero
+* between two positive days is lying.
+*/
+function monotoneTangents(points) {
+	const n = points.length;
+	if (n < 2) return points.map(() => 0);
+	const slopes = [];
+	for (let i = 0; i < n - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		const dx = b.x - a.x;
+		slopes.push(dx === 0 ? 0 : (b.y - a.y) / dx);
+	}
+	const tangents = points.map((_, i) => {
+		if (i === 0) return slopes[0] ?? 0;
+		if (i === n - 1) return slopes[n - 2] ?? 0;
+		const left = slopes[i - 1] ?? 0;
+		const right = slopes[i] ?? 0;
+		return left * right <= 0 ? 0 : (left + right) / 2;
+	});
+	for (let i = 0; i < n - 1; i++) {
+		const slope = slopes[i] ?? 0;
+		if (slope === 0) {
+			tangents[i] = 0;
+			tangents[i + 1] = 0;
+			continue;
+		}
+		const a = (tangents[i] ?? 0) / slope;
+		const b = (tangents[i + 1] ?? 0) / slope;
+		const s = a * a + b * b;
+		if (s > 9) {
+			const t = 3 / Math.sqrt(s);
+			tangents[i] = t * a * slope;
+			tangents[i + 1] = t * b * slope;
+		}
+	}
+	return tangents;
+}
+/**
+* Traces a monotone spline through `points`. With `baseline`, it closes the
+* shape down to that y — the region under the line, ready to clip a fill.
+*/
+function traceSpline(sink, points, baseline) {
+	const first = points[0];
+	const last = points[points.length - 1];
+	if (!first || !last) return;
+	const tangents = monotoneTangents(points);
+	sink.moveTo(first.x, first.y);
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		const third = (b.x - a.x) / 3;
+		sink.bezierCurveTo(a.x + third, a.y + third * (tangents[i] ?? 0), b.x - third, b.y - third * (tangents[i + 1] ?? 0), b.x, b.y);
+	}
+	if (baseline !== void 0) {
+		sink.lineTo(last.x, baseline);
+		sink.lineTo(first.x, baseline);
+		sink.closePath();
+	}
+}
+/** Traces straight segments through `points`, optionally closed to a baseline. */
+function tracePolyline(sink, points, baseline) {
+	const first = points[0];
+	const last = points[points.length - 1];
+	if (!first || !last) return;
+	sink.moveTo(first.x, first.y);
+	for (const point of points.slice(1)) sink.lineTo(point.x, point.y);
+	if (baseline !== void 0) {
+		sink.lineTo(last.x, baseline);
+		sink.lineTo(first.x, baseline);
+		sink.closePath();
+	}
+}
+/** Linear interpolation of a series at fractional index `at` (0..length−1). */
+function valueAt(values, at) {
+	if (values.length === 0) return 0;
+	const clamped = Math.min(values.length - 1, Math.max(0, at));
+	const i0 = Math.floor(clamped);
+	const i1 = Math.min(i0 + 1, values.length - 1);
+	const a = values[i0] ?? 0;
+	return a + ((values[i1] ?? 0) - a) * (clamped - i0);
+}
+/**
+* A round axis maximum just above `value`: 1, 2 or 5 × 10ⁿ, with 5% headroom
+* (amicro's getAxisMax). Zero and negatives give 1.
+*/
+function niceMax(value) {
+	if (!(value > 0)) return 1;
+	const target = value * 1.05;
+	const power = 10 ** Math.floor(Math.log10(target));
+	const normalized = target / power;
+	return (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * power;
+}
+//#endregion
+export { angleInWedge, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, valueAt, wedgeAt };
+
+//# sourceMappingURL=dither-geometry.js.map

package/dist/components/dither-canvas/dither-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-geometry.js","names":[],"sources":["../../../src/components/dither-canvas/dither-geometry.ts"],"sourcesContent":["// Ported from amicro \"Dither Charts\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\n\n/*\n * Shape geometry for dither charts. Every tracer writes to a `PathSink` — the\n * subset of the path API that both CanvasRenderingContext2D and Path2D share —\n * so the same function builds a clip region, strokes an outline, or records\n * its commands in a test.\n */\n\nexport interface PathSink {\n  moveTo(x: number, y: number): void;\n  lineTo(x: number, y: number): void;\n  arc(x: number, y: number, radius: number, start: number, end: number, ccw?: boolean): void;\n  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;\n  bezierCurveTo(c1x: number, c1y: number, c2x: number, c2y: number, x: number, y: number): void;\n  closePath(): void;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Builds a Path2D from a tracer. Returns null where Path2D does not exist\n * (server rendering, some test DOMs), so callers simply skip the clip.\n */\nexport function makePath(trace: (sink: PathSink) => void): Path2D | null {\n  if (typeof Path2D === \"undefined\") return null;\n  const path = new Path2D();\n  trace(path);\n  return path;\n}\n\nconst TAU = Math.PI * 2;\n\n/** Normalises an angle into [0, 2π). */\nexport function normalizeAngle(angle: number): number {\n  return ((angle % TAU) + TAU) % TAU;\n}\n\nexport interface Wedge {\n  index: number;\n  /** Fraction of the whole, 0..1. */\n  share: number;\n  start: number;\n  end: number;\n  mid: number;\n}\n\n/**\n * Splits a circle into wedges, clockwise from 12 o'clock by default, leaving\n * `gap` radians between neighbours (amicro's graph donut uses 0.07).\n * Negative and non-finite values count as zero.\n */\nexport function pieWedges(\n  values: readonly number[],\n  options: { start?: number; gap?: number } = {},\n): Wedge[] {\n  const start = options.start ?? -Math.PI / 2;\n  const gap = options.gap ?? 0;\n  const clean = values.map((value) => (Number.isFinite(value) && value > 0 ? value : 0));\n  const total = clean.reduce((sum, value) => sum + value, 0);\n  let cursor = start;\n  return clean.map((value, index) => {\n    const share = total > 0 ? value / total : 0;\n    const sweep = share * TAU;\n    const half = sweep > gap ? gap / 2 : sweep / 2;\n    const wedge = {\n      index,\n      share,\n      start: cursor + half,\n      end: cursor + sweep - half,\n      mid: cursor + sweep / 2,\n    };\n    cursor += sweep;\n    return wedge;\n  });\n}\n\n/** True when `angle` lies within the wedge's sweep. */\nexport function angleInWedge(angle: number, start: number, end: number): boolean {\n  if (end <= start) return false;\n  return normalizeAngle(angle - start) <= end - start;\n}\n\n/**\n * The wedge under a point, or null — hit-testing for a donut from pointer\n * coordinates, so hover never needs to read pixels back.\n */\nexport function wedgeAt(\n  wedges: readonly Wedge[],\n  center: Point,\n  inner: number,\n  outer: number,\n  point: Point,\n): number | null {\n  const dx = point.x - center.x;\n  const dy = point.y - center.y;\n  const distance = Math.hypot(dx, dy);\n  if (distance < inner || distance > outer) return null;\n  const angle = Math.atan2(dy, dx);\n  const hit = wedges.find(\n    (wedge) => wedge.share > 0 && angleInWedge(angle, wedge.start, wedge.end),\n  );\n  return hit ? hit.index : null;\n}\n\n/** A plain annular sector (amicro's device donut). */\nexport function traceWedge(\n  sink: PathSink,\n  center: Point,\n  inner: number,\n  outer: number,\n  start: number,\n  end: number,\n): void {\n  if (end - start <= 0.0001) return;\n  sink.moveTo(center.x + outer * Math.cos(start), center.y + outer * Math.sin(start));\n  sink.arc(center.x, center.y, outer, start, end);\n  sink.lineTo(center.x + inner * Math.cos(end), center.y + inner * Math.sin(end));\n  sink.arc(center.x, center.y, inner, end, start, true);\n  sink.closePath();\n}\n\n/** An annular sector with rounded corners (amicro's graph donut). */\nexport function traceRoundedWedge(\n  sink: PathSink,\n  center: Point,\n  inner: number,\n  outer: number,\n  start: number,\n  end: number,\n  radius: number,\n): void {\n  const sweep = end - start;\n  if (sweep <= 0.001) return;\n  const r = Math.max(0, Math.min(radius, (outer - inner) / 2, (sweep * inner) / 2));\n  if (r === 0) {\n    traceWedge(sink, center, inner, outer, start, end);\n    return;\n  }\n  const { x: cx, y: cy } = center;\n  const at = (distance: number, angle: number): [number, number] => [\n    cx + distance * Math.cos(angle),\n    cy + distance * Math.sin(angle),\n  ];\n  const [isx, isy] = at(inner, start + r / inner);\n  sink.moveTo(isx, isy);\n  sink.arc(cx, cy, inner, start + r / inner, end - r / inner);\n  sink.arcTo(...at(inner, end), ...at(outer, end), r);\n  sink.arcTo(...at(outer, end), ...at(outer, end - r / outer), r);\n  sink.arc(cx, cy, outer, end - r / outer, start + r / outer, true);\n  sink.arcTo(...at(outer, start), ...at(inner, start), r);\n  sink.arcTo(...at(inner, start), isx, isy, r);\n  sink.closePath();\n}\n\n/** A rectangle with separate top and bottom corner radii (a stacked segment). */\nexport function traceRoundedRect(\n  sink: PathSink,\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  radiusTop: number,\n  radiusBottom = radiusTop,\n): void {\n  if (width <= 0 || height <= 0) return;\n  const top = Math.max(0, Math.min(radiusTop, width / 2, height / 2));\n  const bottom = Math.max(0, Math.min(radiusBottom, width / 2, height / 2));\n  sink.moveTo(x + top, y);\n  sink.lineTo(x + width - top, y);\n  sink.arcTo(x + width, y, x + width, y + top, top);\n  sink.lineTo(x + width, y + height - bottom);\n  sink.arcTo(x + width, y + height, x + width - bottom, y + height, bottom);\n  sink.lineTo(x + bottom, y + height);\n  sink.arcTo(x, y + height, x, y + height - bottom, bottom);\n  sink.lineTo(x, y + top);\n  sink.arcTo(x, y, x + top, y, top);\n  sink.closePath();\n}\n\n/**\n * Tangents for a monotone cubic spline (Fritsch–Carlson). Monotone means the\n * curve never overshoots its data: a smooth line that invents a dip below zero\n * between two positive days is lying.\n */\nexport function monotoneTangents(points: readonly Point[]): number[] {\n  const n = points.length;\n  if (n < 2) return points.map(() => 0);\n  const slopes: number[] = [];\n  for (let i = 0; i < n - 1; i++) {\n    const a = points[i] as Point;\n    const b = points[i + 1] as Point;\n    const dx = b.x - a.x;\n    slopes.push(dx === 0 ? 0 : (b.y - a.y) / dx);\n  }\n  const tangents = points.map((_, i) => {\n    if (i === 0) return slopes[0] ?? 0;\n    if (i === n - 1) return slopes[n - 2] ?? 0;\n    const left = slopes[i - 1] ?? 0;\n    const right = slopes[i] ?? 0;\n    return left * right <= 0 ? 0 : (left + right) / 2;\n  });\n  for (let i = 0; i < n - 1; i++) {\n    const slope = slopes[i] ?? 0;\n    if (slope === 0) {\n      tangents[i] = 0;\n      tangents[i + 1] = 0;\n      continue;\n    }\n    const a = (tangents[i] ?? 0) / slope;\n    const b = (tangents[i + 1] ?? 0) / slope;\n    const s = a * a + b * b;\n    if (s > 9) {\n      const t = 3 / Math.sqrt(s);\n      tangents[i] = t * a * slope;\n      tangents[i + 1] = t * b * slope;\n    }\n  }\n  return tangents;\n}\n\n/**\n * Traces a monotone spline through `points`. With `baseline`, it closes the\n * shape down to that y — the region under the line, ready to clip a fill.\n */\nexport function traceSpline(sink: PathSink, points: readonly Point[], baseline?: number): void {\n  const first = points[0];\n  const last = points[points.length - 1];\n  if (!first || !last) return;\n  const tangents = monotoneTangents(points);\n  sink.moveTo(first.x, first.y);\n  for (let i = 0; i < points.length - 1; i++) {\n    const a = points[i] as Point;\n    const b = points[i + 1] as Point;\n    const third = (b.x - a.x) / 3;\n    sink.bezierCurveTo(\n      a.x + third,\n      a.y + third * (tangents[i] ?? 0),\n      b.x - third,\n      b.y - third * (tangents[i + 1] ?? 0),\n      b.x,\n      b.y,\n    );\n  }\n  if (baseline !== undefined) {\n    sink.lineTo(last.x, baseline);\n    sink.lineTo(first.x, baseline);\n    sink.closePath();\n  }\n}\n\n/** Traces straight segments through `points`, optionally closed to a baseline. */\nexport function tracePolyline(\n  sink: PathSink,\n  points: readonly Point[],\n  baseline?: number,\n): void {\n  const first = points[0];\n  const last = points[points.length - 1];\n  if (!first || !last) return;\n  sink.moveTo(first.x, first.y);\n  for (const point of points.slice(1)) sink.lineTo(point.x, point.y);\n  if (baseline !== undefined) {\n    sink.lineTo(last.x, baseline);\n    sink.lineTo(first.x, baseline);\n    sink.closePath();\n  }\n}\n\n/** Linear interpolation of a series at fractional index `at` (0..length−1). */\nexport function valueAt(values: readonly number[], at: number): number {\n  if (values.length === 0) return 0;\n  const clamped = Math.min(values.length - 1, Math.max(0, at));\n  const i0 = Math.floor(clamped);\n  const i1 = Math.min(i0 + 1, values.length - 1);\n  const a = values[i0] ?? 0;\n  const b = values[i1] ?? 0;\n  return a + (b - a) * (clamped - i0);\n}\n\n/**\n * A round axis maximum just above `value`: 1, 2 or 5 × 10ⁿ, with 5% headroom\n * (amicro's getAxisMax). Zero and negatives give 1.\n */\nexport function niceMax(value: number): number {\n  if (!(value > 0)) return 1;\n  const target = value * 1.05;\n  const power = 10 ** Math.floor(Math.log10(target));\n  const normalized = target / power;\n  const step = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;\n  return step * power;\n}\n"],"mappings":"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"}

package/dist/components/dither-canvas/dither-scrubber.d.ts

@@ -0,0 +1,64 @@
+import { ComponentPropsWithRef, FocusEvent, KeyboardEvent, PointerEvent, ReactNode } from "react";
+//#region src/components/dither-canvas/dither-scrubber.d.ts
+/** The index under a pointer: `clientX` across `rect`, rounded to a point. */
+declare function indexFromPointer(clientX: number, rect: {
+  left: number;
+  width: number;
+}, count: number): number;
+/** The index a key moves to, or null when the key is not a slider key. */
+declare function indexFromKey(key: string, current: number, count: number): number | null;
+interface DitherScrubberOptions {
+  /** Number of points. */
+  count: number;
+  /** Controlled cursor index; null hides the cursor. */
+  index?: number | null;
+  defaultIndex?: number | null;
+  onIndexChange?: (index: number | null) => void;
+}
+interface DitherScrubberProps {
+  role: "slider";
+  tabIndex: number;
+  "aria-valuemin": number;
+  "aria-valuemax": number;
+  "aria-valuenow": number;
+  "aria-orientation": "horizontal";
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+  onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+  onFocus: (event: FocusEvent<HTMLElement>) => void;
+  onBlur: (event: FocusEvent<HTMLElement>) => void;
+}
+interface DitherScrubber {
+  /** The cursor's point, or null when neither pointer nor focus is on the plot. */
+  index: number | null;
+  /** The point the slider reports: the cursor, or the latest point at rest. */
+  valueIndex: number;
+  setIndex: (index: number | null) => void;
+  /** Spread onto the plot overlay. Add aria-label and aria-valuetext yourself. */
+  sliderProps: DitherScrubberProps;
+}
+/** State and slider props for a keyboard-operable chart cursor. */
+declare function useDitherScrubber({ count, index: controlled, defaultIndex, onIndexChange }: DitherScrubberOptions): DitherScrubber;
+interface DitherCursorProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  scrubber: DitherScrubber;
+  /** Names the slider, e.g. "Members by day". */
+  label: string;
+  /** What the slider announces for the current point, e.g. "Jul 3: 24". */
+  valueText: string;
+  /** Cursor position across the plot, 0..1. */
+  x: number;
+  /** Point position down the plot, 0..1 from the top; null draws no dot. */
+  y?: number | null;
+  /** Readout content, shown beside the cursor. */
+  readout?: ReactNode;
+}
+/**
+ * The scrubber's overlay: an invisible slider covering its positioned parent,
+ * plus the cursor line, point and readout while a point is active. All real
+ * DOM — the readout is text, not pixels. Place it after the chart's role="img"
+ * element, not inside it: a slider inside an image would be hidden.
+ */
+declare function DitherCursor({ scrubber, label, valueText, x, y, readout, className, ...props }: DitherCursorProps): import("react").JSX.Element;
+//#endregion
+export { DitherCursor, DitherCursorProps, DitherScrubber, DitherScrubberOptions, DitherScrubberProps, indexFromKey, indexFromPointer, useDitherScrubber };
+//# sourceMappingURL=dither-scrubber.d.ts.map

package/dist/components/dither-canvas/dither-scrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-scrubber.d.ts","names":[],"sources":["../../../src/components/dither-canvas/dither-scrubber.tsx"],"mappings":";;;iBAyBgB,iBACd,iBACA;EAAQ;EAAc;GACtB;;iBAQc,aAAa,aAAa,iBAAiB;UAwB1C;;EAEf;;EAEA;EACA;EACA,iBAAiB;;UAGF;EACf;EACA;EACA;EACA;EACA;EACA;EACA,YAAY,OAAO,cAAc;EACjC,gBAAgB,OAAO,aAAa;EACpC,iBAAiB,OAAO,aAAa;EACrC,UAAU,OAAO,WAAW;EAC5B,SAAS,OAAO,WAAW;;UAGZ;;EAEf;;EAEA;EACA,WAAW;;EAEX,aAAa;;;iBAIC,oBACd,OACA,OAAO,YACP,cACA,iBACC,wBAAwB;UA6DV,0BAA0B,KAAK;EAC9C,UAAU;;EAEV;;EAEA;;EAEA;;EAEA;;EAEA,UAAU;;;;;;;;iBASI,eACd,UACA,OACA,WACA,GACA,GACA,SACA,cACG,SACF,oCAAiB,IAAA"}

package/dist/components/dither-canvas/dither-scrubber.js

@@ -0,0 +1,130 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/dither-canvas/dither-scrubber.tsx
+/** The index under a pointer: `clientX` across `rect`, rounded to a point. */
+function indexFromPointer(clientX, rect, count) {
+	if (count <= 1 || rect.width <= 0) return 0;
+	const t = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+	return Math.round(t * (count - 1));
+}
+/** The index a key moves to, or null when the key is not a slider key. */
+function indexFromKey(key, current, count) {
+	const lastIndex = Math.max(0, count - 1);
+	const page = Math.max(1, Math.round(count / 10));
+	const clampTo = (value) => Math.min(lastIndex, Math.max(0, value));
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return clampTo(current + 1);
+		case "ArrowLeft":
+		case "ArrowDown": return clampTo(current - 1);
+		case "PageUp": return clampTo(current + page);
+		case "PageDown": return clampTo(current - page);
+		case "Home": return 0;
+		case "End": return lastIndex;
+		default: return null;
+	}
+}
+/** State and slider props for a keyboard-operable chart cursor. */
+function useDitherScrubber({ count, index: controlled, defaultIndex = null, onIndexChange }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const isControlled = controlled !== void 0;
+	const raw = isControlled ? controlled : uncontrolled;
+	const lastIndex = Math.max(0, count - 1);
+	const index = raw === null ? null : Math.min(lastIndex, Math.max(0, raw));
+	const setIndex = useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onIndexChange?.(next);
+	}, [isControlled, onIndexChange]);
+	const valueIndex = index ?? lastIndex;
+	return {
+		index,
+		valueIndex,
+		setIndex,
+		sliderProps: {
+			role: "slider",
+			tabIndex: 0,
+			"aria-valuemin": 0,
+			"aria-valuemax": lastIndex,
+			"aria-valuenow": valueIndex,
+			"aria-orientation": "horizontal",
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && index !== null) {
+					event.preventDefault();
+					setIndex(null);
+					return;
+				}
+				const next = indexFromKey(event.key, valueIndex, count);
+				if (next === null) return;
+				event.preventDefault();
+				if (next !== index) setIndex(next);
+			},
+			onPointerMove: (event) => {
+				const next = indexFromPointer(event.clientX, event.currentTarget.getBoundingClientRect(), count);
+				if (next !== index) setIndex(next);
+			},
+			onPointerLeave: (event) => {
+				if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) setIndex(null);
+			},
+			onFocus: () => {
+				if (index === null) setIndex(lastIndex);
+			},
+			onBlur: () => {
+				setIndex(null);
+			}
+		}
+	};
+}
+/**
+* The scrubber's overlay: an invisible slider covering its positioned parent,
+* plus the cursor line, point and readout while a point is active. All real
+* DOM — the readout is text, not pixels. Place it after the chart's role="img"
+* element, not inside it: a slider inside an image would be hidden.
+*/
+function DitherCursor({ scrubber, label, valueText, x, y = null, readout, className, ...props }) {
+	const active = scrubber.index !== null;
+	const left = `${String(Math.min(1, Math.max(0, x)) * 100)}%`;
+	const shift = x < .15 ? "0%" : x > .85 ? "-100%" : "-50%";
+	const move = "transition-[left,top,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-slot": "dither-cursor",
+		"aria-label": label,
+		"aria-valuetext": valueText,
+		...scrubber.sliderProps,
+		...props,
+		className: cn("absolute inset-0 cursor-crosshair touch-pan-y rounded-md", focusRing, className)
+	}), active && /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute inset-0",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "dither-cursor-line",
+				className: cn("absolute inset-y-0 w-px bg-primary/70", move),
+				style: { left }
+			}),
+			y !== null && /* @__PURE__ */ jsx("div", {
+				"data-slot": "dither-cursor-point",
+				className: cn("absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-primary shadow-sm", move),
+				style: {
+					left,
+					top: `${String(y * 100)}%`
+				}
+			}),
+			readout !== void 0 && /* @__PURE__ */ jsx("div", {
+				"data-slot": "dither-cursor-readout",
+				className: cn("absolute top-0 z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md", move),
+				style: {
+					left,
+					transform: `translate(${shift}, calc(-100% - 0.375rem))`
+				},
+				children: readout
+			})
+		]
+	})] });
+}
+//#endregion
+export { DitherCursor, indexFromKey, indexFromPointer, useDitherScrubber };
+
+//# sourceMappingURL=dither-scrubber.js.map

package/dist/components/dither-canvas/dither-scrubber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-scrubber.js","names":[],"sources":["../../../src/components/dither-canvas/dither-scrubber.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by amicro \"Dither Area Growth\").\nimport {\n  useCallback,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A scrubber over a series: the cursor amicro's growth chart drags with the\n * pointer, made operable without one. The plot overlay is an APG slider whose\n * value is a point index — arrow keys step, Page keys jump a tenth, Home/End go\n * to the ends — so the readout a pointer reveals is also reachable by keyboard\n * and announced through aria-valuetext.\n */\n\n/** The index under a pointer: `clientX` across `rect`, rounded to a point. */\nexport function indexFromPointer(\n  clientX: number,\n  rect: { left: number; width: number },\n  count: number,\n): number {\n  if (count <= 1 || rect.width <= 0) return 0;\n  const t = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n  return Math.round(t * (count - 1));\n}\n\n/** The index a key moves to, or null when the key is not a slider key. */\nexport function indexFromKey(key: string, current: number, count: number): number | null {\n  const lastIndex = Math.max(0, count - 1);\n  const page = Math.max(1, Math.round(count / 10));\n  const clampTo = (value: number) => Math.min(lastIndex, Math.max(0, value));\n  switch (key) {\n    case \"ArrowRight\":\n    case \"ArrowUp\":\n      return clampTo(current + 1);\n    case \"ArrowLeft\":\n    case \"ArrowDown\":\n      return clampTo(current - 1);\n    case \"PageUp\":\n      return clampTo(current + page);\n    case \"PageDown\":\n      return clampTo(current - page);\n    case \"Home\":\n      return 0;\n    case \"End\":\n      return lastIndex;\n    default:\n      return null;\n  }\n}\n\nexport interface DitherScrubberOptions {\n  /** Number of points. */\n  count: number;\n  /** Controlled cursor index; null hides the cursor. */\n  index?: number | null;\n  defaultIndex?: number | null;\n  onIndexChange?: (index: number | null) => void;\n}\n\nexport interface DitherScrubberProps {\n  role: \"slider\";\n  tabIndex: number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  \"aria-valuenow\": number;\n  \"aria-orientation\": \"horizontal\";\n  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  onPointerMove: (event: PointerEvent<HTMLElement>) => void;\n  onPointerLeave: (event: PointerEvent<HTMLElement>) => void;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n}\n\nexport interface DitherScrubber {\n  /** The cursor's point, or null when neither pointer nor focus is on the plot. */\n  index: number | null;\n  /** The point the slider reports: the cursor, or the latest point at rest. */\n  valueIndex: number;\n  setIndex: (index: number | null) => void;\n  /** Spread onto the plot overlay. Add aria-label and aria-valuetext yourself. */\n  sliderProps: DitherScrubberProps;\n}\n\n/** State and slider props for a keyboard-operable chart cursor. */\nexport function useDitherScrubber({\n  count,\n  index: controlled,\n  defaultIndex = null,\n  onIndexChange,\n}: DitherScrubberOptions): DitherScrubber {\n  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultIndex);\n  const isControlled = controlled !== undefined;\n  const raw = isControlled ? controlled : uncontrolled;\n  const lastIndex = Math.max(0, count - 1);\n  const index = raw === null ? null : Math.min(lastIndex, Math.max(0, raw));\n\n  const setIndex = useCallback(\n    (next: number | null) => {\n      if (!isControlled) setUncontrolled(next);\n      onIndexChange?.(next);\n    },\n    [isControlled, onIndexChange],\n  );\n\n  const valueIndex = index ?? lastIndex;\n\n  return {\n    index,\n    valueIndex,\n    setIndex,\n    sliderProps: {\n      role: \"slider\",\n      tabIndex: 0,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": lastIndex,\n      \"aria-valuenow\": valueIndex,\n      \"aria-orientation\": \"horizontal\",\n      onKeyDown: (event) => {\n        if (event.key === \"Escape\" && index !== null) {\n          event.preventDefault();\n          setIndex(null);\n          return;\n        }\n        const next = indexFromKey(event.key, valueIndex, count);\n        if (next === null) return;\n        event.preventDefault();\n        if (next !== index) setIndex(next);\n      },\n      onPointerMove: (event) => {\n        const next = indexFromPointer(\n          event.clientX,\n          event.currentTarget.getBoundingClientRect(),\n          count,\n        );\n        if (next !== index) setIndex(next);\n      },\n      onPointerLeave: (event) => {\n        if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget)\n          setIndex(null);\n      },\n      onFocus: () => {\n        if (index === null) setIndex(lastIndex);\n      },\n      onBlur: () => {\n        setIndex(null);\n      },\n    },\n  };\n}\n\nexport interface DitherCursorProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  scrubber: DitherScrubber;\n  /** Names the slider, e.g. \"Members by day\". */\n  label: string;\n  /** What the slider announces for the current point, e.g. \"Jul 3: 24\". */\n  valueText: string;\n  /** Cursor position across the plot, 0..1. */\n  x: number;\n  /** Point position down the plot, 0..1 from the top; null draws no dot. */\n  y?: number | null;\n  /** Readout content, shown beside the cursor. */\n  readout?: ReactNode;\n}\n\n/**\n * The scrubber's overlay: an invisible slider covering its positioned parent,\n * plus the cursor line, point and readout while a point is active. All real\n * DOM — the readout is text, not pixels. Place it after the chart's role=\"img\"\n * element, not inside it: a slider inside an image would be hidden.\n */\nexport function DitherCursor({\n  scrubber,\n  label,\n  valueText,\n  x,\n  y = null,\n  readout,\n  className,\n  ...props\n}: DitherCursorProps) {\n  const active = scrubber.index !== null;\n  const left = `${String(Math.min(1, Math.max(0, x)) * 100)}%`;\n  // Keep the readout inside the plot near either edge.\n  const shift = x < 0.15 ? \"0%\" : x > 0.85 ? \"-100%\" : \"-50%\";\n  const move =\n    \"transition-[left,top,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\";\n  return (\n    <>\n      <div\n        data-slot=\"dither-cursor\"\n        aria-label={label}\n        aria-valuetext={valueText}\n        {...scrubber.sliderProps}\n        {...props}\n        className={cn(\n          \"absolute inset-0 cursor-crosshair touch-pan-y rounded-md\",\n          focusRing,\n          className,\n        )}\n      />\n      {active && (\n        <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n          <div\n            data-slot=\"dither-cursor-line\"\n            className={cn(\"absolute inset-y-0 w-px bg-primary/70\", move)}\n            style={{ left }}\n          />\n          {y !== null && (\n            <div\n              data-slot=\"dither-cursor-point\"\n              className={cn(\n                \"absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-primary shadow-sm\",\n                move,\n              )}\n              style={{ left, top: `${String(y * 100)}%` }}\n            />\n          )}\n          {readout !== undefined && (\n            <div\n              data-slot=\"dither-cursor-readout\"\n              className={cn(\n                \"absolute top-0 z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md\",\n                move,\n              )}\n              style={{ left, transform: `translate(${shift}, calc(-100% - 0.375rem))` }}\n            >\n              {readout}\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dither-canvas/index.d.ts

@@ -0,0 +1,5 @@
+import { DitherCanvas, DitherCanvasHandle, DitherCanvasOptions, DitherCanvasProps, DitherDraw, DitherFrame, DitherTable, DitherTableProps, formatDitherValue, prefersReducedMotion, useDitherCanvas, useReducedMotionPreference } from "./dither-canvas.js";
+import { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, DitherBounds, DitherDensity, DitherFillOptions, Spring, SpringConfig, SpringList, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, hash2, lerp, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss } from "./dither-engine.js";
+import { PathSink, Point, Wedge, angleInWedge, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, valueAt, wedgeAt } from "./dither-geometry.js";
+import { DitherCursor, DitherCursorProps, DitherScrubber, DitherScrubberOptions, DitherScrubberProps, indexFromKey, indexFromPointer, useDitherScrubber } from "./dither-scrubber.js";
+export { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, type DitherBounds, DitherCanvas, type DitherCanvasHandle, type DitherCanvasOptions, type DitherCanvasProps, DitherCursor, type DitherCursorProps, type DitherDensity, type DitherDraw, type DitherFillOptions, type DitherFrame, type DitherScrubber, type DitherScrubberOptions, type DitherScrubberProps, DitherTable, type DitherTableProps, type PathSink, type Point, type Spring, type SpringConfig, type SpringList, type Wedge, angleInWedge, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, formatDitherValue, hash2, indexFromKey, indexFromPointer, lerp, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, prefersReducedMotion, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, useDitherCanvas, useDitherScrubber, useReducedMotionPreference, valueAt, wedgeAt };

package/dist/components/dither-canvas/index.js

@@ -0,0 +1,5 @@
+import { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, hash2, lerp, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss } from "./dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue, prefersReducedMotion, useDitherCanvas, useReducedMotionPreference } from "./dither-canvas.js";
+import { angleInWedge, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, valueAt, wedgeAt } from "./dither-geometry.js";
+import { DitherCursor, indexFromKey, indexFromPointer, useDitherScrubber } from "./dither-scrubber.js";
+export { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, DitherCanvas, DitherCursor, DitherTable, angleInWedge, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, formatDitherValue, hash2, indexFromKey, indexFromPointer, lerp, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, prefersReducedMotion, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, useDitherCanvas, useDitherScrubber, useReducedMotionPreference, valueAt, wedgeAt };

package/dist/components/dither-canvas/meta.js

@@ -0,0 +1,22 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-canvas/meta.ts
+const meta = defineMeta({
+	name: "dither-canvas",
+	title: "Dither Canvas",
+	description: "The engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.",
+	category: "data",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: [
+		"dither-canvas.tsx",
+		"dither-engine.ts",
+		"dither-geometry.ts",
+		"dither-scrubber.tsx"
+	],
+	a11y: "The canvas is aria-hidden by default: a chart built on it names itself with role=\"img\" and an aria-label summary, and renders its values in DitherTable, which stays in the accessibility tree when visually hidden. useDitherScrubber gives a chart cursor APG slider semantics (arrows, Page keys, Home/End). The loop pauses off-screen and in hidden tabs, and under reduced motion (or --motion-scale near zero) draws a single static frame with springs settled."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dither-canvas/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-canvas/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-canvas\",\n  title: \"Dither Canvas\",\n  description:\n    \"The engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"dither-canvas.tsx\", \"dither-engine.ts\", \"dither-geometry.ts\", \"dither-scrubber.tsx\"],\n  a11y:\n    'The canvas is aria-hidden by default: a chart built on it names itself with role=\"img\" and an ' +\n    \"aria-label summary, and renders its values in DitherTable, which stays in the accessibility tree \" +\n    \"when visually hidden. useDitherScrubber gives a chart cursor APG slider semantics (arrows, Page \" +\n    \"keys, Home/End). The loop pauses off-screen and in hidden tabs, and under reduced motion (or \" +\n    \"--motion-scale near zero) draws a single static frame with springs settled.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO;EAAC;EAAqB;EAAoB;EAAsB;CAAqB;CAC5F,MACE;AAKJ,CAAC"}