@mdxui/terminal 2.0.0

package/src/components/containers/panel.ts

@@ -0,0 +1,59 @@
+/**
+ * @mdxui/terminal/components/containers/panel
+ *
+ * Panel component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI, boxChars } from '../../theme'
+import type { PanelProps, RenderContext } from '../types'
+import { extractChildren } from '../helpers'
+
+export function renderPanel(props: PanelProps, context: RenderContext): string[] {
+  const { children, title, border = 'single', collapsed, padding = 0 } = props
+
+  // If collapsed, show just the title
+  if (collapsed) {
+    return [ANSI.dim + '\u25B6 ' + ANSI.reset + ANSI.bold + (title || 'Panel') + ANSI.reset]
+  }
+
+  const lines: string[] = []
+  const chars = border === 'double' ? boxChars.double :
+                border === 'rounded' ? boxChars.rounded :
+                boxChars.single
+  const panelWidth = context.width
+
+  // Top border with title
+  if (title && border !== 'none') {
+    const titleText = ` ${title} `
+    const remainingWidth = panelWidth - titleText.length - 2
+    const leftBorder = Math.floor(remainingWidth / 2)
+    const rightBorder = remainingWidth - leftBorder
+    lines.push(chars.topLeft + chars.horizontal.repeat(leftBorder) + ANSI.bold + titleText + ANSI.reset + chars.horizontal.repeat(rightBorder) + chars.topRight)
+  } else if (border !== 'none') {
+    lines.push(chars.topLeft + chars.horizontal.repeat(panelWidth - 2) + chars.topRight)
+  }
+
+  // Content
+  const content = extractChildren(children)
+  const contentLines = content.split('\n')
+  const paddingStr = ' '.repeat(padding)
+  for (const line of contentLines) {
+    if (border !== 'none') {
+      lines.push(chars.vertical + paddingStr + line.padEnd(panelWidth - 2 - padding * 2) + paddingStr + chars.vertical)
+    } else {
+      lines.push(paddingStr + line)
+    }
+  }
+
+  // Bottom border
+  if (border !== 'none') {
+    lines.push(chars.bottomLeft + chars.horizontal.repeat(panelWidth - 2) + chars.bottomRight)
+  }
+
+  return lines
+}
+
+export function Panel(props: PanelProps): ReactElement {
+  return React.createElement('panel', props)
+}

package/src/components/feedback/badge.ts

@@ -0,0 +1,40 @@
+/**
+ * @mdxui/terminal/components/feedback/badge
+ *
+ * Badge component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { BadgeProps, RenderContext } from '../types'
+import { extractChildren } from '../helpers'
+
+export function renderBadge(props: BadgeProps, _context: RenderContext): string[] {
+  const { children, variant = 'default' } = props
+  const text = extractChildren(children)
+
+  // Color based on variant
+  let color: string
+  switch (variant) {
+    case 'success':
+      color = '\x1b[32m' // green
+      break
+    case 'warning':
+      color = '\x1b[33m' // yellow
+      break
+    case 'error':
+      color = '\x1b[31m' // red
+      break
+    case 'info':
+      color = '\x1b[34m' // blue
+      break
+    default:
+      color = ANSI.dim
+  }
+
+  return [color + '[' + text + ']' + ANSI.reset]
+}
+
+export function Badge(props: BadgeProps): ReactElement {
+  return React.createElement('badge', props)
+}

package/src/components/feedback/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @mdxui/terminal/components/feedback
+ *
+ * Feedback terminal components.
+ */
+
+export { renderBadge, Badge } from './badge'
+export { renderSpinner, Spinner, spinnerFrames } from './spinner'

package/src/components/feedback/spinner.ts

@@ -0,0 +1,23 @@
+/**
+ * @mdxui/terminal/components/feedback/spinner
+ *
+ * Spinner component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { SpinnerProps, RenderContext } from '../types'
+
+export const spinnerFrames = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F']
+
+export function renderSpinner(props: SpinnerProps, _context: RenderContext): string[] {
+  const { label } = props
+  // For static rendering, show first frame. In real TUI, this would animate.
+  const frame = spinnerFrames[0]
+  const text = label ? `${frame} ${label}` : frame
+  return [ANSI.cyan + text + ANSI.reset]
+}
+
+export function Spinner(props: SpinnerProps): ReactElement {
+  return React.createElement('spinner', props)
+}

package/src/components/helpers.ts

@@ -0,0 +1,81 @@
+/**
+ * @mdxui/terminal/components/helpers
+ *
+ * Helper functions for terminal component rendering.
+ */
+
+import { type ReactNode, isValidElement } from 'react'
+import { ANSI, colors, visibleLength as themeVisibleLength } from '../theme'
+
+// ============================================================================
+// ANSI Color Helpers (using theme module)
+// ============================================================================
+
+/**
+ * Color map combining basic ANSI colors with semantic theme colors.
+ * Re-exports from theme module for backward compatibility.
+ */
+export const colorMap: Record<string, string> = {
+  // Basic colors (from ANSI)
+  black: ANSI.black,
+  red: ANSI.red,
+  green: ANSI.green,
+  yellow: ANSI.yellow,
+  blue: ANSI.blue,
+  magenta: ANSI.magenta,
+  cyan: ANSI.cyan,
+  white: ANSI.white,
+  // Semantic colors (from theme)
+  error: colors.error,
+  success: colors.success,
+  warning: colors.warning,
+  info: colors.info,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  muted: colors.muted,
+}
+
+/**
+ * Background color map using ANSI constants.
+ */
+export const bgColorMap: Record<string, string> = {
+  black: ANSI.bgBlack,
+  red: ANSI.bgRed,
+  green: ANSI.bgGreen,
+  yellow: ANSI.bgYellow,
+  blue: ANSI.bgBlue,
+  magenta: ANSI.bgMagenta,
+  cyan: ANSI.bgCyan,
+  white: ANSI.bgWhite,
+}
+
+export function getColorCode(color: string): string {
+  return colorMap[color] || ANSI.white
+}
+
+export function getBgColorCode(color: string): string {
+  return bgColorMap[color] || ''
+}
+
+// ============================================================================
+// Content Extraction Helpers
+// ============================================================================
+
+export function extractChildren(children: ReactNode): string {
+  if (typeof children === 'string') return children
+  if (typeof children === 'number') return String(children)
+  if (Array.isArray(children)) {
+    return children.map(extractChildren).join('')
+  }
+  if (isValidElement(children)) {
+    const props = children.props as Record<string, unknown>
+    return extractChildren(props.children as ReactNode)
+  }
+  return ''
+}
+
+/**
+ * Calculate visible length of text (excluding ANSI codes).
+ * Re-exported from theme module for backward compatibility.
+ */
+export const visibleLength = themeVisibleLength

package/src/components/index.ts

@@ -0,0 +1,153 @@
+/**
+ * @mdxui/terminal/components
+ *
+ * MDXUI primitives mapped to OpenTUI components.
+ * These maintain the same props API as @mdxui/primitives.
+ */
+
+// ============================================================================
+// Types and Type Guards
+// ============================================================================
+
+export type {
+  // Render context
+  RenderContext,
+  TerminalComponentType,
+  // Primitive component props
+  BoxProps,
+  TextProps,
+  InputProps,
+  SelectOption,
+  SelectProps,
+  ButtonProps,
+  // Container component props
+  PanelProps,
+  CardProps,
+  DialogProps,
+  // Layout component props
+  TerminalSidebarLayoutProps,
+  SidebarItemProps,
+  BreadcrumbProps,
+  ListProps,
+  TableColumn,
+  TableProps,
+  // Feedback component props
+  BadgeProps,
+  SpinnerProps,
+  // mdxui common types
+  NavItem,
+  ActionConfig,
+  ActionProp,
+  ActionsProps,
+  FooterLinkGroup,
+  SocialLink,
+  FeatureItem,
+  PricingTier,
+  FAQItem,
+  DashboardMetric,
+  SettingsSection,
+  AppHeaderUser,
+  BreadcrumbItem,
+  // Site component props (mdxui SiteComponents interface)
+  SiteProps,
+  HeaderProps,
+  FooterProps,
+  HeroProps,
+  FeaturesProps,
+  PricingProps,
+  FAQProps,
+  LandingPageProps,
+  PageProps,
+  // App component props (mdxui AppComponents interface)
+  AppProps,
+  ShellProps,
+  SidebarProps,
+  AppHeaderProps,
+  DashboardProps,
+  SettingsProps,
+} from './types'
+
+export {
+  COMPONENT_TYPES,
+  isTerminalComponentType,
+  isPropsObject,
+  isBoxProps,
+  isTextProps,
+  isTableProps,
+  isInputProps,
+  isSelectProps,
+  isSidebarProps,
+  isSidebarItemProps,
+  isBreadcrumbProps,
+  isBadgeProps,
+  isDialogProps,
+  isSpinnerProps,
+  isButtonProps,
+  isPanelProps,
+  isListProps,
+  isCardProps,
+} from './types'
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+export {
+  colorMap,
+  bgColorMap,
+  getColorCode,
+  getBgColorCode,
+  extractChildren,
+} from './helpers'
+
+// ============================================================================
+// Render Functions
+// ============================================================================
+
+export { renderComponent, renderElement } from './render'
+
+// ============================================================================
+// Primitive Components
+// ============================================================================
+
+export { renderBox, Box } from './primitives/box'
+export { renderText, Text } from './primitives/text'
+export { renderInput, Input } from './primitives/input'
+export { renderSelect, Select } from './primitives/select'
+export { renderButton, Button } from './primitives/button'
+
+// ============================================================================
+// Container Components
+// ============================================================================
+
+export { renderPanel, Panel } from './containers/panel'
+export { renderCard, Card } from './containers/card'
+export { renderDialog, Dialog } from './containers/dialog'
+
+// ============================================================================
+// Layout Components
+// ============================================================================
+
+export { renderSidebar, renderSidebarItem, SidebarLayout, SidebarItem } from './layout/sidebar'
+export { renderBreadcrumb, Breadcrumb } from './layout/breadcrumb'
+export { renderList, List } from './layout/list'
+export { renderTable, Table } from './layout/table'
+
+// ============================================================================
+// Feedback Components
+// ============================================================================
+
+export { renderBadge, Badge } from './feedback/badge'
+export { renderSpinner, Spinner, spinnerFrames } from './feedback/spinner'
+
+// ============================================================================
+// Site Template Components (mdxui SiteComponents interface)
+// ============================================================================
+
+export { Site, Header, Footer, Hero, Features, Pricing, FAQ, LandingPage, Page } from './templates/site'
+
+// ============================================================================
+// App Template Components (mdxui AppComponents interface)
+// ============================================================================
+
+export { App, Shell, Sidebar, AppHeader, Dashboard, Settings } from './templates/app'

package/src/components/layout/breadcrumb.ts

@@ -0,0 +1,31 @@
+/**
+ * @mdxui/terminal/components/layout/breadcrumb
+ *
+ * Breadcrumb component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { BreadcrumbProps, RenderContext } from '../types'
+
+export function renderBreadcrumb(props: BreadcrumbProps, _context: RenderContext): string[] {
+  const { items, separator = '/' } = props
+
+  const parts: string[] = []
+  items.forEach((item, idx) => {
+    const isLast = idx === items.length - 1
+    if (isLast) {
+      // Current item - bold
+      parts.push(ANSI.bold + item.label + ANSI.reset)
+    } else {
+      // Previous items - dim
+      parts.push(ANSI.dim + item.label + ANSI.reset)
+    }
+  })
+
+  return [parts.join(` ${separator} `)]
+}
+
+export function Breadcrumb(props: BreadcrumbProps): ReactElement {
+  return React.createElement('breadcrumb', props)
+}

package/src/components/layout/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @mdxui/terminal/components/layout
+ *
+ * Layout terminal components.
+ */
+
+export { renderSidebar, renderSidebarItem, SidebarLayout, SidebarItem } from './sidebar'
+export { renderBreadcrumb, Breadcrumb } from './breadcrumb'
+export { renderList, List } from './list'
+export { renderTable, Table } from './table'

package/src/components/layout/list.ts

@@ -0,0 +1,29 @@
+/**
+ * @mdxui/terminal/components/layout/list
+ *
+ * List component for terminal rendering.
+ */
+
+import React, { type ReactElement, type ReactNode } from 'react'
+import { ANSI } from '../../theme'
+import type { ListProps, RenderContext } from '../types'
+import { extractChildren } from '../helpers'
+
+export function renderList(props: ListProps, _context: RenderContext): string[] {
+  const { items, selectedIndex, bullet = '\u2022', numbered = false } = props
+
+  return items.map((item, idx) => {
+    const text = typeof item === 'string' ? item : extractChildren(item as ReactNode)
+    const prefix = numbered ? `${idx + 1}. ` : `${bullet} `
+    const isSelected = selectedIndex === idx
+
+    if (isSelected) {
+      return ANSI.cyan + '\x1b[44m' + prefix + text + ANSI.reset
+    }
+    return prefix + text
+  })
+}
+
+export function List(props: ListProps): ReactElement {
+  return React.createElement('list', props)
+}

package/src/components/layout/sidebar.ts

@@ -0,0 +1,79 @@
+/**
+ * @mdxui/terminal/components/layout/sidebar
+ *
+ * Internal sidebar layout components for terminal rendering.
+ * These are primitive layout components, distinct from mdxui Sidebar.
+ */
+
+import React, { type ReactElement, Children, isValidElement } from 'react'
+import { ANSI } from '../../theme'
+import type { TerminalSidebarLayoutProps, SidebarItemProps, RenderContext } from '../types'
+
+export function renderSidebarItem(props: SidebarItemProps & { _collapsed?: boolean }, _context: RenderContext): string[] {
+  const { label, icon, active, _collapsed } = props
+
+  if (_collapsed) {
+    // Only show icon
+    return [icon || '']
+  }
+
+  let line = ''
+
+  // Add active indicator
+  if (active) {
+    line = '\u25B6 '
+  }
+
+  // Add icon
+  if (icon) {
+    line += icon + ' '
+  }
+
+  // Add label
+  line += label
+
+  // Apply active styling
+  if (active) {
+    line = '\x1b[44m' + line + ANSI.reset
+  }
+
+  return [line]
+}
+
+export function renderSidebar(props: TerminalSidebarLayoutProps, context: RenderContext): string[] {
+  const { children, width = 20, collapsed } = props
+  const lines: string[] = []
+
+  // Render children (SidebarItems)
+  const childArray = Children.toArray(children)
+  for (const child of childArray) {
+    if (isValidElement(child)) {
+      const childProps = child.props as SidebarItemProps
+      // Pass collapsed state to child
+      const modifiedProps = { ...childProps, _collapsed: collapsed }
+      const childLines = renderSidebarItem(modifiedProps as SidebarItemProps & { _collapsed?: boolean }, { ...context, width })
+      lines.push(...childLines)
+    }
+  }
+
+  // Ensure width constraint
+  return lines.map(line => {
+    const stripped = line.replace(/\x1b\[[\d;]*m/g, '')
+    if (stripped.length > width) {
+      return line.slice(0, width)
+    }
+    return line
+  })
+}
+
+/**
+ * SidebarLayout - primitive sidebar layout component for terminal rendering.
+ * Use mdxui Sidebar (from templates/app) for mdxui-compatible interface.
+ */
+export function SidebarLayout(props: TerminalSidebarLayoutProps): ReactElement {
+  return React.createElement('sidebar', props)
+}
+
+export function SidebarItem(props: SidebarItemProps): ReactElement {
+  return React.createElement('sidebar-item', props)
+}

package/src/components/layout/table.ts

@@ -0,0 +1,62 @@
+/**
+ * @mdxui/terminal/components/layout/table
+ *
+ * Table component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { TableProps, RenderContext } from '../types'
+
+export function renderTable<T>(props: TableProps<T>, _context: RenderContext): string[] {
+  const { data, columns, selectedIndex } = props
+  const lines: string[] = []
+
+  // Calculate column widths
+  const colWidths = columns.map((col) => {
+    if (col.width) return col.width
+    let maxWidth = col.header.length
+    for (const row of data) {
+      const value = String((row as Record<string, unknown>)[col.key as string] ?? '')
+      maxWidth = Math.max(maxWidth, value.length)
+    }
+    return maxWidth + 2 // padding
+  })
+
+  // Render header
+  const headerParts = columns.map((col, idx) => {
+    const width = colWidths[idx]
+    return col.header.padEnd(width)
+  })
+  lines.push('\u2502' + headerParts.join('\u2502') + '\u2502')
+
+  // Header separator
+  const separatorParts = colWidths.map(w => '\u2500'.repeat(w))
+  lines.push('\u251C' + separatorParts.join('\u253C') + '\u2524')
+
+  // Render rows
+  data.forEach((row, rowIndex) => {
+    const rowParts = columns.map((col, idx) => {
+      const value = String((row as Record<string, unknown>)[col.key as string] ?? '')
+      const width = colWidths[idx]
+      if (col.align === 'right') {
+        return value.padStart(width)
+      }
+      return value.padEnd(width)
+    })
+    let rowLine = '\u2502' + rowParts.join('\u2502') + '\u2502'
+
+    // Highlight selected row
+    if (selectedIndex === rowIndex) {
+      rowLine = '\x1b[44m' + rowLine + ANSI.reset
+    }
+
+    lines.push(rowLine)
+  })
+
+  return lines
+}
+
+export function Table<T>(props: TableProps<T>): ReactElement {
+  return React.createElement('table', props as unknown as Record<string, unknown>)
+}

package/src/components/primitives/box.ts

@@ -0,0 +1,95 @@
+/**
+ * @mdxui/terminal/components/primitives/box
+ *
+ * Box component for terminal rendering.
+ */
+
+import React, { type ReactElement, isValidElement } from 'react'
+import { ANSI, boxChars } from '../../theme'
+import type { BoxProps, RenderContext } from '../types'
+import { extractChildren, getBgColorCode } from '../helpers'
+
+// Forward declaration for circular dependency
+let renderElementFn: ((element: ReactElement, context: RenderContext) => string[]) | null = null
+
+export function setRenderElement(fn: (element: ReactElement, context: RenderContext) => string[]): void {
+  renderElementFn = fn
+}
+
+export function renderBox(props: BoxProps, context: RenderContext): string[] {
+  const { children, border = 'none', padding = 0, width, height, bg } = props
+  const boxWidth = typeof width === 'number' ? width : context.width
+  const boxHeight = typeof height === 'number' ? height : undefined
+
+  // Get child content
+  let childLines: string[] = []
+  if (children) {
+    if (isValidElement(children) && renderElementFn) {
+      childLines = renderElementFn(children, { ...context, width: boxWidth - (border !== 'none' ? 2 : 0) - padding * 2, parentWidth: boxWidth })
+    } else {
+      const text = extractChildren(children)
+      if (text) childLines = [text]
+    }
+  }
+
+  // Apply padding to content
+  if (padding > 0) {
+    childLines = childLines.map(line => ' '.repeat(padding) + line + ' '.repeat(padding))
+  }
+
+  // Calculate content width
+  const contentWidth = border !== 'none' ? boxWidth - 2 : boxWidth
+
+  // If no border
+  if (border === 'none') {
+    let result = childLines.length > 0 ? childLines : ['']
+    // Handle height
+    if (boxHeight) {
+      while (result.length < boxHeight) {
+        result.push('')
+      }
+      result = result.slice(0, boxHeight)
+    }
+    // Apply background color
+    if (bg) {
+      const bgCode = getBgColorCode(bg)
+      result = result.map(line => bgCode + line.padEnd(boxWidth) + ANSI.reset)
+    }
+    return result
+  }
+
+  // Get box characters
+  const chars = boxChars[border] || boxChars.single
+
+  // Build box with border
+  const lines: string[] = []
+
+  // Top border
+  lines.push(chars.topLeft + chars.horizontal.repeat(contentWidth) + chars.topRight)
+
+  // Content lines
+  const targetHeight = boxHeight ? boxHeight - 2 : childLines.length
+
+  for (let i = 0; i < targetHeight; i++) {
+    const content = i < childLines.length ? childLines[i] : ''
+    // Strip ANSI for length calculation
+    const stripped = content.replace(/\x1b\[[\d;]*m/g, '')
+    const paddedContent = content + ' '.repeat(Math.max(0, contentWidth - stripped.length))
+    lines.push(chars.vertical + paddedContent + chars.vertical)
+  }
+
+  // Bottom border
+  lines.push(chars.bottomLeft + chars.horizontal.repeat(contentWidth) + chars.bottomRight)
+
+  // Apply background color
+  if (bg) {
+    const bgCode = getBgColorCode(bg)
+    return lines.map(line => bgCode + line + ANSI.reset)
+  }
+
+  return lines
+}
+
+export function Box(props: BoxProps): ReactElement {
+  return React.createElement('box', props)
+}