@pygmalionjs/pygmalion 0.22.0 → 0.24.0

package/dist-lib/testing.js

@@ -1,5 +1,5 @@
-import { b$ as d, T as u } from "./runtime-Du2Qf5G-.js";
-import { bp as y, ch as b, ci as E, cj as P, bl as $, aw as T } from "./runtime-Du2Qf5G-.js";
+import { b$ as l, T as u } from "./runtime-DLaOoI2y.js";
+import { br as y, ch as b, ci as E, cj as P, bn as $, aw as T } from "./runtime-DLaOoI2y.js";
 const v = {
   mirror: ["status", "refresh", "refs"],
   session: ["open", "check", "previewVisual", "applyVisual", "revertVisual"],
@@ -9,7 +9,7 @@ const v = {
   storyboard: ["environment", "sourceUsage", "componentBranches"]
 };
 function h(m = {}, t = {}) {
-  const n = [], l = t.origin ?? "", r = (e) => {
+  const n = [], d = t.origin ?? "", r = (e) => {
     var a;
     const i = {};
     for (const o of v[e]) {
@@ -26,8 +26,8 @@ function h(m = {}, t = {}) {
   };
   return {
     calls: n,
-    endpoints: d(t.endpoints),
-    resolveUrl: (e) => `${l}${e}`,
+    endpoints: l(t.endpoints),
+    resolveUrl: (e) => `${d}${e}`,
     mirror: r("mirror"),
     session: r("session"),
     inspect: r("inspect"),

package/dist-lib/types/document/screenImport.d.ts

@@ -0,0 +1,6 @@
+import type { DesignDocument } from './contracts.js';
+import { type CapturedScreenMetadata, type ScreenImportResult, type ScreenImportSource } from '../workspace/capture/contracts.js';
+/** Converts an imported screen (layer tree plus measured boxes) into a freely editable design document. */
+export declare function screenDocumentFromImport(source: ScreenImportSource): ScreenImportResult;
+/** The imported-screen marker of a document, when it has one. */
+export declare function capturedScreenMetadata(document: Pick<DesignDocument, 'metadata'>): CapturedScreenMetadata | null;

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

@@ -36,6 +36,11 @@ export { createLegacyModeAdapter } from './workspace/legacyModeAdapter.js';
 export type * from './workspace/contracts.js';
 export { createWorkspaceTargetResolver, resolveWorkspaceTarget } from './workspace/configuration.js';
 export type { WorkspaceConfiguration, WorkspaceTargetConfiguration, WorkspaceTargetResolverOptions } from './workspace/configuration.js';
+export { capturedScreenMetadata, screenDocumentFromImport } from './document/screenImport.js';
+export { createCapturedScreenDocumentLoader } from './workspace/capture/capturedScreenDocument.js';
+export { withCapturedScreenDocuments } from './workspace/capture/capturedScreenConfiguration.js';
+export { CAPTURED_SCREEN_METADATA_KEY } from './workspace/capture/contracts.js';
+export type { CapturedScreenDocumentLoader, CapturedScreenDocumentOptions, CapturedScreenMetadata, ScreenImportResult, ScreenImportSource } from './workspace/capture/contracts.js';
 export { compileWorkspaceVisualSource, workspaceSourceFingerprint } from './workspace/source/compiler.js';
 export { compileWorkspaceDocumentSource, jsxStructureWrapperClassName } from './workspace/source/structure.js';
 export { compileWorkspaceResponsiveSource, resolveResponsiveLayout, setResponsiveLayoutOverride } from './workspace/source/responsive.js';

package/dist-lib/types/workspace/WorkspaceShell.d.ts

@@ -1,9 +1,12 @@
 import { type WorkspaceConfiguration } from './configuration.js';
+import { type CapturedScreenConfigurationDependencies } from './capture/capturedScreenConfiguration.js';
 
 export interface WorkspaceShellProps {
     configuration: WorkspaceConfiguration;
     sourceRevision: string;
     previewIdentityReady: boolean;
     previewOpen?: boolean;
+    /** Test seam for the captured-screen importer; production builds the offscreen loader. */
+    captureDependencies?: CapturedScreenConfigurationDependencies;
 }
 export declare const WorkspaceShell: import("react").FunctionComponent<WorkspaceShellProps>;

package/dist-lib/types/workspace/capture/captureMedia.d.ts

@@ -0,0 +1,41 @@
+import { type DocumentAsset } from '../../document/assets.js';
+import { type ScreenImportMedia } from './contracts.js';
+export interface SettleScreenOptions {
+    /** The import controller's stability wait, when the host connected one. */
+    waitForStableDocument?(document: Document): Promise<boolean>;
+}
+export interface SettleScreenReport {
+    finishedAnimations: number;
+    cancelledAnimations: number;
+    stable: boolean | null;
+}
+/** Entrance transitions and image decoding must finish before boxes and opacities are read. */
+export declare function settleScreen(document: Document, options?: SettleScreenOptions): Promise<SettleScreenReport>;
+export interface CollectScreenMediaOptions {
+    signal?: AbortSignal;
+    /** Total time for fetching and rasterizing; media beyond the budget stay placeholders. Default 8000. */
+    budgetMs?: number;
+    /** Fetches encoded bytes for a same-origin or CORS-readable URL; null means unreadable. */
+    fetchBytes?(url: string, signal?: AbortSignal): Promise<Uint8Array | null>;
+    /** Draws an element to PNG bytes at the given CSS size; null means the canvas was tainted or unsupported. */
+    rasterize?(element: Element, size: {
+        width: number;
+        height: number;
+    }): Promise<Uint8Array | null>;
+}
+export interface CollectedScreenMedia {
+    media: Record<string, ScreenImportMedia>;
+    assets: DocumentAsset[];
+    diagnostics: string[];
+    stamped: number;
+}
+/**
+ * Serializes an inline SVG the way the editable importer can read it: computed fill and stroke replace
+ * class-driven styling and `currentColor`, rounded rectangles become cubic paths, and non-presentational attributes drop out.
+ */
+export declare function editableSvgMarkup(element: Element): string;
+/**
+ * Stamps every media element and element with a CSS background image, then gathers the bytes behind them.
+ * The stamps survive the DOM importer as attributes, so the converter can match layers to this media map.
+ */
+export declare function collectScreenMedia(document: Document, options?: CollectScreenMediaOptions): Promise<CollectedScreenMedia>;

package/dist-lib/types/workspace/capture/capturedScreenConfiguration.d.ts

@@ -0,0 +1,15 @@
+import type { EditorRuntime } from '../../core/runtime.js';
+import { type WorkspaceConfiguration } from '../configuration.js';
+import type { WorkspaceTarget } from '../contracts.js';
+import { type CapturedScreenDocumentLoader, type CapturedScreenDocumentOptions } from './contracts.js';
+export interface CapturedScreenConfigurationDependencies {
+    /** Test seam; production builds the offscreen importer. */
+    createLoader?(runtime: EditorRuntime, options: CapturedScreenDocumentOptions): CapturedScreenDocumentLoader;
+}
+/** Drafts live per screen and source revision; a new revision starts from a fresh import. */
+export declare const capturedScreenDraftKey: (target: WorkspaceTarget) => string;
+/**
+ * Wraps a host configuration so any routed screen the host does not resolve opens as an imported design
+ * document. Host-resolved targets always win; the fallback only fills targets the host leaves without a loader.
+ */
+export declare function withCapturedScreenDocuments(configuration: WorkspaceConfiguration, runtime: EditorRuntime, dependencies?: CapturedScreenConfigurationDependencies): WorkspaceConfiguration;

package/dist-lib/types/workspace/capture/capturedScreenDocument.d.ts

@@ -0,0 +1,4 @@
+import type { EditorRuntime } from '../../core/runtime.js';
+import type { CapturedScreenDocumentLoader, CapturedScreenDocumentOptions } from './contracts.js';
+/** Opens any routed screen as a design document by booting it offscreen and importing its DOM. */
+export declare function createCapturedScreenDocumentLoader(runtime: EditorRuntime, options?: CapturedScreenDocumentOptions): CapturedScreenDocumentLoader;

package/dist-lib/types/workspace/capture/contracts.d.ts

@@ -0,0 +1,77 @@
+import type { DocumentAsset, ImageScaleMode } from '../../document/assets.js';
+import type { DesignDocument, DocumentDiagnostic } from '../../document/contracts.js';
+import type { ImportedGeometryEntry } from '../../editor/domImport.js';
+import type { NodeJSON, PageModel } from '../../editor/store.js';
+import type { WorkspaceTarget } from '../contracts.js';
+/** What the DOM importer observed on a prepared screen; the converter turns it into a design document. */
+export interface ScreenImportSource {
+    screenId: string;
+    sourceRevision: string;
+    /** Screen name shown as the root frame name. */
+    name: string;
+    route?: string;
+    width: number;
+    height: number;
+    root: NodeJSON;
+    geometry: readonly ImportedGeometryEntry[];
+    truncated?: boolean;
+    importDiagnostics?: readonly string[];
+    /** Media observed on the screen, keyed by the stamp the loader wrote on each element before import. */
+    media?: Readonly<Record<string, ScreenImportMedia>>;
+    /** Image assets the media entries reference; only referenced assets enter the document. */
+    assets?: readonly DocumentAsset[];
+}
+/** The attribute the loader stamps on media elements so their layers can be matched after import. */
+export declare const MEDIA_STAMP_ATTRIBUTE = "data-pygmalion-media";
+export type ScreenImportMedia = {
+    kind: 'svg';
+    markup: string;
+    rasterAssetId?: string;
+} | {
+    kind: 'image';
+    assetId: string;
+    scaleMode: ImageScaleMode;
+} | {
+    kind: 'background';
+    assetId: string;
+    scaleMode: ImageScaleMode;
+};
+export interface ScreenImportResult {
+    document: DesignDocument;
+    diagnostics: DocumentDiagnostic[];
+    nodeCount: number;
+}
+export declare const CAPTURED_SCREEN_METADATA_KEY = "capturedScreen";
+/** Stored under `document.metadata.capturedScreen`; marks a draft that began as an imported screen. */
+export interface CapturedScreenMetadata {
+    version: 1;
+    screenId: string;
+    route?: string;
+    importedAt: string;
+    nodeCount: number;
+    truncated: boolean;
+    diagnostics: string[];
+}
+export interface CapturedScreenDocumentOptions {
+    /** Persists drafts when the host supplies no saveDocument; null disables persistence; default is window.localStorage when present. */
+    draftStorage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | null;
+    /** Which routed screens may open this way; default: every page with a route or a screens import. */
+    canImport?(page: PageModel): boolean;
+    /** Import budget forwarded to the DOM importer; pure DOM by default so pixels match the running screen. */
+    import?: {
+        instanceMode?: 'ignore' | 'collapse' | 'expand';
+    };
+    /** Milliseconds to wait for the screen to load and prepare before giving up. Default 45000. */
+    timeoutMs?: number;
+    /** Milliseconds spent collecting images and drawings before the import continues without the rest. Default 8000. */
+    mediaBudgetMs?: number;
+    /** Where the offscreen frame mounts; default is the document body of the page running the editor. */
+    container?: HTMLElement;
+}
+export interface CapturedScreenDocumentLoader {
+    canImport(page: PageModel): boolean;
+    /** Boots the screen offscreen, prepares its declared state, imports the DOM, and returns the converted document. */
+    load(target: WorkspaceTarget, page: PageModel, options: {
+        signal: AbortSignal;
+    }): Promise<ScreenImportResult>;
+}

package/dist-lib/types/workspace/configuration.d.ts

@@ -6,6 +6,7 @@ import type { WorkspaceTarget } from './contracts.js';
 import type { WorkspaceTokenLibraryCapabilities } from './tokens/contracts.js';
 import type { TextFontPreparationRuntime } from './edit/textFontRuntime.js';
 import type { TextRasterFaceResolver } from './edit/staticTextRaster.js';
+import type { CapturedScreenDocumentOptions } from './capture/contracts.js';
 /** One target's source, data, rendering, and persistence capabilities travel together. */
 export interface WorkspaceTargetConfiguration {
     data?: HostDataCapabilities;
@@ -38,6 +39,8 @@ export interface WorkspaceConfiguration extends WorkspaceTargetConfiguration {
     chrome?: ReactNode;
     /** Undefined explicitly marks an unsupported screen or source revision. */
     resolveTarget?(target: WorkspaceTarget): WorkspaceTargetConfiguration | undefined;
+    /** Open any routed screen the host does not resolve as an imported design document; edits stay drafts until the host connects a source mapping. */
+    capturedScreens?: boolean | CapturedScreenDocumentOptions;
 }
 export interface WorkspaceTargetResolverOptions {
     /** The host decides whether this screen and revision have usable capabilities. */

package/dist-lib/types/workspace/edit/ContentPanel.d.ts

@@ -0,0 +1,24 @@
+import type { DesignDocument, DocumentNode, DocumentTransaction } from '../../document/contracts.js';
+
+export interface ContentPanelProps {
+    document: DesignDocument;
+    act(label: string, apply: (transaction: DocumentTransaction) => void): unknown;
+    selected: readonly string[];
+    onSelect(ids: string[]): void;
+}
+interface ContentRow {
+    id: string;
+    name: string;
+    kind: DocumentNode['kind'];
+    hidden: boolean;
+    tagged: boolean;
+}
+interface ContentSection {
+    id: string;
+    name: string;
+    rows: ContentRow[];
+}
+export declare function contentSections(document: DesignDocument): ContentSection[];
+/** Lists what the screen shows so a designer can pull content out of view or bring it back without touching the layer tree. */
+export declare function ContentPanel({ document, act, selected, onSelect }: ContentPanelProps): import("react").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pygmalionjs/pygmalion",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Code-backed DOM design sandbox and visual QA editor",
   "license": "Apache-2.0",
   "repository": {