@browsernode/elements 0.0.1

package/dist/index.js

@@ -0,0 +1,2556 @@
+// src/provider/sandbox-provider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import {
+  SandboxRuntime
+} from "@browsernode/react";
+import { esbuild } from "@browsernode/esbuild-wasm";
+import { nextjs } from "@browsernode/nextjs";
+import { useSandbox } from "@browsernode/react";
+import { jsx } from "react/jsx-runtime";
+var ElementsContext = createContext(null);
+function toTab(t) {
+  return typeof t === "string" ? { path: t } : t;
+}
+function resolveFramework(framework) {
+  if (framework === "nextjs") return nextjs();
+  if (typeof framework === "string") {
+    throw new Error(`Unsupported SandboxProvider framework "${framework}".`);
+  }
+  return framework;
+}
+function SandboxProvider({ children, ...props }) {
+  const {
+    initialActivePanel,
+    initialOpenTabs,
+    initialSelectedPath,
+    theme,
+    framework,
+    bundler,
+    ...sandboxOptions
+  } = props;
+  const options = useMemo(
+    () => ({
+      ...sandboxOptions,
+      framework: resolveFramework(framework),
+      bundler: bundler ?? esbuild()
+    }),
+    // The sandbox is created once on mount (managed by <SandboxRuntime>'s
+    // useEffect deps); listing only framework/bundler here keeps the
+    // ref-stable options object the way callers expect.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [framework, bundler]
+  );
+  return /* @__PURE__ */ jsx(SandboxRuntime, { options, children: /* @__PURE__ */ jsx(
+    ElementsExtrasProvider,
+    {
+      initialActivePanel,
+      initialOpenTabs,
+      initialSelectedPath,
+      theme,
+      children
+    }
+  ) });
+}
+function ElementsExtrasProvider({
+  children,
+  initialActivePanel = "center",
+  initialOpenTabs = [],
+  initialSelectedPath = null,
+  theme = "light"
+}) {
+  const [selectedPath, setSelectedPath] = useState(initialSelectedPath);
+  const [openTabs, setOpenTabs] = useState(
+    () => initialOpenTabs.map(toTab)
+  );
+  const [activePanel, setActivePanel] = useState(initialActivePanel);
+  const openTab = useCallback((t) => {
+    const tab = toTab(t);
+    setOpenTabs((prev) => {
+      if (prev.some((x) => x.path === tab.path)) return prev;
+      return [...prev, tab];
+    });
+    setSelectedPath(tab.path);
+  }, []);
+  const closeTab = useCallback((path) => {
+    setOpenTabs((prev) => {
+      const next = prev.filter((t) => t.path !== path);
+      setSelectedPath((cur) => {
+        if (cur !== path) return cur;
+        const idx = prev.findIndex((t) => t.path === path);
+        const fallback = next[idx - 1] ?? next[idx] ?? next[0] ?? null;
+        return fallback?.path ?? null;
+      });
+      return next;
+    });
+  }, []);
+  const extras = useMemo(
+    () => ({
+      selectedPath,
+      setSelectedPath,
+      openTabs,
+      openTab,
+      closeTab,
+      activePanel,
+      setActivePanel,
+      theme
+    }),
+    [selectedPath, openTabs, openTab, closeTab, activePanel, theme]
+  );
+  return /* @__PURE__ */ jsx(ElementsContext.Provider, { value: extras, children });
+}
+function useElementsContext() {
+  return useContext(ElementsContext);
+}
+function useElementsContextOrThrow() {
+  const ctx = useContext(ElementsContext);
+  if (!ctx) {
+    throw new Error(
+      "useElementsContext() must be called inside <SandboxProvider> from @browsernode/elements."
+    );
+  }
+  return ctx;
+}
+
+// src/sandbox-chrome.tsx
+import {
+  useState as useState9
+} from "react";
+import { motion as motion2 } from "motion/react";
+import {
+  ArrowLeftIcon as ArrowLeftIcon2,
+  ArrowRightIcon as ArrowRightIcon2,
+  ClockFadingIcon,
+  CodeIcon,
+  DownloadIcon as DownloadIcon2,
+  GlobeIcon,
+  MaximizeIcon as MaximizeIcon2,
+  MinimizeIcon as MinimizeIcon2,
+  MonitorIcon as MonitorIcon2,
+  MoreVerticalIcon as MoreVerticalIcon2,
+  RefreshCcwIcon as RefreshCcwIcon2,
+  SmartphoneIcon as SmartphoneIcon2
+} from "lucide-react";
+
+// src/preview/sandbox-preview.tsx
+import {
+  createContext as createContext4,
+  forwardRef,
+  useCallback as useCallback4,
+  useContext as useContext4,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+import { motion } from "motion/react";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  DownloadIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+  MonitorIcon,
+  MoreVerticalIcon,
+  RefreshCcwIcon,
+  SmartphoneIcon
+} from "lucide-react";
+import {
+  SandboxIFrame
+} from "@browsernode/react";
+
+// src/primitives/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+
+// src/primitives/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/ui/button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/primitives/ui/collapsible.tsx
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsx3(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx3(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({ ...props }) {
+  return /* @__PURE__ */ jsx3(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props });
+}
+
+// src/primitives/ui/input.tsx
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    InputPrimitive,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/primitives/ui/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
+    TooltipPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        TooltipPrimitive.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx5(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+// src/preview/primitives/web-preview.tsx
+import { ChevronDownIcon } from "lucide-react";
+import {
+  createContext as createContext2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var WebPreviewContext = createContext2(null);
+var useWebPreview = () => {
+  const context = useContext2(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+var WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}) => {
+  const [url, setUrl] = useState2(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState2(false);
+  const handleUrlChange = useCallback2(
+    (newUrl) => {
+      setUrl(newUrl);
+      onUrlChange?.(newUrl);
+    },
+    [onUrlChange]
+  );
+  const contextValue = useMemo2(
+    () => ({
+      consoleOpen,
+      setConsoleOpen,
+      setUrl: handleUrlChange,
+      url
+    }),
+    [consoleOpen, handleUrlChange, url]
+  );
+  return /* @__PURE__ */ jsx6(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "flex size-full flex-col rounded-lg border bg-card",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    className: cn("flex items-center gap-1 border-b p-2", className),
+    ...props,
+    children
+  }
+);
+var WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx6(TooltipProvider, { children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
+  /* @__PURE__ */ jsx6(
+    TooltipTrigger,
+    {
+      render: /* @__PURE__ */ jsx6(
+        Button,
+        {
+          className: cn("h-8 w-8 p-0 hover:text-foreground", className),
+          disabled,
+          onClick,
+          size: "sm",
+          variant: "ghost",
+          ...props
+        }
+      ),
+      children
+    }
+  ),
+  /* @__PURE__ */ jsx6(TooltipContent, { children: /* @__PURE__ */ jsx6("p", { children: tooltip }) })
+] }) });
+var WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+  return /* @__PURE__ */ jsxs2(
+    Collapsible,
+    {
+      className: cn("border-t bg-muted/50 font-mono text-sm", className),
+      onOpenChange: setConsoleOpen,
+      open: consoleOpen,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs2(CollapsibleTrigger, { render: /* @__PURE__ */ jsx6(Button, { className: "flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50", variant: "ghost" }), children: [
+          "Console",
+          /* @__PURE__ */ jsx6(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "h-4 w-4 transition-transform duration-200",
+                consoleOpen && "rotate-180"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6(
+          CollapsibleContent,
+          {
+            className: cn(
+              "px-4 pb-4",
+              "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 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+            ),
+            children: /* @__PURE__ */ jsxs2("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [
+              logs.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No console output" }) : logs.map((log) => /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: cn(
+                    "text-xs",
+                    log.level === "error" && "text-destructive",
+                    log.level === "warn" && "text-yellow-600",
+                    log.level === "log" && "text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: log.timestamp.toLocaleTimeString() }),
+                    " ",
+                    log.message
+                  ]
+                },
+                `${log.timestamp.getTime()}-${log.level}-${log.message}`
+              )),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/primitives/stack-trace.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  AlertTriangleIcon,
+  CheckIcon,
+  ChevronDownIcon as ChevronDownIcon2,
+  CopyIcon
+} from "lucide-react";
+import {
+  createContext as createContext3,
+  memo,
+  useCallback as useCallback3,
+  useContext as useContext3,
+  useEffect,
+  useMemo as useMemo3,
+  useRef,
+  useState as useState3
+} from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var STACK_FRAME_WITH_PARENS_REGEX = /^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/;
+var STACK_FRAME_WITHOUT_FN_REGEX = /^at\s+(.+):(\d+):(\d+)$/;
+var ERROR_TYPE_REGEX = /^(\w+Error|Error):\s*(.*)$/;
+var AT_PREFIX_REGEX = /^at\s+/;
+var StackTraceContext = createContext3(null);
+var useStackTrace = () => {
+  const context = useContext3(StackTraceContext);
+  if (!context) {
+    throw new Error("StackTrace components must be used within StackTrace");
+  }
+  return context;
+};
+var parseStackFrame = (line) => {
+  const trimmed = line.trim();
+  const withParensMatch = trimmed.match(STACK_FRAME_WITH_PARENS_REGEX);
+  if (withParensMatch) {
+    const [, functionName, filePath, lineNum, colNum] = withParensMatch;
+    const isInternal = filePath.includes("node_modules") || filePath.startsWith("node:") || filePath.includes("internal/");
+    return {
+      columnNumber: colNum ? Number.parseInt(colNum, 10) : null,
+      filePath: filePath ?? null,
+      functionName: functionName ?? null,
+      isInternal,
+      lineNumber: lineNum ? Number.parseInt(lineNum, 10) : null,
+      raw: trimmed
+    };
+  }
+  const withoutFnMatch = trimmed.match(STACK_FRAME_WITHOUT_FN_REGEX);
+  if (withoutFnMatch) {
+    const [, filePath, lineNum, colNum] = withoutFnMatch;
+    const isInternal = (filePath?.includes("node_modules") ?? false) || (filePath?.startsWith("node:") ?? false) || (filePath?.includes("internal/") ?? false);
+    return {
+      columnNumber: colNum ? Number.parseInt(colNum, 10) : null,
+      filePath: filePath ?? null,
+      functionName: null,
+      isInternal,
+      lineNumber: lineNum ? Number.parseInt(lineNum, 10) : null,
+      raw: trimmed
+    };
+  }
+  return {
+    columnNumber: null,
+    filePath: null,
+    functionName: null,
+    isInternal: trimmed.includes("node_modules") || trimmed.includes("node:"),
+    lineNumber: null,
+    raw: trimmed
+  };
+};
+var parseStackTrace = (trace) => {
+  const lines = trace.split("\n").filter((line) => line.trim());
+  if (lines.length === 0) {
+    return {
+      errorMessage: trace,
+      errorType: null,
+      frames: [],
+      raw: trace
+    };
+  }
+  const firstLine = lines[0].trim();
+  let errorType = null;
+  let errorMessage = firstLine;
+  const errorMatch = firstLine.match(ERROR_TYPE_REGEX);
+  if (errorMatch) {
+    const [, type, msg] = errorMatch;
+    errorType = type;
+    errorMessage = msg || "";
+  }
+  const frames = lines.slice(1).filter((line) => line.trim().startsWith("at ")).map(parseStackFrame);
+  return {
+    errorMessage,
+    errorType,
+    frames,
+    raw: trace
+  };
+};
+var StackTrace = memo(
+  ({
+    trace,
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    onFilePathClick,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const parsedTrace = useMemo3(() => parseStackTrace(trace), [trace]);
+    const contextValue = useMemo3(
+      () => ({
+        isOpen,
+        onFilePathClick,
+        raw: trace,
+        setIsOpen,
+        trace: parsedTrace
+      }),
+      [parsedTrace, trace, isOpen, setIsOpen, onFilePathClick]
+    );
+    return /* @__PURE__ */ jsx7(StackTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: cn(
+          "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-sm",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var StackTraceHeader = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useStackTrace();
+    return /* @__PURE__ */ jsx7(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: /* @__PURE__ */ jsx7(CollapsibleTrigger, { ...props, render: /* @__PURE__ */ jsx7("div", { className: cn(
+      "flex w-full cursor-pointer items-center gap-3 p-3 text-left transition-colors hover:bg-muted/50",
+      className
+    ) }), children }) });
+  }
+);
+var StackTraceError = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 items-center gap-2 overflow-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx7(AlertTriangleIcon, { className: "size-4 shrink-0 text-destructive" }),
+        children
+      ]
+    }
+  )
+);
+var StackTraceErrorType = memo(
+  ({ className, children, ...props }) => {
+    const { trace } = useStackTrace();
+    return /* @__PURE__ */ jsx7(
+      "span",
+      {
+        className: cn("shrink-0 font-semibold text-destructive", className),
+        ...props,
+        children: children ?? trace.errorType
+      }
+    );
+  }
+);
+var StackTraceErrorMessage = memo(
+  ({ className, children, ...props }) => {
+    const { trace } = useStackTrace();
+    return /* @__PURE__ */ jsx7("span", { className: cn("truncate text-foreground", className), ...props, children: children ?? trace.errorMessage });
+  }
+);
+var handleActionsClick = (e) => e.stopPropagation();
+var handleActionsKeyDown = (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.stopPropagation();
+  }
+};
+var StackTraceActions = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn("flex shrink-0 items-center gap-1", className),
+      onClick: handleActionsClick,
+      onKeyDown: handleActionsKeyDown,
+      role: "group",
+      ...props,
+      children
+    }
+  )
+);
+var StackTraceCopyButton = memo(
+  ({
+    onCopy,
+    onError,
+    timeout = 2e3,
+    className,
+    children,
+    ...props
+  }) => {
+    const [isCopied, setIsCopied] = useState3(false);
+    const timeoutRef = useRef(0);
+    const { raw } = useStackTrace();
+    const copyToClipboard = useCallback3(async () => {
+      if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+        onError?.(new Error("Clipboard API not available"));
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(raw);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      } catch (error) {
+        onError?.(error);
+      }
+    }, [raw, onCopy, onError, timeout]);
+    useEffect(
+      () => () => {
+        window.clearTimeout(timeoutRef.current);
+      },
+      []
+    );
+    const Icon = isCopied ? CheckIcon : CopyIcon;
+    return /* @__PURE__ */ jsx7(
+      Button,
+      {
+        className: cn("size-7", className),
+        onClick: copyToClipboard,
+        size: "icon",
+        variant: "ghost",
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx7(Icon, { size: 14 })
+      }
+    );
+  }
+);
+var StackTraceExpandButton = memo(
+  ({ className, ...props }) => {
+    const { isOpen } = useStackTrace();
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: cn("flex size-7 items-center justify-center", className),
+        ...props,
+        children: /* @__PURE__ */ jsx7(
+          ChevronDownIcon2,
+          {
+            className: cn(
+              "size-4 text-muted-foreground transition-transform",
+              isOpen ? "rotate-180" : "rotate-0"
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var StackTraceContent = memo(
+  ({
+    className,
+    maxHeight = 400,
+    children,
+    ...props
+  }) => {
+    const { isOpen } = useStackTrace();
+    return /* @__PURE__ */ jsx7(Collapsible, { open: isOpen, children: /* @__PURE__ */ jsx7(
+      CollapsibleContent,
+      {
+        className: cn(
+          "overflow-auto border-t bg-muted/30",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in",
+          className
+        ),
+        style: { maxHeight },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var FilePathButton = memo(
+  ({ frame, onFilePathClick }) => {
+    const handleClick = useCallback3(() => {
+      if (frame.filePath) {
+        onFilePathClick?.(
+          frame.filePath,
+          frame.lineNumber ?? void 0,
+          frame.columnNumber ?? void 0
+        );
+      }
+    }, [frame, onFilePathClick]);
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: cn(
+          "underline decoration-dotted hover:text-primary",
+          onFilePathClick && "cursor-pointer"
+        ),
+        disabled: !onFilePathClick,
+        onClick: handleClick,
+        type: "button",
+        children: [
+          frame.filePath,
+          frame.lineNumber !== null && `:${frame.lineNumber}`,
+          frame.columnNumber !== null && `:${frame.columnNumber}`
+        ]
+      }
+    );
+  }
+);
+FilePathButton.displayName = "FilePathButton";
+var StackTraceFrames = memo(
+  ({
+    className,
+    showInternalFrames = true,
+    ...props
+  }) => {
+    const { trace, onFilePathClick } = useStackTrace();
+    const framesToShow = showInternalFrames ? trace.frames : trace.frames.filter((f) => !f.isInternal);
+    return /* @__PURE__ */ jsxs3("div", { className: cn("space-y-1 p-3", className), ...props, children: [
+      framesToShow.map((frame) => /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: cn(
+            "text-xs",
+            frame.isInternal ? "text-muted-foreground/50" : "text-foreground/90"
+          ),
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: "at " }),
+            frame.functionName && /* @__PURE__ */ jsxs3("span", { className: frame.isInternal ? "" : "text-foreground", children: [
+              frame.functionName,
+              " "
+            ] }),
+            frame.filePath && /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: "(" }),
+              /* @__PURE__ */ jsx7(
+                FilePathButton,
+                {
+                  frame,
+                  onFilePathClick
+                }
+              ),
+              /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: ")" })
+            ] }),
+            !(frame.filePath || frame.functionName) && /* @__PURE__ */ jsx7("span", { children: frame.raw.replace(AT_PREFIX_REGEX, "") })
+          ]
+        },
+        frame.raw
+      )),
+      framesToShow.length === 0 && /* @__PURE__ */ jsx7("div", { className: "text-muted-foreground text-xs", children: "No stack frames" })
+    ] });
+  }
+);
+StackTrace.displayName = "StackTrace";
+StackTraceHeader.displayName = "StackTraceHeader";
+StackTraceError.displayName = "StackTraceError";
+StackTraceErrorType.displayName = "StackTraceErrorType";
+StackTraceErrorMessage.displayName = "StackTraceErrorMessage";
+StackTraceActions.displayName = "StackTraceActions";
+StackTraceCopyButton.displayName = "StackTraceCopyButton";
+StackTraceExpandButton.displayName = "StackTraceExpandButton";
+StackTraceContent.displayName = "StackTraceContent";
+StackTraceFrames.displayName = "StackTraceFrames";
+
+// src/primitives/ui/dropdown-menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { ChevronRightIcon, CheckIcon as CheckIcon2 } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx8(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx8(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
+    MenuPrimitive.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx8(
+        MenuPrimitive.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    MenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/preview/sandbox-preview.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var LEVEL_MAP = {
+  log: "log",
+  info: "log",
+  debug: "log",
+  warn: "warn",
+  error: "error"
+};
+var SandboxPreviewCtx = createContext4(null);
+function useSandboxPreviewCtx() {
+  const ctx = useContext4(SandboxPreviewCtx);
+  if (!ctx) {
+    throw new Error(
+      "<SandboxPreviewToolbar>/<SandboxPreviewWeb> must be rendered inside <SandboxPreviewProvider>"
+    );
+  }
+  return ctx;
+}
+var SandboxPreviewProvider = forwardRef(function SandboxPreviewProvider2({
+  sandbox: sandboxProp,
+  defaultUrl = "/",
+  onNavigate,
+  iframeProps,
+  children,
+  ...rest
+}, ref) {
+  const { sandbox: ctxSandbox } = useSandbox();
+  const sandbox = sandboxProp ?? ctxSandbox ?? null;
+  const innerRef = useRef2(null);
+  const attachHandle = useCallback4((node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const [currentUrl, setCurrentUrl] = useState4(defaultUrl);
+  const [inputValue, setInputValue] = useState4(defaultUrl);
+  const [history, setHistory] = useState4([defaultUrl]);
+  const [historyIndex, setHistoryIndex] = useState4(0);
+  const [events, setEvents] = useState4(
+    () => sandbox ? [...sandbox.console.history()] : []
+  );
+  const [buildError, setBuildError] = useState4(null);
+  const [sandboxError, setSandboxError] = useState4(null);
+  const [runtimeError, setRuntimeError] = useState4(null);
+  const [viewport, setViewport] = useState4("desktop");
+  const containerRef = useRef2(null);
+  const skipNextEcho = useRef2(null);
+  useEffect2(() => {
+    if (!sandbox) return;
+    setEvents([...sandbox.console.history()]);
+    const unsubNav = sandbox.on("navigate", (url) => {
+      setCurrentUrl(url);
+      setInputValue(url);
+      setRuntimeError(null);
+      if (skipNextEcho.current === url) {
+        skipNextEcho.current = null;
+        return;
+      }
+      setHistory((prev) => {
+        const truncated = prev.slice(0, historyIndex + 1);
+        if (truncated[truncated.length - 1] === url) return truncated;
+        return [...truncated, url];
+      });
+      setHistoryIndex((i) => i + 1);
+    });
+    const unsubLog = sandbox.on("console", (level, args) => {
+      setEvents((prev) => [...prev, { level, args, ts: Date.now() }]);
+    });
+    const unsubBuild = sandbox.on("build", (result) => {
+      setBuildError(result.ok ? null : result.errors);
+      if (result.ok) setSandboxError(null);
+    });
+    const unsubErr = sandbox.on("error", (err) => setSandboxError(err));
+    return () => {
+      unsubNav();
+      unsubLog();
+      unsubBuild();
+      unsubErr();
+    };
+  }, [sandbox, historyIndex]);
+  const goBack = useCallback4(() => {
+    if (historyIndex <= 0) return;
+    const target = history[historyIndex - 1];
+    skipNextEcho.current = target;
+    setHistoryIndex(historyIndex - 1);
+    innerRef.current?.navigate(target);
+  }, [history, historyIndex]);
+  const goForward = useCallback4(() => {
+    if (historyIndex >= history.length - 1) return;
+    const target = history[historyIndex + 1];
+    skipNextEcho.current = target;
+    setHistoryIndex(historyIndex + 1);
+    innerRef.current?.navigate(target);
+  }, [history, historyIndex]);
+  const [spinCount, setSpinCount] = useState4(0);
+  const reload = useCallback4(() => {
+    setSpinCount((n) => n + 1);
+    if (sandbox) {
+      sandbox.rebuild().catch(() => {
+      });
+    } else {
+      innerRef.current?.reload();
+    }
+  }, [sandbox]);
+  const [overlay, setOverlay] = useState4(false);
+  const toggleOverlay = useCallback4(() => setOverlay((v) => !v), []);
+  useEffect2(() => {
+    if (!overlay) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOverlay(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [overlay]);
+  const submitUrl = useCallback4(() => {
+    const target = inputValue.trim() || "/";
+    innerRef.current?.navigate(target);
+  }, [inputValue]);
+  const download = useCallback4(async () => {
+    if (!sandbox) return;
+    const blob = await sandbox.download();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${sandbox.sandboxId ?? "sandbox"}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  }, [sandbox]);
+  const logs = useMemo4(
+    () => events.map((e) => ({
+      level: LEVEL_MAP[e.level],
+      message: formatArgs(e.args),
+      timestamp: new Date(e.ts)
+    })),
+    [events]
+  );
+  const overlayTrace = useMemo4(() => {
+    if (buildError && buildError.length > 0) {
+      const head = buildError[0];
+      const frames = buildError.map((d) => {
+        const file = d.file ?? "<unknown>";
+        const line = d.line ?? 0;
+        const col = d.column ?? 0;
+        return `    at build (${file}:${line}:${col})`;
+      });
+      return [`BuildError: ${head.message}`, ...frames].join("\n");
+    }
+    if (runtimeError) {
+      if (runtimeError.stack) return runtimeError.stack;
+      const errType = runtimeError.source === "unhandledrejection" ? "UnhandledRejection" : "RuntimeError";
+      const frame = `    at <iframe> (${runtimeError.filename ?? "<unknown>"}:${runtimeError.lineno ?? 0}:${runtimeError.colno ?? 0})`;
+      return `${errType}: ${runtimeError.message}
+${frame}`;
+    }
+    if (sandboxError) {
+      return sandboxError.stack ?? `SandboxError: ${sandboxError.message}`;
+    }
+    return "";
+  }, [buildError, runtimeError, sandboxError]);
+  const showOverlay = Boolean(buildError && buildError.length > 0) || Boolean(runtimeError) || Boolean(sandboxError);
+  useImperativeHandle(ref, () => ({
+    rebuild: () => innerRef.current?.rebuild(),
+    reload: () => innerRef.current?.reload(),
+    navigate: (u) => innerRef.current?.navigate(u),
+    send: (message) => innerRef.current?.send(message)
+  }), []);
+  const value = useMemo4(() => ({
+    sandbox,
+    iframeProps,
+    rest,
+    onNavigate,
+    innerRef,
+    containerRef,
+    attachHandle,
+    inputValue,
+    setInputValue,
+    currentUrl,
+    history,
+    historyIndex,
+    viewport,
+    setViewport,
+    spinCount,
+    logs,
+    showOverlay,
+    overlayTrace,
+    setRuntimeError,
+    goBack,
+    goForward,
+    reload,
+    overlay,
+    toggleOverlay,
+    submitUrl,
+    download
+  }), [
+    sandbox,
+    iframeProps,
+    rest,
+    onNavigate,
+    attachHandle,
+    inputValue,
+    currentUrl,
+    history,
+    historyIndex,
+    viewport,
+    spinCount,
+    logs,
+    showOverlay,
+    overlayTrace,
+    goBack,
+    goForward,
+    reload,
+    overlay,
+    toggleOverlay,
+    submitUrl,
+    download
+  ]);
+  return /* @__PURE__ */ jsx9(SandboxPreviewCtx.Provider, { value, children });
+});
+function SandboxPreviewWeb() {
+  const {
+    sandbox,
+    iframeProps,
+    rest,
+    onNavigate,
+    containerRef,
+    attachHandle,
+    viewport,
+    showOverlay,
+    overlayTrace,
+    setRuntimeError
+  } = useSandboxPreviewCtx();
+  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: "flex-1 min-h-0 flex justify-center bg-muted/30 relative h-full", children: [
+    /* @__PURE__ */ jsx9(
+      motion.div,
+      {
+        initial: false,
+        animate: { width: viewport === "mobile" ? 390 : "100%" },
+        transition: { type: "spring", stiffness: 320, damping: 32, mass: 0.7 },
+        className: "h-full",
+        children: /* @__PURE__ */ jsx9(
+          SandboxIFrame,
+          {
+            ref: attachHandle,
+            sandbox,
+            iframeProps: {
+              style: {
+                width: "100%",
+                height: "100%",
+                border: 0,
+                ...iframeProps?.style
+              },
+              ...iframeProps
+            },
+            onNavigate,
+            onRuntimeError: setRuntimeError,
+            ...rest
+          }
+        )
+      }
+    ),
+    showOverlay && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 overflow-auto bg-background p-3", children: /* @__PURE__ */ jsxs5(StackTrace, { defaultOpen: true, trace: overlayTrace, children: [
+      /* @__PURE__ */ jsxs5(StackTraceHeader, { children: [
+        /* @__PURE__ */ jsxs5(StackTraceError, { children: [
+          /* @__PURE__ */ jsx9(StackTraceErrorType, {}),
+          /* @__PURE__ */ jsx9(StackTraceErrorMessage, {})
+        ] }),
+        /* @__PURE__ */ jsxs5(StackTraceActions, { children: [
+          /* @__PURE__ */ jsx9(StackTraceCopyButton, {}),
+          /* @__PURE__ */ jsx9(StackTraceExpandButton, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9(StackTraceContent, { children: /* @__PURE__ */ jsx9(StackTraceFrames, {}) })
+    ] }) })
+  ] });
+}
+function SandboxPreviewConsole() {
+  const { logs } = useSandboxPreviewCtx();
+  return /* @__PURE__ */ jsx9(WebPreviewConsole, { logs });
+}
+function formatArgs(args) {
+  return args.map(formatOne).join(" ");
+}
+function formatOne(v) {
+  if (typeof v === "string") return v;
+  if (v === null) return "null";
+  if (v === void 0) return "undefined";
+  if (typeof v === "function") return "[Function]";
+  if (typeof v === "object") {
+    try {
+      return JSON.stringify(v);
+    } catch {
+      return String(v);
+    }
+  }
+  return String(v);
+}
+
+// src/editor/sandbox-file-tree.tsx
+import { useEffect as useEffect3, useMemo as useMemo6, useState as useState6 } from "react";
+import { MenuIcon } from "lucide-react";
+
+// src/editor/primitives/file-tree.tsx
+import {
+  ChevronRightIcon as ChevronRightIcon2,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon
+} from "lucide-react";
+import {
+  createContext as createContext5,
+  useCallback as useCallback5,
+  useContext as useContext5,
+  useMemo as useMemo5,
+  useState as useState5
+} from "react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var noop = () => {
+};
+var FileTreeContext = createContext5({
+  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+  expandedPaths: /* @__PURE__ */ new Set(),
+  togglePath: noop
+});
+var FileTree = ({
+  expanded: controlledExpanded,
+  defaultExpanded = /* @__PURE__ */ new Set(),
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}) => {
+  const [internalExpanded, setInternalExpanded] = useState5(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+  const togglePath = useCallback5(
+    (path) => {
+      const newExpanded = new Set(expandedPaths);
+      if (newExpanded.has(path)) {
+        newExpanded.delete(path);
+      } else {
+        newExpanded.add(path);
+      }
+      setInternalExpanded(newExpanded);
+      onExpandedChange?.(newExpanded);
+    },
+    [expandedPaths, onExpandedChange]
+  );
+  const contextValue = useMemo5(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ jsx10(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border bg-background font-mono text-sm",
+        className
+      ),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ jsx10("div", { className: "p-2", children })
+    }
+  ) });
+};
+var FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx10("span", { className: cn("shrink-0", className), ...props, children });
+var FileTreeName = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx10("span", { className: cn("truncate", className), ...props, children });
+var FileTreeFolderContext = createContext5({
+  isExpanded: false,
+  name: "",
+  path: ""
+});
+var FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext5(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = useCallback5(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = useCallback5(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const folderContextValue = useMemo5(
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+  return /* @__PURE__ */ jsx10(FileTreeFolderContext.Provider, { value: folderContextValue, children: /* @__PURE__ */ jsx10(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn("", className),
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            ),
+            children: [
+              /* @__PURE__ */ jsx10(CollapsibleTrigger, { render: /* @__PURE__ */ jsx10("button", { className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0", type: "button" }), children: /* @__PURE__ */ jsx10(
+                ChevronRightIcon2,
+                {
+                  className: cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left",
+                  onClick: () => {
+                    handleSelect();
+                    togglePath(path);
+                  },
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx10(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx10(FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ jsx10(FolderIcon, { className: "size-4 text-blue-500" }) }),
+                    /* @__PURE__ */ jsx10(FileTreeName, { children: name })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10(CollapsibleContent, { children: /* @__PURE__ */ jsx10("div", { className: "ml-4 border-l pl-2", children }) })
+      ]
+    }
+  ) }) });
+};
+var FileTreeFileContext = createContext5({
+  name: "",
+  path: ""
+});
+var FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) => {
+  const { selectedPath, onSelect } = useContext5(FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = useCallback5(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const handleKeyDown = useCallback5(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+  const fileContextValue = useMemo5(() => ({ name, path }), [name, path]);
+  return /* @__PURE__ */ jsx10(FileTreeFileContext.Provider, { value: fileContextValue, children: /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn(
+        "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
+        isSelected && "bg-muted",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx10("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx10(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx10(FileIcon, { className: "size-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx10(FileTreeName, { children: name })
+      ] })
+    }
+  ) });
+};
+
+// src/primitives/ui/popover.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx11(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx11(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+    PopoverPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx11(
+        PopoverPrimitive.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+
+// src/editor/internal/tree.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function buildTree(paths) {
+  const root = { name: "", path: "", children: /* @__PURE__ */ new Map() };
+  for (const path of paths) {
+    const parts = path.split("/").filter(Boolean);
+    let cur = root;
+    for (let i = 0; i < parts.length; i++) {
+      const name = parts[i];
+      const isLeaf = i === parts.length - 1;
+      const childPath = "/" + parts.slice(0, i + 1).join("/");
+      if (!cur.children) break;
+      let child = cur.children.get(name);
+      if (!child) {
+        child = { name, path: childPath, children: isLeaf ? null : /* @__PURE__ */ new Map() };
+        cur.children.set(name, child);
+      }
+      if (!isLeaf && child.children) cur = child;
+      else if (!isLeaf && !child.children) break;
+    }
+  }
+  return root;
+}
+function renderTree(node) {
+  if (!node.children) return null;
+  const entries = Array.from(node.children.values()).sort((a, b) => {
+    const aFolder = a.children !== null;
+    const bFolder = b.children !== null;
+    if (aFolder !== bFolder) return aFolder ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  return entries.map(
+    (entry) => entry.children ? /* @__PURE__ */ jsx12(FileTreeFolder, { name: entry.name, path: entry.path, children: renderTree(entry) }, entry.path) : /* @__PURE__ */ jsx12(FileTreeFile, { name: entry.name, path: entry.path }, entry.path)
+  );
+}
+function isFile(path, files) {
+  return files.includes(path);
+}
+function defaultExpansion(files) {
+  const roots = ["src", "app", "pages", "components"];
+  const expanded = /* @__PURE__ */ new Set();
+  for (const root of roots) {
+    const abs = "/" + root;
+    if (files.some((f) => f === abs || f.startsWith(`${abs}/`))) {
+      expanded.add(abs);
+    }
+  }
+  return expanded;
+}
+
+// src/editor/sandbox-file-tree.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function SandboxFileTree({
+  sandbox: sandboxProp,
+  defaultExpanded,
+  onSelect,
+  display = "tree",
+  triggerLabel,
+  className
+}) {
+  const elementsCtx = useElementsContext();
+  const sandboxState = useSandbox();
+  const sandbox = sandboxProp ?? sandboxState.sandbox;
+  const [files, setFiles] = useState6(
+    () => sandbox ? sandbox.fs.list() : []
+  );
+  const [open, setOpen] = useState6(false);
+  const selectedPath = elementsCtx?.selectedPath ?? null;
+  const setSelectedPath = elementsCtx?.setSelectedPath;
+  useEffect3(() => {
+    if (!sandbox) return;
+    setFiles(sandbox.fs.list());
+    return sandbox.fs.on("change", () => setFiles(sandbox.fs.list()));
+  }, [sandbox]);
+  const tree = useMemo6(() => buildTree(files), [files]);
+  const handleSelect = (path) => {
+    if (!isFile(path, files)) return;
+    setSelectedPath?.(path);
+    onSelect?.(path);
+    if (display === "dropdown") setOpen(false);
+  };
+  const treeNode = /* @__PURE__ */ jsx13(
+    FileTree,
+    {
+      defaultExpanded: defaultExpanded ?? defaultExpansion(files),
+      onSelect: handleSelect,
+      selectedPath: selectedPath ?? void 0,
+      className: `h-full w-full overflow-auto rounded-none border-0 bg-transparent ${className ?? ""}`.trim(),
+      children: renderTree(tree)
+    }
+  );
+  if (display === "dropdown") {
+    const defaultLabel = selectedPath ? /* @__PURE__ */ jsx13(MenuIcon, { className: "size-4" }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx13(MenuIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx13("span", { children: "Select a file" })
+    ] });
+    return /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx13(
+        PopoverTrigger,
+        {
+          render: /* @__PURE__ */ jsx13(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              "aria-label": "Select file",
+              className: `h-8 gap-2 px-2 text-xs font-normal ${className ?? ""}`.trim()
+            }
+          ),
+          children: triggerLabel ?? defaultLabel
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-72 p-0 max-h-[26rem] flex flex-col overflow-hidden",
+          children: treeNode
+        }
+      )
+    ] });
+  }
+  return treeNode;
+}
+
+// src/editor/sandbox-code-editor.tsx
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect4,
+  useMemo as useMemo8,
+  useRef as useRef3,
+  useState as useState7
+} from "react";
+import { MoreHorizontalIcon } from "lucide-react";
+import { keymap } from "@codemirror/view";
+
+// src/editor/primitives/code-editor.tsx
+import { useMemo as useMemo7 } from "react";
+import CodeMirror, {
+  EditorView
+} from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function CodeEditor({
+  value,
+  onChange,
+  language = "plaintext",
+  theme,
+  extensions: extraExtensions,
+  className,
+  basicSetup,
+  ...rest
+}) {
+  const ctx = useElementsContext();
+  const resolvedTheme = theme ?? ctx?.theme ?? "light";
+  const extensions = useMemo7(() => {
+    const langExt = languageExtension(language);
+    const wrap = EditorView.lineWrapping;
+    const base = [wrap];
+    if (langExt) base.push(langExt);
+    return extraExtensions ? [...base, ...extraExtensions] : base;
+  }, [language, extraExtensions]);
+  return /* @__PURE__ */ jsx14(
+    CodeMirror,
+    {
+      value,
+      onChange,
+      extensions,
+      theme: resolvedTheme,
+      basicSetup: basicSetup ?? {
+        lineNumbers: true,
+        highlightActiveLine: true,
+        highlightActiveLineGutter: true,
+        foldGutter: true,
+        autocompletion: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        indentOnInput: true,
+        searchKeymap: true
+      },
+      className,
+      ...rest
+    }
+  );
+}
+function languageExtension(lang) {
+  switch (lang) {
+    case "typescript":
+      return javascript({ typescript: true });
+    case "tsx":
+      return javascript({ typescript: true, jsx: true });
+    case "javascript":
+      return javascript();
+    case "jsx":
+      return javascript({ jsx: true });
+    case "css":
+      return css();
+    case "html":
+      return html();
+    case "json":
+      return json();
+    case "markdown":
+      return markdown();
+    case "plaintext":
+    default:
+      return null;
+  }
+}
+
+// src/primitives/ui/loading.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs8(
+  "svg",
+  {
+    height: size,
+    strokeLinejoin: "round",
+    style: { color: "currentcolor" },
+    viewBox: "0 0 16 16",
+    width: size,
+    children: [
+      /* @__PURE__ */ jsx15("title", { children: "Loader" }),
+      /* @__PURE__ */ jsxs8("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ jsx15("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M8 16V12",
+            opacity: "0.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M3.29773 1.52783L5.64887 4.7639",
+            opacity: "0.9",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M12.7023 1.52783L10.3511 4.7639",
+            opacity: "0.1",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M12.7023 14.472L10.3511 11.236",
+            opacity: "0.4",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M3.29773 14.472L5.64887 11.236",
+            opacity: "0.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M15.6085 5.52783L11.8043 6.7639",
+            opacity: "0.2",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M0.391602 10.472L4.19583 9.23598",
+            opacity: "0.7",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M15.6085 10.4722L11.8043 9.2361",
+            opacity: "0.3",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M0.391602 5.52783L4.19583 6.7639",
+            opacity: "0.8",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx15("rect", { fill: "white", height: "16", width: "16" }) }) })
+    ]
+  }
+);
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx15(
+  "div",
+  {
+    className: cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx15(LoaderIcon, { size })
+  }
+);
+
+// src/editor/internal/language.ts
+var EXT_TO_LANG = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  mjs: "javascript",
+  cjs: "javascript",
+  json: "json",
+  md: "markdown",
+  mdx: "markdown",
+  css: "css",
+  scss: "css",
+  html: "html",
+  htm: "html"
+};
+function guessLanguage(path) {
+  const m = path.match(/\.([^.]+)$/);
+  if (!m) return "plaintext";
+  const ext = m[1].toLowerCase();
+  return EXT_TO_LANG[ext] ?? "plaintext";
+}
+
+// src/editor/sandbox-code-editor.tsx
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function SandboxCodeEditor({
+  sandbox: sandboxProp,
+  readOnly = false,
+  theme,
+  basicSetup,
+  extensions,
+  language: languageProp,
+  hideHeader = false,
+  emptyState,
+  headerStartSlot,
+  className
+}) {
+  const elementsCtx = useElementsContext();
+  const sandboxState = useSandbox();
+  const sandbox = sandboxProp ?? sandboxState.sandbox;
+  const selectedPath = elementsCtx?.selectedPath ?? null;
+  const setSelectedPath = elementsCtx?.setSelectedPath;
+  const [savedText, setSavedText] = useState7(null);
+  const [buffer, setBuffer] = useState7("");
+  const [loadingPath, setLoadingPath] = useState7(null);
+  const [saveStatus, setSaveStatus] = useState7("idle");
+  const loadedPathRef = useRef3(null);
+  const savedTimerRef = useRef3(null);
+  const sandboxRef = useRef3(sandbox);
+  const selectedPathRef = useRef3(selectedPath);
+  const bufferRef = useRef3(buffer);
+  const dirtyRef = useRef3(false);
+  sandboxRef.current = sandbox;
+  selectedPathRef.current = selectedPath;
+  bufferRef.current = buffer;
+  useEffect4(() => {
+    if (!sandbox || !selectedPath) {
+      setSavedText(null);
+      setBuffer("");
+      loadedPathRef.current = null;
+      return;
+    }
+    setLoadingPath(selectedPath);
+    setSaveStatus("idle");
+    let cancelled = false;
+    sandbox.fs.readFile(selectedPath).then((c) => {
+      if (cancelled) return;
+      setSavedText(c);
+      setBuffer(c);
+      loadedPathRef.current = selectedPath;
+      setLoadingPath(null);
+    }).catch(() => {
+      if (cancelled) return;
+      const fallback = `// Could not read ${selectedPath}`;
+      setSavedText(fallback);
+      setBuffer(fallback);
+      loadedPathRef.current = null;
+      setLoadingPath(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sandbox, selectedPath]);
+  useEffect4(() => {
+    return () => {
+      if (savedTimerRef.current) {
+        clearTimeout(savedTimerRef.current);
+        savedTimerRef.current = null;
+      }
+    };
+  }, [selectedPath]);
+  const handleEditorChange = useCallback6(
+    (next) => {
+      setBuffer(next);
+      if (readOnly) return;
+      if (!selectedPath) return;
+      if (loadedPathRef.current !== selectedPath) return;
+    },
+    [readOnly, selectedPath]
+  );
+  const dirty = !readOnly && savedText !== null && buffer !== savedText;
+  dirtyRef.current = dirty;
+  const deleteFile = useCallback6(async () => {
+    if (readOnly) return;
+    const sb = sandboxRef.current;
+    const path = selectedPathRef.current;
+    if (!sb || !path) return;
+    try {
+      await sb.fs.rm(path);
+      setSelectedPath?.(null);
+    } catch {
+    }
+  }, [readOnly, setSelectedPath]);
+  const save = useCallback6(async () => {
+    if (readOnly) return;
+    const sb = sandboxRef.current;
+    const path = selectedPathRef.current;
+    const text = bufferRef.current;
+    if (!sb || !path) return;
+    if (!dirtyRef.current) return;
+    setSaveStatus("saving");
+    try {
+      await sb.fs.writeFile(path, text);
+      await new Promise((r) => setTimeout(r, 500));
+      setSavedText(text);
+      setSaveStatus("idle");
+    } catch {
+      setSaveStatus("error");
+    }
+  }, [readOnly]);
+  const editorExtensions = useMemo8(
+    () => {
+      const base = [
+        keymap.of([
+          {
+            key: "Mod-s",
+            preventDefault: true,
+            run: () => {
+              void save();
+              return true;
+            }
+          }
+        ])
+      ];
+      return extensions ? [...base, ...extensions] : base;
+    },
+    [save, extensions]
+  );
+  const lang = languageProp ? languageProp : selectedPath ? guessLanguage(selectedPath) : "plaintext";
+  const filename = selectedPath ? selectedPath.split("/").filter(Boolean).pop() ?? selectedPath : null;
+  const headerLabel = selectedPath ? /* @__PURE__ */ jsx16("span", { className: "font-mono", title: selectedPath, children: filename }) : headerStartSlot ? null : /* @__PURE__ */ jsx16("span", { children: "Select a file" });
+  return /* @__PURE__ */ jsxs9("div", { className: `flex h-full w-full flex-col ${className ?? ""}`.trim(), children: [
+    !hideHeader && /* @__PURE__ */ jsxs9("div", { className: "flex flex-none items-center justify-between border-b px-3 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+        headerStartSlot,
+        headerLabel
+      ] }),
+      selectedPath && !readOnly && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx16(
+          Button,
+          {
+            size: "sm",
+            onClick: () => void save(),
+            className: "h-9 px-4 text-sm md:h-8 md:px-3 md:text-xs",
+            children: saveStatus === "saving" ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+              /* @__PURE__ */ jsx16(Loader, { size: 14 }),
+              "Saving..."
+            ] }) : "Save"
+          }
+        ),
+        /* @__PURE__ */ jsxs9(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx16(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx16(
+                Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  "aria-label": "File actions",
+                  className: "size-10 p-0 md:size-8"
+                }
+              ),
+              children: /* @__PURE__ */ jsx16(MoreHorizontalIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx16(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx16(
+            DropdownMenuItem,
+            {
+              onClick: () => void deleteFile(),
+              className: "text-destructive focus:text-destructive",
+              children: "Delete"
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: "flex-1 min-h-0 overflow-auto", children: selectedPath ? /* @__PURE__ */ jsx16(
+      CodeEditor,
+      {
+        value: buffer,
+        onChange: handleEditorChange,
+        language: lang,
+        theme,
+        basicSetup,
+        readOnly: readOnly || loadingPath === selectedPath,
+        extensions: editorExtensions,
+        height: "100%",
+        className: "h-full text-sm"
+      },
+      selectedPath
+    ) : emptyState ?? /* @__PURE__ */ jsx16("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground text-sm", children: "Select a file from the menu" }) })
+  ] });
+}
+
+// src/editor/sandbox-ide.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function SandboxIDE({
+  sandbox,
+  defaultExpanded,
+  hideTree = false,
+  hideViewer = false,
+  hideBorder = false,
+  className,
+  style,
+  ...codeProps
+}) {
+  if (hideViewer) {
+    return /* @__PURE__ */ jsx17(
+      SandboxFileTree,
+      {
+        sandbox,
+        defaultExpanded,
+        className
+      }
+    );
+  }
+  if (hideTree) {
+    return /* @__PURE__ */ jsx17(
+      SandboxCodeEditor,
+      {
+        sandbox,
+        className,
+        ...codeProps
+      }
+    );
+  }
+  const frameClasses = hideBorder ? "flex h-full w-full flex-col md:flex-row overflow-hidden bg-background" : "flex h-full w-full flex-col md:flex-row overflow-hidden rounded-lg border bg-background";
+  const mobileTrigger = /* @__PURE__ */ jsx17(
+    SandboxFileTree,
+    {
+      sandbox,
+      defaultExpanded,
+      display: "dropdown",
+      className: "md:hidden -ml-1"
+    }
+  );
+  return /* @__PURE__ */ jsxs10("div", { className: `${frameClasses} ${className ?? ""}`.trim(), style, children: [
+    /* @__PURE__ */ jsx17("div", { className: "hidden md:block w-64 shrink-0 overflow-auto border-r", children: /* @__PURE__ */ jsx17(SandboxFileTree, { sandbox, defaultExpanded }) }),
+    /* @__PURE__ */ jsx17("div", { className: "flex-1 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx17(
+      SandboxCodeEditor,
+      {
+        sandbox,
+        headerStartSlot: mobileTrigger,
+        ...codeProps
+      }
+    ) })
+  ] });
+}
+
+// src/snapshots/sandbox-snapshots.tsx
+import { useCallback as useCallback7, useEffect as useEffect5, useState as useState8 } from "react";
+import { MoreHorizontalIcon as MoreHorizontalIcon2 } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function SandboxSnapshots({
+  sandbox: sandboxProp,
+  className,
+  title = "Snapshots"
+}) {
+  const { sandbox: ctxSandbox } = useSandbox();
+  const sandbox = sandboxProp ?? ctxSandbox ?? null;
+  const [items, setItems] = useState8([]);
+  const [loading, setLoading] = useState8(false);
+  const [creating, setCreating] = useState8(false);
+  const [restoringId, setRestoringId] = useState8(null);
+  const refresh = useCallback7(async () => {
+    if (!sandbox) return;
+    setLoading(true);
+    try {
+      const list = await sandbox.snapshots.list();
+      setItems(list);
+    } finally {
+      setLoading(false);
+    }
+  }, [sandbox]);
+  useEffect5(() => {
+    void refresh();
+  }, [refresh]);
+  const create = useCallback7(async () => {
+    if (!sandbox || creating) return;
+    setCreating(true);
+    try {
+      await sandbox.snapshots.create();
+      await refresh();
+    } catch (err) {
+      console.error("Failed to create snapshot", err);
+    } finally {
+      setCreating(false);
+    }
+  }, [sandbox, creating, refresh]);
+  const restore = useCallback7(
+    async (id) => {
+      if (!sandbox) return;
+      setRestoringId(id);
+      try {
+        await sandbox.snapshots.restore(id);
+      } catch (err) {
+        console.error("Failed to restore snapshot", err);
+      } finally {
+        setRestoringId(null);
+      }
+    },
+    [sandbox]
+  );
+  const [confirmingDeleteId, setConfirmingDeleteId] = useState8(
+    null
+  );
+  const remove = useCallback7(
+    async (id) => {
+      if (!sandbox) return;
+      try {
+        await sandbox.snapshots.delete(id);
+        setConfirmingDeleteId(null);
+        await refresh();
+      } catch (err) {
+        console.error("Failed to delete snapshot", err);
+      }
+    },
+    [sandbox, refresh]
+  );
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: `flex min-h-0 flex-1 w-full flex-col ${className ?? ""}`.trim(),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex flex-none items-center justify-between border-b px-3 py-2", children: [
+          title !== null ? /* @__PURE__ */ jsx18("span", { className: "text-sm font-medium", children: title }) : /* @__PURE__ */ jsx18("span", {}),
+          /* @__PURE__ */ jsx18(
+            Button,
+            {
+              size: "sm",
+              onClick: () => void create(),
+              disabled: !sandbox || creating,
+              children: creating ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                /* @__PURE__ */ jsx18(Loader, { size: 14 }),
+                "Saving..."
+              ] }) : "New snapshot"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: "flex-1 min-h-0 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+            children: loading && items.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: "Loading\u2026" }) : items.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-4 py-10 text-center text-xs text-muted-foreground", children: "No snapshots yet. Capture the current state to create one." }) : /* @__PURE__ */ jsx18("ul", { className: "divide-y", children: items.map((s) => /* @__PURE__ */ jsxs11(
+              "li",
+              {
+                className: "group flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm transition-colors hover:bg-muted/50",
+                children: [
+                  /* @__PURE__ */ jsxs11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => void restore(s.id),
+                      disabled: restoringId !== null,
+                      className: "flex min-w-0 flex-1 cursor-pointer flex-col items-start text-left disabled:cursor-not-allowed disabled:opacity-50",
+                      children: [
+                        /* @__PURE__ */ jsx18("span", { className: "truncate font-medium", children: s.name ?? `v${s.version}` }),
+                        /* @__PURE__ */ jsx18("span", { className: "text-xs text-muted-foreground", children: formatTime(s.createdAt) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
+                    restoringId === s.id ? /* @__PURE__ */ jsx18(Loader, { size: 14 }) : null,
+                    /* @__PURE__ */ jsxs11(
+                      DropdownMenu,
+                      {
+                        onOpenChange: (open) => {
+                          if (!open) setConfirmingDeleteId(null);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx18(
+                            DropdownMenuTrigger,
+                            {
+                              render: /* @__PURE__ */ jsx18(
+                                Button,
+                                {
+                                  size: "sm",
+                                  variant: "ghost",
+                                  "aria-label": "Snapshot actions",
+                                  className: "size-8 p-0"
+                                }
+                              ),
+                              children: /* @__PURE__ */ jsx18(MoreHorizontalIcon2, { className: "size-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs11(DropdownMenuContent, { align: "end", children: [
+                            /* @__PURE__ */ jsx18(DropdownMenuItem, { onClick: () => void restore(s.id), children: "Restore" }),
+                            /* @__PURE__ */ jsx18(
+                              DropdownMenuItem,
+                              {
+                                closeOnClick: confirmingDeleteId === s.id,
+                                onClick: (e) => {
+                                  if (confirmingDeleteId !== s.id) {
+                                    e.preventDefault();
+                                    setConfirmingDeleteId(s.id);
+                                    return;
+                                  }
+                                  void remove(s.id);
+                                },
+                                className: "text-destructive focus:text-destructive",
+                                children: confirmingDeleteId === s.id ? "Confirm delete" : "Delete"
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              },
+              s.id
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+
+// src/sandbox-attribution.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var POSITION = {
+  position: "absolute",
+  bottom: 14,
+  right: 14,
+  zIndex: 10,
+  pointerEvents: "auto"
+};
+function SandboxAttribution({
+  className,
+  style,
+  href = "https://browsernode.dev"
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": "BrowserNode \u2014 visit browsernode.dev",
+      style: { ...POSITION, ...style },
+      className: cn(
+        // Solid pill — guaranteed legibility over any iframe content.
+        // Matches the canonical BrowserNode wordmark (white "Browser" +
+        // violet "Node") on a near-black surface.
+        "inline-flex items-center rounded-full",
+        "px-2.5 pt-1 pb-1.5 text-[11px] font-semibold tracking-tight leading-none",
+        "bg-zinc-950 ring-1 ring-white/10",
+        "shadow-lg shadow-black/30",
+        "transition-all duration-200 ease-out",
+        "hover:bg-zinc-900 hover:ring-white/20 hover:scale-[1.04]",
+        "select-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx19("span", { className: "text-white", children: "Browser" }),
+        /* @__PURE__ */ jsx19("span", { className: "text-violet-400", children: "Node" })
+      ]
+    }
+  );
+}
+
+// src/primitives/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva2(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    TabsPrimitive.Tab,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/sandbox-chrome.tsx
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var DEFAULT_UI = {
+  showCodeEditor: true,
+  showNavigation: true,
+  showReload: true,
+  showDeviceToggle: true,
+  showFullScreenToggle: true,
+  showSnapshots: true,
+  showExportFiles: true,
+  showSettings: false,
+  showConsole: true,
+  showAttribution: true
+};
+var SLIDE_TRANSITION = {
+  type: "spring",
+  stiffness: 320,
+  damping: 32,
+  mass: 0.7
+};
+function SandboxChrome({ ui, className, style }) {
+  const flags = { ...DEFAULT_UI, ...ui };
+  const [view, setView] = useState9("web");
+  const isCode = view === "code";
+  return /* @__PURE__ */ jsx21(SandboxPreviewProvider, { children: /* @__PURE__ */ jsxs13(SandboxOverlay, { className, style, children: [
+    /* @__PURE__ */ jsx21(
+      SandboxToolbar,
+      {
+        flags,
+        view,
+        onViewChange: setView
+      }
+    ),
+    /* @__PURE__ */ jsxs13("div", { className: "relative flex-1 min-h-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsx21(
+        motion2.div,
+        {
+          className: "absolute inset-0",
+          animate: { x: isCode ? "-100%" : "0%" },
+          transition: SLIDE_TRANSITION,
+          children: /* @__PURE__ */ jsx21(SandboxPreviewWeb, {})
+        }
+      ),
+      flags.showCodeEditor && /* @__PURE__ */ jsx21(
+        motion2.div,
+        {
+          className: "absolute inset-0",
+          initial: { x: "100%" },
+          animate: { x: isCode ? "0%" : "100%" },
+          transition: SLIDE_TRANSITION,
+          children: /* @__PURE__ */ jsx21(SandboxIDE, { hideBorder: true })
+        }
+      ),
+      flags.showAttribution && !isCode && /* @__PURE__ */ jsx21(SandboxAttribution, {})
+    ] }),
+    flags.showConsole && /* @__PURE__ */ jsx21(SandboxPreviewConsole, {})
+  ] }) });
+}
+function SandboxOverlay({
+  className,
+  style,
+  children
+}) {
+  const { overlay } = useSandboxPreviewCtx();
+  return /* @__PURE__ */ jsx21(
+    WebPreview,
+    {
+      defaultUrl: "",
+      className: cn(
+        "flex h-full w-full flex-col",
+        overlay && "fixed inset-0 z-50 bg-background",
+        className
+      ),
+      style,
+      children
+    }
+  );
+}
+function SandboxToolbar({ flags, view, onViewChange }) {
+  const {
+    inputValue,
+    setInputValue,
+    currentUrl,
+    history,
+    historyIndex,
+    viewport,
+    setViewport,
+    spinCount,
+    goBack,
+    goForward,
+    reload,
+    overlay,
+    toggleOverlay,
+    submitUrl,
+    download
+  } = useSandboxPreviewCtx();
+  const navItems = flags.showNavigation || flags.showReload ? /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    flags.showNavigation && /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      /* @__PURE__ */ jsx21(
+        WebPreviewNavigationButton,
+        {
+          tooltip: "Back",
+          disabled: historyIndex <= 0,
+          onClick: goBack,
+          children: /* @__PURE__ */ jsx21(ArrowLeftIcon2, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        WebPreviewNavigationButton,
+        {
+          tooltip: "Forward",
+          disabled: historyIndex >= history.length - 1,
+          onClick: goForward,
+          children: /* @__PURE__ */ jsx21(ArrowRightIcon2, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        Input,
+        {
+          className: "h-8 flex-1 text-sm",
+          placeholder: "Enter URL...",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              submitUrl();
+            } else if (e.key === "Escape") {
+              setInputValue(currentUrl);
+              e.target.blur();
+            }
+          }
+        }
+      )
+    ] }),
+    flags.showReload && /* @__PURE__ */ jsx21(WebPreviewNavigationButton, { tooltip: "Reload", onClick: reload, children: /* @__PURE__ */ jsx21(
+      RefreshCcwIcon2,
+      {
+        className: "size-4 motion-safe:animate-[spin_0.6s_linear_reverse_1]"
+      },
+      spinCount
+    ) })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col", children: [
+    navItems && /* @__PURE__ */ jsx21("div", { className: "md:hidden", children: /* @__PURE__ */ jsx21(WebPreviewNavigation, { children: navItems }) }),
+    /* @__PURE__ */ jsxs13(WebPreviewNavigation, { children: [
+      flags.showCodeEditor && /* @__PURE__ */ jsx21(
+        Tabs,
+        {
+          value: view,
+          onValueChange: (v) => onViewChange(v),
+          className: "mr-1",
+          children: /* @__PURE__ */ jsxs13(TabsList, { className: "h-8", children: [
+            /* @__PURE__ */ jsx21(TabsTrigger, { value: "web", "aria-label": "Web", className: "size-7 p-0", children: /* @__PURE__ */ jsx21(GlobeIcon, { className: "size-4" }) }),
+            /* @__PURE__ */ jsx21(TabsTrigger, { value: "code", "aria-label": "Code", className: "size-7 p-0", children: /* @__PURE__ */ jsx21(CodeIcon, { className: "size-4" }) })
+          ] })
+        }
+      ),
+      navItems && /* @__PURE__ */ jsx21("div", { className: "hidden md:contents", children: navItems }),
+      /* @__PURE__ */ jsx21("div", { className: "flex-1 md:hidden" }),
+      flags.showDeviceToggle && /* @__PURE__ */ jsx21(
+        WebPreviewNavigationButton,
+        {
+          tooltip: viewport === "desktop" ? "Mobile view" : "Desktop view",
+          onClick: () => setViewport(viewport === "desktop" ? "mobile" : "desktop"),
+          className: "hidden md:inline-flex",
+          children: viewport === "desktop" ? /* @__PURE__ */ jsx21(SmartphoneIcon2, { className: "size-4" }) : /* @__PURE__ */ jsx21(MonitorIcon2, { className: "size-4" })
+        }
+      ),
+      flags.showFullScreenToggle && /* @__PURE__ */ jsx21(
+        WebPreviewNavigationButton,
+        {
+          tooltip: overlay ? "Exit fullscreen" : "Fullscreen",
+          onClick: toggleOverlay,
+          children: overlay ? /* @__PURE__ */ jsx21(MinimizeIcon2, { className: "size-4" }) : /* @__PURE__ */ jsx21(MaximizeIcon2, { className: "size-4" })
+        }
+      ),
+      flags.showSnapshots && /* @__PURE__ */ jsxs13(Popover, { children: [
+        /* @__PURE__ */ jsx21(
+          PopoverTrigger,
+          {
+            render: /* @__PURE__ */ jsx21(WebPreviewNavigationButton, { tooltip: "Snapshots" }),
+            children: /* @__PURE__ */ jsx21(ClockFadingIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          PopoverContent,
+          {
+            align: "end",
+            className: "w-80 p-0 max-h-[26rem] flex flex-col overflow-hidden",
+            children: /* @__PURE__ */ jsx21(SandboxSnapshots, {})
+          }
+        )
+      ] }),
+      (flags.showExportFiles || flags.showSettings) && /* @__PURE__ */ jsxs13(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx21(
+          DropdownMenuTrigger,
+          {
+            render: /* @__PURE__ */ jsx21(WebPreviewNavigationButton, { tooltip: "More" }),
+            children: /* @__PURE__ */ jsx21(MoreVerticalIcon2, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx21(DropdownMenuContent, { align: "end", className: "min-w-40", children: flags.showExportFiles && /* @__PURE__ */ jsxs13(DropdownMenuItem, { onClick: download, children: [
+          /* @__PURE__ */ jsx21(DownloadIcon2, { className: "size-4" }),
+          "Download .zip"
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/sandbox.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Sandbox({ ui, className, style, ...providerProps }) {
+  return /* @__PURE__ */ jsx22(SandboxProvider, { ...providerProps, children: /* @__PURE__ */ jsx22(SandboxChrome, { ui, className, style }) });
+}
+export {
+  Sandbox,
+  SandboxAttribution,
+  SandboxChrome,
+  SandboxCodeEditor,
+  WebPreviewConsole as SandboxConsole,
+  SandboxFileTree,
+  SandboxIDE,
+  SandboxProvider,
+  useElementsContext,
+  useElementsContextOrThrow,
+  useSandbox
+};
+//# sourceMappingURL=index.js.map