claudeup 3.17.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "3.17.0",
+  "version": "4.0.0",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",

package/src/ui/adapters/pluginsAdapter.js

@@ -0,0 +1,139 @@
+// Virtual marketplace name for the community sub-section of claude-plugins-official
+export const COMMUNITY_VIRTUAL_MARKETPLACE = "claude-plugins-official:community";
+// The marketplace that gets split into Anthropic Official + Community sections
+export const SPLIT_MARKETPLACE = "claude-plugins-official";
+/**
+ * Derives tone and badge for a category item based on marketplace identity.
+ */
+function categoryStyling(mp, isCommunitySection, marketplaceEnabled) {
+    if (!marketplaceEnabled) {
+        return { tone: "gray" };
+    }
+    if (isCommunitySection) {
+        return { tone: "gray", badge: "3rd Party" };
+    }
+    if (mp.name === "claude-plugins-official") {
+        return { tone: "yellow", badge: "★ Official" };
+    }
+    if (mp.name === "claude-code-plugins") {
+        return { tone: "red", badge: "⚠ Deprecated" };
+    }
+    if (mp.official) {
+        return { tone: "yellow", badge: "★ Official" };
+    }
+    return { tone: "green", badge: "✓ Added" };
+}
+/**
+ * Builds the flat list of items for the PluginsScreen list panel.
+ * Extracted from PluginsScreen so it can be tested independently.
+ */
+export function buildPluginBrowserItems({ marketplaces, plugins, collapsedMarketplaces, }) {
+    const pluginsByMarketplace = new Map();
+    for (const plugin of plugins) {
+        const existing = pluginsByMarketplace.get(plugin.marketplace) || [];
+        existing.push(plugin);
+        pluginsByMarketplace.set(plugin.marketplace, existing);
+    }
+    // Sort marketplaces: deprecated ones go to the bottom
+    const sortedMarketplaces = [...marketplaces].sort((a, b) => {
+        const aDeprecated = a.name === "claude-code-plugins" ? 1 : 0;
+        const bDeprecated = b.name === "claude-code-plugins" ? 1 : 0;
+        return aDeprecated - bDeprecated;
+    });
+    const items = [];
+    for (const marketplace of sortedMarketplaces) {
+        const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
+        const isCollapsed = collapsedMarketplaces.has(marketplace.name);
+        const isEnabled = marketplacePlugins.length > 0 || !!marketplace.official;
+        const hasPlugins = marketplacePlugins.length > 0;
+        // Special handling: split claude-plugins-official into two sub-sections
+        if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
+            const anthropicPlugins = marketplacePlugins.filter((p) => p.author?.name?.toLowerCase() === "anthropic");
+            const communityPlugins = marketplacePlugins.filter((p) => p.author?.name?.toLowerCase() !== "anthropic");
+            // Sub-section 1: Anthropic Official (plugins by Anthropic)
+            const anthropicCollapsed = collapsedMarketplaces.has(marketplace.name);
+            const anthropicHasPlugins = anthropicPlugins.length > 0;
+            const anthropicStyle = categoryStyling(marketplace, false, isEnabled);
+            items.push({
+                id: `mp:${marketplace.name}`,
+                kind: "category",
+                label: marketplace.displayName,
+                marketplace,
+                marketplaceEnabled: isEnabled,
+                pluginCount: anthropicPlugins.length,
+                isExpanded: !anthropicCollapsed && anthropicHasPlugins,
+                tone: anthropicStyle.tone,
+                badge: anthropicStyle.badge,
+            });
+            if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
+                for (const plugin of anthropicPlugins) {
+                    items.push({
+                        id: `pl:${plugin.id}`,
+                        kind: "plugin",
+                        label: plugin.name,
+                        plugin,
+                    });
+                }
+            }
+            // Sub-section 2: Community (third-party plugins in same marketplace)
+            if (communityPlugins.length > 0) {
+                const communityVirtualMp = {
+                    name: COMMUNITY_VIRTUAL_MARKETPLACE,
+                    displayName: "Anthropic Official — 3rd Party",
+                    source: marketplace.source,
+                    description: "Third-party plugins in the Anthropic Official marketplace",
+                };
+                const communityCollapsed = collapsedMarketplaces.has(COMMUNITY_VIRTUAL_MARKETPLACE);
+                const communityStyle = categoryStyling(communityVirtualMp, true, true);
+                items.push({
+                    id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
+                    kind: "category",
+                    label: "Anthropic Official — 3rd Party",
+                    marketplace: communityVirtualMp,
+                    marketplaceEnabled: true,
+                    pluginCount: communityPlugins.length,
+                    isExpanded: !communityCollapsed,
+                    isCommunitySection: true,
+                    tone: communityStyle.tone,
+                    badge: communityStyle.badge,
+                });
+                if (!communityCollapsed) {
+                    for (const plugin of communityPlugins) {
+                        items.push({
+                            id: `pl:${plugin.id}`,
+                            kind: "plugin",
+                            label: plugin.name,
+                            plugin,
+                        });
+                    }
+                }
+            }
+            continue;
+        }
+        // Category header (marketplace)
+        const style = categoryStyling(marketplace, false, isEnabled);
+        items.push({
+            id: `mp:${marketplace.name}`,
+            kind: "category",
+            label: marketplace.displayName,
+            marketplace,
+            marketplaceEnabled: isEnabled,
+            pluginCount: marketplacePlugins.length,
+            isExpanded: !isCollapsed && hasPlugins,
+            tone: style.tone,
+            badge: style.badge,
+        });
+        // Plugins under this marketplace (if expanded)
+        if (isEnabled && hasPlugins && !isCollapsed) {
+            for (const plugin of marketplacePlugins) {
+                items.push({
+                    id: `pl:${plugin.id}`,
+                    kind: "plugin",
+                    label: plugin.name,
+                    plugin,
+                });
+            }
+        }
+    }
+    return items;
+}

package/src/ui/adapters/pluginsAdapter.ts

@@ -0,0 +1,202 @@
+import type { Marketplace } from "../../types/index.js";
+import type { PluginInfo } from "../../services/plugin-manager.js";
+
+// Virtual marketplace name for the community sub-section of claude-plugins-official
+export const COMMUNITY_VIRTUAL_MARKETPLACE = "claude-plugins-official:community";
+// The marketplace that gets split into Anthropic Official + Community sections
+export const SPLIT_MARKETPLACE = "claude-plugins-official";
+
+// ─── Item types ───────────────────────────────────────────────────────────────
+
+export interface PluginCategoryItem {
+  id: string;
+  kind: "category";
+  label: string;
+  marketplace: Marketplace;
+  marketplaceEnabled: boolean;
+  pluginCount: number;
+  isExpanded: boolean;
+  isCommunitySection?: boolean;
+  /** Visual tone for the category row */
+  tone: "yellow" | "gray" | "green" | "red" | "purple" | "teal";
+  /** Badge text shown on category row (e.g. "★ Official") */
+  badge?: string;
+}
+
+export interface PluginPluginItem {
+  id: string;
+  kind: "plugin";
+  label: string;
+  plugin: PluginInfo;
+  /** Fuzzy match highlight indices, if search is active */
+  matches?: number[];
+}
+
+export type PluginBrowserItem = PluginCategoryItem | PluginPluginItem;
+
+// ─── Adapter ─────────────────────────────────────────────────────────────────
+
+export interface BuildPluginBrowserItemsArgs {
+  marketplaces: Marketplace[];
+  plugins: PluginInfo[];
+  collapsedMarketplaces: Set<string>;
+}
+
+/**
+ * Derives tone and badge for a category item based on marketplace identity.
+ */
+function categoryStyling(
+  mp: Marketplace,
+  isCommunitySection: boolean,
+  marketplaceEnabled: boolean,
+): { tone: PluginCategoryItem["tone"]; badge?: string } {
+  if (!marketplaceEnabled) {
+    return { tone: "gray" };
+  }
+  if (isCommunitySection) {
+    return { tone: "gray", badge: "3rd Party" };
+  }
+  if (mp.name === "claude-plugins-official") {
+    return { tone: "yellow", badge: "★ Official" };
+  }
+  if (mp.name === "claude-code-plugins") {
+    return { tone: "red", badge: "⚠ Deprecated" };
+  }
+  if (mp.official) {
+    return { tone: "yellow", badge: "★ Official" };
+  }
+  return { tone: "green", badge: "✓ Added" };
+}
+
+/**
+ * Builds the flat list of items for the PluginsScreen list panel.
+ * Extracted from PluginsScreen so it can be tested independently.
+ */
+export function buildPluginBrowserItems({
+  marketplaces,
+  plugins,
+  collapsedMarketplaces,
+}: BuildPluginBrowserItemsArgs): PluginBrowserItem[] {
+  const pluginsByMarketplace = new Map<string, PluginInfo[]>();
+  for (const plugin of plugins) {
+    const existing = pluginsByMarketplace.get(plugin.marketplace) || [];
+    existing.push(plugin);
+    pluginsByMarketplace.set(plugin.marketplace, existing);
+  }
+
+  // Sort marketplaces: deprecated ones go to the bottom
+  const sortedMarketplaces = [...marketplaces].sort((a, b) => {
+    const aDeprecated = a.name === "claude-code-plugins" ? 1 : 0;
+    const bDeprecated = b.name === "claude-code-plugins" ? 1 : 0;
+    return aDeprecated - bDeprecated;
+  });
+
+  const items: PluginBrowserItem[] = [];
+
+  for (const marketplace of sortedMarketplaces) {
+    const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
+    const isCollapsed = collapsedMarketplaces.has(marketplace.name);
+    const isEnabled = marketplacePlugins.length > 0 || !!marketplace.official;
+    const hasPlugins = marketplacePlugins.length > 0;
+
+    // Special handling: split claude-plugins-official into two sub-sections
+    if (marketplace.name === SPLIT_MARKETPLACE && hasPlugins) {
+      const anthropicPlugins = marketplacePlugins.filter(
+        (p) => p.author?.name?.toLowerCase() === "anthropic",
+      );
+      const communityPlugins = marketplacePlugins.filter(
+        (p) => p.author?.name?.toLowerCase() !== "anthropic",
+      );
+
+      // Sub-section 1: Anthropic Official (plugins by Anthropic)
+      const anthropicCollapsed = collapsedMarketplaces.has(marketplace.name);
+      const anthropicHasPlugins = anthropicPlugins.length > 0;
+      const anthropicStyle = categoryStyling(marketplace, false, isEnabled);
+      items.push({
+        id: `mp:${marketplace.name}`,
+        kind: "category",
+        label: marketplace.displayName,
+        marketplace,
+        marketplaceEnabled: isEnabled,
+        pluginCount: anthropicPlugins.length,
+        isExpanded: !anthropicCollapsed && anthropicHasPlugins,
+        tone: anthropicStyle.tone,
+        badge: anthropicStyle.badge,
+      });
+      if (isEnabled && anthropicHasPlugins && !anthropicCollapsed) {
+        for (const plugin of anthropicPlugins) {
+          items.push({
+            id: `pl:${plugin.id}`,
+            kind: "plugin",
+            label: plugin.name,
+            plugin,
+          });
+        }
+      }
+
+      // Sub-section 2: Community (third-party plugins in same marketplace)
+      if (communityPlugins.length > 0) {
+        const communityVirtualMp: Marketplace = {
+          name: COMMUNITY_VIRTUAL_MARKETPLACE,
+          displayName: "Anthropic Official — 3rd Party",
+          source: marketplace.source,
+          description: "Third-party plugins in the Anthropic Official marketplace",
+        };
+        const communityCollapsed = collapsedMarketplaces.has(COMMUNITY_VIRTUAL_MARKETPLACE);
+        const communityStyle = categoryStyling(communityVirtualMp, true, true);
+        items.push({
+          id: `mp:${COMMUNITY_VIRTUAL_MARKETPLACE}`,
+          kind: "category",
+          label: "Anthropic Official — 3rd Party",
+          marketplace: communityVirtualMp,
+          marketplaceEnabled: true,
+          pluginCount: communityPlugins.length,
+          isExpanded: !communityCollapsed,
+          isCommunitySection: true,
+          tone: communityStyle.tone,
+          badge: communityStyle.badge,
+        });
+        if (!communityCollapsed) {
+          for (const plugin of communityPlugins) {
+            items.push({
+              id: `pl:${plugin.id}`,
+              kind: "plugin",
+              label: plugin.name,
+              plugin,
+            });
+          }
+        }
+      }
+
+      continue;
+    }
+
+    // Category header (marketplace)
+    const style = categoryStyling(marketplace, false, isEnabled);
+    items.push({
+      id: `mp:${marketplace.name}`,
+      kind: "category",
+      label: marketplace.displayName,
+      marketplace,
+      marketplaceEnabled: isEnabled,
+      pluginCount: marketplacePlugins.length,
+      isExpanded: !isCollapsed && hasPlugins,
+      tone: style.tone,
+      badge: style.badge,
+    });
+
+    // Plugins under this marketplace (if expanded)
+    if (isEnabled && hasPlugins && !isCollapsed) {
+      for (const plugin of marketplacePlugins) {
+        items.push({
+          id: `pl:${plugin.id}`,
+          kind: "plugin",
+          label: plugin.name,
+          plugin,
+        });
+      }
+    }
+  }
+
+  return items;
+}

package/src/ui/adapters/settingsAdapter.js

@@ -0,0 +1,111 @@
+import { SETTINGS_CATALOG, } from "../../data/settings-catalog.js";
+// ─── Constants ─────────────────────────────────────────────────────────────────
+export const CATEGORY_LABELS = {
+    recommended: "Recommended",
+    agents: "Agents & Teams",
+    models: "Models & Thinking",
+    workflow: "Workflow",
+    terminal: "Terminal & UI",
+    performance: "Performance",
+    advanced: "Advanced",
+};
+export const CATEGORY_ORDER = [
+    "recommended",
+    "agents",
+    "models",
+    "workflow",
+    "terminal",
+    "performance",
+    "advanced",
+];
+export const CATEGORY_BG = {
+    recommended: "#2e7d32",
+    agents: "#00838f",
+    models: "#4527a0",
+    workflow: "#1565c0",
+    terminal: "#4e342e",
+    performance: "#6a1b9a",
+    advanced: "#e65100",
+};
+export const CATEGORY_COLOR = {
+    recommended: "green",
+    agents: "cyan",
+    models: "cyan",
+    workflow: "blue",
+    terminal: "blue",
+    performance: "magentaBright",
+    advanced: "yellow",
+};
+export const CATEGORY_DESCRIPTIONS = {
+    recommended: "Most impactful settings every user should know.",
+    agents: "Agent teams, task lists, and subagent configuration.",
+    models: "Model selection, extended thinking, and effort.",
+    workflow: "Git, plans, permissions, output style, and languages.",
+    terminal: "Shell, spinners, progress bars, voice, and UI behavior.",
+    performance: "Compaction, token limits, timeouts, and caching.",
+    advanced: "Telemetry, updates, debugging, and internal controls.",
+};
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+/** Get the effective value (project overrides user) */
+export function getEffectiveValue(scoped) {
+    return scoped.project !== undefined ? scoped.project : scoped.user;
+}
+export function formatValue(setting, value) {
+    if (value === undefined || value === "") {
+        if (setting.defaultValue !== undefined) {
+            return setting.type === "boolean"
+                ? setting.defaultValue === "true"
+                    ? "on"
+                    : "off"
+                : setting.defaultValue || "default";
+        }
+        return "—";
+    }
+    if (setting.type === "boolean") {
+        return value === "true" || value === "1" ? "on" : "off";
+    }
+    if (setting.type === "select" && setting.options) {
+        const opt = setting.options.find((o) => o.value === value);
+        return opt ? opt.label : value;
+    }
+    if (value.length > 20) {
+        return value.slice(0, 20) + "...";
+    }
+    return value;
+}
+// ─── Adapter ───────────────────────────────────────────────────────────────────
+/**
+ * Builds the flat list of items for the SettingsScreen list panel.
+ * Extracted from SettingsScreen so it can be tested independently.
+ */
+export function buildSettingsBrowserItems(values) {
+    const items = [];
+    for (const category of CATEGORY_ORDER) {
+        items.push({
+            id: `cat:${category}`,
+            kind: "category",
+            label: CATEGORY_LABELS[category],
+            category,
+            isDefault: true,
+        });
+        const categorySettings = SETTINGS_CATALOG.filter((s) => s.category === category);
+        for (const setting of categorySettings) {
+            const scoped = values.get(setting.id) || {
+                user: undefined,
+                project: undefined,
+            };
+            const effective = getEffectiveValue(scoped);
+            items.push({
+                id: `setting:${setting.id}`,
+                kind: "setting",
+                label: setting.name,
+                category,
+                setting,
+                scopedValues: scoped,
+                effectiveValue: effective,
+                isDefault: effective === undefined || effective === "",
+            });
+        }
+    }
+    return items;
+}

package/src/ui/adapters/settingsAdapter.ts

@@ -0,0 +1,165 @@
+import {
+  SETTINGS_CATALOG,
+  type SettingCategory,
+  type SettingDefinition,
+} from "../../data/settings-catalog.js";
+import type { ScopedSettingValues } from "../../services/settings-manager.js";
+
+// ─── Item types ────────────────────────────────────────────────────────────────
+
+export interface SettingsCategoryItem {
+  id: string;
+  kind: "category";
+  label: string;
+  category: SettingCategory;
+  isDefault: true;
+}
+
+export interface SettingsSettingItem {
+  id: string;
+  kind: "setting";
+  label: string;
+  category: SettingCategory;
+  setting: SettingDefinition;
+  scopedValues: ScopedSettingValues;
+  effectiveValue: string | undefined;
+  isDefault: boolean;
+}
+
+export type SettingsBrowserItem = SettingsCategoryItem | SettingsSettingItem;
+
+// ─── Constants ─────────────────────────────────────────────────────────────────
+
+export const CATEGORY_LABELS: Record<SettingCategory, string> = {
+  recommended: "Recommended",
+  agents: "Agents & Teams",
+  models: "Models & Thinking",
+  workflow: "Workflow",
+  terminal: "Terminal & UI",
+  performance: "Performance",
+  advanced: "Advanced",
+};
+
+export const CATEGORY_ORDER: SettingCategory[] = [
+  "recommended",
+  "agents",
+  "models",
+  "workflow",
+  "terminal",
+  "performance",
+  "advanced",
+];
+
+export const CATEGORY_BG: Record<SettingCategory, string> = {
+  recommended: "#2e7d32",
+  agents: "#00838f",
+  models: "#4527a0",
+  workflow: "#1565c0",
+  terminal: "#4e342e",
+  performance: "#6a1b9a",
+  advanced: "#e65100",
+};
+
+export const CATEGORY_COLOR: Record<SettingCategory, string> = {
+  recommended: "green",
+  agents: "cyan",
+  models: "cyan",
+  workflow: "blue",
+  terminal: "blue",
+  performance: "magentaBright",
+  advanced: "yellow",
+};
+
+export const CATEGORY_DESCRIPTIONS: Record<SettingCategory, string> = {
+  recommended: "Most impactful settings every user should know.",
+  agents: "Agent teams, task lists, and subagent configuration.",
+  models: "Model selection, extended thinking, and effort.",
+  workflow: "Git, plans, permissions, output style, and languages.",
+  terminal: "Shell, spinners, progress bars, voice, and UI behavior.",
+  performance: "Compaction, token limits, timeouts, and caching.",
+  advanced: "Telemetry, updates, debugging, and internal controls.",
+};
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+/** Get the effective value (project overrides user) */
+export function getEffectiveValue(
+  scoped: ScopedSettingValues,
+): string | undefined {
+  return scoped.project !== undefined ? scoped.project : scoped.user;
+}
+
+export function formatValue(
+  setting: SettingDefinition,
+  value: string | undefined,
+): string {
+  if (value === undefined || value === "") {
+    if (setting.defaultValue !== undefined) {
+      return setting.type === "boolean"
+        ? setting.defaultValue === "true"
+          ? "on"
+          : "off"
+        : setting.defaultValue || "default";
+    }
+    return "—";
+  }
+
+  if (setting.type === "boolean") {
+    return value === "true" || value === "1" ? "on" : "off";
+  }
+
+  if (setting.type === "select" && setting.options) {
+    const opt = setting.options.find((o) => o.value === value);
+    return opt ? opt.label : value;
+  }
+
+  if (value.length > 20) {
+    return value.slice(0, 20) + "...";
+  }
+  return value;
+}
+
+// ─── Adapter ───────────────────────────────────────────────────────────────────
+
+/**
+ * Builds the flat list of items for the SettingsScreen list panel.
+ * Extracted from SettingsScreen so it can be tested independently.
+ */
+export function buildSettingsBrowserItems(
+  values: Map<string, ScopedSettingValues>,
+): SettingsBrowserItem[] {
+  const items: SettingsBrowserItem[] = [];
+
+  for (const category of CATEGORY_ORDER) {
+    items.push({
+      id: `cat:${category}`,
+      kind: "category",
+      label: CATEGORY_LABELS[category],
+      category,
+      isDefault: true,
+    });
+
+    const categorySettings = SETTINGS_CATALOG.filter(
+      (s) => s.category === category,
+    );
+    for (const setting of categorySettings) {
+      const scoped = values.get(setting.id) || {
+        user: undefined,
+        project: undefined,
+      };
+      const effective = getEffectiveValue(scoped);
+      items.push({
+        id: `setting:${setting.id}`,
+        kind: "setting",
+        label: setting.name,
+        category,
+        setting,
+        scopedValues: scoped,
+        effectiveValue: effective,
+        isDefault: effective === undefined || effective === "",
+      });
+    }
+  }
+
+  return items;
+}

package/src/ui/components/ScrollableList.js

@@ -1,17 +1,17 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+import { useState, useEffect, useMemo } from "react";
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
 export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, onSelect, focused = false, }) {
     const [scrollOffset, setScrollOffset] = useState(0);
     // Handle keyboard navigation
     useKeyboardHandler((input, key) => {
         if (!focused || !onSelect)
             return;
-        if (key.upArrow || input === 'k') {
+        if (key.upArrow || input === "k") {
             const newIndex = Math.max(0, selectedIndex - 1);
             onSelect(newIndex);
         }
-        else if (key.downArrow || input === 'j') {
+        else if (key.downArrow || input === "j") {
             const newIndex = Math.min(items.length - 1, selectedIndex + 1);
             onSelect(newIndex);
         }

package/src/ui/components/ScrollableList.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+import React, { useState, useEffect, useMemo } from "react";
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
 
 interface ScrollableListProps<T> {
 	/** Array of items to display */
@@ -33,10 +33,10 @@ export function ScrollableList<T>({
 	useKeyboardHandler((input, key) => {
 		if (!focused || !onSelect) return;
 
-		if (key.upArrow || input === 'k') {
+		if (key.upArrow || input === "k") {
 			const newIndex = Math.max(0, selectedIndex - 1);
 			onSelect(newIndex);
-		} else if (key.downArrow || input === 'j') {
+		} else if (key.downArrow || input === "j") {
 			const newIndex = Math.min(items.length - 1, selectedIndex + 1);
 			onSelect(newIndex);
 		}

package/src/ui/components/SearchInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler.js';
-export function SearchInput({ value, onChange, placeholder = 'Search...', isActive, onExit, onSubmit, }) {
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
+export function SearchInput({ value, onChange, placeholder = "Search...", isActive, onExit, onSubmit, }) {
     // Handle keyboard shortcuts when active
     useKeyboardHandler((_input, key) => {
         if (!isActive)