@simple-builder/react 1.3.9 → 1.4.1

package/dist/{build-container-client-THZHNQ5S.mjs → build-container-client-6S55GQVT.mjs}

@@ -1,18 +1,7 @@
 'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-import './chunk-5Q4KJW4A.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-2OHBCAZQ.mjs';
-import { cn, tv, DesignWrapper, builder, Image } from './chunk-ZZT7HGAM.mjs';
+import './chunk-X5MZZBYC.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-ZJYB6LEV.mjs';
+import { cn, tv, DesignWrapper, builder, Image } from './chunk-QSAIF4GO.mjs';
 import * as React25 from 'react';
 import { useCallback } from 'react';
 import { ChevronRight, Check, Circle, X, ChevronDown, ChevronUp, PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
@@ -184,13 +173,16 @@ var Link = TiptapLink.extend({
   }
 });
 
+// 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 ? "" : editor.getHTML();
+      return editor.isEmpty ? "" : normalizeRichTextColors(editor.getHTML());
     default:
       return editor.getText();
   }
@@ -209,7 +201,9 @@ var useRichTextEditor = ({
     (editor2) => {
       console.count("useRichTextEditor:handleCreate");
       if (value && editor2.isEmpty) {
-        editor2.commands.setContent(value);
+        editor2.commands.setContent(
+          typeof value === "string" ? normalizeRichTextColors(value) : value
+        );
       }
     },
     [value]
@@ -434,32 +428,34 @@ var ToggleGroupItem = React25.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var PALETTES = [
   {
-    inverse: "hsl(var(--background))",
+    inverse: "var(--background)",
     colors: [
-      { cssVar: "hsl(var(--foreground))" },
-      { cssVar: "hsl(var(--primary-foreground))" },
-      { cssVar: "hsl(var(--secondary-foreground))" },
-      { cssVar: "hsl(var(--tertiary-foreground))" },
-      { cssVar: "hsl(var(--muted-foreground))" },
-      { cssVar: "hsl(var(--accent-foreground))" },
-      { cssVar: "hsl(var(--destructive-foreground))" }
+      { 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: "hsl(var(--foreground))",
+    inverse: "var(--foreground)",
     colors: [
-      { cssVar: "hsl(var(--background))" },
-      { cssVar: "hsl(var(--primary))" },
-      { cssVar: "hsl(var(--secondary))" },
-      { cssVar: "hsl(var(--tertiary))" },
-      { cssVar: "hsl(var(--muted))" },
-      { cssVar: "hsl(var(--accent))" },
-      { cssVar: "hsl(var(--destructive))" }
+      { 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 = editor.getAttributes("textStyle")?.color || "hsl(var(--foreground))";
+  const color = normalizeRichTextColors(
+    editor.getAttributes("textStyle")?.color || "var(--foreground)"
+  );
   const [selectedColor, setSelectedColor] = React25.useState(color);
   React25.useEffect(() => {
     setSelectedColor(color);
@@ -506,7 +502,7 @@ var ColorTool = ({ editor }) => {
         value: color2.cssVar,
         style: { backgroundColor: color2.cssVar }
       },
-      selectedColor === color2.cssVar && /* @__PURE__ */ React25.createElement(
+      normalizeRichTextColors(selectedColor) === color2.cssVar && /* @__PURE__ */ React25.createElement(
         LuCheck,
         {
           className: "sb:absolute sb:inset-0 sb:m-auto sb:size-6",
@@ -1174,11 +1170,26 @@ var ColorPicker = (props) => {
     }
   ))));
 };
+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 } = props;
+  const {
+    onFilesChange,
+    limit = 32,
+    multiple = false,
+    onError,
+    accept = MEDIA_FILE_ACCEPT
+  } = props;
   const id = React25.useId();
   const [queue, setQueue] = React25.useState([]);
   const [sources, setSources] = React25.useState(props.files ?? []);
+  const [videoUrls, setVideoUrls] = React25.useState({});
   const maxConcurrentUploads = 3;
   const uploadingCountRef = React25.useRef(0);
   const handleFilesAdd = async (e) => {
@@ -1228,6 +1239,9 @@ var MediaInput = (props) => {
           );
           continue;
         }
+        if (isVideoFile(file)) {
+          setVideoUrls((prev) => ({ ...prev, [url]: true }));
+        }
         setSources((prev) => [...prev, url]);
         onFilesChange?.([...sources, url]);
       } catch (e2) {
@@ -1252,12 +1266,10 @@ var MediaInput = (props) => {
     });
   };
   return /* @__PURE__ */ React25.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React25.createElement(
-    Image,
+    MediaPreview,
     {
       src,
-      alt: "",
-      fill: true,
-      className: "sb:absolute sb:inset-0 sb:object-cover sb:pointer-events-none"
+      isVideo: !!videoUrls[src] || isVideoUrl(src)
     }
   ), /* @__PURE__ */ React25.createElement("div", { className: "sb:absolute sb:right-1 sb:top-1 sb:z-30 sb:flex sb:items-center sb:justify-end sb:gap-3 sb:opacity-0 sb:transition-opacity sb:group-hover:opacity-100" }, /* @__PURE__ */ React25.createElement(
     "button",
@@ -1293,7 +1305,7 @@ var MediaInput = (props) => {
         type: "file",
         onChange: handleFilesAdd,
         multiple,
-        accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
+        accept,
         className: "sb:hidden"
       }
     )
@@ -1311,6 +1323,33 @@ var MediaInputItem = (props) => {
     props.children
   );
 };
+var MediaPreview = (props) => {
+  const [kind, setKind] = React25.useState(
+    props.isVideo ? "video" : "image"
+  );
+  if (kind === "video") {
+    return /* @__PURE__ */ React25.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.createElement(
+    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;
@@ -1782,6 +1821,7 @@ var BackgroundPicker = (props) => {
       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;
@@ -2225,7 +2265,7 @@ var build_container_client_default = BuildContainerInner;
 var AddContentButton = (props) => {
   const components = builder.getComponents();
   const { addContent } = useBuilder();
-  return /* @__PURE__ */ React25.createElement(Popover, null, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25.createElement(PopoverContent, { className: "sb:p-1 sb:w-full sb:max-w-xl" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-2" }, components.map((component) => {
+  return /* @__PURE__ */ React25.createElement(Popover, null, /* @__PURE__ */ React25.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React25.createElement(PopoverContent, { className: "sb:p-1" }, /* @__PURE__ */ React25.createElement("div", { className: "sb:grid sb:grid-cols-2 sb:gap-2" }, components.map((component) => {
     const Icon2 = component.icon ?? ImageIcon;
     return /* @__PURE__ */ React25.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React25.createElement(
       Button,