@vectoriox/iox-ui 5.30.0 → 5.31.0

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

@@ -1,5 +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';
 
 // 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
@@ -429,34 +430,21 @@ const SPEC_SITE_PATTERNS = {
                     },
                     "c": [
                         {
-                            "t": "LinkedContainer",
-                            "es": "card",
+                            "t": "Container",
+                            "recipe": "card",
+                            "layout": "top",
+                            "parts": {
+                                "badge": false,
+                                "actions": false
+                            },
                             "href": "/work/:slug",
                             "param": "item.slug",
-                            "lay": {
-                                "display": "flex",
-                                "flexDirection": "column",
-                                "gap": "12px"
-                            },
-                            "c": [
-                                {
-                                    "t": "Image",
-                                    "es": "media",
-                                    "bind": "item.cover",
-                                    "aspect": "4 / 3"
-                                },
-                                {
-                                    "t": "Heading",
-                                    "es": "h3",
-                                    "level": "h3",
-                                    "bind": "item.title"
-                                },
-                                {
-                                    "t": "Text",
-                                    "es": "small",
-                                    "bind": "item.summary"
-                                }
-                            ]
+                            "binds": {
+                                "image": "item.cover",
+                                "eyebrow": "item.year",
+                                "title": "item.title",
+                                "text": "item.summary"
+                            }
                         }
                     ]
                 }
@@ -1923,7 +1911,11 @@ const NODE_BASELINES = {
     "Heading": {
         "props": {
             "content": "Heading",
-            "level": "h2"
+            "level": "h2",
+            "linkType": "none",
+            "url": "",
+            "pageRoute": "",
+            "target": "_self"
         },
         "styleProps": {
             "position": "static",
@@ -1972,6 +1964,7 @@ const NODE_BASELINES = {
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
+            "maxLines": "none",
             "margin": "0px 0px 0px 0px",
             "padding": "0px 0px 0px 0px",
             "borderWidth": "0px",
@@ -2011,7 +2004,11 @@ const NODE_BASELINES = {
         },
         "traits": [
             "content",
-            "level"
+            "level",
+            "linkType",
+            "url",
+            "pageRoute",
+            "target"
         ],
         "styleTraits": [
             "position",
@@ -2061,6 +2058,7 @@ const NODE_BASELINES = {
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
+            "maxLines",
             "margin",
             "padding",
             "borderWidth",
@@ -2158,6 +2156,7 @@ const NODE_BASELINES = {
             "textDecoration": "none",
             "WebkitTextStrokeWidth": "0px",
             "WebkitTextStrokeColor": "transparent",
+            "maxLines": "none",
             "margin": "0px 0px 0px 0px",
             "padding": "10px",
             "borderWidth": "0px",
@@ -2247,6 +2246,7 @@ const NODE_BASELINES = {
             "_sep_stroke",
             "WebkitTextStrokeWidth",
             "WebkitTextStrokeColor",
+            "maxLines",
             "margin",
             "padding",
             "borderWidth",
@@ -6198,6 +6198,23 @@ var GlobalSlot;
     GlobalSlot["Footer"] = "footer";
 })(GlobalSlot || (GlobalSlot = {}));
 
+/** The composite-core recipes a pattern may stamp (`recipe`). */
+var PatternRecipe;
+(function (PatternRecipe) {
+    PatternRecipe["Card"] = "card";
+})(PatternRecipe || (PatternRecipe = {}));
+/** A recipe node's `binds` keys → the part each binds (Card v2). */
+var CardBindTarget;
+(function (CardBindTarget) {
+    CardBindTarget["Image"] = "image";
+    CardBindTarget["Eyebrow"] = "eyebrow";
+    CardBindTarget["Title"] = "title";
+    CardBindTarget["Text"] = "text";
+})(CardBindTarget || (CardBindTarget = {}));
+/** Every binding path a node reads: its own `bind`, and a recipe's `binds`. */
+function nodeBindPaths(node) {
+    return [node.bind, ...Object.values(node.binds ?? {})].filter((p) => !!p);
+}
 var PatternGlobalPosition;
 (function (PatternGlobalPosition) {
     PatternGlobalPosition["Before"] = "before";
@@ -6268,6 +6285,10 @@ function altSourceScopes(pattern) {
     const visit = (n) => {
         if (n.t === IMAGE_TYPE && n.bind && n.alt === undefined)
             scopes.add(n.bind.split('.')[0]);
+        // A Card v2's bound image takes its alt from the same item.
+        const cardImage = n.recipe === PatternRecipe.Card ? n.binds?.[CardBindTarget.Image] : undefined;
+        if (cardImage)
+            scopes.add(cardImage.split('.')[0]);
         for (const child of n.c ?? [])
             visit(child);
     };
@@ -6278,7 +6299,7 @@ function altSourceScopes(pattern) {
 function patternScopes(pattern) {
     const scopes = new Set();
     for (const n of patternNodes(pattern)) {
-        for (const path of [n.bind, n.alt, n.param, n.src]) {
+        for (const path of [...nodeBindPaths(n), n.alt, n.param, n.src]) {
             if (path && !path.startsWith('$'))
                 scopes.add(path.split('.')[0]);
         }
@@ -6940,6 +6961,8 @@ const LINK_SLOTS = {
     Link: { url: 'url' },
     LinkedContainer: { url: 'url' },
     ButtonBlock: { url: 'href', fixed: { tag: 'a' } },
+    // A Card v2 links as a whole through its TITLE (the stretched link): the Heading carries the link.
+    Heading: { url: 'url' },
 };
 /** What a linked box becomes when its link has nowhere to go: the same box, unlinked. */
 const UNLINKED_TYPE = { LinkedContainer: 'Container' };
@@ -7187,6 +7210,8 @@ function composeChildren(pn, id, repeater, ctx) {
 function composeNode(pn, id, repeater, ctx) {
     if (pn.optional && ctx.section?.without?.includes(pn.optional))
         return null;
+    if (pn.recipe)
+        return composeRecipe(pn, id, repeater, ctx);
     const words = chooseText(pn, ctx);
     const fate = danglingFate(pn, ctx);
     if (fate === DanglingFate.Remove) {
@@ -7308,6 +7333,61 @@ function composeNode(pn, id, repeater, ctx) {
         composeForm(node, pn, id, ctx);
     return node;
 }
+/** A Card v2 `binds` key → the part it binds and that part's bound prop. */
+const CARD_BINDS = {
+    [CardBindTarget.Image]: { role: CardRole.Media, prop: 'src' },
+    [CardBindTarget.Eyebrow]: { role: CardRole.Eyebrow, prop: 'content' },
+    [CardBindTarget.Title]: { role: CardRole.Title, prop: 'content' },
+    [CardBindTarget.Text]: { role: CardRole.Text, prop: 'content' },
+};
+/**
+ * A `recipe` node: the composite-core recipe, stamped whole with THIS composer's node factory — the same
+ * recipe the builder's palette stamps with its own — then bound part by part, and linked as a whole card
+ * 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.Card)
+        throw new ComposeError(`${id}: no recipe "${pn.recipe}" in composite-core`);
+    const layout = (pn.layout ?? CardLayout.Top);
+    if (!CARD_LAYOUTS.includes(layout))
+        throw new ComposeError(`${id}: a card has no layout "${pn.layout}"`);
+    for (const part of Object.keys(pn.parts ?? {})) {
+        if (!CARD_PARTS.includes(part))
+            throw new ComposeError(`${id}: a card has no part "${part}"`);
+    }
+    const factory = (spec) => create(spec.key === CardRole.Card ? id : `${id}-${spec.key}`, spec.type, { ...(spec.props ?? {}) }, spec.elementStyle ?? null);
+    const card = buildCardRecipe(factory, { layout, parts: pn.parts });
+    for (const [key, path] of Object.entries(pn.binds ?? {})) {
+        const target = CARD_BINDS[key];
+        if (!target)
+            throw new ComposeError(`${id}: a card cannot bind "${key}"`);
+        const part = findByRole(card, target.role);
+        if (!part)
+            throw new ComposeError(`${id}: "${key}" binds a part the card leaves out`);
+        const node = target.role === CardRole.Media ? part.children?.find(c => c.type === IMAGE) : part;
+        if (!node)
+            throw new ComposeError(`${id}: the card's media holds no image`);
+        addBinding(node, { prop: target.prop, ...resolveScoped(path, repeater, ctx, id) });
+        if (node.type === IMAGE)
+            addBinding(node, { prop: 'alt', ...altBinding({ ...pn, t: IMAGE, bind: path, alt: undefined }, repeater, ctx, id) });
+    }
+    const fate = danglingFate({ ...pn, t: 'Heading' }, ctx);
+    const title = findByRole(card, CardRole.Title);
+    if (pn.href && !fate)
+        writePageLink(title, pn.href);
+    else if (fate) {
+        if (fate === DanglingFate.Email)
+            writeExternalLink(title, `${MAILTO}${ctx.email}`);
+        reportDangling(fate === DanglingFate.Remove ? DanglingFate.Unlink : fate, pn, id, undefined, ctx);
+    }
+    if (pn.param && !fate) {
+        const names = pn.href ? routeParams(pn.href) : [];
+        if (names.length !== 1)
+            throw new ComposeError(`${id}: "param" needs an href with one :param`);
+        addBinding(title, { prop: `routeParam:${names[0]}`, ...resolveScoped(pn.param, repeater, ctx, id) });
+    }
+    return card;
+}
 function composePattern(pattern, id, ctx) {
     if (pattern.node.each)
         throw new ComposeError(`${id}: a pattern's root cannot be stamped per page`);
@@ -7424,5 +7504,5 @@ function composeSite(plan, context) {
  * Generated bundle index. Do not edit.
  */
 
-export { BASELINE_ROLES, BaselineRole, BindScope, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, FACT_KEYS, GlobalSlot, NEUTRAL_STYLE_PROPS, NODE_BASELINES, PatternDirective, PatternGlobalPosition, PatternPlaceholder, 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, altSourceScopes, assertStyleSlots, assertValidSitePlan, composeSite, createSerializedNode, nextSourceOf, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
+export { BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, FACT_KEYS, GlobalSlot, NEUTRAL_STYLE_PROPS, NODE_BASELINES, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, 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, altSourceScopes, assertStyleSlots, assertValidSitePlan, composeSite, createSerializedNode, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
 //# sourceMappingURL=vectoriox-iox-ui-generation-core.mjs.map