@toriistudio/v0-playground 0.1.0

package/dist/index.js

@@ -0,0 +1,631 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Playground: () => Playground,
+  useControls: () => useControls
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/context/ResizableLayout.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ResizableLayoutContext = (0, import_react.createContext)(
+  null
+);
+var useResizableLayout = () => {
+  const ctx = (0, import_react.useContext)(ResizableLayoutContext);
+  if (!ctx) throw new Error("ResizableLayoutContext not found");
+  return ctx;
+};
+var ResizableLayout = ({ children }) => {
+  const [leftPanelWidth, setLeftPanelWidth] = (0, import_react.useState)(25);
+  const [isDesktop, setIsDesktop] = (0, import_react.useState)(false);
+  const [isHydrated, setIsHydrated] = (0, import_react.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [sidebarNarrow, setSidebarNarrow] = (0, import_react.useState)(false);
+  const containerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    setIsHydrated(true);
+    const handleResize = () => setIsDesktop(window.innerWidth >= 768);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  (0, import_react.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]);
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    ResizableLayoutContext.Provider,
+    {
+      value: {
+        leftPanelWidth,
+        isHydrated,
+        isDesktop,
+        sidebarNarrow,
+        containerRef
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-screen w-full bg-black text-white", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "order-3 w-2 bg-stone-800 hover:bg-stone-700 cursor-col-resize items-center justify-center z-10 transition-opacity duration-300",
+                onMouseDown: () => setIsDragging(true),
+                style: {
+                  position: "absolute",
+                  left: `${leftPanelWidth}%`,
+                  top: 0,
+                  bottom: 0,
+                  display: "flex"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GripVertical, { className: "h-6 w-6 text-stone-500" })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
+
+// src/context/ControlsContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ControlsContext = (0, import_react2.createContext)(null);
+var useControlsContext = () => {
+  const ctx = (0, import_react2.useContext)(ControlsContext);
+  if (!ctx) throw new Error("useControls must be used within ControlsProvider");
+  return ctx;
+};
+var ControlsProvider = ({ children }) => {
+  const [schema, setSchema] = (0, import_react2.useState)({});
+  const [values, setValues] = (0, import_react2.useState)({});
+  const [componentName, setComponentName] = (0, import_react2.useState)();
+  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 = (0, import_react2.useMemo)(
+    () => ({ schema, values, setValue, registerSchema, componentName }),
+    [schema, values, componentName]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ControlsContext.Provider, { value: contextValue, 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 jsx11 = (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: jsx11
+  };
+};
+
+// src/components/PreviewContainer/PreviewContainer.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PreviewContainer = ({ children }) => {
+  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 ? {
+        width: `${100 - leftPanelWidth}%`,
+        marginLeft: `${leftPanelWidth}%`
+      } : {},
+      children
+    }
+  );
+};
+var PreviewContainer_default = PreviewContainer;
+
+// src/components/ControlPanel/ControlPanel.tsx
+var import_react4 = require("react");
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/ui/switch.tsx
+var React4 = __toESM(require("react"));
+var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(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)(
+  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__ */ (0, import_jsx_runtime4.jsx)(
+      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
+var React5 = __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 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)(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/ui/slider.tsx
+var React6 = __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)(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...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" })
+    ]
+  }
+));
+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(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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
+var React8 = __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 Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  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__ */ (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" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+  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__ */ (0, import_jsx_runtime8.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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__ */ (0, import_jsx_runtime8.jsx)(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  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__ */ (0, import_jsx_runtime8.jsxs)(
+  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__ */ (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 })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ControlPanel = () => {
+  const [copied, setCopied] = (0, import_react4.useState)(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 = (0, import_react4.useMemo)(() => {
+    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__ */ (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"}`,
+      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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "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: "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_runtime9.jsxs)(
+                  "div",
+                  {
+                    className: "flex items-center space-x-4 border-t border-stone-700 pt-4",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        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__ */ (0, import_jsx_runtime9.jsx)(Label, { htmlFor: key, className: "cursor-pointer", children: key })
+                    ]
+                  },
+                  key
+                );
+              case "number":
+                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_runtime9.jsx)(
+                    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__ */ (0, import_jsx_runtime9.jsx)(
+                  Input,
+                  {
+                    id: key,
+                    value,
+                    className: "bg-stone-900",
+                    placeholder: key,
+                    onChange: (e) => setValue(key, e.target.value)
+                  },
+                  key
+                );
+              case "color":
+                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",
+                      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__ */ (0, import_jsx_runtime9.jsxs)(
+                  "div",
+                  {
+                    className: "space-y-2 border-t border-stone-700 pt-4",
+                    children: [
+                      /* @__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_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)) })
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  key
+                );
+              default:
+                return null;
+            }
+          }),
+          (buttonControls.length > 0 || jsx11) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-t border-stone-700", children: [
+            jsx11 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "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__ */ (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_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_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_runtime9.jsx)(
+                    "button",
+                    {
+                      onClick: control.onClick,
+                      className: "w-full px-4 py-2 text-sm bg-stone-700 hover:bg-stone-600 text-white rounded",
+                      children: control.label ?? key
+                    }
+                  )
+                },
+                `control-panel-custom-${key}`
+              ) : null
+            ) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+var ControlPanel_default = ControlPanel;
+
+// src/components/Playground/Playground.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Playground({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResizableLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ControlsProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PreviewContainer_default, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ControlPanel_default, {})
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Playground,
+  useControls
+});