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

package/dist/lib/builder/form-builder.component.js

@@ -0,0 +1,627 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview, moveItemInArray, } from '@angular/cdk/drag-drop';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseFormComponent } from '@memberjunction/ng-base-forms';
+import { FORMS_ENTITY } from './entity-names';
+import { BuilderStateService } from './builder-state.service';
+import { DesignStateService } from './design-state.service';
+import { PublishService } from './publish.service';
+import { QuestionEditorComponent } from './question-editor.component';
+import { DistributionManagerComponent } from './distribution-manager.component';
+import { DesignPanelComponent } from './design-panel.component';
+import { FormPreviewModalComponent } from './form-preview-modal.component';
+import { buildPublishedDefinition } from './snapshot-builder';
+import { QUESTION_PALETTE_GROUPS, questionTypeMeta, questionTypesInGroup, } from './question-type-catalog';
+import { FORM_BUILDER_STYLES } from './form-builder.styles';
+import { isValidReorder } from './reorder';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.entity.ID;
+const _forTrack1 = ($index, $item) => $item.type;
+function FormBuilderComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.statusMessage);
+} }
+function FormBuilderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2, " Unpublished changes ");
+    i0.ɵɵelementEnd();
+} }
+function FormBuilderComponent_Conditional_25_For_3_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵlistener("click", function FormBuilderComponent_Conditional_25_For_3_For_5_Template_button_click_0_listener() { const meta_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addQuestion(meta_r6.type)); });
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const meta_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(meta_r6.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", meta_r6.label, " ");
+} }
+function FormBuilderComponent_Conditional_25_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "p", 27);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 28);
+    i0.ɵɵrepeaterCreate(4, FormBuilderComponent_Conditional_25_For_3_For_5_Template, 3, 4, "button", 29, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r7);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.typesInGroup(group_r7));
+} }
+function FormBuilderComponent_Conditional_25_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.record.Description);
+} }
+function FormBuilderComponent_Conditional_25_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 32);
+    i0.ɵɵtext(1, "Add a question from the palette to get started.");
+    i0.ɵɵelementEnd();
+} }
+function FormBuilderComponent_Conditional_25_For_11_For_3_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 41);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 43);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r11 = i0.ɵɵnextContext().$implicit;
+    const page_r9 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.displayIndex(page_r9, node_r11));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(node_r11.entity.Prompt);
+} }
+function FormBuilderComponent_Conditional_25_For_11_For_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵtext(1, "Required");
+    i0.ɵɵelementEnd();
+} }
+function FormBuilderComponent_Conditional_25_For_11_For_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(node_r11.entity.HelpText);
+} }
+function FormBuilderComponent_Conditional_25_For_11_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "article", 35);
+    i0.ɵɵlistener("click", function FormBuilderComponent_Conditional_25_For_11_For_3_Template_article_click_0_listener() { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectQuestion(node_r11)); })("keydown.enter", function FormBuilderComponent_Conditional_25_For_11_For_3_Template_article_keydown_enter_0_listener() { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectQuestion(node_r11)); });
+    i0.ɵɵtemplate(1, FormBuilderComponent_Conditional_25_For_11_For_3_div_1_Template, 5, 2, "div", 36);
+    i0.ɵɵelementStart(2, "button", 37);
+    i0.ɵɵlistener("click", function FormBuilderComponent_Conditional_25_For_11_For_3_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(3, "i", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 39)(5, "div", 40)(6, "span", 41);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 42);
+    i0.ɵɵelement(9, "i", 31);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, FormBuilderComponent_Conditional_25_For_11_For_3_Conditional_11_Template, 2, 0, "span", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 43);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(14, FormBuilderComponent_Conditional_25_For_11_For_3_Conditional_14_Template, 2, 1, "div", 44);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 45)(16, "button", 46);
+    i0.ɵɵlistener("click", function FormBuilderComponent_Conditional_25_For_11_For_3_Template_button_click_16_listener($event) { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const page_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.moveQuestion(page_r9, node_r11, -1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(17, "i", 47);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 48);
+    i0.ɵɵlistener("click", function FormBuilderComponent_Conditional_25_For_11_For_3_Template_button_click_18_listener($event) { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const page_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.moveQuestion(page_r9, node_r11, 1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(19, "i", 49);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 50);
+    i0.ɵɵlistener("click", function FormBuilderComponent_Conditional_25_For_11_For_3_Template_button_click_20_listener($event) { const node_r11 = i0.ɵɵrestoreView(_r10).$implicit; const page_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.deleteQuestion(page_r9, node_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(21, "i", 51);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const node_r11 = ctx.$implicit;
+    const page_r9 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("is-selected", node_r11.entity.ID === ctx_r2.selectedQuestionId);
+    i0.ɵɵproperty("cdkDragData", node_r11);
+    i0.ɵɵattribute("aria-label", "Edit question " + node_r11.entity.Prompt);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+    i0.ɵɵattribute("aria-label", "Drag to reorder question " + node_r11.entity.Prompt);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.displayIndex(page_r9, node_r11));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r2.metaFor(node_r11).icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.metaFor(node_r11).label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r11.entity.IsRequired ? 11 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(node_r11.entity.Prompt);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r11.entity.HelpText ? 14 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r2.busy);
+} }
+function FormBuilderComponent_Conditional_25_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, FormBuilderComponent_Conditional_25_For_11_Conditional_0_Template, 2, 0, "p", 32);
+    i0.ɵɵelementStart(1, "div", 33);
+    i0.ɵɵlistener("cdkDropListDropped", function FormBuilderComponent_Conditional_25_For_11_Template_div_cdkDropListDropped_1_listener($event) { const page_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.dropQuestion(page_r9, $event)); });
+    i0.ɵɵrepeaterCreate(2, FormBuilderComponent_Conditional_25_For_11_For_3_Template, 22, 16, "article", 34, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const page_r9 = ctx.$implicit;
+    i0.ɵɵconditional(page_r9.questions.length === 0 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("cdkDropListData", page_r9.questions);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(page_r9.questions);
+} }
+function FormBuilderComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "nav", 20);
+    i0.ɵɵrepeaterCreate(2, FormBuilderComponent_Conditional_25_For_3_Template, 6, 1, "div", 21, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "section", 22)(5, "div", 23)(6, "div", 24)(7, "h2");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, FormBuilderComponent_Conditional_25_Conditional_9_Template, 2, 1, "p");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(10, FormBuilderComponent_Conditional_25_For_11_Template, 4, 2, null, null, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "aside", 25)(13, "mjf-question-editor", 26);
+    i0.ɵɵlistener("questionChanged", function FormBuilderComponent_Conditional_25_Template_mjf_question_editor_questionChanged_13_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onQuestionChanged($event)); })("addOptionRequested", function FormBuilderComponent_Conditional_25_Template_mjf_question_editor_addOptionRequested_13_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAddOption($event)); })("removeOptionRequested", function FormBuilderComponent_Conditional_25_Template_mjf_question_editor_removeOptionRequested_13_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRemoveOption($event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.paletteGroups);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r2.record.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.Description ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.pages);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("node", ctx_r2.selectedNode)("conditionalSources", ctx_r2.conditionalSources);
+} }
+function FormBuilderComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16)(1, "mjf-design-panel", 53);
+    i0.ɵɵlistener("styleApplied", function FormBuilderComponent_Conditional_26_Template_mjf_design_panel_styleApplied_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onStyleApplied()); })("previewRequested", function FormBuilderComponent_Conditional_26_Template_mjf_design_panel_previewRequested_1_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.previewWithTokens($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("form", ctx_r2.record);
+} }
+function FormBuilderComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "mjf-distribution-manager", 54);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("formId", ctx_r2.record.ID);
+} }
+function FormBuilderComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mjf-form-preview-modal", 55);
+    i0.ɵɵlistener("closed", function FormBuilderComponent_Conditional_28_Template_mjf_form_preview_modal_closed_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closePreview()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("definition", ctx_r2.previewDef);
+} }
+/**
+ * The visual form builder — registered as the override for the
+ * `MJ_BizApps_Forms: Forms` entity form so that opening a Form record in Explorer
+ * renders the builder instead of the generated property grid (FORMS_BUILD_PLAN §9).
+ *
+ * Layout (desktop): a left palette of question types, a center canvas listing the
+ * questions, and a right properties panel for the selected question. A second tab
+ * manages distributions. Publishing snapshots the definition into a new FormVersion
+ * via {@link PublishService}.
+ *
+ * The component extends {@link BaseFormComponent} so the Explorer host wires `record`
+ * (the loaded Form entity) and the save/navigation plumbing. We render our own UI
+ * rather than the generated template.
+ */
+let FormBuilderComponent = class FormBuilderComponent extends BaseFormComponent {
+    record;
+    state = inject(BuilderStateService);
+    design = inject(DesignStateService);
+    publisher = inject(PublishService);
+    paletteGroups = QUESTION_PALETTE_GROUPS;
+    tree = null;
+    selectedQuestionId = null;
+    activeTab = 'build';
+    busy = false;
+    statusMessage = '';
+    /**
+     * True when the draft has edits not yet in the published snapshot. The public link serves
+     * the last published `FormVersion`, so theme/content changes only go live on Publish — this
+     * drives the "unpublished changes" hint so that isn't surprising.
+     */
+    dirty = false;
+    /** Non-null while the full-screen WYSIWYG Preview is open (holds the draft definition). */
+    previewDef = null;
+    /** Mark the draft as having changes not yet published, and refresh the view. */
+    markDirty() {
+        this.dirty = true;
+        this.cdr.markForCheck();
+    }
+    async ngOnInit() {
+        await super.ngOnInit();
+        await this.loadBuilder();
+    }
+    async loadBuilder() {
+        this.busy = true;
+        // A Form opened via the "new record" flow isn't persisted yet, so its child
+        // Pages/Questions would violate FK_FormPage_Form / FK_FormQuestion_Form. Persist
+        // the Form shell first (the builder is immediate-persist by design).
+        if (!(await this.ensureFormSaved())) {
+            this.busy = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.tree = await this.state.loadTree(this.record);
+        if (this.tree.pages.length === 0) {
+            const page = await this.state.addPage(this.tree, 'Page 1');
+            if (page) {
+                this.tree.pages.push(page);
+            }
+        }
+        this.busy = false;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Guarantee the Form record exists in the DB before any child insert. New records
+     * (Explorer "create") arrive unsaved with a client-generated ID; `Name` is the only
+     * required column without a DB default, so we seed a placeholder the author renames.
+     */
+    async ensureFormSaved() {
+        if (this.record.IsSaved) {
+            return true;
+        }
+        if (!this.record.Name) {
+            this.record.Name = 'Untitled form';
+        }
+        return this.state.save(this.record);
+    }
+    // -- palette --------------------------------------------------------------
+    typesInGroup(group) {
+        return questionTypesInGroup(group);
+    }
+    async addQuestion(type) {
+        if (!this.tree || this.busy) {
+            return;
+        }
+        const page = this.targetPageForNewQuestion();
+        if (!page) {
+            return;
+        }
+        this.busy = true;
+        const node = await this.state.addQuestion(this.tree, page, type, this.defaultPrompt(type));
+        if (node) {
+            page.questions.push(node);
+            this.selectedQuestionId = node.entity.ID;
+            this.markDirty();
+        }
+        this.busy = false;
+        this.cdr.markForCheck();
+    }
+    /** Add to the page holding the selected question, else the last page. */
+    targetPageForNewQuestion() {
+        if (!this.tree || this.tree.pages.length === 0) {
+            return undefined;
+        }
+        if (this.selectedQuestionId) {
+            const owner = this.tree.pages.find((p) => p.questions.some((q) => q.entity.ID === this.selectedQuestionId));
+            if (owner) {
+                return owner;
+            }
+        }
+        return this.tree.pages[this.tree.pages.length - 1];
+    }
+    defaultPrompt(type) {
+        return type === 'Statement' ? 'Add your statement text here' : `Untitled ${questionTypeMeta(type).label} question`;
+    }
+    // -- canvas / selection ---------------------------------------------------
+    get pages() {
+        return this.tree?.pages ?? [];
+    }
+    selectQuestion(node) {
+        this.selectedQuestionId = node.entity.ID;
+        this.cdr.markForCheck();
+    }
+    get selectedNode() {
+        if (!this.tree || !this.selectedQuestionId) {
+            return null;
+        }
+        for (const page of this.tree.pages) {
+            const found = page.questions.find((q) => q.entity.ID === this.selectedQuestionId);
+            if (found) {
+                return found;
+            }
+        }
+        return null;
+    }
+    /** Questions preceding the selected one (valid conditional-rule sources). */
+    get conditionalSources() {
+        if (!this.tree || !this.selectedQuestionId) {
+            return [];
+        }
+        const sources = [];
+        for (const page of this.tree.pages) {
+            for (const q of page.questions) {
+                if (q.entity.ID === this.selectedQuestionId) {
+                    return sources;
+                }
+                sources.push({ id: q.entity.ID, prompt: q.entity.Prompt });
+            }
+        }
+        return sources;
+    }
+    metaFor(node) {
+        return questionTypeMeta(node.entity.QuestionType);
+    }
+    displayIndex(page, node) {
+        const idx = page.questions.indexOf(node) + 1;
+        return idx.toString().padStart(2, '0');
+    }
+    // -- editing handlers (persist on change) ---------------------------------
+    async onQuestionChanged(node) {
+        await this.state.save(node.entity);
+        this.markDirty();
+    }
+    async onAddOption(node) {
+        const option = await this.state.addOption(node, `Option ${node.options.length + 1}`);
+        if (option) {
+            node.options.push(option);
+            this.markDirty();
+        }
+    }
+    async onRemoveOption(event) {
+        const { node, optionIndex } = event;
+        const option = node.options[optionIndex];
+        if (option && (await this.state.deleteOption(option))) {
+            node.options.splice(optionIndex, 1);
+            await this.state.persistOptionOrder(node);
+            this.markDirty();
+        }
+    }
+    async deleteQuestion(page, node) {
+        if (this.busy || !(await this.state.deleteQuestion(node))) {
+            return;
+        }
+        page.questions = page.questions.filter((q) => q !== node);
+        await this.state.persistQuestionOrder(page);
+        if (this.selectedQuestionId === node.entity.ID) {
+            this.selectedQuestionId = null;
+        }
+        this.markDirty();
+    }
+    async moveQuestion(page, node, delta) {
+        const index = page.questions.indexOf(node);
+        await this.reorderQuestion(page, index, index + delta);
+    }
+    /** Pointer/touch drag-drop reorder within a page (mirrors {@link moveQuestion}). */
+    async dropQuestion(page, event) {
+        await this.reorderQuestion(page, event.previousIndex, event.currentIndex);
+    }
+    /** Shared reorder: move a question to a new index in its page, then persist. */
+    async reorderQuestion(page, from, to) {
+        if (this.busy || !isValidReorder(from, to, page.questions.length)) {
+            return;
+        }
+        moveItemInArray(page.questions, from, to);
+        await this.state.persistQuestionOrder(page);
+        this.markDirty();
+    }
+    // -- form-level settings --------------------------------------------------
+    async setRenderMode(mode) {
+        if (!this.tree || this.record.RenderMode === mode) {
+            return;
+        }
+        this.record.RenderMode = mode;
+        await this.state.save(this.record);
+        this.markDirty();
+    }
+    async setName(name) {
+        this.record.Name = name;
+        await this.state.save(this.record);
+        this.markDirty();
+    }
+    // -- publish --------------------------------------------------------------
+    async publish() {
+        if (!this.tree || this.busy) {
+            return;
+        }
+        this.busy = true;
+        this.statusMessage = '';
+        const result = await this.publisher.publish(this.tree);
+        this.busy = false;
+        if (result.success) {
+            this.statusMessage = `Published version ${result.versionNumber}.`;
+            this.dirty = false;
+        }
+        else {
+            this.statusMessage = result.error ?? 'Publish failed.';
+        }
+        this.cdr.markForCheck();
+    }
+    setTab(tab) {
+        this.activeTab = tab;
+        this.cdr.markForCheck();
+    }
+    /** The Design panel persisted `Form.StyleID`; the theme reaches the live link only on Publish. */
+    onStyleApplied() {
+        this.markDirty();
+    }
+    // -- WYSIWYG preview ------------------------------------------------------
+    /** Toolbar "Preview": render the draft with the form's currently-assigned style. */
+    async openPreview() {
+        if (!this.tree || this.busy) {
+            return;
+        }
+        const style = this.record.StyleID
+            ? (await this.design.loadStyleById(this.record.StyleID)) ?? undefined
+            : undefined;
+        this.previewDef = buildPublishedDefinition(this.tree, style, 'draft-preview');
+        this.cdr.markForCheck();
+    }
+    /** Design-tab "Preview form": render the draft with the current (possibly unsaved) theme. */
+    previewWithTokens(tokens) {
+        if (!this.tree) {
+            return;
+        }
+        this.previewDef = buildPublishedDefinition(this.tree, undefined, 'draft-preview', tokens);
+        this.cdr.markForCheck();
+    }
+    closePreview() {
+        this.previewDef = null;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵFormBuilderComponent_BaseFactory; return function FormBuilderComponent_Factory(__ngFactoryType__) { return (ɵFormBuilderComponent_BaseFactory || (ɵFormBuilderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(FormBuilderComponent)))(__ngFactoryType__ || FormBuilderComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormBuilderComponent, selectors: [["mjf-form-builder"]], features: [i0.ɵɵProvidersFeature([BuilderStateService, DesignStateService, PublishService]), i0.ɵɵInheritDefinitionFeature], decls: 29, vars: 24, consts: [["nameInput", ""], [1, "fb"], [1, "fb-top"], ["aria-label", "Form name", 1, "fb-name", 3, "change", "value"], ["role", "group", "aria-label", "Render mode", 1, "fb-seg"], ["type", "button", 3, "click"], [1, "fb-spacer"], ["role", "status", 1, "fb-status"], ["role", "status", "title", "Your changes go live on the public link only after you Publish.", 1, "fb-dirty"], ["type", "button", 1, "mjf-btn", "mjf-btn--ghost", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-eye"], ["type", "button", 1, "mjf-btn", "mjf-btn--primary", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-rocket"], ["role", "tablist", "aria-label", "Builder workspace", 1, "fb-tabs"], ["type", "button", "role", "tab", 1, "fb-tab", 3, "click"], [1, "fb-body"], [1, "fb-design"], [1, "fb-distribute"], [3, "definition"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle"], ["aria-label", "Add question palette", 1, "fb-pane", "fb-pane--left"], [1, "fb-palette-group"], ["aria-label", "Form canvas", 1, "fb-pane", "fb-pane--center"], [1, "fb-canvas"], [1, "fb-canvas-head"], ["aria-label", "Question properties", 1, "fb-pane", "fb-pane--right"], [3, "questionChanged", "addOptionRequested", "removeOptionRequested", "node", "conditionalSources"], [1, "fb-palette-title"], ["role", "list", 1, "fb-palette"], ["type", "button", "role", "listitem", 1, "fb-palette-item", 3, "disabled"], ["type", "button", "role", "listitem", 1, "fb-palette-item", 3, "click", "disabled"], ["aria-hidden", "true"], [1, "fb-canvas-empty"], ["cdkDropList", "", 1, "fb-q-list", 3, "cdkDropListDropped", "cdkDropListData"], ["cdkDrag", "", "tabindex", "0", 1, "fb-q", 3, "cdkDragData", "is-selected"], ["cdkDrag", "", "tabindex", "0", 1, "fb-q", 3, "click", "keydown.enter", "cdkDragData"], ["class", "fb-q-drag-preview", 4, "cdkDragPreview"], ["type", "button", "cdkDragHandle", "", 1, "fb-q-handle", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-grip-vertical"], [1, "fb-q-main"], [1, "fb-q-top"], [1, "fb-q-num"], [1, "mjf-pill"], [1, "fb-q-label"], [1, "fb-q-help"], [1, "fb-q-side"], ["type", "button", "aria-label", "Move up", 1, "fb-q-btn", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-up"], ["type", "button", "aria-label", "Move down", 1, "fb-q-btn", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["type", "button", "aria-label", "Delete question", 1, "fb-q-btn", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], [1, "fb-q-drag-preview"], [3, "styleApplied", "previewRequested", "form"], [3, "formId"], [3, "closed", "definition"]], template: function FormBuilderComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "header", 2)(2, "input", 3, 0);
+            i0.ɵɵlistener("change", function FormBuilderComponent_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r1); const nameInput_r2 = i0.ɵɵreference(3); return i0.ɵɵresetView(ctx.setName(nameInput_r2.value)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 4)(5, "button", 5);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setRenderMode("Scroll")); });
+            i0.ɵɵtext(6, "Scroll");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "button", 5);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setRenderMode("OneQuestion")); });
+            i0.ɵɵtext(8, "One question");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(9, "div", 6);
+            i0.ɵɵconditionalCreate(10, FormBuilderComponent_Conditional_10_Template, 2, 1, "span", 7);
+            i0.ɵɵconditionalCreate(11, FormBuilderComponent_Conditional_11_Template, 3, 0, "span", 8);
+            i0.ɵɵelementStart(12, "button", 9);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openPreview()); });
+            i0.ɵɵelement(13, "i", 10);
+            i0.ɵɵtext(14, " Preview ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "button", 11);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.publish()); });
+            i0.ɵɵelement(16, "i", 12);
+            i0.ɵɵtext(17, " Publish ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "nav", 13)(19, "button", 14);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setTab("build")); });
+            i0.ɵɵtext(20, "Build");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "button", 14);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setTab("design")); });
+            i0.ɵɵtext(22, "Design");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "button", 14);
+            i0.ɵɵlistener("click", function FormBuilderComponent_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setTab("distribute")); });
+            i0.ɵɵtext(24, "Distribute");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(25, FormBuilderComponent_Conditional_25_Template, 14, 4, "div", 15)(26, FormBuilderComponent_Conditional_26_Template, 2, 1, "div", 16)(27, FormBuilderComponent_Conditional_27_Template, 2, 1, "div", 17);
+            i0.ɵɵconditionalCreate(28, FormBuilderComponent_Conditional_28_Template, 1, 1, "mjf-form-preview-modal", 18);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", ctx.record.Name);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("is-on", ctx.record.RenderMode === "Scroll");
+            i0.ɵɵattribute("aria-pressed", ctx.record.RenderMode === "Scroll");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("is-on", ctx.record.RenderMode === "OneQuestion");
+            i0.ɵɵattribute("aria-pressed", ctx.record.RenderMode === "OneQuestion");
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.statusMessage ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.dirty ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.busy || !ctx.tree);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("is-attention", ctx.dirty);
+            i0.ɵɵproperty("disabled", ctx.busy);
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("is-on", ctx.activeTab === "build");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "build");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("is-on", ctx.activeTab === "design");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "design");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("is-on", ctx.activeTab === "distribute");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "distribute");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.activeTab === "build" ? 25 : ctx.activeTab === "design" ? 26 : 27);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.previewDef ? 28 : -1);
+        } }, dependencies: [CommonModule,
+            FormsModule,
+            CdkDropList,
+            CdkDrag,
+            CdkDragHandle,
+            CdkDragPreview,
+            QuestionEditorComponent,
+            DistributionManagerComponent,
+            DesignPanelComponent,
+            FormPreviewModalComponent], 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; }\n\n\n[_nghost-%COMP%] { display: block; height: 100%; color: var(--mj-text-primary); font-family: var(--mj-font-family, inherit); }\n.fb[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; min-height: 480px; background: var(--mj-bg-page); }\n\n\n\n.fb-top[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); flex-wrap: wrap; }\n.fb-name[_ngcontent-%COMP%] { font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--mj-text-primary); background: transparent; border: 1px solid transparent; border-radius: var(--mj-radius-md, 8px); padding: 6px 8px; min-width: 200px; flex: 1 1 200px; }\n.fb-name[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-subtle); }\n.fb-name[_ngcontent-%COMP%]:focus { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); border-color: var(--mj-brand-primary); }\n.fb-spacer[_ngcontent-%COMP%] { flex: 1; }\n.fb-status[_ngcontent-%COMP%] { font-size: 0.8125rem; color: var(--mj-text-secondary); }\n.fb-dirty[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.8125rem;\n  color: var(--mj-status-warning, var(--mj-text-secondary));\n}\n.fb-dirty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 0.5rem; }\n.mjf-btn.is-attention[_ngcontent-%COMP%] { box-shadow: 0 0 0 3px var(--mj-brand-primary-subtle, transparent); }\n\n\n\n.fb-seg[_ngcontent-%COMP%] { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-full, 999px); overflow: hidden; }\n.fb-seg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] { font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 6px 14px; cursor: pointer; border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary); }\n.fb-seg[_ngcontent-%COMP%]   button.is-on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary, var(--mj-text-inverse)); }\n\n\n\n.fb-tabs[_ngcontent-%COMP%] { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n.fb-tab[_ngcontent-%COMP%] { font: inherit; font-weight: 600; font-size: 0.875rem; padding: 10px 14px; cursor: pointer; border: none; background: transparent; color: var(--mj-text-secondary); border-bottom: 2px solid transparent; }\n.fb-tab.is-on[_ngcontent-%COMP%] { color: var(--mj-brand-primary); border-bottom-color: var(--mj-brand-primary); }\n\n\n\n.fb-body[_ngcontent-%COMP%] { flex: 1; display: grid; grid-template-columns: 220px 1fr 320px; min-height: 0; overflow: hidden; }\n.fb-pane[_ngcontent-%COMP%] { overflow-y: auto; padding: 16px; }\n.fb-pane--left[_ngcontent-%COMP%] { border-right: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n.fb-pane--center[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n.fb-pane--right[_ngcontent-%COMP%] { border-left: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n\n\n\n.fb-palette-group[_ngcontent-%COMP%] { margin-bottom: 16px; }\n.fb-palette-title[_ngcontent-%COMP%] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mj-text-muted); margin: 0 0 8px; }\n.fb-palette[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 6px; }\n.fb-palette-item[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 0.875rem; padding: 8px 10px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.fb-palette-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-default); }\n.fb-palette-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 18px; text-align: center; color: var(--mj-text-secondary); }\n\n\n\n.fb-canvas[_ngcontent-%COMP%] { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }\n.fb-canvas-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { margin: 0 0 4px; font-size: 1.25rem; color: var(--mj-text-primary); }\n.fb-canvas-head[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; color: var(--mj-text-secondary); font-size: 0.9rem; }\n.fb-q-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 12px; }\n.fb-q[_ngcontent-%COMP%] { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); cursor: pointer; }\n.fb-q[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-strong); }\n.fb-q.is-selected[_ngcontent-%COMP%] { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 1px var(--mj-brand-primary); }\n\n\n\n.fb-q-handle[_ngcontent-%COMP%] { flex: none; align-self: stretch; width: 26px; display: flex; align-items: center; justify-content: center; cursor: grab; border: none; background: transparent; color: var(--mj-text-muted); border-radius: var(--mj-radius-sm, 6px); touch-action: none; }\n.fb-q-handle[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.fb-q-handle[_ngcontent-%COMP%]:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 1px; }\n.fb-q-handle[_ngcontent-%COMP%]:disabled { opacity: 0.35; cursor: not-allowed; }\n.fb-q-handle[_ngcontent-%COMP%]:active { cursor: grabbing; }\n\n\n\n.fb-q-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .fb-q[_ngcontent-%COMP%]:not(.cdk-drag-placeholder) { transition: transform var(--mj-transition-base, 0.18s ease); }\n.cdk-drag-preview.fb-q[_ngcontent-%COMP%] { box-shadow: 0 6px 18px var(--mjf-drag-shadow, var(--mj-shadow-color, rgba(0, 0, 0, 0.18))); border-color: var(--mj-brand-primary); }\n.fb-q-drag-preview[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-brand-primary); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); box-shadow: 0 6px 18px var(--mjf-drag-shadow, var(--mj-shadow-color, rgba(0, 0, 0, 0.18))); }\n.cdk-drag-placeholder[_ngcontent-%COMP%] { opacity: 0.4; border-style: dashed !important; border-color: var(--mj-brand-primary) !important; background: var(--mj-bg-surface-sunken) !important; }\n.cdk-drag-animating[_ngcontent-%COMP%] { transition: transform var(--mj-transition-base, 0.2s cubic-bezier(0, 0, 0.2, 1)); }\n.fb-q-main[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.fb-q-top[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }\n.fb-q-num[_ngcontent-%COMP%] { font-size: 0.75rem; font-weight: 700; color: var(--mj-text-muted); }\n.fb-q-label[_ngcontent-%COMP%] { font-weight: 600; color: var(--mj-text-primary); word-break: break-word; }\n.fb-q-help[_ngcontent-%COMP%] { font-size: 0.8125rem; color: var(--mj-text-muted); margin-top: 3px; }\n.fb-q-side[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 6px; align-items: center; }\n.fb-q-btn[_ngcontent-%COMP%] { width: 30px; height: 28px; cursor: pointer; border-radius: var(--mj-radius-sm, 6px); border: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface); color: var(--mj-text-muted); }\n.fb-q-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.fb-q-btn[_ngcontent-%COMP%]:disabled { opacity: 0.35; cursor: not-allowed; }\n.fb-canvas-empty[_ngcontent-%COMP%] { text-align: center; color: var(--mj-text-muted); padding: 40px 0; }\n\n.fb-distribute[_ngcontent-%COMP%] { padding: 20px; max-width: 880px; margin: 0 auto; }\n.fb-design[_ngcontent-%COMP%] { flex: 1; min-height: 0; padding: 16px; overflow: hidden; }\n.fb-design[_ngcontent-%COMP%]   mjf-design-panel[_ngcontent-%COMP%] { display: block; height: 100%; }\n\n\n\n@media (max-width: 900px) {\n  .fb-body[_ngcontent-%COMP%] { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }\n  .fb-pane--left[_ngcontent-%COMP%], .fb-pane--right[_ngcontent-%COMP%] { border: none; border-top: 1px solid var(--mj-border-default); }\n  .fb-palette[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n}"] });
+};
+FormBuilderComponent = __decorate([
+    RegisterClass(BaseFormComponent, FORMS_ENTITY.Form, 10)
+], FormBuilderComponent);
+export { FormBuilderComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormBuilderComponent, [{
+        type: Component,
+        args: [{ selector: 'mjf-form-builder', standalone: true, imports: [
+                    CommonModule,
+                    FormsModule,
+                    CdkDropList,
+                    CdkDrag,
+                    CdkDragHandle,
+                    CdkDragPreview,
+                    QuestionEditorComponent,
+                    DistributionManagerComponent,
+                    DesignPanelComponent,
+                    FormPreviewModalComponent,
+                ], providers: [BuilderStateService, DesignStateService, PublishService], template: "<div class=\"fb\">\n  <!-- Topbar -->\n  <header class=\"fb-top\">\n    <input\n      #nameInput\n      class=\"fb-name\"\n      [value]=\"record.Name\"\n      (change)=\"setName(nameInput.value)\"\n      aria-label=\"Form name\"\n    />\n\n    <div class=\"fb-seg\" role=\"group\" aria-label=\"Render mode\">\n      <button\n        type=\"button\"\n        [class.is-on]=\"record.RenderMode === 'Scroll'\"\n        [attr.aria-pressed]=\"record.RenderMode === 'Scroll'\"\n        (click)=\"setRenderMode('Scroll')\"\n      >Scroll</button>\n      <button\n        type=\"button\"\n        [class.is-on]=\"record.RenderMode === 'OneQuestion'\"\n        [attr.aria-pressed]=\"record.RenderMode === 'OneQuestion'\"\n        (click)=\"setRenderMode('OneQuestion')\"\n      >One question</button>\n    </div>\n\n    <div class=\"fb-spacer\"></div>\n\n    @if (statusMessage) {\n      <span class=\"fb-status\" role=\"status\">{{ statusMessage }}</span>\n    }\n    @if (dirty) {\n      <span class=\"fb-dirty\" role=\"status\" title=\"Your changes go live on the public link only after you Publish.\">\n        <i class=\"fa-solid fa-circle\" aria-hidden=\"true\"></i> Unpublished changes\n      </span>\n    }\n    <button type=\"button\" class=\"mjf-btn mjf-btn--ghost\" [disabled]=\"busy || !tree\" (click)=\"openPreview()\">\n      <i class=\"fa-solid fa-eye\" aria-hidden=\"true\"></i> Preview\n    </button>\n    <button type=\"button\" class=\"mjf-btn mjf-btn--primary\" [class.is-attention]=\"dirty\" [disabled]=\"busy\" (click)=\"publish()\">\n      <i class=\"fa-solid fa-rocket\" aria-hidden=\"true\"></i> Publish\n    </button>\n  </header>\n\n  <!-- Tabs -->\n  <nav class=\"fb-tabs\" role=\"tablist\" aria-label=\"Builder workspace\">\n    <button\n      type=\"button\"\n      class=\"fb-tab\"\n      role=\"tab\"\n      [class.is-on]=\"activeTab === 'build'\"\n      [attr.aria-selected]=\"activeTab === 'build'\"\n      (click)=\"setTab('build')\"\n    >Build</button>\n    <button\n      type=\"button\"\n      class=\"fb-tab\"\n      role=\"tab\"\n      [class.is-on]=\"activeTab === 'design'\"\n      [attr.aria-selected]=\"activeTab === 'design'\"\n      (click)=\"setTab('design')\"\n    >Design</button>\n    <button\n      type=\"button\"\n      class=\"fb-tab\"\n      role=\"tab\"\n      [class.is-on]=\"activeTab === 'distribute'\"\n      [attr.aria-selected]=\"activeTab === 'distribute'\"\n      (click)=\"setTab('distribute')\"\n    >Distribute</button>\n  </nav>\n\n  @if (activeTab === 'build') {\n    <div class=\"fb-body\">\n      <!-- LEFT: palette -->\n      <nav class=\"fb-pane fb-pane--left\" aria-label=\"Add question palette\">\n        @for (group of paletteGroups; track group) {\n          <div class=\"fb-palette-group\">\n            <p class=\"fb-palette-title\">{{ group }}</p>\n            <div class=\"fb-palette\" role=\"list\">\n              @for (meta of typesInGroup(group); track meta.type) {\n                <button\n                  type=\"button\"\n                  class=\"fb-palette-item\"\n                  role=\"listitem\"\n                  [disabled]=\"busy\"\n                  (click)=\"addQuestion(meta.type)\"\n                >\n                  <i [class]=\"meta.icon\" aria-hidden=\"true\"></i> {{ meta.label }}\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </nav>\n\n      <!-- CENTER: canvas -->\n      <section class=\"fb-pane fb-pane--center\" aria-label=\"Form canvas\">\n        <div class=\"fb-canvas\">\n          <div class=\"fb-canvas-head\">\n            <h2>{{ record.Name }}</h2>\n            @if (record.Description) {\n              <p>{{ record.Description }}</p>\n            }\n          </div>\n\n          @for (page of pages; track page.entity.ID) {\n            @if (page.questions.length === 0) {\n              <p class=\"fb-canvas-empty\">Add a question from the palette to get started.</p>\n            }\n            <div\n              class=\"fb-q-list\"\n              cdkDropList\n              [cdkDropListData]=\"page.questions\"\n              (cdkDropListDropped)=\"dropQuestion(page, $event)\"\n            >\n            @for (node of page.questions; track node.entity.ID) {\n              <article\n                class=\"fb-q\"\n                cdkDrag\n                [cdkDragData]=\"node\"\n                [class.is-selected]=\"node.entity.ID === selectedQuestionId\"\n                tabindex=\"0\"\n                (click)=\"selectQuestion(node)\"\n                (keydown.enter)=\"selectQuestion(node)\"\n                [attr.aria-label]=\"'Edit question ' + node.entity.Prompt\"\n              >\n                <div class=\"fb-q-drag-preview\" *cdkDragPreview>\n                  <span class=\"fb-q-num\">{{ displayIndex(page, node) }}</span>\n                  <span class=\"fb-q-label\">{{ node.entity.Prompt }}</span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"fb-q-handle\"\n                  cdkDragHandle\n                  [disabled]=\"busy\"\n                  [attr.aria-label]=\"'Drag to reorder question ' + node.entity.Prompt\"\n                  (click)=\"$event.stopPropagation()\"\n                ><i class=\"fa-solid fa-grip-vertical\" aria-hidden=\"true\"></i></button>\n                <div class=\"fb-q-main\">\n                  <div class=\"fb-q-top\">\n                    <span class=\"fb-q-num\">{{ displayIndex(page, node) }}</span>\n                    <span class=\"mjf-pill\"><i [class]=\"metaFor(node).icon\" aria-hidden=\"true\"></i> {{ metaFor(node).label }}</span>\n                    @if (node.entity.IsRequired) {\n                      <span class=\"mjf-pill\">Required</span>\n                    }\n                  </div>\n                  <div class=\"fb-q-label\">{{ node.entity.Prompt }}</div>\n                  @if (node.entity.HelpText) {\n                    <div class=\"fb-q-help\">{{ node.entity.HelpText }}</div>\n                  }\n                </div>\n                <div class=\"fb-q-side\">\n                  <button\n                    type=\"button\"\n                    class=\"fb-q-btn\"\n                    [disabled]=\"busy\"\n                    (click)=\"moveQuestion(page, node, -1); $event.stopPropagation()\"\n                    aria-label=\"Move up\"\n                  ><i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i></button>\n                  <button\n                    type=\"button\"\n                    class=\"fb-q-btn\"\n                    [disabled]=\"busy\"\n                    (click)=\"moveQuestion(page, node, 1); $event.stopPropagation()\"\n                    aria-label=\"Move down\"\n                  ><i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i></button>\n                  <button\n                    type=\"button\"\n                    class=\"fb-q-btn\"\n                    [disabled]=\"busy\"\n                    (click)=\"deleteQuestion(page, node); $event.stopPropagation()\"\n                    aria-label=\"Delete question\"\n                  ><i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i></button>\n                </div>\n              </article>\n            }\n            </div>\n          }\n        </div>\n      </section>\n\n      <!-- RIGHT: properties -->\n      <aside class=\"fb-pane fb-pane--right\" aria-label=\"Question properties\">\n        <mjf-question-editor\n          [node]=\"selectedNode\"\n          [conditionalSources]=\"conditionalSources\"\n          (questionChanged)=\"onQuestionChanged($event)\"\n          (addOptionRequested)=\"onAddOption($event)\"\n          (removeOptionRequested)=\"onRemoveOption($event)\"\n        ></mjf-question-editor>\n      </aside>\n    </div>\n  } @else if (activeTab === 'design') {\n    <div class=\"fb-design\">\n      <mjf-design-panel\n        [form]=\"record\"\n        (styleApplied)=\"onStyleApplied()\"\n        (previewRequested)=\"previewWithTokens($event)\"\n      ></mjf-design-panel>\n    </div>\n  } @else {\n    <div class=\"fb-distribute\">\n      <mjf-distribution-manager [formId]=\"record.ID\"></mjf-distribution-manager>\n    </div>\n  }\n\n  @if (previewDef) {\n    <mjf-form-preview-modal [definition]=\"previewDef\" (closed)=\"closePreview()\"></mjf-form-preview-modal>\n  }\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\n:host { display: block; height: 100%; color: var(--mj-text-primary); font-family: var(--mj-font-family, inherit); }\n.fb { display: flex; flex-direction: column; height: 100%; min-height: 480px; background: var(--mj-bg-page); }\n\n/* Topbar */\n.fb-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); flex-wrap: wrap; }\n.fb-name { font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--mj-text-primary); background: transparent; border: 1px solid transparent; border-radius: var(--mj-radius-md, 8px); padding: 6px 8px; min-width: 200px; flex: 1 1 200px; }\n.fb-name:hover { border-color: var(--mj-border-subtle); }\n.fb-name:focus { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); border-color: var(--mj-brand-primary); }\n.fb-spacer { flex: 1; }\n.fb-status { font-size: 0.8125rem; color: var(--mj-text-secondary); }\n.fb-dirty {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.8125rem;\n  color: var(--mj-status-warning, var(--mj-text-secondary));\n}\n.fb-dirty i { font-size: 0.5rem; }\n.mjf-btn.is-attention { box-shadow: 0 0 0 3px var(--mj-brand-primary-subtle, transparent); }\n\n/* Segmented control */\n.fb-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-full, 999px); overflow: hidden; }\n.fb-seg button { font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 6px 14px; cursor: pointer; border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary); }\n.fb-seg button.is-on { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary, var(--mj-text-inverse)); }\n\n/* Tabs */\n.fb-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n.fb-tab { font: inherit; font-weight: 600; font-size: 0.875rem; padding: 10px 14px; cursor: pointer; border: none; background: transparent; color: var(--mj-text-secondary); border-bottom: 2px solid transparent; }\n.fb-tab.is-on { color: var(--mj-brand-primary); border-bottom-color: var(--mj-brand-primary); }\n\n/* Body grid */\n.fb-body { flex: 1; display: grid; grid-template-columns: 220px 1fr 320px; min-height: 0; overflow: hidden; }\n.fb-pane { overflow-y: auto; padding: 16px; }\n.fb-pane--left { border-right: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n.fb-pane--center { background: var(--mj-bg-page); }\n.fb-pane--right { border-left: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); }\n\n/* Palette */\n.fb-palette-group { margin-bottom: 16px; }\n.fb-palette-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mj-text-muted); margin: 0 0 8px; }\n.fb-palette { display: flex; flex-direction: column; gap: 6px; }\n.fb-palette-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 0.875rem; padding: 8px 10px; cursor: pointer; border-radius: var(--mj-radius-md, 8px); border: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); }\n.fb-palette-item:hover { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-default); }\n.fb-palette-item i { width: 18px; text-align: center; color: var(--mj-text-secondary); }\n\n/* Canvas */\n.fb-canvas { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }\n.fb-canvas-head h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--mj-text-primary); }\n.fb-canvas-head p { margin: 0; color: var(--mj-text-secondary); font-size: 0.9rem; }\n.fb-q-list { display: flex; flex-direction: column; gap: 12px; }\n.fb-q { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); cursor: pointer; }\n.fb-q:hover { border-color: var(--mj-border-strong); }\n.fb-q.is-selected { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 1px var(--mj-brand-primary); }\n\n/* Drag handle \u2014 pointer/touch reorder (arrows remain the keyboard fallback). */\n.fb-q-handle { flex: none; align-self: stretch; width: 26px; display: flex; align-items: center; justify-content: center; cursor: grab; border: none; background: transparent; color: var(--mj-text-muted); border-radius: var(--mj-radius-sm, 6px); touch-action: none; }\n.fb-q-handle:hover:not(:disabled) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.fb-q-handle:focus-visible { outline: 2px solid var(--mjf-focus-ring, var(--mj-brand-primary)); outline-offset: 1px; }\n.fb-q-handle:disabled { opacity: 0.35; cursor: not-allowed; }\n.fb-q-handle:active { cursor: grabbing; }\n\n/* CDK drag-drop visual states \u2014 token-only so dark mode stays intact. */\n.fb-q-list.cdk-drop-list-dragging .fb-q:not(.cdk-drag-placeholder) { transition: transform var(--mj-transition-base, 0.18s ease); }\n.cdk-drag-preview.fb-q { box-shadow: 0 6px 18px var(--mjf-drag-shadow, var(--mj-shadow-color, rgba(0, 0, 0, 0.18))); border-color: var(--mj-brand-primary); }\n.fb-q-drag-preview { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--mj-radius-lg, 12px); border: 1px solid var(--mj-brand-primary); background: var(--mj-bg-surface-card, var(--mj-bg-surface)); color: var(--mj-text-primary); box-shadow: 0 6px 18px var(--mjf-drag-shadow, var(--mj-shadow-color, rgba(0, 0, 0, 0.18))); }\n.cdk-drag-placeholder { opacity: 0.4; border-style: dashed !important; border-color: var(--mj-brand-primary) !important; background: var(--mj-bg-surface-sunken) !important; }\n.cdk-drag-animating { transition: transform var(--mj-transition-base, 0.2s cubic-bezier(0, 0, 0.2, 1)); }\n.fb-q-main { flex: 1; min-width: 0; }\n.fb-q-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }\n.fb-q-num { font-size: 0.75rem; font-weight: 700; color: var(--mj-text-muted); }\n.fb-q-label { font-weight: 600; color: var(--mj-text-primary); word-break: break-word; }\n.fb-q-help { font-size: 0.8125rem; color: var(--mj-text-muted); margin-top: 3px; }\n.fb-q-side { display: flex; flex-direction: column; gap: 6px; align-items: center; }\n.fb-q-btn { width: 30px; height: 28px; cursor: pointer; border-radius: var(--mj-radius-sm, 6px); border: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface); color: var(--mj-text-muted); }\n.fb-q-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.fb-q-btn:disabled { opacity: 0.35; cursor: not-allowed; }\n.fb-canvas-empty { text-align: center; color: var(--mj-text-muted); padding: 40px 0; }\n\n.fb-distribute { padding: 20px; max-width: 880px; margin: 0 auto; }\n.fb-design { flex: 1; min-height: 0; padding: 16px; overflow: hidden; }\n.fb-design mjf-design-panel { display: block; height: 100%; }\n\n/* Mobile: stack the panes. */\n@media (max-width: 900px) {\n  .fb-body { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }\n  .fb-pane--left, .fb-pane--right { border: none; border-top: 1px solid var(--mj-border-default); }\n  .fb-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormBuilderComponent, { className: "FormBuilderComponent", filePath: "lib/builder/form-builder.component.ts", lineNumber: 79 }); })();
+//# sourceMappingURL=form-builder.component.js.map