@mj-biz-apps/forms-ng 0.0.0 → 0.2.0

package/dist/lib/builder/design-panel.component.js

@@ -0,0 +1,530 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+// Import directly from the widget source module (no cross-package re-export — CLAUDE.md rule 5).
+import { applyStyleTokens } from '../widget/core/theming';
+import { DesignStateService } from './design-state.service';
+import { BRAND_TOKENS, FONT_OPTIONS, readBrandToken, readRadiusPx, toStyleTokens } from './style-tokens';
+import { BUILDER_CONTROL_STYLES } from './builder-styles';
+import { DESIGN_PANEL_STYLES } from './design-panel.styles';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _c0 = ["previewHost"];
+const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.stack;
+function DesignPanelComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "p");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 11);
+    i0.ɵɵlistener("click", function DesignPanelComponent_Conditional_7_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.reload()); });
+    i0.ɵɵtext(4, "Retry");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Couldn\u2019t load themes: ", ctx_r2.loadError);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+} }
+function DesignPanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 7);
+    i0.ɵɵtext(1, "No themes exist yet. Ask an admin to seed the theme gallery.");
+    i0.ɵɵelementEnd();
+} }
+function DesignPanelComponent_For_11_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1, "Applied");
+    i0.ɵɵelementEnd();
+} }
+function DesignPanelComponent_For_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const style_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(style_r5.Description);
+} }
+function DesignPanelComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li")(1, "button", 28);
+    i0.ɵɵlistener("click", function DesignPanelComponent_For_11_Template_button_click_1_listener() { const style_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.select(style_r5)); });
+    i0.ɵɵelementStart(2, "span", 29);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, DesignPanelComponent_For_11_Conditional_4_Template, 2, 0, "span", 30);
+    i0.ɵɵconditionalCreate(5, DesignPanelComponent_For_11_Conditional_5_Template, 2, 1, "span", 31);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const style_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("is-selected", ctx_r2.isSelected(style_r5));
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+    i0.ɵɵattribute("aria-pressed", ctx_r2.isSelected(style_r5));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(style_r5.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isApplied(style_r5) ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(style_r5.Description ? 5 : -1);
+} }
+function DesignPanelComponent_Conditional_20_For_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 46);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const font_r7 = ctx.$implicit;
+    i0.ɵɵproperty("value", font_r7.stack);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(font_r7.label);
+} }
+function DesignPanelComponent_Conditional_20_For_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 46);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const font_r8 = ctx.$implicit;
+    i0.ɵɵproperty("value", font_r8.stack);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(font_r8.label);
+} }
+function DesignPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 13)(1, "h3", 32);
+    i0.ɵɵtext(2, "Branding");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 5);
+    i0.ɵɵtext(4, "Editing changes the theme itself. Duplicate first to avoid changing a shared preset.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "label", 33)(6, "span", 34);
+    i0.ɵɵtext(7, "Theme name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "input", 35);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandName, $event) || (ctx_r2.brandName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 33)(10, "span", 34);
+    i0.ɵɵtext(11, "Primary color");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 36)(13, "input", 37);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandPrimary, $event) || (ctx_r2.brandPrimary = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_13_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "input", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandPrimary, $event) || (ctx_r2.brandPrimary = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 33)(16, "span", 34);
+    i0.ɵɵtext(17, "Accent color (hover / strong)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 36)(19, "input", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandAccent, $event) || (ctx_r2.brandAccent = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_19_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "input", 40);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandAccent, $event) || (ctx_r2.brandAccent = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_20_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(21, "div", 33)(22, "span", 34);
+    i0.ɵɵtext(23, "Page background");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 36)(25, "input", 41);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_25_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandPageBg, $event) || (ctx_r2.brandPageBg = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_25_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "input", 42);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandPageBg, $event) || (ctx_r2.brandPageBg = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_26_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(27, "div", 33)(28, "span", 34);
+    i0.ɵɵtext(29, "Card background");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "div", 36)(31, "input", 43);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_31_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandCardBg, $event) || (ctx_r2.brandCardBg = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_31_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "input", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandCardBg, $event) || (ctx_r2.brandCardBg = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_32_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(33, "label", 33)(34, "span", 34);
+    i0.ɵɵtext(35, "Body font");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(36, "select", 35);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_select_ngModelChange_36_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.fontBody, $event) || (ctx_r2.fontBody = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_select_ngModelChange_36_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementStart(37, "option", 45);
+    i0.ɵɵtext(38, "Theme default");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(39, DesignPanelComponent_Conditional_20_For_40_Template, 2, 2, "option", 46, _forTrack1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(41, "label", 33)(42, "span", 34);
+    i0.ɵɵtext(43, "Heading font");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "select", 35);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_select_ngModelChange_44_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.fontDisplay, $event) || (ctx_r2.fontDisplay = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_select_ngModelChange_44_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementStart(45, "option", 45);
+    i0.ɵɵtext(46, "Theme default");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(47, DesignPanelComponent_Conditional_20_For_48_Template, 2, 2, "option", 46, _forTrack1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(49, "label", 33)(50, "span", 34);
+    i0.ɵɵtext(51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "input", 47);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_52_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.radiusPx, $event) || (ctx_r2.radiusPx = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_52_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(53, "label", 33)(54, "span", 34);
+    i0.ɵɵtext(55, "Logo URL");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(56, "input", 48);
+    i0.ɵɵtwoWayListener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_56_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.brandLogo, $event) || (ctx_r2.brandLogo = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DesignPanelComponent_Conditional_20_Template_input_ngModelChange_56_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBrandInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(57, "span", 49);
+    i0.ɵɵtext(58, "Shown at the top of the form.");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(59, "div", 9)(60, "button", 10);
+    i0.ɵɵlistener("click", function DesignPanelComponent_Conditional_20_Template_button_click_60_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveBranding()); });
+    i0.ɵɵtext(61, " Save branding ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandPrimary);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandPrimary);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandAccent);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandAccent);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandPageBg);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandPageBg);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandCardBg);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandCardBg);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.fontBody);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r2.fontOptions);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.fontDisplay);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r2.fontOptions);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Corner radius \u2014 ", ctx_r2.radiusPx, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.radiusPx);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.brandLogo);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+} }
+function DesignPanelComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.status);
+} }
+function DesignPanelComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 17);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("src", ctx_r2.brandLogo, i0.ɵɵsanitizeUrl);
+} }
+/**
+ * The builder "Design" panel (FORMS_BUILD_PLAN §9 polish). Lets the author:
+ *   1. pick which existing {@link mjBizAppsFormsFormStyleEntity} applies to the form
+ *      (sets `Form.StyleID`),
+ *   2. see a LIVE token preview and edit an expanded set of theme controls (colors,
+ *      fonts, corner radius, logo) — all written into `FormStyle.CSSVariables`,
+ *   3. open a full, fillable **Preview** of the real form via `previewRequested` (the
+ *      parent builder owns the tree + modal).
+ *
+ * v1 scope: select a FormStyle + create/edit FormStyle rows with existing columns only.
+ * Per-form (not per-style) overrides would need new `Form` columns — deferred.
+ */
+export class DesignPanelComponent {
+    design = inject(DesignStateService);
+    // OnPush: async mutations (after await) must markForCheck or the view never updates.
+    cdr = inject(ChangeDetectorRef);
+    /** The form being styled (StyleID is written here). */
+    form;
+    /** Emitted after the form's StyleID changes so the parent can persist/refresh. */
+    styleApplied = new EventEmitter();
+    /** Emitted with the current (edited) theme tokens so the parent opens the fill-it preview. */
+    previewRequested = new EventEmitter();
+    previewHost;
+    fontOptions = FONT_OPTIONS;
+    styles = [];
+    selected = null;
+    busy = false;
+    loadError = '';
+    status = '';
+    /** Theme-editor working values (bound to inputs; committed on save). */
+    brandName = '';
+    brandLogo = '';
+    brandPrimary = '';
+    brandAccent = '';
+    brandPageBg = '';
+    brandCardBg = '';
+    fontBody = '';
+    fontDisplay = '';
+    radiusPx = 12;
+    async ngOnInit() {
+        await this.reload();
+    }
+    /** (Re)load the theme presets + the form's assigned style; surfaces load failures. */
+    async reload() {
+        this.busy = true;
+        this.loadError = '';
+        const result = await this.design.loadStyles(this.form.StyleID);
+        this.busy = false;
+        if (!result.success) {
+            this.loadError = result.error ?? 'Could not load themes.';
+            this.cdr.markForCheck();
+            return;
+        }
+        this.styles = result.styles;
+        this.selected = this.styles.find((s) => s.ID === this.form.StyleID) ?? this.styles[0] ?? null;
+        this.syncBrandFields();
+        this.cdr.markForCheck();
+        this.applyPreview();
+    }
+    // -- selection ------------------------------------------------------------
+    isSelected(style) {
+        return this.selected?.ID === style.ID;
+    }
+    isApplied(style) {
+        return this.form.StyleID === style.ID;
+    }
+    select(style) {
+        this.selected = style;
+        this.syncBrandFields();
+        this.applyPreview();
+    }
+    /** Persist the selected style onto the form (`Form.StyleID`). */
+    async applyToForm() {
+        if (!this.selected || this.busy) {
+            return;
+        }
+        this.busy = true;
+        const ok = await this.design.applyStyleToForm(this.form, this.selected.ID);
+        this.busy = false;
+        if (ok) {
+            this.status = `Applied “${this.selected.Name}” to this form.`;
+            this.styleApplied.emit(this.selected.ID);
+        }
+        else {
+            this.status = 'Could not apply the style — see logs.';
+        }
+        this.cdr.markForCheck();
+    }
+    /** Ask the parent builder to open the full, fillable preview with the current theme. */
+    requestPreview() {
+        this.previewRequested.emit(this.buildPreviewTokens());
+    }
+    // -- theme edit -----------------------------------------------------------
+    syncBrandFields() {
+        this.brandName = this.selected?.Name ?? '';
+        this.brandLogo = this.selected?.LogoURL ?? '';
+        const css = this.selected?.CSSVariables ?? null;
+        this.brandPrimary = readBrandToken(css, BRAND_TOKENS.primary);
+        this.brandAccent = readBrandToken(css, BRAND_TOKENS.primaryStrong);
+        this.brandPageBg = readBrandToken(css, BRAND_TOKENS.pageBg);
+        this.brandCardBg = readBrandToken(css, BRAND_TOKENS.cardBg);
+        this.fontBody = readBrandToken(css, BRAND_TOKENS.fontBody);
+        this.fontDisplay = readBrandToken(css, BRAND_TOKENS.fontDisplay);
+        this.radiusPx = readRadiusPx(css) || 12;
+    }
+    /** Duplicate the selected preset so edits don't touch the shared original. */
+    async duplicateSelected() {
+        if (!this.selected || this.busy) {
+            return;
+        }
+        this.busy = true;
+        const copy = await this.design.duplicateStyle(this.selected);
+        this.busy = false;
+        if (copy) {
+            this.styles = [...this.styles, copy];
+            this.selected = copy;
+            this.syncBrandFields();
+            this.status = `Created an editable copy “${copy.Name}”.`;
+            this.cdr.markForCheck();
+            this.applyPreview();
+        }
+        else {
+            this.status = 'Could not duplicate the style — see logs.';
+            this.cdr.markForCheck();
+        }
+    }
+    /** Live-preview the in-progress edits without saving. */
+    onBrandInput() {
+        this.applyPreview();
+    }
+    /** Persist theme edits onto the (ideally duplicated) style. */
+    async saveBranding() {
+        if (!this.selected || this.busy) {
+            return;
+        }
+        this.busy = true;
+        const ok = await this.design.saveBranding(this.selected, {
+            name: this.brandName,
+            logoURL: this.brandLogo,
+            tokens: this.editedTokenMap(),
+            radiusPx: this.radiusPx,
+        });
+        this.busy = false;
+        this.status = ok ? 'Theme saved.' : 'Could not save theme — see logs.';
+        this.cdr.markForCheck();
+        this.applyPreview();
+    }
+    /** The non-radius token edits, keyed by token name (blank values clear the token). */
+    editedTokenMap() {
+        return {
+            [BRAND_TOKENS.primary]: this.brandPrimary,
+            [BRAND_TOKENS.primaryStrong]: this.brandAccent,
+            [BRAND_TOKENS.pageBg]: this.brandPageBg,
+            [BRAND_TOKENS.cardBg]: this.brandCardBg,
+            [BRAND_TOKENS.fontBody]: this.fontBody,
+            [BRAND_TOKENS.fontDisplay]: this.fontDisplay,
+        };
+    }
+    // -- preview --------------------------------------------------------------
+    /** Build the runtime tokens for the selected style with unsaved edits layered on. */
+    buildPreviewTokens() {
+        const tokens = this.selected ? toStyleTokens(this.selected) : { cssVariables: {} };
+        for (const [token, value] of Object.entries(this.editedTokenMap())) {
+            if (value.trim()) {
+                tokens.cssVariables[token] = value.trim();
+            }
+        }
+        for (const radiusToken of ['--mjf-card-radius', '--mjf-input-radius', '--mjf-choice-radius', '--mjf-btn-radius']) {
+            tokens.cssVariables[radiusToken] = `${this.radiusPx}px`;
+        }
+        tokens.logoURL = this.brandLogo.trim() || tokens.logoURL;
+        return tokens;
+    }
+    /** Apply the current theme (with unsaved edits) to the inline sample via the widget's applier. */
+    applyPreview() {
+        const host = this.previewHost?.nativeElement;
+        if (!host || !this.selected) {
+            return;
+        }
+        applyStyleTokens(host, this.buildPreviewTokens());
+    }
+    static ɵfac = function DesignPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DesignPanelComponent, selectors: [["mjf-design-panel"]], viewQuery: function DesignPanelComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.previewHost = _t.first);
+        } }, inputs: { form: "form" }, outputs: { styleApplied: "styleApplied", previewRequested: "previewRequested" }, features: [i0.ɵɵProvidersFeature([DesignStateService])], decls: 48, vars: 8, consts: [["previewHost", ""], [1, "dp"], [1, "dp-controls"], ["aria-labelledby", "dp-styles-title"], ["id", "dp-styles-title", 1, "dp-title"], [1, "dp-hint"], ["role", "alert", 1, "dp-empty"], [1, "dp-empty"], ["role", "list", 1, "dp-style-list"], [1, "dp-actions"], ["type", "button", 1, "mjf-btn", "mjf-btn--primary", 3, "click", "disabled"], ["type", "button", 1, "mjf-btn", "mjf-btn--ghost", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-eye"], ["aria-labelledby", "dp-brand-title", 1, "qe-section"], ["role", "status", 1, "dp-status"], ["aria-label", "Style preview", 1, "dp-preview"], [1, "dp-preview-frame"], ["alt", "", 1, "dp-prev-logo", 3, "src"], [1, "dp-prev-eyebrow"], [1, "dp-prev-title"], [1, "dp-prev-sub"], [1, "dp-prev-card"], [1, "dp-prev-q"], [1, "dp-prev-choices"], [1, "dp-prev-choice", "is-on"], [1, "dp-prev-choice"], [1, "dp-prev-input"], ["type", "button", 1, "dp-prev-btn"], ["type", "button", 1, "dp-style", 3, "click", "disabled"], [1, "dp-style-name"], [1, "mjf-pill"], [1, "dp-style-desc"], ["id", "dp-brand-title", 1, "dp-title"], [1, "mjf-field"], [1, "mjf-field-label"], [1, "mjf-input", 3, "ngModelChange", "ngModel"], [1, "dp-color-row"], ["type", "color", "aria-label", "Primary color", 1, "dp-color", 3, "ngModelChange", "ngModel"], ["placeholder", "Hex or CSS color", "aria-label", "Primary color hex", 1, "mjf-input", 3, "ngModelChange", "ngModel"], ["type", "color", "aria-label", "Accent color", 1, "dp-color", 3, "ngModelChange", "ngModel"], ["placeholder", "Hex or CSS color", "aria-label", "Accent color hex", 1, "mjf-input", 3, "ngModelChange", "ngModel"], ["type", "color", "aria-label", "Page background color", 1, "dp-color", 3, "ngModelChange", "ngModel"], ["placeholder", "Hex or CSS color", "aria-label", "Page background hex", 1, "mjf-input", 3, "ngModelChange", "ngModel"], ["type", "color", "aria-label", "Card background color", 1, "dp-color", 3, "ngModelChange", "ngModel"], ["placeholder", "Hex or CSS color", "aria-label", "Card background hex", 1, "mjf-input", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["type", "range", "min", "0", "max", "28", "step", "2", "aria-label", "Corner radius in pixels", 3, "ngModelChange", "ngModel"], ["placeholder", "https://\u2026/logo.svg", 1, "mjf-input", 3, "ngModelChange", "ngModel"], [1, "mjf-field-hint"]], template: function DesignPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "section", 3)(3, "h3", 4);
+            i0.ɵɵtext(4, "Theme");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "p", 5);
+            i0.ɵɵtext(6, "Pick a preset. The sample updates instantly; \u201CApply\u201D saves it to this form. Use \u201CPreview form\u201D to fill the real form before publishing.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, DesignPanelComponent_Conditional_7_Template, 5, 2, "div", 6)(8, DesignPanelComponent_Conditional_8_Template, 2, 0, "p", 7);
+            i0.ɵɵelementStart(9, "ul", 8);
+            i0.ɵɵrepeaterCreate(10, DesignPanelComponent_For_11_Template, 6, 7, "li", null, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "div", 9)(13, "button", 10);
+            i0.ɵɵlistener("click", function DesignPanelComponent_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.applyToForm()); });
+            i0.ɵɵtext(14, "Apply to form");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "button", 11);
+            i0.ɵɵlistener("click", function DesignPanelComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.duplicateSelected()); });
+            i0.ɵɵtext(16, "Duplicate & edit");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "button", 11);
+            i0.ɵɵlistener("click", function DesignPanelComponent_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.requestPreview()); });
+            i0.ɵɵelement(18, "i", 12);
+            i0.ɵɵtext(19, " Preview form");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(20, DesignPanelComponent_Conditional_20_Template, 62, 15, "section", 13);
+            i0.ɵɵconditionalCreate(21, DesignPanelComponent_Conditional_21_Template, 2, 1, "p", 14);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "div", 15)(23, "div", 16, 0);
+            i0.ɵɵconditionalCreate(25, DesignPanelComponent_Conditional_25_Template, 1, 1, "img", 17);
+            i0.ɵɵelementStart(26, "p", 18);
+            i0.ɵɵtext(27, "Preview");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "h2", 19);
+            i0.ɵɵtext(29);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "p", 20);
+            i0.ɵɵtext(31, "This is how the selected theme looks to respondents.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "div", 21)(33, "p", 22);
+            i0.ɵɵtext(34, "1 \u00B7 How likely are you to recommend us?");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(35, "div", 23)(36, "span", 24);
+            i0.ɵɵtext(37, "Very likely");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(38, "span", 25);
+            i0.ɵɵtext(39, "Somewhat");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(40, "span", 25);
+            i0.ɵɵtext(41, "Not likely");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(42, "div", 21)(43, "p", 22);
+            i0.ɵɵtext(44, "2 \u00B7 Any other feedback?");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(45, "div", 26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(46, "button", 27);
+            i0.ɵɵtext(47, "Submit");
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional(ctx.loadError ? 7 : ctx.styles.length === 0 ? 8 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.styles);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("disabled", ctx.busy || !ctx.selected || ctx.selected && ctx.isApplied(ctx.selected));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.busy || !ctx.selected);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.busy);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.selected ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.status ? 21 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.brandLogo ? 25 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.form.Name);
+        } }, dependencies: [CommonModule, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.RangeValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["[_nghost-%COMP%] {\n  --mjf-builder-gap: 16px;\n  --mjf-builder-radius: var(--mj-radius-md, 8px);\n}\n.mjf-input[_ngcontent-%COMP%] {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 8px 10px;\n  font: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mjf-builder-radius);\n  transition: border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-input[_ngcontent-%COMP%]:focus {\n  outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary));\n  outline-offset: 1px;\n  border-color: var(--mj-brand-primary);\n}\ntextarea.mjf-input[_ngcontent-%COMP%] { min-height: 64px; resize: vertical; }\n.mjf-field[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--mjf-builder-gap); }\n.mjf-field-label[_ngcontent-%COMP%] { font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); }\n.mjf-field-hint[_ngcontent-%COMP%] { font-size: 0.75rem; color: var(--mj-text-muted); }\n.mjf-row[_ngcontent-%COMP%] { display: flex; gap: 8px; align-items: center; }\n.mjf-btn[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mjf-builder-radius));\n  border: 1px solid transparent;\n  transition: background var(--mj-transition-base, 0.15s ease), border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-btn[_ngcontent-%COMP%]:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }\n.mjf-btn[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: not-allowed; }\n.mjf-btn--primary[_ngcontent-%COMP%] { color: var(--mj-brand-on-primary, var(--mj-text-inverse)); background: var(--mj-brand-primary); }\n.mjf-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-brand-primary-hover, var(--mj-brand-primary)); }\n.mjf-btn--ghost[_ngcontent-%COMP%] { color: var(--mj-text-secondary); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--ghost[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-btn--danger[_ngcontent-%COMP%] { color: var(--mj-status-error, var(--mj-color-error-600)); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--danger[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-pill[_ngcontent-%COMP%] {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 3px 9px; font-size: 0.75rem; font-weight: 600;\n  border-radius: var(--mjf-pill-radius, var(--mj-radius-full, 999px));\n  color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n.mjf-switch[_ngcontent-%COMP%] {\n  position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer;\n  border-radius: var(--mj-radius-full, 999px); background: var(--mj-border-strong);\n  transition: background var(--mj-transition-base, 0.15s ease);\n  border: none; padding: 0;\n}\n.mjf-switch[_ngcontent-%COMP%]::after {\n  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;\n  border-radius: 50%; background: var(--mj-bg-surface);\n  transition: transform var(--mj-transition-base, 0.15s ease);\n}\n.mjf-switch.is-on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mjf-switch.is-on[_ngcontent-%COMP%]::after { transform: translateX(16px); }\n.mjf-switch[_ngcontent-%COMP%]:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }", ".dp[_ngcontent-%COMP%] { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; height: 100%; min-height: 0; }\n.dp-controls[_ngcontent-%COMP%] { overflow-y: auto; padding-right: 4px; }\n.dp-title[_ngcontent-%COMP%] { font-size: 0.95rem; font-weight: 700; color: var(--mj-text-primary); margin: 0 0 4px; }\n.dp-hint[_ngcontent-%COMP%] { font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0 0 12px; }\n.dp-empty[_ngcontent-%COMP%] { font-size: 0.875rem; color: var(--mj-text-muted); padding: 16px 0; }\n\n\n\n.dp-style-list[_ngcontent-%COMP%] { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n.dp-style[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.dp-style[_ngcontent-%COMP%]:hover:not(:disabled) { border-color: var(--mj-border-strong); background: var(--mj-bg-surface-hover); }\n.dp-style.is-selected[_ngcontent-%COMP%] { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 1px var(--mj-brand-primary); }\n.dp-style[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: not-allowed; }\n.dp-style-name[_ngcontent-%COMP%] { font-weight: 700; }\n.dp-style-desc[_ngcontent-%COMP%] { font-size: 0.75rem; color: var(--mj-text-muted); }\n\n.dp-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }\n.dp-status[_ngcontent-%COMP%] { font-size: 0.8125rem; color: var(--mj-text-secondary); margin-top: 12px; }\n\n\n\n.dp-color-row[_ngcontent-%COMP%] { display: flex; gap: 8px; align-items: center; }\n.dp-color[_ngcontent-%COMP%] { flex: none; width: 44px; height: 38px; padding: 2px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n\n\n\n.dp-preview[_ngcontent-%COMP%] { min-width: 0; overflow-y: auto; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-border-default); }\n.dp-preview-frame[_ngcontent-%COMP%] {\n  min-height: 100%;\n  padding: 28px 24px;\n  font-family: var(--mjf-font-body, var(--mj-font-family, inherit));\n  color: var(--mj-text-primary);\n  background: var(--mjf-page-bg, var(--mj-bg-page));\n  background-image: var(--mjf-page-bg-image, none);\n}\n.dp-prev-logo[_ngcontent-%COMP%] { max-height: 40px; max-width: 160px; margin-bottom: 16px; display: block; }\n.dp-prev-eyebrow[_ngcontent-%COMP%] { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mjf-eyebrow, var(--mjf-accent, var(--mj-brand-primary))); margin: 0 0 6px; }\n.dp-prev-title[_ngcontent-%COMP%] { font-family: var(--mjf-font-display, var(--mj-font-family, inherit)); font-weight: var(--mjf-display-weight, 700); letter-spacing: var(--mjf-display-tracking, normal); font-size: 1.6rem; margin: 0 0 6px; color: var(--mj-text-primary); }\n.dp-prev-sub[_ngcontent-%COMP%] { color: var(--mj-text-secondary); margin: 0 0 20px; font-size: 0.9rem; }\n.dp-prev-card[_ngcontent-%COMP%] {\n  padding: 18px 18px 20px;\n  margin-bottom: 14px;\n  border-radius: var(--mjf-card-radius, var(--mj-radius-lg, 12px));\n  border: 1px solid var(--mjf-card-border, var(--mj-border-default));\n  background: var(--mjf-card-bg, var(--mj-bg-surface));\n  box-shadow: var(--mjf-card-shadow, none);\n  backdrop-filter: var(--mjf-card-backdrop, none);\n}\n.dp-prev-q[_ngcontent-%COMP%] { font-weight: 600; margin: 0 0 12px; color: var(--mj-text-primary); }\n.dp-prev-choices[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 8px; }\n.dp-prev-choice[_ngcontent-%COMP%] {\n  padding: 8px 14px; font-size: 0.85rem; font-weight: 600;\n  border-radius: var(--mjf-choice-radius, var(--mj-radius-md, 8px));\n  border: 1px solid var(--mjf-choice-border, var(--mj-border-default));\n  background: var(--mjf-choice-bg, var(--mj-bg-surface));\n  color: var(--mj-text-secondary);\n}\n.dp-prev-choice.is-on[_ngcontent-%COMP%] { border-color: var(--mjf-accent, var(--mj-brand-primary)); color: var(--mjf-on-accent, var(--mj-text-inverse)); background: var(--mjf-accent, var(--mj-brand-primary)); }\n.dp-prev-input[_ngcontent-%COMP%] { height: 40px; border-radius: var(--mjf-input-radius, var(--mj-radius-md, 8px)); border: 1px solid var(--mjf-input-border, var(--mj-border-default)); background: var(--mjf-input-bg, var(--mj-bg-surface)); }\n.dp-prev-btn[_ngcontent-%COMP%] {\n  margin-top: 6px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mj-radius-md, 8px)); border: none;\n  color: var(--mjf-on-accent, var(--mj-brand-on-primary, var(--mj-text-inverse)));\n  background: var(--mjf-accent-gradient, var(--mjf-accent, var(--mj-brand-primary)));\n}\n\n@media (max-width: 900px) {\n  .dp[_ngcontent-%COMP%] { grid-template-columns: 1fr; overflow-y: auto; }\n  .dp-preview[_ngcontent-%COMP%] { min-height: 360px; }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DesignPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mjf-design-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule], providers: [DesignStateService], template: "<div class=\"dp\">\n  <!-- LEFT: style picker + branding editor -->\n  <div class=\"dp-controls\">\n    <section aria-labelledby=\"dp-styles-title\">\n      <h3 id=\"dp-styles-title\" class=\"dp-title\">Theme</h3>\n      <p class=\"dp-hint\">Pick a preset. The sample updates instantly; \u201CApply\u201D saves it to this form. Use \u201CPreview form\u201D to fill the real form before publishing.</p>\n\n      @if (loadError) {\n        <div class=\"dp-empty\" role=\"alert\">\n          <p>Couldn\u2019t load themes: {{ loadError }}</p>\n          <button type=\"button\" class=\"mjf-btn mjf-btn--ghost\" [disabled]=\"busy\" (click)=\"reload()\">Retry</button>\n        </div>\n      } @else if (styles.length === 0) {\n        <p class=\"dp-empty\">No themes exist yet. Ask an admin to seed the theme gallery.</p>\n      }\n      <ul class=\"dp-style-list\" role=\"list\">\n        @for (style of styles; track style.ID) {\n          <li>\n            <button\n              type=\"button\"\n              class=\"dp-style\"\n              [class.is-selected]=\"isSelected(style)\"\n              [attr.aria-pressed]=\"isSelected(style)\"\n              [disabled]=\"busy\"\n              (click)=\"select(style)\"\n            >\n              <span class=\"dp-style-name\">{{ style.Name }}</span>\n              @if (isApplied(style)) {\n                <span class=\"mjf-pill\">Applied</span>\n              }\n              @if (style.Description) {\n                <span class=\"dp-style-desc\">{{ style.Description }}</span>\n              }\n            </button>\n          </li>\n        }\n      </ul>\n\n      <div class=\"dp-actions\">\n        <button\n          type=\"button\"\n          class=\"mjf-btn mjf-btn--primary\"\n          [disabled]=\"busy || !selected || (selected && isApplied(selected))\"\n          (click)=\"applyToForm()\"\n        >Apply to form</button>\n        <button\n          type=\"button\"\n          class=\"mjf-btn mjf-btn--ghost\"\n          [disabled]=\"busy || !selected\"\n          (click)=\"duplicateSelected()\"\n        >Duplicate &amp; edit</button>\n        <button\n          type=\"button\"\n          class=\"mjf-btn mjf-btn--ghost\"\n          [disabled]=\"busy\"\n          (click)=\"requestPreview()\"\n        ><i class=\"fa-solid fa-eye\" aria-hidden=\"true\"></i> Preview form</button>\n      </div>\n    </section>\n\n    @if (selected) {\n      <section class=\"qe-section\" aria-labelledby=\"dp-brand-title\">\n        <h3 id=\"dp-brand-title\" class=\"dp-title\">Branding</h3>\n        <p class=\"dp-hint\">Editing changes the theme itself. Duplicate first to avoid changing a shared preset.</p>\n\n        <label class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Theme name</span>\n          <input class=\"mjf-input\" [(ngModel)]=\"brandName\" (ngModelChange)=\"onBrandInput()\" />\n        </label>\n\n        <div class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Primary color</span>\n          <div class=\"dp-color-row\">\n            <input\n              type=\"color\"\n              class=\"dp-color\"\n              [(ngModel)]=\"brandPrimary\"\n              (ngModelChange)=\"onBrandInput()\"\n              aria-label=\"Primary color\"\n            />\n            <input\n              class=\"mjf-input\"\n              [(ngModel)]=\"brandPrimary\"\n              (ngModelChange)=\"onBrandInput()\"\n              placeholder=\"Hex or CSS color\"\n              aria-label=\"Primary color hex\"\n            />\n          </div>\n        </div>\n\n        <div class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Accent color (hover / strong)</span>\n          <div class=\"dp-color-row\">\n            <input\n              type=\"color\"\n              class=\"dp-color\"\n              [(ngModel)]=\"brandAccent\"\n              (ngModelChange)=\"onBrandInput()\"\n              aria-label=\"Accent color\"\n            />\n            <input\n              class=\"mjf-input\"\n              [(ngModel)]=\"brandAccent\"\n              (ngModelChange)=\"onBrandInput()\"\n              placeholder=\"Hex or CSS color\"\n              aria-label=\"Accent color hex\"\n            />\n          </div>\n        </div>\n\n        <div class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Page background</span>\n          <div class=\"dp-color-row\">\n            <input type=\"color\" class=\"dp-color\" [(ngModel)]=\"brandPageBg\" (ngModelChange)=\"onBrandInput()\" aria-label=\"Page background color\" />\n            <input class=\"mjf-input\" [(ngModel)]=\"brandPageBg\" (ngModelChange)=\"onBrandInput()\" placeholder=\"Hex or CSS color\" aria-label=\"Page background hex\" />\n          </div>\n        </div>\n\n        <div class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Card background</span>\n          <div class=\"dp-color-row\">\n            <input type=\"color\" class=\"dp-color\" [(ngModel)]=\"brandCardBg\" (ngModelChange)=\"onBrandInput()\" aria-label=\"Card background color\" />\n            <input class=\"mjf-input\" [(ngModel)]=\"brandCardBg\" (ngModelChange)=\"onBrandInput()\" placeholder=\"Hex or CSS color\" aria-label=\"Card background hex\" />\n          </div>\n        </div>\n\n        <label class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Body font</span>\n          <select class=\"mjf-input\" [(ngModel)]=\"fontBody\" (ngModelChange)=\"onBrandInput()\">\n            <option value=\"\">Theme default</option>\n            @for (font of fontOptions; track font.stack) {\n              <option [value]=\"font.stack\">{{ font.label }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Heading font</span>\n          <select class=\"mjf-input\" [(ngModel)]=\"fontDisplay\" (ngModelChange)=\"onBrandInput()\">\n            <option value=\"\">Theme default</option>\n            @for (font of fontOptions; track font.stack) {\n              <option [value]=\"font.stack\">{{ font.label }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Corner radius \u2014 {{ radiusPx }}px</span>\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"28\"\n            step=\"2\"\n            [(ngModel)]=\"radiusPx\"\n            (ngModelChange)=\"onBrandInput()\"\n            aria-label=\"Corner radius in pixels\"\n          />\n        </label>\n\n        <label class=\"mjf-field\">\n          <span class=\"mjf-field-label\">Logo URL</span>\n          <input\n            class=\"mjf-input\"\n            [(ngModel)]=\"brandLogo\"\n            (ngModelChange)=\"onBrandInput()\"\n            placeholder=\"https://\u2026/logo.svg\"\n          />\n          <span class=\"mjf-field-hint\">Shown at the top of the form.</span>\n        </label>\n\n        <div class=\"dp-actions\">\n          <button type=\"button\" class=\"mjf-btn mjf-btn--primary\" [disabled]=\"busy\" (click)=\"saveBranding()\">\n            Save branding\n          </button>\n        </div>\n      </section>\n    }\n\n    @if (status) {\n      <p class=\"dp-status\" role=\"status\">{{ status }}</p>\n    }\n  </div>\n\n  <!-- RIGHT: live preview (tokens applied to this host by applyStyleTokens) -->\n  <div class=\"dp-preview\" aria-label=\"Style preview\">\n    <div class=\"dp-preview-frame\" #previewHost>\n      @if (brandLogo) {\n        <img class=\"dp-prev-logo\" [src]=\"brandLogo\" alt=\"\" />\n      }\n      <p class=\"dp-prev-eyebrow\">Preview</p>\n      <h2 class=\"dp-prev-title\">{{ form.Name }}</h2>\n      <p class=\"dp-prev-sub\">This is how the selected theme looks to respondents.</p>\n\n      <div class=\"dp-prev-card\">\n        <p class=\"dp-prev-q\">1 \u00B7 How likely are you to recommend us?</p>\n        <div class=\"dp-prev-choices\">\n          <span class=\"dp-prev-choice is-on\">Very likely</span>\n          <span class=\"dp-prev-choice\">Somewhat</span>\n          <span class=\"dp-prev-choice\">Not likely</span>\n        </div>\n      </div>\n\n      <div class=\"dp-prev-card\">\n        <p class=\"dp-prev-q\">2 \u00B7 Any other feedback?</p>\n        <div class=\"dp-prev-input\"></div>\n      </div>\n\n      <button type=\"button\" class=\"dp-prev-btn\">Submit</button>\n    </div>\n  </div>\n</div>\n", styles: ["\n:host {\n  --mjf-builder-gap: 16px;\n  --mjf-builder-radius: var(--mj-radius-md, 8px);\n}\n.mjf-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 8px 10px;\n  font: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mjf-builder-radius);\n  transition: border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-input:focus {\n  outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary));\n  outline-offset: 1px;\n  border-color: var(--mj-brand-primary);\n}\ntextarea.mjf-input { min-height: 64px; resize: vertical; }\n.mjf-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--mjf-builder-gap); }\n.mjf-field-label { font-size: 0.8125rem; font-weight: 600; color: var(--mj-text-secondary); }\n.mjf-field-hint { font-size: 0.75rem; color: var(--mj-text-muted); }\n.mjf-row { display: flex; gap: 8px; align-items: center; }\n.mjf-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mjf-builder-radius));\n  border: 1px solid transparent;\n  transition: background var(--mj-transition-base, 0.15s ease), border-color var(--mj-transition-base, 0.15s ease);\n}\n.mjf-btn:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }\n.mjf-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.mjf-btn--primary { color: var(--mj-brand-on-primary, var(--mj-text-inverse)); background: var(--mj-brand-primary); }\n.mjf-btn--primary:hover:not(:disabled) { background: var(--mj-brand-primary-hover, var(--mj-brand-primary)); }\n.mjf-btn--ghost { color: var(--mj-text-secondary); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--ghost:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-btn--danger { color: var(--mj-status-error, var(--mj-color-error-600)); background: transparent; border-color: var(--mj-border-default); }\n.mjf-btn--danger:hover:not(:disabled) { background: var(--mj-bg-surface-hover); }\n.mjf-pill {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 3px 9px; font-size: 0.75rem; font-weight: 600;\n  border-radius: var(--mjf-pill-radius, var(--mj-radius-full, 999px));\n  color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n.mjf-switch {\n  position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer;\n  border-radius: var(--mj-radius-full, 999px); background: var(--mj-border-strong);\n  transition: background var(--mj-transition-base, 0.15s ease);\n  border: none; padding: 0;\n}\n.mjf-switch::after {\n  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;\n  border-radius: 50%; background: var(--mj-bg-surface);\n  transition: transform var(--mj-transition-base, 0.15s ease);\n}\n.mjf-switch.is-on { background: var(--mj-brand-primary); }\n.mjf-switch.is-on::after { transform: translateX(16px); }\n.mjf-switch:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 2px; }\n", "\n.dp { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; height: 100%; min-height: 0; }\n.dp-controls { overflow-y: auto; padding-right: 4px; }\n.dp-title { font-size: 0.95rem; font-weight: 700; color: var(--mj-text-primary); margin: 0 0 4px; }\n.dp-hint { font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0 0 12px; }\n.dp-empty { font-size: 0.875rem; color: var(--mj-text-muted); padding: 16px 0; }\n\n/* Style picker */\n.dp-style-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n.dp-style { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.dp-style:hover:not(:disabled) { border-color: var(--mj-border-strong); background: var(--mj-bg-surface-hover); }\n.dp-style.is-selected { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 1px var(--mj-brand-primary); }\n.dp-style:disabled { opacity: 0.5; cursor: not-allowed; }\n.dp-style-name { font-weight: 700; }\n.dp-style-desc { font-size: 0.75rem; color: var(--mj-text-muted); }\n\n.dp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }\n.dp-status { font-size: 0.8125rem; color: var(--mj-text-secondary); margin-top: 12px; }\n\n/* Color inputs */\n.dp-color-row { display: flex; gap: 8px; align-items: center; }\n.dp-color { flex: none; width: 44px; height: 38px; padding: 2px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n\n/* ------- Live preview surface (form tokens; each falls back to a --mj-* token) ------- */\n.dp-preview { min-width: 0; overflow-y: auto; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-border-default); }\n.dp-preview-frame {\n  min-height: 100%;\n  padding: 28px 24px;\n  font-family: var(--mjf-font-body, var(--mj-font-family, inherit));\n  color: var(--mj-text-primary);\n  background: var(--mjf-page-bg, var(--mj-bg-page));\n  background-image: var(--mjf-page-bg-image, none);\n}\n.dp-prev-logo { max-height: 40px; max-width: 160px; margin-bottom: 16px; display: block; }\n.dp-prev-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mjf-eyebrow, var(--mjf-accent, var(--mj-brand-primary))); margin: 0 0 6px; }\n.dp-prev-title { font-family: var(--mjf-font-display, var(--mj-font-family, inherit)); font-weight: var(--mjf-display-weight, 700); letter-spacing: var(--mjf-display-tracking, normal); font-size: 1.6rem; margin: 0 0 6px; color: var(--mj-text-primary); }\n.dp-prev-sub { color: var(--mj-text-secondary); margin: 0 0 20px; font-size: 0.9rem; }\n.dp-prev-card {\n  padding: 18px 18px 20px;\n  margin-bottom: 14px;\n  border-radius: var(--mjf-card-radius, var(--mj-radius-lg, 12px));\n  border: 1px solid var(--mjf-card-border, var(--mj-border-default));\n  background: var(--mjf-card-bg, var(--mj-bg-surface));\n  box-shadow: var(--mjf-card-shadow, none);\n  backdrop-filter: var(--mjf-card-backdrop, none);\n}\n.dp-prev-q { font-weight: 600; margin: 0 0 12px; color: var(--mj-text-primary); }\n.dp-prev-choices { display: flex; flex-wrap: wrap; gap: 8px; }\n.dp-prev-choice {\n  padding: 8px 14px; font-size: 0.85rem; font-weight: 600;\n  border-radius: var(--mjf-choice-radius, var(--mj-radius-md, 8px));\n  border: 1px solid var(--mjf-choice-border, var(--mj-border-default));\n  background: var(--mjf-choice-bg, var(--mj-bg-surface));\n  color: var(--mj-text-secondary);\n}\n.dp-prev-choice.is-on { border-color: var(--mjf-accent, var(--mj-brand-primary)); color: var(--mjf-on-accent, var(--mj-text-inverse)); background: var(--mjf-accent, var(--mj-brand-primary)); }\n.dp-prev-input { height: 40px; border-radius: var(--mjf-input-radius, var(--mj-radius-md, 8px)); border: 1px solid var(--mjf-input-border, var(--mj-border-default)); background: var(--mjf-input-bg, var(--mj-bg-surface)); }\n.dp-prev-btn {\n  margin-top: 6px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mj-radius-md, 8px)); border: none;\n  color: var(--mjf-on-accent, var(--mj-brand-on-primary, var(--mj-text-inverse)));\n  background: var(--mjf-accent-gradient, var(--mjf-accent, var(--mj-brand-primary)));\n}\n\n@media (max-width: 900px) {\n  .dp { grid-template-columns: 1fr; overflow-y: auto; }\n  .dp-preview { min-height: 360px; }\n}\n"] }]
+    }], null, { form: [{
+            type: Input,
+            args: [{ required: true }]
+        }], styleApplied: [{
+            type: Output
+        }], previewRequested: [{
+            type: Output
+        }], previewHost: [{
+            type: ViewChild,
+            args: ['previewHost']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesignPanelComponent, { className: "DesignPanelComponent", filePath: "lib/builder/design-panel.component.ts", lineNumber: 47 }); })();
+//# sourceMappingURL=design-panel.component.js.map

package/dist/lib/builder/design-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-panel.component.js","sourceRoot":"","sources":["../../../src/lib/builder/design-panel.component.ts","../../../src/lib/builder/design-panel.component.html"],"names":[],"mappings":"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"}

package/dist/lib/builder/design-panel.styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Design panel styles — plain-CSS string (the package builds with `ngc` only, no SCSS).
+ *
+ * The controls use `--mj-*` builder tokens. The PREVIEW surface (`.dp-preview-frame`
+ * and its children) styles itself with `--mjf-*` form tokens that `applyStyleTokens`
+ * sets on the host at runtime, each falling back to a `--mj-*` token — so the preview
+ * re-themes exactly like the published widget and carries no hardcoded colors.
+ */
+export declare const DESIGN_PANEL_STYLES = "\n.dp { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; height: 100%; min-height: 0; }\n.dp-controls { overflow-y: auto; padding-right: 4px; }\n.dp-title { font-size: 0.95rem; font-weight: 700; color: var(--mj-text-primary); margin: 0 0 4px; }\n.dp-hint { font-size: 0.8125rem; color: var(--mj-text-muted); margin: 0 0 12px; }\n.dp-empty { font-size: 0.875rem; color: var(--mj-text-muted); padding: 16px 0; }\n\n/* Style picker */\n.dp-style-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n.dp-style { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.dp-style:hover:not(:disabled) { border-color: var(--mj-border-strong); background: var(--mj-bg-surface-hover); }\n.dp-style.is-selected { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 1px var(--mj-brand-primary); }\n.dp-style:disabled { opacity: 0.5; cursor: not-allowed; }\n.dp-style-name { font-weight: 700; }\n.dp-style-desc { font-size: 0.75rem; color: var(--mj-text-muted); }\n\n.dp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }\n.dp-status { font-size: 0.8125rem; color: var(--mj-text-secondary); margin-top: 12px; }\n\n/* Color inputs */\n.dp-color-row { display: flex; gap: 8px; align-items: center; }\n.dp-color { flex: none; width: 44px; height: 38px; padding: 2px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n\n/* ------- Live preview surface (form tokens; each falls back to a --mj-* token) ------- */\n.dp-preview { min-width: 0; overflow-y: auto; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-border-default); }\n.dp-preview-frame {\n  min-height: 100%;\n  padding: 28px 24px;\n  font-family: var(--mjf-font-body, var(--mj-font-family, inherit));\n  color: var(--mj-text-primary);\n  background: var(--mjf-page-bg, var(--mj-bg-page));\n  background-image: var(--mjf-page-bg-image, none);\n}\n.dp-prev-logo { max-height: 40px; max-width: 160px; margin-bottom: 16px; display: block; }\n.dp-prev-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mjf-eyebrow, var(--mjf-accent, var(--mj-brand-primary))); margin: 0 0 6px; }\n.dp-prev-title { font-family: var(--mjf-font-display, var(--mj-font-family, inherit)); font-weight: var(--mjf-display-weight, 700); letter-spacing: var(--mjf-display-tracking, normal); font-size: 1.6rem; margin: 0 0 6px; color: var(--mj-text-primary); }\n.dp-prev-sub { color: var(--mj-text-secondary); margin: 0 0 20px; font-size: 0.9rem; }\n.dp-prev-card {\n  padding: 18px 18px 20px;\n  margin-bottom: 14px;\n  border-radius: var(--mjf-card-radius, var(--mj-radius-lg, 12px));\n  border: 1px solid var(--mjf-card-border, var(--mj-border-default));\n  background: var(--mjf-card-bg, var(--mj-bg-surface));\n  box-shadow: var(--mjf-card-shadow, none);\n  backdrop-filter: var(--mjf-card-backdrop, none);\n}\n.dp-prev-q { font-weight: 600; margin: 0 0 12px; color: var(--mj-text-primary); }\n.dp-prev-choices { display: flex; flex-wrap: wrap; gap: 8px; }\n.dp-prev-choice {\n  padding: 8px 14px; font-size: 0.85rem; font-weight: 600;\n  border-radius: var(--mjf-choice-radius, var(--mj-radius-md, 8px));\n  border: 1px solid var(--mjf-choice-border, var(--mj-border-default));\n  background: var(--mjf-choice-bg, var(--mj-bg-surface));\n  color: var(--mj-text-secondary);\n}\n.dp-prev-choice.is-on { border-color: var(--mjf-accent, var(--mj-brand-primary)); color: var(--mjf-on-accent, var(--mj-text-inverse)); background: var(--mjf-accent, var(--mj-brand-primary)); }\n.dp-prev-input { height: 40px; border-radius: var(--mjf-input-radius, var(--mj-radius-md, 8px)); border: 1px solid var(--mjf-input-border, var(--mj-border-default)); background: var(--mjf-input-bg, var(--mj-bg-surface)); }\n.dp-prev-btn {\n  margin-top: 6px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer;\n  border-radius: var(--mjf-btn-radius, var(--mj-radius-md, 8px)); border: none;\n  color: var(--mjf-on-accent, var(--mj-brand-on-primary, var(--mj-text-inverse)));\n  background: var(--mjf-accent-gradient, var(--mjf-accent, var(--mj-brand-primary)));\n}\n\n@media (max-width: 900px) {\n  .dp { grid-template-columns: 1fr; overflow-y: auto; }\n  .dp-preview { min-height: 360px; }\n}\n";
+//# sourceMappingURL=design-panel.styles.d.ts.map