@toriistudio/v0-playground 0.3.1 → 0.4.0

package/dist/index.d.mts

@@ -70,6 +70,7 @@ type ControlsSchema = Record<string, ControlType>;
 type ControlsConfig = {
     showCopyButton?: boolean;
     mainLabel?: string;
+    showGrid?: boolean;
 };
 declare const ControlsProvider: ({ children }: {
     children: ReactNode;

package/dist/index.d.ts

@@ -70,6 +70,7 @@ type ControlsSchema = Record<string, ControlType>;
 type ControlsConfig = {
     showCopyButton?: boolean;
     mainLabel?: string;
+    showGrid?: boolean;
 };
 declare const ControlsProvider: ({ children }: {
     children: ReactNode;

package/dist/index.js

@@ -251,7 +251,7 @@ var useControls = (schema, options) => {
     }
   }, [JSON.stringify(mergedSchema), JSON.stringify(ctx.values)]);
   const typedValues = ctx.values;
-  const jsx15 = (0, import_react2.useCallback)(() => {
+  const jsx16 = (0, import_react2.useCallback)(() => {
     if (!options?.componentName) return "";
     const props = Object.entries(typedValues).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -265,41 +265,20 @@ var useControls = (schema, options) => {
     controls: ctx.values,
     schema: ctx.schema,
     setValue: ctx.setValue,
-    jsx: jsx15
+    jsx: jsx16
   };
 };
 var useUrlSyncedControls = useControls;
 
-// src/components/PreviewContainer/PreviewContainer.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var PreviewContainer = ({ children, hideControls }) => {
-  const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
-  const previewRef = (0, import_react3.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      ref: previewRef,
-      className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
-      style: isHydrated && isDesktop && !hideControls ? {
-        width: `${100 - leftPanelWidth}%`,
-        marginLeft: `${leftPanelWidth}%`
-      } : {},
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-screen h-screen flex items-center justify-center", children })
-    }
-  );
-};
-var PreviewContainer_default = PreviewContainer;
-
 // src/components/ControlPanel/ControlPanel.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/hooks/usePreviewUrl.ts
-var import_react4 = require("react");
+var import_react3 = require("react");
 var usePreviewUrl = (values, basePath = "") => {
-  const [url, setUrl] = (0, import_react4.useState)("");
-  (0, import_react4.useEffect)(() => {
+  const [url, setUrl] = (0, import_react3.useState)("");
+  (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams();
     params.set("nocontrols", "true");
@@ -315,7 +294,7 @@ var usePreviewUrl = (values, basePath = "") => {
 };
 
 // src/components/ui/switch.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
 
 // src/lib/utils.ts
@@ -326,8 +305,8 @@ function cn(...inputs) {
 }
 
 // src/components/ui/switch.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -336,7 +315,7 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       SwitchPrimitives.Thumb,
       {
         className: cn(
@@ -349,14 +328,14 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/ui/label.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority.cva)(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -367,10 +346,10 @@ var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/ui/slider.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Slider = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Slider = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
   SliderPrimitive.Root,
   {
     ref,
@@ -380,19 +359,19 @@ var Slider = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/components/ui/input.tsx
-var React7 = __toESM(require("react"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Input = React7.forwardRef(
+var React6 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Input = React6.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
         type,
@@ -409,13 +388,13 @@ var Input = React7.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/select.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -426,12 +405,12 @@ var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) =
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -440,11 +419,11 @@ var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -453,11 +432,11 @@ var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React8.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var SelectContent = React7.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   SelectPrimitive.Content,
   {
     ref,
@@ -469,8 +448,8 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
     position,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollUpButton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -480,12 +459,12 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollDownButton, {})
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   SelectPrimitive.Label,
   {
     ref,
@@ -494,7 +473,7 @@ var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   SelectPrimitive.Item,
   {
     ref,
@@ -504,13 +483,13 @@ var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -521,10 +500,10 @@ var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/ui/button.tsx
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -550,10 +529,10 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
     }
   }
 );
-var Button = React9.forwardRef(
+var Button = React8.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -566,10 +545,10 @@ var Button = React9.forwardRef(
 Button.displayName = "Button";
 
 // src/components/ControlPanel/ControlPanel.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ControlPanel = () => {
-  const [copied, setCopied] = (0, import_react5.useState)(false);
-  const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
   const previewUrl = usePreviewUrl(values);
   const normalControls = Object.entries(schema).filter(
@@ -578,7 +557,7 @@ var ControlPanel = () => {
   const buttonControls = Object.entries(schema).filter(
     ([, control]) => control.type === "button" && !control.hidden
   );
-  const jsx15 = (0, import_react5.useMemo)(() => {
+  const jsx16 = (0, import_react4.useMemo)(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -587,7 +566,7 @@ var ControlPanel = () => {
     }).join(" ");
     return `<${componentName} ${props} />`;
   }, [componentName, values]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "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"}`,
@@ -606,19 +585,19 @@ var ControlPanel = () => {
           overflowY: "auto"
         } : {}
       },
-      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: config?.mainLabel ?? "Controls" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-4 pt-2", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-10 space-y-4 p-2 md:p-4 border border-stone-700 rounded-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-lg text-stone-100 font-bold", children: config?.mainLabel ?? "Controls" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-4 pt-2", children: [
           normalControls.map(([key, control]) => {
             const value = values[key];
             switch (control.type) {
               case "boolean":
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "div",
                   {
                     className: "flex items-center space-x-4 border-t border-stone-700 pt-4",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         Switch,
                         {
                           id: key,
@@ -627,19 +606,19 @@ var ControlPanel = () => {
                           className: "data-[state=checked]:bg-stone-700 data-[state=unchecked]:bg-stone-700/40"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: key })
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: key })
                     ]
                   },
                   key
                 );
               case "number":
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Label, { className: "text-stone-300", htmlFor: key, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 w-full", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: "text-stone-300", htmlFor: key, children: [
                     key,
                     ": ",
                     value
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     Slider,
                     {
                       id: key,
@@ -653,7 +632,7 @@ var ControlPanel = () => {
                   )
                 ] }, key);
               case "string":
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Input,
                   {
                     id: key,
@@ -665,9 +644,9 @@ var ControlPanel = () => {
                   key
                 );
               case "color":
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: key }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2 w-full", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: key }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "input",
                     {
                       type: "color",
@@ -679,20 +658,20 @@ var ControlPanel = () => {
                   )
                 ] }, key);
               case "select":
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "div",
                   {
                     className: "space-y-2 border-t border-stone-700 pt-4",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: key }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { className: "text-stone-300", htmlFor: key, children: key }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                         Select,
                         {
                           value,
                           onValueChange: (val) => setValue(key, val),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, { placeholder: "Select option" }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectContent, { children: control.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: opt, children: opt }, opt)) })
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder: "Select option" }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: control.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: opt, children: opt }, opt)) })
                           ]
                         }
                       )
@@ -704,35 +683,35 @@ var ControlPanel = () => {
                 return null;
             }
           }),
-          (buttonControls.length > 0 || jsx15) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          (buttonControls.length > 0 || jsx16) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
               className: `${normalControls.length > 0 ? "border-t" : ""} border-stone-700`,
               children: [
-                jsx15 && config?.showCopyButton !== false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                jsx16 && config?.showCopyButton !== false && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     onClick: () => {
-                      navigator.clipboard.writeText(jsx15);
+                      navigator.clipboard.writeText(jsx16);
                       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" }),
+                    children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.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" }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.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)(
+                buttonControls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
+                  ([key, control]) => control.type === "button" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "div",
                     {
                       className: "flex-1",
-                      children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      children: control.render ? control.render() : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "button",
                         {
                           onClick: control.onClick,
@@ -748,7 +727,7 @@ var ControlPanel = () => {
             }
           )
         ] }),
-        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        previewUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "a",
           {
             href: previewUrl,
@@ -756,7 +735,7 @@ var ControlPanel = () => {
             rel: "noopener noreferrer",
             className: "w-full px-4 py-2 text-sm text-center bg-stone-800 hover:bg-stone-700 text-white rounded",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.SquareArrowOutUpRight, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.SquareArrowOutUpRight, {}),
               " Open in a New Tab"
             ]
           }
@@ -767,8 +746,55 @@ var ControlPanel = () => {
 };
 var ControlPanel_default = ControlPanel;
 
-// src/components/Playground/Playground.tsx
+// src/components/PreviewContainer/PreviewContainer.tsx
+var import_react5 = require("react");
+
+// src/components/Grid/Grid.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Grid() {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: "absolute inset-0 w-screen h-screen z-[0] blur-[1px]",
+      style: {
+        backgroundImage: `
+      linear-gradient(to right,rgb(13, 13, 13) 1px, transparent 1px),
+      linear-gradient(to bottom,rgb(13, 13, 13) 1px, transparent 1px)
+    `,
+        backgroundSize: "1rem 1rem",
+        backgroundPosition: "center"
+      }
+    }
+  );
+}
+var Grid_default = Grid;
+
+// src/components/PreviewContainer/PreviewContainer.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var PreviewContainer = ({ children, hideControls }) => {
+  const { config } = useControlsContext();
+  const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
+  const previewRef = (0, import_react5.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      ref: previewRef,
+      className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
+      style: isHydrated && isDesktop && !hideControls ? {
+        width: `${100 - leftPanelWidth}%`,
+        marginLeft: `${leftPanelWidth}%`
+      } : {},
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-screen h-screen", children: [
+        config?.showGrid && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Grid_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
+      ] })
+    }
+  );
+};
+var PreviewContainer_default = PreviewContainer;
+
+// src/components/Playground/Playground.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = (0, import_react6.useState)(false);
@@ -786,20 +812,20 @@ function Playground({ children }) {
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ResizableLayout, { hideControls, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ControlsProvider, { children: [
+    hideControls && /* @__PURE__ */ (0, import_jsx_runtime12.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 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime12.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, {})
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PreviewContainer_default, { hideControls, children }),
+    !hideControls && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ControlPanel_default, {})
   ] }) });
 }
 
@@ -813,7 +839,7 @@ 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");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function CameraLogger() {
   const { camera } = (0, import_fiber.useThree)();
   const controlsRef = (0, import_react7.useRef)(null);
@@ -830,11 +856,11 @@ function CameraLogger() {
     controls.addEventListener("change", handler);
     return () => controls.removeEventListener("change", handler);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_drei.OrbitControls, { ref: controlsRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_drei.OrbitControls, { ref: controlsRef });
 }
 
 // src/components/Canvas/Canvas.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ResponsiveCamera = ({
   height,
   width
@@ -875,28 +901,28 @@ var Canvas = ({ mediaProps, children }) => {
     ...mediaProps || {},
     size: mediaProps?.size || { width: 400, height: 400 }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref: canvasRef,
       className: "w-full h-full pointer-events-none relative touch-none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.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)(
+            parentSize?.height && parentSize?.width && /* @__PURE__ */ (0, import_jsx_runtime14.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] }),
+            mediaProps?.debugOrbit && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CameraLogger, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ambientLight", { intensity: 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("pointLight", { position: [10, 10, 10] }),
             import_react8.default.cloneElement(children, mergedMediaProps)
           ]
         }
@@ -907,12 +933,12 @@ var Canvas = ({ mediaProps, children }) => {
 var Canvas_default = Canvas;
 
 // src/components/PlaygroundCanvas/PlaygroundCanvas.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = 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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Playground, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Canvas_default, { mediaProps, children }) });
 };
 var PlaygroundCanvas_default = PlaygroundCanvas;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -221,7 +221,7 @@ var useControls = (schema, options) => {
     }
   }, [JSON.stringify(mergedSchema), JSON.stringify(ctx.values)]);
   const typedValues = ctx.values;
-  const jsx15 = useCallback(() => {
+  const jsx16 = useCallback(() => {
     if (!options?.componentName) return "";
     const props = Object.entries(typedValues).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -235,32 +235,11 @@ var useControls = (schema, options) => {
     controls: ctx.values,
     schema: ctx.schema,
     setValue: ctx.setValue,
-    jsx: jsx15
+    jsx: jsx16
   };
 };
 var useUrlSyncedControls = useControls;
 
-// src/components/PreviewContainer/PreviewContainer.tsx
-import { useRef as useRef2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var PreviewContainer = ({ children, hideControls }) => {
-  const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
-  const previewRef = useRef2(null);
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      ref: previewRef,
-      className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
-      style: isHydrated && isDesktop && !hideControls ? {
-        width: `${100 - leftPanelWidth}%`,
-        marginLeft: `${leftPanelWidth}%`
-      } : {},
-      children: /* @__PURE__ */ jsx3("div", { className: "w-screen h-screen flex items-center justify-center", children })
-    }
-  );
-};
-var PreviewContainer_default = PreviewContainer;
-
 // src/components/ControlPanel/ControlPanel.tsx
 import { useState as useState4, useMemo as useMemo2 } from "react";
 import { Check as Check2, Copy, SquareArrowOutUpRight } from "lucide-react";
@@ -285,7 +264,7 @@ var usePreviewUrl = (values, basePath = "") => {
 };
 
 // src/components/ui/switch.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 // src/lib/utils.ts
@@ -296,8 +275,8 @@ function cn(...inputs) {
 }
 
 // src/components/ui/switch.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -306,7 +285,7 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ),
     ...props,
     ref,
-    children: /* @__PURE__ */ jsx4(
+    children: /* @__PURE__ */ jsx3(
       SwitchPrimitives.Thumb,
       {
         className: cn(
@@ -319,14 +298,14 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/ui/label.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   LabelPrimitive.Root,
   {
     ref,
@@ -337,10 +316,10 @@ var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/ui/slider.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var Slider = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs2(
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var Slider = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs2(
   SliderPrimitive.Root,
   {
     ref,
@@ -350,19 +329,19 @@ var Slider = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx6(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx6(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx6(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx5(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx5(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx5(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/components/ui/input.tsx
-import * as React7 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Input = React7.forwardRef(
+import * as React6 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Input = React6.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       "input",
       {
         type,
@@ -379,13 +358,13 @@ var Input = React7.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/select.tsx
-import * as React8 from "react";
+import * as React7 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -396,12 +375,12 @@ var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) =
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx7(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx7(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -410,11 +389,11 @@ var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx7(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -423,11 +402,11 @@ var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx7(ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React8.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
+var SelectContent = React7.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
   SelectPrimitive.Content,
   {
     ref,
@@ -439,8 +418,8 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx7(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx7(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -450,12 +429,12 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
           children
         }
       ),
-      /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx7(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   SelectPrimitive.Label,
   {
     ref,
@@ -464,7 +443,7 @@ var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
   SelectPrimitive.Item,
   {
     ref,
@@ -474,13 +453,13 @@ var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx8("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx7("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx7(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   SelectPrimitive.Separator,
   {
     ref,
@@ -491,10 +470,10 @@ var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/ui/button.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var buttonVariants = cva2(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -520,10 +499,10 @@ var buttonVariants = cva2(
     }
   }
 );
-var Button = React9.forwardRef(
+var Button = React8.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -536,10 +515,10 @@ var Button = React9.forwardRef(
 Button.displayName = "Button";
 
 // src/components/ControlPanel/ControlPanel.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlPanel = () => {
   const [copied, setCopied] = useState4(false);
-  const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
+  const { leftPanelWidth, isDesktop, isHydrated } = useResizableLayout();
   const { schema, setValue, values, componentName, config } = useControlsContext();
   const previewUrl = usePreviewUrl(values);
   const normalControls = Object.entries(schema).filter(
@@ -548,7 +527,7 @@ var ControlPanel = () => {
   const buttonControls = Object.entries(schema).filter(
     ([, control]) => control.type === "button" && !control.hidden
   );
-  const jsx15 = useMemo2(() => {
+  const jsx16 = useMemo2(() => {
     if (!componentName) return "";
     const props = Object.entries(values).map(([key, val]) => {
       if (typeof val === "string") return `${key}="${val}"`;
@@ -557,7 +536,7 @@ var ControlPanel = () => {
     }).join(" ");
     return `<${componentName} ${props} />`;
   }, [componentName, values]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     "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"}`,
@@ -577,7 +556,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: config?.mainLabel ?? "Controls" }) }),
+        /* @__PURE__ */ jsx9("div", { className: "space-y-1", children: /* @__PURE__ */ jsx9("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];
@@ -588,7 +567,7 @@ var ControlPanel = () => {
                   {
                     className: "flex items-center space-x-4 border-t border-stone-700 pt-4",
                     children: [
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx9(
                         Switch,
                         {
                           id: key,
@@ -597,19 +576,19 @@ var ControlPanel = () => {
                           className: "data-[state=checked]:bg-stone-700 data-[state=unchecked]:bg-stone-700/40"
                         }
                       ),
-                      /* @__PURE__ */ jsx10(Label, { htmlFor: key, className: "cursor-pointer", children: key })
+                      /* @__PURE__ */ jsx9(Label, { htmlFor: key, className: "cursor-pointer", children: key })
                     ]
                   },
                   key
                 );
               case "number":
                 return /* @__PURE__ */ jsxs4("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsxs4(Label, { className: "text-stone-300", htmlFor: key, children: [
+                  /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsxs4(Label, { className: "text-stone-300", htmlFor: key, children: [
                     key,
                     ": ",
                     value
                   ] }) }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx9(
                     Slider,
                     {
                       id: key,
@@ -623,7 +602,7 @@ var ControlPanel = () => {
                   )
                 ] }, key);
               case "string":
-                return /* @__PURE__ */ jsx10(
+                return /* @__PURE__ */ jsx9(
                   Input,
                   {
                     id: key,
@@ -636,8 +615,8 @@ var ControlPanel = () => {
                 );
               case "color":
                 return /* @__PURE__ */ jsxs4("div", { className: "space-y-2 w-full", children: [
-                  /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: key }) }),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsx9(Label, { className: "text-stone-300", htmlFor: key, children: key }) }),
+                  /* @__PURE__ */ jsx9(
                     "input",
                     {
                       type: "color",
@@ -654,15 +633,15 @@ var ControlPanel = () => {
                   {
                     className: "space-y-2 border-t border-stone-700 pt-4",
                     children: [
-                      /* @__PURE__ */ jsx10(Label, { className: "text-stone-300", htmlFor: key, children: key }),
+                      /* @__PURE__ */ jsx9(Label, { className: "text-stone-300", htmlFor: key, children: key }),
                       /* @__PURE__ */ jsxs4(
                         Select,
                         {
                           value,
                           onValueChange: (val) => setValue(key, val),
                           children: [
-                            /* @__PURE__ */ jsx10(SelectTrigger, { children: /* @__PURE__ */ jsx10(SelectValue, { placeholder: "Select option" }) }),
-                            /* @__PURE__ */ jsx10(SelectContent, { children: control.options.map((opt) => /* @__PURE__ */ jsx10(SelectItem, { value: opt, children: opt }, opt)) })
+                            /* @__PURE__ */ jsx9(SelectTrigger, { children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: "Select option" }) }),
+                            /* @__PURE__ */ jsx9(SelectContent, { children: control.options.map((opt) => /* @__PURE__ */ jsx9(SelectItem, { value: opt, children: opt }, opt)) })
                           ]
                         }
                       )
@@ -674,35 +653,35 @@ var ControlPanel = () => {
                 return null;
             }
           }),
-          (buttonControls.length > 0 || jsx15) && /* @__PURE__ */ jsxs4(
+          (buttonControls.length > 0 || jsx16) && /* @__PURE__ */ jsxs4(
             "div",
             {
               className: `${normalControls.length > 0 ? "border-t" : ""} border-stone-700`,
               children: [
-                jsx15 && config?.showCopyButton !== false && /* @__PURE__ */ jsx10("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx10(
+                jsx16 && config?.showCopyButton !== false && /* @__PURE__ */ jsx9("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx9(
                   "button",
                   {
                     onClick: () => {
-                      navigator.clipboard.writeText(jsx15);
+                      navigator.clipboard.writeText(jsx16);
                       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" }),
+                      /* @__PURE__ */ jsx9(Check2, { className: "w-4 h-4" }),
                       "Copied"
                     ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-                      /* @__PURE__ */ jsx10(Copy, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsx9(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(
+                buttonControls.length > 0 && /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-2 pt-4", children: buttonControls.map(
+                  ([key, control]) => control.type === "button" ? /* @__PURE__ */ jsx9(
                     "div",
                     {
                       className: "flex-1",
-                      children: control.render ? control.render() : /* @__PURE__ */ jsx10(
+                      children: control.render ? control.render() : /* @__PURE__ */ jsx9(
                         "button",
                         {
                           onClick: control.onClick,
@@ -718,7 +697,7 @@ var ControlPanel = () => {
             }
           )
         ] }),
-        previewUrl && /* @__PURE__ */ jsx10(Button, { asChild: true, children: /* @__PURE__ */ jsxs4(
+        previewUrl && /* @__PURE__ */ jsx9(Button, { asChild: true, children: /* @__PURE__ */ jsxs4(
           "a",
           {
             href: previewUrl,
@@ -726,7 +705,7 @@ var ControlPanel = () => {
             rel: "noopener noreferrer",
             className: "w-full px-4 py-2 text-sm text-center bg-stone-800 hover:bg-stone-700 text-white rounded",
             children: [
-              /* @__PURE__ */ jsx10(SquareArrowOutUpRight, {}),
+              /* @__PURE__ */ jsx9(SquareArrowOutUpRight, {}),
               " Open in a New Tab"
             ]
           }
@@ -737,8 +716,55 @@ var ControlPanel = () => {
 };
 var ControlPanel_default = ControlPanel;
 
-// src/components/Playground/Playground.tsx
+// src/components/PreviewContainer/PreviewContainer.tsx
+import { useRef as useRef2 } from "react";
+
+// src/components/Grid/Grid.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Grid() {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: "absolute inset-0 w-screen h-screen z-[0] blur-[1px]",
+      style: {
+        backgroundImage: `
+      linear-gradient(to right,rgb(13, 13, 13) 1px, transparent 1px),
+      linear-gradient(to bottom,rgb(13, 13, 13) 1px, transparent 1px)
+    `,
+        backgroundSize: "1rem 1rem",
+        backgroundPosition: "center"
+      }
+    }
+  );
+}
+var Grid_default = Grid;
+
+// src/components/PreviewContainer/PreviewContainer.tsx
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var PreviewContainer = ({ children, hideControls }) => {
+  const { config } = useControlsContext();
+  const { leftPanelWidth, isDesktop, isHydrated, containerRef } = useResizableLayout();
+  const previewRef = useRef2(null);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref: previewRef,
+      className: "order-1 md:order-2 flex-1 bg-black overflow-auto flex items-center justify-center relative",
+      style: isHydrated && isDesktop && !hideControls ? {
+        width: `${100 - leftPanelWidth}%`,
+        marginLeft: `${leftPanelWidth}%`
+      } : {},
+      children: /* @__PURE__ */ jsxs5("div", { className: "w-screen h-screen", children: [
+        config?.showGrid && /* @__PURE__ */ jsx11(Grid_default, {}),
+        /* @__PURE__ */ jsx11("div", { className: "w-screen h-screen flex items-center justify-center relative", children })
+      ] })
+    }
+  );
+};
+var PreviewContainer_default = PreviewContainer;
+
+// src/components/Playground/Playground.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var NO_CONTROLS_PARAM = "nocontrols";
 function Playground({ children }) {
   const [isHydrated, setIsHydrated] = useState5(false);
@@ -756,20 +782,20 @@ function Playground({ children }) {
     setTimeout(() => setCopied(false), 2e3);
   };
   if (!isHydrated) return null;
-  return /* @__PURE__ */ jsx11(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs5(ControlsProvider, { children: [
-    hideControls && /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx12(ResizableLayout, { hideControls, children: /* @__PURE__ */ jsxs6(ControlsProvider, { children: [
+    hideControls && /* @__PURE__ */ jsxs6(
       "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 ? /* @__PURE__ */ jsx12(Check3, { size: 16 }) : /* @__PURE__ */ jsx12(Copy2, { size: 16 }),
           copied ? "Copied!" : "Share"
         ]
       }
     ),
-    /* @__PURE__ */ jsx11(PreviewContainer_default, { hideControls, children }),
-    !hideControls && /* @__PURE__ */ jsx11(ControlPanel_default, {})
+    /* @__PURE__ */ jsx12(PreviewContainer_default, { hideControls, children }),
+    !hideControls && /* @__PURE__ */ jsx12(ControlPanel_default, {})
   ] }) });
 }
 
@@ -783,7 +809,7 @@ 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";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function CameraLogger() {
   const { camera } = useThree();
   const controlsRef = useRef3(null);
@@ -800,11 +826,11 @@ function CameraLogger() {
     controls.addEventListener("change", handler);
     return () => controls.removeEventListener("change", handler);
   }, []);
-  return /* @__PURE__ */ jsx12(OrbitControls, { ref: controlsRef });
+  return /* @__PURE__ */ jsx13(OrbitControls, { ref: controlsRef });
 }
 
 // src/components/Canvas/Canvas.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var ResponsiveCamera = ({
   height,
   width
@@ -845,28 +871,28 @@ var Canvas = ({ mediaProps, children }) => {
     ...mediaProps || {},
     size: mediaProps?.size || { width: 400, height: 400 }
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ref: canvasRef,
       className: "w-full h-full pointer-events-none relative touch-none",
-      children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsxs7(
         ThreeCanvas,
         {
           resize: { polyfill: ResizeObserver },
           style: { width: parentSize?.width, height: parentSize?.height },
           gl: { preserveDrawingBuffer: true },
           children: [
-            parentSize?.height && parentSize?.width && /* @__PURE__ */ jsx13(
+            parentSize?.height && parentSize?.width && /* @__PURE__ */ jsx14(
               ResponsiveCamera,
               {
                 height: parentSize.height,
                 width: parentSize.width
               }
             ),
-            mediaProps?.debugOrbit && /* @__PURE__ */ jsx13(CameraLogger, {}),
-            /* @__PURE__ */ jsx13("ambientLight", { intensity: 1 }),
-            /* @__PURE__ */ jsx13("pointLight", { position: [10, 10, 10] }),
+            mediaProps?.debugOrbit && /* @__PURE__ */ jsx14(CameraLogger, {}),
+            /* @__PURE__ */ jsx14("ambientLight", { intensity: 1 }),
+            /* @__PURE__ */ jsx14("pointLight", { position: [10, 10, 10] }),
             React11.cloneElement(children, mergedMediaProps)
           ]
         }
@@ -877,12 +903,12 @@ var Canvas = ({ mediaProps, children }) => {
 var Canvas_default = Canvas;
 
 // src/components/PlaygroundCanvas/PlaygroundCanvas.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var PlaygroundCanvas = ({
   children,
   mediaProps
 }) => {
-  return /* @__PURE__ */ jsx14(Playground, { children: /* @__PURE__ */ jsx14(Canvas_default, { mediaProps, children }) });
+  return /* @__PURE__ */ jsx15(Playground, { children: /* @__PURE__ */ jsx15(Canvas_default, { mediaProps, children }) });
 };
 var PlaygroundCanvas_default = PlaygroundCanvas;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/v0-playground",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "V0 Playground",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",