@vectoriox/iox-builder 9.6.1 → 9.8.0

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ComponentRef, Type, InjectionToken, ChangeDetectorRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ApplicationRef, SimpleChanges, ViewContainerRef, Injector, EnvironmentInjector, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
+import { ComponentRef, Type, InjectionToken, ChangeDetectorRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ApplicationRef, SimpleChanges, ViewContainerRef, Injector, EnvironmentInjector, TemplateRef, AfterContentInit, QueryList, NgZone } from '@angular/core';
 import * as i30 from '@vectoriox/iox-ui';
 import { ResponsiveOverrides, RelativeSourceSpec, Breakpoint, PageStyleSettings, FormRenderState, AdoptContext, DesignTokenLike, DesignMode, ComponentInstanceRegistryService, DataSourceEndpoints, LinkType, PalettePreset, syncNodeDesignClasses } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, IoxContextSlot, PageStyleSettings, SetContextParams, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
@@ -19,8 +19,8 @@ import * as i26 from 'primeng/inputtext';
 import * as i27 from 'primeng/select';
 import * as i28 from 'primeng/tooltip';
 import * as i29 from 'primeng/dialog';
+import { AccordionRuntime, CompositeNodeFactory, CompositeNode } from '@vectoriox/iox-ui/composite-core';
 import { FormPresetDef } from '@vectoriox/iox-ui/forms-core';
-import { CompositeNodeFactory, CompositeNode } from '@vectoriox/iox-ui/composite-core';
 
 declare enum StyleCategory {
     Layout = "Layout",
@@ -132,7 +132,7 @@ interface IoxDataSource {
     };
 }
 
-type InteractionTrigger = 'pageLoad' | 'click' | 'hover' | 'viewportEnter' | 'scrollProgress' | 'pageLeave' | 'pageEnter' | 'swiperSlideChange' | 'swiperReachBeginning' | 'swiperReachEnd' | 'swiperAutoplayStart' | 'swiperAutoplayStop' | 'swiperSlideActive' | 'swiperSlideInactive';
+type InteractionTrigger = 'pageLoad' | 'click' | 'hover' | 'viewportEnter' | 'scrollProgress' | 'pageLeave' | 'pageEnter' | 'swiperSlideChange' | 'swiperReachBeginning' | 'swiperReachEnd' | 'swiperAutoplayStart' | 'swiperAutoplayStop' | 'swiperSlideActive' | 'swiperSlideInactive' | 'itemOn' | 'itemOff';
 type InteractionActionType = 'fadeIn' | 'fadeOut' | 'moveUp' | 'moveDown' | 'moveLeft' | 'moveRight' | 'scaleIn' | 'scaleOut' | 'rotate' | 'show' | 'hide' | 'toggleVisibility' | 'setContext' | 'clearContext' | 'openDialog' | 'closeDialog' | 'toggleDialog' | 'navigate' | 'scrollTo' | 'submitForm' | 'copyToClipboard' | 'grantConsent' | 'denyConsent' | 'setConsentCategory' | 'openConsentPreferences' | 'swiperNext' | 'swiperPrev' | 'swiperGoToSlide' | 'swiperAutoplayStart' | 'swiperAutoplayStop' | 'swiperAutoplayPause';
 interface InteractionAction {
     type: InteractionActionType;
@@ -241,7 +241,7 @@ interface InteractionPreset {
     name: string;
     interactions: IoxInteraction[];
 }
-type ElementState = 'hover' | 'active' | 'focus' | 'first-child' | 'last-child' | 'nth-child(odd)' | 'nth-child(even)' | 'parent-hover' | 'trigger-hover' | 'wrong' | 'accepted' | 'current';
+type ElementState = 'hover' | 'active' | 'focus' | 'first-child' | 'last-child' | 'nth-child(odd)' | 'nth-child(even)' | 'parent-hover' | 'trigger-hover' | 'trigger-on' | 'wrong' | 'accepted' | 'current' | 'on';
 /** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
 declare const INTERACTION_STATES: ElementState[];
 /** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
@@ -266,6 +266,7 @@ declare const RELATIONAL_STATE_BASE: Partial<Record<ElementState, string>>;
  * `TARGETED_STATE_BASE` maps each targeted state to the trigger's pseudo-class.
  */
 declare const TARGETED_STATES: ElementState[];
+/** Kept for the hover case; every targeted state's selector suffix is the shared `TARGETED_STATE_SUFFIX`. */
 declare const TARGETED_STATE_BASE: Partial<Record<ElementState, string>>;
 /**
  * Design-time validation states (forms-and-inputs-plan.md Part 2, board 7 — "the failure
@@ -372,6 +373,12 @@ interface ComponentNode {
      * composite's editors. A navigation's roles are written by the composer and `planNavShape` (CC1).
      */
     role?: string;
+    /**
+     * An item's identity inside its composite (CC2 — an Accordion item's `k1`…, composite plan §3). Its ARIA
+     * ids derive from it, so a reorder never pairs a header with another item's panel. Reissued on every
+     * clone (`regenerateNodeIds`). A From-content template carries none: each row's key is its own id.
+     */
+    itemKey?: string;
 }
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
@@ -660,6 +667,8 @@ declare enum ToolbarAction {
     Copy = "copy",
     Paste = "paste",
     AddSlide = "add-slide",
+    /** An accordion part's "Add item" (CC2): a fresh item after the selected one's item. */
+    AddItem = "add-item",
     Wrap = "wrap",
     /** Open the components panel to insert into / after the selection (B2 quick-add). */
     AddElement = "add-element"
@@ -765,6 +774,11 @@ declare class OverlayService {
         node: ComponentNode;
         ref: NodeRef;
     } | undefined;
+    /** The registered node with this id (a From-content row's click resolves to its TEMPLATE part, CC2). */
+    findRefByNodeId(id: string): {
+        node: ComponentNode;
+        ref: NodeRef;
+    } | undefined;
     /**
      * Walk up the DOM from a node's registered host element to the nearest ANCESTOR
      * element that is itself a registered node. Used to resolve the immediate parent
@@ -778,7 +792,9 @@ declare class OverlayService {
     clearHover(): void;
     /** Current selection snapshot (null if nothing is selected). */
     getCurrentSelection(): OverlayEntry | null;
-    setSelect(element: HTMLElement, componentName: string, mode: BuilderMode, node?: ComponentNode, componentRef?: ComponentRef<any>): void;
+    /** The From-content row (1-based) a click came from when it selected a TEMPLATE part (CC2), else null. */
+    selectedRow: number | null;
+    setSelect(element: HTMLElement, componentName: string, mode: BuilderMode, node?: ComponentNode, componentRef?: ComponentRef<any>, fromRow?: number | null): void;
     clearSelect(): void;
     refreshSelect(): void;
     /** Lightweight swap for drag-preview tracking. */
@@ -1059,7 +1075,13 @@ declare enum InsertRefusal {
      *  structure guard (composite-core `structureRefusal`). Reordering inside the parent never asks. */
     LockedPartMove = "lockedPartMove",
     /** A composite's LOCKED part deleted (Delete key, toolbar, layer tree, Make global): refused. */
-    LockedPart = "lockedPart"
+    LockedPart = "lockedPart",
+    /** An accordion item's header or panel (CC2) moved out of its item. */
+    LockedItemPartMove = "lockedItemPartMove",
+    /** An accordion item's header or panel (CC2) deleted on its own. */
+    LockedItemPart = "lockedItemPart",
+    /** An accordion's LAST item (composite plan T11): it keeps at least one. */
+    LastItem = "lastItem"
 }
 declare const FORM_STATE_BLOCK_TYPES: ReadonlySet<string>;
 /** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
@@ -1079,8 +1101,9 @@ interface TypedNode {
  */
 declare function insertRefusal(node: TypedNode | null | undefined, ancestors: readonly TypedNode[]): InsertRefusal | null;
 /** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
- *  composite's locked part stays — its Parts switch or deleting the whole composite are the ways out. */
-declare function removalRefusal(node: TypedNode | null | undefined): InsertRefusal | null;
+ *  composite's locked part stays — its Parts switch or deleting the whole composite are the ways out — and an
+ *  accordion keeps its last item. `siblings` = the list `node` sits in (where the caller has it). */
+declare function removalRefusal(node: TypedNode | null | undefined, siblings?: readonly TypedNode[] | null): InsertRefusal | null;
 
 /**
  * SymbolRegistryService — in-memory store for org-level symbols.
@@ -1151,7 +1174,7 @@ declare class DragEngineService {
      * The ONE check every REMOVAL asks (Delete key, toolbar, layer tree, Make global): null when `node` may
      * leave its place; otherwise the refusal, announced on `insertRefused$` like any other.
      */
-    refuseRemoval(node: unknown): InsertRefusal | null;
+    refuseRemoval(node: unknown, siblings?: readonly unknown[] | null): InsertRefusal | null;
     /** The node a payload WOULD insert, without building it: a type string, a block/symbol, or a node. */
     private payloadNode;
     /** The nodes a dropzone sits in, outermost first, its own node last — read from the DOM, which is
@@ -1686,6 +1709,12 @@ declare class InteractionEngineService {
     replayTrigger(nodeId: string, trigger: InteractionTrigger): void;
     private _replayTrigger;
     private attachInteraction;
+    /**
+     * `itemOn` / `itemOff` (CC2): run when the part's accordion ITEM opens / closes — announced by the shared
+     * composite-core runtime on the item, on the canvas as on the site. An item already open when the
+     * listener attaches has opened: its `itemOn` runs at once (its entrance was pre-stated hidden).
+     */
+    private attachItemState;
     private attachPageLoad;
     private attachViewportEnter;
     private isBuilderMode;
@@ -1888,7 +1917,10 @@ declare enum AuditCode {
     /** Form content inside a link or a button — a STRUCTURE finding, true at every width (form-nesting-audit.util). */
     FormInLink = "form-in-link",
     /** An icon-only button or link with no Accessible name — announced as an unnamed control (CC1 N6). */
-    UnnamedControl = "unnamed-control"
+    UnnamedControl = "unnamed-control",
+    /** A composite whose items come from content, and its source returned no rows (CC2, board 9): the
+     *  canvas shows the placeholder, the live site renders nothing. */
+    EmptySource = "empty-source"
 }
 /** A fix that changes the tree, not a style or a trait — applied as one page-history step. */
 declare enum StructureFix {
@@ -1918,6 +1950,12 @@ interface AuditNode {
     top?: number;
     /** It shows only an icon and has no Accessible name (the shared `needsAccessibleName`). */
     unnamedControl?: boolean;
+    /** Takes its items from content and the source returned none (CC2): the source's alias, and the section
+     *  it sits in (the finding names both). */
+    emptySource?: {
+        alias: string;
+        section: string;
+    };
 }
 interface AuditFinding {
     nodeId: string;
@@ -2087,6 +2125,8 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     previewScrollRef?: ElementRef<HTMLElement>;
     lenisContentRef?: ElementRef<HTMLElement>;
     globalOverlayRef?: ElementRef<HTMLElement>;
+    /** The overlay's BEFORE wrapper comes and goes with its globals; its block size is the page's top reserve. */
+    set globalsBeforeRef(ref: ElementRef<HTMLElement> | undefined);
     components: any[];
     activePanel: string;
     isPanelOpen: boolean;
@@ -2124,6 +2164,8 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
      * `utils/responsive-audit.util.ts`.
      */
     runAudit(): void;
+    /** An Accordion from content whose source came back with no rows (CC2): what the audit names. */
+    private emptySourceOf;
     /** The node's OWN trait values — the Base layer the responsive `inputs` cascade sits on top of. */
     private baseInputMapOf;
     private refreshStructureFindings;
@@ -2180,6 +2222,11 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     /** 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. */
     canvasBarReserve: string | 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. */
+    canvasHeaderReserve: number;
+    private beforeGlobalsEl;
+    private beforeGlobalsRo?;
     /** 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). */
@@ -2199,9 +2246,14 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     handleToolbarBreakpointChange(bp: Breakpoint): void;
     handleToolbarZoomChange(value: number | 'fit'): void;
     handleToolbarScreenWidthChange(width: number): void;
-    /** 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(): ComponentNode[];
+    /** Every BEFORE global, drawn in the overlay's before wrapper (iox-ui#19). */
+    get globalElementsBefore(): ComponentNode[];
+    /** The pinned AFTER globals (a fixed bottom bar, a Dialog), drawn in the overlay after the wrapper. */
+    get globalElementsPinnedAfter(): ComponentNode[];
+    /** 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. */
+    private observeBeforeGlobals;
+    setHeaderReserve(px: number): void;
     readonly globalsAfterClass = "iox-canvas-globals-after";
     /** In-flow AFTER globals (a footer): drawn after the page's content, as the live site draws them. */
     get globalElementsInPage(): ComponentNode[];
@@ -2319,6 +2371,9 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
         interaction?: IoxInteraction;
         wrapType?: string;
     }): void;
+    /** Toolbar ▸ Add item on an accordion part (CC2): a fresh item after the selection's own item (or at the end
+     *  for the root), the recipe's own item — ONE undo step, then the new item's header is selected. */
+    private addAccordionItemFrom;
     confirmSaveBlock(): void;
     cancelSaveBlock(): void;
     private deepCloneWithNewIds;
@@ -2409,6 +2464,9 @@ declare class RenderDirective implements OnInit, OnDestroy {
      * (`null`), the legacy path is byte-identical — the parent's wrapper owns `iox-outer` + drag.
      */
     ioxDragSourceId: string | null;
+    /** Set by a parent whose element only takes PHRASING content (an Accordion header's <button>, CC2): a
+     *  Heading then renders as a <span> — its outline level is the <hN> the header renders around it. */
+    ioxPhrasing: boolean;
     onClick: EventEmitter<any>;
     onMouseEnter: EventEmitter<any>;
     onMouseLeave: EventEmitter<any>;
@@ -2416,6 +2474,9 @@ declare class RenderDirective implements OnInit, OnDestroy {
     private readonly onCanvas;
     private readonly labels;
     private readonly designState;
+    private readonly compositeCanvas;
+    /** The node this directive attached a composite runtime for (an accordion root). */
+    private compositeRootId;
     /** Host element drag was registered on (collapsed path) — unregistered on destroy. */
     private hostDragEl;
     constructor(vcr: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, doc: Document, registryService: ComponentRegistryService, overlayService: OverlayService, styleRegistry: StyleRegistryService, interactionEngine: InteractionEngineService, cdr: ChangeDetectorRef, panelEventService: PanelEventService, dragEngine: DragEngineService);
@@ -2449,7 +2510,7 @@ declare class RenderDirective implements OnInit, OnDestroy {
     private syncA11y;
     private render;
     static ɵfac: i0.ɵɵFactoryDeclaration<RenderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RenderDirective, "[ioxRender]", never, { "ioxRender": { "alias": "ioxRender"; "required": false; }; "ioxDragSourceId": { "alias": "ioxDragSourceId"; "required": false; }; }, { "onClick": "onClick"; "onMouseEnter": "onMouseEnter"; "onMouseLeave": "onMouseLeave"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RenderDirective, "[ioxRender]", never, { "ioxRender": { "alias": "ioxRender"; "required": false; }; "ioxDragSourceId": { "alias": "ioxDragSourceId"; "required": false; }; "ioxPhrasing": { "alias": "ioxPhrasing"; "required": false; }; }, { "onClick": "onClick"; "onMouseEnter": "onMouseEnter"; "onMouseLeave": "onMouseLeave"; }, never, never, false, never>;
 }
 
 declare class IoxDraggableDirective implements OnInit, OnDestroy {
@@ -2597,8 +2658,16 @@ declare class OverlayComponent implements OnInit, OnDestroy {
     get hasInteractions(): boolean;
     get selectedNodeIsGlobal(): boolean;
     private readonly builderLabels;
+    /** The kind badge's glyph: the composite's kind icon (board 9: "kind icon + 'Accordion · trigger'"). */
+    get selectedRoleIcon(): string;
     /** A composite part's kind + role under the selection (board 3/8 "Selection kind badge"), or null. */
     get selectedRoleBadge(): string | null;
+    /** The selection toolbar's name: the part's LAYER name (board 3 — "Header", "Accordion"), else its type. */
+    get toolbarName(): string;
+    /** An accordion part: the toolbar's "Add item" (CC2). */
+    get canAddItem(): boolean;
+    get addItemLabel(): string;
+    onAddItem(event: MouseEvent): void;
     get selectedPresetName(): string | null;
     get isLinkedSymbol(): boolean;
     get isDetachedSymbol(): boolean;
@@ -2779,6 +2848,10 @@ declare class BuilderContainerComponent implements OnInit, OnDestroy {
     childClick: EventEmitter<any>;
     childMouseEnter: EventEmitter<any>;
     childMouseLeave: EventEmitter<void>;
+    /** The node this container renders (assigned by RenderDirective, never an input). */
+    node: ComponentNode | null;
+    /** The wrapper a child renders in: an Accordion item's header → its heading level, its panel → the track. */
+    wrapperOf(child: ComponentNode): string | null;
     constructor(elRef: ElementRef<HTMLElement>, dragEngine: DragEngineService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -2807,6 +2880,10 @@ declare class BuilderLinkedContainerComponent implements OnInit, OnDestroy {
     childMouseEnter: EventEmitter<any>;
     childMouseLeave: EventEmitter<void>;
     private capturePreventDefault;
+    /** The node this component renders (assigned by RenderDirective, never an input). */
+    node: ComponentNode | null;
+    /** An Accordion's header renders a <button> (CC2). */
+    get isTrigger(): boolean;
     constructor(dragEngine: DragEngineService, cdr: ChangeDetectorRef, elRef: ElementRef<HTMLElement>, isPreview: boolean);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -2886,6 +2963,7 @@ declare class BuilderRepeaterComponent implements OnInit, OnDestroy {
     private panelEventService;
     private cdr;
     private interactionEngine;
+    private labels?;
     private _children;
     get children(): ComponentNode[];
     /** RenderDirective sets `source` (→ fetchData) BEFORE `children`. With an async source the response
@@ -2904,6 +2982,15 @@ declare class BuilderRepeaterComponent implements OnInit, OnDestroy {
     items: any[];
     previewRows: ComponentNode[][];
     isLoading: boolean;
+    /** The node rendered (assigned by RenderDirective). An Accordion from content is a Repeater (CC2). */
+    node: ComponentNode | null;
+    /** Set once a fetch has answered — an empty source is a FINDING only after it said so. */
+    private fetched;
+    /** A composite whose source answered with no rows: the placeholder takes the template's place. */
+    get showsEmptySource(): boolean;
+    get emptySourceTitle(): string;
+    get emptySourceHint(): string;
+    private label;
     /** Bound reference passed to [ioxDropzonePostDrop] so the directive can call it. */
     readonly refreshPreviewsBound: () => void;
     private _source;
@@ -2917,8 +3004,12 @@ declare class BuilderRepeaterComponent implements OnInit, OnDestroy {
     set sourcePath(value: string);
     get limit(): number;
     set limit(value: number);
-    constructor(dragEngine: DragEngineService, overlayService: OverlayService, dataSourceService: BuilderDataSourceService, dsRegistry: DataSourceRegistryService, panelEventService: PanelEventService, cdr: ChangeDetectorRef, interactionEngine: InteractionEngineService);
+    constructor(dragEngine: DragEngineService, overlayService: OverlayService, dataSourceService: BuilderDataSourceService, dsRegistry: DataSourceRegistryService, panelEventService: PanelEventService, cdr: ChangeDetectorRef, interactionEngine: InteractionEngineService, labels?: BuilderLabelResolver | undefined);
     ngOnInit(): void;
+    /** The definition the last fetch ran on — compared to the registry's to refetch only on a real change. */
+    private fetchedDefinition;
+    private sourceSub?;
+    private sourceDefinition;
     ngOnDestroy(): void;
     onDrop(event: IoxDropEvent): void;
     /** Monotonic fetch token — editing a binding sets `source` and `sourcePath` as two separate inputs,
@@ -2940,7 +3031,7 @@ declare class BuilderRepeaterComponent implements OnInit, OnDestroy {
     /** Rebuild preview rows after the template STRUCTURE changed (e.g. a child was wrapped, deleted,
      *  or moved). Deferred so the new DOM + overlay refs exist before bindings are re-applied. */
     refreshTemplate(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BuilderRepeaterComponent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BuilderRepeaterComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BuilderRepeaterComponent, "app-builder-repeater", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; "source": { "alias": "source"; "required": false; }; "sourcePath": { "alias": "sourcePath"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
 }
 
@@ -3197,6 +3288,8 @@ interface LayerMoreRows {
     alias: string;
     /** The template items' depth — the line sits level with them, under the last row of the template. */
     depth: number;
+    /** A composite's rows (an Accordion from content): the line adds "— edit the template" (board 9). */
+    composite: boolean;
 }
 interface LayerTreeRow {
     node: ComponentNode;
@@ -3222,6 +3315,8 @@ interface LayerTreeRow {
     descriptor: string | null;
     /** A part inside a Repeater's template that reads the row (or any source): the plug glyph. */
     bound: boolean;
+    /** A composite part's role chip (`trigger`, `card.title`), or null. */
+    roleChip: string | null;
     /** Set on the LAST visible row of a Repeater's template: the "N more rows" line follows it. */
     moreRows: LayerMoreRows | null;
 }
@@ -3230,6 +3325,9 @@ interface LayerTreeContext {
     isExpanded(node: ComponentNode): boolean;
     /** The live Repeater's rows (its rendered component), or null when it has not rendered. */
     repeaterRows(node: ComponentNode): LayerRepeaterRows | null;
+    /** A composite whose items come FROM CONTENT (CC2): its root row's sub-label ("From faqs · 6 rows",
+     *  board 9), in the host's language. Absent → the Repeater's own `alias × N`. */
+    fromContentLabel?(rows: LayerRepeaterRows): string | null;
 }
 /** The alias a Repeater repeats — its `source` binding (canonical), else its `source` trait. */
 declare function repeaterSourceAlias(node: ComponentNode): string;
@@ -3291,7 +3389,8 @@ declare class LayerTreeComponent implements OnInit, OnDestroy {
     constructor(registry: ComponentRegistryService, overlayService: OverlayService, dragEngine: DragEngineService);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    /** "5 more rows from projects" — the line after a Repeater's template (boards 4 / 8). */
+    /** "5 more rows from projects" — the line after a Repeater's template (boards 4 / 8); a composite's says
+     *  "— edit the template" too (board 9). */
     moreRowsText(more: LayerMoreRows): string;
     /** The name's title — the full text a narrow sidebar truncates: the name, its sub-label, and every
      *  binding a bound part holds. */
@@ -3330,6 +3429,8 @@ interface Crumb {
     /** `null` for the Body crumb: the page root is not a node in the layout tree. */
     node: ComponentNode | null;
     label: string;
+    /** A composite ROOT's kind glyph (board 3: "≡ Accordion"), or null. */
+    icon: string | null;
     /** True for the last crumb (the selected node, or Body when nothing is selected). */
     isCurrent: boolean;
     /** Stable track key — nodes are tracked by reference, Body by its label. */
@@ -3445,6 +3546,21 @@ declare function findNodeLocation(roots: ComponentNode[], target: ComponentNode)
  */
 declare function wrapNode(roots: ComponentNode[], target: ComponentNode, wrapper: ComponentNode): ComponentNode | null;
 
+/**
+ * The same node as another TYPE (CC2: an Accordion switching Manual ⇄ From content is a Container ⇄ a
+ * Repeater, board 9). A fresh `next` node of the new type (the caller's `createConfig`) takes over
+ * everything that is the node's and not its type's: its id (so its rules, selection and history stay), its
+ * name, role, element style, every style value BOTH types have a slot for, its state, targeted-state and
+ * breakpoint styles, interactions, non-source bindings, global placement — and every content trait both
+ * types declare (a composite's behaviour). Children are the caller's (the switch decides them). Pure: `node`
+ * is not touched.
+ */
+declare function retypeNode(node: ComponentNode, next: ComponentNode): ComponentNode;
+
+declare function regenerateNodeIds(root: ComponentNode, opts?: {
+    styleId?: 'clear' | 'regenerate';
+}): void;
+
 /**
  * State OUTSIDE the layout that one step changed together with it — e.g. adopting a page's element
  * styles (DS7) also sets the page's design-system flag and links its global elements. Opaque here;
@@ -3487,15 +3603,49 @@ declare class BuilderHistoryService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BuilderHistoryService>;
 }
 
+/**
+ * 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):
+ * - 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.
+ * Canvas-only: it never writes a node, so the saved page is unchanged and nothing becomes an undo step.
+ */
+declare class CompositeCanvasService implements OnDestroy {
+    private readonly designState;
+    private readonly zone;
+    private readonly attached;
+    private readonly sub;
+    constructor(designState: CanvasDesignStateService | null, zone: NgZone);
+    ngOnDestroy(): void;
+    /** An accordion root rendered on the canvas: run it. `element` is the root's rendered element. */
+    attach(node: ComponentNode, element: HTMLElement): void;
+    detach(nodeId: string | null | undefined): void;
+    /** The root's behaviour changed in its panel (Allow several open, Open by default). */
+    refreshBehaviour(node: ComponentNode): void;
+    /** The runtime of an attached root (the e2e harness and the panels read its state). */
+    runtimeOf(nodeId: string | null | undefined): AccordionRuntime | null;
+    private applyDesignState;
+    /** 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. */
+    private forcedFor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CompositeCanvasService, [{ optional: true; }, null]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CompositeCanvasService>;
+}
+
 /**
  * Parts that are HIDDEN AT REST (complex-components R2, board 3): on the live site they are not on
  * 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. Today: a Dialog (the
- * mobile menu's drawer, a consent banner). CC2 adds a collapsed Accordion panel and an inactive tab.
+ * 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.
  */
 declare const HIDDEN_AT_REST_TYPES: ReadonlyArray<string>;
+declare const HIDDEN_AT_REST_ROLES: ReadonlyArray<string>;
 declare function isHiddenAtRest(node: {
     type?: string;
+    role?: string | null;
 } | null | undefined): boolean;
 /**
  * How the selection shows a node hidden at rest — the two approved rules, by what the node IS:
@@ -3522,7 +3672,10 @@ declare function pathToNode<T extends {
  *
  * - `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.
  */
@@ -3547,6 +3700,16 @@ interface GlobalLayerSource {
 /** Fixed at its base or at any breakpoint: it pins to the viewport, so on the canvas it pins to the frame. */
 declare function isPinnedGlobal(node: GlobalLayerSource): boolean;
 declare function globalCanvasLayer(node: GlobalLayerSource): GlobalCanvasLayer;
+interface OverlayGlobals<T> {
+    /** Every BEFORE global, drawn in the overlay's `.iox-canvas-globals-before` wrapper. The in-flow ones
+     *  stack in it and its block size is the page's top reserve; a fixed / absolute one and a Dialog's
+     *  fixed stage are out of its flow, so they overlay the page as they do on the live site. */
+    before: T[];
+    /** The pinned AFTER globals (a fixed bottom bar, a Dialog), after the wrapper. */
+    pinnedAfter: T[];
+}
+/** What the overlay draws, in order (iox-ui#19). Any global that is not AFTER is drawn before the page. */
+declare function overlayGlobals<T extends GlobalLayerSource>(globals: readonly T[]): OverlayGlobals<T>;
 
 /**
  * node-path — pure ancestor-chain helpers for the builder's node tree.
@@ -3713,10 +3876,18 @@ declare function buildPalettePreset(def: PalettePresetDef, createConfig: (type:
 declare enum CompositePresetId {
     Card = "card",
     Badge = "badge",
-    Chip = "chip"
+    Chip = "chip",
+    Accordion = "accordion"
+}
+/** 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). */
+declare enum CompositePaletteGroup {
+    ContentBlocks = "content-blocks",
+    Interactive = "interactive"
 }
 interface CompositePresetDef {
     id: CompositePresetId;
+    group: CompositePaletteGroup;
     name: string;
     icon: string;
     description: string;
@@ -4019,5 +4190,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-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, 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_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, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
-export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, CanvasDesignSnapshot, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, CompositePresetDef, ConsentPreset, CreateConfig, Crumb, DesignSpecimenCopy, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormStateSnapshot, GlobalLayerSource, HistoryChange, HistoryEntry, HistoryStep, InsertRefusedEvent, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxInteraction, IoxSymbol, LayerMoreRows, LayerRepeaterRows, LayerTreeContext, LayerTreeRow, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RootEscapeMemory, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, UpsertTokensOptions, ViewportState, ZoomOption };
+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_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, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, CanvasDesignSnapshot, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, CompositePresetDef, ConsentPreset, CreateConfig, Crumb, DesignSpecimenCopy, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormStateSnapshot, GlobalLayerSource, HistoryChange, HistoryEntry, HistoryStep, InsertRefusedEvent, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxInteraction, IoxSymbol, LayerMoreRows, LayerRepeaterRows, LayerTreeContext, LayerTreeRow, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, OverlayGlobals, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RootEscapeMemory, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, UpsertTokensOptions, ViewportState, ZoomOption };

package/package.json

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