momoi-explorer 0.8.0

package/dist/ui.js

@@ -0,0 +1,1347 @@
+// src/ui/FileExplorer.tsx
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo3 } from "react";
+import { Virtuoso } from "react-virtuoso";
+
+// src/react/TreeProvider.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+
+// src/core/event-processor.ts
+var DEFAULT_DEBOUNCE_MS = 75;
+var DEFAULT_THROTTLE_CHUNK_SIZE = 500;
+var DEFAULT_THROTTLE_DELAY_MS = 200;
+function coalesceEvents(raw) {
+  const expanded = [];
+  for (const event of raw) {
+    if (event.type === "rename" && event.newPath) {
+      expanded.push({ type: "delete", path: event.path, isDirectory: event.isDirectory });
+      expanded.push({ type: "create", path: event.newPath, isDirectory: event.isDirectory });
+    } else {
+      expanded.push({ type: event.type, path: event.path, isDirectory: event.isDirectory });
+    }
+  }
+  const byPath = /* @__PURE__ */ new Map();
+  for (const event of expanded) {
+    const existing = byPath.get(event.path);
+    if (!existing) {
+      byPath.set(event.path, event);
+      continue;
+    }
+    if (existing.type === "delete" && event.type === "create") {
+      byPath.set(event.path, { type: "modify", path: event.path, isDirectory: event.isDirectory });
+      continue;
+    }
+    if (existing.type === "create" && event.type === "modify") {
+      continue;
+    }
+    if (existing.type === "create" && event.type === "delete") {
+      byPath.delete(event.path);
+      continue;
+    }
+    byPath.set(event.path, event);
+  }
+  const result = Array.from(byPath.values());
+  const deletedDirs = /* @__PURE__ */ new Set();
+  for (const event of result) {
+    if (event.type === "delete" && event.isDirectory) {
+      deletedDirs.add(event.path);
+    }
+  }
+  if (deletedDirs.size === 0) return result;
+  return result.filter((event) => {
+    if (event.type !== "delete") return true;
+    for (const dir of deletedDirs) {
+      if (event.path !== dir && event.path.startsWith(dir + "/")) {
+        return false;
+      }
+    }
+    return true;
+  });
+}
+function createEventProcessor(callback, options = {}) {
+  const debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+  const shouldCoalesce = options.coalesce ?? true;
+  const throttleChunkSize = options.throttle?.maxChunkSize ?? DEFAULT_THROTTLE_CHUNK_SIZE;
+  const throttleDelayMs = options.throttle?.delayMs ?? DEFAULT_THROTTLE_DELAY_MS;
+  let buffer = [];
+  let debounceTimer = null;
+  let throttleTimer = null;
+  let destroyed = false;
+  function processBuffer() {
+    if (destroyed || buffer.length === 0) return;
+    const raw = buffer;
+    buffer = [];
+    const events = shouldCoalesce ? coalesceEvents(raw) : raw.map((e) => ({
+      type: e.type === "rename" ? "modify" : e.type,
+      path: e.type === "rename" && e.newPath ? e.newPath : e.path,
+      isDirectory: e.isDirectory
+    }));
+    if (events.length === 0) return;
+    if (events.length <= throttleChunkSize) {
+      callback(events);
+      return;
+    }
+    let offset = 0;
+    function emitChunk() {
+      if (destroyed || offset >= events.length) return;
+      const chunk = events.slice(offset, offset + throttleChunkSize);
+      offset += throttleChunkSize;
+      callback(chunk);
+      if (offset < events.length) {
+        throttleTimer = setTimeout(emitChunk, throttleDelayMs);
+      }
+    }
+    emitChunk();
+  }
+  return {
+    push(events) {
+      if (destroyed) return;
+      buffer.push(...events);
+      if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+      }
+      debounceTimer = setTimeout(processBuffer, debounceMs);
+    },
+    flush() {
+      if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+      }
+      processBuffer();
+    },
+    destroy() {
+      destroyed = true;
+      if (debounceTimer !== null) clearTimeout(debounceTimer);
+      if (throttleTimer !== null) clearTimeout(throttleTimer);
+      buffer = [];
+    }
+  };
+}
+
+// src/core/flatten.ts
+function flattenTree(nodes, expandedPaths, matchingPaths) {
+  const result = [];
+  function walk(children, depth) {
+    for (const node of children) {
+      if (matchingPaths && !matchingPaths.has(node.path)) continue;
+      result.push({ node, depth });
+      if (node.isDirectory && node.children) {
+        if (matchingPaths || expandedPaths.has(node.path)) {
+          walk(node.children, depth + 1);
+        }
+      }
+    }
+  }
+  walk(nodes, 0);
+  return result;
+}
+
+// src/core/selection.ts
+function computeSelection(currentSelected, anchorPath, targetPath, mode, flatList) {
+  switch (mode) {
+    case "replace":
+      return {
+        selectedPaths: /* @__PURE__ */ new Set([targetPath]),
+        anchorPath: targetPath
+      };
+    case "toggle": {
+      const next = new Set(currentSelected);
+      if (next.has(targetPath)) {
+        next.delete(targetPath);
+      } else {
+        next.add(targetPath);
+      }
+      return {
+        selectedPaths: next,
+        anchorPath: targetPath
+      };
+    }
+    case "range": {
+      if (!anchorPath) {
+        return {
+          selectedPaths: /* @__PURE__ */ new Set([targetPath]),
+          anchorPath: targetPath
+        };
+      }
+      const paths = flatList.map((f) => f.node.path);
+      const anchorIdx = paths.indexOf(anchorPath);
+      const targetIdx = paths.indexOf(targetPath);
+      if (anchorIdx === -1 || targetIdx === -1) {
+        return {
+          selectedPaths: /* @__PURE__ */ new Set([targetPath]),
+          anchorPath: targetPath
+        };
+      }
+      const start = Math.min(anchorIdx, targetIdx);
+      const end = Math.max(anchorIdx, targetIdx);
+      const rangePaths = new Set(paths.slice(start, end + 1));
+      return {
+        selectedPaths: rangePaths,
+        anchorPath
+        // range選択ではanchorは変えない
+      };
+    }
+  }
+}
+
+// src/core/sort.ts
+function defaultSort(a, b) {
+  if (a.isDirectory !== b.isDirectory) {
+    return a.isDirectory ? -1 : 1;
+  }
+  return a.name.localeCompare(b.name, void 0, { sensitivity: "base" });
+}
+
+// src/core/filter.ts
+function defaultFilter(_entry) {
+  return true;
+}
+
+// src/core/search.ts
+function fuzzyMatch(query, target) {
+  const q = query.toLowerCase();
+  const t = target.toLowerCase();
+  if (q.length === 0) return { match: true, score: 0 };
+  if (q.length > t.length) return { match: false, score: 0 };
+  if (t === q) return { match: true, score: 100 };
+  if (t.startsWith(q)) return { match: true, score: 90 };
+  if (t.includes(q)) return { match: true, score: 80 };
+  let qi = 0;
+  let score = 0;
+  let lastMatchIndex = -2;
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) {
+      qi++;
+      if (ti === lastMatchIndex + 1) {
+        score += 5;
+      }
+      if (ti === 0 || "/\\-_.".includes(t[ti - 1])) {
+        score += 10;
+      }
+      score += 1;
+      lastMatchIndex = ti;
+    }
+  }
+  if (qi < q.length) return { match: false, score: 0 };
+  return { match: true, score };
+}
+function findMatchingPaths(nodes, query) {
+  const matching = /* @__PURE__ */ new Set();
+  function walk(node, ancestors) {
+    const nameMatch = fuzzyMatch(query, node.name).match;
+    let childMatch = false;
+    if (node.children) {
+      for (const child of node.children) {
+        if (walk(child, [...ancestors, node.path])) {
+          childMatch = true;
+        }
+      }
+    }
+    if (nameMatch || childMatch) {
+      matching.add(node.path);
+      for (const a of ancestors) {
+        matching.add(a);
+      }
+      return true;
+    }
+    return false;
+  }
+  for (const node of nodes) {
+    walk(node, []);
+  }
+  return matching;
+}
+function fuzzyFind(files, query, maxResults = 50) {
+  if (!query) return [];
+  const scored = [];
+  for (const entry of files) {
+    const nameResult = fuzzyMatch(query, entry.name);
+    const pathResult = fuzzyMatch(query, entry.path);
+    const bestScore = Math.max(nameResult.score, pathResult.score * 0.5);
+    if (nameResult.match || pathResult.match) {
+      scored.push({ entry, score: bestScore });
+    }
+  }
+  scored.sort((a, b) => b.score - a.score);
+  return scored.slice(0, maxResults).map((s) => s.entry);
+}
+
+// src/core/tree.ts
+function toTreeNode(entry, depth) {
+  return {
+    ...entry,
+    depth,
+    children: entry.isDirectory ? void 0 : void 0,
+    childrenLoaded: false
+  };
+}
+function findNode(nodes, path) {
+  for (const node of nodes) {
+    if (node.path === path) return node;
+    if (node.children) {
+      const found = findNode(node.children, path);
+      if (found) return found;
+    }
+  }
+  return void 0;
+}
+function dirname(path) {
+  const sep = path.includes("\\") ? "\\" : "/";
+  const idx = path.lastIndexOf(sep);
+  return idx === -1 ? "" : path.slice(0, idx);
+}
+function createFileTree(options) {
+  const { adapter, rootPath, onEvent } = options;
+  let sortFn = options.sort ?? defaultSort;
+  let filterFn = options.filter ?? defaultFilter;
+  let state = {
+    rootPath,
+    rootNodes: [],
+    expandedPaths: /* @__PURE__ */ new Set(),
+    selectedPaths: /* @__PURE__ */ new Set(),
+    anchorPath: null,
+    renamingPath: null,
+    creatingState: null,
+    searchQuery: null,
+    flatList: []
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  let expandingPaths = /* @__PURE__ */ new Set();
+  function emit(event) {
+    onEvent?.(event);
+  }
+  function notify() {
+    const matchingPaths = state.searchQuery ? findMatchingPaths(state.rootNodes, state.searchQuery) : null;
+    state = { ...state, flatList: flattenTree(state.rootNodes, state.expandedPaths, matchingPaths) };
+    for (const listener of listeners) {
+      listener(state);
+    }
+  }
+  async function loadChildren(node) {
+    const entries = await adapter.readDir(node.path);
+    const filtered = entries.filter(filterFn);
+    filtered.sort(sortFn);
+    const oldChildMap = node.children ? new Map(node.children.map((c) => [c.path, c])) : /* @__PURE__ */ new Map();
+    node.children = filtered.map((e) => {
+      const existing = oldChildMap.get(e.path);
+      if (existing && existing.childrenLoaded) {
+        return { ...toTreeNode(e, node.depth + 1), children: existing.children, childrenLoaded: true };
+      }
+      return toTreeNode(e, node.depth + 1);
+    });
+    node.childrenLoaded = true;
+  }
+  async function refreshParent(parentPath) {
+    const parentNode = findNode(state.rootNodes, parentPath);
+    if (parentNode) {
+      await loadChildren(parentNode);
+      state.expandedPaths = new Set(state.expandedPaths);
+      state.expandedPaths.add(parentPath);
+    } else if (parentPath === rootPath) {
+      const entries = await adapter.readDir(rootPath);
+      const filtered = entries.filter(filterFn);
+      filtered.sort(sortFn);
+      const oldNodeMap = new Map(state.rootNodes.map((n) => [n.path, n]));
+      state.rootNodes = filtered.map((e) => {
+        const existing = oldNodeMap.get(e.path);
+        if (existing && existing.childrenLoaded) {
+          return { ...toTreeNode(e, 0), children: existing.children, childrenLoaded: true };
+        }
+        return toTreeNode(e, 0);
+      });
+    }
+  }
+  function sortNodes(nodes) {
+    nodes.sort(sortFn);
+    for (const node of nodes) {
+      if (node.children) {
+        sortNodes(node.children);
+      }
+    }
+  }
+  function filterNodes(nodes) {
+    return nodes.filter((node) => {
+      if (!filterFn(node)) return false;
+      if (node.children) {
+        node.children = filterNodes(node.children);
+      }
+      return true;
+    });
+  }
+  let unwatchFn = null;
+  let eventProcessor = null;
+  function handleWatchEvents(events) {
+    emit({ type: "external-change", changes: events });
+    const dirsToRefresh = /* @__PURE__ */ new Set();
+    for (const event of events) {
+      const parent = dirname(event.path);
+      if (parent === rootPath || state.expandedPaths.has(parent)) {
+        dirsToRefresh.add(parent);
+      }
+      if (event.isDirectory && state.expandedPaths.has(event.path)) {
+        dirsToRefresh.add(event.path);
+      }
+    }
+    for (const dir of dirsToRefresh) {
+      refreshParent(dir).then(() => notify()).catch(() => {
+      });
+    }
+  }
+  function startWatching() {
+    if (!adapter.watch) return;
+    eventProcessor = createEventProcessor(handleWatchEvents, options.watchOptions);
+    unwatchFn = adapter.watch(rootPath, (events) => {
+      eventProcessor.push(events);
+    });
+  }
+  function stopWatching() {
+    if (unwatchFn) {
+      unwatchFn();
+      unwatchFn = null;
+    }
+    if (eventProcessor) {
+      eventProcessor.destroy();
+      eventProcessor = null;
+    }
+  }
+  const controller = {
+    getState() {
+      return state;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    async loadRoot() {
+      const entries = await adapter.readDir(rootPath);
+      const filtered = entries.filter(filterFn);
+      filtered.sort(sortFn);
+      state.rootNodes = filtered.map((e) => toTreeNode(e, 0));
+      notify();
+      startWatching();
+    },
+    async expand(path) {
+      if (expandingPaths.has(path)) return;
+      expandingPaths.add(path);
+      try {
+        const node = findNode(state.rootNodes, path);
+        if (!node || !node.isDirectory) return;
+        if (!node.childrenLoaded) {
+          await loadChildren(node);
+        }
+        state.expandedPaths = new Set(state.expandedPaths);
+        state.expandedPaths.add(path);
+        notify();
+        emit({ type: "expand", path });
+      } finally {
+        expandingPaths.delete(path);
+      }
+    },
+    collapse(path) {
+      const sep = path.includes("\\") ? "\\" : "/";
+      const prefix = path + sep;
+      state.expandedPaths = new Set(state.expandedPaths);
+      state.expandedPaths.delete(path);
+      for (const p of state.expandedPaths) {
+        if (p.startsWith(prefix)) {
+          state.expandedPaths.delete(p);
+        }
+      }
+      notify();
+      emit({ type: "collapse", path });
+    },
+    async toggleExpand(path) {
+      if (expandingPaths.has(path)) return;
+      if (state.expandedPaths.has(path)) {
+        controller.collapse(path);
+      } else {
+        await controller.expand(path);
+      }
+    },
+    async expandTo(path) {
+      const parts = [];
+      let current = path;
+      while (current !== rootPath && current !== "") {
+        const parent = dirname(current);
+        if (parent === current) break;
+        parts.unshift(parent);
+        current = parent;
+      }
+      for (const ancestorPath of parts) {
+        if (ancestorPath === rootPath) continue;
+        if (!state.expandedPaths.has(ancestorPath)) {
+          await controller.expand(ancestorPath);
+        }
+      }
+    },
+    select(path, mode = "replace") {
+      const result = computeSelection(
+        state.selectedPaths,
+        state.anchorPath,
+        path,
+        mode,
+        state.flatList
+      );
+      state.selectedPaths = result.selectedPaths;
+      state.anchorPath = result.anchorPath;
+      notify();
+      emit({ type: "select", paths: Array.from(result.selectedPaths) });
+    },
+    selectAll() {
+      state.selectedPaths = new Set(state.flatList.map((f) => f.node.path));
+      notify();
+      emit({ type: "select", paths: Array.from(state.selectedPaths) });
+    },
+    clearSelection() {
+      state.selectedPaths = /* @__PURE__ */ new Set();
+      state.anchorPath = null;
+      notify();
+      emit({ type: "select", paths: [] });
+    },
+    startRename(path) {
+      state.renamingPath = path;
+      notify();
+    },
+    async commitRename(newName) {
+      if (!state.renamingPath || !adapter.rename) return;
+      const oldPath = state.renamingPath;
+      const parent = dirname(oldPath);
+      const sep = oldPath.includes("\\") ? "\\" : "/";
+      const newPath = parent + sep + newName;
+      await adapter.rename(oldPath, newPath);
+      state.renamingPath = null;
+      if (parent === rootPath) {
+        await controller.loadRoot();
+      } else {
+        const parentNode = findNode(state.rootNodes, parent);
+        if (parentNode) {
+          await loadChildren(parentNode);
+        }
+      }
+      notify();
+      emit({ type: "rename", oldPath, newPath });
+    },
+    cancelRename() {
+      state.renamingPath = null;
+      notify();
+    },
+    async startCreate(parentPath, isDirectory, insertAfterPath) {
+      if (parentPath !== rootPath && !state.expandedPaths.has(parentPath)) {
+        await controller.expand(parentPath);
+      }
+      state.creatingState = { parentPath, isDirectory, insertAfterPath };
+      notify();
+    },
+    async commitCreate(name) {
+      if (!state.creatingState) return;
+      const { parentPath, isDirectory } = state.creatingState;
+      state.creatingState = null;
+      if (isDirectory) {
+        await controller.createDir(parentPath, name);
+      } else {
+        await controller.createFile(parentPath, name);
+      }
+    },
+    cancelCreate() {
+      state.creatingState = null;
+      notify();
+    },
+    async createFile(parentPath, name) {
+      if (!adapter.createFile) return;
+      await adapter.createFile(parentPath, name);
+      await refreshParent(parentPath);
+      notify();
+      emit({ type: "create", parentPath, name, isDirectory: false });
+    },
+    async createDir(parentPath, name) {
+      if (!adapter.createDir) return;
+      await adapter.createDir(parentPath, name);
+      await refreshParent(parentPath);
+      notify();
+      emit({ type: "create", parentPath, name, isDirectory: true });
+    },
+    async deleteSelected() {
+      if (!adapter.delete || state.selectedPaths.size === 0) return;
+      const paths = Array.from(state.selectedPaths);
+      await adapter.delete(paths);
+      state.selectedPaths = /* @__PURE__ */ new Set();
+      state.anchorPath = null;
+      const parentDirs = new Set(paths.map(dirname));
+      for (const dir of parentDirs) {
+        await refreshParent(dir);
+      }
+      notify();
+      emit({ type: "delete", paths });
+    },
+    async refresh(path) {
+      if (!path || path === rootPath) {
+        await refreshParent(rootPath);
+      } else {
+        const node = findNode(state.rootNodes, path);
+        if (node && node.isDirectory) {
+          await loadChildren(node);
+        }
+      }
+      notify();
+      emit({ type: "refresh", path });
+    },
+    setSearchQuery(query) {
+      state.searchQuery = query && query.trim() ? query.trim() : null;
+      notify();
+    },
+    async collectAllFiles() {
+      const result = [];
+      async function walk(dirPath) {
+        const entries = await adapter.readDir(dirPath);
+        for (const entry of entries) {
+          if (!filterFn(entry)) continue;
+          result.push(entry);
+          if (entry.isDirectory) {
+            await walk(entry.path);
+          }
+        }
+      }
+      await walk(rootPath);
+      return result;
+    },
+    setFilter(fn) {
+      filterFn = fn ?? defaultFilter;
+      state.rootNodes = filterNodes(state.rootNodes);
+      notify();
+    },
+    setSort(fn) {
+      sortFn = fn ?? defaultSort;
+      sortNodes(state.rootNodes);
+      notify();
+    },
+    destroy() {
+      stopWatching();
+      listeners.clear();
+    }
+  };
+  return controller;
+}
+
+// src/react/context.ts
+import { createContext, useContext } from "react";
+var TreeContext = createContext(null);
+function useTreeContext() {
+  const ctx = useContext(TreeContext);
+  if (!ctx) {
+    throw new Error("useTreeContext must be used within a <TreeProvider>");
+  }
+  return ctx;
+}
+
+// src/react/TreeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function TreeProvider({
+  adapter,
+  rootPath,
+  sort,
+  filter,
+  watchOptions,
+  onEvent,
+  children
+}) {
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+  const controller = useMemo(() => {
+    return createFileTree({
+      adapter,
+      rootPath,
+      sort,
+      filter,
+      watchOptions,
+      onEvent: (event) => onEventRef.current?.(event)
+    });
+  }, [adapter, rootPath]);
+  const [state, setState] = useState(() => controller.getState());
+  useEffect(() => {
+    const unsub = controller.subscribe(setState);
+    controller.loadRoot();
+    return () => {
+      unsub();
+      controller.destroy();
+    };
+  }, [controller]);
+  const value = useMemo(() => ({ controller, state }), [controller, state]);
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value, children });
+}
+
+// src/react/useFileTree.ts
+function useFileTree() {
+  const { controller, state } = useTreeContext();
+  return { ...state, controller };
+}
+
+// src/react/useContextMenu.ts
+import { useCallback, useState as useState2 } from "react";
+function useContextMenu() {
+  const [menuState, setMenuState] = useState2({
+    isVisible: false,
+    x: 0,
+    y: 0,
+    targetPath: null
+  });
+  const show = useCallback((e, targetPath) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenuState({
+      isVisible: true,
+      x: e.clientX,
+      y: e.clientY,
+      targetPath
+    });
+  }, []);
+  const hide = useCallback(() => {
+    setMenuState((prev) => ({ ...prev, isVisible: false, targetPath: null }));
+  }, []);
+  return { ...menuState, show, hide };
+}
+
+// src/react/useExplorerKeybindings.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/core/keybindings.ts
+var ExplorerCommands = {
+  DELETE: "explorer.delete",
+  RENAME: "explorer.rename",
+  NEW_FILE: "explorer.newFile",
+  NEW_FOLDER: "explorer.newFolder",
+  REFRESH: "explorer.refresh",
+  COLLAPSE_ALL: "explorer.collapseAll",
+  SELECT_ALL: "explorer.selectAll",
+  COPY_PATH: "explorer.copyPath"
+};
+var defaultExplorerKeybindings = [
+  { key: "Delete", command: ExplorerCommands.DELETE, when: "explorerFocus" },
+  { key: "F2", command: ExplorerCommands.RENAME, when: "explorerFocus" },
+  { key: "Ctrl+N", command: ExplorerCommands.NEW_FILE, when: "explorerFocus" },
+  { key: "Ctrl+Shift+N", command: ExplorerCommands.NEW_FOLDER, when: "explorerFocus" },
+  { key: "Ctrl+R", command: ExplorerCommands.REFRESH, when: "explorerFocus" },
+  { key: "Ctrl+Shift+E", command: ExplorerCommands.COLLAPSE_ALL, when: "explorerFocus" },
+  { key: "Ctrl+A", command: ExplorerCommands.SELECT_ALL, when: "explorerFocus" },
+  { key: "Ctrl+Shift+C", command: ExplorerCommands.COPY_PATH, when: "explorerFocus" }
+];
+
+// src/react/useExplorerKeybindings.ts
+function useExplorerKeybindings(inputService, options) {
+  const { controller, state } = useTreeContext();
+  const stateRef = useRef2(state);
+  stateRef.current = state;
+  const optionsRef = useRef2(options);
+  optionsRef.current = options;
+  const getCreateTarget = useCallback2(() => {
+    const s = stateRef.current;
+    if (s.selectedPaths.size === 0) return { parentPath: s.rootPath };
+    const firstSelected = s.flatList.find((f) => s.selectedPaths.has(f.node.path));
+    if (!firstSelected) return { parentPath: s.rootPath };
+    if (firstSelected.node.isDirectory) return { parentPath: firstSelected.node.path };
+    const sep = firstSelected.node.path.includes("\\") ? "\\" : "/";
+    const idx = firstSelected.node.path.lastIndexOf(sep);
+    const parentPath = idx === -1 ? s.rootPath : firstSelected.node.path.slice(0, idx);
+    return { parentPath, insertAfterPath: firstSelected.node.path };
+  }, []);
+  useEffect2(() => {
+    if (!inputService) return;
+    const disposers = [];
+    const handlers = {
+      [ExplorerCommands.DELETE]: () => controller.deleteSelected(),
+      [ExplorerCommands.RENAME]: () => {
+        const s = stateRef.current;
+        if (s.selectedPaths.size === 1) {
+          controller.startRename(Array.from(s.selectedPaths)[0]);
+        }
+      },
+      [ExplorerCommands.NEW_FILE]: () => {
+        const t = getCreateTarget();
+        controller.startCreate(t.parentPath, false, t.insertAfterPath);
+      },
+      [ExplorerCommands.NEW_FOLDER]: () => {
+        const t = getCreateTarget();
+        controller.startCreate(t.parentPath, true, t.insertAfterPath);
+      },
+      [ExplorerCommands.REFRESH]: () => controller.refresh(),
+      [ExplorerCommands.COLLAPSE_ALL]: () => {
+        const s = stateRef.current;
+        for (const path of s.expandedPaths) {
+          controller.collapse(path);
+        }
+      },
+      [ExplorerCommands.SELECT_ALL]: () => controller.selectAll(),
+      [ExplorerCommands.COPY_PATH]: () => {
+        const s = stateRef.current;
+        const paths = Array.from(s.selectedPaths);
+        optionsRef.current?.onCopyPath?.(paths);
+      }
+    };
+    for (const [command, handler] of Object.entries(handlers)) {
+      disposers.push(inputService.registerCommand(command, handler));
+    }
+    return () => {
+      for (const dispose of disposers) {
+        dispose();
+      }
+    };
+  }, [inputService, controller, getCreateTarget]);
+}
+
+// src/react/useExplorerFocus.ts
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
+function useExplorerFocus(inputService, contextKey = "explorerFocus") {
+  const focused = useRef3(false);
+  const onFocus = useCallback3(() => {
+    if (!focused.current) {
+      focused.current = true;
+      inputService?.setContext(contextKey, true);
+    }
+  }, [inputService, contextKey]);
+  const onBlur = useCallback3(() => {
+    if (focused.current) {
+      focused.current = false;
+      inputService?.deleteContext(contextKey);
+    }
+  }, [inputService, contextKey]);
+  return { onFocus, onBlur, tabIndex: 0 };
+}
+
+// src/ui/TreeNodeRow.tsx
+import { memo, useMemo as useMemo2 } from "react";
+import { getIcon } from "material-file-icons";
+
+// src/ui/InlineRename.tsx
+import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function InlineRename({ currentName, onCommit, onCancel }) {
+  const inputRef = useRef4(null);
+  const [value, setValue] = useState3(currentName);
+  useEffect3(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    input.focus();
+    const dotIndex = currentName.lastIndexOf(".");
+    if (dotIndex > 0) {
+      input.setSelectionRange(0, dotIndex);
+    } else {
+      input.select();
+    }
+  }, [currentName]);
+  function handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      const trimmed = value.trim();
+      if (trimmed && trimmed !== currentName) {
+        onCommit(trimmed);
+      } else {
+        onCancel();
+      }
+    } else if (e.key === "Escape") {
+      onCancel();
+    }
+  }
+  function handleBlur() {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== currentName) {
+      onCommit(trimmed);
+    } else {
+      onCancel();
+    }
+  }
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ref: inputRef,
+      className: "momoi-explorer-rename-input",
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur
+    }
+  );
+}
+
+// src/ui/TreeNodeRow.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx3("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) });
+}
+function FolderIcon({ isExpanded }) {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: isExpanded ? /* @__PURE__ */ jsx3("path", { d: "M1.5 3h5l1 1.5H14.5v9h-13z", fill: "#dcb67a", opacity: "0.9" }) : /* @__PURE__ */ jsx3("path", { d: "M1.5 2.5h5l1 1.5H14.5v10h-13z", fill: "#dcb67a" }) });
+}
+function MaterialFileIcon({ filename }) {
+  const svg = useMemo2(() => getIcon(filename).svg, [filename]);
+  return /* @__PURE__ */ jsx3("span", { className: "momoi-explorer-icon-inner", dangerouslySetInnerHTML: { __html: svg } });
+}
+var TreeNodeRow = memo(function TreeNodeRow2({
+  node,
+  depth,
+  isExpanded,
+  isSelected,
+  isRenaming,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  onToggleExpand,
+  onCommitRename,
+  onCancelRename,
+  renderIcon,
+  renderBadge
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "momoi-explorer-row",
+      "data-selected": isSelected,
+      "data-path": node.path,
+      onClick,
+      onDoubleClick,
+      onContextMenu,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "momoi-explorer-indent", children: Array.from({ length: depth }, (_, i) => /* @__PURE__ */ jsx3("span", { className: "momoi-explorer-indent-guide" }, i)) }),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: "momoi-explorer-chevron",
+            "data-expanded": isExpanded,
+            "data-is-dir": node.isDirectory,
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggleExpand();
+            },
+            children: /* @__PURE__ */ jsx3(ChevronIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "momoi-explorer-icon", children: renderIcon ? renderIcon(node, isExpanded) : node.isDirectory ? /* @__PURE__ */ jsx3(FolderIcon, { isExpanded }) : /* @__PURE__ */ jsx3(MaterialFileIcon, { filename: node.name }) }),
+        isRenaming ? /* @__PURE__ */ jsx3(
+          InlineRename,
+          {
+            currentName: node.name,
+            onCommit: onCommitRename,
+            onCancel: onCancelRename
+          }
+        ) : /* @__PURE__ */ jsx3("span", { className: "momoi-explorer-name", children: node.name }),
+        renderBadge && /* @__PURE__ */ jsx3("span", { className: "momoi-explorer-badge", children: renderBadge(node) })
+      ]
+    }
+  );
+});
+
+// src/ui/ContextMenu.tsx
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ContextMenu({ items, x, y, onClose }) {
+  const menuRef = useRef5(null);
+  useEffect4(() => {
+    function handleClick(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    }
+    function handleKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [onClose]);
+  useEffect4(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+    }
+    if (rect.bottom > window.innerHeight) {
+      menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+    }
+  }, [x, y]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: menuRef,
+      className: "momoi-explorer-context-menu",
+      style: { left: x, top: y },
+      children: items.map((item) => {
+        if (item.separator) {
+          return /* @__PURE__ */ jsx4("div", { className: "momoi-explorer-context-menu-separator" }, item.id);
+        }
+        return /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "momoi-explorer-context-menu-item",
+            "data-disabled": item.disabled ?? false,
+            onClick: () => {
+              if (!item.disabled) {
+                item.action([]);
+                onClose();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx4("span", { children: item.label }),
+              item.shortcut && /* @__PURE__ */ jsx4("span", { className: "momoi-explorer-context-menu-shortcut", children: item.shortcut })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+
+// src/ui/TreeFilterBar.tsx
+import { useCallback as useCallback4, useRef as useRef6 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function TreeFilterBar({
+  placeholder = "Filter files..."
+}) {
+  const { controller, state } = useTreeContext();
+  const inputRef = useRef6(null);
+  const handleChange = useCallback4((e) => {
+    controller.setSearchQuery(e.target.value || null);
+  }, [controller]);
+  const handleKeyDown = useCallback4((e) => {
+    if (e.key === "Escape") {
+      controller.setSearchQuery(null);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }, [controller]);
+  return /* @__PURE__ */ jsxs3("div", { className: "momoi-explorer-filter-bar", children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        ref: inputRef,
+        className: "momoi-explorer-filter-input",
+        type: "text",
+        placeholder,
+        defaultValue: state.searchQuery ?? "",
+        onChange: handleChange,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    state.searchQuery && /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: "momoi-explorer-filter-clear",
+        onClick: () => {
+          controller.setSearchQuery(null);
+          if (inputRef.current) inputRef.current.value = "";
+        },
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+
+// src/ui/FileExplorer.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function FileExplorerInner({
+  onOpen,
+  renderIcon,
+  renderBadge,
+  contextMenuItems,
+  showFilterBar,
+  onControllerReady,
+  inputService,
+  onKeyDown
+}) {
+  const { flatList, expandedPaths, selectedPaths, renamingPath, creatingState, rootPath, controller } = useFileTree();
+  useEffect5(() => {
+    onControllerReady?.(controller);
+  }, [controller, onControllerReady]);
+  useExplorerKeybindings(inputService ?? null);
+  const focusProps = useExplorerFocus(inputService ?? null);
+  const ctxMenu = useContextMenu();
+  const rowItems = useMemo3(() => {
+    const items = flatList.map((f) => ({
+      type: "node",
+      node: f.node,
+      depth: f.depth
+    }));
+    if (!creatingState) return items;
+    const { parentPath, isDirectory, insertAfterPath } = creatingState;
+    if (insertAfterPath) {
+      const idx = items.findIndex((item) => item.type === "node" && item.node.path === insertAfterPath);
+      if (idx !== -1) {
+        items.splice(idx + 1, 0, { type: "create", parentPath, isDirectory, depth: items[idx].depth });
+      }
+    } else if (parentPath === rootPath) {
+      items.push({ type: "create", parentPath, isDirectory, depth: 0 });
+    } else {
+      const parentIdx = items.findIndex((item) => item.type === "node" && item.node.path === parentPath);
+      if (parentIdx !== -1) {
+        const parentDepth = items[parentIdx].depth;
+        items.splice(parentIdx + 1, 0, { type: "create", parentPath, isDirectory, depth: parentDepth + 1 });
+      }
+    }
+    return items;
+  }, [flatList, creatingState, rootPath]);
+  const handleClick = useCallback5((path, isDirectory, e) => {
+    if (e.shiftKey) {
+      controller.select(path, "range");
+    } else if (e.ctrlKey || e.metaKey) {
+      controller.select(path, "toggle");
+    } else {
+      controller.select(path, "replace");
+      if (isDirectory) {
+        controller.toggleExpand(path);
+      }
+    }
+  }, [controller]);
+  const handleDoubleClick = useCallback5((path, isDirectory) => {
+    if (!isDirectory) {
+      onOpen?.(path);
+    }
+  }, [onOpen]);
+  const handleContextMenu = useCallback5((e, path) => {
+    if (!selectedPaths.has(path)) {
+      controller.select(path, "replace");
+    }
+    ctxMenu.show(e, path);
+  }, [controller, selectedPaths, ctxMenu]);
+  const handleBackgroundContextMenu = useCallback5((e) => {
+    e.preventDefault();
+    controller.clearSelection();
+    ctxMenu.show(e, "");
+  }, [controller, ctxMenu]);
+  const menuItems = useMemo3(() => {
+    if (!ctxMenu.isVisible || !contextMenuItems) return [];
+    if (ctxMenu.targetPath === "") return contextMenuItems([]);
+    const targetNodes = flatList.filter((f) => selectedPaths.has(f.node.path)).map((f) => f.node);
+    return contextMenuItems(targetNodes);
+  }, [ctxMenu.isVisible, ctxMenu.targetPath, contextMenuItems, flatList, selectedPaths]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: { height: "100%", outline: "none" },
+      onContextMenu: handleBackgroundContextMenu,
+      onKeyDown,
+      onFocus: focusProps.onFocus,
+      onBlur: focusProps.onBlur,
+      tabIndex: focusProps.tabIndex,
+      children: [
+        showFilterBar && /* @__PURE__ */ jsx6(TreeFilterBar, {}),
+        /* @__PURE__ */ jsx6(
+          Virtuoso,
+          {
+            totalCount: rowItems.length,
+            fixedItemHeight: 22,
+            increaseViewportBy: 200,
+            computeItemKey: (index) => {
+              const item = rowItems[index];
+              return item.type === "create" ? `__create__${item.parentPath}` : item.node.path;
+            },
+            itemContent: (index) => {
+              const item = rowItems[index];
+              if (item.type === "create") {
+                return /* @__PURE__ */ jsxs4("div", { className: "momoi-explorer-row", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "momoi-explorer-indent", children: Array.from({ length: item.depth }, (_, i) => /* @__PURE__ */ jsx6("span", { className: "momoi-explorer-indent-guide" }, i)) }),
+                  /* @__PURE__ */ jsx6("span", { className: "momoi-explorer-chevron", "data-is-dir": "false", children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx6("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) }),
+                  /* @__PURE__ */ jsx6("span", { className: "momoi-explorer-icon", children: item.isDirectory ? "\u{1F4C1}" : "\u{1F4C4}" }),
+                  /* @__PURE__ */ jsx6(
+                    InlineRename,
+                    {
+                      currentName: "",
+                      onCommit: (name) => controller.commitCreate(name),
+                      onCancel: () => controller.cancelCreate()
+                    }
+                  )
+                ] });
+              }
+              const { node, depth } = item;
+              return /* @__PURE__ */ jsx6(
+                TreeNodeRow,
+                {
+                  node,
+                  depth,
+                  isExpanded: expandedPaths.has(node.path),
+                  isSelected: selectedPaths.has(node.path),
+                  isRenaming: renamingPath === node.path,
+                  onClick: (e) => handleClick(node.path, node.isDirectory, e),
+                  onDoubleClick: () => handleDoubleClick(node.path, node.isDirectory),
+                  onContextMenu: (e) => handleContextMenu(e, node.path),
+                  onToggleExpand: () => controller.toggleExpand(node.path),
+                  onCommitRename: (name) => controller.commitRename(name),
+                  onCancelRename: () => controller.cancelRename(),
+                  renderIcon,
+                  renderBadge
+                }
+              );
+            }
+          }
+        ),
+        ctxMenu.isVisible && menuItems.length > 0 && /* @__PURE__ */ jsx6(
+          ContextMenu,
+          {
+            items: menuItems,
+            x: ctxMenu.x,
+            y: ctxMenu.y,
+            onClose: ctxMenu.hide
+          }
+        )
+      ]
+    }
+  );
+}
+function FileExplorer({
+  adapter,
+  rootPath,
+  sort,
+  filter,
+  watchOptions,
+  onEvent,
+  onOpen,
+  renderIcon,
+  renderBadge,
+  contextMenuItems,
+  showFilterBar,
+  onControllerReady,
+  inputService,
+  onKeyDown,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: `momoi-explorer ${className ?? ""}`, style, children: /* @__PURE__ */ jsx6(
+    TreeProvider,
+    {
+      adapter,
+      rootPath,
+      sort,
+      filter,
+      watchOptions,
+      onEvent,
+      children: /* @__PURE__ */ jsx6(
+        FileExplorerInner,
+        {
+          onOpen,
+          renderIcon,
+          renderBadge,
+          contextMenuItems,
+          showFilterBar,
+          onControllerReady,
+          inputService,
+          onKeyDown
+        }
+      )
+    }
+  ) });
+}
+
+// src/ui/QuickOpen.tsx
+import { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef7, useState as useState4 } from "react";
+import { getIcon as getIcon2 } from "material-file-icons";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function QuickOpenIcon({ filename }) {
+  const svg = useMemo4(() => getIcon2(filename).svg, [filename]);
+  return /* @__PURE__ */ jsx7("span", { className: "momoi-explorer-quickopen-icon", dangerouslySetInnerHTML: { __html: svg } });
+}
+function QuickOpen({
+  controller,
+  isOpen,
+  onClose,
+  onSelect,
+  placeholder = "Search files by name...",
+  maxResults = 50
+}) {
+  const inputRef = useRef7(null);
+  const [query, setQuery] = useState4("");
+  const [allFiles, setAllFiles] = useState4([]);
+  const [results, setResults] = useState4([]);
+  const [selectedIndex, setSelectedIndex] = useState4(0);
+  useEffect6(() => {
+    if (!isOpen) return;
+    controller.collectAllFiles().then(setAllFiles);
+  }, [isOpen, controller]);
+  useEffect6(() => {
+    if (isOpen) {
+      setQuery("");
+      setResults([]);
+      setSelectedIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [isOpen]);
+  useEffect6(() => {
+    if (!query) {
+      setResults([]);
+      setSelectedIndex(0);
+      return;
+    }
+    const found = fuzzyFind(allFiles, query, maxResults);
+    setResults(found);
+    setSelectedIndex(0);
+  }, [query, allFiles, maxResults]);
+  const handleKeyDown = useCallback6((e) => {
+    switch (e.key) {
+      case "Escape":
+        onClose();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (results[selectedIndex]) {
+          onSelect(results[selectedIndex]);
+          onClose();
+        }
+        break;
+    }
+  }, [onClose, onSelect, results, selectedIndex]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx7("div", { className: "momoi-explorer-quickopen-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "momoi-explorer-quickopen",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            ref: inputRef,
+            className: "momoi-explorer-quickopen-input",
+            type: "text",
+            placeholder,
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
+        results.length > 0 && /* @__PURE__ */ jsx7("div", { className: "momoi-explorer-quickopen-results", children: results.map((entry, i) => /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: "momoi-explorer-quickopen-item",
+            "data-selected": i === selectedIndex,
+            onMouseEnter: () => setSelectedIndex(i),
+            onClick: () => {
+              onSelect(entry);
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsx7(QuickOpenIcon, { filename: entry.name }),
+              /* @__PURE__ */ jsx7("span", { className: "momoi-explorer-quickopen-name", children: entry.name }),
+              /* @__PURE__ */ jsx7("span", { className: "momoi-explorer-quickopen-path", children: entry.path })
+            ]
+          },
+          entry.path
+        )) }),
+        query && results.length === 0 && /* @__PURE__ */ jsx7("div", { className: "momoi-explorer-quickopen-empty", children: "No matching files" })
+      ]
+    }
+  ) });
+}
+export {
+  ContextMenu,
+  FileExplorer,
+  InlineRename,
+  QuickOpen,
+  TreeFilterBar,
+  TreeNodeRow
+};
+//# sourceMappingURL=ui.js.map