@ng-prism/core 21.0.0

package/dist/app/index.d.ts

@@ -0,0 +1,18 @@
+export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS } from './tokens/prism-tokens.js';
+export type { PrismRendererHooks } from './tokens/prism-tokens.js';
+export { PRISM_DEFAULT_THEME } from './theme/prism-default-theme.js';
+export type { NavigationItem } from './services/navigation-item.types.js';
+export { PrismManifestService } from './services/prism-manifest.service.js';
+export { PrismSearchService } from './services/prism-search.service.js';
+export { PrismNavigationService } from './services/prism-navigation.service.js';
+export { PrismRendererService } from './services/prism-renderer.service.js';
+export { PrismEventLogService, type EventLogEntry } from './services/prism-event-log.service.js';
+export { PrismPluginService } from './services/prism-plugin.service.js';
+export { PrismLayoutService } from './services/prism-layout.service.js';
+export { PrismUrlStateService } from './services/prism-url-state.service.js';
+export { PrismShellComponent } from './shell/prism-shell.component.js';
+export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.component.js';
+export { providePrism } from './provide-prism.js';
+export type { ProvidePrismOptions } from './provide-prism.js';
+export { enablePrismHmr } from './hmr.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAGrE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,KAAK,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAG7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/app/index.js

@@ -0,0 +1,21 @@
+// Tokens
+export { PRISM_MANIFEST, PRISM_CONFIG, PRISM_RENDERER_HOOKS } from './tokens/prism-tokens.js';
+// Theme
+export { PRISM_DEFAULT_THEME } from './theme/prism-default-theme.js';
+// Services
+export { PrismManifestService } from './services/prism-manifest.service.js';
+export { PrismSearchService } from './services/prism-search.service.js';
+export { PrismNavigationService } from './services/prism-navigation.service.js';
+export { PrismRendererService } from './services/prism-renderer.service.js';
+export { PrismEventLogService } from './services/prism-event-log.service.js';
+export { PrismPluginService } from './services/prism-plugin.service.js';
+export { PrismLayoutService } from './services/prism-layout.service.js';
+export { PrismUrlStateService } from './services/prism-url-state.service.js';
+// Shell (root component)
+export { PrismShellComponent } from './shell/prism-shell.component.js';
+// Page renderers
+export { PrismPageRendererComponent } from './page-renderer/prism-page-renderer.component.js';
+// Bootstrap helper
+export { providePrism } from './provide-prism.js';
+// HMR helper
+export { enablePrismHmr } from './hmr.js';

package/dist/app/layout-menu/prism-layout-menu.component.d.ts

@@ -0,0 +1,10 @@
+import { PrismLayoutService } from '../services/prism-layout.service.js';
+import * as i0 from "@angular/core";
+export declare class PrismLayoutMenuComponent {
+    protected readonly layout: PrismLayoutService;
+    protected readonly open: import("@angular/core").WritableSignal<boolean>;
+    protected toggle(target: 'sidebar' | 'toolbar' | 'addons' | 'orientation'): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismLayoutMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismLayoutMenuComponent, "prism-layout-menu", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-layout-menu.component.d.ts.map

package/dist/app/layout-menu/prism-layout-menu.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-layout-menu.component.d.ts","sourceRoot":"","sources":["../../../src/app/layout-menu/prism-layout-menu.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAEzE,qBA+Ka,wBAAwB;IACnC,SAAS,CAAC,QAAQ,CAAC,MAAM,qBAA8B;IACvD,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAAiB;IAExC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,IAAI;yCAJrE,wBAAwB;2CAAxB,wBAAwB;CAapC"}

package/dist/app/layout-menu/prism-layout-menu.component.js

@@ -0,0 +1,190 @@
+import { Component, inject, signal } from '@angular/core';
+import { PrismLayoutService } from '../services/prism-layout.service.js';
+import * as i0 from "@angular/core";
+function PrismLayoutMenuComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 6);
+    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.open.set(false)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(1, "div", 7)(2, "button", 8);
+    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("sidebar")); });
+    i0.ɵɵdomElementStart(3, "span", 9);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(4, "svg", 10);
+    i0.ɵɵdomElement(5, "path", 11);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵdomElementStart(6, "span", 12);
+    i0.ɵɵtext(7, "Show sidebar");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "span", 13)(9, "kbd");
+    i0.ɵɵtext(10, "\u2325");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "kbd");
+    i0.ɵɵtext(12, "S");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(13, "button", 8);
+    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("toolbar")); });
+    i0.ɵɵdomElementStart(14, "span", 9);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(15, "svg", 10);
+    i0.ɵɵdomElement(16, "path", 11);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵdomElementStart(17, "span", 12);
+    i0.ɵɵtext(18, "Show toolbar");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(19, "span", 13)(20, "kbd");
+    i0.ɵɵtext(21, "\u2325");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(22, "kbd");
+    i0.ɵɵtext(23, "T");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(24, "button", 8);
+    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("addons")); });
+    i0.ɵɵdomElementStart(25, "span", 9);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(26, "svg", 10);
+    i0.ɵɵdomElement(27, "path", 11);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵdomElementStart(28, "span", 12);
+    i0.ɵɵtext(29, "Show addons panel");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(30, "span", 13)(31, "kbd");
+    i0.ɵɵtext(32, "\u2325");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(33, "kbd");
+    i0.ɵɵtext(34, "A");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElement(35, "div", 14);
+    i0.ɵɵdomElementStart(36, "button", 8);
+    i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Conditional_6_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggle("orientation")); });
+    i0.ɵɵdomElementStart(37, "span", 15);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(38, "svg", 10);
+    i0.ɵɵdomElement(39, "rect", 16)(40, "line", 17);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵdomElementStart(41, "span", 12);
+    i0.ɵɵtext(42);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(43, "span", 13)(44, "kbd");
+    i0.ɵɵtext(45, "\u2325");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(46, "kbd");
+    i0.ɵɵtext(47, "D");
+    i0.ɵɵdomElementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.sidebarVisible());
+    i0.ɵɵadvance(11);
+    i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.toolbarVisible());
+    i0.ɵɵadvance(11);
+    i0.ɵɵclassProp("layout-menu__check--on", ctx_r1.layout.addonsVisible());
+    i0.ɵɵadvance(17);
+    i0.ɵɵtextInterpolate1(" Panel: ", ctx_r1.layout.addonsOrientation() === "bottom" ? "bottom \u2192 right" : "right \u2192 bottom", " ");
+} }
+export class PrismLayoutMenuComponent {
+    layout = inject(PrismLayoutService);
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    toggle(target) {
+        this.open.set(false);
+        switch (target) {
+            case 'sidebar':
+                this.layout.toggleSidebar();
+                break;
+            case 'toolbar':
+                this.layout.toggleToolbar();
+                break;
+            case 'addons':
+                this.layout.toggleAddons();
+                break;
+            case 'orientation':
+                this.layout.toggleOrientation();
+                break;
+        }
+    }
+    static ɵfac = function PrismLayoutMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismLayoutMenuComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismLayoutMenuComponent, selectors: [["prism-layout-menu"]], decls: 7, vars: 3, consts: [[1, "layout-menu"], ["title", "Layout options", 1, "layout-menu__trigger", 3, "click"], ["width", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none"], ["cx", "8", "cy", "3", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "8", "r", "1.25", "fill", "currentColor"], ["cx", "8", "cy", "13", "r", "1.25", "fill", "currentColor"], [1, "layout-menu__backdrop", 3, "click"], [1, "layout-menu__dropdown"], [1, "layout-menu__item", 3, "click"], [1, "layout-menu__check"], ["width", "12", "height", "12", "viewBox", "0 0 12 12", "fill", "none"], ["d", "M2 6l3 3 5-5", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], [1, "layout-menu__label"], [1, "layout-menu__kbd"], [1, "layout-menu__divider"], [1, "layout-menu__icon"], ["x", "1", "y", "1", "width", "10", "height", "10", "rx", "1", "stroke", "currentColor", "stroke-width", "1.2"], ["x1", "6", "y1", "1", "x2", "6", "y2", "11", "stroke", "currentColor", "stroke-width", "1.2"]], template: function PrismLayoutMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "button", 1);
+            i0.ɵɵdomListener("click", function PrismLayoutMenuComponent_Template_button_click_1_listener() { return ctx.open.set(!ctx.open()); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵdomElementStart(2, "svg", 2);
+            i0.ɵɵdomElement(3, "circle", 3)(4, "circle", 4)(5, "circle", 5);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(6, PrismLayoutMenuComponent_Conditional_6_Template, 48, 7);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("layout-menu__trigger--active", ctx.open());
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.open() ? 6 : -1);
+        } }, styles: [".layout-menu[_ngcontent-%COMP%] { position: relative; }\n\n    .layout-menu__trigger[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      background: transparent;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      transition: border-color 0.15s, color 0.15s, background 0.15s;\n    }\n    .layout-menu__trigger[_ngcontent-%COMP%]:hover, \n   .layout-menu__trigger--active[_ngcontent-%COMP%] {\n      border-color: var(--prism-border-strong);\n      color: var(--prism-text);\n      background: var(--prism-bg-surface);\n    }\n\n    .layout-menu__backdrop[_ngcontent-%COMP%] {\n      position: fixed;\n      inset: 0;\n      z-index: 40;\n    }\n\n    .layout-menu__dropdown[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 6px);\n      right: 0;\n      z-index: 50;\n      min-width: 240px;\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--prism-radius);\n      box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n      padding: 4px;\n    }\n\n    .layout-menu__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: 100%;\n      padding: 7px 10px;\n      border: none;\n      background: none;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      cursor: pointer;\n      border-radius: var(--prism-radius-sm);\n      text-align: left;\n      transition: background 0.1s;\n    }\n    .layout-menu__item[_ngcontent-%COMP%]:hover { background: var(--prism-bg-surface); }\n\n    .layout-menu__check[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      flex-shrink: 0;\n      color: transparent;\n    }\n    .layout-menu__check--on[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n      color: white;\n    }\n\n    .layout-menu__icon[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .layout-menu__label[_ngcontent-%COMP%] { flex: 1; }\n\n    .layout-menu__kbd[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      opacity: 0.6;\n    }\n    kbd[_ngcontent-%COMP%] {\n      font-family: var(--prism-font-sans);\n      font-size: 11px;\n      padding: 1px 4px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      background: var(--prism-bg-surface);\n      color: var(--prism-text-muted);\n    }\n\n    .layout-menu__divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: var(--prism-border);\n      margin: 4px 0;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismLayoutMenuComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-layout-menu', standalone: true, template: `
+    <div class="layout-menu">
+      <button
+        class="layout-menu__trigger"
+        (click)="open.set(!open())"
+        [class.layout-menu__trigger--active]="open()"
+        title="Layout options"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <circle cx="8" cy="3" r="1.25" fill="currentColor"/>
+          <circle cx="8" cy="8" r="1.25" fill="currentColor"/>
+          <circle cx="8" cy="13" r="1.25" fill="currentColor"/>
+        </svg>
+      </button>
+      @if (open()) {
+        <div class="layout-menu__backdrop" (click)="open.set(false)"></div>
+        <div class="layout-menu__dropdown">
+          <button class="layout-menu__item" (click)="toggle('sidebar')">
+            <span class="layout-menu__check" [class.layout-menu__check--on]="layout.sidebarVisible()">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+            <span class="layout-menu__label">Show sidebar</span>
+            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>S</kbd></span>
+          </button>
+          <button class="layout-menu__item" (click)="toggle('toolbar')">
+            <span class="layout-menu__check" [class.layout-menu__check--on]="layout.toolbarVisible()">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+            <span class="layout-menu__label">Show toolbar</span>
+            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>T</kbd></span>
+          </button>
+          <button class="layout-menu__item" (click)="toggle('addons')">
+            <span class="layout-menu__check" [class.layout-menu__check--on]="layout.addonsVisible()">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+            <span class="layout-menu__label">Show addons panel</span>
+            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>A</kbd></span>
+          </button>
+          <div class="layout-menu__divider"></div>
+          <button class="layout-menu__item" (click)="toggle('orientation')">
+            <span class="layout-menu__icon">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <rect x="1" y="1" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.2"/>
+                <line x1="6" y1="1" x2="6" y2="11" stroke="currentColor" stroke-width="1.2"/>
+              </svg>
+            </span>
+            <span class="layout-menu__label">
+              Panel: {{ layout.addonsOrientation() === 'bottom' ? 'bottom → right' : 'right → bottom' }}
+            </span>
+            <span class="layout-menu__kbd"><kbd>⌥</kbd><kbd>D</kbd></span>
+          </button>
+        </div>
+      }
+    </div>
+  `, styles: ["\n    .layout-menu { position: relative; }\n\n    .layout-menu__trigger {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 30px;\n      height: 30px;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      background: transparent;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      transition: border-color 0.15s, color 0.15s, background 0.15s;\n    }\n    .layout-menu__trigger:hover,\n    .layout-menu__trigger--active {\n      border-color: var(--prism-border-strong);\n      color: var(--prism-text);\n      background: var(--prism-bg-surface);\n    }\n\n    .layout-menu__backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: 40;\n    }\n\n    .layout-menu__dropdown {\n      position: absolute;\n      top: calc(100% + 6px);\n      right: 0;\n      z-index: 50;\n      min-width: 240px;\n      background: var(--prism-bg-elevated);\n      border: 1px solid var(--prism-border-strong);\n      border-radius: var(--prism-radius);\n      box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n      padding: 4px;\n    }\n\n    .layout-menu__item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: 100%;\n      padding: 7px 10px;\n      border: none;\n      background: none;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      cursor: pointer;\n      border-radius: var(--prism-radius-sm);\n      text-align: left;\n      transition: background 0.1s;\n    }\n    .layout-menu__item:hover { background: var(--prism-bg-surface); }\n\n    .layout-menu__check {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      flex-shrink: 0;\n      color: transparent;\n    }\n    .layout-menu__check--on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n      color: white;\n    }\n\n    .layout-menu__icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .layout-menu__label { flex: 1; }\n\n    .layout-menu__kbd {\n      display: flex;\n      gap: 2px;\n      opacity: 0.6;\n    }\n    kbd {\n      font-family: var(--prism-font-sans);\n      font-size: 11px;\n      padding: 1px 4px;\n      border: 1px solid var(--prism-border-strong);\n      border-radius: 3px;\n      background: var(--prism-bg-surface);\n      color: var(--prism-text-muted);\n    }\n\n    .layout-menu__divider {\n      height: 1px;\n      background: var(--prism-border);\n      margin: 4px 0;\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismLayoutMenuComponent, { className: "PrismLayoutMenuComponent", filePath: "app/layout-menu/prism-layout-menu.component.ts", lineNumber: 179 }); })();

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

@@ -0,0 +1,8 @@
+import type { IconPage } from '../../plugin/page.types.js';
+import * as i0 from "@angular/core";
+export declare class PrismIconPageComponent {
+    readonly page: import("@angular/core").InputSignal<IconPage>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismIconPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismIconPageComponent, "prism-icon-page", never, { "page": { "alias": "page"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-icon-page.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-icon-page.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-icon-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;AAE3D,qBAmDa,sBAAsB;IACjC,QAAQ,CAAC,IAAI,gDAA8B;yCADhC,sBAAsB;2CAAtB,sBAAsB;CAElC"}

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

@@ -0,0 +1,42 @@
+import { Component, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.name;
+function PrismIconPageComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵdomElement(1, "div", 2);
+    i0.ɵɵdomElementStart(2, "span", 3);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const icon_r1 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("innerHTML", icon_r1.svg, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(icon_r1.name);
+} }
+export class PrismIconPageComponent {
+    page = input.required(...(ngDevMode ? [{ debugName: "page" }] : []));
+    static ɵfac = function PrismIconPageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismIconPageComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismIconPageComponent, selectors: [["prism-icon-page"]], inputs: { page: [1, "page"] }, decls: 3, vars: 0, consts: [[1, "prism-icon-grid"], [1, "prism-icon-card"], [1, "prism-icon-card__preview", 3, "innerHTML"], [1, "prism-icon-card__name"]], template: function PrismIconPageComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵrepeaterCreate(1, PrismIconPageComponent_For_2_Template, 4, 2, "div", 1, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.page().icons);
+        } }, styles: ["[_nghost-%COMP%] { display: block; padding: 24px; }\n    .prism-icon-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n      gap: 16px;\n    }\n    .prism-icon-card[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n      padding: 16px 8px;\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      background: var(--prism-bg);\n      cursor: default;\n    }\n    .prism-icon-card[_ngcontent-%COMP%]:hover {\n      border-color: var(--prism-primary);\n    }\n    .prism-icon-card__preview[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      color: var(--prism-text);\n    }\n    .prism-icon-card__preview[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }\n    .prism-icon-card__name[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      text-align: center;\n      word-break: break-all;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismIconPageComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-icon-page', standalone: true, template: `
+    <div class="prism-icon-grid">
+      @for (icon of page().icons; track icon.name) {
+        <div class="prism-icon-card">
+          <div class="prism-icon-card__preview" [innerHTML]="icon.svg"></div>
+          <span class="prism-icon-card__name">{{ icon.name }}</span>
+        </div>
+      }
+    </div>
+  `, styles: ["\n    :host { display: block; padding: 24px; }\n    .prism-icon-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n      gap: 16px;\n    }\n    .prism-icon-card {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n      padding: 16px 8px;\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      background: var(--prism-bg);\n      cursor: default;\n    }\n    .prism-icon-card:hover {\n      border-color: var(--prism-primary);\n    }\n    .prism-icon-card__preview {\n      width: 32px;\n      height: 32px;\n      color: var(--prism-text);\n    }\n    .prism-icon-card__preview svg {\n      width: 100%;\n      height: 100%;\n    }\n    .prism-icon-card__name {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      text-align: center;\n      word-break: break-all;\n    }\n  "] }]
+    }], null, { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismIconPageComponent, { className: "PrismIconPageComponent", filePath: "app/page-renderer/prism-icon-page.component.ts", lineNumber: 55 }); })();

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class PrismPageRendererComponent {
+    private readonly nav;
+    protected readonly page: import("@angular/core").Signal<import("../../index.js").StyleguidePage | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismPageRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismPageRendererComponent, "prism-page-renderer", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-page-renderer.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBAyCa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;yCAFnC,0BAA0B;2CAA1B,0BAA0B;CAGtC"}

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

@@ -0,0 +1,72 @@
+import { Component, inject } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import * as i0 from "@angular/core";
+function PrismPageRendererComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "pre", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "json");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const p_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, p_r1.data));
+} }
+function PrismPageRendererComponent_Conditional_0_Case_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PrismPageRendererComponent_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵtemplate(1, PrismPageRendererComponent_Conditional_0_Case_4_ng_container_1_Template, 1, 0, "ng-container", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const p_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngComponentOutlet", p_r1.component);
+} }
+function PrismPageRendererComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0)(1, "h2", 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, PrismPageRendererComponent_Conditional_0_Case_3_Template, 3, 3, "pre", 2)(4, PrismPageRendererComponent_Conditional_0_Case_4_Template, 2, 1, "div", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_3_0;
+    const p_r1 = ctx;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(p_r1.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_3_0 = p_r1.type) === "custom" ? 3 : tmp_3_0 === "component" ? 4 : -1);
+} }
+export class PrismPageRendererComponent {
+    nav = inject(PrismNavigationService);
+    page = this.nav.activePage;
+    static ɵfac = function PrismPageRendererComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPageRendererComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPageRendererComponent, selectors: [["prism-page-renderer"]], decls: 1, vars: 1, consts: [[1, "prism-page-renderer"], [1, "prism-page-renderer__title"], [1, "prism-page-renderer__json"], [1, "prism-page-renderer__component"], [4, "ngComponentOutlet"]], template: function PrismPageRendererComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismPageRendererComponent_Conditional_0_Template, 5, 2, "div", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.page()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 16px 24px;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--prism-text);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-page-renderer__json[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n      white-space: pre-wrap;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPageRendererComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-page-renderer', standalone: true, imports: [NgComponentOutlet], template: `
+    @if (page(); as p) {
+      <div class="prism-page-renderer">
+        <h2 class="prism-page-renderer__title">{{ p.title }}</h2>
+        @switch (p.type) {
+          @case ('custom') {
+            <pre class="prism-page-renderer__json">{{ $any(p).data | json }}</pre>
+          }
+          @case ('component') {
+            <div class="prism-page-renderer__component">
+              <ng-container *ngComponentOutlet="$any(p).component" />
+            </div>
+          }
+        }
+      </div>
+    }
+  `, styles: ["\n    :host { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title {\n      margin: 0;\n      padding: 16px 24px;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--prism-text);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-page-renderer__json {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n      white-space: pre-wrap;\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 46 }); })();

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

@@ -0,0 +1,8 @@
+import type { TokenPage } from '../../plugin/page.types.js';
+import * as i0 from "@angular/core";
+export declare class PrismTokenPageComponent {
+    readonly page: import("@angular/core").InputSignal<TokenPage>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismTokenPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismTokenPageComponent, "prism-token-page", never, { "page": { "alias": "page"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-token-page.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prism-token-page.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-token-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;;AAE5D,qBA2Ha,uBAAuB;IAClC,QAAQ,CAAC,IAAI,iDAA+B;yCADjC,uBAAuB;2CAAvB,uBAAuB;CAEnC"}

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

@@ -0,0 +1,164 @@
+import { Component, input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.title;
+const _forTrack1 = ($index, $item) => $item.name;
+function PrismTokenPageComponent_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "p", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const group_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(group_r1.description);
+} }
+function PrismTokenPageComponent_For_1_For_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 15);
+} if (rf & 2) {
+    const token_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("background", token_r2.value);
+} }
+function PrismTokenPageComponent_For_1_For_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 16);
+} if (rf & 2) {
+    const token_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("width", token_r2.value);
+} }
+function PrismTokenPageComponent_For_1_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 17);
+} if (rf & 2) {
+    const token_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("box-shadow", token_r2.value);
+} }
+function PrismTokenPageComponent_For_1_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 18);
+    i0.ɵɵtext(1, "Aa Bb Cc 123");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const token_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("font-family", token_r2.value);
+} }
+function PrismTokenPageComponent_For_1_For_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const token_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(token_r2.value);
+} }
+function PrismTokenPageComponent_For_1_For_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const token_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(token_r2.description);
+} }
+function PrismTokenPageComponent_For_1_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4)(1, "div", 5);
+    i0.ɵɵconditionalCreate(2, PrismTokenPageComponent_For_1_For_6_Conditional_2_Template, 1, 2, "div", 6);
+    i0.ɵɵconditionalCreate(3, PrismTokenPageComponent_For_1_For_6_Conditional_3_Template, 1, 2, "div", 7);
+    i0.ɵɵconditionalCreate(4, PrismTokenPageComponent_For_1_For_6_Conditional_4_Template, 1, 2, "div", 8);
+    i0.ɵɵconditionalCreate(5, PrismTokenPageComponent_For_1_For_6_Conditional_5_Template, 2, 2, "div", 9);
+    i0.ɵɵconditionalCreate(6, PrismTokenPageComponent_For_1_For_6_Conditional_6_Template, 2, 1, "div", 10);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(7, "div", 11)(8, "code", 12);
+    i0.ɵɵtext(9);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(10, "span", 13);
+    i0.ɵɵtext(11);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(12, PrismTokenPageComponent_For_1_For_6_Conditional_12_Template, 2, 1, "span", 14);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const token_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("ngSwitch", token_r2.visualization);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(token_r2.visualization === "color" ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(token_r2.visualization === "spacing" ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(token_r2.visualization === "shadow" ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(token_r2.visualization === "typography" ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(token_r2.visualization === "raw" ? 6 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(token_r2.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(token_r2.value);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(token_r2.description ? 12 : -1);
+} }
+function PrismTokenPageComponent_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "section", 0)(1, "h3", 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(3, PrismTokenPageComponent_For_1_Conditional_3_Template, 2, 1, "p", 2);
+    i0.ɵɵdomElementStart(4, "div", 3);
+    i0.ɵɵrepeaterCreate(5, PrismTokenPageComponent_For_1_For_6_Template, 13, 9, "div", 4, _forTrack1);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const group_r1 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r1.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(group_r1.description ? 3 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(group_r1.tokens);
+} }
+export class PrismTokenPageComponent {
+    page = input.required(...(ngDevMode ? [{ debugName: "page" }] : []));
+    static ɵfac = function PrismTokenPageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismTokenPageComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismTokenPageComponent, selectors: [["prism-token-page"]], inputs: { page: [1, "page"] }, decls: 2, vars: 0, consts: [[1, "prism-token-group"], [1, "prism-token-group__title"], [1, "prism-token-group__desc"], [1, "prism-token-group__grid"], [1, "prism-token"], [1, "prism-token__preview", 3, "ngSwitch"], [1, "prism-token__swatch", 3, "background"], [1, "prism-token__bar", 3, "width"], [1, "prism-token__shadow-box", 3, "box-shadow"], [1, "prism-token__type-sample", 3, "font-family"], [1, "prism-token__raw"], [1, "prism-token__info"], [1, "prism-token__name"], [1, "prism-token__value"], [1, "prism-token__desc"], [1, "prism-token__swatch"], [1, "prism-token__bar"], [1, "prism-token__shadow-box"], [1, "prism-token__type-sample"]], template: function PrismTokenPageComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵrepeaterCreate(0, PrismTokenPageComponent_For_1_Template, 7, 2, "section", 0, _forTrack0);
+        } if (rf & 2) {
+            i0.ɵɵrepeater(ctx.page().tokenGroups);
+        } }, styles: ["[_nghost-%COMP%] { display: block; padding: 24px; }\n    .prism-token-group[_ngcontent-%COMP%] { margin-bottom: 32px; }\n    .prism-token-group__title[_ngcontent-%COMP%] {\n      margin: 0 0 4px;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--prism-text);\n    }\n    .prism-token-group__desc[_ngcontent-%COMP%] {\n      margin: 0 0 16px;\n      font-size: 13px;\n      color: var(--prism-text-muted);\n    }\n    .prism-token-group__grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n      gap: 12px;\n    }\n    .prism-token[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px;\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      background: var(--prism-bg);\n    }\n    .prism-token__preview[_ngcontent-%COMP%] { flex-shrink: 0; }\n    .prism-token__swatch[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n      border: 1px solid var(--prism-border);\n    }\n    .prism-token__bar[_ngcontent-%COMP%] {\n      height: 8px;\n      min-width: 4px;\n      max-width: 120px;\n      background: var(--prism-primary);\n      border-radius: 4px;\n    }\n    .prism-token__shadow-box[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n      background: #fff;\n    }\n    .prism-token__type-sample[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--prism-text);\n      white-space: nowrap;\n    }\n    .prism-token__raw[_ngcontent-%COMP%] {\n      font-family: monospace;\n      font-size: 12px;\n      color: var(--prism-text-muted);\n    }\n    .prism-token__info[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n    .prism-token__name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--prism-text);\n    }\n    .prism-token__value[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n    }\n    .prism-token__desc[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTokenPageComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-token-page', standalone: true, template: `
+    @for (group of page().tokenGroups; track group.title) {
+      <section class="prism-token-group">
+        <h3 class="prism-token-group__title">{{ group.title }}</h3>
+        @if (group.description) {
+          <p class="prism-token-group__desc">{{ group.description }}</p>
+        }
+        <div class="prism-token-group__grid">
+          @for (token of group.tokens; track token.name) {
+            <div class="prism-token">
+              <div class="prism-token__preview" [ngSwitch]="token.visualization">
+                @if (token.visualization === 'color') {
+                  <div class="prism-token__swatch" [style.background]="token.value"></div>
+                }
+                @if (token.visualization === 'spacing') {
+                  <div class="prism-token__bar" [style.width]="token.value"></div>
+                }
+                @if (token.visualization === 'shadow') {
+                  <div class="prism-token__shadow-box" [style.box-shadow]="token.value"></div>
+                }
+                @if (token.visualization === 'typography') {
+                  <div class="prism-token__type-sample" [style.font-family]="token.value">Aa Bb Cc 123</div>
+                }
+                @if (token.visualization === 'raw') {
+                  <div class="prism-token__raw">{{ token.value }}</div>
+                }
+              </div>
+              <div class="prism-token__info">
+                <code class="prism-token__name">{{ token.name }}</code>
+                <span class="prism-token__value">{{ token.value }}</span>
+                @if (token.description) {
+                  <span class="prism-token__desc">{{ token.description }}</span>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </section>
+    }
+  `, styles: ["\n    :host { display: block; padding: 24px; }\n    .prism-token-group { margin-bottom: 32px; }\n    .prism-token-group__title {\n      margin: 0 0 4px;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--prism-text);\n    }\n    .prism-token-group__desc {\n      margin: 0 0 16px;\n      font-size: 13px;\n      color: var(--prism-text-muted);\n    }\n    .prism-token-group__grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n      gap: 12px;\n    }\n    .prism-token {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px;\n      border: 1px solid var(--prism-border);\n      border-radius: 6px;\n      background: var(--prism-bg);\n    }\n    .prism-token__preview { flex-shrink: 0; }\n    .prism-token__swatch {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n      border: 1px solid var(--prism-border);\n    }\n    .prism-token__bar {\n      height: 8px;\n      min-width: 4px;\n      max-width: 120px;\n      background: var(--prism-primary);\n      border-radius: 4px;\n    }\n    .prism-token__shadow-box {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n      background: #fff;\n    }\n    .prism-token__type-sample {\n      font-size: 16px;\n      color: var(--prism-text);\n      white-space: nowrap;\n    }\n    .prism-token__raw {\n      font-family: monospace;\n      font-size: 12px;\n      color: var(--prism-text-muted);\n    }\n    .prism-token__info {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n    .prism-token__name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--prism-text);\n    }\n    .prism-token__value {\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n    }\n    .prism-token__desc {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n    }\n  "] }]
+    }], null, { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismTokenPageComponent, { className: "PrismTokenPageComponent", filePath: "app/page-renderer/prism-token-page.component.ts", lineNumber: 127 }); })();

package/dist/app/panels/a11y/a11y-audit.service.d.ts

@@ -0,0 +1,17 @@
+import type { AxeResults } from 'axe-core';
+import type { A11yCoreConfig, A11yScoreResult } from './a11y.types.js';
+import * as i0 from "@angular/core";
+export declare function calculateScore(results: AxeResults): A11yScoreResult;
+export declare function runCoreAudit(element: Element, config?: A11yCoreConfig): Promise<AxeResults>;
+export declare class A11yAuditService {
+    readonly results: import("@angular/core").WritableSignal<AxeResults | null>;
+    readonly running: import("@angular/core").WritableSignal<boolean>;
+    readonly error: import("@angular/core").WritableSignal<string | null>;
+    readonly scoreResult: import("@angular/core").Signal<A11yScoreResult | null>;
+    private timer;
+    scheduleAudit(element: Element, config?: A11yCoreConfig, debounceMs?: number): void;
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yAuditService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<A11yAuditService>;
+}
+//# sourceMappingURL=a11y-audit.service.d.ts.map

package/dist/app/panels/a11y/a11y-audit.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-audit.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-audit.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAEvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,UAAU,GAAG,eAAe,CAkBnE;AAED,wBAAsB,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAYjG;AAED,qBACa,gBAAgB;IAC3B,QAAQ,CAAC,OAAO,4DAAmC;IACnD,QAAQ,CAAC,OAAO,kDAAiB;IACjC,QAAQ,CAAC,KAAK,wDAA+B;IAE7C,QAAQ,CAAC,WAAW,yDAGjB;IAEH,OAAO,CAAC,KAAK,CAA8C;IAE3D,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,UAAU,SAAM,GAAG,IAAI;IAmBhF,KAAK,IAAI,IAAI;yCA/BF,gBAAgB;6CAAhB,gBAAgB;CAwC5B"}