@vectoriox/iox-builder 5.1.1 → 5.3.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, emptyImageSrc, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, syncNodeDesignClasses, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -1558,8 +1558,10 @@ function buildLayoutPreset(def, createNode) {
 /**
  * True for nodes rendered on the EDITING canvas — provided by `BuilderComponent` at component level,
  * so it reaches every `[ioxRender]` under `<app-builder>` and nothing else (Preview renders the same
- * directive outside it). Not `IS_PREVIEW`: the admin provides that one from an eagerly imported module,
- * so it reads true everywhere, the canvas included.
+ * directive outside it). It answers "is this the editor?" — the canvas-only "Add image" label hangs off
+ * it. `IS_PREVIEW` answers the other question, "is this a preview/live render?" (links navigate,
+ * sliders run live), and is provided ONLY by Preview (component level) and the engine; neither token
+ * implies the other — a design sampler, for one, is neither.
  */
 const IOX_BUILDER_CANVAS = new InjectionToken('IOX_BUILDER_CANVAS');
 /** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
@@ -1602,6 +1604,14 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.preview': 'Preview',
     'builder.chrome.addImage': 'Add image',
 });
+const CANVAS_EMPTY_IMAGE_LABEL_KEY = 'builder.chrome.addImage';
+const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_KEY];
+/**
+ * Marks an element the builder draws on the canvas that the live site never has — drop placeholders,
+ * repeat badges, the empty slider hint. A page thumbnail is a picture of the SITE, so its capture
+ * leaves every marked element out.
+ */
+const EDITOR_CHROME_ATTRIBUTE = 'data-iox-chrome';
 
 class ComponentRegistryService {
     constructor() {
@@ -1883,6 +1893,8 @@ const BUILDER_CANVAS_CONTAINER = 'iox-canvas';
  * registry — the canvas frame, the global-elements overlay, preview, specimens — wears this class.
  */
 const BUILDER_TOKEN_SCOPE_CLASS = 'iox-token-scope';
+/** Marks the Google font `<link>`s the canvas adds to `<head>` (one per family, design-system DS4). */
+const BUILDER_FONT_LINK_ATTR = 'data-iox-font';
 /**
  * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
@@ -1923,6 +1935,8 @@ class StyleRegistryService {
          *  positioning, an Icon's line-height) from EVERY rule of that node, whoever upserts it. */
         this.nodeTypes = new Map();
         this.tokenCss = { base: '', dark: '' };
+        this.tokenRows = [];
+        this.tokenMode = 'auto';
         this.styleEl = null;
         this._flushPending = false;
     }
@@ -2179,10 +2193,21 @@ class StyleRegistryService {
      * block, LAST. It used to be a hand-written copy that emitted variables and dark only.
      * Pass the full row set every time (an empty list clears).
      */
-    upsertTokens(tokens) {
-        this.tokenCss = compileTokenCssBlocks(tokens, { scope: `.${BUILDER_TOKEN_SCOPE_CLASS}` });
+    upsertTokens(tokens, opts = {}) {
+        if (opts.mode)
+            this.tokenMode = opts.mode;
+        this.tokenRows = [...(tokens ?? [])];
+        this.tokenCss = compileTokenCssBlocks(tokens, {
+            scope: `.${BUILDER_TOKEN_SCOPE_CLASS}`,
+            mode: this.tokenMode,
+            // A missing org row must compute UNSET on the canvas, as it does on the live site — never
+            // the admin's same-named :root chrome token inherited from above the frame (DS4).
+            isolate: true,
+        });
         this.flush();
     }
+    /** The colour mode the canvas compiles in. */
+    get mode() { return this.tokenMode; }
     remove(nodeId) {
         if (!nodeId)
             return;
@@ -2210,11 +2235,46 @@ class StyleRegistryService {
         this.stateScopes.clear();
         this.nodeTypes.clear();
         this.tokenCss = { base: '', dark: '' };
+        this.tokenRows = [];
         if (this.styleEl) {
             this.styleEl.remove();
             this.styleEl = null;
         }
     }
+    /**
+     * The Google families the org's font tokens name — the SAME catalog and URL the SSR engine links
+     * (design-core `fontsForTokens` / `googleFontHref`), one `<link>` per family. They only declare
+     * @font-face, and only the canvas (`.iox-token-scope`) reads the font tokens, so the admin keeps
+     * Poppins. Links stay for the session: a trial that switches back costs no refetch.
+     */
+    loadTokenFonts(nodeCss) {
+        const head = this.styleEl?.ownerDocument?.head;
+        if (!head)
+            return;
+        const ids = fontsForTokens(this.tokenRows, { usedCss: nodeCss });
+        if (!ids.length)
+            return;
+        const doc = head.ownerDocument;
+        if (!head.querySelector(`link[rel="preconnect"][${BUILDER_FONT_LINK_ATTR}]`)) {
+            const pre = doc.createElement('link');
+            pre.rel = 'preconnect';
+            pre.href = GOOGLE_FONTS_FILE_ORIGIN;
+            pre.setAttribute('crossorigin', '');
+            pre.setAttribute(BUILDER_FONT_LINK_ATTR, '');
+            head.appendChild(pre);
+        }
+        const present = new Set(Array.from(head.querySelectorAll(`link[rel="stylesheet"][${BUILDER_FONT_LINK_ATTR}]`))
+            .map(l => l.getAttribute(BUILDER_FONT_LINK_ATTR)));
+        for (const id of ids) {
+            if (present.has(id))
+                continue;
+            const link = doc.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = googleFontHref(id);
+            link.setAttribute(BUILDER_FONT_LINK_ATTR, id);
+            head.appendChild(link);
+        }
+    }
     compile(className, styles, context = DeclarationContext.Base) {
         // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
         // the shared style-compiler so the SSR engine produces byte-identical output.
@@ -2242,7 +2302,9 @@ class StyleRegistryService {
                 ? wrapInBreakpointQuery(BREAKPOINTS[i].id, Array.from(bucket.values()).join('\n'), BreakpointQueryKind.Container, BUILDER_CANVAS_CONTAINER)
                 : '');
             // …and the token dark half LAST (the appended-last contract the engine also keeps).
-            this.styleEl.textContent = [this.tokenCss.base, ...rest, ...breakpoints, this.tokenCss.dark].filter(Boolean).join('\n');
+            const nodeCss = [...rest, ...breakpoints].filter(Boolean).join('\n');
+            this.styleEl.textContent = [this.tokenCss.base, nodeCss, this.tokenCss.dark].filter(Boolean).join('\n');
+            this.loadTokenFonts(nodeCss);
             this.changes$.next();
         });
     }
@@ -4559,6 +4621,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** The input a component declares to receive its empty-image placeholder (the Image). */
+const EMPTY_SRC_INPUT = 'emptySrc';
+/** The editing canvas's "Add image" label, through the host's i18n. */
+function canvasEmptyImageLabel(labels) {
+    return labels(CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_EMPTY_IMAGE_LABEL_EN);
+}
+/**
+ * Push a node's empty-image placeholder (design-system DS3) to its rendered component — a no-op for
+ * a component that declares no `emptySrc`. The placeholder depends on the MARKER only, never on the
+ * source, so it is set once at render and again whenever the node's element style changes.
+ */
+function syncEmptyImagePlaceholder(ref, node, emptyLabel) {
+    if (!ref || !declaredInputNames(ref.componentType).has(EMPTY_SRC_INPUT))
+        return;
+    ref.setInput(EMPTY_SRC_INPUT, emptyImagePlaceholder(node, emptyLabel));
+}
+/**
+ * Everything a node's element style / colour scheme decides on its rendered host, in ONE call: the
+ * design classes (marker + scheme) and the empty-image placeholder. Every place that switches or
+ * resets a node's style on the canvas calls this, so an adopted Image gains its placeholder at once
+ * instead of after a reload (DS3 D2).
+ */
+function syncNodeDesign(ref, node, emptyLabel) {
+    syncNodeDesignClasses(ref?.location?.nativeElement ?? null, node);
+    syncEmptyImagePlaceholder(ref, node, emptyLabel);
+}
+
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
 /**
@@ -4771,14 +4860,11 @@ class RenderDirective {
         // safeSetInput for every component that does not declare it.
         if (node.responsive)
             safeSetInput(componentRef, 'responsive', node.responsive);
-        // Empty images (DS3): a MARKED Image with no source shows the shared placeholder — the
-        // "Add image" label on the editing canvas, the bare blank anywhere else (Preview), which is
-        // what the live site shows. An unmarked Image gets null and renders exactly as before.
-        if (node.type === 'Image') {
-            const src = node.traits?.find(t => t.name === 'src')?.default;
-            const label = this.onCanvas ? this.labels('builder.chrome.addImage', 'Add image') : null;
-            safeSetInput(componentRef, 'emptySrc', emptyImageSrc(node, src, label));
-        }
+        // Empty images (DS3): a MARKED Image shows the shared placeholder whenever its source is empty —
+        // the "Add image" label on the editing canvas, the bare blank anywhere else (Preview), which is
+        // what the live site shows. An unmarked Image gets null and renders exactly as before. Set from
+        // the marker alone, so a source cleared later (Bindings) shows it with no re-render.
+        syncEmptyImagePlaceholder(componentRef, node, this.onCanvas ? canvasEmptyImageLabel(this.labels) : null);
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
         if (node.styleTraits?.length) {
@@ -7619,7 +7705,7 @@ class SectionComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SectionComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SectionComponent, isStandalone: false, selector: "section[iox-section]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'section-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')" } }, ngImport: i0, template: `
-        <div *ngIf="!children.length" class="section-placeholder">
+        <div *ngIf="!children.length" class="section-placeholder" data-iox-chrome>
             <i class="ph-thin ph-rows"></i>
             <span>Drop components here</span>
         </div>
@@ -7637,7 +7723,7 @@ class SectionComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section[iox-section]', template: `
-        <div *ngIf="!children.length" class="section-placeholder">
+        <div *ngIf="!children.length" class="section-placeholder" data-iox-chrome>
             <i class="ph-thin ph-rows"></i>
             <span>Drop components here</span>
         </div>
@@ -7725,7 +7811,7 @@ class BuilderContainerComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderContainerComponent, isStandalone: false, selector: "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],form[iox-container]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed", formClass: "formClass", formState: "formState" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '') + (formClass ? ' ' + formClass : '')", "attr.data-iox-state": "formClass === \"iox-form\" ? formState : null", "attr.start": "htmlTag === 'ol' && start !== 1 ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, ngImport: i0, template: `
         <!-- Empty-container slot (B2). pointer-events:none, so a click falls through and SELECTS
              this container — and the components panel then inserts INSIDE it. -->
-        <div *ngIf="!children.length" class="container-placeholder">
+        <div *ngIf="!children.length" class="container-placeholder" data-iox-chrome>
             <i class="ph-thin ph-plus"></i>
             <span>Click to select, then add an element</span>
         </div>
@@ -7748,7 +7834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ selector: '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],form[iox-container]', template: `
         <!-- Empty-container slot (B2). pointer-events:none, so a click falls through and SELECTS
              this container — and the components panel then inserts INSIDE it. -->
-        <div *ngIf="!children.length" class="container-placeholder">
+        <div *ngIf="!children.length" class="container-placeholder" data-iox-chrome>
             <i class="ph-thin ph-plus"></i>
             <span>Click to select, then add an element</span>
         </div>
@@ -7832,6 +7918,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/** `click` covers plain and modified clicks; a middle click opens a tab through `auxclick` alone. */
+const NAVIGATING_CLICKS = ['click', 'auxclick'];
 class BuilderLinkedContainerComponent {
     constructor(dragEngine, cdr, elRef, isPreview) {
         this.dragEngine = dragEngine;
@@ -7853,12 +7941,14 @@ class BuilderLinkedContainerComponent {
     }
     ngOnInit() {
         if (!this.isPreview) {
-            this.elRef.nativeElement.addEventListener('click', this.capturePreventDefault, true);
+            for (const type of NAVIGATING_CLICKS)
+                this.elRef.nativeElement.addEventListener(type, this.capturePreventDefault, true);
         }
     }
     ngOnDestroy() {
         if (!this.isPreview) {
-            this.elRef.nativeElement.removeEventListener('click', this.capturePreventDefault, true);
+            for (const type of NAVIGATING_CLICKS)
+                this.elRef.nativeElement.removeEventListener(type, this.capturePreventDefault, true);
         }
     }
     get resolvedHref() {
@@ -7889,7 +7979,7 @@ class BuilderLinkedContainerComponent {
            [ioxDropzoneData]="children"
            (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="linked-container-placeholder">
+            <div *ngIf="!children.length" class="linked-container-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-link"></i>
                 <span>Drop components here</span>
             </div>
@@ -7918,7 +8008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
            [ioxDropzoneData]="children"
            (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="linked-container-placeholder">
+            <div *ngIf="!children.length" class="linked-container-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-link"></i>
                 <span>Drop components here</span>
             </div>
@@ -8318,7 +8408,7 @@ class BuilderRepeaterComponent {
         <div class="repeater-wrapper" [class.has-children]="children.length > 0">
 
             <!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
-            <div *ngIf="children.length > 0" class="repeater-badge">
+            <div *ngIf="children.length > 0" class="repeater-badge" data-iox-chrome>
                 <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
             </div>
 
@@ -8332,10 +8422,10 @@ class BuilderRepeaterComponent {
 
                 <!-- EMPTY STATE: badge + placeholder inside root -->
                 <ng-container *ngIf="!children.length">
-                    <div class="repeater-badge">
+                    <div class="repeater-badge" data-iox-chrome>
                         <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
                     </div>
-                    <div class="repeater-placeholder">
+                    <div class="repeater-placeholder" data-iox-chrome>
                         <i class="ph-thin ph-rows"></i>
                         <span>Drop a component here as the item template</span>
                     </div>
@@ -8400,7 +8490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         <div class="repeater-wrapper" [class.has-children]="children.length > 0">
 
             <!-- HAS-CHILDREN: badge outside root, absolute over wrapper -->
-            <div *ngIf="children.length > 0" class="repeater-badge">
+            <div *ngIf="children.length > 0" class="repeater-badge" data-iox-chrome>
                 <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
             </div>
 
@@ -8414,10 +8504,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
                 <!-- EMPTY STATE: badge + placeholder inside root -->
                 <ng-container *ngIf="!children.length">
-                    <div class="repeater-badge">
+                    <div class="repeater-badge" data-iox-chrome>
                         <ng-container *ngTemplateOutlet="badgeContent"></ng-container>
                     </div>
-                    <div class="repeater-placeholder">
+                    <div class="repeater-placeholder" data-iox-chrome>
                         <i class="ph-thin ph-rows"></i>
                         <span>Drop a component here as the item template</span>
                     </div>
@@ -8523,7 +8613,7 @@ class BuilderButtonBlockComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonBlockComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderButtonBlockComponent, isStandalone: false, selector: "button[iox-button-block],a[iox-button-block]", inputs: { children: "children", style: "style", tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'button-block-root iox-node-' + nodeId", "attr.href": "tag === 'a' ? (href || null) : null", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, ngImport: i0, template: `
-        <span *ngIf="!children.length" class="button-block-placeholder">Button</span>
+        <span *ngIf="!children.length" class="button-block-placeholder" data-iox-chrome>Button</span>
 
         <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
              on each child's host (via ioxDragSourceId), matching the SSR engine. -->
@@ -8539,7 +8629,7 @@ class BuilderButtonBlockComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[iox-button-block],a[iox-button-block]', template: `
-        <span *ngIf="!children.length" class="button-block-placeholder">Button</span>
+        <span *ngIf="!children.length" class="button-block-placeholder" data-iox-chrome>Button</span>
 
         <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
              on each child's host (via ioxDragSourceId), matching the SSR engine. -->
@@ -8690,7 +8780,7 @@ class BuilderDialogComponent {
                     <i class="ph-thin ph-x"></i>
                 </button>
 
-                <div *ngIf="!children.length" class="dialog-placeholder">
+                <div *ngIf="!children.length" class="dialog-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-browser"></i>
                     <span>Drop components here</span>
                 </div>
@@ -8704,7 +8794,7 @@ class BuilderDialogComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, decorators: [{
             type: Component,
@@ -8726,7 +8816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     <i class="ph-thin ph-x"></i>
                 </button>
 
-                <div *ngIf="!children.length" class="dialog-placeholder">
+                <div *ngIf="!children.length" class="dialog-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-browser"></i>
                     <span>Drop components here</span>
                 </div>
@@ -8740,7 +8830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
+    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], nodeId: [{
@@ -9166,7 +9256,7 @@ class SliderContainerComponent {
              (ioxDrop)="onDrop($event)">
 
             <!-- Repeat badge: hover-only, anchored top-left of shell -->
-            <div *ngIf="source" class="slider-repeat-badge">
+            <div *ngIf="source" class="slider-repeat-badge" data-iox-chrome>
                 <i class="ph-thin ph-repeat"></i>
                 <span>{{ source }}</span>
                 <span *ngIf="items.length" class="slider-repeat-badge-count">&times; {{ items.length }}</span>
@@ -9224,7 +9314,7 @@ class SliderContainerComponent {
 
                 </div>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder">
+                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
@@ -9317,7 +9407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
              (ioxDrop)="onDrop($event)">
 
             <!-- Repeat badge: hover-only, anchored top-left of shell -->
-            <div *ngIf="source" class="slider-repeat-badge">
+            <div *ngIf="source" class="slider-repeat-badge" data-iox-chrome>
                 <i class="ph-thin ph-repeat"></i>
                 <span>{{ source }}</span>
                 <span *ngIf="items.length" class="slider-repeat-badge-count">&times; {{ items.length }}</span>
@@ -9375,7 +9465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
                 </div>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder">
+                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
@@ -9561,24 +9651,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }] } });
 
 class SliderSlideComponent {
-    constructor(dragEngine, cdr, isPreview) {
+    constructor(dragEngine, cdr) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
-        this.isPreview = isPreview;
         this.children = [];
         this.nodeId = '';
         this.dropListId = '';
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
-        this.isPreview = !!isPreview;
     }
     ngOnInit() { }
     ngOnDestroy() { }
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SliderSlideComponent, isStandalone: false, selector: "app-slider-slide", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <!-- The .swiper-slide wrapper (with the iox-outer-* class) is provided by SliderContainer —
              Swiper needs it as a direct child of .swiper-wrapper — and the SLIDE'S size lands there
@@ -9593,7 +9681,7 @@ class SliderSlideComponent {
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="slide-placeholder">
+            <div *ngIf="!children.length" class="slide-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-image"></i>
                 <span>Drop components here</span>
             </div>
@@ -9629,7 +9717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
              [ioxDropzoneData]="children"
              (ioxDrop)="onDrop($event)">
 
-            <div *ngIf="!children.length" class="slide-placeholder">
+            <div *ngIf="!children.length" class="slide-placeholder" data-iox-chrome>
                 <i class="ph-thin ph-image"></i>
                 <span>Drop components here</span>
             </div>
@@ -9648,12 +9736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             </div>
         </div>
     `, standalone: false, styles: [":where(.slide-edit-block){position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;background-color:var(--p-surface-300)}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
-        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [IS_PREVIEW]
-                }] }], propDecorators: { children: [{
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], nodeId: [{
                 type: Input
@@ -11404,5 +11487,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, textNode, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map