@vectoriox/iox-ui 5.37.0 → 5.39.0

package/fesm2022/vectoriox-iox-ui-generation-core.mjs

@@ -1,6 +1,6 @@
 import { NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, elementStyleById, ownedTraitsOf, applyElementStyle, flavorPackById, parseHexColor, SPEC_AXES, LinkType, resolveDesignChoices } from '@vectoriox/iox-ui/design-core';
 import { formPresetById } from '@vectoriox/iox-ui/forms-core';
-import { CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, buildCardRecipe, findByRole, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, pickAccordionAutoBinds, ACCORDION_CONTENT_LIMIT } from '@vectoriox/iox-ui/composite-core';
+import { CardRole, CardLayout, CARD_LAYOUTS, CARD_PARTS, buildCardRecipe, findByRole, AccordionRole, buildAccordionRecipe, ACCORDION_WORDS, accordionItems, accordionQuestionOf, accordionAnswerOf, ACCORDION_BIND_PROP, pickAccordionAutoBinds, ACCORDION_CONTENT_LIMIT, buildTabsRecipe, TABS_WORDS, tabsTriggers, tabLabelNodeOf, TABS_LABEL_BIND_PROP, tabsPanels, tabPanelTextOf, TABS_TEXT_BIND_PROP, tabPanelImageOf, pickTabsAutoBinds, tabsListOf, tabsPanelsOf, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW } from '@vectoriox/iox-ui/composite-core';
 
 // GENERATED from iox-ai-guidance flavor-spec.v1.json — do not edit; re-run scripts/gen-flavor-spec.mjs
 // (npm run gen:flavor-spec). The JSON is itself generated by iox-ai-guidance
@@ -980,6 +980,216 @@ 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"
+            }
+        }
     }
 };
 const SPEC_SITE_TEMPLATES = {
@@ -1865,7 +2075,10 @@ const NODE_BASELINES = {
             "htmlTag",
             "colorScheme",
             "multiple",
-            "defaultOn"
+            "defaultOn",
+            "activateOn",
+            "orientation",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -4098,7 +4311,10 @@ const NODE_BASELINES = {
             "source",
             "limit",
             "multiple",
-            "defaultOn"
+            "defaultOn",
+            "activateOn",
+            "orientation",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -4230,7 +4446,8 @@ const NODE_BASELINES = {
             "enableParallax": false,
             "enableGrid": false,
             "gridRows": 2,
-            "breakpoints": ""
+            "breakpoints": "",
+            "ariaLabel": ""
         },
         "styleProps": {
             "position": "static",
@@ -4340,7 +4557,9 @@ const NODE_BASELINES = {
             "enableGrid",
             "gridRows",
             "__responsiveLabel",
-            "breakpoints"
+            "breakpoints",
+            "__accessibilityLabel",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -5858,7 +6077,8 @@ const NODE_BASELINES = {
             "showCloseButton": true,
             "consentRole": false,
             "closeAbove": "",
-            "ariaLabel": ""
+            "ariaLabel": "",
+            "colorScheme": "default"
         },
         "styleProps": {
             "position": "static",
@@ -5951,7 +6171,8 @@ const NODE_BASELINES = {
             "__responsiveLabel",
             "closeAbove",
             "__accessibilityLabel",
-            "ariaLabel"
+            "ariaLabel",
+            "colorScheme"
         ],
         "styleTraits": [
             "position",
@@ -6045,6 +6266,145 @@ const NODE_BASELINES = {
             "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
     }
 };
 /** What every style trait saves as when no constructor sets it (buildFullStyleTraits' defaults). */
@@ -6192,6 +6552,8 @@ const BASELINE_ROLES = {
     FormSuccess: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     FormError: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     Dialog: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
+    // CC3: a Video fills its column at 16 / 9 — the shape the poster and the player take.
+    Video: { width: Behaviour, aspectRatio: Behaviour },
 };
 /** The style values a type's constructor sets for an empty palette drop, each mapped to the value the
  *  trait saves when nobody sets it — what a composed node of that type starts from. */
@@ -6249,6 +6611,13 @@ var 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. */
     PatternRecipe["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. */
+    PatternRecipe["Tabs"] = "tabs";
+    /** CC3: the accessible carousel — a named Slider whose controls are parts, one quote per slide (placeholders). */
+    PatternRecipe["Carousel"] = "carousel";
+    /** CC3: the Lightbox — a Dialog holding a Slider over the node's `src` (the gallery's own source). */
+    PatternRecipe["Lightbox"] = "lightbox";
 })(PatternRecipe || (PatternRecipe = {}));
 /** A recipe node's `binds` keys → the part each binds (Card v2). */
 var CardBindTarget;
@@ -6273,7 +6642,14 @@ var PatternPlaceholder;
 (function (PatternPlaceholder) {
     PatternPlaceholder["Copy"] = "copy";
     PatternPlaceholder["Image"] = "image";
+    /** CC3: a clip the studio uploads (a Video's file): the poster blank until then, publish-blocking. */
+    PatternPlaceholder["Video"] = "video";
 })(PatternPlaceholder || (PatternPlaceholder = {}));
+/** CC3: what an `opens` node opens. */
+var PatternOpens;
+(function (PatternOpens) {
+    PatternOpens["Lightbox"] = "lightbox";
+})(PatternOpens || (PatternOpens = {}));
 /** The composer directives a pattern writes where a plan supplies the value. */
 var PatternDirective;
 (function (PatternDirective) {
@@ -7004,7 +7380,7 @@ const BAR_ITEMS_MAX = 5;
 class NavShapeError extends Error {
 }
 const CONTAINER = 'Container';
-const DIALOG = 'Dialog';
+const DIALOG$1 = 'Dialog';
 const LINK = 'Link';
 const LINKED = 'LinkedContainer';
 const BUTTON = 'ButtonBlock';
@@ -7113,7 +7489,7 @@ function navPages(root) {
 function collectHeaderLinks(root) {
     const out = [];
     const visit = (n) => {
-        if (n.type === DIALOG)
+        if (n.type === DIALOG$1)
             return;
         if (n.type === LINK)
             out.push(n);
@@ -7200,7 +7576,7 @@ function pageLink(kit, suffix, page, role, lay = {}) {
     return part(kit, suffix, LINK, { label: page.label, linkType: LinkType.Page, pageRoute: page.route }, 'link', role, lay);
 }
 function drawer(kit, root, pages, at) {
-    const dr = part(kit, 'drawer', DIALOG, {
+    const dr = part(kit, 'drawer', DIALOG$1, {
         placement: 'end', closeOnBackdrop: true, showCloseButton: false, ariaLabel: NAV_SHAPE_COPY.menu, closeAbove: at,
     }, 'dialog', NavRole.Drawer, { width: '86vw', maxWidth: '360px', display: 'flex', flexDirection: 'column', gap: '20px' });
     const brandWords = textOf(find([root], NavRole.Brand) ?? root) || NAV_PART_LABELS[NavRole.Root];
@@ -7484,6 +7860,8 @@ var PlaceholderKind;
     PlaceholderKind["Copy"] = "copy";
     /** An image slot with no image: the empty-image placeholder (DS3). */
     PlaceholderKind["Image"] = "image";
+    /** CC3: a video slot with no clip — the studio uploads its own (the poster blank meanwhile). */
+    PlaceholderKind["Video"] = "video";
 })(PlaceholderKind || (PlaceholderKind = {}));
 var ComposeIssueCode;
 (function (ComposeIssueCode) {
@@ -7541,6 +7919,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';
@@ -7827,6 +8209,24 @@ function composeNode(pn, id, repeater, ctx) {
             setProp(node, prop, words.value);
         }
     }
+    // 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', '');
@@ -7921,6 +8321,12 @@ const CARD_BINDS = {
 function composeRecipe(pn, id, repeater, ctx) {
     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);
@@ -8006,12 +8412,128 @@ function composeAccordion(pn, id, ctx) {
     addBinding(accordionAnswerOf(template), { prop: ACCORDION_BIND_PROP, source: binding, path: picks.answer });
     return root;
 }
+/** The content type a section binding lists, through its data source. */
+function boundContentType(binding, ctx) {
+    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 = 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, id, ctx) {
+    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) => {
+        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);
+    };
+    const root = buildTabsRecipe(factory, { tabs: binding ? TABS_WORDS.slice(0, 1) : undefined, label: pn.name });
+    const tree = root;
+    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)]) {
+        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), { prop: TABS_LABEL_BIND_PROP, source: binding, path: picks.label });
+    addBinding(tabPanelTextOf(panel), { prop: TABS_TEXT_BIND_PROP, source: binding, path: picks.text });
+    const image = tabPanelImageOf(panel);
+    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, rootKey) {
+    return spec => create(spec.key === rootKey ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null);
+}
+/**
+ * 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, id, ctx) {
+    const slider = buildCarouselRecipe(recipeFactory(id, 'carousel'));
+    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, id, repeater, ctx) {
+    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' });
+}
+/** CC3: every `opens: lightbox` node of a stamped pattern opens the pattern's lightbox at its own row. */
+function wireOpeners(root, openers) {
+    if (!openers.length)
+        return;
+    let lightbox = null;
+    const find = (n) => { 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.id;
+    const visit = (n) => {
+        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, id, ctx) {
     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, 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;
 }
@@ -8129,5 +8651,5 @@ function composeSite(plan, context) {
  * Generated bundle index. Do not edit.
  */
 
-export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, composeSite, createSerializedNode, findNavRoot, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, patternTakesBinding, planFromTemplate, planNavShape, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
+export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternOpens, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, composeSite, createSerializedNode, findNavRoot, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, patternTakesBinding, planFromTemplate, planNavShape, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
 //# sourceMappingURL=vectoriox-iox-ui-generation-core.mjs.map