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

package/dist/app/view-tab-bar/prism-view-panel-host.component.js

@@ -2,6 +2,7 @@ import { NgComponentOutlet } from '@angular/common';
 import { Component, computed, createEnvironmentInjector, effect, EnvironmentInjector, inject, signal } from '@angular/core';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
+import { activeViewPanel, panelInputsFor } from './panel-inputs.js';
 import * as i0 from "@angular/core";
 function PrismViewPanelHostComponent_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -19,15 +20,14 @@ export class PrismViewPanelHostComponent {
     allViewPanels = this.panelService.viewPanels;
     resolvedComponent = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedComponent" }] : /* istanbul ignore next */ []));
-    panelInputs = computed(() => ({
-        activeComponent: this.nav.activeComponent()
-    }), /* @ts-ignore */
+    activePanel = computed(() => activeViewPanel(this.allViewPanels(), this.panelService.activeViewId(), this.nav.activeTarget() ?? 'component'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanel" }] : /* istanbul ignore next */ []));
+    panelInputs = computed(() => panelInputsFor(this.activePanel(), this.nav.activeComponent(), this.nav.activeService(), this.nav.activePipe()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelInputs" }] : /* istanbul ignore next */ []));
     lazyCache = new Map();
     injectorCache = new Map();
     activeInjector = computed(() => {
-        const panelId = this.panelService.activeViewId();
-        const panel = this.allViewPanels().find((p) => p.id === panelId);
+        const panel = this.activePanel();
         if (!panel?.providers?.length)
             return this.envInjector;
         if (!this.injectorCache.has(panel.id)) {
@@ -38,7 +38,7 @@ export class PrismViewPanelHostComponent {
     ...(ngDevMode ? [{ debugName: "activeInjector" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
-            const panel = this.allViewPanels().find((p) => p.id === this.panelService.activeViewId()) ?? null;
+            const panel = this.activePanel();
             if (!panel) {
                 this.resolvedComponent.set(null);
                 return;
@@ -72,10 +72,10 @@ export class PrismViewPanelHostComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.resolvedComponent() ? 1 : -1);
-        } }, dependencies: [NgComponentOutlet], styles: [".prism-view-panel-host[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n    background: var(--%NS%prism-bg-elevated);\n}"] });
+        } }, dependencies: [NgComponentOutlet], styles: [".prism-view-panel-host[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n    background: var(--%NS%prism-bg-surface);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismViewPanelHostComponent, [{
         type: Component,
-        args: [{ selector: 'prism-view-panel-host', standalone: true, imports: [NgComponentOutlet], template: "<div class=\"prism-view-panel-host\">\n    @if (resolvedComponent()) {\n        <ng-container *ngComponentOutlet=\"resolvedComponent(); inputs: panelInputs(); injector: activeInjector()\" />\n    }\n</div>\n", styles: [".prism-view-panel-host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n    background: var(--prism-bg-elevated);\n}\n"] }]
+        args: [{ selector: 'prism-view-panel-host', standalone: true, imports: [NgComponentOutlet], template: "<div class=\"prism-view-panel-host\">\n    @if (resolvedComponent()) {\n        <ng-container *ngComponentOutlet=\"resolvedComponent(); inputs: panelInputs(); injector: activeInjector()\" />\n    }\n</div>\n", styles: [".prism-view-panel-host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n    background: var(--prism-bg-surface);\n}\n"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismViewPanelHostComponent, { className: "PrismViewPanelHostComponent", filePath: "app/view-tab-bar/prism-view-panel-host.component.ts", lineNumber: 13 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismViewPanelHostComponent, { className: "PrismViewPanelHostComponent", filePath: "app/view-tab-bar/prism-view-panel-host.component.ts", lineNumber: 14 }); })();

package/dist/app/view-tab-bar/prism-view-tab-bar.component.d.ts

@@ -1,8 +1,14 @@
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
+import { type PrismSegmentOption } from '../shared/prism-segmented.component.js';
 import * as i0 from "@angular/core";
+/** The view switch of the component head: Playground and every view panel (Overview, API, …). */
 export declare class PrismViewTabBarComponent {
     protected readonly panelService: PrismPanelService;
+    protected readonly navigationService: PrismNavigationService;
     protected readonly viewPanels: import("@angular/core").Signal<import("../../index.js").PanelDefinition[]>;
+    protected readonly options: import("@angular/core").Signal<PrismSegmentOption<string>[]>;
+    protected select(id: string | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismViewTabBarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismViewTabBarComponent, "prism-view-tab-bar", never, {}, {}, never, never, true, never>;
 }

package/dist/app/view-tab-bar/prism-view-tab-bar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-view-tab-bar.component.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/prism-view-tab-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBAOa,wBAAwB;IACjC,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,UAAU,6EAAuC;yCAH3D,wBAAwB;2CAAxB,wBAAwB;CAIpC"}
+{"version":3,"file":"prism-view-tab-bar.component.d.ts","sourceRoot":"","sources":["../../../src/app/view-tab-bar/prism-view-tab-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAA2B,KAAK,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;;AAE1G,iGAAiG;AACjG,qBAQa,wBAAwB;IACjC,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,SAAS,CAAC,QAAQ,CAAC,UAAU,6EAAuC;IAEpE,SAAS,CAAC,QAAQ,CAAC,OAAO,+DAGvB;IAEH,SAAS,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;yCAXhC,wBAAwB;2CAAxB,wBAAwB;CAcpC"}

package/dist/app/view-tab-bar/prism-view-tab-bar.component.js

@@ -1,40 +1,33 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismPanelService } from '../services/prism-panel.service.js';
+import { PrismSegmentedComponent } from '../shared/prism-segmented.component.js';
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item.id;
-function PrismViewTabBarComponent_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "button", 1);
-    i0.ɵɵdomListener("click", function PrismViewTabBarComponent_For_4_Template_button_click_0_listener() { const panel_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.panelService.activeViewId.set(panel_r2.id)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const panel_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("prism-view-tab-bar__tab--active", ctx_r2.panelService.activeViewId() === panel_r2.id);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", panel_r2.label, " ");
-} }
+/** The view switch of the component head: Playground and every view panel (Overview, API, …). */
 export class PrismViewTabBarComponent {
     panelService = inject(PrismPanelService);
+    navigationService = inject(PrismNavigationService);
     viewPanels = this.panelService.visibleViewPanels;
+    options = computed(() => [
+        ...(this.navigationService.activeTarget() === 'component' ? [{ value: 'renderer', label: 'Playground' }] : []),
+        ...this.viewPanels().map((panel) => ({ value: panel.id, label: panel.label }))
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    select(id) {
+        if (id !== null)
+            this.panelService.activeViewId.set(id);
+    }
     static ɵfac = function PrismViewTabBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismViewTabBarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismViewTabBarComponent, selectors: [["prism-view-tab-bar"]], decls: 5, vars: 2, consts: [[1, "prism-view-tab-bar"], [1, "prism-view-tab-bar__tab", 3, "click"], [1, "prism-view-tab-bar__tab", 3, "prism-view-tab-bar__tab--active"]], template: function PrismViewTabBarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0)(1, "button", 1);
-            i0.ɵɵdomListener("click", function PrismViewTabBarComponent_Template_button_click_1_listener() { return ctx.panelService.activeViewId.set("renderer"); });
-            i0.ɵɵtext(2, " Playground ");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵrepeaterCreate(3, PrismViewTabBarComponent_For_4_Template, 2, 3, "button", 2, _forTrack0);
-            i0.ɵɵdomElementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismViewTabBarComponent, selectors: [["prism-view-tab-bar"]], decls: 1, vars: 2, consts: [["ariaLabel", "View", 3, "valueChange", "options", "value"]], template: function PrismViewTabBarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "prism-segmented", 0);
+            i0.ɵɵlistener("valueChange", function PrismViewTabBarComponent_Template_prism_segmented_valueChange_0_listener($event) { return ctx.select($event); });
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("prism-view-tab-bar__tab--active", ctx.panelService.activeViewId() === "renderer");
-            i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.viewPanels());
-        } }, styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}\n\n.prism-view-tab-bar[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    padding: 2px;\n    background: var(--%NS%prism-input-bg);\n    border-radius: var(--%NS%radius-sm);\n}\n\n.prism-view-tab-bar__tab[_ngcontent-%COMP%] {\n    padding: 2px var(--%NS%sp-4);\n    font-family: var(--%NS%prism-font-sans);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--%NS%radius-xs);\n    transition: color var(--%NS%dur-fast) var(--%NS%ease-default);\n}\n\n.prism-view-tab-bar__tab[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-view-tab-bar__tab[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-view-tab-bar__tab--active[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n    background: var(--%NS%prism-bg-elevated);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 18%);\n}"] });
+            i0.ɵɵproperty("options", ctx.options())("value", ctx.panelService.activeViewId());
+        } }, dependencies: [PrismSegmentedComponent], styles: ["[_nghost-%COMP%] {\n    display: inline-flex;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismViewTabBarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-view-tab-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"prism-view-tab-bar\">\n    <button\n        class=\"prism-view-tab-bar__tab\"\n        [class.prism-view-tab-bar__tab--active]=\"panelService.activeViewId() === 'renderer'\"\n        (click)=\"panelService.activeViewId.set('renderer')\">\n        Playground\n    </button>\n    @for (panel of viewPanels(); track panel.id) {\n        <button\n            class=\"prism-view-tab-bar__tab\"\n            [class.prism-view-tab-bar__tab--active]=\"panelService.activeViewId() === panel.id\"\n            (click)=\"panelService.activeViewId.set(panel.id)\">\n            {{ panel.label }}\n        </button>\n    }\n</div>\n", styles: [":host {\n    display: inline-flex;\n}\n\n.prism-view-tab-bar {\n    display: inline-flex;\n    gap: 2px;\n    padding: 2px;\n    background: var(--prism-input-bg);\n    border-radius: var(--radius-sm);\n}\n\n.prism-view-tab-bar__tab {\n    padding: 2px var(--sp-4);\n    font-family: var(--prism-font-sans);\n    font-size: var(--fs-md);\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--radius-xs);\n    transition: color var(--dur-fast) var(--ease-default);\n}\n\n.prism-view-tab-bar__tab:hover {\n    color: var(--prism-text-2);\n}\n\n.prism-view-tab-bar__tab:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.prism-view-tab-bar__tab--active {\n    font-weight: 500;\n    color: var(--prism-text);\n    background: var(--prism-bg-elevated);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 18%);\n}\n"] }]
+        args: [{ selector: 'prism-view-tab-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismSegmentedComponent], template: "<prism-segmented\n    ariaLabel=\"View\"\n    [options]=\"options()\"\n    [value]=\"panelService.activeViewId()\"\n    (valueChange)=\"select($event)\" />\n", styles: [":host {\n    display: inline-flex;\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismViewTabBarComponent, { className: "PrismViewTabBarComponent", filePath: "app/view-tab-bar/prism-view-tab-bar.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismViewTabBarComponent, { className: "PrismViewTabBarComponent", filePath: "app/view-tab-bar/prism-view-tab-bar.component.ts", lineNumber: 15 }); })();

package/dist/builder/config-loader/deprecated-options.d.ts

@@ -1,7 +1,9 @@
 import type { NgPrismConfig } from '../../plugin/plugin.types.js';
 /**
- * One notice per deprecated option the config or one of its plugins sets.
- * They never had an effect, so the notice only asks to remove them.
+ * One notice per deprecated option the config or one of its plugins sets, and
+ * per deprecated theme token an override names. The options never had an
+ * effect, so their notice only asks to remove them; a token's names what
+ * replaces it.
  */
 export declare function describeDeprecatedOptions(config: NgPrismConfig, configFile: string): string[];
 //# sourceMappingURL=deprecated-options.d.ts.map

package/dist/builder/config-loader/deprecated-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated-options.d.ts","sourceRoot":"","sources":["../../../src/builder/config-loader/deprecated-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOlE;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAe7F"}
+{"version":3,"file":"deprecated-options.d.ts","sourceRoot":"","sources":["../../../src/builder/config-loader/deprecated-options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAUlE;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAqB7F"}

package/dist/builder/config-loader/deprecated-options.js

@@ -1,9 +1,14 @@
+import { DEPRECATED_THEME_TOKENS, deprecatedTokenNotice } from '../../app/theme/deprecated-tokens.js';
 /** Config options declared since the first release that nothing has ever read. */
 const DEPRECATED_CONFIG_OPTIONS = ['ui', 'themeStylesheet', 'headless', 'appComponent'];
 const NEVER_HAD_AN_EFFECT = 'which is deprecated and will be removed in 23.0.0. It has never had an effect; remove it.';
+/** The config options that hold theme token overrides. */
+const THEME_OPTIONS = ['theme', 'darkTheme', 'lightTheme'];
 /**
- * One notice per deprecated option the config or one of its plugins sets.
- * They never had an effect, so the notice only asks to remove them.
+ * One notice per deprecated option the config or one of its plugins sets, and
+ * per deprecated theme token an override names. The options never had an
+ * effect, so their notice only asks to remove them; a token's names what
+ * replaces it.
  */
 export function describeDeprecatedOptions(config, configFile) {
     const notices = [];
@@ -11,6 +16,12 @@ export function describeDeprecatedOptions(config, configFile) {
         if (config[option] !== undefined)
             notices.push(`${configFile} sets "${option}", ${NEVER_HAD_AN_EFFECT}`);
     }
+    for (const option of THEME_OPTIONS) {
+        for (const token of Object.keys(config[option] ?? {})) {
+            if (token in DEPRECATED_THEME_TOKENS)
+                notices.push(`${configFile} sets ${token} in "${option}": ${deprecatedTokenNotice(token)}`);
+        }
+    }
     for (const plugin of config.plugins ?? []) {
         if (plugin.wrapComponent !== undefined)
             notices.push(`plugin "${plugin.name}" sets wrapComponent, ${NEVER_HAD_AN_EFFECT}`);

package/dist/builder/manifest/composition-wrapper.generator.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentComposition, ScannedComponent } from '../../plugin/plugin.types.js';
+/** The name of the generated wrapper that renders the compositions of `className`. */
+export declare function compositionClassName(className: string): string;
+/**
+ * The AOT-compiled wrapper that renders the compositions of one showcase: a `@switch` over its cases, the one that
+ * `__prismVariant__` selects through `variantCases`. Each case is the author's markup with the subject element
+ * bound to the wrapper's own inputs and outputs, which are the subject's re-declared under their member names, as in
+ * the host wrapper of a directive. An input is declared when at least one case binds it.
+ *
+ * `localNames` holds the identifier of each class in `composition.imports` that differs from its name, by
+ * `importKey`.
+ */
+export declare function generateCompositionClass(comp: ScannedComponent, composition: ComponentComposition, localNames: ReadonlyMap<string, string>): string;
+//# sourceMappingURL=composition-wrapper.generator.d.ts.map

package/dist/builder/manifest/composition-wrapper.generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composition-wrapper.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/composition-wrapper.generator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAA8B,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQvH,sFAAsF;AACtF,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAE9D;AA4BD;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,oBAAoB,EAAE,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CA4BnJ"}

package/dist/builder/manifest/composition-wrapper.generator.js

@@ -0,0 +1,66 @@
+import { relative } from 'node:path';
+import { COMPOSITION_SUBJECT_ATTR, COMPOSITION_SUBJECT_SLOT, PRISM_VARIANT_INPUT } from '../../shared/composition.js';
+import { localName } from './manifest-imports.js';
+import { escapeTemplateLiteral } from './template-literal.js';
+/** The member the template switches on: the case of the variant the wrapper is set to. */
+const CASE_MEMBER = '__prismCase__';
+/** The name of the generated wrapper that renders the compositions of `className`. */
+export function compositionClassName(className) {
+    return `${className}__PrismComposition`;
+}
+/** `input<any>()`: the wrapper declares every input untyped, as the template of a case binds it to the subject, which checks it. */
+function formatInputDeclaration(input) {
+    return input.required ? 'input.required<any>()' : `input<any>(${JSON.stringify(input.defaultValue)})`;
+}
+/**
+ * What goes where {@link COMPOSITION_SUBJECT_SLOT} stands: the marker of the subject, its inputs this case binds, and
+ * every output. The members are read with `this.`, so that a variable the author's markup declares around the subject
+ * (`@for (label of …)`, `@let label`, `#label`) cannot take the place of the wrapper's own `label`.
+ */
+function subjectBindings(comp, unbound) {
+    const inputs = comp.inputs.filter((input) => !unbound.has(input.name)).map((input) => ` [${input.alias ?? input.name}]="this.${input.name}()"`);
+    const outputs = comp.outputs.map((output) => ` (${output.alias ?? output.name})="this.${output.name}.emit($event)"`);
+    return ` ${COMPOSITION_SUBJECT_ATTR}${inputs.join('')}${outputs.join('')}`;
+}
+/** The `@case` of one composition: where it comes from as an HTML comment, then its markup with the subject's bindings in the slot. */
+function formatCase(comp, composition, index) {
+    const bindings = subjectBindings(comp, new Set(composition.unbound.map(({ name }) => name)));
+    // A variant name is free text: `--` could end the comment early, so it becomes two hyphens of another kind.
+    const origin = composition.origin === undefined ? '' : `<!-- ${composition.origin.replace(/--/g, '\u2010\u2010')} -->\n`;
+    return `@case (${index}) {\n${origin}${composition.template.replace(COMPOSITION_SUBJECT_SLOT, () => bindings)}\n}`;
+}
+/**
+ * The AOT-compiled wrapper that renders the compositions of one showcase: a `@switch` over its cases, the one that
+ * `__prismVariant__` selects through `variantCases`. Each case is the author's markup with the subject element
+ * bound to the wrapper's own inputs and outputs, which are the subject's re-declared under their member names, as in
+ * the host wrapper of a directive. An input is declared when at least one case binds it.
+ *
+ * `localNames` holds the identifier of each class in `composition.imports` that differs from its name, by
+ * `importKey`.
+ */
+export function generateCompositionClass(comp, composition, localNames) {
+    const { cases, variantCases } = composition;
+    const imports = new Set([comp.className, ...(composition.imports ?? []).map(({ name, from }) => localName(localNames, from, name))]);
+    const template = `@switch (${CASE_MEMBER}()) {\n${cases.map((entry, index) => formatCase(comp, entry, index)).join('\n')}\n}`;
+    const isBound = (input) => cases.some(({ unbound }) => !unbound.some(({ name }) => name === input.name));
+    const members = [
+        ...comp.inputs.filter(isBound).map((input) => `  ${input.name} = ${formatInputDeclaration(input)};`),
+        ...comp.outputs.map((output) => `  ${output.name} = output<any>();`),
+        `  ${PRISM_VARIANT_INPUT} = input(0);`,
+        `  protected ${CASE_MEMBER} = computed(() => [${variantCases.join(', ')}][this.${PRISM_VARIANT_INPUT}()]);`
+    ];
+    // The scan holds the absolute path: the comment names it relative to the working directory, and in one line whatever the path holds.
+    const header = `${comp.className} · ${relative(process.cwd(), comp.filePath)}`.replace(/\s+/g, ' ');
+    return [
+        `// ${header}`,
+        `@Component({`,
+        `  standalone: true,`,
+        `  imports: [${[...imports].join(', ')}],`,
+        `  host: { style: 'display: block' },`,
+        `  template: \`${escapeTemplateLiteral(template)}\`,`,
+        `})`,
+        `class ${compositionClassName(comp.className)} {`,
+        ...members,
+        `}`
+    ].join('\n');
+}

package/dist/builder/manifest/host-parser.d.ts

@@ -4,4 +4,6 @@ export interface ParsedHost {
     content?: string;
 }
 export declare function parseHostString(host: string): ParsedHost | null;
+/** {@link parseHostString} without its warning, for a caller that reports a host it cannot parse itself. */
+export declare function matchHostString(host: string): ParsedHost | null;
 //# sourceMappingURL=host-parser.d.ts.map

package/dist/builder/manifest/host-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"host-parser.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/host-parser.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA0B/D"}
+{"version":3,"file":"host-parser.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/host-parser.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAU/D;AAED,4GAA4G;AAC5G,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAoB/D"}

package/dist/builder/manifest/host-parser.js

@@ -1,4 +1,13 @@
 export function parseHostString(host) {
+    const parsed = matchHostString(host);
+    if (!parsed && host.trim().length > 0) {
+        console.warn(`[ng-prism] @Showcase host="${host}" could not be parsed and will fall back to <div>. ` +
+            `Supported forms: "<tag>", "<tag attrs>", "<tag />", or "<tag>text</tag>".`);
+    }
+    return parsed;
+}
+/** {@link parseHostString} without its warning, for a caller that reports a host it cannot parse itself. */
+export function matchHostString(host) {
     const trimmed = host.trim();
     const open = trimmed.match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
     if (open) {
@@ -12,9 +21,5 @@ export function parseHostString(host) {
             content: wrapped[3]
         };
     }
-    if (trimmed.length > 0) {
-        console.warn(`[ng-prism] @Showcase host="${host}" could not be parsed and will fall back to <div>. ` +
-            `Supported forms: "<tag>", "<tag attrs>", "<tag />", or "<tag>text</tag>".`);
-    }
     return null;
 }

package/dist/builder/manifest/manifest-imports.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Whether the generated module can import `name` by name, `import { name } from '…'`: an identifier and no reserved
+ * word, which also rules out `default`.
+ */
+export declare function isImportableName(name: string): boolean;
+/** The key of `{ name, from }` in the map of {@link ManifestImports.names}. */
+export declare function importKey(from: string, name: string): string;
+/** The identifier `name` from `from` has in the generated module: `localNames` holds the ones that differ from `name`. */
+export declare function localName(localNames: ReadonlyMap<string, string>, from: string, name: string): string;
+/**
+ * What the generated manifest imports, and the identifier each class has in it. Two classes of the same name from
+ * different modules, such as an explicit import next to a library class of another entry point, would be one
+ * identifier twice: the later one is imported under an alias, `Name__2`.
+ */
+export declare class ManifestImports {
+    private readonly modules;
+    private readonly taken;
+    /** `reserved`: identifiers the module declares or imports itself, which no class may take. */
+    constructor(reserved: Iterable<string>);
+    /** A class the manifest refers to by its own name, which is never renamed: one of the showcased components. */
+    keep(from: string, name: string): void;
+    /** Import `name` from `from` and return the identifier it has: the name itself, or an alias when another class took it. */
+    local(from: string, name: string): string;
+    /** The identifier of each imported class that is not its own name, by {@link importKey}. */
+    names(): ReadonlyMap<string, string>;
+    /**
+     * One `import` statement per module, in the order the modules were first used. The module is written as a JSON
+     * string, which is a valid one whatever it holds; the names are the scan's, which only lets identifiers through.
+     */
+    lines(): string[];
+    private module;
+    private free;
+}
+//# sourceMappingURL=manifest-imports.d.ts.map

package/dist/builder/manifest/manifest-imports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest-imports.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/manifest-imports.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CActD;AAED,+EAA+E;AAC/E,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5D;AAED,0HAA0H;AAC1H,wBAAgB,SAAS,CAAC,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAErG;AAED;;;;GAIG;AACH,qBAAa,eAAe;IACxB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0C;IAClE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAc;IAEpC,8FAA8F;gBAClF,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC;IAItC,+GAA+G;IAC/G,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAKtC,2HAA2H;IAC3H,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAYzC,4FAA4F;IAC5F,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC;IAWpC;;;OAGG;IACH,KAAK,IAAI,MAAM,EAAE;IAQjB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,IAAI;CAQf"}

package/dist/builder/manifest/manifest-imports.js

@@ -0,0 +1,91 @@
+import ts from 'typescript';
+/**
+ * Whether the generated module can import `name` by name, `import { name } from '…'`: an identifier and no reserved
+ * word, which also rules out `default`.
+ */
+export function isImportableName(name) {
+    const scanner = ts.createScanner(ts.ScriptTarget.Latest, false, ts.LanguageVariant.Standard, name);
+    const token = scanner.scan();
+    if (scanner.getTokenEnd() !== name.length)
+        return false;
+    if (token === ts.SyntaxKind.Identifier)
+        return true;
+    const isReserved = (token >= ts.SyntaxKind.FirstReservedWord && token <= ts.SyntaxKind.LastReservedWord) ||
+        (token >= ts.SyntaxKind.FirstFutureReservedWord && token <= ts.SyntaxKind.LastFutureReservedWord) ||
+        token === ts.SyntaxKind.AwaitKeyword;
+    // A contextual keyword such as `type` or `from` is a name like any other.
+    return token >= ts.SyntaxKind.FirstKeyword && token <= ts.SyntaxKind.LastKeyword && !isReserved;
+}
+/** The key of `{ name, from }` in the map of {@link ManifestImports.names}. */
+export function importKey(from, name) {
+    return `${from}#${name}`;
+}
+/** The identifier `name` from `from` has in the generated module: `localNames` holds the ones that differ from `name`. */
+export function localName(localNames, from, name) {
+    return localNames.get(importKey(from, name)) ?? name;
+}
+/**
+ * What the generated manifest imports, and the identifier each class has in it. Two classes of the same name from
+ * different modules, such as an explicit import next to a library class of another entry point, would be one
+ * identifier twice: the later one is imported under an alias, `Name__2`.
+ */
+export class ManifestImports {
+    modules = new Map();
+    taken;
+    /** `reserved`: identifiers the module declares or imports itself, which no class may take. */
+    constructor(reserved) {
+        this.taken = new Set(reserved);
+    }
+    /** A class the manifest refers to by its own name, which is never renamed: one of the showcased components. */
+    keep(from, name) {
+        this.module(from).set(name, name);
+        this.taken.add(name);
+    }
+    /** Import `name` from `from` and return the identifier it has: the name itself, or an alias when another class took it. */
+    local(from, name) {
+        const module = this.module(from);
+        let local = module.get(name);
+        if (local === undefined) {
+            local = this.free(name);
+            module.set(name, local);
+            this.taken.add(local);
+        }
+        return local;
+    }
+    /** The identifier of each imported class that is not its own name, by {@link importKey}. */
+    names() {
+        const names = new Map();
+        for (const [from, module] of this.modules) {
+            for (const [name, local] of module) {
+                if (local !== name)
+                    names.set(importKey(from, name), local);
+            }
+        }
+        return names;
+    }
+    /**
+     * One `import` statement per module, in the order the modules were first used. The module is written as a JSON
+     * string, which is a valid one whatever it holds; the names are the scan's, which only lets identifiers through.
+     */
+    lines() {
+        return [...this.modules].map(([from, module]) => {
+            const specifiers = [...module].map(([name, local]) => (local === name ? name : `${name} as ${local}`));
+            return `import { ${specifiers.join(', ')} } from ${JSON.stringify(from)};`;
+        });
+    }
+    module(from) {
+        let module = this.modules.get(from);
+        if (!module) {
+            module = new Map();
+            this.modules.set(from, module);
+        }
+        return module;
+    }
+    free(name) {
+        let local = name;
+        for (let n = 2; this.taken.has(local); n++) {
+            local = `${name}__${n}`;
+        }
+        return local;
+    }
+}

package/dist/builder/manifest/runtime-manifest.generator.d.ts

@@ -1,10 +1,23 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { ScannedPipe } from '../../plugin/pipe.types.js';
 import type { ScannedComponent } from '../../plugin/plugin.types.js';
+import type { ScannedService } from '../../plugin/service.types.js';
+type Warn = (message: string) => void;
 export interface RuntimeManifestOptions {
     components: ScannedComponent[];
+    /** Written as data: a service's class is never imported into the styleguide. */
+    services?: ScannedService[];
+    /** Written as data too: a pipe's class is never imported into the styleguide. */
+    pipes?: ScannedPipe[];
     libraryImportPath: string;
     pages?: StyleguidePage[];
     meta?: Record<string, unknown>;
+    /**
+     * Where the generator reports a host it cannot render as written. Defaults to `console.warn` under a `⚠ ng-prism:` prefix.
+     * Since 22.7.0.
+     */
+    warn?: Warn;
 }
 export declare function generateRuntimeManifest(options: RuntimeManifestOptions): string;
+export {};
 //# sourceMappingURL=runtime-manifest.generator.d.ts.map

package/dist/builder/manifest/runtime-manifest.generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhF,MAAM,WAAW,sBAAsB;IACnC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAqHD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,MAAM,CAkF/E"}
+{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAQpE,KAAK,IAAI,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;AAEtC,MAAM,WAAW,sBAAsB;IACnC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,iFAAiF;IACjF,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf;AA+KD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,MAAM,CAyE/E"}