@toriistudio/v0-playground 0.5.5 → 0.6.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,7 @@ type ControlsConfig = {
     showCopyButtonFn?: (args: CopyButtonFnArgs) => string | null | undefined;
     mainLabel?: string;
     showGrid?: boolean;
+    showPresentationButton?: boolean;
     addAdvancedPaletteControl?: ResolvedAdvancedPaletteConfig;
 };
 type UseControlsConfig = Omit<ControlsConfig, "addAdvancedPaletteControl"> & {

package/dist/index.d.ts

@@ -118,6 +118,7 @@ type ControlsConfig = {
     showCopyButtonFn?: (args: CopyButtonFnArgs) => string | null | undefined;
     mainLabel?: string;
     showGrid?: boolean;
+    showPresentationButton?: 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 = {
@@ -429,6 +451,18 @@ var ControlsProvider = ({ children }) => {
     showCopyButton: true
   });
   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 +497,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 +676,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());
@@ -1004,6 +1098,58 @@ var ControlPanel = () => {
   const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
   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]) => {
@@ -1346,19 +1492,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 +1575,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 +1621,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, {})
   ] }) });
 }
 

package/dist/index.mjs

@@ -131,6 +131,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 = {
@@ -392,6 +414,18 @@ var ControlsProvider = ({ children }) => {
     showCopyButton: true
   });
   const [componentName, setComponentName] = useState2();
+  const [channelName, setChannelName] = useState2(null);
+  const channelRef = useRef2(null);
+  const instanceIdRef = useRef2(null);
+  const skipBroadcastRef = useRef2(false);
+  const latestValuesRef = useRef2(values);
+  useEffect2(() => {
+    latestValuesRef.current = values;
+  }, [values]);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    setChannelName(getControlsChannelName());
+  }, []);
   const setValue = (key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   };
@@ -426,6 +460,66 @@ var ControlsProvider = ({ children }) => {
       return updated;
     });
   };
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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 = useMemo(
     () => ({
       schema,
@@ -536,7 +630,13 @@ var useUrlSyncedControls = useControls;
 
 // src/components/ControlPanel/ControlPanel.tsx
 import { useState as useState4, useMemo as useMemo3, useCallback as useCallback3 } from "react";
-import { Check as Check2, Copy, SquareArrowOutUpRight, ChevronDown as ChevronDown2 } from "lucide-react";
+import {
+  Check as Check2,
+  Copy,
+  SquareArrowOutUpRight,
+  ChevronDown as ChevronDown2,
+  Presentation
+} from "lucide-react";
 
 // src/hooks/usePreviewUrl.ts
 import { useEffect as useEffect3, useState as useState3 } from "react";
@@ -545,7 +645,7 @@ var usePreviewUrl = (values, basePath = "") => {
   useEffect3(() => {
     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());
@@ -972,6 +1072,58 @@ var ControlPanel = () => {
   const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
   const previewUrl = usePreviewUrl(values);
+  const buildUrl = useCallback3(
+    (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 = useMemo3(() => {
+    if (!previewUrl) return "";
+    return buildUrl((params) => {
+      params.set(PRESENTATION_PARAM, "true");
+    });
+  }, [buildUrl, previewUrl]);
+  const controlsOnlyUrl = useMemo3(() => {
+    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 = useCallback3(() => {
+    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 = useMemo3(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
@@ -1314,19 +1466,34 @@ var ControlPanel = () => {
             }
           ) }, "control-panel-jsx")
         ] }),
-        previewUrl && /* @__PURE__ */ jsx10(Button, { asChild: true, children: /* @__PURE__ */ jsxs5(
-          "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__ */ jsx10(SquareArrowOutUpRight, {}),
-              " Open in a New Tab"
-            ]
-          }
-        ) })
+        previewUrl && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx10(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxs5(
+            "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__ */ jsx10(SquareArrowOutUpRight, {}),
+                " Open in a New Tab"
+              ]
+            }
+          ) }),
+          config?.showPresentationButton && presentationUrl && /* @__PURE__ */ jsxs5(
+            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__ */ jsx10(Presentation, {}),
+                " Presentation Mode"
+              ]
+            }
+          )
+        ] })
       ] })
     }
   );
@@ -1382,25 +1549,42 @@ var PreviewContainer_default = PreviewContainer;
 
 // src/components/Playground/Playground.tsx
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var NO_CONTROLS_PARAM = "nocontrols";
+var HiddenPreview = ({ children }) => /* @__PURE__ */ jsx13("div", { "aria-hidden": "true", className: "hidden", children });
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = useState5(false);
   const [copied, setCopied] = useState5(false);
   useEffect5(() => {
     setIsHydrated(true);
   }, []);
-  const hideControls = useMemo4(() => {
-    if (typeof window === "undefined") return false;
-    return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
+  const { showControls, isPresentationMode, isControlsOnly } = useMemo4(() => {
+    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__ */ jsx13(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs7(ControlsProvider, { children: [
-    hideControls && /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx13(ResizableLayout, { hideControls: layoutHideControls, children: /* @__PURE__ */ jsxs7(ControlsProvider, { children: [
+    shouldShowShareButton && /* @__PURE__ */ jsxs7(
       "button",
       {
         onClick: handleCopy,
@@ -1411,8 +1595,8 @@ function Playground({ children }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx13(PreviewContainer_default, { hideControls, children }),
-    !hideControls && /* @__PURE__ */ jsx13(ControlPanel_default, {})
+    isControlsOnly ? /* @__PURE__ */ jsx13(HiddenPreview, { children }) : /* @__PURE__ */ jsx13(PreviewContainer_default, { hideControls: layoutHideControls, children }),
+    showControls && /* @__PURE__ */ jsx13(ControlPanel_default, {})
   ] }) });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/v0-playground",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",