@ng-prism/core 22.6.0 → 22.7.0-beta.1

package/dist/app/panels/a11y/severity.js

@@ -0,0 +1,12 @@
+const SEVERITY = {
+    critical: { label: 'Critical', tone: 'danger', variant: 'soft' },
+    // Serious fails the build gate like critical does, so it shares the tone and
+    // is told apart by its outline and its word, not by a fifth colour.
+    serious: { label: 'Serious', tone: 'danger', variant: 'outline' },
+    moderate: { label: 'Moderate', tone: 'warn', variant: 'soft' },
+    minor: { label: 'Minor', tone: 'neutral', variant: 'soft' }
+};
+/** The badge of an axe impact level; an unknown impact reads as minor. */
+export function severityBadge(impact) {
+    return SEVERITY[impact] ?? SEVERITY.minor;
+}

package/dist/app/panels/controls/non-editable-input-types.d.ts

@@ -1,3 +1,11 @@
-import type { InputMeta } from '../../../plugin/plugin.types.js';
+import type { InputMeta, RuntimeComponent } from '../../../plugin/plugin.types.js';
 export declare function isNonEditableInputType(input: InputMeta): boolean;
+/**
+ * Why the controls panel cannot edit `input` in variant `variantIndex`, `null`
+ * when it can: the composition of the variant does not bind it, because its
+ * template sets it or because its default is unknown, or its type is a
+ * framework reference. The first two hold for the variant, the last for every
+ * variant.
+ */
+export declare function nonEditableReason(input: InputMeta, comp: RuntimeComponent, variantIndex: number): string | null;
 //# sourceMappingURL=non-editable-input-types.d.ts.map

package/dist/app/panels/controls/non-editable-input-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"non-editable-input-types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/non-editable-input-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAcjE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAKhE"}
+{"version":3,"file":"non-editable-input-types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/non-editable-input-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAenF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAKhE;AAOD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK/G"}

package/dist/app/panels/controls/non-editable-input-types.js

@@ -1,3 +1,4 @@
+import { activeCase } from '../../renderer/composition.js';
 /**
  * Angular framework reference types that aren't meaningfully editable via
  * a JSON textarea (they wrap live framework objects, not data). When a
@@ -14,3 +15,20 @@ export function isNonEditableInputType(input) {
         return false;
     return NON_EDITABLE_TYPE_PATTERN.test(raw);
 }
+const UNBOUND_REASONS = {
+    template: 'Set by the template of this variant',
+    default: 'Its default is unknown to ng-prism'
+};
+/**
+ * Why the controls panel cannot edit `input` in variant `variantIndex`, `null`
+ * when it can: the composition of the variant does not bind it, because its
+ * template sets it or because its default is unknown, or its type is a
+ * framework reference. The first two hold for the variant, the last for every
+ * variant.
+ */
+export function nonEditableReason(input, comp, variantIndex) {
+    const unbound = activeCase(comp, variantIndex)?.unbound.find(({ name }) => name === input.name);
+    if (unbound)
+        return UNBOUND_REASONS[unbound.reason];
+    return isNonEditableInputType(input) ? 'Framework reference type' : null;
+}

package/dist/app/panels/controls/prism-controls-panel.component.d.ts

@@ -8,7 +8,8 @@ export declare class PrismControlsPanelComponent {
     private readonly pluginService;
     readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
     protected getCustomControl(input: InputMeta): ControlDefinition | null;
-    protected isNonEditable(input: InputMeta): boolean;
+    /** Why `input` cannot be edited in the active variant, `null` when it can. */
+    protected notEditableReason(input: InputMeta, comp: RuntimeComponent): string | null;
     protected asBoolean(val: unknown): boolean;
     protected asNumber(val: unknown): number;
     protected asString(val: unknown): string;

package/dist/app/panels/controls/prism-controls-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAMtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBAQa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAItE,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO;IAIlD,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAvB/B,2BAA2B;2CAA3B,2BAA2B;CA0BvC"}
+{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAMtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAKhF,qBAiBa,2BAA2B;IACpC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAItE,8EAA8E;IAC9E,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;IAIpF,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAxB/B,2BAA2B;2CAA3B,2BAA2B;CA2BvC"}

package/dist/app/panels/controls/prism-controls-panel.component.js

@@ -8,121 +8,120 @@ import { UnionControlComponent } from '../../controls/union-control.component.js
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
 import { PrismPluginService } from '../../services/prism-plugin.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
-import { isNonEditableInputType } from './non-editable-input-types.js';
+import { PrismButtonComponent } from '../../shared/prism-button.component.js';
+import { PrismPanelToolbarComponent } from '../../shared/prism-panel-toolbar.component.js';
+import { nonEditableReason } from './non-editable-input-types.js';
 import * as i0 from "@angular/core";
 const _c0 = (a0, a1) => ({ inputMeta: a0, rendererService: a1 });
 const _c1 = () => [];
 const _forTrack0 = ($index, $item) => $item.name;
 function PrismControlsPanelComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "span", 4);
-    i0.ɵɵelement(2, "span", 5);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 6);
-    i0.ɵɵlistener("click", function PrismControlsPanelComponent_Conditional_0_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.resetInputsToVariantDefaults()); });
-    i0.ɵɵelementStart(5, "span", 7);
-    i0.ɵɵtext(6, "\u21BB");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(7, " Reset ");
+    i0.ɵɵelementStart(0, "prism-panel-toolbar")(1, "button", 4);
+    i0.ɵɵlistener("click", function PrismControlsPanelComponent_Conditional_0_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.resetInputsToVariantDefaults()); });
+    i0.ɵɵtext(2, " Reset ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const dirtyCount_r3 = ctx;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2(" ", dirtyCount_r3, " ", dirtyCount_r3 === 1 ? "input" : "inputs", " modified ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", "Reset " + dirtyCount_r3 + " modified " + (dirtyCount_r3 === 1 ? "input" : "inputs") + " to the variant defaults");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 5);
 } if (rf & 2) {
     const input_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngComponentOutlet", ctx.component)("ngComponentOutletInputs", i0.ɵɵpureFunction2(2, _c0, input_r4, ctx_r1.rendererService));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵtext(1, "Not editable");
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("title", ctx);
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_0_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-boolean-control", 16);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_0_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-boolean-control", 13);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_0_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asBoolean(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_1_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-number-control", 16);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_1_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-number-control", 13);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_1_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asNumber(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_2_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-union-control", 17);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_2_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-union-control", 14);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_2_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r4.name]))("options", input_r4.values ?? i0.ɵɵpureFunction0(2, _c1));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_3_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_3_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-string-control", 16);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_3_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-string-control", 13);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_3_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_4_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-json-control", 16);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_4_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-json-control", 13);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_4_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.rendererService.inputValues()[input_r4.name]);
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_0_Template, 1, 1, "prism-boolean-control", 14)(1, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_1_Template, 1, 1, "prism-number-control", 14)(2, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_2_Template, 1, 3, "prism-union-control", 15)(3, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_3_Template, 1, 1, "prism-string-control", 14)(4, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_4_Template, 1, 1, "prism-json-control", 14);
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_0_Template, 1, 1, "prism-boolean-control", 11)(1, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_1_Template, 1, 1, "prism-number-control", 11)(2, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_2_Template, 1, 3, "prism-union-control", 12)(3, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_3_Template, 1, 1, "prism-string-control", 11)(4, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Case_4_Template, 1, 1, "prism-json-control", 11);
 } if (rf & 2) {
     let tmp_14_0;
     const input_r4 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵconditional((tmp_14_0 = input_r4.type) === "boolean" ? 0 : tmp_14_0 === "number" ? 1 : tmp_14_0 === "union" ? 2 : tmp_14_0 === "string" ? 3 : 4);
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "span", 10);
+function PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "span", 7);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 11)(4, "b");
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(6, "div", 12);
-    i0.ɵɵconditionalCreate(7, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_7_Template, 2, 0, "span", 13)(8, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Template, 5, 1);
+    i0.ɵɵelementStart(3, "span", 8);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 9);
+    i0.ɵɵconditionalCreate(6, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_6_Template, 2, 1, "span", 10)(7, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Conditional_7_Template, 5, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_15_0;
     const input_r4 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const comp_r10 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(input_r4.name);
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(input_r4.rawType ?? input_r4.type);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isNonEditable(input_r4) ? 7 : 8);
+    i0.ɵɵconditional((tmp_15_0 = ctx_r1.notEditableReason(input_r4, comp_r10)) ? 6 : 7, tmp_15_0);
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_1_Template, 1, 5, "ng-container", 8)(2, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template, 9, 3);
+    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_1_Template, 1, 5, "ng-container", 5)(2, PrismControlsPanelComponent_Conditional_0_For_4_Conditional_2_Template, 8, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
@@ -131,16 +130,18 @@ function PrismControlsPanelComponent_Conditional_0_For_3_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_12_0 = ctx_r1.getCustomControl(input_r4)) ? 1 : 2, tmp_12_0);
 } }
-function PrismControlsPanelComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 3);
     i0.ɵɵtext(1, "No inputs available");
     i0.ɵɵelementEnd();
 } }
 function PrismControlsPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_Conditional_1_Template, 8, 2, "div", 1);
-    i0.ɵɵrepeaterCreate(2, PrismControlsPanelComponent_Conditional_0_For_3_Template, 3, 1, "div", 2, _forTrack0);
-    i0.ɵɵconditionalCreate(4, PrismControlsPanelComponent_Conditional_0_Conditional_4_Template, 2, 0, "p", 3);
+    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_Conditional_1_Template, 3, 1, "prism-panel-toolbar");
+    i0.ɵɵelementStart(2, "div", 1);
+    i0.ɵɵrepeaterCreate(3, PrismControlsPanelComponent_Conditional_0_For_4_Template, 3, 1, "div", 2, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismControlsPanelComponent_Conditional_0_Conditional_5_Template, 2, 0, "p", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_2_0;
@@ -148,10 +149,10 @@ function PrismControlsPanelComponent_Conditional_0_Template(rf, ctx) { if (rf &
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_2_0 = ctx_r1.rendererService.dirtyInputCount()) ? 1 : -1, tmp_2_0);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵrepeater(comp_r10.meta.inputs);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(comp_r10.meta.inputs.length === 0 ? 4 : -1);
+    i0.ɵɵconditional(comp_r10.meta.inputs.length === 0 ? 5 : -1);
 } }
 export class PrismControlsPanelComponent {
     navigationService = inject(PrismNavigationService);
@@ -162,8 +163,9 @@ export class PrismControlsPanelComponent {
     getCustomControl(input) {
         return this.pluginService.controls().find((ctrl) => ctrl.matchType(input)) ?? null;
     }
-    isNonEditable(input) {
-        return isNonEditableInputType(input);
+    /** Why `input` cannot be edited in the active variant, `null` when it can. */
+    notEditableReason(input, comp) {
+        return nonEditableReason(input, comp, this.rendererService.activeVariantIndex());
     }
     asBoolean(val) {
         return Boolean(val);
@@ -175,15 +177,31 @@ export class PrismControlsPanelComponent {
         return String(val ?? '');
     }
     static ɵfac = function PrismControlsPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismControlsPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [[1, "ctl-panel"], [1, "ctl-toolbar"], [1, "ctl-row"], [1, "ctl-empty"], [1, "ctl-dirty-info"], ["aria-hidden", "true", 1, "ctl-dirty-dot"], ["type", "button", "title", "Reset all inputs to variant defaults", 1, "ctl-reset-btn", 3, "click"], ["aria-hidden", "true"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [1, "ctl-label"], [1, "ctl-name"], [1, "ctl-type"], [1, "ctl-input"], ["title", "This input type can't be edited from the controls panel", 1, "ctl-not-editable"], [3, "value"], [3, "value", "options"], [3, "valueChange", "value"], [3, "valueChange", "value", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_Template, 5, 2, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [[1, "ctl-panel"], [1, "ctl-rows"], [1, "ctl-row"], [1, "ctl-empty"], ["toolbarEnd", "", "prismButton", "", "variant", "secondary", 3, "click", "title"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [1, "ctl-label"], [1, "ctl-name"], [1, "ctl-type"], [1, "ctl-input"], [1, "ctl-not-editable", 3, "title"], [3, "value"], [3, "value", "options"], [3, "valueChange", "value"], [3, "valueChange", "value", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_Template, 6, 2, "div", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [NgComponentOutlet, BooleanControlComponent, StringControlComponent, NumberControlComponent, UnionControlComponent, JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow-y: auto;\n}\n\n.ctl-toolbar[_ngcontent-%COMP%] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 20px;\n    background: var(--%NS%prism-bg-elevated);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ctl-dirty-info[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    font-family: var(--%NS%font-mono);\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ctl-dirty-dot[_ngcontent-%COMP%] {\n    width: 6px;\n    height: 6px;\n    background: var(--%NS%prism-primary);\n    border-radius: 50%;\n    box-shadow: 0 0 6px color-mix(in srgb, var(--%NS%prism-primary) 60%, transparent);\n}\n\n.ctl-reset-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 5px;\n    align-items: center;\n    height: 24px;\n    padding: 0 10px;\n    font-family: var(--%NS%font-sans);\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--%NS%prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 5px;\n    transition:\n        color var(--%NS%dur-fast),\n        background var(--%NS%dur-fast),\n        border-color var(--%NS%dur-fast);\n}\n\n.ctl-reset-btn[_ngcontent-%COMP%]:hover {\n    color: var(--%NS%prism-text);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    border-color: color-mix(in srgb, var(--%NS%prism-primary) 40%, var(--%NS%prism-border));\n}\n\n.ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--%NS%prism-primary);\n    outline-offset: 1px;\n}\n\n.ctl-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 180px 1fr;\n    gap: 12px;\n    align-items: center;\n    min-height: 40px;\n    padding: 8px 20px;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ctl-row[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n}\n\n.ctl-label[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.ctl-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n}\n\n.ctl-type[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 10.5px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n}\n\n.ctl-input[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-width: 0;\n}\n\n.ctl-not-editable[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 11.5px;\n    font-style: italic;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.ctl-empty[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--%NS%prism-text-ghost);\n}"] });
+        } }, dependencies: [NgComponentOutlet,
+            BooleanControlComponent,
+            StringControlComponent,
+            NumberControlComponent,
+            UnionControlComponent,
+            JsonControlComponent,
+            PrismPanelToolbarComponent,
+            PrismButtonComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.ctl-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    container-type: inline-size;\n    overflow-y: auto;\n}\n\n.ctl-rows[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    column-gap: 28px;\n    padding: 4px 18px 16px;\n}\n\n@container (min-width: 1100px) {\n    .ctl-rows[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n}\n\n\n\n\n\n.ctl-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);\n    gap: 12px;\n    align-items: start;\n    min-height: 45px;\n    padding: 6px 0;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ctl-label[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 2px 8px;\n    align-content: center;\n    align-items: baseline;\n    min-width: 0;\n    min-height: 32px;\n}\n\n.ctl-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--%NS%prism-text);\n}\n\n.ctl-type[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--%NS%font-mono);\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n    white-space: nowrap;\n}\n\n.ctl-input[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-width: 0;\n    min-height: 32px;\n}\n\n.ctl-not-editable[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-size: 11.5px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ctl-empty[_ngcontent-%COMP%] {\n    padding: 16px 18px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-controls-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, BooleanControlComponent, StringControlComponent, NumberControlComponent, UnionControlComponent, JsonControlComponent], template: "@if (navigationService.activeComponent(); as comp) {\n    <div class=\"ctl-panel\">\n        @if (rendererService.dirtyInputCount(); as dirtyCount) {\n            <div class=\"ctl-toolbar\">\n                <span class=\"ctl-dirty-info\">\n                    <span\n                        class=\"ctl-dirty-dot\"\n                        aria-hidden=\"true\"></span>\n                    {{ dirtyCount }} {{ dirtyCount === 1 ? 'input' : 'inputs' }} modified\n                </span>\n                <button\n                    type=\"button\"\n                    class=\"ctl-reset-btn\"\n                    (click)=\"rendererService.resetInputsToVariantDefaults()\"\n                    title=\"Reset all inputs to variant defaults\">\n                    <span aria-hidden=\"true\">&#x21BB;</span> Reset\n                </button>\n            </div>\n        }\n        @for (input of comp.meta.inputs; track input.name) {\n            <div class=\"ctl-row\">\n                @if (getCustomControl(input); as customCtrl) {\n                    <ng-container\n                        [ngComponentOutlet]=\"customCtrl.component\"\n                        [ngComponentOutletInputs]=\"{\n                            inputMeta: input,\n                            rendererService: rendererService\n                        }\" />\n                } @else {\n                    <div class=\"ctl-label\">\n                        <span class=\"ctl-name\">{{ input.name }}</span>\n                        <span class=\"ctl-type\"\n                            ><b>{{ input.rawType ?? input.type }}</b></span\n                        >\n                    </div>\n                    <div class=\"ctl-input\">\n                        @if (isNonEditable(input)) {\n                            <span\n                                class=\"ctl-not-editable\"\n                                title=\"This input type can't be edited from the controls panel\"\n                                >Not editable</span\n                            >\n                        } @else {\n                            @switch (input.type) {\n                                @case ('boolean') {\n                                    <prism-boolean-control\n                                        [value]=\"asBoolean(rendererService.inputValues()[input.name])\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @case ('number') {\n                                    <prism-number-control\n                                        [value]=\"asNumber(rendererService.inputValues()[input.name])\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @case ('union') {\n                                    <prism-union-control\n                                        [value]=\"asString(rendererService.inputValues()[input.name])\"\n                                        [options]=\"input.values ?? []\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @case ('string') {\n                                    <prism-string-control\n                                        [value]=\"asString(rendererService.inputValues()[input.name])\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                                @default {\n                                    <prism-json-control\n                                        [value]=\"rendererService.inputValues()[input.name]\"\n                                        (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                }\n                            }\n                        }\n                    </div>\n                }\n            </div>\n        }\n        @if (comp.meta.inputs.length === 0) {\n            <p class=\"ctl-empty\">No inputs available</p>\n        }\n    </div>\n}\n", styles: [".ctl-panel {\n    height: 100%;\n    overflow-y: auto;\n}\n\n.ctl-toolbar {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 20px;\n    background: var(--prism-bg-elevated);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ctl-dirty-info {\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    font-family: var(--font-mono);\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n}\n\n.ctl-dirty-dot {\n    width: 6px;\n    height: 6px;\n    background: var(--prism-primary);\n    border-radius: 50%;\n    box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n}\n\n.ctl-reset-btn {\n    display: inline-flex;\n    gap: 5px;\n    align-items: center;\n    height: 24px;\n    padding: 0 10px;\n    font-family: var(--font-sans);\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--prism-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 1px solid var(--prism-border);\n    border-radius: 5px;\n    transition:\n        color var(--dur-fast),\n        background var(--dur-fast),\n        border-color var(--dur-fast);\n}\n\n.ctl-reset-btn:hover {\n    color: var(--prism-text);\n    background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n}\n\n.ctl-reset-btn:focus-visible {\n    outline: 2px solid var(--prism-primary);\n    outline-offset: 1px;\n}\n\n.ctl-row {\n    display: grid;\n    grid-template-columns: 180px 1fr;\n    gap: 12px;\n    align-items: center;\n    min-height: 40px;\n    padding: 8px 20px;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ctl-row:hover {\n    background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n}\n\n.ctl-label {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.ctl-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--prism-text);\n}\n\n.ctl-type {\n    font-family: var(--font-mono);\n    font-size: 10.5px;\n    color: var(--prism-text-ghost);\n}\n\n.ctl-type b {\n    font-weight: 500;\n    color: var(--prism-primary);\n}\n\n.ctl-input {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-width: 0;\n}\n\n.ctl-not-editable {\n    font-family: var(--font-mono);\n    font-size: 11.5px;\n    font-style: italic;\n    color: var(--prism-text-ghost);\n}\n\n.ctl-empty {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--prism-text-ghost);\n}\n"] }]
+        args: [{ selector: 'prism-controls-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                    NgComponentOutlet,
+                    BooleanControlComponent,
+                    StringControlComponent,
+                    NumberControlComponent,
+                    UnionControlComponent,
+                    JsonControlComponent,
+                    PrismPanelToolbarComponent,
+                    PrismButtonComponent
+                ], template: "@if (navigationService.activeComponent(); as comp) {\n    <div class=\"ctl-panel\">\n        @if (rendererService.dirtyInputCount(); as dirtyCount) {\n            <prism-panel-toolbar>\n                <button\n                    toolbarEnd\n                    prismButton\n                    variant=\"secondary\"\n                    (click)=\"rendererService.resetInputsToVariantDefaults()\"\n                    [title]=\"'Reset ' + dirtyCount + ' modified ' + (dirtyCount === 1 ? 'input' : 'inputs') + ' to the variant defaults'\">\n                    Reset\n                </button>\n            </prism-panel-toolbar>\n        }\n        <div class=\"ctl-rows\">\n            @for (input of comp.meta.inputs; track input.name) {\n                <div class=\"ctl-row\">\n                    @if (getCustomControl(input); as customCtrl) {\n                        <ng-container\n                            [ngComponentOutlet]=\"customCtrl.component\"\n                            [ngComponentOutletInputs]=\"{\n                                inputMeta: input,\n                                rendererService: rendererService\n                            }\" />\n                    } @else {\n                        <div class=\"ctl-label\">\n                            <span class=\"ctl-name\">{{ input.name }}</span>\n                            <span class=\"ctl-type\">{{ input.rawType ?? input.type }}</span>\n                        </div>\n                        <div class=\"ctl-input\">\n                            @if (notEditableReason(input, comp); as reason) {\n                                <span\n                                    class=\"ctl-not-editable\"\n                                    [title]=\"reason\"\n                                    >Not editable</span\n                                >\n                            } @else {\n                                @switch (input.type) {\n                                    @case ('boolean') {\n                                        <prism-boolean-control\n                                            [value]=\"asBoolean(rendererService.inputValues()[input.name])\"\n                                            (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                    }\n                                    @case ('number') {\n                                        <prism-number-control\n                                            [value]=\"asNumber(rendererService.inputValues()[input.name])\"\n                                            (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                    }\n                                    @case ('union') {\n                                        <prism-union-control\n                                            [value]=\"asString(rendererService.inputValues()[input.name])\"\n                                            [options]=\"input.values ?? []\"\n                                            (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                    }\n                                    @case ('string') {\n                                        <prism-string-control\n                                            [value]=\"asString(rendererService.inputValues()[input.name])\"\n                                            (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                    }\n                                    @default {\n                                        <prism-json-control\n                                            [value]=\"rendererService.inputValues()[input.name]\"\n                                            (valueChange)=\"rendererService.updateInput(input.name, $event)\" />\n                                    }\n                                }\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n        @if (comp.meta.inputs.length === 0) {\n            <p class=\"ctl-empty\">No inputs available</p>\n        }\n    </div>\n}\n", styles: ["/* No toolbar of its own: the panel toolbar appears only while inputs differ\n   from the variant, and then carries just the reset. The rows follow the panel\n   height and go two-up once the panel is wide enough. */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.ctl-panel {\n    height: 100%;\n    container-type: inline-size;\n    overflow-y: auto;\n}\n\n.ctl-rows {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    column-gap: 28px;\n    padding: 4px 18px 16px;\n}\n\n@container (min-width: 1100px) {\n    .ctl-rows {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n}\n\n/* Top-aligned: a tall control such as the JSON editor grows downward, while\n   its label and the row beside it in the two-up grid stay at the top. Label\n   and input cells are at least one text control high, which keeps\n   single-line rows centred. */\n.ctl-row {\n    display: grid;\n    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);\n    gap: 12px;\n    align-items: start;\n    min-height: 45px;\n    padding: 6px 0;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ctl-label {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 2px 8px;\n    align-content: center;\n    align-items: baseline;\n    min-width: 0;\n    min-height: 32px;\n}\n\n.ctl-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--prism-text);\n}\n\n.ctl-type {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: var(--font-mono);\n    font-size: 11px;\n    color: var(--prism-text-muted);\n    white-space: nowrap;\n}\n\n.ctl-input {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-width: 0;\n    min-height: 32px;\n}\n\n.ctl-not-editable {\n    font-family: var(--font-mono);\n    font-size: 11.5px;\n    color: var(--prism-text-muted);\n}\n\n.ctl-empty {\n    padding: 16px 18px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 33 }); })();

package/dist/app/panels/events/prism-events-panel.component.d.ts

@@ -1,9 +1,11 @@
 import type { RuntimeComponent } from '../../../plugin/plugin.types.js';
 import { PrismEventLogService } from '../../services/prism-event-log.service.js';
+import { isEmptyPayload } from './prism-json-node.utils.js';
 import * as i0 from "@angular/core";
 export declare class PrismEventsPanelComponent {
     protected readonly eventLogService: PrismEventLogService;
     readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
+    protected readonly isEmptyPayload: typeof isEmptyPayload;
     protected formatTime(ts: number): string;
     protected padIdx(n: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismEventsPanelComponent, never>;

package/dist/app/panels/events/prism-events-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-events-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-events-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;;AAGjF,qBAQa,yBAAyB;IAClC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM;IASxC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAd1B,yBAAyB;2CAAzB,yBAAyB;CAiBrC"}
+{"version":3,"file":"prism-events-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-events-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAE5D,qBAQa,yBAAyB;IAClC,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,QAAQ,CAAC,cAAc,wBAAkB;IAEnD,SAAS,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM;IASxC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;yCAhB1B,yBAAyB;2CAAzB,yBAAyB;CAmBrC"}

package/dist/app/panels/events/prism-events-panel.component.js

@@ -1,8 +1,20 @@
 import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { PrismEventLogService } from '../../services/prism-event-log.service.js';
 import { PrismJsonNodeComponent } from './prism-json-node.component.js';
+import { isEmptyPayload } from './prism-json-node.utils.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.id;
+function PrismEventsPanelComponent_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
+    i0.ɵɵtext(1, "\u2014");
+    i0.ɵɵelementEnd();
+} }
+function PrismEventsPanelComponent_For_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-json-node", 9);
+} if (rf & 2) {
+    const entry_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", entry_r1.value);
+} }
 function PrismEventsPanelComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "span", 4);
     i0.ɵɵtext(2);
@@ -14,7 +26,7 @@ function PrismEventsPanelComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "span", 7);
-    i0.ɵɵelement(8, "prism-json-node", 8);
+    i0.ɵɵconditionalCreate(8, PrismEventsPanelComponent_For_3_Conditional_8_Template, 2, 0, "span", 8)(9, PrismEventsPanelComponent_For_3_Conditional_9_Template, 1, 1, "prism-json-node", 9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const entry_r1 = ctx.$implicit;
@@ -27,7 +39,7 @@ function PrismEventsPanelComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(entry_r1.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", entry_r1.value);
+    i0.ɵɵconditional(ctx_r2.isEmptyPayload(entry_r1.value) ? 8 : 9);
 } }
 function PrismEventsPanelComponent_ForEmpty_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 3);
@@ -38,6 +50,7 @@ export class PrismEventsPanelComponent {
     eventLogService = inject(PrismEventLogService);
     activeComponent = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
+    isEmptyPayload = isEmptyPayload;
     formatTime(ts) {
         const d = new Date(ts);
         return d.toLocaleTimeString('en-US', {
@@ -49,17 +62,17 @@ export class PrismEventsPanelComponent {
         return String(n).padStart(3, '0');
     }
     static ɵfac = function PrismEventsPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismEventsPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismEventsPanelComponent, selectors: [["prism-events-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 5, vars: 1, consts: [[1, "ev-panel"], [1, "ev-body"], [1, "ev"], [1, "ev-empty"], [1, "ev-time"], [1, "ev-idx"], [1, "ev-name"], [1, "ev-args"], [3, "value"]], template: function PrismEventsPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismEventsPanelComponent, selectors: [["prism-events-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 5, vars: 1, consts: [[1, "ev-panel"], [1, "ev-body"], [1, "ev"], [1, "ev-empty"], [1, "ev-time"], [1, "ev-idx"], [1, "ev-name"], [1, "ev-args"], ["title", "Emitted without a value", 1, "ev-none"], [3, "value"]], template: function PrismEventsPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, PrismEventsPanelComponent_For_3_Template, 9, 4, "div", 2, _forTrack0, false, PrismEventsPanelComponent_ForEmpty_4_Template, 2, 0, "p", 3);
+            i0.ɵɵrepeaterCreate(2, PrismEventsPanelComponent_For_3_Template, 10, 4, "div", 2, _forTrack0, false, PrismEventsPanelComponent_ForEmpty_4_Template, 2, 0, "p", 3);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.eventLogService.events());
-        } }, dependencies: [PrismJsonNodeComponent], styles: [".ev-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.ev-body[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 6px 0;\n    overflow-y: auto;\n}\n\n.ev[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: auto auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    min-height: 32px;\n    padding: 6px 20px;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ev[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--%NS%prism-primary) 3%, transparent);\n}\n\n.ev-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-ghost);\n}\n\n.ev-idx[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ev-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n}\n\n.ev-args[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n}\n\n.ev-empty[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--%NS%prism-text-ghost);\n}"] });
+        } }, dependencies: [PrismJsonNodeComponent], styles: [".ev-panel[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.ev-body[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 6px 0;\n    overflow-y: auto;\n}\n\n.ev[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: auto auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    min-height: 32px;\n    padding: 6px 18px;\n    font-family: var(--%NS%font-mono);\n    font-size: 12px;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.ev[_ngcontent-%COMP%]:hover {\n    background: var(--%NS%prism-input-bg);\n}\n\n.ev-none[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.ev-time[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ev-idx[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.ev-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n}\n\n.ev-args[_ngcontent-%COMP%] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--%NS%prism-text-2);\n    white-space: nowrap;\n}\n\n.ev-empty[_ngcontent-%COMP%] {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--%NS%prism-text-muted);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismEventsPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-events-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismJsonNodeComponent], template: "<div class=\"ev-panel\">\n    <div class=\"ev-body\">\n        @for (entry of eventLogService.events(); track entry.id; let i = $index) {\n            <div class=\"ev\">\n                <span class=\"ev-time\">{{ formatTime(entry.timestamp) }}</span>\n                <span class=\"ev-idx\">#{{ padIdx(eventLogService.events().length - i) }}</span>\n                <span class=\"ev-name\">{{ entry.name }}</span>\n                <span class=\"ev-args\"><prism-json-node [value]=\"entry.value\" /></span>\n            </div>\n        } @empty {\n            <p class=\"ev-empty\">No events recorded</p>\n        }\n    </div>\n</div>\n", styles: [".ev-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.ev-body {\n    flex: 1;\n    padding: 6px 0;\n    overflow-y: auto;\n}\n\n.ev {\n    display: grid;\n    grid-template-columns: auto auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    min-height: 32px;\n    padding: 6px 20px;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ev:hover {\n    background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n}\n\n.ev-time {\n    font-size: 11px;\n    color: var(--prism-text-ghost);\n}\n\n.ev-idx {\n    font-size: 11px;\n    color: var(--prism-text-muted);\n}\n\n.ev-name {\n    font-weight: 500;\n    color: var(--prism-primary);\n}\n\n.ev-args {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--prism-text-2);\n    white-space: nowrap;\n}\n\n.ev-empty {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--prism-text-ghost);\n}\n"] }]
+        args: [{ selector: 'prism-events-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrismJsonNodeComponent], template: "<div class=\"ev-panel\">\n    <div class=\"ev-body\">\n        @for (entry of eventLogService.events(); track entry.id; let i = $index) {\n            <div class=\"ev\">\n                <span class=\"ev-time\">{{ formatTime(entry.timestamp) }}</span>\n                <span class=\"ev-idx\">#{{ padIdx(eventLogService.events().length - i) }}</span>\n                <span class=\"ev-name\">{{ entry.name }}</span>\n                <span class=\"ev-args\">\n                    @if (isEmptyPayload(entry.value)) {\n                        <span\n                            class=\"ev-none\"\n                            title=\"Emitted without a value\"\n                            >\u2014</span\n                        >\n                    } @else {\n                        <prism-json-node [value]=\"entry.value\" />\n                    }\n                </span>\n            </div>\n        } @empty {\n            <p class=\"ev-empty\">No events recorded</p>\n        }\n    </div>\n</div>\n", styles: [".ev-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.ev-body {\n    flex: 1;\n    padding: 6px 0;\n    overflow-y: auto;\n}\n\n.ev {\n    display: grid;\n    grid-template-columns: auto auto 1fr auto;\n    gap: 12px;\n    align-items: center;\n    min-height: 32px;\n    padding: 6px 18px;\n    font-family: var(--font-mono);\n    font-size: 12px;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.ev:hover {\n    background: var(--prism-input-bg);\n}\n\n.ev-none {\n    color: var(--prism-text-muted);\n}\n\n.ev-time {\n    font-size: 11px;\n    color: var(--prism-text-muted);\n}\n\n.ev-idx {\n    font-size: 11px;\n    color: var(--prism-text-muted);\n}\n\n.ev-name {\n    font-weight: 500;\n    color: var(--prism-primary);\n}\n\n.ev-args {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--prism-text-2);\n    white-space: nowrap;\n}\n\n.ev-empty {\n    padding: 16px 20px;\n    margin: 0;\n    font-size: 13px;\n    color: var(--prism-text-muted);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismEventsPanelComponent, { className: "PrismEventsPanelComponent", filePath: "app/panels/events/prism-events-panel.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismEventsPanelComponent, { className: "PrismEventsPanelComponent", filePath: "app/panels/events/prism-events-panel.component.ts", lineNumber: 15 }); })();

package/dist/app/panels/events/prism-json-node.utils.d.ts

@@ -1,2 +1,8 @@
 export declare function summarizeValue(val: unknown, depth?: number, visited?: WeakSet<object>): string;
+/**
+ * True for an output that was emitted without a value (`emit()` on a void
+ * output). The events log shows a muted dash for it instead of the word
+ * "undefined", which reads like a bug in the component.
+ */
+export declare function isEmptyPayload(value: unknown): boolean;
 //# sourceMappingURL=prism-json-node.utils.d.ts.map

package/dist/app/panels/events/prism-json-node.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-json-node.utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-json-node.utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,SAAI,EAAE,OAAO,kBAAwB,GAAG,MAAM,CAmC/F"}
+{"version":3,"file":"prism-json-node.utils.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/events/prism-json-node.utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,SAAI,EAAE,OAAO,kBAAwB,GAAG,MAAM,CAmC/F;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEtD"}

package/dist/app/panels/events/prism-json-node.utils.js

@@ -38,3 +38,11 @@ export function summarizeValue(val, depth = 0, visited = new WeakSet()) {
     }
     return String(val);
 }
+/**
+ * True for an output that was emitted without a value (`emit()` on a void
+ * output). The events log shows a muted dash for it instead of the word
+ * "undefined", which reads like a bug in the component.
+ */
+export function isEmptyPayload(value) {
+    return value === undefined;
+}

package/dist/app/panels/panel-host/addon-panels.d.ts

@@ -0,0 +1,11 @@
+import type { PanelDefinition, RuntimeComponent } from '../../../plugin/plugin.types.js';
+/**
+ * The addon panels a component page shows: those that apply to components and,
+ * when a component is active, pass their `isVisible`.
+ *
+ * Addon panels only ever appear below the canvas of a component, so a panel
+ * that applies to services and pipes only has no place here. Rendered anyway
+ * it would be handed `activeComponent`, an input it may not declare (NG0303).
+ */
+export declare function addonPanelsFor(panels: readonly PanelDefinition[], component: RuntimeComponent | null): PanelDefinition[];
+//# sourceMappingURL=addon-panels.d.ts.map

package/dist/app/panels/panel-host/addon-panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addon-panels.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/addon-panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGzF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,eAAe,EAAE,EAAE,SAAS,EAAE,gBAAgB,GAAG,IAAI,GAAG,eAAe,EAAE,CAExH"}

package/dist/app/panels/panel-host/addon-panels.js

@@ -0,0 +1,12 @@
+import { panelTargets } from '../../view-tab-bar/panel-inputs.js';
+/**
+ * The addon panels a component page shows: those that apply to components and,
+ * when a component is active, pass their `isVisible`.
+ *
+ * Addon panels only ever appear below the canvas of a component, so a panel
+ * that applies to services and pipes only has no place here. Rendered anyway
+ * it would be handed `activeComponent`, an input it may not declare (NG0303).
+ */
+export function addonPanelsFor(panels, component) {
+    return panels.filter((p) => panelTargets(p).includes('component') && (!component || !p.isVisible || p.isVisible(component)));
+}

package/dist/app/panels/panel-host/panel-badge.d.ts

@@ -1,4 +1,5 @@
 import type { PanelBadge, PanelDefinition, RuntimeComponent } from '../../../plugin/plugin.types.js';
+import type { PrismTabBadge } from '../../shared/prism-tabs.component.js';
 import type { A11yScoreResult, A11yThresholds } from '../a11y/a11y.types.js';
 /**
  * The live figures the built-in tabs badge themselves with.
@@ -16,6 +17,7 @@ import type { A11yScoreResult, A11yThresholds } from '../a11y/a11y.types.js';
  */
 export interface PanelBadgeContext {
     inputCount: number;
+    eventCount: number;
     a11yResult: A11yScoreResult | null;
     a11yThresholds: A11yThresholds;
 }
@@ -32,4 +34,24 @@ export interface PanelBadgeContext {
  * "nothing worth reporting" rather than falling back to a zero.
  */
 export declare function resolvePanelBadge(panel: PanelDefinition, component: RuntimeComponent | null, context: PanelBadgeContext): PanelBadge | null;
+/** The tab badge the tab bar renders. Same shape as {@link PrismTabBadge}. */
+export type NormalizedPanelBadge = PrismTabBadge;
+/**
+ * Reads a badge the way the tab bar renders it, including badges written
+ * before 22.7 that only set `variant`.
+ */
+export declare function normalizePanelBadge(badge: PanelBadge | null): NormalizedPanelBadge | null;
+/**
+ * What to tell the author of a panel whose badge still sets `variant`, or
+ * `null` when it does not. The panel host logs it once per panel; the badge
+ * keeps rendering through {@link normalizePanelBadge} until 23.0.0.
+ */
+export declare function deprecatedBadgeVariantNotice(panelId: string, badge: PanelBadge | null): string | null;
+/**
+ * The a11y tab's badge, also shown on the Violations sub-tab: a number of open
+ * findings, not the score. The score is graded in the gauge, the sidebar and
+ * the panel. The tone follows the most severe violation, the same split the
+ * build gate draws.
+ */
+export declare function a11yViolationBadge(result: A11yScoreResult | null): PanelBadge | null;
 //# sourceMappingURL=panel-badge.d.ts.map

package/dist/app/panels/panel-host/panel-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-badge.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/panel-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAErG,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;CAClC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,UAAU,GAAG,IAAI,CAwB3I"}
+{"version":3,"file":"panel-badge.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/panel-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;CAClC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAAE,OAAO,EAAE,iBAAiB,GAAG,UAAU,GAAG,IAAI,CAoB3I;AAQD,8EAA8E;AAC9E,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,oBAAoB,GAAG,IAAI,CAazF;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAGrG;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,GAAG,UAAU,GAAG,IAAI,CAWpF"}