@vectoriox/iox-builder 2.10.2 → 2.10.3

package/fesm2022/vectoriox-iox-builder.mjs

@@ -677,6 +677,65 @@ function arrayItemSchemaFields(properties, arrayPath) {
     return { fields: [], isPrimitive: true };
 }
 
+const freshId = () => Math.random().toString(36).substr(2, 9);
+/**
+ * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
+ * new ids. Used by every author-time clone path (duplicate, paste, block/external drop) so a copied
+ * structure stays self-consistent.
+ *
+ * Absolute node-id references that break under duplication if left unmapped:
+ *   - `stateTriggers[state]`   — the trigger-hover target (see style-engine.md → Targeted states)
+ *   - interaction `action.target` / `reverseActions.target`
+ * A reference pointing OUTSIDE the cloned subtree (id not in the map) is left untouched — the copy
+ * intentionally still points at the external node.
+ *
+ * `styleId` strategy:
+ *   - `'clear'` (default) — drop styleId so the clone OWNS its own CSS rule (independent copy).
+ *   - `'regenerate'`      — keep a styleId but give it a fresh value (legacy builder.component path).
+ */
+function regenerateNodeIds(root, opts = {}) {
+    const idMap = new Map();
+    const assign = (node) => {
+        const oldId = node.id;
+        node.id = freshId();
+        if (opts.styleId === 'regenerate') {
+            if (node.styleId)
+                node.styleId = freshId();
+        }
+        else {
+            node.styleId = undefined;
+        }
+        if (oldId)
+            idMap.set(oldId, node.id);
+        (node.children || []).forEach(assign);
+    };
+    assign(root);
+    remapNodeReferences(root, idMap);
+}
+/** Remap absolute node-id references inside a subtree to their new ids (per `idMap`). Ids not in
+ *  the map (references to nodes outside the cloned subtree) are preserved. */
+function remapNodeReferences(node, idMap) {
+    const triggers = node.stateTriggers;
+    if (triggers) {
+        for (const state of Object.keys(triggers)) {
+            const mapped = idMap.get(triggers[state]);
+            if (mapped)
+                triggers[state] = mapped;
+        }
+    }
+    for (const interaction of node.interactions || []) {
+        const actions = [...(interaction.actions || []), ...(interaction.reverseActions || [])];
+        for (const action of actions) {
+            if (action?.target && action.target !== 'self') {
+                const mapped = idMap.get(action.target);
+                if (mapped)
+                    action.target = mapped;
+            }
+        }
+    }
+    (node.children || []).forEach(child => remapNodeReferences(child, idMap));
+}
+
 /**
  * Locate a node within a forest (array of root nodes + their descendants) by
  * reference identity. Returns the parent array holding the node and its index,
@@ -1116,14 +1175,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 function deepCloneNode(node) {
     const clone = JSON.parse(JSON.stringify(node));
-    regenerateIds(clone);
+    // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a cloned
+    // structure stays self-consistent — e.g. trigger-hover keeps pointing at the clone's own trigger.
+    regenerateNodeIds(clone);
     return clone;
 }
-function regenerateIds(node) {
-    node.id = Math.random().toString(36).substr(2, 9);
-    node.styleId = undefined;
-    (node.children || []).forEach(regenerateIds);
-}
 class DragEngineService {
     constructor(registry, symbolRegistry) {
         this.registry = registry;
@@ -3365,6 +3421,27 @@ class RenderDirective {
         }
         return undefined;
     }
+    /** Nearest ANCESTOR of the styled element that is a registered iox-node AND contains the trigger
+     *  element — i.e. the DOM equivalent of `nearestCommonAncestorId`, resolved per rendered instance.
+     *  Used to re-emit a `trigger-hover` rule after a move/duplicate. Returns undefined if the trigger
+     *  isn't in the DOM yet (caller then skips rather than clobbering the existing rule). */
+    resolveTargetedScopeId(styledEl, triggerCssId) {
+        let el = styledEl?.parentElement ?? null;
+        while (el) {
+            let cssId;
+            for (let i = 0; i < el.classList.length; i++) {
+                const c = el.classList[i];
+                if (c.startsWith('iox-node-')) {
+                    cssId = c.slice('iox-node-'.length);
+                    break;
+                }
+            }
+            if (cssId && el.querySelector(`.iox-node-${triggerCssId}`))
+                return cssId;
+            el = el.parentElement;
+        }
+        return undefined;
+    }
     findParentNodeElement(target) {
         let el = target;
         while (el) {
@@ -3446,6 +3523,21 @@ class RenderDirective {
                             continue;
                         this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, relativeToId);
                     }
+                    else if (TARGETED_STATES.includes(state)) {
+                        // Targeted states (trigger-hover) compile to a `:has()` scoped to the nearest
+                        // common ancestor of the styled node + the chosen trigger. On a re-render (move,
+                        // duplicate, drop) we must RE-EMIT with a freshly-resolved scope — otherwise the
+                        // rule is clobbered and the hover stops working. Resolve the scope from the live
+                        // DOM (works per-instance); SKIP if the trigger isn't rendered yet, so we don't
+                        // clobber the correct rule page-ui's applyStateEnhancements already produced.
+                        const triggerCssId = node.stateTriggers?.[state];
+                        if (!triggerCssId)
+                            continue;
+                        const scopeId = this.resolveTargetedScopeId(childEl, triggerCssId);
+                        if (!scopeId)
+                            continue;
+                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, scopeId, triggerCssId);
+                    }
                     else {
                         this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state);
                     }
@@ -5294,15 +5386,11 @@ class BuilderComponent {
     }
     deepCloneWithNewIds(node) {
         const clone = JSON.parse(JSON.stringify(node));
-        this.assignNewIds(clone);
+        // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a
+        // duplicated/pasted structure stays self-consistent (trigger-hover keeps its own trigger).
+        regenerateNodeIds(clone, { styleId: 'regenerate' });
         return clone;
     }
-    assignNewIds(node) {
-        node.id = Math.random().toString(36).slice(2, 10);
-        if (node.styleId)
-            node.styleId = Math.random().toString(36).slice(2, 10);
-        node.children?.forEach(child => this.assignNewIds(child));
-    }
     _stripGlobalFlags(node) {
         node.isGlobal = false;
         node.globalPosition = undefined;