@vectoriox/iox-builder 11.1.0 → 11.3.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -31,6 +31,7 @@ import Moveable from 'moveable';
 import Selecto from 'selecto';
 import * as i18 from 'primeng/api';
 import { planVideo, VideoSource, VIDEO_PROVIDER_LABEL, VideoTrait, VideoMode } from '@vectoriox/iox-ui/media-core';
+import { entranceInteraction, entranceAction, sectionEntrances, EntrancePart } from '@vectoriox/iox-ui/generation-core';
 import { ConsentCategory } from '@vectoriox/iox-ui/consent-core';
 
 /**
@@ -2110,6 +2111,8 @@ class StyleRegistryService {
         this.tokenCss = { base: '', dark: '' };
         this.tokenRows = [];
         this.uploadedFamilies = [];
+        /** The page's locale: a Hebrew page also links each font role's Hebrew partner (H1-2). */
+        this.fontLocale = null;
         this.tokenMode = 'auto';
         this.styleEl = null;
         this._flushPending = false;
@@ -2451,15 +2454,23 @@ class StyleRegistryService {
      * Poppins. Links stay for the session: a trial that switches back costs no refetch.
      */
     loadTokenFonts(nodeCss) {
-        this.linkFonts(fontsForTokens(this.tokenRows, { usedCss: nodeCss, uploaded: this.uploadedFamilies }));
+        this.linkFonts(fontsForTokens(this.tokenRows, { usedCss: nodeCss, uploaded: this.uploadedFamilies, locale: this.fontLocale }));
+    }
+    /** The open page's locale (`page.locale`) — the same font rule the SSR engine applies to the live page. */
+    setFontLocale(locale) {
+        const next = locale ?? null;
+        if (next === this.fontLocale)
+            return;
+        this.fontLocale = next;
+        this.flush();
     }
     /**
      * Link the Google families OTHER rows name — a specimen wearing another look (the Design side-card's
      * Look tiles and pairing cards). The same catalog, URL and dedupe as the canvas's own fonts, so a
      * look that is later tried or applied costs no second fetch. Never touches the canvas's tokens.
      */
-    loadFontsFor(tokens) {
-        this.linkFonts(fontsForTokens(tokens ?? [], { uploaded: this.uploadedFamilies }));
+    loadFontsFor(tokens, locale = this.fontLocale) {
+        this.linkFonts(fontsForTokens(tokens ?? [], { uploaded: this.uploadedFamilies, locale }));
     }
     linkFonts(ids) {
         const head = this.styleEl?.ownerDocument?.head ?? (typeof document !== 'undefined' ? document.head : null);
@@ -10519,7 +10530,7 @@ 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 }, { 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    <!-- A tab or a panel deleted alone (CC4a \u2014 composite T18): the pair goes together, so the delete is offered for\n         both. Every delete path asks the one guard; this is its answer. -->\n    <p-dialog [visible]=\"!!pendingPairRemoval\" (visibleChange)=\"$event || cancelPairRemoval()\" [modal]=\"true\" [closable]=\"true\"\n              [draggable]=\"false\" [resizable]=\"false\" [header]=\"pairRemovalText('builder.chrome.deletePairTitle')\" styleClass=\"iox-pair-removal-dialog\"\n              appendTo=\"body\" [style]=\"{ width: '400px' }\">\n        <p class=\"pair-removal-body\">{{ pairRemovalText('builder.chrome.deletePairBody') }}</p>\n        <ng-template pTemplate=\"footer\">\n            <p-button size=\"small\" severity=\"secondary\" [label]=\"pairRemovalText('builder.chrome.cancel')\" (onClick)=\"cancelPairRemoval()\"></p-button>\n            <p-button size=\"small\" severity=\"danger\" [label]=\"pairRemovalText('builder.chrome.deletePair')\" (onClick)=\"confirmPairRemoval()\"></p-button>\n        </ng-template>\n    </p-dialog>\n\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: "directive", type: i18.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i19.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: i20.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { 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    <!-- A tab or a panel deleted alone (CC4a \u2014 composite T18): the pair goes together, so the delete is offered for\n         both. Every delete path asks the one guard; this is its answer. -->\n    <p-dialog [visible]=\"!!pendingPairRemoval\" (visibleChange)=\"$event || cancelPairRemoval()\" [modal]=\"true\" [closable]=\"true\"\n              [draggable]=\"false\" [resizable]=\"false\" [header]=\"pairRemovalText('builder.chrome.deletePairTitle')\" styleClass=\"iox-pair-removal-dialog\"\n              appendTo=\"body\" [style]=\"{ width: '400px' }\">\n        <p class=\"pair-removal-body\">{{ pairRemovalText('builder.chrome.deletePairBody') }}</p>\n        <ng-template pTemplate=\"footer\">\n            <p-button size=\"small\" severity=\"secondary\" [label]=\"pairRemovalText('builder.chrome.cancel')\" (onClick)=\"cancelPairRemoval()\"></p-button>\n            <p-button size=\"small\" severity=\"danger\" [label]=\"pairRemovalText('builder.chrome.deletePair')\" (onClick)=\"confirmPairRemoval()\"></p-button>\n        </ng-template>\n    </p-dialog>\n\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: "directive", type: i18.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i19.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: i20.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i1$1.IoxPageComponent, selector: "iox-page-component", inputs: ["class", "scroll"], 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,
@@ -13176,6 +13187,127 @@ function buildFlavorSpecimen(name, createConfig, copy) {
         root.label = 'Look specimen';
     return markSpecimen(withChildren(root, [withChildren(dots, dotNodes), primary, card]));
 }
+// ── The business specimen (AI plan rev 3.1 §3o, H4-1) ────────────────────────────────────────────────────────
+/** Which state of the specimen: the page, or "one card, opened" — the second state Preview changes page into. */
+var BusinessSpecimenView;
+(function (BusinessSpecimenView) {
+    BusinessSpecimenView["Home"] = "home";
+    BusinessSpecimenView["Item"] = "item";
+})(BusinessSpecimenView || (BusinessSpecimenView = {}));
+/** The families the specimen's blocks stand for — the contract's `animationFamilies` keys. */
+var SpecimenFamily;
+(function (SpecimenFamily) {
+    SpecimenFamily["Hero"] = "hero";
+    SpecimenFamily["Collection"] = "collection";
+    SpecimenFamily["Feature"] = "feature";
+    SpecimenFamily["Contact"] = "contact";
+    SpecimenFamily["Detail"] = "detail";
+})(SpecimenFamily || (SpecimenFamily = {}));
+const CARD_COUNT = 3;
+function stamper(rtl) {
+    return (node, spec, index = 0) => {
+        if (!node?.id || !spec)
+            return;
+        node.interactions = [...(node.interactions ?? []), entranceInteraction(node.id, entranceAction(spec, { index, rtl }))];
+    };
+}
+/**
+ * A block of the specimen and its entrances: with `content` the block's children enter together, once; otherwise
+ * each named part enters on its own (items one after another).
+ */
+function block(createConfig, family, opts, children, parts, styles = {}) {
+    const node = withChildren(styled(box(createConfig), { display: 'grid', gap: '16px', width: '100%', ...styles }), children);
+    if (!node)
+        return null;
+    const plan = sectionEntrances(opts.animate, family);
+    const stamp = stamper(!!opts.rtl);
+    if (plan.content) {
+        node.children.forEach(child => stamp(child, plan.content));
+        return node;
+    }
+    for (const [part, nodes] of Object.entries(parts)) {
+        nodes.forEach((n, i) => stamp(n, plan.parts[part], i));
+    }
+    return node;
+}
+function heading(styleId, content, level, createConfig) {
+    const node = wearing(createConfig('Heading'), styleId);
+    if (!node)
+        return null;
+    setTrait(node, 'content', content);
+    setTrait(node, 'level', level);
+    return styled(node, { margin: '0' });
+}
+/** A picture: the owner's photo, or the design system's empty box (a marked Image with no source). */
+function picture(createConfig, aspectRatio, src = '') {
+    const node = wearing(createConfig('Image'), 'media');
+    if (!node)
+        return null;
+    setTrait(node, 'src', src);
+    return styled(node, { width: '100%', height: 'auto', aspectRatio });
+}
+function card(copy, createConfig, index) {
+    return boxed('card', createConfig, [
+        picture(createConfig, '4 / 3', index === 0 ? copy.photo : ''),
+        heading('h3', copy.cardTitle, 'h3', createConfig),
+        text(copy.cardText, createConfig, 'small'),
+    ], { display: 'grid', gap: '8px', alignContent: 'start', minWidth: '0' });
+}
+function wordmark(copy, createConfig) {
+    return text(copy.name, createConfig, undefined, {
+        fontFamily: 'var(--iox-font-display)', fontWeight: 'var(--iox-weight-display)', fontSize: '18px', color: 'var(--iox-text)',
+    });
+}
+function homeView(copy, createConfig, opts) {
+    const words = withChildren(styled(box(createConfig), { display: 'grid', gap: '14px', maxWidth: '640px' }), [
+        text(copy.eyebrow, createConfig, 'eyebrow'),
+        heading('display', copy.headline, 'h1', createConfig),
+        text(copy.lead, createConfig, 'lead'),
+        withChildren(styled(box(createConfig), { display: 'flex', flexWrap: 'wrap', gap: '12px' }), [
+            button('button-primary', copy.primary, createConfig),
+            button('button-secondary', copy.secondary, createConfig),
+        ]),
+    ]);
+    const hero = block(createConfig, SpecimenFamily.Hero, opts, [words], { [EntrancePart.HeroText]: [words] });
+    const listHeading = heading('h2', copy.listHeading, 'h2', createConfig);
+    const cards = Array.from({ length: CARD_COUNT }, (_, i) => card(copy, createConfig, i));
+    const cardRow = withChildren(styled(box(createConfig), { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '14px' }), cards);
+    const collection = block(createConfig, SpecimenFamily.Collection, opts, [listHeading, cardRow], { [EntrancePart.Heading]: [listHeading], [EntrancePart.Items]: cards });
+    const rowPicture = picture(createConfig, '16 / 10');
+    const rowHeading = heading('h2', copy.rowHeading, 'h2', createConfig);
+    const rowWords = withChildren(styled(box(createConfig), { display: 'grid', gap: '10px', alignContent: 'center' }), [rowHeading, text(copy.rowText, createConfig, 'body')]);
+    const feature = block(createConfig, SpecimenFamily.Feature, opts, [rowPicture, rowWords], { [EntrancePart.Heading]: [rowHeading], [EntrancePart.RowMedia]: [rowPicture] }, { gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)', gap: '18px', alignItems: 'start' });
+    const field = createConfig('Field');
+    if (field) {
+        setTrait(field, 'label', copy.fieldLabel);
+        setTrait(field, 'control', 'email');
+    }
+    const formHeading = heading('h3', copy.formHeading, 'h3', createConfig);
+    const contactCard = boxed('card', createConfig, [formHeading, field ?? null, button('button-primary', copy.send, createConfig, { justifySelf: 'start' })], { display: 'grid', gap: '14px', alignContent: 'start', maxWidth: '420px' });
+    const contact = block(createConfig, SpecimenFamily.Contact, opts, [contactCard], { [EntrancePart.Heading]: [formHeading] });
+    return [hero, collection, feature, contact];
+}
+function itemView(copy, createConfig, opts) {
+    const title = heading('display', copy.cardTitle, 'h1', createConfig);
+    const media = picture(createConfig, '16 / 8', copy.photo);
+    return [block(createConfig, SpecimenFamily.Detail, opts, [text(copy.listHeading, createConfig, 'eyebrow'), title, media, text(copy.cardText, createConfig, 'lead')], { [EntrancePart.Heading]: [title], [EntrancePart.Media]: [media] })];
+}
+/**
+ * The Design step's canvas (AI plan rev 3.1 §3o, H4-1): the business's own name and words, in four blocks a real
+ * page would have — a hero (wordmark, eyebrow, headline, lead, two buttons), a collection (a heading, three
+ * cards), a feature row (a picture beside a heading and a paragraph) and a contact card (one field and its
+ * button) — or, as `BusinessSpecimenView.Item`, one card opened. Ordinary nodes wearing element styles, rendered
+ * through `[ioxRender]` like every specimen; display-only. Each block carries the entrances the look's How
+ * animated stamps (the shared `sectionEntrances`), played by the canvas's own interaction runtime. No navigation
+ * and no page names. A right-to-left business is drawn by its host's `dir`; only a side picture's slide mirrors here.
+ */
+function buildBusinessSpecimen(copy, createConfig, opts = {}) {
+    const blocks = opts.view === BusinessSpecimenView.Item ? itemView(copy, createConfig, opts) : homeView(copy, createConfig, opts);
+    const root = withChildren(styled(box(createConfig), { display: 'grid', gap: '28px', alignContent: 'start', padding: '30px 36px 36px', width: '100%' }), [wordmark(copy, createConfig), ...blocks]);
+    if (root)
+        root.label = 'Business specimen';
+    return markSpecimen(root);
+}
 
 /**
  * Dialog (actions plan A1b) — an ordinary container whose children are normal nodes, rendered
@@ -14121,5 +14253,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, 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, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, 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, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, 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, BusinessSpecimenView, 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, 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, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SILENT_REFUSALS, 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, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map