@mdxui/terminal 2.0.0

package/src/theme/strip-ansi.ts

@@ -0,0 +1,50 @@
+/**
+ * ANSI Stripping Utilities
+ *
+ * Functions for removing ANSI escape codes from text and
+ * calculating visible text length.
+ *
+ * @module
+ */
+
+/**
+ * Strips all ANSI escape codes from text.
+ *
+ * Useful for getting the visible content of styled text or
+ * calculating accurate string lengths.
+ *
+ * @param text - Text potentially containing ANSI escape codes
+ * @returns Plain text with all ANSI codes removed, or empty string for null/undefined
+ *
+ * @example
+ * ```tsx
+ * const styled = bold(fg('cyan', 'Hello'))
+ * const plain = stripAnsi(styled) // 'Hello'
+ * ```
+ */
+export function stripAnsi(text: string): string {
+  if (!text || typeof text !== 'string') {
+    return ''
+  }
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\[[0-9;]*m/g, '')
+}
+
+/**
+ * Calculates the visible length of text (excluding ANSI codes).
+ *
+ * Essential for terminal UI layout calculations where you need
+ * to know how many characters will actually be displayed.
+ *
+ * @param text - Text potentially containing ANSI escape codes
+ * @returns Number of visible characters
+ *
+ * @example
+ * ```tsx
+ * const styled = bold(fg('cyan', 'Hello'))
+ * const len = visibleLength(styled) // 5
+ * ```
+ */
+export function visibleLength(text: string): number {
+  return stripAnsi(text).length
+}

package/src/theme/tailwind-map.ts

@@ -0,0 +1,469 @@
+/**
+ * Tailwind CSS to ANSI Color Mapping
+ *
+ * Converts Tailwind CSS class names to ANSI escape sequences for terminal output.
+ * Supports text colors, background colors, and font styles.
+ *
+ * @module
+ */
+
+import { ANSI } from './ansi-codes'
+import { hexToAnsi } from './color-convert'
+
+// ============================================================================
+// Tailwind Color Palette
+// ============================================================================
+
+/**
+ * Tailwind color hex values for all standard colors and shades.
+ */
+export const TAILWIND_COLORS: Record<string, Record<string, string>> = {
+  gray: {
+    '50': '#f9fafb',
+    '100': '#f3f4f6',
+    '200': '#e5e7eb',
+    '300': '#d1d5db',
+    '400': '#9ca3af',
+    '500': '#6b7280',
+    '600': '#4b5563',
+    '700': '#374151',
+    '800': '#1f2937',
+    '900': '#111827',
+    '950': '#030712',
+  },
+  slate: {
+    '50': '#f8fafc',
+    '100': '#f1f5f9',
+    '200': '#e2e8f0',
+    '300': '#cbd5e1',
+    '400': '#94a3b8',
+    '500': '#64748b',
+    '600': '#475569',
+    '700': '#334155',
+    '800': '#1e293b',
+    '900': '#0f172a',
+    '950': '#020617',
+  },
+  zinc: {
+    '50': '#fafafa',
+    '100': '#f4f4f5',
+    '200': '#e4e4e7',
+    '300': '#d4d4d8',
+    '400': '#a1a1aa',
+    '500': '#71717a',
+    '600': '#52525b',
+    '700': '#3f3f46',
+    '800': '#27272a',
+    '900': '#18181b',
+    '950': '#09090b',
+  },
+  neutral: {
+    '50': '#fafafa',
+    '100': '#f5f5f5',
+    '200': '#e5e5e5',
+    '300': '#d4d4d4',
+    '400': '#a3a3a3',
+    '500': '#737373',
+    '600': '#525252',
+    '700': '#404040',
+    '800': '#262626',
+    '900': '#171717',
+    '950': '#0a0a0a',
+  },
+  stone: {
+    '50': '#fafaf9',
+    '100': '#f5f5f4',
+    '200': '#e7e5e4',
+    '300': '#d6d3d1',
+    '400': '#a8a29e',
+    '500': '#78716c',
+    '600': '#57534e',
+    '700': '#44403c',
+    '800': '#292524',
+    '900': '#1c1917',
+    '950': '#0c0a09',
+  },
+  red: {
+    '50': '#fef2f2',
+    '100': '#fee2e2',
+    '200': '#fecaca',
+    '300': '#fca5a5',
+    '400': '#f87171',
+    '500': '#ef4444',
+    '600': '#dc2626',
+    '700': '#b91c1c',
+    '800': '#991b1b',
+    '900': '#7f1d1d',
+    '950': '#450a0a',
+  },
+  orange: {
+    '50': '#fff7ed',
+    '100': '#ffedd5',
+    '200': '#fed7aa',
+    '300': '#fdba74',
+    '400': '#fb923c',
+    '500': '#f97316',
+    '600': '#ea580c',
+    '700': '#c2410c',
+    '800': '#9a3412',
+    '900': '#7c2d12',
+    '950': '#431407',
+  },
+  amber: {
+    '50': '#fffbeb',
+    '100': '#fef3c7',
+    '200': '#fde68a',
+    '300': '#fcd34d',
+    '400': '#fbbf24',
+    '500': '#f59e0b',
+    '600': '#d97706',
+    '700': '#b45309',
+    '800': '#92400e',
+    '900': '#78350f',
+    '950': '#451a03',
+  },
+  yellow: {
+    '50': '#fefce8',
+    '100': '#fef9c3',
+    '200': '#fef08a',
+    '300': '#fde047',
+    '400': '#facc15',
+    '500': '#eab308',
+    '600': '#ca8a04',
+    '700': '#a16207',
+    '800': '#854d0e',
+    '900': '#713f12',
+    '950': '#422006',
+  },
+  lime: {
+    '50': '#f7fee7',
+    '100': '#ecfccb',
+    '200': '#d9f99d',
+    '300': '#bef264',
+    '400': '#a3e635',
+    '500': '#84cc16',
+    '600': '#65a30d',
+    '700': '#4d7c0f',
+    '800': '#3f6212',
+    '900': '#365314',
+    '950': '#1a2e05',
+  },
+  green: {
+    '50': '#f0fdf4',
+    '100': '#dcfce7',
+    '200': '#bbf7d0',
+    '300': '#86efac',
+    '400': '#4ade80',
+    '500': '#22c55e',
+    '600': '#16a34a',
+    '700': '#15803d',
+    '800': '#166534',
+    '900': '#14532d',
+    '950': '#052e16',
+  },
+  emerald: {
+    '50': '#ecfdf5',
+    '100': '#d1fae5',
+    '200': '#a7f3d0',
+    '300': '#6ee7b7',
+    '400': '#34d399',
+    '500': '#10b981',
+    '600': '#059669',
+    '700': '#047857',
+    '800': '#065f46',
+    '900': '#064e3b',
+    '950': '#022c22',
+  },
+  teal: {
+    '50': '#f0fdfa',
+    '100': '#ccfbf1',
+    '200': '#99f6e4',
+    '300': '#5eead4',
+    '400': '#2dd4bf',
+    '500': '#14b8a6',
+    '600': '#0d9488',
+    '700': '#0f766e',
+    '800': '#115e59',
+    '900': '#134e4a',
+    '950': '#042f2e',
+  },
+  cyan: {
+    '50': '#ecfeff',
+    '100': '#cffafe',
+    '200': '#a5f3fc',
+    '300': '#67e8f9',
+    '400': '#22d3ee',
+    '500': '#06b6d4',
+    '600': '#0891b2',
+    '700': '#0e7490',
+    '800': '#155e75',
+    '900': '#164e63',
+    '950': '#083344',
+  },
+  sky: {
+    '50': '#f0f9ff',
+    '100': '#e0f2fe',
+    '200': '#bae6fd',
+    '300': '#7dd3fc',
+    '400': '#38bdf8',
+    '500': '#0ea5e9',
+    '600': '#0284c7',
+    '700': '#0369a1',
+    '800': '#075985',
+    '900': '#0c4a6e',
+    '950': '#082f49',
+  },
+  blue: {
+    '50': '#eff6ff',
+    '100': '#dbeafe',
+    '200': '#bfdbfe',
+    '300': '#93c5fd',
+    '400': '#60a5fa',
+    '500': '#3b82f6',
+    '600': '#2563eb',
+    '700': '#1d4ed8',
+    '800': '#1e40af',
+    '900': '#1e3a8a',
+    '950': '#172554',
+  },
+  indigo: {
+    '50': '#eef2ff',
+    '100': '#e0e7ff',
+    '200': '#c7d2fe',
+    '300': '#a5b4fc',
+    '400': '#818cf8',
+    '500': '#6366f1',
+    '600': '#4f46e5',
+    '700': '#4338ca',
+    '800': '#3730a3',
+    '900': '#312e81',
+    '950': '#1e1b4b',
+  },
+  violet: {
+    '50': '#f5f3ff',
+    '100': '#ede9fe',
+    '200': '#ddd6fe',
+    '300': '#c4b5fd',
+    '400': '#a78bfa',
+    '500': '#8b5cf6',
+    '600': '#7c3aed',
+    '700': '#6d28d9',
+    '800': '#5b21b6',
+    '900': '#4c1d95',
+    '950': '#2e1065',
+  },
+  purple: {
+    '50': '#faf5ff',
+    '100': '#f3e8ff',
+    '200': '#e9d5ff',
+    '300': '#d8b4fe',
+    '400': '#c084fc',
+    '500': '#a855f7',
+    '600': '#9333ea',
+    '700': '#7e22ce',
+    '800': '#6b21a8',
+    '900': '#581c87',
+    '950': '#3b0764',
+  },
+  fuchsia: {
+    '50': '#fdf4ff',
+    '100': '#fae8ff',
+    '200': '#f5d0fe',
+    '300': '#f0abfc',
+    '400': '#e879f9',
+    '500': '#d946ef',
+    '600': '#c026d3',
+    '700': '#a21caf',
+    '800': '#86198f',
+    '900': '#701a75',
+    '950': '#4a044e',
+  },
+  pink: {
+    '50': '#fdf2f8',
+    '100': '#fce7f3',
+    '200': '#fbcfe8',
+    '300': '#f9a8d4',
+    '400': '#f472b6',
+    '500': '#ec4899',
+    '600': '#db2777',
+    '700': '#be185d',
+    '800': '#9d174d',
+    '900': '#831843',
+    '950': '#500724',
+  },
+  rose: {
+    '50': '#fff1f2',
+    '100': '#ffe4e6',
+    '200': '#fecdd3',
+    '300': '#fda4af',
+    '400': '#fb7185',
+    '500': '#f43f5e',
+    '600': '#e11d48',
+    '700': '#be123c',
+    '800': '#9f1239',
+    '900': '#881337',
+    '950': '#4c0519',
+  },
+}
+
+/**
+ * Pre-calculated ANSI 256 color codes for specific Tailwind colors.
+ *
+ * ANSI 256 uses:
+ * - 0-15: Standard colors (black, red, green, etc.)
+ * - 16-231: 6x6x6 color cube (216 colors)
+ * - 232-255: Grayscale ramp (24 shades)
+ *
+ * These mappings were derived by:
+ * 1. Looking up Tailwind hex values from TAILWIND_PALETTE
+ * 2. Converting to RGB and finding nearest ANSI 256 code
+ *
+ * Color cube formula: 16 + (36 * r) + (6 * g) + b
+ * where r, g, b are in range [0, 5] (6 levels each)
+ *
+ * Examples:
+ * - blue-500 (#3b82f6) → RGB(59,130,246) → nearest: 33 (blue from standard palette)
+ * - red-600 (#dc2626) → RGB(220,38,38) → nearest: 160 (red from cube)
+ * - gray-800 (#1f2937) → RGB(31,41,55) → nearest: 238 (grayscale)
+ */
+const TAILWIND_TO_ANSI_256: Record<string, number> = {
+  'blue-500': 33,    // #3b82f6 - bright blue
+  'red-600': 160,    // #dc2626 - dark red
+  'green-400': 71,   // #4ade80 - light green
+  'yellow-500': 220, // #eab308 - golden yellow
+  'purple-600': 128, // #9333ea - purple
+  'gray-800': 238,   // #1f2937 - dark gray (grayscale)
+}
+
+// ============================================================================
+// Public API
+// ============================================================================
+
+/**
+ * Converts a single Tailwind CSS class to an ANSI 256 escape sequence.
+ *
+ * Supports:
+ * - Text colors: `text-{color}-{shade}`, `text-white`, `text-black`
+ * - Background colors: `bg-{color}-{shade}`
+ * - Font styles: `font-bold`, `italic`, `underline`, `line-through`
+ *
+ * @param className - A single Tailwind CSS class name
+ * @returns ANSI escape sequence, or empty string if class is not recognized
+ *
+ * @example
+ * ```tsx
+ * const blue = tailwindToAnsi('text-blue-500')
+ * const bold = tailwindToAnsi('font-bold')
+ * console.log(`${blue}${bold}Styled text${ANSI.reset}`)
+ * ```
+ */
+export function tailwindToAnsi(className: string): string {
+  // Handle text styles
+  if (className === 'font-bold') return ANSI.bold
+  if (className === 'italic') return ANSI.italic
+  if (className === 'underline') return ANSI.underline
+  if (className === 'line-through') return ANSI.strikethrough
+
+  // Handle text-white and text-black
+  if (className === 'text-white') return '\x1b[38;5;15m'
+  if (className === 'text-black') return '\x1b[38;5;0m'
+
+  // Parse Tailwind color class: text-{color}-{shade} or bg-{color}-{shade}
+  const textMatch = className.match(/^text-(\w+)-(\d+)$/)
+  const bgMatch = className.match(/^bg-(\w+)-(\d+)$/)
+
+  if (textMatch) {
+    const [, color, shade] = textMatch
+    const colorKey = `${color}-${shade}`
+
+    // Check for pre-calculated values first
+    if (TAILWIND_TO_ANSI_256[colorKey]) {
+      return `\x1b[38;5;${TAILWIND_TO_ANSI_256[colorKey]}m`
+    }
+
+    // Look up in color palette and convert
+    if (TAILWIND_COLORS[color]?.[shade]) {
+      return hexToAnsi(TAILWIND_COLORS[color][shade])
+    }
+  }
+
+  if (bgMatch) {
+    const [, color, shade] = bgMatch
+    const colorKey = `${color}-${shade}`
+
+    // Check for pre-calculated values first
+    if (TAILWIND_TO_ANSI_256[colorKey]) {
+      return `\x1b[48;5;${TAILWIND_TO_ANSI_256[colorKey]}m`
+    }
+
+    // Look up in color palette and convert
+    if (TAILWIND_COLORS[color]?.[shade]) {
+      return hexToAnsi(TAILWIND_COLORS[color][shade], { background: true })
+    }
+  }
+
+  // Unknown class
+  return ''
+}
+
+/**
+ * Legacy Tailwind class map for tailwindToTerminal
+ */
+const legacyTailwindToAnsi: Record<string, string> = {
+  // Text colors
+  'text-primary': ANSI.cyan,
+  'text-secondary': ANSI.blue,
+  'text-muted': ANSI.brightBlack,
+  'text-success': ANSI.green,
+  'text-warning': ANSI.yellow,
+  'text-error': ANSI.red,
+  'text-destructive': ANSI.red,
+
+  // Font styles
+  'font-bold': ANSI.bold,
+  'font-medium': ANSI.bold,
+  italic: ANSI.italic,
+  underline: ANSI.underline,
+
+  // Background colors
+  'bg-primary': ANSI.bgCyan,
+  'bg-secondary': ANSI.bgBlue,
+  'bg-muted': ANSI.bgBlack,
+  'bg-destructive': ANSI.bgRed,
+}
+
+/**
+ * Converts multiple Tailwind CSS classes to ANSI escape codes.
+ *
+ * Takes a space-separated string of Tailwind classes and returns
+ * the combined ANSI escape codes.
+ *
+ * @deprecated Use {@link tailwindToAnsi} for single classes,
+ * or use the theme system for semantic colors.
+ *
+ * @param classes - Space-separated Tailwind class names
+ * @returns Combined ANSI escape codes
+ *
+ * @example
+ * ```tsx
+ * const codes = tailwindToTerminal('text-primary font-bold')
+ * console.log(`${codes}Styled text${ANSI.reset}`)
+ * ```
+ */
+export function tailwindToTerminal(classes: string): string {
+  // Handle null/undefined/empty input
+  if (!classes || typeof classes !== 'string') {
+    return ''
+  }
+
+  const parts = classes.split(' ').filter(Boolean)
+  const ansiCodes: string[] = []
+
+  for (const cls of parts) {
+    if (legacyTailwindToAnsi[cls]) {
+      ansiCodes.push(legacyTailwindToAnsi[cls])
+    }
+  }
+
+  return ansiCodes.join('')
+}