@ng-prism/core 21.4.4 → 21.5.0

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

@@ -1,191 +1,250 @@
-import { Component, computed, inject, signal } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { Component, computed, inject, signal, ChangeDetectionStrategy, } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismSearchService } from '../services/prism-search.service.js';
+import { PrismManifestService } from '../services/prism-manifest.service.js';
 import * as i0 from "@angular/core";
-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);
+const _forTrack0 = ($index, $item) => $item.name;
+function _forTrack1($index, $item) { return this.itemKey($item); }
+function PrismSidebarComponent_Conditional_7_For_8_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_7_For_8_Conditional_5_For_2_Template_button_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(item_r5)); });
+    i0.ɵɵelementStart(1, "span", 18);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
 } 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));
+    const item_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(item_r5));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r5));
 } }
-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);
+function PrismSidebarComponent_Conditional_7_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_Conditional_7_For_8_Conditional_5_For_2_Template, 3, 3, "button", 16, _forTrack1, true);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r3 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵrepeater(group_r3.categories);
+    const cat_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(cat_r2.items);
 } }
-function PrismSidebarComponent_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function PrismSidebarComponent_Conditional_7_For_8_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.ɵɵelementStart(0, "div", 11)(1, "button", 12);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_7_For_8_Template_button_click_1_listener() { const cat_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleCollapse("page:" + cat_r2.name)); });
+    i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_Template, 2, 0);
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_Conditional_7_For_8_Conditional_5_Template, 3, 0, "div", 15);
     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, " ");
+    const cat_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("sb-group--collapsed", ctx_r2.isCollapsed("page:" + cat_r2.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);
+    i0.ɵɵattribute("aria-expanded", !ctx_r2.isCollapsed("page:" + cat_r2.name));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", 10);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("--chip", cat_r2.color);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", cat_r2.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.isCollapsed("page:" + cat_r2.name) ? 5 : -1);
 } }
-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);
+function PrismSidebarComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 8)(2, "span", 9);
+    i0.ɵɵelement(3, "prism-icon", 10);
+    i0.ɵɵtext(4, " Pages ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(7, PrismSidebarComponent_Conditional_7_For_8_Template, 6, 8, "div", 7, _forTrack0);
+    i0.ɵɵelementEnd();
 } 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));
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("size", 10);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.totalPages());
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.pageCategories());
 } }
-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);
+function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "span", 19);
+    i0.ɵɵelement(2, "prism-icon", 20);
+    i0.ɵɵtext(3, " Components ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const group_r3 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵrepeater(group_r3.categories);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", 10);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.stats().components);
 } }
-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);
+function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r3 = ctx.$implicit;
-    i0.ɵɵconditional(group_r3.name ? 0 : 1);
+    const item_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate((item_r9.data.meta.showcaseConfig.variants == null ? null : item_r9.data.meta.showcaseConfig.variants.length) ?? 0);
 } }
-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");
+function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_For_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onSelect(item_r9)); });
+    i0.ɵɵelement(1, "span", 25);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const variant_r11 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", variant_r11.name, " ");
 } }
-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);
+function PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_For_1_Template, 3, 1, "button", 23, _forTrack0);
+} if (rf & 2) {
+    const item_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater(item_r9.data.meta.showcaseConfig.variants);
+} }
+function PrismSidebarComponent_For_10_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_Conditional_5_For_2_Template_button_click_0_listener() { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onSelect(item_r9)); });
+    i0.ɵɵelement(1, "prism-icon", 21);
+    i0.ɵɵelementStart(2, "span", 18);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_4_Template, 2, 1, "span", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_10_Conditional_5_For_2_Conditional_5_Template, 2, 0);
 } if (rf & 2) {
-    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");
+    const item_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(item_r9));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", 12);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r9));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r12.kind === "page" ? 1 : -1);
+    i0.ɵɵconditional(item_r9.kind === "component" ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r4.itemLabel(item_r12), " ");
+    i0.ɵɵconditional(ctx_r2.isActive(item_r9) && item_r9.kind === "component" && (item_r9.data.meta.showcaseConfig.variants == null ? null : item_r9.data.meta.showcaseConfig.variants.length) ? 5 : -1);
 } }
-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);
+function PrismSidebarComponent_For_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_Conditional_5_For_2_Template, 6, 6, null, null, _forTrack1, true);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r10 = i0.ɵɵnextContext().cat;
-    i0.ɵɵrepeater(cat_r10.items);
+    const cat_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(cat_r7.items);
 } }
-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.ɵɵelementStart(2, "svg", 4);
-    i0.ɵɵelement(3, "path", 5);
-    i0.ɵɵelementEnd();
+function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "button", 12);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_Template_button_click_1_listener() { const cat_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse("comp:" + cat_r7.name)); });
+    i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_ng_template_3_Conditional_5_Template, 2, 0);
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_10_Conditional_5_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r10 = ctx.cat;
-    const nested_r13 = ctx.nested;
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("prism-sidebar__category--nested", nested_r13);
+    const cat_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("sb-group--collapsed", ctx_r2.isCollapsed("comp:" + cat_r7.name));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("prism-sidebar__category-title--nested", nested_r13);
+    i0.ɵɵattribute("aria-expanded", !ctx_r2.isCollapsed("comp:" + cat_r7.name));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded("cat:" + cat_r10.name, 0));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", cat_r10.name, " ");
+    i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r4.isExpanded("cat:" + cat_r10.name, 0) ? 5 : -1);
+    i0.ɵɵstyleProp("--chip", cat_r7.color);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", cat_r7.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.isCollapsed("comp:" + cat_r7.name) ? 5 : -1);
 } }
-const STORAGE_KEY = 'ng-prism-sidebar-expanded';
+const STORAGE_KEY = 'ng-prism-sidebar-collapsed';
+const CATEGORY_COLORS = {
+    'Data Display': '#f472b6',
+    Feedback: '#fbbf24',
+    Inputs: '#a78bfa',
+    Layout: '#34d399',
+    Navigation: '#60a5fa',
+    Overlay: '#c084fc',
+    Directives: '#ec4899',
+};
+function categoryColor(name) {
+    if (CATEGORY_COLORS[name])
+        return CATEGORY_COLORS[name];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++)
+        hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;
+    const hue = Math.abs(hash) % 360;
+    return `hsl(${hue}, 70%, 65%)`;
+}
 export class PrismSidebarComponent {
     navigationService = inject(PrismNavigationService);
-    expandedSet = signal(this.loadExpanded(), ...(ngDevMode ? [{ debugName: "expandedSet" }] : []));
-    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);
+    searchService = inject(PrismSearchService);
+    manifestService = inject(PrismManifestService);
+    collapsedSet = signal(this.loadCollapsed(), ...(ngDevMode ? [{ debugName: "collapsedSet" }] : []));
+    totalPages = computed(() => {
+        return this.searchService.filteredPages().length;
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    pageCategories = computed(() => {
+        const pages = this.searchService.filteredPages();
+        const catMap = new Map();
+        for (const page of pages) {
+            const cat = page.category ?? 'Docs';
+            const list = catMap.get(cat) ?? [];
+            list.push({ kind: 'page', data: page });
+            catMap.set(cat, list);
         }
+        return [...catMap.entries()].map(([name, items]) => ({
+            name,
+            color: categoryColor(name),
+            items,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "pageCategories" }] : []));
+    componentCategories = computed(() => {
+        const tree = this.navigationService.categoryTree();
         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 });
+        for (const [catName, items] of tree.entries()) {
+            const compItems = items.filter((i) => i.kind === 'component');
+            if (compItems.length === 0)
+                continue;
+            result.push({
+                name: catName,
+                color: categoryColor(catName),
+                items: compItems,
+            });
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
-    isExpanded(key, index) {
-        const set = this.expandedSet();
-        if (set.has(key))
-            return true;
-        if (set.has(`__collapsed:${key}`))
-            return false;
-        return index === 0;
+    }, ...(ngDevMode ? [{ debugName: "componentCategories" }] : []));
+    stats = computed(() => {
+        const manifest = this.manifestService.manifest();
+        const components = manifest.components.length;
+        const variants = manifest.components.reduce((sum, c) => sum + (c.meta.showcaseConfig.variants?.length ?? 0), 0);
+        return { components, variants };
+    }, ...(ngDevMode ? [{ debugName: "stats" }] : []));
+    isCollapsed(key) {
+        return this.collapsedSet().has(key);
     }
-    toggle(key, index) {
-        this.expandedSet.update(prev => {
+    toggleCollapse(key) {
+        this.collapsedSet.update((prev) => {
             const next = new Set(prev);
-            const collapsedKey = `__collapsed:${key}`;
-            if (next.has(key)) {
+            if (next.has(key))
                 next.delete(key);
-                next.add(collapsedKey);
-            }
-            else if (next.has(collapsedKey)) {
-                next.delete(collapsedKey);
+            else
                 next.add(key);
-            }
-            else if (index === 0) {
-                next.add(collapsedKey);
-            }
-            else {
-                next.add(key);
-            }
-            this.saveExpanded(next);
+            this.saveCollapsed(next);
             return next;
         });
     }
@@ -204,7 +263,7 @@ export class PrismSidebarComponent {
         if (!active || active.kind !== item.kind)
             return false;
         if (item.kind === 'component') {
-            return item.data.meta.className === active.data.meta.className;
+            return (item.data.meta.className === active.data.meta.className);
         }
         return item.data.title === active.data.title;
     }
@@ -216,7 +275,7 @@ export class PrismSidebarComponent {
             this.navigationService.selectPage(item.data);
         }
     }
-    loadExpanded() {
+    loadCollapsed() {
         try {
             const stored = localStorage.getItem(STORAGE_KEY);
             return stored ? new Set(JSON.parse(stored)) : new Set();
@@ -225,91 +284,146 @@ export class PrismSidebarComponent {
             return new Set();
         }
     }
-    saveExpanded(set) {
+    saveCollapsed(set) {
         try {
             localStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
         }
-        catch { /* ignore */ }
+        catch { }
     }
     static ɵfac = function PrismSidebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSidebarComponent)(); };
-    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);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 11, vars: 4, consts: [[1, "prism-sidebar"], [1, "sb-filter"], ["name", "search", 3, "size"], ["placeholder", "Filter components\u2026", 3, "input", "value"], [1, "sb-scroll"], [1, "sb-pinned"], [1, "sb-section-head"], [1, "sb-group", 3, "sb-group--collapsed"], [1, "sb-pinned-head"], [1, "sb-pinned-head-l"], ["name", "pin", 1, "sb-pinned-pin", 3, "size"], [1, "sb-group"], [1, "sb-group-head", 3, "click"], ["name", "chevron-down", 3, "size"], [1, "sb-group-chip"], [1, "sb-group-body"], [1, "sb-item", 3, "sb-item--active"], [1, "sb-item", 3, "click"], [1, "sb-item-name"], [1, "sb-section-head-l"], ["name", "box", 1, "sb-section-icon", 3, "size"], ["name", "box", 1, "sb-item-icon", 3, "size"], [1, "sb-item-count"], [1, "sb-sub"], [1, "sb-sub", 3, "click"], [1, "sb-sub-dot"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "nav", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "prism-icon", 2);
+            i0.ɵɵelementStart(3, "input", 3);
+            i0.ɵɵlistener("input", function PrismSidebarComponent_Template_input_input_3_listener($event) { return ctx.searchService.search($event.target.value); });
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "kbd");
+            i0.ɵɵtext(5, "/");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 4);
+            i0.ɵɵconditionalCreate(7, PrismSidebarComponent_Conditional_7_Template, 9, 2, "div", 5);
+            i0.ɵɵconditionalCreate(8, PrismSidebarComponent_Conditional_8_Template, 6, 2, "div", 6);
+            i0.ɵɵrepeaterCreate(9, PrismSidebarComponent_For_10_Template, 6, 8, "div", 7, _forTrack0);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("size", 12);
             i0.ɵɵadvance();
-            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    }"] });
+            i0.ɵɵproperty("value", ctx.searchService.query());
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.pageCategories().length > 0 ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.componentCategories().length > 0 ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.componentCategories());
+        } }, dependencies: [PrismIconComponent], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .sb-filter[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 12px;\n      padding: 0 10px;\n      height: 30px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      color: var(--prism-text-muted);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n      font-family: var(--font-sans);\n    }\n    .sb-filter[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--prism-text-muted); }\n    .sb-filter[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n    .sb-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned[_ngcontent-%COMP%] {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--prism-border);\n      border-top: 1px solid var(--prism-border);\n    }\n    .sb-section-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon[_ngcontent-%COMP%] { color: var(--prism-primary); }\n    .sb-pinned-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n    }\n    .sb-pinned-head-l[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin[_ngcontent-%COMP%] { color: var(--prism-accent); }\n\n    .sb-group[_ngcontent-%COMP%] { margin-bottom: 4px; }\n    .sb-group-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] {\n      transition: transform var(--dur-fast);\n      color: var(--prism-text-ghost);\n    }\n    .sb-group--collapsed[_ngcontent-%COMP%]   .sb-group-head[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { transform: rotate(-90deg); }\n\n    .sb-group-chip[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--chip, var(--prism-primary));\n      box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n    }\n\n    .sb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--dur-fast), color var(--dur-fast);\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n      color: var(--prism-text);\n    }\n    .sb-item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .sb-item--active[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n    }\n    .sb-item-icon[_ngcontent-%COMP%] { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .sb-item-count[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border-radius: 3px;\n      background: var(--prism-input-bg);\n    }\n    .sb-item--active[_ngcontent-%COMP%]   .sb-item-count[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n    }\n\n    .sb-sub[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding-left: 44px;\n      height: 24px;\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-sub[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .sb-sub-dot[_ngcontent-%COMP%] {\n      width: 4px;\n      height: 4px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-sidebar', standalone: true, imports: [NgTemplateOutlet], template: `
+        args: [{ selector: 'prism-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent], template: `
     <nav class="prism-sidebar">
-      @for (group of groups(); track group.name ?? '__ungrouped'; let gi = $index) {
-        @if (group.name) {
-          <div class="prism-sidebar__group">
+      <div class="sb-filter">
+        <prism-icon name="search" [size]="12" />
+        <input
+          placeholder="Filter components…"
+          [value]="searchService.query()"
+          (input)="searchService.search($any($event.target).value)"
+        />
+        <kbd>/</kbd>
+      </div>
+
+      <div class="sb-scroll">
+        @if (pageCategories().length > 0) {
+        <div class="sb-pinned">
+          <div class="sb-pinned-head">
+            <span class="sb-pinned-head-l">
+              <prism-icon name="pin" [size]="10" class="sb-pinned-pin" />
+              Pages
+            </span>
+            <span>{{ totalPages() }}</span>
+          </div>
+          @for (cat of pageCategories(); track cat.name) {
+          <div
+            class="sb-group"
+            [class.sb-group--collapsed]="isCollapsed('page:' + cat.name)"
+          >
             <button
-              class="prism-sidebar__group-title"
-              (click)="toggle('group:' + group.name, gi)"
+              class="sb-group-head"
+              (click)="toggleCollapse('page:' + cat.name)"
+              [attr.aria-expanded]="!isCollapsed('page:' + cat.name)"
             >
-              <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 }}
+              <prism-icon name="chevron-down" [size]="10" />
+              <span class="sb-group-chip" [style.--chip]="cat.color"></span>
+              {{ cat.name }}
             </button>
-            @if (isExpanded('group:' + group.name, gi)) {
-              @for (cat of group.categories; track cat.name) {
-                <ng-container *ngTemplateOutlet="categoryTpl; context: { cat, nested: true }" />
+            @if (!isCollapsed('page:' + cat.name)) {
+            <div class="sb-group-body">
+              @for (item of cat.items; track itemKey(item)) {
+              <button
+                class="sb-item"
+                [class.sb-item--active]="isActive(item)"
+                (click)="onSelect(item)"
+              >
+                <span class="sb-item-name">{{ itemLabel(item) }}</span>
+              </button>
               }
+            </div>
             }
           </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">
+        </div>
+        } @if (componentCategories().length > 0) {
+        <div class="sb-section-head">
+          <span class="sb-section-head-l">
+            <prism-icon name="box" [size]="10" class="sb-section-icon" />
+            Components
+          </span>
+          <span>{{ stats().components }}</span>
+        </div>
+        } @for (cat of componentCategories(); track cat.name) {
+        <div
+          class="sb-group"
+          [class.sb-group--collapsed]="isCollapsed('comp:' + cat.name)"
+        >
           <button
-            class="prism-sidebar__category-title"
-            [class.prism-sidebar__category-title--nested]="nested"
-            (click)="toggle('cat:' + cat.name, 0)"
+            class="sb-group-head"
+            (click)="toggleCollapse('comp:' + cat.name)"
+            [attr.aria-expanded]="!isCollapsed('comp:' + cat.name)"
           >
-            <svg
-              class="prism-sidebar__chevron"
-              [class.prism-sidebar__chevron--expanded]="isExpanded('cat:' + cat.name, 0)"
-              viewBox="0 0 16 16"
-            >
-              <path d="M6 4l4 4-4 4"/>
-            </svg>
+            <prism-icon name="chevron-down" [size]="10" />
+            <span class="sb-group-chip" [style.--chip]="cat.color"></span>
             {{ cat.name }}
           </button>
-          @if (isExpanded('cat:' + cat.name, 0)) {
+          @if (!isCollapsed('comp:' + cat.name)) {
+          <div class="sb-group-body">
             @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)"
-              >
-                @if (item.kind === 'page') {
-                  <span class="prism-sidebar__page-icon">◈</span>
-                }
-                {{ itemLabel(item) }}
-              </button>
-            }
+            <button
+              class="sb-item"
+              [class.sb-item--active]="isActive(item)"
+              (click)="onSelect(item)"
+            >
+              <prism-icon name="box" [size]="12" class="sb-item-icon" />
+              <span class="sb-item-name">{{ itemLabel(item) }}</span>
+              @if (item.kind === 'component') {
+              <span class="sb-item-count">{{
+                item.data.meta.showcaseConfig.variants?.length ?? 0
+              }}</span>
+              }
+            </button>
+            @if (isActive(item) && item.kind === 'component' &&
+            item.data.meta.showcaseConfig.variants?.length) { @for (variant of
+            item.data.meta.showcaseConfig.variants; track variant.name) {
+            <button class="sb-sub" (click)="onSelect(item)">
+              <span class="sb-sub-dot"></span>
+              {{ variant.name }}
+            </button>
+            } } }
+          </div>
           }
         </div>
-      </ng-template>
+        }
+      </div>
     </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__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  "] }]
+  `, styles: ["\n    .prism-sidebar {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 0;\n      overflow: hidden;\n    }\n\n    .sb-filter {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 12px;\n      padding: 0 10px;\n      height: 30px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      color: var(--prism-text-muted);\n    }\n    .sb-filter input {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border: 0;\n      outline: none;\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n      font-family: var(--font-sans);\n    }\n    .sb-filter input::placeholder { color: var(--prism-text-muted); }\n    .sb-filter kbd {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border: 1px solid var(--prism-border);\n      border-radius: 3px;\n    }\n\n    .sb-scroll {\n      flex: 1;\n      overflow-y: auto;\n      padding: 10px 0 16px;\n      padding-top: 0;\n    }\n    .sb-scroll::-webkit-scrollbar { width: 8px; }\n    .sb-scroll::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 4px; }\n    .sb-scroll::-webkit-scrollbar-track { background: transparent; }\n\n    .sb-pinned {\n      padding: 0 0 10px;\n      margin-bottom: 4px;\n      border-bottom: 1px solid var(--prism-border);\n      border-top: 1px solid var(--prism-border);\n    }\n    .sb-section-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      margin-top: 6px;\n    }\n    .sb-section-head-l { display: flex; align-items: center; gap: 6px; }\n    .sb-section-icon { color: var(--prism-primary); }\n    .sb-pinned-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 14px 6px;\n      margin-top: 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n    }\n    .sb-pinned-head-l { display: flex; align-items: center; gap: 6px; }\n    .sb-pinned-pin { color: var(--prism-accent); }\n\n    .sb-group { margin-bottom: 4px; }\n    .sb-group-head {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 8px 14px 6px;\n      font-size: 10.5px;\n      font-weight: 700;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n      color: var(--prism-text-ghost);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-group-head prism-icon {\n      transition: transform var(--dur-fast);\n      color: var(--prism-text-ghost);\n    }\n    .sb-group--collapsed .sb-group-head prism-icon { transform: rotate(-90deg); }\n\n    .sb-group-chip {\n      width: 6px;\n      height: 6px;\n      border-radius: 2px;\n      background: var(--chip, var(--prism-primary));\n      box-shadow: 0 0 6px var(--chip, var(--prism-primary));\n    }\n\n    .sb-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      height: 30px;\n      padding: 0 14px 0 28px;\n      font-size: 13px;\n      color: var(--prism-text-2);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      position: relative;\n      transition: background var(--dur-fast), color var(--dur-fast);\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 5%, transparent);\n      color: var(--prism-text);\n    }\n    .sb-item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .sb-item--active::before {\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n    }\n    .sb-item-icon { flex: 0 0 12px; opacity: 0.7; }\n    .sb-item-name {\n      flex: 1;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .sb-item-count {\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      padding: 1px 5px;\n      border-radius: 3px;\n      background: var(--prism-input-bg);\n    }\n    .sb-item--active .sb-item-count {\n      color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n    }\n\n    .sb-sub {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding-left: 44px;\n      height: 24px;\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border: none;\n      border-left: 2px solid transparent;\n      background: none;\n      text-align: left;\n      font-family: var(--font-sans);\n    }\n    .sb-sub:hover { color: var(--prism-text-2); }\n    .sb-sub-dot {\n      width: 4px;\n      height: 4px;\n      border-radius: 50%;\n      background: currentColor;\n    }\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 237 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 358 }); })();