termcast 1.3.32 → 1.3.34

package/dist/examples/internal/custom-renderable-list-v2.js

@@ -0,0 +1,708 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+/**
+ * Custom Renderable List V2 - Wrapper Pattern
+ *
+ * This example uses opentui's extend() to register thin wrapper renderables
+ * that handle tracking and visibility, while React handles all UI rendering.
+ *
+ * ## Architecture
+ *
+ * CustomListRenderable (custom renderable)
+ * ├── owns: filtering logic, navigation, scrolling
+ * ├── children redirected to scrollBox
+ * │
+ * └── CustomListItemWrapperRenderable (thin wrapper)
+ *     ├── tracks: keywords, onAction, section, visibleIndex, itemId
+ *     ├── handles: visibility (height: 0 when hidden)
+ *     └── React children render all UI (indicator, title, subtitle)
+ *
+ * ## Key Patterns
+ *
+ * 1. Wrapper renderables self-register via onLifecyclePass (SYNC)
+ * 2. All UI in JSX - wrappers only track/hide
+ * 3. Zustand store for React state (selectedIndex, visibleCount, searchQuery)
+ * 4. Renderable calls zustand.setState to trigger React re-renders
+ * 5. Items compare visibleIndex to selectedIndex from zustand
+ *
+ * ## Phase 1: Bidirectional Selection Sync
+ *
+ * - `selectedItemId` prop on List controls selection by item id
+ * - `onSelectionChange` callback fires when selection changes
+ * - Supports both controlled (via prop) and uncontrolled (internal) selection
+ *
+ * ## Phase 2: Detail Panel Support
+ *
+ * - `isShowingDetail` prop on List enables detail panel on the right
+ * - `detail` prop on Item provides React node to render in detail panel
+ * - Detail updates automatically when selection changes
+ * - List splits into two columns when detail is shown
+ *
+ * ## How React Props Work with opentui Renderables
+ *
+ * React props are applied via direct property assignment, NOT just constructor:
+ *
+ * 1. `createInstance()` - constructor called (props passed in options)
+ * 2. `setInitialProperties()` - iterates props, does `instance[propKey] = propValue`
+ * 3. `commitUpdate()` - on re-render, applies changed props via `instance[propKey] = propValue`
+ *
+ * This means:
+ * - Props don't need to be read from constructor options - React sets them after
+ * - Simple props (just stored/read later) can be public fields
+ * - Props that need side effects on change require setters
+ * - Constructor should just create the renderable structure
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * ## Migration Notes (Lessons from Form conversion)
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * ### 1. Registration Order ≠ Visual Order
+ *
+ * IMPORTANT: `onLifecyclePass` is called in tree traversal order, which may NOT
+ * match the visual/React render order. For Form, we solved this by sorting
+ * fields by y-position instead of registration order:
+ *
+ * ```typescript
+ * private getFieldOrder(): string[] {
+ *   return Array.from(this.fields.values())
+ *     .sort((a, b) => (a.elementRef?.y ?? 0) - (b.elementRef?.y ?? 0))
+ *     .map((f) => f.id)
+ * }
+ * ```
+ *
+ * For List, this is less critical since items use visibleIndex from filtering,
+ * but be aware if you need stable ordering based on visual position.
+ *
+ * ### 2. Auto-Focus Pattern
+ *
+ * Don't auto-focus in registerField() - registration order is unpredictable.
+ * Instead, use React useEffect that runs until focus is set:
+ *
+ * ```typescript
+ * useEffect(() => {
+ *   if (focusedField) return
+ *   const firstId = formRef.current?.getFirstFieldId()
+ *   if (firstId) formRef.current?.focusField(firstId)
+ * })
+ * ```
+ *
+ * ### 3. Hybrid Approach - Keep React for Styling
+ *
+ * The renderable should only handle STATE (registry, focus, scroll).
+ * Keep existing React components for UI (e.g., WithLeftBorder for Form).
+ * This ensures visual output stays identical - only the wiring changes.
+ *
+ * ### 4. Focus State Sync to React
+ *
+ * Form uses `onFocusChange` callback to sync focus to React state:
+ *
+ * ```typescript
+ * // In FormRenderable
+ * public onFocusChange?: (fieldId: string | null) => void
+ *
+ * focusField(id: string) {
+ *   this._focusedFieldId = id
+ *   this.onFocusChange?.(id)  // Notify React
+ * }
+ *
+ * // In Form component
+ * const handleFormRef = (ref: FormRenderable | null) => {
+ *   formRef.current = ref
+ *   if (ref) ref.onFocusChange = setFocusedField
+ * }
+ * ```
+ *
+ * This example uses zustand instead (setState triggers re-render).
+ * Both patterns work - zustand is simpler for shared state.
+ *
+ * ### 5. Legacy Compatibility
+ *
+ * When migrating, keep old descendants/context during transition:
+ *
+ * ```typescript
+ * // Keep old system for components not yet migrated
+ * const { DescendantsProvider, useDescendant } = createDescendants<...>()
+ * export { useDescendant }  // Still exported for old components
+ * ```
+ *
+ * ### 6. Field Component Changes
+ *
+ * Each field component needs minimal changes:
+ * - Remove: useFormFieldDescendant() call, elementRef
+ * - Add: wrap return in <termcast-form-field-wrapper fieldId={id}>
+ * - Keep: all UI code (WithLeftBorder, etc.) unchanged
+ *
+ * ### 7. Testing Strategy
+ *
+ * Run existing tests with -u to update snapshots. Visual output should be
+ * identical - if tests fail, the wiring is wrong, not the rendering.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+import { BoxRenderable, TextRenderable, ScrollBoxRenderable, TextareaRenderable, } from '@opentui/core';
+import { extend, useKeyboard } from '@opentui/react';
+import { useIsInFocus } from 'termcast/src/internal/focus-context';
+import { useStore } from 'termcast/src/state';
+import { useRef, useState } from 'react';
+import { renderWithProviders } from '../../utils';
+import { create } from 'zustand';
+import { useTheme } from 'termcast/src/theme';
+const useCustomListStore = create(() => ({
+    selectedIndex: 0,
+    visibleCount: 0,
+    totalCount: 0,
+    searchQuery: '',
+    itemStates: {},
+    selectedItemId: null,
+    isShowingDetail: false,
+    currentDetailNode: null,
+}));
+// ─────────────────────────────────────────────────────────────────────────────
+// Helper: Find parent of specific type by traversing up
+// ─────────────────────────────────────────────────────────────────────────────
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function findParent(node, type) {
+    let current = node.parent;
+    while (current) {
+        if (current instanceof type) {
+            return current;
+        }
+        current = current.parent;
+    }
+    return undefined;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// CustomListItemWrapperRenderable - thin wrapper for tracking/hiding
+// ─────────────────────────────────────────────────────────────────────────────
+class CustomListItemWrapperRenderable extends BoxRenderable {
+    parentList;
+    // Props set by React - used for filtering
+    keywords;
+    onAction;
+    itemTitle = '';
+    itemSubtitle;
+    itemId; // Phase 1: unique id for controlled selection
+    detail; // Phase 2: detail panel content
+    // Set by parent during refilter
+    visibleIndex = -1;
+    section;
+    constructor(ctx, options) {
+        super(ctx, { ...options, flexDirection: 'row', width: '100%' });
+        // NO UI creation - React children provide that
+        // Self-register with parent list after being added to tree
+        this.onLifecyclePass = () => {
+            if (!this.parentList) {
+                this.parentList = findParent(this, CustomListRenderable);
+                this.section = findParent(this, CustomListSectionWrapperRenderable);
+                this.parentList?.registerItem(this);
+            }
+        };
+        // Example: register click handler directly on renderable
+        this.onMouseDown = (event) => {
+            console.log('CustomListItemWrapperRenderable clicked:', this.itemTitle, event);
+        };
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// CustomListSectionWrapperRenderable - thin wrapper for sections
+// ─────────────────────────────────────────────────────────────────────────────
+class CustomListSectionWrapperRenderable extends BoxRenderable {
+    parentList;
+    // Props set by React
+    sectionTitle;
+    constructor(ctx, options) {
+        super(ctx, { ...options, flexDirection: 'column', width: '100%' });
+        // NO UI creation - React children provide that
+        // Self-register with parent list after being added to tree
+        this.onLifecyclePass = () => {
+            if (!this.parentList) {
+                this.parentList = findParent(this, CustomListRenderable);
+                this.parentList?.registerSection(this);
+            }
+        };
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// CustomListEmptyViewWrapperRenderable - data holder for empty state
+// ─────────────────────────────────────────────────────────────────────────────
+class CustomListEmptyViewWrapperRenderable extends BoxRenderable {
+    parentList;
+    // Props set by React - read by parent for empty state
+    emptyTitle = 'No items';
+    emptyDescription;
+    constructor(ctx, options) {
+        // Hidden by default - this is just a data holder
+        super(ctx, { ...options, visible: false });
+        // Self-register with parent list after being added to tree
+        this.onLifecyclePass = () => {
+            if (!this.parentList) {
+                this.parentList = findParent(this, CustomListRenderable);
+                this.parentList?.registerEmptyView(this);
+            }
+        };
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// CustomListRenderable - parent container with filtering/navigation logic
+// ─────────────────────────────────────────────────────────────────────────────
+class CustomListRenderable extends BoxRenderable {
+    // Registered children (they register themselves via onLifecyclePass)
+    registeredItems = new Set();
+    registeredSections = new Set();
+    emptyView;
+    // Internal state
+    searchQuery = '';
+    // UI components owned by renderable
+    scrollBox;
+    searchInput;
+    statusText;
+    // Prop with setter - updates search input placeholder
+    _placeholder = 'Search...';
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.searchInput.placeholder = value;
+    }
+    // Prop with setter - sets initial search query
+    _defaultSearchQuery = '';
+    get defaultSearchQuery() {
+        return this._defaultSearchQuery;
+    }
+    set defaultSearchQuery(value) {
+        if (this._defaultSearchQuery === value)
+            return;
+        this._defaultSearchQuery = value;
+        // Set search input text
+        this.searchInput.editBuffer?.setText(value);
+        this.searchQuery = value;
+        // Refilter will be called after items register
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Phase 1: Bidirectional Selection Sync
+    // ─────────────────────────────────────────────────────────────────────────
+    // Callback when selection changes - set by React
+    onSelectionChange;
+    // Controlled selection by item id
+    _selectedItemId = null;
+    get selectedItemId() {
+        return this._selectedItemId;
+    }
+    set selectedItemId(value) {
+        if (this._selectedItemId === value)
+            return;
+        this._selectedItemId = value;
+        // Find item with this id and update selectedIndex
+        if (value !== null) {
+            const item = this.getAllItems().find((i) => i.itemId === value);
+            if (item && item.visibleIndex !== -1) {
+                useCustomListStore.setState({
+                    selectedIndex: item.visibleIndex,
+                    selectedItemId: value,
+                });
+                this.scrollToIndex(item.visibleIndex);
+            }
+        }
+    }
+    // Helper to notify selection change
+    notifySelectionChange(index) {
+        const item = this.getAllItems().find((i) => i.visibleIndex === index);
+        const itemId = item?.itemId ?? null;
+        useCustomListStore.setState({ selectedItemId: itemId });
+        this.onSelectionChange?.(itemId);
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Phase 2: Detail Panel Support
+    // ─────────────────────────────────────────────────────────────────────────
+    // Prop with setter - controls whether detail panel is shown
+    _isShowingDetail = false;
+    get isShowingDetail() {
+        return this._isShowingDetail;
+    }
+    set isShowingDetail(value) {
+        if (this._isShowingDetail === value)
+            return;
+        this._isShowingDetail = value;
+        useCustomListStore.setState({ isShowingDetail: value });
+        this.updateCurrentDetail();
+    }
+    // Updates the current detail node in zustand based on selected item
+    updateCurrentDetail() {
+        if (!this._isShowingDetail) {
+            useCustomListStore.setState({ currentDetailNode: null });
+            return;
+        }
+        const { selectedIndex } = useCustomListStore.getState();
+        const item = this.getAllItems().find((i) => i.visibleIndex === selectedIndex);
+        useCustomListStore.setState({ currentDetailNode: item?.detail ?? null });
+    }
+    constructor(ctx, options) {
+        super(ctx, { ...options, flexDirection: 'column' });
+        // Create search input - React will set placeholder/defaultSearchQuery props after constructor
+        this.searchInput = new TextareaRenderable(ctx, {
+            placeholder: 'Search...',
+            height: 1,
+            width: '100%',
+            keyBindings: [
+                { name: 'return', action: 'submit' },
+                { name: 'linefeed', action: 'submit' },
+            ],
+        });
+        this.searchInput.onContentChange = () => {
+            const value = this.searchInput.editBuffer?.getText() || '';
+            this.setSearchQuery(value);
+        };
+        this.searchInput.focus();
+        this.scrollBox = new ScrollBoxRenderable(ctx, {
+            flexGrow: 1,
+            flexDirection: 'column',
+        });
+        this.statusText = new TextRenderable(ctx, {
+            content: '0 items',
+        });
+        super.add(this.searchInput);
+        super.add(this.scrollBox);
+        super.add(this.statusText);
+        // Example: register key handler directly on renderable (logs all key presses)
+        this.onKeyDown = (key) => {
+            console.log('CustomListRenderable received key:', key.name, key);
+        };
+        // Subscribe to zustand store for defaultSearchQuery sync
+        // When React sets defaultSearchQuery prop, we need to refilter
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Child Management - redirect to scrollBox
+    // ─────────────────────────────────────────────────────────────────────────
+    add(child, index) {
+        return this.scrollBox.add(child, index);
+    }
+    insertBefore(child, anchor) {
+        return this.scrollBox.insertBefore(child, anchor);
+    }
+    remove(id) {
+        this.scrollBox.remove(id);
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Registration - children call these via onLifecyclePass
+    // ─────────────────────────────────────────────────────────────────────────
+    registerItem(item) {
+        this.registeredItems.add(item);
+        this.refilter();
+    }
+    registerSection(section) {
+        this.registeredSections.add(section);
+    }
+    registerEmptyView(emptyView) {
+        this.emptyView = emptyView;
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Filtering
+    // ─────────────────────────────────────────────────────────────────────────
+    setSearchQuery(query) {
+        if (this.searchQuery === query)
+            return;
+        this.searchQuery = query;
+        this.refilter();
+    }
+    refilter() {
+        const query = this.searchQuery.toLowerCase();
+        const allItems = this.getAllItems();
+        let visibleIndex = 0;
+        // Update item visibility and visible indices
+        // We use the `visible` prop instead of conditional rendering to keep elements
+        // in the tree - this preserves registration order and visibleIndex for navigation
+        const itemStates = {};
+        for (const item of allItems) {
+            const matches = !query || this.scoreItem(item, query) > 0;
+            item.visible = matches;
+            item.visibleIndex = matches ? visibleIndex++ : -1;
+            // Store in itemStates for React to subscribe to
+            if (item.itemId) {
+                itemStates[item.itemId] = { visibleIndex: item.visibleIndex };
+            }
+        }
+        // Update section visibility based on their items
+        for (const section of this.registeredSections) {
+            const sectionItems = allItems.filter((item) => item.section === section);
+            const hasVisibleItems = sectionItems.some((item) => item.visible);
+            section.visible = hasVisibleItems;
+        }
+        // Get current selection and clamp it
+        const { selectedIndex } = useCustomListStore.getState();
+        let newSelectedIndex = Math.max(0, Math.min(selectedIndex, Math.max(0, visibleIndex - 1)));
+        // Phase 1: Apply controlled selection if set
+        // This handles the case where selectedItemId is set before items register
+        if (this._selectedItemId !== null) {
+            const targetItem = allItems.find((i) => i.itemId === this._selectedItemId);
+            if (targetItem && targetItem.visibleIndex !== -1) {
+                newSelectedIndex = targetItem.visibleIndex;
+            }
+        }
+        // Update zustand store - triggers React re-render
+        // itemStates allows each item to subscribe to its own visibleIndex
+        const finalSelectedIndex = visibleIndex > 0 ? newSelectedIndex : 0;
+        useCustomListStore.setState({
+            searchQuery: this.searchQuery,
+            visibleCount: visibleIndex,
+            totalCount: allItems.length,
+            selectedIndex: finalSelectedIndex,
+            selectedItemId: this._selectedItemId,
+            itemStates,
+        });
+        // Update status text (owned by renderable, not React)
+        this.updateStatusText(visibleIndex, allItems.length, this.searchQuery);
+        // Phase 2: Update detail panel after filtering (handles initial render and filter changes)
+        this.updateCurrentDetail();
+    }
+    scoreItem(item, query) {
+        let score = 0;
+        const title = item.itemTitle.toLowerCase();
+        if (title.includes(query)) {
+            score += title.startsWith(query) ? 2 : 1;
+        }
+        if (item.itemSubtitle?.toLowerCase().includes(query)) {
+            score += 0.6;
+        }
+        for (const kw of item.keywords || []) {
+            if (kw.toLowerCase().includes(query)) {
+                score += 0.3;
+            }
+        }
+        return score;
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Helpers - clean stale refs
+    // ─────────────────────────────────────────────────────────────────────────
+    isConnected(node) {
+        let current = node.parent;
+        while (current) {
+            if (current === this.scrollBox || current === this) {
+                return true;
+            }
+            current = current.parent;
+        }
+        return false;
+    }
+    getAllItems() {
+        // Clean stale refs (items no longer in tree)
+        for (const item of this.registeredItems) {
+            if (!this.isConnected(item)) {
+                this.registeredItems.delete(item);
+            }
+        }
+        return Array.from(this.registeredItems);
+    }
+    updateStatusText(visibleCount, totalCount, searchQuery) {
+        this.statusText.content = searchQuery
+            ? `${visibleCount} of ${totalCount} items • Searching: "${searchQuery}"`
+            : `${visibleCount} of ${totalCount} items`;
+    }
+    // ─────────────────────────────────────────────────────────────────────────
+    // Navigation - called by React via ref
+    // ─────────────────────────────────────────────────────────────────────────
+    moveSelection(delta) {
+        const { selectedIndex, visibleCount } = useCustomListStore.getState();
+        if (visibleCount === 0)
+            return;
+        const newIndex = (selectedIndex + delta + visibleCount) % visibleCount;
+        useCustomListStore.setState({ selectedIndex: newIndex });
+        this.scrollToIndex(newIndex);
+        // Phase 1: Notify selection change
+        this.notifySelectionChange(newIndex);
+        // Phase 2: Update detail panel
+        this.updateCurrentDetail();
+    }
+    scrollToIndex(index) {
+        const item = this.getAllItems().find((i) => i.visibleIndex === index);
+        if (!item)
+            return;
+        const itemY = item.y;
+        const scrollBoxY = this.scrollBox.content.y;
+        const viewportHeight = this.scrollBox.viewport?.height || 10;
+        const relativeY = itemY - scrollBoxY;
+        const targetScrollTop = relativeY - Math.floor(viewportHeight / 2);
+        this.scrollBox.scrollTop = Math.max(0, targetScrollTop);
+    }
+    activateSelected() {
+        const { selectedIndex } = useCustomListStore.getState();
+        const item = this.getAllItems().find((i) => i.visibleIndex === selectedIndex);
+        item?.onAction?.();
+    }
+    // Get selected item's title - for dialog display
+    getSelectedItemTitle() {
+        const { selectedIndex } = useCustomListStore.getState();
+        const item = this.getAllItems().find((i) => i.visibleIndex === selectedIndex);
+        return item?.itemTitle;
+    }
+    // Get empty view data - for React to render
+    getEmptyViewData() {
+        if (!this.emptyView)
+            return undefined;
+        return {
+            title: this.emptyView.emptyTitle,
+            description: this.emptyView.emptyDescription,
+        };
+    }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Register with opentui
+// ─────────────────────────────────────────────────────────────────────────────
+extend({
+    'custom-list-v2': CustomListRenderable,
+    'custom-list-item-wrapper-v2': CustomListItemWrapperRenderable,
+    'custom-list-section-wrapper-v2': CustomListSectionWrapperRenderable,
+    'custom-list-empty-view-wrapper-v2': CustomListEmptyViewWrapperRenderable,
+});
+// ─────────────────────────────────────────────────────────────────────────────
+// React Components
+// ─────────────────────────────────────────────────────────────────────────────
+// Action Dialog - same as v1
+function ActionDialog({ itemTitle }) {
+    const inFocus = useIsInFocus();
+    useKeyboard((evt) => {
+        if (!inFocus)
+            return;
+        if (evt.name === 'escape') {
+            const state = useStore.getState();
+            useStore.setState({
+                dialogStack: state.dialogStack.slice(0, -1),
+            });
+        }
+    });
+    return (_jsxs("box", { flexDirection: "column", padding: 1, children: [_jsxs("text", { children: ["Actions for: ", itemTitle || 'No item selected'] }), _jsx("text", { marginTop: 1, children: "Press ESC to close" })] }));
+}
+function CustomList({ children, placeholder, defaultSearchQuery, selectedItemId, onSelectionChange, isShowingDetail }) {
+    const listRef = useRef(null);
+    const inFocus = useIsInFocus();
+    const theme = useTheme();
+    // Subscribe to zustand for UI updates
+    const visibleCount = useCustomListStore((s) => s.visibleCount);
+    const totalCount = useCustomListStore((s) => s.totalCount);
+    const searchQuery = useCustomListStore((s) => s.searchQuery);
+    // Phase 2: Subscribe to detail panel state
+    const currentDetailNode = useCustomListStore((s) => s.currentDetailNode);
+    const showingDetail = useCustomListStore((s) => s.isShowingDetail);
+    // Get empty view data from renderable
+    const emptyViewData = listRef.current?.getEmptyViewData();
+    // Keyboard navigation
+    useKeyboard((evt) => {
+        if (!inFocus || !listRef.current)
+            return;
+        if (evt.name === 'up')
+            listRef.current.moveSelection(-1);
+        if (evt.name === 'down')
+            listRef.current.moveSelection(1);
+        if (evt.name === 'return')
+            listRef.current.activateSelected();
+        if (evt.name === 'k' && evt.ctrl) {
+            const selectedItemTitle = listRef.current.getSelectedItemTitle();
+            const state = useStore.getState();
+            useStore.setState({
+                dialogStack: [
+                    ...state.dialogStack,
+                    {
+                        element: _jsx(ActionDialog, { itemTitle: selectedItemTitle }),
+                        position: 'center',
+                    },
+                ],
+            });
+        }
+    });
+    // Phase 2: Wrap list and detail panel in a row layout when detail is shown
+    const listContent = (_jsxs("custom-list-v2", { ref: listRef, flexGrow: 1, placeholder: placeholder, defaultSearchQuery: defaultSearchQuery, selectedItemId: selectedItemId, onSelectionChange: onSelectionChange, isShowingDetail: isShowingDetail, children: [children, visibleCount === 0 && totalCount > 0 && (_jsxs("box", { padding: 1, flexDirection: "column", children: [_jsx("text", { children: emptyViewData?.title || `No results for "${searchQuery}"` }), emptyViewData?.description && _jsx("text", { children: emptyViewData.description })] }))] }));
+    // Phase 2: When detail panel is enabled, show list on left, detail on right
+    if (showingDetail) {
+        return (_jsxs("box", { flexDirection: "row", flexGrow: 1, children: [_jsx("box", { width: "50%", flexDirection: "column", children: listContent }), _jsx("text", { flexShrink: 0, children: "\u2502" }), _jsx("box", { width: "50%", flexDirection: "column", paddingLeft: 1, children: currentDetailNode || _jsx("text", { fg: theme.textMuted, children: "No detail available" }) })] }));
+    }
+    return listContent;
+}
+function CustomListItem({ id, title, subtitle, keywords, onAction, detail }) {
+    const wrapperRef = useRef(null);
+    const selectedIndex = useCustomListStore((s) => s.selectedIndex);
+    // Subscribe to THIS item's state - React re-renders when it changes
+    const itemState = useCustomListStore((s) => (id ? s.itemStates[id] : undefined));
+    const theme = useTheme();
+    // Compare visibleIndex to selectedIndex - using zustand state, not ref
+    const isSelected = itemState?.visibleIndex === selectedIndex;
+    return (_jsxs("custom-list-item-wrapper-v2", { ref: wrapperRef, keywords: keywords, onAction: onAction, itemTitle: title, itemSubtitle: subtitle, itemId: id, detail: detail, backgroundColor: isSelected ? '#0066cc' : undefined, flexShrink: 0, children: [_jsx("text", { flexShrink: 0, children: isSelected ? '› ' : '  ' }), _jsx("text", { flexShrink: 0, children: title }), subtitle && _jsxs("text", { flexShrink: 0, fg: theme.textMuted, children: [" ", subtitle] })] }));
+}
+function CustomListSection({ title, children }) {
+    return (_jsxs("custom-list-section-wrapper-v2", { sectionTitle: title, flexShrink: 0, children: [title && (_jsxs("text", { paddingTop: 1, paddingLeft: 1, flexShrink: 0, children: ["\u2500\u2500 ", title, " \u2500\u2500"] })), children] }));
+}
+function CustomListEmptyView({ title, description }) {
+    return _jsx("custom-list-empty-view-wrapper-v2", { emptyTitle: title, emptyDescription: description });
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Compound Component
+// ─────────────────────────────────────────────────────────────────────────────
+CustomList.Item = CustomListItem;
+CustomList.Section = CustomListSection;
+CustomList.EmptyView = CustomListEmptyView;
+// ─────────────────────────────────────────────────────────────────────────────
+// Example
+// ─────────────────────────────────────────────────────────────────────────────
+const FRUITS = [
+    { id: 'apple', title: 'Apple', subtitle: 'A red fruit', keywords: ['red'] },
+    { id: 'banana', title: 'Banana', subtitle: 'A yellow fruit', keywords: ['yellow'] },
+    { id: 'date', title: 'Date', subtitle: 'A sweet fruit', keywords: ['sweet'] },
+    { id: 'fig', title: 'Fig', subtitle: 'A small fruit', keywords: ['small'] },
+    { id: 'grape', title: 'Grape', subtitle: 'A vine fruit', keywords: ['vine'] },
+    { id: 'lemon', title: 'Lemon', subtitle: 'A citrus fruit', keywords: ['citrus'] },
+];
+const VEGETABLES = [
+    { id: 'carrot', title: 'Carrot', subtitle: 'An orange vegetable', keywords: ['orange'] },
+    { id: 'eggplant', title: 'Eggplant', subtitle: 'A purple vegetable', keywords: ['purple'] },
+    { id: 'jalapeno', title: 'Jalapeno', subtitle: 'A spicy pepper', keywords: ['spicy'] },
+    { id: 'kale', title: 'Kale', subtitle: 'A superfood', keywords: ['healthy'] },
+];
+// Wrapper component to test tree traversal (items nested in other components)
+function ItemWrapper({ children }) {
+    return _jsx("box", { children: children });
+}
+function Example() {
+    // Phase 1: Track selected item id in React state
+    const [selectedId, setSelectedId] = useState(null);
+    const inFocus = useIsInFocus();
+    const theme = useTheme();
+    // Phase 1: Demonstrate programmatic selection change (bidirectional sync)
+    // Press ctrl+1-4 to jump to specific items (ctrl to avoid typing in search)
+    useKeyboard((evt) => {
+        if (!inFocus)
+            return;
+        if (evt.ctrl && evt.name === '1') {
+            setSelectedId('apple');
+        }
+        if (evt.ctrl && evt.name === '2') {
+            setSelectedId('banana');
+        }
+        if (evt.ctrl && evt.name === '3') {
+            setSelectedId('carrot');
+        }
+        if (evt.ctrl && evt.name === '4') {
+            setSelectedId('kale');
+        }
+    });
+    // Phase 2: Helper to create detail content for an item
+    const createDetail = (item) => (_jsxs("box", { flexDirection: "column", padding: 1, children: [_jsxs("text", { children: ["Details for ", item.title] }), _jsx("text", { fg: theme.textMuted, marginTop: 1, children: item.subtitle }), _jsxs("text", { fg: theme.textMuted, marginTop: 1, children: ["Keywords: ", item.keywords.join(', ')] }), _jsxs("text", { fg: theme.textMuted, marginTop: 1, children: ["ID: ", item.id] })] }));
+    return (_jsxs("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [_jsx("text", { marginBottom: 1, children: "Custom Renderable List V2 - Detail Panel" }), _jsxs("text", { fg: theme.textMuted, children: ["Selected: ", selectedId || '(none)'] }), _jsx("text", { fg: theme.textMuted, marginBottom: 1, children: "Press ^1=apple, ^2=banana, ^3=carrot, ^4=kale to jump" }), _jsxs(CustomList, { placeholder: "Search items...", selectedItemId: selectedId, onSelectionChange: (id) => {
+                    setSelectedId(id);
+                }, isShowingDetail: true, children: [_jsx(CustomList.EmptyView, { title: "Nothing found", description: "Try a different search term" }), _jsx(CustomList.Section, { title: "Fruits", children: FRUITS.map((item) => (_jsx(ItemWrapper, { children: _jsx(CustomList.Item, { id: item.id, title: item.title, subtitle: item.subtitle, keywords: item.keywords, detail: createDetail(item), onAction: () => {
+                                    console.log(`Activated: ${item.title} (id: ${item.id})`);
+                                } }) }, item.id))) }), _jsx(CustomList.Section, { title: "Vegetables", children: VEGETABLES.map((item) => (_jsx(CustomList.Item, { id: item.id, title: item.title, subtitle: item.subtitle, keywords: item.keywords, detail: createDetail(item), onAction: () => {
+                                console.log(`Activated: ${item.title} (id: ${item.id})`);
+                            } }, item.id))) })] })] }));
+}
+// Reset store when running as main (for testing isolation)
+if (import.meta.main) {
+    useCustomListStore.setState({
+        selectedIndex: 0,
+        visibleCount: 0,
+        totalCount: 0,
+        searchQuery: '',
+        selectedItemId: null,
+        isShowingDetail: false,
+        currentDetailNode: null,
+    });
+    renderWithProviders(_jsx(Example, {}));
+}
+export { CustomList, CustomListItem, CustomListSection, CustomListEmptyView, Example, useCustomListStore };
+//# sourceMappingURL=custom-renderable-list-v2.js.map