vfs-kit 1.0.0 → 1.0.2

package/dist/components/index.mjs

@@ -0,0 +1,1197 @@
+"use client";
+import {
+  useVfsEngine,
+  useVfsExpanded,
+  useVfsSelection,
+  useVfsTabs
+} from "../chunk-POSVS4C7.mjs";
+import "../chunk-SWRBVSS6.mjs";
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-7OQI6PNM.mjs";
+
+// src/react/components/inline-input.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InlineInput({
+  initialValue = "",
+  onSubmit,
+  onComplete,
+  validate,
+  icon,
+  className,
+  selectOnMount = true,
+  trim = true
+}) {
+  const inputRef = useRef(null);
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState(null);
+  const committed = useRef(false);
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.focus();
+    if (selectOnMount) el.select();
+  }, [selectOnMount]);
+  const commit = () => {
+    var _a;
+    if (committed.current) return;
+    const final = trim ? value.trim() : value;
+    if (!final) {
+      onComplete();
+      return;
+    }
+    if (validate) {
+      const err = validate(final);
+      if (err) {
+        setError(err);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        return;
+      }
+    }
+    committed.current = true;
+    onSubmit(final);
+    onComplete();
+  };
+  const cancel = () => {
+    if (committed.current) return;
+    committed.current = true;
+    onComplete();
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cancel();
+    }
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, width: "100%" }, children: [
+    icon && /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: icon }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          value,
+          onChange: (e) => {
+            setValue(e.target.value);
+            setError(null);
+          },
+          onKeyDown,
+          onBlur: commit,
+          className,
+          style: { width: "100%", boxSizing: "border-box" },
+          spellCheck: false,
+          autoComplete: "off",
+          autoCorrect: "off"
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        top: "100%",
+        left: 0,
+        zIndex: 100,
+        fontSize: 11,
+        color: "#f87171",
+        whiteSpace: "nowrap",
+        pointerEvents: "none"
+      }, children: error })
+    ] })
+  ] });
+}
+
+// src/react/components/file-renderer.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function FileRendererBase({
+  node,
+  content: externalContent,
+  children,
+  fallback,
+  onLoad,
+  onError
+}) {
+  const [content, setContent] = useState2(externalContent != null ? externalContent : null);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    if (externalContent !== void 0) {
+      setContent(externalContent);
+      setError(null);
+      return;
+    }
+    if (!node) {
+      setContent(null);
+      setError(null);
+      return;
+    }
+    setContent(null);
+  }, [node == null ? void 0 : node.id, externalContent]);
+  if (!node) return /* @__PURE__ */ jsx2(Fragment, { children: fallback != null ? fallback : null });
+  return /* @__PURE__ */ jsx2(Fragment, { children: children({ node, content, loading, error }) });
+}
+function FileRenderer({
+  workspaceId,
+  activeNodeId,
+  children,
+  fallback,
+  onLoad,
+  onError
+}) {
+  const { tree } = useVfsEngine(workspaceId);
+  const [activeNode, setActiveNode] = useState2(null);
+  const [content, setContent] = useState2(null);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    if (!activeNodeId) {
+      setActiveNode(null);
+      setContent(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    const resolveAndLoad = () => __async(null, null, function* () {
+      setContent(null);
+      setError(null);
+      setLoading(true);
+      try {
+        const node = yield tree.getNode(activeNodeId);
+        if (cancelled) return;
+        if (!node || node.kind !== "file") {
+          setActiveNode(null);
+          setLoading(false);
+          return;
+        }
+        const fileNode = node;
+        setActiveNode(fileNode);
+        const bytes = yield tree.readFile(activeNodeId);
+        if (cancelled) return;
+        setContent(bytes);
+        onLoad == null ? void 0 : onLoad(fileNode, bytes);
+      } catch (err) {
+        if (cancelled) return;
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        onError == null ? void 0 : onError(activeNode, e);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    });
+    resolveAndLoad();
+    return () => {
+      cancelled = true;
+    };
+  }, [activeNodeId]);
+  if (!activeNode) return /* @__PURE__ */ jsx2(Fragment, { children: fallback != null ? fallback : null });
+  return /* @__PURE__ */ jsx2(Fragment, { children: children({ node: activeNode, content, loading, error }) });
+}
+
+// src/react/components/tab-list.tsx
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable,
+  sortableKeyboardCoordinates
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DefaultTab({
+  tab,
+  isActive,
+  onSetActive,
+  onClose,
+  dragHandleProps
+}) {
+  const handles = dragHandleProps(tab.id);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    __spreadProps(__spreadValues({}, handles), {
+      onClick: () => onSetActive(tab.id),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "4px 12px",
+        cursor: "pointer",
+        userSelect: "none",
+        borderBottom: isActive ? "2px solid #3b82f6" : "2px solid transparent",
+        opacity: 1
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("span", { style: { fontSize: 13 }, children: [
+          tab.isDirty ? `\u25CF ${tab.title}` : tab.title,
+          tab.isLocked ? " \u{1F512}" : ""
+        ] }),
+        !tab.isLocked && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose(tab.id);
+            },
+            style: { background: "none", border: "none", cursor: "pointer", padding: 0, lineHeight: 1 },
+            children: "\xD7"
+          }
+        )
+      ]
+    })
+  );
+}
+function SortableTabWrapper({
+  tab,
+  isActive,
+  onSetActive,
+  onClose,
+  renderTab,
+  dragHandleProps
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: tab.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    flexShrink: 0
+  };
+  const mergedDragHandleProps = (tabId) => __spreadValues(__spreadValues(__spreadValues({}, dragHandleProps(tabId)), attributes), listeners);
+  return /* @__PURE__ */ jsx3("div", { ref: setNodeRef, style, children: renderTab ? null : /* @__PURE__ */ jsx3(
+    DefaultTab,
+    {
+      tab,
+      isActive,
+      onSetActive,
+      onClose,
+      dragHandleProps: mergedDragHandleProps
+    }
+  ) });
+}
+function TabListBase({
+  tabs,
+  activeTabId,
+  onReorder,
+  onClose,
+  onSetActive,
+  onLock,
+  onUnlock,
+  sortable = false,
+  children,
+  className
+}) {
+  var _a;
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      onReorder(String(active.id), String(over.id));
+    }
+  };
+  const dragHandleProps = (_tabId) => ({});
+  const renderProps = {
+    tabs,
+    activeTabId,
+    activeTab: (_a = tabs.find((t) => t.id === activeTabId)) != null ? _a : null,
+    dragHandleProps,
+    onClose,
+    onSetActive,
+    onLock,
+    onUnlock
+  };
+  if (!sortable) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className,
+        style: { display: "flex", overflow: "hidden" },
+        children: children ? children(renderProps) : tabs.map((tab) => /* @__PURE__ */ jsx3(
+          DefaultTab,
+          {
+            tab,
+            isActive: tab.id === activeTabId,
+            onSetActive,
+            onClose,
+            dragHandleProps
+          },
+          tab.id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ jsx3(
+        SortableContext,
+        {
+          items: tabs.map((t) => t.id),
+          strategy: horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className,
+              style: { display: "flex", overflow: "hidden" },
+              children: children ? tabs.map((tab) => /* @__PURE__ */ jsx3(
+                SortableTabWrapper,
+                {
+                  tab,
+                  isActive: tab.id === activeTabId,
+                  onSetActive,
+                  onClose,
+                  dragHandleProps
+                },
+                tab.id
+              )) : tabs.map((tab) => /* @__PURE__ */ jsx3(
+                SortableTabWrapper,
+                {
+                  tab,
+                  isActive: tab.id === activeTabId,
+                  onSetActive,
+                  onClose,
+                  dragHandleProps
+                },
+                tab.id
+              ))
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function TabList({
+  workspaceIds,
+  sortable,
+  children,
+  className
+}) {
+  const tabs = useVfsTabs({ workspaceIds });
+  return /* @__PURE__ */ jsx3(
+    TabListBase,
+    {
+      tabs: tabs.tabs,
+      activeTabId: tabs.activeTabId,
+      onReorder: tabs.reorder,
+      onClose: tabs.close,
+      onSetActive: tabs.setActive,
+      onLock: tabs.lock,
+      onUnlock: tabs.unlock,
+      sortable,
+      className,
+      children: children ? (props) => children(__spreadProps(__spreadValues({}, props), {
+        dragHandleProps: props.dragHandleProps
+      })) : void 0
+    }
+  );
+}
+
+// src/react/components/file-tree/file-tree.tsx
+import { useEffect as useEffect5, useCallback as useCallback2, useState as useState5, useMemo as useMemo2 } from "react";
+
+// src/react/components/file-tree/file-tree-base.tsx
+import {
+  useRef as useRef3,
+  useEffect as useEffect4,
+  useCallback,
+  useState as useState4,
+  useMemo
+} from "react";
+import {
+  DndContext as DndContext2,
+  DragOverlay,
+  PointerSensor as PointerSensor2,
+  KeyboardSensor as KeyboardSensor2,
+  useSensor as useSensor2,
+  useSensors as useSensors2,
+  pointerWithin
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as sortableKeyboardCoordinates2 } from "@dnd-kit/sortable";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+// src/react/components/file-tree/helpers.ts
+var ROOT_DROP_ID = "@@root-drop-zone";
+function flattenTree(rootIds, nodes, childIndex, expanded) {
+  const result = [];
+  const visited = /* @__PURE__ */ new Set();
+  function walk(ids, level) {
+    var _a;
+    for (const id of ids) {
+      if (visited.has(id)) continue;
+      const node = nodes.get(id);
+      if (!node || node.deletedAt !== null) continue;
+      visited.add(id);
+      const children = (_a = childIndex.get(id)) != null ? _a : [];
+      const isOpen = expanded.has(id);
+      const hasChildren = children.length > 0;
+      result.push({ node, level, index: result.length, isOpen, hasChildren });
+      if (isOpen && hasChildren) walk(children, level + 1);
+    }
+  }
+  walk(rootIds, 0);
+  return result;
+}
+function isDescendantOf(draggedId, targetId, nodes) {
+  let current = nodes.get(targetId);
+  while (current == null ? void 0 : current.parentId) {
+    if (current.parentId === draggedId) return true;
+    current = nodes.get(current.parentId);
+  }
+  return false;
+}
+function resolveDropTarget(overId, draggedId, nodes) {
+  var _a;
+  if (overId === ROOT_DROP_ID) return { folderId: null, blocked: false };
+  const overNode = nodes.get(overId);
+  if (!overNode) return null;
+  const folderId = overNode.kind === "folder" ? overNode.id : (_a = overNode.parentId) != null ? _a : null;
+  const blocked = folderId !== null && (folderId === draggedId || isDescendantOf(draggedId, folderId, nodes));
+  return { folderId, blocked };
+}
+function measureVisibleSubtree(folderIndex, flatNodes) {
+  const folderLevel = flatNodes[folderIndex].level;
+  let rowCount = 0;
+  for (let i = folderIndex + 1; i < flatNodes.length; i++) {
+    if (flatNodes[i].level <= folderLevel) break;
+    rowCount++;
+  }
+  return { rowCount };
+}
+function resolveInlineCreateParent(selection, activeNodeId, nodes) {
+  var _a, _b;
+  const candidateId = (_a = activeNodeId != null ? activeNodeId : selection[selection.length - 1]) != null ? _a : null;
+  if (!candidateId) return null;
+  const node = nodes.get(candidateId);
+  if (!node) return null;
+  if (node.kind === "folder") return node.id;
+  return (_b = node.parentId) != null ? _b : null;
+}
+
+// src/react/components/file-tree/components.tsx
+import { useRef as useRef2, useEffect as useEffect3, useState as useState3 } from "react";
+import {
+  useDraggable,
+  useDroppable
+} from "@dnd-kit/core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DefaultFolderOverlay({
+  isBlocked,
+  isEmpty
+}) {
+  return /* @__PURE__ */ jsx4("div", { style: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    borderRadius: 3,
+    border: `1px solid ${isBlocked ? "#ef4444" : "#3b82f6"}`,
+    background: isBlocked ? "rgba(239,68,68,0.07)" : "rgba(59,130,246,0.08)",
+    display: isEmpty ? "flex" : "block",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 11,
+    color: isBlocked ? "#ef4444" : "#3b82f6"
+  }, children: isEmpty && !isBlocked && /* @__PURE__ */ jsx4("span", { style: { pointerEvents: "none" }, children: "drop here" }) });
+}
+function DropZoneOverlay({
+  scrollTop,
+  folderIndex,
+  rowCount,
+  itemHeight,
+  emptyStateHeight,
+  mode,
+  isBlocked,
+  targetFolder,
+  renderOverlay
+}) {
+  const headerTop = folderIndex * itemHeight - scrollTop;
+  const headerHeight = itemHeight;
+  const isEmpty = rowCount === 0;
+  const bodyHeight = isEmpty ? emptyStateHeight : rowCount * itemHeight;
+  const renderProps = {
+    targetFolder,
+    visibleRowCount: rowCount,
+    isEmpty,
+    mode,
+    isBlocked
+  };
+  const content = renderOverlay ? renderOverlay(renderProps) : /* @__PURE__ */ jsx4(DefaultFolderOverlay, { isBlocked, isEmpty });
+  const baseStyle = {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    pointerEvents: "none",
+    zIndex: 10
+  };
+  if (mode === "header") return /* @__PURE__ */ jsx4("div", { style: __spreadProps(__spreadValues({}, baseStyle), { top: headerTop, height: headerHeight }), children: content });
+  if (mode === "body") return /* @__PURE__ */ jsx4("div", { style: __spreadProps(__spreadValues({}, baseStyle), { top: headerTop + headerHeight, height: bodyHeight }), children: content });
+  return /* @__PURE__ */ jsx4("div", { style: __spreadProps(__spreadValues({}, baseStyle), { top: headerTop, height: headerHeight + bodyHeight }), children: content });
+}
+function InlineCreateRow({ kind, level, onSubmit, onCancel }) {
+  const inputRef = useRef2(null);
+  const committed = useRef2(false);
+  useEffect3(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const commit = () => {
+    var _a, _b;
+    if (committed.current) return;
+    const val = (_b = (_a = inputRef.current) == null ? void 0 : _a.value.trim()) != null ? _b : "";
+    if (!val) {
+      onCancel();
+      return;
+    }
+    committed.current = true;
+    onSubmit(val);
+  };
+  const cancel = () => {
+    if (committed.current) return;
+    committed.current = true;
+    onCancel();
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: {
+    paddingLeft: level * 12 + 8,
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    height: 28,
+    background: "rgba(59,130,246,0.08)",
+    borderLeft: "2px solid #3b82f6"
+  }, children: [
+    /* @__PURE__ */ jsx4("span", { style: { fontSize: 12, flexShrink: 0, color: "#60a5fa" }, children: kind === "folder" ? "\u25B6" : "\xB7" }),
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        ref: inputRef,
+        defaultValue: "",
+        onKeyDown: (e) => {
+          e.stopPropagation();
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          }
+          if (e.key === "Escape") {
+            e.preventDefault();
+            cancel();
+          }
+        },
+        onBlur: cancel,
+        style: {
+          flex: 1,
+          background: "transparent",
+          border: "none",
+          outline: "none",
+          fontSize: 13,
+          color: "#d4d4d4",
+          padding: 0,
+          fontFamily: "inherit"
+        },
+        spellCheck: false,
+        autoComplete: "off"
+      }
+    )
+  ] });
+}
+function DraggableNode({
+  flatNode,
+  renderContent
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: flatNode.node.id });
+  return /* @__PURE__ */ jsx4("div", { ref: setNodeRef, style: { opacity: isDragging ? 0.35 : 1 }, children: renderContent({ dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners), isDragging }) });
+}
+function DroppableNode({
+  flatNode,
+  children
+}) {
+  const { setNodeRef } = useDroppable({ id: flatNode.node.id });
+  return /* @__PURE__ */ jsx4("div", { ref: setNodeRef, children });
+}
+function RootDropZone({ children }) {
+  const { setNodeRef } = useDroppable({ id: ROOT_DROP_ID });
+  return /* @__PURE__ */ jsx4("div", { ref: setNodeRef, style: { minHeight: "100%", position: "relative" }, children });
+}
+function DefaultNode({
+  flatNode,
+  isSelected,
+  isActive,
+  isDragging,
+  isDragSession,
+  onClick,
+  dragHandleProps,
+  renderActions,
+  onOpen
+}) {
+  const [hovered, setHovered] = useState3(false);
+  const { node, level } = flatNode;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    __spreadProps(__spreadValues({}, dragHandleProps), {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        paddingLeft: level * 12 + 8,
+        display: "flex",
+        alignItems: "center",
+        height: 28,
+        cursor: "pointer",
+        userSelect: "none",
+        backgroundColor: isSelected ? "rgba(59,130,246,0.1)" : isActive ? "rgba(255,255,255,0.05)" : !isDragSession && hovered ? "rgba(255,255,255,0.03)" : "transparent",
+        opacity: isDragging ? 0.35 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsx4("span", { style: { marginRight: 6, fontSize: 12 }, children: node.kind === "folder" ? flatNode.isOpen ? "\u25BC" : "\u25B6" : "\xB7" }),
+        /* @__PURE__ */ jsx4("span", { style: {
+          flex: 1,
+          fontSize: 13,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }, children: node.name }),
+        renderActions == null ? void 0 : renderActions(node)
+      ]
+    })
+  );
+}
+
+// src/react/components/file-tree/file-tree-base.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_EMPTY_HEIGHT = 28;
+function FileTreeBase({
+  nodes,
+  childIndex,
+  rootIds,
+  expandedIds,
+  selection,
+  activeNodeId,
+  renamingId,
+  onExpand,
+  onCollapse,
+  onSelect,
+  onToggle,
+  onRangeSelect,
+  onOpen,
+  onRename,
+  onDelete,
+  onMove,
+  onReorder,
+  onSetRenaming,
+  onCreate,
+  inlineCreate,
+  onCancelCreate,
+  sortable = false,
+  draggable = false,
+  virtualized = false,
+  virtualizer: virtualizerOverride,
+  itemHeight = 28,
+  renderNode,
+  renderActions,
+  renderEmpty,
+  children,
+  onKeyDown: customKeyDown,
+  className,
+  folderOverlay
+}) {
+  var _a, _b, _c;
+  const containerRef = useRef3(null);
+  const hoverTimer = useRef3(null);
+  const [activeId, setActiveId] = useState4(null);
+  const [dropTarget, setDropTarget] = useState4(null);
+  const [scrollTop, setScrollTop] = useState4(0);
+  useEffect4(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const onScroll = () => setScrollTop(el.scrollTop);
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, []);
+  const flatNodes = flattenTree(rootIds, nodes, childIndex, expandedIds);
+  const orderedIds = flatNodes.map((f) => f.node.id);
+  const isDragSession = activeId !== null;
+  const sensors = useSensors2(
+    useSensor2(PointerSensor2, { activationConstraint: { distance: 6 } }),
+    useSensor2(KeyboardSensor2, { coordinateGetter: sortableKeyboardCoordinates2 })
+  );
+  const handleDragStart = useCallback((e) => {
+    setActiveId(String(e.active.id));
+    setDropTarget(null);
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    if (!e.over) {
+      setDropTarget(null);
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+      return;
+    }
+    const overId = String(e.over.id);
+    const draggedId = String(e.active.id);
+    const target = resolveDropTarget(overId, draggedId, nodes);
+    setDropTarget(target);
+    if ((target == null ? void 0 : target.folderId) && !target.blocked && !expandedIds.has(target.folderId)) {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+      hoverTimer.current = setTimeout(() => onExpand(target.folderId), 800);
+    } else {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+    }
+  }, [nodes, expandedIds, onExpand]);
+  const handleDragEnd = useCallback((e) => {
+    if (hoverTimer.current) clearTimeout(hoverTimer.current);
+    const { active, over } = e;
+    setActiveId(null);
+    setDropTarget(null);
+    const draggedId = String(active.id);
+    if (!over) {
+      onMove(selection.includes(draggedId) ? selection : [draggedId], null);
+      return;
+    }
+    const overId = String(over.id);
+    if (draggedId === overId) return;
+    const target = resolveDropTarget(overId, draggedId, nodes);
+    if (!target || target.blocked) return;
+    const draggedNode = nodes.get(draggedId);
+    if (draggedNode && draggedNode.parentId === target.folderId) return;
+    onMove(selection.includes(draggedId) ? selection : [draggedId], target.folderId);
+  }, [nodes, selection, onMove]);
+  const handleDragCancel = useCallback(() => {
+    if (hoverTimer.current) clearTimeout(hoverTimer.current);
+    setActiveId(null);
+    setDropTarget(null);
+  }, []);
+  const focusedIndex = useRef3(0);
+  const defaultKeyHandler = useCallback((e, node) => {
+    const idx = flatNodes.findIndex((f) => f.node.id === node.id);
+    const flat = flatNodes[idx];
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = flatNodes[idx + 1];
+        if (next) {
+          onSelect(next.node.id);
+          focusedIndex.current = idx + 1;
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = flatNodes[idx - 1];
+        if (prev) {
+          onSelect(prev.node.id);
+          focusedIndex.current = idx - 1;
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (node.kind === "folder") {
+          if (flat.isOpen) {
+            const first = flatNodes[idx + 1];
+            if (first) onSelect(first.node.id);
+          } else onExpand(node.id);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (node.kind === "folder" && flat.isOpen) onCollapse(node.id);
+        else if (node.parentId) onSelect(node.parentId);
+        break;
+      }
+      case "Enter": {
+        e.preventDefault();
+        onOpen(node);
+        break;
+      }
+      case "F2": {
+        e.preventDefault();
+        onSetRenaming(node.id);
+        break;
+      }
+      case "Delete":
+      case "Backspace": {
+        e.preventDefault();
+        onDelete(selection.includes(node.id) ? selection : [node.id]);
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        onSetRenaming(null);
+        break;
+      }
+    }
+  }, [flatNodes, onSelect, onExpand, onCollapse, onOpen, onSetRenaming, onDelete, selection]);
+  const handleKeyDown = useCallback((e, node) => {
+    if (customKeyDown) customKeyDown(e, node, defaultKeyHandler);
+    else defaultKeyHandler(e, node);
+  }, [customKeyDown, defaultKeyHandler]);
+  const dropZoneData = useMemo(() => {
+    if (!dropTarget || !folderOverlay || dropTarget.folderId === null) return null;
+    const { folderId, blocked } = dropTarget;
+    const folderIndex = flatNodes.findIndex((f) => f.node.id === folderId);
+    if (folderIndex === -1) return null;
+    const { rowCount } = measureVisibleSubtree(folderIndex, flatNodes);
+    const targetFolder = nodes.get(folderId);
+    if (!targetFolder) return null;
+    return { folderIndex, rowCount, targetFolder, blocked };
+  }, [dropTarget, folderOverlay, flatNodes, nodes]);
+  const inlineInsertIndex = useMemo(() => {
+    if (!inlineCreate) return null;
+    const { parentId } = inlineCreate;
+    if (parentId === null) return 0;
+    const folderIdx = flatNodes.findIndex((f) => f.node.id === parentId);
+    if (folderIdx === -1) return flatNodes.length;
+    return folderIdx + 1;
+  }, [inlineCreate, flatNodes]);
+  const inlineLevel = useMemo(() => {
+    if (!(inlineCreate == null ? void 0 : inlineCreate.parentId)) return 0;
+    const fn = flatNodes.find((f) => f.node.id === inlineCreate.parentId);
+    return fn ? fn.level + 1 : 0;
+  }, [inlineCreate, flatNodes]);
+  const renderFlatNode = useCallback((flatNode) => {
+    const { node } = flatNode;
+    const isSelected = selection.includes(node.id);
+    const isActive = activeNodeId === node.id;
+    const isDragging = activeId === node.id;
+    const isOver = !!dropTarget && dropTarget.folderId === node.id && !dropTarget.blocked;
+    const isOverBlocked = !!dropTarget && dropTarget.folderId === node.id && !!dropTarget.blocked;
+    const isRenaming = renamingId === node.id;
+    const handleClick = (e) => {
+      var _a2;
+      if (e.ctrlKey || e.metaKey) onToggle(node.id);
+      else if (e.shiftKey) onRangeSelect(orderedIds, (_a2 = selection[selection.length - 1]) != null ? _a2 : node.id, node.id);
+      else {
+        onSelect(node.id);
+        if (node.kind === "folder") {
+          expandedIds.has(node.id) ? onCollapse(node.id) : onExpand(node.id);
+        }
+      }
+    };
+    const nodeProps = {
+      flatNode,
+      isSelected,
+      isActive,
+      isDragging,
+      isOver,
+      isOverBlocked,
+      isRenaming,
+      isDragSession,
+      setRenaming: (v) => onSetRenaming(v ? node.id : null),
+      dragHandleProps: {},
+      style: {},
+      onClick: handleClick
+    };
+    const content = /* @__PURE__ */ jsx5(
+      "div",
+      {
+        onKeyDown: isRenaming ? void 0 : (e) => handleKeyDown(e, node),
+        tabIndex: isRenaming ? -1 : 0,
+        children: renderNode ? renderNode(nodeProps) : /* @__PURE__ */ jsx5(DefaultNode, __spreadProps(__spreadValues({}, nodeProps), { renderActions, onOpen }))
+      }
+    );
+    if (!draggable) return /* @__PURE__ */ jsx5("div", { children: content }, node.id);
+    return /* @__PURE__ */ jsx5(DroppableNode, { flatNode, children: /* @__PURE__ */ jsx5(
+      DraggableNode,
+      {
+        flatNode,
+        renderContent: ({ dragHandleProps, isDragging: dndDragging }) => renderNode ? renderNode(__spreadProps(__spreadValues({}, nodeProps), { dragHandleProps, isDragging: dndDragging })) : /* @__PURE__ */ jsx5(DefaultNode, __spreadProps(__spreadValues({}, nodeProps), { dragHandleProps, isDragging: dndDragging, renderActions, onOpen }))
+      }
+    ) }, node.id);
+  }, [
+    selection,
+    activeNodeId,
+    activeId,
+    dropTarget,
+    renamingId,
+    expandedIds,
+    isDragSession,
+    onSelect,
+    onToggle,
+    onRangeSelect,
+    onExpand,
+    onCollapse,
+    onOpen,
+    onSetRenaming,
+    renderNode,
+    renderActions,
+    handleKeyDown,
+    draggable,
+    orderedIds
+  ]);
+  const tanstackVirtualizer = useVirtualizer({
+    count: flatNodes.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => itemHeight,
+    enabled: virtualized && !virtualizerOverride
+  });
+  const renderList = () => {
+    var _a2;
+    if (flatNodes.length === 0 && !inlineCreate) return (_a2 = renderEmpty == null ? void 0 : renderEmpty()) != null ? _a2 : null;
+    if (virtualizerOverride) {
+      const items = flatNodes.map((_, i) => ({
+        index: i,
+        start: i * virtualizerOverride.itemHeight,
+        size: virtualizerOverride.itemHeight
+      }));
+      return virtualizerOverride.renderItems(
+        items,
+        flatNodes.length * virtualizerOverride.itemHeight,
+        (index) => renderFlatNode(flatNodes[index])
+      );
+    }
+    if (virtualized) {
+      const virtualItems = tanstackVirtualizer.getVirtualItems();
+      return /* @__PURE__ */ jsx5("div", { style: { height: tanstackVirtualizer.getTotalSize(), position: "relative" }, children: virtualItems.map((vItem) => /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            width: "100%",
+            height: itemHeight,
+            transform: `translateY(${vItem.start}px)`
+          },
+          children: renderFlatNode(flatNodes[vItem.index])
+        },
+        vItem.key
+      )) });
+    }
+    const inlineRow = inlineCreate ? /* @__PURE__ */ jsx5(
+      InlineCreateRow,
+      {
+        kind: inlineCreate.kind,
+        level: inlineLevel,
+        onSubmit: (name) => onCreate(inlineCreate.kind, inlineCreate.parentId, name),
+        onCancel: onCancelCreate
+      },
+      "@@inline-create"
+    ) : null;
+    if (inlineRow === null) return flatNodes.map(renderFlatNode);
+    const rows = [];
+    flatNodes.forEach((fn, i) => {
+      if (inlineInsertIndex === i) rows.push(inlineRow);
+      rows.push(renderFlatNode(fn));
+    });
+    if (inlineInsertIndex !== null && inlineInsertIndex >= flatNodes.length) rows.push(inlineRow);
+    return rows;
+  };
+  if (children) {
+    return /* @__PURE__ */ jsx5("div", { ref: containerRef, className, children: children({ flatNodes, renderNode: renderFlatNode }) });
+  }
+  const emptyStateHeight = (_a = folderOverlay == null ? void 0 : folderOverlay.emptyStateHeight) != null ? _a : DEFAULT_EMPTY_HEIGHT;
+  const treeBody = /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { overflow: "auto", outline: "none", position: "relative", height: "100%" },
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx5(RootDropZone, { children: renderList() }),
+        dropZoneData && folderOverlay && /* @__PURE__ */ jsx5(
+          DropZoneOverlay,
+          {
+            scrollTop,
+            folderIndex: dropZoneData.folderIndex,
+            rowCount: dropZoneData.rowCount,
+            itemHeight,
+            emptyStateHeight,
+            mode: folderOverlay.mode,
+            isBlocked: dropZoneData.blocked,
+            targetFolder: dropZoneData.targetFolder,
+            renderOverlay: folderOverlay.renderOverlay
+          }
+        ),
+        /* @__PURE__ */ jsx5(DragOverlay, { dropAnimation: null, children: activeId ? /* @__PURE__ */ jsxs4("div", { style: {
+          padding: "4px 12px",
+          background: "rgba(30,30,30,0.95)",
+          border: "1px solid #3b82f6",
+          borderRadius: 4,
+          fontSize: 13,
+          color: "#fff",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+          backdropFilter: "blur(8px)",
+          minWidth: 120,
+          pointerEvents: "none",
+          userSelect: "none"
+        }, children: [
+          (_c = (_b = nodes.get(activeId)) == null ? void 0 : _b.name) != null ? _c : "",
+          selection.length > 1 && /* @__PURE__ */ jsxs4("span", { style: { color: "#555", fontSize: 11 }, children: [
+            "+",
+            selection.length - 1,
+            " more"
+          ] })
+        ] }) : null })
+      ]
+    }
+  );
+  if (!draggable) return treeBody;
+  return /* @__PURE__ */ jsx5(
+    DndContext2,
+    {
+      sensors,
+      collisionDetection: pointerWithin,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: treeBody
+    }
+  );
+}
+
+// src/react/components/file-tree/file-tree.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var EMPTY_TREE = () => ({
+  nodes: /* @__PURE__ */ new Map(),
+  childIndex: /* @__PURE__ */ new Map(),
+  rootIds: []
+});
+function FileTree(_a) {
+  var _b = _a, {
+    workspaceId,
+    inlineCreate: inlineCreateProp,
+    onCancelCreate
+  } = _b, rest = __objRest(_b, [
+    "workspaceId",
+    "inlineCreate",
+    "onCancelCreate"
+  ]);
+  var _a2, _b2, _c;
+  const { tree, fs, status } = useVfsEngine(workspaceId);
+  const workspaceIds = useMemo2(
+    () => workspaceId ? [workspaceId] : void 0,
+    [workspaceId]
+  );
+  const tabs = useVfsTabs({ workspaceIds });
+  const selection = useVfsSelection();
+  const expanded = useVfsExpanded({ workspaceIds });
+  const [treeState, setTreeState] = useState5(EMPTY_TREE);
+  const [renamingId, setRenamingId] = useState5(null);
+  useEffect5(() => {
+    let cancelled = false;
+    const sync = () => __async(null, null, function* () {
+      const roots = yield tree.getChildren(null);
+      if (cancelled) return;
+      const newNodes = /* @__PURE__ */ new Map();
+      const newIndex = /* @__PURE__ */ new Map();
+      const visited = /* @__PURE__ */ new Set();
+      const walk = (parentId) => __async(null, null, function* () {
+        const children = yield tree.getChildren(parentId);
+        if (cancelled) return;
+        newIndex.set(parentId != null ? parentId : "@@root", children.map((c) => c.id));
+        for (const child of children) {
+          if (visited.has(child.id)) continue;
+          visited.add(child.id);
+          newNodes.set(child.id, child);
+          if (child.kind === "folder") {
+            yield walk(child.id);
+            if (cancelled) return;
+          }
+        }
+      });
+      yield walk(null);
+      if (cancelled) return;
+      setTreeState({
+        nodes: newNodes,
+        childIndex: newIndex,
+        rootIds: roots.map((r) => r.id)
+      });
+    });
+    sync();
+    return () => {
+      cancelled = true;
+    };
+  }, [status.version]);
+  const resolvedInlineCreate = useMemo2(() => {
+    var _a3, _b3;
+    if (!inlineCreateProp) return null;
+    const parentId = resolveInlineCreateParent(
+      selection.selection,
+      (_b3 = (_a3 = tabs.activeTab) == null ? void 0 : _a3.nodeId) != null ? _b3 : null,
+      treeState.nodes
+    );
+    if (parentId && !expanded.expandedIds.has(parentId)) {
+      expanded.expand(parentId);
+    }
+    return { kind: inlineCreateProp.kind, parentId };
+  }, [inlineCreateProp, selection.selection, (_a2 = tabs.activeTab) == null ? void 0 : _a2.nodeId, treeState.nodes, expanded]);
+  const handleCreate = useCallback2((kind, parentId, name) => __async(null, null, function* () {
+    if (kind === "file") {
+      yield fs.createFile(parentId, name);
+    } else {
+      yield fs.createFolder(parentId, name);
+      if (parentId) expanded.expand(parentId);
+    }
+    onCancelCreate == null ? void 0 : onCancelCreate();
+  }), [fs, expanded, onCancelCreate]);
+  const handleMove = useCallback2((ids, targetId) => __async(null, null, function* () {
+    yield fs.move(ids, targetId);
+  }), [fs]);
+  return /* @__PURE__ */ jsx6(
+    FileTreeBase,
+    __spreadValues({
+      nodes: treeState.nodes,
+      childIndex: treeState.childIndex,
+      rootIds: treeState.rootIds,
+      expandedIds: expanded.expandedIds,
+      selection: selection.selection,
+      activeNodeId: (_c = (_b2 = tabs.activeTab) == null ? void 0 : _b2.nodeId) != null ? _c : null,
+      renamingId,
+      onExpand: expanded.expand,
+      onCollapse: expanded.collapse,
+      onSelect: selection.select,
+      onToggle: selection.toggle,
+      onRangeSelect: selection.selectRange,
+      onOpen: (node) => {
+        if (node.kind === "file") tabs.open(node.id, workspaceId != null ? workspaceId : "");
+        else expanded.toggle(node.id);
+      },
+      onRename: (id, newName) => fs.rename(id, newName),
+      onDelete: (ids) => fs.delete(ids),
+      onMove: handleMove,
+      onReorder: (parentId, orderedIds) => fs.reorder(parentId, orderedIds),
+      onSetRenaming: setRenamingId,
+      onCreate: handleCreate,
+      inlineCreate: resolvedInlineCreate,
+      onCancelCreate: onCancelCreate != null ? onCancelCreate : (() => {
+      })
+    }, rest)
+  );
+}
+export {
+  FileRenderer,
+  FileRendererBase,
+  FileTree,
+  FileTreeBase,
+  InlineInput,
+  TabList,
+  TabListBase
+};
+//# sourceMappingURL=index.mjs.map