@ng-prism/core 21.2.0 → 21.4.0

package/README.md

@@ -11,7 +11,7 @@ Lightweight, Angular-native component showcase tool. Annotate components with `@
 - **Zero-config discovery** — TypeScript Compiler API scans your library at build time
 - **Signal-native** — works with `input()` / `output()` signals
 - **Directive support** — showcase directives with configurable host elements
-- **Plugin architecture** — JSDoc, A11y, Figma, Performance, Box Model plugins
+- **Plugin architecture** — JSDoc, A11y, Figma, Performance, Box Model, Coverage plugins
 - **Live Controls** — auto-generated input controls with type-aware editors
 - **Code Snippets** — live-updating Angular template snippets per variant
 - **Component Pages** — free-form demo pages for complex components
@@ -150,6 +150,7 @@ export class TableComponent { ... }
 | Figma | `@ng-prism/plugin-figma` | Figma design embed + visual diff |
 | Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector |
 | Perf | `@ng-prism/plugin-perf` | Render performance profiling |
+| Coverage | `@ng-prism/plugin-coverage` | Per-component test coverage from Istanbul/v8 |
 
 > **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
 

package/dist/app/panels/controls/prism-controls-panel.component.d.ts

@@ -1,9 +1,12 @@
+import type { ControlDefinition, InputMeta } from '../../../plugin/plugin.types.js';
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismControlsPanelComponent {
     protected readonly navigationService: PrismNavigationService;
     protected readonly rendererService: PrismRendererService;
+    private readonly pluginService;
+    protected getCustomControl(input: InputMeta): ControlDefinition | null;
     protected asBoolean(val: unknown): boolean;
     protected asNumber(val: unknown): number;
     protected asString(val: unknown): string;

package/dist/app/panels/controls/prism-controls-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAyFa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAZ7B,2BAA2B;2CAA3B,2BAA2B;CAevC"}
+{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAiGa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAItE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAjB7B,2BAA2B;2CAA3B,2BAA2B;CAoBvC"}

package/dist/app/panels/controls/prism-controls-panel.component.js

@@ -1,3 +1,4 @@
+import { NgComponentOutlet } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { BooleanControlComponent } from '../../controls/boolean-control.component.js';
 import { JsonControlComponent } from '../../controls/json-control.component.js';
@@ -5,69 +6,85 @@ import { NumberControlComponent } from '../../controls/number-control.component.
 import { StringControlComponent } from '../../controls/string-control.component.js';
 import { UnionControlComponent } from '../../controls/union-control.component.js';
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
+import { PrismPluginService } from '../../services/prism-plugin.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
-const _c0 = () => [];
+const _c0 = a0 => ({ inputMeta: a0 });
+const _c1 = () => [];
 const _forTrack0 = ($index, $item) => $item.name;
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-boolean-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_1_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 3);
+} if (rf & 2) {
+    const input_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngComponentOutlet", ctx.component)("ngComponentOutletInputs", i0.ɵɵpureFunction1(2, _c0, input_r1));
+} }
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-boolean-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_0_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asBoolean(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.asBoolean(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-number-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_2_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-number-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_1_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asNumber(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.asNumber(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-union-control", 6);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_3_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-union-control", 7);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_2_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "")("options", input_r2.values ?? i0.ɵɵpureFunction0(4, _c0));
+    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "")("options", input_r1.values ?? i0.ɵɵpureFunction0(4, _c1));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-string-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_4_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-string-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_3_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_5_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-json-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_5_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-json-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_4_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.rendererService.inputValues()[input_r2.name])("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.rendererService.inputValues()[input_r1.name])("label", input_r1.name)("typeName", input_r1.rawType ?? "");
+} }
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_0_Template, 1, 3, "prism-boolean-control", 4)(1, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_1_Template, 1, 3, "prism-number-control", 4)(2, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_2_Template, 1, 5, "prism-union-control", 5)(3, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_3_Template, 1, 3, "prism-string-control", 4)(4, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_4_Template, 1, 3, "prism-json-control", 4);
+} if (rf & 2) {
+    let tmp_13_0;
+    const input_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional((tmp_13_0 = input_r1.type) === "boolean" ? 0 : tmp_13_0 === "number" ? 1 : tmp_13_0 === "union" ? 2 : tmp_13_0 === "string" ? 3 : 4);
 } }
 function PrismControlsPanelComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Case_1_Template, 1, 3, "prism-boolean-control", 3)(2, PrismControlsPanelComponent_Conditional_0_For_2_Case_2_Template, 1, 3, "prism-number-control", 3)(3, PrismControlsPanelComponent_Conditional_0_For_2_Case_3_Template, 1, 5, "prism-union-control", 4)(4, PrismControlsPanelComponent_Conditional_0_For_2_Case_4_Template, 1, 3, "prism-string-control", 3)(5, PrismControlsPanelComponent_Conditional_0_For_2_Case_5_Template, 1, 3, "prism-json-control", 3);
+    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_1_Template, 1, 4, "ng-container", 3)(2, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Template, 5, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
-    const input_r2 = ctx.$implicit;
+    const input_r1 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_12_0 = input_r2.type) === "boolean" ? 1 : tmp_12_0 === "number" ? 2 : tmp_12_0 === "union" ? 3 : tmp_12_0 === "string" ? 4 : 5);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r2.getCustomControl(input_r1)) ? 1 : 2, tmp_12_0);
 } }
 function PrismControlsPanelComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 2);
@@ -76,7 +93,7 @@ function PrismControlsPanelComponent_Conditional_0_Conditional_3_Template(rf, ct
 } }
 function PrismControlsPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Template, 6, 1, "div", 1, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Template, 3, 1, "div", 1, _forTrack0);
     i0.ɵɵconditionalCreate(3, PrismControlsPanelComponent_Conditional_0_Conditional_3_Template, 2, 0, "p", 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89,6 +106,10 @@ function PrismControlsPanelComponent_Conditional_0_Template(rf, ctx) { if (rf &
 export class PrismControlsPanelComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
+    pluginService = inject(PrismPluginService);
+    getCustomControl(input) {
+        return this.pluginService.controls().find((ctrl) => ctrl.matchType(input)) ?? null;
+    }
     asBoolean(val) {
         return Boolean(val);
     }
@@ -99,12 +120,13 @@ export class PrismControlsPanelComponent {
         return String(val ?? '');
     }
     static ɵfac = function PrismControlsPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismControlsPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], decls: 1, vars: 1, consts: [[1, "prism-controls-panel"], [1, "prism-controls-panel__row"], [1, "prism-controls-panel__empty"], [3, "value", "label", "typeName"], [3, "value", "label", "typeName", "options"], [3, "valueChange", "value", "label", "typeName"], [3, "valueChange", "value", "label", "typeName", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], decls: 1, vars: 1, consts: [[1, "prism-controls-panel"], [1, "prism-controls-panel__row"], [1, "prism-controls-panel__empty"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [3, "value", "label", "typeName"], [3, "value", "label", "typeName", "options"], [3, "valueChange", "value", "label", "typeName"], [3, "valueChange", "value", "label", "typeName", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_Template, 4, 1, "div", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [BooleanControlComponent,
+        } }, dependencies: [NgComponentOutlet,
+            BooleanControlComponent,
             StringControlComponent,
             NumberControlComponent,
             UnionControlComponent,
@@ -113,6 +135,7 @@ export class PrismControlsPanelComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,
         args: [{ selector: 'prism-controls-panel', standalone: true, imports: [
+                    NgComponentOutlet,
                     BooleanControlComponent,
                     StringControlComponent,
                     NumberControlComponent,
@@ -123,47 +146,54 @@ export class PrismControlsPanelComponent {
       <div class="prism-controls-panel">
         @for (input of comp.meta.inputs; track input.name) {
           <div class="prism-controls-panel__row">
-            @switch (input.type) {
-              @case ('boolean') {
-                <prism-boolean-control
-                  [value]="asBoolean(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @case ('number') {
-                <prism-number-control
-                  [value]="asNumber(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @case ('union') {
-                <prism-union-control
-                  [value]="asString(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  [options]="input.values ?? []"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @case ('string') {
-                <prism-string-control
-                  [value]="asString(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @default {
-                <prism-json-control
-                  [value]="rendererService.inputValues()[input.name]"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
+            @if (getCustomControl(input); as customCtrl) {
+              <ng-container
+                [ngComponentOutlet]="customCtrl.component"
+                [ngComponentOutletInputs]="{ inputMeta: input }"
+              />
+            } @else {
+              @switch (input.type) {
+                @case ('boolean') {
+                  <prism-boolean-control
+                    [value]="asBoolean(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @case ('number') {
+                  <prism-number-control
+                    [value]="asNumber(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @case ('union') {
+                  <prism-union-control
+                    [value]="asString(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    [options]="input.values ?? []"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @case ('string') {
+                  <prism-string-control
+                    [value]="asString(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @default {
+                  <prism-json-control
+                    [value]="rendererService.inputValues()[input.name]"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
               }
             }
           </div>
@@ -175,4 +205,4 @@ export class PrismControlsPanelComponent {
     }
   `, styles: ["\n    .prism-controls-panel {\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .prism-controls-panel__row {\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .prism-controls-panel__row:last-child { border-bottom: none; }\n\n    .prism-controls-panel__empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      margin: 0;\n      padding: 16px;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 99 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 110 }); })();

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts

@@ -9,6 +9,7 @@ export declare class PrismPanelHostComponent implements OnDestroy {
     private readonly auditService;
     private readonly rendererService;
     protected readonly a11yScore: import("@angular/core").Signal<number | null>;
+    protected readonly coverageScore: import("@angular/core").Signal<number | null>;
     private readonly builtInPanels;
     protected readonly allPanels: import("@angular/core").Signal<import("../../../index.js").PanelDefinition[]>;
     protected readonly resolvedComponent: import("@angular/core").WritableSignal<Type<unknown> | null>;

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA0D,mBAAmB,EAAU,SAAS,EAAU,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAKlJ,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAK1E,qBAkFa,uBAAwB,YAAW,SAAS;IACvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAAkE;IAE9F,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,gFAGzB;IACH,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAY9B;;IAmDH,WAAW,IAAI,IAAI;yCAvFR,uBAAuB;2CAAvB,uBAAuB;CA0FnC"}
+{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA0D,mBAAmB,EAAU,SAAS,EAAU,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAKlJ,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAK1E,qBAqFa,uBAAwB,YAAW,SAAS;IACvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAAkE;IAE9F,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAK7B;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,gFAGzB;IACH,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAY9B;;IAmDH,WAAW,IAAI,IAAI;yCA9FR,uBAAuB;2CAAvB,uBAAuB;CAiGnC"}

package/dist/app/panels/panel-host/prism-panel-host.component.js

@@ -15,12 +15,19 @@ function PrismPanelHostComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("score", ctx_r2.a11yScore())("compact", true);
 } }
+function PrismPanelHostComponent_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-a11y-score", 5);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("score", ctx_r2.coverageScore())("compact", true);
+} }
 function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 4);
     i0.ɵɵlistener("click", function PrismPanelHostComponent_For_3_Template_button_click_0_listener() { const panel_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.panelService.activePanelId.set(panel_r2.id)); });
     i0.ɵɵconditionalCreate(1, PrismPanelHostComponent_For_3_Conditional_1_Template, 1, 2, "prism-a11y-score", 5);
-    i0.ɵɵtext(2);
+    i0.ɵɵconditionalCreate(2, PrismPanelHostComponent_For_3_Conditional_2_Template, 1, 2, "prism-a11y-score", 5);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const panel_r2 = ctx.$implicit;
@@ -29,6 +36,8 @@ function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(panel_r2.id === "a11y" && ctx_r2.a11yScore() !== null ? 1 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵconditional(panel_r2.id === "coverage" && ctx_r2.coverageScore() !== null ? 2 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", panel_r2.label, " ");
 } }
 function PrismPanelHostComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
@@ -48,6 +57,13 @@ export class PrismPanelHostComponent {
     auditService = inject(A11yAuditService);
     rendererService = inject(PrismRendererService);
     a11yScore = computed(() => this.auditService.scoreResult()?.score ?? null, ...(ngDevMode ? [{ debugName: "a11yScore" }] : []));
+    coverageScore = computed(() => {
+        const comp = this.nav.activeComponent();
+        const coverage = comp?.meta?.showcaseConfig?.meta?.['coverage'];
+        if (!coverage?.found)
+            return null;
+        return coverage.score;
+    }, ...(ngDevMode ? [{ debugName: "coverageScore" }] : []));
     builtInPanels = BUILTIN_PANELS;
     allPanels = computed(() => [
         ...this.builtInPanels.filter((p) => p.placement !== 'view'),
@@ -116,7 +132,7 @@ export class PrismPanelHostComponent {
     static ɵfac = function PrismPanelHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelHostComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 6, vars: 1, consts: [[1, "prism-panel-host"], [1, "prism-panel-host__tabs"], [1, "prism-panel-host__tab", 3, "prism-panel-host__tab--active"], [1, "prism-panel-host__content"], [1, "prism-panel-host__tab", 3, "click"], [2, "width", "18px", "height", "18px", 3, "score", "compact"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, PrismPanelHostComponent_For_3_Template, 3, 4, "button", 2, _forTrack0);
+            i0.ɵɵrepeaterCreate(2, PrismPanelHostComponent_For_3_Template, 4, 5, "button", 2, _forTrack0);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "div", 3);
             i0.ɵɵconditionalCreate(5, PrismPanelHostComponent_Conditional_5_Template, 1, 3, "ng-container");
@@ -142,6 +158,9 @@ export class PrismPanelHostComponent {
             @if (panel.id === 'a11y' && a11yScore() !== null) {
               <prism-a11y-score [score]="a11yScore()!" [compact]="true" style="width:18px;height:18px;" />
             }
+            @if (panel.id === 'coverage' && coverageScore() !== null) {
+              <prism-a11y-score [score]="coverageScore()!" [compact]="true" style="width:18px;height:18px;" />
+            }
             {{ panel.label }}
           </button>
         }
@@ -154,4 +173,4 @@ export class PrismPanelHostComponent {
     </div>
   `, styles: ["\n    .prism-panel-host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-panel-host__tabs {\n      display: flex;\n      border-bottom: 1px solid var(--prism-border);\n      padding: 0 8px;\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-panel-host__tab {\n      padding: 9px 14px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n\n    .prism-panel-host__tab::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 8px;\n      right: 8px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n\n    .prism-panel-host__tab:hover { color: var(--prism-text-2); }\n\n    .prism-panel-host__tab--active { color: var(--prism-primary); font-weight: 500; }\n\n    .prism-panel-host__tab--active::after { opacity: 1; }\n\n    .prism-panel-host__tab { display: flex; align-items: center; gap: 6px; }\n\n    .prism-panel-host__content {\n      flex: 1;\n      overflow: auto;\n    }\n  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 94 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 97 }); })();

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

@@ -1,12 +1,20 @@
 import type { NavigationItem } from '../services/navigation-item.types.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import * as i0 from "@angular/core";
+interface SidebarCategory {
+    name: string;
+    items: NavigationItem[];
+}
+interface SidebarGroup {
+    name: string | null;
+    categories: SidebarCategory[];
+}
 export declare class PrismSidebarComponent {
     protected readonly navigationService: PrismNavigationService;
     private readonly expandedSet;
-    protected readonly entries: import("@angular/core").Signal<[string, NavigationItem[]][]>;
-    protected isExpanded(category: string, index: number): boolean;
-    protected toggleCategory(category: string, index: number): void;
+    protected readonly groups: import("@angular/core").Signal<SidebarGroup[]>;
+    protected isExpanded(key: string, index: number): boolean;
+    protected toggle(key: string, index: number): void;
     protected itemKey(item: NavigationItem): string;
     protected itemLabel(item: NavigationItem): string;
     protected isActive(item: NavigationItem): boolean;
@@ -16,4 +24,5 @@ export declare class PrismSidebarComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismSidebarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismSidebarComponent, "prism-sidebar", never, {}, {}, never, never, true, never>;
 }
+export {};
 //# sourceMappingURL=prism-sidebar.component.d.ts.map

package/dist/app/sidebar/prism-sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAIjF,qBA8Ia,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4C;IAExE,SAAS,CAAC,QAAQ,CAAC,OAAO,+DAC8B;IAExD,SAAS,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAO9D,SAAS,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAoB/D,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IASjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;yCAzET,qBAAqB;2CAArB,qBAAqB;CA8EjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAIjF,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,qBA2Na,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4C;IAExE,SAAS,CAAC,QAAQ,CAAC,MAAM,iDAgCtB;IAEH,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAOzD,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAoBlD,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IASjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;yCAxGT,qBAAqB;2CAArB,qBAAqB;CA6GjC"}

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

@@ -1,88 +1,189 @@
 import { Component, computed, inject, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item[0];
-function _forTrack1($index, $item) { return this.itemKey($item); }
-function PrismSidebarComponent_For_2_Conditional_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 7);
+const _c0 = a0 => ({ cat: a0, nested: true });
+const _c1 = a0 => ({ cat: a0, nested: false });
+const _forTrack0 = ($index, $item) => $item.name ?? "__ungrouped";
+const _forTrack1 = ($index, $item) => $item.name;
+function _forTrack2($index, $item) { return this.itemKey($item); }
+function PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_ng_container_0_Template, 1, 0, "ng-container", 6);
+} if (rf & 2) {
+    const cat_r6 = ctx.$implicit;
+    i0.ɵɵnextContext(4);
+    const categoryTpl_r7 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTpl_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, cat_r6));
+} }
+function PrismSidebarComponent_For_2_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_Template, 1, 4, "ng-container", null, _forTrack1);
+} if (rf & 2) {
+    const group_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵrepeater(group_r3.categories);
+} }
+function PrismSidebarComponent_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "button", 3);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_2_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); const group_r3 = ctx_r1.$implicit; const ɵ$index_3_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggle("group:" + group_r3.name, ɵ$index_3_r4)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 4);
+    i0.ɵɵelement(3, "path", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    const group_r3 = ctx_r1.$implicit;
+    const ɵ$index_3_r4 = ctx_r1.$index;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded("group:" + group_r3.name, ɵ$index_3_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", group_r3.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r4.isExpanded("group:" + group_r3.name, ɵ$index_3_r4) ? 5 : -1);
+} }
+function PrismSidebarComponent_For_2_Conditional_1_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PrismSidebarComponent_For_2_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismSidebarComponent_For_2_Conditional_1_For_1_ng_container_0_Template, 1, 0, "ng-container", 6);
+} if (rf & 2) {
+    const cat_r8 = ctx.$implicit;
+    i0.ɵɵnextContext(3);
+    const categoryTpl_r7 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTpl_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, cat_r8));
+} }
+function PrismSidebarComponent_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_1_For_1_Template, 1, 4, "ng-container", null, _forTrack1);
+} if (rf & 2) {
+    const group_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater(group_r3.categories);
+} }
+function PrismSidebarComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismSidebarComponent_For_2_Conditional_0_Template, 6, 4, "div", 2)(1, PrismSidebarComponent_For_2_Conditional_1_Template, 2, 0);
+} if (rf & 2) {
+    const group_r3 = ctx.$implicit;
+    i0.ɵɵconditional(group_r3.name ? 0 : 1);
+} }
+function PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
     i0.ɵɵtext(1, "\u25C8");
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } }
-function PrismSidebarComponent_For_2_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "button", 6);
-    i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_Conditional_5_For_1_Template_button_click_0_listener() { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onSelect(item_r7)); });
-    i0.ɵɵconditionalCreate(1, PrismSidebarComponent_For_2_Conditional_5_For_1_Conditional_1_Template, 2, 0, "span", 7);
+function PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Template_button_click_0_listener() { const item_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onSelect(item_r12)); });
+    i0.ɵɵconditionalCreate(1, PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Conditional_1_Template, 2, 0, "span", 11);
     i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("prism-sidebar__item--active", ctx_r4.isActive(item_r7))("prism-sidebar__item--page", item_r7.kind === "page");
+    const item_r12 = ctx.$implicit;
+    const nested_r13 = i0.ɵɵnextContext(2).nested;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-sidebar__item--active", ctx_r4.isActive(item_r12))("prism-sidebar__item--nested", nested_r13)("prism-sidebar__item--page", item_r12.kind === "page");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r7.kind === "page" ? 1 : -1);
+    i0.ɵɵconditional(item_r12.kind === "page" ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r4.itemLabel(item_r7), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r4.itemLabel(item_r12), " ");
 } }
-function PrismSidebarComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_5_For_1_Template, 3, 6, "button", 5, _forTrack1, true);
+function PrismSidebarComponent_ng_template_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Template, 3, 8, "button", 9, _forTrack2, true);
 } if (rf & 2) {
-    const entry_r3 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵrepeater(entry_r3[1]);
+    const cat_r10 = i0.ɵɵnextContext().cat;
+    i0.ɵɵrepeater(cat_r10.items);
 } }
-function PrismSidebarComponent_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 1)(1, "button", 2);
-    i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_Template_button_click_1_listener() { const ctx_r1 = i0.ɵɵrestoreView(_r1); const entry_r3 = ctx_r1.$implicit; const ɵ$index_3_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggleCategory(entry_r3[0], ɵ$index_3_r4)); });
+function PrismSidebarComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "button", 8);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_ng_template_3_Template_button_click_1_listener() { const cat_r10 = i0.ɵɵrestoreView(_r9).cat; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggle("cat:" + cat_r10.name, 0)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(2, "svg", 3);
-    i0.ɵɵdomElement(3, "path", 4);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementStart(2, "svg", 4);
+    i0.ɵɵelement(3, "path", 5);
+    i0.ɵɵelementEnd();
     i0.ɵɵtext(4);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_2_Conditional_5_Template, 2, 0);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_ng_template_3_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entry_r3 = ctx.$implicit;
-    const ɵ$index_3_r4 = ctx.$index;
+    const cat_r10 = ctx.cat;
+    const nested_r13 = ctx.nested;
     const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-sidebar__category--nested", nested_r13);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("prism-sidebar__category-title--nested", nested_r13);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded("cat:" + cat_r10.name, 0));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded(entry_r3[0], ɵ$index_3_r4));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", entry_r3[0], " ");
+    i0.ɵɵtextInterpolate1(" ", cat_r10.name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r4.isExpanded(entry_r3[0], ɵ$index_3_r4) ? 5 : -1);
+    i0.ɵɵconditional(ctx_r4.isExpanded("cat:" + cat_r10.name, 0) ? 5 : -1);
 } }
 const STORAGE_KEY = 'ng-prism-sidebar-expanded';
 export class PrismSidebarComponent {
     navigationService = inject(PrismNavigationService);
     expandedSet = signal(this.loadExpanded(), ...(ngDevMode ? [{ debugName: "expandedSet" }] : []));
-    entries = computed(() => [...this.navigationService.categoryTree().entries()], ...(ngDevMode ? [{ debugName: "entries" }] : []));
-    isExpanded(category, index) {
+    groups = computed(() => {
+        const tree = this.navigationService.categoryTree();
+        const groupMap = new Map();
+        for (const [fullCategory, items] of tree.entries()) {
+            const sepIdx = fullCategory.indexOf(' / ');
+            let groupName;
+            let catName;
+            if (sepIdx !== -1) {
+                groupName = fullCategory.substring(0, sepIdx).trim();
+                catName = fullCategory.substring(sepIdx + 3).trim();
+            }
+            else {
+                groupName = null;
+                catName = fullCategory;
+            }
+            const cats = groupMap.get(groupName) ?? [];
+            cats.push({ name: catName, items });
+            groupMap.set(groupName, cats);
+        }
+        const result = [];
+        const ungrouped = groupMap.get(null);
+        if (ungrouped) {
+            result.push({ name: null, categories: ungrouped });
+            groupMap.delete(null);
+        }
+        for (const [name, categories] of groupMap.entries()) {
+            result.push({ name, categories });
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    isExpanded(key, index) {
         const set = this.expandedSet();
-        if (set.has(category))
+        if (set.has(key))
             return true;
-        if (set.has(`__collapsed:${category}`))
+        if (set.has(`__collapsed:${key}`))
             return false;
         return index === 0;
     }
-    toggleCategory(category, index) {
+    toggle(key, index) {
         this.expandedSet.update(prev => {
             const next = new Set(prev);
-            const collapsedKey = `__collapsed:${category}`;
-            if (next.has(category)) {
-                next.delete(category);
+            const collapsedKey = `__collapsed:${key}`;
+            if (next.has(key)) {
+                next.delete(key);
                 next.add(collapsedKey);
             }
             else if (next.has(collapsedKey)) {
                 next.delete(collapsedKey);
-                next.add(category);
+                next.add(key);
             }
             else if (index === 0) {
                 next.add(collapsedKey);
             }
             else {
-                next.add(category);
+                next.add(key);
             }
             this.saveExpanded(next);
             return next;
@@ -131,40 +232,71 @@ export class PrismSidebarComponent {
         catch { /* ignore */ }
     }
     static ɵfac = function PrismSidebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSidebarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 3, vars: 0, consts: [[1, "prism-sidebar"], [1, "prism-sidebar__category"], [1, "prism-sidebar__category-title", 3, "click"], ["viewBox", "0 0 16 16", "fill", "currentColor", 1, "prism-sidebar__chevron"], ["d", "M6 4l4 4-4 4"], [1, "prism-sidebar__item", 3, "prism-sidebar__item--active", "prism-sidebar__item--page"], [1, "prism-sidebar__item", 3, "click"], [1, "prism-sidebar__page-icon"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "nav", 0);
-            i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_2_Template, 6, 4, "div", 1, _forTrack0);
-            i0.ɵɵdomElementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 5, vars: 0, consts: [["categoryTpl", ""], [1, "prism-sidebar"], [1, "prism-sidebar__group"], [1, "prism-sidebar__group-title", 3, "click"], ["viewBox", "0 0 16 16", 1, "prism-sidebar__chevron"], ["d", "M6 4l4 4-4 4"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "prism-sidebar__category"], [1, "prism-sidebar__category-title", 3, "click"], [1, "prism-sidebar__item", 3, "prism-sidebar__item--active", "prism-sidebar__item--nested", "prism-sidebar__item--page"], [1, "prism-sidebar__item", 3, "click"], [1, "prism-sidebar__page-icon"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "nav", 1);
+            i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_2_Template, 2, 1, null, null, _forTrack0);
+            i0.ɵɵtemplate(3, PrismSidebarComponent_ng_template_3_Template, 6, 8, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.entries());
-        } }, styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__category[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%]:hover   .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded[_ngcontent-%COMP%] {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      opacity: 0.6;\n    }"] });
+            i0.ɵɵrepeater(ctx.groups());
+        } }, dependencies: [NgTemplateOutlet], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__group[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n    .prism-sidebar__group-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 8px 16px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 50%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__group-title[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category-title--nested[_ngcontent-%COMP%] {\n      padding-left: 28px;\n      font-weight: 500;\n      font-size: 11px;\n      background: color-mix(in srgb, var(--prism-primary) 4%, transparent);\n      border-left-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    }\n\n    .prism-sidebar__category-title--nested[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    }\n\n    .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__group-title[_ngcontent-%COMP%]:hover   .prism-sidebar__chevron[_ngcontent-%COMP%], \n   .prism-sidebar__category-title[_ngcontent-%COMP%]:hover   .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded[_ngcontent-%COMP%] {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item--nested[_ngcontent-%COMP%] {\n      padding-left: 36px;\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      opacity: 0.6;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-sidebar', standalone: true, template: `
+        args: [{ selector: 'prism-sidebar', standalone: true, imports: [NgTemplateOutlet], template: `
     <nav class="prism-sidebar">
-      @for (entry of entries(); track entry[0]; let idx = $index) {
-        <div class="prism-sidebar__category">
+      @for (group of groups(); track group.name ?? '__ungrouped'; let gi = $index) {
+        @if (group.name) {
+          <div class="prism-sidebar__group">
+            <button
+              class="prism-sidebar__group-title"
+              (click)="toggle('group:' + group.name, gi)"
+            >
+              <svg
+                class="prism-sidebar__chevron"
+                [class.prism-sidebar__chevron--expanded]="isExpanded('group:' + group.name, gi)"
+                viewBox="0 0 16 16"
+              >
+                <path d="M6 4l4 4-4 4"/>
+              </svg>
+              {{ group.name }}
+            </button>
+            @if (isExpanded('group:' + group.name, gi)) {
+              @for (cat of group.categories; track cat.name) {
+                <ng-container *ngTemplateOutlet="categoryTpl; context: { cat, nested: true }" />
+              }
+            }
+          </div>
+        } @else {
+          @for (cat of group.categories; track cat.name) {
+            <ng-container *ngTemplateOutlet="categoryTpl; context: { cat, nested: false }" />
+          }
+        }
+      }
+
+      <ng-template #categoryTpl let-cat="cat" let-nested="nested">
+        <div class="prism-sidebar__category" [class.prism-sidebar__category--nested]="nested">
           <button
             class="prism-sidebar__category-title"
-            (click)="toggleCategory(entry[0], idx)"
+            [class.prism-sidebar__category-title--nested]="nested"
+            (click)="toggle('cat:' + cat.name, 0)"
           >
             <svg
               class="prism-sidebar__chevron"
-              [class.prism-sidebar__chevron--expanded]="isExpanded(entry[0], idx)"
+              [class.prism-sidebar__chevron--expanded]="isExpanded('cat:' + cat.name, 0)"
               viewBox="0 0 16 16"
-              fill="currentColor"
             >
               <path d="M6 4l4 4-4 4"/>
             </svg>
-            {{ entry[0] }}
+            {{ cat.name }}
           </button>
-          @if (isExpanded(entry[0], idx)) {
-            @for (item of entry[1]; track itemKey(item)) {
+          @if (isExpanded('cat:' + cat.name, 0)) {
+            @for (item of cat.items; track itemKey(item)) {
               <button
                 class="prism-sidebar__item"
                 [class.prism-sidebar__item--active]="isActive(item)"
+                [class.prism-sidebar__item--nested]="nested"
                 [class.prism-sidebar__item--page]="item.kind === 'page'"
                 (click)="onSelect(item)"
               >
@@ -176,8 +308,8 @@ export class PrismSidebarComponent {
             }
           }
         </div>
-      }
+      </ng-template>
     </nav>
-  `, styles: ["\n    .prism-sidebar {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__category { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__chevron {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__category-title:hover .prism-sidebar__chevron {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon {\n      font-size: 10px;\n      opacity: 0.6;\n    }\n  "] }]
+  `, styles: ["\n    .prism-sidebar {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__group { margin-bottom: 2px; }\n\n    .prism-sidebar__group-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 8px 16px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 50%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__group-title:hover {\n      background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category-title--nested {\n      padding-left: 28px;\n      font-weight: 500;\n      font-size: 11px;\n      background: color-mix(in srgb, var(--prism-primary) 4%, transparent);\n      border-left-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    }\n\n    .prism-sidebar__category-title--nested:hover {\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    }\n\n    .prism-sidebar__chevron {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__group-title:hover .prism-sidebar__chevron,\n    .prism-sidebar__category-title:hover .prism-sidebar__chevron {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item--nested {\n      padding-left: 36px;\n    }\n\n    .prism-sidebar__item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon {\n      font-size: 10px;\n      opacity: 0.6;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 149 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 237 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "21.2.0",
+  "version": "21.4.0",
   "description": "Lightweight Angular-native component showcase — no story files needed.",
   "keywords": [
     "angular",