@carlesandres/house 0.5.0 → 0.5.2

package/dist/index.js

@@ -9,17 +9,18 @@ import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 import { RegistryProvider } from "@effect/atom-react";
 import { Cause, Duration, Effect as Effect5, Fiber, Stream as Stream2 } from "effect";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
 // package.json
 var package_default = {
   name: "@carlesandres/house",
-  version: "0.5.0",
+  version: "0.5.2",
   description: "TUI-first markdown reader on opentui",
   type: "module",
   license: "MIT",
   repository: {
     type: "git",
-    url: "git+https://github.com/carlesandres/house.git"
+    url: "git+https://github.com/carlesandres/house.git",
+    directory: "apps/house"
   },
   bugs: {
     url: "https://github.com/carlesandres/house/issues"
@@ -38,8 +39,6 @@ var package_default = {
   files: [
     "dist/bin.js",
     "dist/index.js",
-    "README.md",
-    "LICENSE",
     "CHANGELOG.md"
   ],
   publishConfig: {
@@ -51,29 +50,32 @@ var package_default = {
     house: "dist/bin.js"
   },
   scripts: {
+    build: "bun run build:cli",
+    "build:cli": "bun run dev/build-cli.ts",
+    "build:npm-main": "bun run dev/build-npm-main.ts",
+    "build:npm-packages": "bun run dev/build-npm-packages.ts",
+    "build:standalone": "bun run dev/build-standalone.ts",
+    "build:themes": "bun run dev/build-themes.ts",
     dev: "bun --watch src/index.tsx",
-    start: "bun run src/index.tsx",
-    "record-demo": "bash recordings/record-demo.sh",
-    typecheck: "tsc --noEmit",
-    lint: "oxlint --tsconfig tsconfig.json src/",
     format: "oxfmt src/",
     "format:check": "oxfmt --check src/",
+    lint: "oxlint --tsconfig tsconfig.json src/ test/ dev/",
+    "npm:pack": "bun run build:npm-main && npm pack --dry-run dist/npm/main",
+    "record-demo": "bash recordings/record-demo.sh",
+    release: "bun run dev/release.ts",
+    "repro:pty-codeblocks": "bun run dev/repro-pty-codeblocks.ts",
+    start: "bun run src/index.tsx",
     test: "bun test",
     "test:pty": "HOUSE_PTY=1 bun test test/pty/",
-    "version:set": "bun run dev/set-version.ts",
-    "build:cli": "bun run dev/build-cli.ts",
-    "build:standalone": "bun run dev/build-standalone.ts",
-    "build:npm-packages": "bun run dev/build-npm-packages.ts",
-    "build:themes": "bun run dev/build-themes.ts",
-    prepack: "bun run build:cli",
-    "repro:pty-codeblocks": "bun run dev/repro-pty-codeblocks.ts",
-    prepare: "git config core.hooksPath .githooks 2>/dev/null || true"
+    typecheck: "tsc --noEmit",
+    "verify:github": "bun test test/github-emulation.test.ts",
+    "version:set": "bun run dev/set-version.ts"
   },
   optionalDependencies: {
-    "@carlesandres/house-darwin-arm64": "0.5.0",
-    "@carlesandres/house-darwin-x64": "0.5.0",
-    "@carlesandres/house-linux-arm64": "0.5.0",
-    "@carlesandres/house-linux-x64": "0.5.0"
+    "@carlesandres/house-darwin-arm64": "0.5.1",
+    "@carlesandres/house-darwin-x64": "0.5.1",
+    "@carlesandres/house-linux-arm64": "0.5.1",
+    "@carlesandres/house-linux-x64": "0.5.1"
   },
   dependencies: {
     "@effect/atom-react": "4.0.0-beta.60",
@@ -84,12 +86,15 @@ var package_default = {
     ignore: "^7.0.5",
     marked: "^18.0.4",
     react: "19.2.6",
-    scheduler: "0.27.0"
+    scheduler: "0.27.0",
+    "string-width": "7.2.0",
+    "web-tree-sitter": "0.25.10"
   },
   devDependencies: {
     "@effect/language-service": "0.86.2",
     "@types/bun": "1.3.14",
     "@types/react": "19.2.15",
+    emulate: "0.9.0",
     oxfmt: "0.51.0",
     oxlint: "1.66.0",
     tuistory: "^0.8.0",
@@ -99,18 +104,424 @@ var package_default = {
 
 // src/Browser.tsx
 import { SyntaxStyle } from "@opentui/core";
+
+// ../../packages/ui/src/file-navigator/FileNavigator.tsx
+import { useEffect, useState } from "react";
+
+// ../../packages/ui/src/file-navigator/emptyState.tsx
+import { jsxDEV, Fragment } from "@opentui/react/jsx-dev-runtime";
+var fitValue = (value, width) => {
+  if (value.length <= width)
+    return value;
+  if (width <= 1)
+    return value.slice(value.length - 1);
+  return "\u2026" + value.slice(value.length - width + 1);
+};
+var NavigatorEmptyState = ({
+  emptyState,
+  width,
+  theme,
+  withTopSpacer
+}) => /* @__PURE__ */ jsxDEV(Fragment, {
+  children: [
+    withTopSpacer && /* @__PURE__ */ jsxDEV("text", {
+      content: ""
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("box", {
+      style: {
+        width,
+        flexDirection: "row",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ jsxDEV("text", {
+          content: emptyState.label,
+          wrapMode: "none",
+          style: { fg: theme.textMuted }
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("text", {
+          content: `"${fitValue(emptyState.value, width)}"`,
+          wrapMode: "none",
+          style: { fg: theme.textMuted }
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+
+// ../../packages/ui/src/file-navigator/row.tsx
+import { jsxDEV as jsxDEV2 } from "@opentui/react/jsx-dev-runtime";
+var SEPARATOR = " ";
+var MIN_PARENT_BUDGET = 3;
+var middleTruncate = (value, width) => {
+  if (width <= 0)
+    return "";
+  if (value.length <= width)
+    return value;
+  if (width <= 1)
+    return value.slice(0, width);
+  const available = width - 1;
+  const left = Math.ceil(available / 2);
+  const right = Math.floor(available / 2);
+  return value.slice(0, left) + "\u2026" + value.slice(value.length - right);
+};
+var fitTail = (value, width) => {
+  if (value.length <= width)
+    return value;
+  if (width <= 1)
+    return value.slice(0, 1);
+  return value.slice(0, width - 1) + "\u2026";
+};
+var formatFileRow = (path, width) => {
+  const slash = path.lastIndexOf("/");
+  if (slash < 0)
+    return { basename: fitTail(path, width), parent: "", separator: "" };
+  const basename = path.slice(slash + 1);
+  const parent = path.slice(0, slash);
+  if (basename.length >= width) {
+    return { basename: fitTail(basename, width), parent: "", separator: "" };
+  }
+  const remaining = width - basename.length - SEPARATOR.length;
+  if (remaining < MIN_PARENT_BUDGET || parent.length === 0) {
+    return { basename, parent: "", separator: "" };
+  }
+  return {
+    basename,
+    parent: middleTruncate(parent, remaining),
+    separator: SEPARATOR
+  };
+};
+var DefaultFileRow = ({
+  path,
+  selected,
+  width,
+  theme
+}) => {
+  const { basename, parent, separator } = formatFileRow(path, width);
+  return /* @__PURE__ */ jsxDEV2("text", {
+    wrapMode: "none",
+    children: [
+      /* @__PURE__ */ jsxDEV2("span", {
+        style: { fg: selected ? theme.selectedListItemText : theme.text },
+        children: basename
+      }, undefined, false, undefined, this),
+      parent !== "" && /* @__PURE__ */ jsxDEV2("span", {
+        style: { fg: theme.textMuted },
+        children: `${separator}${parent}`
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// ../../packages/ui/src/file-navigator/FileNavigator.tsx
+import { jsxDEV as jsxDEV3 } from "@opentui/react/jsx-dev-runtime";
+var INLINE_BORDER_SIDES = ["top", "bottom", "right"];
+var STACKED_BORDER_SIDES = ["top", "bottom"];
+var INLINE_BORDER_CHARS = {
+  topLeft: "\u250C",
+  topRight: "\u252C",
+  bottomLeft: "\u2514",
+  bottomRight: "\u2534",
+  horizontal: "\u2500",
+  vertical: "\u2502",
+  topT: "\u252C",
+  bottomT: "\u2534",
+  leftT: "\u251C",
+  rightT: "\u2524",
+  cross: "\u253C"
+};
+var INACTIVE_PANE_OPACITY = 0.62;
+var FileNavigator = ({
+  controller,
+  width,
+  paneHeight,
+  variant,
+  active,
+  visible,
+  theme,
+  header,
+  emptyState,
+  renderFile
+}) => {
+  const [scroll, setScroll] = useState(0);
+  const hasHeader = header !== undefined && header !== null && header !== false;
+  const visibleRows = Math.max(1, paneHeight - 2 - (hasHeader ? 1 : 0));
+  const maxScroll = Math.max(0, controller.filteredFiles.length - visibleRows);
+  const selectedIndex = controller.selectedIndex;
+  const desiredScroll = (() => {
+    let next = scroll;
+    if (selectedIndex !== null) {
+      if (selectedIndex < next)
+        next = selectedIndex;
+      else if (selectedIndex >= next + visibleRows)
+        next = selectedIndex - visibleRows + 1;
+    }
+    return Math.max(0, Math.min(maxScroll, next));
+  })();
+  useEffect(() => {
+    if (desiredScroll !== scroll)
+      setScroll(desiredScroll);
+  }, [desiredScroll, scroll]);
+  const rowWidth = Math.max(4, width - (variant === "inline" ? 2 : 1));
+  const visibleFiles = controller.filteredFiles.slice(desiredScroll, desiredScroll + visibleRows);
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ jsxDEV3("box", {
+    style: {
+      border: variant === "inline" ? INLINE_BORDER_SIDES : STACKED_BORDER_SIDES,
+      borderColor: theme.border,
+      width,
+      height: paneHeight,
+      ...variant === "inline" ? { flexShrink: 0 } : { flexGrow: 1, flexShrink: 1 },
+      flexDirection: "column",
+      backgroundColor: theme.backgroundPanel
+    },
+    ...variant === "inline" ? { customBorderChars: INLINE_BORDER_CHARS } : {},
+    children: /* @__PURE__ */ jsxDEV3("box", {
+      style: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexDirection: "column",
+        paddingLeft: 1,
+        backgroundColor: active ? theme.background : theme.backgroundPanel,
+        opacity: active ? 1 : INACTIVE_PANE_OPACITY
+      },
+      children: [
+        header,
+        controller.filteredFiles.length === 0 ? emptyState && /* @__PURE__ */ jsxDEV3(NavigatorEmptyState, {
+          emptyState,
+          width: rowWidth,
+          theme,
+          withTopSpacer: hasHeader
+        }, undefined, false, undefined, this) : visibleFiles.map((file, offset) => {
+          const index = desiredScroll + offset;
+          const selected = index === controller.selectedIndex;
+          return /* @__PURE__ */ jsxDEV3("box", {
+            style: {
+              width: rowWidth,
+              height: 1,
+              flexDirection: "row",
+              ...selected ? { backgroundColor: theme.backgroundElement } : {}
+            },
+            children: renderFile ? renderFile({ file, index, selected, width: rowWidth, theme }) : /* @__PURE__ */ jsxDEV3(DefaultFileRow, {
+              path: controller.getPath(file),
+              selected,
+              width: rowWidth,
+              theme
+            }, undefined, false, undefined, this)
+          }, controller.getId(file), false, undefined, this);
+        })
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+// ../../packages/ui/src/file-navigator/useFileNavigator.ts
+import { useEffect as useEffect2, useLayoutEffect, useReducer, useRef } from "react";
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var assertUniqueIds = (files, getId) => {
+  const ids = new Set;
+  for (const file of files) {
+    const id = getId(file);
+    if (ids.has(id)) {
+      throw new Error(`useFileNavigator: duplicate file ID ${JSON.stringify(id)}`);
+    }
+    ids.add(id);
+  }
+};
+var indexOfId = (files, id, getId) => files.findIndex((file) => getId(file) === id);
+var reconcile = (state, filteredFiles, getId) => {
+  if (filteredFiles.length === 0) {
+    return { ...state, filteredFiles, selectedId: null };
+  }
+  if (state.autoSelect) {
+    return {
+      ...state,
+      filteredFiles,
+      selectedId: getId(filteredFiles[0]),
+      priorIndex: 0,
+      autoSelect: false
+    };
+  }
+  if (state.selectedId !== null) {
+    const retainedIndex = indexOfId(filteredFiles, state.selectedId, getId);
+    if (retainedIndex >= 0) {
+      return { ...state, filteredFiles, priorIndex: retainedIndex };
+    }
+  }
+  const nextIndex = state.selectedId === null ? 0 : clamp(state.priorIndex, 0, Math.max(0, filteredFiles.length - 1));
+  return {
+    ...state,
+    filteredFiles,
+    selectedId: getId(filteredFiles[nextIndex]),
+    priorIndex: nextIndex
+  };
+};
+var snapshotOf = (state, getId) => {
+  if (state.selectedId === null) {
+    return {
+      appliedQuery: state.appliedQuery,
+      filteredFiles: state.filteredFiles,
+      selectedFile: null,
+      selectedIndex: null
+    };
+  }
+  const selectedIndex = indexOfId(state.filteredFiles, state.selectedId, getId);
+  const selectedFile = selectedIndex < 0 ? null : state.filteredFiles[selectedIndex] ?? null;
+  return {
+    appliedQuery: state.appliedQuery,
+    filteredFiles: state.filteredFiles,
+    selectedFile,
+    selectedIndex: selectedFile === null ? null : selectedIndex
+  };
+};
+var initialState = (options) => {
+  assertUniqueIds(options.files, options.getId);
+  const filteredFiles = options.filter(options.files, options.query);
+  if (filteredFiles.length === 0) {
+    return {
+      appliedQuery: options.query,
+      filteredFiles,
+      selectedId: null,
+      priorIndex: 0,
+      autoSelect: options.query.length > 0
+    };
+  }
+  const initialIndex = options.query.length === 0 && options.initialSelectedId != null ? indexOfId(filteredFiles, options.initialSelectedId, options.getId) : -1;
+  const selectedIndex = initialIndex >= 0 ? initialIndex : 0;
+  return {
+    appliedQuery: options.query,
+    filteredFiles,
+    selectedId: options.getId(filteredFiles[selectedIndex]),
+    priorIndex: selectedIndex,
+    autoSelect: false
+  };
+};
+var useFileNavigator = ({
+  files,
+  query,
+  getId,
+  getPath,
+  filter,
+  initialSelectedId,
+  debounceMs = 50
+}) => {
+  const stateRef = useRef(null);
+  let currentState = stateRef.current;
+  if (currentState === null) {
+    currentState = initialState({
+      files,
+      query,
+      getId,
+      getPath,
+      filter,
+      ...initialSelectedId === undefined ? {} : { initialSelectedId },
+      debounceMs
+    });
+    stateRef.current = currentState;
+  }
+  const [, render] = useReducer((version) => version + 1, 0);
+  const timerRef = useRef(null);
+  const filesRef = useRef(files);
+  const getIdRef = useRef(getId);
+  const getPathRef = useRef(getPath);
+  const filterRef = useRef(filter);
+  const revisionRef = useRef(0);
+  const renderRevision = revisionRef.current;
+  assertUniqueIds(files, getId);
+  const renderCandidate = reconcile(currentState, filter(files, currentState.appliedQuery), getId);
+  const cancelTimer = () => {
+    if (timerRef.current === null)
+      return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  };
+  const getSnapshot = () => snapshotOf(stateRef.current, getIdRef.current);
+  const applySearch = (nextQuery) => {
+    cancelTimer();
+    assertUniqueIds(filesRef.current, getIdRef.current);
+    const current = stateRef.current;
+    const queryChanged = current.appliedQuery !== nextQuery;
+    stateRef.current = reconcile({
+      ...current,
+      appliedQuery: nextQuery,
+      autoSelect: queryChanged ? true : current.autoSelect
+    }, filterRef.current(filesRef.current, nextQuery), getIdRef.current);
+    revisionRef.current += 1;
+    render();
+    return getSnapshot();
+  };
+  const selectIndex = (index) => {
+    const current = stateRef.current;
+    if (current.filteredFiles.length === 0) {
+      stateRef.current = { ...current, selectedId: null };
+    } else {
+      const nextIndex = clamp(index, 0, current.filteredFiles.length - 1);
+      stateRef.current = {
+        ...current,
+        selectedId: getIdRef.current(current.filteredFiles[nextIndex]),
+        priorIndex: nextIndex
+      };
+    }
+    revisionRef.current += 1;
+    render();
+    return getSnapshot();
+  };
+  const selectId = (id) => {
+    const current = stateRef.current;
+    const index = indexOfId(current.filteredFiles, id, getIdRef.current);
+    if (index < 0)
+      return getSnapshot();
+    stateRef.current = { ...current, selectedId: id, priorIndex: index };
+    revisionRef.current += 1;
+    render();
+    return getSnapshot();
+  };
+  useLayoutEffect(() => {
+    filesRef.current = files;
+    getIdRef.current = getId;
+    getPathRef.current = getPath;
+    filterRef.current = filter;
+    stateRef.current = revisionRef.current === renderRevision ? renderCandidate : reconcile(stateRef.current, filter(files, stateRef.current.appliedQuery), getId);
+    revisionRef.current += 1;
+  });
+  useEffect2(() => {
+    cancelTimer();
+    if (query === stateRef.current.appliedQuery)
+      return;
+    timerRef.current = setTimeout(() => applySearch(query), debounceMs);
+    return cancelTimer;
+  }, [debounceMs, query]);
+  useEffect2(() => cancelTimer, []);
+  const snapshot = snapshotOf(renderCandidate, getId);
+  return {
+    ...snapshot,
+    getId,
+    getPath,
+    getSnapshot,
+    flushSearch: applySearch,
+    cancelAutoSelect: () => {
+      stateRef.current = { ...stateRef.current, autoSelect: false };
+      revisionRef.current += 1;
+    },
+    selectIndex,
+    selectId,
+    moveBy: (delta) => selectIndex((getSnapshot().selectedIndex ?? 0) + delta),
+    selectFirst: () => selectIndex(0),
+    selectLast: () => selectIndex(stateRef.current.filteredFiles.length - 1)
+  };
+};
+// src/Browser.tsx
 import { useKeyboard, useRenderer, useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
 import { useAtomValue, useAtomSet } from "@effect/atom-react";
 import { Effect as Effect3 } from "effect";
-import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useReducer, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useReducer as useReducer2, useRef as useRef3, useState as useState4 } from "react";
 
 // src/keymap/browser.ts
 var JUMP = 8;
-var clamp = (n, min, max) => Math.max(min, Math.min(max, n));
-var lastIndex = (c) => Math.max(0, c.files.length - 1);
 var haveFiles = (c) => c.files.length > 0;
 var hasSelected = (c) => c.hasSelected;
-var stepBy = (c, delta) => c.setSelectedIndex((i) => clamp(i + delta, 0, lastIndex(c)));
 var inSidebar = (c) => c.focus === "sidebar";
 var filterClosed = (c) => !c.filterOpen;
 var paletteClosed = (c) => !c.paletteOpen;
@@ -215,7 +626,7 @@ var browserBindings = [
     description: "Move selection down",
     keys: ["j", "down"],
     when: inSidebarWithFiles,
-    run: (c) => stepBy(c, 1)
+    run: (c) => c.moveSelectionBy(1)
   },
   {
     id: "sidebar.up",
@@ -223,7 +634,7 @@ var browserBindings = [
     description: "Move selection up",
     keys: ["k", "up"],
     when: inSidebarWithFiles,
-    run: (c) => stepBy(c, -1)
+    run: (c) => c.moveSelectionBy(-1)
   },
   {
     id: "sidebar.jumpDown",
@@ -231,7 +642,7 @@ var browserBindings = [
     description: `Jump down ${JUMP}`,
     keys: ["shift+j"],
     when: inSidebarWithFiles,
-    run: (c) => stepBy(c, JUMP)
+    run: (c) => c.moveSelectionBy(JUMP)
   },
   {
     id: "sidebar.jumpUp",
@@ -239,7 +650,7 @@ var browserBindings = [
     description: `Jump up ${JUMP}`,
     keys: ["shift+k"],
     when: inSidebarWithFiles,
-    run: (c) => stepBy(c, -JUMP)
+    run: (c) => c.moveSelectionBy(-JUMP)
   },
   {
     id: "sidebar.pageDown",
@@ -247,7 +658,7 @@ var browserBindings = [
     description: "Page down",
     keys: ["space", "pagedown", "ctrl+d"],
     when: inSidebarWithFiles,
-    run: (c) => stepBy(c, JUMP)
+    run: (c) => c.moveSelectionBy(JUMP)
   },
   {
     id: "sidebar.pageUp",
@@ -255,7 +666,7 @@ var browserBindings = [
     description: "Page up",
     keys: ["b", "pageup", "ctrl+u"],
     when: inSidebarWithFiles,
-    run: (c) => stepBy(c, -JUMP)
+    run: (c) => c.moveSelectionBy(-JUMP)
   },
   {
     id: "sidebar.top",
@@ -263,7 +674,7 @@ var browserBindings = [
     description: "Jump to first file",
     keys: ["g"],
     when: inSidebarWithFiles,
-    run: (c) => c.setSelectedIndex(() => 0)
+    run: (c) => c.selectFirst()
   },
   {
     id: "sidebar.bottom",
@@ -271,7 +682,7 @@ var browserBindings = [
     description: "Jump to last file",
     keys: ["shift+g"],
     when: inSidebarWithFiles,
-    run: (c) => c.setSelectedIndex(() => lastIndex(c))
+    run: (c) => c.selectLast()
   },
   {
     id: "sidebar.open",
@@ -303,7 +714,7 @@ var browserBindings = [
     description: "Prev file",
     keys: ["["],
     when: inReaderWithSibling,
-    run: (c) => stepBy(c, -1)
+    run: (c) => c.moveSelectionBy(-1)
   },
   {
     id: "reader.nextFile",
@@ -311,7 +722,7 @@ var browserBindings = [
     description: "Next file",
     keys: ["]"],
     when: inReaderWithSibling,
-    run: (c) => stepBy(c, 1)
+    run: (c) => c.moveSelectionBy(1)
   },
   {
     id: "reader.back",
@@ -614,7 +1025,7 @@ var setActiveTheme = (definition, tone) => {
 };
 
 // src/PromptRow.tsx
-import { jsxDEV } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4 } from "@opentui/react/jsx-dev-runtime";
 var PREFIX = "> ";
 var CURSOR = "\u258F";
 var PromptRow = ({ query, editing, placeholder = "", width }) => {
@@ -623,14 +1034,14 @@ var PromptRow = ({ query, editing, placeholder = "", width }) => {
   const bodyFg = editing ? colors.primary : query.length > 0 ? colors.text : colors.textMuted;
   const body = rawBody.length <= bodyBudget ? rawBody : editing ? "\u2026" + rawBody.slice(rawBody.length - bodyBudget + 1) : rawBody.slice(0, bodyBudget - 1) + "\u2026";
   const prefixFg = editing ? colors.secondary : colors.primary;
-  return /* @__PURE__ */ jsxDEV("text", {
+  return /* @__PURE__ */ jsxDEV4("text", {
     wrapMode: "none",
     children: [
-      /* @__PURE__ */ jsxDEV("span", {
+      /* @__PURE__ */ jsxDEV4("span", {
         style: { fg: prefixFg },
         children: PREFIX
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("span", {
+      /* @__PURE__ */ jsxDEV4("span", {
         style: { fg: bodyFg },
         children: body
       }, undefined, false, undefined, this)
@@ -639,7 +1050,7 @@ var PromptRow = ({ query, editing, placeholder = "", width }) => {
 };
 
 // src/CommandPalette.tsx
-import { jsxDEV as jsxDEV2 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
 var SCRIM = RGBA.fromInts(0, 0, 0, 150);
 var FOOTER_HINT = "\u2191\u2193 select  enter run  esc close";
 var CATEGORY_ORDER = ["Navigation", "View", "File", "Appearance", "App"];
@@ -709,7 +1120,7 @@ var CommandPalette = ({
   const titleWidth = Math.max(8, rowWidth - 2 - SHORTCUT_WIDTH - 1);
   const fit = (s, width) => s.length === width ? s : s.length > width ? s.slice(0, Math.max(0, width - 1)) + "\u2026" : s + " ".repeat(width - s.length);
   const fitRight = (s, width) => s.length >= width ? s.slice(0, width) : " ".repeat(width - s.length) + s;
-  return /* @__PURE__ */ jsxDEV2("box", {
+  return /* @__PURE__ */ jsxDEV5("box", {
     position: "absolute",
     left: 0,
     top: 0,
@@ -717,7 +1128,7 @@ var CommandPalette = ({
     height: viewportHeight,
     zIndex: 20,
     style: { backgroundColor: SCRIM },
-    children: /* @__PURE__ */ jsxDEV2("box", {
+    children: /* @__PURE__ */ jsxDEV5("box", {
       position: "absolute",
       left,
       top,
@@ -734,26 +1145,26 @@ var CommandPalette = ({
         backgroundColor: colors.backgroundPanel
       },
       children: [
-        /* @__PURE__ */ jsxDEV2(PromptRow, {
+        /* @__PURE__ */ jsxDEV5(PromptRow, {
           query,
           editing: true,
           width: rowWidth
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV2("text", {
+        /* @__PURE__ */ jsxDEV5("text", {
           content: " "
         }, undefined, false, undefined, this),
-        commands.length === 0 ? /* @__PURE__ */ jsxDEV2("text", {
+        commands.length === 0 ? /* @__PURE__ */ jsxDEV5("text", {
           wrapMode: "none",
           content: "  (no matches)",
           style: { fg: colors.textMuted }
         }, undefined, false, undefined, this) : visible.map((row) => {
           if (row.kind === "spacer") {
-            return /* @__PURE__ */ jsxDEV2("text", {
+            return /* @__PURE__ */ jsxDEV5("text", {
               content: " "
             }, row.key, false, undefined, this);
           }
           if (row.kind === "header") {
-            return /* @__PURE__ */ jsxDEV2("text", {
+            return /* @__PURE__ */ jsxDEV5("text", {
               wrapMode: "none",
               content: fit(row.text, rowWidth),
               style: { fg: colors.textMuted, attributes: 1 }
@@ -765,25 +1176,25 @@ var CommandPalette = ({
           const titleText = fit(cmd.title, titleWidth);
           const shortcutText = cmd.shortcut ? fitRight(cmd.shortcut, SHORTCUT_WIDTH) : " ".repeat(SHORTCUT_WIDTH);
           const titleFg = isSelected ? colors.primary : colors.text;
-          return /* @__PURE__ */ jsxDEV2("text", {
+          return /* @__PURE__ */ jsxDEV5("text", {
             wrapMode: "none",
             style: isSelected ? { bg: colors.backgroundElement } : {},
             children: [
-              /* @__PURE__ */ jsxDEV2("span", {
+              /* @__PURE__ */ jsxDEV5("span", {
                 style: { fg: titleFg },
                 children: `${selector}${titleText} `
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("span", {
+              /* @__PURE__ */ jsxDEV5("span", {
                 style: { fg: colors.textMuted },
                 children: shortcutText
               }, undefined, false, undefined, this)
             ]
           }, cmd.id, true, undefined, this);
         }),
-        /* @__PURE__ */ jsxDEV2("text", {
+        /* @__PURE__ */ jsxDEV5("text", {
           content: " "
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV2("text", {
+        /* @__PURE__ */ jsxDEV5("text", {
           wrapMode: "none",
           content: fit(FOOTER_HINT, rowWidth),
           style: { fg: colors.textMuted }
@@ -951,8 +1362,8 @@ var displayKey = (raw) => {
 };
 
 // src/Spinner.tsx
-import { useEffect, useRef, useState } from "react";
-import { jsxDEV as jsxDEV3 } from "@opentui/react/jsx-dev-runtime";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
 var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 var FRAME_COUNT = FRAMES.length;
 var normalizeFrameIndex = (index) => (index % FRAME_COUNT + FRAME_COUNT) % FRAME_COUNT;
@@ -962,12 +1373,12 @@ var Spinner = ({
   initialFrameIndex = 0,
   registerTick = null
 }) => {
-  const [index, setIndex] = useState(() => normalizeFrameIndex(initialFrameIndex));
-  const tickRef = useRef(() => {
+  const [index, setIndex] = useState2(() => normalizeFrameIndex(initialFrameIndex));
+  const tickRef = useRef2(() => {
     return;
   });
   tickRef.current = () => setIndex((prev) => (prev + 1) % FRAME_COUNT);
-  useEffect(() => {
+  useEffect3(() => {
     if (registerTick) {
       registerTick(() => tickRef.current());
       return;
@@ -977,7 +1388,7 @@ var Spinner = ({
     }, intervalMs);
     return () => clearInterval(id);
   }, [intervalMs, registerTick]);
-  return /* @__PURE__ */ jsxDEV3("text", {
+  return /* @__PURE__ */ jsxDEV6("text", {
     content: FRAMES[index] ?? FRAMES[0],
     wrapMode: "none",
     style: { fg }
@@ -985,7 +1396,7 @@ var Spinner = ({
 };
 
 // src/StatusIndicator.tsx
-import { jsxDEV as jsxDEV4 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } from "@opentui/react/jsx-dev-runtime";
 var statusIndicatorFg = (variant) => {
   switch (variant) {
     case "info":
@@ -1006,7 +1417,7 @@ var StatusIndicator = ({
 }) => {
   const activeColor = statusIndicatorFg(variant);
   const backgroundColor = active ? activeColor : colors.backgroundElement;
-  return /* @__PURE__ */ jsxDEV4("box", {
+  return /* @__PURE__ */ jsxDEV7("box", {
     ...onMouseUp === undefined ? {} : { onMouseUp },
     style: {
       width: 3,
@@ -1014,7 +1425,7 @@ var StatusIndicator = ({
       flexDirection: "row",
       backgroundColor
     },
-    children: /* @__PURE__ */ jsxDEV4("text", {
+    children: /* @__PURE__ */ jsxDEV7("text", {
       content: ` ${icon} `,
       wrapMode: "none",
       style: {
@@ -1027,7 +1438,7 @@ var StatusIndicator = ({
 };
 
 // src/Footer.tsx
-import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "@opentui/react/jsx-dev-runtime";
 var FOOTER_HEIGHT = 1;
 var normalizeStatusLine = (status) => status.replace(/\s+/g, " ").trim();
 var HINT_SEPARATOR = "  ";
@@ -1117,17 +1528,17 @@ var Footer = ({
   const statusContent = status ? status.slice(0, Math.max(0, statusBudget - statusChromeWidth)) : "";
   const statusSeparatorContent = status ? STATUS_SEPARATOR.slice(0, Math.max(0, statusBudget - nonWarningStatusPrefixBudget - statusContent.length)) : "";
   const noticeContent = notice ? notice.length > contentBudget ? notice.slice(0, contentBudget) : notice : null;
-  const renderIndicators = () => renderedIndicators.map(({ id, ...props }) => /* @__PURE__ */ jsxDEV5(StatusIndicator, {
+  const renderIndicators = () => renderedIndicators.map(({ id, ...props }) => /* @__PURE__ */ jsxDEV8(StatusIndicator, {
     ...props
   }, id, false, undefined, this));
-  const renderIndicatorContentGap = () => indicatorContentGapBudget > 0 ? /* @__PURE__ */ jsxDEV5("text", {
+  const renderIndicatorContentGap = () => indicatorContentGapBudget > 0 ? /* @__PURE__ */ jsxDEV8("text", {
     content: " ",
     wrapMode: "none",
     style: { fg: colors.textMuted }
   }, undefined, false, undefined, this) : null;
   const renderHints = () => visibleHints.flatMap((h, i) => {
     const sep = i > 0 ? [
-      /* @__PURE__ */ jsxDEV5("text", {
+      /* @__PURE__ */ jsxDEV8("text", {
         content: HINT_SEPARATOR,
         wrapMode: "none",
         style: { fg: colors.textMuted }
@@ -1135,12 +1546,12 @@ var Footer = ({
     ] : [];
     return [
       ...sep,
-      /* @__PURE__ */ jsxDEV5("text", {
+      /* @__PURE__ */ jsxDEV8("text", {
         content: h.key,
         wrapMode: "none",
         style: { fg: colors.text }
       }, `k${i}`, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5("text", {
+      /* @__PURE__ */ jsxDEV8("text", {
         content: ` ${h.label}`,
         wrapMode: "none",
         style: { fg: colors.textMuted }
@@ -1148,12 +1559,12 @@ var Footer = ({
     ];
   });
   if (noticeContent !== null) {
-    return /* @__PURE__ */ jsxDEV5("box", {
+    return /* @__PURE__ */ jsxDEV8("box", {
       style: rowStyle,
       children: [
         renderIndicators(),
         renderIndicatorContentGap(),
-        /* @__PURE__ */ jsxDEV5("text", {
+        /* @__PURE__ */ jsxDEV8("text", {
           content: noticeContent,
           wrapMode: "none",
           style: { fg: colors.primary }
@@ -1168,25 +1579,25 @@ var Footer = ({
       ...discoverySpinnerInitialFrameIndex === undefined ? {} : { initialFrameIndex: discoverySpinnerInitialFrameIndex },
       ...discoverySpinnerRegisterTick === undefined ? {} : { registerTick: discoverySpinnerRegisterTick }
     };
-    return /* @__PURE__ */ jsxDEV5("box", {
+    return /* @__PURE__ */ jsxDEV8("box", {
       style: rowStyle,
       children: [
         renderIndicators(),
         renderIndicatorContentGap(),
-        nonWarningStatusPrefixBudget >= 1 ? /* @__PURE__ */ jsxDEV5(Spinner, {
+        nonWarningStatusPrefixBudget >= 1 ? /* @__PURE__ */ jsxDEV8(Spinner, {
           ...spinnerProps
         }, undefined, false, undefined, this) : null,
-        nonWarningStatusPrefixBudget >= 2 ? /* @__PURE__ */ jsxDEV5("text", {
+        nonWarningStatusPrefixBudget >= 2 ? /* @__PURE__ */ jsxDEV8("text", {
           content: " ",
           wrapMode: "none",
           style: { fg: colors.textMuted }
         }, undefined, false, undefined, this) : null,
-        isPartialWarning ? null : /* @__PURE__ */ jsxDEV5("text", {
+        isPartialWarning ? null : /* @__PURE__ */ jsxDEV8("text", {
           content: statusContent,
           wrapMode: "none",
           style: { fg: colors.secondary }
         }, undefined, false, undefined, this),
-        statusSeparatorContent.length > 0 && /* @__PURE__ */ jsxDEV5("text", {
+        statusSeparatorContent.length > 0 && /* @__PURE__ */ jsxDEV8("text", {
           content: statusSeparatorContent,
           wrapMode: "none",
           style: { fg: colors.textMuted }
@@ -1195,7 +1606,7 @@ var Footer = ({
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV5("box", {
+  return /* @__PURE__ */ jsxDEV8("box", {
     style: rowStyle,
     children: [
       renderIndicators(),
@@ -1206,7 +1617,7 @@ var Footer = ({
 };
 
 // src/ui/middleTruncate.ts
-var middleTruncate = (value, width, options = {}) => {
+var middleTruncate2 = (value, width, options = {}) => {
   const ellipsis = options.ellipsis ?? "\u2026";
   if (width <= 0)
     return "";
@@ -1221,7 +1632,7 @@ var middleTruncate = (value, width, options = {}) => {
 };
 
 // src/Header.tsx
-import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
 var HEADER_HEIGHT = 1;
 var FILE_SEPARATOR = " \xB7 ";
 var HEADER_HORIZONTAL_PADDING = 2;
@@ -1248,7 +1659,7 @@ var layoutHeaderSegments = ({
   const rootWidth = rootSegment === null ? 0 : usableWidth - joinedLength(segments) - FILE_SEPARATOR.length - HEADER_GROUP_GAP - right.length;
   if (root !== null && root.length > rootWidth && rootWidth >= MIN_TRUNCATED_ROOT_WIDTH) {
     return {
-      left: [...segments, { id: "root", text: middleTruncate(root, rootWidth), tone: "muted" }],
+      left: [...segments, { id: "root", text: middleTruncate2(root, rootWidth), tone: "muted" }],
       right
     };
   }
@@ -1263,7 +1674,7 @@ var layoutHeaderSegments = ({
     const fileWidth = usableWidth - BRAND.length - FILE_SEPARATOR.length;
     if (fileWidth > 0) {
       return {
-        left: [iconBrand, { id: "file", text: middleTruncate(file, fileWidth), tone: "primary" }],
+        left: [iconBrand, { id: "file", text: middleTruncate2(file, fileWidth), tone: "primary" }],
         right: null
       };
     }
@@ -1277,7 +1688,7 @@ var fits = (segments, right, usableWidth) => {
 };
 var Header = ({ width, currentFile, rootLabel, version = package_default.version }) => {
   const layout = layoutHeaderSegments({ width, currentFile, rootLabel, version });
-  return /* @__PURE__ */ jsxDEV6("box", {
+  return /* @__PURE__ */ jsxDEV9("box", {
     style: {
       width,
       height: HEADER_HEIGHT,
@@ -1289,20 +1700,20 @@ var Header = ({ width, currentFile, rootLabel, version = package_default.version
       backgroundColor: colors.backgroundPanel
     },
     children: [
-      /* @__PURE__ */ jsxDEV6("text", {
+      /* @__PURE__ */ jsxDEV9("text", {
         wrapMode: "none",
         children: layout.left.map((segment, idx) => [
-          idx > 0 ? /* @__PURE__ */ jsxDEV6("span", {
+          idx > 0 ? /* @__PURE__ */ jsxDEV9("span", {
             style: { fg: colors.textMuted },
             children: FILE_SEPARATOR
           }, `${segment.id}-${idx}-separator`, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV6("span", {
+          /* @__PURE__ */ jsxDEV9("span", {
             style: { fg: segment.tone === "primary" ? colors.text : colors.textMuted },
             children: segment.text
           }, `${segment.id}-${idx}`, false, undefined, this)
         ])
       }, undefined, false, undefined, this),
-      layout.right !== null && /* @__PURE__ */ jsxDEV6("text", {
+      layout.right !== null && /* @__PURE__ */ jsxDEV9("text", {
         content: layout.right,
         wrapMode: "none",
         style: { fg: colors.textMuted }
@@ -1509,55 +1920,56 @@ var resolveSidebarWidth = (viewport, preferred) => {
 var defaultPreferredWidth = (viewport) => Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, Math.floor(viewport * 0.25)));
 var canFitInline = (viewport) => viewport >= SIDEBAR_MIN_WIDTH + DIVIDER_WIDTH + READER_MIN_WIDTH;
 
-// src/layout/sidebarEmptyState.ts
-var HEAD_ELISION_PREFIX = "\u2026";
-var fitSidebarEmptyValue = (value, width) => {
-  if (value.length <= width)
-    return value;
-  if (width <= 1)
-    return value.slice(value.length - 1);
-  return HEAD_ELISION_PREFIX + value.slice(value.length - width + 1);
-};
-
-// src/layout/sidebarRow.ts
-var SIDEBAR_ROW_SEPARATOR = " ";
-var MIN_PARENT_BUDGET = 3;
-var formatSidebarRow = (relativePath, totalWidth) => {
-  const slash = relativePath.lastIndexOf("/");
-  if (slash < 0) {
-    return { basename: fitTail(relativePath, totalWidth), separator: "", parent: "" };
-  }
-  const basename = relativePath.slice(slash + 1);
-  const parentFull = relativePath.slice(0, slash);
-  if (basename.length >= totalWidth) {
-    return { basename: fitTail(basename, totalWidth), separator: "", parent: "" };
-  }
-  const remaining = totalWidth - basename.length - SIDEBAR_ROW_SEPARATOR.length;
-  if (remaining < MIN_PARENT_BUDGET || parentFull.length === 0) {
-    return { basename, separator: "", parent: "" };
-  }
-  if (parentFull.length <= remaining) {
-    return row(basename, parentFull);
-  }
-  return row(basename, middleTruncate(parentFull, remaining));
-};
-var row = (basename, parent) => ({
-  basename,
-  separator: SIDEBAR_ROW_SEPARATOR,
-  parent
-});
-var fitTail = (s, width) => {
-  if (s.length <= width)
-    return s;
-  if (width <= 1)
-    return s.slice(0, 1);
-  return s.slice(0, width - 1) + "\u2026";
+// src/Sidebar.tsx
+import { jsxDEV as jsxDEV10 } from "@opentui/react/jsx-dev-runtime";
+var Sidebar = ({
+  files,
+  controller,
+  filterInput,
+  filterOpen,
+  discoveryActive,
+  rootLabel,
+  viewportHeight,
+  paneWidth,
+  narrow,
+  active,
+  visible
+}) => {
+  const headerVisible = files.length > 0 || discoveryActive;
+  const emptyState = controller.filteredFiles.length > 0 ? undefined : files.length === 0 ? discoveryActive ? { label: "Scanning", value: "\u2026" } : { label: "No markdown files in", value: rootLabel } : { label: "No files match", value: controller.appliedQuery };
+  const rowWidth = Math.max(4, paneWidth - (narrow ? 1 : 2));
+  return /* @__PURE__ */ jsxDEV10(FileNavigator, {
+    controller,
+    width: paneWidth,
+    paneHeight: Math.max(1, viewportHeight - HEADER_HEIGHT - FOOTER_HEIGHT),
+    variant: narrow ? "stacked" : "inline",
+    active,
+    visible,
+    theme: {
+      background: colors.background,
+      backgroundPanel: colors.backgroundPanel,
+      backgroundElement: colors.backgroundElement,
+      text: colors.text,
+      textMuted: colors.textMuted,
+      border: colors.border,
+      selectedListItemText: colors.selectedListItemText
+    },
+    ...headerVisible ? {
+      header: /* @__PURE__ */ jsxDEV10(PromptRow, {
+        query: filterInput,
+        editing: filterOpen,
+        placeholder: "type / to filter",
+        width: rowWidth
+      }, undefined, false, undefined, this)
+    } : {},
+    ...emptyState === undefined ? {} : { emptyState }
+  }, undefined, false, undefined, this);
 };
 
 // src/StatusPopover.tsx
 import { useTerminalDimensions } from "@opentui/react";
-import { useMemo, useState as useState2 } from "react";
-import { jsxDEV as jsxDEV7, Fragment } from "@opentui/react/jsx-dev-runtime";
+import { useMemo, useState as useState3 } from "react";
+import { jsxDEV as jsxDEV11, Fragment as Fragment2 } from "@opentui/react/jsx-dev-runtime";
 var clamp2 = (n, min, max) => Math.max(min, Math.min(max, n));
 var measureLine = (line) => line.length;
 var wrapLine = (line, width) => {
@@ -1595,7 +2007,7 @@ var StatusPopoverPanel = ({
   while (linesToRender.length < popoverHeight - 2)
     linesToRender.push("");
   const borderColor = statusIndicatorFg(variant);
-  return /* @__PURE__ */ jsxDEV7("box", {
+  return /* @__PURE__ */ jsxDEV11("box", {
     position: "absolute",
     left: 1,
     top: Math.max(0, viewportHeight - popoverHeight - 2),
@@ -1609,15 +2021,15 @@ var StatusPopoverPanel = ({
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ jsxDEV7("text", {
+      /* @__PURE__ */ jsxDEV11("text", {
         content: ""
       }, undefined, false, undefined, this),
-      linesToRender.map((line, i) => /* @__PURE__ */ jsxDEV7("text", {
+      linesToRender.map((line, i) => /* @__PURE__ */ jsxDEV11("text", {
         content: line,
         wrapMode: "none",
         style: { fg: colors.text }
       }, i, false, undefined, this)),
-      /* @__PURE__ */ jsxDEV7("text", {
+      /* @__PURE__ */ jsxDEV11("text", {
         content: ""
       }, undefined, false, undefined, this)
     ]
@@ -8362,8 +8774,10 @@ var saveThemePreference = async (record, path = defaultConfigPath()) => {
 };
 
 // src/Browser.tsx
-import { jsxDEV as jsxDEV8, Fragment as Fragment2 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "@opentui/react/jsx-dev-runtime";
 var defaultReadFile = (path) => Effect3.runPromise(readFileText(path));
+var getFileId = (file) => file.path;
+var getFilePath = (file) => file.relativePath;
 var clamp3 = (n, min, max) => Math.max(min, Math.min(max, n));
 var nextReaderEmptyStateTipRotation = 0;
 var FILTER_DEBOUNCE_MS = 50;
@@ -8382,43 +8796,6 @@ var floatingOverlayReducer = (state, action) => {
       return state.kind === "status-popover" ? { kind: "status-popover", content: action.content } : state;
   }
 };
-var SidebarEmptyMessage = ({
-  label,
-  value,
-  width,
-  withTopSpacer
-}) => /* @__PURE__ */ jsxDEV8(Fragment2, {
-  children: [
-    withTopSpacer && /* @__PURE__ */ jsxDEV8("text", {
-      content: ""
-    }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV8("box", {
-      style: {
-        width,
-        flexDirection: "row",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        gap: 1
-      },
-      children: [
-        /* @__PURE__ */ jsxDEV8("text", {
-          wrapMode: "none",
-          children: /* @__PURE__ */ jsxDEV8("span", {
-            style: { fg: colors.textMuted },
-            children: label
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV8("text", {
-          wrapMode: "none",
-          children: /* @__PURE__ */ jsxDEV8("span", {
-            style: { fg: colors.textMuted },
-            children: `"${fitSidebarEmptyValue(value, width)}"`
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  ]
-}, undefined, true, undefined, this);
 var Browser = ({
   files,
   initialIndex = 0,
@@ -8447,20 +8824,29 @@ var Browser = ({
   const theme = useAtomValue(themeAtom);
   const setTheme = useAtomSet(themeAtom);
   const syntaxStyle = useMemo2(() => SyntaxStyle.fromStyles(colors.syntax), [theme]);
-  const [selectedIndex, setSelectedIndex] = useState3(() => clamp3(initialIndex, 0, Math.max(0, files.length - 1)));
-  const [wrapEnabled, setWrapEnabled] = useState3(initialWrap);
-  const [loaded, setLoaded] = useState3(null);
-  const [error, setError] = useState3(null);
-  const [shown, setShown] = useState3(true);
+  const [wrapEnabled, setWrapEnabled] = useState4(initialWrap);
+  const [loaded, setLoaded] = useState4(null);
+  const [error, setError] = useState4(null);
+  const [shown, setShown] = useState4(true);
   const startInFilter = startupFocus === "filter";
   const initialFocus = startupFocus === null ? shown ? "sidebar" : "reader" : startupFocus === "reader" ? "reader" : "sidebar";
-  const [focus, setFocus] = useState3(() => initialFocus);
-  const [sidebarScroll, setSidebarScroll] = useState3(0);
-  const [filterOpen, setFilterOpen] = useState3(startInFilter);
-  const [filterInput, setFilterInput] = useState3(initialQuery);
-  const [filterApplied, setFilterApplied] = useState3(initialQuery);
-  const [floatingOverlay, dispatchFloatingOverlayState] = useReducer(floatingOverlayReducer, noFloatingOverlay);
-  const floatingOverlayRef = useRef2(noFloatingOverlay);
+  const [focus, setFocus] = useState4(() => initialFocus);
+  const [filterOpen, setFilterOpen] = useState4(startInFilter);
+  const [filterInput, setFilterInput] = useState4(initialQuery);
+  const initialSelectedIdRef = useRef3(files.length === 0 ? null : files[clamp3(initialIndex, 0, Math.max(0, files.length - 1))]?.path ?? null);
+  const navigator = useFileNavigator({
+    files,
+    query: filterInput,
+    getId: getFileId,
+    getPath: getFilePath,
+    filter: filterFiles,
+    initialSelectedId: initialSelectedIdRef.current,
+    debounceMs: filterDebounceMs
+  });
+  const displayedFiles = navigator.filteredFiles;
+  const selected = navigator.selectedFile;
+  const [floatingOverlay, dispatchFloatingOverlayState] = useReducer2(floatingOverlayReducer, noFloatingOverlay);
+  const floatingOverlayRef = useRef3(noFloatingOverlay);
   const dispatchFloatingOverlay = (action) => {
     const next = floatingOverlayReducer(floatingOverlayRef.current, action);
     floatingOverlayRef.current = next;
@@ -8470,29 +8856,27 @@ var Browser = ({
   const paletteOpen = floatingOverlay.kind === "command-palette";
   const activeStatusPopover = floatingOverlay.kind === "status-popover" ? floatingOverlay : null;
   const discoveryWarningStatus = isPartialDiscoveryWarning2(discoveryStatus) ? discoveryStatus : null;
-  const [paletteQuery, setPaletteQuery] = useState3("");
-  const [paletteIndex, setPaletteIndex] = useState3(0);
-  const paletteQueryRef = useRef2("");
-  const paletteIndexRef = useRef2(0);
-  const [readerEmptyStateTipRotation, setReaderEmptyStateTipRotation] = useState3(() => nextReaderEmptyStateTipRotation);
-  const readerEmptyStateVisibleRef = useRef2(false);
-  const filterOpenRef = useRef2(startInFilter);
-  const filterInputRef = useRef2(initialQuery);
-  const filterAppliedRef = useRef2(initialQuery);
-  const autoSelectForAppliedFilterRef = useRef2(true);
-  const focusRef = useRef2(focus);
-  const restoreFilterOnSidebarFocusRef = useRef2(startInFilter);
-  const [footerNotice, setFooterNoticeState] = useState3(null);
+  const [paletteQuery, setPaletteQuery] = useState4("");
+  const [paletteIndex, setPaletteIndex] = useState4(0);
+  const paletteQueryRef = useRef3("");
+  const paletteIndexRef = useRef3(0);
+  const [readerEmptyStateTipRotation, setReaderEmptyStateTipRotation] = useState4(() => nextReaderEmptyStateTipRotation);
+  const readerEmptyStateVisibleRef = useRef3(false);
+  const filterOpenRef = useRef3(startInFilter);
+  const filterInputRef = useRef3(initialQuery);
+  const focusRef = useRef3(focus);
+  const restoreFilterOnSidebarFocusRef = useRef3(startInFilter);
+  const [footerNotice, setFooterNoticeState] = useState4(null);
   const pushFooterNotice = (text, ttlMs = 2000) => setFooterNoticeState({ text, ttlMs });
-  const serverRef = useRef2(null);
-  const pendingSelectionPathRef = useRef2(null);
-  useEffect2(() => {
+  const serverRef = useRef3(null);
+  const pendingSelectionPathRef = useRef3(null);
+  useEffect4(() => {
     return () => {
       serverRef.current?.stop();
       serverRef.current = null;
     };
   }, []);
-  useEffect2(() => {
+  useEffect4(() => {
     if (footerNotice === null)
       return;
     closeFloatingOverlay();
@@ -8501,7 +8885,7 @@ var Browser = ({
     const timer = setTimeout(() => setFooterNoticeState(null), footerNotice.ttlMs);
     return () => clearTimeout(timer);
   }, [disableFooterNoticeAutoClear, footerNotice]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (discoveryWarningStatus === null) {
       if (floatingOverlay.kind === "status-popover")
         closeFloatingOverlay();
@@ -8511,11 +8895,11 @@ var Browser = ({
       dispatchFloatingOverlay({ type: "update-status-popover", content: discoveryWarningStatus });
     }
   }, [discoveryWarningStatus, floatingOverlay]);
-  const updateNoticeSeenRef = useRef2(null);
-  useEffect2(() => {
+  const updateNoticeSeenRef = useRef3(null);
+  useEffect4(() => {
     focusRef.current = focus;
   }, [focus]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!updateNotice)
       return;
     if (updateNoticeSeenRef.current === updateNotice)
@@ -8550,55 +8934,27 @@ var Browser = ({
     });
     pushFooterNotice(`tone: ${nextTone}`);
   };
-  useEffect2(() => {
-    if (filterInput === filterApplied)
-      return;
-    const timer = setTimeout(() => {
-      filterAppliedRef.current = filterInput;
-      setFilterApplied(filterInput);
-    }, filterDebounceMs);
-    return () => clearTimeout(timer);
-  }, [filterApplied, filterDebounceMs, filterInput]);
-  useEffect2(() => {
-    autoSelectForAppliedFilterRef.current = true;
-  }, [filterApplied]);
-  const displayedFiles = useMemo2(() => filterFiles(files, filterApplied), [files, filterApplied]);
   const filterHasNoMatches = filterInput.length > 0 && displayedFiles.length === 0;
-  useEffect2(() => {
-    if (filterApplied.length === 0)
-      return;
-    if (!autoSelectForAppliedFilterRef.current)
-      return;
-    if (displayedFiles.length === 0)
-      return;
-    setSelectedIndex(0);
-    autoSelectForAppliedFilterRef.current = false;
-  }, [displayedFiles, filterApplied]);
-  useEffect2(() => {
-    if (selectedIndex >= displayedFiles.length) {
-      setSelectedIndex(displayedFiles.length === 0 ? 0 : displayedFiles.length - 1);
-    }
-  }, [displayedFiles.length, selectedIndex]);
-  useEffect2(() => {
+  useEffect4(() => {
     const target = pendingSelectionPathRef.current;
     if (target === null)
       return;
-    const idx = displayedFiles.findIndex((f) => f.path === target);
-    if (idx >= 0) {
-      setSelectedIndex(idx);
+    if (displayedFiles.some((file) => file.path === target)) {
+      const snapshot = navigator.selectId(target);
+      if (snapshot.selectedFile?.path !== target)
+        return;
       pendingSelectionPathRef.current = null;
     }
   }, [displayedFiles]);
-  const selected = displayedFiles[selectedIndex];
-  const [renderedPath, setRenderedPath] = useState3(selected?.path ?? null);
-  useEffect2(() => {
+  const [renderedPath, setRenderedPath] = useState4(selected?.path ?? null);
+  useEffect4(() => {
     const target = selected?.path ?? null;
     if (target === renderedPath)
       return;
     const timer = setTimeout(() => setRenderedPath(target), renderedPathDebounceMs);
     return () => clearTimeout(timer);
   }, [selected?.path, renderedPath, renderedPathDebounceMs]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!renderedPath) {
       setLoaded(null);
       return;
@@ -8630,10 +8986,20 @@ var Browser = ({
     paletteOpen,
     wrapEnabled,
     setFocus,
-    setSelectedIndex: (updater) => {
+    moveSelectionBy: (delta) => {
+      pendingSelectionPathRef.current = null;
+      navigator.cancelAutoSelect();
+      navigator.moveBy(delta);
+    },
+    selectFirst: () => {
       pendingSelectionPathRef.current = null;
-      autoSelectForAppliedFilterRef.current = false;
-      setSelectedIndex(updater);
+      navigator.cancelAutoSelect();
+      navigator.selectFirst();
+    },
+    selectLast: () => {
+      pendingSelectionPathRef.current = null;
+      navigator.cancelAutoSelect();
+      navigator.selectLast();
     },
     toggleShown: () => {
       if (!canFitInline(width)) {
@@ -8664,10 +9030,9 @@ var Browser = ({
     clearAndOpenFilter: () => {
       closeFloatingOverlay();
       filterInputRef.current = "";
-      filterAppliedRef.current = "";
       setFilterInput("");
-      setFilterApplied("");
-      setSelectedIndex(() => 0);
+      navigator.flushSearch("");
+      navigator.selectFirst();
       focusRef.current = "sidebar";
       if (focus !== "sidebar")
         setFocus("sidebar");
@@ -8686,13 +9051,14 @@ var Browser = ({
     cycleTheme,
     toggleTone,
     toggleAll: () => {
-      if (pendingSelectionPathRef.current === null && selected) {
-        pendingSelectionPathRef.current = selected.path;
+      const current = navigator.getSnapshot().selectedFile;
+      if (pendingSelectionPathRef.current === null && current) {
+        pendingSelectionPathRef.current = current.path;
       }
       onToggleAll?.();
     },
     serveCurrent: () => {
-      const file = displayedFiles[selectedIndex];
+      const file = navigator.getSnapshot().selectedFile;
       if (!file)
         return;
       let handle = serverRef.current;
@@ -8722,7 +9088,7 @@ var Browser = ({
       process.exit(0);
     },
     editCurrent: () => {
-      const file = displayedFiles[selectedIndex];
+      const file = navigator.getSnapshot().selectedFile;
       if (!file)
         return;
       const editor = resolveEditor(process.env);
@@ -8772,7 +9138,7 @@ var Browser = ({
       })();
     },
     copyCurrentContents: () => {
-      const file = displayedFiles[selectedIndex];
+      const file = navigator.getSnapshot().selectedFile;
       if (!file)
         return;
       (async () => {
@@ -8855,9 +9221,8 @@ var Browser = ({
     }
     if (filterOpenRef.current && focusRef.current === "sidebar") {
       const closeFilter = (commit) => {
-        filterAppliedRef.current = filterInputRef.current;
-        setFilterApplied(filterInputRef.current);
-        const picked = displayedFiles[selectedIndex] ?? null;
+        const snapshot = navigator.flushSearch(filterInputRef.current);
+        const picked = snapshot.selectedFile;
         const effectiveCommit = commit && picked !== null;
         restoreFilterOnSidebarFocusRef.current = false;
         filterOpenRef.current = false;
@@ -8893,10 +9258,9 @@ var Browser = ({
       }
       if (key.ctrl && key.name === "\\") {
         filterInputRef.current = "";
-        filterAppliedRef.current = "";
         setFilterInput("");
-        setFilterApplied("");
-        setSelectedIndex(() => 0);
+        navigator.flushSearch("");
+        navigator.selectFirst();
         return;
       }
       if (key.name === "backspace" || key.name === "delete") {
@@ -8906,15 +9270,15 @@ var Browser = ({
         }
         filterInputRef.current = filterInputRef.current.slice(0, -1);
         setFilterInput(filterInputRef.current);
-        setSelectedIndex(() => 0);
+        navigator.selectIndex(0);
         return;
       }
       if (key.name === "up") {
-        setSelectedIndex((i) => Math.max(0, i - 1));
+        navigator.moveBy(-1);
         return;
       }
       if (key.name === "down") {
-        setSelectedIndex((i) => Math.min(Math.max(0, displayedFiles.length - 1), i + 1));
+        navigator.moveBy(1);
         return;
       }
       if (key.ctrl || key.meta)
@@ -8928,7 +9292,7 @@ var Browser = ({
       if (char !== null) {
         filterInputRef.current = filterInputRef.current + char;
         setFilterInput(filterInputRef.current);
-        setSelectedIndex(() => 0);
+        navigator.selectIndex(0);
       }
       return;
     }
@@ -8948,7 +9312,7 @@ var Browser = ({
   const parsedContent = useMemo2(() => parseFrontmatter(content), [content]);
   const readerEmptyStateTitle = filterHasNoMatches ? `No files match: ${filterInput}` : `${BRAND} ${BRAND_NAME}`;
   const readerEmptyStateVisible = error == null && renderedPath == null;
-  useEffect2(() => {
+  useEffect4(() => {
     if (disableReaderEmptyStateRotation)
       return;
     if (readerEmptyStateVisible) {
@@ -8961,25 +9325,6 @@ var Browser = ({
     readerEmptyStateVisibleRef.current = false;
   }, [disableReaderEmptyStateRotation, readerEmptyStateVisible]);
   const discoveryActive = discoveryStatus !== null && discoveryStatus.length > 0;
-  const filterRowVisible = files.length > 0 || discoveryActive;
-  const sidebarBodyHeight = Math.max(1, height - FOOTER_HEIGHT - HEADER_HEIGHT - 2 - (filterRowVisible ? 1 : 0));
-  const maxScroll = Math.max(0, displayedFiles.length - sidebarBodyHeight);
-  const desiredScroll = (() => {
-    let s = sidebarScroll;
-    if (selectedIndex < s)
-      s = selectedIndex;
-    else if (selectedIndex >= s + sidebarBodyHeight)
-      s = selectedIndex - sidebarBodyHeight + 1;
-    return clamp3(s, 0, maxScroll);
-  })();
-  useEffect2(() => {
-    if (desiredScroll !== sidebarScroll)
-      setSidebarScroll(desiredScroll);
-  }, [desiredScroll, sidebarScroll]);
-  const visibleFiles = displayedFiles.slice(desiredScroll, desiredScroll + sidebarBodyHeight);
-  const sidebarPaneWidth = isNarrow ? width : sidebarWidth;
-  const sidebarTextWidth = Math.max(4, sidebarPaneWidth - (isNarrow ? 1 : 2));
-  const layoutSidebarRow = useCallback((relativePath) => formatSidebarRow(relativePath, sidebarTextWidth), [sidebarTextWidth]);
   const footerProps = {
     bindings: browserBindings,
     ctx,
@@ -9007,74 +9352,17 @@ var Browser = ({
   };
   const readerEmptyStateTips = useMemo2(() => buildReaderEmptyStateTips(browserBindings, ctx), [ctx]);
   const readerEmptyStateTip = useMemo2(() => pickTipByRotation(readerEmptyStateTips, readerEmptyStateTipRotation), [readerEmptyStateTipRotation, readerEmptyStateTips]);
-  const sidebarBody = /* @__PURE__ */ jsxDEV8(Fragment2, {
-    children: [
-      filterRowVisible && /* @__PURE__ */ jsxDEV8(PromptRow, {
-        query: filterInput,
-        editing: filterOpen,
-        placeholder: "type / to filter",
-        width: sidebarTextWidth
-      }, undefined, false, undefined, this),
-      displayedFiles.length === 0 ? /* @__PURE__ */ jsxDEV8(SidebarEmptyMessage, {
-        withTopSpacer: filterRowVisible,
-        width: sidebarTextWidth,
-        label: files.length === 0 ? discoveryActive ? "Scanning" : "No markdown files in" : "No files match",
-        value: files.length === 0 ? discoveryActive ? "\u2026" : rootLabel : filterApplied
-      }, undefined, false, undefined, this) : visibleFiles.map((file, idx) => {
-        const realIdx = desiredScroll + idx;
-        const isSelected = realIdx === selectedIndex;
-        const { basename: basename2, separator, parent } = layoutSidebarRow(file.relativePath);
-        const basenameFg = isSelected ? colors.selectedListItemText : colors.text;
-        const rowStyle = {
-          width: sidebarTextWidth,
-          height: 1,
-          flexDirection: "row",
-          ...isSelected ? { backgroundColor: colors.backgroundElement } : {}
-        };
-        return /* @__PURE__ */ jsxDEV8("box", {
-          style: rowStyle,
-          children: /* @__PURE__ */ jsxDEV8("text", {
-            wrapMode: "none",
-            children: [
-              /* @__PURE__ */ jsxDEV8("span", {
-                style: { fg: basenameFg },
-                children: basename2
-              }, undefined, false, undefined, this),
-              parent !== "" && /* @__PURE__ */ jsxDEV8("span", {
-                style: { fg: colors.textMuted },
-                children: middleTruncate(`${separator}${parent}`, Math.max(0, sidebarTextWidth - basename2.length))
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, file.path, false, undefined, this);
-      })
-    ]
-  }, undefined, true, undefined, this);
-  const sidebarBorderSides = ["top", "bottom", "right"];
   const readerBorderSides = ["top", "bottom"];
-  const SIDEBAR_BORDER_CHARS = {
-    topLeft: "\u250C",
-    topRight: "\u252C",
-    bottomLeft: "\u2514",
-    bottomRight: "\u2534",
-    horizontal: "\u2500",
-    vertical: "\u2502",
-    topT: "\u252C",
-    bottomT: "\u2534",
-    leftT: "\u251C",
-    rightT: "\u2524",
-    cross: "\u253C"
-  };
-  const INACTIVE_PANE_OPACITY = 0.62;
-  return /* @__PURE__ */ jsxDEV8("box", {
+  const INACTIVE_PANE_OPACITY2 = 0.62;
+  return /* @__PURE__ */ jsxDEV12("box", {
     style: { width, height, flexDirection: "column", backgroundColor: colors.backgroundPanel },
     children: [
-      /* @__PURE__ */ jsxDEV8(Header, {
+      /* @__PURE__ */ jsxDEV12(Header, {
         width,
         currentFile,
         rootLabel
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV8("box", {
+      /* @__PURE__ */ jsxDEV12("box", {
         style: {
           flexDirection: "row",
           flexGrow: 1,
@@ -9082,28 +9370,20 @@ var Browser = ({
           backgroundColor: colors.backgroundPanel
         },
         children: [
-          sidebarInline && /* @__PURE__ */ jsxDEV8("box", {
-            style: {
-              border: isNarrow ? readerBorderSides : sidebarBorderSides,
-              borderColor: colors.border,
-              ...isNarrow ? { flexGrow: 1, flexShrink: 1 } : { width: sidebarWidth, flexShrink: 0 },
-              flexDirection: "column",
-              backgroundColor: colors.backgroundPanel
-            },
-            ...isNarrow ? {} : { customBorderChars: SIDEBAR_BORDER_CHARS },
-            children: /* @__PURE__ */ jsxDEV8("box", {
-              style: {
-                flexGrow: 1,
-                flexShrink: 1,
-                flexDirection: "column",
-                paddingLeft: 1,
-                backgroundColor: sidebarActive ? colors.background : colors.backgroundPanel,
-                opacity: sidebarActive ? 1 : INACTIVE_PANE_OPACITY
-              },
-              children: sidebarBody
-            }, undefined, false, undefined, this)
+          /* @__PURE__ */ jsxDEV12(Sidebar, {
+            files,
+            controller: navigator,
+            filterInput,
+            filterOpen,
+            discoveryActive,
+            rootLabel,
+            viewportHeight: height,
+            paneWidth: isNarrow ? width : sidebarWidth,
+            narrow: isNarrow,
+            active: sidebarActive,
+            visible: sidebarInline
           }, undefined, false, undefined, this),
-          readerVisible && /* @__PURE__ */ jsxDEV8("box", {
+          readerVisible && /* @__PURE__ */ jsxDEV12("box", {
             style: {
               border: readerBorderSides,
               borderColor: colors.border,
@@ -9112,19 +9392,19 @@ var Browser = ({
               flexDirection: "column",
               backgroundColor: colors.backgroundPanel
             },
-            children: /* @__PURE__ */ jsxDEV8("box", {
+            children: /* @__PURE__ */ jsxDEV12("box", {
               style: {
                 flexGrow: 1,
                 flexShrink: 1,
                 flexDirection: "column",
                 padding: 1,
                 backgroundColor: readerActive ? colors.background : colors.backgroundPanel,
-                opacity: readerActive ? 1 : INACTIVE_PANE_OPACITY
+                opacity: readerActive ? 1 : INACTIVE_PANE_OPACITY2
               },
-              children: error ? /* @__PURE__ */ jsxDEV8("text", {
+              children: error ? /* @__PURE__ */ jsxDEV12("text", {
                 content: error,
                 style: { fg: colors.error }
-              }, undefined, false, undefined, this) : !renderedPath ? /* @__PURE__ */ jsxDEV8("box", {
+              }, undefined, false, undefined, this) : !renderedPath ? /* @__PURE__ */ jsxDEV12("box", {
                 style: {
                   flexGrow: 1,
                   flexShrink: 1,
@@ -9132,22 +9412,22 @@ var Browser = ({
                   justifyContent: "center",
                   backgroundColor: readerActive ? colors.background : colors.backgroundPanel
                 },
-                children: /* @__PURE__ */ jsxDEV8("box", {
+                children: /* @__PURE__ */ jsxDEV12("box", {
                   style: { flexDirection: "column", gap: 1, alignItems: "center" },
                   children: [
-                    /* @__PURE__ */ jsxDEV8("text", {
+                    /* @__PURE__ */ jsxDEV12("text", {
                       content: readerEmptyStateTitle,
                       wrapMode: "none",
                       style: { fg: colors.textMuted }
                     }, undefined, false, undefined, this),
-                    readerEmptyStateTip && /* @__PURE__ */ jsxDEV8("text", {
+                    readerEmptyStateTip && /* @__PURE__ */ jsxDEV12("text", {
                       content: readerEmptyStateTip.text,
                       wrapMode: "none",
                       style: { fg: colors.textMuted }
                     }, readerEmptyStateTip.id, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV8("scrollbox", {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV12("scrollbox", {
                 style: {
                   scrollY: true,
                   scrollX: false,
@@ -9157,17 +9437,17 @@ var Browser = ({
                 },
                 focused: readerActive && !paletteOpen,
                 children: [
-                  parsedContent.fields.length > 0 && /* @__PURE__ */ jsxDEV8("box", {
+                  parsedContent.fields.length > 0 && /* @__PURE__ */ jsxDEV12("box", {
                     style: { flexDirection: "column", marginBottom: 1 },
-                    children: parsedContent.fields.map((field) => /* @__PURE__ */ jsxDEV8("box", {
+                    children: parsedContent.fields.map((field) => /* @__PURE__ */ jsxDEV12("box", {
                       style: { flexDirection: "row", gap: 1, flexWrap: "wrap" },
                       children: [
-                        /* @__PURE__ */ jsxDEV8("text", {
+                        /* @__PURE__ */ jsxDEV12("text", {
                           content: `${field.key}:`,
                           wrapMode: "word",
                           style: { fg: colors.secondary }
                         }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV8("text", {
+                        /* @__PURE__ */ jsxDEV12("text", {
                           content: field.value,
                           wrapMode: "word",
                           style: { fg: colors.textMuted }
@@ -9175,7 +9455,7 @@ var Browser = ({
                       ]
                     }, field.key, true, undefined, this))
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV8("markdown", {
+                  /* @__PURE__ */ jsxDEV12("markdown", {
                     content: parsedContent.body,
                     syntaxStyle,
                     fg: colors.text,
@@ -9189,17 +9469,17 @@ var Browser = ({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV8(Footer, {
+      /* @__PURE__ */ jsxDEV12(Footer, {
         ...footerProps
       }, undefined, false, undefined, this),
-      paletteOpen && /* @__PURE__ */ jsxDEV8(CommandPalette, {
+      paletteOpen && /* @__PURE__ */ jsxDEV12(CommandPalette, {
         commands: orderCommandsForPalette(filterCommands(buildCommands(ctx), paletteQuery)),
         query: paletteQuery,
         selectedIndex: paletteIndex,
         viewportWidth: width,
         viewportHeight: height
       }, undefined, false, undefined, this),
-      activeStatusPopover && /* @__PURE__ */ jsxDEV8(StatusPopoverPanel, {
+      activeStatusPopover && /* @__PURE__ */ jsxDEV12(StatusPopoverPanel, {
         content: activeStatusPopover.content,
         variant: "warning"
       }, undefined, false, undefined, this)
@@ -9676,13 +9956,13 @@ var subscribeUpdateInfo = (cb) => {
 };
 
 // src/update/useUpdateNotice.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 var useUpdateNotice = () => {
-  const [text, setText] = useState4(() => {
+  const [text, setText] = useState5(() => {
     const cur = currentUpdateInfo();
     return cur ? formatFooterNotice(cur) : null;
   });
-  useEffect3(() => {
+  useEffect5(() => {
     const unsub = subscribeUpdateInfo((info) => setText(formatFooterNotice(info)));
     return unsub;
   }, []);
@@ -9690,7 +9970,7 @@ var useUpdateNotice = () => {
 };
 
 // src/index.tsx
-import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
 var pathIsDirectory = async (path) => {
   try {
     return (await stat(path)).isDirectory();
@@ -9754,14 +10034,14 @@ var DiscoverShell = ({
   startupFocus
 }) => {
   const updateNotice = useUpdateNotice();
-  const [show, setShow] = useState5(initialShow);
-  const [files, setFiles] = useState5([]);
-  const [scanning, setScanning] = useState5(true);
-  const [scanError, setScanError] = useState5(null);
-  const [skippedDirCount, setSkippedDirCount] = useState5(0);
-  const [lastSkippedDir, setLastSkippedDir] = useState5(null);
-  const countRef = useRef3(0);
-  useEffect4(() => {
+  const [show, setShow] = useState6(initialShow);
+  const [files, setFiles] = useState6([]);
+  const [scanning, setScanning] = useState6(true);
+  const [scanError, setScanError] = useState6(null);
+  const [skippedDirCount, setSkippedDirCount] = useState6(0);
+  const [lastSkippedDir, setLastSkippedDir] = useState6(null);
+  const countRef = useRef4(0);
+  useEffect6(() => {
     setFiles([]);
     setScanning(true);
     setScanError(null);
@@ -9800,7 +10080,7 @@ var DiscoverShell = ({
     skippedCount: skippedDirCount,
     lastSkippedPath: lastSkippedDir
   }));
-  return /* @__PURE__ */ jsxDEV9(Browser, {
+  return /* @__PURE__ */ jsxDEV13(Browser, {
     files,
     initialQuery,
     wrapWidth,
@@ -9980,9 +10260,9 @@ async function runTui({
     console.error(`house: ${err instanceof Error ? err.message : String(err)}`);
     process.exit(1);
   }
-  createRoot(renderer).render(/* @__PURE__ */ jsxDEV9(RegistryProvider, {
+  createRoot(renderer).render(/* @__PURE__ */ jsxDEV13(RegistryProvider, {
     initialValues: [[themeAtom, initialTheme]],
-    children: /* @__PURE__ */ jsxDEV9(DiscoverShell, {
+    children: /* @__PURE__ */ jsxDEV13(DiscoverShell, {
       target: discoveryRoot,
       initialQuery,
       initialShow: show,