@vectoriox/iox-builder 4.28.1 → 4.29.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -10080,6 +10080,111 @@ function buildConsentPreset(createConfig) {
     return { banner, preferences, withdrawal };
 }
 
+/**
+ * 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.
+ *
+ * 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.
+ */
+const BRAND = (step, fallback) => `var(--iox-brand-${step}, ${fallback})`;
+const TOKEN = (name, fallback) => `var(--iox-${name}, ${fallback})`;
+function styled(node, styles) {
+    if (!node)
+        return null;
+    for (const [prop, value] of Object.entries(styles))
+        setStyleTrait(node, prop, value);
+    return node;
+}
+function text(content, styles, createConfig) {
+    return styled(textNode(content, createConfig), styles);
+}
+function sampleCard(title, meta, createConfig) {
+    const card = createConfig('Card');
+    if (!card)
+        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)
+        return null;
+    card.children = [media, name, sub];
+    return card;
+}
+/**
+ * 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.
+ */
+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)
+        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'),
+    });
+    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 cards = styled(createConfig('Container'), {
+        display: 'grid', gridTemplateColumns: 'repeat(2, 150px)', gap: '12px', alignContent: 'center',
+    });
+    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;
+}
+
 /**
  * Dialog (actions plan A1b) — an ordinary container whose children are normal nodes, rendered
  * on the live site as a real `<dialog>` (top layer, free focus trap/Esc) and in the CANVAS as a
@@ -10930,5 +11035,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, 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, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, 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, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, 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, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, 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, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map