@toriistudio/v0-playground 0.6.0 → 0.7.1

package/dist/index.js

@@ -49,9 +49,9 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Playground/Playground.tsx
-var import_react7 = require("react");
-var import_lucide_react4 = require("lucide-react");
+// src/components/Playground.tsx
+var import_react8 = require("react");
+var import_lucide_react5 = require("lucide-react");
 
 // src/context/ResizableLayout.tsx
 var import_react = require("react");
@@ -448,7 +448,8 @@ var ControlsProvider = ({ children }) => {
   const [schema, setSchema] = (0, import_react2.useState)({});
   const [values, setValues] = (0, import_react2.useState)({});
   const [config, setConfig] = (0, import_react2.useState)({
-    showCopyButton: true
+    showCopyButton: true,
+    showCodeSnippet: false
   });
   const [componentName, setComponentName] = (0, import_react2.useState)();
   const [channelName, setChannelName] = (0, import_react2.useState)(null);
@@ -471,17 +472,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) => {
@@ -646,7 +660,7 @@ var useControls = (schema, options) => {
     resolvedAdvancedConfig.onPaletteChange(clonePalette(palette));
   }, [ctx.values, resolvedAdvancedConfig]);
   const typedValues = ctx.values;
-  const jsx14 = (0, import_react2.useCallback)(() => {
+  const jsx15 = (0, import_react2.useCallback)(() => {
     if (!options?.componentName) return "";
     const props = Object.entries(typedValues).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -660,14 +674,14 @@ 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
-var import_react5 = require("react");
-var import_lucide_react3 = require("lucide-react");
+// src/components/ControlPanel.tsx
+var import_react6 = require("react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/hooks/usePreviewUrl.ts
 var import_react3 = require("react");
@@ -942,7 +956,7 @@ Button.displayName = "Button";
 // src/constants/layout.ts
 var MOBILE_CONTROL_PANEL_PEEK = 112;
 
-// src/components/AdvancedPaletteControl/AdvancedPaletteControl.tsx
+// src/components/AdvancedPaletteControl.tsx
 var import_react4 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var AdvancedPaletteControl = ({
@@ -1090,15 +1104,532 @@ var AdvancedPaletteControl = ({
 };
 var AdvancedPaletteControl_default = AdvancedPaletteControl;
 
-// src/components/ControlPanel/ControlPanel.tsx
+// src/components/MediaUploadControl.tsx
+var import_react5 = require("react");
+var import_lucide_react3 = require("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
 var import_jsx_runtime10 = require("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 = (0, import_react5.useId)();
+  const inputRef = (0, import_react5.useRef)(null);
+  const uploadedUrlRef = (0, import_react5.useRef)(null);
+  const { media, error } = (0, import_react5.useSyncExternalStore)(
+    mediaSelectionStore.subscribe,
+    mediaSelectionStore.getSnapshot,
+    mediaSelectionStore.getSnapshot
+  );
+  const VIDEO_EXTENSIONS = (0, import_react5.useMemo)(
+    () => [".mp4", ".webm", ".ogg", ".ogv", ".mov", ".m4v"],
+    []
+  );
+  const setSelection = (0, import_react5.useCallback)(
+    (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);
+  };
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (uploadedUrlRef.current) {
+        URL.revokeObjectURL(uploadedUrlRef.current);
+        uploadedUrlRef.current = null;
+      }
+    };
+  }, []);
+  const presets = (0, import_react5.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: inputId, style: { fontSize: "0.85rem", fontWeight: 500 }, children: "Upload media" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            id: inputId,
+            type: "file",
+            accept: "image/*",
+            ref: inputRef,
+            style: { display: "none" },
+            onChange: handleFileChange
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "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__ */ (0, import_jsx_runtime10.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: "0.35rem",
+                    overflow: "hidden",
+                    border: "1px solid rgba(255, 255, 255, 0.15)"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "img",
+                    {
+                      src: media.src,
+                      alt: "Thumbnail",
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block"
+                      }
+                    }
+                  )
+                }
+              ) : null,
+              media ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "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__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.X, { size: 16, strokeWidth: 2 })
+                }
+              ) : null
+            ]
+          }
+        ),
+        presets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "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__ */ (0, import_jsx_runtime10.jsxs)(
+                "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__ */ (0, import_jsx_runtime10.jsx)(
+                      "img",
+                      {
+                        src: entry.src,
+                        alt: entry.label,
+                        style: {
+                          width: "100%",
+                          height: 100,
+                          objectFit: "cover",
+                          display: "block"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "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__ */ (0, import_jsx_runtime10.jsx)("p", { style: { color: "#ff9da4", fontSize: "0.8rem" }, children: error }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ControlPanel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var splitPropsString = (input) => {
+  const props = [];
+  let current = "";
+  let curlyDepth = 0;
+  let squareDepth = 0;
+  let parenDepth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inBacktick = false;
+  let escapeNext = false;
+  for (const char of input) {
+    if (escapeNext) {
+      current += char;
+      escapeNext = false;
+      continue;
+    }
+    if (char === "\\") {
+      current += char;
+      escapeNext = true;
+      continue;
+    }
+    if (char === "'" && !inDoubleQuote && !inBacktick) {
+      inSingleQuote = !inSingleQuote;
+      current += char;
+      continue;
+    }
+    if (char === '"' && !inSingleQuote && !inBacktick) {
+      inDoubleQuote = !inDoubleQuote;
+      current += char;
+      continue;
+    }
+    if (char === "`" && !inSingleQuote && !inDoubleQuote) {
+      inBacktick = !inBacktick;
+      current += char;
+      continue;
+    }
+    if (!inSingleQuote && !inDoubleQuote && !inBacktick) {
+      if (char === "{") {
+        curlyDepth += 1;
+      } else if (char === "}") {
+        curlyDepth = Math.max(0, curlyDepth - 1);
+      } else if (char === "[") {
+        squareDepth += 1;
+      } else if (char === "]") {
+        squareDepth = Math.max(0, squareDepth - 1);
+      } else if (char === "(") {
+        parenDepth += 1;
+      } else if (char === ")") {
+        parenDepth = Math.max(0, parenDepth - 1);
+      }
+    }
+    const atTopLevel = !inSingleQuote && !inDoubleQuote && !inBacktick && curlyDepth === 0 && squareDepth === 0 && parenDepth === 0;
+    if (atTopLevel && /\s/.test(char)) {
+      if (current.trim()) {
+        props.push(current.trim());
+      }
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.trim()) {
+    props.push(current.trim());
+  }
+  return props;
+};
+var formatJsxCodeSnippet = (input) => {
+  const trimmed = input.trim();
+  if (!trimmed) return "";
+  if (trimmed.includes("\n")) {
+    return trimmed;
+  }
+  if (!trimmed.startsWith("<") || !trimmed.endsWith(">")) {
+    return trimmed;
+  }
+  if (!trimmed.endsWith("/>")) {
+    return trimmed;
+  }
+  const inner = trimmed.slice(1, -2).trim();
+  const firstSpaceIndex = inner.indexOf(" ");
+  if (firstSpaceIndex === -1) {
+    return `<${inner} />`;
+  }
+  const componentName = inner.slice(0, firstSpaceIndex);
+  const propsString = inner.slice(firstSpaceIndex + 1).trim();
+  if (!propsString) {
+    return `<${componentName} />`;
+  }
+  const propsList = splitPropsString(propsString);
+  if (propsList.length === 0) {
+    return `<${componentName} ${propsString} />`;
+  }
+  const formattedProps = propsList.map((prop) => `  ${prop}`).join("\n");
+  return `<${componentName}
+${formattedProps}
+/>`;
+};
+var isWhitespace = (char) => /\s/.test(char);
+var isAttrNameChar = (char) => /[A-Za-z0-9_$\-.:]/.test(char);
+var isAlphaStart = (char) => /[A-Za-z_$]/.test(char);
+var tokenizeJsx = (input) => {
+  const tokens = [];
+  let i = 0;
+  while (i < input.length) {
+    const char = input[i];
+    if (char === "<") {
+      tokens.push({ type: "punctuation", value: "<" });
+      i += 1;
+      if (input[i] === "/") {
+        tokens.push({ type: "punctuation", value: "/" });
+        i += 1;
+      }
+      const start = i;
+      while (i < input.length && isAttrNameChar(input[i])) {
+        i += 1;
+      }
+      if (i > start) {
+        tokens.push({ type: "tag", value: input.slice(start, i) });
+      }
+      continue;
+    }
+    if (char === "/" && input[i + 1] === ">") {
+      tokens.push({ type: "punctuation", value: "/>" });
+      i += 2;
+      continue;
+    }
+    if (char === ">") {
+      tokens.push({ type: "punctuation", value: ">" });
+      i += 1;
+      continue;
+    }
+    if (char === "=") {
+      tokens.push({ type: "punctuation", value: "=" });
+      i += 1;
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      const quote = char;
+      let j = i + 1;
+      let value = quote;
+      while (j < input.length) {
+        const current = input[j];
+        value += current;
+        if (current === quote && input[j - 1] !== "\\") {
+          break;
+        }
+        j += 1;
+      }
+      tokens.push({ type: "string", value });
+      i = j + 1;
+      continue;
+    }
+    if (char === "{") {
+      let depth = 1;
+      let j = i + 1;
+      while (j < input.length && depth > 0) {
+        if (input[j] === "{") {
+          depth += 1;
+        } else if (input[j] === "}") {
+          depth -= 1;
+        }
+        j += 1;
+      }
+      const expression = input.slice(i, j);
+      tokens.push({ type: "expression", value: expression });
+      i = j;
+      continue;
+    }
+    if (isAlphaStart(char)) {
+      const start = i;
+      i += 1;
+      while (i < input.length && isAttrNameChar(input[i])) {
+        i += 1;
+      }
+      const word = input.slice(start, i);
+      let k = i;
+      while (k < input.length && isWhitespace(input[k])) {
+        k += 1;
+      }
+      if (input[k] === "=") {
+        tokens.push({ type: "attrName", value: word });
+      } else {
+        tokens.push({ type: "plain", value: word });
+      }
+      continue;
+    }
+    tokens.push({ type: "plain", value: char });
+    i += 1;
+  }
+  return tokens;
+};
+var TOKEN_CLASS_MAP = {
+  tag: "text-sky-300",
+  attrName: "text-amber-200",
+  string: "text-emerald-300",
+  expression: "text-purple-300",
+  punctuation: "text-stone-400"
+};
+var highlightJsx = (input) => {
+  const tokens = tokenizeJsx(input);
+  const nodes = [];
+  tokens.forEach((token, index) => {
+    if (token.type === "plain") {
+      nodes.push(token.value);
+    } else {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: TOKEN_CLASS_MAP[token.type], children: token.value }, `token-${index}`)
+      );
+    }
+  });
+  return nodes;
+};
 var ControlPanel = () => {
-  const [copied, setCopied] = (0, import_react5.useState)(false);
-  const [folderStates, setFolderStates] = (0, import_react5.useState)({});
+  const [copied, setCopied] = (0, import_react6.useState)(false);
+  const [codeCopied, setCodeCopied] = (0, import_react6.useState)(false);
+  const [isCodeVisible, setIsCodeVisible] = (0, import_react6.useState)(false);
+  const [folderStates, setFolderStates] = (0, import_react6.useState)({});
+  const codeCopyTimeoutRef = (0, import_react6.useRef)(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 = (0, import_react5.useCallback)(
+  const buildUrl = (0, import_react6.useCallback)(
     (modifier) => {
       if (!previewUrl) return "";
       const [path, search = ""] = previewUrl.split("?");
@@ -1109,13 +1640,13 @@ var ControlPanel = () => {
     },
     [previewUrl]
   );
-  const presentationUrl = (0, import_react5.useMemo)(() => {
+  const presentationUrl = (0, import_react6.useMemo)(() => {
     if (!previewUrl) return "";
     return buildUrl((params) => {
       params.set(PRESENTATION_PARAM, "true");
     });
   }, [buildUrl, previewUrl]);
-  const controlsOnlyUrl = (0, import_react5.useMemo)(() => {
+  const controlsOnlyUrl = (0, import_react6.useMemo)(() => {
     if (!previewUrl) return "";
     return buildUrl((params) => {
       params.delete(NO_CONTROLS_PARAM);
@@ -1123,7 +1654,7 @@ var ControlPanel = () => {
       params.set(CONTROLS_ONLY_PARAM, "true");
     });
   }, [buildUrl, previewUrl]);
-  const handlePresentationClick = (0, import_react5.useCallback)(() => {
+  const handlePresentationClick = (0, import_react6.useCallback)(() => {
     if (typeof window === "undefined" || !presentationUrl) return;
     window.open(presentationUrl, "_blank", "noopener,noreferrer");
     if (controlsOnlyUrl) {
@@ -1131,10 +1662,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 = [
@@ -1150,7 +1678,7 @@ var ControlPanel = () => {
       window.open(controlsOnlyUrl, "v0-controls", controlsFeatures);
     }
   }, [controlsOnlyUrl, leftPanelWidth, presentationUrl]);
-  const jsx14 = (0, import_react5.useMemo)(() => {
+  const jsx15 = (0, import_react6.useMemo)(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -1195,7 +1723,7 @@ var ControlPanel = () => {
   const advancedConfig = config?.addAdvancedPaletteControl;
   let advancedPaletteControlNode = null;
   if (advancedConfig) {
-    const advancedNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const advancedNode = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       AdvancedPaletteControl_default,
       {
         config: advancedConfig
@@ -1221,12 +1749,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__ */ (0, import_jsx_runtime11.jsx)(
+      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) ?? [],
@@ -1235,7 +1803,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 = (0, import_react5.useCallback)(
+  const jsonToComponentString = (0, import_react6.useCallback)(
     ({
       componentName: componentNameOverride,
       props
@@ -1266,16 +1834,75 @@ var ControlPanel = () => {
     componentName,
     values,
     schema,
-    jsx: jsx14,
+    jsx: jsx15,
     jsonToComponentString
-  }) ?? jsx14;
+  }) ?? jsx15;
   const shouldShowCopyButton = config?.showCopyButton !== false && Boolean(copyText);
+  const baseSnippet = copyText || jsx15;
+  const formattedCode = (0, import_react6.useMemo)(
+    () => formatJsxCodeSnippet(baseSnippet),
+    [baseSnippet]
+  );
+  const hasCodeSnippet = Boolean(config?.showCodeSnippet && formattedCode);
+  const highlightedCode = (0, import_react6.useMemo)(
+    () => formattedCode ? highlightJsx(formattedCode) : null,
+    [formattedCode]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!hasCodeSnippet) {
+      setIsCodeVisible(false);
+    }
+  }, [hasCodeSnippet]);
+  (0, import_react6.useEffect)(() => {
+    setCodeCopied(false);
+    if (codeCopyTimeoutRef.current) {
+      clearTimeout(codeCopyTimeoutRef.current);
+      codeCopyTimeoutRef.current = null;
+    }
+  }, [formattedCode]);
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleToggleCodeVisibility = (0, import_react6.useCallback)(() => {
+    setIsCodeVisible((prev) => {
+      const next = !prev;
+      if (!next) {
+        setCodeCopied(false);
+        if (codeCopyTimeoutRef.current) {
+          clearTimeout(codeCopyTimeoutRef.current);
+          codeCopyTimeoutRef.current = null;
+        }
+      }
+      return next;
+    });
+  }, []);
+  const handleCodeCopy = (0, import_react6.useCallback)(() => {
+    if (!formattedCode) return;
+    if (typeof navigator === "undefined" || !navigator.clipboard || typeof navigator.clipboard.writeText !== "function") {
+      return;
+    }
+    navigator.clipboard.writeText(formattedCode).then(() => {
+      setCodeCopied(true);
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+      codeCopyTimeoutRef.current = setTimeout(() => {
+        setCodeCopied(false);
+        codeCopyTimeoutRef.current = null;
+      }, 3e3);
+    }).catch(() => {
+    });
+  }, [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__ */ (0, import_jsx_runtime10.jsx)(
+  const renderButtonControl = (key, control, variant) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       className: variant === "root" ? "flex-1 [&_[data-slot=button]]:w-full" : "[&_[data-slot=button]]:w-full",
-      children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           onClick: control.onClick,
@@ -1293,9 +1920,9 @@ var ControlPanel = () => {
     const value = values[key];
     switch (control.type) {
       case "boolean":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: labelize(key) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Switch,
             {
               id: key,
@@ -1306,10 +1933,10 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "number":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-3 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-3 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               Input,
               {
                 type: "number",
@@ -1326,7 +1953,7 @@ var ControlPanel = () => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Slider,
             {
               id: key,
@@ -1340,9 +1967,9 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "string":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Input,
             {
               id: key,
@@ -1354,9 +1981,9 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-2 w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "input",
             {
               type: "color",
@@ -1368,11 +1995,11 @@ var ControlPanel = () => {
           )
         ] }, key);
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "min-w-fit", htmlFor: key, children: labelize(key) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Select, { value, onValueChange: (val) => setValue(key, val), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { className: "flex-1 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, { placeholder: "Select option" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectContent, { className: "cursor-pointer z-[9999]", children: Object.entries(control.options).map(([label]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "min-w-fit", htmlFor: key, children: labelize(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Select, { value, onValueChange: (val) => setValue(key, val), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectTrigger, { className: "flex-1 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectValue, { placeholder: "Select option" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectContent, { className: "cursor-pointer z-[9999]", children: Object.entries(control.options).map(([label]) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               SelectItem,
               {
                 value: label,
@@ -1389,12 +2016,12 @@ var ControlPanel = () => {
   };
   const renderFolder = (folder, entries, extras = []) => {
     const isOpen = folderStates[folder] ?? true;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: "border border-stone-700/60 rounded-lg bg-stone-900/70",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "button",
             {
               type: "button",
@@ -1404,9 +2031,9 @@ 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__ */ (0, import_jsx_runtime10.jsx)("span", { children: folder }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  import_lucide_react3.ChevronDown,
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: folder }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_lucide_react4.ChevronDown,
                   {
                     className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
                   }
@@ -1414,7 +2041,7 @@ var ControlPanel = () => {
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-4 pb-4 pt-0 space-y-5", children: [
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "px-4 pb-4 pt-0 space-y-5", children: [
             entries.map(
               ([key, control]) => renderControl(key, control, "folder")
             ),
@@ -1436,7 +2063,7 @@ var ControlPanel = () => {
     height: "auto",
     flex: "0 0 auto"
   };
-  if (isHydrated) {
+  if (isHydrated && !isControlsOnlyView) {
     if (isDesktop) {
       Object.assign(panelStyle, {
         position: "absolute",
@@ -1453,47 +2080,87 @@ var ControlPanel = () => {
       });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "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__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-lg text-stone-100 font-semibold", children: config?.mainLabel ?? "Controls" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-6", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: "text-lg text-stone-100 font-semibold", children: config?.mainLabel ?? "Controls" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-6", children: [
           topFolderSections,
-          hasRootButtonControls && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-2", children: rootButtonControls.map(
+          hasRootButtonControls && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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,
-          shouldShowCopyButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          hasCodeSnippet && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "border border-stone-700/60 rounded-lg bg-stone-900/70", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleToggleCodeVisibility,
+                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__ */ (0, import_jsx_runtime11.jsx)("span", { children: isCodeVisible ? "Hide Code" : "Show Code" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    import_lucide_react4.ChevronDown,
+                    {
+                      className: `w-4 h-4 transition-transform duration-200 ${isCodeVisible ? "rotate-180" : ""}`
+                    }
+                  )
+                ]
+              }
+            ),
+            isCodeVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative border-t border-stone-700/60 bg-stone-950/60 px-4 py-4 rounded-b-lg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "h-3.5 w-3.5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Copy, { className: "h-3.5 w-3.5" }),
+                    "Copy"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("pre", { className: "whitespace-pre overflow-x-auto text-xs md:text-sm text-stone-200 pr-14", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { className: "block text-stone-200", children: highlightedCode ?? formattedCode }) })
+            ] })
+          ] }),
+          shouldShowCopyButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               onClick: () => {
-                if (!copyText) return;
-                navigator.clipboard.writeText(copyText);
+                const copyPayload = formattedCode || baseSnippet;
+                if (!copyPayload) return;
+                navigator.clipboard.writeText(copyPayload);
                 setCopied(true);
                 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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "w-4 h-4" }),
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "w-4 h-4" }),
                 "Copied"
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Copy, { className: "w-4 h-4" }),
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Copy, { className: "w-4 h-4" }),
                 "Copy to Clipboard"
               ] })
             }
           ) }, "control-panel-jsx")
         ] }),
-        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "a",
             {
               href: previewUrl,
@@ -1501,12 +2168,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__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.SquareArrowOutUpRight, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.SquareArrowOutUpRight, {}),
                 " Open in a New Tab"
               ]
             }
           ) }),
-          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             Button,
             {
               type: "button",
@@ -1514,7 +2181,7 @@ var ControlPanel = () => {
               variant: "secondary",
               className: "w-full bg-stone-800 text-white hover:bg-stone-700 border border-stone-700",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Presentation, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Presentation, {}),
                 " Presentation Mode"
               ]
             }
@@ -1526,16 +2193,16 @@ var ControlPanel = () => {
 };
 var ControlPanel_default = ControlPanel;
 
-// src/components/PreviewContainer/PreviewContainer.tsx
-var import_react6 = require("react");
+// src/components/PreviewContainer.tsx
+var import_react7 = require("react");
 
-// src/components/Grid/Grid.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+// src/components/Grid.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Grid() {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "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),
@@ -1549,40 +2216,40 @@ function Grid() {
 }
 var Grid_default = Grid;
 
-// src/components/PreviewContainer/PreviewContainer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// src/components/PreviewContainer.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var PreviewContainer = ({ children, hideControls }) => {
   const { config } = useControlsContext();
   const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
-  const previewRef = (0, import_react6.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const previewRef = (0, import_react7.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-screen h-screen", children: [
-        config?.showGrid && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Grid_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full h-screen", children: [
+        config?.showGrid && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Grid_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full h-full flex items-center justify-center relative", children })
       ] })
     }
   );
 };
 var PreviewContainer_default = PreviewContainer;
 
-// src/components/Playground/Playground.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var HiddenPreview = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "aria-hidden": "true", className: "hidden", children });
+// src/components/Playground.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var HiddenPreview = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "aria-hidden": "true", className: "hidden", children });
 function Playground({ children }) {
-  const [isHydrated, setIsHydrated] = (0, import_react7.useState)(false);
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [isHydrated, setIsHydrated] = (0, import_react8.useState)(false);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     setIsHydrated(true);
   }, []);
-  const { showControls, isPresentationMode, isControlsOnly } = (0, import_react7.useMemo)(() => {
+  const { showControls, isPresentationMode, isControlsOnly } = (0, import_react8.useMemo)(() => {
     if (typeof window === "undefined") {
       return {
         showControls: true,
@@ -1609,54 +2276,54 @@ function Playground({ children }) {
     setTimeout(() => setCopied(false), 2e3);
   };
   if (!isHydrated) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ResizableLayout, { hideControls: layoutHideControls, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ControlsProvider, { children: [
-    shouldShowShareButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ResizableLayout, { hideControls: layoutHideControls, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ControlsProvider, { children: [
+    shouldShowShareButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.Copy, { size: 16 }),
+          copied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Copy, { size: 16 }),
           copied ? "Copied!" : "Share"
         ]
       }
     ),
-    isControlsOnly ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiddenPreview, { children }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PreviewContainer_default, { hideControls: layoutHideControls, children }),
-    showControls && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ControlPanel_default, {})
+    isControlsOnly ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HiddenPreview, { children }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewContainer_default, { hideControls: layoutHideControls, children }),
+    showControls && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ControlPanel_default, {})
   ] }) });
 }
 
 // src/hooks/useAdvancedPaletteControls.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var cloneForCallbacks = (palette) => clonePalette(palette);
 var useAdvancedPaletteControls = (options = {}) => {
-  const resolvedDefaultPalette = (0, import_react8.useMemo)(
+  const resolvedDefaultPalette = (0, import_react9.useMemo)(
     () => createAdvancedPalette(options.defaultPalette),
     [options.defaultPalette]
   );
-  const resolvedFallbackPalette = (0, import_react8.useMemo)(
+  const resolvedFallbackPalette = (0, import_react9.useMemo)(
     () => options.fallbackPalette ? createAdvancedPalette(options.fallbackPalette) : resolvedDefaultPalette,
     [options.fallbackPalette, resolvedDefaultPalette]
   );
-  const [palette, setPaletteState] = (0, import_react8.useState)(
+  const [palette, setPaletteState] = (0, import_react9.useState)(
     () => clonePalette(resolvedDefaultPalette)
   );
-  const defaultSignatureRef = (0, import_react8.useRef)(
+  const defaultSignatureRef = (0, import_react9.useRef)(
     createPaletteSignature(resolvedDefaultPalette)
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const nextSignature = createPaletteSignature(resolvedDefaultPalette);
     if (defaultSignatureRef.current === nextSignature) return;
     defaultSignatureRef.current = nextSignature;
     setPaletteState(clonePalette(resolvedDefaultPalette));
   }, [resolvedDefaultPalette]);
-  const notifyChange = (0, import_react8.useCallback)(
+  const notifyChange = (0, import_react9.useCallback)(
     (nextPalette) => {
       options.onChange?.(cloneForCallbacks(nextPalette));
     },
     [options.onChange]
   );
-  const setPalette = (0, import_react8.useCallback)(
+  const setPalette = (0, import_react9.useCallback)(
     (source) => {
       const nextPalette = createAdvancedPalette(
         source ?? resolvedDefaultPalette
@@ -1666,7 +2333,7 @@ var useAdvancedPaletteControls = (options = {}) => {
     },
     [notifyChange, resolvedDefaultPalette]
   );
-  const updatePalette = (0, import_react8.useCallback)(
+  const updatePalette = (0, import_react9.useCallback)(
     (updater) => {
       setPaletteState((current) => {
         const nextSource = updater(clonePalette(current));
@@ -1679,18 +2346,18 @@ var useAdvancedPaletteControls = (options = {}) => {
     },
     [notifyChange, resolvedDefaultPalette]
   );
-  const resetPalette = (0, import_react8.useCallback)(() => {
+  const resetPalette = (0, import_react9.useCallback)(() => {
     setPaletteState(clonePalette(resolvedDefaultPalette));
     notifyChange(resolvedDefaultPalette);
   }, [notifyChange, resolvedDefaultPalette]);
-  const handleControlPaletteChange = (0, import_react8.useCallback)(
+  const handleControlPaletteChange = (0, import_react9.useCallback)(
     (nextPalette) => {
       setPaletteState(clonePalette(nextPalette));
       notifyChange(nextPalette);
     },
     [notifyChange]
   );
-  const controlConfig = (0, import_react8.useMemo)(
+  const controlConfig = (0, import_react9.useMemo)(
     () => ({
       ...options.control ?? {},
       defaultPalette: resolvedDefaultPalette,
@@ -1698,7 +2365,7 @@ var useAdvancedPaletteControls = (options = {}) => {
     }),
     [handleControlPaletteChange, options.control, resolvedDefaultPalette]
   );
-  const hexColors = (0, import_react8.useMemo)(
+  const hexColors = (0, import_react9.useMemo)(
     () => advancedPaletteToHexColors(palette, {
       sectionOrder: options.sectionOrder,
       fallbackPalette: resolvedFallbackPalette,
@@ -1711,11 +2378,11 @@ var useAdvancedPaletteControls = (options = {}) => {
       resolvedFallbackPalette
     ]
   );
-  const paletteSignature = (0, import_react8.useMemo)(
+  const paletteSignature = (0, import_react9.useMemo)(
     () => createPaletteSignature(palette),
     [palette]
   );
-  const paletteGradient = (0, import_react8.useMemo)(
+  const paletteGradient = (0, import_react9.useMemo)(
     () => computePaletteGradient(palette, options.gradientSteps),
     [options.gradientSteps, palette]
   );