@btst/plugin-form-builder 0.0.0-stage → 1.0.0

package/dist/client/components/loading/submissions-skeleton.cjs

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../ui/src/components/skeleton.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+
+function SubmissionsSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "submissions-skeleton", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-64" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-32" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-48" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-20" })
+      ] }) }),
+      Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b p-4 last:border-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-48" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-20" })
+      ] }) }, i))
+    ] })
+  ] }) });
+}
+
+exports.SubmissionsSkeleton = SubmissionsSkeleton;

package/dist/client/components/loading/submissions-skeleton.mjs

@@ -0,0 +1,32 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Skeleton } from '../../../ui/src/components/skeleton.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+
+function SubmissionsSkeleton() {
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "submissions-skeleton", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" })
+      ] }) }),
+      Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "border-b p-4 last:border-0", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" })
+      ] }) }, i))
+    ] })
+  ] }) });
+}
+
+export { SubmissionsSkeleton };

package/dist/client/components/pages/404-page.cjs

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../../../ui/src/components/button.cjs');
+const context = require('@btst/stack/context');
+const constants = require('../../constants.cjs');
+
+function NotFoundPage() {
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  const { Link: LinkComponent, resolve } = context.usePluginSiteNavigation(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-6xl font-bold text-muted-foreground mb-4", children: "404" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-medium text-foreground mb-2", children: localization?.FORM_BUILDER_404_TITLE ?? t("formBuilder.common.404Title", "Page not found") }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-6 max-w-sm", children: localization?.FORM_BUILDER_404_DESCRIPTION ?? t(
+      "formBuilder.common.404Description",
+      "The page you're looking for doesn't exist or has been moved."
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: resolve("forms").href, children: localization?.FORM_BUILDER_404_BACK ?? t("formBuilder.common.404Back", "Back to Forms") }) })
+  ] });
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/client/components/pages/404-page.mjs

@@ -0,0 +1,26 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { useTranslate, usePluginOverrides, usePluginSiteNavigation } from '@btst/stack/context';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+
+function NotFoundPage() {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  const { Link: LinkComponent, resolve } = usePluginSiteNavigation(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold text-muted-foreground mb-4", children: "404" }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium text-foreground mb-2", children: localization?.FORM_BUILDER_404_TITLE ?? t("formBuilder.common.404Title", "Page not found") }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6 max-w-sm", children: localization?.FORM_BUILDER_404_DESCRIPTION ?? t(
+      "formBuilder.common.404Description",
+      "The page you're looking for doesn't exist or has been moved."
+    ) }),
+    /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: resolve("forms").href, children: localization?.FORM_BUILDER_404_BACK ?? t("formBuilder.common.404Back", "Back to Forms") }) })
+  ] });
+}
+
+export { NotFoundPage };

package/dist/client/components/pages/form-builder-page.cjs

@@ -0,0 +1,77 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const formBuilderSkeleton = require('../loading/form-builder-skeleton.cjs');
+const _404Page = require('./404-page.cjs');
+const permissions = require('../../../permissions.cjs');
+const constants = require('../../constants.cjs');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
+
+const FormBuilderPage = React.lazy(
+  () => import('./form-builder-page.internal.cjs').then((m) => ({
+    default: m.FormBuilderPage
+  }))
+);
+function FormBuilderPageComponent({ id }) {
+  const { onRouteError } = context.usePluginOverrides(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  const isNew = !id;
+  const path = isNew ? "/forms/new" : `/forms/${id}/edit`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path,
+      PageComponent: AuthorizedFormBuilderPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: formBuilderSkeleton.FormBuilderSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { id },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("formBuilder", error, {
+            path,
+            params: id ? { id } : {},
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+function AuthorizedFormBuilderPage({ id }) {
+  if (!id) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.PermissionRouteAccess,
+      {
+        permission: permissions.formBuilderPermissions.form.create(),
+        LoadingComponent: formBuilderSkeleton.FormBuilderSkeleton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(FormBuilderPage, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthorizedExistingFormBuilderPage, { id });
+}
+function AuthorizedExistingFormBuilderPage({ id }) {
+  const { form } = formBuilderHooks.useSuspenseFormForUpdate(id);
+  if (!form) return /* @__PURE__ */ jsxRuntime.jsx(_404Page.NotFoundPage, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.PermissionRouteAccess,
+    {
+      permission: permissions.formBuilderPermissions.form.update({
+        formId: form.id,
+        ...form.createdBy ? { ownerId: form.createdBy } : {},
+        status: form.status
+      }),
+      LoadingComponent: formBuilderSkeleton.FormBuilderSkeleton,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FormBuilderPage, { id })
+    }
+  );
+}
+
+exports.FormBuilderPageComponent = FormBuilderPageComponent;

package/dist/client/components/pages/form-builder-page.internal.cjs

@@ -0,0 +1,217 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const button = require('../../../ui/src/components/button.cjs');
+const input = require('../../../ui/src/components/input.cjs');
+const label = require('../../../ui/src/components/label.cjs');
+const select = require('../../../ui/src/components/select.cjs');
+const lucideReact = require('lucide-react');
+const index = require('../../../ui/src/components/form-builder/index.cjs');
+const utils = require('../../../utils.cjs');
+const permissions = require('../../../permissions.cjs');
+const _404Page = require('./404-page.cjs');
+const constants = require('../../constants.cjs');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
+
+function FormBuilderPage({ id }) {
+  if (id) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EditFormBuilderPage, { id });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(CreateFormBuilderPage, {});
+}
+function EditFormBuilderPage({ id }) {
+  const { form: existingForm } = formBuilderHooks.useSuspenseFormForUpdate(id);
+  if (!existingForm) return /* @__PURE__ */ jsxRuntime.jsx(_404Page.NotFoundPage, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderPageContent, { id, existingForm });
+}
+function CreateFormBuilderPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderPageContent, {});
+}
+function FormBuilderPageContent({
+  id,
+  existingForm
+}) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization } = context.usePluginOverrides(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  const {
+    Link: LinkComponent,
+    navigate,
+    resolve
+  } = context.usePluginSiteNavigation(constants.FORM_BUILDER_PLUGIN_ID);
+  const [name, setName] = React.useState(existingForm?.name || "");
+  const [slug, setSlug] = React.useState(existingForm?.slug || "");
+  const [status, setStatus] = React.useState(
+    existingForm?.status || "active"
+  );
+  const [schema, setSchema] = React.useState(() => {
+    if (existingForm?.schema) {
+      try {
+        return JSON.parse(existingForm.schema);
+      } catch {
+        return void 0;
+      }
+    }
+    return void 0;
+  });
+  const [autoSlug, setAutoSlug] = React.useState(!id);
+  React.useEffect(() => {
+    if (autoSlug && name) {
+      setSlug(utils.slugify(name));
+    }
+  }, [name, autoSlug]);
+  const handleSchemaChange = React.useCallback((newSchema) => {
+    setSchema(newSchema);
+  }, []);
+  const resourceForm = formBuilderHooks.useFormBuilderForm({
+    action: id ? "edit" : "create",
+    record: id ? existingForm ?? null : null,
+    successMessage: (_result, action) => action === "create" ? localization?.FORM_BUILDER_TOAST_CREATE_SUCCESS ?? t("formBuilder.toasts.createSuccess", "Form created successfully") : localization?.FORM_BUILDER_TOAST_UPDATE_SUCCESS ?? t("formBuilder.toasts.updateSuccess", "Form updated successfully"),
+    errorMessage: (error) => error.statusCode === 409 ? localization?.FORM_BUILDER_TOAST_DUPLICATE_SLUG ?? t(
+      "formBuilder.toasts.duplicateSlug",
+      "A form with this slug already exists"
+    ) : localization?.FORM_BUILDER_TOAST_ERROR ?? t(
+      "formBuilder.toasts.error",
+      "An error occurred. Please try again."
+    ),
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({
+      id: id ?? "",
+      data: {
+        name: values.name,
+        schema: values.schema,
+        status: values.status
+      }
+    }),
+    onSuccess: (result) => {
+      if (!id && result) return navigate("forms", result.id, "edit");
+    }
+  });
+  const handleSave = async () => {
+    if (!name.trim()) {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_NAME_REQUIRED ?? t("formBuilder.toasts.nameRequired", "Name is required")
+      );
+      return;
+    }
+    if (!slug.trim()) {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SLUG_REQUIRED ?? t("formBuilder.toasts.slugRequired", "Slug is required")
+      );
+      return;
+    }
+    if (!schema) {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SCHEMA_REQUIRED ?? t(
+          "formBuilder.toasts.schemaRequired",
+          "Please add at least one field to the form"
+        )
+      );
+      return;
+    }
+    await resourceForm.submit({
+      name,
+      slug,
+      status,
+      schema: JSON.stringify(schema)
+    });
+  };
+  const isSaving = resourceForm.isSubmitting;
+  const fieldError = (field) => {
+    const error = resourceForm.fieldErrors[field];
+    if (!error) return void 0;
+    return Array.isArray(error) ? error[0] : error;
+  };
+  const saveButton = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: handleSave, disabled: isSaving, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "mr-2 h-4 w-4" }),
+    isSaving ? localization?.FORM_BUILDER_STATUS_SAVING ?? t("formBuilder.common.statusSaving", "Saving...") : id ? localization?.FORM_BUILDER_BUTTON_SAVE ?? t("formBuilder.common.buttonSave", "Save") : localization?.FORM_BUILDER_BUTTON_CREATE ?? t("formBuilder.common.buttonCreate", "Create")
+  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: resolve("forms").href, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "form-name", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_NAME ?? t("formBuilder.common.labelName", "Name") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            id: "form-name",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: localization?.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER ?? t("formBuilder.editor.namePlaceholder", "Enter form name"),
+            className: "h-8 w-48"
+          }
+        ),
+        fieldError("name") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: fieldError("name") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "form-slug", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_SLUG ?? t("formBuilder.common.labelSlug", "Slug") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            id: "form-slug",
+            value: slug,
+            onChange: (e) => {
+              setSlug(e.target.value);
+              setAutoSlug(false);
+            },
+            placeholder: localization?.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER ?? t("formBuilder.editor.slugPlaceholder", "enter-form-slug"),
+            className: "h-8 w-48 font-mono text-sm",
+            disabled: !!id
+          }
+        ),
+        fieldError("slug") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: fieldError("slug") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          label.Label,
+          {
+            htmlFor: "form-status",
+            className: "text-xs text-muted-foreground",
+            children: localization?.FORM_BUILDER_LABEL_STATUS ?? t("formBuilder.common.labelStatus", "Status")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          select.Select,
+          {
+            value: status,
+            onValueChange: (v) => setStatus(v),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "h-8 w-28", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "active", children: localization?.FORM_BUILDER_STATUS_ACTIVE ?? t("formBuilder.common.statusActive", "Active") }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "inactive", children: localization?.FORM_BUILDER_STATUS_INACTIVE ?? t("formBuilder.common.statusInactive", "Inactive") }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "archived", children: localization?.FORM_BUILDER_STATUS_ARCHIVED ?? t("formBuilder.common.statusArchived", "Archived") })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      id && existingForm ? /* @__PURE__ */ jsxRuntime.jsx(
+        context.PermissionAccess,
+        {
+          permission: permissions.formBuilderPermissions.form.update({
+            formId: existingForm.id,
+            ...existingForm.createdBy ? { ownerId: existingForm.createdBy } : {},
+            status: existingForm.status
+          }),
+          children: saveButton
+        }
+      ) : !id ? /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: permissions.formBuilderPermissions.form.create(), children: saveButton }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.FormBuilder,
+      {
+        value: schema,
+        onChange: handleSchemaChange,
+        className: "flex-1"
+      }
+    )
+  ] });
+}
+
+exports.FormBuilderPage = FormBuilderPage;

package/dist/client/components/pages/form-builder-page.internal.mjs

@@ -0,0 +1,215 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslate, useNotify, usePluginOverrides, usePluginSiteNavigation, PermissionAccess } from '@btst/stack/context';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { Input } from '../../../ui/src/components/input.mjs';
+import { Label } from '../../../ui/src/components/label.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../ui/src/components/select.mjs';
+import { Save, ArrowLeft } from 'lucide-react';
+import { FormBuilder } from '../../../ui/src/components/form-builder/index.mjs';
+import { slugify } from '../../../utils.mjs';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { NotFoundPage } from './404-page.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { useSuspenseFormForUpdate, useFormBuilderForm } from '../../hooks/form-builder-hooks.mjs';
+
+function FormBuilderPage({ id }) {
+  if (id) {
+    return /* @__PURE__ */ jsx(EditFormBuilderPage, { id });
+  }
+  return /* @__PURE__ */ jsx(CreateFormBuilderPage, {});
+}
+function EditFormBuilderPage({ id }) {
+  const { form: existingForm } = useSuspenseFormForUpdate(id);
+  if (!existingForm) return /* @__PURE__ */ jsx(NotFoundPage, {});
+  return /* @__PURE__ */ jsx(FormBuilderPageContent, { id, existingForm });
+}
+function CreateFormBuilderPage() {
+  return /* @__PURE__ */ jsx(FormBuilderPageContent, {});
+}
+function FormBuilderPageContent({
+  id,
+  existingForm
+}) {
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  const {
+    Link: LinkComponent,
+    navigate,
+    resolve
+  } = usePluginSiteNavigation(FORM_BUILDER_PLUGIN_ID);
+  const [name, setName] = useState(existingForm?.name || "");
+  const [slug, setSlug] = useState(existingForm?.slug || "");
+  const [status, setStatus] = useState(
+    existingForm?.status || "active"
+  );
+  const [schema, setSchema] = useState(() => {
+    if (existingForm?.schema) {
+      try {
+        return JSON.parse(existingForm.schema);
+      } catch {
+        return void 0;
+      }
+    }
+    return void 0;
+  });
+  const [autoSlug, setAutoSlug] = useState(!id);
+  useEffect(() => {
+    if (autoSlug && name) {
+      setSlug(slugify(name));
+    }
+  }, [name, autoSlug]);
+  const handleSchemaChange = useCallback((newSchema) => {
+    setSchema(newSchema);
+  }, []);
+  const resourceForm = useFormBuilderForm({
+    action: id ? "edit" : "create",
+    record: id ? existingForm ?? null : null,
+    successMessage: (_result, action) => action === "create" ? localization?.FORM_BUILDER_TOAST_CREATE_SUCCESS ?? t("formBuilder.toasts.createSuccess", "Form created successfully") : localization?.FORM_BUILDER_TOAST_UPDATE_SUCCESS ?? t("formBuilder.toasts.updateSuccess", "Form updated successfully"),
+    errorMessage: (error) => error.statusCode === 409 ? localization?.FORM_BUILDER_TOAST_DUPLICATE_SLUG ?? t(
+      "formBuilder.toasts.duplicateSlug",
+      "A form with this slug already exists"
+    ) : localization?.FORM_BUILDER_TOAST_ERROR ?? t(
+      "formBuilder.toasts.error",
+      "An error occurred. Please try again."
+    ),
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({
+      id: id ?? "",
+      data: {
+        name: values.name,
+        schema: values.schema,
+        status: values.status
+      }
+    }),
+    onSuccess: (result) => {
+      if (!id && result) return navigate("forms", result.id, "edit");
+    }
+  });
+  const handleSave = async () => {
+    if (!name.trim()) {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_NAME_REQUIRED ?? t("formBuilder.toasts.nameRequired", "Name is required")
+      );
+      return;
+    }
+    if (!slug.trim()) {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SLUG_REQUIRED ?? t("formBuilder.toasts.slugRequired", "Slug is required")
+      );
+      return;
+    }
+    if (!schema) {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SCHEMA_REQUIRED ?? t(
+          "formBuilder.toasts.schemaRequired",
+          "Please add at least one field to the form"
+        )
+      );
+      return;
+    }
+    await resourceForm.submit({
+      name,
+      slug,
+      status,
+      schema: JSON.stringify(schema)
+    });
+  };
+  const isSaving = resourceForm.isSubmitting;
+  const fieldError = (field) => {
+    const error = resourceForm.fieldErrors[field];
+    if (!error) return void 0;
+    return Array.isArray(error) ? error[0] : error;
+  };
+  const saveButton = /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxs(Button, { onClick: handleSave, disabled: isSaving, children: [
+    /* @__PURE__ */ jsx(Save, { className: "mr-2 h-4 w-4" }),
+    isSaving ? localization?.FORM_BUILDER_STATUS_SAVING ?? t("formBuilder.common.statusSaving", "Saving...") : id ? localization?.FORM_BUILDER_BUTTON_SAVE ?? t("formBuilder.common.buttonSave", "Save") : localization?.FORM_BUILDER_BUTTON_CREATE ?? t("formBuilder.common.buttonCreate", "Create")
+  ] }) });
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: resolve("forms").href, children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form-name", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_NAME ?? t("formBuilder.common.labelName", "Name") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "form-name",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: localization?.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER ?? t("formBuilder.editor.namePlaceholder", "Enter form name"),
+            className: "h-8 w-48"
+          }
+        ),
+        fieldError("name") && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: fieldError("name") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form-slug", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_SLUG ?? t("formBuilder.common.labelSlug", "Slug") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "form-slug",
+            value: slug,
+            onChange: (e) => {
+              setSlug(e.target.value);
+              setAutoSlug(false);
+            },
+            placeholder: localization?.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER ?? t("formBuilder.editor.slugPlaceholder", "enter-form-slug"),
+            className: "h-8 w-48 font-mono text-sm",
+            disabled: !!id
+          }
+        ),
+        fieldError("slug") && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: fieldError("slug") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: "form-status",
+            className: "text-xs text-muted-foreground",
+            children: localization?.FORM_BUILDER_LABEL_STATUS ?? t("formBuilder.common.labelStatus", "Status")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: status,
+            onValueChange: (v) => setStatus(v),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-28", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "active", children: localization?.FORM_BUILDER_STATUS_ACTIVE ?? t("formBuilder.common.statusActive", "Active") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "inactive", children: localization?.FORM_BUILDER_STATUS_INACTIVE ?? t("formBuilder.common.statusInactive", "Inactive") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "archived", children: localization?.FORM_BUILDER_STATUS_ARCHIVED ?? t("formBuilder.common.statusArchived", "Archived") })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      id && existingForm ? /* @__PURE__ */ jsx(
+        PermissionAccess,
+        {
+          permission: formBuilderPermissions.form.update({
+            formId: existingForm.id,
+            ...existingForm.createdBy ? { ownerId: existingForm.createdBy } : {},
+            status: existingForm.status
+          }),
+          children: saveButton
+        }
+      ) : !id ? /* @__PURE__ */ jsx(PermissionAccess, { permission: formBuilderPermissions.form.create(), children: saveButton }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormBuilder,
+      {
+        value: schema,
+        onChange: handleSchemaChange,
+        className: "flex-1"
+      }
+    )
+  ] });
+}
+
+export { FormBuilderPage };