@vectoriox/iox-builder 1.7.3 → 1.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/types/vectoriox-iox-builder.d.ts

@@ -740,6 +740,77 @@ declare class DragEngineService {
     static ɵprov: i0.ɵɵInjectableDeclaration<DragEngineService>;
 }
 
+/**
+ * StyleRegistryService — manages a single <style> tag for the builder canvas.
+ *
+ * Each builder component gets two CSS classes:
+ *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
+ *                     (display, flex, background, border, padding, etc.)
+ *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
+ *                     properties that participate in the PARENT flow (margin,
+ *                     align-self, flex-grow/shrink/basis, order).
+ *
+ * This split is necessary because margin on an inner wrapper only adds internal
+ * space — it does not push sibling elements. Applying margin to the host element
+ * (which IS the flex/block child in the parent container) makes it work correctly.
+ *
+ * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
+ * and compiled to `.iox-node-{id}:hover { … }` selectors.
+ *
+ * Design token variables are stored under the reserved key `__tokens__` and
+ * compiled to a `:root { … }` block prepended to all other rules.
+ *
+ * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
+ */
+declare class StyleRegistryService {
+    readonly changes$: Subject<void>;
+    private rules;
+    private styleEl;
+    /**
+     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
+     * affect how the element participates in its PARENT layout (flex/block flow).
+     * Everything else goes to the INNER element (.iox-node-{id}).
+     *
+     * Exception — out-of-flow positioning (position:fixed/absolute):
+     * When position is fixed or absolute, width is redirected to the inner element
+     * (the positioned one) and a default width:100% is added if none is set, so the
+     * element stays visible. top/right/bottom/left/zIndex are always inner because
+     * they are co-ordinates of the positioned element, not the flow wrapper.
+     * position itself goes to inner with `!important` to beat component-scoped CSS.
+     */
+    private static readonly OUTER_PROPS;
+    /** Properties that need !important on the inner element to beat Angular's scoped-CSS specificity boost. */
+    private static readonly IMPORTANT_PROPS;
+    init(): void;
+    /**
+     * Write or update the base styles for a node, or a pseudo-class state override.
+     *
+     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
+     * @param styles  Flat CSS property map (camelCase keys)
+     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus' | …).
+     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
+     *                State rules are NOT partitioned into inner/outer.
+     * @param relativeToId  Ancestor css id, required for RELATIONAL states
+     *                (e.g. 'parent-hover'). Compiles to
+     *                `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
+     */
+    upsert(nodeId: string, styles: Record<string, any>, state?: ElementState, relativeToId?: string): void;
+    /**
+     * Write the org-level design token variables as a `:root { … }` block.
+     * Token names should be CSS custom property names without the `--` prefix
+     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
+     * Pass an empty object to clear all tokens.
+     */
+    upsertTokens(tokens: Record<string, string>): void;
+    remove(nodeId: string): void;
+    destroy(): void;
+    private compile;
+    private _flushPending;
+    private flush;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StyleRegistryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<StyleRegistryService>;
+}
+
 /**
  * MoveableCanvasService — Phase 1 of the Moveable + Selecto migration
  * (see iox-ai-guidance/architecture/builder/moveable-migration.md).
@@ -757,6 +828,7 @@ declare class DragEngineService {
  */
 declare class MoveableCanvasService {
     private dragEngine;
+    private styleRegistry;
     private moveable;
     private container;
     private scaleGetter;
@@ -765,7 +837,9 @@ declare class MoveableCanvasService {
     private sourceId;
     /** Called after a successful reorder so the host can emit LAYOUT_CHANGED / refresh selection. */
     onReorder: (() => void) | null;
-    constructor(dragEngine: DragEngineService);
+    /** Called after a geometry commit (resize) so the host can emit LAYOUT_CHANGED (undo/save). */
+    onLayoutChanged: (() => void) | null;
+    constructor(dragEngine: DragEngineService, styleRegistry: StyleRegistryService);
     /** Wire the Moveable control box into `container`; `scaleGetter` returns the live canvas zoom. */
     init(container: HTMLElement, scaleGetter: () => number): void;
     /** Point Moveable at the selected element (skips inline-edit + preview-clone targets). */
@@ -776,6 +850,10 @@ declare class MoveableCanvasService {
     private ensureMoveable;
     private destroyMoveable;
     private commitDrag;
+    private commitResize;
+    /** Write geometry changes into the node's styleTraits (the serialized source of truth) and the
+     *  central stylesheet, so the style panel, save (self-describing), and SSR engine all agree. */
+    private applyStyle;
     /** Final pointer position from the Moveable end event (client/viewport px). */
     private lastPointer;
     /** Walk up from an element to the nearest registered dropzone id (el.id is stamped by DragEngine). */
@@ -1167,77 +1245,6 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     static ɵcmp: i0.ɵɵComponentDeclaration<BuilderComponent, "app-builder", never, { "layout": { "alias": "layout"; "required": false; }; "dataSources": { "alias": "dataSources"; "required": false; }; "orgId": { "alias": "orgId"; "required": false; }; "routeParams": { "alias": "routeParams"; "required": false; }; "pageName": { "alias": "pageName"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; "pageSettings": { "alias": "pageSettings"; "required": false; }; "globalElements": { "alias": "globalElements"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "moveableMode": { "alias": "moveableMode"; "required": false; }; }, { "save": "save"; "undo": "undo"; "redo": "redo"; "back": "back"; "preview": "preview"; "publishToggle": "publishToggle"; "pageSettingsChange": "pageSettingsChange"; "applyAnimationToAll": "applyAnimationToAll"; "saveBlock": "saveBlock"; "globalElementsChange": "globalElementsChange"; }, never, ["[builderComponents]", "[builderTokens]", "[builderPanel]"], false, never>;
 }
 
-/**
- * StyleRegistryService — manages a single <style> tag for the builder canvas.
- *
- * Each builder component gets two CSS classes:
- *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
- *                     (display, flex, background, border, padding, etc.)
- *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
- *                     properties that participate in the PARENT flow (margin,
- *                     align-self, flex-grow/shrink/basis, order).
- *
- * This split is necessary because margin on an inner wrapper only adds internal
- * space — it does not push sibling elements. Applying margin to the host element
- * (which IS the flex/block child in the parent container) makes it work correctly.
- *
- * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
- * and compiled to `.iox-node-{id}:hover { … }` selectors.
- *
- * Design token variables are stored under the reserved key `__tokens__` and
- * compiled to a `:root { … }` block prepended to all other rules.
- *
- * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
- */
-declare class StyleRegistryService {
-    readonly changes$: Subject<void>;
-    private rules;
-    private styleEl;
-    /**
-     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
-     * affect how the element participates in its PARENT layout (flex/block flow).
-     * Everything else goes to the INNER element (.iox-node-{id}).
-     *
-     * Exception — out-of-flow positioning (position:fixed/absolute):
-     * When position is fixed or absolute, width is redirected to the inner element
-     * (the positioned one) and a default width:100% is added if none is set, so the
-     * element stays visible. top/right/bottom/left/zIndex are always inner because
-     * they are co-ordinates of the positioned element, not the flow wrapper.
-     * position itself goes to inner with `!important` to beat component-scoped CSS.
-     */
-    private static readonly OUTER_PROPS;
-    /** Properties that need !important on the inner element to beat Angular's scoped-CSS specificity boost. */
-    private static readonly IMPORTANT_PROPS;
-    init(): void;
-    /**
-     * Write or update the base styles for a node, or a pseudo-class state override.
-     *
-     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
-     * @param styles  Flat CSS property map (camelCase keys)
-     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus' | …).
-     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
-     *                State rules are NOT partitioned into inner/outer.
-     * @param relativeToId  Ancestor css id, required for RELATIONAL states
-     *                (e.g. 'parent-hover'). Compiles to
-     *                `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
-     */
-    upsert(nodeId: string, styles: Record<string, any>, state?: ElementState, relativeToId?: string): void;
-    /**
-     * Write the org-level design token variables as a `:root { … }` block.
-     * Token names should be CSS custom property names without the `--` prefix
-     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
-     * Pass an empty object to clear all tokens.
-     */
-    upsertTokens(tokens: Record<string, string>): void;
-    remove(nodeId: string): void;
-    destroy(): void;
-    private compile;
-    private _flushPending;
-    private flush;
-    static ɵfac: i0.ɵɵFactoryDeclaration<StyleRegistryService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<StyleRegistryService>;
-}
-
 /**
  * RenderDirective — applied to <ng-container> to dynamically instantiate a
  * builder component with zero wrapper elements in the DOM.
@@ -1520,7 +1527,16 @@ declare class SectionComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<SectionComponent, "section[iox-section]", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
 }
 
+/**
+ * Directive-host Container (Phase 2 of the Moveable migration = task 9c). The real tag (div/section/
+ * ul/ol/li/…, chosen from the `htmlTag` trait by RenderDirective via `hostElement`) IS the host — no
+ * `<app-builder-container>` wrapper, no separate `.container-root` — matching the SSR engine. The
+ * dropzone is registered on the host itself; the `.container-child` draggable wrappers are UNCHANGED,
+ * so interact.js (flag-off) keeps working. Also backs the List (`ul`/`ol`) and ListItem (`li`) types.
+ * See moveable-migration.md.
+ */
 declare class BuilderContainerComponent implements OnInit, OnDestroy {
+    private elRef;
     private dragEngine;
     private cdr;
     children: ComponentNode[];
@@ -1535,13 +1551,13 @@ declare class BuilderContainerComponent implements OnInit, OnDestroy {
     childClick: EventEmitter<any>;
     childMouseEnter: EventEmitter<any>;
     childMouseLeave: EventEmitter<void>;
-    constructor(dragEngine: DragEngineService, cdr: ChangeDetectorRef);
+    constructor(elRef: ElementRef<HTMLElement>, dragEngine: DragEngineService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     get listOrientation(): 'horizontal' | 'vertical';
     onDrop(event: IoxDropEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderContainerComponent, "app-builder-container", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; "htmlTag": { "alias": "htmlTag"; "required": false; }; "start": { "alias": "start"; "required": false; }; "reversed": { "alias": "reversed"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderContainerComponent, "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; "htmlTag": { "alias": "htmlTag"; "required": false; }; "start": { "alias": "start"; "required": false; }; "reversed": { "alias": "reversed"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
 }
 
 declare class BuilderLinkedContainerComponent implements OnInit, OnDestroy {