@nuforge/editor 0.3.0 → 0.3.1

package/dist/index.mjs

@@ -3,11 +3,9 @@ import { Nu } from '@nuforge/core';
 import { reactive } from '@nuforge/reactivity';
 import { Parser } from '@nuforge/parser';
 
-/** A literal expression (`"x"`, `5`, `true`). */
 function lit(value) {
     return t.literal({ value });
 }
-/** A text node: `<text text={value} />`, rendered as its string value. */
 function text(value) {
     return t.tagTemplate({
         tag: 'text',
@@ -15,10 +13,6 @@ function text(value) {
         children: [],
     });
 }
-/**
- * Concise element builder — `el('div', { class: lit('box') }, [text('hi')])`
- * instead of the verbose `t.tagTemplate({ tag, props, children })`.
- */
 function el(tag, props = {}, children = []) {
     return t.tagTemplate({ tag, props, children });
 }
@@ -51,7 +45,6 @@ class BlockRegistry {
         return out;
     }
 }
-/** The built-in palette — the common HTML primitives. */
 const DEFAULT_BLOCKS = [
     { id: 'box', label: 'Box', icon: 'square', create: () => el('div') },
     { id: 'text', label: 'Text', icon: 'type', create: () => text('Text') },
@@ -81,27 +74,11 @@ const DEFAULT_BLOCKS = [
     },
 ];
 
-/**
- * Wire protocol for `RemoteCanvasHost` <-> `createCanvasReceiver`: a genuinely
- * navigated `/canvas/[id]`-style iframe has its own JS realm, so state and
- * interaction can't cross as direct object references the way `IframeCanvas`'s
- * portal allows — everything here is a structured-clone-safe plain message.
- *
- * Deliberately generic: only the shapes the editor primitive itself needs
- * (state sync, ready handshake, the core interaction events) are typed. Host
- * concerns like theme/preview-mode/overrides ride through `CanvasUiMessage`'s
- * opaque `payload` — this package relays it, never interprets it.
- */
 const CANVAS_CHANNEL = 'nuforge-canvas';
 const CANVAS_PROTOCOL_VERSION = 1;
-/** Namespace the `BroadcastChannel` per canvas instance (derive from the
- *  iframe's own `src`, so a host never has to invent/track a separate id). */
 function canvasChannelName(src) {
     return `${CANVAS_CHANNEL}:${src}`;
 }
-/** Narrow an arbitrary `BroadcastChannel` payload to a message from this
- *  protocol — guards against unrelated traffic on the same channel name and
- *  against a version mismatch across a stale cached bundle. */
 function isCanvasMessage(data) {
     return (!!data &&
         typeof data === 'object' &&
@@ -109,47 +86,18 @@ function isCanvasMessage(data) {
         data.v === CANVAS_PROTOCOL_VERSION);
 }
 
-/**
- * Canvas-side receiver for a genuinely-navigated `/canvas/[id]`-style route:
- * a `Nu` instance kept in sync with the host's one-way, via `BroadcastChannel`
- * + `t.unflatten`/`t.merge` (the same primitives `@nuforge/collaboration`'s
- * `LoroSyncProvider` uses for its state<->doc binding, without the CRDT layer
- * — there's exactly one writer here, so convergence machinery is unneeded).
- * No `createEditor()`: this instance is never meant to originate an edit the
- * host doesn't already know about, so it only needs `Nu`, not the mutation SDK.
- */
 function createCanvasReceiver(opts) {
     const nu = Nu.create({ externals: opts.externals });
     const volatile = reactive({ activeComponent: null, loadGeneration: 0 });
     const channel = new BroadcastChannel(canvasChannelName(opts.src));
     const uiListeners = new Set();
-    /** Did the incoming flattened state add or remove any node id (a
-     *  structural change), vs. only edit fields on already-known nodes? */
-    const isStructuralChange = (incoming) => {
-        if (!nu.loaded) {
-            return false;
-        }
-        const currentKeys = Object.keys(t.flatten(nu.state).types);
-        const incomingKeys = Object.keys(incoming);
-        if (currentKeys.length !== incomingKeys.length) {
-            return true;
-        }
-        const incomingSet = new Set(incomingKeys);
-        return currentKeys.some((key) => !incomingSet.has(key));
-    };
     const applyState = (message) => {
-        // A full reload — the very first bootstrap, any later resync (`init` —
-        // see RemoteCanvasHost's `previewMode`/`activeComponent`-change doc), OR
-        // a `patch` that structurally changed the tree. See `volatile.loadGeneration`'s
-        // doc for why structural patches are folded into this same path instead
-        // of merging in place.
-        const needsFullReload = message.type === 'init' || isStructuralChange(message.flat.types);
-        if (needsFullReload) {
+        if (message.type === 'init') {
             nu.load(t.unflatten(message.flat));
             volatile.loadGeneration++;
         }
         else {
-            nu.change(() => t.merge(nu.state, t.unflatten(message.flat)));
+            nu.change(() => t.merge(nu.state, t.unflatten(message.flat), { arrayReconcile: 'id' }));
         }
         volatile.activeComponent = message.activeComponent;
     };
@@ -218,13 +166,6 @@ class CommandRegistry {
     }
 }
 
-/**
- * Compute a drop position from the pointer's Y against a target's bounding rect.
- * When `allowInside` is set, the middle band is `inside` (drop as a child) and
- * the outer bands are `before`/`after`; otherwise it's a simple before/after
- * split at the midpoint. Pure — use it from an `onDragOver`/`onPointerMove`
- * handler to drive a drop indicator and the eventual `moveNode`/`pasteNode`.
- */
 function dropPositionFromPointer(clientY, rect, opts = {}) {
     const ratio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
     if (opts.allowInside) {
@@ -236,7 +177,6 @@ function dropPositionFromPointer(clientY, rect, opts = {}) {
     }
     return ratio < 0.5 ? 'before' : 'after';
 }
-/** A human label for a template node (tag name, component name, slot, …). */
 function templateLabel(node) {
     if (node instanceof t.TagTemplate) {
         return node.tag;
@@ -252,15 +192,12 @@ function templateLabel(node) {
     }
     return 'node';
 }
-/** Child templates of a node (empty for leaves / text nodes). */
 function templateChildren(node) {
     return (node.children ?? []).filter((child) => child instanceof t.Type);
 }
-/** Is this a text node (`<text text=…>`), rendered as its string value? */
 function isTextTemplate(node) {
     return node instanceof t.TagTemplate && node.tag === 'text';
 }
-/** Preview the content of a text node, e.g. for a layers tree. */
 function textPreview(node) {
     if (!isTextTemplate(node)) {
         return null;
@@ -271,7 +208,6 @@ function textPreview(node) {
     }
     return '{…}';
 }
-/** Can this node hold appended children? */
 function canHaveChildren(node) {
     if (!node || isTextTemplate(node)) {
         return false;
@@ -280,7 +216,6 @@ function canHaveChildren(node) {
         node instanceof t.ComponentTemplate ||
         t.is(node, t.FragmentTemplate));
 }
-/** Is `ancestor` somewhere above `node` in the tree? */
 function isAncestorOf(nu, ancestor, node) {
     let parent = nu.getParentNode(node);
     while (parent) {
@@ -292,11 +227,6 @@ function isAncestorOf(nu, ancestor, node) {
     return false;
 }
 
-/**
- * A high-level facade over a {@link Nu} runtime for building visual page
- * editors. Every mutation goes through `nu.change`, so it is transactional and
- * undoable. Reach for these instead of hand-splicing the AST.
- */
 class Editor {
     nu;
     blocks;
@@ -319,8 +249,6 @@ class Editor {
             run: (e) => e.nu.redo(),
         });
     }
-    // --- mutation -------------------------------------------------------------
-    /** Append (or insert at `index`) `child` into `parent`'s children. */
     insertNode(parent, child, index) {
         const kids = parent.children;
         if (!Array.isArray(kids)) {
@@ -335,7 +263,6 @@ class Editor {
             }
         });
     }
-    /** Remove a node from its parent. Returns false if it has no parent. */
     removeNode(node) {
         let ok = false;
         this.nu.change(() => {
@@ -343,7 +270,6 @@ class Editor {
         });
         return ok;
     }
-    /** Move `dragged` before/after/inside `target`. Refuses to nest into self. */
     moveNode(dragged, target, position) {
         if (dragged === target || isAncestorOf(this.nu, dragged, target)) {
             return false;
@@ -354,40 +280,26 @@ class Editor {
         });
         return ok;
     }
-    // --- clipboard ------------------------------------------------------------
     clipboardNode = null;
-    /** Put a node on the editor clipboard (a clone is made on paste). */
     copyNode(node) {
         this.clipboardNode = node;
     }
-    /** Copy a node, then remove it. */
     cutNode(node) {
         this.copyNode(node);
         return this.removeNode(node);
     }
-    /** Whether there is something on the clipboard to paste. */
     canPaste() {
         return this.clipboardNode !== null;
     }
-    /**
-     * Paste a fresh copy (new ids) of the clipboard node before/after/inside
-     * `target`. Returns the inserted node, or null if nothing was pasted.
-     */
     pasteNode(target, position = 'after') {
         if (!this.clipboardNode) {
             return null;
         }
         return this.insertCloneRelativeTo(this.clipboardNode, target, position);
     }
-    /** Duplicate a node in place (inserted right after it). Returns the copy. */
     duplicateNode(node) {
         return this.insertCloneRelativeTo(node, node, 'after');
     }
-    /**
-     * Insert a detached node before/after/inside a target (undoable). The core of
-     * canvas drag-and-drop: a drop computes a target + position, then calls this.
-     * Returns the inserted node.
-     */
     insertNodeAt(node, target, position) {
         let ok = false;
         this.nu.change(() => {
@@ -395,7 +307,6 @@ class Editor {
         });
         return ok ? (this.nu.getNodeFromId(node.id) ?? null) : null;
     }
-    /** Create a block and insert it before/after/inside a target. */
     insertBlockAt(blockId, target, position) {
         const block = this.blocks.get(blockId);
         if (!block) {
@@ -409,10 +320,8 @@ class Editor {
         this.nu.change(() => {
             ok = this.insertRelativeTo(clone, target, position);
         });
-        // Return the reactive node from the tree (clone is wrapped on insert).
         return ok ? (this.nu.getNodeFromId(clone.id) ?? null) : null;
     }
-    /** Set several props at once. */
     updateProps(node, props) {
         this.nu.change(() => {
             for (const [key, value] of Object.entries(props)) {
@@ -430,7 +339,6 @@ class Editor {
             delete node.props[key];
         });
     }
-    /** Parse `source` as a nuforge expression and assign it to `key`. */
     setExpression(node, key, source) {
         let expr;
         try {
@@ -442,7 +350,6 @@ class Editor {
         this.setProp(node, key, expr);
         return true;
     }
-    /** Update a text node's literal value. */
     setText(node, value) {
         const expr = node.props?.text;
         if (!(expr instanceof t.Literal)) {
@@ -475,7 +382,6 @@ class Editor {
             tag.classList.properties[clean] = t.literal({ value: true });
         });
     }
-    /** Parse `source` and set the condition under which class `name` applies. */
     setClassCondition(node, name, source) {
         let expr;
         try {
@@ -504,7 +410,6 @@ class Editor {
             }
         });
     }
-    /** Set the `@if` condition from source. */
     setCondition(node, source) {
         let expr;
         try {
@@ -523,8 +428,6 @@ class Editor {
             node.if = null;
         });
     }
-    // --- loop (@each) ---------------------------------------------------------
-    /** Repeat a node over `iterator` (a list expression), binding each `alias`. */
     setEach(node, iterator, alias = 'item', indexName) {
         let expr;
         try {
@@ -547,7 +450,6 @@ class Editor {
             node.each = null;
         });
     }
-    // --- component state / props ----------------------------------------------
     addState(component, name = 'value', init = '0') {
         const taken = new Set(component.state.map((v) => v.name));
         let unique = name;
@@ -632,8 +534,6 @@ class Editor {
         });
         return true;
     }
-    // --- blocks ---------------------------------------------------------------
-    /** Create a block's template and insert it into `parent`. */
     insertBlock(blockId, parent, index) {
         const block = this.blocks.get(blockId);
         if (!block || !canHaveChildren(parent)) {
@@ -643,7 +543,6 @@ class Editor {
         this.insertNode(parent, created, index);
         return created;
     }
-    // --- components / pages ---------------------------------------------------
     uniqueName(base) {
         const taken = new Set(this.getComponents().map((c) => c.name));
         if (!taken.has(base)) {
@@ -655,7 +554,6 @@ class Editor {
         }
         return `${base}${i}`;
     }
-    /** Add a new component (a "page"). */
     addComponent(name = 'Page') {
         const unique = this.uniqueName(name);
         const component = t.nuComponent({
@@ -669,7 +567,6 @@ class Editor {
         });
         return this.getComponent(unique);
     }
-    /** Rename a component, updating `<Name/>` references across the program. */
     renameComponent(component, name) {
         const clean = name.trim();
         if (!clean ||
@@ -719,7 +616,6 @@ class Editor {
             this.walkTemplates(child, fn);
         }
     }
-    // --- query ----------------------------------------------------------------
     getComponents() {
         return this.nu.state.program.components.filter((c) => c instanceof t.NuComponent);
     }
@@ -739,7 +635,6 @@ class Editor {
     getNodeIndex(node) {
         return this.getSiblings(node).indexOf(node);
     }
-    /** Full path from the State root to this node (for selections/serialization). */
     getNodePath(node) {
         const out = [];
         let current = node;
@@ -751,12 +646,9 @@ class Editor {
         }
         return out;
     }
-    // --- change subscription --------------------------------------------------
-    /** Fires with the raw field-level writes of every change (incl. undo/redo). */
     onChange(cb) {
         return this.nu.listenToMutations(cb);
     }
-    /** Fires only when the tree shape changes (a child array was mutated). */
     onStructureChange(cb) {
         return this.nu.listenToMutations((entries) => {
             if (entries.some((e) => Array.isArray(e.target))) {
@@ -764,7 +656,6 @@ class Editor {
             }
         });
     }
-    // --- internals (run inside nu.change) -------------------------------------
     spliceFromParent(node) {
         const parent = this.nu.getParentNode(node);
         const kids = parent?.children;
@@ -812,7 +703,6 @@ class Editor {
         destKids.splice(position === 'after' ? ti + 1 : ti, 0, dragged);
         return true;
     }
-    /** Insert an already-detached node relative to `target` (no removal). */
     insertRelativeTo(node, target, position) {
         if (position === 'inside') {
             if (!canHaveChildren(target)) {
@@ -839,4 +729,3 @@ function createEditor(nu, opts) {
 }
 
 export { BlockRegistry, CANVAS_CHANNEL, CANVAS_PROTOCOL_VERSION, CommandRegistry, DEFAULT_BLOCKS, Editor, canHaveChildren, canvasChannelName, createCanvasReceiver, createEditor, defineBlock, dropPositionFromPointer, el, isAncestorOf, isCanvasMessage, isTextTemplate, lit, templateChildren, templateLabel, text, textPreview };
-//# sourceMappingURL=index.mjs.map