@toriistudio/v0-playground 0.1.0

package/dist/index.mjs

@@ -0,0 +1,606 @@
+// src/context/ResizableLayout.tsx
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useEffect
+} from "react";
+import { GripVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ResizableLayoutContext = createContext(
+  null
+);
+var useResizableLayout = () => {
+  const ctx = useContext(ResizableLayoutContext);
+  if (!ctx) throw new Error("ResizableLayoutContext not found");
+  return ctx;
+};
+var ResizableLayout = ({ children }) => {
+  const [leftPanelWidth, setLeftPanelWidth] = useState(25);
+  const [isDesktop, setIsDesktop] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [sidebarNarrow, setSidebarNarrow] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    setIsHydrated(true);
+    const handleResize = () => setIsDesktop(window.innerWidth >= 768);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect(() => {
+    if (!isHydrated || !isDesktop) return;
+    const checkSidebarWidth = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.clientWidth;
+        const sidebarWidth = leftPanelWidth / 100 * containerWidth;
+        setSidebarNarrow(sidebarWidth < 350);
+      }
+    };
+    checkSidebarWidth();
+    window.addEventListener("resize", checkSidebarWidth);
+    return () => window.removeEventListener("resize", checkSidebarWidth);
+  }, [leftPanelWidth, isHydrated, isDesktop]);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (isDragging && containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const newLeftWidth = (e.clientX - containerRect.left) / containerRect.width * 100;
+        if (newLeftWidth >= 20 && newLeftWidth <= 80) {
+          setLeftPanelWidth(newLeftWidth);
+        }
+      }
+    };
+    const handleMouseUp = () => setIsDragging(false);
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+  return /* @__PURE__ */ jsx(
+    ResizableLayoutContext.Provider,
+    {
+      value: {
+        leftPanelWidth,
+        isHydrated,
+        isDesktop,
+        sidebarNarrow,
+        containerRef
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "min-h-screen w-full bg-black text-white", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: "flex flex-col md:flex-row min-h-screen w-full overflow-hidden select-none",
+          children: [
+            children,
+            isHydrated && isDesktop && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "order-3 w-2 bg-stone-800 hover:bg-stone-700 cursor-col-resize items-center justify-center z-10 transition-opacity duration-300",
+                onMouseDown: () => setIsDragging(true),
+                style: {
+                  position: "absolute",
+                  left: `${leftPanelWidth}%`,
+                  top: 0,
+                  bottom: 0,
+                  display: "flex"
+                },
+                children: /* @__PURE__ */ jsx(GripVertical, { className: "h-6 w-6 text-stone-500" })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
+
+// src/context/ControlsContext.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useState as useState2,
+  useMemo,
+  useEffect as useEffect2,
+  useCallback
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ControlsContext = createContext2(null);
+var useControlsContext = () => {
+  const ctx = useContext2(ControlsContext);
+  if (!ctx) throw new Error("useControls must be used within ControlsProvider");
+  return ctx;
+};
+var ControlsProvider = ({ children }) => {
+  const [schema, setSchema] = useState2({});
+  const [values, setValues] = useState2({});
+  const [componentName, setComponentName] = useState2();
+  const setValue = (key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  };
+  const registerSchema = (newSchema, opts) => {
+    if (opts?.componentName) {
+      setComponentName(opts.componentName);
+    }
+    setSchema((prevSchema) => ({ ...prevSchema, ...newSchema }));
+    setValues((prevValues) => {
+      const updated = { ...prevValues };
+      for (const key in newSchema) {
+        if (!(key in updated)) {
+          const control = newSchema[key];
+          if ("value" in control) {
+            updated[key] = control.value;
+          }
+        }
+      }
+      return updated;
+    });
+  };
+  const contextValue = useMemo(
+    () => ({ schema, values, setValue, registerSchema, componentName }),
+    [schema, values, componentName]
+  );
+  return /* @__PURE__ */ jsx2(ControlsContext.Provider, { value: contextValue, 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 jsx11 = 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: jsx11
+  };
+};
+
+// src/components/PreviewContainer/PreviewContainer.tsx
+import { useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PreviewContainer = ({ children }) => {
+  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 ? {
+        width: `${100 - leftPanelWidth}%`,
+        marginLeft: `${leftPanelWidth}%`
+      } : {},
+      children
+    }
+  );
+};
+var PreviewContainer_default = PreviewContainer;
+
+// src/components/ControlPanel/ControlPanel.tsx
+import { useState as useState3, useMemo as useMemo2 } from "react";
+import { Check as Check2, Copy } from "lucide-react";
+
+// src/components/ui/switch.tsx
+import * as React4 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/switch.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx4(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/components/ui/label.tsx
+import * as React5 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { jsx as jsx5 } 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(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/ui/slider.tsx
+import * as React6 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(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...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" })
+    ]
+  }
+));
+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(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/ui/select.tsx
+import * as React8 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";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(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(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx8(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...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 })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/ControlPanel/ControlPanel.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ControlPanel = () => {
+  const [copied, setCopied] = useState3(false);
+  const { leftPanelWidth, isDesktop, isHydrated, sidebarNarrow } = useResizableLayout();
+  const { schema, setValue, values, componentName } = useControlsContext();
+  const normalControls = Object.entries(schema).filter(
+    ([, control]) => control.type !== "button"
+  );
+  const buttonControls = Object.entries(schema).filter(
+    ([, control]) => control.type === "button"
+  );
+  const jsx11 = useMemo2(() => {
+    if (!componentName) return "";
+    const props = Object.entries(values).map(([key, val]) => {
+      if (typeof val === "string") return `${key}="${val}"`;
+      if (typeof val === "boolean") return `${key}={${val}}`;
+      return `${key}={${JSON.stringify(val)}}`;
+    }).join(" ");
+    return `<${componentName} ${props} />`;
+  }, [componentName, values]);
+  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"}`,
+      style: {
+        width: "100%",
+        height: "auto",
+        flex: "0 0 auto",
+        ...isHydrated && isDesktop ? {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${leftPanelWidth}%`,
+          overflowY: "auto"
+        } : {}
+      },
+      children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4 p-2 md:p-4 border border-stone-700 rounded-md", children: [
+        /* @__PURE__ */ jsx9("div", { className: "space-y-1", children: /* @__PURE__ */ jsx9("h1", { className: "text-lg text-stone-100 font-bold", children: "Controls" }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-4 pt-2", children: [
+          normalControls.map(([key, control]) => {
+            const value = values[key];
+            switch (control.type) {
+              case "boolean":
+                return /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: "flex items-center space-x-4 border-t border-stone-700 pt-4",
+                    children: [
+                      /* @__PURE__ */ jsx9(
+                        Switch,
+                        {
+                          id: key,
+                          checked: value,
+                          onCheckedChange: (v) => setValue(key, v),
+                          className: "data-[state=checked]:bg-stone-700 data-[state=unchecked]:bg-stone-700/40"
+                        }
+                      ),
+                      /* @__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__ */ jsx9("div", { className: "flex items-center justify-between pb-1", children: /* @__PURE__ */ jsxs4(Label, { className: "text-stone-300", htmlFor: key, children: [
+                    key,
+                    ": ",
+                    value
+                  ] }) }),
+                  /* @__PURE__ */ jsx9(
+                    Slider,
+                    {
+                      id: key,
+                      min: control.min ?? 0,
+                      max: control.max ?? 100,
+                      step: control.step ?? 1,
+                      value: [value],
+                      onValueChange: ([v]) => setValue(key, v),
+                      className: "[&>span]:border-none [&_.bg-primary]:bg-stone-800 [&>.bg-background]:bg-stone-500/30"
+                    }
+                  )
+                ] }, key);
+              case "string":
+                return /* @__PURE__ */ jsx9(
+                  Input,
+                  {
+                    id: key,
+                    value,
+                    className: "bg-stone-900",
+                    placeholder: key,
+                    onChange: (e) => setValue(key, e.target.value)
+                  },
+                  key
+                );
+              case "color":
+                return /* @__PURE__ */ jsxs4("div", { className: "space-y-2 w-full", children: [
+                  /* @__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",
+                      id: key,
+                      value,
+                      onChange: (e) => setValue(key, e.target.value),
+                      className: "w-full h-10 rounded border border-stone-600 bg-transparent"
+                    }
+                  )
+                ] }, key);
+              case "select":
+                return /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: "space-y-2 border-t border-stone-700 pt-4",
+                    children: [
+                      /* @__PURE__ */ jsx9(Label, { className: "text-stone-300", htmlFor: key, children: key }),
+                      /* @__PURE__ */ jsxs4(
+                        Select,
+                        {
+                          value,
+                          onValueChange: (val) => setValue(key, val),
+                          children: [
+                            /* @__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)) })
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  key
+                );
+              default:
+                return null;
+            }
+          }),
+          (buttonControls.length > 0 || jsx11) && /* @__PURE__ */ jsxs4("div", { className: "border-t border-stone-700", children: [
+            jsx11 && /* @__PURE__ */ jsx9("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => {
+                  navigator.clipboard.writeText(jsx11);
+                  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__ */ jsx9(Check2, { className: "w-4 h-4" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+                  /* @__PURE__ */ jsx9(Copy, { className: "w-4 h-4" }),
+                  "Copy to Clipboard"
+                ] })
+              }
+            ) }, "control-panel-jsx"),
+            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__ */ jsx9(
+                    "button",
+                    {
+                      onClick: control.onClick,
+                      className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
+                      children: control.label ?? key
+                    }
+                  )
+                },
+                `control-panel-custom-${key}`
+              ) : null
+            ) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+var ControlPanel_default = ControlPanel;
+
+// src/components/Playground/Playground.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function Playground({ children }) {
+  return /* @__PURE__ */ jsx10(ResizableLayout, { children: /* @__PURE__ */ jsxs5(ControlsProvider, { children: [
+    /* @__PURE__ */ jsx10(PreviewContainer_default, { children }),
+    /* @__PURE__ */ jsx10(ControlPanel_default, {})
+  ] }) });
+}
+export {
+  Playground,
+  useControls
+};

package/dist/preset.d.mts

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

package/dist/preset.d.ts

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