@evanschleret/formforgeclient 1.2.3 → 2.0.0

package/dist/runtime/renderers/default/FormForgeBuilder.vue

@@ -1,18 +1,24 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "#imports";
+import { computed, nextTick, ref, watch } from "#imports";
+import { parseDate, parseTime } from "@internationalized/date";
 import { useOverlay } from "@nuxt/ui/composables/useOverlay";
 import { useToast } from "@nuxt/ui/composables/useToast";
 import Draggable from "vuedraggable";
 import {
-  FORM_FORGE_BUILDER_CONDITION_ACTIONS,
-  FORM_FORGE_BUILDER_CONDITION_MATCHES,
-  FORM_FORGE_BUILDER_CONDITION_OPERATORS,
   FORM_FORGE_BUILDER_FIELD_TYPES,
   useFormForgeBuilder
 } from "../../composables/useFormForgeBuilder";
 import { useFormForgeCategory, useFormForgeCategoryOptions } from "../../composables/useFormForgeCategory";
 import { useFormForgeI18n } from "../../composables/useFormForgeI18n";
+import {
+  createDefaultAddressFields,
+  resolveDefaultConsentLabel
+} from "../../utils/defaults";
+import {
+  ensurePageLogic
+} from "../../utils/page-logic";
 import FormForgeCategoryCreateModal from "./FormForgeCategoryCreateModal.vue";
+import FormForgeBuilderBlockCard from "./builder/FormForgeBuilderBlockCard.vue";
 const props = defineProps({
   formUuid: { type: String, required: false, default: void 0 },
   formKey: { type: String, required: false, default: void 0 },
@@ -29,24 +35,29 @@ const props = defineProps({
   disableTitleInput: { type: Boolean, required: false, default: false },
   disableCategoryControl: { type: Boolean, required: false, default: false },
   disablePublishAction: { type: Boolean, required: false, default: false },
-  defaultPublished: { type: Boolean, required: false, default: false }
+  disableSettingsTab: { type: Boolean, required: false, default: false },
+  hideSettings: { type: Boolean, required: false, default: false },
+  autoPublishOnSave: { type: Boolean, required: false, default: false },
+  defaultPublished: { type: Boolean, required: false, default: false },
+  standalone: { type: Boolean, required: false, default: false }
 });
-const emit = defineEmits(["update:modelValue", "save", "publish", "unpublish", "error"]);
+const emit = defineEmits(["update:modelValue", "save", "publish", "unpublish", "error", "selection-change"]);
 const builderOptions = {
   formUuid: props.formUuid,
   formKey: props.formKey,
   endpoint: props.endpoint,
+  locale: props.locale,
   initial: props.modelValue,
   autosave: props.autosave,
-  autosaveDelay: props.autosaveDelay
+  autosaveDelay: props.autosaveDelay,
+  autoPublishOnSave: props.autoPublishOnSave
 };
 const builder = useFormForgeBuilder(builderOptions);
-const { t } = useFormForgeI18n({
+const { t, locale } = useFormForgeI18n({
   locale: () => props.locale
 });
 const toast = useToast();
 const draft = builder.draft;
-const isClientReady = ref(false);
 const saving = builder.saving;
 const publishing = builder.publishing;
 const publishable = builder.publishable;
@@ -66,14 +77,10 @@ const categoryOptions = useFormForgeCategoryOptions({
   includeInactive: true
 });
 const CATEGORY_NONE_VALUE = "__formforge_no_category__";
-const fieldElements = /* @__PURE__ */ new Map();
-const builderRootElement = ref(null);
-const builderColumnElement = ref(null);
-const railTop = ref(120);
-const railLeft = ref(0);
 const loadingRemoteForm = ref(false);
 const isPublished = ref(props.defaultPublished);
 let loadRequestId = 0;
+const settingsHidden = computed(() => props.hideSettings || props.disableSettingsTab);
 const safePages = computed(() => {
   const pages = draft.value?.pages;
   if (!Array.isArray(pages)) {
@@ -81,13 +88,6 @@ const safePages = computed(() => {
   }
   return pages.filter((page) => page !== void 0 && page !== null);
 });
-const safeConditions = computed(() => {
-  const conditions = draft.value?.conditions;
-  if (!Array.isArray(conditions)) {
-    return [];
-  }
-  return conditions.filter((condition) => condition !== void 0 && condition !== null);
-});
 const draftTitle = computed({
   get() {
     return typeof draft.value?.title === "string" ? draft.value.title : "";
@@ -153,8 +153,8 @@ const draftMutationIdentifier = computed(() => {
   }
   return null;
 });
-const showTopControls = computed(() => {
-  return !props.disableTitleInput || !props.disableCategoryControl;
+const builderLayoutClass = computed(() => {
+  return props.standalone ? "grid gap-4" : "grid gap-4 lg:grid-cols-[minmax(0,1fr)_4rem]";
 });
 function twoDigits(value) {
   return String(value).padStart(2, "0");
@@ -181,6 +181,239 @@ const formattedLastSavedAt = computed(() => {
   const minutes = twoDigits(parsed.getMinutes());
   return `${day}.${month}.${year} \xE0 ${hours}:${minutes}`;
 });
+function parseDateTimeValue(value) {
+  if (typeof value !== "string" || value.trim() === "") {
+    return {
+      date: null,
+      time: null
+    };
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return {
+      date: null,
+      time: null
+    };
+  }
+  return {
+    date: parseDate([
+      parsed.getFullYear(),
+      twoDigits(parsed.getMonth() + 1),
+      twoDigits(parsed.getDate())
+    ].join("-")),
+    time: parseTime([
+      twoDigits(parsed.getHours()),
+      twoDigits(parsed.getMinutes()),
+      twoDigits(parsed.getSeconds())
+    ].join(":"))
+  };
+}
+function serializeDateTimeValue(date, time) {
+  if (date === null) {
+    return null;
+  }
+  const year = date.year;
+  const month = twoDigits(date.month);
+  const day = twoDigits(date.day);
+  const hours = time !== null ? twoDigits(time.hour) : "00";
+  const minutes = time !== null ? twoDigits(time.minute) : "00";
+  const seconds = time !== null ? twoDigits(time.second) : "00";
+  return (/* @__PURE__ */ new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}`)).toISOString();
+}
+function currentDateTimeValue() {
+  return (/* @__PURE__ */ new Date()).toISOString();
+}
+const selectedTab = ref("builder");
+const publishAtParts = computed(() => parseDateTimeValue(draft.value?.publish_at));
+const pauseAtParts = computed(() => parseDateTimeValue(draft.value?.pause_at));
+const publishAtDate = computed({
+  get() {
+    return publishAtParts.value.date;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.publish_at = serializeDateTimeValue(value, publishAtParts.value.time);
+  }
+});
+const publishAtTime = computed({
+  get() {
+    return publishAtParts.value.time;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.publish_at = serializeDateTimeValue(publishAtParts.value.date, value);
+  }
+});
+const pauseAtDate = computed({
+  get() {
+    return pauseAtParts.value.date;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.pause_at = serializeDateTimeValue(value, pauseAtParts.value.time);
+  }
+});
+const pauseAtTime = computed({
+  get() {
+    return pauseAtParts.value.time;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.pause_at = serializeDateTimeValue(pauseAtParts.value.date, value);
+  }
+});
+const responseLimitValue = computed({
+  get() {
+    return typeof draft.value?.response_limit === "number" ? draft.value.response_limit : null;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.response_limit = typeof value === "number" && Number.isFinite(value) ? value : null;
+  }
+});
+const openingEnabled = computed({
+  get() {
+    return draft.value?.publish_at !== null && draft.value?.publish_at !== void 0;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    if (value && (draft.value.publish_at === null || draft.value.publish_at === void 0)) {
+      draft.value.publish_at = currentDateTimeValue();
+      return;
+    }
+    if (!value) {
+      draft.value.publish_at = null;
+    }
+  }
+});
+const closingEnabled = computed({
+  get() {
+    return draft.value?.pause_at !== null && draft.value?.pause_at !== void 0;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    if (value && (draft.value.pause_at === null || draft.value.pause_at === void 0)) {
+      draft.value.pause_at = currentDateTimeValue();
+      return;
+    }
+    if (!value) {
+      draft.value.pause_at = null;
+    }
+  }
+});
+const responseLimitEnabled = computed({
+  get() {
+    return draft.value?.response_limit !== null && draft.value?.response_limit !== void 0;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    if (value && (draft.value.response_limit === null || draft.value.response_limit === void 0)) {
+      draft.value.response_limit = 1;
+      return;
+    }
+    if (!value) {
+      draft.value.response_limit = null;
+    }
+  }
+});
+const submissionPinEnabled = computed({
+  get() {
+    return draft.value?.submission_code_required === true;
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.submission_code_required = value;
+    if (!value) {
+      draft.value.submission_code = null;
+    }
+  }
+});
+const submissionPinValue = computed({
+  get() {
+    return typeof draft.value?.submission_code === "string" ? draft.value.submission_code : "";
+  },
+  set(value) {
+    if (draft.value === void 0 || draft.value === null) {
+      return;
+    }
+    draft.value.submission_code = value;
+  }
+});
+const publicUrlValue = computed(() => {
+  return typeof draft.value?.public_url === "string" ? draft.value.public_url : "";
+});
+function ensureSubmissionApi() {
+  if (draft.value === void 0 || draft.value === null) {
+    return {};
+  }
+  if (typeof draft.value.api !== "object" || draft.value.api === null || Array.isArray(draft.value.api)) {
+    draft.value.api = {};
+  }
+  const api = draft.value.api;
+  if (typeof api.submission !== "object" || api.submission === null || Array.isArray(api.submission)) {
+    api.submission = {};
+  }
+  return api.submission;
+}
+const submissionIsPublic = computed({
+  get() {
+    const api = draft.value?.api;
+    if (typeof api !== "object" || api === null || Array.isArray(api)) {
+      return true;
+    }
+    const submission = api.submission;
+    if (typeof submission !== "object" || submission === null || Array.isArray(submission)) {
+      return true;
+    }
+    if (typeof submission.public === "boolean") {
+      return submission.public;
+    }
+    if (typeof submission.auth === "string") {
+      return submission.auth === "public";
+    }
+    return true;
+  },
+  set(value) {
+    const submission = ensureSubmissionApi();
+    submission.public = value;
+    submission.auth = value ? "public" : "required";
+  }
+});
+const builderTabs = computed(() => {
+  const items = [
+    {
+      label: "Builder",
+      icon: "i-lucide-layout-grid",
+      slot: "builder"
+    }
+  ];
+  if (!settingsHidden.value) {
+    items.push({
+      label: "Settings",
+      icon: "i-lucide-settings-2",
+      slot: "settings"
+    });
+  }
+  return items;
+});
 const selectedPageKey = ref(safePages.value[0]?.page_key ?? null);
 const selectedFieldKey = ref(safePages.value[0]?.fields[0]?.field_key ?? null);
 const fieldTypeMeta = computed(() => ({
@@ -192,13 +425,13 @@ const fieldTypeMeta = computed(() => ({
   select_menu: { label: t("builder.fieldType.select_menu"), icon: "i-lucide-list-filter" },
   radio: { label: t("builder.fieldType.radio"), icon: "i-lucide-circle-dot" },
   checkbox: { label: t("builder.fieldType.checkbox"), icon: "i-lucide-check-square" },
+  consent: { label: t("builder.fieldType.consent"), icon: "i-lucide-badge-check" },
   checkbox_group: { label: t("builder.fieldType.checkbox_group"), icon: "i-lucide-list-checks" },
+  address: { label: t("builder.fieldType.address"), icon: "i-lucide-house" },
   switch: { label: t("builder.fieldType.switch"), icon: "i-lucide-toggle-left" },
+  temporal: { label: t("builder.fieldType.temporal"), icon: "i-lucide-calendar-clock" },
   date: { label: t("builder.fieldType.date"), icon: "i-lucide-calendar" },
   time: { label: t("builder.fieldType.time"), icon: "i-lucide-clock-3" },
-  datetime: { label: t("builder.fieldType.datetime"), icon: "i-lucide-calendar-clock" },
-  date_range: { label: t("builder.fieldType.date_range"), icon: "i-lucide-calendar-range" },
-  datetime_range: { label: t("builder.fieldType.datetime_range"), icon: "i-lucide-calendar-range" },
   file: { label: t("builder.fieldType.file"), icon: "i-lucide-paperclip" }
 }));
 const fieldTypeItems = computed(() => FORM_FORGE_BUILDER_FIELD_TYPES.map((type) => ({
@@ -206,88 +439,25 @@ const fieldTypeItems = computed(() => FORM_FORGE_BUILDER_FIELD_TYPES.map((type)
   value: type,
   icon: fieldTypeMeta.value[type].icon
 })));
-function conditionActionLabel(action) {
-  const labels = {
-    show: t("builder.condition.action.show"),
-    hide: t("builder.condition.action.hide"),
-    skip: t("builder.condition.action.skip"),
-    require: t("builder.condition.action.require"),
-    disable: t("builder.condition.action.disable")
-  };
-  return labels[action];
+function isChoiceFieldType(type) {
+  return type === "radio" || type === "checkbox_group";
 }
-function conditionMatchLabel(match) {
-  const labels = {
-    all: t("builder.condition.match.all"),
-    any: t("builder.condition.match.any")
+function createChoiceOption(index) {
+  return {
+    label: "",
+    value: `option_${index + 1}`
   };
-  return labels[match];
 }
-function conditionOperatorLabel(operator) {
-  const labels = {
-    eq: t("builder.condition.operator.eq"),
-    neq: t("builder.condition.operator.neq"),
-    in: t("builder.condition.operator.in"),
-    not_in: t("builder.condition.operator.not_in"),
-    gt: t("builder.condition.operator.gt"),
-    gte: t("builder.condition.operator.gte"),
-    lt: t("builder.condition.operator.lt"),
-    lte: t("builder.condition.operator.lte"),
-    contains: t("builder.condition.operator.contains"),
-    not_contains: t("builder.condition.operator.not_contains"),
-    is_empty: t("builder.condition.operator.is_empty"),
-    not_empty: t("builder.condition.operator.not_empty")
-  };
-  return labels[operator];
-}
-const conditionActionItems = computed(() => FORM_FORGE_BUILDER_CONDITION_ACTIONS.map((action) => ({
-  label: conditionActionLabel(action),
-  value: action
-})));
-const conditionMatchItems = computed(() => FORM_FORGE_BUILDER_CONDITION_MATCHES.map((match) => ({
-  label: conditionMatchLabel(match),
-  value: match
-})));
-const conditionOperatorItems = computed(() => FORM_FORGE_BUILDER_CONDITION_OPERATORS.map((operator) => ({
-  label: conditionOperatorLabel(operator),
-  value: operator
-})));
-const targetTypeItems = computed(() => [
-  { label: t("builder.targetType.page"), value: "page" },
-  { label: t("builder.targetType.field"), value: "field" }
-]);
-const pageTargetItems = computed(() => {
-  const items = [];
-  for (const maybePage of safePages.value) {
-    const title = typeof maybePage.title === "string" ? maybePage.title : "";
-    items.push({
-      label: title === "" ? maybePage.page_key : `${title} (${maybePage.page_key})`,
-      value: maybePage.page_key
-    });
+function normalizeLoadedPageLogic(pages) {
+  if (!Array.isArray(pages)) {
+    return;
   }
-  return items;
-});
-const fieldTargetItems = computed(() => {
-  const items = [];
-  for (const maybePage of safePages.value) {
-    if (!Array.isArray(maybePage.fields)) {
+  for (const page of pages) {
+    if (page === void 0 || page === null) {
       continue;
     }
-    for (const maybeField of maybePage.fields) {
-      const label = maybeField.label === void 0 || maybeField.label === "" ? maybeField.field_key : `${maybeField.label} (${maybeField.field_key})`;
-      items.push({
-        label,
-        value: maybeField.field_key
-      });
-    }
-  }
-  return items;
-});
-function selectedPage() {
-  if (selectedPageKey.value === null) {
-    return safePages.value[0];
+    ensurePageLogic(page);
   }
-  return safePages.value.find((page) => page.page_key === selectedPageKey.value) ?? safePages.value[0];
 }
 function syncSelectionWithDraft(pages) {
   if (pages.length === 0) {
@@ -302,123 +472,29 @@ function syncSelectionWithDraft(pages) {
     selectedFieldKey.value = null;
     return;
   }
-  const nextField = selectedFieldKey.value === null ? fields[0] : fields.find((field) => field.field_key === selectedFieldKey.value) ?? fields[0];
-  selectedFieldKey.value = nextField.field_key;
-}
-function resolveHTMLElement(element) {
-  if (element instanceof HTMLElement) {
-    return element;
-  }
-  if (typeof element !== "object" || element === null || !("$el" in element)) {
-    return null;
-  }
-  const componentElement = element.$el;
-  return componentElement instanceof HTMLElement ? componentElement : null;
-}
-function registerFieldElement(fieldKey, element) {
-  const htmlElement = resolveHTMLElement(element);
-  if (htmlElement !== null) {
-    fieldElements.set(fieldKey, htmlElement);
-    if (fieldKey === selectedFieldKey.value) {
-      nextTick(() => {
-        updateRailPosition();
-      });
-    }
-    return;
-  }
-  fieldElements.delete(fieldKey);
-}
-function updateRailPosition() {
-  if (!isClientReady.value || typeof window === "undefined") {
-    return;
-  }
-  const rootElement = builderRootElement.value;
-  if (rootElement === null) {
+  if (selectedFieldKey.value === null) {
     return;
   }
-  const rootRect = rootElement.getBoundingClientRect();
-  const columnRect = builderColumnElement.value?.getBoundingClientRect() ?? rootRect;
-  const selectedElement = selectedFieldKey.value === null ? void 0 : fieldElements.get(selectedFieldKey.value);
-  const selectedRect = selectedElement?.getBoundingClientRect();
-  if (window.innerWidth <= 1024) {
-    railLeft.value = 0;
-    return;
-  }
-  const railWidth = 68;
-  const horizontalGap = 14;
-  const minLeft = 8;
-  const maxLeft = window.innerWidth - railWidth - 8;
-  const horizontalAnchor = selectedRect?.right ?? columnRect.right;
-  const desiredLeft = horizontalAnchor + horizontalGap;
-  railLeft.value = Math.min(Math.max(desiredLeft, minLeft), maxLeft);
-  const railHeight = 122;
-  const minTop = Math.max(88, columnRect.top + 8);
-  const maxTop = Math.max(minTop, Math.min(window.innerHeight - railHeight - 12, columnRect.bottom - railHeight - 8));
-  if (selectedRect === void 0) {
-    railTop.value = minTop;
-    return;
-  }
-  const desiredTop = selectedRect.top + selectedRect.height / 2 - railHeight / 2;
-  railTop.value = Math.min(Math.max(desiredTop, minTop), maxTop);
+  const nextField = fields.find((field) => field.field_key === selectedFieldKey.value) ?? fields[0];
+  selectedFieldKey.value = nextField.field_key;
 }
-onMounted(() => {
-  isClientReady.value = true;
-  window.addEventListener("scroll", updateRailPosition, { passive: true });
-  window.addEventListener("resize", updateRailPosition);
-  nextTick(() => {
-    syncSelectionWithDraft(safePages.value);
-    updateRailPosition();
-  });
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", updateRailPosition);
-  window.removeEventListener("resize", updateRailPosition);
-  fieldElements.clear();
-});
 function selectField(page, fieldKey) {
   selectedPageKey.value = page.page_key;
   selectedFieldKey.value = fieldKey;
-  nextTick(() => {
-    updateRailPosition();
-  });
 }
-function updatePageTitle(page, value) {
+function findPage(pageKey) {
+  return safePages.value.find((page) => page.page_key === pageKey);
+}
+function selectFieldByKey(pageKey, fieldKey) {
+  const page = findPage(pageKey);
   if (page === void 0) {
     return;
   }
-  page.title = value;
-}
-function readPageTitle(page) {
-  if (page === void 0 || page === null) {
-    return "";
+  if (selectedPageKey.value === pageKey && selectedFieldKey.value === fieldKey) {
+    selectedFieldKey.value = null;
+    return;
   }
-  return typeof page.title === "string" ? page.title : "";
-}
-function pageOrder(page) {
-  const index = safePages.value.findIndex((item) => item.page_key === page.page_key);
-  return index < 0 ? 1 : index + 1;
-}
-function canMergeWithPreviousPage(page) {
-  return safePages.value.length > 1 && pageOrder(page) > 1;
-}
-function mergePageWithPrevious(page) {
-  builder.mergePageWithPrevious(page.page_key);
-  nextTick(() => {
-    syncSelectionWithDraft(safePages.value);
-    updateRailPosition();
-  });
-}
-function isFieldSelected(fieldKey) {
-  return selectedFieldKey.value === fieldKey;
-}
-function showInlinePreview(field) {
-  return field.type === "text" || field.type === "textarea" || field.type === "email";
-}
-function fieldTypeLabel(type) {
-  return fieldTypeMeta.value[type]?.label ?? type;
-}
-function fieldTypeIcon(type) {
-  return fieldTypeMeta.value[type]?.icon ?? "i-lucide-square";
+  selectField(page, fieldKey);
 }
 function isUuidLike(value) {
   return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value);
@@ -445,12 +521,21 @@ function applyLoadedForm(schema) {
   draft.value = {
     uuid: nextUuid,
     key: schema.key,
+    schema_version: schema.schema_version ?? 1,
     title: schema.title,
+    publish_at: schema.publish_at ?? null,
+    pause_at: schema.pause_at ?? null,
+    response_limit: schema.response_limit ?? null,
+    submission_code_required: schema.submission_code_required === true,
+    submission_code: null,
+    public_url: schema.public_url ?? null,
     category: schema.category ?? null,
     pages: cloneValue(schema.pages),
     conditions: cloneValue(schema.conditions),
-    drafts: cloneValue(schema.drafts)
+    drafts: cloneValue(schema.drafts),
+    api: cloneValue(schema.api ?? {})
   };
+  normalizeLoadedPageLogic(draft.value.pages);
   isPublished.value = schema.is_published === true;
 }
 async function loadFormIntoBuilder(key, version) {
@@ -464,7 +549,6 @@ async function loadFormIntoBuilder(key, version) {
     applyLoadedForm(schema);
     nextTick(() => {
       syncSelectionWithDraft(safePages.value);
-      updateRailPosition();
     });
   } catch (caughtError) {
     const message = caughtError instanceof Error ? caughtError.message : t("builder.error.loadForm");
@@ -486,22 +570,32 @@ async function loadFormRouteIntoBuilder(routeKey, version) {
   }
   await loadFormIntoBuilder(key, version);
 }
-function addField(page, type) {
-  builder.addField(page.page_key, type);
+function addField(pageKey, type) {
+  builder.addField(pageKey, type);
   builder.normalizeFieldLocations();
-  const nextField = page.fields.at(-1);
-  if (nextField !== void 0) {
+  const page = safePages.value.find((candidate) => candidate.page_key === pageKey);
+  const nextField = page?.fields.at(-1);
+  if (page !== void 0 && nextField !== void 0) {
     selectField(page, nextField.field_key);
   }
 }
 function onFieldTypeChange(field, nextType) {
   field.type = nextType;
-  if (nextType === "select" || nextType === "select_menu" || nextType === "radio" || nextType === "checkbox_group") {
-    if (field.options === void 0) {
-      field.options = [];
+  if (isChoiceFieldType(nextType)) {
+    if (!Array.isArray(field.options) || field.options.length === 0) {
+      field.options = nextType === "checkbox_group" ? [createChoiceOption(0), createChoiceOption(1), createChoiceOption(2)] : [createChoiceOption(0), createChoiceOption(1)];
+    } else if (field.options.length < (nextType === "checkbox_group" ? 2 : 1)) {
+      const minimumOptionCount = nextType === "checkbox_group" ? 2 : 1;
+      const nextOptions = [...field.options];
+      for (let index = nextOptions.length; index < minimumOptionCount; index += 1) {
+        nextOptions.push(createChoiceOption(index));
+      }
+      field.options = nextOptions;
     }
+    field.display = nextType === "radio" || nextType === "checkbox_group" ? "list" : "menu";
   } else {
     field.options = void 0;
+    field.display = void 0;
   }
   if (nextType === "file") {
     field.multiple = false;
@@ -511,54 +605,26 @@ function onFieldTypeChange(field, nextType) {
       });
     }
   }
-}
-function addOption(field) {
-  if (field.options === void 0) {
-    field.options = [];
-  }
-  field.options.push({
-    label: t("builder.optionDefaultLabel"),
-    value: `option_${field.options.length + 1}`
-  });
-}
-function removeOption(field, index) {
-  if (field.options === void 0) {
-    return;
-  }
-  field.options.splice(index, 1);
-}
-function optionLabel(option) {
-  if (option === void 0 || option === null) {
-    return "";
-  }
-  if (typeof option === "object" && "label" in option) {
-    return typeof option.label === "string" ? option.label : "";
+  if (nextType === "consent" && typeof field.consent_label !== "string") {
+    field.consent_label = resolveDefaultConsentLabel(locale.value);
   }
-  return String(option);
-}
-function setOptionLabel(field, optionIndex, value) {
-  if (field.options === void 0) {
-    return;
-  }
-  const option = field.options[optionIndex];
-  if (option === void 0 || option === null) {
-    return;
-  }
-  if (typeof option === "object" && "value" in option) {
-    field.options[optionIndex] = {
-      ...option,
-      label: value
+  if (nextType === "address") {
+    if (!Array.isArray(field.address_fields) || field.address_fields.length === 0) {
+      field.address_fields = createDefaultAddressFields(locale.value);
+    }
+    field.default = {
+      line1: null,
+      line2: null,
+      city: null,
+      state: null,
+      zip: null,
+      country: null
     };
-    return;
   }
-  field.options[optionIndex] = {
-    label: value,
-    value: option
-  };
 }
 async function save() {
   try {
-    const shouldAutoPublish = props.defaultPublished;
+    const shouldAutoPublish = props.defaultPublished || props.autoPublishOnSave;
     await builder.save({
       autoPublish: shouldAutoPublish
     });
@@ -640,12 +706,6 @@ const canTogglePublish = computed(() => {
   }
   return true;
 });
-const toolbarActionsClass = computed(() => {
-  if (showTopControls.value) {
-    return ["builder-toolbar-actions"];
-  }
-  return ["builder-toolbar-actions", "builder-toolbar-actions--compact"];
-});
 async function togglePublishState() {
   if (!props.defaultPublished && isPublished.value) {
     await unpublish();
@@ -659,24 +719,41 @@ function removeField(page, fieldKey) {
     selectedFieldKey.value = null;
   }
 }
-function addQuestionFromRail() {
-  const page = selectedPage();
+function removeFieldByKey(pageKey, fieldKey) {
+  const page = findPage(pageKey);
   if (page === void 0) {
-    builder.addPage();
-    nextTick(() => {
-      syncSelectionWithDraft(safePages.value);
-      updateRailPosition();
-    });
     return;
   }
-  addField(page, "text");
+  removeField(page, fieldKey);
 }
-function addPageFromRail() {
-  builder.addPage();
-  nextTick(() => {
-    syncSelectionWithDraft(safePages.value);
-    updateRailPosition();
-  });
+function duplicateFieldByKey(pageKey, fieldKey) {
+  const page = findPage(pageKey);
+  if (page === void 0) {
+    return;
+  }
+  duplicateField(page, fieldKey);
+}
+function moveFieldByKey(pageKey, fieldKey, direction) {
+  builder.moveField(pageKey, fieldKey, direction);
+}
+function changeFieldTypeByKey(pageKey, fieldKey, nextType) {
+  const page = findPage(pageKey);
+  if (page === void 0) {
+    return;
+  }
+  const field = page.fields.find((item) => item.field_key === fieldKey);
+  if (field === void 0) {
+    return;
+  }
+  onFieldTypeChange(field, nextType);
+}
+function addFieldBelowByKey(pageKey, fieldKey, type) {
+  builder.insertFieldAfter(pageKey, fieldKey, type);
+  builder.normalizeFieldLocations();
+}
+function moveFieldToBlockByKey(pageKey, fieldKey, targetPageKey) {
+  builder.moveFieldToPage(pageKey, fieldKey, targetPageKey);
+  builder.normalizeFieldLocations();
 }
 async function openCategoryCreateModal() {
   if (props.readonly) {
@@ -748,6 +825,11 @@ watch(() => props.autosaveDelay, (value) => {
 }, {
   immediate: true
 });
+watch(() => props.autoPublishOnSave, (value) => {
+  builder.autoPublishOnSave.value = value;
+}, {
+  immediate: true
+});
 watch(() => [props.loadFormKey, props.loadFormVersion], ([key, version]) => {
   if (typeof key !== "string" || key === "") {
     return;
@@ -769,523 +851,392 @@ watch(() => [props.formRouteKey, props.loadFormKey, props.loadFormVersion], ([ro
 });
 watch(() => safePages.value, (pages) => {
   syncSelectionWithDraft(pages);
-  nextTick(() => {
-    updateRailPosition();
-  });
 }, {
   deep: true,
   immediate: true
 });
-watch(() => selectedFieldKey.value, () => {
-  nextTick(() => {
-    updateRailPosition();
-  });
+watch(
+  () => [selectedPageKey.value, selectedFieldKey.value],
+  ([pageKey, fieldKey]) => {
+    emit("selection-change", pageKey, fieldKey);
+  },
+  {
+    immediate: true
+  }
+);
+watch(settingsHidden, (value) => {
+  if (value) {
+    selectedTab.value = "builder";
+  }
+}, {
+  immediate: true
 });
+const builderExpose = {
+  save,
+  publish,
+  unpublish,
+  togglePublishState
+};
+defineExpose(builderExpose);
 </script>
 
 <template>
   <div
-    v-if="isClientReady"
-    ref="builderRootElement"
-    class="builder-root"
+    class="w-full"
   >
-    <div class="builder-layout">
+    <div :class="builderLayoutClass">
       <div
-        ref="builderColumnElement"
-        class="builder-column"
+        class="grid min-w-0 gap-6"
       >
-        <UCard
-          variant="subtle"
-          class="builder-card"
-        >
-          <div class="builder-toolbar">
-            <div
-              v-if="showTopControls"
-              class="builder-toolbar-grid"
-            >
-              <UInput
-                v-if="!disableTitleInput"
-                v-model="draftTitle"
-                :disabled="readonly"
-                :placeholder="t('builder.formTitlePlaceholder')"
-              />
-              <div
-                v-if="!disableCategoryControl"
-                class="builder-category-control"
-              >
-                <USelect
-                  v-model="draftCategorySelectValue"
-                  :items="categorySelectItems"
-                  :disabled="readonly"
-                  :placeholder="t('builder.categoryPlaceholder')"
-                />
-                <UTooltip :text="t('builder.tooltip.addCategory')">
-                  <UButton
-                    color="neutral"
-                    variant="soft"
-                    icon="i-lucide-folder-plus"
-                    :disabled="readonly"
-                    @click="openCategoryCreateModal"
-                  />
-                </UTooltip>
-              </div>
-            </div>
-
-            <div :class="toolbarActionsClass">
-              <div class="builder-status">
-                <span v-if="loadingRemoteForm">{{ t("builder.loadingForm") }}</span>
-                <span v-if="formattedLastSavedAt !== null">{{ t("builder.lastSave", { value: formattedLastSavedAt }) }}</span>
-                <span
-                  v-if="builderError !== null"
-                  class="builder-error"
-                >{{ builderError }}</span>
-              </div>
-
-              <div class="builder-actions">
-                <UButton
-                  :loading="saving"
-                  :disabled="readonly"
-                  @click="save"
-                >
-                  {{ t("builder.save") }}
-                </UButton>
-                <UButton
-                  v-if="!disablePublishAction && !defaultPublished"
-                  :color="publishButtonColor"
-                  :variant="publishButtonVariant"
-                  :loading="publishing"
-                  :disabled="!canTogglePublish"
-                  @click="togglePublishState"
+        <template v-if="!settingsHidden">
+          <UTabs
+            v-model="selectedTab"
+            :items="builderTabs"
+            value-key="slot"
+            class="w-full"
+            :ui="{
+  list: 'w-full',
+  trigger: 'flex-1 justify-center'
+}"
+          >
+            <template #builder>
+              <div class="grid gap-6">
+                <Draggable
+                  v-model="draftPages"
+                  item-key="page_key"
+                  handle=".page-drag-handle"
+                  group="formforge-pages"
+                  class="grid gap-6"
                 >
-                  {{ publishButtonLabel }}
-                </UButton>
+                  <template #item="{ element: page, index }">
+                    <FormForgeBuilderBlockCard
+                      :page="page"
+                      :pages="safePages"
+                      :page-index="index"
+                      :total-pages="safePages.length"
+                      :selected-field-key="selectedFieldKey"
+                      :readonly="readonly"
+                      :field-type-items="fieldTypeItems"
+                      @select-field="selectFieldByKey"
+                      @move-page="builder.movePage"
+                      @duplicate-page="builder.duplicatePage"
+                      @remove-page="builder.removePage"
+                      @add-question="addField"
+                      @move-field="moveFieldByKey"
+                      @duplicate-field="duplicateFieldByKey"
+                      @remove-field="removeFieldByKey"
+                      @change-field-type="changeFieldTypeByKey"
+                      @add-field-below="addFieldBelowByKey"
+                      @move-field-to-block="moveFieldToBlockByKey"
+                    />
+                  </template>
+                </Draggable>
               </div>
-            </div>
-          </div>
-        </UCard>
+            </template>
 
-        <Draggable
-          v-model="draftPages"
-          item-key="page_key"
-          handle=".page-drag-handle"
-          group="formforge-pages"
-          class="builder-stack pages-stack"
-        >
-          <template #item="{ element: page }">
-            <div
-              v-if="page !== void 0 && page !== null"
-              class="page-block"
-            >
-              <UCard
-                variant="soft"
-                class="builder-card page-meta-card"
-              >
-                <div class="page-chip-row">
-                  <UBadge
-                    color="primary"
-                    variant="subtle"
-                  >
-                    {{ t("builder.pageCounter", { current: pageOrder(page), total: safePages.length }) }}
-                  </UBadge>
-                </div>
+            <template #settings>
+              <UCard variant="subtle">
+                <template #header>
+                  <div class="space-y-1">
+                    <p class="text-sm font-semibold text-default">
+                      Settings
+                    </p>
+                    <p class="text-sm text-muted">
+                      Configure the lifecycle, access, and publication settings for this form.
+                    </p>
+                  </div>
+                </template>
 
-                <div class="page-header">
-                  <span class="page-drag-handle drag-handle">⋮⋮</span>
-                  <div class="page-header-main">
+                <div class="space-y-6">
+                  <div
+                    v-if="!disableTitleInput || !disableCategoryControl"
+                    class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)]"
+                  >
                     <UInput
-                      :model-value="readPageTitle(page)"
-                      :disabled="readonly"
-                      class="grow"
-                      :placeholder="t('builder.pageTitlePlaceholder')"
-                      @update:model-value="(value) => updatePageTitle(page, value)"
-                    />
-                    <UTextarea
-                      v-model="page.description"
-                      :rows="2"
+                      v-if="!disableTitleInput"
+                      v-model="draftTitle"
                       :disabled="readonly"
-                      :placeholder="t('builder.pageDescriptionPlaceholder')"
+                      placeholder="Form title"
+                      :ui="{ base: 'w-full' }"
                     />
-                  </div>
-                  <div class="page-actions">
-                    <UTooltip :text="t('builder.tooltip.mergePage')">
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        icon="i-lucide-arrow-up-to-line"
-                        :disabled="readonly || !canMergeWithPreviousPage(page)"
-                        @click="mergePageWithPrevious(page)"
+                    <div
+                      v-if="!disableCategoryControl"
+                      class="flex flex-row items-center gap-2"
+                    >
+                      <USelect
+                        v-model="draftCategorySelectValue"
+                        :items="categorySelectItems"
+                        :disabled="readonly"
+                        placeholder="Category"
+                        :ui="{
+  base: 'w-full'
+}"
                       />
-                    </UTooltip>
-                    <UTooltip :text="t('builder.tooltip.deletePage')">
-                      <UButton
-                        color="neutral"
-                        variant="ghost"
-                        icon="i-lucide-trash-2"
-                        :disabled="readonly || safePages.length <= 1"
-                        @click="builder.removePage(page.page_key)"
+                      <UTooltip :text="t('builder.tooltip.addCategory')">
+                        <UButton
+                          color="neutral"
+                          variant="soft"
+                          icon="i-lucide-folder-plus"
+                          :disabled="readonly"
+                          @click="openCategoryCreateModal"
+                        />
+                      </UTooltip>
+                    </div>
+                  </div>
+
+                  <div class="grid gap-6">
+                    <div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
+                      <div class="space-y-1">
+                        <p class="text-sm font-semibold text-default">
+                          Survey opening
+                        </p>
+                        <p class="text-sm text-muted">
+                          Choose when the form becomes available.
+                        </p>
+                      </div>
+                      <USwitch
+                        v-model="openingEnabled"
+                        :disabled="readonly"
                       />
-                    </UTooltip>
+                    </div>
+
+                    <div
+                      v-if="openingEnabled"
+                      class="grid gap-4 sm:grid-cols-2"
+                    >
+                      <UFormField label="Opening date">
+                        <UInputDate
+                          v-model="publishAtDate"
+                          :disabled="readonly"
+                          :ui="{ base: 'w-full' }"
+                        />
+                      </UFormField>
+                      <UFormField label="Opening time">
+                        <UInputTime
+                          v-model="publishAtTime"
+                          :disabled="readonly"
+                          :hour-cycle="24"
+                          :ui="{ base: 'w-full' }"
+                        />
+                      </UFormField>
+                    </div>
                   </div>
-                </div>
-              </UCard>
 
-              <Draggable
-                v-model="page.fields"
-                item-key="field_key"
-                handle=".field-drag-handle"
-                :group="{ name: 'formforge-fields', pull: true, put: true }"
-                class="builder-stack page-questions-stack"
-              >
-                <template #item="{ element: field }">
-                  <UCard
-                    v-if="field !== void 0 && field !== null"
-                    :ref="(element) => registerFieldElement(field.field_key, element)"
-                    variant="subtle"
-                    :class="[
-  'field-card',
-  isFieldSelected(field.field_key) ? 'field-card--active' : ''
-]"
-                    @click="selectField(page, field.field_key)"
-                    @focusin="selectField(page, field.field_key)"
-                  >
-                    <div class="field-shell">
-                      <div class="field-head">
-                        <span class="field-drag-handle drag-handle">⋮⋮</span>
-                        <UInput
-                          v-model="field.label"
+                  <div class="grid gap-6">
+                    <div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
+                      <div class="space-y-1">
+                        <p class="text-sm font-semibold text-default">
+                          Survey closing
+                        </p>
+                        <p class="text-sm text-muted">
+                          Choose when the form stops accepting responses.
+                        </p>
+                      </div>
+                      <USwitch
+                        v-model="closingEnabled"
+                        :disabled="readonly"
+                      />
+                    </div>
+
+                    <div
+                      v-if="closingEnabled"
+                      class="grid gap-4 sm:grid-cols-2"
+                    >
+                      <UFormField label="Closing date">
+                        <UInputDate
+                          v-model="pauseAtDate"
                           :disabled="readonly"
-                          :placeholder="t('builder.questionPlaceholder')"
+                          :ui="{ base: 'w-full' }"
                         />
-                        <USelectMenu
-                          :model-value="field.type"
-                          :items="fieldTypeItems"
-                          value-key="value"
-                          label-key="label"
-                          :search-input="false"
-                          :leading-icon="fieldTypeIcon(field.type)"
+                      </UFormField>
+                      <UFormField label="Closing time">
+                        <UInputTime
+                          v-model="pauseAtTime"
+                          :disabled="readonly"
+                          :hour-cycle="24"
+                          :ui="{ base: 'w-full' }"
+                        />
+                      </UFormField>
+                    </div>
+                  </div>
+
+                  <div class="grid gap-6">
+                    <div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
+                      <div class="space-y-1">
+                        <p class="text-sm font-semibold text-default">
+                          Submission limit
+                        </p>
+                        <p class="text-sm text-muted">
+                          The form closes automatically after this many responses.
+                        </p>
+                      </div>
+                      <USwitch
+                        v-model="responseLimitEnabled"
+                        :disabled="readonly"
+                      />
+                    </div>
+
+                    <UFormField
+                      v-if="responseLimitEnabled"
+                      label="Maximum responses"
+                    >
+                      <UInputNumber
+                        v-model="responseLimitValue"
+                        :disabled="readonly"
+                        :min="1"
+                        :ui="{ base: 'w-full' }"
+                      />
+                    </UFormField>
+                  </div>
+
+                  <div class="grid gap-6">
+                    <div class="space-y-1">
+                      <p class="text-sm font-semibold text-default">
+                        Access
+                      </p>
+                      <p class="text-sm text-muted">
+                        Control who can submit the form and whether a PIN is required.
+                      </p>
+                    </div>
+
+                    <div class="grid gap-4">
+                      <div class="flex items-start justify-between gap-4">
+                        <div class="space-y-1">
+                          <p class="text-sm font-medium text-default">
+                            Public form
+                          </p>
+                          <p class="text-sm text-muted">
+                            Allow anyone with the link to submit responses.
+                          </p>
+                        </div>
+                        <USwitch
+                          v-model="submissionIsPublic"
                           :disabled="readonly"
-                          @update:model-value="(value) => onFieldTypeChange(field, value)"
                         />
                       </div>
 
-                      <div
-                        v-if="isFieldSelected(field.field_key)"
-                        class="field-controls"
-                      >
-                        <UTooltip :text="t('builder.tooltip.duplicateQuestion')">
-                          <UButton
-                            color="neutral"
-                            variant="ghost"
-                            icon="i-lucide-copy"
-                            :disabled="readonly"
-                            @click.stop="duplicateField(page, field.field_key)"
-                          />
-                        </UTooltip>
-                        <UTooltip :text="t('builder.tooltip.deleteQuestion')">
-                          <UButton
-                            color="error"
-                            variant="ghost"
-                            icon="i-lucide-trash-2"
-                            :disabled="readonly || page.fields.length <= 1"
-                            @click.stop="removeField(page, field.field_key)"
-                          />
-                        </UTooltip>
-                        <div class="field-required-switch">
-                          <span>{{ t("builder.required") }}</span>
-                          <USwitch
-                            v-model="field.required"
-                            :disabled="readonly"
+                      <div v-if="submissionIsPublic">
+                        <UFormField label="Public link">
+                          <UInput
+                            :model-value="publicUrlValue"
+                            disabled
+                            placeholder="Save the form to generate a link"
+                            :ui="{ base: 'w-full' }"
                           />
-                        </div>
+                        </UFormField>
                       </div>
 
-                      <div
-                        v-if="isFieldSelected(field.field_key) && showInlinePreview(field)"
-                        class="field-inline-preview"
-                      >
-                        <p class="field-inline-preview-label">
-                          {{ fieldTypeLabel(field.type) }}
-                        </p>
-                        <div
-                          v-if="field.type === 'textarea'"
-                          class="field-inline-preview-textarea"
-                        >
-                          <span />
-                          <span />
+                      <div class="flex items-start justify-between gap-4 border-t border-muted pt-4">
+                        <div class="space-y-1">
+                          <p class="text-sm font-medium text-default">
+                            PIN protection
+                          </p>
+                          <p class="text-sm text-muted">
+                            Require a PIN before the form can be submitted.
+                          </p>
                         </div>
-                        <div
-                          v-else
-                          class="field-inline-preview-line"
+                        <USwitch
+                          v-model="submissionPinEnabled"
+                          :disabled="readonly"
                         />
                       </div>
 
-                      <div
-                        v-if="isFieldSelected(field.field_key) && (field.type === 'select' || field.type === 'select_menu' || field.type === 'radio' || field.type === 'checkbox_group')"
-                        class="field-options"
-                      >
-                        <div
-                          v-for="(option, optionIndex) in field.options"
-                          :key="optionIndex"
-                          class="field-option-row"
-                        >
+                      <div v-if="submissionPinEnabled">
+                        <UFormField label="PIN">
                           <UInput
-                            :model-value="optionLabel(option)"
-                            :disabled="readonly"
-                            :placeholder="t('builder.optionLabelPlaceholder')"
-                            @update:model-value="(value) => setOptionLabel(field, optionIndex, value)"
-                          />
-                          <UButton
-                            color="neutral"
-                            variant="ghost"
-                            icon="i-lucide-x"
+                            v-model="submissionPinValue"
                             :disabled="readonly"
-                            @click="removeOption(field, optionIndex)"
+                            type="password"
+                            placeholder="Enter PIN"
+                            :ui="{ base: 'w-full' }"
                           />
-                        </div>
-                        <UButton
-                          color="neutral"
-                          variant="soft"
-                          icon="i-lucide-plus"
-                          :disabled="readonly"
-                          @click="addOption(field)"
-                        >
-                          {{ t("builder.addOption") }}
-                        </UButton>
+                        </UFormField>
                       </div>
+                    </div>
+                  </div>
 
-                      <p
-                        v-if="!isFieldSelected(field.field_key)"
-                        class="field-preview"
-                      >
-                        {{ field.placeholder || field.help_text || (field.options?.length ? t("builder.optionsCount", { count: field.options.length }) : fieldTypeLabel(field.type)) }}
-                      </p>
+                  <div class="flex flex-wrap items-center justify-between gap-3 border-t border-muted pt-4">
+                    <div class="flex flex-wrap gap-2 text-sm text-muted">
+                      <span v-if="loadingRemoteForm">{{ t("builder.loadingForm") }}</span>
+                      <span v-if="formattedLastSavedAt !== null">{{ t("builder.lastSave", { value: formattedLastSavedAt }) }}</span>
+                      <span
+                        v-if="builderError !== null"
+                        class="text-error"
+                      >{{ builderError }}</span>
+                    </div>
 
-                      <details
-                        v-if="isFieldSelected(field.field_key)"
-                        class="field-advanced"
+                    <div class="flex flex-wrap items-center gap-2">
+                      <UButton
+                        :loading="saving"
+                        :disabled="readonly"
+                        @click="save"
                       >
-                        <summary class="field-advanced-summary">
-                          {{ t("builder.advancedSettings") }}
-                        </summary>
-
-                        <div class="field-advanced-body">
-                          <div class="field-advanced-grid">
-                            <UInput
-                              v-model="field.placeholder"
-                              :disabled="readonly"
-                              :placeholder="t('builder.placeholderPlaceholder')"
-                            />
-                            <UTextarea
-                              v-model="field.help_text"
-                              :disabled="readonly"
-                              :rows="2"
-                              :placeholder="t('builder.helpTextPlaceholder')"
-                            />
-                          </div>
-
-                          <div
-                            v-if="field.type === 'number'"
-                            class="field-numbers"
-                          >
-                            <UInput
-                              v-model="field.min"
-                              :disabled="readonly"
-                              :placeholder="t('builder.minPlaceholder')"
-                            />
-                            <UInput
-                              v-model="field.max"
-                              :disabled="readonly"
-                              :placeholder="t('builder.maxPlaceholder')"
-                            />
-                            <UInput
-                              v-model="field.step"
-                              :disabled="readonly"
-                              :placeholder="t('builder.stepPlaceholder')"
-                            />
-                          </div>
-
-                          <div
-                            v-if="field.type === 'file'"
-                            class="field-file"
-                          >
-                            <UCheckbox
-                              v-model="field.multiple"
-                              :disabled="readonly"
-                              :label="t('builder.multiple')"
-                            />
-                            <UInput
-                              :model-value="field.accept?.join(',') ?? ''"
-                              :disabled="readonly"
-                              :placeholder="t('builder.acceptedExtensionsPlaceholder')"
-                              @update:model-value="(value) => {
-  field.accept = value.split(',').map((item) => item.trim()).filter((item) => item !== '');
-}"
-                            />
-                          </div>
-                        </div>
-                      </details>
+                        {{ t("builder.save") }}
+                      </UButton>
+                      <UButton
+                        v-if="!disablePublishAction && !defaultPublished"
+                        :color="publishButtonColor"
+                        :variant="publishButtonVariant"
+                        :loading="publishing"
+                        :disabled="!canTogglePublish"
+                        @click="togglePublishState"
+                      >
+                        {{ publishButtonLabel }}
+                      </UButton>
                     </div>
-                  </UCard>
-                </template>
-              </Draggable>
-            </div>
-          </template>
-        </Draggable>
+                  </div>
+                </div>
+              </UCard>
+            </template>
+          </UTabs>
+        </template>
 
-        <UCard
-          variant="subtle"
-          class="builder-card conditions-card"
+        <div
+          v-else
+          class="grid gap-6"
         >
-          <div class="builder-row">
-            <h3 class="conditions-title">
-              {{ t("builder.conditions") }}
-            </h3>
-            <UButton
-              color="neutral"
-              variant="soft"
-              icon="i-lucide-plus"
-              :disabled="readonly"
-              @click="builder.addCondition()"
-            >
-              {{ t("builder.addCondition") }}
-            </UButton>
-          </div>
-
-          <div
-            v-for="condition in safeConditions"
-            :key="condition.condition_key"
-            class="condition-card"
+          <Draggable
+            v-model="draftPages"
+            item-key="page_key"
+            handle=".page-drag-handle"
+            group="formforge-pages"
+            class="grid gap-6"
           >
-            <div class="grid grid-cols-1 gap-2 md:grid-cols-4">
-              <USelect
-                v-model="condition.target_type"
-                :items="targetTypeItems"
-                :disabled="readonly"
+            <template #item="{ element: page, index }">
+              <FormForgeBuilderBlockCard
+                :page="page"
+                :pages="safePages"
+                :page-index="index"
+                :total-pages="safePages.length"
+                :selected-field-key="selectedFieldKey"
+                :readonly="readonly"
+                :field-type-items="fieldTypeItems"
+                @select-field="selectFieldByKey"
+                @move-page="builder.movePage"
+                @duplicate-page="builder.duplicatePage"
+                @remove-page="builder.removePage"
+                @add-question="addField"
+                @move-field="moveFieldByKey"
+                @duplicate-field="duplicateFieldByKey"
+                @remove-field="removeFieldByKey"
+                @change-field-type="changeFieldTypeByKey"
+                @add-field-below="addFieldBelowByKey"
+                @move-field-to-block="moveFieldToBlockByKey"
               />
-              <USelect
-                v-if="condition.target_type === 'page'"
-                v-model="condition.target_key"
-                :items="pageTargetItems"
-                :disabled="readonly"
-              />
-              <USelect
-                v-else
-                v-model="condition.target_key"
-                :items="fieldTargetItems"
-                :disabled="readonly"
-              />
-              <USelect
-                v-model="condition.action"
-                :items="conditionActionItems"
-                :disabled="readonly"
-              />
-              <USelect
-                v-model="condition.match"
-                :items="conditionMatchItems"
-                :disabled="readonly"
-              />
-            </div>
-
-            <div class="space-y-2">
-              <div
-                v-for="(clause, clauseIndex) in condition.when"
-                :key="`${condition.condition_key}-${clauseIndex}`"
-                class="grid grid-cols-1 gap-2 md:grid-cols-[1fr_180px_1fr_auto]"
-              >
-                <USelect
-                  v-model="clause.field_key"
-                  :items="fieldTargetItems"
-                  :disabled="readonly"
-                />
-                <USelect
-                  v-model="clause.operator"
-                  :items="conditionOperatorItems"
-                  :disabled="readonly"
-                />
-                <UInput
-                  v-if="clause.operator !== 'is_empty' && clause.operator !== 'not_empty'"
-                  :model-value="typeof clause.value === 'string' ? clause.value : String(clause.value ?? '')"
-                  :disabled="readonly"
-                  :placeholder="t('builder.valuePlaceholder')"
-                  @update:model-value="(value) => {
-  clause.value = value;
-}"
-                />
-                <div v-else />
-                <UButton
-                  color="neutral"
-                  variant="soft"
-                  :disabled="readonly || condition.when.length <= 1"
-                  @click="builder.removeConditionClause(condition.condition_key, clauseIndex)"
-                >
-                  {{ t("builder.remove") }}
-                </UButton>
-              </div>
-            </div>
-
-            <div class="condition-actions">
-              <UButton
-                color="neutral"
-                variant="soft"
-                :disabled="readonly"
-                @click="builder.addConditionClause(condition.condition_key)"
-              >
-                {{ t("builder.addClause") }}
-              </UButton>
-              <UButton
-                color="error"
-                variant="soft"
-                :disabled="readonly"
-                @click="builder.removeCondition(condition.condition_key)"
-              >
-                {{ t("builder.deleteCondition") }}
-              </UButton>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <aside class="builder-rail-column">
-        <div
-          class="builder-rail"
-          :style="{ top: `${railTop}px`, left: `${railLeft}px` }"
-        >
-          <UTooltip :text="t('builder.rail.addQuestion')">
-            <UButton
-              color="neutral"
-              variant="soft"
-              icon="i-lucide-circle-plus"
-              class="rail-action"
-              :disabled="readonly"
-              @click="addQuestionFromRail"
-            />
-          </UTooltip>
-          <UTooltip :text="t('builder.rail.addPage')">
-            <UButton
-              color="neutral"
-              variant="soft"
-              icon="i-lucide-file-plus-2"
-              class="rail-action"
-              :disabled="readonly"
-              @click="addPageFromRail"
-            />
-          </UTooltip>
+            </template>
+          </Draggable>
         </div>
-      </aside>
+      </div>
     </div>
   </div>
   <div
-    v-else
+    v-if="loadingRemoteForm"
     class="space-y-6"
   >
     <UCard>
-      <div class="text-sm text-muted">
+      <div class="text-sm text-gray-500">
         {{ t("builder.loadingBuilder") }}
       </div>
     </UCard>
   </div>
 </template>
-
-<style scoped>
-.builder-root{width:100%}.builder-layout{align-items:start;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) auto;width:100%}.builder-column{display:grid;gap:1.5rem;min-width:0;width:100%}.builder-card{border-radius:16px}.builder-toolbar{display:grid;gap:1rem}.builder-toolbar-grid{display:grid;gap:.85rem;grid-template-columns:1fr}.builder-category-control{align-items:center;display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr) auto}.builder-toolbar-actions{align-items:center;border-top:1px solid var(--ui-border-muted);display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;padding-top:.85rem}.builder-toolbar-actions--compact{border-top:none;padding-top:0}.builder-status{color:var(--ui-text-muted);font-size:.82rem}.builder-error{color:var(--ui-error);margin-left:.5rem}.builder-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.builder-stack{display:grid;gap:1rem}.pages-stack{gap:2.25rem}.drag-handle{color:var(--ui-text-muted);cursor:grab;padding-top:.4rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.page-block{display:grid;gap:1rem}.page-meta-card{border-radius:16px}.page-chip-row{margin-bottom:.65rem}.page-header{align-items:start;display:grid;gap:.75rem;grid-template-columns:auto minmax(0,1fr) auto}.page-header-main{display:grid;gap:.6rem;min-width:0}.page-actions{align-items:center;display:inline-flex;gap:.25rem}.page-questions-stack{gap:1rem}.field-card{border-left:4px solid transparent;border-radius:14px;cursor:pointer}.field-card--active{border-left-color:var(--ui-primary)}.field-shell{display:grid;gap:.85rem}.field-head{align-items:center;display:grid;gap:.75rem;grid-template-columns:auto minmax(0,1fr) minmax(220px,280px)}.field-controls{align-items:center;display:flex;flex-wrap:wrap;gap:.35rem}.field-required-switch{align-items:center;color:var(--ui-text-toned);display:inline-flex;font-size:.82rem;gap:.5rem;margin-left:auto}.field-preview{color:var(--ui-text-muted);font-size:.84rem;margin:0}.field-inline-preview{background:var(--ui-bg-muted);border-radius:10px;display:grid;gap:.5rem;padding:.75rem}.field-inline-preview-label{color:var(--ui-text-muted);font-size:.8rem;margin:0}.field-inline-preview-line{border-bottom:1px dashed var(--ui-border-accented);height:1.4rem;width:min(32rem,100%)}.field-inline-preview-textarea{display:grid;gap:.5rem;width:min(32rem,100%)}.field-inline-preview-textarea>span{border-bottom:1px dashed var(--ui-border-accented);display:block;height:1.2rem}.field-advanced{border-top:1px solid var(--ui-border-muted);padding-top:.75rem}.field-advanced-summary{color:var(--ui-text-toned);cursor:pointer;font-size:.82rem;font-weight:500}.field-advanced-body{background:var(--ui-bg-elevated);border-radius:12px;display:grid;gap:.75rem;margin-top:.75rem;padding:.75rem}.field-advanced-grid{display:grid;gap:.65rem}.field-toggle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.field-options,.field-toggle-grid{display:grid;gap:.6rem}.field-option-row{align-items:center;display:grid;gap:.45rem;grid-template-columns:minmax(0,1fr) auto}.field-numbers{grid-template-columns:repeat(3,minmax(0,1fr))}.field-file,.field-numbers{display:grid;gap:.55rem}.conditions-card{border-radius:16px}.builder-row{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.conditions-title{font-size:.95rem;font-weight:600}.condition-card{border:1px solid var(--ui-border-muted);border-radius:12px;display:grid;gap:.75rem;padding:.75rem}.condition-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.builder-rail-column{display:flex;justify-content:center;width:4.25rem}.builder-rail{background:var(--ui-bg);border:1px solid var(--ui-border-muted);border-radius:14px;box-shadow:0 8px 24px color-mix(in srgb,var(--ui-text) 8%,transparent);display:flex;flex-direction:column;gap:.5rem;padding:.5rem;position:fixed;transition:top .12s ease,left .12s ease;z-index:20}.rail-action{height:2.75rem;justify-content:center;width:2.75rem}@media (min-width:1024px){.builder-toolbar-grid{grid-template-columns:1.2fr .8fr}}@media (max-width:1024px){.builder-layout{display:block}.builder-rail{bottom:.85rem;flex-direction:row;left:auto!important;position:fixed;right:.85rem;top:auto!important}}@media (max-width:768px){.page-header{grid-template-columns:minmax(0,1fr) auto}.page-drag-handle{display:none}.field-head{grid-template-columns:minmax(0,1fr)}.field-drag-handle{display:none}.field-numbers,.field-toggle-grid{grid-template-columns:1fr}.field-required-switch{margin-left:0}}
-</style>