@simple-builder/react 1.4.0 → 1.4.1

package/dist/build-container-client-JAITVVDD.js

@@ -0,0 +1,2340 @@
+'use client';
+'use strict';
+
+require('./chunk-JFWIO2AR.js');
+var chunk7FWFM2TR_js = require('./chunk-7FWFM2TR.js');
+var chunk63LNKQZD_js = require('./chunk-63LNKQZD.js');
+var React25 = require('react');
+var lucideReact = require('lucide-react');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var react = require('@tiptap/react');
+var extensionColor = require('@tiptap/extension-color');
+var extensionTextStyle = require('@tiptap/extension-text-style');
+var extensionUnderline = require('@tiptap/extension-underline');
+var starterKit = require('@tiptap/starter-kit');
+var TiptapLink = require('@tiptap/extension-link');
+var state = require('@tiptap/pm/state');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
+var TogglePrimitive = require('@radix-ui/react-toggle');
+var classVarianceAuthority = require('class-variance-authority');
+var lu = require('react-icons/lu');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var reactSlot = require('@radix-ui/react-slot');
+var reactHookForm = require('react-hook-form');
+var LabelPrimitive = require('@radix-ui/react-label');
+var SwitchPrimitives = require('@radix-ui/react-switch');
+var zod$1 = require('@hookform/resolvers/zod');
+var zod = require('zod');
+var dateFns = require('date-fns');
+var reactDayPicker = require('react-day-picker');
+var SelectPrimitive = require('@radix-ui/react-select');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var TiptapLink__default = /*#__PURE__*/_interopDefault(TiptapLink);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+
+var AlertDialog = AlertDialogPrimitive__namespace.Root;
+var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+var AlertDialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  AlertDialogPrimitive__namespace.Overlay,
+  {
+    className: chunk63LNKQZD_js.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__namespace.Overlay.displayName;
+var AlertDialogContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React25__namespace.createElement(
+  AlertDialogPrimitive__namespace.Content,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.Content.displayName;
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ React25__namespace.createElement(
+  "div",
+  {
+    className: chunk63LNKQZD_js.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  AlertDialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:text-lg sb:font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
+var AlertDialogDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  AlertDialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:text-sm sb:text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
+var AlertDialogAction = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  AlertDialogPrimitive__namespace.Action,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(chunk7FWFM2TR_js.buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
+var AlertDialogCancel = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  AlertDialogPrimitive__namespace.Cancel,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(
+      chunk7FWFM2TR_js.buttonVariants({ variant: "outline" }),
+      "sb:mt-2 sb:sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverClose = PopoverPrimitive__namespace.Close;
+var PopoverContent = React25__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: chunk63LNKQZD_js.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__namespace.Content.displayName;
+var Link = TiptapLink__default.default.extend({
+  inclusive: false,
+  parseHTML() {
+    return [{ tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["a", react.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: false
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      ...this.parent?.() || [],
+      new state.Plugin({
+        props: {
+          handleClick(view, pos) {
+            const { schema: schema2, doc, tr } = view.state;
+            const range = react.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 state.TextSelection($start, $end));
+            view.dispatch(transaction);
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/features/rich-text-editor/utils/normalize-rich-text-colors.ts
+var normalizeRichTextColors = (html) => html.replaceAll(/hsl\(var\((--[A-Za-z0-9-]+)\)\)/g, "var($1)");
+
+// 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 ? "" : normalizeRichTextColors(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 = React25.useCallback(
+    (editor2) => {
+      console.count("useRichTextEditor:handleCreate");
+      if (value && editor2.isEmpty) {
+        editor2.commands.setContent(
+          typeof value === "string" ? normalizeRichTextColors(value) : value
+        );
+      }
+    },
+    [value]
+  );
+  const handleUpdate = React25.useCallback(
+    (editor2) => {
+      console.count("useRichTextEditor:handleUpdate");
+      onUpdate?.(getOutput(editor2, output));
+    },
+    [output, onUpdate]
+  );
+  const handleBlur = React25.useCallback(
+    (editor2) => {
+      console.count("useRichTextEditor:handleBlur");
+      onBlur?.(getOutput(editor2, output));
+    },
+    [output, onBlur]
+  );
+  const editor = react.useEditor({
+    extensions: [starterKit.StarterKit, extensionUnderline.Underline, extensionColor.Color, extensionTextStyle.TextStyle, Link],
+    editorProps: {
+      attributes: {
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        class: chunk63LNKQZD_js.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__namespace.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuSubTrigger = React25__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.SubTrigger,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.createElement(lucideReact.ChevronRight, { className: "sb:ml-auto" })
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
+var DropdownMenuSubContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.SubContent,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.SubContent.displayName;
+var DropdownMenuContent = React25__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: chunk63LNKQZD_js.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__namespace.Content.displayName;
+var DropdownMenuItem = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.Item,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.Item.displayName;
+var DropdownMenuCheckboxItem = React25__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.CheckboxItem,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.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__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb:h-4 sb:w-4" }))),
+  children
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.RadioItem,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.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__namespace.createElement(DropdownMenuPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Circle, { className: "sb:h-2 sb:w-2 sb:fill-current" }))),
+  children
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
+var DropdownMenuLabel = React25__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.Label,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(
+      "sb:px-2 sb:py-1.5 sb:text-sm sb:font-semibold",
+      inset && "sb:pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
+var DropdownMenuSeparator = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:-mx-1 sb:my-1 sb:h-px sb:bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
+var Separator2 = React25__namespace.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+    SeparatorPrimitive__namespace.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: chunk63LNKQZD_js.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__namespace.Root.displayName;
+var toggleVariants = classVarianceAuthority.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__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  TogglePrimitive__namespace.Root,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
+var ToggleGroupContext = React25__namespace.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React25__namespace.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  ToggleGroupPrimitive__namespace.Root,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:flex sb:items-center sb:justify-center sb:gap-1", className),
+    ...props
+  },
+  /* @__PURE__ */ React25__namespace.createElement(ToggleGroupContext.Provider, { value: { variant, size } }, children)
+));
+ToggleGroup.displayName = ToggleGroupPrimitive__namespace.Root.displayName;
+var ToggleGroupItem = React25__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React25__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ React25__namespace.createElement(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      ref,
+      className: chunk63LNKQZD_js.cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
+var PALETTES = [
+  {
+    inverse: "var(--background)",
+    colors: [
+      { cssVar: "var(--foreground)" },
+      { cssVar: "var(--primary-foreground)" },
+      { cssVar: "var(--secondary-foreground)" },
+      { cssVar: "var(--tertiary-foreground)" },
+      { cssVar: "var(--muted-foreground)" },
+      { cssVar: "var(--accent-foreground)" },
+      { cssVar: "var(--destructive-foreground)" }
+    ]
+  },
+  {
+    inverse: "var(--foreground)",
+    colors: [
+      { cssVar: "var(--background)" },
+      { cssVar: "var(--primary)" },
+      { cssVar: "var(--secondary)" },
+      { cssVar: "var(--tertiary)" },
+      { cssVar: "var(--muted)" },
+      { cssVar: "var(--accent)" },
+      { cssVar: "var(--destructive)" }
+    ]
+  }
+];
+var ColorTool = ({ editor }) => {
+  const color = normalizeRichTextColors(
+    editor.getAttributes("textStyle")?.color || "var(--foreground)"
+  );
+  const [selectedColor, setSelectedColor] = React25__namespace.useState(color);
+  React25__namespace.useEffect(() => {
+    setSelectedColor(color);
+  }, [color]);
+  const handleColorChange = React25__namespace.useCallback(
+    (value) => {
+      setSelectedColor(value);
+      editor.chain().focus().setColor(value).run();
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { className: "sb:w-12" }, /* @__PURE__ */ React25__namespace.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__namespace.createElement("path", { d: "M4 20h16" }),
+    /* @__PURE__ */ React25__namespace.createElement("path", { d: "m6 16 6-12 6 12" }),
+    /* @__PURE__ */ React25__namespace.createElement("path", { d: "M8 12h8" })
+  ), /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb:size-5" }))), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { align: "start", className: "sb:w-full" }, /* @__PURE__ */ React25__namespace.createElement(
+    ToggleGroup,
+    {
+      type: "single",
+      value: selectedColor,
+      onValueChange: handleColorChange,
+      className: "sb:flex-col sb:gap-1.5"
+    },
+    PALETTES.map((pallete, i) => /* @__PURE__ */ React25__namespace.createElement("div", { key: i, className: "sb:flex sb:gap-1.5" }, pallete.colors.map((color2, j) => /* @__PURE__ */ React25__namespace.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 }
+      },
+      normalizeRichTextColors(selectedColor) === color2.cssVar && /* @__PURE__ */ React25__namespace.createElement(
+        lu.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__namespace.useCallback(
+    (level) => {
+      if (level) {
+        editor.chain().focus().toggleHeading({ level }).run();
+      } else {
+        editor.chain().focus().setParagraph().run();
+      }
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+    ToolbarButton,
+    {
+      className: "sb:w-12 sb:data-[state=open]:bg-accent",
+      pressed: isActive
+    },
+    /* @__PURE__ */ React25__namespace.createElement(lu.LuHeading, { className: "sb:size-5" }),
+    /* @__PURE__ */ React25__namespace.createElement(lu.LuChevronDown, { className: "sb:size-5" })
+  )), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, formatActions.map(({ element: Element, ...action }) => /* @__PURE__ */ React25__namespace.createElement(
+    DropdownMenuItem,
+    {
+      key: action.label,
+      className: chunk63LNKQZD_js.cn({
+        "sb:bg-accent": action.level ? editor.isActive("heading", { level: action.level }) : editor.isActive("paragraph")
+      }),
+      onClick: () => handleFormatChange(action.level)
+    },
+    /* @__PURE__ */ React25__namespace.createElement(Element, { className: action.className }, action.label)
+  ))));
+};
+var actions = [
+  {
+    value: "bold",
+    label: "Bold",
+    icon: lu.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: lu.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: lu.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: lu.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: lu.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: lu.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__namespace.createElement(ToolbarSection, { editor, actions, mainActionCount: 1 });
+};
+var actions2 = [
+  {
+    value: "codeBlock",
+    label: "Code block",
+    icon: lu.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: lu.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: lu.LuMinus,
+    action: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: () => false,
+    canExecute: (editor) => editor.can().chain().focus().setHorizontalRule().run()
+  }
+];
+var InsertTool = ({ editor }) => {
+  return /* @__PURE__ */ React25__namespace.createElement(ToolbarSection, { editor, actions: actions2, mainActionCount: 0 });
+};
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogTrigger = DialogPrimitive__namespace.Trigger;
+var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogOverlay = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.Overlay.displayName;
+var DialogContent = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(DialogPortal, null, /* @__PURE__ */ React25__namespace.createElement(DialogOverlay, null), /* @__PURE__ */ React25__namespace.createElement(
+  DialogPrimitive__namespace.Content,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.createElement(DialogPrimitive__namespace.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__namespace.createElement(lucideReact.X, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:sr-only" }, "Close"))
+)));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ React25__namespace.createElement(
+  "div",
+  {
+    className: chunk63LNKQZD_js.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(
+      "sb:text-lg sb:font-semibold sb:leading-none sb:tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var DialogDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:text-sm sb:text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+var labelVariants = classVarianceAuthority.cva(
+  "sb:text-sm sb:font-medium sb:leading-none sb:peer-disabled:cursor-not-allowed sb:peer-disabled:opacity-70"
+);
+var Label2 = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(labelVariants(), className),
+    ...props
+  }
+));
+Label2.displayName = LabelPrimitive__namespace.Root.displayName;
+
+// src/components/ui/form.tsx
+var Form = reactHookForm.FormProvider;
+var FormFieldContext = React25__namespace.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ React25__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React25__namespace.createElement(reactHookForm.Controller, { ...props }));
+};
+var useFormField = () => {
+  const fieldContext = React25__namespace.useContext(FormFieldContext);
+  const itemContext = React25__namespace.useContext(FormItemContext);
+  const { getFieldState, formState } = reactHookForm.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__namespace.createContext(
+  {}
+);
+var FormItem = React25__namespace.forwardRef(({ className, ...props }, ref) => {
+  const id = React25__namespace.useId();
+  return /* @__PURE__ */ React25__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React25__namespace.createElement("div", { ref, className: chunk63LNKQZD_js.cn("sb:flex sb:flex-col sb:gap-2", className), ...props }));
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React25__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ React25__namespace.createElement(
+    Label2,
+    {
+      ref,
+      className: chunk63LNKQZD_js.cn(error && "sb:text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React25__namespace.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ React25__namespace.createElement(
+    reactSlot.Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React25__namespace.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ React25__namespace.createElement(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: chunk63LNKQZD_js.cn("sb:text-[0.8rem] sb:text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React25__namespace.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React25__namespace.createElement(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: chunk63LNKQZD_js.cn("sb:text-[0.8rem] sb:font-medium sb:text-destructive", className),
+      ...props
+    },
+    body
+  );
+});
+FormMessage.displayName = "FormMessage";
+var Input = React25__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ React25__namespace.createElement(
+      "input",
+      {
+        type,
+        className: chunk63LNKQZD_js.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__namespace.forwardRef(
+  ({ prepend, append, ...props }, ref) => {
+    return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:relative" }, /* @__PURE__ */ React25__namespace.createElement(Input, { ref, className: "sb:pl-9 sb:pr-7 sb:text-right", ...props }), prepend && /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:absolute sb:font-roboto sb:top-1/2 sb:left-3 sb:-translate-y-1/2" }, prepend), append && /* @__PURE__ */ React25__namespace.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SwitchPrimitives__namespace.Root,
+  {
+    className: chunk63LNKQZD_js.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__namespace.createElement(
+    SwitchPrimitives__namespace.Thumb,
+    {
+      className: chunk63LNKQZD_js.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__namespace.Root.displayName;
+var LinkTool = ({ editor }) => {
+  const [open, setOpen] = React25__namespace.useState(false);
+  const { from, to } = editor.state.selection;
+  const text = editor.state.doc.textBetween(from, to, " ");
+  const handleSetLink = React25__namespace.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__namespace.createElement(Dialog, { open, onOpenChange: setOpen }, /* @__PURE__ */ React25__namespace.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+    ToolbarButton,
+    {
+      pressed: editor.isActive("link"),
+      disabled: editor.isActive("codeBlock")
+    },
+    /* @__PURE__ */ React25__namespace.createElement(lu.LuLink2, { className: "sb:size-5" })
+  )), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb:w-full sb:min-w-80" }, /* @__PURE__ */ React25__namespace.createElement(LinkForm, { onSave: handleSetLink, defaultText: text })));
+};
+var schema = zod.z.object({
+  url: zod.z.string().min(0),
+  text: zod.z.string().optional(),
+  isNewTab: zod.z.boolean().optional()
+});
+var LinkForm = ({
+  onSave,
+  defaultIsNewTab,
+  defaultUrl,
+  defaultText
+}) => {
+  const form = reactHookForm.useForm({
+    resolver: zod$1.zodResolver(schema),
+    defaultValues: {
+      url: defaultUrl || "",
+      text: defaultText || "",
+      isNewTab: defaultIsNewTab || false
+    }
+  });
+  const handleSubmit = (values) => {
+    onSave(values.url, values.text, values.isNewTab);
+  };
+  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-6" }, /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "url",
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "URL"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(Input, { type: "url", ...field, autoFocus: true })), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "text",
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Text"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(Input, { ...field })), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "isNewTab",
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:items-center sb:gap-2" }, /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+        Switch,
+        {
+          checked: field.value,
+          onCheckedChange: field.onChange
+        }
+      )), /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Open in new tab")), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(chunk7FWFM2TR_js.Button, { type: "button", onClick: form.handleSubmit(handleSubmit) }, "Save")));
+};
+var actions3 = [
+  {
+    value: "orderedList",
+    label: "Numbered list",
+    icon: lu.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: lu.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__namespace.createElement(ToolbarSection, { editor, actions: actions3, mainActionCount: 2 });
+};
+
+// src/features/rich-text-editor/components/toolbar.tsx
+var Toolbar = ({ editor }) => {
+  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:shrink-0 sb:overflow-x-auto sb:border-b sb:border-border sb:p-2" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:w-max sb:items-center sb:gap-px" }, /* @__PURE__ */ React25__namespace.createElement(ElementTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(FormatTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(ColorTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(ListTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(Separator2, { orientation: "vertical", className: "sb:mx-2 sb:h-7" }), /* @__PURE__ */ React25__namespace.createElement(LinkTool, { editor }), /* @__PURE__ */ React25__namespace.createElement(InsertTool, { editor })));
+};
+var ToolbarSection = ({
+  editor,
+  actions: actions4,
+  mainActionCount = 0
+}) => {
+  const { mainActions, dropdownActions } = React25__namespace.useMemo(() => {
+    return {
+      mainActions: actions4.slice(0, mainActionCount),
+      dropdownActions: actions4.slice(mainActionCount)
+    };
+  }, [actions4, mainActionCount]);
+  const isDropdownActive = React25__namespace.useMemo(() => {
+    return dropdownActions.some((action) => action.isActive(editor));
+  }, [dropdownActions, editor]);
+  return /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, mainActions.map((action) => /* @__PURE__ */ React25__namespace.createElement(
+    ToolbarButton,
+    {
+      key: action.label,
+      onClick: () => action.action(editor),
+      disabled: !action.canExecute(editor),
+      pressed: action.isActive(editor)
+    },
+    /* @__PURE__ */ React25__namespace.createElement(action.icon, { className: "sb:size-5" })
+  )), dropdownActions.length > 0 && /* @__PURE__ */ React25__namespace.createElement(DropdownMenu, null, /* @__PURE__ */ React25__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(ToolbarButton, { pressed: isDropdownActive }, /* @__PURE__ */ React25__namespace.createElement(lu.LuEllipsis, { className: "sb:size-5" }))), /* @__PURE__ */ React25__namespace.createElement(DropdownMenuContent, { align: "start" }, dropdownActions.map((action) => /* @__PURE__ */ React25__namespace.createElement(
+    DropdownMenuItem,
+    {
+      key: action.label,
+      className: chunk63LNKQZD_js.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__namespace.createElement(action.icon, { className: "sb:size-4" }),
+    /* @__PURE__ */ React25__namespace.createElement("span", null, action.label)
+  )))));
+};
+var ToolbarButton = React25__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React25__namespace.createElement(
+    Toggle,
+    {
+      size: "sm",
+      className: chunk63LNKQZD_js.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: chunk63LNKQZD_js.cn("sb:flex-1 sb:px-3 sb:py-1", editorClassName),
+    ...props
+  });
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ React25__namespace.createElement(
+    "div",
+    {
+      className: chunk63LNKQZD_js.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__namespace.createElement(Toolbar, { editor }),
+    /* @__PURE__ */ React25__namespace.createElement(
+      react.EditorContent,
+      {
+        editor,
+        className: chunk63LNKQZD_js.cn(
+          "sb-editflow prose sb:flex sb:flex-1",
+          editorContentClassName
+        )
+      }
+    )
+  );
+};
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ React25__namespace.createElement(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      className: chunk63LNKQZD_js.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: chunk63LNKQZD_js.cn(
+          chunk7FWFM2TR_js.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: chunk63LNKQZD_js.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: chunk63LNKQZD_js.cn(
+          chunk7FWFM2TR_js.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__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb:h-4 sb:w-4" }),
+        IconRight: () => /* @__PURE__ */ React25__namespace.createElement(lucideReact.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__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+    chunk7FWFM2TR_js.Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: chunk63LNKQZD_js.cn(
+        "sb:justify-start sb:text-left sb:font-normal sb:normal-case sb:w-full",
+        !color && "sb:text-muted-foreground",
+        className
+      )
+    },
+    /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:w-full sb:flex sb:items-center sb:gap-2" }, color ? /* @__PURE__ */ React25__namespace.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__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:truncate sb:flex-1" }, color ? color : "Kies een kleur"))
+  )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:w-64 sb:p-4 sb:flex sb:flex-wrap sb:gap-1" }, colors.map((s) => /* @__PURE__ */ React25__namespace.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 IMAGE_FILE_ACCEPT = ".png,.jpg,.jpeg,.webp,.gif,.svg";
+var MEDIA_FILE_ACCEPT = `${IMAGE_FILE_ACCEPT},.mp4,.webm,.mov,.ogg,.ogv,.m4v,video/*`;
+var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".ogg", ".ogv", ".m4v"];
+var isVideoUrl = (src) => {
+  const path = src.split("?")[0].split("#")[0].toLowerCase();
+  return VIDEO_EXTENSIONS.some((ext) => path.endsWith(ext));
+};
+var isVideoFile = (file) => file.type.startsWith("video/") || isVideoUrl(file.name);
+var MediaInput = (props) => {
+  const {
+    onFilesChange,
+    limit = 32,
+    multiple = false,
+    onError,
+    accept = MEDIA_FILE_ACCEPT
+  } = props;
+  const id = React25__namespace.useId();
+  const [queue, setQueue] = React25__namespace.useState([]);
+  const [sources, setSources] = React25__namespace.useState(props.files ?? []);
+  const [videoUrls, setVideoUrls] = React25__namespace.useState({});
+  const maxConcurrentUploads = 3;
+  const uploadingCountRef = React25__namespace.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;
+        }
+        if (isVideoFile(file)) {
+          setVideoUrls((prev) => ({ ...prev, [url]: true }));
+        }
+        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__namespace.createElement("div", { className: chunk63LNKQZD_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25__namespace.createElement(MediaInputItem, { key: src, className: chunk63LNKQZD_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React25__namespace.createElement(
+    MediaPreview,
+    {
+      src,
+      isVideo: !!videoUrls[src] || isVideoUrl(src)
+    }
+  ), /* @__PURE__ */ React25__namespace.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__namespace.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__namespace.createElement(lucideReact.Trash2Icon, { className: "sb:h-4 sb:w-4" })
+  )))), queue.map((_, i) => /* @__PURE__ */ React25__namespace.createElement(
+    MediaInputItem,
+    {
+      key: i,
+      className: chunk63LNKQZD_js.cn(
+        "sb:flex sb:h-28 sb:w-28 sb:items-center sb:justify-center",
+        props.itemClassName
+      )
+    },
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Loader2Icon, { className: "sb:h-6 sb:w-6 sb:animate-spin" })
+  )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React25__namespace.createElement(
+    "label",
+    {
+      htmlFor: id,
+      className: chunk63LNKQZD_js.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__namespace.createElement(lucideReact.PlusIcon, { className: "sb:h-6 sb:w-6" }),
+    /* @__PURE__ */ React25__namespace.createElement(
+      "input",
+      {
+        id,
+        type: "file",
+        onChange: handleFilesAdd,
+        multiple,
+        accept,
+        className: "sb:hidden"
+      }
+    )
+  ) : null);
+};
+var MediaInputItem = (props) => {
+  return /* @__PURE__ */ React25__namespace.createElement(
+    "div",
+    {
+      className: chunk63LNKQZD_js.cn(
+        "sb:relative sb:h-28 sb:w-28 sb:overflow-hidden sb:rounded-lg sb:border",
+        props.className
+      )
+    },
+    props.children
+  );
+};
+var MediaPreview = (props) => {
+  const [kind, setKind] = React25__namespace.useState(
+    props.isVideo ? "video" : "image"
+  );
+  if (kind === "video") {
+    return /* @__PURE__ */ React25__namespace.createElement(
+      "video",
+      {
+        src: props.src,
+        muted: true,
+        playsInline: true,
+        preload: "metadata",
+        className: "sb:absolute sb:inset-0 sb:h-full sb:w-full sb:object-cover sb:pointer-events-none"
+      }
+    );
+  }
+  return /* @__PURE__ */ React25__namespace.createElement(
+    chunk63LNKQZD_js.Image,
+    {
+      src: props.src,
+      alt: "",
+      fill: true,
+      className: "sb:absolute sb:inset-0 sb:object-cover sb:pointer-events-none",
+      onError: () => setKind("video")
+    }
+  );
+};
+var MediaInputError = class extends Error {
+  title;
+  description;
+  constructor(message, description) {
+    super(message);
+    this.title = message;
+    this.description = description;
+  }
+};
+var Select = SelectPrimitive__namespace.Root;
+var SelectValue = SelectPrimitive__namespace.Value;
+var SelectTrigger = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.createElement(SelectPrimitive__namespace.Icon, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb:h-4 sb:w-4 sb:opacity-50" }))
+));
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+var SelectScrollUpButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(
+      "sb:flex sb:cursor-default sb:items-center sb:justify-center sb:py-1",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronUp, { className: "sb:h-4 sb:w-4" })
+));
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+var SelectScrollDownButton = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(
+      "sb:flex sb:cursor-default sb:items-center sb:justify-center sb:py-1",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React25__namespace.createElement(lucideReact.ChevronDown, { className: "sb:h-4 sb:w-4" })
+));
+SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
+var SelectContent = React25__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.createElement(SelectScrollUpButton, null),
+  /* @__PURE__ */ React25__namespace.createElement(
+    SelectPrimitive__namespace.Viewport,
+    {
+      className: chunk63LNKQZD_js.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__namespace.createElement(SelectScrollDownButton, null)
+)));
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+var SelectLabel = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.Label,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn(
+      "sb:py-1.5 sb:pl-8 sb:pr-2 sb:text-sm sb:font-semibold",
+      className
+    ),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
+var SelectItem = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.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__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Check, { className: "sb:h-4 sb:w-4" }))),
+  /* @__PURE__ */ React25__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children)
+));
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+var SelectSeparator = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:-mx-1 sb:my-1 sb:h-px sb:bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
+var Textarea = React25__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ React25__namespace.createElement(
+      "textarea",
+      {
+        className: chunk63LNKQZD_js.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 } = chunk7FWFM2TR_js.useBuilder();
+  const component = chunk63LNKQZD_js.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 = reactHookForm.useForm({
+    defaultValues: (component.inputs || []).reduce(
+      (acc, input) => ({
+        ...acc,
+        [input.name]: item?.props?.[input.name] ?? input.defaultValue
+      }),
+      {}
+    )
+  });
+  const onSubmit = React25__namespace.useCallback(
+    (values) => {
+      patchItem(item.id, {
+        props: values
+      });
+    },
+    [patchItem, item.id]
+  );
+  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4 sb:p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React25__namespace.createElement(
+    RenderFormField,
+    {
+      key: input.name,
+      type: input.type,
+      input,
+      form
+    }
+  )), /* @__PURE__ */ React25__namespace.createElement(chunk7FWFM2TR_js.Button, { type: "submit", className: "w-full" }, "Opslaan"))));
+};
+var RenderFormField = (props) => {
+  const { type, input, form } = props;
+  const fieldArray = reactHookForm.useFieldArray({
+    control: form.control,
+    name: input.name
+  });
+  if (input.multiple) {
+    return /* @__PURE__ */ React25__namespace.createElement("fieldset", { className: "sb:flex sb:flex-col sb:gap-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4" }, fieldArray.fields.map(
+      (field, i) => type !== "grouped" ? /* @__PURE__ */ React25__namespace.createElement(
+        FormField,
+        {
+          key: field.id,
+          control: form.control,
+          name: `${input.name}.${i}`,
+          render: ({ field: field2 }) => /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:items-center sb:gap-3" }, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React25__namespace.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.XIcon, { className: "sb:h-4 sb:w-4" })))
+        }
+      ) : /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:items-center sb:relative" }, /* @__PURE__ */ React25__namespace.createElement(
+        RenderFormField,
+        {
+          key: field.id,
+          form,
+          type,
+          input: {
+            ...input,
+            name: `${input.name}.${i}`,
+            multiple: false,
+            friendlyName: ""
+          }
+        }
+      ), /* @__PURE__ */ React25__namespace.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__namespace.createElement(lucideReact.XIcon, { className: "sb:h-4 sb:w-4" })
+      ))
+    ), /* @__PURE__ */ React25__namespace.createElement(
+      chunk7FWFM2TR_js.Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: chunk63LNKQZD_js.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__namespace.createElement(lucideReact.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__namespace.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field, options: input?.enum })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+        }
+      );
+    case "richText":
+      return /* @__PURE__ */ React25__namespace.createElement(Dialog, null, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunk7FWFM2TR_js.Button, { variant: "outline", className: "sb:w-full", type: "button" }, input.friendlyName || input.name, " bewerken"))), /* @__PURE__ */ React25__namespace.createElement(DialogContent, { className: "sb:max-w-3xl sb:p-0" }, /* @__PURE__ */ React25__namespace.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__namespace.createElement(DialogHeader, { className: "sb:flex-none sb:border-b sb:p-6" }, /* @__PURE__ */ React25__namespace.createElement(DialogTitle, null, input.friendlyName || input.name, " editor")), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex-1 sb:overflow-y-auto" }, /* @__PURE__ */ React25__namespace.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+        }
+      )))));
+    case "boolean":
+      return /* @__PURE__ */ React25__namespace.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb:flex sb:flex-row sb:items-center sb:justify-between sb:space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React25__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+        }
+      );
+    case "grouped":
+      return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-2 sb:w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React25__namespace.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__namespace.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__namespace.createElement(Input, { ...field });
+      return /* @__PURE__ */ React25__namespace.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value }, /* @__PURE__ */ React25__namespace.createElement(SelectTrigger, null, /* @__PURE__ */ React25__namespace.createElement(SelectValue, null)), /* @__PURE__ */ React25__namespace.createElement(SelectContent, null, options.map((option) => /* @__PURE__ */ React25__namespace.createElement(SelectItem, { key: option, value: option }, option))));
+    case "longText":
+      return /* @__PURE__ */ React25__namespace.createElement(Textarea, { ...field });
+    case "richText":
+      return /* @__PURE__ */ React25__namespace.createElement(RichTextEditor, { ...field });
+    case "number":
+      return /* @__PURE__ */ React25__namespace.createElement(Input, { type: "number", ...field });
+    case "color":
+      return /* @__PURE__ */ React25__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
+    case "date":
+      return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+        chunk7FWFM2TR_js.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: chunk63LNKQZD_js.cn(
+            "sb:w-full sb:flex sb:justify-start sb:text-left sb:font-normal",
+            !field.value && "sb:text-muted-foreground"
+          )
+        },
+        /* @__PURE__ */ React25__namespace.createElement(lucideReact.CalendarIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }),
+        field.value && !Array.isArray(field.value) ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React25__namespace.createElement("span", null, "Pick a date")
+      )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:w-auto sb:p-0", align: "start" }, /* @__PURE__ */ React25__namespace.createElement(
+        Calendar,
+        {
+          mode: "single",
+          selected: field.value,
+          onSelect: field.onChange,
+          initialFocus: true
+        }
+      )));
+    case "boolean":
+      return /* @__PURE__ */ React25__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
+    case "file":
+      return /* @__PURE__ */ React25__namespace.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__namespace.Root;
+var tabsListVariants = chunk63LNKQZD_js.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__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: tabsListVariants({ variant, className }),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+var tabsTriggerVariants = chunk63LNKQZD_js.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__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: tabsTriggerVariants({ variant, className }),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React25__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: chunk63LNKQZD_js.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__namespace.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__namespace.useMemo(() => {
+    if (background.includes("url"))
+      return "image";
+    if (background.includes("gradient"))
+      return "gradient";
+    return "solid";
+  }, [background]);
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+    chunk7FWFM2TR_js.Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: chunk63LNKQZD_js.cn(
+        "sb:justify-start sb:text-left sb:font-normal sb:normal-case sb:w-full",
+        !background && "sb:text-muted-foreground",
+        className
+      )
+    },
+    /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:w-full sb:flex sb:items-center sb:gap-2" }, background ? /* @__PURE__ */ React25__namespace.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__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb:h-4 sb:w-4" }), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:truncate sb:flex-1" }, background ? background : "Kies een achtergrond"))
+  )), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:w-64 sb:p-0" }, /* @__PURE__ */ React25__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb:w-full" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb:flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb:flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { className: "sb:flex-1", value: "image" }, "Image")), /* @__PURE__ */ React25__namespace.createElement(
+    TabsContent,
+    {
+      value: "solid",
+      className: "sb:data-[state=active]:flex sb:flex-wrap sb:gap-1 sb:p-4"
+    },
+    solids.map((s) => /* @__PURE__ */ React25__namespace.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__namespace.createElement(
+    TabsContent,
+    {
+      value: "gradient",
+      className: "sb:data-[state=active]:flex sb:flex-wrap sb:gap-1 sb:p-4"
+    },
+    gradients.map((s) => /* @__PURE__ */ React25__namespace.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__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:p-4 sb:border-b" }, /* @__PURE__ */ React25__namespace.createElement(
+    MediaInput,
+    {
+      className: "sb:grid sb:grid-cols-2 sb:gap-1",
+      itemClassName: "sb:aspect-video sb:h-auto sb:w-full",
+      multiple: false,
+      accept: IMAGE_FILE_ACCEPT,
+      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__namespace.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-1 sb:p-4" }, images.map((s) => /* @__PURE__ */ React25__namespace.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__namespace.useState(parse(props.value || "0px"));
+  const [indipendent, setIndipendent] = React25__namespace.useState(
+    isIndipendent(parse(props.value || "0px"))
+  );
+  React25__namespace.useEffect(() => {
+    if (!props.onChange)
+      return;
+    props.onChange(stringify(value));
+  }, [value, props.onChange]);
+  return /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-[1fr_auto] sb:gap-3" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:items-center sb:gap-3" }, !indipendent ? /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
+    AdvancedInput,
+    {
+      value: value.left,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb:h-4 sb:w-4" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    AdvancedInput,
+    {
+      value: value.top,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb:h-4 sb:w-4 sb:rotate-90" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
+    }
+  )) : /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, null, /* @__PURE__ */ React25__namespace.createElement(
+    AdvancedInput,
+    {
+      value: value.left,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    AdvancedInput,
+    {
+      value: value.top,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:rotate-90" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    AdvancedInput,
+    {
+      value: value.right,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:rotate-180" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    AdvancedInput,
+    {
+      value: value.bottom,
+      pattern: "\\d+",
+      onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
+      prepend: /* @__PURE__ */ React25__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb:h-4 sb:w-4 sb:-rotate-90" }),
+      append: /* @__PURE__ */ React25__namespace.createElement("span", { className: "sb:text-muted-foreground" }, "px")
+    }
+  ))), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:shrink-0" }, /* @__PURE__ */ React25__namespace.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__namespace.createElement(lucideReact.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 = zod.z.object({
+  container: zod.z.coerce.boolean(),
+  hidden: zod.z.enum(["always", "mobile", "desktop", "never"]),
+  desktop: zod.z.object({
+    background: zod.z.string(),
+    color: zod.z.string(),
+    padding: zod.z.string(),
+    margin: zod.z.string()
+  }),
+  mobile: zod.z.object({
+    background: zod.z.string(),
+    color: zod.z.string(),
+    padding: zod.z.string(),
+    margin: zod.z.string()
+  })
+});
+var ItemDesignForm = (props) => {
+  const { item } = props;
+  const component = chunk63LNKQZD_js.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 = reactHookForm.useForm({
+    resolver: zod$1.zodResolver(designSchema),
+    values: {
+      container: item.styles?.container ?? true,
+      hidden: item.styles?.hidden ?? "never",
+      desktop: getDefaultDeviceValues("desktop"),
+      mobile: getDefaultDeviceValues("mobile")
+    }
+  });
+  const { patchItem } = chunk7FWFM2TR_js.useBuilder();
+  const onSubmit = React25__namespace.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__namespace.useState("desktop");
+  return /* @__PURE__ */ React25__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React25__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4 sb:p-4" }, /* @__PURE__ */ React25__namespace.createElement(
+    Tabs,
+    {
+      defaultValue: device,
+      onValueChange: (device2) => setDevice(device2)
+    },
+    /* @__PURE__ */ React25__namespace.createElement(TabsList, { className: "sb:h-9 sb:grid sb:w-full sb:grid-cols-2" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb:text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.MonitorIcon, { className: "sb:h-4 sb:w-4 sb:mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb:text-xs" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb:h-4 sb:w-4 sb:mr-2" }), /* @__PURE__ */ React25__namespace.createElement("span", null, "Mobiel")))
+  ), /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:flex-col sb:gap-4" }, /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      key: `${device}.background`,
+      name: `${device}.background`,
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+        BackgroundPicker,
+        {
+          background: field.value,
+          onBackgroundChange: field.onChange
+        }
+      )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      key: `${device}.color`,
+      name: `${device}.color`,
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+        ColorPicker,
+        {
+          color: field.value,
+          onColorChange: field.onChange
+        }
+      )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement("hr", null), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "hidden",
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Verbergen"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(Select, { value: field.value, onValueChange: field.onChange }, /* @__PURE__ */ React25__namespace.createElement(SelectTrigger, null, /* @__PURE__ */ React25__namespace.createElement(SelectValue, null)), /* @__PURE__ */ React25__namespace.createElement(SelectContent, null, /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "never" }, "Nooit"), /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "desktop" }, "Op desktop"), /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "mobile" }, "Op mobiel"), /* @__PURE__ */ React25__namespace.createElement(SelectItem, { value: "always" }, "Altijd")))), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement("hr", null), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      name: "container",
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, { className: "sb:flex sb:flex-row sb:items-center sb:justify-between sb:space-y-0" }, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+        Switch,
+        {
+          checked: !field.value,
+          onCheckedChange: (v) => field.onChange(!v)
+        }
+      )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement("hr", null), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      key: `${device}.padding`,
+      name: `${device}.padding`,
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+        SpacingInput,
+        {
+          value: field.value,
+          onChange: field.onChange
+        }
+      )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    FormField,
+    {
+      control: form.control,
+      key: `${device}.margin`,
+      name: `${device}.margin`,
+      render: ({ field }) => /* @__PURE__ */ React25__namespace.createElement(FormItem, null, /* @__PURE__ */ React25__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React25__namespace.createElement(FormControl, null, /* @__PURE__ */ React25__namespace.createElement(
+        SpacingInput,
+        {
+          value: field.value,
+          onChange: field.onChange
+        }
+      )), /* @__PURE__ */ React25__namespace.createElement(FormMessage, null))
+    }
+  )), /* @__PURE__ */ React25__namespace.createElement(chunk7FWFM2TR_js.Button, { type: "submit", className: "w-full" }, "Opslaan"))));
+};
+var ScrollArea = React25__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  ScrollAreaPrimitive__namespace.Root,
+  {
+    ref,
+    className: chunk63LNKQZD_js.cn("sb:relative sb:overflow-hidden", className),
+    ...props
+  },
+  /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "sb:h-full sb:max-h-[80vh] sb:w-full sb:rounded-[inherit]" }, children),
+  /* @__PURE__ */ React25__namespace.createElement(ScrollBar, null),
+  /* @__PURE__ */ React25__namespace.createElement(ScrollAreaPrimitive__namespace.Corner, null)
+));
+ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
+var ScrollBar = React25__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React25__namespace.createElement(
+  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: chunk63LNKQZD_js.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__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "sb:relative sb:flex-1 sb:rounded-full sb:bg-border" })
+));
+ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
+
+// src/components/container-item-toolbar.tsx
+var ContainerItemToolbar = (props) => {
+  const { contentId, canBringUp = false, canBringDown = false } = props;
+  const { bringUp, bringDown } = chunk7FWFM2TR_js.useBuilder();
+  return /* @__PURE__ */ React25__namespace.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__namespace.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__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React25__namespace.createElement(
+    chunk7FWFM2TR_js.Button,
+    {
+      variant: "ghost",
+      className: "sb:w-8 sb:h-8 sb:p-0",
+      onClick: () => bringUp(contentId),
+      disabled: !canBringUp
+    },
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowUp, { className: "sb:h-5 sb:w-5" })
+  ), /* @__PURE__ */ React25__namespace.createElement(
+    chunk7FWFM2TR_js.Button,
+    {
+      variant: "ghost",
+      className: "sb:w-8 sb:h-8 sb:p-0",
+      onClick: () => bringDown(contentId),
+      disabled: !canBringDown
+    },
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.ArrowDown, { className: "sb:h-5 sb:w-5" })
+  ), /* @__PURE__ */ React25__namespace.createElement(DeleteButton, { contentId })));
+};
+var EditButton = ({ id }) => {
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, { modal: true }, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(chunk7FWFM2TR_js.Button, { variant: "ghost", className: "sb:w-8 sb:h-8 sb:p-0" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.Edit2Icon, { className: "sb:h-5 sb:w-5" }))), /* @__PURE__ */ React25__namespace.createElement(
+    PopoverContent,
+    {
+      side: "left",
+      align: "start",
+      sideOffset: 16,
+      alignOffset: -8,
+      className: "sb:p-0 sb:relative",
+      collisionPadding: 16
+    },
+    /* @__PURE__ */ React25__namespace.createElement(EditPopoverInner, { id })
+  ));
+};
+var EditPopoverInner = (props) => {
+  const { id } = props;
+  const { getItem } = chunk7FWFM2TR_js.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__namespace.createElement(Tabs, null, /* @__PURE__ */ React25__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React25__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React25__namespace.createElement(ScrollArea, null, /* @__PURE__ */ React25__namespace.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React25__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React25__namespace.createElement(ItemDesignForm, { item })));
+};
+var DeleteButton = ({ contentId }) => {
+  const { deleteContent } = chunk7FWFM2TR_js.useBuilder();
+  return /* @__PURE__ */ React25__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+    chunk7FWFM2TR_js.Button,
+    {
+      variant: "ghost",
+      className: "sb:w-8 sb:h-8 sb:p-0 sb:text-destructive"
+    },
+    /* @__PURE__ */ React25__namespace.createElement(lucideReact.Trash2Icon, { className: "sb:h-5 sb:w-5" })
+  )), /* @__PURE__ */ React25__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React25__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React25__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React25__namespace.createElement(
+    AlertDialogAction,
+    {
+      className: chunk7FWFM2TR_js.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__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React25__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React25__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React25__namespace.createElement(React25__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:relative sb-container-item" }, /* @__PURE__ */ React25__namespace.createElement(chunk63LNKQZD_js.DesignWrapper, { building: true, styles: item.styles }, chunk63LNKQZD_js.builder.bindComponent(item, true)), /* @__PURE__ */ React25__namespace.createElement(
+    ContainerItemToolbar,
+    {
+      contentId: item.id,
+      canBringUp: i > 0,
+      canBringDown: i < items.length - 1
+    }
+  )), multiple && /* @__PURE__ */ React25__namespace.createElement(
+    AddContentDividerButton,
+    {
+      parent: id,
+      container: name,
+      index: i + 1
+    }
+  ))));
+};
+var build_container_client_default = BuildContainerInner;
+var AddContentButton = (props) => {
+  const components = chunk63LNKQZD_js.builder.getComponents();
+  const { addContent } = chunk7FWFM2TR_js.useBuilder();
+  return /* @__PURE__ */ React25__namespace.createElement(Popover, null, /* @__PURE__ */ React25__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25__namespace.createElement(PopoverContent, { className: "sb:p-1" }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-2" }, components.map((component) => {
+    const Icon2 = component.icon ?? lucideReact.ImageIcon;
+    return /* @__PURE__ */ React25__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React25__namespace.createElement(
+      chunk7FWFM2TR_js.Button,
+      {
+        variant: "ghost",
+        className: "sb:justify-start",
+        onClick: () => {
+          addContent(
+            component.name,
+            props.container,
+            props.parent,
+            props.index
+          );
+        }
+      },
+      /* @__PURE__ */ React25__namespace.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__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.createElement("div", { className: "sb:flex sb:justify-center sb:bg-primary/50 p-4" }, /* @__PURE__ */ React25__namespace.createElement(chunk7FWFM2TR_js.Button, { size: "sm" }, /* @__PURE__ */ React25__namespace.createElement(lucideReact.PlusIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }), "Blok Toevoegen")));
+};
+var AddContentDividerButton = (props) => {
+  return /* @__PURE__ */ React25__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React25__namespace.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__namespace.createElement(
+    chunk7FWFM2TR_js.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__namespace.createElement(lucideReact.PlusIcon, { className: "sb:mr-2 sb:h-4 sb:w-4" }),
+    "Blok Toevoegen"
+  )));
+};
+
+module.exports = build_container_client_default;