@ng-prism/core 21.0.0

package/dist/app/renderer/highlight-xml.js

@@ -0,0 +1,27 @@
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
+function esc(text) {
+    return text.replace(/[&<>"]/g, (ch) => ESC[ch]);
+}
+export function highlightXml(code) {
+    return code.replace(/(<\/?)(\w[\w-]*)|(\[[\w.-]+\])=("(?:[^"\\]|\\.)*")|(\([\w.-]+\))=("(?:[^"\\]|\\.)*")|([\w[\].-]+)=("(?:[^"\\]|\\.)*")|("(?:[^"\\]|\\.)*")|(\/?>)/g, (_match, tagOpen, tagName, bindingAttr, bindingVal, eventAttr, eventVal, attrName, attrValue, strLiteral, closing) => {
+        if (tagOpen != null && tagName != null) {
+            return `<span class="prism-hl-tag">${esc(tagOpen)}</span><span class="prism-hl-name">${esc(tagName)}</span>`;
+        }
+        if (bindingAttr != null && bindingVal != null) {
+            return `<span class="prism-hl-binding">${esc(bindingAttr)}</span>=<span class="prism-hl-string">${esc(bindingVal)}</span>`;
+        }
+        if (eventAttr != null && eventVal != null) {
+            return `<span class="prism-hl-event">${esc(eventAttr)}</span>=<span class="prism-hl-string">${esc(eventVal)}</span>`;
+        }
+        if (attrName != null && attrValue != null) {
+            return `<span class="prism-hl-attr">${esc(attrName)}</span>=<span class="prism-hl-string">${esc(attrValue)}</span>`;
+        }
+        if (strLiteral != null) {
+            return `<span class="prism-hl-string">${esc(strLiteral)}</span>`;
+        }
+        if (closing != null) {
+            return `<span class="prism-hl-tag">${esc(closing)}</span>`;
+        }
+        return esc(_match);
+    });
+}

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

@@ -0,0 +1,32 @@
+import { type Type } from '@angular/core';
+import { A11yPerspectiveService } from '../panels/a11y/a11y-perspective.service.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismRendererService } from '../services/prism-renderer.service.js';
+import * as i0 from "@angular/core";
+export declare class PrismRendererComponent {
+    protected readonly navigationService: PrismNavigationService;
+    protected readonly rendererService: PrismRendererService;
+    protected readonly perspectiveService: A11yPerspectiveService;
+    private readonly eventLogService;
+    private readonly manifestService;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly rendererHooks;
+    private readonly outlet;
+    private componentRef;
+    private outputSubscriptions;
+    private lastProjectedContent;
+    private isRenderPage;
+    private readonly panelService;
+    private readonly pluginService;
+    private readonly overlayCache;
+    readonly activeOverlay: import("@angular/core").WritableSignal<Type<unknown> | null>;
+    readonly codeVisible: import("@angular/core").WritableSignal<boolean>;
+    readonly snippet: import("@angular/core").Signal<string>;
+    constructor();
+    private createComponent;
+    private cleanup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismRendererComponent, "prism-renderer", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-renderer.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAOvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAIpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAG7E,qBAwKa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,kBAAkB,yBAAkC;IACvE,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,aAAa,CAAoD;IAElF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA4D;IACnF,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAA0D;IACtF,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAE5D,QAAQ,CAAC,WAAW,kDAAiB;IAErC,QAAQ,CAAC,OAAO,yCAgBb;;IA4EH,OAAO,CAAC,eAAe;IA4DvB,OAAO,CAAC,OAAO;yCA9KJ,sBAAsB;2CAAtB,sBAAsB;CA4LlC"}

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

@@ -0,0 +1,346 @@
+import { Component, computed, DestroyRef, effect, inject, Injector, signal, untracked, viewChild, ViewContainerRef, } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { Highlight } from 'ngx-highlightjs';
+import { PrismManifestService } from '../services/prism-manifest.service.js';
+import { BUILTIN_PANELS } from '../panels/builtin-panels.js';
+import { A11yPerspectiveService } from '../panels/a11y/a11y-perspective.service.js';
+import { PRISM_RENDERER_HOOKS } from '../tokens/prism-tokens.js';
+import { PrismEventLogService } from '../services/prism-event-log.service.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { PrismPanelService } from '../services/prism-panel.service.js';
+import { PrismPluginService } from '../services/prism-plugin.service.js';
+import { PrismRendererService } from '../services/prism-renderer.service.js';
+import { generateSnippet } from './snippet-generator.js';
+import * as i0 from "@angular/core";
+const _c0 = ["outlet"];
+const _forTrack0 = ($index, $item) => $item.name;
+function PrismRendererComponent_Conditional_1_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 7);
+    i0.ɵɵlistener("click", function PrismRendererComponent_Conditional_1_Conditional_0_For_2_Template_button_click_0_listener() { const ɵ$index_7_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.rendererService.selectVariant(ɵ$index_7_r2)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const variant_r4 = ctx.$implicit;
+    const ɵ$index_7_r2 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("prism-renderer__variant--active", ctx_r2.rendererService.activeVariantIndex() === ɵ$index_7_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", variant_r4.name, " ");
+} }
+function PrismRendererComponent_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵrepeaterCreate(1, PrismRendererComponent_Conditional_1_Conditional_0_For_2_Template, 2, 3, "button", 6, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const comp_r5 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(comp_r5.meta.showcaseConfig.variants);
+} }
+function PrismRendererComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismRendererComponent_Conditional_1_Conditional_0_Template, 3, 0, "div", 5);
+} if (rf & 2) {
+    const comp_r5 = ctx;
+    i0.ɵɵconditional((comp_r5.meta.showcaseConfig.variants == null ? null : comp_r5.meta.showcaseConfig.variants.length) ? 0 : -1);
+} }
+function PrismRendererComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PrismRendererComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismRendererComponent_Conditional_5_ng_container_0_Template, 1, 0, "ng-container", 8);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngComponentOutlet", ctx_r2.activeOverlay());
+} }
+function PrismRendererComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "button", 9);
+    i0.ɵɵlistener("click", function PrismRendererComponent_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.codeVisible.set(!ctx_r2.codeVisible())); });
+    i0.ɵɵtext(2, " </> Code ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("prism-renderer__code-button--active", ctx_r2.codeVisible());
+} }
+function PrismRendererComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "pre");
+    i0.ɵɵelement(2, "code", 10);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("highlight", ctx_r2.snippet());
+} }
+export class PrismRendererComponent {
+    navigationService = inject(PrismNavigationService);
+    rendererService = inject(PrismRendererService);
+    perspectiveService = inject(A11yPerspectiveService);
+    eventLogService = inject(PrismEventLogService);
+    manifestService = inject(PrismManifestService);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    rendererHooks = inject(PRISM_RENDERER_HOOKS, { optional: true });
+    outlet = viewChild.required('outlet', { read: ViewContainerRef });
+    componentRef = null;
+    outputSubscriptions = [];
+    lastProjectedContent = undefined;
+    isRenderPage = false;
+    panelService = inject(PrismPanelService);
+    pluginService = inject(PrismPluginService);
+    overlayCache = new Map();
+    activeOverlay = signal(null, ...(ngDevMode ? [{ debugName: "activeOverlay" }] : []));
+    codeVisible = signal(false, ...(ngDevMode ? [{ debugName: "codeVisible" }] : []));
+    snippet = computed(() => {
+        const comp = this.navigationService.activeComponent();
+        if (!comp)
+            return '';
+        const variant = comp.meta.showcaseConfig.variants?.[this.rendererService.activeVariantIndex()];
+        const explicitKeys = variant?.inputs ? new Set(Object.keys(variant.inputs)) : undefined;
+        const directiveOptions = comp.meta.componentMeta.isDirective
+            ? { host: comp.meta.showcaseConfig.host }
+            : undefined;
+        return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, this.rendererService.inputValues(), explicitKeys, this.rendererService.activeContent(), directiveOptions);
+    }, ...(ngDevMode ? [{ debugName: "snippet" }] : []));
+    constructor() {
+        effect(() => {
+            const comp = this.navigationService.activeComponent();
+            if (!comp)
+                return;
+            untracked(() => {
+                this.codeVisible.set(false);
+                this.rendererService.reconcileForComponent(comp);
+                this.createComponent(comp);
+            });
+        });
+        effect(() => {
+            const inputs = this.rendererService.inputValues();
+            const content = this.rendererService.activeContent();
+            const ref = this.componentRef;
+            if (!ref)
+                return;
+            if (this.isRenderPage) {
+                ref.changeDetectorRef.detectChanges();
+                return;
+            }
+            const comp = untracked(() => this.navigationService.activeComponent());
+            if (!comp)
+                return;
+            if (content !== this.lastProjectedContent) {
+                untracked(() => this.createComponent(comp));
+                return;
+            }
+            performance.mark('prism:rerender:start');
+            for (const [key, value] of Object.entries(inputs)) {
+                ref.setInput(key, value);
+            }
+            ref.changeDetectorRef.detectChanges();
+            performance.mark('prism:rerender:end');
+            performance.measure('prism:rerender', 'prism:rerender:start', 'prism:rerender:end');
+        });
+        effect(() => {
+            const panelId = this.panelService.activePanelId();
+            const allPanels = [...BUILTIN_PANELS, ...this.pluginService.panels()];
+            const panel = allPanels.find((p) => p.id === panelId) ?? null;
+            if (!panel) {
+                this.activeOverlay.set(null);
+                return;
+            }
+            if (panel.overlayComponent) {
+                this.activeOverlay.set(panel.overlayComponent);
+                return;
+            }
+            if (panel.loadOverlayComponent) {
+                const cached = this.overlayCache.get(panel.id);
+                if (cached) {
+                    this.activeOverlay.set(cached);
+                    return;
+                }
+                this.activeOverlay.set(null);
+                panel.loadOverlayComponent().then((comp) => {
+                    this.overlayCache.set(panel.id, comp);
+                    this.activeOverlay.set(comp);
+                });
+                return;
+            }
+            this.activeOverlay.set(null);
+        });
+        this.destroyRef.onDestroy(() => this.cleanup());
+    }
+    createComponent(comp) {
+        this.cleanup();
+        const renderPageTitle = comp.meta.showcaseConfig.renderPage;
+        if (renderPageTitle) {
+            const page = this.manifestService.manifest().pages?.find((p) => p.type === 'component' && p.title === renderPageTitle);
+            if (page) {
+                this.isRenderPage = true;
+                const injector = Injector.create({
+                    providers: comp.meta.showcaseConfig.providers ?? [],
+                    parent: this.injector,
+                });
+                this.componentRef = this.outlet().createComponent(page.component, { injector });
+                this.componentRef.changeDetectorRef.detectChanges();
+                this.rendererService.renderedElement.set(this.componentRef.location.nativeElement);
+                return;
+            }
+        }
+        this.isRenderPage = false;
+        const selector = comp.meta.componentMeta.selector;
+        const detail = { detail: { selector } };
+        this.rendererHooks?.onBeforeCreate?.(selector);
+        performance.mark('prism:render:start', detail);
+        const injector = Injector.create({
+            providers: comp.meta.showcaseConfig.providers ?? [],
+            parent: this.injector,
+        });
+        const content = this.rendererService.activeContent();
+        this.lastProjectedContent = content;
+        const projectableNodes = content ? parseContentToNodes(content) : undefined;
+        this.componentRef = this.outlet().createComponent(comp.type, { injector, projectableNodes });
+        for (const output of comp.meta.outputs) {
+            const emitter = this.componentRef.instance[output.name];
+            if (emitter && typeof emitter.subscribe === 'function') {
+                const sub = emitter
+                    .subscribe((v) => this.eventLogService.log(output.name, v));
+                this.outputSubscriptions.push(sub);
+            }
+        }
+        for (const [key, value] of Object.entries(this.rendererService.inputValues())) {
+            this.componentRef.setInput(key, value);
+        }
+        this.componentRef.changeDetectorRef.detectChanges();
+        performance.mark('prism:render:end', detail);
+        performance.measure('prism:render', 'prism:render:start', 'prism:render:end');
+        this.rendererService.renderedElement.set(this.componentRef.location.nativeElement);
+        this.rendererHooks?.onAfterCreate?.(selector);
+    }
+    cleanup() {
+        const hadComponent = this.componentRef !== null;
+        this.rendererService.renderedElement.set(null);
+        for (const sub of this.outputSubscriptions) {
+            sub.unsubscribe();
+        }
+        this.outputSubscriptions = [];
+        this.outlet().clear();
+        this.componentRef = null;
+        this.lastProjectedContent = undefined;
+        if (hadComponent) {
+            this.rendererHooks?.onAfterDestroy?.('');
+        }
+    }
+    static ɵfac = function PrismRendererComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismRendererComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismRendererComponent, selectors: [["prism-renderer"]], viewQuery: function PrismRendererComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 8, vars: 6, consts: [["outlet", ""], [1, "prism-renderer"], [1, "prism-renderer__canvas"], [1, "prism-renderer__code-bar"], [1, "prism-renderer__code"], [1, "prism-renderer__toolbar"], [1, "prism-renderer__variant", 3, "prism-renderer__variant--active"], [1, "prism-renderer__variant", 3, "click"], [4, "ngComponentOutlet"], [1, "prism-renderer__code-button", 3, "click"], ["language", "xml", 3, "highlight"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵconditionalCreate(1, PrismRendererComponent_Conditional_1_Template, 1, 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵelementContainer(3, null, 0);
+            i0.ɵɵconditionalCreate(5, PrismRendererComponent_Conditional_5_Template, 1, 1, "ng-container");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(6, PrismRendererComponent_Conditional_6_Template, 3, 2, "div", 3);
+            i0.ɵɵconditionalCreate(7, PrismRendererComponent_Conditional_7_Template, 3, 1, "div", 4);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_1_0 = ctx.navigationService.activeComponent()) ? 1 : -1, tmp_1_0);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("prism-renderer__canvas--sr", ctx.perspectiveService.mode() === "screen-reader");
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.activeOverlay() ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.snippet() ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.codeVisible() ? 7 : -1);
+        } }, dependencies: [Highlight, NgComponentOutlet], styles: [".prism-renderer[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-renderer__toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n    .prism-renderer__variant[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n    .prism-renderer__variant[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 0; right: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n    .prism-renderer__variant[_ngcontent-%COMP%]:hover { color: var(--prism-text); }\n    .prism-renderer__variant--active[_ngcontent-%COMP%] { color: var(--prism-primary); }\n    .prism-renderer__variant--active[_ngcontent-%COMP%]::after { opacity: 1; }\n\n    .prism-renderer__canvas[_ngcontent-%COMP%] {\n      position: relative;\n      flex: 1;\n      padding: 48px 40px;\n      overflow: auto;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(\n        circle,\n        color-mix(in srgb, var(--prism-primary) 15%, transparent) 1px,\n        transparent 1px\n      );\n      background-size: 20px 20px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n      transition: filter 0.2s;\n    }\n    .prism-renderer__canvas--sr[_ngcontent-%COMP%] {\n      filter: brightness(0.82) saturate(0.7);\n    }\n\n    .prism-renderer__code-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      border-top: 1px solid var(--prism-border);\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n    .prism-renderer__code-button[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 8px;\n      font-size: 11.5px;\n      font-family: var(--prism-font-mono, monospace);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      transition: color 0.12s;\n      margin-bottom: -1px;\n    }\n    .prism-renderer__code-button[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 4px; right: 4px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n    .prism-renderer__code-button[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .prism-renderer__code-button--active[_ngcontent-%COMP%] { color: var(--prism-primary); }\n    .prism-renderer__code-button--active[_ngcontent-%COMP%]::after { opacity: 1; }\n\n    .prism-renderer__code[_ngcontent-%COMP%] {\n      border-top: 1px solid var(--prism-border);\n      overflow: auto;\n      flex-shrink: 0;\n      max-height: 240px;\n      background: var(--prism-void);\n    }\n    .prism-renderer__code[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 20px 24px;\n      font-size: 12.5px;\n      line-height: 1.65;\n      font-family: var(--prism-font-mono);\n    }\n    .prism-renderer__code[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: inherit; }\n    [_nghost-%COMP%]     .prism-renderer__code .hljs {\n      background: transparent;\n      color: var(--prism-text-2);\n    }\n    [_nghost-%COMP%]     .prism-renderer__code .hljs-tag { color: var(--prism-text-muted); }\n    [_nghost-%COMP%]     .prism-renderer__code .hljs-name { color: var(--prism-primary); }\n    [_nghost-%COMP%]     .prism-renderer__code .hljs-attr { color: #93c5fd; }\n    [_nghost-%COMP%]     .prism-renderer__code .hljs-string { color: #7dd3fc; }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-renderer', standalone: true, imports: [Highlight, NgComponentOutlet], template: `
+    <div class="prism-renderer">
+      @if (navigationService.activeComponent(); as comp) {
+        @if (comp.meta.showcaseConfig.variants?.length) {
+          <div class="prism-renderer__toolbar">
+            @for (variant of comp.meta.showcaseConfig.variants!; track variant.name; let i = $index) {
+              <button
+                class="prism-renderer__variant"
+                [class.prism-renderer__variant--active]="rendererService.activeVariantIndex() === i"
+                (click)="rendererService.selectVariant(i)"
+              >
+                {{ variant.name }}
+              </button>
+            }
+          </div>
+        }
+      }
+      <div class="prism-renderer__canvas" [class.prism-renderer__canvas--sr]="perspectiveService.mode() === 'screen-reader'">
+        <ng-container #outlet />
+        @if (activeOverlay()) {
+          <ng-container *ngComponentOutlet="activeOverlay()!" />
+        }
+      </div>
+      @if (snippet()) {
+        <div class="prism-renderer__code-bar">
+          <button
+            class="prism-renderer__code-button"
+            [class.prism-renderer__code-button--active]="codeVisible()"
+            (click)="codeVisible.set(!codeVisible())"
+          >
+            &lt;/&gt; Code
+          </button>
+        </div>
+      }
+      @if (codeVisible()) {
+        <div class="prism-renderer__code">
+          <pre><code [highlight]="snippet()" language="xml"></code></pre>
+        </div>
+      }
+    </div>
+  `, styles: ["\n    .prism-renderer {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-renderer__toolbar {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n    .prism-renderer__variant {\n      padding: 8px 14px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n    .prism-renderer__variant::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 0; right: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n    .prism-renderer__variant:hover { color: var(--prism-text); }\n    .prism-renderer__variant--active { color: var(--prism-primary); }\n    .prism-renderer__variant--active::after { opacity: 1; }\n\n    .prism-renderer__canvas {\n      position: relative;\n      flex: 1;\n      padding: 48px 40px;\n      overflow: auto;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(\n        circle,\n        color-mix(in srgb, var(--prism-primary) 15%, transparent) 1px,\n        transparent 1px\n      );\n      background-size: 20px 20px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n      transition: filter 0.2s;\n    }\n    .prism-renderer__canvas--sr {\n      filter: brightness(0.82) saturate(0.7);\n    }\n\n    .prism-renderer__code-bar {\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      border-top: 1px solid var(--prism-border);\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n    .prism-renderer__code-button {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 8px;\n      font-size: 11.5px;\n      font-family: var(--prism-font-mono, monospace);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      transition: color 0.12s;\n      margin-bottom: -1px;\n    }\n    .prism-renderer__code-button::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 4px; right: 4px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n    .prism-renderer__code-button:hover { color: var(--prism-text-2); }\n    .prism-renderer__code-button--active { color: var(--prism-primary); }\n    .prism-renderer__code-button--active::after { opacity: 1; }\n\n    .prism-renderer__code {\n      border-top: 1px solid var(--prism-border);\n      overflow: auto;\n      flex-shrink: 0;\n      max-height: 240px;\n      background: var(--prism-void);\n    }\n    .prism-renderer__code pre {\n      margin: 0;\n      padding: 20px 24px;\n      font-size: 12.5px;\n      line-height: 1.65;\n      font-family: var(--prism-font-mono);\n    }\n    .prism-renderer__code code { font-family: inherit; }\n    :host ::ng-deep .prism-renderer__code .hljs {\n      background: transparent;\n      color: var(--prism-text-2);\n    }\n    :host ::ng-deep .prism-renderer__code .hljs-tag { color: var(--prism-text-muted); }\n    :host ::ng-deep .prism-renderer__code .hljs-name { color: var(--prism-primary); }\n    :host ::ng-deep .prism-renderer__code .hljs-attr { color: #93c5fd; }\n    :host ::ng-deep .prism-renderer__code .hljs-string { color: #7dd3fc; }\n  "] }]
+    }], () => [], { 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: 199 }); })();
+function parseContentToNodes(content) {
+    if (typeof content === 'string') {
+        return [htmlToNodes(content)];
+    }
+    const defaultNodes = content['default'] ? htmlToNodes(content['default']) : [];
+    const result = [defaultNodes];
+    for (const [selector, html] of Object.entries(content)) {
+        if (selector === 'default')
+            continue;
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = html;
+        const nodes = [];
+        for (const child of Array.from(wrapper.childNodes)) {
+            const el = document.createElement('div');
+            el.innerHTML = child.outerHTML ?? child.textContent ?? '';
+            const projected = el.firstChild;
+            if (projected && projected instanceof Element) {
+                applySelector(projected, selector);
+                nodes.push(projected);
+            }
+            else if (projected) {
+                const span = document.createElement('span');
+                applySelector(span, selector);
+                span.textContent = child.textContent;
+                nodes.push(span);
+            }
+        }
+        result.push(nodes);
+    }
+    return result;
+}
+function htmlToNodes(html) {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = html;
+    return Array.from(wrapper.childNodes);
+}
+function applySelector(el, selector) {
+    const attrMatch = selector.match(/^\[([^\]=]+)]$/);
+    if (attrMatch) {
+        el.setAttribute(attrMatch[1], '');
+    }
+}

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

@@ -0,0 +1,7 @@
+import type { InputMeta } from '../../plugin/plugin.types.js';
+import type { DirectiveHost } from '../../decorator/showcase.types.js';
+export interface SnippetDirectiveOptions {
+    host?: string | DirectiveHost;
+}
+export declare function generateSnippet(selector: string, inputs: InputMeta[], values: Record<string, unknown>, explicitKeys?: ReadonlySet<string>, content?: string | Record<string, string>, directiveOptions?: SnippetDirectiveOptions): string;
+//# sourceMappingURL=snippet-generator.d.ts.map

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

@@ -0,0 +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;AAgBD,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"}

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

@@ -0,0 +1,162 @@
+function pushAttribute(attributes, name, value) {
+    if (typeof value === 'string') {
+        attributes.push(`${name}="${value}"`);
+    }
+    else if (typeof value === 'boolean') {
+        attributes.push(`[${name}]="true"`);
+    }
+    else if (typeof value === 'number') {
+        attributes.push(`[${name}]="${value}"`);
+    }
+    else if (typeof value === 'object' || Array.isArray(value)) {
+        attributes.push(`[${name}]="yourData"`);
+    }
+    else {
+        attributes.push(`[${name}]="${String(value)}"`);
+    }
+}
+export function generateSnippet(selector, inputs, values, explicitKeys, content, directiveOptions) {
+    if (directiveOptions?.host) {
+        return generateDirectiveSnippet(selector, inputs, values, explicitKeys, content, directiveOptions.host);
+    }
+    const attributes = [];
+    const processed = new Set();
+    for (const input of inputs) {
+        processed.add(input.name);
+        const value = values[input.name];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'boolean' && !value)
+            continue;
+        if (input.defaultValue !== undefined &&
+            value === input.defaultValue &&
+            !explicitKeys?.has(input.name))
+            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 contentHtml = resolveContentHtml(content);
+    if (!contentHtml) {
+        if (attributes.length === 0) {
+            return `<${selector} />`;
+        }
+        const singleLine = `<${selector} ${attributes.join(' ')} />`;
+        if (singleLine.length <= 80) {
+            return singleLine;
+        }
+        const indented = attributes.map((attr) => `  ${attr}`).join('\n');
+        return `<${selector}\n${indented} />`;
+    }
+    const attrStr = attributes.length > 0 ? ' ' + attributes.join(' ') : '';
+    const openTag = `<${selector}${attrStr}>`;
+    const closeTag = `</${selector}>`;
+    const singleLine = `${openTag}${contentHtml}${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;
+}
+function parseHostStringSimple(host) {
+    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() };
+}
+function generateDirectiveSnippet(selector, inputs, values, explicitKeys, content, host) {
+    const directiveAttr = directiveSelectorToAttr(selector);
+    let tag;
+    const hostAttrs = [];
+    if (typeof host === 'string') {
+        const parsed = parseHostStringSimple(host);
+        tag = parsed.tag;
+        if (parsed.attrs)
+            hostAttrs.push(parsed.attrs);
+    }
+    else {
+        tag = host.selector;
+        if (host.inputs) {
+            for (const [k, v] of Object.entries(host.inputs)) {
+                hostAttrs.push(`${k}="${String(v)}"`);
+            }
+        }
+    }
+    const attributes = [];
+    const processed = new Set();
+    for (const input of inputs) {
+        processed.add(input.name);
+        const value = values[input.name];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'boolean' && !value)
+            continue;
+        if (input.defaultValue !== undefined &&
+            value === input.defaultValue &&
+            !explicitKeys?.has(input.name))
+            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 allAttrs = [...hostAttrs, directiveAttr, ...attributes].join(' ');
+    const contentHtml = resolveContentHtml(content);
+    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}`;
+}
+function resolveContentHtml(content) {
+    if (!content)
+        return undefined;
+    if (typeof content === 'string')
+        return content;
+    const parts = [];
+    for (const [selector, html] of Object.entries(content)) {
+        if (selector === 'default') {
+            parts.push(html);
+        }
+        else {
+            const attr = selector.replace(/^\[|\]$/g, '');
+            parts.push(`<ng-container ${attr}>${html}</ng-container>`);
+        }
+    }
+    return parts.join('\n  ');
+}

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

@@ -0,0 +1,10 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { StyleguidePage } from '../../plugin/page.types.js';
+export type NavigationItem = {
+    kind: 'component';
+    data: RuntimeComponent;
+} | {
+    kind: 'page';
+    data: StyleguidePage;
+};
+//# sourceMappingURL=navigation-item.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-item.types.d.ts","sourceRoot":"","sources":["../../../src/app/services/navigation-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC"}

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

@@ -0,0 +1 @@
+export {};

package/dist/app/services/prism-event-log.service.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+export interface EventLogEntry {
+    id: number;
+    timestamp: number;
+    name: string;
+    value: unknown;
+}
+export declare class PrismEventLogService {
+    readonly events: import("@angular/core").WritableSignal<EventLogEntry[]>;
+    private _nextId;
+    log(name: string, value: unknown): void;
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismEventLogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrismEventLogService>;
+}
+//# sourceMappingURL=prism-event-log.service.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-event-log.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-event-log.service.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,oBAAoB;IAC/B,QAAQ,CAAC,MAAM,0DAA+B;IAC9C,OAAO,CAAC,OAAO,CAAK;IAEpB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAOvC,KAAK,IAAI,IAAI;yCAXF,oBAAoB;6CAApB,oBAAoB;CAchC"}