critique 0.0.3 → 0.0.5

package/AGENTS.md

@@ -10,6 +10,8 @@ ALWAYS!
 
 NEVER run bun run index.tsx. You cannot directly run the tui app. it will hang. instead ask me to do so.
 
+NEVER use require. just import at the top of the file with esm
+
 use bun add to install packages instead of npm
 
 ## React
@@ -62,3 +64,12 @@ you can read more examples of opentui react code using gitchamber by listing and
 after any meaningful change update CHANGELOG.md with the version number and the list of changes made. in concise bullet points
 
 before updating the changelog bump the package.json version field first. NEVER do major bumps. NEVER publish yourself
+
+NEVER update existing changelog bullet points for previous version unless you added those bullet points yourself recently and the change is of the same version as it is now.
+
+
+## zustand
+
+- minimize number of props. do not use props if you can use zustand state instead. the app has global zustand state that lets you get a piece of state down from the component tree by using something like `useStore(x => x.something)` or `useLoaderData<typeof loader>()` or even useRouteLoaderData if you are deep in the react component tree
+
+- do not consider local state truthful when interacting with server. when interacting with the server with rpc or api calls never use state from the render function as input for the api call. this state can easily become stale or not get updated in the closure context. instead prefer using zustand `useStore.getState().stateValue`. notice that useLoaderData or useParams should be fine in this case.

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# 0.0.5
+
+- Fix patch application to use merge-base for correct ahead-only commits
+- Use `git checkout HEAD` for reliable file restoration on deselect
+- Improve error messages with full stderr output
+- Add `execSyncWithError` wrapper for better error handling
+- Support multi-select with array-based selected values in Dropdown
+
+# 0.0.4
+
+- Add `pick` command to selectively apply files from another branch using interactive UI
+- Use Dropdown component with search and keyboard navigation
+- Apply/restore patches on select/deselect with live preview
+- Support conflict detection and 3-way merge
+- Show error messages in UI
+
 # 0.0.3
 
 - Add `pick` command to selectively apply files from another branch

package/bun.lock

@@ -14,6 +14,7 @@
         "react": "^19.2.0",
         "react-error-boundary": "^6.0.0",
         "shiki": "^3.13.0",
+        "zustand": "^5.0.8",
       },
       "devDependencies": {
         "@types/bun": "1.2.23",
@@ -320,6 +321,8 @@
 
     "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
+    "zustand": ["zustand@5.0.8", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw=="],
+
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "image-q/@types/node": ["@types/node@16.9.1", "", {}, "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g=="],

package/package.json

@@ -2,11 +2,11 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {
-    "cli": "bun --watch src/cli.tsx",
+    "cli": "bun src/cli.tsx",
     "prepublishonly": "tsc",
     "example": "bun --watch src/example.tsx"
   },
@@ -24,6 +24,7 @@
     "diff": "^8.0.2",
     "react": "^19.2.0",
     "react-error-boundary": "^6.0.0",
-    "shiki": "^3.13.0"
+    "shiki": "^3.13.0",
+    "zustand": "^5.0.8"
   }
 }

package/src/cli.tsx

@@ -15,9 +15,24 @@ import fs from "fs";
 import { tmpdir } from "os";
 import { join } from "path";
 import * as p from "@clack/prompts";
+import { create } from "zustand";
+import Dropdown from "./dropdown.tsx";
 
 const execAsync = promisify(exec);
 
+function execSyncWithError(
+  command: string,
+  options?: any,
+): { data?: any; error?: string } {
+  try {
+    const data = execSync(command, options);
+    return { data };
+  } catch (error: any) {
+    const stderr = error.stderr?.toString() || error.message || String(error);
+    return { error: stderr };
+  }
+}
+
 const cli = cac("critique");
 
 class ScrollAcceleration {
@@ -223,10 +238,7 @@ cli
   });
 
 cli
-  .command(
-    "pick <branch>",
-    "Pick files from another branch to apply to HEAD (experimental)",
-  )
+  .command("pick <branch>", "Pick files from another branch to apply to HEAD")
   .action(async (branch: string) => {
     try {
       const { stdout: currentBranch } = await execAsync(
@@ -235,7 +247,7 @@ cli
       const current = currentBranch.trim();
 
       if (current === branch) {
-        p.log.error("Cannot pick from the same branch");
+        console.error("Cannot pick from the same branch");
         process.exit(1);
       }
 
@@ -245,12 +257,12 @@ cli
       ).catch(() => ({ stdout: "" }));
 
       if (!branchExists.trim()) {
-        p.log.error(`Branch "${branch}" does not exist`);
+        console.error(`Branch "${branch}" does not exist`);
         process.exit(1);
       }
 
       const { stdout: diffOutput } = await execAsync(
-        `git diff --name-only HEAD ${branch}`,
+        `git diff --name-only HEAD...${branch}`,
         { encoding: "utf-8" },
       );
 
@@ -260,64 +272,158 @@ cli
         .filter((f) => f);
 
       if (files.length === 0) {
-        p.log.info("No differences found between branches");
-        process.exit(0);
-      }
-
-      const selectedFiles = await p.autocompleteMultiselect({
-        message: `Select files to pick from "${branch}":`,
-        options: files.map((file) => ({
-          value: file,
-          label: file,
-        })),
-        required: false,
-      });
-
-      if (p.isCancel(selectedFiles)) {
-        p.cancel("Operation cancelled.");
+        console.log("No differences found between branches");
         process.exit(0);
       }
 
-      if (!selectedFiles || selectedFiles.length === 0) {
-        p.log.info("No files selected");
-        process.exit(0);
+      interface PickState {
+        selectedFiles: Set<string>;
+        appliedFiles: Map<string, boolean>; // Track which files have patches applied
+        message: string;
+        messageType: "info" | "error" | "success" | "";
       }
 
-      const { stdout: patchData } = await execAsync(
-        `git diff HEAD ${branch} -- ${selectedFiles.join(" ")}`,
-        { encoding: "utf-8" },
-      );
-
-      const patchFile = join(tmpdir(), `critique-pick-${Date.now()}.patch`);
-      fs.writeFileSync(patchFile, patchData);
+      const usePickStore = create<PickState>(() => ({
+        selectedFiles: new Set(),
+        appliedFiles: new Map(),
+        message: "",
+        messageType: "",
+      }));
 
-      try {
-        execSync(`git apply --3way "${patchFile}"`, { stdio: "pipe" });
-      } catch {
-        execSync(`git apply "${patchFile}"`, { stdio: "inherit" });
+      interface PickAppProps {
+        files: string[];
+        branch: string;
       }
 
-      fs.unlinkSync(patchFile);
-
-      const { stdout: conflictFiles } = await execAsync(
-        "git diff --name-only --diff-filter=U",
-        { encoding: "utf-8" },
-      );
-
-      const conflicts = conflictFiles
-        .trim()
-        .split("\n")
-        .filter((f) => f);
-
-      if (conflicts.length > 0) {
-        p.log.warn(`Applied with conflicts in ${conflicts.length} file(s):`);
-        conflicts.forEach((file) => p.log.message(`  - ${file}`));
-      } else {
-        p.log.success(`Applied changes from ${selectedFiles.length} file(s)`);
+      function PickApp({ files, branch }: PickAppProps) {
+        const selectedFiles = usePickStore((s) => s.selectedFiles);
+        const message = usePickStore((s) => s.message);
+        const messageType = usePickStore((s) => s.messageType);
+
+        const handleChange = async (value: string) => {
+          const isSelected = selectedFiles.has(value);
+
+          if (isSelected) {
+            const { error } = execSyncWithError(
+              `git checkout HEAD -- "${value}"`,
+              { stdio: "pipe" },
+            );
+            if (error) {
+              usePickStore.setState({
+                message: `Failed to restore ${value}: ${error}`,
+                messageType: "error",
+              });
+              return;
+            }
+
+            usePickStore.setState((state) => ({
+              selectedFiles: new Set(
+                Array.from(state.selectedFiles).filter((f) => f !== value),
+              ),
+              appliedFiles: new Map(
+                Array.from(state.appliedFiles).filter(([k]) => k !== value),
+              ),
+            }));
+          } else {
+            const { stdout: mergeBase } = await execAsync(
+              `git merge-base HEAD ${branch}`,
+              { encoding: "utf-8" },
+            );
+            const base = mergeBase.trim();
+
+            const { stdout: patchData } = await execAsync(
+              `git diff ${base} ${branch} -- ${value}`,
+              { encoding: "utf-8" },
+            );
+
+            const patchFile = join(
+              tmpdir(),
+              `critique-pick-${Date.now()}.patch`,
+            );
+            fs.writeFileSync(patchFile, patchData);
+
+            const result1 = execSyncWithError(
+              `git apply --3way "${patchFile}"`,
+              {
+                stdio: "pipe",
+              },
+            );
+
+            if (result1.error) {
+              const result2 = execSyncWithError(`git apply "${patchFile}"`, {
+                stdio: "pipe",
+              });
+
+              if (result2.error) {
+                usePickStore.setState({
+                  message: `Failed to apply ${value}: ${result2.error}`,
+                  messageType: "error",
+                });
+                fs.unlinkSync(patchFile);
+                return;
+              }
+            }
+
+            fs.unlinkSync(patchFile);
+
+            usePickStore.setState((state) => ({
+              selectedFiles: new Set([...state.selectedFiles, value]),
+              appliedFiles: new Map([...state.appliedFiles, [value, true]]),
+              message: "",
+              messageType: "",
+            }));
+          }
+        };
+
+        return (
+          <box style={{ padding: 1, flexDirection: "column" }}>
+            <Dropdown
+              tooltip={`Pick files from "${branch}"`}
+              onChange={handleChange}
+              selectedValues={Array.from(selectedFiles)}
+              placeholder="Search files..."
+            >
+              <Dropdown.Section>
+                {files.map((file) => (
+                  <Dropdown.Item
+                    key={file}
+                    value={file}
+                    title={file}
+                    keywords={file.split("/")}
+                  />
+                ))}
+              </Dropdown.Section>
+            </Dropdown>
+            {message && (
+              <box
+                style={{
+                  paddingLeft: 2,
+                  paddingRight: 2,
+                  paddingTop: 1,
+                  paddingBottom: 1,
+                  marginTop: 1,
+                }}
+              >
+                <text
+                  fg={
+                    messageType === "error"
+                      ? "#ff6b6b"
+                      : messageType === "success"
+                        ? "#51cf66"
+                        : "#ffffff"
+                  }
+                >
+                  {message}
+                </text>
+              </box>
+            )}
+          </box>
+        );
       }
-      process.exit(0);
+
+      await render(<PickApp files={files} branch={branch} />);
     } catch (error) {
-      p.log.error(
+      console.error(
         `Error: ${error instanceof Error ? error.message : String(error)}`,
       );
       process.exit(1);
@@ -326,5 +432,5 @@ cli
 
 cli.help();
 cli.version("1.0.0");
-
+// comment
 cli.parse();

package/src/descendants.tsx

@@ -0,0 +1,134 @@
+// inspired by https://github.com/pacocoursey/use-descendants
+//
+import * as React from "react";
+
+type DescendantMap<T> = { [id: string]: { index: number; props?: T } };
+
+export interface DescendantContextType<T> {
+  getIndexForId: (id: string, props?: T) => number;
+  // IMPORTANT! map is not reactive, it cannot be used in render, only in useEffect or useLayoutEffect or other event handlers like useKeyboard
+  map: React.RefObject<DescendantMap<T>>;
+  reset: () => void;
+}
+
+const randomId = () => Math.random().toString(36).slice(2, 11);
+
+export function createDescendants<T = any>() {
+  const DescendantContext = React.createContext<
+    DescendantContextType<T> | undefined
+  >(undefined);
+
+  function DescendantsProvider(props: {
+    value: DescendantContextType<T>;
+    children: React.ReactNode;
+  }) {
+    // On every re-render of children, reset the count
+    props.value.reset();
+
+    return (
+      <DescendantContext.Provider value={props.value}>
+        {props.children}
+      </DescendantContext.Provider>
+    );
+  }
+
+  const useDescendants = (): DescendantContextType<T> => {
+    const indexCounter = React.useRef<number>(0);
+    const map = React.useRef<DescendantMap<T>>({});
+
+    const reset = () => {
+      indexCounter.current = 0;
+      map.current = {};
+    };
+
+    const getIndexForId = (id: string, props?: T) => {
+      if (!map.current[id])
+        map.current[id] = {
+          index: indexCounter.current++,
+        };
+      map.current[id].props = props;
+      return map.current[id].index;
+    };
+
+    // React.useEffect(() => {
+    //   return () => {
+    //     reset()
+    //   }
+    // }, [])
+
+    // Do NOT memoize context value, so that we bypass React.memo on any children
+    // We NEED them to re-render, in case stable children were re-ordered
+    // (this creates a new object every render, so children reading the context MUST re-render)
+    return { getIndexForId, map, reset };
+  };
+
+  /**
+   * Return index of the current item within its parent's list
+   */
+  function useDescendant(props?: T) {
+    const context = React.useContext(DescendantContext);
+    const [descendantId] = React.useState<string>(() => randomId());
+    const [index, setIndex] = React.useState<number>(-1);
+
+    React.useLayoutEffect(() => {
+      // Do this inside of useLayoutEffect, it's only
+      // called for the "real render" in React strict mode
+      setIndex(context?.getIndexForId(descendantId, props) ?? -1);
+    });
+
+    return { descendantId, index };
+  }
+
+  return { DescendantsProvider, useDescendants, useDescendant };
+}
+
+// EXAMPLE
+const { DescendantsProvider, useDescendants, useDescendant } =
+  createDescendants<{
+    title?: string;
+  }>();
+
+const FilteredIndexesContext = React.createContext<number[]>([]);
+
+const MenuExample = () => {
+  const context = useDescendants();
+  const [search, setSearchRaw] = React.useState("");
+  const [filteredIndexes, setFilteredIndexes] = React.useState<number[]>([]);
+
+  // Filtering logic is now in this wrapper
+  const setSearch = (value: string) => {
+    setSearchRaw(value);
+    const items = Object.entries(context.map.current);
+    const filtered = items
+      .filter(([, item]) =>
+        item.props?.title?.toLowerCase().includes(value.toLowerCase()),
+      )
+      .map(([, item]) => item.index);
+    setFilteredIndexes(filtered);
+  };
+
+  return (
+    <DescendantsProvider value={context}>
+      <FilteredIndexesContext.Provider value={filteredIndexes}>
+        <box>
+          <input value={search} onInput={setSearch} placeholder="Search..." />
+          <Item title="First Item" />
+          <Item title="Second Item" />
+          <Item title="Third Item" />
+        </box>
+      </FilteredIndexesContext.Provider>
+    </DescendantsProvider>
+  );
+};
+
+const Item = ({ title }: { title: string }) => {
+  const { index } = useDescendant({ title });
+  const filteredIndexes = React.useContext(FilteredIndexesContext);
+
+  // If index is not in filteredIndexes, don't render
+  if (!filteredIndexes.includes(index)) {
+    return null;
+  }
+
+  return <text>{title}</text>;
+};

package/src/dropdown.tsx

@@ -0,0 +1,423 @@
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  createContext,
+  useContext,
+  type ReactNode,
+} from "react";
+import { useKeyboard } from "@opentui/react";
+import { TextAttributes } from "@opentui/core";
+import { Theme } from "./theme";
+import { createDescendants } from "./descendants";
+
+const logger = console;
+interface CommonProps {
+  key?: any;
+}
+
+// SearchBarInterface provides the common search bar props
+interface SearchBarInterface {
+  isLoading?: boolean;
+  filtering?: boolean | { keepSectionOrder: boolean };
+  onSearchTextChange?: (text: string) => void;
+  throttle?: boolean;
+}
+
+export interface DropdownProps extends SearchBarInterface, CommonProps {
+  id?: string;
+  tooltip?: string;
+  placeholder?: string;
+  storeValue?: boolean | undefined;
+  selectedValues?: string[];
+  children?: ReactNode;
+  onChange?: (newValue: string) => void;
+}
+
+export interface DropdownItemProps extends CommonProps {
+  title: string;
+  value: string;
+  icon?: ReactNode;
+
+  keywords?: string[];
+  label?: string;
+}
+
+export interface DropdownSectionProps extends CommonProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+// Create descendants for Dropdown items - minimal fields needed
+interface DropdownItemDescendant {
+  value: string;
+  title: string;
+  hidden?: boolean;
+}
+
+const {
+  DescendantsProvider: DropdownDescendantsProvider,
+  useDescendants: useDropdownDescendants,
+  useDescendant: useDropdownItemDescendant,
+} = createDescendants<DropdownItemDescendant>();
+
+// Context for passing data to dropdown items
+interface DropdownContextValue {
+  searchText: string;
+  filtering?: boolean | { keepSectionOrder: boolean };
+  currentSection?: string;
+  selectedIndex: number;
+  setSelectedIndex?: (index: number) => void;
+  selectedValues?: string[];
+  onChange?: (value: string) => void;
+}
+
+const DropdownContext = createContext<DropdownContextValue>({
+  searchText: "",
+  filtering: true,
+  selectedIndex: 0,
+});
+
+interface DropdownType {
+  (props: DropdownProps): any;
+  Item: (props: DropdownItemProps) => any;
+  Section: (props: DropdownSectionProps) => any;
+}
+
+const Dropdown: DropdownType = (props) => {
+  const {
+    tooltip,
+    onChange,
+    selectedValues,
+    children,
+    placeholder = "Search…",
+    storeValue,
+    isLoading,
+    filtering = true,
+    onSearchTextChange,
+    throttle,
+  } = props;
+
+  const [selected, setSelected] = useState(0);
+  const [searchText, setSearchText] = useState("");
+  const inputRef = useRef<any>(null);
+  const lastSearchTextRef = useRef("");
+  const throttleTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const descendantsContext = useDropdownDescendants();
+
+  const inFocus = true;
+
+  // Create context value for children
+  const contextValue = useMemo<DropdownContextValue>(
+    () => ({
+      searchText,
+      filtering,
+      currentSection: undefined,
+      selectedIndex: selected,
+      setSelectedIndex: setSelected,
+      selectedValues,
+      onChange: (value: string) => selectItem(value),
+    }),
+    [searchText, filtering, selected, selectedValues],
+  );
+
+  // Reset selected index when search changes
+  useEffect(() => {
+    setSelected(0);
+  }, [searchText]);
+
+  // Handle search text change with throttling
+  const handleSearchTextChange = (text: string) => {
+    if (!inFocus) return;
+
+    setSearchText(text);
+
+    if (onSearchTextChange) {
+      if (throttle) {
+        if (throttleTimeoutRef.current) {
+          clearTimeout(throttleTimeoutRef.current);
+        }
+        throttleTimeoutRef.current = setTimeout(() => {
+          onSearchTextChange(text);
+        }, 300);
+      } else {
+        onSearchTextChange(text);
+      }
+    }
+  };
+
+  const move = (direction: -1 | 1) => {
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item: any) => item.index !== -1)
+      .sort((a: any, b: any) => a.index - b.index);
+
+    if (items.length === 0) return;
+
+    let next = selected + direction;
+    if (next < 0) next = items.length - 1;
+    if (next >= items.length) next = 0;
+    setSelected(next);
+  };
+
+  const selectItem = (itemValue: string) => {
+    if (onChange) {
+      onChange(itemValue);
+    }
+    if (storeValue) {
+      logger.log("Storing value:", itemValue);
+    }
+  };
+
+  // Handle keyboard navigation
+  useKeyboard((evt) => {
+    if (evt.name === "up") {
+      move(-1);
+    }
+    if (evt.name === "down") {
+      move(1);
+    }
+    if (evt.name === "return") {
+      const items = Object.values(descendantsContext.map.current)
+        .filter((item: any) => item.index !== -1)
+        .sort((a: any, b: any) => a.index - b.index);
+
+      const currentItem = items[selected];
+      if (currentItem?.props) {
+        selectItem((currentItem.props as DropdownItemDescendant).value);
+      }
+    }
+  });
+
+  return (
+    <DropdownDescendantsProvider value={descendantsContext}>
+      <DropdownContext.Provider value={contextValue}>
+        <box>
+          <box style={{ paddingLeft: 2, paddingRight: 2 }}>
+            <box style={{ paddingLeft: 1, paddingRight: 1 }}>
+              <box
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                }}
+              >
+                <text attributes={TextAttributes.BOLD}>{tooltip}</text>
+                <text fg={Theme.textMuted}>esc</text>
+              </box>
+              <box style={{ paddingTop: 1, paddingBottom: 2 }}>
+                <input
+                  ref={inputRef}
+                  onInput={(value) => handleSearchTextChange(value)}
+                  placeholder={placeholder}
+                  focused={inFocus}
+                  value={searchText}
+                  focusedBackgroundColor={Theme.backgroundPanel}
+                  cursorColor={Theme.primary}
+                  focusedTextColor={Theme.textMuted}
+                />
+              </box>
+            </box>
+            <box style={{ paddingBottom: 1 }}>
+              {/* Render children - they will register as descendants and render themselves */}
+              {children}
+            </box>
+          </box>
+          <box
+            border={false}
+            style={{
+              paddingRight: 2,
+              paddingLeft: 3,
+              paddingBottom: 1,
+              paddingTop: 1,
+              flexDirection: "row",
+            }}
+          >
+            <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+              ↵
+            </text>
+            <text fg={Theme.textMuted}> select</text>
+            <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+              {"   "}↑↓
+            </text>
+            <text fg={Theme.textMuted}> navigate</text>
+          </box>
+        </box>
+      </DropdownContext.Provider>
+    </DropdownDescendantsProvider>
+  );
+};
+
+function ItemOption(props: {
+  title: string;
+  icon?: ReactNode;
+  active?: boolean;
+  current?: boolean;
+  label?: string;
+  onMouseDown?: () => void;
+  onMouseMove?: () => void;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        backgroundColor: props.active
+          ? Theme.primary
+          : isHovered
+            ? Theme.backgroundPanel
+            : undefined,
+        paddingLeft: props.active ? 0 : 1,
+        paddingRight: 1,
+        justifyContent: "space-between",
+      }}
+      border={false}
+      onMouseMove={() => {
+        setIsHovered(true);
+        if (props.onMouseMove) props.onMouseMove();
+      }}
+      onMouseOut={() => setIsHovered(false)}
+      onMouseDown={props.onMouseDown}
+    >
+      <box style={{ flexDirection: "row" }}>
+        {props.active && (
+          <text fg={Theme.background} selectable={false}>
+            ›{""}
+          </text>
+        )}
+        {props.icon && (
+          <text
+            fg={props.active ? Theme.background : Theme.text}
+            selectable={false}
+          >
+            {String(props.icon)}{" "}
+          </text>
+        )}
+        <text
+          fg={
+            props.active
+              ? Theme.background
+              : props.current
+                ? Theme.primary
+                : Theme.text
+          }
+          attributes={props.active ? TextAttributes.BOLD : undefined}
+          selectable={false}
+        >
+          {props.title}
+        </text>
+      </box>
+      {props.label && (
+        <text
+          fg={props.active ? Theme.background : Theme.textMuted}
+          attributes={props.active ? TextAttributes.BOLD : undefined}
+          selectable={false}
+        >
+          {props.label}
+        </text>
+      )}
+    </box>
+  );
+}
+
+const DropdownItem: (props: DropdownItemProps) => any = (props) => {
+  const context = useContext(DropdownContext);
+  if (!context) return null;
+
+  const { searchText, filtering, currentSection, selectedIndex, selectedValues } =
+    context;
+
+  // Apply filtering logic
+  const shouldHide = (() => {
+    if (!filtering || !searchText.trim()) return false;
+    const needle = searchText.toLowerCase().trim();
+    const searchableText = [props.title, ...(props.keywords || [])]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+    return !searchableText.includes(needle);
+  })();
+
+  // Register as descendant
+  const { index } = useDropdownItemDescendant({
+    value: props.value,
+    title: props.title,
+    hidden: shouldHide,
+  });
+
+  // Don't render if hidden
+  if (shouldHide) return null;
+
+  // Determine if active (index will be -1 if hidden)
+  const isActive = index === selectedIndex && index !== -1;
+  const isCurrent = selectedValues ? selectedValues.includes(props.value) : false;
+
+  // Handle mouse events
+  const handleMouseMove = () => {
+    // Update selected index on hover
+    if (
+      context.setSelectedIndex &&
+      context.selectedIndex !== index &&
+      index !== -1
+    ) {
+      context.setSelectedIndex(index);
+    }
+  };
+
+  const handleMouseDown = () => {
+    // Trigger selection on click
+    if (context.onChange && props.value) {
+      context.onChange(props.value);
+    }
+  };
+
+  // Render the item directly
+  return (
+    <ItemOption
+      title={props.title}
+      icon={props.icon}
+      active={isActive}
+      current={isCurrent}
+      label={props.label}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+    />
+  );
+};
+
+const DropdownSection: (props: DropdownSectionProps) => any = (props) => {
+  const parentContext = useContext(DropdownContext);
+  if (!parentContext) return null;
+
+  // Create new context with section title
+  const sectionContextValue = useMemo(
+    () => ({
+      ...parentContext,
+      currentSection: props.title,
+    }),
+    [parentContext, props.title],
+  );
+
+  return (
+    <>
+      {/* Render section title if provided */}
+      {props.title && (
+        <box style={{ paddingTop: 1, paddingLeft: 1 }}>
+          <text fg={Theme.accent} attributes={TextAttributes.BOLD}>
+            {props.title}
+          </text>
+        </box>
+      )}
+      {/* Render children with section context */}
+      <DropdownContext.Provider value={sectionContextValue}>
+        {props.children}
+      </DropdownContext.Provider>
+    </>
+  );
+};
+
+Dropdown.Item = DropdownItem;
+Dropdown.Section = DropdownSection;
+
+export default Dropdown;
+export { Dropdown };

package/src/theme.tsx

@@ -0,0 +1,29 @@
+export const Theme = {
+  // Text colors
+  text: "#FFFFFF",
+  textMuted: "#999999",
+
+  // Background colors
+  background: "#000000",
+  backgroundPanel: "#1E1E1E", // Dark gray panel background
+
+  // Primary/accent colors
+  primary: "#0080FF", // Blue
+  accent: "#00FF80", // Light green (was using this for dates)
+
+  // Accessory colors (from List component)
+  info: "#0080FF", // Blue for text accessories
+  success: "#00FF80", // Green for date accessories
+  warning: "#FF8000", // Orange for tag accessories
+  error: "#FF0000", // Red for errors
+
+  // Additional UI colors
+  border: "#333333",
+  highlight: "#0080FF",
+  selected: "#0080FF",
+  yellow: "#FFFF00", // Yellow for icons
+  link: "#0080FF", // Blue for links
+
+  // Transparent
+  transparent: undefined, // Use undefined for no background color
+} as const;