@vectoriox/iox-ui 5.38.0 → 5.40.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, buildCarouselRecipe, SLIDE_TYPE, buildLightboxRecipe, LIGHTBOX_LABEL, SLIDE_TO_ROW } 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
@@ -981,6 +981,52 @@ 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",
@@ -2029,7 +2075,10 @@ const NODE_BASELINES = {
             "htmlTag",
             "colorScheme",
             "multiple",
-            "defaultOn"
+            "defaultOn",
+            "activateOn",
+            "orientation",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -4262,7 +4311,10 @@ const NODE_BASELINES = {
             "source",
             "limit",
             "multiple",
-            "defaultOn"
+            "defaultOn",
+            "activateOn",
+            "orientation",
+            "ariaLabel"
         ],
         "styleTraits": [
             "position",
@@ -6559,6 +6611,9 @@ 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). */
@@ -6856,14 +6911,14 @@ const GLOBAL_POSITION = {
     [GlobalSlot.Footer]: PatternGlobalPosition.After,
 };
 const ROUTE = /^\/(?:(?:[a-z0-9]+(?:-[a-z0-9]+)*|:[a-zA-Z_][a-zA-Z0-9_]*)(?:\/(?:[a-z0-9]+(?:-[a-z0-9]+)*|:[a-zA-Z_][a-zA-Z0-9_]*))*)?$/;
-const ROUTE_PARAM = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
+const ROUTE_PARAM$1 = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
 const isObject = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
 const isNonEmptyString = (v) => typeof v === 'string' && v.trim() !== '';
 const has = (table, key) => Object.prototype.hasOwnProperty.call(table, key);
 const at = (path, key) => (path ? `${path}.${key}` : key);
 /** The `:param` names of a route, in order. */
 function routeParams(route) {
-    return [...route.matchAll(ROUTE_PARAM)].map(m => m[1]);
+    return [...route.matchAll(ROUTE_PARAM$1)].map(m => m[1]);
 }
 class Collector {
     constructor() {
@@ -7430,6 +7485,21 @@ function navPages(root) {
     const source = links.length ? links : collectHeaderLinks(root);
     return source.filter(isPageLink).map(n => ({ label: textOf(n), route: String(prop(n, 'pageRoute')) }));
 }
+/** Where a phone menu's pages come from: the header's own page Links, else the studio's pages. */
+var NavPagesSource;
+(function (NavPagesSource) {
+    NavPagesSource["Header"] = "header";
+    NavPagesSource["Site"] = "site";
+    NavPagesSource["None"] = "none";
+})(NavPagesSource || (NavPagesSource = {}));
+/** The pages a phone menu lists: the header's (`navPages`), else `sitePages` — a hand-built header with no
+ *  page links still gets a working menu. */
+function phoneMenuPages(root, sitePages = []) {
+    const own = navPages(root);
+    if (own.length)
+        return { pages: own, source: NavPagesSource.Header };
+    return sitePages.length ? { pages: [...sitePages], source: NavPagesSource.Site } : { pages: [], source: NavPagesSource.None };
+}
 /** A hand-built header: every page Link outside a drawer. */
 function collectHeaderLinks(root) {
     const out = [];
@@ -7653,7 +7723,7 @@ function planNavShape(globals, shape, options = {}, navId) {
         throw new NavShapeError(`a phone menu cannot switch at "${at}"`);
     const kit = makeKit(out, root.id, options.newId);
     adoptRoles(root);
-    const pages = navPages(root);
+    const { pages } = phoneMenuPages(root, options.pages);
     const wantDrawer = shape !== NavShape.Bar;
     const wantBar = shape !== NavShape.Drawer;
     const wantMenuButton = shape === NavShape.Drawer;
@@ -7773,7 +7843,7 @@ function addBarItem(globals, options = {}) {
     if (kids.length >= BAR_ITEMS_MAX)
         return { globals: out, added: false };
     const linked = new Set(kids.filter(c => c.role === NavRole.BarItem).map(c => prop(c, 'pageRoute')));
-    const page = barPages(root, navPages(root), BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
+    const page = barPages(root, phoneMenuPages(root, options.pages).pages, BAR_ITEMS_MAX + 1).find(p => !linked.has(p.route))
         ?? { label: NAV_SHAPE_COPY.home, route: HOME_ROUTE };
     const item = barItem(makeKit(out, root.id, options.newId), kids.length, page);
     const more = kids.findIndex(c => c.role === NavRole.More);
@@ -7783,6 +7853,32 @@ function addBarItem(globals, options = {}) {
         kids.push(item);
     return { globals: out, added: true };
 }
+function barOf(globals) {
+    const out = clone$1(globals);
+    const b = find(out, NavRole.Bar);
+    return { out, kids: b ? (b.children ?? (b.children = [])) : null };
+}
+/**
+ * The bar's Items list "Remove" (board 2): the item goes, More included — refused below three items (Q2:
+ * 3–5), so the bar never shrinks into something a thumb cannot use. Input not mutated.
+ */
+function removeBarItem(globals, itemId) {
+    const { out, kids } = barOf(globals);
+    const i = kids ? kids.findIndex(c => c.id === itemId) : -1;
+    if (!kids || i < 0 || kids.length <= BAR_ITEMS_MIN)
+        return { globals: out, changed: false };
+    kids.splice(i, 1);
+    return { globals: out, changed: true };
+}
+/** The bar's Items list drag-to-reorder (board 2): item `from` moves to `to`. Input not mutated. */
+function moveBarItem(globals, from, to) {
+    const { out, kids } = barOf(globals);
+    if (!kids || from === to || from < 0 || to < 0 || from >= kids.length || to >= kids.length)
+        return { globals: out, changed: false };
+    const [item] = kids.splice(from, 1);
+    kids.splice(to, 0, item);
+    return { globals: out, changed: true };
+}
 
 /**
  * THE composer — a Site Plan in, ordinary IOX data out (design-system plan §6b, W1). Deterministic and
@@ -8266,6 +8362,8 @@ 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)
@@ -8355,6 +8453,71 @@ 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);
@@ -8512,6 +8675,54 @@ function composeSite(plan, context) {
         issues,
     };
 }
+// ── The site header on its own (CC1.1) ──────────────────────────────────────────────────────────
+/** The header pattern the Studio template stamps — and the builder palette's "Navigation bar". */
+const SITE_HEADER_PATTERN = 'nav.inline-cta';
+const ROUTE_PARAM = ':';
+const HOME_PATH = '/';
+const KEY_UNSAFE = /[^a-z0-9]+/gi;
+/** The pages a navigation links to: every page but Home (the brand links there) and template pages
+ *  (a `/work/:slug` route has no single address), in the studio's order. */
+function siteNavPages(pages) {
+    return pages.filter(p => !!p.route && !p.isHome && p.route !== HOME_PATH && !p.route.includes(ROUTE_PARAM));
+}
+function navPagePlans(pages) {
+    const used = new Set();
+    return pages.map((p, i) => {
+        let key = p.route.replace(KEY_UNSAFE, '-').replace(/^-+|-+$/g, '').toLowerCase() || `page-${i}`;
+        for (let n = 2; used.has(key); n++)
+            key = `${key}-${n}`;
+        used.add(key);
+        return { key, name: p.name, route: p.route, inNav: true, isHome: p.isHome === true, sections: [] };
+    });
+}
+/**
+ * The Studio template's header, composed for a studio that has no Site Plan — the builder palette's
+ * "Navigation bar". THE SAME pattern and the same composer as `composeSite`: the brand (the business name),
+ * one plain Link per navigation page, the call to action (W1.1's one dangling-link rule when the studio has
+ * no /contact page: an email to the business, else removed), and the pattern's phone shape. Pure.
+ */
+function composeNavHeader(input, options) {
+    if (!nonEmpty(options?.id))
+        throw new ComposeError('composeNavHeader needs the header id');
+    const pattern = patternById(SITE_HEADER_PATTERN);
+    const all = navPagePlans(input.pages);
+    const navRoutes = new Set(siteNavPages(input.pages).map(p => p.route));
+    const pages = all.map(p => ({ ...p, inNav: navRoutes.has(p.route) }));
+    const plan = { business: input.business, pages, dataSources: [], contentTypes: [] };
+    const email = nonEmpty(input.business.facts?.email) ? input.business.facts.email.trim() : null;
+    const issues = [];
+    const ctx = {
+        owner: GlobalSlot.Header, page: null, section: null, plan, year: 0, email, navPage: null, nextAlias: null,
+        placeholders: [], issues, routes: new Set(pages.map(p => p.route)),
+    };
+    const root = composePattern(pattern, options.id, ctx);
+    root.isGlobal = true;
+    root.globalPosition = pattern.global;
+    const shape = pattern.phoneMenu;
+    const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    return { header, issues };
+}
 
 /**
  * @vectoriox/iox-ui/generation-core — the shared, FRAMEWORK-FREE site-plan core (design-system plan
@@ -8529,5 +8740,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, 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 };
+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, NavPagesSource, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternOpens, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_HEADER_PATTERN, 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, composeNavHeader, composeSite, createSerializedNode, findNavRoot, moveBarItem, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, patternTakesBinding, phoneMenuPages, planFromTemplate, planNavShape, releasedLayoutDefaults, removeBarItem, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, siteNavPages, validateSitePlan, walkSerialized };
 //# sourceMappingURL=vectoriox-iox-ui-generation-core.mjs.map