eidotter 0.38.1 → 0.40.0

package/README.md

@@ -15,7 +15,7 @@
 [![license](https://img.shields.io/badge/license-CC--BY--NC--4.0-ffb000?labelColor=020003)](./LICENSE.md)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-ffb000?labelColor=020003)](https://react.dev/)
 
-**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 40 components across forms, navigation, windowing, timelines, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
+**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 47 components across forms, navigation, windowing, timelines, health displays, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
 
 → **[Storybook](https://cinimody.github.io/eiDotter/)**  ·  **[CHANGELOG](./CHANGELOG.md)**  ·  **[Accessibility](./ACCESSIBILITY.md)**  ·  **[Issues](https://github.com/CinimoDY/eiDotter/issues)**  ·  **[npm](https://www.npmjs.com/package/eidotter)**
 
@@ -111,7 +111,7 @@ for client apps and `'use client'` files.
 
 ## Components
 
-40 components across five families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/).
+47 components across six families — [complete catalog in Storybook](https://cinimody.github.io/eiDotter/).
 
 <details>
 <summary><strong>Windowing &amp; shell</strong> — Terminal, Modal, Lightbox, CommandPrompt, CmdPalette, Header, Footer, Nav, Brand</summary>
@@ -130,6 +130,23 @@ for client apps and `'use client'` files.
 
 </details>
 
+<details>
+<summary><strong>Health &amp; metabolism</strong> — Gauge, Meter, MeterGroup, RangeBar, SeriesBars, DecayStrip, VitalsStrip</summary>
+
+| Component | Purpose |
+|---|---|
+| `Gauge` | Quantised ring with a dominant percent, secondary value, tone, status, provenance tag and overflow marker |
+| `Meter` | Single fill bar (vertical / horizontal) with an optimal tick or range and pattern fills |
+| `MeterGroup` | Row or grid of Meters with an optional shared scale |
+| `RangeBar` | Stacked range bar of ordered segments with legend and target tick (time-in-range style) |
+| `SeriesBars` | Short bar series with a goal line and consumer-supplied threshold tones |
+| `DecayStrip` | On-board decay over time from consumer-supplied samples — now marker, dimmed future, provenance required |
+| `VitalsStrip` | Monitor-style vitals tiles with per-tile tone, status and paired values |
+
+All six are presentational and server-safe; bands, targets and clinical copy are consumer props (no medical defaults), and tone is never the only signal.
+
+</details>
+
 <details>
 <summary><strong>Content surfaces</strong> — Card, Accordion, Alert, Badge, Tag, Notification, Stat, Progress, Skeleton, Separator, Breadcrumb, LegalPage</summary>
 

package/dist/components/Brand/components/Mark.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+export interface MarkArmsConfig {
+    /** Element within which badge targets are discovered (e.g. a ref to <Header>). */
+    scopeRef: React.RefObject<HTMLElement | null>;
+    /** Explicit badge refs — takes precedence over selector discovery. */
+    targetRefs?: React.RefObject<HTMLElement | null>[];
+    /**
+     * Selector for badge discovery inside `scopeRef`. Default
+     * `.eidotter-header__category` — the stable class the Header context badge
+     * row emits (DMNC-1326 contract).
+     */
+    targetSelector?: string;
+    /** Bump when the badge set changes and DOM mutation can't be observed (escape hatch). */
+    refreshKey?: React.Key;
+}
+export interface MarkProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Size in px (or CSS length). Default 48. */
+    size?: number | string;
+    /** Accessible label. Default 'eiDotter'. Empty string → decorative (aria-hidden). */
+    label?: string;
+    /** Enable the border-radius morph loop. Default true. */
+    morph?: boolean;
+    /**
+     * Arm-connector configuration. Omit to render the mark alone.
+     *
+     * Caveats:
+     * - Any `overflow: hidden` / `clip` ancestor between the Mark and the badges
+     *   amputates the arms (paths extend beyond the Mark's own box).
+     * - Pure position changes with no size change anywhere are covered by
+     *   window-resize + the scope ResizeObserver in practice; use `refreshKey` as
+     *   the escape hatch if a layout shift is missed.
+     * - `arms` is for the conventional badge ROW only — it is mutually exclusive
+     *   with the future Header `layout="tentacle"` mode (PLAN-tentacle-menu),
+     *   which draws its own overlay: transforms fire neither ResizeObserver nor a
+     *   childList MutationObserver, so `arms` can never track transformed tips.
+     */
+    arms?: MarkArmsConfig;
+}
+/**
+ * eiDotter Mark — a small organic blob that continuously morphs its silhouette
+ * (a ~6s border-radius loop) with an optional set of SVG arm connectors drawn
+ * from the mark to a variable set of nav badges, measured at runtime via
+ * getBoundingClientRect(). Arms redraw on resize and on badge-set change, never
+ * intercept pointer events, and are aria-hidden.
+ *
+ * The root class `eidotter-mark` is a stable contract — the future tentacle
+ * mode discovers the anchor via `scope.querySelector('.eidotter-mark')`; never
+ * rename it.
+ *
+ * There is NO rAF work in this design, so no `prefersReducedMotion()` call is
+ * needed. Any FUTURE rAF animation (e.g. arm draw-in) MUST gate on
+ * `prefersReducedMotion()` (src/utils/prefersReducedMotion.ts) plus a CSS media
+ * block.
+ */
+export declare const Mark: React.ForwardRefExoticComponent<MarkProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Brand/components/Mark.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { computeArmPaths } from './markGeometry.js';
+/** Stable empty-array reference so the no-arms early return can't loop setState. */
+const EMPTY = [];
+/**
+ * eiDotter Mark — a small organic blob that continuously morphs its silhouette
+ * (a ~6s border-radius loop) with an optional set of SVG arm connectors drawn
+ * from the mark to a variable set of nav badges, measured at runtime via
+ * getBoundingClientRect(). Arms redraw on resize and on badge-set change, never
+ * intercept pointer events, and are aria-hidden.
+ *
+ * The root class `eidotter-mark` is a stable contract — the future tentacle
+ * mode discovers the anchor via `scope.querySelector('.eidotter-mark')`; never
+ * rename it.
+ *
+ * There is NO rAF work in this design, so no `prefersReducedMotion()` call is
+ * needed. Any FUTURE rAF animation (e.g. arm draw-in) MUST gate on
+ * `prefersReducedMotion()` (src/utils/prefersReducedMotion.ts) plus a CSS media
+ * block.
+ */
+export const Mark = forwardRef(({ size = 48, label = 'eiDotter', morph = true, arms, className, style, ...rest }, ref) => {
+    const rootRef = useRef(null);
+    const [paths, setPaths] = useState(EMPTY);
+    const setRefs = useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // useEffect (NOT useLayoutEffect): the scope is typically an ANCESTOR
+    // (e.g. <Header><Mark arms={{ scopeRef: headerRef }} /></Header>). Layout
+    // effects run bottom-up, so an ancestor's ref is still null during a child's
+    // layout effect — arms would never wire. Passive effects run after the whole
+    // commit, when every ref (scope included) is attached. The one-frame-later
+    // arm paint is imperceptible; the blob is already on screen.
+    useEffect(() => {
+        if (!arms) {
+            setPaths(EMPTY);
+            return;
+        }
+        const root = rootRef.current;
+        const scope = arms.scopeRef.current;
+        if (!root)
+            return;
+        let targets = [];
+        const update = () => {
+            const markRect = root.getBoundingClientRect();
+            const next = computeArmPaths(markRect, targets.map((t) => t.getBoundingClientRect()));
+            setPaths((prev) => prev.length === next.length && prev.every((p, i) => p === next[i]) ? prev : next);
+        };
+        const collectTargets = () => arms.targetRefs
+            ? arms.targetRefs.map((r) => r.current).filter((el) => !!el)
+            : scope
+                ? Array.from(scope.querySelectorAll(arms.targetSelector ?? '.eidotter-header__category'))
+                : [];
+        const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : undefined;
+        const wire = () => {
+            ro?.disconnect();
+            targets = collectTargets();
+            ro?.observe(root);
+            if (scope)
+                ro?.observe(scope);
+            targets.forEach((t) => ro?.observe(t));
+            update();
+        };
+        wire();
+        // Badge-set change: RE-QUERY + RE-OBSERVE, never reuse the stale list.
+        const mo = scope && typeof MutationObserver !== 'undefined' ? new MutationObserver(wire) : undefined;
+        if (scope)
+            mo?.observe(scope, { childList: true, subtree: true });
+        window.addEventListener('resize', update);
+        return () => {
+            ro?.disconnect();
+            mo?.disconnect();
+            window.removeEventListener('resize', update);
+        };
+        // Depend on the arms CONFIG fields, never the arms object identity
+        // (consumers inline it → re-wiring every render).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [arms?.scopeRef, arms?.targetSelector, arms?.refreshKey, arms?.targetRefs?.length, arms ? 1 : 0]);
+    return (_jsxs("div", { ref: setRefs, role: label ? 'img' : undefined, "aria-label": label || undefined, "aria-hidden": label ? undefined : true, className: cn('eidotter-mark relative inline-block', className), style: { width: size, height: size, ...style }, ...rest, children: [arms && (_jsx("svg", { className: "eidotter-mark__arms pointer-events-none absolute inset-0 h-full w-full overflow-visible text-dos-text-accent", "aria-hidden": "true", focusable: "false", children: paths.map((d, i) => (_jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: 2 }, i))) })), _jsx("span", { className: cn('eidotter-mark__blob relative block h-full w-full', morph && 'eidotter-mark__blob--morph') })] }));
+});
+Mark.displayName = 'Mark';

package/dist/components/Brand/components/index.d.ts

@@ -4,3 +4,7 @@ export { Wordmark } from './Wordmark.js';
 export type { WordmarkProps } from './Wordmark.js';
 export { BrandLockup } from './BrandLockup.js';
 export type { BrandLockupProps } from './BrandLockup.js';
+export { Mark } from './Mark.js';
+export type { MarkProps, MarkArmsConfig } from './Mark.js';
+export { computeArmPaths } from './markGeometry.js';
+export type { RectLike, ArmPathOptions } from './markGeometry.js';

package/dist/components/Brand/components/index.js

@@ -1,3 +1,5 @@
 export { Logo } from './Logo.js';
 export { Wordmark } from './Wordmark.js';
 export { BrandLockup } from './BrandLockup.js';
+export { Mark } from './Mark.js';
+export { computeArmPaths } from './markGeometry.js';

package/dist/components/Brand/components/markGeometry.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pure geometry for the Mark's SVG arm connectors (DMNC-1325).
+ *
+ * All coordinates are MARK-LOCAL: subtract `markRect.x/y` from every badge
+ * point so the returned paths live in the Mark's own box origin. This makes
+ * the overlay portal-free and scroll-invariant (viewport-relative rects shift
+ * equally for mark and badges), pinned by the translation-invariance test.
+ *
+ * No DOM, no React, no hooks — testable with plain rect objects.
+ */
+export interface RectLike {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ArmPathOptions {
+    /** Perpendicular control-point offset in px. Default 24. */
+    curvature?: number;
+}
+/**
+ * Build one quadratic-bezier arm path per badge, from the Mark centre to the
+ * midpoint of the badge edge facing the mark. Control points alternate sign
+ * for an organic branching feel, clamped so short arms don't balloon.
+ */
+export declare function computeArmPaths(markRect: RectLike, badgeRects: RectLike[], options?: ArmPathOptions): string[];

package/dist/components/Brand/components/markGeometry.js

@@ -0,0 +1,54 @@
+/**
+ * Pure geometry for the Mark's SVG arm connectors (DMNC-1325).
+ *
+ * All coordinates are MARK-LOCAL: subtract `markRect.x/y` from every badge
+ * point so the returned paths live in the Mark's own box origin. This makes
+ * the overlay portal-free and scroll-invariant (viewport-relative rects shift
+ * equally for mark and badges), pinned by the translation-invariance test.
+ *
+ * No DOM, no React, no hooks — testable with plain rect objects.
+ */
+/** Round to 2 decimals so path strings are stable for assertions. */
+const r2 = (n) => Math.round(n * 100) / 100;
+/**
+ * Build one quadratic-bezier arm path per badge, from the Mark centre to the
+ * midpoint of the badge edge facing the mark. Control points alternate sign
+ * for an organic branching feel, clamped so short arms don't balloon.
+ */
+export function computeArmPaths(markRect, badgeRects, options = {}) {
+    const { curvature = 24 } = options;
+    // jsdom / hidden guard — a zero-sized mark can't anchor arms.
+    if (markRect.width === 0 || markRect.height === 0)
+        return [];
+    const badges = badgeRects.filter((b) => !(b.width === 0 && b.height === 0));
+    if (badges.length === 0)
+        return [];
+    // Start anchor: mark centre in local coords (the blob paints over it).
+    const sx = markRect.width / 2;
+    const sy = markRect.height / 2;
+    const paths = [];
+    badges.forEach((badge, i) => {
+        const bx = badge.x - markRect.x;
+        const by = badge.y - markRect.y;
+        // Anchor on the badge edge that faces the mark: a badge to the right of the
+        // mark uses its LEFT edge; a badge to the left uses its RIGHT edge.
+        const ex = bx + badge.width / 2 >= sx ? bx : bx + badge.width;
+        const ey = by + badge.height / 2;
+        const dx = ex - sx;
+        const dy = ey - sy;
+        const dist = Math.hypot(dx, dy);
+        if (dist < 1)
+            return;
+        // Control point = segment midpoint offset along the perpendicular unit
+        // vector. Sign alternates per badge; the dist/3 clamp stops short arms from
+        // ballooning past the curvature default.
+        const sign = i % 2 === 0 ? 1 : -1;
+        const offset = sign * Math.min(curvature, dist / 3);
+        const mx = (sx + ex) / 2;
+        const my = (sy + ey) / 2;
+        const cx = mx + (-dy / dist) * offset;
+        const cy = my + (dx / dist) * offset;
+        paths.push(`M ${r2(sx)} ${r2(sy)} Q ${r2(cx)} ${r2(cy)} ${r2(ex)} ${r2(ey)}`);
+    });
+    return paths;
+}

package/dist/components/Brand/components/markGeometry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Breadcrumb/components/Breadcrumb.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as AriaButton } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
+import { isSafeHref } from '../../../utils/isSafeHref.js';
 const linkClasses = 'eidotter-breadcrumb__link inline-flex items-center gap-1 text-dos-text-accent opacity-70 no-underline';
 /**
  * DOS-styled Breadcrumb navigation component.
@@ -13,11 +14,14 @@ export const Breadcrumb = ({ trail = [], currentLabel, showBackArrow = true, sep
         if (item.onClick) {
             return (_jsx(AriaButton, { className: cn(linkClasses, 'bg-transparent border-0 cursor-pointer font-[inherit] p-0'), onPress: item.onClick, children: linkContent }));
         }
-        if (item.href) {
+        // Guard author-supplied hrefs: unsafe schemes (javascript, data, vbscript, …)
+        // fall through to the non-link <span> branch below rather than rendering an anchor.
+        const safeHref = item.href && isSafeHref(item.href) ? item.href : undefined;
+        if (safeHref) {
             if (LinkComponent) {
-                return (_jsx(LinkComponent, { href: item.href, className: linkClasses, children: linkContent }));
+                return (_jsx(LinkComponent, { href: safeHref, className: linkClasses, children: linkContent }));
             }
-            return (_jsx("a", { href: item.href, className: linkClasses, children: linkContent }));
+            return (_jsx("a", { href: safeHref, className: linkClasses, children: linkContent }));
         }
         return _jsx("span", { className: linkClasses, children: linkContent });
     };

package/dist/components/Connector/components/Connector.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export interface ConnectorTarget {
+    /** The anchor element the ribbon connects to. */
+    ref: React.RefObject<HTMLElement | null>;
+    /**
+     * End colour for the amber→category gradient (any CSS colour). Omit for a
+     * solid-amber ribbon (the blog-spine treatment).
+     */
+    color?: string;
+}
+export interface ConnectorProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    /** The hub/source element the ribbons radiate from (e.g. the Mark). */
+    sourceRef: React.RefObject<HTMLElement | null>;
+    /** Targets to connect to. */
+    targets: ConnectorTarget[];
+    /** Ribbon weight. Default 'delicate'. */
+    weight?: 'delicate' | 'medium';
+    /** Idle sway. Default true; forced off under prefers-reduced-motion. */
+    sway?: boolean;
+    /** Bump to force a re-measure when layout shifts without a resize/mutation. */
+    refreshKey?: React.Key;
+}
+/**
+ * Connector — organic tapered SVG ribbons from a source node (the Mark) to N
+ * anchors, re-flowing as they move (DMNC-1388). Each ribbon is a filled tapered
+ * `<path>` (CSS strokes can't taper): amber at the yolk base → the target's
+ * category colour near the attach (solid amber when no colour). Aims at each
+ * target's centre but STOPS at the border — touching the edge, never inside.
+ *
+ * The overlay is purely decorative (`aria-hidden`, `focusable="false"`,
+ * `pointer-events: none`) — navigation lives in the real DOM links underneath.
+ * Render it inside a `position: relative` container that spans the source +
+ * targets; the SVG fills it (`absolute inset-0`) and its own box is the
+ * coordinate origin, so everything is scroll-invariant.
+ *
+ * Paths mutate imperatively (per frame during sway); React only owns the
+ * structure (one `<path>` + gradient per target). The amber base is
+ * `currentColor` (themeable via `text-dos-text-accent`); the sway loop is
+ * compositor-friendly and disabled under `prefers-reduced-motion`.
+ */
+export declare const Connector: React.ForwardRefExoticComponent<ConnectorProps & React.RefAttributes<SVGSVGElement>>;

package/dist/components/Connector/components/Connector.js

@@ -0,0 +1,165 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { prefersReducedMotion } from '../../../utils/prefersReducedMotion.js';
+import { attachPoint, ribbonPath, CONNECTOR_WEIGHTS } from './connectorGeometry.js';
+const SWAY_SPEED = 0.0011;
+const SWAY_AMPLITUDE = 4;
+/**
+ * Connector — organic tapered SVG ribbons from a source node (the Mark) to N
+ * anchors, re-flowing as they move (DMNC-1388). Each ribbon is a filled tapered
+ * `<path>` (CSS strokes can't taper): amber at the yolk base → the target's
+ * category colour near the attach (solid amber when no colour). Aims at each
+ * target's centre but STOPS at the border — touching the edge, never inside.
+ *
+ * The overlay is purely decorative (`aria-hidden`, `focusable="false"`,
+ * `pointer-events: none`) — navigation lives in the real DOM links underneath.
+ * Render it inside a `position: relative` container that spans the source +
+ * targets; the SVG fills it (`absolute inset-0`) and its own box is the
+ * coordinate origin, so everything is scroll-invariant.
+ *
+ * Paths mutate imperatively (per frame during sway); React only owns the
+ * structure (one `<path>` + gradient per target). The amber base is
+ * `currentColor` (themeable via `text-dos-text-accent`); the sway loop is
+ * compositor-friendly and disabled under `prefers-reduced-motion`.
+ */
+export const Connector = forwardRef(({ sourceRef, targets, weight = 'delicate', sway = true, refreshKey, className, ...rest }, ref) => {
+    const uid = useId().replace(/[:]/g, '');
+    const svgRef = useRef(null);
+    const pathRefs = useRef([]);
+    const gradRefs = useRef([]);
+    const rafRef = useRef(null);
+    // Read the live targets/weight in draw so a prop change never leaves a stale
+    // closure (targets objects are typically inlined by consumers).
+    const targetsRef = useRef(targets);
+    targetsRef.current = targets;
+    const weightRef = useRef(weight);
+    weightRef.current = weight;
+    const setSvgRef = useCallback((node) => {
+        svgRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const gradientId = (i) => `eidotter-connector-${uid}-${i}`;
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg)
+            return;
+        const draw = (swayT) => {
+            const svgRect = svg.getBoundingClientRect();
+            const src = sourceRef.current;
+            if (!src)
+                return;
+            const sr = src.getBoundingClientRect();
+            const source = {
+                x: sr.left - svgRect.left + sr.width / 2,
+                y: sr.top - svgRect.top + sr.height / 2,
+            };
+            const w = CONNECTOR_WEIGHTS[weightRef.current] ?? CONNECTOR_WEIGHTS.delicate;
+            const swaying = sway && !prefersReducedMotion();
+            targetsRef.current.forEach((t, i) => {
+                const el = t.ref.current;
+                const path = pathRefs.current[i];
+                if (!path)
+                    return;
+                if (!el) {
+                    path.setAttribute('d', '');
+                    return;
+                }
+                const r = el.getBoundingClientRect();
+                if (r.width === 0 && r.height === 0) {
+                    path.setAttribute('d', '');
+                    return;
+                }
+                const rect = { x: r.left - svgRect.left, y: r.top - svgRect.top, width: r.width, height: r.height };
+                const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+                const attach = attachPoint(center, source, rect);
+                const sign = i % 2 === 0 ? 1 : -1;
+                const swayAmt = swaying ? Math.sin(swayT * SWAY_SPEED + i * 1.7) * SWAY_AMPLITUDE : 0;
+                path.setAttribute('d', ribbonPath(source, attach, w, { sign, sway: swayAmt }));
+                const grad = gradRefs.current[i];
+                if (grad) {
+                    grad.setAttribute('x1', String(source.x));
+                    grad.setAttribute('y1', String(source.y));
+                    grad.setAttribute('x2', String(attach.x));
+                    grad.setAttribute('y2', String(attach.y));
+                }
+            });
+        };
+        let running = false;
+        const stop = () => {
+            running = false;
+            if (rafRef.current != null && typeof cancelAnimationFrame !== 'undefined') {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+        const frame = (ts) => {
+            draw(ts);
+            if (running && typeof requestAnimationFrame !== 'undefined') {
+                rafRef.current = requestAnimationFrame(frame);
+            }
+        };
+        const start = () => {
+            if (sway && !prefersReducedMotion() && typeof requestAnimationFrame !== 'undefined') {
+                if (!running) {
+                    running = true;
+                    rafRef.current = requestAnimationFrame(frame);
+                }
+            }
+            else {
+                draw(0);
+            }
+        };
+        const remeasure = () => {
+            // Static re-measure (resize / mutation). The sway loop, when active,
+            // already redraws every frame off live rects.
+            if (!running)
+                draw(0);
+        };
+        const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(remeasure) : undefined;
+        const observeTargets = () => {
+            ro?.disconnect();
+            ro?.observe(svg);
+            if (sourceRef.current)
+                ro?.observe(sourceRef.current);
+            targetsRef.current.forEach((t) => t.ref.current && ro?.observe(t.ref.current));
+        };
+        observeTargets();
+        // Catch position shifts (siblings reflowing, badges reordering) AND target
+        // element swaps that keep the same count: re-observe the CURRENT targets
+        // (mirrors Mark's re-wire) so a resize of a swapped element is still caught,
+        // then redraw. Only childList/subtree is watched — the draw loop's
+        // attribute writes (`d`, gradient coords) aren't observed, so this can't loop.
+        const container = svg.parentElement;
+        const mo = container && typeof MutationObserver !== 'undefined'
+            ? new MutationObserver(() => {
+                observeTargets();
+                remeasure();
+            })
+            : undefined;
+        if (container)
+            mo?.observe(container, { childList: true, subtree: true });
+        window.addEventListener('resize', remeasure);
+        start();
+        return () => {
+            stop();
+            ro?.disconnect();
+            mo?.disconnect();
+            window.removeEventListener('resize', remeasure);
+        };
+        // Re-wire on target-count / weight / sway / refreshKey changes. Colour
+        // changes flow through render (gradient stops) + the live targetsRef;
+        // target element swaps at the same count are re-observed by the MO above
+        // (or bump refreshKey for a full re-wire).
+    }, [sourceRef, targets.length, weight, sway, refreshKey]);
+    return (_jsxs("svg", { ref: setSvgRef, className: cn('eidotter-connector pointer-events-none absolute inset-0 h-full w-full overflow-visible text-dos-text-accent', className), "aria-hidden": "true", focusable: "false", ...rest, children: [_jsx("defs", { children: targets.map((t, i) => (_jsxs("linearGradient", { id: gradientId(i), gradientUnits: "userSpaceOnUse", ref: (node) => {
+                        gradRefs.current[i] = node;
+                    }, children: [_jsx("stop", { offset: "0%", stopColor: "currentColor" }), _jsx("stop", { offset: "78%", stopColor: t.color ?? 'currentColor' })] }, i))) }), targets.map((t, i) => (_jsx("path", { d: "", fill: `url(#${gradientId(i)})`, ref: (node) => {
+                    pathRefs.current[i] = node;
+                } }, i)))] }));
+});
+Connector.displayName = 'Connector';

package/dist/components/Connector/components/connectorGeometry.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Pure geometry for the Connector's tapered SVG ribbons (DMNC-1388).
+ *
+ * A ribbon is a filled, closed `<path>` sampled along a cubic bezier from a
+ * source point to an attach point, offset by a width profile. The taper is
+ * deliberately SUBTLE (locked 2026-07-13): near a straight thin thread, only a
+ * whisper thicker where it leaves the yolk. No DOM, no React — testable with
+ * literal points.
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface RibbonWeight {
+    /** Half-width where the ribbon leaves the yolk (thickest). */
+    base: number;
+    /** Half-width through the middle (thinnest). */
+    mid: number;
+    /** Half-width swelling back into the attach point. */
+    tip: number;
+    /** Perpendicular control-point offset for the organic bend. */
+    curvature: number;
+}
+/**
+ * Locked weights (2026-07-13 shape proof). `delicate` is the default — a thin
+ * product-chrome thread; `medium` reads a touch bolder on large surfaces.
+ */
+export declare const CONNECTOR_WEIGHTS: Record<'delicate' | 'medium', RibbonWeight>;
+/**
+ * The point on the target rect border along the ray from the rect centre toward
+ * the source — where the ribbon must STOP (touching the edge, never inside).
+ */
+export declare function attachPoint(center: Point, source: Point, rect: Rect): Point;
+export interface RibbonOptions {
+    /** Bend direction for the organic branch. Default 1. */
+    sign?: number;
+    /** Idle-sway perpendicular offset in px, added to the control points. Default 0. */
+    sway?: number;
+}
+/**
+ * Build a closed tapered-ribbon path from `source` to `attach`. Returns an SVG
+ * path `d` string (empty when the endpoints coincide).
+ */
+export declare function ribbonPath(source: Point, attach: Point, weight: RibbonWeight, options?: RibbonOptions): string;