@btst/plugin-form-builder 1.0.0 → 1.2.0-beta.1

package/dist/client/components/forms/media-file-field.mjs

@@ -0,0 +1,46 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFormContext } from 'react-hook-form';
+import { usePluginOverrides } from '@btst/stack/context';
+import { FormItem, FormControl, FormMessage } from '../../../ui/src/components/form.mjs';
+import AutoFormLabel from '../../../ui/src/components/auto-form/common/label.mjs';
+import AutoFormTooltip from '../../../ui/src/components/auto-form/common/tooltip.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+
+function MediaFileField({
+  field,
+  fieldProps,
+  fieldConfigItem,
+  label,
+  isRequired
+}) {
+  const form = useFormContext();
+  const { imageInputField: ImageInput, imagePicker: ImagePicker } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
+  const select = (url) => {
+    if (fieldProps.disabled || form.formState.isSubmitting) return;
+    field.onChange(url);
+    void form.trigger(field.name);
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": fieldConfigItem.label || label,
+        inert: fieldProps.disabled || form.formState.isSubmitting,
+        children: ImageInput ? /* @__PURE__ */ jsx(ImageInput, { value: field.value ?? "", onChange: select }) : ImagePicker ? /* @__PURE__ */ jsx(ImagePicker, { onSelect: select }) : null
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { MediaFileField };

package/dist/client/components/index.d.cts

@@ -1,5 +1,5 @@
 'use client';
-import { F as FormListPageComponent } from '../../shared/plugin-form-builder.DWrQ3lRX.cjs';
+import { F as FormListPageComponent } from '../../shared/plugin-form-builder.sdjcoJcH.cjs';
 import { AutoFormInputComponentProps } from '../index.cjs';
 import * as react from 'react';
 import { ComponentType } from 'react';
@@ -22,6 +22,8 @@ interface SubmissionsPageProps {
 declare function SubmissionsPageComponent({ formId }: SubmissionsPageProps): react.JSX.Element;
 
 interface FormRendererProps {
+    /** Upload a standalone file and return its URL string. */
+    onUpload?: (file: File) => Promise<string>;
     /** Form slug to render */
     slug: string;
     /** Callback when form submission succeeds */
@@ -66,7 +68,7 @@ interface FormRendererProps {
  * />
  * ```
  */
-declare function FormRenderer$1({ slug, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
+declare function FormRenderer$1({ slug, onUpload: propOnUpload, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
 
 declare function FormListSkeleton(): react.JSX.Element;
 

package/dist/client/components/index.d.mts

@@ -1,5 +1,5 @@
 'use client';
-import { F as FormListPageComponent } from '../../shared/plugin-form-builder.DWrQ3lRX.mjs';
+import { F as FormListPageComponent } from '../../shared/plugin-form-builder.sdjcoJcH.mjs';
 import { AutoFormInputComponentProps } from '../index.mjs';
 import * as react from 'react';
 import { ComponentType } from 'react';
@@ -22,6 +22,8 @@ interface SubmissionsPageProps {
 declare function SubmissionsPageComponent({ formId }: SubmissionsPageProps): react.JSX.Element;
 
 interface FormRendererProps {
+    /** Upload a standalone file and return its URL string. */
+    onUpload?: (file: File) => Promise<string>;
     /** Form slug to render */
     slug: string;
     /** Callback when form submission succeeds */
@@ -66,7 +68,7 @@ interface FormRendererProps {
  * />
  * ```
  */
-declare function FormRenderer$1({ slug, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
+declare function FormRenderer$1({ slug, onUpload: propOnUpload, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
 
 declare function FormListSkeleton(): react.JSX.Element;
 

package/dist/client/components/index.d.ts

@@ -1,5 +1,5 @@
 'use client';
-import { F as FormListPageComponent } from '../../shared/plugin-form-builder.DWrQ3lRX.js';
+import { F as FormListPageComponent } from '../../shared/plugin-form-builder.sdjcoJcH.js';
 import { AutoFormInputComponentProps } from '../index.js';
 import * as react from 'react';
 import { ComponentType } from 'react';
@@ -22,6 +22,8 @@ interface SubmissionsPageProps {
 declare function SubmissionsPageComponent({ formId }: SubmissionsPageProps): react.JSX.Element;
 
 interface FormRendererProps {
+    /** Upload a standalone file and return its URL string. */
+    onUpload?: (file: File) => Promise<string>;
     /** Form slug to render */
     slug: string;
     /** Callback when form submission succeeds */
@@ -66,7 +68,7 @@ interface FormRendererProps {
  * />
  * ```
  */
-declare function FormRenderer$1({ slug, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
+declare function FormRenderer$1({ slug, onUpload: propOnUpload, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
 
 declare function FormListSkeleton(): react.JSX.Element;
 

package/dist/client/components/pages/ai-schema.cjs

@@ -0,0 +1,120 @@
+'use strict';
+
+const z = require('zod');
+const schemaConverter = require('../../../ui/src/lib/schema-converter.cjs');
+
+const condition = z.z.object({
+  field: z.z.string().min(1),
+  operator: z.z.enum(["equals", "notEquals", "in", "isTruthy"]),
+  value: z.z.unknown().optional()
+}).refine(
+  (rule) => rule.operator !== "in" || Array.isArray(rule.value),
+  "The in operator needs an array"
+);
+const property = z.z.lazy(
+  () => z.z.object({
+    type: z.z.enum([
+      "string",
+      "number",
+      "integer",
+      "boolean",
+      "object",
+      "array"
+    ]),
+    showIf: condition.optional(),
+    properties: z.z.record(z.z.string(), property).optional(),
+    items: property.optional(),
+    stepGroup: z.z.number().int().nonnegative().optional()
+  }).passthrough()
+);
+const schemaPatch = z.z.object({
+  type: z.z.literal("object"),
+  properties: z.z.record(z.z.string(), property),
+  required: z.z.array(z.z.string()).optional(),
+  steps: z.z.array(
+    z.z.object({
+      id: z.z.string().min(1),
+      title: z.z.string().min(1),
+      showIf: condition.optional()
+    })
+  ).optional(),
+  stepGroupMap: z.z.record(z.z.string(), z.z.number().int().nonnegative()).optional()
+}).passthrough();
+function mergeProperty(current, patch) {
+  const next = { ...current, ...patch };
+  if (patch.properties)
+    next.properties = mergeProperties(current?.properties, patch.properties);
+  if (patch.items && !Array.isArray(patch.items))
+    next.items = mergeProperty(
+      Array.isArray(current?.items) ? void 0 : current?.items,
+      patch.items
+    );
+  return next;
+}
+function mergeProperties(current, patch) {
+  return {
+    ...current,
+    ...Object.fromEntries(
+      Object.entries(patch).map(([key, value]) => [
+        key,
+        mergeProperty(
+          Object.hasOwn(current ?? {}, key) ? current?.[key] : void 0,
+          value
+        )
+      ])
+    )
+  };
+}
+function applyAISchema(current, input) {
+  const args = z.z.object({ schema: z.z.string().min(2).max(2e5) }).strict().parse(input);
+  const patch = schemaPatch.parse(JSON.parse(args.schema));
+  const properties = mergeProperties(current?.properties, patch.properties);
+  const next = { ...current, ...patch, properties };
+  const validate = (fields) => {
+    for (const [key, field] of Object.entries(fields)) {
+      if (["__proto__", "prototype", "constructor"].includes(key))
+        throw new Error("Invalid field name");
+      if (field.showIf && !Object.hasOwn(fields, field.showIf.field))
+        throw new Error("Visibility condition references an unknown field");
+      if (field.properties) validate(field.properties);
+      if (field.items?.properties) validate(field.items.properties);
+    }
+  };
+  validate(properties);
+  if (next.required?.some((key) => !Object.hasOwn(properties, key)))
+    throw new Error("Required references an unknown field");
+  if (next.steps?.some(
+    (step) => step.showIf && !Object.hasOwn(properties, step.showIf.field)
+  ))
+    throw new Error("Step condition references an unknown field");
+  if (new Set(next.steps?.map((step) => step.id)).size !== (next.steps?.length ?? 0))
+    throw new Error("Step IDs must be unique");
+  const stepCount = Math.max(1, next.steps?.length ?? 0);
+  if (Object.keys(next.stepGroupMap ?? {}).some(
+    (field) => !Object.hasOwn(properties, field)
+  ))
+    throw new Error("Step map references an unknown field");
+  if (next.steps?.length || next.stepGroupMap) {
+    const requestedSteps = new Map(Object.entries(patch.stepGroupMap ?? {}));
+    const previousSteps = new Map(Object.entries(current?.stepGroupMap ?? {}));
+    for (const [key, field] of Object.entries(properties)) {
+      const propertyStep = patch.properties[key]?.stepGroup;
+      const mapStep = requestedSteps.get(key);
+      if (propertyStep !== void 0 && mapStep !== void 0 && propertyStep !== mapStep)
+        throw new Error("Conflicting step assignments");
+      properties[key] = {
+        ...field,
+        stepGroup: propertyStep ?? mapStep ?? current?.properties[key]?.stepGroup ?? previousSteps.get(key) ?? 0
+      };
+    }
+    next.stepGroupMap = void 0;
+  }
+  if (Object.values(properties).some(
+    ({ stepGroup }) => stepGroup !== void 0 && (!Number.isInteger(stepGroup) || stepGroup < 0 || stepGroup >= stepCount)
+  ))
+    throw new Error("Field references an unknown step");
+  schemaConverter.formSchemaToZod(next);
+  return next;
+}
+
+exports.applyAISchema = applyAISchema;

package/dist/client/components/pages/ai-schema.mjs

@@ -0,0 +1,118 @@
+import { z } from 'zod';
+import { formSchemaToZod } from '../../../ui/src/lib/schema-converter.mjs';
+
+const condition = z.object({
+  field: z.string().min(1),
+  operator: z.enum(["equals", "notEquals", "in", "isTruthy"]),
+  value: z.unknown().optional()
+}).refine(
+  (rule) => rule.operator !== "in" || Array.isArray(rule.value),
+  "The in operator needs an array"
+);
+const property = z.lazy(
+  () => z.object({
+    type: z.enum([
+      "string",
+      "number",
+      "integer",
+      "boolean",
+      "object",
+      "array"
+    ]),
+    showIf: condition.optional(),
+    properties: z.record(z.string(), property).optional(),
+    items: property.optional(),
+    stepGroup: z.number().int().nonnegative().optional()
+  }).passthrough()
+);
+const schemaPatch = z.object({
+  type: z.literal("object"),
+  properties: z.record(z.string(), property),
+  required: z.array(z.string()).optional(),
+  steps: z.array(
+    z.object({
+      id: z.string().min(1),
+      title: z.string().min(1),
+      showIf: condition.optional()
+    })
+  ).optional(),
+  stepGroupMap: z.record(z.string(), z.number().int().nonnegative()).optional()
+}).passthrough();
+function mergeProperty(current, patch) {
+  const next = { ...current, ...patch };
+  if (patch.properties)
+    next.properties = mergeProperties(current?.properties, patch.properties);
+  if (patch.items && !Array.isArray(patch.items))
+    next.items = mergeProperty(
+      Array.isArray(current?.items) ? void 0 : current?.items,
+      patch.items
+    );
+  return next;
+}
+function mergeProperties(current, patch) {
+  return {
+    ...current,
+    ...Object.fromEntries(
+      Object.entries(patch).map(([key, value]) => [
+        key,
+        mergeProperty(
+          Object.hasOwn(current ?? {}, key) ? current?.[key] : void 0,
+          value
+        )
+      ])
+    )
+  };
+}
+function applyAISchema(current, input) {
+  const args = z.object({ schema: z.string().min(2).max(2e5) }).strict().parse(input);
+  const patch = schemaPatch.parse(JSON.parse(args.schema));
+  const properties = mergeProperties(current?.properties, patch.properties);
+  const next = { ...current, ...patch, properties };
+  const validate = (fields) => {
+    for (const [key, field] of Object.entries(fields)) {
+      if (["__proto__", "prototype", "constructor"].includes(key))
+        throw new Error("Invalid field name");
+      if (field.showIf && !Object.hasOwn(fields, field.showIf.field))
+        throw new Error("Visibility condition references an unknown field");
+      if (field.properties) validate(field.properties);
+      if (field.items?.properties) validate(field.items.properties);
+    }
+  };
+  validate(properties);
+  if (next.required?.some((key) => !Object.hasOwn(properties, key)))
+    throw new Error("Required references an unknown field");
+  if (next.steps?.some(
+    (step) => step.showIf && !Object.hasOwn(properties, step.showIf.field)
+  ))
+    throw new Error("Step condition references an unknown field");
+  if (new Set(next.steps?.map((step) => step.id)).size !== (next.steps?.length ?? 0))
+    throw new Error("Step IDs must be unique");
+  const stepCount = Math.max(1, next.steps?.length ?? 0);
+  if (Object.keys(next.stepGroupMap ?? {}).some(
+    (field) => !Object.hasOwn(properties, field)
+  ))
+    throw new Error("Step map references an unknown field");
+  if (next.steps?.length || next.stepGroupMap) {
+    const requestedSteps = new Map(Object.entries(patch.stepGroupMap ?? {}));
+    const previousSteps = new Map(Object.entries(current?.stepGroupMap ?? {}));
+    for (const [key, field] of Object.entries(properties)) {
+      const propertyStep = patch.properties[key]?.stepGroup;
+      const mapStep = requestedSteps.get(key);
+      if (propertyStep !== void 0 && mapStep !== void 0 && propertyStep !== mapStep)
+        throw new Error("Conflicting step assignments");
+      properties[key] = {
+        ...field,
+        stepGroup: propertyStep ?? mapStep ?? current?.properties[key]?.stepGroup ?? previousSteps.get(key) ?? 0
+      };
+    }
+    next.stepGroupMap = void 0;
+  }
+  if (Object.values(properties).some(
+    ({ stepGroup }) => stepGroup !== void 0 && (!Number.isInteger(stepGroup) || stepGroup < 0 || stepGroup >= stepCount)
+  ))
+    throw new Error("Field references an unknown step");
+  formSchemaToZod(next);
+  return next;
+}
+
+export { applyAISchema };

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

@@ -3,6 +3,8 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
+const pageContext = require('@btst/stack/page-context');
+const aiSchema = require('./ai-schema.cjs');
 const context = require('@btst/stack/context');
 const button = require('../../../ui/src/components/button.cjs');
 const input = require('../../../ui/src/components/input.cjs');
@@ -60,12 +62,16 @@ function FormBuilderPageContent({
     return void 0;
   });
   const [autoSlug, setAutoSlug] = React.useState(!id);
+  const [schemaVersion, setSchemaVersion] = React.useState(0);
+  const schemaRef = React.useRef(schema);
+  schemaRef.current = schema;
   React.useEffect(() => {
     if (autoSlug && name) {
       setSlug(utils.slugify(name));
     }
   }, [name, autoSlug]);
   const handleSchemaChange = React.useCallback((newSchema) => {
+    schemaRef.current = newSchema;
     setSchema(newSchema);
   }, []);
   const resourceForm = formBuilderHooks.useFormBuilderForm({
@@ -122,6 +128,38 @@ function FormBuilderPageContent({
     });
   };
   const isSaving = resourceForm.isSubmitting;
+  pageContext.useRegisterPageAIContext({
+    routeName: "form-builder-editor",
+    pageDescription: JSON.stringify({
+      page: "Visual form draft. Add/edit only requested fields, steps and showIf rules. Do not discard unmentioned fields. The user saves the form.",
+      name,
+      schema
+    }).slice(0, 16e3),
+    clientTools: {
+      updateFormSchema: async (input) => {
+        if (isSaving)
+          return {
+            success: false,
+            message: "Wait for the form save to finish."
+          };
+        try {
+          const next = aiSchema.applyAISchema(schemaRef.current, input);
+          schemaRef.current = next;
+          setSchema(next);
+          setSchemaVersion((value) => value + 1);
+          return {
+            success: true,
+            message: "Form draft updated. Review its fields and conditions before saving."
+          };
+        } catch {
+          return {
+            success: false,
+            message: "Invalid form schema or visibility rules."
+          };
+        }
+      }
+    }
+  });
   const fieldError = (field) => {
     const error = resourceForm.fieldErrors[field];
     if (!error) return void 0;
@@ -209,7 +247,8 @@ function FormBuilderPageContent({
         value: schema,
         onChange: handleSchemaChange,
         className: "flex-1"
-      }
+      },
+      schemaVersion
     )
   ] });
 }

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

@@ -1,6 +1,8 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useRegisterPageAIContext } from '@btst/stack/page-context';
+import { applyAISchema } from './ai-schema.mjs';
 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';
@@ -58,12 +60,16 @@ function FormBuilderPageContent({
     return void 0;
   });
   const [autoSlug, setAutoSlug] = useState(!id);
+  const [schemaVersion, setSchemaVersion] = useState(0);
+  const schemaRef = useRef(schema);
+  schemaRef.current = schema;
   useEffect(() => {
     if (autoSlug && name) {
       setSlug(slugify(name));
     }
   }, [name, autoSlug]);
   const handleSchemaChange = useCallback((newSchema) => {
+    schemaRef.current = newSchema;
     setSchema(newSchema);
   }, []);
   const resourceForm = useFormBuilderForm({
@@ -120,6 +126,38 @@ function FormBuilderPageContent({
     });
   };
   const isSaving = resourceForm.isSubmitting;
+  useRegisterPageAIContext({
+    routeName: "form-builder-editor",
+    pageDescription: JSON.stringify({
+      page: "Visual form draft. Add/edit only requested fields, steps and showIf rules. Do not discard unmentioned fields. The user saves the form.",
+      name,
+      schema
+    }).slice(0, 16e3),
+    clientTools: {
+      updateFormSchema: async (input) => {
+        if (isSaving)
+          return {
+            success: false,
+            message: "Wait for the form save to finish."
+          };
+        try {
+          const next = applyAISchema(schemaRef.current, input);
+          schemaRef.current = next;
+          setSchema(next);
+          setSchemaVersion((value) => value + 1);
+          return {
+            success: true,
+            message: "Form draft updated. Review its fields and conditions before saving."
+          };
+        } catch {
+          return {
+            success: false,
+            message: "Invalid form schema or visibility rules."
+          };
+        }
+      }
+    }
+  });
   const fieldError = (field) => {
     const error = resourceForm.fieldErrors[field];
     if (!error) return void 0;
@@ -207,7 +245,8 @@ function FormBuilderPageContent({
         value: schema,
         onChange: handleSchemaChange,
         className: "flex-1"
-      }
+      },
+      schemaVersion
     )
   ] });
 }

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

@@ -238,6 +238,7 @@ function FormListPage() {
         /* @__PURE__ */ jsxRuntime.jsx(
           pagination.Pagination,
           {
+            page: "formList",
             total,
             showing: forms.length,
             hasMore,

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

@@ -236,6 +236,7 @@ function FormListPage() {
         /* @__PURE__ */ jsx(
           Pagination,
           {
+            page: "formList",
             total,
             showing: forms.length,
             hasMore,

package/dist/client/components/pages/submissions-page.internal.cjs

@@ -26,6 +26,7 @@ function SubmissionsPage({ formId }) {
     constants.FORM_BUILDER_PLUGIN_ID
   );
   const { form, submissions, total, hasMore, isLoadingMore, loadMore } = formBuilderHooks.useSuspenseSubmissions(formId);
+  const exportMutation = formBuilderHooks.useExportSubmissions();
   const deleteMutation = formBuilderHooks.useDeleteSubmission(formId);
   const [deleteId, setDeleteId] = React.useState(null);
   const [viewSubmissionId, setViewSubmissionId] = React.useState(null);
@@ -64,6 +65,44 @@ function SubmissionsPage({ formId }) {
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_SUBTITLE ?? t("formBuilder.submissions.subtitle", "View form submissions") })
         ] })
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        context.PermissionAccess,
+        {
+          permission: permissions.formBuilderPermissions.submission.export({
+            formId,
+            formExists: true,
+            ...form?.createdBy ? { ownerId: form.createdBy } : {}
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              disabled: exportMutation.isPending,
+              onClick: async () => {
+                try {
+                  const { csv, filename } = await exportMutation.mutateAsync(formId);
+                  const url = URL.createObjectURL(
+                    new Blob(["\uFEFF", csv], { type: "text/csv;charset=utf-8" })
+                  );
+                  const anchor = document.createElement("a");
+                  anchor.href = url;
+                  anchor.download = filename;
+                  anchor.click();
+                  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+                } catch (error) {
+                  notify.error(
+                    error instanceof Error && "code" in error && error.code === "FORM_EXPORT_TOO_LARGE" ? error.message : t(
+                      "formBuilder.submissions.exportFailed",
+                      "Export failed. Please try again."
+                    )
+                  );
+                }
+              },
+              children: exportMutation.isPending ? t("formBuilder.submissions.exporting", "Exporting\u2026") : t("formBuilder.submissions.exportCsv", "Export CSV")
+            }
+          )
+        }
+      ),
       submissions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
         emptyState.EmptyState,
         {
@@ -161,6 +200,7 @@ function SubmissionsPage({ formId }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           pagination.Pagination,
           {
+            page: "submissions",
             total,
             showing: submissions.length,
             hasMore,

package/dist/client/components/pages/submissions-page.internal.mjs

@@ -13,7 +13,7 @@ import { Pagination } from '../shared/pagination.mjs';
 import { formBuilderPermissions } from '../../../permissions.mjs';
 import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
 import { cn } from '../../../utils.mjs';
-import { useSuspenseSubmissions, useDeleteSubmission, useSubmission } from '../../hooks/form-builder-hooks.mjs';
+import { useSuspenseSubmissions, useExportSubmissions, useDeleteSubmission, useSubmission } from '../../hooks/form-builder-hooks.mjs';
 
 function SubmissionsPage({ formId }) {
   const t = useTranslate();
@@ -24,6 +24,7 @@ function SubmissionsPage({ formId }) {
     FORM_BUILDER_PLUGIN_ID
   );
   const { form, submissions, total, hasMore, isLoadingMore, loadMore } = useSuspenseSubmissions(formId);
+  const exportMutation = useExportSubmissions();
   const deleteMutation = useDeleteSubmission(formId);
   const [deleteId, setDeleteId] = useState(null);
   const [viewSubmissionId, setViewSubmissionId] = useState(null);
@@ -62,6 +63,44 @@ function SubmissionsPage({ formId }) {
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_SUBTITLE ?? t("formBuilder.submissions.subtitle", "View form submissions") })
         ] })
       ] }),
+      /* @__PURE__ */ jsx(
+        PermissionAccess,
+        {
+          permission: formBuilderPermissions.submission.export({
+            formId,
+            formExists: true,
+            ...form?.createdBy ? { ownerId: form.createdBy } : {}
+          }),
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              disabled: exportMutation.isPending,
+              onClick: async () => {
+                try {
+                  const { csv, filename } = await exportMutation.mutateAsync(formId);
+                  const url = URL.createObjectURL(
+                    new Blob(["\uFEFF", csv], { type: "text/csv;charset=utf-8" })
+                  );
+                  const anchor = document.createElement("a");
+                  anchor.href = url;
+                  anchor.download = filename;
+                  anchor.click();
+                  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+                } catch (error) {
+                  notify.error(
+                    error instanceof Error && "code" in error && error.code === "FORM_EXPORT_TOO_LARGE" ? error.message : t(
+                      "formBuilder.submissions.exportFailed",
+                      "Export failed. Please try again."
+                    )
+                  );
+                }
+              },
+              children: exportMutation.isPending ? t("formBuilder.submissions.exporting", "Exporting\u2026") : t("formBuilder.submissions.exportCsv", "Export CSV")
+            }
+          )
+        }
+      ),
       submissions.length === 0 ? /* @__PURE__ */ jsx(
         EmptyState,
         {
@@ -159,6 +198,7 @@ function SubmissionsPage({ formId }) {
         /* @__PURE__ */ jsx(
           Pagination,
           {
+            page: "submissions",
             total,
             showing: submissions.length,
             hasMore,