bireactive 0.2.0

package/dist/shapes/tokens.js

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

package/dist/shapes/transitions.d.ts

@@ -0,0 +1,23 @@
+import { type Easing, type Yieldable } from "../animation/index.js";
+import { type Inner, type Val, type Vec } from "../core/index.js";
+import type { Has } from "./shape.js";
+/** Fade opacity 0 → 1. */
+export declare const fadeIn: (s: Has<"opacity">, sec?: Val<number>, ease?: Easing) => Yieldable;
+/** Fade opacity 1 → 0. */
+export declare const fadeOut: (s: Has<"opacity">, sec?: Val<number>, ease?: Easing) => Yieldable;
+/** Slide up from `dy` below + fade in. */
+export declare function fadeUp(s: Has<"translate" | "opacity">, sec?: number, dy?: number): Yieldable;
+/** Slide up + fade out. Mirror of `fadeUp`. */
+export declare const fadeUpOut: (s: Has<"translate" | "opacity">, sec?: number, dy?: number) => Yieldable;
+/** Slide in from `dir` + fade in. */
+export declare function slideIn(s: Has<"translate" | "opacity">, dir?: Inner<Vec>, sec?: number, dist?: number): Yieldable;
+/** Slide out toward a side + fade out. */
+export declare const slideOut: (s: Has<"translate" | "opacity">, dir?: Inner<Vec>, sec?: number, dist?: number) => Yieldable;
+/** Scale 0 → 1 + fade in. */
+export declare function scaleIn(s: Has<"scale" | "opacity">, sec?: number): Yieldable;
+/** Scale 1 → 0 + fade out. */
+export declare const zoomOut: (s: Has<"scale" | "opacity">, sec?: number) => Yieldable;
+/** Overshoot-and-settle scale + fade in. */
+export declare function bounceIn(s: Has<"scale" | "opacity">, sec?: number): Yieldable;
+/** Spin in: rotate -π → 0 + scale 0.5 → 1 + fade in. */
+export declare function spinIn(s: Has<"rotate" | "scale" | "opacity">, sec?: number): Yieldable;

package/dist/shapes/transitions.js

@@ -0,0 +1,62 @@
+// Bounded transitions. Initial pose is written synchronously; the return value
+// is the time-varying part only — a `Tween` (single-axis) or `Yieldable[]`
+// (multi-axis). Either way callers `yield transitionName(s)`.
+import { easeIn, easeInOut, easeOut } from "../animation/index.js";
+import { Dir, tween } from "../core/index.js";
+/** Fade opacity 0 → 1. */
+export const fadeIn = (s, sec = 0.3, ease = easeOut) => s.opacity.to(1, sec, ease).from(0);
+/** Fade opacity 1 → 0. */
+export const fadeOut = (s, sec = 0.3, ease = easeIn) => tween(s.opacity, 0, sec, ease);
+/** Slide up from `dy` below + fade in. */
+export function fadeUp(s, sec = 0.4, dy = 16) {
+    s.translate.value = { x: 0, y: dy };
+    s.opacity.value = 0;
+    return [tween(s.translate, { x: 0, y: 0 }, sec, easeOut), tween(s.opacity, 1, sec * 0.8)];
+}
+/** Slide up + fade out. Mirror of `fadeUp`. */
+export const fadeUpOut = (s, sec = 0.3, dy = 16) => [
+    tween(s.translate, { x: 0, y: -dy }, sec, easeIn),
+    tween(s.opacity, 0, sec, easeIn),
+];
+/** Slide in from `dir` + fade in. */
+export function slideIn(s, dir = Dir.Left, sec = 0.4, dist = 30) {
+    s.translate.value = { x: dir.x * dist, y: dir.y * dist };
+    s.opacity.value = 0;
+    return [tween(s.translate, { x: 0, y: 0 }, sec, easeOut), tween(s.opacity, 1, sec * 0.7)];
+}
+/** Slide out toward a side + fade out. */
+export const slideOut = (s, dir = Dir.Right, sec = 0.3, dist = 30) => [
+    tween(s.translate, { x: dir.x * dist, y: dir.y * dist }, sec, easeIn),
+    tween(s.opacity, 0, sec, easeIn),
+];
+/** Scale 0 → 1 + fade in. */
+export function scaleIn(s, sec = 0.3) {
+    s.scale.value = { x: 0, y: 0 };
+    s.opacity.value = 0;
+    return [tween(s.scale, { x: 1, y: 1 }, sec, easeOut), tween(s.opacity, 1, sec * 0.7)];
+}
+/** Scale 1 → 0 + fade out. */
+export const zoomOut = (s, sec = 0.3) => [
+    tween(s.scale, { x: 0, y: 0 }, sec, easeIn),
+    tween(s.opacity, 0, sec, easeIn),
+];
+/** Overshoot-and-settle scale + fade in. */
+export function bounceIn(s, sec = 0.5) {
+    s.scale.value = { x: 0, y: 0 };
+    s.opacity.value = 0;
+    return [
+        tween(s.opacity, 1, sec * 0.5),
+        s.scale.to({ x: 1.18, y: 1.18 }, sec * 0.7, easeOut).to({ x: 1, y: 1 }, sec * 0.3, easeInOut),
+    ];
+}
+/** Spin in: rotate -π → 0 + scale 0.5 → 1 + fade in. */
+export function spinIn(s, sec = 0.5) {
+    s.rotate.value = -Math.PI;
+    s.scale.value = { x: 0.5, y: 0.5 };
+    s.opacity.value = 0;
+    return [
+        tween(s.rotate, 0, sec, easeOut),
+        tween(s.scale, { x: 1, y: 1 }, sec, easeOut),
+        tween(s.opacity, 1, sec * 0.7),
+    ];
+}

package/dist/tex/decorations.d.ts

@@ -0,0 +1,26 @@
+import { Shape } from "../shapes/index.js";
+import type { Part } from "./parts.js";
+export interface DecorationOpts {
+    /** Stroke color. Default: `tokens.stroke`. */
+    stroke?: string;
+    /** Stroke width. Default: `tokens.thinWeight`. */
+    weight?: number;
+    /** Pad between the part's bounds and the decoration. Default per
+     *  decoration (see `tokens.decoration`). */
+    gap?: number;
+}
+/** Curly brace below (or above) a part. Reactive on `part.box`. */
+export declare function brace(part: Part, opts?: DecorationOpts & {
+    /** "below" (default) or "above". */
+    placement?: "above" | "below";
+    /** Brace amplitude in local-frame units. */
+    height?: number;
+}): Shape;
+/** Rectangle around a part, inset by `gap`. (Not `box`: that factory exists.) */
+export declare function frame(part: Part, opts?: DecorationOpts & {
+    corner?: number;
+}): Shape;
+/** Underline at the baseline of a part. */
+export declare function underline(part: Part, opts?: DecorationOpts): Shape;
+/** Diagonal strikethrough, bottom-left to top-right. */
+export declare function cross(part: Part, opts?: DecorationOpts): Shape;

package/dist/tex/decorations.js

@@ -0,0 +1,116 @@
+// Derived shapes that decorate a tex Part (tracks `part.box` reactively).
+import { derive } from "../core/index.js";
+import { Shape, tokens } from "../shapes/index.js";
+const applyStroke = (s, opts) => {
+    s.attrs({
+        stroke: opts.stroke ?? tokens.stroke,
+        "stroke-width": opts.weight ?? tokens.thinWeight,
+        "vector-effect": "non-scaling-stroke",
+        fill: "none",
+    });
+};
+/** A `<rect>` whose attrs and Box derive from one layout signal. */
+function rectFromBox(layout) {
+    const s = new Shape("rect", () => layout.value);
+    s.attrs({
+        x: derive(() => layout.value.x),
+        y: derive(() => layout.value.y),
+        width: derive(() => layout.value.w),
+        height: derive(() => layout.value.h),
+    });
+    return s;
+}
+/** A `<line>` whose endpoints and Box derive from one layout signal. */
+function lineFromEnds(layout) {
+    const s = new Shape("line", () => {
+        const e = layout.value;
+        const x = Math.min(e.x1, e.x2);
+        const y = Math.min(e.y1, e.y2);
+        return { x, y, w: Math.abs(e.x2 - e.x1), h: Math.abs(e.y2 - e.y1) };
+    });
+    s.attrs({
+        x1: derive(() => layout.value.x1),
+        y1: derive(() => layout.value.y1),
+        x2: derive(() => layout.value.x2),
+        y2: derive(() => layout.value.y2),
+    });
+    return s;
+}
+/** Curly brace below (or above) a part. Reactive on `part.box`. */
+export function brace(part, opts = {}) {
+    const placement = opts.placement ?? "below";
+    const height = opts.height ?? tokens.decoration.braceHeight;
+    const gap = opts.gap ?? tokens.decoration.braceGap;
+    const d = derive(() => {
+        const b = part.box.value;
+        const x0 = b.x;
+        const x1 = b.x + b.w;
+        const baseY = placement === "below" ? b.y + b.h + gap : b.y - gap;
+        const dir = placement === "below" ? 1 : -1;
+        const tip = baseY + dir * height;
+        const mid = baseY + dir * (height / 2);
+        const cx = (x0 + x1) / 2;
+        const r = Math.min(height / 2, b.w / 4, 4);
+        return [
+            `M ${x0} ${baseY}`,
+            `Q ${x0} ${mid} ${x0 + r} ${mid}`,
+            `L ${cx - r} ${mid}`,
+            `Q ${cx} ${mid} ${cx} ${tip}`,
+            `Q ${cx} ${mid} ${cx + r} ${mid}`,
+            `L ${x1 - r} ${mid}`,
+            `Q ${x1} ${mid} ${x1} ${baseY}`,
+        ].join(" ");
+    });
+    const s = new Shape("path", () => {
+        const b = part.box.value;
+        const baseY = placement === "below" ? b.y + b.h + gap : b.y - gap;
+        const tip = baseY + (placement === "below" ? height : -height);
+        return { x: b.x, y: Math.min(baseY, tip), w: b.w, h: Math.abs(tip - baseY) };
+    });
+    s.attrs({ d, "stroke-linecap": "round", "stroke-linejoin": "round" });
+    applyStroke(s, opts);
+    return s;
+}
+/** Rectangle around a part, inset by `gap`. (Not `box`: that factory exists.) */
+export function frame(part, opts = {}) {
+    const gap = opts.gap ?? tokens.decoration.gap;
+    const corner = opts.corner ?? tokens.corner;
+    const layout = derive(() => {
+        const b = part.box.value;
+        return { x: b.x - gap, y: b.y - gap, w: b.w + 2 * gap, h: b.h + 2 * gap };
+    });
+    const s = rectFromBox(layout);
+    s.attrs({ rx: corner, ry: corner });
+    applyStroke(s, opts);
+    return s;
+}
+/** Underline at the baseline of a part. */
+export function underline(part, opts = {}) {
+    const gap = opts.gap ?? tokens.decoration.gap;
+    const layout = derive(() => {
+        const b = part.box.value;
+        const y = b.y + b.h + gap;
+        return { x1: b.x, y1: y, x2: b.x + b.w, y2: y };
+    });
+    const s = lineFromEnds(layout);
+    s.attr("stroke-linecap", "round");
+    applyStroke(s, opts);
+    return s;
+}
+/** Diagonal strikethrough, bottom-left to top-right. */
+export function cross(part, opts = {}) {
+    const gap = opts.gap ?? tokens.decoration.crossGap;
+    const layout = derive(() => {
+        const b = part.box.value;
+        return {
+            x1: b.x - gap,
+            y1: b.y + b.h + gap,
+            x2: b.x + b.w + gap,
+            y2: b.y - gap,
+        };
+    });
+    const s = lineFromEnds(layout);
+    s.attr("stroke-linecap", "round");
+    applyStroke(s, opts);
+    return s;
+}

package/dist/tex/index.d.ts

@@ -0,0 +1,5 @@
+export { brace, cross, type DecorationOpts, frame, underline, } from "./decorations.js";
+export { getMarker, highlightTint, hover, marker, palette, registerMarker, } from "./marker.js";
+export { highlight, morph, Plucked, pluck, unpluck, write, writeOut, } from "./motion.js";
+export { bindParts, type Marker, Part, type PartContent, type PartList, PartMarker, part, parts, tint, } from "./parts.js";
+export { type NamesOf, renderToMathML, type TexInterp, type TexOpts, TexShape, tex, } from "./tex.js";

package/dist/tex/index.js

@@ -0,0 +1,5 @@
+export { brace, cross, frame, underline, } from "./decorations.js";
+export { getMarker, highlightTint, hover, marker, palette, registerMarker, } from "./marker.js";
+export { highlight, morph, Plucked, pluck, unpluck, write, writeOut, } from "./motion.js";
+export { bindParts, Part, PartMarker, part, parts, tint, } from "./parts.js";
+export { renderToMathML, TexShape, tex, } from "./tex.js";

package/dist/tex/marker.d.ts

@@ -0,0 +1,17 @@
+import { type Cell, type Writable } from "../core/index.js";
+export declare function getMarker(id: string): Marker | undefined;
+export declare function registerMarker(id: string, m: Marker): void;
+/** Identity shared across renderings; `active` is OR over bound locals. */
+export type Marker = {
+    color: Writable<Cell<string | null>>;
+    active: Cell<boolean>;
+    bind(local: Writable<Cell<boolean>>): () => void;
+    register(id: string): Marker;
+};
+export declare function marker(color?: string): Marker;
+/** N perceptually-equidistant OKLCH colors. */
+export declare function palette(n: number): Marker[];
+/** 15%-opacity background tint used for marker / part highlights. */
+export declare const highlightTint: (color: string) => string;
+/** Wire a DOM element's hover into a Marker. */
+export declare function hover(el: Element, m: Marker): () => void;

package/dist/tex/marker.js

@@ -0,0 +1,63 @@
+// Named reactive identity linking diagram parts to prose. Prefer the
+// scoped registration on `Diagram` over the global registry below.
+import { cell, derive } from "../core/index.js";
+const registry = new Map();
+export function getMarker(id) {
+    return registry.get(id);
+}
+export function registerMarker(id, m) {
+    registry.set(id, m);
+}
+export function marker(color) {
+    const colorCell = cell(color ?? null);
+    const locals = new Set();
+    const v = cell(0);
+    const active = derive(() => {
+        v.value;
+        for (const s of locals)
+            if (s.value)
+                return true;
+        return false;
+    });
+    const m = {
+        color: colorCell,
+        active,
+        bind(local) {
+            locals.add(local);
+            v.value++;
+            return () => {
+                locals.delete(local);
+                v.value++;
+            };
+        },
+        register(id) {
+            registry.set(id, m);
+            return m;
+        },
+    };
+    return m;
+}
+/** N perceptually-equidistant OKLCH colors. */
+export function palette(n) {
+    return Array.from({ length: n }, (_, i) => marker(`oklch(0.65 0.15 ${((i / n) * 360).toFixed(1)})`));
+}
+/** 15%-opacity background tint used for marker / part highlights. */
+export const highlightTint = (color) => `color-mix(in srgb, ${color} 15%, transparent)`;
+/** Wire a DOM element's hover into a Marker. */
+export function hover(el, m) {
+    const local = cell(false);
+    const unbind = m.bind(local);
+    const on = () => {
+        local.value = true;
+    };
+    const off = () => {
+        local.value = false;
+    };
+    el.addEventListener("mouseenter", on);
+    el.addEventListener("mouseleave", off);
+    return () => {
+        unbind();
+        el.removeEventListener("mouseenter", on);
+        el.removeEventListener("mouseleave", off);
+    };
+}

package/dist/tex/motion.d.ts

@@ -0,0 +1,43 @@
+import { type Animator, type Easing } from "../animation/index.js";
+import { Shape } from "../shapes/index.js";
+import type { Part } from "./parts.js";
+import type { TexShape } from "./tex.js";
+/** Wildcard TexShape so cross-cycle morphs (differing `Names`) typecheck. */
+type AnyTex = TexShape<any>;
+/** Pulse a part's `highlighted` signal for `dt` seconds. */
+export declare function highlight(part: Part, dt?: number): Animator;
+/** Reveal an eq left-to-right via a clip-path sweep on the inner HTML
+ *  wrapper. (Animated clip-path on the outer `<g>` tears foreignObject
+ *  content in Chromium.) */
+export declare function write(eq: AnyTex, dt?: number, ease?: Easing): Animator;
+/** Reverse of `write`; ends hidden (`opacity: 0`, clip-path cleared). */
+export declare function writeOut(eq: AnyTex, dt?: number, ease?: Easing): Animator;
+/** A Part lifted out of its TexShape into a free Shape. `translate` is
+ *  the matched mrow's TL in parent coords; `scale` pivots around it.
+ *  Zeroes the source's opacity until `dispose()`. */
+export declare class Plucked extends Shape {
+    #private;
+    readonly source: Part;
+    constructor(source: Part);
+    dispose(): void;
+}
+/** Lift `part` out of its TexShape, mount under the same parent,
+ *  return the Plucked. Restore via `plucked.dispose()` or `unpluck`. */
+export declare function pluck(part: Part): Plucked;
+/** Animate `plucked` into `target`'s pose (or back to its source), then
+ *  dispose. Translates only; animate `scale` yourself to fit a target. */
+export declare function unpluck(plucked: Plucked, target?: Part, dt?: number, ease?: Easing): Animator;
+/** Animate `from` → `to`, matching Parts by marker identity (same
+ *  marker reference, or markers sharing a `group` root). Branches
+ *  by cardinality of each identity:
+ *
+ *    1↔1 same content → single rider, scaled to dest
+ *    1↔1 different    → dual rider, source fades out, dest fades in
+ *    1↔N              → N riders emerge from source, fan to dests
+ *    N↔1              → N riders converge to dest, fade out
+ *    N↔M              → pair by index; extras parent-crossfade
+ *
+ *  Unmatched parts cross-fade with the parent. Assumes both shapes
+ *  share a parent and have translate-only transforms. */
+export declare function morph(from: AnyTex, to: AnyTex, dt?: number, ease?: Easing): Animator;
+export {};