@vectoriox/iox-builder 11.11.0 → 11.12.0

package/index.d.ts

@@ -143,7 +143,9 @@ interface InteractionAction {
     duration: number;
     /** Delay in milliseconds before the action starts. */
     delay: number;
-    easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    /** G6 (D8): a CSS keyword, a `cubic-bezier()`, or the NAME of one of the look's easing tokens (`ease-standard`,
+     *  `ease-enter`, `ease-exit`, `ease-spring`) — resolved by both runtimes through iox-ui's `resolveInteractionEasing`. */
+    easing: string;
     /**
      * Extra parameters — `{ distance: 20 }` for move actions. For `setContext`/`clearContext` this
      * holds a `SetContextParams` (`{ slot, value, noReverse? }`), read structurally by the shared
@@ -208,6 +210,7 @@ declare const ACTION_TYPE_OPTIONS: {
     value: InteractionActionType;
     label: string;
 }[];
+/** The keyword easings — the panel lists the look's easing tokens (iox-ui `EASING_TOKENS`) and a custom curve beside them. */
 declare const EASING_OPTIONS: string[];
 /**
  * A named, reusable collection of CSS style properties stored at the org level.
@@ -245,10 +248,11 @@ interface InteractionPreset {
     name: string;
     interactions: IoxInteraction[];
 }
-type ElementState = 'hover' | 'active' | 'focus' | 'first-child' | 'last-child' | 'nth-child(odd)' | 'nth-child(even)' | 'parent-hover' | 'trigger-hover' | 'trigger-on' | 'wrong' | 'accepted' | 'current' | 'on';
+type ElementState = 'hover' | 'active' | 'focus' | 'first-child' | 'last-child' | 'nth-child(odd)' | 'nth-child(even)' | 'parent-hover' | 'trigger-hover' | 'trigger-on' | 'wrong' | 'accepted' | 'current' | 'on' | 'disabled' | 'busy' | 'selected' | 'scrolled';
 /** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
 declare const INTERACTION_STATES: ElementState[];
-/** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
+/** Structural pseudo-classes — matched on the outer element by the shared `planStateRule` (@vectoriox/iox-ui), the
+ *  engine's planner too (iox-client-engine#14). */
 declare const STRUCTURAL_STATES: ElementState[];
 /**
  * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
@@ -1533,19 +1537,6 @@ declare class StyleRegistryService {
     private fontLocale;
     private tokenMode;
     private styleEl;
-    /**
-     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
-     * affect how the element participates in its PARENT layout (flex/block flow).
-     * Everything else goes to the INNER element (.iox-node-{id}).
-     *
-     * Exception — out-of-flow positioning (position:fixed/absolute):
-     * When position is fixed or absolute, width is redirected to the inner element
-     * (the positioned one) and a default width:100% is added if none is set, so the
-     * element stays visible. top/right/bottom/left/zIndex are always inner because
-     * they are co-ordinates of the positioned element, not the flow wrapper.
-     * position itself goes to inner with `!important` to beat component-scoped CSS.
-     */
-    private static readonly OUTER_PROPS;
     /**
      * Properties that need !important on the inner element to beat Angular's scoped-CSS
      * specificity boost. CANVAS-ONLY (H2 audit, 2026-10-11): the shared compiler never forces
@@ -1601,10 +1592,13 @@ declare class StyleRegistryService {
     private clearResponsive;
     private isOutOfFlow;
     /**
-     * The selector BODY (no leading dot) for a state rule, or null when a relational / targeted
-     * state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     * A state rule's CSS through the SHARED planner the engine emits with (`planStateRule`, iox-client-engine#14), or ''
+     * when a relational / targeted state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     * `relativeToId` is the parent for a relational state (parent-hover) and the nearest common ancestor of the node and
+     * its trigger for a targeted one (trigger-hover, trigger-on). A structural state is matched on the outer element and
+     * reaches the node's own; its outer props stay outer.
      */
-    private stateSelector;
+    private stateRuleCss;
     /**
      * The inner + outer rule (joined) and the `::marker` rule for one composed style map.
      * `isOutOfFlow` is passed in rather than read from `styles` because a breakpoint layer is
@@ -1648,6 +1642,9 @@ declare class StyleRegistryService {
     loadFontsFor(tokens: ReadonlyArray<DesignTokenLike> | null | undefined, locale?: string | null): void;
     private linkFonts;
     private compile;
+    /** One rule for a FULL selector. Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
+     *  the shared style-compiler so the SSR engine produces byte-identical output. */
+    private compileSelector;
     private _flushPending;
     private flush;
     static ɵfac: i0.ɵɵFactoryDeclaration<StyleRegistryService, never>;
@@ -1898,10 +1895,10 @@ declare class InteractionEngineService {
     private executeSwiperAction;
     private resolveTarget;
     private executeAction;
+    /** On the canvas a run never writes a transform inline (one inside the scaled page breaks Lenis). */
+    private settleOptions;
     /** What an element is left as once an action is done: a revealed one interactive, a hidden one inert. */
     private settleAfter;
-    /** Write a frame inline. On the canvas never a transform: one inside the scaled page breaks Lenis. */
-    private applyFrame;
     /**
      * Freeze an element at the animation's starting frame immediately, before any
      * trigger fires. Called for ALL entrance-type actions regardless of trigger so
@@ -1914,6 +1911,8 @@ declare class InteractionEngineService {
      */
     private applyPreState;
     private clearInlineAnimationStyles;
+    /** A hover-out: the action played back from where the element IS (never from its end frame), settled by the shared
+     *  rule — played back to hidden, it holds hidden; to shown, it releases. */
     private reverseAction;
     /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
     private keyframesFor;
@@ -2482,6 +2481,9 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
      * Both fall back to their native unit in production (no variables defined).
      */
     private updatePreviewVh;
+    /** Keep the Scrolled attribute (iox-ui SCROLLED_ATTRIBUTE) on the canvas page and the header overlay — written only
+     *  when it changes, so the overlay's mutation observers never wake for a scroll tick. */
+    private syncScrolled;
     private initLenis;
     private destroyLenis;
     /**
@@ -3064,8 +3066,11 @@ declare class BuilderContainerComponent implements OnInit, OnDestroy {
      * stylesheet treat them exactly as it treats the engine's own twins.
      */
     formClass: string;
-    /** Which state the canvas is showing. Only meaningful on a form host. */
-    formState: string;
+    /** Which state the canvas is showing. Only meaningful on a form host: its submit buttons follow it (busy, disabled
+     *  while Sending — the ONE `syncSubmitButtons` both live paths call, iox-ui#42); "While sending" is the shared CSS's. */
+    set formState(state: string);
+    get formState(): string;
+    private _formState;
     childClick: EventEmitter<any>;
     childMouseEnter: EventEmitter<any>;
     childMouseLeave: EventEmitter<void>;
@@ -4490,8 +4495,8 @@ declare function syncNodeDesign(ref: ComponentRef<unknown> | null | undefined, n
 /** A node's base style map, from its style traits (the live values the Style panel edits). */
 declare function nodeStyleMap(node: ComponentNode): Record<string, any>;
 /**
- * Re-register a node's compiled rules from its CURRENT style values — the base rule (with the default
- * hover transition), its self-scoped state rules and its breakpoint layers — exactly as the
+ * Re-register a node's compiled rules from its CURRENT style values — the base rule (its transition naming what its
+ * states change, G2), its self-scoped state rules and its breakpoint layers — exactly as the
  * RenderDirective registers them at render. For edits that rewrite a node's styles from outside the Style
  * panel (a Card's layout preset, a reset to defaults).
  */

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "11.11.0",
+  "version": "11.12.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": ">=5.73.0",
+    "@vectoriox/iox-ui": ">=5.82.0",
     "interactjs": "^1.10.27",
     "primeng": ">=20.0.0",
     "swiper": ">=12.0.0",