@vectoriox/iox-builder 9.9.0 → 9.10.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,18 +16,20 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { StructureEdit, isAccordionPart, isDisclosurePart, structureRefusal, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, runCompositeItemAction, shouldScrollToItem, DisclosureRole, AccordionRuntime, accordionBehaviour, compositeScopeId, compositeRowKeys, compositeKindOfRole, closestAccordionItem, isCompositeRoot, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, CompositeKind, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, structureRefusal, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, AccordionRuntime, accordionBehaviour, compositeScopeId, compositeRowKeys, compositeKindOfRole, closestAccordionItem, isCompositeRoot, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
+import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES, opensAtClickedItem } from '@vectoriox/iox-ui/actions-core';
 import Lenis from 'lenis';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
+import { planVideo, VideoSource, VIDEO_PROVIDER_LABEL, VideoTrait, VideoMode } from '@vectoriox/iox-ui/media-core';
+import { ConsentCategory } from '@vectoriox/iox-ui/consent-core';
 
 var PanelEventTypes;
 (function (PanelEventTypes) {
@@ -212,6 +214,12 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.kindCard': 'Card',
     'builder.chrome.kindAccordion': 'Accordion',
     'builder.chrome.kindDisclosure': 'Disclosure',
+    'builder.chrome.kindSlider': 'Slider',
+    'builder.chrome.kindVideo': 'Video',
+    'builder.chrome.videoPosterOnly': 'poster only',
+    'builder.chrome.videoFile': 'Uploaded file',
+    'builder.chrome.refuseLockedSliderPartMove': 'This control belongs to its slider — it can’t be moved out.',
+    'builder.chrome.refuseLockedSliderPause': 'The pause button stays while Autoplay is on — moving content must be pausable. Turn Autoplay off in the slider’s Bindings to remove it.',
     'builder.chrome.refuseLockedDisclosurePart': 'A disclosure keeps its toggle and its panel. Delete the whole disclosure instead.',
     'builder.chrome.refuseLockedDisclosurePartMove': 'This part belongs to its disclosure — it can’t be moved out.',
     'builder.chrome.refuseLockedItemPart': 'An item keeps its header and its panel. Delete the whole item, or the accordion.',
@@ -470,6 +478,10 @@ var InsertRefusal;
     InsertRefusal["LockedDisclosurePartMove"] = "lockedDisclosurePartMove";
     /** A disclosure's toggle or panel (CC2.1) deleted on its own. */
     InsertRefusal["LockedDisclosurePart"] = "lockedDisclosurePart";
+    /** A Slider's control (CC3) works only as its own direct child. */
+    InsertRefusal["LockedSliderPartMove"] = "lockedSliderPartMove";
+    /** The pause control stays while Autoplay is on (WCAG 2.2.2) — the Autoplay switch removes it. */
+    InsertRefusal["LockedSliderPause"] = "lockedSliderPause";
 })(InsertRefusal || (InsertRefusal = {}));
 const FORM_STATE_BLOCK_TYPES = new Set(['FormSuccess', 'FormError']);
 /** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
@@ -484,6 +496,8 @@ const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
     [InsertRefusal.LastItem]: 'builder.chrome.refuseLastItem',
     [InsertRefusal.LockedDisclosurePartMove]: 'builder.chrome.refuseLockedDisclosurePartMove',
     [InsertRefusal.LockedDisclosurePart]: 'builder.chrome.refuseLockedDisclosurePart',
+    [InsertRefusal.LockedSliderPartMove]: 'builder.chrome.refuseLockedSliderPartMove',
+    [InsertRefusal.LockedSliderPause]: 'builder.chrome.refuseLockedSliderPause',
 });
 /** Which refusal says a locked part's move / delete, by the composite it belongs to (a card's is the default). */
 function lockedRefusal(node, edit) {
@@ -492,6 +506,8 @@ function lockedRefusal(node, edit) {
         return move ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedItemPart;
     if (isDisclosurePart(node))
         return move ? InsertRefusal.LockedDisclosurePartMove : InsertRefusal.LockedDisclosurePart;
+    if (isSliderPart(node))
+        return move ? InsertRefusal.LockedSliderPartMove : InsertRefusal.LockedSliderPause;
     return move ? InsertRefusal.LockedPartMove : InsertRefusal.LockedPart;
 }
 /** The refusal in the host's language (the library's English when no host resolver is provided). */
@@ -3762,7 +3778,7 @@ class InteractionEngineService {
             // impossible. The canvas twin registered open/close/toggle under its nodeId, exactly
             // the Swiper-method pattern; a missing/mistargeted id is a silent no-op, never a throw.
             if (DIALOG_ACTION_TYPES.has(action.type)) {
-                this.executeDialogAction(action);
+                this.executeDialogAction(action, selfEl);
                 continue;
             }
             // Item actions (CC2.1 — composite T14): the canvas RUNS them on the target item's own runtime — the
@@ -3884,13 +3900,17 @@ class InteractionEngineService {
         const detail = { type: action.type, params: action.params ?? {}, target: action.target };
         window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
     }
-    executeDialogAction(action) {
+    executeDialogAction(action, selfEl) {
         const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
         if (!dialog)
             return;
         switch (action.type) {
             case 'openDialog':
                 dialog.open?.();
+                // CC3 "Open at the clicked item": the lightbox's slider goes to the clicked row's slide — the same
+                // rule the live site runs (composite-core `slideIndexForRow`), once the canvas twin has rendered it.
+                if (opensAtClickedItem(action))
+                    this.slideDialogToRow(action.target, rowIndexOf$1(selfEl));
                 break;
             case 'closeDialog':
                 dialog.close?.();
@@ -3900,6 +3920,22 @@ class InteractionEngineService {
                 break;
         }
     }
+    /** The slider inside the opened dialog (its canvas twin renders on the next passes) → the row's slide. */
+    slideDialogToRow(dialogId, row) {
+        let tries = 0;
+        const attempt = () => {
+            const host = document.querySelector(`.iox-node-${CSS.escape(dialogId)}`);
+            const swiper = host?.querySelector('.swiper')?.swiper;
+            if (swiper?.slides?.length) {
+                swiper.update?.();
+                swiper.slideTo(slideIndexForRow(row, swiper.slides.length), 0);
+                return;
+            }
+            if (++tries < 40)
+                requestAnimationFrame(attempt);
+        };
+        requestAnimationFrame(attempt);
+    }
     executeSwiperAction(action) {
         // Target is the nodeId of the SliderContainer to control.
         const swiper = this.instanceRegistry.get(action.target);
@@ -4082,8 +4118,14 @@ var SelectionReveal;
     SelectionReveal["WhileSelected"] = "while-selected";
     SelectionReveal["UntilClosed"] = "until-closed";
 })(SelectionReveal || (SelectionReveal = {}));
+/**
+ * Parts hidden at rest that live in a composite's TOGGLE, not in its panel (CC2.1 follow-up, approved 2026-10-21): a
+ * click on one on the canvas toggles the composite live — selecting it never forces the reveal, so "Read less"
+ * closes the disclosure it was clicked in. Only a part inside a PANEL is revealed by the selection.
+ */
+const TOGGLE_PART_ROLES = [DisclosureRole.Less];
 function selectionRevealOf(node) {
-    if (!isHiddenAtRest(node))
+    if (!isHiddenAtRest(node) || (!!node?.role && TOGGLE_PART_ROLES.includes(node.role)))
         return null;
     return node?.role ? SelectionReveal.WhileSelected : SelectionReveal.UntilClosed;
 }
@@ -5373,6 +5415,7 @@ var CompositePresetId;
     CompositePresetId["Chip"] = "chip";
     CompositePresetId["Accordion"] = "accordion";
     CompositePresetId["Disclosure"] = "disclosure";
+    CompositePresetId["Lightbox"] = "lightbox";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
  *  composites (the Accordion — CC2, the Disclosure — CC2.1; Tabs and the floating family later). */
@@ -5407,6 +5450,11 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: '"Read more" — a button that reveals the text below it and reads "Read less" while it is open.',
         build: create => buildDisclosureRecipe(create),
     },
+    {
+        id: CompositePresetId.Lightbox, group: CompositePaletteGroup.Interactive, name: 'Lightbox', icon: 'ph-thin ph-frame-corners',
+        description: 'A full-screen dialog with a slider — bind its slider to your gallery\'s source, and each thumbnail opens it at its own image.',
+        build: create => buildLightboxRecipe(create),
+    },
 ]);
 /**
  * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
@@ -5426,6 +5474,11 @@ function builderCompositeFactory(createConfig, baselineStyles) {
         if (spec.elementStyle && spec.elementStyle !== node.elementStyle) {
             switchElementStyle(node, node.elementStyle, spec.elementStyle, baselineStyles(spec.type));
         }
+        else if (spec.elementStyle === NO_ELEMENT_STYLE && node.elementStyle) {
+            // NO_ELEMENT_STYLE asks for no style (undefined / null keep the type's default): a migrated slider's bare
+            // chevrons, a lightbox's slide (CC3).
+            releaseElementStyle(node, node.elementStyle, baselineStyles(spec.type));
+        }
         if (node.children)
             node.children = [];
         return node;
@@ -6858,7 +6911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const SHORT_ROLE_KINDS = new Set([CompositeKind.Accordion, CompositeKind.Disclosure]);
 /** A composite kind's glyph (Phosphor, weight-less): the badge, the root's crumb and its tree row carry it
  *  (board 3: "the composite root carrying its kind icon"). A card keeps the generic stack glyph. */
-const KIND_GLYPHS = { [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down' };
+const KIND_GLYPHS = { [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down', slider: 'ph-slideshow' };
 const DEFAULT_KIND_GLYPH = 'ph-stack';
 /** The tree icon of an accordion's structural parts (board 3): rows on the root, a stack on an item and a
  *  panel, a cursor on the header, a sparkle on the icon. Other parts keep their type's icon. */
@@ -6874,6 +6927,11 @@ const PART_ICONS = {
     [DisclosureRole.Trigger]: 'ph-thin ph-cursor',
     [DisclosureRole.Panel]: 'ph-thin ph-stack',
     [DisclosureRole.Icon]: 'ph-thin ph-sparkle',
+    // CC3 — a Slider's controls (board 6): a cursor on the buttons, six dots on the pagination.
+    [SliderRole.Pause]: 'ph-thin ph-cursor',
+    [SliderRole.Prev]: 'ph-thin ph-cursor',
+    [SliderRole.Next]: 'ph-thin ph-cursor',
+    [SliderRole.Pagination]: 'ph-thin ph-dots-six',
 };
 /** The glyph of a role's composite kind (`ph-rows` for an accordion and its parts). */
 function compositeKindGlyph(role) {
@@ -6958,7 +7016,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const FROM_ROW_KEY = 'builder.chrome.fromRow';
 const ADD_ITEM_KEY = 'builder.chrome.addItem';
 /** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
-const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure' };
+const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure', slider: 'builder.chrome.kindSlider' };
+const VIDEO_TYPE = 'Video';
+const VIDEO_KIND_KEY = 'builder.chrome.kindVideo';
+const VIDEO_POSTER_ONLY_KEY = 'builder.chrome.videoPosterOnly';
+const VIDEO_FILE_KEY = 'builder.chrome.videoFile';
 /** The parts that offer "Add item" on the selection toolbar (board 3: the "Add slide" pattern). */
 const ADD_ITEM_ROLES = new Set([AccordionRole.Accordion, AccordionRole.Item, AccordionRole.Trigger, AccordionRole.Panel]);
 class OverlayComponent {
@@ -7175,11 +7237,17 @@ class OverlayComponent {
     }
     /** The kind badge's glyph: the composite's kind icon (board 9: "kind icon + 'Accordion · trigger'"). */
     get selectedRoleIcon() {
+        if (this.selectEntry?.node?.type === VIDEO_TYPE && !this.selectEntry.node.role)
+            return 'ph-fill ph-film-strip';
         return `ph-fill ${compositeKindGlyph(this.selectEntry?.node?.role ?? '')}`;
     }
-    /** A composite part's kind + role under the selection (board 3/8 "Selection kind badge"), or null. */
+    /** A composite part's kind + role under the selection (board 3/8 "Selection kind badge"), or null. A Video says
+     *  where it plays from and that the canvas shows its poster only (board 5: "Video · YouTube · poster only"). */
     get selectedRoleBadge() {
-        const role = this.selectEntry?.node?.role;
+        const node = this.selectEntry?.node;
+        if (node?.type === VIDEO_TYPE && !node.role)
+            return this.videoBadge(node);
+        const role = node?.role;
         if (!role)
             return null;
         const prefix = role.split('.')[0];
@@ -7189,6 +7257,13 @@ class OverlayComponent {
         const row = this.overlayService.selectedRow;
         return row ? `${badge} · ${this.builderLabels(FROM_ROW_KEY, BUILDER_CHROME_EN[FROM_ROW_KEY]).replace('{row}', String(row))}` : badge;
     }
+    videoBadge(node) {
+        const plan = planVideo(node, null);
+        const where = plan.source === VideoSource.File
+            ? this.builderLabels(VIDEO_FILE_KEY, BUILDER_CHROME_EN[VIDEO_FILE_KEY])
+            : VIDEO_PROVIDER_LABEL[plan.source];
+        return `${this.builderLabels(VIDEO_KIND_KEY, BUILDER_CHROME_EN[VIDEO_KIND_KEY])} · ${where} · ${this.builderLabels(VIDEO_POSTER_ONLY_KEY, BUILDER_CHROME_EN[VIDEO_POSTER_ONLY_KEY])}`;
+    }
     /** The selection toolbar's name: the part's LAYER name (board 3 — "Header", "Accordion"), else its type. */
     get toolbarName() {
         return this.selectEntry?.node?.label || this.selectEntry?.componentName || '';
@@ -10654,7 +10729,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/** Swiper's event → the interaction trigger it replays (componentEvents). */
+const SWIPER_TRIGGER = {
+    slideChange: 'swiperSlideChange', reachBeginning: 'swiperReachBeginning', reachEnd: 'swiperReachEnd',
+    autoplayStart: 'swiperAutoplayStart', autoplayStop: 'swiperAutoplayStop',
+};
 class SliderContainerComponent {
+    /** Every child — the slides AND the control parts (CC3). Split once per change, never in a getter. */
+    set children(value) {
+        this._children = value ?? [];
+        const { lead, slides, trail } = splitSliderChildren(this._children);
+        this.leadParts = lead;
+        this.slides = slides;
+        this.trailParts = trail;
+        this.controlParts = hasSliderParts({ children: this._children });
+    }
+    get children() { return this._children; }
+    /** A saved slider whose controls are not parts yet keeps Swiper-drawn ones. */
+    get legacyControls() { return !this.controlParts; }
     set style(v) {
         if (v === this._style)
             return;
@@ -10701,7 +10793,14 @@ class SliderContainerComponent {
         this.dataSourceService = dataSourceService;
         this.dsRegistry = dsRegistry;
         this.panelEventService = panelEventService;
-        this.children = [];
+        this._children = [];
+        /** The slides (into `.swiper-wrapper`); the template slide of a bound slider is `slides[0]`. */
+        this.slides = [];
+        /** Control parts before the first slide / after it — rendered beside the wrapper, inside `.swiper`. */
+        this.leadParts = [];
+        this.trailParts = [];
+        /** The controls are parts: Swiper draws none of its own. */
+        this.controlParts = false;
         this._style = {};
         this._previewStyle = {};
         this._editShellStyle = { position: 'relative' };
@@ -10852,7 +10951,7 @@ class SliderContainerComponent {
         });
     }
     refreshPreviews() {
-        if (!this.items.length || !this.children.length) {
+        if (!this.items.length || !this.slides.length) {
             this.previewSlides = [];
             this.cdr.markForCheck();
             this._scheduleReinit();
@@ -10860,16 +10959,16 @@ class SliderContainerComponent {
         }
         this.applyFirstItemToTemplate();
         // Each preview slide = one cloned SliderSlide node with item data resolved
-        this.previewSlides = this.items.slice(1).map(item => cloneNodesForItem([this.children[0]], item)[0]);
+        this.previewSlides = this.items.slice(1).map(item => cloneNodesForItem([this.slides[0]], item)[0]);
         this.cdr.markForCheck();
         this._scheduleReinit();
     }
     applyFirstItemToTemplate() {
         const item = this.items[0];
-        if (!item || !this.children.length || !this.overlayService)
+        if (!item || !this.slides.length || !this.overlayService)
             return;
         // Bindings live on leaf nodes inside the template slide, so recurse into the tree
-        this.applyItemToNodes([this.children[0]], item);
+        this.applyItemToNodes([this.slides[0]], item);
     }
     applyItemToNodes(nodes, item) {
         for (const node of nodes) {
@@ -10895,7 +10994,7 @@ class SliderContainerComponent {
     _isInTemplate(target) {
         const search = (nodes) => nodes.some(c => c === target || c.id === target.id ||
             (c.children?.length ? search(c.children) : false));
-        return this.children.length > 0 && search([this.children[0]]);
+        return this.slides.length > 0 && search([this.slides[0]]);
     }
     _scheduleReinit() {
         this._destroySwiper();
@@ -10908,123 +11007,31 @@ class SliderContainerComponent {
         const el = this.isPreview ? this.swiperEl?.nativeElement : this.editSwiperEl?.nativeElement;
         if (!el)
             return;
-        const [{ default: Swiper }, swiperModules] = await Promise.all([
-            import('swiper'),
-            import('swiper/modules'),
-        ]);
-        const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, FreeMode, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCards, EffectCreative, } = swiperModules;
-        const modules = [];
-        if (this.enableNavigation)
-            modules.push(Navigation);
-        if (this.enablePagination)
-            modules.push(Pagination);
-        if (this.enableScrollbar)
-            modules.push(Scrollbar);
-        const config = {
-            modules,
-            direction: this.direction,
-            slidesPerView: this.slidesPerView,
-            slidesPerGroup: this.slidesPerGroup > 1 ? this.slidesPerGroup : 1,
-            spaceBetween: this.spaceBetween,
-            speed: this.isPreview ? this.speed : 300,
-            // Always slide effect in edit mode — fade/cube etc. hide all but active slide
-            effect: this.isPreview ? this.effect : 'slide',
-            centeredSlides: this.centeredSlides,
-            initialSlide: this.initialSlide,
-            autoHeight: this.autoHeight,
-        };
-        if (this.isPreview) {
-            // Full interactive config for preview
-            config['grabCursor'] = this.grabCursor;
-            config['slideToClickedSlide'] = this.slideToClickedSlide;
-            config['loop'] = this.loop === 'loop';
-            config['rewind'] = this.loop === 'rewind';
-            if (this.freeMode) {
-                modules.push(FreeMode);
-                config['freeMode'] = true;
-            }
-            if (this.enableAutoplay) {
-                modules.push(Autoplay);
-            }
-            if (this.enableKeyboard) {
-                modules.push(Keyboard);
-            }
-            if (this.enableMousewheel) {
-                modules.push(Mousewheel);
-            }
-            if (this.enableZoom) {
-                modules.push(Zoom);
-            }
-            if (this.enableGrid) {
-                modules.push(Grid);
-            }
-            if (this.enableParallax) {
-                modules.push(Parallax);
-            }
-            const effectMap = {
-                fade: EffectFade, cube: EffectCube, flip: EffectFlip,
-                coverflow: EffectCoverflow, cards: EffectCards, creative: EffectCreative,
-            };
-            if (this.effect !== 'slide' && effectMap[this.effect]) {
-                modules.push(effectMap[this.effect]);
-            }
-            if (this.enableNavigation) {
-                config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
-            }
-            if (this.enablePagination) {
-                config['pagination'] = {
-                    el: '.swiper-pagination',
-                    type: this.paginationType,
-                    clickable: this.paginationClickable,
-                    dynamicBullets: this.paginationDynamicBullets,
-                };
-            }
-            if (this.enableScrollbar)
-                config['scrollbar'] = { el: '.swiper-scrollbar', draggable: true };
-            if (this.enableAutoplay) {
-                config['autoplay'] = {
-                    delay: this.autoplayDelay,
-                    pauseOnMouseEnter: this.autoplayPauseOnMouseEnter,
-                    disableOnInteraction: this.autoplayDisableOnInteraction,
-                };
-            }
-            if (this.enableGrid && this.gridRows > 1)
-                config['grid'] = { rows: this.gridRows };
-            if (this.breakpoints) {
-                try {
-                    config['breakpoints'] = JSON.parse(this.breakpoints);
-                }
-                catch { /* ignore */ }
-            }
-            config['on'] = {
-                slideChange: (swiper) => this._onSwiperEvent('swiperSlideChange', swiper),
-                reachBeginning: (swiper) => this._onSwiperEvent('swiperReachBeginning', swiper),
-                reachEnd: (swiper) => this._onSwiperEvent('swiperReachEnd', swiper),
-                autoplayStart: (swiper) => this._onSwiperEvent('swiperAutoplayStart', swiper),
-                autoplayStop: (swiper) => this._onSwiperEvent('swiperAutoplayStop', swiper),
-            };
-        }
-        else {
-            // Edit mode: disable touch/swipe so builder click handlers work normally
-            config['allowTouchMove'] = false;
-            config['simulateTouch'] = false;
-            if (this.enableNavigation) {
-                config['navigation'] = { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' };
-            }
-            if (this.enablePagination) {
-                config['pagination'] = {
-                    el: '.swiper-pagination',
-                    type: this.paginationType,
-                    clickable: this.paginationClickable,
-                    dynamicBullets: this.paginationDynamicBullets,
-                };
-            }
-            if (this.enableScrollbar)
-                config['scrollbar'] = { el: '.swiper-scrollbar', draggable: false };
-        }
-        this._swiper = new Swiper(el, config);
+        // The ONE Swiper decision (iox-ui `bootSlider` → `planSwiperOptions`): the EDIT canvas is tamed (no touch,
+        // loop or autoplay; the parts still navigate); Preview is the live site's — the A11y module, the pause
+        // control, the live region (CC3; Preview used to build its own config and skipped A11y).
+        const swiper = await bootSlider(el, this.swiperInputs(), {
+            edit: !this.isPreview,
+            onEvent: this.isPreview ? (event, sw) => this._onSwiperEvent(SWIPER_TRIGGER[event] ?? event, sw) : undefined,
+        });
+        if (!swiper)
+            return;
+        this._swiper = swiper;
         this.instanceRegistry.register(this.nodeId, this._swiper);
     }
+    swiperInputs() {
+        return {
+            dir: this.dir, direction: this.direction, loop: this.loop, slidesPerView: this.slidesPerView, slidesPerGroup: this.slidesPerGroup,
+            spaceBetween: this.spaceBetween, speed: this.speed, effect: this.effect, grabCursor: this.grabCursor, centeredSlides: this.centeredSlides,
+            initialSlide: this.initialSlide, autoHeight: this.autoHeight, slideToClickedSlide: this.slideToClickedSlide, freeMode: this.freeMode,
+            enableNavigation: this.enableNavigation, enablePagination: this.enablePagination, enableScrollbar: this.enableScrollbar,
+            enableAutoplay: this.enableAutoplay, enableKeyboard: this.enableKeyboard, enableMousewheel: this.enableMousewheel,
+            enableZoom: this.enableZoom, enableGrid: this.enableGrid, enableParallax: this.enableParallax, autoplayDelay: this.autoplayDelay,
+            autoplayPauseOnMouseEnter: this.autoplayPauseOnMouseEnter, autoplayDisableOnInteraction: this.autoplayDisableOnInteraction,
+            paginationType: this.paginationType, paginationClickable: this.paginationClickable, paginationDynamicBullets: this.paginationDynamicBullets,
+            gridRows: this.gridRows, breakpoints: this.breakpoints,
+        };
+    }
     _destroySwiper() {
         if (this._swiper) {
             this._swiper.destroy(true, true);
@@ -11037,7 +11044,7 @@ class SliderContainerComponent {
         if (eventName === 'swiperSlideChange') {
             const prevIdx = swiper.previousIndex;
             const activeIdx = swiper.activeIndex;
-            const allSlides = this._source ? [this.children[0], ...this.previewSlides] : this.children;
+            const allSlides = this._source ? [this.slides[0], ...this.previewSlides] : this.slides;
             if (prevIdx !== undefined && allSlides[prevIdx]) {
                 this.interactionEngine.replayTrigger(allSlides[prevIdx].id, 'swiperSlideInactive');
             }
@@ -11067,11 +11074,17 @@ class SliderContainerComponent {
             </div>
 
             <div #editSwiperEl class="swiper swiper-edit" [attr.dir]="dir" [style.direction]="dir">
+                <!-- CC3: the control PARTS (Pause, Previous, Next, Pagination) render inside .swiper, beside the
+                     wrapper (never in it — slider.md); selectable and styled on their own (R2). -->
+                <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
                 <div class="swiper-wrapper">
 
-                    <!-- NORMAL MODE: all children as draggable slides -->
+                    <!-- NORMAL MODE: all slides draggable -->
                     <ng-container *ngIf="!source">
-                        <div *ngFor="let child of children"
+                        <div *ngFor="let child of slides; trackBy: trackByNodeId"
                              class="swiper-slide"
                              [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
                              ioxDraggable
@@ -11089,22 +11102,24 @@ class SliderContainerComponent {
                     <!-- REPEAT MODE: template slide (item 0) + dimmed preview slides (items 1..N) -->
                     <ng-container *ngIf="source">
                         <!-- Template slide — draggable/editable, receives item[0] data -->
-                        <div *ngIf="children.length"
+                        <div *ngIf="slides.length"
                              class="swiper-slide"
-                             [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]"
+                             [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]"
+                             [attr.data-iox-row-idx]="0"
                              ioxDraggable
-                             [ioxDragData]="children[0]"
+                             [ioxDragData]="slides[0]"
                              [ioxDragSourceId]="dropListId">
                             <ng-container
-                                [ioxRender]="children[0]"
+                                [ioxRender]="slides[0]"
                                 (onClick)="childClick.emit($event)"
                                 (onMouseEnter)="childMouseEnter.emit($event)"
                                 (onMouseLeave)="childMouseLeave.emit()">
                             </ng-container>
                         </div>
                         <!-- Preview slides — dimmed, non-interactive, data resolved from items 1..N -->
-                        <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                        <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                              class="swiper-slide slider-preview-slide"
+                             [attr.data-iox-row-idx]="i + 1"
                              [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                             <ng-container
                                 [ioxRender]="slide"
@@ -11116,23 +11131,28 @@ class SliderContainerComponent {
                     </ng-container>
 
                 </div>
+                <ng-container *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
+                <div *ngIf="!source && !slides.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
 
-                <div *ngIf="enablePagination" class="swiper-pagination"></div>
+                <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
                 <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
             </div>
 
-            <!-- Nav buttons live on the shell, not inside .swiper, so overflow:hidden never clips them
-                 and top:50%+transform always centers on the real slide height -->
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
+            <!-- Legacy (Swiper-drawn) nav buttons live on the shell, not inside .swiper, so overflow:hidden never
+                 clips them and top:50%+transform always centers on the real slide height. A slider whose controls
+                 are PARTS (CC3) draws none: the parts are the controls. -->
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
                     (click)="_swiper?.slidePrev()" type="button" title="Previous slide">
                 <i class="ph-thin ph-caret-left"></i>
             </button>
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
                     (click)="_swiper?.slideNext()" type="button" title="Next slide">
                 <i class="ph-thin ph-caret-right"></i>
             </button>
@@ -11149,12 +11169,16 @@ class SliderContainerComponent {
              [style.--swiper-navigation-color]="navigationColor || null"
              [style.--swiper-navigation-size.px]="navigationSize || null"
              [style.--swiper-pagination-color]="paginationColor || null">
+            <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </ng-container>
             <div class="swiper-wrapper">
                 <!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
                      Wrap each rendered slide in one (same structure as edit mode) so the
                      app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
                 <ng-container *ngIf="!source">
-                    <div *ngFor="let child of children"
+                    <div *ngFor="let child of slides; trackBy: trackByNodeId"
                          class="swiper-slide"
                          [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
                         <ng-container
@@ -11165,20 +11189,22 @@ class SliderContainerComponent {
                         </ng-container>
                     </div>
                 </ng-container>
-                <!-- REPEAT: template slide + preview slides -->
+                <!-- REPEAT: template slide + preview slides; each is a row (a lightbox opens at the clicked one) -->
                 <ng-container *ngIf="source">
-                    <div *ngIf="children.length"
+                    <div *ngIf="slides.length"
                          class="swiper-slide"
-                         [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
+                         [attr.data-iox-row-idx]="0"
+                         [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]">
                         <ng-container
-                            [ioxRender]="children[0]"
+                            [ioxRender]="slides[0]"
                             (onClick)="childClick.emit($event)"
                             (onMouseEnter)="childMouseEnter.emit($event)"
                             (onMouseLeave)="childMouseLeave.emit()">
                         </ng-container>
                     </div>
-                    <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                    <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                          class="swiper-slide"
+                         [attr.data-iox-row-idx]="i + 1"
                          [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                         <ng-container
                             [ioxRender]="slide"
@@ -11189,9 +11215,13 @@ class SliderContainerComponent {
                     </div>
                 </ng-container>
             </div>
-            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
-            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
-            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <ng-container *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </ng-container>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
     `, isInline: true, styles: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.slider-repeat-badge{position:absolute;top:0;left:0;z-index:10;display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px solid rgba(203,144,144,.5);border-radius:0 0 4px;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;pointer-events:none}.slider-edit-shell:hover .slider-repeat-badge{opacity:1}.slider-repeat-badge-count{font-weight:600}.slider-badge-spin{animation:slider-badge-spin 1s linear infinite}@keyframes slider-badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-preview-slide{opacity:.55;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
@@ -11218,11 +11248,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             </div>
 
             <div #editSwiperEl class="swiper swiper-edit" [attr.dir]="dir" [style.direction]="dir">
+                <!-- CC3: the control PARTS (Pause, Previous, Next, Pagination) render inside .swiper, beside the
+                     wrapper (never in it — slider.md); selectable and styled on their own (R2). -->
+                <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
                 <div class="swiper-wrapper">
 
-                    <!-- NORMAL MODE: all children as draggable slides -->
+                    <!-- NORMAL MODE: all slides draggable -->
                     <ng-container *ngIf="!source">
-                        <div *ngFor="let child of children"
+                        <div *ngFor="let child of slides; trackBy: trackByNodeId"
                              class="swiper-slide"
                              [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]"
                              ioxDraggable
@@ -11240,22 +11276,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     <!-- REPEAT MODE: template slide (item 0) + dimmed preview slides (items 1..N) -->
                     <ng-container *ngIf="source">
                         <!-- Template slide — draggable/editable, receives item[0] data -->
-                        <div *ngIf="children.length"
+                        <div *ngIf="slides.length"
                              class="swiper-slide"
-                             [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]"
+                             [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]"
+                             [attr.data-iox-row-idx]="0"
                              ioxDraggable
-                             [ioxDragData]="children[0]"
+                             [ioxDragData]="slides[0]"
                              [ioxDragSourceId]="dropListId">
                             <ng-container
-                                [ioxRender]="children[0]"
+                                [ioxRender]="slides[0]"
                                 (onClick)="childClick.emit($event)"
                                 (onMouseEnter)="childMouseEnter.emit($event)"
                                 (onMouseLeave)="childMouseLeave.emit()">
                             </ng-container>
                         </div>
                         <!-- Preview slides — dimmed, non-interactive, data resolved from items 1..N -->
-                        <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                        <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                              class="swiper-slide slider-preview-slide"
+                             [attr.data-iox-row-idx]="i + 1"
                              [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                             <ng-container
                                 [ioxRender]="slide"
@@ -11267,23 +11305,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     </ng-container>
 
                 </div>
+                <ng-container *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                    <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                        (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+                </ng-container>
 
-                <div *ngIf="!source && !children.length" class="slider-edit-placeholder" data-iox-chrome>
+                <div *ngIf="!source && !slides.length" class="slider-edit-placeholder" data-iox-chrome>
                     <i class="ph-thin ph-sliders-horizontal"></i>
                     <span>Click + in toolbar to add a slide</span>
                 </div>
 
-                <div *ngIf="enablePagination" class="swiper-pagination"></div>
+                <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
                 <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
             </div>
 
-            <!-- Nav buttons live on the shell, not inside .swiper, so overflow:hidden never clips them
-                 and top:50%+transform always centers on the real slide height -->
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
+            <!-- Legacy (Swiper-drawn) nav buttons live on the shell, not inside .swiper, so overflow:hidden never
+                 clips them and top:50%+transform always centers on the real slide height. A slider whose controls
+                 are PARTS (CC3) draws none: the parts are the controls. -->
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--prev" data-iox-chrome
                     (click)="_swiper?.slidePrev()" type="button" title="Previous slide">
                 <i class="ph-thin ph-caret-left"></i>
             </button>
-            <button *ngIf="enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
+            <button *ngIf="legacyControls && enableNavigation" class="slider-edit-nav slider-edit-nav--next" data-iox-chrome
                     (click)="_swiper?.slideNext()" type="button" title="Next slide">
                 <i class="ph-thin ph-caret-right"></i>
             </button>
@@ -11300,12 +11343,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
              [style.--swiper-navigation-color]="navigationColor || null"
              [style.--swiper-navigation-size.px]="navigationSize || null"
              [style.--swiper-pagination-color]="paginationColor || null">
+            <ng-container *ngFor="let part of leadParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </ng-container>
             <div class="swiper-wrapper">
                 <!-- Swiper requires .swiper-slide as a DIRECT child of .swiper-wrapper.
                      Wrap each rendered slide in one (same structure as edit mode) so the
                      app-slider-slide host sits INSIDE the slide, not between it and the wrapper. -->
                 <ng-container *ngIf="!source">
-                    <div *ngFor="let child of children"
+                    <div *ngFor="let child of slides; trackBy: trackByNodeId"
                          class="swiper-slide"
                          [ngClass]="['iox-outer-' + (child.styleId ?? child.id)]">
                         <ng-container
@@ -11316,20 +11363,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         </ng-container>
                     </div>
                 </ng-container>
-                <!-- REPEAT: template slide + preview slides -->
+                <!-- REPEAT: template slide + preview slides; each is a row (a lightbox opens at the clicked one) -->
                 <ng-container *ngIf="source">
-                    <div *ngIf="children.length"
+                    <div *ngIf="slides.length"
                          class="swiper-slide"
-                         [ngClass]="['iox-outer-' + (children[0].styleId ?? children[0].id)]">
+                         [attr.data-iox-row-idx]="0"
+                         [ngClass]="['iox-outer-' + (slides[0].styleId ?? slides[0].id)]">
                         <ng-container
-                            [ioxRender]="children[0]"
+                            [ioxRender]="slides[0]"
                             (onClick)="childClick.emit($event)"
                             (onMouseEnter)="childMouseEnter.emit($event)"
                             (onMouseLeave)="childMouseLeave.emit()">
                         </ng-container>
                     </div>
-                    <div *ngFor="let slide of previewSlides; trackBy: trackByNodeId"
+                    <div *ngFor="let slide of previewSlides; let i = index; trackBy: trackByNodeId"
                          class="swiper-slide"
+                         [attr.data-iox-row-idx]="i + 1"
                          [ngClass]="['iox-outer-' + (slide.styleId ?? slide.id)]">
                         <ng-container
                             [ioxRender]="slide"
@@ -11340,9 +11389,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     </div>
                 </ng-container>
             </div>
-            <div *ngIf="enableNavigation" class="swiper-button-prev"></div>
-            <div *ngIf="enableNavigation" class="swiper-button-next"></div>
-            <div *ngIf="enablePagination" class="swiper-pagination"></div>
+            <ng-container *ngFor="let part of trailParts; trackBy: trackByNodeId">
+                <ng-container [ioxRender]="part" (onClick)="childClick.emit($event)"
+                    (onMouseEnter)="childMouseEnter.emit($event)" (onMouseLeave)="childMouseLeave.emit()"></ng-container>
+            </ng-container>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-prev"></div>
+            <div *ngIf="legacyControls && enableNavigation" class="swiper-button-next"></div>
+            <div *ngIf="legacyControls && enablePagination" class="swiper-pagination"></div>
             <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
     `, standalone: false, styles: [":host{display:block}.swiper-wrapper{height:auto}.slider-edit-shell{position:relative;display:block}.swiper-edit{width:100%}.swiper-edit .swiper-slide{position:relative}.slider-edit-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#00000038;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .15s}.slider-edit-nav:hover{background:#00000073}.slider-edit-nav--prev{left:8px}.slider-edit-nav--next{right:8px}.slider-edit-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.slider-edit-placeholder i{font-size:22px}.slider-repeat-badge{position:absolute;top:0;left:0;z-index:10;display:flex;align-items:center;gap:.4rem;padding:4px 8px;font-size:11px;color:#cb9090;background:#cb909014;border:1px solid rgba(203,144,144,.5);border-radius:0 0 4px;opacity:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;pointer-events:none}.slider-edit-shell:hover .slider-repeat-badge{opacity:1}.slider-repeat-badge-count{font-weight:600}.slider-badge-spin{animation:slider-badge-spin 1s linear infinite}@keyframes slider-badge-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.slider-preview-slide{opacity:.55;pointer-events:none}\n"] }]
@@ -12501,6 +12554,7 @@ class DialogComponentConfig extends ComponentConfig {
             showCloseButton: 'checkbox',
             consentRole: 'checkbox',
             closeAbove: 'select',
+            colorScheme: 'select',
             ariaLabel: 'text',
         };
         this.traits = [
@@ -12513,6 +12567,8 @@ class DialogComponentConfig extends ComponentConfig {
             new TraitConfig('consentRole', 'Consent banner role', TraitInputType.Checkbox, undefined, false),
             ...buildDialogCloseAboveTraits(),
             ...buildAccessibleNameTraits(),
+            // CC3 (board 6): a dialog may wear a section colour scheme — the Lightbox is Inverse.
+            buildColorSchemeTrait(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -12707,6 +12763,64 @@ class GalleryConfig extends ComponentConfig {
     }
 }
 
+/**
+ * Video (CC3 — complex-components plan §7b, board 5): a LEAF. The RENDER component is the shared `iox-video`
+ * (`IoxVideoComponent` in @vectoriox/iox-ui) — the canvas shows its poster only; Preview and the live site run the
+ * media-core runtime (the YouTube / Vimeo facade behind consent, the background video's pause button).
+ *
+ * Bindings ▸ Media · Behaviour · Accessibility · Privacy (boards 5 and 9). The address and the poster are bindable (a
+ * project's video field) and work inside a Repeater. Background mode and autoplay act on an uploaded file; a YouTube
+ * or Vimeo video is always the facade (D5) and plays on a click, after consent — the panel says so.
+ */
+class VideoConfig extends ComponentConfig {
+    constructor() {
+        super('Video', 'iox-video', 'ph-thin ph-film-strip', 'Media');
+        const embed = { trait: VideoTrait.Source, values: [VideoSource.YouTube, VideoSource.Vimeo] };
+        const file = { trait: VideoTrait.Source, values: VideoSource.File };
+        this.traits = [
+            // ── Media ─────────────────────────────────────────────────────
+            new TraitConfig('__mediaLabel', 'Media', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Source, 'Source', TraitInputType.Select, [
+                { label: 'YouTube', value: VideoSource.YouTube },
+                { label: 'Vimeo', value: VideoSource.Vimeo },
+                { label: 'Uploaded file', value: VideoSource.File },
+            ], VideoSource.YouTube),
+            new TraitConfig(VideoTrait.Src, 'Video address', TraitInputType.Media, { mode: 'compact' }, ''),
+            new TraitConfig(VideoTrait.Poster, 'Poster', TraitInputType.Media, { mode: 'compact' }, ''),
+            // ── Behaviour ─────────────────────────────────────────────────
+            new TraitConfig('__behaviourLabel', 'Behaviour', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Mode, 'Mode', TraitInputType.Select, [
+                { label: 'Inline · with controls', value: VideoMode.Inline },
+                { label: 'Background · muted loop', value: VideoMode.Background },
+            ], VideoMode.Inline),
+            new TraitConfig(VideoTrait.Autoplay, 'Autoplay (muted)', TraitInputType.Checkbox, undefined, false),
+            // ── Accessibility ─────────────────────────────────────────────
+            new TraitConfig('__accessibilityLabel', 'Accessibility', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Title, 'Title (names the play button)', TraitInputType.Text, undefined, ''),
+            new TraitConfig(VideoTrait.Captions, 'Captions (.vtt)', TraitInputType.Media, { mode: 'compact' }, '', undefined, file),
+            new TraitConfig(VideoTrait.CaptionsLang, 'Captions language', TraitInputType.Text, undefined, 'en', undefined, file),
+            // ── Privacy ───────────────────────────────────────────────────
+            new TraitConfig('__privacyLabel', 'Privacy', TraitInputType.SectionLabel),
+            new TraitConfig(VideoTrait.Consent, 'Consent', TraitInputType.Select, [
+                { label: 'Marketing', value: ConsentCategory.Marketing },
+            ], ConsentCategory.Marketing, undefined, embed),
+        ];
+        // A media frame: size, spacing, border (radius), effects (the `media` style's transition and hover scale).
+        this.styleTraits = [
+            new PositionGroupStyleConfig(),
+            new SizeGroupStyleConfig(),
+            new SpacingGroupStyleConfig(),
+            new BorderGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
+        ];
+        // A 16 / 9 frame that fills its column — the size the poster and the player take.
+        this.applyStyleDefaults({
+            width: '100%',
+            aspectRatio: '16 / 9',
+        });
+    }
+}
+
 /**
  * Field's styleable sub-elements (board 7 — "the failure design"), for the Style panel's picker.
  * Class names come from the SHARED `PART_CLASS_NAMES` (`@vectoriox/iox-ui`) — the same map the
@@ -13329,6 +13443,11 @@ class SliderContainerConfig extends ComponentConfig {
             // ── Responsive ────────────────────────────────────────────────────
             new TraitConfig('__responsiveLabel', 'Responsive', TraitInputType.SectionLabel),
             new TraitConfig('breakpoints', 'Breakpoints (JSON)', TraitInputType.Textarea, undefined, ''),
+            // ── Accessibility (CC3, board 6) ──────────────────────────────────
+            // The carousel's name: a named carousel is a `region` landmark ("What clients say"). The pause control
+            // is a part added while Autoplay is on (WCAG 2.2.2) — the panel says so under this group.
+            new TraitConfig('__accessibilityLabel', 'Accessibility', TraitInputType.SectionLabel),
+            new TraitConfig(A11yTrait.AccessibleName, 'Carousel name', TraitInputType.Text, undefined, ''),
         ];
         this.styleTraits = [
             new PositionGroupStyleConfig(),
@@ -13362,5 +13481,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, 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, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map