@vectoriox/iox-ui 4.22.0 → 4.23.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -2821,14 +2821,17 @@ const MARKER_FUNS = [
     ['markerColor', 'color'],
     ['markerFontSize', 'fontSize'],
 ];
-// ─── All virtual trait names ──────────────────────────────────────────────────
-const VIRTUAL_TRAIT_KEYS = new Set([
-    ...FILTER_FUNS.map(([t]) => t),
-    ...BACKDROP_FUNS.map(([t]) => t),
-    ...TRANSFORM_FUNS.map(([t]) => t),
-    'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
-    ...MARKER_FUNS.map(([t]) => t),
+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
@@ -2970,6 +2973,311 @@ function buildTargetedStateSelector(scopeCssId, triggerCssId, styledCssId, base)
     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.
+ *
+ * ⚠️ 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 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;
+}
+/** `@media (max-width: 767px)` for `bp`; `null` for Base or an unknown id. */
+function mediaQueryFor(bp) {
+    const max = breakpointDef(bp)?.maxWidth;
+    return max == null ? null : `@media (max-width: ${max}px)`;
+}
+/** Wrap already-compiled rules for `bp`. Base (and blank css) passes through unwrapped. */
+function wrapInMediaQuery(bp, css) {
+    const query = mediaQueryFor(bp);
+    if (!css.trim())
+        return '';
+    return query ? `${query} {\n${css}\n}` : css;
+}
+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];
+    return out;
+}
+/**
+ * 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 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 };
+    }
+    return { ...(responsive ?? {}), [bp]: layer };
+}
+/**
+ * Remove overrides at `bp` and PRUNE whatever becomes empty, so "reset" and "never
+ * overridden" are the same state on disk — no tombstones, no nulls.
+ *
+ *   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
+ *
+ * Returns `undefined` when nothing is left, so a serialiser omits the key entirely.
+ */
+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;
+    }
+    else {
+        next[bp] = undefined;
+    }
+    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);
+    }
+    return touched;
+}
+/**
+ * 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 shouldReset(group, merged) {
+    if (group.reset === null)
+        return false;
+    if (group.output === 'transition')
+        return ZERO_DURATIONS.has(String(merged['transitionDuration']));
+    return true;
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+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;
+}
+
 /**
  * Shared RELATIVE (route-context) data resolving — the SINGLE source of truth for how a detail page
  * derives values FROM its current route item, consumed by BOTH the page builder (iox-cms-client) and
@@ -4004,5 +4312,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, 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, 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_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, buildDataSourceFilter, buildRelatedFilter, buildTargetedStateSelector, buildTransitionTimeline, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, parseUrlList, planDataSource, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, rewriteViewportUnits, safeSetInput, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots };
+export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, 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, 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, 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, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map