@toriistudio/v0-playground 0.5.5 → 0.7.0

package/README.md

@@ -22,7 +22,7 @@ Perfect for prototyping components, sharing usage examples, or building your own
 To use `@toriistudio/v0-playground`, you’ll need to install the following peer dependencies:
 
 ```bash
-yarn add @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch class-variance-authority clsx lucide-react tailwind-merge tailwindcss-animate @react-three/drei @react-three/fiber three lodash
+yarn add @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch class-variance-authority clsx lucide-react tailwind-merge tailwindcss-animate lodash
 ```
 
 Or automate it with:

package/dist/index.d.mts

@@ -118,6 +118,8 @@ type ControlsConfig = {
     showCopyButtonFn?: (args: CopyButtonFnArgs) => string | null | undefined;
     mainLabel?: string;
     showGrid?: boolean;
+    showPresentationButton?: boolean;
+    showCodeSnippet?: boolean;
     addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
 };
 type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {

package/dist/index.d.ts

@@ -118,6 +118,8 @@ type ControlsConfig = {
     showCopyButtonFn?: (args: CopyButtonFnArgs) => string | null | undefined;
     mainLabel?: string;
     showGrid?: boolean;
+    showPresentationButton?: boolean;
+    showCodeSnippet?: boolean;
     addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
 };
 type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {

package/dist/index.js

@@ -168,6 +168,28 @@ var getUrlParams = () => {
   return entries;
 };
 
+// src/constants/urlParams.ts
+var NO_CONTROLS_PARAM = "nocontrols";
+var PRESENTATION_PARAM = "presentation";
+var CONTROLS_ONLY_PARAM = "controlsonly";
+
+// src/utils/getControlsChannelName.ts
+var EXCLUDED_KEYS = /* @__PURE__ */ new Set([
+  NO_CONTROLS_PARAM,
+  PRESENTATION_PARAM,
+  CONTROLS_ONLY_PARAM
+]);
+var getControlsChannelName = () => {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  for (const key of EXCLUDED_KEYS) {
+    params.delete(key);
+  }
+  const query = params.toString();
+  const base = window.location.pathname || "/";
+  return `v0-controls:${base}${query ? `?${query}` : ""}`;
+};
+
 // src/lib/advancedPalette.ts
 var CHANNEL_KEYS = ["r", "g", "b"];
 var DEFAULT_CHANNEL_LABELS = {
@@ -426,9 +448,22 @@ 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);
+  const channelRef = (0, import_react2.useRef)(null);
+  const instanceIdRef = (0, import_react2.useRef)(null);
+  const skipBroadcastRef = (0, import_react2.useRef)(false);
+  const latestValuesRef = (0, import_react2.useRef)(values);
+  (0, import_react2.useEffect)(() => {
+    latestValuesRef.current = values;
+  }, [values]);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    setChannelName(getControlsChannelName());
+  }, []);
   const setValue = (key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   };
@@ -463,6 +498,66 @@ var ControlsProvider = ({ children }) => {
       return updated;
     });
   };
+  (0, import_react2.useEffect)(() => {
+    if (!channelName) return;
+    if (typeof window === "undefined") return;
+    if (typeof window.BroadcastChannel === "undefined") return;
+    const instanceId = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+    instanceIdRef.current = instanceId;
+    const channel = new BroadcastChannel(channelName);
+    channelRef.current = channel;
+    const sendValues = () => {
+      if (!instanceIdRef.current) return;
+      channel.postMessage({
+        type: "controls-sync-values",
+        source: instanceIdRef.current,
+        values: latestValuesRef.current
+      });
+    };
+    const handleMessage = (event) => {
+      const data = event.data;
+      if (!data || data.source === instanceIdRef.current) return;
+      if (data.type === "controls-sync-request") {
+        sendValues();
+        return;
+      }
+      if (data.type === "controls-sync-values" && data.values) {
+        const incoming = data.values;
+        setValues((prev) => {
+          const prevKeys = Object.keys(prev);
+          const incomingKeys = Object.keys(incoming);
+          const sameLength = prevKeys.length === incomingKeys.length;
+          const sameValues = sameLength && incomingKeys.every((key) => prev[key] === incoming[key]);
+          if (sameValues) return prev;
+          skipBroadcastRef.current = true;
+          return { ...incoming };
+        });
+      }
+    };
+    channel.addEventListener("message", handleMessage);
+    channel.postMessage({
+      type: "controls-sync-request",
+      source: instanceId
+    });
+    return () => {
+      channel.removeEventListener("message", handleMessage);
+      channel.close();
+      channelRef.current = null;
+      instanceIdRef.current = null;
+    };
+  }, [channelName]);
+  (0, import_react2.useEffect)(() => {
+    if (!channelRef.current || !instanceIdRef.current) return;
+    if (skipBroadcastRef.current) {
+      skipBroadcastRef.current = false;
+      return;
+    }
+    channelRef.current.postMessage({
+      type: "controls-sync-values",
+      source: instanceIdRef.current,
+      values
+    });
+  }, [values]);
   const contextValue = (0, import_react2.useMemo)(
     () => ({
       schema,
@@ -582,7 +677,7 @@ var usePreviewUrl = (values, basePath = "") => {
   (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams();
-    params.set("nocontrols", "true");
+    params.set(NO_CONTROLS_PARAM, "true");
     for (const [key, value] of Object.entries(values)) {
       if (value !== void 0 && value !== null) {
         params.set(key, value.toString());
@@ -998,12 +1093,280 @@ var AdvancedPaletteControl_default = AdvancedPaletteControl;
 
 // src/components/ControlPanel/ControlPanel.tsx
 var import_jsx_runtime10 = 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_runtime10.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 [codeCopied, setCodeCopied] = (0, import_react5.useState)(false);
+  const [isCodeVisible, setIsCodeVisible] = (0, import_react5.useState)(false);
   const [folderStates, setFolderStates] = (0, import_react5.useState)({});
+  const codeCopyTimeoutRef = (0, import_react5.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)(
+    (modifier) => {
+      if (!previewUrl) return "";
+      const [path, search = ""] = previewUrl.split("?");
+      const params = new URLSearchParams(search);
+      modifier(params);
+      const query = params.toString();
+      return query ? `${path}?${query}` : path;
+    },
+    [previewUrl]
+  );
+  const presentationUrl = (0, import_react5.useMemo)(() => {
+    if (!previewUrl) return "";
+    return buildUrl((params) => {
+      params.set(PRESENTATION_PARAM, "true");
+    });
+  }, [buildUrl, previewUrl]);
+  const controlsOnlyUrl = (0, import_react5.useMemo)(() => {
+    if (!previewUrl) return "";
+    return buildUrl((params) => {
+      params.delete(NO_CONTROLS_PARAM);
+      params.delete(PRESENTATION_PARAM);
+      params.set(CONTROLS_ONLY_PARAM, "true");
+    });
+  }, [buildUrl, previewUrl]);
+  const handlePresentationClick = (0, import_react5.useCallback)(() => {
+    if (typeof window === "undefined" || !presentationUrl) return;
+    window.open(presentationUrl, "_blank", "noopener,noreferrer");
+    if (controlsOnlyUrl) {
+      const viewportWidth = window.innerWidth || 1200;
+      const viewportHeight = window.innerHeight || 900;
+      const controlsWidth = Math.max(
+        320,
+        Math.min(
+          600,
+          Math.round(viewportWidth * leftPanelWidth / 100)
+        )
+      );
+      const controlsHeight = Math.max(600, viewportHeight);
+      const controlsFeatures = [
+        "noopener",
+        "noreferrer",
+        "toolbar=0",
+        "menubar=0",
+        "resizable=yes",
+        "scrollbars=yes",
+        `width=${controlsWidth}`,
+        `height=${controlsHeight}`
+      ].join(",");
+      window.open(controlsOnlyUrl, "v0-controls", controlsFeatures);
+    }
+  }, [controlsOnlyUrl, leftPanelWidth, presentationUrl]);
   const jsx14 = (0, import_react5.useMemo)(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
@@ -1124,6 +1487,65 @@ var ControlPanel = () => {
     jsonToComponentString
   }) ?? jsx14;
   const shouldShowCopyButton = config?.showCopyButton !== false && Boolean(copyText);
+  const baseSnippet = copyText || jsx14;
+  const formattedCode = (0, import_react5.useMemo)(
+    () => formatJsxCodeSnippet(baseSnippet),
+    [baseSnippet]
+  );
+  const hasCodeSnippet = Boolean(config?.showCodeSnippet && formattedCode);
+  const highlightedCode = (0, import_react5.useMemo)(
+    () => formattedCode ? highlightJsx(formattedCode) : null,
+    [formattedCode]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (!hasCodeSnippet) {
+      setIsCodeVisible(false);
+    }
+  }, [hasCodeSnippet]);
+  (0, import_react5.useEffect)(() => {
+    setCodeCopied(false);
+    if (codeCopyTimeoutRef.current) {
+      clearTimeout(codeCopyTimeoutRef.current);
+      codeCopyTimeoutRef.current = null;
+    }
+  }, [formattedCode]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleToggleCodeVisibility = (0, import_react5.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_react5.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)(
     "div",
@@ -1290,7 +1712,7 @@ var ControlPanel = () => {
     height: "auto",
     flex: "0 0 auto"
   };
-  if (isHydrated) {
+  if (isHydrated && !isControlsOnlyView) {
     if (isDesktop) {
       Object.assign(panelStyle, {
         position: "absolute",
@@ -1326,12 +1748,51 @@ var ControlPanel = () => {
             ([key, control]) => renderControl(key, control, "root")
           ),
           bottomFolderSections,
+          hasCodeSnippet && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "border border-stone-700/60 rounded-lg bg-stone-900/70", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("span", { children: isCodeVisible ? "Hide Code" : "Show Code" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    import_lucide_react3.ChevronDown,
+                    {
+                      className: `w-4 h-4 transition-transform duration-200 ${isCodeVisible ? "rotate-180" : ""}`
+                    }
+                  )
+                ]
+              }
+            ),
+            isCodeVisible && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "h-3.5 w-3.5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Copy, { className: "h-3.5 w-3.5" }),
+                    "Copy"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { className: "whitespace-pre overflow-x-auto text-xs md:text-sm text-stone-200 pr-14", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { className: "block text-stone-200", children: highlightedCode ?? formattedCode }) })
+            ] })
+          ] }),
           shouldShowCopyButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.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);
               },
@@ -1346,19 +1807,34 @@ var ControlPanel = () => {
             }
           ) }, "control-panel-jsx")
         ] }),
-        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          "a",
-          {
-            href: previewUrl,
-            target: "_blank",
-            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, {}),
-              " Open in a New Tab"
-            ]
-          }
-        ) })
+        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)(
+            "a",
+            {
+              href: previewUrl,
+              target: "_blank",
+              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, {}),
+                " Open in a New Tab"
+              ]
+            }
+          ) }),
+          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            Button,
+            {
+              type: "button",
+              onClick: handlePresentationClick,
+              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, {}),
+                " Presentation Mode"
+              ]
+            }
+          )
+        ] })
       ] })
     }
   );
@@ -1414,25 +1890,42 @@ var PreviewContainer_default = PreviewContainer;
 
 // src/components/Playground/Playground.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var NO_CONTROLS_PARAM = "nocontrols";
+var HiddenPreview = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime13.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)(() => {
     setIsHydrated(true);
   }, []);
-  const hideControls = (0, import_react7.useMemo)(() => {
-    if (typeof window === "undefined") return false;
-    return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
+  const { showControls, isPresentationMode, isControlsOnly } = (0, import_react7.useMemo)(() => {
+    if (typeof window === "undefined") {
+      return {
+        showControls: true,
+        isPresentationMode: false,
+        isControlsOnly: false
+      };
+    }
+    const params = new URLSearchParams(window.location.search);
+    const presentation = params.get(PRESENTATION_PARAM) === "true";
+    const controlsOnly = params.get(CONTROLS_ONLY_PARAM) === "true";
+    const noControlsParam = params.get(NO_CONTROLS_PARAM) === "true";
+    const showControlsValue = controlsOnly || !presentation && !noControlsParam;
+    return {
+      showControls: showControlsValue,
+      isPresentationMode: presentation,
+      isControlsOnly: controlsOnly
+    };
   }, []);
+  const shouldShowShareButton = !showControls && !isPresentationMode;
+  const layoutHideControls = !showControls || isControlsOnly;
   const handleCopy = () => {
     navigator.clipboard.writeText(window.location.href);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
   if (!isHydrated) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ControlsProvider, { children: [
-    hideControls && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  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)(
       "button",
       {
         onClick: handleCopy,
@@ -1443,8 +1936,8 @@ function Playground({ children }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PreviewContainer_default, { hideControls, children }),
-    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ControlPanel_default, {})
+    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, {})
   ] }) });
 }