@ng-prism/core 22.3.0 → 22.4.1

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

@@ -55,7 +55,7 @@ const STATUS_BADGES = {
     },
     beta: {
         label: 'Beta',
-        tooltip: 'Beta — API may change'
+        tooltip: 'Beta: API may change'
     },
     wip: {
         label: 'Work in progress',
@@ -63,7 +63,7 @@ const STATUS_BADGES = {
     },
     deprecated: {
         label: 'Deprecated',
-        tooltip: 'Deprecated / Legacy — do not use in new code'
+        tooltip: 'Deprecated / Legacy. Do not use in new code'
     }
 };
 export class PrismComponentHeadComponent {
@@ -97,19 +97,12 @@ export class PrismComponentHeadComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "coveragePercent" }] : /* istanbul ignore next */ []));
     /*
-     * There is deliberately no bundle metric here.
+     * No bundle metric here. Reading `meta.perf.bundle.gzipKb`/`.sizeKb` finds
+     * nothing: `@ng-prism/plugin-perf` stores `sourceSize` and `gzipEstimate`
+     * (see `perf.types.ts`), so the tile would read `Bundle —` everywhere.
      *
-     * The computed that used to produce one read `meta.perf.bundle.gzipKb` and
-     * `.sizeKb`. `@ng-prism/plugin-perf` writes neither: `bundle-scanner.ts`
-     * stores `sourceSize` and `gzipEstimate`, and `perf.types.ts` declares only
-     * those two. So the value was always null, and the old head simply hid the
-     * tile — a gauge row reading `Bundle —` on every component is noise, not
-     * information.
-     *
-     * Do not re-add the read against the real key names without first settling
-     * whether `gzipEstimate` is bytes or kilobytes. The old code appended ' kb'
-     * to whatever it found, and that question belongs to the perf plugin, not
-     * to the head.
+     * Before wiring it to the real keys, settle with the perf plugin whether
+     * `gzipEstimate` is bytes or kilobytes.
      */
     a11yScore = computed(() => {
         return this.auditService.scoreResult()?.score ?? null;
@@ -119,8 +112,8 @@ export class PrismComponentHeadComponent {
      * The visual regression headline, as the plugin already derived it.
      *
      * Read whole rather than recomputed: the colour follows the plugin's status
-     * semantics — red for any changed variant, amber for ones that could not be
-     * compared — and duplicating that rule here would mean the stat and the
+     * semantics (red for any changed variant, amber for ones that could not be
+     * compared), and duplicating that rule here would mean the stat and the
      * plugin's own panel could disagree about the same component.
      */
     vrtStat = computed(() => {
@@ -177,10 +170,10 @@ export class PrismComponentHeadComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    height: var(--%NS%band-head);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n\n\n\n\n.comp-crumb[_ngcontent-%COMP%] {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb[_ngcontent-%COMP%]::after {\n    content: ' /';\n}\n\n.comp-title[_ngcontent-%COMP%] {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.comp-status[_ngcontent-%COMP%], \nprism-head-info[_ngcontent-%COMP%], \nprism-head-gauge[_ngcontent-%COMP%], \n.comp-head-end[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n\n\n\n.comp-head-end[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n\n\n\n\n.comp-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n    font-size: var(--%NS%fs-xs);\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.comp-status-mark[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta[_ngcontent-%COMP%], \n.comp-status--wip[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n}"] });
+        } }, dependencies: [PrismHeadInfoComponent, PrismHeadGaugeComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head[_ngcontent-%COMP%] {\n    display: flex;\n    gap: var(--%NS%sp-3);\n    align-items: center;\n    height: var(--%NS%band-head);\n    padding: 0 var(--%NS%sp-5);\n    background: var(--%NS%prism-bg);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n\n\n\n\n\n\n.comp-crumb[_ngcontent-%COMP%] {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb[_ngcontent-%COMP%]::after {\n    content: ' /';\n}\n\n.comp-title[_ngcontent-%COMP%] {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--%NS%fs-xl);\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.comp-status[_ngcontent-%COMP%], \nprism-head-info[_ngcontent-%COMP%], \nprism-head-gauge[_ngcontent-%COMP%], \n.comp-head-end[_ngcontent-%COMP%] {\n    flex: none;\n}\n\n\n\n\n.comp-head-end[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end[_ngcontent-%COMP%]:empty {\n    display: none;\n}\n\n\n\n\n\n.comp-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: var(--%NS%sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--%NS%sp-3) 0 var(--%NS%sp-2);\n    font-size: var(--%NS%fs-xs);\n    font-weight: 600;\n    color: var(--%NS%prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.comp-status-mark[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-nominal);\n    background: color-mix(in srgb, var(--%NS%prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta[_ngcontent-%COMP%], \n.comp-status--wip[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-attention);\n    background: color-mix(in srgb, var(--%NS%prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip[_ngcontent-%COMP%]   .comp-status-mark[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-mark-critical);\n    background: color-mix(in srgb, var(--%NS%prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-mark-critical) 55%, transparent);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
         type: Component,
-        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip \u2014 making the measurement unreachable in exactly the case where you\n   most want to read it, and costing the gauge the fixed position it was\n   designed around. The trade is deliberate: a title truncated with an\n   ellipsis, so the chip stays put at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected \u2014 comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface \u2014 deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is exactly the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismHeadInfoComponent, PrismHeadGaugeComponent], template: "@if (comp(); as c) {\n    <section class=\"comp-head\">\n        <span class=\"comp-crumb\">{{ category() }}</span>\n        <h1 class=\"comp-title\">{{ c.meta.showcaseConfig.title }}</h1>\n\n        <prism-head-info\n            [selector]=\"c.meta.componentMeta.selector\"\n            [description]=\"c.meta.showcaseConfig.description\"\n            [tags]=\"c.meta.showcaseConfig.tags ?? []\"\n            [variantCount]=\"variantCount()\" />\n\n        @if (statusBadge(); as badge) {\n            <span\n                class=\"comp-status comp-status--{{ status() }}\"\n                [attr.title]=\"badge.tooltip\">\n                <span\n                    class=\"comp-status-mark\"\n                    aria-hidden=\"true\"></span>\n                {{ badge.label }}\n            </span>\n        }\n\n        <span class=\"comp-spacer\"></span>\n\n        <prism-head-gauge [metrics]=\"metrics()\" />\n        <span class=\"comp-head-end\"><ng-content select=\"[headEnd]\" /></span>\n    </section>\n}\n", styles: [":host {\n    display: block;\n    flex-shrink: 0;\n}\n\n.comp-head {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    height: var(--band-head);\n    padding: 0 var(--sp-5);\n    background: var(--prism-bg);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n/* The text yields, the controls never do. A long category and a long title\n   would otherwise push the gauge out of a fixed-height row whose ancestors\n   clip, making the measurement unreachable when you most want to read it,\n   and costing the gauge the fixed position it was designed around. So the\n   title truncates with an ellipsis and the chip stays at the right edge. The crumb gives way\n   first, being the least important text in the row. */\n.comp-crumb {\n    flex: 0 8 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xs);\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    white-space: nowrap;\n}\n\n.comp-crumb::after {\n    content: ' /';\n}\n\n.comp-title {\n    flex: 0 1 auto;\n    min-width: 0;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--fs-xl);\n    font-weight: 600;\n    color: var(--prism-text);\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n}\n\n.comp-spacer {\n    flex: 1;\n}\n\n.comp-status,\nprism-head-info,\nprism-head-gauge,\n.comp-head-end {\n    flex: none;\n}\n\n/* Wraps the slot rather than styling the projected element, which this\n   stylesheet cannot reach. :empty keeps the row's trailing gap from\n   appearing when nothing is projected; comment anchors do not count. */\n.comp-head-end {\n    display: inline-flex;\n    align-items: center;\n}\n\n.comp-head-end:empty {\n    display: none;\n}\n\n/* Always an outline, never a filled surface. Deprecated separates itself\n   by hue, not by weight. A filled alarm-coloured chip in a permanently\n   visible band is the \"red as background texture\" problem this\n   redesign exists to fix. */\n.comp-status {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 18px;\n    padding: 0 var(--sp-3) 0 var(--sp-2);\n    font-size: var(--fs-xs);\n    font-weight: 600;\n    color: var(--prism-text-muted);\n    letter-spacing: 0.03em;\n    white-space: nowrap;\n    border: 1px solid currentcolor;\n    border-radius: var(--radius-xs);\n}\n\n.comp-status-mark {\n    width: 6px;\n    height: 6px;\n    background: currentcolor;\n    border-radius: 50%;\n}\n\n.comp-status--stable {\n    color: var(--prism-mark-nominal);\n    background: color-mix(in srgb, var(--prism-mark-nominal) 10%, transparent);\n}\n\n.comp-status--beta,\n.comp-status--wip {\n    color: var(--prism-mark-attention);\n    background: color-mix(in srgb, var(--prism-mark-attention) 10%, transparent);\n}\n\n.comp-status--wip .comp-status-mark {\n    box-sizing: border-box;\n    width: 7px;\n    height: 7px;\n    background: transparent;\n    border: 1.5px solid currentcolor;\n}\n\n.comp-status--deprecated {\n    color: var(--prism-mark-critical);\n    background: color-mix(in srgb, var(--prism-mark-critical) 12%, transparent);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 55%, transparent);\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 41 }); })();

package/dist/app/component-head/prism-head-gauge.component.js

@@ -86,6 +86,6 @@ export class PrismHeadGaugeComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadGaugeComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: "<button\n    class=\"gauge\"\n    type=\"button\"\n    [class.gauge--ok]=\"summary().variant === 'ok'\"\n    [class.gauge--warn]=\"summary().variant === 'warn'\"\n    [class.gauge--danger]=\"summary().variant === 'danger'\"\n    popovertarget=\"prism-head-gauge\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.title]=\"ariaLabel()\">\n    <span\n        class=\"gauge__dot\"\n        aria-hidden=\"true\"></span>\n    @if (summary().worst; as worst) {\n        <span class=\"gauge__text\">{{ worst.label }} {{ worst.value }}</span>\n        @if (summary().others > 0) {\n            <span class=\"gauge__more\">+{{ summary().others }}</span>\n        }\n    } @else {\n        <span class=\"gauge__text\">{{ summary().measured }}</span>\n    }\n</button>\n\n<div\n    popover\n    id=\"prism-head-gauge\"\n    class=\"gauge-card\"\n    role=\"dialog\"\n    aria-label=\"Component metrics\">\n    @for (m of metrics(); track m.id) {\n        <prism-stat\n            [label]=\"m.label\"\n            [value]=\"m.value\"\n            [variant]=\"m.variant\" />\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.gauge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.gauge:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more {\n    opacity: 0.6;\n}\n\n/* The quiet state is green now, not grey: the gauge says \"these values\n   were measured and all of them are fine\", which is a result, not an\n   absence. A metric with no data at all stays grey in the readout rows. */\n.gauge--ok {\n    color: var(--prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn {\n    color: var(--prism-mark-attention);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger {\n    color: var(--prism-mark-critical);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok .gauge__dot,\n.gauge--warn .gauge__dot,\n.gauge--danger .gauge__dot {\n    opacity: 1;\n}\n\n.gauge-card {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else \u2014 see the note in\n   prism-template-popover.component.ts. An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the readout open. */\n.gauge-card:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n"] }]
+        args: [{ selector: 'prism-head-gauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismStatComponent], template: "<button\n    class=\"gauge\"\n    type=\"button\"\n    [class.gauge--ok]=\"summary().variant === 'ok'\"\n    [class.gauge--warn]=\"summary().variant === 'warn'\"\n    [class.gauge--danger]=\"summary().variant === 'danger'\"\n    popovertarget=\"prism-head-gauge\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.title]=\"ariaLabel()\">\n    <span\n        class=\"gauge__dot\"\n        aria-hidden=\"true\"></span>\n    @if (summary().worst; as worst) {\n        <span class=\"gauge__text\">{{ worst.label }} {{ worst.value }}</span>\n        @if (summary().others > 0) {\n            <span class=\"gauge__more\">+{{ summary().others }}</span>\n        }\n    } @else {\n        <span class=\"gauge__text\">{{ summary().measured }}</span>\n    }\n</button>\n\n<div\n    popover\n    id=\"prism-head-gauge\"\n    class=\"gauge-card\"\n    role=\"dialog\"\n    aria-label=\"Component metrics\">\n    @for (m of metrics(); track m.id) {\n        <prism-stat\n            [label]=\"m.label\"\n            [value]=\"m.value\"\n            [variant]=\"m.variant\" />\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.gauge {\n    display: inline-flex;\n    gap: var(--sp-2);\n    align-items: center;\n    height: 20px;\n    padding: 0 var(--sp-3);\n    anchor-name: --prism-head-gauge;\n    font-family: var(--font-mono);\n    font-size: var(--fs-xs);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n\n.gauge:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.gauge__dot {\n    width: 5px;\n    height: 5px;\n    background: currentcolor;\n    border-radius: 50%;\n    opacity: 0.5;\n}\n\n.gauge__more {\n    opacity: 0.6;\n}\n\n/* The quiet state is green now, not grey: the gauge says \"these values\n   were measured and all of them are fine\", which is a result, not an\n   absence. A metric with no data at all stays grey in the readout rows. */\n.gauge--ok {\n    color: var(--prism-mark-nominal);\n    border-color: color-mix(in srgb, var(--prism-mark-nominal) 40%, transparent);\n}\n\n.gauge--warn {\n    color: var(--prism-mark-attention);\n    border-color: color-mix(in srgb, var(--prism-mark-attention) 40%, transparent);\n}\n\n.gauge--danger {\n    color: var(--prism-mark-critical);\n    border-color: color-mix(in srgb, var(--prism-mark-critical) 45%, transparent);\n}\n\n.gauge--ok .gauge__dot,\n.gauge--warn .gauge__dot,\n.gauge--danger .gauge__dot {\n    opacity: 1;\n}\n\n.gauge-card {\n    inset: auto;\n    gap: 1px;\n    min-width: 200px;\n    padding: var(--sp-2);\n    margin: 0;\n    position-area: block-end span-inline-start;\n    position-anchor: --prism-head-gauge;\n    position-try-fallbacks: flip-block, flip-inline;\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n/* display belongs on :popover-open and nowhere else (see the note in\n   prism-template-popover.component.ts). An author display on the base\n   rule outranks the UA's [popover]:not(:popover-open) { display: none }\n   and pins the readout open. */\n.gauge-card:popover-open {\n    display: flex;\n    flex-direction: column;\n}\n"] }]
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadGaugeComponent, { className: "PrismHeadGaugeComponent", filePath: "app/component-head/prism-head-gauge.component.ts", lineNumber: 26 }); })();

package/dist/app/component-head/prism-head-info.component.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 /**
  * Identity disclosure for the component head.
  *
- * Selector, description and tags all answer "what is this component" — a
+ * Selector, description and tags all answer "what is this component", a
  * question you read once on arrival and never again while building. Keeping
  * them permanently on screen cost a 128px band to say something that belongs
  * behind one glyph.

package/dist/app/component-head/prism-head-info.component.js

@@ -40,7 +40,7 @@ function PrismHeadInfoComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
 /**
  * Identity disclosure for the component head.
  *
- * Selector, description and tags all answer "what is this component" — a
+ * Selector, description and tags all answer "what is this component", a
  * question you read once on arrival and never again while building. Keeping
  * them permanently on screen cost a 128px band to say something that belongs
  * behind one glyph.
@@ -86,6 +86,6 @@ export class PrismHeadInfoComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeadInfoComponent, [{
         type: Component,
-        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<button\n    class=\"info-btn\"\n    type=\"button\"\n    popovertarget=\"prism-head-info\"\n    title=\"Component details\"\n    aria-label=\"Component details\">\n    <prism-icon\n        name=\"info\"\n        [size]=\"13\" />\n</button>\n\n<div\n    popover\n    id=\"prism-head-info\"\n    class=\"info-card\"\n    role=\"dialog\"\n    aria-label=\"Component details\">\n    <code class=\"info-card__selector\">&lt;{{ selector() }}&gt;</code>\n    @if (description()) {\n        <p class=\"info-card__desc\">{{ description() }}</p>\n    }\n    @if (variantCount() > 0) {\n        <p class=\"info-card__meta\"> {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }} </p>\n    }\n    @if (tags().length) {\n        <div class=\"info-card__tags\">\n            @for (tag of tags(); track tag) {\n                <span class=\"info-card__tag\">{{ tag }}</span>\n            }\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.info-btn {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.info-btn:hover {\n    color: var(--prism-text-2);\n}\n\n.info-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--sp-6));\n    padding: var(--sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--prism-text-2);\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-primary);\n    user-select: all;\n}\n\n.info-card__desc {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-lg);\n    line-height: 1.55;\n}\n\n/* A plain fact about the component, not a measurement \u2014 it sits here with\n   the selector and the tags rather than in the gauge, whose numbers all\n   answer \"did this pass its threshold\". A count cannot. */\n.info-card__meta {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n}\n\n.info-card__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-2);\n    margin-top: var(--sp-4);\n}\n\n.info-card__tag {\n    padding: 1px var(--sp-3);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n"] }]
+        args: [{ selector: 'prism-head-info', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: "<button\n    class=\"info-btn\"\n    type=\"button\"\n    popovertarget=\"prism-head-info\"\n    title=\"Component details\"\n    aria-label=\"Component details\">\n    <prism-icon\n        name=\"info\"\n        [size]=\"13\" />\n</button>\n\n<div\n    popover\n    id=\"prism-head-info\"\n    class=\"info-card\"\n    role=\"dialog\"\n    aria-label=\"Component details\">\n    <code class=\"info-card__selector\">&lt;{{ selector() }}&gt;</code>\n    @if (description()) {\n        <p class=\"info-card__desc\">{{ description() }}</p>\n    }\n    @if (variantCount() > 0) {\n        <p class=\"info-card__meta\"> {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }} </p>\n    }\n    @if (tags().length) {\n        <div class=\"info-card__tags\">\n            @for (tag of tags(); track tag) {\n                <span class=\"info-card__tag\">{{ tag }}</span>\n            }\n        </div>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.info-btn {\n    display: grid;\n    place-items: center;\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    anchor-name: --prism-head-info;\n    color: var(--prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--radius-xs);\n}\n\n.info-btn:hover {\n    color: var(--prism-text-2);\n}\n\n.info-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--sp-6));\n    padding: var(--sp-4);\n    margin: 0;\n    position-area: block-end span-inline-end;\n    position-anchor: --prism-head-info;\n    position-try-fallbacks: flip-block, flip-inline;\n    color: var(--prism-text-2);\n    background: var(--prism-bg-elevated);\n    border: 1px solid var(--prism-border-strong);\n    border-radius: var(--radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector {\n    display: block;\n    font-family: var(--font-mono);\n    font-size: var(--fs-md);\n    color: var(--prism-primary);\n    user-select: all;\n}\n\n.info-card__desc {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-lg);\n    line-height: 1.55;\n}\n\n/* A plain fact about the component, not a measurement. It sits here with\n   the selector and the tags rather than in the gauge, whose numbers all\n   answer \"did this pass its threshold\". A count cannot. */\n.info-card__meta {\n    margin: var(--sp-3) 0 0;\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n}\n\n.info-card__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sp-2);\n    margin-top: var(--sp-4);\n}\n\n.info-card__tag {\n    padding: 1px var(--sp-3);\n    font-size: var(--fs-xs);\n    color: var(--prism-text-muted);\n    border: 1px solid var(--prism-border);\n    border-radius: var(--radius-xs);\n}\n"] }]
     }], null, { selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], variantCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantCount", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismHeadInfoComponent, { className: "PrismHeadInfoComponent", filePath: "app/component-head/prism-head-info.component.ts", lineNumber: 25 }); })();

package/dist/app/component-head/prism-stat.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * One line of the gauge's readout: caption left, value right.
  *
  * Was a right-aligned tile in the old head. The pill it used to carry is gone
- * rather than restyled — it duplicated the caption directly beneath it.
+ * rather than restyled, because it duplicated the caption directly beneath it.
  */
 export declare class PrismStatComponent {
     readonly label: import("@angular/core").InputSignal<string>;

package/dist/app/component-head/prism-stat.component.js

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * One line of the gauge's readout: caption left, value right.
  *
  * Was a right-aligned tile in the old head. The pill it used to carry is gone
- * rather than restyled — it duplicated the caption directly beneath it.
+ * rather than restyled, because it duplicated the caption directly beneath it.
  */
 export class PrismStatComponent {
     label = input.required(/* @ts-ignore */
@@ -33,6 +33,6 @@ export class PrismStatComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
         type: Component,
-        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"stat\"\n    [class.stat--ok]=\"variant() === 'ok'\"\n    [class.stat--warn]=\"variant() === 'warn'\"\n    [class.stat--danger]=\"variant() === 'danger'\">\n    <span\n        class=\"stat__dot\"\n        aria-hidden=\"true\"></span>\n    <span class=\"stat__lbl\">{{ label() }}</span>\n    <span class=\"stat__val\">{{ value() }}</span>\n</div>\n", styles: [".stat {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    border-radius: var(--radius-xs);\n}\n\n.stat__dot {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl {\n    white-space: nowrap;\n}\n\n.stat__val {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text);\n}\n\n/* Four states, four treatments. \"ok\" earns the nominal green, and \"none\"\n   deliberately does not: a metric with no data has nothing to report, and\n   colouring it green would claim a clean result the tool never measured.\n   That is the one distinction worth keeping grey. */\n.stat--ok .stat__dot {\n    background: var(--prism-mark-nominal);\n}\n\n.stat--ok .stat__val {\n    color: var(--prism-mark-nominal);\n}\n\n.stat--warn .stat__dot {\n    background: var(--prism-mark-attention);\n}\n\n.stat--warn .stat__val {\n    color: var(--prism-mark-attention);\n}\n\n.stat--danger .stat__dot {\n    background: var(--prism-mark-critical);\n}\n\n.stat--danger .stat__val {\n    color: var(--prism-mark-critical);\n}\n"] }]
+        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"stat\"\n    [class.stat--ok]=\"variant() === 'ok'\"\n    [class.stat--warn]=\"variant() === 'warn'\"\n    [class.stat--danger]=\"variant() === 'danger'\">\n    <span\n        class=\"stat__dot\"\n        aria-hidden=\"true\"></span>\n    <span class=\"stat__lbl\">{{ label() }}</span>\n    <span class=\"stat__val\">{{ value() }}</span>\n</div>\n", styles: [".stat {\n    display: flex;\n    gap: var(--sp-3);\n    align-items: center;\n    padding: var(--sp-2) var(--sp-3);\n    font-size: var(--fs-md);\n    color: var(--prism-text-2);\n    border-radius: var(--radius-xs);\n}\n\n.stat__dot {\n    flex: none;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n}\n\n.stat__lbl {\n    white-space: nowrap;\n}\n\n.stat__val {\n    margin-left: auto;\n    font-family: var(--font-mono);\n    font-variant-numeric: tabular-nums;\n    color: var(--prism-text);\n}\n\n/* Four states, four treatments. \"ok\" gets the nominal green, and \"none\"\n   does not: a metric with no data has nothing to report, and\n   colouring it green would claim a clean result the tool never measured.\n   That is the one distinction worth keeping grey. */\n.stat--ok .stat__dot {\n    background: var(--prism-mark-nominal);\n}\n\n.stat--ok .stat__val {\n    color: var(--prism-mark-nominal);\n}\n\n.stat--warn .stat__dot {\n    background: var(--prism-mark-attention);\n}\n\n.stat--warn .stat__val {\n    color: var(--prism-mark-attention);\n}\n\n.stat--danger .stat__dot {\n    background: var(--prism-mark-critical);\n}\n\n.stat--danger .stat__val {\n    color: var(--prism-mark-critical);\n}\n"] }]
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 17 }); })();

package/dist/app/directives/prism-resizer.directive.d.ts

@@ -20,7 +20,7 @@ export declare class PrismResizerDirective {
     private static readonly STEP;
     protected onMouseDown(e: MouseEvent): void;
     /**
-     * Keyboard direction is deliberately independent of `scale`.
+     * Keyboard direction is independent of `scale`.
      *
      * `scale` inverts the *pointer* for a grip on the far edge of a centred box,
      * and carrying that inversion into the keyboard was wrong: two separators

package/dist/app/directives/prism-resizer.directive.js

@@ -28,7 +28,7 @@ export class PrismResizerDirective {
     onMouseDown(e) {
         // Primary button only. Without this a right-click arms the document-level
         // listeners below, the context menu takes the pointer so the matching
-        // mouseup never arrives, and the drag stays live afterwards — the value
+        // mouseup never arrives, and the drag stays live afterwards, so the value
         // then follows the cursor with no button held. `preventDefault` does not
         // suppress `contextmenu`, so the guard has to be here.
         if (e.button !== 0)
@@ -50,7 +50,7 @@ export class PrismResizerDirective {
         document.addEventListener('mouseup', onUp);
     }
     /**
-     * Keyboard direction is deliberately independent of `scale`.
+     * Keyboard direction is independent of `scale`.
      *
      * `scale` inverts the *pointer* for a grip on the far edge of a centred box,
      * and carrying that inversion into the keyboard was wrong: two separators

package/dist/app/directives/resize-value.d.ts

@@ -4,7 +4,7 @@
  * Not for tidiness: a directive whose inputs are `input()` signals has to be
  * rendered inside a host component to be exercised, and this package's specs
  * run under jsdom against SWC-compiled sources, where JIT cannot instantiate
- * one. Extracted, the maths is ordinary and testable — the same reason
+ * one. Extracted, the maths is ordinary and testable. It is the same reason
  * `known-inputs.ts` and `overlay-resolver.ts` sit beside their components.
  */
 /**
@@ -16,7 +16,7 @@
  * changes the width at both, and the stage's `transform: scale(var(--zoom))`
  * contributes the division, since a pointer moving `dx` across the *painted*
  * box has to change the CSS width by `2·dx / zoom` to keep the grip under the
- * cursor — the sign says which edge is being held.
+ * cursor. The sign says which edge is being held.
  */
 export declare function resizeValue(startValue: number, delta: number, scale: number, min: number, max: number): number;
 //# sourceMappingURL=resize-value.d.ts.map

package/dist/app/directives/resize-value.js

@@ -4,7 +4,7 @@
  * Not for tidiness: a directive whose inputs are `input()` signals has to be
  * rendered inside a host component to be exercised, and this package's specs
  * run under jsdom against SWC-compiled sources, where JIT cannot instantiate
- * one. Extracted, the maths is ordinary and testable — the same reason
+ * one. Extracted, the maths is ordinary and testable. It is the same reason
  * `known-inputs.ts` and `overlay-resolver.ts` sit beside their components.
  */
 /**
@@ -16,7 +16,7 @@
  * changes the width at both, and the stage's `transform: scale(var(--zoom))`
  * contributes the division, since a pointer moving `dx` across the *painted*
  * box has to change the CSS width by `2·dx / zoom` to keep the grip under the
- * cursor — the sign says which edge is being held.
+ * cursor. The sign says which edge is being held.
  */
 export function resizeValue(startValue, delta, scale, min, max) {
     return Math.max(min, Math.min(max, startValue + delta * scale));

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA2D1H,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAM/G;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,iBAAiB,CAsCnF"}
+{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAuD1H,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAM/G;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,GAAG,iBAAiB,CAsCnF"}

package/dist/app/discovery-manifest.js

@@ -1,18 +1,14 @@
 import { resolveVariantBg } from '../shared/variant-bg.js';
 /**
  * External tooling reads `__PRISM_MANIFEST__` through a structured-clone bridge
- * (`page.evaluate()` in Playwright, `postMessage`, devtools). `ShowcaseConfig.meta`
- * is declared as an open `Record<string, unknown>`, so a consumer is free to put
- * a component class, a function or a cyclic object in there — any of which makes
- * that bridge throw or silently drop the whole payload.
+ * (Playwright's `page.evaluate()`, `postMessage`, devtools). `ShowcaseConfig.meta`
+ * is an open `Record<string, unknown>`, and a class, function or cyclic object
+ * in it makes that bridge throw or drop the whole payload.
  *
- * Everything crossing into the global is therefore reduced to plain JSON-safe
- * values: primitives, arrays, and objects with a plain prototype. Class
- * instances (Angular types included), functions, symbols, Dates, Maps and DOM
- * nodes are dropped rather than half-serialised, and cycles are broken.
- *
- * Array elements become `null` when they cannot be represented, matching
- * `JSON.stringify` so indices stay stable.
+ * So only JSON-safe values cross: primitives, arrays and plain-prototype
+ * objects. Class instances, functions, symbols, Dates, Maps and DOM nodes are
+ * dropped and cycles are broken. Unrepresentable array elements become `null`,
+ * as in `JSON.stringify`, so indices stay stable.
  */
 function toSerializable(value, seen) {
     if (value === null)
@@ -59,9 +55,9 @@ export function serializableMeta(meta) {
     return serialized;
 }
 /**
- * Builds the discovery view of the manifest — what `__PRISM_MANIFEST__` exposes.
+ * Builds the discovery view of the manifest, i.e. what `__PRISM_MANIFEST__` exposes.
  *
- * It is deliberately not the runtime manifest: no Angular class references, no
+ * It is not the runtime manifest: no Angular class references, no
  * providers, no scanned input/output metadata. It carries what an external tool
  * needs to enumerate and address variants, plus the `@Showcase` metadata that
  * lets a tool decide how to treat one.
@@ -73,8 +69,8 @@ export function buildDiscoveryManifest(manifest) {
             // An empty `variants` array is not "no variants": the renderer still
             // instantiates the component with its declared defaults at index 0 and
             // marks it `data-prism-rendered="<class>:0"`. Reporting zero variants
-            // here would let a runner walk past a component the app happily renders
-            // — the quiet coverage loss the `excluded` status exists to prevent.
+            // here would let a runner walk past a component the app happily renders.
+            // That's the quiet coverage loss the `excluded` status exists to prevent.
             const declared = showcaseConfig.variants ?? [];
             const variants = declared.length
                 ? declared.map((variant, index) => {

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

@@ -109,7 +109,7 @@ export class PrismHeaderComponent {
         }
     }
     onSearchFocus() {
-        // Placeholder — will be wired to command palette later
+        // Placeholder, will be wired to the command palette later
     }
     static ɵfac = function PrismHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismHeaderComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeaderComponent, selectors: [["prism-header"]], hostBindings: function PrismHeaderComponent_HostBindings(rf, ctx) { if (rf & 1) {

package/dist/app/icons/icon-registry.d.ts

@@ -6,10 +6,10 @@
  * `prism-icon.component.ts` so a plugin author can resolve the name the docs
  * point them to (`NavigationDecorationDefinition.icon`, `PanelDefinition.icon`)
  * without pulling an `@Component` class into a module graph the builder
- * evaluates in Node.js — the same reason plugin panels are lazy-loaded.
+ * evaluates in Node.js. Plugin panels are lazy-loaded for the same reason.
  */
 declare const ICONS: Record<string, string>;
 export { ICONS };
-/** Every name the registry can draw — what a panel's `icon` has to pick from. */
+/** Every name the registry can draw. A panel's `icon` has to pick from these. */
 export declare const ICON_NAMES: readonly string[];
 //# sourceMappingURL=icon-registry.d.ts.map

package/dist/app/icons/icon-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/app/icons/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoCjC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC"}
+{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/app/icons/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqCjC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAAuB,CAAC"}

package/dist/app/icons/icon-registry.js

@@ -6,7 +6,7 @@
  * `prism-icon.component.ts` so a plugin author can resolve the name the docs
  * point them to (`NavigationDecorationDefinition.icon`, `PanelDefinition.icon`)
  * without pulling an `@Component` class into a module graph the builder
- * evaluates in Node.js — the same reason plugin panels are lazy-loaded.
+ * evaluates in Node.js. Plugin panels are lazy-loaded for the same reason.
  */
 const ICONS = {
     search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
@@ -31,6 +31,7 @@ const ICONS = {
     move: '<path d="M12 2v20M2 12h20m-16-4-4 4 4 4m12-8 4 4-4 4M8 8l-4 4 4 4"/>',
     crosshair: '<circle cx="12" cy="12" r="10"/><path d="M22 12h-4M6 12H2m10-6V2m0 20v-4"/>',
     'ruler-dimension': '<path d="M4 4v16M20 4v16M8 12h8m-2-2 2 2-2 2m-4-4-2 2 2 2"/>',
+    ruler: '<path d="M3 9.5 9.5 3a1.5 1.5 0 0 1 2.1 0l9.4 9.4a1.5 1.5 0 0 1 0 2.1L14.5 21a1.5 1.5 0 0 1-2.1 0L3 11.6a1.5 1.5 0 0 1 0-2.1Z"/><path d="m7 9 2 2m2-6 2 2m2 2 2 2m-8 4 2 2"/>',
     copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
     'maximize-2': '<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"/>',
     eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
@@ -41,5 +42,5 @@ const ICONS = {
     'circle-dashed': '<path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0"/><path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7"/><path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8"/><path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69"/><path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0"/><path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7"/><path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8"/><path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69"/>'
 };
 export { ICONS };
-/** Every name the registry can draw — what a panel's `icon` has to pick from. */
+/** Every name the registry can draw. A panel's `icon` has to pick from these. */
 export const ICON_NAMES = Object.keys(ICONS);

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

@@ -8,8 +8,8 @@ export { ICON_NAMES };
  * invisible: the `<svg>` is still built at the right size, so a missing entry
  * renders as a correctly-spaced blank and reads like a CSS bug. Plugins declare
  * `icon` as a free-form string and are compiled separately from this registry,
- * so nothing else catches the typo — the visual regression panel shipped with a
- * blank tab icon exactly this way.
+ * so no other check catches the typo. The visual regression panel once shipped
+ * with a blank tab icon this way.
  *
  * Warned once per name: an icon on a panel tab re-renders constantly.
  */

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input }
 import { ICON_NAMES, ICONS } from './icon-registry.js';
 import * as i0 from "@angular/core";
 // Re-exported for existing consumers of this module. The registry itself
-// lives in `icon-registry.js` — a dependency-free module — so a plugin barrel
+// lives in `icon-registry.js`, a dependency-free module, so a plugin barrel
 // can re-export `ICON_NAMES` without dragging this `@Component` class (and
 // `@angular/core`) into a module graph the builder evaluates in Node.js.
 export { ICON_NAMES };
@@ -15,8 +15,8 @@ const warnedIcons = new Set();
  * invisible: the `<svg>` is still built at the right size, so a missing entry
  * renders as a correctly-spaced blank and reads like a CSS bug. Plugins declare
  * `icon` as a free-form string and are compiled separately from this registry,
- * so nothing else catches the typo — the visual regression panel shipped with a
- * blank tab icon exactly this way.
+ * so no other check catches the typo. The visual regression panel once shipped
+ * with a blank tab icon this way.
  *
  * Warned once per name: an icon on a panel tab re-renders constantly.
  */
@@ -24,7 +24,7 @@ export function resolveIcon(name) {
     const content = ICONS[name];
     if (content === undefined && !warnedIcons.has(name)) {
         warnedIcons.add(name);
-        console.warn(`[ng-prism] Unknown icon "${name}" — rendering an empty glyph. Available: ${ICON_NAMES.join(', ')}.`);
+        console.warn(`[ng-prism] Unknown icon "${name}", rendering an empty glyph. Available: ${ICON_NAMES.join(', ')}.`);
     }
     return content;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC7H,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,KAAK,aAAa,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAyB1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC7H,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,KAAK,aAAa,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAkB1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/app/index.js

@@ -23,28 +23,21 @@ export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.
 export { providePrism } from './provide-prism.js';
 // HMR helper
 export { enablePrismHmr } from './hmr.js';
-// Shared presentational components for plugin contributions. These live on
-// the main entry rather than `plugin/index.ts` because the builder evaluates
-// plugin config — and everything it imports — in Node.js, and that barrel
-// draws an explicit line at decorated declarations.
+// Shared presentational components for plugin contributions. They live on the
+// main entry, not `plugin/index.ts`, because the builder evaluates plugin
+// config in Node.js and that barrel excludes decorated declarations.
 //
-// This barrel draws no such line, and the badges do cross into Node. The
-// `loadComponent` indirection keeps plugin *panels* out of the builder's
-// module graph, but `@ng-prism/plugin-coverage` and
-// `@ng-prism/plugin-visual-regression` also re-export their header badge
-// components *statically* from their Node entry (`exports["."].import`), and
-// those components import `PrismMetricBadgeComponent` from here. So loading a
-// plugin config in `builder/config-loader` pulls this whole file — shell
-// component included — into Node. It evaluates cleanly only because the
-// config loader imports `@angular/compiler` before anything else.
+// They still reach Node: `@ng-prism/plugin-coverage` and
+// `@ng-prism/plugin-visual-regression` re-export their header badges statically
+// from their Node entry, and those import `PrismMetricBadgeComponent` from here.
+// Loading a plugin config in `builder/config-loader` therefore pulls this whole
+// file, shell included, into Node. That only works because the config loader
+// imports `@angular/compiler` first.
 //
-// Moving those two re-exports to the packages' `.browser.ts` entries does not
-// fix it: `package.json` maps "types" to the single `index.d.ts` generated
-// from the Node entry under every condition, so a symbol dropped from that
-// entry disappears from the public type surface while still shipping in the
-// browser bundle — the mismatch `plugin-visual-regression`'s
-// `entry-parity.spec.ts` exists to forbid. Making the badges Node-safe means
-// giving them an import that is not this barrel, which is a public API
-// decision, not a cleanup.
+// Moving those re-exports to the `.browser.ts` entries does not help: "types"
+// maps to the one `index.d.ts` built from the Node entry, so the symbols would
+// vanish from the public types while still shipping (which
+// `entry-parity.spec.ts` forbids). A Node-safe import path for the badges is a
+// public API decision.
 export { PrismMetricBadgeComponent } from './shared/prism-metric-badge.component.js';
 export { PrismIconComponent } from './icons/prism-icon.component.js';

package/dist/app/overview/overview-visibility.d.ts

@@ -3,7 +3,7 @@ import type { RuntimeComponent } from '../../plugin/plugin.types.js';
  * Whether the Overview tab is offered for this component.
  *
  * Two conditions, and the second is a correctness argument rather than taste.
- * A `renderPage` component does not render itself — it renders a registered
+ * A `renderPage` component does not render itself. It renders a registered
  * `ComponentPage`, and that page reads its values from the *global*
  * `PrismRendererService`. n cells side by side would all show the same state,
  * so an Overview there would be demonstrably wrong, not merely unhelpful.

package/dist/app/overview/overview-visibility.js

@@ -2,7 +2,7 @@
  * Whether the Overview tab is offered for this component.
  *
  * Two conditions, and the second is a correctness argument rather than taste.
- * A `renderPage` component does not render itself — it renders a registered
+ * A `renderPage` component does not render itself. It renders a registered
  * `ComponentPage`, and that page reads its values from the *global*
  * `PrismRendererService`. n cells side by side would all show the same state,
  * so an Overview there would be demonstrably wrong, not merely unhelpful.

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

@@ -4,11 +4,11 @@ import * as i0 from "@angular/core";
  * 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 declare class PrismOverviewCellComponent {

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

@@ -1 +1 @@
-{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAOrE;;;;;;;;;;GAUG;AACH,qBAYa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAKtB;;IAoBH,OAAO,CAAC,KAAK;yCAlDJ,0BAA0B;2CAA1B,0BAA0B;CA0FtC"}
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAOrE;;;;;;;;;;GAUG;AACH,qBAYa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAE1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,0CAKtB;;IAmBH,OAAO,CAAC,KAAK;yCAjDJ,0BAA0B;2CAA1B,0BAA0B;CAyFtC"}