@nuforge/editor 0.3.0 → 0.3.2

package/dist/index.cjs

@@ -24,11 +24,9 @@ function _interopNamespaceDefault(e) {
 
 var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 
-/** A literal expression (`"x"`, `5`, `true`). */
 function lit(value) {
     return t__namespace.literal({ value });
 }
-/** A text node: `<text text={value} />`, rendered as its string value. */
 function text(value) {
     return t__namespace.tagTemplate({
         tag: 'text',
@@ -36,10 +34,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__namespace.tagTemplate({ tag, props, children });
 }
@@ -72,7 +66,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') },
@@ -102,27 +95,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' &&
@@ -130,47 +107,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 = core.Nu.create({ externals: opts.externals });
     const volatile = reactivity.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__namespace.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__namespace.unflatten(message.flat));
             volatile.loadGeneration++;
         }
         else {
-            nu.change(() => t__namespace.merge(nu.state, t__namespace.unflatten(message.flat)));
+            nu.change(() => t__namespace.merge(nu.state, t__namespace.unflatten(message.flat), { arrayReconcile: 'id' }));
         }
         volatile.activeComponent = message.activeComponent;
     };
@@ -239,13 +187,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) {
@@ -257,7 +198,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__namespace.TagTemplate) {
         return node.tag;
@@ -273,15 +213,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__namespace.Type);
 }
-/** Is this a text node (`<text text=…>`), rendered as its string value? */
 function isTextTemplate(node) {
     return node instanceof t__namespace.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;
@@ -292,7 +229,6 @@ function textPreview(node) {
     }
     return '{…}';
 }
-/** Can this node hold appended children? */
 function canHaveChildren(node) {
     if (!node || isTextTemplate(node)) {
         return false;
@@ -301,7 +237,6 @@ function canHaveChildren(node) {
         node instanceof t__namespace.ComponentTemplate ||
         t__namespace.is(node, t__namespace.FragmentTemplate));
 }
-/** Is `ancestor` somewhere above `node` in the tree? */
 function isAncestorOf(nu, ancestor, node) {
     let parent = nu.getParentNode(node);
     while (parent) {
@@ -313,11 +248,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;
@@ -340,8 +270,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)) {
@@ -356,7 +284,6 @@ class Editor {
             }
         });
     }
-    /** Remove a node from its parent. Returns false if it has no parent. */
     removeNode(node) {
         let ok = false;
         this.nu.change(() => {
@@ -364,7 +291,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;
@@ -375,40 +301,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(() => {
@@ -416,7 +328,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) {
@@ -430,10 +341,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)) {
@@ -451,7 +360,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 {
@@ -463,7 +371,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__namespace.Literal)) {
@@ -496,7 +403,6 @@ class Editor {
             tag.classList.properties[clean] = t__namespace.literal({ value: true });
         });
     }
-    /** Parse `source` and set the condition under which class `name` applies. */
     setClassCondition(node, name, source) {
         let expr;
         try {
@@ -525,7 +431,6 @@ class Editor {
             }
         });
     }
-    /** Set the `@if` condition from source. */
     setCondition(node, source) {
         let expr;
         try {
@@ -544,8 +449,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 {
@@ -568,7 +471,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;
@@ -653,8 +555,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)) {
@@ -664,7 +564,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)) {
@@ -676,7 +575,6 @@ class Editor {
         }
         return `${base}${i}`;
     }
-    /** Add a new component (a "page"). */
     addComponent(name = 'Page') {
         const unique = this.uniqueName(name);
         const component = t__namespace.nuComponent({
@@ -690,7 +588,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 ||
@@ -702,7 +599,9 @@ class Editor {
             component.name = clean;
             for (const c of this.getComponents()) {
                 this.walkTemplates(c.template, (tpl) => {
-                    if (tpl instanceof t__namespace.ComponentTemplate && tpl.component.name === old) {
+                    if (tpl instanceof t__namespace.ComponentTemplate &&
+                        !tpl.component.external &&
+                        tpl.component.name === old) {
                         tpl.component.name = clean;
                     }
                 });
@@ -740,7 +639,6 @@ class Editor {
             this.walkTemplates(child, fn);
         }
     }
-    // --- query ----------------------------------------------------------------
     getComponents() {
         return this.nu.state.program.components.filter((c) => c instanceof t__namespace.NuComponent);
     }
@@ -760,7 +658,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;
@@ -772,12 +669,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))) {
@@ -785,7 +679,6 @@ class Editor {
             }
         });
     }
-    // --- internals (run inside nu.change) -------------------------------------
     spliceFromParent(node) {
         const parent = this.nu.getParentNode(node);
         const kids = parent?.children;
@@ -833,7 +726,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)) {
@@ -880,4 +772,3 @@ exports.templateChildren = templateChildren;
 exports.templateLabel = templateLabel;
 exports.text = text;
 exports.textPreview = textPreview;
-//# sourceMappingURL=index.cjs.map