bireactive 0.2.0

package/dist/shapes/rect.js

@@ -0,0 +1,131 @@
+import { Box, derive, Num, reader, Vec } from "../core/index.js";
+import { Shape } from "./shape.js";
+import { tokens } from "./tokens.js";
+const HALF_PI = Math.PI / 2;
+export class Rect extends Shape {
+    x;
+    y;
+    w;
+    h;
+    corner;
+    constructor(x, y, w, h, opts = {}) {
+        const xs = Num.from(x);
+        const ys = Num.from(y);
+        const ws = Num.from(w);
+        const hs = Num.from(h);
+        super(opts.dashed ? "path" : "rect", () => ({ x: xs.value, y: ys.value, w: ws.value, h: hs.value }), opts, {
+            origin: derive(() => ({
+                x: xs.value + ws.value / 2,
+                y: ys.value + hs.value / 2,
+            })),
+        });
+        this.x = xs;
+        this.y = ys;
+        this.w = ws;
+        this.h = hs;
+        this.corner = Num.from(opts.corner ?? tokens.corner);
+        this.stroke(opts, true, {
+            x: xs,
+            y: ys,
+            width: ws,
+            height: hs,
+            rx: this.corner,
+            ry: this.corner,
+        });
+    }
+    boundary(toward) {
+        return Vec.derive(() => {
+            const c = this.center.value;
+            const b = this.box.value;
+            const sc = this.scale.value;
+            const t = toward.value;
+            const halfW = (b.w / 2) * sc.x;
+            const halfH = (b.h / 2) * sc.y;
+            const dx = t.x - c.x;
+            const dy = t.y - c.y;
+            if (dx === 0 && dy === 0)
+                return c;
+            const k = Math.min(dx === 0 ? Number.POSITIVE_INFINITY : halfW / Math.abs(dx), dy === 0 ? Number.POSITIVE_INFINITY : halfH / Math.abs(dy));
+            return { x: c.x + dx * k, y: c.y + dy * k };
+        });
+    }
+    /** Concentric outline — a new unmounted Rect inflated by `by` per
+     *  side; corner radius bumps to keep curves parallel. */
+    outline(by, opts) {
+        const b = reader(by);
+        return new Rect(derive(() => this.x.value - b()), derive(() => this.y.value - b()), derive(() => this.w.value + 2 * b()), derive(() => this.h.value + 2 * b()), { corner: derive(() => this.corner.value + b()), ...opts });
+    }
+    /** 4 sides + 4 corner quarter-arcs (or just sides when `corner === 0`). */
+    segments() {
+        const b = this.box.value;
+        const r = Math.min(this.corner.value, b.w / 2, b.h / 2);
+        const x = b.x;
+        const y = b.y;
+        const w = b.w;
+        const h = b.h;
+        const p = (px, py) => ({ x: px, y: py });
+        if (r <= 0) {
+            return [
+                { type: "line", from: p(x, y), to: p(x + w, y) },
+                { type: "line", from: p(x + w, y), to: p(x + w, y + h) },
+                { type: "line", from: p(x + w, y + h), to: p(x, y + h) },
+                { type: "line", from: p(x, y + h), to: p(x, y) },
+            ];
+        }
+        return [
+            { type: "line", from: p(x + r, y), to: p(x + w - r, y) },
+            {
+                type: "arc",
+                cx: () => x + w - r,
+                cy: () => y + r,
+                r: () => r,
+                a0: () => -HALF_PI,
+                a1: () => 0,
+            },
+            { type: "line", from: p(x + w, y + r), to: p(x + w, y + h - r) },
+            {
+                type: "arc",
+                cx: () => x + w - r,
+                cy: () => y + h - r,
+                r: () => r,
+                a0: () => 0,
+                a1: () => HALF_PI,
+            },
+            { type: "line", from: p(x + w - r, y + h), to: p(x + r, y + h) },
+            {
+                type: "arc",
+                cx: () => x + r,
+                cy: () => y + h - r,
+                r: () => r,
+                a0: () => HALF_PI,
+                a1: () => Math.PI,
+            },
+            { type: "line", from: p(x, y + h - r), to: p(x, y + r) },
+            {
+                type: "arc",
+                cx: () => x + r,
+                cy: () => y + r,
+                r: () => r,
+                a0: () => Math.PI,
+                a1: () => 3 * HALF_PI,
+            },
+        ];
+    }
+}
+export function rect(a, b, c, d, e) {
+    if (a instanceof Box) {
+        return new Rect(derive(() => a.value.x), derive(() => a.value.y), derive(() => a.value.w), derive(() => a.value.h), b);
+    }
+    if (a instanceof Vec && b instanceof Vec) {
+        // Bounding rect of two points (any orientation).
+        return new Rect(derive(() => Math.min(a.x.value, b.x.value)), derive(() => Math.min(a.y.value, b.y.value)), derive(() => Math.abs(b.x.value - a.x.value)), derive(() => Math.abs(b.y.value - a.y.value)), c);
+    }
+    if (a instanceof Vec) {
+        const w = b;
+        const h = c;
+        const ws = Num.from(w);
+        const hs = Num.from(h);
+        return new Rect(derive(() => a.x.value - ws.value / 2), derive(() => a.y.value - hs.value / 2), ws, hs, d);
+    }
+    return new Rect(a, b, c, d, e);
+}

package/dist/shapes/shape.d.ts

@@ -0,0 +1,132 @@
+import { type Animator } from "../animation/index.js";
+import { Box, Cell, type Inner, type Matrix, Num, type Val, Vec, type Writable } from "../core/index.js";
+type VecValue = Inner<Vec>;
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+/** Stroke segment for the dashed renderer; override `segments()`. */
+export type Segment = {
+    type: "line";
+    from: VecValue;
+    to: VecValue;
+} | {
+    type: "arc";
+    cx: () => number;
+    cy: () => number;
+    r: () => number;
+    a0: () => number;
+    a1: () => number;
+};
+/** Shared Shape opts; each prop accepts `Val<T>`. `aside` excludes
+ *  from parent bounds. */
+export interface ShapeOpts {
+    translate?: Val<VecValue>;
+    rotate?: Val<number>;
+    scale?: Val<VecValue>;
+    origin?: Val<VecValue>;
+    opacity?: Val<number>;
+    aside?: boolean;
+}
+/** Stroked-shape opts. `fill: true` → stroke color; string → that
+ *  color; omitted → no fill. */
+export interface CommonOpts extends ShapeOpts {
+    stroke?: Val<string>;
+    strokeWidth?: Val<number>;
+    thin?: boolean;
+    dashed?: boolean;
+    cap?: "butt" | "round" | "square";
+    join?: "miter" | "round" | "bevel";
+    fill?: Val<string> | true;
+}
+/** Wide-form escape hatch for heterogeneous shape collections. */
+export type AnyShape = Shape<any>;
+export type AnimatableKey = "translate" | "rotate" | "scale" | "origin" | "opacity";
+type AnimatableField<K extends AnimatableKey> = K extends "translate" | "scale" | "origin" ? Writable<Vec> : Writable<Num>;
+/** Anything carrying the listed animatable axes. Combine via union. */
+export type Has<K extends AnimatableKey> = {
+    readonly [P in K]: AnimatableField<P>;
+};
+/** Scene-graph node wrapping an SVG `<g>`. `translate`, `rotate`,
+ *  `scale`, `origin`, `opacity` are independent writable cells; the
+ *  composed `localFrame` matrix is a derived view. `center`/`top`/…
+ *  /`at(u,v)` return parent-frame points (writes adjust `translate`);
+ *  `shape.box.center` is local-frame. */
+export declare class Shape<O extends ShapeOpts = ShapeOpts> {
+    #private;
+    readonly el: SVGGElement;
+    readonly intrinsic?: SVGElement;
+    readonly translate: Writable<Vec>;
+    readonly rotate: Writable<Num>;
+    readonly scale: Writable<Vec>;
+    readonly origin: Writable<Vec>;
+    readonly opacity: Writable<Num>;
+    /** Composed local-frame matrix: `T(t) T(p) R(r) S(s) T(-p)`. */
+    readonly localFrame: Cell<Inner<Matrix>>;
+    /** Local-frame box; reach into `.x`, `.center`, `.at(u,v)`, etc. */
+    readonly box: Box;
+    /** Lens-backed parent-frame anchors; writes shift `translate`. */
+    get center(): Writable<Vec>;
+    get top(): Writable<Vec>;
+    get bottom(): Writable<Vec>;
+    get left(): Writable<Vec>;
+    get right(): Writable<Vec>;
+    at(u: number, v: number): Writable<Vec>;
+    readonly aside: boolean;
+    protected disposers: (() => void)[];
+    private readonly _children;
+    /** Back-link set by `add()`; cleared by `dispose()`. Non-reactive. */
+    parent: AnyShape | null;
+    constructor(intrinsicType?: keyof SVGElementTagNameMap, boxFn?: () => Inner<Box>, opts?: O, 
+    /** Subclass per-prop defaults (kept off `O`). */
+    defaults?: ShapeOpts);
+    /** Parent-frame perimeter point toward `target`; tighter shapes override. */
+    boundary(toward: Vec): Vec;
+    /** Stroke segments for the dashed renderer; default = bounding rect. */
+    segments(): Segment[];
+    /** Bind one SVG attribute; static sets once, reactive runs as effect. */
+    attr(name: string, val: Val<string | number>, target?: "intrinsic" | "wrapper"): void;
+    /** Bind several attributes at once — `this.attrs({ cx, cy, r })`. */
+    attrs(map: Record<string, Val<string | number>>, target?: "intrinsic" | "wrapper"): void;
+    /** Wire stroke / fill / dashed for a stroked shape. `nativeAttrs`
+     *  binds the shape's native geometry (e.g. `{cx, cy, r}` for circle);
+     *  it's skipped when `opts.dashed` since the intrinsic is then a
+     *  `<path>` whose `d` is driven by `segments()`. */
+    stroke(opts: CommonOpts, closed: boolean, nativeAttrs?: Record<string, Val<string | number>>): void;
+    /** Register a disposer to run on `dispose()`. */
+    track(dispose: () => void): void;
+    /** Reactive effect torn down with the shape. */
+    effect(fn: () => void): void;
+    on(name: string, handler: (e: Event) => void, opts?: AddEventListenerOptions): () => void;
+    /** Wake on the next `name` event; resume with the event. */
+    until(name: string): Animator<Event>;
+    /** Map client coords into this shape's local frame. */
+    toLocal(evt: {
+        clientX: number;
+        clientY: number;
+    }): VecValue;
+    /** Map client coords into the SVG root's frame; stable under rotation
+     *  (unlike `toLocal`). Returns `(0, 0)` when detached. */
+    toWorld(evt: {
+        clientX: number;
+        clientY: number;
+    }): VecValue;
+    /** Nearest enclosing `<svg>` root, or `null` if this shape isn't mounted
+     *  under one. Used by drag helpers that need world-space cursor coords. */
+    get svgRoot(): SVGSVGElement | null;
+    add<T extends AnyShape>(child: T): T;
+    add<T extends AnyShape[]>(...children: T): T;
+    remove(...toRemove: AnyShape[]): void;
+    clear(): void;
+    dispose(): void;
+}
+/** Writable centroid of shapes' translates. */
+export declare function centroid(...shapes: {
+    translate: Writable<Vec>;
+}[]): Writable<Vec>;
+/** Writable mean rotation. */
+export declare function meanRotation(...shapes: {
+    rotate: Writable<Num>;
+}[]): Writable<Num>;
+/** Writable mean scale. */
+export declare function meanScale(...shapes: {
+    scale: Writable<Vec>;
+}[]): Writable<Vec>;
+export {};

package/dist/shapes/shape.js

@@ -0,0 +1,306 @@
+import { suspend } from "../animation/index.js";
+import { Box, BoxMath, Cell, cell, centroidLens, compose, derive, effect, lazy, meanLens, Num, readNow, toMatrixString, transformBox, transformPoint, Vec, } from "../core/index.js";
+import { dashedPath } from "./dashed.js";
+import { tokens } from "./tokens.js";
+export const SVG_NS = "http://www.w3.org/2000/svg";
+/** Scene-graph node wrapping an SVG `<g>`. `translate`, `rotate`,
+ *  `scale`, `origin`, `opacity` are independent writable cells; the
+ *  composed `localFrame` matrix is a derived view. `center`/`top`/…
+ *  /`at(u,v)` return parent-frame points (writes adjust `translate`);
+ *  `shape.box.center` is local-frame. */
+export class Shape {
+    el;
+    intrinsic;
+    translate;
+    rotate;
+    scale;
+    origin;
+    opacity;
+    /** Composed local-frame matrix: `T(t) T(p) R(r) S(s) T(-p)`. */
+    localFrame;
+    /** Local-frame box; reach into `.x`, `.center`, `.at(u,v)`, etc. */
+    box;
+    /** Lens-backed parent-frame anchors; writes shift `translate`. */
+    get center() {
+        return lazy(this, "center", () => this.#makeAnchor(0.5, 0.5));
+    }
+    get top() {
+        return lazy(this, "top", () => this.#makeAnchor(0.5, 0));
+    }
+    get bottom() {
+        return lazy(this, "bottom", () => this.#makeAnchor(0.5, 1));
+    }
+    get left() {
+        return lazy(this, "left", () => this.#makeAnchor(0, 0.5));
+    }
+    get right() {
+        return lazy(this, "right", () => this.#makeAnchor(1, 0.5));
+    }
+    at(u, v) {
+        return this.#makeAnchor(u, v);
+    }
+    aside;
+    disposers = [];
+    // Cell (not array) so the default group `boxFn` re-unions on add/remove.
+    _children = cell([]);
+    /** Back-link set by `add()`; cleared by `dispose()`. Non-reactive. */
+    parent = null;
+    constructor(intrinsicType, boxFn, opts = {}, 
+    /** Subclass per-prop defaults (kept off `O`). */
+    defaults = {}) {
+        this.el = document.createElementNS(SVG_NS, "g");
+        // CSS `transform` (vs SVG `transform`) hits the GPU composite path.
+        // Pin origin to userspace 0,0 so composed pivot math is correct.
+        this.el.style.transformOrigin = "0 0";
+        if (intrinsicType) {
+            this.intrinsic = document.createElementNS(SVG_NS, intrinsicType);
+            this.el.appendChild(this.intrinsic);
+        }
+        // Each animatable axis held directly via liftAnimatable; localFrame
+        // is the derived matrix below.
+        this.translate = liftAnimatable(opts.translate ?? defaults.translate ?? { x: 0, y: 0 }, Vec, this.disposers);
+        this.rotate = liftAnimatable(opts.rotate ?? defaults.rotate ?? 0, Num, this.disposers);
+        this.scale = liftAnimatable(opts.scale ?? defaults.scale ?? { x: 1, y: 1 }, Vec, this.disposers);
+        this.origin = liftAnimatable(opts.origin ?? defaults.origin ?? { x: 0, y: 0 }, Vec, this.disposers);
+        this.opacity = liftAnimatable(opts.opacity ?? defaults.opacity ?? 1, Num, this.disposers);
+        this.aside = opts.aside ?? defaults.aside ?? false;
+        // Group default: union of non-aside children's boxes through localFrame.
+        const boxSig = Box.derive(boxFn ??
+            (() => {
+                const cs = this._children.value
+                    .filter(c => !c.aside)
+                    .map(c => transformBox(c.localFrame.value, c.box.value));
+                return cs.length ? BoxMath.union(...cs) : { x: 0, y: 0, w: 0, h: 0 };
+            }));
+        this.box = boxSig;
+        // Identity short-circuit avoids reading `origin` on no-transform groups.
+        this.localFrame = derive(() => {
+            const t = this.translate.value;
+            const r = this.rotate.value;
+            const sc = this.scale.value;
+            if (t.x === 0 && t.y === 0 && r === 0 && sc.x === 1 && sc.y === 1) {
+                return compose(t, r, sc, { x: 0, y: 0 });
+            }
+            return compose(t, r, sc, this.origin.value);
+        });
+        this.disposers.push(effect(() => {
+            this.el.style.transform = toMatrixString(this.localFrame.value);
+            this.el.style.opacity = String(this.opacity.value);
+        }));
+    }
+    /** Parent-frame perimeter point toward `target`; tighter shapes override. */
+    boundary(toward) {
+        return Vec.derive(() => BoxMath.edgeFrom(transformBox(this.localFrame.value, this.box.value), toward.value));
+    }
+    #makeAnchor(u, v) {
+        // Reads box/localFrame/translate; writes only translate, shifted by the
+        // world-space delta so the anchor lands at target (anchor-drag = translate).
+        return Vec.lens([this.box, this.localFrame, this.translate], vals => {
+            const [b, m] = vals;
+            return transformPoint(m, { x: b.x + u * b.w, y: b.y + v * b.h });
+        }, (target, vals) => {
+            const [b, m, tNow] = vals;
+            const local = { x: b.x + u * b.w, y: b.y + v * b.h };
+            const currentWorld = transformPoint(m, local);
+            return [
+                undefined,
+                undefined,
+                {
+                    x: tNow.x + (target.x - currentWorld.x),
+                    y: tNow.y + (target.y - currentWorld.y),
+                },
+            ];
+        });
+    }
+    /** Stroke segments for the dashed renderer; default = bounding rect. */
+    segments() {
+        const b = this.box.value;
+        return [
+            { type: "line", from: { x: b.x, y: b.y }, to: { x: b.x + b.w, y: b.y } },
+            { type: "line", from: { x: b.x + b.w, y: b.y }, to: { x: b.x + b.w, y: b.y + b.h } },
+            { type: "line", from: { x: b.x + b.w, y: b.y + b.h }, to: { x: b.x, y: b.y + b.h } },
+            { type: "line", from: { x: b.x, y: b.y + b.h }, to: { x: b.x, y: b.y } },
+        ];
+    }
+    /** Bind one SVG attribute; static sets once, reactive runs as effect. */
+    attr(name, val, target = "intrinsic") {
+        const el = target === "intrinsic" && this.intrinsic ? this.intrinsic : this.el;
+        if (val instanceof Cell || typeof val === "function") {
+            this.disposers.push(effect(() => el.setAttribute(name, String(readNow(val)))));
+        }
+        else {
+            el.setAttribute(name, String(val));
+        }
+    }
+    /** Bind several attributes at once — `this.attrs({ cx, cy, r })`. */
+    attrs(map, target = "intrinsic") {
+        for (const k in map)
+            this.attr(k, map[k], target);
+    }
+    /** Wire stroke / fill / dashed for a stroked shape. `nativeAttrs`
+     *  binds the shape's native geometry (e.g. `{cx, cy, r}` for circle);
+     *  it's skipped when `opts.dashed` since the intrinsic is then a
+     *  `<path>` whose `d` is driven by `segments()`. */
+    stroke(opts, closed, nativeAttrs) {
+        if (opts.dashed) {
+            const cap = opts.cap ?? "round";
+            this.attr("stroke-linecap", cap);
+            // Resolve strokeWidth at construction; dash geometry assumes
+            // a static weight (capExtension is baked into the path string).
+            const w = opts.strokeWidth === undefined
+                ? opts.thin
+                    ? tokens.thinWeight
+                    : tokens.weight
+                : readNow(opts.strokeWidth);
+            const capExt = cap === "round" ? w : 0;
+            this.attr("d", derive(() => dashedPath(this.segments(), { closed, capExtension: capExt })));
+        }
+        else if (nativeAttrs) {
+            this.attrs(nativeAttrs);
+        }
+        this.attr("stroke", opts.stroke ?? tokens.stroke);
+        this.attr("stroke-width", opts.strokeWidth ?? (opts.thin ? tokens.thinWeight : tokens.weight));
+        this.attr("vector-effect", "non-scaling-stroke");
+        if (opts.cap)
+            this.attr("stroke-linecap", opts.cap);
+        if (opts.join)
+            this.attr("stroke-linejoin", opts.join);
+        if (opts.fill === undefined)
+            this.attr("fill", "none");
+        else if (opts.fill === true)
+            this.attr("fill", tokens.stroke);
+        else
+            this.attr("fill", opts.fill);
+    }
+    /** Register a disposer to run on `dispose()`. */
+    track(dispose) {
+        this.disposers.push(dispose);
+    }
+    /** Reactive effect torn down with the shape. */
+    effect(fn) {
+        this.disposers.push(effect(fn));
+    }
+    on(name, handler, opts) {
+        const el = this.el;
+        el.addEventListener(name, handler, opts);
+        const dispose = () => el.removeEventListener(name, handler, opts);
+        this.disposers.push(dispose);
+        return dispose;
+    }
+    /** Wake on the next `name` event; resume with the event. */
+    until(name) {
+        return suspend(wake => {
+            const handler = (e) => wake(e);
+            return this.on(name, handler, { once: true });
+        });
+    }
+    /** Map client coords into this shape's local frame. */
+    toLocal(evt) {
+        const target = (this.intrinsic ?? this.el);
+        const ctm = target.getScreenCTM();
+        if (!ctm)
+            return { x: 0, y: 0 };
+        const inv = ctm.inverse();
+        return {
+            x: evt.clientX * inv.a + evt.clientY * inv.c + inv.e,
+            y: evt.clientX * inv.b + evt.clientY * inv.d + inv.f,
+        };
+    }
+    /** Map client coords into the SVG root's frame; stable under rotation
+     *  (unlike `toLocal`). Returns `(0, 0)` when detached. */
+    toWorld(evt) {
+        const root = this.svgRoot;
+        const ctm = root?.getScreenCTM();
+        if (!ctm)
+            return { x: 0, y: 0 };
+        const inv = ctm.inverse();
+        return {
+            x: evt.clientX * inv.a + evt.clientY * inv.c + inv.e,
+            y: evt.clientX * inv.b + evt.clientY * inv.d + inv.f,
+        };
+    }
+    /** Nearest enclosing `<svg>` root, or `null` if this shape isn't mounted
+     *  under one. Used by drag helpers that need world-space cursor coords. */
+    get svgRoot() {
+        let walker = this.el;
+        while (walker) {
+            if (walker.namespaceURI === SVG_NS && walker.tagName === "svg") {
+                return walker;
+            }
+            walker = walker.parentElement;
+        }
+        return null;
+    }
+    add(...children) {
+        for (const child of children) {
+            this.el.appendChild(child.el);
+            child.parent = this;
+        }
+        if (children.length > 0) {
+            this._children.value = [...this._children.peek(), ...children];
+        }
+        return children.length === 1 ? children[0] : children;
+    }
+    remove(...toRemove) {
+        if (toRemove.length === 0)
+            return;
+        const removeSet = new Set(toRemove);
+        const next = [];
+        for (const c of this._children.peek()) {
+            if (removeSet.has(c))
+                c.dispose();
+            else
+                next.push(c);
+        }
+        if (next.length !== this._children.peek().length) {
+            this._children.value = next;
+        }
+    }
+    clear() {
+        const cs = this._children.peek();
+        if (cs.length === 0)
+            return;
+        cs.forEach(c => c.dispose());
+        this._children.value = [];
+    }
+    dispose() {
+        this._children.peek().forEach(c => c.dispose());
+        this._children.value = [];
+        this.disposers.forEach(d => d());
+        this.disposers = [];
+        this.parent = null;
+        this.el.remove();
+    }
+}
+// Sugar over the N-input aggregate lenses: read the mean, write the delta
+// evenly to all members.
+/** Writable centroid of shapes' translates. */
+export function centroid(...shapes) {
+    return centroidLens(shapes.map(s => s.translate));
+}
+/** Writable mean rotation. */
+export function meanRotation(...shapes) {
+    return meanLens(Num, shapes.map(s => s.rotate));
+}
+/** Writable mean scale. */
+export function meanScale(...shapes) {
+    return meanLens(Vec, shapes.map(s => s.scale));
+}
+/** Lift a `Val<T>` to a `Writable<Cls<T>>` for Shape's animatable surface.
+ *  Writable passes through; literal seeds a cell; signal/thunk drives it via
+ *  a disposer-tracked effect. The library's only effect-driven RO mirror,
+ *  tolerated because the surface must stay writable for tween/drag/write. */
+function liftAnimatable(src, Cls, disposers) {
+    if (src instanceof Cls)
+        return src;
+    const target = new Cls();
+    if (src instanceof Cell || typeof src === "function") {
+        disposers.push(effect(() => {
+            target.value = readNow(src);
+        }));
+    }
+    else {
+        target.value = src;
+    }
+    return target;
+}

package/dist/shapes/text.d.ts

@@ -0,0 +1,24 @@
+interface TextStyle {
+    bold?: boolean;
+    italic?: boolean;
+    muted?: boolean;
+    sub?: boolean;
+    sup?: boolean;
+}
+export type TextPart = string | Text;
+export declare class Text {
+    parts: TextPart[];
+    style: TextStyle;
+    constructor(parts: TextPart[], style?: TextStyle);
+    bold(): Text;
+    italic(): Text;
+    muted(): Text;
+    sub(...parts: TextPart[]): Text;
+    sup(...parts: TextPart[]): Text;
+}
+export type Content = string | Text;
+export declare const t: (...parts: TextPart[]) => Text;
+export declare const renderContent: (c: Content) => string;
+/** Plain-text flatten — used to approximate label widths. */
+export declare function flattenText(c: Content): string;
+export {};

package/dist/shapes/text.js

@@ -0,0 +1,53 @@
+// Chainable rich text — nested styled spans, pure values (no DOM).
+// Rendered to `<tspan>` markup by `label()`.
+import { tokens } from "./tokens.js";
+export class Text {
+    parts;
+    style;
+    constructor(parts, style = {}) {
+        this.parts = parts;
+        this.style = style;
+    }
+    bold() {
+        return new Text(this.parts, { ...this.style, bold: true });
+    }
+    italic() {
+        return new Text(this.parts, { ...this.style, italic: true });
+    }
+    muted() {
+        return new Text(this.parts, { ...this.style, muted: true });
+    }
+    sub(...parts) {
+        return new Text([this, new Text(parts, { sub: true })]);
+    }
+    sup(...parts) {
+        return new Text([this, new Text(parts, { sup: true })]);
+    }
+}
+export const t = (...parts) => new Text(parts);
+const escapeXml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function renderTextNode(node) {
+    if (typeof node === "string")
+        return escapeXml(node);
+    const inner = node.parts.map(renderTextNode).join("");
+    const a = [];
+    if (node.style.bold)
+        a.push('font-weight="700"');
+    if (node.style.italic)
+        a.push('font-style="italic"');
+    if (node.style.muted)
+        a.push(`opacity="${tokens.mutedOpacity}"`);
+    if (node.style.sub)
+        a.push(`baseline-shift="sub" font-size="${tokens.subFontSize}"`);
+    if (node.style.sup)
+        a.push(`baseline-shift="super" font-size="${tokens.subFontSize}"`);
+    return a.length ? `<tspan ${a.join(" ")}>${inner}</tspan>` : inner;
+}
+export const renderContent = (c) => typeof c === "string" ? escapeXml(c) : renderTextNode(c);
+/** Plain-text flatten — used to approximate label widths. */
+export function flattenText(c) {
+    if (typeof c === "string")
+        return c;
+    const walk = (n) => (typeof n === "string" ? n : n.parts.map(walk).join(""));
+    return walk(c);
+}

package/dist/shapes/tokens.d.ts

@@ -0,0 +1,28 @@
+export declare const tokens: {
+    /** CSS var so dark mode flips automatically. */
+    readonly stroke: "var(--text-color)";
+    readonly weight: 2;
+    readonly thinWeight: 1.5;
+    readonly corner: 2;
+    readonly font: "'New CM', monospace";
+    /** Stack of fonts with OpenType MATH tables. */
+    readonly mathFont: "'New CM Math', 'Cambria Math', 'STIXTwoMath-Regular', 'NotoSansMath-Regular', 'New CM', math, serif";
+    readonly fontSize: 14;
+    /** Approximate glyph aspect (SVG can't measure). */
+    readonly charWidth: 0.6;
+    readonly subFontSize: "0.75em";
+    readonly mutedOpacity: 0.5;
+    readonly tex: {
+        readonly size: 26;
+        readonly highlightColor: "rgba(255, 220, 80, 0.45)";
+        readonly highlightDurationMs: 120;
+        readonly highlightCorner: 2;
+    };
+    readonly decoration: {
+        readonly gap: 2;
+        readonly braceHeight: 5;
+        readonly braceGap: 3;
+        readonly crossGap: 1;
+    };
+};
+export type Tokens = typeof tokens;