@ng-prism/core 22.1.4 → 22.2.0-beta.1

package/README.md

@@ -135,13 +135,14 @@ Link to a `@Showcase`-decorated component for combined API docs + custom renderi
 
 ## Official Plugins
 
-| Plugin    | Package                      | Description                                  |
-| --------- | ---------------------------- | -------------------------------------------- |
-| JSDoc     | `@ng-prism/plugin-jsdoc`     | API documentation from JSDoc comments        |
-| Figma     | `@ng-prism/plugin-figma`     | Figma design embed + visual diff             |
-| Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector                      |
-| Perf      | `@ng-prism/plugin-perf`      | Render performance profiling                 |
-| Coverage  | `@ng-prism/plugin-coverage`  | Per-component test coverage from Istanbul/v8 |
+| Plugin    | Package                              | Description                                                   |
+| --------- | ------------------------------------ | ------------------------------------------------------------- |
+| JSDoc     | `@ng-prism/plugin-jsdoc`             | API documentation from JSDoc comments                         |
+| Figma     | `@ng-prism/plugin-figma`             | Figma design embed + visual diff                              |
+| Box Model | `@ng-prism/plugin-box-model`         | CSS box model inspector                                       |
+| Perf      | `@ng-prism/plugin-perf`              | Render performance profiling                                  |
+| Coverage  | `@ng-prism/plugin-coverage`          | Per-component test coverage from Istanbul/v8                  |
+| VRT       | `@ng-prism/plugin-visual-regression` | Per-variant visual regression report from a screenshot runner |
 
 > **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
 

package/dist/app/discovery-manifest.d.ts

@@ -0,0 +1,13 @@
+import type { DiscoveryManifest, RuntimeManifest } from '../plugin/plugin.types.js';
+/** Sanitised `meta`, or `undefined` when there is nothing worth exposing. */
+export declare function serializableMeta(meta: Record<string, unknown> | undefined): Record<string, unknown> | undefined;
+/**
+ * Builds the discovery view of the manifest — what `__PRISM_MANIFEST__` exposes.
+ *
+ * It is deliberately not the runtime manifest: no Angular class references, no
+ * providers, no scanned input/output metadata. It carries what an external tool
+ * needs to enumerate and address variants, plus the `@Showcase` metadata that
+ * lets a tool decide how to treat one.
+ */
+export declare function buildDiscoveryManifest(manifest: RuntimeManifest): DiscoveryManifest;
+//# sourceMappingURL=discovery-manifest.d.ts.map

package/dist/app/discovery-manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,eAAe,EAChB,MAAM,2BAA2B,CAAC;AAoDnC,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GACxC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAOrC;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,GACxB,iBAAiB,CAsCnB"}

package/dist/app/discovery-manifest.js

@@ -0,0 +1,106 @@
+import { resolveVariantBg } from '../shared/variant-bg.js';
+/**
+ * External tooling reads `__PRISM_MANIFEST__` through a structured-clone bridge
+ * (`page.evaluate()` in Playwright, `postMessage`, devtools). `ShowcaseConfig.meta`
+ * is declared as an open `Record<string, unknown>`, so a consumer is free to put
+ * a component class, a function or a cyclic object in there — any of which makes
+ * that bridge throw or silently drop the whole payload.
+ *
+ * Everything crossing into the global is therefore reduced to plain JSON-safe
+ * values: primitives, arrays, and objects with a plain prototype. Class
+ * instances (Angular types included), functions, symbols, Dates, Maps and DOM
+ * nodes are dropped rather than half-serialised, and cycles are broken.
+ *
+ * Array elements become `null` when they cannot be represented, matching
+ * `JSON.stringify` so indices stay stable.
+ */
+function toSerializable(value, seen) {
+    if (value === null)
+        return null;
+    const type = typeof value;
+    if (type === 'string' || type === 'boolean')
+        return value;
+    if (type === 'number')
+        return Number.isFinite(value) ? value : undefined;
+    if (type !== 'object')
+        return undefined;
+    const object = value;
+    if (seen.has(object))
+        return undefined;
+    if (Array.isArray(object)) {
+        seen.add(object);
+        const items = object.map((item) => {
+            const serialized = toSerializable(item, seen);
+            return serialized === undefined ? null : serialized;
+        });
+        seen.delete(object);
+        return items;
+    }
+    const proto = Object.getPrototypeOf(object);
+    if (proto !== Object.prototype && proto !== null)
+        return undefined;
+    seen.add(object);
+    const result = {};
+    for (const [key, item] of Object.entries(object)) {
+        const serialized = toSerializable(item, seen);
+        if (serialized !== undefined)
+            result[key] = serialized;
+    }
+    seen.delete(object);
+    return result;
+}
+/** Sanitised `meta`, or `undefined` when there is nothing worth exposing. */
+export function serializableMeta(meta) {
+    if (!meta)
+        return undefined;
+    const serialized = toSerializable(meta, new Set());
+    if (!serialized || Object.keys(serialized).length === 0)
+        return undefined;
+    return serialized;
+}
+/**
+ * Builds the discovery view of the manifest — what `__PRISM_MANIFEST__` exposes.
+ *
+ * It is deliberately not the runtime manifest: no Angular class references, no
+ * providers, no scanned input/output metadata. It carries what an external tool
+ * needs to enumerate and address variants, plus the `@Showcase` metadata that
+ * lets a tool decide how to treat one.
+ */
+export function buildDiscoveryManifest(manifest) {
+    return {
+        components: manifest.components.map((component) => {
+            const { className, showcaseConfig } = component.meta;
+            // An empty `variants` array is not "no variants": the renderer still
+            // instantiates the component with its declared defaults at index 0 and
+            // marks it `data-prism-rendered="<class>:0"`. Reporting zero variants
+            // here would let a runner walk past a component the app happily renders
+            // — the quiet coverage loss the `excluded` status exists to prevent.
+            const declared = showcaseConfig.variants ?? [];
+            const variants = declared.length
+                ? declared.map((variant, index) => {
+                    const meta = serializableMeta(variant.meta);
+                    const bg = resolveVariantBg(showcaseConfig, index);
+                    return meta
+                        ? { name: variant.name, index, bg, meta }
+                        : { name: variant.name, index, bg };
+                })
+                : [
+                    {
+                        name: 'Default',
+                        index: 0,
+                        bg: resolveVariantBg(showcaseConfig, 0),
+                    },
+                ];
+            const meta = serializableMeta(showcaseConfig.meta);
+            const discovered = {
+                className,
+                title: showcaseConfig.title,
+                variants,
+            };
+            if (meta)
+                discovered.meta = meta;
+            return discovered;
+        }),
+        pages: (manifest.pages ?? []).map((page) => ({ title: page.title })),
+    };
+}

package/dist/app/icons/prism-icon.component.d.ts

@@ -1,4 +1,19 @@
 import * as i0 from "@angular/core";
+/** Every name the registry can draw — what a panel's `icon` has to pick from. */
+export declare const ICON_NAMES: readonly string[];
+/**
+ * The glyph markup for `name`, or `undefined` when the registry has no entry.
+ *
+ * A miss is warned about rather than passed over, because the symptom is
+ * invisible: the `<svg>` is still built at the right size, so a missing entry
+ * renders as a correctly-spaced blank and reads like a CSS bug. Plugins declare
+ * `icon` as a free-form string and are compiled separately from this registry,
+ * so nothing else catches the typo — the visual regression panel shipped with a
+ * blank tab icon exactly this way.
+ *
+ * Warned once per name: an icon on a panel tab re-renders constantly.
+ */
+export declare function resolveIcon(name: string): string | undefined;
 export declare class PrismIconComponent {
     readonly name: import("@angular/core").InputSignal<string>;
     readonly size: import("@angular/core").InputSignal<number>;

package/dist/app/icons/prism-icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAmDA,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}
+{"version":3,"file":"prism-icon.component.d.ts","sourceRoot":"","sources":["../../../src/app/icons/prism-icon.component.ts"],"names":[],"mappings":";AAqDA,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC;AAIhE;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAW5D;AAED,qBAOa,kBAAkB;IAC7B,QAAQ,CAAC,IAAI,8CAA4B;IACzC,QAAQ,CAAC,IAAI,8CAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;;yCAJ3C,kBAAkB;2CAAlB,kBAAkB;CAkC9B"}

package/dist/app/icons/prism-icon.component.js

@@ -19,6 +19,7 @@ const ICONS = {
     'box-select': '<path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1m4 0h1M9 21h1m4 0h1M3 9v1m0 4v1M21 9v1m0 4v1"/>',
     activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
     'shield-check': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+    camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
     move: '<path d="M12 2v20M2 12h20m-16-4-4 4 4 4m12-8 4 4-4 4M8 8l-4 4 4 4"/>',
     crosshair: '<circle cx="12" cy="12" r="10"/><path d="M22 12h-4M6 12H2m10-6V2m0 20v-4"/>',
     copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
@@ -29,6 +30,29 @@ const ICONS = {
     check: '<path d="M20 6 9 17l-5-5"/>',
 };
 const SVG_NS = 'http://www.w3.org/2000/svg';
+/** Every name the registry can draw — what a panel's `icon` has to pick from. */
+export const ICON_NAMES = Object.keys(ICONS);
+const warnedIcons = new Set();
+/**
+ * The glyph markup for `name`, or `undefined` when the registry has no entry.
+ *
+ * A miss is warned about rather than passed over, because the symptom is
+ * invisible: the `<svg>` is still built at the right size, so a missing entry
+ * renders as a correctly-spaced blank and reads like a CSS bug. Plugins declare
+ * `icon` as a free-form string and are compiled separately from this registry,
+ * so nothing else catches the typo — the visual regression panel shipped with a
+ * blank tab icon exactly this way.
+ *
+ * Warned once per name: an icon on a panel tab re-renders constantly.
+ */
+export function resolveIcon(name) {
+    const content = ICONS[name];
+    if (content === undefined && !warnedIcons.has(name)) {
+        warnedIcons.add(name);
+        console.warn(`[ng-prism] Unknown icon "${name}" — rendering an empty glyph. Available: ${ICON_NAMES.join(', ')}.`);
+    }
+    return content;
+}
 export class PrismIconComponent {
     name = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -39,7 +63,7 @@ export class PrismIconComponent {
         effect(() => {
             const iconName = this.name();
             const iconSize = this.size();
-            const content = ICONS[iconName] ?? '';
+            const content = resolveIcon(iconName) ?? '';
             const host = this.el.nativeElement;
             host.innerHTML = '';
             const svg = document.createElementNS(SVG_NS, 'svg');
@@ -66,4 +90,4 @@ export class PrismIconComponent {
         type: Component,
         args: [{ selector: 'prism-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ``, styles: [":host { display: inline-flex; align-items: center; justify-content: center; }"] }]
     }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 59 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconComponent, { className: "PrismIconComponent", filePath: "app/icons/prism-icon.component.ts", lineNumber: 91 }); })();

package/dist/app/provide-prism.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAStE,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACzC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,eAAe,EACzB,MAAM,CAAC,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,oBAAoB,CAuCtB"}
+{"version":3,"file":"provide-prism.d.ts","sourceRoot":"","sources":["../../src/app/provide-prism.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAUtE,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACzC;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,eAAe,EACzB,MAAM,CAAC,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,oBAAoB,CAiCtB"}

package/dist/app/provide-prism.js

@@ -1,6 +1,7 @@
 import { makeEnvironmentProviders, } from '@angular/core';
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import { componentPage } from '../plugin/page-helpers.js';
+import { buildDiscoveryManifest } from './discovery-manifest.js';
 import { BUILTIN_PANELS } from './panels/builtin-panels.js';
 import { PRISM_BUILTIN_PANELS, PRISM_CONFIG, PRISM_MANIFEST, } from './tokens/prism-tokens.js';
 export function providePrism(manifest, config, options) {
@@ -13,19 +14,13 @@ export function providePrism(manifest, config, options) {
             ],
         }
         : manifest;
-    // Exposes a thin discovery view of the manifest to external audit tooling.
-    // We intentionally only expose className + variant info — no Angular type references.
+    // Exposes a thin discovery view of the manifest to external audit tooling:
+    // class name, title, variants, and the `@Showcase` metadata a tool needs to
+    // decide how to treat a variant. Still no Angular type references — see
+    // buildDiscoveryManifest for what gets stripped and why.
     if (typeof globalThis !== 'undefined') {
-        globalThis['__PRISM_MANIFEST__'] = {
-            components: mergedManifest.components.map((c) => ({
-                className: c.meta.className,
-                variants: c.meta.showcaseConfig.variants?.map((v, i) => ({
-                    name: v.name,
-                    index: i,
-                })) ?? [{ name: 'Default', index: 0 }],
-            })),
-            pages: (mergedManifest.pages ?? []).map((p) => ({ title: p.title })),
-        };
+        globalThis['__PRISM_MANIFEST__'] =
+            buildDiscoveryManifest(mergedManifest);
     }
     return makeEnvironmentProviders([
         { provide: PRISM_MANIFEST, useValue: mergedManifest },

package/dist/app/renderer/overlay-resolver.d.ts

@@ -0,0 +1,25 @@
+import type { Type } from '@angular/core';
+import type { PanelDefinition } from '../../plugin/plugin.types.js';
+/** What the renderer should show in the overlay slot inside `.demo-wrap`. */
+export type OverlayResolution = {
+    kind: 'none';
+} | {
+    kind: 'eager';
+    component: Type<unknown>;
+} | {
+    kind: 'lazy';
+    panelId: string;
+    load: () => Promise<Type<unknown>>;
+};
+/**
+ * Decides which overlay component belongs to the active panel.
+ *
+ * Panel overlays render *inside* `.demo-wrap` — the same element external
+ * screenshot tools capture — so capture mode resolves to `none` regardless of
+ * which panel is active, and never triggers a lazy overlay load.
+ */
+export declare function resolveOverlay(panels: readonly PanelDefinition[], activePanelId: string, options: {
+    captureActive: boolean;
+    cache: ReadonlyMap<string, Type<unknown>>;
+}): OverlayResolution;
+//# sourceMappingURL=overlay-resolver.d.ts.map

package/dist/app/renderer/overlay-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-resolver.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/overlay-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3C;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CACpC,CAAC;AAIN;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,SAAS,eAAe,EAAE,EAClC,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE;IACP,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CAC3C,GACA,iBAAiB,CAkBnB"}

package/dist/app/renderer/overlay-resolver.js

@@ -0,0 +1,25 @@
+const NONE = { kind: 'none' };
+/**
+ * Decides which overlay component belongs to the active panel.
+ *
+ * Panel overlays render *inside* `.demo-wrap` — the same element external
+ * screenshot tools capture — so capture mode resolves to `none` regardless of
+ * which panel is active, and never triggers a lazy overlay load.
+ */
+export function resolveOverlay(panels, activePanelId, options) {
+    if (options.captureActive)
+        return NONE;
+    const panel = panels.find((p) => p.id === activePanelId);
+    if (!panel)
+        return NONE;
+    if (panel.overlayComponent) {
+        return { kind: 'eager', component: panel.overlayComponent };
+    }
+    if (panel.loadOverlayComponent) {
+        const cached = options.cache.get(panel.id);
+        return cached
+            ? { kind: 'eager', component: cached }
+            : { kind: 'lazy', panelId: panel.id, load: panel.loadOverlayComponent };
+    }
+    return NONE;
+}

package/dist/app/renderer/prism-renderer.component.d.ts

@@ -2,6 +2,7 @@ import { Injector, type Type } from '@angular/core';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismRendererComponent {
@@ -9,6 +10,7 @@ export declare class PrismRendererComponent {
     protected readonly navigationService: PrismNavigationService;
     protected readonly rendererService: PrismRendererService;
     protected readonly canvasService: PrismCanvasService;
+    protected readonly capture: PrismCaptureService;
     protected readonly variantBg: PrismVariantBgService;
     private readonly eventLogService;
     private readonly manifestService;

package/dist/app/renderer/prism-renderer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAKhF,qBA8Ia,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCA9OJ,sBAAsB;2CAAtB,sBAAsB;CA4PlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBAqJa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,OAAO,sBAA+B;IACzD,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IAmFH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxOJ,sBAAsB;2CAAtB,sBAAsB;CAsPlC"}

package/dist/app/renderer/prism-renderer.component.js

@@ -9,17 +9,31 @@ import { PrismPanelService } from '../services/prism-panel.service.js';
 import { PrismPluginService } from '../services/prism-plugin.service.js';
 import { PrismRendererService } from '../services/prism-renderer.service.js';
 import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.component.js';
 import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
 import { buildKnownInputs } from './known-inputs.js';
+import { resolveOverlay } from './overlay-resolver.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
-function PrismRendererComponent_Conditional_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function PrismRendererComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "span", 4);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(3, "div", 5)(4, "prism-canvas-rulers")(5, "prism-canvas-bg-pill");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r0.Math.round(ctx_r0.canvasService.zoom() * 100), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("visible", ctx_r0.canvasService.guides());
+} }
+function PrismRendererComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function PrismRendererComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_10_ng_container_0_Template, 1, 0, "ng-container", 6);
+function PrismRendererComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 6);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngComponentOutlet", ctx_r0.activeOverlay())("ngComponentOutletInputs", ctx_r0.overlayInputs)("ngComponentOutletInjector", ctx_r0.overlayInjector());
@@ -29,6 +43,7 @@ export class PrismRendererComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
     canvasService = inject(PrismCanvasService);
+    capture = inject(PrismCaptureService);
     variantBg = inject(PrismVariantBgService);
     eventLogService = inject(PrismEventLogService);
     manifestService = inject(PrismManifestService);
@@ -123,32 +138,24 @@ export class PrismRendererComponent {
                 ...BUILTIN_PANELS,
                 ...this.pluginService.panels(),
             ];
-            const panel = allPanels.find((p) => p.id === panelId) ?? null;
-            if (!panel) {
-                this.activeOverlay.set(null);
+            const resolution = resolveOverlay(allPanels, panelId, {
+                captureActive: this.capture.active(),
+                cache: this.overlayCache,
+            });
+            if (resolution.kind === 'eager') {
+                this.activeOverlay.set(resolution.component);
                 return;
             }
-            if (panel.overlayComponent) {
-                this.activeOverlay.set(panel.overlayComponent);
+            this.activeOverlay.set(null);
+            if (resolution.kind !== 'lazy')
                 return;
-            }
-            if (panel.loadOverlayComponent) {
-                const cached = this.overlayCache.get(panel.id);
-                if (cached) {
-                    this.activeOverlay.set(cached);
-                    return;
+            const { panelId: requestedPanelId, load } = resolution;
+            load().then((c) => {
+                this.overlayCache.set(requestedPanelId, c);
+                if (this.panelService.activePanelId() === requestedPanelId) {
+                    this.activeOverlay.set(c);
                 }
-                this.activeOverlay.set(null);
-                const requestedPanelId = panel.id;
-                panel.loadOverlayComponent().then((c) => {
-                    this.overlayCache.set(requestedPanelId, c);
-                    if (this.panelService.activePanelId() === requestedPanelId) {
-                        this.activeOverlay.set(c);
-                    }
-                });
-                return;
-            }
-            this.activeOverlay.set(null);
+            });
         });
         this.destroyRef.onDestroy(() => this.cleanup());
     }
@@ -230,29 +237,25 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 11, vars: 10, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "span", 3);
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(4, "div", 4)(5, "prism-canvas-rulers")(6, "prism-canvas-bg-pill");
-            i0.ɵɵelementStart(7, "div", 5);
-            i0.ɵɵelementContainer(8, null, 0);
-            i0.ɵɵconditionalCreate(10, PrismRendererComponent_Conditional_10_Template, 1, 3, "ng-container");
+        } }, decls: 6, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 6, 3);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵelementContainer(3, null, 0);
+            i0.ɵɵconditionalCreate(5, PrismRendererComponent_Conditional_5_Template, 1, 3, "ng-container");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵattribute("data-bg", ctx.variantBg.effective())("data-rulers", ctx.canvasService.rulers() ? "" : null);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("", ctx.Math.round(ctx.canvasService.zoom() * 100), "%");
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("visible", ctx.canvasService.guides());
-            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(!ctx.capture.active() ? 1 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵstyleProp("--zoom", ctx.canvasService.zoom());
             i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-canvas-layout", ctx.canvasLayout());
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.activeOverlay() ? 10 : -1);
+            i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
             PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    \n\n\n\n\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"][_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -266,6 +269,7 @@ export class PrismRendererComponent {
       [attr.data-bg]="variantBg.effective()"
       [attr.data-rulers]="canvasService.rulers() ? '' : null"
     >
+      @if (!capture.active()) {
       <div class="canvas-badges">
         <span class="c-badge"
           >{{ Math.round(canvasService.zoom() * 100) }}%</span
@@ -277,6 +281,7 @@ export class PrismRendererComponent {
       ></div>
       <prism-canvas-rulers />
       <prism-canvas-bg-pill />
+      }
 
       <div
         class="demo-wrap"
@@ -296,11 +301,11 @@ export class PrismRendererComponent {
         }
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
+  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    /* Flat, not dotted. \"light\" and \"dark\" name a surface a component was\n       designed against \u2014 and they are the two backgrounds whose colour is\n       absolute rather than a theme token, which is what makes them the values\n       to declare for a screenshot baseline. \"dots\" already exists for anyone\n       who wants the grid. */\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      display: inline-block;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n    }\n    .demo-wrap[data-canvas-layout=\"stretch\"] {\n      display: block;\n      width: 100%;\n      max-width: 800px;\n    }\n\n  "] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 180 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 189 }); })();
 // SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
 // in developer-authored source code. It is trusted by ng-prism's threat model
 // (see SECURITY.md). Sanitization would strip the Angular component/directive

package/dist/app/services/prism-canvas.service.d.ts

@@ -6,6 +6,7 @@ export declare class PrismCanvasService {
     readonly zoom: import("@angular/core").WritableSignal<number>;
     readonly guides: import("@angular/core").WritableSignal<boolean>;
     readonly rulers: import("@angular/core").WritableSignal<boolean>;
+    private readonly capture;
     constructor();
     setBg(bg: CanvasBg): void;
     setZoom(z: number): void;

package/dist/app/services/prism-canvas.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAE3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;;IAMhC,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,IAAI;yCA5CD,kBAAkB;6CAAlB,kBAAkB;CAyD9B"}
+{"version":3,"file":"prism-canvas.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-canvas.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAG3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC7B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;IAEhC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;;IAWvD,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,IAAI;yCAnDD,kBAAkB;6CAAlB,kBAAkB;CAiE9B"}

package/dist/app/services/prism-canvas.service.js

@@ -1,5 +1,6 @@
-import { Injectable, signal } from '@angular/core';
+import { inject, Injectable, signal } from '@angular/core';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { PrismCaptureService } from './prism-capture.service.js';
 import * as i0 from "@angular/core";
 const STORAGE_KEY = 'ng-prism-canvas';
 export class PrismCanvasService {
@@ -11,7 +12,14 @@ export class PrismCanvasService {
     ...(ngDevMode ? [{ debugName: "guides" }] : /* istanbul ignore next */ []));
     rulers = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rulers" }] : /* istanbul ignore next */ []));
+    capture = inject(PrismCaptureService);
     constructor() {
+        // Capture mode renders for a screenshot tool: persisted zoom, guides and
+        // rulers would leak a previous session's state into the image, so the
+        // defaults (zoom 1, no guides, no rulers) are kept and nothing is written
+        // back.
+        if (this.capture.active())
+            return;
         this.loadFromStorage();
     }
     setBg(bg) {
@@ -49,6 +57,8 @@ export class PrismCanvasService {
         catch { }
     }
     save() {
+        if (this.capture.active())
+            return;
         try {
             localStorage.setItem(STORAGE_KEY, JSON.stringify({
                 bg: this.bg(),

package/dist/app/services/prism-capture.service.d.ts

@@ -0,0 +1,42 @@
+import * as i0 from "@angular/core";
+/** URL query parameter that switches the Prism canvas into capture-isolation mode. */
+export declare const CAPTURE_PARAM = "capture";
+/** Attribute set on `<html>` while capture mode is active. */
+export declare const CAPTURE_ATTRIBUTE = "data-prism-capture";
+/**
+ * Capture-isolation mode.
+ *
+ * Screenshot tools clip the composited page to the capture target's box, so
+ * anything painted behind or inside `.demo-wrap` ends up in the image. Capture
+ * mode strips the canvas background down to its opaque, patternless colour —
+ * keeping whatever `@Showcase({ bg })` declared — suppresses every piece of
+ * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
+ * identically on every run.
+ *
+ * The flag is read once from the URL at construction time and never written
+ * back — {@link PrismUrlStateService} rebuilds the query string from scratch,
+ * so navigating inside the app drops `?capture=1` from the address bar while
+ * the mode itself stays on for the lifetime of the document.
+ *
+ * Reading in the constructor (rather than during `PrismUrlStateService.init()`)
+ * is deliberate: `PrismCanvasService` restores persisted zoom in *its* own
+ * constructor, which can run first, so anything init-order dependent would
+ * make zoom-locking racy.
+ */
+export declare class PrismCaptureService {
+    private readonly _active;
+    /** True while the app renders for an external screenshot tool. */
+    readonly active: import("@angular/core").Signal<boolean>;
+    constructor();
+    private applyToDocument;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismCaptureService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrismCaptureService>;
+}
+/**
+ * Parses the capture flag out of a `window.location.search` string.
+ *
+ * Accepts `?capture`, `?capture=1` and `?capture=true` as "on"; anything else
+ * (including `?capture=0` and `?capture=false`) is "off".
+ */
+export declare function parseCaptureParam(search: string): boolean;
+//# sourceMappingURL=prism-capture.service.d.ts.map

package/dist/app/services/prism-capture.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAqCtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;6CAAnB,mBAAmB;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}

package/dist/app/services/prism-capture.service.js

@@ -0,0 +1,100 @@
+import { Injectable, signal } from '@angular/core';
+import * as i0 from "@angular/core";
+/** URL query parameter that switches the Prism canvas into capture-isolation mode. */
+export const CAPTURE_PARAM = 'capture';
+/** Attribute set on `<html>` while capture mode is active. */
+export const CAPTURE_ATTRIBUTE = 'data-prism-capture';
+const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
+/**
+ * Global stylesheet applied in capture mode.
+ *
+ * This has to be a document-level stylesheet rather than a component `styles`
+ * block: Angular's emulated view encapsulation scopes component styles to that
+ * component's own content attribute, so a rule written inside the renderer
+ * could never reach into the dynamically created showcase component to stop
+ * *its* transitions and animations.
+ *
+ * Stripping `background-image` is what makes the canvas capture-safe without
+ * flattening it to one colour. Every `data-bg` value is a background *colour*
+ * plus, for all but `plain`, a repeating *pattern* — dots or a checkerboard.
+ * The colour is what `@Showcase({ bg })` declares and is deterministic; the
+ * pattern is not, because the component is centred, so the pattern's phase
+ * beneath it shifts whenever the component changes size and every pixel behind
+ * it differs after an unrelated resize. `!important` is required: the stage's
+ * own rules are component-scoped and therefore more specific than this one.
+ */
+const CAPTURE_STYLES = `
+[${CAPTURE_ATTRIBUTE}] *,
+[${CAPTURE_ATTRIBUTE}] *::before,
+[${CAPTURE_ATTRIBUTE}] *::after {
+  transition: none !important;
+  animation: none !important;
+  caret-color: transparent !important;
+  scroll-behavior: auto !important;
+}
+
+[${CAPTURE_ATTRIBUTE}] .prism-canvas-stage {
+  background-image: none !important;
+}
+`;
+/**
+ * Capture-isolation mode.
+ *
+ * Screenshot tools clip the composited page to the capture target's box, so
+ * anything painted behind or inside `.demo-wrap` ends up in the image. Capture
+ * mode strips the canvas background down to its opaque, patternless colour —
+ * keeping whatever `@Showcase({ bg })` declared — suppresses every piece of
+ * canvas chrome, locks zoom to 1 and freezes animation, so a variant renders
+ * identically on every run.
+ *
+ * The flag is read once from the URL at construction time and never written
+ * back — {@link PrismUrlStateService} rebuilds the query string from scratch,
+ * so navigating inside the app drops `?capture=1` from the address bar while
+ * the mode itself stays on for the lifetime of the document.
+ *
+ * Reading in the constructor (rather than during `PrismUrlStateService.init()`)
+ * is deliberate: `PrismCanvasService` restores persisted zoom in *its* own
+ * constructor, which can run first, so anything init-order dependent would
+ * make zoom-locking racy.
+ */
+export class PrismCaptureService {
+    _active = signal(typeof window !== 'undefined'
+        ? parseCaptureParam(window.location.search)
+        : false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    /** True while the app renders for an external screenshot tool. */
+    active = this._active.asReadonly();
+    constructor() {
+        if (this._active())
+            this.applyToDocument();
+    }
+    applyToDocument() {
+        if (typeof document === 'undefined')
+            return;
+        document.documentElement.setAttribute(CAPTURE_ATTRIBUTE, '');
+        if (document.getElementById(STYLE_ELEMENT_ID))
+            return;
+        const style = document.createElement('style');
+        style.id = STYLE_ELEMENT_ID;
+        style.textContent = CAPTURE_STYLES;
+        document.head.appendChild(style);
+    }
+    static ɵfac = function PrismCaptureService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCaptureService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismCaptureService, factory: PrismCaptureService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCaptureService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();
+/**
+ * Parses the capture flag out of a `window.location.search` string.
+ *
+ * Accepts `?capture`, `?capture=1` and `?capture=true` as "on"; anything else
+ * (including `?capture=0` and `?capture=false`) is "off".
+ */
+export function parseCaptureParam(search) {
+    const value = new URLSearchParams(search).get(CAPTURE_PARAM);
+    if (value === null)
+        return false;
+    return value === '' || value === '1' || value === 'true';
+}

package/dist/app/services/prism-persistence.service.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class PrismPersistenceService {
     private readonly config;
+    private readonly capture;
     private readonly navigationService;
     private readonly rendererService;
     private readonly a11yPanelState;

package/dist/app/services/prism-persistence.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-persistence.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-persistence.service.ts"],"names":[],"mappings":";AAqBA,qBACa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiE;IACxF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAkC;IAClE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAA8C;IAChE,OAAO,CAAC,cAAc,CAAuB;IAE7C,IAAI,IAAI,IAAI;IAOZ,OAAO,CAAC,kBAAkB;IA6C1B,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,SAAS;yCA7FN,uBAAuB;6CAAvB,uBAAuB;CAwHnC"}
+{"version":3,"file":"prism-persistence.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-persistence.service.ts"],"names":[],"mappings":";AA+BA,qBACa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,MAAM,CACyC;IAChE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IACvD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAkC;IAClE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAA8C;IAChE,OAAO,CAAC,cAAc,CAAuB;IAE7C,IAAI,IAAI,IAAI;IAWZ,OAAO,CAAC,kBAAkB;IAmD1B,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,SAAS;yCA5GN,uBAAuB;6CAAvB,uBAAuB;CA0InC"}

package/dist/app/services/prism-persistence.service.js

@@ -1,7 +1,8 @@
 import { effect, inject, Injectable, Injector } from '@angular/core';
 import { PRISM_CONFIG } from '../tokens/prism-tokens.js';
-import { A11yPanelStateService } from '../panels/a11y/a11y-panel-state.service.js';
-import { A11yPerspectiveService } from '../panels/a11y/a11y-perspective.service.js';
+import { A11yPanelStateService, } from '../panels/a11y/a11y-panel-state.service.js';
+import { A11yPerspectiveService, } from '../panels/a11y/a11y-perspective.service.js';
+import { PrismCaptureService } from './prism-capture.service.js';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismRendererService } from './prism-renderer.service.js';
 import * as i0 from "@angular/core";
@@ -10,6 +11,7 @@ const SCHEMA_VERSION = 1;
 const DEBOUNCE_MS = 200;
 export class PrismPersistenceService {
     config = inject(PRISM_CONFIG, { optional: true }) ?? {};
+    capture = inject(PrismCaptureService);
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
     a11yPanelState = inject(A11yPanelStateService);
@@ -21,6 +23,11 @@ export class PrismPersistenceService {
     init() {
         if (this.config.persistState === false)
             return;
+        // Capture mode must render a variant exactly as the manifest declares it;
+        // restoring a previous session's control values would silently change what
+        // an external screenshot tool captures.
+        if (this.capture.active())
+            return;
         const { raw } = this.restoreFromStorage();
         if (raw !== null)
             this.lastSerialized = raw;
@@ -46,13 +53,15 @@ export class PrismPersistenceService {
             if (parsed.a11y?.activeTab && a11yTabs.includes(parsed.a11y.activeTab)) {
                 this.a11yPanelState.activeTab.set(parsed.a11y.activeTab);
             }
-            if (parsed.a11y?.perspective === 'visual' || parsed.a11y?.perspective === 'screen-reader') {
+            if (parsed.a11y?.perspective === 'visual' ||
+                parsed.a11y?.perspective === 'screen-reader') {
                 this.a11yPerspective.mode.set(parsed.a11y.perspective);
             }
             const activeComp = this.navigationService.activeComponent();
             if (activeComp && parsed.inputs) {
                 const bucket = parsed.inputs[activeComp.meta.className];
-                if (bucket && bucket.variantIndex === this.rendererService.activeVariantIndex()) {
+                if (bucket &&
+                    bucket.variantIndex === this.rendererService.activeVariantIndex()) {
                     const validKeys = new Set(activeComp.meta.inputs.map((i) => i.name));
                     const filtered = {};
                     for (const [k, v] of Object.entries(bucket.values)) {
@@ -119,7 +128,10 @@ export class PrismPersistenceService {
             }
         }
         if (activeComp) {
-            inputs[activeComp.meta.className] = { variantIndex, values: { ...values } };
+            inputs[activeComp.meta.className] = {
+                variantIndex,
+                values: { ...values },
+            };
         }
         return {
             version: SCHEMA_VERSION,

package/dist/app/services/prism-url-state.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-url-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-url-state.service.ts"],"names":[],"mappings":";AAgBA,qBACa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwB;IAC/C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAE7B,IAAI,IAAI,IAAI;IAkBZ,OAAO,CAAC,cAAc;IA0CtB,OAAO,CAAC,UAAU;yCAtEP,oBAAoB;6CAApB,oBAAoB;CA+GhC"}
+{"version":3,"file":"prism-url-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-url-state.service.ts"],"names":[],"mappings":";AAgBA,qBACa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwB;IAC/C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAE7B,IAAI,IAAI,IAAI;IAqBZ,OAAO,CAAC,cAAc;IA6CtB,OAAO,CAAC,UAAU;yCA5EP,oBAAoB;6CAApB,oBAAoB;CAyHhC"}

package/dist/app/services/prism-url-state.service.js

@@ -45,7 +45,8 @@ export class PrismUrlStateService {
         this.suppressSync = true;
         try {
             if (componentClassName) {
-                const comp = this.manifestService.components()
+                const comp = this.manifestService
+                    .components()
                     .find((c) => c.meta.className === componentClassName);
                 if (comp) {
                     this.navigationService.select(comp);
@@ -59,7 +60,8 @@ export class PrismUrlStateService {
                 }
             }
             else if (pageTitle) {
-                const page = this.manifestService.pages()
+                const page = this.manifestService
+                    .pages()
                     .find((p) => p.title === pageTitle);
                 if (page) {
                     this.navigationService.selectPage(page);
@@ -77,6 +79,9 @@ export class PrismUrlStateService {
         }
     }
     writeToUrl(item, variantIndex, viewId, panelId) {
+        // Built from scratch, never from the current search string: parameters the
+        // app does not own must not survive a navigation. `?capture=1` relies on
+        // this — see the "capture flag" specs, which pin the guarantee.
         const params = new URLSearchParams();
         if (item?.kind === 'component') {
             params.set(PARAM_COMPONENT, item.data.meta.className);

package/dist/app/services/prism-variant-bg.service.d.ts

@@ -4,9 +4,37 @@ export declare class PrismVariantBgService {
     private readonly canvas;
     private readonly navigation;
     private readonly renderer;
+    private readonly capture;
     readonly recommended: import("@angular/core").Signal<CanvasBg | null>;
     private readonly _override;
     readonly override: import("@angular/core").Signal<CanvasBg | null>;
+    /**
+     * The background the stage actually paints.
+     *
+     * Capture mode keeps the *declared* background. `@Showcase({ bg })` and a
+     * per-variant `bg` exist precisely so a component is judged against the
+     * surface it was designed for — an outlined button on `dark` proves nothing
+     * when it is screenshotted on the light default — so a capture that dropped
+     * them would pin the wrong image.
+     *
+     * What capture mode does drop is the manual user override: session UI state
+     * that must never decide what a baseline looks like. The other half of the
+     * determinism problem — the dot grid and the checkerboard, whose phase shifts
+     * under a centred component whenever that component changes size — is solved
+     * in `CAPTURE_STYLES`, which strips the pattern and leaves the colour. Colour
+     * is deterministic; the pattern is not.
+     *
+     * With no declared bg capture mode lands on {@link DEFAULT_VARIANT_BG} rather
+     * than on the canvas default. `dots` would paint `--prism-bg-surface`, a
+     * *theme* token, so the surface behind an undeclared component would depend
+     * on whichever theme the runner's browser started in — a baseline that
+     * flips with a persisted UI preference. The fixed default is also exactly
+     * what the discovery manifest reports for the variant, so what a tool is
+     * told and what it screenshots cannot drift apart.
+     *
+     * Interactive mode keeps `canvas.bg()`: there the dot grid on the themed
+     * surface is the point, and forcing `light` would break dark-theme browsing.
+     */
     readonly effective: import("@angular/core").Signal<CanvasBg>;
     /** True when the user's override differs from the (non-null) recommended bg. */
     readonly isDeviating: import("@angular/core").Signal<boolean>;

package/dist/app/services/prism-variant-bg.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-variant-bg.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-variant-bg.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAK/D,qBACa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,QAAQ,CAAC,WAAW,kDAMjB;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,SAAS,2CAEhB;IAEF,gFAAgF;IAChF,QAAQ,CAAC,WAAW,0CAMjB;;IAUH,WAAW,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAI/B,aAAa,IAAI,IAAI;yCAzCV,qBAAqB;6CAArB,qBAAqB;CA4CjC"}
+{"version":3,"file":"prism-variant-bg.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-variant-bg.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;;AAU/D,qBACa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IAEvD,QAAQ,CAAC,WAAW,kDAOjB;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,QAAQ,CAAC,SAAS,2CAIhB;IAEF,gFAAgF;IAChF,QAAQ,CAAC,WAAW,0CAMjB;;IAUH,WAAW,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAI/B,aAAa,IAAI,IAAI;yCAxEV,qBAAqB;6CAArB,qBAAqB;CA2EjC"}

package/dist/app/services/prism-variant-bg.service.js

@@ -1,5 +1,7 @@
 import { computed, effect, inject, Injectable, signal } from '@angular/core';
+import { declaredVariantBg, DEFAULT_VARIANT_BG, } from '../../shared/variant-bg.js';
 import { PrismCanvasService } from './prism-canvas.service.js';
+import { PrismCaptureService } from './prism-capture.service.js';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismRendererService } from './prism-renderer.service.js';
 import * as i0 from "@angular/core";
@@ -7,18 +9,47 @@ export class PrismVariantBgService {
     canvas = inject(PrismCanvasService);
     navigation = inject(PrismNavigationService);
     renderer = inject(PrismRendererService);
+    capture = inject(PrismCaptureService);
     recommended = computed(() => {
         const comp = this.navigation.activeComponent();
         if (!comp)
             return null;
-        const variant = comp.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()];
-        return variant?.bg ?? comp.meta.showcaseConfig.bg ?? null;
+        return declaredVariantBg(comp.meta.showcaseConfig, this.renderer.activeVariantIndex());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "recommended" }] : /* istanbul ignore next */ []));
     _override = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_override" }] : /* istanbul ignore next */ []));
     override = this._override.asReadonly();
-    effective = computed(() => this._override() ?? this.recommended() ?? this.canvas.bg(), /* @ts-ignore */
+    /**
+     * The background the stage actually paints.
+     *
+     * Capture mode keeps the *declared* background. `@Showcase({ bg })` and a
+     * per-variant `bg` exist precisely so a component is judged against the
+     * surface it was designed for — an outlined button on `dark` proves nothing
+     * when it is screenshotted on the light default — so a capture that dropped
+     * them would pin the wrong image.
+     *
+     * What capture mode does drop is the manual user override: session UI state
+     * that must never decide what a baseline looks like. The other half of the
+     * determinism problem — the dot grid and the checkerboard, whose phase shifts
+     * under a centred component whenever that component changes size — is solved
+     * in `CAPTURE_STYLES`, which strips the pattern and leaves the colour. Colour
+     * is deterministic; the pattern is not.
+     *
+     * With no declared bg capture mode lands on {@link DEFAULT_VARIANT_BG} rather
+     * than on the canvas default. `dots` would paint `--prism-bg-surface`, a
+     * *theme* token, so the surface behind an undeclared component would depend
+     * on whichever theme the runner's browser started in — a baseline that
+     * flips with a persisted UI preference. The fixed default is also exactly
+     * what the discovery manifest reports for the variant, so what a tool is
+     * told and what it screenshots cannot drift apart.
+     *
+     * Interactive mode keeps `canvas.bg()`: there the dot grid on the themed
+     * surface is the point, and forcing `light` would break dark-theme browsing.
+     */
+    effective = computed(() => this.capture.active()
+        ? this.recommended() ?? DEFAULT_VARIANT_BG
+        : this._override() ?? this.recommended() ?? this.canvas.bg(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effective" }] : /* istanbul ignore next */ []));
     /** True when the user's override differs from the (non-null) recommended bg. */
     isDeviating = computed(() => {

package/dist/plugin/index.d.ts

@@ -1,5 +1,9 @@
-export type { NgPrismPlugin, PanelDefinition, ControlDefinition, HeaderWidgetDefinition, NgPrismConfig, PrismManifest, ScannedComponent, InputMeta, OutputMeta, RuntimeManifest, RuntimeComponent, } from './plugin.types.js';
+export type { NgPrismPlugin, PanelDefinition, ControlDefinition, HeaderWidgetDefinition, NgPrismConfig, PrismManifest, ScannedComponent, InputMeta, OutputMeta, RuntimeManifest, RuntimeComponent, DiscoveryManifest, DiscoveryComponent, DiscoveryVariant, DiscoveryPage, } from './plugin.types.js';
 export type { StyleguidePage, CustomPage, ComponentPage, } from './page.types.js';
+export type { CanvasBg } from '../shared/canvas-bg.type.js';
+export { CANVAS_BGS } from '../shared/canvas-bg.type.js';
+export { DEFAULT_VARIANT_BG, resolveVariantBg } from '../shared/variant-bg.js';
+export type { VariantBgSource } from '../shared/variant-bg.js';
 export { customPage, componentPage } from './page-helpers.js';
 export type { ComponentPageOptions } from './page-helpers.js';
 export { defineConfig } from './define-config.js';

package/dist/plugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,eAAe,EACf,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,iBAAiB,CAAC;AAKzB,YAAY,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/plugin/index.js

@@ -1,3 +1,5 @@
+export { CANVAS_BGS } from '../shared/canvas-bg.type.js';
+export { DEFAULT_VARIANT_BG, resolveVariantBg } from '../shared/variant-bg.js';
 export { customPage, componentPage } from './page-helpers.js';
 export { defineConfig } from './define-config.js';
 export { PRISM_RENDERER_HOOKS, PRISM_MANIFEST, PRISM_CONFIG, } from '../app/tokens/prism-tokens.js';

package/dist/plugin/plugin.types.d.ts

@@ -1,5 +1,6 @@
 import type { Provider, Type } from '@angular/core';
 import type { StyleguidePage } from './page.types.js';
+import type { CanvasBg } from '../shared/canvas-bg.type.js';
 export interface NgPrismPlugin {
     /** Unique plugin name — used for debugging and conflict detection */
     name: string;
@@ -107,6 +108,45 @@ export interface RuntimeComponent {
     meta: ScannedComponent;
     type: Type<unknown>;
 }
+/**
+ * The shape external tooling reads from `globalThis.__PRISM_MANIFEST__`.
+ *
+ * A thin, JSON-safe projection of the runtime manifest: enough to enumerate and
+ * address every variant, plus the `@Showcase` metadata a tool needs to decide how
+ * to treat one. It carries no Angular class references, and `meta` values that
+ * cannot survive a structured clone are dropped rather than half-serialised.
+ */
+export interface DiscoveryManifest {
+    components: DiscoveryComponent[];
+    pages: DiscoveryPage[];
+}
+export interface DiscoveryComponent {
+    className: string;
+    /** `ShowcaseConfig.title` — the display name, not the class name. */
+    title: string;
+    variants: DiscoveryVariant[];
+    /** Sanitised `ShowcaseConfig.meta`. Omitted when empty. */
+    meta?: Record<string, unknown>;
+}
+export interface DiscoveryVariant {
+    name: string;
+    /** 0-based index into the `variants` array — the `?variant=` URL value. */
+    index: number;
+    /**
+     * The canvas background this variant renders on, already resolved:
+     * `Variant.bg`, else `ShowcaseConfig.bg`, else `DEFAULT_VARIANT_BG`.
+     *
+     * Always present, because a screenshot runner cannot act on "nothing
+     * declared" — and it is the background capture mode paints, so the value
+     * here and the pixels in the capture agree.
+     */
+    bg: CanvasBg;
+    /** Sanitised `Variant.meta`. Omitted when empty. */
+    meta?: Record<string, unknown>;
+}
+export interface DiscoveryPage {
+    title: string;
+}
 export interface NgPrismConfig {
     plugins?: NgPrismPlugin[];
     pages?: StyleguidePage[];

package/dist/plugin/plugin.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.types.d.ts","sourceRoot":"","sources":["../../src/plugin/plugin.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IAGb,kBAAkB,CAAC,EAAE,CACnB,SAAS,EAAE,gBAAgB,KACxB,gBAAgB,GAAG,IAAI,GAAG,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,CACd,IAAI,EAAE,cAAc,KACjB,cAAc,GAAG,IAAI,GAAG,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,aAAa,KACpB,aAAa,GAAG,IAAI,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IAG1D,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC/B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACzC,sEAAsE;IACtE,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,iHAAiH;IACjH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC5B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,gBAAgB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,oBAAoB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC9B,6GAA6G;IAC7G,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,OAAO,CAAC;IACrD;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,iEAAiE;IACjE,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IACzC,4DAA4D;IAC5D,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CAC1B;AAID,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,gCAAgC,EAAE,cAAc,CAAC;IACxE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,EAAE;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EACA,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAID,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CACrB;AAID,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE;QACH,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvB,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACxB,eAAe,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACzB,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9B,WAAW,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5B,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;KACxB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,kCAAkC,EAAE,iBAAiB,CAAC;CACrE"}
+{"version":3,"file":"plugin.types.d.ts","sourceRoot":"","sources":["../../src/plugin/plugin.types.ts"],"names":[],"mappings":"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"}

package/dist/shared/variant-bg.d.ts

@@ -0,0 +1,53 @@
+import type { CanvasBg } from './canvas-bg.type.js';
+/**
+ * The surface a variant is reported to render on when nothing declares one.
+ *
+ * `checker` is the "no opinion declared" answer: the checkerboard is the
+ * universal signal for an undefined or transparent backdrop, it makes an
+ * undeclared component visible as such while browsing, and it is exactly how
+ * the visual-regression panel already frames a capture whose background it
+ * cannot account for.
+ *
+ * Note what it does *not* buy. `checker` carries no colour of its own — it
+ * patterns over `--prism-bg-surface`, a *theme* token — and capture mode
+ * strips the pattern and keeps the colour. So the surface behind an undeclared
+ * component in a screenshot still follows whichever theme the runner's browser
+ * started in. A variant that is under visual regression should declare `light`
+ * or `dark`, the two backgrounds whose colour is absolute.
+ */
+export declare const DEFAULT_VARIANT_BG: CanvasBg;
+/**
+ * The parts of a `ShowcaseConfig` that decide a variant's background.
+ *
+ * Declared structurally rather than imported: `ShowcaseConfig` itself lives in
+ * `decorator/`, which already imports from this folder.
+ */
+export interface VariantBgSource {
+    bg?: CanvasBg;
+    variants?: readonly {
+        bg?: CanvasBg;
+    }[];
+}
+/**
+ * The background a variant *declares*, or `null` when it declares none.
+ *
+ * Priority is variant, then component. `null` is a meaningful answer — it is
+ * what lets the canvas keep the user's own background choice instead of
+ * overwriting it, and what makes the background pill able to say "this is your
+ * choice, not the component's".
+ *
+ * An index with no variant behind it still answers with the component's
+ * declaration: the renderer clamps an unknown `?variant=` to index 0 rather
+ * than rendering nothing, so reporting `null` here would describe a state that
+ * cannot occur.
+ */
+export declare function declaredVariantBg(config: VariantBgSource, variantIndex: number): CanvasBg | null;
+/**
+ * The background a variant renders on, always resolved to a concrete value.
+ *
+ * This is the answer external tooling needs — a screenshot runner cannot act
+ * on "nothing declared" — and the one capture mode paints, so the value
+ * reported by `__PRISM_MANIFEST__` and the pixels in the capture agree.
+ */
+export declare function resolveVariantBg(config: VariantBgSource, variantIndex: number): CanvasBg;
+//# sourceMappingURL=variant-bg.d.ts.map

package/dist/shared/variant-bg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-bg.d.ts","sourceRoot":"","sources":["../../src/shared/variant-bg.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,EAAE,QAAoB,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS;QAAE,EAAE,CAAC,EAAE,QAAQ,CAAA;KAAE,EAAE,CAAC;CACzC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAM,GACnB,QAAQ,GAAG,IAAI,CAEjB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAM,GACnB,QAAQ,CAEV"}

package/dist/shared/variant-bg.js

@@ -0,0 +1,43 @@
+/**
+ * The surface a variant is reported to render on when nothing declares one.
+ *
+ * `checker` is the "no opinion declared" answer: the checkerboard is the
+ * universal signal for an undefined or transparent backdrop, it makes an
+ * undeclared component visible as such while browsing, and it is exactly how
+ * the visual-regression panel already frames a capture whose background it
+ * cannot account for.
+ *
+ * Note what it does *not* buy. `checker` carries no colour of its own — it
+ * patterns over `--prism-bg-surface`, a *theme* token — and capture mode
+ * strips the pattern and keeps the colour. So the surface behind an undeclared
+ * component in a screenshot still follows whichever theme the runner's browser
+ * started in. A variant that is under visual regression should declare `light`
+ * or `dark`, the two backgrounds whose colour is absolute.
+ */
+export const DEFAULT_VARIANT_BG = 'checker';
+/**
+ * The background a variant *declares*, or `null` when it declares none.
+ *
+ * Priority is variant, then component. `null` is a meaningful answer — it is
+ * what lets the canvas keep the user's own background choice instead of
+ * overwriting it, and what makes the background pill able to say "this is your
+ * choice, not the component's".
+ *
+ * An index with no variant behind it still answers with the component's
+ * declaration: the renderer clamps an unknown `?variant=` to index 0 rather
+ * than rendering nothing, so reporting `null` here would describe a state that
+ * cannot occur.
+ */
+export function declaredVariantBg(config, variantIndex) {
+    return config.variants?.[variantIndex]?.bg ?? config.bg ?? null;
+}
+/**
+ * The background a variant renders on, always resolved to a concrete value.
+ *
+ * This is the answer external tooling needs — a screenshot runner cannot act
+ * on "nothing declared" — and the one capture mode paints, so the value
+ * reported by `__PRISM_MANIFEST__` and the pixels in the capture agree.
+ */
+export function resolveVariantBg(config, variantIndex) {
+    return declaredVariantBg(config, variantIndex) ?? DEFAULT_VARIANT_BG;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "22.1.4",
+  "version": "22.2.0-beta.1",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",