@browsernode/elements 0.0.1

package/dist/editor.js

@@ -0,0 +1,990 @@
+// src/editor/sandbox-file-tree.tsx
+import { useEffect, useMemo as useMemo3, useState as useState3 } from "react";
+import { MenuIcon } from "lucide-react";
+
+// src/primitives/ui/collapsible.tsx
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import { jsx } from "react/jsx-runtime";
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({ ...props }) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props });
+}
+
+// src/primitives/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/editor/primitives/file-tree.tsx
+import {
+  ChevronRightIcon,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon
+} from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var noop = () => {
+};
+var FileTreeContext = createContext({
+  // 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] = useState(defaultExpanded);
+  const expandedPaths = controlledExpanded ?? internalExpanded;
+  const togglePath = useCallback(
+    (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 = useMemo(
+    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
+    [expandedPaths, onSelect, selectedPath, togglePath]
+  );
+  return /* @__PURE__ */ jsx2(FileTreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border bg-background font-mono text-sm",
+        className
+      ),
+      role: "tree",
+      ...props,
+      children: /* @__PURE__ */ jsx2("div", { className: "p-2", children })
+    }
+  ) });
+};
+var FileTreeIcon = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx2("span", { className: cn("shrink-0", className), ...props, children });
+var FileTreeName = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx2("span", { className: cn("truncate", className), ...props, children });
+var FileTreeFolderContext = createContext({
+  isExpanded: false,
+  name: "",
+  path: ""
+});
+var FileTreeFolder = ({
+  path,
+  name,
+  className,
+  children,
+  ...props
+}) => {
+  const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const handleOpenChange = useCallback(() => {
+    togglePath(path);
+  }, [togglePath, path]);
+  const handleSelect = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const folderContextValue = useMemo(
+    () => ({ isExpanded, name, path }),
+    [isExpanded, name, path]
+  );
+  return /* @__PURE__ */ jsx2(FileTreeFolderContext.Provider, { value: folderContextValue, children: /* @__PURE__ */ jsx2(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("", className),
+      role: "treeitem",
+      tabIndex: 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "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__ */ jsx2(CollapsibleTrigger, { render: /* @__PURE__ */ jsx2("button", { className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0", type: "button" }), children: /* @__PURE__ */ jsx2(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                "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__ */ jsx2(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx2(FolderOpenIcon, { className: "size-4 text-blue-500" }) : /* @__PURE__ */ jsx2(FolderIcon, { className: "size-4 text-blue-500" }) }),
+                    /* @__PURE__ */ jsx2(FileTreeName, { children: name })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(CollapsibleContent, { children: /* @__PURE__ */ jsx2("div", { className: "ml-4 border-l pl-2", children }) })
+      ]
+    }
+  ) }) });
+};
+var FileTreeFileContext = createContext({
+  name: "",
+  path: ""
+});
+var FileTreeFile = ({
+  path,
+  name,
+  icon,
+  className,
+  children,
+  ...props
+}) => {
+  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const isSelected = selectedPath === path;
+  const handleClick = useCallback(() => {
+    onSelect?.(path);
+  }, [onSelect, path]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        onSelect?.(path);
+      }
+    },
+    [onSelect, path]
+  );
+  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+  return /* @__PURE__ */ jsx2(FileTreeFileContext.Provider, { value: fileContextValue, children: /* @__PURE__ */ jsx2(
+    "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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("span", { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx2(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx2(FileIcon, { className: "size-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx2(FileTreeName, { children: name })
+      ] })
+    }
+  ) });
+};
+
+// src/provider/sandbox-provider.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useMemo as useMemo2,
+  useState as useState2
+} 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 as jsx3 } from "react/jsx-runtime";
+var ElementsContext = createContext2(null);
+function useElementsContext() {
+  return useContext2(ElementsContext);
+}
+
+// src/primitives/ui/button.tsx
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { jsx as jsx4 } 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__ */ jsx4(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/primitives/ui/popover.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx5(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx5(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
+    PopoverPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx5(
+        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 jsx6 } 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__ */ jsx6(FileTreeFolder, { name: entry.name, path: entry.path, children: renderTree(entry) }, entry.path) : /* @__PURE__ */ jsx6(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 Fragment2, jsx as jsx7, jsxs as jsxs2 } 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] = useState3(
+    () => sandbox ? sandbox.fs.list() : []
+  );
+  const [open, setOpen] = useState3(false);
+  const selectedPath = elementsCtx?.selectedPath ?? null;
+  const setSelectedPath = elementsCtx?.setSelectedPath;
+  useEffect(() => {
+    if (!sandbox) return;
+    setFiles(sandbox.fs.list());
+    return sandbox.fs.on("change", () => setFiles(sandbox.fs.list()));
+  }, [sandbox]);
+  const tree = useMemo3(() => buildTree(files), [files]);
+  const handleSelect = (path) => {
+    if (!isFile(path, files)) return;
+    setSelectedPath?.(path);
+    onSelect?.(path);
+    if (display === "dropdown") setOpen(false);
+  };
+  const treeNode = /* @__PURE__ */ jsx7(
+    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__ */ jsx7(MenuIcon, { className: "size-4" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx7(MenuIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx7("span", { children: "Select a file" })
+    ] });
+    return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx7(
+        PopoverTrigger,
+        {
+          render: /* @__PURE__ */ jsx7(
+            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__ */ jsx7(
+        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 useCallback3,
+  useEffect as useEffect2,
+  useMemo as useMemo5,
+  useRef,
+  useState as useState4
+} from "react";
+import { MoreHorizontalIcon } from "lucide-react";
+import { keymap } from "@codemirror/view";
+
+// src/editor/primitives/code-editor.tsx
+import { useMemo as useMemo4 } 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 jsx8 } 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 = useMemo4(() => {
+    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__ */ jsx8(
+    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/dropdown-menu.tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { ChevronRightIcon as ChevronRightIcon2, CheckIcon } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx9(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx9(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+    MenuPrimitive.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx9(
+        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__ */ jsx9(
+    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/primitives/ui/loading.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs4(
+  "svg",
+  {
+    height: size,
+    strokeLinejoin: "round",
+    style: { color: "currentcolor" },
+    viewBox: "0 0 16 16",
+    width: size,
+    children: [
+      /* @__PURE__ */ jsx10("title", { children: "Loader" }),
+      /* @__PURE__ */ jsxs4("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ jsx10("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M8 16V12",
+            opacity: "0.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M3.29773 1.52783L5.64887 4.7639",
+            opacity: "0.9",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M12.7023 1.52783L10.3511 4.7639",
+            opacity: "0.1",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M12.7023 14.472L10.3511 11.236",
+            opacity: "0.4",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M3.29773 14.472L5.64887 11.236",
+            opacity: "0.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M15.6085 5.52783L11.8043 6.7639",
+            opacity: "0.2",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M0.391602 10.472L4.19583 9.23598",
+            opacity: "0.7",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M15.6085 10.4722L11.8043 9.2361",
+            opacity: "0.3",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "path",
+          {
+            d: "M0.391602 5.52783L4.19583 6.7639",
+            opacity: "0.8",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsx10("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx10("rect", { fill: "white", height: "16", width: "16" }) }) })
+    ]
+  }
+);
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx10(
+  "div",
+  {
+    className: cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx10(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 Fragment3, jsx as jsx11, jsxs as jsxs5 } 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] = useState4(null);
+  const [buffer, setBuffer] = useState4("");
+  const [loadingPath, setLoadingPath] = useState4(null);
+  const [saveStatus, setSaveStatus] = useState4("idle");
+  const loadedPathRef = useRef(null);
+  const savedTimerRef = useRef(null);
+  const sandboxRef = useRef(sandbox);
+  const selectedPathRef = useRef(selectedPath);
+  const bufferRef = useRef(buffer);
+  const dirtyRef = useRef(false);
+  sandboxRef.current = sandbox;
+  selectedPathRef.current = selectedPath;
+  bufferRef.current = buffer;
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    return () => {
+      if (savedTimerRef.current) {
+        clearTimeout(savedTimerRef.current);
+        savedTimerRef.current = null;
+      }
+    };
+  }, [selectedPath]);
+  const handleEditorChange = useCallback3(
+    (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 = useCallback3(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 = useCallback3(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 = useMemo5(
+    () => {
+      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__ */ jsx11("span", { className: "font-mono", title: selectedPath, children: filename }) : headerStartSlot ? null : /* @__PURE__ */ jsx11("span", { children: "Select a file" });
+  return /* @__PURE__ */ jsxs5("div", { className: `flex h-full w-full flex-col ${className ?? ""}`.trim(), children: [
+    !hideHeader && /* @__PURE__ */ jsxs5("div", { className: "flex flex-none items-center justify-between border-b px-3 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+        headerStartSlot,
+        headerLabel
+      ] }),
+      selectedPath && !readOnly && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx11(
+          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__ */ jsxs5(Fragment3, { children: [
+              /* @__PURE__ */ jsx11(Loader, { size: 14 }),
+              "Saving..."
+            ] }) : "Save"
+          }
+        ),
+        /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx11(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx11(
+                Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  "aria-label": "File actions",
+                  className: "size-10 p-0 md:size-8"
+                }
+              ),
+              children: /* @__PURE__ */ jsx11(MoreHorizontalIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx11(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx11(
+            DropdownMenuItem,
+            {
+              onClick: () => void deleteFile(),
+              className: "text-destructive focus:text-destructive",
+              children: "Delete"
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: "flex-1 min-h-0 overflow-auto", children: selectedPath ? /* @__PURE__ */ jsx11(
+      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__ */ jsx11("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 jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function SandboxIDE({
+  sandbox,
+  defaultExpanded,
+  hideTree = false,
+  hideViewer = false,
+  hideBorder = false,
+  className,
+  style,
+  ...codeProps
+}) {
+  if (hideViewer) {
+    return /* @__PURE__ */ jsx12(
+      SandboxFileTree,
+      {
+        sandbox,
+        defaultExpanded,
+        className
+      }
+    );
+  }
+  if (hideTree) {
+    return /* @__PURE__ */ jsx12(
+      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__ */ jsx12(
+    SandboxFileTree,
+    {
+      sandbox,
+      defaultExpanded,
+      display: "dropdown",
+      className: "md:hidden -ml-1"
+    }
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: `${frameClasses} ${className ?? ""}`.trim(), style, children: [
+    /* @__PURE__ */ jsx12("div", { className: "hidden md:block w-64 shrink-0 overflow-auto border-r", children: /* @__PURE__ */ jsx12(SandboxFileTree, { sandbox, defaultExpanded }) }),
+    /* @__PURE__ */ jsx12("div", { className: "flex-1 min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx12(
+      SandboxCodeEditor,
+      {
+        sandbox,
+        headerStartSlot: mobileTrigger,
+        ...codeProps
+      }
+    ) })
+  ] });
+}
+export {
+  CodeEditor,
+  FileTree,
+  FileTreeFile,
+  FileTreeFolder,
+  SandboxCodeEditor,
+  SandboxFileTree,
+  SandboxIDE
+};
+//# sourceMappingURL=editor.js.map