@pygmalionjs/pygmalion 0.5.31 → 0.5.33

package/dist-lib/testing.js

@@ -1,4 +1,4 @@
-import { F as s, N as a, e as r, s as i, a as t } from "./FrozenRoutePreview-B6E3mX9a.js";
+import { F as s, N as a, e as r, s as i, a as t } from "./FrozenRoutePreview-hofdx4eP.js";
 export {
   s as FrozenRoutePreviewView,
   a as NodeModel,

package/dist-lib/types/editor/domImport.d.ts

@@ -2,6 +2,25 @@ import type { InstanceHit, InstanceResolver } from './fiberMap';
 import type { NodeJSON } from './store';
 /** Keeps a real 0 — the value that hides hover-only affordances. */
 export declare function clampOpacity(value: string): number;
+/**
+ * Where an imported layer sat in the source document, in model px relative to
+ * the imported root. The walk reads every element's client rect anyway; keeping
+ * the boxes lets the fidelity check (importFidelity.ts) re-measure the mounted
+ * layer tree and compare — a reconstruction is only trustworthy when it puts
+ * the same boxes in the same places the capture had them.
+ *
+ * Entries are addressed by child-index path, not node id: the store re-issues
+ * ids when it deserializes an imported tree, while the tree structure survives
+ * unchanged.
+ */
+export interface ImportedGeometryEntry {
+    /** Child-index chain from the imported root ([] is the root itself). */
+    path: readonly number[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
 export interface DomImportDiagnostic {
     severity: 'warning';
     stage: 'capture';
@@ -51,6 +70,8 @@ export interface DomImportResult {
     truncated: boolean;
     diagnostics: readonly DomImportDiagnostic[];
     metrics: DomImportMetrics;
+    /** Source boxes of the imported layers, for the post-mount fidelity check. */
+    geometry: readonly ImportedGeometryEntry[];
 }
 /** Transformation entry point starting from Element in the same document (or iframe document) — win is the window to which el belongs. */
 export declare function importDomFromElement(el: Element, win: Window, opts?: DomImportOptions): DomImportResult | null;

package/dist-lib/types/editor/importFidelity.d.ts

@@ -0,0 +1,85 @@
+import type { ImportedGeometryEntry } from './domImport';
+/** The shape of a mounted layer tree this check needs — NodeModel satisfies it. */
+export interface LayerImportFidelityNode {
+    id: string;
+    name?: string;
+    hidden?: boolean;
+    children?: readonly LayerImportFidelityNode[];
+}
+interface MeasuredBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MeasurableElement {
+    getBoundingClientRect(): MeasuredBox;
+    ownerDocument?: {
+        createRange?: () => {
+            selectNodeContents(node: unknown): void;
+            getBoundingClientRect(): MeasuredBox;
+        };
+    };
+}
+export interface LayerImportBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface LayerImportDrift {
+    nodeId: string;
+    name: string;
+    path: readonly number[];
+    /** Where the capture had the layer, model px relative to the root. */
+    source: LayerImportBox;
+    /** Where the reconstruction put it. */
+    rendered: LayerImportBox;
+    dx: number;
+    dy: number;
+    dwidth: number;
+    dheight: number;
+    /** Largest absolute component of the drift, in model px. */
+    drift: number;
+}
+export interface LayerImportFidelityReport {
+    /** Layers that had both a source box and a mounted element to measure. */
+    checked: number;
+    /** Layers whose box moved or resized beyond the tolerance. */
+    drifted: number;
+    maxDriftPx: number;
+    /** The largest offenders, capped, largest first. */
+    worst: readonly LayerImportDrift[];
+    /** False when the reconstruction should not be trusted as the screen. */
+    ok: boolean;
+}
+/**
+ * Sub-tolerance drift is expected, not suspicious: fit/fill sizing modes
+ * quantize to whole px, text metrics round per line, and the canvas transform
+ * divides back out through floating point. 4px keeps that noise out of the
+ * report while catching any real layout change — one dropped wrap moves a
+ * box by a line height.
+ */
+export declare const LAYER_DRIFT_TOLERANCE_PX = 4;
+/** A single layer this far off means the screen no longer reads as captured. */
+export declare const LAYER_FIDELITY_MAX_DRIFT_PX = 12;
+/** Many slightly-off layers are as untrustworthy as one badly-off layer. */
+export declare const LAYER_FIDELITY_MAX_DRIFT_RATIO = 0.05;
+/** Resolves a geometry path (child-index chain) inside a mounted layer tree. */
+export declare function nodeAtGeometryPath(root: LayerImportFidelityNode, path: readonly number[]): LayerImportFidelityNode | null;
+export interface LayerImportFidelityInput {
+    root: LayerImportFidelityNode;
+    geometry: readonly ImportedGeometryEntry[];
+    /** Canvas zoom at measurement time — rendered rects are visual px. */
+    scale: number;
+    /** data-node-id lookup, injectable so the comparison is testable. */
+    resolveElement: (nodeId: string) => MeasurableElement | null;
+}
+/**
+ * Measures the mounted layer tree against the source geometry the import
+ * recorded. Returns null when the tree is not measurable yet (the root element
+ * is unmounted, or nothing could be paired) — callers retry after mount; a
+ * report, once produced, is final for that import.
+ */
+export declare function assessLayerImportFidelity(input: LayerImportFidelityInput): LayerImportFidelityReport | null;
+export {};

package/dist-lib/types/editor/store.d.ts

@@ -4,6 +4,7 @@ import { type CardBadgeOption, type CardSlotDef, type ScreenCardDef } from './sc
 import { type ScreenListDef } from './screenLists';
 import { type DesignImportAsset, type DesignImportKind, type DesignFrameSizeMode, type DesignScreenAssertion, type DesignScreenInteraction, type DesignScreenPreset, type StoryboardEnvironment } from './designImport';
 import { type DomImportDiagnostic, type DomImportResult } from './domImport';
+import { type LayerImportFidelityReport, type MeasurableElement } from './importFidelity';
 import { type DesignFrameHeightMode } from './frameHeight';
 import { type RegistryPropValue } from './registry';
 import { type PrimitiveSourceValue } from './inspect';
@@ -231,6 +232,8 @@ export interface PageModel {
     layerImportTruncated?: boolean;
     layerImportDiagnostics?: readonly DomImportDiagnostic[];
     layerImportError?: string;
+    /** Post-mount geometry comparison of the imported layers vs their capture. */
+    layerImportFidelity?: LayerImportFidelityReport;
     /** Page edit revision recorded when the layers were imported. */
     layerImportRevision?: number;
     /** Frame width the layers were imported at — their geometry is only valid there. */
@@ -425,6 +428,8 @@ export declare class EditorStore {
     private pageEditRevisions;
     /** pageId → edit revision at the moment a frozen preview was promoted without a boot (D2). */
     private provisionalLayerImports;
+    /** pageId → source geometry awaiting its post-mount fidelity measurement. */
+    private pendingLayerImportGeometry;
     private contentLayoutScheduled;
     private contentLayoutCanvases;
     constructor();
@@ -680,8 +685,22 @@ export declare class EditorStore {
     /** Keeps the current (user-edited) tree and stops further live re-import attempts for the page. */
     discardProvisionalLayerImport(pageId: string): void;
     /** Design importer automatically inserts the capture results into the existing frame. The route is maintained for live preview. */
-    replacePageRootFromDom(pageId: string, rootJson: NodeJSON, result?: Pick<DomImportResult, 'count' | 'truncated'> & Partial<Pick<DomImportResult, 'diagnostics' | 'metrics'>>): void;
+    replacePageRootFromDom(pageId: string, rootJson: NodeJSON, result?: Pick<DomImportResult, 'count' | 'truncated'> & Partial<Pick<DomImportResult, 'diagnostics' | 'metrics' | 'geometry'>>): void;
     setPageLayerImportError(pageId: string, message: string): void;
+    /**
+     * Runs the fidelity measurement once the imported tree has committed and
+     * laid out — one frame for React, one for layout. FrameView re-invokes the
+     * assessment on mount as well, because a frame can import while its canvas
+     * surface is detached (LOD) and only become measurable later.
+     */
+    private scheduleLayerImportFidelityCheck;
+    /**
+     * Compares the mounted layer tree against the source geometry its import
+     * recorded (importFidelity.ts). Idempotent per import: the pending geometry
+     * is consumed by the first measurement that finds the tree mounted, and a
+     * re-import queues fresh geometry.
+     */
+    assessLayerImportFidelityForPage(pageId: string, resolveElement?: (nodeId: string) => MeasurableElement | null): void;
     /** Switch pages by name — Path used by the host fixture's actual button handler (pygmalionNavigate). */
     navigateToPageByName(name: string): void;
     /** Show preview overlay — page navigation with Scyllender, linkTo/host navigation without editor chrome. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pygmalionjs/pygmalion",
-  "version": "0.5.31",
+  "version": "0.5.33",
   "description": "Code-backed DOM design sandbox and visual QA editor",
   "license": "UNLICENSED",
   "publishConfig": {