@vectoriox/iox-ui 5.37.0 → 5.39.0

package/src/generation-core/compose-site.ts

@@ -2,12 +2,14 @@ import { DesignChoices, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui
 import { FormPresetDef, FormPresetField, formPresetById } from '@vectoriox/iox-ui/forms-core';
 import {
     ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_WORDS, accordionAnswerOf, accordionItems, accordionQuestionOf, AccordionRole,
-    buildAccordionRecipe, buildCardRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode, CompositeNodeSpec, findByRole,
-    pickAccordionAutoBinds,
+    buildAccordionRecipe, buildCardRecipe, buildCarouselRecipe, buildLightboxRecipe, CardLayout, CardPart, CardRole, CARD_LAYOUTS, CARD_PARTS, CompositeNode,
+    CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, pickAccordionAutoBinds, pickTabsAutoBinds, SLIDE_TO_ROW, SLIDE_TYPE, buildTabsRecipe, tabLabelNodeOf,
+    tabPanelImageOf, tabPanelTextOf, tabsListOf, tabsPanels, tabsPanelsOf, tabsTriggers, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP,
+    TABS_TEXT_BIND_PROP, TABS_WORDS,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { NODE_BASELINES } from './node-baselines.generated';
-import { BindScope, CardBindTarget, PatternDirective, PatternNode, PatternPlaceholder, PatternRecipe, SitePattern, patternById } from './patterns';
+import { BindScope, CardBindTarget, PatternDirective, PatternNode, PatternOpens, PatternPlaceholder, PatternRecipe, SitePattern, patternById } from './patterns';
 import { assertStyleSlots, ComposeError, createSerializedNode, SerializedBinding, SerializedNode, setStyleProps } from './serialized-node';
 import {
     ContentTypePlan, DataSourcePlan, FactKey, FACT_KEYS, GlobalSlot, PagePlan, PageSectionPlan, PlanDataSourceMode, PlanDataSourceType,
@@ -37,6 +39,8 @@ export enum PlaceholderKind {
     Copy = 'copy',
     /** An image slot with no image: the empty-image placeholder (DS3). */
     Image = 'image',
+    /** CC3: a video slot with no clip — the studio uploads its own (the poster blank meanwhile). */
+    Video = 'video',
 }
 
 export interface ComposedPlaceholder {
@@ -174,6 +178,10 @@ const BUTTON_BLOCK = 'ButtonBlock';
 const FORM = 'Form';
 const FIELD = 'Field';
 const IMAGE = 'Image';
+const VIDEO = 'Video';
+/** A Video's source prop (media-core `VideoTrait.Source` — not `source`, which names a data source). */
+const VIDEO_SOURCE_PROP = 'videoSource';
+const DIALOG = 'Dialog';
 const SUBMIT_BUTTON = 'SubmitButton';
 const FORM_SUCCESS = 'FormSuccess';
 const FORM_ERROR = 'FormError';
@@ -231,6 +239,8 @@ interface Ctx {
     placeholders: ComposedPlaceholder[];
     issues: ComposeIssue[];
     routes: ReadonlySet<string>;
+    /** CC3: nodes whose click opens the pattern's lightbox (`opens`), wired once the pattern is stamped. */
+    openers?: string[];
 }
 
 function nonEmpty(v: unknown): v is string {
@@ -480,6 +490,22 @@ function composeNode(pn: PatternNode, id: string, repeater: RepeaterScope | null
         }
     }
 
+    // CC3: a Video in background mode is an uploaded file's; its clip is the studio's own (a placeholder until then).
+    if (pn.video) {
+        if (type !== VIDEO) throw new ComposeError(`${id}: "video" belongs on a Video`);
+        setProp(node, VIDEO_SOURCE_PROP, 'file');
+        setProp(node, 'mode', pn.video);
+    }
+    if (pn.ph === PatternPlaceholder.Video) {
+        setProp(node, 'src', '');
+        ctx.placeholders.push({ nodeId: id, owner: ctx.owner, kind: PlaceholderKind.Video, text: '' });
+    }
+    if (pn.name) setProp(node, 'ariaLabel', pn.name);
+    if (pn.opens) {
+        if (pn.opens !== PatternOpens.Lightbox) throw new ComposeError(`${id}: "opens" names the pattern's lightbox`);
+        (ctx.openers ??= []).push(id);
+    }
+
     // Images: an empty slot, or a bound one — both fall back to the DS3 empty image, never a stock URL.
     if (pn.ph === PatternPlaceholder.Image) {
         setProp(node, 'src', '');
@@ -562,6 +588,9 @@ const CARD_BINDS: Readonly<Record<CardBindTarget, { role: CardRole; prop: string
  */
 function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | null, ctx: Ctx): SerializedNode {
     if (pn.recipe === PatternRecipe.Accordion) return composeAccordion(pn, id, ctx);
+    if (pn.recipe === PatternRecipe.Tabs) return composeTabs(pn, id, ctx);
+    if (pn.recipe === PatternRecipe.Carousel) return composeCarousel(pn, id, ctx);
+    if (pn.recipe === PatternRecipe.Lightbox) return composeLightbox(pn, id, repeater, ctx);
     if (pn.recipe !== PatternRecipe.Card) throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
     const layout = (pn.layout ?? CardLayout.Top) as CardLayout;
     if (!CARD_LAYOUTS.includes(layout)) throw new ComposeError(`${id}: a card has no layout "${pn.layout}"`);
@@ -641,10 +670,124 @@ function composeAccordion(pn: PatternNode, id: string, ctx: Ctx): SerializedNode
     return root;
 }
 
+/** The content type a section binding lists, through its data source. */
+function boundContentType(binding: string, ctx: Ctx): ContentTypePlan | undefined {
+    const source = ctx.plan.dataSources.find(d => d.alias === binding);
+    return source && 'contentType' in source ? ctx.plan.contentTypes.find(t => t.name === source.contentType) : undefined;
+}
+
+const TABS_ROOT_KEY = 'tabs';
+const TABS_HOLDER_KEYS: ReadonlySet<string> = new Set(['list', 'panels']);
+
+/**
+ * Tabs (CC4a) — the composite-core recipe stamped with this composer's factory. Manual (no section binding): three
+ * tabs whose words are placeholders the studio rewrites (`ph: 'copy'`) and whose pictures it supplies — never invented.
+ * From content (the section names a list `binding`, R3's AI path): the tab list and the panels holder are BOTH
+ * Repeaters over that list, each holding its one template (one row → its tab AND its panel, paired by the row's id at
+ * render), the tab's words, the panel's words and its picture bound to the type's first short-text, long-text and image
+ * fields (`pickTabsAutoBinds`, the builder switch's rule), limit 6. The tab list is named by the pattern's `name`.
+ */
+function composeTabs(pn: PatternNode, id: string, ctx: Ctx): SerializedNode {
+    const binding = pn.src === PatternDirective.OptionalBinding || pn.src === PatternDirective.Binding ? ctx.section?.binding ?? null : null;
+    if (pn.src === PatternDirective.Binding && !binding) throw new ComposeError(`${id}: "$binding" with no section binding`);
+    const factory = (spec: CompositeNodeSpec): CompositeNode => {
+        const type = binding && TABS_HOLDER_KEYS.has(spec.key) ? REPEATER : spec.type;
+        return create(spec.key === TABS_ROOT_KEY ? id : `${id}-${spec.key}`, type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
+    };
+    const root = buildTabsRecipe(factory, { tabs: binding ? TABS_WORDS.slice(0, 1) : undefined, label: pn.name }) as SerializedNode;
+    const tree = root as CompositeNode;
+    if (!binding) {
+        if (pn.ph === PatternPlaceholder.Copy) {
+            for (const tab of tabsTriggers(tree)) {
+                const words = tabLabelNodeOf(tab);
+                if (words) ctx.placeholders.push({ nodeId: words.id!, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(words.props?.[TABS_LABEL_BIND_PROP] ?? '') });
+            }
+            for (const panel of tabsPanels(tree)) {
+                const text = tabPanelTextOf(panel);
+                if (text) ctx.placeholders.push({ nodeId: text.id!, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(text.props?.[TABS_TEXT_BIND_PROP] ?? '') });
+                const image = tabPanelImageOf(panel);
+                if (image) ctx.placeholders.push({ nodeId: image.id!, owner: ctx.owner, kind: PlaceholderKind.Image, text: '' });
+            }
+        }
+        return root;
+    }
+    const type = boundContentType(binding, ctx);
+    const picks = pickTabsAutoBinds((type?.fields ?? []).map(f => ({ name: f.name, type: f.type, controller: f.controller })));
+    if (!picks.label || !picks.text) {
+        throw new ComposeError(`${id}: "${binding}" has no short-text field for the tab and long-text field for its panel`);
+    }
+    for (const holder of [tabsListOf(tree), tabsPanelsOf(tree)] as SerializedNode[]) {
+        addBinding(holder, { prop: 'source', source: binding, path: '' });
+        setProp(holder, 'limit', TABS_CONTENT_LIMIT);
+    }
+    const [tab] = tabsTriggers(tree);
+    const [panel] = tabsPanels(tree);
+    delete tab.itemKey;
+    delete panel.itemKey;
+    addBinding(tabLabelNodeOf(tab) as SerializedNode, { prop: TABS_LABEL_BIND_PROP, source: binding, path: picks.label });
+    addBinding(tabPanelTextOf(panel) as SerializedNode, { prop: TABS_TEXT_BIND_PROP, source: binding, path: picks.text });
+    const image = tabPanelImageOf(panel) as SerializedNode | undefined;
+    if (image && picks.image) {
+        addBinding(image, { prop: TABS_IMAGE_BIND_PROP, source: binding, path: picks.image });
+        addBinding(image, { prop: 'alt', source: binding, path: picks.label });
+    }
+    return root;
+}
+
+/** A recipe's node factory for this composer: ids derive from the recipe's keys (`<id>-<key>`, the root `<id>`). */
+function recipeFactory(id: string, rootKey: string): (spec: CompositeNodeSpec) => CompositeNode {
+    return spec => create(spec.key === rootKey ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null) as CompositeNode;
+}
+
+/**
+ * CC3: the testimonial carousel — composite-core's recipe (the Slider with its control parts), stamped with this
+ * composer's factory. Every quote and every "client · project" line is a placeholder the studio rewrites (`ph: copy`):
+ * testimonials are facts, never invented.
+ */
+function composeCarousel(pn: PatternNode, id: string, ctx: Ctx): SerializedNode {
+    const slider = buildCarouselRecipe(recipeFactory(id, 'carousel')) as SerializedNode;
+    if (pn.ph === PatternPlaceholder.Copy) {
+        for (const slide of (slider.children ?? []).filter(c => c.type === SLIDE_TYPE)) {
+            for (const text of slide.children ?? []) ctx.placeholders.push({ nodeId: text.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(text.props?.['content'] ?? '') });
+        }
+    }
+    return slider;
+}
+
+/**
+ * CC3: the Lightbox — a Dialog holding a Slider bound to the node's `src` (the gallery's own source): one template
+ * slide whose image reads the row (a bare URL row: decorative alt), its arrows hidden on a phone.
+ */
+function composeLightbox(pn: PatternNode, id: string, repeater: RepeaterScope | null, ctx: Ctx): SerializedNode {
+    if (!pn.src) throw new ComposeError(`${id}: a lightbox needs the gallery's source (src)`);
+    const scoped = resolveScoped(pn.src, repeater, ctx, id);
+    const sourcePath = scoped.path === ITEM_VALUE_PATH ? '' : scoped.path;
+    return buildLightboxRecipe(recipeFactory(id, 'lightbox'), { source: scoped.source, sourcePath, imageField: 'item' }) as SerializedNode;
+}
+
+/** CC3: every `opens: lightbox` node of a stamped pattern opens the pattern's lightbox at its own row. */
+function wireOpeners(root: SerializedNode, openers: ReadonlyArray<string>): void {
+    if (!openers.length) return;
+    let lightbox: SerializedNode | null = null;
+    const find = (n: SerializedNode) => { if (!lightbox && n.type === DIALOG && n.label === LIGHTBOX_LABEL) lightbox = n; (n.children ?? []).forEach(find); };
+    find(root);
+    if (!lightbox) throw new ComposeError(`${root.id}: "opens: lightbox" with no lightbox in the pattern`);
+    const target = (lightbox as SerializedNode).id;
+    const visit = (n: SerializedNode) => {
+        if (openers.includes(n.id)) {
+            n.interactions = [{ id: `${n.id}-opens`, trigger: 'click', actions: [{ type: 'openDialog', target, params: { slideTo: SLIDE_TO_ROW }, duration: 0, delay: 0, easing: 'ease' }] }];
+        }
+        (n.children ?? []).forEach(visit);
+    };
+    visit(root);
+}
+
 function composePattern(pattern: SitePattern, id: string, ctx: Ctx): SerializedNode {
     if (pattern.node.each) throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
-    const node = composeNode(pattern.node, id, null, ctx);
+    const own: Ctx = { ...ctx, openers: [] };
+    const node = composeNode(pattern.node, id, null, own);
     if (!node) throw new ComposeError(`${id}: a pattern's root cannot be optional or a link`);
+    wireOpeners(node, own.openers ?? []);
     node.label = pattern.label;
     return node;
 }

package/src/generation-core/node-baselines.generated.ts

@@ -667,7 +667,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "htmlTag",
       "colorScheme",
       "multiple",
-      "defaultOn"
+      "defaultOn",
+      "activateOn",
+      "orientation",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -2900,7 +2903,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "source",
       "limit",
       "multiple",
-      "defaultOn"
+      "defaultOn",
+      "activateOn",
+      "orientation",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -3032,7 +3038,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "enableParallax": false,
       "enableGrid": false,
       "gridRows": 2,
-      "breakpoints": ""
+      "breakpoints": "",
+      "ariaLabel": ""
     },
     "styleProps": {
       "position": "static",
@@ -3142,7 +3149,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "enableGrid",
       "gridRows",
       "__responsiveLabel",
-      "breakpoints"
+      "breakpoints",
+      "__accessibilityLabel",
+      "ariaLabel"
     ],
     "styleTraits": [
       "position",
@@ -4660,7 +4669,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "showCloseButton": true,
       "consentRole": false,
       "closeAbove": "",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "colorScheme": "default"
     },
     "styleProps": {
       "position": "static",
@@ -4753,7 +4763,8 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "__responsiveLabel",
       "closeAbove",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "colorScheme"
     ],
     "styleTraits": [
       "position",
@@ -4847,6 +4858,145 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "transitionTimingFunction"
     ],
     "container": true
+  },
+  "Video": {
+    "props": {
+      "videoSource": "youtube",
+      "src": "",
+      "poster": "",
+      "mode": "inline",
+      "autoplay": false,
+      "title": "",
+      "captions": "",
+      "captionsLang": "en",
+      "consentCategory": "marketing"
+    },
+    "styleProps": {
+      "position": "static",
+      "top": "auto",
+      "right": "auto",
+      "bottom": "auto",
+      "left": "auto",
+      "zIndex": "0",
+      "width": "100%",
+      "height": "auto",
+      "minWidth": "auto",
+      "minHeight": "auto",
+      "maxWidth": "auto",
+      "maxHeight": "auto",
+      "aspectRatio": "16 / 9",
+      "objectFit": "cover",
+      "overflow": "visible",
+      "margin": "0px 0px 0px 0px",
+      "padding": "0px 0px 0px 0px",
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "#CCCCCC",
+      "borderRadius": "0px",
+      "opacity": "1",
+      "mixBlendMode": "normal",
+      "cursor": "auto",
+      "boxShadow": "",
+      "textShadow": "",
+      "translateX": "0px",
+      "translateY": "0px",
+      "scaleX": "1",
+      "scaleY": "1",
+      "rotate": "0deg",
+      "skewX": "0deg",
+      "skewY": "0deg",
+      "filterBlur": "0px",
+      "filterHueRotate": "0deg",
+      "filterBrightness": "1",
+      "filterContrast": "1",
+      "filterSaturate": "1",
+      "filterGrayscale": "0",
+      "filterSepia": "0",
+      "filterInvert": "0",
+      "backdropFilter": "none",
+      "backdropBlur": "0px",
+      "backdropBrightness": "1",
+      "backdropContrast": "1",
+      "backdropSaturate": "1",
+      "clipPath": "none",
+      "transitionDuration": "0ms",
+      "transitionDelay": "0ms",
+      "transitionTimingFunction": "ease"
+    },
+    "traits": [
+      "__mediaLabel",
+      "videoSource",
+      "src",
+      "poster",
+      "__behaviourLabel",
+      "mode",
+      "autoplay",
+      "__accessibilityLabel",
+      "title",
+      "captions",
+      "captionsLang",
+      "__privacyLabel",
+      "consentCategory"
+    ],
+    "styleTraits": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "zIndex",
+      "width",
+      "height",
+      "minWidth",
+      "minHeight",
+      "maxWidth",
+      "maxHeight",
+      "aspectRatio",
+      "objectFit",
+      "overflow",
+      "margin",
+      "padding",
+      "borderWidth",
+      "borderStyle",
+      "borderColor",
+      "borderRadius",
+      "opacity",
+      "mixBlendMode",
+      "cursor",
+      "_sep_shadow",
+      "boxShadow",
+      "textShadow",
+      "_sep_transform",
+      "translateX",
+      "translateY",
+      "scaleX",
+      "scaleY",
+      "rotate",
+      "skewX",
+      "skewY",
+      "_sep_filter",
+      "filterBlur",
+      "filterHueRotate",
+      "filterBrightness",
+      "filterContrast",
+      "filterSaturate",
+      "filterGrayscale",
+      "filterSepia",
+      "filterInvert",
+      "_sep_backdrop",
+      "backdropFilter",
+      "backdropBlur",
+      "backdropBrightness",
+      "backdropContrast",
+      "backdropSaturate",
+      "_sep_clip",
+      "clipPath",
+      "_sep_transition",
+      "transitionDuration",
+      "transitionDelay",
+      "transitionTimingFunction"
+    ],
+    "container": false
   }
 };
 

package/src/generation-core/patterns.ts

@@ -53,6 +53,12 @@ export interface PatternNode {
     readonly layout?: string;
     readonly parts?: Readonly<Record<string, boolean>>;
     readonly binds?: Readonly<Record<string, string>>;
+    /** CC3: a Video's mode — `background` (an uploaded file, a muted loop). */
+    readonly video?: string;
+    /** CC3: a click on this node opens the pattern's lightbox at the clicked row (`lightbox`). */
+    readonly opens?: string;
+    /** CC3: a control's accessible name (`ariaLabel`). */
+    readonly name?: string;
 }
 
 /** The composite-core recipes a pattern may stamp (`recipe`). */
@@ -61,6 +67,13 @@ export enum PatternRecipe {
     /** CC2: the Accordion — Manual (three placeholder items), or From content when the section names a list
      *  `binding` (`src: '$binding?'`): one template item bound to the type's question / answer fields. */
     Accordion = 'accordion',
+    /** CC4a: Tabs — Manual (three placeholder tabs), or From content when the section names a list `binding`: the tab
+     *  list and the panels are both Repeaters over it, one row giving its tab AND its panel. */
+    Tabs = 'tabs',
+    /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
+    Carousel = 'carousel',
+    /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */
+    Lightbox = 'lightbox',
 }
 
 /** A recipe node's `binds` keys → the part each binds (Card v2). */
@@ -97,6 +110,13 @@ export const SITE_PATTERNS: Readonly<Record<string, SitePattern>> = SPEC_SITE_PA
 export enum PatternPlaceholder {
     Copy = 'copy',
     Image = 'image',
+    /** CC3: a clip the studio uploads (a Video's file): the poster blank until then, publish-blocking. */
+    Video = 'video',
+}
+
+/** CC3: what an `opens` node opens. */
+export enum PatternOpens {
+    Lightbox = 'lightbox',
 }
 
 /** The composer directives a pattern writes where a plan supplies the value. */

package/src/generation-core/site-spec.generated.ts

@@ -978,6 +978,216 @@ export const SPEC_SITE_PATTERNS = {
         }
       ]
     }
+  },
+  "feature.tabbed": {
+    "family": "feature",
+    "label": "Features — tabs that switch",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "14px",
+            "maxWidth": "1100px",
+            "width": "100%",
+            "margin": "0px auto 0px auto"
+          },
+          "c": [
+            {
+              "t": "Text",
+              "es": "eyebrow",
+              "slot": "eyebrow",
+              "ph": "copy",
+              "text": "What we offer"
+            },
+            {
+              "t": "Heading",
+              "es": "h2",
+              "level": "h2",
+              "slot": "title",
+              "ph": "copy",
+              "text": "What we design"
+            },
+            {
+              "t": "Container",
+              "recipe": "tabs",
+              "src": "$binding?",
+              "ph": "copy",
+              "name": "What we design"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "hero.full-bleed-media": {
+    "family": "hero",
+    "label": "Hero — words over a background video",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "lay": {
+        "position": "relative",
+        "overflow": "hidden",
+        "display": "flex",
+        "flexDirection": "column",
+        "justifyContent": "flex-end",
+        "minHeight": "70vh"
+      },
+      "c": [
+        {
+          "t": "Video",
+          "es": "media",
+          "video": "background",
+          "ph": "video",
+          "lay": {
+            "position": "absolute",
+            "top": "0px",
+            "left": "0px",
+            "width": "100%",
+            "height": "100%",
+            "aspectRatio": "auto",
+            "borderRadius": "0px",
+            "zIndex": "0"
+          }
+        },
+        {
+          "t": "Container",
+          "es": "media-scrim",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "14px",
+            "position": "relative",
+            "zIndex": "1",
+            "padding": "32px 32px 32px 32px",
+            "maxWidth": "760px"
+          },
+          "c": [
+            {
+              "t": "Heading",
+              "es": "display",
+              "level": "h1",
+              "slot": "title",
+              "ph": "copy",
+              "text": "Rooms that hold the light"
+            },
+            {
+              "t": "Text",
+              "es": "lead",
+              "slot": "lead",
+              "fromBusiness": "tagline",
+              "ph": "copy"
+            },
+            {
+              "t": "ButtonBlock",
+              "es": "button-primary",
+              "href": "/contact",
+              "slot": "cta",
+              "text": "Get in touch"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "proof.testimonial-carousel": {
+    "family": "proof",
+    "label": "Testimonials that rotate",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "14px",
+            "maxWidth": "860px",
+            "width": "100%",
+            "margin": "0px auto 0px auto"
+          },
+          "c": [
+            {
+              "t": "Text",
+              "es": "eyebrow",
+              "slot": "eyebrow",
+              "ph": "copy",
+              "text": "What clients say"
+            },
+            {
+              "t": "SliderContainer",
+              "recipe": "carousel",
+              "ph": "copy"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "collection.masonry-gallery": {
+    "family": "collection",
+    "label": "Gallery that opens full screen",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Repeater",
+          "src": "route.gallery",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
+            "gap": "var(--iox-space-gap)"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "repeat(2, minmax(0, 1fr))"
+            }
+          },
+          "c": [
+            {
+              "t": "ButtonBlock",
+              "es": "button-ghost",
+              "opens": "lightbox",
+              "name": "Open the image",
+              "lay": {
+                "display": "block",
+                "width": "100%",
+                "padding": "0px 0px 0px 0px"
+              },
+              "c": [
+                {
+                  "t": "Image",
+                  "es": "media",
+                  "bind": "item",
+                  "alt": "",
+                  "aspect": "4 / 3"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "t": "Dialog",
+          "recipe": "lightbox",
+          "src": "route.gallery"
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
   }
 } as const;
 

package/src/media-core/public-api.ts

@@ -0,0 +1,9 @@
+/**
+ * @vectoriox/iox-ui/media-core — media decisions shared by the builder, both engine paths and iox-cms (CC3).
+ * FRAMEWORK-FREE: `planVideo` is the one place that knows a YouTube / Vimeo address, the player's host and the consent
+ * category a facade waits for; the runtime is DOM-only. iox-cms reads `parseVideoUrl` / `videoThumbnailRequest` to
+ * fetch and store an embed's poster (the visitor never asks the provider for it).
+ * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
+ */
+export * from './video';
+export * from './video-runtime';