@vectoriox/iox-builder 11.11.1 → 11.12.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, planPartRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, settleInteraction, settleModeFor, playInteraction, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, planPartRule, gateHoverRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, splitPressFeedback, isHoverPointer, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, settleInteraction, settleModeFor, playInteraction, resolveInteractionEasing, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, withStateTransitions, composeVirtualTraits, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts } from '@vectoriox/iox-ui/composite-core';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
@@ -1346,6 +1346,7 @@ const ACTION_TYPE_OPTIONS = [
 ];
 /** Dialog actions, for the engines' dispatch branch (mirror of SWIPER's set). */
 const DIALOG_ACTION_TYPES = new Set(['openDialog', 'closeDialog', 'toggleDialog']);
+/** The keyword easings — the panel lists the look's easing tokens (iox-ui `EASING_TOKENS`) and a custom curve beside them. */
 const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
 /** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
 const INTERACTION_STATES = ['hover', 'active', 'focus'];
@@ -1398,7 +1399,7 @@ const VALIDATION_STATE_CLASS = VALIDATION_STATE_CLASS$1;
  * (`stateSelectorSuffix` in @vectoriox/iox-ui), never a pseudo-class. Offered per type by
  * `componentStatesFor`.
  */
-const COMPONENT_STATES = ['current', 'on'];
+const COMPONENT_STATES = ['current', 'on', 'disabled', 'busy', 'selected', 'scrolled'];
 const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES, ...VALIDATION_STATES, ...COMPONENT_STATES];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
@@ -1828,6 +1829,19 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
             new TraitConfig('rotate', 'Rotate', TraitInputType.Scrub, { min: -360, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
             new TraitConfig('skewX', 'Skew X', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
             new TraitConfig('skewY', 'Skew Y', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
+            // G3: where the element scales and turns FROM — a popover grows from its trigger (Emil 47). Physical
+            // keywords: transform-origin has no logical ones. The default is the CSS initial (never emitted).
+            new TraitConfig('transformOrigin', 'Origin', TraitInputType.Select, [
+                { label: 'Center', value: 'center' },
+                { label: 'Top', value: 'top' },
+                { label: 'Bottom', value: 'bottom' },
+                { label: 'Left', value: 'left' },
+                { label: 'Right', value: 'right' },
+                { label: 'Top left', value: 'top left' },
+                { label: 'Top right', value: 'top right' },
+                { label: 'Bottom left', value: 'bottom left' },
+                { label: 'Bottom right', value: 'bottom right' },
+            ], 'center'),
             // ── Filter (virtual — composed to CSS filter: …) ──────
             new TraitConfig('_sep_filter', 'Filter', TraitInputType.SectionLabel),
             new TraitConfig('filterBlur', 'Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
@@ -1860,8 +1874,10 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
                 { label: 'Hexagon', value: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' },
                 { label: 'Chevron', value: 'polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%)' },
             ], 'none'),
-            // ── Transition (virtual — composed to CSS transition: all …) ──
+            // ── Transition (virtual — composed to one CSS transition entry per property, never `all`: G2) ──
             new TraitConfig('_sep_transition', 'Transition', TraitInputType.SectionLabel),
+            // Empty: the properties the element's states change (the renderers fill them in); a list wins.
+            new TraitConfig('transitionProperty', 'Properties', TraitInputType.Text, undefined, ''),
             new TraitConfig('transitionDuration', 'Duration', TraitInputType.Scrub, { min: 0, max: 3000, step: 50, units: ['ms'] }, '0ms', true),
             new TraitConfig('transitionDelay', 'Delay', TraitInputType.Scrub, { min: 0, max: 2000, step: 50, units: ['ms'] }, '0ms', true),
             new TraitConfig('transitionTimingFunction', 'Easing', TraitInputType.Select, [
@@ -2239,7 +2255,7 @@ class StyleRegistryService {
         // The shared planner the engine uses (iox-client-engine#14): a part's hover / focus is the PART's own pseudo-class
         // — before, any non-validation state compiled to the bare part selector and applied at all times.
         const selector = planPartRule(nodeId, partClassName, state);
-        const css = selector && Object.keys(styles).length ? this.compileSelector(selector, styles) : '';
+        const css = selector && Object.keys(styles).length ? gateHoverRule(state, this.compileSelector(selector, styles)) : '';
         if (css)
             this.rules.set(key, css);
         else
@@ -2325,8 +2341,9 @@ class StyleRegistryService {
         if (!plan)
             return '';
         const { inner, outer } = plan.outer ? splitOuterProps(styles) : { inner: styles, outer: {} };
-        return [this.compileSelector(plan.inner, inner, context), plan.outer ? this.compileSelector(plan.outer, outer, context) : '']
-            .filter(Boolean).join('\n');
+        // A hover state's rule only where there is a hover (G1) — the engine gates the same rules the same way.
+        return gateHoverRule(state, [this.compileSelector(plan.inner, inner, context), plan.outer ? this.compileSelector(plan.outer, outer, context) : '']
+            .filter(Boolean).join('\n'));
     }
     /**
      * The inner + outer rule (joined) and the `::marker` rule for one composed style map.
@@ -4411,6 +4428,9 @@ class InteractionEngineService {
         requestAnimationFrame(poll);
     }
     attachClick(node, ix, element) {
+        // G7: press FEEDBACK (an animation of the pressed element that hides and shows nothing) lands on pointer-down,
+        // at once; the rest commits on the click. A toggle keeps its whole list on the click (the shared split, iox-ui).
+        const { onPress, onClick } = ix.reverseActions?.length ? { onPress: [], onClick: ix.actions } : splitPressFeedback(ix.actions);
         const handler = () => {
             if (ix.reverseActions?.length) {
                 // Toggle: alternate between primary and reverse actions on each click.
@@ -4419,18 +4439,29 @@ class InteractionEngineService {
                 this.toggleStates.set(ix.id, !isToggled);
             }
             else {
-                this.runActions(node, ix.actions, element);
+                this.runActions(node, onClick, element);
             }
         };
+        const press = (e) => { if (e.button === 0 || e.pointerType !== 'mouse')
+            this.runActions(node, onPress, element); };
         // CAPTURE, like the composite runtime: on the canvas every part's own listener stops the click to select
         // that part, so a click on a button's LABEL never bubbled to the button's click interaction — the live
         // site runs it (CC2.1: "Open an item" on a ButtonBlock did nothing on the canvas).
         element.addEventListener('click', handler, true);
-        return () => element.removeEventListener('click', handler, true);
+        if (onPress.length)
+            element.addEventListener('pointerdown', press, true);
+        return () => {
+            element.removeEventListener('click', handler, true);
+            element.removeEventListener('pointerdown', press, true);
+        };
     }
     attachHover(node, ix, element) {
-        const enterHandler = () => this.runActions(node, ix.actions, element);
-        const leaveHandler = () => {
+        // G7: a hover trigger answers a mouse or a pen — a finger's emulated hover stuck until the next tap elsewhere.
+        const enterHandler = (e) => { if (isHoverPointer(e))
+            this.runActions(node, ix.actions, element); };
+        const leaveHandler = (e) => {
+            if (!isHoverPointer(e))
+                return;
             // Reverse animations on leave for hover triggers
             for (const action of ix.actions) {
                 if (!isActionEnabled(action))
@@ -4447,11 +4478,11 @@ class InteractionEngineService {
                 this.reverseAction(target, action);
             }
         };
-        element.addEventListener('mouseenter', enterHandler);
-        element.addEventListener('mouseleave', leaveHandler);
+        element.addEventListener('pointerenter', enterHandler);
+        element.addEventListener('pointerleave', leaveHandler);
         return () => {
-            element.removeEventListener('mouseenter', enterHandler);
-            element.removeEventListener('mouseleave', leaveHandler);
+            element.removeEventListener('pointerenter', enterHandler);
+            element.removeEventListener('pointerleave', leaveHandler);
         };
     }
     // ── Actions ──────────────────────────────────────────────
@@ -4686,7 +4717,8 @@ class InteractionEngineService {
         const anim = playInteraction(element, { type, params: action.params }, keyframes, {
             duration: action.duration,
             delay: entranceDelay(action, repeatedRowIndex(element)),
-            easing: action.easing,
+            // A keyword, a curve, or the look's easing token as this element sees it (G6) — the live site's resolver.
+            easing: resolveInteractionEasing(action.easing, element),
         }, this.settleOptions());
         anim.finished.then(() => this.settleAfter(element, type)).catch(() => { });
     }
@@ -4764,7 +4796,7 @@ class InteractionEngineService {
         }
         playInteraction(element, { type, params: action.params }, frames, {
             duration: action.duration,
-            easing: action.easing,
+            easing: resolveInteractionEasing(action.easing, element),
         }, { ...this.settleOptions(), reverse: true });
     }
     /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
@@ -5678,7 +5710,9 @@ class RenderDirective {
             // The default hover transition (shared, marker-aware — the engine emits the same one):
             // without it a hovering node's base rule, re-upserted here on every render, dropped the
             // transition page-ui had added on load, and the canvas snapped where the site eased.
-            const composedBase = composeVirtualTraits(withDefaultHoverTransition(initialStyle, node.stateStyles, node.elementStyle));
+            // The transition names what the node's states change (G2) — the engine composes the same, from the same call.
+            const timedBase = withStateTransitions(initialStyle, node.stateStyles, node.elementStyle, node.responsive);
+            const composedBase = composeVirtualTraits(timedBase);
             this.styleRegistry.upsert(cssId, composedBase);
             // Restore per-state overrides saved from a previous session.
             // Every state set at base OR at any breakpoint — so a breakpoint-only state (a Mobile-only
@@ -5725,7 +5759,7 @@ class RenderDirective {
                 }
             }
             // Breakpoint layers — AFTER the state loop, so every scope resolved above is recorded.
-            this.styleRegistry.upsertResponsive(cssId, initialStyle, node.stateStyles, node.responsive);
+            this.styleRegistry.upsertResponsive(cssId, timedBase, node.stateStyles, node.responsive);
             // Part styles (board 7 — "the failure design"). Simpler than the state loop above:
             // a part+state combo always compounds onto THIS node (no relational/targeted scope
             // to resolve), so every entry just needs its base plus each of its own state overrides.
@@ -6927,8 +6961,8 @@ function nodeStyleMap(node) {
     return base;
 }
 /**
- * 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).
  */
@@ -6938,13 +6972,14 @@ function upsertNodeStyles(styleRegistry, node) {
         return;
     const base = nodeStyleMap(node);
     styleRegistry.setNodeType(cssId, node.type, colorSchemeOf(node));
-    styleRegistry.upsert(cssId, composeVirtualTraits(withDefaultHoverTransition(base, node.stateStyles, node.elementStyle)));
+    const timedBase = withStateTransitions(base, node.stateStyles, node.elementStyle, node.responsive);
+    styleRegistry.upsert(cssId, composeVirtualTraits(timedBase));
     for (const [state, map] of Object.entries(node.stateStyles ?? {})) {
         if (DOM_SCOPED_STATES.has(state) || !map || !Object.keys(map).length)
             continue;
         styleRegistry.upsert(cssId, composeVirtualTraits(map, base), state);
     }
-    styleRegistry.upsertResponsive(cssId, base, node.stateStyles, node.responsive);
+    styleRegistry.upsertResponsive(cssId, timedBase, node.stateStyles, node.responsive);
 }
 /** Push every content trait of a node to its rendered component (a Card title's link switched on). */
 function syncNodeInputs(ref, node) {
@@ -9972,6 +10007,15 @@ class BuilderComponent {
         this.globalOverlayRef?.nativeElement?.style.setProperty('--preview-vw', vwVal);
         this.canvasFrameHeight = Math.round(frameH);
     }
+    /** 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. */
+    syncScrolled(offset) {
+        const scrolled = isScrolled(offset);
+        for (const el of [this.previewCanvas?.nativeElement, this.globalOverlayRef?.nativeElement]) {
+            if (el && el.hasAttribute(SCROLLED_ATTRIBUTE) !== scrolled)
+                el.toggleAttribute(SCROLLED_ATTRIBUTE, scrolled);
+        }
+    }
     initLenis() {
         this.destroyLenis();
         if (!this.previewScrollRef?.nativeElement || !this.lenisContentRef?.nativeElement)
@@ -9986,6 +10030,8 @@ class BuilderComponent {
         this.lenis.on('scroll', (instance) => {
             // A Scene's stage is held against this very scroll: a frame later, it would paint carried off its pin.
             this.sceneCanvas?.pinNow();
+            // The Scrolled state (G4) on the canvas: the page and its header globals know the canvas has moved.
+            this.syncScrolled(instance.scroll);
             const clientH = this.previewScrollRef.nativeElement.clientHeight;
             this.onPageScroll({
                 scrollTop: instance.scroll,