@vectoriox/iox-builder 1.7.4 → 1.7.6

package/package.json

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

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

@@ -538,9 +538,12 @@ declare class OverlayService {
     setIntersectionRoot(el: HTMLElement | null): void;
     getIntersectionRoot(): HTMLElement | null;
     /**
-     * Resolve the inner styled element.
-     * Builder components apply [ngStyle] on their first child element,
-     * so computed styles (padding, margin) live there — not on the host.
+     * Resolve the styled element (the one carrying `.iox-node-{id}` — where padding/margin/size live).
+     * Directive-host components (Image/Heading/Container/Section/…) put `iox-node-{id}` on the HOST
+     * itself, so the host IS the styled element. Legacy wrapper components (Card/Repeater/Slider) put
+     * it on the first child. Prefer the host when it's the styled element; fall back to the first
+     * child otherwise. (Before this, directive-host containers outlined their first child — e.g. a
+     * container's outline landed on the image inside it, desyncing from Moveable's resize handles.)
      */
     getStyledElement(host: HTMLElement): HTMLElement;
     registerNode(node: ComponentNode, element: HTMLElement, componentRef: ComponentRef<any>): void;
@@ -740,6 +743,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 +831,7 @@ declare class DragEngineService {
  */
 declare class MoveableCanvasService {
     private dragEngine;
+    private styleRegistry;
     private moveable;
     private container;
     private scaleGetter;
@@ -765,7 +840,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 +853,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 +1248,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.