@toriistudio/v0-playground 0.2.8 → 0.2.10

package/dist/index.js

@@ -39,6 +39,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/Playground/Playground.tsx
 var import_react6 = require("react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/context/ResizableLayout.tsx
 var import_react = require("react");
@@ -769,6 +770,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = (0, import_react6.useState)(false);
+  const [copied, setCopied] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
     setIsHydrated(true);
   }, []);
@@ -776,8 +778,24 @@ function Playground({ children }) {
     if (typeof window === "undefined") return false;
     return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
   }, []);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(window.location.href);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
   if (!isHydrated) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ControlsProvider, { children: [
+    hideControls && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_lucide_react4.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Copy, { size: 16 }),
+          copied ? "Copied!" : "Share"
+        ]
+      }
+    ),
     /* @__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,6 @@
 // src/components/Playground/Playground.tsx
 import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { Check as Check3, Copy as Copy2 } from "lucide-react";
 
 // src/context/ResizableLayout.tsx
 import {
@@ -743,6 +744,7 @@ import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = useState5(false);
+  const [copied, setCopied] = useState5(false);
   useEffect4(() => {
     setIsHydrated(true);
   }, []);
@@ -750,8 +752,24 @@ function Playground({ children }) {
     if (typeof window === "undefined") return false;
     return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
   }, []);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(window.location.href);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
   if (!isHydrated) return null;
   return /* @__PURE__ */ jsx11(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs5(ControlsProvider, { children: [
+    hideControls && /* @__PURE__ */ jsxs5(
+      "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__ */ jsx11(Check3, { size: 16 }) : /* @__PURE__ */ jsx11(Copy2, { size: 16 }),
+          copied ? "Copied!" : "Share"
+        ]
+      }
+    ),
     /* @__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.8",
+  "version": "0.2.10",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",