@open-mercato/core 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/dist/modules/forms/backend/forms/[id]/FormStudio.js

@@ -0,0 +1,2811 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { gridKeyboardCoordinates } from "./studio/canvas/keyboard-coordinates.js";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { Alert } from "@open-mercato/ui/primitives/alert";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@open-mercato/ui/primitives/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
+import { LoadingMessage, ErrorMessage, RecordNotFoundState } from "@open-mercato/ui/backend/detail";
+import { apiCall, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { createLogger } from "@open-mercato/shared/lib/logger";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { FormPalettePanel } from "./studio/palette/FormPalettePanel.js";
+import { FormAppearancePanel } from "./studio/palette/FormAppearancePanel.js";
+import { PALETTE_DRAGGABLE_PREFIX } from "./studio/palette/PaletteCard.js";
+import { buildPaletteEntries, resolvePaletteId } from "./studio/palette/entries.js";
+import { ArrowDown, ArrowUp, Globe, Plus, resolveLucideIcon, Trash2, Undo2, Redo2 } from "./studio/lucide-icons.js";
+import { resolveTypeLabel } from "./studio/type-label.js";
+import { DragOverlayCard } from "./studio/canvas/DragOverlayCard.js";
+import { FormCanvas } from "./studio/canvas/FormCanvas.js";
+import { FIELD_DRAGGABLE_PREFIX } from "./studio/canvas/FieldRow.js";
+import { SECTION_DROP_PREFIX, parseSectionDropId } from "./studio/canvas/GridSlot.js";
+import { gridAwareCollision } from "./studio/canvas/grid-collision.js";
+import { computeOverlayWidthPx } from "./studio/canvas/overlay-size.js";
+import { computeRowLayout, dropHintToLinearIndex, readSpan } from "./studio/canvas/row-layout.js";
+import { SECTION_DRAGGABLE_PREFIX } from "./studio/canvas/SectionContainer.js";
+import {
+  addFieldFromPalette,
+  addLayoutFromPalette,
+  addRoleToSchema,
+  adoptUngroupedAsSection,
+  deleteField,
+  disableGuestSubmissions,
+  enableGuestSubmissions,
+  isGuestSubmissionEnabled,
+  removeRoleFromSchema,
+  renameRoleInSchema,
+  deleteSection,
+  findSectionOwning,
+  indexOfFieldInSection,
+  isCompatibleFieldSwap,
+  moveField,
+  moveSection,
+  setFieldAlign,
+  setFieldGridSpan,
+  setFieldHideMobile,
+  setFieldStyle,
+  setFieldVisibilityIf,
+  setHiddenFields,
+  setJumps,
+  setRedirectUrl,
+  setSectionVisibilityIf,
+  setVariables,
+  setFormLabelPosition,
+  setFormStyle,
+  setFormTheme,
+  setPageMode,
+  setSectionColumns,
+  setSectionDivider,
+  setSectionGap,
+  setSectionHideTitle,
+  setSectionKind,
+  setSectionStyle,
+  setSectionTitle,
+  setShowProgress,
+  swapFieldType,
+  SWAP_FAMILIES,
+  validateSchemaExtensions,
+  groupNodeAddSubField,
+  groupNodeRemoveSubField,
+  groupNodeUpdateSubField
+} from "./studio/schema-helpers.js";
+import { defaultFieldTypeRegistry } from "../../../schema/field-type-registry.js";
+import { createAutosaveGuard } from "./studio/autosave-guard.js";
+import { ValidationPanel } from "./studio/validation/ValidationPanel.js";
+import {
+  partitionPages,
+  resolveFormLabelPosition,
+  resolveFormStyle,
+  resolveFormTheme,
+  resolvePageMode,
+  resolveSectionViews,
+  resolveShowProgress
+} from "../../../services/form-version-compiler.js";
+import { ColorControl } from "./studio/style/ColorControl.js";
+import { BackgroundControl } from "./studio/style/BackgroundControl.js";
+import { YesNoRow } from "./studio/YesNoRow.js";
+import { createUndoController } from "./studio/undo-controller.js";
+import { PreviewSurface } from "./studio/preview/PreviewSurface.js";
+import { ConditionBuilder, buildFieldSourceOptions } from "./studio/logic/ConditionBuilder.js";
+import { JumpsEditor } from "./studio/logic/JumpsEditor.js";
+import { ViewportFrame } from "./studio/preview/ViewportFrame.js";
+const logger = createLogger("forms").child({ component: "FormStudio" });
+const DEFAULT_SECTION_KEY = "default_section";
+const ROLE_IDENTIFIER_PATTERN = /^[a-z][a-z0-9_-]*$/;
+function isValidRoleIdentifier(value) {
+  return value.length >= 2 && value.length <= 64 && ROLE_IDENTIFIER_PATTERN.test(value);
+}
+const DEFAULT_SCHEMA = {
+  type: "object",
+  "x-om-roles": ["admin"],
+  "x-om-default-actor-role": "admin",
+  "x-om-sections": [
+    { key: DEFAULT_SECTION_KEY, kind: "section", title: { en: "" }, fieldKeys: [] }
+  ],
+  properties: {},
+  required: []
+};
+function ensureDefaultSection(schema) {
+  const sections = schema["x-om-sections"] ?? [];
+  if (sections.length > 0) return schema;
+  const next = {
+    ...schema,
+    "x-om-sections": [
+      { key: DEFAULT_SECTION_KEY, kind: "section", title: { en: "" }, fieldKeys: [] }
+    ]
+  };
+  return next;
+}
+function describeFieldForAnnouncement(schema, fieldKey) {
+  const node = schema.properties[fieldKey];
+  if (!node) return fieldKey;
+  return node["x-om-label"]?.en ?? fieldKey;
+}
+function describeSectionForAnnouncement(schema, sectionKey) {
+  const section = (schema["x-om-sections"] ?? []).find((entry) => entry.key === sectionKey);
+  if (!section) return sectionKey;
+  return section.title?.en?.length ? section.title.en : sectionKey;
+}
+function buildAnnouncements(t, schemaRef) {
+  const labelOf = (rawId) => {
+    if (rawId.startsWith(FIELD_DRAGGABLE_PREFIX)) {
+      const fieldKey = rawId.slice(FIELD_DRAGGABLE_PREFIX.length);
+      return describeFieldForAnnouncement(schemaRef.current, fieldKey);
+    }
+    if (rawId.startsWith(PALETTE_DRAGGABLE_PREFIX)) {
+      return rawId.slice(PALETTE_DRAGGABLE_PREFIX.length);
+    }
+    return rawId;
+  };
+  const describeGridTarget = (rawId) => {
+    if (!rawId.startsWith(SECTION_DROP_PREFIX)) return null;
+    const parsed = parseSectionDropId(rawId);
+    if (!parsed || parsed.kind === "legacy") return null;
+    const sectionName = describeSectionForAnnouncement(schemaRef.current, parsed.sectionKey);
+    if (parsed.kind === "cell") {
+      return t("forms.studio.dnd.announce.movedToCell", {
+        item: "",
+        section: sectionName,
+        row: String(parsed.rowIndex + 1),
+        column: String(parsed.columnIndex + 1)
+      });
+    }
+    if (parsed.kind === "col-gap") {
+      return t("forms.studio.dnd.announce.movedToCell", {
+        item: "",
+        section: sectionName,
+        row: String(parsed.rowIndex + 1),
+        column: String(parsed.columnIndex + 1)
+      });
+    }
+    return t("forms.studio.dnd.announce.movedToRowGap", {
+      item: "",
+      section: sectionName,
+      previous: String(parsed.rowIndex),
+      next: String(parsed.rowIndex + 1)
+    });
+  };
+  const targetOf = (rawId) => {
+    if (!rawId) return "";
+    if (rawId.startsWith(SECTION_DROP_PREFIX)) {
+      const grid = describeGridTarget(rawId);
+      if (grid) return grid;
+      const sectionKey = rawId.slice(SECTION_DROP_PREFIX.length);
+      return describeSectionForAnnouncement(schemaRef.current, sectionKey);
+    }
+    if (rawId.startsWith(FIELD_DRAGGABLE_PREFIX)) {
+      const fieldKey = rawId.slice(FIELD_DRAGGABLE_PREFIX.length);
+      return describeFieldForAnnouncement(schemaRef.current, fieldKey);
+    }
+    return String(rawId);
+  };
+  return {
+    onDragStart({ active }) {
+      return t("forms.studio.dnd.announce.pickedUp", { item: labelOf(String(active.id)) });
+    },
+    onDragOver({ active, over }) {
+      return t("forms.studio.dnd.announce.movedOver", {
+        item: labelOf(String(active.id)),
+        target: targetOf(over ? String(over.id) : null)
+      });
+    },
+    onDragEnd({ active, over }) {
+      return t("forms.studio.dnd.announce.droppedAt", {
+        item: labelOf(String(active.id)),
+        target: targetOf(over ? String(over.id) : null)
+      });
+    },
+    onDragCancel({ active }) {
+      return t("forms.studio.dnd.announce.cancelled", { item: labelOf(String(active.id)) });
+    }
+  };
+}
+function stableJsonStringify(value) {
+  return JSON.stringify(value, null, 2);
+}
+function deepClone(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function autosaveDebounce(fn, ms) {
+  let timer = null;
+  return (...args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+function FormStudio({ formId }) {
+  const t = useT();
+  const { runMutation } = useGuardedMutation({ contextId: "forms.form.studio" });
+  const router = useRouter();
+  const [form, setForm] = React.useState(null);
+  const [draftVersionId, setDraftVersionId] = React.useState(null);
+  const [version, setVersion] = React.useState(null);
+  const [schema, setSchema] = React.useState(DEFAULT_SCHEMA);
+  const [selection, setSelection] = React.useState(null);
+  const [previewRole, setPreviewRole] = React.useState("admin");
+  const [autosaveState, setAutosaveState] = React.useState("idle");
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [loadError, setLoadError] = React.useState(null);
+  const [showPublishDialog, setShowPublishDialog] = React.useState(false);
+  const [topTab, setTopTab] = React.useState("builder");
+  const [activeDragId, setActiveDragId] = React.useState(null);
+  const [activeDropTarget, setActiveDropTarget] = React.useState(null);
+  const [fieldResizeState, setFieldResizeState] = React.useState(null);
+  const [resizeAnnouncement, setResizeAnnouncement] = React.useState("");
+  const [focusSectionTitleKey, setFocusSectionTitleKey] = React.useState(null);
+  const [activeLocale, setActiveLocale] = React.useState("en");
+  const [previewViewport, setPreviewViewport] = React.useState("desktop");
+  const [previewStyleTarget, setPreviewStyleTarget] = React.useState("form");
+  const dirtyFlagRef = React.useRef(false);
+  const schemaRef = React.useRef(DEFAULT_SCHEMA);
+  const selectionRef = React.useRef(null);
+  const formUpdatedAtRef = React.useRef(null);
+  const versionUpdatedAtRef = React.useRef(null);
+  const gridRefs = React.useRef(/* @__PURE__ */ new Map());
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const selectedFieldKey = selection?.kind === "field" ? selection.key : null;
+  const undoController = React.useMemo(() => createUndoController({ capacity: 50 }), []);
+  const [undoNonce, setUndoNonce] = React.useState(0);
+  React.useEffect(() => {
+    schemaRef.current = schema;
+  }, [schema]);
+  React.useEffect(() => {
+    selectionRef.current = selection;
+  }, [selection]);
+  React.useEffect(() => {
+    formUpdatedAtRef.current = form?.updatedAt ?? null;
+  }, [form?.updatedAt]);
+  React.useEffect(() => {
+    versionUpdatedAtRef.current = version?.updatedAt ?? null;
+  }, [version?.updatedAt]);
+  const reload = React.useCallback(async () => {
+    setIsLoading(true);
+    setLoadError(null);
+    const formCall = await apiCall(`/api/forms/${encodeURIComponent(formId)}`);
+    if (!formCall.ok || !formCall.result) {
+      setLoadError(formCall.status === 404 ? "forms.errors.form_not_found" : "forms.errors.internal");
+      setIsLoading(false);
+      return;
+    }
+    const detail = formCall.result;
+    setForm(detail);
+    setActiveLocale(
+      (current) => detail.supportedLocales.includes(current) ? current : detail.defaultLocale
+    );
+    let draft = detail.versions.find((entry) => entry.status === "draft") ?? null;
+    if (!draft) {
+      const forkCall = await runMutation({
+        operation: () => apiCall(
+          `/api/forms/${encodeURIComponent(formId)}/versions/fork`,
+          { method: "POST", body: JSON.stringify({}) }
+        ),
+        context: { formId },
+        mutationPayload: { formId }
+      });
+      if (forkCall.ok && forkCall.result?.versionId) {
+        const refresh = await apiCall(`/api/forms/${encodeURIComponent(formId)}`);
+        if (refresh.ok && refresh.result) {
+          setForm(refresh.result);
+          draft = refresh.result.versions.find((entry) => entry.id === forkCall.result?.versionId) ?? null;
+        }
+      }
+    }
+    if (draft) {
+      setDraftVersionId(draft.id);
+      const versionCall = await apiCall(
+        `/api/forms/${encodeURIComponent(formId)}/versions/${encodeURIComponent(draft.id)}`
+      );
+      if (versionCall.ok && versionCall.result) {
+        setVersion(versionCall.result);
+        const loaded = versionCall.result.schema;
+        setSchema(ensureDefaultSection(loaded && loaded.properties ? loaded : DEFAULT_SCHEMA));
+        dirtyFlagRef.current = false;
+        undoController.clear();
+      }
+    } else {
+      setVersion(null);
+      setSchema(DEFAULT_SCHEMA);
+      dirtyFlagRef.current = false;
+      undoController.clear();
+    }
+    setIsLoading(false);
+  }, [formId, runMutation, undoController]);
+  React.useEffect(() => {
+    void reload();
+  }, [reload]);
+  const persistDraftRaw = React.useCallback(async (next) => {
+    if (!draftVersionId) return;
+    setAutosaveState("saving");
+    const call = await runMutation({
+      operation: () => withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(versionUpdatedAtRef.current),
+        () => apiCall(
+          `/api/forms/${encodeURIComponent(formId)}/versions/${encodeURIComponent(draftVersionId)}`,
+          {
+            method: "PATCH",
+            body: JSON.stringify({ schema: next })
+          }
+        )
+      ),
+      context: { formId, versionId: draftVersionId },
+      mutationPayload: { formId, versionId: draftVersionId }
+    });
+    if (!call.ok) {
+      setAutosaveState("error");
+      if (surfaceRecordConflict({ status: call.status, body: call.result }, t)) return;
+      const errPayload = call.result;
+      flash(t(errPayload?.error ?? "forms.studio.autosave.error"), "error");
+      return;
+    }
+    const updatedAt = call.result?.updatedAt;
+    if (updatedAt) {
+      versionUpdatedAtRef.current = updatedAt;
+      setVersion((current) => current ? { ...current, updatedAt } : current);
+    }
+    setAutosaveState("idle");
+    dirtyFlagRef.current = false;
+    const refreshed = await apiCall(
+      `/api/forms/${encodeURIComponent(formId)}/versions/${encodeURIComponent(draftVersionId)}`
+    );
+    if (refreshed.ok && refreshed.result) setVersion(refreshed.result);
+  }, [draftVersionId, formId, runMutation, t]);
+  const autosaveGuard = React.useMemo(
+    () => createAutosaveGuard({
+      patch: persistDraftRaw,
+      onInvalid: () => {
+        setAutosaveState("error");
+        flash(t("forms.studio.autosave.invalidSchema"), "error");
+      }
+    }),
+    [persistDraftRaw, t]
+  );
+  const persistDraft = React.useMemo(
+    () => autosaveDebounce((next) => {
+      void autosaveGuard.run(next);
+    }, 2e3),
+    [autosaveGuard]
+  );
+  const updateSchema = React.useCallback((updater) => {
+    setSchema((current) => {
+      const next = updater(current);
+      dirtyFlagRef.current = true;
+      persistDraft(next);
+      return next;
+    });
+  }, [persistDraft]);
+  const updateSchemaStructural = React.useCallback(
+    (updater) => {
+      undoController.push({
+        schema: schemaRef.current,
+        selection: selectionRef.current
+      });
+      setSchema((current) => {
+        const next = updater(current);
+        dirtyFlagRef.current = true;
+        persistDraft(next);
+        return next;
+      });
+    },
+    [persistDraft, undoController]
+  );
+  const selectField = React.useCallback((fieldKey) => {
+    setSelection({ kind: "field", key: fieldKey });
+  }, []);
+  const selectSection = React.useCallback((sectionKey) => {
+    setSelection({ kind: "section", key: sectionKey });
+  }, []);
+  const clearSelection = React.useCallback(() => {
+    setSelection(null);
+  }, []);
+  const handleDeleteField = React.useCallback((fieldKey) => {
+    updateSchemaStructural((current) => {
+      return deleteField({ schema: current, fieldKey });
+    });
+    clearSelection();
+    flash(t("forms.studio.fields.deletedFlash"), "info");
+  }, [updateSchemaStructural, clearSelection, t]);
+  const handleDeleteSection = React.useCallback(async (sectionKey) => {
+    const sections = schemaRef.current["x-om-sections"] ?? [];
+    const target = sections.find((entry) => entry.key === sectionKey);
+    if (!target) return;
+    const fieldCount = target.fieldKeys.length;
+    if (fieldCount > 0) {
+      const ok = await confirm({
+        title: t("forms.studio.canvas.section.delete.confirm.title"),
+        text: t("forms.studio.canvas.section.delete.confirm.body", {
+          name: target.title?.en?.length ? target.title.en : t("forms.studio.canvas.section.title.placeholder"),
+          count: String(fieldCount)
+        }),
+        confirmText: t("forms.studio.canvas.section.delete.confirm.submit"),
+        variant: "destructive"
+      });
+      if (!ok) return;
+    }
+    updateSchemaStructural((current) => deleteSection({ schema: current, sectionKey }));
+    clearSelection();
+  }, [confirm, t, updateSchemaStructural, clearSelection]);
+  const handleSectionTitleCommit = React.useCallback((sectionKey, title) => {
+    updateSchema(
+      (current) => setSectionTitle({ schema: current, sectionKey, locale: activeLocale, title })
+    );
+  }, [updateSchema, activeLocale]);
+  const handleSectionColumnsChange = React.useCallback(
+    (sectionKey, columns) => {
+      updateSchemaStructural((current) => setSectionColumns({ schema: current, sectionKey, columns }));
+    },
+    [updateSchemaStructural]
+  );
+  const handleSectionGapChange = React.useCallback(
+    (sectionKey, gap) => {
+      updateSchemaStructural((current) => setSectionGap({ schema: current, sectionKey, gap }));
+    },
+    [updateSchemaStructural]
+  );
+  const handleSectionDividerChange = React.useCallback(
+    (sectionKey, divider) => {
+      updateSchemaStructural((current) => setSectionDivider({ schema: current, sectionKey, divider }));
+    },
+    [updateSchemaStructural]
+  );
+  const handleSectionKindChange = React.useCallback(
+    (sectionKey, kind) => {
+      updateSchemaStructural((current) => setSectionKind({ schema: current, sectionKey, kind }));
+    },
+    [updateSchemaStructural]
+  );
+  const handleSectionHideTitleChange = React.useCallback(
+    (sectionKey, hideTitle) => {
+      updateSchemaStructural((current) => setSectionHideTitle({ schema: current, sectionKey, hideTitle }));
+    },
+    [updateSchemaStructural]
+  );
+  const handleSectionStyleChange = React.useCallback(
+    (sectionKey, style) => {
+      updateSchema((current) => setSectionStyle(current, sectionKey, style));
+    },
+    [updateSchema]
+  );
+  const handleAdoptUngrouped = React.useCallback(() => {
+    let newSectionKey = null;
+    updateSchemaStructural((current) => {
+      const result = adoptUngroupedAsSection({ schema: current });
+      newSectionKey = result.sectionKey;
+      return result.schema;
+    });
+    if (newSectionKey) {
+      const created = newSectionKey;
+      setSelection({ kind: "section", key: created });
+      setFocusSectionTitleKey(created);
+      flash(
+        t("forms.studio.canvas.ungrouped.adopt.toast", {
+          name: t("forms.studio.canvas.section.title.placeholder")
+        }),
+        "success"
+      );
+    }
+  }, [updateSchemaStructural, t]);
+  const handleFieldGridSpan = React.useCallback(
+    (fieldKey, span) => {
+      updateSchemaStructural((current) => setFieldGridSpan({ schema: current, fieldKey, span }));
+    },
+    [updateSchemaStructural]
+  );
+  const handleFieldResizeStart = React.useCallback(
+    (input) => {
+      setFieldResizeState({
+        fieldKey: input.fieldKey,
+        sectionKey: input.sectionKey,
+        startSpan: input.startSpan,
+        previewSpan: input.startSpan
+      });
+      setResizeAnnouncement(
+        t("forms.studio.canvas.field.resizeStart", {
+          item: describeFieldForAnnouncement(schemaRef.current, input.fieldKey)
+        })
+      );
+    },
+    [t]
+  );
+  const handleFieldResizePreview = React.useCallback(
+    (input) => {
+      setFieldResizeState((current) => {
+        if (!current || current.fieldKey !== input.fieldKey) return current;
+        if (current.previewSpan === input.previewSpan) return current;
+        return { ...current, previewSpan: input.previewSpan };
+      });
+    },
+    []
+  );
+  const handleFieldResizeCommit = React.useCallback(
+    (input) => {
+      setFieldResizeState((current) => {
+        if (current && current.fieldKey === input.fieldKey) {
+          if (input.finalSpan !== current.startSpan) {
+            handleFieldGridSpan(input.fieldKey, input.finalSpan);
+          }
+        }
+        return null;
+      });
+      setResizeAnnouncement(
+        t("forms.studio.canvas.field.resizeCommit", {
+          item: describeFieldForAnnouncement(schemaRef.current, input.fieldKey),
+          span: String(input.finalSpan)
+        })
+      );
+    },
+    [handleFieldGridSpan, t]
+  );
+  const handleFieldAlign = React.useCallback(
+    (fieldKey, align) => {
+      updateSchema((current) => setFieldAlign({ schema: current, fieldKey, align }));
+    },
+    [updateSchema]
+  );
+  const handleFieldHideMobile = React.useCallback(
+    (fieldKey, value) => {
+      updateSchema((current) => setFieldHideMobile({ schema: current, fieldKey, value }));
+    },
+    [updateSchema]
+  );
+  const handleFieldStyleChange = React.useCallback(
+    (fieldKey, style) => {
+      updateSchema((current) => setFieldStyle(current, fieldKey, style));
+    },
+    [updateSchema]
+  );
+  const handleFieldVisibilityChange = React.useCallback(
+    (fieldKey, predicate) => {
+      updateSchema((current) => setFieldVisibilityIf({ schema: current, fieldKey, predicate }));
+    },
+    [updateSchema]
+  );
+  const handleSectionVisibilityChange = React.useCallback(
+    (sectionKey, predicate) => {
+      updateSchema((current) => setSectionVisibilityIf({ schema: current, sectionKey, predicate }));
+    },
+    [updateSchema]
+  );
+  const handleHiddenFieldsChange = React.useCallback(
+    (entries) => {
+      updateSchema((current) => setHiddenFields({ schema: current, entries }));
+    },
+    [updateSchema]
+  );
+  const handleVariablesChange = React.useCallback(
+    (entries) => {
+      updateSchema((current) => setVariables({ schema: current, entries }));
+    },
+    [updateSchema]
+  );
+  const handleRedirectUrlChange = React.useCallback(
+    (sectionKey, url) => {
+      updateSchema((current) => setRedirectUrl({ schema: current, sectionKey, url }));
+    },
+    [updateSchema]
+  );
+  const handleJumpsChange = React.useCallback(
+    (rules) => {
+      updateSchema((current) => setJumps({ schema: current, rules }));
+    },
+    [updateSchema]
+  );
+  const handleFieldTypeSwap = React.useCallback(
+    (fieldKey, targetType) => {
+      try {
+        updateSchemaStructural(
+          (current) => swapFieldType({ schema: current, fieldKey, targetType })
+        );
+      } catch (error) {
+        flash(t("forms.studio.autosave.invalidSchema"), "error");
+        logger.warn("field-type swap failed", { err: error });
+      }
+    },
+    [t, updateSchemaStructural]
+  );
+  const handleDensityChange = React.useCallback(
+    (next) => {
+      updateSchema((current) => setFormStyle({ schema: current, style: next }));
+    },
+    [updateSchema]
+  );
+  const handleLabelPositionChange = React.useCallback(
+    (next) => {
+      updateSchema((current) => setFormLabelPosition({ schema: current, position: next }));
+    },
+    [updateSchema]
+  );
+  const handlePageModeChange = React.useCallback(
+    (next) => {
+      updateSchema((current) => setPageMode({ schema: current, mode: next }));
+    },
+    [updateSchema]
+  );
+  const handleShowProgressChange = React.useCallback(
+    (next) => {
+      updateSchema((current) => setShowProgress({ schema: current, value: next }));
+    },
+    [updateSchema]
+  );
+  const handleThemeChange = React.useCallback(
+    (next) => {
+      updateSchema((current) => setFormTheme(current, next));
+    },
+    [updateSchema]
+  );
+  const handleUndo = React.useCallback(() => {
+    const previous = undoController.undo({
+      schema: schemaRef.current,
+      selection: selectionRef.current
+    });
+    if (!previous) return;
+    setSchema(previous.schema);
+    setSelection(previous.selection ?? null);
+    dirtyFlagRef.current = true;
+    persistDraft(previous.schema);
+    setUndoNonce((current) => current + 1);
+    flash(t("forms.studio.undo.toast.undone"), "success");
+  }, [persistDraft, t, undoController]);
+  const handleRedo = React.useCallback(() => {
+    const next = undoController.redo({
+      schema: schemaRef.current,
+      selection: selectionRef.current
+    });
+    if (!next) return;
+    setSchema(next.schema);
+    setSelection(next.selection ?? null);
+    dirtyFlagRef.current = true;
+    persistDraft(next.schema);
+    setUndoNonce((current) => current + 1);
+    flash(t("forms.studio.undo.toast.redone"), "success");
+  }, [persistDraft, t, undoController]);
+  React.useEffect(() => {
+    function handleKeyDown(event) {
+      if (!(event.metaKey || event.ctrlKey)) return;
+      const target = event.target;
+      if (target) {
+        const tagName = target.tagName?.toLowerCase();
+        if (tagName === "input" || tagName === "textarea" || target.isContentEditable) return;
+      }
+      const isRedoCombo = event.key === "z" && event.shiftKey || event.key === "y";
+      const isUndoCombo = event.key === "z" && !event.shiftKey;
+      if (isRedoCombo) {
+        event.preventDefault();
+        handleRedo();
+      } else if (isUndoCombo) {
+        event.preventDefault();
+        handleUndo();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleUndo, handleRedo]);
+  const handleFieldUpdate = React.useCallback((fieldKey, updater) => {
+    updateSchema((current) => {
+      const next = deepClone(current);
+      const node = next.properties[fieldKey];
+      if (!node) return current;
+      next.properties[fieldKey] = updater(node);
+      return next;
+    });
+  }, [updateSchema]);
+  const handleRequiredToggle = React.useCallback((fieldKey, required) => {
+    updateSchema((current) => {
+      const next = deepClone(current);
+      const requiredList = new Set(next.required ?? []);
+      if (required) requiredList.add(fieldKey);
+      else requiredList.delete(fieldKey);
+      next.required = Array.from(requiredList);
+      return next;
+    });
+  }, [updateSchema]);
+  const handleDefaultActorRoleChange = React.useCallback((nextRole) => {
+    updateSchema((current) => {
+      const next = deepClone(current);
+      next["x-om-default-actor-role"] = nextRole;
+      const declared = new Set(next["x-om-roles"] ?? []);
+      declared.add(nextRole);
+      declared.add("admin");
+      next["x-om-roles"] = Array.from(declared);
+      return next;
+    });
+  }, [updateSchema]);
+  const handleAddRole = React.useCallback((role) => {
+    if (!isValidRoleIdentifier(role) || role === "admin") return;
+    updateSchema((current) => addRoleToSchema(current, role));
+  }, [updateSchema]);
+  const handleRenameRole = React.useCallback((oldRole, newRole) => {
+    if (oldRole === "admin" || newRole === "admin") return;
+    if (!isValidRoleIdentifier(newRole)) return;
+    updateSchema((current) => renameRoleInSchema(current, oldRole, newRole));
+  }, [updateSchema]);
+  const handleRemoveRole = React.useCallback((role) => {
+    if (role === "admin") return;
+    updateSchema((current) => removeRoleFromSchema(current, role));
+  }, [updateSchema]);
+  const handleToggleGuest = React.useCallback((enabled) => {
+    updateSchema(
+      (current) => enabled ? enableGuestSubmissions(current) : disableGuestSubmissions(current)
+    );
+  }, [updateSchema]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: gridKeyboardCoordinates })
+  );
+  const announcements = React.useMemo(() => buildAnnouncements(t, schemaRef), [t]);
+  const paletteEntries = React.useMemo(() => buildPaletteEntries(), []);
+  const paletteEntryById = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of [...paletteEntries.input, ...paletteEntries.survey, ...paletteEntries.layout]) {
+      map.set(entry.id, { displayNameKey: entry.displayNameKey, iconName: entry.iconName });
+    }
+    return map;
+  }, [paletteEntries]);
+  const handleDragStart = React.useCallback((event) => {
+    setActiveDragId(String(event.active.id));
+    setActiveDropTarget(null);
+  }, []);
+  const resolveDropPosition = React.useCallback((event) => {
+    const activeTop = event.active.rect.current.translated?.top ?? event.active.rect.current.initial?.top ?? null;
+    const activeHeight = event.active.rect.current.translated?.height ?? event.active.rect.current.initial?.height ?? 0;
+    const overTop = event.over?.rect.top ?? null;
+    const overHeight = event.over?.rect.height ?? 0;
+    if (activeTop === null || overTop === null) return "before";
+    return activeTop + activeHeight / 2 > overTop + overHeight / 2 ? "after" : "before";
+  }, []);
+  const handleDragOver = React.useCallback((event) => {
+    const overId = event.over ? String(event.over.id) : null;
+    if (!overId) {
+      setActiveDropTarget(null);
+      return;
+    }
+    if (overId.startsWith(FIELD_DRAGGABLE_PREFIX) || overId.startsWith(SECTION_DRAGGABLE_PREFIX)) {
+      setActiveDropTarget({ kind: "sortable", id: overId, position: resolveDropPosition(event) });
+      return;
+    }
+    if (overId.startsWith(SECTION_DROP_PREFIX)) {
+      const parsed = parseSectionDropId(overId);
+      if (!parsed || parsed.kind === "legacy") {
+        setActiveDropTarget(null);
+        return;
+      }
+      if (parsed.kind === "cell") {
+        setActiveDropTarget({
+          kind: "cell",
+          sectionKey: parsed.sectionKey,
+          rowIndex: parsed.rowIndex,
+          columnIndex: parsed.columnIndex,
+          dropId: overId
+        });
+        return;
+      }
+      if (parsed.kind === "col-gap") {
+        setActiveDropTarget({
+          kind: "col-gap",
+          sectionKey: parsed.sectionKey,
+          rowIndex: parsed.rowIndex,
+          columnIndex: parsed.columnIndex,
+          dropId: overId
+        });
+        return;
+      }
+      setActiveDropTarget({
+        kind: "row-gap",
+        sectionKey: parsed.sectionKey,
+        rowIndex: parsed.rowIndex,
+        dropId: overId
+      });
+      return;
+    }
+    setActiveDropTarget(null);
+  }, [resolveDropPosition]);
+  const handleDragEnd = React.useCallback((event) => {
+    setActiveDragId(null);
+    setActiveDropTarget(null);
+    const { active, over } = event;
+    if (!over) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const handleDrop = (next) => {
+      try {
+        validateSchemaExtensions(next.schema);
+      } catch (error) {
+        flash(t("forms.studio.autosave.invalidSchema"), "error");
+        logger.warn("drop validation failed", { err: error });
+        return;
+      }
+      undoController.push({
+        schema: schemaRef.current,
+        selection: selectionRef.current
+      });
+      setSchema(next.schema);
+      dirtyFlagRef.current = true;
+      persistDraft(next.schema);
+      if (next.selection !== void 0) setSelection(next.selection);
+    };
+    const resolveTargetSection = () => {
+      if (overId.startsWith(SECTION_DROP_PREFIX)) {
+        const parsed = parseSectionDropId(overId);
+        if (!parsed) {
+          return { sectionKey: overId.slice(SECTION_DROP_PREFIX.length) };
+        }
+        if (parsed.kind === "legacy") {
+          return { sectionKey: parsed.sectionKey };
+        }
+        const sections = schemaRef.current["x-om-sections"] ?? [];
+        const section = sections.find((entry) => entry.key === parsed.sectionKey);
+        if (!section) return { sectionKey: parsed.sectionKey };
+        const view = resolveSectionViews(schemaRef.current).find(
+          (entry) => entry.key === parsed.sectionKey
+        );
+        const columns = view?.columns ?? 1;
+        const fieldKeys = section.fieldKeys.filter((key) => schemaRef.current.properties[key]);
+        if (fieldKeys.length === 0) {
+          return { sectionKey: parsed.sectionKey, index: 0 };
+        }
+        const spans = {};
+        for (const key of fieldKeys) {
+          spans[key] = readSpan(schemaRef.current.properties[key]?.["x-om-grid-span"]);
+        }
+        const layout = computeRowLayout({ fieldKeys, spans, columns });
+        if (parsed.kind === "cell" || parsed.kind === "col-gap") {
+          const index2 = dropHintToLinearIndex({
+            layout,
+            rowIndex: parsed.rowIndex,
+            columnIndex: parsed.columnIndex
+          });
+          return { sectionKey: parsed.sectionKey, index: index2 };
+        }
+        let index = 0;
+        for (let r = 0; r < parsed.rowIndex && r < layout.rows.length; r += 1) {
+          index += layout.rows[r].cells.filter((cell) => cell.kind === "field").length;
+        }
+        return { sectionKey: parsed.sectionKey, index };
+      }
+      if (overId.startsWith(FIELD_DRAGGABLE_PREFIX)) {
+        const overFieldKey = overId.slice(FIELD_DRAGGABLE_PREFIX.length);
+        const owning = findSectionOwning(schemaRef.current, overFieldKey);
+        if (!owning) return null;
+        const overIndex = indexOfFieldInSection(schemaRef.current, owning.key, overFieldKey);
+        if (overIndex < 0) return { sectionKey: owning.key };
+        const position = resolveDropPosition(event);
+        return { sectionKey: owning.key, index: overIndex + (position === "after" ? 1 : 0) };
+      }
+      return null;
+    };
+    if (activeId.startsWith(PALETTE_DRAGGABLE_PREFIX)) {
+      const rawId = activeId.slice(PALETTE_DRAGGABLE_PREFIX.length);
+      const resolved = resolvePaletteId(rawId);
+      if (resolved.kind === "input" || resolved.kind === "layout-field") {
+        const target = resolveTargetSection();
+        if (!target) return;
+        const targetSection = (schemaRef.current["x-om-sections"] ?? []).find(
+          (entry) => entry.key === target.sectionKey
+        );
+        if (targetSection?.kind === "ending" && resolved.typeKey !== "info_block") {
+          flash(t("forms.studio.canvas.ending.dropRejected"), "error");
+          return;
+        }
+        try {
+          const result = addFieldFromPalette({
+            schema: schemaRef.current,
+            typeKey: resolved.typeKey,
+            target
+          });
+          handleDrop({
+            schema: result.schema,
+            selection: { kind: "field", key: result.fieldKey }
+          });
+        } catch (error) {
+          flash(t("forms.studio.autosave.invalidSchema"), "error");
+          logger.warn("palette drop failed", { err: error });
+        }
+        return;
+      }
+      if (resolved.kind === "layout-primitive") {
+        let insertionIndex;
+        const sections = schemaRef.current["x-om-sections"] ?? [];
+        if (overId.startsWith(SECTION_DRAGGABLE_PREFIX)) {
+          const overSectionKey = overId.slice(SECTION_DRAGGABLE_PREFIX.length);
+          const candidate = sections.findIndex((entry) => entry.key === overSectionKey);
+          if (candidate >= 0) {
+            insertionIndex = candidate + (resolveDropPosition(event) === "after" ? 1 : 0);
+          }
+        }
+        try {
+          const result = addLayoutFromPalette({
+            schema: schemaRef.current,
+            kind: resolved.layoutKind,
+            target: { index: insertionIndex }
+          });
+          handleDrop({
+            schema: result.schema,
+            selection: { kind: "section", key: result.sectionKey }
+          });
+          setFocusSectionTitleKey(result.sectionKey);
+        } catch (error) {
+          flash(t("forms.studio.autosave.invalidSchema"), "error");
+          logger.warn("layout drop failed", { err: error });
+        }
+        return;
+      }
+      return;
+    }
+    if (activeId.startsWith(SECTION_DRAGGABLE_PREFIX)) {
+      const sectionKey = activeId.slice(SECTION_DRAGGABLE_PREFIX.length);
+      let beforeKey = null;
+      if (overId.startsWith(SECTION_DRAGGABLE_PREFIX)) {
+        const overKey = overId.slice(SECTION_DRAGGABLE_PREFIX.length);
+        if (overKey !== sectionKey) {
+          if (resolveDropPosition(event) === "after") {
+            const sections = schemaRef.current["x-om-sections"] ?? [];
+            const overIndex = sections.findIndex((entry) => entry.key === overKey);
+            beforeKey = sections[overIndex + 1]?.key ?? null;
+          } else {
+            beforeKey = overKey;
+          }
+        }
+      }
+      try {
+        const nextSchema = moveSection({ schema: schemaRef.current, sectionKey, beforeKey });
+        handleDrop({ schema: nextSchema });
+      } catch (error) {
+        flash(t("forms.studio.autosave.invalidSchema"), "error");
+        logger.warn("section reorder failed", { err: error });
+      }
+      return;
+    }
+    if (activeId.startsWith(FIELD_DRAGGABLE_PREFIX)) {
+      const fieldKey = activeId.slice(FIELD_DRAGGABLE_PREFIX.length);
+      const target = resolveTargetSection();
+      if (!target) return;
+      const owning = findSectionOwning(schemaRef.current, fieldKey);
+      if (owning && owning.key === target.sectionKey && typeof target.index === "number") {
+        const currentIndex = indexOfFieldInSection(schemaRef.current, owning.key, fieldKey);
+        if (currentIndex >= 0 && currentIndex < target.index) {
+          target.index -= 1;
+        }
+      }
+      try {
+        const nextSchema = moveField({
+          schema: schemaRef.current,
+          fieldKey,
+          target
+        });
+        handleDrop({ schema: nextSchema });
+      } catch (error) {
+        flash(t("forms.studio.autosave.invalidSchema"), "error");
+        logger.warn("reorder failed", { err: error });
+      }
+    }
+  }, [persistDraft, resolveDropPosition, t, undoController]);
+  const handleDragCancel = React.useCallback(() => {
+    setActiveDragId(null);
+    setActiveDropTarget(null);
+  }, []);
+  const handleMoveField = React.useCallback((fieldKey, direction) => {
+    const owning = findSectionOwning(schemaRef.current, fieldKey);
+    if (!owning) return;
+    const currentIndex = indexOfFieldInSection(schemaRef.current, owning.key, fieldKey);
+    const nextIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= owning.fieldKeys.length) return;
+    updateSchemaStructural((current) => moveField({
+      schema: current,
+      fieldKey,
+      target: { sectionKey: owning.key, index: nextIndex }
+    }));
+  }, [updateSchemaStructural]);
+  const handleMoveSection = React.useCallback((sectionKey, direction) => {
+    const sections = schemaRef.current["x-om-sections"] ?? [];
+    const currentIndex = sections.findIndex((entry) => entry.key === sectionKey);
+    const nextIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= sections.length) return;
+    const beforeKey = direction === "up" ? sections[nextIndex]?.key ?? null : sections[nextIndex + 1]?.key ?? null;
+    updateSchemaStructural((current) => moveSection({ schema: current, sectionKey, beforeKey }));
+  }, [updateSchemaStructural]);
+  const dragOverlayContent = React.useMemo(() => {
+    if (!activeDragId) return null;
+    const resolveHoveredSectionKey = () => {
+      if (!activeDropTarget) return null;
+      if (activeDropTarget.kind === "sortable") {
+        if (activeDropTarget.id.startsWith(FIELD_DRAGGABLE_PREFIX)) {
+          const overFieldKey = activeDropTarget.id.slice(FIELD_DRAGGABLE_PREFIX.length);
+          const owning = findSectionOwning(schemaRef.current, overFieldKey);
+          return owning ? owning.key : null;
+        }
+        if (activeDropTarget.id.startsWith(SECTION_DRAGGABLE_PREFIX)) {
+          return activeDropTarget.id.slice(SECTION_DRAGGABLE_PREFIX.length);
+        }
+        return null;
+      }
+      return activeDropTarget.sectionKey;
+    };
+    const resolveTargetGeometry = (spanIntent) => {
+      const sectionKey = resolveHoveredSectionKey();
+      if (!sectionKey) return null;
+      const node = gridRefs.current.get(sectionKey);
+      if (!node) return null;
+      const rect = node.getBoundingClientRect();
+      if (!rect || rect.width <= 0) return null;
+      const view = resolveSectionViews(schemaRef.current).find(
+        (entry) => entry.key === sectionKey
+      );
+      if (!view) return null;
+      const widthPx = computeOverlayWidthPx({
+        sectionWidthPx: rect.width,
+        columns: view.columns,
+        span: spanIntent,
+        gap: view.gap
+      });
+      if (!Number.isFinite(widthPx) || widthPx <= 0) return null;
+      return { widthPx };
+    };
+    if (activeDragId.startsWith(PALETTE_DRAGGABLE_PREFIX)) {
+      const rawId = activeDragId.slice(PALETTE_DRAGGABLE_PREFIX.length);
+      const meta = paletteEntryById.get(rawId);
+      if (!meta) return null;
+      const resolved = resolvePaletteId(rawId);
+      const isSectionPrimitive = resolved.kind === "layout-primitive";
+      const geometry = isSectionPrimitive ? null : resolveTargetGeometry(1);
+      return /* @__PURE__ */ jsx(
+        DragOverlayCard,
+        {
+          Icon: resolveLucideIcon(meta.iconName),
+          label: t(meta.displayNameKey),
+          widthPx: geometry?.widthPx
+        }
+      );
+    }
+    if (activeDragId.startsWith(SECTION_DRAGGABLE_PREFIX)) {
+      return null;
+    }
+    if (activeDragId.startsWith(FIELD_DRAGGABLE_PREFIX)) {
+      const fieldKey = activeDragId.slice(FIELD_DRAGGABLE_PREFIX.length);
+      const node = schemaRef.current.properties[fieldKey];
+      if (!node) return null;
+      const omType = String(node["x-om-type"] ?? "text");
+      const Icon = resolveLucideIcon(
+        paletteEntryById.get(omType)?.iconName ?? paletteEntryById.get(`layout:field:${omType}`)?.iconName
+      );
+      const label = node["x-om-label"]?.en ?? fieldKey;
+      const persistedSpan = readSpan(node["x-om-grid-span"]) ?? 1;
+      const geometry = resolveTargetGeometry(persistedSpan);
+      return /* @__PURE__ */ jsx(DragOverlayCard, { Icon, label, widthPx: geometry?.widthPx });
+    }
+    return null;
+  }, [activeDragId, activeDropTarget, paletteEntryById, t]);
+  const persistFormPatch = React.useMemo(
+    () => autosaveDebounce(async (payload) => {
+      const call = await runMutation({
+        operation: () => withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(formUpdatedAtRef.current),
+          () => apiCall(`/api/forms/${encodeURIComponent(formId)}`, {
+            method: "PATCH",
+            body: JSON.stringify(payload)
+          })
+        ),
+        context: { formId },
+        mutationPayload: { formId, ...payload }
+      });
+      if (!call.ok) {
+        if (surfaceRecordConflict({ status: call.status, body: call.result }, t)) return;
+        const errPayload = call.result;
+        flash(t(errPayload?.error ?? "forms.studio.autosave.error"), "error");
+        return;
+      }
+      const updatedAt = call.result?.updatedAt;
+      if (updatedAt) {
+        formUpdatedAtRef.current = updatedAt;
+        setForm((current) => current ? { ...current, updatedAt } : current);
+      }
+    }, 1e3),
+    [formId, runMutation, t]
+  );
+  const handleNameChange = React.useCallback((nextName) => {
+    setForm((current) => current ? { ...current, name: nextName } : current);
+    persistFormPatch({ name: nextName });
+  }, [persistFormPatch]);
+  const handleDescriptionChange = React.useCallback((nextDescription) => {
+    setForm((current) => current ? { ...current, description: nextDescription } : current);
+    persistFormPatch({ description: nextDescription.length > 0 ? nextDescription : null });
+  }, [persistFormPatch]);
+  const persistLocalePatch = React.useCallback(
+    async (payload) => {
+      setForm(
+        (current) => current ? { ...current, supportedLocales: payload.supportedLocales, defaultLocale: payload.defaultLocale } : current
+      );
+      setActiveLocale(
+        (current) => payload.supportedLocales.includes(current) ? current : payload.defaultLocale
+      );
+      const call = await runMutation({
+        operation: () => withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(formUpdatedAtRef.current),
+          () => apiCall(`/api/forms/${encodeURIComponent(formId)}`, {
+            method: "PATCH",
+            body: JSON.stringify(payload)
+          })
+        ),
+        context: { formId },
+        mutationPayload: { formId, ...payload }
+      });
+      if (!call.ok) {
+        if (surfaceRecordConflict({ status: call.status, body: call.result }, t)) {
+          await reload();
+          return;
+        }
+        const errPayload = call.result;
+        flash(t(errPayload?.error ?? "forms.studio.autosave.error"), "error");
+        await reload();
+        return;
+      }
+      const updatedAt = call.result?.updatedAt;
+      if (updatedAt) {
+        formUpdatedAtRef.current = updatedAt;
+        setForm((current) => current ? { ...current, updatedAt } : current);
+      }
+    },
+    [formId, reload, runMutation, t]
+  );
+  const handleAddLocale = React.useCallback(
+    (locale) => {
+      const trimmed = locale.trim();
+      if (!trimmed) return;
+      setForm((current) => {
+        if (!current || current.supportedLocales.includes(trimmed)) return current;
+        const nextSupported = [...current.supportedLocales, trimmed];
+        void persistLocalePatch({ supportedLocales: nextSupported, defaultLocale: current.defaultLocale });
+        return current;
+      });
+    },
+    [persistLocalePatch]
+  );
+  const handleRemoveLocale = React.useCallback(
+    (locale) => {
+      setForm((current) => {
+        if (!current) return current;
+        if (locale === current.defaultLocale) return current;
+        if (current.supportedLocales.length <= 1) return current;
+        const nextSupported = current.supportedLocales.filter((entry) => entry !== locale);
+        void persistLocalePatch({ supportedLocales: nextSupported, defaultLocale: current.defaultLocale });
+        return current;
+      });
+    },
+    [persistLocalePatch]
+  );
+  const handleDefaultLocaleChange = React.useCallback(
+    (locale) => {
+      setForm((current) => {
+        if (!current || locale === current.defaultLocale) return current;
+        if (!current.supportedLocales.includes(locale)) return current;
+        void persistLocalePatch({ supportedLocales: current.supportedLocales, defaultLocale: locale });
+        return current;
+      });
+    },
+    [persistLocalePatch]
+  );
+  const declaredRoles = React.useMemo(
+    () => (schema["x-om-roles"] ?? []).filter((entry) => typeof entry === "string"),
+    [schema]
+  );
+  const guestEnabled = React.useMemo(() => isGuestSubmissionEnabled(schema), [schema]);
+  const previewRoles = React.useMemo(() => {
+    const all = /* @__PURE__ */ new Set(["admin"]);
+    declaredRoles.forEach((entry) => all.add(entry));
+    return Array.from(all);
+  }, [declaredRoles]);
+  const selectedField = selectedFieldKey ? schema.properties[selectedFieldKey] : null;
+  const selectedSectionNode = selection?.kind === "section" ? (schema["x-om-sections"] ?? []).find((entry) => entry.key === selection.key) ?? null : null;
+  const sectionsForDerivation = resolveSectionViews(schema);
+  const derivedPages = partitionPages(sectionsForDerivation);
+  const density = resolveFormStyle(schema);
+  const persistedLabelPosition = resolveFormLabelPosition(schema);
+  const pageMode = resolvePageMode(schema);
+  const persistedShowProgress = resolveShowProgress(schema);
+  const persistedTheme = resolveFormTheme(schema);
+  const canUndo = undoController.canUndo();
+  const canRedo = undoController.canRedo();
+  void undoNonce;
+  const persistedHiddenFields = React.useMemo(() => {
+    const raw = schema["x-om-hidden-fields"];
+    if (!Array.isArray(raw)) return [];
+    return raw.filter((entry) => !!entry && typeof entry === "object").map((entry) => ({
+      name: String(entry.name ?? ""),
+      defaultValue: typeof entry.defaultValue === "string" ? entry.defaultValue : void 0
+    })).filter((entry) => entry.name.length > 0);
+  }, [schema]);
+  const persistedJumps = React.useMemo(() => {
+    const raw = schema["x-om-jumps"];
+    if (!Array.isArray(raw)) return [];
+    const result = [];
+    for (const entry of raw) {
+      if (!entry || typeof entry !== "object") continue;
+      const candidate = entry;
+      if (!candidate.from || typeof candidate.from !== "object") continue;
+      if (!Array.isArray(candidate.rules)) continue;
+      result.push({
+        from: candidate.from,
+        rules: candidate.rules,
+        otherwise: candidate.otherwise
+      });
+    }
+    return result;
+  }, [schema]);
+  const persistedVariables = React.useMemo(() => {
+    const raw = schema["x-om-variables"];
+    if (!Array.isArray(raw)) return [];
+    const result = [];
+    for (const entry of raw) {
+      if (!entry || typeof entry !== "object") continue;
+      const candidate = entry;
+      const type = candidate.type;
+      if (type !== "number" && type !== "boolean" && type !== "string") continue;
+      const name = String(candidate.name ?? "");
+      if (name.length === 0) continue;
+      const next = { name, type, formula: candidate.formula };
+      if (candidate.default !== void 0) {
+        next.default = candidate.default;
+      }
+      result.push(next);
+    }
+    return result;
+  }, [schema]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingMessage, { label: t("forms.studio.title") });
+  }
+  if (loadError === "forms.errors.form_not_found") {
+    return /* @__PURE__ */ jsx(
+      RecordNotFoundState,
+      {
+        label: t(loadError),
+        backHref: "/backend/forms",
+        backLabel: t("forms.list.title")
+      }
+    );
+  }
+  if (loadError || !form) {
+    return /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        label: t(loadError ?? "forms.errors.internal"),
+        action: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx(Link, { href: "/backend/forms", children: t("forms.list.title") }) })
+      }
+    );
+  }
+  const paletteParameters = {
+    formId,
+    formKey: form.key,
+    name: form.name,
+    description: form.description ?? "",
+    supportedLocales: form.supportedLocales,
+    defaultLocale: form.defaultLocale,
+    defaultActorRole: schema["x-om-default-actor-role"] ?? "admin",
+    declaredRoles,
+    guestEnabled,
+    density,
+    labelPosition: persistedLabelPosition,
+    pageMode,
+    showProgress: persistedShowProgress,
+    pagesCount: derivedPages.length,
+    hiddenFields: persistedHiddenFields,
+    variables: persistedVariables,
+    schema,
+    onNameChange: handleNameChange,
+    onDescriptionChange: handleDescriptionChange,
+    onToggleGuest: handleToggleGuest,
+    onAddRole: handleAddRole,
+    onRenameRole: handleRenameRole,
+    onRemoveRole: handleRemoveRole,
+    onDefaultActorRoleChange: handleDefaultActorRoleChange,
+    onDensityChange: handleDensityChange,
+    onLabelPositionChange: handleLabelPositionChange,
+    onPageModeChange: handlePageModeChange,
+    onShowProgressChange: handleShowProgressChange,
+    onHiddenFieldsChange: handleHiddenFieldsChange,
+    onVariablesChange: handleVariablesChange,
+    onAddLocale: handleAddLocale,
+    onRemoveLocale: handleRemoveLocale,
+    onDefaultLocaleChange: handleDefaultLocaleChange
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "sr-only",
+        children: resizeAnnouncement
+      }
+    ),
+    /* @__PURE__ */ jsxs("header", { className: "mb-4 flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground", children: form.name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: form.key }),
+          /* @__PURE__ */ jsx("span", { className: "mx-2", children: "\u2014" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            t("forms.studio.schemaHashLabel"),
+            ": ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: (version?.schemaHash ?? "").slice(0, 12) || "\u2014" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        form.supportedLocales.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Globe, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(Select, { value: activeLocale, onValueChange: setActiveLocale, children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                className: "h-8 w-24",
+                "aria-label": t("forms.studio.locale_switcher.label"),
+                children: /* @__PURE__ */ jsx(SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: form.supportedLocales.map((locale) => /* @__PURE__ */ jsx(SelectItem, { value: locale, children: locale }, locale)) })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsx(Tag, { variant: version?.status === "published" ? "success" : "warning", dot: true, children: t(version?.status === "published" ? "forms.studio.statusPublished" : version?.status === "archived" ? "forms.studio.statusArchived" : "forms.studio.statusDraft") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: autosaveState === "saving" ? t("forms.studio.autosave.saving") : autosaveState === "error" ? t("forms.studio.autosave.error") : t("forms.studio.autosave.idle") }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: handleUndo,
+            disabled: !canUndo,
+            "aria-label": t("forms.studio.undo.button.undo"),
+            title: t("forms.studio.undo.button.undo"),
+            children: /* @__PURE__ */ jsx(Undo2, { className: "size-4", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: handleRedo,
+            disabled: !canRedo,
+            "aria-label": t("forms.studio.undo.button.redo"),
+            title: t("forms.studio.undo.button.redo"),
+            children: /* @__PURE__ */ jsx(Redo2, { className: "size-4", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx(Link, { href: `/backend/forms/${encodeURIComponent(formId)}/history`, children: t("forms.studio.actions.history") }) }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => setShowPublishDialog(true), disabled: !draftVersionId, children: t("forms.studio.actions.publish") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { value: topTab, onValueChange: (next) => setTopTab(next), children: [
+      /* @__PURE__ */ jsxs(TabsList, { children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "builder", children: t("forms.studio.tabs.top.builder") }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "preview", children: t("forms.studio.tabs.top.preview") })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "builder", children: /* @__PURE__ */ jsxs(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: gridAwareCollision,
+          onDragStart: handleDragStart,
+          onDragOver: handleDragOver,
+          onDragEnd: handleDragEnd,
+          onDragCancel: handleDragCancel,
+          accessibility: {
+            announcements,
+            screenReaderInstructions: {
+              draggable: t("forms.studio.dnd.instructions.draggable")
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-[280px_1fr_320px]", children: [
+              /* @__PURE__ */ jsx(FormPalettePanel, { parameters: paletteParameters }),
+              /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-border bg-card p-4", children: [
+                /* @__PURE__ */ jsx("h2", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("forms.studio.panes.tree") }),
+                /* @__PURE__ */ jsx(
+                  FormCanvas,
+                  {
+                    schema,
+                    selectedKey: selection,
+                    onSelectField: selectField,
+                    onSelectSection: selectSection,
+                    onDeleteField: handleDeleteField,
+                    onDeleteSection: (key) => {
+                      void handleDeleteSection(key);
+                    },
+                    onMoveField: handleMoveField,
+                    onMoveSection: handleMoveSection,
+                    onAdoptUngrouped: handleAdoptUngrouped,
+                    onSectionTitleCommit: handleSectionTitleCommit,
+                    focusSectionTitleKey,
+                    onSectionTitleFocusConsumed: () => setFocusSectionTitleKey(null),
+                    activeLocale,
+                    activeDropTarget,
+                    resizeState: fieldResizeState,
+                    onFieldResizeStart: handleFieldResizeStart,
+                    onFieldResizePreview: handleFieldResizePreview,
+                    onFieldResizeCommit: handleFieldResizeCommit,
+                    gridRefs,
+                    t
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("aside", { className: "rounded-lg border border-border bg-card p-4", children: [
+                /* @__PURE__ */ jsx("h2", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("forms.studio.panes.properties") }),
+                selection?.kind === "section" ? /* @__PURE__ */ jsx(
+                  SectionPropertiesPanel,
+                  {
+                    schema,
+                    sectionKey: selection.key,
+                    activeLocale,
+                    jumps: persistedJumps,
+                    onColumnsChange: handleSectionColumnsChange,
+                    onGapChange: handleSectionGapChange,
+                    onDividerChange: handleSectionDividerChange,
+                    onKindChange: handleSectionKindChange,
+                    onHideTitleChange: handleSectionHideTitleChange,
+                    onStyleChange: handleSectionStyleChange,
+                    onVisibilityChange: handleSectionVisibilityChange,
+                    onRedirectUrlChange: handleRedirectUrlChange,
+                    onJumpsChange: handleJumpsChange,
+                    t
+                  }
+                ) : !selectedField || !selectedFieldKey ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("forms.studio.empty") }),
+                  /* @__PURE__ */ jsx(
+                    FormAppearancePanel,
+                    {
+                      formId,
+                      theme: persistedTheme,
+                      onThemeChange: handleThemeChange
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  FieldPropertiesPanel,
+                  {
+                    schema,
+                    fieldKey: selectedFieldKey,
+                    node: selectedField,
+                    declaredRoles,
+                    required: (schema.required ?? []).includes(selectedFieldKey),
+                    activeLocale,
+                    onUpdate: (updater) => handleFieldUpdate(selectedFieldKey, updater),
+                    onRequiredChange: (value) => handleRequiredToggle(selectedFieldKey, value),
+                    onDelete: () => handleDeleteField(selectedFieldKey),
+                    onGridSpanChange: handleFieldGridSpan,
+                    onAlignChange: handleFieldAlign,
+                    onHideMobileChange: handleFieldHideMobile,
+                    onStyleChange: handleFieldStyleChange,
+                    onTypeSwap: handleFieldTypeSwap,
+                    onVisibilityChange: handleFieldVisibilityChange,
+                    t
+                  }
+                ),
+                /* @__PURE__ */ jsxs("details", { className: "mt-4", children: [
+                  /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs font-medium uppercase text-muted-foreground", children: t("forms.studio.compiledJson") }),
+                  /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-72 overflow-auto rounded-md border border-border bg-muted/30 p-2 text-xs", children: selectedField ? stableJsonStringify(selectedField) : selectedSectionNode ? stableJsonStringify(selectedSectionNode) : "{}" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(DragOverlay, { children: dragOverlayContent })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "preview", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-[1fr_320px]", children: [
+        /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-border bg-card p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("forms.studio.panes.preview") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+              /* @__PURE__ */ jsx("span", { children: t("forms.studio.previewAs") }),
+              /* @__PURE__ */ jsxs(Select, { value: previewRole, onValueChange: setPreviewRole, children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-32", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: previewRoles.map((role) => /* @__PURE__ */ jsx(SelectItem, { value: role, children: role }, role)) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ViewportFrame,
+            {
+              viewport: previewViewport,
+              onViewportChange: setPreviewViewport,
+              t,
+              children: /* @__PURE__ */ jsx(
+                PreviewSurface,
+                {
+                  schema,
+                  viewport: previewViewport,
+                  previewRole,
+                  t
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("aside", { className: "space-y-3 rounded-lg border border-border bg-card p-4", children: (() => {
+          const sectionNodes = schema["x-om-sections"] ?? [];
+          const fieldOptions = buildFieldSourceOptions(schema, activeLocale, t).filter((entry) => entry.namespace === "field");
+          const sectionKey = previewStyleTarget.startsWith("section:") ? previewStyleTarget.slice("section:".length) : null;
+          const fieldKey = previewStyleTarget.startsWith("field:") ? previewStyleTarget.slice("field:".length) : null;
+          const activeSection = sectionKey ? sectionNodes.find((s) => s.key === sectionKey) ?? null : null;
+          const activeFieldNode = fieldKey ? schema.properties[fieldKey] ?? null : null;
+          const effectiveTarget = activeSection ? previewStyleTarget : activeFieldNode ? previewStyleTarget : "form";
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: "forms-studio-preview-style-target", className: "block text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: t("forms.studio.style.target.label", "Style") }),
+              /* @__PURE__ */ jsxs(Select, { value: effectiveTarget, onValueChange: setPreviewStyleTarget, children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { id: "forms-studio-preview-style-target", className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "form", children: t("forms.studio.style.target.form", "Whole form") }),
+                  sectionNodes.map((section) => /* @__PURE__ */ jsxs(SelectItem, { value: `section:${section.key}`, children: [
+                    t("forms.studio.style.target.section", "Section"),
+                    ": ",
+                    section.title?.[activeLocale] ?? section.title?.en ?? section.key
+                  ] }, `section:${section.key}`)),
+                  fieldOptions.map((option) => /* @__PURE__ */ jsxs(SelectItem, { value: `field:${option.value}`, children: [
+                    t("forms.studio.style.target.field", "Field"),
+                    ": ",
+                    option.label
+                  ] }, `field:${option.value}`))
+                ] })
+              ] })
+            ] }),
+            activeSection ? /* @__PURE__ */ jsx(
+              SectionAppearanceTabContent,
+              {
+                style: activeSection.style,
+                onStyleChange: (next) => handleSectionStyleChange(activeSection.key, next),
+                t
+              }
+            ) : activeFieldNode && fieldKey ? /* @__PURE__ */ jsx(
+              FieldAppearanceTabContent,
+              {
+                style: activeFieldNode["x-om-style"],
+                onStyleChange: (next) => handleFieldStyleChange(fieldKey, next),
+                formSurface: persistedTheme?.surface ?? "surface",
+                t
+              }
+            ) : /* @__PURE__ */ jsx(FormAppearancePanel, { formId, theme: persistedTheme, onThemeChange: handleThemeChange })
+          ] });
+        })() })
+      ] }) })
+    ] }),
+    showPublishDialog && draftVersionId && /* @__PURE__ */ jsx(
+      PublishDialog,
+      {
+        formId,
+        versionId: draftVersionId,
+        updatedAt: version?.updatedAt ?? null,
+        onClose: () => setShowPublishDialog(false),
+        onPublished: () => {
+          setShowPublishDialog(false);
+          flash(t("forms.studio.actions.publish"), "success");
+          router.push(`/backend/forms/${encodeURIComponent(formId)}/history`);
+        },
+        t
+      }
+    ),
+    ConfirmDialogElement
+  ] });
+}
+function SectionPropertiesPanel(props) {
+  const { schema, sectionKey, activeLocale, jumps, onVisibilityChange, onJumpsChange, onStyleChange, t } = props;
+  const [tab, setTab] = React.useState("style");
+  const sections = schema["x-om-sections"] ?? [];
+  const section = sections.find((entry) => entry.key === sectionKey);
+  if (!section) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("forms.studio.empty") });
+  }
+  const isEnding = section.kind === "ending";
+  const isPage = section.kind === "page";
+  const sourceOptions = buildFieldSourceOptions(schema, activeLocale, t);
+  return /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (next) => setTab(next), children: [
+    /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-stretch", children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "style", className: "flex-1", children: t("forms.studio.style.tabs.style") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "appearance", className: "flex-1", children: t("forms.studio.style.tabs.appearance", "Appearance") }),
+      !isEnding ? /* @__PURE__ */ jsx(TabsTrigger, { value: "logic", className: "flex-1", children: t("forms.studio.logic.tab.label") }) : null
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "style", children: /* @__PURE__ */ jsx(SectionStyleTabContent, { ...props, section }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "appearance", children: /* @__PURE__ */ jsx(
+      SectionAppearanceTabContent,
+      {
+        style: section.style,
+        onStyleChange: (next) => onStyleChange(sectionKey, next),
+        t
+      }
+    ) }),
+    !isEnding ? /* @__PURE__ */ jsxs(TabsContent, { value: "logic", className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        ConditionBuilder,
+        {
+          predicate: section["x-om-visibility-if"] ?? null,
+          sources: sourceOptions,
+          onChange: (next) => onVisibilityChange(sectionKey, next)
+        }
+      ),
+      isPage ? /* @__PURE__ */ jsx(
+        JumpsEditor,
+        {
+          schema,
+          pageKey: sectionKey,
+          sources: sourceOptions,
+          rules: jumps,
+          onChange: onJumpsChange
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+function SectionStyleTabContent({
+  schema,
+  sectionKey,
+  section,
+  onColumnsChange,
+  onGapChange,
+  onDividerChange,
+  onKindChange,
+  onHideTitleChange,
+  onRedirectUrlChange,
+  t
+}) {
+  void schema;
+  const columns = section.columns ?? 1;
+  const gap = section.gap ?? "md";
+  const divider = section.divider === true;
+  const kind = section.kind ?? "section";
+  const hideTitle = section.hideTitle === true;
+  const isEnding = kind === "ending";
+  const redirectUrl = typeof section["x-om-redirect-url"] === "string" ? section["x-om-redirect-url"] : "";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    isEnding ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.style.section.redirect.label") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "url",
+          placeholder: "https://example.com/thanks",
+          value: redirectUrl,
+          onChange: (event) => onRedirectUrlChange(sectionKey, event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.style.section.redirect.helper") })
+    ] }) : null,
+    !isEnding ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.style.section.kind.label") }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: kind,
+          onValueChange: (next) => onKindChange(sectionKey, next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "section", children: t("forms.studio.style.section.kind.section") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "page", children: t("forms.studio.style.section.kind.page") })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.style.section.kind.helper") })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.style.section.columns.label") }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(columns),
+          onValueChange: (next) => onColumnsChange(sectionKey, Number(next)),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "1", children: "1" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "2", children: "2" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "3", children: "3" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "4", children: "4" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.style.section.gap.label") }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: gap,
+          onValueChange: (next) => onGapChange(sectionKey, next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "sm", children: t("forms.studio.style.section.gap.sm") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "md", children: t("forms.studio.style.section.gap.md") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "lg", children: t("forms.studio.style.section.gap.lg") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      YesNoRow,
+      {
+        label: t("forms.studio.style.section.divider.label"),
+        value: divider,
+        onChange: (next) => onDividerChange(sectionKey, next)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YesNoRow,
+      {
+        label: t("forms.studio.style.section.hideTitle.label"),
+        value: hideTitle,
+        onChange: (next) => onHideTitleChange(sectionKey, next)
+      }
+    )
+  ] });
+}
+const SECTION_STYLE_NONE = "__none__";
+const SECTION_PADDING_OPTIONS = [
+  { value: "none", fallback: "None" },
+  { value: "xs", fallback: "XS" },
+  { value: "sm", fallback: "Small" },
+  { value: "md", fallback: "Medium" },
+  { value: "lg", fallback: "Large" },
+  { value: "xl", fallback: "XL" }
+];
+const SECTION_BORDER_OPTIONS = [
+  { value: "none", fallback: "None" },
+  { value: "subtle", fallback: "Subtle" },
+  { value: "strong", fallback: "Strong" }
+];
+const SECTION_RADIUS_OPTIONS = [
+  { value: "none", fallback: "None" },
+  { value: "sm", fallback: "Small" },
+  { value: "md", fallback: "Medium" },
+  { value: "lg", fallback: "Large" },
+  { value: "full", fallback: "Full" }
+];
+const TEXT_ALIGN_OPTIONS = [
+  { value: "start", fallback: "Start" },
+  { value: "center", fallback: "Center" },
+  { value: "end", fallback: "End" }
+];
+const FIELD_LABEL_WEIGHT_OPTIONS = [
+  { value: "normal", fallback: "Normal" },
+  { value: "medium", fallback: "Medium" },
+  { value: "semibold", fallback: "Semibold" },
+  { value: "bold", fallback: "Bold" }
+];
+function AppearanceEnumSelect({
+  id,
+  label,
+  current,
+  options,
+  labelKeyPrefix,
+  onPick,
+  t
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block text-xs font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: current ?? SECTION_STYLE_NONE,
+        onValueChange: (next) => onPick(next === SECTION_STYLE_NONE ? void 0 : next),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id, className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: SECTION_STYLE_NONE, children: t("forms.studio.style.inherit", "Default") }),
+            options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: t(`${labelKeyPrefix}.${option.value}`, option.fallback) }, option.value))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SectionAppearanceTabContent({ style, onStyleChange, t }) {
+  const patch = React.useCallback(
+    (next) => {
+      const merged = { ...style ?? {}, ...next };
+      for (const key of Object.keys(merged)) {
+        if (merged[key] === void 0) delete merged[key];
+      }
+      onStyleChange(Object.keys(merged).length === 0 ? void 0 : merged);
+    },
+    [style, onStyleChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      BackgroundControl,
+      {
+        label: t("forms.studio.style.section.background", "Background"),
+        value: style?.background,
+        onChange: (next) => patch({ background: next })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorControl,
+      {
+        label: t("forms.studio.style.section.foreground", "Text"),
+        value: style?.foreground,
+        onChange: (next) => patch({ foreground: next }),
+        contrastAgainst: style?.background?.kind === "color" ? style.background.color : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppearanceEnumSelect,
+      {
+        id: "forms-studio-section-padding",
+        label: t("forms.studio.style.section.padding", "Padding"),
+        current: style?.padding,
+        options: SECTION_PADDING_OPTIONS,
+        labelKeyPrefix: "forms.studio.style.padding",
+        onPick: (next) => patch({ padding: next }),
+        t
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppearanceEnumSelect,
+      {
+        id: "forms-studio-section-border",
+        label: t("forms.studio.style.section.border", "Border"),
+        current: style?.border,
+        options: SECTION_BORDER_OPTIONS,
+        labelKeyPrefix: "forms.studio.style.border",
+        onPick: (next) => patch({ border: next }),
+        t
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppearanceEnumSelect,
+      {
+        id: "forms-studio-section-radius",
+        label: t("forms.studio.style.section.radius", "Corner radius"),
+        current: style?.radius,
+        options: SECTION_RADIUS_OPTIONS,
+        labelKeyPrefix: "forms.studio.style.radius",
+        onPick: (next) => patch({ radius: next }),
+        t
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YesNoRow,
+      {
+        label: t("forms.studio.style.section.card", "Card"),
+        value: style?.card === true,
+        onChange: (next) => patch({ card: next ? true : void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppearanceEnumSelect,
+      {
+        id: "forms-studio-section-align",
+        label: t("forms.studio.style.section.align", "Alignment"),
+        current: style?.align,
+        options: TEXT_ALIGN_OPTIONS,
+        labelKeyPrefix: "forms.studio.style.align",
+        onPick: (next) => patch({ align: next }),
+        t
+      }
+    )
+  ] });
+}
+function FieldAppearanceTabContent({ style, onStyleChange, formSurface, t }) {
+  const patch = React.useCallback(
+    (next) => {
+      const merged = { ...style ?? {}, ...next };
+      for (const key of Object.keys(merged)) {
+        if (merged[key] === void 0) delete merged[key];
+      }
+      onStyleChange(Object.keys(merged).length === 0 ? void 0 : merged);
+    },
+    [style, onStyleChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      AppearanceEnumSelect,
+      {
+        id: "forms-studio-field-label-weight",
+        label: t("forms.studio.style.field.labelWeight", "Label weight"),
+        current: style?.labelWeight,
+        options: FIELD_LABEL_WEIGHT_OPTIONS,
+        labelKeyPrefix: "forms.studio.style.weight",
+        onPick: (next) => patch({ labelWeight: next }),
+        t
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorControl,
+      {
+        label: t("forms.studio.style.field.labelColor", "Label color"),
+        value: style?.labelColor,
+        onChange: (next) => patch({ labelColor: next }),
+        contrastAgainst: formSurface
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorControl,
+      {
+        label: t("forms.studio.style.field.textColor", "Text color"),
+        value: style?.textColor,
+        onChange: (next) => patch({ textColor: next }),
+        contrastAgainst: formSurface
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorControl,
+      {
+        label: t("forms.studio.style.field.accent", "Accent"),
+        value: style?.accent,
+        onChange: (next) => patch({ accent: next })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AppearanceEnumSelect,
+      {
+        id: "forms-studio-field-align",
+        label: t("forms.studio.style.field.appearanceAlign", "Alignment"),
+        current: style?.align,
+        options: TEXT_ALIGN_OPTIONS,
+        labelKeyPrefix: "forms.studio.style.align",
+        onPick: (next) => patch({ align: next }),
+        t
+      }
+    )
+  ] });
+}
+function findOwningSection(schema, fieldKey) {
+  const sections = schema["x-om-sections"] ?? [];
+  for (const section of sections) {
+    if (section.fieldKeys.includes(fieldKey)) return section;
+  }
+  return null;
+}
+function FieldPropertiesPanel({
+  schema,
+  fieldKey,
+  node,
+  declaredRoles,
+  required,
+  activeLocale,
+  onUpdate,
+  onRequiredChange,
+  onDelete,
+  onGridSpanChange,
+  onAlignChange,
+  onHideMobileChange,
+  onStyleChange,
+  onTypeSwap,
+  onVisibilityChange,
+  t
+}) {
+  const [tab, setTab] = React.useState("field");
+  const sourceOptions = React.useMemo(
+    () => buildFieldSourceOptions(schema, activeLocale, t).filter((entry) => entry.value !== fieldKey),
+    [schema, activeLocale, t, fieldKey]
+  );
+  const visibilityPredicate = node["x-om-visibility-if"] ?? null;
+  const owningSection = findOwningSection(schema, fieldKey);
+  const sectionColumns = owningSection?.columns ?? 1;
+  const omType = String(node["x-om-type"] ?? "text");
+  const isInfoBlock = omType === "info_block";
+  const persistedSpanRaw = node["x-om-grid-span"];
+  const persistedSpan = persistedSpanRaw === 2 || persistedSpanRaw === 3 || persistedSpanRaw === 4 ? persistedSpanRaw : 1;
+  const align = node["x-om-align"] === "center" || node["x-om-align"] === "end" ? node["x-om-align"] : "start";
+  const hideMobile = node["x-om-hide-mobile"] === true;
+  const widthOptions = React.useMemo(() => {
+    const max = sectionColumns;
+    const options = [];
+    for (let i = 1; i <= max; i += 1) options.push(i);
+    return options;
+  }, [sectionColumns]);
+  const showWidth = !isInfoBlock && sectionColumns > 1;
+  const swapFamily = SWAP_FAMILIES[omType];
+  const swapTargets = swapFamily ? Array.from(swapFamily) : null;
+  return /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (next) => setTab(next), children: [
+    /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-stretch", children: [
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "field", className: "flex-1", children: t("forms.studio.style.tabs.field") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "style", className: "flex-1", children: t("forms.studio.style.tabs.style") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "appearance", className: "flex-1", children: t("forms.studio.style.tabs.appearance", "Appearance") }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "logic", className: "flex-1", children: t("forms.studio.logic.tab.label") })
+    ] }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "field", children: /* @__PURE__ */ jsx(
+      FieldTabContent,
+      {
+        fieldKey,
+        node,
+        declaredRoles,
+        required,
+        activeLocale,
+        onUpdate,
+        onRequiredChange,
+        onDelete,
+        onTypeSwap,
+        omType,
+        swapTargets,
+        t
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "style", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      showWidth ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.style.field.width.label") }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(Math.min(persistedSpan, sectionColumns)),
+            onValueChange: (next) => onGridSpanChange(fieldKey, Number(next)),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: widthOptions.map((value) => /* @__PURE__ */ jsx(SelectItem, { value: String(value), children: value }, value)) })
+            ]
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.style.field.align.label") }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: align,
+            onValueChange: (next) => onAlignChange(fieldKey, next),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "start", children: t("forms.studio.style.field.align.start") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "center", children: t("forms.studio.style.field.align.center") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "end", children: t("forms.studio.style.field.align.end") })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        YesNoRow,
+        {
+          label: t("forms.studio.style.field.hideMobile.label"),
+          value: hideMobile,
+          onChange: (next) => onHideMobileChange(fieldKey, next)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "appearance", children: /* @__PURE__ */ jsx(
+      FieldAppearanceTabContent,
+      {
+        style: node["x-om-style"],
+        onStyleChange: (next) => onStyleChange(fieldKey, next),
+        formSurface: resolveFormTheme(schema)?.surface ?? "surface",
+        t
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TabsContent, { value: "logic", children: /* @__PURE__ */ jsx(
+      ConditionBuilder,
+      {
+        predicate: visibilityPredicate,
+        sources: sourceOptions,
+        onChange: (next) => onVisibilityChange(fieldKey, next)
+      }
+    ) })
+  ] });
+}
+function RoleCheckboxList({
+  legend,
+  selected,
+  options,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-muted-foreground", children: legend }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: options.map((role) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: selected.includes(role),
+          onCheckedChange: (value) => onToggle(role, Boolean(value))
+        }
+      ),
+      role
+    ] }, role)) })
+  ] });
+}
+function FieldTabContent({
+  fieldKey,
+  node,
+  declaredRoles,
+  required,
+  activeLocale,
+  onUpdate,
+  onRequiredChange,
+  onDelete,
+  onTypeSwap,
+  omType,
+  swapTargets,
+  t
+}) {
+  const label = node["x-om-label"]?.[activeLocale] ?? "";
+  const help = node["x-om-help"]?.[activeLocale] ?? "";
+  const editableBy = node["x-om-editable-by"] ?? ["admin"];
+  const visibleTo = node["x-om-visible-to"] ?? [];
+  const sensitive = node["x-om-sensitive"] === true;
+  const roleOptions = React.useMemo(() => {
+    const set = /* @__PURE__ */ new Set(["admin"]);
+    for (const role of declaredRoles) set.add(role);
+    return Array.from(set);
+  }, [declaredRoles]);
+  const toggleRole = React.useCallback(
+    (keyword, fallback, role, checked) => {
+      onUpdate((current) => {
+        const next = new Set(current[keyword] ?? fallback);
+        if (checked) next.add(role);
+        else next.delete(role);
+        return { ...current, [keyword]: Array.from(next) };
+      });
+    },
+    [onUpdate]
+  );
+  const handlePatternChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next === null || next.length === 0) {
+          delete updated["x-om-pattern"];
+        } else {
+          updated["x-om-pattern"] = next;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleLengthRangeChange = React.useCallback(
+    (patch) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (patch.min !== void 0) {
+          if (patch.min === null) delete updated["x-om-min-length"];
+          else updated["x-om-min-length"] = patch.min;
+        }
+        if (patch.max !== void 0) {
+          if (patch.max === null) delete updated["x-om-max-length"];
+          else updated["x-om-max-length"] = patch.max;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleNumberRangeChange = React.useCallback(
+    (patch) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (patch.min !== void 0) {
+          if (patch.min === null) delete updated["x-om-min"];
+          else updated["x-om-min"] = patch.min;
+        }
+        if (patch.max !== void 0) {
+          if (patch.max === null) delete updated["x-om-max"];
+          else updated["x-om-max"] = patch.max;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleMessageChange = React.useCallback(
+    (patch) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        const existing = current["x-om-validation-messages"];
+        const cloned = existing && typeof existing === "object" && !Array.isArray(existing) ? Object.fromEntries(
+          Object.entries(existing).map(([loc, inner2]) => [
+            loc,
+            inner2 && typeof inner2 === "object" && !Array.isArray(inner2) ? { ...inner2 } : {}
+          ])
+        ) : {};
+        const inner = cloned[activeLocale] ? { ...cloned[activeLocale] } : {};
+        const trimmed = typeof patch.message === "string" ? patch.message : "";
+        if (!trimmed) {
+          delete inner[patch.rule];
+        } else {
+          inner[patch.rule] = trimmed;
+        }
+        if (Object.keys(inner).length === 0) {
+          delete cloned[activeLocale];
+        } else {
+          cloned[activeLocale] = inner;
+        }
+        if (Object.keys(cloned).length === 0) {
+          delete updated["x-om-validation-messages"];
+        } else {
+          updated["x-om-validation-messages"] = cloned;
+        }
+        return updated;
+      });
+    },
+    [onUpdate, activeLocale]
+  );
+  const handleRankingExhaustiveChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next === false) {
+          delete updated["x-om-ranking-exhaustive"];
+        } else {
+          updated["x-om-ranking-exhaustive"] = true;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleOpinionIconChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next === "dot") {
+          delete updated["x-om-opinion-icon"];
+        } else {
+          updated["x-om-opinion-icon"] = next;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleNpsAnchorChange = React.useCallback(
+    (patch) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        const existing = current["x-om-nps-anchors"];
+        const sourceLow = existing && typeof existing === "object" && !Array.isArray(existing) && existing.low && typeof existing.low === "object" ? { ...existing.low } : {};
+        const sourceHigh = existing && typeof existing === "object" && !Array.isArray(existing) && existing.high && typeof existing.high === "object" ? { ...existing.high } : {};
+        const map = {
+          low: sourceLow,
+          high: sourceHigh
+        };
+        const target = map[patch.anchor];
+        const trimmed = typeof patch.label === "string" ? patch.label : "";
+        if (!trimmed) {
+          delete target[activeLocale];
+        } else {
+          target[activeLocale] = trimmed;
+        }
+        const hasLow = Object.keys(map.low).length > 0;
+        const hasHigh = Object.keys(map.high).length > 0;
+        if (!hasLow && !hasHigh) {
+          delete updated["x-om-nps-anchors"];
+        } else {
+          updated["x-om-nps-anchors"] = { low: map.low, high: map.high };
+        }
+        return updated;
+      });
+    },
+    [onUpdate, activeLocale]
+  );
+  const handleMatrixRowsChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (!next || next.length === 0) {
+          delete updated["x-om-matrix-rows"];
+        } else {
+          updated["x-om-matrix-rows"] = next.map((row) => {
+            const result = { key: row.key, label: row.label };
+            if (row.multiple === true) result.multiple = true;
+            if (row.required === true) result.required = true;
+            return result;
+          });
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleMatrixColumnsChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (!next || next.length === 0) {
+          delete updated["x-om-matrix-columns"];
+        } else {
+          updated["x-om-matrix-columns"] = next.map((column) => ({
+            value: column.value,
+            label: column.label
+          }));
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleFileAcceptChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (!next || next.length === 0) {
+          delete updated["x-om-accept"];
+        } else {
+          updated["x-om-accept"] = next;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleFileMaxSizeChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next === null) {
+          delete updated["x-om-max-size-bytes"];
+        } else {
+          updated["x-om-max-size-bytes"] = next;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleFileMultipleChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next) {
+          updated["x-om-multiple"] = true;
+        } else {
+          delete updated["x-om-multiple"];
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleSignatureClauseChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        const clause = { ...updated["x-om-consent-clause"] ?? {} };
+        if (next === null) {
+          delete clause[activeLocale];
+        } else {
+          clause[activeLocale] = next;
+        }
+        if (Object.keys(clause).length === 0) {
+          delete updated["x-om-consent-clause"];
+        } else {
+          updated["x-om-consent-clause"] = clause;
+        }
+        return updated;
+      });
+    },
+    [onUpdate, activeLocale]
+  );
+  const handleSignatureModesChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next.length === 0 || next.includes("drawn") && next.includes("typed")) {
+          delete updated["x-om-signature-modes"];
+        } else {
+          updated["x-om-signature-modes"] = next;
+        }
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleOptionsChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        updated["x-om-options"] = next.map((option) => ({
+          value: option.value,
+          label: option.label
+        }));
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleGroupAddSubField = React.useCallback(() => {
+    onUpdate((current) => groupNodeAddSubField(current, { [activeLocale]: "New sub-field" }));
+  }, [onUpdate, activeLocale]);
+  const handleGroupRemoveSubField = React.useCallback(
+    (subFieldKey) => {
+      onUpdate((current) => groupNodeRemoveSubField(current, subFieldKey));
+    },
+    [onUpdate]
+  );
+  const handleGroupUpdateSubField = React.useCallback(
+    (subFieldKey, patch) => {
+      onUpdate((current) => {
+        const nodePatch = {};
+        if (patch.label !== void 0) {
+          const existingLabel = current.items?.properties?.[subFieldKey]?.["x-om-label"] ?? {};
+          nodePatch.label = { ...existingLabel, [activeLocale]: patch.label };
+        }
+        if (patch.type !== void 0) nodePatch.type = patch.type;
+        if (patch.required !== void 0) nodePatch.required = patch.required;
+        return groupNodeUpdateSubField(current, subFieldKey, nodePatch);
+      });
+    },
+    [onUpdate, activeLocale]
+  );
+  const handleGroupMinItemsChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next === null) delete updated["x-om-min-items"];
+        else updated["x-om-min-items"] = next;
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const handleGroupMaxItemsChange = React.useCallback(
+    (next) => {
+      onUpdate((current) => {
+        const updated = { ...current };
+        if (next === null || next < 1) delete updated["x-om-max-items"];
+        else updated["x-om-max-items"] = next;
+        return updated;
+      });
+    },
+    [onUpdate]
+  );
+  const groupTypeOptions = React.useMemo(
+    () => defaultFieldTypeRegistry.keys().filter((key) => key !== "group" && key !== "info_block").map((key) => ({ value: key, label: resolveTypeLabel(key, t) })),
+    [t]
+  );
+  const showOptionsEditor = omType === "select_one" || omType === "select_many" || omType === "ranking";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.field.type.label") }),
+      swapTargets && swapTargets.length > 1 ? /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: omType,
+          onValueChange: (next) => {
+            if (next !== omType && isCompatibleFieldSwap(omType, next)) {
+              onTypeSwap(fieldKey, next);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: swapTargets.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, children: resolveTypeLabel(value, t) }, value)) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolveTypeLabel(omType, t) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.field.type.swapHint") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.fields.label") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: label,
+          onChange: (event) => onUpdate((current) => ({
+            ...current,
+            "x-om-label": { ...current["x-om-label"] ?? {}, [activeLocale]: event.target.value }
+          }))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.fields.help") }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          rows: 2,
+          value: help,
+          onChange: (event) => onUpdate((current) => ({
+            ...current,
+            "x-om-help": { ...current["x-om-help"] ?? {}, [activeLocale]: event.target.value }
+          }))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      RoleCheckboxList,
+      {
+        legend: t("forms.studio.fields.editableBy"),
+        selected: editableBy,
+        options: roleOptions,
+        onToggle: (role, checked) => toggleRole("x-om-editable-by", ["admin"], role, checked)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RoleCheckboxList,
+      {
+        legend: t("forms.studio.fields.visibleTo"),
+        selected: visibleTo,
+        options: roleOptions,
+        onToggle: (role, checked) => toggleRole("x-om-visible-to", [], role, checked)
+      }
+    ),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(Checkbox, { checked: required, onCheckedChange: (value) => onRequiredChange(Boolean(value)) }),
+      t("forms.studio.fields.required")
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: sensitive,
+          onCheckedChange: (value) => onUpdate((current) => ({ ...current, "x-om-sensitive": Boolean(value) }))
+        }
+      ),
+      t("forms.studio.fields.sensitive")
+    ] }),
+    /* @__PURE__ */ jsx(
+      ValidationPanel,
+      {
+        fieldKey,
+        fieldType: omType,
+        node,
+        locale: activeLocale,
+        onPatternChange: handlePatternChange,
+        onLengthRangeChange: handleLengthRangeChange,
+        onNumberRangeChange: handleNumberRangeChange,
+        onMessageChange: handleMessageChange,
+        onOpinionIconChange: handleOpinionIconChange,
+        onNpsAnchorChange: handleNpsAnchorChange,
+        onRankingExhaustiveChange: handleRankingExhaustiveChange,
+        onMatrixRowsChange: handleMatrixRowsChange,
+        onMatrixColumnsChange: handleMatrixColumnsChange,
+        onFileAcceptChange: handleFileAcceptChange,
+        onFileMaxSizeChange: handleFileMaxSizeChange,
+        onFileMultipleChange: handleFileMultipleChange,
+        onSignatureClauseChange: handleSignatureClauseChange,
+        onSignatureModesChange: handleSignatureModesChange,
+        groupTypeOptions,
+        onGroupAddSubField: handleGroupAddSubField,
+        onGroupRemoveSubField: handleGroupRemoveSubField,
+        onGroupUpdateSubField: handleGroupUpdateSubField,
+        onGroupMinItemsChange: handleGroupMinItemsChange,
+        onGroupMaxItemsChange: handleGroupMaxItemsChange
+      }
+    ),
+    showOptionsEditor ? /* @__PURE__ */ jsx(
+      OptionsEditor,
+      {
+        options: readFieldOptions(node),
+        activeLocale,
+        onChange: handleOptionsChange,
+        t
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(Button, { type: "button", variant: "destructive-outline", onClick: onDelete, children: [
+      /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" }),
+      t("forms.studio.fields.deleteButton")
+    ] })
+  ] });
+}
+function readFieldOptions(node) {
+  const raw = node["x-om-options"];
+  if (!Array.isArray(raw)) return [];
+  return raw.filter(
+    (entry) => Boolean(entry) && typeof entry === "object" && typeof entry.value === "string"
+  ).map((entry) => ({
+    value: entry.value,
+    label: entry.label && typeof entry.label === "object" && !Array.isArray(entry.label) ? { ...entry.label } : { en: entry.value }
+  }));
+}
+function slugOptionValue(label, fallback) {
+  const slug = label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+  return slug || fallback;
+}
+function nextOptionValue(options) {
+  const used = new Set(options.map((option) => option.value));
+  let index = options.length + 1;
+  let candidate = `option_${index}`;
+  while (used.has(candidate)) {
+    index += 1;
+    candidate = `option_${index}`;
+  }
+  return candidate;
+}
+function moveArrayItem(items, from, to) {
+  const next = [...items];
+  const [item] = next.splice(from, 1);
+  if (!item) return items;
+  next.splice(to, 0, item);
+  return next;
+}
+function OptionsEditor({
+  options,
+  activeLocale,
+  onChange,
+  t
+}) {
+  const addOption = React.useCallback(() => {
+    const value = nextOptionValue(options);
+    onChange([...options, { value, label: { [activeLocale]: t("forms.studio.field.options.defaultLabel", { n: String(options.length + 1) }) } }]);
+  }, [onChange, options, t, activeLocale]);
+  const updateOption = React.useCallback((index, patch) => {
+    onChange(options.map((option, optionIndex) => {
+      if (optionIndex !== index) return option;
+      return {
+        ...option,
+        ...patch,
+        label: patch.label ?? option.label
+      };
+    }));
+  }, [onChange, options]);
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2 rounded-md border border-border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase text-muted-foreground", children: t("forms.studio.field.options.heading") }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addOption, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
+        t("forms.studio.field.options.add")
+      ] })
+    ] }),
+    options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.field.options.empty") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: options.map((option, index) => {
+      const label = option.label[activeLocale] ?? "";
+      return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-background p-2", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]", children: [
+        /* @__PURE__ */ jsxs("label", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.field.options.label") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: label,
+              onChange: (event) => {
+                const nextLabel = event.target.value;
+                const currentValue = option.value;
+                const generatedValue = slugOptionValue(nextLabel, currentValue || `option_${index + 1}`);
+                updateOption(index, {
+                  value: currentValue.startsWith("option_") ? generatedValue : currentValue,
+                  label: { ...option.label, [activeLocale]: nextLabel }
+                });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.field.options.value") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: option.value,
+              onChange: (event) => updateOption(index, {
+                value: slugOptionValue(event.target.value, `option_${index + 1}`)
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              disabled: index === 0,
+              "aria-label": t("forms.studio.field.options.moveUp"),
+              onClick: () => onChange(moveArrayItem(options, index, index - 1)),
+              children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              disabled: index >= options.length - 1,
+              "aria-label": t("forms.studio.field.options.moveDown"),
+              onClick: () => onChange(moveArrayItem(options, index, index + 1)),
+              children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              "aria-label": t("forms.studio.field.options.delete"),
+              onClick: () => onChange(options.filter((_, optionIndex) => optionIndex !== index)),
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ] }) }, `${option.value}:${index}`);
+    }) })
+  ] });
+}
+function PublishDialog({ formId, versionId, updatedAt, onClose, onPublished, t }) {
+  const [changelog, setChangelog] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const { runMutation } = useGuardedMutation({ contextId: "forms.form.publish" });
+  const submit = React.useCallback(async () => {
+    if (busy) return;
+    setBusy(true);
+    const call = await runMutation({
+      operation: () => withScopedApiRequestHeaders(
+        buildOptimisticLockHeader(updatedAt),
+        () => apiCall(
+          `/api/forms/${encodeURIComponent(formId)}/versions/${encodeURIComponent(versionId)}/publish`,
+          {
+            method: "POST",
+            body: JSON.stringify({ changelog: changelog.trim() || null })
+          }
+        )
+      ),
+      context: { formId, versionId },
+      mutationPayload: { formId, versionId }
+    });
+    setBusy(false);
+    if (!call.ok) {
+      if (surfaceRecordConflict({ status: call.status, body: call.result }, t)) return;
+      const errPayload = call.result;
+      flash(t(errPayload?.error ?? "forms.errors.internal"), "error");
+      return;
+    }
+    onPublished();
+  }, [busy, changelog, formId, onPublished, runMutation, t, updatedAt, versionId]);
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      onKeyDown: (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+          event.preventDefault();
+          void submit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("forms.version.publish.title") }) }),
+        /* @__PURE__ */ jsx(Alert, { status: "warning", style: "light", children: t("forms.version.publish.reassurance") }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "forms-publish-changelog", className: "mb-1 block text-sm font-medium", children: t("forms.version.publish.changelog") }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "forms-publish-changelog",
+              rows: 4,
+              value: changelog,
+              placeholder: t("forms.version.publish.changelogPlaceholder"),
+              onChange: (event) => setChangelog(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.version.publish.blastRadius") }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onClose, disabled: busy, children: t("forms.version.publish.actions.cancel") }),
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => void submit(), disabled: busy, children: t("forms.version.publish.actions.confirm") })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  FormStudio
+};
+//# sourceMappingURL=FormStudio.js.map