@vectoriox/iox-builder 1.4.7 → 1.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/types/vectoriox-iox-builder.d.ts

@@ -332,6 +332,8 @@ interface DeviceOption {
     label: string;
     icon: string;
     width: number;
+    /** Simulated browser viewport height in CSS px. */
+    height: number;
 }
 declare const DEVICE_OPTIONS: DeviceOption[];
 interface ZoomOption {
@@ -608,7 +610,9 @@ interface ViewportState {
     device: DeviceMode;
     /** Real canvas width in CSS pixels (e.g., 1440 for desktop). */
     width: number;
-    /** Visual scale factor (0–1+). Canvas is rendered at `width` then scaled. */
+    /** Real canvas height in CSS pixels (e.g., 900 for desktop). Simulates the browser viewport. */
+    height: number;
+    /** Visual scale factor (0–1+). Canvas is rendered at `width × height` then scaled. */
     scale: number;
 }
 declare class ViewportService {
@@ -623,9 +627,17 @@ declare class ViewportService {
     /**
      * Calculate the scale that makes the canvas fit inside the available editor width.
      * @param availableWidth The pixel width of the editor area that holds the canvas.
-     * @param padding Optional horizontal padding to subtract (default 20px each side).
+     * @param padding Optional horizontal padding to subtract (default 40px total).
      */
     fitToWidth(availableWidth: number, padding?: number): void;
+    /**
+     * Calculate the scale that makes the canvas fit both the available width AND height.
+     * Uses the smaller of the two scale factors so the entire viewport frame is visible.
+     * @param containerWidth  Available container width in screen pixels.
+     * @param containerHeight Available container height in screen pixels.
+     * @param padding         Total padding to subtract from both dimensions (default 40px).
+     */
+    fitToSize(containerWidth: number, containerHeight: number, padding?: number): void;
     /**
      * Convert a screen-space coordinate to canvas-space (unscaled).
      * Call this when translating pointer events into canvas-relative positions.
@@ -714,6 +726,8 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     get globalElementsAfter(): ComponentNode[];
     /** Canvas width in CSS pixels (driven by ViewportService). */
     get viewportWidth(): number;
+    /** Canvas viewport height in CSS pixels (driven by ViewportService). */
+    get viewportHeight(): number;
     /** Visual (scaled) canvas width — used to size the scroll container so the
      *  scrollbar aligns with the right edge of the canvas, not the CMS shell. */
     get viewportScaledWidth(): number;
@@ -727,10 +741,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
      * not unscaled CSS px — correct at any zoom level.
      */
     get scaledContentHeight(): number;
-    /**
-     * The canvas min-height simulates a real browser viewport.
-     * We subtract the builder header (~49px) and some padding from window.innerHeight.
-     */
+    /** The canvas starts at the simulated viewport height, just like a real empty browser page. */
     get canvasMinHeight(): number;
     private sub?;
     private registrySub?;
@@ -739,6 +750,13 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /**
+     * Set --preview-vh on .preview-scroll so that vh values rewritten by
+     * StyleRegistryService resolve to the SIMULATED viewport height, not the
+     * real browser viewport. e.g. desktop (900px): --preview-vh = 9px → 100vh = 900px.
+     * Falls back to 1vh in production where --preview-vh is never defined.
+     */
+    private updatePreviewVh;
     private initLenis;
     private destroyLenis;
     addComponent(name: string): void;
@@ -833,6 +851,13 @@ declare class StyleRegistryService {
     remove(nodeId: string): void;
     destroy(): void;
     private compile;
+    /**
+     * 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`.
+     */
+    private rewriteVh;
     private toKebabCase;
     private flush;
     static ɵfac: i0.ɵɵFactoryDeclaration<StyleRegistryService, never>;