bireactive 0.2.0

package/dist/ext/waapi.js

@@ -0,0 +1,198 @@
+// WAAPI / scroll / viewport bridges. Scroll signals are lazy via the
+// signal's `watched`/`unwatched` hooks; one shared capture-phase
+// listener serves them all. Range names mirror CSS `view-timeline`.
+import { suspend } from "../animation/index.js";
+import { cell } from "../core/index.js";
+/** WAAPI animation as a bireactive Animator. Bare-number `opts` is seconds;
+ *  object `opts` passes through to `Element.animate` (ms). */
+export function* native(el, keyframes, opts = {}) {
+    const native = typeof opts === "number" ? { duration: opts * 1000 } : opts;
+    const a = el.animate(keyframes, native);
+    try {
+        yield* untilAnimation(a);
+        try {
+            a.commitStyles();
+        }
+        catch {
+            /* disconnected or non-committable */
+        }
+    }
+    finally {
+        a.cancel();
+    }
+}
+/** Wake on the animation's `finish` event; resume with the event. */
+export function untilAnimation(a) {
+    return suspend(wake => {
+        const handler = (e) => wake(e);
+        a.addEventListener("finish", handler, { once: true });
+        return () => a.removeEventListener("finish", handler);
+    });
+}
+/** Wake when `el` enters the viewport. Wakes immediately if already in. */
+export function untilInView(el, opts) {
+    return suspend(wake => {
+        let woke = false;
+        const obs = new IntersectionObserver(entries => {
+            if (woke)
+                return;
+            if (entries.some(e => e.isIntersecting)) {
+                woke = true;
+                wake();
+            }
+        }, opts);
+        obs.observe(el);
+        return () => obs.disconnect();
+    });
+}
+/** Wake when `el` leaves the viewport. Wakes immediately if already out. */
+export function untilOutOfView(el, opts) {
+    return suspend(wake => {
+        let woke = false;
+        const obs = new IntersectionObserver(entries => {
+            if (woke)
+                return;
+            if (entries.some(e => !e.isIntersecting)) {
+                woke = true;
+                wake();
+            }
+        }, opts);
+        obs.observe(el);
+        return () => obs.disconnect();
+    });
+}
+// Shared scroll plumbing: capture-phase picks up nested overflow
+// containers (scroll doesn't bubble). `pageTotal` is cached and
+// only refreshed on resize.
+const subscribers = new Set();
+let rafId = 0;
+let attached = false;
+let pageTotal = 0;
+function refreshPageTotal() {
+    pageTotal = document.documentElement.scrollHeight - window.innerHeight;
+}
+function tick() {
+    rafId = 0;
+    // Snapshot: a callback may dispose another scroll signal mid-iter.
+    const snapshot = [...subscribers];
+    for (let i = 0; i < snapshot.length; i++)
+        snapshot[i]();
+}
+function schedule() {
+    if (rafId === 0)
+        rafId = requestAnimationFrame(tick);
+}
+function onResize() {
+    refreshPageTotal();
+    schedule();
+}
+function attach() {
+    if (attached)
+        return;
+    attached = true;
+    refreshPageTotal();
+    window.addEventListener("scroll", schedule, { passive: true, capture: true });
+    window.addEventListener("resize", onResize, { passive: true });
+}
+function detach() {
+    if (!attached)
+        return;
+    attached = false;
+    window.removeEventListener("scroll", schedule, { capture: true });
+    window.removeEventListener("resize", onResize);
+    if (rafId !== 0) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+    }
+}
+function watchTick(cb) {
+    subscribers.add(cb);
+    if (subscribers.size === 1)
+        attach();
+}
+function unwatchTick(cb) {
+    subscribers.delete(cb);
+    if (subscribers.size === 0)
+        detach();
+}
+function scrollSignal(read, initial) {
+    let pull;
+    const sig = cell(initial, {
+        watched() {
+            pull = () => {
+                sig.value = read();
+            };
+            watchTick(pull);
+            pull();
+        },
+        unwatched() {
+            if (pull)
+                unwatchTick(pull);
+            pull = undefined;
+        },
+    });
+    return sig;
+}
+/** Global page scroll progress in `[0, 1]`; `0` if page doesn't scroll. */
+export function scrollProgress() {
+    return scrollSignal(() => (pageTotal > 0 ? clamp01(window.scrollY / pageTotal) : 0), 0);
+}
+function clamp01(x) {
+    return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function rangeProgress(rect, vp, range) {
+    const top = rect.top;
+    const h = rect.height;
+    switch (range) {
+        case "cover": {
+            const total = vp + h;
+            return total > 0 ? clamp01((vp - top) / total) : 0;
+        }
+        case "entry": {
+            return h > 0 ? clamp01((vp - top) / h) : 1;
+        }
+        case "contain": {
+            // Taller than vp: range doesn't exist — pin at 0.5 for stability.
+            const total = vp - h;
+            if (total <= 0)
+                return 0.5;
+            return clamp01((vp - h - top) / total);
+        }
+        case "exit": {
+            return h > 0 ? clamp01(-top / h) : 1;
+        }
+    }
+}
+// Memoize `viewProgress` by (el, range) so N readers share one layout
+// read per tick. WeakMap GCs when el is dropped.
+const viewCache = new WeakMap();
+/** Element view-progress in `[0, 1]` over `range` (default `cover`). */
+export function viewProgress(el, range = "cover") {
+    let entry = viewCache.get(el);
+    if (!entry)
+        viewCache.set(el, (entry = {}));
+    return (entry[range] ??= scrollSignal(() => rangeProgress(el.getBoundingClientRect(), window.innerHeight, range), 0));
+}
+function elInViewport(el) {
+    const r = el.getBoundingClientRect();
+    return r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
+}
+/** Reactive boolean; `true` while `el` intersects the viewport. Seeded
+ *  synchronously from rect, then maintained by IntersectionObserver. */
+export function inView(el, opts) {
+    let observer;
+    const sig = cell(false, {
+        watched() {
+            sig.value = elInViewport(el);
+            observer = new IntersectionObserver(entries => {
+                sig.value = entries.some(e => e.isIntersecting);
+            }, opts);
+            observer.observe(el);
+        },
+        unwatched() {
+            observer?.disconnect();
+            observer = undefined;
+        },
+    });
+    return sig;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./animation/index.js";
+export * from "./assert/index.js";
+export { type CodeOpts, CodeShape, code, codeStyles, type Token, tokenize } from "./code/index.js";
+export * from "./core/index.js";
+export * from "./ext/index.js";
+export * from "./shapes/index.js";
+export * from "./tex/index.js";
+export * from "./web/index.js";

package/dist/index.js

@@ -0,0 +1,10 @@
+export * from "./animation/index.js";
+export * from "./assert/index.js";
+// `code` and `tex` both export `Part`; re-export `code`'s other symbols
+// explicitly so the wildcard below lets `tex`'s `Part` win.
+export { CodeShape, code, codeStyles, tokenize } from "./code/index.js";
+export * from "./core/index.js";
+export * from "./ext/index.js";
+export * from "./shapes/index.js";
+export * from "./tex/index.js";
+export * from "./web/index.js";

package/dist/propagators/index.d.ts

@@ -0,0 +1,6 @@
+export { Box, box } from "../core/values/box.js";
+export { attach, centerInside, follow, type GridOpts, grid, hstack, inset, lockSize, pinEdge, type Side, type StackItem, type StackOpts, vstack, } from "./layout.js";
+export { PropagatorDivergedError, Propagators, type PropagatorsOpts, propagate, propagators, } from "./network.js";
+export { type Propagator, propagator } from "./propagator.js";
+export { constrain, intervalAdd, intervalAdder, intervalEq, intervalSub, intervalSum, RANGE_TOP, type Range, type RangeCell, RangeContradiction, rangeCell, rangeEq, rangeIsContradiction, rangeIsExact, rangeMeet, rangeMerge, rangeWidth, snap, } from "./range.js";
+export { add, align, allDifferent, aspectRatio, between, centroid, constant, eq, keepDistance, mid, mul, onCircle, onLine, reflect, type SetCell, sub, sum, } from "./relations.js";

package/dist/propagators/index.js

@@ -0,0 +1,6 @@
+export { Box, box } from "../core/values/box.js";
+export { attach, centerInside, follow, grid, hstack, inset, lockSize, pinEdge, vstack, } from "./layout.js";
+export { PropagatorDivergedError, Propagators, propagate, propagators, } from "./network.js";
+export { propagator } from "./propagator.js";
+export { constrain, intervalAdd, intervalAdder, intervalEq, intervalSub, intervalSum, RANGE_TOP, RangeContradiction, rangeCell, rangeEq, rangeIsContradiction, rangeIsExact, rangeMeet, rangeMerge, rangeWidth, snap, } from "./range.js";
+export { add, align, allDifferent, aspectRatio, between, centroid, constant, eq, keepDistance, mid, mul, onCircle, onLine, reflect, sub, sum, } from "./relations.js";

package/dist/propagators/layout.d.ts

@@ -0,0 +1,68 @@
+import { type Box, type Read } from "../core/index.js";
+import { type Propagator } from "./propagator.js";
+type ValOrSig = number | Read<number>;
+/** Item in an `hstack` / `vstack`. Bare `Box` uses defaults (grow 1,
+ *  shrink 1, no min/max); tag for per-item flex. Per-item opts are
+ *  plain numbers (not reactive). */
+export type StackItem = Box | {
+    box: Box;
+    grow?: number;
+    shrink?: number;
+    min?: number;
+    max?: number;
+};
+export interface StackOpts {
+    /** Space between adjacent items. Default 0. */
+    gap?: ValOrSig;
+    /** Padding inside container on each side. Default 0. */
+    padding?: ValOrSig;
+    /** Cross-axis alignment. Default "start". */
+    align?: "start" | "center" | "end" | "stretch";
+    /** "fit" (default): items grow/shrink to fill container.
+     *  "hug": items keep their authored size; container resizes. */
+    mode?: "fit" | "hug";
+}
+/** Horizontal CSS-flex stack: per-item grow/shrink/min/max along the
+ *  main axis, cross-axis handled by `align`. */
+export declare function hstack(c: Box, items: readonly StackItem[], opts?: StackOpts): Propagator;
+/** Vertical stack — top-to-bottom version of `hstack`. */
+export declare function vstack(c: Box, items: readonly StackItem[], opts?: StackOpts): Propagator;
+export interface GridOpts {
+    /** Cells per row. */
+    cols: number;
+    /** Gap between cells (both axes). Use `gapX` / `gapY` to differ. */
+    gap?: ValOrSig;
+    gapX?: ValOrSig;
+    gapY?: ValOrSig;
+    padding?: ValOrSig;
+}
+/** Regular grid: items placed in a `cols`-wide grid. Cells equal-size,
+ *  computed from container minus padding and gaps. */
+export declare function grid(c: Box, items: readonly Box[], opts: GridOpts): Propagator;
+/** `inner` fills `outer` minus padding on all sides. Drag outer →
+ *  inner follows. Default padding is 0 (inner == outer). */
+export declare function inset(outer: Box, inner: Box, opts?: {
+    padding?: ValOrSig;
+}): Propagator;
+export type Side = "left" | "right" | "top" | "bottom";
+/** Anchor `b`'s `bSide` to `a`'s `aSide` with optional gap.
+ *
+ *    attach(panel, sidebar, "right", "left", { gap: 8 })
+ *      // sidebar.left = panel.right + 8
+ *
+ *  Bidirectional: drag a → b follows; drag b → a follows. */
+export declare function attach(a: Box, b: Box, aSide: Side, bSide: Side, opts?: {
+    gap?: ValOrSig;
+}): Propagator[];
+/** Center `inner` inside `outer`. `inner.w/h` are preserved.
+ *  Bidirectional: drag outer → inner re-centers; drag inner → outer
+ *  shifts to keep inner centered. */
+export declare function centerInside(outer: Box, inner: Box): Propagator[];
+/** Pin one edge of a box to a fixed coordinate. The OPPOSITE edge
+ *  stays put; size adjusts. */
+export declare function pinEdge(b: Box, side: Side, target: ValOrSig): Propagator;
+/** Lock a box's width or height to a fixed value (or signal). */
+export declare function lockSize(b: Box, axis: "w" | "h", target: ValOrSig): Propagator;
+/** One-way mirror: `follower` tracks `leader` exactly. */
+export declare function follow(leader: Box, follower: Box): Propagator;
+export {};

package/dist/propagators/layout.js

@@ -0,0 +1,336 @@
+// layout.ts — Box-relational layout combinators.
+//
+// Every combinator operates on `Box` value-types. Reactive opts
+// (`gap`, `padding`, …) accept a number or a Num signal.
+//
+//   const c = box(0, 0, 300, 200);
+//   const items = [box(), box(), box()];
+//   p.add(hstack(c, items, { gap: 8, align: "stretch" }));
+//
+// `hstack` / `vstack` are CSS-flex-shaped (per-item grow/shrink vs
+// min/max). For rigid edge-to-edge layouts use `attach`,
+// `centerInside`, etc.
+import { isCell, readNow } from "../core/index.js";
+import { propagator } from "./propagator.js";
+const asW = (n) => n;
+function readDeps(...vs) {
+    return vs.filter(isCell);
+}
+function clamp(v, lo, hi) {
+    return Math.min(Math.max(v, lo), hi);
+}
+function specs(items) {
+    return items.map(it => "box" in it
+        ? {
+            box: it.box,
+            grow: it.grow ?? 1,
+            shrink: it.shrink ?? 1,
+            min: it.min ?? 0,
+            max: it.max ?? Number.POSITIVE_INFINITY,
+        }
+        : { box: it, grow: 1, shrink: 1, min: 0, max: Number.POSITIVE_INFINITY });
+}
+/** Horizontal CSS-flex stack: per-item grow/shrink/min/max along the
+ *  main axis, cross-axis handled by `align`. */
+export function hstack(c, items, opts = {}) {
+    return _stack(c, items, opts, "horizontal");
+}
+/** Vertical stack — top-to-bottom version of `hstack`. */
+export function vstack(c, items, opts = {}) {
+    return _stack(c, items, opts, "vertical");
+}
+function _stack(c, rawItems, opts, dir) {
+    const items = specs(rawItems);
+    const horizontal = dir === "horizontal";
+    const mainPos = (b) => asW(horizontal ? b.x : b.y);
+    const mainSize = (b) => asW(horizontal ? b.w : b.h);
+    const crossPos = (b) => asW(horizontal ? b.y : b.x);
+    const crossSize = (b) => asW(horizontal ? b.h : b.w);
+    const mode = opts.mode ?? "fit";
+    const alignKind = opts.align ?? "start";
+    const reads = [
+        mainPos(c),
+        mainSize(c),
+        crossPos(c),
+        crossSize(c),
+        ...items.map(it => mainSize(it.box)),
+        ...items.map(it => crossSize(it.box)),
+        ...readDeps(opts.gap ?? 0, opts.padding ?? 0),
+    ];
+    const writes = [];
+    for (const it of items) {
+        writes.push(asW(mainPos(it.box)));
+        if (mode === "fit")
+            writes.push(asW(mainSize(it.box)));
+        writes.push(asW(crossPos(it.box)));
+        if (alignKind === "stretch")
+            writes.push(asW(crossSize(it.box)));
+    }
+    return propagator(reads, writes, () => {
+        const gap = readNow(opts.gap ?? 0);
+        const pad = readNow(opts.padding ?? 0);
+        const n = items.length;
+        let sizes;
+        if (mode === "fit") {
+            // Start each item at its hypothetical size (current main-size,
+            // clamped to [min, max]).
+            sizes = new Array(n);
+            let sumW = 0;
+            for (let i = 0; i < n; i++) {
+                const it = items[i];
+                const w0 = clamp(mainSize(it.box).value, it.min, it.max);
+                sizes[i] = w0;
+                sumW += w0;
+            }
+            const slack = mainSize(c).value - 2 * pad - (n - 1) * gap - sumW;
+            if (slack > 1e-9) {
+                // Grow.
+                let remaining = slack;
+                const eligible = new Set();
+                for (let i = 0; i < n; i++) {
+                    if (items[i].grow > 0 && sizes[i] < items[i].max)
+                        eligible.add(i);
+                }
+                while (remaining > 1e-9 && eligible.size > 0) {
+                    let weights = 0;
+                    for (const i of eligible)
+                        weights += items[i].grow;
+                    if (weights === 0)
+                        break;
+                    let absorbed = 0;
+                    for (const i of [...eligible]) {
+                        const share = (remaining * items[i].grow) / weights;
+                        const newW = Math.min(sizes[i] + share, items[i].max);
+                        absorbed += newW - sizes[i];
+                        sizes[i] = newW;
+                        if (newW >= items[i].max)
+                            eligible.delete(i);
+                    }
+                    if (absorbed < 1e-9)
+                        break;
+                    remaining -= absorbed;
+                }
+            }
+            else if (slack < -1e-9) {
+                // Shrink.
+                let remaining = -slack;
+                const eligible = new Set();
+                for (let i = 0; i < n; i++) {
+                    if (items[i].shrink > 0 && sizes[i] > items[i].min)
+                        eligible.add(i);
+                }
+                while (remaining > 1e-9 && eligible.size > 0) {
+                    let weights = 0;
+                    for (const i of eligible)
+                        weights += items[i].shrink;
+                    if (weights === 0)
+                        break;
+                    let absorbed = 0;
+                    for (const i of [...eligible]) {
+                        const share = (remaining * items[i].shrink) / weights;
+                        const newW = Math.max(sizes[i] - share, items[i].min);
+                        absorbed += sizes[i] - newW;
+                        sizes[i] = newW;
+                        if (newW <= items[i].min)
+                            eligible.delete(i);
+                    }
+                    if (absorbed < 1e-9)
+                        break;
+                    remaining -= absorbed;
+                }
+            }
+        }
+        else {
+            // hug: item sizes drive container.
+            sizes = items.map(it => clamp(mainSize(it.box).value, it.min, it.max));
+            let total = 2 * pad + (n - 1) * gap;
+            for (const s of sizes)
+                total += s;
+            mainSize(c).value = total;
+        }
+        // Place items along main axis.
+        let cursor = mainPos(c).value + pad;
+        for (let i = 0; i < n; i++) {
+            mainPos(items[i].box).value = cursor;
+            if (mode === "fit")
+                mainSize(items[i].box).value = sizes[i];
+            cursor += sizes[i] + gap;
+        }
+        // Cross-axis alignment.
+        const cBase = crossPos(c).value + pad;
+        const cAvail = crossSize(c).value - 2 * pad;
+        for (const it of items) {
+            const itSize = crossSize(it.box).value;
+            switch (alignKind) {
+                case "start":
+                    crossPos(it.box).value = cBase;
+                    break;
+                case "center":
+                    crossPos(it.box).value = cBase + (cAvail - itSize) / 2;
+                    break;
+                case "end":
+                    crossPos(it.box).value = cBase + cAvail - itSize;
+                    break;
+                case "stretch":
+                    crossPos(it.box).value = cBase;
+                    crossSize(it.box).value = cAvail;
+                    break;
+            }
+        }
+    });
+}
+/** Regular grid: items placed in a `cols`-wide grid. Cells equal-size,
+ *  computed from container minus padding and gaps. */
+export function grid(c, items, opts) {
+    const cols = opts.cols;
+    const reads = [
+        c.x,
+        c.y,
+        c.w,
+        c.h,
+        ...readDeps(opts.gap ?? 0, opts.gapX ?? 0, opts.gapY ?? 0, opts.padding ?? 0),
+    ];
+    const writes = [];
+    for (const it of items)
+        writes.push(asW(it.x), asW(it.y), asW(it.w), asW(it.h));
+    return propagator(reads, writes, () => {
+        const pad = readNow(opts.padding ?? 0);
+        const gap = readNow(opts.gap ?? 0);
+        const gx = readNow(opts.gapX ?? gap);
+        const gy = readNow(opts.gapY ?? gap);
+        const rows = Math.ceil(items.length / cols);
+        const cellW = (c.w.value - 2 * pad - (cols - 1) * gx) / cols;
+        const cellH = (c.h.value - 2 * pad - (rows - 1) * gy) / rows;
+        for (let i = 0; i < items.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
+            const it = items[i];
+            asW(it.x).value = c.x.value + pad + col * (cellW + gx);
+            asW(it.y).value = c.y.value + pad + row * (cellH + gy);
+            asW(it.w).value = cellW;
+            asW(it.h).value = cellH;
+        }
+    });
+}
+/** `inner` fills `outer` minus padding on all sides. Drag outer →
+ *  inner follows. Default padding is 0 (inner == outer). */
+export function inset(outer, inner, opts = {}) {
+    const reads = [outer.x, outer.y, outer.w, outer.h, ...readDeps(opts.padding ?? 0)];
+    const writes = [asW(inner.x), asW(inner.y), asW(inner.w), asW(inner.h)];
+    return propagator(reads, writes, () => {
+        const pad = readNow(opts.padding ?? 0);
+        asW(inner.x).value = outer.x.value + pad;
+        asW(inner.y).value = outer.y.value + pad;
+        asW(inner.w).value = outer.w.value - 2 * pad;
+        asW(inner.h).value = outer.h.value - 2 * pad;
+    });
+}
+/** Anchor `b`'s `bSide` to `a`'s `aSide` with optional gap.
+ *
+ *    attach(panel, sidebar, "right", "left", { gap: 8 })
+ *      // sidebar.left = panel.right + 8
+ *
+ *  Bidirectional: drag a → b follows; drag b → a follows. */
+export function attach(a, b, aSide, bSide, opts = {}) {
+    const gapDeps = readDeps(opts.gap ?? 0);
+    const gap = () => readNow(opts.gap ?? 0);
+    const sideValue = (box, side) => {
+        switch (side) {
+            case "left":
+                return box.x.value;
+            case "right":
+                return box.x.value + box.w.value;
+            case "top":
+                return box.y.value;
+            case "bottom":
+                return box.y.value + box.h.value;
+        }
+    };
+    const writeSide = (box, side, v) => {
+        switch (side) {
+            case "left":
+                asW(box.x).value = v;
+                break;
+            case "right":
+                asW(box.x).value = v - box.w.value;
+                break;
+            case "top":
+                asW(box.y).value = v;
+                break;
+            case "bottom":
+                asW(box.y).value = v - box.h.value;
+                break;
+        }
+    };
+    return [
+        propagator([a.x, a.y, a.w, a.h, b.w, b.h, ...gapDeps], [asW(b.x), asW(b.y)], () => writeSide(b, bSide, sideValue(a, aSide) + gap())),
+        propagator([b.x, b.y, b.w, b.h, a.w, a.h, ...gapDeps], [asW(a.x), asW(a.y)], () => writeSide(a, aSide, sideValue(b, bSide) - gap())),
+    ];
+}
+/** Center `inner` inside `outer`. `inner.w/h` are preserved.
+ *  Bidirectional: drag outer → inner re-centers; drag inner → outer
+ *  shifts to keep inner centered. */
+export function centerInside(outer, inner) {
+    return [
+        propagator([outer.x, outer.y, outer.w, outer.h, inner.w, inner.h], [asW(inner.x), asW(inner.y)], () => {
+            asW(inner.x).value = outer.x.value + (outer.w.value - inner.w.value) / 2;
+            asW(inner.y).value = outer.y.value + (outer.h.value - inner.h.value) / 2;
+        }),
+        propagator([inner.x, inner.y], [asW(outer.x), asW(outer.y)], () => {
+            const targetX = inner.x.value - (outer.w.value - inner.w.value) / 2;
+            const targetY = inner.y.value - (outer.h.value - inner.h.value) / 2;
+            if (Math.abs(targetX - outer.x.value) > 1e-9)
+                asW(outer.x).value = targetX;
+            if (Math.abs(targetY - outer.y.value) > 1e-9)
+                asW(outer.y).value = targetY;
+        }),
+    ];
+}
+/** Pin one edge of a box to a fixed coordinate. The OPPOSITE edge
+ *  stays put; size adjusts. */
+export function pinEdge(b, side, target) {
+    const targetDeps = readDeps(target);
+    const t = () => readNow(target);
+    return propagator([b.x, b.y, b.w, b.h, ...targetDeps], [asW(b.x), asW(b.y), asW(b.w), asW(b.h)], () => {
+        const tv = t();
+        switch (side) {
+            case "left": {
+                const right = b.x.value + b.w.value;
+                asW(b.x).value = tv;
+                asW(b.w).value = right - tv;
+                break;
+            }
+            case "right":
+                asW(b.w).value = tv - b.x.value;
+                break;
+            case "top": {
+                const bot = b.y.value + b.h.value;
+                asW(b.y).value = tv;
+                asW(b.h).value = bot - tv;
+                break;
+            }
+            case "bottom":
+                asW(b.h).value = tv - b.y.value;
+                break;
+        }
+    });
+}
+/** Lock a box's width or height to a fixed value (or signal). */
+export function lockSize(b, axis, target) {
+    const deps = readDeps(target);
+    const cell = axis === "w" ? asW(b.w) : asW(b.h);
+    return propagator([cell, ...deps], [cell], () => {
+        const v = readNow(target);
+        if (cell.value !== v)
+            cell.value = v;
+    });
+}
+/** One-way mirror: `follower` tracks `leader` exactly. */
+export function follow(leader, follower) {
+    return propagator([leader.x, leader.y, leader.w, leader.h], [asW(follower.x), asW(follower.y), asW(follower.w), asW(follower.h)], () => {
+        asW(follower.x).value = leader.x.value;
+        asW(follower.y).value = leader.y.value;
+        asW(follower.w).value = leader.w.value;
+        asW(follower.h).value = leader.h.value;
+    });
+}