termcast 1.3.32 → 1.3.34

package/dist/components/list.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
 import { TextAttributes, } from '@opentui/core';
 import { useKeyboard, flushSync } from '@opentui/react';
-import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { LoadingBar } from 'termcast/src/components/loading-bar';
+import { LoadingText } from 'termcast/src/components/loading-text';
 import { Footer } from 'termcast/src/components/footer';
 import { createDescendants } from 'termcast/src/descendants';
 import { useStore } from 'termcast/src/state';
@@ -12,9 +13,8 @@ import { useNavigationPending } from 'termcast/src/internal/navigation';
 import { Offscreen } from 'termcast/src/internal/offscreen';
 import { ScrollBox } from 'termcast/src/internal/scrollbox';
 import { Color, resolveColor } from 'termcast/src/colors';
-import { getIconEmoji } from 'termcast/src/components/icon';
-import { ActionPanel } from 'termcast/src/components/actions';
-import { Theme, markdownSyntaxStyle } from 'termcast/src/theme';
+import { getIconEmoji, getIconValue } from 'termcast/src/components/icon';
+import { useTheme, markdownSyntaxStyle } from 'termcast/src/theme';
 export { Color };
 function formatRelativeDate(date) {
     const now = new Date();
@@ -47,13 +47,47 @@ function formatRelativeDate(date) {
     return `${diffYear}y`;
 }
 function ListFooter() {
+    const theme = useTheme();
     const firstActionTitle = useStore((s) => s.firstActionTitle);
     const hasToast = useStore((s) => s.toast !== null);
     const listContext = useContext(ListContext);
     const isShowingDetail = listContext?.isShowingDetail ?? false;
-    const content = hasToast ? null : (_jsxs("box", { style: { flexDirection: 'row', gap: 3 }, children: [firstActionTitle && (_jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: firstActionTitle.toLowerCase() })] })), _jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u2191\u2193" }), _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "navigate" })] }), _jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: Theme.text, attributes: TextAttributes.BOLD, children: "^k" }), _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "actions" })] })] }));
+    const hasDropdown = listContext?.hasDropdown ?? false;
+    const content = hasToast ? null : (_jsxs("box", { style: { flexDirection: 'row', gap: 3 }, children: [firstActionTitle && (_jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: firstActionTitle.toLowerCase() })] })), _jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: "\u2191\u2193" }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "navigate" })] }), hasDropdown && (_jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: "^p" }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "dropdown" })] })), _jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: "^k" }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "actions" })] })] }));
     return _jsx(Footer, { hidePoweredBy: isShowingDetail, children: content });
 }
+/**
+ * Component that subscribes to descendants changes and renders current item's
+ * actions offscreen. This ensures actions are captured even when items register
+ * after the initial render (preserving context via closures).
+ */
+function CurrentItemActionsOffscreen(props) {
+    // Subscribe to descendants changes - this hook triggers re-render when items register
+    const descendantsMap = useListDescendantsRerender();
+    // Get current item's actions
+    const items = Object.values(descendantsMap)
+        .filter((item) => item.index !== -1)
+        .sort((a, b) => a.index - b.index);
+    const currentItem = items.find((item) => item.index === props.selectedIndex);
+    const actions = currentItem?.props?.actions ?? props.fallbackActions ?? null;
+    // Clear first action title when there are no actions
+    useLayoutEffect(() => {
+        if (!actions) {
+            useStore.setState({ firstActionTitle: '' });
+        }
+    }, [actions]);
+    if (!actions)
+        return null;
+    return _jsx(Offscreen, { children: actions });
+}
+export var Image;
+(function (Image) {
+    let ImageMask;
+    (function (ImageMask) {
+        ImageMask["Circle"] = "circle";
+        ImageMask["RoundedRectangle"] = "roundedRectangle";
+    })(ImageMask = Image.ImageMask || (Image.ImageMask = {}));
+})(Image || (Image = {}));
 const ListContext = createContext(undefined);
 // Helper function to determine if an item should be visible based on search
 function shouldItemBeVisible(searchQuery, props) {
@@ -75,6 +109,7 @@ const { DescendantsProvider: ListDescendantsProvider, useDescendants: useListDes
 const { DescendantsProvider: DropdownDescendantsProvider, useDescendants: useDropdownDescendants, useDescendant: useDropdownItemDescendant, } = createDescendants();
 const DropdownContext = createContext(undefined);
 function ListDropdownDialog(props) {
+    const theme = useTheme();
     const [searchText, setSearchTextRaw] = useState('');
     const [selectedIndex, setSelectedIndex] = useState(0);
     const inputRef = useRef(null);
@@ -143,13 +178,13 @@ function ListDropdownDialog(props) {
     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", { flexShrink: 0, fg: Theme.textMuted, children: props.tooltip }), _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "esc" })] }), _jsxs("box", { style: { paddingTop: 1, paddingBottom: 1, flexDirection: 'row' }, children: [_jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "> " }), _jsx("textarea", { ref: inputRef, height: 1, flexGrow: 1, wrapMode: 'none', keyBindings: [
+                                    }, children: [_jsx("text", { flexShrink: 0, fg: theme.textMuted, children: props.tooltip }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "esc" })] }), _jsxs("box", { style: { paddingTop: 1, paddingBottom: 1, flexDirection: 'row' }, children: [_jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "> " }), _jsx("textarea", { ref: inputRef, height: 1, flexGrow: 1, wrapMode: 'none', keyBindings: [
                                                 { name: 'return', action: 'submit' },
                                                 { name: 'linefeed', action: 'submit' },
                                             ], onContentChange: () => {
                                                 const value = inputRef.current?.plainText || '';
                                                 setSearchText(value);
-                                            }, placeholder: props.placeholder || 'Search...', focused: inFocus, initialValue: searchText, focusedBackgroundColor: Theme.backgroundPanel, cursorColor: Theme.primary, focusedTextColor: Theme.textMuted })] })] }), _jsx("box", { style: { paddingBottom: 1 }, children: _jsx(DropdownContext.Provider, { value: {
+                                            }, placeholder: props.placeholder || 'Search...', focused: inFocus, initialValue: searchText, focusedBackgroundColor: theme.backgroundPanel, cursorColor: theme.primary, focusedTextColor: theme.textMuted })] })] }), _jsx("box", { style: { paddingBottom: 1 }, children: _jsx(DropdownContext.Provider, { value: {
                                     currentSection: undefined,
                                     selectedIndex,
                                     setSelectedIndex,
@@ -159,15 +194,17 @@ function ListDropdownDialog(props) {
                                     onChange: (value) => {
                                         props.onChange?.(value);
                                     },
-                                }, children: props.children }) }), props.isLoading && (_jsx("box", { style: { paddingLeft: 1 }, children: _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "Loading..." }) }))] }), _jsx(DropdownFooter, {})] }) }));
+                                }, children: props.children }) }), props.isLoading && (_jsx("box", { style: { paddingLeft: 1 }, children: _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "Loading..." }) }))] }), _jsx(DropdownFooter, {})] }) }));
 }
 function DropdownFooter() {
+    const theme = useTheme();
     const hasToast = useStore((s) => s.toast !== null);
-    const content = hasToast ? null : (_jsxs("box", { style: { flexDirection: 'row', gap: 3 }, children: [_jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "select" })] }), _jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u2191\u2193" }), _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "navigate" })] })] }));
+    const content = hasToast ? null : (_jsxs("box", { style: { flexDirection: 'row', gap: 3 }, children: [_jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "select" })] }), _jsxs("box", { style: { flexDirection: 'row', gap: 1 }, children: [_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: "\u2191\u2193" }), _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "navigate" })] })] }));
     return (_jsx(Footer, { paddingLeft: 3, paddingRight: 2, paddingBottom: 1, marginTop: 0, children: content }));
 }
 // Render a single list item row
 function ListItemRow(props) {
+    const theme = useTheme();
     const { title, subtitle, icon, iconColor, accessories, active, ref } = props;
     const [isHovered, setIsHovered] = useState(false);
     const accessoryElements = [];
@@ -179,7 +216,7 @@ function ListItemRow(props) {
                     : accessory.text?.value;
                 const textColor = typeof accessory.text === 'object' ? accessory.text?.color : undefined;
                 if (textValue) {
-                    accessoryElements.push(_jsx("text", { flexShrink: 0, fg: active ? Theme.background : resolveColor(textColor) || Theme.info, wrapMode: "none", children: textValue }, `text-${textValue}`));
+                    accessoryElements.push(_jsx("text", { flexShrink: 0, fg: active ? theme.background : resolveColor(textColor) || theme.info, wrapMode: "none", children: textValue }, `text-${textValue}`));
                 }
             }
             if ('tag' in accessory && accessory.tag) {
@@ -188,7 +225,7 @@ function ListItemRow(props) {
                     : accessory.tag?.value;
                 const tagColor = typeof accessory.tag === 'object' ? accessory.tag?.color : undefined;
                 if (tagValue) {
-                    accessoryElements.push(_jsxs("text", { flexShrink: 0, fg: active ? Theme.background : resolveColor(tagColor) || Theme.warning, wrapMode: "none", children: ["[", tagValue, "]"] }, `tag-${tagValue}`));
+                    accessoryElements.push(_jsxs("text", { flexShrink: 0, fg: active ? theme.background : resolveColor(tagColor) || theme.warning, wrapMode: "none", children: ["[", tagValue, "]"] }, `tag-${tagValue}`));
                 }
             }
             if ('date' in accessory && accessory.date) {
@@ -200,7 +237,7 @@ function ListItemRow(props) {
                     : undefined;
                 if (dateValue) {
                     const formatted = formatRelativeDate(dateValue);
-                    accessoryElements.push(_jsx("text", { flexShrink: 0, fg: active ? Theme.background : resolveColor(dateColor) || Theme.success, wrapMode: "none", children: formatted }, `date-${dateValue.getTime()}`));
+                    accessoryElements.push(_jsx("text", { flexShrink: 0, fg: active ? theme.background : resolveColor(dateColor) || theme.success, wrapMode: "none", children: formatted }, `date-${dateValue.getTime()}`));
                 }
             }
         });
@@ -209,9 +246,9 @@ function ListItemRow(props) {
             flexDirection: 'row',
             justifyContent: 'space-between',
             backgroundColor: active
-                ? Theme.primary
+                ? theme.primary
                 : isHovered
-                    ? Theme.backgroundPanel
+                    ? theme.backgroundPanel
                     : undefined,
             paddingLeft: 0,
             paddingRight: 1,
@@ -220,16 +257,31 @@ function ListItemRow(props) {
             setIsHovered(true);
         }, onMouseOut: () => {
             setIsHovered(false);
-        }, onMouseDown: props.onMouseDown, children: [_jsxs("box", { style: { flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }, children: [_jsxs("box", { style: { flexDirection: 'row', flexShrink: 0 }, children: [_jsx("text", { flexShrink: 0, fg: active ? Theme.background : Theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, wrapMode: "none", children: active ? '›' : ' ' }), icon && _jsxs("text", { flexShrink: 0, fg: active ? Theme.background : iconColor || Theme.text, selectable: false, wrapMode: "none", children: [getIconEmoji(icon), " "] }), _jsx("text", { flexShrink: 0, fg: active ? Theme.background : Theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, wrapMode: "none", children: title })] }), subtitle && (_jsx("text", { flexShrink: 0, fg: active ? Theme.background : Theme.textMuted, selectable: false, wrapMode: "none", children: subtitle }))] }), accessoryElements.length > 0 && (_jsx("box", { style: { flexDirection: 'row', flexShrink: 0 }, children: accessoryElements.map((elem, i) => (_jsxs("box", { style: { flexDirection: 'row' }, children: [i > 0 && _jsx("text", { flexShrink: 0, children: " " }), elem] }, i))) }))] }));
+        }, onMouseDown: props.onMouseDown, children: [_jsxs("box", { style: { flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }, children: [_jsxs("box", { style: { flexDirection: 'row', flexShrink: 0 }, children: [_jsx("text", { flexShrink: 0, fg: active ? theme.background : theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, wrapMode: "none", children: active ? '›' : ' ' }), icon && _jsxs("text", { flexShrink: 0, fg: active ? theme.background : iconColor || theme.text, selectable: false, wrapMode: "none", children: [getIconEmoji(icon), " "] }), _jsx("text", { flexShrink: 0, fg: active ? theme.background : theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, wrapMode: "none", children: title })] }), subtitle && (_jsx("text", { flexShrink: 0, fg: active ? theme.background : theme.textMuted, selectable: false, wrapMode: "none", children: subtitle }))] }), accessoryElements.length > 0 && (_jsx("box", { style: { flexDirection: 'row', flexShrink: 0 }, children: accessoryElements.map((elem, i) => (_jsxs("box", { style: { flexDirection: 'row' }, children: [i > 0 && _jsx("text", { flexShrink: 0, children: " " }), elem] }, i))) }))] }));
 }
 export const List = (props) => {
     const { children, onSelectionChange, filtering, searchText: controlledSearchText, onSearchTextChange, searchBarPlaceholder = 'Search...', isLoading, navigationTitle, isShowingDetail, selectedItemId, searchBarAccessory, ...otherProps } = props;
-    const [internalSearchText, setInternalSearchTextRaw] = useState('');
+    const theme = useTheme();
+    const [internalSearchText, setInternalSearchText] = useState('');
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const [currentDetail, setCurrentDetail] = useState(null);
-    const [currentItemActions, setCurrentItemActions] = useState(null);
     const inputRef = useRef(null);
+    const customEmptyViewRef = useRef(false);
+    // Ref callback that registers the textarea in global state for ESC handling
+    const setInputRef = useCallback((node) => {
+        if (!node)
+            return;
+        inputRef.current = node;
+        useStore.setState({ activeSearchInputRef: node });
+        // React 19: return cleanup function for unmount
+        return () => {
+            if (useStore.getState().activeSearchInputRef === node) {
+                useStore.setState({ activeSearchInputRef: null });
+            }
+            inputRef.current = null;
+        };
+    }, []);
     const scrollBoxRef = useRef(null);
     const descendantsContext = useListDescendants();
     const navigationPending = useNavigationPending();
@@ -275,19 +327,24 @@ export const List = (props) => {
     const openDropdown = () => {
         setIsDropdownOpen(true);
     };
-    // Wrapper function that updates search text
-    const setInternalSearchText = (value) => {
-        // Using flushSync to force descendants to update visibility before querying
-        flushSync(() => {
-            setInternalSearchTextRaw(value);
-        });
+    // Sync selection to the first visible item whenever searchText changes.
+    // Runs after children's useLayoutEffects (descendants registered) but before paint,
+    // so there is no intermediate frame with stale selection.
+    // Works for both controlled and uncontrolled searchText.
+    const prevSearchTextRef = useRef(searchText);
+    useLayoutEffect(() => {
+        if (prevSearchTextRef.current === searchText)
+            return;
+        prevSearchTextRef.current = searchText;
+        if (!isFilteringEnabled)
+            return;
         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 && items[0]) {
             setSelectedIndex(items[0].index);
         }
-    };
+    });
     const listContextValue = useMemo(() => ({
         isDropdownOpen,
         setIsDropdownOpen,
@@ -298,15 +355,18 @@ export const List = (props) => {
         isFiltering: isFilteringEnabled,
         setCurrentDetail,
         isShowingDetail,
-    }), [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail]);
-    // Clear detail when detail view is hidden
-    useEffect(() => {
+        customEmptyViewRef,
+        isLoading,
+        hasDropdown: !!searchBarAccessory,
+    }), [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail, isLoading, searchBarAccessory]);
+    // Clear detail when detail view is hidden (before paint to avoid flash)
+    useLayoutEffect(() => {
         if (!isShowingDetail) {
             setCurrentDetail(null);
         }
     }, [isShowingDetail]);
-    // Handle selectedItemId prop changes
-    useEffect(() => {
+    // Handle selectedItemId prop changes (before paint to avoid flash)
+    useLayoutEffect(() => {
         // Only update selection if selectedItemId is explicitly provided
         if (selectedItemId !== undefined) {
             const items = Object.values(descendantsContext.map.current)
@@ -317,25 +377,18 @@ export const List = (props) => {
             }
         }
     }, [selectedItemId]);
-    // Call onSelectionChange when selection changes and track current item's actions
+    // Call onSelectionChange when selection changes
     useEffect(() => {
         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);
-        // Track current item's actions for footer display
-        const actions = currentItem?.props?.actions ?? props.actions ?? null;
-        setCurrentItemActions(actions);
-        // Clear first action title when there are no actions
-        if (!actions) {
-            useStore.setState({ firstActionTitle: '' });
-        }
         // Call onSelectionChange callback if provided
         if (onSelectionChange) {
             const selectedId = currentItem?.props?.id ?? null;
             onSelectionChange(selectedId);
         }
-    }, [selectedIndex, props.actions]);
+    }, [selectedIndex]);
     const scrollToItem = (item) => {
         const scrollBox = scrollBoxRef.current;
         const elementRef = item.props?.elementRef;
@@ -373,8 +426,10 @@ export const List = (props) => {
             nextVisibleIndex = 0;
         const nextItem = items[nextVisibleIndex];
         if (nextItem) {
+            flushSync(() => {
+                setSelectedIndex(nextItem.index);
+            });
             scrollToItem(nextItem);
-            setSelectedIndex(nextItem.index);
         }
     };
     const inFocus = useIsInFocus();
@@ -392,19 +447,11 @@ export const List = (props) => {
             .filter((item) => item.index !== -1)
             .sort((a, b) => a.index - b.index);
         const currentItem = items.find((item) => item.index === selectedIndex);
-        // Handle Ctrl+K to show actions (always show sheet)
+        // Handle Ctrl+K to show actions dialog via portal
         if (evt.name === 'k' && evt.ctrl) {
-            // Show current item's actions if available
-            if (currentItem?.props?.actions) {
-                dialog.pushActions(currentItem.props.actions);
-            }
-            // Otherwise show List's own actions
-            else if (props.actions) {
-                dialog.pushActions(props.actions);
-            }
-            // Otherwise show empty ActionPanel (still has Settings section with Configure Extension, etc.)
-            else {
-                dialog.pushActions(_jsx(ActionPanel, {}));
+            const hasActions = currentItem?.props?.actions || props.actions;
+            if (hasActions) {
+                useStore.setState({ showActionsDialog: true });
             }
             return;
         }
@@ -412,13 +459,12 @@ export const List = (props) => {
             move(-1);
         if (evt.name === 'down')
             move(1);
-        // Handle Enter to execute first action directly
+        // Handle Enter to auto-execute first action via ActionPanel
         if (evt.name === 'return') {
             if (!currentItem?.props)
                 return;
             if (currentItem.props.actions) {
                 useStore.setState({ shouldAutoExecuteFirstAction: true });
-                dialog.pushActions(currentItem.props.actions);
             }
         }
     });
@@ -451,31 +497,33 @@ export const List = (props) => {
                                         flexGrow: 1,
                                         flexDirection: 'row',
                                         flexShrink: 1,
-                                    }, children: [_jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "> " }), _jsx("textarea", { ref: inputRef, height: 1, flexGrow: 1, wrapMode: 'none', keyBindings: [
+                                    }, children: [_jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "> " }), _jsx("textarea", { ref: setInputRef, height: 1, flexGrow: 1, wrapMode: 'none', keyBindings: [
                                                 { name: 'return', action: 'submit' },
                                                 { name: 'linefeed', action: 'submit' },
                                             ], placeholder: searchBarPlaceholder, focused: inFocus && !isDropdownOpen, initialValue: searchText, onContentChange: () => {
                                                 const value = inputRef.current?.plainText || '';
                                                 handleSearchChange(value);
-                                            }, focusedBackgroundColor: Theme.backgroundPanel, cursorColor: Theme.primary, focusedTextColor: Theme.text })] }), searchBarAccessory] }) }), _jsxs("box", { style: { flexDirection: 'row', flexGrow: 1, flexShrink: 1 }, children: [_jsxs("box", { style: { width: isShowingDetail ? '50%' : '100%', flexGrow: 1, flexShrink: 1, flexDirection: 'column' }, children: [_jsx(ScrollBox, { ref: scrollBoxRef, focused: false, flexGrow: 1, flexShrink: 1, style: {
+                                            }, focusedBackgroundColor: theme.backgroundPanel, cursorColor: theme.primary, focusedTextColor: theme.text })] }), searchBarAccessory] }) }), _jsxs("box", { style: { flexDirection: 'row', flexGrow: 1, flexShrink: 1 }, children: [_jsxs("box", { style: { width: isShowingDetail ? '50%' : '100%', flexGrow: 1, flexShrink: 1, flexDirection: 'column' }, children: [_jsx(ScrollBox, { ref: scrollBoxRef, focused: false, flexGrow: 1, flexShrink: 1, minHeight: 6, style: {
                                             rootOptions: {
                                                 backgroundColor: undefined,
                                             },
                                             scrollbarOptions: {
                                                 showArrows: true,
                                             },
-                                        }, children: _jsx(ListItemsRenderer, { children: children }) }), _jsx(ListFooter, {}), currentItemActions && (_jsx(Offscreen, { children: currentItemActions }))] }), isShowingDetail && currentDetail && (_jsx("box", { style: {
+                                        }, children: _jsx(ListItemsRenderer, { children: children }) }), _jsx(ListFooter, {}), _jsx(CurrentItemActionsOffscreen, { selectedIndex: selectedIndex, fallbackActions: props.actions })] }), isShowingDetail && currentDetail && (_jsx("box", { style: {
                                     marginTop: 1,
                                     width: '50%',
                                     paddingLeft: 1,
                                     paddingRight: 1,
-                                }, border: ['left'], borderStyle: 'single', borderColor: Theme.border, children: currentDetail }))] })] }) }) }));
+                                }, border: ['left'], borderStyle: 'single', borderColor: theme.border, children: currentDetail }))] })] }) }) }));
 };
-function DefaultEmptyView() {
+// Wrapper component that only renders children when no visible items exist
+function ShowOnNoItems(props) {
     // Subscribe to re-render when items are added/removed
     void useListDescendantsRerender();
     // Get live map ref for reading in useLayoutEffect
     const map = useListDescendantsMap();
+    const listContext = useContext(ListContext);
     const [hasVisibleItems, setHasVisibleItems] = useState(true);
     // We must check visibility in useLayoutEffect because:
     // 1. map.current is cleared by reset() during render, so it's empty if read during render
@@ -486,19 +534,25 @@ function DefaultEmptyView() {
     useLayoutEffect(() => {
         const items = Object.values(map.current)
             .filter((item) => item.index !== -1 && item.props?.visible !== false);
-        setHasVisibleItems(items.length > 0);
+        // For default empty view, also check if custom empty view exists
+        const hasCustomEmptyView = !props.isCustomEmptyView && (listContext?.customEmptyViewRef.current ?? false);
+        setHasVisibleItems(items.length > 0 || hasCustomEmptyView);
     });
     if (hasVisibleItems)
         return null;
-    return (_jsx("box", { style: {
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 2,
-            paddingRight: 2,
-        }, children: _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "No items found" }) }));
+    return props.children;
+}
+function DefaultEmptyView() {
+    const theme = useTheme();
+    return (_jsx(ShowOnNoItems, { children: _jsx("box", { style: {
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 2,
+                paddingBottom: 2,
+                paddingLeft: 2,
+                paddingRight: 2,
+            }, children: _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "No items found" }) }) }));
 }
 // Component to render list items and sections
 function ListItemsRenderer(props) {
@@ -545,8 +599,8 @@ const ListItem = (props) => {
     // Check if this item is selected
     const selectedIndex = listContext?.selectedIndex ?? 0;
     const isActive = index === selectedIndex;
-    // Update detail when this item becomes active or detail prop changes
-    useEffect(() => {
+    // Update detail when this item becomes active or detail prop changes (before paint)
+    useLayoutEffect(() => {
         if (isActive && listContext?.isShowingDetail && listContext?.setCurrentDetail) {
             listContext.setCurrentDetail(props.detail || null);
         }
@@ -559,7 +613,10 @@ const ListItem = (props) => {
         if (listContext && index !== -1) {
             // If clicking on already selected item, show actions (like pressing Enter)
             if (isActive) {
-                dialog.pushActions(props.actions || _jsx(ActionPanel, {}));
+                // Show actions dialog via portal
+                if (props.actions) {
+                    useStore.setState({ showActionsDialog: true });
+                }
             }
             else if (listContext.setSelectedIndex) {
                 // Otherwise just select the item
@@ -596,8 +653,9 @@ const ListItem = (props) => {
     return (_jsx(ListItemRow, { title: titleText, subtitle: subtitleText, icon: iconValue, iconColor: iconColor, accessories: showAccessories ? props.accessories : undefined, active: isActive, isShowingDetail: props.detail !== undefined, onMouseDown: handleMouseDown, index: index, ref: elementRef }));
 };
 const ListItemDetail = (props) => {
+    const theme = useTheme();
     const { isLoading, markdown, metadata } = props;
-    return (_jsxs("box", { style: { flexDirection: 'column', flexGrow: 1 }, children: [isLoading && (_jsx("box", { style: { paddingBottom: 1 }, children: _jsx("text", { flexShrink: 0, fg: Theme.textMuted, children: "Loading..." }) })), _jsx(ScrollBox, { focused: false, 
+    return (_jsxs("box", { style: { flexDirection: 'column', flexGrow: 1 }, children: [isLoading && (_jsx("box", { style: { paddingBottom: 1 }, children: _jsx("text", { flexShrink: 0, fg: theme.textMuted, children: "Loading..." }) })), _jsx(ScrollBox, { focused: false, 
                 // flexGrow={1}
                 flexShrink: 1, style: {
                     rootOptions: {
@@ -606,32 +664,24 @@ const ListItemDetail = (props) => {
                     scrollbarOptions: {
                         showArrows: true,
                     },
-                }, children: _jsxs("box", { style: { flexDirection: 'column' }, children: [markdown && (_jsx("code", { content: markdown, filetype: "markdown", syntaxStyle: markdownSyntaxStyle, drawUnstyledText: false })), 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 }));
+                }, children: _jsxs("box", { gap: 1, style: { flexDirection: 'column' }, children: [markdown && (_jsx("code", { content: markdown, filetype: "markdown", syntaxStyle: markdownSyntaxStyle, drawUnstyledText: false })), metadata && (_jsx("box", { style: { paddingTop: 1 }, children: metadata }))] }) })] }));
 };
-const ListItemDetailMetadataLabel = (props) => {
-    return (_jsxs("box", { style: { flexDirection: 'column', paddingBottom: 0.5 }, children: [_jsxs("text", { flexShrink: 0, fg: Theme.textMuted, children: [props.title, ":"] }), props.text && _jsx("text", { flexShrink: 0, fg: Theme.text, children: props.text })] }));
+import { Metadata, MetadataContext } from 'termcast/src/components/metadata';
+// List.Item.Detail.Metadata config: smaller padding for compact list detail panel
+const listDetailMetadataConfig = {
+    maxValueLen: 20,
+    titleMinWidth: 12,
+    paddingBottom: 0.5,
+    separatorWidth: 17,
 };
-const ListItemDetailMetadataSeparator = () => {
-    return (_jsx("box", { style: { paddingBottom: 0.5 }, children: _jsx("text", { flexShrink: 0, 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: 'column', paddingBottom: 0.5 }, children: [_jsxs("text", { flexShrink: 0, fg: Theme.textMuted, children: [props.title, ":"] }), _jsx("text", { flexShrink: 0, fg: Theme.markdownLink, children: props.text })] }));
-};
-const ListItemDetailMetadataTagList = (props) => {
-    return (_jsxs("box", { style: { flexDirection: 'column', paddingBottom: 0.5 }, children: [_jsxs("text", { flexShrink: 0, 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", { flexShrink: 0, fg: resolveColor(props.color) || Theme.accent, children: ["[", props.text, "]"] }) }));
+const ListItemDetailMetadata = (props) => {
+    return (_jsx(MetadataContext.Provider, { value: listDetailMetadataConfig, children: _jsx("box", { style: { flexDirection: 'column' }, children: props.children }) }));
 };
 ListItemDetail.Metadata = ListItemDetailMetadata;
-ListItemDetailMetadata.Label = ListItemDetailMetadataLabel;
-ListItemDetailMetadata.Separator = ListItemDetailMetadataSeparator;
-ListItemDetailMetadata.Link = ListItemDetailMetadataLink;
-ListItemDetailMetadata.TagList = ListItemDetailMetadataTagList;
-ListItemDetailMetadataTagList.Item = ListItemDetailMetadataTagListItem;
+ListItemDetailMetadata.Label = Metadata.Label;
+ListItemDetailMetadata.Separator = Metadata.Separator;
+ListItemDetailMetadata.Link = Metadata.Link;
+ListItemDetailMetadata.TagList = Metadata.TagList;
 ListItem.Detail = ListItemDetail;
 /**
  * A dropdown menu shown in the right-hand-side of the search bar.
@@ -642,6 +692,7 @@ ListItem.Detail = ListItemDetail;
  * value="" (or your preferred reset value) at the top of your dropdown items.
  */
 const ListDropdown = (props) => {
+    const theme = useTheme();
     const listContext = useContext(ListContext);
     const [isHovered, setIsHovered] = useState(false);
     // If not inside a List, just render nothing (for type safety)
@@ -690,8 +741,8 @@ const ListDropdown = (props) => {
     const dropdownContextValue = useMemo(() => ({
         currentSection: undefined,
     }), []);
-    // Open dropdown dialog when triggered
-    useEffect(() => {
+    // Open dropdown dialog when triggered (before paint to avoid flash)
+    useLayoutEffect(() => {
         if (isDropdownOpen && !dialog.stack.length) {
             // Pass the children to the dialog to render them there
             dialog.push({
@@ -728,15 +779,16 @@ const ListDropdown = (props) => {
                         // minWidth: value.length + 4,
                         flexDirection: 'row',
                         flexShrink: 0,
-                        backgroundColor: isHovered ? Theme.backgroundPanel : undefined,
+                        backgroundColor: isHovered ? theme.backgroundPanel : undefined,
                     }, onMouseMove: () => setIsHovered(true), onMouseOut: () => setIsHovered(false), onMouseDown: () => {
                         // Open dropdown when clicked
                         if (!isDropdownOpen) {
                             listContext.openDropdown();
                         }
-                    }, children: [_jsx("text", { flexShrink: 0, fg: isHovered ? Theme.text : Theme.textMuted, selectable: false, children: displayValue }), _jsxs("text", { flexShrink: 0, fg: isHovered ? Theme.text : Theme.textMuted, selectable: false, children: [' ', "\u25BE"] })] }, dropdownState.value)] }) }));
+                    }, children: [listContext.isLoading ? (_jsx(LoadingText, { isLoading: true, color: isHovered ? theme.text : theme.textMuted, children: displayValue || 'Loading...' })) : (_jsx("text", { flexShrink: 0, fg: isHovered ? theme.text : theme.textMuted, selectable: false, children: displayValue })), _jsxs("text", { flexShrink: 0, fg: isHovered ? theme.text : theme.textMuted, selectable: false, children: [' ', "\u25BE"] })] }, dropdownState.value)] }) }));
 };
 ListDropdown.Item = (props) => {
+    const theme = useTheme();
     const dropdownContext = useContext(DropdownContext);
     const [isHovered, setIsHovered] = useState(false);
     // If not inside a Dropdown, just render nothing
@@ -781,22 +833,23 @@ ListDropdown.Item = (props) => {
         return (_jsx("box", { style: {
                 flexDirection: 'row',
                 backgroundColor: isActive
-                    ? Theme.primary
+                    ? theme.primary
                     : isHovered
-                        ? Theme.backgroundPanel
+                        ? 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", { flexShrink: 0, fg: Theme.background, selectable: false, children: ["\u203A", ''] })), _jsx("text", { flexShrink: 0, fg: isActive
-                            ? Theme.background
+            }, border: false, onMouseMove: handleMouseMove, onMouseOut: () => setIsHovered(false), onMouseDown: handleMouseDown, children: _jsxs("box", { style: { flexDirection: 'row' }, children: [isActive && (_jsxs("text", { flexShrink: 0, fg: theme.background, selectable: false, children: ["\u203A", ''] })), _jsx("text", { flexShrink: 0, fg: isActive
+                            ? theme.background
                             : isCurrent
-                                ? Theme.primary
-                                : Theme.text, attributes: isActive ? TextAttributes.BOLD : undefined, selectable: false, children: props.title })] }) }));
+                                ? theme.primary
+                                : theme.text, attributes: isActive ? TextAttributes.BOLD : undefined, selectable: false, children: props.title })] }) }));
     }
     return null;
 };
 ListDropdown.Section = (props) => {
+    const theme = useTheme();
     const parentContext = useContext(DropdownContext);
     // If not inside a Dropdown, just render nothing
     if (!parentContext) {
@@ -811,23 +864,25 @@ ListDropdown.Section = (props) => {
     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", { flexShrink: 0, fg: Theme.accent, attributes: TextAttributes.BOLD, children: props.title }) })), _jsx(DropdownContext.Provider, { value: sectionContextValue, children: props.children })] }));
+    return (_jsxs(_Fragment, { children: [showTitle && (_jsx("box", { style: { paddingTop: 1, paddingLeft: 1 }, children: _jsx("text", { flexShrink: 0, fg: theme.accent, attributes: TextAttributes.BOLD, children: props.title }) })), _jsx(DropdownContext.Provider, { value: sectionContextValue, children: props.children })] }));
 };
 List.Item = ListItem;
 const ListSection = (props) => {
+    const theme = useTheme();
     const parentContext = useContext(ListSectionContext);
     const listContext = useContext(ListContext);
     const searchText = listContext?.searchText || '';
-    // Don't render empty sections
-    if (React.Children.count(props.children) === 0) {
-        return null;
-    }
     // Create new context with section title and search text
+    // NOTE: Must be called before any early returns to satisfy React hooks rules
     const sectionContextValue = useMemo(() => ({
         ...parentContext,
         sectionTitle: props.title,
         searchText,
     }), [parentContext, props.title, searchText]);
+    // Don't render empty sections
+    if (React.Children.count(props.children) === 0) {
+        return null;
+    }
     const isSearching = searchText.trim().length > 0;
     const children = (_jsx(ListSectionContext.Provider, { value: sectionContextValue, children: props.children }));
     if (isSearching) {
@@ -835,43 +890,31 @@ const ListSection = (props) => {
     }
     return (_jsxs("box", { style: { marginBottom: 1 }, children: [props.title && (_jsx("box", { border: false, style: {
                     paddingLeft: 1,
-                }, children: _jsx("text", { flexShrink: 0, fg: Theme.accent, attributes: TextAttributes.BOLD, children: props.title }) })), children] }));
+                }, children: _jsx("text", { flexShrink: 0, fg: theme.accent, attributes: TextAttributes.BOLD, children: props.title }) })), children] }));
 };
 List.Section = ListSection;
 List.Dropdown = ListDropdown;
-List.EmptyView = (props) => {
-    const dialog = useDialog();
+// Inner component for EmptyView content (needs hooks at top level)
+function EmptyViewContent(props) {
+    const theme = useTheme();
     const inFocus = useIsInFocus();
     // Handle keyboard for actions
     useKeyboard((evt) => {
         if (!inFocus)
             return;
-        // Handle Ctrl+K to show actions (always show panel, even without actions)
+        // Handle Ctrl+K to show actions dialog via portal
         if (evt.name === 'k' && evt.ctrl) {
-            dialog.pushActions(props.actions || _jsx(ActionPanel, {}));
+            if (props.actions) {
+                useStore.setState({ showActionsDialog: true });
+            }
             return;
         }
-        // Handle Enter to execute first action
+        // Handle Enter to auto-execute first action via ActionPanel
         if (evt.name === 'return' && props.actions) {
             useStore.setState({ shouldAutoExecuteFirstAction: true });
-            dialog.pushActions(props.actions);
         }
     });
-    // Get icon string from ImageLike
-    const getIconString = (icon) => {
-        if (typeof icon === 'string') {
-            return getIconEmoji(icon);
-        }
-        if (icon && typeof icon === 'object' && 'source' in icon) {
-            // For { source: string } or { source: { light, dark } } objects
-            const source = icon.source;
-            if (typeof source === 'string') {
-                return getIconEmoji(source);
-            }
-        }
-        return null;
-    };
-    const iconEmoji = props.icon ? getIconString(props.icon) : null;
+    const iconEmoji = props.icon ? getIconValue(props.icon) || null : null;
     return (_jsxs("box", { style: {
             flexDirection: 'column',
             alignItems: 'center',
@@ -882,7 +925,20 @@ List.EmptyView = (props) => {
             paddingLeft: 2,
             paddingRight: 2,
             gap: 1,
-        }, children: [iconEmoji && (_jsx("text", { flexShrink: 0, fg: Theme.textMuted, style: { marginBottom: 1 }, children: iconEmoji })), props.title && (_jsx("text", { flexShrink: 0, fg: Theme.text, attributes: TextAttributes.BOLD, children: props.title?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || '' })), props.description && (_jsx("text", { flexShrink: 0, fg: Theme.textMuted, wrapMode: 'word', children: props.description?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || '' }))] }));
+        }, children: [iconEmoji && (_jsx("text", { flexShrink: 0, fg: theme.textMuted, style: { marginBottom: 1 }, children: iconEmoji })), props.title && (_jsx("text", { flexShrink: 0, fg: theme.text, attributes: TextAttributes.BOLD, children: props.title?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || '' })), props.description && (_jsx("text", { flexShrink: 0, fg: theme.textMuted, wrapMode: 'word', children: props.description?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || '' })), props.actions && _jsx(Offscreen, { children: props.actions })] }));
+}
+List.EmptyView = (props) => {
+    const listContext = useContext(ListContext);
+    // Register that a custom empty view exists
+    useLayoutEffect(() => {
+        if (listContext?.customEmptyViewRef) {
+            listContext.customEmptyViewRef.current = true;
+            return () => {
+                listContext.customEmptyViewRef.current = false;
+            };
+        }
+    }, [listContext]);
+    return (_jsx(ShowOnNoItems, { isCustomEmptyView: true, children: _jsx(EmptyViewContent, { ...props }) }));
 };
 export default List;
 // Grid uses List internally with a different visual representation