@toriistudio/v0-playground 0.7.0 → 0.7.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
-// src/components/Playground/Playground.tsx
-import { useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+// src/components/Playground.tsx
+import { useEffect as useEffect7, useMemo as useMemo5, useState as useState5 } from "react";
 import { Check as Check3, Copy as Copy2 } from "lucide-react";
 
 // src/context/ResizableLayout.tsx
@@ -435,17 +435,30 @@ var ControlsProvider = ({ children }) => {
       setComponentName(opts.componentName);
     }
     if (opts?.config) {
-      const { addAdvancedPaletteControl, ...otherConfig } = opts.config;
-      setConfig((prev) => ({
-        ...prev,
-        ...otherConfig,
-        ...Object.prototype.hasOwnProperty.call(
+      const {
+        addAdvancedPaletteControl,
+        addMediaUploadControl,
+        ...otherConfig
+      } = opts.config;
+      setConfig((prev) => {
+        const nextConfig = {
+          ...prev,
+          ...otherConfig
+        };
+        if (Object.prototype.hasOwnProperty.call(
           opts.config,
           "addAdvancedPaletteControl"
-        ) ? {
-          addAdvancedPaletteControl: addAdvancedPaletteControl ? resolveAdvancedPaletteConfig(addAdvancedPaletteControl) : void 0
-        } : {}
-      }));
+        )) {
+          nextConfig.addAdvancedPaletteControl = addAdvancedPaletteControl ? resolveAdvancedPaletteConfig(addAdvancedPaletteControl) : void 0;
+        }
+        if (Object.prototype.hasOwnProperty.call(
+          opts.config,
+          "addMediaUploadControl"
+        )) {
+          nextConfig.addMediaUploadControl = addMediaUploadControl ? { ...addMediaUploadControl } : void 0;
+        }
+        return nextConfig;
+      });
     }
     setSchema((prevSchema) => ({ ...prevSchema, ...newSchema }));
     setValues((prevValues) => {
@@ -610,7 +623,7 @@ var useControls = (schema, options) => {
     resolvedAdvancedConfig.onPaletteChange(clonePalette(palette));
   }, [ctx.values, resolvedAdvancedConfig]);
   const typedValues = ctx.values;
-  const jsx14 = useCallback(() => {
+  const jsx15 = useCallback(() => {
     if (!options?.componentName) return "";
     const props = Object.entries(typedValues).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -624,13 +637,19 @@ var useControls = (schema, options) => {
     controls: ctx.values,
     schema: ctx.schema,
     setValue: ctx.setValue,
-    jsx: jsx14
+    jsx: jsx15
   };
 };
 var useUrlSyncedControls = useControls;
 
-// src/components/ControlPanel/ControlPanel.tsx
-import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3, useEffect as useEffect5, useRef as useRef4 } from "react";
+// src/components/ControlPanel.tsx
+import {
+  useState as useState4,
+  useMemo as useMemo4,
+  useCallback as useCallback4,
+  useEffect as useEffect6,
+  useRef as useRef5
+} from "react";
 import {
   Check as Check2,
   Copy,
@@ -912,7 +931,7 @@ Button.displayName = "Button";
 // src/constants/layout.ts
 var MOBILE_CONTROL_PANEL_PEEK = 112;
 
-// src/components/AdvancedPaletteControl/AdvancedPaletteControl.tsx
+// src/components/AdvancedPaletteControl.tsx
 import {
   useCallback as useCallback2,
   useEffect as useEffect4,
@@ -1065,8 +1084,316 @@ var AdvancedPaletteControl = ({
 };
 var AdvancedPaletteControl_default = AdvancedPaletteControl;
 
-// src/components/ControlPanel/ControlPanel.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/components/MediaUploadControl.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useId,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useSyncExternalStore
+} from "react";
+import { X } from "lucide-react";
+
+// src/state/mediaSelectionStore.ts
+var snapshot = {
+  media: null,
+  error: null
+};
+var listeners = /* @__PURE__ */ new Set();
+var emitChange = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var mediaSelectionStore = {
+  subscribe: (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  getSnapshot: () => snapshot,
+  setSnapshot: (next) => {
+    snapshot = next;
+    emitChange();
+  }
+};
+
+// src/components/MediaUploadControl.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_PRESET_MEDIA = [
+  {
+    src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233793/astronaut_q84mbj.png",
+    label: "Astronaut",
+    type: "image"
+  },
+  {
+    src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233793/surreal-head_r0ozcd.png",
+    label: "Futuristic",
+    type: "image"
+  },
+  {
+    src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233797/futuristic_bpwdzt.png",
+    label: "Surreal",
+    type: "image"
+  },
+  {
+    src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233793/portrait_hd7dyc.png",
+    label: "Portrait",
+    type: "image"
+  }
+];
+function MediaUploadControl({
+  onSelectMedia,
+  onClear,
+  presetMedia,
+  maxPresetCount
+}) {
+  const inputId = useId();
+  const inputRef = useRef4(null);
+  const uploadedUrlRef = useRef4(null);
+  const { media, error } = useSyncExternalStore(
+    mediaSelectionStore.subscribe,
+    mediaSelectionStore.getSnapshot,
+    mediaSelectionStore.getSnapshot
+  );
+  const VIDEO_EXTENSIONS = useMemo3(
+    () => [".mp4", ".webm", ".ogg", ".ogv", ".mov", ".m4v"],
+    []
+  );
+  const setSelection = useCallback3(
+    (next) => {
+      mediaSelectionStore.setSnapshot(next);
+    },
+    []
+  );
+  const handleFileChange = (event) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    if (uploadedUrlRef.current) {
+      URL.revokeObjectURL(uploadedUrlRef.current);
+      uploadedUrlRef.current = null;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    uploadedUrlRef.current = objectUrl;
+    const lowerName = file.name?.toLowerCase() ?? "";
+    const hasVideoExtension = VIDEO_EXTENSIONS.some(
+      (ext) => lowerName.endsWith(ext)
+    );
+    const isVideo = file.type.startsWith("video/") || hasVideoExtension;
+    if (isVideo) {
+      setSelection({
+        media: null,
+        error: "Videos are not supported in this effect yet."
+      });
+      return;
+    }
+    const nextMedia = { src: objectUrl, type: "image" };
+    setSelection({ media: nextMedia, error: null });
+    onSelectMedia(nextMedia);
+  };
+  const handleClearSelection = () => {
+    if (uploadedUrlRef.current) {
+      URL.revokeObjectURL(uploadedUrlRef.current);
+      uploadedUrlRef.current = null;
+    }
+    setSelection({ media: null, error: null });
+    onClear();
+  };
+  const handlePresetSelect = (entry) => {
+    if (entry.type === "video") {
+      setSelection({
+        media: null,
+        error: "Videos are not supported in this effect yet."
+      });
+      return;
+    }
+    const nextMedia = { src: entry.src, type: entry.type };
+    setSelection({ media: nextMedia, error: null });
+    onSelectMedia(nextMedia);
+  };
+  useEffect5(() => {
+    return () => {
+      if (uploadedUrlRef.current) {
+        URL.revokeObjectURL(uploadedUrlRef.current);
+        uploadedUrlRef.current = null;
+      }
+    };
+  }, []);
+  const presets = useMemo3(() => {
+    const source = presetMedia ?? DEFAULT_PRESET_MEDIA;
+    if (typeof maxPresetCount === "number" && Number.isFinite(maxPresetCount)) {
+      const safeCount = Math.max(0, Math.floor(maxPresetCount));
+      return source.slice(0, safeCount);
+    }
+    return source;
+  }, [presetMedia, maxPresetCount]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem"
+      },
+      children: [
+        /* @__PURE__ */ jsx10("label", { htmlFor: inputId, style: { fontSize: "0.85rem", fontWeight: 500 }, children: "Upload media" }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            id: inputId,
+            type: "file",
+            accept: "image/*",
+            ref: inputRef,
+            style: { display: "none" },
+            onChange: handleFileChange
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => inputRef.current?.click(),
+                  style: {
+                    padding: "0.35rem 0.75rem",
+                    borderRadius: "0.4rem",
+                    border: "1px solid rgba(255, 255, 255, 0.25)",
+                    background: "rgba(255, 255, 255, 0.08)",
+                    color: "inherit",
+                    cursor: "pointer"
+                  },
+                  children: "Choose file"
+                }
+              ),
+              media ? /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: "0.35rem",
+                    overflow: "hidden",
+                    border: "1px solid rgba(255, 255, 255, 0.15)"
+                  },
+                  children: /* @__PURE__ */ jsx10(
+                    "img",
+                    {
+                      src: media.src,
+                      alt: "Thumbnail",
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block"
+                      }
+                    }
+                  )
+                }
+              ) : null,
+              media ? /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClearSelection,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "0.3rem",
+                    borderRadius: "0.4rem",
+                    border: "1px solid rgba(255,255,255,0.2)",
+                    background: "transparent",
+                    color: "inherit",
+                    cursor: "pointer"
+                  },
+                  "aria-label": "Clear selection",
+                  title: "Clear selection",
+                  children: /* @__PURE__ */ jsx10(X, { size: 16, strokeWidth: 2 })
+                }
+              ) : null
+            ]
+          }
+        ),
+        presets.length > 0 ? /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+              gap: "0.5rem"
+            },
+            children: presets.map((entry) => {
+              const isSelected = media?.src === entry.src && media?.type === entry.type;
+              return /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handlePresetSelect(entry),
+                  style: {
+                    width: "100%",
+                    borderRadius: "0.4rem",
+                    border: "1px solid rgba(255,255,255,0.25)",
+                    outline: isSelected ? "2px solid #fff" : "none",
+                    outlineOffset: 2,
+                    padding: 0,
+                    overflow: "hidden",
+                    background: "transparent",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx10(
+                      "img",
+                      {
+                        src: entry.src,
+                        alt: entry.label,
+                        style: {
+                          width: "100%",
+                          height: 100,
+                          objectFit: "cover",
+                          display: "block"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10(
+                      "span",
+                      {
+                        style: {
+                          display: "block",
+                          padding: "0.35rem",
+                          fontSize: "0.75rem",
+                          textAlign: "left",
+                          background: "rgba(0,0,0,0.45)"
+                        },
+                        children: entry.label
+                      }
+                    )
+                  ]
+                },
+                `${entry.src}-${entry.type}`
+              );
+            })
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx10("p", { style: { color: "#ff9da4", fontSize: "0.8rem" }, children: error }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ControlPanel.tsx
+import { Fragment, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var splitPropsString = (input) => {
   const props = [];
   let current = "";
@@ -1273,7 +1600,7 @@ var highlightJsx = (input) => {
       nodes.push(token.value);
     } else {
       nodes.push(
-        /* @__PURE__ */ jsx10("span", { className: TOKEN_CLASS_MAP[token.type], children: token.value }, `token-${index}`)
+        /* @__PURE__ */ jsx11("span", { className: TOKEN_CLASS_MAP[token.type], children: token.value }, `token-${index}`)
       );
     }
   });
@@ -1284,12 +1611,12 @@ var ControlPanel = () => {
   const [codeCopied, setCodeCopied] = useState4(false);
   const [isCodeVisible, setIsCodeVisible] = useState4(false);
   const [folderStates, setFolderStates] = useState4({});
-  const codeCopyTimeoutRef = useRef4(null);
+  const codeCopyTimeoutRef = useRef5(null);
   const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
   const isControlsOnlyView = typeof window !== "undefined" && new URLSearchParams(window.location.search).get(CONTROLS_ONLY_PARAM) === "true";
   const previewUrl = usePreviewUrl(values);
-  const buildUrl = useCallback3(
+  const buildUrl = useCallback4(
     (modifier) => {
       if (!previewUrl) return "";
       const [path, search = ""] = previewUrl.split("?");
@@ -1300,13 +1627,13 @@ var ControlPanel = () => {
     },
     [previewUrl]
   );
-  const presentationUrl = useMemo3(() => {
+  const presentationUrl = useMemo4(() => {
     if (!previewUrl) return "";
     return buildUrl((params) => {
       params.set(PRESENTATION_PARAM, "true");
     });
   }, [buildUrl, previewUrl]);
-  const controlsOnlyUrl = useMemo3(() => {
+  const controlsOnlyUrl = useMemo4(() => {
     if (!previewUrl) return "";
     return buildUrl((params) => {
       params.delete(NO_CONTROLS_PARAM);
@@ -1314,7 +1641,7 @@ var ControlPanel = () => {
       params.set(CONTROLS_ONLY_PARAM, "true");
     });
   }, [buildUrl, previewUrl]);
-  const handlePresentationClick = useCallback3(() => {
+  const handlePresentationClick = useCallback4(() => {
     if (typeof window === "undefined" || !presentationUrl) return;
     window.open(presentationUrl, "_blank", "noopener,noreferrer");
     if (controlsOnlyUrl) {
@@ -1322,10 +1649,7 @@ var ControlPanel = () => {
       const viewportHeight = window.innerHeight || 900;
       const controlsWidth = Math.max(
         320,
-        Math.min(
-          600,
-          Math.round(viewportWidth * leftPanelWidth / 100)
-        )
+        Math.min(600, Math.round(viewportWidth * leftPanelWidth / 100))
       );
       const controlsHeight = Math.max(600, viewportHeight);
       const controlsFeatures = [
@@ -1341,7 +1665,7 @@ var ControlPanel = () => {
       window.open(controlsOnlyUrl, "v0-controls", controlsFeatures);
     }
   }, [controlsOnlyUrl, leftPanelWidth, presentationUrl]);
-  const jsx14 = useMemo3(() => {
+  const jsx15 = useMemo4(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -1386,7 +1710,7 @@ var ControlPanel = () => {
   const advancedConfig = config?.addAdvancedPaletteControl;
   let advancedPaletteControlNode = null;
   if (advancedConfig) {
-    const advancedNode = /* @__PURE__ */ jsx10(
+    const advancedNode = /* @__PURE__ */ jsx11(
       AdvancedPaletteControl_default,
       {
         config: advancedConfig
@@ -1412,12 +1736,52 @@ var ControlPanel = () => {
       advancedPaletteControlNode = advancedNode;
     }
   }
-  const rootButtonControls = rootControls.filter(
-    ([, control]) => control.type === "button"
-  );
-  const rootNormalControls = rootControls.filter(
-    ([, control]) => control.type !== "button"
-  );
+  const mediaUploadConfig = config?.addMediaUploadControl;
+  let mediaUploadControlNode = null;
+  if (mediaUploadConfig) {
+    const mediaUploadNode = /* @__PURE__ */ jsx11(
+      MediaUploadControl,
+      {
+        onSelectMedia: (media) => {
+          mediaUploadConfig.onSelectMedia?.(media);
+        },
+        onClear: () => {
+          mediaUploadConfig.onClear?.();
+        },
+        presetMedia: mediaUploadConfig.presetMedia,
+        maxPresetCount: mediaUploadConfig.maxPresetCount
+      },
+      "mediaUploadControl"
+    );
+    const mediaFolder = mediaUploadConfig.folder?.trim();
+    if (mediaFolder) {
+      const placement = mediaUploadConfig.folderPlacement ?? "bottom";
+      ensureFolder(mediaFolder);
+      if (!folderControls.has(mediaFolder)) {
+        folderControls.set(mediaFolder, []);
+      }
+      const existingPlacement = folderPlacement.get(mediaFolder);
+      if (!existingPlacement || placement === "top") {
+        folderPlacement.set(mediaFolder, placement);
+      }
+      if (!folderExtras.has(mediaFolder)) {
+        folderExtras.set(mediaFolder, []);
+      }
+      folderExtras.get(mediaFolder).push(mediaUploadNode);
+    } else {
+      mediaUploadControlNode = mediaUploadNode;
+    }
+  }
+  const rootButtonControls = [];
+  const rootNormalControls = [];
+  rootControls.forEach((entry) => {
+    const [key, control] = entry;
+    if (control.type === "button") {
+      rootButtonControls.push([key, control]);
+    } else {
+      rootNormalControls.push(entry);
+    }
+  });
   const folderGroups = folderOrder.map((folder) => ({
     folder,
     entries: folderControls.get(folder) ?? [],
@@ -1426,7 +1790,7 @@ var ControlPanel = () => {
   })).filter((group) => group.entries.length > 0 || group.extras.length > 0);
   const hasRootButtonControls = rootButtonControls.length > 0;
   const hasAnyFolders = folderGroups.length > 0;
-  const jsonToComponentString = useCallback3(
+  const jsonToComponentString = useCallback4(
     ({
       componentName: componentNameOverride,
       props
@@ -1457,40 +1821,40 @@ var ControlPanel = () => {
     componentName,
     values,
     schema,
-    jsx: jsx14,
+    jsx: jsx15,
     jsonToComponentString
-  }) ?? jsx14;
+  }) ?? jsx15;
   const shouldShowCopyButton = config?.showCopyButton !== false && Boolean(copyText);
-  const baseSnippet = copyText || jsx14;
-  const formattedCode = useMemo3(
+  const baseSnippet = copyText || jsx15;
+  const formattedCode = useMemo4(
     () => formatJsxCodeSnippet(baseSnippet),
     [baseSnippet]
   );
   const hasCodeSnippet = Boolean(config?.showCodeSnippet && formattedCode);
-  const highlightedCode = useMemo3(
+  const highlightedCode = useMemo4(
     () => formattedCode ? highlightJsx(formattedCode) : null,
     [formattedCode]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!hasCodeSnippet) {
       setIsCodeVisible(false);
     }
   }, [hasCodeSnippet]);
-  useEffect5(() => {
+  useEffect6(() => {
     setCodeCopied(false);
     if (codeCopyTimeoutRef.current) {
       clearTimeout(codeCopyTimeoutRef.current);
       codeCopyTimeoutRef.current = null;
     }
   }, [formattedCode]);
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       if (codeCopyTimeoutRef.current) {
         clearTimeout(codeCopyTimeoutRef.current);
       }
     };
   }, []);
-  const handleToggleCodeVisibility = useCallback3(() => {
+  const handleToggleCodeVisibility = useCallback4(() => {
     setIsCodeVisible((prev) => {
       const next = !prev;
       if (!next) {
@@ -1503,7 +1867,7 @@ var ControlPanel = () => {
       return next;
     });
   }, []);
-  const handleCodeCopy = useCallback3(() => {
+  const handleCodeCopy = useCallback4(() => {
     if (!formattedCode) return;
     if (typeof navigator === "undefined" || !navigator.clipboard || typeof navigator.clipboard.writeText !== "function") {
       return;
@@ -1521,11 +1885,11 @@ var ControlPanel = () => {
     });
   }, [formattedCode]);
   const labelize = (key) => key.replace(/([A-Z])/g, " $1").replace(/[\-_]/g, " ").replace(/\s+/g, " ").trim().replace(/(^|\s)\S/g, (s) => s.toUpperCase());
-  const renderButtonControl = (key, control, variant) => /* @__PURE__ */ jsx10(
+  const renderButtonControl = (key, control, variant) => /* @__PURE__ */ jsx11(
     "div",
     {
       className: variant === "root" ? "flex-1 [&_[data-slot=button]]:w-full" : "[&_[data-slot=button]]:w-full",
-      children: control.render ? control.render() : /* @__PURE__ */ jsx10(
+      children: control.render ? control.render() : /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: control.onClick,
@@ -1543,9 +1907,9 @@ var ControlPanel = () => {
     const value = values[key];
     switch (control.type) {
       case "boolean":
-        return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx10(Label, { htmlFor: key, className: "cursor-pointer", children: labelize(key) }),
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx11(Label, { htmlFor: key, className: "cursor-pointer", children: labelize(key) }),
+          /* @__PURE__ */ jsx11(
             Switch,
             {
               id: key,
@@ -1556,10 +1920,10 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "number":
-        return /* @__PURE__ */ jsxs5("div", { className: "space-y-3 w-full", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
-            /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-full", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx11(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+            /* @__PURE__ */ jsx11(
               Input,
               {
                 type: "number",
@@ -1576,7 +1940,7 @@ var ControlPanel = () => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             Slider,
             {
               id: key,
@@ -1590,9 +1954,9 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "string":
-        return /* @__PURE__ */ jsxs5("div", { className: "space-y-2 w-full", children: [
-          /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs6("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ jsx11(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ jsx11(
             Input,
             {
               id: key,
@@ -1604,9 +1968,9 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "color":
-        return /* @__PURE__ */ jsxs5("div", { className: "space-y-2 w-full", children: [
-          /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs6("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ jsx11(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "color",
@@ -1618,11 +1982,11 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "select":
-        return /* @__PURE__ */ jsx10("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx10(Label, { className: "min-w-fit", htmlFor: key, children: labelize(key) }),
-          /* @__PURE__ */ jsxs5(Select, { value, onValueChange: (val) => setValue(key, val), children: [
-            /* @__PURE__ */ jsx10(SelectTrigger, { className: "flex-1 cursor-pointer", children: /* @__PURE__ */ jsx10(SelectValue, { placeholder: "Select option" }) }),
-            /* @__PURE__ */ jsx10(SelectContent, { className: "cursor-pointer z-[9999]", children: Object.entries(control.options).map(([label]) => /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx11(Label, { className: "min-w-fit", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ jsxs6(Select, { value, onValueChange: (val) => setValue(key, val), children: [
+            /* @__PURE__ */ jsx11(SelectTrigger, { className: "flex-1 cursor-pointer", children: /* @__PURE__ */ jsx11(SelectValue, { placeholder: "Select option" }) }),
+            /* @__PURE__ */ jsx11(SelectContent, { className: "cursor-pointer z-[9999]", children: Object.entries(control.options).map(([label]) => /* @__PURE__ */ jsx11(
               SelectItem,
               {
                 value: label,
@@ -1639,12 +2003,12 @@ var ControlPanel = () => {
   };
   const renderFolder = (folder, entries, extras = []) => {
     const isOpen = folderStates[folder] ?? true;
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "border border-stone-700/60 rounded-lg bg-stone-900/70",
         children: [
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -1654,8 +2018,8 @@ var ControlPanel = () => {
               })),
               className: "w-full flex items-center justify-between px-4 py-3 text-left font-semibold text-stone-200 tracking-wide",
               children: [
-                /* @__PURE__ */ jsx10("span", { children: folder }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11("span", { children: folder }),
+                /* @__PURE__ */ jsx11(
                   ChevronDown2,
                   {
                     className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
@@ -1664,7 +2028,7 @@ var ControlPanel = () => {
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ jsxs5("div", { className: "px-4 pb-4 pt-0 space-y-5", children: [
+          isOpen && /* @__PURE__ */ jsxs6("div", { className: "px-4 pb-4 pt-0 space-y-5", children: [
             entries.map(
               ([key, control]) => renderControl(key, control, "folder")
             ),
@@ -1703,27 +2067,28 @@ var ControlPanel = () => {
       });
     }
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       className: `order-2 md:order-1 w-full md:h-auto p-2 md:p-4 bg-stone-900 font-mono text-stone-300 transition-opacity duration-300 z-max ${!isHydrated ? "opacity-0" : "opacity-100"}`,
       onPointerDown: (e) => e.stopPropagation(),
       onTouchStart: (e) => e.stopPropagation(),
       style: panelStyle,
-      children: /* @__PURE__ */ jsxs5("div", { className: "dark mb-10 space-y-6 p-4 md:p-6 bg-stone-900/95 backdrop-blur-md border-2 border-stone-700 rounded-xl shadow-lg", children: [
-        /* @__PURE__ */ jsx10("div", { className: "space-y-1", children: /* @__PURE__ */ jsx10("h1", { className: "text-lg text-stone-100 font-semibold", children: config?.mainLabel ?? "Controls" }) }),
-        /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+      children: /* @__PURE__ */ jsxs6("div", { className: "dark mb-10 space-y-6 p-4 md:p-6 bg-stone-900/95 backdrop-blur-md border-2 border-stone-700 rounded-xl shadow-lg", children: [
+        /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: /* @__PURE__ */ jsx11("h1", { className: "text-lg text-stone-100 font-semibold", children: config?.mainLabel ?? "Controls" }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "space-y-6", children: [
           topFolderSections,
-          hasRootButtonControls && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2", children: rootButtonControls.map(
+          hasRootButtonControls && /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-2", children: rootButtonControls.map(
             ([key, control]) => renderButtonControl(key, control, "root")
           ) }),
           advancedPaletteControlNode,
+          mediaUploadControlNode,
           rootNormalControls.map(
             ([key, control]) => renderControl(key, control, "root")
           ),
           bottomFolderSections,
-          hasCodeSnippet && /* @__PURE__ */ jsxs5("div", { className: "border border-stone-700/60 rounded-lg bg-stone-900/70", children: [
-            /* @__PURE__ */ jsxs5(
+          hasCodeSnippet && /* @__PURE__ */ jsxs6("div", { className: "border border-stone-700/60 rounded-lg bg-stone-900/70", children: [
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 type: "button",
@@ -1731,8 +2096,8 @@ var ControlPanel = () => {
                 className: "w-full flex items-center justify-between px-4 py-3 text-left font-semibold text-stone-200 tracking-wide",
                 "aria-expanded": isCodeVisible,
                 children: [
-                  /* @__PURE__ */ jsx10("span", { children: isCodeVisible ? "Hide Code" : "Show Code" }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11("span", { children: isCodeVisible ? "Hide Code" : "Show Code" }),
+                  /* @__PURE__ */ jsx11(
                     ChevronDown2,
                     {
                       className: `w-4 h-4 transition-transform duration-200 ${isCodeVisible ? "rotate-180" : ""}`
@@ -1741,26 +2106,26 @@ var ControlPanel = () => {
                 ]
               }
             ),
-            isCodeVisible && /* @__PURE__ */ jsxs5("div", { className: "relative border-t border-stone-700/60 bg-stone-950/60 px-4 py-4 rounded-b-lg", children: [
-              /* @__PURE__ */ jsx10(
+            isCodeVisible && /* @__PURE__ */ jsxs6("div", { className: "relative border-t border-stone-700/60 bg-stone-950/60 px-4 py-4 rounded-b-lg", children: [
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
                   onClick: handleCodeCopy,
                   className: "absolute top-3 right-3 flex items-center gap-1 rounded-md border border-stone-700 bg-stone-800 px-2 py-1 text-xs font-medium text-white shadow hover:bg-stone-700",
-                  children: codeCopied ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-                    /* @__PURE__ */ jsx10(Check2, { className: "h-3.5 w-3.5" }),
+                  children: codeCopied ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+                    /* @__PURE__ */ jsx11(Check2, { className: "h-3.5 w-3.5" }),
                     "Copied"
-                  ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-                    /* @__PURE__ */ jsx10(Copy, { className: "h-3.5 w-3.5" }),
+                  ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+                    /* @__PURE__ */ jsx11(Copy, { className: "h-3.5 w-3.5" }),
                     "Copy"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx10("pre", { className: "whitespace-pre overflow-x-auto text-xs md:text-sm text-stone-200 pr-14", children: /* @__PURE__ */ jsx10("code", { className: "block text-stone-200", children: highlightedCode ?? formattedCode }) })
+              /* @__PURE__ */ jsx11("pre", { className: "whitespace-pre overflow-x-auto text-xs md:text-sm text-stone-200 pr-14", children: /* @__PURE__ */ jsx11("code", { className: "block text-stone-200", children: highlightedCode ?? formattedCode }) })
             ] })
           ] }),
-          shouldShowCopyButton && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
+          shouldShowCopyButton && /* @__PURE__ */ jsx11("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx11(
             "button",
             {
               onClick: () => {
@@ -1771,18 +2136,18 @@ var ControlPanel = () => {
                 setTimeout(() => setCopied(false), 5e3);
               },
               className: "w-full px-4 py-2 text-sm bg-stone-800 hover:bg-stone-700 text-white rounded-md flex items-center justify-center gap-2 shadow",
-              children: copied ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-                /* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4" }),
+              children: copied ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+                /* @__PURE__ */ jsx11(Check2, { className: "w-4 h-4" }),
                 "Copied"
-              ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-                /* @__PURE__ */ jsx10(Copy, { className: "w-4 h-4" }),
+              ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+                /* @__PURE__ */ jsx11(Copy, { className: "w-4 h-4" }),
                 "Copy to Clipboard"
               ] })
             }
           ) }, "control-panel-jsx")
         ] }),
-        previewUrl && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx10(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxs5(
+        previewUrl && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx11(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxs6(
             "a",
             {
               href: previewUrl,
@@ -1790,12 +2155,12 @@ var ControlPanel = () => {
               rel: "noopener noreferrer",
               className: "w-full px-4 py-2 text-sm text-center bg-stone-900 hover:bg-stone-800 text-white rounded-md border border-stone-700",
               children: [
-                /* @__PURE__ */ jsx10(SquareArrowOutUpRight, {}),
+                /* @__PURE__ */ jsx11(SquareArrowOutUpRight, {}),
                 " Open in a New Tab"
               ]
             }
           ) }),
-          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ jsxs5(
+          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ jsxs6(
             Button,
             {
               type: "button",
@@ -1803,7 +2168,7 @@ var ControlPanel = () => {
               variant: "secondary",
               className: "w-full bg-stone-800 text-white hover:bg-stone-700 border border-stone-700",
               children: [
-                /* @__PURE__ */ jsx10(Presentation, {}),
+                /* @__PURE__ */ jsx11(Presentation, {}),
                 " Presentation Mode"
               ]
             }
@@ -1815,16 +2180,16 @@ var ControlPanel = () => {
 };
 var ControlPanel_default = ControlPanel;
 
-// src/components/PreviewContainer/PreviewContainer.tsx
-import { useRef as useRef5 } from "react";
+// src/components/PreviewContainer.tsx
+import { useRef as useRef6 } from "react";
 
-// src/components/Grid/Grid.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+// src/components/Grid.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Grid() {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
-      className: "absolute inset-0 w-screen h-screen z-[0] blur-[1px]",
+      className: "absolute inset-0 w-full h-full z-[0] blur-[1px]",
       style: {
         backgroundImage: `
       linear-gradient(to right,rgb(13, 13, 13) 1px, transparent 1px),
@@ -1838,40 +2203,40 @@ function Grid() {
 }
 var Grid_default = Grid;
 
-// src/components/PreviewContainer/PreviewContainer.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+// src/components/PreviewContainer.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var PreviewContainer = ({ children, hideControls }) => {
   const { config } = useControlsContext();
   const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
-  const previewRef = useRef5(null);
-  return /* @__PURE__ */ jsx12(
+  const previewRef = useRef6(null);
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref: previewRef,
-      className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
+      className: "order-1 md:order-2 flex-1 md:flex-none bg-black overflow-auto flex items-center justify-center relative",
       style: isHydrated && isDesktop && !hideControls ? {
         width: `${100 - leftPanelWidth}%`,
         marginLeft: `${leftPanelWidth}%`
       } : {},
-      children: /* @__PURE__ */ jsxs6("div", { className: "w-screen h-screen", children: [
-        config?.showGrid && /* @__PURE__ */ jsx12(Grid_default, {}),
-        /* @__PURE__ */ jsx12("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
+      children: /* @__PURE__ */ jsxs7("div", { className: "w-full h-screen", children: [
+        config?.showGrid && /* @__PURE__ */ jsx13(Grid_default, {}),
+        /* @__PURE__ */ jsx13("div", { className: "w-full h-full flex items-center justify-center relative", children })
       ] })
     }
   );
 };
 var PreviewContainer_default = PreviewContainer;
 
-// src/components/Playground/Playground.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var HiddenPreview = ({ children }) => /* @__PURE__ */ jsx13("div", { "aria-hidden": "true", className: "hidden", children });
+// src/components/Playground.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var HiddenPreview = ({ children }) => /* @__PURE__ */ jsx14("div", { "aria-hidden": "true", className: "hidden", children });
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = useState5(false);
   const [copied, setCopied] = useState5(false);
-  useEffect6(() => {
+  useEffect7(() => {
     setIsHydrated(true);
   }, []);
-  const { showControls, isPresentationMode, isControlsOnly } = useMemo4(() => {
+  const { showControls, isPresentationMode, isControlsOnly } = useMemo5(() => {
     if (typeof window === "undefined") {
       return {
         showControls: true,
@@ -1898,54 +2263,54 @@ function Playground({ children }) {
     setTimeout(() => setCopied(false), 2e3);
   };
   if (!isHydrated) return null;
-  return /* @__PURE__ */ jsx13(ResizableLayout, { hideControls: layoutHideControls, children: /* @__PURE__ */ jsxs7(ControlsProvider, { children: [
-    shouldShowShareButton && /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx14(ResizableLayout, { hideControls: layoutHideControls, children: /* @__PURE__ */ jsxs8(ControlsProvider, { children: [
+    shouldShowShareButton && /* @__PURE__ */ jsxs8(
       "button",
       {
         onClick: handleCopy,
         className: "absolute top-4 right-4 z-50 flex items-center gap-1 rounded bg-black/70 px-3 py-1 text-white hover:bg-black",
         children: [
-          copied ? /* @__PURE__ */ jsx13(Check3, { size: 16 }) : /* @__PURE__ */ jsx13(Copy2, { size: 16 }),
+          copied ? /* @__PURE__ */ jsx14(Check3, { size: 16 }) : /* @__PURE__ */ jsx14(Copy2, { size: 16 }),
           copied ? "Copied!" : "Share"
         ]
       }
     ),
-    isControlsOnly ? /* @__PURE__ */ jsx13(HiddenPreview, { children }) : /* @__PURE__ */ jsx13(PreviewContainer_default, { hideControls: layoutHideControls, children }),
-    showControls && /* @__PURE__ */ jsx13(ControlPanel_default, {})
+    isControlsOnly ? /* @__PURE__ */ jsx14(HiddenPreview, { children }) : /* @__PURE__ */ jsx14(PreviewContainer_default, { hideControls: layoutHideControls, children }),
+    showControls && /* @__PURE__ */ jsx14(ControlPanel_default, {})
   ] }) });
 }
 
 // src/hooks/useAdvancedPaletteControls.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef7, useState as useState6 } from "react";
 var cloneForCallbacks = (palette) => clonePalette(palette);
 var useAdvancedPaletteControls = (options = {}) => {
-  const resolvedDefaultPalette = useMemo5(
+  const resolvedDefaultPalette = useMemo6(
     () => createAdvancedPalette(options.defaultPalette),
     [options.defaultPalette]
   );
-  const resolvedFallbackPalette = useMemo5(
+  const resolvedFallbackPalette = useMemo6(
     () => options.fallbackPalette ? createAdvancedPalette(options.fallbackPalette) : resolvedDefaultPalette,
     [options.fallbackPalette, resolvedDefaultPalette]
   );
   const [palette, setPaletteState] = useState6(
     () => clonePalette(resolvedDefaultPalette)
   );
-  const defaultSignatureRef = useRef6(
+  const defaultSignatureRef = useRef7(
     createPaletteSignature(resolvedDefaultPalette)
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const nextSignature = createPaletteSignature(resolvedDefaultPalette);
     if (defaultSignatureRef.current === nextSignature) return;
     defaultSignatureRef.current = nextSignature;
     setPaletteState(clonePalette(resolvedDefaultPalette));
   }, [resolvedDefaultPalette]);
-  const notifyChange = useCallback4(
+  const notifyChange = useCallback5(
     (nextPalette) => {
       options.onChange?.(cloneForCallbacks(nextPalette));
     },
     [options.onChange]
   );
-  const setPalette = useCallback4(
+  const setPalette = useCallback5(
     (source) => {
       const nextPalette = createAdvancedPalette(
         source ?? resolvedDefaultPalette
@@ -1955,7 +2320,7 @@ var useAdvancedPaletteControls = (options = {}) => {
     },
     [notifyChange, resolvedDefaultPalette]
   );
-  const updatePalette = useCallback4(
+  const updatePalette = useCallback5(
     (updater) => {
       setPaletteState((current) => {
         const nextSource = updater(clonePalette(current));
@@ -1968,18 +2333,18 @@ var useAdvancedPaletteControls = (options = {}) => {
     },
     [notifyChange, resolvedDefaultPalette]
   );
-  const resetPalette = useCallback4(() => {
+  const resetPalette = useCallback5(() => {
     setPaletteState(clonePalette(resolvedDefaultPalette));
     notifyChange(resolvedDefaultPalette);
   }, [notifyChange, resolvedDefaultPalette]);
-  const handleControlPaletteChange = useCallback4(
+  const handleControlPaletteChange = useCallback5(
     (nextPalette) => {
       setPaletteState(clonePalette(nextPalette));
       notifyChange(nextPalette);
     },
     [notifyChange]
   );
-  const controlConfig = useMemo5(
+  const controlConfig = useMemo6(
     () => ({
       ...options.control ?? {},
       defaultPalette: resolvedDefaultPalette,
@@ -1987,7 +2352,7 @@ var useAdvancedPaletteControls = (options = {}) => {
     }),
     [handleControlPaletteChange, options.control, resolvedDefaultPalette]
   );
-  const hexColors = useMemo5(
+  const hexColors = useMemo6(
     () => advancedPaletteToHexColors(palette, {
       sectionOrder: options.sectionOrder,
       fallbackPalette: resolvedFallbackPalette,
@@ -2000,11 +2365,11 @@ var useAdvancedPaletteControls = (options = {}) => {
       resolvedFallbackPalette
     ]
   );
-  const paletteSignature = useMemo5(
+  const paletteSignature = useMemo6(
     () => createPaletteSignature(palette),
     [palette]
   );
-  const paletteGradient = useMemo5(
+  const paletteGradient = useMemo6(
     () => computePaletteGradient(palette, options.gradientSteps),
     [options.gradientSteps, palette]
   );