@toriistudio/v0-playground 0.2.1 → 0.2.3

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 
 declare function Playground({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react_jsx_runtime.JSX.Element | null;
 
 type ControlType = {
     type: "boolean";

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 
 declare function Playground({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react_jsx_runtime.JSX.Element | null;
 
 type ControlType = {
     type: "boolean";

package/dist/index.js

@@ -38,7 +38,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Playground/Playground.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/context/ResizableLayout.tsx
 var import_react = require("react");
@@ -273,9 +273,28 @@ var PreviewContainer = ({ children, hideControls }) => {
 var PreviewContainer_default = PreviewContainer;
 
 // src/components/ControlPanel/ControlPanel.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
+// src/hooks/usePreviewUrl.ts
+var import_react4 = require("react");
+var usePreviewUrl = (values, basePath = "") => {
+  const [url, setUrl] = (0, import_react4.useState)("");
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams();
+    params.set("nocontrols", "true");
+    for (const [key, value] of Object.entries(values)) {
+      if (value !== void 0 && value !== null) {
+        params.set(key, value.toString());
+      }
+    }
+    const fullUrl = `${basePath || window.location.pathname}?${params.toString()}`;
+    setUrl(fullUrl);
+  }, [values, basePath]);
+  return url;
+};
+
 // src/components/ui/switch.tsx
 var React4 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
@@ -530,27 +549,17 @@ Button.displayName = "Button";
 // src/components/ControlPanel/ControlPanel.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ControlPanel = () => {
-  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [copied, setCopied] = (0, import_react5.useState)(false);
   const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
   const { schema, setValue, values, componentName } = useControlsContext();
+  const previewUrl = usePreviewUrl(values);
   const normalControls = Object.entries(schema).filter(
     ([, control]) => control.type !== "button"
   );
   const buttonControls = Object.entries(schema).filter(
     ([, control]) => control.type === "button"
   );
-  const previewUrl = (0, import_react4.useMemo)(() => {
-    if (typeof window === "undefined") return "";
-    const params = new URLSearchParams();
-    params.set("nocontrols", "true");
-    for (const [key, value] of Object.entries(values)) {
-      if (value !== void 0 && value !== null) {
-        params.set(key, value.toString());
-      }
-    }
-    return `${window.location.pathname}?${params.toString()}`;
-  }, [values]);
-  const jsx12 = (0, import_react4.useMemo)(() => {
+  const jsx12 = (0, import_react5.useMemo)(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -712,7 +721,7 @@ var ControlPanel = () => {
             ) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "a",
           {
             href: previewUrl,
@@ -735,10 +744,15 @@ var ControlPanel_default = ControlPanel;
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
-  const hideControls = (0, import_react5.useMemo)(() => {
+  const [isHydrated, setIsHydrated] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    setIsHydrated(true);
+  }, []);
+  const hideControls = (0, import_react6.useMemo)(() => {
     if (typeof window === "undefined") return false;
     return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
   }, []);
+  if (!isHydrated) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ControlsProvider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PreviewContainer_default, { hideControls, children }),
     !hideControls && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ControlPanel_default, {})

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Playground/Playground.tsx
-import { useMemo as useMemo3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
 
 // src/context/ResizableLayout.tsx
 import {
@@ -247,9 +247,28 @@ var PreviewContainer = ({ children, hideControls }) => {
 var PreviewContainer_default = PreviewContainer;
 
 // src/components/ControlPanel/ControlPanel.tsx
-import { useState as useState3, useMemo as useMemo2 } from "react";
+import { useState as useState4, useMemo as useMemo2 } from "react";
 import { Check as Check2, Copy, SquareArrowOutUpRight } from "lucide-react";
 
+// src/hooks/usePreviewUrl.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var usePreviewUrl = (values, basePath = "") => {
+  const [url, setUrl] = useState3("");
+  useEffect3(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams();
+    params.set("nocontrols", "true");
+    for (const [key, value] of Object.entries(values)) {
+      if (value !== void 0 && value !== null) {
+        params.set(key, value.toString());
+      }
+    }
+    const fullUrl = `${basePath || window.location.pathname}?${params.toString()}`;
+    setUrl(fullUrl);
+  }, [values, basePath]);
+  return url;
+};
+
 // src/components/ui/switch.tsx
 import * as React4 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
@@ -504,26 +523,16 @@ Button.displayName = "Button";
 // src/components/ControlPanel/ControlPanel.tsx
 import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlPanel = () => {
-  const [copied, setCopied] = useState3(false);
+  const [copied, setCopied] = useState4(false);
   const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
   const { schema, setValue, values, componentName } = useControlsContext();
+  const previewUrl = usePreviewUrl(values);
   const normalControls = Object.entries(schema).filter(
     ([, control]) => control.type !== "button"
   );
   const buttonControls = Object.entries(schema).filter(
     ([, control]) => control.type === "button"
   );
-  const previewUrl = useMemo2(() => {
-    if (typeof window === "undefined") return "";
-    const params = new URLSearchParams();
-    params.set("nocontrols", "true");
-    for (const [key, value] of Object.entries(values)) {
-      if (value !== void 0 && value !== null) {
-        params.set(key, value.toString());
-      }
-    }
-    return `${window.location.pathname}?${params.toString()}`;
-  }, [values]);
   const jsx12 = useMemo2(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
@@ -686,7 +695,7 @@ var ControlPanel = () => {
             ) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx10(Button, { asChild: true, children: /* @__PURE__ */ jsxs4(
+        previewUrl && /* @__PURE__ */ jsx10(Button, { asChild: true, children: /* @__PURE__ */ jsxs4(
           "a",
           {
             href: previewUrl,
@@ -709,10 +718,15 @@ var ControlPanel_default = ControlPanel;
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
+  const [isHydrated, setIsHydrated] = useState5(false);
+  useEffect4(() => {
+    setIsHydrated(true);
+  }, []);
   const hideControls = useMemo3(() => {
     if (typeof window === "undefined") return false;
     return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
   }, []);
+  if (!isHydrated) return null;
   return /* @__PURE__ */ jsx11(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs5(ControlsProvider, { children: [
     /* @__PURE__ */ jsx11(PreviewContainer_default, { hideControls, children }),
     !hideControls && /* @__PURE__ */ jsx11(ControlPanel_default, {})

package/package.json

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