@toriistudio/v0-playground 0.2.8 → 0.3.0

package/README.md

@@ -22,7 +22,7 @@ Perfect for prototyping components, sharing usage examples, or building your own
 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
+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 @react-three/drei @react-three/fiber three lodash
 ```
 
 Or automate it with:
@@ -83,6 +83,25 @@ export default function App() {
 }
 ```
 
+### R3F Canvas
+
+`PlaygroundCanvas` wraps the playground with a react-three-fiber canvas. Pass any
+`Canvas` props through `mediaProps`:
+
+```ts
+import { PlaygroundCanvas } from "@toriistudio/v0-playground";
+
+export default function Scene() {
+  return (
+    <PlaygroundCanvas mediaProps={{ size: { width: 300, height: 300 } }}>
+      <MyR3FComponent />
+    </PlaygroundCanvas>
+  );
+}
+```
+
+See [`examples/r3f-canvas`](./examples/r3f-canvas) for a full working example.
+
 ## 💡 Example Use Cases
 
 - Build custom component sandboxes

package/dist/index.d.mts

@@ -1,10 +1,43 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
 declare function Playground({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
 
+type CanvasMediaProps = {
+    debugOrbit?: boolean;
+    size: {
+        width: number;
+        height: number;
+    } | null;
+};
+type CanvasProps = {
+    mediaProps?: CanvasMediaProps;
+    children: React__default.ReactNode;
+};
+declare const Canvas: React__default.FC<CanvasProps>;
+
+type PlaygroundCanvasProps = {
+    children: React__default.ReactNode;
+    mediaProps?: CanvasMediaProps;
+};
+declare const PlaygroundCanvas: React__default.FC<PlaygroundCanvasProps>;
+
+declare function CameraLogger(): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 type BaseControl = {
     hidden?: boolean;
 };
@@ -31,7 +64,7 @@ type ControlType = ({
     type: "button";
     onClick?: () => void;
     label?: string;
-    render?: () => React.ReactNode;
+    render?: () => React__default.ReactNode;
 } & BaseControl);
 type ControlsSchema = Record<string, ControlType>;
 type ControlsConfig = {
@@ -64,4 +97,4 @@ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, option
     jsx: () => string;
 };
 
-export { type ControlType, ControlsProvider, type ControlsSchema, Playground, useControls, useUrlSyncedControls };
+export { Button, CameraLogger, Canvas, type ControlType, ControlsProvider, type ControlsSchema, Playground, PlaygroundCanvas, useControls, useUrlSyncedControls };

package/dist/index.d.ts

@@ -1,10 +1,43 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
 declare function Playground({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
 
+type CanvasMediaProps = {
+    debugOrbit?: boolean;
+    size: {
+        width: number;
+        height: number;
+    } | null;
+};
+type CanvasProps = {
+    mediaProps?: CanvasMediaProps;
+    children: React__default.ReactNode;
+};
+declare const Canvas: React__default.FC<CanvasProps>;
+
+type PlaygroundCanvasProps = {
+    children: React__default.ReactNode;
+    mediaProps?: CanvasMediaProps;
+};
+declare const PlaygroundCanvas: React__default.FC<PlaygroundCanvasProps>;
+
+declare function CameraLogger(): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 type BaseControl = {
     hidden?: boolean;
 };
@@ -31,7 +64,7 @@ type ControlType = ({
     type: "button";
     onClick?: () => void;
     label?: string;
-    render?: () => React.ReactNode;
+    render?: () => React__default.ReactNode;
 } & BaseControl);
 type ControlsSchema = Record<string, ControlType>;
 type ControlsConfig = {
@@ -64,4 +97,4 @@ declare const useUrlSyncedControls: <T extends ControlsSchema>(schema: T, option
     jsx: () => string;
 };
 
-export { type ControlType, ControlsProvider, type ControlsSchema, Playground, useControls, useUrlSyncedControls };
+export { Button, CameraLogger, Canvas, type ControlType, ControlsProvider, type ControlsSchema, Playground, PlaygroundCanvas, useControls, useUrlSyncedControls };

package/dist/index.js

@@ -30,8 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Button: () => Button,
+  CameraLogger: () => CameraLogger,
+  Canvas: () => Canvas_default,
   ControlsProvider: () => ControlsProvider,
   Playground: () => Playground,
+  PlaygroundCanvas: () => PlaygroundCanvas_default,
   useControls: () => useControls,
   useUrlSyncedControls: () => useUrlSyncedControls
 });
@@ -39,6 +43,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");
@@ -213,35 +218,6 @@ var ControlsProvider = ({ children }) => {
 var useControls = (schema, options) => {
   const ctx = (0, import_react2.useContext)(ControlsContext);
   if (!ctx) throw new Error("useControls must be used within ControlsProvider");
-  (0, import_react2.useEffect)(() => {
-    ctx.registerSchema(schema, options);
-  }, [JSON.stringify(schema), JSON.stringify(options)]);
-  (0, import_react2.useEffect)(() => {
-    for (const key in schema) {
-      if (!(key in ctx.values) && "value" in schema[key]) {
-        ctx.setValue(key, schema[key].value);
-      }
-    }
-  }, [JSON.stringify(schema), JSON.stringify(ctx.values)]);
-  const typedValues = ctx.values;
-  const jsx12 = (0, import_react2.useCallback)(() => {
-    if (!options?.componentName) return "";
-    const props = Object.entries(typedValues).map(([key, val]) => {
-      if (typeof val === "string") return `${key}="${val}"`;
-      if (typeof val === "boolean") return `${key}={${val}}`;
-      return `${key}={${JSON.stringify(val)}}`;
-    }).join(" ");
-    return `<${options.componentName} ${props} />`;
-  }, [options?.componentName, JSON.stringify(typedValues)]);
-  return {
-    ...typedValues,
-    controls: ctx.values,
-    schema: ctx.schema,
-    setValue: ctx.setValue,
-    jsx: jsx12
-  };
-};
-var useUrlSyncedControls = (schema, options) => {
   const urlParams = getUrlParams();
   const mergedSchema = Object.fromEntries(
     Object.entries(schema).map(([key, control]) => {
@@ -264,8 +240,35 @@ var useUrlSyncedControls = (schema, options) => {
       ];
     })
   );
-  return useControls(mergedSchema, options);
+  (0, import_react2.useEffect)(() => {
+    ctx.registerSchema(mergedSchema, options);
+  }, [JSON.stringify(mergedSchema), JSON.stringify(options)]);
+  (0, import_react2.useEffect)(() => {
+    for (const key in mergedSchema) {
+      if (!(key in ctx.values) && "value" in mergedSchema[key]) {
+        ctx.setValue(key, mergedSchema[key].value);
+      }
+    }
+  }, [JSON.stringify(mergedSchema), JSON.stringify(ctx.values)]);
+  const typedValues = ctx.values;
+  const jsx15 = (0, import_react2.useCallback)(() => {
+    if (!options?.componentName) return "";
+    const props = Object.entries(typedValues).map(([key, val]) => {
+      if (typeof val === "string") return `${key}="${val}"`;
+      if (typeof val === "boolean") return `${key}={${val}}`;
+      return `${key}={${JSON.stringify(val)}}`;
+    }).join(" ");
+    return `<${options.componentName} ${props} />`;
+  }, [options?.componentName, JSON.stringify(typedValues)]);
+  return {
+    ...typedValues,
+    controls: ctx.values,
+    schema: ctx.schema,
+    setValue: ctx.setValue,
+    jsx: jsx15
+  };
 };
+var useUrlSyncedControls = useControls;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
 var import_react3 = require("react");
@@ -575,7 +578,7 @@ var ControlPanel = () => {
   const buttonControls = Object.entries(schema).filter(
     ([, control]) => control.type === "button" && !control.hidden
   );
-  const jsx12 = (0, import_react5.useMemo)(() => {
+  const jsx15 = (0, import_react5.useMemo)(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -701,16 +704,16 @@ var ControlPanel = () => {
                 return null;
             }
           }),
-          (buttonControls.length > 0 || jsx12) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          (buttonControls.length > 0 || jsx15) && /* @__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)(
+                jsx15 && 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);
+                      navigator.clipboard.writeText(jsx15);
                       setCopied(true);
                       setTimeout(() => setCopied(false), 5e3);
                     },
@@ -769,6 +772,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,16 +780,149 @@ 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, {})
   ] }) });
 }
+
+// src/components/Canvas/Canvas.tsx
+var import_react8 = __toESM(require("react"));
+var import_fiber2 = require("@react-three/fiber");
+var import_fiber3 = require("@react-three/fiber");
+
+// src/components/CameraLogger/CameraLogger.tsx
+var import_react7 = require("react");
+var import_drei = require("@react-three/drei");
+var import_fiber = require("@react-three/fiber");
+var import_lodash = require("lodash");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CameraLogger() {
+  const { camera } = (0, import_fiber.useThree)();
+  const controlsRef = (0, import_react7.useRef)(null);
+  const logRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    logRef.current = (0, import_lodash.debounce)(() => {
+      console.info("Camera position:", camera.position.toArray());
+    }, 200);
+  }, [camera]);
+  (0, import_react7.useEffect)(() => {
+    const controls = controlsRef.current;
+    const handler = logRef.current;
+    if (!controls || !handler) return;
+    controls.addEventListener("change", handler);
+    return () => controls.removeEventListener("change", handler);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_drei.OrbitControls, { ref: controlsRef });
+}
+
+// src/components/Canvas/Canvas.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ResponsiveCamera = ({
+  height,
+  width
+}) => {
+  const { camera } = (0, import_fiber2.useThree)();
+  (0, import_react8.useEffect)(() => {
+    const isMobile = width < 768;
+    const zoomFactor = isMobile ? 70 : 100;
+    camera.position.z = height / zoomFactor;
+    camera.updateProjectionMatrix();
+  }, [height, camera, width]);
+  return null;
+};
+var Canvas = ({ mediaProps, children }) => {
+  const canvasRef = (0, import_react8.useRef)(null);
+  const [parentSize, setParentSize] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    let observer = null;
+    const tryObserve = () => {
+      const node = canvasRef.current;
+      if (!node || !node.parentElement) {
+        setTimeout(tryObserve, 50);
+        return;
+      }
+      const parent = node.parentElement;
+      observer = new ResizeObserver(([entry]) => {
+        const { width, height } = entry.contentRect;
+        setParentSize({ width, height });
+      });
+      observer.observe(parent);
+    };
+    tryObserve();
+    return () => {
+      if (observer) observer.disconnect();
+    };
+  }, []);
+  const mergedMediaProps = {
+    ...mediaProps || {},
+    size: mediaProps?.size || { width: 400, height: 400 }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref: canvasRef,
+      className: "w-full h-full pointer-events-none relative touch-none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_fiber2.Canvas,
+        {
+          resize: { polyfill: ResizeObserver },
+          style: { width: parentSize?.width, height: parentSize?.height },
+          gl: { preserveDrawingBuffer: true },
+          children: [
+            parentSize?.height && parentSize?.width && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ResponsiveCamera,
+              {
+                height: parentSize.height,
+                width: parentSize.width
+              }
+            ),
+            mediaProps?.debugOrbit && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CameraLogger, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ambientLight", { intensity: 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pointLight", { position: [10, 10, 10] }),
+            import_react8.default.cloneElement(children, mergedMediaProps)
+          ]
+        }
+      )
+    }
+  );
+};
+var Canvas_default = Canvas;
+
+// src/components/PlaygroundCanvas/PlaygroundCanvas.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PlaygroundCanvas = ({
+  children,
+  mediaProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Playground, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Canvas_default, { mediaProps, children }) });
+};
+var PlaygroundCanvas_default = PlaygroundCanvas;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
+  CameraLogger,
+  Canvas,
   ControlsProvider,
   Playground,
+  PlaygroundCanvas,
   useControls,
   useUrlSyncedControls
 });

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 {
@@ -187,35 +188,6 @@ var ControlsProvider = ({ children }) => {
 var useControls = (schema, options) => {
   const ctx = useContext2(ControlsContext);
   if (!ctx) throw new Error("useControls must be used within ControlsProvider");
-  useEffect2(() => {
-    ctx.registerSchema(schema, options);
-  }, [JSON.stringify(schema), JSON.stringify(options)]);
-  useEffect2(() => {
-    for (const key in schema) {
-      if (!(key in ctx.values) && "value" in schema[key]) {
-        ctx.setValue(key, schema[key].value);
-      }
-    }
-  }, [JSON.stringify(schema), JSON.stringify(ctx.values)]);
-  const typedValues = ctx.values;
-  const jsx12 = useCallback(() => {
-    if (!options?.componentName) return "";
-    const props = Object.entries(typedValues).map(([key, val]) => {
-      if (typeof val === "string") return `${key}="${val}"`;
-      if (typeof val === "boolean") return `${key}={${val}}`;
-      return `${key}={${JSON.stringify(val)}}`;
-    }).join(" ");
-    return `<${options.componentName} ${props} />`;
-  }, [options?.componentName, JSON.stringify(typedValues)]);
-  return {
-    ...typedValues,
-    controls: ctx.values,
-    schema: ctx.schema,
-    setValue: ctx.setValue,
-    jsx: jsx12
-  };
-};
-var useUrlSyncedControls = (schema, options) => {
   const urlParams = getUrlParams();
   const mergedSchema = Object.fromEntries(
     Object.entries(schema).map(([key, control]) => {
@@ -238,8 +210,35 @@ var useUrlSyncedControls = (schema, options) => {
       ];
     })
   );
-  return useControls(mergedSchema, options);
+  useEffect2(() => {
+    ctx.registerSchema(mergedSchema, options);
+  }, [JSON.stringify(mergedSchema), JSON.stringify(options)]);
+  useEffect2(() => {
+    for (const key in mergedSchema) {
+      if (!(key in ctx.values) && "value" in mergedSchema[key]) {
+        ctx.setValue(key, mergedSchema[key].value);
+      }
+    }
+  }, [JSON.stringify(mergedSchema), JSON.stringify(ctx.values)]);
+  const typedValues = ctx.values;
+  const jsx15 = useCallback(() => {
+    if (!options?.componentName) return "";
+    const props = Object.entries(typedValues).map(([key, val]) => {
+      if (typeof val === "string") return `${key}="${val}"`;
+      if (typeof val === "boolean") return `${key}={${val}}`;
+      return `${key}={${JSON.stringify(val)}}`;
+    }).join(" ");
+    return `<${options.componentName} ${props} />`;
+  }, [options?.componentName, JSON.stringify(typedValues)]);
+  return {
+    ...typedValues,
+    controls: ctx.values,
+    schema: ctx.schema,
+    setValue: ctx.setValue,
+    jsx: jsx15
+  };
 };
+var useUrlSyncedControls = useControls;
 
 // src/components/PreviewContainer/PreviewContainer.tsx
 import { useRef as useRef2 } from "react";
@@ -549,7 +548,7 @@ var ControlPanel = () => {
   const buttonControls = Object.entries(schema).filter(
     ([, control]) => control.type === "button" && !control.hidden
   );
-  const jsx12 = useMemo2(() => {
+  const jsx15 = useMemo2(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -675,16 +674,16 @@ var ControlPanel = () => {
                 return null;
             }
           }),
-          (buttonControls.length > 0 || jsx12) && /* @__PURE__ */ jsxs4(
+          (buttonControls.length > 0 || jsx15) && /* @__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(
+                jsx15 && config?.showCopyButton !== false && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
                   "button",
                   {
                     onClick: () => {
-                      navigator.clipboard.writeText(jsx12);
+                      navigator.clipboard.writeText(jsx15);
                       setCopied(true);
                       setTimeout(() => setCopied(false), 5e3);
                     },
@@ -743,6 +742,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,15 +750,148 @@ 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, {})
   ] }) });
 }
+
+// src/components/Canvas/Canvas.tsx
+import React11, { useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
+import { Canvas as ThreeCanvas, useThree as useThree2 } from "@react-three/fiber";
+import "@react-three/fiber";
+
+// src/components/CameraLogger/CameraLogger.tsx
+import { useRef as useRef3, useEffect as useEffect5 } from "react";
+import { OrbitControls } from "@react-three/drei";
+import { useThree } from "@react-three/fiber";
+import { debounce } from "lodash";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function CameraLogger() {
+  const { camera } = useThree();
+  const controlsRef = useRef3(null);
+  const logRef = useRef3(null);
+  useEffect5(() => {
+    logRef.current = debounce(() => {
+      console.info("Camera position:", camera.position.toArray());
+    }, 200);
+  }, [camera]);
+  useEffect5(() => {
+    const controls = controlsRef.current;
+    const handler = logRef.current;
+    if (!controls || !handler) return;
+    controls.addEventListener("change", handler);
+    return () => controls.removeEventListener("change", handler);
+  }, []);
+  return /* @__PURE__ */ jsx12(OrbitControls, { ref: controlsRef });
+}
+
+// src/components/Canvas/Canvas.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var ResponsiveCamera = ({
+  height,
+  width
+}) => {
+  const { camera } = useThree2();
+  useEffect6(() => {
+    const isMobile = width < 768;
+    const zoomFactor = isMobile ? 70 : 100;
+    camera.position.z = height / zoomFactor;
+    camera.updateProjectionMatrix();
+  }, [height, camera, width]);
+  return null;
+};
+var Canvas = ({ mediaProps, children }) => {
+  const canvasRef = useRef4(null);
+  const [parentSize, setParentSize] = useState6(null);
+  useEffect6(() => {
+    let observer = null;
+    const tryObserve = () => {
+      const node = canvasRef.current;
+      if (!node || !node.parentElement) {
+        setTimeout(tryObserve, 50);
+        return;
+      }
+      const parent = node.parentElement;
+      observer = new ResizeObserver(([entry]) => {
+        const { width, height } = entry.contentRect;
+        setParentSize({ width, height });
+      });
+      observer.observe(parent);
+    };
+    tryObserve();
+    return () => {
+      if (observer) observer.disconnect();
+    };
+  }, []);
+  const mergedMediaProps = {
+    ...mediaProps || {},
+    size: mediaProps?.size || { width: 400, height: 400 }
+  };
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref: canvasRef,
+      className: "w-full h-full pointer-events-none relative touch-none",
+      children: /* @__PURE__ */ jsxs6(
+        ThreeCanvas,
+        {
+          resize: { polyfill: ResizeObserver },
+          style: { width: parentSize?.width, height: parentSize?.height },
+          gl: { preserveDrawingBuffer: true },
+          children: [
+            parentSize?.height && parentSize?.width && /* @__PURE__ */ jsx13(
+              ResponsiveCamera,
+              {
+                height: parentSize.height,
+                width: parentSize.width
+              }
+            ),
+            mediaProps?.debugOrbit && /* @__PURE__ */ jsx13(CameraLogger, {}),
+            /* @__PURE__ */ jsx13("ambientLight", { intensity: 1 }),
+            /* @__PURE__ */ jsx13("pointLight", { position: [10, 10, 10] }),
+            React11.cloneElement(children, mergedMediaProps)
+          ]
+        }
+      )
+    }
+  );
+};
+var Canvas_default = Canvas;
+
+// src/components/PlaygroundCanvas/PlaygroundCanvas.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PlaygroundCanvas = ({
+  children,
+  mediaProps
+}) => {
+  return /* @__PURE__ */ jsx14(Playground, { children: /* @__PURE__ */ jsx14(Canvas_default, { mediaProps, children }) });
+};
+var PlaygroundCanvas_default = PlaygroundCanvas;
 export {
+  Button,
+  CameraLogger,
+  Canvas_default as Canvas,
   ControlsProvider,
   Playground,
+  PlaygroundCanvas_default as PlaygroundCanvas,
   useControls,
   useUrlSyncedControls
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/v0-playground",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -59,13 +59,18 @@
     "@radix-ui/react-slider": "^1.3.4",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.4",
+    "@react-three/drei": "^10.3.0",
+    "@react-three/fiber": "^9.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.522.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.177.0",
+    "three-stdlib": "^2.36.0"
   },
   "devDependencies": {
     "@radix-ui/react-label": "^2.1.6",
@@ -73,15 +78,21 @@
     "@radix-ui/react-slider": "^1.3.4",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.4",
+    "@react-three/drei": "^10.3.0",
+    "@react-three/fiber": "^9.1.2",
+    "@types/lodash": "^4.17.19",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.522.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.10",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.177.0",
+    "three-stdlib": "^2.36.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3"
   },

package/dist/preset.d.mts

@@ -1,5 +0,0 @@
-import { Config } from 'tailwindcss';
-
-declare const preset: Partial<Config>;
-
-export { preset as default };

package/dist/preset.d.ts

@@ -1,5 +0,0 @@
-import { Config } from 'tailwindcss';
-
-declare const preset: Partial<Config>;
-
-export { preset as default };