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

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

@@ -1,3 +1,8 @@
+import { COMPOSITION_SUBJECT_SLOT } from '../../shared/composition.js';
+import { VOID_ELEMENTS } from '../../shared/void-elements.js';
+import { PRISM_CONTENT_INPUT } from './input-bindings.js';
+/** The value a directive's host renders its text content through: the snippet writes it as content, never as an attribute. */
+const HOST_CONTENT_KEYS = new Set([PRISM_CONTENT_INPUT]);
 function escapeAttrValue(value) {
     return String(value).replace(/&/g, '&').replace(/"/g, '"');
 }
@@ -18,14 +23,18 @@ function pushAttribute(attributes, name, value) {
         attributes.push(`[${name}]="${escapeAttrValue(value)}"`);
     }
 }
-export function generateSnippet(selector, inputs, values, explicitKeys, content, directiveOptions) {
-    if (directiveOptions?.host) {
-        return generateDirectiveSnippet(selector, inputs, values, explicitKeys, content, directiveOptions.host);
-    }
+/**
+ * The attributes that put the current values on the subject element. A value that equals its default is left out unless
+ * the variant sets it (`explicitKeys`); `skip` holds the member names of inputs that are not written at all, such as
+ * the ones a composition does not bind.
+ */
+export function subjectAttributes(inputs, values, explicitKeys, skip) {
     const attributes = [];
-    const processed = new Set();
+    const processed = new Set(skip);
     for (const input of inputs) {
         processed.add(input.name);
+        if (skip?.has(input.name))
+            continue;
         const value = values[input.name];
         if (value === undefined)
             continue;
@@ -35,7 +44,7 @@ export function generateSnippet(selector, inputs, values, explicitKeys, content,
         // that defaults to `true` has to show its explicit `false`.
         if (input.defaultValue === undefined && typeof value === 'boolean' && !value)
             continue;
-        pushAttribute(attributes, input.name, value);
+        pushAttribute(attributes, input.alias ?? input.name, value);
     }
     for (const [name, value] of Object.entries(values)) {
         if (processed.has(name))
@@ -46,48 +55,137 @@ export function generateSnippet(selector, inputs, values, explicitKeys, content,
             continue;
         pushAttribute(attributes, name, value);
     }
-    const contentHtml = resolveContentHtml(content);
-    if (!contentHtml) {
-        if (attributes.length === 0) {
-            return `<${selector} />`;
+    return attributes;
+}
+/**
+ * The composition of a case as its author wrote it, with `attributes` on the subject element in place of the slot
+ * ng-prism leaves in `CompositionCase.template`. Only a bare attribute of the subject that one of them gives a value
+ * (`libTooltip`, which the selector asks for) is left out, as `attributes` writes it again.
+ */
+export function generateCompositionSnippet(caseTemplate, attributes) {
+    const written = attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
+    const names = attributes.map((attribute) => attribute.split('=')[0].replace(/^\[(.*)\]$/, '$1'));
+    const parts = caseTemplate.split(COMPOSITION_SUBJECT_SLOT);
+    // The slot ends the subject's start tag, so each part but the last ends with one.
+    return parts.map((part, index) => (index < parts.length - 1 ? withoutBareAttributes(part, names) : part)).join(written);
+}
+/** `text` without the bare attributes `names` in the start tag it ends with. */
+function withoutBareAttributes(text, names) {
+    const start = text.lastIndexOf('<');
+    if (start < 0)
+        return text;
+    const startTag = names.reduce((tag, name) => tag.replace(new RegExp(`\\s+${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(?=\\s|$)`), ''), text.slice(start));
+    return text.slice(0, start) + startTag;
+}
+export function generateSnippet(selector, inputs, values, explicitKeys, content, directiveOptions) {
+    const host = directiveOptions?.host;
+    // A `{ template }` host is not shown yet: the snippet is the directive's selector, as without a host.
+    if (host && !(typeof host === 'object' && 'template' in host)) {
+        return generateDirectiveSnippet(selector, inputs, values, explicitKeys, content, host);
+    }
+    // A directive without a host renders on the element of its selector, with its text content in `__prismContent__`.
+    const attributes = subjectAttributes(inputs, values, explicitKeys, HOST_CONTENT_KEYS);
+    const element = selectorToElement(selector);
+    const selectorAttributes = unwrittenSelectorAttributes(element.attributes, attributes);
+    return renderElement(element.tag, [...selectorAttributes, ...attributes], resolveContentHtml(content ?? hostContentValue(values)));
+}
+function hostContentValue(values) {
+    const value = values[PRISM_CONTENT_INPUT];
+    return typeof value === 'string' ? value : undefined;
+}
+/** The parts of a selector list. `:not()` is ignored. */
+function selectorParts(selector) {
+    return selector
+        .replace(/:not\([^)]*\)/g, '')
+        .split(',')
+        .map((part) => {
+        const text = part.trim();
+        const tag = text.match(/^[a-zA-Z][\w-]*/)?.[0];
+        const attributes = [];
+        const classNames = [];
+        for (const [, name, value, className] of text.slice(tag?.length ?? 0).matchAll(/\[([^\]=]+)(?:=["']?([^\]"']*)["']?)?\]|\.([\w-]+)/g)) {
+            if (className) {
+                classNames.push(className);
+            }
+            else {
+                attributes.push(value ? `${name}="${escapeAttrValue(value)}"` : name);
+            }
         }
-        const singleLine = `<${selector} ${attributes.join(' ')} />`;
-        if (singleLine.length <= 80) {
+        if (classNames.length > 0)
+            attributes.push(`class="${classNames.join(' ')}"`);
+        return { tag, attributes };
+    });
+}
+/**
+ * The element and the attributes a component's selector asks for: `button[libBtn]` is `<button libBtn>`. Of a selector
+ * list only the first part counts, and a selector without an element is a `div`, as when the styleguide renders it.
+ */
+function selectorToElement(selector) {
+    const [first] = selectorParts(selector);
+    return { tag: first.tag ?? 'div', attributes: first.attributes };
+}
+/**
+ * The attributes of a directive's selector that put it on a host element `tag`: those of the first part of a selector
+ * list that names `tag` or no element, as the generated wrapper takes them. When no part fits, the first part's.
+ */
+function selectorAttributesOnHost(selector, tag) {
+    const parts = selectorParts(selector);
+    const fitting = parts.find((part) => (part.tag ?? tag).toLowerCase() === tag.toLowerCase()) ?? parts[0];
+    return fitting.attributes;
+}
+/** The attributes of a selector that no written attribute sets yet: an input aliased to one of them gives it its value. */
+function unwrittenSelectorAttributes(selectorAttributes, written) {
+    return selectorAttributes.filter((attribute) => {
+        const name = attribute.split('=')[0];
+        return !written.some((w) => w.startsWith(`${name}=`) || w.startsWith(`[${name}]=`));
+    });
+}
+/**
+ * One element, on a single line when it fits in 80 characters. A void element takes no content and no end tag
+ * (`<input>` and `<input />` are valid, `<input>text</input>` is not). Only void and custom elements may close
+ * themselves: Angular rejects `<button />`, so any other element without content gets its end tag.
+ */
+function renderElement(tag, attributes, contentHtml) {
+    const attrStr = attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
+    const indented = attributes.map((attr) => `  ${attr}`).join('\n');
+    const content = VOID_ELEMENTS.has(tag.toLowerCase()) ? undefined : contentHtml;
+    if (!content) {
+        const selfClosing = VOID_ELEMENTS.has(tag.toLowerCase()) || tag.includes('-');
+        const end = selfClosing ? ' />' : `></${tag}>`;
+        const singleLine = `<${tag}${attrStr}${end}`;
+        if (attributes.length === 0 || singleLine.length <= 80)
             return singleLine;
-        }
-        const indented = attributes.map((attr) => `  ${attr}`).join('\n');
-        return `<${selector}\n${indented} />`;
+        return `<${tag}\n${indented}${end}`;
     }
-    const attrStr = attributes.length > 0 ? ' ' + attributes.join(' ') : '';
-    const openTag = `<${selector}${attrStr}>`;
-    const closeTag = `</${selector}>`;
-    const singleLine = `${openTag}${contentHtml}${closeTag}`;
-    if (singleLine.length <= 80) {
+    const openTag = `<${tag}${attrStr}>`;
+    const closeTag = `</${tag}>`;
+    const singleLine = `${openTag}${content}${closeTag}`;
+    if (singleLine.length <= 80)
         return singleLine;
-    }
-    if (attributes.length <= 2) {
-        return `${openTag}\n  ${contentHtml}\n${closeTag}`;
-    }
-    const indented = attributes.map((attr) => `  ${attr}`).join('\n');
-    return `<${selector}\n${indented}>\n  ${contentHtml}\n${closeTag}`;
-}
-function directiveSelectorToAttr(selector) {
-    const match = selector.match(/^\[([^\]]+)]$/);
-    return match ? match[1] : selector;
+    if (attributes.length <= 2)
+        return `${openTag}\n  ${content}\n${closeTag}`;
+    return `<${tag}\n${indented}>\n  ${content}\n${closeTag}`;
 }
+/**
+ * The element a string host starts with, its attributes as written, and the content between its start and end tag
+ * (`<button class="btn">Hover me</button>`): that content is what the host renders when a variant sets none.
+ */
 function parseHostStringSimple(host) {
-    const match = host.trim().match(/^<\s*([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)\s*\/?\s*>$/);
-    if (!match)
+    const start = host.match(/^\s*<\s*([a-zA-Z][\w-]*)([^>]*?)\s*\/?\s*>/);
+    if (!start)
         return { tag: 'div', attrs: '' };
-    return { tag: match[1], attrs: match[2].trim() };
+    const [opening, tag, attrs] = start;
+    const content = host.slice(opening.length).match(new RegExp(`^([\\s\\S]*?)<\\/\\s*${tag}\\s*>\\s*$`, 'i'))?.[1];
+    return { tag, attrs: attrs.trim(), content };
 }
 function generateDirectiveSnippet(selector, inputs, values, explicitKeys, content, host) {
-    const directiveAttr = directiveSelectorToAttr(selector);
     let tag;
+    let hostContent;
     const hostAttrs = [];
     if (typeof host === 'string') {
         const parsed = parseHostStringSimple(host);
         tag = parsed.tag;
+        hostContent = parsed.content;
         if (parsed.attrs)
             hostAttrs.push(parsed.attrs);
     }
@@ -99,53 +197,12 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
             }
         }
     }
-    const attributes = [];
-    const processed = new Set(['__prismContent__']);
-    for (const input of inputs) {
-        processed.add(input.name);
-        const value = values[input.name];
-        if (value === undefined)
-            continue;
-        if (input.defaultValue !== undefined && value === input.defaultValue && !explicitKeys?.has(input.name))
-            continue;
-        // Only a guess, and only sound when no default is known: a boolean input
-        // that defaults to `true` has to show its explicit `false`.
-        if (input.defaultValue === undefined && typeof value === 'boolean' && !value)
-            continue;
-        pushAttribute(attributes, input.name, value);
-    }
-    for (const [name, value] of Object.entries(values)) {
-        if (processed.has(name))
-            continue;
-        if (value === undefined)
-            continue;
-        if (typeof value === 'boolean' && !value)
-            continue;
-        pushAttribute(attributes, name, value);
-    }
-    const projectedContent = content ?? (typeof values['__prismContent__'] === 'string' ? values['__prismContent__'] : undefined);
-    const allAttrs = [...hostAttrs, directiveAttr, ...attributes].join(' ');
-    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');
-        return `<${tag}\n${indented} />`;
-    }
-    const openTag = `<${tag} ${allAttrs}>`;
-    const closeTag = `</${tag}>`;
-    const singleLine = `${openTag}${contentHtml}${closeTag}`;
-    if (singleLine.length <= 80)
-        return singleLine;
-    const allAttrsList = [...hostAttrs, directiveAttr, ...attributes];
-    if (allAttrsList.length <= 2) {
-        return `${openTag}\n  ${contentHtml}\n${closeTag}`;
-    }
-    const indented = allAttrsList.map((a) => `  ${a}`).join('\n');
-    return `<${tag}\n${indented}>\n  ${contentHtml}\n${closeTag}`;
+    const attributes = subjectAttributes(inputs, values, explicitKeys, HOST_CONTENT_KEYS);
+    // The variant's content, else the content of the host: the generated host's `__prismContent__` defaults to it.
+    const projectedContent = content ?? hostContentValue(values) ?? hostContent;
+    // An input aliased to an attribute of the directive's selector already puts the directive on the host.
+    const selectorAttrs = unwrittenSelectorAttributes(selectorAttributesOnHost(selector, tag), attributes);
+    return renderElement(tag, [...hostAttrs, ...selectorAttrs, ...attributes], resolveContentHtml(projectedContent));
 }
 function resolveContentHtml(content) {
     if (!content)

package/dist/app/services/navigation-item.d.ts

@@ -0,0 +1,10 @@
+import type { ShowcaseConfig } from '../../decorator/showcase.types.js';
+import type { NavigationItem } from './navigation-item.types.js';
+/** The `@Showcase` config behind a component, a service or a pipe, `undefined` for a page, which has none. */
+export declare function itemShowcaseConfig(item: NavigationItem): ShowcaseConfig | undefined;
+/**
+ * Identifies an item in a list. The prefixes keep a service, a pipe and a page
+ * from colliding with a component of the same name or title.
+ */
+export declare function itemKey(item: NavigationItem): string;
+//# sourceMappingURL=navigation-item.d.ts.map

package/dist/app/services/navigation-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/app/services/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,8GAA8G;AAC9G,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,CAEnF;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAWpD"}

package/dist/app/services/navigation-item.js

@@ -0,0 +1,20 @@
+/** The `@Showcase` config behind a component, a service or a pipe, `undefined` for a page, which has none. */
+export function itemShowcaseConfig(item) {
+    return item.kind === 'page' ? undefined : item.data.meta.showcaseConfig;
+}
+/**
+ * Identifies an item in a list. The prefixes keep a service, a pipe and a page
+ * from colliding with a component of the same name or title.
+ */
+export function itemKey(item) {
+    switch (item.kind) {
+        case 'component':
+            return item.data.meta.className;
+        case 'service':
+            return `service:${item.data.meta.className}`;
+        case 'pipe':
+            return `pipe:${item.data.meta.className}`;
+        case 'page':
+            return `page:${item.data.title}`;
+    }
+}

package/dist/app/services/navigation-item.types.d.ts

@@ -1,8 +1,16 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { RuntimeService } from '../../plugin/service.types.js';
 export type NavigationItem = {
     kind: 'component';
     data: RuntimeComponent;
+} | {
+    kind: 'service';
+    data: RuntimeService;
+} | {
+    kind: 'pipe';
+    data: RuntimePipe;
 } | {
     kind: 'page';
     data: StyleguidePage;

package/dist/app/services/navigation-item.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.types.d.ts","sourceRoot":"","sources":["../../../src/app/services/navigation-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC"}
+{"version":3,"file":"navigation-item.types.d.ts","sourceRoot":"","sources":["../../../src/app/services/navigation-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,MAAM,cAAc,GACpB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE,GACzC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC"}

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

@@ -1,4 +1,16 @@
 import * as i0 from "@angular/core";
+/** Bounds and default of the sidebar width, shared by the service, the resizer and the shell's CSS fallback. */
+export declare const SIDEBAR_WIDTH: {
+    readonly min: 200;
+    readonly max: 360;
+    readonly default: 280;
+};
+/** Bounds and default of the addon panel height. */
+export declare const PANEL_HEIGHT: {
+    readonly min: 200;
+    readonly max: 560;
+    readonly default: 300;
+};
 export declare class PrismLayoutService {
     readonly sidebarVisible: import("@angular/core").WritableSignal<boolean>;
     readonly addonsVisible: import("@angular/core").WritableSignal<boolean>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,qBACa,kBAAkB;IAC3B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAe;IACpC,QAAQ,CAAC,WAAW,iDAAe;IACnC,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,aAAa;yCArEZ,kBAAkB;;CAkF9B"}
+{"version":3,"file":"prism-layout.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-layout.service.ts"],"names":[],"mappings":";AAIA,gHAAgH;AAChH,eAAO,MAAM,aAAa;;;;CAAgD,CAAC;AAE3E,oDAAoD;AACpD,eAAO,MAAM,YAAY;;;;CAAgD,CAAC;AAI1E,qBACa,kBAAkB;IAC3B,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,aAAa,kDAAgB;IACtC,QAAQ,CAAC,cAAc,kDAAgB;IACvC,QAAQ,CAAC,iBAAiB,6DAAwC;IAClE,QAAQ,CAAC,YAAY,iDAAyC;IAC9D,QAAQ,CAAC,WAAW,iDAAwC;IAC5D,QAAQ,CAAC,UAAU,iDAAe;;IAMlC,aAAa,IAAI,IAAI;IAKrB,YAAY,IAAI,IAAI;IAKpB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKjC,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,aAAa;yCArEZ,kBAAkB;;CAsF9B"}

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

@@ -1,6 +1,11 @@
 import { Injectable, signal } from '@angular/core';
 import * as i0 from "@angular/core";
 const STORAGE_KEY = 'ng-prism-layout';
+/** Bounds and default of the sidebar width, shared by the service, the resizer and the shell's CSS fallback. */
+export const SIDEBAR_WIDTH = { min: 200, max: 360, default: 280 };
+/** Bounds and default of the addon panel height. */
+export const PANEL_HEIGHT = { min: 200, max: 560, default: 300 };
+const clamp = (bounds, px) => Math.max(bounds.min, Math.min(bounds.max, px));
 export class PrismLayoutService {
     sidebarVisible = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarVisible" }] : /* istanbul ignore next */ []));
@@ -10,9 +15,9 @@ export class PrismLayoutService {
     ...(ngDevMode ? [{ debugName: "toolbarVisible" }] : /* istanbul ignore next */ []));
     addonsOrientation = signal('bottom', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "addonsOrientation" }] : /* istanbul ignore next */ []));
-    sidebarWidth = signal(280, /* @ts-ignore */
+    sidebarWidth = signal(SIDEBAR_WIDTH.default, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : /* istanbul ignore next */ []));
-    panelHeight = signal(300, /* @ts-ignore */
+    panelHeight = signal(PANEL_HEIGHT.default, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelHeight" }] : /* istanbul ignore next */ []));
     panelWidth = signal(320, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
@@ -36,11 +41,11 @@ export class PrismLayoutService {
         this.saveToStorage();
     }
     setSidebarWidth(px) {
-        this.sidebarWidth.set(Math.max(160, Math.min(600, px)));
+        this.sidebarWidth.set(clamp(SIDEBAR_WIDTH, px));
         this.saveToStorage();
     }
     setPanelHeight(px) {
-        this.panelHeight.set(Math.max(100, Math.min(600, px)));
+        this.panelHeight.set(clamp(PANEL_HEIGHT, px));
         this.saveToStorage();
     }
     setPanelWidth(px) {
@@ -63,9 +68,9 @@ export class PrismLayoutService {
                 this.addonsOrientation.set(d['addonsOrientation']);
             }
             if (typeof d['sidebarWidth'] === 'number')
-                this.sidebarWidth.set(Math.max(160, Math.min(600, d['sidebarWidth'])));
+                this.sidebarWidth.set(clamp(SIDEBAR_WIDTH, d['sidebarWidth']));
             if (typeof d['panelHeight'] === 'number')
-                this.panelHeight.set(Math.max(100, Math.min(600, d['panelHeight'])));
+                this.panelHeight.set(clamp(PANEL_HEIGHT, d['panelHeight']));
             if (typeof d['panelWidth'] === 'number')
                 this.panelWidth.set(Math.max(200, Math.min(600, d['panelWidth'])));
         }
@@ -83,7 +88,12 @@ export class PrismLayoutService {
             panelHeight: this.panelHeight(),
             panelWidth: this.panelWidth()
         };
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+        }
+        catch {
+            // Storage full or blocked: the layout still applies for this session.
+        }
     }
     static ɵfac = function PrismLayoutService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismLayoutService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismLayoutService, factory: PrismLayoutService.ɵfac, providedIn: 'root' });

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

@@ -1,10 +1,14 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
 import type { RuntimeComponent, RuntimeManifest } from '../../plugin/plugin.types.js';
+import type { RuntimeService } from '../../plugin/service.types.js';
 import * as i0 from "@angular/core";
 export declare class PrismManifestService {
     private readonly _manifest;
     readonly manifest: import("@angular/core").Signal<RuntimeManifest>;
     readonly components: import("@angular/core").Signal<RuntimeComponent[]>;
+    readonly services: import("@angular/core").Signal<RuntimeService[]>;
+    readonly pipes: import("@angular/core").Signal<RuntimePipe[]>;
     readonly pages: import("@angular/core").Signal<StyleguidePage[]>;
     readonly categories: import("@angular/core").Signal<string[]>;
     readonly groupedByCategory: import("@angular/core").Signal<Map<string, RuntimeComponent[]>>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-manifest.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-manifest.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAGtF,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmD;IAE7E,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,UAAU,qDAAmE;IAEtF,QAAQ,CAAC,KAAK,mDAAkE;IAEhF,QAAQ,CAAC,UAAU,2CA0BhB;IAEH,QAAQ,CAAC,iBAAiB,kEAYvB;IAEH,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;yCAnDtC,oBAAoB;;CAsDhC"}
+{"version":3,"file":"prism-manifest.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-manifest.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;;AAGpE,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmD;IAE7E,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,UAAU,qDAAmE;IAEtF,QAAQ,CAAC,QAAQ,mDAAqE;IAEtF,QAAQ,CAAC,KAAK,gDAA+D;IAE7E,QAAQ,CAAC,KAAK,mDAAkE;IAEhF,QAAQ,CAAC,UAAU,2CA0BhB;IAEH,QAAQ,CAAC,iBAAiB,kEAYvB;IAEH,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;yCAvDtC,oBAAoB;;CA0DhC"}

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

@@ -7,6 +7,10 @@ export class PrismManifestService {
     manifest = this._manifest.asReadonly();
     components = computed(() => this._manifest().components, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "components" }] : /* istanbul ignore next */ []));
+    services = computed(() => this._manifest().services ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "services" }] : /* istanbul ignore next */ []));
+    pipes = computed(() => this._manifest().pipes ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pipes" }] : /* istanbul ignore next */ []));
     pages = computed(() => this._manifest().pages ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
     categories = computed(() => {

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

@@ -1,5 +1,7 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
 import type { RuntimeComponent, ScannedComponent } from '../../plugin/plugin.types.js';
+import type { PanelTarget, RuntimeService } from '../../plugin/service.types.js';
 import type { NavigationItem } from './navigation-item.types.js';
 import * as i0 from "@angular/core";
 export interface CategoryNode {
@@ -18,9 +20,19 @@ export declare class PrismNavigationService {
     private readonly manifestService;
     readonly activeItem: import("@angular/core").WritableSignal<NavigationItem | null>;
     readonly activeComponent: import("@angular/core").Signal<RuntimeComponent | null>;
+    readonly activeService: import("@angular/core").Signal<RuntimeService | null>;
+    readonly activePipe: import("@angular/core").Signal<RuntimePipe | null>;
+    /**
+     * What the active item is, for the panels that apply to one kind only.
+     * Built from the re-linked signals, so an item the manifest no longer has
+     * (and a page, which no panel targets) reports `null`.
+     */
+    readonly activeTarget: import("@angular/core").Signal<PanelTarget | null>;
     readonly activePage: import("@angular/core").Signal<StyleguidePage | null>;
     readonly sectionTree: import("@angular/core").Signal<SectionNode[]>;
     select(comp: RuntimeComponent): void;
+    selectService(service: RuntimeService): void;
+    selectPipe(pipe: RuntimePipe): void;
     selectPage(page: StyleguidePage): void;
     selectFirst(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismNavigationService, never>;

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,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAWjE,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,YAAY,EAAE,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAG1D;AAgBD,qBACa,sBAAsB;IAC/B,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,gDAiEjB;IAEH,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAIpC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAItC,WAAW,IAAI,IAAI;yCArGV,sBAAsB;;CAoHlC"}
+{"version":3,"file":"prism-navigation.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-navigation.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAajE,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,YAAY,EAAE,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAG1D;AA+BD,qBACa,sBAAsB;IAC/B,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,aAAa,wDAOnB;IAEH,QAAQ,CAAC,UAAU,qDAOhB;IAEH;;;;OAIG;IACH,QAAQ,CAAC,YAAY,qDAKlB;IAEH,QAAQ,CAAC,UAAU,wDAQhB;IAEH,QAAQ,CAAC,WAAW,gDAsEjB;IAEH,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAIpC,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI5C,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAInC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAItC,WAAW,IAAI,IAAI;yCAhJV,sBAAsB;;CA2KlC"}