@ng-prism/core 22.2.0 → 22.3.0

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

@@ -1,38 +1,72 @@
-import { Component, ChangeDetectionStrategy, computed, DestroyRef, effect, ElementRef, inject, Injector, signal, untracked, viewChild, ViewContainerRef, } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
-import { PrismManifestService } from '../services/prism-manifest.service.js';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, Injector, signal, untracked, viewChild, ViewContainerRef } from '@angular/core';
+import { VIEWPORT_MAX, VIEWPORT_MIN } from '../../shared/viewport.type.js';
+import { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
+import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
+import { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.component.js';
+import { snapViewportWidth } from '../canvas/viewport-snap.js';
+import { PrismResizerDirective } from '../directives/prism-resizer.directive.js';
 import { BUILTIN_PANELS } from '../panels/builtin-panels.js';
-import { PRISM_RENDERER_HOOKS } from '../tokens/prism-tokens.js';
+import { PrismCanvasService } from '../services/prism-canvas.service.js';
+import { PrismCaptureService } from '../services/prism-capture.service.js';
 import { PrismEventLogService } from '../services/prism-event-log.service.js';
+import { PrismManifestService } from '../services/prism-manifest.service.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 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 { CANVAS_BG_STYLES } from '../canvas/canvas-bg.styles.js';
+import { PRISM_RENDERER_HOOKS } from '../tokens/prism-tokens.js';
 import { buildKnownInputs } from './known-inputs.js';
 import { resolveOverlay } from './overlay-resolver.js';
 import { parseContentToNodes } from './projectable-content.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
+function PrismRendererComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 4);
+    i0.ɵɵelement(1, "span", 5);
+    i0.ɵɵelementStart(2, "span", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "span", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 7);
+    i0.ɵɵlistener("valueChange", function PrismRendererComponent_Conditional_1_Conditional_3_Template_div_valueChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onViewportResize($event)); });
+    i0.ɵɵelement(6, "span", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 9);
+    i0.ɵɵlistener("valueChange", function PrismRendererComponent_Conditional_1_Conditional_3_Template_div_valueChange_7_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onViewportResize($event)); });
+    i0.ɵɵelement(8, "span", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.viewportWidth(), " px");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("scale", -2 / (ctx_r1.canvasService.zoom() || 1))("min", ctx_r1.VIEWPORT_MIN)("max", ctx_r1.VIEWPORT_MAX)("value", ctx_r1.viewportWidth());
+    i0.ɵɵattribute("aria-valuenow", ctx_r1.viewportWidth())("aria-valuemin", ctx_r1.VIEWPORT_MIN)("aria-valuemax", ctx_r1.VIEWPORT_MAX);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("scale", 2 / (ctx_r1.canvasService.zoom() || 1))("min", ctx_r1.VIEWPORT_MIN)("max", ctx_r1.VIEWPORT_MAX)("value", ctx_r1.viewportWidth());
+    i0.ɵɵattribute("aria-valuenow", ctx_r1.viewportWidth())("aria-valuemin", ctx_r1.VIEWPORT_MIN)("aria-valuemax", ctx_r1.VIEWPORT_MAX);
+} }
 function PrismRendererComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 3)(1, "prism-canvas-rulers")(2, "prism-canvas-bg-pill");
+    i0.ɵɵconditionalCreate(3, PrismRendererComponent_Conditional_1_Conditional_3_Template, 9, 15);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("visible", ctx_r0.canvasService.guides());
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("visible", ctx_r1.canvasService.guides());
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.viewportWidth() !== null ? 3 : -1);
 } }
 function PrismRendererComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function PrismRendererComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 4);
+    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 10);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngComponentOutlet", ctx_r0.activeOverlay())("ngComponentOutletInputs", ctx_r0.overlayInputs)("ngComponentOutletInjector", ctx_r0.overlayInjector());
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngComponentOutlet", ctx_r1.activeOverlay())("ngComponentOutletInputs", ctx_r1.overlayInputs)("ngComponentOutletInjector", ctx_r1.overlayInjector());
 } }
 export class PrismRendererComponent {
     navigationService = inject(PrismNavigationService);
@@ -40,13 +74,41 @@ export class PrismRendererComponent {
     canvasService = inject(PrismCanvasService);
     capture = inject(PrismCaptureService);
     variantBg = inject(PrismVariantBgService);
+    /**
+     * The width the canvas is actually constrained to, `null` for unconstrained.
+     *
+     * Every viewport binding reads this rather than the service directly, so
+     * capture mode cannot be constrained by any route. Previously only the grips
+     * and the dimension line sat behind the capture guard while the attributes
+     * that change `.demo-wrap`'s box did not — safe in practice, because capture
+     * never restores a persisted width and every setter is suppressed, but safe
+     * by reachability argument rather than by construction. A future caller of
+     * `setViewportWidth` during a capture run would have recorded every
+     * visual-regression baseline at the constrained width with no visible chrome
+     * to reveal it. One computed makes the guarantee structural.
+     */
+    viewportWidth = computed(() => (this.capture.active() ? null : this.canvasService.viewportWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
+    VIEWPORT_MIN = VIEWPORT_MIN;
+    VIEWPORT_MAX = VIEWPORT_MAX;
+    /**
+     * A drag on either grip, rested on a preset if it came close enough.
+     *
+     * The snapping lives here and not in `PrismResizerDirective` on purpose: the
+     * directive also drives the sidebar and the panel, where there is nothing to
+     * snap to, and a generic control that knows about viewport presets would be
+     * the wrong shape.
+     */
+    onViewportResize(width) {
+        this.canvasService.setViewportWidth(snapViewportWidth(width));
+    }
     eventLogService = inject(PrismEventLogService);
     manifestService = inject(PrismManifestService);
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
     host = inject((ElementRef));
     rendererHooks = inject(PRISM_RENDERER_HOOKS, {
-        optional: true,
+        optional: true
     });
     panelService = inject(PrismPanelService);
     pluginService = inject(PrismPluginService);
@@ -75,7 +137,7 @@ export class PrismRendererComponent {
         if (!comp)
             return 'fit';
         const variant = comp.meta.showcaseConfig.variants?.[this.rendererService.activeVariantIndex()];
-        return (variant?.canvasLayout ?? comp.meta.showcaseConfig.canvasLayout ?? 'fit');
+        return variant?.canvasLayout ?? comp.meta.showcaseConfig.canvasLayout ?? 'fit';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canvasLayout" }] : /* istanbul ignore next */ []));
     overlayInputs = { rendererService: this.rendererService };
@@ -127,13 +189,10 @@ export class PrismRendererComponent {
         });
         effect(() => {
             const panelId = this.panelService.activePanelId();
-            const allPanels = [
-                ...BUILTIN_PANELS,
-                ...this.pluginService.panels(),
-            ];
+            const allPanels = [...BUILTIN_PANELS, ...this.pluginService.panels()];
             const resolution = resolveOverlay(allPanels, panelId, {
                 captureActive: this.capture.active(),
-                cache: this.overlayCache,
+                cache: this.overlayCache
             });
             if (resolution.kind === 'eager') {
                 this.activeOverlay.set(resolution.component);
@@ -156,17 +215,15 @@ export class PrismRendererComponent {
         this.cleanup();
         const renderPageTitle = comp.meta.showcaseConfig.renderPage;
         if (renderPageTitle) {
-            const page = this.manifestService
-                .manifest()
-                .pages?.find((p) => p.type === 'component' && p.title === renderPageTitle);
+            const page = this.manifestService.manifest().pages?.find((p) => p.type === 'component' && p.title === renderPageTitle);
             if (page) {
                 this.isRenderPage = true;
                 const injector = Injector.create({
                     providers: comp.meta.showcaseConfig.providers ?? [],
-                    parent: this.injector,
+                    parent: this.injector
                 });
                 this.componentRef = this.outlet().createComponent(page.component, {
-                    injector,
+                    injector
                 });
                 this.componentRef.changeDetectorRef.detectChanges();
                 this.rendererService.renderedElement.set(this.componentRef.location.nativeElement);
@@ -180,19 +237,18 @@ export class PrismRendererComponent {
         performance.mark('prism:render:start', detail);
         const injector = Injector.create({
             providers: comp.meta.showcaseConfig.providers ?? [],
-            parent: this.injector,
+            parent: this.injector
         });
         const content = this.rendererService.activeContent();
         this.lastProjectedContent = content;
         const projectableNodes = content ? parseContentToNodes(content) : undefined;
         this.componentRef = this.outlet().createComponent(comp.type, {
             injector,
-            projectableNodes,
+            projectableNodes
         });
         for (const output of comp.meta.outputs) {
             const emitter = this.componentRef.instance[output.name];
-            if (emitter &&
-                typeof emitter.subscribe === 'function') {
+            if (emitter && typeof emitter.subscribe === 'function') {
                 const sub = emitter.subscribe((v) => this.eventLogService.log(output.name, v));
                 this.outputSubscriptions.push(sub);
             }
@@ -230,67 +286,29 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 6, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "stage-crosshair"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 6, vars: 14, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "demo-wrap"], [1, "stage-crosshair"], [1, "vp-dim"], [1, "vp-dim__rule"], [1, "vp-dim__v"], ["prismResizer", "", "axis", "x", "aria-label", "Viewport width, left edge", 1, "vp-grip", 3, "valueChange", "scale", "min", "max", "value"], [1, "vp-grip__bar"], ["prismResizer", "", "axis", "x", "aria-label", "Viewport width, right edge", 1, "vp-grip", "vp-grip--end", 3, "valueChange", "scale", "min", "max", "value"], [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, 3, 2);
+            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 4, 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.ɵɵstyleProp("--%NS%prism-vp-w", ctx.viewportWidth(), "px")("--%NS%zoom", ctx.canvasService.zoom());
+            i0.ɵɵattribute("data-bg", ctx.variantBg.effective())("data-rulers", ctx.canvasService.rulers() ? "" : null)("data-viewport", ctx.viewportWidth() !== null ? "" : null);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.capture.active() ? 1 : -1);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("--%NS%zoom", ctx.canvasService.zoom());
-            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-canvas-layout", ctx.canvasLayout());
+            i0.ɵɵattribute("data-prism-rendered", ctx.renderedKey())("data-canvas-layout", ctx.canvasLayout())("data-viewport", ctx.viewportWidth() !== null ? "" : null);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
-        } }, dependencies: [PrismCanvasRulersComponent,
-            PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] {\n        display: block;\n        min-height: 0;\n        flex: 1;\n      }\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(--%NS%prism-stage);\n\n        \n\n\n\n\n\n\n\n\n\n\n        outline: 1px solid var(--%NS%prism-stage-edge);\n        outline-offset: -1px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),\n          0 8px 24px -12px rgba(0, 0, 0, 0.18);\n        transition: filter var(--%NS%dur-base);\n        --%NS%prism-canvas-overlay-top: 12px;\n        --%NS%prism-canvas-overlay-inline: 20px;\n      }\n      .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n        --%NS%prism-canvas-overlay-top: 28px;\n        --%NS%prism-canvas-overlay-inline: 28px;\n      }\n\n      .stage-crosshair[_ngcontent-%COMP%] {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity var(--%NS%dur-base);\n      }\n      .stage-crosshair.visible[_ngcontent-%COMP%] {\n        opacity: 1;\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n        content: '';\n        position: absolute;\n        background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::before {\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 1px;\n      }\n      .stage-crosshair[_ngcontent-%COMP%]::after {\n        top: 0;\n        bottom: 0;\n        left: 50%;\n        width: 1px;\n      }\n\n      .demo-wrap[_ngcontent-%COMP%] {\n        position: relative;\n        display: inline-block;\n        transform: scale(var(--%NS%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      }", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  \n\n\n\n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
+        } }, dependencies: [PrismCanvasRulersComponent, PrismCanvasBgPillComponent, NgComponentOutlet, PrismResizerDirective], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-canvas-stage[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 200px;\n    padding: 32px;\n    overflow: auto;\n\n    \n\n\n\n\n\n\n\n\n\n\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    box-shadow:\n        0 1px 3px rgb(0 0 0 / 10%),\n        0 8px 24px -12px rgb(0 0 0 / 18%);\n    transition: filter var(--%NS%dur-base);\n\n    --%NS%prism-canvas-overlay-top: 12px;\n    --%NS%prism-canvas-overlay-inline: 20px;\n}\n\n.prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n    --%NS%prism-canvas-overlay-top: 28px;\n    --%NS%prism-canvas-overlay-inline: 28px;\n}\n\n.stage-crosshair[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity var(--%NS%dur-base);\n}\n\n.stage-crosshair.visible[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.stage-crosshair[_ngcontent-%COMP%]::before, \n.stage-crosshair[_ngcontent-%COMP%]::after {\n    position: absolute;\n    content: '';\n    background: color-mix(in srgb, var(--%NS%prism-primary) 20%, transparent);\n}\n\n.stage-crosshair[_ngcontent-%COMP%]::before {\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: 1px;\n}\n\n.stage-crosshair[_ngcontent-%COMP%]::after {\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 1px;\n}\n\n.demo-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    display: inline-block;\n    transform: scale(var(--%NS%zoom, 1));\n    transition: transform 0.18s;\n}\n\n.demo-wrap[data-canvas-layout='stretch'][_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n    max-width: 800px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.demo-wrap[data-viewport][_ngcontent-%COMP%] {\n    display: grid;\n\n    \n\n\n\n\n\n\n\n\n    flex: none;\n\n    \n\n\n\n\n\n\n    justify-items: safe center;\n    width: var(--%NS%prism-vp-w);\n    max-width: none;\n    container-type: inline-size;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.vp-grip[_ngcontent-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    bottom: 0;\n    left: calc(50% - var(--%NS%prism-vp-w) * var(--%NS%zoom, 1) / 2 - 4.5px);\n    z-index: 4;\n    display: grid;\n    width: 9px;\n\n    \n\n\n\n\n\n    pointer-events: none;\n    background: transparent;\n}\n\n.vp-grip--end[_ngcontent-%COMP%] {\n    right: calc(50% - var(--%NS%prism-vp-w) * var(--%NS%zoom, 1) / 2 - 4.5px);\n    left: auto;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n.vp-grip__bar[_ngcontent-%COMP%] {\n    z-index: 1;\n    box-sizing: content-box;\n    grid-area: 1 / 1;\n    place-self: center center;\n    width: 3px;\n    height: 34px;\n    padding: 5px 3px;\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--%NS%prism-measure) 80%, transparent);\n    background-clip: content-box;\n    border-radius: 2px;\n    transition: background var(--%NS%dur-fast);\n}\n\n\n\n\n\n\n.vp-grip[_ngcontent-%COMP%]::after {\n    grid-area: 1 / 1;\n    place-self: stretch center;\n    width: 1px;\n    content: '';\n    background: color-mix(in srgb, var(--%NS%prism-measure) 75%, transparent);\n    transition: background var(--%NS%dur-fast);\n}\n\n.vp-grip[_ngcontent-%COMP%]:hover::after, \n.vp-grip.active[_ngcontent-%COMP%]::after, \n.vp-grip[_ngcontent-%COMP%]:focus-visible::after {\n    background: color-mix(in srgb, var(--%NS%prism-measure) 55%, transparent);\n}\n\n.vp-grip[_ngcontent-%COMP%]:hover   .vp-grip__bar[_ngcontent-%COMP%], \n.vp-grip.active[_ngcontent-%COMP%]   .vp-grip__bar[_ngcontent-%COMP%], \n.vp-grip[_ngcontent-%COMP%]:focus-visible   .vp-grip__bar[_ngcontent-%COMP%] {\n    background: var(--%NS%prism-measure);\n    background-clip: content-box;\n}\n\n\n\n\n.vp-grip[_ngcontent-%COMP%]:focus-visible {\n    outline: none;\n}\n\n.vp-grip[_ngcontent-%COMP%]:focus-visible   .vp-grip__bar[_ngcontent-%COMP%] {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n\n\n\n\n\n\n\n\n\n.vp-dim[_ngcontent-%COMP%] {\n    position: absolute;\n    top: var(--%NS%prism-canvas-overlay-top, 12px);\n    left: 50%;\n    z-index: 4;\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    width: calc(var(--%NS%prism-vp-w) * var(--%NS%zoom, 1));\n    pointer-events: none;\n    transform: translateX(-50%);\n}\n\n\n\n\n.vp-dim__rule[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    height: 1px;\n    background: color-mix(in srgb, var(--%NS%prism-measure) 70%, transparent);\n}\n\n\n\n\n.vp-dim__rule[_ngcontent-%COMP%]::before {\n    position: absolute;\n    top: -3px;\n    width: 1px;\n    height: 7px;\n    content: '';\n    background: color-mix(in srgb, var(--%NS%prism-measure) 90%, transparent);\n}\n\n.vp-dim__rule[_ngcontent-%COMP%]:first-child::before {\n    left: 0;\n}\n\n.vp-dim__rule[_ngcontent-%COMP%]:last-child::before {\n    right: 0;\n}\n\n.vp-dim__v[_ngcontent-%COMP%] {\n    flex: none;\n    font-family: var(--%NS%font-mono);\n    font-size: 9px;\n    color: var(--%NS%prism-measure);\n    white-space: nowrap;\n}", "[data-bg=\"dots\"][_ngcontent-%COMP%] {\n    background-image: radial-gradient(circle, var(--%NS%prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"][_ngcontent-%COMP%] {\n    background-image: none;\n  }\n\n  \n\n\n\n\n  \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  [data-bg=\"light\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-light, #f7f5fc);\n    background-image: none;\n    --%NS%prism-measure: #004d8a;\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n    --%NS%prism-measure: #41bcff;\n  }\n\n  \n\n\n\n\n\n  [data-bg=\"checker\"][_ngcontent-%COMP%], \n   [data-bg=\"transparent\"][_ngcontent-%COMP%] {\n    background-image:\n      linear-gradient(45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(-45deg, var(--%NS%prism-border) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, var(--%NS%prism-border) 75%),\n      linear-gradient(-45deg, transparent 75%, var(--%NS%prism-border) 75%);\n    background-size: 16px 16px;\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n  }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
-        args: [{ selector: 'prism-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                    PrismCanvasRulersComponent,
-                    PrismCanvasBgPillComponent,
-                    NgComponentOutlet,
-                ], template: `
-    <div
-      class="prism-canvas-stage"
-      [attr.data-bg]="variantBg.effective()"
-      [attr.data-rulers]="canvasService.rulers() ? '' : null"
-    >
-      @if (!capture.active()) {
-      <div
-        class="stage-crosshair"
-        [class.visible]="canvasService.guides()"
-      ></div>
-      <prism-canvas-rulers />
-      <prism-canvas-bg-pill />
-      }
-
-      <div
-        class="demo-wrap"
-        [style.--zoom]="canvasService.zoom()"
-        [attr.data-prism-rendered]="renderedKey()"
-        [attr.data-canvas-layout]="canvasLayout()"
-      >
-        <ng-container #outlet />
-        @if (activeOverlay()) {
-        <ng-container
-          *ngComponentOutlet="
-            activeOverlay()!;
-            inputs: overlayInputs;
-            injector: overlayInjector()
-          "
-        />
-        }
-      </div>
-    </div>
-  `, styles: ["\n      :host {\n        display: block;\n        min-height: 0;\n        flex: 1;\n      }\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-stage);\n\n        /* The edge is outline + shadow, never border and never extra padding.\n         plugin-visual-regression screenshots .demo-wrap, which is centred in\n         this element; a border would shrink the content box by 2px and move\n         that centre, shifting all 15 baselines in test-workspace/vrt/baseline\n         without a single component having changed. Capture mode resets this\n         element's padding but not its border, and this repo has no VRT runner\n         to catch the drift. outline and box-shadow do not participate in\n         layout, so the box is provably unchanged. Keep it that way.\n         They do still paint, and outline-offset is negative, so the line lands\n         inside the box: CAPTURE_STYLES in prism-capture.service.ts sets both\n         to none, which is only safe because neither is load-bearing here. */\n        outline: 1px solid var(--prism-stage-edge);\n        outline-offset: -1px;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),\n          0 8px 24px -12px rgba(0, 0, 0, 0.18);\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      .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 {\n        opacity: 1;\n      }\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 {\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 1px;\n      }\n      .stage-crosshair::after {\n        top: 0;\n        bottom: 0;\n        left: 50%;\n        width: 1px;\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  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\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  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\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"] }]
+        args: [{ selector: 'prism-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismCanvasRulersComponent, PrismCanvasBgPillComponent, NgComponentOutlet, PrismResizerDirective], template: "<div\n    class=\"prism-canvas-stage\"\n    [attr.data-bg]=\"variantBg.effective()\"\n    [attr.data-rulers]=\"canvasService.rulers() ? '' : null\"\n    [attr.data-viewport]=\"viewportWidth() !== null ? '' : null\"\n    [style.--prism-vp-w.px]=\"viewportWidth()\"\n    [style.--zoom]=\"canvasService.zoom()\">\n    @if (!capture.active()) {\n        <div\n            class=\"stage-crosshair\"\n            [class.visible]=\"canvasService.guides()\"></div>\n        <prism-canvas-rulers />\n        <prism-canvas-bg-pill />\n        @if (viewportWidth() !== null) {\n            <!-- Grips and the dimension line are siblings of .demo-wrap, never\n       children of it: .demo-wrap is what plugin-visual-regression\n       screenshots, and anything inside it composites into every baseline.\n       They sit inside the capture guard for the same reason the rulers and\n       the pill do. -->\n            <span class=\"vp-dim\">\n                <span class=\"vp-dim__rule\"></span>\n                <span class=\"vp-dim__v\">{{ viewportWidth() }} px</span>\n                <span class=\"vp-dim__rule\"></span>\n            </span>\n            <div\n                class=\"vp-grip\"\n                prismResizer\n                axis=\"x\"\n                [scale]=\"-2 / (canvasService.zoom() || 1)\"\n                [min]=\"VIEWPORT_MIN\"\n                [max]=\"VIEWPORT_MAX\"\n                [value]=\"viewportWidth()!\"\n                (valueChange)=\"onViewportResize($event)\"\n                aria-label=\"Viewport width, left edge\"\n                [attr.aria-valuenow]=\"viewportWidth()\"\n                [attr.aria-valuemin]=\"VIEWPORT_MIN\"\n                [attr.aria-valuemax]=\"VIEWPORT_MAX\">\n                <span class=\"vp-grip__bar\"></span>\n            </div>\n            <div\n                class=\"vp-grip vp-grip--end\"\n                prismResizer\n                axis=\"x\"\n                [scale]=\"2 / (canvasService.zoom() || 1)\"\n                [min]=\"VIEWPORT_MIN\"\n                [max]=\"VIEWPORT_MAX\"\n                [value]=\"viewportWidth()!\"\n                (valueChange)=\"onViewportResize($event)\"\n                aria-label=\"Viewport width, right edge\"\n                [attr.aria-valuenow]=\"viewportWidth()\"\n                [attr.aria-valuemin]=\"VIEWPORT_MIN\"\n                [attr.aria-valuemax]=\"VIEWPORT_MAX\">\n                <span class=\"vp-grip__bar\"></span>\n            </div>\n        }\n    }\n\n    <div\n        class=\"demo-wrap\"\n        [style.--zoom]=\"canvasService.zoom()\"\n        [attr.data-prism-rendered]=\"renderedKey()\"\n        [attr.data-canvas-layout]=\"canvasLayout()\"\n        [attr.data-viewport]=\"viewportWidth() !== null ? '' : null\">\n        <ng-container #outlet />\n        @if (activeOverlay()) {\n            <ng-container *ngComponentOutlet=\"activeOverlay()!; inputs: overlayInputs; injector: overlayInjector()\" />\n        }\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    flex: 1;\n    min-height: 0;\n}\n\n.prism-canvas-stage {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    min-height: 200px;\n    padding: 32px;\n    overflow: auto;\n\n    /* The edge is outline + shadow, never border and never extra padding.\n   plugin-visual-regression screenshots .demo-wrap, which is centred in\n   this element; a border would shrink the content box by 2px and move\n   that centre, shifting all 15 baselines in test-workspace/vrt/baseline\n   without a single component having changed. Capture mode resets this\n   element's padding but not its border, and this repo has no VRT runner\n   to catch the drift. outline and box-shadow do not participate in\n   layout, so the box is provably unchanged. Keep it that way.\n   They do still paint, and outline-offset is negative, so the line lands\n   inside the box: CAPTURE_STYLES in prism-capture.service.ts sets both\n   to none, which is only safe because neither is load-bearing here. */\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    box-shadow:\n        0 1px 3px rgb(0 0 0 / 10%),\n        0 8px 24px -12px rgb(0 0 0 / 18%);\n    transition: filter var(--dur-base);\n\n    --prism-canvas-overlay-top: 12px;\n    --prism-canvas-overlay-inline: 20px;\n}\n\n.prism-canvas-stage[data-rulers] {\n    --prism-canvas-overlay-top: 28px;\n    --prism-canvas-overlay-inline: 28px;\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\n.stage-crosshair.visible {\n    opacity: 1;\n}\n\n.stage-crosshair::before,\n.stage-crosshair::after {\n    position: absolute;\n    content: '';\n    background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n}\n\n.stage-crosshair::before {\n    top: 50%;\n    right: 0;\n    left: 0;\n    height: 1px;\n}\n\n.stage-crosshair::after {\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    width: 1px;\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\n.demo-wrap[data-canvas-layout='stretch'] {\n    display: block;\n    width: 100%;\n    max-width: 800px;\n}\n\n/* max-width: none rather than min(800px, var(--prism-vp-w)): an explicitly\n   requested width beats a layout default, and min() would silently cap a\n   1024 viewport at 800 on any component declaring canvasLayout:\n   'stretch'.\n\n   container-type is confined to this rule, and that confinement is\n   load-bearing. It implies contain: inline-size, which on the width:auto\n   inline-block .demo-wrap is at rest would decouple its width from its\n   contents \u2014 collapsing the box and shifting every baseline in\n   test-workspace/vrt/baseline without a component having changed. Here\n   the width is explicit, so containment costs nothing and is what makes\n   a component's own @container rules respond. Media queries do not and\n   cannot: they read the real browser viewport.\n\n   grid + justify-items: center, and not text-align: center, which is the\n   obvious way to centre an inline-level child and the wrong one. The\n   showcase component is created through ViewContainerRef, so its host\n   element carries none of this component's _ngcontent attribute and no\n   scoped rule here can reach it to undo an inherited value. text-align\n   would therefore leak all the way into the specimen and silently\n   re-align its own text the moment the viewport is switched on \u2014 a\n   canvas that lies about what it is showing. Centring at the container\n   instead touches nothing inside.\n\n   Shrinking is not a side effect of that choice, it is the resting\n   behaviour preserved: at rest .demo-wrap is an inline-block that\n   already shrink-wraps its child, so a block-level specimen sizes to its\n   content here exactly as it does with the constraint off. The implicit\n   auto column still fills the declared width, so a component that asks\n   for width: 100% \u2014 the canvasLayout: 'stretch' case \u2014 keeps getting the\n   whole viewport. */\n.demo-wrap[data-viewport] {\n    display: grid;\n\n    /* flex: none, and it is load-bearing. The stage is a flex container\n     and this is its only item, so the default flex-shrink: 1 lets the\n     box render narrower than the width just asked for whenever the\n     canvas is the smaller of the two \u2014 and container-type below drops\n     the automatic minimum size to zero, so nothing stops the shrink.\n     The result is the one failure this whole feature cannot afford:\n     the dimension line states 1024 while every @container rule in the\n     specimen answers whatever the canvas happened to allow. The stage\n     is overflow: auto, so refusing to shrink scrolls instead. */\n    flex: none;\n\n    /* safe center, not bare center. Centring is right while the specimen\n     fits and wrong the moment it does not: bare centring spills an\n     over-wide specimen equally past both edges, where a real viewport of\n     that width clips at zero and scrolls in one direction. The safe\n     keyword falls back to start exactly when the item overflows, which\n     is the browser making a case distinction CSS cannot otherwise\n     express. */\n    justify-items: safe center;\n    width: var(--prism-vp-w);\n    max-width: none;\n    container-type: inline-size;\n}\n\n/* Both grips derive their position arithmetically, because .demo-wrap is\n   centred by the stage's own flexbox and then scaled in place by\n   transform: scale(var(--zoom)): the transform preserves that centre, so\n   each edge sits half the *painted* width \u2014 --prism-vp-w times --zoom \u2014 away\n   from the middle. No measurement, no ResizeObserver, and nothing to\n   fall out of step when either the width or the zoom changes.\n\n   The grip's own [scale] input (in the template) undoes the same factor\n   in the other direction: a pointer that has moved dx across the painted\n   box must change --prism-vp-w by dx / zoom for the grip to stay under the\n   cursor, so the directive multiplier is 2 / zoom on the right grip and\n   -2 / zoom on the left, not the flat \u00B12 a permanent zoom of 1 would\n   need. */\n.vp-grip {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    bottom: 0;\n    left: calc(50% - var(--prism-vp-w) * var(--zoom, 1) / 2 - 4.5px);\n    z-index: 4;\n    display: grid;\n    width: 9px;\n\n    /* The element is the guide line's full-height track and nothing else\n     may be clickable about it. It runs from the overlay band to the\n     bottom of the stage at z-index 4, straight over prism-canvas-bg-pill\n     at z-index 2, so leaving it hit-testable made part of the pill's\n     Reset button unreachable whenever a viewport was on. Only the bar\n     below takes pointer events back. */\n    pointer-events: none;\n    background: transparent;\n}\n\n.vp-grip--end {\n    right: calc(50% - var(--prism-vp-w) * var(--zoom, 1) / 2 - 4.5px);\n    left: auto;\n}\n\n/* The part you grab, and the only part of the grip that takes pointer\n   events back. It shares the guide line's grid cell \u2014 hence the matching\n   grid-area \u2014 and is raised above it so the 1px rule does not paint a\n   seam down the middle of the 3px bar.\n\n   The padding is the hit box and the background is the bar: content-box\n   sizing plus background-clip: content-box paints 3x34 while leaving\n   9x44 clickable, so the target is comfortable without the mark growing\n   to match. It is still narrow for WCAG 2.5.8, which the Width chooser\n   in the tools menu answers \u2014 the same widths are reachable there, and\n   both grips take Home/End and the arrow keys. */\n.vp-grip__bar {\n    z-index: 1;\n    box-sizing: content-box;\n    grid-area: 1 / 1;\n    place-self: center center;\n    width: 3px;\n    height: 34px;\n    padding: 5px 3px;\n    pointer-events: auto;\n    background: color-mix(in srgb, var(--prism-measure) 80%, transparent);\n    background-clip: content-box;\n    border-radius: 2px;\n    transition: background var(--dur-fast);\n}\n\n/* The edge itself, carried the whole height of the stage. Without it a\n   grip is a floating nub that says where you may pull but not what it is\n   pulling: the line is what makes the constrained region legible as a\n   region rather than as two loose handles. Faint on purpose \u2014 it crosses\n   the specimen, so it has to stay readable as chrome. */\n.vp-grip::after {\n    grid-area: 1 / 1;\n    place-self: stretch center;\n    width: 1px;\n    content: '';\n    background: color-mix(in srgb, var(--prism-measure) 75%, transparent);\n    transition: background var(--dur-fast);\n}\n\n.vp-grip:hover::after,\n.vp-grip.active::after,\n.vp-grip:focus-visible::after {\n    background: color-mix(in srgb, var(--prism-measure) 55%, transparent);\n}\n\n.vp-grip:hover .vp-grip__bar,\n.vp-grip.active .vp-grip__bar,\n.vp-grip:focus-visible .vp-grip__bar {\n    background: var(--prism-measure);\n    background-clip: content-box;\n}\n\n/* The ring goes on the bar, not on the host: the host is the full-height\n   track, and outlining that would draw a rule the length of the stage\n   for a control 34px tall. */\n.vp-grip:focus-visible {\n    outline: none;\n}\n\n.vp-grip:focus-visible .vp-grip__bar {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n/* The third resident of the overlay band: pill left, dimension centre,\n   rail right. It reads the same --prism-canvas-overlay-top the other two\n   do, so switching rulers on moves all three together.\n\n   Spans the painted width rather than sitting in the middle of it as a\n   badge, and carries the same --prism-vp-w * --zoom the grips do so the\n   three stay locked together. A badge states a number; a dimension line\n   states which distance the number measures, and that is the whole\n   claim this overlay makes. */\n.vp-dim {\n    position: absolute;\n    top: var(--prism-canvas-overlay-top, 12px);\n    left: 50%;\n    z-index: 4;\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    width: calc(var(--prism-vp-w) * var(--zoom, 1));\n    pointer-events: none;\n    transform: translateX(-50%);\n}\n\n/* Two halves with the value in the gap, rather than one rule behind it:\n   a line running under the digits would need a background plate to stay\n   readable, and the plate is the badge this replaced. */\n.vp-dim__rule {\n    position: relative;\n    flex: 1;\n    height: 1px;\n    background: color-mix(in srgb, var(--prism-measure) 70%, transparent);\n}\n\n/* The end ticks. They are what make the rule read as a measurement of\n   the span between them instead of as a divider laid across the canvas,\n   and they mark the two edges the grips can be dragged to. */\n.vp-dim__rule::before {\n    position: absolute;\n    top: -3px;\n    width: 1px;\n    height: 7px;\n    content: '';\n    background: color-mix(in srgb, var(--prism-measure) 90%, transparent);\n}\n\n.vp-dim__rule:first-child::before {\n    left: 0;\n}\n\n.vp-dim__rule:last-child::before {\n    right: 0;\n}\n\n.vp-dim__v {\n    flex: none;\n    font-family: var(--font-mono);\n    font-size: 9px;\n    color: var(--prism-measure);\n    white-space: nowrap;\n}\n", "\n  [data-bg=\"dots\"] {\n    background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n\n  [data-bg=\"plain\"] {\n    background-image: none;\n  }\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  /* These two also re-point --prism-measure, and that is not decoration.\n     Every other canvas overlay is drawn in a theme colour over a theme\n     surface, so the two move together. These two backgrounds are absolute:\n     \"light\" stays near-white while the app runs the dark theme, and \"dark\"\n     stays near-black while it runs the light one. The measurement colour\n     picked for one theme is then sitting on the other theme's ground \u2014\n     measured, the dark theme's blue reaches 1.8:1 on the light background,\n     which is a viewport overlay you cannot see. Pinning the colour to the\n     ground rather than to the theme is what makes \"always visible\" true\n     instead of true-in-the-common-case.\n\n     Literal values because this file is theme-independent by construction \u2014\n     it is the one place that already hard-codes the two absolute grounds\n     below, for the same reason. Keep them in step with --prism-measure in\n     prism-default-theme.ts; semantic-colours.spec.ts fails if they drift. */\n  [data-bg=\"light\"] {\n    background-color: var(--prism-void-light, #f7f5fc);\n    background-image: none;\n    --prism-measure: #004d8a;\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #41bcff;\n  }\n\n  /* \"transparent\" shares the checkerboard on purpose. The two say the same\n     thing in the two media the canvas has: while browsing, the checkerboard\n     is already the UI's word for \"no surface here\"; in a capture it becomes\n     literal transparency. A stage that were really see-through in the app\n     would just show the shell through the canvas, which means nothing. The\n     split between the two lives entirely in CAPTURE_STYLES. */\n  [data-bg=\"checker\"],\n  [data-bg=\"transparent\"] {\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"] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
-                        read: ViewContainerRef,
+                        read: ViewContainerRef
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 172 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 50 }); })();

package/dist/app/renderer/projectable-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"projectable-content.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/projectable-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACvC,IAAI,EAAE,EAAE,CAmCV"}
+{"version":3,"file":"projectable-content.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/projectable-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,EAAE,CAsCtF"}

package/dist/app/renderer/projectable-content.js

@@ -14,9 +14,7 @@ export function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];
     }
-    const defaultNodes = content['default']
-        ? htmlToNodes(content['default'])
-        : [];
+    const defaultNodes = content['default'] ? htmlToNodes(content['default']) : [];
     const result = [defaultNodes];
     for (const [selector, html] of Object.entries(content)) {
         if (selector === 'default')

package/dist/app/renderer/snippet-generator.d.ts

@@ -1,5 +1,5 @@
-import type { InputMeta } from '../../plugin/plugin.types.js';
 import type { DirectiveHost } from '../../decorator/showcase.types.js';
+import type { InputMeta } from '../../plugin/plugin.types.js';
 export interface SnippetDirectiveOptions {
     host?: string | DirectiveHost;
 }

package/dist/app/renderer/snippet-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-generator.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/snippet-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAC/B;AAwBD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,gBAAgB,CAAC,EAAE,uBAAuB,GACzC,MAAM,CA0ER"}
+{"version":3,"file":"snippet-generator.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/snippet-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CACjC;AAoBD,wBAAgB,eAAe,CAC3B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,gBAAgB,CAAC,EAAE,uBAAuB,GAC3C,MAAM,CA4DR"}

package/dist/app/renderer/snippet-generator.js

@@ -29,15 +29,11 @@ export function generateSnippet(selector, inputs, values, explicitKeys, content,
         const value = values[input.name];
         if (value === undefined)
             continue;
-        if (input.defaultValue !== undefined &&
-            value === input.defaultValue &&
-            !explicitKeys?.has(input.name))
+        if (input.defaultValue !== undefined && value === input.defaultValue && !explicitKeys?.has(input.name))
             continue;
         // Only a guess, and only sound when no default is known: a boolean input
         // that defaults to `true` has to show its explicit `false`.
-        if (input.defaultValue === undefined &&
-            typeof value === 'boolean' &&
-            !value)
+        if (input.defaultValue === undefined && typeof value === 'boolean' && !value)
             continue;
         pushAttribute(attributes, input.name, value);
     }
@@ -80,9 +76,7 @@ function directiveSelectorToAttr(selector) {
     return match ? match[1] : selector;
 }
 function parseHostStringSimple(host) {
-    const match = host
-        .trim()
-        .match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
+    const match = host.trim().match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
     if (!match)
         return { tag: 'div', attrs: '' };
     return { tag: match[1], attrs: match[2].trim() };
@@ -112,15 +106,11 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         const value = values[input.name];
         if (value === undefined)
             continue;
-        if (input.defaultValue !== undefined &&
-            value === input.defaultValue &&
-            !explicitKeys?.has(input.name))
+        if (input.defaultValue !== undefined && value === input.defaultValue && !explicitKeys?.has(input.name))
             continue;
         // Only a guess, and only sound when no default is known: a boolean input
         // that defaults to `true` has to show its explicit `false`.
-        if (input.defaultValue === undefined &&
-            typeof value === 'boolean' &&
-            !value)
+        if (input.defaultValue === undefined && typeof value === 'boolean' && !value)
             continue;
         pushAttribute(attributes, input.name, value);
     }
@@ -133,10 +123,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
             continue;
         pushAttribute(attributes, name, value);
     }
-    const projectedContent = content ??
-        (typeof values['__prismContent__'] === 'string'
-            ? values['__prismContent__']
-            : undefined);
+    const projectedContent = content ?? (typeof values['__prismContent__'] === 'string' ? values['__prismContent__'] : undefined);
     const allAttrs = [...hostAttrs, directiveAttr, ...attributes].join(' ');
     const contentHtml = resolveContentHtml(projectedContent);
     if (!contentHtml) {
@@ -145,9 +132,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         const singleLine = `<${tag} ${allAttrs} />`;
         if (singleLine.length <= 80)
             return singleLine;
-        const indented = [...hostAttrs, directiveAttr, ...attributes]
-            .map((a) => `  ${a}`)
-            .join('\n');
+        const indented = [...hostAttrs, directiveAttr, ...attributes].map((a) => `  ${a}`).join('\n');
         return `<${tag}\n${indented} />`;
     }
     const openTag = `<${tag} ${allAttrs}>`;

package/dist/app/services/navigation-item.types.d.ts

@@ -1,5 +1,5 @@
-import type { RuntimeComponent } from '../../plugin/plugin.types.js';
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
 export type NavigationItem = {
     kind: 'component';
     data: RuntimeComponent;

package/dist/app/services/navigation-item.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.types.d.ts","sourceRoot":"","sources":["../../../src/app/services/navigation-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC"}
+{"version":3,"file":"navigation-item.types.d.ts","sourceRoot":"","sources":["../../../src/app/services/navigation-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC"}

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

@@ -6,12 +6,34 @@ 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>;
+    /**
+     * The width `.demo-wrap` is constrained to, or `null` for "as wide as it
+     * wants".
+     *
+     * Nullable rather than a `0`/`-1` sentinel because "off" is genuinely a
+     * different state and not a width: the renderer keys a whole set of CSS off
+     * `[data-viewport]`, and a falsy number would make `viewportWidth() ? ... `
+     * silently treat a legal narrow width as "off" the moment the floor ever
+     * moved to 0.
+     */
+    readonly viewportWidth: import("@angular/core").WritableSignal<number | null>;
     private readonly capture;
+    /**
+     * What `toggleViewport()` restores.
+     *
+     * Kept in a field rather than persisted: it exists so that flicking the rail
+     * button off and on again does not throw away a width you just dragged to,
+     * which is a within-session concern. The width that *is* worth carrying
+     * across sessions is the live one, and that is already in `viewportWidth`.
+     */
+    private lastViewportWidth;
     constructor();
     setBg(bg: CanvasBg): void;
     setZoom(z: number): void;
     toggleGuides(): void;
     toggleRulers(): void;
+    setViewportWidth(w: number | null): void;
+    toggleViewport(): void;
     private loadFromStorage;
     private save;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismCanvasService, never>;

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;;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;;CAiE9B"}
+{"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;;AAI3E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,qBACa,kBAAkB;IAC3B,QAAQ,CAAC,EAAE,mDAA4B;IACvC,QAAQ,CAAC,IAAI,iDAAa;IAC1B,QAAQ,CAAC,MAAM,kDAAiB;IAChC,QAAQ,CAAC,MAAM,kDAAiB;IAEhC;;;;;;;;;OASG;IACH,QAAQ,CAAC,aAAa,wDAA+B;IAErD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IAEvD;;;;;;;OAOG;IACH,OAAO,CAAC,iBAAiB,CAAoB;;IAW7C,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI;IAKzB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKxB,YAAY,IAAI,IAAI;IAKpB,YAAY,IAAI,IAAI;IAKpB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAYxC,cAAc,IAAI,IAAI;IAItB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,IAAI;yCAnGH,kBAAkB;;CAqH9B"}

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

@@ -1,5 +1,6 @@
 import { inject, Injectable, signal } from '@angular/core';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
+import { clampViewportWidth, VIEWPORT_DEFAULT } from '../../shared/viewport.type.js';
 import { PrismCaptureService } from './prism-capture.service.js';
 import * as i0 from "@angular/core";
 const STORAGE_KEY = 'ng-prism-canvas';
@@ -12,7 +13,28 @@ export class PrismCanvasService {
     ...(ngDevMode ? [{ debugName: "guides" }] : /* istanbul ignore next */ []));
     rulers = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rulers" }] : /* istanbul ignore next */ []));
+    /**
+     * The width `.demo-wrap` is constrained to, or `null` for "as wide as it
+     * wants".
+     *
+     * Nullable rather than a `0`/`-1` sentinel because "off" is genuinely a
+     * different state and not a width: the renderer keys a whole set of CSS off
+     * `[data-viewport]`, and a falsy number would make `viewportWidth() ? ... `
+     * silently treat a legal narrow width as "off" the moment the floor ever
+     * moved to 0.
+     */
+    viewportWidth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
     capture = inject(PrismCaptureService);
+    /**
+     * What `toggleViewport()` restores.
+     *
+     * Kept in a field rather than persisted: it exists so that flicking the rail
+     * button off and on again does not throw away a width you just dragged to,
+     * which is a within-session concern. The width that *is* worth carrying
+     * across sessions is the live one, and that is already in `viewportWidth`.
+     */
+    lastViewportWidth = VIEWPORT_DEFAULT;
     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
@@ -38,6 +60,20 @@ export class PrismCanvasService {
         this.rulers.update((v) => !v);
         this.save();
     }
+    setViewportWidth(w) {
+        if (w === null) {
+            this.viewportWidth.set(null);
+        }
+        else {
+            const clamped = clampViewportWidth(w);
+            this.lastViewportWidth = clamped;
+            this.viewportWidth.set(clamped);
+        }
+        this.save();
+    }
+    toggleViewport() {
+        this.setViewportWidth(this.viewportWidth() === null ? this.lastViewportWidth : null);
+    }
     loadFromStorage() {
         try {
             const raw = localStorage.getItem(STORAGE_KEY);
@@ -53,8 +89,15 @@ export class PrismCanvasService {
                 this.guides.set(d['guides']);
             if (typeof d['rulers'] === 'boolean')
                 this.rulers.set(d['rulers']);
+            if (typeof d['viewportWidth'] === 'number') {
+                const w = clampViewportWidth(d['viewportWidth']);
+                this.lastViewportWidth = w;
+                this.viewportWidth.set(w);
+            }
+        }
+        catch {
+            // Malformed JSON or no storage access: keep the field defaults.
         }
-        catch { }
     }
     save() {
         if (this.capture.active())
@@ -65,9 +108,13 @@ export class PrismCanvasService {
                 zoom: this.zoom(),
                 guides: this.guides(),
                 rulers: this.rulers(),
+                viewportWidth: this.viewportWidth()
             }));
         }
-        catch { }
+        catch {
+            // Storage may be full or disabled (e.g. private browsing); the
+            // canvas state just stays unpersisted for this session.
+        }
     }
     static ɵfac = function PrismCanvasService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismCanvasService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismCanvasService, factory: PrismCanvasService.ɵfac, providedIn: 'root' });

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

@@ -1 +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;AAItD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,4BAA4B,QAE0H,CAAC;AAmJpK;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAItB;IAEF,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAdZ,mBAAmB;;CAuB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"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;AAItD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,4BAA4B,QAE4H,CAAC;AAiJtK;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA6F;IAErH,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAVd,mBAAmB;;CAoB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAKzD"}

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

@@ -76,9 +76,7 @@ export const CAPTURE_TRANSPARENT_SELECTOR = `[${CAPTURE_ATTRIBUTE}] .prism-canva
  * panel has no canvas, and blanking the shell around it would leave a runner
  * with an empty screenshot rather than an honest one.
  */
-const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` +
-    `:is(.prism-shell, .prism-body, .prism-main, .prism-canvas-wrap)` +
-    `:has(.prism-canvas-stage) > :not(:has(.prism-canvas-stage))`;
+const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` + `:is(.prism-shell, .prism-body, .prism-main, .prism-canvas-wrap)` + `:has(.prism-canvas-stage) > :not(:has(.prism-canvas-stage))`;
 /**
  * Global stylesheet applied in capture mode.
  *
@@ -206,9 +204,7 @@ ${CAPTURE_CANVAS_ONLY_SELECTOR} {
  * make zoom-locking racy.
  */
 export class PrismCaptureService {
-    _active = signal(typeof window !== 'undefined'
-        ? parseCaptureParam(window.location.search)
-        : false, /* @ts-ignore */
+    _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();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,oBAAoB;IAC/B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAOvC,KAAK,IAAI,IAAI;yCAXF,oBAAoB;;CAchC"}
+{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAClB;AAED,qBACa,oBAAoB;IAC7B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAIvC,KAAK,IAAI,IAAI;yCARJ,oBAAoB;;CAWhC"}