termcast 1.3.30 → 1.3.32

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 } from '@opentui/react';
+import { useKeyboard, flushSync } from '@opentui/react';
 import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { LoadingBar } from 'termcast/src/components/loading-bar';
+import { Footer } from 'termcast/src/components/footer';
 import { createDescendants } from 'termcast/src/descendants';
 import { useStore } from 'termcast/src/state';
 import { useDialog } from 'termcast/src/internal/dialog';
@@ -12,6 +13,7 @@ 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';
 export { Color };
 function formatRelativeDate(date) {
@@ -47,15 +49,10 @@ function formatRelativeDate(date) {
 function ListFooter() {
     const firstActionTitle = useStore((s) => s.firstActionTitle);
     const hasToast = useStore((s) => s.toast !== null);
-    const content = hasToast ? null : (_jsxs(_Fragment, { children: [firstActionTitle && (_jsxs(_Fragment, { children: [_jsx("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: "\u21B5" }), _jsxs("text", { fg: Theme.textMuted, children: [" ", firstActionTitle.toLowerCase()] })] })), _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" })] }));
-    return (_jsx("box", { border: false, height: 1, style: {
-            paddingLeft: 1,
-            flexShrink: 0,
-            paddingRight: 1,
-            paddingTop: 1,
-            marginTop: 1,
-            flexDirection: 'row',
-        }, children: content }));
+    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" })] })] }));
+    return _jsx(Footer, { hidePoweredBy: isShowingDetail, children: content });
 }
 const ListContext = createContext(undefined);
 // Helper function to determine if an item should be visible based on search
@@ -74,7 +71,7 @@ function shouldItemBeVisible(searchQuery, props) {
         .toLowerCase();
     return searchableText.includes(needle);
 }
-const { DescendantsProvider: ListDescendantsProvider, useDescendants: useListDescendants, useDescendant: useListItemDescendant, } = createDescendants();
+const { DescendantsProvider: ListDescendantsProvider, useDescendants: useListDescendants, useDescendant: useListItemDescendant, useDescendantsRerender: useListDescendantsRerender, useDescendantsMap: useListDescendantsMap, } = createDescendants();
 const { DescendantsProvider: DropdownDescendantsProvider, useDescendants: useDropdownDescendants, useDescendant: useDropdownItemDescendant, } = createDescendants();
 const DropdownContext = createContext(undefined);
 function ListDropdownDialog(props) {
@@ -84,8 +81,10 @@ function ListDropdownDialog(props) {
     const descendantsContext = useDropdownDescendants();
     // Wrapper function that updates search text
     const setSearchText = (value) => {
-        setSearchTextRaw(value);
-        // TODO: use flushSync when available to force descendants to update visibility
+        // Using flushSync to force descendants to update visibility before querying
+        flushSync(() => {
+            setSearchTextRaw(value);
+        });
         const items = Object.values(descendantsContext.map.current)
             .filter((item) => item.index !== -1 && item.props?.visible !== false)
             .sort((a, b) => a.index - b.index);
@@ -144,13 +143,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", { attributes: TextAttributes.BOLD, children: props.tooltip }), _jsx("text", { fg: Theme.textMuted, children: "esc" })] }), _jsx("box", { style: { paddingTop: 1, paddingBottom: 1 }, children: _jsx("textarea", { ref: inputRef, height: 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: {
+                                    }, 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: {
                                     currentSection: undefined,
                                     selectedIndex,
                                     setSelectedIndex,
@@ -160,18 +159,12 @@ function ListDropdownDialog(props) {
                                     onChange: (value) => {
                                         props.onChange?.(value);
                                     },
-                                }, children: props.children }) }), props.isLoading && (_jsx("box", { style: { paddingLeft: 1 }, children: _jsx("text", { 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 hasToast = useStore((s) => s.toast !== null);
-    const content = hasToast ? null : (_jsxs(_Fragment, { 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" })] }));
-    return (_jsx("box", { border: false, height: 1, style: {
-            paddingRight: 2,
-            paddingLeft: 3,
-            paddingBottom: 1,
-            paddingTop: 1,
-            flexDirection: 'row',
-        }, children: content }));
+    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) {
@@ -186,7 +179,7 @@ function ListItemRow(props) {
                     : accessory.text?.value;
                 const textColor = typeof accessory.text === 'object' ? accessory.text?.color : undefined;
                 if (textValue) {
-                    accessoryElements.push(_jsx("text", { 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) {
@@ -195,7 +188,7 @@ function ListItemRow(props) {
                     : accessory.tag?.value;
                 const tagColor = typeof accessory.tag === 'object' ? accessory.tag?.color : undefined;
                 if (tagValue) {
-                    accessoryElements.push(_jsxs("text", { 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) {
@@ -207,7 +200,7 @@ function ListItemRow(props) {
                     : undefined;
                 if (dateValue) {
                     const formatted = formatRelativeDate(dateValue);
-                    accessoryElements.push(_jsx("text", { 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()}`));
                 }
             }
         });
@@ -227,7 +220,7 @@ 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", { fg: active ? Theme.background : Theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, wrapMode: "none", children: active ? '›' : ' ' }), icon && _jsxs("text", { fg: active ? Theme.background : iconColor || Theme.text, selectable: false, wrapMode: "none", children: [getIconEmoji(icon), " "] }), _jsx("text", { fg: active ? Theme.background : Theme.text, attributes: active ? TextAttributes.BOLD : undefined, selectable: false, wrapMode: "none", children: title })] }), subtitle && (_jsx("text", { 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", { 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;
@@ -284,9 +277,10 @@ export const List = (props) => {
     };
     // Wrapper function that updates search text
     const setInternalSearchText = (value) => {
-        setInternalSearchTextRaw(value);
-        // TODO: use flushSync when available to force descendants to update visibility
-        // before querying. For now, we compute visibility inline with the new search value.
+        // Using flushSync to force descendants to update visibility before querying
+        flushSync(() => {
+            setInternalSearchTextRaw(value);
+        });
         const items = Object.values(descendantsContext.map.current)
             .filter((item) => item.index !== -1 && item.props?.visible !== false)
             .sort((a, b) => a.index - b.index);
@@ -402,11 +396,15 @@ export const List = (props) => {
         if (evt.name === 'k' && evt.ctrl) {
             // Show current item's actions if available
             if (currentItem?.props?.actions) {
-                dialog.push(currentItem.props.actions, 'bottom-right');
+                dialog.pushActions(currentItem.props.actions);
             }
             // Otherwise show List's own actions
             else if (props.actions) {
-                dialog.push(props.actions, 'bottom-right');
+                dialog.pushActions(props.actions);
+            }
+            // Otherwise show empty ActionPanel (still has Settings section with Configure Extension, etc.)
+            else {
+                dialog.pushActions(_jsx(ActionPanel, {}));
             }
             return;
         }
@@ -420,7 +418,7 @@ export const List = (props) => {
                 return;
             if (currentItem.props.actions) {
                 useStore.setState({ shouldAutoExecuteFirstAction: true });
-                dialog.push(currentItem.props.actions, 'bottom-right');
+                dialog.pushActions(currentItem.props.actions);
             }
         }
     });
@@ -449,17 +447,17 @@ export const List = (props) => {
                                 flexDirection: 'row',
                                 justifyContent: 'space-between',
                                 alignItems: 'center',
-                            }, children: [_jsx("box", { style: {
+                            }, children: [_jsxs("box", { style: {
                                         flexGrow: 1,
-                                        flexDirection: 'column',
+                                        flexDirection: 'row',
                                         flexShrink: 1,
-                                    }, children: _jsx("textarea", { ref: inputRef, height: 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: isShowingDetail ? 0 : 1, flexShrink: 1, flexDirection: 'column' }, children: [_jsx(ScrollBox, { ref: scrollBoxRef, focused: false, flexGrow: 1, flexShrink: 1, style: {
+                                    }, 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' },
+                                            ], 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: {
                                             rootOptions: {
                                                 backgroundColor: undefined,
                                             },
@@ -473,13 +471,42 @@ export const List = (props) => {
                                     paddingRight: 1,
                                 }, border: ['left'], borderStyle: 'single', borderColor: Theme.border, children: currentDetail }))] })] }) }) }));
 };
+function DefaultEmptyView() {
+    // Subscribe to re-render when items are added/removed
+    void useListDescendantsRerender();
+    // Get live map ref for reading in useLayoutEffect
+    const map = useListDescendantsMap();
+    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
+    // 2. committedMap is stale - it's a snapshot from the previous render cycle and doesn't
+    //    reflect prop changes like 'visible' (only tracks which items exist, not their props)
+    // 3. Items register in their own useLayoutEffect, so map.current is only populated after
+    //    all items' layout effects have run
+    useLayoutEffect(() => {
+        const items = Object.values(map.current)
+            .filter((item) => item.index !== -1 && item.props?.visible !== false);
+        setHasVisibleItems(items.length > 0);
+    });
+    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" }) }));
+}
 // 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 }));
+    return (_jsxs(ListSectionContext.Provider, { value: { searchText }, children: [children, _jsx(DefaultEmptyView, {})] }));
 }
 const ListSectionContext = createContext({});
 const ListItem = (props) => {
@@ -531,8 +558,8 @@ const ListItem = (props) => {
     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');
+            if (isActive) {
+                dialog.pushActions(props.actions || _jsx(ActionPanel, {}));
             }
             else if (listContext.setSelectedIndex) {
                 // Otherwise just select the item
@@ -570,7 +597,9 @@ const ListItem = (props) => {
 };
 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..." }) })), _jsx(ScrollBox, { focused: false, flexGrow: 1, flexShrink: 1, style: {
+    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: {
                         backgroundColor: undefined,
                     },
@@ -583,19 +612,19 @@ const ListItemDetailMetadata = (props) => {
     return (_jsx("box", { style: { flexDirection: 'column' }, children: props.children }));
 };
 const ListItemDetailMetadataLabel = (props) => {
-    return (_jsxs("box", { style: { flexDirection: 'column', paddingBottom: 0.5 }, children: [_jsxs("text", { fg: Theme.textMuted, children: [props.title, ":"] }), props.text && _jsx("text", { fg: Theme.text, children: props.text })] }));
+    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 })] }));
 };
 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" }) }));
+    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", { fg: Theme.textMuted, children: [props.title, ":"] }), _jsx("text", { fg: Theme.link, children: props.text })] }));
+    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", { fg: Theme.textMuted, children: [props.title, ":"] }), _jsx("box", { style: { flexDirection: 'row', paddingLeft: 1 }, children: props.children })] }));
+    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", { fg: resolveColor(props.color) || Theme.accent, children: ["[", props.text, "]"] }) }));
+    return (_jsx("box", { style: { paddingRight: 1 }, children: _jsxs("text", { flexShrink: 0, fg: resolveColor(props.color) || Theme.accent, children: ["[", props.text, "]"] }) }));
 };
 ListItemDetail.Metadata = ListItemDetailMetadata;
 ListItemDetailMetadata.Label = ListItemDetailMetadataLabel;
@@ -604,6 +633,14 @@ ListItemDetailMetadata.Link = ListItemDetailMetadataLink;
 ListItemDetailMetadata.TagList = ListItemDetailMetadataTagList;
 ListItemDetailMetadataTagList.Item = ListItemDetailMetadataTagListItem;
 ListItem.Detail = ListItemDetail;
+/**
+ * A dropdown menu shown in the right-hand-side of the search bar.
+ * Open it with Ctrl+P or by clicking on it.
+ *
+ * Note: There is no built-in "All" or reset option. If you want users to be
+ * able to reset the filter, add a `List.Dropdown.Item` with title="All" and
+ * value="" (or your preferred reset value) at the top of your dropdown items.
+ */
 const ListDropdown = (props) => {
     const listContext = useContext(ListContext);
     const [isHovered, setIsHovered] = useState(false);
@@ -657,27 +694,30 @@ const ListDropdown = (props) => {
     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;
+            dialog.push({
+                element: (_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');
+                        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 })),
+                position: 'center',
+            });
         }
     }, [isDropdownOpen, props.children]);
     // Display the title from our state
@@ -694,7 +734,7 @@ const ListDropdown = (props) => {
                         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)] }) }));
+                    }, 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)] }) }));
 };
 ListDropdown.Item = (props) => {
     const dropdownContext = useContext(DropdownContext);
@@ -748,7 +788,7 @@ ListDropdown.Item = (props) => {
                 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
+            }, 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
@@ -771,7 +811,7 @@ 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", { 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) => {
@@ -795,7 +835,7 @@ const ListSection = (props) => {
     }
     return (_jsxs("box", { style: { marginBottom: 1 }, children: [props.title && (_jsx("box", { border: false, style: {
                     paddingLeft: 1,
-                }, children: _jsx("text", { 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;
@@ -806,15 +846,15 @@ List.EmptyView = (props) => {
     useKeyboard((evt) => {
         if (!inFocus)
             return;
-        // Handle Ctrl+K to show actions
-        if (evt.name === 'k' && evt.ctrl && props.actions) {
-            dialog.push(props.actions, 'bottom-right');
+        // Handle Ctrl+K to show actions (always show panel, even without actions)
+        if (evt.name === 'k' && evt.ctrl) {
+            dialog.pushActions(props.actions || _jsx(ActionPanel, {}));
             return;
         }
         // Handle Enter to execute first action
         if (evt.name === 'return' && props.actions) {
             useStore.setState({ shouldAutoExecuteFirstAction: true });
-            dialog.push(props.actions, 'bottom-right');
+            dialog.pushActions(props.actions);
         }
     });
     // Get icon string from ImageLike
@@ -842,7 +882,7 @@ List.EmptyView = (props) => {
             paddingLeft: 2,
             paddingRight: 2,
             gap: 1,
-        }, children: [iconEmoji && (_jsx("text", { fg: Theme.textMuted, style: { marginBottom: 1 }, children: iconEmoji })), props.title && (_jsx("text", { fg: Theme.text, attributes: TextAttributes.BOLD, children: props.title?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || '' })), props.description && (_jsx("text", { 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') || '' }))] }));
 };
 export default List;
 // Grid uses List internally with a different visual representation