@frigear-nu/forms 0.0.6 → 0.0.8

package/dist/runtime/app/composables/useFormBuilderEditor.d.ts

@@ -0,0 +1,49 @@
+import type { FormDefinition, FormField, FormStep, FieldType } from '../../../types.js';
+import type { FieldPosition } from '../../utils/index.js';
+export type BuilderSelection = {
+    kind: 'field';
+    at: FieldPosition;
+} | {
+    kind: 'step';
+    index: number;
+};
+/**
+ * State and edit actions of the form builder: what is selected, drag and drop reordering and every change to
+ * the definition. All edits go through the `definition` model, so the builder stays a pure v-model component.
+ */
+export declare function useFormBuilderEditor(definition: Ref<FormDefinition>): {
+    selection: any;
+    selectedField: any;
+    selectedStep: any;
+    isSelected: (step: number, index: number) => boolean;
+    isStepSelected: (index: number) => boolean;
+    selectField: (at: FieldPosition) => void;
+    selectStep: (index: number) => void;
+    dragged: any;
+    slot: any;
+    startFieldDrag: (event: DragEvent, from: FieldPosition) => void;
+    startStepDrag: (event: DragEvent, index: number) => void;
+    endDrag: () => void;
+    overField: (event: DragEvent, step: number, index: number) => void;
+    overStepBody: (event: DragEvent, step: number) => void;
+    overStep: (event: DragEvent, index: number) => void;
+    overStepSlot: (event: DragEvent, index: number) => void;
+    drop: (event: DragEvent) => void;
+    isFieldDragged: (step: number, index: number) => boolean;
+    isStepDragged: (index: number) => boolean;
+    showLine: (step: number, index: number) => boolean;
+    showStepLine: (index: number) => boolean;
+    addField: (type: FieldType, at: FieldPosition) => void;
+    addStep: (index?: any) => void;
+    removeAtField: (at: FieldPosition) => void;
+    copyField: (at: FieldPosition) => void;
+    nudge: (at: FieldPosition, delta: -1 | 1) => void;
+    nudgeStep: (index: number, delta: -1 | 1) => void;
+    deleteStep: (index: number) => void;
+    patchField: (patch: Partial<FormField>) => void;
+    renameKey: (key: string) => void;
+    patchStep: (patch: Partial<FormStep>) => void;
+    moveToStep: (step: number) => void;
+    setMode: (mode: FormDefinition["mode"]) => Promise<void>;
+    conditionFields: (step: number, index: number) => any;
+};

package/dist/runtime/app/composables/useFormBuilderEditor.js

@@ -0,0 +1,210 @@
+import {
+  changeMode,
+  createField,
+  createStep,
+  dropIndex,
+  duplicateField,
+  insertField,
+  insertStep,
+  moveField,
+  moveStep,
+  removeField,
+  removeStep,
+  renameFieldKey,
+  updateField,
+  updateStep
+} from "../../utils/index.js";
+import { useConfirmDialog } from "@frigear-nu/ui/composables";
+export function useFormBuilderEditor(definition) {
+  const t = useModuleT("forms");
+  const confirm = useConfirmDialog();
+  const selection = ref();
+  const selectedField = computed(() => selection.value?.kind === "field" ? definition.value.steps[selection.value.at.step]?.fields[selection.value.at.index] : void 0);
+  const selectedStep = computed(() => selection.value?.kind === "step" ? definition.value.steps[selection.value.index] : void 0);
+  watch(definition, () => {
+    if (selection.value && !selectedField.value && !selectedStep.value) selection.value = void 0;
+  });
+  const isSelected = (step, index) => selection.value?.kind === "field" && selection.value.at.step === step && selection.value.at.index === index;
+  const isStepSelected = (index) => selection.value?.kind === "step" && selection.value.index === index;
+  const selectField = (at) => {
+    selection.value = { kind: "field", at };
+  };
+  const selectStep = (index) => {
+    selection.value = { kind: "step", index };
+  };
+  const dragged = ref();
+  const slot = ref();
+  function startFieldDrag(event, from) {
+    startDrag(event, { kind: "field", from });
+  }
+  function startStepDrag(event, index) {
+    startDrag(event, { kind: "step", index });
+  }
+  function startDrag(event, payload) {
+    dragged.value = payload;
+    if (!event.dataTransfer) return;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", payload.kind);
+  }
+  function endDrag() {
+    dragged.value = void 0;
+    slot.value = void 0;
+  }
+  const lowerHalf = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return event.clientY > rect.top + rect.height / 2;
+  };
+  function overField(event, step, index) {
+    if (!dragged.value || dragged.value.kind === "step") return;
+    event.preventDefault();
+    event.stopPropagation();
+    slot.value = { kind: "field", step, index: index + (lowerHalf(event) ? 1 : 0) };
+  }
+  function overStepBody(event, step) {
+    if (!dragged.value || dragged.value.kind === "step") return;
+    event.preventDefault();
+    if (slot.value?.kind !== "field" || slot.value.step !== step) {
+      slot.value = { kind: "field", step, index: definition.value.steps[step]?.fields.length ?? 0 };
+    }
+  }
+  function overStep(event, index) {
+    if (dragged.value?.kind !== "step") return;
+    event.preventDefault();
+    slot.value = { kind: "step", index: index + (lowerHalf(event) ? 1 : 0) };
+  }
+  function overStepSlot(event, index) {
+    if (dragged.value?.kind !== "step") return;
+    event.preventDefault();
+    slot.value = { kind: "step", index };
+  }
+  function drop(event) {
+    event.preventDefault();
+    const from = dragged.value;
+    const to = slot.value;
+    endDrag();
+    if (!from || !to) return;
+    if (from.kind === "step" && to.kind === "step") {
+      definition.value = moveStep(definition.value, from.index, from.index < to.index ? to.index - 1 : to.index);
+      selection.value = void 0;
+    } else if (to.kind === "field" && from.kind === "field") {
+      const target = { step: to.step, index: dropIndex(from.from, to) };
+      definition.value = moveField(definition.value, from.from, target);
+      selection.value = { kind: "field", at: target };
+    }
+  }
+  const isFieldDragged = (step, index) => dragged.value?.kind === "field" && dragged.value.from.step === step && dragged.value.from.index === index;
+  const isStepDragged = (index) => dragged.value?.kind === "step" && dragged.value.index === index;
+  const showLine = (step, index) => slot.value?.kind === "field" && slot.value.step === step && slot.value.index === index;
+  const showStepLine = (index) => slot.value?.kind === "step" && slot.value.index === index;
+  function addField(type, at) {
+    const field = createField(definition.value, type);
+    const next = insertField(definition.value, at, field);
+    definition.value = next;
+    const index = next.steps[at.step]?.fields.findIndex((candidate) => candidate.key === field.key) ?? -1;
+    if (index >= 0) selection.value = { kind: "field", at: { step: at.step, index } };
+  }
+  function addStep(index = definition.value.steps.length) {
+    const next = insertStep(definition.value, index, createStep(definition.value));
+    definition.value = next;
+    selection.value = { kind: "step", index: Math.min(index, next.steps.length - 1) };
+  }
+  function removeAtField(at) {
+    definition.value = removeField(definition.value, at);
+    selection.value = void 0;
+  }
+  function copyField(at) {
+    definition.value = duplicateField(definition.value, at);
+    selection.value = { kind: "field", at: { step: at.step, index: at.index + 1 } };
+  }
+  function nudge(at, delta) {
+    const steps = definition.value.steps;
+    let target = { step: at.step, index: at.index + delta };
+    if (target.index < 0) target = at.step > 0 ? { step: at.step - 1, index: steps[at.step - 1].fields.length } : at;
+    else if (target.index >= steps[at.step].fields.length) {
+      target = at.step < steps.length - 1 ? { step: at.step + 1, index: 0 } : at;
+    }
+    if (target === at) return;
+    definition.value = moveField(definition.value, at, target);
+    selection.value = { kind: "field", at: target };
+  }
+  function nudgeStep(index, delta) {
+    if (index + delta < 0 || index + delta >= definition.value.steps.length) return;
+    definition.value = moveStep(definition.value, index, index + delta);
+    selection.value = { kind: "step", index: index + delta };
+  }
+  function deleteStep(index) {
+    const hasFields = !!definition.value.steps[index]?.fields.length;
+    definition.value = removeStep(definition.value, index, { keepFields: hasFields });
+    selection.value = void 0;
+  }
+  function patchField(patch) {
+    if (selection.value?.kind !== "field") return;
+    definition.value = updateField(definition.value, selection.value.at, patch);
+  }
+  function renameKey(key) {
+    if (selection.value?.kind !== "field") return;
+    definition.value = renameFieldKey(definition.value, selection.value.at, key);
+  }
+  function patchStep(patch) {
+    if (selection.value?.kind !== "step") return;
+    definition.value = updateStep(definition.value, selection.value.index, patch);
+  }
+  function moveToStep(step) {
+    if (selection.value?.kind !== "field" || step === selection.value.at.step) return;
+    const target = { step, index: definition.value.steps[step].fields.length };
+    definition.value = moveField(definition.value, selection.value.at, target);
+    selection.value = { kind: "field", at: target };
+  }
+  async function setMode(mode) {
+    if (mode === definition.value.mode) return;
+    if (mode === "single" && definition.value.steps.length > 1) {
+      const ok = await confirm({
+        title: t("builder.singleConfirmTitle", "Switch to a single page?"),
+        description: t("builder.singleConfirmDescription", "All steps are merged into one page. Step titles, descriptions and step conditions are lost, and switching back to steps will not restore them."),
+        confirmText: t("builder.singleConfirmButton", "Switch to single page")
+      });
+      if (!ok) return;
+    }
+    definition.value = changeMode(definition.value, mode);
+    selection.value = void 0;
+  }
+  function conditionFields(step, index) {
+    return definition.value.steps.flatMap((s, si) => si > step ? [] : s.fields.slice(0, si === step ? index : void 0).filter((f) => f.type !== "markdown" && f.type !== "captcha").map((f) => f.key));
+  }
+  return {
+    selection,
+    selectedField,
+    selectedStep,
+    isSelected,
+    isStepSelected,
+    selectField,
+    selectStep,
+    dragged,
+    slot,
+    startFieldDrag,
+    startStepDrag,
+    endDrag,
+    overField,
+    overStepBody,
+    overStep,
+    overStepSlot,
+    drop,
+    isFieldDragged,
+    isStepDragged,
+    showLine,
+    showStepLine,
+    addField,
+    addStep,
+    removeAtField,
+    copyField,
+    nudge,
+    nudgeStep,
+    deleteStep,
+    patchField,
+    renameKey,
+    patchStep,
+    moveToStep,
+    setMode,
+    conditionFields
+  };
+}

package/dist/runtime/app/composables/useFormBuilderLabels.d.ts

@@ -0,0 +1,8 @@
+import type { FieldType, FormField } from '../../../types.js';
+/** Icon per field type, shown in the builder canvas and the insertion menus. */
+export declare const fieldTypeIcons: Record<FieldType, string>;
+/** Translated field type names and the one-line canvas summary of a field. */
+export declare function useFormBuilderLabels(): {
+    typeLabel: (type: FieldType) => any;
+    summary: (field: FormField) => any;
+};

package/dist/runtime/app/composables/useFormBuilderLabels.js

@@ -0,0 +1,41 @@
+import { translate } from "../../utils/index.js";
+import { useFormsLocale } from "./useForms.js";
+export const fieldTypeIcons = {
+  text: "i-lucide-text-cursor-input",
+  textarea: "i-lucide-align-left",
+  email: "i-lucide-mail",
+  tel: "i-lucide-phone",
+  number: "i-lucide-hash",
+  date: "i-lucide-calendar",
+  select: "i-lucide-list",
+  radio: "i-lucide-circle-dot",
+  checkbox: "i-lucide-square-check",
+  file: "i-lucide-paperclip",
+  markdown: "i-lucide-type",
+  captcha: "i-lucide-shield-check"
+};
+const fieldTypeNames = {
+  text: "Short text",
+  textarea: "Long text",
+  email: "Email",
+  tel: "Phone",
+  number: "Number",
+  date: "Date",
+  select: "Dropdown",
+  radio: "Single choice",
+  checkbox: "Checkbox",
+  file: "File upload",
+  markdown: "Text block",
+  captcha: "Captcha"
+};
+export function useFormBuilderLabels() {
+  const t = useModuleT("forms");
+  const locale = useFormsLocale();
+  const typeLabel = (type) => t(`builder.types.${type}`, fieldTypeNames[type]);
+  const summary = (field) => {
+    const text = translate(field.type === "markdown" ? field.content : field.label, locale.value) || (field.type === "captcha" ? typeLabel("captcha") : field.key);
+    const line = text.replace(/[*_`#>~[]|\]\([^)]*\)/g, "").replace(/\s+/g, " ").trim();
+    return line.length > 80 ? `${line.slice(0, 80).trimEnd()}\u2026` : line;
+  };
+  return { typeLabel, summary };
+}

package/dist/runtime/app/composables/useForms.d.ts

@@ -1,12 +1,21 @@
 import type { FormDefinition, FormField } from '../../../types.js';
 /** Locale for translated form content: `@nuxtjs/i18n`'s when installed, otherwise `en`. */
 export declare function useFormsLocale(): any;
-/** Loads a published form definition by slug. */
-export declare function useForm(slug: MaybeRefOrGetter<string>): any;
+/** Locales content can be translated into: `@nuxtjs/i18n`'s configured locales when installed, otherwise just `en`. */
+export declare function useFormsLocales(): any;
+/** Header carrying the shared password of a password-protected form. */
+export declare const FORM_PASSWORD_HEADER = "x-form-password";
+/** Loads a published form definition by slug; `password` unlocks a password-protected form. */
+export declare function useForm(slug: MaybeRefOrGetter<string>, password?: MaybeRefOrGetter<string | undefined>): any;
+/** Loads what the public page needs to choose between the form, a password/sign-in gate and "not found". */
+export declare function useFormAccess(slug: MaybeRefOrGetter<string>): any;
 /** Initial answers: empty arrays for files, `false` for checkboxes, everything else unset. */
 export declare function emptyAnswers(definition: Pick<FormDefinition, 'steps'>): Record<string, unknown>;
 /** Posts the answers: JSON for forms without files, multipart (answers + `file:<key>` parts) otherwise. */
-export declare function submitAnswers(slug: string, definition: Pick<FormDefinition, 'steps'>, answers: Record<string, unknown>, locale: string): Promise<any>;
+export declare function submitAnswers(slug: string, definition: Pick<FormDefinition, 'steps'>, answers: Record<string, unknown>, locale: string, password?: string): Promise<{
+    ok: true;
+    id: string | null;
+}>;
 declare const DEFAULT_PATHS: {
     readonly form: "/forms/:slug";
     readonly admin: "/admin/forms";
@@ -16,6 +25,12 @@ declare const DEFAULT_PATHS: {
 };
 /** Resolves the (configurable) page paths, filling in params. */
 export declare function useFormsPaths(): (name: keyof typeof DEFAULT_PATHS, params?: Record<string, string>) => string;
+/** Absolute public address of a form and a clipboard copier; `enabled` is false when the form page route is off. */
+export declare function useFormLink(): {
+    enabled: any;
+    url: (slug: string) => string;
+    copy: (slug: string) => Promise<void>;
+};
 /** Label of a field in the given locale, falling back to its key. */
 export declare const fieldLabel: (field: FormField, locale: string) => string;
 export {};

package/dist/runtime/app/composables/useForms.js

@@ -3,8 +3,22 @@ export function useFormsLocale() {
   const nuxtApp = useNuxtApp();
   return computed(() => nuxtApp.$i18n?.locale?.value ?? "en");
 }
-export function useForm(slug) {
-  return useFetch(() => `/api/forms/${toValue(slug)}`, { key: `forms:${toValue(slug)}` });
+export function useFormsLocales() {
+  const nuxtApp = useNuxtApp();
+  return computed(() => {
+    const codes = (nuxtApp.$i18n?.locales?.value ?? []).map((locale) => typeof locale === "string" ? locale : locale.code);
+    return codes.length ? codes : ["en"];
+  });
+}
+export const FORM_PASSWORD_HEADER = "x-form-password";
+export function useForm(slug, password) {
+  return useFetch(() => `/api/forms/${toValue(slug)}`, {
+    key: `forms:${toValue(slug)}${toValue(password) ? ":pw" : ""}`,
+    headers: computed(() => toValue(password) ? { [FORM_PASSWORD_HEADER]: toValue(password) } : void 0)
+  });
+}
+export function useFormAccess(slug) {
+  return useFetch(() => `/api/forms/${toValue(slug)}/access`, { key: `forms:access:${toValue(slug)}` });
 }
 export function emptyAnswers(definition) {
   const state = {};
@@ -17,7 +31,8 @@ export function emptyAnswers(definition) {
   }
   return state;
 }
-export async function submitAnswers(slug, definition, answers, locale) {
+export async function submitAnswers(slug, definition, answers, locale, password) {
+  const headers = password ? { [FORM_PASSWORD_HEADER]: password } : void 0;
   const files = [];
   const plain = {};
   const visible = new Set(resolveVisibility(definition, answers).flatMap((step) => step.fields.map((field) => field.key)));
@@ -30,13 +45,13 @@ export async function submitAnswers(slug, definition, answers, locale) {
     plain[key] = value;
   }
   if (!files.length) {
-    return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body: { answers: plain, locale } });
+    return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body: { answers: plain, locale }, headers });
   }
   const body = new FormData();
   body.append("answers", JSON.stringify(plain));
   body.append("locale", locale);
   for (const { key, file } of files) body.append(`file:${key}`, file, file.name);
-  return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body });
+  return $fetch(`/api/forms/${slug}/submit`, { method: "POST", body, headers });
 }
 const DEFAULT_PATHS = {
   form: "/forms/:slug",
@@ -49,4 +64,22 @@ export function useFormsPaths() {
   const pages = useRuntimeConfig().public.forms?.pages ?? {};
   return (name, params = {}) => Object.entries(params).reduce((path, [key, value]) => path.replace(`:${key}`, encodeURIComponent(value)), pages[name] ?? DEFAULT_PATHS[name]);
 }
+export function useFormLink() {
+  const paths = useFormsPaths();
+  const origin = useRequestURL().origin;
+  const toast = useToast();
+  const t = useModuleT("forms");
+  const pages = useRuntimeConfig().public.forms?.pages;
+  const enabled = computed(() => !!pages?.form);
+  const url = (slug) => `${origin}${paths("form", { slug })}`;
+  async function copy(slug) {
+    try {
+      await navigator.clipboard.writeText(url(slug));
+      toast.add({ title: t("admin.linkCopied", "Link copied."), color: "success" });
+    } catch {
+      toast.add({ title: t("error.generic", "Something went wrong. Please try again."), color: "error" });
+    }
+  }
+  return { enabled, url, copy };
+}
 export const fieldLabel = (field, locale) => translate(field.label, locale) || field.key;

package/dist/runtime/app/pages/admin-form.vue

@@ -4,18 +4,41 @@ const t = useModuleT("forms");
 const route = useRoute();
 const paths = useFormsPaths();
 const toast = useToast();
+const link = useFormLink();
 const id = computed(() => String(route.params.id));
 const { data: form, error, refresh } = await useFetch(() => `/api/forms/admin/forms/${id.value}`);
 const draft = reactive({ name: form.value?.name ?? "", slug: form.value?.slug ?? "", status: form.value?.status ?? "draft" });
-const json = ref(form.value ? JSON.stringify(form.value.definition, null, 2) : "");
-const checked = computed(() => {
+const definition = ref(structuredClone(toRaw(form.value?.definition ?? { mode: "single", storage: "db", steps: [] })));
+const tab = ref("builder");
+const json = ref("");
+const jsonError = ref();
+watch(tab, (next) => {
+  if (next === "json") {
+    json.value = JSON.stringify(definition.value, null, 2);
+    jsonError.value = void 0;
+  }
+}, { immediate: true });
+function onJson(text) {
+  json.value = text;
   try {
-    const result = formDefinitionSchema.safeParse(JSON.parse(json.value));
-    return result.success ? { definition: result.data, issues: [] } : { definition: void 0, issues: result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`) };
+    const result = formDefinitionSchema.safeParse(JSON.parse(text));
+    jsonError.value = void 0;
+    definition.value = result.success ? result.data : JSON.parse(text);
   } catch {
-    return { definition: void 0, issues: [t("admin.invalidJson", "The JSON is not valid.")] };
+    jsonError.value = t("admin.invalidJson", "The JSON is not valid.");
   }
+}
+const checked = computed(() => {
+  if (jsonError.value) return { definition: void 0, issues: [jsonError.value] };
+  const result = formDefinitionSchema.safeParse(definition.value);
+  return result.success ? { definition: result.data, issues: [] } : { definition: void 0, issues: result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`) };
 });
+const tabs = computed(() => [
+  { value: "builder", label: t("admin.builder", "Builder"), icon: "i-lucide-layout-list" },
+  { value: "settings", label: t("admin.settings", "Delivery & storage"), icon: "i-lucide-settings" },
+  { value: "access", label: t("admin.access", "Access"), icon: "i-lucide-lock" },
+  { value: "json", label: t("admin.json", "JSON"), icon: "i-lucide-braces" }
+]);
 const previewKey = ref(0);
 const saving = ref(false);
 const statuses = ["draft", "published", "archived"];
@@ -36,7 +59,7 @@ async function save() {
 </script>
 
 <template>
-  <UContainer class="space-y-6 py-10">
+  <AdminPage>
     <UAlert
       v-if="error || !form"
       color="error"
@@ -45,21 +68,24 @@ async function save() {
     />
 
     <template v-else>
-      <div class="flex flex-wrap items-center justify-between gap-2">
-        <div>
-          <NuxtLink
-            :to="paths('admin')"
-            class="text-sm text-muted hover:underline"
-          >
-            ← {{ t("admin.title", "Forms") }}
-          </NuxtLink>
-          <h1 class="text-3xl font-bold">
-            {{ form.name }} <span class="text-base font-normal text-muted">v{{ form.version }}</span>
-          </h1>
-        </div>
-        <div class="flex gap-2">
+      <AdminPageHeader
+        :title="form.name"
+        :back="{ label: t('admin.title', 'Forms'), to: paths('admin') }"
+      >
+        <template #title>
+          {{ form.name }} <span class="text-base font-normal text-muted">v{{ form.version }}</span>
+        </template>
+        <template #actions>
+          <UButton
+            v-if="form.status === 'published' && link.enabled.value"
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-link"
+            :label="t('admin.copyLink', 'Copy link')"
+            @click="link.copy(form.slug)"
+          />
           <UButton
-            v-if="form.definition.storage === 'db'"
+            v-if="form.definition.storage === 'db' || (form.submissionCount ?? 0) > 0"
             color="neutral"
             variant="outline"
             :to="paths('adminSubmissions', { id: form.id })"
@@ -71,8 +97,8 @@ async function save() {
             :label="t('admin.save', 'Save')"
             @click="save"
           />
-        </div>
-      </div>
+        </template>
+      </AdminPageHeader>
 
       <div class="grid gap-4 sm:grid-cols-3">
         <UFormField :label="t('admin.name', 'Name')">
@@ -96,55 +122,72 @@ async function save() {
         </UFormField>
       </div>
 
-      <div class="grid gap-6 lg:grid-cols-2">
-        <div class="space-y-3">
-          <h2 class="font-semibold">
-            {{ t("admin.definition", "Definition (JSON)") }}
-          </h2>
-          <UTextarea
-            v-model="json"
-            :rows="30"
-            class="w-full font-mono text-xs"
+      <UTabs
+        v-model="tab"
+        :items="tabs"
+        :content="false"
+        class="w-full"
+      />
+
+      <FormBuilder
+        v-if="tab === 'builder'"
+        v-model="definition"
+        :form-id="form.id"
+      >
+        <template #preview>
+          <FormPreview
+            :slug="draft.slug"
+            :name="draft.name"
+            :definition="checked.definition"
+            :content-key="previewKey"
           />
-          <UAlert
-            v-if="checked.issues.length"
-            color="error"
-            variant="subtle"
-            :title="t('admin.invalidDefinition', 'The definition has problems')"
-          >
-            <template #description>
-              <ul class="list-disc pl-4">
-                <li
-                  v-for="issue in checked.issues"
-                  :key="issue"
-                >
-                  {{ issue }}
-                </li>
-              </ul>
-            </template>
-          </UAlert>
-        </div>
+        </template>
+      </FormBuilder>
 
-        <div class="space-y-3">
-          <h2 class="font-semibold">
-            {{ t("admin.preview", "Preview") }}
-          </h2>
-          <div class="rounded-lg border border-default p-6">
-            <FormRenderer
-              v-if="checked.definition"
-              :key="previewKey + json.length"
-              :form="{ slug: draft.slug, definition: checked.definition }"
-              preview
-            />
-            <p
-              v-else
-              class="text-muted"
-            >
-              {{ t("admin.previewUnavailable", "Fix the definition to see a preview.") }}
-            </p>
-          </div>
-        </div>
+      <FormBuilderSettings
+        v-else-if="tab === 'settings'"
+        v-model="definition"
+      />
+
+      <FormBuilderAccess
+        v-else-if="tab === 'access'"
+        v-model="definition"
+        :form-id="form.id"
+        :slug="form.slug"
+      />
+
+      <div
+        v-else-if="tab === 'json'"
+        class="space-y-3"
+      >
+        <h2 class="font-semibold">
+          {{ t("admin.definition", "Definition (JSON)") }}
+        </h2>
+        <UTextarea
+          :model-value="json"
+          :rows="30"
+          class="w-full font-mono text-xs"
+          @update:model-value="onJson(String($event))"
+        />
       </div>
+
+      <UAlert
+        v-if="checked.issues.length"
+        color="error"
+        variant="subtle"
+        :title="t('admin.invalidDefinition', 'The definition has problems')"
+      >
+        <template #description>
+          <ul class="list-disc pl-4">
+            <li
+              v-for="issue in checked.issues"
+              :key="issue"
+            >
+              {{ issue }}
+            </li>
+          </ul>
+        </template>
+      </UAlert>
     </template>
-  </UContainer>
+  </AdminPage>
 </template>