@ng-prism/core 22.0.1 → 22.1.1

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

@@ -2,6 +2,30 @@ import { computed, inject, Injectable, signal } from '@angular/core';
 import { PrismManifestService } from './prism-manifest.service.js';
 import { PrismSearchService } from './prism-search.service.js';
 import * as i0 from "@angular/core";
+const DEFAULT_SECTION_ORDER = {
+    Components: 0,
+    Directives: 10,
+};
+const SECTION_TIEBREAK = ['Components', 'Directives'];
+export function resolveSection(c) {
+    if (c.showcaseConfig.section)
+        return c.showcaseConfig.section;
+    return c.componentMeta.isDirective ? 'Directives' : 'Components';
+}
+function defaultSectionOrder(name) {
+    return DEFAULT_SECTION_ORDER[name] ?? 100;
+}
+function sectionTiebreak(a, b) {
+    const ia = SECTION_TIEBREAK.indexOf(a);
+    const ib = SECTION_TIEBREAK.indexOf(b);
+    if (ia !== -1 && ib !== -1)
+        return ia - ib;
+    if (ia !== -1)
+        return -1;
+    if (ib !== -1)
+        return 1;
+    return a.localeCompare(b);
+}
 export class PrismNavigationService {
     searchService = inject(PrismSearchService);
     manifestService = inject(PrismManifestService);
@@ -25,55 +49,66 @@ export class PrismNavigationService {
         return relinked ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activePage" }] : /* istanbul ignore next */ []));
-    categoryTree = computed(() => {
-        const map = new Map();
-        for (const comp of this.searchService.filteredComponents()) {
-            const cat = comp.meta.showcaseConfig.category ?? 'Uncategorized';
-            const list = map.get(cat) ?? [];
-            list.push({ kind: 'component', data: comp });
-            map.set(cat, list);
-        }
-        for (const page of this.searchService.filteredPages()) {
-            const cat = page.category ?? 'Uncategorized';
-            const list = map.get(cat) ?? [];
-            list.push({ kind: 'page', data: page });
-            map.set(cat, list);
+    sectionTree = computed(() => {
+        const comps = this.searchService.filteredComponents();
+        const sections = new Map();
+        const sectionOrders = new Map();
+        for (const comp of comps) {
+            const section = resolveSection(comp.meta);
+            const category = comp.meta.showcaseConfig.category ?? 'Uncategorized';
+            const catMap = sections.get(section) ?? new Map();
+            const items = catMap.get(category) ?? [];
+            items.push({ kind: 'component', data: comp });
+            catMap.set(category, items);
+            sections.set(section, catMap);
+            const explicit = comp.meta.showcaseConfig.sectionOrder;
+            const current = sectionOrders.get(section);
+            if (explicit !== undefined) {
+                sectionOrders.set(section, current === undefined ? explicit : Math.min(current, explicit));
+            }
         }
-        for (const items of map.values()) {
-            items.sort((a, b) => {
-                const orderA = a.kind === 'component'
-                    ? a.data.meta.showcaseConfig.componentOrder ?? Infinity
-                    : a.data.order ?? Infinity;
-                const orderB = b.kind === 'component'
-                    ? b.data.meta.showcaseConfig.componentOrder ?? Infinity
-                    : b.data.order ?? Infinity;
-                if (orderA !== orderB)
-                    return orderA - orderB;
-                const labelA = a.kind === 'component'
-                    ? a.data.meta.showcaseConfig.title
-                    : a.data.title;
-                const labelB = b.kind === 'component'
-                    ? b.data.meta.showcaseConfig.title
-                    : b.data.title;
-                return labelA.localeCompare(labelB);
+        const result = [];
+        for (const [name, catMap] of sections.entries()) {
+            const order = sectionOrders.get(name) ?? defaultSectionOrder(name);
+            const categories = [];
+            for (const [catName, items] of catMap.entries()) {
+                items.sort((a, b) => {
+                    const oa = a.kind === 'component'
+                        ? a.data.meta.showcaseConfig.componentOrder ?? Infinity
+                        : Infinity;
+                    const ob = b.kind === 'component'
+                        ? b.data.meta.showcaseConfig.componentOrder ?? Infinity
+                        : Infinity;
+                    if (oa !== ob)
+                        return oa - ob;
+                    const la = a.kind === 'component' ? a.data.meta.showcaseConfig.title : '';
+                    const lb = b.kind === 'component' ? b.data.meta.showcaseConfig.title : '';
+                    return la.localeCompare(lb);
+                });
+                categories.push({ name: catName, items });
+            }
+            categories.sort((a, b) => {
+                const oa = Math.min(...a.items.map((i) => i.kind === 'component'
+                    ? i.data.meta.showcaseConfig.categoryOrder ?? Infinity
+                    : Infinity));
+                const ob = Math.min(...b.items.map((i) => i.kind === 'component'
+                    ? i.data.meta.showcaseConfig.categoryOrder ?? Infinity
+                    : Infinity));
+                if (oa !== ob)
+                    return oa - ob;
+                return a.name.localeCompare(b.name);
             });
+            const totalCount = categories.reduce((sum, c) => sum + c.items.length, 0);
+            result.push({ name, order, totalCount, categories });
         }
-        const sorted = [...map.entries()].sort(([catA, itemsA], [catB, itemsB]) => {
-            const catOrders = itemsA.map((i) => i.kind === 'component'
-                ? i.data.meta.showcaseConfig.categoryOrder ?? Infinity
-                : i.data.categoryOrder ?? Infinity);
-            const orderA = Math.min(...catOrders);
-            const catOrdersB = itemsB.map((i) => i.kind === 'component'
-                ? i.data.meta.showcaseConfig.categoryOrder ?? Infinity
-                : i.data.categoryOrder ?? Infinity);
-            const orderB = Math.min(...catOrdersB);
-            if (orderA !== orderB)
-                return orderA - orderB;
-            return catA.localeCompare(catB);
+        result.sort((a, b) => {
+            if (a.order !== b.order)
+                return a.order - b.order;
+            return sectionTiebreak(a.name, b.name);
         });
-        return new Map(sorted);
+        return result;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryTree" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "sectionTree" }] : /* istanbul ignore next */ []));
     select(comp) {
         this.activeItem.set({ kind: 'component', data: comp });
     }

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

@@ -11,14 +11,22 @@ interface SidebarCategory {
 export declare class PrismSidebarComponent {
     protected readonly navigationService: PrismNavigationService;
     protected readonly searchService: PrismSearchService;
-    private readonly manifestService;
     private readonly filterInput;
     protected onGlobalKey(e: KeyboardEvent): void;
     private readonly collapsedSet;
     protected readonly totalPages: import("@angular/core").Signal<number>;
     protected readonly pageCategories: import("@angular/core").Signal<SidebarCategory[]>;
-    protected readonly componentCategories: import("@angular/core").Signal<SidebarCategory[]>;
-    protected readonly totalComponents: import("@angular/core").Signal<number>;
+    protected readonly componentSections: import("@angular/core").Signal<{
+        name: string;
+        icon: string;
+        color: string;
+        totalCount: number;
+        categories: {
+            name: string;
+            color: string;
+            items: NavigationItem[];
+        }[];
+    }[]>;
     protected isCollapsed(key: string): boolean;
     protected toggleCollapse(key: string): void;
     protected itemKey(item: NavigationItem): string;

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":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAuBzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBAkTa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAGtF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAQ7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,mBAAmB,oDAanC;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,yCAEhC;IAEF,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI;IAO1D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA3HV,qBAAqB;2CAArB,qBAAqB;CAgIjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAiCzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBA0Ta,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAC6B;IAGzD,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAa7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;;;;;;;;SAYjC;IAEH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI;IAO1D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA3HV,qBAAqB;2CAArB,qBAAqB;CAgIjC"}

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

@@ -2,7 +2,6 @@ import { Component, computed, inject, signal, viewChild, HostListener, ChangeDet
 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 = ["filterInput"];
 const _forTrack0 = ($index, $item) => $item.name;
@@ -10,9 +9,9 @@ function _forTrack1($index, $item) { /* @ts-ignore */
 return this.itemKey($item); }
 function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵelementStart(0, "button", 17);
     i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_8_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", 19);
+    i0.ɵɵelementStart(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -23,8 +22,8 @@ function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template(
     i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r5));
 } }
 function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template, 3, 3, "button", 17, _forTrack1, true);
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_For_2_Template, 3, 3, "button", 16, _forTrack1, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r2 = i0.ɵɵnextContext().$implicit;
@@ -33,12 +32,12 @@ function PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template(rf, ct
 } }
 function PrismSidebarComponent_Conditional_8_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
+    i0.ɵɵelementStart(0, "div", 11)(1, "button", 12);
     i0.ɵɵlistener("click", function PrismSidebarComponent_Conditional_8_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", 14)(3, "span", 15);
+    i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template, 3, 0, "div", 16);
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_Conditional_8_For_8_Conditional_5_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r2 = ctx.$implicit;
@@ -56,14 +55,14 @@ function PrismSidebarComponent_Conditional_8_For_8_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(!ctx_r2.isCollapsed("page:" + cat_r2.name) ? 5 : -1);
 } }
 function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 9)(2, "span", 10);
-    i0.ɵɵelement(3, "prism-icon", 11);
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "span", 8);
+    i0.ɵɵelement(3, "prism-icon", 9);
     i0.ɵɵtext(4, " Pages ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(7, PrismSidebarComponent_Conditional_8_For_8_Template, 6, 8, "div", 8, _forTrack0);
+    i0.ɵɵrepeaterCreate(7, PrismSidebarComponent_Conditional_8_For_8_Template, 6, 8, "div", 10, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -74,74 +73,60 @@ function PrismSidebarComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.pageCategories());
 } }
-function PrismSidebarComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7)(1, "span", 20);
-    i0.ɵɵelement(2, "prism-icon", 21);
-    i0.ɵɵtext(3, " Components ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("size", 10);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.totalComponents());
-} }
-function PrismSidebarComponent_For_11_Conditional_7_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵelement(1, "span", 26);
     i0.ɵɵelementEnd();
 } }
-function PrismSidebarComponent_For_11_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 18);
-    i0.ɵɵlistener("click", function PrismSidebarComponent_For_11_Conditional_7_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)); });
+function PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Template_button_click_0_listener() { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onSelect(item_r10)); });
     i0.ɵɵelement(1, "prism-icon", 24);
-    i0.ɵɵelementStart(2, "span", 19);
+    i0.ɵɵelementStart(2, "span", 18);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_11_Conditional_7_For_2_Conditional_4_Template, 2, 0, "span", 25);
+    i0.ɵɵconditionalCreate(4, PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Conditional_4_Template, 2, 0, "span", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r9 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(item_r9))("sb-item--deprecated", ctx_r2.itemStatus(item_r9) === "deprecated");
-    i0.ɵɵattribute("title", ctx_r2.itemTooltip(item_r9));
+    const item_r10 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("sb-item--active", ctx_r2.isActive(item_r10))("sb-item--deprecated", ctx_r2.itemStatus(item_r10) === "deprecated");
+    i0.ɵɵattribute("title", ctx_r2.itemTooltip(item_r10));
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 12);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r9));
+    i0.ɵɵtextInterpolate(ctx_r2.itemLabel(item_r10));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.itemStatus(item_r9) === "wip" ? 4 : -1);
+    i0.ɵɵconditional(ctx_r2.itemStatus(item_r10) === "wip" ? 4 : -1);
 } }
-function PrismSidebarComponent_For_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_11_Conditional_7_For_2_Template, 5, 8, "button", 23, _forTrack1, true);
+function PrismSidebarComponent_For_10_For_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_10_For_7_Conditional_7_For_2_Template, 5, 8, "button", 23, _forTrack1, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r7 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(cat_r7.items);
 } }
-function PrismSidebarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+function PrismSidebarComponent_For_10_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
-    i0.ɵɵlistener("click", function PrismSidebarComponent_For_11_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", 14)(3, "span", 15);
+    i0.ɵɵelementStart(0, "div", 11)(1, "button", 12);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_10_For_7_Template_button_click_1_listener() { const cat_r7 = i0.ɵɵrestoreView(_r6).$implicit; const section_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse("sec:" + section_r8.name + ":" + cat_r7.name)); });
+    i0.ɵɵelement(2, "prism-icon", 13)(3, "span", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementStart(5, "span", 22);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, PrismSidebarComponent_For_11_Conditional_7_Template, 3, 0, "div", 16);
+    i0.ɵɵconditionalCreate(7, PrismSidebarComponent_For_10_For_7_Conditional_7_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const cat_r7 = ctx.$implicit;
+    const section_r8 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("sb-group--collapsed", ctx_r2.isCollapsed("comp:" + cat_r7.name));
+    i0.ɵɵclassProp("sb-group--collapsed", ctx_r2.isCollapsed("sec:" + section_r8.name + ":" + cat_r7.name));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-expanded", !ctx_r2.isCollapsed("comp:" + cat_r7.name));
+    i0.ɵɵattribute("aria-expanded", !ctx_r2.isCollapsed("sec:" + section_r8.name + ":" + cat_r7.name));
     i0.ɵɵadvance();
     i0.ɵɵproperty("size", 10);
     i0.ɵɵadvance();
@@ -151,7 +136,27 @@ function PrismSidebarComponent_For_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(cat_r7.items.length);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.isCollapsed("comp:" + cat_r7.name) ? 7 : -1);
+    i0.ɵɵconditional(!ctx_r2.isCollapsed("sec:" + section_r8.name + ":" + cat_r7.name) ? 7 : -1);
+} }
+function PrismSidebarComponent_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
+    i0.ɵɵelement(2, "prism-icon", 21);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(6, PrismSidebarComponent_For_10_For_7_Template, 8, 9, "div", 10, _forTrack0);
+} if (rf & 2) {
+    const section_r8 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("name", section_r8.icon)("size", 10);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", section_r8.name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(section_r8.totalCount);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(section_r8.categories);
 } }
 const STORAGE_KEY = 'ng-prism-sidebar-collapsed';
 const CATEGORY_COLORS = {
@@ -163,6 +168,14 @@ const CATEGORY_COLORS = {
     Overlay: '#c084fc',
     Directives: '#ec4899',
 };
+const SECTION_ICONS = {
+    Components: 'box',
+    Directives: 'zap',
+};
+const DEFAULT_SECTION_ICON = 'box-select';
+function sectionIcon(name) {
+    return SECTION_ICONS[name] ?? DEFAULT_SECTION_ICON;
+}
 function categoryColor(name) {
     if (CATEGORY_COLORS[name])
         return CATEGORY_COLORS[name];
@@ -175,14 +188,15 @@ function categoryColor(name) {
 export class PrismSidebarComponent {
     navigationService = inject(PrismNavigationService);
     searchService = inject(PrismSearchService);
-    manifestService = inject(PrismManifestService);
     filterInput = viewChild('filterInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
     onGlobalKey(e) {
         if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey)
             return;
         const tag = e.target.tagName;
-        if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable)
+        if (tag === 'INPUT' ||
+            tag === 'TEXTAREA' ||
+            e.target.isContentEditable)
             return;
         e.preventDefault();
         this.filterInput()?.nativeElement.focus();
@@ -209,24 +223,20 @@ export class PrismSidebarComponent {
         }));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageCategories" }] : /* istanbul ignore next */ []));
-    componentCategories = computed(() => {
-        const tree = this.navigationService.categoryTree();
-        const result = [];
-        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;
+    componentSections = computed(() => {
+        return this.navigationService.sectionTree().map((section) => ({
+            name: section.name,
+            icon: sectionIcon(section.name),
+            color: categoryColor(section.name),
+            totalCount: section.totalCount,
+            categories: section.categories.map((cat) => ({
+                name: cat.name,
+                color: categoryColor(cat.name),
+                items: cat.items,
+            })),
+        }));
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "componentCategories" }] : /* istanbul ignore next */ []));
-    totalComponents = computed(() => this.manifestService.manifest().components.length, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "totalComponents" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "componentSections" }] : /* istanbul ignore next */ []));
     isCollapsed(key) {
         return this.collapsedSet().has(key);
     }
@@ -303,7 +313,7 @@ export class PrismSidebarComponent {
             i0.ɵɵqueryAdvance();
         } }, hostBindings: function PrismSidebarComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function PrismSidebarComponent_keydown_HostBindingHandler($event) { return ctx.onGlobalKey($event); }, i0.ɵɵresolveDocument);
-        } }, decls: 12, vars: 4, consts: [["filterInput", ""], [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"], [1, "sb-group-count"], [1, "sb-item", 3, "sb-item--active", "sb-item--deprecated"], ["name", "box", 1, "sb-item-icon", 3, "size"], ["title", "Work in progress", 1, "sb-item-status"], [1, "sb-item-status-dot"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 11, vars: 3, consts: [["filterInput", ""], [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-pinned-head"], [1, "sb-pinned-head-l"], ["name", "pin", 1, "sb-pinned-pin", 3, "size"], [1, "sb-group", 3, "sb-group--collapsed"], [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"], [1, "sb-section-head-l"], [1, "sb-section-icon", 3, "name", "size"], [1, "sb-group-count"], [1, "sb-item", 3, "sb-item--active", "sb-item--deprecated"], ["name", "box", 1, "sb-item-icon", 3, "size"], ["title", "Work in progress", 1, "sb-item-status"], [1, "sb-item-status-dot"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "nav", 1)(1, "div", 2);
             i0.ɵɵelement(2, "prism-icon", 3);
             i0.ɵɵelementStart(3, "input", 4, 0);
@@ -314,8 +324,7 @@ export class PrismSidebarComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(7, "div", 5);
             i0.ɵɵconditionalCreate(8, PrismSidebarComponent_Conditional_8_Template, 9, 2, "div", 6);
-            i0.ɵɵconditionalCreate(9, PrismSidebarComponent_Conditional_9_Template, 6, 2, "div", 7);
-            i0.ɵɵrepeaterCreate(10, PrismSidebarComponent_For_11_Template, 8, 9, "div", 8, _forTrack0);
+            i0.ɵɵrepeaterCreate(9, PrismSidebarComponent_For_10_Template, 8, 4, null, null, _forTrack0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -325,9 +334,7 @@ export class PrismSidebarComponent {
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.pageCategories().length > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.componentCategories().length > 0 ? 9 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.componentCategories());
+            i0.ɵɵrepeater(ctx.componentSections());
         } }, 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    .sb-group-count[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\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\n    .sb-item-status[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n    }\n    .sb-item-status-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-warn);\n    }\n\n    .sb-item--deprecated[_ngcontent-%COMP%]   .sb-item-name[_ngcontent-%COMP%] {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    [_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
@@ -385,30 +392,38 @@ export class PrismSidebarComponent {
           </div>
           }
         </div>
-        } @if (componentCategories().length > 0) {
+        } @for (section of componentSections(); track section.name) {
         <div class="sb-section-head">
           <span class="sb-section-head-l">
-            <prism-icon name="box" [size]="10" class="sb-section-icon" />
-            Components
+            <prism-icon
+              [name]="section.icon"
+              [size]="10"
+              class="sb-section-icon"
+            />
+            {{ section.name }}
           </span>
-          <span>{{ totalComponents() }}</span>
+          <span>{{ section.totalCount }}</span>
         </div>
-        } @for (cat of componentCategories(); track cat.name) {
+        @for (cat of section.categories; track cat.name) {
         <div
           class="sb-group"
-          [class.sb-group--collapsed]="isCollapsed('comp:' + cat.name)"
+          [class.sb-group--collapsed]="
+            isCollapsed('sec:' + section.name + ':' + cat.name)
+          "
         >
           <button
             class="sb-group-head"
-            (click)="toggleCollapse('comp:' + cat.name)"
-            [attr.aria-expanded]="!isCollapsed('comp:' + cat.name)"
+            (click)="toggleCollapse('sec:' + section.name + ':' + cat.name)"
+            [attr.aria-expanded]="
+              !isCollapsed('sec:' + section.name + ':' + cat.name)
+            "
           >
             <prism-icon name="chevron-down" [size]="10" />
             <span class="sb-group-chip" [style.--chip]="cat.color"></span>
             {{ cat.name }}
             <span class="sb-group-count">{{ cat.items.length }}</span>
           </button>
-          @if (!isCollapsed('comp:' + cat.name)) {
+          @if (!isCollapsed('sec:' + section.name + ':' + cat.name)) {
           <div class="sb-group-body">
             @for (item of cat.items; track itemKey(item)) {
             <button
@@ -430,7 +445,7 @@ export class PrismSidebarComponent {
           </div>
           }
         </div>
-        }
+        } }
       </div>
     </nav>
   `, 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    .sb-group-count {\n      margin-left: auto;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      color: var(--prism-text-ghost);\n      font-weight: 500;\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\n    .sb-item-status {\n      flex: 0 0 auto;\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n    }\n    .sb-item-status-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-warn);\n    }\n\n    .sb-item--deprecated .sb-item-name {\n      text-decoration: line-through;\n      text-decoration-thickness: 1px;\n      color: var(--prism-text-ghost);\n      opacity: 0.7;\n    }\n\n\n    :focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 2px;\n    }\n  "] }]
@@ -438,4 +453,4 @@ export class PrismSidebarComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 351 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 368 }); })();

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

@@ -1,6 +1,7 @@
 export interface ParsedHost {
     tag: string;
     attrs: string;
+    content?: string;
 }
 export declare function parseHostString(host: string): ParsedHost | null;
 //# sourceMappingURL=host-parser.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"host-parser.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/host-parser.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAS/D"}
+{"version":3,"file":"host-parser.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/host-parser.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA4B/D"}

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

@@ -1,9 +1,20 @@
 export function parseHostString(host) {
     const trimmed = host.trim();
-    const match = trimmed.match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
-    if (!match)
-        return null;
-    const tag = match[1];
-    const attrs = match[2].trim();
-    return { tag, attrs };
+    const open = trimmed.match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
+    if (open) {
+        return { tag: open[1], attrs: open[2].trim() };
+    }
+    const wrapped = trimmed.match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*>([\s\S]*?)<\/\s*\1\s*>$/);
+    if (wrapped) {
+        return {
+            tag: wrapped[1],
+            attrs: wrapped[2].trim(),
+            content: wrapped[3],
+        };
+    }
+    if (trimmed.length > 0) {
+        console.warn(`[ng-prism] @Showcase host="${host}" could not be parsed and will fall back to <div>. ` +
+            `Supported forms: "<tag>", "<tag attrs>", "<tag />", or "<tag>text</tag>".`);
+    }
+    return null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAIjE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAiID,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,sBAAsB,GAC9B,MAAM,CAmFR"}
+{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAIjE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAqID,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,sBAAsB,GAC9B,MAAM,CAmFR"}

package/dist/builder/manifest/runtime-manifest.generator.js

@@ -51,10 +51,12 @@ function generateWrapperClass(comp) {
     let tag;
     let attrs;
     let importsArray;
+    let hostContentDefault = '';
     if (typeof host === 'string') {
         const parsed = parseHostString(host);
         tag = parsed?.tag ?? 'div';
         attrs = parsed?.attrs ? ` ${parsed.attrs}` : '';
+        hostContentDefault = parsed?.content ?? '';
         importsArray = `[${comp.className}]`;
     }
     else if (host && typeof host === 'object') {
@@ -85,7 +87,7 @@ function generateWrapperClass(comp) {
     for (const o of comp.outputs) {
         members.push(`  ${o.name} = output();`);
     }
-    members.push(`  __prismContent__ = input('');`);
+    members.push(`  __prismContent__ = input(${JSON.stringify(hostContentDefault)});`);
     const lines = [
         `@Component({`,
         `  standalone: true,`,