@ng-prism/core 22.3.0 → 22.4.1

package/dist/app/overview/prism-overview-cell.component.js

@@ -10,11 +10,11 @@ const _c0 = ["outlet"];
  * One frame of the contact sheet: a stage painting the variant's declared
  * background, with the variant's own instance on it and a caption beneath.
  *
- * It deliberately shares none of the Playground's bookkeeping. Output
+ * It shares none of the Playground's bookkeeping. Output
  * subscriptions, `renderedElement`, the `prism:render:*` marks, the renderer
  * hooks and `data-prism-rendered` all describe *one* rendered thing; n cells
  * writing to any of them would corrupt what they mean. `data-prism-rendered`
- * matters most — it is the selector external screenshot runners key on (see
+ * matters most: it is the selector external screenshot runners key on (see
  * `docs/guide/external-tooling.md`), and this component never emits it.
  */
 export class PrismOverviewCellComponent {
@@ -34,7 +34,7 @@ export class PrismOverviewCellComponent {
         // Defensive, not reachable today: `Variant.name` is required
         // (decorator/showcase.types.ts) and `prism-overview` only ever creates a
         // cell for an index it just read out of that same `variants` array. A
-        // bare `07` would only appear if those two facts stopped lining up — the
+        // bare `07` would only appear if those two facts stopped lining up, i.e. the
         // grid indexing past the array it iterates, or `name` becoming optional.
         return variant ? `${number} ${variant.name}` : number;
     }, /* @ts-ignore */
@@ -56,10 +56,9 @@ export class PrismOverviewCellComponent {
     // The Playground lets a variant that throws on construction propagate: one
     // broken instance, and the user navigates away from it. The Overview
     // fans instantiation out from one instance to n, all mounted in the same
-    // change-detection pass — an uncaught throw here would abort the refresh of
+    // change-detection pass. An uncaught throw here would abort the refresh of
     // every cell after it, so one bad variant would take down the whole sheet
-    // instead of just its own cell. That asymmetry is deliberate: contain here,
-    // propagate there.
+    // instead of just its own cell. Hence: contain here, propagate there.
     mount(component, index) {
         try {
             this.outlet().clear();
@@ -91,8 +90,8 @@ export class PrismOverviewCellComponent {
             // *after* that attach. So there is usually a half-built subtree sitting
             // in the outlet by the time we get here, and clearing it is what makes
             // a caught cell actually show an empty stage with its caption still in
-            // place — an honest picture of "this variant failed", rather than a
-            // broken grid with no indication of which cell caused it.
+            // place, which shows "this variant failed" instead of a broken grid
+            // with no indication of which cell caused it.
             this.outlet().clear();
             console.error(`[ng-prism] Variant ${index} of ${component.meta.className} failed to render:`, error);
         }
@@ -115,14 +114,14 @@ export class PrismOverviewCellComponent {
             i0.ɵɵattribute("data-bg", ctx.bg());
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.caption());
-        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n    display: inline-block;\n    max-width: 100%;\n}\n\n[data-wide][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n\n\n\n\n.cell__caption[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\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  }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--%NS%sp-2);\n    min-width: 0;\n}\n\n\n\n[data-wide][_nghost-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.cell__stage[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--%NS%sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--%NS%prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--%NS%prism-stage);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.cell__mount[_ngcontent-%COMP%] {\n    display: inline-block;\n    max-width: 100%;\n}\n\n[data-wide][_nghost-%COMP%]   .cell__mount[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n\n\n\n\n.cell__caption[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%prism-font-mono);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\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\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: #ca00c1;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"][_ngcontent-%COMP%] {\n    background-color: var(--%NS%prism-void-dark, #07050f);\n    background-image: none;\n    --%NS%prism-measure: #f632ff;\n    --%NS%prism-measure-plate: var(--%NS%prism-void-dark, #07050f);\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(PrismOverviewCellComponent, [{
         type: Component,
         args: [{ selector: 'prism-overview-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     role: 'listitem',
                     '[attr.data-wide]': "isWide() ? '' : null"
-                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"bg()\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n</div>\n<span class=\"cell__caption\">{{ caption() }}</span>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-2);\n    min-width: 0;\n}\n\n/* A stretch variant has no intrinsic width to compare against its\n   neighbours, so it takes the row rather than a column. */\n:host([data-wide]) {\n    grid-column: 1 / -1;\n}\n\n.cell__stage {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    border-radius: var(--radius-sm);\n}\n\n.cell__mount {\n    display: inline-block;\n    max-width: 100%;\n}\n\n:host([data-wide]) .cell__mount {\n    display: block;\n    width: 100%;\n}\n\n/* The caption sits below the frame, not on it. Inside, it would have to\n   invert against every background the cell can paint \u2014 and gaining a new\n   contrast rule per CanvasBg value is exactly the cost the sheet exists\n   to avoid. */\n.cell__caption {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\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"] }]
+                }, template: "<div\n    class=\"cell__stage\"\n    [attr.data-bg]=\"bg()\">\n    <div class=\"cell__mount\"><ng-container #outlet /></div>\n</div>\n<span class=\"cell__caption\">{{ caption() }}</span>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--sp-2);\n    min-width: 0;\n}\n\n/* A stretch variant has no intrinsic width to compare against its\n   neighbours, so it takes the row rather than a column. */\n:host([data-wide]) {\n    grid-column: 1 / -1;\n}\n\n.cell__stage {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    padding: var(--sp-5);\n    overflow: hidden;\n    outline: 1px solid var(--prism-stage-edge);\n    outline-offset: -1px;\n    background-color: var(--prism-stage);\n    border-radius: var(--radius-sm);\n}\n\n.cell__mount {\n    display: inline-block;\n    max-width: 100%;\n}\n\n:host([data-wide]) .cell__mount {\n    display: block;\n    width: 100%;\n}\n\n/* The caption sits below the frame, not on it. Inside, it would have to\n   invert against every background the cell can paint, and gaining a new\n   contrast rule per CanvasBg value is the cost the sheet exists to\n   avoid. */\n.cell__caption {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\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 the surface a component was\n     designed against, and their colour is absolute rather than a theme token,\n     which makes them the values to declare for a screenshot baseline. Use\n     \"dots\" for the grid. */\n  /* These two also re-point --prism-measure. Other overlays use theme colours\n     on theme surfaces, but these grounds ignore the theme: \"light\" stays\n     near-white in the dark theme and \"dark\" stays near-black in the light one.\n     The dark theme's magenta reaches only 2.85:1 on the light ground, under the\n     4.5:1 its 9px readout needs, so the measurement colour has to follow the\n     ground, not the theme.\n\n     --prism-measure-plate follows it for the same reason. It is the surface\n     the measuring tool's value label paints itself on, so the label reads as a\n     gap in the measurement line rather than a badge on top of it. At its\n     --prism-stage fallback it would be the theme's stage under a re-pointed\n     foreground: the light theme's magenta on the dark theme's stage reads\n     3.71:1, the dark theme's on white 3.08:1. Pinned to the ground the same way,\n     the pairs reach 4.54:1 and 6.57:1. A color-mix against the ground would\n     work too, but this file already states both grounds literally, and one\n     mechanism per decision is enough.\n\n     Literal values because this file is theme-independent, like the two\n     grounds below. 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: #ca00c1;\n    --prism-measure-plate: var(--prism-void-light, #f7f5fc);\n  }\n  [data-bg=\"dark\"] {\n    background-color: var(--prism-void-dark, #07050f);\n    background-image: none;\n    --prism-measure: #f632ff;\n    --prism-measure-plate: var(--prism-void-dark, #07050f);\n  }\n\n  /* \"transparent\" shares the checkerboard. In the app the checkerboard is\n     already the UI's sign for \"no surface\", and a see-through stage would only\n     show the shell behind it. Only CAPTURE_STYLES tells the two apart. */\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"] }]
     }], () => [], { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef
                     }, isSignal: true }] }] }); })();

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

@@ -1,10 +1,10 @@
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
 import * as i0 from "@angular/core";
 /**
- * All variants of one component at once — a contact sheet rather than a
+ * All variants of one component at once: a contact sheet rather than a
  * viewfinder.
  *
- * Deliberately without controls of any kind: columns follow the window, and
+ * No controls of any kind: columns follow the window, and
  * everything else a cell shows is what the variant itself declared.
  */
 export declare class PrismOverviewComponent {

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

@@ -18,10 +18,10 @@ function PrismOverviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(ctx_r2.variants());
 } }
 /**
- * All variants of one component at once — a contact sheet rather than a
+ * All variants of one component at once: a contact sheet rather than a
  * viewfinder.
  *
- * Deliberately without controls of any kind: columns follow the window, and
+ * No controls of any kind: columns follow the window, and
  * everything else a cell shows is what the variant itself declared.
  */
 export class PrismOverviewComponent {

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

@@ -58,6 +58,6 @@ export class PrismPageRendererComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPageRendererComponent, [{
         type: Component,
-        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: "@if (page(); as p) {\n    <div class=\"prism-page-renderer\">\n        <h2 class=\"prism-page-renderer__title\">{{ p.title }}</h2>\n        @switch (p.type) {\n            @case ('custom') {\n                <pre class=\"prism-page-renderer__json\">{{ $any(p).data | json }}</pre>\n            }\n            @case ('component') {\n                <div class=\"prism-page-renderer__component\">\n                    <ng-container *ngComponentOutlet=\"$any(p).component\" />\n                </div>\n            }\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n    background: var(--prism-bg-surface);\n    border-bottom: 1px solid var(--prism-border);\n    border-left: 3px solid;\n    border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n}\n\n.prism-page-renderer__component {\n    padding: var(--sp-5) var(--sp-6);\n    font-family: var(--prism-font-sans);\n    font-size: var(--fs-lg);\n    line-height: 1.6;\n    color: var(--prism-text-2);\n}\n\n/* Projected page content arrives through ngComponentOutlet and carries no\n   theme of its own. Without this scope a consuming app's plain <h2> renders\n   in the browser default colour on the styleguide's dark shell \u2014 measured at\n   rgb(26,26,46) on a dark ground, which is darker than the body text beneath\n   it and inverts the hierarchy. These are deliberately element selectors:\n   the content is authored by the consumer and carries no classes we know. */\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6) {\n    margin: var(--sp-6) 0 var(--sp-3);\n    font-family: var(--prism-font-sans);\n    font-weight: 600;\n    line-height: 1.25;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n    margin-top: 0;\n}\n\n.prism-page-renderer__component h1 {\n    font-size: 24px;\n}\n\n.prism-page-renderer__component h2 {\n    font-size: 20px;\n}\n\n.prism-page-renderer__component h3 {\n    font-size: 17px;\n}\n\n.prism-page-renderer__component :is(h4, h5, h6) {\n    font-size: var(--fs-xl);\n}\n\n.prism-page-renderer__component :is(p, ul, ol) {\n    margin: 0 0 var(--sp-4);\n}\n\n.prism-page-renderer__component :is(strong, b) {\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__component a {\n    color: var(--prism-primary);\n}\n\n.prism-page-renderer__component :is(code, pre) {\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__json {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--prism-text-muted);\n    white-space: pre-wrap;\n}\n"] }]
+        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [JsonPipe, NgComponentOutlet], template: "@if (page(); as p) {\n    <div class=\"prism-page-renderer\">\n        <h2 class=\"prism-page-renderer__title\">{{ p.title }}</h2>\n        @switch (p.type) {\n            @case ('custom') {\n                <pre class=\"prism-page-renderer__json\">{{ $any(p).data | json }}</pre>\n            }\n            @case ('component') {\n                <div class=\"prism-page-renderer__component\">\n                    <ng-container *ngComponentOutlet=\"$any(p).component\" />\n                </div>\n            }\n        }\n    </div>\n}\n", styles: [":host {\n    display: block;\n    flex: 1;\n    overflow-y: auto;\n}\n\n.prism-page-renderer__title {\n    padding: 16px 20px;\n    margin: 0;\n    font-family: var(--prism-font-sans);\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n    background: var(--prism-bg-surface);\n    border-bottom: 1px solid var(--prism-border);\n    border-left: 3px solid;\n    border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n}\n\n.prism-page-renderer__component {\n    padding: var(--sp-5) var(--sp-6);\n    font-family: var(--prism-font-sans);\n    font-size: var(--fs-lg);\n    line-height: 1.6;\n    color: var(--prism-text-2);\n}\n\n/* Projected page content arrives through ngComponentOutlet and carries no\n   theme of its own. Without this scope a consuming app's plain <h2> renders\n   in the browser default colour on the styleguide's dark shell (measured at\n   rgb(26,26,46) on a dark ground), which is darker than the body text beneath\n   it and inverts the hierarchy. These are element selectors because\n   the content is authored by the consumer and carries no classes we know. */\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6) {\n    margin: var(--sp-6) 0 var(--sp-3);\n    font-family: var(--prism-font-sans);\n    font-weight: 600;\n    line-height: 1.25;\n    color: var(--prism-text);\n    letter-spacing: -0.01em;\n}\n\n.prism-page-renderer__component :is(h1, h2, h3, h4, h5, h6):first-child {\n    margin-top: 0;\n}\n\n.prism-page-renderer__component h1 {\n    font-size: 24px;\n}\n\n.prism-page-renderer__component h2 {\n    font-size: 20px;\n}\n\n.prism-page-renderer__component h3 {\n    font-size: 17px;\n}\n\n.prism-page-renderer__component :is(h4, h5, h6) {\n    font-size: var(--fs-xl);\n}\n\n.prism-page-renderer__component :is(p, ul, ol) {\n    margin: 0 0 var(--sp-4);\n}\n\n.prism-page-renderer__component :is(strong, b) {\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__component a {\n    color: var(--prism-primary);\n}\n\n.prism-page-renderer__component :is(code, pre) {\n    font-family: var(--prism-font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n}\n\n.prism-page-renderer__json {\n    padding: 24px;\n    margin: 0;\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--prism-text-muted);\n    white-space: pre-wrap;\n}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 12 }); })();

package/dist/app/panels/a11y/a11y-audit.service.js

@@ -20,14 +20,14 @@ export function calculateScore(results) {
 }
 /**
  * axe-core is a dependency of `@ng-prism/core` and loaded lazily, so a failure
- * here means the chunk could not be fetched — not that anything is missing.
+ * here means the chunk could not be fetched, not that anything is missing.
  */
 async function loadAxe() {
     try {
         return await import('axe-core');
     }
     catch (cause) {
-        throw new Error('Could not load axe-core, so the accessibility audit is unavailable. It ships with @ng-prism/core — check that the install is intact and the chunk is reachable.', { cause });
+        throw new Error('Could not load axe-core, so the accessibility audit is unavailable. It ships with @ng-prism/core; check that the install is intact and the chunk is reachable.', { cause });
     }
 }
 export async function runCoreAudit(element, config) {

package/dist/app/panels/a11y/a11y-summary.d.ts

@@ -3,12 +3,11 @@ import type { A11yComponentMeta, A11yScoreResult, A11yThresholds } from './a11y.
  * A component's standing, derived with the same precedence
  * `checkA11yThresholds` uses library-wide.
  *
- * Browser-safe and deliberately so, even though the build step is its main
- * caller: the derivation is written down once and read from both sides. The
+ * Browser-safe, even though the build step is its main caller: the derivation is written down once and read from both sides. The
  * build-time hook stores the result in the component's meta for the navigation
  * marker, and the panel tab grades the *live* audit with the very same rule.
- * The two look at different numbers — the report is a snapshot, the audit is
- * running now — but they must never grade the same number differently, which
+ * The two look at different numbers (the report is a snapshot, the audit is
+ * running now), but they must never grade the same number differently, which
  * is what a second hardcoded scale next to this one would guarantee.
  */
 export declare function deriveA11ySummary(score: A11yScoreResult, thresholds: A11yThresholds): NonNullable<A11yComponentMeta['summary']>;

package/dist/app/panels/a11y/a11y-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1F;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAmB/H"}
+{"version":3,"file":"a11y-summary.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1F;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAmB/H"}

package/dist/app/panels/a11y/a11y-summary.js

@@ -2,12 +2,11 @@
  * A component's standing, derived with the same precedence
  * `checkA11yThresholds` uses library-wide.
  *
- * Browser-safe and deliberately so, even though the build step is its main
- * caller: the derivation is written down once and read from both sides. The
+ * Browser-safe, even though the build step is its main caller: the derivation is written down once and read from both sides. The
  * build-time hook stores the result in the component's meta for the navigation
  * marker, and the panel tab grades the *live* audit with the very same rule.
- * The two look at different numbers — the report is a snapshot, the audit is
- * running now — but they must never grade the same number differently, which
+ * The two look at different numbers (the report is a snapshot, the audit is
+ * running now), but they must never grade the same number differently, which
  * is what a second hardcoded scale next to this one would guarantee.
  */
 export function deriveA11ySummary(score, thresholds) {

package/dist/app/panels/a11y/a11y-thresholds.d.ts

@@ -1,5 +1,5 @@
 import type { A11yThresholds } from './a11y.types.js';
-/** Sentinel value meaning "no upper bound" — JSON-safe (unlike Infinity, which serializes to null). */
+/** Sentinel value meaning "no upper bound". JSON-safe (unlike Infinity, which serializes to null). */
 export declare const A11Y_UNLIMITED: number;
 export declare const DEFAULT_A11Y_THRESHOLDS: A11yThresholds;
 export declare function resolveA11yThresholds(input?: Partial<A11yThresholds>): A11yThresholds;

package/dist/app/panels/a11y/a11y-thresholds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-thresholds.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,uGAAuG;AACvG,eAAO,MAAM,cAAc,QAA0B,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAGrF"}
+{"version":3,"file":"a11y-thresholds.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-thresholds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,sGAAsG;AACtG,eAAO,MAAM,cAAc,QAA0B,CAAC;AAEtD,eAAO,MAAM,uBAAuB,EAAE,cAKrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAGrF"}

package/dist/app/panels/a11y/a11y-thresholds.js

@@ -1,4 +1,4 @@
-/** Sentinel value meaning "no upper bound" — JSON-safe (unlike Infinity, which serializes to null). */
+/** Sentinel value meaning "no upper bound". JSON-safe (unlike Infinity, which serializes to null). */
 export const A11Y_UNLIMITED = Number.MAX_SAFE_INTEGER;
 export const DEFAULT_A11Y_THRESHOLDS = {
     score: 80,

package/dist/app/panels/a11y/a11y.types.d.ts

@@ -31,7 +31,7 @@ export interface A11yReport {
         auditedComponents: number;
         auditedVariants: number;
     };
-    /** Optional per-component breakdown (className → score). Used for tooltips/drilldown. */
+    /** Optional per-component breakdown (className -> score). Used for tooltips/drilldown. */
     components?: Record<string, A11yScoreResult>;
     /** Timestamp the report was generated. */
     generatedAt?: string;

package/dist/app/panels/a11y/a11y.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y.types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC3B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACvB,mEAAmE;IACnE,KAAK,EAAE,eAAe,GAAG;QACrB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,eAAe,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC7C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,4EAA4E;AAC5E,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;CAC9B;AAED,qDAAqD;AACrD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE;QAAE,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE;AAED,MAAM,WAAW,iBAAiB;IAC9B,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACrC,iGAAiG;IACjG,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,QAAQ;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACzC,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"a11y.types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC3B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACvB,mEAAmE;IACnE,KAAK,EAAE,eAAe,GAAG;QACrB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,eAAe,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC7C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,4EAA4E;AAC5E,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;CAC9B;AAED,qDAAqD;AACrD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE;QAAE,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE;AAED,MAAM,WAAW,iBAAiB;IAC9B,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACrC,iGAAiG;IACjG,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,QAAQ;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACzC,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CACpB"}

package/dist/app/panels/builtin-navigation-decorations.d.ts

@@ -1,6 +1,6 @@
 import type { NavigationDecorationDefinition } from '../../plugin/plugin.types.js';
 /**
- * Core-owned navigation markers — the counterpart to `BUILTIN_PANELS` and
+ * Core-owned navigation markers, the counterpart to `BUILTIN_PANELS` and
  * `BUILTIN_HEADER_WIDGETS`. A11y is a core feature, not a plugin, so its
  * marker lives here rather than in a plugin's contribution list.
  */

package/dist/app/panels/builtin-navigation-decorations.js

@@ -1,5 +1,5 @@
 /**
- * Core-owned navigation markers — the counterpart to `BUILTIN_PANELS` and
+ * Core-owned navigation markers, the counterpart to `BUILTIN_PANELS` and
  * `BUILTIN_HEADER_WIDGETS`. A11y is a core feature, not a plugin, so its
  * marker lives here rather than in a plugin's contribution list.
  */

package/dist/app/panels/controls/non-editable-input-types.js

@@ -3,7 +3,7 @@
  * a JSON textarea (they wrap live framework objects, not data). When a
  * showcased component declares an input of one of these types, the controls
  * panel renders a "Not editable" placeholder instead of routing it through
- * the JsonControl — which would otherwise crash on `undefined`/non-serializable
+ * the JsonControl, which would otherwise crash on `undefined`/non-serializable
  * defaults and presents a misleading editor to the developer anyway.
  */
 const NON_EDITABLE_TYPE_NAMES = ['TemplateRef', 'ElementRef', 'ViewContainerRef'];

package/dist/app/panels/panel-host/panel-badge.d.ts

@@ -6,7 +6,7 @@ import type { A11yScoreResult, A11yThresholds } from '../a11y/a11y.types.js';
  * Passed in rather than injected so this stays a pure function. The panel host
  * reads them from its own services and hands them over; that is the whole
  * reason the built-in chain could not simply be expressed as
- * {@link PanelDefinition.badge} callbacks — `a11y` reports a running audit, not
+ * {@link PanelDefinition.badge} callbacks: `a11y` reports a running audit, not
  * anything the component's meta holds.
  *
  * The thresholds travel with the audit result rather than being baked in here.

package/dist/app/provide-prism.js

@@ -13,7 +13,7 @@ export function providePrism(manifest, config, options) {
         : manifest;
     // 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
+    // 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__'] = buildDiscoveryManifest(mergedManifest);

package/dist/app/renderer/known-inputs.d.ts

@@ -1,7 +1,7 @@
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
 /** Synthetic input the manifest generator emits on directive wrapper classes
  * to project per-variant `content` text into the host element. The directive
- * itself doesn't declare it, so it isn't in `meta.inputs` — code that
+ * itself doesn't declare it, so it isn't in `meta.inputs`, and code that
  * validates / filters inputs against that list must allow this key through.
  */
 export declare const PRISM_CONTENT_INPUT = "__prismContent__";

package/dist/app/renderer/known-inputs.js

@@ -1,6 +1,6 @@
 /** Synthetic input the manifest generator emits on directive wrapper classes
  * to project per-variant `content` text into the host element. The directive
- * itself doesn't declare it, so it isn't in `meta.inputs` — code that
+ * itself doesn't declare it, so it isn't in `meta.inputs`, and code that
  * validates / filters inputs against that list must allow this key through.
  */
 export const PRISM_CONTENT_INPUT = '__prismContent__';

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

@@ -14,12 +14,26 @@ export type OverlayResolution = {
 /**
  * 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.
+ * Resolves to `none` regardless of which panel is active, and never
+ * triggers a lazy overlay load, under either of two independent
+ * conditions:
+ *
+ * - Capture mode: panel overlays render *inside* `.demo-wrap`, the same
+ *   element external screenshot tools capture.
+ * - Measure mode: see the `measureActive` option below for why a running
+ *   measuring tool preempts every panel overlay the same way.
  */
 export declare function resolveOverlay(panels: readonly PanelDefinition[], activePanelId: string, options: {
     captureActive: boolean;
+    /**
+     * True while the measuring tool is running.
+     *
+     * A bridge for now: once the tool can attribute a measured pixel gap
+     * to the CSS property that produced it, the box-model plugin has
+     * nothing left that it alone can do, and the competition for the
+     * pointer dissolves. See Spec §13.
+     */
+    measureActive: boolean;
     cache: ReadonlyMap<string, Type<unknown>>;
 }): OverlayResolution;
 //# sourceMappingURL=overlay-resolver.d.ts.map

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

@@ -1 +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,GACvB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3C;IACI,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CACtC,CAAC;AAIR;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC1B,MAAM,EAAE,SAAS,eAAe,EAAE,EAClC,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE;IACL,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7C,GACF,iBAAiB,CA+BnB"}
+{"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,GACvB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;CAAE,GAC3C;IACI,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CACtC,CAAC;AAIR;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC1B,MAAM,EAAE,SAAS,eAAe,EAAE,EAClC,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE;IACL,aAAa,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7C,GACF,iBAAiB,CA+BnB"}

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

@@ -2,12 +2,17 @@ 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.
+ * Resolves to `none` regardless of which panel is active, and never
+ * triggers a lazy overlay load, under either of two independent
+ * conditions:
+ *
+ * - Capture mode: panel overlays render *inside* `.demo-wrap`, the same
+ *   element external screenshot tools capture.
+ * - Measure mode: see the `measureActive` option below for why a running
+ *   measuring tool preempts every panel overlay the same way.
  */
 export function resolveOverlay(panels, activePanelId, options) {
-    if (options.captureActive)
+    if (options.captureActive || options.measureActive)
         return NONE;
     const panel = panels.find((p) => p.id === activePanelId);
     if (!panel)

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

@@ -17,7 +17,7 @@ export declare class PrismRendererComponent {
      * 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
+     * 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
@@ -30,7 +30,7 @@ export declare class PrismRendererComponent {
     /**
      * 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
+     * The snapping lives here and not in `PrismResizerDirective` because 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.
@@ -53,7 +53,7 @@ export declare class PrismRendererComponent {
     readonly activeOverlay: import("@angular/core").WritableSignal<Type<unknown> | null>;
     /** Identifier of the currently rendered component/variant (for audit tooling / e2e). */
     protected readonly renderedKey: import("@angular/core").Signal<string | null>;
-    /** Resolved canvas layout for the active variant — variant overrides component config; defaults to 'fit'. */
+    /** Resolved canvas layout for the active variant. Variant overrides component config; defaults to 'fit'. */
     protected readonly canvasLayout: import("@angular/core").Signal<import("../../shared/canvas-layout.type.js").CanvasLayout>;
     protected readonly overlayInputs: {
         rendererService: PrismRendererService;

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":"AACA,OAAO,EASH,QAAQ,EAER,KAAK,IAAI,EAIZ,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAG3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBASa,sBAAsB;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;IAE7D;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAAuF;IAEvH,SAAS,CAAC,QAAQ,CAAC,YAAY,OAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,YAAY,QAAgB;IAE/C;;;;;;;OAOG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/C,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,CAA0D;IACtF,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,4FAO5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAI/B;;IA+EH,OAAO,CAAC,eAAe;IA8EvB,OAAO,CAAC,OAAO;yCAhPN,sBAAsB;2CAAtB,sBAAsB;CA+PlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AACA,OAAO,EASH,QAAQ,EAER,KAAK,IAAI,EAIZ,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAG3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAMhF,qBASa,sBAAsB;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;IAE7D;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAAuF;IAEvH,SAAS,CAAC,QAAQ,CAAC,YAAY,OAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,YAAY,QAAgB;IAE/C;;;;;;;OAOG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/C,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,CAA0D;IACtF,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,4GAA4G;IAC5G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAO5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAI/B;;IAgFH,OAAO,CAAC,eAAe;IA8EvB,OAAO,CAAC,OAAO;yCAjPN,sBAAsB;2CAAtB,sBAAsB;CAgQlC"}