termcast 1.3.33 → 1.3.35

package/src/components/icon.tsx

@@ -1,32 +1,394 @@
 import { pascalCase } from 'change-case'
 
-const ICON_SHAPES = [
-  '■', // filled square
-  '●', // filled circle
-  '◆', // filled diamond
-  '▲', // filled triangle up
-  '▼', // filled triangle down
-  // '★', // filled star
-  // '♦', // diamond suit
-  // '♥', // heart suit
-  // '♠', // spade suit
-  // '♣', // club suit
-]
+// Semantic unicode mapping for Raycast icon IDs.
+// Uses ONLY characters from emoji-safe unicode ranges for consistent terminal text rendering.
+// Safe ranges used: Arrows (U+2190), Math Operators (U+2200), Geometric Shapes (U+25A0,
+// excluding U+25B6/U+25C0), Block Elements (U+2580), Misc Technical non-emoji subset,
+// Box Drawing (U+2500), Letterlike Symbols, General Punctuation, Latin/ASCII.
+const ICON_MAP: Record<string, string> = {
+  'add-person-16': '⊕',
+  'airplane-16': '↗',
+  'airplane-filled-16': '↗',
+  'airplane-landing-16': '↘',
+  'airplane-takeoff-16': '↗',
+  'airpods-16': '⊚',
+  'alarm-16': '⌀',
+  'alarm-ringing-16': '⌀',
+  'align-centre-16': '≡',
+  'align-left-16': '≡',
+  'align-right-16': '≡',
+  'american-football-16': '◇',
+  'anchor-16': '⊥',
+  'app-window-16': '⊞',
+  'app-window-grid-2x2-16': '⊞',
+  'app-window-grid-3x3-16': '⊞',
+  'app-window-list-16': '≡',
+  'app-window-sidebar-left-16': '◧',
+  'app-window-sidebar-right-16': '◨',
+  'arrow-clockwise-16': '↻',
+  'arrow-counter-clockwise-16': '↺',
+  'arrow-down-16': '↓',
+  'arrow-down-circle-16': '⇩',
+  'arrow-down-circle-filled-16': '⇩',
+  'arrow-left-16': '←',
+  'arrow-left-circle-16': '⇦',
+  'arrow-left-circle-filled-16': '⇦',
+  'arrow-ne-16': '↗',
+  'arrow-right-16': '→',
+  'arrow-right-circle-16': '⇨',
+  'arrow-right-circle-filled-16': '⇨',
+  'arrow-up-16': '↑',
+  'arrow-up-circle-16': '⇧',
+  'arrow-up-circle-filled-16': '⇧',
+  'arrows-contract-16': '⇤',
+  'arrows-expand-16': '⇥',
+  'at-symbol-16': '@',
+  'band-aid-16': '╋',
+  'bank-note-16': '¤',
+  'bar-chart-16': '▊',
+  'bar-code-16': '▐',
+  'bath-tub-16': '▬',
+  'battery-16': '▮',
+  'battery-charging-16': '▮',
+  'battery-disabled-16': '▯',
+  'bell-16': '⍾',
+  'bell-disabled-16': '⍻',
+  'bike-16': '⎌',
+  'binoculars-16': '⌕',
+  'bird-16': '∿',
+  'blank-document-16': '▯',
+  'bluetooth-16': 'ᛒ',
+  'boat-16': '≈',
+  'bold-16': '𝐁',
+  'bolt-16': '↯',
+  'bolt-disabled-16': '↯',
+  'book-16': '⊞',
+  'bookmark-16': '▷',
+  'box-16': '□',
+  'brush-16': '⊘',
+  'bug-16': '⊗',
+  'building-16': '⌂',
+  'bullet-points-16': '•',
+  'bulls-eye-16': '◎',
+  'bulls-eye-missed-16': '◌',
+  'buoy-16': '◉',
+  'calculator-16': '⊞',
+  'calendar-16': '▦',
+  'camera-16': '⌬',
+  'car-16': '⊳',
+  'cart-16': '⊲',
+  'cd-16': '◎',
+  'center-16': '⊡',
+  'check-16': '✓',
+  'check-circle-16': '✓',
+  'check-list-16': '✓',
+  'check-rosette-16': '✓',
+  'checkmark-16': '✓',
+  'chess-piece-16': '⊠',
+  'chevron-down-16': '⌄',
+  'chevron-down-small-16': '⌄',
+  'chevron-left-16': '‹',
+  'chevron-left-small-16': '‹',
+  'chevron-right-16': '›',
+  'chevron-right-small-16': '›',
+  'chevron-up-16': '⌃',
+  'chevron-up-down-16': '⇕',
+  'chevron-up-small-16': '⌃',
+  'circle-16': '○',
+  'circle-disabled-16': '⊘',
+  'circle-ellipsis-16': '◯',
+  'circle-filled-16': '●',
+  'circle-progress-16': '◔',
+  'circle-progress-100-16': '●',
+  'circle-progress-25-16': '◔',
+  'circle-progress-50-16': '◑',
+  'circle-progress-75-16': '◕',
+  'clear-formatting-16': '⌧',
+  'clipboard-16': '⎘',
+  'clock-16': '◴',
+  'cloud-16': '◠',
+  'cloud-lightning-16': '◠',
+  'cloud-rain-16': '◠',
+  'cloud-snow-16': '◠',
+  'cloud-sun-16': '◠',
+  'code-16': '⟨⟩',
+  'code-block-16': '▤',
+  'cog-16': '⊛',
+  'coin-16': '¤',
+  'coins-16': '¤',
+  'command-symbol-16': '⌘',
+  'compass-16': '◎',
+  'computer-chip-16': '⎔',
+  'contrast-16': '◑',
+  'copy-clipboard-16': '⎘',
+  'credit-card-16': '▬',
+  'cricket-ball-16': '◉',
+  'crop-16': '⌌',
+  'crown-16': '△',
+  'crypto-16': '₿',
+  'delete-document-16': '⌧',
+  'desktop-16': '⎚',
+  'devices-16': '⎚',
+  'dna-16': '⧖',
+  'document-16': '▯',
+  'dot-16': '·',
+  'download-16': '⤓',
+  'droplets-16': '≋',
+  'duplicate-16': '⧉',
+  'edit-shape-16': '⌑',
+  'eject-16': '△',
+  'ellipsis-16': '…',
+  'ellipsis-vertical-16': '⋮',
+  'emoji-16': '◠',
+  'emoji-sad-16': '◡',
+  'envelope-16': '▷',
+  'eraser-16': '⌫',
+  'exclamationmark-16': '!',
+  'exclamationmark-2-16': '‼',
+  'exclamationmark-3-16': '‼',
+  'eye-16': '◉',
+  'eye-disabled-16': '⊘',
+  'eye-dropper-16': '⊙',
+  'female-16': '⊕',
+  'film-strip-16': '▥',
+  'filter-16': '⧩',
+  'finder-16': '⌕',
+  'fingerprint-16': '◉',
+  'flag-16': '⊳',
+  'folder-16': '▤',
+  'footprints-16': '⊹',
+  'forward-16': '▸',
+  'forward-filled-16': '▸',
+  'fountain-tip-16': '⌑',
+  'full-signal-16': '▊',
+  'game-controller-16': '⊞',
+  'gauge-16': '◔',
+  'geopin-16': '⊙',
+  'germ-16': '※',
+  'gift-16': '⊠',
+  'glasses-16': '∞',
+  'globe-01-16': '⊕',
+  'goal-16': '⊡',
+  'hammer-16': '⊤',
+  'hard-drive-16': '▬',
+  'hashtag-16': '#',
+  'heading-16': '𝐇',
+  'headphones-16': '⊚',
+  'heart-16': '◆',
+  'heart-disabled-16': '◇',
+  'heartbeat-16': '◆',
+  'highlight-16': '▮',
+  'hourglass-16': '⧖',
+  'house-16': '⌂',
+  'humidity-16': '≋',
+  'image-16': '⊞',
+  'important-01-16': '‼',
+  'info-01-16': 'ℹ',
+  'italics-16': '𝐼',
+  'key-16': '⊢',
+  'keyboard-16': '⌗',
+  'layers-16': '◫',
+  'leaderboard-16': '▊',
+  'leaf-16': '∿',
+  'light-bulb-16': '※',
+  'light-bulb-off-16': '※',
+  'line-chart-16': '⌒',
+  'link-16': '∞',
+  'livestream-01-16': '◉',
+  'livestream-disabled-01-16': '◌',
+  'lock-16': '⊟',
+  'lock-disabled-16': '⊠',
+  'lock-unlocked-16': '⊠',
+  'logout-16': '⎋',
+  'lorry-16': '⊳',
+  'lowercase-16': 'aᵃ',
+  'magnifying-glass-16': '⌕',
+  'male-16': '⊕',
+  'map-16': '▦',
+  'mask-16': '◑',
+  'maximize-16': '⤢',
+  'medical-support-16': '╋',
+  'megaphone-16': '⊳',
+  'memory-stick-16': '▬',
+  'microphone-16': '⊙',
+  'microphone-disabled-16': '⊘',
+  'minimize-16': '⤡',
+  'minus-16': '−',
+  'minus-circle-16': '⊖',
+  'minus-circle-filled-16': '⊖',
+  'mobile-16': '▯',
+  'monitor-16': '⎚',
+  'moon-16': '◐',
+  'moon-down-16': '◐',
+  'moon-up-16': '◐',
+  'moonrise-16': '◐',
+  'mountain-16': '△',
+  'mouse-16': '⊙',
+  'move-16': '⊹',
+  'mug-16': '⊔',
+  'mug-steam-16': '⊔',
+  'multiply-16': '×',
+  'music-16': '∿',
+  'network-16': '⊕',
+  'new-document-16': '▯',
+  'new-folder-16': '▤',
+  'number-list-16': '⑴',
+  'paperclip-16': '⊶',
+  'paragraph-16': '¶',
+  'patch-16': '╋',
+  'pause-16': '‖',
+  'pause-filled-16': '‖',
+  'pencil-16': '⌑',
+  'person-16': '⊙',
+  'person-circle-16': '⊙',
+  'person-lines-16': '⊙',
+  'phone-16': '⌕',
+  'phone-ringing-16': '⌕',
+  'pie-chart-16': '◔',
+  'pill-16': '⊝',
+  'pin-16': '⊙',
+  'pin-disabled-16': '⊘',
+  'play-16': '▸',
+  'play-filled-16': '▸',
+  'plug-16': '⊢',
+  'plus-16': '+',
+  'plus-circle-16': '⊕',
+  'plus-circle-filled-16': '⊕',
+  'plus-minus-divide-multiply-16': '±',
+  'plus-square-16': '⊞',
+  'plus-top-right-square-16': '⊞',
+  'power-16': '⊙',
+  'print-16': '⎙',
+  'question-mark-circle-16': '?',
+  'quicklink-16': '∞',
+  'quotation-marks-16': '❝',
+  'quote-block-16': '❝',
+  'racket-16': '⊙',
+  'raindrop-16': '≋',
+  'raycast-logo-neg-16': '◆',
+  'raycast-logo-pos-16': '◆',
+  'receipt-16': '▯',
+  'redo-16': '↻',
+  'remove-person-16': '⊖',
+  'repeat-16': '↻',
+  'replace-16': '⇄',
+  'replace-one-16': '⇄',
+  'reply-16': '↩',
+  'rewind-16': '◂',
+  'rewind-filled-16': '◂',
+  'rocket-16': '⁕',
+  'rosette-16': '✦',
+  'rotate-anti-clockwise-16': '↺',
+  'rotate-clockwise-16': '↻',
+  'rss-16': '◉',
+  'ruler-16': '⊢',
+  'save-document-16': '⊞',
+  'shield-01-16': '⊛',
+  'short-paragraph-16': '¶',
+  'shuffle-16': '⇝',
+  'signal-0-16': '▁',
+  'signal-1-16': '▂',
+  'signal-2-16': '▄',
+  'signal-3-16': '█',
+  'snippets-16': '⊠',
+  'snowflake-16': '※',
+  'soccer-ball-16': '◎',
+  'speaker-16': '◁',
+  'speaker-down-16': '◁',
+  'speaker-high-16': '◂',
+  'speaker-low-16': '◁',
+  'speaker-off-16': '◃',
+  'speaker-on-16': '◂',
+  'speaker-up-16': '◂',
+  'speech-bubble-16': '⊐',
+  'speech-bubble-active-16': '⊐',
+  'speech-bubble-important-16': '⊐',
+  'square-ellipsis-16': '□',
+  'stacked-bars-1-16': '▁',
+  'stacked-bars-2-16': '▃',
+  'stacked-bars-3-16': '▅',
+  'stacked-bars-4-16': '▇',
+  'star-16': '★',
+  'star-circle-16': '★',
+  'star-disabled-16': '☆',
+  'stars-16': '✦',
+  'stop-16': '■',
+  'stop-filled-16': '■',
+  'stopwatch-16': '◴',
+  'store-16': '⊞',
+  'strike-through-16': 'S̶',
+  'sun-16': '※',
+  'sunrise-16': '※',
+  'swatch-16': '◧',
+  'switch-16': '⇋',
+  'syringe-16': '⊸',
+  'tack-16': '⊙',
+  'tack-disabled-16': '⊘',
+  'tag-16': '⊢',
+  'temperature-16': '⊥',
+  'tennis-ball-16': '◎',
+  'terminal-16': '>_',
+  'text-16': '𝐓',
+  'text-cursor-16': '⌶',
+  'text-input-16': '⌗',
+  'text-selection-16': '▮',
+  'thumbs-down-16': '⊘',
+  'thumbs-down-filled-16': '⊘',
+  'thumbs-up-16': '✓',
+  'thumbs-up-filled-16': '✓',
+  'ticket-16': '▬',
+  'torch-16': '※',
+  'train-16': '⊳',
+  'trash-16': '⌧',
+  'tray-16': '⊔',
+  'tree-16': '⊥',
+  'trophy-16': '⊛',
+  'two-people-16': '⊙',
+  'umbrella-16': '△',
+  'underline-16': 'U̲',
+  'undo-16': '↺',
+  'upload-16': '⤒',
+  'uppercase-16': 'Aᴬ',
+  'video-16': '▸',
+  'video-disabled-16': '⊘',
+  'wallet-16': '▬',
+  'wand-16': '✧',
+  'warning-16': '△',
+  'waveform-16': '∿',
+  'weights-16': '⊥',
+  'wifi-16': '⊛',
+  'wifi-disabled-16': '⊘',
+  'wind-16': '≋',
+  'windsock-16': '⊳',
+  'wrench-screwdriver-16': '⊤',
+  'wrist-watch-16': '◴',
+  'x-mark-circle-16': '×',
+  'x-mark-circle-filled-16': '×',
+  'x-mark-circle-half-dash-16': '×',
+  'x-mark-top-right-square-16': '×',
+  'xmark-16': '×',
+}
 
-function hashString(str: string): number {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash
+// Number icons (number-00-16 through number-99-16) use circled numbers where available,
+// falling back to the plain digit string for values without unicode circled forms.
+for (let i = 0; i <= 99; i++) {
+  const id = `number-${String(i).padStart(2, '0')}-16`
+  if (i >= 0 && i <= 20) {
+    // Unicode circled numbers: ⓪①②…⑳
+    ICON_MAP[id] = String.fromCodePoint(i === 0 ? 0x24EA : 0x2460 + i - 1)
+  } else if (i <= 50) {
+    // Unicode circled numbers 21-50: ㉑㉒…㊿
+    ICON_MAP[id] = String.fromCodePoint(0x3251 + i - 21)
+  } else {
+    // No standard circled unicode above 50, use plain digits
+    ICON_MAP[id] = String(i)
   }
-  return Math.abs(hash)
 }
 
+const FALLBACK_ICON = '●'
+
 export function getIconShape(iconId: string): string {
-  const hash = hashString(iconId)
-  const index = hash % ICON_SHAPES.length
-  return ICON_SHAPES[index]
+  return ICON_MAP[iconId] || FALLBACK_ICON
 }
 
 export const iconIds = [
@@ -591,7 +953,7 @@ export function getIconValue(icon: unknown): string {
 
   // Handle { fileIcon: string }
   if ('fileIcon' in obj && typeof obj.fileIcon === 'string') {
-    return '📁'
+    return '▤'
   }
 
   // Unknown format - return empty string instead of [object Object]

package/src/components/list.tsx

@@ -81,30 +81,30 @@ function ListFooter(): any {
   const hasDropdown = listContext?.hasDropdown ?? false
 
   const content = hasToast ? null : (
-    <box style={{ flexDirection: 'row', gap: 3 }}>
+    <box style={{ flexDirection: 'row', gap: 3, flexShrink: 0 }}>
       {firstActionTitle && (
-        <box style={{ flexDirection: 'row', gap: 1 }}>
+        <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
           <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             ↵
           </text>
           <text flexShrink={0} fg={theme.textMuted}>{firstActionTitle.toLowerCase()}</text>
         </box>
       )}
-      <box style={{ flexDirection: 'row', gap: 1 }}>
+      <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
         <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ↑↓
         </text>
         <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
       {hasDropdown && (
-        <box style={{ flexDirection: 'row', gap: 1 }}>
+        <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
           <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             ^p
           </text>
           <text flexShrink={0} fg={theme.textMuted}>dropdown</text>
         </box>
       )}
-      <box style={{ flexDirection: 'row', gap: 1 }}>
+      <box style={{ flexDirection: 'row', gap: 1, flexShrink: 0 }}>
         <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ^k
         </text>
@@ -774,8 +774,15 @@ export const List: ListType = (props) => {
   } = props
 
   const theme = useTheme()
-  const [internalSearchText, setInternalSearchTextRaw] = useState('')
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const currentStackSelectedListIndex = useStore((state) => {
+    const stack = state.navigationStack
+    const currentItem = stack[stack.length - 1]
+    return currentItem?.selectedListIndex
+  })
+  const [internalSearchText, setInternalSearchText] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState<number>(() => {
+    return currentStackSelectedListIndex ?? 0
+  })
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [currentDetail, setCurrentDetail] = useState<ReactNode>(null)
 
@@ -845,20 +852,55 @@ export const List: ListType = (props) => {
     setIsDropdownOpen(true)
   }
 
-  // Wrapper function that updates search text
-  const setInternalSearchText = (value: string) => {
-    // Using flushSync to force descendants to update visibility before querying
-    flushSync(() => {
-      setInternalSearchTextRaw(value)
+  const persistSelectedIndexInCurrentNavigationItem = (index: number) => {
+    useStore.setState((state) => {
+      const stack = state.navigationStack
+      const currentIndex = stack.length - 1
+      const currentItem = stack[currentIndex]
+      if (!currentItem) {
+        return {}
+      }
+
+      if (currentItem.selectedListIndex === index) {
+        return {}
+      }
+
+      const nextStack = [...stack]
+      nextStack[currentIndex] = {
+        ...currentItem,
+        selectedListIndex: index,
+      }
+
+      return {
+        navigationStack: nextStack,
+      }
     })
+  }
+
+  const setSelectedIndexWithPersistence = (index: number) => {
+    setSelectedIndex(index)
+    persistSelectedIndexInCurrentNavigationItem(index)
+  }
+
+  // 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)
+      setSelectedIndexWithPersistence(items[0].index)
     }
-  }
+  })
 
   const listContextValue = useMemo<ListContextValue>(
     () => ({
@@ -866,7 +908,7 @@ export const List: ListType = (props) => {
       setIsDropdownOpen,
       openDropdown,
       selectedIndex,
-      setSelectedIndex,
+      setSelectedIndex: setSelectedIndexWithPersistence,
       searchText,
       isFiltering: isFilteringEnabled,
       setCurrentDetail,
@@ -878,15 +920,15 @@ export const List: ListType = (props) => {
     [isDropdownOpen, selectedIndex, searchText, isFilteringEnabled, isShowingDetail, isLoading, searchBarAccessory],
   )
 
-  // Clear detail when detail view is hidden
-  useEffect(() => {
+  // 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)
@@ -894,7 +936,7 @@ export const List: ListType = (props) => {
 
       const foundItem = items.find((item) => item.props?.id === selectedItemId)
       if (foundItem) {
-        setSelectedIndex(foundItem.index)
+        setSelectedIndexWithPersistence(foundItem.index)
       }
     }
   }, [selectedItemId])
@@ -930,6 +972,21 @@ export const List: ListType = (props) => {
     scrollBox.scrollTo(Math.max(0, targetScrollTop))
   }
 
+  // Track whether onLoadMore has been called and we're waiting for new items.
+  // Reset when item count changes (new items arrived) so we can trigger again.
+  const paginationCalledRef = useRef(false)
+  const prevItemCountRef = useRef(0)
+
+  const triggerPaginationIfNeeded = (currentVisibleIndex: number, totalItems: number) => {
+    if (!props.pagination?.hasMore || paginationCalledRef.current) return
+    // Trigger when within 5 items of the end, matching Raycast's behavior
+    const threshold = Math.min(5, Math.max(1, Math.floor(totalItems * 0.2)))
+    if (totalItems - currentVisibleIndex <= threshold) {
+      paginationCalledRef.current = true
+      props.pagination.onLoadMore()
+    }
+  }
+
   const move = (direction: -1 | 1) => {
     // Get all visible items
     const items = Object.values(descendantsContext.map.current)
@@ -938,6 +995,12 @@ export const List: ListType = (props) => {
 
     if (items.length === 0) return
 
+    // Reset pagination lock when new items arrive
+    if (items.length !== prevItemCountRef.current) {
+      prevItemCountRef.current = items.length
+      paginationCalledRef.current = false
+    }
+
     // Find currently selected item's position in visible items
     let currentVisibleIndex = items.findIndex(
       (item) => item.index === selectedIndex,
@@ -945,13 +1008,21 @@ export const List: ListType = (props) => {
     if (currentVisibleIndex === -1) {
       // If current selection is not visible, select first visible item
       if (items[0]) {
-        setSelectedIndex(items[0].index)
+        setSelectedIndexWithPersistence(items[0].index)
       }
       return
     }
 
     // Calculate next visible index
     let nextVisibleIndex = currentVisibleIndex + direction
+
+    // When navigating past the end and pagination has more, don't wrap
+    if (direction === 1 && nextVisibleIndex >= items.length && props.pagination?.hasMore) {
+      triggerPaginationIfNeeded(currentVisibleIndex, items.length)
+      // Stay on the last item instead of wrapping
+      return
+    }
+
     if (nextVisibleIndex < 0) nextVisibleIndex = items.length - 1
     if (nextVisibleIndex >= items.length) nextVisibleIndex = 0
 
@@ -960,7 +1031,11 @@ export const List: ListType = (props) => {
       flushSync(() => {
         setSelectedIndex(nextItem.index)
       })
+      persistSelectedIndexInCurrentNavigationItem(nextItem.index)
       scrollToItem(nextItem)
+
+      // Check if we're approaching the end and should trigger pagination
+      triggerPaginationIfNeeded(nextVisibleIndex, items.length)
     }
   }
 
@@ -1102,10 +1177,11 @@ export const List: ListType = (props) => {
                   rootOptions: {
                     backgroundColor: undefined,
                   },
+                  viewportOptions: {
+                    paddingRight: 0,
+                  },
                   scrollbarOptions: {
-
-                    showArrows: true,
-
+                    visible: false,
                   },
                 }}
               >
@@ -1269,8 +1345,8 @@ const ListItem: ListItemType = (props) => {
   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)
     }
@@ -1486,8 +1562,8 @@ const ListDropdown: ListDropdownType = (props) => {
     [],
   )
 
-  // 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({