opencami 1.0.0

package/dist/server/assets/file-explorer-screen-DJXPEG_J.js

@@ -0,0 +1,2450 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useMemo, useCallback, useEffect, useState, useRef } from "react";
+import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Home09Icon, SidebarLeft01Icon, ArrowLeft01Icon, Settings01Icon, ArrowRight01Icon, Home02Icon, Menu01Icon, GridViewIcon, ArrowUp01Icon, ArrowDown01Icon, Upload04Icon, FolderAddIcon, FolderOpenIcon, Download04Icon, FileEditIcon, Edit02Icon, Delete02Icon, Folder01Icon, Image01Icon, Video01Icon, MusicNote01Icon, Archive01Icon, Doc01Icon, CodeIcon, File01Icon, FloppyDiskIcon, Cancel01Icon } from "@hugeicons/core-free-icons";
+import { motion, AnimatePresence } from "motion/react";
+import { T as TooltipProvider, h as TooltipRoot, i as TooltipTrigger, j as TooltipContent, M as MenuRoot, e as MenuTrigger, f as MenuContent, g as MenuItem, D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose, k as chatUiQueryKey, l as getChatUiState, s as setChatUiState } from "./menu-D6n4DB0U.js";
+import { c as cn, b as buttonVariants, B as Button } from "./button-DtQ3rV1m.js";
+import { Link } from "@tanstack/react-router";
+import { create } from "zustand";
+import "@base-ui/react/tooltip";
+import "@base-ui/react/dialog";
+import "@base-ui/react/menu";
+import "@base-ui/react/merge-props";
+import "@base-ui/react/use-render";
+import "class-variance-authority";
+import "clsx";
+import "tailwind-merge";
+function WebClawIconBig({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "80",
+      height: "80",
+      viewBox: "0 0 80 80",
+      fill: "none",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "80",
+            height: "80",
+            fill: "currentColor",
+            className: "text-transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M61.9624 45.5729C62.5862 44.3371 63.0907 43.3377 63.4782 41.9826C69.8221 28.8286 70.5847 14.0975 67.1723 4.32469C65.8317 0.249835 62.7688 0.254311 62.6374 3.58605C61.355 12.189 58.9061 17.6275 57.1756 21.0554C52.8087 29.7058 45.9949 37.7278 39.3706 42.7305C28.6217 50.8021 25.0716 44.614 24.3711 37.8823C23.8822 32.1203 24.7206 25.5721 26.24 18.2889C27.102 15.3261 24.3944 13.9592 22.5223 16.4122C20.4062 19.3487 18.5586 22.4209 17.1838 25.7318C12.9928 33.4462 10.3896 45.3332 11.4505 57.6273C12.2296 63.5357 13.1688 68.4057 14.1079 73.2757C15.2695 79.0941 19.1598 79.5073 24.3117 78.0088C39.7921 74.0789 54.143 58.872 59.7093 49.1011C60.7255 48.0229 61.3494 46.7872 61.9624 45.5729Z",
+            fill: "currentColor",
+            className: "text-primary-950"
+          }
+        )
+      ]
+    }
+  );
+}
+const useFileExplorerState = create((set, get) => ({
+  currentPath: "/",
+  viewMode: "list",
+  sortBy: "name",
+  sortAsc: true,
+  selectedFiles: /* @__PURE__ */ new Set(),
+  navigateTo: (path) => {
+    set({
+      currentPath: path,
+      selectedFiles: /* @__PURE__ */ new Set()
+      // Clear selection when navigating
+    });
+  },
+  setViewMode: (mode) => {
+    set({ viewMode: mode });
+  },
+  setSortBy: (sortBy) => {
+    const currentSortBy = get().sortBy;
+    set({
+      sortBy,
+      // If switching to the same sort, toggle direction
+      sortAsc: currentSortBy === sortBy ? !get().sortAsc : true
+    });
+  },
+  toggleSort: () => {
+    set((state) => ({ sortAsc: !state.sortAsc }));
+  },
+  selectFile: (path) => {
+    set((state) => {
+      const newSelection = new Set(state.selectedFiles);
+      newSelection.add(path);
+      return { selectedFiles: newSelection };
+    });
+  },
+  deselectFile: (path) => {
+    set((state) => {
+      const newSelection = new Set(state.selectedFiles);
+      newSelection.delete(path);
+      return { selectedFiles: newSelection };
+    });
+  },
+  clearSelection: () => {
+    set({ selectedFiles: /* @__PURE__ */ new Set() });
+  },
+  toggleFileSelection: (path) => {
+    const { selectedFiles, selectFile, deselectFile } = get();
+    if (selectedFiles.has(path)) {
+      deselectFile(path);
+    } else {
+      selectFile(path);
+    }
+  }
+}));
+function useReducedMotion$1() {
+  return useMemo(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }, []);
+}
+function FilesSidebarComponent({
+  isCollapsed,
+  onToggleCollapse,
+  onSelectAction
+}) {
+  const { navigateTo, currentPath } = useFileExplorerState();
+  const reduceMotion = useReducedMotion$1();
+  const transition = useMemo(() => ({
+    duration: reduceMotion ? 0 : 0.15,
+    ease: isCollapsed ? "easeIn" : "easeOut"
+  }), [isCollapsed, reduceMotion]);
+  const handleNavigate = useCallback((path) => {
+    navigateTo(path);
+  }, [navigateTo]);
+  const handleKeyDown = useCallback((e, action) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      action();
+    }
+  }, []);
+  const quickAccessItems = useMemo(() => [
+    {
+      path: "/",
+      icon: Home09Icon,
+      label: "Home",
+      id: "home"
+    }
+  ], []);
+  const asideProps = useMemo(() => ({
+    className: "border-r border-primary-200 h-full overflow-hidden bg-primary-100 flex flex-col"
+  }), []);
+  const collapsedWidth = 48;
+  const expandedWidth = 300;
+  return /* @__PURE__ */ jsxs(
+    motion.aside,
+    {
+      initial: false,
+      animate: {
+        width: reduceMotion ? isCollapsed ? collapsedWidth : expandedWidth : void 0
+      },
+      style: {
+        width: reduceMotion ? void 0 : isCollapsed ? collapsedWidth : expandedWidth
+      },
+      transition,
+      className: asideProps.className,
+      role: "navigation",
+      "aria-label": "File explorer navigation",
+      children: [
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            layout: true,
+            transition: { layout: transition },
+            className: cn("flex items-center h-12 px-2 justify-between"),
+            children: [
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed ? /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition,
+                  children: /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      to: "/new",
+                      className: cn(
+                        buttonVariants({ variant: "ghost", size: "sm" }),
+                        "w-full pl-1.5 justify-start",
+                        "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                        "touch-manipulation"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(WebClawIconBig, { className: "size-5 rounded-sm", "aria-hidden": "true" }),
+                        /* @__PURE__ */ jsx("span", { children: "WebClaw" })
+                      ]
+                    }
+                  )
+                }
+              ) : null }),
+              /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+                /* @__PURE__ */ jsx(
+                  TooltipTrigger,
+                  {
+                    onClick: onToggleCollapse,
+                    onKeyDown: (e) => handleKeyDown(e, onToggleCollapse),
+                    render: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "icon-sm",
+                        variant: "ghost",
+                        "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                        className: cn(
+                          "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                          "touch-manipulation"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          HugeiconsIcon,
+                          {
+                            icon: SidebarLeft01Icon,
+                            size: 20,
+                            strokeWidth: 1.5,
+                            "aria-hidden": "true"
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isCollapsed ? "Expand sidebar" : "Collapse sidebar" })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "px-2 mb-4", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            transition: { layout: transition },
+            className: "w-full",
+            children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  to: "/chat/main",
+                  className: cn(
+                    buttonVariants({ variant: "ghost", size: "sm" }),
+                    "w-full pl-1.5 justify-start",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                    "touch-manipulation"
+                  ),
+                  onClick: onSelectAction,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      HugeiconsIcon,
+                      {
+                        icon: ArrowLeft01Icon,
+                        size: 20,
+                        strokeWidth: 1.5,
+                        className: "min-w-5",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !isCollapsed ? /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        exit: { opacity: 0 },
+                        transition,
+                        className: "overflow-hidden whitespace-nowrap",
+                        children: "Back to Chat"
+                      }
+                    ) : null })
+                  ]
+                }
+              ) }),
+              isCollapsed ? /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Back to Chat" }) : null
+            ] }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !isCollapsed ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition,
+            className: "absolute inset-0 pt-0 flex flex-col w-[300px] min-h-0",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 px-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-primary-700 mb-3 px-1.5", children: "Quick Access" }) }),
+              /* @__PURE__ */ jsx("nav", { className: "space-y-1", role: "list", "aria-label": "Quick access folders", children: quickAccessItems.map((item) => /* @__PURE__ */ jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleNavigate(item.path),
+                  onKeyDown: (e) => handleKeyDown(e, () => handleNavigate(item.path)),
+                  "aria-current": currentPath === item.path ? "page" : void 0,
+                  className: cn(
+                    "w-full pl-1.5 justify-start text-primary-600 hover:text-primary-900",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                    "touch-manipulation",
+                    currentPath === item.path && "bg-primary-200 text-primary-900 font-medium"
+                  ),
+                  "aria-label": `Navigate to ${item.label}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      HugeiconsIcon,
+                      {
+                        icon: item.icon,
+                        size: 20,
+                        strokeWidth: 1.5,
+                        className: "min-w-5",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "overflow-hidden whitespace-nowrap min-w-0 truncate", children: item.label })
+                  ]
+                }
+              ) }, item.id)) })
+            ] })
+          },
+          "content"
+        ) : (
+          // Collapsed quick access
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition,
+              className: "px-2 space-y-1",
+              children: quickAccessItems.map((item) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+                /* @__PURE__ */ jsx(
+                  TooltipTrigger,
+                  {
+                    onClick: () => handleNavigate(item.path),
+                    onKeyDown: (e) => handleKeyDown(e, () => handleNavigate(item.path)),
+                    render: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "icon-sm",
+                        variant: "ghost",
+                        "aria-current": currentPath === item.path ? "page" : void 0,
+                        "aria-label": `Navigate to ${item.label}`,
+                        className: cn(
+                          "w-full text-primary-600 hover:text-primary-900",
+                          "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                          "touch-manipulation",
+                          currentPath === item.path && "bg-primary-200 text-primary-900"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          HugeiconsIcon,
+                          {
+                            icon: item.icon,
+                            size: 20,
+                            strokeWidth: 1.5,
+                            "aria-hidden": "true"
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: item.label })
+              ] }) }, item.id))
+            },
+            "collapsed-content"
+          )
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-3 border-t border-primary-200 bg-primary-100", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            transition: { layout: transition },
+            className: "w-full",
+            children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: isCollapsed ? "icon-sm" : "sm",
+                  className: cn(
+                    isCollapsed ? "w-full" : "w-full justify-start pl-1.5",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                    "touch-manipulation"
+                  ),
+                  "aria-label": "Settings",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      HugeiconsIcon,
+                      {
+                        icon: Settings01Icon,
+                        size: 20,
+                        strokeWidth: 1.5,
+                        className: "min-w-5",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !isCollapsed ? /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        exit: { opacity: 0 },
+                        transition,
+                        className: "overflow-hidden whitespace-nowrap",
+                        children: "Settings"
+                      }
+                    ) : null })
+                  ]
+                }
+              ) }),
+              isCollapsed ? /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Settings" }) : null
+            ] }) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function areFilesSidebarPropsEqual(prevProps, nextProps) {
+  if (prevProps.isCollapsed !== nextProps.isCollapsed) return false;
+  return true;
+}
+const MemoizedFilesSidebar = memo(FilesSidebarComponent, areFilesSidebarPropsEqual);
+function FileBreadcrumb({ path }) {
+  const { navigateTo } = useFileExplorerState();
+  const segments = path === "/" ? [] : path.split("/").filter(Boolean);
+  const breadcrumbs = [
+    { name: "Home", path: "/" },
+    ...segments.map((segment, index) => ({
+      name: segment,
+      path: "/" + segments.slice(0, index + 1).join("/")
+    }))
+  ];
+  const handleNavigate = useCallback((breadcrumbPath) => {
+    navigateTo(breadcrumbPath);
+  }, [navigateTo]);
+  const handleKeyDown = useCallback((e, breadcrumbPath) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      navigateTo(breadcrumbPath);
+    }
+  }, [navigateTo]);
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "File navigation", className: "text-sm text-primary-600", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+    index > 0 ? /* @__PURE__ */ jsx(
+      HugeiconsIcon,
+      {
+        icon: ArrowRight01Icon,
+        size: 16,
+        strokeWidth: 1.5,
+        className: "text-primary-400",
+        "aria-hidden": "true"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleNavigate(crumb.path),
+        onKeyDown: (e) => handleKeyDown(e, crumb.path),
+        "aria-current": index === breadcrumbs.length - 1 ? "page" : void 0,
+        className: cn(
+          "flex items-center gap-1.5 rounded-md px-2 py-1",
+          "transition-colors duration-150 ease-out",
+          "hover:bg-primary-100 hover:text-primary-900",
+          "focus-visible:bg-primary-100 focus-visible:text-primary-900",
+          "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+          "touch-manipulation",
+          index === breadcrumbs.length - 1 ? "text-primary-900 font-medium" : "text-primary-600"
+        ),
+        children: [
+          index === 0 ? /* @__PURE__ */ jsx(
+            HugeiconsIcon,
+            {
+              icon: Home02Icon,
+              size: 16,
+              strokeWidth: 1.5,
+              "aria-hidden": "true"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: crumb.name })
+        ]
+      }
+    )
+  ] }, crumb.path)) }) });
+}
+const sortOptions = [
+  { label: "Name", value: "name" },
+  { label: "Size", value: "size" },
+  { label: "Modified", value: "modified" }
+];
+function FileToolbar({ onUpload, onCreateFolder }) {
+  const {
+    viewMode,
+    sortBy,
+    sortAsc,
+    setViewMode,
+    setSortBy,
+    toggleSort
+  } = useFileExplorerState();
+  const handleListView = useCallback(() => {
+    setViewMode("list");
+  }, [setViewMode]);
+  const handleGridView = useCallback(() => {
+    setViewMode("grid");
+  }, [setViewMode]);
+  const handleSortChange = useCallback((newSortBy) => {
+    setSortBy(newSortBy);
+  }, [setSortBy]);
+  const handleKeyDown = useCallback((e, action) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      action();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center border border-primary-200 rounded-lg overflow-hidden",
+          role: "group",
+          "aria-label": "View mode",
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: viewMode === "list" ? "default" : "ghost",
+                onClick: handleListView,
+                onKeyDown: (e) => handleKeyDown(e, handleListView),
+                "aria-label": "Switch to list view",
+                "aria-pressed": viewMode === "list",
+                className: cn(
+                  "rounded-none border-0",
+                  "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                  "touch-manipulation"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  HugeiconsIcon,
+                  {
+                    icon: Menu01Icon,
+                    size: 18,
+                    strokeWidth: 1.5,
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: viewMode === "grid" ? "default" : "ghost",
+                onClick: handleGridView,
+                onKeyDown: (e) => handleKeyDown(e, handleGridView),
+                "aria-label": "Switch to grid view",
+                "aria-pressed": viewMode === "grid",
+                className: cn(
+                  "rounded-none border-0 border-l border-primary-200",
+                  "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                  "touch-manipulation"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  HugeiconsIcon,
+                  {
+                    icon: GridViewIcon,
+                    size: 18,
+                    strokeWidth: 1.5,
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(MenuRoot, { children: [
+        /* @__PURE__ */ jsx(
+          MenuTrigger,
+          {
+            render: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: cn(
+                  "gap-1",
+                  "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                  "touch-manipulation"
+                ),
+                "aria-label": `Sort by ${sortOptions.find((opt) => opt.value === sortBy)?.label}, ${sortAsc ? "ascending" : "descending"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "Sort: ",
+                    sortOptions.find((opt) => opt.value === sortBy)?.label
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    HugeiconsIcon,
+                    {
+                      icon: sortAsc ? ArrowUp01Icon : ArrowDown01Icon,
+                      size: 16,
+                      strokeWidth: 1.5,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(MenuContent, { side: "bottom", align: "start", children: [
+          sortOptions.map((option) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => handleSortChange(option.value),
+              className: cn(
+                sortBy === option.value && "bg-primary-100 text-primary-900",
+                "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none"
+              ),
+              "aria-current": sortBy === option.value ? "true" : "false",
+              children: option.label
+            },
+            option.value
+          )),
+          /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              onClick: toggleSort,
+              className: "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+              children: [
+                /* @__PURE__ */ jsx(
+                  HugeiconsIcon,
+                  {
+                    icon: sortAsc ? ArrowDown01Icon : ArrowUp01Icon,
+                    size: 16,
+                    strokeWidth: 1.5,
+                    "aria-hidden": "true"
+                  }
+                ),
+                sortAsc ? "Sort Descending" : "Sort Ascending"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onUpload,
+          onKeyDown: (e) => handleKeyDown(e, onUpload),
+          className: cn(
+            "gap-2",
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation"
+          ),
+          "aria-label": "Upload files",
+          children: [
+            /* @__PURE__ */ jsx(
+              HugeiconsIcon,
+              {
+                icon: Upload04Icon,
+                size: 18,
+                strokeWidth: 1.5,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: "Upload" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onCreateFolder,
+          onKeyDown: (e) => handleKeyDown(e, onCreateFolder),
+          className: cn(
+            "gap-2",
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation"
+          ),
+          "aria-label": "Create new folder",
+          children: [
+            /* @__PURE__ */ jsx(
+              HugeiconsIcon,
+              {
+                icon: FolderAddIcon,
+                size: 18,
+                strokeWidth: 1.5,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: "New Folder" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+const fileQueryKeys = {
+  all: ["files"],
+  listing: (path) => ["files", "listing", path],
+  content: (path) => ["files", "content", path]
+};
+function useFileContent(path) {
+  return useQuery({
+    queryKey: fileQueryKeys.content(path || ""),
+    queryFn: async () => {
+      const response = await fetch(`/api/files/read?path=${encodeURIComponent(path)}`);
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Failed to read file" }));
+        throw new Error(error.error || "Failed to read file");
+      }
+      return response.json();
+    },
+    enabled: !!path,
+    staleTime: 30 * 1e3,
+    // 30 seconds
+    gcTime: 5 * 60 * 1e3
+  });
+}
+function useFileSave() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ path, content }) => {
+      const response = await fetch("/api/files/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path, content })
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Failed to save file" }));
+        throw new Error(error.error || "Failed to save file");
+      }
+      return response.json();
+    },
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: fileQueryKeys.content(variables.path)
+      });
+      const parentPath = variables.path.split("/").slice(0, -1).join("/") || "/";
+      void queryClient.invalidateQueries({
+        queryKey: fileQueryKeys.listing(parentPath)
+      });
+    }
+  });
+}
+function useFileListing(path) {
+  return useQuery({
+    queryKey: fileQueryKeys.listing(path),
+    queryFn: async () => {
+      const response = await fetch(`/api/files/list?path=${encodeURIComponent(path)}`);
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(`Failed to load files: ${error}`);
+      }
+      return response.json();
+    },
+    staleTime: 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: 10 * 60 * 1e3,
+    // 10 minutes
+    retry: 3,
+    onError: (error) => {
+      console.error("Failed to load file listing:", error);
+    }
+  });
+}
+function useFileDownload() {
+  const urls = /* @__PURE__ */ new Set();
+  useEffect(() => {
+    return () => {
+      urls.forEach((url) => URL.revokeObjectURL(url));
+      urls.clear();
+    };
+  }, []);
+  return useMutation({
+    mutationFn: async (filePath) => {
+      const response = await fetch(`/api/files/download?path=${encodeURIComponent(filePath)}`);
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(`Download failed: ${error}`);
+      }
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      urls.add(url);
+      const filename = filePath.split("/").pop() || "download";
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      setTimeout(() => {
+        if (urls.has(url)) {
+          URL.revokeObjectURL(url);
+          urls.delete(url);
+        }
+      }, 100);
+    },
+    onError: (error) => {
+      console.error("Download failed:", error);
+    }
+  });
+}
+function useFileUpload() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ files, path }) => {
+      const results = [];
+      for (let i = 0; i < files.length; i++) {
+        const formData = new FormData();
+        formData.append("path", path);
+        formData.append("file", files[i]);
+        const response = await fetch("/api/files/upload", {
+          method: "POST",
+          body: formData
+        });
+        if (!response.ok) {
+          const error = await response.text();
+          throw new Error(`Upload failed for ${files[i].name}: ${error}`);
+        }
+        results.push(await response.json());
+      }
+      return results;
+    },
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: fileQueryKeys.listing(variables.path)
+      });
+    },
+    onError: (error) => {
+      console.error("Upload failed:", error);
+    }
+  });
+}
+function useFileDelete() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (filePath) => {
+      const response = await fetch(`/api/files/delete?path=${encodeURIComponent(filePath)}`, {
+        method: "DELETE"
+      });
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(`Delete failed: ${error}`);
+      }
+      return response.json();
+    },
+    onSuccess: (_, filePath) => {
+      const parentPath = filePath.split("/").slice(0, -1).join("/") || "/";
+      void queryClient.invalidateQueries({
+        queryKey: fileQueryKeys.listing(parentPath)
+      });
+    },
+    onError: (error) => {
+      console.error("Delete failed:", error);
+    }
+  });
+}
+function useCreateFolder() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ path, name }) => {
+      const response = await fetch("/api/files/mkdir", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: `${path}/${name}` })
+      });
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(`Create folder failed: ${error}`);
+      }
+      return response.json();
+    },
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: fileQueryKeys.listing(variables.path)
+      });
+    },
+    onError: (error) => {
+      console.error("Create folder failed:", error);
+    }
+  });
+}
+function useFileRename() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ oldPath, newName }) => {
+      const parentPath = oldPath.split("/").slice(0, -1).join("/");
+      const newPath = `${parentPath}/${newName}`;
+      const response = await fetch("/api/files/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ src: oldPath, dst: newPath })
+      });
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(`Rename failed: ${error}`);
+      }
+      return response.json();
+    },
+    onSuccess: (_, variables) => {
+      const parentPath = variables.oldPath.split("/").slice(0, -1).join("/") || "/";
+      void queryClient.invalidateQueries({
+        queryKey: fileQueryKeys.listing(parentPath)
+      });
+    },
+    onError: (error) => {
+      console.error("Rename failed:", error);
+    }
+  });
+}
+const EDITABLE_EXTENSIONS$1 = /* @__PURE__ */ new Set([
+  "txt",
+  "md",
+  "log",
+  "json",
+  "xml",
+  "yaml",
+  "yml",
+  "csv",
+  "ini",
+  "conf",
+  "cfg",
+  "js",
+  "ts",
+  "jsx",
+  "tsx",
+  "py",
+  "java",
+  "cpp",
+  "c",
+  "h",
+  "css",
+  "html",
+  "htm",
+  "php",
+  "rb",
+  "go",
+  "rs",
+  "sh",
+  "bash",
+  "zsh",
+  "toml",
+  "env",
+  "gitignore",
+  "dockerfile",
+  "makefile",
+  "sql",
+  "graphql",
+  "svelte",
+  "vue",
+  "scss",
+  "less"
+]);
+function FileContextMenu({ item, children, onOpenFile }) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [newName, setNewName] = useState(item.name);
+  const [renameError, setRenameError] = useState("");
+  const renameInputRef = useRef(null);
+  const { navigateTo } = useFileExplorerState();
+  const downloadMutation = useFileDownload();
+  const deleteMutation = useFileDelete();
+  const renameMutation = useFileRename();
+  const handleAction = useCallback((action) => {
+    switch (action) {
+      case "open":
+        if (item.isDir) {
+          navigateTo(item.path);
+        }
+        break;
+      case "edit":
+        if (onOpenFile) {
+          onOpenFile(item.path);
+        }
+        break;
+      case "download":
+        if (!item.isDir) {
+          downloadMutation.mutate(item.path);
+        }
+        break;
+      case "rename":
+        setNewName(item.name);
+        setRenameError("");
+        setRenameDialogOpen(true);
+        break;
+      case "delete":
+        setDeleteDialogOpen(true);
+        break;
+    }
+  }, [item, downloadMutation, navigateTo]);
+  const handleContextMenu = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenuPosition({ x: e.clientX, y: e.clientY });
+    setMenuOpen(true);
+  }, []);
+  const confirmRename = useCallback(async () => {
+    if (!newName || newName === item.name) {
+      setRenameDialogOpen(false);
+      return;
+    }
+    setRenameError("");
+    try {
+      await renameMutation.mutateAsync({
+        oldPath: item.path,
+        newName: newName.trim()
+      });
+      setRenameDialogOpen(false);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to rename";
+      setRenameError(errorMessage);
+    }
+  }, [newName, item, renameMutation]);
+  const confirmDelete = useCallback(async () => {
+    try {
+      await deleteMutation.mutateAsync(item.path);
+      setDeleteDialogOpen(false);
+    } catch (error) {
+      console.error("Delete failed:", error);
+    }
+  }, [item.path, deleteMutation]);
+  const handleRenameKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      confirmRename();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setRenameDialogOpen(false);
+    }
+  }, [confirmRename]);
+  const handleRenameInputChange = useCallback((e) => {
+    setNewName(e.target.value);
+    if (renameError) {
+      setRenameError("");
+    }
+  }, [renameError]);
+  useEffect(() => {
+    if (renameDialogOpen && renameInputRef.current) {
+      const input = renameInputRef.current;
+      input.focus();
+      if (!item.isDir && item.extension) {
+        const nameWithoutExt = item.name.replace(new RegExp(`\\.${item.extension}$`), "");
+        input.setSelectionRange(0, nameWithoutExt.length);
+      } else {
+        input.select();
+      }
+    }
+  }, [renameDialogOpen, item]);
+  const isValidRename = newName.trim().length > 0 && !/[<>:"/\\|?*]/.test(newName) && !newName.includes("..") && newName !== item.name;
+  const getDownloadText = () => {
+    return downloadMutation.isPending ? "Downloading…" : "Download";
+  };
+  const getRenameText = () => {
+    return renameMutation.isPending ? "Renaming…" : "Rename";
+  };
+  const getDeleteText = () => {
+    return deleteMutation.isPending ? "Deleting…" : "Delete";
+  };
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handleClose = () => setMenuOpen(false);
+    const handleEsc = (e) => {
+      if (e.key === "Escape") setMenuOpen(false);
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("click", handleClose);
+      document.addEventListener("contextmenu", handleClose);
+      document.addEventListener("keydown", handleEsc);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("click", handleClose);
+      document.removeEventListener("contextmenu", handleClose);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  }, [menuOpen]);
+  const handleMenuItemClick = useCallback((action) => {
+    setMenuOpen(false);
+    handleAction(action);
+  }, [handleAction]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { onContextMenu: handleContextMenu, children }),
+    menuOpen ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50",
+        "aria-modal": "true",
+        role: "dialog",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "fixed min-w-[140px] rounded-lg bg-primary-50 p-1 text-sm text-primary-900 shadow-lg outline outline-primary-900/10 z-50",
+            style: {
+              left: menuPosition.x,
+              top: menuPosition.y
+            },
+            role: "menu",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              item.isDir ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: () => handleMenuItemClick("open"),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-primary-900",
+                    "hover:bg-primary-100 select-none font-[450]",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(HugeiconsIcon, { icon: FolderOpenIcon, size: 16, strokeWidth: 1.5, "aria-hidden": "true" }),
+                    "Open"
+                  ]
+                }
+              ) : null,
+              !item.isDir ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: () => handleMenuItemClick("download"),
+                  disabled: downloadMutation.isPending,
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-primary-900",
+                    "hover:bg-primary-100 select-none font-[450]",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Download04Icon, size: 16, strokeWidth: 1.5, "aria-hidden": "true" }),
+                    getDownloadText()
+                  ]
+                }
+              ) : null,
+              !item.isDir && EDITABLE_EXTENSIONS$1.has(item.extension.toLowerCase()) ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: () => handleMenuItemClick("edit"),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-primary-900",
+                    "hover:bg-primary-100 select-none font-[450]",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(HugeiconsIcon, { icon: FileEditIcon, size: 16, strokeWidth: 1.5, "aria-hidden": "true" }),
+                    "Edit"
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: () => handleMenuItemClick("rename"),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-primary-900",
+                    "hover:bg-primary-100 select-none font-[450]",
+                    "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Edit02Icon, size: 16, strokeWidth: 1.5, "aria-hidden": "true" }),
+                    "Rename"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: () => handleMenuItemClick("delete"),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+                    "text-red-600 hover:bg-red-50 select-none font-[450]",
+                    "focus-visible:ring-2 focus-visible:ring-red-300 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Delete02Icon, size: 16, strokeWidth: 1.5, "aria-hidden": "true" }),
+                    "Delete"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(DialogRoot, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "mb-2", children: [
+        "Rename ",
+        item.isDir ? "Folder" : "File"
+      ] }),
+      /* @__PURE__ */ jsxs(DialogDescription, { className: "mb-4", children: [
+        'Enter a new name for "',
+        item.name,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: "rename-input",
+            className: "block text-sm font-medium text-primary-900 mb-2",
+            children: [
+              item.isDir ? "Folder" : "File",
+              " Name"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "rename-input",
+            ref: renameInputRef,
+            type: "text",
+            value: newName,
+            onChange: handleRenameInputChange,
+            onKeyDown: handleRenameKeyDown,
+            autoFocus: true,
+            spellCheck: false,
+            "aria-describedby": renameError ? "rename-error" : void 0,
+            "aria-invalid": renameError ? "true" : "false",
+            className: cn(
+              "w-full px-3 py-2 border rounded-lg",
+              "transition-colors duration-150 ease-out",
+              "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+              "touch-manipulation",
+              renameError ? "border-red-300 focus-visible:ring-red-300" : "border-primary-200 focus:border-primary-300"
+            )
+          }
+        ),
+        renameError ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: "rename-error",
+            className: "text-sm text-red-600 mt-1",
+            role: "alert",
+            "aria-live": "polite",
+            children: renameError
+          }
+        ) : null
+      ] }),
+      renameMutation.isPending ? /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-primary-50 rounded-lg", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-600", children: "Renaming…" }) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          DialogClose,
+          {
+            disabled: renameMutation.isPending,
+            className: cn(
+              "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+              "touch-manipulation"
+            ),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: confirmRename,
+            disabled: !isValidRename || renameMutation.isPending,
+            className: cn(
+              "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+              "touch-manipulation",
+              (!isValidRename || renameMutation.isPending) && "opacity-50 cursor-not-allowed"
+            ),
+            children: getRenameText()
+          }
+        )
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(DialogRoot, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "mb-2", children: [
+        "Delete ",
+        item.isDir ? "Folder" : "File"
+      ] }),
+      /* @__PURE__ */ jsxs(DialogDescription, { className: "mb-4", children: [
+        'Are you sure you want to delete "',
+        item.name,
+        '"?',
+        item.isDir ? " This will delete the folder and all its contents." : "",
+        " ",
+        "This action cannot be undone."
+      ] }),
+      deleteMutation.isPending ? /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-red-50 rounded-lg", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700", children: "Deleting…" }) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          DialogClose,
+          {
+            disabled: deleteMutation.isPending,
+            className: cn(
+              "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+              "touch-manipulation"
+            ),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            onClick: confirmDelete,
+            disabled: deleteMutation.isPending,
+            className: cn(
+              "focus-visible:ring-2 focus-visible:ring-red-300 focus-visible:outline-none",
+              "touch-manipulation",
+              deleteMutation.isPending && "opacity-50 cursor-not-allowed"
+            ),
+            children: getDeleteText()
+          }
+        )
+      ] })
+    ] }) }) })
+  ] });
+}
+const EDITABLE_EXTENSIONS = /* @__PURE__ */ new Set([
+  "txt",
+  "md",
+  "log",
+  "json",
+  "xml",
+  "yaml",
+  "yml",
+  "csv",
+  "ini",
+  "conf",
+  "cfg",
+  "js",
+  "ts",
+  "jsx",
+  "tsx",
+  "py",
+  "java",
+  "cpp",
+  "c",
+  "h",
+  "css",
+  "html",
+  "htm",
+  "php",
+  "rb",
+  "go",
+  "rs",
+  "sh",
+  "bash",
+  "zsh",
+  "toml",
+  "env",
+  "gitignore",
+  "dockerfile",
+  "makefile",
+  "sql",
+  "graphql",
+  "svelte",
+  "vue",
+  "scss",
+  "less"
+]);
+function formatFileSize$1(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+function formatRelativeTime(dateString) {
+  const date = new Date(dateString);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1e3);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  if (diffDay > 7) {
+    return date.toLocaleDateString();
+  } else if (diffDay > 0) {
+    return diffDay === 1 ? "yesterday" : `${diffDay} days ago`;
+  } else if (diffHour > 0) {
+    return diffHour === 1 ? "1 hour ago" : `${diffHour} hours ago`;
+  } else if (diffMin > 0) {
+    return diffMin === 1 ? "1 minute ago" : `${diffMin} minutes ago`;
+  } else {
+    return "just now";
+  }
+}
+function getFileIcon(item) {
+  if (item.isDir) return Folder01Icon;
+  const ext = item.extension.toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(ext)) {
+    return Image01Icon;
+  }
+  if (["mp4", "avi", "mkv", "mov", "wmv", "flv", "webm"].includes(ext)) {
+    return Video01Icon;
+  }
+  if (["mp3", "wav", "flac", "aac", "ogg", "m4a"].includes(ext)) {
+    return MusicNote01Icon;
+  }
+  if (["zip", "rar", "7z", "tar", "gz", "bz2"].includes(ext)) {
+    return Archive01Icon;
+  }
+  if (["txt", "md", "log", "json", "xml", "yaml", "yml"].includes(ext)) {
+    return Doc01Icon;
+  }
+  if (["js", "ts", "jsx", "tsx", "py", "java", "cpp", "c", "h", "css", "html", "php", "rb", "go", "rs"].includes(ext)) {
+    return CodeIcon;
+  }
+  return File01Icon;
+}
+function useSortedItems(items, sortBy, sortAsc) {
+  return useMemo(() => {
+    const sorted = [...items].sort((a, b) => {
+      if (a.isDir && !b.isDir) return -1;
+      if (!a.isDir && b.isDir) return 1;
+      let comparison = 0;
+      switch (sortBy) {
+        case "name":
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case "size":
+          comparison = a.size - b.size;
+          break;
+        case "modified":
+          comparison = new Date(a.modified).getTime() - new Date(b.modified).getTime();
+          break;
+        default:
+          comparison = a.name.localeCompare(b.name);
+      }
+      return sortAsc ? comparison : -comparison;
+    });
+    return sorted;
+  }, [items, sortBy, sortAsc]);
+}
+function useReducedMotion() {
+  return useMemo(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }, []);
+}
+function FileListSkeleton({ viewMode }) {
+  const skeletonCount = viewMode === "grid" ? 12 : 8;
+  if (viewMode === "grid") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3 p-4",
+        "aria-busy": "true",
+        "aria-label": "Loading files",
+        children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center p-3 rounded-lg", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-primary-200 rounded animate-pulse mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "w-16 h-4 bg-primary-200 rounded animate-pulse" })
+        ] }, i))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "divide-y divide-primary-200",
+      "aria-busy": "true",
+      "aria-label": "Loading files",
+      children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-6 h-6 bg-primary-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 h-4 bg-primary-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "w-16 h-4 bg-primary-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "w-20 h-4 bg-primary-200 rounded animate-pulse" })
+      ] }, i))
+    }
+  );
+}
+const GridItem = memo(function GridItem2({
+  item,
+  isSelected,
+  onClick,
+  onDoubleClick,
+  onKeyDown,
+  onOpenFile,
+  reduceMotion
+}) {
+  const handleClick = useCallback(() => {
+    onClick(item);
+  }, [onClick, item]);
+  const handleDoubleClick = useCallback(() => {
+    onDoubleClick(item);
+  }, [onDoubleClick, item]);
+  const handleKeyDown = useCallback((e) => {
+    onKeyDown(e, item);
+  }, [onKeyDown, item]);
+  const getItemAriaLabel = () => {
+    if (item.isDir) {
+      return `${item.name}, folder`;
+    }
+    return `${item.name}, ${item.extension} file, ${formatFileSize$1(item.size)}, modified ${formatRelativeTime(item.modified)}`;
+  };
+  const itemComponent = /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      whileHover: reduceMotion ? {} : { scale: 1.02 },
+      whileTap: reduceMotion ? {} : { scale: 0.98 },
+      transition: { duration: reduceMotion ? 0 : 0.1 },
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": getItemAriaLabel(),
+      className: cn(
+        "flex flex-col items-center p-3 rounded-lg w-full",
+        "transition-colors duration-150 ease-out",
+        "hover:bg-primary-100 focus-visible:bg-primary-100",
+        "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+        "touch-manipulation",
+        isSelected && "bg-primary-200"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          HugeiconsIcon,
+          {
+            icon: getFileIcon(item),
+            size: 48,
+            strokeWidth: 1,
+            className: cn(
+              "mb-2",
+              item.isDir ? "text-blue-500" : "text-primary-600"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-center text-primary-900 font-medium truncate w-full min-w-0", children: item.name }),
+        !item.isDir ? /* @__PURE__ */ jsx("span", { className: "text-xs text-primary-500 mt-1 tabular-nums", children: formatFileSize$1(item.size) }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(FileContextMenu, { item, onOpenFile, children: itemComponent });
+});
+const ListItem = memo(function ListItem2({
+  item,
+  isSelected,
+  onClick,
+  onDoubleClick,
+  onKeyDown,
+  onOpenFile,
+  reduceMotion
+}) {
+  const handleClick = useCallback(() => {
+    onClick(item);
+  }, [onClick, item]);
+  const handleDoubleClick = useCallback(() => {
+    onDoubleClick(item);
+  }, [onDoubleClick, item]);
+  const handleKeyDown = useCallback((e) => {
+    onKeyDown(e, item);
+  }, [onKeyDown, item]);
+  const getItemAriaLabel = () => {
+    if (item.isDir) {
+      return `${item.name}, folder, modified ${formatRelativeTime(item.modified)}`;
+    }
+    return `${item.name}, ${item.extension} file, ${formatFileSize$1(item.size)}, modified ${formatRelativeTime(item.modified)}`;
+  };
+  const itemComponent = /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      whileHover: reduceMotion ? {} : { backgroundColor: "rgb(248 250 252)" },
+      transition: { duration: reduceMotion ? 0 : 0.1 },
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": getItemAriaLabel(),
+      className: cn(
+        "w-full grid grid-cols-[auto_1fr_auto_auto] gap-4 px-4 py-3 text-left",
+        "transition-colors duration-150 ease-out",
+        "hover:bg-primary-100 focus-visible:bg-primary-100",
+        "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+        "touch-manipulation",
+        isSelected && "bg-primary-200"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          HugeiconsIcon,
+          {
+            icon: getFileIcon(item),
+            size: 20,
+            strokeWidth: 1.5,
+            className: cn(
+              "mt-0.5 shrink-0",
+              item.isDir ? "text-blue-500" : "text-primary-600"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("span", { className: "text-primary-900 font-medium truncate block", children: item.name }) }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-600 text-right w-16 tabular-nums shrink-0", children: item.isDir ? "—" : formatFileSize$1(item.size) }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-600 text-right w-20 tabular-nums shrink-0", children: formatRelativeTime(item.modified) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(FileContextMenu, { item, onOpenFile, children: itemComponent });
+});
+const emptyState = /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+  /* @__PURE__ */ jsx(
+    HugeiconsIcon,
+    {
+      icon: Folder01Icon,
+      size: 48,
+      strokeWidth: 1,
+      className: "mx-auto text-primary-400 mb-3",
+      "aria-hidden": "true"
+    }
+  ),
+  /* @__PURE__ */ jsx("p", { className: "text-primary-600 font-medium", children: "This folder is empty" }),
+  /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-500 mt-1", children: "Upload files or create a new folder to get started" })
+] }) });
+function FileList({ listing, loading, onOpenFile }) {
+  const {
+    viewMode,
+    sortBy,
+    sortAsc,
+    selectedFiles,
+    navigateTo,
+    toggleFileSelection
+  } = useFileExplorerState();
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const containerRef = useRef(null);
+  const reduceMotion = useReducedMotion();
+  const sortedItems = useSortedItems(listing?.items || [], sortBy, sortAsc);
+  const handleItemClick = useCallback((item) => {
+    toggleFileSelection(item.path);
+  }, [toggleFileSelection]);
+  const handleItemDoubleClick = useCallback((item) => {
+    if (item.isDir) {
+      navigateTo(item.path);
+    } else if (onOpenFile && EDITABLE_EXTENSIONS.has(item.extension.toLowerCase())) {
+      onOpenFile(item.path);
+    }
+  }, [navigateTo, onOpenFile]);
+  const handleKeyDown = useCallback((e, item) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (item.isDir) {
+        navigateTo(item.path);
+      } else {
+        toggleFileSelection(item.path);
+      }
+    } else if (e.key === " ") {
+      e.preventDefault();
+      toggleFileSelection(item.path);
+    }
+  }, [navigateTo, toggleFileSelection]);
+  useEffect(() => {
+    const handleKeyDown2 = (e) => {
+      if (!sortedItems.length) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => Math.min(prev + 1, sortedItems.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Home":
+          e.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case "End":
+          e.preventDefault();
+          setFocusedIndex(sortedItems.length - 1);
+          break;
+      }
+    };
+    if (containerRef.current) {
+      containerRef.current.addEventListener("keydown", handleKeyDown2);
+      return () => {
+        containerRef.current?.removeEventListener("keydown", handleKeyDown2);
+      };
+    }
+  }, [sortedItems.length]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(FileListSkeleton, { viewMode });
+  }
+  if (!listing) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx("p", { className: "text-primary-500", children: "No listing available" }) });
+  }
+  if (sortedItems.length === 0) {
+    return emptyState;
+  }
+  if (viewMode === "grid") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3 p-4 overflow-y-auto",
+        role: "grid",
+        "aria-label": "Files grid",
+        tabIndex: 0,
+        children: sortedItems.map((item, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
+          GridItem,
+          {
+            item,
+            isSelected: selectedFiles.has(item.path),
+            onClick: handleItemClick,
+            onDoubleClick: handleItemDoubleClick,
+            onKeyDown: handleKeyDown,
+            onOpenFile,
+            reduceMotion
+          }
+        ) }, item.path))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "overflow-y-auto",
+      role: "table",
+      "aria-label": "Files list",
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-primary-200", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid grid-cols-[auto_1fr_auto_auto] gap-4 px-4 py-2 text-sm font-medium text-primary-600 bg-primary-50",
+            role: "row",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-6", role: "columnheader", "aria-label": "File type" }),
+              /* @__PURE__ */ jsx("div", { role: "columnheader", children: "Name" }),
+              /* @__PURE__ */ jsx("div", { className: "w-16 text-right tabular-nums", role: "columnheader", children: "Size" }),
+              /* @__PURE__ */ jsx("div", { className: "w-20 text-right tabular-nums", role: "columnheader", children: "Modified" })
+            ]
+          }
+        ),
+        sortedItems.map((item, index) => /* @__PURE__ */ jsx("div", { role: "row", children: /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            item,
+            isSelected: selectedFiles.has(item.path),
+            onClick: handleItemClick,
+            onDoubleClick: handleItemDoubleClick,
+            onKeyDown: handleKeyDown,
+            onOpenFile,
+            reduceMotion
+          }
+        ) }, item.path))
+      ] })
+    }
+  );
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+function FileUploadDialog({ open, onOpenChange, currentPath }) {
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [dragActive, setDragActive] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState("idle");
+  const fileInputRef = useRef(null);
+  const uploadMutation = useFileUpload();
+  const handleReset = useCallback(() => {
+    setSelectedFiles([]);
+    setUploadStatus("idle");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, []);
+  const handleFilesSelected = useCallback((files) => {
+    if (!files) return;
+    const newFiles = Array.from(files).map((file) => ({
+      file,
+      id: Math.random().toString(36).substr(2, 9)
+    }));
+    setSelectedFiles((prev) => [...prev, ...newFiles]);
+  }, []);
+  const handleFileInputChange = useCallback((e) => {
+    handleFilesSelected(e.target.files);
+  }, [handleFilesSelected]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    setDragActive(false);
+    handleFilesSelected(e.dataTransfer.files);
+  }, [handleFilesSelected]);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    setDragActive(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    setDragActive(false);
+  }, []);
+  const handleRemoveFile = useCallback((id) => {
+    setSelectedFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+  const handleChooseFiles = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleDropZoneKeyDown = useCallback((e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleChooseFiles();
+    }
+  }, [handleChooseFiles]);
+  const handleUpload = useCallback(async () => {
+    if (selectedFiles.length === 0) return;
+    const fileList = new DataTransfer();
+    selectedFiles.forEach(({ file }) => {
+      fileList.items.add(file);
+    });
+    setUploadStatus("uploading");
+    try {
+      await uploadMutation.mutateAsync({
+        files: fileList.files,
+        path: currentPath
+      });
+      setUploadStatus("success");
+      handleReset();
+      onOpenChange(false);
+    } catch (error) {
+      setUploadStatus("error");
+      console.error("Upload failed:", error);
+    }
+  }, [selectedFiles, currentPath, uploadMutation, handleReset, onOpenChange]);
+  const handleOpenChange = useCallback((newOpen) => {
+    if (!newOpen) {
+      handleReset();
+    }
+    onOpenChange(newOpen);
+  }, [handleReset, onOpenChange]);
+  const totalSize = selectedFiles.reduce((total, { file }) => total + file.size, 0);
+  const fileCount = selectedFiles.length;
+  const getUploadButtonText = () => {
+    if (uploadMutation.isPending || uploadStatus === "uploading") {
+      return "Uploading…";
+    }
+    if (fileCount === 0) {
+      return "Upload";
+    }
+    return fileCount === 1 ? "Upload 1 File" : `Upload ${fileCount} Files`;
+  };
+  return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "w-[min(500px,92vw)]", children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "mb-2", children: "Upload Files" }),
+    /* @__PURE__ */ jsxs(DialogDescription, { className: "mb-6", children: [
+      "Upload files to ",
+      currentPath === "/" ? "root directory" : currentPath
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onClick: handleChooseFiles,
+        onKeyDown: handleDropZoneKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": "Drop files here or click to choose files",
+        className: cn(
+          "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer",
+          "transition-colors duration-150 ease-out",
+          "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+          "touch-manipulation",
+          dragActive ? "border-primary-400 bg-primary-50" : "border-primary-200 hover:border-primary-300 hover:bg-primary-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            HugeiconsIcon,
+            {
+              icon: Upload04Icon,
+              size: 48,
+              strokeWidth: 1,
+              className: "mx-auto text-primary-400 mb-4",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-primary-600 font-medium mb-2", children: "Drag and drop files here" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-500 mb-4", children: "or" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              className: cn(
+                "gap-2",
+                "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                "touch-manipulation"
+              ),
+              "aria-label": "Choose files from computer",
+              children: [
+                /* @__PURE__ */ jsx(
+                  HugeiconsIcon,
+                  {
+                    icon: File01Icon,
+                    size: 18,
+                    strokeWidth: 1.5,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: "Choose Files" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              onChange: handleFileInputChange,
+              className: "hidden",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: selectedFiles.length > 0 ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, height: 0 },
+        animate: { opacity: 1, height: "auto" },
+        exit: { opacity: 0, height: 0 },
+        className: "mt-6",
+        children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-primary-900 mb-3", children: [
+            "Selected Files (",
+            selectedFiles.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-32 overflow-y-auto border border-primary-200 rounded-lg", children: selectedFiles.map(({ file, id }) => /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, x: -10 },
+              animate: { opacity: 1, x: 0 },
+              exit: { opacity: 0, x: 10 },
+              className: "flex items-center justify-between p-2 border-b border-primary-100 last:border-b-0",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(
+                    HugeiconsIcon,
+                    {
+                      icon: File01Icon,
+                      size: 16,
+                      strokeWidth: 1.5,
+                      className: "text-primary-600 shrink-0",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-primary-900 truncate min-w-0", children: file.name }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-primary-500 shrink-0 tabular-nums", children: formatFileSize(file.size) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "icon-sm",
+                    variant: "ghost",
+                    onClick: () => handleRemoveFile(id),
+                    className: cn(
+                      "text-primary-500 hover:text-red-600 shrink-0",
+                      "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+                      "touch-manipulation"
+                    ),
+                    "aria-label": `Remove ${file.name} from upload list`,
+                    children: /* @__PURE__ */ jsx(
+                      HugeiconsIcon,
+                      {
+                        icon: Delete02Icon,
+                        size: 14,
+                        strokeWidth: 1.5,
+                        "aria-hidden": "true"
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            id
+          )) }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-primary-600 mt-2 tabular-nums", children: [
+            "Total size: ",
+            formatFileSize(totalSize)
+          ] })
+        ]
+      }
+    ) : null }),
+    uploadMutation.isPending || uploadStatus === "uploading" ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        className: "mt-4 p-3 bg-primary-50 rounded-lg",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-600 mb-2", children: "Uploading files…" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-primary-200 rounded-full h-2", role: "progressbar", "aria-label": "Upload progress", children: /* @__PURE__ */ jsx("div", { className: "bg-primary-600 h-2 rounded-full w-1/2 animate-pulse" }) })
+        ]
+      }
+    ) : null,
+    uploadStatus === "success" ? /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-green-50 rounded-lg", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-green-700", children: "Files uploaded successfully!" }) }) : null,
+    uploadStatus === "error" ? /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-red-50 rounded-lg", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700", children: "Upload failed. Please try again." }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-6", children: [
+      /* @__PURE__ */ jsx(
+        DialogClose,
+        {
+          disabled: uploadMutation.isPending || uploadStatus === "uploading",
+          className: cn(
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation"
+          ),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleUpload,
+          disabled: selectedFiles.length === 0 || uploadMutation.isPending || uploadStatus === "uploading",
+          className: cn(
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation"
+          ),
+          children: getUploadButtonText()
+        }
+      )
+    ] })
+  ] }) }) });
+}
+function CreateFolderDialog({ open, onOpenChange, currentPath }) {
+  const [folderName, setFolderName] = useState("");
+  const [error, setError] = useState("");
+  const createFolderMutation = useCreateFolder();
+  const handleCreate = useCallback(async () => {
+    if (!folderName.trim()) return;
+    setError("");
+    try {
+      await createFolderMutation.mutateAsync({
+        path: currentPath,
+        name: folderName.trim()
+      });
+      setFolderName("");
+      onOpenChange(false);
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Failed to create folder";
+      setError(errorMessage);
+      console.error("Create folder failed:", error2);
+    }
+  }, [folderName, currentPath, createFolderMutation, onOpenChange]);
+  const handleOpenChange = useCallback((newOpen) => {
+    if (!newOpen) {
+      setFolderName("");
+      setError("");
+    }
+    onOpenChange(newOpen);
+  }, [onOpenChange]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleCreate();
+    }
+  }, [handleCreate]);
+  const handleInputChange = useCallback((e) => {
+    const value = e.target.value;
+    setFolderName(value);
+    if (error) {
+      setError("");
+    }
+  }, [error]);
+  const isValidName = folderName.trim().length > 0 && !/[<>:"/\\|?*]/.test(folderName) && !folderName.includes("..");
+  const getButtonText = () => {
+    if (createFolderMutation.isPending) {
+      return "Creating…";
+    }
+    return "Create Folder";
+  };
+  const getValidationError = () => {
+    if (!folderName.trim()) {
+      return "";
+    }
+    if (folderName.includes("..")) {
+      return 'Folder name cannot contain ".."';
+    }
+    if (/[<>:"/\\|?*]/.test(folderName)) {
+      return 'Invalid characters: < > : " / \\ | ? *';
+    }
+    return "";
+  };
+  const validationError = getValidationError();
+  const showError = error || validationError;
+  return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "mb-2", children: "Create New Folder" }),
+    /* @__PURE__ */ jsxs(DialogDescription, { className: "mb-4", children: [
+      "Create a new folder in ",
+      currentPath === "/" ? "root directory" : currentPath
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "folder-name",
+          className: "block text-sm font-medium text-primary-900 mb-2",
+          children: "Folder Name"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "folder-name",
+          type: "text",
+          value: folderName,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Enter folder name",
+          autoComplete: "off",
+          spellCheck: false,
+          autoFocus: true,
+          "aria-describedby": showError ? "folder-name-error" : void 0,
+          "aria-invalid": showError ? "true" : "false",
+          className: cn(
+            "w-full px-3 py-2 border rounded-lg",
+            "transition-colors duration-150 ease-out",
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation",
+            showError ? "border-red-300 focus-visible:ring-red-300" : "border-primary-200 focus:border-primary-300"
+          )
+        }
+      ),
+      showError ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: "folder-name-error",
+          className: "text-sm text-red-600 mt-1",
+          role: "alert",
+          "aria-live": "polite",
+          children: error || validationError
+        }
+      ) : null
+    ] }),
+    createFolderMutation.isPending ? /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-primary-50 rounded-lg", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-600", children: "Creating folder…" }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(
+        DialogClose,
+        {
+          disabled: createFolderMutation.isPending,
+          className: cn(
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation"
+          ),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleCreate,
+          disabled: !isValidName || createFolderMutation.isPending,
+          className: cn(
+            "focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none",
+            "touch-manipulation",
+            (!isValidName || createFolderMutation.isPending) && "opacity-50 cursor-not-allowed"
+          ),
+          "aria-describedby": !isValidName ? "create-button-help" : void 0,
+          children: getButtonText()
+        }
+      )
+    ] }),
+    !isValidName && folderName.length > 0 ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: "create-button-help",
+        className: "text-xs text-primary-500 mt-2",
+        children: "Please enter a valid folder name"
+      }
+    ) : null
+  ] }) }) });
+}
+const LANGUAGE_MAP = {
+  js: "JavaScript",
+  ts: "TypeScript",
+  jsx: "JSX",
+  tsx: "TSX",
+  py: "Python",
+  json: "JSON",
+  yaml: "YAML",
+  yml: "YAML",
+  md: "Markdown",
+  html: "HTML",
+  css: "CSS",
+  scss: "SCSS",
+  sh: "Shell",
+  bash: "Bash",
+  sql: "SQL",
+  xml: "XML",
+  toml: "TOML",
+  ini: "INI",
+  conf: "Config",
+  cfg: "Config",
+  env: "Env",
+  txt: "Text",
+  log: "Log",
+  csv: "CSV",
+  go: "Go",
+  rs: "Rust",
+  rb: "Ruby",
+  php: "PHP",
+  java: "Java",
+  c: "C",
+  cpp: "C++",
+  h: "Header",
+  dockerfile: "Dockerfile",
+  makefile: "Makefile",
+  graphql: "GraphQL",
+  svelte: "Svelte",
+  vue: "Vue"
+};
+function FileEditor({ filePath, onClose }) {
+  const contentQuery = useFileContent(filePath);
+  const saveMutation = useFileSave();
+  const textareaRef = useRef(null);
+  const [editedContent, setEditedContent] = useState(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  useEffect(() => {
+    if (contentQuery.data && editedContent === null) {
+      setEditedContent(contentQuery.data.content);
+    }
+  }, [contentQuery.data, editedContent]);
+  const language = useMemo(() => {
+    if (!contentQuery.data) return "";
+    return LANGUAGE_MAP[contentQuery.data.extension.toLowerCase()] || contentQuery.data.extension.toUpperCase();
+  }, [contentQuery.data]);
+  const handleChange = useCallback((e) => {
+    setEditedContent(e.target.value);
+    setHasUnsavedChanges(e.target.value !== contentQuery.data?.content);
+  }, [contentQuery.data]);
+  const handleSave = useCallback(async () => {
+    if (editedContent === null) return;
+    try {
+      await saveMutation.mutateAsync({ path: filePath, content: editedContent });
+      setHasUnsavedChanges(false);
+    } catch {
+    }
+  }, [filePath, editedContent, saveMutation]);
+  const handleClose = useCallback(() => {
+    if (hasUnsavedChanges) {
+      if (!window.confirm("You have unsaved changes. Discard them?")) return;
+    }
+    onClose();
+  }, [hasUnsavedChanges, onClose]);
+  useEffect(() => {
+    const handleKeyDown2 = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        if (hasUnsavedChanges) handleSave();
+      }
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown2);
+    return () => window.removeEventListener("keydown", handleKeyDown2);
+  }, [handleSave, handleClose, hasUnsavedChanges]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = textarea.value;
+      const newValue = value.substring(0, start) + "  " + value.substring(end);
+      setEditedContent(newValue);
+      setHasUnsavedChanges(newValue !== contentQuery.data?.content);
+      requestAnimationFrame(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      });
+    }
+  }, [contentQuery.data]);
+  const fileName = filePath.split("/").pop() || filePath;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 bg-surface flex flex-col", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between px-4 py-2 border-b border-primary-200 bg-primary-50", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-primary-900 truncate", children: fileName }),
+        language ? /* @__PURE__ */ jsx("span", { className: "text-xs text-primary-500 bg-primary-100 px-2 py-0.5 rounded-full shrink-0", children: language }) : null,
+        hasUnsavedChanges ? /* @__PURE__ */ jsx("span", { className: "text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full shrink-0", children: "Unsaved" }) : null,
+        saveMutation.isError ? /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600", children: saveMutation.error.message }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "default",
+            onClick: handleSave,
+            disabled: !hasUnsavedChanges || saveMutation.isPending,
+            className: cn(
+              (!hasUnsavedChanges || saveMutation.isPending) && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(HugeiconsIcon, { icon: FloppyDiskIcon, size: 16, strokeWidth: 1.5, "aria-hidden": "true" }),
+              saveMutation.isPending ? "Saving…" : "Save"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "icon-sm", variant: "ghost", onClick: handleClose, "aria-label": "Close editor", children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Cancel01Icon, size: 20, strokeWidth: 1.5, "aria-hidden": "true" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: contentQuery.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx("p", { className: "text-primary-500 text-sm", children: "Loading file…" }) }) : contentQuery.isError ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-red-600 text-sm mb-2", children: contentQuery.error instanceof Error ? contentQuery.error.message : "Failed to load file" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => void contentQuery.refetch(), children: "Retry" })
+    ] }) }) : /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: editedContent ?? "",
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        spellCheck: false,
+        autoFocus: true,
+        className: cn(
+          "w-full h-full p-4 resize-none",
+          "bg-primary-950 text-primary-100",
+          "font-mono text-sm leading-relaxed",
+          "focus:outline-none",
+          "selection:bg-blue-800/50"
+        )
+      }
+    ) }),
+    contentQuery.data ? /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between px-4 py-1 border-t border-primary-200 bg-primary-50 text-xs text-primary-500", children: [
+      /* @__PURE__ */ jsx("span", { children: filePath }),
+      /* @__PURE__ */ jsx("span", { children: formatSize(contentQuery.data.size) })
+    ] }) : null
+  ] });
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileExplorerScreen() {
+  const queryClient = useQueryClient();
+  const { currentPath } = useFileExplorerState();
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [createFolderDialogOpen, setCreateFolderDialogOpen] = useState(false);
+  const [editingFile, setEditingFile] = useState(null);
+  const listingQuery = useFileListing(currentPath);
+  const uiQuery = useQuery({
+    queryKey: chatUiQueryKey,
+    queryFn: function readUiState() {
+      return getChatUiState(queryClient);
+    },
+    initialData: function initialUiState() {
+      return getChatUiState(queryClient);
+    },
+    staleTime: Infinity
+  });
+  const isSidebarCollapsed = uiQuery.data?.isSidebarCollapsed ?? false;
+  const handleToggleSidebarCollapse = useCallback(() => {
+    setChatUiState(queryClient, function toggle(state) {
+      return { ...state, isSidebarCollapsed: !state.isSidebarCollapsed };
+    });
+  }, [queryClient]);
+  const handleUploadDialogOpen = useCallback(() => {
+    setUploadDialogOpen(true);
+  }, []);
+  const handleCreateFolderDialogOpen = useCallback(() => {
+    setCreateFolderDialogOpen(true);
+  }, []);
+  const handleOpenFile = useCallback((filePath) => {
+    setEditingFile(filePath);
+  }, []);
+  const handleCloseEditor = useCallback(() => {
+    setEditingFile(null);
+  }, []);
+  const mainStyles = useMemo(() => ({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: 0
+  }), []);
+  const sidebar = /* @__PURE__ */ jsx(
+    MemoizedFilesSidebar,
+    {
+      isCollapsed: isSidebarCollapsed,
+      onToggleCollapse: handleToggleSidebarCollapse,
+      onSelectAction: () => {
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "h-screen bg-surface text-primary-900", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("h-full overflow-hidden grid grid-cols-[auto_1fr]"), children: [
+      sidebar,
+      /* @__PURE__ */ jsxs("main", { "aria-label": "File explorer", style: mainStyles, children: [
+        /* @__PURE__ */ jsxs("header", { className: "border-b border-primary-200 px-4 py-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsx(FileBreadcrumb, { path: currentPath }) }),
+          /* @__PURE__ */ jsx(
+            FileToolbar,
+            {
+              onUpload: handleUploadDialogOpen,
+              onCreateFolder: handleCreateFolderDialogOpen
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-auto", children: [
+          /* @__PURE__ */ jsx(
+            FileList,
+            {
+              listing: listingQuery.data,
+              loading: listingQuery.isLoading,
+              onOpenFile: handleOpenFile
+            }
+          ),
+          listingQuery.isError ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center", "aria-live": "polite", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-red-600 text-sm", children: listingQuery.error instanceof Error ? listingQuery.error.message : "Failed to load files" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => void listingQuery.refetch(),
+                className: "mt-2 text-sm text-primary-600 hover:text-primary-900 underline focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:outline-none rounded-sm",
+                children: "Retry"
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          FileUploadDialog,
+          {
+            open: uploadDialogOpen,
+            onOpenChange: setUploadDialogOpen,
+            currentPath
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CreateFolderDialog,
+          {
+            open: createFolderDialogOpen,
+            onOpenChange: setCreateFolderDialogOpen,
+            currentPath
+          }
+        )
+      ] })
+    ] }),
+    editingFile ? /* @__PURE__ */ jsx(FileEditor, { filePath: editingFile, onClose: handleCloseEditor }) : null
+  ] });
+}
+export {
+  FileExplorerScreen
+};