bireactive 0.2.0

package/dist/tex/tex.js

@@ -0,0 +1,244 @@
+// LaTeX → MathML shape, rendered via Temml.
+import { Box, cell, derive } from "../core/index.js";
+import { Shape, tokens } from "../shapes/index.js";
+import temml from "temml";
+import { Part, PartMarker } from "./parts.js";
+/** Class on the rendered `<mrow>`, to re-find Parts in cloned subtrees. */
+const partClass = (name) => `bireactive-part-${name}`;
+/** Build LaTeX source + PartMarker list. Reads `strings.raw` so authors
+ *  write single-backslash LaTeX without JS eating `\f`, `\t`, etc. */
+const compileTemplate = (strings, values) => {
+    const chunks = strings.raw ?? strings;
+    let source = "";
+    const markers = [];
+    const seen = new Set();
+    for (let i = 0; i < chunks.length; i++) {
+        source += chunks[i];
+        if (i >= values.length)
+            continue;
+        const v = values[i];
+        if (v instanceof PartMarker) {
+            if (seen.has(v.name)) {
+                throw new Error(`tex: duplicate part name "${v.name}" — names must be unique within a single template`);
+            }
+            seen.add(v.name);
+            markers.push(v);
+            source += `\\class{${partClass(v.name)}}{${v.content.peek()}}`;
+        }
+        else {
+            source += v;
+        }
+    }
+    return { source, markers };
+};
+/** Render LaTeX → MathML via Temml (trust on, lenient errors). */
+export const renderToMathML = (source, opts = {}) => {
+    try {
+        return temml.renderToString(source, {
+            trust: true,
+            displayMode: opts.displayMode ?? false,
+            strict: false,
+            throwOnError: false,
+        });
+    }
+    catch (e) {
+        return `<span style="color:#c33;font:13px monospace">${e.message}</span>`;
+    }
+};
+/** Wrapper CSS — identical for the measurement div and the live
+ *  foreignObject child, so measured and live offsets agree. */
+const wrapperCss = (fontSize, fontFamily) => [
+    `font-family:${fontFamily}`,
+    `font-size:${fontSize}px`,
+    `color:${tokens.stroke}`,
+    "line-height:1",
+    "white-space:nowrap",
+    "padding:0",
+    "margin:0",
+    "display:inline-block",
+].join(";");
+/** Font styles must live on `<math>` itself: MathML doesn't reliably
+ *  inherit `font-family`, and surd/vinculum thickness comes from the
+ *  font's OpenType MATH table. Never set `display` (MathML Core only
+ *  honors `inline math` / `block math`). */
+const styleMathRoot = (mathEl, fontSize, fontFamily) => {
+    mathEl.style.fontFamily = fontFamily;
+    mathEl.style.fontSize = `${fontSize}px`;
+    mathEl.style.color = tokens.stroke;
+    mathEl.style.lineHeight = "1";
+    mathEl.style.fontStyle = "normal";
+    mathEl.style.fontWeight = "normal";
+};
+/** Force a part's layout to be context-independent so a matched mrow
+ *  renders the same regardless of ambient context — morph rides it with
+ *  one scale factor, no pop. Overrides the `compact` style `<msqrt>` /
+ *  `<mfrac>` cascade; inherited, so propagates to descendants. */
+const stabilizePart = (el) => {
+    el.style.setProperty("math-shift", "normal");
+    el.style.setProperty("math-style", "normal");
+    el.style.borderRadius = `${tokens.tex.highlightCorner}px`;
+    el.style.transition = `background-color ${tokens.tex.highlightDurationMs}ms ease-out`;
+};
+const measureMathML = (mathml, fontSize, fontFamily) => {
+    const div = document.createElement("div");
+    div.style.cssText = `position:absolute;left:-99999px;top:0;visibility:hidden;${wrapperCss(fontSize, fontFamily)}`;
+    div.innerHTML = mathml;
+    const mathEl = div.querySelector("math");
+    if (mathEl)
+        styleMathRoot(mathEl, fontSize, fontFamily);
+    div.querySelectorAll("[class*='bireactive-part-']").forEach(stabilizePart);
+    document.body.appendChild(div);
+    try {
+        const root = mathEl ?? div.firstElementChild ?? div;
+        const rootRect = root.getBoundingClientRect();
+        // Anchor part rects to the wrapper, not `<math>`: `<mfrac>` can
+        // overflow its line-box upward, throwing off math-relative bounds.
+        const wrapperRect = div.getBoundingClientRect();
+        const rects = new Map();
+        div.querySelectorAll("[class*='bireactive-part-']").forEach(el => {
+            const cls = Array.from(el.classList).find(c => c.startsWith("bireactive-part-"));
+            if (!cls)
+                return;
+            const r = el.getBoundingClientRect();
+            rects.set(cls, {
+                x: r.left - wrapperRect.left,
+                y: r.top - wrapperRect.top,
+                w: r.width,
+                h: r.height,
+            });
+        });
+        return { width: rootRect.width, height: rootRect.height, rects };
+    }
+    finally {
+        document.body.removeChild(div);
+    }
+};
+/** A LaTeX-rendered shape with addressable Parts. See `tex` (factory)
+ *  and `parts.ts` (Part / PartMarker). */
+export class TexShape extends Shape {
+    parts;
+    /** Width in local-frame user units (the rendered MathML bounding rect). */
+    width;
+    /** Height in local-frame user units. */
+    height;
+    constructor(strings, values, opts = {}) {
+        const fontSize = opts.size ?? tokens.tex.size;
+        const fontFamily = opts.font ?? tokens.mathFont;
+        const highlightColor = opts.highlightColor ?? tokens.tex.highlightColor;
+        const displayMode = opts.display === "block";
+        const { source, markers } = compileTemplate(strings, values);
+        const initialMathml = renderToMathML(source, { displayMode });
+        const measured = measureMathML(initialMathml, fontSize, fontFamily);
+        const w = cell(measured.width);
+        const h = cell(measured.height);
+        super("foreignObject", () => ({ x: 0, y: 0, w: w.value, h: h.value }), opts, {
+            origin: derive(() => ({ x: w.value / 2, y: h.value / 2 })),
+        });
+        this.width = w;
+        this.height = h;
+        const fo = this.intrinsic;
+        fo.setAttribute("x", "0");
+        fo.setAttribute("y", "0");
+        fo.style.overflow = "visible";
+        this.attrs({ width: w, height: h });
+        // Inline-block wrapper, same CSS as the measurement div.
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = wrapperCss(fontSize, fontFamily);
+        fo.appendChild(wrapper);
+        // Parts built up front; `mountInto` populates the wrapper and binds
+        // each. `boxWriters` holds the writable bounds for re-measure.
+        const list = [];
+        const boxWriters = new Map();
+        for (const m of markers) {
+            const cls = partClass(m.name);
+            const boxSig = new Box(measured.rects.get(cls) ?? { x: 0, y: 0, w: 0, h: 0 });
+            boxWriters.set(cls, boxSig);
+            list.push(new Part(m.name, m.content, boxSig, m, this));
+        }
+        this.parts = buildPartList(list);
+        /** Render into the wrapper, push fresh bounds, rebind parts.
+         *  `bounds` lets the initial mount skip re-measuring. */
+        const mountInto = (mathml, bounds) => {
+            wrapper.innerHTML = mathml;
+            const m = wrapper.querySelector("math");
+            if (m)
+                styleMathRoot(m, fontSize, fontFamily);
+            wrapper.querySelectorAll("[class*='bireactive-part-']").forEach(stabilizePart);
+            const fresh = bounds ?? measureMathML(mathml, fontSize, fontFamily);
+            if (fresh.width !== w.peek())
+                w.value = fresh.width;
+            if (fresh.height !== h.peek())
+                h.value = fresh.height;
+            for (const p of list) {
+                const cls = partClass(p.name);
+                const r = fresh.rects.get(cls);
+                const sig = boxWriters.get(cls);
+                if (r && sig) {
+                    const cur = sig.peek();
+                    if (r.x !== cur.x || r.y !== cur.y || r.w !== cur.w || r.h !== cur.h)
+                        sig.value = r;
+                }
+                p.bind(wrapper.querySelector(`.${cls}`), highlightColor);
+            }
+        };
+        mountInto(initialMathml, measured);
+        let firstRun = true;
+        this.effect(() => {
+            for (const m of markers)
+                void m.content.value; // track
+            if (firstRun) {
+                firstRun = false;
+                return;
+            }
+            const next = compileTemplate(strings, values);
+            mountInto(renderToMathML(next.source, { displayMode }));
+        });
+        // Re-measure once webfonts load: synchronous measurement uses
+        // fallback metrics until the CDN font arrives, else first morph pops.
+        const fonts = document.fonts;
+        if (fonts?.ready) {
+            void fonts.ready.then(() => {
+                const cur = compileTemplate(strings, values);
+                const fresh = measureMathML(renderToMathML(cur.source, { displayMode }), fontSize, fontFamily);
+                if (fresh.width !== w.peek())
+                    w.value = fresh.width;
+                if (fresh.height !== h.peek())
+                    h.value = fresh.height;
+                for (const [cls, sig] of boxWriters) {
+                    const r = fresh.rects.get(cls);
+                    if (!r)
+                        continue;
+                    const c = sig.peek();
+                    if (r.x !== c.x || r.y !== c.y || r.w !== c.w || r.h !== c.h)
+                        sig.value = r;
+                }
+            });
+        }
+        this.track(() => {
+            for (const p of list)
+                p.dispose();
+        });
+    }
+    /** Sugar: `eq.highlight("a")` → `eq.parts.a.highlighted.value = true`. */
+    highlight(name, on = true) {
+        const p = this.parts[name];
+        if (p)
+            p.highlighted.value = on;
+    }
+}
+/** Positional array with named keys: template-order iteration, name-indexable. */
+const buildPartList = (list) => {
+    const out = list.slice();
+    for (const p of list)
+        out[p.name] = p;
+    return out;
+};
+const isTemplateStrings = (v) => Array.isArray(v) && Object.prototype.hasOwnProperty.call(v, "raw");
+export function tex(...args) {
+    if (isTemplateStrings(args[0])) {
+        const [strings, ...values] = args;
+        return new TexShape(strings, values);
+    }
+    const opts = typeof args[0] === "number" ? { size: args[0] } : args[0];
+    return (strings, ...values) => new TexShape(strings, values, opts);
+}

package/dist/web/attr.d.ts

@@ -0,0 +1,16 @@
+declare function str(): PropertyDecorator;
+declare function str(default_: string): PropertyDecorator;
+declare function num(): PropertyDecorator;
+declare function num(default_: number): PropertyDecorator;
+declare function bool(): PropertyDecorator;
+declare function bool(default_: boolean): PropertyDecorator;
+export declare const attr: {
+    str: typeof str;
+    num: typeof num;
+    bool: typeof bool;
+};
+/** Collect `_attributes` up the prototype chain (subclasses see parent decls). */
+export declare function observedAttributesOf(ctor: Function): string[];
+/** Push a coerced HTML-attribute value into its signal (lazy-creating it). */
+export declare function syncAttrSignal(instance: HTMLElement, name: string, raw: string | null): void;
+export {};

package/dist/web/attr.js

@@ -0,0 +1,98 @@
+// HTML attributes mapped to reactive signals on a custom element. The
+// decorated field IS the signal.
+//
+//   @attr.str()      declare width: Cell<string | undefined>;
+//   @attr.str("a")   declare mode:  Cell<string>;          // default "a"
+//   @attr.num(4)     declare cells: Cell<number>;          // default 4
+//   @attr.bool()     declare flag:  Cell<boolean>;         // default false
+import { cell } from "../core/index.js";
+const SIGNALS = Symbol("attrSignals");
+function coerce(raw, type, default_) {
+    if (type === "boolean") {
+        if (raw !== null)
+            return true;
+        return default_ === undefined ? false : default_;
+    }
+    if (type === "number") {
+        return raw === null ? default_ : Number(raw);
+    }
+    return raw === null ? default_ : raw;
+}
+function bagOf(instance) {
+    const carrier = instance;
+    let bag = carrier[SIGNALS];
+    if (!bag) {
+        bag = new Map();
+        carrier[SIGNALS] = bag;
+    }
+    return bag;
+}
+function register(target, propertyKey, type, default_) {
+    const ctor = target.constructor;
+    if (!ctor._attributes)
+        ctor._attributes = [];
+    if (!ctor._attributes.includes(propertyKey))
+        ctor._attributes.push(propertyKey);
+    if (!ctor._attrTypes)
+        ctor._attrTypes = {};
+    ctor._attrTypes[propertyKey] = type;
+    if (default_ !== undefined) {
+        if (!ctor._attrDefaults)
+            ctor._attrDefaults = {};
+        ctor._attrDefaults[propertyKey] = default_;
+    }
+    Object.defineProperty(target, propertyKey, {
+        get() {
+            const bag = bagOf(this);
+            let sig = bag.get(propertyKey);
+            if (!sig) {
+                sig = cell(coerce(this.getAttribute(propertyKey), type, default_));
+                bag.set(propertyKey, sig);
+            }
+            return sig;
+        },
+        enumerable: true,
+        configurable: true,
+    });
+}
+function str(default_) {
+    return (target, key) => register(target, key, "string", default_);
+}
+function num(default_) {
+    return (target, key) => register(target, key, "number", default_);
+}
+function bool(default_) {
+    return (target, key) => register(target, key, "boolean", default_);
+}
+export const attr = { str, num, bool };
+/** Collect `_attributes` up the prototype chain (subclasses see parent decls). */
+export function observedAttributesOf(ctor) {
+    const acc = [];
+    let c = ctor;
+    while (c && c !== HTMLElement && c !== Object) {
+        if (Object.prototype.hasOwnProperty.call(c, "_attributes") && c._attributes) {
+            for (const a of c._attributes)
+                if (!acc.includes(a))
+                    acc.push(a);
+        }
+        c = Object.getPrototypeOf(c);
+    }
+    return acc;
+}
+/** Push a coerced HTML-attribute value into its signal (lazy-creating it). */
+export function syncAttrSignal(instance, name, raw) {
+    const ctor = instance.constructor;
+    const type = ctor._attrTypes?.[name];
+    if (!type)
+        return;
+    const default_ = ctor._attrDefaults?.[name];
+    const bag = bagOf(instance);
+    const next = coerce(raw, type, default_);
+    const sig = bag.get(name);
+    if (sig) {
+        sig.value = next;
+    }
+    else {
+        bag.set(name, cell(next));
+    }
+}

package/dist/web/diagram.d.ts

@@ -0,0 +1,49 @@
+import { Anim } from "../animation/index.js";
+import { Box, type Val } from "../core/index.js";
+import { type Mount, Shape } from "../shapes/index.js";
+import type { Marker } from "../tex/index.js";
+export declare const css: (template: {
+    raw: readonly string[] | ArrayLike<string>;
+}, ...substitutions: any[]) => string;
+export type Padding = number | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export declare class Diagram extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    protected shadow: ShadowRoot;
+    protected anim: Anim;
+    protected svg: SVGSVGElement;
+    /** Scene-graph root. All user-mounted shapes are children of this. */
+    protected root: Shape;
+    /** Callable mount handle for `scene(s)`; `s(shape)` adds to root. */
+    protected s: Mount;
+    /** Register a marker for this instance; call in `scene()` so
+     *  `<… for="this-id">` can resolve it. */
+    registerMarker(id: string, m: Marker): void;
+    /** Look up a marker registered on this instance. */
+    getMarker(id: string): Marker | undefined;
+    private static styleSheets;
+    static styles: string;
+    constructor();
+    /** Build the scene graph. Runs once per connect; override in subclasses. */
+    protected scene(_s: Mount): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Set the viewBox to `(0, 0, w, h)` (reactive inputs). First call
+     *  wins; returns a reactive `Box` for layout. */
+    view(w: Val<number>, h: Val<number>): Box;
+    /** Fit viewBox to the root's bounds + padding (auto-called after
+     *  `scene()` if `view()` wasn't). */
+    fit(padding?: Padding): Box;
+    static get tagName(): string;
+    static define(): void;
+    private setViewBox;
+    private mountSvg;
+    /** Combine base + subclass styles. Cached per subclass. */
+    private initializeStyles;
+}

package/dist/web/diagram.js

@@ -0,0 +1,260 @@
+// Custom-element scaffold. Subclasses override `scene(s)`; signals drive
+// updates. Owns the SVG, the viewBox (`view`/`fit`), and host CSS sizing
+// (`--d-w`/`--d-h`).
+//
+// Visibility-gated rAF: the per-instance Anim ticks only while near the
+// viewport (IntersectionObserver). Cell-driven updates keep working —
+// only the animator clock pauses and resumes, so `anim.clock` tracks
+// on-screen time. Opt out via `always-animate`; eager-attach when
+// IntersectionObserver is absent (SSR/tests).
+var _a;
+import { Anim } from "../animation/index.js";
+import { Box, effect, Num } from "../core/index.js";
+import { ensureArrowMarker, mount, Shape, SVG_NS } from "../shapes/index.js";
+import { observedAttributesOf, syncAttrSignal } from "./attr.js";
+import { attachRaf } from "./raf.js";
+export const css = String.raw;
+function resolvePadding(p) {
+    if (p === undefined || p === 0)
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    if (typeof p === "number")
+        return { top: p, right: p, bottom: p, left: p };
+    return {
+        top: p.top ?? 0,
+        right: p.right ?? 0,
+        bottom: p.bottom ?? 0,
+        left: p.left ?? 0,
+    };
+}
+export class Diagram extends HTMLElement {
+    static get observedAttributes() {
+        return observedAttributesOf(this);
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal)
+            return;
+        syncAttrSignal(this, name, newVal);
+    }
+    shadow;
+    anim = new Anim();
+    #detachRaf = null;
+    #io = null;
+    svg;
+    /** Scene-graph root. All user-mounted shapes are children of this. */
+    root;
+    /** Callable mount handle for `scene(s)`; `s(shape)` adds to root. */
+    s;
+    // Per-instance marker registry; recleared each connectedCallback so
+    // `<md-tex for="id">` always sees fresh markers.
+    #markers = new Map();
+    /** Register a marker for this instance; call in `scene()` so
+     *  `<… for="this-id">` can resolve it. */
+    registerMarker(id, m) {
+        this.#markers.set(id, m);
+    }
+    /** Look up a marker registered on this instance. */
+    getMarker(id) {
+        return this.#markers.get(id);
+    }
+    // `#viewSet` flips on the first `view()`/`fit()`; `connectedCallback`
+    // auto-fits if still false.
+    #viewSet = false;
+    #viewSig = signal0Box();
+    #viewBox = Box.derive(() => this.#viewSig.value);
+    static styleSheets = new Map();
+    static styles = css `
+    :host {
+      display: block;
+      margin: 1rem auto;
+      width: 100%;
+      max-width: calc(var(--d-w, 600) * 1px);
+    }
+    svg {
+      display: block;
+      width: 100%;
+      height: auto;
+      overflow: visible;
+    }
+    ::slotted(details.diagram-source) {
+      margin-top: 0.5rem;
+      font-size: 0.85em;
+      /* Wide enough for code on desktop, but never wider than the
+         column — a fixed 90ch overflowed narrow viewports and gave the
+         page a horizontal scroll. */
+      min-width: min(90ch, 100%);
+      max-width: 100%;
+      box-sizing: border-box;
+      margin: 0 auto;
+      color: var(--text-secondary, #888);
+    }
+  `;
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.initializeStyles();
+    }
+    /** Build the scene graph. Runs once per connect; override in subclasses. */
+    scene(_s) { }
+    connectedCallback() {
+        if (!this.svg)
+            this.mountSvg();
+        this.#detachRaf?.();
+        this.#io?.disconnect();
+        this.#io = null;
+        this.anim.stop();
+        this.root?.dispose();
+        this.#viewSet = false;
+        this.#markers.clear();
+        this.root = new Shape();
+        this.svg.replaceChildren(this.root.el);
+        ensureArrowMarker(this.svg);
+        this.s = mount(this.root);
+        this.scene(this.s);
+        if (!this.#viewSet)
+            this.fit();
+        this.#ensureSourcePanel();
+        this.#startRaf();
+    }
+    disconnectedCallback() {
+        this.#detachRaf?.();
+        this.#detachRaf = null;
+        this.#io?.disconnect();
+        this.#io = null;
+        this.anim.stop();
+        this.root?.dispose();
+    }
+    // Gate rAF on viewport intersection; `rootMargin: "200px 0px"` warms
+    // the loop before visible so the first frame isn't a cold start.
+    #startRaf() {
+        if (this.hasAttribute("always-animate") || typeof IntersectionObserver === "undefined") {
+            this.#detachRaf = attachRaf(this.anim);
+            return;
+        }
+        this.#io = new IntersectionObserver(entries => {
+            const inView = entries[entries.length - 1].isIntersecting;
+            if (inView && !this.#detachRaf)
+                this.#detachRaf = attachRaf(this.anim);
+            else if (!inView && this.#detachRaf) {
+                this.#detachRaf();
+                this.#detachRaf = null;
+            }
+        }, { rootMargin: "200px 0px" });
+        this.#io.observe(this);
+    }
+    /** Set the viewBox to `(0, 0, w, h)` (reactive inputs). First call
+     *  wins; returns a reactive `Box` for layout. */
+    view(w, h) {
+        if (this.#viewSet)
+            return this.#viewBox;
+        const ws = Num.from(w);
+        const hs = Num.from(h);
+        effect(() => this.setViewBox(0, 0, ws.value, hs.value));
+        this.#viewSet = true;
+        return this.#viewBox;
+    }
+    /** Fit viewBox to the root's bounds + padding (auto-called after
+     *  `scene()` if `view()` wasn't). */
+    fit(padding) {
+        if (this.#viewSet)
+            return this.#viewBox;
+        const p = resolvePadding(padding);
+        const b = this.root.box.value;
+        this.setViewBox(b.x - p.left, b.y - p.top, b.w + p.left + p.right, b.h + p.top + p.bottom);
+        this.#viewSet = true;
+        return this.#viewBox;
+    }
+    static get tagName() {
+        return this.name
+            .replace(/([A-Z])/g, "-$1")
+            .toLowerCase()
+            .slice(1);
+    }
+    static define() {
+        customElements.define(this.tagName, this);
+    }
+    setViewBox(x, y, w, h) {
+        this.#viewSig.value = { x, y, w, h };
+        this.svg.setAttribute("viewBox", `${x} ${y} ${w} ${h}`);
+        this.svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+        this.svg.setAttribute("width", String(w));
+        this.svg.setAttribute("height", String(h));
+        // `:host` reads `--d-w` for max-width; override via `style="--d-w: N"`.
+        this.style.setProperty("--d-w", String(w));
+        this.style.setProperty("--d-h", String(h));
+    }
+    mountSvg() {
+        this.svg = document.createElementNS(SVG_NS, "svg");
+        this.shadow.appendChild(this.svg);
+        // Named slot projects the source panel without picking up incidental
+        // light-DOM children that use `textContent` as data, not display.
+        const slot = document.createElement("slot");
+        slot.name = "source";
+        this.shadow.appendChild(slot);
+    }
+    /** Append a `<details>` with the subclass's `scene()` source, projected
+     *  through `slot[name=source]`. No-op for the base class / `[no-source]`
+     *  / already-added. */
+    #ensureSourcePanel() {
+        if (this.hasAttribute("no-source"))
+            return;
+        if (this.querySelector(":scope > details[slot='source']"))
+            return;
+        const ctor = this.constructor;
+        if (ctor.prototype.scene === _a.prototype.scene)
+            return;
+        const src = dedent(this.scene.toString());
+        const details = document.createElement("details");
+        details.slot = "source";
+        details.className = "diagram-source";
+        const summary = document.createElement("summary");
+        summary.textContent = "source";
+        const code = document.createElement("md-syntax");
+        code.setAttribute("lang", "ts");
+        code.textContent = src;
+        details.append(summary, code);
+        // `md-syntax.paint()` reads `innerText`, empty while hidden in a
+        // closed `<details>` in some UAs; repaint on first open.
+        let painted = false;
+        details.addEventListener("toggle", () => {
+            if (details.open && !painted) {
+                code.update?.();
+                painted = true;
+            }
+        });
+        this.appendChild(details);
+    }
+    /** Combine base + subclass styles. Cached per subclass. */
+    initializeStyles() {
+        const ctor = this.constructor;
+        const cacheKey = ctor.name;
+        if (!_a.styleSheets.has(cacheKey)) {
+            const baseStyles = _a.styles ?? "";
+            const ownStyles = ctor === _a ? "" : (ctor.styles ?? "");
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(`${baseStyles}\n${ownStyles}`);
+            _a.styleSheets.set(cacheKey, sheet);
+        }
+        this.shadow.adoptedStyleSheets = [_a.styleSheets.get(cacheKey)];
+    }
+}
+_a = Diagram;
+// A fresh writable Box signal seeded with the zero box.
+function signal0Box() {
+    return new Box({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+    });
+}
+// Strip the common leading indent that `Function.prototype.toString()`
+// leaves on a class method's body (line 0 has none).
+function dedent(s) {
+    const lines = s.split("\n");
+    const indents = lines
+        .slice(1)
+        .filter(l => l.trim().length > 0)
+        .map(l => (l.match(/^ */) ?? [""])[0].length);
+    const min = indents.length ? Math.min(...indents) : 0;
+    return lines.map((l, i) => (i === 0 ? l : l.slice(min))).join("\n");
+}

package/dist/web/index.d.ts

@@ -0,0 +1,6 @@
+export { attr, observedAttributesOf, syncAttrSignal } from "./attr.js";
+export { css, Diagram, type Padding } from "./diagram.js";
+export { MdMarker } from "./md-marker.js";
+export { MdTex } from "./md-tex.js";
+export { attachRaf } from "./raf.js";
+export { viewport } from "./viewport.js";

package/dist/web/index.js

@@ -0,0 +1,6 @@
+export { attr, observedAttributesOf, syncAttrSignal } from "./attr.js";
+export { css, Diagram } from "./diagram.js";
+export { MdMarker } from "./md-marker.js";
+export { MdTex } from "./md-tex.js";
+export { attachRaf } from "./raf.js";
+export { viewport } from "./viewport.js";

package/dist/web/md-marker.d.ts

@@ -0,0 +1,6 @@
+export declare class MdMarker extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static define(): void;
+}