termcast 1.3.50 → 1.3.51

package/src/examples/internal/descendants-rerender.vitest.tsx

@@ -30,17 +30,29 @@ test(
         [1] Banana (without hook, renders: 8)
         [2] Cherry (without hook, renders: 9)
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Render Counts:                                                           │
-        │   parent: 1                                                              │
-        │   parentWithHook: 0                                                      │
-        │   independentChild: 0                                                    │
-        │   independentChildWithHook: 0                                            │
-        │   descendantItem: 3                                                      │
-        │   descendantItemWithHook: 0                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 1                                                                                                      │
+        │   parentWithHook: 0                                                                                              │
+        │   independentChild: 0                                                                                            │
+        │   independentChildWithHook: 0                                                                                    │
+        │   descendantItem: 3                                                                                              │
+        │   descendantItemWithHook: 0                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
+
+
 
 
       "
@@ -75,17 +87,29 @@ test(
         [1] Banana (without hook, renders: 8)
         [2] Cherry (without hook, renders: 9)
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Render Counts:                                                           │
-        │   parent: 0                                                              │
-        │   parentWithHook: 1                                                      │
-        │   independentChild: 0                                                    │
-        │   independentChildWithHook: 0                                            │
-        │   descendantItem: 3                                                      │
-        │   descendantItemWithHook: 0                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 0                                                                                                      │
+        │   parentWithHook: 1                                                                                              │
+        │   independentChild: 0                                                                                            │
+        │   independentChildWithHook: 0                                                                                    │
+        │   descendantItem: 3                                                                                              │
+        │   descendantItemWithHook: 0                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
+
+
 
       "
     `)
@@ -115,26 +139,38 @@ test(
       "
 
 
-        Items:i3:|i[a]padde|t[d]ideleteh|h[r] reset counts
-
+        Scenario: independent-child-with-hook
+        Items: 3 | [a] add | [d] delete | [r] reset counts
 
         Parent without hook - renders: 2
         Independent child with hook - renders: 3, items: 3
-        [0]eApplen(withoutwhook,trenders:r7)ders: 2
+        Independent child without hook - renders: 2
+        [0] Apple (without hook, renders: 7)
         [1] Banana (without hook, renders: 8)
         [2] Cherry (without hook, renders: 9)
 
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 1                                                                                                      │
+        │   parentWithHook: 0                                                                                              │
+        │   independentChild: 1                                                                                            │
+        │   independentChildWithHook: 1                                                                                    │
+        │   descendantItem: 3                                                                                              │
+        │   descendantItemWithHook: 0                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Reparent:u1ts:                                                           │
-        │   parentWithHook: 0                                                      │
-        │   independentChild: 1                                                    │
-        │   independentChildWithHook: 1                                            │
-        │   descendantItem: 3                                                      │
-        │   descendantItemWithHook: 0                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
 
       "
     `)
@@ -172,17 +208,29 @@ test(
         [1] Banana (with hook, renders: 8, total: 3)
         [2] Cherry (with hook, renders: 9, total: 3)
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Render Counts:                                                           │
-        │   parent: 1                                                              │
-        │   parentWithHook: 0                                                      │
-        │   independentChild: 0                                                    │
-        │   independentChildWithHook: 0                                            │
-        │   descendantItem: 0                                                      │
-        │   descendantItemWithHook: 3                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 1                                                                                                      │
+        │   parentWithHook: 0                                                                                              │
+        │   independentChild: 0                                                                                            │
+        │   independentChildWithHook: 0                                                                                    │
+        │   descendantItem: 0                                                                                              │
+        │   descendantItemWithHook: 3                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
+
+
 
 
       "

package/src/examples/internal/simple-scrollbox.vitest.tsx

@@ -23,20 +23,32 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
        Simple ScrollBox Demo
-                                                                                 ▀
-       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+                                                                                                                         ▀
+       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 6 - This is content for item number 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
 
+       Item 7 - This is content for item number 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
@@ -59,22 +71,34 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
        Simple ScrollBox Demo
-       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,   ▀
-       consectetur adipiscing elit.
+       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.              ▄
 
 
 
-       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 6 - This is content for item number 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 7 - This is content for item number 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet,
 
        Use mouse scroll or arrow keys | Press [q] to quit
 

package/src/examples/list-dropdown-default.vitest.tsx

@@ -7,7 +7,7 @@ beforeEach(async () => {
   session = await launchTerminal({
     command: 'bun',
     args: ['src/examples/list-dropdown-default.tsx'],
-    cols: 80,
+    cols: 100,
     rows: 30,
   })
 })
@@ -31,9 +31,9 @@ test('dropdown defaults to first item when no value is provided', async () => {
     "
 
 
-       Dropdown Default Value Example ───────────────────────────────────────────
+       Dropdown Default Value Example ───────────────────────────────────────────────────────────────
 
-       > Search...                                                        Apple ▾
+       > Search...                                                                            Apple ▾
 
       ›First Item This list has a dropdown
        Second Item The dropdown should default to first item
@@ -43,7 +43,7 @@ test('dropdown defaults to first item when no value is provided', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^p dropdown  powered by termcast.app
+       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
@@ -76,22 +76,22 @@ test('dropdown opens and shows items', async () => {
     "
 
 
-       Dropdown Default Value Example ───────────────────────────────────────────
-      ╭──────────────────────────────────────────────────────────────────────────╮
-      │                                                                          │
-      │   Filter by category                                               esc   │
-      │                                                                          │
-      │   > Select category...                                                   │
-      │                                                                          │
-      │  ›Apple                                                                  │
-      │   Banana                                                                 │
-      │   Orange                                                                 │
-      │   Grape                                                                  │
-      │                                                                          │
-      │                                                                          │
-      │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
-      │                                                                          │
-      ╰──────────────────────────────────────────────────────────────────────────╯
+       Dropdown Default Value Example ───────────────────────────────────────────────────────────────
+                ╭──────────────────────────────────────────────────────────────────────────╮
+       > Search.│                                                                          │  Apple ▾
+                │   Filter by category                                               esc   │
+      ›First Ite│                                                                          │
+       Second It│   > Select category...                                                   │
+       Vegetable│                                                                          │
+       Carrot Wi│  ›Apple                                                                  │
+                │   Banana                                                                 │
+                │   Orange                                                                 │
+                │   Grape                                                                  │
+                │                                                                          │
+       ↵ show se│                                                                          │mcast.app
+                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
+                │                                                                          │
+                ╰──────────────────────────────────────────────────────────────────────────╯
 
 
 
@@ -113,22 +113,22 @@ test('dropdown opens and shows items', async () => {
     "
 
 
-       Dropdown Default Value Example ───────────────────────────────────────────
-      ╭──────────────────────────────────────────────────────────────────────────╮
-      │                                                                          │
-      │   Filter by category                                               esc   │
-      │                                                                          │
-      │   > Select category...                                                   │
-      │                                                                          │
-      │   Apple                                                                  │
-      │  ›Banana                                                                 │
-      │   Orange                                                                 │
-      │   Grape                                                                  │
-      │                                                                          │
-      │                                                                          │
-      │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
-      │                                                                          │
-      ╰──────────────────────────────────────────────────────────────────────────╯
+       Dropdown Default Value Example ───────────────────────────────────────────────────────────────
+                ╭──────────────────────────────────────────────────────────────────────────╮
+       > Search.│                                                                          │  Apple ▾
+                │   Filter by category                                               esc   │
+      ›First Ite│                                                                          │
+       Second It│   > Select category...                                                   │
+       Vegetable│                                                                          │
+       Carrot Wi│   Apple                                                                  │
+                │  ›Banana                                                                 │
+                │   Orange                                                                 │
+                │   Grape                                                                  │
+                │                                                                          │
+       ↵ show se│                                                                          │mcast.app
+                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
+                │                                                                          │
+                ╰──────────────────────────────────────────────────────────────────────────╯
 
 
 
@@ -150,9 +150,9 @@ test('dropdown opens and shows items', async () => {
     "
 
 
-       Dropdown Default Value Example ───────────────────────────────────────────
+       Dropdown Default Value Example ───────────────────────────────────────────────────────────────
 
-       > Search...                                                       Banana ▾
+       > Search...                                                                           Banana ▾
 
       ›First Item This list has a dropdown
        Second Item The dropdown should default to first item
@@ -162,7 +162,7 @@ test('dropdown opens and shows items', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^p dropdown  powered by termcast.app
+       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
@@ -195,22 +195,22 @@ test('clicking dropdown opens it', async () => {
     "
 
 
-       Dropdown Default Value Example ───────────────────────────────────────────
-      ╭──────────────────────────────────────────────────────────────────────────╮
-      │                                                                          │
-      │   Filter by category                                               esc   │
-      │                                                                          │
-      │   > Select category...                                                   │
-      │                                                                          │
-      │  ›Apple                                                                  │
-      │   Banana                                                                 │
-      │   Orange                                                                 │
-      │   Grape                                                                  │
-      │                                                                          │
-      │                                                                          │
-      │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
-      │                                                                          │
-      ╰──────────────────────────────────────────────────────────────────────────╯
+       Dropdown Default Value Example ───────────────────────────────────────────────────────────────
+                ╭──────────────────────────────────────────────────────────────────────────╮
+       > Search.│                                                                          │  Apple ▾
+                │   Filter by category                                               esc   │
+      ›First Ite│                                                                          │
+       Second It│   > Select category...                                                   │
+       Vegetable│                                                                          │
+       Carrot Wi│  ›Apple                                                                  │
+                │   Banana                                                                 │
+                │   Orange                                                                 │
+                │   Grape                                                                  │
+                │                                                                          │
+       ↵ show se│                                                                          │mcast.app
+                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
+                │                                                                          │
+                ╰──────────────────────────────────────────────────────────────────────────╯
 
 
 
@@ -232,9 +232,9 @@ test('clicking dropdown opens it', async () => {
     "
 
 
-       Dropdown Default Value Example ───────────────────────────────────────────
+       Dropdown Default Value Example ───────────────────────────────────────────────────────────────
 
-       > Search...                                                       Orange ▾
+       > Search...                                                                           Orange ▾
 
       ›First Item This list has a dropdown
        Second Item The dropdown should default to first item
@@ -244,7 +244,7 @@ test('clicking dropdown opens it', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^p dropdown  powered by termcast.app
+       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
@@ -262,3 +262,23 @@ test('clicking dropdown opens it', async () => {
     "
   `)
 }, 10000)
+
+test('clicking footer dropdown hint opens dropdown', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Dropdown Default Value Example/i.test(text)
+    },
+  })
+
+  const beforeClick = await session.text()
+  expect(beforeClick).toContain('^p')
+
+  await session.click('^p', { first: true })
+
+  const afterClick = await session.text({
+    waitFor: (text) => {
+      return /Filter by category/i.test(text)
+    },
+  })
+  expect(afterClick).toContain('Filter by category')
+}, 10000)

package/src/examples/list-slot.tsx

@@ -0,0 +1,38 @@
+/**
+ * Example: List with logo prop on the title bar, no dropdown.
+ * Logo appears on the right edge after the separator line.
+ */
+import React from 'react'
+import { List, ActionPanel, Action, renderWithProviders, Color } from 'termcast'
+
+function ListSlotExample() {
+  const items = [
+    { id: '1', title: 'Dashboard', subtitle: 'Main overview' },
+    { id: '2', title: 'Settings', subtitle: 'Preferences' },
+    { id: '3', title: 'Profile', subtitle: 'Account info' },
+    { id: '4', title: 'Notifications', subtitle: 'Alerts' },
+    { id: '5', title: 'Analytics', subtitle: 'Usage stats' },
+  ]
+
+  return (
+    <List
+      logo={<text fg={Color.Orange}>◆ Acme</text>}
+    >
+      {items.map((item) => (
+        <List.Item
+          key={item.id}
+          id={item.id}
+          title={item.title}
+          subtitle={item.subtitle}
+          actions={
+            <ActionPanel>
+              <Action title="Open" onAction={() => {}} />
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  )
+}
+
+renderWithProviders(<ListSlotExample />)

package/src/examples/list-with-detail.vitest.tsx

@@ -573,16 +573,16 @@ test('list with detail layout consistency - short vs long detail content', async
                                             │
                                             │
                                             │
-                                            │
-                                            │
-                                            │
-                                            │
-                                            │
-                                            │
-                                            │
-                                            │
        ↑↓ navigate   ^k actions             │
 
+
+
+
+
+
+
+
+
     "
   `)
   expect(longDetailSnapshot).toMatchInlineSnapshot(`

package/src/examples/list-with-dropdown.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactElement } from 'react'
-import { List, renderWithProviders } from 'termcast'
+import { List, renderWithProviders, Color } from 'termcast'
 import type { DropdownProps } from 'termcast/src/components/list'
 
 function DrinkDropdown(props: {
@@ -73,7 +73,7 @@ function ListWithDropdownExample() {
   return (
     <List
       navigationTitle='Search Beers'
-      // searchBarPlaceholder="Search your favorite drink"
+      logo={<text fg={Color.Orange}>◆ Acme</text>}
       searchBarAccessory={
         (
           <DrinkDropdown