@ng-prism/core 21.4.5 → 21.5.1

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

@@ -0,0 +1,207 @@
+import { Component, inject, computed, ChangeDetectionStrategy, } from '@angular/core';
+import { PrismIconComponent } from '../icons/prism-icon.component.js';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import { A11yAuditService } from '../panels/a11y/a11y-audit.service.js';
+import { PrismStatComponent } from './prism-stat.component.js';
+import * as i0 from "@angular/core";
+function PrismComponentHeadComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(c_r1.meta.showcaseConfig.description);
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tag_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tag_r2);
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵrepeaterCreate(1, PrismComponentHeadComponent_Conditional_0_Conditional_14_For_2_Template, 2, 1, "span", 13, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(c_r1.meta.showcaseConfig.tags);
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 9);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.variantCount());
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 10);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.coveragePercent() + "%")("pill", ctx_r2.coveragePercent() >= 90 ? "OK" : "WARN")("pillVariant", ctx_r2.coveragePercent() >= 90 ? "ok" : "warn");
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 11);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.bundleSize());
+} }
+function PrismComponentHeadComponent_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-stat", 12);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.a11yScore())("pillVariant", ctx_r2.a11yScore() >= 90 ? "ok" : "warn");
+} }
+function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 0)(1, "div", 1)(2, "div")(3, "div", 2)(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "prism-icon", 3);
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "h1", 4);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(11, "span", 5);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(13, PrismComponentHeadComponent_Conditional_0_Conditional_13_Template, 2, 1, "p", 6);
+    i0.ɵɵconditionalCreate(14, PrismComponentHeadComponent_Conditional_0_Conditional_14_Template, 3, 0, "div", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 8);
+    i0.ɵɵconditionalCreate(16, PrismComponentHeadComponent_Conditional_0_Conditional_16_Template, 1, 1, "prism-stat", 9);
+    i0.ɵɵconditionalCreate(17, PrismComponentHeadComponent_Conditional_0_Conditional_17_Template, 1, 3, "prism-stat", 10);
+    i0.ɵɵconditionalCreate(18, PrismComponentHeadComponent_Conditional_0_Conditional_18_Template, 1, 1, "prism-stat", 11);
+    i0.ɵɵconditionalCreate(19, PrismComponentHeadComponent_Conditional_0_Conditional_19_Template, 1, 2, "prism-stat", 12);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const c_r1 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.category());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", 10);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(c_r1.meta.showcaseConfig.title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", c_r1.meta.showcaseConfig.title, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("<", c_r1.meta.componentMeta.selector, ">");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(c_r1.meta.showcaseConfig.description ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((c_r1.meta.showcaseConfig.tags == null ? null : c_r1.meta.showcaseConfig.tags.length) ? 14 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.variantCount() > 0 ? 16 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.coveragePercent() !== null ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.bundleSize() !== null ? 18 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.a11yScore() !== null ? 19 : -1);
+} }
+export class PrismComponentHeadComponent {
+    navigationService = inject(PrismNavigationService);
+    auditService = inject(A11yAuditService);
+    comp = computed(() => this.navigationService.activeComponent(), ...(ngDevMode ? [{ debugName: "comp" }] : []));
+    category = computed(() => {
+        const c = this.comp();
+        return c?.meta.showcaseConfig.category ?? 'Uncategorized';
+    }, ...(ngDevMode ? [{ debugName: "category" }] : []));
+    variantCount = computed(() => {
+        const c = this.comp();
+        return c?.meta.showcaseConfig.variants?.length ?? 0;
+    }, ...(ngDevMode ? [{ debugName: "variantCount" }] : []));
+    coveragePercent = computed(() => {
+        const meta = this.componentMeta();
+        const coverage = meta?.['coverage'];
+        if (coverage?.['found'] && typeof coverage['score'] === 'number')
+            return coverage['score'];
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "coveragePercent" }] : []));
+    bundleSize = computed(() => {
+        const meta = this.componentMeta();
+        const perf = meta?.['perf'];
+        const bundle = perf?.['bundle'];
+        if (bundle && typeof bundle['gzipKb'] === 'number')
+            return bundle['gzipKb'] + ' kb';
+        if (bundle && typeof bundle['sizeKb'] === 'number')
+            return bundle['sizeKb'] + ' kb';
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "bundleSize" }] : []));
+    a11yScore = computed(() => {
+        return this.auditService.scoreResult()?.score ?? null;
+    }, ...(ngDevMode ? [{ debugName: "a11yScore" }] : []));
+    componentMeta = computed(() => {
+        const c = this.comp();
+        const meta = c?.meta.showcaseConfig.meta;
+        return meta && typeof meta === 'object'
+            ? meta
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "componentMeta" }] : []));
+    static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 20, 11, "section", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
+        } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n    .comp-head[_ngcontent-%COMP%] {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, #ec4899 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb[_ngcontent-%COMP%]   prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n    .comp-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-desc[_ngcontent-%COMP%] {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-component-head', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismIconComponent, PrismStatComponent], template: `
+    @if (comp(); as c) {
+    <section class="comp-head">
+      <div class="comp-head-top">
+        <div>
+          <div class="comp-crumb">
+            <span>{{ category() }}</span>
+            <prism-icon name="chevron-right" [size]="10" />
+            <span>{{ c.meta.showcaseConfig.title }}</span>
+          </div>
+          <h1 class="comp-title">
+            {{ c.meta.showcaseConfig.title }}
+            <span class="comp-selector"
+              >&lt;{{ c.meta.componentMeta.selector }}&gt;</span
+            >
+          </h1>
+          @if (c.meta.showcaseConfig.description) {
+          <p class="comp-desc">{{ c.meta.showcaseConfig.description }}</p>
+          } @if (c.meta.showcaseConfig.tags?.length) {
+          <div class="comp-tags">
+            @for (tag of c.meta.showcaseConfig.tags; track tag) {
+            <span class="comp-tag">{{ tag }}</span>
+            }
+          </div>
+          }
+        </div>
+        <div class="comp-head-stats">
+          @if (variantCount() > 0) {
+          <prism-stat [value]="variantCount()" label="Variants" />
+          } @if (coveragePercent() !== null) {
+          <prism-stat
+            [value]="coveragePercent()! + '%'"
+            label="Coverage"
+            [pill]="coveragePercent()! >= 90 ? 'OK' : 'WARN'"
+            [pillVariant]="coveragePercent()! >= 90 ? 'ok' : 'warn'"
+          />
+          } @if (bundleSize() !== null) {
+          <prism-stat [value]="bundleSize()!" label="Bundle" />
+          } @if (a11yScore() !== null) {
+          <prism-stat
+            [value]="a11yScore()!"
+            label="Score"
+            pill="A11y"
+            [pillVariant]="a11yScore()! >= 90 ? 'ok' : 'warn'"
+          />
+          }
+        </div>
+      </div>
+    </section>
+    }
+  `, styles: ["\n    :host { display: block; flex-shrink: 0; }\n\n    .comp-head {\n      padding: 12px 28px;\n      background: var(--prism-bg);\n      border-bottom: 1px solid var(--prism-border);\n      position: relative;\n    }\n    .comp-head::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 6px;\n      background: linear-gradient(180deg, var(--prism-primary-from) 0%, #ec4899 50%, var(--prism-primary-to) 100%);\n    }\n\n    .comp-head-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .comp-crumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: var(--fs-sm);\n      color: var(--prism-text-ghost);\n      margin-bottom: 6px;\n      font-weight: 500;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n    .comp-crumb prism-icon { opacity: 0.6; }\n\n    .comp-title {\n      margin: 0;\n      font-size: var(--fs-2xl);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .comp-selector {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-primary);\n      padding: 3px 8px;\n      border-radius: var(--radius-sm);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      font-weight: 500;\n    }\n\n    .comp-desc {\n      margin: 6px 0 0;\n      font-size: var(--fs-lg);\n      color: var(--prism-text-2);\n      max-width: 72ch;\n      line-height: 1.55;\n    }\n\n    .comp-tags {\n      margin-top: 10px;\n      display: flex;\n      gap: 6px;\n      flex-wrap: wrap;\n    }\n    .comp-tag {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n\n    .comp-head-stats {\n      display: flex;\n      gap: 18px;\n      flex-shrink: 0;\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 160 }); })();

package/dist/app/component-head/prism-stat.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class PrismStatComponent {
+    readonly value: import("@angular/core").InputSignal<string | number>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly pill: import("@angular/core").InputSignal<string | undefined>;
+    readonly pillVariant: import("@angular/core").InputSignal<"ok" | "warn">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismStatComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismStatComponent, "prism-stat", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "pillVariant": { "alias": "pillVariant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-stat.component.d.ts.map

package/dist/app/component-head/prism-stat.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-stat.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-head/prism-stat.component.ts"],"names":[],"mappings":";AAEA,qBAwDa,kBAAkB;IAC7B,QAAQ,CAAC,KAAK,uDAAqC;IACnD,QAAQ,CAAC,KAAK,8CAA4B;IAC1C,QAAQ,CAAC,IAAI,0DAAmB;IAChC,QAAQ,CAAC,WAAW,qDAA8B;yCAJvC,kBAAkB;2CAAlB,kBAAkB;CAK9B"}

package/dist/app/component-head/prism-stat.component.js

@@ -0,0 +1,52 @@
+import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import * as i0 from "@angular/core";
+function PrismStatComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("warn", ctx_r0.pillVariant() === "warn");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.pill());
+} }
+export class PrismStatComponent {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    pill = input(...(ngDevMode ? [undefined, { debugName: "pill" }] : []));
+    pillVariant = input('ok', ...(ngDevMode ? [{ debugName: "pillVariant" }] : []));
+    static ɵfac = function PrismStatComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismStatComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { value: [1, "value"], label: [1, "label"], pill: [1, "pill"], pillVariant: [1, "pillVariant"] }, decls: 6, vars: 3, consts: [[1, "stat"], [1, "stat-val"], [1, "pill", 3, "warn"], [1, "stat-lbl"], [1, "pill"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵconditionalCreate(3, PrismStatComponent_Conditional_3_Template, 2, 3, "span", 2);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(4, "div", 3);
+            i0.ɵɵtext(5);
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.value(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.pill() ? 3 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.label());
+        } }, styles: [".stat[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 2px;\n      min-width: 64px;\n    }\n    .stat-val[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill[_ngcontent-%COMP%] {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .stat-lbl[_ngcontent-%COMP%] {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="stat">
+      <div class="stat-val">
+        {{ value() }}
+        @if (pill()) {
+        <span class="pill" [class.warn]="pillVariant() === 'warn'">{{
+          pill()
+        }}</span>
+        }
+      </div>
+      <div class="stat-lbl">{{ label() }}</div>
+    </div>
+  `, styles: ["\n    .stat {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 2px;\n      min-width: 64px;\n    }\n    .stat-val {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xl);\n      font-weight: 600;\n      color: var(--prism-text);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    .pill {\n      padding: 0 5px;\n      font-size: 9.5px;\n      border-radius: 3px;\n      background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n      color: var(--prism-success);\n      font-weight: 700;\n      letter-spacing: 0.04em;\n    }\n    .pill.warn {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .stat-lbl {\n      font-size: var(--fs-xs);\n      color: var(--prism-text-ghost);\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      font-weight: 600;\n    }\n  "] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], pillVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillVariant", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismStatComponent, { className: "PrismStatComponent", filePath: "app/component-head/prism-stat.component.ts", lineNumber: 59 }); })();

package/dist/app/controls/boolean-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAEA,qBAiFa,uBAAuB;IAClC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJ9B,uBAAuB;2CAAvB,uBAAuB;CAKnC"}
+{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAOA,qBA+Ca,uBAAuB;IAClC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJ9B,uBAAuB;2CAAvB,uBAAuB;CAKnC"}

package/dist/app/controls/boolean-control.component.js

@@ -1,58 +1,30 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
 import * as i0 from "@angular/core";
-function BooleanControlComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "code", 3);
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.typeName());
-} }
 export class BooleanControlComponent {
     value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     typeName = input('', ...(ngDevMode ? [{ debugName: "typeName" }] : []));
     valueChange = output();
     static ɵfac = function BooleanControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BooleanControlComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BooleanControlComponent, selectors: [["prism-boolean-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 7, vars: 5, consts: [[1, "prism-boolean-control"], [1, "prism-boolean-control__label"], [1, "prism-boolean-control__label-text"], [1, "prism-boolean-control__type"], ["role", "switch", 1, "prism-boolean-control__toggle", 3, "click"], [1, "prism-boolean-control__thumb"]], template: function BooleanControlComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
-            i0.ɵɵtext(3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BooleanControlComponent, selectors: [["prism-boolean-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 3, consts: [["role", "switch", 1, "ctl-toggle", 3, "click"]], template: function BooleanControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "button", 0);
+            i0.ɵɵdomListener("click", function BooleanControlComponent_Template_button_click_0_listener() { return ctx.valueChange.emit(!ctx.value()); });
             i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(4, BooleanControlComponent_Conditional_4_Template, 2, 1, "code", 3);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(5, "button", 4);
-            i0.ɵɵdomListener("click", function BooleanControlComponent_Template_button_click_5_listener() { return ctx.valueChange.emit(!ctx.value()); });
-            i0.ɵɵdomElement(6, "span", 5);
-            i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.typeName() ? 4 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("prism-boolean-control__toggle--on", ctx.value());
+            i0.ɵɵclassProp("on", ctx.value());
             i0.ɵɵattribute("aria-checked", ctx.value());
-        } }, styles: [".prism-boolean-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 16px;\n      min-height: 36px;\n    }\n\n    .prism-boolean-control__label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-boolean-control__label-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n    .prism-boolean-control__type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n    }\n\n    .prism-boolean-control__toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 36px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid var(--prism-border-strong);\n      background: var(--prism-bg-surface);\n      cursor: pointer;\n      transition: background 0.2s, border-color 0.2s;\n      padding: 0;\n      flex-shrink: 0;\n    }\n\n    .prism-boolean-control__toggle--on[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n\n    .prism-boolean-control__thumb[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 2px;\n      left: 2px;\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background: var(--prism-text-ghost);\n      transition: transform 0.2s, background 0.2s;\n    }\n\n    .prism-boolean-control__toggle--on[_ngcontent-%COMP%]   .prism-boolean-control__thumb[_ngcontent-%COMP%] {\n      transform: translateX(16px);\n      background: var(--prism-bg-elevated);\n    }"] });
+        } }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      transition: all var(--dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      transition: transform var(--dur-fast), background var(--dur-fast);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n    .ctl-toggle.on[_ngcontent-%COMP%]::after {\n      transform: translateX(16px);\n      background: white;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-boolean-control', standalone: true, template: `
-    <div class="prism-boolean-control">
-      <div class="prism-boolean-control__label">
-        <span class="prism-boolean-control__label-text">{{ label() }}</span>
-        @if (typeName()) { <code class="prism-boolean-control__type">{{ typeName() }}</code> }
-      </div>
-      <button
-        class="prism-boolean-control__toggle"
-        [class.prism-boolean-control__toggle--on]="value()"
-        (click)="valueChange.emit(!value())"
-        role="switch"
-        [attr.aria-checked]="value()"
-      >
-        <span class="prism-boolean-control__thumb"></span>
-      </button>
-    </div>
-  `, styles: ["\n    .prism-boolean-control {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 16px;\n      min-height: 36px;\n    }\n\n    .prism-boolean-control__label {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-boolean-control__label-text {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n    .prism-boolean-control__type {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n    }\n\n    .prism-boolean-control__toggle {\n      position: relative;\n      width: 36px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid var(--prism-border-strong);\n      background: var(--prism-bg-surface);\n      cursor: pointer;\n      transition: background 0.2s, border-color 0.2s;\n      padding: 0;\n      flex-shrink: 0;\n    }\n\n    .prism-boolean-control__toggle--on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n\n    .prism-boolean-control__thumb {\n      position: absolute;\n      top: 2px;\n      left: 2px;\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background: var(--prism-text-ghost);\n      transition: transform 0.2s, background 0.2s;\n    }\n\n    .prism-boolean-control__toggle--on .prism-boolean-control__thumb {\n      transform: translateX(16px);\n      background: var(--prism-bg-elevated);\n    }\n  "] }]
+        args: [{ selector: 'prism-boolean-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      class="ctl-toggle"
+      [class.on]="value()"
+      (click)="valueChange.emit(!value())"
+      role="switch"
+      [attr.aria-checked]="value()"
+    ></button>
+  `, styles: ["\n    .ctl-toggle {\n      position: relative;\n      width: 34px;\n      height: 18px;\n      border-radius: 9px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      transition: all var(--dur-fast);\n      cursor: pointer;\n      flex-shrink: 0;\n      padding: 0;\n    }\n    .ctl-toggle::after {\n      content: '';\n      position: absolute;\n      left: 2px;\n      top: 2px;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      transition: transform var(--dur-fast), background var(--dur-fast);\n    }\n    .ctl-toggle.on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n    .ctl-toggle.on::after {\n      transform: translateX(16px);\n      background: white;\n    }\n  "] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 84 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 55 }); })();

package/dist/app/controls/json-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAgBA,qBAyIa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA4D;IACvF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAQ/B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW1B,UAAU,IAAI,IAAI;yCAvCP,oBAAoB;2CAApB,oBAAoB;CA+ChC"}
+{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAyBA,qBAuFa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAC3D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAQ/B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW1B,UAAU,IAAI,IAAI;yCAxCP,oBAAoB;2CAApB,oBAAoB;CAgDhC"}

package/dist/app/controls/json-control.component.js

@@ -1,18 +1,9 @@
-import { Component, computed, input, output, signal, viewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, computed, input, output, signal, viewChild, } from '@angular/core';
 import * as i0 from "@angular/core";
 const _c0 = ["textareaEl"];
 const _c1 = ["preEl"];
-function JsonControlComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "code", 5);
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.typeName());
-} }
-function JsonControlComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 11);
+function JsonControlComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 7);
     i0.ɵɵtext(1, "Invalid JSON");
     i0.ɵɵdomElementEnd();
 } }
@@ -79,58 +70,46 @@ export class JsonControlComponent {
             i0.ɵɵviewQuerySignal(ctx.textareaEl, _c0, 5)(ctx.preEl, _c1, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(2);
-        } }, inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 13, vars: 5, consts: [["preEl", ""], ["textareaEl", ""], [1, "prism-json-control"], [1, "prism-json-control__label"], [1, "prism-json-control__label-text"], [1, "prism-json-control__type"], [1, "prism-json-control__editor"], [1, "prism-json-control__overlay"], [1, "prism-json-control__pre"], [3, "innerHTML"], ["spellcheck", "false", 1, "prism-json-control__input", 3, "input", "scroll", "value"], [1, "prism-json-control__error"]], template: function JsonControlComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3)(2, "span", 4);
-            i0.ɵɵtext(3);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(4, JsonControlComponent_Conditional_4_Template, 2, 1, "code", 5);
+        } }, inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 8, vars: 3, consts: [["preEl", ""], ["textareaEl", ""], [1, "json-editor"], [1, "json-overlay"], [1, "json-pre"], [3, "innerHTML"], ["spellcheck", "false", 1, "json-input", 3, "input", "scroll", "value"], [1, "json-error"]], template: function JsonControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3)(2, "pre", 4, 0);
+            i0.ɵɵdomElement(4, "code", 5);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(5, "div", 6)(6, "div", 7)(7, "pre", 8, 0);
-            i0.ɵɵdomElement(9, "code", 9);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(10, "textarea", 10, 1);
-            i0.ɵɵdomListener("input", function JsonControlComponent_Template_textarea_input_10_listener($event) { return ctx.onInput($event.target.value); })("scroll", function JsonControlComponent_Template_textarea_scroll_10_listener() { return ctx.syncScroll(); });
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(12, JsonControlComponent_Conditional_12_Template, 2, 0, "span", 11);
+            i0.ɵɵdomElementStart(5, "textarea", 6, 1);
+            i0.ɵɵdomListener("input", function JsonControlComponent_Template_textarea_input_5_listener($event) { return ctx.onInput($event.target.value); })("scroll", function JsonControlComponent_Template_textarea_scroll_5_listener() { return ctx.syncScroll(); });
             i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(7, JsonControlComponent_Conditional_7_Template, 2, 0, "span", 7);
+            i0.ɵɵdomElementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.typeName() ? 4 : -1);
-            i0.ɵɵadvance(5);
+            i0.ɵɵadvance(4);
             i0.ɵɵdomProperty("innerHTML", ctx.highlightedHtml(), i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance();
             i0.ɵɵdomProperty("value", ctx.displayText());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.parseError() ? 12 : -1);
-        } }, styles: [".prism-json-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-json-control__label[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 140px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n      padding-top: 4px;\n    }\n    .prism-json-control__label-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .prism-json-control__type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .prism-json-control__editor[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .prism-json-control__overlay[_ngcontent-%COMP%] {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      overflow: hidden;\n      transition: border-color 0.15s;\n    }\n    .prism-json-control__overlay[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\n    }\n\n    .prism-json-control__pre[_ngcontent-%COMP%], \n   .prism-json-control__input[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .prism-json-control__pre[_ngcontent-%COMP%] {\n      min-height: 56px;\n      pointer-events: none;\n    }\n\n    .prism-json-control__pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    [_nghost-%COMP%]     .jh-key { color: #93c5fd; }\n    [_nghost-%COMP%]     .jh-string { color: #7dd3fc; }\n    [_nghost-%COMP%]     .jh-number { color: #fbbf24; }\n    [_nghost-%COMP%]     .jh-bool { color: #a78bfa; }\n    [_nghost-%COMP%]     .jh-null { color: var(--prism-text-ghost); }\n\n    .prism-json-control__input[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .prism-json-control__input[_ngcontent-%COMP%]:focus {\n      outline: none;\n    }\n    .prism-json-control__input[_ngcontent-%COMP%]::selection {\n      background: rgba(99, 102, 241, 0.3);\n    }\n\n    .prism-json-control__error[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #ef4444;\n      display: block;\n      margin-top: 2px;\n    }"] });
+            i0.ɵɵconditional(ctx.parseError() ? 7 : -1);
+        } }, styles: [".json-editor[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n    .json-overlay[_ngcontent-%COMP%] {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      overflow: hidden;\n      transition: border-color var(--dur-fast);\n    }\n    .json-overlay[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n\n    .json-pre[_ngcontent-%COMP%], .json-input[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--font-mono);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .json-pre[_ngcontent-%COMP%] {\n      min-height: 56px;\n      pointer-events: none;\n    }\n    .json-pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: inherit; }\n\n    [_nghost-%COMP%]     .jh-key { color: #93c5fd; }\n    [_nghost-%COMP%]     .jh-string { color: #86efac; }\n    [_nghost-%COMP%]     .jh-number { color: #fbbf24; }\n    [_nghost-%COMP%]     .jh-bool { color: #a78bfa; }\n    [_nghost-%COMP%]     .jh-null { color: var(--prism-text-ghost); }\n\n    .json-input[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .json-input[_ngcontent-%COMP%]:focus { outline: none; }\n    .json-input[_ngcontent-%COMP%]::selection { background: rgba(99, 102, 241, 0.3); }\n\n    .json-error[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-danger);\n      display: block;\n      margin-top: 2px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-json-control', standalone: true, template: `
-    <div class="prism-json-control">
-      <div class="prism-json-control__label">
-        <span class="prism-json-control__label-text">{{ label() }}</span>
-        @if (typeName()) { <code class="prism-json-control__type">{{ typeName() }}</code> }
-      </div>
-      <div class="prism-json-control__editor">
-        <div class="prism-json-control__overlay">
-          <pre class="prism-json-control__pre" #preEl><code [innerHTML]="highlightedHtml()"></code></pre>
-          <textarea
-            #textareaEl
-            class="prism-json-control__input"
-            [value]="displayText()"
-            (input)="onInput($any($event.target).value)"
-            (scroll)="syncScroll()"
-            spellcheck="false"
-          ></textarea>
-        </div>
-        @if (parseError()) {
-          <span class="prism-json-control__error">Invalid JSON</span>
-        }
+        args: [{ selector: 'prism-json-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="json-editor">
+      <div class="json-overlay">
+        <pre
+          class="json-pre"
+          #preEl
+        ><code [innerHTML]="highlightedHtml()"></code></pre>
+        <textarea
+          #textareaEl
+          class="json-input"
+          [value]="displayText()"
+          (input)="onInput($any($event.target).value)"
+          (scroll)="syncScroll()"
+          spellcheck="false"
+        ></textarea>
       </div>
+      @if (parseError()) {
+      <span class="json-error">Invalid JSON</span>
+      }
     </div>
-  `, styles: ["\n    .prism-json-control {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-json-control__label {\n      flex-shrink: 0;\n      width: 140px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n      padding-top: 4px;\n    }\n    .prism-json-control__label-text {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .prism-json-control__type {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .prism-json-control__editor {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .prism-json-control__overlay {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      overflow: hidden;\n      transition: border-color 0.15s;\n    }\n    .prism-json-control__overlay:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\n    }\n\n    .prism-json-control__pre,\n    .prism-json-control__input {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--prism-font-mono, monospace);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .prism-json-control__pre {\n      min-height: 56px;\n      pointer-events: none;\n    }\n\n    .prism-json-control__pre code {\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :host ::ng-deep .jh-key { color: #93c5fd; }\n    :host ::ng-deep .jh-string { color: #7dd3fc; }\n    :host ::ng-deep .jh-number { color: #fbbf24; }\n    :host ::ng-deep .jh-bool { color: #a78bfa; }\n    :host ::ng-deep .jh-null { color: var(--prism-text-ghost); }\n\n    .prism-json-control__input {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .prism-json-control__input:focus {\n      outline: none;\n    }\n    .prism-json-control__input::selection {\n      background: rgba(99, 102, 241, 0.3);\n    }\n\n    .prism-json-control__error {\n      font-size: 11px;\n      color: #ef4444;\n      display: block;\n      margin-top: 2px;\n    }\n  "] }]
+  `, styles: ["\n    .json-editor { flex: 1; min-width: 0; }\n\n    .json-overlay {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      overflow: hidden;\n      transition: border-color var(--dur-fast);\n    }\n    .json-overlay:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n\n    .json-pre, .json-input {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--font-mono);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .json-pre {\n      min-height: 56px;\n      pointer-events: none;\n    }\n    .json-pre code { font-family: inherit; }\n\n    :host ::ng-deep .jh-key { color: #93c5fd; }\n    :host ::ng-deep .jh-string { color: #86efac; }\n    :host ::ng-deep .jh-number { color: #fbbf24; }\n    :host ::ng-deep .jh-bool { color: #a78bfa; }\n    :host ::ng-deep .jh-null { color: var(--prism-text-ghost); }\n\n    .json-input {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .json-input:focus { outline: none; }\n    .json-input::selection { background: rgba(99, 102, 241, 0.3); }\n\n    .json-error {\n      font-size: 11px;\n      color: var(--prism-danger);\n      display: block;\n      margin-top: 2px;\n    }\n  "] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], preEl: [{ type: i0.ViewChild, args: ['preEl', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsonControlComponent, { className: "JsonControlComponent", filePath: "app/controls/json-control.component.ts", lineNumber: 154 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsonControlComponent, { className: "JsonControlComponent", filePath: "app/controls/json-control.component.ts", lineNumber: 113 }); })();

package/dist/app/controls/number-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/number-control.component.ts"],"names":[],"mappings":";AAEA,qBA0Ea,sBAAsB;IACjC,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ7B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}
+{"version":3,"file":"number-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/number-control.component.ts"],"names":[],"mappings":";AAOA,qBAiDa,sBAAsB;IACjC,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ7B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}