@vectoriox/iox-builder 4.8.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';
@@ -1202,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) {
@@ -1215,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 ?? ''));
@@ -1277,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
@@ -5607,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) {
@@ -5618,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)
@@ -5632,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)) {
@@ -5664,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. */