termcast 1.3.47 → 1.3.49

package/src/examples/table-edge-cases.tsx

@@ -0,0 +1,72 @@
+// Example: Comprehensive table edge cases for testing.
+// Tests markdown tables with inline formatting, single column/row,
+// empty cells, wide content, and various column counts.
+
+import { Detail } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+const markdown = `# Table Edge Cases
+
+## Inline Formatting
+
+| Feature | Syntax | Result |
+|---------|--------|--------|
+| Bold | **text** | bold text |
+| Italic | *text* | italic text |
+| Code | \`code\` | inline code |
+| Link | [docs](https://example.com) | clickable link |
+| Mixed | **bold** and *italic* | combined |
+
+## Single Column
+
+| Name |
+|------|
+| Alice |
+| Bob |
+| Charlie |
+
+## Single Row
+
+| A | B | C | D | E |
+|---|---|---|---|---|
+| 1 | 2 | 3 | 4 | 5 |
+
+## Empty Cells
+
+| Key | Value | Notes |
+|-----|-------|-------|
+| host | localhost | |
+| | 8080 | default port |
+| ssl | | not configured |
+
+## Wide Table
+
+| ID | Name | Email | Role | Department | Location |
+|----|------|-------|------|------------|----------|
+| 1 | Alice Johnson | alice@example.com | Engineer | Engineering | SF |
+| 2 | Bob Smith | bob@example.com | Designer | Design | NYC |
+
+## Two Columns
+
+| Key | Value |
+|-----|-------|
+| version | 2.1.0 |
+| license | MIT |
+| author | termcast |
+
+## Numeric Data
+
+| Metric | Q1 | Q2 | Q3 | Q4 |
+|--------|----|----|----|----|
+| Revenue | 100 | 150 | 200 | 250 |
+| Users | 1000 | 1500 | 2000 | 3000 |
+| Churn | 5% | 4% | 3% | 2% |
+
+Done.
+`
+
+function TableEdgeCases() {
+  return <Detail markdown={markdown} />
+}
+
+renderWithProviders(<TableEdgeCases />)

package/src/examples/table-edge-cases.vitest.tsx

@@ -0,0 +1,307 @@
+// E2E tests for table edge cases: inline formatting, single column/row,
+// empty cells, wide tables, various column counts, and numeric data.
+
+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/table-edge-cases.tsx'],
+    cols: 80,
+    rows: 80,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('inline formatting table renders all rows', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Inline Formatting') && text.includes('bold text') && text.includes('combined')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      Table Edge Cases
+
+      Inline Formatting
+
+      Feature  Syntax           Result
+      Bold     text             bold text
+      Italic   text             italic text
+      Code     code             inline code
+      Link     docs             clickable link
+      Mixed    bold and italic  combined
+
+      Single Column
+
+      Name
+      Alice
+      Bob
+      Charlie
+
+      Single Row
+
+      A  B  C  D  E
+      1  2  3  4  5
+
+      Empty Cells
+
+      Key   Value      Notes
+      host  localhost
+            8080       default port
+      ssl              not configured
+
+      Wide Table
+
+      ID  Name           Email              Role      Department   Location
+      1   Alice Johnson  alice@example.com  Engineer  Engineering  SF
+      2   Bob Smith      bob@example.com    Designer  Design       NYC
+
+      Two Columns
+
+      Key      Value
+      version  2.1.0
+      license  MIT
+      author   termcast
+
+      Numeric Data
+
+      Metric   Q1    Q2    Q3    Q4
+      Revenue  100   150   200   250
+      Users    1000  1500  2000  3000
+      Churn    5%    4%    3%    2%
+
+      Done.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      esc go back   ^k actions                             powered by termcast.app
+
+    "
+  `)
+
+  // All formatting rows present
+  expect(text).toContain('bold text')
+  expect(text).toContain('italic text')
+  expect(text).toContain('inline code')
+  expect(text).toContain('clickable link')
+  expect(text).toContain('combined')
+  // Headers
+  expect(text).toContain('Feature')
+  expect(text).toContain('Syntax')
+  expect(text).toContain('Result')
+}, 30000)
+
+test('single column table', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Single Column') && text.includes('Charlie'),
+    timeout: 10000,
+  })
+
+  expect(text).toContain('Alice')
+  expect(text).toContain('Bob')
+  expect(text).toContain('Charlie')
+}, 30000)
+
+test('single row table', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Single Row'),
+    timeout: 10000,
+  })
+
+  // 5 columns with single data row
+  expect(text).toContain('A')
+  expect(text).toContain('B')
+  expect(text).toContain('C')
+  expect(text).toContain('D')
+  expect(text).toContain('E')
+}, 30000)
+
+test('empty cells do not break layout', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Empty Cells') && text.includes('not configured'),
+    timeout: 10000,
+  })
+
+  expect(text).toContain('localhost')
+  expect(text).toContain('default port')
+  expect(text).toContain('not configured')
+}, 30000)
+
+test('wide table with 6 columns fits within terminal', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Wide Table') && text.includes('Engineer'),
+    timeout: 10000,
+  })
+
+  // Headers
+  expect(text).toContain('ID')
+  expect(text).toContain('Name')
+  expect(text).toContain('Email')
+  expect(text).toContain('Role')
+  // Data - some fields may be truncated at 80 cols with 6 equal-width columns
+  expect(text).toContain('Alice Johnso')
+  expect(text).toContain('Bob Smith')
+  expect(text).toContain('Engineer')
+  expect(text).toContain('Designer')
+}, 30000)
+
+test('two column key-value table', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Two Columns') && text.includes('2.1.0'),
+    timeout: 10000,
+  })
+
+  expect(text).toContain('version')
+  expect(text).toContain('2.1.0')
+  expect(text).toContain('license')
+  expect(text).toContain('MIT')
+  expect(text).toContain('author')
+  expect(text).toContain('termcast')
+}, 30000)
+
+test('numeric data table', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Numeric Data') && text.includes('Revenue'),
+    timeout: 10000,
+  })
+
+  expect(text).toContain('Revenue')
+  expect(text).toContain('Users')
+  expect(text).toContain('Churn')
+  expect(text).toContain('250')
+  expect(text).toContain('3000')
+  expect(text).toContain('2%')
+}, 30000)
+
+test('all tables render without crash - full page snapshot', async () => {
+  const text = await session.text({
+    waitFor: (text) => text.includes('Done.'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      Table Edge Cases
+
+      Inline Formatting
+
+      Feature  Syntax           Result
+      Bold     text             bold text
+      Italic   text             italic text
+      Code     code             inline code
+      Link     docs             clickable link
+      Mixed    bold and italic  combined
+
+      Single Column
+
+      Name
+      Alice
+      Bob
+      Charlie
+
+      Single Row
+
+      A  B  C  D  E
+      1  2  3  4  5
+
+      Empty Cells
+
+      Key   Value      Notes
+      host  localhost
+            8080       default port
+      ssl              not configured
+
+      Wide Table
+
+      ID  Name           Email              Role      Department   Location
+      1   Alice Johnson  alice@example.com  Engineer  Engineering  SF
+      2   Bob Smith      bob@example.com    Designer  Design       NYC
+
+      Two Columns
+
+      Key      Value
+      version  2.1.0
+      license  MIT
+      author   termcast
+
+      Numeric Data
+
+      Metric   Q1    Q2    Q3    Q4
+      Revenue  100   150   200   250
+      Users    1000  1500  2000  3000
+      Churn    5%    4%    3%    2%
+
+      Done.
+
+
+      esc go back   ^k actions                             powered by termcast.app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // Verify all section headings present
+  expect(text).toContain('Inline Formatting')
+  expect(text).toContain('Single Column')
+  expect(text).toContain('Single Row')
+  expect(text).toContain('Empty Cells')
+  expect(text).toContain('Wide Table')
+  expect(text).toContain('Two Columns')
+  expect(text).toContain('Numeric Data')
+  expect(text).toContain('Done.')
+}, 30000)

package/src/examples/table-flex-grow.tsx

@@ -0,0 +1,53 @@
+// Example: Table with flexGrow to fill available width.
+// Uses wrapText mode so columns distribute evenly across the full table width,
+// making it visually obvious whether flexGrow stretches the table or not.
+// The header background also reveals the actual table width.
+
+import { renderWithProviders } from '../utils'
+import { Table } from 'termcast/src/components/table'
+
+function TableFlexGrow() {
+  const headers = ['Key', 'Value']
+  const rows = [
+    ['version', '2.1.0'],
+    ['license', 'MIT'],
+    ['author', 'termcast'],
+  ]
+
+  return (
+    <box flexDirection="column" paddingTop={1} paddingLeft={2} paddingRight={2}>
+      <text>With flexGrow=1 + wrapText (fills remaining space)</text>
+      <box height={1} />
+      <box flexDirection="row" width="100%">
+        <box width={12} flexShrink={0}>
+          <text>Config:</text>
+        </box>
+        <Table headers={headers} rows={rows} flexGrow={1} wrapText />
+      </box>
+
+      <box height={2} />
+
+      <text>Width=auto + wrapText (content-sized, no stretch)</text>
+      <box height={1} />
+      <box flexDirection="row" width="100%">
+        <box width={12} flexShrink={0}>
+          <text>Config:</text>
+        </box>
+        <Table headers={headers} rows={rows} width="auto" wrapText />
+      </box>
+
+      <box height={2} />
+
+      <text>With flexGrow=1 no wrapText (column-based)</text>
+      <box height={1} />
+      <box flexDirection="row" width="100%">
+        <box width={12} flexShrink={0}>
+          <text>Config:</text>
+        </box>
+        <Table headers={headers} rows={rows} flexGrow={1} />
+      </box>
+    </box>
+  )
+}
+
+renderWithProviders(<TableFlexGrow />)

package/src/examples/table-flex-grow.vitest.tsx

@@ -0,0 +1,124 @@
+// E2E tests for Table with flexGrow prop.
+// Uses wrapText mode to make the width difference visually obvious:
+// in row-based layout, columns distribute evenly so a wider table
+// means wider columns. Also checks header background extent.
+
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  const dbSuffix = `table-flex-grow-${process.pid}-${Date.now()}`
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/table-flex-grow.tsx'],
+    cols: 80,
+    rows: 40,
+    env: {
+      TERMCAST_DB_SUFFIX: dbSuffix,
+    },
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('flexGrow table fills remaining space next to fixed-width label', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('flexGrow=1') && text.includes('version') && text.includes('Width=auto')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+
+        With flexGrow=1 + wrapText (fills remaining space)
+
+        Config:     Key                           Value
+                    version                       2.1.0
+                    license                       MIT
+                    author                        termcast
+
+
+        Width=auto + wrapText (content-sized, no stretch)
+
+        Config:     KeVa
+                    ve2.
+                    liMI
+                    aute
+
+
+        With flexGrow=1 no wrapText (column-based)
+
+        Config:     Key      Value
+                    version  2.1.0
+                    license  MIT
+                    author   termcast
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+
+  // All three table sections render
+  expect(text).toContain('flexGrow=1')
+  expect(text).toContain('Width=auto')
+  // Table data is visible
+  expect(text).toContain('version')
+  expect(text).toContain('2.1.0')
+  expect(text).toContain('termcast')
+  // Fixed label is present
+  expect(text).toContain('Config:')
+}, 30000)
+
+test('flexGrow header background is wider than width=auto header', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('flexGrow=1') && text.includes('Width=auto')
+    },
+    timeout: 10000,
+  })
+
+  // Header bg is orange (#e89500) from the default nerv theme.
+  // With flexGrow=1 the header row should span the full remaining width.
+  // With width=auto it should be content-sized (narrower).
+  const headerBgText = await session.text({
+    only: { background: '#e89500' },
+    timeout: 5000,
+  })
+
+  // The flexGrow header should have more trailing spaces (wider bg).
+  // Both tables have "Key" and "Value" headers, but the flexGrow one
+  // should have significantly more padding/whitespace in the bg.
+  expect(headerBgText).toContain('Key')
+  expect(headerBgText).toContain('Value')
+
+  // Extract the two header lines - flexGrow header should be longer
+  const lines = headerBgText.split('\n').filter((l) => {
+    return l.includes('Key')
+  })
+  // Should have at least 2 header lines (flexGrow + width=auto + column-based)
+  expect(lines.length).toBeGreaterThanOrEqual(2)
+
+  // The flexGrow line (first) should be wider than width=auto line (second)
+  const flexGrowLine = lines[0]!
+  const autoLine = lines[1]!
+  expect(flexGrowLine.length).toBeGreaterThan(autoLine.length)
+}, 30000)

package/src/extensions/dev.tsx

@@ -14,7 +14,7 @@ import { useNavigation } from 'termcast/src/internal/navigation'
 import { TermcastProvider } from 'termcast/src/internal/providers'
 import { showToast, Toast } from 'termcast/src/apis/toast'
 import { Icon } from 'termcast'
-import { useTheme } from 'termcast/src/theme'
+import { useTheme, initializeTheme } from 'termcast/src/theme'
 import { logger } from '../logger'
 import { getCommandsWithFiles, CommandWithFile, RaycastPackageJson } from '../package-json'
 import { buildExtensionCommands } from '../build'
@@ -226,6 +226,9 @@ export async function startDevMode({
     devRebuildCount: 1,
   })
 
+  // Load theme after state reset — extensionPath is now set so it reads from the correct DB
+  initializeTheme()
+
   function App(): any {
     const devElement = useStore((state) => state.devElement)
     // REMOVED: key={devRebuildCount} - we want to preserve the React tree!
@@ -296,6 +299,9 @@ export async function startCompiledExtension({
     devRebuildCount: 1,
   })
 
+  // Load theme after state reset — extensionPath is now set so it reads from the correct DB
+  initializeTheme()
+
   function App(): any {
     const devElement = useStore((state) => state.devElement)
     return <TermcastProvider>{devElement}</TermcastProvider>

package/src/globals.ts

@@ -10,6 +10,7 @@ import * as opentuiReact from '@opentui/react'
 import * as react from 'react'
 import * as reactJsxRuntime from 'react/jsx-runtime'
 import * as termcastApi from './index'
+import * as termcastOpentui from './opentui'
 
 declare global {
   var opentuiCore: typeof opentuiCore
@@ -17,6 +18,7 @@ declare global {
   var react: typeof react
   var reactJsxRuntime: typeof reactJsxRuntime
   var termcastApi: typeof termcastApi
+  var termcastOpentui: typeof termcastOpentui
 }
 
 // Initialize globals
@@ -30,5 +32,6 @@ globalThis._Fragment = reactJsxRuntime.Fragment
 
 globalThis.reactJsxRuntime = reactJsxRuntime
 globalThis.termcastApi = termcastApi
+globalThis.termcastOpentui = termcastOpentui
 
 globalThis.logger = logger

package/src/index.tsx

@@ -52,6 +52,36 @@ export type {
   DetailPropsWithLoading,
 } from 'termcast/src/components/detail'
 
+// Core UI Components - Graph
+export { Graph } from 'termcast/src/components/graph'
+export type {
+  GraphProps,
+  GraphLineProps,
+  GraphVariant,
+} from 'termcast/src/components/graph'
+
+// Core UI Components - Row
+export { Row } from 'termcast/src/components/row'
+export type { RowProps } from 'termcast/src/components/row'
+
+// Core UI Components - Table
+export { Table } from 'termcast/src/components/table'
+export type { TableProps } from 'termcast/src/components/table'
+
+// Core UI Components - BarChart
+export { BarChart } from 'termcast/src/components/bar-chart'
+export type {
+  BarChartProps,
+  BarChartSegmentProps,
+} from 'termcast/src/components/bar-chart'
+
+// Core UI Components - BarGraph
+export { BarGraph } from 'termcast/src/components/bar-graph'
+export type {
+  BarGraphProps,
+  BarGraphSeriesProps,
+} from 'termcast/src/components/bar-graph'
+
 // Form Components
 import {
   Form as FormComponent,
@@ -158,6 +188,7 @@ import type {
   ImageFallback,
 } from 'termcast/src/components/image'
 
+
 export function Image(props: ImageProps): any {
   return ImageComponent(props)
 }

package/src/internal/date-picker-widget.tsx

@@ -256,7 +256,9 @@ export function DatePickerWidget({
         } else if (focus === 'year') {
           // At top of widget, trigger callback or cycle to bottom
           if (onFirstRowUpKey) {
+            key.stopPropagation()
             onFirstRowUpKey()
+            return
           } else {
             // Cycle to grid if no callback
             setFocus('grid')
@@ -274,7 +276,9 @@ export function DatePickerWidget({
           if (remainingDays < 7) {
             // At bottom of grid, trigger callback or cycle to top
             if (onLastRowDownKey) {
+              key.stopPropagation()
               onLastRowDownKey()
+              return
             } else {
               // Cycle to year if no callback
               setFocus('year')

package/src/internal/providers.tsx

@@ -11,7 +11,7 @@ import { NavigationProvider } from 'termcast/src/internal/navigation'
 import { CommonProps, termcastMaxContentWidth } from 'termcast/src/utils'
 import { Cache } from 'termcast/src/apis/cache'
 import { logger } from 'termcast/src/logger'
-import { useTheme, initializeTheme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { useStore } from 'termcast/src/state'
 import { useKeyboard, useRenderer } from '@opentui/react'
 import { initializeErrorHandlers } from 'termcast/src/internal/error-handler'
@@ -22,9 +22,6 @@ import { Clipboard } from '../apis/clipboard'
 // Initialize error handlers at module load time
 initializeErrorHandlers()
 
-// Initialize theme from persisted storage
-initializeTheme()
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {