@vectoriox/iox-builder 1.4.26 → 1.4.27

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2139,13 +2139,17 @@ 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()}`);
@@ -3294,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() {