@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx

@@ -1,386 +0,0 @@
-/**
- * Syntax highlighting for log messages (React spans).
- *
- * Applies color highlighting to specific elements within log messages
- * using React span elements with Tailwind CSS classes.
- *
- * IMPORTANT: Only highlights plain text - skips lines with existing ANSI codes
- * to prevent mixing codes and creating visual artifacts.
- *
- * Features LRU cache to avoid re-parsing identical text.
- *
- * @module components/devenv/terminal/SyntaxHighlight
- */
-
-'use client';
-
-import { cn } from '@/react-ui/lib/utils';
-
-/**
- * LRU cache for syntax highlighting results.
- * Avoids re-parsing identical text on every render.
- */
-const highlightCache = new Map<string, React.ReactNode>();
-const MAX_CACHE_SIZE = 1000;
-
-/**
- * Strip ANSI escape codes from text.
- *
- * @param text - Text with ANSI codes
- * @returns Text without ANSI codes
- */
-function stripAnsiCodes(text: string): string {
-  // CSI sequences: \x1b[... (parameters)
-  // OSC sequences: \x1b]... (ST is \x07 or \x1b\\)
-  // General escape sequences
-  return text
-    .replace(/\x1b\[[0-9;]*[mGKH]/g, '') // CSI SGR sequences
-    .replace(/\x1b\][^\x07\x1b\\]*[\x07\x1b\\]/g, '') // OSC sequences
-    .replace(/\x1b\\/g, ''); // ST (String Terminator)
-}
-
-/**
- * Get cached highlighted text or compute and cache it.
- */
-function getCachedHighlight(text: string): React.ReactNode {
-  if (highlightCache.has(text)) {
-    return highlightCache.get(text)!;
-  }
-
-  const result = highlightText(text);
-
-  // LRU: remove oldest entry if cache is full
-  if (highlightCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = highlightCache.keys().next().value;
-    if (firstKey) highlightCache.delete(firstKey);
-  }
-
-  highlightCache.set(text, result);
-  return result;
-}
-
-/**
- * Clear the highlight cache (useful for memory management).
- */
-export function clearHighlightCache(): void {
-  highlightCache.clear();
-}
-
-/**
- * Check if text contains ANSI escape codes.
- *
- * Detects all types of ANSI escape sequences:
- * - CSI (Control Sequence Introducer): \x1b[... (parameters)
- * - OSC (Operating System Command): \x1b]...
- * - General escape sequences: \x1b...
- */
-function hasAnsiCodes(text: string): boolean {
-  // CSI sequences: \x1b[ followed by params and final byte
-  // OSC sequences: \x1b] followed by content and ST
-  // Any ESC character: \x1b
-  return /\x1b\[/.test(text) || /\x1b\]/.test(text) || /\x1b/.test(text);
-}
-
-/**
- * Props for SyntaxHighlightedText component.
- */
-export interface ISyntaxHighlightedTextProps {
-  /** Text to highlight */
-  text: string;
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Syntax highlighted text component.
- *
- * Applies syntax highlighting to plain text messages.
- * Strips ANSI codes before highlighting to prevent visual artifacts
- * from mixed escape sequences.
- *
- * @example
- * ```tsx
- * <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
- * ```
- */
-export function SyntaxHighlightedText({ text, className }: ISyntaxHighlightedTextProps): React.JSX.Element {
-  if (!text || text.length === 0) {
-    return <span className={className}>{text}</span>;
-  }
-
-  // Strip ANSI codes before highlighting to enable syntax highlighting on colored logs
-  const cleanText = hasAnsiCodes(text) ? stripAnsiCodes(text) : text;
-
-  const highlighted = getCachedHighlight(cleanText);
-
-  return (
-    <span className={cn('font-mono text-sm', className)}>
-      {highlighted}
-    </span>
-  );
-}
-
-/**
- * Apply syntax highlighting to text.
- *
- * Returns an array of React nodes with appropriate styling.
- * Patterns are applied in order (most specific first).
- */
-function highlightText(text: string): React.ReactNode {
-  let result = text;
-  const tokens: { text: string; className?: string }[] = [];
-
-  // Apply highlighting in order (most specific first)
-  result = extractTokens(result, tokens, [
-    // Timestamps (HH:MM:SS, HH:MM:SS.mmm)
-    { pattern: /\b\d{1,2}:\d{2}:\d{2}(\.\d{1,3})?\b/g, className: 'text-cyan-400/70' },
-
-    // Bracketed badges: [INFO], [WARN], etc.
-    { pattern: /\[([A-Z][A-Z0-9_]*)\]/g, className: 'text-purple-400 bg-purple-500/10 px-1 rounded font-semibold' },
-
-    // Source location: file.ts:7:45 or file.TS:7:45 or NATIVE:7:39
-    { pattern: /\b([a-zA-Z0-9_-]+\.([a-zA-Z]{2,4}|[A-Z]{2})(?::\d+:\d+)?)\b/g, className: 'text-orange-400 bg-orange-500/10 px-1 rounded text-xs' },
-
-    // Source location: (file.ts:42:10)
-    { pattern: /\(([a-zA-Z0-9_-]+\.[a-zA-Z]{2,4}:\d+:\d+)\)/g, className: 'text-orange-400/80' },
-
-    // Curly braces content: {key} or {value}
-    { pattern: /\{([^}]+)\}/g, className: 'text-yellow-400 bg-yellow-500/5 px-0.5 rounded' },
-
-    // Parentheses content: (WARN), (debug)
-    { pattern: /\(([^)]+)\)/g, className: 'text-purple-300/80' },
-
-    // Angle brackets: <ERROR>, <path>
-    { pattern: /\b<([^>]+)>/g, className: 'text-cyan-300/80' },
-
-    // Version numbers: v1.2.3, 2.0.0-beta
-    { pattern: /\bv?\d+\.\d+\.\d+(-[a-z0-9.]+)?\b/gi, className: 'text-green-400 font-semibold' },
-
-    // Property keys (before colons): key:
-    { pattern: /\b([a-zA-Z_][a-zA-Z0-9_-]*)\s*:/g, className: 'text-green-500' },
-
-    // Keyword badges with colon: success:, error:, failed:, warning:
-    { pattern: /\b(success|error|failed|warning|warn|info|debug|trace|fatal):/gi, className: 'text-pink-400 font-semibold' },
-
-    // Strings (quoted values)
-    { pattern: /(['"])(.*?)\1/g, className: 'text-green-400' },
-
-    // Numbers (integers and floats)
-    { pattern: /(?<!\w)(-?\d+(?:\.\d+)?)(?!\w)/g, className: 'text-yellow-400' },
-
-    // Booleans
-    { pattern: /\b(true|false)\b/gi, className: 'text-blue-400' },
-
-    // Null/undefined
-    { pattern: /\b(null|undefined)\b/gi, className: 'text-gray-500' },
-
-    // HTTP methods
-    { pattern: /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g, className: 'text-pink-400 font-semibold' },
-
-    // URL paths: /api/users
-    { pattern: /(^|[\s(])\/[a-zA-Z0-9_/-]+/g, className: 'text-cyan-400' },
-
-    // File extensions: .js, .ts, .json, .py
-    { pattern: /\b\w+\.(js|ts|jsx|tsx|json|py|rs|go|java|c|cpp|h|cs|sh|bash|yml|yaml|toml|md|txt|log)\b/g, className: 'text-orange-400' },
-
-    // Standalone braces and brackets (structural)
-    { pattern: /([{}[\]()])/g, className: 'text-yellow-500' },
-
-    // Equals signs in assignments
-    { pattern: /\s*=\s*/g, className: 'text-gray-400' },
-
-    // Arrows: ->, =>
-    { pattern: /->|=>/g, className: 'text-purple-400 font-semibold' },
-  ]);
-
-  // Build React nodes from tokens
-  return tokens.map((token, index) => (
-    <span key={index} className={token.className}>
-      {token.text}
-    </span>
-  ));
-}
-
-/**
- * Extract tokens from text using patterns.
- *
- * Iteratively applies patterns and extracts matched tokens.
- */
-function extractTokens(
-  text: string,
-  tokens: { text: string; className?: string }[],
-  patterns: { pattern: RegExp; className?: string }[]
-): string {
-  let result = text;
-  let hasMatches = true;
-
-  while (hasMatches) {
-    hasMatches = false;
-
-    for (const { pattern, className } of patterns) {
-      const match = pattern.exec(result);
-      if (match) {
-        hasMatches = true;
-
-        // Extract matched portion
-        const matchedText = match[0];
-        const startIndex = match.index;
-        const endIndex = startIndex + matchedText.length;
-
-        // Add text before match (if any) as plain token
-        if (startIndex > 0) {
-          const beforeText = result.slice(0, startIndex);
-          if (beforeText) {
-            tokens.push({ text: beforeText });
-          }
-        }
-
-        // Add matched text with styling
-        tokens.push({ text: matchedText, className });
-
-        // Update result to continue after match
-        result = result.slice(endIndex);
-
-        // Reset pattern for next iteration
-        pattern.lastIndex = 0;
-        break;
-      }
-    }
-  }
-
-  // Add remaining text
-  if (result) {
-    tokens.push({ text: result });
-  }
-
-  return result;
-}
-
-/**
- * Props for HighlightedJson component.
- */
-export interface IHighlightedJsonProps {
-  /** JSON object to highlight */
-  json: Record<string, unknown>;
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Highlighted JSON component.
- *
- * Displays JSON with syntax highlighting and proper indentation.
- *
- * @example
- * ```tsx
- * <HighlightedJson json={{ filter: {}, name: "test" }} />
- * ```
- */
-export function HighlightedJson({ json, className }: IHighlightedJsonProps): React.JSX.Element {
-  const formatted = JSON.stringify(json, null, 2);
-
-  try {
-    const parsed = JSON.parse(formatted);
-    const highlighted = highlightJson(parsed);
-
-    return (
-      <pre className={cn('font-mono text-xs', className)}>
-        {highlighted}
-      </pre>
-    );
-  } catch {
-    return (
-      <pre className={cn('font-mono text-xs text-gray-400', className)}>
-        {formatted}
-      </pre>
-    );
-  }
-}
-
-/**
- * Recursively highlight JSON.
- */
-function highlightJson(value: unknown, indent = 0): React.ReactNode {
-  const indentStr = '  '.repeat(indent);
-
-  if (value === null) {
-    return <span className="text-gray-500">null</span>;
-  }
-
-  if (value === undefined) {
-    return <span className="text-gray-500">undefined</span>;
-  }
-
-  if (typeof value === 'boolean') {
-    return <span className="text-blue-400">{String(value)}</span>;
-  }
-
-  if (typeof value === 'number') {
-    return <span className="text-yellow-400">{String(value)}</span>;
-  }
-
-  if (typeof value === 'string') {
-    return <span className="text-green-400">"{value}"</span>;
-  }
-
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return (
-        <span>
-          <span className="text-yellow-500">[</span>
-          <span className="text-yellow-500">]</span>
-        </span>
-      );
-    }
-
-    return (
-      <span>
-        <span className="text-yellow-500">[</span>
-        {'\n'}
-        {value.map((item, index) => (
-          <span key={index}>
-            {indentStr + '  '}
-            {highlightJson(item, indent + 1)}
-            {index < value.length - 1 ? <span className="text-gray-500">,</span> : null}
-            {'\n'}
-          </span>
-        ))}
-        {indentStr}
-        <span className="text-yellow-500">]</span>
-      </span>
-    );
-  }
-
-  if (typeof value === 'object') {
-    const entries = Object.entries(value as Record<string, unknown>);
-    if (entries.length === 0) {
-      return (
-        <span>
-          <span className="text-yellow-500">{'{'}</span>
-          <span className="text-yellow-500">{'}'}</span>
-        </span>
-      );
-    }
-
-    return (
-      <span>
-        <span className="text-yellow-500">{'{'}</span>
-        {'\n'}
-        {entries.map(([key, val], index) => (
-          <span key={key}>
-            {indentStr + '  '}
-            <span className="text-green-500">"{key}"</span>
-            <span className="text-gray-500">: </span>
-            {highlightJson(val, indent + 1)}
-            {index < entries.length - 1 ? <span className="text-gray-500">,</span> : null}
-            {'\n'}
-          </span>
-        ))}
-        {indentStr}
-        <span className="text-yellow-500">{'}'}</span>
-      </span>
-    );
-  }
-
-  return <span className="text-gray-500">{String(value)}</span>;
-}

package/src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx

@@ -1,67 +0,0 @@
-/**
- * TerminalLogBadge Component.
- *
- * Wraps the base Badge component with terminal log level color styling.
- * Maps log levels to appropriate Tailwind color classes matching the
- * Synthwave Dark design system.
- *
- * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
- */
-
-'use client';
-
-import type { ReactNode } from 'react';
-import { Badge } from '@/react-ui/ui/Badge';
-import { cn } from '@/react-ui/lib/utils';
-
-import type { TLogLevelFilter } from '../parsing/LogParser.types';
-
-/**
- * Color classes for each log level.
- */
-const LEVEL_COLORS: Record<string, string> = {
-  all: 'bg-muted/40 text-muted-foreground border-muted/60',
-  trace: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
-  debug: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
-  info: 'bg-green-500/20 text-green-400 border-green-500/30',
-  warn: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
-  error: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
-  fatal: 'bg-red-500/20 text-red-400 border-red-500/30',
-  unknown: 'bg-muted/40 text-muted-foreground border-muted/60',
-};
-
-/**
- * Props for the TerminalLogBadge component.
- */
-export interface ITerminalLogBadgeProps {
-  /** Log level to display */
-  level: TLogLevelFilter | string;
-  /** Badge content (typically a count) */
-  children: ReactNode;
-  /** Additional class name */
-  className?: string;
-}
-
-/**
- * TerminalLogBadge Component.
- *
- * Renders a Badge styled for terminal log levels with appropriate
- * color coding for each severity level.
- *
- * @example
- * ```tsx
- * <TerminalLogBadge level="error">3</TerminalLogBadge>
- * <TerminalLogBadge level="info">42</TerminalLogBadge>
- * ```
- */
-export function TerminalLogBadge({ level, children, className }: ITerminalLogBadgeProps) {
-  return (
-    <Badge
-      variant="outline"
-      size="sm"
-      className={cn(LEVEL_COLORS[level] ?? LEVEL_COLORS.unknown, className)}
-    >
-      {children}
-    </Badge>
-  );
-}

package/src/react-ui/blocks/Terminal/components/index.ts

@@ -1,10 +0,0 @@
-/**
- * Terminal components barrel export.
- *
- * @module @mks2508/mks-ui/react/blocks/Terminal/components
- */
-
-export * from './LogLineBadges';
-export * from './SyntaxHighlight';
-export * from './SpecializedSyntaxHighlighter';
-export * from './TerminalLogBadge';

package/src/react-ui/blocks/Terminal/display.ts

@@ -1,46 +0,0 @@
-/**
- * Terminal Display — lightweight barrel export.
- *
- * Exports the readonly TerminalDisplay component + restty wrapper + chrome.
- * Depends on restty only (not xterm, not shiki, not xterm addons).
- * Use `@mks2508/mks-ui/react/blocks/Terminal/display` for minimal deps.
- *
- * @module @mks2508/mks-ui/react/blocks/Terminal/display
- */
-
-// TerminalDisplay (readonly restty terminal)
-export { TerminalDisplay } from './TerminalDisplay';
-export {
-  terminalDisplayStyles,
-  terminalDisplayVariants,
-  type TerminalDisplayVariantProps,
-} from './TerminalDisplay.styles';
-export type {
-  ITerminalDisplayProps,
-  ITerminalDisplayRef,
-  TerminalDisplaySlot,
-} from './TerminalDisplay.types';
-
-// Restty React wrapper (for advanced use)
-export { TerminalRestty } from './TerminalRestty';
-export type { ITerminalResttyProps, ITerminalResttyRef } from './TerminalRestty';
-
-// Chrome (re-exported for convenience)
-export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
-export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
-export {
-  terminalChromeStyles,
-  terminalChromeVariants,
-  ACCENT_GRADIENTS,
-  type TerminalChromeSlot,
-} from './panel/TerminalPanelChrome.styles';
-
-// Theme utilities (needed for display customization)
-export { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from './Terminal.theme';
-export {
-  hexToResttyColor,
-  xtermThemeToGhostty,
-  getSynthwaveGhosttyTheme,
-  type IResttyThemeColor,
-  type IResttyGhosttyTheme,
-} from './Terminal.theme.restty';

package/src/react-ui/blocks/Terminal/hooks/index.ts

@@ -1,22 +0,0 @@
-/**
- * Terminal Hooks Module.
- *
- * Reusable hooks for terminal WebSocket connections
- * and global settings management.
- *
- * @module @mks2508/mks-ui/react/blocks/Terminal/hooks
- */
-
-export {
-  useTerminalWebSocket,
-  type IUseTerminalWebSocketOptions,
-  type IUseTerminalWebSocketReturn,
-  type ITerminalWsServerMessage,
-  type TTerminalWsStatus,
-} from './useTerminalWebSocket';
-
-export {
-  useTerminalSettings,
-  type ITerminalSettings,
-  type IUseTerminalSettingsReturn,
-} from './useTerminalSettings';