@vectoriox/iox-ui 5.34.0 → 5.36.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 } 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 } 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
@@ -93,7 +93,7 @@ const SPEC_SITE_PLAN_SHAPE = {
     "section": {
         "pattern": "string — a non-global pattern id",
         "slots?": "{ [slot]: string } — the pattern's declared slots",
-        "binding?": "string — the list source a pattern's $binding repeater iterates (exactly when it has one)",
+        "binding?": "string — the list source a pattern's $binding repeater iterates (exactly when it has one); a $binding? pattern (faq.accordion) MAY take one — then its items come from that content",
         "without?": "string[] — the pattern's optional parts to leave out"
     },
     "globals": {
@@ -935,6 +935,51 @@ const SPEC_SITE_PATTERNS = {
                 }
             ]
         }
+    },
+    "faq.accordion": {
+        "family": "faq",
+        "label": "FAQ — questions that open",
+        "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": "FAQ"
+                        },
+                        {
+                            "t": "Heading",
+                            "es": "h2",
+                            "level": "h2",
+                            "slot": "title",
+                            "ph": "copy",
+                            "text": "Questions people ask"
+                        },
+                        {
+                            "t": "Container",
+                            "recipe": "accordion",
+                            "src": "$binding?",
+                            "ph": "copy"
+                        }
+                    ]
+                }
+            ]
+        }
     }
 };
 const SPEC_SITE_TEMPLATES = {
@@ -1205,7 +1250,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -1396,7 +1441,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -1588,7 +1633,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -1774,7 +1819,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -1818,7 +1863,9 @@ const NODE_BASELINES = {
         },
         "traits": [
             "htmlTag",
-            "colorScheme"
+            "colorScheme",
+            "multiple",
+            "defaultOn"
         ],
         "styleTraits": [
             "position",
@@ -1963,7 +2010,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -2154,7 +2201,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -2341,7 +2388,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -2530,7 +2577,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -2724,7 +2771,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -2913,7 +2960,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -3096,7 +3143,7 @@ const NODE_BASELINES = {
             "lineHeight": "0",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -3277,7 +3324,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -3456,7 +3503,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -3644,7 +3691,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -3821,7 +3868,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -4005,7 +4052,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -4049,7 +4096,9 @@ const NODE_BASELINES = {
         },
         "traits": [
             "source",
-            "limit"
+            "limit",
+            "multiple",
+            "defaultOn"
         ],
         "styleTraits": [
             "position",
@@ -4407,7 +4456,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -4717,7 +4766,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -4912,7 +4961,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -5111,7 +5160,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -5296,7 +5345,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -5481,7 +5530,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -5664,7 +5713,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -5852,7 +5901,7 @@ const NODE_BASELINES = {
             "lineHeight": "1.5",
             "letterSpacing": "0px",
             "textTransform": "none",
-            "textAlign": "left",
+            "textAlign": "start",
             "fontStyle": "normal",
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
@@ -6040,7 +6089,7 @@ const NEUTRAL_STYLE_PROPS = {
     "lineHeight": "1.5",
     "letterSpacing": "0px",
     "textTransform": "none",
-    "textAlign": "left",
+    "textAlign": "start",
     "fontStyle": "normal",
     "textDecoration": "none",
     "WebkitTextStrokeWidth": "0px",
@@ -6197,6 +6246,9 @@ var GlobalSlot;
 var PatternRecipe;
 (function (PatternRecipe) {
     PatternRecipe["Card"] = "card";
+    /** 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";
 })(PatternRecipe || (PatternRecipe = {}));
 /** A recipe node's `binds` keys → the part each binds (Card v2). */
 var CardBindTarget;
@@ -6227,6 +6279,8 @@ var PatternDirective;
 (function (PatternDirective) {
     /** A Repeater's source: the section's `binding`. */
     PatternDirective["Binding"] = "$binding";
+    /** The section MAY name a list `binding` (faq.accordion): with one, the recipe's items come from it. */
+    PatternDirective["OptionalBinding"] = "$binding?";
     /** `each`: one plain node per page of the plan that is in the navigation (`inNav`), in plan order —
      *  words and routes written in, editable on the canvas (W1.1). */
     PatternDirective["NavPages"] = "$navPages";
@@ -6271,6 +6325,10 @@ function patternOptionalParts(pattern) {
 function patternNeedsBinding(pattern) {
     return patternNodes(pattern).some(n => n.src === PatternDirective.Binding);
 }
+/** True when the pattern may take a section `binding` — it needs one, or names `$binding?` (CC2). */
+function patternTakesBinding(pattern) {
+    return patternNeedsBinding(pattern) || patternNodes(pattern).some(n => n.src === PatternDirective.OptionalBinding);
+}
 const IMAGE_TYPE = 'Image';
 /** The scopes whose ITEM a pattern's bound Images take their alt text from (an Image that names no `alt`
  *  of its own): `item` (the row of a `$binding` Repeater — the section's list), `route` or `next`. Each
@@ -6803,9 +6861,11 @@ function validatePages(c, list, types, sources) {
                     });
             }
             const binding = c.string(s, 'binding', sp, false);
-            if (patternNeedsBinding(pattern)) {
-                if (!binding)
-                    c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${patternId}" repeats the section's binding — name a list source`);
+            if (patternTakesBinding(pattern)) {
+                if (!binding) {
+                    if (patternNeedsBinding(pattern))
+                        c.add(SitePlanIssueCode.Binding, `${sp}.binding`, `"${patternId}" repeats the section's binding — name a list source`);
+                }
                 else {
                     const src = sources.get(binding);
                     if (!src)
@@ -7859,6 +7919,8 @@ const CARD_BINDS = {
  * through its title (`href` + `param`, the stretched link). Ids derive from the recipe's keys.
  */
 function composeRecipe(pn, id, repeater, ctx) {
+    if (pn.recipe === PatternRecipe.Accordion)
+        return composeAccordion(pn, id, ctx);
     if (pn.recipe !== PatternRecipe.Card)
         throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
     const layout = (pn.layout ?? CardLayout.Top);
@@ -7901,6 +7963,49 @@ function composeRecipe(pn, id, repeater, ctx) {
     }
     return card;
 }
+const REPEATER = 'Repeater';
+/**
+ * An Accordion (CC2) — the composite-core recipe stamped with this composer's factory. Manual (no section
+ * binding): three items whose questions and answers are placeholders the studio rewrites (`ph: 'copy'`), never
+ * invented answers. From content (the section names a list `binding` — R3's AI path): the root is a Repeater
+ * over that list holding ONE template item, its question and answer bound to the content type's first
+ * short-text and first long-text fields (`pickAccordionAutoBinds`, the builder switch's rule), limit 20.
+ */
+function composeAccordion(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 isRoot = spec.key === AccordionRole.Accordion;
+        const type = isRoot && binding ? REPEATER : spec.type;
+        return create(isRoot ? id : `${id}-${spec.key}`, type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null);
+    };
+    const root = buildAccordionRecipe(factory, binding ? { items: ACCORDION_WORDS.slice(0, 1) } : {});
+    if (!binding) {
+        if (pn.ph === PatternPlaceholder.Copy) {
+            for (const item of accordionItems(root)) {
+                for (const part of [accordionQuestionOf(item), accordionAnswerOf(item)]) {
+                    if (part)
+                        ctx.placeholders.push({ nodeId: part.id, owner: ctx.owner, kind: PlaceholderKind.Copy, text: String(part.props?.[ACCORDION_BIND_PROP] ?? '') });
+                }
+            }
+        }
+        return root;
+    }
+    const source = ctx.plan.dataSources.find(d => d.alias === binding);
+    const type = source && 'contentType' in source ? ctx.plan.contentTypes.find(t => t.name === source.contentType) : undefined;
+    const picks = pickAccordionAutoBinds((type?.fields ?? []).map(f => ({ name: f.name, type: f.type, controller: f.controller })));
+    if (!picks.question || !picks.answer) {
+        throw new ComposeError(`${id}: "${binding}" has no short-text field for the question and long-text field for the answer`);
+    }
+    addBinding(root, { prop: 'source', source: binding, path: '' });
+    setProp(root, 'limit', ACCORDION_CONTENT_LIMIT);
+    const [template] = accordionItems(root);
+    delete template.itemKey;
+    addBinding(accordionQuestionOf(template), { prop: ACCORDION_BIND_PROP, source: binding, path: picks.question });
+    addBinding(accordionAnswerOf(template), { prop: ACCORDION_BIND_PROP, source: binding, path: picks.answer });
+    return root;
+}
 function composePattern(pattern, id, ctx) {
     if (pattern.node.each)
         throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
@@ -8024,5 +8129,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, 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, 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