termcast 1.3.53 → 1.4.0

package/src/examples/simple-candle-chart.tsx

@@ -0,0 +1,363 @@
+// Example: CandleChart component showing realistic crypto OHLC data.
+// List of markets with candlestick charts in the side detail panel.
+// Green bars = bullish (close >= open), red bars = bearish (close < open).
+// Wicks extend from body to high/low extremes.
+//
+// Demonstrates:
+// - CandleChart in List.Item.Detail (side panel)
+// - CandleChart in full-page Detail (pushed on Enter)
+// - Mixed component types: CandleChart + Graph overlay, CandleChart + BarChart volume,
+//   Row for side-by-side comparisons, metadata with tags
+// - Realistic crypto market action from frozen Coinbase daily OHLCV data
+
+import React from 'react'
+import { Action, ActionPanel, List, Detail, Color, CandleChart, Graph, BarChart, Row } from 'termcast'
+import type { CandleData } from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { renderWithProviders } from '../utils'
+import { cryptoMarketData } from './simple-candle-chart-data'
+
+interface Market {
+  symbol: string
+  displaySymbol: string
+  name: string
+  sector: string
+  currentPrice: number
+  change: number
+  priceDecimals: number
+  candles: CandleData[]
+  closingPrices: number[]
+  volume: number[]
+}
+
+interface MixedItem {
+  title: string
+  subtitle: string
+  market: Market
+  mode: 'candle-only' | 'candle-with-line' | 'candle-with-volume' | 'side-by-side'
+}
+
+const tickers: Market[] = cryptoMarketData.map((market) => {
+  const candles: CandleData[] = market.candles.map((candle) => {
+    return {
+      open: candle.open,
+      close: candle.close,
+      high: candle.high,
+      low: candle.low,
+    }
+  })
+
+  return {
+    symbol: market.symbol,
+    displaySymbol: market.symbol.replace('-USD', ''),
+    name: market.name,
+    sector: market.sector,
+    currentPrice: market.currentPrice,
+    change: market.change,
+    priceDecimals: market.priceDecimals,
+    candles,
+    closingPrices: candles.map((candle) => {
+      return candle.close
+    }),
+    volume: [...market.volume],
+  }
+})
+
+const mixedItems: MixedItem[] = [
+  { title: 'BTC - Candles', subtitle: 'Real BTC/USD hourly candles', market: tickers[0]!, mode: 'candle-only' },
+  { title: 'ETH - Candle + Line', subtitle: 'Candles plus closing line', market: tickers[1]!, mode: 'candle-with-line' },
+  { title: 'SOL - Candle + Volume', subtitle: 'Candles plus volume split', market: tickers[2]!, mode: 'candle-with-volume' },
+  { title: 'BTC vs ETH', subtitle: 'Side-by-side crypto leaders', market: tickers[0]!, mode: 'side-by-side' },
+  { title: 'DOGE - Candle + Line', subtitle: 'Low-priced asset formatting', market: tickers[4]!, mode: 'candle-with-line' },
+]
+
+// 300 hourly candles ≈ 12.5 days
+const xLabels = ['12d', '8d', '4d', 'Now']
+
+function formatNumber({ value, decimals }: { value: number; decimals: number }): string {
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(value)
+}
+
+function formatPrice({ value, decimals }: { value: number; decimals: number }): string {
+  return `$${formatNumber({ value, decimals })}`
+}
+
+function formatPercent(change: number): string {
+  return change >= 0 ? `+${change.toFixed(1)}%` : `${change.toFixed(1)}%`
+}
+
+function changeColor(change: number): Color.ColorLike {
+  if (change > 0) return Color.Green
+  if (change < 0) return Color.Red
+  return Color.SecondaryText
+}
+
+function yAxisFormatter({ market }: { market: Market }): (value: number) => string {
+  return (value) => {
+    return formatPrice({ value, decimals: market.priceDecimals })
+  }
+}
+
+function ChartForMode({ item, height }: { item: MixedItem; height: number }): any {
+  const { market } = item
+  const yFormat = yAxisFormatter({ market })
+
+  switch (item.mode) {
+    case 'candle-only': {
+      return (
+        <CandleChart
+          data={market.candles}
+          height={height}
+          xLabels={xLabels}
+          yTicks={4}
+          yFormat={yFormat}
+        />
+      )
+    }
+    case 'candle-with-line': {
+      return (
+        <>
+          <CandleChart
+            data={market.candles}
+            height={height}
+            xLabels={xLabels}
+            yTicks={4}
+            yFormat={yFormat}
+          />
+          <Graph
+            height={Math.max(5, height - 3)}
+            xLabels={xLabels}
+            yTicks={3}
+            yFormat={yFormat}
+            variant="area"
+          >
+            <Graph.Line data={market.closingPrices} color={Color.Blue} title="Close" />
+          </Graph>
+        </>
+      )
+    }
+    case 'candle-with-volume': {
+      const firstHalf = market.volume.slice(0, 15).reduce((sum, value) => {
+        return sum + value
+      }, 0)
+      const secondHalf = market.volume.slice(15).reduce((sum, value) => {
+        return sum + value
+      }, 0)
+
+      return (
+        <>
+          <CandleChart
+            data={market.candles}
+            height={height}
+            xLabels={xLabels}
+            yTicks={4}
+            yFormat={yFormat}
+          />
+          <BarChart height={1}>
+            <BarChart.Segment value={firstHalf} label="First half" color={Color.Blue} />
+            <BarChart.Segment value={secondHalf} label="Second half" color={Color.Orange} />
+          </BarChart>
+        </>
+      )
+    }
+    case 'side-by-side': {
+      const eth = tickers[1]!
+      return (
+        <Row>
+          <CandleChart
+            data={market.candles}
+            height={height}
+            xLabels={['30d', 'Now']}
+            yTicks={3}
+            yFormat={yAxisFormatter({ market })}
+          />
+          <CandleChart
+            data={eth.candles}
+            height={height}
+            xLabels={['30d', 'Now']}
+            yTicks={3}
+            yFormat={yAxisFormatter({ market: eth })}
+          />
+        </Row>
+      )
+    }
+  }
+}
+
+function CandleDetailView({ item }: { item: MixedItem }): any {
+  const { pop } = useNavigation()
+  const { market } = item
+  const changeStr = formatPercent(market.change)
+
+  const markdown = [
+    `# ${market.displaySymbol} - ${market.name}`,
+    '',
+    `**Category:** ${market.sector}`,
+    '',
+    `**Price:** ${formatPrice({ value: market.currentPrice, decimals: market.priceDecimals })}  `,
+    `**24h change:** ${changeStr}`,
+    '',
+    `**Mode:** \`${item.mode}\``,
+    '',
+    '300 hourly candles from Coinbase Exchange, frozen so the example stays deterministic.',
+  ].join('\n')
+
+  return (
+    <Detail
+      navigationTitle={`${market.displaySymbol} Detail`}
+      markdown={markdown}
+      metadata={
+        <Detail.Metadata>
+          <ChartForMode item={item} height={15} />
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.Label
+            title="Price"
+            text={{ value: formatPrice({ value: market.currentPrice, decimals: market.priceDecimals }), color: changeColor(market.change) }}
+          />
+          <Detail.Metadata.Label
+            title="Change"
+            text={{ value: changeStr, color: changeColor(market.change) }}
+          />
+          <Detail.Metadata.Label title="Category" text={market.sector} />
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.TagList title="Components">
+            <Detail.Metadata.TagList.Item text="CandleChart" color={Color.Green} />
+            {item.mode === 'candle-with-line' && (
+              <Detail.Metadata.TagList.Item text="Graph" color={Color.Blue} />
+            )}
+            {item.mode === 'candle-with-volume' && (
+              <Detail.Metadata.TagList.Item text="BarChart" color={Color.Orange} />
+            )}
+            {item.mode === 'side-by-side' && (
+              <Detail.Metadata.TagList.Item text="Row" color={Color.Purple} />
+            )}
+          </Detail.Metadata.TagList>
+        </Detail.Metadata>
+      }
+      actions={
+        <ActionPanel>
+          <Action title="Go Back" onAction={() => { pop() }} />
+        </ActionPanel>
+      }
+    />
+  )
+}
+
+function SimpleCandleChart() {
+  const { push } = useNavigation()
+
+  return (
+    <List
+      navigationTitle="Crypto Markets"
+      searchBarPlaceholder="Search markets..."
+      isShowingDetail={true}
+    >
+      <List.Section title="Watchlist">
+        {tickers.map((market) => {
+          const changeStr = formatPercent(market.change)
+          return (
+            <List.Item
+              key={market.symbol}
+              id={market.symbol}
+              title={market.displaySymbol}
+              subtitle={market.name}
+              accessories={[
+                { text: { value: formatPrice({ value: market.currentPrice, decimals: market.priceDecimals }), color: changeColor(market.change) } },
+                { text: { value: changeStr, color: changeColor(market.change) } },
+              ]}
+              detail={
+                <List.Item.Detail
+                  metadata={
+                    <List.Item.Detail.Metadata>
+                      <CandleChart
+                        data={market.candles}
+                        height={10}
+                        xLabels={xLabels}
+                        yTicks={4}
+                        yFormat={yAxisFormatter({ market })}
+                      />
+                      <List.Item.Detail.Metadata.Label
+                        title="Price"
+                        text={{ value: formatPrice({ value: market.currentPrice, decimals: market.priceDecimals }), color: changeColor(market.change) }}
+                      />
+                      <List.Item.Detail.Metadata.Label
+                        title="Change"
+                        text={{ value: changeStr, color: changeColor(market.change) }}
+                      />
+                      <List.Item.Detail.Metadata.Label title="Category" text={market.sector} />
+                      <List.Item.Detail.Metadata.Separator />
+                      <List.Item.Detail.Metadata.Label title={`${market.symbol} Hourly OHLC`} />
+                    </List.Item.Detail.Metadata>
+                  }
+                />
+              }
+              actions={
+                <ActionPanel>
+                  <Action
+                    title="Open Detail"
+                    onAction={() => {
+                      push(
+                        <CandleDetailView
+                          item={{ title: market.displaySymbol, subtitle: market.name, market, mode: 'candle-only' }}
+                        />,
+                      )
+                    }}
+                  />
+                </ActionPanel>
+              }
+            />
+          )
+        })}
+      </List.Section>
+
+      <List.Section title="Mixed Components">
+        {mixedItems.map((item) => {
+          const { market } = item
+          const changeStr = formatPercent(market.change)
+          return (
+            <List.Item
+              key={item.title}
+              id={item.title}
+              title={item.title}
+              subtitle={item.subtitle}
+              accessories={[
+                { text: { value: formatPrice({ value: market.currentPrice, decimals: market.priceDecimals }), color: changeColor(market.change) } },
+              ]}
+              detail={
+                <List.Item.Detail
+                  metadata={
+                    <List.Item.Detail.Metadata>
+                      <ChartForMode item={item} height={8} />
+                      <List.Item.Detail.Metadata.Separator />
+                      <List.Item.Detail.Metadata.Label
+                        title="Price"
+                        text={{ value: formatPrice({ value: market.currentPrice, decimals: market.priceDecimals }), color: changeColor(market.change) }}
+                      />
+                      <List.Item.Detail.Metadata.Label
+                        title="Change"
+                        text={{ value: changeStr, color: changeColor(market.change) }}
+                      />
+                    </List.Item.Detail.Metadata>
+                  }
+                />
+              }
+              actions={
+                <ActionPanel>
+                  <Action
+                    title="Open Detail"
+                    onAction={() => { push(<CandleDetailView item={item} />) }}
+                  />
+                </ActionPanel>
+              }
+            />
+          )
+        })}
+      </List.Section>
+    </List>
+  )
+}
+
+renderWithProviders(<SimpleCandleChart />)

package/src/examples/simple-candle-chart.vitest.tsx

@@ -0,0 +1,269 @@
+// E2E tests for CandleChart component showing realistic crypto OHLC candles.
+// Verifies candle body (▌/▘/▖) and wick (│) characters render,
+// Y-axis labels, X-axis labels, and navigation between tickers.
+// Also tests full-page Detail view and mixed component types
+// (CandleChart + Graph, CandleChart + BarChart, Row side-by-side).
+
+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/simple-candle-chart.tsx'],
+    cols: 100,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('candle chart renders in list detail with axes', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('BTC') && text.includes('$') && text.includes('12d')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Crypto Markets ───────────────────────────────────────────────────────────────────────────────
+
+       > Search markets...
+
+       Watchlist                                      │ $74,678│                           │
+      ›BTC Bitcoin                                    │        │                          ▌▌▖│
+       ETH Ethereum                                   │        │                          ▌│▘▌▖│
+       SOL Solana                                     │ $70,438│       │             │    ▌  │▘▘▌
+       XRP XRP                                        │        │      ▖▖▖▖           ▌▌ ▖▖▌     ▌││
+       DOGE Dogecoin                                  │        │      ▌││▌▖▖    ▖▖│││▌▘▌▌│      ▘▘▘▌
+       BNB BNB                                        │ $66,197│▖▖   │▌  ▘▘▘▌▖▖▌▘▌▖▌▌▌ ▘▘
+                                                      │        ││▌▖ │▌▘     ▘▘▌▌  ▘▘▘▘
+       Mixed Components                               │        │ │▌▌▘▘        ▘▘
+       BTC - Candles Real BTC/USD hourly candles      │ $61,957│  ││
+       ETH - Candle + Line Candles plus closing line  │         12d        8d         4d         Now
+       SOL - Candle + Volume Candles plus volume spli │
+       BTC vs ETH Side-by-side crypto leaders         │ Price:    $67,641
+       DOGE - Candle + Line Low-priced asset formatti │
+                                                      │ Change:   -0.2%
+                                                      │
+                                                      │ Category: Store of Value
+                                                      │
+                                                      │ ────────────────────────────────────────────
+                                                      │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │ BTC-USD Hourly OHLC
+
+
+    "
+  `)
+
+  expect(text).toContain('BTC')
+  expect(text).toContain('12d')
+  expect(text).toContain('Now')
+  expect(text).toContain('$')
+}, 30000)
+
+test('push to full-page detail view on Enter', async () => {
+  await session.text({ waitFor: (t) => t.includes('BTC'), timeout: 10000 })
+  // Press Enter to push to Detail view
+  session.sendKey('return')
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('candle-only') && t.includes('Go Back'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+                                                                                                     █
+
+      BTC - Bitcoin
+
+
+      Category: Store of Value
+      Price: $67,641
+      24h change: -0.2%
+      Mode: candle-only
+      300 hourly candles from Coinbase Exchange, frozen so the example stays deterministic.
+
+      $74,678│                                                                │
+             │                                                              ▖▌▌│  │
+             │                                                              ▌│▘▌▖▖▌▌
+             │                                                             │▌   ││ ▌│││
+             │                                                             ▌▘      ▘▌▖▌▌▖▖
+      $70,438│                 │                               │          │▌          │││▌
+             │                ▌▌ │                             ▌▌▖▖   ││││▌▘             ▘▌
+             │                ▌▘▌▌▘▌▖│  ││           │         ▌││▘▌▖│▌▌▖▖▌               ▌▖▖▖▖▖▖▖
+             │               ▖▌ │││ ▌▌▘▌▌▌         │▖▖▖ ││ ││  ▌   │▌│▌││▘▘               ││  ▘▘│▘
+      $66,197│▖▖▖         │  ▌      ▘▘ │ ▘▌▖      │▌▘ ▘▌▌▌│▖▌▌▖▌    ▘▌▌
+             │▘│▌▖        ▖▖▖▌            │▘▌▌▘▌ │▌▘│    ▘▌▌││▌▌
+             │  │▌▖▖   ││ ▌││              │││ ▌ ▖▌       ││
+
+
+      esc go back   ^k actions   ↵ Go Back                                     powered by termcast.app
+
+    "
+  `)
+
+  // Full-page detail has larger chart and markdown content
+  expect(text).toContain('Bitcoin')
+  expect(text).toContain('candle-only')
+}, 30000)
+
+test('candle + line overlay (mixed components)', async () => {
+  await session.text({ waitFor: (t) => t.includes('Mixed Components'), timeout: 10000 })
+  // Navigate past Watchlist (6 items) to Mixed Components section,
+  // then one more item to ETH - Candle + Line.
+  for (let i = 0; i < 7; i++) {
+    session.sendKey('down')
+  }
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›ETH - Candle + Line') && t.includes('closing line'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Crypto Markets ───────────────────────────────────────────────────────────────────────────────
+
+       > Search markets...
+
+       Watchlist                                      │ $2,220│                            │
+       BTC Bitcoin                                    │       │       │                   ▌▌▖▖
+       ETH Ethereum                                   │ $2,073│       ▖▖▖ │         ▖▖   ▖▌▘▘▌▖▖▖
+       SOL Solana                                     │       │      │▌│▘▌▌▌    ▖▖  ▌▘▌││▌│  │││▌
+       XRP XRP                                        │       │     │▌▘  │ ▌▖  ▖▌▘▌▖▌ ▌▌▘▘      ▌▌▘▘
+       DOGE Dogecoin                                  │ $1,927│▖▖   ▖▌     │▘▌▖▌  │││  │
+       BNB BNB                                        │       │▘▘▌▖▌▘│       ▘▘
+                                                      │ $1,780│  ▘▘
+       Mixed Components                               │        12d        8d          4d         Now
+       BTC - Candles Real BTC/USD hourly candles      │
+      ›ETH - Candle + Line Candles plus closing line  │ $2,197│                           ⢠⣆⣠⡀
+       SOL - Candle + Volume Candles plus volume spli │       │       ⣴⣤⣤ ⣀         ⢠⣀   ⢠⣿⣿⣿⣷⣶⣦⡀
+       BTC vs ETH Side-by-side crypto leaders         │ $1,997│      ⢰⣿⣿⣿⣿⣿⣇   ⣠⣷⣴⣄⣀⢸⣿⣶⣠⣤⣼⣿⣿⣿⣿⣿⣿⣧⣤⣤⣤
+       DOGE - Candle + Line Low-priced asset formatti │       │⣶⡄   ⣦⣾⣿⣿⣿⣿⣿⣿⣶⣶⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+                                                      │ $1,797│⣿⣿⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+                                                      │        12d        8d          4d         Now
+                                                      │
+                                                      │ ────────────────────────────────────────────
+                                                      │
+                                                      │ Price:  $1,971
+                                                      │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │ Change: -0.3%
+
+    "
+  `)
+
+  expect(text).toContain('Candle + Line')
+}, 30000)
+
+test('candle + volume bar chart (mixed components)', async () => {
+  await session.text({ waitFor: (t) => t.includes('Mixed Components'), timeout: 10000 })
+  // Navigate to "Candle + Volume" item (8 downs from top)
+  for (let i = 0; i < 8; i++) {
+    session.sendKey('down')
+  }
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›SOL - Candle + Volume') && t.includes('half'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Crypto Markets ───────────────────────────────────────────────────────────────────────────────
+
+       > Search markets...
+
+       Watchlist                                      │ $95.03│                           ││
+       BTC Bitcoin                                    │       │       │             │     ▖▖▖▖
+       ETH Ethereum                                   │ $88.26│       ▌▌▖ ││    │   ▖▖   ▌▘▘▘▌▌▌│
+       SOL Solana                                     │       │      ▖▌│▘▌▌▌   │▌▌▖▖▌▘▌▖▌▘     ▘▌│││
+       XRP XRP                                        │       │     │▌   │ ▌▖│ ▌▘▘▘▌▌ ▘▘││      ▘▘▘▌
+       DOGE Dogecoin                                  │ $81.48│▖▖   ▌▘     │▘▌▌▘  │
+       BNB BNB                                        │       │▘▘▌▖▌▘        ▘▘
+                                                      │ $74.71│  ▘▘│
+       Mixed Components                               │        12d        8d          4d         Now
+       BTC - Candles Real BTC/USD hourly candles      │
+       ETH - Candle + Line Candles plus closing line  │   ┌Second half: 95.3%┐
+      ›SOL - Candle + Volume Candles plus volume spli │
+       BTC vs ETH Side-by-side crypto leaders         │
+       DOGE - Candle + Line Low-priced asset formatti │ ────────────────────────────────────────────
+                                                      │
+                                                      │ Price:  $83.31
+                                                      │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │ Change: -0.4%
+
+
+
+
+
+    "
+  `)
+
+  expect(text).toContain('Candle + Volume')
+}, 30000)
+
+test('side-by-side candle charts in Row', async () => {
+  await session.text({ waitFor: (t) => t.includes('Mixed Components'), timeout: 10000 })
+  // Navigate to "BTC vs ETH" item (9 downs from top)
+  for (let i = 0; i < 9; i++) {
+    session.sendKey('down')
+  }
+
+  const text = await session.text({
+    waitFor: (t) => t.includes('›BTC vs ETH'),
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       Crypto Markets ───────────────────────────────────────────────────────────────────────────────
+
+       > Search markets...
+
+       Watchlist                                      │ $74,678│          ││   $2,220│          │
+       BTC Bitcoin                                    │        │          ▌▌         │  │       ││
+       ETH Ethereum                                   │        │  │     │ ▌▘▌        │  ▖▖│   │ ▌▌▖
+       SOL Solana                                     │        │  ▖▖    ││▌ ▌│       │  ▌▘▌ ││││▌│▌
+       XRP XRP                                        │ $68,318│  ▌▘▌ ││▌▘▘ ▘▘ $2,000│  ▌│▌ ▌▌▌▌▌ ▘▘
+       DOGE Dogecoin                                  │        │▖ ▌│▌▖▌▘▘│           ││ ▌ ▘▌▌│││
+       BNB BNB                                        │        │▌▌▘  ▘▘              │▌▖▌  ││
+                                                      │ $61,957│ │   │         $1,780│││
+       Mixed Components                               │         30d        Now        30d        Now
+       BTC - Candles Real BTC/USD hourly candles      │
+       ETH - Candle + Line Candles plus closing line  │ ────────────────────────────────────────────
+       SOL - Candle + Volume Candles plus volume spli │
+      ›BTC vs ETH Side-by-side crypto leaders         │ Price:  $67,641
+       DOGE - Candle + Line Low-priced asset formatti │
+                                                      │ Change: -0.2%
+                                                      │
+                                                      │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
+
+
+
+
+
+    "
+  `)
+
+  expect(text).toContain('BTC vs ETH')
+  expect(text).toContain('Side-by-side')
+}, 30000)

package/src/examples/simple-detail-markdown.vitest.tsx

@@ -34,21 +34,20 @@ test('detail renders markdown with headings, lists, links, tables, code and diag
 
                                                                                  █
                                                                                  █
-      Architecture Overview                                                      ▀
+      Architecture Overview                                                      █
 
-      This document describes the system architecture.
 
+      This document describes the system architecture.
       Components
 
-      The system has three main components:
 
+      The system has three main components:
       - Client - handles user interaction
       - Server - processes requests
       - Database - stores data
-
-
       Links
 
+
       Check out the GitHub repository for the source code.
 
       See the API documentation for more details.
@@ -59,6 +58,7 @@ test('detail renders markdown with headings, lists, links, tables, code and diag
 
       Configuration Table
 
+
       Setting    Default    Description
       Host       localhost  Database host address
       Port       5432       Database port number
@@ -67,12 +67,14 @@ test('detail renders markdown with headings, lists, links, tables, code and diag
 
       Flow Diagram
 
+
       ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
       │   Client    │────▶│   Server    │────▶│  Database   │
       └─────────────┘     └─────────────┘     └─────────────┘
 
       Vertical Flow
 
+
            ┌─────────┐
            │  Start  │
            └────┬────┘
@@ -89,12 +91,10 @@ test('detail renders markdown with headings, lists, links, tables, code and diag
 
       Code Example
 
+
       interface Config {
         host: string
         port: number
-        ssl: boolean
-      }
-
 
 
       esc go back   ^k actions                             powered by termcast.app