@vectoriox/iox-builder 4.26.0 → 4.27.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -21,6 +21,7 @@ export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTra
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
+import { BEHAVIOUR_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
 import { map, catchError } from 'rxjs/operators';
@@ -3268,6 +3269,15 @@ class InteractionEngineService {
                 this.executeDialogAction(action);
                 continue;
             }
+            // Tier-A behaviour (A1c). The canvas-is-live rules are catalog DATA
+            // (ELEMENT_ACTION_DESCRIPTORS): copy runs, scrollTo runs (scrollIntoView — the frame
+            // scrolls natively here; the Lenis rule is the LIVE side's), navigate and submitForm
+            // SIMULATE — a dispatched event the host surfaces as a toast, never a route change
+            // or a fake submit under the author's feet.
+            if (BEHAVIOUR_ACTION_TYPES.has(action.type)) {
+                this.executeBehaviourAction(node, action, selfEl);
+                continue;
+            }
             // Context actions write STATE, not animation. `selfEl` is deliberate: $item is read by
             // walking up from the element actually hovered/clicked, which for a repeater PREVIEW ROW
             // is the clone — so each row publishes its own item, exactly as on the live site.
@@ -3317,6 +3327,28 @@ class InteractionEngineService {
         // MERGE, not replace — a page can hold several repeaters, each publishing its own source.
         this.contextData = { ...this.contextData, ...(data ?? {}) };
     }
+    executeBehaviourAction(node, action, selfEl) {
+        switch (action.type) {
+            case 'copyToClipboard': {
+                const text = String(action.params?.['text'] ?? '');
+                if (text)
+                    navigator.clipboard?.writeText(text).catch(() => { });
+                return;
+            }
+            case 'scrollTo': {
+                const target = this.resolveTarget(node, action, selfEl);
+                target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                return;
+            }
+            case 'navigate':
+            case 'submitForm': {
+                // Simulated: the host (the admin app) listens and shows "would …" as a toast.
+                const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+                window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+                return;
+            }
+        }
+    }
     executeDialogAction(action) {
         const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
         if (!dialog)
@@ -6565,11 +6597,32 @@ class BuilderComponent {
         this.lenis = undefined;
         this.lenisRafId = undefined;
     }
+    /**
+     * K5 (actions plan): actions need NAMED targets — the panel lists only labeled nodes, so an
+     * unlabeled Dialog is unpickable. Every insert path labels the node "<Type>" or "<Type> N",
+     * counting existing labels of that family across the whole tree.
+     */
+    autoLabel(config) {
+        if (!config?.type || config.label)
+            return;
+        const base = String(config.type).replace(/([a-z])([A-Z])/g, '$1 $2');
+        let count = 0;
+        const walk = (nodes) => {
+            for (const n of nodes ?? []) {
+                if (typeof n?.label === 'string' && (n.label === base || n.label.startsWith(base + ' ')))
+                    count++;
+                walk(n?.children);
+            }
+        };
+        walk(this.layout);
+        config.label = count === 0 ? base : `${base} ${count + 1}`;
+    }
     addComponent(name) {
         const config = this.registry.createConfig(name);
         if (!config) {
             return;
         }
+        this.autoLabel(config);
         this.layout.push(config);
     }
     onDrop(event) {
@@ -6579,6 +6632,7 @@ class BuilderComponent {
                 const config = this.registry.createConfig(payload.data);
                 if (!config)
                     return;
+                this.autoLabel(config);
                 this.layout.splice(insertIndex, 0, config);
                 this.cdr.markForCheck();
                 this._selectAfterDrop(config);