@vectoriox/iox-builder 4.37.2 → 4.38.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, 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.
  *
@@ -1074,7 +1110,7 @@ declare const BUILDER_CANVAS_CONTAINER = "iox-canvas";
  * 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.
+ * compiled to a `.iox-token-scope { … }` block prepended to all other rules.
  *
  * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
@@ -1164,7 +1200,8 @@ declare class StyleRegistryService {
      */
     private nodeRuleCss;
     /**
-     * Write the org-level design token variables as a `:root { … }` block.
+     * Write the org-level design token variables as a `.iox-token-scope { … }` block (see
+     * BUILDER_TOKEN_SCOPE_CLASS — never `:root`, which the admin's chrome tokens own).
      * 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.
@@ -1446,11 +1483,24 @@ interface ViewportState {
     scale: number;
 }
 declare class ViewportService {
+    /**
+     * True once the scale is something the author chose (restored from storage, or set since) —
+     * false while it is still the DEFAULT guessed below.
+     *
+     * ⚠️ That default used to be a flat 0.75 whatever the window, so on a 1600px screen the 1440
+     * canvas came up 1080 wide inside a ~1026 slot and the page's own left and right edges were
+     * clipped off on first paint. A zoom read-out of "75%" over a page with no visible boundary
+     * tells the author nothing. The builder now fits the canvas to the room it actually has while
+     * this is false, and never touches a remembered zoom. See `autoFitViewport()`.
+     */
+    private scaleIsExplicit;
     private state;
     private stateSubject;
     state$: rxjs.Observable<ViewportState>;
     getState(): ViewportState;
     getScale(): number;
+    /** True when the current scale is this code's guess, not a zoom the author picked. */
+    get scaleIsDefault(): boolean;
     /** Show (and edit) `bp`: the canvas takes that breakpoint's preview width and height. */
     setBreakpoint(bp: Breakpoint): void;
     setScale(scale: number): void;
@@ -1486,6 +1536,8 @@ declare class ViewportService {
      * matching breakpoint (Base / Tablet / Small), so old preferences carry over unchanged.
      */
     private loadFromStorage;
+    /** A saved zoom is the author's choice and is restored; its absence leaves the guess flagged. */
+    private restoreScale;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewportService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ViewportService>;
 }
@@ -1910,6 +1962,14 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     onBoardMouseDown(event: MouseEvent): void;
     onBoardMouseMove(event: MouseEvent): void;
     onBoardMouseUp(): void;
+    /**
+     * Scale the canvas so the WHOLE page frame fits the slot it is given.
+     *
+     * ⚠️ The gutter here must match `$canvas-inset` in the stylesheet, doubled. It said 20 while
+     * the inset was 20px *per side*, so "Fit" left the frame 40px wider than `.preview-scroll`
+     * can show and `overflow: hidden` ate the difference — the one button whose entire job is to
+     * fit was clipping both edges of the page by 20px.
+     */
     private autoFitViewport;
     selectPanel(panel: string): void;
     handleClick(event: any): void;
@@ -3184,6 +3244,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;
@@ -3373,5 +3453,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.2",
+  "version": "4.38.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.12.0",
     "interactjs": "^1.10.27",
     "primeng": ">=20.0.0",
     "swiper": ">=12.0.0",