@mdxui/terminal 2.0.0

package/src/components/primitives/button.ts

@@ -0,0 +1,54 @@
+/**
+ * @mdxui/terminal/components/primitives/button
+ *
+ * Button component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { ButtonProps, RenderContext } from '../types'
+import { extractChildren } from '../helpers'
+
+export function renderButton(props: ButtonProps, _context: RenderContext): string[] {
+  const { children, hotkey, disabled, focused, variant = 'primary' } = props
+  const text = extractChildren(children)
+
+  let style = ''
+  let bgColor = ''
+
+  // Apply variant styling
+  switch (variant) {
+    case 'primary':
+      bgColor = '\x1b[44m' // blue bg
+      style = ANSI.bold
+      break
+    case 'secondary':
+      bgColor = '\x1b[100m' // gray bg
+      break
+    case 'destructive':
+      bgColor = '\x1b[41m' // red bg
+      style = ANSI.bold
+      break
+  }
+
+  // Build button text
+  let buttonText = ` ${text} `
+  if (hotkey) {
+    buttonText += `[${hotkey}]`
+  }
+
+  // Apply styling
+  if (disabled) {
+    return [ANSI.dim + `[ ${text} ]` + ANSI.reset]
+  }
+
+  if (focused) {
+    return [bgColor + style + '\x1b[37m' + buttonText + ANSI.reset]
+  }
+
+  return [bgColor + style + buttonText + ANSI.reset]
+}
+
+export function Button(props: ButtonProps): ReactElement {
+  return React.createElement('button', props)
+}

package/src/components/primitives/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @mdxui/terminal/components/primitives
+ *
+ * Primitive terminal components.
+ */
+
+export { renderBox, Box, setRenderElement } from './box'
+export { renderText, Text } from './text'
+export { renderInput, Input } from './input'
+export { renderSelect, Select } from './select'
+export { renderButton, Button } from './button'

package/src/components/primitives/input.ts

@@ -0,0 +1,88 @@
+/**
+ * @mdxui/terminal/components/primitives/input
+ *
+ * Input component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { InputProps, RenderContext } from '../types'
+import { visibleLength } from '../helpers'
+
+export function renderInput(props: InputProps, context: RenderContext): string[] {
+  const {
+    value = '',
+    placeholder = '',
+    label,
+    disabled,
+    focused = false,
+    type,
+    cursorPosition,
+    width,
+  } = props
+  const lines: string[] = []
+
+  // Render label
+  if (label) {
+    lines.push(label)
+  }
+
+  // Determine display value (mask for password, show placeholder when empty)
+  let displayValue: string
+  if (type === 'password' && value) {
+    displayValue = '*'.repeat(value.length)
+  } else if (value) {
+    displayValue = value
+  } else {
+    displayValue = ''
+  }
+
+  // Calculate input field width
+  const inputWidth = width || context.width || 20
+
+  // Calculate effective cursor position
+  const effectiveCursorPosition = cursorPosition !== undefined
+    ? Math.min(cursorPosition, displayValue.length)
+    : displayValue.length
+
+  // Build the rendered string
+  let rendered: string
+
+  if (disabled) {
+    // Disabled state: dim text, no cursor
+    const content = displayValue || placeholder
+    rendered = ANSI.dim + content + ANSI.reset
+  } else if (focused) {
+    if (displayValue.length === 0) {
+      // Empty value when focused: show cursor at start
+      rendered = ANSI.inverse + ' ' + ANSI.reset
+    } else {
+      // Show cursor at position using inverse video
+      const before = displayValue.slice(0, effectiveCursorPosition)
+      const cursorChar = displayValue[effectiveCursorPosition] || ' '
+      const after = displayValue.slice(effectiveCursorPosition + 1)
+      rendered = ANSI.underline + before + ANSI.reset + ANSI.inverse + cursorChar + ANSI.reset + ANSI.underline + after + ANSI.reset
+    }
+  } else {
+    // Unfocused state
+    if (displayValue.length === 0 && placeholder) {
+      // Show placeholder when empty and unfocused
+      rendered = ANSI.dim + placeholder + ANSI.reset
+    } else {
+      rendered = displayValue
+    }
+  }
+
+  // Pad to width (accounting for ANSI codes)
+  const visible = visibleLength(rendered)
+  const padding = ' '.repeat(Math.max(0, inputWidth - visible))
+  rendered = rendered + padding
+
+  lines.push(rendered)
+
+  return lines
+}
+
+export function Input(props: InputProps): ReactElement {
+  return React.createElement('input', props)
+}

package/src/components/primitives/select.ts

@@ -0,0 +1,97 @@
+/**
+ * @mdxui/terminal/components/primitives/select
+ *
+ * Select component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { SelectProps, RenderContext } from '../types'
+
+export function renderSelect<T>(props: SelectProps<T>, _context: RenderContext): string[] {
+  const {
+    options,
+    value,
+    label,
+    focused = false,
+    highlightedIndex = 0,
+    maxVisible = 5,
+  } = props
+  const lines: string[] = []
+
+  // Render label
+  if (label) {
+    lines.push(label)
+  }
+
+  // Find current selection
+  const selectedIndex = options.findIndex(opt => opt.value === value)
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : null
+
+  if (focused) {
+    // Calculate visible range based on highlighted index
+    let startIdx = 0
+    let endIdx = options.length
+
+    if (options.length > maxVisible) {
+      // Center the highlighted option when possible
+      const halfVisible = Math.floor(maxVisible / 2)
+      startIdx = Math.max(0, highlightedIndex - halfVisible)
+      endIdx = Math.min(options.length, startIdx + maxVisible)
+
+      // Adjust start if we're near the end
+      if (endIdx - startIdx < maxVisible) {
+        startIdx = Math.max(0, endIdx - maxVisible)
+      }
+    }
+
+    // Show scroll indicator at top if needed
+    if (startIdx > 0) {
+      lines.push(ANSI.dim + '  \u25B2 more' + ANSI.reset)
+    }
+
+    // Render visible options
+    for (let idx = startIdx; idx < endIdx; idx++) {
+      const opt = options[idx]
+      const isSelected = opt.value === value
+      const isHighlighted = idx === highlightedIndex
+
+      // Prefix: selection marker (filled for selected, empty for unselected)
+      const prefix = isSelected ? '\u25CF ' : '\u25CB '
+
+      let line: string
+
+      if (opt.disabled) {
+        // Disabled option: dim with strikethrough indicator
+        line = ANSI.dim + prefix + opt.label + ANSI.reset
+      } else if (isHighlighted) {
+        // Highlighted option: inverse video (highest priority)
+        line = ANSI.inverse + prefix + opt.label + ANSI.reset
+      } else if (isSelected) {
+        // Selected but not highlighted: bold
+        line = ANSI.bold + prefix + opt.label + ANSI.reset
+      } else {
+        // Normal option: dim
+        line = ANSI.dim + prefix + opt.label + ANSI.reset
+      }
+
+      lines.push(line)
+    }
+
+    // Show scroll indicator at bottom if needed
+    if (endIdx < options.length) {
+      lines.push(ANSI.dim + '  \u25BC more' + ANSI.reset)
+    }
+  } else {
+    // Unfocused: show only selected value with dropdown indicator
+    const selectedLabel = selected ? selected.label : ''
+    const prefix = selected ? '\u25CF ' : '\u25CB '
+    lines.push(prefix + selectedLabel + ' \u25BC')
+  }
+
+  return lines
+}
+
+export function Select<T>(props: SelectProps<T>): ReactElement {
+  return React.createElement('select', props as unknown as Record<string, unknown>)
+}

package/src/components/primitives/text.ts

@@ -0,0 +1,60 @@
+/**
+ * @mdxui/terminal/components/primitives/text
+ *
+ * Text component for terminal rendering.
+ */
+
+import React, { type ReactElement } from 'react'
+import { ANSI } from '../../theme'
+import type { TextProps, RenderContext } from '../types'
+import { extractChildren, getColorCode, getBgColorCode } from '../helpers'
+
+export function renderText(props: TextProps, context: RenderContext): string[] {
+  const { children, bold, italic, underline, dim, color, backgroundColor, wrap } = props
+
+  let text = extractChildren(children)
+
+  // Build style codes
+  const codes: string[] = []
+  if (bold) codes.push(ANSI.bold)
+  if (italic) codes.push(ANSI.italic)
+  if (underline) codes.push(ANSI.underline)
+  if (dim) codes.push(ANSI.dim)
+  if (color) codes.push(getColorCode(color))
+  if (backgroundColor) codes.push(getBgColorCode(backgroundColor))
+
+  // Handle wrapping
+  const maxWidth = context.parentWidth || context.width
+  if (wrap === 'truncate' && text.length > maxWidth) {
+    text = text.slice(0, maxWidth - 1) + '\u2026'
+  } else if (wrap === 'wrap' && text.length > maxWidth) {
+    // Word wrap
+    const lines: string[] = []
+    let remaining = text
+    while (remaining.length > 0) {
+      if (remaining.length <= maxWidth) {
+        lines.push(remaining)
+        break
+      }
+      // Find break point
+      let breakPoint = maxWidth
+      const lastSpace = remaining.lastIndexOf(' ', maxWidth)
+      if (lastSpace > 0) breakPoint = lastSpace
+      lines.push(remaining.slice(0, breakPoint))
+      remaining = remaining.slice(breakPoint).trim()
+    }
+    // Apply styling to each line
+    return lines.map(line => codes.join('') + line + ANSI.reset)
+  }
+
+  // Apply styling
+  if (codes.length > 0) {
+    return [codes.join('') + text + ANSI.reset]
+  }
+
+  return [text]
+}
+
+export function Text(props: TextProps): ReactElement {
+  return React.createElement('text', props)
+}

package/src/components/render.ts

@@ -0,0 +1,155 @@
+/**
+ * @mdxui/terminal/components/render
+ *
+ * Core rendering functions for terminal components.
+ */
+
+import { type ReactElement } from 'react'
+import type { RenderContext } from './types'
+import {
+  isTerminalComponentType,
+  isBoxProps,
+  isTextProps,
+  isTableProps,
+  isInputProps,
+  isSelectProps,
+  isSidebarProps,
+  isSidebarItemProps,
+  isBreadcrumbProps,
+  isBadgeProps,
+  isDialogProps,
+  isSpinnerProps,
+  isButtonProps,
+  isPanelProps,
+  isListProps,
+  isCardProps,
+  isPropsObject,
+} from './types'
+import { extractChildren } from './helpers'
+import { renderBox, setRenderElement } from './primitives/box'
+import { renderText } from './primitives/text'
+import { renderInput } from './primitives/input'
+import { renderSelect } from './primitives/select'
+import { renderButton } from './primitives/button'
+import { renderPanel } from './containers/panel'
+import { renderCard } from './containers/card'
+import { renderDialog } from './containers/dialog'
+import { renderSidebar, renderSidebarItem } from './layout/sidebar'
+import { renderBreadcrumb } from './layout/breadcrumb'
+import { renderList } from './layout/list'
+import { renderTable } from './layout/table'
+import { renderBadge } from './feedback/badge'
+import { renderSpinner } from './feedback/spinner'
+
+export function renderElement(element: ReactElement, context: RenderContext): string[] {
+  const props = element.props
+  const type = element.type
+
+  // Handle function components
+  if (typeof type === 'function') {
+    const result = (type as (props: unknown) => ReactElement)(props)
+    return renderElement(result, context)
+  }
+
+  // Handle terminal component types with proper type guards
+  if (isTerminalComponentType(type)) {
+    switch (type) {
+      case 'box':
+        if (isBoxProps(props)) {
+          return renderBox(props, context)
+        }
+        break
+      case 'text':
+        if (isTextProps(props)) {
+          return renderText(props, context)
+        }
+        break
+      case 'table':
+        if (isTableProps(props)) {
+          return renderTable(props, context)
+        }
+        break
+      case 'input':
+        if (isInputProps(props)) {
+          return renderInput(props, context)
+        }
+        break
+      case 'select':
+        if (isSelectProps(props)) {
+          return renderSelect(props, context)
+        }
+        break
+      case 'sidebar':
+        if (isSidebarProps(props)) {
+          return renderSidebar(props, context)
+        }
+        break
+      case 'sidebar-item':
+        if (isSidebarItemProps(props)) {
+          return renderSidebarItem(props, context)
+        }
+        break
+      case 'breadcrumb':
+        if (isBreadcrumbProps(props)) {
+          return renderBreadcrumb(props, context)
+        }
+        break
+      case 'badge':
+        if (isBadgeProps(props)) {
+          return renderBadge(props, context)
+        }
+        break
+      case 'dialog':
+        if (isDialogProps(props)) {
+          return renderDialog(props, context)
+        }
+        break
+      case 'spinner':
+        if (isSpinnerProps(props)) {
+          return renderSpinner(props, context)
+        }
+        break
+      case 'button':
+        if (isButtonProps(props)) {
+          return renderButton(props, context)
+        }
+        break
+      case 'panel':
+        if (isPanelProps(props)) {
+          return renderPanel(props, context)
+        }
+        break
+      case 'list':
+        if (isListProps(props)) {
+          return renderList(props, context)
+        }
+        break
+      case 'card':
+        if (isCardProps(props)) {
+          return renderCard(props, context)
+        }
+        break
+    }
+  }
+
+  // Generic element rendering for unknown types or failed type guards
+  if (isPropsObject(props)) {
+    const childText = extractChildren(props.children as import('react').ReactNode)
+    return childText ? [childText] : []
+  }
+
+  return []
+}
+
+// Initialize circular dependency for box component
+setRenderElement(renderElement)
+
+/**
+ * Render a React element to terminal output strings
+ */
+export function renderComponent(element: ReactElement): string[] {
+  const context: RenderContext = { width: 80 }
+  return renderElement(element, context)
+}
+
+export type { RenderContext }

package/src/components/templates/app.ts

@@ -0,0 +1,43 @@
+/**
+ * @mdxui/terminal/components/templates/app
+ *
+ * App template components (mdxui AppComponents interface).
+ */
+
+import React, { type ReactElement } from 'react'
+import type {
+  AppProps,
+  ShellProps,
+  SidebarProps,
+  AppHeaderProps,
+  DashboardProps,
+  SettingsProps,
+} from '../types'
+
+export function App(props: AppProps): ReactElement {
+  return React.createElement('app', props)
+}
+
+export function Shell(props: ShellProps): ReactElement {
+  return React.createElement('shell', props)
+}
+
+export function Sidebar(props: SidebarProps): ReactElement {
+  return React.createElement('sidebar', props)
+}
+
+/**
+ * AppHeader component for the top header bar.
+ * Note: The test imports this as Header but it uses AppHeaderProps.
+ */
+export function AppHeader(props: AppHeaderProps): ReactElement {
+  return React.createElement('app-header', props)
+}
+
+export function Dashboard(props: DashboardProps): ReactElement {
+  return React.createElement('dashboard', props)
+}
+
+export function Settings(props: SettingsProps): ReactElement {
+  return React.createElement('settings', props)
+}

package/src/components/templates/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @mdxui/terminal/components/templates
+ *
+ * Template components for mdxui Site and App interfaces.
+ */
+
+export { Site, Header, Footer, Hero, Features, Pricing, FAQ, LandingPage, Page } from './site'
+export { App, Shell, Sidebar, AppHeader, Dashboard, Settings } from './app'

package/src/components/templates/site.ts

@@ -0,0 +1,54 @@
+/**
+ * @mdxui/terminal/components/templates/site
+ *
+ * Site template components (mdxui SiteComponents interface).
+ */
+
+import React, { type ReactElement } from 'react'
+import type {
+  SiteProps,
+  HeaderProps,
+  FooterProps,
+  HeroProps,
+  FeaturesProps,
+  PricingProps,
+  FAQProps,
+  LandingPageProps,
+  PageProps,
+} from '../types'
+
+export function Site(props: SiteProps): ReactElement {
+  return React.createElement('site', props)
+}
+
+export function Header(props: HeaderProps): ReactElement {
+  return React.createElement('header', props)
+}
+
+export function Footer(props: FooterProps): ReactElement {
+  return React.createElement('footer', props)
+}
+
+export function Hero(props: HeroProps): ReactElement {
+  return React.createElement('hero', props)
+}
+
+export function Features(props: FeaturesProps): ReactElement {
+  return React.createElement('features', props)
+}
+
+export function Pricing(props: PricingProps): ReactElement {
+  return React.createElement('pricing', props)
+}
+
+export function FAQ(props: FAQProps): ReactElement {
+  return React.createElement('faq', props)
+}
+
+export function LandingPage(props: LandingPageProps): ReactElement {
+  return React.createElement('landing-page', props)
+}
+
+export function Page(props: PageProps): ReactElement {
+  return React.createElement('page', props)
+}