@vectoriox/iox-builder 9.11.4 → 10.0.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -167,9 +167,17 @@ var PanelEventTypes;
      *  would (`string` component type, or a block / symbol object). The builder resolves WHERE from
      *  the current selection — see `resolveInsertTarget`. */
     PanelEventTypes["INSERT_COMPONENT"] = "insertcomponent";
-    /** Insert prebuilt node(s) as GLOBAL elements (data = ComponentNode[]) — the consent preset's
-     *  path (D-C5: site-wide by construction). Mirrors the MakeGlobal toolbar action. */
+    /** Insert prebuilt node(s) as GLOBAL elements (data = ComponentNode[]) — the consent preset's click and
+     *  the site header's click or drop (CC1.1). The HOST handles it (it owns the globals, their undo step and
+     *  the one-header rule); the builder only routes a dropped global payload here (`globalInsert$`). */
     PanelEventTypes["INSERT_GLOBAL"] = "insertglobal";
+    /** A panel makes `data.node` a GLOBAL element at `data.position` (default before) — the same move as the
+     *  toolbar's Make Global (the Style panel's Global switch, Bindings ▸ Phone menu ▸ "Make it the site header"). */
+    PanelEventTypes["MAKE_GLOBAL"] = "make-global";
+    /** A panel returns the global `data.node` to the page — the toolbar's Remove Global. */
+    PanelEventTypes["REMOVE_GLOBAL"] = "remove-global";
+    /** A panel moved the global `data.node` to `data.position` (before / after the page content). */
+    PanelEventTypes["GLOBAL_POSITION"] = "update-global-position";
     /** A click on a compound component's PART (Field label/control/help/…) — the style panel
      *  activates that part (data = { part }). Doron 2026-10-10: "both shall be selectable". */
     PanelEventTypes["PART_SELECT"] = "partselect";
@@ -2523,6 +2531,8 @@ class DragEngineService {
         this.deepTarget$ = new BehaviorSubject(null);
         /** Emits the dropped/inserted ComponentNode after every successful drop. */
         this.dropComplete$ = new Subject();
+        /** A fresh GLOBAL node from the palette (the site header) — dropped or clicked, never placed in a zone. */
+        this.globalInsert$ = new Subject();
         // ── Active drag state ─────────────────────────────────────
         this._isDragging = false;
         this._payload = null;
@@ -2633,6 +2643,10 @@ class DragEngineService {
     // ── Shared drop handler — used by all layout components ───────────────────
     handleDrop(children, event, dropListId, cdr, afterDrop) {
         const { payload, insertIndex } = event;
+        if (this.routeGlobalPayload(payload.data)) {
+            afterDrop?.();
+            return;
+        }
         const changesParent = payload.type === 'external' || payload.sourceId !== dropListId;
         if (changesParent && this.refuseInsert(payload.data, this.dropzoneAncestors(dropListId))) {
             afterDrop?.();
@@ -2712,6 +2726,8 @@ class DragEngineService {
      * step through the same path. Returns the inserted node, or null if the payload was unusable.
      */
     insertPayload(children, index, data, ancestors = []) {
+        if (this.routeGlobalPayload(data))
+            return null;
         if (this.refuseInsert(data, ancestors))
             return null;
         const node = this.materialize(data);
@@ -2722,6 +2738,29 @@ class DragEngineService {
         this.dropComplete$.next(node);
         return node;
     }
+    /**
+     * A palette payload born GLOBAL (the site header, CC1.1) is not placed where it was dropped or clicked:
+     * it is handed to `globalInsert$` (the builder hands it to the host, which owns the globals). True when
+     * the payload was routed there. Only an EXTERNAL payload can be one — a node already on the canvas that
+     * is global moves through the globals' own paths.
+     */
+    routeGlobalPayload(data) {
+        if (!data || typeof data !== 'object' || !this.payloadNode(data)?.isGlobal)
+            return false;
+        if (this.isOnCanvas(data))
+            return false;
+        const node = this.materialize(data);
+        if (!node)
+            return false;
+        this.globalInsert$.next(node);
+        return true;
+    }
+    isOnCanvas(data) {
+        for (const list of this.dataMap.values())
+            if (list.includes(data))
+                return true;
+        return false;
+    }
     /** True when `children` is a registered drop zone's array — i.e. a real container that can hold
      *  children. Click-to-insert uses the same test a drag does, so it can't insert where a drop
      *  couldn't. */
@@ -9077,6 +9116,12 @@ class BuilderComponent {
             this._selectAfterDrop(node);
             this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
         }));
+        // A palette payload born GLOBAL (the site header) never lands where it was dropped: the host owns
+        // the globals, their undo step and the one-header rule (CC1.1) — the same event a click sends.
+        this.sub.add(this.dragEngine.globalInsert$.subscribe((node) => {
+            this.autoLabel(node);
+            this.panelEventService.emit(PanelEventTypes.INSERT_GLOBAL, [node]);
+        }));
         this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
         this.viewportSub = this.viewportService.state$.subscribe(state => {
             this.activeBreakpoint = state.breakpoint;
@@ -9511,6 +9556,21 @@ class BuilderComponent {
         this.selectPanel(PanelTypes.STYLES);
         this._emitElementSelect(event.node, event.componentRef);
     }
+    /**
+     * Make / Remove global moved `node` between the page and the globals: keep it selected in its new place,
+     * so the breadcrumb (its Global chip) and every panel describe where it is NOW. Clearing the selection
+     * left the crumb and the Bindings panel on the old node until a reload (CC1.1, Doron's report).
+     */
+    reselectMoved(node) {
+        this.overlayService.clearSelect();
+        this.cdr.detectChanges();
+        setTimeout(() => this._withNodeRef(node, ref => {
+            this.selectedItem = node;
+            this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+            this._emitElementSelect(node, ref.componentRef);
+            this.cdr.markForCheck();
+        }));
+    }
     _selectAfterDrop(node) {
         // Wait one tick for Angular to render the new component and register it
         // in the overlay before attempting to select it.
@@ -9737,9 +9797,7 @@ class BuilderComponent {
                     node.globalPosition = event.position ?? 'before';
                     this.globalElements.push(node);
                     this.globalElementsChange.emit([...this.globalElements]);
-                    this.selectedItem = null;
-                    this.overlayService.clearSelect();
-                    this.cdr.markForCheck();
+                    this.reselectMoved(node);
                     this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
                 }
                 break;
@@ -9752,9 +9810,7 @@ class BuilderComponent {
                     node.globalPosition = undefined;
                     this.layout.push(node);
                     this.globalElementsChange.emit([...this.globalElements]);
-                    this.selectedItem = null;
-                    this.overlayService.clearSelect();
-                    this.cdr.markForCheck();
+                    this.reselectMoved(node);
                     this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
                 }
                 break;
@@ -10119,21 +10175,21 @@ class BuilderComponent {
             this.insertFromPanel(panelEvent.data);
             return;
         }
-        // Prebuilt roots straight into the GLOBAL elements (the consent preset, D-C5) — the same
-        // moves as the MakeGlobal toolbar action, minus the remove-from-layout step.
-        if (panelEvent.type === PanelEventTypes.INSERT_GLOBAL) {
-            const nodes = (Array.isArray(panelEvent.data) ? panelEvent.data : [panelEvent.data]);
-            for (const node of nodes) {
-                if (!node)
-                    continue;
-                this.autoLabel(node);
-                node.isGlobal = true;
-                node.globalPosition = node.globalPosition ?? 'after';
-                this.globalElements.push(node);
-            }
+        // A panel moves a node between the page and the globals — the toolbar's own Make / Remove Global.
+        if (panelEvent.type === PanelEventTypes.MAKE_GLOBAL || panelEvent.type === PanelEventTypes.REMOVE_GLOBAL) {
+            const node = panelEvent.data?.node;
+            const action = panelEvent.type === PanelEventTypes.MAKE_GLOBAL ? ToolbarAction.MakeGlobal : ToolbarAction.RemoveGlobal;
+            if (node)
+                this.onToolbarAction({ action, entry: { node }, position: panelEvent.data?.position });
+            return;
+        }
+        if (panelEvent.type === PanelEventTypes.GLOBAL_POSITION) {
+            const node = panelEvent.data?.node;
+            if (!node?.isGlobal || !this.globalElements.includes(node))
+                return;
+            node.globalPosition = panelEvent.data?.position === 'after' ? 'after' : 'before';
             this.globalElementsChange.emit([...this.globalElements]);
-            this.cdr.markForCheck();
-            this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
+            this.reselectMoved(node);
             return;
         }
         // A panel rewrote a subtree in place (a Card's Parts / Layout / Link): re-render it, re-register