@vectoriox/iox-builder 1.4.25 → 1.4.27

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2007,6 +2007,7 @@ class StyleRegistryService {
         this.changes$ = new Subject();
         this.rules = new Map();
         this.styleEl = null;
+        this._flushPending = false;
     }
     /**
      * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
@@ -2138,27 +2139,37 @@ class StyleRegistryService {
         return `.${className} {\n${entries.join('\n')}\n}`;
     }
     /**
-     * Rewrite bare `vh` values to `calc(N * var(--preview-vh, 1vh))` so they
-     * resolve to the simulated viewport height in the builder canvas.
-     * In production (no --preview-vh defined) the fallback `1vh` preserves the
-     * original behaviour: `calc(50 * 1vh)` == `50vh`.
+     * Rewrite viewport-relative units so they resolve to the simulated canvas
+     * dimensions rather than the real browser viewport.
+     *
+     * --preview-vh / --preview-vw are set by BuilderComponent via ResizeObserver
+     * and viewport-state subscription. In production (no variables defined) the
+     * fallbacks `1vh` / `1vw` restore the original browser behaviour.
      */
     rewriteVh(value) {
-        return value.replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))');
+        return value
+            .replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))')
+            .replace(/(-?\d*\.?\d+)vw/g, 'calc($1 * var(--preview-vw, 1vw))');
     }
     toKebabCase(str) {
         return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
     }
     flush() {
-        if (!this.styleEl)
+        if (!this.styleEl || this._flushPending)
             return;
-        // __tokens__ always first so variables are available to all subsequent rules
-        const tokenBlock = this.rules.get('__tokens__');
-        const rest = Array.from(this.rules.entries())
-            .filter(([k]) => k !== '__tokens__')
-            .map(([, v]) => v);
-        this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
-        this.changes$.next();
+        this._flushPending = true;
+        requestAnimationFrame(() => {
+            this._flushPending = false;
+            if (!this.styleEl)
+                return;
+            // __tokens__ always first so variables are available to all subsequent rules
+            const tokenBlock = this.rules.get('__tokens__');
+            const rest = Array.from(this.rules.entries())
+                .filter(([k]) => k !== '__tokens__')
+                .map(([, v]) => v);
+            this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
+            this.changes$.next();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: StyleRegistryService }); }
@@ -3287,18 +3298,23 @@ class BuilderComponent {
         }
     }
     /**
-     * Set --preview-vh on .preview-scroll so that 100vh fills the visible canvas
-     * frame at the current scale. Value = canvas frame height ÷ scale ÷ 100, so
-     * calc(100 * var(--preview-vh)) equals the frame height in canvas-space pixels.
-     * Falls back to 1vh in the live page (no --preview-vh defined there).
+     * Set --preview-vh / --preview-vw on .preview-scroll so that viewport-relative
+     * units (vh, vw) inside the canvas resolve to the simulated canvas dimensions
+     * rather than the real browser viewport.
+     *
+     * --preview-vh = canvas frame height (unscaled) / 100
+     * --preview-vw = canvas width from viewport state / 100
+     *
+     * Both fall back to their native unit in production (no variables defined).
      */
     updatePreviewVh() {
         const el = this.previewScrollRef?.nativeElement;
         if (!el)
             return;
-        const scale = this.viewportService.getState().scale;
-        const frameH = el.clientHeight / scale;
+        const state = this.viewportService.getState();
+        const frameH = el.clientHeight / state.scale;
         el.style.setProperty('--preview-vh', `${frameH / 100}px`);
+        el.style.setProperty('--preview-vw', `${state.width / 100}px`);
         this.canvasFrameHeight = Math.round(frameH);
     }
     initLenis() {