termcast 1.3.9

package/dist/components/list.js

@@ -0,0 +1,667 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useLayoutEffect, createContext, useContext, } from 'react';
+import { TextAttributes } from '@opentui/core';
+import { useKeyboard } from '@opentui/react';
+import { Theme } from '@termcast/cli/src/theme';
+import { useIsInFocus } from '@termcast/cli/src/internal/focus-context';
+import { useStore } from '@termcast/cli/src/state';
+import { useDialog } from '@termcast/cli/src/internal/dialog';
+import { createDescendants } from '@termcast/cli/src/descendants';
+import { LoadingBar } from '@termcast/cli/src/components/loading-bar';
+import { useNavigationPending } from '@termcast/cli/src/internal/navigation';
+function ListFooter() {
+    const toast = useStore((state) => state.toast);
+    if (toast) {
+        return (_jsx("box", { border: false, style: {
+                paddingLeft: 1,
+                paddingRight: 1,
+                paddingTop: 1,
+                marginTop: 1,
+            }, children: toast }));
+    }
+    return (_jsxs("box", { border: false, style: {
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 1,
+            marginTop: 1,
+            flexDirection: 'row',
+        }, children: [_jsx("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsx("text", { fg: Theme.textMuted, children: " select" }), _jsxs("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: ['   ', "\u2191\u2193"] }), _jsx("text", { fg: Theme.textMuted, children: " navigate" }), _jsxs("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: ['   ', "^k"] }), _jsx("text", { fg: Theme.textMuted, children: " actions" })] }));
+}
+const ListContext = createContext(undefined);
+// Helper function to determine if an item should be visible based on search
+function shouldItemBeVisible(searchQuery, props) {
+    // If no search query, show all items
+    if (!searchQuery.trim())
+        return true;
+    const needle = searchQuery.toLowerCase().trim();
+    const searchableText = [
+        props.title,
+        props.subtitle,
+        ...(props.keywords || []),
+    ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+    return searchableText.includes(needle);
+}
+const { DescendantsProvider: ListDescendantsProvider, useDescendants: useListDescendants, useDescendant: useListItemDescendant, } = createDescendants();
+const { DescendantsProvider: DropdownDescendantsProvider, useDescendants: useDropdownDescendants, useDescendant: useDropdownItemDescendant, } = createDescendants();
+const DropdownContext = createContext(undefined);
+function ListDropdownDialog(props) {
+    const [searchText, setSearchTextRaw] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const inputRef = useRef(null);
+    const descendantsContext = useDropdownDescendants();
+    // Wrapper function that updates search text
+    const setSearchText = (value) => {
+        setSearchTextRaw(value);
+        setSelectedIndex(0); // Reset selection when search changes
+    };
+    const move = (direction) => {
+        // Get all visible items
+        const items = Object.values(descendantsContext.map.current)
+            .filter((item) => item.index !== -1 && item.props?.visible !== false)
+            .sort((a, b) => a.index - b.index);
+        if (items.length === 0)
+            return;
+        // Find currently selected item's position in visible items
+        let currentVisibleIndex = items.findIndex((item) => item.index === selectedIndex);
+        if (currentVisibleIndex === -1) {
+            // If current selection is not visible, select first visible item
+            if (items[0]) {
+                setSelectedIndex(items[0].index);
+            }
+            return;
+        }
+        // Calculate next visible index
+        let nextVisibleIndex = currentVisibleIndex + direction;
+        if (nextVisibleIndex < 0)
+            nextVisibleIndex = items.length - 1;
+        if (nextVisibleIndex >= items.length)
+            nextVisibleIndex = 0;
+        const nextItem = items[nextVisibleIndex];
+        if (nextItem) {
+            setSelectedIndex(nextItem.index);
+        }
+    };
+    const inFocus = useIsInFocus();
+    useKeyboard((evt) => {
+        if (!inFocus)
+            return;
+        if (evt.name === 'escape') {
+            props.onCancel();
+        }
+        if (evt.name === 'up')
+            move(-1);
+        if (evt.name === 'down')
+            move(1);
+        if (evt.name === 'return') {
+            const items = Object.values(descendantsContext.map.current)
+                .filter((item) => item.index !== -1)
+                .sort((a, b) => a.index - b.index);
+            const currentItem = items.find((item) => item.index === selectedIndex);
+            if (currentItem?.props) {
+                props.onChange?.(currentItem.props.value);
+            }
+        }
+    });
+    return (_jsx(DropdownDescendantsProvider, { value: descendantsContext, children: _jsxs("box", { children: [_jsxs("box", { style: { paddingLeft: 2, paddingRight: 2 }, children: [_jsxs("box", { style: { paddingLeft: 1, paddingRight: 1 }, children: [_jsxs("box", { style: {
+                                        flexDirection: 'row',
+                                        justifyContent: 'space-between',
+                                    }, children: [_jsx("text", { attributes: TextAttributes.BOLD, children: props.tooltip }), _jsx("text", { fg: Theme.textMuted, children: "esc" })] }), _jsx("box", { style: { paddingTop: 1, paddingBottom: 1 }, children: _jsx("input", { ref: inputRef, onInput: setSearchText, placeholder: props.placeholder || 'Search...', focused: inFocus, value: searchText, focusedBackgroundColor: Theme.backgroundPanel, cursorColor: Theme.primary, focusedTextColor: Theme.textMuted }) })] }), _jsx("box", { style: { paddingBottom: 1 }, children: _jsx(DropdownContext.Provider, { value: {
+                                    currentSection: undefined,
+                                    selectedIndex,
+                                    setSelectedIndex,
+                                    currentValue: props.value,
+                                    searchText,
+                                    isFiltering: true, // Dropdown always has filtering enabled
+                                    onChange: (value) => {
+                                        props.onChange?.(value);
+                                    },
+                                }, children: props.children }) }), props.isLoading && (_jsx("box", { style: { paddingLeft: 1 }, children: _jsx("text", { fg: Theme.textMuted, children: "Loading..." }) }))] }), _jsxs("box", { border: false, style: {
+                        paddingRight: 2,
+                        paddingLeft: 3,
+                        paddingBottom: 1,
+                        paddingTop: 1,
+                        flexDirection: 'row',
+                    }, children: [_jsx("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsx("text", { fg: Theme.textMuted, children: " select" }), _jsxs("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: ['   ', "\u2191\u2193"] }), _jsx("text", { fg: Theme.textMuted, children: " navigate" })] })] }) }));
+}
+// Render a single list item row
+function ListItemRow(props) {
+    const { title, subtitle, accessories, active } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    // Format accessories for display
+    const accessoryElements = [];
+    if (accessories) {
+        accessories.forEach((accessory) => {
+            if ('text' in accessory && accessory.text) {
+                const textValue = typeof accessory.text === 'string'
+                    ? accessory.text
+                    : accessory.text?.value;
+                if (textValue) {
+                    accessoryElements.push(_jsx("text", { fg: active ? Theme.background : Theme.info, children: textValue }, `text-${textValue}`));
+                }
+            }
+            if ('tag' in accessory && accessory.tag) {
+                const tagValue = typeof accessory.tag === 'string'
+                    ? accessory.tag
+                    : accessory.tag?.value;
+                if (tagValue) {
+                    accessoryElements.push(_jsxs("text", { fg: active ? Theme.background : Theme.warning, children: ["[", tagValue, "]"] }, `tag-${tagValue}`));
+                }
+            }
+        });
+    }
+    return (_jsxs("box", { style: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            backgroundColor: active
+                ? Theme.primary
+                : isHovered
+                    ? Theme.backgroundPanel
+                    : undefined,
+            paddingLeft: active ? 0 : 1,
+            paddingRight: 1,
+        }, border: false, onMouseMove: () => setIsHovered(true), onMouseOut: () => setIsHovered(false), onMouseDown: props.onMouseDown, children: [_jsxs("box", { style: { flexDirection: 'row', flexGrow: 1, flexShrink: 1 }, children: [active && (_jsx("text", { fg: Theme.textMuted, selectable: false, children: "\u203A" })), _jsx("text", { fg: active ? Theme.background : Theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, children: title }), subtitle && (_jsxs("text", { fg: active ? Theme.background : Theme.textMuted, selectable: false, children: [' ', subtitle] }))] }), accessoryElements.length > 0 && (_jsx("box", { style: { flexDirection: 'row' }, children: accessoryElements.map((elem, i) => (_jsxs("box", { style: { flexDirection: 'row' }, children: [i > 0 && _jsx("text", { children: " " }), elem] }, i))) }))] }));
+}
+export const List = (props) => {
+    const { children, onSelectionChange, filtering = true, searchText: controlledSearchText, onSearchTextChange, searchBarPlaceholder = 'Search...', isLoading, navigationTitle, isShowingDetail, selectedItemId, searchBarAccessory, ...otherProps } = props;
+    const [internalSearchText, setInternalSearchTextRaw] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [currentDetail, setCurrentDetail] = useState(null);
+    const inputRef = useRef(null);
+    const descendantsContext = useListDescendants();
+    const navigationPending = useNavigationPending();
+    const searchText = controlledSearchText !== undefined
+        ? controlledSearchText
+        : internalSearchText;
+    // Determine if filtering is enabled
+    // List filters automatically when:
+    // - filtering is not specified (defaults to true) OR filtering is explicitly true
+    // List does NOT filter automatically when:
+    // - When filtering={false}
+    // - When onSearchTextChange is provided (implicitly sets filtering to false)
+    // - Unless you explicitly set filtering={true} alongside onSearchTextChange
+    const isFilteringEnabled = (() => {
+        if (filtering === false)
+            return false;
+        if (filtering === true)
+            return true;
+        // filtering is undefined/not specified
+        return !onSearchTextChange; // defaults to true unless onSearchTextChange is provided
+    })();
+    const openDropdown = () => {
+        setIsDropdownOpen(true);
+    };
+    // Wrapper function that updates search text
+    const setInternalSearchText = (value) => {
+        setInternalSearchTextRaw(value);
+        // Reset to 0 when search changes - this is expected UX behavior
+        setSelectedIndex(0);
+    };
+    const listContextValue = useMemo(() => ({
+        isDropdownOpen,
+        setIsDropdownOpen,
+        openDropdown,
+        selectedIndex,
+        setSelectedIndex,
+        searchText,
+        isFiltering: isFilteringEnabled,
+        setCurrentDetail,
+        isShowingDetail,
+    }), [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail]);
+    // Clear detail when detail view is hidden
+    useEffect(() => {
+        if (!isShowingDetail) {
+            setCurrentDetail(null);
+        }
+    }, [isShowingDetail]);
+    // Handle selectedItemId prop changes
+    useEffect(() => {
+        // Only update selection if selectedItemId is explicitly provided
+        if (selectedItemId !== undefined) {
+            const items = Object.values(descendantsContext.map.current)
+                .filter((item) => item.index !== -1)
+                .sort((a, b) => a.index - b.index);
+            const index = items.findIndex((item) => item.props?.id === selectedItemId);
+            if (index !== -1) {
+                setSelectedIndex(index);
+            }
+        }
+    }, [selectedItemId]);
+    const move = (direction) => {
+        // Get all visible items
+        const items = Object.values(descendantsContext.map.current)
+            .filter((item) => item.index !== -1 && item.props?.visible !== false)
+            .sort((a, b) => a.index - b.index);
+        if (items.length === 0)
+            return;
+        // Find currently selected item's position in visible items
+        let currentVisibleIndex = items.findIndex((item) => item.index === selectedIndex);
+        if (currentVisibleIndex === -1) {
+            // If current selection is not visible, select first visible item
+            if (items[0]) {
+                setSelectedIndex(items[0].index);
+            }
+            return;
+        }
+        // Calculate next visible index
+        let nextVisibleIndex = currentVisibleIndex + direction;
+        if (nextVisibleIndex < 0)
+            nextVisibleIndex = items.length - 1;
+        if (nextVisibleIndex >= items.length)
+            nextVisibleIndex = 0;
+        const nextItem = items[nextVisibleIndex];
+        if (nextItem) {
+            setSelectedIndex(nextItem.index);
+        }
+    };
+    // Handle keyboard navigation
+    const inFocus = useIsInFocus();
+    const dialog = useDialog();
+    useKeyboard((evt) => {
+        if (!inFocus)
+            return;
+        // Handle Ctrl+P for dropdown
+        if (evt.ctrl && evt.name === 'p' && searchBarAccessory && !isDropdownOpen) {
+            openDropdown();
+            return;
+        }
+        // Handle Ctrl+K to show actions
+        if (evt.name === 'k' && evt.ctrl) {
+            const items = Object.values(descendantsContext.map.current)
+                .filter((item) => item.index !== -1)
+                .sort((a, b) => a.index - b.index);
+            const currentItem = items.find((item) => item.index === selectedIndex);
+            // Show current item's actions if available
+            if (currentItem?.props?.actions) {
+                dialog.push(currentItem.props.actions, 'bottom-right');
+            }
+            // Otherwise show List's own actions
+            else if (props.actions) {
+                dialog.push(props.actions, 'bottom-right');
+            }
+            return;
+        }
+        if (evt.name === 'up')
+            move(-1);
+        if (evt.name === 'down')
+            move(1);
+        if (evt.name === 'return') {
+            const items = Object.values(descendantsContext.map.current)
+                .filter((item) => item.index !== -1)
+                .sort((a, b) => a.index - b.index);
+            const currentItem = items.find((item) => item.index === selectedIndex);
+            if (!currentItem?.props)
+                return;
+            if (currentItem.props.actions) {
+                dialog.push(currentItem.props.actions, 'bottom-right');
+            }
+        }
+    });
+    const handleSearchChange = (newValue) => {
+        if (!inFocus)
+            return;
+        // Always call onSearchTextChange if provided
+        if (onSearchTextChange) {
+            onSearchTextChange(newValue);
+        }
+        if (controlledSearchText === undefined) {
+            setInternalSearchText(newValue);
+        }
+    };
+    return (_jsx(ListContext.Provider, { value: listContextValue, children: _jsx(ListDescendantsProvider, { value: descendantsContext, children: _jsxs("box", { style: { flexDirection: 'column', flexGrow: 1 }, children: [navigationTitle && (_jsx("box", { border: false, style: {
+                            paddingBottom: 0,
+                            flexGrow: 1,
+                        }, children: _jsx(LoadingBar, { title: navigationTitle, isLoading: isLoading || navigationPending }) })), _jsx("box", { children: _jsxs("box", { border: false, style: {
+                                paddingLeft: 1,
+                                paddingRight: 1,
+                                marginTop: 1,
+                                marginBottom: 1,
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            }, children: [_jsx("box", { style: {
+                                        flexGrow: 1,
+                                        flexDirection: 'column',
+                                        flexShrink: 1,
+                                    }, children: _jsx("input", { ref: inputRef, placeholder: searchBarPlaceholder, focused: inFocus && !isDropdownOpen, value: searchText, onInput: handleSearchChange, focusedBackgroundColor: Theme.backgroundPanel, cursorColor: Theme.primary, focusedTextColor: Theme.text }) }), searchBarAccessory] }) }), _jsxs("box", { style: { flexDirection: 'row', flexGrow: 1 }, children: [_jsx("box", { style: { marginTop: 1, width: isShowingDetail ? '50%' : '100%', flexGrow: isShowingDetail ? 0 : 1 }, children: _jsxs(_Fragment, { children: [_jsx(ListItemsRenderer, { children: children }), _jsx(ListFooter, {})] }) }), isShowingDetail && currentDetail && (_jsx("box", { style: {
+                                    marginTop: 1,
+                                    width: '50%',
+                                    paddingLeft: 1,
+                                    paddingRight: 1,
+                                }, border: ['left'], borderStyle: 'single', borderColor: Theme.border, children: currentDetail }))] })] }) }) }));
+};
+// Component to render list items and sections
+function ListItemsRenderer(props) {
+    const { children } = props;
+    const listContext = useContext(ListContext);
+    const searchText = listContext?.searchText || '';
+    // Pass search text down via context
+    return (_jsx(ListSectionContext.Provider, { value: { searchText }, children: children }));
+}
+const ListSectionContext = createContext({});
+const ListItem = (props) => {
+    const listSectionContext = useContext(ListSectionContext);
+    const { sectionTitle } = listSectionContext;
+    const listContext = useContext(ListContext);
+    const dialog = useDialog();
+    // Extract text values for descendant registration
+    const titleText = typeof props.title === 'string' ? props.title : props.title.value;
+    const subtitleText = props.subtitle
+        ? typeof props.subtitle === 'string'
+            ? props.subtitle
+            : props.subtitle.value || ''
+        : undefined;
+    // Check if this item is visible based on search
+    const isFiltering = listContext?.isFiltering ?? false;
+    const searchText = listContext?.searchText ?? '';
+    const isVisible = !isFiltering ||
+        shouldItemBeVisible(searchText, {
+            title: titleText,
+            subtitle: subtitleText,
+            keywords: [...(props.keywords || []), sectionTitle].filter(Boolean),
+        });
+    // Register as descendant with all searchable data
+    const { index } = useListItemDescendant({
+        id: props.id,
+        title: titleText,
+        subtitle: subtitleText,
+        keywords: [...(props.keywords || []), sectionTitle].filter(Boolean),
+        actions: props.actions,
+        visible: isVisible,
+        detail: props.detail,
+    });
+    // Get selected index from parent List context
+    const selectedIndex = listContext?.selectedIndex ?? 0;
+    const isActive = index === selectedIndex;
+    // Update detail when this item becomes active or detail prop changes
+    useEffect(() => {
+        if (isActive && listContext?.isShowingDetail && listContext?.setCurrentDetail) {
+            listContext.setCurrentDetail(props.detail || null);
+        }
+    }, [isActive, props.detail, listContext?.isShowingDetail, listContext?.setCurrentDetail]);
+    // Don't render if not visible
+    if (!isVisible)
+        return null;
+    // Handle mouse click on item
+    const handleMouseDown = () => {
+        if (listContext && index !== -1) {
+            // If clicking on already selected item, show actions (like pressing Enter)
+            if (isActive && props.actions) {
+                dialog.push(props.actions, 'bottom-right');
+            }
+            else if (listContext.setSelectedIndex) {
+                // Otherwise just select the item
+                listContext.setSelectedIndex(index);
+            }
+        }
+    };
+    // Don't show accessories if we're showing detail
+    const showAccessories = !props.detail && props.accessories;
+    // Render the item row directly
+    return (_jsx(ListItemRow, { title: titleText, subtitle: subtitleText, accessories: showAccessories ? props.accessories : undefined, active: isActive, isShowingDetail: props.detail !== undefined, onMouseDown: handleMouseDown, index: index }));
+};
+const ListItemDetail = (props) => {
+    const { isLoading, markdown, metadata } = props;
+    return (_jsxs("box", { style: { flexDirection: 'column', flexGrow: 1 }, children: [isLoading && (_jsx("box", { style: { paddingBottom: 1 }, children: _jsx("text", { fg: Theme.textMuted, children: "Loading..." }) })), markdown && (_jsx("box", { style: { flexGrow: 1, flexShrink: 1, overflow: 'scroll' }, children: _jsx("text", { children: markdown }) })), metadata && (_jsx("box", { style: { paddingTop: 1 }, border: ['top'], borderStyle: 'single', borderColor: Theme.border, children: metadata }))] }));
+};
+const ListItemDetailMetadata = (props) => {
+    return (_jsx("box", { style: { flexDirection: 'column' }, children: props.children }));
+};
+const ListItemDetailMetadataLabel = (props) => {
+    return (_jsxs("box", { style: { flexDirection: 'row', paddingBottom: 0.5 }, children: [_jsxs("text", { fg: Theme.textMuted, style: { minWidth: 15 }, children: [props.title, ":"] }), props.text && _jsx("text", { fg: Theme.text, children: props.text })] }));
+};
+const ListItemDetailMetadataSeparator = () => {
+    return (_jsx("box", { style: { paddingBottom: 0.5 }, children: _jsx("text", { fg: Theme.border, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }));
+};
+const ListItemDetailMetadataLink = (props) => {
+    return (_jsxs("box", { style: { flexDirection: 'row', paddingBottom: 0.5 }, children: [_jsxs("text", { fg: Theme.textMuted, style: { minWidth: 15 }, children: [props.title, ":"] }), _jsx("text", { fg: Theme.link, children: props.text })] }));
+};
+const ListItemDetailMetadataTagList = (props) => {
+    return (_jsxs("box", { style: { flexDirection: 'column', paddingBottom: 0.5 }, children: [_jsxs("text", { fg: Theme.textMuted, children: [props.title, ":"] }), _jsx("box", { style: { flexDirection: 'row', paddingLeft: 1 }, children: props.children })] }));
+};
+const ListItemDetailMetadataTagListItem = (props) => {
+    return (_jsx("box", { style: { paddingRight: 1 }, children: _jsxs("text", { fg: props.color || Theme.accent, children: ["[", props.text, "]"] }) }));
+};
+ListItemDetail.Metadata = ListItemDetailMetadata;
+ListItemDetailMetadata.Label = ListItemDetailMetadataLabel;
+ListItemDetailMetadata.Separator = ListItemDetailMetadataSeparator;
+ListItemDetailMetadata.Link = ListItemDetailMetadataLink;
+ListItemDetailMetadata.TagList = ListItemDetailMetadataTagList;
+ListItemDetailMetadataTagList.Item = ListItemDetailMetadataTagListItem;
+ListItem.Detail = ListItemDetail;
+const ListDropdown = (props) => {
+    const listContext = useContext(ListContext);
+    const [isHovered, setIsHovered] = useState(false);
+    // If not inside a List, just render nothing (for type safety)
+    if (!listContext) {
+        return null;
+    }
+    const { isDropdownOpen, setIsDropdownOpen } = listContext;
+    // Store both value and title together
+    const [dropdownState, setDropdownState] = useState(() => {
+        const initialValue = props.value || props.defaultValue || '';
+        return { value: initialValue, title: initialValue || 'All' };
+    });
+    const descendantsContext = useDropdownDescendants();
+    const dialog = useDialog();
+    const inFocus = useIsInFocus();
+    // Update value and find its title
+    useLayoutEffect(() => {
+        const valueToUse = props.value !== undefined ? props.value : dropdownState.value;
+        // If no value is set and we have descendants, use the first item
+        if (!valueToUse && !props.value && !props.defaultValue) {
+            const items = Object.values(descendantsContext.map.current)
+                .filter((item) => item.index !== -1)
+                .sort((a, b) => a.index - b.index);
+            if (items.length > 0) {
+                const firstItem = items[0].props;
+                setDropdownState({ value: firstItem.value, title: firstItem.title });
+                return;
+            }
+        }
+        if (!valueToUse)
+            return;
+        // Try to find the title for this value
+        let title = valueToUse;
+        for (const item of Object.values(descendantsContext.map.current)) {
+            const itemProps = item.props;
+            if (itemProps.value === valueToUse) {
+                title = itemProps.title;
+                break;
+            }
+        }
+        // Only update if something changed
+        if (dropdownState.value !== valueToUse || dropdownState.title !== title) {
+            setDropdownState({ value: valueToUse, title });
+        }
+    }, [props.value]); // Run when props.value changes and on mount
+    const dropdownContextValue = useMemo(() => ({
+        currentSection: undefined,
+    }), []);
+    // Open dropdown dialog when triggered
+    useEffect(() => {
+        if (isDropdownOpen && !dialog.stack.length) {
+            // Pass the children to the dialog to render them there
+            dialog.push(_jsx(ListDropdownDialog, { ...props, value: dropdownState.value, onChange: (newValue) => {
+                    // Find the title for this value
+                    let title = newValue;
+                    for (const item of Object.values(descendantsContext.map.current)) {
+                        const itemProps = item.props;
+                        if (itemProps.value === newValue) {
+                            title = itemProps.title;
+                            break;
+                        }
+                    }
+                    setDropdownState({ value: newValue, title });
+                    setIsDropdownOpen(false);
+                    dialog.clear();
+                    if (props.onChange) {
+                        props.onChange(newValue);
+                    }
+                    // TODO: Handle storeValue to persist the value
+                }, onCancel: () => {
+                    setIsDropdownOpen(false);
+                    dialog.clear();
+                }, children: props.children }), 'top-right');
+        }
+    }, [isDropdownOpen, props.children]);
+    // Display the title from our state
+    const displayValue = dropdownState.title || 'All';
+    return (_jsx(DropdownDescendantsProvider, { value: descendantsContext, children: _jsxs(DropdownContext.Provider, { value: dropdownContextValue, children: [props.children, _jsxs("box", { style: {
+                        paddingTop: 1,
+                        paddingLeft: 2,
+                        // minWidth: value.length + 4,
+                        flexDirection: 'row',
+                        flexShrink: 0,
+                        backgroundColor: isHovered ? Theme.backgroundPanel : undefined,
+                    }, onMouseMove: () => setIsHovered(true), onMouseOut: () => setIsHovered(false), onMouseDown: () => {
+                        // Open dropdown when clicked
+                        if (!isDropdownOpen) {
+                            listContext.openDropdown();
+                        }
+                    }, children: [_jsx("text", { fg: isHovered ? Theme.text : Theme.textMuted, selectable: false, children: displayValue }), _jsxs("text", { fg: isHovered ? Theme.text : Theme.textMuted, selectable: false, children: [' ', "\u25BE"] })] }, dropdownState.value)] }) }));
+};
+ListDropdown.Item = (props) => {
+    const dropdownContext = useContext(DropdownContext);
+    const [isHovered, setIsHovered] = useState(false);
+    // If not inside a Dropdown, just render nothing
+    if (!dropdownContext) {
+        return null;
+    }
+    const { currentSection, selectedIndex, currentValue, setSelectedIndex, onChange, searchText, isFiltering, } = dropdownContext;
+    // Check if this item is visible based on search
+    const isVisible = !isFiltering ||
+        !searchText ||
+        shouldItemBeVisible(searchText, {
+            title: props.title,
+            keywords: currentSection ? [currentSection] : [],
+        });
+    // Register as descendant
+    const { index } = useDropdownItemDescendant({
+        value: props.value,
+        title: props.title,
+        section: currentSection,
+        visible: isVisible,
+    });
+    // Don't render if not visible
+    if (!isVisible)
+        return null;
+    // If we're in the dialog, render the item
+    if (selectedIndex !== undefined) {
+        const isActive = selectedIndex === index;
+        const isCurrent = props.value === currentValue;
+        const handleMouseMove = () => {
+            setIsHovered(true);
+            // Update selected index on hover
+            if (setSelectedIndex && index !== selectedIndex) {
+                setSelectedIndex(index);
+            }
+        };
+        const handleMouseDown = () => {
+            // Trigger selection on click
+            if (onChange) {
+                onChange(props.value);
+            }
+        };
+        return (_jsx("box", { style: {
+                flexDirection: 'row',
+                backgroundColor: isActive
+                    ? Theme.primary
+                    : isHovered
+                        ? Theme.backgroundPanel
+                        : undefined,
+                paddingLeft: isActive ? 0 : 1,
+                paddingRight: 1,
+                justifyContent: 'space-between',
+            }, border: false, onMouseMove: handleMouseMove, onMouseOut: () => setIsHovered(false), onMouseDown: handleMouseDown, children: _jsxs("box", { style: { flexDirection: 'row' }, children: [isActive && (_jsxs("text", { fg: Theme.background, selectable: false, children: ["\u203A", ''] })), _jsx("text", { fg: isActive
+                            ? Theme.background
+                            : isCurrent
+                                ? Theme.primary
+                                : Theme.text, attributes: isActive ? TextAttributes.BOLD : undefined, selectable: false, children: props.title })] }) }));
+    }
+    return null;
+};
+ListDropdown.Section = (props) => {
+    const parentContext = useContext(DropdownContext);
+    // If not inside a Dropdown, just render nothing
+    if (!parentContext) {
+        return null;
+    }
+    // Create a new context with the section name
+    const sectionContextValue = useMemo(() => ({
+        ...parentContext,
+        currentSection: props.title,
+    }), [parentContext, props.title]);
+    // Hide section title when searching
+    const showTitle = parentContext.selectedIndex !== undefined &&
+        props.title &&
+        !parentContext.searchText?.trim();
+    return (_jsxs(_Fragment, { children: [showTitle && (_jsx("box", { style: { paddingTop: 1, paddingLeft: 1 }, children: _jsx("text", { fg: Theme.accent, attributes: TextAttributes.BOLD, children: props.title }) })), _jsx(DropdownContext.Provider, { value: sectionContextValue, children: props.children })] }));
+};
+List.Item = ListItem;
+const ListSection = (props) => {
+    const parentContext = useContext(ListSectionContext);
+    const listContext = useContext(ListContext);
+    const searchText = listContext?.searchText || '';
+    // Create new context with section title and search text
+    const sectionContextValue = useMemo(() => ({
+        ...parentContext,
+        sectionTitle: props.title,
+        searchText,
+    }), [parentContext, props.title, searchText]);
+    // Hide section title when searching
+    const showTitle = props.title && !searchText.trim();
+    return (_jsxs(_Fragment, { children: [showTitle && (_jsx("box", { border: false, style: {
+                    paddingLeft: 1,
+                    paddingTop: 1,
+                }, children: _jsx("text", { fg: Theme.accent, attributes: TextAttributes.BOLD, children: props.title }) })), _jsx(ListSectionContext.Provider, { value: sectionContextValue, children: props.children })] }));
+};
+List.Section = ListSection;
+List.Dropdown = ListDropdown;
+List.EmptyView = (props) => {
+    return null;
+};
+export default List;
+// Grid uses List internally with a different visual representation
+export const Grid = (props) => {
+    // Grid is essentially List with grid layout
+    // We'll reuse the List component but with grid-specific styling
+    const { columns = 5, aspectRatio = '1', fit = 'contain', inset, ...listProps } = props;
+    return _jsx(List, { ...listProps });
+};
+// Grid.Item maps to List.Item but with content instead of icon
+Grid.Item = (props) => {
+    const { content, getDetailMarkdown, ...itemProps } = props;
+    // Extract image value and tooltip
+    const imageValue = typeof content === 'string' ? content : content?.value;
+    const imageTooltip = typeof content === 'object' ? content?.tooltip : undefined;
+    // Convert Grid.Item props to List.Item props
+    const listItemProps = {
+        ...itemProps,
+        // Grid items don't have accessories in Raycast
+        accessories: undefined,
+        // Use content as icon for now (in a real implementation, this would be rendered differently)
+        icon: imageValue,
+    };
+    return _jsx(List.Item, { ...listItemProps });
+};
+// Grid.Section maps to List.Section with grid-specific props
+Grid.Section = (props) => {
+    const { columns, aspectRatio, fit, inset, ...sectionProps } = props;
+    // Pass through to List.Section
+    return _jsx(List.Section, { ...sectionProps });
+};
+// Reuse List's Dropdown
+Grid.Dropdown = List.Dropdown;
+// Reuse List's EmptyView
+Grid.EmptyView = List.EmptyView;
+// Grid Inset presets
+Grid.Inset = {
+    Small: { top: 0, right: 0, bottom: 0, left: 0 },
+    Medium: { top: 8, right: 8, bottom: 8, left: 8 },
+    Large: { top: 16, right: 16, bottom: 16, left: 16 },
+};
+//# sourceMappingURL=list.js.map