@vectoriox/iox-ui 5.30.0 → 5.31.0

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

@@ -0,0 +1,698 @@
+import { readOwnedTrait, writeOwnedTrait, elementStyleById, switchElementStyle, LinkType } from '@vectoriox/iox-ui/design-core';
+
+const usesTraits = (node) => Array.isArray(node.traits);
+/** A content trait's value — `traits[].default` on a builder node, `props[name]` on a saved one. */
+function readProp(node, name) {
+    return usesTraits(node) ? node.traits.find(t => t.name === name)?.default : node.props?.[name];
+}
+/** Write a content trait. False when a builder node has no such trait (the value would be dropped). */
+function writeProp(node, name, value) {
+    if (usesTraits(node)) {
+        const trait = node.traits.find(t => t.name === name);
+        if (!trait)
+            return false;
+        trait.default = value;
+        return true;
+    }
+    node.props = { ...(node.props ?? {}), [name]: value };
+    return true;
+}
+/** A base style value (the node's own, either shape). */
+function readStyle(node, name) {
+    return readOwnedTrait(node, { trait: name });
+}
+/** Write base style values; returns the names the node has no slot for (a builder node drops them). */
+function writeStyles(node, values) {
+    const missing = [];
+    for (const [name, value] of Object.entries(values)) {
+        if (!writeOwnedTrait(node, { trait: name }, value))
+            missing.push(name);
+    }
+    return missing;
+}
+/** Set style values in one breakpoint layer (`responsive[bp].styleProps`, the shape both renderers'
+ *  shared `planResponsiveRules` reads). */
+function writeLayerStyles(node, breakpoint, values) {
+    const responsive = { ...(node.responsive ?? {}) };
+    const layer = { ...(responsive[breakpoint] ?? {}) };
+    layer.styleProps = { ...(layer.styleProps ?? {}), ...values };
+    responsive[breakpoint] = layer;
+    node.responsive = responsive;
+}
+/** Remove style keys from one breakpoint layer; an emptied layer (and an emptied map) is dropped. */
+function clearLayerStyles(node, breakpoint, names) {
+    const layer = node.responsive?.[breakpoint];
+    if (!layer?.styleProps)
+        return;
+    const styleProps = { ...layer.styleProps };
+    for (const name of names)
+        delete styleProps[name];
+    const next = { ...layer };
+    if (Object.keys(styleProps).length)
+        next.styleProps = styleProps;
+    else
+        delete next.styleProps;
+    const responsive = { ...(node.responsive ?? {}) };
+    if (Object.keys(next).length)
+        responsive[breakpoint] = next;
+    else
+        delete responsive[breakpoint];
+    node.responsive = Object.keys(responsive).length ? responsive : undefined;
+}
+/** A breakpoint layer's own value for one style key. */
+function readLayerStyle(node, breakpoint, name) {
+    return node.responsive?.[breakpoint]?.styleProps?.[name];
+}
+/** Depth-first: `node`, then every descendant. */
+function walkComposite(node, visit, parent = null) {
+    visit(node, parent);
+    for (const child of node.children ?? [])
+        walkComposite(child, visit, node);
+}
+/**
+ * The first descendant of `root` playing `role`. Never descends into a NESTED composite of the same
+ * root role (a card inside a card's content keeps its own parts).
+ */
+function findByRole(root, role) {
+    for (const child of root.children ?? []) {
+        if (child.role === role)
+            return child;
+        if (child.role === root.role && root.role)
+            continue;
+        const hit = findByRole(child, role);
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+/** The node's parent inside `root`, or null. */
+function parentInComposite(root, node) {
+    for (const child of root.children ?? []) {
+        if (child === node)
+            return root;
+        const hit = parentInComposite(child, node);
+        if (hit)
+            return hit;
+    }
+    return null;
+}
+/** Detach `node` from its parent inside `root`. True when it was found. */
+function removeFromComposite(root, node) {
+    const parent = parentInComposite(root, node);
+    if (!parent?.children)
+        return false;
+    parent.children.splice(parent.children.indexOf(node), 1);
+    return true;
+}
+
+/**
+ * BADGE + CHIP (composite T25; complex-components board 8). A Badge is a Container wearing
+ * `badge-<tone>` › Icon + Text; its TONE is its element style, so Badge ▸ Tone writes the style and
+ * nothing else, and a re-theme restyles every badge. A Chip is the outlined static style only (no
+ * behaviour until the K5 Data view). Inside a card the badge plays `card.badge`; anywhere else it is
+ * recognised by its style.
+ */
+var BadgeTone;
+(function (BadgeTone) {
+    BadgeTone["Neutral"] = "neutral";
+    BadgeTone["Success"] = "success";
+    BadgeTone["Warning"] = "warning";
+    BadgeTone["Accent"] = "accent";
+})(BadgeTone || (BadgeTone = {}));
+const BADGE_TONES = [BadgeTone.Neutral, BadgeTone.Success, BadgeTone.Warning, BadgeTone.Accent];
+/** The tone's element style (`badge-<tone>`, the contract's). */
+function badgeStyleId(tone) {
+    return `badge-${tone}`;
+}
+const CHIP_STYLE = 'chip';
+/** The glyph a fresh badge of each tone shows (the board's tone grid). */
+const BADGE_TONE_ICONS = {
+    [BadgeTone.Neutral]: 'ph ph-tag',
+    [BadgeTone.Success]: 'ph ph-check',
+    [BadgeTone.Warning]: 'ph ph-warning',
+    [BadgeTone.Accent]: 'ph ph-sparkle',
+};
+const CHIP_ICON = 'ph ph-tag';
+const TONE_BY_STYLE = new Map(BADGE_TONES.map(tone => [badgeStyleId(tone), tone]));
+/** The badge tone a node wears, or null when it is no badge. */
+function badgeToneOf(node) {
+    return TONE_BY_STYLE.get(node?.elementStyle ?? '') ?? null;
+}
+/** True for a node wearing a badge tone or the chip style — the pills (their Icon reads their ink). */
+function isPillNode(node) {
+    return badgeToneOf(node) !== null || node?.elementStyle === CHIP_STYLE;
+}
+/**
+ * Badge ▸ Tone: move the badge to another tone's element style (an edit the author made to the old
+ * tone's look is kept, design-core's switch rule). Nothing else changes — not the icon, not the words.
+ */
+function setBadgeTone(node, tone, baseline = {}) {
+    const current = node.elementStyle ?? null;
+    const next = badgeStyleId(tone);
+    if (!badgeToneOf(node) || current === next || !elementStyleById(next))
+        return false;
+    const result = switchElementStyle(node, current, next, baseline);
+    if (result.applied)
+        node.elementStyle = next;
+    return result.applied;
+}
+/** A pill's box: hugs its words, never stretches in a column. */
+const PILL_BASE = {
+    display: 'inline-flex', alignItems: 'center', gap: '5px', width: 'auto', minHeight: 'auto', alignSelf: 'flex-start', lineHeight: '1.4',
+};
+const PILL_ICON = { fontSize: '1em' };
+const PILL_WORDS = { width: 'auto', minHeight: 'auto', padding: '0px 0px 0px 0px', margin: '0px 0px 0px 0px' };
+/** The pill's words inherit the pill's type and ink (the contract's inherit-everything text style). */
+const PILL_WORDS_STYLE = 'button-label';
+function buildPill(create, elementStyle, text, icon, key) {
+    const pill = create({ key, type: 'Container', elementStyle });
+    writeStyles(pill, PILL_BASE);
+    const glyph = create({ key: `${key}-icon`, type: 'Icon', props: { iconClass: icon }, elementStyle: 'icon' });
+    writeStyles(glyph, PILL_ICON);
+    const words = create({ key: `${key}-text`, type: 'Text', props: { content: text, tag: 'span' }, elementStyle: PILL_WORDS_STYLE });
+    writeStyles(words, PILL_WORDS);
+    pill.children = [glyph, words];
+    return pill;
+}
+/** A fresh Badge: Container `badge-<tone>` › Icon + Text. */
+function buildBadge(create, options = {}) {
+    const tone = options.tone ?? BadgeTone.Accent;
+    const badge = buildPill(create, badgeStyleId(tone), options.text ?? 'New', options.icon ?? BADGE_TONE_ICONS[tone], options.key ?? 'badge');
+    badge.label = 'Badge';
+    return badge;
+}
+/** A fresh Chip: Container `chip` › Icon + Text (outlined, static). */
+function buildChip(create, options = {}) {
+    const chip = buildPill(create, CHIP_STYLE, options.text ?? 'Chip', options.icon ?? CHIP_ICON, options.key ?? 'chip');
+    chip.label = 'Chip';
+    return chip;
+}
+
+/**
+ * CARD v2 (composite T23; complex-components board 8, APPROVED 2026-10-20). Not a component: a recipe of
+ * ordinary nodes, each part carrying a role, so every part is selectable on the canvas, in the layer tree
+ * and the breadcrumb, wears its own element style and is edited on its own (R2). No runtime and no design
+ * state — nothing is hidden at rest.
+ *
+ *   Container `card`                    role card
+ *   ├─ Container `box`                  role card.media      (optional: Image)
+ *   │   ├─ Image `media`
+ *   │   └─ Container `badge-accent`     role card.badge      (optional) › Icon + Text
+ *   └─ Container `box`                  role card.content    (locked)
+ *       ├─ Text `eyebrow`               role card.eyebrow    (optional)
+ *       ├─ Heading h3 `h3`              role card.title      (locked — the card's link when linked)
+ *       ├─ Text `body`                  role card.text       (optional)
+ *       └─ Container `box`              role card.actions    (optional) › ButtonBlock primary + ghost
+ *
+ * One recipe for every consumer: the builder's palette (its `createConfig`), generation-core's composer
+ * (its `createSerializedNode`) and the site build — each passes its own node factory.
+ */
+var CardRole;
+(function (CardRole) {
+    CardRole["Card"] = "card";
+    CardRole["Media"] = "card.media";
+    CardRole["Badge"] = "card.badge";
+    CardRole["Content"] = "card.content";
+    CardRole["Eyebrow"] = "card.eyebrow";
+    CardRole["Title"] = "card.title";
+    CardRole["Text"] = "card.text";
+    CardRole["Actions"] = "card.actions";
+})(CardRole || (CardRole = {}));
+/** The optional parts — Card ▸ Parts, one switch each, in the board's order. Title and Content are locked. */
+var CardPart;
+(function (CardPart) {
+    CardPart["Media"] = "media";
+    CardPart["Badge"] = "badge";
+    CardPart["Eyebrow"] = "eyebrow";
+    CardPart["Text"] = "text";
+    CardPart["Actions"] = "actions";
+})(CardPart || (CardPart = {}));
+const CARD_PARTS = [CardPart.Media, CardPart.Badge, CardPart.Eyebrow, CardPart.Text, CardPart.Actions];
+const CARD_PART_ROLE = {
+    [CardPart.Media]: CardRole.Media,
+    [CardPart.Badge]: CardRole.Badge,
+    [CardPart.Eyebrow]: CardRole.Eyebrow,
+    [CardPart.Text]: CardRole.Text,
+    [CardPart.Actions]: CardRole.Actions,
+};
+/** Card ▸ Layout — a preset, never a stored trait: `applyCardLayout` writes the card's layout styles. */
+var CardLayout;
+(function (CardLayout) {
+    CardLayout["Top"] = "top";
+    CardLayout["Side"] = "side";
+    CardLayout["Overlay"] = "overlay";
+    CardLayout["Compact"] = "compact";
+})(CardLayout || (CardLayout = {}));
+const CARD_LAYOUTS = [CardLayout.Top, CardLayout.Side, CardLayout.Overlay, CardLayout.Compact];
+/** What Card ▸ Layout shows once the author has changed the layout styles by hand. */
+const CARD_LAYOUT_CUSTOM = 'custom';
+const CARD_WORDS = {
+    eyebrow: 'Category',
+    title: 'Card title',
+    text: 'One or two sentences about this item.',
+    primary: 'Learn more',
+    secondary: 'Save',
+    badge: 'New',
+};
+/** The breakpoint whose layer stacks an "Image side" card (Breakpoint.Mobile, ≤767px). */
+const CARD_STACK_BREAKPOINT = 'mobile';
+var Type;
+(function (Type) {
+    Type["Container"] = "Container";
+    Type["Image"] = "Image";
+    Type["Heading"] = "Heading";
+    Type["Text"] = "Text";
+    Type["Icon"] = "Icon";
+    Type["ButtonBlock"] = "ButtonBlock";
+})(Type || (Type = {}));
+var Style;
+(function (Style) {
+    Style["Card"] = "card";
+    Style["Box"] = "box";
+    Style["Media"] = "media";
+    Style["Eyebrow"] = "eyebrow";
+    Style["Title"] = "h3";
+    Style["Body"] = "body";
+    Style["Label"] = "button-label";
+    Style["Primary"] = "button-primary";
+    Style["Ghost"] = "button-ghost";
+    Style["Icon"] = "icon";
+    Style["Scrim"] = "media-scrim";
+})(Style || (Style = {}));
+var Scheme;
+(function (Scheme) {
+    Scheme["Default"] = "default";
+    Scheme["Inverse"] = "inverse";
+})(Scheme || (Scheme = {}));
+const COLOR_SCHEME = 'colorScheme';
+const LINK_TYPE = 'linkType';
+const SAVE_ICON = 'ph ph-bookmark-simple';
+/** A value an element style writes — read from the contract, never retyped. */
+const styleValue = (style, trait) => String(elementStyleById(style)?.base[trait] ?? '');
+const CARD_PAD = styleValue(Style.Card, 'padding');
+const IMAGE_RADIUS = styleValue(Style.Media, 'borderRadius');
+const TITLE_SIZE = styleValue(Style.Title, 'fontSize');
+const LEAD_SIZE = 'var(--iox-size-lead)';
+const ZERO_BOX = '0px 0px 0px 0px';
+/** What every card part holds in every layout — the recipe's box. */
+const CARD_BASE = {
+    [CardRole.Card]: { display: 'flex', gap: '14px', width: '100%', height: '100%', minWidth: '0px', overflow: 'hidden', position: 'relative' },
+    [CardRole.Media]: { display: 'block', width: '100%', minHeight: 'auto', flexGrow: '0', flexShrink: '0' },
+    [CardRole.Content]: { display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', minWidth: '0px', minHeight: 'auto' },
+    [CardRole.Eyebrow]: { margin: ZERO_BOX, padding: ZERO_BOX, minHeight: 'auto' },
+    [CardRole.Title]: { margin: ZERO_BOX },
+    [CardRole.Text]: { margin: ZERO_BOX, padding: ZERO_BOX, minHeight: 'auto' },
+    // Buttons pinned to the bottom (board 8 Q: equal heights + buttons pinned): the content column grows,
+    // and the row's auto top margin takes the slack.
+    [CardRole.Actions]: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '8px', margin: 'auto 0px 0px 0px', padding: '6px 0px 0px 0px', width: '100%', minHeight: 'auto' },
+};
+const IMAGE_BASE = { display: 'block', width: '100%', maxWidth: '100%' };
+/** A button's label and a pill's words: inherit the type and ink of what holds them. */
+const LABEL_BASE = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX, margin: ZERO_BOX };
+const INLINE_ICON = { fontSize: '1em' };
+const IN_FLOW = { position: 'relative', top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' };
+const GROWING_CONTENT = { position: 'static', flexGrow: '1', flexShrink: '1', flexBasis: '0%', padding: ZERO_BOX };
+const LAYOUTS = {
+    [CardLayout.Top]: {
+        card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-start', minHeight: 'auto', padding: CARD_PAD },
+        media: { ...IN_FLOW, flexBasis: 'auto' },
+        image: { aspectRatio: '4 / 3', height: 'auto', minHeight: 'auto', borderRadius: IMAGE_RADIUS },
+        content: GROWING_CONTENT, contentStyle: Style.Box, contentScheme: Scheme.Default,
+        title: { fontSize: TITLE_SIZE },
+        badgeOnMedia: true,
+    },
+    [CardLayout.Side]: {
+        card: { flexDirection: 'row', alignItems: 'stretch', justifyContent: 'flex-start', minHeight: 'auto', padding: CARD_PAD },
+        media: { ...IN_FLOW, flexBasis: '42%' },
+        image: { aspectRatio: 'auto', height: '100%', minHeight: '180px', borderRadius: IMAGE_RADIUS },
+        content: GROWING_CONTENT, contentStyle: Style.Box, contentScheme: Scheme.Default,
+        title: { fontSize: TITLE_SIZE },
+        badgeOnMedia: true,
+        stack: {
+            card: { flexDirection: 'column' },
+            media: { flexBasis: 'auto' },
+            image: { aspectRatio: '4 / 3', height: 'auto', minHeight: 'auto' },
+        },
+    },
+    [CardLayout.Overlay]: {
+        card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-end', minHeight: '340px', padding: ZERO_BOX },
+        media: { position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', flexBasis: 'auto' },
+        image: { aspectRatio: 'auto', height: '100%', minHeight: 'auto', borderRadius: '0px' },
+        content: { position: 'relative', flexGrow: '0', flexShrink: '0', flexBasis: 'auto', padding: `72px ${CARD_PAD} ${CARD_PAD} ${CARD_PAD}` },
+        contentStyle: Style.Scrim, contentScheme: Scheme.Inverse,
+        title: { fontSize: TITLE_SIZE },
+        badgeOnMedia: false,
+    },
+    [CardLayout.Compact]: {
+        card: { flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', minHeight: 'auto', padding: CARD_PAD },
+        media: { ...IN_FLOW, flexBasis: '72px' },
+        image: { aspectRatio: '1 / 1', height: 'auto', minHeight: 'auto', borderRadius: IMAGE_RADIUS },
+        content: GROWING_CONTENT, contentStyle: Style.Box, contentScheme: Scheme.Default,
+        title: { fontSize: LEAD_SIZE },
+        badgeOnMedia: false,
+        partsOff: [CardPart.Text, CardPart.Actions],
+    },
+};
+const STACK_KEYS = {
+    card: Object.keys(LAYOUTS[CardLayout.Side].stack.card),
+    media: Object.keys(LAYOUTS[CardLayout.Side].stack.media),
+    image: Object.keys(LAYOUTS[CardLayout.Side].stack.image),
+};
+function make(create, key, type, role, elementStyle, props = {}, label) {
+    const node = create({ key, type, props, elementStyle });
+    if (role)
+        node.role = role;
+    if (label)
+        node.label = label;
+    writeStyles(node, role ? CARD_BASE[role] ?? {} : {});
+    return node;
+}
+function buttonLabel(create, key, words) {
+    const label = make(create, key, Type.Text, null, Style.Label, { content: words, tag: 'span' });
+    writeStyles(label, LABEL_BASE);
+    return label;
+}
+/** Each optional part (and the locked title) as the recipe builds it. */
+const PART_BUILDERS = {
+    [CardPart.Media]: (create) => {
+        const media = make(create, 'media', Type.Container, CardRole.Media, Style.Box, {}, 'Media');
+        const image = make(create, 'image', Type.Image, null, Style.Media, { src: '', alt: '' });
+        writeStyles(image, IMAGE_BASE);
+        media.children = [image];
+        return media;
+    },
+    [CardPart.Badge]: (create, words, tone) => {
+        const badge = buildBadge(create, { tone, text: words.badge, key: 'badge' });
+        badge.role = CardRole.Badge;
+        badge.label = 'Badge';
+        return badge;
+    },
+    [CardPart.Eyebrow]: (create, words) => make(create, 'eyebrow', Type.Text, CardRole.Eyebrow, Style.Eyebrow, { content: words.eyebrow, tag: 'p' }, 'Eyebrow'),
+    [CardPart.Text]: (create, words) => make(create, 'text', Type.Text, CardRole.Text, Style.Body, { content: words.text, tag: 'p' }, 'Text'),
+    [CardPart.Actions]: (create, words) => {
+        const actions = make(create, 'actions', Type.Container, CardRole.Actions, Style.Box, {}, 'Buttons');
+        const primary = make(create, 'primary', Type.ButtonBlock, null, Style.Primary);
+        primary.children = [buttonLabel(create, 'primary-label', words.primary)];
+        const ghost = make(create, 'secondary', Type.ButtonBlock, null, Style.Ghost);
+        const icon = make(create, 'secondary-icon', Type.Icon, null, Style.Icon, { iconClass: SAVE_ICON });
+        writeStyles(icon, INLINE_ICON);
+        ghost.children = [icon, buttonLabel(create, 'secondary-label', words.secondary)];
+        actions.children = [primary, ghost];
+        return actions;
+    },
+};
+function buildTitle(create, words) {
+    return make(create, 'title', Type.Heading, CardRole.Title, Style.Title, { content: words.title, level: 'h3', [LINK_TYPE]: LinkType.None }, 'Title');
+}
+/** A fresh Card v2: every part a node with its role and element style, laid out by `options.layout`. */
+function buildCardRecipe(create, options = {}) {
+    const words = { ...CARD_WORDS, ...(options.words ?? {}) };
+    const tone = options.badgeTone ?? BadgeTone.Accent;
+    const on = (part) => options.parts?.[part] !== false;
+    const card = make(create, 'card', Type.Container, CardRole.Card, Style.Card, {}, 'Card');
+    const content = make(create, 'content', Type.Container, CardRole.Content, Style.Box, {}, 'Content');
+    content.children = [
+        ...(on(CardPart.Eyebrow) ? [PART_BUILDERS[CardPart.Eyebrow](create, words, tone)] : []),
+        buildTitle(create, words),
+        ...(on(CardPart.Text) ? [PART_BUILDERS[CardPart.Text](create, words, tone)] : []),
+        ...(on(CardPart.Actions) ? [PART_BUILDERS[CardPart.Actions](create, words, tone)] : []),
+    ];
+    card.children = [...(on(CardPart.Media) ? [PART_BUILDERS[CardPart.Media](create, words, tone)] : []), content];
+    if (on(CardPart.Badge))
+        placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone), true);
+    applyCardLayout(card, options.layout ?? CardLayout.Top, options);
+    return card;
+}
+/** True when `node` is a Card v2 root. */
+function isCardRoot(node) {
+    return node?.role === CardRole.Card;
+}
+/** The Card a part belongs to: the nearest ancestor (or the node itself) playing `card`. `path` = the
+ *  node's ancestors, root first. */
+function cardRootOf(node, path) {
+    if (isCardRoot(node))
+        return node;
+    for (let i = path.length - 1; i >= 0; i--)
+        if (isCardRoot(path[i]))
+            return path[i];
+    return null;
+}
+/** Card ▸ Parts: which optional parts the card holds now. */
+function cardPartsOf(card) {
+    return Object.fromEntries(CARD_PARTS.map(part => [part, !!findByRole(card, CARD_PART_ROLE[part])]));
+}
+const imageOf = (media) => media?.children?.find(c => c.type === Type.Image);
+/** Put the badge where the layout says: the Media's top corner, or the head of the content column
+ *  (Image behind text, Compact, or no Media at all). */
+function placeBadge(card, badge, onMedia) {
+    const media = findByRole(card, CardRole.Media);
+    const content = findByRole(card, CardRole.Content);
+    removeFromComposite(card, badge);
+    if (onMedia && media)
+        media.children = [...(media.children ?? []), badge];
+    else if (content)
+        content.children = [badge, ...(content.children ?? [])];
+}
+function writeScheme(node, scheme) {
+    writeProp(node, COLOR_SCHEME, scheme);
+}
+/** Write one role's layout values from a spec (base + layers). */
+function applyPartLayout(card, spec, part, baseline) {
+    switch (part.role) {
+        case CardRole.Card:
+            writeStyles(part, { ...CARD_BASE[CardRole.Card], ...spec.card });
+            setStack(part, spec.stack?.card, STACK_KEYS.card);
+            return;
+        case CardRole.Media: {
+            writeStyles(part, { ...CARD_BASE[CardRole.Media], ...spec.media });
+            setStack(part, spec.stack?.media, STACK_KEYS.media);
+            const image = imageOf(part);
+            if (image) {
+                writeStyles(image, { ...IMAGE_BASE, ...spec.image });
+                setStack(image, spec.stack?.image, STACK_KEYS.image);
+            }
+            return;
+        }
+        case CardRole.Content: {
+            const current = part.elementStyle;
+            if (current !== spec.contentStyle) {
+                switchElementStyle(part, current, spec.contentStyle, baseline(part.type));
+                part.elementStyle = spec.contentStyle;
+            }
+            writeStyles(part, { ...CARD_BASE[CardRole.Content], ...spec.content });
+            writeScheme(part, spec.contentScheme);
+            return;
+        }
+        case CardRole.Title:
+            writeStyles(part, spec.title);
+            return;
+        default:
+            return;
+    }
+}
+function setStack(node, values, keys) {
+    if (values)
+        writeLayerStyles(node, CARD_STACK_BREAKPOINT, values);
+    else
+        clearLayerStyles(node, CARD_STACK_BREAKPOINT, keys);
+}
+/**
+ * Card ▸ Layout. Rewrites the card's LAYOUT styles for `layout` — the card's direction and box, the
+ * Media's placement, the Image's aspect, the content block (Image behind text: the `media-scrim` style +
+ * the Inverse scheme), the title size (Compact) and, for Image side, a Mobile layer that stacks it — and
+ * moves the badge to where the layout puts it. Nothing else on any part. One undo step for the caller.
+ */
+function applyCardLayout(card, layout, options = {}) {
+    const spec = LAYOUTS[layout];
+    const baseline = options.baselineStyles ?? (() => ({}));
+    const removed = [];
+    for (const part of spec.partsOff ?? [])
+        if (setCardPart(card, part, false))
+            removed.push(part);
+    applyPartLayout(card, spec, card, baseline);
+    for (const role of [CardRole.Media, CardRole.Content, CardRole.Title]) {
+        const part = findByRole(card, role);
+        if (part)
+            applyPartLayout(card, spec, part, baseline);
+    }
+    const badge = findByRole(card, CardRole.Badge);
+    if (badge)
+        placeBadge(card, badge, spec.badgeOnMedia);
+    return { layout, removed };
+}
+const same = (a, b) => String(a ?? '').trim() === String(b ?? '').trim();
+const holds = (node, values) => Object.entries(values).every(([k, v]) => same(readStyle(node, k), v));
+const holdsLayer = (node, values, keys) => values ? Object.entries(values).every(([k, v]) => same(readLayerStyle(node, CARD_STACK_BREAKPOINT, k), v))
+    : keys.every(k => readLayerStyle(node, CARD_STACK_BREAKPOINT, k) === undefined);
+function matches(card, spec) {
+    if (!holds(card, spec.card) || !holdsLayer(card, spec.stack?.card, STACK_KEYS.card))
+        return false;
+    const media = findByRole(card, CardRole.Media);
+    if (media) {
+        if (!holds(media, spec.media) || !holdsLayer(media, spec.stack?.media, STACK_KEYS.media))
+            return false;
+        const image = imageOf(media);
+        if (image && (!holds(image, spec.image) || !holdsLayer(image, spec.stack?.image, STACK_KEYS.image)))
+            return false;
+    }
+    const content = findByRole(card, CardRole.Content);
+    if (content) {
+        if (content.elementStyle !== spec.contentStyle || !holds(content, spec.content))
+            return false;
+        if (!same(readProp(content, COLOR_SCHEME) ?? Scheme.Default, spec.contentScheme))
+            return false;
+    }
+    const title = findByRole(card, CardRole.Title);
+    if (title && !holds(title, spec.title))
+        return false;
+    const badge = findByRole(card, CardRole.Badge);
+    if (badge && media) {
+        const onMedia = parentInComposite(card, badge) === media;
+        if (onMedia !== spec.badgeOnMedia)
+            return false;
+    }
+    return true;
+}
+/** The layout the card's styles hold now, or `custom` once they were changed by hand (Card ▸ Layout). */
+function detectCardLayout(card) {
+    return CARD_LAYOUTS.find(layout => matches(card, LAYOUTS[layout])) ?? CARD_LAYOUT_CUSTOM;
+}
+/**
+ * Card ▸ Parts. Off removes the part (the badge first moves out of a removed Media); on stamps it back
+ * from the recipe into its role's slot, wearing its element style and laid out like the rest of the card
+ * (the card's current layout; Image top when it is Custom). Returns the node touched, or null when the
+ * card already was that way. Title and Content are not parts: they are locked (structure guard).
+ */
+function setCardPart(card, part, on, create, options = {}) {
+    const role = CARD_PART_ROLE[part];
+    const existing = findByRole(card, role);
+    if (!on) {
+        if (!existing)
+            return null;
+        if (part === CardPart.Media) {
+            const badge = findByRole(existing, CardRole.Badge);
+            if (badge)
+                placeBadge(card, badge, false);
+        }
+        removeFromComposite(card, existing);
+        return existing;
+    }
+    if (existing || !create)
+        return null;
+    const layout = detectCardLayout(card);
+    const spec = LAYOUTS[layout === CARD_LAYOUT_CUSTOM ? CardLayout.Top : layout];
+    const words = { ...CARD_WORDS, ...(options.words ?? {}) };
+    const node = PART_BUILDERS[part](create, words, options.badgeTone ?? BadgeTone.Accent);
+    const content = findByRole(card, CardRole.Content);
+    switch (part) {
+        case CardPart.Media: {
+            card.children = [node, ...(card.children ?? [])];
+            applyPartLayout(card, spec, node, () => ({}));
+            const badge = findByRole(card, CardRole.Badge);
+            if (badge)
+                placeBadge(card, badge, spec.badgeOnMedia);
+            break;
+        }
+        case CardPart.Badge:
+            placeBadge(card, node, spec.badgeOnMedia);
+            break;
+        default:
+            if (content)
+                insertInContent(content, part, node);
+            break;
+    }
+    return node;
+}
+/** The content column's order: [badge], eyebrow, title, text, buttons. */
+const CONTENT_ORDER = [CardRole.Badge, CardRole.Eyebrow, CardRole.Title, CardRole.Text, CardRole.Actions];
+function insertInContent(content, part, node) {
+    const rank = (n) => { const i = CONTENT_ORDER.indexOf(n.role ?? ''); return i < 0 ? CONTENT_ORDER.length : i; };
+    const children = [...(content.children ?? [])];
+    const own = rank(node);
+    const at = children.findIndex(c => rank(c) > own);
+    children.splice(at < 0 ? children.length : at, 0, node);
+    content.children = children;
+}
+// ── Link the whole card ──────────────────────────────────────────────────────────────────────
+/** The card's title — what "Link the whole card" makes the link (its words are the link's name). */
+function cardTitleOf(card) {
+    return findByRole(card, CardRole.Title);
+}
+/** True when the card links as a whole: its title carries a link (the stretched link renders from it). */
+function isCardLinked(card) {
+    const title = cardTitleOf(card);
+    if (!title)
+        return false;
+    const type = readProp(title, LINK_TYPE);
+    return type === LinkType.Page || type === LinkType.External;
+}
+/**
+ * Card ▸ Link ▸ "Link the whole card". On: the title links (to a website page, unless it already pointed
+ * at a URL — the target it held is kept); off: the title links nowhere (its target is kept for the next
+ * time). The stretched link itself is the shared CSS (iox-design.css), keyed on the title's anchor.
+ */
+function setCardLinked(card, on) {
+    const title = cardTitleOf(card);
+    if (!title)
+        return false;
+    const current = readProp(title, LINK_TYPE);
+    const next = on ? (current === LinkType.External ? LinkType.External : LinkType.Page) : LinkType.None;
+    return writeProp(title, LINK_TYPE, next);
+}
+
+const COMPOSITE_ROLE_SPECS = {
+    [CardRole.Card]: { parent: null },
+    [CardRole.Media]: { parent: CardRole.Card, part: CardPart.Media },
+    [CardRole.Badge]: { parent: null, part: CardPart.Badge },
+    [CardRole.Content]: { parent: CardRole.Card, locked: true },
+    [CardRole.Eyebrow]: { parent: CardRole.Content, part: CardPart.Eyebrow },
+    [CardRole.Title]: { parent: CardRole.Content, locked: true },
+    [CardRole.Text]: { parent: CardRole.Content, part: CardPart.Text },
+    [CardRole.Actions]: { parent: CardRole.Content, part: CardPart.Actions },
+};
+var StructureEdit;
+(function (StructureEdit) {
+    StructureEdit["Delete"] = "delete";
+    /** A drop, paste or wrap that would put the node somewhere new. */
+    StructureEdit["Move"] = "move";
+})(StructureEdit || (StructureEdit = {}));
+var StructureRefusal;
+(function (StructureRefusal) {
+    /** A locked part cannot be deleted (the card's Content and Title). */
+    StructureRefusal["LockedPart"] = "locked-part";
+    /** A locked part can only live directly inside its own parent role. */
+    StructureRefusal["LockedPlacement"] = "locked-placement";
+})(StructureRefusal || (StructureRefusal = {}));
+/**
+ * Why the structure guard refuses `edit` on `node`, or null when it is allowed. `ancestors` (Move only) =
+ * the new parent chain, root first, the direct parent last.
+ */
+function structureRefusal(node, edit, ancestors = []) {
+    const spec = node?.role ? COMPOSITE_ROLE_SPECS[node.role] : undefined;
+    if (!spec?.locked)
+        return null;
+    if (edit === StructureEdit.Delete)
+        return StructureRefusal.LockedPart;
+    const parent = ancestors[ancestors.length - 1];
+    return parent?.role === spec.parent ? null : StructureRefusal.LockedPlacement;
+}
+/** True when `node` is a locked part (shown with a lock and no delete in the layer tree). Deleting a whole
+ *  composite is always allowed — only its locked parts are refused. */
+function isLockedPart(node) {
+    return !!(node?.role && COMPOSITE_ROLE_SPECS[node.role]?.locked);
+}
+
+/**
+ * @vectoriox/iox-ui/composite-core — composites built from the builder's own parts (composite-components
+ * plan §3a). FRAMEWORK-FREE: the builder, the SSR engine and iox-cms (generation-core's composer, the site
+ * build) read the same recipes, roles and structure rules. Card v2 + Badge / Chip (T23 / T25) are the
+ * first; Accordion and Tabs join with their own phases.
+ * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CHIP_ICON, CHIP_STYLE, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, StructureEdit, StructureRefusal, applyCardLayout, badgeStyleId, badgeToneOf, buildBadge, buildCardRecipe, buildChip, cardPartsOf, cardRootOf, cardTitleOf, clearLayerStyles, detectCardLayout, findByRole, isCardLinked, isCardRoot, isLockedPart, isPillNode, parentInComposite, readLayerStyle, readProp, readStyle, removeFromComposite, setBadgeTone, setCardLinked, setCardPart, structureRefusal, walkComposite, writeLayerStyles, writeProp, writeStyles };
+//# sourceMappingURL=vectoriox-iox-ui-composite-core.mjs.map