@within-7/minto 0.3.6 → 0.3.10

package/dist/components/SimpleSelector/SimpleSelector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/SimpleSelector/SimpleSelector.tsx"],
+  "sourcesContent": ["/**\n * SimpleSelector Component\n *\n * A lightweight single-choice selector visually matching TabbedListView\n * but without tabs or search. Reuses ScrollableList internally.\n *\n * Visual pattern:\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 (BRAND_GRADIENT.START border)\n *  \u25C6 Title  subtitle\n *\n *    Category Name\n *  \u25C6 Item A (current)\n *    Item B  description\n *    Item C  description\n *\n *  \u2191\u2193 Navigate \u00B7 Enter Select \u00B7 Esc Close\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 (BRAND_GRADIENT.START border)\n */\n\nimport React, { useState, useMemo, useCallback } from 'react'\nimport { Box, Text, useInput } from 'ink'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport { ScrollableList } from '@components/TabbedListView'\nimport { StatusOverlayContent } from '@components/StatusOverlayContent'\nimport { useTerminalSize } from '@hooks/useTerminalSize'\nimport { t } from '@i18n'\nimport type { ListItem } from '@components/TabbedListView'\nimport type { SimpleSelectorProps, SelectorItem } from './types'\n\n// Heights for dynamic visible count calculation\nconst PROMPT_HEIGHT = 5 // PromptInput borders + input + hints\nconst CHROME_HEIGHT = 4 // title + footer + borders (no tabs/search)\n\n/**\n * Convert SelectorItems to ListItems for ScrollableList\n */\nfunction toListItems(items: SelectorItem[]): ListItem[] {\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    description: item.description,\n    category: item.category,\n    metadata: item.isCurrent ? `(${t('common.selected')})` : undefined,\n    status: item.isCurrent ? ('enabled' as const) : undefined,\n    data: item,\n  }))\n}\n\n/**\n * Custom item renderer that supports statusIcon and statusColor\n */\nfunction SelectorItemRenderer({\n  item,\n  isFocused,\n  selectorItem,\n}: {\n  item: ListItem\n  isFocused: boolean\n  selectorItem?: SelectorItem\n}) {\n  const textColor = isFocused ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim\n\n  return (\n    <Box flexDirection=\"row\">\n      {/* Selection indicator */}\n      <Text color={isFocused ? BRAND_GRADIENT.START : undefined}>\n        {isFocused ? '\\u25C6 ' : '  '}\n      </Text>\n\n      {/* Status icon if present */}\n      {selectorItem?.statusIcon && (\n        <Text color={selectorItem.statusColor || SEMANTIC_COLORS.dim}>\n          {selectorItem.statusIcon}{' '}\n        </Text>\n      )}\n\n      {/* Main content */}\n      <Text color={textColor}>\n        {item.label}\n        {selectorItem?.isCurrent && (\n          <Text color={SEMANTIC_COLORS.success}> ({t('common.selected')})</Text>\n        )}\n        {item.description && (\n          <Text color={SEMANTIC_COLORS.muted}> {item.description}</Text>\n        )}\n      </Text>\n    </Box>\n  )\n}\n\nexport function SimpleSelector({\n  title,\n  subtitle,\n  items,\n  onSelect,\n  onClose,\n  groupByCategory = false,\n  statusOverlay,\n  isActive = true,\n  maxVisible,\n}: SimpleSelectorProps) {\n  // Dynamic visible count based on terminal height\n  const { rows } = useTerminalSize()\n  const dynamicVisible = Math.min(\n    8,\n    Math.max(3, rows - PROMPT_HEIGHT - CHROME_HEIGHT),\n  )\n  const effectiveMaxVisible = maxVisible ?? dynamicVisible\n\n  const [focusedIndex, setFocusedIndex] = useState(0)\n\n  const listItems = useMemo(() => toListItems(items), [items])\n\n  // Map from ListItem back to SelectorItem for custom rendering\n  const selectorItemMap = useMemo(() => {\n    const map = new Map<string, SelectorItem>()\n    items.forEach(item => map.set(item.id, item))\n    return map\n  }, [items])\n\n  const handleSelect = useCallback(\n    (listItem: ListItem) => {\n      const selectorItem = selectorItemMap.get(listItem.id)\n      if (selectorItem) {\n        onSelect(selectorItem)\n      }\n    },\n    [selectorItemMap, onSelect],\n  )\n\n  const renderItem = useCallback(\n    (item: ListItem, isFocused: boolean) => (\n      <SelectorItemRenderer\n        item={item}\n        isFocused={isFocused}\n        selectorItem={selectorItemMap.get(item.id)}\n      />\n    ),\n    [selectorItemMap],\n  )\n\n  // Keyboard input handling\n  useInput(\n    (input, key) => {\n      // Status overlay: success/error -> ESC/Enter closes\n      if (statusOverlay && statusOverlay.type !== 'loading') {\n        if (key.escape || key.return) {\n          onClose()\n        }\n        return\n      }\n\n      // Status overlay: loading -> ignore all input\n      if (statusOverlay) return\n\n      // Escape closes\n      if (key.escape) {\n        onClose()\n        return\n      }\n\n      // Arrow navigation\n      if (key.downArrow && listItems.length > 0) {\n        setFocusedIndex(prev => (prev < listItems.length - 1 ? prev + 1 : prev))\n        return\n      }\n\n      if (key.upArrow && listItems.length > 0) {\n        setFocusedIndex(prev => (prev > 0 ? prev - 1 : prev))\n        return\n      }\n\n      // Enter to select\n      if (key.return && listItems.length > 0) {\n        handleSelect(listItems[focusedIndex])\n        return\n      }\n    },\n    { isActive },\n  )\n\n  // Build footer hint\n  const footerHint = statusOverlay\n    ? statusOverlay.type === 'loading'\n      ? ''\n      : t('ui.simpleSelector.dismissHint')\n    : t('ui.simpleSelector.navigationHint')\n\n  return (\n    <Box flexDirection=\"column\" width=\"100%\">\n      {/* Header bar with top border */}\n      <Box\n        borderTop={true}\n        borderBottom={false}\n        borderLeft={false}\n        borderRight={false}\n        borderColor={BRAND_GRADIENT.START}\n        borderStyle=\"single\"\n        width=\"100%\"\n        paddingX={1}\n        flexDirection=\"column\"\n      >\n        {/* Title with brand color */}\n        <Box>\n          <Text color={BRAND_GRADIENT.START}>{'\\u25C6'}</Text>\n          <Text bold color={SEMANTIC_COLORS.secondary}>\n            {' '}\n            {title}\n          </Text>\n          {subtitle && (\n            <Text color={SEMANTIC_COLORS.dim}>\n              {'  '}\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </Box>\n\n      {/* Content container with bottom border */}\n      <Box\n        flexDirection=\"column\"\n        borderTop={false}\n        borderBottom={true}\n        borderLeft={false}\n        borderRight={false}\n        borderColor={BRAND_GRADIENT.START}\n        borderStyle=\"single\"\n        width=\"100%\"\n        paddingX={1}\n        paddingY={1}\n      >\n        {statusOverlay ? (\n          <StatusOverlayContent\n            type={statusOverlay.type}\n            message={statusOverlay.message}\n          />\n        ) : listItems.length === 0 ? (\n          <Box>\n            <Text color={SEMANTIC_COLORS.dim}>\n              {t('ui.tabbedList.noItems')}\n            </Text>\n          </Box>\n        ) : (\n          <ScrollableList\n            items={listItems}\n            focusedIndex={focusedIndex}\n            onFocusChange={setFocusedIndex}\n            onSelect={handleSelect}\n            visibleCount={effectiveMaxVisible}\n            groupByCategory={groupByCategory}\n            renderItem={renderItem}\n          />\n        )}\n\n        {/* Footer Hint */}\n        {footerHint && (\n          <Box marginTop={1}>\n            <Text color={SEMANTIC_COLORS.muted}>{footerHint}</Text>\n          </Box>\n        )}\n      </Box>\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/SimpleSelector/index.js

@@ -0,0 +1,5 @@
+import { SimpleSelector } from "./SimpleSelector.js";
+export {
+  SimpleSelector
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SimpleSelector/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/SimpleSelector/index.ts"],
+  "sourcesContent": ["/**\n * SimpleSelector Component Exports\n *\n * A lightweight single-choice selector for quick selection commands.\n */\n\nexport { SimpleSelector } from './SimpleSelector'\nexport type { SimpleSelectorProps, SelectorItem, StatusOverlay } from './types'\n"],
+  "mappings": "AAMA,SAAS,sBAAsB;",
+  "names": []
+}

package/dist/components/SimpleSelector/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/SimpleSelector/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/StatusOverlayContent.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../constants/colors.js";
+import { SimpleSpinner } from "./Spinner.js";
+function StatusOverlayContent({
+  type,
+  message
+}) {
+  switch (type) {
+    case "loading":
+      return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(SimpleSpinner, null), /* @__PURE__ */ React.createElement(Text, { color: BRAND_GRADIENT.MIDDLE }, " ", message));
+    case "success":
+      return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.success }, "\u2713", " ", message));
+    case "error":
+      return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.error }, "\u2717", " ", message));
+  }
+}
+export {
+  StatusOverlayContent
+};
+//# sourceMappingURL=StatusOverlayContent.js.map

package/dist/components/StatusOverlayContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/StatusOverlayContent.tsx"],
+  "sourcesContent": ["/**\n * Shared StatusOverlayContent component\n *\n * Renders loading/success/error overlay content used by\n * TabbedListView, InfoPanel, and SimpleSelector.\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport { SimpleSpinner } from '@components/Spinner'\n\nexport type StatusOverlay = {\n  type: 'loading' | 'success' | 'error'\n  message: string\n}\n\nexport function StatusOverlayContent({\n  type,\n  message,\n}: {\n  type: 'loading' | 'success' | 'error'\n  message: string\n}) {\n  switch (type) {\n    case 'loading':\n      return (\n        <Box>\n          <SimpleSpinner />\n          <Text color={BRAND_GRADIENT.MIDDLE}> {message}</Text>\n        </Box>\n      )\n    case 'success':\n      return (\n        <Box>\n          <Text color={SEMANTIC_COLORS.success}>\n            {'\\u2713'} {message}\n          </Text>\n        </Box>\n      )\n    case 'error':\n      return (\n        <Box>\n          <Text color={SEMANTIC_COLORS.error}>\n            {'\\u2717'} {message}\n          </Text>\n        </Box>\n      )\n  }\n}\n"],
+  "mappings": "AAOA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,qBAAqB;AAOvB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAGG;AACD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aACE,oCAAC,WACC,oCAAC,mBAAc,GACf,oCAAC,QAAK,OAAO,eAAe,UAAQ,KAAE,OAAQ,CAChD;AAAA,IAEJ,KAAK;AACH,aACE,oCAAC,WACC,oCAAC,QAAK,OAAO,gBAAgB,WAC1B,UAAS,KAAE,OACd,CACF;AAAA,IAEJ,KAAK;AACH,aACE,oCAAC,WACC,oCAAC,QAAK,OAAO,gBAAgB,SAC1B,UAAS,KAAE,OACd,CACF;AAAA,EAEN;AACF;",
+  "names": []
+}

package/dist/components/TabbedListView/ScrollableList.js

@@ -0,0 +1,117 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { SEMANTIC_COLORS, BRAND_GRADIENT } from "../../constants/colors.js";
+const getStatusIcon = (status) => {
+  switch (status) {
+    case "enabled":
+      return { icon: "\u2714", color: SEMANTIC_COLORS.success };
+    case "disabled":
+      return { icon: "\u25CB", color: SEMANTIC_COLORS.dim };
+    case "running":
+      return { icon: "\u25D0", color: SEMANTIC_COLORS.running };
+    case "error":
+      return { icon: "\u2717", color: SEMANTIC_COLORS.error };
+    default:
+      return null;
+  }
+};
+function DefaultItemRenderer({
+  item,
+  isFocused,
+  multiSelect,
+  isSelected
+}) {
+  const statusInfo = getStatusIcon(item.status);
+  const checkboxWidth = multiSelect ? 2 : 0;
+  const focusWidth = 2;
+  const statusWidth = statusInfo ? 2 : 0;
+  const prefixPad = checkboxWidth + focusWidth + statusWidth;
+  const labelColor = isFocused ? BRAND_GRADIENT.START : SEMANTIC_COLORS.secondary;
+  const descColor = SEMANTIC_COLORS.dim;
+  const metaColor = SEMANTIC_COLORS.muted;
+  const hasDescription = !!item.description;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, multiSelect && /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      color: isSelected ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.dim
+    },
+    isSelected ? "\u2611 " : "\u2610 "
+  ), /* @__PURE__ */ React.createElement(Text, { color: isFocused ? BRAND_GRADIENT.START : void 0 }, isFocused ? "\u25C6 " : "  "), statusInfo && /* @__PURE__ */ React.createElement(Text, { color: statusInfo.color }, statusInfo.icon, " "), /* @__PURE__ */ React.createElement(Text, { bold: isFocused, color: labelColor }, item.label), item.metadata && /* @__PURE__ */ React.createElement(Text, { color: metaColor }, " \xB7 ", item.metadata)), hasDescription && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: descColor }, " ".repeat(prefixPad), item.description)));
+}
+function ScrollableList({
+  items,
+  focusedIndex,
+  onFocusChange,
+  onSelect,
+  visibleCount,
+  groupByCategory = false,
+  renderItem,
+  multiSelect,
+  selectedIds
+}) {
+  const { visibleItems, startIndex, endIndex } = useMemo(() => {
+    if (items.length === 0) {
+      return { visibleItems: [], startIndex: 0, endIndex: 0 };
+    }
+    if (items.length <= visibleCount) {
+      return {
+        visibleItems: items.map((item, i) => ({ item, globalIndex: i })),
+        startIndex: 0,
+        endIndex: items.length
+      };
+    }
+    const halfWindow = Math.floor(visibleCount / 2);
+    let start = Math.max(0, focusedIndex - halfWindow);
+    let end = start + visibleCount;
+    if (end > items.length) {
+      end = items.length;
+      start = Math.max(0, end - visibleCount);
+    }
+    return {
+      visibleItems: items.slice(start, end).map((item, i) => ({
+        item,
+        globalIndex: start + i
+      })),
+      startIndex: start,
+      endIndex: end
+    };
+  }, [items, focusedIndex, visibleCount]);
+  const hasMoreAbove = startIndex > 0;
+  const hasMoreBelow = endIndex < items.length;
+  const countAbove = startIndex;
+  const countBelow = items.length - endIndex;
+  const displayElements = [];
+  let currentCategory = "";
+  visibleItems.forEach(({ item, globalIndex }, visibleIndex) => {
+    if (groupByCategory && item.category !== currentCategory) {
+      currentCategory = item.category || "Other";
+      displayElements.push(
+        /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            key: `category-${currentCategory}-${globalIndex}`,
+            marginTop: visibleIndex > 0 ? 1 : 0
+          },
+          /* @__PURE__ */ React.createElement(Text, { bold: true, color: SEMANTIC_COLORS.secondary }, currentCategory)
+        )
+      );
+    }
+    const isFocused = globalIndex === focusedIndex;
+    const isSelected = selectedIds?.has(item.id) ?? false;
+    const itemElement = renderItem ? renderItem(item, isFocused, isSelected) : /* @__PURE__ */ React.createElement(
+      DefaultItemRenderer,
+      {
+        item,
+        isFocused,
+        multiSelect,
+        isSelected
+      }
+    );
+    displayElements.push(/* @__PURE__ */ React.createElement(Box, { key: item.id }, itemElement));
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, hasMoreAbove && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " \u2191 ", countAbove, " more above...")), displayElements, hasMoreBelow && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " \u2193 ", countBelow, " more below...")));
+}
+export {
+  ScrollableList
+};
+//# sourceMappingURL=ScrollableList.js.map

package/dist/components/TabbedListView/ScrollableList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/TabbedListView/ScrollableList.tsx"],
+  "sourcesContent": ["/**\n * ScrollableList Component\n *\n * A scrollable list matching the /command suggestion UI pattern.\n * Uses \u25C6 indicator for selection, brand colors, and scroll indicators.\n */\n\nimport React, { useMemo } from 'react'\nimport { Box, Text } from 'ink'\nimport { SEMANTIC_COLORS, BRAND_GRADIENT } from '@constants/colors'\nimport { t } from '@i18n'\nimport type { ListItem, ScrollableListProps, CategoryGroup } from './types'\n\n/** Status icon mapping */\nconst getStatusIcon = (status?: ListItem['status']) => {\n  switch (status) {\n    case 'enabled':\n      return { icon: '\u2714', color: SEMANTIC_COLORS.success }\n    case 'disabled':\n      return { icon: '\u25CB', color: SEMANTIC_COLORS.dim }\n    case 'running':\n      return { icon: '\u25D0', color: SEMANTIC_COLORS.running }\n    case 'error':\n      return { icon: '\u2717', color: SEMANTIC_COLORS.error }\n    default:\n      return null\n  }\n}\n\n/** Default item renderer - two-line layout with clear visual hierarchy */\nfunction DefaultItemRenderer({\n  item,\n  isFocused,\n  multiSelect,\n  isSelected,\n}: {\n  item: ListItem\n  isFocused: boolean\n  multiSelect?: boolean\n  isSelected?: boolean\n}) {\n  const statusInfo = getStatusIcon(item.status)\n\n  // Prefix width: checkbox \"\u2611 \" (2) + \"\u25C6 \" (2) + optional status icon \"\u2714 \" (2)\n  const checkboxWidth = multiSelect ? 2 : 0\n  const focusWidth = 2\n  const statusWidth = statusInfo ? 2 : 0\n  const prefixPad = checkboxWidth + focusWidth + statusWidth\n\n  // Colors: focused items use brand gradient, unfocused use secondary/dim\n  const labelColor = isFocused\n    ? BRAND_GRADIENT.START\n    : SEMANTIC_COLORS.secondary\n  const descColor = SEMANTIC_COLORS.dim\n  const metaColor = SEMANTIC_COLORS.muted\n\n  const hasDescription = !!item.description\n\n  return (\n    <Box flexDirection=\"column\">\n      {/* Line 1: [checkbox] + indicator + status + label + metadata */}\n      <Box flexDirection=\"row\">\n        {multiSelect && (\n          <Text\n            color={isSelected ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.dim}\n          >\n            {isSelected ? '\u2611 ' : '\u2610 '}\n          </Text>\n        )}\n        <Text color={isFocused ? BRAND_GRADIENT.START : undefined}>\n          {isFocused ? '\u25C6 ' : '  '}\n        </Text>\n        {statusInfo && <Text color={statusInfo.color}>{statusInfo.icon} </Text>}\n        <Text bold={isFocused} color={labelColor}>\n          {item.label}\n        </Text>\n        {item.metadata && <Text color={metaColor}> \u00B7 {item.metadata}</Text>}\n      </Box>\n\n      {/* Line 2: description (indented to align under label) */}\n      {hasDescription && (\n        <Box>\n          <Text color={descColor}>\n            {' '.repeat(prefixPad)}\n            {item.description}\n          </Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport function ScrollableList({\n  items,\n  focusedIndex,\n  onFocusChange,\n  onSelect,\n  visibleCount,\n  groupByCategory = false,\n  renderItem,\n  multiSelect,\n  selectedIds,\n}: ScrollableListProps) {\n  // Calculate scroll window to keep selected item visible (same logic as command suggestions)\n  const { visibleItems, startIndex, endIndex } = useMemo(() => {\n    if (items.length === 0) {\n      return { visibleItems: [], startIndex: 0, endIndex: 0 }\n    }\n\n    // If all items fit in window, show them all\n    if (items.length <= visibleCount) {\n      return {\n        visibleItems: items.map((item, i) => ({ item, globalIndex: i })),\n        startIndex: 0,\n        endIndex: items.length,\n      }\n    }\n\n    // Calculate scroll window to keep focused item visible\n    const halfWindow = Math.floor(visibleCount / 2)\n    let start = Math.max(0, focusedIndex - halfWindow)\n    let end = start + visibleCount\n\n    // Adjust if we're near the end\n    if (end > items.length) {\n      end = items.length\n      start = Math.max(0, end - visibleCount)\n    }\n\n    return {\n      visibleItems: items.slice(start, end).map((item, i) => ({\n        item,\n        globalIndex: start + i,\n      })),\n      startIndex: start,\n      endIndex: end,\n    }\n  }, [items, focusedIndex, visibleCount])\n\n  // Scroll indicators\n  const hasMoreAbove = startIndex > 0\n  const hasMoreBelow = endIndex < items.length\n  const countAbove = startIndex\n  const countBelow = items.length - endIndex\n\n  // Build display with optional category headers\n  const displayElements: React.ReactNode[] = []\n  let currentCategory = ''\n\n  visibleItems.forEach(({ item, globalIndex }, visibleIndex) => {\n    // Add category header if category changed and grouping is enabled\n    if (groupByCategory && item.category !== currentCategory) {\n      currentCategory = item.category || 'Other'\n      displayElements.push(\n        <Box\n          key={`category-${currentCategory}-${globalIndex}`}\n          marginTop={visibleIndex > 0 ? 1 : 0}\n        >\n          <Text bold color={SEMANTIC_COLORS.secondary}>\n            {currentCategory}\n          </Text>\n        </Box>,\n      )\n    }\n\n    const isFocused = globalIndex === focusedIndex\n    const isSelected = selectedIds?.has(item.id) ?? false\n    const itemElement = renderItem ? (\n      renderItem(item, isFocused, isSelected)\n    ) : (\n      <DefaultItemRenderer\n        item={item}\n        isFocused={isFocused}\n        multiSelect={multiSelect}\n        isSelected={isSelected}\n      />\n    )\n\n    displayElements.push(<Box key={item.id}>{itemElement}</Box>)\n  })\n\n  return (\n    <Box flexDirection=\"column\">\n      {/* Scroll up indicator */}\n      {hasMoreAbove && (\n        <Box>\n          <Text color={SEMANTIC_COLORS.dim}> \u2191 {countAbove} more above...</Text>\n        </Box>\n      )}\n\n      {/* List items */}\n      {displayElements}\n\n      {/* Scroll down indicator */}\n      {hasMoreBelow && (\n        <Box>\n          <Text color={SEMANTIC_COLORS.dim}> \u2193 {countBelow} more below...</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/TabbedListView/SearchInput.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Text } from "ink";
+import InkTextInput from "ink-text-input";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../../constants/colors.js";
+function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  isActive
+}) {
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: isActive ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim }, "/"), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " "), isActive ? /* @__PURE__ */ React.createElement(
+    InkTextInput,
+    {
+      value,
+      onChange,
+      placeholder
+    }
+  ) : /* @__PURE__ */ React.createElement(Text, { color: value ? SEMANTIC_COLORS.secondary : SEMANTIC_COLORS.dim }, value || placeholder));
+}
+export {
+  SearchInput
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/TabbedListView/SearchInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/TabbedListView/SearchInput.tsx"],
+  "sourcesContent": ["/**\n * SearchInput Component\n *\n * A styled search input with search icon.\n * Uses inline style matching the overall design.\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport InkTextInput from 'ink-text-input'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport type { SearchInputProps } from './types'\n\nexport function SearchInput({\n  value,\n  onChange,\n  placeholder = 'Search...',\n  isActive,\n}: SearchInputProps) {\n  return (\n    <Box>\n      <Text color={isActive ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim}>\n        /\n      </Text>\n      <Text color={SEMANTIC_COLORS.dim}> </Text>\n      {isActive ? (\n        <InkTextInput\n          value={value}\n          onChange={onChange}\n          placeholder={placeholder}\n        />\n      ) : (\n        <Text color={value ? SEMANTIC_COLORS.secondary : SEMANTIC_COLORS.dim}>\n          {value || placeholder}\n        </Text>\n      )}\n    </Box>\n  )\n}\n"],
+  "mappings": "AAOA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,OAAO,kBAAkB;AACzB,SAAS,gBAAgB,uBAAuB;AAGzC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAqB;AACnB,SACE,oCAAC,WACC,oCAAC,QAAK,OAAO,WAAW,eAAe,QAAQ,gBAAgB,OAAK,GAEpE,GACA,oCAAC,QAAK,OAAO,gBAAgB,OAAK,GAAC,GAClC,WACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,IAEA,oCAAC,QAAK,OAAO,QAAQ,gBAAgB,YAAY,gBAAgB,OAC9D,SAAS,WACZ,CAEJ;AAEJ;",
+  "names": []
+}

package/dist/components/TabbedListView/TabBar.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../../constants/colors.js";
+function TabBar({ tabs, activeTab, onTabChange }) {
+  return /* @__PURE__ */ React.createElement(Box, null, tabs.map((tab, index) => {
+    const isActive = tab.id === activeTab;
+    const isLast = index === tabs.length - 1;
+    return /* @__PURE__ */ React.createElement(Box, { key: tab.id }, isActive ? (
+      // Active tab: background highlight with brand color
+      /* @__PURE__ */ React.createElement(Text, { backgroundColor: BRAND_GRADIENT.START, color: "black", bold: true }, " ", tab.label, tab.badge !== void 0 && tab.badge > 0 ? ` (${tab.badge})` : "", " ")
+    ) : (
+      // Inactive tab: dim text
+      /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", tab.label, tab.badge !== void 0 && tab.badge > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " (", tab.badge, ")"), " ")
+    ), !isLast && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "\u2502"));
+  }), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " Tab/\u2190\u2192"));
+}
+export {
+  TabBar
+};
+//# sourceMappingURL=TabBar.js.map

package/dist/components/TabbedListView/TabBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/TabbedListView/TabBar.tsx"],
+  "sourcesContent": ["/**\n * TabBar Component\n *\n * Displays tab navigation matching the brand style.\n * Uses background color for active tab selection.\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport type { TabBarProps } from './types'\n\nexport function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {\n  return (\n    <Box>\n      {tabs.map((tab, index) => {\n        const isActive = tab.id === activeTab\n        const isLast = index === tabs.length - 1\n\n        return (\n          <Box key={tab.id}>\n            {isActive ? (\n              // Active tab: background highlight with brand color\n              <Text backgroundColor={BRAND_GRADIENT.START} color=\"black\" bold>\n                {' '}\n                {tab.label}\n                {tab.badge !== undefined && tab.badge > 0\n                  ? ` (${tab.badge})`\n                  : ''}{' '}\n              </Text>\n            ) : (\n              // Inactive tab: dim text\n              <Text color={SEMANTIC_COLORS.dim}>\n                {' '}\n                {tab.label}\n                {tab.badge !== undefined && tab.badge > 0 && (\n                  <Text color={SEMANTIC_COLORS.muted}> ({tab.badge})</Text>\n                )}{' '}\n              </Text>\n            )}\n            {!isLast && <Text color={SEMANTIC_COLORS.muted}>\u2502</Text>}\n          </Box>\n        )\n      })}\n      <Text color={SEMANTIC_COLORS.muted}> Tab/\u2190\u2192</Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAOA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,SAAS,gBAAgB,uBAAuB;AAGzC,SAAS,OAAO,EAAE,MAAM,WAAW,YAAY,GAAgB;AACpE,SACE,oCAAC,WACE,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,UAAM,WAAW,IAAI,OAAO;AAC5B,UAAM,SAAS,UAAU,KAAK,SAAS;AAEvC,WACE,oCAAC,OAAI,KAAK,IAAI,MACX;AAAA;AAAA,MAEC,oCAAC,QAAK,iBAAiB,eAAe,OAAO,OAAM,SAAQ,MAAI,QAC5D,KACA,IAAI,OACJ,IAAI,UAAU,UAAa,IAAI,QAAQ,IACpC,KAAK,IAAI,KAAK,MACd,IAAI,GACV;AAAA;AAAA;AAAA,MAGA,oCAAC,QAAK,OAAO,gBAAgB,OAC1B,KACA,IAAI,OACJ,IAAI,UAAU,UAAa,IAAI,QAAQ,KACtC,oCAAC,QAAK,OAAO,gBAAgB,SAAO,MAAG,IAAI,OAAM,GAAC,GACjD,GACL;AAAA,OAED,CAAC,UAAU,oCAAC,QAAK,OAAO,gBAAgB,SAAO,QAAC,CACnD;AAAA,EAEJ,CAAC,GACD,oCAAC,QAAK,OAAO,gBAAgB,SAAO,mBAAO,CAC7C;AAEJ;",
+  "names": []
+}

package/dist/components/TabbedListView/TabbedListView.js

@@ -0,0 +1,246 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../../constants/colors.js";
+import { TabBar } from "./TabBar.js";
+import { SearchInput } from "./SearchInput.js";
+import { ScrollableList } from "./ScrollableList.js";
+import { SimpleSpinner } from "../Spinner.js";
+import { StatusOverlayContent } from "../StatusOverlayContent.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+const PROMPT_HEIGHT = 5;
+const CHROME_HEIGHT = 6;
+function TabbedListView({
+  title,
+  tabs,
+  activeTab,
+  onTabChange,
+  items,
+  searchEnabled = true,
+  searchPlaceholder = "Search...",
+  searchQuery = "",
+  onSearchChange,
+  onSearchSubmit,
+  onSelect,
+  onClose,
+  onBack,
+  footerHint,
+  isLoading = false,
+  loadingText = "Loading...",
+  emptyText = "No items found",
+  groupByCategory = false,
+  renderItem,
+  statusOverlay,
+  isActive = true,
+  showItemCount = true,
+  statusDismissHint,
+  multiSelect,
+  selectedIds,
+  onSelectionChange,
+  onMultiSelect,
+  multiSelectActionLabel
+}) {
+  const { rows } = useTerminalSize();
+  const visibleCount = Math.min(
+    8,
+    Math.max(3, rows - PROMPT_HEIGHT - CHROME_HEIGHT)
+  );
+  const [focusArea, setFocusArea] = useState(
+    searchEnabled ? "search" : "list"
+  );
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const filteredItems = useMemo(() => {
+    if (!searchQuery.trim()) return items;
+    const query = searchQuery.toLowerCase();
+    return items.filter(
+      (item) => item.label.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query) || item.category?.toLowerCase().includes(query)
+    );
+  }, [items, searchQuery]);
+  React.useEffect(() => {
+    setFocusedIndex(0);
+  }, [filteredItems.length, activeTab]);
+  const cycleTab = useCallback(
+    (direction) => {
+      const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+      let newIndex;
+      if (direction === "right") {
+        newIndex = (currentIndex + 1) % tabs.length;
+      } else {
+        newIndex = currentIndex - 1 < 0 ? tabs.length - 1 : currentIndex - 1;
+      }
+      onTabChange(tabs[newIndex].id);
+    },
+    [tabs, activeTab, onTabChange]
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      if (onSelect) {
+        onSelect(item);
+      }
+    },
+    [onSelect]
+  );
+  useInput(
+    (input, key) => {
+      if (statusOverlay && statusOverlay.type !== "loading") {
+        if (key.escape || key.return) {
+          onClose();
+        }
+        return;
+      }
+      if (statusOverlay) return;
+      if (key.escape) {
+        if (onBack) {
+          onBack();
+        } else {
+          onClose();
+        }
+        return;
+      }
+      if (key.tab) {
+        cycleTab(key.shift ? "left" : "right");
+        return;
+      }
+      if (focusArea === "tabs" || focusArea === "search") {
+        if (key.leftArrow) {
+          cycleTab("left");
+          return;
+        }
+        if (key.rightArrow) {
+          cycleTab("right");
+          return;
+        }
+      }
+      if (key.downArrow) {
+        if (focusArea === "search") {
+          setFocusArea("list");
+          return;
+        }
+        if (focusArea === "list" && filteredItems.length > 0) {
+          setFocusedIndex(
+            (prev) => prev < filteredItems.length - 1 ? prev + 1 : prev
+          );
+          return;
+        }
+      }
+      if (key.upArrow) {
+        if (focusArea === "list") {
+          if (focusedIndex > 0) {
+            setFocusedIndex((prev) => prev - 1);
+          } else if (searchEnabled) {
+            setFocusArea("search");
+          }
+          return;
+        }
+      }
+      if (key.return && focusArea === "search" && onSearchSubmit) {
+        onSearchSubmit(searchQuery);
+        return;
+      }
+      if (input === " " && multiSelect && focusArea === "list" && filteredItems.length > 0) {
+        const item = filteredItems[focusedIndex];
+        if (item && onSelectionChange) {
+          const isCurrentlySelected = selectedIds?.has(item.id) ?? false;
+          onSelectionChange(item.id, !isCurrentlySelected);
+        }
+        return;
+      }
+      if (input === "a" && multiSelect && focusArea === "list" && filteredItems.length > 0) {
+        if (onSelectionChange) {
+          const allSelected = filteredItems.every(
+            (item) => selectedIds?.has(item.id)
+          );
+          for (const item of filteredItems) {
+            onSelectionChange(item.id, !allSelected);
+          }
+        }
+        return;
+      }
+      if (key.return && focusArea === "list" && filteredItems.length > 0) {
+        if (multiSelect && selectedIds && selectedIds.size > 0 && onMultiSelect) {
+          const selectedItems = filteredItems.filter(
+            (item) => selectedIds.has(item.id)
+          );
+          if (selectedItems.length > 0) {
+            onMultiSelect(selectedItems);
+            return;
+          }
+        }
+        handleSelect(filteredItems[focusedIndex]);
+        return;
+      }
+      if (input === "/" && searchEnabled && focusArea !== "search") {
+        setFocusArea("search");
+        return;
+      }
+    },
+    { isActive }
+  );
+  const defaultHint = "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Tab/\u2190\u2192 Switch \xB7 Esc Close";
+  const multiSelectHint = "\u2191\u2193 Navigate \xB7 Space Select \xB7 a All \xB7 Enter Action \xB7 Tab Switch \xB7 Esc Close";
+  const displayHint = statusOverlay ? statusOverlay.type === "loading" ? "" : statusDismissHint || "Esc Close" : multiSelect ? selectedIds && selectedIds.size > 0 && multiSelectActionLabel ? `${multiSelectActionLabel} \xB7 ${footerHint || multiSelectHint}` : footerHint || multiSelectHint : footerHint || defaultHint;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: "100%" }, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      borderTop: true,
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+      borderColor: BRAND_GRADIENT.START,
+      borderStyle: "single",
+      width: "100%",
+      paddingX: 1,
+      flexDirection: "column"
+    },
+    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: BRAND_GRADIENT.START }, "\u25C6"), /* @__PURE__ */ React.createElement(Text, { bold: true, color: SEMANTIC_COLORS.secondary }, " ", title), showItemCount && !statusOverlay && filteredItems.length > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " (", filteredItems.length, ")")),
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(TabBar, { tabs, activeTab, onTabChange }))
+  ), /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderTop: false,
+      borderBottom: true,
+      borderLeft: false,
+      borderRight: false,
+      borderColor: BRAND_GRADIENT.START,
+      borderStyle: "single",
+      width: "100%",
+      paddingX: 1,
+      paddingY: 1
+    },
+    searchEnabled && !statusOverlay && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(
+      SearchInput,
+      {
+        value: searchQuery,
+        onChange: onSearchChange || (() => {
+        }),
+        placeholder: searchPlaceholder,
+        isActive: focusArea === "search"
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Box, { key: `content-${activeTab}`, flexDirection: "column" }, statusOverlay ? /* @__PURE__ */ React.createElement(
+      StatusOverlayContent,
+      {
+        type: statusOverlay.type,
+        message: statusOverlay.message
+      }
+    ) : isLoading ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(SimpleSpinner, null), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", loadingText)) : filteredItems.length === 0 ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, emptyText)) : /* @__PURE__ */ React.createElement(
+      ScrollableList,
+      {
+        items: filteredItems,
+        focusedIndex,
+        onFocusChange: setFocusedIndex,
+        onSelect: handleSelect,
+        visibleCount,
+        groupByCategory,
+        renderItem,
+        multiSelect,
+        selectedIds
+      }
+    )),
+    displayHint && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, displayHint))
+  ));
+}
+export {
+  TabbedListView
+};
+//# sourceMappingURL=TabbedListView.js.map

package/dist/components/TabbedListView/TabbedListView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/TabbedListView/TabbedListView.tsx"],
+  "sourcesContent": ["/**\n * TabbedListView Component\n *\n * A reusable component matching the /command suggestion UI pattern:\n * - Tab navigation (\u2190/\u2192 or Tab key)\n * - Search input (/ to focus)\n * - Scrollable list with \u25C6 selection indicator\n * - Brand gradient colors for selection\n * - Consistent height control (MAX_VISIBLE = 8)\n * - Status overlay for loading/success/error states (maintains frame)\n * - Back navigation support (onBack)\n *\n * Based on Claude Code CLI's /plugins UI pattern.\n */\n\nimport React, { useState, useCallback, useMemo } from 'react'\nimport { Box, Text, useInput } from 'ink'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport { TabBar } from './TabBar'\nimport { SearchInput } from './SearchInput'\nimport { ScrollableList } from './ScrollableList'\nimport { SimpleSpinner } from '@components/Spinner'\nimport { StatusOverlayContent } from '@components/StatusOverlayContent'\nimport { useTerminalSize } from '@hooks/useTerminalSize'\nimport type { TabbedListViewProps, ListItem } from './types'\n\ntype FocusArea = 'tabs' | 'search' | 'list'\n\n// Heights for dynamic visible count calculation\nconst PROMPT_HEIGHT = 5 // PromptInput borders + input + hints\nconst CHROME_HEIGHT = 6 // title + tabs + search + footer + borders\n\nexport function TabbedListView({\n  title,\n  tabs,\n  activeTab,\n  onTabChange,\n  items,\n  searchEnabled = true,\n  searchPlaceholder = 'Search...',\n  searchQuery = '',\n  onSearchChange,\n  onSearchSubmit,\n  onSelect,\n  onClose,\n  onBack,\n  footerHint,\n  isLoading = false,\n  loadingText = 'Loading...',\n  emptyText = 'No items found',\n  groupByCategory = false,\n  renderItem,\n  statusOverlay,\n  isActive = true,\n  showItemCount = true,\n  statusDismissHint,\n  multiSelect,\n  selectedIds,\n  onSelectionChange,\n  onMultiSelect,\n  multiSelectActionLabel,\n}: TabbedListViewProps) {\n  // Dynamic visible count based on terminal height\n  const { rows } = useTerminalSize()\n  const visibleCount = Math.min(\n    8,\n    Math.max(3, rows - PROMPT_HEIGHT - CHROME_HEIGHT),\n  )\n\n  // Focus state: which area is currently active\n  const [focusArea, setFocusArea] = useState<FocusArea>(\n    searchEnabled ? 'search' : 'list',\n  )\n\n  // Index of focused item in the list\n  const [focusedIndex, setFocusedIndex] = useState(0)\n\n  // Filter items based on search query\n  const filteredItems = useMemo(() => {\n    if (!searchQuery.trim()) return items\n\n    const query = searchQuery.toLowerCase()\n    return items.filter(\n      item =>\n        item.label.toLowerCase().includes(query) ||\n        item.description?.toLowerCase().includes(query) ||\n        item.category?.toLowerCase().includes(query),\n    )\n  }, [items, searchQuery])\n\n  // Reset focus index when items change\n  React.useEffect(() => {\n    setFocusedIndex(0)\n  }, [filteredItems.length, activeTab])\n\n  // Handle tab cycling\n  const cycleTab = useCallback(\n    (direction: 'left' | 'right') => {\n      const currentIndex = tabs.findIndex(t => t.id === activeTab)\n      let newIndex: number\n\n      if (direction === 'right') {\n        newIndex = (currentIndex + 1) % tabs.length\n      } else {\n        newIndex = currentIndex - 1 < 0 ? tabs.length - 1 : currentIndex - 1\n      }\n\n      onTabChange(tabs[newIndex].id)\n    },\n    [tabs, activeTab, onTabChange],\n  )\n\n  // Handle item selection\n  const handleSelect = useCallback(\n    (item: ListItem) => {\n      if (onSelect) {\n        onSelect(item)\n      }\n    },\n    [onSelect],\n  )\n\n  // Keyboard input handling\n  useInput(\n    (input, key) => {\n      // Status overlay: success/error \u2192 ESC/Enter closes\n      if (statusOverlay && statusOverlay.type !== 'loading') {\n        if (key.escape || key.return) {\n          onClose()\n        }\n        return\n      }\n\n      // Status overlay: loading \u2192 ignore all input\n      if (statusOverlay) return\n\n      // Escape: onBack if provided, else onClose\n      if (key.escape) {\n        if (onBack) {\n          onBack()\n        } else {\n          onClose()\n        }\n        return\n      }\n\n      // Tab key cycles through tabs\n      if (key.tab) {\n        cycleTab(key.shift ? 'left' : 'right')\n        return\n      }\n\n      // Left/Right arrows for tab navigation when in tabs or search area\n      if (focusArea === 'tabs' || focusArea === 'search') {\n        if (key.leftArrow) {\n          cycleTab('left')\n          return\n        }\n        if (key.rightArrow) {\n          cycleTab('right')\n          return\n        }\n      }\n\n      // Handle focus area navigation\n      if (key.downArrow) {\n        if (focusArea === 'search') {\n          setFocusArea('list')\n          return\n        }\n        if (focusArea === 'list' && filteredItems.length > 0) {\n          setFocusedIndex(prev =>\n            prev < filteredItems.length - 1 ? prev + 1 : prev,\n          )\n          return\n        }\n      }\n\n      if (key.upArrow) {\n        if (focusArea === 'list') {\n          if (focusedIndex > 0) {\n            setFocusedIndex(prev => prev - 1)\n          } else if (searchEnabled) {\n            setFocusArea('search')\n          }\n          return\n        }\n      }\n\n      // Enter in search: submit if onSearchSubmit provided\n      if (key.return && focusArea === 'search' && onSearchSubmit) {\n        onSearchSubmit(searchQuery)\n        return\n      }\n\n      // Space: toggle selection in multi-select mode\n      if (\n        input === ' ' &&\n        multiSelect &&\n        focusArea === 'list' &&\n        filteredItems.length > 0\n      ) {\n        const item = filteredItems[focusedIndex]\n        if (item && onSelectionChange) {\n          const isCurrentlySelected = selectedIds?.has(item.id) ?? false\n          onSelectionChange(item.id, !isCurrentlySelected)\n        }\n        return\n      }\n\n      // 'a': toggle select-all / deselect-all in multi-select mode\n      if (\n        input === 'a' &&\n        multiSelect &&\n        focusArea === 'list' &&\n        filteredItems.length > 0\n      ) {\n        if (onSelectionChange) {\n          const allSelected = filteredItems.every(item =>\n            selectedIds?.has(item.id),\n          )\n          for (const item of filteredItems) {\n            onSelectionChange(item.id, !allSelected)\n          }\n        }\n        return\n      }\n\n      // Enter: batch action if multi-select has selections, otherwise single select\n      if (key.return && focusArea === 'list' && filteredItems.length > 0) {\n        if (\n          multiSelect &&\n          selectedIds &&\n          selectedIds.size > 0 &&\n          onMultiSelect\n        ) {\n          const selectedItems = filteredItems.filter(item =>\n            selectedIds.has(item.id),\n          )\n          if (selectedItems.length > 0) {\n            onMultiSelect(selectedItems)\n            return\n          }\n        }\n        handleSelect(filteredItems[focusedIndex])\n        return\n      }\n\n      // '/' to focus search\n      if (input === '/' && searchEnabled && focusArea !== 'search') {\n        setFocusArea('search')\n        return\n      }\n    },\n    { isActive },\n  )\n\n  // Build footer hint based on current state\n  const defaultHint = '\u2191\u2193 Navigate \u00B7 Enter Select \u00B7 Tab/\u2190\u2192 Switch \u00B7 Esc Close'\n  const multiSelectHint =\n    '\u2191\u2193 Navigate \u00B7 Space Select \u00B7 a All \u00B7 Enter Action \u00B7 Tab Switch \u00B7 Esc Close'\n  const displayHint = statusOverlay\n    ? statusOverlay.type === 'loading'\n      ? ''\n      : statusDismissHint || 'Esc Close'\n    : multiSelect\n      ? selectedIds && selectedIds.size > 0 && multiSelectActionLabel\n        ? `${multiSelectActionLabel} \u00B7 ${footerHint || multiSelectHint}`\n        : footerHint || multiSelectHint\n      : footerHint || defaultHint\n\n  return (\n    <Box flexDirection=\"column\" width=\"100%\">\n      {/* Header bar with top border - mimics PromptInput separator */}\n      <Box\n        borderTop={true}\n        borderBottom={false}\n        borderLeft={false}\n        borderRight={false}\n        borderColor={BRAND_GRADIENT.START}\n        borderStyle=\"single\"\n        width=\"100%\"\n        paddingX={1}\n        flexDirection=\"column\"\n      >\n        {/* Title with brand color */}\n        <Box>\n          <Text color={BRAND_GRADIENT.START}>\u25C6</Text>\n          <Text bold color={SEMANTIC_COLORS.secondary}>\n            {' '}\n            {title}\n          </Text>\n          {showItemCount && !statusOverlay && filteredItems.length > 0 && (\n            <Text color={SEMANTIC_COLORS.dim}> ({filteredItems.length})</Text>\n          )}\n        </Box>\n\n        {/* Tab Bar - left aligned */}\n        <Box marginTop={1}>\n          <TabBar tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />\n        </Box>\n      </Box>\n\n      {/* Content container with bottom border */}\n      <Box\n        flexDirection=\"column\"\n        borderTop={false}\n        borderBottom={true}\n        borderLeft={false}\n        borderRight={false}\n        borderColor={BRAND_GRADIENT.START}\n        borderStyle=\"single\"\n        width=\"100%\"\n        paddingX={1}\n        paddingY={1}\n      >\n        {/* Search Input - hidden during status overlay */}\n        {searchEnabled && !statusOverlay && (\n          <Box marginBottom={1}>\n            <SearchInput\n              value={searchQuery}\n              onChange={onSearchChange || (() => {})}\n              placeholder={searchPlaceholder}\n              isActive={focusArea === 'search'}\n            />\n          </Box>\n        )}\n\n        {/* Content Area - key forces re-render on tab change */}\n        <Box key={`content-${activeTab}`} flexDirection=\"column\">\n          {statusOverlay ? (\n            <StatusOverlayContent\n              type={statusOverlay.type}\n              message={statusOverlay.message}\n            />\n          ) : isLoading ? (\n            <Box>\n              <SimpleSpinner />\n              <Text color={SEMANTIC_COLORS.dim}> {loadingText}</Text>\n            </Box>\n          ) : filteredItems.length === 0 ? (\n            <Box>\n              <Text color={SEMANTIC_COLORS.dim}>{emptyText}</Text>\n            </Box>\n          ) : (\n            <ScrollableList\n              items={filteredItems}\n              focusedIndex={focusedIndex}\n              onFocusChange={setFocusedIndex}\n              onSelect={handleSelect}\n              visibleCount={visibleCount}\n              groupByCategory={groupByCategory}\n              renderItem={renderItem}\n              multiSelect={multiSelect}\n              selectedIds={selectedIds}\n            />\n          )}\n        </Box>\n\n        {/* Footer Hint - compact style */}\n        {displayHint && (\n          <Box marginTop={1}>\n            <Text color={SEMANTIC_COLORS.muted}>{displayHint}</Text>\n          </Box>\n        )}\n      </Box>\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/TabbedListView/index.js

@@ -0,0 +1,11 @@
+import { TabbedListView } from "./TabbedListView.js";
+import { TabBar } from "./TabBar.js";
+import { SearchInput } from "./SearchInput.js";
+import { ScrollableList } from "./ScrollableList.js";
+export {
+  ScrollableList,
+  SearchInput,
+  TabBar,
+  TabbedListView
+};
+//# sourceMappingURL=index.js.map

package/dist/components/TabbedListView/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/TabbedListView/index.ts"],
+  "sourcesContent": ["/**\n * TabbedListView Component Exports\n *\n * A reusable tabbed list view component based on Claude Code CLI's /plugins pattern.\n */\n\nexport { TabbedListView } from './TabbedListView'\nexport { TabBar } from './TabBar'\nexport { SearchInput } from './SearchInput'\nexport { ScrollableList } from './ScrollableList'\nexport type {\n  TabbedListViewProps,\n  TabDefinition,\n  ListItem,\n  CategoryGroup,\n  TabBarProps,\n  SearchInputProps,\n  ScrollableListProps,\n} from './types'\n"],
+  "mappings": "AAMA,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;",
+  "names": []
+}

package/dist/components/TabbedListView/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/TabbedListView/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}