@ng-prism/core 22.0.1 → 22.1.0

package/dist/app/renderer/known-inputs.d.ts

@@ -0,0 +1,9 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+/** Synthetic input the manifest generator emits on directive wrapper classes
+ * to project per-variant `content` text into the host element. The directive
+ * itself doesn't declare it, so it isn't in `meta.inputs` — code that
+ * validates / filters inputs against that list must allow this key through.
+ */
+export declare const PRISM_CONTENT_INPUT = "__prismContent__";
+export declare function buildKnownInputs(comp: RuntimeComponent): Set<string>;
+//# sourceMappingURL=known-inputs.d.ts.map

package/dist/app/renderer/known-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"known-inputs.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/known-inputs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC,CAMpE"}

package/dist/app/renderer/known-inputs.js

@@ -0,0 +1,13 @@
+/** Synthetic input the manifest generator emits on directive wrapper classes
+ * to project per-variant `content` text into the host element. The directive
+ * itself doesn't declare it, so it isn't in `meta.inputs` — code that
+ * validates / filters inputs against that list must allow this key through.
+ */
+export const PRISM_CONTENT_INPUT = '__prismContent__';
+export function buildKnownInputs(comp) {
+    const known = new Set(comp.meta.inputs.map((i) => i.name));
+    if (comp.meta.componentMeta.isDirective) {
+        known.add(PRISM_CONTENT_INPUT);
+    }
+    return known;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBA8Ia,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCA9OJ,sBAAsB;2CAAtB,sBAAsB;CA4PlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAKhF,qBA8Ia,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,wFAAwF;IACxF,SAAS,CAAC,QAAQ,CAAC,WAAW,gDAQ3B;IACH,6GAA6G;IAC7G,SAAS,CAAC,QAAQ,CAAC,YAAY,4FAU5B;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCA9OJ,sBAAsB;2CAAtB,sBAAsB;CA4PlC"}

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

@@ -12,6 +12,7 @@ import { PrismCanvasService } from '../services/prism-canvas.service.js';
 import { PrismVariantBgService } from '../services/prism-variant-bg.service.js';
 import { PrismCanvasRulersComponent } from '../canvas/prism-canvas-rulers.component.js';
 import { PrismCanvasBgPillComponent } from '../canvas/prism-canvas-bg-pill.component.js';
+import { buildKnownInputs } from './known-inputs.js';
 import * as i0 from "@angular/core";
 const _c0 = ["outlet"];
 function PrismRendererComponent_Conditional_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
@@ -104,7 +105,7 @@ export class PrismRendererComponent {
                 return;
             }
             performance.mark('prism:rerender:start');
-            const knownInputs = new Set(comp.meta.inputs.map((i) => i.name));
+            const knownInputs = buildKnownInputs(comp);
             for (const [key, value] of Object.entries(inputs)) {
                 if (!knownInputs.has(key)) {
                     console.warn(`[ng-prism] Unknown input "${key}" on <${comp.meta.componentMeta.selector}> — skipping. Remove it from @Showcase variants.`);
@@ -196,7 +197,7 @@ export class PrismRendererComponent {
                 this.outputSubscriptions.push(sub);
             }
         }
-        const knownInputs = new Set(comp.meta.inputs.map((i) => i.name));
+        const knownInputs = buildKnownInputs(comp);
         for (const [key, value] of Object.entries(this.rendererService.inputValues())) {
             if (!knownInputs.has(key)) {
                 console.warn(`[ng-prism] Unknown input "${key}" on <${selector}> — skipping. Remove it from @Showcase variants.`);
@@ -299,7 +300,7 @@ export class PrismRendererComponent {
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 179 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 180 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

package/dist/app/renderer/snippet-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-generator.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/snippet-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAC/B;AAoBD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,gBAAgB,CAAC,EAAE,uBAAuB,GACzC,MAAM,CA2DR"}
+{"version":3,"file":"snippet-generator.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/snippet-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAC/B;AAwBD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EAClC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,gBAAgB,CAAC,EAAE,uBAAuB,GACzC,MAAM,CAmER"}

package/dist/app/renderer/snippet-generator.js

@@ -76,7 +76,9 @@ function directiveSelectorToAttr(selector) {
     return match ? match[1] : selector;
 }
 function parseHostStringSimple(host) {
-    const match = host.trim().match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
+    const match = host
+        .trim()
+        .match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
     if (!match)
         return { tag: 'div', attrs: '' };
     return { tag: match[1], attrs: match[2].trim() };
@@ -100,7 +102,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         }
     }
     const attributes = [];
-    const processed = new Set();
+    const processed = new Set(['__prismContent__']);
     for (const input of inputs) {
         processed.add(input.name);
         const value = values[input.name];
@@ -123,15 +125,21 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
             continue;
         pushAttribute(attributes, name, value);
     }
+    const projectedContent = content ??
+        (typeof values['__prismContent__'] === 'string'
+            ? values['__prismContent__']
+            : undefined);
     const allAttrs = [...hostAttrs, directiveAttr, ...attributes].join(' ');
-    const contentHtml = resolveContentHtml(content);
+    const contentHtml = resolveContentHtml(projectedContent);
     if (!contentHtml) {
         if (!allAttrs)
             return `<${tag} />`;
         const singleLine = `<${tag} ${allAttrs} />`;
         if (singleLine.length <= 80)
             return singleLine;
-        const indented = [...hostAttrs, directiveAttr, ...attributes].map((a) => `  ${a}`).join('\n');
+        const indented = [...hostAttrs, directiveAttr, ...attributes]
+            .map((a) => `  ${a}`)
+            .join('\n');
         return `<${tag}\n${indented} />`;
     }
     const openTag = `<${tag} ${allAttrs}>`;

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

@@ -1,14 +1,25 @@
-import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { RuntimeComponent, ScannedComponent } from '../../plugin/plugin.types.js';
 import type { StyleguidePage } from '../../plugin/page.types.js';
 import type { NavigationItem } from './navigation-item.types.js';
 import * as i0 from "@angular/core";
+export interface CategoryNode {
+    name: string;
+    items: NavigationItem[];
+}
+export interface SectionNode {
+    name: string;
+    order: number;
+    totalCount: number;
+    categories: CategoryNode[];
+}
+export declare function resolveSection(c: ScannedComponent): string;
 export declare class PrismNavigationService {
     private readonly searchService;
     private readonly manifestService;
     readonly activeItem: import("@angular/core").WritableSignal<NavigationItem | null>;
     readonly activeComponent: import("@angular/core").Signal<RuntimeComponent | null>;
     readonly activePage: import("@angular/core").Signal<StyleguidePage | null>;
-    readonly categoryTree: import("@angular/core").Signal<Map<string, NavigationItem[]>>;
+    readonly sectionTree: import("@angular/core").Signal<SectionNode[]>;
     select(comp: RuntimeComponent): void;
     selectPage(page: StyleguidePage): void;
     selectFirst(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-navigation.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-navigation.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAIjE,qBACa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,QAAQ,CAAC,UAAU,gEAAuC;IAE1D,QAAQ,CAAC,eAAe,0DAQrB;IAEH,QAAQ,CAAC,UAAU,wDAQhB;IAEH,QAAQ,CAAC,YAAY,gEA0DlB;IAEH,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAIpC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAItC,WAAW,IAAI,IAAI;yCA9FR,sBAAsB;6CAAtB,sBAAsB;CA2GlC"}
+{"version":3,"file":"prism-navigation.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-navigation.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAWjE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,YAAY,EAAE,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAG1D;AAeD,qBACa,sBAAsB;IACjC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,QAAQ,CAAC,UAAU,gEAAuC;IAE1D,QAAQ,CAAC,eAAe,0DAQrB;IAEH,QAAQ,CAAC,UAAU,wDAQhB;IAEH,QAAQ,CAAC,WAAW,gDAiFjB;IAEH,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAIpC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAItC,WAAW,IAAI,IAAI;yCArHR,sBAAsB;6CAAtB,sBAAsB;CAkIlC"}

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,`,

package/dist/builder/scanner/component.scanner.js

@@ -86,6 +86,11 @@ function extractShowcaseConfig(decorator, className) {
         config.description = obj['description'];
     if (obj['category'])
         config.category = obj['category'];
+    if (obj['section'])
+        config.section = obj['section'];
+    if (typeof obj['sectionOrder'] === 'number') {
+        config.sectionOrder = obj['sectionOrder'];
+    }
     if (obj['tags'])
         config.tags = obj['tags'];
     if (obj['meta'])

package/dist/decorator/showcase.types.d.ts

@@ -34,6 +34,18 @@ export interface ShowcaseConfig<T = unknown> {
     categoryOrder?: number;
     /** Controls the order of this component within its category (lower = higher). Components without this sort alphabetically after ordered ones. */
     componentOrder?: number;
+    /**
+     * Top-level section in the sidebar. Auto-detected if omitted:
+     * `@Directive` → 'Directives', otherwise 'Components'. Free-form string —
+     * any value creates a new top-level section (e.g. 'Pipes', 'Utilities').
+     */
+    section?: string;
+    /**
+     * Sort order of this section in the sidebar (lower = higher in list).
+     * The section's effective order is the minimum `sectionOrder` of all its items.
+     * Defaults: 'Components' → 0, 'Directives' → 10, all others → 100.
+     */
+    sectionOrder?: number;
     /** Predefined variants shown as tabs */
     variants?: Variant<T>[];
     /** Tags for search and filtering */

package/dist/decorator/showcase.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"showcase.types.d.ts","sourceRoot":"","sources":["../../src/decorator/showcase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,YAAY,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAOD,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAC5D,GAAG,EACH,MAAM,MAAM,CACb,GACG,MAAM,GACN,KAAK,CAAC;AAEV;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB;KACG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,wBAAwB,CAAC,GAAG,EAAE,GAAG,CAAC,GAC5D,CAAC,GACD,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACpC,CAAC;AAEN,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2IAA2I;IAC3I,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iJAAiJ;IACjJ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,6HAA6H;IAC7H,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,mPAAmP;IACnP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO;IAClC,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,0IAA0I;IAC1I,MAAM,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,qFAAqF;IACrF,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,qIAAqI;IACrI,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}
+{"version":3,"file":"showcase.types.d.ts","sourceRoot":"","sources":["../../src/decorator/showcase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,YAAY,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAOD,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAC5D,GAAG,EACH,MAAM,MAAM,CACb,GACG,MAAM,GACN,KAAK,CAAC;AAEV;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,GAC3C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB;KACG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,wBAAwB,CAAC,GAAG,EAAE,GAAG,CAAC,GAC5D,CAAC,GACD,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACpC,CAAC;AAEN,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2IAA2I;IAC3I,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iJAAiJ;IACjJ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,6HAA6H;IAC7H,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,mPAAmP;IACnP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO;IAClC,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,0IAA0I;IAC1I,MAAM,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,qFAAqF;IACrF,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,qIAAqI;IACrI,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "22.0.1",
+  "version": "22.1.0",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",