bireactive 0.2.0

package/dist/code/code.js

@@ -0,0 +1,361 @@
+// CodeShape — a monospace code substrate.
+//
+// A `Part` is a single-line span, absolutely positioned with reactive
+// `position` / `opacity` / `rotation` and an optional `key`. A
+// `CodeShape` is a flat list of parts at `(col·charW, row·lineH)` — no
+// line containers, no flow layout; monospace makes layout pure
+// multiplication. Animation is just writes to part signals.
+//
+// Substrate ops: `cut` (split a part at offsets), `uncut` (merge
+// contiguous same-row parts), `group(key)` (parts sharing a key — a
+// multi-line region).
+//
+// Syntax colour: CSS Custom Highlights over Ranges in part text nodes.
+// `paint()` tokenises each row and routes typed tokens to the
+// containing part — independent of cut structure.
+import { cell, derive, effect, num, readNow, vec, } from "../core/index.js";
+import { Shape } from "../shapes/index.js";
+import { morph } from "./morph.js";
+import { tokenize } from "./tokenize.js";
+const DEFAULT_FONT = "ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace";
+const partCss = "position:absolute;left:0;top:0;white-space:pre;will-change:transform";
+/** A single-line span placed absolutely; `position` / `opacity` /
+ *  `rotation` are animatable signals. */
+export class Part {
+    el;
+    /** Current text. Use `setText` to update (instant). */
+    text;
+    /** Top-left in user units. */
+    position;
+    /** [0..1]. */
+    opacity;
+    /** Radians around the part's centre. */
+    rotation;
+    /** Optional identity tag; shared keys form a `c.group(key)`. */
+    key;
+    #disposers = [];
+    constructor(text, x, y, key) {
+        this.text = text;
+        this.key = key;
+        this.position = vec(x, y);
+        this.opacity = num(1);
+        this.rotation = num(0);
+        this.el = document.createElement("span");
+        this.el.style.cssText = partCss;
+        this.el.textContent = text;
+        this.#disposers.push(effect(() => {
+            const p = this.position.value;
+            const r = this.rotation.value;
+            this.el.style.transform =
+                r === 0
+                    ? `translate(${p.x}px, ${p.y}px)`
+                    : `translate(${p.x}px, ${p.y}px) rotate(${r}rad)`;
+        }), effect(() => {
+            this.el.style.opacity = String(this.opacity.value);
+        }));
+    }
+    /** Instant text update (text itself doesn't tween — animate around it). */
+    setText(t) {
+        if (this.text === t)
+            return;
+        this.text = t;
+        this.el.textContent = t;
+    }
+    dispose() {
+        for (const d of this.#disposers)
+            d();
+        this.#disposers.length = 0;
+        this.el.remove();
+    }
+}
+/** Measure monospace metrics for `(family, size)`. One-off per shape. */
+function measureFont(size, family) {
+    const div = document.createElement("div");
+    div.style.cssText =
+        `position:absolute;visibility:hidden;left:-9999px;top:0;` +
+            `font-family:${family};font-size:${size}px;line-height:1.4;white-space:pre`;
+    div.textContent = "M";
+    document.body.appendChild(div);
+    const w = div.offsetWidth;
+    const h = div.offsetHeight;
+    document.body.removeChild(div);
+    return { w, h };
+}
+/** A Shape rendering monospace source code as a list of `Part`s. */
+export class CodeShape extends Shape {
+    source;
+    width;
+    height;
+    language;
+    /** Host wrapper (`position: relative`) for the absolute parts. */
+    wrapper;
+    /** Flat parts list; morph re-sorts by (row, col) on completion. */
+    parts = [];
+    /** Monospace char width and line height in CSS pixels. */
+    charW;
+    lineH;
+    /** When true, the auto-rebuild effect bails — morph owns the parts. */
+    #inMorph = false;
+    /** Syntax Ranges we own; cleared each `paint`. Other CSS.highlights
+     *  buckets (user highlights) survive repaints. */
+    #syntaxRanges = [];
+    constructor(initial, opts = {}) {
+        const fontSize = opts.size ?? 14;
+        const fontFamily = opts.font ?? DEFAULT_FONT;
+        const language = opts.language ?? "typescript";
+        const { w: charW, h: lineH } = measureFont(fontSize, fontFamily);
+        const initialStr = readNow(initial);
+        const lines = initialStr.split("\n");
+        const initW = lines.reduce((a, l) => Math.max(a, l.length), 0) * charW;
+        const initH = lines.length * lineH;
+        const w = cell(initW);
+        const h = cell(initH);
+        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;
+        this.language = language;
+        this.source = cell(initialStr);
+        this.charW = charW;
+        this.lineH = lineH;
+        const fo = this.intrinsic;
+        fo.setAttribute("x", "0");
+        fo.setAttribute("y", "0");
+        fo.setAttribute("overflow", "visible");
+        fo.style.overflow = "visible";
+        this.attrs({ width: w, height: h });
+        this.wrapper = document.createElement("div");
+        this.wrapper.style.cssText = [
+            "position:relative",
+            `font-family:${fontFamily}`,
+            `font-size:${fontSize}px`,
+            `line-height:${lineH}px`,
+            "padding:0",
+            "margin:0",
+            "color:var(--text-color)",
+        ].join(";");
+        fo.appendChild(this.wrapper);
+        this.#render(initialStr);
+        this.disposers.push(effect(() => {
+            const src = this.source.value;
+            if (this.#inMorph)
+                return;
+            this.#render(src);
+        }), () => this.#clearSyntaxRanges(), () => {
+            for (const p of this.parts)
+                p.dispose();
+        });
+    }
+    /** Full rebuild: one part per source line at (0, row·lineH). Runs on
+     *  mount and external `source` writes; morph bypasses via `#inMorph`. */
+    #render(src) {
+        for (const p of this.parts)
+            p.dispose();
+        this.parts.length = 0;
+        const lines = src.split("\n");
+        for (let r = 0; r < lines.length; r++) {
+            const part = new Part(lines[r], 0, r * this.lineH);
+            this.wrapper.appendChild(part.el);
+            this.parts.push(part);
+        }
+        this.#syncSize();
+        this.paint();
+    }
+    /** Reflect the parts' extents into `width` / `height` (absolute children
+     *  don't size their parent; these drive the foreignObject attrs). */
+    #syncSize() {
+        let maxW = 0;
+        let maxH = 0;
+        for (const p of this.parts) {
+            const pos = p.position.peek();
+            const right = pos.x + p.text.length * this.charW;
+            const bottom = pos.y + this.lineH;
+            if (right > maxW)
+                maxW = right;
+            if (bottom > maxH)
+                maxH = bottom;
+        }
+        if (maxW !== this.width.peek())
+            this.width.value = maxW;
+        if (maxH !== this.height.peek())
+            this.height.value = maxH;
+    }
+    /** Paint syntax highlights: tokenise each row's joined text, route
+     *  each typed token to a Range in its containing part. Re-entrant
+     *  (clears prior syntax Ranges; leaves other buckets untouched). */
+    paint() {
+        this.#clearSyntaxRanges();
+        if (typeof CSS === "undefined" || !("highlights" in CSS))
+            return;
+        const byRow = new Map();
+        for (const p of this.parts) {
+            const r = Math.round(p.position.peek().y / this.lineH);
+            const arr = byRow.get(r);
+            if (arr)
+                arr.push(p);
+            else
+                byRow.set(r, [p]);
+        }
+        for (const parts of byRow.values()) {
+            parts.sort((a, b) => a.position.peek().x - b.position.peek().x);
+            const fullText = parts.map(p => p.text).join("");
+            const tokens = tokenize(fullText, this.language);
+            const starts = [];
+            let off = 0;
+            for (const p of parts) {
+                starts.push(off);
+                off += p.text.length;
+            }
+            let pos = 0;
+            for (const tok of tokens) {
+                const len = tok.text.length;
+                if (tok.type !== "" && len > 0 && !tok.text.includes("\n")) {
+                    for (let i = 0; i < parts.length; i++) {
+                        const start = starts[i];
+                        const end = start + parts[i].text.length;
+                        if (pos >= start && pos + len <= end) {
+                            const tn = parts[i].el.firstChild;
+                            if (tn && tn.nodeType === Node.TEXT_NODE) {
+                                try {
+                                    const r = new Range();
+                                    r.setStart(tn, pos - start);
+                                    r.setEnd(tn, pos - start + len);
+                                    let h = CSS.highlights.get(tok.type);
+                                    if (h === undefined) {
+                                        h = new Highlight();
+                                        CSS.highlights.set(tok.type, h);
+                                    }
+                                    h.add(r);
+                                    this.#syntaxRanges.push(r);
+                                }
+                                catch {
+                                    // Skip on bad offsets.
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+                pos += len;
+            }
+        }
+    }
+    #clearSyntaxRanges() {
+        if (this.#syntaxRanges.length === 0)
+            return;
+        if (typeof CSS !== "undefined" && "highlights" in CSS) {
+            for (const r of this.#syntaxRanges) {
+                for (const [, h] of CSS.highlights) {
+                    h.delete(r);
+                }
+            }
+        }
+        this.#syntaxRanges.length = 0;
+    }
+    /** Split `part` at char offsets into N+1 same-row sub-parts (0 and
+     *  `text.length` implicit). Sub-parts inherit `part.key`; returned
+     *  left-to-right. */
+    cut(part, offsets) {
+        const idx = this.parts.indexOf(part);
+        if (idx < 0)
+            throw new Error("cut: part not in this CodeShape");
+        const sorted = [...new Set(offsets)]
+            .sort((a, b) => a - b)
+            .filter(o => o > 0 && o < part.text.length);
+        if (sorted.length === 0)
+            return [part];
+        const bounds = [0, ...sorted, part.text.length];
+        const pos = part.position.peek();
+        const subs = [];
+        for (let i = 0; i < bounds.length - 1; i++) {
+            const start = bounds[i];
+            const end = bounds[i + 1];
+            const sub = new Part(part.text.slice(start, end), pos.x + start * this.charW, pos.y, part.key);
+            this.wrapper.appendChild(sub.el);
+            subs.push(sub);
+        }
+        this.parts.splice(idx, 1, ...subs);
+        part.dispose();
+        this.paint();
+        return subs;
+    }
+    /** Merge same-row contiguous `parts` into one (inherits the leftmost's
+     *  key). Single part is a no-op; empty throws. */
+    uncut(parts) {
+        if (parts.length === 0)
+            throw new Error("uncut: no parts");
+        if (parts.length === 1)
+            return parts[0];
+        const sorted = [...parts].sort((a, b) => a.position.peek().x - b.position.peek().x);
+        const text = sorted.map(p => p.text).join("");
+        const pos = sorted[0].position.peek();
+        const merged = new Part(text, pos.x, pos.y, sorted[0].key);
+        this.wrapper.appendChild(merged.el);
+        const firstIdx = this.parts.indexOf(sorted[0]);
+        for (const p of sorted) {
+            const i = this.parts.indexOf(p);
+            if (i >= 0)
+                this.parts.splice(i, 1);
+            p.dispose();
+        }
+        this.parts.splice(firstIdx >= 0 ? firstIdx : this.parts.length, 0, merged);
+        this.paint();
+        return merged;
+    }
+    /** All parts sharing `key`. Returns a fresh array. */
+    group(key) {
+        return this.parts.filter(p => p.key === key);
+    }
+    /** Animate from current source to `target`. See `morph.ts`. */
+    morphTo(target, dur, ease) {
+        return morph(this, target, dur, ease);
+    }
+    /** @internal Morph's on-completion commit: set `source` (rebuild
+     *  suppressed), re-sort parts row/col, refresh size + highlights. */
+    _finalize(src) {
+        this.#inMorph = true;
+        try {
+            this.source.value = src;
+        }
+        finally {
+            this.#inMorph = false;
+        }
+        this.parts.sort((a, b) => {
+            const pa = a.position.peek();
+            const pb = b.position.peek();
+            return pa.y - pb.y || pa.x - pb.x;
+        });
+        this.#syncSize();
+        this.paint();
+    }
+}
+/** Factory: `code("source", { language: "typescript", size: 14 })`. */
+export const code = (source, opts) => new CodeShape(source, opts);
+/** Prism token-class colours via CSS Custom Highlights. Drop into a
+ *  `Diagram.styles` block so the rules reach the shadow root. */
+export const codeStyles = `
+  ::highlight(keyword),
+  ::highlight(rule) { color: var(--prettylights-keyword, #cf222e); }
+  ::highlight(string),
+  ::highlight(attr-value) { color: var(--prettylights-string, #0a3069); }
+  ::highlight(comment),
+  ::highlight(prolog),
+  ::highlight(doctype),
+  ::highlight(cdata) { color: var(--prettylights-comment, #59636e); }
+  ::highlight(function),
+  ::highlight(class-name),
+  ::highlight(entity),
+  ::highlight(selector) { color: var(--prettylights-entity, #6639ba); }
+  ::highlight(tag),
+  ::highlight(boolean),
+  ::highlight(property),
+  ::highlight(symbol) { color: var(--prettylights-entity-tag, #0550ae); }
+  ::highlight(constant),
+  ::highlight(attr-name),
+  ::highlight(builtin),
+  ::highlight(char),
+  ::highlight(operator) { color: var(--prettylights-constant, #0550ae); }
+  ::highlight(variable) { color: var(--prettylights-variable, #953800); }
+  ::highlight(regex) { color: var(--prettylights-string-regexp, #116329); }
+`;

package/dist/code/index.d.ts

@@ -0,0 +1,2 @@
+export { type CodeOpts, CodeShape, code, codeStyles, Part } from "./code.js";
+export { type Token, tokenize } from "./tokenize.js";

package/dist/code/index.js

@@ -0,0 +1,9 @@
+// bireactive/code — monospace code substrate with reactive `Part` atoms.
+//
+//   code(src, opts)        → CodeShape (flat parts driven by `source`).
+//   c.cut / c.uncut        → split / merge same-row parts.
+//   c.group(key)           → parts sharing a key (multi-line region).
+//   c.morphTo(target, dur) → per-line cross-fade + position tween.
+//   codeStyles             → ::highlight() rules for `Diagram.styles`.
+export { CodeShape, code, codeStyles, Part } from "./code.js";
+export { tokenize } from "./tokenize.js";

package/dist/code/morph.d.ts

@@ -0,0 +1,5 @@
+import { type Animator, type Easing } from "../animation/index.js";
+import { type CodeShape } from "./code.js";
+/** Animate `c` to `target`. Cancel-safe: `finally` disposes transient
+ *  parts and commits via `_finalize` (which re-sorts row/col). */
+export declare function morph(c: CodeShape, target: string, dur: number, ease?: Easing): Animator<void>;

package/dist/code/morph.js

@@ -0,0 +1,194 @@
+// morph — animate a CodeShape from its current source to a target.
+//
+// Parts are just absolutely-positioned signal-bearing spans, so morph
+// reduces to: pair old/new lines (LCS over trimmed text), then tween
+// the right signals per pair. No DOM rebuild, no FLIP, no drive loop —
+// every animation is a `signal.to(...)` and the morph is `yield [...]`.
+//
+// Per-line outcomes:
+//   Kept(same text)    — old part stays; position.y tweens if it moved.
+//   Kept(text changed) — old part fades out at its old row; a fresh
+//                        part fades in at the new row (whole-line cross-fade).
+//   Lost               — old part fades out, disposed on completion.
+//   Gained             — fresh part fades in at its new row.
+import { easeInOut } from "../animation/index.js";
+import { vec } from "../core/index.js";
+import { Part } from "./code.js";
+/** LCS over `trimStart`-equal lines; indent-only changes still match
+ *  (the shift rides through as a text diff on the Kept line). */
+function lcsLines(oldLines, newLines) {
+    const eq = (a, b) => a.trimStart() === b.trimStart();
+    const m = oldLines.length;
+    const n = newLines.length;
+    const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = m - 1; i >= 0; i--) {
+        for (let j = n - 1; j >= 0; j--) {
+            dp[i][j] = eq(oldLines[i], newLines[j])
+                ? dp[i + 1][j + 1] + 1
+                : Math.max(dp[i + 1][j], dp[i][j + 1]);
+        }
+    }
+    const ops = [];
+    let i = 0, j = 0;
+    while (i < m && j < n) {
+        if (eq(oldLines[i], newLines[j])) {
+            ops.push({ kind: "match", oldIdx: i, newIdx: j });
+            i++;
+            j++;
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            ops.push({ kind: "del", oldIdx: i });
+            i++;
+        }
+        else {
+            ops.push({ kind: "ins", newIdx: j });
+            j++;
+        }
+    }
+    while (i < m)
+        ops.push({ kind: "del", oldIdx: i++ });
+    while (j < n)
+        ops.push({ kind: "ins", newIdx: j++ });
+    return ops;
+}
+/** Classify raw LCS ops into Kept/Lost/Gained. Pairs cross-position
+ *  same-trimmed lines first, then adjacent — prefers "line moved" over
+ *  "line modified", keeping lines anchored across moves. */
+function classify(raw, oldLines, newLines) {
+    // Pass 1 — cross-position pairing (del/ins with equal trimStart).
+    const delByText = new Map();
+    for (let k = 0; k < raw.length; k++) {
+        const op = raw[k];
+        if (op.kind !== "del")
+            continue;
+        const t = oldLines[op.oldIdx].trimStart();
+        if (t === "")
+            continue;
+        const bucket = delByText.get(t);
+        if (bucket)
+            bucket.push(k);
+        else
+            delByText.set(t, [k]);
+    }
+    const paired = new Set();
+    const insertPair = new Map();
+    for (let k = 0; k < raw.length; k++) {
+        const op = raw[k];
+        if (op.kind !== "ins")
+            continue;
+        const t = newLines[op.newIdx].trimStart();
+        if (t === "")
+            continue;
+        const bucket = delByText.get(t);
+        if (!bucket)
+            continue;
+        while (bucket.length > 0 && paired.has(bucket[0]))
+            bucket.shift();
+        if (bucket.length === 0)
+            continue;
+        const delIdx = bucket.shift();
+        paired.add(delIdx);
+        insertPair.set(k, delIdx);
+    }
+    // Pass 2 — adjacent (del immediately followed by ins) for the rest.
+    for (let k = 0; k < raw.length; k++) {
+        const op = raw[k];
+        if (op.kind !== "ins")
+            continue;
+        if (insertPair.has(k))
+            continue;
+        if (k > 0 && raw[k - 1].kind === "del" && !paired.has(k - 1)) {
+            paired.add(k - 1);
+            insertPair.set(k, k - 1);
+        }
+    }
+    // Emit.
+    const out = [];
+    for (let k = 0; k < raw.length; k++) {
+        const op = raw[k];
+        if (op.kind === "match") {
+            out.push({ kind: "kept", oldIdx: op.oldIdx, newIdx: op.newIdx });
+        }
+        else if (op.kind === "del") {
+            if (paired.has(k))
+                continue;
+            out.push({ kind: "lost", oldIdx: op.oldIdx });
+        }
+        else {
+            const delIdx = insertPair.get(k);
+            if (delIdx !== undefined) {
+                const delOp = raw[delIdx];
+                out.push({ kind: "kept", oldIdx: delOp.oldIdx, newIdx: op.newIdx });
+            }
+            else {
+                out.push({ kind: "gained", newIdx: op.newIdx });
+            }
+        }
+    }
+    return out;
+}
+/** Animate `c` to `target`. Cancel-safe: `finally` disposes transient
+ *  parts and commits via `_finalize` (which re-sorts row/col). */
+export function* morph(c, target, dur, ease = easeInOut) {
+    const oldSrc = c.source.peek();
+    if (oldSrc === target)
+        return;
+    const oldLines = oldSrc.split("\n");
+    const newLines = target.split("\n");
+    const ops = classify(lcsLines(oldLines, newLines), oldLines, newLines);
+    // Parts indexed by oldIdx; assumed in row/col order (render and
+    // `_finalize` both maintain this), one part per old line.
+    const oldParts = c.parts.slice();
+    const tweens = [];
+    const transient = [];
+    for (const op of ops) {
+        if (op.kind === "kept") {
+            const oldPart = oldParts[op.oldIdx];
+            const newText = newLines[op.newIdx];
+            const newY = op.newIdx * c.lineH;
+            if (oldPart.text === newText) {
+                // Same content — only animate if the row changed.
+                if (oldPart.position.peek().y !== newY) {
+                    tweens.push(oldPart.position.to(vec(0, newY).value, dur, ease));
+                }
+            }
+            else {
+                // Content changed — whole-line cross-fade: old part out at its
+                // old row, fresh part in at the new row.
+                const fresh = new Part(newText, 0, newY);
+                fresh.opacity.value = 0;
+                c.wrapper.appendChild(fresh.el);
+                c.parts.push(fresh);
+                tweens.push(oldPart.opacity.to(0, dur, ease));
+                tweens.push(fresh.opacity.to(1, dur, ease));
+                transient.push(oldPart);
+            }
+        }
+        else if (op.kind === "lost") {
+            const oldPart = oldParts[op.oldIdx];
+            tweens.push(oldPart.opacity.to(0, dur, ease));
+            transient.push(oldPart);
+        }
+        else {
+            const newText = newLines[op.newIdx];
+            const newY = op.newIdx * c.lineH;
+            const fresh = new Part(newText, 0, newY);
+            fresh.opacity.value = 0;
+            c.wrapper.appendChild(fresh.el);
+            c.parts.push(fresh);
+            tweens.push(fresh.opacity.to(1, dur, ease));
+        }
+    }
+    try {
+        yield tweens;
+    }
+    finally {
+        for (const p of transient) {
+            const i = c.parts.indexOf(p);
+            if (i >= 0)
+                c.parts.splice(i, 1);
+            p.dispose();
+        }
+        c._finalize(target);
+    }
+}

package/dist/code/tokenize.d.ts

@@ -0,0 +1,8 @@
+export interface Token {
+    /** Prism token type ("keyword", "string", …). `""` for plain text. */
+    type: string;
+    text: string;
+}
+/** Tokenize `source`; concatenating `tok.text` recovers the input.
+ *  Unknown language → one untyped token over the whole source. */
+export declare function tokenize(source: string, language?: string): Token[];

package/dist/code/tokenize.js

@@ -0,0 +1,51 @@
+// Prism wrapper — tokenize source into a flat `(type, text)` list that
+// concatenates back to the input verbatim. `type` is Prism's
+// classification or `""` for plain text. Languages lazy-load into a
+// shared singleton Prism instance.
+import { Prism } from "prism-esm";
+import { loader as CssLoader } from "prism-esm/components/prism-css.js";
+import { loader as JsLoader } from "prism-esm/components/prism-javascript.js";
+import { loader as TsLoader } from "prism-esm/components/prism-typescript.js";
+const prism = new Prism();
+JsLoader(prism);
+TsLoader(prism);
+CssLoader(prism);
+/** Flatten Prism's token tree; inner strings inherit the parent's type
+ *  so a nested literal's quotes colour like its body. */
+function flatten(t, inheritedType = "") {
+    if (typeof t === "string") {
+        return t === "" ? [] : [{ type: inheritedType, text: t }];
+    }
+    const type = t.type ?? inheritedType;
+    if (typeof t.content === "string") {
+        return t.content === "" ? [] : [{ type, text: t.content }];
+    }
+    return t.content.flatMap(c => flatten(c, type));
+}
+/** Split untyped runs on word/whitespace boundaries. Prism glues
+ *  whitespace onto untyped identifiers, which would trap newlines inside
+ *  a rename's diff span; splitting lets the diff align them correctly. */
+function splitUntyped(text) {
+    return text.match(/\s+|\S+/g) ?? [];
+}
+/** Tokenize `source`; concatenating `tok.text` recovers the input.
+ *  Unknown language → one untyped token over the whole source. */
+export function tokenize(source, language = "typescript") {
+    const lang = prism.languages[language];
+    if (!lang)
+        return source === "" ? [] : [{ type: "", text: source }];
+    const raw = prism.tokenize(source, lang);
+    const flat = raw.flatMap(t => flatten(t));
+    // Split untyped tokens on whitespace boundaries; typed tokens stay intact.
+    const out = [];
+    for (const tok of flat) {
+        if (tok.type !== "") {
+            out.push(tok);
+            continue;
+        }
+        for (const piece of splitUntyped(tok.text)) {
+            out.push({ type: "", text: piece });
+        }
+    }
+    return out;
+}