@vectoriox/iox-builder 4.37.3 → 5.0.0

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ComponentRef, Type, ChangeDetectorRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ApplicationRef, SimpleChanges, ViewContainerRef, Injector, EnvironmentInjector, InjectionToken, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
 import * as i30 from '@vectoriox/iox-ui';
-import { ResponsiveOverrides, RelativeSourceSpec, Breakpoint, PageStyleSettings, FormRenderState, ComponentInstanceRegistryService, DataSourceEndpoints } from '@vectoriox/iox-ui';
+import { ResponsiveOverrides, RelativeSourceSpec, Breakpoint, PageStyleSettings, FormRenderState, DesignTokenLike, ComponentInstanceRegistryService, DataSourceEndpoints, PalettePreset } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, IoxContextSlot, PageStyleSettings, SetContextParams, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import * as rxjs from 'rxjs';
 import { Subject, Subscription, BehaviorSubject, Observable } from 'rxjs';
@@ -355,6 +355,14 @@ interface ComponentNode {
     /** ID of the org-level InteractionPreset applied to this node.
      *  When set, node.interactions reflects the preset's interactions. */
     interactionPresetId?: string;
+    /**
+     * The element style this node wears (design-system plan §3b) — an id from `ELEMENT_STYLES`
+     * (`@vectoriox/iox-ui/design-core`). Written by the registry factory for a NEW node and by the
+     * Style panel's switch; the trait values it wrote live in `styleTraits`/`stateStyles` like any
+     * other. Serialised; additive; NO renderer reads it — it drives the panel row, Reset, adopt
+     * (DS7) and the AI composer.
+     */
+    elementStyle?: string;
 }
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
@@ -467,6 +475,12 @@ declare class ComponentConfig {
     /** Styleable sub-elements (board 7). Absent/empty means no piece selector shows in the Style
      *  panel — most components have no addressable descendant, so this stays opt-in. */
     parts?: StylePart[];
+    /** The name the Components panel shows when it differs from `type` (ButtonBlock is "Button"). */
+    label?: string;
+    /** Written by `ComponentRegistryService.createConfig` (the default element style) — the
+     *  config doubles as the new node, so these mirror `ComponentNode`. */
+    elementStyle?: string;
+    stateStyles?: Partial<Record<ElementState, Record<string, any>>>;
     constructor(type: string, selector: string, icon?: string, category?: string);
     /** Override specific trait defaults after styleTraits are set.
      *  Call this at the end of each subclass constructor. */
@@ -877,7 +891,21 @@ declare class ComponentRegistryService {
     private components;
     getComponent(type: string): Type<any> | null;
     hasComponent(type: string): boolean;
+    /**
+     * A NEW element, born wearing its type's default element style (design-system plan §3e):
+     * the style's exact trait map goes into `styleTraits`, its hover/active/focus into
+     * `stateStyles`, its id into `elementStyle`. Flavor-independent — the look arrives through the
+     * org's tokens, so no pack is consulted here.
+     */
     createConfig(type: string): any | null;
+    /**
+     * The type's UNSTYLED config — constructor defaults only. For rebuilding a SAVED node (its own
+     * stored values decide its look; a pre-DS2 page must not silently adopt element styles) and as
+     * the baseline a switched-off style's traits fall back to.
+     */
+    createBaseConfig(type: string): any | null;
+    /** The unstyled base style map of a type — `switchElementStyle`'s baseline. */
+    baselineStyleProps(type: string): Record<string, unknown>;
     register(type: string, component: Type<any>, config: any): void;
     getAll(): {
         type: string;
@@ -1056,6 +1084,14 @@ declare class DragEngineService {
  * would read the editor window. Set on the frame in builder.component.scss.
  */
 declare const BUILDER_CANVAS_CONTAINER = "iox-canvas";
+/**
+ * The class that carries the ORG's design tokens on the canvas. Tokens used to be declared on
+ * `:root`, where they collided with the admin's own `--iox-*` chrome tokens (`accent`, `surface-2`,
+ * `scrim`, `focus-ring`… — DS2 seeds all 161 Crisp rows, so the clash became universal and the
+ * admin turned the studio's accent colour). Every surface that renders site content through this
+ * registry — the canvas frame, the global-elements overlay, preview, specimens — wears this class.
+ */
+declare const BUILDER_TOKEN_SCOPE_CLASS = "iox-token-scope";
 /**
  * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
@@ -1073,8 +1109,10 @@ declare const BUILDER_CANVAS_CONTAINER = "iox-canvas";
  * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
  * and compiled to `.iox-node-{id}:hover { … }` selectors.
  *
- * Design token variables are stored under the reserved key `__tokens__` and
- * compiled to a `:root { … }` block prepended to all other rules.
+ * Design tokens are compiled by the SHARED token compiler (`compileTokenCssBlocks`, design-core)
+ * scoped to `.iox-token-scope`: its base half (variables, scheme classes, reduced-motion and
+ * reduced-transparency blocks) is prepended to all other rules and its dark half appended LAST —
+ * the same two halves, in the same places, as the SSR engine.
  *
  * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
@@ -1089,6 +1127,10 @@ declare class StyleRegistryService {
      *  not a scan of every breakpoint rule on the page (this runs on every node render). */
     private responsiveKeys;
     private stateScopes;
+    /** Node type per css id — the compiler strips the props a type's renderer owns (a Dialog's
+     *  positioning, an Icon's line-height) from EVERY rule of that node, whoever upserts it. */
+    private nodeTypes;
+    private tokenCss;
     private styleEl;
     /**
      * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
@@ -1128,6 +1170,10 @@ declare class StyleRegistryService {
      * @param triggerId  For TARGETED states only: the css id of the trigger node whose
      *                pseudo-class drives the state. Compiles a `:has()`-scoped selector.
      */
+    /** Record a node's type (RenderDirective, before its first upsert) and recompile nothing —
+     *  every later rule for the node is stripped of what the type's renderer owns. */
+    setNodeType(nodeId: string, type: string): void;
+    private ownProps;
     upsert(nodeId: string, styles: Record<string, any>, state?: ElementState, relativeToId?: string, triggerId?: string): void;
     /**
      * Write or clear the styles for one PART of a compound component (board 7 — "the failure
@@ -1164,12 +1210,14 @@ declare class StyleRegistryService {
      */
     private nodeRuleCss;
     /**
-     * Write the org-level design token variables as a `:root { … }` block.
-     * Token names should be CSS custom property names without the `--` prefix
-     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
-     * Pass an empty object to clear all tokens.
+     * The org's design tokens on the canvas — through the SHARED compiler (`compileTokenCssBlocks`,
+     * design-core), scoped to `.iox-token-scope` (BUILDER_TOKEN_SCOPE_CLASS — never `:root`, which
+     * the admin's chrome tokens own). So the canvas gets exactly what the live site gets: the
+     * variables, the scheme classes, the reduced-motion / reduced-transparency blocks and the dark
+     * block, LAST. It used to be a hand-written copy that emitted variables and dark only.
+     * Pass the full row set every time (an empty list clears).
      */
-    upsertTokens(tokens: Record<string, string>, darkTokens?: Record<string, string>): void;
+    upsertTokens(tokens: ReadonlyArray<DesignTokenLike> | null | undefined): void;
     remove(nodeId: string): void;
     destroy(): void;
     private compile;
@@ -2669,9 +2717,6 @@ declare class BuilderDialogComponent implements OnInit, OnDestroy {
     private overlayService;
     private cdr;
     children: ComponentNode[];
-    style: {
-        [key: string]: any;
-    };
     nodeId: string;
     dropListId: string;
     closeOnBackdrop: boolean | string;
@@ -2696,7 +2741,7 @@ declare class BuilderDialogComponent implements OnInit, OnDestroy {
     onBackdrop(): void;
     onDrop(event: IoxDropEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderDialogComponent, "app-builder-dialog", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderDialogComponent, "app-builder-dialog", never, { "children": { "alias": "children"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
 }
 
 declare class SliderContainerComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
@@ -2799,11 +2844,6 @@ declare class SliderSlideComponent implements OnInit, OnDestroy {
     private cdr;
     isPreview: boolean;
     children: ComponentNode[];
-    private _style;
-    private _slideEditStyle;
-    set style(v: Record<string, any>);
-    get style(): Record<string, any>;
-    get slideEditStyle(): Record<string, any>;
     nodeId: string;
     dropListId: string;
     childClick: EventEmitter<any>;
@@ -2814,7 +2854,7 @@ declare class SliderSlideComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     onDrop(event: IoxDropEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderSlideComponent, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SliderSlideComponent, "app-slider-slide", never, { "children": { "alias": "children"; "required": false; }; "style": { "alias": "style"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderSlideComponent, "app-slider-slide", never, { "children": { "alias": "children"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "dropListId": { "alias": "dropListId"; "required": false; }; }, { "childClick": "childClick"; "childMouseEnter": "childMouseEnter"; "childMouseLeave": "childMouseLeave"; }, never, never, false, never>;
 }
 
 declare class PanelChildComponent {
@@ -3207,6 +3247,26 @@ declare function buildFieldKindPreset(def: FieldKindDef, createConfig: CreateCon
 declare function textNode(content: string, createConfig: CreateConfig): ComponentNode | null;
 declare function setTrait(node: ComponentNode, name: string, value: any): void;
 
+/**
+ * PALETTE PRESETS (design-system plan §6, DS2) — Card, Panel and Navigation bar are NOT component
+ * types: each is a Container wearing an element style (the spec's `palettePresets`), plus the
+ * layout that makes it read as one (a column, a space-between row) and, for the bar, a `<nav>`.
+ * They sit beside the layout presets and insert by click or drag.
+ */
+interface PalettePresetDef {
+    id: string;
+    name: string;
+    icon: string;
+    description: string;
+    preset: PalettePreset;
+}
+declare const PALETTE_PRESET_DEFS: readonly PalettePresetDef[];
+/**
+ * A fresh preset node: the type's NEW-element config (already wearing its own default style), moved
+ * onto the preset's element style, then the preset's traits and layout styleProps on top.
+ */
+declare function buildPalettePreset(def: PalettePresetDef, createConfig: (type: string) => ComponentNode | null): ComponentNode | null;
+
 interface ConsentPreset {
     banner: ComponentNode;
     preferences: ComponentNode;
@@ -3396,5 +3456,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-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, 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_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, buildFieldKindPreset, 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 };
-export type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, ConsentPreset, CreateConfig, Crumb, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormPresetDef, FormPresetField, FormStateSnapshot, HistoryEntry, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, ViewportState, ZoomOption };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, 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, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, 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_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, 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, 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 type { AuditFinding, AuditNode, BreakpointPresentation, BuilderClipboard, BuilderLabelResolver, ComponentEventDef, ComponentMethodDef, ComponentNode, ComponentTrait, ConsentPreset, CreateConfig, Crumb, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, FieldKindDef, FormPresetDef, FormPresetField, FormStateSnapshot, HistoryEntry, InsertTarget, InteractionAction, InteractionActionType, InteractionPreset, InteractionTrigger, IoxBinding, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, IoxSymbol, LayoutPresetChildStyles, LayoutPresetDef, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PalettePresetDef, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, SelectionBadge, StyleMap, StylePart, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, TreePathNode, ViewportState, ZoomOption };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "4.37.3",
+  "version": "5.0.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
     "@angular/animations": ">=20.0.0",
     "@angular/cdk": ">=20.0.0",
-    "@vectoriox/iox-ui": ">=4.41.0",
+    "@vectoriox/iox-ui": ">=5.13.0",
     "interactjs": "^1.10.27",
     "primeng": ">=20.0.0",
     "swiper": ">=12.0.0",