@particle-academy/react-fancy 4.12.1 → 4.13.1

package/dist/index.cjs

@@ -7884,11 +7884,12 @@ function usePopover() {
   }
   return ctx;
 }
-function PopoverTrigger({ children, className }) {
+function PopoverTrigger({ children, className, ...rest }) {
   const { setOpen, open, anchorRef, hover, onHoverEnter, onHoverLeave } = usePopover();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
+      ...rest,
       ref: anchorRef,
       "data-react-fancy-popover-trigger": "",
       className: cn("inline-flex", className),
@@ -7902,7 +7903,7 @@ function PopoverTrigger({ children, className }) {
   );
 }
 PopoverTrigger.displayName = "PopoverTrigger";
-function PopoverContent({ children, className }) {
+function PopoverContent({ children, className, style, ...rest }) {
   const { open, setOpen, anchorRef, floatingRef, placement, offset, hover, onHoverEnter, onHoverLeave } = usePopover();
   const outsideRef = react.useRef(null);
   const position = useFloatingPosition(anchorRef, floatingRef, {
@@ -7918,6 +7919,7 @@ function PopoverContent({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ...rest,
       ref: (node) => {
         outsideRef.current = node;
         floatingRef.current = node;
@@ -7928,7 +7930,7 @@ function PopoverContent({ children, className }) {
         positioned ? "fancy-scale-in" : "invisible",
         className
       ),
-      style: { left: position.x, top: position.y },
+      style: { ...style, left: position.x, top: position.y },
       onMouseEnter: hover ? onHoverEnter : void 0,
       onMouseLeave: hover ? onHoverLeave : void 0,
       children
@@ -13142,6 +13144,923 @@ TreeNavRoot.displayName = "TreeNav";
 var TreeNav = Object.assign(TreeNavRoot, {
   Node: TreeNode
 });
+var FileBrowserContext = react.createContext(null);
+function useFileBrowser() {
+  const ctx = react.useContext(FileBrowserContext);
+  if (!ctx) {
+    throw new Error("useFileBrowser must be used within a <FileBrowser> component");
+  }
+  return ctx;
+}
+
+// src/components/FileBrowser/FileBrowser.utils.ts
+function normalizePath(input) {
+  const raw = input.trim().replace(/\\/g, "/");
+  if (raw === "") return "/";
+  const absolute = raw.startsWith("/");
+  const out = [];
+  for (const segment of raw.split("/")) {
+    if (segment === "" || segment === ".") continue;
+    if (segment === "..") {
+      out.pop();
+      continue;
+    }
+    out.push(segment);
+  }
+  if (out.length === 0) return "/";
+  return (absolute ? "/" : "") + out.join("/");
+}
+function parentPath(path) {
+  const i = path.lastIndexOf("/");
+  if (i === -1) return "/";
+  if (i === 0) return "/";
+  return path.slice(0, i);
+}
+function pathSegments(path) {
+  const absolute = path.startsWith("/");
+  const parts = path.split("/").filter(Boolean);
+  const segments = [];
+  let acc = "";
+  parts.forEach((part, i) => {
+    acc = i === 0 && !absolute ? part : `${acc}/${part}`;
+    segments.push({ label: part, path: acc });
+  });
+  return segments;
+}
+function compareNames(a, b) {
+  const cmp = a.localeCompare(b, "en", { numeric: true, sensitivity: "base" });
+  if (cmp !== 0) return cmp;
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+function compareFileEntries(a, b, sort) {
+  if (a.kind !== b.kind) return a.kind === "dir" ? -1 : 1;
+  const direction = sort.direction === "desc" ? -1 : 1;
+  let cmp;
+  switch (sort.by) {
+    case "size":
+      cmp = (a.size ?? -1) - (b.size ?? -1);
+      break;
+    case "mtime": {
+      const am = a.mtime ?? "";
+      const bm = b.mtime ?? "";
+      cmp = am < bm ? -1 : am > bm ? 1 : 0;
+      break;
+    }
+    default:
+      cmp = compareNames(a.name, b.name);
+  }
+  if (cmp !== 0) return direction * cmp;
+  return compareNames(a.name, b.name);
+}
+function isEntryExpandable(entry, children, hasProvider) {
+  if (entry.kind !== "dir" || entry.hasChildren === false) return false;
+  if (children !== void 0) return children.length > 0;
+  return hasProvider;
+}
+function entryMatchesFilter(entry, query, entriesFor, visited = /* @__PURE__ */ new Set()) {
+  if (entry.name.toLowerCase().includes(query)) return true;
+  if (entry.kind !== "dir" || visited.has(entry.path)) return false;
+  visited.add(entry.path);
+  const children = entriesFor(entry.path);
+  return children?.some((child) => entryMatchesFilter(child, query, entriesFor, visited)) ?? false;
+}
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unit = -1;
+  do {
+    value /= 1024;
+    unit++;
+  } while (value >= 1024 && unit < units.length - 1);
+  const rounded = value >= 100 ? Math.round(value) : Math.round(value * 10) / 10;
+  return `${rounded} ${units[unit]}`;
+}
+var SEGMENT_CLASS = "shrink-0 rounded text-[13px] text-zinc-500 transition-colors hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300";
+var ACTIVE_SEGMENT_CLASS = "shrink-0 truncate text-[13px] font-medium text-zinc-900 dark:text-white";
+function FileBrowserPathBar({
+  editable = true,
+  placeholder = "/path/to/folder",
+  className
+}) {
+  const { path, navigate } = useFileBrowser();
+  const [editing, setEditing] = react.useState(false);
+  const [draft, setDraft] = react.useState("");
+  const startEdit = () => {
+    setDraft(path);
+    setEditing(true);
+  };
+  const commit = () => {
+    navigate(normalizePath(draft));
+    setEditing(false);
+  };
+  const segments = pathSegments(path);
+  const atRoot = segments.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-react-fancy-file-browser-path": "",
+      className: cn(
+        "flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
+        className
+      ),
+      children: [
+        editing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            "data-react-fancy-file-browser-path-input": "",
+            type: "text",
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                setEditing(false);
+              }
+            },
+            onBlur: () => setEditing(false),
+            autoFocus: true,
+            spellCheck: false,
+            placeholder,
+            "aria-label": "Path",
+            className: "min-w-0 flex-1 rounded-md border border-zinc-300 bg-transparent px-2 py-0.5 font-mono text-xs text-zinc-700 outline-none placeholder:text-zinc-400 focus:border-blue-400 dark:border-zinc-600 dark:text-zinc-300"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "nav",
+          {
+            "aria-label": "Path",
+            onDoubleClick: editable ? startEdit : void 0,
+            className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto",
+            children: [
+              atRoot ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-file-browser-path-segment": "", "aria-current": "location", className: ACTIVE_SEGMENT_CLASS, children: "/" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-react-fancy-file-browser-path-segment": "",
+                  onClick: () => navigate("/"),
+                  className: SEGMENT_CLASS,
+                  children: "/"
+                }
+              ),
+              segments.map((segment, i) => {
+                const last = i === segments.length - 1;
+                return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                  i > 0 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 12, "aria-hidden": "true", className: "shrink-0 text-zinc-400" }),
+                  last ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "data-react-fancy-file-browser-path-segment": "",
+                      "aria-current": "location",
+                      className: ACTIVE_SEGMENT_CLASS,
+                      children: segment.label
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-file-browser-path-segment": "",
+                      onClick: () => navigate(segment.path),
+                      className: SEGMENT_CLASS,
+                      children: segment.label
+                    }
+                  )
+                ] }, segment.path);
+              })
+            ]
+          }
+        ),
+        editable && !editing && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Edit path",
+            onClick: startEdit,
+            className: "shrink-0 rounded-md p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 13 })
+          }
+        )
+      ]
+    }
+  );
+}
+FileBrowserPathBar.displayName = "FileBrowserPathBar";
+var SORT_FIELDS = [
+  { field: "name", label: "Name" },
+  { field: "size", label: "Size" },
+  { field: "mtime", label: "Modified" }
+];
+function FileBrowserToolbar({ filterPlaceholder = "Filter", className }) {
+  const { filter, setFilter, sort, setSort } = useFileBrowser();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-react-fancy-file-browser-toolbar": "",
+      className: cn(
+        "flex items-center gap-2 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-react-fancy-file-browser-filter": "",
+            className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-zinc-200 px-2 dark:border-zinc-700",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 13, "aria-hidden": "true", className: "shrink-0 text-zinc-400" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: filter,
+                  onChange: (e) => setFilter(e.target.value),
+                  placeholder: filterPlaceholder,
+                  "aria-label": "Filter by name",
+                  spellCheck: false,
+                  className: "min-w-0 flex-1 bg-transparent py-1 text-xs text-zinc-700 outline-none placeholder:text-zinc-400 dark:text-zinc-300"
+                }
+              ),
+              filter !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Clear filter",
+                  onClick: () => setFilter(""),
+                  className: "shrink-0 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-300",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-react-fancy-file-browser-sort": "",
+            role: "group",
+            "aria-label": "Sort",
+            className: "flex shrink-0 items-center gap-0.5",
+            children: SORT_FIELDS.map(({ field, label }) => {
+              const active = sort.by === field;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-sort-field": field,
+                  "aria-pressed": active,
+                  onClick: () => setSort(
+                    active ? { by: field, direction: sort.direction === "asc" ? "desc" : "asc" } : { by: field, direction: "asc" }
+                  ),
+                  className: cn(
+                    "flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs transition-colors",
+                    active ? "bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300"
+                  ),
+                  children: [
+                    label,
+                    active && (sort.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { size: 11, "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { size: 11, "aria-hidden": "true" }))
+                  ]
+                },
+                field
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+FileBrowserToolbar.displayName = "FileBrowserToolbar";
+var EXT_COLORS2 = {
+  ts: "#3178c6",
+  tsx: "#3178c6",
+  js: "#f7df1e",
+  jsx: "#f7df1e",
+  php: "#777bb4",
+  html: "#e34c26",
+  htm: "#e34c26",
+  css: "#264de4",
+  json: "#a1a1aa",
+  md: "#71717a",
+  yaml: "#cb171e",
+  yml: "#cb171e"
+};
+function FileIcon2({ ext }) {
+  const color = ext && EXT_COLORS2[ext.toLowerCase()] || "#71717a";
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 1h5.5L13 4.5V14a1 1 0 01-1 1H4a1 1 0 01-1-1V2a1 1 0 011-1z", stroke: color, strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 1v4h4", stroke: color, strokeWidth: "1.2" })
+  ] });
+}
+function FolderIcon2({ open }) {
+  if (open) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.5 3.5a1 1 0 011-1h3l1.5 1.5H13a1 1 0 011 1V5H2.5V3.5z", fill: "#fbbf24" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 6h13l-1.5 7.5H2.5L1 6z", fill: "#fbbf24", opacity: "0.7" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.5 3a1 1 0 011-1h3l1.5 1.5H13a1 1 0 011 1v8a1 1 0 01-1 1H2.5a1 1 0 01-1-1V3z", fill: "#fbbf24" }) });
+}
+function FileBrowserStatusRow({ depth, kind, message, onRetry }) {
+  const { indentSize } = useFileBrowser();
+  const paddingLeft = depth * indentSize + 4 + 18;
+  if (kind === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "none",
+        "data-react-fancy-file-browser-status": "error",
+        className: "flex items-center gap-1.5 py-0.5 pr-2 text-xs text-red-600 dark:text-red-400",
+        style: { paddingLeft },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, { size: 12, className: "shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: message || "Failed to load" }),
+          onRetry && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { size: 11 }),
+                "Retry"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "none",
+      "data-react-fancy-file-browser-status": kind,
+      className: "flex items-center gap-1.5 py-0.5 text-xs text-zinc-400 italic dark:text-zinc-500",
+      style: { paddingLeft },
+      children: [
+        kind === "loading" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 12, className: "shrink-0 animate-spin", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: kind === "loading" ? "Loading\u2026" : kind === "empty" ? "Empty" : kind === "no-matches" ? "No matches" : "No entries" })
+      ]
+    }
+  );
+}
+FileBrowserStatusRow.displayName = "FileBrowserStatusRow";
+function FileBrowserNode({ entry, depth }) {
+  const {
+    entriesFor,
+    visibleChildrenFor,
+    statusFor,
+    errorFor,
+    loadPath,
+    hasProvider,
+    expandedPaths,
+    toggleExpanded,
+    navigate,
+    isSelected,
+    isSelectable,
+    selectEntry,
+    tabFocusPath,
+    setFocusedPath,
+    focusRow,
+    registerRow,
+    indentSize,
+    showIcons
+  } = useFileBrowser();
+  const rawChildren = entriesFor(entry.path);
+  const childrenKnown = rawChildren !== void 0;
+  const expandable = isEntryExpandable(entry, rawChildren, hasProvider);
+  const expanded = expandable && expandedPaths.includes(entry.path);
+  const status = statusFor(entry.path);
+  const selectable = isSelectable(entry);
+  const selected = isSelected(entry.path);
+  const loading = expanded && !childrenKnown && status === "loading";
+  const paddingLeft = depth * indentSize + 4;
+  const ext = entry.name.includes(".") ? entry.name.split(".").pop() : void 0;
+  const handleClick = () => {
+    if (entry.disabled) return;
+    setFocusedPath(entry.path);
+    focusRow(entry.path);
+    if (selectable) selectEntry(entry);
+    if (expandable) toggleExpanded(entry.path);
+  };
+  const handleDoubleClick = () => {
+    if (entry.disabled || entry.kind !== "dir") return;
+    navigate(entry.path);
+  };
+  const handleChevronClick = (e) => {
+    e.stopPropagation();
+    if (!entry.disabled && expandable) toggleExpanded(entry.path);
+  };
+  const visibleChildren = expanded && childrenKnown ? visibleChildrenFor(entry.path) : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "data-react-fancy-file-browser-node": "",
+      "data-path": entry.path,
+      "data-kind": entry.kind,
+      "aria-level": depth + 1,
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-selected": selectable ? selected : void 0,
+      "aria-disabled": entry.disabled || void 0,
+      "aria-busy": loading || void 0,
+      tabIndex: tabFocusPath === entry.path ? 0 : -1,
+      ref: (el) => registerRow(entry.path, el),
+      onFocus: (e) => {
+        if (e.target === e.currentTarget) setFocusedPath(entry.path);
+      },
+      className: "group outline-none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-react-fancy-file-browser-row": "",
+            onClick: handleClick,
+            onDoubleClick: handleDoubleClick,
+            className: cn(
+              "flex w-full cursor-pointer items-center gap-1 rounded-md py-0.5 pr-2 text-left text-[13px] transition-colors select-none",
+              selected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+              entry.disabled && "pointer-events-none opacity-40",
+              "group-focus-visible:ring-2 group-focus-visible:ring-blue-500/40 group-focus-visible:ring-inset"
+            ),
+            style: { paddingLeft },
+            children: [
+              expandable ? loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "shrink-0 animate-spin text-zinc-400", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  onClick: handleChevronClick,
+                  className: "flex shrink-0 items-center justify-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ChevronRight,
+                    {
+                      size: 14,
+                      className: cn("transition-transform duration-150", expanded && "rotate-90")
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3.5 shrink-0" }),
+              showIcons && (entry.kind === "dir" ? /* @__PURE__ */ jsxRuntime.jsx(FolderIcon2, { open: expanded }) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon2, { ext })),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
+              entry.kind === "file" && entry.size !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-zinc-400 tabular-nums dark:text-zinc-500", children: formatFileSize(entry.size) })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "data-react-fancy-file-browser-node-children": "", children: [
+          !childrenKnown && (status === "loading" || status === "idle") && /* @__PURE__ */ jsxRuntime.jsx(FileBrowserStatusRow, { depth: depth + 1, kind: "loading" }),
+          !childrenKnown && status === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+            FileBrowserStatusRow,
+            {
+              depth: depth + 1,
+              kind: "error",
+              message: errorFor(entry.path),
+              onRetry: () => loadPath(entry.path, { reload: true })
+            }
+          ),
+          childrenKnown && (visibleChildren.length > 0 ? visibleChildren.map((child) => /* @__PURE__ */ jsxRuntime.jsx(FileBrowserNode, { entry: child, depth: depth + 1 }, child.path)) : /* @__PURE__ */ jsxRuntime.jsx(
+            FileBrowserStatusRow,
+            {
+              depth: depth + 1,
+              kind: rawChildren.length === 0 ? "empty" : "no-matches"
+            }
+          ))
+        ] })
+      ]
+    }
+  );
+}
+FileBrowserNode.displayName = "FileBrowserNode";
+function FileBrowserTree({ ariaLabel = "Files", className }) {
+  const ctx = useFileBrowser();
+  const {
+    path,
+    entriesFor,
+    visibleChildrenFor,
+    statusFor,
+    errorFor,
+    loadPath,
+    hasProvider,
+    visibleRows,
+    tabFocusPath,
+    setFocusedPath,
+    focusRow,
+    toggleExpanded,
+    isSelectable,
+    selectEntry,
+    navigate,
+    multiple
+  } = ctx;
+  const rootEntries = entriesFor(path);
+  const rootStatus = statusFor(path);
+  const rootChildren = rootEntries !== void 0 ? visibleChildrenFor(path) : [];
+  const moveTo = (row) => {
+    setFocusedPath(row.entry.path);
+    focusRow(row.entry.path);
+  };
+  const activate = (row) => {
+    if (row.entry.disabled) return;
+    if (isSelectable(row.entry)) selectEntry(row.entry);
+    if (row.expandable) toggleExpanded(row.entry.path);
+    else if (row.entry.kind === "dir" && !isSelectable(row.entry)) navigate(row.entry.path);
+  };
+  const handleKeyDown = (e) => {
+    const rows = visibleRows;
+    if (rows.length === 0) return;
+    const index = rows.findIndex((row) => row.entry.path === tabFocusPath);
+    const current = index >= 0 ? rows[index] : rows[0];
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (index < rows.length - 1) moveTo(rows[index + 1]);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (index > 0) moveTo(rows[index - 1]);
+        break;
+      case "Home":
+        e.preventDefault();
+        moveTo(rows[0]);
+        break;
+      case "End":
+        e.preventDefault();
+        moveTo(rows[rows.length - 1]);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (current.entry.disabled) break;
+        if (current.expandable && !current.expanded) {
+          toggleExpanded(current.entry.path);
+        } else if (current.expanded) {
+          const firstChild = rows[index + 1];
+          if (firstChild && firstChild.parentPath === current.entry.path) moveTo(firstChild);
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (current.expanded && !current.entry.disabled) {
+          toggleExpanded(current.entry.path);
+        } else if (current.parentPath) {
+          const parent = rows.find((row) => row.entry.path === current.parentPath);
+          if (parent) moveTo(parent);
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        activate(current);
+        break;
+      case " ":
+        e.preventDefault();
+        if (!current.entry.disabled) selectEntry(current.entry);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "tree",
+      "aria-label": ariaLabel,
+      "aria-multiselectable": multiple || void 0,
+      "data-react-fancy-file-browser-tree": "",
+      className: cn("min-h-0 flex-1 overflow-auto p-1", className),
+      onKeyDown: handleKeyDown,
+      children: [
+        rootEntries === void 0 && hasProvider && (rootStatus === "loading" || rootStatus === "idle") && /* @__PURE__ */ jsxRuntime.jsx(FileBrowserStatusRow, { depth: 0, kind: "loading" }),
+        rootEntries === void 0 && rootStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+          FileBrowserStatusRow,
+          {
+            depth: 0,
+            kind: "error",
+            message: errorFor(path),
+            onRetry: () => loadPath(path, { reload: true })
+          }
+        ),
+        rootEntries === void 0 && rootStatus === "idle" && !hasProvider && /* @__PURE__ */ jsxRuntime.jsx(FileBrowserStatusRow, { depth: 0, kind: "unknown" }),
+        rootEntries !== void 0 && (rootChildren.length > 0 ? rootChildren.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(FileBrowserNode, { entry, depth: 0 }, entry.path)) : /* @__PURE__ */ jsxRuntime.jsx(FileBrowserStatusRow, { depth: 0, kind: rootEntries.length === 0 ? "empty" : "no-matches" }))
+      ]
+    }
+  );
+}
+FileBrowserTree.displayName = "FileBrowserTree";
+var DEFAULT_SORT2 = { by: "name", direction: "asc" };
+function snapshotNodeToEntry(node) {
+  const { children: _children, ...entry } = node;
+  return entry;
+}
+function buildSnapshotMap(snapshot) {
+  const map = /* @__PURE__ */ new Map();
+  if (!snapshot || snapshot.length === 0) return map;
+  for (const root of snapshot) {
+    const parent = parentPath(root.path);
+    const list = map.get(parent);
+    if (list) list.push(snapshotNodeToEntry(root));
+    else map.set(parent, [snapshotNodeToEntry(root)]);
+  }
+  const walk2 = (nodes) => {
+    for (const node of nodes) {
+      if (node.children) {
+        map.set(node.path, node.children.map(snapshotNodeToEntry));
+        walk2(node.children);
+      }
+    }
+  };
+  walk2(snapshot);
+  return map;
+}
+function FileBrowserRoot({
+  provider,
+  snapshot,
+  select = "file",
+  multiple = false,
+  value,
+  defaultValue,
+  onChange,
+  path,
+  defaultPath = "/",
+  onPathChange,
+  expandedPaths,
+  defaultExpandedPaths,
+  onExpandedChange,
+  sort,
+  defaultSort,
+  onSortChange,
+  filter,
+  defaultFilter: defaultFilter2,
+  onFilterChange,
+  onError,
+  indentSize = 16,
+  showIcons = true,
+  className,
+  children
+}) {
+  const [currentPath, setCurrentPath] = useControllableState(path, defaultPath, onPathChange);
+  const [expanded, setExpanded] = useControllableState(
+    expandedPaths,
+    defaultExpandedPaths ?? [],
+    onExpandedChange
+  );
+  const [sortState, setSortState] = useControllableState(sort, defaultSort ?? DEFAULT_SORT2, onSortChange);
+  const [filterState, setFilterState] = useControllableState(filter, defaultFilter2 ?? "", onFilterChange);
+  const [internalValue, setInternalValue] = react.useState(
+    () => defaultValue ?? (multiple ? [] : null)
+  );
+  const selection = value !== void 0 ? value : internalValue;
+  const selectedPaths = react.useMemo(
+    () => selection == null ? [] : Array.isArray(selection) ? selection : [selection],
+    [selection]
+  );
+  const snapshotMap = react.useMemo(() => buildSnapshotMap(snapshot), [snapshot]);
+  const [loadedChildren, setLoadedChildren] = react.useState({});
+  const [loadStatus, setLoadStatus] = react.useState({});
+  const [loadErrors, setLoadErrors] = react.useState({});
+  const seqCounter = react.useRef(0);
+  const requestSeq = react.useRef({});
+  const stateRef = react.useRef({ snapshotMap, loadedChildren, loadStatus });
+  stateRef.current = { snapshotMap, loadedChildren, loadStatus };
+  const providerRef = react.useRef(provider);
+  providerRef.current = provider;
+  const onErrorRef = react.useRef(onError);
+  onErrorRef.current = onError;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const loadPath = react.useCallback((targetPath, options) => {
+    const prov = providerRef.current;
+    if (!prov) return;
+    const { snapshotMap: snap, loadedChildren: loaded, loadStatus: statuses } = stateRef.current;
+    const status = statuses[targetPath] ?? "idle";
+    if (status === "loading") return;
+    const known = snap.get(targetPath) ?? loaded[targetPath];
+    if (!options?.reload && (known !== void 0 || status === "error")) return;
+    const requestId = ++seqCounter.current;
+    requestSeq.current[targetPath] = requestId;
+    setLoadStatus((prev) => ({ ...prev, [targetPath]: "loading" }));
+    prov.loadChildren(targetPath).then(
+      (entries) => {
+        if (requestSeq.current[targetPath] !== requestId) return;
+        setLoadedChildren((prev) => ({ ...prev, [targetPath]: entries }));
+        setLoadStatus((prev) => ({ ...prev, [targetPath]: "loaded" }));
+        setLoadErrors((prev) => {
+          if (!(targetPath in prev)) return prev;
+          const next = { ...prev };
+          delete next[targetPath];
+          return next;
+        });
+      },
+      (error) => {
+        if (requestSeq.current[targetPath] !== requestId) return;
+        setLoadStatus((prev) => ({ ...prev, [targetPath]: "error" }));
+        setLoadErrors((prev) => ({
+          ...prev,
+          [targetPath]: error instanceof Error ? error.message : String(error)
+        }));
+        onErrorRef.current?.(targetPath, error);
+      }
+    );
+  }, []);
+  const entriesFor = react.useCallback(
+    (p) => snapshotMap.get(p) ?? loadedChildren[p],
+    [snapshotMap, loadedChildren]
+  );
+  const statusFor = react.useCallback(
+    (p) => {
+      if (snapshotMap.has(p)) return "loaded";
+      const status = loadStatus[p];
+      if (status) return status;
+      return loadedChildren[p] !== void 0 ? "loaded" : "idle";
+    },
+    [snapshotMap, loadStatus, loadedChildren]
+  );
+  const errorFor = react.useCallback((p) => loadErrors[p], [loadErrors]);
+  react.useEffect(() => {
+    if (!provider) return;
+    loadPath(currentPath);
+    for (const p of expanded) loadPath(p);
+  }, [provider, currentPath, expanded, snapshotMap, loadPath]);
+  const filterLower = filterState.trim().toLowerCase();
+  const visibleChildrenFor = react.useCallback(
+    (p) => {
+      const entries = entriesFor(p);
+      if (!entries) return [];
+      const filtered = filterLower ? entries.filter((entry) => entryMatchesFilter(entry, filterLower, entriesFor)) : entries.slice();
+      return filtered.sort((a, b) => compareFileEntries(a, b, sortState));
+    },
+    [entriesFor, filterLower, sortState]
+  );
+  const visibleRows = react.useMemo(() => {
+    const rows = [];
+    const visited = /* @__PURE__ */ new Set([currentPath]);
+    const walk2 = (p, depth, parent) => {
+      for (const entry of visibleChildrenFor(p)) {
+        const expandable = isEntryExpandable(entry, entriesFor(entry.path), !!provider);
+        const isOpen = expandable && expanded.includes(entry.path);
+        rows.push({ entry, depth, expandable, expanded: isOpen, parentPath: parent });
+        if (isOpen && !visited.has(entry.path)) {
+          visited.add(entry.path);
+          walk2(entry.path, depth + 1, entry.path);
+        }
+      }
+    };
+    walk2(currentPath, 0, null);
+    return rows;
+  }, [visibleChildrenFor, entriesFor, provider, expanded, currentPath]);
+  const entryIndex = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const list of snapshotMap.values()) {
+      for (const entry of list) map.set(entry.path, entry);
+    }
+    for (const list of Object.values(loadedChildren)) {
+      for (const entry of list) {
+        if (!map.has(entry.path)) map.set(entry.path, entry);
+      }
+    }
+    return map;
+  }, [snapshotMap, loadedChildren]);
+  const isSelectable = react.useCallback(
+    (entry) => !entry.disabled && (select === "both" || (select === "file" ? entry.kind === "file" : entry.kind === "dir")),
+    [select]
+  );
+  const isSelected = react.useCallback((p) => selectedPaths.includes(p), [selectedPaths]);
+  const commitSelection = react.useCallback(
+    (paths) => {
+      const nextValue = multiple ? paths : paths[0] ?? null;
+      if (value === void 0) setInternalValue(nextValue);
+      onChangeRef.current?.(
+        nextValue,
+        paths.map((p) => entryIndex.get(p)).filter((entry) => entry !== void 0)
+      );
+    },
+    [multiple, value, entryIndex]
+  );
+  const selectEntry = react.useCallback(
+    (entry) => {
+      if (!isSelectable(entry)) return;
+      if (multiple) {
+        commitSelection(
+          selectedPaths.includes(entry.path) ? selectedPaths.filter((p) => p !== entry.path) : [...selectedPaths, entry.path]
+        );
+      } else {
+        commitSelection([entry.path]);
+      }
+    },
+    [isSelectable, multiple, selectedPaths, commitSelection]
+  );
+  const toggleExpanded = react.useCallback(
+    (p) => {
+      setExpanded((prev) => prev.includes(p) ? prev.filter((x) => x !== p) : [...prev, p]);
+    },
+    [setExpanded]
+  );
+  const [focusedPath, setFocusedPath] = react.useState(null);
+  const navigate = react.useCallback(
+    (p) => {
+      setCurrentPath(p);
+      setFilterState("");
+      setFocusedPath(null);
+    },
+    [setCurrentPath, setFilterState]
+  );
+  const rowRefs = react.useRef(/* @__PURE__ */ new Map());
+  const registerRow = react.useCallback((p, el) => {
+    if (el) rowRefs.current.set(p, el);
+    else rowRefs.current.delete(p);
+  }, []);
+  const focusRow = react.useCallback((p) => {
+    rowRefs.current.get(p)?.focus();
+  }, []);
+  const tabFocusPath = react.useMemo(() => {
+    if (focusedPath && visibleRows.some((row) => row.entry.path === focusedPath)) {
+      return focusedPath;
+    }
+    return visibleRows[0]?.entry.path ?? null;
+  }, [focusedPath, visibleRows]);
+  const ctx = react.useMemo(
+    () => ({
+      entriesFor,
+      visibleChildrenFor,
+      statusFor,
+      errorFor,
+      loadPath,
+      hasProvider: !!provider,
+      path: currentPath,
+      navigate,
+      expandedPaths: expanded,
+      toggleExpanded,
+      select,
+      multiple,
+      selectedPaths,
+      isSelected,
+      isSelectable,
+      selectEntry,
+      sort: sortState,
+      setSort: setSortState,
+      filter: filterState,
+      setFilter: setFilterState,
+      visibleRows,
+      focusedPath,
+      setFocusedPath,
+      tabFocusPath,
+      focusRow,
+      registerRow,
+      indentSize,
+      showIcons
+    }),
+    [
+      entriesFor,
+      visibleChildrenFor,
+      statusFor,
+      errorFor,
+      loadPath,
+      provider,
+      currentPath,
+      navigate,
+      expanded,
+      toggleExpanded,
+      select,
+      multiple,
+      selectedPaths,
+      isSelected,
+      isSelectable,
+      selectEntry,
+      sortState,
+      setSortState,
+      filterState,
+      setFilterState,
+      visibleRows,
+      focusedPath,
+      tabFocusPath,
+      focusRow,
+      registerRow,
+      indentSize,
+      showIcons
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FileBrowserContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-file-browser": "",
+      className: cn(
+        "flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white text-sm dark:border-zinc-700 dark:bg-zinc-900",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FileBrowserPathBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(FileBrowserToolbar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(FileBrowserTree, {})
+      ] })
+    }
+  ) });
+}
+FileBrowserRoot.displayName = "FileBrowser";
+var FileBrowser = Object.assign(FileBrowserRoot, {
+  PathBar: FileBrowserPathBar,
+  Toolbar: FileBrowserToolbar,
+  Tree: FileBrowserTree,
+  Node: FileBrowserNode
+});
 
 // src/utils/media-type.ts
 var IMAGE_EXTS = /* @__PURE__ */ new Set([
@@ -14995,6 +15914,7 @@ exports.EmojiSelect = EmojiSelect;
 exports.FauxClient = FauxClient;
 exports.Field = Field;
 exports.FieldModeContext = FieldModeContext;
+exports.FileBrowser = FileBrowser;
 exports.FileUpload = FileUpload;
 exports.Form = Form;
 exports.FormProvider = FormProvider;
@@ -15075,6 +15995,7 @@ exports.useDropdown = useDropdown;
 exports.useEditor = useEditor;
 exports.useEscapeKey = useEscapeKey;
 exports.useFieldMode = useFieldMode;
+exports.useFileBrowser = useFileBrowser;
 exports.useFileUpload = useFileUpload;
 exports.useFloatingPosition = useFloatingPosition;
 exports.useFocusTrap = useFocusTrap;