@vectoriox/iox-builder 4.7.0 → 4.9.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i17 from '@vectoriox/iox-ui';
-import { DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, setOverride, breakpointDef, breakpointForWidth, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, safeSetInput, composeVirtualTraits, stateNamesIn, collectContextSlotKeys, withContextSlots, nodeUsesContext, resolvePath, applyBindingPipes, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
+import { DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, setOverride, breakpointDef, breakpointForWidth, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, safeSetInput, composeVirtualTraits, stateNamesIn, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, nodeUsesContext, resolvePath, applyBindingPipes, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -218,7 +218,7 @@ class ComponentConfig {
     }
 }
 class TraitConfig {
-    constructor(name, label, type, options, defaultValue, inline, showWhen) {
+    constructor(name, label, type, options, defaultValue, inline, showWhen, responsive) {
         this.name = name;
         this.label = label;
         this.type = type;
@@ -226,6 +226,7 @@ class TraitConfig {
         this.default = defaultValue;
         this.inline = inline;
         this.showWhen = showWhen;
+        this.responsive = responsive;
     }
 }
 class GroupStyleConfig {
@@ -1201,6 +1202,10 @@ var AuditCode;
     AuditCode["TapTarget"] = "tap-target";
     AuditCode["TinyText"] = "tiny-text";
     AuditCode["UnboundedImage"] = "unbounded-image";
+    /** A slider showing more slides than the width can carry — each one unreadably narrow. */
+    AuditCode["SlidesOverflow"] = "slides-overflow";
+    /** An out-of-flow node whose box lands outside the frame, so it is unreachable at this width. */
+    AuditCode["OffscreenAbsolute"] = "offscreen-absolute";
 })(AuditCode || (AuditCode = {}));
 var AuditSeverity;
 (function (AuditSeverity) {
@@ -1214,6 +1219,10 @@ const MIN_TAP_PX = 44;
 const MIN_TEXT_PX = 12;
 /** Types a visitor taps. */
 const TAPPABLE = new Set(['Button', 'ButtonBlock', 'Link', 'LinkedContainer']);
+/** Narrower than this, a slide shows too little of its content to be worth showing at all. */
+const MIN_SLIDE_PX = 200;
+/** Out-of-flow positioning that can put a node outside the frame. */
+const OUT_OF_FLOW = new Set(['absolute', 'fixed']);
 const nameOf = (node) => node.label || node.type;
 const pxOf = (value) => {
     const match = /^(-?\d+(?:\.\d+)?)px$/i.exec(String(value ?? ''));
@@ -1276,6 +1285,37 @@ function auditNodes(nodes, viewportWidth) {
                 fix: { height: 'auto', aspectRatio: '16 / 9' },
             });
         }
+        // 6. A slider showing more slides than this width can carry. NOT a CSS problem: slide count
+        //    is a component trait, so the fix is a per-breakpoint TRAIT override (P3-G1), not a style.
+        if (node.type === 'SliderContainer' && node.width > 0) {
+            const perView = Number(node.inputs?.['slidesPerView']);
+            if (Number.isFinite(perView) && perView > 1) {
+                const slideWidth = node.width / perView;
+                if (slideWidth < MIN_SLIDE_PX) {
+                    const fits = Math.max(1, Math.floor(node.width / MIN_SLIDE_PX));
+                    findings.push({
+                        nodeId: node.id, nodeName: name, code: AuditCode.SlidesOverflow, severity: AuditSeverity.Warning,
+                        message: `${name} shows ${perView} slides across ${Math.round(node.width)}px — ${Math.round(slideWidth)}px each. Show ${fits} at this width.`,
+                        inputFix: { slidesPerView: fits },
+                    });
+                }
+            }
+        }
+        // 7. An out-of-flow node that has left the frame. Measured, not inferred: a negative offset
+        //    is legitimate design until it actually puts the content beyond the edge.
+        if (OUT_OF_FLOW.has(String(styles['position'] ?? '')) && node.left !== undefined && node.width > 0) {
+            const right = node.left + node.width;
+            const offLeft = right <= 0.5;
+            const offRight = node.left >= viewportWidth - 0.5;
+            if (offLeft || offRight) {
+                findings.push({
+                    nodeId: node.id, nodeName: name, code: AuditCode.OffscreenAbsolute, severity: AuditSeverity.Error,
+                    message: `${name} is positioned ${offLeft ? 'left of' : 'beyond'} the ${viewportWidth}px viewport — it cannot be seen or tapped at this width.`,
+                    // No blind auto-fix: the author's intent (a decorative overflow vs a mistake)
+                    // is not knowable from geometry. Selecting the node is the useful action.
+                });
+            }
+        }
     }
     const rank = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 1, [AuditSeverity.Info]: 2 };
     return findings
@@ -4273,6 +4313,12 @@ class RenderDirective {
                 return;
             safeSetInput(componentRef, trait.name, trait.default);
         });
+        // Per-breakpoint TRAIT overrides — the same hand-off the SSR engine makes. A component that
+        // declares a `responsive` input (SliderContainer) converts it to its own width config, so the
+        // canvas and the live site agree without the canvas needing a resize listener. Dropped by
+        // safeSetInput for every component that does not declare it.
+        if (node.responsive)
+            safeSetInput(componentRef, 'responsive', node.responsive);
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
         if (node.styleTraits?.length) {
@@ -5600,6 +5646,9 @@ class BuilderComponent {
         this.auditRunning = true;
         const scale = this.viewportService.getScale() || 1;
         const width = this.viewportService.getState().width;
+        // Positions are reported relative to the canvas FRAME, not the editor window, so an
+        // "off-screen" finding means off the simulated viewport rather than off the user's monitor.
+        const frame = this.previewCanvas?.nativeElement?.getBoundingClientRect() ?? { left: 0, top: 0 };
         const nodes = [];
         const visit = (list) => {
             for (const node of list) {
@@ -5611,8 +5660,13 @@ class BuilderComponent {
                         type: node.type,
                         label: node.label,
                         styleProps: resolveStyleProps(this.baseStyleMapOf(node), node.responsive, this.activeBreakpoint),
+                        // Traits resolved at this width too — some failures (a 4-up slider on a
+                        // phone) are invisible to a style-only audit. See P3-G1/G4.
+                        inputs: resolveInputs(this.baseInputMapOf(node), node.responsive, this.activeBreakpoint),
                         width: rect.width / scale,
                         height: rect.height / scale,
+                        left: (rect.left - frame.left) / scale,
+                        top: (rect.top - frame.top) / scale,
                     });
                 }
                 if (node.children?.length)
@@ -5625,10 +5679,38 @@ class BuilderComponent {
         this.auditRunning = false;
         this.cdr.detectChanges();
     }
+    /** The node's OWN trait values — the Base layer the responsive `inputs` cascade sits on top of. */
+    baseInputMapOf(node) {
+        const out = {};
+        for (const trait of (node.traits ?? [])) {
+            if (trait?.name !== undefined && trait.default !== undefined)
+                out[trait.name] = trait.default;
+        }
+        return out;
+    }
     /** Apply one finding's fix into the current breakpoint's layer (or the base styles at Base). */
     applyAuditFix(finding) {
         const node = this.findNodeById(finding.nodeId, this.layout) ?? this.findNodeById(finding.nodeId, this.globalElements);
-        if (!node || !finding.fix)
+        if (!node)
+            return;
+        // A TRAIT fix (slide count) is not CSS — it lands in the breakpoint's `inputs` layer, or on
+        // the node itself at Base, mirroring exactly how a style fix is applied below.
+        if (finding.inputFix) {
+            for (const [name, value] of Object.entries(finding.inputFix)) {
+                if (this.activeBreakpoint === Breakpoint.Base) {
+                    const trait = (node.traits ?? []).find((t) => t.name === name);
+                    if (trait)
+                        trait.default = value;
+                }
+                else {
+                    node.responsive = setInputOverride(node.responsive, this.activeBreakpoint, name, value);
+                }
+            }
+            this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
+            this.runAudit();
+            return;
+        }
+        if (!finding.fix)
             return;
         if (this.activeBreakpoint === Breakpoint.Base) {
             for (const [name, value] of Object.entries(finding.fix)) {
@@ -5657,7 +5739,7 @@ class BuilderComponent {
     }
     /** Apply every fixable finding, then re-measure. */
     applyAllAuditFixes() {
-        for (const finding of this.auditFindings.filter(f => !!f.fix))
+        for (const finding of this.auditFindings.filter(f => !!f.fix || !!f.inputFix))
             this.applyAuditFix(finding);
     }
     /** Select the node a finding is about. */
@@ -9462,6 +9544,14 @@ class RepeaterComponentConfig extends ComponentConfig {
                 label: 'Limit',
                 type: TraitInputType.Number,
                 default: 10,
+                // NOT marked `responsive` yet, deliberately. Row COUNT cannot be varied per width the
+                // way the slider's can: Swiper reads its own breakpoints map at runtime, but a
+                // repeater's count is decided when the markup is produced — and SSR has no viewport,
+                // so rendering N on the server and M in the browser is a hydration mismatch. The fix
+                // is to keep rendering every item and HIDE the surplus per width with a generated
+                // `:nth-child(n+X) { display: none }` rule (CSS-expressible, hydration-safe), which is
+                // a separate change. Marking it responsive now would ship a control that silently
+                // does nothing on the live site — exactly the `slidesPerGroup` bug this pass fixed.
             },
         ];
         this.styleTraits = buildFullStyleTraits();
@@ -9562,15 +9652,15 @@ class SliderContainerConfig extends ComponentConfig {
                 { label: '4', value: 4 },
                 { label: '5', value: 5 },
                 { label: '6', value: 6 },
-            ], 'auto'),
-            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1),
+            ], 'auto', undefined, undefined, /* responsive */ true),
+            new TraitConfig('slidesPerGroup', 'Slides per group', TraitInputType.Scrub, undefined, 1, undefined, undefined, /* responsive */ true),
             new TraitConfig('loop', 'Loop', TraitInputType.SelectButton, [
                 { label: 'Off', value: 'off' },
                 { label: 'Loop', value: 'loop' },
                 { label: 'Rewind', value: 'rewind' },
             ], 'off'),
             new TraitConfig('centeredSlides', 'Centered slides', TraitInputType.Checkbox, undefined, false),
-            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0),
+            new TraitConfig('spaceBetween', 'Space between (px)', TraitInputType.Scrub, undefined, 0, undefined, undefined, /* responsive */ true),
             new TraitConfig('initialSlide', 'Initial slide', TraitInputType.Scrub, undefined, 0),
             new TraitConfig('autoHeight', 'Auto height', TraitInputType.Checkbox, undefined, false),
             new TraitConfig('grabCursor', 'Grab cursor', TraitInputType.Checkbox, undefined, true),