@vectoriox/iox-builder 9.7.0 → 9.9.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -18,13 +18,13 @@ import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
 import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { structureRefusal, StructureEdit, isAccordionPart, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, AccordionRuntime, accordionBehaviour, closestAccordionItem, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, accordionHeadingLevel } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, structureRefusal, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, runCompositeItemAction, shouldScrollToItem, DisclosureRole, AccordionRuntime, accordionBehaviour, compositeScopeId, compositeRowKeys, compositeKindOfRole, closestAccordionItem, isCompositeRoot, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, CompositeKind, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger } from '@vectoriox/iox-ui/composite-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
+import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
 import Lenis from 'lenis';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
@@ -176,6 +176,10 @@ const IOX_BUILDER_LABELS = new InjectionToken('IOX_BUILDER_LABELS', {
     providedIn: 'root',
     factory: () => defaultBuilderLabels,
 });
+const IOX_CONTENT_TYPE_LABELS = new InjectionToken('IOX_CONTENT_TYPE_LABELS', {
+    providedIn: 'root',
+    factory: () => () => null,
+});
 /** Standalone behaviour: the English text the library ships with. */
 const defaultBuilderLabels = (_key, fallback) => fallback;
 /**
@@ -207,11 +211,14 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.compositeRole': 'Composite role',
     'builder.chrome.kindCard': 'Card',
     'builder.chrome.kindAccordion': 'Accordion',
+    'builder.chrome.kindDisclosure': 'Disclosure',
+    'builder.chrome.refuseLockedDisclosurePart': 'A disclosure keeps its toggle and its panel. Delete the whole disclosure instead.',
+    'builder.chrome.refuseLockedDisclosurePartMove': 'This part belongs to its disclosure — it can’t be moved out.',
     'builder.chrome.refuseLockedItemPart': 'An item keeps its header and its panel. Delete the whole item, or the accordion.',
     'builder.chrome.refuseLockedItemPartMove': 'This part belongs to its item — it can’t be moved out.',
     'builder.chrome.refuseLastItem': 'An accordion keeps at least one item. Delete the whole accordion instead.',
     'builder.chrome.addItem': 'Add item',
-    'builder.chrome.fromContent': 'From {alias} · {count} rows',
+    'builder.chrome.fromContent': 'From {source} · {count} rows',
     'builder.chrome.emptySource': 'No rows in “{alias}”.',
     'builder.chrome.emptySourceHint': 'The {type} content type has no published items that match this source’s filters. Add items in Content ▸ {type}, or change the source.',
     'builder.chrome.fromRow': 'row {row} — every row wears this part',
@@ -244,6 +251,20 @@ const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_K
  */
 const EDITOR_CHROME_ATTRIBUTE = 'data-iox-chrome';
 
+/** The content type a data source reads (`faqs`), or '' for a source that reads none (external, static). */
+function sourceContentType(ds) {
+    return ds?.request?.cms?.contentType || ds?.request?.shop?.contentType || '';
+}
+/**
+ * What the builder's chrome calls the list a source reads — the CONTENT TYPE's label ("From FAQ", board 3), as the
+ * host knows it (`IOX_CONTENT_TYPE_LABELS`), else the source's alias. ONE answer for the layer tree's
+ * "From FAQ · 3 rows", the Repeater's empty-source hint and the Items section's source options.
+ */
+function sourceTypeLabel(alias, ds, resolve) {
+    const type = sourceContentType(ds);
+    return (type && resolve(type)) || alias;
+}
+
 const freshId = () => Math.random().toString(36).substr(2, 9);
 /**
  * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
@@ -445,6 +466,10 @@ var InsertRefusal;
     InsertRefusal["LockedItemPart"] = "lockedItemPart";
     /** An accordion's LAST item (composite plan T11): it keeps at least one. */
     InsertRefusal["LastItem"] = "lastItem";
+    /** A disclosure's toggle or panel (CC2.1) moved out of it. */
+    InsertRefusal["LockedDisclosurePartMove"] = "lockedDisclosurePartMove";
+    /** A disclosure's toggle or panel (CC2.1) deleted on its own. */
+    InsertRefusal["LockedDisclosurePart"] = "lockedDisclosurePart";
 })(InsertRefusal || (InsertRefusal = {}));
 const FORM_STATE_BLOCK_TYPES = new Set(['FormSuccess', 'FormError']);
 /** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
@@ -457,7 +482,18 @@ const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
     [InsertRefusal.LockedItemPartMove]: 'builder.chrome.refuseLockedItemPartMove',
     [InsertRefusal.LockedItemPart]: 'builder.chrome.refuseLockedItemPart',
     [InsertRefusal.LastItem]: 'builder.chrome.refuseLastItem',
+    [InsertRefusal.LockedDisclosurePartMove]: 'builder.chrome.refuseLockedDisclosurePartMove',
+    [InsertRefusal.LockedDisclosurePart]: 'builder.chrome.refuseLockedDisclosurePart',
 });
+/** Which refusal says a locked part's move / delete, by the composite it belongs to (a card's is the default). */
+function lockedRefusal(node, edit) {
+    const move = edit === StructureEdit.Move;
+    if (isAccordionPart(node))
+        return move ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedItemPart;
+    if (isDisclosurePart(node))
+        return move ? InsertRefusal.LockedDisclosurePartMove : InsertRefusal.LockedDisclosurePart;
+    return move ? InsertRefusal.LockedPartMove : InsertRefusal.LockedPart;
+}
 /** The refusal in the host's language (the library's English when no host resolver is provided). */
 function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
     const key = INSERT_REFUSAL_LABEL_KEYS[reason];
@@ -484,7 +520,7 @@ function insertRefusal(node, ancestors) {
     if (formContentInHost(node, ancestors.some(isInteractiveHost)))
         return InsertRefusal.FormInInteractive;
     if (structureRefusal(node, StructureEdit.Move, ancestors))
-        return isAccordionPart(node) ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedPartMove;
+        return lockedRefusal(node, StructureEdit.Move);
     return null;
 }
 /** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
@@ -492,7 +528,7 @@ function insertRefusal(node, ancestors) {
  *  accordion keeps its last item. `siblings` = the list `node` sits in (where the caller has it). */
 function removalRefusal(node, siblings) {
     if (structureRefusal(node, StructureEdit.Delete))
-        return isAccordionPart(node) ? InsertRefusal.LockedItemPart : InsertRefusal.LockedPart;
+        return lockedRefusal(node, StructureEdit.Delete);
     if (node?.role === AccordionRole.Item && siblings && siblings.filter(s => s?.role === AccordionRole.Item).length <= 1)
         return InsertRefusal.LastItem;
     return null;
@@ -600,6 +636,8 @@ const INVERSE_ACTION = {
     clearContext: 'setContext',
     openDialog: 'closeDialog',
     closeDialog: 'openDialog',
+    openItem: 'closeItem',
+    closeItem: 'openItem',
 };
 const TRIGGER_OPTIONS = [
     { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
@@ -3679,8 +3717,11 @@ class InteractionEngineService {
                 this.runActions(node, ix.actions, element);
             }
         };
-        element.addEventListener('click', handler);
-        return () => element.removeEventListener('click', handler);
+        // CAPTURE, like the composite runtime: on the canvas every part's own listener stops the click to select
+        // that part, so a click on a button's LABEL never bubbled to the button's click interaction — the live
+        // site runs it (CC2.1: "Open an item" on a ButtonBlock did nothing on the canvas).
+        element.addEventListener('click', handler, true);
+        return () => element.removeEventListener('click', handler, true);
     }
     attachHover(node, ix, element) {
         const enterHandler = () => this.runActions(node, ix.actions, element);
@@ -3724,6 +3765,13 @@ class InteractionEngineService {
                 this.executeDialogAction(action);
                 continue;
             }
+            // Item actions (CC2.1 — composite T14): the canvas RUNS them on the target item's own runtime — the
+            // one the live site runs — and brings an item that opened out of view into it.
+            const itemAction = itemActionOf(action.type);
+            if (itemAction) {
+                this.executeItemAction(node, action, itemAction, selfEl);
+                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
@@ -3819,6 +3867,14 @@ class InteractionEngineService {
             }
         }
     }
+    executeItemAction(node, action, itemAction, selfEl) {
+        const target = this.resolveTarget(node, action, selfEl);
+        const open = runCompositeItemAction(target, itemAction);
+        if (!open || !target)
+            return;
+        if (shouldScrollToItem(target.getBoundingClientRect().top, window.innerHeight))
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
     executeConsentAction(action) {
         if (action.type === 'openConsentPreferences') {
             const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
@@ -4006,10 +4062,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * screen until something opens them, so on the canvas they show only while selected into or switched
  * open ("Showing on canvas"). The layer tree marks them with the eye-slash glyph. A Dialog (the mobile
  * menu's drawer, a consent banner) by its type; an Accordion's PANEL by its role (CC2 — closed until its
- * item opens). An inactive tab joins in CC4.
+ * item opens); a Disclosure's panel and its "Read less" word (CC2.1 — shown only while it is open). An inactive
+ * tab joins in CC4.
  */
 const HIDDEN_AT_REST_TYPES = ['Dialog'];
-const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel];
+const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel, DisclosureRole.Panel, DisclosureRole.Less];
 function isHiddenAtRest(node) {
     return (!!node?.type && HIDDEN_AT_REST_TYPES.includes(node.type)) || (!!node?.role && HIDDEN_AT_REST_ROLES.includes(node.role));
 }
@@ -4145,10 +4202,17 @@ function sameSet(a, b) {
     return a.size === b.size && [...a].every(id => b.has(id));
 }
 
+/** The node whose "Showing on canvas" choice a rendered root follows: itself, or — a preview row's copy — its
+ *  template (a copy shares its template's style id). */
+function designIdOf(node) {
+    return node.__previewClone ? (node.styleId ?? node.id) : node.id;
+}
 /**
- * The composites' runtime ON THE CANVAS (CC2) — the canvas is a live runtime, so an Accordion opens and
- * closes on the canvas exactly as on the site: the SAME composite-core `AccordionRuntime` the live engine
- * attaches. On top of the live state it shows what the author is designing (R2, CC1's design state):
+ * The composites' runtime ON THE CANVAS (CC2) — the canvas is a live runtime, so an Accordion (and a Disclosure,
+ * CC2.1) opens and closes on the canvas exactly as on the site: the SAME composite-core `AccordionRuntime` the live
+ * engine attaches. A composite repeated in a Repeater's preview rows runs one per row, each with its own ARIA ids
+ * (its row folded into the scope id — vectoriox/iox-ui#20). On top of the live state it shows what the author is
+ * designing (R2, CC1's design state):
  * - selecting anything inside a CLOSED panel (canvas, tree, crumb, an Items row, SELECT_NODE) opens its item
  *   while it is selected, and deselecting closes it again;
  * - "Showing on canvas ▸ All open" opens every item; "As saved" goes back to the saved default.
@@ -4166,18 +4230,21 @@ class CompositeCanvasService {
         for (const id of [...this.attached.keys()])
             this.detach(id);
     }
-    /** An accordion root rendered on the canvas: run it. `element` is the root's rendered element. */
+    /** A composite root rendered on the canvas (the template, or a preview row's copy): run it. `element` is the
+     *  root's rendered element. Its ARIA ids are scoped by the preview rows it sits in. */
     attach(node, element) {
         if (!node.id)
             return;
         this.detach(node.id);
+        const cssId = node.styleId ?? node.id;
         const runtime = this.zone.runOutsideAngular(() => new AccordionRuntime(element, {
-            rootId: node.styleId ?? node.id,
+            kind: compositeKindOfRole(node.role) ?? undefined,
+            rootId: () => compositeScopeId(cssId, compositeRowKeys(element)),
             behaviour: accordionBehaviour(node),
             observe: true,
             forced: () => this.forcedFor(node, element),
         }));
-        this.attached.set(node.id, { node, runtime, shown: this.designState?.shownState(node.id) ?? CanvasShowState.Closed });
+        this.attached.set(node.id, { node, runtime, shown: this.designState?.shownState(designIdOf(node)) ?? CanvasShowState.Closed });
     }
     detach(nodeId) {
         if (!nodeId)
@@ -4195,8 +4262,8 @@ class CompositeCanvasService {
         return (nodeId && this.attached.get(nodeId)?.runtime) || null;
     }
     applyDesignState() {
-        for (const [id, entry] of this.attached) {
-            const shown = this.designState?.shownState(id) ?? CanvasShowState.Closed;
+        for (const entry of this.attached.values()) {
+            const shown = this.designState?.shownState(designIdOf(entry.node)) ?? CanvasShowState.Closed;
             // Back to "As saved": the saved default, whatever the author clicked open meanwhile (board 3).
             if (shown !== entry.shown && shown === CanvasShowState.Closed)
                 entry.runtime.resetLive();
@@ -4206,7 +4273,8 @@ class CompositeCanvasService {
         }
     }
     /** The keys the design state holds open: every item ("All open"), or the items whose hidden part the
-     *  selection sits in. A preview row shares its template's classes, so the template (row 1) answers. */
+     *  selection sits in. A preview row shares its template's classes, so the template (row 1) answers — and a
+     *  composite copied into a preview row follows its template's choice. */
     forcedFor(node, root) {
         const forced = new Set();
         const state = this.designState;
@@ -4214,7 +4282,7 @@ class CompositeCanvasService {
             return forced;
         const runtime = this.attached.get(node.id)?.runtime;
         const items = runtime?.items() ?? [];
-        if (state.shownState(node.id) === CanvasShowState.Open) {
+        if (state.shownState(designIdOf(node)) === CanvasShowState.Open) {
             for (const item of items)
                 forced.add(runtime.keyOf(item, items));
             return forced;
@@ -4735,8 +4803,10 @@ class RenderDirective {
                 this.overlayService.triggerContextMenu(event.clientX, event.clientY);
             });
         }
-        // A composite root runs its behaviour on the canvas — the live site's runtime (CC2).
-        if (nativeEl && !isPreviewClone && node.id && isAccordionRoot(node) && this.compositeCanvas) {
+        // A composite root runs its behaviour on the canvas — the live site's runtime (CC2; the Disclosure, CC2.1).
+        // A preview row's copy runs too, scoped by its row (vectoriox/iox-ui#20): its ids are its own and it shows
+        // the saved default, as every row does on the live site.
+        if (nativeEl && node.id && isCompositeRoot(node) && this.compositeCanvas) {
             this.compositeCanvas.attach(node, nativeEl);
             this.compositeRootId = node.id;
         }
@@ -4859,6 +4929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
 const EMPTY_SOURCE_KEY = 'builder.chrome.emptySource';
 const EMPTY_SOURCE_HINT_KEY = 'builder.chrome.emptySourceHint';
+const NO_TYPE_LABELS = () => null;
 class BuilderRepeaterComponent {
     get children() { return this._children; }
     /** RenderDirective sets `source` (→ fetchData) BEFORE `children`. With an async source the response
@@ -4880,8 +4951,9 @@ class BuilderRepeaterComponent {
     get emptySourceTitle() {
         return this.label(EMPTY_SOURCE_KEY).replace('{alias}', this._source);
     }
+    /** "The FAQ content type has no published items…" — the type's LABEL (board 4), else the alias. */
     get emptySourceHint() {
-        const type = this.dsRegistry.findByAlias(this._source)?.request?.cms?.contentType ?? this._source;
+        const type = sourceTypeLabel(this._source, this.dsRegistry.findByAlias(this._source), this.typeLabels ?? NO_TYPE_LABELS);
         return this.label(EMPTY_SOURCE_HINT_KEY).split('{type}').join(type);
     }
     label(key) {
@@ -4921,7 +4993,7 @@ class BuilderRepeaterComponent {
             this.fetchData();
         }
     }
-    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine, labels) {
+    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine, labels, typeLabels) {
         this.dragEngine = dragEngine;
         this.overlayService = overlayService;
         this.dataSourceService = dataSourceService;
@@ -4930,6 +5002,7 @@ class BuilderRepeaterComponent {
         this.cdr = cdr;
         this.interactionEngine = interactionEngine;
         this.labels = labels;
+        this.typeLabels = typeLabels;
         this._children = [];
         this.style = {};
         this.nodeId = '';
@@ -5070,7 +5143,7 @@ class BuilderRepeaterComponent {
         if (this.items.length)
             setTimeout(() => this.refreshPreviews());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }, { token: IOX_BUILDER_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }, { token: IOX_BUILDER_LABELS, optional: true }, { token: IOX_CONTENT_TYPE_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", sourcePath: "sourcePath", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <ng-template #badgeContent>
             <i class="ph-thin ph-repeat"></i>
@@ -5261,6 +5334,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 }, {
                     type: Inject,
                     args: [IOX_BUILDER_LABELS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_CONTENT_TYPE_LABELS]
                 }] }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -5294,9 +5372,10 @@ var CompositePresetId;
     CompositePresetId["Badge"] = "badge";
     CompositePresetId["Chip"] = "chip";
     CompositePresetId["Accordion"] = "accordion";
+    CompositePresetId["Disclosure"] = "disclosure";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
- *  composites (the Accordion — CC2; Tabs and the floating family later). */
+ *  composites (the Accordion — CC2, the Disclosure — CC2.1; Tabs and the floating family later). */
 var CompositePaletteGroup;
 (function (CompositePaletteGroup) {
     CompositePaletteGroup["ContentBlocks"] = "content-blocks";
@@ -5323,6 +5402,11 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: 'Questions that open — three items, one open at a time. Every header, icon and panel is its own element.',
         build: create => buildAccordionRecipe(create),
     },
+    {
+        id: CompositePresetId.Disclosure, group: CompositePaletteGroup.Interactive, name: 'Disclosure', icon: 'ph-thin ph-caret-circle-down',
+        description: '"Read more" — a button that reveals the text below it and reads "Read less" while it is open.',
+        build: create => buildDisclosureRecipe(create),
+    },
 ]);
 /**
  * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
@@ -5412,7 +5496,10 @@ function wrapNode(roots, target, wrapper) {
  *
  * - `Overlay`: the `.global-elements-overlay` layer, outside Lenis and pinned to the frame — a transform
  *   contains fixed children, so this is the only place a `position: fixed` global (the phone's bottom
- *   bar) or a top-layer Dialog stays on screen while the page scrolls. BEFORE globals stay here too.
+ *   bar) or a top-layer Dialog stays on screen while the page scrolls. BEFORE globals stay here too:
+ *   the Drawer shape puts the drawer Dialog INSIDE the Navigation bar, and in the page its fixed stage
+ *   would be contained by the scrolling page instead of the frame. The page reserves the height the
+ *   in-flow ones take instead (iox-ui#19, `overlayGlobals`).
  * - `Page`: in the page's own flow, after its content — where the live site renders an AFTER global
  *   (a footer). In the overlay it stacked under the header, over the top of the page.
  */
@@ -5443,6 +5530,18 @@ function isPinnedGlobal(node) {
 function globalCanvasLayer(node) {
     return node.globalPosition === AFTER && !isPinnedGlobal(node) ? GlobalCanvasLayer.Page : GlobalCanvasLayer.Overlay;
 }
+/** What the overlay draws, in order (iox-ui#19). Any global that is not AFTER is drawn before the page. */
+function overlayGlobals(globals) {
+    const before = [];
+    const pinnedAfter = [];
+    for (const node of globals) {
+        if (node.globalPosition !== AFTER)
+            before.push(node);
+        else if (globalCanvasLayer(node) === GlobalCanvasLayer.Overlay)
+            pinnedAfter.push(node);
+    }
+    return { before, pinnedAfter };
+}
 
 /**
  * node-path — pure ancestor-chain helpers for the builder's node tree.
@@ -6753,13 +6852,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * breadcrumb and the tree row's sub-label share these, so the four surfaces never disagree (board 3: "The
  * four surfaces, all driven by the same selection").
  *
- * An accordion's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3); a card keeps
- * its full role (`card.title`, "Card · card.title", board 8).
+ * An accordion's and a disclosure's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3);
+ * a card keeps its full role (`card.title`, "Card · card.title", board 8).
  */
-const SHORT_ROLE_KINDS = new Set(['accordion']);
+const SHORT_ROLE_KINDS = new Set([CompositeKind.Accordion, CompositeKind.Disclosure]);
 /** A composite kind's glyph (Phosphor, weight-less): the badge, the root's crumb and its tree row carry it
  *  (board 3: "the composite root carrying its kind icon"). A card keeps the generic stack glyph. */
-const KIND_GLYPHS = { accordion: 'ph-rows' };
+const KIND_GLYPHS = { [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down' };
 const DEFAULT_KIND_GLYPH = 'ph-stack';
 /** The tree icon of an accordion's structural parts (board 3): rows on the root, a stack on an item and a
  *  panel, a cursor on the header, a sparkle on the icon. Other parts keep their type's icon. */
@@ -6769,6 +6868,12 @@ const PART_ICONS = {
     [AccordionRole.Trigger]: 'ph-thin ph-cursor',
     [AccordionRole.Panel]: 'ph-thin ph-stack',
     [AccordionRole.Icon]: 'ph-thin ph-sparkle',
+    // CC2.1 — the disclosure follows the accordion's drawn conventions (board 3): its kind glyph on the root, a
+    // cursor on its toggle, a stack on its panel, a sparkle on its icon; its two words keep the Text icon.
+    [DisclosureRole.Disclosure]: 'ph-thin ph-caret-circle-down',
+    [DisclosureRole.Trigger]: 'ph-thin ph-cursor',
+    [DisclosureRole.Panel]: 'ph-thin ph-stack',
+    [DisclosureRole.Icon]: 'ph-thin ph-sparkle',
 };
 /** The glyph of a role's composite kind (`ph-rows` for an accordion and its parts). */
 function compositeKindGlyph(role) {
@@ -6853,7 +6958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const FROM_ROW_KEY = 'builder.chrome.fromRow';
 const ADD_ITEM_KEY = 'builder.chrome.addItem';
 /** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
-const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion' };
+const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure' };
 /** The parts that offer "Add item" on the selection toolbar (board 3: the "Add slide" pattern). */
 const ADD_ITEM_ROLES = new Set([AccordionRole.Accordion, AccordionRole.Item, AccordionRole.Trigger, AccordionRole.Panel]);
 class OverlayComponent {
@@ -7722,7 +7827,7 @@ function walk(nodes, depth, out, ctx, inTemplate, templateOf) {
     }
 }
 
-/** An Accordion from content's root row (CC2, board 9): "From faqs · 6 rows". */
+/** An Accordion from content's root row (CC2, board 3 / 9): "From FAQ · 6 rows" — the content type's label. */
 const FROM_CONTENT_KEY = 'builder.chrome.fromContent';
 const LOCKED_PART_KEY = 'builder.chrome.lockedPart';
 const COMPOSITE_ROLE_KEY = 'builder.chrome.compositeRole';
@@ -7760,6 +7865,8 @@ class LayerTreeComponent {
         this.activeSection = 'page';
         this.labels = inject(IOX_BUILDER_LABELS);
         this.panelEvents = inject(PanelEventService);
+        this.typeLabels = inject(IOX_CONTENT_TYPE_LABELS);
+        this.dataSources = inject(DataSourceRegistryService, { optional: true });
         this.lockedPartTitle = this.labels(LOCKED_PART_KEY, BUILDER_CHROME_EN[LOCKED_PART_KEY]);
         this.roleTitle = this.labels(COMPOSITE_ROLE_KEY, BUILDER_CHROME_EN[COMPOSITE_ROLE_KEY]);
         this.templateLabel = this.labels(TEMPLATE_KEY, BUILDER_CHROME_EN[TEMPLATE_KEY]);
@@ -7931,7 +8038,9 @@ class LayerTreeComponent {
             isExpanded: (node) => (node.id ? (this.expandedState.get(node.id) ?? true) : true),
             repeaterRows: (node) => this.repeaterRows(node),
             fromContentLabel: (rows) => rows.alias
-                ? this.labels(FROM_CONTENT_KEY, BUILDER_CHROME_EN[FROM_CONTENT_KEY]).replace('{alias}', rows.alias).replace('{count}', String(rows.count))
+                ? this.labels(FROM_CONTENT_KEY, BUILDER_CHROME_EN[FROM_CONTENT_KEY])
+                    .replace('{source}', sourceTypeLabel(rows.alias, this.dataSources?.findByAlias(rows.alias), this.typeLabels))
+                    .replace('{count}', String(rows.count))
                 : null,
         };
         this.flatTree = flattenLayerTree(this.layout, ctx);
@@ -8004,7 +8113,7 @@ class BreadcrumbBarComponent {
             ...nodes.map((node, i) => ({
                 node,
                 label: crumbLabel(node),
-                icon: isAccordionRoot(node) ? `ph-thin ${compositeKindGlyph(node.role)}` : null,
+                icon: isCompositeRoot(node) ? `ph-thin ${compositeKindGlyph(node.role)}` : null,
                 isCurrent: i === last,
                 key: node,
             })),
@@ -8149,6 +8258,10 @@ function pickInherited(css) {
     return out;
 }
 class BuilderComponent {
+    /** The overlay's BEFORE wrapper comes and goes with its globals; its block size is the page's top reserve. */
+    set globalsBeforeRef(ref) {
+        this.observeBeforeGlobals(ref?.nativeElement ?? null);
+    }
     /** A page with nothing on it yet: offer a structure instead of a blank canvas. */
     get isPageEmpty() {
         return !this.layout.length;
@@ -8419,12 +8532,39 @@ class BuilderComponent {
         this.panY = 0;
         this.autoFitViewport();
     }
-    /** The globals the frame-pinned overlay draws: every BEFORE global, then the pinned AFTER ones (a
-     *  fixed bottom bar, a Dialog) — same order as before iox-ui#12. */
-    get globalElementsInOverlay() {
-        const before = this.globalElements.filter(n => n.globalPosition === 'before');
-        const after = this.globalElements.filter(n => n.globalPosition === 'after' && globalCanvasLayer(n) === GlobalCanvasLayer.Overlay);
-        return [...before, ...after];
+    /** Every BEFORE global, drawn in the overlay's before wrapper (iox-ui#19). */
+    get globalElementsBefore() {
+        return overlayGlobals(this.globalElements).before;
+    }
+    /** The pinned AFTER globals (a fixed bottom bar, a Dialog), drawn in the overlay after the wrapper. */
+    get globalElementsPinnedAfter() {
+        return overlayGlobals(this.globalElements).pinnedAfter;
+    }
+    /** Watch the BEFORE wrapper: a header growing, or turning fixed at a breakpoint, changes the reserve. A
+     *  ResizeObserver reports layout px, untouched by the canvas zoom. */
+    observeBeforeGlobals(el) {
+        if (el === this.beforeGlobalsEl)
+            return;
+        this.beforeGlobalsRo?.disconnect();
+        this.beforeGlobalsRo = undefined;
+        this.beforeGlobalsEl = el;
+        if (!el) {
+            // Called from a view query, mid change detection: apply on the next turn.
+            Promise.resolve().then(() => this.setHeaderReserve(0));
+            return;
+        }
+        this.beforeGlobalsRo = new ResizeObserver(entries => {
+            const entry = entries[0];
+            this.setHeaderReserve(entry?.borderBoxSize?.[0]?.blockSize ?? entry?.contentRect.height ?? 0);
+        });
+        this.beforeGlobalsRo.observe(el);
+    }
+    setHeaderReserve(px) {
+        const reserve = Math.max(0, Math.round(px));
+        if (reserve === this.canvasHeaderReserve)
+            return;
+        this.canvasHeaderReserve = reserve;
+        this.cdr.detectChanges();
     }
     /** In-flow AFTER globals (a footer): drawn after the page's content, as the live site draws them. */
     get globalElementsInPage() {
@@ -8590,6 +8730,10 @@ class BuilderComponent {
         /** The page reserves a bottom bar's height on the canvas where the bar shows (CC1 R1) — design-core's
          *  `barReserveClass` of the bar among the globals, or null. A field, recomputed when globals change. */
         this.canvasBarReserve = null;
+        /** The page's top reserve, in canvas px: the height the in-flow BEFORE globals take (a header), so the
+         *  page's first content starts below it, as on the live site (iox-ui#19). 0 for a fixed header. */
+        this.canvasHeaderReserve = 0;
+        this.beforeGlobalsEl = null;
         /** Canvas frame height in canvas-space pixels (= previewScroll.clientHeight / scale).
          *  Used as iox-page-component's height so position:fixed top:0;bottom:0 fills the
          *  same area as height:100vh (both resolve to this value). */
@@ -8798,6 +8942,7 @@ class BuilderComponent {
         this.destroyLenis();
         this.canvasRo?.disconnect();
         this.previewFrameRo?.disconnect();
+        this.beforeGlobalsRo?.disconnect();
         this.overlayService.setContainer(null);
         this.overlayService.setScrollContainer(null);
         this.overlayService.setIntersectionRoot(null);
@@ -9663,11 +9808,11 @@ class BuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: FormStateService }, { token: CanvasDesignStateService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", pagePath: "pagePath", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals and the PINNED after ones (a fixed bottom bar, a Dialog). An in-flow\n                     AFTER global (a footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsInOverlay; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [attr.data-bar-reserve]=\"canvasBarReserve\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;direction:ltr;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder #canvas-preview[data-bar-reserve=iox-bar-reserve]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}@container iox-canvas (max-width: 1200px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-laptop]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 991px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-tablet]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 767px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-mobile]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 479px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-small]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i17.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i17.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i18.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1$1.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "rootSelect", "nodePeek"] }, { kind: "component", type: AuditPanelComponent, selector: "app-audit-panel", inputs: ["findings", "breakpointLabel", "running"], outputs: ["select", "fix", "fixAll", "rerun", "closePanel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", pagePath: "pagePath", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }, { propertyName: "globalsBeforeRef", first: true, predicate: ["globalsBefore"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals stay here, in the frame (a Dialog inside a header must fill the frame,\n                     not scroll away with the page). Their wrapper's height is what the in-flow ones take,\n                     and the page reserves it at its top (canvasHeaderReserve, iox-ui#19). -->\n                @if (globalElementsBefore.length) {\n                <div #globalsBefore class=\"iox-canvas-globals-before\">\n                    @for (item of globalElementsBefore; track item) {\n                        <ng-container [ioxRender]=\"item\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    }\n                </div>\n                }\n                <!-- The PINNED after globals (a fixed bottom bar, a Dialog). An in-flow AFTER global (a\n                     footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsPinnedAfter; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [attr.data-bar-reserve]=\"canvasBarReserve\"\n                         [style.padding-block-start.px]=\"canvasHeaderReserve || null\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;direction:ltr;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder #canvas-preview[data-bar-reserve=iox-bar-reserve]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}@container iox-canvas (max-width: 1200px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-laptop]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 991px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-tablet]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 767px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-mobile]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 479px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-small]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .global-elements-overlay .iox-canvas-globals-before{display:flow-root;pointer-events:none}.builder .global-elements-overlay .iox-canvas-globals-before ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i17.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i17.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i18.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1$1.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "rootSelect", "nodePeek"] }, { kind: "component", type: AuditPanelComponent, selector: "app-audit-panel", inputs: ["findings", "breakpointLabel", "running"], outputs: ["select", "fix", "fixAll", "rerun", "closePanel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder', standalone: false, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals and the PINNED after ones (a fixed bottom bar, a Dialog). An in-flow\n                     AFTER global (a footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsInOverlay; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [attr.data-bar-reserve]=\"canvasBarReserve\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;direction:ltr;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder #canvas-preview[data-bar-reserve=iox-bar-reserve]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}@container iox-canvas (max-width: 1200px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-laptop]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 991px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-tablet]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 767px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-mobile]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 479px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-small]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
+            args: [{ selector: 'app-builder', standalone: false, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals stay here, in the frame (a Dialog inside a header must fill the frame,\n                     not scroll away with the page). Their wrapper's height is what the in-flow ones take,\n                     and the page reserves it at its top (canvasHeaderReserve, iox-ui#19). -->\n                @if (globalElementsBefore.length) {\n                <div #globalsBefore class=\"iox-canvas-globals-before\">\n                    @for (item of globalElementsBefore; track item) {\n                        <ng-container [ioxRender]=\"item\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    }\n                </div>\n                }\n                <!-- The PINNED after globals (a fixed bottom bar, a Dialog). An in-flow AFTER global (a\n                     footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsPinnedAfter; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [attr.data-bar-reserve]=\"canvasBarReserve\"\n                         [style.padding-block-start.px]=\"canvasHeaderReserve || null\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;direction:ltr;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder #canvas-preview[data-bar-reserve=iox-bar-reserve]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}@container iox-canvas (max-width: 1200px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-laptop]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 991px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-tablet]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 767px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-mobile]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 479px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-small]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .global-elements-overlay .iox-canvas-globals-before{display:flow-root;pointer-events:none}.builder .global-elements-overlay .iox-canvas-globals-before ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: FormStateService }, { type: CanvasDesignStateService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }, { type: StyleRegistryService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
@@ -9726,6 +9871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }], globalOverlayRef: [{
                 type: ViewChild,
                 args: ['globalOverlay']
+            }], globalsBeforeRef: [{
+                type: ViewChild,
+                args: ['globalsBefore']
             }] } });
 
 /**
@@ -9829,13 +9977,14 @@ const ACCORDION_TRACK_WRAPPER = 'track';
  * See moveable-migration.md.
  */
 class BuilderContainerComponent {
-    /** The wrapper a child renders in: an Accordion item's header → its heading level, its panel → the track. */
+    /** The wrapper a child renders in: an Accordion item's header → its heading level; an item's panel (either
+     *  kind) → the track. A disclosure's toggle has no heading — it is a button in the flow. */
     wrapperOf(child) {
-        if (this.node?.role !== AccordionRole.Item)
+        if (!isCompositeItem(this.node))
             return null;
-        if (child.role === AccordionRole.Trigger)
+        if (child.role === AccordionRole.Trigger && this.node?.role === AccordionRole.Item)
             return accordionHeadingLevel(child);
-        if (child.role === AccordionRole.Panel)
+        if (isCompositePanel(child))
             return ACCORDION_TRACK_WRAPPER;
         return null;
     }
@@ -9908,7 +10057,8 @@ class BuilderContainerComponent {
         </ng-template>
         <!-- An Accordion ITEM (CC2) wraps its parts in the markup every renderer writes: the header inside a
              heading of its question's level, the panel inside the track + region the ONE hiding rule collapses
-             (iox-design.css). Structural only — the runtime stamps their state. -->
+             (iox-design.css). A Disclosure (CC2.1) is its own item: its toggle stays a bare button, its panel
+             takes the same track. Structural only — the runtime stamps their state. -->
         @for (child of children; track child) {
             @switch (wrapperOf(child)) {
                 @case ('h2') { <h2 class="iox-accordion-heading"><ng-container *ngTemplateOutlet="childTpl; context: { $implicit: child }"></ng-container></h2> }
@@ -9949,7 +10099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         </ng-template>
         <!-- An Accordion ITEM (CC2) wraps its parts in the markup every renderer writes: the header inside a
              heading of its question's level, the panel inside the track + region the ONE hiding rule collapses
-             (iox-design.css). Structural only — the runtime stamps their state. -->
+             (iox-design.css). A Disclosure (CC2.1) is its own item: its toggle stays a bare button, its panel
+             takes the same track. Structural only — the runtime stamps their state. -->
         @for (child of children; track child) {
             @switch (wrapperOf(child)) {
                 @case ('h2') { <h2 class="iox-accordion-heading"><ng-container *ngTemplateOutlet="childTpl; context: { $implicit: child }"></ng-container></h2> }
@@ -9970,7 +10121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[attr.data-iox-state]': 'formClass === "iox-form" ? formState : null',
                         '[attr.start]': "htmlTag === 'ol' && start !== 1 ? start : null",
                         '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
-                        // An accordion item's identity — the runtime pairs its header and panel ids from it (CC2).
+                        // An item's identity (an accordion item, or a disclosure) — the runtime pairs its header and panel ids from it.
                         '[attr.data-iox-item-key]': 'node?.itemKey ?? null',
                     }, standalone: false, styles: [":host{position:relative;box-sizing:border-box}.container-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;z-index:0;opacity:0;transition:opacity .15s}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
@@ -10002,9 +10153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 /** `click` covers plain and modified clicks; a middle click opens a tab through `auxclick` alone. */
 const NAVIGATING_CLICKS = ['click', 'auxclick'];
 class BuilderLinkedContainerComponent {
-    /** An Accordion's header renders a <button> (CC2). */
+    /** An Accordion's header (CC2) or a Disclosure's toggle (CC2.1) renders a <button>. */
     get isTrigger() {
-        return this.node?.role === AccordionRole.Trigger;
+        return isCompositeTrigger(this.node);
     }
     constructor(dragEngine, cdr, elRef, isPreview) {
         this.dragEngine = dragEngine;
@@ -12598,7 +12749,7 @@ class FormComponentConfig extends ComponentConfig {
         // The BUILDER renders these through BuilderContainerComponent (same as List/ListItem), so
         // they are drop zones and their children render on the canvas; the ENGINE uses the real
         // twins. `formClass` is what keeps the shared form stylesheet applying to both.
-        super('Form', 'app-builder-container', 'ph-thin ph-textbox', 'Forms');
+        super('Form', 'app-builder-container', 'ph-thin ph-clipboard-text', 'Forms');
         this.traits = [
             // Hidden plumbing: marks this container as a form host for the shared stylesheet.
             new TraitConfig('formClass', '', TraitInputType.Text, undefined, 'iox-form'),
@@ -12654,7 +12805,7 @@ class FormComponentConfig extends ComponentConfig {
  */
 class FieldComponentConfig extends ComponentConfig {
     constructor() {
-        super('Field', 'iox-field', 'ph-thin ph-text-box', 'Forms');
+        super('Field', 'iox-field', 'ph-thin ph-textbox', 'Forms');
         this.parts = FIELD_PARTS;
         this.traits = [
             new TraitConfig('__contentLabel', 'Content', TraitInputType.SectionLabel),
@@ -13211,5 +13362,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, 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, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, 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_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, 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, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, 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, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, 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, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, 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_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, 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, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, 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, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map