@toriistudio/v0-playground 0.1.0 → 0.1.2

package/README.md

@@ -17,6 +17,22 @@ Perfect for prototyping components, sharing usage examples, or building your own
 
 ---
 
+## 📦 Peer Dependencies
+
+To use `@toriistudio/v0-playground`, you’ll need to install the following peer dependencies:
+
+```bash
+yarn add @radix-ui/react-label @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch class-variance-authority clsx lucide-react tailwind-merge tailwindcss-animate
+```
+
+Or automate it with:
+
+```json
+"scripts": {
+  "install:peers": "npm install $(node -p \"Object.keys(require('./package.json').peerDependencies).join(' ')\")"
+}
+```
+
 ## 🚀 Installation
 
 Install the package and its peer dependencies:
@@ -74,6 +90,26 @@ export default function App() {
 - Prototype interfaces quickly with real data
 - Debug and test variants visually
 
-## 🤙 License
+## 📄 License
 
 MIT
+
+## 🤝 Contributing
+
+We welcome contributions!
+
+If you'd like to improve the playground, add new features, or fix bugs:
+
+1. **Fork** this repository
+2. **Clone** your fork: `git clone https://github.com/your-username/v0-playground`
+3. **Install** dependencies: `yarn` or `npm install`
+4. Make your changes in a branch: `git checkout -b my-new-feature`
+5. **Push** your branch and open a pull request
+
+Before submitting a PR:
+
+- Run `yarn build` to ensure everything compiles
+- Make sure the playground runs without errors (`yalc push` or `npm link` for local testing)
+- Keep the code style clean and consistent
+
+We’re excited to see what you’ll build 🛠️✨

package/dist/index.d.mts

@@ -31,6 +31,9 @@ type ControlType = {
     render?: () => React.ReactNode;
 };
 type ControlsSchema = Record<string, ControlType>;
+declare const ControlsProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
 declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
     componentName?: string;
 }) => { [K in keyof T]: T[K] extends {
@@ -41,5 +44,15 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
     setValue: (key: string, value: any) => void;
     jsx: () => string;
 };
+declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
+    componentName?: string;
+}) => { [K in keyof T]: T[K] extends {
+    value: infer V;
+} ? V : never; } & {
+    controls: Record<string, any>;
+    schema: ControlsSchema;
+    setValue: (key: string, value: any) => void;
+    jsx: () => string;
+};
 
-export { type ControlType, type ControlsSchema, Playground, useControls };
+export { type ControlType, ControlsProvider, type ControlsSchema, Playground, useControls, useUrlSyncedControls };

package/dist/index.d.ts

@@ -31,6 +31,9 @@ type ControlType = {
     render?: () => React.ReactNode;
 };
 type ControlsSchema = Record<string, ControlType>;
+declare const ControlsProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
 declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
     componentName?: string;
 }) => { [K in keyof T]: T[K] extends {
@@ -41,5 +44,15 @@ declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
     setValue: (key: string, value: any) => void;
     jsx: () => string;
 };
+declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, options?: {
+    componentName?: string;
+}) => { [K in keyof T]: T[K] extends {
+    value: infer V;
+} ? V : never; } & {
+    controls: Record<string, any>;
+    schema: ControlsSchema;
+    setValue: (key: string, value: any) => void;
+    jsx: () => string;
+};
 
-export { type ControlType, type ControlsSchema, Playground, useControls };
+export { type ControlType, ControlsProvider, type ControlsSchema, Playground, useControls, useUrlSyncedControls };

package/dist/index.js

@@ -30,11 +30,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ControlsProvider: () => ControlsProvider,
   Playground: () => Playground,
-  useControls: () => useControls
+  useControls: () => useControls,
+  useUrlSyncedControls: () => useUrlSyncedControls
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/components/Playground/Playground.tsx
+var import_react5 = require("react");
+
 // src/context/ResizableLayout.tsx
 var import_react = require("react");
 var import_lucide_react = require("lucide-react");
@@ -47,7 +52,10 @@ var useResizableLayout = () => {
   if (!ctx) throw new Error("ResizableLayoutContext not found");
   return ctx;
 };
-var ResizableLayout = ({ children }) => {
+var ResizableLayout = ({
+  children,
+  hideControls
+}) => {
   const [leftPanelWidth, setLeftPanelWidth] = (0, import_react.useState)(25);
   const [isDesktop, setIsDesktop] = (0, import_react.useState)(false);
   const [isHydrated, setIsHydrated] = (0, import_react.useState)(false);
@@ -111,7 +119,7 @@ var ResizableLayout = ({ children }) => {
           className: "flex flex-col md:flex-row min-h-screen w-full overflow-hidden select-none",
           children: [
             children,
-            isHydrated && isDesktop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            isHydrated && isDesktop && !hideControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 className: "order-3 w-2 bg-stone-800 hover:bg-stone-700 cursor-col-resize items-center justify-center z-10 transition-opacity duration-300",
@@ -135,6 +143,19 @@ var ResizableLayout = ({ children }) => {
 
 // src/context/ControlsContext.tsx
 var import_react2 = require("react");
+
+// src/utils/getUrlParams.ts
+var getUrlParams = () => {
+  if (typeof window === "undefined") return {};
+  const params = new URLSearchParams(window.location.search);
+  const entries = {};
+  for (const [key, value] of params.entries()) {
+    entries[key] = value;
+  }
+  return entries;
+};
+
+// src/context/ControlsContext.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ControlsContext = (0, import_react2.createContext)(null);
 var useControlsContext = () => {
@@ -204,11 +225,36 @@ var useControls = (schema, options) => {
     jsx: jsx11
   };
 };
+var useUrlSyncedControls = (schema, options) => {
+  const urlParams = getUrlParams();
+  const mergedSchema = Object.fromEntries(
+    Object.entries(schema).map(([key, control]) => {
+      const urlValue = urlParams[key];
+      if (!urlValue || !("value" in control)) return [key, control];
+      const defaultValue = control.value;
+      let parsed = urlValue;
+      if (typeof defaultValue === "number") {
+        parsed = parseFloat(urlValue);
+        if (isNaN(parsed)) parsed = defaultValue;
+      } else if (typeof defaultValue === "boolean") {
+        parsed = urlValue === "true";
+      }
+      return [
+        key,
+        {
+          ...control,
+          value: parsed
+        }
+      ];
+    })
+  );
+  return useControls(mergedSchema, options);
+};
 
 // src/components/PreviewContainer/PreviewContainer.tsx
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var PreviewContainer = ({ children }) => {
+var PreviewContainer = ({ children, hideControls }) => {
   const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
   const previewRef = (0, import_react3.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -216,7 +262,7 @@ var PreviewContainer = ({ children }) => {
     {
       ref: previewRef,
       className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
-      style: isHydrated && isDesktop ? {
+      style: isHydrated && isDesktop && !hideControls ? {
         width: `${100 - leftPanelWidth}%`,
         marginLeft: `${leftPanelWidth}%`
       } : {},
@@ -618,14 +664,21 @@ var ControlPanel_default = ControlPanel;
 
 // src/components/Playground/Playground.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResizableLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ControlsProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PreviewContainer_default, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ControlPanel_default, {})
+  const hideControls = (0, import_react5.useMemo)(() => {
+    if (typeof window === "undefined") return false;
+    return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ControlsProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PreviewContainer_default, { hideControls, children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ControlPanel_default, {})
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ControlsProvider,
   Playground,
-  useControls
+  useControls,
+  useUrlSyncedControls
 });

package/dist/index.mjs

@@ -1,3 +1,6 @@
+// src/components/Playground/Playground.tsx
+import { useMemo as useMemo3 } from "react";
+
 // src/context/ResizableLayout.tsx
 import {
   createContext,
@@ -16,7 +19,10 @@ var useResizableLayout = () => {
   if (!ctx) throw new Error("ResizableLayoutContext not found");
   return ctx;
 };
-var ResizableLayout = ({ children }) => {
+var ResizableLayout = ({
+  children,
+  hideControls
+}) => {
   const [leftPanelWidth, setLeftPanelWidth] = useState(25);
   const [isDesktop, setIsDesktop] = useState(false);
   const [isHydrated, setIsHydrated] = useState(false);
@@ -80,7 +86,7 @@ var ResizableLayout = ({ children }) => {
           className: "flex flex-col md:flex-row min-h-screen w-full overflow-hidden select-none",
           children: [
             children,
-            isHydrated && isDesktop && /* @__PURE__ */ jsx(
+            isHydrated && isDesktop && !hideControls && /* @__PURE__ */ jsx(
               "div",
               {
                 className: "order-3 w-2 bg-stone-800 hover:bg-stone-700 cursor-col-resize items-center justify-center z-10 transition-opacity duration-300",
@@ -111,6 +117,19 @@ import {
   useEffect as useEffect2,
   useCallback
 } from "react";
+
+// src/utils/getUrlParams.ts
+var getUrlParams = () => {
+  if (typeof window === "undefined") return {};
+  const params = new URLSearchParams(window.location.search);
+  const entries = {};
+  for (const [key, value] of params.entries()) {
+    entries[key] = value;
+  }
+  return entries;
+};
+
+// src/context/ControlsContext.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ControlsContext = createContext2(null);
 var useControlsContext = () => {
@@ -180,11 +199,36 @@ var useControls = (schema, options) => {
     jsx: jsx11
   };
 };
+var useUrlSyncedControls = (schema, options) => {
+  const urlParams = getUrlParams();
+  const mergedSchema = Object.fromEntries(
+    Object.entries(schema).map(([key, control]) => {
+      const urlValue = urlParams[key];
+      if (!urlValue || !("value" in control)) return [key, control];
+      const defaultValue = control.value;
+      let parsed = urlValue;
+      if (typeof defaultValue === "number") {
+        parsed = parseFloat(urlValue);
+        if (isNaN(parsed)) parsed = defaultValue;
+      } else if (typeof defaultValue === "boolean") {
+        parsed = urlValue === "true";
+      }
+      return [
+        key,
+        {
+          ...control,
+          value: parsed
+        }
+      ];
+    })
+  );
+  return useControls(mergedSchema, options);
+};
 
 // src/components/PreviewContainer/PreviewContainer.tsx
 import { useRef as useRef2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var PreviewContainer = ({ children }) => {
+var PreviewContainer = ({ children, hideControls }) => {
   const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
   const previewRef = useRef2(null);
   return /* @__PURE__ */ jsx3(
@@ -192,7 +236,7 @@ var PreviewContainer = ({ children }) => {
     {
       ref: previewRef,
       className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
-      style: isHydrated && isDesktop ? {
+      style: isHydrated && isDesktop && !hideControls ? {
         width: `${100 - leftPanelWidth}%`,
         marginLeft: `${leftPanelWidth}%`
       } : {},
@@ -594,13 +638,20 @@ var ControlPanel_default = ControlPanel;
 
 // src/components/Playground/Playground.tsx
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
-  return /* @__PURE__ */ jsx10(ResizableLayout, { children: /* @__PURE__ */ jsxs5(ControlsProvider, { children: [
-    /* @__PURE__ */ jsx10(PreviewContainer_default, { children }),
-    /* @__PURE__ */ jsx10(ControlPanel_default, {})
+  const hideControls = useMemo3(() => {
+    if (typeof window === "undefined") return false;
+    return new URLSearchParams(window.location.search).get(NO_CONTROLS_PARAM) === "true";
+  }, []);
+  return /* @__PURE__ */ jsx10(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs5(ControlsProvider, { children: [
+    /* @__PURE__ */ jsx10(PreviewContainer_default, { hideControls, children }),
+    !hideControls && /* @__PURE__ */ jsx10(ControlPanel_default, {})
   ] }) });
 }
 export {
+  ControlsProvider,
   Playground,
-  useControls
+  useControls,
+  useUrlSyncedControls
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/v0-playground",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -29,7 +29,7 @@
   ],
   "scripts": {
     "build": "tsup",
-    "dev:push": "yarn build && yalc push",
+    "local:push": "yarn build && yalc push",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },