@vectoriox/iox-ui 4.24.0 → 4.26.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1506,1858 +1506,2050 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
-class ClientSliderContainerComponent {
-    constructor(platformId) {
-        this.platformId = platformId;
-        this.nodeId = '';
-        /** Language (writing) direction. Rendered as the `dir` attribute so it survives SSR and drives
-         *  Swiper's RTL layout — must match the builder's app-slider-container, which had `dir` while
-         *  this engine-runtime component did not (RTL showed in the editor but never on the live site). */
-        this.dir = 'ltr';
-        this.direction = 'horizontal';
-        this.loop = false;
-        this.slidesPerView = 1;
-        this.spaceBetween = 0;
-        this.speed = 300;
-        this.effect = 'slide';
-        this.grabCursor = true;
-        this.centeredSlides = false;
-        this.initialSlide = 0;
-        this.enableNavigation = false;
-        this.enablePagination = false;
-        this.enableScrollbar = false;
-        this.enableAutoplay = false;
-        this.enableKeyboard = false;
-        this.enableMousewheel = false;
-        this.enableZoom = false;
-        this.enableGrid = false;
-        this.enableParallax = false;
-        this.autoplayDelay = 3000;
-        this.autoplayPauseOnMouseEnter = true;
-        this.autoplayDisableOnInteraction = false;
-        this.paginationType = 'bullets';
-        this.paginationClickable = true;
-        this.gridRows = 1;
-        this.breakpoints = '';
-        this._swiper = null;
-        this.instanceRegistry = inject(ComponentInstanceRegistryService);
-    }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            // Defer so all child slides are rendered first
-            requestAnimationFrame(() => this._initSwiper());
-        }
-    }
-    ngOnDestroy() {
-        if (this._swiper) {
-            this._swiper.destroy(true, true);
-            this._swiper = null;
-            this.instanceRegistry.unregister(this.nodeId);
-        }
-    }
-    async _initSwiper() {
-        const el = this.swiperEl?.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, 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);
-        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]);
-        }
-        const config = {
-            modules,
-            // Swiper reads the container's `dir` attribute, but pass it explicitly so RTL is applied
-            // on init regardless of attribute timing.
-            dir: this.dir,
-            direction: this.direction,
-            loop: this.loop,
-            slidesPerView: this.slidesPerView,
-            spaceBetween: this.spaceBetween,
-            speed: this.speed,
-            effect: this.effect,
-            grabCursor: this.grabCursor,
-            centeredSlides: this.centeredSlides,
-            initialSlide: this.initialSlide,
-        };
-        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 };
-        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 */ }
-        }
-        this._swiper = new Swiper(el, config);
-        this.instanceRegistry.register(this.nodeId, this._swiper);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", gridRows: "gridRows", breakpoints: "breakpoints" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
-        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
-            <div class="swiper-wrapper">
-                <ng-container #childrenHost></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>
-            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
-        </div>
-    `, isInline: true, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+// Virtual trait → composed CSS property helpers.
+//
+// Several style traits are "virtual" — they don't map 1:1 to a CSS property but
+// are components of a multi-function CSS value.  composeVirtualTraits() strips
+// these virtual keys from the style map and replaces them with the correctly
+// composed CSS properties (filter, backdrop-filter, transform, transition).
+//
+// SHARED (iox-ui): consumed by BOTH the builder (render.directive + style panel)
+// and the SSR engine (LayoutRendererService). It MUST live here, not in iox-builder,
+// because the engine does not depend on iox-builder — without it the engine emitted
+// the raw virtual keys (`translate-x`, `filter-blur`, `scale-x`…) as invalid CSS.
+// Run this BEFORE compileDeclarations so the CSS output is identical on both sides.
+// ─── Filter ──────────────────────────────────────────────────────────────────
+const FILTER_FUNS = [
+    ['filterBlur', 'blur', '0px'],
+    ['filterBrightness', 'brightness', '1'],
+    ['filterContrast', 'contrast', '1'],
+    ['filterGrayscale', 'grayscale', '0'],
+    ['filterSaturate', 'saturate', '1'],
+    ['filterHueRotate', 'hue-rotate', '0deg'],
+    ['filterSepia', 'sepia', '0'],
+    ['filterInvert', 'invert', '0'],
+];
+// ─── Backdrop-filter ─────────────────────────────────────────────────────────
+const BACKDROP_FUNS = [
+    ['backdropBlur', 'blur', '0px'],
+    ['backdropBrightness', 'brightness', '1'],
+    ['backdropContrast', 'contrast', '1'],
+    ['backdropSaturate', 'saturate', '1'],
+];
+// ─── Transform ───────────────────────────────────────────────────────────────
+const TRANSFORM_FUNS = [
+    ['translateX', 'translateX', '0px'],
+    ['translateY', 'translateY', '0px'],
+    ['scaleX', 'scaleX', '1'],
+    ['scaleY', 'scaleY', '1'],
+    ['rotate', 'rotate', '0deg'],
+    ['skewX', 'skewX', '0deg'],
+    ['skewY', 'skewY', '0deg'],
+];
+// ─── ::marker pseudo-element ─────────────────────────────────────────────────
+const MARKER_FUNS = [
+    ['markerColor', 'color'],
+    ['markerFontSize', 'fontSize'],
+];
+const TRANSITION_KEYS = ['transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+const VIRTUAL_TRAIT_GROUPS = Object.freeze([
+    { output: 'filter', keys: FILTER_FUNS.map(([t]) => t), reset: 'none' },
+    { output: 'backdropFilter', keys: BACKDROP_FUNS.map(([t]) => t), reset: 'none' },
+    { output: 'transform', keys: TRANSFORM_FUNS.map(([t]) => t), reset: 'none' },
+    { output: 'transition', keys: [...TRANSITION_KEYS], reset: 'none' },
+    { output: '__markerStyles', keys: MARKER_FUNS.map(([t]) => t), reset: null },
+]);
+// ─── All virtual trait names ──────────────────────────────────────────────────
+/** Every virtual trait key — derived from the groups so there is one list to maintain. */
+const VIRTUAL_TRAIT_KEYS = new Set(VIRTUAL_TRAIT_GROUPS.flatMap(g => g.keys));
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function buildFns(funs, src) {
+    return funs
+        .filter(([t, , d]) => src[t] != null && src[t] !== '' && src[t] !== d)
+        .map(([t, fn]) => `${fn}(${src[t]})`)
+        .join(' ');
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'iox-slider-container', template: `
-        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
-            <div class="swiper-wrapper">
-                <ng-container #childrenHost></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>
-            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
-        </div>
-    `, standalone: false, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { nodeId: [{
-                type: Input
-            }], dir: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], loop: [{
-                type: Input
-            }], slidesPerView: [{
-                type: Input
-            }], spaceBetween: [{
-                type: Input
-            }], speed: [{
-                type: Input
-            }], effect: [{
-                type: Input
-            }], grabCursor: [{
-                type: Input
-            }], centeredSlides: [{
-                type: Input
-            }], initialSlide: [{
-                type: Input
-            }], enableNavigation: [{
-                type: Input
-            }], enablePagination: [{
-                type: Input
-            }], enableScrollbar: [{
-                type: Input
-            }], enableAutoplay: [{
-                type: Input
-            }], enableKeyboard: [{
-                type: Input
-            }], enableMousewheel: [{
-                type: Input
-            }], enableZoom: [{
-                type: Input
-            }], enableGrid: [{
-                type: Input
-            }], enableParallax: [{
-                type: Input
-            }], autoplayDelay: [{
-                type: Input
-            }], autoplayPauseOnMouseEnter: [{
-                type: Input
-            }], autoplayDisableOnInteraction: [{
-                type: Input
-            }], paginationType: [{
-                type: Input
-            }], paginationClickable: [{
-                type: Input
-            }], gridRows: [{
-                type: Input
-            }], breakpoints: [{
-                type: Input
-            }], childrenHost: [{
-                type: ViewChild,
-                args: ['childrenHost', { read: ViewContainerRef, static: true }]
-            }], swiperEl: [{
-                type: ViewChild,
-                args: ['swiperEl', { static: true }]
-            }] } });
-
+// ─── Public API ───────────────────────────────────────────────────────────────
 /**
- * Client-engine slide. The HOST element (`iox-slider-slide`) itself carries the
- * `swiper-slide` class so it is a DIRECT child of `.swiper-wrapper` — Swiper only
- * recognises slides that are direct children (the `.swiper-slide` direct-child
- * invariant; see iox-ai-guidance architecture/builder/slider.md). A wrapper div
- * would nest `.swiper-slide` one level too deep and Swiper would ignore the slides.
+ * Strip virtual trait keys from `raw` and emit their composed CSS equivalents.
  *
- * The shared `iox-node-{id}` class is applied to the same host so the page-level
- * CSS rules match (parity with the string renderer / builder).
+ * When composing a partial state-override map (hover, active…), pass the full
+ * base style map as `base` so non-overridden components (e.g. filterBrightness
+ * when only filterBlur is overridden) are preserved in the composed output.
+ * When operating on a complete style map, omit `base` — it defaults to `raw`.
  */
-class ClientSliderSlideComponent {
-    constructor() {
-        this.nodeId = '';
+function composeVirtualTraits(raw, base = raw) {
+    // Copy all non-virtual properties as-is
+    const result = {};
+    for (const [k, v] of Object.entries(raw)) {
+        if (!VIRTUAL_TRAIT_KEYS.has(k))
+            result[k] = v;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderSlideComponent, isStandalone: false, selector: "iox-slider-slide", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'swiper-slide iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{display:block;box-sizing:border-box}\n"] }); }
+    // Merge base values for any virtual key absent from the partial override map
+    const merged = (funs) => {
+        const m = {};
+        for (const [t] of funs)
+            m[t] = raw[t] ?? base[t];
+        return m;
+    };
+    // filter
+    const filterStr = buildFns(FILTER_FUNS, merged(FILTER_FUNS));
+    if (filterStr)
+        result['filter'] = filterStr;
+    // backdrop-filter
+    const backdropStr = buildFns(BACKDROP_FUNS, merged(BACKDROP_FUNS));
+    if (backdropStr)
+        result['backdropFilter'] = backdropStr;
+    // transform
+    const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
+    if (transformStr)
+        result['transform'] = transformStr;
+    // transition — only emit when duration is non-zero
+    const dur = raw['transitionDuration'] ?? base['transitionDuration'];
+    const ease = raw['transitionTimingFunction'] ?? base['transitionTimingFunction'];
+    const del = raw['transitionDelay'] ?? base['transitionDelay'];
+    if (dur && ease && dur !== '0ms' && dur !== '0s') {
+        const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
+        result['transition'] = `all ${dur} ${ease}${delPart}`;
+    }
+    // ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
+    // can emit a separate `.iox-node-{id}::marker { … }` rule.
+    const markerStyles = {};
+    for (const [trait, cssProp] of MARKER_FUNS) {
+        const val = raw[trait] ?? base[trait];
+        if (val != null && val !== '')
+            markerStyles[cssProp] = val;
+    }
+    if (Object.keys(markerStyles).length) {
+        result['__markerStyles'] = markerStyles;
+    }
+    return result;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderSlideComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'iox-slider-slide', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': `'swiper-slide iox-node-' + nodeId` }, standalone: false, styles: [":host{display:block;box-sizing:border-box}\n"] }]
-        }], propDecorators: { nodeId: [{
-                type: Input
-            }], childrenHost: [{
-                type: ViewChild,
-                args: ['childrenHost', { read: ViewContainerRef, static: true }]
-            }] } });
 
+// Responsive (per-breakpoint) styles — the shared model, cascade and emission plan.
+//
+// SHARED (iox-ui): the builder canvas AND the SSR engine both call this. The builder
+// FLATTENS the active breakpoint (its canvas is a transformed frame inside a desktop
+// browser, so a real `@media` query would read the editor's width); the engine WRAPS
+// each planned layer in `@media`. Same decisions, different transport — never fork them.
+//
+// Storage is a sparse layer beside the existing keys, shaped like `stateStyles`:
+//
+//   styleProps   — base, full resolved set          (unchanged)
+//   stateStyles  — sparse per-state overrides        (unchanged)
+//   responsive   — sparse per-breakpoint overrides   (this file)
+//     { mobile: { styleProps: {…}, stateStyles: { hover: {…} } } }
+//
+// A node with no `responsive` key renders exactly as before — no migration.
+// See iox-ai-guidance `architecture/builder/responsive-breakpoints-plan.md`.
+// ─── Breakpoints ─────────────────────────────────────────────────────────────
+/** The five fixed breakpoints (plan decision D2). Desktop-first: each narrower one
+ *  overrides the wider ones through `max-width`. */
+var Breakpoint;
+(function (Breakpoint) {
+    Breakpoint["Base"] = "base";
+    Breakpoint["Laptop"] = "laptop";
+    Breakpoint["Tablet"] = "tablet";
+    Breakpoint["Mobile"] = "mobile";
+    Breakpoint["Small"] = "small";
+})(Breakpoint || (Breakpoint = {}));
 /**
- * Directive-host List: the real `<ul>`/`<ol>` IS the host — no `iox-list` wrapper, no
- * inner/outer split. The tag is chosen by whoever CREATES the component (engine passes
- * `hostElement: document.createElement(htmlTag)`), NOT an internal `*ngIf`. Children render
- * into the host via `childrenHost`. `start`/`reversed` are host attrs (only meaningful on `<ol>`).
+ * Widest → narrowest. This order IS the cascade order and the `@media` emission order.
+ *
+ * ⚠️ Phones in portrait (360–430px) land in `Small`, NOT `Mobile` — `Mobile` is 480–767,
+ * a phone held landscape. The labels say so (as Webflow's do). The ids stay short because
+ * they are storage keys; the cascade still makes a `Mobile` override reach every phone.
  */
-class ClientListComponent {
-    constructor() {
-        this.htmlTag = 'ul';
-        this.start = '';
-        this.reversed = false;
-        this.nodeId = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientListComponent, isStandalone: false, selector: "ul[iox-list],ol[iox-list]", inputs: { htmlTag: "htmlTag", start: "start", reversed: "reversed", nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId", "attr.start": "htmlTag === 'ol' && start !== '' && start != null ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{margin:0;box-sizing:border-box}\n"] }); }
+const BREAKPOINTS = Object.freeze([
+    { id: Breakpoint.Base, label: 'Base', maxWidth: null, previewWidth: 1440 },
+    { id: Breakpoint.Laptop, label: 'Laptop', maxWidth: 1200, previewWidth: 1200 },
+    { id: Breakpoint.Tablet, label: 'Tablet', maxWidth: 991, previewWidth: 768 },
+    { id: Breakpoint.Mobile, label: 'Mobile landscape', maxWidth: 767, previewWidth: 568 },
+    { id: Breakpoint.Small, label: 'Mobile portrait', maxWidth: 479, previewWidth: 390 },
+]);
+const BREAKPOINT_INDEX = new Map(BREAKPOINTS.map((d, i) => [d.id, i]));
+/** The definition for `bp`, or `undefined` for an unknown id (e.g. hand-edited JSON). */
+function breakpointDef(bp) {
+    const i = BREAKPOINT_INDEX.get(bp);
+    return i === undefined ? undefined : BREAKPOINTS[i];
+}
+/** Base → `bp`, inclusive — the layers whose values apply at `bp`. Unknown → `[Base]`. */
+function cascadeChain(bp) {
+    const i = BREAKPOINT_INDEX.get(bp);
+    return BREAKPOINTS.slice(0, (i ?? 0) + 1).map(d => d.id);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ul[iox-list],ol[iox-list]', template: `<ng-container #childrenHost></ng-container>`, host: {
-                        '[class]': "'iox-node-' + nodeId",
-                        '[attr.start]': "htmlTag === 'ol' && start !== '' && start != null ? start : null",
-                        '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
-                    }, standalone: false, styles: [":host{margin:0;box-sizing:border-box}\n"] }]
-        }], propDecorators: { htmlTag: [{
-                type: Input
-            }], start: [{
-                type: Input
-            }], reversed: [{
-                type: Input
-            }], nodeId: [{
-                type: Input
-            }], childrenHost: [{
-                type: ViewChild,
-                args: ['childrenHost', { read: ViewContainerRef, static: true }]
-            }] } });
-
 /**
- * Directive-host List item: the real `<li>` IS the host — no `iox-list-item` wrapper, no
- * inner/outer split. Children render into the `<li>` via `childrenHost`. Fixed tag (`<li>`),
- * so the engine creates it with `vcr.createComponent` (no `hostElement` needed).
+ * The breakpoint a viewport (or canvas) of `width` CSS px falls in — the narrowest one whose
+ * `maxWidth` it fits under, else Base. Mirrors how the `max-width` media queries resolve, so the
+ * builder's editing scope is always the breakpoint the canvas is actually showing.
  */
-class ClientListItemComponent {
-    constructor() {
-        this.nodeId = '';
+function breakpointForWidth(width) {
+    for (let i = BREAKPOINTS.length - 1; i > 0; i--) {
+        const max = BREAKPOINTS[i].maxWidth;
+        if (max !== null && width <= max)
+            return BREAKPOINTS[i].id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientListItemComponent, isStandalone: false, selector: "li[iox-list-item]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+    return Breakpoint.Base;
+}
+/** The next-wider breakpoint (what `bp` inherits from), or `null` for Base / unknown. */
+function parentBreakpoint(bp) {
+    const i = BREAKPOINT_INDEX.get(bp);
+    return i ? BREAKPOINTS[i - 1].id : null;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'li[iox-list-item]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
-        }], propDecorators: { nodeId: [{
-                type: Input
-            }], childrenHost: [{
-                type: ViewChild,
-                args: ['childrenHost', { read: ViewContainerRef, static: true }]
-            }] } });
-
 /**
- * Shared data-source resolving pattern — the SINGLE source of truth for how an IoxDataSource
- * becomes a backend fetch, consumed by BOTH the page builder (iox-cms-client bindings panel) and
- * the SSR client engine (iox-client-engine DataSourceResolverService). There must be no second
- * copy of this decision logic; only the transport differs between the two:
- *
- *   builder → authenticated org-scoped controllers (admin session):
- *              single by id → GET admin.../resources/:type/:id   (ContentService.getContentById)
- *              collection    → GET admin.../resources/:type        (ContentService.getContent)
- *   engine  → @Public() controllers (no auth, isPublished filter applied server-side):
- *              single by id → GET api/:type/:id                    (UserResourcesController)
- *              collection    → GET api/:type?filters                (UserResourcesController)
+ * What a breakpoint's width is measured against.
  *
- * The DECISION (by-id vs collection, which id, which filters, how to pick the single result) is
- * identical for both — that's what this module owns. Each app maps the returned {@link DataSourcePlan}
- * onto its own transport. A single item is ALWAYS fetched by its id as a path segment — never a
- * `?_id=` query — to match the builder's getContentById.
+ * `Media` — the browser viewport. The SSR engine: a visitor's window IS the page.
+ * `Container` — a named CSS size container. The builder: its canvas is a fixed-width frame inside a
+ * desktop browser (and `transform: scale`d for zoom), so a media query would read the EDITOR's width.
+ * A container query reads the frame's own layout width — which equals the simulated viewport and
+ * ignores the zoom transform — so the builder emits the same structure as the engine.
  */
+var BreakpointQueryKind;
+(function (BreakpointQueryKind) {
+    BreakpointQueryKind["Media"] = "media";
+    BreakpointQueryKind["Container"] = "container";
+})(BreakpointQueryKind || (BreakpointQueryKind = {}));
 /**
- * Match a page route template against an actual path and extract named params.
- *   matchRouteParams('/project/:projectId', 'project/68abc') → { projectId: '68abc' }
- * Both sides are normalised (leading slash stripped) and split on '/'; values are URL-decoded.
+ * The at-rule prelude for `bp` — `@media (max-width: 767px)`, or with `Container`
+ * `@container iox-canvas (max-width: 767px)`. `null` for Base or an unknown id.
+ * `containerName` is required for `Container` (an unnamed container query would match
+ * whichever ancestor container is nearest, which is not guaranteed to be the canvas).
  */
-function matchRouteParams(template, actual) {
-    const t = (template ?? '').replace(/^\/+/, '').split('/');
-    const a = (actual ?? '').replace(/^\/+/, '').split('/');
-    const params = {};
-    for (let i = 0; i < t.length; i++) {
-        const seg = t[i];
-        if (seg && seg.startsWith(':'))
-            params[seg.slice(1)] = decodeURIComponent(a[i] ?? '');
-    }
-    return params;
+function breakpointQueryFor(bp, kind = BreakpointQueryKind.Media, containerName) {
+    const max = breakpointDef(bp)?.maxWidth;
+    if (max == null)
+        return null;
+    if (kind === BreakpointQueryKind.Media)
+        return `@media (max-width: ${max}px)`;
+    if (!containerName)
+        throw new Error('A container breakpoint query needs a container name');
+    return `@container ${containerName} (max-width: ${max}px)`;
+}
+/** Wrap already-compiled rules for `bp`. Base (and blank css) passes through unwrapped. */
+function wrapInBreakpointQuery(bp, css, kind = BreakpointQueryKind.Media, containerName) {
+    if (!css.trim())
+        return '';
+    const query = breakpointQueryFor(bp, kind, containerName);
+    return query ? `${query} {\n${css}\n}` : css;
+}
+/** `@media (max-width: 767px)` for `bp`; `null` for Base or an unknown id. */
+function mediaQueryFor(bp) {
+    return breakpointQueryFor(bp, BreakpointQueryKind.Media);
+}
+/** Wrap already-compiled rules for `bp` in its media query. Base (and blank css) passes through. */
+function wrapInMediaQuery(bp, css) {
+    return wrapInBreakpointQuery(bp, css, BreakpointQueryKind.Media);
+}
+function layerAt(responsive, bp) {
+    return bp === Breakpoint.Base ? undefined : responsive?.[bp];
+}
+/** Copy defined entries of `src` onto `target`. `undefined` never overwrites a value. */
+function assignDefined(target, src) {
+    if (src)
+        for (const [k, v] of Object.entries(src))
+            if (v !== undefined)
+                target[k] = v;
+    return target;
+}
+function hasKeys(map) {
+    return !!map && Object.keys(map).length > 0;
+}
+// ─── Cascade resolution ──────────────────────────────────────────────────────
+/** The full effective style map at `bp`: base, then each layer down the cascade. */
+function resolveStyleProps(styleProps, responsive, bp) {
+    const out = assignDefined({}, styleProps ?? undefined);
+    for (const id of cascadeChain(bp))
+        assignDefined(out, layerAt(responsive, id)?.styleProps);
+    return out;
 }
 /**
- * Build the query filter for a data-source request from its filterByRouteParam / filterByQueryParams
- * config. `field` is filtered by the route-param value (falling back to `defaultId`); query filters
- * map each `field` to a query-param value (falling back to `defaultValue`), and a filter with NO
- * `queryParam` is a constant on `defaultValue`. Empty values are omitted so the source isn't
- * accidentally filtered to nothing.
+ * The full effective TRAIT map at `bp`: the node's own inputs, then each layer down the cascade.
+ * Deliberately identical in shape and cascade order to `resolveStyleProps`, so "how does a value
+ * at this width get decided" has ONE answer on both sides of the renderer split.
  */
-function buildDataSourceFilter(req, routeParams = {}, queryParams = {}) {
-    const params = {};
-    const byRoute = req?.filterByRouteParam;
-    if (byRoute?.field && byRoute?.routeParam) {
-        const value = routeParams[byRoute.routeParam] ?? byRoute.defaultId;
-        if (value !== undefined && value !== null && value !== '')
-            params[byRoute.field] = value;
-    }
-    for (const q of req?.filterByQueryParams ?? []) {
-        if (!q?.field)
-            continue;
-        // No queryParam → a CONSTANT filter: defaultValue is the value, in the builder preview and
-        // on the live site alike. With a queryParam the URL wins and defaultValue is the fallback.
-        const value = q.queryParam ? (queryParams[q.queryParam] ?? q.defaultValue) : q.defaultValue;
-        if (value !== undefined && value !== null && value !== '')
-            params[q.field] = value;
-    }
-    return params;
+function resolveInputs(inputs, responsive, bp) {
+    const out = assignDefined({}, inputs ?? undefined);
+    for (const id of cascadeChain(bp))
+        assignDefined(out, layerAt(responsive, id)?.inputs);
+    return out;
+}
+/** True when `bp` itself sets trait `name` — the panel's override indicator. Never true for Base. */
+function isInputOverriddenAt(responsive, bp, name) {
+    return layerAt(responsive, bp)?.inputs?.[name] !== undefined;
 }
 /**
- * Mirrors the builder's getContentById decision. When a SINGLE source is filtered by the item id
- * (`_id`) via a route param, the item is fetched by PATH (`.../:type/:id`), not a `?_id=` query.
- * Returns that id (route-param value, else `defaultId`), or `null` when the source isn't a
- * single-by-id fetch — in which case the caller uses the collection endpoint + filters. The
- * path-based form only applies to the id field; a single source filtered by any other field still
- * goes through the collection endpoint.
+ * Every level from Base down to `bp` that sets trait `name`, in cascade order — the trait-row
+ * equivalent of `resolveValueChain`, driving the same "Base 4 → Tablet 2 → Mobile 1" source chain.
  */
-function resolveSingleItemId(req, routeParams = {}) {
-    const byRoute = req?.filterByRouteParam;
-    if (!byRoute?.routeParam)
-        return null;
-    if (byRoute.field && byRoute.field !== '_id')
-        return null;
-    const value = routeParams[byRoute.routeParam] ?? byRoute.defaultId;
-    return value !== undefined && value !== null && value !== '' ? String(value) : null;
+function resolveInputChain(name, inputs, responsive, bp) {
+    const chain = [];
+    for (const id of cascadeChain(bp)) {
+        const value = id === Breakpoint.Base ? inputs?.[name] : layerAt(responsive, id)?.inputs?.[name];
+        if (value !== undefined)
+            chain.push({ breakpoint: id, value });
+    }
+    return chain;
+}
+/** The effective per-state maps at `bp`. States with no values anywhere are omitted. */
+function resolveStateStyles(stateStyles, responsive, bp) {
+    const out = {};
+    const merge = (src) => {
+        for (const [state, map] of Object.entries(src ?? {})) {
+            out[state] = assignDefined(out[state] ?? {}, map);
+        }
+    };
+    merge(stateStyles ?? undefined);
+    for (const id of cascadeChain(bp))
+        merge(layerAt(responsive, id)?.stateStyles);
+    for (const state of Object.keys(out))
+        if (!hasKeys(out[state]))
+            delete out[state];
+    return out;
 }
 /**
- * Resolve an IoxDataSource into a transport-agnostic {@link DataSourcePlan}. This is the shared
- * decision both the builder and the SSR engine run; each then executes the plan with its own
- * HTTP layer. Single sources with a route-param id resolve to a `by-id` (path) fetch — exactly like
- * the builder's getContentById.
+ * Every state that has a value anywhere — at base or at any breakpoint — in a stable order
+ * (base states first, then any that exist only at a breakpoint). A renderer iterates this, not
+ * `Object.keys(stateStyles)`, so a state defined ONLY at a breakpoint (a Mobile-only hover) still
+ * gets its selector scope resolved.
  */
-function planDataSource(ds, routeParams = {}, queryParams = {}) {
-    const mode = ds?.mode === 'single' ? 'single' : 'list';
-    switch (ds?.type) {
-        case 'cms':
-        case 'shop': {
-            const domain = ds.type;
-            const req = domain === 'cms' ? ds.request?.cms : ds.request?.shop;
-            const resource = req?.contentType;
-            if (!resource)
-                return { kind: 'none' };
-            const id = mode === 'single' ? resolveSingleItemId(req, routeParams) : null;
-            if (id)
-                return { kind: 'by-id', domain, resource, id, mode };
-            const filter = buildDataSourceFilter(req, routeParams, queryParams);
-            const plan = { kind: 'collection', domain, resource, filter, mode };
-            if (req?.limit)
-                plan.limit = req.limit;
-            return plan;
-        }
-        case 'external-api': {
-            const endpoint = ds.request?.endpoint;
-            return endpoint ? { kind: 'external', endpoint, mode } : { kind: 'none' };
-        }
-        case 'static':
-            return { kind: 'static', data: ds.request?.data ?? null, mode };
-        case 'derived': {
-            const d = ds.request?.derived;
-            return d?.from ? { kind: 'derived', from: d.from, path: d.path ?? '', mode } : { kind: 'none' };
+function stateNamesIn(stateStyles, responsive) {
+    const names = new Set();
+    const add = (src) => {
+        for (const [state, map] of Object.entries(src ?? {})) {
+            if (Object.values(map ?? {}).some(v => v !== undefined))
+                names.add(state);
         }
-        case 'variable':
-            // A VARIABLE is a page-local resource whose value is WRITTEN at runtime by an interaction
-            // (setContext), never fetched. It resolves to nothing here on purpose: the page renders
-            // its empty state until something writes it. `request.variable.itemsFrom` only names the
-            // source whose items it holds, so the bind picker can suggest fields.
-            return { kind: 'none' };
-        default:
-            return { kind: 'none' };
-    }
+    };
+    add(stateStyles);
+    for (const { id } of BREAKPOINTS)
+        add(layerAt(responsive, id)?.stateStyles);
+    return [...names];
 }
 /**
- * The aliases on a page that are VARIABLES — runtime-written resources, not fetched data.
- *
- * Shared so the builder and the SSR engine agree on which aliases start empty and are filled by
- * interactions. See element-context-state-plan.md.
+ * Every level from Base down to `bp` that sets `prop` (optionally within `state`), in
+ * cascade order. The LAST entry is the effective value; an empty array means unset.
+ * Drives the style panel's source chain ("Base 34 → Tablet 28 → Mobile 22").
  */
-function variableAliases(dataSources) {
-    const out = new Set();
-    for (const ds of dataSources ?? []) {
-        if (ds?.type === 'variable' && ds.alias)
-            out.add(ds.alias);
-    }
-    return out;
-}
-/** The source alias whose items a variable holds, if it declares one (for field suggestions). */
-function variableItemsFrom(dataSources, alias) {
-    for (const ds of dataSources ?? []) {
-        if (ds?.type === 'variable' && ds.alias === alias)
-            return ds.request?.variable?.itemsFrom || undefined;
+function resolveValueChain(prop, styleProps, stateStyles, responsive, bp, state) {
+    const read = (props, states) => (state ? states?.[state] : props)?.[prop];
+    const chain = [];
+    for (const id of cascadeChain(bp)) {
+        const layer = layerAt(responsive, id);
+        const value = id === Breakpoint.Base
+            ? read(styleProps ?? undefined, stateStyles ?? undefined)
+            : read(layer?.styleProps, layer?.stateStyles);
+        if (value !== undefined)
+            chain.push({ breakpoint: id, value });
     }
-    return undefined;
+    return chain;
 }
-/**
- * Normalise a collection response into the shape a source expects: unwraps `{items}`/`{data}`
- * envelopes, then returns the first item for a `single` source or the whole array for a `list`.
- * A `by-id` response is already the item, so callers pass it through unchanged.
- */
-function normalizeCollectionResult(mode, data) {
-    const items = Array.isArray(data) ? data : (data?.items ?? data?.data ?? []);
-    return mode === 'single' ? (items[0] ?? null) : items;
+/** True when `bp` itself sets `prop` (the style panel's orange edge). Never true for Base. */
+function isOverriddenAt(responsive, bp, prop, state) {
+    const layer = layerAt(responsive, bp);
+    const map = state ? layer?.stateStyles?.[state] : layer?.styleProps;
+    return map?.[prop] !== undefined;
 }
-/** Navigate a dot/bracket path into an object, e.g. `gallery`, `details.images`, `variants[0].skus`.
- *  Returns undefined if any segment is missing. Kept minimal + self-contained so it is shareable by
- *  both the builder and the SSR engine (the two have divergent local `resolvePath` copies). */
-function getByPath(obj, path) {
-    if (obj == null || !path)
-        return obj;
-    // Turn `a[0].b` into ['a','0','b'].
-    const segments = path.replace(/\[(\w+)\]/g, '.$1').split('.').filter(Boolean);
-    let cur = obj;
-    for (const seg of segments) {
-        if (cur == null)
-            return undefined;
-        cur = cur[seg];
+/** Number of overridden values — at `bp`, or across every breakpoint when omitted. */
+function countOverrides(responsive, bp) {
+    const count = (map) => Object.values(map ?? {}).filter(v => v !== undefined).length;
+    const ids = bp ? [bp] : BREAKPOINTS.map(d => d.id);
+    let n = 0;
+    for (const id of ids) {
+        const layer = layerAt(responsive, id);
+        n += count(layer?.styleProps);
+        n += count(layer?.inputs);
+        for (const map of Object.values(layer?.stateStyles ?? {}))
+            n += count(map);
     }
-    return cur;
+    return n;
 }
-/**
- * The array a Repeater (or a repeating Slider) iterates over — the SHARED decision so the builder
- * canvas and the SSR engine agree (see data-source-resolving.md).
- * - No `sourcePath`: the resolved source IS the list. An array passes through; a lone object degrades
- *   to a single-row list (back-compat with the old `fetchItems`); null/undefined → `[]`.
- * - With `sourcePath`: the source resolved to a SINGLE resource (e.g. a product); dive into the
- *   nested array property (e.g. `gallery`). Non-array / missing → `[]`.
- */
-/**
- * Fill in `derived` aliases in an already-resolved map. Given the data sources and a map of resolved
- * NON-derived values (by alias), compute each `type:'derived'` alias as `getByPath(parent, path)` in
- * dependency order (chains resolved by iterating until stable). Mutates + returns the map. Used by the
- * SSR engine after it resolves the root sources; the builder resolves derived lazily per alias.
- */
-function resolveDerivedInto(dataSources, resolved) {
-    const derived = (dataSources ?? []).filter(d => d?.type === 'derived' && !!d.alias);
-    let changed = true, guard = 0;
-    while (changed && guard++ < 25) {
-        changed = false;
-        for (const d of derived) {
-            if (d.alias in resolved)
-                continue;
-            const from = d.request?.derived?.from;
-            if (from && from in resolved) {
-                resolved[d.alias] = getByPath(resolved[from], d.request.derived.path ?? '');
-                changed = true;
-            }
-        }
+// ─── Editing (immutable) ─────────────────────────────────────────────────────
+function assertOverrideBreakpoint(bp) {
+    if (bp === Breakpoint.Base) {
+        throw new Error('Base styles live in styleProps / stateStyles, not in responsive overrides');
     }
-    return resolved;
+    if (!BREAKPOINT_INDEX.has(bp))
+        throw new Error(`Unknown breakpoint "${bp}"`);
 }
-function resolveRepeaterItems(resolved, sourcePath) {
-    if (sourcePath) {
-        const nested = getByPath(resolved, sourcePath);
-        return Array.isArray(nested) ? nested : [];
+/** Returns a new overrides object with `prop` set at `bp` (optionally within `state`). */
+function setOverride(responsive, bp, prop, value, state) {
+    assertOverrideBreakpoint(bp);
+    const layer = { ...(responsive?.[bp] ?? {}) };
+    if (state) {
+        layer.stateStyles = { ...(layer.stateStyles ?? {}), [state]: { ...(layer.stateStyles?.[state] ?? {}), [prop]: value } };
     }
-    if (Array.isArray(resolved))
-        return resolved;
-    return resolved == null ? [] : [resolved];
-}
-// ── Referenced data sources (shared: builder-save + SSR resolve) ─────────────────────────────────
-// Which data-source aliases a node tree uses, so a consumer resolves ONLY what a page/global needs
-// (not the whole org library). Used by cms-client (persist globals' sources) and the SSR engine
-// (resolve the referenced subset per page). See org-data-sources-plan.md.
-/** Aliases referenced anywhere in a node tree: a repeater/slider `source` (a `bindings` entry with
- *  `prop === 'source'`, or `props.source` for the slider) plus every binding's `source`. */
-function collectReferencedAliases(nodes, acc = new Set()) {
-    for (const n of nodes ?? []) {
-        for (const b of n?.bindings ?? []) {
-            if (b?.source)
-                acc.add(b.source);
-        }
-        if (n?.props?.source)
-            acc.add(n.props.source);
-        if (n?.children?.length)
-            collectReferencedAliases(n.children, acc);
+    else {
+        layer.styleProps = { ...(layer.styleProps ?? {}), [prop]: value };
     }
-    return acc;
-}
-/** The subset of `all` whose `alias` is referenced by `nodes` (shallow — direct references only). */
-function referencedDataSources(nodes, all) {
-    const aliases = collectReferencedAliases(nodes);
-    return (all ?? []).filter(ds => aliases.has(ds?.alias));
+    return { ...(responsive ?? {}), [bp]: layer };
 }
-/** Like `referencedDataSources`, but also pulls in a referenced source's DEPENDENCIES (transitively),
- *  none of which the layout names directly:
- *   - a `derived` alias needs its `request.derived.from` parent;
- *   - a `relative` (route-context) alias needs its `request.relative.subjectFrom` (the current item)
- *     and `request.relative.from` (the collection it navigates).
- *  Use this when RESOLVING (the engine) so derived views and siblings/related don't resolve to nothing. */
-function referencedDataSourcesDeep(nodes, all) {
-    const byAlias = new Map((all ?? []).map(d => [d?.alias, d]));
-    const wanted = collectReferencedAliases(nodes);
-    const queue = [...wanted];
-    const enqueue = (alias) => {
-        if (alias && !wanted.has(alias)) {
-            wanted.add(alias);
-            queue.push(alias);
-        }
-    };
-    while (queue.length) {
-        const ds = byAlias.get(queue.pop());
-        enqueue(ds?.request?.derived?.from);
-        enqueue(ds?.request?.relative?.subjectFrom);
-        enqueue(ds?.request?.relative?.from);
-    }
-    return (all ?? []).filter(d => wanted.has(d?.alias));
+/** Returns a new overrides object with trait `name` set at `bp`. */
+function setInputOverride(responsive, bp, name, value) {
+    assertOverrideBreakpoint(bp);
+    const layer = { ...(responsive?.[bp] ?? {}) };
+    layer.inputs = { ...(layer.inputs ?? {}), [name]: value };
+    return { ...(responsive ?? {}), [bp]: layer };
 }
 /**
- * Turn a resolved {@link DataSourcePlan} into the concrete public HTTP request (url + params) — the
- * SINGLE place that decides the URL shape, shared by the builder binding preview and the SSR engine
- * so both hit the SAME public endpoints (no admin, no duplication). Returns `null` for `static` /
- * `none` plans (no HTTP call). A single item is a PATH segment (`/:resource/:id`), never `?_id=`.
+ * Remove trait overrides at `bp`, pruning empties exactly like `clearOverride` — omit `name` to
+ * drop every trait override at that width. Returns `undefined` when nothing is left anywhere.
  */
-function dataSourcePlanToRequest(plan, endpoints) {
-    const baseFor = (domain) => (domain === 'shop' ? endpoints.shopBase : endpoints.cmsBase);
-    switch (plan.kind) {
-        case 'by-id':
-            return { url: `${baseFor(plan.domain)}${plan.resource}/${encodeURIComponent(plan.id)}`, params: {} };
-        case 'collection': {
-            const params = { ...plan.filter };
-            if (plan.limit)
-                params['limit'] = plan.limit;
-            return { url: `${baseFor(plan.domain)}${plan.resource}`, params };
-        }
-        case 'external':
-            return { url: plan.endpoint, params: {} };
-        default:
-            return null;
+function clearInputOverride(responsive, bp, name) {
+    assertOverrideBreakpoint(bp);
+    const next = { ...(responsive ?? {}) };
+    const current = next[bp];
+    if (!current?.inputs)
+        return hasKeys(next) ? next : undefined;
+    const layer = { ...current };
+    if (name === undefined) {
+        delete layer.inputs;
     }
+    else {
+        const { [name]: _dropped, ...rest } = layer.inputs;
+        layer.inputs = hasKeys(rest) ? rest : undefined;
+        if (!layer.inputs)
+            delete layer.inputs;
+    }
+    next[bp] = hasKeys(layer) ? layer : undefined;
+    if (!next[bp])
+        delete next[bp];
+    return hasKeys(next) ? next : undefined;
 }
-
 /**
- * Gallery — data model + the SHARED "what are the image URLs" resolver.
- *
- * A Gallery is populated one of two ways (see gallery-component-plan.md):
- *  - **Manual**: an ordered `GalleryImage[]` trait. Each item is a raw/filebox URL OR a per-item
- *    binding path resolved against the item/route context.
- *  - **Bound**: the whole gallery repeats over a data source (a collection, or an array property
- *    inside one resource via `sourcePath`) — the items come from the shared `resolveRepeaterItems`,
- *    and one field of each record (`imageField`) is the URL.
+ * Remove overrides at `bp` and PRUNE whatever becomes empty, so "reset" and "never
+ * overridden" are the same state on disk — no tombstones, no nulls.
  *
- * `resolveGalleryUrls` is the SINGLE place both the builder canvas and the SSR/runtime engine turn a
- * node's config into the final `string[]` the crossfade loop consumes — so both sides show the same
- * images. It is pure and transport-agnostic; never fork it. It reuses `getByPath` (the same path
- * reader used by data-source resolving) so binding paths behave identically everywhere.
- */
-/**
- * Resolve a gallery's configured images to the flat, display-ready `string[]` the loop renders.
- * Pure. Empty/whitespace URLs are dropped so a half-filled manual list never yields blank frames.
+ *   clearOverride(r, bp)                 — the whole breakpoint
+ *   clearOverride(r, bp, undefined, st)  — one state at that breakpoint
+ *   clearOverride(r, bp, prop)           — one base-state value
+ *   clearOverride(r, bp, prop, st)       — one value within a state
  *
- * @param images  manual `GalleryImage[]` (manual mode). Ignored when `bound` is provided.
- * @param bound   bound-mode records + image field. When present, takes precedence over `images`.
- * @param ctx     render context for per-item bindings (item/route data). Defaults to `{}`.
+ * Returns `undefined` when nothing is left, so a serialiser omits the key entirely.
  */
-function resolveGalleryUrls(images, bound, ctx = {}) {
-    if (bound) {
-        const field = bound.imageField;
-        return (bound.items ?? [])
-            .map(item => (field ? getByPath(item, field) : item))
-            .map(coerceUrl)
-            .filter((u) => !!u);
+function clearOverride(responsive, bp, prop, state) {
+    assertOverrideBreakpoint(bp);
+    const next = { ...(responsive ?? {}) };
+    const current = next[bp];
+    if (current && (prop !== undefined || state !== undefined)) {
+        const layer = { ...current };
+        if (state) {
+            const states = { ...(layer.stateStyles ?? {}) };
+            if (prop !== undefined && states[state]) {
+                const { [prop]: _dropped, ...rest } = states[state];
+                states[state] = rest;
+            }
+            if (prop === undefined || !hasKeys(states[state]))
+                delete states[state];
+            layer.stateStyles = hasKeys(states) ? states : undefined;
+        }
+        else if (prop !== undefined && layer.styleProps) {
+            const { [prop]: _dropped, ...rest } = layer.styleProps;
+            layer.styleProps = hasKeys(rest) ? rest : undefined;
+        }
+        if (!layer.stateStyles)
+            delete layer.stateStyles;
+        if (!layer.styleProps)
+            delete layer.styleProps;
+        next[bp] = hasKeys(layer) ? layer : undefined;
     }
-    return (images ?? [])
-        .map(img => (img?.binding ? getByPath(ctx, img.binding) : img?.url))
-        .map(coerceUrl)
-        .filter((u) => !!u);
+    else {
+        next[bp] = undefined;
+    }
+    if (!next[bp])
+        delete next[bp];
+    return hasKeys(next) ? next : undefined;
 }
-/** A resolved value becomes a URL only if it's a non-empty string; everything else drops out. */
-function coerceUrl(value) {
-    if (typeof value !== 'string')
-        return null;
-    const trimmed = value.trim();
-    return trimmed ? trimmed : null;
+const ZERO_DURATIONS = new Set(['0ms', '0s']);
+function groupsTouchedBy(map) {
+    const touched = new Set();
+    if (!map)
+        return touched;
+    for (const group of VIRTUAL_TRAIT_GROUPS) {
+        if (group.keys.some(k => map[k] !== undefined))
+            touched.add(group);
+    }
+    return touched;
 }
 /**
- * Parse a pasted block of URLs (newline- and/or comma-separated) into `GalleryImage[]`. Used by the
- * MediaList trait editor's "paste URL list" affordance. Pure so it can be unit-tested + reused.
+ * Should a touched group that composed to nothing emit its cancelling value?
+ * Transition is the exception: setting only the easing (no duration anywhere) composes to
+ * nothing too, and cancelling there would also kill the renderer's default hover transition
+ * — so transition cancels only when the merged duration is explicitly zero.
  */
-function parseUrlList(text) {
-    if (!text)
-        return [];
-    return text
-        .split(/[\n,]+/)
-        .map(s => s.trim())
-        .filter(Boolean)
-        .map(url => ({ url }));
+function shouldReset(group, merged) {
+    if (group.reset === null)
+        return false;
+    if (group.output === 'transition')
+        return ZERO_DURATIONS.has(String(merged['transitionDuration']));
+    return true;
 }
-
 /**
- * Gallery effect registry — the SHARED, effect-agnostic description of how each gallery slide looks
- * and animates in a given crossfade state. Modeled on `binding-pipes.ts` / `PAGE_TRANSITION_PRESETS`:
- * a descriptor map + a resolve fn, all pure, consumed by BOTH the builder twin and the engine twin so
- * the fade looks identical on the canvas and the live site.
- *
- * v1 ships only `fade` (the look ported from `sites/interior-design` fade-gallery). Adding `slide`,
- * `zoom`, `kenburns`, … later is a new entry here + its CSS — NO component refactor, because the
- * component only ever asks `resolveGalleryEffect(id).buildSlideStyle(state)` for per-slide inline CSS.
+ * Compose a sparse override against everything wider than it, keeping ONLY what the
+ * override changes: its own plain props, plus each virtual group it touches (or that
+ * group's cancelling value when it now composes to nothing). Untouched groups are dropped
+ * — re-emitting the wider rule's value inside a media block is noise at best.
+ */
+function composeOverride(own, wider, touched) {
+    const composed = composeVirtualTraits(own, wider);
+    const groupOutputs = new Set(VIRTUAL_TRAIT_GROUPS.map(g => g.output));
+    const out = {};
+    for (const [k, v] of Object.entries(composed)) {
+        if (!groupOutputs.has(k) && v !== undefined)
+            out[k] = v;
+    }
+    const merged = { ...wider, ...own };
+    for (const group of touched) {
+        const value = composed[group.output];
+        if (value !== undefined)
+            out[group.output] = value;
+        else if (shouldReset(group, merged))
+            out[group.output] = group.reset;
+    }
+    return out;
+}
+/**
+ * The per-breakpoint rule sets a node needs, widest → narrowest (the order they must be
+ * emitted in, AFTER every base rule — equal specificity means source order decides).
+ * Breakpoints with nothing to emit are omitted.
  *
- * See iox-ai-guidance/architecture/builder/gallery-component-plan.md.
+ * Handles the cross-axis case: a breakpoint that changes a virtual group (say
+ * `translateX`) also re-emits that group for every state the node has, because the wider
+ * state rule was composed against the wider value and would otherwise snap back to it on
+ * hover.
  */
-/** The ken-burns zoom baked into the reference fade look (scale 1 → 1.05 over show+fade). */
-const FADE_ZOOM_EXTRA_MS = 1000;
-const fadeEffect = {
-    id: 'fade',
-    label: 'Fade',
-    defaults: { showMs: 4000, fadeMs: 1000 },
-    buildSlideStyle(state) {
-        const { active, fadingOut, firstCycleActive, durations } = state;
-        const zoomMs = durations.showMs + durations.fadeMs + FADE_ZOOM_EXTRA_MS;
-        // Before the first cycle activates, everything is flat + instant so there is no entry flash.
-        if (!firstCycleActive) {
-            return { opacity: '0', transform: 'scale(1)', transition: 'opacity 0ms, transform 0ms' };
-        }
-        const visible = active && !fadingOut;
-        const engaged = active || fadingOut; // current or outgoing slide is zoomed-in
-        return {
-            opacity: visible ? '1' : '0',
-            transform: engaged ? 'scale(1.05)' : 'scale(1)',
-            transition: `opacity ${durations.fadeMs}ms cubic-bezier(0.77, 0, 0.175, 1), ` +
-                `transform ${zoomMs}ms linear`,
-        };
-    },
-};
-/** The registry — one entry per effect. Keyed by id; unknown ids fall back to `fade`. */
-const GALLERY_EFFECTS = {
-    fade: fadeEffect,
-};
-/** Resolve an effect id to its descriptor, defaulting to `fade` (forward-compatible with new ids). */
-function resolveGalleryEffect(id) {
-    return (id && GALLERY_EFFECTS[id]) || GALLERY_EFFECTS['fade'];
+function planResponsiveRules(styleProps, stateStyles, responsive) {
+    if (!hasKeys(responsive))
+        return [];
+    const plan = [];
+    for (const def of BREAKPOINTS) {
+        const layer = layerAt(responsive, def.id);
+        if (!layer || def.maxWidth == null)
+            continue;
+        const bp = def.id;
+        const wider = parentBreakpoint(bp);
+        const own = layer.styleProps ?? {};
+        const widerProps = resolveStyleProps(styleProps, responsive, wider);
+        const touchedByProps = groupsTouchedBy(own);
+        const composedProps = composeOverride(own, widerProps, touchedByProps);
+        const propsHere = { ...widerProps, ...own };
+        const statesHere = resolveStateStyles(stateStyles, responsive, bp);
+        const statesWider = resolveStateStyles(stateStyles, responsive, wider);
+        const composedStates = {};
+        for (const state of Object.keys(statesHere)) {
+            const ownState = layer.stateStyles?.[state] ?? {};
+            const touched = groupsTouchedBy(ownState);
+            for (const group of touchedByProps)
+                touched.add(group);
+            const composed = composeOverride(ownState, { ...propsHere, ...(statesWider[state] ?? {}) }, touched);
+            if (hasKeys(composed))
+                composedStates[state] = composed;
+        }
+        if (hasKeys(composedProps) || hasKeys(composedStates)) {
+            plan.push({
+                breakpoint: bp,
+                mediaQuery: mediaQueryFor(bp),
+                styleProps: composedProps,
+                stateStyles: composedStates,
+            });
+        }
+    }
+    return plan;
 }
-const GALLERY_EFFECT_DESCRIPTORS = Object.values(GALLERY_EFFECTS).map(e => ({ id: e.id, label: e.label }));
 
+// Swiper breakpoints, derived from a node's per-breakpoint TRAIT overrides.
+//
+// SHARED (iox-ui): the builder canvas and the SSR engine both hand Swiper the same config, so a
+// slider that goes 1-up on a phone in the editor does the same on the live site.
+//
+// ⚠️ THE INVERSION IS THE WHOLE POINT OF THIS FILE.
+//   IOX  is desktop-first: `max-width`, and a layer applies at its width AND NARROWER.
+//   Swiper is mobile-first: `breakpoints` keys are MIN-widths, and the LARGEST matching key wins.
+// Converting by hand at each call site is how the two drift, so it happens once, here, tested.
+//
+// See iox-ai-guidance `architecture/builder/builder-quality-pass-plan.md` (P3-G2).
+/** Trait names whose value Swiper reads per breakpoint. Anything else is config-wide. */
+const SWIPER_RESPONSIVE_TRAITS = Object.freeze(['slidesPerView', 'slidesPerGroup', 'spaceBetween']);
 /**
- * Gallery crossfade loop — the SHARED, framework-free state machine that drives which image is
- * visible over time. Ported from the reference fade-gallery's `scheduleCycle` / `tryStartLoop` /
- * first-cycle-activation logic, with Angular specifics removed so BOTH the builder twin and the
- * engine/runtime twin (`iox-gallery`) run ONE implementation — never a forked copy that drifts.
+ * Build Swiper's mobile-first `breakpoints` map from IOX's desktop-first layers.
  *
- * The loop owns only *timing + index* state and emits it through `onChange`; the component maps that
- * state to CSS via the effect registry (`gallery-effects.ts`). Timers are injected so the loop is
- * deterministic under fake timers in tests and platform-guardable in the engine.
+ * Each IOX breakpoint covers `[nextNarrower.maxWidth + 1 … this.maxWidth]`, so the Swiper key for a
+ * layer is **one px above the next-narrower breakpoint's max-width** — the low edge of the band the
+ * layer governs. Base becomes the key above the widest bounded breakpoint.
  *
- * See iox-ai-guidance/architecture/builder/gallery-component-plan.md.
+ * Values are the RESOLVED ones at each width (base + every wider layer), never the raw sparse layer:
+ * Swiper does not cascade between its own breakpoints the way CSS does — the largest matching key
+ * wins outright and is not merged with smaller ones — so each entry must be self-sufficient.
+ *
+ * Only `SWIPER_RESPONSIVE_TRAITS` are emitted, and a band is omitted when it matches the band below
+ * it, keeping the config as small as the author's actual overrides.
  */
-/** Default scheduler over the platform's `setTimeout` / `requestAnimationFrame` (with a timer fallback). */
-const DEFAULT_GALLERY_SCHEDULER = {
-    setTimer: (fn, ms) => setTimeout(fn, ms),
-    clearTimer: h => clearTimeout(h),
-    nextFrame: fn => typeof requestAnimationFrame === 'function' ? requestAnimationFrame(fn) : setTimeout(fn, 16),
-    cancelFrame: h => {
-        if (typeof cancelAnimationFrame === 'function')
-            cancelAnimationFrame(h);
-        else
-            clearTimeout(h);
-    },
-};
-class GalleryLoop {
-    constructor(opts) {
-        this.count = 0;
-        this.currentIndex = 0;
-        this.fadingOutIndex = null;
-        this.firstCycleActive = false;
-        this.cycleTimer = null;
-        this.fadeTimer = null;
-        this.frameHandle = null;
-        /** Bumped on every (re)start so a stale timer callback from a previous run is ignored. */
-        this.runToken = 0;
-        this.running = false;
-        this.scheduler = opts.scheduler ?? DEFAULT_GALLERY_SCHEDULER;
-        this.showMs = opts.showMs;
-        this.fadeMs = opts.fadeMs;
-        this.onChange = opts.onChange;
-    }
-    get state() {
-        return {
-            currentIndex: this.currentIndex,
-            fadingOutIndex: this.fadingOutIndex,
-            firstCycleActive: this.firstCycleActive,
-        };
-    }
-    /** Start (or restart) the loop for `count` images. A count < 2 shows the single image without cycling. */
-    start(count) {
-        this.stop();
-        this.count = Math.max(0, count | 0);
-        this.currentIndex = 0;
-        this.fadingOutIndex = null;
-        this.firstCycleActive = false;
-        if (this.count === 0) {
-            this.emit();
-            return;
-        }
-        this.running = true;
-        const token = ++this.runToken;
-        // Activate on the next frame so the first paint is flat (no entry-transition flash), then
-        // begin cycling only when there is more than one image to advance through.
-        this.frameHandle = this.scheduler.nextFrame(() => {
-            if (token !== this.runToken || !this.running)
-                return;
-            this.firstCycleActive = true;
-            this.emit();
-            if (this.count > 1)
-                this.scheduleCycle(token);
-        });
-    }
-    /** Update timing live. Takes effect on the next scheduled cycle; does not restart the loop. */
-    setDurations(showMs, fadeMs) {
-        this.showMs = showMs;
-        this.fadeMs = fadeMs;
+function buildSwiperBreakpoints(inputs, responsive) {
+    const bands = bandsWidestFirst();
+    const map = {};
+    let previous = null;
+    // Narrowest → widest, so "same as the band below" is a comparison against what we just emitted.
+    for (const band of [...bands].reverse()) {
+        const resolved = pick(resolveInputs(inputs, responsive, band.id));
+        if (previous && sameValues(previous, resolved))
+            continue;
+        map[band.minWidth] = resolved;
+        previous = resolved;
     }
-    /** Stop and clear all timers. Idempotent. State is retained (call `start` to reset). */
-    stop() {
-        this.running = false;
-        this.runToken++;
-        if (this.cycleTimer != null) {
-            this.scheduler.clearTimer(this.cycleTimer);
-            this.cycleTimer = null;
-        }
-        if (this.fadeTimer != null) {
-            this.scheduler.clearTimer(this.fadeTimer);
-            this.fadeTimer = null;
+    return map;
+}
+/**
+ * The full `breakpoints` value to hand Swiper: the derived map, with any hand-written advanced JSON
+ * merged OVER it so an author's explicit escape hatch always wins.
+ */
+function mergeSwiperBreakpoints(derived, advancedJson) {
+    let advanced;
+    if (advancedJson) {
+        try {
+            advanced = JSON.parse(advancedJson);
         }
-        if (this.frameHandle != null) {
-            this.scheduler.cancelFrame(this.frameHandle);
-            this.frameHandle = null;
+        catch {
+            advanced = undefined;
         }
     }
-    scheduleCycle(token) {
-        if (token !== this.runToken || !this.running || this.count < 2)
-            return;
-        this.cycleTimer = this.scheduler.setTimer(() => {
-            if (token !== this.runToken || !this.running)
-                return;
-            this.fadingOutIndex = this.currentIndex;
-            this.currentIndex = (this.currentIndex + 1) % this.count;
-            this.emit();
-            this.fadeTimer = this.scheduler.setTimer(() => {
-                if (token !== this.runToken || !this.running)
-                    return;
-                this.fadingOutIndex = null;
-                this.emit();
-                this.scheduleCycle(token);
-            }, this.fadeMs);
-        }, this.showMs);
+    if (!advanced)
+        return Object.keys(derived).length ? derived : undefined;
+    const out = { ...derived };
+    for (const [key, value] of Object.entries(advanced)) {
+        const min = Number(key);
+        if (!Number.isFinite(min))
+            continue;
+        out[min] = { ...(out[min] ?? {}), ...(value ?? {}) };
     }
-    emit() {
-        this.onChange(this.state);
+    return Object.keys(out).length ? out : undefined;
+}
+/** Each IOX breakpoint with the MIN width at which it starts applying. Widest first. */
+function bandsWidestFirst() {
+    return BREAKPOINTS.map((def, i) => {
+        const narrower = BREAKPOINTS[i + 1];
+        // Base starts one px above the widest bounded breakpoint; every other band starts one px
+        // above the breakpoint below it. The narrowest band starts at 0 — it has nothing below.
+        const minWidth = narrower?.maxWidth != null ? narrower.maxWidth + 1 : 0;
+        return { id: def.id, minWidth };
+    });
+}
+function pick(resolved) {
+    const out = {};
+    for (const name of SWIPER_RESPONSIVE_TRAITS) {
+        if (resolved[name] !== undefined)
+            out[name] = resolved[name];
     }
+    return out;
+}
+function sameValues(a, b) {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const key of keys)
+        if (a[key] !== b[key])
+            return false;
+    return true;
 }
 
-/**
- * `iox-gallery` — the engine/runtime twin of the Gallery builder component (the builder twin
- * `app-builder-gallery` arrives in Phase 2). It runs the SHARED crossfade loop + effect registry from
- * `@vectoriox/iox-ui`, so the fade behaves identically on the canvas and the live site — no forked
- * animation logic. See iox-ai-guidance/architecture/builder/gallery-component-plan.md.
- *
- * Population: v1 drives the loop from the `images` input (manual mode). Data-source binding
- * (`source`/`sourcePath`) is Phase 3 — this component already resolves through `resolveGalleryUrls`,
- * so that only adds a bound-source input, not new render logic.
- *
- * SSR / no-JS: on the server the loop never starts, so the **first image renders visible** as a static
- * frame (SEO + no-JS baseline). In the browser `ngAfterViewInit` starts the loop, which begins on the
- * same index 0 — so the static frame and the first live frame match and there is no hydration flash.
- */
-class ClientGalleryComponent {
-    /** Manual images — `GalleryImage[]` or a plain `string[]` of URLs (normalised on set). */
-    set images(v) {
-        this._images = v ?? [];
-        this.urls = resolveGalleryUrls(this.normalizeImages(), null);
-        // A live edit (image added/removed/reordered) while the loop runs → restart on the new set so
-        // the canvas reflects it and the loop cycles through the new count.
-        if (this.loopActive)
-            this.startLoop();
+class ClientSliderContainerComponent {
+    /** The base (Base-breakpoint) values of the traits Swiper reads per width. Read from the live
+     *  inputs rather than the node, so the builder's direct-assignment edits are picked up too. */
+    collectSwiperInputs() {
+        const all = {
+            slidesPerView: this.slidesPerView,
+            slidesPerGroup: this.slidesPerGroup,
+            spaceBetween: this.spaceBetween,
+        };
+        const out = {};
+        for (const name of SWIPER_RESPONSIVE_TRAITS)
+            if (all[name] !== undefined)
+                out[name] = all[name];
+        return out;
     }
-    get images() { return this._images; }
-    set showDuration(v) { this._showDuration = v; this.loop?.setDurations(v, this._fadeDuration); }
-    get showDuration() { return this._showDuration; }
-    set fadeDuration(v) { this._fadeDuration = v; this.loop?.setDurations(this._showDuration, v); }
-    get fadeDuration() { return this._fadeDuration; }
-    constructor(platformId, cdr) {
-        this.cdr = cdr;
+    constructor(platformId) {
+        this.platformId = platformId;
         this.nodeId = '';
-        this.effect = 'fade';
-        this.autoStart = true;
-        /** Layout mode — only `'stack'` is rendered in v1 (`'grid'` scaffolded for later). */
-        this.layout = 'stack';
-        // ── Inputs that mutate live state use SETTERS, not ngOnChanges ──────────────────────────────
-        // The builder trait panel pushes edits via DIRECT property assignment (`instance.images = v`),
-        // which does NOT trigger ngOnChanges — so a gallery that recomputed in ngOnChanges never refreshed
-        // when you added an image on the canvas. A setter fires on BOTH direct assignment (builder panel)
-        // and setInput (SSR engine / render.directive), so it's the one path that works everywhere.
-        this._images = [];
-        this._showDuration = 4000;
-        this._fadeDuration = 1000;
-        /** The flat, display-ready URLs the loop cycles. Recomputed whenever `images` is set. */
-        this.urls = [];
-        this.currentIndex = 0;
-        this.fadingOutIndex = null;
-        this.started = false;
-        /** True once the loop has been started (in ngAfterViewInit) — gates the setter-driven restart. */
-        this.loopActive = false;
-        this.loop = null;
-        this.isBrowser = isPlatformBrowser(platformId);
+        /** Language (writing) direction. Rendered as the `dir` attribute so it survives SSR and drives
+         *  Swiper's RTL layout — must match the builder's app-slider-container, which had `dir` while
+         *  this engine-runtime component did not (RTL showed in the editor but never on the live site). */
+        this.dir = 'ltr';
+        this.direction = 'horizontal';
+        this.loop = false;
+        this.slidesPerView = 1;
+        /** Declared by the config since the slider shipped, but never declared HERE — so `safeSetInput`
+         *  dropped it and the panel control did nothing on either renderer. */
+        this.slidesPerGroup = 1;
+        this.spaceBetween = 0;
+        this.speed = 300;
+        this.effect = 'slide';
+        this.grabCursor = true;
+        this.centeredSlides = false;
+        this.initialSlide = 0;
+        this.enableNavigation = false;
+        this.enablePagination = false;
+        this.enableScrollbar = false;
+        this.enableAutoplay = false;
+        this.enableKeyboard = false;
+        this.enableMousewheel = false;
+        this.enableZoom = false;
+        this.enableGrid = false;
+        this.enableParallax = false;
+        this.autoplayDelay = 3000;
+        this.autoplayPauseOnMouseEnter = true;
+        this.autoplayDisableOnInteraction = false;
+        this.paginationType = 'bullets';
+        this.paginationClickable = true;
+        this.gridRows = 1;
+        /** Advanced escape hatch: raw Swiper `breakpoints` JSON. Merged OVER the map derived from the
+         *  node's per-breakpoint traits, so an explicit hand-written value always wins. */
+        this.breakpoints = '';
+        /** The node's per-breakpoint overrides. Only its `inputs` layer is read here — the style layers
+         *  are compiled to CSS by the style engine, not handed to Swiper. */
+        this.responsive = null;
+        this._swiper = null;
+        this.instanceRegistry = inject(ComponentInstanceRegistryService);
     }
+    ngOnInit() { }
     ngAfterViewInit() {
-        if (this.isBrowser && this.autoStart) {
-            this.startLoop();
+        if (isPlatformBrowser(this.platformId)) {
+            // Defer so all child slides are rendered first
+            requestAnimationFrame(() => this._initSwiper());
         }
     }
     ngOnDestroy() {
-        this.loop?.stop();
-        this.loop = null;
-        this.loopActive = false;
-    }
-    /** Per-slide inline style. Before the loop activates (server + no-JS + pre-first-frame) the first
-     *  image is the visible static frame; once running, the effect owns each slide's look. */
-    slideStyle(i) {
-        if (!this.started) {
-            return i === 0
-                ? { opacity: '1', transform: 'scale(1)', transition: 'none' }
-                : { opacity: '0', transform: 'scale(1)', transition: 'none' };
+        if (this._swiper) {
+            this._swiper.destroy(true, true);
+            this._swiper = null;
+            this.instanceRegistry.unregister(this.nodeId);
         }
-        return resolveGalleryEffect(this.effect).buildSlideStyle({
-            active: i === this.currentIndex,
-            fadingOut: i === this.fadingOutIndex,
-            firstCycleActive: true,
-            durations: { showMs: this.showDuration, fadeMs: this.fadeDuration },
-        });
     }
-    startLoop() {
-        if (!this.isBrowser)
+    async _initSwiper() {
+        const el = this.swiperEl?.nativeElement;
+        if (!el)
             return;
-        this.loopActive = true;
-        this.loop?.stop();
-        this.loop = new GalleryLoop({
-            showMs: this.showDuration,
-            fadeMs: this.fadeDuration,
-            onChange: state => {
-                this.currentIndex = state.currentIndex;
-                this.fadingOutIndex = state.fadingOutIndex;
-                this.started = state.firstCycleActive;
-                this.cdr.markForCheck();
-            },
-        });
-        this.loop.start(this.urls.length);
-    }
-    normalizeImages() {
-        return (this.images ?? []).map(img => (typeof img === 'string' ? { url: img } : img));
+        const [{ default: Swiper }, swiperModules] = await Promise.all([
+            import('swiper'),
+            import('swiper/modules'),
+        ]);
+        const { Navigation, Pagination, Scrollbar, Autoplay, Keyboard, Mousewheel, Zoom, Grid, Parallax, 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);
+        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]);
+        }
+        const config = {
+            modules,
+            // Swiper reads the container's `dir` attribute, but pass it explicitly so RTL is applied
+            // on init regardless of attribute timing.
+            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,
+        };
+        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 };
+        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 };
+        // Per-breakpoint traits (slidesPerView/slidesPerGroup/spaceBetween) become Swiper's own
+        // mobile-first `breakpoints` map via the SHARED converter — the desktop-first → mobile-first
+        // inversion lives there, tested, not at each call site. The hand-written `breakpoints` JSON
+        // stays as an advanced escape hatch and is merged OVER the derived map.
+        const derived = buildSwiperBreakpoints(this.collectSwiperInputs(), this.responsive);
+        const breakpointMap = mergeSwiperBreakpoints(derived, this.breakpoints);
+        if (breakpointMap)
+            config['breakpoints'] = breakpointMap;
+        this._swiper = new Swiper(el, config);
+        this.instanceRegistry.register(this.nodeId, this._swiper);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientGalleryComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientGalleryComponent, isStandalone: false, selector: "iox-gallery", inputs: { nodeId: "nodeId", effect: "effect", autoStart: "autoStart", layout: "layout", images: "images", showDuration: "showDuration", fadeDuration: "fadeDuration" }, ngImport: i0, template: `
-        <div class="iox-gallery" [class]="'iox-node-' + nodeId">
-            <div *ngFor="let url of urls; index as i"
-                 class="iox-gallery__img"
-                 [style.background-image]="'url(' + url + ')'"
-                 [ngStyle]="slideStyle(i)"></div>
-            <div class="iox-gallery__overlay"></div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderContainerComponent, isStandalone: false, selector: "iox-slider-container", inputs: { nodeId: "nodeId", dir: "dir", direction: "direction", loop: "loop", slidesPerView: "slidesPerView", slidesPerGroup: "slidesPerGroup", spaceBetween: "spaceBetween", speed: "speed", effect: "effect", grabCursor: "grabCursor", centeredSlides: "centeredSlides", initialSlide: "initialSlide", enableNavigation: "enableNavigation", enablePagination: "enablePagination", enableScrollbar: "enableScrollbar", enableAutoplay: "enableAutoplay", enableKeyboard: "enableKeyboard", enableMousewheel: "enableMousewheel", enableZoom: "enableZoom", enableGrid: "enableGrid", enableParallax: "enableParallax", autoplayDelay: "autoplayDelay", autoplayPauseOnMouseEnter: "autoplayPauseOnMouseEnter", autoplayDisableOnInteraction: "autoplayDisableOnInteraction", paginationType: "paginationType", paginationClickable: "paginationClickable", gridRows: "gridRows", breakpoints: "breakpoints", responsive: "responsive" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "swiperEl", first: true, predicate: ["swiperEl"], descendants: true, static: true }], ngImport: i0, template: `
+        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
+            <div class="swiper-wrapper">
+                <ng-container #childrenHost></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>
+            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, isInline: true, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    `, isInline: true, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'iox-gallery', template: `
-        <div class="iox-gallery" [class]="'iox-node-' + nodeId">
-            <div *ngFor="let url of urls; index as i"
-                 class="iox-gallery__img"
-                 [style.background-image]="'url(' + url + ')'"
-                 [ngStyle]="slideStyle(i)"></div>
-            <div class="iox-gallery__overlay"></div>
+            args: [{ selector: 'iox-slider-container', template: `
+        <div class="swiper" [class]="'iox-node-' + nodeId" [attr.dir]="dir" [style.direction]="dir" #swiperEl>
+            <div class="swiper-wrapper">
+                <ng-container #childrenHost></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>
+            <div *ngIf="enableScrollbar"  class="swiper-scrollbar"></div>
         </div>
-    `, standalone: false, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"] }]
+    `, standalone: false, styles: [".swiper{width:100%;height:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { nodeId: [{
+                }] }], propDecorators: { nodeId: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], loop: [{
+                type: Input
+            }], slidesPerView: [{
+                type: Input
+            }], slidesPerGroup: [{
+                type: Input
+            }], spaceBetween: [{
+                type: Input
+            }], speed: [{
                 type: Input
             }], effect: [{
                 type: Input
-            }], autoStart: [{
+            }], grabCursor: [{
                 type: Input
-            }], layout: [{
+            }], centeredSlides: [{
                 type: Input
-            }], images: [{
+            }], initialSlide: [{
                 type: Input
-            }], showDuration: [{
+            }], enableNavigation: [{
                 type: Input
-            }], fadeDuration: [{
+            }], enablePagination: [{
+                type: Input
+            }], enableScrollbar: [{
+                type: Input
+            }], enableAutoplay: [{
+                type: Input
+            }], enableKeyboard: [{
+                type: Input
+            }], enableMousewheel: [{
+                type: Input
+            }], enableZoom: [{
+                type: Input
+            }], enableGrid: [{
+                type: Input
+            }], enableParallax: [{
+                type: Input
+            }], autoplayDelay: [{
+                type: Input
+            }], autoplayPauseOnMouseEnter: [{
+                type: Input
+            }], autoplayDisableOnInteraction: [{
+                type: Input
+            }], paginationType: [{
+                type: Input
+            }], paginationClickable: [{
+                type: Input
+            }], gridRows: [{
+                type: Input
+            }], breakpoints: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }], swiperEl: [{
+                type: ViewChild,
+                args: ['swiperEl', { static: true }]
+            }] } });
+
+/**
+ * Client-engine slide. The HOST element (`iox-slider-slide`) itself carries the
+ * `swiper-slide` class so it is a DIRECT child of `.swiper-wrapper` — Swiper only
+ * recognises slides that are direct children (the `.swiper-slide` direct-child
+ * invariant; see iox-ai-guidance architecture/builder/slider.md). A wrapper div
+ * would nest `.swiper-slide` one level too deep and Swiper would ignore the slides.
+ *
+ * The shared `iox-node-{id}` class is applied to the same host so the page-level
+ * CSS rules match (parity with the string renderer / builder).
+ */
+class ClientSliderSlideComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientSliderSlideComponent, isStandalone: false, selector: "iox-slider-slide", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'swiper-slide iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{display:block;box-sizing:border-box}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientSliderSlideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-slider-slide', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': `'swiper-slide iox-node-' + nodeId` }, standalone: false, styles: [":host{display:block;box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+/**
+ * Directive-host List: the real `<ul>`/`<ol>` IS the host — no `iox-list` wrapper, no
+ * inner/outer split. The tag is chosen by whoever CREATES the component (engine passes
+ * `hostElement: document.createElement(htmlTag)`), NOT an internal `*ngIf`. Children render
+ * into the host via `childrenHost`. `start`/`reversed` are host attrs (only meaningful on `<ol>`).
+ */
+class ClientListComponent {
+    constructor() {
+        this.htmlTag = 'ul';
+        this.start = '';
+        this.reversed = false;
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientListComponent, isStandalone: false, selector: "ul[iox-list],ol[iox-list]", inputs: { htmlTag: "htmlTag", start: "start", reversed: "reversed", nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId", "attr.start": "htmlTag === 'ol' && start !== '' && start != null ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{margin:0;box-sizing:border-box}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[iox-list],ol[iox-list]', template: `<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-node-' + nodeId",
+                        '[attr.start]': "htmlTag === 'ol' && start !== '' && start != null ? start : null",
+                        '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
+                    }, standalone: false, styles: [":host{margin:0;box-sizing:border-box}\n"] }]
+        }], propDecorators: { htmlTag: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], reversed: [{
+                type: Input
+            }], nodeId: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+/**
+ * Directive-host List item: the real `<li>` IS the host — no `iox-list-item` wrapper, no
+ * inner/outer split. Children render into the `<li>` via `childrenHost`. Fixed tag (`<li>`),
+ * so the engine creates it with `vcr.createComponent` (no `hostElement` needed).
+ */
+class ClientListItemComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientListItemComponent, isStandalone: false, selector: "li[iox-list-item]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[iox-list-item]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
                 type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
-const COMPONENTS = [
-    BuilderImageComponent,
-    BuilderSpacerComponent,
-    CardComponent,
-    BuilderDividerComponent,
-    BuilderIconComponent,
-    BuilderLinkComponent,
-    BuilderButtonComponent,
-    BuilderHeadingComponent,
-    TextBlockComponent,
-    SectionComponent,
-    ContainerComponent,
-    LinkedContainerComponent,
-    ClientRepeaterComponent,
-    ButtonBlockComponent,
-    ClientSliderContainerComponent,
-    ClientSliderSlideComponent,
-    ClientListComponent,
-    ClientListItemComponent,
-    ClientGalleryComponent,
-];
-class IoxBuilderComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, declarations: [BuilderImageComponent,
-            BuilderSpacerComponent,
-            CardComponent,
-            BuilderDividerComponent,
-            BuilderIconComponent,
-            BuilderLinkComponent,
-            BuilderButtonComponent,
-            BuilderHeadingComponent,
-            TextBlockComponent,
-            SectionComponent,
-            ContainerComponent,
-            LinkedContainerComponent,
-            ClientRepeaterComponent,
-            ButtonBlockComponent,
-            ClientSliderContainerComponent,
-            ClientSliderSlideComponent,
-            ClientListComponent,
-            ClientListItemComponent,
-            ClientGalleryComponent], imports: [CommonModule], exports: [BuilderImageComponent,
-            BuilderSpacerComponent,
-            CardComponent,
-            BuilderDividerComponent,
-            BuilderIconComponent,
-            BuilderLinkComponent,
-            BuilderButtonComponent,
-            BuilderHeadingComponent,
-            TextBlockComponent,
-            SectionComponent,
-            ContainerComponent,
-            LinkedContainerComponent,
-            ClientRepeaterComponent,
-            ButtonBlockComponent,
-            ClientSliderContainerComponent,
-            ClientSliderSlideComponent,
-            ClientListComponent,
-            ClientListItemComponent,
-            ClientGalleryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: COMPONENTS,
-                    imports: [CommonModule],
-                    exports: COMPONENTS,
-                }]
-        }] });
-
 /**
- * Single source of truth for the IOX component type → Angular class mapping.
- * Used by the client engine (iox-client-engine) to resolve component classes
- * from IoxLayoutNode.type strings at render time.
+ * Shared data-source resolving pattern — the SINGLE source of truth for how an IoxDataSource
+ * becomes a backend fetch, consumed by BOTH the page builder (iox-cms-client bindings panel) and
+ * the SSR client engine (iox-client-engine DataSourceResolverService). There must be no second
+ * copy of this decision logic; only the transport differs between the two:
  *
- * All 13 builder components are registered here:
- * - Leaf (Phase 2a): Image, Spacer, Card, Divider, Icon
- * - Inline-editable (Phase 2b): Link, Button, Heading, Text
- * - Layout shells (Phase 2c): Section, Container, LinkedContainer
- * - Repeater (Phase 2d): ClientRepeaterComponent
+ *   builder → authenticated org-scoped controllers (admin session):
+ *              single by id → GET admin.../resources/:type/:id   (ContentService.getContentById)
+ *              collection    → GET admin.../resources/:type        (ContentService.getContent)
+ *   engine  → @Public() controllers (no auth, isPublished filter applied server-side):
+ *              single by id → GET api/:type/:id                    (UserResourcesController)
+ *              collection    → GET api/:type?filters                (UserResourcesController)
  *
- * Section/Container/LinkedContainer/Repeater expose childrenHost: ViewContainerRef
- * for ClientRenderDirective to insert child components into.
+ * The DECISION (by-id vs collection, which id, which filters, how to pick the single result) is
+ * identical for both — that's what this module owns. Each app maps the returned {@link DataSourcePlan}
+ * onto its own transport. A single item is ALWAYS fetched by its id as a path segment — never a
+ * `?_id=` query — to match the builder's getContentById.
  */
-class IoxComponentRegistryService {
-    constructor() {
-        this.map = new Map([
-            ['Image', BuilderImageComponent],
-            ['Spacer', BuilderSpacerComponent],
-            ['Card', CardComponent],
-            ['Divider', BuilderDividerComponent],
-            ['Icon', BuilderIconComponent],
-            ['Link', BuilderLinkComponent],
-            ['Button', BuilderButtonComponent],
-            ['Heading', BuilderHeadingComponent],
-            ['Text', TextBlockComponent],
-            ['Section', SectionComponent],
-            ['Container', ContainerComponent],
-            ['LinkedContainer', LinkedContainerComponent],
-            ['Repeater', ClientRepeaterComponent],
-            ['ButtonBlock', ButtonBlockComponent],
-            ['SliderContainer', ClientSliderContainerComponent],
-            ['SliderSlide', ClientSliderSlideComponent],
-            ['List', ClientListComponent],
-            ['ListItem', ClientListItemComponent],
-            ['Gallery', ClientGalleryComponent],
-        ]);
+/**
+ * Match a page route template against an actual path and extract named params.
+ *   matchRouteParams('/project/:projectId', 'project/68abc') → { projectId: '68abc' }
+ * Both sides are normalised (leading slash stripped) and split on '/'; values are URL-decoded.
+ */
+function matchRouteParams(template, actual) {
+    const t = (template ?? '').replace(/^\/+/, '').split('/');
+    const a = (actual ?? '').replace(/^\/+/, '').split('/');
+    const params = {};
+    for (let i = 0; i < t.length; i++) {
+        const seg = t[i];
+        if (seg && seg.startsWith(':'))
+            params[seg.slice(1)] = decodeURIComponent(a[i] ?? '');
     }
-    getComponent(type) {
-        return this.map.get(type);
+    return params;
+}
+/**
+ * Build the query filter for a data-source request from its filterByRouteParam / filterByQueryParams
+ * config. `field` is filtered by the route-param value (falling back to `defaultId`); query filters
+ * map each `field` to a query-param value (falling back to `defaultValue`), and a filter with NO
+ * `queryParam` is a constant on `defaultValue`. Empty values are omitted so the source isn't
+ * accidentally filtered to nothing.
+ */
+function buildDataSourceFilter(req, routeParams = {}, queryParams = {}) {
+    const params = {};
+    const byRoute = req?.filterByRouteParam;
+    if (byRoute?.field && byRoute?.routeParam) {
+        const value = routeParams[byRoute.routeParam] ?? byRoute.defaultId;
+        if (value !== undefined && value !== null && value !== '')
+            params[byRoute.field] = value;
     }
-    hasComponent(type) {
-        return this.map.has(type);
+    for (const q of req?.filterByQueryParams ?? []) {
+        if (!q?.field)
+            continue;
+        // No queryParam → a CONSTANT filter: defaultValue is the value, in the builder preview and
+        // on the live site alike. With a queryParam the URL wins and defaultValue is the fallback.
+        const value = q.queryParam ? (queryParams[q.queryParam] ?? q.defaultValue) : q.defaultValue;
+        if (value !== undefined && value !== null && value !== '')
+            params[q.field] = value;
+    }
+    return params;
+}
+/**
+ * Mirrors the builder's getContentById decision. When a SINGLE source is filtered by the item id
+ * (`_id`) via a route param, the item is fetched by PATH (`.../:type/:id`), not a `?_id=` query.
+ * Returns that id (route-param value, else `defaultId`), or `null` when the source isn't a
+ * single-by-id fetch — in which case the caller uses the collection endpoint + filters. The
+ * path-based form only applies to the id field; a single source filtered by any other field still
+ * goes through the collection endpoint.
+ */
+function resolveSingleItemId(req, routeParams = {}) {
+    const byRoute = req?.filterByRouteParam;
+    if (!byRoute?.routeParam)
+        return null;
+    if (byRoute.field && byRoute.field !== '_id')
+        return null;
+    const value = routeParams[byRoute.routeParam] ?? byRoute.defaultId;
+    return value !== undefined && value !== null && value !== '' ? String(value) : null;
+}
+/**
+ * Resolve an IoxDataSource into a transport-agnostic {@link DataSourcePlan}. This is the shared
+ * decision both the builder and the SSR engine run; each then executes the plan with its own
+ * HTTP layer. Single sources with a route-param id resolve to a `by-id` (path) fetch — exactly like
+ * the builder's getContentById.
+ */
+function planDataSource(ds, routeParams = {}, queryParams = {}) {
+    const mode = ds?.mode === 'single' ? 'single' : 'list';
+    switch (ds?.type) {
+        case 'cms':
+        case 'shop': {
+            const domain = ds.type;
+            const req = domain === 'cms' ? ds.request?.cms : ds.request?.shop;
+            const resource = req?.contentType;
+            if (!resource)
+                return { kind: 'none' };
+            const id = mode === 'single' ? resolveSingleItemId(req, routeParams) : null;
+            if (id)
+                return { kind: 'by-id', domain, resource, id, mode };
+            const filter = buildDataSourceFilter(req, routeParams, queryParams);
+            const plan = { kind: 'collection', domain, resource, filter, mode };
+            if (req?.limit)
+                plan.limit = req.limit;
+            return plan;
+        }
+        case 'external-api': {
+            const endpoint = ds.request?.endpoint;
+            return endpoint ? { kind: 'external', endpoint, mode } : { kind: 'none' };
+        }
+        case 'static':
+            return { kind: 'static', data: ds.request?.data ?? null, mode };
+        case 'derived': {
+            const d = ds.request?.derived;
+            return d?.from ? { kind: 'derived', from: d.from, path: d.path ?? '', mode } : { kind: 'none' };
+        }
+        case 'variable':
+            // A VARIABLE is a page-local resource whose value is WRITTEN at runtime by an interaction
+            // (setContext), never fetched. It resolves to nothing here on purpose: the page renders
+            // its empty state until something writes it. `request.variable.itemsFrom` only names the
+            // source whose items it holds, so the bind picker can suggest fields.
+            return { kind: 'none' };
+        default:
+            return { kind: 'none' };
+    }
+}
+/**
+ * The aliases on a page that are VARIABLES — runtime-written resources, not fetched data.
+ *
+ * Shared so the builder and the SSR engine agree on which aliases start empty and are filled by
+ * interactions. See element-context-state-plan.md.
+ */
+function variableAliases(dataSources) {
+    const out = new Set();
+    for (const ds of dataSources ?? []) {
+        if (ds?.type === 'variable' && ds.alias)
+            out.add(ds.alias);
+    }
+    return out;
+}
+/** The source alias whose items a variable holds, if it declares one (for field suggestions). */
+function variableItemsFrom(dataSources, alias) {
+    for (const ds of dataSources ?? []) {
+        if (ds?.type === 'variable' && ds.alias === alias)
+            return ds.request?.variable?.itemsFrom || undefined;
+    }
+    return undefined;
+}
+/**
+ * Normalise a collection response into the shape a source expects: unwraps `{items}`/`{data}`
+ * envelopes, then returns the first item for a `single` source or the whole array for a `list`.
+ * A `by-id` response is already the item, so callers pass it through unchanged.
+ */
+function normalizeCollectionResult(mode, data) {
+    const items = Array.isArray(data) ? data : (data?.items ?? data?.data ?? []);
+    return mode === 'single' ? (items[0] ?? null) : items;
+}
+/** Navigate a dot/bracket path into an object, e.g. `gallery`, `details.images`, `variants[0].skus`.
+ *  Returns undefined if any segment is missing. Kept minimal + self-contained so it is shareable by
+ *  both the builder and the SSR engine (the two have divergent local `resolvePath` copies). */
+function getByPath(obj, path) {
+    if (obj == null || !path)
+        return obj;
+    // Turn `a[0].b` into ['a','0','b'].
+    const segments = path.replace(/\[(\w+)\]/g, '.$1').split('.').filter(Boolean);
+    let cur = obj;
+    for (const seg of segments) {
+        if (cur == null)
+            return undefined;
+        cur = cur[seg];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxComponentRegistryService, providedIn: 'root' }); }
+    return cur;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxComponentRegistryService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
- * style-compiler — the SINGLE source of truth for turning a node's style map into
- * CSS declarations. Framework-agnostic (no Angular): consumed by both renderers.
- *
- *   - Builder canvas: `StyleRegistryService` (@vectoriox/iox-builder) → live `<style>` tag.
- *   - SSR site:       `LayoutRendererService` (iox-client-engine)     → HTML string CSS.
- *
- * Lives in @vectoriox/iox-ui because BOTH consumers depend on iox-ui (the engine does
- * NOT depend on iox-builder). Keeping it here — not duplicated per renderer — is what
- * prevents the builder and the live site from drifting.
- * See iox-ai-guidance `architecture/builder/render-parity.md`.
+ * The array a Repeater (or a repeating Slider) iterates over — the SHARED decision so the builder
+ * canvas and the SSR engine agree (see data-source-resolving.md).
+ * - No `sourcePath`: the resolved source IS the list. An array passes through; a lone object degrades
+ *   to a single-row list (back-compat with the old `fetchItems`); null/undefined → `[]`.
+ * - With `sourcePath`: the source resolved to a SINGLE resource (e.g. a product); dive into the
+ *   nested array property (e.g. `gallery`). Non-array / missing → `[]`.
  */
 /**
- * Rewrite viewport-relative units so they resolve to the simulated canvas dimensions
- * in the builder, and to the real viewport in production.
- *
- * `--preview-vh` / `--preview-vw` are set by BuilderComponent (ResizeObserver +
- * viewport-state subscription). In production those variables are undefined, so the
- * `1vh` / `1vw` fallbacks restore native browser behaviour.
+ * Fill in `derived` aliases in an already-resolved map. Given the data sources and a map of resolved
+ * NON-derived values (by alias), compute each `type:'derived'` alias as `getByPath(parent, path)` in
+ * dependency order (chains resolved by iterating until stable). Mutates + returns the map. Used by the
+ * SSR engine after it resolves the root sources; the builder resolves derived lazily per alias.
  */
-function rewriteViewportUnits(value) {
-    return value
-        .replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))')
-        .replace(/(-?\d*\.?\d+)vw/g, 'calc($1 * var(--preview-vw, 1vw))');
+function resolveDerivedInto(dataSources, resolved) {
+    const derived = (dataSources ?? []).filter(d => d?.type === 'derived' && !!d.alias);
+    let changed = true, guard = 0;
+    while (changed && guard++ < 25) {
+        changed = false;
+        for (const d of derived) {
+            if (d.alias in resolved)
+                continue;
+            const from = d.request?.derived?.from;
+            if (from && from in resolved) {
+                resolved[d.alias] = getByPath(resolved[from], d.request.derived.path ?? '');
+                changed = true;
+            }
+        }
+    }
+    return resolved;
 }
-/** camelCase style key → kebab-case CSS property. */
-function styleKeyToKebab(key) {
-    return key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+function resolveRepeaterItems(resolved, sourcePath) {
+    if (sourcePath) {
+        const nested = getByPath(resolved, sourcePath);
+        return Array.isArray(nested) ? nested : [];
+    }
+    if (Array.isArray(resolved))
+        return resolved;
+    return resolved == null ? [] : [resolved];
+}
+// ── Referenced data sources (shared: builder-save + SSR resolve) ─────────────────────────────────
+// Which data-source aliases a node tree uses, so a consumer resolves ONLY what a page/global needs
+// (not the whole org library). Used by cms-client (persist globals' sources) and the SSR engine
+// (resolve the referenced subset per page). See org-data-sources-plan.md.
+/** Aliases referenced anywhere in a node tree: a repeater/slider `source` (a `bindings` entry with
+ *  `prop === 'source'`, or `props.source` for the slider) plus every binding's `source`. */
+function collectReferencedAliases(nodes, acc = new Set()) {
+    for (const n of nodes ?? []) {
+        for (const b of n?.bindings ?? []) {
+            if (b?.source)
+                acc.add(b.source);
+        }
+        if (n?.props?.source)
+            acc.add(n.props.source);
+        if (n?.children?.length)
+            collectReferencedAliases(n.children, acc);
+    }
+    return acc;
+}
+/** The subset of `all` whose `alias` is referenced by `nodes` (shallow — direct references only). */
+function referencedDataSources(nodes, all) {
+    const aliases = collectReferencedAliases(nodes);
+    return (all ?? []).filter(ds => aliases.has(ds?.alias));
+}
+/** Like `referencedDataSources`, but also pulls in a referenced source's DEPENDENCIES (transitively),
+ *  none of which the layout names directly:
+ *   - a `derived` alias needs its `request.derived.from` parent;
+ *   - a `relative` (route-context) alias needs its `request.relative.subjectFrom` (the current item)
+ *     and `request.relative.from` (the collection it navigates).
+ *  Use this when RESOLVING (the engine) so derived views and siblings/related don't resolve to nothing. */
+function referencedDataSourcesDeep(nodes, all) {
+    const byAlias = new Map((all ?? []).map(d => [d?.alias, d]));
+    const wanted = collectReferencedAliases(nodes);
+    const queue = [...wanted];
+    const enqueue = (alias) => {
+        if (alias && !wanted.has(alias)) {
+            wanted.add(alias);
+            queue.push(alias);
+        }
+    };
+    while (queue.length) {
+        const ds = byAlias.get(queue.pop());
+        enqueue(ds?.request?.derived?.from);
+        enqueue(ds?.request?.relative?.subjectFrom);
+        enqueue(ds?.request?.relative?.from);
+    }
+    return (all ?? []).filter(d => wanted.has(d?.alias));
 }
 /**
- * kebab CSS property → the value that equals its CSS initial AND has no UA-stylesheet override for
- * any element the builder renders (div/section/span/i/a/img/h1–h6/p/ul). Emitting these is a pure
- * no-op, so they're dropped to keep the compiled CSS lean (self-describing nodes serialise every
- * trait, many at their default).
- *
- * Deliberately EXCLUDED, because a value equal to the initial can still be meaningful there:
- *   - inherited properties (line-height, color, font-family/size/weight, text-align, letter-spacing…)
- *     — the value may override an inherited ancestor value.
- *   - margin / padding — UA stylesheets set them on h1–h6, p, ul, so `0` depends on a reset.
- *   - border-* — the initial `medium` width + interaction with border-style makes it non-trivial.
- */
-const NOOP_INITIAL_VALUES = {
-    'width': ['auto'], 'height': ['auto'],
-    'min-width': ['auto'], 'min-height': ['auto'],
-    'max-width': ['none', 'auto'], 'max-height': ['none', 'auto'], // `auto` is invalid for max-* → inert
-    'position': ['static'],
-    'top': ['auto'], 'right': ['auto'], 'bottom': ['auto'], 'left': ['auto'],
-    'opacity': ['1'], 'z-index': ['auto'],
-    'flex-grow': ['0'], 'flex-shrink': ['1'], 'flex-basis': ['auto'],
-    'flex-direction': ['row'], 'flex-wrap': ['nowrap'],
-    'gap': ['0', '0px', 'normal'],
-    'border-radius': ['0', '0px'],
-    'aspect-ratio': ['auto'],
-    'mix-blend-mode': ['normal'],
-    'transform': ['none'], 'box-shadow': ['none'],
-    // overflow initial is `visible`. A self-describing node serialises the Overflow trait's default,
-    // so WITHOUT this the emitted `overflow: visible` would override component baselines that clip
-    // (e.g. `.iox-card__img-wrap`, `.iox-slider`, `.iox-gallery` all set `overflow: hidden`), breaking
-    // object-fit/aspect-ratio image clipping everywhere. A user-set hidden/scroll/auto/clip is not the
-    // initial, so it still emits and wins.
-    'overflow': ['visible'], 'overflow-x': ['visible'], 'overflow-y': ['visible'],
-    'clip-path': ['none'],
-};
-/**
- * Style props a type's render-default fully REPLACES. Emitting them would produce a dead
- * declaration that is immediately overridden in the same rule (e.g. an Icon's serialised
- * `lineHeight: 1.5` followed by the forced `line-height: 1`), so callers strip them first via
- * {@link stripSuppressedProps} and let renderDefaultDeclarations supply the real value.
+ * Turn a resolved {@link DataSourcePlan} into the concrete public HTTP request (url + params) — the
+ * SINGLE place that decides the URL shape, shared by the builder binding preview and the SSR engine
+ * so both hit the SAME public endpoints (no admin, no duplication). Returns `null` for `static` /
+ * `none` plans (no HTTP call). A single item is a PATH segment (`/:resource/:id`), never `?_id=`.
  */
-const SUPPRESSED_STYLE_PROPS_BY_TYPE = {
-    // An icon's line box is structurally forced to 1 — see the Icon branch of renderDefaultDeclarations.
-    Icon: ['lineHeight'],
-};
-/** Remove the style props whose value a type's render-default always overrides. Returns the map
- *  unchanged (same reference) when the type suppresses nothing. */
-function stripSuppressedProps(type, styleProps) {
-    const suppressed = SUPPRESSED_STYLE_PROPS_BY_TYPE[type];
-    if (!suppressed?.length)
-        return styleProps;
-    const out = { ...styleProps };
-    for (const key of suppressed)
-        delete out[key];
-    return out;
+function dataSourcePlanToRequest(plan, endpoints) {
+    const baseFor = (domain) => (domain === 'shop' ? endpoints.shopBase : endpoints.cmsBase);
+    switch (plan.kind) {
+        case 'by-id':
+            return { url: `${baseFor(plan.domain)}${plan.resource}/${encodeURIComponent(plan.id)}`, params: {} };
+        case 'collection': {
+            const params = { ...plan.filter };
+            if (plan.limit)
+                params['limit'] = plan.limit;
+            return { url: `${baseFor(plan.domain)}${plan.resource}`, params };
+        }
+        case 'external':
+            return { url: plan.endpoint, params: {} };
+        default:
+            return null;
+    }
 }
+
 /**
- * What a compiled rule is FOR — decides whether an initial value is a no-op.
+ * Gallery — data model + the SHARED "what are the image URLs" resolver.
  *
- * In a `Base` rule nothing is being overridden, so `width: auto` or `transform: none` changes
- * nothing and is dropped (see NOOP_INITIAL_VALUES). In an `Override` rule — a breakpoint layer —
- * the initial value is exactly how you UNDO a wider rule (`width: 520px` → `auto` on mobile), so
- * dropping it would silently keep the desktop value.
+ * A Gallery is populated one of two ways (see gallery-component-plan.md):
+ *  - **Manual**: an ordered `GalleryImage[]` trait. Each item is a raw/filebox URL OR a per-item
+ *    binding path resolved against the item/route context.
+ *  - **Bound**: the whole gallery repeats over a data source (a collection, or an array property
+ *    inside one resource via `sourcePath`) — the items come from the shared `resolveRepeaterItems`,
+ *    and one field of each record (`imageField`) is the URL.
+ *
+ * `resolveGalleryUrls` is the SINGLE place both the builder canvas and the SSR/runtime engine turn a
+ * node's config into the final `string[]` the crossfade loop consumes — so both sides show the same
+ * images. It is pure and transport-agnostic; never fork it. It reuses `getByPath` (the same path
+ * reader used by data-source resolving) so binding paths behave identically everywhere.
  */
-var DeclarationContext;
-(function (DeclarationContext) {
-    DeclarationContext["Base"] = "base";
-    DeclarationContext["Override"] = "override";
-})(DeclarationContext || (DeclarationContext = {}));
 /**
- * Compile a flat, camelCase style map into an array of `"prop: value"` CSS
- * declarations (kebab-cased, viewport-units rewritten, empties dropped, no-op initials dropped
- * in a `Base` context only, optional `!important`). Callers wrap these in whatever selector
- * they emit.
+ * Resolve a gallery's configured images to the flat, display-ready `string[]` the loop renders.
+ * Pure. Empty/whitespace URLs are dropped so a half-filled manual list never yields blank frames.
  *
- * @param props          Flat camelCase style map.
- * @param importantProps Keys that must carry `!important` (e.g. `position`, to beat
- *                       Angular's scoped-CSS specificity boost in the builder). A prop forced
- *                       `!important` is never dropped as a no-op — the `!important` exists to win
- *                       the cascade, so its value must always be emitted.
- * @param context        `Override` for a rule that overrides a wider one (a breakpoint layer):
- *                       initial values are kept, because there they reset rather than no-op.
+ * @param images  manual `GalleryImage[]` (manual mode). Ignored when `bound` is provided.
+ * @param bound   bound-mode records + image field. When present, takes precedence over `images`.
+ * @param ctx     render context for per-item bindings (item/route data). Defaults to `{}`.
  */
-function compileDeclarations(props, importantProps, context = DeclarationContext.Base) {
-    const out = [];
-    for (const [k, v] of Object.entries(props)) {
-        if (v === undefined || v === null || v === '')
-            continue;
-        const prop = styleKeyToKebab(k);
-        const val = rewriteViewportUnits(String(v));
-        const isImportant = importantProps?.has(k) ?? false;
-        const dropsNoOps = context === DeclarationContext.Base && !isImportant;
-        if (dropsNoOps && NOOP_INITIAL_VALUES[prop]?.includes(val.trim().toLowerCase()))
-            continue;
-        out.push(`${prop}: ${val}${isImportant ? ' !important' : ''}`);
+function resolveGalleryUrls(images, bound, ctx = {}) {
+    if (bound) {
+        const field = bound.imageField;
+        return (bound.items ?? [])
+            .map(item => (field ? getByPath(item, field) : item))
+            .map(coerceUrl)
+            .filter((u) => !!u);
     }
-    return out;
+    return (images ?? [])
+        .map(normalizeGalleryImage)
+        .map(img => (img?.binding ? getByPath(ctx, img.binding) : img?.url))
+        .map(coerceUrl)
+        .filter((u) => !!u);
 }
 /**
- * Per-type default `width` that the builder applies from each component's config
- * (NOT persisted in styleProps — see render-parity.md "saved node is not
- * self-describing"). The engine has no config classes, so it resolves the same
- * default from THIS map at render time. Keeping the map here (not re-typed in the
- * engine) is the "shared default map" decision.
+ * A plain string is a valid entry — a pasted URL list, an older saved node, or a bound field that
+ * yielded a URL directly. Accepting it HERE (not in one consumer) is what keeps the two render paths
+ * honest: `ClientGalleryComponent` used to normalise privately, so the engine's string-renderer
+ * fallback — which calls this function directly — silently dropped every string-shaped image and
+ * rendered an empty gallery. One resolver, one answer. See gallery-component-plan.md.
+ */
+function normalizeGalleryImage(image) {
+    if (typeof image === 'string')
+        return { url: image };
+    return image ?? undefined;
+}
+/** A resolved value becomes a URL only if it's a non-empty string; everything else drops out. */
+function coerceUrl(value) {
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+}
+/**
+ * Parse a pasted block of URLs (newline- and/or comma-separated) into `GalleryImage[]`. Used by the
+ * MediaList trait editor's "paste URL list" affordance. Pure so it can be unit-tested + reused.
+ */
+function parseUrlList(text) {
+    if (!text)
+        return [];
+    return text
+        .split(/[\n,]+/)
+        .map(s => s.trim())
+        .filter(Boolean)
+        .map(url => ({ url }));
+}
+
+/**
+ * Gallery effect registry — the SHARED, effect-agnostic description of how each gallery slide looks
+ * and animates in a given crossfade state. Modeled on `binding-pipes.ts` / `PAGE_TRANSITION_PRESETS`:
+ * a descriptor map + a resolve fn, all pure, consumed by BOTH the builder twin and the engine twin so
+ * the fade looks identical on the canvas and the live site.
  *
- * ONLY the `100%` container-type defaults live here. Fixed-size config defaults
- * (Card 200px, Image 300px, SliderSlide 33%) are starter placeholders real content
- * almost always overrides — forcing them onto width-less nodes breaks layout.
+ * v1 ships only `fade` (the look ported from `sites/interior-design` fade-gallery). Adding `slide`,
+ * `zoom`, `kenburns`, … later is a new entry here + its CSS — NO component refactor, because the
+ * component only ever asks `resolveGalleryEffect(id).buildSlideStyle(state)` for per-slide inline CSS.
+ *
+ * See iox-ai-guidance/architecture/builder/gallery-component-plan.md.
  */
-const DEFAULT_WIDTH_BY_TYPE = {
-    Container: '100%', Repeater: '100%', SliderContainer: '100%',
-    List: '100%', ListItem: '100%', Text: '100%', Divider: '100%', Spacer: '100%',
-    // Section, Heading, LinkedContainer, Card, Image, SliderSlide, Button, ButtonBlock,
-    // Icon → no forced default (their config defaults are content sizes set explicitly).
+/** The ken-burns zoom baked into the reference fade look (scale 1 → 1.05 over show+fade). */
+const FADE_ZOOM_EXTRA_MS = 1000;
+const fadeEffect = {
+    id: 'fade',
+    label: 'Fade',
+    defaults: { showMs: 4000, fadeMs: 1000 },
+    buildSlideStyle(state) {
+        const { active, fadingOut, firstCycleActive, durations } = state;
+        const zoomMs = durations.showMs + durations.fadeMs + FADE_ZOOM_EXTRA_MS;
+        // Before the first cycle activates, everything is flat + instant so there is no entry flash.
+        if (!firstCycleActive) {
+            return { opacity: '0', transform: 'scale(1)', transition: 'opacity 0ms, transform 0ms' };
+        }
+        const visible = active && !fadingOut;
+        const engaged = active || fadingOut; // current or outgoing slide is zoomed-in
+        return {
+            opacity: visible ? '1' : '0',
+            transform: engaged ? 'scale(1.05)' : 'scale(1)',
+            transition: `opacity ${durations.fadeMs}ms cubic-bezier(0.77, 0, 0.175, 1), ` +
+                `transform ${zoomMs}ms linear`,
+        };
+    },
+};
+/** The registry — one entry per effect. Keyed by id; unknown ids fall back to `fade`. */
+const GALLERY_EFFECTS = {
+    fade: fadeEffect,
 };
+/** Resolve an effect id to its descriptor, defaulting to `fade` (forward-compatible with new ids). */
+function resolveGalleryEffect(id) {
+    return (id && GALLERY_EFFECTS[id]) || GALLERY_EFFECTS['fade'];
+}
+const GALLERY_EFFECT_DESCRIPTORS = Object.values(GALLERY_EFFECTS).map(e => ({ id: e.id, label: e.label }));
+
 /**
- * Extra "render default" declarations the builder gets implicitly from live component
- * behaviour, which the engine must re-apply explicitly for parity. Returns `"prop: value"`
- * declarations to append AFTER the node's own compiled declarations.
+ * Gallery crossfade loop — the SHARED, framework-free state machine that drives which image is
+ * visible over time. Ported from the reference fade-gallery's `scheduleCycle` / `tryStartLoop` /
+ * first-cycle-activation logic, with Angular specifics removed so BOTH the builder twin and the
+ * engine/runtime twin (`iox-gallery`) run ONE implementation — never a forked copy that drifts.
  *
- * @param type          Node type (registry key).
- * @param styleProps    The node's persisted styleProps.
- * @param hasHoverState Whether the node has a non-empty hover / parent-hover state.
+ * The loop owns only *timing + index* state and emits it through `onChange`; the component maps that
+ * state to CSS via the effect registry (`gallery-effects.ts`). Timers are injected so the loop is
+ * deterministic under fake timers in tests and platform-guardable in the engine.
+ *
+ * See iox-ai-guidance/architecture/builder/gallery-component-plan.md.
  */
-function renderDefaultDeclarations(type, styleProps, hasHoverState) {
-    const sp = styleProps ?? {};
-    const out = [];
-    const isOutOfFlow = sp['position'] === 'fixed' || sp['position'] === 'absolute';
-    // Container-type default width so it fills its track. Only when width is unset — once a page
-    // is saved with fully-resolved styleProps (self-describing nodes), width comes through
-    // compileDeclarations and this is a no-op.
-    if (sp['width'] === undefined) {
-        if (isOutOfFlow) {
-            out.push('width: 100%');
+/** Default scheduler over the platform's `setTimeout` / `requestAnimationFrame` (with a timer fallback). */
+const DEFAULT_GALLERY_SCHEDULER = {
+    setTimer: (fn, ms) => setTimeout(fn, ms),
+    clearTimer: h => clearTimeout(h),
+    nextFrame: fn => typeof requestAnimationFrame === 'function' ? requestAnimationFrame(fn) : setTimeout(fn, 16),
+    cancelFrame: h => {
+        if (typeof cancelAnimationFrame === 'function')
+            cancelAnimationFrame(h);
+        else
+            clearTimeout(h);
+    },
+};
+class GalleryLoop {
+    constructor(opts) {
+        this.count = 0;
+        this.currentIndex = 0;
+        this.fadingOutIndex = null;
+        this.firstCycleActive = false;
+        this.cycleTimer = null;
+        this.fadeTimer = null;
+        this.frameHandle = null;
+        /** Bumped on every (re)start so a stale timer callback from a previous run is ignored. */
+        this.runToken = 0;
+        this.running = false;
+        this.scheduler = opts.scheduler ?? DEFAULT_GALLERY_SCHEDULER;
+        this.showMs = opts.showMs;
+        this.fadeMs = opts.fadeMs;
+        this.onChange = opts.onChange;
+    }
+    get state() {
+        return {
+            currentIndex: this.currentIndex,
+            fadingOutIndex: this.fadingOutIndex,
+            firstCycleActive: this.firstCycleActive,
+        };
+    }
+    /** Start (or restart) the loop for `count` images. A count < 2 shows the single image without cycling. */
+    start(count) {
+        this.stop();
+        this.count = Math.max(0, count | 0);
+        this.currentIndex = 0;
+        this.fadingOutIndex = null;
+        this.firstCycleActive = false;
+        if (this.count === 0) {
+            this.emit();
+            return;
         }
-        else if (DEFAULT_WIDTH_BY_TYPE[type]) {
-            out.push(`width: ${DEFAULT_WIDTH_BY_TYPE[type]}`);
+        this.running = true;
+        const token = ++this.runToken;
+        // Activate on the next frame so the first paint is flat (no entry-transition flash), then
+        // begin cycling only when there is more than one image to advance through.
+        this.frameHandle = this.scheduler.nextFrame(() => {
+            if (token !== this.runToken || !this.running)
+                return;
+            this.firstCycleActive = true;
+            this.emit();
+            if (this.count > 1)
+                this.scheduleCycle(token);
+        });
+    }
+    /** Update timing live. Takes effect on the next scheduled cycle; does not restart the loop. */
+    setDurations(showMs, fadeMs) {
+        this.showMs = showMs;
+        this.fadeMs = fadeMs;
+    }
+    /** Stop and clear all timers. Idempotent. State is retained (call `start` to reset). */
+    stop() {
+        this.running = false;
+        this.runToken++;
+        if (this.cycleTimer != null) {
+            this.scheduler.clearTimer(this.cycleTimer);
+            this.cycleTimer = null;
+        }
+        if (this.fadeTimer != null) {
+            this.scheduler.clearTimer(this.fadeTimer);
+            this.fadeTimer = null;
+        }
+        if (this.frameHandle != null) {
+            this.scheduler.cancelFrame(this.frameHandle);
+            this.frameHandle = null;
         }
     }
-    // min-width:0 lets container flex children shrink below content and equal-split. Emit it for
-    // container types INDEPENDENT of where width came from (styleProps vs the default above) —
-    // otherwise a saved page whose width is persisted would lose the equal-split. In the builder the
-    // same rule comes from the `.container-child` wrapper; here it lands on `.iox-node` directly.
-    if (DEFAULT_WIDTH_BY_TYPE[type] && sp['minWidth'] === undefined && !isOutOfFlow) {
-        out.push('min-width: 0');
+    scheduleCycle(token) {
+        if (token !== this.runToken || !this.running || this.count < 2)
+            return;
+        this.cycleTimer = this.scheduler.setTimer(() => {
+            if (token !== this.runToken || !this.running)
+                return;
+            this.fadingOutIndex = this.currentIndex;
+            this.currentIndex = (this.currentIndex + 1) % this.count;
+            this.emit();
+            this.fadeTimer = this.scheduler.setTimer(() => {
+                if (token !== this.runToken || !this.running)
+                    return;
+                this.fadingOutIndex = null;
+                this.emit();
+                this.scheduleCycle(token);
+            }, this.fadeMs);
+        }, this.showMs);
     }
-    // A border only renders when there is a WIDTH. Gate border-style on borderWidth — NOT on
-    // borderColor: a node with only a border colour and no width would otherwise get the
-    // browser's default `medium` width and show a phantom border. Absent borderWidth = no border.
-    if (sp['borderWidth'] && sp['borderStyle'] === undefined) {
-        out.push('border-style: solid');
+    emit() {
+        this.onChange(this.state);
     }
-    // Default transition so own/parent hover animates smoothly (parity with the builder).
-    if (hasHoverState && sp['transition'] === undefined) {
-        out.push('transition: all 0.2s ease');
+}
+
+/**
+ * `iox-gallery` — the engine/runtime twin of the Gallery builder component (the builder twin
+ * `app-builder-gallery` arrives in Phase 2). It runs the SHARED crossfade loop + effect registry from
+ * `@vectoriox/iox-ui`, so the fade behaves identically on the canvas and the live site — no forked
+ * animation logic. See iox-ai-guidance/architecture/builder/gallery-component-plan.md.
+ *
+ * Population: v1 drives the loop from the `images` input (manual mode). Data-source binding
+ * (`source`/`sourcePath`) is Phase 3 — this component already resolves through `resolveGalleryUrls`,
+ * so that only adds a bound-source input, not new render logic.
+ *
+ * SSR / no-JS: on the server the loop never starts, so the **first image renders visible** as a static
+ * frame (SEO + no-JS baseline). In the browser `ngAfterViewInit` starts the loop, which begins on the
+ * same index 0 — so the static frame and the first live frame match and there is no hydration flash.
+ */
+class ClientGalleryComponent {
+    /** Manual images — `GalleryImage[]` or a plain `string[]` of URLs (normalised on set). */
+    set images(v) {
+        this._images = v ?? [];
+        this.urls = resolveGalleryUrls(this._images, null);
+        // A live edit (image added/removed/reordered) while the loop runs → restart on the new set so
+        // the canvas reflects it and the loop cycles through the new count.
+        if (this.loopActive)
+            this.startLoop();
+    }
+    get images() { return this._images; }
+    set showDuration(v) { this._showDuration = v; this.loop?.setDurations(v, this._fadeDuration); }
+    get showDuration() { return this._showDuration; }
+    set fadeDuration(v) { this._fadeDuration = v; this.loop?.setDurations(this._showDuration, v); }
+    get fadeDuration() { return this._fadeDuration; }
+    constructor(platformId, cdr) {
+        this.cdr = cdr;
+        this.nodeId = '';
+        this.effect = 'fade';
+        this.autoStart = true;
+        /** Layout mode — only `'stack'` is rendered in v1 (`'grid'` scaffolded for later). */
+        this.layout = 'stack';
+        // ── Inputs that mutate live state use SETTERS, not ngOnChanges ──────────────────────────────
+        // The builder trait panel pushes edits via DIRECT property assignment (`instance.images = v`),
+        // which does NOT trigger ngOnChanges — so a gallery that recomputed in ngOnChanges never refreshed
+        // when you added an image on the canvas. A setter fires on BOTH direct assignment (builder panel)
+        // and setInput (SSR engine / render.directive), so it's the one path that works everywhere.
+        this._images = [];
+        this._showDuration = 4000;
+        this._fadeDuration = 1000;
+        /** The flat, display-ready URLs the loop cycles. Recomputed whenever `images` is set. */
+        this.urls = [];
+        this.currentIndex = 0;
+        this.fadingOutIndex = null;
+        this.started = false;
+        /** True once the loop has been started (in ngAfterViewInit) — gates the setter-driven restart. */
+        this.loopActive = false;
+        this.loop = null;
+        this.isBrowser = isPlatformBrowser(platformId);
     }
-    // Image defaults reapplied when unset (the config defaults aren't always persisted). height:auto
-    // is only a DEFAULT — when the user sets an explicit height (e.g. 100%) it must WIN, so guard it
-    // on `sp['height'] === undefined` (matching the builder, which respects a configured height). An
-    // unset height + aspect-ratio lets the ratio drive the box.
-    if (type === 'Image') {
-        if (sp['aspectRatio'] === undefined)
-            out.push('aspect-ratio: 1/1');
-        // object-fit is a Size style trait with config default 'cover'; that default isn't persisted,
-        // so reapply it here (matching the builder) when the node has none.
-        if (sp['objectFit'] === undefined)
-            out.push('object-fit: cover');
-        // NOTE: no `height: auto` — when height is unset, `auto` is already the CSS initial value, so
-        // emitting it is a pure no-op. A configured height comes through compileDeclarations and wins.
+    ngAfterViewInit() {
+        if (this.isBrowser && this.autoStart) {
+            this.startLoop();
+        }
     }
-    // Containers default to a positioning context (for absolutely-positioned children). These live
-    // in `.iox-node` (not the component `:host`) so an explicit styleProps value always wins.
-    if ((type === 'Container' || type === 'Section' || type === 'LinkedContainer') && sp['position'] === undefined) {
-        out.push('position: relative');
+    ngOnDestroy() {
+        this.loop?.stop();
+        this.loop = null;
+        this.loopActive = false;
     }
-    // LinkedContainer is an <a> (inline by default) → default it to block so children lay out.
-    if (type === 'LinkedContainer' && sp['display'] === undefined) {
-        out.push('display: block');
+    /** Per-slide inline style. Before the loop activates (server + no-JS + pre-first-frame) the first
+     *  image is the visible static frame; once running, the effect owns each slide's look. */
+    slideStyle(i) {
+        if (!this.started) {
+            return i === 0
+                ? { opacity: '1', transform: 'scale(1)', transition: 'none' }
+                : { opacity: '0', transform: 'scale(1)', transition: 'none' };
+        }
+        return resolveGalleryEffect(this.effect).buildSlideStyle({
+            active: i === this.currentIndex,
+            fadingOut: i === this.fadingOutIndex,
+            firstCycleActive: true,
+            durations: { showMs: this.showDuration, fadeMs: this.fadeDuration },
+        });
     }
-    // An Icon is a single FONT GLYPH, not a paragraph: it must contribute no line-box height of its
-    // own (spacing belongs to padding/margin). But every node serialises the Typography group's
-    // `lineHeight` default of 1.5, so icons carry `line-height: 1.5` — a 24px glyph then gets a 36px
-    // line box and pushes the surrounding layout around.
-    //
-    // This is emitted UNCONDITIONALLY (not guarded on `undefined`) and callers append render-defaults
-    // AFTER the node's own compiled declarations in the SAME rule, so it overrides a stale serialised
-    // value for EXISTING icons too — no re-save needed. line-height is inherited, so simply omitting
-    // it is not enough: the icon would inherit 1.5 from its container instead.
-    if (type === 'Icon')
-        out.push('line-height: 0');
-    // An icon's `<i>` must shrink-wrap its glyph so it grows with font-size and doesn't overflow its
-    // parent. Phosphor forces `display:inline-flex` on its own class; generated (fantasticon) fonts
-    // don't, so the engine's plain `<i class="bi-x iox-node-…">` would fall back to inline and the
-    // glyph would overflow. Emit it here (guarded so a user-set display still wins) — mirrors the
-    // builder Icon component's `:host{display:inline-flex}`.
-    if (type === 'Icon' && sp['display'] === undefined) {
-        out.push('display: inline-flex', 'align-items: center', 'justify-content: center');
+    startLoop() {
+        if (!this.isBrowser)
+            return;
+        this.loopActive = true;
+        this.loop?.stop();
+        this.loop = new GalleryLoop({
+            showMs: this.showDuration,
+            fadeMs: this.fadeDuration,
+            onChange: state => {
+                this.currentIndex = state.currentIndex;
+                this.fadingOutIndex = state.fadingOutIndex;
+                this.started = state.firstCycleActive;
+                this.cdr.markForCheck();
+            },
+        });
+        this.loop.start(this.urls.length);
     }
-    return out;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientGalleryComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ClientGalleryComponent, isStandalone: false, selector: "iox-gallery", inputs: { nodeId: "nodeId", effect: "effect", autoStart: "autoStart", layout: "layout", images: "images", showDuration: "showDuration", fadeDuration: "fadeDuration" }, ngImport: i0, template: `
+        <div class="iox-gallery" [class]="'iox-node-' + nodeId">
+            <div *ngFor="let url of urls; index as i"
+                 class="iox-gallery__img"
+                 [style.background-image]="'url(' + url + ')'"
+                 [ngStyle]="slideStyle(i)"></div>
+            <div class="iox-gallery__overlay"></div>
+        </div>
+    `, isInline: true, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'iox-gallery', template: `
+        <div class="iox-gallery" [class]="'iox-node-' + nodeId">
+            <div *ngFor="let url of urls; index as i"
+                 class="iox-gallery__img"
+                 [style.background-image]="'url(' + url + ')'"
+                 [ngStyle]="slideStyle(i)"></div>
+            <div class="iox-gallery__overlay"></div>
+        </div>
+    `, standalone: false, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { nodeId: [{
+                type: Input
+            }], effect: [{
+                type: Input
+            }], autoStart: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], images: [{
+                type: Input
+            }], showDuration: [{
+                type: Input
+            }], fadeDuration: [{
+                type: Input
+            }] } });
 
-// Virtual trait → composed CSS property helpers.
-//
-// Several style traits are "virtual" — they don't map 1:1 to a CSS property but
-// are components of a multi-function CSS value.  composeVirtualTraits() strips
-// these virtual keys from the style map and replaces them with the correctly
-// composed CSS properties (filter, backdrop-filter, transform, transition).
-//
-// SHARED (iox-ui): consumed by BOTH the builder (render.directive + style panel)
-// and the SSR engine (LayoutRendererService). It MUST live here, not in iox-builder,
-// because the engine does not depend on iox-builder — without it the engine emitted
-// the raw virtual keys (`translate-x`, `filter-blur`, `scale-x`…) as invalid CSS.
-// Run this BEFORE compileDeclarations so the CSS output is identical on both sides.
-// ─── Filter ──────────────────────────────────────────────────────────────────
-const FILTER_FUNS = [
-    ['filterBlur', 'blur', '0px'],
-    ['filterBrightness', 'brightness', '1'],
-    ['filterContrast', 'contrast', '1'],
-    ['filterGrayscale', 'grayscale', '0'],
-    ['filterSaturate', 'saturate', '1'],
-    ['filterHueRotate', 'hue-rotate', '0deg'],
-    ['filterSepia', 'sepia', '0'],
-    ['filterInvert', 'invert', '0'],
-];
-// ─── Backdrop-filter ─────────────────────────────────────────────────────────
-const BACKDROP_FUNS = [
-    ['backdropBlur', 'blur', '0px'],
-    ['backdropBrightness', 'brightness', '1'],
-    ['backdropContrast', 'contrast', '1'],
-    ['backdropSaturate', 'saturate', '1'],
-];
-// ─── Transform ───────────────────────────────────────────────────────────────
-const TRANSFORM_FUNS = [
-    ['translateX', 'translateX', '0px'],
-    ['translateY', 'translateY', '0px'],
-    ['scaleX', 'scaleX', '1'],
-    ['scaleY', 'scaleY', '1'],
-    ['rotate', 'rotate', '0deg'],
-    ['skewX', 'skewX', '0deg'],
-    ['skewY', 'skewY', '0deg'],
-];
-// ─── ::marker pseudo-element ─────────────────────────────────────────────────
-const MARKER_FUNS = [
-    ['markerColor', 'color'],
-    ['markerFontSize', 'fontSize'],
+const COMPONENTS = [
+    BuilderImageComponent,
+    BuilderSpacerComponent,
+    CardComponent,
+    BuilderDividerComponent,
+    BuilderIconComponent,
+    BuilderLinkComponent,
+    BuilderButtonComponent,
+    BuilderHeadingComponent,
+    TextBlockComponent,
+    SectionComponent,
+    ContainerComponent,
+    LinkedContainerComponent,
+    ClientRepeaterComponent,
+    ButtonBlockComponent,
+    ClientSliderContainerComponent,
+    ClientSliderSlideComponent,
+    ClientListComponent,
+    ClientListItemComponent,
+    ClientGalleryComponent,
 ];
-const TRANSITION_KEYS = ['transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
-const VIRTUAL_TRAIT_GROUPS = Object.freeze([
-    { output: 'filter', keys: FILTER_FUNS.map(([t]) => t), reset: 'none' },
-    { output: 'backdropFilter', keys: BACKDROP_FUNS.map(([t]) => t), reset: 'none' },
-    { output: 'transform', keys: TRANSFORM_FUNS.map(([t]) => t), reset: 'none' },
-    { output: 'transition', keys: [...TRANSITION_KEYS], reset: 'none' },
-    { output: '__markerStyles', keys: MARKER_FUNS.map(([t]) => t), reset: null },
-]);
-// ─── All virtual trait names ──────────────────────────────────────────────────
-/** Every virtual trait key — derived from the groups so there is one list to maintain. */
-const VIRTUAL_TRAIT_KEYS = new Set(VIRTUAL_TRAIT_GROUPS.flatMap(g => g.keys));
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-function buildFns(funs, src) {
-    return funs
-        .filter(([t, , d]) => src[t] != null && src[t] !== '' && src[t] !== d)
-        .map(([t, fn]) => `${fn}(${src[t]})`)
-        .join(' ');
+class IoxBuilderComponentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, declarations: [BuilderImageComponent,
+            BuilderSpacerComponent,
+            CardComponent,
+            BuilderDividerComponent,
+            BuilderIconComponent,
+            BuilderLinkComponent,
+            BuilderButtonComponent,
+            BuilderHeadingComponent,
+            TextBlockComponent,
+            SectionComponent,
+            ContainerComponent,
+            LinkedContainerComponent,
+            ClientRepeaterComponent,
+            ButtonBlockComponent,
+            ClientSliderContainerComponent,
+            ClientSliderSlideComponent,
+            ClientListComponent,
+            ClientListItemComponent,
+            ClientGalleryComponent], imports: [CommonModule], exports: [BuilderImageComponent,
+            BuilderSpacerComponent,
+            CardComponent,
+            BuilderDividerComponent,
+            BuilderIconComponent,
+            BuilderLinkComponent,
+            BuilderButtonComponent,
+            BuilderHeadingComponent,
+            TextBlockComponent,
+            SectionComponent,
+            ContainerComponent,
+            LinkedContainerComponent,
+            ClientRepeaterComponent,
+            ButtonBlockComponent,
+            ClientSliderContainerComponent,
+            ClientSliderSlideComponent,
+            ClientListComponent,
+            ClientListItemComponent,
+            ClientGalleryComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
 }
-// ─── Public API ───────────────────────────────────────────────────────────────
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: COMPONENTS,
+                    imports: [CommonModule],
+                    exports: COMPONENTS,
+                }]
+        }] });
+
 /**
- * Strip virtual trait keys from `raw` and emit their composed CSS equivalents.
+ * Single source of truth for the IOX component type → Angular class mapping.
+ * Used by the client engine (iox-client-engine) to resolve component classes
+ * from IoxLayoutNode.type strings at render time.
  *
- * When composing a partial state-override map (hover, active…), pass the full
- * base style map as `base` so non-overridden components (e.g. filterBrightness
- * when only filterBlur is overridden) are preserved in the composed output.
- * When operating on a complete style map, omit `base` — it defaults to `raw`.
+ * All 13 builder components are registered here:
+ * - Leaf (Phase 2a): Image, Spacer, Card, Divider, Icon
+ * - Inline-editable (Phase 2b): Link, Button, Heading, Text
+ * - Layout shells (Phase 2c): Section, Container, LinkedContainer
+ * - Repeater (Phase 2d): ClientRepeaterComponent
+ *
+ * Section/Container/LinkedContainer/Repeater expose childrenHost: ViewContainerRef
+ * for ClientRenderDirective to insert child components into.
  */
-function composeVirtualTraits(raw, base = raw) {
-    // Copy all non-virtual properties as-is
-    const result = {};
-    for (const [k, v] of Object.entries(raw)) {
-        if (!VIRTUAL_TRAIT_KEYS.has(k))
-            result[k] = v;
-    }
-    // Merge base values for any virtual key absent from the partial override map
-    const merged = (funs) => {
-        const m = {};
-        for (const [t] of funs)
-            m[t] = raw[t] ?? base[t];
-        return m;
-    };
-    // filter
-    const filterStr = buildFns(FILTER_FUNS, merged(FILTER_FUNS));
-    if (filterStr)
-        result['filter'] = filterStr;
-    // backdrop-filter
-    const backdropStr = buildFns(BACKDROP_FUNS, merged(BACKDROP_FUNS));
-    if (backdropStr)
-        result['backdropFilter'] = backdropStr;
-    // transform
-    const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
-    if (transformStr)
-        result['transform'] = transformStr;
-    // transition — only emit when duration is non-zero
-    const dur = raw['transitionDuration'] ?? base['transitionDuration'];
-    const ease = raw['transitionTimingFunction'] ?? base['transitionTimingFunction'];
-    const del = raw['transitionDelay'] ?? base['transitionDelay'];
-    if (dur && ease && dur !== '0ms' && dur !== '0s') {
-        const delPart = del && del !== '0ms' && del !== '0s' ? ` ${del}` : '';
-        result['transition'] = `all ${dur} ${ease}${delPart}`;
+class IoxComponentRegistryService {
+    constructor() {
+        this.map = new Map([
+            ['Image', BuilderImageComponent],
+            ['Spacer', BuilderSpacerComponent],
+            ['Card', CardComponent],
+            ['Divider', BuilderDividerComponent],
+            ['Icon', BuilderIconComponent],
+            ['Link', BuilderLinkComponent],
+            ['Button', BuilderButtonComponent],
+            ['Heading', BuilderHeadingComponent],
+            ['Text', TextBlockComponent],
+            ['Section', SectionComponent],
+            ['Container', ContainerComponent],
+            ['LinkedContainer', LinkedContainerComponent],
+            ['Repeater', ClientRepeaterComponent],
+            ['ButtonBlock', ButtonBlockComponent],
+            ['SliderContainer', ClientSliderContainerComponent],
+            ['SliderSlide', ClientSliderSlideComponent],
+            ['List', ClientListComponent],
+            ['ListItem', ClientListItemComponent],
+            ['Gallery', ClientGalleryComponent],
+        ]);
     }
-    // ::marker pseudo-element — collected into __markerStyles so StyleRegistryService
-    // can emit a separate `.iox-node-{id}::marker { … }` rule.
-    const markerStyles = {};
-    for (const [trait, cssProp] of MARKER_FUNS) {
-        const val = raw[trait] ?? base[trait];
-        if (val != null && val !== '')
-            markerStyles[cssProp] = val;
+    getComponent(type) {
+        return this.map.get(type);
     }
-    if (Object.keys(markerStyles).length) {
-        result['__markerStyles'] = markerStyles;
+    hasComponent(type) {
+        return this.map.has(type);
     }
-    return result;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxComponentRegistryService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxComponentRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
- * tree-relations — framework-agnostic helpers for reasoning about a rendered node
- * tree's structural relationships. Lives in @vectoriox/iox-ui because BOTH renderers
- * depend on iox-ui (the engine does NOT depend on iox-builder), so the same logic
- * drives the builder canvas AND the SSR site — no fork.
- * See iox-ai-guidance `architecture/builder/targeted-hover-state-plan.md`.
- */
-/** The css id a node contributes to selectors: its clone `styleId`, else its own `id`. */
-function nodeCssId(node) {
-    return node.styleId ?? node.id;
-}
-/**
- * Path of css ids from the root down to (and including) the node whose css id === `cssId`.
- * Returns `null` when no node matches. First match wins (depth-first, pre-order).
- */
-function pathToCssId(nodes, cssId) {
-    for (const node of nodes) {
-        const ownId = nodeCssId(node);
-        if (ownId === cssId)
-            return [ownId];
-        if (node.children?.length) {
-            const childPath = pathToCssId(node.children, cssId);
-            if (childPath)
-                return ownId ? [ownId, ...childPath] : childPath;
-        }
-    }
-    return null;
-}
-/**
- * The css id of the NEAREST COMMON ANCESTOR of two nodes (identified by their css ids),
- * used to scope a `:has()` targeted-state selector so it stays repetition-safe.
- *
- * The result may equal `styledCssId` (the trigger sits INSIDE the styled node) or
- * `triggerCssId` (the styled node sits inside the trigger) — both are valid scopes;
- * `buildTargetedStateSelector` picks the right selector shape for each. Returns
- * `undefined` only when a valid scope can't exist: an id is blank, the two ids are the
- * same node, or they share no ancestor in `root`. Callers MUST skip emitting the rule
- * when this is `undefined` — never emit an unscoped (page-global) `:has()`, which would
- * break under repetition.
- */
-function nearestCommonAncestorId(root, styledCssId, triggerCssId) {
-    if (!styledCssId || !triggerCssId || styledCssId === triggerCssId)
-        return undefined;
-    const styledPath = pathToCssId(root, styledCssId);
-    const triggerPath = pathToCssId(root, triggerCssId);
-    if (!styledPath || !triggerPath)
-        return undefined;
-    // Walk both paths together; the last shared prefix element is the common ancestor.
-    let common;
-    const shorter = Math.min(styledPath.length, triggerPath.length);
-    for (let i = 0; i < shorter; i++) {
-        if (styledPath[i] !== triggerPath[i])
-            break;
-        common = styledPath[i];
-    }
-    return common;
-}
-/**
- * Build the selector BODY (no leading `.`, matching the builder's `compile()` convention)
- * for a targeted state, given the resolved scope. Three topologies, one shared rule:
+ * style-compiler — the SINGLE source of truth for turning a node's style map into
+ * CSS declarations. Framework-agnostic (no Angular): consumed by both renderers.
  *
- *   - trigger INSIDE styled  (scope === styled):  `iox-node-{styled}:has(.iox-node-{trigger}:{base})`
- *   - styled INSIDE trigger  (scope === trigger): `iox-node-{trigger}:{base} .iox-node-{styled}`
- *   - separate subtrees      (scope is above both): `iox-node-{scope}:has(.iox-node-{trigger}:{base}) .iox-node-{styled}`
+ *   - Builder canvas: `StyleRegistryService` (@vectoriox/iox-builder) → live `<style>` tag.
+ *   - SSR site:       `LayoutRendererService` (iox-client-engine)     → HTML string CSS.
  *
- * `scopeCssId` MUST be a value returned by `nearestCommonAncestorId` for the same pair.
+ * Lives in @vectoriox/iox-ui because BOTH consumers depend on iox-ui (the engine does
+ * NOT depend on iox-builder). Keeping it here — not duplicated per renderer — is what
+ * prevents the builder and the live site from drifting.
+ * See iox-ai-guidance `architecture/builder/render-parity.md`.
  */
-function buildTargetedStateSelector(scopeCssId, triggerCssId, styledCssId, base) {
-    if (scopeCssId === styledCssId) {
-        return `iox-node-${styledCssId}:has(.iox-node-${triggerCssId}:${base})`;
-    }
-    if (scopeCssId === triggerCssId) {
-        return `iox-node-${triggerCssId}:${base} .iox-node-${styledCssId}`;
-    }
-    return `iox-node-${scopeCssId}:has(.iox-node-${triggerCssId}:${base}) .iox-node-${styledCssId}`;
-}
-
-// Responsive (per-breakpoint) styles — the shared model, cascade and emission plan.
-//
-// SHARED (iox-ui): the builder canvas AND the SSR engine both call this. The builder
-// FLATTENS the active breakpoint (its canvas is a transformed frame inside a desktop
-// browser, so a real `@media` query would read the editor's width); the engine WRAPS
-// each planned layer in `@media`. Same decisions, different transport — never fork them.
-//
-// Storage is a sparse layer beside the existing keys, shaped like `stateStyles`:
-//
-//   styleProps   — base, full resolved set          (unchanged)
-//   stateStyles  — sparse per-state overrides        (unchanged)
-//   responsive   — sparse per-breakpoint overrides   (this file)
-//     { mobile: { styleProps: {…}, stateStyles: { hover: {…} } } }
-//
-// A node with no `responsive` key renders exactly as before — no migration.
-// See iox-ai-guidance `architecture/builder/responsive-breakpoints-plan.md`.
-// ─── Breakpoints ─────────────────────────────────────────────────────────────
-/** The five fixed breakpoints (plan decision D2). Desktop-first: each narrower one
- *  overrides the wider ones through `max-width`. */
-var Breakpoint;
-(function (Breakpoint) {
-    Breakpoint["Base"] = "base";
-    Breakpoint["Laptop"] = "laptop";
-    Breakpoint["Tablet"] = "tablet";
-    Breakpoint["Mobile"] = "mobile";
-    Breakpoint["Small"] = "small";
-})(Breakpoint || (Breakpoint = {}));
 /**
- * Widest → narrowest. This order IS the cascade order and the `@media` emission order.
+ * Rewrite viewport-relative units so they resolve to the simulated canvas dimensions
+ * in the builder, and to the real viewport in production.
  *
- * ⚠️ Phones in portrait (360–430px) land in `Small`, NOT `Mobile` — `Mobile` is 480–767,
- * a phone held landscape. The labels say so (as Webflow's do). The ids stay short because
- * they are storage keys; the cascade still makes a `Mobile` override reach every phone.
- */
-const BREAKPOINTS = Object.freeze([
-    { id: Breakpoint.Base, label: 'Base', maxWidth: null, previewWidth: 1440 },
-    { id: Breakpoint.Laptop, label: 'Laptop', maxWidth: 1200, previewWidth: 1200 },
-    { id: Breakpoint.Tablet, label: 'Tablet', maxWidth: 991, previewWidth: 768 },
-    { id: Breakpoint.Mobile, label: 'Mobile landscape', maxWidth: 767, previewWidth: 568 },
-    { id: Breakpoint.Small, label: 'Mobile portrait', maxWidth: 479, previewWidth: 390 },
-]);
-const BREAKPOINT_INDEX = new Map(BREAKPOINTS.map((d, i) => [d.id, i]));
-/** The definition for `bp`, or `undefined` for an unknown id (e.g. hand-edited JSON). */
-function breakpointDef(bp) {
-    const i = BREAKPOINT_INDEX.get(bp);
-    return i === undefined ? undefined : BREAKPOINTS[i];
-}
-/** Base → `bp`, inclusive — the layers whose values apply at `bp`. Unknown → `[Base]`. */
-function cascadeChain(bp) {
-    const i = BREAKPOINT_INDEX.get(bp);
-    return BREAKPOINTS.slice(0, (i ?? 0) + 1).map(d => d.id);
-}
-/**
- * The breakpoint a viewport (or canvas) of `width` CSS px falls in — the narrowest one whose
- * `maxWidth` it fits under, else Base. Mirrors how the `max-width` media queries resolve, so the
- * builder's editing scope is always the breakpoint the canvas is actually showing.
+ * `--preview-vh` / `--preview-vw` are set by BuilderComponent (ResizeObserver +
+ * viewport-state subscription). In production those variables are undefined, so the
+ * `1vh` / `1vw` fallbacks restore native browser behaviour.
  */
-function breakpointForWidth(width) {
-    for (let i = BREAKPOINTS.length - 1; i > 0; i--) {
-        const max = BREAKPOINTS[i].maxWidth;
-        if (max !== null && width <= max)
-            return BREAKPOINTS[i].id;
-    }
-    return Breakpoint.Base;
+function rewriteViewportUnits(value) {
+    return value
+        .replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))')
+        .replace(/(-?\d*\.?\d+)vw/g, 'calc($1 * var(--preview-vw, 1vw))');
 }
-/** The next-wider breakpoint (what `bp` inherits from), or `null` for Base / unknown. */
-function parentBreakpoint(bp) {
-    const i = BREAKPOINT_INDEX.get(bp);
-    return i ? BREAKPOINTS[i - 1].id : null;
+/** camelCase style key → kebab-case CSS property. */
+function styleKeyToKebab(key) {
+    return key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
 }
 /**
- * What a breakpoint's width is measured against.
+ * kebab CSS property → the value that equals its CSS initial AND has no UA-stylesheet override for
+ * any element the builder renders (div/section/span/i/a/img/h1–h6/p/ul). Emitting these is a pure
+ * no-op, so they're dropped to keep the compiled CSS lean (self-describing nodes serialise every
+ * trait, many at their default).
  *
- * `Media` — the browser viewport. The SSR engine: a visitor's window IS the page.
- * `Container` — a named CSS size container. The builder: its canvas is a fixed-width frame inside a
- * desktop browser (and `transform: scale`d for zoom), so a media query would read the EDITOR's width.
- * A container query reads the frame's own layout width — which equals the simulated viewport and
- * ignores the zoom transform — so the builder emits the same structure as the engine.
+ * Deliberately EXCLUDED, because a value equal to the initial can still be meaningful there:
+ *   - inherited properties (line-height, color, font-family/size/weight, text-align, letter-spacing…)
+ *     — the value may override an inherited ancestor value.
+ *   - margin / padding — UA stylesheets set them on h1–h6, p, ul, so `0` depends on a reset.
+ *   - border-* — the initial `medium` width + interaction with border-style makes it non-trivial.
  */
-var BreakpointQueryKind;
-(function (BreakpointQueryKind) {
-    BreakpointQueryKind["Media"] = "media";
-    BreakpointQueryKind["Container"] = "container";
-})(BreakpointQueryKind || (BreakpointQueryKind = {}));
+const NOOP_INITIAL_VALUES = {
+    'width': ['auto'], 'height': ['auto'],
+    'min-width': ['auto'], 'min-height': ['auto'],
+    'max-width': ['none', 'auto'], 'max-height': ['none', 'auto'], // `auto` is invalid for max-* → inert
+    'position': ['static'],
+    'top': ['auto'], 'right': ['auto'], 'bottom': ['auto'], 'left': ['auto'],
+    'opacity': ['1'], 'z-index': ['auto'],
+    'flex-grow': ['0'], 'flex-shrink': ['1'], 'flex-basis': ['auto'],
+    'flex-direction': ['row'], 'flex-wrap': ['nowrap'],
+    'gap': ['0', '0px', 'normal'],
+    'border-radius': ['0', '0px'],
+    'aspect-ratio': ['auto'],
+    'mix-blend-mode': ['normal'],
+    'transform': ['none'], 'box-shadow': ['none'],
+    // overflow initial is `visible`. A self-describing node serialises the Overflow trait's default,
+    // so WITHOUT this the emitted `overflow: visible` would override component baselines that clip
+    // (e.g. `.iox-card__img-wrap`, `.iox-slider`, `.iox-gallery` all set `overflow: hidden`), breaking
+    // object-fit/aspect-ratio image clipping everywhere. A user-set hidden/scroll/auto/clip is not the
+    // initial, so it still emits and wins.
+    'overflow': ['visible'], 'overflow-x': ['visible'], 'overflow-y': ['visible'],
+    'clip-path': ['none'],
+};
 /**
- * The at-rule prelude for `bp` — `@media (max-width: 767px)`, or with `Container`
- * `@container iox-canvas (max-width: 767px)`. `null` for Base or an unknown id.
- * `containerName` is required for `Container` (an unnamed container query would match
- * whichever ancestor container is nearest, which is not guaranteed to be the canvas).
+ * Style props a type's render-default fully REPLACES. Emitting them would produce a dead
+ * declaration that is immediately overridden in the same rule (e.g. an Icon's serialised
+ * `lineHeight: 1.5` followed by the forced `line-height: 1`), so callers strip them first via
+ * {@link stripSuppressedProps} and let renderDefaultDeclarations supply the real value.
  */
-function breakpointQueryFor(bp, kind = BreakpointQueryKind.Media, containerName) {
-    const max = breakpointDef(bp)?.maxWidth;
-    if (max == null)
-        return null;
-    if (kind === BreakpointQueryKind.Media)
-        return `@media (max-width: ${max}px)`;
-    if (!containerName)
-        throw new Error('A container breakpoint query needs a container name');
-    return `@container ${containerName} (max-width: ${max}px)`;
-}
-/** Wrap already-compiled rules for `bp`. Base (and blank css) passes through unwrapped. */
-function wrapInBreakpointQuery(bp, css, kind = BreakpointQueryKind.Media, containerName) {
-    if (!css.trim())
-        return '';
-    const query = breakpointQueryFor(bp, kind, containerName);
-    return query ? `${query} {\n${css}\n}` : css;
-}
-/** `@media (max-width: 767px)` for `bp`; `null` for Base or an unknown id. */
-function mediaQueryFor(bp) {
-    return breakpointQueryFor(bp, BreakpointQueryKind.Media);
-}
-/** Wrap already-compiled rules for `bp` in its media query. Base (and blank css) passes through. */
-function wrapInMediaQuery(bp, css) {
-    return wrapInBreakpointQuery(bp, css, BreakpointQueryKind.Media);
-}
-function layerAt(responsive, bp) {
-    return bp === Breakpoint.Base ? undefined : responsive?.[bp];
-}
-/** Copy defined entries of `src` onto `target`. `undefined` never overwrites a value. */
-function assignDefined(target, src) {
-    if (src)
-        for (const [k, v] of Object.entries(src))
-            if (v !== undefined)
-                target[k] = v;
-    return target;
-}
-function hasKeys(map) {
-    return !!map && Object.keys(map).length > 0;
-}
-// ─── Cascade resolution ──────────────────────────────────────────────────────
-/** The full effective style map at `bp`: base, then each layer down the cascade. */
-function resolveStyleProps(styleProps, responsive, bp) {
-    const out = assignDefined({}, styleProps ?? undefined);
-    for (const id of cascadeChain(bp))
-        assignDefined(out, layerAt(responsive, id)?.styleProps);
-    return out;
-}
-/** The effective per-state maps at `bp`. States with no values anywhere are omitted. */
-function resolveStateStyles(stateStyles, responsive, bp) {
-    const out = {};
-    const merge = (src) => {
-        for (const [state, map] of Object.entries(src ?? {})) {
-            out[state] = assignDefined(out[state] ?? {}, map);
-        }
-    };
-    merge(stateStyles ?? undefined);
-    for (const id of cascadeChain(bp))
-        merge(layerAt(responsive, id)?.stateStyles);
-    for (const state of Object.keys(out))
-        if (!hasKeys(out[state]))
-            delete out[state];
+const SUPPRESSED_STYLE_PROPS_BY_TYPE = {
+    // An icon's line box is structurally forced to 1 — see the Icon branch of renderDefaultDeclarations.
+    Icon: ['lineHeight'],
+};
+/** Remove the style props whose value a type's render-default always overrides. Returns the map
+ *  unchanged (same reference) when the type suppresses nothing. */
+function stripSuppressedProps(type, styleProps) {
+    const suppressed = SUPPRESSED_STYLE_PROPS_BY_TYPE[type];
+    if (!suppressed?.length)
+        return styleProps;
+    const out = { ...styleProps };
+    for (const key of suppressed)
+        delete out[key];
     return out;
 }
 /**
- * Every state that has a value anywhere — at base or at any breakpoint — in a stable order
- * (base states first, then any that exist only at a breakpoint). A renderer iterates this, not
- * `Object.keys(stateStyles)`, so a state defined ONLY at a breakpoint (a Mobile-only hover) still
- * gets its selector scope resolved.
+ * What a compiled rule is FOR — decides whether an initial value is a no-op.
+ *
+ * In a `Base` rule nothing is being overridden, so `width: auto` or `transform: none` changes
+ * nothing and is dropped (see NOOP_INITIAL_VALUES). In an `Override` rule — a breakpoint layer —
+ * the initial value is exactly how you UNDO a wider rule (`width: 520px` → `auto` on mobile), so
+ * dropping it would silently keep the desktop value.
  */
-function stateNamesIn(stateStyles, responsive) {
-    const names = new Set();
-    const add = (src) => {
-        for (const [state, map] of Object.entries(src ?? {})) {
-            if (Object.values(map ?? {}).some(v => v !== undefined))
-                names.add(state);
-        }
-    };
-    add(stateStyles);
-    for (const { id } of BREAKPOINTS)
-        add(layerAt(responsive, id)?.stateStyles);
-    return [...names];
-}
+var DeclarationContext;
+(function (DeclarationContext) {
+    DeclarationContext["Base"] = "base";
+    DeclarationContext["Override"] = "override";
+})(DeclarationContext || (DeclarationContext = {}));
 /**
- * Every level from Base down to `bp` that sets `prop` (optionally within `state`), in
- * cascade order. The LAST entry is the effective value; an empty array means unset.
- * Drives the style panel's source chain ("Base 34 → Tablet 28 → Mobile 22").
+ * Compile a flat, camelCase style map into an array of `"prop: value"` CSS
+ * declarations (kebab-cased, viewport-units rewritten, empties dropped, no-op initials dropped
+ * in a `Base` context only, optional `!important`). Callers wrap these in whatever selector
+ * they emit.
+ *
+ * @param props          Flat camelCase style map.
+ * @param importantProps Keys that must carry `!important` (e.g. `position`, to beat
+ *                       Angular's scoped-CSS specificity boost in the builder). A prop forced
+ *                       `!important` is never dropped as a no-op — the `!important` exists to win
+ *                       the cascade, so its value must always be emitted.
+ * @param context        `Override` for a rule that overrides a wider one (a breakpoint layer):
+ *                       initial values are kept, because there they reset rather than no-op.
  */
-function resolveValueChain(prop, styleProps, stateStyles, responsive, bp, state) {
-    const read = (props, states) => (state ? states?.[state] : props)?.[prop];
-    const chain = [];
-    for (const id of cascadeChain(bp)) {
-        const layer = layerAt(responsive, id);
-        const value = id === Breakpoint.Base
-            ? read(styleProps ?? undefined, stateStyles ?? undefined)
-            : read(layer?.styleProps, layer?.stateStyles);
-        if (value !== undefined)
-            chain.push({ breakpoint: id, value });
-    }
-    return chain;
-}
-/** True when `bp` itself sets `prop` (the style panel's orange edge). Never true for Base. */
-function isOverriddenAt(responsive, bp, prop, state) {
-    const layer = layerAt(responsive, bp);
-    const map = state ? layer?.stateStyles?.[state] : layer?.styleProps;
-    return map?.[prop] !== undefined;
-}
-/** Number of overridden values — at `bp`, or across every breakpoint when omitted. */
-function countOverrides(responsive, bp) {
-    const count = (map) => Object.values(map ?? {}).filter(v => v !== undefined).length;
-    const ids = bp ? [bp] : BREAKPOINTS.map(d => d.id);
-    let n = 0;
-    for (const id of ids) {
-        const layer = layerAt(responsive, id);
-        n += count(layer?.styleProps);
-        for (const map of Object.values(layer?.stateStyles ?? {}))
-            n += count(map);
-    }
-    return n;
-}
-// ─── Editing (immutable) ─────────────────────────────────────────────────────
-function assertOverrideBreakpoint(bp) {
-    if (bp === Breakpoint.Base) {
-        throw new Error('Base styles live in styleProps / stateStyles, not in responsive overrides');
-    }
-    if (!BREAKPOINT_INDEX.has(bp))
-        throw new Error(`Unknown breakpoint "${bp}"`);
-}
-/** Returns a new overrides object with `prop` set at `bp` (optionally within `state`). */
-function setOverride(responsive, bp, prop, value, state) {
-    assertOverrideBreakpoint(bp);
-    const layer = { ...(responsive?.[bp] ?? {}) };
-    if (state) {
-        layer.stateStyles = { ...(layer.stateStyles ?? {}), [state]: { ...(layer.stateStyles?.[state] ?? {}), [prop]: value } };
-    }
-    else {
-        layer.styleProps = { ...(layer.styleProps ?? {}), [prop]: value };
+function compileDeclarations(props, importantProps, context = DeclarationContext.Base) {
+    const out = [];
+    for (const [k, v] of Object.entries(props)) {
+        if (v === undefined || v === null || v === '')
+            continue;
+        const prop = styleKeyToKebab(k);
+        const val = rewriteViewportUnits(String(v));
+        const isImportant = importantProps?.has(k) ?? false;
+        const dropsNoOps = context === DeclarationContext.Base && !isImportant;
+        if (dropsNoOps && NOOP_INITIAL_VALUES[prop]?.includes(val.trim().toLowerCase()))
+            continue;
+        out.push(`${prop}: ${val}${isImportant ? ' !important' : ''}`);
     }
-    return { ...(responsive ?? {}), [bp]: layer };
+    return out;
 }
 /**
- * Remove overrides at `bp` and PRUNE whatever becomes empty, so "reset" and "never
- * overridden" are the same state on disk — no tombstones, no nulls.
+ * Per-type default `width` that the builder applies from each component's config
+ * (NOT persisted in styleProps — see render-parity.md "saved node is not
+ * self-describing"). The engine has no config classes, so it resolves the same
+ * default from THIS map at render time. Keeping the map here (not re-typed in the
+ * engine) is the "shared default map" decision.
  *
- *   clearOverride(r, bp)                 — the whole breakpoint
- *   clearOverride(r, bp, undefined, st)  — one state at that breakpoint
- *   clearOverride(r, bp, prop)           — one base-state value
- *   clearOverride(r, bp, prop, st)       — one value within a state
+ * ONLY the `100%` container-type defaults live here. Fixed-size config defaults
+ * (Card 200px, Image 300px, SliderSlide 33%) are starter placeholders real content
+ * almost always overrides — forcing them onto width-less nodes breaks layout.
+ */
+const DEFAULT_WIDTH_BY_TYPE = {
+    Container: '100%', Repeater: '100%', SliderContainer: '100%',
+    List: '100%', ListItem: '100%', Text: '100%', Divider: '100%', Spacer: '100%',
+    // Section, Heading, LinkedContainer, Card, Image, SliderSlide, Button, ButtonBlock,
+    // Icon → no forced default (their config defaults are content sizes set explicitly).
+};
+/**
+ * Extra "render default" declarations the builder gets implicitly from live component
+ * behaviour, which the engine must re-apply explicitly for parity. Returns `"prop: value"`
+ * declarations to append AFTER the node's own compiled declarations.
  *
- * Returns `undefined` when nothing is left, so a serialiser omits the key entirely.
+ * @param type          Node type (registry key).
+ * @param styleProps    The node's persisted styleProps.
+ * @param hasHoverState Whether the node has a non-empty hover / parent-hover state.
  */
-function clearOverride(responsive, bp, prop, state) {
-    assertOverrideBreakpoint(bp);
-    const next = { ...(responsive ?? {}) };
-    const current = next[bp];
-    if (current && (prop !== undefined || state !== undefined)) {
-        const layer = { ...current };
-        if (state) {
-            const states = { ...(layer.stateStyles ?? {}) };
-            if (prop !== undefined && states[state]) {
-                const { [prop]: _dropped, ...rest } = states[state];
-                states[state] = rest;
-            }
-            if (prop === undefined || !hasKeys(states[state]))
-                delete states[state];
-            layer.stateStyles = hasKeys(states) ? states : undefined;
+function renderDefaultDeclarations(type, styleProps, hasHoverState) {
+    const sp = styleProps ?? {};
+    const out = [];
+    const isOutOfFlow = sp['position'] === 'fixed' || sp['position'] === 'absolute';
+    // Container-type default width so it fills its track. Only when width is unset — once a page
+    // is saved with fully-resolved styleProps (self-describing nodes), width comes through
+    // compileDeclarations and this is a no-op.
+    if (sp['width'] === undefined) {
+        if (isOutOfFlow) {
+            out.push('width: 100%');
         }
-        else if (prop !== undefined && layer.styleProps) {
-            const { [prop]: _dropped, ...rest } = layer.styleProps;
-            layer.styleProps = hasKeys(rest) ? rest : undefined;
+        else if (DEFAULT_WIDTH_BY_TYPE[type]) {
+            out.push(`width: ${DEFAULT_WIDTH_BY_TYPE[type]}`);
         }
-        if (!layer.stateStyles)
-            delete layer.stateStyles;
-        if (!layer.styleProps)
-            delete layer.styleProps;
-        next[bp] = hasKeys(layer) ? layer : undefined;
     }
-    else {
-        next[bp] = undefined;
+    // min-width:0 lets container flex children shrink below content and equal-split. Emit it for
+    // container types INDEPENDENT of where width came from (styleProps vs the default above) —
+    // otherwise a saved page whose width is persisted would lose the equal-split. In the builder the
+    // same rule comes from the `.container-child` wrapper; here it lands on `.iox-node` directly.
+    if (DEFAULT_WIDTH_BY_TYPE[type] && sp['minWidth'] === undefined && !isOutOfFlow) {
+        out.push('min-width: 0');
     }
-    if (!next[bp])
-        delete next[bp];
-    return hasKeys(next) ? next : undefined;
-}
-const ZERO_DURATIONS = new Set(['0ms', '0s']);
-function groupsTouchedBy(map) {
-    const touched = new Set();
-    if (!map)
-        return touched;
-    for (const group of VIRTUAL_TRAIT_GROUPS) {
-        if (group.keys.some(k => map[k] !== undefined))
-            touched.add(group);
+    // A border only renders when there is a WIDTH. Gate border-style on borderWidth — NOT on
+    // borderColor: a node with only a border colour and no width would otherwise get the
+    // browser's default `medium` width and show a phantom border. Absent borderWidth = no border.
+    if (sp['borderWidth'] && sp['borderStyle'] === undefined) {
+        out.push('border-style: solid');
     }
-    return touched;
+    // Default transition so own/parent hover animates smoothly (parity with the builder).
+    if (hasHoverState && sp['transition'] === undefined) {
+        out.push('transition: all 0.2s ease');
+    }
+    // Image defaults reapplied when unset (the config defaults aren't always persisted). height:auto
+    // is only a DEFAULT — when the user sets an explicit height (e.g. 100%) it must WIN, so guard it
+    // on `sp['height'] === undefined` (matching the builder, which respects a configured height). An
+    // unset height + aspect-ratio lets the ratio drive the box.
+    if (type === 'Image') {
+        if (sp['aspectRatio'] === undefined)
+            out.push('aspect-ratio: 1/1');
+        // object-fit is a Size style trait with config default 'cover'; that default isn't persisted,
+        // so reapply it here (matching the builder) when the node has none.
+        if (sp['objectFit'] === undefined)
+            out.push('object-fit: cover');
+        // NOTE: no `height: auto` — when height is unset, `auto` is already the CSS initial value, so
+        // emitting it is a pure no-op. A configured height comes through compileDeclarations and wins.
+    }
+    // Containers default to a positioning context (for absolutely-positioned children). These live
+    // in `.iox-node` (not the component `:host`) so an explicit styleProps value always wins.
+    if ((type === 'Container' || type === 'Section' || type === 'LinkedContainer') && sp['position'] === undefined) {
+        out.push('position: relative');
+    }
+    // LinkedContainer is an <a> (inline by default) → default it to block so children lay out.
+    if (type === 'LinkedContainer' && sp['display'] === undefined) {
+        out.push('display: block');
+    }
+    // An Icon is a single FONT GLYPH, not a paragraph: it must contribute no line-box height of its
+    // own (spacing belongs to padding/margin). But every node serialises the Typography group's
+    // `lineHeight` default of 1.5, so icons carry `line-height: 1.5` — a 24px glyph then gets a 36px
+    // line box and pushes the surrounding layout around.
+    //
+    // This is emitted UNCONDITIONALLY (not guarded on `undefined`) and callers append render-defaults
+    // AFTER the node's own compiled declarations in the SAME rule, so it overrides a stale serialised
+    // value for EXISTING icons too — no re-save needed. line-height is inherited, so simply omitting
+    // it is not enough: the icon would inherit 1.5 from its container instead.
+    if (type === 'Icon')
+        out.push('line-height: 0');
+    // An icon's `<i>` must shrink-wrap its glyph so it grows with font-size and doesn't overflow its
+    // parent. Phosphor forces `display:inline-flex` on its own class; generated (fantasticon) fonts
+    // don't, so the engine's plain `<i class="bi-x iox-node-…">` would fall back to inline and the
+    // glyph would overflow. Emit it here (guarded so a user-set display still wins) — mirrors the
+    // builder Icon component's `:host{display:inline-flex}`.
+    if (type === 'Icon' && sp['display'] === undefined) {
+        out.push('display: inline-flex', 'align-items: center', 'justify-content: center');
+    }
+    return out;
 }
+
 /**
- * Should a touched group that composed to nothing emit its cancelling value?
- * Transition is the exception: setting only the easing (no duration anywhere) composes to
- * nothing too, and cancelling there would also kill the renderer's default hover transition
- * — so transition cancels only when the merged duration is explicitly zero.
+ * tree-relations — framework-agnostic helpers for reasoning about a rendered node
+ * tree's structural relationships. Lives in @vectoriox/iox-ui because BOTH renderers
+ * depend on iox-ui (the engine does NOT depend on iox-builder), so the same logic
+ * drives the builder canvas AND the SSR site — no fork.
+ * See iox-ai-guidance `architecture/builder/targeted-hover-state-plan.md`.
  */
-function shouldReset(group, merged) {
-    if (group.reset === null)
-        return false;
-    if (group.output === 'transition')
-        return ZERO_DURATIONS.has(String(merged['transitionDuration']));
-    return true;
+/** The css id a node contributes to selectors: its clone `styleId`, else its own `id`. */
+function nodeCssId(node) {
+    return node.styleId ?? node.id;
 }
 /**
- * Compose a sparse override against everything wider than it, keeping ONLY what the
- * override changes: its own plain props, plus each virtual group it touches (or that
- * group's cancelling value when it now composes to nothing). Untouched groups are dropped
- * — re-emitting the wider rule's value inside a media block is noise at best.
+ * Path of css ids from the root down to (and including) the node whose css id === `cssId`.
+ * Returns `null` when no node matches. First match wins (depth-first, pre-order).
  */
-function composeOverride(own, wider, touched) {
-    const composed = composeVirtualTraits(own, wider);
-    const groupOutputs = new Set(VIRTUAL_TRAIT_GROUPS.map(g => g.output));
-    const out = {};
-    for (const [k, v] of Object.entries(composed)) {
-        if (!groupOutputs.has(k) && v !== undefined)
-            out[k] = v;
+function pathToCssId(nodes, cssId) {
+    for (const node of nodes) {
+        const ownId = nodeCssId(node);
+        if (ownId === cssId)
+            return [ownId];
+        if (node.children?.length) {
+            const childPath = pathToCssId(node.children, cssId);
+            if (childPath)
+                return ownId ? [ownId, ...childPath] : childPath;
+        }
     }
-    const merged = { ...wider, ...own };
-    for (const group of touched) {
-        const value = composed[group.output];
-        if (value !== undefined)
-            out[group.output] = value;
-        else if (shouldReset(group, merged))
-            out[group.output] = group.reset;
+    return null;
+}
+/**
+ * The css id of the NEAREST COMMON ANCESTOR of two nodes (identified by their css ids),
+ * used to scope a `:has()` targeted-state selector so it stays repetition-safe.
+ *
+ * The result may equal `styledCssId` (the trigger sits INSIDE the styled node) or
+ * `triggerCssId` (the styled node sits inside the trigger) — both are valid scopes;
+ * `buildTargetedStateSelector` picks the right selector shape for each. Returns
+ * `undefined` only when a valid scope can't exist: an id is blank, the two ids are the
+ * same node, or they share no ancestor in `root`. Callers MUST skip emitting the rule
+ * when this is `undefined` — never emit an unscoped (page-global) `:has()`, which would
+ * break under repetition.
+ */
+function nearestCommonAncestorId(root, styledCssId, triggerCssId) {
+    if (!styledCssId || !triggerCssId || styledCssId === triggerCssId)
+        return undefined;
+    const styledPath = pathToCssId(root, styledCssId);
+    const triggerPath = pathToCssId(root, triggerCssId);
+    if (!styledPath || !triggerPath)
+        return undefined;
+    // Walk both paths together; the last shared prefix element is the common ancestor.
+    let common;
+    const shorter = Math.min(styledPath.length, triggerPath.length);
+    for (let i = 0; i < shorter; i++) {
+        if (styledPath[i] !== triggerPath[i])
+            break;
+        common = styledPath[i];
     }
-    return out;
+    return common;
 }
 /**
- * The per-breakpoint rule sets a node needs, widest → narrowest (the order they must be
- * emitted in, AFTER every base rule — equal specificity means source order decides).
- * Breakpoints with nothing to emit are omitted.
+ * Build the selector BODY (no leading `.`, matching the builder's `compile()` convention)
+ * for a targeted state, given the resolved scope. Three topologies, one shared rule:
  *
- * Handles the cross-axis case: a breakpoint that changes a virtual group (say
- * `translateX`) also re-emits that group for every state the node has, because the wider
- * state rule was composed against the wider value and would otherwise snap back to it on
- * hover.
+ *   - trigger INSIDE styled  (scope === styled):  `iox-node-{styled}:has(.iox-node-{trigger}:{base})`
+ *   - styled INSIDE trigger  (scope === trigger): `iox-node-{trigger}:{base} .iox-node-{styled}`
+ *   - separate subtrees      (scope is above both): `iox-node-{scope}:has(.iox-node-{trigger}:{base}) .iox-node-{styled}`
+ *
+ * `scopeCssId` MUST be a value returned by `nearestCommonAncestorId` for the same pair.
  */
-function planResponsiveRules(styleProps, stateStyles, responsive) {
-    if (!hasKeys(responsive))
-        return [];
-    const plan = [];
-    for (const def of BREAKPOINTS) {
-        const layer = layerAt(responsive, def.id);
-        if (!layer || def.maxWidth == null)
-            continue;
-        const bp = def.id;
-        const wider = parentBreakpoint(bp);
-        const own = layer.styleProps ?? {};
-        const widerProps = resolveStyleProps(styleProps, responsive, wider);
-        const touchedByProps = groupsTouchedBy(own);
-        const composedProps = composeOverride(own, widerProps, touchedByProps);
-        const propsHere = { ...widerProps, ...own };
-        const statesHere = resolveStateStyles(stateStyles, responsive, bp);
-        const statesWider = resolveStateStyles(stateStyles, responsive, wider);
-        const composedStates = {};
-        for (const state of Object.keys(statesHere)) {
-            const ownState = layer.stateStyles?.[state] ?? {};
-            const touched = groupsTouchedBy(ownState);
-            for (const group of touchedByProps)
-                touched.add(group);
-            const composed = composeOverride(ownState, { ...propsHere, ...(statesWider[state] ?? {}) }, touched);
-            if (hasKeys(composed))
-                composedStates[state] = composed;
-        }
-        if (hasKeys(composedProps) || hasKeys(composedStates)) {
-            plan.push({
-                breakpoint: bp,
-                mediaQuery: mediaQueryFor(bp),
-                styleProps: composedProps,
-                stateStyles: composedStates,
-            });
-        }
+function buildTargetedStateSelector(scopeCssId, triggerCssId, styledCssId, base) {
+    if (scopeCssId === styledCssId) {
+        return `iox-node-${styledCssId}:has(.iox-node-${triggerCssId}:${base})`;
     }
-    return plan;
+    if (scopeCssId === triggerCssId) {
+        return `iox-node-${triggerCssId}:${base} .iox-node-${styledCssId}`;
+    }
+    return `iox-node-${scopeCssId}:has(.iox-node-${triggerCssId}:${base}) .iox-node-${styledCssId}`;
 }
 
 /**
@@ -4394,5 +4586,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map