@tooee/themes 0.2.3 → 0.3.0

package/src/theme-picker.tsx

@@ -0,0 +1,189 @@
+import { useState, useMemo, useCallback } from "react";
+import { useCommand } from "@tooee/commands";
+import { fuzzyMatch } from "@tooee/fuzzy";
+import { useTheme } from "./context.js";
+import { CloseButton } from "./close-button.js";
+
+export interface ThemePickerEntry {
+  id: string;
+  title: string;
+}
+
+interface ThemePickerProps {
+  entries: ThemePickerEntry[];
+  currentTheme: string;
+  onSelect: (name: string) => void;
+  onClose: () => void;
+  onNavigate: (name: string) => void;
+}
+
+export const ThemePicker = function ThemePicker({
+  entries,
+  currentTheme,
+  onSelect,
+  onClose,
+  onNavigate,
+}: ThemePickerProps): React.ReactNode {
+  const { theme } = useTheme();
+  const [filter, setFilter] = useState("");
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const idx = entries.findIndex((e) => e.id === currentTheme);
+    return Math.max(idx, 0);
+  });
+
+  const filtered = useMemo(() => {
+    if (!filter) {
+      return entries;
+    }
+    const results: { entry: ThemePickerEntry; score: number }[] = [];
+    for (const entry of entries) {
+      const score = fuzzyMatch(filter, entry.title);
+      if (score !== null) {
+        results.push({ entry, score });
+      }
+    }
+    results.sort((a, b) => b.score - a.score);
+    return results.map((r) => r.entry);
+  }, [entries, filter]);
+
+  const handleSelect = useCallback(() => {
+    const item = filtered[activeIndex];
+    if (item !== undefined) {
+      onSelect(item.id);
+    }
+  }, [filtered, activeIndex, onSelect]);
+
+  const navigateTo = useCallback(
+    (index: number) => {
+      setActiveIndex(index);
+      const item = filtered[index];
+      if (item !== undefined) {
+        onNavigate(item.id);
+      }
+    },
+    [filtered, onNavigate],
+  );
+
+  const moveUp = useCallback(() => {
+    navigateTo(Math.max(0, activeIndex - 1));
+  }, [activeIndex, navigateTo]);
+
+  const moveDown = useCallback(() => {
+    navigateTo(Math.min(filtered.length - 1, activeIndex + 1));
+  }, [activeIndex, filtered.length, navigateTo]);
+
+  useCommand({
+    handler: onClose,
+    hidden: true,
+    hotkey: "Escape",
+    id: "theme-picker:close",
+    modes: ["insert", "cursor"],
+    title: "Close theme picker",
+  });
+  useCommand({
+    handler: handleSelect,
+    hidden: true,
+    hotkey: "Enter",
+    id: "theme-picker:select",
+    modes: ["insert", "cursor"],
+    title: "Select theme",
+  });
+  useCommand({
+    handler: moveUp,
+    hidden: true,
+    hotkey: "up",
+    id: "theme-picker:move-up",
+    modes: ["insert", "cursor"],
+    title: "Move up",
+  });
+  useCommand({
+    handler: moveDown,
+    hidden: true,
+    hotkey: "down",
+    id: "theme-picker:move-down",
+    modes: ["insert", "cursor"],
+    title: "Move down",
+  });
+
+  return (
+    <box
+      position="absolute"
+      left="20%"
+      right="20%"
+      top={2}
+      maxHeight="60%"
+      flexDirection="column"
+      backgroundColor={theme.backgroundPanel}
+      border
+      borderColor={theme.border}
+    >
+      {/* Filter row */}
+      <box flexDirection="row" paddingLeft={1} paddingRight={1} height={1}>
+        <text content="🎨 " fg={theme.accent} />
+        <input
+          focused
+          placeholder="Filter themes..."
+          onSubmit={handleSelect}
+          onInput={(value: string) => {
+            setFilter(value);
+            setActiveIndex(0);
+            // Preview first match
+            if (value) {
+              const results: { entry: ThemePickerEntry; score: number }[] = [];
+              for (const entry of entries) {
+                const score = fuzzyMatch(value, entry.title);
+                if (score !== null) {
+                  results.push({ entry, score });
+                }
+              }
+              results.sort((a, b) => b.score - a.score);
+              if (results.length > 0) {
+                onNavigate(results[0].entry.id);
+              }
+            } else if (entries.length > 0) {
+              onNavigate(entries[0].id);
+            }
+          }}
+          backgroundColor="transparent"
+          focusedBackgroundColor="transparent"
+          textColor={theme.text}
+          placeholderColor={theme.textMuted}
+          cursorColor={theme.accent}
+          style={{ flexGrow: 1 }}
+        />
+        <text content={` ${filtered.length}`} fg={theme.textMuted} />
+        <CloseButton onClose={onClose} />
+      </box>
+
+      {/* Separator */}
+      <box height={1} width="100%" backgroundColor={theme.border} />
+
+      {/* Theme list */}
+      <scrollbox focused={false} style={{ flexGrow: 1 }}>
+        {filtered.map(
+          (entry, i): React.ReactNode => (
+            <box
+              key={entry.id}
+              flexDirection="row"
+              paddingLeft={1}
+              paddingRight={1}
+              height={1}
+              backgroundColor={i === activeIndex ? theme.backgroundElement : undefined}
+              onMouseDown={(event) => {
+                // Left-click applies the theme — same code path as Enter.
+                if (event.button !== 0) {
+                  return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onSelect(entry.id);
+              }}
+            >
+              <text content={entry.title} fg={theme.text} style={{ flexGrow: 1 }} />
+            </box>
+          ),
+        )}
+      </scrollbox>
+    </box>
+  );
+};

package/src/types.ts

@@ -2,15 +2,16 @@
 // Theme JSON format (OpenCode-compatible)
 // ---------------------------------------------------------------------------
 
-type HexColor = `#${string}`
-type RefName = string
-type Variant = { dark: HexColor | RefName; light: HexColor | RefName }
-type ColorValue = HexColor | RefName | Variant
+interface Variant {
+  dark: string;
+  light: string;
+}
+type ColorValue = string | Variant;
 
 export interface ThemeJSON {
-  $schema?: string
-  defs?: Record<string, HexColor | RefName>
-  theme: Record<string, ColorValue>
+  $schema?: string;
+  defs?: Record<string, string>;
+  theme: Record<string, ColorValue>;
 }
 
 // ---------------------------------------------------------------------------
@@ -19,62 +20,62 @@ export interface ThemeJSON {
 
 export interface ResolvedTheme {
   // UI
-  primary: string
-  secondary: string
-  accent: string
-  error: string
-  warning: string
-  success: string
-  info: string
-  text: string
-  textMuted: string
-  background: string
-  backgroundPanel: string
-  backgroundElement: string
-  border: string
-  borderActive: string
-  borderSubtle: string
+  primary: string;
+  secondary: string;
+  accent: string;
+  error: string;
+  warning: string;
+  success: string;
+  info: string;
+  text: string;
+  textMuted: string;
+  background: string;
+  backgroundPanel: string;
+  backgroundElement: string;
+  border: string;
+  borderActive: string;
+  borderSubtle: string;
   // Diff
-  diffAdded: string
-  diffRemoved: string
-  diffContext: string
-  diffHunkHeader: string
-  diffHighlightAdded: string
-  diffHighlightRemoved: string
-  diffAddedBg: string
-  diffRemovedBg: string
-  diffContextBg: string
-  diffLineNumber: string
-  diffAddedLineNumberBg: string
-  diffRemovedLineNumberBg: string
+  diffAdded: string;
+  diffRemoved: string;
+  diffContext: string;
+  diffHunkHeader: string;
+  diffHighlightAdded: string;
+  diffHighlightRemoved: string;
+  diffAddedBg: string;
+  diffRemovedBg: string;
+  diffContextBg: string;
+  diffLineNumber: string;
+  diffAddedLineNumberBg: string;
+  diffRemovedLineNumberBg: string;
   // Markdown
-  markdownText: string
-  markdownHeading: string
-  markdownLink: string
-  markdownLinkText: string
-  markdownCode: string
-  markdownBlockQuote: string
-  markdownEmph: string
-  markdownStrong: string
-  markdownHorizontalRule: string
-  markdownListItem: string
-  markdownListEnumeration: string
-  markdownImage: string
-  markdownImageText: string
-  markdownCodeBlock: string
+  markdownText: string;
+  markdownHeading: string;
+  markdownLink: string;
+  markdownLinkText: string;
+  markdownCode: string;
+  markdownBlockQuote: string;
+  markdownEmph: string;
+  markdownStrong: string;
+  markdownHorizontalRule: string;
+  markdownListItem: string;
+  markdownListEnumeration: string;
+  markdownImage: string;
+  markdownImageText: string;
+  markdownCodeBlock: string;
   // Cursor/Selection
-  cursorLine: string
-  selection: string
+  cursorLine: string;
+  selection: string;
   // Syntax
-  syntaxComment: string
-  syntaxKeyword: string
-  syntaxFunction: string
-  syntaxVariable: string
-  syntaxString: string
-  syntaxNumber: string
-  syntaxType: string
-  syntaxOperator: string
-  syntaxPunctuation: string
+  syntaxComment: string;
+  syntaxKeyword: string;
+  syntaxFunction: string;
+  syntaxVariable: string;
+  syntaxString: string;
+  syntaxNumber: string;
+  syntaxType: string;
+  syntaxOperator: string;
+  syntaxPunctuation: string;
 }
 
 // All keys of ResolvedTheme for iteration
@@ -131,91 +132,109 @@ export const RESOLVED_KEYS: (keyof ResolvedTheme)[] = [
   "syntaxType",
   "syntaxOperator",
   "syntaxPunctuation",
-]
+];
 
 // Fallbacks used when a theme key is missing
 export const FALLBACKS: Record<string, string> = {
-  primary: "#808080",
-  secondary: "#808080",
   accent: "#808080",
-  error: "#808080",
-  warning: "#808080",
-  success: "#808080",
-  info: "#808080",
-  text: "#d4d4d4",
-  textMuted: "#808080",
   background: "#1e1e1e",
-  backgroundPanel: "#1e1e1e",
   backgroundElement: "#1e1e1e",
-  cursorLine: "#1e1e1e",
-  selection: "#1e1e1e",
+  backgroundPanel: "#1e1e1e",
   border: "#808080",
   borderActive: "#808080",
   borderSubtle: "#808080",
+  cursorLine: "#1e1e1e",
   diffAdded: "#4fd6be",
-  diffRemoved: "#c53b53",
+  diffAddedBg: "#1e3a1e",
+  diffAddedLineNumberBg: "#1e3a1e",
   diffContext: "#808080",
-  diffHunkHeader: "#808080",
+  diffContextBg: "#1e1e1e",
   diffHighlightAdded: "#4fd6be",
   diffHighlightRemoved: "#c53b53",
-  diffAddedBg: "#1e3a1e",
-  diffRemovedBg: "#3a1e1e",
-  diffContextBg: "#1e1e1e",
+  diffHunkHeader: "#808080",
   diffLineNumber: "#808080",
-  diffAddedLineNumberBg: "#1e3a1e",
+  diffRemoved: "#c53b53",
+  diffRemovedBg: "#3a1e1e",
   diffRemovedLineNumberBg: "#3a1e1e",
-  markdownText: "#d4d4d4",
-  markdownHeading: "#808080",
-  markdownLink: "#808080",
-  markdownLinkText: "#808080",
-  markdownCode: "#808080",
+  error: "#808080",
+  info: "#808080",
   markdownBlockQuote: "#808080",
+  markdownCode: "#808080",
+  markdownCodeBlock: "#d4d4d4",
   markdownEmph: "#808080",
-  markdownStrong: "#808080",
+  markdownHeading: "#808080",
   markdownHorizontalRule: "#808080",
-  markdownListItem: "#808080",
-  markdownListEnumeration: "#808080",
   markdownImage: "#808080",
   markdownImageText: "#808080",
-  markdownCodeBlock: "#d4d4d4",
+  markdownLink: "#808080",
+  markdownLinkText: "#808080",
+  markdownListEnumeration: "#808080",
+  markdownListItem: "#808080",
+  markdownStrong: "#808080",
+  markdownText: "#d4d4d4",
+  primary: "#808080",
+  secondary: "#808080",
+  selection: "#1e1e1e",
+  success: "#808080",
   syntaxComment: "#808080",
-  syntaxKeyword: "#808080",
   syntaxFunction: "#808080",
-  syntaxVariable: "#808080",
-  syntaxString: "#808080",
+  syntaxKeyword: "#808080",
   syntaxNumber: "#808080",
-  syntaxType: "#808080",
   syntaxOperator: "#808080",
   syntaxPunctuation: "#808080",
-}
+  syntaxString: "#808080",
+  syntaxType: "#808080",
+  syntaxVariable: "#808080",
+  text: "#d4d4d4",
+  textMuted: "#808080",
+  warning: "#808080",
+};
 
 // ---------------------------------------------------------------------------
 // Resolution
 // ---------------------------------------------------------------------------
 
-export function resolveTheme(json: ThemeJSON, mode: "dark" | "light"): ResolvedTheme {
-  const defs = json.defs ?? {}
+export const resolveTheme = function resolveTheme(
+  json: ThemeJSON,
+  mode: "dark" | "light",
+): ResolvedTheme {
+  const defs = json.defs ?? {};
 
-  function resolveColor(c: ColorValue, seen: Set<string> = new Set()): string {
+  const resolveColor = function resolveColor(c: ColorValue, seen = new Set<string>()): string {
     if (typeof c === "string") {
-      if (c === "transparent" || c === "none") return "#00000000"
-      if (c.startsWith("#")) return c
-      if (seen.has(c)) return "#808080" // reference cycle — fall back like an unknown ref
-      if (defs[c] != null) return resolveColor(defs[c] as ColorValue, new Set(seen).add(c))
-      if (json.theme[c] !== undefined)
-        return resolveColor(json.theme[c] as ColorValue, new Set(seen).add(c))
-      return "#808080"
+      if (c === "transparent" || c === "none") {
+        return "#00000000";
+      }
+      if (c.startsWith("#")) {
+        return c;
+      }
+      if (seen.has(c)) {
+        return "#808080";
+      }
+      if (defs[c] !== undefined && defs[c] !== null) {
+        return resolveColor(defs[c], new Set(seen).add(c));
+      }
+      if (json.theme[c] !== undefined) {
+        return resolveColor(json.theme[c], new Set(seen).add(c));
+      }
+      return "#808080";
     }
-    return resolveColor(c[mode], seen)
-  }
+    return resolveColor(c[mode], seen);
+  };
 
-  const result = {} as Record<string, string>
+  const result = {} as Record<string, string>;
   for (const key of RESOLVED_KEYS) {
-    const val = json.theme[key]
-    result[key] = val !== undefined ? resolveColor(val) : (FALLBACKS[key] ?? "#808080")
+    const val = json.theme[key];
+    result[key] = val === undefined ? (FALLBACKS[key] ?? "#808080") : resolveColor(val);
   }
   // Dynamic fallbacks that reference other resolved keys
-  if (json.theme["cursorLine"] === undefined) result.cursorLine = result.backgroundElement
-  if (json.theme["selection"] === undefined) result.selection = result.backgroundPanel
-  return result as unknown as ResolvedTheme
-}
+  if (json.theme.cursorLine === undefined) {
+    result.cursorLine = result.backgroundElement;
+  }
+  if (json.theme.selection === undefined) {
+    result.selection = result.backgroundPanel;
+  }
+  // Deferred(lint-sweep): replace with a typed exhaustive key map for compile-time completeness
+  // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- RESOLVED_KEYS drives every required key and defaults missing values
+  return result as unknown as ResolvedTheme;
+};

package/dist/CloseButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../src/CloseButton.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAW,EAAE,KAAK,EAAE,EAAE,gBAAgB,6BAmB5E"}

package/dist/CloseButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CloseButton.js","sourceRoot":"","sources":["../src/CloseButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAWvC;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,GAAG,EAAE,KAAK,EAAoB;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE5B,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAiB,EAAE,EAAE;QACpB,8CAA8C;QAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,OAAO,EAAE,CAAA;IACX,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,cAAK,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,eAAe,YAC9D,eAAM,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,IAAI,KAAK,CAAC,SAAS,GAAI,GAClD,CACP,CAAA;AACH,CAAC"}

package/dist/ThemePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../src/ThemePicker.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,6BAuJlB"}

package/dist/ThemePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemePicker.js","sourceRoot":"","sources":["../src/ThemePicker.tsx"],"names":[],"mappings":"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"}

package/src/ThemePicker.tsx

@@ -1,177 +0,0 @@
-import { useState, useMemo, useCallback } from "react"
-import { useCommand } from "@tooee/commands"
-import { fuzzyMatch } from "@tooee/fuzzy"
-import { useTheme } from "./context.js"
-import { CloseButton } from "./CloseButton.js"
-
-export interface ThemePickerEntry {
-  id: string
-  title: string
-}
-
-interface ThemePickerProps {
-  entries: ThemePickerEntry[]
-  currentTheme: string
-  onSelect: (name: string) => void
-  onClose: () => void
-  onNavigate: (name: string) => void
-}
-
-export function ThemePicker({
-  entries,
-  currentTheme,
-  onSelect,
-  onClose,
-  onNavigate,
-}: ThemePickerProps) {
-  const { theme } = useTheme()
-  const [filter, setFilter] = useState("")
-  const [activeIndex, setActiveIndex] = useState(() => {
-    const idx = entries.findIndex((e) => e.id === currentTheme)
-    return idx >= 0 ? idx : 0
-  })
-
-  const filtered = useMemo(() => {
-    if (!filter) return entries
-    const results: { entry: ThemePickerEntry; score: number }[] = []
-    for (const entry of entries) {
-      const score = fuzzyMatch(filter, entry.title)
-      if (score !== null) results.push({ entry, score })
-    }
-    results.sort((a, b) => b.score - a.score)
-    return results.map((r) => r.entry)
-  }, [entries, filter])
-
-  const handleSelect = useCallback(() => {
-    const item = filtered[activeIndex]
-    if (item) {
-      onSelect(item.id)
-    }
-  }, [filtered, activeIndex, onSelect])
-
-  const navigateTo = useCallback(
-    (index: number) => {
-      setActiveIndex(index)
-      const item = filtered[index]
-      if (item) {
-        onNavigate(item.id)
-      }
-    },
-    [filtered, onNavigate],
-  )
-
-  const moveUp = useCallback(() => {
-    navigateTo(Math.max(0, activeIndex - 1))
-  }, [activeIndex, navigateTo])
-
-  const moveDown = useCallback(() => {
-    navigateTo(Math.min(filtered.length - 1, activeIndex + 1))
-  }, [activeIndex, filtered.length, navigateTo])
-
-  useCommand({
-    id: "theme-picker:close",
-    title: "Close theme picker",
-    hotkey: "Escape",
-    modes: ["insert", "cursor"],
-    hidden: true,
-    handler: onClose,
-  })
-  useCommand({
-    id: "theme-picker:select",
-    title: "Select theme",
-    hotkey: "Enter",
-    modes: ["insert", "cursor"],
-    hidden: true,
-    handler: handleSelect,
-  })
-  useCommand({
-    id: "theme-picker:move-up",
-    title: "Move up",
-    hotkey: "up",
-    modes: ["insert", "cursor"],
-    hidden: true,
-    handler: moveUp,
-  })
-  useCommand({
-    id: "theme-picker:move-down",
-    title: "Move down",
-    hotkey: "down",
-    modes: ["insert", "cursor"],
-    hidden: true,
-    handler: moveDown,
-  })
-
-  return (
-    <box
-      position="absolute"
-      left="20%"
-      right="20%"
-      top={2}
-      maxHeight="60%"
-      flexDirection="column"
-      backgroundColor={theme.backgroundPanel}
-      border
-      borderColor={theme.border}
-    >
-      {/* Filter row */}
-      <box flexDirection="row" paddingLeft={1} paddingRight={1} height={1}>
-        <text content="🎨 " fg={theme.accent} />
-        <input
-          focused
-          placeholder="Filter themes..."
-          onSubmit={handleSelect}
-          onInput={(value: string) => {
-            setFilter(value)
-            setActiveIndex(0)
-            // Preview first match
-            if (!value) {
-              if (entries.length > 0) onNavigate(entries[0]!.id)
-            } else {
-              const results: { entry: ThemePickerEntry; score: number }[] = []
-              for (const entry of entries) {
-                const score = fuzzyMatch(value, entry.title)
-                if (score !== null) results.push({ entry, score })
-              }
-              results.sort((a, b) => b.score - a.score)
-              if (results.length > 0) onNavigate(results[0]!.entry.id)
-            }
-          }}
-          backgroundColor="transparent"
-          focusedBackgroundColor="transparent"
-          textColor={theme.text}
-          placeholderColor={theme.textMuted}
-          cursorColor={theme.accent}
-          style={{ flexGrow: 1 }}
-        />
-        <text content={` ${filtered.length}`} fg={theme.textMuted} />
-        <CloseButton onClose={onClose} />
-      </box>
-
-      {/* Separator */}
-      <box height={1} width="100%" backgroundColor={theme.border} />
-
-      {/* Theme list */}
-      <scrollbox focused={false} style={{ flexGrow: 1 }}>
-        {filtered.map((entry, i) => (
-          <box
-            key={entry.id}
-            flexDirection="row"
-            paddingLeft={1}
-            paddingRight={1}
-            height={1}
-            backgroundColor={i === activeIndex ? theme.backgroundElement : undefined}
-            onMouseDown={(event) => {
-              // Left-click applies the theme — same code path as Enter.
-              if (event.button !== 0) return
-              event.preventDefault()
-              event.stopPropagation()
-              onSelect(entry.id)
-            }}
-          >
-            <text content={entry.title} fg={theme.text} style={{ flexGrow: 1 }} />
-          </box>
-        ))}
-      </scrollbox>
-    </box>
-  )
-}