termcast 1.4.1 → 1.6.0

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

@@ -50,7 +50,8 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 
       This detail view demonstrates markdown content alongside metadata.
-      ---
+      ─────────────────────────────────────────────────────────────────────────────────────────────
+
       Summary
 
 
@@ -72,7 +73,8 @@ test('detail metadata showcase renders markdown and metadata together', async ()
       - Finishing the remaining user migrations
       - Implementing the new dashboard
       - Writing integration tests
-      ---
+      ─────────────────────────────────────────────────────────────────────────────────────────────
+
       Last updated: January 20, 2024
 
       Basic Information
@@ -158,8 +160,6 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 
 
-
-
 
     "
   `)
@@ -216,7 +216,8 @@ test('detail metadata renders long values in column layout', async () => {
 
 
       This detail view demonstrates markdown content alongside metadata.
-      ---
+      ─────────────────────────────────────────────────────────────────────────────────────────────
+
       Summary
 
 
@@ -238,7 +239,8 @@ test('detail metadata renders long values in column layout', async () => {
       - Finishing the remaining user migrations
       - Implementing the new dashboard
       - Writing integration tests
-      ---
+      ─────────────────────────────────────────────────────────────────────────────────────────────
+
       Last updated: January 20, 2024
 
       Basic Information
@@ -324,8 +326,6 @@ test('detail metadata renders long values in column layout', async () => {
 
 
 
-
-
 
     "
   `)
@@ -397,7 +397,8 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
 
       This detail view demonstrates markdown content alongside metadata.
-      ---
+      ─────────────────────────────────────────────────────────────────────────────────────────────
+
       Summary
 
 
@@ -419,7 +420,8 @@ test('detail metadata renders tag lists with multiple items', async () => {
       - Finishing the remaining user migrations
       - Implementing the new dashboard
       - Writing integration tests
-      ---
+      ─────────────────────────────────────────────────────────────────────────────────────────────
+
       Last updated: January 20, 2024
 
       Basic Information
@@ -505,8 +507,6 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
 
 
-
-
 
     "
   `)

package/src/examples/form-basic.vitest.tsx

@@ -221,7 +221,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -279,7 +279,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -338,7 +338,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -413,7 +413,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -471,7 +471,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -531,7 +531,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -589,7 +589,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -674,10 +674,9 @@ test('form scrolls with mouse wheel', async () => {
     "
 
 
-
       │
-      │  This demonstrates all available form input types. Use arrow   ▀
-      │  keys or Tab to navigate between fields.
+      │
+      │  keys or Tab to navigate between fields.                       ▄
       │
       ◇  Username
       │  Enter your username
@@ -687,6 +686,7 @@ test('form scrolls with mouse wheel', async () => {
       ◇  Password
       │  Enter secure password
       │
+      │  Must be at least 8 characters
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -763,7 +763,7 @@ test('arrow down from checkbox to dropdown lands on first item', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←       April       →
+      │   ←        May        →
 
 
        ctrl ↵ submit   tab navigate   ^k actions

package/src/examples/form-dropdown.vitest.tsx

@@ -102,7 +102,7 @@ test('form dropdown shows inline options', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -162,7 +162,7 @@ test('form dropdown shows inline options', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -219,7 +219,7 @@ test('form dropdown shows inline options', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -344,7 +344,7 @@ test('form dropdown keyboard navigation', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -401,7 +401,7 @@ test('form dropdown keyboard navigation', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -458,7 +458,7 @@ test('form dropdown keyboard navigation', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -515,7 +515,7 @@ test('form dropdown keyboard navigation', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -580,7 +580,7 @@ test('form dropdown with default value', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -637,7 +637,7 @@ test('form dropdown with default value', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -708,7 +708,7 @@ test('selecting second-to-last visible item should not scroll', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █
@@ -765,7 +765,7 @@ test('selecting second-to-last visible item should not scroll', async () => {
 
 
 
-      ▪  Dropdown Component Demo                                       █
+      ▪︎  Dropdown Component Demo                                       █
       │  Test dropdown with sections, multiple selection, and more     █
       │  features                                                      █
       │                                                                █

package/src/examples/form-scroll.vitest.tsx

@@ -53,7 +53,7 @@ test(
 
 
 
-        ▪  Form Scroll Test                                    ▀
+        ▪︎  Form Scroll Test                                    ▀
         │  Test scrolling behavior when navigating with Tab
         │
         ◆  Field 1

package/src/examples/form-tagpicker.vitest.tsx

@@ -147,7 +147,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -207,7 +207,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -264,7 +264,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -389,7 +389,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -446,7 +446,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -503,7 +503,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -560,7 +560,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -625,7 +625,7 @@ test('form tagpicker with default value', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -682,7 +682,7 @@ test('form tagpicker with default value', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -746,7 +746,7 @@ test('form tagpicker with default value', async () => {
 
 
 
-      ▪  TagPicker Component Demo
+      ▪︎  TagPicker Component Demo
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
@@ -770,7 +770,7 @@ test('form tagpicker with default value', async () => {
       │  ○ Poland
       │
       │
-      ▪  Submitted Data
+      ▪︎  Submitted Data
       │  {
       │    "sports": [
       │      "basketball"

package/src/examples/github.vitest.tsx

@@ -54,22 +54,13 @@ afterEach(() => {
 })
 
 test.skipIf(!extensionExists)('github extension shows command list on launch', async () => {
-  // Wait for command list to appear (extension has multiple commands)
-  // Don't match "Commands" alone - it falsely matches "Building 18 commands..." build log
   const initialView = await session.text({
-    waitFor: (text) => /My Pull Requests|Search Repositories/i.test(text),
+    waitFor: (text) => text.includes('My Pul...quests') && text.includes('Search Repositorie'),
     timeout: 30000,
   })
 
-  // Wait for the full command list to render.
-  // The list can paint the first item before all descendants are registered.
-  await session.text({
-    waitFor: (text) => text.includes('My Pull Requests') && text.includes('Search Repositories'),
-    timeout: 30000,
-  })
-
-  expect(initialView).toContain('My Pull Requests')
-  expect(initialView).toContain('Search Repositories')
+  expect(initialView).toContain('My Pul...quests')
+  expect(initialView).toContain('Search Repositorie')
   expect(initialView).toMatchInlineSnapshot(`
     "
 
@@ -79,19 +70,19 @@ test.skipIf(!extensionExists)('github extension shows command list on launch', a
        > Search commands...
 
        Commands
-      ›My Pull Requests List pull requests you created, participated in, or  view
-       Search Pull Requests Search recent pull requests globally in all repo view
-       Create Pull Request Create a pull request in one of your GitHub repos view
-       My Issues List issues created by you, assigned to you or mentioning y view
+      ›My Pul...questsList pull requests you cr... in, or were mentioned in. view
+       Search Pull Request Search recent pull requ...ly in all repositories. view
+       Create Pull Reques Create a pull request i...our GitHub repositories. view
+       My IssuesList issues created by you, ...ned to you or mentioning you. view
        Search Issues Search recent issues globally in all repositories.      view
        Create Issue Create an issue in one of your GitHub repositories.      view
        Create Branch Create a branch in one of your GitHub repositories      view
-       Search Repositories Search in your public or private repositories by  view
+       Search Repositorie Search in your public o...te repositories by name. view
        My Latest Repositories List your repositories by latest updated       view
        My Starred Repositories List repositories you have starred            view
        Workflow Runs Manage workflow runs for a selected GitHub repository.  view
-       Notifications List inbox notifications from all repositories or a sel view
-       Search Discussions Search recent Discussions globally in all reposito view
+       Notification List inbox notifications f...s or a selected repository. view
+       Search DiscussionsSearch recent Discussion...ally in all repositories view
        My Discussions Show your Discussions                                  view
        My Projects Show your Projects                                        view
 
@@ -108,7 +99,7 @@ test.skipIf(!extensionExists)('github extension shows command list on launch', a
 test.skipIf(!extensionExists)('github extension can navigate commands', async () => {
   // Wait for command list
   await session.text({
-    waitFor: (text) => text.includes('My Pull Requests') && text.includes('Search Repositories'),
+    waitFor: (text) => text.includes('My Pul...quests') && text.includes('Search Repositorie'),
     timeout: 30000,
   })
 
@@ -128,19 +119,19 @@ test.skipIf(!extensionExists)('github extension can navigate commands', async ()
        > Search commands...
 
        Commands
-       My Pull Requests List pull requests you created, participated in, or  view
-       Search Pull Requests Search recent pull requests globally in all repo view
-      ›Create Pull Request Create a pull request in one of your GitHub repos view
-       My Issues List issues created by you, assigned to you or mentioning y view
+       My Pul...questsList pull requests you cr... in, or were mentioned in. view
+       Search Pull Request Search recent pull requ...ly in all repositories. view
+      ›Create Pull Reques Create a pull request i...our GitHub repositories. view
+       My IssuesList issues created by you, ...ned to you or mentioning you. view
        Search Issues Search recent issues globally in all repositories.      view
        Create Issue Create an issue in one of your GitHub repositories.      view
        Create Branch Create a branch in one of your GitHub repositories      view
-       Search Repositories Search in your public or private repositories by  view
+       Search Repositorie Search in your public o...te repositories by name. view
        My Latest Repositories List your repositories by latest updated       view
        My Starred Repositories List repositories you have starred            view
        Workflow Runs Manage workflow runs for a selected GitHub repository.  view
-       Notifications List inbox notifications from all repositories or a sel view
-       Search Discussions Search recent Discussions globally in all reposito view
+       Notification List inbox notifications f...s or a selected repository. view
+       Search DiscussionsSearch recent Discussion...ally in all repositories view
        My Discussions Show your Discussions                                  view
        My Projects Show your Projects                                        view
 
@@ -157,7 +148,7 @@ test.skipIf(!extensionExists)('github extension can navigate commands', async ()
 test.skipIf(!extensionExists)('github extension can open actions panel', async () => {
   // Wait for command list
   await session.text({
-    waitFor: (text) => /My Pull Requests|Search Repositories/i.test(text),
+    waitFor: (text) => /My Pu.*uest|Search .*sitories/i.test(text),
     timeout: 30000,
   })
 
@@ -209,7 +200,7 @@ test.skipIf(!extensionExists)('github extension can open actions panel', async (
 test.skipIf(!extensionExists)('github extension can search commands', async () => {
   // Wait for command list
   await session.text({
-    waitFor: (text) => /My Pull Requests|Search Repositories/i.test(text),
+    waitFor: (text) => /My Pu.*uest|Search .*sitories/i.test(text),
     timeout: 30000,
   })
 
@@ -219,7 +210,7 @@ test.skipIf(!extensionExists)('github extension can search commands', async () =
   await session.type('workflow')
 
   const filteredList = await session.text({
-    waitFor: (text) => /Workflow Runs/i.test(text) && !/My Pull Requests/i.test(text),
+    waitFor: (text) => /Workflow Runs/i.test(text) && !/My Pu.*uest/i.test(text),
     timeout: 5000,
   })
 
@@ -239,11 +230,11 @@ test.skipIf(!extensionExists)('github extension can search commands', async () =
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions   :vim    powered by termcast.app
 
 
 
 
+       ↵ run command   ↑↓ navigate   ^k actions   :vim    powered by termcast.app
 
 
 

package/src/examples/graph-bar-chart.vitest.tsx

@@ -36,7 +36,7 @@ test('initial render shows bar chart for Monthly Budget', async () => {
 
       ›Monthly Budget Spent / Remaining / Savings     │ ┌Spent: 78.6%┐
        Disk Usage System / Apps / Media / Free        │
-       Investment Portfolio Stocks / Bonds / Cash / C │
+       Investm...ortfoli Stocks / Bon.../ Real Estate │
        CPU Time User / System / IO Wait / Idle        │ ────────────────────────────────────────────
        Revenue by Product 6 product lines             │
        A/B Test Split Control vs Variant (50/50)      │ Total: $6,174
@@ -45,18 +45,18 @@ test('initial render shows bar chart for Monthly Budget', async () => {
        Equal Distribution 10 equal segments           │
        Custom Colors Explicit color per segment       │ Saved: 10.0%
        Needs vs Wants 50/30/20 budget rule            │
-       Stress Test (20 items) Many small equal segmen │
+       Stress Test (20 items)Many small...al segments │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
                                                       │
                                                       │
        ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
-
-
-
-
-
-
-
     "
   `)
   expect(text).toContain('Monthly Budget')
@@ -93,7 +93,7 @@ test('navigate to Market Share - dominant + tiny segments', async () => {
 
        Monthly Budget Spent / Remaining / Savings     │ ┌Leader: 85.0%┐
        Disk Usage System / Apps / Media / Free        │
-       Investment Portfolio Stocks / Bonds / Cash / C │
+       Investm...ortfoli Stocks / Bon.../ Real Estate │
        CPU Time User / System / IO Wait / Idle        │ ────────────────────────────────────────────
        Revenue by Product 6 product lines             │
        A/B Test Split Control vs Variant (50/50)      │ HHI:      7,264 (monopoly)
@@ -102,18 +102,18 @@ test('navigate to Market Share - dominant + tiny segments', async () => {
        Equal Distribution 10 equal segments           │
        Custom Colors Explicit color per segment       │ Visible:  Tiny ones hidden
        Needs vs Wants 50/30/20 budget rule            │
-       Stress Test (20 items) Many small equal segmen │
+       Stress Test (20 items)Many small...al segments │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
                                                       │
                                                       │
        ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
-
-
-
-
-
-
-
     "
   `)
   expect(text).toContain('Market Share')
@@ -149,7 +149,7 @@ test('navigate to Equal Distribution - 10 segments', async () => {
 
        Monthly Budget Spent / Remaining / Savings     │
        Disk Usage System / Apps / Media / Free        │
-       Investment Portfolio Stocks / Bonds / Cash / C │ ────────────────────────────────────────────
+       Investm...ortfoli Stocks / Bon.../ Real Estate │ ────────────────────────────────────────────
        CPU Time User / System / IO Wait / Idle        │
        Revenue by Product 6 product lines             │ Segments: 10
        A/B Test Split Control vs Variant (50/50)      │
@@ -158,18 +158,18 @@ test('navigate to Equal Distribution - 10 segments', async () => {
       ›Equal Distribution 10 equal segments           │
        Custom Colors Explicit color per segment       │
        Needs vs Wants 50/30/20 budget rule            │
-       Stress Test (20 items) Many small equal segmen │
+       Stress Test (20 items)Many small...al segments │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
                                                       │
                                                       │
        ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
-
-
-
-
-
-
-
     "
   `)
   expect(text).toContain('Equal Distribution')
@@ -205,7 +205,7 @@ test('navigate to Stress Test - 20 segments', async () => {
 
        Monthly Budget Spent / Remaining / Savings     │
        Disk Usage System / Apps / Media / Free        │
-       Investment Portfolio Stocks / Bonds / Cash / C │ ────────────────────────────────────────────
+       Investm...ortfoli Stocks / Bon.../ Real Estate │ ────────────────────────────────────────────
        CPU Time User / System / IO Wait / Idle        │
        Revenue by Product 6 product lines             │ Segments: 20
        A/B Test Split Control vs Variant (50/50)      │
@@ -214,18 +214,18 @@ test('navigate to Stress Test - 20 segments', async () => {
        Equal Distribution 10 equal segments           │
        Custom Colors Explicit color per segment       │
        Needs vs Wants 50/30/20 budget rule            │
-      ›Stress Test (20 items) Many small equal segmen │
+      ›Stress Test (20 items)Many small...al segments │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
+                                                      │
                                                       │
                                                       │
        ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
-
-
-
-
-
-
-
     "
   `)
   expect(text).toContain('Stress Test')

package/src/examples/graph-multi-series.tsx

@@ -24,7 +24,7 @@ function GraphMultiSeries() {
     <Detail
       markdown="# Multi-Series Chart"
       metadata={
-        <Graph height={12} xLabels={xLabels} yTicks={5}>
+        <Graph variant='area' height={12} xLabels={xLabels} yTicks={5}>
           <Graph.Line data={prices} color={Color.Orange} title="Price" />
           <Graph.Line data={sma} color={Color.Blue} title="SMA(5)" />
         </Graph>