@btst/plugin-form-builder 0.0.0-stage → 1.0.0-beta.0

package/dist/ui/src/components/dialog.cjs

@@ -0,0 +1,141 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const DialogPrimitive = require('@radix-ui/react-dialog');
+const lucideReact = require('lucide-react');
+const utils = require('../lib/utils.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(DialogPrimitive);
+
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: utils.cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: utils.cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: utils.cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: utils.cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: utils.cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: utils.cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+exports.Dialog = Dialog;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;

package/dist/ui/src/components/dialog.mjs

@@ -0,0 +1,118 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import { cn } from '../lib/utils.mjs';
+
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+export { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle };

package/dist/ui/src/components/dropdown-menu.cjs

@@ -0,0 +1,81 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+require('lucide-react');
+const utils = require('../lib/utils.cjs');
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceCompat(DropdownMenuPrimitive);
+
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: utils.cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: utils.cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/ui/src/components/dropdown-menu.mjs

@@ -0,0 +1,62 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import 'lucide-react';
+import { cn } from '../lib/utils.mjs';
+
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };

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

@@ -0,0 +1,111 @@
+'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 sortableField = require('./sortable-field.cjs');
+const stepTabs = require('./step-tabs.cjs');
+
+function DropZone({ id, isDraggingFromPalette }) {
+  const { setNodeRef, isOver } = core.useDroppable({
+    id
+  });
+  if (!isDraggingFromPalette) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: utils.cn(
+        "h-2 rounded-full transition-all duration-200",
+        isOver ? "h-3 bg-primary animate-pulse" : "bg-muted-foreground/20"
+      )
+    }
+  );
+}
+function Canvas({
+  fields,
+  components,
+  onEditField,
+  onDeleteField,
+  onConfigureNested,
+  isDraggingFromPalette,
+  className,
+  steps,
+  activeStepIndex,
+  onActiveStepChange,
+  onAddStep,
+  onDeleteStep,
+  onRenameStep,
+  hideStepControls
+}) {
+  const { setNodeRef, isOver } = core.useDroppable({
+    id: "canvas"
+  });
+  const getComponent = (type) => components.find((c) => c.type === type);
+  const visibleFields = React.useMemo(() => {
+    if (steps.length <= 1) {
+      return fields;
+    }
+    return fields.filter((f) => (f.stepGroup ?? 0) === activeStepIndex);
+  }, [fields, steps.length, activeStepIndex]);
+  const sortableItems = React.useMemo(() => visibleFields.map((f) => f.id), [visibleFields]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      stepTabs.StepTabs,
+      {
+        steps,
+        activeStepIndex,
+        onActiveStepChange,
+        onAddStep,
+        onDeleteStep,
+        onRenameStep,
+        hideStepControls
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setNodeRef,
+        "data-testid": "form-builder-canvas",
+        className: utils.cn(
+          "flex-1 p-4 rounded-lg border-2 border-dashed min-h-[400px] transition-colors",
+          isOver && isDraggingFromPalette ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+        ),
+        children: visibleFields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground", "data-testid": "canvas-drop-zone", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Drop components here" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: steps.length > 1 ? `Drag components from the palette to add to ${steps[activeStepIndex]?.title || "this step"}` : "Drag components from the palette to build your form" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: sortableItems,
+            strategy: sortable.verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DropZone, { id: "drop-zone-start", isDraggingFromPalette }),
+              visibleFields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  sortableField.SortableField,
+                  {
+                    field,
+                    index,
+                    component: getComponent(field.type),
+                    onEdit: () => onEditField(field.id),
+                    onDelete: () => onDeleteField(field.id),
+                    onConfigureNested: onConfigureNested ? () => onConfigureNested(field.id) : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(DropZone, { id: `drop-zone-${field.id}`, isDraggingFromPalette })
+              ] }, field.id))
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.Canvas = Canvas;

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

@@ -0,0 +1,109 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { cn } from '../../lib/utils.mjs';
+import { SortableField } from './sortable-field.mjs';
+import { StepTabs } from './step-tabs.mjs';
+
+function DropZone({ id, isDraggingFromPalette }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id
+  });
+  if (!isDraggingFromPalette) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "h-2 rounded-full transition-all duration-200",
+        isOver ? "h-3 bg-primary animate-pulse" : "bg-muted-foreground/20"
+      )
+    }
+  );
+}
+function Canvas({
+  fields,
+  components,
+  onEditField,
+  onDeleteField,
+  onConfigureNested,
+  isDraggingFromPalette,
+  className,
+  steps,
+  activeStepIndex,
+  onActiveStepChange,
+  onAddStep,
+  onDeleteStep,
+  onRenameStep,
+  hideStepControls
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: "canvas"
+  });
+  const getComponent = (type) => components.find((c) => c.type === type);
+  const visibleFields = useMemo(() => {
+    if (steps.length <= 1) {
+      return fields;
+    }
+    return fields.filter((f) => (f.stepGroup ?? 0) === activeStepIndex);
+  }, [fields, steps.length, activeStepIndex]);
+  const sortableItems = useMemo(() => visibleFields.map((f) => f.id), [visibleFields]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsx(
+      StepTabs,
+      {
+        steps,
+        activeStepIndex,
+        onActiveStepChange,
+        onAddStep,
+        onDeleteStep,
+        onRenameStep,
+        hideStepControls
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setNodeRef,
+        "data-testid": "form-builder-canvas",
+        className: cn(
+          "flex-1 p-4 rounded-lg border-2 border-dashed min-h-[400px] transition-colors",
+          isOver && isDraggingFromPalette ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+        ),
+        children: visibleFields.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground", "data-testid": "canvas-drop-zone", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "Drop components here" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: steps.length > 1 ? `Drag components from the palette to add to ${steps[activeStepIndex]?.title || "this step"}` : "Drag components from the palette to build your form" })
+        ] }) : /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: sortableItems,
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(DropZone, { id: "drop-zone-start", isDraggingFromPalette }),
+              visibleFields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  SortableField,
+                  {
+                    field,
+                    index,
+                    component: getComponent(field.type),
+                    onEdit: () => onEditField(field.id),
+                    onDelete: () => onDeleteField(field.id),
+                    onConfigureNested: onConfigureNested ? () => onConfigureNested(field.id) : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx(DropZone, { id: `drop-zone-${field.id}`, isDraggingFromPalette })
+              ] }, field.id))
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Canvas };