@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/n2-manifold-disk/poincare.d.ts

@@ -0,0 +1,67 @@
+import type { NodeLayout } from '../n1-flow-canvas/types.js';
+type Complex = readonly [number, number];
+/**
+ * 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 declare function mobiusTransform(z: Complex, z0: Complex): Complex;
+/**
+ * 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 declare function projectToDisk(positions: Map<string, NodeLayout>, focusNodeId: string | null, diskRadius: number): Map<string, {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+/**
+ * Poincaré distance between two points in the disk.
+ * d(u,v) = 2 * atanh(|u - v| / |1 - conj(u)v|)
+ */
+export declare function poincareDistance(u: Complex, v: Complex): number;
+/**
+ * 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;
+    v: number;
+    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 declare function quaternionToDisk(w: number, i: number, j: number, _k: number, diskRadius: number): {
+    u: number;
+    v: number;
+};
+export {};
+//# sourceMappingURL=poincare.d.ts.map

package/dist/n2-manifold-disk/poincare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"poincare.d.ts","sourceRoot":"","sources":["../../src/n2-manifold-disk/poincare.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG7D,KAAK,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA+BzC;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,GAAG,OAAO,CAIhE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,EAClC,WAAW,EAAE,MAAM,GAAG,IAAI,EAC1B,UAAU,EAAE,MAAM,GACjB,GAAG,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAkDtE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,MAAM,CAI/D;AAID;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,EAAE,EAAE,MAAM,EACV,UAAU,EAAE,MAAM,GACjB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAiB1B"}

package/dist/n2-manifold-disk/poincare.js

@@ -0,0 +1,134 @@
+// Poincaré disk projection — ~50 lines of pure math
+// κ = 1.0 fixed (standard Poincaré disk)
+// S-02: pure functions, no side effects, deterministic
+// ── Complex arithmetic ────────────────────────────────────────────────────────
+function cadd(a, b) {
+    return [a[0] + b[0], a[1] + b[1]];
+}
+function csub(a, b) {
+    return [a[0] - b[0], a[1] - b[1]];
+}
+function cmul(a, b) {
+    return [a[0] * b[0] - a[1] * b[1], a[0] * b[1] + a[1] * b[0]];
+}
+function cdiv(a, b) {
+    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) {
+    return [a[0], -a[1]];
+}
+function cabs(a) {
+    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, z0) {
+    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, focusNodeId, diskRadius) {
+    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) {
+        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 = focusPos ? toComplex(focusPos) : [0, 0];
+    const result = new Map();
+    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 = 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, v) {
+    const num = cabs(csub(u, v));
+    const den = cabs(csub([1, 0], cmul(cconj(u), v)));
+    return 2 * Math.atanh(num / den);
+}
+/**
+ * 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, i, j, _k, diskRadius) {
+    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 → dist}/n3-force-graph/ForceGraph.svelte

@@ -6,10 +6,11 @@
   // S-05: Force simulation has cooldownTicks + cooldownTime bounds.
   //       Component destroys graph instance on unmount.
 
-  import { onMount, onDestroy } from 'svelte';
-  import type { ForceGraphData, ForceGraphNode, ForceGraphLink, HealthNodeConfig, AnimatedEdgeConfig, TooltipPosition } from './types.js';
-  import { createHealthNodeRenderer, createHealthNodeAreaPaint, advancePulseTick } from './health-node.js';
-  import { createAnimatedEdgeRenderer } from './animated-edge.js';
+import { onMount, onDestroy } from 'svelte';
+import type { ForceGraphData, ForceGraphNode, ForceGraphLink, HealthNodeConfig, AnimatedEdgeConfig, TooltipPosition } from './types.js';
+import { createHealthNodeRenderer, createHealthNodeAreaPaint, advancePulseTick } from './health-node.js';
+import { createAnimatedEdgeRenderer } from './animated-edge.js';
+import { getCanvasTheme } from '../p0-primitives/canvas-theme';
 
   // ── Props ────────────────────────────────────────────────────────────────────
 
@@ -40,20 +41,20 @@
     linkDistance?: number;
   }
 
-  let {
-    data,
-    width = 800,
-    height = 600,
-    nodeConfig,
-    edgeConfig,
-    backgroundColor = '#1a1a1a',
-    onNodeClick,
-    onNodeHover,
-    onLinkClick,
-    cooldownTicks = 300,
-    chargeStrength = -120,
-    linkDistance = 80,
-  }: Props = $props();
+let {
+     data,
+     width = 800,
+     height = 600,
+     nodeConfig,
+     edgeConfig,
+     backgroundColor = getCanvasTheme().bg,
+     onNodeClick,
+     onNodeHover,
+     onLinkClick,
+     cooldownTicks = 300,
+     chargeStrength = -120,
+     linkDistance = 80,
+   }: Props = $props();
 
   // ── Internal state ──────────────────────────────────────────────────────────
 

package/dist/n3-force-graph/ForceGraph.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { ForceGraphData, ForceGraphNode, ForceGraphLink, HealthNodeConfig, AnimatedEdgeConfig, TooltipPosition } from './types.js';
+interface Props {
+    /** Graph data: nodes + links */
+    data: ForceGraphData;
+    /** Container width. Default 800. */
+    width?: number;
+    /** Container height. Default 600. */
+    height?: number;
+    /** Health node rendering config */
+    nodeConfig?: HealthNodeConfig;
+    /** Animated edge rendering config */
+    edgeConfig?: AnimatedEdgeConfig;
+    /** Background color. Default '#1a1a1a'. */
+    backgroundColor?: string;
+    /** Callback when a node is clicked */
+    onNodeClick?: (node: ForceGraphNode) => void;
+    /** Callback when a node is hovered (null = hover left) */
+    onNodeHover?: (node: ForceGraphNode | null, position: TooltipPosition) => void;
+    /** Callback when a link is clicked */
+    onLinkClick?: (link: ForceGraphLink) => void;
+    /** Force simulation cooldown ticks. Default 300. S-05: bounded. */
+    cooldownTicks?: number;
+    /** D3 force charge strength. Default -120. */
+    chargeStrength?: number;
+    /** D3 force link distance. Default 80. */
+    linkDistance?: number;
+}
+declare const ForceGraph: import("svelte").Component<Props, {
+    zoomToFit: (duration?: number, padding?: number) => void;
+    centerAt: (x: number, y: number, duration?: number) => void;
+    zoom: (factor: number, duration?: number) => void;
+    reheat: () => void;
+}, "">;
+type ForceGraph = ReturnType<typeof ForceGraph>;
+export default ForceGraph;
+//# sourceMappingURL=ForceGraph.svelte.d.ts.map

package/dist/n3-force-graph/ForceGraph.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../../src/n3-force-graph/ForceGraph.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAQtI,UAAU,KAAK;IACb,gCAAgC;IAChC,IAAI,EAAE,cAAc,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,qCAAqC;IACrC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,EAAE,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/E,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA8IH,QAAA,MAAM,UAAU;;kBAnBQ,MAAM,KAAK,MAAM;mBAIhB,MAAM;;MAeyB,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/n3-force-graph/GraphTooltip.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the tooltip is visible */
+    visible?: boolean;
+    /** Screen X position (from graph coordinate transform) */
+    x?: number;
+    /** Screen Y position */
+    y?: number;
+    /** Offset from anchor point. Default 12. */
+    offset?: number;
+    /** Max width in px. Default 280. */
+    maxWidth?: number;
+    /** Content slot */
+    children?: Snippet;
+}
+declare const GraphTooltip: import("svelte").Component<Props, {}, "">;
+type GraphTooltip = ReturnType<typeof GraphTooltip>;
+export default GraphTooltip;
+//# sourceMappingURL=GraphTooltip.svelte.d.ts.map

package/dist/n3-force-graph/GraphTooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphTooltip.svelte.d.ts","sourceRoot":"","sources":["../../src/n3-force-graph/GraphTooltip.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoDH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/n3-force-graph/animated-edge.d.ts

@@ -0,0 +1,18 @@
+import type { ForceGraphLink, AnimatedEdgeConfig } from './types.js';
+/**
+ * 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 declare function createAnimatedEdgeRenderer(config?: AnimatedEdgeConfig): (link: ForceGraphLink, ctx: CanvasRenderingContext2D, globalScale: number) => void;
+//# sourceMappingURL=animated-edge.d.ts.map

package/dist/n3-force-graph/animated-edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-edge.d.ts","sourceRoot":"","sources":["../../src/n3-force-graph/animated-edge.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAkB,cAAc,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAUrF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,0BAA0B,CACvC,MAAM,CAAC,EAAE,kBAAkB,GAC1B,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAyErF"}

package/dist/n3-force-graph/animated-edge.js

@@ -0,0 +1,87 @@
+// 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 { getPulseTick } from './health-node.js';
+import { getCanvasTheme } from '../p0-primitives/canvas-theme';
+const DEFAULTS = {
+    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) {
+    const { dashLength, gapLength, marchSpeed } = { ...DEFAULTS, ...config };
+    return (link, ctx, globalScale) => {
+        // force-graph mutates source/target to resolved node objects at runtime
+        const source = link.source;
+        const target = link.target;
+        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 = getCanvasTheme().nodeBorder;
+                ctx.lineWidth = 2 / globalScale;
+                break;
+            }
+            case 'stub': {
+                // Dashed static: connection exists but unwired
+                ctx.setLineDash([4 / globalScale, 6 / globalScale]);
+                ctx.lineDashOffset = 0;
+                ctx.strokeStyle = 'rgba(88, 166, 255, 0.15)'; // accent subtle
+                ctx.lineWidth = 1 / globalScale;
+                break;
+            }
+            case 'wired':
+            default: {
+                // Solid: fully connected
+                ctx.setLineDash([]);
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)'; // border subtle
+                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/dist/n3-force-graph/health-node.d.ts

@@ -0,0 +1,20 @@
+import type { ForceGraphNode, HealthNodeConfig } from './types.js';
+export declare function advancePulseTick(): void;
+export declare function getPulseTick(): number;
+/**
+ * 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 declare function createHealthNodeRenderer(config?: HealthNodeConfig): (node: ForceGraphNode, ctx: CanvasRenderingContext2D, globalScale: number) => void;
+/**
+ * Create a `nodePointerAreaPaint` callback for hit detection.
+ * Returns a circle matching the visual node size.
+ */
+export declare function createHealthNodeAreaPaint(config?: HealthNodeConfig): (node: ForceGraphNode, paintColor: string, ctx: CanvasRenderingContext2D, globalScale: number) => void;
+//# sourceMappingURL=health-node.d.ts.map

package/dist/n3-force-graph/health-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"health-node.d.ts","sourceRoot":"","sources":["../../src/n3-force-graph/health-node.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAiBnE,wBAAgB,gBAAgB,IAAI,IAAI,CAAkB;AAC1D,wBAAgB,YAAY,IAAI,MAAM,CAAuB;AAE7D;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,CAAC,EAAE,gBAAgB,GACxB,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAuEpF;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,CAAC,EAAE,gBAAgB,GACxB,CAAC,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAcxG"}

package/dist/n3-force-graph/health-node.js

@@ -0,0 +1,110 @@
+// 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 { healthToColor, healthToGlow } from './types.js';
+import { getCanvasTheme } from '../p0-primitives/canvas-theme';
+const DEFAULTS = {
+    baseRadius: 6,
+    pulseEnabled: true,
+    pulseAmplitude: 0.02,
+};
+// Capture theme at render creation time so color lookups happen once,
+// not on every frame tick.
+const theme = getCanvasTheme();
+// 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() { _pulseTick++; }
+export function getPulseTick() { 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) {
+    const { baseRadius, pulseEnabled, pulseAmplitude } = { ...DEFAULTS, ...config };
+    return (node, ctx, globalScale) => {
+        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 = theme.nodeBorder;
+        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 = theme.nodeText;
+            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 = theme.nodeBorder;
+            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) {
+    const { baseRadius } = { ...DEFAULTS, ...config };
+    return (node, paintColor, ctx) => {
+        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();
+    };
+}

package/dist/n3-force-graph/index.d.ts

@@ -0,0 +1,7 @@
+export type { ForceGraphNode, ForceGraphLink, ForceGraphData, HealthNodeConfig, AnimatedEdgeConfig, TooltipPosition, } from './types.js';
+export { healthToColor, healthToGlow } from './types.js';
+export { default as ForceGraph } from './ForceGraph.svelte';
+export { default as GraphTooltip } from './GraphTooltip.svelte';
+export { createHealthNodeRenderer, createHealthNodeAreaPaint, advancePulseTick, getPulseTick, } from './health-node.js';
+export { createAnimatedEdgeRenderer } from './animated-edge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/n3-force-graph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/n3-force-graph/index.ts"],"names":[],"mappings":"AASA,YAAY,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,gBAAgB,EAChB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC"}

package/{src/n3-force-graph/index.ts → dist/n3-force-graph/index.js}

@@ -6,26 +6,8 @@
 //   health-node.ts     — nodeCanvasObject callback (wt-798)
 //   animated-edge.ts   — linkCanvasObject callback (wt-799)
 //   GraphTooltip.svelte — Floating tooltip (wt-800)
-
-export type {
-  ForceGraphNode,
-  ForceGraphLink,
-  ForceGraphData,
-  HealthNodeConfig,
-  AnimatedEdgeConfig,
-  TooltipPosition,
-} from './types.js';
-
 export { healthToColor, healthToGlow } from './types.js';
-
 export { default as ForceGraph } from './ForceGraph.svelte';
 export { default as GraphTooltip } from './GraphTooltip.svelte';
-
-export {
-  createHealthNodeRenderer,
-  createHealthNodeAreaPaint,
-  advancePulseTick,
-  getPulseTick,
-} from './health-node.js';
-
+export { createHealthNodeRenderer, createHealthNodeAreaPaint, advancePulseTick, getPulseTick, } from './health-node.js';
 export { createAnimatedEdgeRenderer } from './animated-edge.js';