@toriistudio/v0-playground 0.2.2 → 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

@@ -744,10 +744,15 @@ var ControlPanel_default = ControlPanel;
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
+  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 {
@@ -718,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.2",
+  "version": "0.2.3",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",