bireactive 0.3.4 → 0.3.5

package/dist/core/values/str.js

@@ -56,23 +56,23 @@ export class Str extends Cell {
      *  write. A write's own edge whitespace is stripped first. */
     trim() {
         return Str.lens(this, {
-            init: (s) => {
+            complement: (s) => {
                 const lead = /^\s*/.exec(s)?.[0] ?? "";
                 // Slice lead off first so trail can't overlap it on all-whitespace.
                 const remain = s.slice(lead.length);
                 const trail = /\s*$/.exec(remain)?.[0] ?? "";
                 return { lead, trail };
             },
-            fwd: (s) => {
+            // `get` is the sole refresh: re-capture the edge padding (pure ⇒ idempotent).
+            get: (s, c) => {
                 const lead = /^\s*/.exec(s)?.[0] ?? "";
                 const remain = s.slice(lead.length);
                 const trail = /\s*$/.exec(remain)?.[0] ?? "";
+                c.lead = lead;
+                c.trail = trail;
                 return remain.slice(0, remain.length - trail.length);
             },
-            bwd: (target, _s, c) => ({
-                update: c.lead + target.replace(/^\s+/, "").replace(/\s+$/, "") + c.trail,
-                complement: c,
-            }),
+            put: (target, _s, c) => c.lead + target.replace(/^\s+/, "").replace(/\s+$/, "") + c.trail,
         });
     }
     /** Windowed view `s.slice(start, end)` (JS semantics). A write splices the

package/dist/formats/lens.js

@@ -6,13 +6,13 @@
 // value this text last agreed with (by identity — the hub only changes
 // identity on a real change). The spoke:
 //
-//   bwd   — parse the written text. Clean ⇒ push the recovered value to
-//           the hub. Errors ⇒ `updates: [SKIP]` (hub untouched),
-//           but the complement keeps the broken text so the view echoes
-//           it back instead of trampling the editor.
-//   step  — when the hub moved away from `synced`, absorb it by
-//           three-way surgical merge around any error regions.
-//   fwd   — the complement's text.
+//   put   — parse the written text. Clean ⇒ push the recovered value to
+//           the hub. Errors ⇒ `SKIP` (hub untouched), but the complement
+//           keeps the broken text so the view echoes it back instead of
+//           trampling the editor.
+//   get   — when the hub moved away from `synced`, absorb it by three-way
+//           surgical merge around any error regions (the sole refresh,
+//           idempotent once synced); then emit the complement's text.
 import { cell, lens, SKIP } from "../core/cell.js";
 import { deepEqual, mergeText, valueOf, } from "./cst.js";
 function fromValue(adapter, v) {
@@ -36,16 +36,24 @@ export function valueHub(initial) {
  *  the error regions. */
 export function formatSpoke(hub, adapter) {
     return lens(hub, {
-        init: v => fromValue(adapter, v),
-        step: (v, c) => (v === c.synced ? c : absorb(adapter, c, v)),
-        fwd: (_v, c) => c.text,
-        bwd: (target, _v, c) => {
+        complement: (v) => fromValue(adapter, v),
+        // `get` is the sole refresh: when the hub moved off `synced`, absorb it by
+        // surgical merge (idempotent — once `synced === v`, re-reading is a no-op).
+        get: (v, c) => {
+            if (v !== c.synced)
+                Object.assign(c, absorb(adapter, c, v));
+            return c.text;
+        },
+        put: (target, _v, c) => {
             const { tree, errors } = adapter.parse(target);
             if (errors.length === 0) {
                 const v = valueOf(tree);
-                return { update: v, complement: { text: target, tree, errors, synced: v } };
+                Object.assign(c, { text: target, tree, errors, synced: v });
+                return v;
             }
-            return { update: SKIP, complement: { text: target, tree, errors, synced: c.synced } };
+            // Broken edit: keep the text (so the view echoes it) but hold `synced`.
+            Object.assign(c, { text: target, tree, errors });
+            return SKIP;
         },
     });
 }

package/dist/jsx-runtime.js

@@ -118,30 +118,59 @@ function reactiveText(get) {
     }));
     return node;
 }
-/** Two-way bind a form control to a writable cell: read forward into the
- *  control, write back on input. The forward write is skipped while the
- *  control is focused, so a live edit is never clobbered mid-drag (the
+/** Two-way bind a form control or `contenteditable` to a writable cell: read
+ *  forward into the control, write back on input. The forward write is skipped
+ *  while the control is focused, so a live edit is never clobbered mid-drag (the
  *  controlled-input focus guard, written once). */
 function bindLens(el, lens) {
-    const checkbox = el.type === "checkbox";
+    if (el.isContentEditable)
+        return bindContentEditable(el, lens);
+    const input = el;
+    const checkbox = input.type === "checkbox";
     track(effect(() => {
         const v = lens.value;
         if (checkbox) {
-            el.checked = !!v;
+            input.checked = !!v;
             return;
         }
         const next = v == null ? "" : String(v);
-        const root = el.getRootNode();
-        if (root.activeElement !== el && el.value !== next)
-            el.value = next;
+        const root = input.getRootNode();
+        if (root.activeElement !== input && input.value !== next)
+            input.value = next;
     }));
-    const evt = checkbox || el.tagName === "SELECT" ? "change" : "input";
-    el.addEventListener(evt, () => {
+    const evt = checkbox || input.tagName === "SELECT" ? "change" : "input";
+    input.addEventListener(evt, () => {
         lens.value = checkbox
-            ? el.checked
-            : el.type === "range" || el.type === "number"
-                ? Number(el.value)
-                : el.value;
+            ? input.checked
+            : input.type === "range" || input.type === "number"
+                ? Number(input.value)
+                : input.value;
+    });
+}
+/** Bind a `contenteditable` element to a writable string cell via `textContent`.
+ *  Forward writes are skipped while focused or mid IME composition; the back-write
+ *  fires on input and at composition end. Assumes plaintext — prefer
+ *  `contenteditable="plaintext-only"` where supported; rich markup is the caller's. */
+function bindContentEditable(el, lens) {
+    let composing = false;
+    track(effect(() => {
+        const v = lens.value;
+        const next = v == null ? "" : String(v);
+        const root = el.getRootNode();
+        if (root.activeElement !== el && el.textContent !== next)
+            el.textContent = next;
+    }));
+    const writeBack = () => {
+        if (!composing)
+            lens.value = el.textContent ?? "";
+    };
+    el.addEventListener("input", writeBack);
+    el.addEventListener("compositionstart", () => {
+        composing = true;
+    });
+    el.addEventListener("compositionend", () => {
+        composing = false;
+        writeBack();
     });
 }
 /** Render `component` into `host`, collecting reactive teardowns. The returned
@@ -172,6 +201,50 @@ export function scope(fn) {
         currentOwner = prev;
     }
 }
+/** Bring `parent`'s children to exactly `nodes` in order, touching the DOM only
+ *  where it differs. Relocates existing nodes with `moveBefore` (preserves focus,
+ *  selection, and IME composition on items that didn't move); inserts fresh nodes
+ *  and falls back to `replaceChildren` where `moveBefore` is unavailable. */
+function reorder(parent, nodes) {
+    // Identical order — re-inserting would steal focus and reset clicks mid-interaction.
+    const cur = parent.childNodes;
+    let same = cur.length === nodes.length;
+    for (let i = 0; same && i < nodes.length; i++)
+        same = cur[i] === nodes[i];
+    if (same)
+        return;
+    const move = parent.moveBefore;
+    if (typeof move !== "function") {
+        parent.replaceChildren(...nodes);
+        return;
+    }
+    const wanted = new Set(nodes);
+    for (let i = cur.length - 1; i >= 0; i--) {
+        const n = cur[i];
+        if (!wanted.has(n))
+            n.remove();
+    }
+    let ref = parent.firstChild;
+    for (const node of nodes) {
+        if (node === ref) {
+            ref = ref.nextSibling;
+            continue;
+        }
+        // moveBefore relocates an already-connected node; brand-new nodes (and the
+        // disconnected/cross-document cases that make moveBefore throw) use insertBefore.
+        if (node.parentNode === parent) {
+            try {
+                move.call(parent, node, ref);
+            }
+            catch {
+                parent.insertBefore(node, ref);
+            }
+        }
+        else {
+            parent.insertBefore(node, ref);
+        }
+    }
+}
 /** Keyed list rendering: keep `parent`'s children in sync with a reactive array,
  *  reusing and reordering nodes by key, disposing those that leave. Each item is
  *  rendered in its own `scope` (untracked from the list effect, so item-internal
@@ -201,14 +274,7 @@ export function each(parent, items, key, render) {
                 cache.delete(k);
             }
         }
-        // Only touch the DOM when the ordered node set actually changed — re-inserting
-        // identical children mid-interaction would steal focus and reset clicks.
-        const cur = parent.childNodes;
-        let same = cur.length === nodes.length;
-        for (let i = 0; same && i < nodes.length; i++)
-            same = cur[i] === nodes[i];
-        if (!same)
-            parent.replaceChildren(...nodes);
+        reorder(parent, nodes);
     });
     track(() => {
         stop();

package/dist/learn/lens-net.js

@@ -63,10 +63,8 @@ function denseBackward(p, inDim, outDim, act, x, dOut) {
 function denseLens(params, input, inDim, outDim, act, cfg) {
     const parents = [params, input];
     return lens(parents, {
-        init: () => null,
-        step: (_s, c) => c,
-        fwd: (s) => denseForward(s[0], inDim, outDim, act, s[1]),
-        bwd: (cot, s, c) => {
+        get: (s) => denseForward(s[0], inDim, outDim, act, s[1]),
+        put: (cot, s) => {
             const { dIn, gW, gb } = denseBackward(s[0], inDim, outDim, act, s[1], cot);
             let pUpd;
             if (cfg.frozen) {
@@ -82,7 +80,7 @@ function denseLens(params, input, inDim, outDim, act, cfg) {
                     b[o] = b[o] - lr * gb[o];
                 pUpd = { W, b };
             }
-            return { updates: [pUpd, dIn], complement: c };
+            return [pUpd, dIn];
         },
     });
 }

package/dist/schema/lens.d.ts

@@ -91,7 +91,10 @@ export declare function each(elem: VLens<Obj, Obj, any>): VLens<Obj[], Obj[], un
  *  for nested occurrences — e.g. rename a field at every level of a subtask
  *  tree of arbitrary depth. Cambria's open "recursive schemas" case. */
 export declare function recurse(build: (self: OLens) => OLens): OLens;
-/** Lift a value-lens onto a reactive cell. */
+/** Lift a value-lens onto a reactive cell. The value-level complement `C` is
+ *  functional (heterogeneous products, possibly `null`), so a small engine-side
+ *  holder `{ c }` carries it: `get`/`put` swap `holder.c` in place. `get` is the
+ *  sole refresh (folds `step`; idempotent when `step` is). */
 export declare function toStep<C>(vl: VLens<Obj, Obj, C>): Step;
 /** A migration step: a writable lens from one POJO schema to the next. */
 export type Step = (src: Writable<Cell<Obj>>) => Writable<Cell<Obj>>;

package/dist/schema/lens.js

@@ -369,15 +369,22 @@ export function recurse(build) {
     return self;
 }
 // ── reactive lifting (cells) ─────────────────────────────────────────
-/** Lift a value-lens onto a reactive cell. */
+/** Lift a value-lens onto a reactive cell. The value-level complement `C` is
+ *  functional (heterogeneous products, possibly `null`), so a small engine-side
+ *  holder `{ c }` carries it: `get`/`put` swap `holder.c` in place. `get` is the
+ *  sole refresh (folds `step`; idempotent when `step` is). */
 export function toStep(vl) {
     return src => lens(src, {
-        init: v => vl.init(v),
-        step: (v, c) => (vl.step ? vl.step(v, c) : c),
-        fwd: (v, c) => vl.fwd(v, c),
-        bwd: (t, v, c) => {
-            const r = vl.bwd(t, v, c);
-            return { update: r.s, complement: r.c };
+        complement: (v) => ({ c: vl.init(v) }),
+        get: (v, h) => {
+            if (vl.step)
+                h.c = vl.step(v, h.c);
+            return vl.fwd(v, h.c);
+        },
+        put: (t, v, h) => {
+            const r = vl.bwd(t, v, h.c);
+            h.c = r.c;
+            return r.s;
         },
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bireactive",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Bi-directional reactive programming.",
   "type": "module",
   "main": "./dist/index.js",