udp-stencil-component-library 26.5.0-beta.2 → 26.5.0-beta.21

package/dist/collection/components/forms/udp-question-form/builder/udp-question-form-builder.js

@@ -0,0 +1,1382 @@
+import { h, Host } from "@stencil/core";
+import { getIn, setIn } from "final-form";
+import Sortable from "sortablejs";
+import { createNewLoadedForm, createNewQuestion, createNewSection, checkRangeConsistency, FormType, getAuthorRulesFor, } from "../core";
+import { getType, validateForm, validateQuestionItem } from "./form-item-types";
+import { getQuestionTemplatesGroupedByCategory } from "./utils/question-template";
+import { formRegistry } from "../../../../utilities/global-form-registry/form-registry";
+import { getCurrentTenantId } from "../../../../udp-utilities/tenant/tenantUtils";
+import { FormNotFoundError, fetchFollowUpFormsList, fetchLookupOptions, loadFormData, saveForm, } from "./utils/builder-api";
+import { getFormVersions } from "./utils/form-versions";
+import { renderSectionCard } from "./components/section-card";
+import { renderAddQuestionDrawerContent } from "./components/add-question-drawer-content";
+import { renderSectionEditDrawer } from "./components/section-edit-drawer-content";
+import { renderPreviewPane } from "./components/preview-pane";
+import { renderFormStructureTree } from "./components/form-structure-sidebar";
+import { renderConfigureQuestionDrawer } from "./components/configure-question-drawer";
+import { toForm as fpToForm, fromForm as fpFromForm, } from "../core/field-properties-schemas";
+/**
+ * Stable IDs used to register the drawer forms with `formRegistry`. The footer
+ * Update / Save buttons live outside the shadow root, so they reach back into
+ * each drawer's `<udp-form-component>` via `form="<id>" type="submit"` — the
+ * registry resolves the ID to the inner form element. Keep these in one place
+ * so register / unregister / `form=` references can't drift.
+ */
+const FORM_IDS = {
+    QUESTION_CONFIG: 'question-config-form',
+    SECTION_EDIT: 'section-edit-form',
+};
+export class UdpQuestionFormBuilder {
+    constructor() {
+        // --- Feature toggles ---
+        this.isPublicFormConfigOn = false;
+        this.isCommentingConfigOn = false;
+        this.isFollowUpFormConfigOn = false;
+        this.loadedForm = createNewLoadedForm({ tenantId: '' });
+        /**
+         * Undo / redo stacks of past `loadedForm` snapshots. Pushed by `recordHistory`
+         * at "checkpoint" mutation moments: structural changes (add/delete/duplicate/
+         * reorder section or question) push synchronously; drawer edits collapse to
+         * one entry — the snapshot is taken on drawer open, pushed on drawer close
+         * only if the user actually changed something. Initial form load and
+         * post-save reload skip history (they aren't user gestures). Cap at
+         * `HISTORY_CAP` to bound memory.
+         */
+        this.undoStack = [];
+        this.redoStack = [];
+        this.loadedFormOnDrawerOpen = null;
+        /**
+         * Open-drawer state is encoded as a nullable index — not a boolean +
+         * separate index pair. `null` means closed; a number means "this drawer is
+         * open for that target". Eliminates the boolean/index-out-of-sync class of
+         * bug structurally.
+         */
+        this.activeSectionIndex = null;
+        this.editingQuestion = null;
+        /**
+         * Initial values handed to the Configure-drawer's `<udp-form-component>`.
+         * Snapshotted when the drawer opens so the object identity is stable across
+         * re-renders — Final Form re-runs `form.initialize` on every `initialValues`
+         * prop change (and would clobber pristine fields each render otherwise).
+         * Step-2 of the drawer→Final Form migration tracks only the generic-section
+         * fields here (`questionText`, `helperText`, `referenceCode`, `required`);
+         * the type-specific inputs continue to mutate `sectionsDraft` via the
+         * existing handler flow until later migration steps.
+         */
+        this.editDrawerInitialValues = {};
+        this.isSaving = false;
+        this.isNewForm = true;
+        this.isMostRecentFormVersion = false;
+        /**
+         * Structured load error: `'notFound'` when the backend returned no row
+         * for the requested formId (typically because the form was deleted, the
+         * tenant header doesn't match, or the URL points at a stale id);
+         * `'generic'` for everything else (network, parse, etc.). `null` when
+         * the load succeeded or is still in flight. Drives a friendly per-cause
+         * empty state in `render()`.
+         */
+        this.loadError = null;
+        this.isLoading = false;
+        /** Pending question to delete; when set, the delete-confirm dialog is open. */
+        this.deleteQuestionPending = null;
+        /** Pending section to delete; when set, the delete-section confirm dialog is open. */
+        this.deleteSectionPending = null;
+        /** Filter string for the Add Form Question drawer (name, category, or keywords). */
+        this.addQuestionFilter = '';
+        /** Section being edited (index into sections). When non-null, section edit drawer is open. */
+        this.editingSectionIndex = null;
+        /** When true, the version list drawer is open. */
+        this.isVersionDrawerOpen = false;
+        /** List of version numbers for the current form. */
+        this.versionList = [];
+        /** Lookup options for list-type questions; fetched from `/UdpLookup` on init. */
+        this.lookupOptions = [];
+        /**
+         * Forms in the tenant tagged `type: FollowUp`, surfaced in the per-question
+         * follow-up-allowlist picker. Fetched on builder init from
+         * `/UdpFormLatestVersionView/search`; empty if the fetch fails (non-blocking).
+         */
+        this.followUpFormOptions = [];
+        /**
+         * Which full-screen view is showing: the builder ('build') or the live
+         * renderer ('preview'). Tabs at the top swap between them; each is full
+         * width. Defaults to 'build'.
+         */
+        this.activeTab = 'build';
+        /**
+         * Debounced mirror of `loadedForm` fed to the preview pane. `loadedForm`
+         * changes on every keystroke in the Configure drawer / Add Question
+         * sidebar; pushing each one straight to the renderer means it re-runs
+         * `parseForm` / `buildInitialValuesFromSubmission` / `@Watch('loadedForm')`
+         * downstream on every character. The sync is paused entirely while the
+         * Build tab is active (no point re-rendering off-screen) and
+         * snapshot-immediately when the Preview tab is selected. `null` only before
+         * the Preview tab is first opened.
+         */
+        this.previewLoadedForm = null;
+        /** Save confirmation modal — used to surface Private/Public choice on save. */
+        this.isSaveModalOpen = false;
+        /** Private toggle value held inside the save modal until Confirm. */
+        this.saveModalPrivate = true;
+        /**
+         * Whether this form is being saved as a follow-up form template. Held in
+         * modal state until Confirm so cancelling a save doesn't mutate
+         * `form.type`. Gated by `isFollowUpFormConfigOn` — when the flag is off,
+         * the toggle isn't rendered and the existing `form.type` round-trips
+         * unchanged.
+         */
+        this.saveModalIsFollowUp = false;
+        this.sortableQuestionsMap = new Map();
+        /**
+         * Serialized snapshot of the last-saved `loadedForm`. Refreshed on initial
+         * load and after every successful save; `hasUnsavedChanges` compares the
+         * live form against it. Comparing serialized strings (rather than holding a
+         * boolean toggled at each mutation point) means undo / redo back to the
+         * saved state correctly reads as "no unsaved changes" with no per-mutation
+         * bookkeeping.
+         */
+        this.savedFormSnapshot = '';
+        /** Pending preview-sync timer. See `previewLoadedForm` for rationale. */
+        this.previewSyncTimer = null;
+        /**
+         * Publish the host's top edge (distance from the viewport top) as
+         * `--builder-top`, so the host can size itself to `100dvh − top` and fill the
+         * remaining viewport region exactly — sidebar and canvas then scroll inside it
+         * (full-height rail, no page-flow). Measured on load + resize; the top only
+         * shifts when chrome above the builder changes, which tracks viewport width.
+         */
+        this.measureBuilderTop = () => {
+            if (!this.hostEl)
+                return;
+            const top = Math.max(0, this.hostEl.getBoundingClientRect().top);
+            this.hostEl.style.setProperty('--builder-top', `${top}px`);
+        };
+        this.handleTabChange = (tab) => {
+            const next = tab === 'preview' ? 'preview' : 'build';
+            this.activeTab = next;
+            if (next === 'preview') {
+                // Snapshot synchronously so the renderer mounts with the live schema,
+                // not a stale (or null) one. The debounced sync takes over for
+                // subsequent edits while the Preview tab stays active.
+                this.previewLoadedForm = this.loadedForm;
+            }
+            else {
+                this.clearPreviewSyncTimer();
+            }
+        };
+        this.openSaveModal = () => {
+            var _a;
+            this.saveModalPrivate = (_a = this.loadedForm.form.isPrivate) !== null && _a !== void 0 ? _a : true;
+            this.saveModalIsFollowUp = this.loadedForm.form.type === FormType.FollowUp;
+            this.isSaveModalOpen = true;
+        };
+        this.cancelSaveModal = () => {
+            this.isSaveModalOpen = false;
+        };
+        this.confirmSaveModal = async () => {
+            this.updateForm({
+                isPrivate: this.saveModalPrivate,
+                type: this.saveModalIsFollowUp ? FormType.FollowUp : FormType.Standard,
+            });
+            this.isSaveModalOpen = false;
+            await this.handleSave();
+        };
+        /** Pop the most recent snapshot onto `loadedForm`; current state goes to redo. */
+        this.undo = () => {
+            if (this.undoStack.length === 0)
+                return;
+            const popped = this.undoStack[this.undoStack.length - 1];
+            this.undoStack = this.undoStack.slice(0, -1);
+            this.redoStack = [...this.redoStack, this.loadedForm];
+            this.loadedForm = popped;
+        };
+        /** Reverse of `undo`. */
+        this.redo = () => {
+            if (this.redoStack.length === 0)
+                return;
+            const popped = this.redoStack[this.redoStack.length - 1];
+            this.redoStack = this.redoStack.slice(0, -1);
+            this.undoStack = [...this.undoStack, this.loadedForm];
+            this.loadedForm = popped;
+        };
+        // ----- edit drawers -----
+        this.openEditDrawer = (sIndex, qIndex) => {
+            // Snapshot for one-history-entry-per-drawer-session. The configure
+            // drawer is live-edit — every keystroke writes to `loadedForm`. We
+            // collapse the whole drawer session to a single undo step by comparing
+            // the snapshot at open vs. loadedForm at close.
+            this.loadedFormOnDrawerOpen = this.loadedForm;
+            this.editingQuestion = { sIndex, qIndex };
+            this.editDrawerInitialValues = this.computeEditDrawerInitialValues(this.sections, sIndex, qIndex);
+        };
+        /**
+         * Subscribed to the Configure drawer's `<udp-form-component>` via
+         * `onFormStateUpdated`. Live-edit only: writes the current Final Form
+         * values back to `loadedForm.sections[s].questions[q]` on every value
+         * change. The drawer is a view onto the live data, not a transactional
+         * commit. Closing the drawer is a no-op; everything is already in
+         * `loadedForm`.
+         */
+        this.handleConfigFormStateUpdated = (e) => {
+            var _a;
+            const state = e.detail;
+            const values = (_a = state.values) !== null && _a !== void 0 ? _a : {};
+            if (this.editingQuestion) {
+                this.writeQuestionFromValues(values);
+            }
+        };
+        /** A rail row was clicked — open the matching section/question editor. */
+        this.handleStructureClick = (node) => {
+            if (node.kind === 'question' && node.qIndex !== undefined) {
+                this.openEditDrawer(node.sIndex, node.qIndex);
+            }
+            else if (node.kind === 'section') {
+                this.openSectionEditor(node.sIndex);
+            }
+        };
+        /**
+         * Close the Configure drawer. Edits are already in `loadedForm` (live-edit
+         * model) so there's no commit gesture — just dismiss the UI. Also closes
+         * the Add Question drawer if it was layered behind Configure (new-question
+         * flow), so picking a type → editing → close returns the user to the main
+         * builder cleanly.
+         */
+        this.closeEditDrawer = () => {
+            formRegistry.unregister(FORM_IDS.QUESTION_CONFIG);
+            // If the drawer session changed `loadedForm`, push the open-snapshot as
+            // one undo entry. The addQuestion-then-edit flow already pushed its own
+            // pre-add snapshot, so this checks the snapshot hasn't already been
+            // pushed (top of undo stack === snapshot).
+            if (this.loadedFormOnDrawerOpen !== null &&
+                this.loadedFormOnDrawerOpen !== this.loadedForm &&
+                this.undoStack[this.undoStack.length - 1] !== this.loadedFormOnDrawerOpen) {
+                this.recordHistory(this.loadedFormOnDrawerOpen);
+            }
+            this.loadedFormOnDrawerOpen = null;
+            this.editingQuestion = null;
+        };
+        /**
+         * Cancel the Configure drawer: discard every edit made during this drawer
+         * session by restoring the `loadedForm` snapshot taken when the drawer
+         * opened, then dismiss. Unlike `closeEditDrawer` (Done / X), which keeps the
+         * live edits, Cancel reverts them. For the add-question flow the snapshot is
+         * the pre-add state, so cancelling a brand-new question removes it.
+         */
+        this.cancelEditDrawer = () => {
+            formRegistry.unregister(FORM_IDS.QUESTION_CONFIG);
+            const snapshot = this.loadedFormOnDrawerOpen;
+            if (snapshot !== null && snapshot !== this.loadedForm) {
+                this.loadedForm = snapshot;
+            }
+            // If opening the drawer pushed a history entry (the add-question flow
+            // records the pre-add snapshot before appending), drop it — the action
+            // was cancelled, so it shouldn't linger on the undo stack.
+            if (snapshot !== null && this.undoStack[this.undoStack.length - 1] === snapshot) {
+                this.undoStack = this.undoStack.slice(0, -1);
+            }
+            this.loadedFormOnDrawerOpen = null;
+            this.editingQuestion = null;
+        };
+        /**
+         * Final Form's validate prop: returns an error map keyed by FF field path.
+         * Two concerns:
+         *
+         *  1. Question text required (unless the type opts out via
+         *     `template.questionTextOptional`).
+         *  2. For every active validation rule on this question, run the rule's
+         *     `validateParams` and surface its message at the first param's
+         *     `formPath`. This catches misconfiguration (bad regex, min < 0, etc.)
+         *     inline as the author edits — no need to wait for save.
+         *
+         * Final Form gates `submitHandler` on this map being empty.
+         */
+        this.validateDrawer = (values) => {
+            var _a, _b, _c;
+            // Errors are NESTED, not flat: Final Form resolves a field's error via
+            // `getIn(errors, fieldName)`, and the param inputs have dotted names
+            // (`fieldProperties.minSelections`). A flat `errors['fieldProperties.x']`
+            // key is never found — only top-level keys like `questionText` would
+            // surface. `setIn`/`getIn` keep the nesting correct (and merge siblings).
+            let errors = {};
+            const setError = (path, message) => {
+                if (getIn(errors, path) == null)
+                    errors = setIn(errors, path, message);
+            };
+            if (!this.editingQuestion)
+                return errors;
+            const q = (_b = (_a = this.sections[this.editingQuestion.sIndex]) === null || _a === void 0 ? void 0 : _a.questions) === null || _b === void 0 ? void 0 : _b[this.editingQuestion.qIndex];
+            if (!q)
+                return errors;
+            const template = getType(q.fieldTypeId);
+            const isQuestionTextRequired = !(template === null || template === void 0 ? void 0 : template.questionTextOptional);
+            const questionText = typeof values.questionText === 'string' ? values.questionText : '';
+            if (isQuestionTextRequired && !questionText.trim()) {
+                setError('questionText', 'This field is required.');
+            }
+            // Live-values view of the editing question — rules read params off it.
+            const liveFieldProperties = values.fieldProperties && typeof values.fieldProperties === 'object'
+                ? values.fieldProperties
+                : q.fieldProperties;
+            const liveRequired = typeof values.required === 'boolean' ? values.required : q.required;
+            const synthetic = Object.assign(Object.assign({}, q), { required: liveRequired, fieldProperties: liveFieldProperties });
+            for (const rule of getAuthorRulesFor(q.fieldTypeId)) {
+                const params = rule.readParams(synthetic);
+                if (params === null)
+                    continue;
+                const message = rule.validateParams(params);
+                if (!message)
+                    continue;
+                // Attach the error to the first param's FF path. For multi-param rules
+                // we'd extend `validateParams` to return a `{ key, message }` shape;
+                // single-param rules (every current author rule) work uniformly.
+                const targetPath = (_c = rule.builder.params[0]) === null || _c === void 0 ? void 0 : _c.formPath;
+                if (targetPath)
+                    setError(targetPath, message);
+            }
+            // Cross-rule consistency: a min/max pair where the minimum exceeds the
+            // maximum (e.g. minSelections 3 + maxSelections 1) is unsatisfiable. No
+            // single rule can see its sibling, so this check spans both and blocks
+            // the Update until the author fixes it.
+            for (const { formPath, message } of checkRangeConsistency(synthetic)) {
+                setError(formPath, message);
+            }
+            return errors;
+        };
+        this.openSectionEditor = (sIndex) => {
+            this.loadedFormOnDrawerOpen = this.loadedForm;
+            this.editingSectionIndex = sIndex;
+        };
+        this.updateSectionTitle = (sIndex, title) => {
+            const next = [...this.sections];
+            if (!next[sIndex])
+                return;
+            next[sIndex] = Object.assign(Object.assign({}, next[sIndex]), { title });
+            this.setSections(next);
+        };
+        this.closeSectionEditor = () => {
+            formRegistry.unregister(FORM_IDS.SECTION_EDIT);
+            if (this.loadedFormOnDrawerOpen !== null &&
+                this.loadedFormOnDrawerOpen !== this.loadedForm &&
+                this.undoStack[this.undoStack.length - 1] !== this.loadedFormOnDrawerOpen) {
+                this.recordHistory(this.loadedFormOnDrawerOpen);
+            }
+            this.loadedFormOnDrawerOpen = null;
+            this.editingSectionIndex = null;
+        };
+        /**
+         * Mutate the section currently being edited. The drawer's inputs call this
+         * on every change so edits go straight into `loadedForm` (live-edit model).
+         * Closing the drawer is a no-op; the data is already there.
+         */
+        this.patchEditingSection = (patch) => {
+            if (this.editingSectionIndex === null)
+                return;
+            const sIndex = this.editingSectionIndex;
+            const current = this.sections[sIndex];
+            if (!current)
+                return;
+            const next = this.sections.slice();
+            next[sIndex] = Object.assign(Object.assign({}, current), patch);
+            this.setSections(next);
+        };
+        // ----- add -----
+        this.addSection = () => {
+            this.recordHistory(this.loadedForm);
+            const order = this.sections.length + 1;
+            this.setSections([
+                ...this.sections,
+                createNewSection({ order, formId: this.formId, formVersion: this.version }),
+            ]);
+        };
+        this.openAddItemDrawer = (sectionIndex) => {
+            this.activeSectionIndex = sectionIndex;
+        };
+        this.closeAddItemDrawer = () => {
+            this.activeSectionIndex = null;
+            this.addQuestionFilter = '';
+        };
+        this.addQuestion = (template) => {
+            if (this.activeSectionIndex === null)
+                return;
+            // Snapshot the pre-add state so the Configure drawer's undo-collapse and
+            // Cancel both treat "add + configure" as one reversible session. Same
+            // reference is pushed to the undo stack below, so closeEditDrawer's
+            // double-push guard (top === snapshot) holds.
+            this.loadedFormOnDrawerOpen = this.loadedForm;
+            this.recordHistory(this.loadedForm);
+            const sIndex = this.activeSectionIndex;
+            const fieldTypeId = template.fieldTypeId;
+            const newQuestion = createNewQuestion({
+                fieldTypeId,
+                fieldProperties: Object.assign({}, template.defaultFieldProperties),
+                questionOrder: this.sections[sIndex].questions.length + 1,
+                formSectionId: this.sections[sIndex].id,
+                formId: this.formId,
+                formVersion: this.version,
+            });
+            // Append the new question to `loadedForm` directly (live-edit model).
+            // Closing the Configure drawer without editing leaves the new question
+            // in place — same UX as Notion / Linear / Figma where creating a block
+            // is committed; undoing is a separate gesture (the form-level Save is
+            // the real persistence boundary).
+            const currentSection = this.sections[sIndex];
+            const nextQuestions = [...currentSection.questions, newQuestion];
+            const nextSections = this.sections.slice();
+            nextSections[sIndex] = Object.assign(Object.assign({}, currentSection), { questions: nextQuestions });
+            this.setSections(nextSections);
+            const qIndex = nextQuestions.length - 1;
+            this.editingQuestion = { sIndex, qIndex };
+            this.editDrawerInitialValues = this.computeEditDrawerInitialValues(nextSections, sIndex, qIndex);
+        };
+        // ----- delete / duplicate -----
+        this.deleteSection = (index) => {
+            this.recordHistory(this.loadedForm);
+            const next = [...this.sections];
+            next.splice(index, 1);
+            this.setSections(next.map((s, i) => (Object.assign(Object.assign({}, s), { order: i + 1 }))));
+        };
+        this.requestDeleteSection = (sIndex) => {
+            this.deleteSectionPending = sIndex;
+        };
+        this.confirmDeleteSection = () => {
+            if (this.deleteSectionPending === null)
+                return;
+            const index = this.deleteSectionPending;
+            this.deleteSectionPending = null;
+            this.deleteSection(index);
+        };
+        this.closeDeleteSectionDialog = () => {
+            this.deleteSectionPending = null;
+        };
+        this.deleteQuestion = (sectionIndex, questionIndex) => {
+            var _a, _b;
+            this.recordHistory(this.loadedForm);
+            const next = structuredClone(this.sections);
+            next[sectionIndex].questions.splice(questionIndex, 1);
+            next[sectionIndex].questions.forEach((q, i) => (q.questionOrder = i + 1));
+            this.setSections(next);
+            if (((_a = this.editingQuestion) === null || _a === void 0 ? void 0 : _a.sIndex) === sectionIndex &&
+                ((_b = this.editingQuestion) === null || _b === void 0 ? void 0 : _b.qIndex) === questionIndex) {
+                this.closeEditDrawer();
+            }
+        };
+        this.copyQuestion = (sectionIndex, questionIndex) => {
+            this.recordHistory(this.loadedForm);
+            const next = structuredClone(this.sections);
+            const target = this.sections[sectionIndex].questions[questionIndex];
+            const copy = createNewQuestion({
+                fieldTypeId: target.fieldTypeId,
+                fieldProperties: structuredClone(target.fieldProperties),
+                questionOrder: questionIndex + 2,
+                formSectionId: target.formSectionId,
+                formId: this.formId,
+                formVersion: this.version,
+            });
+            copy.questionText = `${target.questionText || ''} (Copy)`;
+            copy.helperText = target.helperText;
+            copy.required = target.required;
+            copy.referenceCode = target.referenceCode;
+            next[sectionIndex].questions.splice(questionIndex + 1, 0, copy);
+            next[sectionIndex].questions.forEach((q, i) => (q.questionOrder = i + 1));
+            this.setSections(next);
+        };
+        this.confirmDeleteQuestion = () => {
+            if (!this.deleteQuestionPending)
+                return;
+            const { sIndex, qIndex } = this.deleteQuestionPending;
+            this.deleteQuestionPending = null;
+            this.deleteQuestion(sIndex, qIndex);
+        };
+        this.closeDeleteQuestionDialog = () => {
+            this.deleteQuestionPending = null;
+        };
+        // ----- versions drawer -----
+        this.openVersionDrawer = async () => {
+            var _a;
+            this.isVersionDrawerOpen = true;
+            if (!this.formId)
+                return;
+            try {
+                this.versionList = await getFormVersions(this.formId);
+            }
+            catch (_b) {
+                (_a = this.enqueueSnackbar) === null || _a === void 0 ? void 0 : _a.call(this, 'Error loading versions', {
+                    variant: 'error',
+                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
+                });
+                this.versionList = [];
+            }
+        };
+        this.closeVersionDrawer = () => {
+            this.isVersionDrawerOpen = false;
+        };
+        this.handleVersionSelect = (version) => {
+            this.closeVersionDrawer();
+            if (!this.formId)
+                return;
+            // Picking the latest version drops `?v=` from the URL (the canonical
+            // "I'm on latest" shape); picking an older version pins `?v=N`.
+            const latestVersion = this.versionList.length
+                ? Math.max(...this.versionList)
+                : version;
+            const isLatest = version === latestVersion;
+            this.redirectToFormVersion(version, isLatest);
+        };
+        // ----- save -----
+        this.handleSave = async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            const validation = validateForm(this.loadedForm.form, this.sections, getType);
+            if (!validation.valid) {
+                (_a = this.enqueueSnackbar) === null || _a === void 0 ? void 0 : _a.call(this, (_b = validation.firstError) !== null && _b !== void 0 ? _b : 'Please fix form errors.', {
+                    variant: 'error',
+                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
+                });
+                return;
+            }
+            // tenantId fallback (defense-in-depth: backend rejects empty tenantId)
+            if (!this.loadedForm.form.tenantId) {
+                this.updateForm({ tenantId: this.resolveTenantId() });
+            }
+            this.isSaving = true;
+            // Snapshot before we flip `isNewForm` to false below — we use this to
+            // decide whether the save was a fresh form (POST /UdpForm/full) or a new
+            // version of an existing form (PUT /UdpForm/{id}/full). Only the fresh-
+            // form case needs to escape the `/forms/new` pathname, which only the
+            // page wrapper / host knows how to construct.
+            const wasNew = this.isNewForm;
+            try {
+                const result = await saveForm(this.loadedForm, this.isMostRecentFormVersion);
+                // Response IS the describe-shape tree — adopt it as the new baseline.
+                // Existing-version saves don't push a URL change (the user was on
+                // latest, URL had no `?v=`, the new version is now latest — URL stays
+                // the same). New-form saves DO transition the URL via the host's
+                // `onFormCreated` callback; the @Watch on formId self-checks
+                // (`loadedForm.form.id === formId`) so the resulting prop change
+                // doesn't trigger a redundant `/describe` refetch.
+                this.loadedForm = result.loadedForm;
+                this.isNewForm = false;
+                this.isMostRecentFormVersion = true;
+                this.snapshotSavedForm();
+                this.undoStack = [];
+                this.redoStack = [];
+                (_c = this.enqueueSnackbar) === null || _c === void 0 ? void 0 : _c.call(this, 'Success', {
+                    variant: 'success',
+                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
+                });
+                if (wasNew) {
+                    // Host owns the path transition (e.g. `/forms/new` → `/forms/{id}/builder`).
+                    // Page wrapper listens via `onFormCreated={(e) => history.replace(...)}`.
+                    this.formCreated.emit({
+                        formId: result.formId,
+                        version: result.formVersion,
+                    });
+                }
+                // Existing-form-new-version: nothing to do. The user was on the
+                // latest version (the only state where Save is enabled), the URL had
+                // no `?v=` (canonical "latest" shape), the new version is now the
+                // latest — so the URL stays the same. No internal URL manipulation
+                // on save.
+            }
+            catch (error) {
+                console.error('Form submission error:', error);
+                const err = error;
+                const message = (_m = (_l = (_h = (_g = (_f = (_e = (_d = err === null || err === void 0 ? void 0 : err.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f.tenantId) === null || _g === void 0 ? void 0 : _g[0]) !== null && _h !== void 0 ? _h : (_k = (_j = err === null || err === void 0 ? void 0 : err.response) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : err === null || err === void 0 ? void 0 : err.message) !== null && _m !== void 0 ? _m : 'Error saving form';
+                (_o = this.enqueueSnackbar) === null || _o === void 0 ? void 0 : _o.call(this, message, {
+                    variant: 'error',
+                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
+                });
+            }
+            finally {
+                this.isSaving = false;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.initializeBuilder();
+    }
+    /**
+     * Read the builder's current draft form. Exposed for embedders that need to
+     * snapshot the in-progress schema without going through the Save flow — e.g.
+     * "save to local storage", "send to another component", or "feed into a
+     * test harness that drives the renderer with this exact shape."
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async getLoadedForm() {
+        var _a;
+        return (_a = this.loadedForm) !== null && _a !== void 0 ? _a : null;
+    }
+    componentDidLoad() {
+        this.initSortable();
+        this.measureBuilderTop();
+        window.addEventListener('resize', this.measureBuilderTop);
+    }
+    componentDidUpdate() {
+        this.initSortable();
+    }
+    disconnectedCallback() {
+        this.clearPreviewSyncTimer();
+        window.removeEventListener('resize', this.measureBuilderTop);
+    }
+    clearPreviewSyncTimer() {
+        if (this.previewSyncTimer != null) {
+            clearTimeout(this.previewSyncTimer);
+            this.previewSyncTimer = null;
+        }
+    }
+    /**
+     * `loadedForm` changes during builder edits — schedule a debounced push into
+     * `previewLoadedForm` so the preview renderer doesn't re-init on every
+     * keystroke. Skipped entirely while the Build tab is active (no point
+     * spending cycles off-screen); `handleTabChange` snapshots immediately when
+     * the Preview tab is selected.
+     */
+    schedulePreviewSync() {
+        if (this.activeTab !== 'preview')
+            return;
+        this.clearPreviewSyncTimer();
+        this.previewSyncTimer = setTimeout(() => {
+            this.previewLoadedForm = this.loadedForm;
+            this.previewSyncTimer = null;
+        }, UdpQuestionFormBuilder.PREVIEW_SYNC_DELAY_MS);
+    }
+    handleIdOrVersionChange() {
+        var _a, _b;
+        // Save flow updates `loadedForm` locally + pushes the new URL; when the
+        // host reflects the URL back as fresh props, the form already matches —
+        // skip the refetch instead of round-tripping `/describe`.
+        if (((_a = this.loadedForm) === null || _a === void 0 ? void 0 : _a.form.id) === this.formId &&
+            ((_b = this.loadedForm) === null || _b === void 0 ? void 0 : _b.form.version) === Number(this.version)) {
+            return;
+        }
+        this.initializeBuilder();
+    }
+    // ----- helpers -----
+    get sections() {
+        return this.loadedForm.sections;
+    }
+    setSections(sections) {
+        this.loadedForm = Object.assign(Object.assign({}, this.loadedForm), { sections });
+    }
+    updateForm(patch) {
+        this.loadedForm = Object.assign(Object.assign({}, this.loadedForm), { form: Object.assign(Object.assign({}, this.loadedForm.form), patch) });
+    }
+    // ----- history (undo / redo) -----
+    /**
+     * Push `snapshot` onto the undo stack, capped at `HISTORY_CAP`. Clears the
+     * redo stack because a new mutation invalidates any "future" branches the
+     * user previously undid. Call this BEFORE applying a mutation, with the
+     * pre-mutation `loadedForm` as the argument.
+     */
+    recordHistory(snapshot) {
+        const next = this.undoStack.length >= UdpQuestionFormBuilder.HISTORY_CAP
+            ? this.undoStack.slice(this.undoStack.length - UdpQuestionFormBuilder.HISTORY_CAP + 1)
+            : this.undoStack.slice();
+        next.push(snapshot);
+        this.undoStack = next;
+        if (this.redoStack.length > 0)
+            this.redoStack = [];
+    }
+    /** Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z keyboard shortcuts. */
+    handleHistoryKeydown(e) {
+        var _a;
+        // Skip when the user is typing in any input — the input owns Cmd+Z for
+        // its own undo (text editing). Only fire when focus is on the builder
+        // chrome or a non-text-input control.
+        const target = e.target;
+        const tag = (_a = target === null || target === void 0 ? void 0 : target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (tag === 'input' || tag === 'textarea' || (target === null || target === void 0 ? void 0 : target.isContentEditable))
+            return;
+        if (!(e.metaKey || e.ctrlKey))
+            return;
+        if (e.key !== 'z' && e.key !== 'Z')
+            return;
+        e.preventDefault();
+        if (e.shiftKey) {
+            this.redo();
+        }
+        else {
+            this.undo();
+        }
+    }
+    resolveTenantId() {
+        var _a, _b, _c, _d;
+        return ((_d = (_c = (_b = (_a = this.getTenantCallback) === null || _a === void 0 ? void 0 : _a.call(this)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : getCurrentTenantId()) !== null && _d !== void 0 ? _d : '');
+    }
+    /**
+     * Apply Final Form values for the editing question back to `loadedForm`.
+     * Runs on every Final Form state change (typical: every keystroke / toggle).
+     * `fpFromForm` is the engine round-trip — `fieldProperties` is fully
+     * regenerated from the engine's schema, so cross-key constraints (items /
+     * lookupId XOR) hold by construction.
+     */
+    writeQuestionFromValues(values) {
+        var _a;
+        if (!this.editingQuestion)
+            return;
+        const { sIndex, qIndex } = this.editingQuestion;
+        const currentSection = this.loadedForm.sections[sIndex];
+        const currentQuestion = (_a = currentSection === null || currentSection === void 0 ? void 0 : currentSection.questions) === null || _a === void 0 ? void 0 : _a[qIndex];
+        if (!currentSection || !currentQuestion)
+            return;
+        const trimmedRef = typeof values.referenceCode === 'string'
+            ? values.referenceCode.trim()
+            : null;
+        const fpValues = (values.fieldProperties && typeof values.fieldProperties === 'object')
+            ? values.fieldProperties
+            : {};
+        const nextQuestion = Object.assign(Object.assign({}, currentQuestion), { questionText: typeof values.questionText === 'string' ? values.questionText : '', helperText: typeof values.helperText === 'string' && values.helperText.length > 0
+                ? values.helperText
+                : null, referenceCode: trimmedRef && trimmedRef.length > 0 ? trimmedRef : null, required: values.required === true, fieldProperties: fpFromForm(currentQuestion.fieldTypeId, fpValues) });
+        const nextQuestions = currentSection.questions.slice();
+        nextQuestions[qIndex] = nextQuestion;
+        const nextSections = this.loadedForm.sections.slice();
+        nextSections[sIndex] = Object.assign(Object.assign({}, currentSection), { questions: nextQuestions });
+        this.loadedForm = Object.assign(Object.assign({}, this.loadedForm), { sections: nextSections });
+    }
+    /**
+     * Resolve the currently-editing question's GUID for the preview pane's highlight prop.
+     * Returns `null` when no drawer is open. Reads from the canonical `sections` array
+     * (not `sectionsDraft`) so the highlight stays stable across in-flight drawer edits.
+     */
+    getEditingQuestionId() {
+        var _a, _b, _c;
+        const editing = this.editingQuestion;
+        if (!editing)
+            return null;
+        const id = (_c = (_b = (_a = this.sections[editing.sIndex]) === null || _a === void 0 ? void 0 : _a.questions) === null || _b === void 0 ? void 0 : _b[editing.qIndex]) === null || _c === void 0 ? void 0 : _c.id;
+        return id !== null && id !== void 0 ? id : null;
+    }
+    // ----- Form Structure rail -----
+    /**
+     * Which row the Structure rail should highlight: the editing question, else
+     * the editing section, else nothing. Single source of truth for the rail's
+     * `selectedId` so the active drawer's target stays lit.
+     */
+    getStructureSelectedId() {
+        var _a, _b;
+        if (this.editingQuestion)
+            return this.getEditingQuestionId();
+        if (this.editingSectionIndex !== null) {
+            return (_b = (_a = this.sections[this.editingSectionIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+        }
+        return null;
+    }
+    /** Snapshot the question fields that flow through Final Form (vs. the handler-mutated draft). */
+    computeEditDrawerInitialValues(sections, sIndex, qIndex) {
+        var _a, _b, _c, _d, _e;
+        const q = (_b = (_a = sections[sIndex]) === null || _a === void 0 ? void 0 : _a.questions) === null || _b === void 0 ? void 0 : _b[qIndex];
+        if (!q)
+            return {};
+        return {
+            questionText: (_c = q.questionText) !== null && _c !== void 0 ? _c : '',
+            helperText: (_d = q.helperText) !== null && _d !== void 0 ? _d : '',
+            referenceCode: (_e = q.referenceCode) !== null && _e !== void 0 ? _e : '',
+            required: q.required === true,
+            fieldProperties: fpToForm(q.fieldTypeId, q.fieldProperties),
+        };
+    }
+    // ----- load -----
+    async initializeBuilder() {
+        var _a;
+        try {
+            this.isLoading = true;
+            this.loadError = null;
+            // History is scoped to the current form/version — a fresh load (initial
+            // mount or post-save version bump) wipes both stacks since they refer
+            // to a different baseline.
+            this.undoStack = [];
+            this.redoStack = [];
+            const result = await loadFormData(this.formId, this.version, this.getTenantCallback);
+            this.loadedForm = result.loadedForm;
+            this.isNewForm = result.isNewForm;
+            this.isMostRecentFormVersion = result.isMostRecentFormVersion;
+            // Fire both options fetches in parallel — neither blocks the other and
+            // both are non-blocking failures (the picker just shows empty).
+            this.lookupOptions = await fetchLookupOptions();
+            this.followUpFormOptions = this.isFollowUpFormConfigOn
+                ? await fetchFollowUpFormsList()
+                : [];
+            // tenantId fallback (defense-in-depth: backend rejects empty tenantId)
+            if (!this.loadedForm.form.tenantId) {
+                this.updateForm({ tenantId: this.resolveTenantId() });
+            }
+            this.snapshotSavedForm();
+        }
+        catch (err) {
+            if (err instanceof FormNotFoundError) {
+                // Empty render — no snackbar; the inline "not found" panel is the
+                // primary surface and snackbar noise on top would be redundant.
+                this.loadError = 'notFound';
+            }
+            else {
+                this.loadError = 'generic';
+                (_a = this.enqueueSnackbar) === null || _a === void 0 ? void 0 : _a.call(this, 'Error loading form data', {
+                    variant: 'error',
+                    anchorOrigin: { vertical: 'top', horizontal: 'center' },
+                });
+            }
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    // ----- sortable -----
+    get isEditable() {
+        return this.isNewForm || this.isMostRecentFormVersion;
+    }
+    /** Capture the current `loadedForm` as the saved baseline for dirty tracking. */
+    snapshotSavedForm() {
+        this.savedFormSnapshot = JSON.stringify(this.loadedForm);
+    }
+    /**
+     * True when the live form has diverged from the last-saved baseline. Drives
+     * the "Unsaved changes" badge. Read-only versions can't be edited, so they
+     * never report unsaved changes.
+     *
+     * Suppressed until the initial load finishes and a baseline exists: the
+     * header renders during the fetch window (only the body is gated on
+     * `isLoading`), and with an empty `savedFormSnapshot` any non-empty form
+     * would otherwise read as dirty.
+     */
+    get hasUnsavedChanges() {
+        if (this.isLoading || this.savedFormSnapshot === '')
+            return false;
+        return this.isEditable && JSON.stringify(this.loadedForm) !== this.savedFormSnapshot;
+    }
+    initSortable() {
+        if (!this.isEditable) {
+            if (this.sortableSections)
+                this.sortableSections.destroy();
+            this.sortableQuestionsMap.forEach(s => s.destroy());
+            this.sortableQuestionsMap.clear();
+            return;
+        }
+        const sectionsContainer = this.hostEl.shadowRoot.querySelector('.sections-container');
+        if (sectionsContainer) {
+            if (this.sortableSections)
+                this.sortableSections.destroy();
+            this.sortableSections = new Sortable(sectionsContainer, {
+                animation: 150,
+                handle: '.section-drag-handle',
+                ghostClass: 'sortable-ghost',
+                chosenClass: 'sortable-chosen',
+                dragClass: 'sortable-drag',
+                onEnd: evt => this.handleSectionDragEnd(evt),
+            });
+        }
+        this.sections.forEach((_, index) => {
+            var _a;
+            const questionsContainer = this.hostEl.shadowRoot.querySelector(`#questions-${index}`);
+            if (questionsContainer) {
+                (_a = this.sortableQuestionsMap.get(index)) === null || _a === void 0 ? void 0 : _a.destroy();
+                const sortable = new Sortable(questionsContainer, {
+                    group: 'questions',
+                    animation: 150,
+                    handle: '.question-drag-handle',
+                    ghostClass: 'sortable-ghost',
+                    chosenClass: 'sortable-chosen',
+                    dragClass: 'sortable-drag',
+                    onEnd: evt => this.handleQuestionDragEnd(evt, index),
+                });
+                this.sortableQuestionsMap.set(index, sortable);
+            }
+        });
+    }
+    handleSectionDragEnd(evt) {
+        const { oldIndex, newIndex, item, to } = evt;
+        if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex)
+            return;
+        // Revert DOM change so Stencil VDOM can cleanly handle the state update.
+        const refNode = oldIndex < newIndex ? to.children[oldIndex] : to.children[oldIndex + 1];
+        to.insertBefore(item, refNode);
+        const next = [...this.sections];
+        const [moved] = next.splice(oldIndex, 1);
+        next.splice(newIndex, 0, moved);
+        this.setSections(next.map((s, i) => (Object.assign(Object.assign({}, s), { order: i + 1 }))));
+    }
+    handleQuestionDragEnd(evt, fromSectionIndex) {
+        const { oldIndex, newIndex, to, from, item } = evt;
+        if (oldIndex === undefined || newIndex === undefined)
+            return;
+        const toSectionAttr = to.getAttribute('data-section-index');
+        if (!toSectionAttr)
+            return;
+        const toSectionIndex = parseInt(toSectionAttr, 10);
+        if (oldIndex === newIndex && fromSectionIndex === toSectionIndex)
+            return;
+        // Revert DOM change so Stencil VDOM can cleanly handle the state update.
+        if (from === to) {
+            const refNode = oldIndex < newIndex ? from.children[oldIndex] : from.children[oldIndex + 1];
+            from.insertBefore(item, refNode);
+        }
+        else {
+            const refNode = from.children[oldIndex];
+            if (refNode) {
+                from.insertBefore(item, refNode);
+            }
+            else {
+                from.appendChild(item);
+            }
+        }
+        this.recordHistory(this.loadedForm);
+        const next = structuredClone(this.sections);
+        const [moved] = next[fromSectionIndex].questions.splice(oldIndex, 1);
+        next[toSectionIndex].questions.splice(newIndex, 0, moved);
+        next[fromSectionIndex].questions.forEach((q, i) => (q.questionOrder = i + 1));
+        if (fromSectionIndex !== toSectionIndex) {
+            next[toSectionIndex].questions.forEach((q, i) => (q.questionOrder = i + 1));
+        }
+        this.setSections(next);
+    }
+    /**
+     * Sync the URL's `?v=` param to a version transition.
+     *
+     * Convention: "no `?v=`" means "I'm on the latest, whatever that is" —
+     * so an older-version pick sets `?v=N`, and a latest pick strips it.
+     * Save-time URL writes are gone entirely (saving while on latest leaves
+     * URL unchanged); only explicit version-drawer picks call this.
+     *
+     * Always strips both legacy `udpf_formVersion` casings while we're
+     * here, so the URL doesn't carry duplicate version keys.
+     */
+    redirectToFormVersion(version, isLatest) {
+        if (typeof window === 'undefined')
+            return;
+        const search = new URLSearchParams(window.location.search);
+        search.delete('udpf_formversion');
+        search.delete('udpf_formVersion');
+        if (isLatest) {
+            search.delete('v');
+        }
+        else {
+            search.set('v', String(version));
+        }
+        const qs = search.toString();
+        const path = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+        if (this.history) {
+            this.history.push(path);
+        }
+        else {
+            window.history.replaceState({}, '', path);
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (this.loadError === 'notFound') {
+            return (h(Host, null, h("udp-primary-action-header", { title: "Form Builder" }), h("udp-flexbox", { direction: "column", align: "center", justify: "center", gap: "sm", class: "builder-empty-state" }, h("udp-text", { variant: "title3" }, "Form not found"), h("udp-text", { variant: "body1", color: "muted" }, "We couldn't find a form with this id for the current tenant. It may have been deleted, or the link may be out of date."))));
+        }
+        if (this.loadError === 'generic') {
+            return (h(Host, null, h("udp-primary-action-header", { title: "Form Builder" }), h("div", { class: "builder-error-message" }, h("udp-text", { variant: "body1" }, "There is an error with the Form Builder."))));
+        }
+        const form = this.loadedForm.form;
+        const showUnsavedBadge = this.hasUnsavedChanges;
+        return (h(Host, null, h("udp-primary-action-header", { primaryAction: this.isEditable
+                ? {
+                    label: 'Save Form',
+                    iconName: 'save',
+                    loading: this.isSaving,
+                    onClick: () => this.isPublicFormConfigOn || this.isFollowUpFormConfigOn
+                        ? this.openSaveModal()
+                        : this.handleSave(),
+                }
+                : undefined }, h("udp-text", { slot: "title", variant: "subtitle1", block: false }, h("udp-fluent-inline-edit", { class: "builder-title-input", value: (_a = form.name) !== null && _a !== void 0 ? _a : '', placeholder: "Untitled form", readonly: !this.isEditable, ariaLabel: "Form name", maxLength: 128, onValueChanged: (e) => this.updateForm({ name: e.detail }) })), h("udp-text", { slot: "subtitle", variant: "caption1" }, h("udp-fluent-inline-edit", { class: "builder-subtitle-input", value: (_b = form.description) !== null && _b !== void 0 ? _b : '', placeholder: "Add a description", readonly: !this.isEditable, ariaLabel: "Form description", maxLength: 256, onValueChanged: (e) => this.updateForm({ description: e.detail }) })), !this.isEditable && (h("div", { slot: "inline", class: "builder-header-meta" }, h("udp-fluent-badge", { appearance: "outline", color: "subtle", size: "medium" }, "View only"))), h("div", { slot: "actions", class: "builder-header-actions" }, showUnsavedBadge && (h("udp-fluent-badge", { appearance: "outline", color: "warning", size: "medium" }, "Unsaved changes")), h("udp-fluent-tablist", { class: "builder-view-tabs", appearance: "contained", size: "medium", overflowStrategy: "scroll", activeId: this.activeTab, tabList: [
+                { id: 'build', label: 'Build' },
+                { id: 'preview', label: 'Preview' },
+            ], onTabChange: (e) => this.handleTabChange(e.detail) }), this.formId && h("udp-tooltip", { content: "Form versions" }, h("udp-fluent-icon-button", { iconName: 'list', shape: "rounded", ariaLabel: 'Form versions', onClick: () => void this.openVersionDrawer() })))), h("div", { class: "builder-body" }, h("udp-sidebar-layout", { fill: true, sidebarTitle: "Form Structure", sidebarWidth: "264px" }, h("div", { slot: "sidebar" }, !this.isLoading &&
+            renderFormStructureTree({
+                loadedForm: this.loadedForm,
+                selectedId: this.getStructureSelectedId(),
+                isValid: question => validateQuestionItem(question, getType) === null,
+                onItemClick: this.handleStructureClick,
+            })), h("div", { class: {
+                'preview-pane': true,
+                'pane--hidden': this.activeTab !== 'preview',
+            } }, this.activeTab === 'preview' &&
+            renderPreviewPane({
+                loadedForm: (_c = this.previewLoadedForm) !== null && _c !== void 0 ? _c : this.loadedForm,
+                highlightedQuestionId: this.getEditingQuestionId(),
+                enqueueSnackbar: this.enqueueSnackbar,
+            })), h("div", { class: {
+                'builder-pane': true,
+                'pane--hidden': this.activeTab !== 'build',
+            } }, !this.isLoading && (h("udp-container", { "max-width": "md" }, h("udp-flexbox", { class: "builder-container", display: "flex", direction: "column", gap: "lg" }, h("udp-flexbox", { class: "sections-container", display: "flex", direction: "column", gap: "lg" }, this.sections.map((section, sIndex) => renderSectionCard({
+            section,
+            sIndex,
+            isEditable: this.isEditable,
+            getQuestionValidity: question => validateQuestionItem(question, getType) === null,
+            onEditSection: this.openSectionEditor,
+            onSectionTitleChange: this.updateSectionTitle,
+            onAddQuestion: this.openAddItemDrawer,
+            onDeleteSection: this.requestDeleteSection,
+            onEditQuestion: this.openEditDrawer,
+            onDeleteQuestionClick: (sIdx, qIdx) => {
+                this.deleteQuestionPending = { sIndex: sIdx, qIndex: qIdx };
+            },
+            onDuplicateQuestion: this.copyQuestion,
+        }))), this.isEditable && (h("button", { type: "button", class: "add-section-btn", onClick: this.addSection }, h("udp-fluent-icon", { name: "add", size: "sm" }), h("span", null, "Add New Section")))))), h("udp-vertical-spacer", { unit: "xxl" }), h("udp-vertical-spacer", { unit: "xxl" }), h("udp-vertical-spacer", { unit: "xxl" })))), h("udp-fluent-drawer", { open: this.activeSectionIndex !== null, drawerTitle: "Add Question", onDrawerClose: this.closeAddItemDrawer, drawerWidth: "780px" }, (() => {
+            const { groups, accordionItems } = getQuestionTemplatesGroupedByCategory(this.addQuestionFilter);
+            return renderAddQuestionDrawerContent({
+                filter: this.addQuestionFilter,
+                onFilterChange: value => {
+                    this.addQuestionFilter = value;
+                },
+                groups,
+                accordionItems,
+                onSelectTemplate: this.addQuestion,
+            });
+        })()), renderConfigureQuestionDrawer({
+            editingQuestion: this.editingQuestion,
+            sections: this.sections,
+            initialValues: this.editDrawerInitialValues,
+            formId: FORM_IDS.QUESTION_CONFIG,
+            validate: this.validateDrawer,
+            onFormStateUpdated: this.handleConfigFormStateUpdated,
+            isEditable: this.isEditable,
+            lookupOptions: this.lookupOptions,
+            followUpFormOptions: this.followUpFormOptions,
+            formType: form.type,
+            isFollowUpFormConfigOn: this.isFollowUpFormConfigOn,
+            isCommentingConfigOn: this.isCommentingConfigOn,
+            onClose: this.closeEditDrawer,
+            onCancel: this.cancelEditDrawer,
+        }), renderSectionEditDrawer({
+            open: this.editingSectionIndex !== null,
+            onClose: this.closeSectionEditor,
+            section: this.editingSectionIndex !== null
+                ? this.sections[this.editingSectionIndex]
+                : null,
+            onTitleChange: (value) => this.patchEditingSection({ title: value }),
+            onSectionTextChange: (value) => this.patchEditingSection({ sectionText: value }),
+            onRepeatableChange: (value) => {
+                var _a;
+                if (this.editingSectionIndex === null)
+                    return;
+                const current = this.sections[this.editingSectionIndex];
+                this.patchEditingSection({
+                    sectionProperties: Object.assign(Object.assign({}, ((_a = current.sectionProperties) !== null && _a !== void 0 ? _a : {})), { isRepeatable: value }),
+                });
+            },
+            onReferenceCodeChange: (value) => this.patchEditingSection({ referenceCode: value }),
+        }), h("udp-form-version-drawer", { open: this.isVersionDrawerOpen, versions: this.versionList,
+            // Reflect the actually-loaded version — `version` prop may be
+            // null when the URL has no `?v=` (the canonical "I'm on latest"
+            // shape), so fall back to `loadedForm.form.version`.
+            currentVersion: (_g = (_f = (_e = (_d = this.loadedForm) === null || _d === void 0 ? void 0 : _d.form) === null || _e === void 0 ? void 0 : _e.version) !== null && _f !== void 0 ? _f : this.version) !== null && _g !== void 0 ? _g : 1, onDrawerClose: this.closeVersionDrawer, onVersionSelect: this.handleVersionSelect }), h("udp-fluent-dialog", { open: this.deleteQuestionPending !== null, dialogTitle: "Delete question?", type: "modal", onDialogClose: this.closeDeleteQuestionDialog }, h("udp-text", { variant: "body1" }, "Are you sure you want to remove this question? This cannot be undone."), h("udp-fluent-button", { slot: "action", appearance: "subtle", onClick: this.closeDeleteQuestionDialog }, "Cancel"), h("udp-fluent-button", { slot: "action", appearance: "primary", onClick: this.confirmDeleteQuestion }, "Delete")), h("udp-fluent-dialog", { open: this.deleteSectionPending !== null, dialogTitle: "Delete section?", type: "modal", onDialogClose: this.closeDeleteSectionDialog }, this.deleteSectionPending !== null && this.sections[this.deleteSectionPending] != null && (h("udp-text", { variant: "body1" }, "There are ", this.sections[this.deleteSectionPending].questions.length, " question", this.sections[this.deleteSectionPending].questions.length !== 1 ? 's' : '', " in \"", this.sections[this.deleteSectionPending].title, "\". Are you sure you want to delete this section?")), this.deleteSectionPending !== null && this.sections[this.deleteSectionPending] == null && (h("udp-text", { variant: "body1" }, "Are you sure you want to delete this section?")), h("udp-fluent-button", { slot: "action", appearance: "subtle", onClick: this.closeDeleteSectionDialog }, "Cancel"), h("udp-fluent-button", { slot: "action", appearance: "primary", onClick: this.confirmDeleteSection }, "Delete")), h("udp-fluent-dialog", { open: this.isSaveModalOpen, dialogTitle: "Save form", onDialogClose: this.cancelSaveModal }, h("udp-flexbox", { display: "flex", direction: "column", gap: "md" }, h("udp-flexbox", { display: "flex", direction: "row", align: "center", gap: "sm" }, h("udp-fluent-badge", { appearance: "tint", color: "informative", size: "medium" }, "Version ", form.version)), h("udp-text", { variant: "body1" }, "Choose how this form is shared before saving."), this.isPublicFormConfigOn && (h("udp-fluent-switch", { label: "Private form (only signed-in tenant users can submit)", labelPosition: "after", checked: this.saveModalPrivate, includeErrorPadding: false, onValueChanged: (e) => (this.saveModalPrivate = e.detail) })), this.isFollowUpFormConfigOn && (h("udp-fluent-switch", { label: "Use as follow-up form template (selectable from other forms' follow-up questions)", labelPosition: "after", checked: this.saveModalIsFollowUp, includeErrorPadding: false, onValueChanged: (e) => (this.saveModalIsFollowUp = e.detail) }))), h("udp-fluent-button", { slot: "action", appearance: "subtle", onClick: this.cancelSaveModal }, "Cancel"), h("udp-fluent-button", { slot: "action", appearance: "primary", startIconName: "save", loading: this.isSaving, onClick: () => {
+                void this.confirmSaveModal();
+            } }, "Save Form"))));
+    }
+    static get is() { return "udp-question-form-builder"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-question-form-builder.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-question-form-builder.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "formId": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Guid",
+                    "resolved": "string & { readonly __brand: \"Guid\"; }",
+                    "references": {
+                        "Guid": {
+                            "location": "import",
+                            "path": "../core",
+                            "id": "src/components/forms/udp-question-form/core/index.ts::Guid",
+                            "referenceLocation": "Guid"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "version": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "version"
+            },
+            "history": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ push: (path: string) => void }",
+                    "resolved": "{ push: (path: string) => void; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional SPA router. When set, the builder calls `history.push(path)` for\nURL updates (e.g. after a save creates a new version). Without it, falls\nback to `window.history.replaceState` \u2014 works in any host."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "getUserCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => unknown",
+                    "resolved": "() => unknown",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "getTenantCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => { id?: string }",
+                    "resolved": "() => { id?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "enqueueSnackbar": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(message: string, options?: Record<string, unknown>) => void",
+                    "resolved": "(message: string, options?: Record<string, unknown>) => void",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "closeSnackbar": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(key?: unknown) => void",
+                    "resolved": "(key?: unknown) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isPublicFormConfigOn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-public-form-config-on",
+                "defaultValue": "false"
+            },
+            "isCommentingConfigOn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-commenting-config-on",
+                "defaultValue": "false"
+            },
+            "isFollowUpFormConfigOn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-follow-up-form-config-on",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loadedForm": {},
+            "undoStack": {},
+            "redoStack": {},
+            "activeSectionIndex": {},
+            "editingQuestion": {},
+            "editDrawerInitialValues": {},
+            "isSaving": {},
+            "isNewForm": {},
+            "isMostRecentFormVersion": {},
+            "loadError": {},
+            "isLoading": {},
+            "deleteQuestionPending": {},
+            "deleteSectionPending": {},
+            "addQuestionFilter": {},
+            "editingSectionIndex": {},
+            "isVersionDrawerOpen": {},
+            "versionList": {},
+            "lookupOptions": {},
+            "followUpFormOptions": {},
+            "activeTab": {},
+            "previewLoadedForm": {},
+            "isSaveModalOpen": {},
+            "saveModalPrivate": {},
+            "saveModalIsFollowUp": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formCreated",
+                "name": "formCreated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a save creates a brand-new form (POST /UdpForm/full).\n`event.detail` is `{ formId, version }`.\n\nRouting concern \u2014 the builder doesn't know the consumer's URL pattern,\nso the page wrapper / host listens for this and runs its router\ntransition (e.g. `history.replace(\\`/forms/${id}/builder\\`)`).\n\nExisting-form-new-version saves do NOT emit this; the URL doesn't\nchange after such saves (no `?v=` to bump in the \"no v = latest\" model).\n\n`@Event()` (not a `@Prop()` callback) so React's auto-generated\nwrappers attach via `addEventListener` \u2014 avoids the function-prop\nbinding flakiness Stencil consumers sometimes hit."
+                },
+                "complexType": {
+                    "original": "{ formId: Guid; version: number }",
+                    "resolved": "{ formId: Guid; version: number; }",
+                    "references": {
+                        "Guid": {
+                            "location": "import",
+                            "path": "../core",
+                            "id": "src/components/forms/udp-question-form/core/index.ts::Guid",
+                            "referenceLocation": "Guid"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getLoadedForm": {
+                "complexType": {
+                    "signature": "() => Promise<LoadedForm | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LoadedForm": {
+                            "location": "import",
+                            "path": "../core",
+                            "id": "src/components/forms/udp-question-form/core/index.ts::LoadedForm",
+                            "referenceLocation": "LoadedForm"
+                        }
+                    },
+                    "return": "Promise<LoadedForm>"
+                },
+                "docs": {
+                    "text": "Read the builder's current draft form. Exposed for embedders that need to\nsnapshot the in-progress schema without going through the Save flow \u2014 e.g.\n\"save to local storage\", \"send to another component\", or \"feed into a\ntest harness that drives the renderer with this exact shape.\"",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "loadedForm",
+                "methodName": "schedulePreviewSync"
+            }, {
+                "propName": "formId",
+                "methodName": "handleIdOrVersionChange"
+            }, {
+                "propName": "version",
+                "methodName": "handleIdOrVersionChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleHistoryKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+UdpQuestionFormBuilder.HISTORY_CAP = 50;
+/** Debounce delay before pushing `loadedForm` edits into the preview renderer. */
+UdpQuestionFormBuilder.PREVIEW_SYNC_DELAY_MS = 300;