@toriistudio/v0-playground 0.2.7 → 0.2.10

package/dist/index.d.mts

@@ -5,37 +5,45 @@ declare function Playground({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
 
-type ControlType = {
+type BaseControl = {
+    hidden?: boolean;
+};
+type ControlType = ({
     type: "boolean";
     value: boolean;
-} | {
+} & BaseControl) | ({
     type: "number";
     value: number;
     min?: number;
     max?: number;
     step?: number;
-} | {
+} & BaseControl) | ({
     type: "string";
     value: string;
-} | {
+} & BaseControl) | ({
     type: "color";
     value: string;
-} | {
+} & BaseControl) | ({
     type: "select";
     value: string;
     options: string[];
-} | {
+} & BaseControl) | ({
     type: "button";
     onClick?: () => void;
     label?: string;
     render?: () => React.ReactNode;
-};
+} & BaseControl);
 type ControlsSchema = Record<string, ControlType>;
+type ControlsConfig = {
+    showCopyButton?: boolean;
+    mainLabel?: string;
+};
 declare const ControlsProvider: ({ children }: {
     children: ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
     componentName?: string;
+    config?: ControlsConfig;
 }) => { [K in keyof T]: T[K] extends {
     value: infer V;
 } ? V : never; } & {
@@ -46,6 +54,7 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
 };
 declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
     componentName?: string;
+    config?: ControlsConfig;
 }) => { [K in keyof T]: T[K] extends {
     value: infer V;
 } ? V : never; } & {

package/dist/index.d.ts

@@ -5,37 +5,45 @@ declare function Playground({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
 
-type ControlType = {
+type BaseControl = {
+    hidden?: boolean;
+};
+type ControlType = ({
     type: "boolean";
     value: boolean;
-} | {
+} & BaseControl) | ({
     type: "number";
     value: number;
     min?: number;
     max?: number;
     step?: number;
-} | {
+} & BaseControl) | ({
     type: "string";
     value: string;
-} | {
+} & BaseControl) | ({
     type: "color";
     value: string;
-} | {
+} & BaseControl) | ({
     type: "select";
     value: string;
     options: string[];
-} | {
+} & BaseControl) | ({
     type: "button";
     onClick?: () => void;
     label?: string;
     render?: () => React.ReactNode;
-};
+} & BaseControl);
 type ControlsSchema = Record<string, ControlType>;
+type ControlsConfig = {
+    showCopyButton?: boolean;
+    mainLabel?: string;
+};
 declare const ControlsProvider: ({ children }: {
     children: ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
     componentName?: string;
+    config?: ControlsConfig;
 }) => { [K in keyof T]: T[K] extends {
     value: infer V;
 } ? V : never; } & {
@@ -46,6 +54,7 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
 };
 declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
     componentName?: string;
+    config?: ControlsConfig;
 }) => { [K in keyof T]: T[K] extends {
     value: infer V;
 } ? V : never; } & {

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");
@@ -166,6 +167,9 @@ var useControlsContext = () => {
 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
+  });
   const [componentName, setComponentName] = (0, import_react2.useState)();
   const setValue = (key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
@@ -174,12 +178,18 @@ var ControlsProvider = ({ children }) => {
     if (opts?.componentName) {
       setComponentName(opts.componentName);
     }
+    if (opts?.config) {
+      setConfig((prev) => ({
+        ...prev,
+        ...opts.config
+      }));
+    }
     setSchema((prevSchema) => ({ ...prevSchema, ...newSchema }));
     setValues((prevValues) => {
       const updated = { ...prevValues };
       for (const key in newSchema) {
+        const control = newSchema[key];
         if (!(key in updated)) {
-          const control = newSchema[key];
           if ("value" in control) {
             updated[key] = control.value;
           }
@@ -189,8 +199,15 @@ var ControlsProvider = ({ children }) => {
     });
   };
   const contextValue = (0, import_react2.useMemo)(
-    () => ({ schema, values, setValue, registerSchema, componentName }),
-    [schema, values, componentName]
+    () => ({
+      schema,
+      values,
+      setValue,
+      registerSchema,
+      componentName,
+      config
+    }),
+    [schema, values, componentName, config]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ControlsContext.Provider, { value: contextValue, children });
 };
@@ -551,13 +568,13 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var ControlPanel = () => {
   const [copied, setCopied] = (0, import_react5.useState)(false);
   const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
-  const { schema, setValue, values, componentName } = useControlsContext();
+  const { schema, setValue, values, componentName, config } = useControlsContext();
   const previewUrl = usePreviewUrl(values);
   const normalControls = Object.entries(schema).filter(
-    ([, control]) => control.type !== "button"
+    ([, control]) => control.type !== "button" && !control.hidden
   );
   const buttonControls = Object.entries(schema).filter(
-    ([, control]) => control.type === "button"
+    ([, control]) => control.type === "button" && !control.hidden
   );
   const jsx12 = (0, import_react5.useMemo)(() => {
     if (!componentName) return "";
@@ -588,7 +605,7 @@ var ControlPanel = () => {
         } : {}
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-10 space-y-4 p-2 md:p-4 border border-stone-700 rounded-md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-lg text-stone-100 font-bold", children: "Controls" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-lg text-stone-100 font-bold", children: config?.mainLabel ?? "Controls" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-4 pt-2", children: [
           normalControls.map(([key, control]) => {
             const value = values[key];
@@ -685,43 +702,49 @@ var ControlPanel = () => {
                 return null;
             }
           }),
-          (buttonControls.length > 0 || jsx12) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "border-t border-stone-700", children: [
-            jsx12 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "button",
-              {
-                onClick: () => {
-                  navigator.clipboard.writeText(jsx12);
-                  setCopied(true);
-                  setTimeout(() => setCopied(false), 5e3);
-                },
-                className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded flex items-center justify-center gap-2",
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "w-4 h-4" }),
-                  "Copied"
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Copy, { className: "w-4 h-4" }),
-                  "Copy to Clipboard"
-                ] })
-              }
-            ) }, "control-panel-jsx"),
-            buttonControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
-              ([key, control]) => control.type === "button" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                "div",
-                {
-                  className: "flex-1",
-                  children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    "button",
+          (buttonControls.length > 0 || jsx12) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              className: `${normalControls.length > 0 ? "border-t" : ""} border-stone-700`,
+              children: [
+                jsx12 && config?.showCopyButton !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "button",
+                  {
+                    onClick: () => {
+                      navigator.clipboard.writeText(jsx12);
+                      setCopied(true);
+                      setTimeout(() => setCopied(false), 5e3);
+                    },
+                    className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded flex items-center justify-center gap-2",
+                    children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "w-4 h-4" }),
+                      "Copied"
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Copy, { className: "w-4 h-4" }),
+                      "Copy to Clipboard"
+                    ] })
+                  }
+                ) }, "control-panel-jsx"),
+                buttonControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
+                  ([key, control]) => control.type === "button" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "div",
                     {
-                      onClick: control.onClick,
-                      className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
-                      children: control.label ?? key
-                    }
-                  )
-                },
-                `control-panel-custom-${key}`
-              ) : null
-            ) })
-          ] })
+                      className: "flex-1",
+                      children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "button",
+                        {
+                          onClick: control.onClick,
+                          className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
+                          children: control.label ?? key
+                        }
+                      )
+                    },
+                    `control-panel-custom-${key}`
+                  ) : null
+                ) })
+              ]
+            }
+          )
         ] }),
         previewUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "a",
@@ -747,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);
   }, []);
@@ -754,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 {
@@ -140,6 +141,9 @@ var useControlsContext = () => {
 var ControlsProvider = ({ children }) => {
   const [schema, setSchema] = useState2({});
   const [values, setValues] = useState2({});
+  const [config, setConfig] = useState2({
+    showCopyButton: true
+  });
   const [componentName, setComponentName] = useState2();
   const setValue = (key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
@@ -148,12 +152,18 @@ var ControlsProvider = ({ children }) => {
     if (opts?.componentName) {
       setComponentName(opts.componentName);
     }
+    if (opts?.config) {
+      setConfig((prev) => ({
+        ...prev,
+        ...opts.config
+      }));
+    }
     setSchema((prevSchema) => ({ ...prevSchema, ...newSchema }));
     setValues((prevValues) => {
       const updated = { ...prevValues };
       for (const key in newSchema) {
+        const control = newSchema[key];
         if (!(key in updated)) {
-          const control = newSchema[key];
           if ("value" in control) {
             updated[key] = control.value;
           }
@@ -163,8 +173,15 @@ var ControlsProvider = ({ children }) => {
     });
   };
   const contextValue = useMemo(
-    () => ({ schema, values, setValue, registerSchema, componentName }),
-    [schema, values, componentName]
+    () => ({
+      schema,
+      values,
+      setValue,
+      registerSchema,
+      componentName,
+      config
+    }),
+    [schema, values, componentName, config]
   );
   return /* @__PURE__ */ jsx2(ControlsContext.Provider, { value: contextValue, children });
 };
@@ -525,13 +542,13 @@ import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlPanel = () => {
   const [copied, setCopied] = useState4(false);
   const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
-  const { schema, setValue, values, componentName } = useControlsContext();
+  const { schema, setValue, values, componentName, config } = useControlsContext();
   const previewUrl = usePreviewUrl(values);
   const normalControls = Object.entries(schema).filter(
-    ([, control]) => control.type !== "button"
+    ([, control]) => control.type !== "button" && !control.hidden
   );
   const buttonControls = Object.entries(schema).filter(
-    ([, control]) => control.type === "button"
+    ([, control]) => control.type === "button" && !control.hidden
   );
   const jsx12 = useMemo2(() => {
     if (!componentName) return "";
@@ -562,7 +579,7 @@ var ControlPanel = () => {
         } : {}
       },
       children: /* @__PURE__ */ jsxs4("div", { className: "mb-10 space-y-4 p-2 md:p-4 border border-stone-700 rounded-md", children: [
-        /* @__PURE__ */ jsx10("div", { className: "space-y-1", children: /* @__PURE__ */ jsx10("h1", { className: "text-lg text-stone-100 font-bold", children: "Controls" }) }),
+        /* @__PURE__ */ jsx10("div", { className: "space-y-1", children: /* @__PURE__ */ jsx10("h1", { className: "text-lg text-stone-100 font-bold", children: config?.mainLabel ?? "Controls" }) }),
         /* @__PURE__ */ jsxs4("div", { className: "space-y-4 pt-2", children: [
           normalControls.map(([key, control]) => {
             const value = values[key];
@@ -659,43 +676,49 @@ var ControlPanel = () => {
                 return null;
             }
           }),
-          (buttonControls.length > 0 || jsx12) && /* @__PURE__ */ jsxs4("div", { className: "border-t border-stone-700", children: [
-            jsx12 && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
-              "button",
-              {
-                onClick: () => {
-                  navigator.clipboard.writeText(jsx12);
-                  setCopied(true);
-                  setTimeout(() => setCopied(false), 5e3);
-                },
-                className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded flex items-center justify-center gap-2",
-                children: copied ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-                  /* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4" }),
-                  "Copied"
-                ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-                  /* @__PURE__ */ jsx10(Copy, { className: "w-4 h-4" }),
-                  "Copy to Clipboard"
-                ] })
-              }
-            ) }, "control-panel-jsx"),
-            buttonControls.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
-              ([key, control]) => control.type === "button" ? /* @__PURE__ */ jsx10(
-                "div",
-                {
-                  className: "flex-1",
-                  children: control.render ? control.render() : /* @__PURE__ */ jsx10(
-                    "button",
+          (buttonControls.length > 0 || jsx12) && /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: `${normalControls.length > 0 ? "border-t" : ""} border-stone-700`,
+              children: [
+                jsx12 && config?.showCopyButton !== false && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    onClick: () => {
+                      navigator.clipboard.writeText(jsx12);
+                      setCopied(true);
+                      setTimeout(() => setCopied(false), 5e3);
+                    },
+                    className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded flex items-center justify-center gap-2",
+                    children: copied ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+                      /* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4" }),
+                      "Copied"
+                    ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+                      /* @__PURE__ */ jsx10(Copy, { className: "w-4 h-4" }),
+                      "Copy to Clipboard"
+                    ] })
+                  }
+                ) }, "control-panel-jsx"),
+                buttonControls.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
+                  ([key, control]) => control.type === "button" ? /* @__PURE__ */ jsx10(
+                    "div",
                     {
-                      onClick: control.onClick,
-                      className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
-                      children: control.label ?? key
-                    }
-                  )
-                },
-                `control-panel-custom-${key}`
-              ) : null
-            ) })
-          ] })
+                      className: "flex-1",
+                      children: control.render ? control.render() : /* @__PURE__ */ jsx10(
+                        "button",
+                        {
+                          onClick: control.onClick,
+                          className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
+                          children: control.label ?? key
+                        }
+                      )
+                    },
+                    `control-panel-custom-${key}`
+                  ) : null
+                ) })
+              ]
+            }
+          )
         ] }),
         previewUrl && /* @__PURE__ */ jsx10(Button, { asChild: true, children: /* @__PURE__ */ jsxs4(
           "a",
@@ -721,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);
   }, []);
@@ -728,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.7",
+  "version": "0.2.10",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -30,7 +30,9 @@
   "scripts": {
     "build": "tsup",
     "local:push": "yarn build && yalc push",
-    "prepublishOnly": "npm run build",
+    "release:patch": "npm version patch && git push --follow-tags && npm publish",
+    "release:minor": "npm version minor && git push --follow-tags && npm publish",
+    "release:major": "npm version major && git push --follow-tags && npm publish",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {