@ng-prism/core 22.5.0 → 22.7.0-beta.0

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

@@ -1,17 +1,31 @@
 import { computed, inject, Injectable, signal } from '@angular/core';
+import { itemShowcaseConfig } from './navigation-item.js';
 import { PrismManifestService } from './prism-manifest.service.js';
 import { PrismSearchService } from './prism-search.service.js';
 import * as i0 from "@angular/core";
 const DEFAULT_SECTION_ORDER = {
     Components: 0,
-    Directives: 10
+    Directives: 10,
+    Services: 20,
+    Pipes: 30
 };
-const SECTION_TIEBREAK = ['Components', 'Directives'];
+const SECTION_TIEBREAK = ['Components', 'Directives', 'Services', 'Pipes'];
 export function resolveSection(c) {
     if (c.showcaseConfig.section)
         return c.showcaseConfig.section;
     return c.componentMeta.isDirective ? 'Directives' : 'Components';
 }
+/** The section an item lists under: its own `section`, else the default for what it is. */
+function resolveItemSection(item) {
+    switch (item.kind) {
+        case 'component':
+            return resolveSection(item.data.meta);
+        case 'service':
+            return item.data.meta.showcaseConfig.section ?? 'Services';
+        case 'pipe':
+            return item.data.meta.showcaseConfig.section ?? 'Pipes';
+    }
+}
 function defaultSectionOrder(name) {
     return DEFAULT_SECTION_ORDER[name] ?? 100;
 }
@@ -40,6 +54,37 @@ export class PrismNavigationService {
         return relinked ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
+    activeService = computed(() => {
+        const item = this.activeItem();
+        if (item?.kind !== 'service')
+            return null;
+        const relinked = this.manifestService.services().find((s) => s.meta.className === item.data.meta.className);
+        return relinked ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeService" }] : /* istanbul ignore next */ []));
+    activePipe = computed(() => {
+        const item = this.activeItem();
+        if (item?.kind !== 'pipe')
+            return null;
+        const relinked = this.manifestService.pipes().find((p) => p.meta.className === item.data.meta.className);
+        return relinked ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePipe" }] : /* istanbul ignore next */ []));
+    /**
+     * What the active item is, for the panels that apply to one kind only.
+     * Built from the re-linked signals, so an item the manifest no longer has
+     * (and a page, which no panel targets) reports `null`.
+     */
+    activeTarget = computed(() => {
+        if (this.activeComponent())
+            return 'component';
+        if (this.activeService())
+            return 'service';
+        if (this.activePipe())
+            return 'pipe';
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTarget" }] : /* istanbul ignore next */ []));
     activePage = computed(() => {
         const item = this.activeItem();
         if (item?.kind !== 'page')
@@ -50,18 +95,23 @@ export class PrismNavigationService {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activePage" }] : /* istanbul ignore next */ []));
     sectionTree = computed(() => {
-        const comps = this.searchService.filteredComponents();
+        const items = [
+            ...this.searchService.filteredComponents().map((data) => ({ kind: 'component', data })),
+            ...this.searchService.filteredServices().map((data) => ({ kind: 'service', data })),
+            ...this.searchService.filteredPipes().map((data) => ({ kind: 'pipe', data }))
+        ];
         const sections = new Map();
         const sectionOrders = new Map();
-        for (const comp of comps) {
-            const section = resolveSection(comp.meta);
-            const category = comp.meta.showcaseConfig.category ?? 'Uncategorized';
+        for (const item of items) {
+            const config = item.data.meta.showcaseConfig;
+            const section = resolveItemSection(item);
+            const category = config.category ?? 'Uncategorized';
             const catMap = sections.get(section) ?? new Map();
-            const items = catMap.get(category) ?? [];
-            items.push({ kind: 'component', data: comp });
-            catMap.set(category, items);
+            const list = catMap.get(category) ?? [];
+            list.push(item);
+            catMap.set(category, list);
             sections.set(section, catMap);
-            const explicit = comp.meta.showcaseConfig.sectionOrder;
+            const explicit = config.sectionOrder;
             const current = sectionOrders.get(section);
             if (explicit !== undefined) {
                 sectionOrders.set(section, current === undefined ? explicit : Math.min(current, explicit));
@@ -71,21 +121,21 @@ export class PrismNavigationService {
         for (const [name, catMap] of sections.entries()) {
             const order = sectionOrders.get(name) ?? defaultSectionOrder(name);
             const categories = [];
-            for (const [catName, items] of catMap.entries()) {
-                items.sort((a, b) => {
-                    const oa = a.kind === 'component' ? (a.data.meta.showcaseConfig.componentOrder ?? Infinity) : Infinity;
-                    const ob = b.kind === 'component' ? (b.data.meta.showcaseConfig.componentOrder ?? Infinity) : Infinity;
+            for (const [catName, catItems] of catMap.entries()) {
+                catItems.sort((a, b) => {
+                    const oa = itemShowcaseConfig(a)?.componentOrder ?? Infinity;
+                    const ob = itemShowcaseConfig(b)?.componentOrder ?? Infinity;
                     if (oa !== ob)
                         return oa - ob;
-                    const la = a.kind === 'component' ? a.data.meta.showcaseConfig.title : '';
-                    const lb = b.kind === 'component' ? b.data.meta.showcaseConfig.title : '';
+                    const la = itemShowcaseConfig(a)?.title ?? '';
+                    const lb = itemShowcaseConfig(b)?.title ?? '';
                     return la.localeCompare(lb);
                 });
-                categories.push({ name: catName, items });
+                categories.push({ name: catName, items: catItems });
             }
             categories.sort((a, b) => {
-                const oa = Math.min(...a.items.map((i) => (i.kind === 'component' ? (i.data.meta.showcaseConfig.categoryOrder ?? Infinity) : Infinity)));
-                const ob = Math.min(...b.items.map((i) => (i.kind === 'component' ? (i.data.meta.showcaseConfig.categoryOrder ?? Infinity) : Infinity)));
+                const oa = Math.min(...a.items.map((i) => itemShowcaseConfig(i)?.categoryOrder ?? Infinity));
+                const ob = Math.min(...b.items.map((i) => itemShowcaseConfig(i)?.categoryOrder ?? Infinity));
                 if (oa !== ob)
                     return oa - ob;
                 return a.name.localeCompare(b.name);
@@ -104,6 +154,12 @@ export class PrismNavigationService {
     select(comp) {
         this.activeItem.set({ kind: 'component', data: comp });
     }
+    selectService(service) {
+        this.activeItem.set({ kind: 'service', data: service });
+    }
+    selectPipe(pipe) {
+        this.activeItem.set({ kind: 'pipe', data: pipe });
+    }
     selectPage(page) {
         this.activeItem.set({ kind: 'page', data: page });
     }
@@ -118,6 +174,16 @@ export class PrismNavigationService {
             this.activeItem.set({ kind: 'component', data: comps[0] });
             return;
         }
+        const services = this.searchService.filteredServices();
+        if (services.length > 0) {
+            this.activeItem.set({ kind: 'service', data: services[0] });
+            return;
+        }
+        const pipes = this.searchService.filteredPipes();
+        if (pipes.length > 0) {
+            this.activeItem.set({ kind: 'pipe', data: pipes[0] });
+            return;
+        }
         this.activeItem.set(null);
     }
     static ɵfac = function PrismNavigationService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismNavigationService)(); };

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

@@ -20,10 +20,14 @@ export declare class PrismPanelService {
      */
     readonly viewPanels: import("@angular/core").Signal<PanelDefinition[]>;
     /**
-     * The view panels the active component actually offers.
+     * The view panels the active page actually offers.
      *
-     * Empty when no component is active, which is how pages end up without view
-     * tabs: it falls out of the data instead of needing a case of its own.
+     * A service or a pipe gets the panels that apply to its kind, all of them:
+     * `isVisible` takes a component, so it has nothing to say about either. A
+     * component gets the panels that apply to components and pass their
+     * `isVisible`. Empty when none of the three is active, which is how pages end
+     * up without view tabs: it falls out of the data instead of needing a case of
+     * its own.
      */
     readonly visibleViewPanels: import("@angular/core").Signal<PanelDefinition[]>;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,mBAAmB,EAA8B,MAAM,eAAe,CAAC;AACrH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAKpE,qBACa,iBAAiB;IAC1B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAAsF;IAElH;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,oDAAwI;IAE3J;;;;;OAKG;IACH,QAAQ,CAAC,iBAAiB,oDAKvB;IAEH;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCAvC/C,iBAAiB;;CAqD7B"}
+{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,mBAAmB,EAA8B,MAAM,eAAe,CAAC;AACrH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAMpE,qBACa,iBAAiB;IAC1B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAAsF;IAElH;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,oDAAwI;IAE3J;;;;;;;;;OASG;IACH,QAAQ,CAAC,iBAAiB,oDAUvB;IAEH;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCAhD/C,iBAAiB;;CA8D7B"}

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

@@ -1,5 +1,6 @@
 import { computed, createEnvironmentInjector, EnvironmentInjector, inject, Injectable, signal } from '@angular/core';
 import { PRISM_BUILTIN_PANELS } from '../tokens/prism-tokens.js';
+import { panelTargets } from '../view-tab-bar/panel-inputs.js';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismPluginService } from './prism-plugin.service.js';
 import * as i0 from "@angular/core";
@@ -26,16 +27,24 @@ export class PrismPanelService {
     viewPanels = computed(() => [...this.builtinPanels.filter((p) => p.placement === 'view'), ...this.pluginService.viewPanels()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewPanels" }] : /* istanbul ignore next */ []));
     /**
-     * The view panels the active component actually offers.
+     * The view panels the active page actually offers.
      *
-     * Empty when no component is active, which is how pages end up without view
-     * tabs: it falls out of the data instead of needing a case of its own.
+     * A service or a pipe gets the panels that apply to its kind, all of them:
+     * `isVisible` takes a component, so it has nothing to say about either. A
+     * component gets the panels that apply to components and pass their
+     * `isVisible`. Empty when none of the three is active, which is how pages end
+     * up without view tabs: it falls out of the data instead of needing a case of
+     * its own.
      */
     visibleViewPanels = computed(() => {
+        const target = this.navigationService.activeTarget();
+        if (target === 'service' || target === 'pipe') {
+            return this.viewPanels().filter((p) => panelTargets(p).includes(target));
+        }
         const component = this.navigationService.activeComponent();
         if (!component)
             return [];
-        return this.viewPanels().filter((p) => !p.isVisible || p.isVisible(component));
+        return this.viewPanels().filter((p) => panelTargets(p).includes('component') && (!p.isVisible || p.isVisible(component)));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleViewPanels" }] : /* istanbul ignore next */ []));
     /**

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

@@ -1,24 +1,48 @@
+import type { ShowcaseState } from '../../decorator/showcase.types.js';
 import { type ForcedPseudoStates, type PseudoState } from '../../shared/pseudo-state.type.js';
 import { PseudoStateMarker } from '../pseudo/pseudo-state-marker.js';
+import type { StateFit } from '../pseudo/state-fit.js';
 import * as i0 from "@angular/core";
 /** Per state: forced on (`true`) or off (`false`) on top of what the variant declares. */
 export type PseudoStateOverride = Partial<Record<PseudoState, boolean>>;
+/** What the canvas forces, in the two layers the marker takes. */
+export interface PseudoLayers {
+    /** The variant's own states, with the user's toggles on top: forced as they are. */
+    base: ForcedPseudoStates | null;
+    /** The active state's pseudo: forced only where {@link PrismPseudoStateService.canvasFit} says it fits. `null` when no state applies, or the toggles switched off all of it. */
+    state: ForcedPseudoStates | null;
+}
 /**
- * `declared` with the user's toggles from the tools menu on top.
+ * The variant's and the active state's pseudo states with the user's toggles
+ * from the tools menu on top.
  *
- * Returns `declared` itself while nothing is toggled, so the renderer, which
- * waits for the exact states object it was given, is not sent a copy. A state
- * switched on from the menu applies to the whole component (`true`), the way a
- * pointer over it would. One the variant declares keeps its own target.
+ * Returns the two objects it was given while nothing is toggled, so the
+ * renderer, which waits for the exact objects it handed the marker, is not sent
+ * a copy. A state switched on from the menu applies to the whole component
+ * (`true`), the way a pointer over it would, and lands in `base`, which the fit
+ * rule does not touch. One the variant or the state declares keeps its own
+ * target in its own layer, except that a state which does not fit
+ * (`stateFits: false`) is not applied, so a class only it declares is forced on
+ * the whole component instead. The state layer itself is the same either way:
+ * the marker still gets it, to see when the state fits again. A state switched
+ * off leaves both layers. Once the
+ * toggles have switched off every class the active state declares, its layer is
+ * `null`: that is the user's doing, not a state that forces nothing. A state
+ * that declares nothing itself (a slot the scanner could not evaluate) stays an
+ * empty object, so the marker can report it.
  */
-export declare function withOverride(declared: ForcedPseudoStates | null, override: PseudoStateOverride): ForcedPseudoStates | null;
+export declare function splitLayers(variantPseudo: ForcedPseudoStates | null, statePseudo: ForcedPseudoStates | null, override: PseudoStateOverride, stateFits?: boolean): PseudoLayers;
 /**
- * The pseudo states the canvas forces on the active variant.
+ * The pseudo states the canvas forces on the active variant and the active
+ * component-level state.
  *
- * `declared` is `Variant.pseudo`. The tools menu can switch states on and off
- * on top of it; like the background override, that toggle is transient and
- * resets when the variant or the component changes. Capture mode ignores it:
- * it is session UI state and must not shape a baseline.
+ * `declared` is `Variant.pseudo`, `activeState` is the `ShowcaseState` picked
+ * in `PrismRendererService.activeStateIndex`. They are two layers
+ * ({@link PseudoLayers}) because only the state's is subject to the fit rule.
+ * The tools menu can switch single states on and off on top of both; like the
+ * background override, that toggle is transient and resets when the variant, the
+ * state or the component changes. Capture mode ignores it, but applies the
+ * state: session UI state must not shape a baseline, the addressed cell must.
  *
  * Also owns the document's {@link PseudoStyleSheets}, which every marker shares
  * so each stylesheet is rewritten once, whether the Playground canvas or an
@@ -29,15 +53,36 @@ export declare class PrismPseudoStateService {
     private readonly renderer;
     private readonly capture;
     private readonly stylesheets;
+    private readonly activeVariant;
     readonly declared: import("@angular/core").Signal<Partial<Record<PseudoState, import("../../shared/pseudo-state.type.js").PseudoTarget>> | null>;
+    /** The component-level state on the canvas, whether or not the active variant takes part in it. */
+    readonly activeState: import("@angular/core").Signal<ShowcaseState | null>;
+    /** `'states: false'` when the active variant opts out while a state is active, else `null`. */
+    readonly stateExclusion: import("@angular/core").Signal<string | null>;
+    /** What the active state forces: its pseudo, `null` when none is active or the variant opted out. */
+    private readonly statePseudo;
     private readonly _override;
     readonly override: import("@angular/core").Signal<Partial<Record<PseudoState, boolean>>>;
-    /** What the canvas forces: `declared`, with the user's toggles on top outside capture mode. */
-    readonly effective: import("@angular/core").Signal<Partial<Record<PseudoState, import("../../shared/pseudo-state.type.js").PseudoTarget>> | null>;
+    /**
+     * Whether the active state fits the rendered canvas. Written by the
+     * renderer from its marker, `null` while no state is applied.
+     */
+    readonly canvasFit: import("@angular/core").WritableSignal<StateFit | null>;
+    /** `canvasFit` before the first render counts as fitting; a computed so a changed reason alone does not rebuild `layers`. */
+    private readonly stateFits;
+    /** What the canvas forces: `declared` and the active state with the user's toggles on top, which capture mode leaves out. */
+    readonly layers: import("@angular/core").Signal<PseudoLayers>;
     constructor();
+    /** Whether `state` is forced on the canvas now: by the variant, or by the active state while it fits. */
     isForced(state: PseudoState): boolean;
+    /**
+     * Whether the active variant declares `state`, or the active state does
+     * while it fits. A state that does not fit is not applied, so what it
+     * declares is no longer a default the menu can switch off: switching it on
+     * forces it on the whole component.
+     */
     isDeclared(state: PseudoState): boolean;
-    /** Flips `state` against what is forced now. Flipping it back to what the variant declares drops the toggle. */
+    /** Flips `state` against what is forced now. Flipping it back to what the variant or state declares drops the toggle. */
     toggle(state: PseudoState): void;
     clearOverride(): void;
     /** A marker for one rendered component, sharing this app's rewritten stylesheets. */

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

@@ -1 +1 @@
-{"version":3,"file":"prism-pseudo-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-pseudo-state.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;;AAMrE,0FAA0F;AAC1F,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAExE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAE,QAAQ,EAAE,mBAAmB,GAAG,kBAAkB,GAAG,IAAI,CAY1H;AAED;;;;;;;;;;;GAWG;AACH,qBACa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IACvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2C;IAEvE,QAAQ,CAAC,QAAQ,gIAKd;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmC;IAC7D,QAAQ,CAAC,QAAQ,wEAA+B;IAEhD,+FAA+F;IAC/F,QAAQ,CAAC,SAAS,gIAA0I;;IAU5J,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIrC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIvC,gHAAgH;IAChH,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAYhC,aAAa,IAAI,IAAI;IAIrB,qFAAqF;IACrF,YAAY,IAAI,iBAAiB;yCArDxB,uBAAuB;;CAwDnC"}
+{"version":3,"file":"prism-pseudo-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-pseudo-state.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAW,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AAKvD,0FAA0F;AAC1F,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAExE,kEAAkE;AAClE,MAAM,WAAW,YAAY;IACzB,oFAAoF;IACpF,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAChC,gLAAgL;IAChL,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CACvB,aAAa,EAAE,kBAAkB,GAAG,IAAI,EACxC,WAAW,EAAE,kBAAkB,GAAG,IAAI,EACtC,QAAQ,EAAE,mBAAmB,EAC7B,SAAS,UAAO,GACjB,YAAY,CAqBd;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBACa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IACvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2C;IAEvE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAI3B;IAEH,QAAQ,CAAC,QAAQ,gIAAmF;IAEpG,mGAAmG;IACnG,QAAQ,CAAC,WAAW,uDAKjB;IAEH,+FAA+F;IAC/F,QAAQ,CAAC,cAAc,gDAA0H;IAEjJ,qGAAqG;IACrG,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6H;IAEzJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmC;IAC7D,QAAQ,CAAC,QAAQ,wEAA+B;IAEhD;;;OAGG;IACH,QAAQ,CAAC,SAAS,0DAAiC;IAEnD,6HAA6H;IAC7H,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoD;IAE9E,6HAA6H;IAC7H,QAAQ,CAAC,MAAM,+CAGZ;;IAWH,yGAAyG;IACzG,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAMrC;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIvC,yHAAyH;IACzH,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAYhC,aAAa,IAAI,IAAI;IAIrB,qFAAqF;IACrF,YAAY,IAAI,iBAAiB;yCA1FxB,uBAAuB;;CA6FnC"}

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

@@ -8,32 +8,56 @@ import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismRendererService } from './prism-renderer.service.js';
 import * as i0 from "@angular/core";
 /**
- * `declared` with the user's toggles from the tools menu on top.
+ * The variant's and the active state's pseudo states with the user's toggles
+ * from the tools menu on top.
  *
- * Returns `declared` itself while nothing is toggled, so the renderer, which
- * waits for the exact states object it was given, is not sent a copy. A state
- * switched on from the menu applies to the whole component (`true`), the way a
- * pointer over it would. One the variant declares keeps its own target.
+ * Returns the two objects it was given while nothing is toggled, so the
+ * renderer, which waits for the exact objects it handed the marker, is not sent
+ * a copy. A state switched on from the menu applies to the whole component
+ * (`true`), the way a pointer over it would, and lands in `base`, which the fit
+ * rule does not touch. One the variant or the state declares keeps its own
+ * target in its own layer, except that a state which does not fit
+ * (`stateFits: false`) is not applied, so a class only it declares is forced on
+ * the whole component instead. The state layer itself is the same either way:
+ * the marker still gets it, to see when the state fits again. A state switched
+ * off leaves both layers. Once the
+ * toggles have switched off every class the active state declares, its layer is
+ * `null`: that is the user's doing, not a state that forces nothing. A state
+ * that declares nothing itself (a slot the scanner could not evaluate) stays an
+ * empty object, so the marker can report it.
  */
-export function withOverride(declared, override) {
+export function splitLayers(variantPseudo, statePseudo, override, stateFits = true) {
     if (Object.keys(override).length === 0)
-        return declared;
-    const states = {};
-    for (const state of PSEUDO_STATES) {
-        const forced = override[state];
-        const target = forced === undefined ? declared?.[state] : forced ? (declared?.[state] ?? true) : undefined;
-        if (target !== undefined)
-            states[state] = target;
+        return { base: variantPseudo, state: statePseudo };
+    const base = {};
+    const state = {};
+    for (const name of PSEUDO_STATES) {
+        const forced = override[name];
+        if (forced === false)
+            continue;
+        const fromVariant = variantPseudo?.[name];
+        const fromState = statePseudo?.[name];
+        if (fromVariant !== undefined)
+            base[name] = fromVariant;
+        if (fromState !== undefined)
+            state[name] = fromState;
+        if (forced && fromVariant === undefined && (fromState === undefined || !stateFits))
+            base[name] = true;
     }
-    return Object.keys(states).length > 0 ? states : null;
+    const switchedOff = Object.keys(state).length === 0 && Object.keys(statePseudo ?? {}).length > 0;
+    return { base: Object.keys(base).length > 0 ? base : null, state: statePseudo && !switchedOff ? state : null };
 }
 /**
- * The pseudo states the canvas forces on the active variant.
+ * The pseudo states the canvas forces on the active variant and the active
+ * component-level state.
  *
- * `declared` is `Variant.pseudo`. The tools menu can switch states on and off
- * on top of it; like the background override, that toggle is transient and
- * resets when the variant or the component changes. Capture mode ignores it:
- * it is session UI state and must not shape a baseline.
+ * `declared` is `Variant.pseudo`, `activeState` is the `ShowcaseState` picked
+ * in `PrismRendererService.activeStateIndex`. They are two layers
+ * ({@link PseudoLayers}) because only the state's is subject to the fit rule.
+ * The tools menu can switch single states on and off on top of both; like the
+ * background override, that toggle is transient and resets when the variant, the
+ * state or the component changes. Capture mode ignores it, but applies the
+ * state: session UI state must not shape a baseline, the addressed cell must.
  *
  * Also owns the document's {@link PseudoStyleSheets}, which every marker shares
  * so each stylesheet is rewritten once, whether the Playground canvas or an
@@ -44,33 +68,66 @@ export class PrismPseudoStateService {
     renderer = inject(PrismRendererService);
     capture = inject(PrismCaptureService);
     stylesheets = new PseudoStyleSheets(inject(DOCUMENT));
-    declared = computed(() => {
+    activeVariant = computed(() => {
         const comp = this.navigation.activeComponent();
-        if (!comp)
-            return null;
-        return comp.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()]?.pseudo ?? null;
+        return comp?.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()] ?? null;
     }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
+    declared = computed(() => this.activeVariant()?.pseudo ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "declared" }] : /* istanbul ignore next */ []));
+    /** The component-level state on the canvas, whether or not the active variant takes part in it. */
+    activeState = computed(() => {
+        const index = this.renderer.activeStateIndex();
+        if (index === null)
+            return null;
+        return this.navigation.activeComponent()?.meta.showcaseConfig.states?.[index] ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
+    /** `'states: false'` when the active variant opts out while a state is active, else `null`. */
+    stateExclusion = computed(() => (this.activeState() && this.activeVariant()?.states === false ? 'states: false' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateExclusion" }] : /* istanbul ignore next */ []));
+    /** What the active state forces: its pseudo, `null` when none is active or the variant opted out. */
+    statePseudo = computed(() => (this.stateExclusion() === null ? (this.activeState()?.pseudo ?? null) : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statePseudo" }] : /* istanbul ignore next */ []));
     _override = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_override" }] : /* istanbul ignore next */ []));
     override = this._override.asReadonly();
-    /** What the canvas forces: `declared`, with the user's toggles on top outside capture mode. */
-    effective = computed(() => (this.capture.active() ? this.declared() : withOverride(this.declared(), this._override())), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effective" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the active state fits the rendered canvas. Written by the
+     * renderer from its marker, `null` while no state is applied.
+     */
+    canvasFit = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasFit" }] : /* istanbul ignore next */ []));
+    /** `canvasFit` before the first render counts as fitting; a computed so a changed reason alone does not rebuild `layers`. */
+    stateFits = computed(() => this.canvasFit()?.fits !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateFits" }] : /* istanbul ignore next */ []));
+    /** What the canvas forces: `declared` and the active state with the user's toggles on top, which capture mode leaves out. */
+    layers = computed(() => splitLayers(this.declared(), this.statePseudo(), this.capture.active() ? {} : this._override(), this.stateFits()), { ...(ngDevMode ? { debugName: "layers" } : /* istanbul ignore next */ {}), 
+        // A reset to `{}` writes a fresh override and would hand out a new wrapper around the same two objects, which re-applies the marker for nothing.
+        equal: (a, b) => a.base === b.base && a.state === b.state });
     constructor() {
         effect(() => {
             this.navigation.activeComponent();
             this.renderer.activeVariantIndex();
+            this.renderer.activeStateIndex();
             this._override.set({});
         });
     }
+    /** Whether `state` is forced on the canvas now: by the variant, or by the active state while it fits. */
     isForced(state) {
-        return this.effective()?.[state] !== undefined;
+        const { base, state: layer } = this.layers();
+        return base?.[state] !== undefined || (!!this.canvasFit()?.fits && layer?.[state] !== undefined);
     }
+    /**
+     * Whether the active variant declares `state`, or the active state does
+     * while it fits. A state that does not fit is not applied, so what it
+     * declares is no longer a default the menu can switch off: switching it on
+     * forces it on the whole component.
+     */
     isDeclared(state) {
-        return this.declared()?.[state] !== undefined;
+        return this.declared()?.[state] !== undefined || (this.stateFits() && this.statePseudo()?.[state] !== undefined);
     }
-    /** Flips `state` against what is forced now. Flipping it back to what the variant declares drops the toggle. */
+    /** Flips `state` against what is forced now. Flipping it back to what the variant or state declares drops the toggle. */
     toggle(state) {
         const forced = !this.isForced(state);
         this._override.update((override) => {

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

@@ -10,14 +10,37 @@ export declare function computeVariantState(comp: RuntimeComponent, index: numbe
 export declare class PrismRendererService {
     private readonly navigationService;
     readonly activeVariantIndex: import("@angular/core").WritableSignal<number>;
+    /**
+     * Position in `ShowcaseConfig.states` of the component-level state on the
+     * canvas, `null` for none. Part of the addressed cell next to the variant:
+     * it survives a variant change and goes with the component.
+     */
+    readonly activeStateIndex: import("@angular/core").WritableSignal<number | null>;
     readonly inputValues: import("@angular/core").WritableSignal<Record<string, unknown>>;
     readonly activeContent: import("@angular/core").WritableSignal<string | Record<string, string> | undefined>;
     readonly renderedElement: import("@angular/core").WritableSignal<Element | null>;
+    /**
+     * The element of the showcased component or directive in what the canvas
+     * renders: in a composition the one the wrapper marks, else the rendered
+     * element itself. `null` while nothing is rendered. Since 22.7.0.
+     */
+    readonly subjectElement: import("@angular/core").Signal<Element | null>;
     readonly dirtyInputCount: import("@angular/core").Signal<number>;
+    /** The component the variant, the state and the inputs belong to, `null` before the first. */
     private _lastClassName;
+    constructor();
     resetForComponent(comp: RuntimeComponent): void;
+    /**
+     * Brings the variant, the state and the inputs in line with `comp`: a full
+     * reset when it is another component than the last one, else the variant
+     * and the state clamped to what it still declares and the inputs kept.
+     * Runs on every navigation and again when the renderer mounts, which then
+     * finds the component current and keeps what an Overview cell or a restore
+     * selected.
+     */
     reconcileForComponent(comp: RuntimeComponent): void;
     selectVariant(index: number): void;
+    selectState(index: number | null): void;
     updateInput(name: string, value: unknown): void;
     resetInputsToVariantDefaults(): void;
     private applyVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-renderer.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,wBAAgB,mBAAmB,CAC/B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAO,GAC9E,oBAAoB,CA6CtB;AAaD,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IAEpE,QAAQ,CAAC,kBAAkB,iDAAa;IACxC,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IAExD,QAAQ,CAAC,eAAe,yCAarB;IAEH,OAAO,CAAC,cAAc,CAAuB;IAE7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAM/C,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IA+CnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOlC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,4BAA4B,IAAI,IAAI;IAOpC,OAAO,CAAC,YAAY;yCAhGX,oBAAoB;;CAyGhC"}
+{"version":3,"file":"prism-renderer.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-renderer.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAKrE,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,wBAAgB,mBAAmB,CAC/B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAO,GAC9E,oBAAoB,CA+CtB;AA+BD,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IAEpE,QAAQ,CAAC,kBAAkB,iDAAa;IACxC;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,wDAA+B;IACxD,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IACxD;;;;OAIG;IACH,QAAQ,CAAC,cAAc,iDAOpB;IAEH,QAAQ,CAAC,eAAe,yCAarB;IAEH,8FAA8F;IAC9F,OAAO,CAAC,cAAc,CAAuB;;IAc7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAO/C;;;;;;;OAOG;IACH,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAqDnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOlC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIvC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,4BAA4B,IAAI,IAAI;IAOpC,OAAO,CAAC,YAAY;yCAnJX,oBAAoB;;CA4JhC"}