@stephen-netu/design-system 0.1.0 → 0.2.1

package/src/n1-flow-canvas/types.ts

@@ -1,102 +0,0 @@
-// N1 Flow Canvas — Shared Types
-// Pure TypeScript — no Svelte, no DOM dependencies
-// S-02: all collections use Map/Array with deterministic ordering (no Set/Object spread iteration)
-
-// === Graph Primitives ===
-
-export interface GraphNode {
-  id: string;
-  label: string;
-  /** Optional semantic data (task status, flow phase, etc.) */
-  data: Record<string, unknown>;
-}
-
-export interface GraphEdge {
-  id: string;
-  sourceId: string;
-  targetId: string;
-  /** Optional: task wt-NNN dependency references */
-  label?: string;
-}
-
-// === GraphSnapshot — readonly, fed to ELK worker, never mutated during layout ===
-
-export interface GraphSnapshot {
-  readonly nodes: ReadonlyArray<GraphNode>;
-  readonly edges: ReadonlyArray<GraphEdge>;
-  /** Node id used as layout/BFS root */
-  readonly focusNodeId: string | null;
-}
-
-// === Computed Layout ===
-
-export interface NodeLayout {
-  id: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface LayoutResult {
-  /** Euclidean positions from ELK, keyed by node id */
-  positions: Map<string, NodeLayout>;
-  /** BFS traversal order starting from focusNodeId (or arbitrary root if null) */
-  bfsOrder: ReadonlyArray<string>;
-}
-
-// === Worker Protocol ===
-
-export interface WorkerIn {
-  type: 'layout';
-  snapshot: GraphSnapshot;
-  /** Canvas dimensions for ELK bounds */
-  canvasWidth: number;
-  canvasHeight: number;
-}
-
-export interface WorkerOut {
-  type: 'layout_result';
-  result: LayoutResult;
-}
-
-export type WorkerMessage = WorkerIn | WorkerOut;
-
-// === GraphState — mutable, holds Spring-wrapped positions ===
-// Implemented in graph-state.svelte.ts (Svelte 5 runes required)
-// Defined here as an interface for type-checking without Svelte dependency
-
-export interface GraphStateApi {
-  /** Current node positions (Spring targets). Read these for rendering. */
-  readonly positions: Map<string, NodeLayout>;
-  /** Current BFS order for edge reveal animation */
-  readonly bfsOrder: ReadonlyArray<string>;
-  /** Update Spring targets from a completed layout. Does NOT reset current positions. */
-  applyLayout(result: LayoutResult): void;
-  /** Re-center Poincaré disk on this node. Does NOT trigger re-layout. */
-  setFocusCenter(nodeId: string): void;
-  /** Mark ELK layout root. Triggers worker re-compute. */
-  setLayoutRoot(nodeId: string): void;
-}
-
-// === Edge Reveal Animation ===
-
-export interface EdgeRevealState {
-  /** Edge id → current lineDashOffset (0.0 = fully drawn, 1.0 = hidden) */
-  offsets: Map<string, number>;
-}
-
-/** Stagger delay per BFS wave step (ms). Deterministic — no Math.random. */
-export const EDGE_REVEAL_STAGGER_MS = 30;
-
-// === Geometry (shared with n0, re-exported for convenience) ===
-
-export interface Point {
-  x: number;
-  y: number;
-}
-
-export interface Size {
-  width: number;
-  height: number;
-}

package/src/n1-flow-canvas/utils.ts

@@ -1,146 +0,0 @@
-// N1 Flow Canvas — Generic graph adapter utilities
-// These are the reusable algorithms; apps supply their own domain types + config.
-// S-02: all collections use Map/Array — no Set iteration order assumptions
-
-import type { GraphEdge, NodeLayout } from './types.js';
-
-// ── Hit testing ───────────────────────────────────────────────────────────────
-
-/**
- * Returns the id of the first node whose layout rect contains (x, y), or null.
- *
- * When the canvas element is scaled (CSS width ≠ canvas pixel width), pass
- * scaleX/scaleY to convert event coordinates before testing.
- *
- * @param x       - click x in canvas pixel space
- * @param y       - click y in canvas pixel space
- * @param positions - GraphState.positions map
- */
-export function nodeHitTest(
-  x: number,
-  y: number,
-  positions: Map<string, NodeLayout>,
-): string | null {
-  for (const [id, layout] of positions) {
-    if (
-      x >= layout.x &&
-      x <= layout.x + layout.width &&
-      y >= layout.y &&
-      y <= layout.y + layout.height
-    ) {
-      return id;
-    }
-  }
-  return null;
-}
-
-/**
- * Convert a DOM click event on a container element to canvas pixel coordinates,
- * accounting for CSS scaling between container size and canvas resolution.
- */
-export function domEventToCanvasCoords(
-  event: MouseEvent,
-  canvasWidth: number,
-  canvasHeight: number,
-): { x: number; y: number } {
-  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
-  const scaleX = canvasWidth  / rect.width;
-  const scaleY = canvasHeight / rect.height;
-  return {
-    x: (event.clientX - rect.left) * scaleX,
-    y: (event.clientY - rect.top)  * scaleY,
-  };
-}
-
-// ── Edge inference ────────────────────────────────────────────────────────────
-
-/**
- * Parse directed dependency edges by scanning each item's description for
- * regex matches that reference another item's id.
- *
- * Generic — works for any item type. Apps supply:
- * - `idFn`   — extract the item's own id
- * - `descFn` — extract the text to scan (description, notes, etc.)
- * - `mentionRegex` — must have one capture group yielding the referenced id
- * - `mentionToId`  — convert regex capture to a canonical id (e.g. `m => 'wt-' + m`)
- *
- * @example KOS usage:
- *   parseMentionEdges(tasks, t => t.id, t => t.description ?? '', /wt-(\d+)/g, m => `wt-${m}`)
- */
-export function parseMentionEdges<T>(
-  items: T[],
-  idFn: (item: T) => string,
-  descFn: (item: T) => string,
-  mentionRegex: RegExp,
-  mentionToId: (capture: string) => string,
-  edgesMap: Map<string, GraphEdge> = new Map(),
-): Map<string, GraphEdge> {
-  const knownIds = new Set(items.map(idFn));
-
-  for (const item of items) {
-    const sourceId = idFn(item);
-    const text = descFn(item);
-    if (!text) continue;
-
-    for (const match of text.matchAll(mentionRegex)) {
-      const targetId = mentionToId(match[1]);
-      if (!knownIds.has(targetId)) continue;
-
-      const edgeId = `${sourceId}->${targetId}`;
-      if (edgesMap.has(edgeId)) continue;
-
-      edgesMap.set(edgeId, {
-        id:       edgeId,
-        sourceId,
-        targetId,
-        label:    'depends_on',
-      });
-    }
-  }
-
-  return edgesMap;
-}
-
-/**
- * Create sequential "related" edges between items that share the same group key,
- * ordered by a sort key. Produces a chain: group[0]→group[1]→group[2]…
- *
- * Generic — apps supply:
- * - `idFn`       — extract item id
- * - `groupKeyFn` — items with the same key become a chain (e.g. domain+workspace)
- * - `sortKeyFn`  — ordering within each group (e.g. createdAt string, or id)
- *
- * @example KOS usage:
- *   parseGroupedSequenceEdges(tasks, t => t.id,
- *     t => `${t.domain ?? ''}:${t.workspace ?? ''}`,
- *     t => t.createdAt ?? t.id)
- */
-export function parseGroupedSequenceEdges<T>(
-  items: T[],
-  idFn: (item: T) => string,
-  groupKeyFn: (item: T) => string,
-  sortKeyFn: (item: T) => string,
-  edgesMap: Map<string, GraphEdge> = new Map(),
-): Map<string, GraphEdge> {
-  const sorted = [...items].sort((a, b) => sortKeyFn(a).localeCompare(sortKeyFn(b)));
-
-  const groups = new Map<string, T[]>();
-  for (const item of sorted) {
-    const key = groupKeyFn(item);
-    if (!groups.has(key)) groups.set(key, []);
-    groups.get(key)!.push(item);
-  }
-
-  for (const groupItems of groups.values()) {
-    if (groupItems.length < 2) continue;
-    for (let i = 0; i < groupItems.length - 1; i++) {
-      const sourceId = idFn(groupItems[i]);
-      const targetId = idFn(groupItems[i + 1]);
-      const edgeId   = `${sourceId}->${targetId}`;
-      if (edgesMap.has(edgeId)) continue;
-      edgesMap.set(edgeId, { id: edgeId, sourceId, targetId, label: 'related' });
-    }
-  }
-
-  return edgesMap;
-}

package/src/n2-manifold-disk/poincare.ts

@@ -1,184 +0,0 @@
-// Poincaré disk projection — ~50 lines of pure math
-// κ = 1.0 fixed (standard Poincaré disk)
-// S-02: pure functions, no side effects, deterministic
-
-import type { NodeLayout } from '../n1-flow-canvas/types.js';
-
-// Complex number as [real, imag] tuple
-type Complex = readonly [number, number];
-
-// ── Complex arithmetic ────────────────────────────────────────────────────────
-
-function cadd(a: Complex, b: Complex): Complex {
-  return [a[0] + b[0], a[1] + b[1]];
-}
-
-function csub(a: Complex, b: Complex): Complex {
-  return [a[0] - b[0], a[1] - b[1]];
-}
-
-function cmul(a: Complex, b: Complex): Complex {
-  return [a[0] * b[0] - a[1] * b[1], a[0] * b[1] + a[1] * b[0]];
-}
-
-function cdiv(a: Complex, b: Complex): Complex {
-  const denom = b[0] * b[0] + b[1] * b[1];
-  return [(a[0] * b[0] + a[1] * b[1]) / denom, (a[1] * b[0] - a[0] * b[1]) / denom];
-}
-
-function cconj(a: Complex): Complex {
-  return [a[0], -a[1]];
-}
-
-function cabs(a: Complex): number {
-  return Math.sqrt(a[0] * a[0] + a[1] * a[1]);
-}
-
-// ── Möbius transform ──────────────────────────────────────────────────────────
-
-/**
- * Möbius transform that moves z0 to the origin.
- * f(z) = (z − z0) / (1 − conj(z0) · z)
- * Preserves the unit disk: |z| ≤ 1 → |f(z)| ≤ 1
- */
-export function mobiusTransform(z: Complex, z0: Complex): Complex {
-  const num = csub(z, z0);
-  const den = csub([1, 0], cmul(cconj(z0), z));
-  return cdiv(num, den);
-}
-
-/**
- * Project Euclidean node positions onto the Poincaré disk.
- *
- * Steps:
- * 1. Normalize all positions to [-1, 1]² using bounding box
- * 2. Apply Möbius transform to center focusNodeId at origin
- * 3. Scale to diskRadius
- *
- * Returns a new Map — does not mutate input.
- */
-export function projectToDisk(
-  positions: Map<string, NodeLayout>,
-  focusNodeId: string | null,
-  diskRadius: number,
-): Map<string, { x: number; y: number; width: number; height: number }> {
-  if (positions.size === 0) return new Map();
-
-  // Bounding box
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const p of positions.values()) {
-    const cx = p.x + p.width  / 2;
-    const cy = p.y + p.height / 2;
-    if (cx < minX) minX = cx;
-    if (cy < minY) minY = cy;
-    if (cx > maxX) maxX = cx;
-    if (cy > maxY) maxY = cy;
-  }
-
-  const rangeX = maxX - minX || 1;
-  const rangeY = maxY - minY || 1;
-  const range  = Math.max(rangeX, rangeY);
-
-  // Normalize to Poincaré disk unit coords, then scale to 0.9 max radius
-  function toComplex(p: NodeLayout): Complex {
-    const cx = p.x + p.width  / 2;
-    const cy = p.y + p.height / 2;
-    return [
-      ((cx - minX) / range * 2 - rangeX / range) * 0.9,
-      ((cy - minY) / range * 2 - rangeY / range) * 0.9,
-    ];
-  }
-
-  // Focus center in normalized coords
-  const focusPos = focusNodeId ? positions.get(focusNodeId) : null;
-  const z0: Complex = focusPos ? toComplex(focusPos) : [0, 0];
-
-  const result = new Map<string, { x: number; y: number; width: number; height: number }>();
-
-  for (const [id, p] of positions) {
-    const z = toComplex(p);
-    const projected = mobiusTransform(z, z0);
-    // Clamp to unit disk (numerical safety)
-    const r = cabs(projected);
-    const clamped: Complex = r > 0.99 ? [projected[0] * 0.99 / r, projected[1] * 0.99 / r] : projected;
-
-    result.set(id, {
-      x: clamped[0] * diskRadius + diskRadius - p.width  / 2,
-      y: clamped[1] * diskRadius + diskRadius - p.height / 2,
-      width:  p.width,
-      height: p.height,
-    });
-  }
-
-  return result;
-}
-
-/**
- * Poincaré distance between two points in the disk.
- * d(u,v) = 2 * atanh(|u - v| / |1 - conj(u)v|)
- */
-export function poincareDistance(u: Complex, v: Complex): number {
-  const num = cabs(csub(u, v));
-  const den = cabs(csub([1, 0], cmul(cconj(u), v)));
-  return 2 * Math.atanh(num / den);
-}
-
-// ── S³ quaternion projection ──────────────────────────────────────────────────
-
-/**
- * A point on the Poincaré disk derived from a unit quaternion on S³.
- *
- * Fields:
- * - `u`, `v` — disk coordinates in pixels, relative to disk centre
- * - `id`     — inhabitant identifier
- * - `allay`  — accumulated arc length (monotonically increasing)
- */
-export interface AgentPosition {
-  id: string;
-  u: number;  // disk x, relative to centre
-  v: number;  // disk y, relative to centre
-  allay: number;
-}
-
-/**
- * Project a unit quaternion [w, i, j, k] onto the Poincaré disk.
- *
- * Uses axis-angle parameterisation of S³:
- *   θ = 2·acos(clamp(w, −1, 1))          — total rotation angle
- *   axis = (i, j, k) / sin(θ/2)           — unit rotation axis
- *   r = θ/π · 0.95 · diskRadius           — radial distance on disk
- *   u = r · axis.i                         — Accumulation axis → disk X
- *   v = r · axis.j                         — Actuation axis → disk Y
- *
- * Properties:
- * - Identity quaternion (w=1) maps to disk centre — zero rotation.
- * - Maximally rotated quaternion (w=−1, θ=2π) maps to boundary.
- * - The rotation axis angle on disk reflects semantic orientation:
- *   i=Accumulation (X), j=Actuation (Y), k=Relation (depth, ignored here).
- *
- * S-02: pure function, no side effects.
- */
-export function quaternionToDisk(
-  w: number,
-  i: number,
-  j: number,
-  _k: number,
-  diskRadius: number,
-): { u: number; v: number } {
-  const wClamped = Math.max(-1, Math.min(1, w));
-  const theta = 2 * Math.acos(wClamped);
-
-  if (theta < 1e-9) {
-    // Identity — centre of disk
-    return { u: 0, v: 0 };
-  }
-
-  const sinHalf = Math.sin(theta / 2);
-  // r in [0, 0.95 * diskRadius]; maps θ=0 → centre, θ=π → boundary
-  const r = (theta / Math.PI) * 0.95 * diskRadius;
-
-  return {
-    u: r * (i / sinHalf),
-    v: r * (j / sinHalf),
-  };
-}

package/src/n3-force-graph/animated-edge.ts

@@ -1,107 +0,0 @@
-// N3 Animated Edge — linkCanvasObject callback for force-graph
-// wt-799: Three modes: marching-ants (active), dashed-static (stub), solid (wired)
-// Zero domain knowledge — pure visual primitive
-//
-// S-02: animation driven by tick counter, not wall clock
-// S-05: bounded by force-graph's own cooldown/frame budget
-
-import type { ForceGraphNode, ForceGraphLink, AnimatedEdgeConfig } from './types.js';
-import { getPulseTick } from './health-node.js';
-
-const DEFAULTS: Required<AnimatedEdgeConfig> = {
-  dashLength: 8,
-  gapLength: 4,
-  marchSpeed: 0.5,
-};
-
-/**
- * Create a `linkCanvasObject` callback for force-graph.
- *
- * Modes:
- * - `active`: marching-ants animation (data flowing)
- * - `stub`: dashed static line (connection exists but not wired)
- * - `wired`: solid line (fully connected)
- *
- * Usage:
- * ```ts
- * import { createAnimatedEdgeRenderer } from '@kos/design-system/n3-force-graph';
- * graph.linkCanvasObject(createAnimatedEdgeRenderer());
- * graph.linkCanvasObjectMode(() => 'replace');
- * ```
- */
-export function createAnimatedEdgeRenderer(
-  config?: AnimatedEdgeConfig,
-): (link: ForceGraphLink, ctx: CanvasRenderingContext2D, globalScale: number) => void {
-  const { dashLength, gapLength, marchSpeed } = { ...DEFAULTS, ...config };
-
-  return (link: ForceGraphLink, ctx: CanvasRenderingContext2D, globalScale: number) => {
-    // force-graph mutates source/target to resolved node objects at runtime
-    const source = link.source as unknown as ForceGraphNode;
-    const target = link.target as unknown as ForceGraphNode;
-
-    const sx = source.x ?? 0;
-    const sy = source.y ?? 0;
-    const tx = target.x ?? 0;
-    const ty = target.y ?? 0;
-
-    ctx.save();
-
-    const mode = link.mode ?? 'wired';
-
-    switch (mode) {
-      case 'active': {
-        // Marching-ants: animated dash offset driven by pulse tick
-        const offset = getPulseTick() * marchSpeed;
-        ctx.setLineDash([dashLength / globalScale, gapLength / globalScale]);
-        ctx.lineDashOffset = -offset / globalScale;
-        ctx.strokeStyle = '#b87333'; // brass — active flow
-        ctx.lineWidth = 2 / globalScale;
-        break;
-      }
-      case 'stub': {
-        // Dashed static: connection exists but unwired
-        ctx.setLineDash([4 / globalScale, 6 / globalScale]);
-        ctx.lineDashOffset = 0;
-        ctx.strokeStyle = '#5a4a30'; // muted brass
-        ctx.lineWidth = 1 / globalScale;
-        break;
-      }
-      case 'wired':
-      default: {
-        // Solid: fully connected
-        ctx.setLineDash([]);
-        ctx.strokeStyle = '#706858'; // tertiary text color
-        ctx.lineWidth = 1.5 / globalScale;
-        break;
-      }
-    }
-
-    // Draw line
-    ctx.beginPath();
-    ctx.moveTo(sx, sy);
-    ctx.lineTo(tx, ty);
-    ctx.stroke();
-
-    // Arrowhead for directed links (except stub)
-    if (mode !== 'stub') {
-      const angle = Math.atan2(ty - sy, tx - sx);
-      const arrowSize = 6 / globalScale;
-
-      ctx.fillStyle = ctx.strokeStyle;
-      ctx.beginPath();
-      ctx.moveTo(tx, ty);
-      ctx.lineTo(
-        tx - arrowSize * Math.cos(angle - Math.PI / 7),
-        ty - arrowSize * Math.sin(angle - Math.PI / 7),
-      );
-      ctx.lineTo(
-        tx - arrowSize * Math.cos(angle + Math.PI / 7),
-        ty - arrowSize * Math.sin(angle + Math.PI / 7),
-      );
-      ctx.closePath();
-      ctx.fill();
-    }
-
-    ctx.restore();
-  };
-}

package/src/n3-force-graph/health-node.ts

@@ -1,128 +0,0 @@
-// N3 Health Node — nodeCanvasObject callback for force-graph
-// wt-798: Renders nodes with health-derived color, pulse animation, size scaling
-// Zero domain knowledge — pure visual primitive
-//
-// S-02: health values are integer permille. No Math.random.
-// S-05: pulse uses rAF tick count (bounded by force-graph's own cooldown).
-
-import type { ForceGraphNode, HealthNodeConfig } from './types.js';
-import { healthToColor, healthToGlow } from './types.js';
-
-const DEFAULTS: Required<HealthNodeConfig> = {
-  baseRadius: 6,
-  pulseEnabled: true,
-  pulseAmplitude: 0.02,
-};
-
-// Global tick counter for deterministic pulse — incremented by the ForceGraph
-// component on each engine tick. Avoids Date.now() / performance.now() in render.
-let _pulseTick = 0;
-export function advancePulseTick(): void { _pulseTick++; }
-export function getPulseTick(): number { return _pulseTick; }
-
-/**
- * Create a `nodeCanvasObject` callback for force-graph.
- *
- * Usage:
- * ```ts
- * import { createHealthNodeRenderer } from '@kos/design-system/n3-force-graph';
- * graph.nodeCanvasObject(createHealthNodeRenderer({ baseRadius: 8 }));
- * graph.nodeCanvasObjectMode(() => 'replace');
- * ```
- */
-export function createHealthNodeRenderer(
-  config?: HealthNodeConfig,
-): (node: ForceGraphNode, ctx: CanvasRenderingContext2D, globalScale: number) => void {
-  const { baseRadius, pulseEnabled, pulseAmplitude } = { ...DEFAULTS, ...config };
-
-  return (node: ForceGraphNode, ctx: CanvasRenderingContext2D, globalScale: number) => {
-    const x = node.x ?? 0;
-    const y = node.y ?? 0;
-    const weight = node.weight ?? 1;
-    const health = node.health ?? 0;
-
-    // Size: base * sqrt(weight) for area-proportional scaling
-    let radius = baseRadius * Math.sqrt(weight);
-
-    // Pulse: subtle scale oscillation on healthy nodes
-    if (pulseEnabled && health >= 500) {
-      // Deterministic sine wave from tick counter, not wall clock
-      const phase = (_pulseTick * 0.05) % (2 * Math.PI);
-      const pulse = 1.0 + pulseAmplitude * Math.sin(phase);
-      radius *= pulse;
-    }
-
-    const color = healthToColor(health);
-    const glowAlpha = healthToGlow(health);
-
-    // Glow (outer ring via shadow)
-    if (glowAlpha > 0) {
-      ctx.beginPath();
-      ctx.arc(x, y, radius + 3 / globalScale, 0, 2 * Math.PI);
-      // Parse hex → rgba for the fill
-      const r = parseInt(color.slice(1, 3), 16);
-      const g = parseInt(color.slice(3, 5), 16);
-      const b = parseInt(color.slice(5, 7), 16);
-      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${glowAlpha})`;
-      ctx.shadowColor = color;
-      ctx.shadowBlur = 8 / globalScale;
-      ctx.fill();
-      ctx.shadowColor = 'transparent';
-      ctx.shadowBlur = 0;
-    }
-
-    // Node circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = color;
-    ctx.fill();
-
-    // Border
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
-    ctx.lineWidth = 1 / globalScale;
-    ctx.stroke();
-
-    // Label (below node, only when zoomed in enough)
-    if (globalScale >= 0.6) {
-      const fontSize = Math.max(10, 12 / globalScale);
-      ctx.font = `${fontSize}px var(--font-mono, 'JetBrains Mono', monospace)`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'top';
-      ctx.fillStyle = '#e8e0d0';
-
-      const label = node.label.length > 20 ? node.label.slice(0, 18) + '…' : node.label;
-      ctx.fillText(label, x, y + radius + 4 / globalScale);
-    }
-
-    // Type indicator: app nodes get a ring, ADR nodes get a diamond
-    if (node.type === 'app') {
-      ctx.beginPath();
-      ctx.arc(x, y, radius + 1.5 / globalScale, 0, 2 * Math.PI);
-      ctx.strokeStyle = '#b87333'; // brass
-      ctx.lineWidth = 2 / globalScale;
-      ctx.stroke();
-    }
-  };
-}
-
-/**
- * Create a `nodePointerAreaPaint` callback for hit detection.
- * Returns a circle matching the visual node size.
- */
-export function createHealthNodeAreaPaint(
-  config?: HealthNodeConfig,
-): (node: ForceGraphNode, paintColor: string, ctx: CanvasRenderingContext2D, globalScale: number) => void {
-  const { baseRadius } = { ...DEFAULTS, ...config };
-
-  return (node: ForceGraphNode, paintColor: string, ctx: CanvasRenderingContext2D) => {
-    const x = node.x ?? 0;
-    const y = node.y ?? 0;
-    const weight = node.weight ?? 1;
-    const radius = baseRadius * Math.sqrt(weight) + 4; // generous hit area
-
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = paintColor;
-    ctx.fill();
-  };
-}