@ng-prism/core 21.10.3 → 21.12.0-beta.0

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

@@ -12,110 +12,133 @@ 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_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 3);
+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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const input_r1 = i0.ɵɵnextContext().$implicit;
+    const dirtyCount_r3 = ctx;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2(" ", dirtyCount_r3, " ", dirtyCount_r3 === 1 ? "input" : "inputs", " modified ");
+} }
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 8);
+} 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_r1, ctx_r1.rendererService));
+    i0.ɵɵproperty("ngComponentOutlet", ctx.component)("ngComponentOutletInputs", i0.ɵɵpureFunction2(2, _c0, input_r4, ctx_r1.rendererService));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_7_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-boolean-control", 10);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_7_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r1.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-boolean-control", 15);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_7_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r4 = i0.ɵɵnextContext(2).$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_r1 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.asBoolean(ctx_r1.rendererService.inputValues()[input_r1.name]));
+    i0.ɵɵproperty("value", ctx_r1.asBoolean(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_8_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-number-control", 10);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_8_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r1.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-number-control", 15);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_8_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r4 = i0.ɵɵnextContext(2).$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_r1 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.asNumber(ctx_r1.rendererService.inputValues()[input_r1.name]));
+    i0.ɵɵproperty("value", ctx_r1.asNumber(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_9_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-union-control", 11);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_9_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r1.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-union-control", 16);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_9_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r4 = i0.ɵɵnextContext(2).$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_r1 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r1.name]))("options", input_r1.values ?? i0.ɵɵpureFunction0(2, _c1));
+    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_2_Conditional_2_Case_10_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-string-control", 10);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_10_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r1.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_10_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-string-control", 15);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_10_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const input_r4 = i0.ɵɵnextContext(2).$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_r1 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r1.name]));
+    i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_11_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-json-control", 10);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_11_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r1.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_11_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-json-control", 15);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_11_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const input_r4 = i0.ɵɵnextContext(2).$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_r1 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.rendererService.inputValues()[input_r1.name]);
+    i0.ɵɵproperty("value", ctx_r1.rendererService.inputValues()[input_r4.name]);
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4)(1, "span", 5);
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "span", 10);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 6)(4, "b");
+    i0.ɵɵelementStart(3, "span", 11)(4, "b");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(6, "div", 7);
-    i0.ɵɵconditionalCreate(7, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_7_Template, 1, 1, "prism-boolean-control", 8)(8, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_8_Template, 1, 1, "prism-number-control", 8)(9, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_9_Template, 1, 3, "prism-union-control", 9)(10, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_10_Template, 1, 1, "prism-string-control", 8)(11, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_11_Template, 1, 1, "prism-json-control", 8);
+    i0.ɵɵelementStart(6, "div", 12);
+    i0.ɵɵconditionalCreate(7, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_7_Template, 1, 1, "prism-boolean-control", 13)(8, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_8_Template, 1, 1, "prism-number-control", 13)(9, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_9_Template, 1, 3, "prism-union-control", 14)(10, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_10_Template, 1, 1, "prism-string-control", 13)(11, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_11_Template, 1, 1, "prism-json-control", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_15_0;
-    const input_r1 = i0.ɵɵnextContext().$implicit;
+    const input_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(input_r1.name);
+    i0.ɵɵtextInterpolate(input_r4.name);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(input_r1.rawType ?? input_r1.type);
+    i0.ɵɵtextInterpolate(input_r4.rawType ?? input_r4.type);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_15_0 = input_r1.type) === "boolean" ? 7 : tmp_15_0 === "number" ? 8 : tmp_15_0 === "union" ? 9 : tmp_15_0 === "string" ? 10 : 11);
+    i0.ɵɵconditional((tmp_15_0 = input_r4.type) === "boolean" ? 7 : tmp_15_0 === "number" ? 8 : tmp_15_0 === "union" ? 9 : tmp_15_0 === "string" ? 10 : 11);
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_1_Template, 1, 5, "ng-container", 3)(2, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Template, 12, 3);
+function PrismControlsPanelComponent_Conditional_0_For_3_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, 12, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
-    const input_r1 = ctx.$implicit;
+    const input_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_12_0 = ctx_r1.getCustomControl(input_r1)) ? 1 : 2, tmp_12_0);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r1.getCustomControl(input_r4)) ? 1 : 2, tmp_12_0);
 } }
-function PrismControlsPanelComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 2);
+function PrismControlsPanelComponent_Conditional_0_Conditional_4_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.ɵɵrepeaterCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Template, 3, 1, "div", 1, _forTrack0);
-    i0.ɵɵconditionalCreate(3, PrismControlsPanelComponent_Conditional_0_Conditional_3_Template, 2, 0, "p", 2);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const comp_r8 = ctx;
+    let tmp_2_0;
+    const comp_r10 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(comp_r8.meta.inputs);
+    i0.ɵɵconditional((tmp_2_0 = ctx_r1.rendererService.dirtyInputCount()) ? 1 : -1, tmp_2_0);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(comp_r10.meta.inputs);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(comp_r8.meta.inputs.length === 0 ? 3 : -1);
+    i0.ɵɵconditional(comp_r10.meta.inputs.length === 0 ? 4 : -1);
 } }
 export class PrismControlsPanelComponent {
     navigationService = inject(PrismNavigationService);
@@ -136,8 +159,8 @@ 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-row"], [1, "ctl-empty"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [1, "ctl-label"], [1, "ctl-name"], [1, "ctl-type"], [1, "ctl-input"], [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, 4, 1, "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-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"], [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);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
@@ -146,7 +169,7 @@ export class PrismControlsPanelComponent {
             StringControlComponent,
             NumberControlComponent,
             UnionControlComponent,
-            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"], changeDetection: 0 });
+            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\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(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info[_ngcontent-%COMP%] {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,
@@ -160,6 +183,22 @@ export class PrismControlsPanelComponent {
                 ], template: `
     @if (navigationService.activeComponent(); as comp) {
     <div class="ctl-panel">
+      @if (rendererService.dirtyInputCount(); as dirtyCount) {
+      <div class="ctl-toolbar">
+        <span class="ctl-dirty-info">
+          <span class="ctl-dirty-dot" aria-hidden="true"></span>
+          {{ dirtyCount }} {{ dirtyCount === 1 ? 'input' : 'inputs' }} modified
+        </span>
+        <button
+          type="button"
+          class="ctl-reset-btn"
+          (click)="rendererService.resetInputsToVariantDefaults()"
+          title="Reset all inputs to variant defaults"
+        >
+          <span aria-hidden="true">&#x21BB;</span> Reset
+        </button>
+      </div>
+      }
       @for (input of comp.meta.inputs; track input.name) {
       <div class="ctl-row">
         @if (getCustomControl(input); as customCtrl) {
@@ -213,6 +252,6 @@ export class PrismControlsPanelComponent {
       }
     </div>
     }
-  `, styles: ["\n    .ctl-panel {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-row {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\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    .ctl-name {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type b {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }\n  "] }]
+  `, styles: ["\n    .ctl-panel {\n      overflow-y: auto;\n      height: 100%;\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    .ctl-dirty-info {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\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      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\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    .ctl-name {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type b {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\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: 140 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 208 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBA8Ha,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxNJ,sBAAsB;2CAAtB,sBAAsB;CAsOlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAIhF,qBAyIa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,IAAI,OAAQ;IAC/B,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,SAAS,wBAAiC;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE3B;IAEH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAEpB;IACH,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAChB;IACZ,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAC7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;;IA0FH,OAAO,CAAC,eAAe;IA6FvB,OAAO,CAAC,OAAO;yCAxNJ,sBAAsB;2CAAtB,sBAAsB;CAsOlC"}

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

@@ -207,7 +207,7 @@ export class PrismRendererComponent {
             i0.ɵɵviewQuerySignal(ctx.outlet, _c0, 5, ViewContainerRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 11, vars: 7, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 11, vars: 8, consts: [["outlet", ""], [1, "prism-canvas-stage"], [1, "canvas-badges"], [1, "c-badge"], [1, "stage-crosshair"], [1, "demo-wrap"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "span", 3);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd()();
@@ -217,7 +217,7 @@ export class PrismRendererComponent {
             i0.ɵɵconditionalCreate(10, PrismRendererComponent_Conditional_10_Template, 1, 3, "ng-container");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵattribute("data-bg", ctx.variantBg.effective());
+            i0.ɵɵattribute("data-bg", ctx.variantBg.effective())("data-rulers", ctx.canvasService.rulers() ? "" : null);
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1("", ctx.Math.round(ctx.canvasService.zoom() * 100), "%");
             i0.ɵɵadvance();
@@ -228,7 +228,7 @@ export class PrismRendererComponent {
             i0.ɵɵconditional(ctx.activeOverlay() ? 10 : -1);
         } }, dependencies: [PrismCanvasRulersComponent,
             PrismCanvasBgPillComponent,
-            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }"], changeDetection: 0 });
+            NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage[_ngcontent-%COMP%] {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers][_ngcontent-%COMP%] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"][_ngcontent-%COMP%] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"][_ngcontent-%COMP%] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"][_ngcontent-%COMP%] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible[_ngcontent-%COMP%] { opacity: 1; }\n    .stage-crosshair[_ngcontent-%COMP%]::before, \n   .stage-crosshair[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair[_ngcontent-%COMP%]::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair[_ngcontent-%COMP%]::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges[_ngcontent-%COMP%] {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap[_ngcontent-%COMP%] {\n      position: relative;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererComponent, [{
         type: Component,
@@ -237,7 +237,11 @@ export class PrismRendererComponent {
                     PrismCanvasBgPillComponent,
                     NgComponentOutlet,
                 ], template: `
-    <div class="prism-canvas-stage" [attr.data-bg]="variantBg.effective()">
+    <div
+      class="prism-canvas-stage"
+      [attr.data-bg]="variantBg.effective()"
+      [attr.data-rulers]="canvasService.rulers() ? '' : null"
+    >
       <div class="canvas-badges">
         <span class="c-badge"
           >{{ Math.round(canvasService.zoom() * 100) }}%</span
@@ -263,11 +267,11 @@ export class PrismRendererComponent {
         }
       </div>
     </div>
-  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: 12px;\n      left: 20px;\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }\n\n  "] }]
+  `, styles: ["\n    :host { display: block; min-height: 0; flex: 1; }\n\n    .prism-canvas-stage {\n      position: relative;\n      overflow: auto;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 32px;\n      min-height: 200px;\n      height: 100%;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(circle, var(--prism-dot) 1px, transparent 1px);\n      background-size: 20px 20px;\n      transition: filter var(--dur-base);\n      --prism-canvas-overlay-top: 12px;\n      --prism-canvas-overlay-inline: 20px;\n    }\n    .prism-canvas-stage[data-rulers] {\n      --prism-canvas-overlay-top: 28px;\n      --prism-canvas-overlay-inline: 28px;\n    }\n\n    .prism-canvas-stage[data-bg=\"plain\"] {\n      background-image: none;\n    }\n    .prism-canvas-stage[data-bg=\"light\"] {\n      background-color: var(--prism-void-light, #f7f5fc);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary-from) 15%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"dark\"] {\n      background-color: var(--prism-void-dark, #07050f);\n      background-image: radial-gradient(circle, color-mix(in srgb, var(--prism-primary) 18%, transparent) 1px, transparent 1px);\n    }\n    .prism-canvas-stage[data-bg=\"checker\"] {\n      background-image:\n        linear-gradient(45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(-45deg, var(--prism-border) 25%, transparent 25%),\n        linear-gradient(45deg, transparent 75%, var(--prism-border) 75%),\n        linear-gradient(-45deg, transparent 75%, var(--prism-border) 75%);\n      background-size: 16px 16px;\n      background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    }\n\n    .stage-crosshair {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--dur-base);\n    }\n    .stage-crosshair.visible { opacity: 1; }\n    .stage-crosshair::before,\n    .stage-crosshair::after {\n      content: '';\n      position: absolute;\n      background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n    }\n    .stage-crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }\n    .stage-crosshair::after { top: 0; bottom: 0; left: 50%; width: 1px; }\n\n    .canvas-badges {\n      position: absolute;\n      top: var(--prism-canvas-overlay-top);\n      left: var(--prism-canvas-overlay-inline);\n      display: flex;\n      gap: 6px;\n      pointer-events: none;\n      transition: top var(--dur-base), left var(--dur-base);\n    }\n    .c-badge {\n      font-family: var(--font-mono);\n      font-size: var(--fs-xs);\n      padding: 3px 7px;\n      border-radius: 4px;\n      background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n      border: 1px solid var(--prism-border);\n      color: var(--prism-text-muted);\n      backdrop-filter: blur(8px);\n    }\n\n    .demo-wrap {\n      position: relative;\n      transform: scale(var(--zoom, 1));\n      transition: transform 0.18s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      max-width: 600px;\n    }\n\n  "] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{
                         read: ViewContainerRef,
                     }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 163 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 174 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

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

@@ -1,16 +1,25 @@
 import type { RuntimeComponent } from '../../plugin/plugin.types.js';
 import * as i0 from "@angular/core";
+export interface ComputedVariantState {
+    values: Record<string, unknown>;
+    activeContent: string | Record<string, string> | undefined;
+}
+export declare function computeVariantState(comp: RuntimeComponent, index: number, options?: {
+    onUnknownInput?: (variantName: string, key: string) => void;
+}): ComputedVariantState;
 export declare class PrismRendererService {
     private readonly navigationService;
     readonly activeVariantIndex: import("@angular/core").WritableSignal<number>;
     readonly inputValues: import("@angular/core").WritableSignal<Record<string, unknown>>;
     readonly activeContent: import("@angular/core").WritableSignal<string | Record<string, string> | undefined>;
     readonly renderedElement: import("@angular/core").WritableSignal<Element | null>;
+    readonly dirtyInputCount: import("@angular/core").Signal<number>;
     private _lastClassName;
     resetForComponent(comp: RuntimeComponent): void;
     reconcileForComponent(comp: RuntimeComponent): void;
     selectVariant(index: number): void;
     updateInput(name: string, value: unknown): void;
+    resetInputsToVariantDefaults(): void;
     private applyVariant;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismRendererService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PrismRendererService>;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-renderer.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE,qBACa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IAEpE,QAAQ,CAAC,kBAAkB,iDAAa;IACxC,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IAExD,OAAO,CAAC,cAAc,CAAuB;IAE7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAM/C,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IA2CnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMlC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;yCArET,oBAAoB;6CAApB,oBAAoB;CA8GhC"}
+{"version":3,"file":"prism-renderer.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-renderer.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAO,GAC5E,oBAAoB,CA+CtB;AAaD,qBACa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IAEpE,QAAQ,CAAC,kBAAkB,iDAAa;IACxC,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IAExD,QAAQ,CAAC,eAAe,yCAcrB;IAEH,OAAO,CAAC,cAAc,CAAuB;IAE7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAM/C,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IA2CnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMlC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,4BAA4B,IAAI,IAAI;IAMpC,OAAO,CAAC,YAAY;yCA3FT,oBAAoB;6CAApB,oBAAoB;CAqGhC"}

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

@@ -1,12 +1,82 @@
-import { inject, Injectable, signal } from '@angular/core';
+import { computed, inject, Injectable, signal } from '@angular/core';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import * as i0 from "@angular/core";
+export function computeVariantState(comp, index, options = {}) {
+    const defaults = {};
+    for (const input of comp.meta.inputs) {
+        if (input.defaultValue !== undefined) {
+            defaults[input.name] = input.defaultValue;
+        }
+    }
+    const requiredInputNames = new Set(comp.meta.inputs.filter((i) => i.required).map((i) => i.name));
+    const reset = {};
+    for (const v of comp.meta.showcaseConfig.variants ?? []) {
+        for (const key of Object.keys(v.inputs ?? {})) {
+            if (!requiredInputNames.has(key) && !(key in reset)) {
+                reset[key] = undefined;
+            }
+        }
+    }
+    const variant = comp.meta.showcaseConfig.variants?.[index];
+    const variantInputs = variant?.inputs ?? {};
+    const validInputNames = new Set(comp.meta.inputs.map((i) => i.name));
+    for (const key of Object.keys(variantInputs)) {
+        if (!validInputNames.has(key)) {
+            options.onUnknownInput?.(variant?.name ?? String(index), key);
+        }
+    }
+    const filteredVariantInputs = Object.fromEntries(Object.entries(variantInputs).filter(([key]) => validInputNames.has(key)));
+    const values = {
+        ...reset,
+        ...defaults,
+        ...filteredVariantInputs,
+    };
+    if (comp.meta.componentMeta.isDirective && variant?.content) {
+        values['__prismContent__'] =
+            typeof variant.content === 'string' ? variant.content : '';
+    }
+    return {
+        values,
+        activeContent: comp.meta.componentMeta.isDirective ? undefined : variant?.content,
+    };
+}
+function valuesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (typeof a !== 'object' || typeof b !== 'object')
+        return false;
+    try {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    catch {
+        return false;
+    }
+}
 export class PrismRendererService {
     navigationService = inject(PrismNavigationService);
     activeVariantIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeVariantIndex" }] : []));
     inputValues = signal({}, ...(ngDevMode ? [{ debugName: "inputValues" }] : []));
     activeContent = signal(undefined, ...(ngDevMode ? [{ debugName: "activeContent" }] : []));
     renderedElement = signal(null, ...(ngDevMode ? [{ debugName: "renderedElement" }] : []));
+    dirtyInputCount = computed(() => {
+        const comp = this.navigationService.activeComponent();
+        if (!comp)
+            return 0;
+        const { values: expected } = computeVariantState(comp, this.activeVariantIndex());
+        const current = this.inputValues();
+        const keys = new Set([
+            ...Object.keys(expected),
+            ...Object.keys(current),
+        ]);
+        let count = 0;
+        for (const key of keys) {
+            if (!valuesEqual(expected[key], current[key]))
+                count++;
+        }
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "dirtyInputCount" }] : []));
     _lastClassName = null;
     resetForComponent(comp) {
         this._lastClassName = comp.meta.className;
@@ -57,37 +127,18 @@ export class PrismRendererService {
     updateInput(name, value) {
         this.inputValues.update((prev) => ({ ...prev, [name]: value }));
     }
+    resetInputsToVariantDefaults() {
+        const comp = this.navigationService.activeComponent();
+        if (!comp)
+            return;
+        this.applyVariant(this.activeVariantIndex(), comp);
+    }
     applyVariant(index, comp) {
-        const defaults = {};
-        for (const input of comp.meta.inputs) {
-            if (input.defaultValue !== undefined) {
-                defaults[input.name] = input.defaultValue;
-            }
-        }
-        const requiredInputNames = new Set(comp.meta.inputs.filter((i) => i.required).map((i) => i.name));
-        const reset = {};
-        for (const v of comp.meta.showcaseConfig.variants ?? []) {
-            for (const key of Object.keys(v.inputs ?? {})) {
-                if (!requiredInputNames.has(key) && !(key in reset)) {
-                    reset[key] = undefined;
-                }
-            }
-        }
-        const variant = comp.meta.showcaseConfig.variants?.[index];
-        const variantInputs = variant?.inputs ?? {};
-        const validInputNames = new Set(comp.meta.inputs.map((i) => i.name));
-        for (const key of Object.keys(variantInputs)) {
-            if (!validInputNames.has(key)) {
-                console.warn(`[ng-prism] Variant "${variant?.name ?? index}" references unknown input "${key}" on ${comp.meta.className} — ignoring.`);
-            }
-        }
-        const filteredVariantInputs = Object.fromEntries(Object.entries(variantInputs).filter(([key]) => validInputNames.has(key)));
-        const values = { ...reset, ...defaults, ...filteredVariantInputs };
-        if (comp.meta.componentMeta.isDirective && variant?.content) {
-            values['__prismContent__'] = typeof variant.content === 'string' ? variant.content : '';
-        }
+        const { values, activeContent } = computeVariantState(comp, index, {
+            onUnknownInput: (variantName, key) => console.warn(`[ng-prism] Variant "${variantName}" references unknown input "${key}" on ${comp.meta.className} — ignoring.`),
+        });
         this.inputValues.set(values);
-        this.activeContent.set(comp.meta.componentMeta.isDirective ? undefined : variant?.content);
+        this.activeContent.set(activeContent);
     }
     static ɵfac = function PrismRendererService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismRendererService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismRendererService, factory: PrismRendererService.ɵfac, providedIn: 'root' });

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

@@ -1,6 +1,7 @@
 import type { NavigationItem } from '../services/navigation-item.types.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import { PrismSearchService } from '../services/prism-search.service.js';
+import type { ComponentStatus } from '../../decorator/showcase.types.js';
 import * as i0 from "@angular/core";
 interface SidebarCategory {
     name: string;
@@ -22,6 +23,8 @@ export declare class PrismSidebarComponent {
     protected toggleCollapse(key: string): void;
     protected itemKey(item: NavigationItem): string;
     protected itemLabel(item: NavigationItem): string;
+    protected itemStatus(item: NavigationItem): ComponentStatus | undefined;
+    protected itemTooltip(item: NavigationItem): string | null;
     protected isActive(item: NavigationItem): boolean;
     protected onSelect(item: NavigationItem): void;
     private loadCollapsed;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;;AAwBzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBAuRa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAGtF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAQ7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,mBAAmB,oDAanC;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,yCAEhC;IAEF,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA9GV,qBAAqB;2CAArB,qBAAqB;CAmHjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;;AAuBzE,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,qBAkTa,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0D;IAGtF,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAQ7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6C;IAE1E,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAE1B;IAEH,SAAS,CAAC,QAAQ,CAAC,cAAc,oDAc9B;IAEH,SAAS,CAAC,QAAQ,CAAC,mBAAmB,oDAanC;IAEH,SAAS,CAAC,QAAQ,CAAC,eAAe,yCAEhC;IAEF,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI3C,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAU3C,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,eAAe,GAAG,SAAS;IAMvE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI;IAO1D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IAWjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;yCA3HV,qBAAqB;2CAArB,qBAAqB;CAgIjC"}