termcast 1.3.32 → 1.3.34

package/src/components/loading-bar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useLayoutEffect } from 'react'
 import { BoxRenderable } from '@opentui/core'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
 
 interface LoadingBarProps {
@@ -11,6 +11,7 @@ interface LoadingBarProps {
 
 export function LoadingBar(props: LoadingBarProps): any {
   let { title, isLoading = false, barLength: propBarLength } = props
+  const theme = useTheme()
   const [calculatedBarLength, setCalculatedBarLength] = useState(
     propBarLength || 0,
   )
@@ -78,12 +79,12 @@ export function LoadingBar(props: LoadingBarProps): any {
   const getCharacterColor = (index: number): string => {
     if (!isLoading) {
       // When not loading, use default theme colors
-      return index < title.length ? Theme.text : '#626262'
+      return index < title.length ? theme.text : '#626262'
     }
 
     // Title text stays static when loading, only animate the bar
     if (index < title.length) {
-      return Theme.textMuted // Keep title text muted during loading
+      return theme.textMuted // Keep title text muted during loading
     }
 
     // Only animate the bar part

package/src/components/metadata.tsx

@@ -0,0 +1,217 @@
+/**
+ * Shared Metadata components used by both Detail.Metadata and List.Item.Detail.Metadata
+ * 
+ * Provides Label, Separator, Link, and TagList components with configurable styling
+ * via MetadataContext for different use cases (standalone Detail vs List detail panel).
+ */
+
+import React, { createContext, useContext, ReactNode } from 'react'
+import { TextAttributes } from '@opentui/core'
+import { useTheme } from 'termcast/src/theme'
+import { Color, resolveColor } from 'termcast/src/colors'
+import type { ImageLike } from 'termcast/src/components/image'
+
+interface MetadataConfig {
+  /** 
+   * Maximum text length before switching to column layout.
+   * Can be a number or a function that takes title length and returns max value length.
+   * This allows dynamic calculation based on terminal width and title length.
+   */
+  maxValueLen: number | ((titleLen: number) => number)
+  /** Minimum width for title column in row layout (default: 12) */
+  titleMinWidth: number
+  /** Padding below each metadata item (default: 0.5) */
+  paddingBottom: number
+  /** Width of separator line (default: 17) */
+  separatorWidth: number
+}
+
+const defaultConfig: MetadataConfig = {
+  maxValueLen: 20,
+  titleMinWidth: 12,
+  paddingBottom: 0.5,
+  separatorWidth: 17,
+}
+
+/** Helper to resolve maxValueLen - handles both number and function */
+const resolveMaxValueLen = (config: MetadataConfig, titleLen: number): number => {
+  if (typeof config.maxValueLen === 'function') {
+    return config.maxValueLen(titleLen)
+  }
+  return config.maxValueLen
+}
+
+const MetadataContext = createContext<MetadataConfig>(defaultConfig)
+
+// Props types
+interface MetadataProps {
+  children: ReactNode
+  /** Configuration for metadata display */
+  config?: Partial<MetadataConfig>
+}
+
+interface LabelProps {
+  title: string
+  icon?: ImageLike | undefined | null
+  text?:
+    | string
+    | {
+        value: string
+        color?: Color.ColorLike | null
+      }
+}
+
+interface SeparatorProps {}
+
+interface LinkProps {
+  title: string
+  target: string
+  text: string
+}
+
+interface TagListProps {
+  title: string
+  children: ReactNode
+}
+
+interface TagListItemProps {
+  icon?: ImageLike | undefined | null
+  text?: string
+  color?: Color.ColorLike | undefined | null
+  onAction?: () => void
+}
+
+// Components
+const MetadataLabel = (props: LabelProps): any => {
+  const theme = useTheme()
+  const config = useContext(MetadataContext)
+  const textValue = typeof props.text === 'string' ? props.text : props.text?.value
+  const textColor = typeof props.text === 'object' ? props.text?.color : undefined
+
+  // No text = header label (just title, no colon or dash)
+  if (!textValue) {
+    return (
+      <box style={{ paddingBottom: config.paddingBottom }}>
+        <text flexShrink={0} fg={theme.textMuted}>{props.title}</text>
+      </box>
+    )
+  }
+
+  const maxLen = resolveMaxValueLen(config, props.title.length)
+
+  // Long value = column layout (title on one line, value below)
+  if (textValue.length > maxLen) {
+    return (
+      <box style={{ flexDirection: 'column', paddingBottom: config.paddingBottom }}>
+        <text flexShrink={0} fg={theme.textMuted}>{props.title}:</text>
+        <text flexShrink={0} fg={resolveColor(textColor) || theme.text}>{textValue}</text>
+      </box>
+    )
+  }
+
+  // Short value = row layout (title: value on same line)
+  return (
+    <box style={{ flexDirection: 'row', paddingBottom: config.paddingBottom }}>
+      <text flexShrink={0} fg={theme.textMuted} style={{ minWidth: config.titleMinWidth }}>{props.title}:</text>
+      <text flexShrink={0} fg={resolveColor(textColor) || theme.text}>{textValue}</text>
+    </box>
+  )
+}
+
+const MetadataSeparator = (_props: SeparatorProps): any => {
+  const theme = useTheme()
+  const config = useContext(MetadataContext)
+  return (
+    <box style={{ paddingBottom: config.paddingBottom }}>
+      <text flexShrink={0} fg={theme.border}>{'─'.repeat(config.separatorWidth)}</text>
+    </box>
+  )
+}
+
+const MetadataLink = (props: LinkProps): any => {
+  const theme = useTheme()
+  const config = useContext(MetadataContext)
+  const maxLen = resolveMaxValueLen(config, props.title.length)
+  const isLongValue = props.text.length > maxLen
+
+  if (isLongValue) {
+    return (
+      <box style={{ flexDirection: 'column', paddingBottom: config.paddingBottom }}>
+        <text flexShrink={0} fg={theme.textMuted}>{props.title}:</text>
+        <text flexShrink={0} fg={theme.accent} attributes={TextAttributes.UNDERLINE}>{props.text}</text>
+      </box>
+    )
+  }
+
+  return (
+    <box style={{ flexDirection: 'row', paddingBottom: config.paddingBottom }}>
+      <text flexShrink={0} fg={theme.textMuted} style={{ minWidth: config.titleMinWidth }}>{props.title}:</text>
+      <text flexShrink={0} fg={theme.accent} attributes={TextAttributes.UNDERLINE}>{props.text}</text>
+    </box>
+  )
+}
+
+const MetadataTagListItem = (props: TagListItemProps): any => {
+  const theme = useTheme()
+  const displayText = props.text || ''
+
+  return (
+    <text
+      fg={resolveColor(props.color) || theme.text}
+      style={{
+        paddingRight: 1,
+        paddingLeft: props.icon ? 1 : 0,
+      }}
+    >
+      {displayText}
+    </text>
+  )
+}
+
+interface MetadataTagListType {
+  (props: TagListProps): any
+  Item: (props: TagListItemProps) => any
+}
+
+const MetadataTagList: MetadataTagListType = (props) => {
+  const theme = useTheme()
+  const config = useContext(MetadataContext)
+
+  return (
+    <box style={{ flexDirection: 'row', paddingBottom: config.paddingBottom }}>
+      <text flexShrink={0} fg={theme.textMuted} style={{ minWidth: config.titleMinWidth }}>{props.title}:</text>
+      <box style={{ flexDirection: 'row' }}>{props.children}</box>
+    </box>
+  )
+}
+
+MetadataTagList.Item = MetadataTagListItem
+
+// Main Metadata component with compound components
+interface MetadataType {
+  (props: MetadataProps): any
+  Label: (props: LabelProps) => any
+  Separator: (props: SeparatorProps) => any
+  Link: (props: LinkProps) => any
+  TagList: MetadataTagListType
+}
+
+const Metadata: MetadataType = (props) => {
+  const config = { ...defaultConfig, ...props.config }
+
+  return (
+    <MetadataContext.Provider value={config}>
+      <box style={{ flexDirection: 'column' }}>
+        {props.children}
+      </box>
+    </MetadataContext.Provider>
+  )
+}
+
+Metadata.Label = MetadataLabel
+Metadata.Separator = MetadataSeparator
+Metadata.Link = MetadataLink
+Metadata.TagList = MetadataTagList
+
+export { Metadata, MetadataContext, defaultConfig }
+export type { MetadataProps, MetadataConfig, LabelProps, SeparatorProps, LinkProps, TagListProps, TagListItemProps }

package/src/components/theme-picker.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useKeyboard } from '@opentui/react'
-import { Theme, persistTheme } from 'termcast/src/theme'
+import { useTheme, persistTheme } from 'termcast/src/theme'
 import { themeNames } from '../themes'
 import { useStore } from 'termcast/src/state'
 import { useDialog } from 'termcast/src/internal/dialog'
@@ -8,6 +8,7 @@ import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { Dropdown } from 'termcast/src/components/dropdown'
 
 export function ThemePicker(): any {
+  const theme = useTheme()
   const dialog = useDialog()
   const inFocus = useIsInFocus()
   const currentThemeName = useStore((state) => state.currentThemeName)
@@ -49,7 +50,7 @@ export function ThemePicker(): any {
           key={name}
           title={name}
           value={name}
-          color={name === previousTheme ? Theme.primary : undefined}
+          color={name === previousTheme ? theme.primary : undefined}
         />
       ))}
     </Dropdown>

package/src/examples/actions-context.tsx

@@ -0,0 +1,63 @@
+/**
+ * Example validating that ActionPanel preserves React context through portals.
+ *
+ * A custom React context (CounterContext) provides a counter value. The
+ * CounterAction component reads from this context at render time and closes
+ * over it in its onAction callback. If the portal preserves context correctly,
+ * the toast will show the matching prop and context values.
+ */
+import React, { createContext, useContext, useState } from 'react'
+import { List, ActionPanel, Action, showToast, Toast, renderWithProviders } from 'termcast'
+
+const CounterContext = createContext(0)
+
+// Action component that reads from context at render time
+function CounterAction({ counter }: { counter: number }) {
+  // Read from context - this works because the portal preserves the
+  // React tree context from the source component
+  const contextValue = useContext(CounterContext)
+
+  return (
+    <Action
+      title="Show Counter"
+      onAction={() => {
+        // Both the prop and context value should match
+        showToast({
+          title: `prop=${counter} ctx=${contextValue}`,
+          style: Toast.Style.Success,
+        })
+      }}
+    />
+  )
+}
+
+function ActionsContextExample() {
+  const [counter, setCounter] = useState(42)
+
+  return (
+    <CounterContext.Provider value={counter}>
+      <List
+        navigationTitle="Context Test"
+        searchBarPlaceholder="Search..."
+      >
+        <List.Item
+          title={`Counter: ${counter}`}
+          subtitle="Press enter to show counter via action"
+          actions={
+            <ActionPanel>
+              <CounterAction counter={counter} />
+              <Action
+                title="Increment"
+                onAction={() => {
+                  setCounter((c) => c + 1)
+                }}
+              />
+            </ActionPanel>
+          }
+        />
+      </List>
+    </CounterContext.Provider>
+  )
+}
+
+await renderWithProviders(<ActionsContextExample />)

package/src/examples/actions-context.vitest.tsx

@@ -0,0 +1,110 @@
+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/actions-context.tsx'],
+    cols: 70,
+    rows: 20,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('actions preserve React context through portal', async () => {
+  // Wait for list to render
+  await session.text({
+    waitFor: (text) => /Counter: 42/.test(text),
+  })
+
+  const initial = await session.text()
+  expect(initial).toContain('Counter:')
+
+  // Open actions panel with Ctrl+K
+  await session.press(['ctrl', 'k'])
+
+  const actionsPanel = await session.text({
+    waitFor: (text) => /Show Counter/.test(text),
+    timeout: 5000,
+  })
+  // Verify the actions dialog is shown with our custom action
+  expect(actionsPanel).toContain('Show Counter')
+  expect(actionsPanel).toContain('Increment')
+  expect(actionsPanel).toMatchInlineSnapshot(`
+    "
+
+
+      ╭────────────────────────────────────────────────────────────────╮
+      │                                                                │
+      │   Actions                                                esc   │
+      │                                                                │
+      │   > Search actions...                                          │
+      │                                                                │
+      │  ›Show Counter                                                 │
+      │   Increment                                                    │
+      │                                                                │
+      │   Settings                                                     │
+      │   Change Theme...                                              │
+      │   See Console Logs                                             │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │
+      │                                                                │
+      ╰────────────────────────────────────────────────────────────────╯
+    "
+  `)
+
+  // Select "Show Counter" (first action, already selected)
+  await session.press('return')
+
+  // Verify toast shows correct context value (prop=42 ctx=42)
+  const afterAction = await session.text({
+    waitFor: (text) => /prop=42 ctx=42/.test(text),
+    timeout: 5000,
+  })
+  expect(afterAction).toContain('prop=42')
+}, 30000)
+
+test('actions context stays fresh after state updates', async () => {
+  // Wait for list to render
+  await session.text({
+    waitFor: (text) => /Counter: 42/.test(text),
+  })
+
+  // Open actions, select "Increment" to change counter
+  await session.press(['ctrl', 'k'])
+  await session.text({
+    waitFor: (text) => /Increment/.test(text),
+    timeout: 5000,
+  })
+
+  // Navigate down to "Increment" action
+  await session.press('down')
+  await session.press('return')
+
+  // Wait for counter to update to 43
+  await session.text({
+    waitFor: (text) => /Counter: 43/.test(text),
+    timeout: 5000,
+  })
+
+  // Now open actions again and run "Show Counter"
+  await session.press(['ctrl', 'k'])
+  await session.text({
+    waitFor: (text) => /Show Counter/.test(text),
+    timeout: 5000,
+  })
+  await session.press('return')
+
+  // Verify toast shows UPDATED context value (43, not stale 42)
+  const afterAction = await session.text({
+    waitFor: (text) => /prop=43 ctx=43/.test(text),
+    timeout: 5000,
+  })
+  expect(afterAction).toContain('prop=43')
+}, 30000)

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

@@ -17,7 +17,8 @@ afterEach(() => {
   session?.close()
 })
 
-test('actions dialog layout shift when opening with ctrl+k', async () => {
+// this was a temporary test to find out if there was any layout shift in dialogs
+test.skip('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),

package/src/examples/file-autocomplete.vitest.tsx

@@ -41,7 +41,6 @@ test('autocomplete shows flat file list in dialog', async () => {
       │
       ◇  Select Files
       │  Enter file path...
-      │
       │  Choose one or more files to upload
       │
       ╭────────────────────────────────────────────────────────────────╮
@@ -52,8 +51,6 @@ test('autocomplete shows flat file list in dialog', async () => {
       │                                                                │
       │ ↑↓ navigate  ⏎/tab select  esc close                           │
       ╰────────────────────────────────────────────────────────────────╯
-      │  Choose exactly one file
-      │
       └
 
 
@@ -61,6 +58,9 @@ test('autocomplete shows flat file list in dialog', async () => {
 
 
 
+
+
+
     "
   `)
 }, 10000)
@@ -93,7 +93,6 @@ test('autocomplete navigation with down/up keys', async () => {
       │
       ◇  Select Files
       │  Enter file path...
-      │
       │  Choose one or more files to upload
       │
       ╭────────────────────────────────────────────────────────────────╮
@@ -104,8 +103,6 @@ test('autocomplete navigation with down/up keys', async () => {
       │                                                                │
       │ ↑↓ navigate  ⏎/tab select  esc close                           │
       ╰────────────────────────────────────────────────────────────────╯
-      │  Choose exactly one file
-      │
       └
 
 
@@ -113,6 +110,9 @@ test('autocomplete navigation with down/up keys', async () => {
 
 
 
+
+
+
     "
   `)
 
@@ -130,7 +130,6 @@ test('autocomplete navigation with down/up keys', async () => {
       │
       ◇  Select Files
       │  Enter file path...
-      │
       │  Choose one or more files to upload
       │
       ╭────────────────────────────────────────────────────────────────╮
@@ -141,8 +140,6 @@ test('autocomplete navigation with down/up keys', async () => {
       │                                                                │
       │ ↑↓ navigate  ⏎/tab select  esc close                           │
       ╰────────────────────────────────────────────────────────────────╯
-      │  Choose exactly one file
-      │
       └
 
 
@@ -150,6 +147,9 @@ test('autocomplete navigation with down/up keys', async () => {
 
 
 
+
+
+
     "
   `)
 }, 10000)
@@ -179,8 +179,6 @@ test('file picker shows only files, not folders', async () => {
       │  John Doe
       │
       ◆  Select Files
-      │  t
-      │
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │ Filter: t                                                      │
@@ -195,11 +193,13 @@ test('file picker shows only files, not folders', async () => {
       │ ↑↓ navigate  ⏎/tab select  esc close                           │
       ╰────────────────────────────────────────────────────────────────╯
 
-
        ctrl ↵ submit   tab navigate   ^k actions
 
 
 
+
+
+
     "
   `)
   expect(snapshot).toContain('▪')
@@ -234,17 +234,14 @@ test('escape closes autocomplete and form stays visible', async () => {
       │
       ◇  Select Files
       │  Enter file path...
-      │
       │  Choose one or more files to upload
       │
       ◆  Select Folder
       │  s
-      │
       │  Choose a folder for output
       │
       ◇  Select Single File
       │  Enter file path...
-      │
       │  Choose exactly one file
       │
       └
@@ -254,6 +251,9 @@ test('escape closes autocomplete and form stays visible', async () => {
 
 
 
+
+
+
     "
   `)
 }, 10000)

package/src/examples/form-basic.tsx

@@ -82,6 +82,18 @@ export function FormBasicExample(): any {
           </Form.Dropdown.Section>
         </Form.Dropdown>
 
+        <Form.Dropdown
+          id='emptyDropdown'
+          title='Empty Dropdown'
+          placeholder='No items available'
+        />
+
+        <Form.TextField
+          id='minimalField'
+          title='Minimal Field'
+          placeholder='No info text'
+        />
+
         <Form.DatePicker
           id='birthdate'
           title='Date of Birth'