@toriistudio/v0-playground 0.2.6 → 0.2.8

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

@@ -166,6 +166,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 +177,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 +198,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 +567,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 "";
@@ -572,6 +588,8 @@ var ControlPanel = () => {
     "div",
     {
       className: `order-2 md:order-1 w-full md:h-auto p-2 md:p-4 bg-stone-900 font-mono text-stone-300 transition-opacity duration-300 ${!isHydrated ? "opacity-0" : "opacity-100"}`,
+      onPointerDown: (e) => e.stopPropagation(),
+      onTouchStart: (e) => e.stopPropagation(),
       style: {
         width: "100%",
         height: "auto",
@@ -586,7 +604,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];
@@ -683,43 +701,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",

package/dist/index.mjs

@@ -140,6 +140,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 +151,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 +172,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 +541,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 "";
@@ -546,6 +562,8 @@ var ControlPanel = () => {
     "div",
     {
       className: `order-2 md:order-1 w-full md:h-auto p-2 md:p-4 bg-stone-900 font-mono text-stone-300 transition-opacity duration-300 ${!isHydrated ? "opacity-0" : "opacity-100"}`,
+      onPointerDown: (e) => e.stopPropagation(),
+      onTouchStart: (e) => e.stopPropagation(),
       style: {
         width: "100%",
         height: "auto",
@@ -560,7 +578,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];
@@ -657,43 +675,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/v0-playground",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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": {