@simple-builder/react 1.3.8 → 1.4.0

package/dist/build-container-client-WHIUDBOZ.mjs

@@ -1,2262 +0,0 @@
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-import './chunk-H6OM2V2U.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-EZFQOJHG.mjs';
-import { cn, tv, DesignWrapper, builder, Image } from './chunk-6KNCX5O5.mjs';
-import * as React25 from 'react';
-import { useCallback } from 'react';
-import { ChevronRight, Check, Circle, X, ChevronDown, ChevronUp, PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { mergeAttributes, getMarkRange, EditorContent, useEditor } from '@tiptap/react';
-import { Color } from '@tiptap/extension-color';
-import { TextStyle } from '@tiptap/extension-text-style';
-import { Underline } from '@tiptap/extension-underline';
-import { StarterKit } from '@tiptap/starter-kit';
-import TiptapLink from '@tiptap/extension-link';
-import { Plugin, TextSelection } from '@tiptap/pm/state';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva } from 'class-variance-authority';
-import { LuChevronDown, LuCheck, LuHeading, LuLink2, LuEllipsis, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuCode, LuRemoveFormatting, LuQuote, LuMinus, LuListOrdered, LuList } from 'react-icons/lu';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Slot } from '@radix-ui/react-slot';
-import { useFormContext, useForm, useFieldArray, FormProvider, Controller } from 'react-hook-form';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { format } from 'date-fns';
-import { DayPicker } from 'react-day-picker';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  AlertDialogPrimitive.Overlay,
-  {
-    className: cn(
-      "sb:fixed sb:inset-0 sb:z-50 sb:bg-background/80 sb:backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
-      className
-    ),
-    ...props,
-    ref
-  }
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(AlertDialogPortal, null, /* @__PURE__ */ React25.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React25.createElement(
-  AlertDialogPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "sb:fixed sb:font-roboto sb:left-[50%] sb:top-[50%] sb:z-50 sb:grid sb:w-full sb:max-w-lg sb:translate-x-[-50%] sb:translate-y-[-50%] sb:gap-4 sb:border sb:bg-background sb:p-6 sb:shadow-lg sb:duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sb:sm:rounded-lg",
-      className
-    ),
-    ...props
-  }
-)));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogFooter = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ React25.createElement(
-  "div",
-  {
-    className: cn(
-      "sb:flex sb:flex-col-reverse sb:sm:flex-row sb:sm:justify-end sb:sm:gap-2",
-      className
-    ),
-    ...props
-  }
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  AlertDialogPrimitive.Title,
-  {
-    ref,
-    className: cn("sb:text-lg sb:font-semibold", className),
-    ...props
-  }
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  AlertDialogPrimitive.Description,
-  {
-    ref,
-    className: cn("sb:text-sm sb:text-muted-foreground", className),
-    ...props
-  }
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  AlertDialogPrimitive.Action,
-  {
-    ref,
-    className: cn(buttonVariants(), className),
-    ...props
-  }
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  AlertDialogPrimitive.Cancel,
-  {
-    ref,
-    className: cn(
-      buttonVariants({ variant: "outline" }),
-      "sb:mt-2 sb:sm:mt-0",
-      className
-    ),
-    ...props
-  }
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React25.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "sb:z-50 sb:w-72 sb:rounded-md sb:border sb:bg-popover sb:text-popover-foreground sb:shadow-md sb:outline-hidden data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb:origin-(--radix-popover-content-transform-origin)",
-      className
-    ),
-    ...props
-  }
-)));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Link = TiptapLink.extend({
-  inclusive: false,
-  parseHTML() {
-    return [{ tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])' }];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      openOnClick: false
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      ...this.parent?.() || [],
-      new Plugin({
-        props: {
-          handleClick(view, pos) {
-            const { schema: schema2, doc, tr } = view.state;
-            const range = getMarkRange(doc.resolve(pos), schema2.marks.link);
-            if (!range) {
-              return;
-            }
-            const { from, to } = range;
-            const start = Math.min(from, to);
-            const end = Math.max(from, to);
-            if (pos < start || pos > end) {
-              return;
-            }
-            const $start = doc.resolve(start);
-            const $end = doc.resolve(end);
-            const transaction = tr.setSelection(new TextSelection($start, $end));
-            view.dispatch(transaction);
-          }
-        }
-      })
-    ];
-  }
-});
-
-// src/features/rich-text-editor/utils/get-output.ts
-var getOutput = (editor, format2) => {
-  switch (format2) {
-    case "json":
-      return editor.getJSON();
-    case "html":
-      return editor.isEmpty ? "" : editor.getHTML();
-    default:
-      return editor.getText();
-  }
-};
-
-// src/features/rich-text-editor/hooks/useRichTextEditor.ts
-var useRichTextEditor = ({
-  value,
-  output = "html",
-  editorClassName,
-  onUpdate,
-  onBlur,
-  ...options
-}) => {
-  const handleCreate = useCallback(
-    (editor2) => {
-      console.count("useRichTextEditor:handleCreate");
-      if (value && editor2.isEmpty) {
-        editor2.commands.setContent(value);
-      }
-    },
-    [value]
-  );
-  const handleUpdate = useCallback(
-    (editor2) => {
-      console.count("useRichTextEditor:handleUpdate");
-      onUpdate?.(getOutput(editor2, output));
-    },
-    [output, onUpdate]
-  );
-  const handleBlur = useCallback(
-    (editor2) => {
-      console.count("useRichTextEditor:handleBlur");
-      onBlur?.(getOutput(editor2, output));
-    },
-    [output, onBlur]
-  );
-  const editor = useEditor({
-    extensions: [StarterKit, Underline, Color, TextStyle, Link],
-    editorProps: {
-      attributes: {
-        autocomplete: "off",
-        autocorrect: "off",
-        autocapitalize: "off",
-        class: cn("sb-focus:outline-none", editorClassName)
-      }
-    },
-    onCreate: ({ editor: editor2 }) => handleCreate(editor2),
-    onUpdate: ({ editor: editor2 }) => handleUpdate(editor2),
-    onBlur: ({ editor: editor2 }) => handleBlur(editor2),
-    ...options
-  });
-  console.count("useRichTextEditor");
-  return editor;
-};
-var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React25.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "sb:flex sb:cursor-default sb:select-none sb:items-center sb:gap-2 sb:rounded-sm sb:px-2 sb:py-1.5 sb:text-sm sb:outline-hidden sb:focus:bg-accent sb:data-[state=open]:bg-accent sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
-      inset && "sb:pl-8",
-      className
-    ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React25.createElement(ChevronRight, { className: "sb:ml-auto" })
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "sb:z-50 sb:min-w-32 sb:overflow-hidden sb:rounded-md sb:border sb:bg-popover sb:p-1 sb:text-popover-foreground sb:shadow-lg data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb:origin-(--radix-dropdown-menu-content-transform-origin)",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React25.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "sb:z-50 sb:max-h-(--radix-dropdown-menu-content-available-height) sb:min-w-32 sb:overflow-y-auto sb:overflow-x-hidden sb:rounded-md sb:border sb:bg-popover sb:p-1 sb:text-popover-foreground sb:shadow-md",
-      "data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2 sb:origin-(--radix-dropdown-menu-content-transform-origin)",
-      className
-    ),
-    ...props
-  }
-)));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React25.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "sb:relative sb:flex sb:cursor-default sb:select-none sb:items-center sb:gap-2 sb:rounded-sm sb:px-2 sb:py-1.5 sb:text-sm sb:outline-hidden sb:transition-colors sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50 sb:[&>svg]:size-4 sb:[&>svg]:shrink-0",
-      inset && "sb:pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React25.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "sb:relative sb:flex sb:cursor-default sb:select-none sb:items-center sb:rounded-sm sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:outline-hidden sb:transition-colors sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50",
-      className
-    ),
-    checked,
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement("span", { className: "sb:absolute sb:left-2 sb:flex sb:h-3.5 sb:w-3.5 sb:items-center sb:justify-center" }, /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(Check, { className: "sb:h-4 sb:w-4" }))),
-  children
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "sb:relative sb:flex sb:cursor-default sb:select-none sb:items-center sb:rounded-sm sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:outline-hidden sb:transition-colors sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement("span", { className: "sb:absolute sb:left-2 sb:flex sb:h-3.5 sb:w-3.5 sb:items-center sb:justify-center" }, /* @__PURE__ */ React25.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(Circle, { className: "sb:h-2 sb:w-2 sb:fill-current" }))),
-  children
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React25.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "sb:px-2 sb:py-1.5 sb:text-sm sb:font-semibold",
-      inset && "sb:pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("sb:-mx-1 sb:my-1 sb:h-px sb:bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var Separator2 = React25.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-    SeparatorPrimitive.Root,
-    {
-      ref,
-      decorative,
-      orientation,
-      className: cn(
-        "sb:shrink-0 sb:bg-border",
-        orientation === "horizontal" ? "sb:h-px sb:w-full" : "sb:h-full sb:w-px",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Separator2.displayName = SeparatorPrimitive.Root.displayName;
-var toggleVariants = cva(
-  "sb:inline-flex sb:items-center sb:justify-center sb:gap-2 sb:rounded-md sb:text-sm sb:font-medium sb:transition-colors sb:hover:bg-muted sb:hover:text-muted-foreground sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:data-[state=on]:bg-accent sb:data-[state=on]:text-accent-foreground sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "sb:bg-transparent",
-        outline: "sb:border sb:border-input sb:bg-transparent sb:shadow-sm sb:hover:bg-accent sb:hover:text-accent-foreground"
-      },
-      size: {
-        default: "sb:h-9 sb:px-2 sb:min-w-9",
-        sm: "sb:h-8 sb:px-1.5 sb:min-w-8",
-        lg: "sb:h-10 sb:px-2.5 sb:min-w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Toggle = React25.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  TogglePrimitive.Root,
-  {
-    ref,
-    className: cn(toggleVariants({ variant, size, className })),
-    ...props
-  }
-));
-Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React25.createContext({
-  size: "default",
-  variant: "default"
-});
-var ToggleGroup = React25.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    className: cn("sb:flex sb:items-center sb:justify-center sb:gap-1", className),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement(ToggleGroupContext.Provider, { value: { variant, size } }, children)
-));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React25.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React25.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ React25.createElement(
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        className
-      ),
-      ...props
-    },
-    children
-  );
-});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-var PALETTES = [
-  {
-    inverse: "hsl(var(--background))",
-    colors: [
-      { cssVar: "hsl(var(--foreground))" },
-      { cssVar: "hsl(var(--primary-foreground))" },
-      { cssVar: "hsl(var(--secondary-foreground))" },
-      { cssVar: "hsl(var(--tertiary-foreground))" },
-      { cssVar: "hsl(var(--muted-foreground))" },
-      { cssVar: "hsl(var(--accent-foreground))" },
-      { cssVar: "hsl(var(--destructive-foreground))" }
-    ]
-  },
-  {
-    inverse: "hsl(var(--foreground))",
-    colors: [
-      { cssVar: "hsl(var(--background))" },
-      { cssVar: "hsl(var(--primary))" },
-      { cssVar: "hsl(var(--secondary))" },
-      { cssVar: "hsl(var(--tertiary))" },
-      { cssVar: "hsl(var(--muted))" },
-      { cssVar: "hsl(var(--accent))" },
-      { cssVar: "hsl(var(--destructive))" }
-    ]
-  }
-];
-var ColorTool = ({ editor }) => {
-  const color = editor.getAttributes("textStyle")?.color || "hsl(var(--foreground))";
-  const [selectedColor, setSelectedColor] = React25.useState(color);
-  React25.useEffect(() => {
-    setSelectedColor(color);
-  }, [color]);
-  const handleColorChange = React25.useCallback(
-    (value) => {
-      setSelectedColor(value);
-      editor.chain().focus().setColor(value).run();
-    },
-    [editor]
-  );
-  return /* @__PURE__ */ React25.createElement(Popover, { modal: true }, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(ToolbarButton, { className: "sb:w-12" }, /* @__PURE__ */ React25.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: "sb:size-5",
-      style: { color: selectedColor }
-    },
-    /* @__PURE__ */ React25.createElement("path", { d: "M4 20h16" }),
-    /* @__PURE__ */ React25.createElement("path", { d: "m6 16 6-12 6 12" }),
-    /* @__PURE__ */ React25.createElement("path", { d: "M8 12h8" })
-  ), /* @__PURE__ */ React25.createElement(LuChevronDown, { className: "sb:size-5" }))), /* @__PURE__ */ React25.createElement(PopoverContent, { align: "start", className: "sb:w-full" }, /* @__PURE__ */ React25.createElement(
-    ToggleGroup,
-    {
-      type: "single",
-      value: selectedColor,
-      onValueChange: handleColorChange,
-      className: "sb:flex-col sb:gap-1.5"
-    },
-    PALETTES.map((pallete, i) => /* @__PURE__ */ React25.createElement("div", { key: i, className: "sb:flex sb:gap-1.5" }, pallete.colors.map((color2, j) => /* @__PURE__ */ React25.createElement(
-      ToggleGroupItem,
-      {
-        tabIndex: 0,
-        key: j,
-        className: "sb:relative sb:size-7 sb:rounded-md sb:border sb:p-0",
-        value: color2.cssVar,
-        style: { backgroundColor: color2.cssVar }
-      },
-      selectedColor === color2.cssVar && /* @__PURE__ */ React25.createElement(
-        LuCheck,
-        {
-          className: "sb:absolute sb:inset-0 sb:m-auto sb:size-6",
-          style: { color: pallete.inverse }
-        }
-      )
-    ))))
-  )));
-};
-var formatActions = [
-  {
-    label: "Normal Text",
-    element: "span",
-    className: "sb:grow"
-  },
-  {
-    label: "Heading 1",
-    element: "h1",
-    level: 1,
-    className: "sb:m-0 sb:grow sb:text-3xl sb:font-extrabold"
-  },
-  {
-    label: "Heading 2",
-    element: "h2",
-    level: 2,
-    className: "sb:m-0 sb:grow sb:text-xl sb:font-bold"
-  },
-  {
-    label: "Heading 3",
-    element: "h3",
-    level: 3,
-    className: "sb:m-0 sb:grow sb:text-lg sb:font-semibold"
-  },
-  {
-    label: "Heading 4",
-    element: "h4",
-    level: 4,
-    className: "sb:m-0 sb:grow sb:text-base sb:font-semibold"
-  }
-];
-var ElementTool = ({ editor }) => {
-  const isActive = editor.isActive("heading");
-  const handleFormatChange = React25.useCallback(
-    (level) => {
-      if (level) {
-        editor.chain().focus().toggleHeading({ level }).run();
-      } else {
-        editor.chain().focus().setParagraph().run();
-      }
-    },
-    [editor]
-  );
-  return /* @__PURE__ */ React25.createElement(DropdownMenu, null, /* @__PURE__ */ React25.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(
-    ToolbarButton,
-    {
-      className: "sb:w-12 sb:data-[state=open]:bg-accent",
-      pressed: isActive
-    },
-    /* @__PURE__ */ React25.createElement(LuHeading, { className: "sb:size-5" }),
-    /* @__PURE__ */ React25.createElement(LuChevronDown, { className: "sb:size-5" })
-  )), /* @__PURE__ */ React25.createElement(DropdownMenuContent, { align: "start" }, formatActions.map(({ element: Element, ...action }) => /* @__PURE__ */ React25.createElement(
-    DropdownMenuItem,
-    {
-      key: action.label,
-      className: cn({
-        "sb:bg-accent": action.level ? editor.isActive("heading", { level: action.level }) : editor.isActive("paragraph")
-      }),
-      onClick: () => handleFormatChange(action.level)
-    },
-    /* @__PURE__ */ React25.createElement(Element, { className: action.className }, action.label)
-  ))));
-};
-var actions = [
-  {
-    value: "bold",
-    label: "Bold",
-    icon: LuBold,
-    action: (editor) => editor.chain().focus().toggleBold().run(),
-    isActive: (editor) => editor.isActive("bold"),
-    canExecute: (editor) => editor.can().chain().focus().toggleBold().run() && !editor.isActive("codeBlock")
-  },
-  {
-    value: "italic",
-    label: "Italic",
-    icon: LuItalic,
-    action: (editor) => editor.chain().focus().toggleItalic().run(),
-    isActive: (editor) => editor.isActive("italic"),
-    canExecute: (editor) => editor.can().chain().focus().toggleItalic().run() && !editor.isActive("codeBlock")
-  },
-  {
-    value: "underline",
-    label: "Underline",
-    icon: LuUnderline,
-    action: (editor) => editor.chain().focus().toggleUnderline().run(),
-    isActive: (editor) => editor.isActive("underline"),
-    canExecute: (editor) => editor.can().chain().focus().toggleUnderline().run() && !editor.isActive("codeBlock")
-  },
-  {
-    value: "strikethrough",
-    label: "Strikethrough",
-    icon: LuStrikethrough,
-    action: (editor) => editor.chain().focus().toggleStrike().run(),
-    isActive: (editor) => editor.isActive("strike"),
-    canExecute: (editor) => editor.can().chain().focus().toggleStrike().run() && !editor.isActive("codeBlock")
-  },
-  {
-    value: "code",
-    label: "Code",
-    icon: LuCode,
-    action: (editor) => editor.chain().focus().toggleCode().run(),
-    isActive: (editor) => editor.isActive("code"),
-    canExecute: (editor) => editor.can().chain().focus().toggleCode().run() && !editor.isActive("codeBlock")
-  },
-  {
-    value: "clearFormatting",
-    label: "Clear formatting",
-    icon: LuRemoveFormatting,
-    action: (editor) => editor.chain().focus().unsetAllMarks().run(),
-    isActive: () => false,
-    canExecute: (editor) => editor.can().chain().focus().unsetAllMarks().run() && !editor.isActive("codeBlock")
-  }
-];
-var FormatTool = ({ editor }) => {
-  return /* @__PURE__ */ React25.createElement(ToolbarSection, { editor, actions, mainActionCount: 1 });
-};
-var actions2 = [
-  {
-    value: "codeBlock",
-    label: "Code block",
-    icon: LuCode,
-    action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
-    isActive: (editor) => editor.isActive("codeBlock"),
-    canExecute: (editor) => editor.can().chain().focus().toggleCodeBlock().run()
-  },
-  {
-    value: "blockquote",
-    label: "Blockquote",
-    icon: LuQuote,
-    action: (editor) => editor.chain().focus().toggleBlockquote().run(),
-    isActive: (editor) => editor.isActive("blockquote"),
-    canExecute: (editor) => editor.can().chain().focus().toggleBlockquote().run()
-  },
-  {
-    value: "horizontalRule",
-    label: "Divider",
-    icon: LuMinus,
-    action: (editor) => editor.chain().focus().setHorizontalRule().run(),
-    isActive: () => false,
-    canExecute: (editor) => editor.can().chain().focus().setHorizontalRule().run()
-  }
-];
-var InsertTool = ({ editor }) => {
-  return /* @__PURE__ */ React25.createElement(ToolbarSection, { editor, actions: actions2, mainActionCount: 0 });
-};
-var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "sb:fixed sb:inset-0 sb:z-50 sb:bg-black/80 sb- data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(DialogPortal, null, /* @__PURE__ */ React25.createElement(DialogOverlay, null), /* @__PURE__ */ React25.createElement(
-  DialogPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "sb:fixed sb:left-[50%] sb:top-[50%] sb:z-50 sb:grid sb:w-full sb:max-w-lg sb:translate-x-[-50%] sb:translate-y-[-50%] sb:gap-4 sb:border sb:bg-background sb:p-6 sb:shadow-lg sb:duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sb:sm:rounded-lg",
-      className
-    ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React25.createElement(DialogPrimitive.Close, { className: "sb:absolute sb:right-4 sb:top-4 sb:rounded-sm sb:opacity-70 sb:ring-offset-background sb:transition-opacity sb:hover:opacity-100 sb:focus:outline-hidden sb:focus:ring-2 sb:focus:ring-ring sb:focus:ring-offset-2 sb:disabled:pointer-events-none sb:data-[state=open]:bg-accent sb:data-[state=open]:text-muted-foreground" }, /* @__PURE__ */ React25.createElement(X, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25.createElement("span", { className: "sb:sr-only" }, "Close"))
-)));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ React25.createElement(
-  "div",
-  {
-    className: cn(
-      "sb:flex sb:flex-col sb:gap-1.5 sb:text-center sb:sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn(
-      "sb:text-lg sb:font-semibold sb:leading-none sb:tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("sb:text-sm sb:text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var labelVariants = cva(
-  "sb:text-sm sb:font-medium sb:leading-none sb:peer-disabled:cursor-not-allowed sb:peer-disabled:opacity-70"
-);
-var Label2 = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label2.displayName = LabelPrimitive.Root.displayName;
-
-// src/components/ui/form.tsx
-var Form = FormProvider;
-var FormFieldContext = React25.createContext(
-  {}
-);
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ React25.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React25.createElement(Controller, { ...props }));
-};
-var useFormField = () => {
-  const fieldContext = React25.useContext(FormFieldContext);
-  const itemContext = React25.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-  const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-var FormItemContext = React25.createContext(
-  {}
-);
-var FormItem = React25.forwardRef(({ className, ...props }, ref) => {
-  const id = React25.useId();
-  return /* @__PURE__ */ React25.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React25.createElement("div", { ref, className: cn("sb:flex sb:flex-col sb:gap-2", className), ...props }));
-});
-FormItem.displayName = "FormItem";
-var FormLabel = React25.forwardRef(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ React25.createElement(
-    Label2,
-    {
-      ref,
-      className: cn(error && "sb:text-destructive", className),
-      htmlFor: formItemId,
-      ...props
-    }
-  );
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React25.forwardRef(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ React25.createElement(
-    Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...props
-    }
-  );
-});
-FormControl.displayName = "FormControl";
-var FormDescription = React25.forwardRef(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ React25.createElement(
-    "p",
-    {
-      ref,
-      id: formDescriptionId,
-      className: cn("sb:text-[0.8rem] sb:text-muted-foreground", className),
-      ...props
-    }
-  );
-});
-FormDescription.displayName = "FormDescription";
-var FormMessage = React25.forwardRef(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement(
-    "p",
-    {
-      ref,
-      id: formMessageId,
-      className: cn("sb:text-[0.8rem] sb:font-medium sb:text-destructive", className),
-      ...props
-    },
-    body
-  );
-});
-FormMessage.displayName = "FormMessage";
-var Input = React25.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ React25.createElement(
-      "input",
-      {
-        type,
-        className: cn(
-          "sb:flex sb:h-9 sb:w-full sb:rounded-md sb:border sb:border-input sb:bg-transparent sb:px-3 sb:py-1 sb:text-base sb:shadow-sm sb:transition-colors sb:file:border-0 sb:file:bg-transparent sb:file:text-sm sb:file:font-medium sb:file:text-foreground sb:placeholder:text-muted-foreground sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:cursor-not-allowed sb:disabled:opacity-50 sb:md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-var AdvancedInput = React25.forwardRef(
-  ({ prepend, append, ...props }, ref) => {
-    return /* @__PURE__ */ React25.createElement("div", { className: "sb:relative" }, /* @__PURE__ */ React25.createElement(Input, { ref, className: "sb:pl-9 sb:pr-7 sb:text-right", ...props }), prepend && /* @__PURE__ */ React25.createElement("div", { className: "sb:absolute sb:font-roboto sb:top-1/2 sb:left-3 sb:-translate-y-1/2" }, prepend), append && /* @__PURE__ */ React25.createElement("div", { className: "sb:absolute sb:font-roboto sb:top-1/2 sb:right-3 sb:-translate-y-1/2" }, append));
-  }
-);
-AdvancedInput.displayName = "AdvancedInput";
-var Switch = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SwitchPrimitives.Root,
-  {
-    className: cn(
-      "sb:peer sb:inline-flex sb:h-5 sb:w-9 sb:shrink-0 sb:cursor-pointer sb:items-center sb:rounded-full sb:border-2 sb:border-transparent sb:shadow-sm sb:transition-colors sb:focus-visible:outline-hidden sb:focus-visible:ring-2 sb:focus-visible:ring-ring sb:focus-visible:ring-offset-2 sb:focus-visible:ring-offset-background sb:disabled:cursor-not-allowed sb:disabled:opacity-50 sb:data-[state=checked]:bg-primary sb:data-[state=unchecked]:bg-input",
-      className
-    ),
-    ...props,
-    ref
-  },
-  /* @__PURE__ */ React25.createElement(
-    SwitchPrimitives.Thumb,
-    {
-      className: cn(
-        "sb:pointer-events-none sb:block sb:h-4 sb:w-4 sb:rounded-full sb:bg-background sb:shadow-lg sb:ring-0 sb:transition-transform sb:data-[state=checked]:translate-x-4 sb:data-[state=unchecked]:translate-x-0"
-      )
-    }
-  )
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-var LinkTool = ({ editor }) => {
-  const [open, setOpen] = React25.useState(false);
-  const { from, to } = editor.state.selection;
-  const text = editor.state.doc.textBetween(from, to, " ");
-  const handleSetLink = React25.useCallback(
-    (url, text2, openInNewTab) => {
-      editor.chain().focus().extendMarkRange("link").insertContent({
-        type: "text",
-        text: text2 || url,
-        marks: [
-          {
-            type: "link",
-            attrs: {
-              href: url,
-              target: openInNewTab ? "_blank" : ""
-            }
-          }
-        ]
-      }).setLink({ href: url }).run();
-      editor.commands.enter();
-      setOpen(false);
-    },
-    [editor]
-  );
-  return /* @__PURE__ */ React25.createElement(Dialog, { open, onOpenChange: setOpen }, /* @__PURE__ */ React25.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(
-    ToolbarButton,
-    {
-      pressed: editor.isActive("link"),
-      disabled: editor.isActive("codeBlock")
-    },
-    /* @__PURE__ */ React25.createElement(LuLink2, { className: "sb:size-5" })
-  )), /* @__PURE__ */ React25.createElement(DialogContent, { className: "sb:w-full sb:min-w-80" }, /* @__PURE__ */ React25.createElement(LinkForm, { onSave: handleSetLink, defaultText: text })));
-};
-var schema = z.object({
-  url: z.string().min(0),
-  text: z.string().optional(),
-  isNewTab: z.boolean().optional()
-});
-var LinkForm = ({
-  onSave,
-  defaultIsNewTab,
-  defaultUrl,
-  defaultText
-}) => {
-  const form = useForm({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      url: defaultUrl || "",
-      text: defaultText || "",
-      isNewTab: defaultIsNewTab || false
-    }
-  });
-  const handleSubmit = (values) => {
-    onSave(values.url, values.text, values.isNewTab);
-  };
-  return /* @__PURE__ */ React25.createElement(Form, { ...form }, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-6" }, /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "url",
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "URL"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(Input, { type: "url", ...field, autoFocus: true })), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "text",
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "Text"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(Input, { ...field })), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "isNewTab",
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:items-center sb:gap-2" }, /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(
-        Switch,
-        {
-          checked: field.value,
-          onCheckedChange: field.onChange
-        }
-      )), /* @__PURE__ */ React25.createElement(FormLabel, null, "Open in new tab")), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement(Button, { type: "button", onClick: form.handleSubmit(handleSubmit) }, "Save")));
-};
-var actions3 = [
-  {
-    value: "orderedList",
-    label: "Numbered list",
-    icon: LuListOrdered,
-    action: (editor) => editor.chain().focus().toggleOrderedList().run(),
-    isActive: (editor) => editor.isActive("orderedList"),
-    canExecute: (editor) => editor.can().chain().focus().toggleOrderedList().run()
-  },
-  {
-    value: "bulletList",
-    label: "Bullet list",
-    icon: LuList,
-    action: (editor) => editor.chain().focus().toggleBulletList().run(),
-    isActive: (editor) => editor.isActive("bulletList"),
-    canExecute: (editor) => editor.can().chain().focus().toggleBulletList().run()
-  }
-];
-var ListTool = ({ editor }) => {
-  return /* @__PURE__ */ React25.createElement(ToolbarSection, { editor, actions: actions3, mainActionCount: 2 });
-};
-
-// src/features/rich-text-editor/components/toolbar.tsx
-var Toolbar = ({ editor }) => {
-  return /* @__PURE__ */ React25.createElement("div", { className: "sb:shrink-0 sb:overflow-x-auto sb:border-b sb:border-border sb:p-2" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:w-max sb:items-center sb:gap-px" }, /* @__PURE__ */ React25.createElement(ElementTool, { editor }), /* @__PURE__ */ React25.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25.createElement(FormatTool, { editor }), /* @__PURE__ */ React25.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25.createElement(ColorTool, { editor }), /* @__PURE__ */ React25.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25.createElement(ListTool, { editor }), /* @__PURE__ */ React25.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25.createElement(LinkTool, { editor }), /* @__PURE__ */ React25.createElement(InsertTool, { editor })));
-};
-var ToolbarSection = ({
-  editor,
-  actions: actions4,
-  mainActionCount = 0
-}) => {
-  const { mainActions, dropdownActions } = React25.useMemo(() => {
-    return {
-      mainActions: actions4.slice(0, mainActionCount),
-      dropdownActions: actions4.slice(mainActionCount)
-    };
-  }, [actions4, mainActionCount]);
-  const isDropdownActive = React25.useMemo(() => {
-    return dropdownActions.some((action) => action.isActive(editor));
-  }, [dropdownActions, editor]);
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, mainActions.map((action) => /* @__PURE__ */ React25.createElement(
-    ToolbarButton,
-    {
-      key: action.label,
-      onClick: () => action.action(editor),
-      disabled: !action.canExecute(editor),
-      pressed: action.isActive(editor)
-    },
-    /* @__PURE__ */ React25.createElement(action.icon, { className: "sb:size-5" })
-  )), dropdownActions.length > 0 && /* @__PURE__ */ React25.createElement(DropdownMenu, null, /* @__PURE__ */ React25.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(ToolbarButton, { pressed: isDropdownActive }, /* @__PURE__ */ React25.createElement(LuEllipsis, { className: "sb:size-5" }))), /* @__PURE__ */ React25.createElement(DropdownMenuContent, { align: "start" }, dropdownActions.map((action) => /* @__PURE__ */ React25.createElement(
-    DropdownMenuItem,
-    {
-      key: action.label,
-      className: cn("sb:flex sb:flex-row sb:items-center sb:gap-2", {
-        "sb:bg-accent": action.isActive(editor)
-      }),
-      onClick: () => action.action(editor),
-      disabled: !action.canExecute(editor)
-    },
-    /* @__PURE__ */ React25.createElement(action.icon, { className: "sb:size-4" }),
-    /* @__PURE__ */ React25.createElement("span", null, action.label)
-  )))));
-};
-var ToolbarButton = React25.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React25.createElement(
-    Toggle,
-    {
-      size: "sm",
-      className: cn(
-        "sb:size-8 sb:p-0 sb:data-[state=on]:bg-accent",
-        { "sb:bg-accent": props.pressed },
-        className
-      ),
-      ref,
-      ...props
-    }
-  );
-});
-ToolbarButton.displayName = "ToolbarButton";
-
-// src/features/rich-text-editor/components/rich-text-editor.tsx
-var RichTextEditor = ({
-  value,
-  onChange,
-  className,
-  editorClassName,
-  editorContentClassName,
-  ...props
-}) => {
-  console.count("re-render RichTextEditor");
-  const editor = useRichTextEditor({
-    value,
-    onUpdate: onChange,
-    editorClassName: cn("sb:flex-1 sb:px-3 sb:py-1", editorClassName),
-    ...props
-  });
-  if (!editor) {
-    return null;
-  }
-  return /* @__PURE__ */ React25.createElement(
-    "div",
-    {
-      className: cn(
-        "sb:flex sb:h-auto sb:min-h-72 sb:w-full sb:flex-col sb:rounded-md sb:border sb:border-input sb:shadow-sm sb:focus-within:border-primary",
-        className
-      )
-    },
-    /* @__PURE__ */ React25.createElement(Toolbar, { editor }),
-    /* @__PURE__ */ React25.createElement(
-      EditorContent,
-      {
-        editor,
-        className: cn(
-          "sb-editflow prose sb:flex sb:flex-1",
-          editorContentClassName
-        )
-      }
-    )
-  );
-};
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}) {
-  return /* @__PURE__ */ React25.createElement(
-    DayPicker,
-    {
-      showOutsideDays,
-      className: cn("sb:p-3 sb:font-roboto", className),
-      classNames: {
-        months: "sb:flex sb:flex-col sb:sm:flex-row sb:gap-y-4 sb:sm:gap-x-4 sb:sm:gap-y-0",
-        month: "sb:gap-y-4",
-        caption: "sb:flex sb:justify-center sb:pt-1 sb:relative sb:items-center",
-        caption_label: "sb:text-sm sb:font-medium",
-        nav: "sb:gap-x-1 sb:flex sb:items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "sb:h-7 sb:w-7 sb:bg-transparent sb:p-0 sb:opacity-50 sb:hover:opacity-100"
-        ),
-        nav_button_previous: "sb:absolute sb:left-1",
-        nav_button_next: "sb:absolute sb:right-1",
-        table: "sb:w-full sb:border-collapse sb:flex sb:flex-col sb:gap-y-1",
-        head_row: "sb:flex",
-        head_cell: "sb:text-muted-foreground sb:rounded-md sb:w-8 sb:font-normal sb:text-[0.8rem]",
-        row: "sb:flex sb:w-full sb:mt-2",
-        cell: cn(
-          "sb:relative sb:p-0 sb:text-center sb:text-sm sb:focus-within:relative sb:focus-within:z-20 sb:[&:has([aria-selected])]:bg-accent sb:[&:has([aria-selected].day-outside)]:bg-accent/50 sb:[&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range" ? "sb:[&:has(>.day-range-end)]:rounded-r-md sb:[&:has(>.day-range-start)]:rounded-l-md sb:first:[&:has([aria-selected])]:rounded-l-md sb:last:[&:has([aria-selected])]:rounded-r-md" : "sb:[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "sb:h-8 sb:w-8 sb:p-0 sb:font-normal sb:aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "sb:bg-primary sb:text-primary-foreground sb:hover:bg-primary sb:hover:text-primary-foreground sb:focus:bg-primary sb:focus:text-primary-foreground",
-        day_today: "sb:bg-accent sb:text-accent-foreground",
-        day_outside: "day-outside sb:text-muted-foreground sb:opacity-50 sb:aria-selected:bg-accent/50 sb:aria-selected:text-muted-foreground sb:aria-selected:opacity-30",
-        day_disabled: "sb:text-muted-foreground sb:opacity-50",
-        day_range_middle: "sb:aria-selected:bg-accent sb:aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames
-      },
-      components: {
-        IconLeft: () => /* @__PURE__ */ React25.createElement(ChevronLeftIcon, { className: "sb:h-4 sb:w-4" }),
-        IconRight: () => /* @__PURE__ */ React25.createElement(ChevronRightIcon, { className: "sb:h-4 sb:w-4" })
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
-var ColorPicker = (props) => {
-  const { color, onColorChange, className } = props;
-  const colors = props.colors ?? [
-    "#000000",
-    "#ffffff",
-    "#0f172a",
-    "#F1F5F9",
-    "#64748B",
-    "#E6007E",
-    "#F8FAFC",
-    "#009DD1",
-    "#FF0000"
-  ];
-  return /* @__PURE__ */ React25.createElement(Popover, null, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(
-    Button,
-    {
-      variant: "outline",
-      size: "sm",
-      className: cn(
-        "sb:justify-start sb:text-left sb:font-normal sb:normal-case sb:w-full",
-        !color && "sb:text-muted-foreground",
-        className
-      )
-    },
-    /* @__PURE__ */ React25.createElement("div", { className: "sb:w-full sb:flex sb:items-center sb:gap-2" }, color ? /* @__PURE__ */ React25.createElement(
-      "div",
-      {
-        className: "sb:h-4 sb:w-4 sb:rounded sb:bg-center! sb:bg-cover! sb:transition-all sb:border",
-        style: { background: color }
-      }
-    ) : /* @__PURE__ */ React25.createElement(PaintbrushIcon, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25.createElement("div", { className: "sb:truncate sb:flex-1" }, color ? color : "Kies een kleur"))
-  )), /* @__PURE__ */ React25.createElement(PopoverContent, { className: "sb:w-64 sb:p-4 sb:flex sb:flex-wrap sb:gap-1" }, colors.map((s) => /* @__PURE__ */ React25.createElement(
-    "div",
-    {
-      key: s,
-      style: { background: s },
-      className: "sb:rounded-md sb:h-6 sb:w-6 sb:cursor-pointer sb:active:scale-105 sb:border",
-      onClick: () => onColorChange(s)
-    }
-  ))));
-};
-var MediaInput = (props) => {
-  const { onFilesChange, limit = 32, multiple = false, onError } = props;
-  const id = React25.useId();
-  const [queue, setQueue] = React25.useState([]);
-  const [sources, setSources] = React25.useState(props.files ?? []);
-  const maxConcurrentUploads = 3;
-  const uploadingCountRef = React25.useRef(0);
-  const handleFilesAdd = async (e) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) {
-      return;
-    }
-    if (files.length + sources.length > (multiple ? limit : 1)) {
-      onError?.(
-        new MediaInputError(
-          `Maximaal ${limit} bestanden.`,
-          `Je probeerde nu ${files.length + sources.length} bestanden toe te voegen, maar je mag er maximaal ${limit} toevoegen.`
-        )
-      );
-      return;
-    }
-    const queue2 = Array.from(files);
-    setQueue(queue2);
-    for (const file of queue2) {
-      try {
-        while (uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0) {
-          await new Promise((resolve) => setTimeout(resolve, 300));
-        }
-        uploadingCountRef.current++;
-        const formData = new FormData();
-        formData.append("file", file);
-        const res = await fetch("/api/simple-builder/file/upload", {
-          method: "POST",
-          body: formData
-        });
-        if (res === void 0 || !res.ok) {
-          onError?.(
-            new MediaInputError(
-              "Bestand uploaden misulukt",
-              `Bestand ${file.name} kon niet worden ge\xFCpload.`
-            )
-          );
-          continue;
-        }
-        const { data: url } = await res.json();
-        if (!url) {
-          onError?.(
-            new MediaInputError(
-              "Bestand uploaden misulukt",
-              `De URL van bestand ${file.name} kon niet worden opgehaald.`
-            )
-          );
-          continue;
-        }
-        setSources((prev) => [...prev, url]);
-        onFilesChange?.([...sources, url]);
-      } catch (e2) {
-        onError?.(
-          new MediaInputError(
-            "Bestand uploaden misulukt",
-            `Bestand ${file.name} kon niet worden ge\xFCpload.`
-          )
-        );
-      } finally {
-        setQueue((prev) => prev.filter((f) => f !== file));
-        uploadingCountRef.current--;
-      }
-    }
-  };
-  const handleSourceDelete = async (src) => {
-    setSources((prev) => prev.filter((s) => s !== src));
-    onFilesChange?.(sources.filter((s) => s !== src));
-    await fetch("/api/uploadthing/delete", {
-      method: "POST",
-      body: JSON.stringify({ src })
-    });
-  };
-  return /* @__PURE__ */ React25.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React25.createElement(
-    Image,
-    {
-      src,
-      alt: "",
-      fill: true,
-      className: "sb:absolute sb:inset-0 sb:object-cover sb:pointer-events-none"
-    }
-  ), /* @__PURE__ */ React25.createElement("div", { className: "sb:absolute sb:right-1 sb:top-1 sb:z-30 sb:flex sb:items-center sb:justify-end sb:gap-3 sb:opacity-0 sb:transition-opacity sb:group-hover:opacity-100" }, /* @__PURE__ */ React25.createElement(
-    "button",
-    {
-      className: "sb:flex sb:h-8 sb:w-8 sb:items-center sb:justify-center sb:rounded-full sb:border sb:bg-secondary sb:text-secondary-foreground sb:opacity-90 sb:shadow sb:transition-opacity sb:hover:opacity-100",
-      onClick: () => handleSourceDelete(src)
-    },
-    /* @__PURE__ */ React25.createElement(Trash2Icon, { className: "sb:h-4 sb:w-4" })
-  )))), queue.map((_, i) => /* @__PURE__ */ React25.createElement(
-    MediaInputItem,
-    {
-      key: i,
-      className: cn(
-        "sb:flex sb:h-28 sb:w-28 sb:items-center sb:justify-center",
-        props.itemClassName
-      )
-    },
-    /* @__PURE__ */ React25.createElement(Loader2Icon, { className: "sb:h-6 sb:w-6 sb:animate-spin" })
-  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React25.createElement(
-    "label",
-    {
-      htmlFor: id,
-      className: cn(
-        "sb:flex sb:h-28 sb:w-28 sb:cursor-pointer sb:items-center sb:justify-center sb:rounded-lg sb:border",
-        props.itemClassName
-      )
-    },
-    /* @__PURE__ */ React25.createElement(PlusIcon, { className: "sb:h-6 sb:w-6" }),
-    /* @__PURE__ */ React25.createElement(
-      "input",
-      {
-        id,
-        type: "file",
-        onChange: handleFilesAdd,
-        multiple,
-        accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
-        className: "sb:hidden"
-      }
-    )
-  ) : null);
-};
-var MediaInputItem = (props) => {
-  return /* @__PURE__ */ React25.createElement(
-    "div",
-    {
-      className: cn(
-        "sb:relative sb:h-28 sb:w-28 sb:overflow-hidden sb:rounded-lg sb:border",
-        props.className
-      )
-    },
-    props.children
-  );
-};
-var MediaInputError = class extends Error {
-  title;
-  description;
-  constructor(message, description) {
-    super(message);
-    this.title = message;
-    this.description = description;
-  }
-};
-var Select = SelectPrimitive.Root;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "sb:flex sb:h-10 sb:w-full sb:items-center sb:justify-between sb:rounded-md sb:border sb:border-input sb:bg-background sb:px-3 sb:py-2 sb:text-sm sb:ring-offset-background sb:placeholder:text-muted-foreground sb:focus:outline-hidden sb:focus:ring-2 sb:focus:ring-ring sb:focus:ring-offset-2 sb:disabled:cursor-not-allowed sb:disabled:opacity-50 sb:[&>span]:line-clamp-1",
-      className
-    ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React25.createElement(ChevronDown, { className: "sb:h-4 sb:w-4 sb:opacity-50" }))
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    className: cn(
-      "sb:flex sb:cursor-default sb:items-center sb:justify-center sb:py-1",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement(ChevronUp, { className: "sb:h-4 sb:w-4" })
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    className: cn(
-      "sb:flex sb:cursor-default sb:items-center sb:justify-center sb:py-1",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement(ChevronDown, { className: "sb:h-4 sb:w-4" })
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React25.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React25.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "sb:relative sb:z-50 sb:max-h-96 sb:min-w-32 sb:overflow-hidden sb:rounded-md sb:border sb:bg-popover sb:text-popover-foreground sb:shadow-md data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
-      position === "popper" && "sb:data-[side=bottom]:translate-y-1 sb:data-[side=left]:-translate-x-1 sb:data-[side=right]:translate-x-1 sb:data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement(SelectScrollUpButton, null),
-  /* @__PURE__ */ React25.createElement(
-    SelectPrimitive.Viewport,
-    {
-      className: cn(
-        "sb:p-1",
-        position === "popper" && "sb:h-(--radix-select-trigger-height) sb:w-full sb:min-w-(--radix-select-trigger-width)"
-      )
-    },
-    children
-  ),
-  /* @__PURE__ */ React25.createElement(SelectScrollDownButton, null)
-)));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:font-semibold",
-      className
-    ),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "sb:relative sb:flex sb:w-full sb:cursor-default sb:select-none sb:items-center sb:rounded-sm sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:outline-hidden sb:focus:bg-accent sb:focus:text-accent-foreground sb:data-disabled:pointer-events-none sb:data-disabled:opacity-50",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement("span", { className: "sb:absolute sb:left-2 sb:flex sb:h-3.5 sb:w-3.5 sb:items-center sb:justify-center" }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(Check, { className: "sb:h-4 sb:w-4" }))),
-  /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children)
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: cn("sb:-mx-1 sb:my-1 sb:h-px sb:bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var Textarea = React25.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ React25.createElement(
-      "textarea",
-      {
-        className: cn(
-          "sb:flex sb:min-h-[60px] sb:font-roboto sb:w-full sb:rounded-md sb:border sb:border-input sb:bg-transparent sb:px-3 sb:py-2 sb:text-sm sb:shadow-sm sb:placeholder:text-muted-foreground sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:cursor-not-allowed sb:disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-
-// src/components/container-item-form.tsx
-var ContainerItemForm = (props) => {
-  const { item } = props;
-  const { patchItem } = useBuilder();
-  const component = builder.getComponent(item.component);
-  if (!component) {
-    throw new Error(
-      `[simple-builder]: Component with id ${item.component} not found in container item form component`
-    );
-  }
-  const form = useForm({
-    defaultValues: (component.inputs || []).reduce(
-      (acc, input) => ({
-        ...acc,
-        [input.name]: item?.props?.[input.name] ?? input.defaultValue
-      }),
-      {}
-    )
-  });
-  const onSubmit = React25.useCallback(
-    (values) => {
-      patchItem(item.id, {
-        props: values
-      });
-    },
-    [patchItem, item.id]
-  );
-  return /* @__PURE__ */ React25.createElement(Form, { ...form }, /* @__PURE__ */ React25.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4 sb:p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React25.createElement(
-    RenderFormField,
-    {
-      key: input.name,
-      type: input.type,
-      input,
-      form
-    }
-  )), /* @__PURE__ */ React25.createElement(Button, { type: "submit", className: "w-full" }, "Opslaan"))));
-};
-var RenderFormField = (props) => {
-  const { type, input, form } = props;
-  const fieldArray = useFieldArray({
-    control: form.control,
-    name: input.name
-  });
-  if (input.multiple) {
-    return /* @__PURE__ */ React25.createElement("fieldset", { className: "sb:flex sb:flex-col sb:gap-2" }, /* @__PURE__ */ React25.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4" }, fieldArray.fields.map(
-      (field, i) => type !== "grouped" ? /* @__PURE__ */ React25.createElement(
-        FormField,
-        {
-          key: field.id,
-          control: form.control,
-          name: `${input.name}.${i}`,
-          render: ({ field: field2 }) => /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:items-center sb:gap-3" }, /* @__PURE__ */ React25.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React25.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React25.createElement(XIcon, { className: "sb:h-4 sb:w-4" })))
-        }
-      ) : /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:items-center sb:relative" }, /* @__PURE__ */ React25.createElement(
-        RenderFormField,
-        {
-          key: field.id,
-          form,
-          type,
-          input: {
-            ...input,
-            name: `${input.name}.${i}`,
-            multiple: false,
-            friendlyName: ""
-          }
-        }
-      ), /* @__PURE__ */ React25.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => fieldArray.remove(i),
-          className: "sb:absolute sb:top-2 sb:right-2 sb:text-foreground/70 sb:hover:text-foreground"
-        },
-        /* @__PURE__ */ React25.createElement(XIcon, { className: "sb:h-4 sb:w-4" })
-      ))
-    ), /* @__PURE__ */ React25.createElement(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        className: cn(
-          "sb:w-[89%] sb:border-2 sb:border-dashed sb:text-muted-foreground",
-          type === "grouped" && "sb:w-full"
-        ),
-        onClick: () => fieldArray.append(void 0)
-      },
-      /* @__PURE__ */ React25.createElement(PlusCircleIcon, { className: "sb:h-4 sb:w-4" })
-    )));
-  }
-  switch (type) {
-    case "string":
-    case "number":
-    case "longText":
-    case "color":
-    case "date":
-    case "file":
-      return /* @__PURE__ */ React25.createElement(
-        FormField,
-        {
-          key: input.name,
-          control: form.control,
-          name: input.name,
-          render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(RenderInput, { type, field, options: input?.enum })), input.helperText && /* @__PURE__ */ React25.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25.createElement(FormMessage, null))
-        }
-      );
-    case "richText":
-      return /* @__PURE__ */ React25.createElement(Dialog, null, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2" }, /* @__PURE__ */ React25.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(Button, { variant: "outline", className: "sb:w-full", type: "button" }, input.friendlyName || input.name, " bewerken"))), /* @__PURE__ */ React25.createElement(DialogContent, { className: "sb:max-w-3xl sb:p-0" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:h-full sb:max-h-svh sb:w-full sb:flex-col sb:sm:max-h-[90svh]" }, /* @__PURE__ */ React25.createElement(DialogHeader, { className: "sb:flex-none sb:border-b sb:p-6" }, /* @__PURE__ */ React25.createElement(DialogTitle, null, input.friendlyName || input.name, " editor")), /* @__PURE__ */ React25.createElement("div", { className: "sb:flex-1 sb:overflow-y-auto" }, /* @__PURE__ */ React25.createElement(
-        FormField,
-        {
-          key: input.name,
-          control: form.control,
-          name: input.name,
-          render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25.createElement(FormMessage, null))
-        }
-      )))));
-    case "boolean":
-      return /* @__PURE__ */ React25.createElement(
-        FormField,
-        {
-          key: input.name,
-          control: form.control,
-          name: input.name,
-          render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, { className: "sb:flex sb:flex-row sb:items-center sb:justify-between sb:space-y-0" }, /* @__PURE__ */ React25.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25.createElement(FormMessage, null))
-        }
-      );
-    case "grouped":
-      return /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2 sb:w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React25.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2 sb:p-3 sb:w-full sb:border sb:rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React25.createElement(
-        RenderFormField,
-        {
-          key: `${input.name}.${sub.name}`,
-          type: sub.type,
-          input: {
-            ...sub,
-            name: `${input.name}.${sub.name}`
-          },
-          form
-        }
-      ))));
-    default:
-      throw new Error(
-        `[simple-builder]: Input type "${props.type}" not supported in render form field.`
-      );
-  }
-};
-var RenderInput = (props) => {
-  const { type, options, field } = props;
-  switch (type) {
-    case "string":
-      if (!options)
-        return /* @__PURE__ */ React25.createElement(Input, { ...field });
-      return /* @__PURE__ */ React25.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value }, /* @__PURE__ */ React25.createElement(SelectTrigger, null, /* @__PURE__ */ React25.createElement(SelectValue, null)), /* @__PURE__ */ React25.createElement(SelectContent, null, options.map((option) => /* @__PURE__ */ React25.createElement(SelectItem, { key: option, value: option }, option))));
-    case "longText":
-      return /* @__PURE__ */ React25.createElement(Textarea, { ...field });
-    case "richText":
-      return /* @__PURE__ */ React25.createElement(RichTextEditor, { ...field });
-    case "number":
-      return /* @__PURE__ */ React25.createElement(Input, { type: "number", ...field });
-    case "color":
-      return /* @__PURE__ */ React25.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
-    case "date":
-      return /* @__PURE__ */ React25.createElement(Popover, null, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: cn(
-            "sb:w-full sb:flex sb:justify-start sb:text-left sb:font-normal",
-            !field.value && "sb:text-muted-foreground"
-          )
-        },
-        /* @__PURE__ */ React25.createElement(CalendarIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }),
-        field.value && !Array.isArray(field.value) ? format(field.value, "PPP") : /* @__PURE__ */ React25.createElement("span", null, "Pick a date")
-      )), /* @__PURE__ */ React25.createElement(PopoverContent, { className: "sb:w-auto sb:p-0", align: "start" }, /* @__PURE__ */ React25.createElement(
-        Calendar,
-        {
-          mode: "single",
-          selected: field.value,
-          onSelect: field.onChange,
-          initialFocus: true
-        }
-      )));
-    case "boolean":
-      return /* @__PURE__ */ React25.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
-    case "file":
-      return /* @__PURE__ */ React25.createElement(
-        MediaInput,
-        {
-          className: "sb:grid sb:grid-cols-2 sb:gap-1",
-          itemClassName: "sb:aspect-video sb:h-auto sb:w-full",
-          multiple: false,
-          files: field.value ? [field.value] : [],
-          onFilesChange: (files) => field.onChange(files[0]),
-          onError: (e) => console.error(
-            "[media-input]: Title: " + e?.title,
-            "media-input: Error: " + e?.description
-          )
-        }
-      );
-    default:
-      throw new Error(
-        `[simple-builder]: Input type "${props.type}" not supported in render input.`
-      );
-  }
-};
-var Tabs = TabsPrimitive.Root;
-var tabsListVariants = tv({
-  variants: {
-    variant: {
-      contained: "sb:inline-flex sb:h-10 sb:items-center sb:justify-center sb:rounded-md sb:bg-muted sb:p-1 sb:text-muted-foreground",
-      text: "sb:flex sb:items-center sb:border-b sb:px-4 sb:gap-6"
-    }
-  },
-  defaultVariants: {
-    variant: "contained"
-  }
-});
-var TabsList = React25.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: tabsListVariants({ variant, className }),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-var tabsTriggerVariants = tv({
-  variants: {
-    variant: {
-      contained: "sb:inline-flex sb:items-center sb:justify-center sb:whitespace-nowrap sb:rounded-sm sb:px-3 sb:py-1.5 sb:text-sm sb:font-medium sb:ring-offset-background sb:transition-all sb:focus-visible:outline-hidden sb:focus-visible:ring-2 sb:focus-visible:ring-ring sb:focus-visible:ring-offset-2 sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:data-[state=active]:bg-background sb:data-[state=active]:text-foreground sb:data-[state=active]:shadow-sm",
-      text: "sb:inline-flex sb:font-roboto sb:items-center sb:justify-center sb:whitespace-nowrap sb:py-3 sb:text-sm sb:font-medium sb:transition-all sb:focus-visible:outline-hidden sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:data-[state=active]:border-black sb:border-b-2 sb:border-transparent sb:data-[state=active]:text-foreground sb:text-muted-foreground"
-    }
-  },
-  defaultVariants: {
-    variant: "contained"
-  }
-});
-var TabsTrigger = React25.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: tabsTriggerVariants({ variant, className }),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "sb:ring-offset-background sb:font-roboto sb:focus-visible:outline-hidden sb:focus-visible:ring-2 sb:focus-visible:ring-ring sb:focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-// src/components/ui/background-picker.tsx
-var BackgroundPicker = (props) => {
-  const { background, onBackgroundChange, className } = props;
-  const solids = props.solids ?? [
-    "#000000",
-    "#ffffff",
-    "#0f172a",
-    "#F1F5F9",
-    "#64748B",
-    "#E6007E",
-    "#F8FAFC",
-    "#009DD1",
-    "#FF0000"
-  ];
-  const gradients = props.gradients ?? [
-    "linear-gradient(to top left,#accbee,#e7f0fd)",
-    "linear-gradient(to top left,#d5d4d0,#d5d4d0,#eeeeec)"
-  ];
-  const images = props.images ?? [
-    "url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
-    "url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
-  ];
-  const defaultTab = React25.useMemo(() => {
-    if (background.includes("url"))
-      return "image";
-    if (background.includes("gradient"))
-      return "gradient";
-    return "solid";
-  }, [background]);
-  return /* @__PURE__ */ React25.createElement(Popover, null, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(
-    Button,
-    {
-      variant: "outline",
-      size: "sm",
-      className: cn(
-        "sb:justify-start sb:text-left sb:font-normal sb:normal-case sb:w-full",
-        !background && "sb:text-muted-foreground",
-        className
-      )
-    },
-    /* @__PURE__ */ React25.createElement("div", { className: "sb:w-full sb:flex sb:items-center sb:gap-2" }, background ? /* @__PURE__ */ React25.createElement(
-      "div",
-      {
-        className: "sb:h-4 sb:w-4 sb:rounded sb:bg-center! sb:bg-cover! sb:transition-all sb:border",
-        style: { background }
-      }
-    ) : /* @__PURE__ */ React25.createElement(PaintbrushIcon, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25.createElement("div", { className: "sb:truncate sb:flex-1" }, background ? background : "Kies een achtergrond"))
-  )), /* @__PURE__ */ React25.createElement(PopoverContent, { className: "sb:w-64 sb:p-0" }, /* @__PURE__ */ React25.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React25.createElement(TabsList, { className: "sb:w-full" }, /* @__PURE__ */ React25.createElement(TabsTrigger, { className: "sb:flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React25.createElement(TabsTrigger, { className: "sb:flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React25.createElement(TabsTrigger, { className: "sb:flex-1", value: "image" }, "Image")), /* @__PURE__ */ React25.createElement(
-    TabsContent,
-    {
-      value: "solid",
-      className: "sb:data-[state=active]:flex sb:flex-wrap sb:gap-1 sb:p-4"
-    },
-    solids.map((s) => /* @__PURE__ */ React25.createElement(
-      "div",
-      {
-        key: s,
-        style: { background: s },
-        className: "sb:rounded-md sb:h-6 sb:w-6 sb:cursor-pointer sb:active:scale-105 sb:border",
-        onClick: () => onBackgroundChange(s)
-      }
-    ))
-  ), /* @__PURE__ */ React25.createElement(
-    TabsContent,
-    {
-      value: "gradient",
-      className: "sb:data-[state=active]:flex sb:flex-wrap sb:gap-1 sb:p-4"
-    },
-    gradients.map((s) => /* @__PURE__ */ React25.createElement(
-      "div",
-      {
-        key: s,
-        style: { background: s },
-        className: "rounded-md h-6 w-6 cursor-pointer active:scale-105 border",
-        onClick: () => onBackgroundChange(s)
-      }
-    ))
-  ), /* @__PURE__ */ React25.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:p-4 sb:border-b" }, /* @__PURE__ */ React25.createElement(
-    MediaInput,
-    {
-      className: "sb:grid sb:grid-cols-2 sb:gap-1",
-      itemClassName: "sb:aspect-video sb:h-auto sb:w-full",
-      multiple: false,
-      onFilesChange: (files) => {
-        if (!files.length)
-          return;
-        onBackgroundChange(`url(${files[0]})`);
-      },
-      onError: (e) => console.error(
-        "[media-input]: Title: " + e?.title,
-        "media-input: Error: " + e?.description
-      )
-    }
-  )), /* @__PURE__ */ React25.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-1 sb:p-4" }, images.map((s) => /* @__PURE__ */ React25.createElement(
-    "div",
-    {
-      key: s,
-      style: { backgroundImage: s },
-      className: "sb:rounded-md sb:bg-cover sb:bg-center sb:aspect-video sb:w-full sb:cursor-pointer sb:border sb:active:scale-105",
-      onClick: () => onBackgroundChange(s)
-    }
-  )))))));
-};
-var SpacingInput = (props) => {
-  const [value, setValue] = React25.useState(parse(props.value || "0px"));
-  const [indipendent, setIndipendent] = React25.useState(
-    isIndipendent(parse(props.value || "0px"))
-  );
-  React25.useEffect(() => {
-    if (!props.onChange)
-      return;
-    props.onChange(stringify(value));
-  }, [value, props.onChange]);
-  return /* @__PURE__ */ React25.createElement("div", { className: "sb:grid sb:grid-cols-[1fr_auto] sb:gap-3" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:items-center sb:gap-3" }, !indipendent ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
-    AdvancedInput,
-    {
-      value: value.left,
-      pattern: "\\d+",
-      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
-      prepend: /* @__PURE__ */ React25.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb:h-4 sb:w-4" }),
-      append: /* @__PURE__ */ React25.createElement("span", { className: "sb:text-muted-foreground" }, "px")
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    AdvancedInput,
-    {
-      value: value.top,
-      pattern: "\\d+",
-      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
-      prepend: /* @__PURE__ */ React25.createElement(AlignHorizontalSpaceAroundIcon, { className: "sb:h-4 sb:w-4 sb:rotate-90" }),
-      append: /* @__PURE__ */ React25.createElement("span", { className: "sb:text-muted-foreground" }, "px")
-    }
-  )) : /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
-    AdvancedInput,
-    {
-      value: value.left,
-      pattern: "\\d+",
-      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
-      prepend: /* @__PURE__ */ React25.createElement(AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4" }),
-      append: /* @__PURE__ */ React25.createElement("span", { className: "sb:text-muted-foreground" }, "px")
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    AdvancedInput,
-    {
-      value: value.top,
-      pattern: "\\d+",
-      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
-      prepend: /* @__PURE__ */ React25.createElement(AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:rotate-90" }),
-      append: /* @__PURE__ */ React25.createElement("span", { className: "sb:text-muted-foreground" }, "px")
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    AdvancedInput,
-    {
-      value: value.right,
-      pattern: "\\d+",
-      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
-      prepend: /* @__PURE__ */ React25.createElement(AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:rotate-180" }),
-      append: /* @__PURE__ */ React25.createElement("span", { className: "sb:text-muted-foreground" }, "px")
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    AdvancedInput,
-    {
-      value: value.bottom,
-      pattern: "\\d+",
-      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
-      prepend: /* @__PURE__ */ React25.createElement(AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:-rotate-90" }),
-      append: /* @__PURE__ */ React25.createElement("span", { className: "sb:text-muted-foreground" }, "px")
-    }
-  ))), /* @__PURE__ */ React25.createElement("div", { className: "sb:shrink-0" }, /* @__PURE__ */ React25.createElement(
-    Toggle,
-    {
-      className: "sb:shrink-0 sb:flex sb:w-8 sb:h-8 sb:p-0",
-      variant: "outline",
-      size: "sm",
-      pressed: indipendent,
-      onPressedChange: setIndipendent
-    },
-    /* @__PURE__ */ React25.createElement(ScanIcon, { className: "sb:h-4 sb:w-4" })
-  )));
-};
-var isIndipendent = (value) => {
-  const { top, right, bottom, left } = value;
-  return top !== bottom || right !== left;
-};
-var parse = (value) => {
-  const matches = value.match(/(\d+)/gm);
-  const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
-  switch (matches?.length) {
-    case 1:
-      return { top, right: top, bottom: top, left: top };
-    case 2:
-      return { top, bottom: top, left: right, right };
-    case 3:
-      return { top, right, left: right, bottom };
-    default:
-      return { top, right, bottom, left };
-  }
-};
-var stringify = (value) => {
-  const { top, right, bottom, left } = value;
-  if (top === right && top === bottom && top === left) {
-    return `${top}px`;
-  }
-  if (top === bottom && right === left) {
-    return `${top}px ${right}px`;
-  }
-  if (right === left) {
-    return `${top}px ${right}px ${bottom}px`;
-  }
-  return `${top}px ${right}px ${bottom}px ${left}px`;
-};
-
-// src/components/item-design-form.tsx
-var designSchema = z.object({
-  container: z.coerce.boolean(),
-  hidden: z.enum(["always", "mobile", "desktop", "never"]),
-  desktop: z.object({
-    background: z.string(),
-    color: z.string(),
-    padding: z.string(),
-    margin: z.string()
-  }),
-  mobile: z.object({
-    background: z.string(),
-    color: z.string(),
-    padding: z.string(),
-    margin: z.string()
-  })
-});
-var ItemDesignForm = (props) => {
-  const { item } = props;
-  const component = builder.getComponent(item.component);
-  if (!component) {
-    throw new Error(
-      `[simple-builder]: Component "${item.component}" not found`
-    );
-  }
-  const getDefaultDeviceValue = (params) => {
-    const { device: device2 = "desktop", key, fallback = "" } = params;
-    if (item.styles?.[device2]?.[key] !== void 0) {
-      return item.styles[device2][key];
-    }
-    if (component.defaultStyles?.[device2]?.[key] !== void 0) {
-      return component.defaultStyles[device2][key];
-    }
-    if (device2 === "mobile") {
-      const desktopValue = getDefaultDeviceValue({
-        ...params,
-        device: "desktop"
-      });
-      if (desktopValue !== void 0) {
-        return desktopValue;
-      }
-    }
-    return fallback;
-  };
-  const getDefaultDeviceValues = (device2) => {
-    return {
-      background: getDefaultDeviceValue({ device: device2, key: "background" }),
-      color: getDefaultDeviceValue({ device: device2, key: "color" }),
-      padding: getDefaultDeviceValue({ device: device2, key: "padding" }),
-      margin: getDefaultDeviceValue({ device: device2, key: "margin" })
-    };
-  };
-  const form = useForm({
-    resolver: zodResolver(designSchema),
-    values: {
-      container: item.styles?.container ?? true,
-      hidden: item.styles?.hidden ?? "never",
-      desktop: getDefaultDeviceValues("desktop"),
-      mobile: getDefaultDeviceValues("mobile")
-    }
-  });
-  const { patchItem } = useBuilder();
-  const onSubmit = React25.useCallback(
-    (values) => {
-      const { container, hidden, desktop, mobile } = values;
-      const dirtyFields = form.formState.dirtyFields;
-      const desktopPatch = Object.entries(desktop).reduce(
-        (acc, [key, value]) => ({
-          ...acc,
-          ...value && { [key]: value }
-        }),
-        { ...item.styles?.desktop }
-      );
-      const mobilePatch = Object.entries(mobile).reduce(
-        (acc, [key, value]) => {
-          const desktopValue = desktop[key];
-          const isDirty = dirtyFields.desktop?.[key];
-          if (value === desktopValue || isDirty) {
-            return acc;
-          }
-          if (["padding", "margin"].includes(key)) {
-            if (value === "0px" && desktopValue === "0px") {
-              return acc;
-            }
-          }
-          return {
-            ...acc,
-            ...value && { [key]: value }
-          };
-        },
-        { ...item.styles?.mobile }
-      );
-      patchItem(item.id, {
-        styles: {
-          ...container === false && { container },
-          ...hidden !== "never" && { hidden },
-          ...Object.keys(desktopPatch).length && { desktop: desktopPatch },
-          ...Object.keys(mobilePatch).length && { mobile: mobilePatch }
-        }
-      });
-    },
-    [patchItem, item.id, form.formState.dirtyFields]
-  );
-  const [device, setDevice] = React25.useState("desktop");
-  return /* @__PURE__ */ React25.createElement(Form, { ...form }, /* @__PURE__ */ React25.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4 sb:p-4" }, /* @__PURE__ */ React25.createElement(
-    Tabs,
-    {
-      defaultValue: device,
-      onValueChange: (device2) => setDevice(device2)
-    },
-    /* @__PURE__ */ React25.createElement(TabsList, { className: "sb:h-9 sb:grid sb:w-full sb:grid-cols-2" }, /* @__PURE__ */ React25.createElement(TabsTrigger, { value: "desktop", className: "sb:text-xs" }, /* @__PURE__ */ React25.createElement(MonitorIcon, { className: "sb:h-4 sb:w-4 sb:mr-2" }), /* @__PURE__ */ React25.createElement("span", null, "Desktop")), /* @__PURE__ */ React25.createElement(TabsTrigger, { value: "mobile", className: "sb:text-xs" }, /* @__PURE__ */ React25.createElement(SmartphoneIcon, { className: "sb:h-4 sb:w-4 sb:mr-2" }), /* @__PURE__ */ React25.createElement("span", null, "Mobiel")))
-  ), /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4" }, /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.background`,
-      name: `${device}.background`,
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(
-        BackgroundPicker,
-        {
-          background: field.value,
-          onBackgroundChange: field.onChange
-        }
-      )), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.color`,
-      name: `${device}.color`,
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(
-        ColorPicker,
-        {
-          color: field.value,
-          onColorChange: field.onChange
-        }
-      )), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement("hr", null), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "hidden",
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "Verbergen"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(Select, { value: field.value, onValueChange: field.onChange }, /* @__PURE__ */ React25.createElement(SelectTrigger, null, /* @__PURE__ */ React25.createElement(SelectValue, null)), /* @__PURE__ */ React25.createElement(SelectContent, null, /* @__PURE__ */ React25.createElement(SelectItem, { value: "never" }, "Nooit"), /* @__PURE__ */ React25.createElement(SelectItem, { value: "desktop" }, "Op desktop"), /* @__PURE__ */ React25.createElement(SelectItem, { value: "mobile" }, "Op mobiel"), /* @__PURE__ */ React25.createElement(SelectItem, { value: "always" }, "Altijd")))), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement("hr", null), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      name: "container",
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, { className: "sb:flex sb:flex-row sb:items-center sb:justify-between sb:space-y-0" }, /* @__PURE__ */ React25.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(
-        Switch,
-        {
-          checked: !field.value,
-          onCheckedChange: (v) => field.onChange(!v)
-        }
-      )), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement("hr", null), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.padding`,
-      name: `${device}.padding`,
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(
-        SpacingInput,
-        {
-          value: field.value,
-          onChange: field.onChange
-        }
-      )), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  ), /* @__PURE__ */ React25.createElement(
-    FormField,
-    {
-      control: form.control,
-      key: `${device}.margin`,
-      name: `${device}.margin`,
-      render: ({ field }) => /* @__PURE__ */ React25.createElement(FormItem, null, /* @__PURE__ */ React25.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React25.createElement(FormControl, null, /* @__PURE__ */ React25.createElement(
-        SpacingInput,
-        {
-          value: field.value,
-          onChange: field.onChange
-        }
-      )), /* @__PURE__ */ React25.createElement(FormMessage, null))
-    }
-  )), /* @__PURE__ */ React25.createElement(Button, { type: "submit", className: "w-full" }, "Opslaan"))));
-};
-var ScrollArea = React25.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("sb:relative sb:overflow-hidden", className),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Viewport, { className: "sb:h-full sb:max-h-[80vh] sb:w-full sb:rounded-[inherit]" }, children),
-  /* @__PURE__ */ React25.createElement(ScrollBar, null),
-  /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Corner, null)
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React25.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React25.createElement(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "sb:flex sb:touch-none sb:select-none sb:transition-colors",
-      orientation === "vertical" && "sb:h-full sb:w-2.5 sb:border-l sb:border-l-transparent sb:p-px",
-      orientation === "horizontal" && "sb:h-2.5 sb:flex-col sb:border-t sb:border-t-transparent sb:p-px",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb:relative sb:flex-1 sb:rounded-full sb:bg-border" })
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-// src/components/container-item-toolbar.tsx
-var ContainerItemToolbar = (props) => {
-  const { contentId, canBringUp = false, canBringDown = false } = props;
-  const { bringUp, bringDown } = useBuilder();
-  return /* @__PURE__ */ React25.createElement("div", { className: "sb:absolute sb:z-20 sb:top-1 sb:right-1 sb:rounded-md sb:shadow sb:flex sb:flex-col sb:gap-1 sb:p-1 sb:bg-card sb:text-card-foreground sb-item-toolbar sb:opacity-0 sb:transition-opacity" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:h-10 sb:p-1 sb:border sb:border-input sb:bg-background sb:rounded-md sb:text-sm sb:font-medium sb:flex sb:gap-1 sb:items-center sb:justify-start" }, /* @__PURE__ */ React25.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React25.createElement(
-    Button,
-    {
-      variant: "ghost",
-      className: "sb:w-8 sb:h-8 sb:p-0",
-      onClick: () => bringUp(contentId),
-      disabled: !canBringUp
-    },
-    /* @__PURE__ */ React25.createElement(ArrowUp, { className: "sb:h-5 sb:w-5" })
-  ), /* @__PURE__ */ React25.createElement(
-    Button,
-    {
-      variant: "ghost",
-      className: "sb:w-8 sb:h-8 sb:p-0",
-      onClick: () => bringDown(contentId),
-      disabled: !canBringDown
-    },
-    /* @__PURE__ */ React25.createElement(ArrowDown, { className: "sb:h-5 sb:w-5" })
-  ), /* @__PURE__ */ React25.createElement(DeleteButton, { contentId })));
-};
-var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React25.createElement(Popover, { modal: true }, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(Button, { variant: "ghost", className: "sb:w-8 sb:h-8 sb:p-0" }, /* @__PURE__ */ React25.createElement(Edit2Icon, { className: "sb:h-5 sb:w-5" }))), /* @__PURE__ */ React25.createElement(
-    PopoverContent,
-    {
-      side: "left",
-      align: "start",
-      sideOffset: 16,
-      alignOffset: -8,
-      className: "sb:p-0 sb:relative",
-      collisionPadding: 16
-    },
-    /* @__PURE__ */ React25.createElement(EditPopoverInner, { id })
-  ));
-};
-var EditPopoverInner = (props) => {
-  const { id } = props;
-  const { getItem } = useBuilder();
-  const item = getItem(id);
-  if (!item) {
-    throw new Error(
-      `[simple-builder]: Item with id ${id} not found in container item form component`
-    );
-  }
-  return /* @__PURE__ */ React25.createElement(Tabs, null, /* @__PURE__ */ React25.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React25.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React25.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React25.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React25.createElement(ScrollArea, null, /* @__PURE__ */ React25.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React25.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React25.createElement(ItemDesignForm, { item })));
-};
-var DeleteButton = ({ contentId }) => {
-  const { deleteContent } = useBuilder();
-  return /* @__PURE__ */ React25.createElement(AlertDialog, null, /* @__PURE__ */ React25.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React25.createElement(
-    Button,
-    {
-      variant: "ghost",
-      className: "sb:w-8 sb:h-8 sb:p-0 sb:text-destructive"
-    },
-    /* @__PURE__ */ React25.createElement(Trash2Icon, { className: "sb:h-5 sb:w-5" })
-  )), /* @__PURE__ */ React25.createElement(AlertDialogContent, null, /* @__PURE__ */ React25.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React25.createElement(AlertDialogFooter, null, /* @__PURE__ */ React25.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React25.createElement(
-    AlertDialogAction,
-    {
-      className: buttonVariants({ variant: "destructive" }),
-      onClick: () => deleteContent(contentId)
-    },
-    "Verwijderen"
-  ))));
-};
-
-// src/components/build-container-client.tsx
-var BuildContainerInner = (props) => {
-  const { id, name, content, multiple = false } = props;
-  const items = Array.isArray(content) ? content : content?.[name] || [];
-  if (!multiple && items.length > 1) {
-    console.error(
-      "[simple-builder]: Multiple content blocks detected when using property multiple false."
-    );
-  }
-  return /* @__PURE__ */ React25.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React25.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React25.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React25.createElement(React25.Fragment, { key: item.id }, /* @__PURE__ */ React25.createElement("div", { className: "sb:relative sb-container-item" }, /* @__PURE__ */ React25.createElement(DesignWrapper, { building: true, styles: item.styles }, builder.bindComponent(item, true)), /* @__PURE__ */ React25.createElement(
-    ContainerItemToolbar,
-    {
-      contentId: item.id,
-      canBringUp: i > 0,
-      canBringDown: i < items.length - 1
-    }
-  )), multiple && /* @__PURE__ */ React25.createElement(
-    AddContentDividerButton,
-    {
-      parent: id,
-      container: name,
-      index: i + 1
-    }
-  ))));
-};
-var build_container_client_default = BuildContainerInner;
-var AddContentButton = (props) => {
-  const components = builder.getComponents();
-  const { addContent } = useBuilder();
-  return /* @__PURE__ */ React25.createElement(Popover, null, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25.createElement(PopoverContent, { className: "sb:p-1 sb:w-screen sb:max-w-xl" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-2" }, components.map((component) => {
-    const Icon2 = component.icon ?? ImageIcon;
-    return /* @__PURE__ */ React25.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React25.createElement(
-      Button,
-      {
-        variant: "ghost",
-        className: "sb:justify-start",
-        onClick: () => {
-          addContent(
-            component.name,
-            props.container,
-            props.parent,
-            props.index
-          );
-        }
-      },
-      /* @__PURE__ */ React25.createElement(Icon2, { className: "sb:mr-2 sb:h-4 sb:w-4 sb:shrink-0" }),
-      component.friendlyName ?? component.name
-    ));
-  }))));
-};
-var AddContentPlaceholder = (props) => {
-  return /* @__PURE__ */ React25.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25.createElement("div", { className: "sb:flex sb:justify-center sb:bg-primary/50 p-4" }, /* @__PURE__ */ React25.createElement(Button, { size: "sm" }, /* @__PURE__ */ React25.createElement(PlusIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }), "Blok Toevoegen")));
-};
-var AddContentDividerButton = (props) => {
-  return /* @__PURE__ */ React25.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25.createElement("div", { className: "sb:w-full sb:h-1 sb:-my-[2px] sb:bg-primary sb:relative sb:z-20 sb:opacity-0 add-content-divider-button sb:transition-opacity" }, /* @__PURE__ */ React25.createElement(
-    Button,
-    {
-      size: "sm",
-      className: "sb:absolute sb:left-1/2 sb:top-1/2 sb:-translate-y-1/2 sb:-translate-x-1/2 sb:shadow"
-    },
-    /* @__PURE__ */ React25.createElement(PlusIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }),
-    "Blok Toevoegen"
-  )));
-};
-
-export { build_container_client_default as default };