termcast 1.3.48 → 1.3.50

package/src/examples/graph-styles.vitest.tsx

@@ -0,0 +1,322 @@
+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/graph-styles.tsx'],
+    cols: 80,
+    rows: 24,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('area style renders braille characters', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Area - Stock') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Graph Styles ─────────────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Area - Stock Price Orange braille do │ 211│                            ⣠ ▲
+       Area - Multi Series CPU + Memory ove │    │                        ⢀⣴⣦⣼⣿ █
+       Area - Waves Purple + Magenta sine/c │    │                    ⢠⣦⣄⣴⣿⣿⣿⣿⣿ █
+       Area - Blue Revenue Single series, a │ 189│                ⢀⣴⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿ █
+       Filled - Red Revenue Solid block gro │    │             ⣠⣀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▀
+       Filled - Green Temp Daily temperatur │    │           ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled - Yellow CPU High contrast on │ 167│       ⢀⣴⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled - Magenta Waves Smooth curve  │    │    ⣰⣤⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Purple/Orange Warm alterna │    │⢀⣴⡄⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Blue/Red High contrast str │ 145│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Theme Default primary + ac │     1      5     10     15     20
+       Striped - Green/Yellow Nature-inspir │
+       Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
+                                            │
+                                            │ Variant: area
+       ↵ open detail   ↑↓ navigate   ^k act │                                   ▼
+
+    "
+  `)
+
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+  expect(text).toContain('Stock Price')
+}, 30000)
+
+test('filled style renders block characters', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Filled') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Navigate to 5th item: "Filled - Red Revenue"
+  for (let i = 0; i < 4; i++) {
+    await session.press('down')
+  }
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Filled - Red')
+    },
+    timeout: 5000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Graph Styles ─────────────────────────────────────────────────────────────
+
+       > Search...
+
+       Area - Stock Price Orange braille do │ Revenue Growth                    ▲
+       Area - Multi Series CPU + Memory ove │                                   █
+       Area - Waves Purple + Magenta sine/c │ Quarterly revenue from $10k to
+       Area - Blue Revenue Single series, a │ $75k.
+      ›Filled - Red Revenue Solid block gro │
+       Filled - Green Temp Daily temperatur │ Q1: $10k  → Q2: $25k (+150%)
+       Filled - Yellow CPU High contrast on │ Q2: $25k  → Q3: $50k (+100%)
+       Filled - Magenta Waves Smooth curve  │ Q3: $50k  → Q4: $75k (+50%)
+       Striped - Purple/Orange Warm alterna │
+       Striped - Blue/Red High contrast str │ 78│                             ▄
+       Striped - Theme Default primary + ac │   │                         ▄▀▄▀▀
+       Striped - Green/Yellow Nature-inspir │   │                     ▄▄▄▀▀▀▀▀▀
+       Striped - Red/Magenta Warm gradient  │ 54│                   ▄▀▀▀▀▀▀▀▀▀▀
+                                            │   │               ▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀
+                                            │   │           ▄ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+       ↵ open detail   ↑↓ navigate   ^k act │ 31│         ▄▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▼
+
+    "
+  `)
+
+  expect(text).toMatch(/[▄▀]/)
+  expect(text).toContain('›Filled - Red')
+}, 30000)
+
+test('striped style renders alternating columns', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Striped') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Navigate to 9th item: "Striped - Purple/Orange"
+  for (let i = 0; i < 8; i++) {
+    await session.press('down')
+  }
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Striped - Purple')
+    },
+    timeout: 5000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Graph Styles ─────────────────────────────────────────────────────────────
+
+       > Search...
+
+       Area - Stock Price Orange braille do │ 211│                            ▄ ▲
+       Area - Multi Series CPU + Memory ove │    │                         ▄▄▀▀ █
+       Area - Waves Purple + Magenta sine/c │    │                     ▄▄▄▀▀▀▀▀ █
+       Area - Blue Revenue Single series, a │ 189│                ▄▄▀▄▀▀▀▀▀▀▀▀▀
+       Filled - Red Revenue Solid block gro │    │             ▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀
+       Filled - Green Temp Daily temperatur │    │           ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+       Filled - Yellow CPU High contrast on │ 167│       ▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+       Filled - Magenta Waves Smooth curve  │    │    ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+      ›Striped - Purple/Orange Warm alterna │    │▄▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+       Striped - Blue/Red High contrast str │ 145│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+       Striped - Theme Default primary + ac │     1      5     10     15     20
+       Striped - Green/Yellow Nature-inspir │
+       Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
+                                            │
+                                            │ Even cols: Purple
+       ↵ open detail   ↑↓ navigate   ^k act │                                   ▼
+
+    "
+  `)
+
+  expect(text).toMatch(/[▄▀]/)
+  expect(text).toContain('›Striped - Purple')
+}, 30000)
+
+test('markdown + metadata detail view in list', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Area - Multi') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Navigate to 2nd item: "Area - Multi Series" (has markdown)
+  await session.press('down')
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Area - Multi') && text.includes('System Metrics')
+    },
+    timeout: 5000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Graph Styles ─────────────────────────────────────────────────────────────
+
+       > Search...
+
+       Area - Stock Price Orange braille do │ System Metrics                    ▲
+      ›Area - Multi Series CPU + Memory ove │                                   ▀
+       Area - Waves Purple + Magenta sine/c │ CPU usage (blue) vs memory usage (
+       Area - Blue Revenue Single series, a │ green) over 24 hours.
+       Filled - Red Revenue Solid block gro │
+       Filled - Green Temp Daily temperatur │ - Peak CPU at 90% around 15h
+       Filled - Yellow CPU High contrast on │ - Memory steadily climbing to 86%
+       Filled - Magenta Waves Smooth curve  │ - CPU has high variance, memory
+       Striped - Purple/Orange Warm alterna │ is monotonic
+       Striped - Blue/Red High contrast str │
+       Striped - Theme Default primary + ac │
+       Striped - Green/Yellow Nature-inspir │ 100│
+       Striped - Red/Magenta Warm gradient  │    │                   ⣠⣶⣧   ⣀⣠⣤⣶
+                                            │  75│       ⢀⣴⣧       ⢀⣰⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿
+                                            │    │      ⢀⣾⣿⣿⣧⢀⣀⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       ↵ open detail   ↑↓ navigate   ^k act │    │   ⢀⣾⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▼
+
+    "
+  `)
+
+  expect(text).toContain('System Metrics')
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+}, 30000)
+
+test('enter pushes full detail view with graph', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Area - Stock') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Press enter to push the full Detail view for first item
+  await session.press('return')
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Area - Stock Price') && text.includes('Orange braille dots')
+    },
+    timeout: 5000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+                                                                                 █
+
+      Area - Stock Price
+
+      Orange braille dots
+
+      Variant: area
+      Data points: 20
+
+      211│                                                                   ⢀
+         │                                                                 ⢀⣴⣿
+         │                                                         ⢀⣠⣴⣾⣷⣶⣦⣴⣿⣿⣿
+         │                                                 ⣠⣄⣀   ⣠⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      195│                                          ⢀⡀   ⣠⣾⣿⣿⣿⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+         │                                       ⣠⣴⣾⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+         │                                     ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+      178│                             ⣀⣤⣶⣿⣶⣶⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+
+
+      esc go back   ^k actions   ↵ Go Back                 powered by termcast.app
+
+    "
+  `)
+
+  // Full detail view shows markdown title and graph
+  expect(text).toContain('Stock Price')
+  expect(text).toContain('Orange braille')
+  expect(text).toMatch(/[\u2800-\u28FF]/)
+}, 30000)
+
+test('esc returns from detail to list', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Area - Stock') && text.includes('│')
+    },
+    timeout: 10000,
+  })
+
+  // Push detail view
+  await session.press('return')
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Orange braille dots')
+    },
+    timeout: 5000,
+  })
+
+  // Go back
+  await session.press('escape')
+
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Area - Stock Price') && text.includes('Graph Styles')
+    },
+    timeout: 5000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Graph Styles ─────────────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Area - Stock Price Orange braille do │ 211│                            ⣠ ▲
+       Area - Multi Series CPU + Memory ove │    │                        ⢀⣴⣦⣼⣿ █
+       Area - Waves Purple + Magenta sine/c │    │                    ⢠⣦⣄⣴⣿⣿⣿⣿⣿ █
+       Area - Blue Revenue Single series, a │ 189│                ⢀⣴⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿ █
+       Filled - Red Revenue Solid block gro │    │             ⣠⣀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▀
+       Filled - Green Temp Daily temperatur │    │           ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled - Yellow CPU High contrast on │ 167│       ⢀⣴⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled - Magenta Waves Smooth curve  │    │    ⣰⣤⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Purple/Orange Warm alterna │    │⢀⣴⡄⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Blue/Red High contrast str │ 145│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Theme Default primary + ac │     1      5     10     15     20
+       Striped - Green/Yellow Nature-inspir │
+       Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
+                                            │
+                                            │ Variant: area
+       ↵ open detail   ↑↓ navigate   ^k act │                                   ▼
+
+    "
+  `)
+
+  expect(text).toContain('›Area - Stock')
+  expect(text).toContain('Graph Styles')
+}, 30000)

package/src/examples/list-accessory-table.tsx

@@ -0,0 +1,77 @@
+/**
+ * Example: List with accessoryTagsLayout for column-aligned accessories.
+ *
+ * Demonstrates table-like alignment where accessories at the same position
+ * (or with the same tag key/color) form fixed-width columns across all items.
+ * Missing accessories get empty space to preserve alignment.
+ *
+ * Shows: tag key grouping, color grouping, mixed accessory types, missing tags.
+ */
+import { renderWithProviders, Color } from 'termcast'
+import List from 'termcast'
+
+function ListAccessoryTableExample() {
+  const now = new Date()
+  const hoursAgo = (h: number) => new Date(now.getTime() - h * 3600_000)
+  const daysAgo = (d: number) => new Date(now.getTime() - d * 86400_000)
+
+  // Column widths: [comments 11 "12 comments", status 11 "In Progress", priority 2 "P3"]
+  return (
+    <List navigationTitle="Accessory Table Layout" accessoryTagsLayout={[11, 11, 2]}>
+      <List.Section title="GitHub Issues">
+        <List.Item
+          id="issue-1"
+          title="Fix login timeout on slow networks"
+          accessories={[
+            { tag: { value: '3 comments', key: 'comments' } },
+            { tag: { value: 'Open', color: Color.Green, key: 'status' } },
+            { tag: { value: 'P1', color: Color.Red, key: 'priority' } },
+            { date: hoursAgo(2) },
+          ]}
+        />
+        <List.Item
+          id="issue-2"
+          title="Add dark mode support"
+          accessories={[
+            { tag: { value: '12 comments', key: 'comments' } },
+            { tag: { value: 'In Progress', color: Color.Orange, key: 'status' } },
+            { tag: { value: 'P2', color: Color.Yellow, key: 'priority' } },
+            { date: daysAgo(1) },
+          ]}
+        />
+        <List.Item
+          id="issue-3"
+          title="Update documentation for v3 API"
+          accessories={[
+            { tag: { value: '0 comments', key: 'comments' } },
+            { tag: { value: 'Open', color: Color.Green, key: 'status' } },
+            { tag: { value: 'P3', color: Color.Blue, key: 'priority' } },
+            { date: daysAgo(5) },
+          ]}
+        />
+        <List.Item
+          id="issue-4"
+          title="Refactor auth module"
+          accessories={[
+            { tag: { value: '7 comments', key: 'comments' } },
+            { tag: { value: 'Closed', color: Color.Purple, key: 'status' } },
+            { tag: null },
+            { date: daysAgo(14) },
+          ]}
+        />
+        <List.Item
+          id="issue-5"
+          title="Fix memory leak in worker pool"
+          accessories={[
+            { tag: { value: '1 comment', key: 'comments' } },
+            { tag: { value: 'Open', color: Color.Green, key: 'status' } },
+            { tag: { value: 'P1', color: Color.Red, key: 'priority' } },
+            { date: hoursAgo(6) },
+          ]}
+        />
+      </List.Section>
+    </List>
+  )
+}
+
+await renderWithProviders(<ListAccessoryTableExample />)

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

@@ -38,11 +38,9 @@ test('list detail metadata label renders short values in row layout (key: value)
 
        > Search...
 
-      ›Short Values
-       Long Values                          │ Details
-       Colored & Tags                       │
-                                            │
-                                            │ Name:    John Doe
+      ›Short Values                         │ Details
+       Long Values                          │
+       Colored & Tags                       │ Name:    John Doe
                                             │
                                             │ Email:   john@example.com
                                             │
@@ -50,8 +48,10 @@ test('list detail metadata label renders short values in row layout (key: value)
                                             │
                                             │ Status:  Active
                                             │
-                                            │ Website: example.com
-       ↑↓ navigate   ^k actions             │
+       ↑↓ navigate   ^k actions             │ Website: example.com
+
+
+
 
 
 
@@ -96,11 +96,9 @@ test('list detail metadata renders long values in column layout (key on one line
 
        > Search...
 
-       Short Values
-      ›Long Values                          │ Info with Long Values
-       Colored & Tags                       │
-                                            │
-                                            │ Description: This is a very long
+       Short Values                         │ Info with Long Values
+      ›Long Values                          │
+       Colored & Tags                       │ Description: This is a very long
                                             │              description that
                                             │              would be truncated
                                             │              if shown inline
@@ -115,8 +113,10 @@ test('list detail metadata renders long values in column layout (key on one line
                                             │ Short:       OK
                                             │
                                             │ URL:         example.com/very/
-                                            │              long/path
-       ↑↓ navigate   ^k actions             │
+       ↑↓ navigate   ^k actions             │              long/path
+
+
+
 
 
 
@@ -156,13 +156,11 @@ test('list detail metadata renders colored values and tag lists', async () => {
 
        > Search...
 
-       Short Values
-       Long Values                          │ Project Status
-      ›Colored & Tags                       │
-                                            │ Overview of the current project
+       Short Values                         │ Project Status
+       Long Values                          │
+      ›Colored & Tags                       │ Overview of the current project
                                             │ state.
                                             │
-                                            │
                                             │ Info
                                             │
                                             │ Status:   Active
@@ -179,8 +177,10 @@ test('list detail metadata renders colored values and tag lists', async () => {
                                             │
                                             │ ──────────────────────────────────
                                             │
-                                            │ Repo:     github.com/example
-       ↑↓ navigate   ^k actions             │
+       ↑↓ navigate   ^k actions             │ Repo:     github.com/example
+
+
+
 
 
 

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

@@ -33,7 +33,6 @@ test('dropdown defaults to first item when no value is provided', async () => {
 
        Dropdown Default Value Example ───────────────────────────────────────────
 
-
        > Search...                                                        Apple ▾
 
       ›First Item This list has a dropdown
@@ -44,7 +43,8 @@ test('dropdown defaults to first item when no value is provided', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^p dropdown   ^k powered by termcast
+       ↵ show selected fruit   ↑↓ navigate   ^p dropdown  powered by termcast.app
+
 
 
 
@@ -77,7 +77,6 @@ test('dropdown opens and shows items', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────
-
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Filter by category                                               esc   │
@@ -90,7 +89,7 @@ test('dropdown opens and shows items', async () => {
       │   Grape                                                                  │
       │                                                                          │
       │                                                                          │
-      │   ↵ select   ↑↓ navigate                            powered by termcast  │
+      │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
 
@@ -103,6 +102,7 @@ test('dropdown opens and shows items', async () => {
 
 
 
+
     "
   `)
 
@@ -114,7 +114,6 @@ test('dropdown opens and shows items', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────
-
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Filter by category                                               esc   │
@@ -127,7 +126,7 @@ test('dropdown opens and shows items', async () => {
       │   Grape                                                                  │
       │                                                                          │
       │                                                                          │
-      │   ↵ select   ↑↓ navigate                            powered by termcast  │
+      │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
 
@@ -140,6 +139,7 @@ test('dropdown opens and shows items', async () => {
 
 
 
+
     "
   `)
 
@@ -152,7 +152,6 @@ test('dropdown opens and shows items', async () => {
 
        Dropdown Default Value Example ───────────────────────────────────────────
 
-
        > Search...                                                       Banana ▾
 
       ›First Item This list has a dropdown
@@ -163,7 +162,8 @@ test('dropdown opens and shows items', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^p dropdown   ^k powered by termcast
+       ↵ show selected fruit   ↑↓ navigate   ^p dropdown  powered by termcast.app
+
 
 
 
@@ -196,7 +196,6 @@ test('clicking dropdown opens it', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────
-
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Filter by category                                               esc   │
@@ -209,7 +208,7 @@ test('clicking dropdown opens it', async () => {
       │   Grape                                                                  │
       │                                                                          │
       │                                                                          │
-      │   ↵ select   ↑↓ navigate                            powered by termcast  │
+      │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
 
@@ -222,6 +221,7 @@ test('clicking dropdown opens it', async () => {
 
 
 
+
     "
   `)
 
@@ -234,7 +234,6 @@ test('clicking dropdown opens it', async () => {
 
        Dropdown Default Value Example ───────────────────────────────────────────
 
-
        > Search...                                                       Orange ▾
 
       ›First Item This list has a dropdown
@@ -245,7 +244,8 @@ test('clicking dropdown opens it', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^p dropdown   ^k powered by termcast
+       ↵ show selected fruit   ↑↓ navigate   ^p dropdown  powered by termcast.app
+