@ng-prism/core 22.4.1 → 22.6.0

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

@@ -10,14 +10,35 @@ function PrismHeadInfoComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.description());
 } }
+function PrismHeadInfoComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.variantCount(), " ", ctx_r0.variantCount() === 1 ? "variant" : "variants", " ");
+} }
+function PrismHeadInfoComponent_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " \u00B7 ");
+} }
+function PrismHeadInfoComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.stateCount(), " ", ctx_r0.stateCount() === 1 ? "state" : "states", " ");
+} }
 function PrismHeadInfoComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 5);
-    i0.ɵɵtext(1);
+    i0.ɵɵconditionalCreate(1, PrismHeadInfoComponent_Conditional_6_Conditional_1_Template, 1, 2);
+    i0.ɵɵconditionalCreate(2, PrismHeadInfoComponent_Conditional_6_Conditional_2_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, PrismHeadInfoComponent_Conditional_6_Conditional_3_Template, 1, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", ctx_r0.variantCount(), " ", ctx_r0.variantCount() === 1 ? "variant" : "variants", " ");
+    i0.ɵɵconditional(ctx_r0.variantCount() > 0 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.variantCount() > 0 && ctx_r0.stateCount() > 0 ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.stateCount() > 0 ? 3 : -1);
 } }
 function PrismHeadInfoComponent_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -59,8 +80,10 @@ export class PrismHeadInfoComponent {
     ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
     variantCount = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variantCount" }] : /* istanbul ignore next */ []));
+    stateCount = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateCount" }] : /* istanbul ignore next */ []));
     static ɵfac = function PrismHeadInfoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismHeadInfoComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadInfoComponent, selectors: [["prism-head-info"]], inputs: { selector: [1, "selector"], description: [1, "description"], tags: [1, "tags"], variantCount: [1, "variantCount"] }, decls: 8, vars: 5, consts: [["type", "button", "popovertarget", "prism-head-info", "title", "Component details", "aria-label", "Component details", 1, "info-btn"], ["name", "info", 3, "size"], ["popover", "", "id", "prism-head-info", "role", "dialog", "aria-label", "Component details", 1, "info-card"], [1, "info-card__selector"], [1, "info-card__desc"], [1, "info-card__meta"], [1, "info-card__tags"], [1, "info-card__tag"]], template: function PrismHeadInfoComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismHeadInfoComponent, selectors: [["prism-head-info"]], inputs: { selector: [1, "selector"], description: [1, "description"], tags: [1, "tags"], variantCount: [1, "variantCount"], stateCount: [1, "stateCount"] }, decls: 8, vars: 5, consts: [["type", "button", "popovertarget", "prism-head-info", "title", "Component details", "aria-label", "Component details", 1, "info-btn"], ["name", "info", 3, "size"], ["popover", "", "id", "prism-head-info", "role", "dialog", "aria-label", "Component details", 1, "info-card"], [1, "info-card__selector"], [1, "info-card__desc"], [1, "info-card__meta"], [1, "info-card__tags"], [1, "info-card__tag"]], template: function PrismHeadInfoComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵelement(1, "prism-icon", 1);
             i0.ɵɵelementEnd();
@@ -68,7 +91,7 @@ export class PrismHeadInfoComponent {
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(5, PrismHeadInfoComponent_Conditional_5_Template, 2, 1, "p", 4);
-            i0.ɵɵconditionalCreate(6, PrismHeadInfoComponent_Conditional_6_Template, 2, 2, "p", 5);
+            i0.ɵɵconditionalCreate(6, PrismHeadInfoComponent_Conditional_6_Template, 4, 3, "p", 5);
             i0.ɵɵconditionalCreate(7, PrismHeadInfoComponent_Conditional_7_Template, 3, 0, "div", 6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
@@ -79,13 +102,13 @@ export class PrismHeadInfoComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.description() ? 5 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.variantCount() > 0 ? 6 : -1);
+            i0.ɵɵconditional(ctx.variantCount() > 0 || ctx.stateCount() > 0 ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.tags().length ? 7 : -1);
         } }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.info-btn[_ngcontent-%COMP%] {\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(--%NS%prism-text-ghost);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n}\n\n.info-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.info-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    inset: auto;\n    width: 320px;\n    max-width: calc(100vw - var(--%NS%sp-6));\n    padding: var(--%NS%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(--%NS%prism-text-2);\n    background: var(--%NS%prism-bg-elevated);\n    border: 1px solid var(--%NS%prism-border-strong);\n    border-radius: var(--%NS%radius-md);\n    box-shadow: 0 8px 28px -10px rgb(0 0 0 / 45%);\n}\n\n.info-card__selector[_ngcontent-%COMP%] {\n    display: block;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-primary);\n    user-select: all;\n}\n\n.info-card__desc[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-lg);\n    line-height: 1.55;\n}\n\n\n\n\n.info-card__meta[_ngcontent-%COMP%] {\n    margin: var(--%NS%sp-3) 0 0;\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-muted);\n}\n\n.info-card__tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--%NS%sp-2);\n    margin-top: var(--%NS%sp-4);\n}\n\n.info-card__tag[_ngcontent-%COMP%] {\n    padding: 1px var(--%NS%sp-3);\n    font-size: var(--%NS%fs-xs);\n    color: var(--%NS%prism-text-muted);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: var(--%NS%radius-xs);\n}"] });
 }
 (() => { (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. 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 }] }] }); })();
+        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 || stateCount() > 0) {\n        <p class=\"info-card__meta\">\n            @if (variantCount() > 0) {\n                {{ variantCount() }} {{ variantCount() === 1 ? 'variant' : 'variants' }}\n            }\n            @if (variantCount() > 0 && stateCount() > 0) {\n                &middot;\n            }\n            @if (stateCount() > 0) {\n                {{ stateCount() }} {{ stateCount() === 1 ? 'state' : 'states' }}\n            }\n        </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 }] }], stateCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateCount", 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/directives/resize-value.d.ts

@@ -5,7 +5,7 @@
  * 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. It is the same reason
- * `known-inputs.ts` and `overlay-resolver.ts` sit beside their components.
+ * `input-bindings.ts` and `overlay-resolver.ts` sit beside their components.
  */
 /**
  * Where a drag lands.

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

@@ -5,7 +5,7 @@
  * 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. It is the same reason
- * `known-inputs.ts` and `overlay-resolver.ts` sit beside their components.
+ * `input-bindings.ts` and `overlay-resolver.ts` sit beside their components.
  */
 /**
  * Where a drag lands.

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

@@ -6,8 +6,8 @@ export declare function serializableMeta(meta: Record<string, unknown> | undefin
  *
  * 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.
+ * needs to enumerate and address variants and component-level states, plus the
+ * `@Showcase` metadata that lets a tool decide how to treat one.
  */
 export declare function buildDiscoveryManifest(manifest: RuntimeManifest): DiscoveryManifest;
 //# sourceMappingURL=discovery-manifest.d.ts.map

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

@@ -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;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"}
+{"version":3,"file":"discovery-manifest.d.ts","sourceRoot":"","sources":["../../src/app/discovery-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,iBAAiB,EAAoC,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyD1I,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,CAoDnF"}

package/dist/app/discovery-manifest.js

@@ -1,4 +1,5 @@
 import { resolveVariantBg } from '../shared/variant-bg.js';
+import { forcesAnyState } from './pseudo/pseudo-targets.js';
 /**
  * External tooling reads `__PRISM_MANIFEST__` through a structured-clone bridge
  * (Playwright's `page.evaluate()`, `postMessage`, devtools). `ShowcaseConfig.meta`
@@ -59,8 +60,8 @@ export function serializableMeta(meta) {
  *
  * 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.
+ * needs to enumerate and address variants and component-level states, plus the
+ * `@Showcase` metadata that lets a tool decide how to treat one.
  */
 export function buildDiscoveryManifest(manifest) {
     return {
@@ -75,8 +76,15 @@ export function buildDiscoveryManifest(manifest) {
             const variants = declared.length
                 ? declared.map((variant, index) => {
                     const meta = serializableMeta(variant.meta);
-                    const bg = resolveVariantBg(showcaseConfig, index);
-                    return meta ? { name: variant.name, index, bg, meta } : { name: variant.name, index, bg };
+                    const pseudo = forcesAnyState(variant.pseudo) ? serializableMeta(variant.pseudo) : undefined;
+                    const discovered = { name: variant.name, index, bg: resolveVariantBg(showcaseConfig, index) };
+                    if (meta)
+                        discovered.meta = meta;
+                    if (pseudo)
+                        discovered.pseudo = pseudo;
+                    if (variant.states === false)
+                        discovered.states = false;
+                    return discovered;
                 })
                 : [
                     {
@@ -85,12 +93,22 @@ export function buildDiscoveryManifest(manifest) {
                         bg: resolveVariantBg(showcaseConfig, 0)
                     }
                 ];
+            // Every slot is listed, the empty ones too: the scanner keeps a state it
+            // cannot use as `{ name, pseudo: {} }` so the position in the array stays
+            // the `?state=` value of the states behind it.
+            const states = (showcaseConfig.states ?? []).map((state, index) => ({
+                name: state.name,
+                index,
+                pseudo: (serializableMeta(state.pseudo) ?? {})
+            }));
             const meta = serializableMeta(showcaseConfig.meta);
             const discovered = {
                 className,
                 title: showcaseConfig.title,
                 variants
             };
+            if (states.length)
+                discovered.states = states;
             if (meta)
                 discovered.meta = meta;
             return discovered;

package/dist/app/overview/open-in-playground.d.ts

@@ -0,0 +1,11 @@
+import type { PrismPanelService } from '../services/prism-panel.service.js';
+import type { PrismRendererService } from '../services/prism-renderer.service.js';
+/**
+ * Shows one Overview cell's exact combination in the Playground: the variant,
+ * the component state (`null` for none), and the Playground view itself.
+ *
+ * The view switches last, so the Playground never paints the variant it showed
+ * before for a frame.
+ */
+export declare function openInPlayground(renderer: Pick<PrismRendererService, 'selectVariant' | 'selectState'>, panels: Pick<PrismPanelService, 'activeViewId'>, variantIndex: number, stateIndex: number | null): void;
+//# sourceMappingURL=open-in-playground.d.ts.map

package/dist/app/overview/open-in-playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-in-playground.d.ts","sourceRoot":"","sources":["../../../src/app/overview/open-in-playground.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAElF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC5B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,eAAe,GAAG,aAAa,CAAC,EACrE,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EAC/C,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GAAG,IAAI,GAC1B,IAAI,CAIN"}

package/dist/app/overview/open-in-playground.js

@@ -0,0 +1,12 @@
+/**
+ * Shows one Overview cell's exact combination in the Playground: the variant,
+ * the component state (`null` for none), and the Playground view itself.
+ *
+ * The view switches last, so the Playground never paints the variant it showed
+ * before for a frame.
+ */
+export function openInPlayground(renderer, panels, variantIndex, stateIndex) {
+    renderer.selectVariant(variantIndex);
+    renderer.selectState(stateIndex);
+    panels.activeViewId.set('renderer');
+}

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

@@ -0,0 +1,79 @@
+import type { ShowcaseConfig } from '../../decorator/showcase.types.js';
+import { type ForcedPseudoStates } from '../../shared/pseudo-state.type.js';
+import { type StateFit } from '../pseudo/state-fit.js';
+/** `state` is the position in `ShowcaseConfig.states`, `null` for the Default column. */
+export interface MatrixColumn {
+    state: number | null;
+    title: string;
+    signature: string;
+    /** Whether the column's state forces anything. `false` for Default and for a slot the scanner could not use. */
+    forcesState: boolean;
+}
+/** `variant` is the position in `ShowcaseConfig.variants`; the implicit Default row of a variant-less component is 0. */
+export interface MatrixRow {
+    variant: number;
+    title: string;
+    note: string | null;
+    optedOut: boolean;
+}
+export interface OverviewMatrix {
+    columns: MatrixColumn[];
+    rows: MatrixRow[];
+}
+/**
+ * The Overview as a matrix: a row per variant, a column for Default and one
+ * per component state.
+ *
+ * A component without variants still renders, as a variant of its own, so it
+ * gets one implicit `Default` row, like the canvas. A variant that opts out
+ * with `states: false` keeps its row but takes part in no state column.
+ */
+export declare function buildOverviewMatrix(config: ShowcaseConfig): OverviewMatrix;
+/**
+ * What a state forces, in a line: `hover + active → .btn`.
+ *
+ * The pseudo-classes come in {@link PSEUDO_STATES} order, grouped by the target
+ * they share. Classes with different targets make one group each, joined with
+ * `; ` (`hover → .pill; focus-visible → .pill__close`). A slot that names no
+ * target forces nothing, as the marker sees it.
+ */
+export declare function pseudoSignature(pseudo: ForcedPseudoStates): string;
+/** `fits 2 of 5`: the variants a state fits, of those it is combined with. */
+export declare function fitLabel(fits: number, eligible: number): string;
+/** Key of one cell's result in the map the matrix collects from the cells. */
+export declare function fitKey(variant: number, state: number): string;
+export interface ColumnFit {
+    /** Cells of the column whose state fits. */
+    fits: number;
+    /** Cells the column has: the rows that did not opt out. */
+    eligible: number;
+    /** Whether every one of those cells has answered. */
+    complete: boolean;
+}
+/** The fits of one state column, as far as the cells have answered. */
+export declare function columnFit(results: ReadonlyMap<string, StateFit>, matrix: OverviewMatrix, state: number): ColumnFit;
+/**
+ * The states whose column is complete and fits nowhere, by index: almost
+ * certainly a selector with a typo.
+ *
+ * A column that is still waiting for a cell, or whose cell failed to render and
+ * so never answers, is not complete: a state is only called misplaced once every
+ * cell has had its say. A state no variant is combined with has no cell to
+ * judge it, so it is not reported either. Nor is a state that forces nothing (a
+ * slot the scanner could not use): it fits nowhere by construction, has no
+ * selector to check, and the scanner has reported it already.
+ *
+ * Stateless: the caller keeps track of what it already reported.
+ */
+export declare function statesFittingNowhere(results: ReadonlyMap<string, StateFit>, matrix: OverviewMatrix): number[];
+/** One column header of the matrix. */
+export interface ColumnHeader {
+    column: MatrixColumn;
+    /** `fits x of y`, `null` for the Default column. */
+    fit: string | null;
+    /** The state is one of {@link statesFittingNowhere}. */
+    fitsNowhere: boolean;
+}
+/** The column headers with their fit counts, and whether a state fits no variant, as far as the cells have answered. */
+export declare function columnHeaders(results: ReadonlyMap<string, StateFit>, matrix: OverviewMatrix): ColumnHeader[];
+//# sourceMappingURL=overview-matrix.d.ts.map

package/dist/app/overview/overview-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overview-matrix.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-matrix.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,KAAK,kBAAkB,EAAmC,MAAM,mCAAmC,CAAC;AAE7G,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvE,yFAAyF;AACzF,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,gHAAgH;IAChH,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,yHAAyH;AACzH,MAAM,WAAW,SAAS;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,IAAI,EAAE,SAAS,EAAE,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,cAAc,GAAG,cAAc,CAsB1E;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAelE;AAED,8EAA8E;AAC9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,8EAA8E;AAC9E,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED,MAAM,WAAW,SAAS;IACtB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAKlH;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,EAAE,CAQ7G;AAED,uCAAuC;AACvC,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,oDAAoD;IACpD,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,wDAAwD;IACxD,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,wHAAwH;AACxH,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,cAAc,GAAG,YAAY,EAAE,CAU5G"}

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

@@ -0,0 +1,98 @@
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+import { forcesAnyState, hasTarget } from '../pseudo/pseudo-targets.js';
+import { describeTarget } from '../pseudo/state-fit.js';
+/**
+ * The Overview as a matrix: a row per variant, a column for Default and one
+ * per component state.
+ *
+ * A component without variants still renders, as a variant of its own, so it
+ * gets one implicit `Default` row, like the canvas. A variant that opts out
+ * with `states: false` keeps its row but takes part in no state column.
+ */
+export function buildOverviewMatrix(config) {
+    const columns = [
+        { state: null, title: 'Default', signature: 'no state', forcesState: false },
+        ...(config.states ?? []).map((state, index) => ({
+            state: index,
+            title: state.name,
+            signature: pseudoSignature(state.pseudo),
+            forcesState: forcesAnyState(state.pseudo)
+        }))
+    ];
+    const variants = config.variants ?? [];
+    const rows = variants.length === 0
+        ? [{ variant: 0, title: 'Default', note: null, optedOut: false }]
+        : variants.map((variant, index) => ({
+            variant: index,
+            title: variant.name,
+            note: variant.states === false ? 'states: false' : variant.bg ? `bg: ${variant.bg}` : null,
+            optedOut: variant.states === false
+        }));
+    return { columns, rows };
+}
+/**
+ * What a state forces, in a line: `hover + active → .btn`.
+ *
+ * The pseudo-classes come in {@link PSEUDO_STATES} order, grouped by the target
+ * they share. Classes with different targets make one group each, joined with
+ * `; ` (`hover → .pill; focus-visible → .pill__close`). A slot that names no
+ * target forces nothing, as the marker sees it.
+ */
+export function pseudoSignature(pseudo) {
+    const groups = new Map();
+    for (const state of PSEUDO_STATES) {
+        const target = pseudo[state];
+        if (target === undefined || !hasTarget(target))
+            continue;
+        const label = describeTarget(target);
+        groups.set(label, [...(groups.get(label) ?? []), state]);
+    }
+    if (groups.size === 0)
+        return 'forces no state';
+    return Array.from(groups, ([label, states]) => `${states.join(' + ')} → ${label}`).join('; ');
+}
+/** `fits 2 of 5`: the variants a state fits, of those it is combined with. */
+export function fitLabel(fits, eligible) {
+    return `fits ${fits} of ${eligible}`;
+}
+/** Key of one cell's result in the map the matrix collects from the cells. */
+export function fitKey(variant, state) {
+    return `${variant}:${state}`;
+}
+/** The fits of one state column, as far as the cells have answered. */
+export function columnFit(results, matrix, state) {
+    const rows = matrix.rows.filter((row) => !row.optedOut);
+    const answers = rows.map((row) => results.get(fitKey(row.variant, state))).filter((answer) => answer !== undefined);
+    return { fits: answers.filter((answer) => answer.fits).length, eligible: rows.length, complete: answers.length === rows.length };
+}
+/**
+ * The states whose column is complete and fits nowhere, by index: almost
+ * certainly a selector with a typo.
+ *
+ * A column that is still waiting for a cell, or whose cell failed to render and
+ * so never answers, is not complete: a state is only called misplaced once every
+ * cell has had its say. A state no variant is combined with has no cell to
+ * judge it, so it is not reported either. Nor is a state that forces nothing (a
+ * slot the scanner could not use): it fits nowhere by construction, has no
+ * selector to check, and the scanner has reported it already.
+ *
+ * Stateless: the caller keeps track of what it already reported.
+ */
+export function statesFittingNowhere(results, matrix) {
+    return matrix.columns.flatMap((column) => {
+        if (column.state === null || !column.forcesState)
+            return [];
+        const { fits, eligible, complete } = columnFit(results, matrix, column.state);
+        return eligible > 0 && complete && fits === 0 ? [column.state] : [];
+    });
+}
+/** The column headers with their fit counts, and whether a state fits no variant, as far as the cells have answered. */
+export function columnHeaders(results, matrix) {
+    const nowhere = new Set(statesFittingNowhere(results, matrix));
+    return matrix.columns.map((column) => {
+        if (column.state === null)
+            return { column, fit: null, fitsNowhere: false };
+        const { fits, eligible } = columnFit(results, matrix, column.state);
+        return { column, fit: fitLabel(fits, eligible), fitsNowhere: nowhere.has(column.state) };
+    });
+}

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

@@ -1,4 +1,11 @@
+import type { ShowcaseConfig } from '../../decorator/showcase.types.js';
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+/**
+ * How many cells the Overview would hold for this config: the matrix's rows
+ * times its columns, where a variant that opted out with `states: false` has
+ * one cell instead of a row of them.
+ */
+export declare function overviewCellCount(config: ShowcaseConfig): number;
 /**
  * Whether the Overview tab is offered for this component.
  *
@@ -8,8 +15,9 @@ import type { RuntimeComponent } from '../../plugin/plugin.types.js';
  * `PrismRendererService`. n cells side by side would all show the same state,
  * so an Overview there would be demonstrably wrong, not merely unhelpful.
  *
- * A single variant needs no contact sheet: the grid would be one cell, and the
- * Playground says the same thing better.
+ * A single cell needs no contact sheet: the Playground says the same thing
+ * better. A state counts as a cell, so one variant with one state already
+ * earns the Overview.
  */
 export declare function showsOverview(component: RuntimeComponent): boolean;
 //# sourceMappingURL=overview-visibility.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAKlE"}
+{"version":3,"file":"overview-visibility.d.ts","sourceRoot":"","sources":["../../../src/app/overview/overview-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAIhE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,gBAAgB,GAAG,OAAO,CAKlE"}

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

@@ -1,3 +1,13 @@
+import { buildOverviewMatrix } from './overview-matrix.js';
+/**
+ * How many cells the Overview would hold for this config: the matrix's rows
+ * times its columns, where a variant that opted out with `states: false` has
+ * one cell instead of a row of them.
+ */
+export function overviewCellCount(config) {
+    const { columns, rows } = buildOverviewMatrix(config);
+    return rows.reduce((cells, row) => cells + (row.optedOut ? 1 : columns.length), 0);
+}
 /**
  * Whether the Overview tab is offered for this component.
  *
@@ -7,12 +17,13 @@
  * `PrismRendererService`. n cells side by side would all show the same state,
  * so an Overview there would be demonstrably wrong, not merely unhelpful.
  *
- * A single variant needs no contact sheet: the grid would be one cell, and the
- * Playground says the same thing better.
+ * A single cell needs no contact sheet: the Playground says the same thing
+ * better. A state counts as a cell, so one variant with one state already
+ * earns the Overview.
  */
 export function showsOverview(component) {
     const config = component.meta.showcaseConfig;
     if (config.renderPage)
         return false;
-    return (config.variants?.length ?? 0) >= 2;
+    return overviewCellCount(config) >= 2;
 }

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

@@ -1,4 +1,5 @@
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { StateFit } from '../pseudo/state-fit.js';
 import * as i0 from "@angular/core";
 /**
  * One frame of the contact sheet: a stage painting the variant's declared
@@ -10,20 +11,46 @@ import * as i0 from "@angular/core";
  * 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
  * `docs/guide/external-tooling.md`), and this component never emits it.
+ *
+ * Forced pseudo states are the variant's own, applied by a marker of the
+ * cell's own, so a hovered cell never hovers its neighbour. The tools menu's
+ * state toggle does not reach here: like every other control, it belongs to
+ * the Playground.
+ *
+ * A cell can combine its variant with one of the component's `states` (the
+ * matrix does). When the marker finds that the state does not fit the rendered
+ * component, or the variant opted out with `states: false`, the cell shows the
+ * reason in place of the component. Every cell, with or without a state, opens
+ * its exact combination in the Playground on click, Enter or Space.
  */
 export declare class PrismOverviewCellComponent {
     readonly component: import("@angular/core").InputSignal<RuntimeComponent>;
     readonly index: import("@angular/core").InputSignal<number>;
+    /** Position of the component state in `ShowcaseConfig.states`, `null` for the variant alone. */
+    readonly state: import("@angular/core").InputSignal<number | null>;
+    /** `matrix` leaves the caption and the grid span to the matrix around the cell. */
+    readonly mode: import("@angular/core").InputSignal<"sheet" | "matrix">;
+    /** Whether the state fits the rendered variant. Only emitted while `state` is not `null`. */
+    readonly fitChange: import("@angular/core").OutputEmitterRef<StateFit>;
     private readonly injector;
     private readonly destroyRef;
+    private readonly renderer;
+    private readonly panels;
+    private readonly pseudoMarker;
     private readonly outlet;
     /** Never null: `resolveVariantBg` falls back to `DEFAULT_VARIANT_BG`. */
     protected readonly bg: import("@angular/core").Signal<import("../services/prism-canvas.service.js").CanvasBg>;
     protected readonly caption: import("@angular/core").Signal<string>;
-    protected readonly isWide: import("@angular/core").Signal<boolean>;
+    /** Why the state is not shown on this cell, `null` while the component is. */
+    protected readonly unfitReason: import("@angular/core").WritableSignal<string | null>;
+    protected readonly label: import("@angular/core").Signal<string>;
+    protected readonly stretches: import("@angular/core").Signal<boolean>;
     constructor();
+    protected open(): void;
+    protected onKeydown(event: KeyboardEvent): void;
     private mount;
+    private unfit;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismOverviewCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewCellComponent, "prism-overview-cell", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismOverviewCellComponent, "prism-overview-cell", never, { "component": { "alias": "component"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "fitChange": "fitChange"; }, never, never, true, never>;
 }
 //# sourceMappingURL=prism-overview-cell.component.d.ts.map

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;;IAmBH,OAAO,CAAC,KAAK;yCAjDJ,0BAA0B;2CAA1B,0BAA0B;CAyFtC"}
+{"version":3,"file":"prism-overview-cell.component.d.ts","sourceRoot":"","sources":["../../../src/app/overview/prism-overview-cell.component.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAIrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AAQvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAmBa,0BAA0B;IACnC,QAAQ,CAAC,SAAS,wDAAsC;IACxD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,gGAAgG;IAChG,QAAQ,CAAC,KAAK,qDAA8B;IAC5C,mFAAmF;IACnF,QAAQ,CAAC,IAAI,0DAAsC;IACnD,6FAA6F;IAC7F,QAAQ,CAAC,SAAS,qDAAsB;IAExC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAkD;IAC/E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IAEH,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,EAAE,yFAAwF;IAE7G,SAAS,CAAC,QAAQ,CAAC,OAAO,yCAUvB;IAEH,8EAA8E;IAC9E,SAAS,CAAC,QAAQ,CAAC,WAAW,wDAA+B;IAE7D,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAOrB;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,0CAKzB;;IAuBH,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAkB/C,OAAO,CAAC,KAAK;IAsEb,OAAO,CAAC,KAAK;yCAtKJ,0BAA0B;2CAA1B,0BAA0B;CA0KtC"}