@btst/components 0.0.0-stage → 1.0.0-beta.0

package/dist/ui/src/components/form-builder/edit-field-dialog.mjs

@@ -0,0 +1,129 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback } from 'react';
+import AutoForm from '../auto-form/index.mjs';
+import { buildFieldConfigFromJsonSchema } from '../auto-form/helpers.mjs';
+import { Input } from '../input.mjs';
+import { Label } from '../label.mjs';
+import { Button } from '../button.mjs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../dialog.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../select.mjs';
+
+function EditFieldDialog({
+  open,
+  onOpenChange,
+  field,
+  component,
+  onUpdate,
+  steps = [],
+  allFieldIds = []
+}) {
+  const initialValues = useMemo(() => {
+    if (!field) return { fieldName: "", props: {}, key: "" };
+    const values = { ...field.props };
+    if (Array.isArray(values.options)) {
+      values.options = values.options.join("\n");
+    }
+    return { fieldName: field.id, props: values, key: `${field.id}-${open}` };
+  }, [field, open]);
+  const [fieldNameOverride, setFieldNameOverride] = useState(null);
+  const [localPropsOverride, setLocalPropsOverride] = useState(null);
+  const [stepGroupOverride, setStepGroupOverride] = useState(null);
+  const fieldName = fieldNameOverride ?? initialValues.fieldName;
+  const localProps = localPropsOverride ?? initialValues.props;
+  const localStepGroup = stepGroupOverride ?? field?.stepGroup ?? 0;
+  const isDuplicateId = useMemo(() => {
+    if (!field || fieldName === field.id) return false;
+    return allFieldIds.some((id) => id === fieldName && id !== field.id);
+  }, [fieldName, field, allFieldIds]);
+  const [prevInitial, setPrevInitial] = useState(initialValues);
+  if (prevInitial !== initialValues) {
+    setPrevInitial(initialValues);
+    setFieldNameOverride(null);
+    setLocalPropsOverride(null);
+    setStepGroupOverride(null);
+  }
+  const formKey = initialValues.key;
+  const handleValuesChange = useCallback(
+    (values) => {
+      setLocalPropsOverride(values);
+    },
+    []
+  );
+  const handleSave = useCallback(() => {
+    if (!field) return;
+    const props = { ...localProps };
+    if (typeof props.options === "string") {
+      props.options = props.options.split("\n").map((s) => s.trim()).filter(Boolean);
+    }
+    const newId = fieldName !== field.id ? fieldName : void 0;
+    const stepGroup = stepGroupOverride !== null && stepGroupOverride !== field.stepGroup ? stepGroupOverride : void 0;
+    onUpdate(field.id, props, newId, stepGroup);
+    onOpenChange(false);
+  }, [field, localProps, fieldName, onUpdate, onOpenChange, stepGroupOverride]);
+  if (!field || !component) {
+    return null;
+  }
+  const Icon = component.icon;
+  const jsonSchema = component.propertiesSchema.toJSONSchema();
+  const fieldConfig = buildFieldConfigFromJsonSchema(jsonSchema);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md max-h-[90vh] overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
+        "Edit ",
+        component.label
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Configure the properties for this field" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "field-name", children: "Field Name" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "field-name",
+            value: fieldName,
+            onChange: (e) => setFieldNameOverride(e.target.value),
+            placeholder: "Enter field name",
+            className: isDuplicateId ? "border-destructive focus-visible:ring-destructive" : "",
+            "aria-invalid": isDuplicateId
+          }
+        ),
+        isDuplicateId ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: "A field with this name already exists. Please choose a different name." }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "This is the key used in the form data and JSON schema" })
+      ] }),
+      steps.length > 1 && field && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "field-step", children: "Step" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(localStepGroup),
+            onValueChange: (value) => setStepGroupOverride(parseInt(value, 10)),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "field-step", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select step" }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: steps.map((step, index) => /* @__PURE__ */ jsx(SelectItem, { value: String(index), children: step.title }, step.id)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Which step this field belongs to" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsx(
+        AutoForm,
+        {
+          formSchema: component.propertiesSchema,
+          values: localProps,
+          onValuesChange: handleValuesChange,
+          fieldConfig,
+          className: "space-y-4"
+        },
+        formKey
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: isDuplicateId, children: "Save Changes" })
+    ] })
+  ] }) });
+}
+
+export { EditFieldDialog };

package/dist/ui/src/components/form-builder/form-preview.cjs

@@ -0,0 +1,73 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const steppedAutoForm = require('../auto-form/stepped-auto-form.cjs');
+const helpers = require('../auto-form/helpers.cjs');
+const button = require('../button.cjs');
+const utils = require('../../lib/utils.cjs');
+const schemaConverter = require('../../lib/schema-converter.cjs');
+
+function FormPreview({ schema, className, fieldComponents, defaultValues }) {
+  const [submittedValues, setSubmittedValues] = React.useState(null);
+  const zodSchema = React.useMemo(() => {
+    try {
+      if (!schema.properties || Object.keys(schema.properties).length === 0) {
+        return null;
+      }
+      return schemaConverter.formSchemaToZod(schema);
+    } catch (error) {
+      console.error("Failed to parse JSON Schema:", error);
+      return null;
+    }
+  }, [schema]);
+  const mergedFieldComponents = React.useMemo(() => fieldComponents ?? {}, [fieldComponents]);
+  const fieldConfig = React.useMemo(() => {
+    try {
+      return helpers.buildFieldConfigFromJsonSchema(
+        schema,
+        mergedFieldComponents
+      );
+    } catch (error) {
+      console.error("Failed to build field config:", error);
+      return {};
+    }
+  }, [schema, mergedFieldComponents]);
+  const handleSubmit = (values) => {
+    setSubmittedValues(values);
+  };
+  const handleReset = () => {
+    setSubmittedValues(null);
+  };
+  if (!zodSchema) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("p-8 text-center text-muted-foreground", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium mb-2", children: "No fields to preview" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Add some fields to your form to see a preview" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("p-4 md:p-6", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-2xl mx-auto", children: submittedValues ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: "Submitted Values" }),
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: handleReset, children: "Try Again" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-muted/50 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-sm overflow-auto whitespace-pre-wrap", children: JSON.stringify(submittedValues, null, 2) }) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: "Form Preview" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Test your form and see the submitted values" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-card p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+      steppedAutoForm.SteppedAutoForm,
+      {
+        formSchema: zodSchema,
+        onSubmit: handleSubmit,
+        fieldConfig,
+        values: defaultValues,
+        submitButtonText: "Submit"
+      }
+    ) })
+  ] }) }) });
+}
+
+exports.FormPreview = FormPreview;

package/dist/ui/src/components/form-builder/form-preview.mjs

@@ -0,0 +1,71 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { SteppedAutoForm } from '../auto-form/stepped-auto-form.mjs';
+import { buildFieldConfigFromJsonSchema } from '../auto-form/helpers.mjs';
+import { Button } from '../button.mjs';
+import { cn } from '../../lib/utils.mjs';
+import { formSchemaToZod } from '../../lib/schema-converter.mjs';
+
+function FormPreview({ schema, className, fieldComponents, defaultValues }) {
+  const [submittedValues, setSubmittedValues] = useState(null);
+  const zodSchema = useMemo(() => {
+    try {
+      if (!schema.properties || Object.keys(schema.properties).length === 0) {
+        return null;
+      }
+      return formSchemaToZod(schema);
+    } catch (error) {
+      console.error("Failed to parse JSON Schema:", error);
+      return null;
+    }
+  }, [schema]);
+  const mergedFieldComponents = useMemo(() => fieldComponents ?? {}, [fieldComponents]);
+  const fieldConfig = useMemo(() => {
+    try {
+      return buildFieldConfigFromJsonSchema(
+        schema,
+        mergedFieldComponents
+      );
+    } catch (error) {
+      console.error("Failed to build field config:", error);
+      return {};
+    }
+  }, [schema, mergedFieldComponents]);
+  const handleSubmit = (values) => {
+    setSubmittedValues(values);
+  };
+  const handleReset = () => {
+    setSubmittedValues(null);
+  };
+  if (!zodSchema) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("p-8 text-center text-muted-foreground", className), children: [
+      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium mb-2", children: "No fields to preview" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Add some fields to your form to see a preview" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("p-4 md:p-6", className), children: /* @__PURE__ */ jsx("div", { className: "max-w-2xl mx-auto", children: submittedValues ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Submitted Values" }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleReset, children: "Try Again" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-muted/50 p-4", children: /* @__PURE__ */ jsx("pre", { className: "text-sm overflow-auto whitespace-pre-wrap", children: JSON.stringify(submittedValues, null, 2) }) })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Form Preview" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Test your form and see the submitted values" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6", children: /* @__PURE__ */ jsx(
+      SteppedAutoForm,
+      {
+        formSchema: zodSchema,
+        onSubmit: handleSubmit,
+        fieldConfig,
+        values: defaultValues,
+        submitButtonText: "Submit"
+      }
+    ) })
+  ] }) }) });
+}
+
+export { FormPreview };

package/dist/ui/src/components/form-builder/index.cjs

@@ -0,0 +1,350 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const core = require('@dnd-kit/core');
+const sortable = require('@dnd-kit/sortable');
+const utils = require('../../lib/utils.cjs');
+const tabs = require('../tabs.cjs');
+const palette = require('./palette.cjs');
+const canvas = require('./canvas.cjs');
+const editFieldDialog = require('./edit-field-dialog.cjs');
+const nestedFieldEditorDialog = require('./nested-field-editor-dialog.cjs');
+const formPreview = require('./form-preview.cjs');
+const sortableField = require('./sortable-field.cjs');
+const index = require('./components/index.cjs');
+const schemaUtils = require('./schema-utils.cjs');
+const validationSchemas = require('./validation-schemas.cjs');
+
+function FormBuilder({
+  components = index.defaultComponents,
+  value,
+  onChange,
+  className,
+  fieldComponents,
+  defaultValues
+}) {
+  const dndContextId = React.useId();
+  const [fields, setFields] = React.useState(() => {
+    if (!value) return [];
+    const { fields: parsedFields } = schemaUtils.jsonSchemaToFieldsAndSteps(value, components);
+    return parsedFields;
+  });
+  const [steps, setSteps] = React.useState(() => {
+    if (!value) return [];
+    const { steps: parsedSteps } = schemaUtils.jsonSchemaToFieldsAndSteps(value, components);
+    return parsedSteps;
+  });
+  const [activeStepIndex, setActiveStepIndex] = React.useState(0);
+  const [editDialogFieldId, setEditDialogFieldId] = React.useState(null);
+  const [nestedEditorFieldId, setNestedEditorFieldId] = React.useState(null);
+  const [activeId, setActiveId] = React.useState(null);
+  const notifyChange = React.useCallback(
+    (newFields, newSteps) => {
+      if (onChange) {
+        const schema = schemaUtils.fieldsToJSONSchema(newFields, components, newSteps ?? steps);
+        onChange(schema);
+      }
+    },
+    [onChange, components, steps]
+  );
+  const currentSchema = React.useMemo(
+    () => schemaUtils.fieldsToJSONSchema(fields, components, steps),
+    [fields, components, steps]
+  );
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    core.useSensor(core.TouchSensor, {
+      activationConstraint: {
+        // Use distance instead of delay for better compatibility with
+        // automated testing tools and faster touch interactions
+        distance: 8
+      }
+    }),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const activeDragData = React.useMemo(() => {
+    if (!activeId) return null;
+    const idStr = String(activeId);
+    if (idStr.startsWith("palette-")) {
+      const componentType = idStr.replace("palette-", "");
+      return {
+        type: "palette",
+        componentType,
+        component: index.getComponentByType(componentType, components)
+      };
+    }
+    const field = fields.find((f) => f.id === idStr);
+    if (field) {
+      return {
+        type: "field",
+        field,
+        component: index.getComponentByType(field.type, components)
+      };
+    }
+    return null;
+  }, [activeId, fields, components]);
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over) return;
+    const activeData = active.data.current;
+    if (activeData?.type === "palette") {
+      const { componentType } = activeData;
+      const component = index.getComponentByType(componentType, components);
+      if (component) {
+        const newField = {
+          id: schemaUtils.generateFieldId(componentType),
+          type: componentType,
+          props: {
+            label: component.defaultProps.label || component.label,
+            ...component.defaultProps
+          },
+          // Assign to active step when in multi-step mode
+          ...steps.length > 1 ? { stepGroup: activeStepIndex } : {}
+        };
+        let insertIndex = fields.length;
+        const overId = String(over.id);
+        if (overId === "drop-zone-start") {
+          insertIndex = 0;
+        } else if (overId.startsWith("drop-zone-")) {
+          const fieldId = overId.replace("drop-zone-", "");
+          const overIndex = fields.findIndex((f) => f.id === fieldId);
+          if (overIndex !== -1) {
+            insertIndex = overIndex + 1;
+          }
+        } else if (overId !== "canvas") {
+          const overIndex = fields.findIndex((f) => f.id === overId);
+          if (overIndex !== -1) {
+            insertIndex = overIndex + 1;
+          }
+        }
+        const newFields = [...fields];
+        newFields.splice(insertIndex, 0, newField);
+        setFields(newFields);
+        notifyChange(newFields);
+      }
+      return;
+    }
+    if (activeData?.type === "field" && active.id !== over.id) {
+      const oldIndex = fields.findIndex((f) => f.id === active.id);
+      const newIndex = fields.findIndex((f) => f.id === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newFields = sortable.arrayMove(fields, oldIndex, newIndex);
+        setFields(newFields);
+        notifyChange(newFields);
+      }
+    }
+  };
+  const handleUpdateField = React.useCallback(
+    (id, props, newId, stepGroup) => {
+      if (newId && newId !== id) {
+        const idExists = fields.some((f) => f.id === newId && f.id !== id);
+        if (idExists) {
+          console.warn(`Cannot rename field "${id}" to "${newId}": a field with that ID already exists`);
+          return;
+        }
+      }
+      const newFields = fields.map((f) => {
+        if (f.id !== id) return f;
+        const updated = {
+          ...f,
+          id: newId || f.id,
+          props: { ...f.props, ...props }
+        };
+        if (stepGroup !== void 0) {
+          updated.stepGroup = stepGroup;
+        }
+        return updated;
+      });
+      setFields(newFields);
+      notifyChange(newFields);
+    },
+    [fields, notifyChange]
+  );
+  const handleEditField = React.useCallback((id) => {
+    setEditDialogFieldId(id);
+  }, []);
+  const handleDeleteField = React.useCallback(
+    (id) => {
+      const newFields = fields.filter((f) => f.id !== id);
+      setFields(newFields);
+      notifyChange(newFields);
+    },
+    [fields, notifyChange]
+  );
+  const handleConfigureNested = React.useCallback((id) => {
+    setNestedEditorFieldId(id);
+  }, []);
+  const handleSaveNestedFields = React.useCallback(
+    (fieldId, nestedFields) => {
+      const newFields = fields.map((f) => {
+        if (f.id !== fieldId) return f;
+        if (f.type === "object") {
+          return { ...f, children: nestedFields };
+        } else if (f.type === "array") {
+          return { ...f, itemTemplate: nestedFields };
+        }
+        return f;
+      });
+      setFields(newFields);
+      notifyChange(newFields);
+    },
+    [fields, notifyChange]
+  );
+  const handleAddStep = React.useCallback(() => {
+    const newStep = schemaUtils.createStep(steps.length);
+    const newSteps = [...steps, newStep];
+    if (steps.length === 1) {
+      const updatedFields = fields.map((f) => ({ ...f, stepGroup: 0 }));
+      setFields(updatedFields);
+      setSteps(newSteps);
+      notifyChange(updatedFields, newSteps);
+    } else if (steps.length === 0) {
+      const firstStep = schemaUtils.createStep(0);
+      const secondStep = schemaUtils.createStep(1);
+      const bothSteps = [firstStep, secondStep];
+      const updatedFields = fields.map((f) => ({ ...f, stepGroup: 0 }));
+      setFields(updatedFields);
+      setSteps(bothSteps);
+      notifyChange(updatedFields, bothSteps);
+    } else {
+      setSteps(newSteps);
+      notifyChange(fields, newSteps);
+    }
+  }, [steps, fields, notifyChange]);
+  const handleDeleteStep = React.useCallback(
+    (index) => {
+      const fieldsWithoutDeleted = fields.filter((f) => f.stepGroup !== index);
+      if (steps.length <= 2) {
+        const updatedFields = fieldsWithoutDeleted.map((f) => {
+          const { stepGroup: _, ...rest } = f;
+          return rest;
+        });
+        setFields(updatedFields);
+        setSteps([]);
+        setActiveStepIndex(0);
+        notifyChange(updatedFields, []);
+      } else {
+        const newSteps = steps.filter((_, i) => i !== index);
+        const updatedFields = fieldsWithoutDeleted.map((f) => {
+          if (f.stepGroup !== void 0 && f.stepGroup > index) {
+            return { ...f, stepGroup: f.stepGroup - 1 };
+          }
+          return f;
+        });
+        setFields(updatedFields);
+        setSteps(newSteps);
+        if (activeStepIndex >= newSteps.length) {
+          setActiveStepIndex(newSteps.length - 1);
+        }
+        notifyChange(updatedFields, newSteps);
+      }
+    },
+    [steps, fields, activeStepIndex, notifyChange]
+  );
+  const handleRenameStep = React.useCallback(
+    (index, newTitle) => {
+      const newSteps = steps.map(
+        (step, i) => i === index ? { ...step, title: newTitle } : step
+      );
+      setSteps(newSteps);
+      notifyChange(fields, newSteps);
+    },
+    [steps, fields, notifyChange]
+  );
+  const editDialogField = fields.find((f) => f.id === editDialogFieldId) || null;
+  const editDialogComponent = editDialogField ? index.getComponentByType(editDialogField.type, components) || null : null;
+  const nestedEditorField = fields.find((f) => f.id === nestedEditorFieldId) || null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col lg:h-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      core.DndContext,
+      {
+        id: dndContextId,
+        sensors,
+        collisionDetection: core.closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col lg:flex-row lg:overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full lg:w-64 p-4 border-b lg:border-b-0 lg:border-r lg:overflow-auto shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(palette.Palette, { components }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-4 lg:overflow-auto min-h-[300px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              canvas.Canvas,
+              {
+                fields,
+                components,
+                onEditField: handleEditField,
+                onDeleteField: handleDeleteField,
+                onConfigureNested: handleConfigureNested,
+                isDraggingFromPalette: activeDragData?.type === "palette",
+                steps,
+                activeStepIndex,
+                onActiveStepChange: setActiveStepIndex,
+                onAddStep: handleAddStep,
+                onDeleteStep: handleDeleteStep,
+                onRenameStep: handleRenameStep
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1 lg:w-96 border-t lg:border-t-0 lg:border-l lg:overflow-auto min-h-[300px]", children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs, { defaultValue: "preview", className: "h-full flex flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.TabsList, { className: "w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "preview", className: "flex-1", children: "Preview" }),
+                /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "schema", className: "flex-1", children: "JSON Schema" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "preview", className: "flex-1 m-0 lg:overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(formPreview.FormPreview, { schema: currentSchema, fieldComponents, defaultValues }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { value: "schema", className: "flex-1 m-0 p-4 lg:overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-muted/50 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-sm overflow-auto whitespace-pre-wrap", children: JSON.stringify(currentSchema, null, 2) }) }) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.DragOverlay, { dropAnimation: null, children: [
+            activeDragData?.type === "palette" && activeDragData.component && /* @__PURE__ */ jsxRuntime.jsx(palette.PaletteDragOverlay, { component: activeDragData.component }),
+            activeDragData?.type === "field" && activeDragData.field && /* @__PURE__ */ jsxRuntime.jsx(
+              sortableField.FieldDragOverlay,
+              {
+                field: activeDragData.field,
+                component: activeDragData.component
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      editFieldDialog.EditFieldDialog,
+      {
+        open: editDialogFieldId !== null,
+        onOpenChange: (open) => !open && setEditDialogFieldId(null),
+        field: editDialogField,
+        component: editDialogComponent,
+        onUpdate: handleUpdateField,
+        steps,
+        allFieldIds: fields.map((f) => f.id)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      nestedFieldEditorDialog.NestedFieldEditorDialog,
+      {
+        open: nestedEditorFieldId !== null,
+        onOpenChange: (open) => !open && setNestedEditorFieldId(null),
+        field: nestedEditorField,
+        components,
+        onSave: handleSaveNestedFields
+      }
+    )
+  ] });
+}
+
+exports.arrayFieldDefinition = index.arrayFieldDefinition;
+exports.defaultComponents = index.defaultComponents;
+exports.objectFieldDefinition = index.objectFieldDefinition;
+exports.baseMetaSchema = validationSchemas.baseMetaSchema;
+exports.baseMetaSchemaWithPlaceholder = validationSchemas.baseMetaSchemaWithPlaceholder;
+exports.FormBuilder = FormBuilder;