termcast 1.3.30 → 1.3.32

package/src/components/loading-text.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React from 'react'
 import { colord } from 'colord'
+import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
 
 interface LoadingTextProps {
   children: string
@@ -21,8 +22,7 @@ function generateWaveColors(baseColor: string): string[] {
 
 export function LoadingText(props: LoadingTextProps): any {
   const { children, isLoading = false, color = '#FFC000' } = props
-  const [position, setPosition] = useState(0)
-  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+  const tick = useAnimationTick(isLoading ? TICK_DIVISORS.LOADING_TEXT : 0)
 
   const characters = children.split('')
   const waveColors = generateWaveColors(color)
@@ -30,26 +30,7 @@ export function LoadingText(props: LoadingTextProps): any {
   // Add padding at the end to create a delay before the next loop
   const endPadding = 10
   const totalLength = characters.length + waveWidth + endPadding
-
-  useEffect(() => {
-    if (isLoading) {
-      intervalRef.current = setInterval(() => {
-        setPosition((prev) => (prev + 1) % totalLength)
-      }, 30)
-    } else {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-        intervalRef.current = null
-      }
-      setPosition(0)
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-      }
-    }
-  }, [isLoading, totalLength])
+  const position = isLoading ? tick % totalLength : 0
 
   const getCharacterColor = (index: number): string => {
     if (!isLoading) {

package/src/components/theme-picker.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { useKeyboard } from '@opentui/react'
+import { Theme, persistTheme } from 'termcast/src/theme'
+import { themeNames } from '../themes'
+import { useStore } from 'termcast/src/state'
+import { useDialog } from 'termcast/src/internal/dialog'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { Dropdown } from 'termcast/src/components/dropdown'
+
+export function ThemePicker(): any {
+  const dialog = useDialog()
+  const inFocus = useIsInFocus()
+  const currentThemeName = useStore((state) => state.currentThemeName)
+  const [previousTheme] = useState(currentThemeName)
+
+  const handleSelectionChange = (value: string) => {
+    // Preview theme on selection change
+    useStore.setState({ currentThemeName: value })
+  }
+
+  const handleChange = (value: string) => {
+    // Confirm selection
+    useStore.setState({ currentThemeName: value })
+    persistTheme(value)
+    dialog.clear()
+  }
+
+  useKeyboard((evt) => {
+    if (!inFocus) {
+      return
+    }
+    if (evt.name === 'escape') {
+      // Revert to previous theme on escape
+      useStore.setState({ currentThemeName: previousTheme })
+      dialog.clear()
+    }
+  })
+
+  return (
+    <Dropdown
+      tooltip="Change Theme"
+      placeholder="Search themes..."
+      filtering
+      onChange={handleChange}
+      onSelectionChange={handleSelectionChange}
+    >
+      {themeNames.map((name) => (
+        <Dropdown.Item
+          key={name}
+          title={name}
+          value={name}
+          color={name === previousTheme ? Theme.primary : undefined}
+        />
+      ))}
+    </Dropdown>
+  )
+}

package/src/descendants.tsx

@@ -7,9 +7,16 @@ type DescendantMap<T> = { [id: string]: { index: number; props?: T } }
 
 export interface DescendantContextType<T> {
   getIndexForId: (id: string, props?: T) => number
-  // IMPORTANT! map is not reactive, it cannot be used in render, only in useEffect or useLayoutEffect or other event handlers like useKeyboard
+  // IMPORTANT! map is not reactive by default. Use useDescendantsRerender() to opt-in to reactivity.
+  // Without that hook, map can only be read in useEffect/useLayoutEffect or event handlers like useKeyboard
   map: React.RefObject<DescendantMap<T>>
   reset: () => void
+  // For useSyncExternalStore - opt-in reactivity
+  subscribe: (callback: () => void) => () => void
+  getSnapshot: () => string
+  updateSnapshot: () => void
+  // Committed map - stable copy for useDescendantsRerender (map.current is cleared on every render)
+  committedMap: DescendantMap<T>
 }
 
 const randomId = () => Math.random().toString(36).slice(2, 11)
@@ -26,6 +33,11 @@ export function createDescendants<T = any>() {
     // On every re-render of children, reset the count
     props.value.reset()
 
+    // Update snapshot after all children have registered (runs after children's useLayoutEffect)
+    React.useLayoutEffect(() => {
+      props.value.updateSnapshot()
+    })
+
     return (
       <DescendantContext.Provider value={props.value}>
         {props.children}
@@ -37,30 +49,71 @@ export function createDescendants<T = any>() {
     const indexCounter = React.useRef<number>(0)
     const map = React.useRef<DescendantMap<T>>({})
 
+    // For useSyncExternalStore - opt-in reactivity
+    const listeners = React.useRef(new Set<() => void>())
+    const snapshotRef = React.useRef('')
+    const prevSnapshotRef = React.useRef('')
+    // Committed map - stable copy of map.current updated only when snapshot changes
+    // This is what useDescendantsRerender returns, since map.current is cleared on every render
+    const committedMapRef = React.useRef<DescendantMap<T>>({})
+
     const reset = () => {
+      // Save previous snapshot before clearing
+      prevSnapshotRef.current = snapshotRef.current
       indexCounter.current = 0
       map.current = {}
     }
 
     const getIndexForId = (id: string, props?: T) => {
-      if (!map.current[id])
+      if (!map.current[id]) {
         map.current[id] = {
           index: indexCounter.current++,
         }
+      }
       map.current[id].props = props
       return map.current[id].index
     }
 
-    // React.useEffect(() => {
-    //   return () => {
-    //     reset()
-    //   }
-    // }, [])
+    // Must be stable (memoized) for useSyncExternalStore
+    const subscribe = React.useCallback((callback: () => void) => {
+      listeners.current.add(callback)
+      return () => {
+        listeners.current.delete(callback)
+      }
+    }, [])
+
+    // Must be stable for useSyncExternalStore
+    const getSnapshot = React.useCallback(() => snapshotRef.current, [])
+
+    // Called by provider after all children have registered
+    const updateSnapshot = React.useCallback(() => {
+      const newSnapshot = Object.keys(map.current).sort().join(',')
+      snapshotRef.current = newSnapshot
+      // Always update committed map so useDescendantsRerender returns fresh data
+      // (map.current is cleared by reset() on every render)
+      committedMapRef.current = { ...map.current }
+      // Only notify if there are listeners AND snapshot changed
+      if (listeners.current.size > 0 && newSnapshot !== prevSnapshotRef.current) {
+        listeners.current.forEach((cb) => {
+          cb()
+        })
+      }
+    }, [])
 
     // Do NOT memoize context value, so that we bypass React.memo on any children
     // We NEED them to re-render, in case stable children were re-ordered
     // (this creates a new object every render, so children reading the context MUST re-render)
-    return { getIndexForId, map, reset }
+    return {
+      getIndexForId,
+      map,
+      reset,
+      subscribe,
+      getSnapshot,
+      updateSnapshot,
+      get committedMap() {
+        return committedMapRef.current
+      },
+    }
   }
 
   /**
@@ -80,7 +133,43 @@ export function createDescendants<T = any>() {
     return { descendantId, index }
   }
 
-  return { DescendantsProvider, useDescendants, useDescendant }
+  /**
+   * Opt-in to re-renders when the set of descendant IDs changes.
+   * Returns the committed map of descendants, readable during render.
+   * Only triggers re-render when descendants are added/removed, not on prop changes.
+   */
+  function useDescendantsRerender(): DescendantMap<T> {
+    const context = React.useContext(DescendantContext)
+    if (!context) {
+      throw new Error(
+        'useDescendantsRerender must be used within a DescendantsProvider',
+      )
+    }
+
+    React.useSyncExternalStore(
+      context.subscribe,
+      context.getSnapshot,
+      context.getSnapshot, // server snapshot
+    )
+
+    return context.committedMap
+  }
+
+  /**
+   * Get the live map ref from context. Only read map.current inside useLayoutEffect,
+   * as it is cleared during render by reset() and populated by items' useLayoutEffect.
+   */
+  function useDescendantsMap(): React.RefObject<DescendantMap<T>> {
+    const context = React.useContext(DescendantContext)
+    if (!context) {
+      throw new Error(
+        'useDescendantsMap must be used within a DescendantsProvider',
+      )
+    }
+    return context.map
+  }
+
+  return { DescendantsProvider, useDescendants, useDescendant, useDescendantsRerender, useDescendantsMap }
 }
 
 // EXAMPLE

package/src/examples/actions-dialog-layout.vitest.tsx

@@ -0,0 +1,112 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-with-sections.tsx'],
+    cols: 70,
+    rows: 20,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('actions dialog layout shift when opening with ctrl+k', async () => {
+  // Wait for list to fully render
+  await session.text({
+    waitFor: (text) => /search/i.test(text) && /Apple/.test(text),
+  })
+
+  // Capture multiple frames when pressing ctrl+k to verify no layout shift
+  // Previously, the dialog would shift position as content mounted incrementally.
+  // Now with fixed height on ScrollBox, the dialog appears at stable position immediately.
+  const frames = await session.captureFrames(['ctrl', 'k'], {
+    frameCount: 10,
+    intervalMs: 5,
+  })
+
+  // Filter frames that show the dialog border
+  const dialogFrames = frames.filter((frame) => frame.includes('╭'))
+
+  // Find the line number where dialog border (╭) appears in each frame
+  const dialogPositions = dialogFrames.map((frame) => {
+    const lines = frame.split('\n')
+    return lines.findIndex((line) => line.includes('╭'))
+  })
+
+  console.log('Dialog border positions across frames:', dialogPositions)
+
+  // Check if all positions are the same (no layout shift)
+  const uniquePositions = [...new Set(dialogPositions)]
+  const hasLayoutShift = uniquePositions.length > 1
+
+  if (hasLayoutShift) {
+    console.log('LAYOUT SHIFT DETECTED!')
+    console.log(`Dialog moves from line ${Math.min(...dialogPositions)} to line ${Math.max(...dialogPositions)}`)
+  }
+
+  // Capture first and last dialog frames to show the shift
+  const firstDialogFrame = dialogFrames[0]
+  const lastDialogFrame = dialogFrames[dialogFrames.length - 1]
+
+  // First frame: dialog appears at stable position (same as last frame)
+  expect(firstDialogFrame).toMatchInlineSnapshot(`
+    "
+
+
+       Simple List Example ────────────────────────────────────────────
+
+      ╭────────────────────────────────────────────────────────────────╮
+      │                                                                │
+      │   Actions                                                esc   │
+      │                                                                │
+      │   > Search actions...                                          │
+      │                                                                │
+      │  ›View Details                                                 │
+      │   Add to Cart                                                  │
+      │                                                                │
+      │   Settings                                                     │
+      │   Change Theme...                                              │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │
+      │                                                                │"
+  `)
+
+  // Last frame: dialog at same position as first frame (no shift)
+  expect(lastDialogFrame).toMatchInlineSnapshot(`
+    "
+
+
+       Simple List Example ────────────────────────────────────────────
+
+      ╭────────────────────────────────────────────────────────────────╮
+      │                                                                │
+      │   Actions                                                esc   │
+      │                                                                │
+      │   > Search actions...                                          │
+      │                                                                │
+      │  ›View Details                                                 │
+      │   Add to Cart                                                  │
+      │                                                                │
+      │   Settings                                                     │
+      │   Change Theme...                                              │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │
+      │                                                                │"
+  `)
+
+  // The dialog should appear at a stable position immediately.
+  // Fixed by using a fixed height on the ScrollBox instead of maxHeight,
+  // so the dialog has consistent dimensions from the first render.
+  expect(hasLayoutShift).toBe(false)
+}, 15000)