mixdog 0.9.174 → 1.0.0

package/src/tui/components/Picker.jsx

@@ -13,53 +13,24 @@
  *   Escape      — back/cancel
  *   Ctrl+C      — handled globally for selection copy
  */
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import stringWidth from 'string-width';
 import { theme } from '../theme.mjs';
 import { ConfirmBar, clampConfirmFocus } from './ConfirmBar.jsx';
-import { truncatePanelText as truncateText, padPanelCells as padCells } from './panel-cell-text.mjs';
-
-/** Max items visible at once before scrolling kicks in. */
-const MAX_VISIBLE = 8;
-const DEFAULT_LABEL_WIDTH = 28;
-const SELECT_HELP = '↑/↓ Select · Enter Choose · Esc Back';
-const ADJUST_HELP = '↑/↓ Select · ←/→ Adjust · Enter Choose · Esc Back';
-const CONFIRM_HELP = '↑/↓ Select · ←/→ Back/Next · Enter Choose · Esc Skip';
-
-function clampLabelWidth(value, columns) {
-  const maxWidth = Math.max(12, Math.floor(columns * 0.45));
-  return Math.max(1, Math.min(Number(value) || DEFAULT_LABEL_WIDTH, maxWidth));
-}
-
-/** A requested row index clamped into the item list (0 for an empty list). */
-function clampItemIndex(index, itemCount) {
-  return Math.max(0, Math.min(Number(index) || 0, Math.max(0, itemCount - 1)));
-}
-
-function clampMetaWidth(value, columns, labelWidth) {
-  const available = Math.max(0, columns - labelWidth - 16);
-  const requested = Number(value) || 24;
-  return Math.max(0, Math.min(requested, available));
-}
-
-function normalizeFooterLines(activeFooter, columns) {
-  let rawLines = activeFooter;
-  if (!Array.isArray(rawLines)) rawLines = activeFooter ? [activeFooter] : [];
-  return rawLines
-    .map((line) => {
-      const isObject = line && typeof line === 'object';
-      const glyph = isObject ? String(line.glyph || '') : '';
-      const color = isObject ? line.color || theme.panelTitle : theme.text;
-      const text = isObject ? String(line.text || '') : String(line || '');
-      return {
-        glyph,
-        color,
-        text: truncateText(text, Math.max(0, columns - (glyph ? 7 : 4))),
-      };
-    })
-    .filter((line) => line.glyph || line.text);
-}
+import { truncatePanelText as truncateText } from './panel-cell-text.mjs';
+import { PickerItemRow } from './picker/PickerItemRow.jsx';
+import {
+  ADJUST_HELP,
+  CONFIRM_HELP,
+  DEFAULT_LABEL_WIDTH,
+  MAX_VISIBLE,
+  SELECT_HELP,
+  clampLabelWidth,
+  clampMetaWidth,
+  normalizeFooterLines,
+} from './picker/picker-layout.mjs';
+import { usePickerInput } from './picker/use-picker-input.mjs';
+import { usePickerSelection } from './picker/use-picker-selection.mjs';
 
 export function Picker({
   items,
@@ -96,65 +67,15 @@ export function Picker({
   themeEpoch = 0,
 }) {
   const visibleLimit = Math.max(1, Math.floor(Number(visibleCount) || MAX_VISIBLE));
-  const [selectedIndex, setSelectedIndex] = useState(() => clampItemIndex(initialIndex, items.length));
   const confirmButtons = Array.isArray(confirmBar?.buttons) ? confirmBar.buttons.filter(Boolean) : [];
   const hasConfirm = confirmButtons.length > 0;
-  // -1 = list focus; 0..n-1 = confirm-bar button focus.
-  const [confirmFocus, setConfirmFocus] = useState(-1);
-  const lastTabAtRef = useRef(0);
-  useEffect(() => {
-    // Reset to list focus whenever the bar identity/shape changes (step switch).
-    setConfirmFocus(-1);
-  }, [confirmButtons.length, confirmBar]);
-
-  // Selection stability across owner-driven reopens: command pickers
-  // (settings/hooks/skills/channels toggles) rebuild their item list and call
-  // repaint the surface on every ←/→ toggle. Follow the previously selected
-  // item's `value` into the new list instead of snapping back to row 0.
-  // (useState-backed ref: mutation must never trigger a re-render.)
-  const [selectionMemo] = useState(() => ({ value: null, initialIndex }));
-  useEffect(() => {
-    const item = items[selectedIndex];
-    if (item && item.value != null) selectionMemo.value = item.value;
-  }, [items, selectedIndex, selectionMemo]);
-
-  useEffect(() => {
-    setSelectedIndex((i) => {
-      if (selectionMemo.value != null) {
-        const found = items.findIndex((entry) => entry && entry.value === selectionMemo.value);
-        if (found >= 0) return found;
-        // Previous selection no longer exists — this is a different picker
-        // (or the row was removed). Start from the owner's initialIndex/top
-        // instead of carrying a stale row number across picker transitions.
-        selectionMemo.value = null;
-        return clampItemIndex(initialIndex, items.length);
-      }
-      return Math.min(Math.max(0, i), Math.max(0, items.length - 1));
-    });
-  }, [items, selectionMemo, initialIndex]);
-
-  useEffect(() => {
-    // Explicit highlight target: honor initialIndex only when the owner
-    // actually provides a *new* one. A reopen that drops initialIndex
-    // (prop -> null default) must not reset the user's position to row 0.
-    if (initialIndex == null) {
-      selectionMemo.initialIndex = null;
-      return;
-    }
-    if (selectionMemo.initialIndex === initialIndex) return;
-    selectionMemo.initialIndex = initialIndex;
-    setSelectedIndex(clampItemIndex(initialIndex, items.length));
-  }, [initialIndex, items.length, selectionMemo]);
-
-  // Live-preview hook: notify the owner whenever the highlighted row changes
-  // (arrow keys, paging, initial mount). The /theme picker uses this to apply a
-  // non-persisted palette preview as the selection moves. Kept side-effect-free
-  // for pickers that do not pass onHighlight.
-  useEffect(() => {
-    if (typeof onHighlight !== 'function') return;
-    const item = items[selectedIndex];
-    if (item) onHighlight(item.value, item, selectedIndex);
-  }, [onHighlight, items, selectedIndex]);
+  const { selectedIndex, setSelectedIndex, confirmFocus, setConfirmFocus, lastTabAtRef } = usePickerSelection({
+    items,
+    initialIndex,
+    onHighlight,
+    confirmButtons,
+    confirmBar,
+  });
 
   const activeFooter = typeof footer === 'function' ? footer(items[selectedIndex], selectedIndex) : footer;
   const confirmInlineWidth = confirmButtons.reduce(
@@ -179,149 +100,24 @@ export function Picker({
     <ConfirmBar buttons={confirmButtons} focusedIndex={clampConfirmFocus(confirmFocus, confirmButtons.length)} />
   ) : null;
 
-  useInput(
-    useCallback(
-      (input, key) => {
-        if (key.upArrow) {
-          // Single vertical loop over [list items...] + [confirm buttons...].
-          if (hasConfirm) {
-            const last = items.length - 1;
-            if (confirmFocus > 0) {
-              setConfirmFocus((f) => f - 1);
-              return;
-            }
-            if (confirmFocus === 0) {
-              setConfirmFocus(-1);
-              setSelectedIndex(Math.max(0, last));
-              return;
-            }
-            // list focus: first row ↑ → last confirm button.
-            if (items.length === 0 || selectedIndex === 0) {
-              setConfirmFocus(confirmButtons.length - 1);
-              return;
-            }
-            setSelectedIndex((i) => i - 1);
-            return;
-          }
-          setSelectedIndex((i) => {
-            const total = items.length;
-            return total > 0 ? (i - 1 + total) % total : 0;
-          });
-          return;
-        }
-        if (key.downArrow) {
-          if (hasConfirm) {
-            const last = items.length - 1;
-            const lastBtn = confirmButtons.length - 1;
-            if (confirmFocus >= 0) {
-              if (confirmFocus < lastBtn) {
-                setConfirmFocus((f) => f + 1);
-                return;
-              }
-              // last button ↓ → first list row.
-              setConfirmFocus(-1);
-              setSelectedIndex(0);
-              return;
-            }
-            // list focus: last row ↓ → first confirm button.
-            if (items.length === 0 || selectedIndex === last) {
-              setConfirmFocus(0);
-              return;
-            }
-            setSelectedIndex((i) => i + 1);
-            return;
-          }
-          setSelectedIndex((i) => {
-            const total = items.length;
-            return total > 0 ? (i + 1) % total : 0;
-          });
-          return;
-        }
-        if (key.pageUp) {
-          setSelectedIndex((i) => Math.max(0, i - effectiveVisibleLimit));
-          return;
-        }
-        if (key.pageDown) {
-          setSelectedIndex((i) => Math.min(items.length - 1, i + effectiveVisibleLimit));
-          return;
-        }
-        if (key.home) {
-          setSelectedIndex(0);
-          return;
-        }
-        if (key.end) {
-          setSelectedIndex(items.length - 1);
-          return;
-        }
-        if (key.leftArrow) {
-          if (hasConfirm) {
-            setConfirmFocus((f) => (f <= 0 ? -1 : f - 1));
-            return;
-          }
-          if (onLeft) onLeft(items[selectedIndex], selectedIndex);
-          return;
-        }
-        if (key.rightArrow) {
-          if (hasConfirm) {
-            setConfirmFocus((f) => (f < 0 ? 0 : Math.min(confirmButtons.length - 1, f + 1)));
-            return;
-          }
-          if (onRight) onRight(items[selectedIndex], selectedIndex);
-          return;
-        }
-        if (key.tab || input === '\t') {
-          const now = Date.now();
-          if (now - lastTabAtRef.current < 120) return;
-          lastTabAtRef.current = now;
-          if (hasConfirm) {
-            setConfirmFocus((f) => {
-              if (f < 0) return 0;
-              return f + 1 > confirmButtons.length - 1 ? -1 : f + 1;
-            });
-            return;
-          }
-          if (onTab) onTab(items[selectedIndex], selectedIndex);
-          return;
-        }
-        if (key.return) {
-          if (hasConfirm && confirmFocus >= 0) {
-            const button = confirmButtons[confirmFocus];
-            if (button && confirmBar?.onConfirm) confirmBar.onConfirm(button, confirmFocus);
-            return;
-          }
-          const selected = items[selectedIndex];
-          if (selected && onSelect) onSelect(selected.value, selected);
-          return;
-        }
-        if (key.escape) {
-          onCancel();
-          return;
-        }
-        if (key.ctrl && (input === 'c' || input === 'C')) {
-          return;
-        }
-        if (onKey) {
-          onKey(input, key, items[selectedIndex], selectedIndex);
-          return;
-        }
-      },
-      [
-        items,
-        selectedIndex,
-        onSelect,
-        onCancel,
-        onLeft,
-        onRight,
-        onTab,
-        onKey,
-        effectiveVisibleLimit,
-        hasConfirm,
-        confirmFocus,
-        confirmButtons,
-        confirmBar,
-      ]
-    )
-  );
+  usePickerInput({
+    items,
+    selectedIndex,
+    setSelectedIndex,
+    confirmFocus,
+    setConfirmFocus,
+    lastTabAtRef,
+    onSelect,
+    onCancel,
+    onLeft,
+    onRight,
+    onTab,
+    onKey,
+    effectiveVisibleLimit,
+    hasConfirm,
+    confirmButtons,
+    confirmBar,
+  });
 
   // Standard panel rhythm: title row, blank, description/hint row, blank,
   // content. Description newlines are collapsed and width-truncated to a single
@@ -428,7 +224,7 @@ export function Picker({
             else marker = item.checked === false ? ' ' : '';
           }
           return (
-            <ItemRow
+            <PickerItemRow
               key={item.value}
               indexText={showIndex ? `${idx + 1}.` : ''}
               indexWidth={indexWidth}
@@ -484,80 +280,3 @@ export function Picker({
     </Box>
   );
 }
-
-const ItemRow = React.memo(function ItemRow({
-  indexText,
-  indexWidth,
-  marker,
-  markerColor,
-  markerWidth,
-  label,
-  labelSuffix,
-  labelSuffixColor,
-  meta,
-  metaParts,
-  description,
-  labelWidth,
-  metaWidth,
-  descriptionWidth,
-  showMeta,
-  isSelected,
-  themeEpoch: _themeEpoch = 0,
-}) {
-  const rowText = isSelected ? theme.selectionText : theme.text;
-  const rowIndexColor = isSelected ? theme.selectionText : theme.subtle;
-  const rawSuffix = String(labelSuffix || '');
-  const suffix = rawSuffix ? truncateText(rawSuffix, labelWidth) : '';
-  const suffixGap = suffix && stringWidth(suffix) < labelWidth ? ' ' : '';
-  const suffixWidth = suffix ? stringWidth(suffixGap) + stringWidth(suffix) : 0;
-  const displayMarker = truncateText(marker, markerWidth);
-  const displayLabel = truncateText(label, Math.max(0, labelWidth - suffixWidth));
-  const labelPadding = ' '.repeat(Math.max(0, labelWidth - stringWidth(displayLabel) - suffixWidth));
-  const displayMeta = truncateText(meta, metaWidth);
-  const displayDescription = truncateText(description, descriptionWidth);
-  const parts = Array.isArray(metaParts) ? metaParts : null;
-  let rowMarkerColor = rowText;
-  if (markerWidth > 0) {
-    if (isSelected) rowMarkerColor = theme.selectionText;
-    else if (marker) rowMarkerColor = markerColor || theme.success;
-  }
-  const suffixColor = isSelected ? theme.selectionText : labelSuffixColor || theme.success;
-  let metaText = '';
-  if (showMeta) {
-    metaText = parts
-      ? padCells(
-          parts
-            .map((part) => padCells(truncateText(part?.text || '', Number(part?.width) || 1), Number(part?.width) || 1))
-            .join('  '),
-          metaWidth
-        )
-      : padCells(displayMeta, metaWidth);
-  }
-
-  return (
-    <Box flexDirection="row" width="100%" backgroundColor={isSelected ? theme.selectionBackground : undefined}>
-      {indexWidth > 0 ? <Text color={rowIndexColor}>{padCells(indexText, indexWidth)} </Text> : null}
-      {markerWidth > 0 ? <Text color={rowMarkerColor}>{padCells(displayMarker, markerWidth)}</Text> : null}
-      <Text color={rowText}>{displayLabel}</Text>
-      {suffix ? (
-        <Text color={suffixColor}>
-          {suffixGap}
-          {suffix}
-        </Text>
-      ) : null}
-      <Text color={rowText}>{labelPadding}</Text>
-      {showMeta ? (
-        <Text color={rowText}>
-          {'  '}
-          {metaText}
-        </Text>
-      ) : null}
-      {displayDescription ? (
-        <Text color={rowText}>
-          {'  '}
-          {displayDescription}
-        </Text>
-      ) : null}
-    </Box>
-  );
-});