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

package/dist/client/components/forms/form-renderer.mjs

@@ -0,0 +1,191 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useTranslate, usePluginOverrides, PermissionAccess } from '@btst/stack/context';
+import { SteppedAutoForm } from '../../../ui/src/components/auto-form/stepped-auto-form.mjs';
+import { buildFieldConfigFromJsonSchema } from '../../../ui/src/components/auto-form/helpers.mjs';
+import { formSchemaToZod } from '../../../ui/src/lib/schema-converter.mjs';
+import { Skeleton } from '../../../ui/src/components/skeleton.mjs';
+import { AlertCircle, CheckCircle } from 'lucide-react';
+import { useFormBySlug, useSubmitForm } from '../../hooks/form-builder-hooks.mjs';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
+
+function DefaultLoadingComponent() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+  ] });
+}
+function DefaultErrorComponent({ error }) {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-destructive/10 p-3 mb-4", children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-6 w-6 text-destructive" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: localization?.FORM_BUILDER_RENDERER_LOAD_FAILED ?? t("formBuilder.renderer.loadFailed", "Failed to load form") }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: error.message || (localization?.FORM_BUILDER_RENDERER_UNEXPECTED_ERROR ?? t(
+      "formBuilder.renderer.unexpectedError",
+      "An unexpected error occurred"
+    )) })
+  ] });
+}
+function DefaultSuccessComponent({ message }) {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-green-100 dark:bg-green-900 p-3 mb-4", children: /* @__PURE__ */ jsx(CheckCircle, { className: "h-6 w-6 text-green-600 dark:text-green-400" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: localization?.FORM_BUILDER_RENDERER_SUBMITTED_TITLE ?? t("formBuilder.renderer.submittedTitle", "Form Submitted") }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-sm", children: message })
+  ] });
+}
+function FormRenderer({
+  slug,
+  onSuccess,
+  onError,
+  fieldComponents: propFieldComponents,
+  successMessage: propSuccessMessage,
+  submitButtonText,
+  LoadingComponent = DefaultLoadingComponent,
+  ErrorComponent = DefaultErrorComponent,
+  className
+}) {
+  const t = useTranslate();
+  const {
+    fieldComponents: overrideFieldComponents,
+    localization,
+    classNames
+  } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
+  const formClassName = cn(className, classNames?.form);
+  const { form, isLoading, error } = useFormBySlug(slug);
+  const submitMutation = useSubmitForm(slug);
+  const [submitted, setSubmitted] = useState(false);
+  const [finalSuccessMessage, setFinalSuccessMessage] = useState(
+    null
+  );
+  const mergedFieldComponents = useMemo(
+    () => ({
+      ...overrideFieldComponents,
+      ...propFieldComponents
+    }),
+    [overrideFieldComponents, propFieldComponents]
+  );
+  const { zodSchema, fieldConfig } = useMemo(() => {
+    if (!form?.schema) {
+      return { zodSchema: null, fieldConfig: {} };
+    }
+    try {
+      const parsedSchema = JSON.parse(form.schema);
+      const zod = formSchemaToZod(parsedSchema);
+      const config = buildFieldConfigFromJsonSchema(
+        parsedSchema,
+        mergedFieldComponents
+      );
+      return { zodSchema: zod, fieldConfig: config };
+    } catch {
+      return { zodSchema: null, fieldConfig: {} };
+    }
+  }, [form?.schema, mergedFieldComponents]);
+  const handleSubmit = async (data) => {
+    try {
+      const result = await submitMutation.mutateAsync({ data });
+      const message = propSuccessMessage || result.form.successMessage || (localization?.FORM_BUILDER_RENDERER_THANK_YOU ?? t("formBuilder.renderer.thankYou", "Thank you for your submission!"));
+      setFinalSuccessMessage(message);
+      setSubmitted(true);
+      onSuccess?.(result);
+      if (result.form.redirectUrl) {
+        window.location.href = result.form.redirectUrl;
+        return;
+      }
+    } catch (err) {
+      onError?.(err);
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(LoadingComponent, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(ErrorComponent, { error }) });
+  }
+  if (!form) {
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(
+      ErrorComponent,
+      {
+        error: new Error(
+          localization?.FORM_BUILDER_RENDERER_NOT_FOUND ?? t("formBuilder.renderer.notFound", "Form not found")
+        )
+      }
+    ) });
+  }
+  if (form.status !== "active") {
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(
+      ErrorComponent,
+      {
+        error: new Error(
+          localization?.FORM_BUILDER_RENDERER_INACTIVE ?? t(
+            "formBuilder.renderer.inactive",
+            "This form is not currently accepting submissions"
+          )
+        )
+      }
+    ) });
+  }
+  if (!zodSchema) {
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(
+      ErrorComponent,
+      {
+        error: new Error(
+          localization?.FORM_BUILDER_RENDERER_SCHEMA_ERROR ?? t(
+            "formBuilder.renderer.schemaError",
+            "Failed to parse form schema"
+          )
+        )
+      }
+    ) });
+  }
+  if (submitted && finalSuccessMessage) {
+    return /* @__PURE__ */ jsx("div", { className: formClassName, children: /* @__PURE__ */ jsx(DefaultSuccessComponent, { message: finalSuccessMessage }) });
+  }
+  return /* @__PURE__ */ jsx(
+    PermissionAccess,
+    {
+      permission: formBuilderPermissions.form.render({
+        slug: form.slug,
+        exists: true,
+        formId: form.id,
+        ...form.createdBy ? { ownerId: form.createdBy } : {},
+        status: form.status
+      }),
+      children: /* @__PURE__ */ jsx(
+        PermissionAccess,
+        {
+          permission: formBuilderPermissions.submission.create({
+            slug: form.slug,
+            exists: true,
+            formId: form.id,
+            ...form.createdBy ? { ownerId: form.createdBy } : {},
+            status: form.status
+          }),
+          children: /* @__PURE__ */ jsx("div", { className: formClassName, "data-testid": "form-renderer", children: /* @__PURE__ */ jsx(
+            SteppedAutoForm,
+            {
+              formSchema: zodSchema,
+              fieldConfig,
+              onSubmit: (values) => handleSubmit(values),
+              isSubmitting: submitMutation.isPending,
+              submitButtonText: submitButtonText || (localization?.FORM_BUILDER_BUTTON_SUBMIT ?? t("formBuilder.common.buttonSubmit", "Submit"))
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+
+export { FormRenderer };

package/dist/client/components/index.cjs

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+const formListPage = require('./pages/form-list-page.cjs');
+const formBuilderPage = require('./pages/form-builder-page.cjs');
+const submissionsPage = require('./pages/submissions-page.cjs');
+const formRenderer = require('./forms/form-renderer.cjs');
+const defaultError = require('./shared/default-error.cjs');
+const emptyState = require('./shared/empty-state.cjs');
+const _404Page = require('./pages/404-page.cjs');
+const formBuilderSkeleton = require('./loading/form-builder-skeleton.cjs');
+const formListSkeleton = require('./loading/form-list-skeleton.cjs');
+const submissionsSkeleton = require('./loading/submissions-skeleton.cjs');
+
+const FormListPage = formListPage.FormListPageComponent;
+const FormBuilderPage = formBuilderPage.FormBuilderPageComponent;
+const SubmissionsPage = submissionsPage.SubmissionsPageComponent;
+const FormRenderer = formRenderer.FormRenderer;
+
+exports.DefaultError = defaultError.DefaultError;
+exports.EmptyState = emptyState.EmptyState;
+exports.NotFoundPage = _404Page.NotFoundPage;
+exports.FormBuilderSkeleton = formBuilderSkeleton.FormBuilderSkeleton;
+exports.FormListSkeleton = formListSkeleton.FormListSkeleton;
+exports.SubmissionsSkeleton = submissionsSkeleton.SubmissionsSkeleton;
+exports.FormBuilderPage = FormBuilderPage;
+exports.FormListPage = FormListPage;
+exports.FormRenderer = FormRenderer;
+exports.SubmissionsPage = SubmissionsPage;

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

@@ -0,0 +1,97 @@
+'use client';
+import { F as FormListPageComponent } from '../../shared/plugin-form-builder.DWrQ3lRX.cjs';
+import { AutoFormInputComponentProps } from '../index.cjs';
+import * as react from 'react';
+import { ComponentType } from 'react';
+import { SerializedFormSubmission } from '../../types.cjs';
+import 'react-hook-form';
+import 'zod';
+import '@btst/stack/plugins/api';
+import '@btst/stack/authorization';
+import '@btst/stack/context';
+import '../../permissions.cjs';
+
+interface FormBuilderPageProps {
+    id?: string;
+}
+declare function FormBuilderPageComponent({ id }: FormBuilderPageProps): react.JSX.Element;
+
+interface SubmissionsPageProps {
+    formId: string;
+}
+declare function SubmissionsPageComponent({ formId }: SubmissionsPageProps): react.JSX.Element;
+
+interface FormRendererProps {
+    /** Form slug to render */
+    slug: string;
+    /** Callback when form submission succeeds */
+    onSuccess?: (submission: SerializedFormSubmission & {
+        form: {
+            successMessage?: string;
+            redirectUrl?: string;
+        };
+    }) => void;
+    /** Callback when form submission fails */
+    onError?: (error: Error) => void;
+    /** Custom field components (same as FormBuilder) */
+    fieldComponents?: Record<string, ComponentType<AutoFormInputComponentProps>>;
+    /** Override success message */
+    successMessage?: React.ReactNode;
+    /** Override submit button text */
+    submitButtonText?: string;
+    /** Custom loading component */
+    LoadingComponent?: ComponentType;
+    /** Custom error component */
+    ErrorComponent?: ComponentType<{
+        error: Error;
+    }>;
+    /** Class name for the form container */
+    className?: string;
+}
+/**
+ * FormRenderer component for rendering forms on the frontend.
+ *
+ * Uses SteppedAutoForm which automatically handles both single-step and multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * <FormRenderer
+ *   slug="contact-form"
+ *   onSuccess={() => {
+ *     toast.success("Thank you!");
+ *   }}
+ *   onError={(error) => {
+ *     toast.error("Something went wrong");
+ *   }}
+ * />
+ * ```
+ */
+declare function FormRenderer$1({ slug, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
+
+declare function FormListSkeleton(): react.JSX.Element;
+
+declare function FormBuilderSkeleton(): react.JSX.Element;
+
+declare function SubmissionsSkeleton(): react.JSX.Element;
+
+interface DefaultErrorProps {
+    error: unknown;
+    resetErrorBoundary?: () => void;
+}
+declare function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps): react.JSX.Element;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ title, description, action }: EmptyStateProps): react.JSX.Element;
+
+declare function NotFoundPage(): react.JSX.Element;
+
+declare const FormListPage: typeof FormListPageComponent;
+declare const FormBuilderPage: typeof FormBuilderPageComponent;
+declare const SubmissionsPage: typeof SubmissionsPageComponent;
+declare const FormRenderer: typeof FormRenderer$1;
+
+export { DefaultError, EmptyState, FormBuilderPage, FormBuilderSkeleton, FormListPage, FormListSkeleton, FormRenderer, NotFoundPage, SubmissionsPage, SubmissionsSkeleton };

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

@@ -0,0 +1,97 @@
+'use client';
+import { F as FormListPageComponent } from '../../shared/plugin-form-builder.DWrQ3lRX.mjs';
+import { AutoFormInputComponentProps } from '../index.mjs';
+import * as react from 'react';
+import { ComponentType } from 'react';
+import { SerializedFormSubmission } from '../../types.mjs';
+import 'react-hook-form';
+import 'zod';
+import '@btst/stack/plugins/api';
+import '@btst/stack/authorization';
+import '@btst/stack/context';
+import '../../permissions.mjs';
+
+interface FormBuilderPageProps {
+    id?: string;
+}
+declare function FormBuilderPageComponent({ id }: FormBuilderPageProps): react.JSX.Element;
+
+interface SubmissionsPageProps {
+    formId: string;
+}
+declare function SubmissionsPageComponent({ formId }: SubmissionsPageProps): react.JSX.Element;
+
+interface FormRendererProps {
+    /** Form slug to render */
+    slug: string;
+    /** Callback when form submission succeeds */
+    onSuccess?: (submission: SerializedFormSubmission & {
+        form: {
+            successMessage?: string;
+            redirectUrl?: string;
+        };
+    }) => void;
+    /** Callback when form submission fails */
+    onError?: (error: Error) => void;
+    /** Custom field components (same as FormBuilder) */
+    fieldComponents?: Record<string, ComponentType<AutoFormInputComponentProps>>;
+    /** Override success message */
+    successMessage?: React.ReactNode;
+    /** Override submit button text */
+    submitButtonText?: string;
+    /** Custom loading component */
+    LoadingComponent?: ComponentType;
+    /** Custom error component */
+    ErrorComponent?: ComponentType<{
+        error: Error;
+    }>;
+    /** Class name for the form container */
+    className?: string;
+}
+/**
+ * FormRenderer component for rendering forms on the frontend.
+ *
+ * Uses SteppedAutoForm which automatically handles both single-step and multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * <FormRenderer
+ *   slug="contact-form"
+ *   onSuccess={() => {
+ *     toast.success("Thank you!");
+ *   }}
+ *   onError={(error) => {
+ *     toast.error("Something went wrong");
+ *   }}
+ * />
+ * ```
+ */
+declare function FormRenderer$1({ slug, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
+
+declare function FormListSkeleton(): react.JSX.Element;
+
+declare function FormBuilderSkeleton(): react.JSX.Element;
+
+declare function SubmissionsSkeleton(): react.JSX.Element;
+
+interface DefaultErrorProps {
+    error: unknown;
+    resetErrorBoundary?: () => void;
+}
+declare function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps): react.JSX.Element;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ title, description, action }: EmptyStateProps): react.JSX.Element;
+
+declare function NotFoundPage(): react.JSX.Element;
+
+declare const FormListPage: typeof FormListPageComponent;
+declare const FormBuilderPage: typeof FormBuilderPageComponent;
+declare const SubmissionsPage: typeof SubmissionsPageComponent;
+declare const FormRenderer: typeof FormRenderer$1;
+
+export { DefaultError, EmptyState, FormBuilderPage, FormBuilderSkeleton, FormListPage, FormListSkeleton, FormRenderer, NotFoundPage, SubmissionsPage, SubmissionsSkeleton };

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

@@ -0,0 +1,97 @@
+'use client';
+import { F as FormListPageComponent } from '../../shared/plugin-form-builder.DWrQ3lRX.js';
+import { AutoFormInputComponentProps } from '../index.js';
+import * as react from 'react';
+import { ComponentType } from 'react';
+import { SerializedFormSubmission } from '../../types.js';
+import 'react-hook-form';
+import 'zod';
+import '@btst/stack/plugins/api';
+import '@btst/stack/authorization';
+import '@btst/stack/context';
+import '../../permissions.js';
+
+interface FormBuilderPageProps {
+    id?: string;
+}
+declare function FormBuilderPageComponent({ id }: FormBuilderPageProps): react.JSX.Element;
+
+interface SubmissionsPageProps {
+    formId: string;
+}
+declare function SubmissionsPageComponent({ formId }: SubmissionsPageProps): react.JSX.Element;
+
+interface FormRendererProps {
+    /** Form slug to render */
+    slug: string;
+    /** Callback when form submission succeeds */
+    onSuccess?: (submission: SerializedFormSubmission & {
+        form: {
+            successMessage?: string;
+            redirectUrl?: string;
+        };
+    }) => void;
+    /** Callback when form submission fails */
+    onError?: (error: Error) => void;
+    /** Custom field components (same as FormBuilder) */
+    fieldComponents?: Record<string, ComponentType<AutoFormInputComponentProps>>;
+    /** Override success message */
+    successMessage?: React.ReactNode;
+    /** Override submit button text */
+    submitButtonText?: string;
+    /** Custom loading component */
+    LoadingComponent?: ComponentType;
+    /** Custom error component */
+    ErrorComponent?: ComponentType<{
+        error: Error;
+    }>;
+    /** Class name for the form container */
+    className?: string;
+}
+/**
+ * FormRenderer component for rendering forms on the frontend.
+ *
+ * Uses SteppedAutoForm which automatically handles both single-step and multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * <FormRenderer
+ *   slug="contact-form"
+ *   onSuccess={() => {
+ *     toast.success("Thank you!");
+ *   }}
+ *   onError={(error) => {
+ *     toast.error("Something went wrong");
+ *   }}
+ * />
+ * ```
+ */
+declare function FormRenderer$1({ slug, onSuccess, onError, fieldComponents: propFieldComponents, successMessage: propSuccessMessage, submitButtonText, LoadingComponent, ErrorComponent, className, }: FormRendererProps): react.JSX.Element;
+
+declare function FormListSkeleton(): react.JSX.Element;
+
+declare function FormBuilderSkeleton(): react.JSX.Element;
+
+declare function SubmissionsSkeleton(): react.JSX.Element;
+
+interface DefaultErrorProps {
+    error: unknown;
+    resetErrorBoundary?: () => void;
+}
+declare function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps): react.JSX.Element;
+
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ title, description, action }: EmptyStateProps): react.JSX.Element;
+
+declare function NotFoundPage(): react.JSX.Element;
+
+declare const FormListPage: typeof FormListPageComponent;
+declare const FormBuilderPage: typeof FormBuilderPageComponent;
+declare const SubmissionsPage: typeof SubmissionsPageComponent;
+declare const FormRenderer: typeof FormRenderer$1;
+
+export { DefaultError, EmptyState, FormBuilderPage, FormBuilderSkeleton, FormListPage, FormListSkeleton, FormRenderer, NotFoundPage, SubmissionsPage, SubmissionsSkeleton };

package/dist/client/components/index.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { FormListPageComponent } from './pages/form-list-page.mjs';
+import { FormBuilderPageComponent } from './pages/form-builder-page.mjs';
+import { SubmissionsPageComponent } from './pages/submissions-page.mjs';
+import { FormRenderer as FormRenderer$1 } from './forms/form-renderer.mjs';
+export { DefaultError } from './shared/default-error.mjs';
+export { EmptyState } from './shared/empty-state.mjs';
+export { NotFoundPage } from './pages/404-page.mjs';
+export { FormBuilderSkeleton } from './loading/form-builder-skeleton.mjs';
+export { FormListSkeleton } from './loading/form-list-skeleton.mjs';
+export { SubmissionsSkeleton } from './loading/submissions-skeleton.mjs';
+
+const FormListPage = FormListPageComponent;
+const FormBuilderPage = FormBuilderPageComponent;
+const SubmissionsPage = SubmissionsPageComponent;
+const FormRenderer = FormRenderer$1;
+
+export { FormBuilderPage, FormListPage, FormRenderer, SubmissionsPage };

package/dist/client/components/loading/form-builder-skeleton.cjs

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../ui/src/components/skeleton.cjs');
+
+function FormBuilderSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-skeleton", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-48" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-32" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-24" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 border-r p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-24" }),
+        Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-12 rounded-lg" }, i))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-48 rounded-lg" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-24 rounded-lg" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-80 border-l p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-20" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-full rounded-lg" })
+      ] })
+    ] })
+  ] });
+}
+
+exports.FormBuilderSkeleton = FormBuilderSkeleton;

package/dist/client/components/loading/form-builder-skeleton.mjs

@@ -0,0 +1,30 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../ui/src/components/skeleton.mjs';
+
+function FormBuilderSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-skeleton", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-48" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-24" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-64 border-r p-4 space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-24" }),
+        Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12 rounded-lg" }, i))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-48 rounded-lg" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-24 rounded-lg" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-80 border-l p-4 space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-full rounded-lg" })
+      ] })
+    ] })
+  ] });
+}
+
+export { FormBuilderSkeleton };

package/dist/client/components/loading/form-list-skeleton.cjs

@@ -0,0 +1,21 @@
+'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 FormListSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "form-list-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-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-48" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-28" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-16 rounded-lg" }, i)) })
+  ] }) });
+}
+
+exports.FormListSkeleton = FormListSkeleton;

package/dist/client/components/loading/form-list-skeleton.mjs

@@ -0,0 +1,19 @@
+'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 FormListSkeleton() {
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "form-list-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-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-28" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16 rounded-lg" }, i)) })
+  ] }) });
+}
+
+export { FormListSkeleton };