@vectoriox/iox-builder 6.1.0 → 7.0.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -2314,11 +2314,19 @@ class StyleRegistryService {
      * Poppins. Links stay for the session: a trial that switches back costs no refetch.
      */
     loadTokenFonts(nodeCss) {
-        const head = this.styleEl?.ownerDocument?.head;
-        if (!head)
-            return;
-        const ids = fontsForTokens(this.tokenRows, { usedCss: nodeCss, uploaded: this.uploadedFamilies });
-        if (!ids.length)
+        this.linkFonts(fontsForTokens(this.tokenRows, { usedCss: nodeCss, uploaded: this.uploadedFamilies }));
+    }
+    /**
+     * Link the Google families OTHER rows name — a specimen wearing another look (the Design side-card's
+     * Look tiles and pairing cards). The same catalog, URL and dedupe as the canvas's own fonts, so a
+     * look that is later tried or applied costs no second fetch. Never touches the canvas's tokens.
+     */
+    loadFontsFor(tokens) {
+        this.linkFonts(fontsForTokens(tokens ?? [], { uploaded: this.uploadedFamilies }));
+    }
+    linkFonts(ids) {
+        const head = this.styleEl?.ownerDocument?.head ?? (typeof document !== 'undefined' ? document.head : null);
+        if (!head || !ids.length)
             return;
         const doc = head.ownerDocument;
         if (!head.querySelector(`link[rel="preconnect"][${BUILDER_FONT_LINK_ATTR}]`)) {
@@ -10425,8 +10433,8 @@ const click = (actions) => ({
         target: 'self', duration: 0, delay: 0, easing: 'ease', ...a,
     })),
 });
-const TOKEN$1 = (name, fallback) => `var(--iox-${name}, ${fallback})`;
-function button(label, createConfig, interaction, styles = {}) {
+const TOKEN = (name, fallback) => `var(--iox-${name}, ${fallback})`;
+function button$1(label, createConfig, interaction, styles = {}) {
     const btn = createConfig('ButtonBlock');
     const text = textNode(label, createConfig);
     if (!btn || !text)
@@ -10445,20 +10453,20 @@ function button(label, createConfig, interaction, styles = {}) {
 // width:'auto' + flexShrink:'0' on every voice: a consent button never stretches to its row's
 // height nor shrinks until its label wraps — both happened on the canvas (Rule 0, 2026-10-10).
 const SOLID = {
-    backgroundColor: TOKEN$1('brand-500', '#1f1d1b'), color: TOKEN$1('brandInk', '#ffffff'),
+    backgroundColor: TOKEN('brand-500', '#1f1d1b'), color: TOKEN('brandInk', '#ffffff'),
     fontSize: '12px', fontWeight: '600', padding: '9px 16px',
-    borderRadius: TOKEN$1('radius-control', '4px'),
+    borderRadius: TOKEN('radius-control', '4px'),
     width: 'auto', flexShrink: '0',
 };
 const OUTLINED = {
-    backgroundColor: 'transparent', color: TOKEN$1('ink', '#1f1d1b'),
-    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('ink', '#1f1d1b'),
+    backgroundColor: 'transparent', color: TOKEN('ink', '#1f1d1b'),
+    borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN('ink', '#1f1d1b'),
     fontSize: '12px', fontWeight: '600', padding: '8px 16px',
-    borderRadius: TOKEN$1('radius-control', '4px'),
+    borderRadius: TOKEN('radius-control', '4px'),
     width: 'auto', flexShrink: '0',
 };
 const QUIET = {
-    backgroundColor: 'transparent', color: TOKEN$1('inkMuted', '#4a453f'),
+    backgroundColor: 'transparent', color: TOKEN('inkMuted', '#4a453f'),
     fontSize: '11px', fontWeight: '400', padding: '2px 4px', textDecoration: 'underline',
     width: 'auto', flexShrink: '0',
 };
@@ -10491,26 +10499,26 @@ function buildConsentPreset(createConfig) {
     setStyleTrait(banner, 'width', '100%');
     setStyleTrait(banner, 'borderRadius', '0px');
     setStyleTrait(banner, 'padding', '14px 20px');
-    setStyleTrait(banner, 'backgroundColor', TOKEN$1('surface', '#ffffff'));
+    setStyleTrait(banner, 'backgroundColor', TOKEN('surface', '#ffffff'));
     setStyleTrait(banner, 'borderWidth', '1px');
     setStyleTrait(banner, 'borderStyle', 'solid');
-    setStyleTrait(banner, 'borderColor', TOKEN$1('ink', '#1f1d1b'));
+    setStyleTrait(banner, 'borderColor', TOKEN('ink', '#1f1d1b'));
     setStyleTrait(banner, 'boxShadow', 'none');
-    const heading = text$1('Cookies on this site', { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
+    const heading = text$1('Cookies on this site', { fontSize: '13px', fontWeight: '600', color: TOKEN('ink', '#1f1d1b') }, createConfig);
     // The first layer NAMES the three categories (plan §7) — the board does it in the copy.
-    const body = text$1('We use analytics and marketing cookies only if you allow them. Necessary ones always run.', { fontSize: '11px', color: TOKEN$1('inkMuted', '#4a453f'), lineHeight: '1.5', maxWidth: '330px' }, createConfig);
+    const body = text$1('We use analytics and marketing cookies only if you allow them. Necessary ones always run.', { fontSize: '11px', color: TOKEN('inkMuted', '#4a453f'), lineHeight: '1.5', maxWidth: '330px' }, createConfig);
     // width:'auto' throughout — the Container default is 100%, and two 100%-wide columns
     // cannot share the bar's row (they wrap into a stack; Rule 0 catch, 2026-10-10).
     const textCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '4px', flexGrow: '1', width: 'auto' }, [heading, body]);
-    const accept = button('Accept all', createConfig, click([
+    const accept = button$1('Accept all', createConfig, click([
         { type: 'grantConsent' },
         { type: 'closeDialog', target: banner.id },
     ]), SOLID);
-    const reject = button('Reject all', createConfig, click([
+    const reject = button$1('Reject all', createConfig, click([
         { type: 'denyConsent' },
         { type: 'closeDialog', target: banner.id },
     ]), OUTLINED);
-    const prefs = button('Preferences', createConfig, click([
+    const prefs = button$1('Preferences', createConfig, click([
         { type: 'openConsentPreferences', target: preferences.id },
     ]), QUIET);
     const acceptRejectRow = row(createConfig, { display: 'flex', gap: '7px', alignItems: 'center', width: 'auto' }, [accept, reject]);
@@ -10528,19 +10536,19 @@ function buildConsentPreset(createConfig) {
     setStyleTrait(preferences, 'display', 'flex');
     setStyleTrait(preferences, 'flexDirection', 'column');
     setStyleTrait(preferences, 'gap', '12px');
-    const prefsHeading = text$1('Your privacy choices', { fontSize: '16px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
-    const prefsSub = text$1('Change these any time from “Cookie settings” in the footer.', { fontSize: '12px', color: TOKEN$1('inkMuted', '#6b6560') }, createConfig);
+    const prefsHeading = text$1('Your privacy choices', { fontSize: '16px', fontWeight: '600', color: TOKEN('ink', '#1f1d1b') }, createConfig);
+    const prefsSub = text$1('Change these any time from “Cookie settings” in the footer.', { fontSize: '12px', color: TOKEN('inkMuted', '#6b6560') }, createConfig);
     const CARD = {
         display: 'flex', gap: '12px', alignItems: 'flex-start',
-        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
-        borderRadius: TOKEN$1('radius-surface', '8px'), padding: '12px 14px',
+        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN('line', '#e6e3e1'),
+        borderRadius: TOKEN('radius-surface', '8px'), padding: '12px 14px',
     };
-    const nameText = (s) => text$1(s, { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
-    const descText = (s) => text$1(s, { fontSize: '11px', color: TOKEN$1('inkMuted', '#6b6560'), lineHeight: '1.5' }, createConfig);
+    const nameText = (s) => text$1(s, { fontSize: '13px', fontWeight: '600', color: TOKEN('ink', '#1f1d1b') }, createConfig);
+    const descText = (s) => text$1(s, { fontSize: '11px', color: TOKEN('inkMuted', '#6b6560'), lineHeight: '1.5' }, createConfig);
     const textColOf = (name, desc) => row(createConfig, { display: 'flex', flexDirection: 'column', gap: '2px', flexGrow: '1', width: 'auto' }, [nameText(name), descText(desc)]);
     const alwaysOn = text$1('ALWAYS ON', {
-        fontSize: '10px', fontWeight: '600', color: TOKEN$1('inkMuted', '#6b6560'),
-        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
+        fontSize: '10px', fontWeight: '600', color: TOKEN('inkMuted', '#6b6560'),
+        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN('line', '#e6e3e1'),
         borderRadius: '999px', padding: '3px 8px',
         width: 'auto', flexShrink: '0', // a chip hugs its word (Text defaults to 100%)
     }, createConfig);
@@ -10566,14 +10574,14 @@ function buildConsentPreset(createConfig) {
     const analyticsCard = categoryCard('analytics', 'Analytics', 'Anonymous counts of visits and pages. Off means the analytics script never loads.');
     const marketingCard = categoryCard('marketing', 'Marketing', 'Ads measurement and remarketing. Off means no ad cookies and no data shared.');
     // Board C2's footer: bulk exits live here too — Reject | (grow) | Done | Accept.
-    const prefsReject = button('Reject all', createConfig, click([
+    const prefsReject = button$1('Reject all', createConfig, click([
         { type: 'denyConsent' },
         { type: 'closeDialog', target: preferences.id },
     ]), OUTLINED);
-    const prefsDone = button('Done', createConfig, click([
+    const prefsDone = button$1('Done', createConfig, click([
         { type: 'closeDialog', target: preferences.id },
-    ]), { ...OUTLINED, color: TOKEN$1('inkMuted', '#3d3833'), borderColor: TOKEN$1('line', '#d8d4d1') });
-    const prefsAccept = button('Accept all', createConfig, click([
+    ]), { ...OUTLINED, color: TOKEN('inkMuted', '#3d3833'), borderColor: TOKEN('line', '#d8d4d1') });
+    const prefsAccept = button$1('Accept all', createConfig, click([
         { type: 'grantConsent' },
         { type: 'closeDialog', target: preferences.id },
     ]), SOLID);
@@ -10586,7 +10594,7 @@ function buildConsentPreset(createConfig) {
         return null;
     preferences.children = [prefsHeading, prefsSub, necessaryCard, analyticsCard, marketingCard, footer];
     // ── the withdrawal path (§7.3) ───────────────────────────────────────────
-    const withdrawal = button('Cookie settings', createConfig, click([
+    const withdrawal = button$1('Cookie settings', createConfig, click([
         { type: 'openConsentPreferences', target: preferences.id },
     ]), QUIET);
     if (!withdrawal)
@@ -10596,17 +10604,23 @@ function buildConsentPreset(createConfig) {
 }
 
 /**
- * THE FLAVOR SAMPLER (flavors plan §7, F2) — the fixed tree the picker renders through the REAL
- * builder pipeline with candidate tokens applied. Never a screenshot, never a second renderer:
- * `render-parity.md` is the record of what a convenience renderer costs.
+ * THE DESIGN SPECIMENS (design-system plan §5, Board 6) — the small trees the Design side-card
+ * renders through the REAL builder pipeline (`[ioxRender]`), never a hand-drawn HTML mock: a look's
+ * tile on the Look tab, and one specimen per element style on the Element styles tab. Every node is
+ * a real config wearing a real element style, so what the author sees is what the style renders.
+ *
+ * Specimens are display-only: every node is marked like a repeater's preview clone, so the canvas
+ * never registers, selects or drags one (RenderDirective skips overlay wiring for them).
  *
- * Every colour in it is a token REFERENCE with a Swiss-neutral fallback — so before a brand is
- * chosen the sampler is the monochrome study the F1 board shows, and the moment candidate tokens
- * are upserted it recolours live (the F2 board), proving the exact mechanism a later re-theme
- * uses on a built site: nothing moves, only tokens change.
+ * The words come from the host (translated); the only sizes set here are the board's specimen
+ * scale-downs (a Display heading at 24px fits a 36%-wide card; the live style does not).
  */
-const BRAND = (step, fallback) => `var(--iox-brand-${step}, ${fallback})`;
-const TOKEN = (name, fallback) => `var(--iox-${name}, ${fallback})`;
+/** What a specimen node is marked with — RenderDirective's "display only" flag. */
+const SPECIMEN_FLAG = '__previewClone';
+/** Board 6's specimen font sizes for the heading styles — the live sizes do not fit the card. */
+const HEADING_SPECIMEN_SIZE = { display: '24px', h1: '21px', h2: '18px', h3: '15px' };
+/** The four dots on a look's tile, left to right (Board 6 `TILE`). */
+const TILE_DOTS = ['accent', 'text', 'surface-2', 'line-strong'];
 function styled(node, styles) {
     if (!node)
         return null;
@@ -10614,90 +10628,149 @@ function styled(node, styles) {
         setStyleTrait(node, prop, value);
     return node;
 }
-function text(content, styles, createConfig) {
-    return styled(textNode(content, createConfig), styles);
+function wearing(node, styleId) {
+    if (!node)
+        return null;
+    applyElementStyle(node, styleId);
+    return node;
+}
+function text(content, createConfig, styleId, styles = {}) {
+    const node = textNode(content, createConfig);
+    if (styleId)
+        wearing(node, styleId);
+    return styled(node, styles);
 }
-function sampleCard(title, meta, createConfig) {
-    const card = createConfig('Card');
-    if (!card)
+function withChildren(node, children) {
+    if (!node || children.some(c => !c))
         return null;
-    styled(card, {
-        backgroundColor: TOKEN('surface', '#ffffff'),
-        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN('line', '#949494'),
-        padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px', width: '150px',
-    });
-    const media = styled(createConfig('Container'), {
-        height: '48px', width: '100%', backgroundColor: BRAND(50, '#ebe8e5'),
-    });
-    const name = text(title, { fontSize: '12px', fontWeight: '600', color: TOKEN('ink', '#1f1d1b') }, createConfig);
-    const sub = text(meta, { fontSize: '11px', color: TOKEN('inkMuted', '#6b6560') }, createConfig);
-    if (!media || !name || !sub)
+    node.children = children;
+    return node;
+}
+/** Mark a tree display-only (not selectable, not draggable). Returns the root. */
+function markSpecimen(root) {
+    if (!root)
+        return root;
+    root[SPECIMEN_FLAG] = true;
+    for (const child of root.children ?? [])
+        markSpecimen(child);
+    return root;
+}
+/** Whether a node was built as a specimen. */
+function isSpecimen(node) {
+    return !!node?.[SPECIMEN_FLAG];
+}
+function button(styleId, label, createConfig, styles = {}) {
+    const btn = wearing(createConfig('ButtonBlock'), styleId);
+    if (!btn)
         return null;
-    card.children = [media, name, sub];
-    return card;
+    setTrait(btn, 'tag', 'button');
+    styled(btn, styles);
+    return withChildren(btn, [text(label, createConfig, undefined, { color: 'inherit' })]);
+}
+function boxed(styleId, createConfig, children, styles) {
+    return withChildren(styled(wearing(createConfig('Container'), styleId), styles), children);
 }
 /**
- * Build the sampler tree (the F1/F2 boards' hero + two cards). Null when a type is missing —
- * a picker that previews half a sampler would be lying about the flavor.
+ * The specimen for one element style (Board 6, Element styles tab). Null for an unknown id or a
+ * missing type — a list that shows half a specimen would be lying about the style.
  */
-function buildFlavorSampler(createConfig) {
-    const root = styled(createConfig('Container'), {
-        display: 'flex', gap: '20px', alignItems: 'stretch', width: '100%',
-        padding: '18px 22px', backgroundColor: TOKEN('surface', '#ffffff'),
-    });
-    if (!root)
+function buildElementStyleSpecimen(id, createConfig, copy) {
+    const style = elementStyleById(id);
+    if (!style)
         return null;
-    root.label = 'Flavor sampler';
-    const hero = styled(createConfig('Container'), {
-        display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '10px', flexGrow: '1',
-    });
-    // Rendered already-uppercase: textTransform is not in the style-trait vocabulary, and the
-    // sampler only uses traits that LAND (asserted in the spec — setStyleTrait no-ops silently).
-    const badge = text('STUDIO', {
-        fontSize: '10px', letterSpacing: '0.14em',
-        fontWeight: '600', color: BRAND(600, '#6b6560'),
-    }, createConfig);
-    const heading = text('Interiors, measured twice.', {
-        fontSize: '30px', fontWeight: '600', lineHeight: '1.05', letterSpacing: '-0.02em',
-        maxWidth: '320px', color: TOKEN('ink', '#1f1d1b'),
-    }, createConfig);
-    const button = (label, styles) => {
-        const btn = createConfig('ButtonBlock');
-        const inner = text(label, { fontSize: '12px', fontWeight: '600', color: 'inherit' }, createConfig);
-        if (!btn || !inner)
-            return null;
-        setTrait(btn, 'tag', 'button');
-        styled(btn, styles);
-        btn.children = [inner];
-        return btn;
-    };
-    const primary = button('Book a visit', {
-        backgroundColor: BRAND(500, '#1f1d1b'), color: TOKEN('brandInk', '#ffffff'),
-    });
-    const secondary = button('Our work', {
-        backgroundColor: 'transparent', color: TOKEN('ink', '#1f1d1b'),
-        borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN('ink', '#1f1d1b'),
+    let root = null;
+    switch (style.group) {
+        case 'Buttons':
+            root = button(id, copy.label, createConfig);
+            break;
+        case 'Headings':
+            if (id === 'eyebrow') {
+                root = text(copy.eyebrow, createConfig, id, {});
+            }
+            else {
+                const heading = wearing(createConfig('Heading'), id);
+                if (heading) {
+                    setTrait(heading, 'content', copy.heading);
+                    setTrait(heading, 'level', id === 'display' ? 'h1' : id);
+                    styled(heading, { fontSize: HEADING_SPECIMEN_SIZE[id] ?? '18px', margin: '0' });
+                }
+                root = heading;
+            }
+            break;
+        case 'Text':
+            if (id === 'link') {
+                const link = wearing(createConfig('Link'), id);
+                if (link) {
+                    setTrait(link, 'label', copy.link);
+                    setTrait(link, 'url', '');
+                }
+                root = link;
+            }
+            else {
+                root = text(copy.body, createConfig, id, { margin: '0' });
+            }
+            break;
+        default:
+            root = layoutSpecimen(id, createConfig, copy);
+    }
+    return markSpecimen(root);
+}
+function layoutSpecimen(id, createConfig, copy) {
+    switch (id) {
+        case 'section':
+        case 'box':
+            return text(copy.note, createConfig, 'small', { margin: '0' });
+        case 'card':
+        case 'panel':
+        case 'dialog':
+            return boxed(id, createConfig, [text(copy.label, createConfig, 'small', { margin: '0' })], { padding: '10px 12px', display: 'inline-block', minWidth: '120px', width: 'auto', maxWidth: '100%' });
+        case 'nav':
+            return boxed(id, createConfig, [
+                text(copy.brand, createConfig, undefined, { fontWeight: '700', fontSize: '11px', margin: '0' }),
+                text(copy.navLink, createConfig, undefined, { fontSize: '11px', margin: '0' }),
+            ], { padding: '6px 10px', display: 'flex', gap: '10px', alignItems: 'center' });
+        case 'media':
+            return styled(wearing(createConfig('Image'), id), { width: '80px', aspectRatio: '4 / 3', height: 'auto' });
+        case 'rule':
+            return styled(wearing(createConfig('Divider'), id), { width: '120px' });
+        case 'icon': {
+            const icon = wearing(createConfig('Icon'), id);
+            if (icon)
+                setTrait(icon, 'iconClass', 'ph-thin ph-sparkle');
+            return styled(icon, { fontSize: '20px', display: 'inline-flex' });
+        }
+        default:
+            return boxed(id, createConfig, [text(copy.label, createConfig, undefined, { fontSize: '12px', margin: '0' })], { padding: '6px 10px' });
+    }
+}
+/**
+ * A look's tile (Board 6, Look tab — the board's `TILE`): four token dots, a Primary button and a
+ * Card holding "Aa" in the display face beside the look's name. Every colour is a token reference,
+ * so the tile wears whichever look's tokens its wrapper declares.
+ */
+function buildFlavorSpecimen(name, createConfig, copy) {
+    const dots = styled(createConfig('Container'), { display: 'flex', gap: '4px', alignSelf: 'start', width: 'auto' });
+    const dotNodes = TILE_DOTS.map(token => styled(createConfig('Container'), {
+        width: '14px', height: '14px', borderRadius: '50%', backgroundColor: `var(--iox-${token})`,
+        borderWidth: '1px', borderStyle: 'solid', borderColor: 'rgba(127, 127, 127, 0.25)', flexShrink: '0',
+    }));
+    const primary = button('button-primary', copy.bookNow, createConfig, { padding: '4px 9px', fontSize: '11px', justifySelf: 'end' });
+    const aa = text('Aa', createConfig, undefined, {
+        fontFamily: 'var(--iox-font-display)', fontWeight: 'var(--iox-weight-display)', fontSize: '20px',
+        letterSpacing: 'var(--iox-tracking-display)', lineHeight: '1', color: 'var(--iox-text)', margin: '0',
     });
-    const buttonsRow = styled(createConfig('Container'), { display: 'flex', gap: '8px' });
-    if (!badge || !heading || !primary || !secondary || !buttonsRow || !hero)
-        return null;
-    buttonsRow.children = [primary, secondary];
-    hero.children = [badge, heading, buttonsRow];
-    // The F1 board's hero/cards separator — a 1px Container, because the border-inline traits
-    // do not exist in the vocabulary and a physical border side would break RTL anyway.
-    const divider = styled(createConfig('Container'), {
-        width: '1px', backgroundColor: TOKEN('line', '#e6e3e1'),
+    const label = text(name, createConfig, 'small', { margin: '0' });
+    const card = boxed('card', createConfig, [aa, label], {
+        gridColumn: '1 / -1', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        gap: '10px', padding: '7px 9px', width: 'auto',
     });
-    const cards = styled(createConfig('Container'), {
-        display: 'grid', gridTemplateColumns: 'repeat(2, 150px)', gap: '12px', alignContent: 'center',
+    const root = styled(createConfig('Container'), {
+        display: 'grid', gridTemplateColumns: '1fr auto', gap: '6px', alignContent: 'space-between',
+        height: '96px', padding: '10px', width: '100%',
     });
-    const cardA = sampleCard('Kitchen, Jaffa', '2025', createConfig);
-    const cardB = sampleCard('Loft, Florentin', '2024', createConfig);
-    if (!divider || !cards || !cardA || !cardB)
-        return null;
-    cards.children = [cardA, cardB];
-    root.children = [hero, divider, cards];
-    return root;
+    if (root)
+        root.label = 'Look specimen';
+    return markSpecimen(withChildren(root, [withChildren(dots, dotNodes), primary, card]));
 }
 
 /**
@@ -11571,5 +11644,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, textNode, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, textNode, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map