@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,25 +0,0 @@
-/**
- * Terminal Chrome — lightweight barrel export.
- *
- * Exports only the glassmorphism shell components (no restty, no xterm).
- * Use `@mks2508/mks-ui/react/blocks/Terminal/chrome` for zero terminal deps.
- *
- * @module @mks2508/mks-ui/react/blocks/Terminal/chrome
- */
-
-// Chrome shell
-export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
-export { TerminalPanelHeader } from './panel/TerminalPanelHeader';
-export { TerminalPanelFooter } from './panel/TerminalPanelFooter';
-
-// Chrome styles + variants
-export {
-  terminalChromeStyles,
-  terminalChromeVariants,
-  ACCENT_GRADIENTS,
-  type TerminalChromeSlot,
-  type TerminalChromeVariantProps,
-} from './panel/TerminalPanelChrome.styles';
-
-// Chrome types
-export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';

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

@@ -1,316 +0,0 @@
-/**
- * React badge components for log lines.
- *
- * Styled badge components using Tailwind CSS for the React log viewer.
- * Provides level badges, timestamp badges, and tag badges with consistent
- * Synthwave Dark theme styling.
- *
- * All badge components are memoized for optimal performance.
- *
- * @module components/devenv/terminal/LogLineBadges
- */
-
-'use client';
-
-import { memo } from 'react';
-import type { TLogLevel, TContentType } from '../parsing';
-import { cn } from '@/react-ui/lib/utils';
-
-/**
- * Level badge color mapping.
- *
- * Maps each log level to its corresponding Tailwind color classes.
- */
-const LEVEL_COLORS: Record<TLogLevel, string> = {
-  info: 'bg-blue-500/15 text-blue-400 border-blue-500/25 shadow-[0_0_6px_rgba(59,130,246,0.15)]',
-  warn: 'bg-yellow-500/15 text-yellow-400 border-yellow-500/25 shadow-[0_0_6px_rgba(234,179,8,0.15)]',
-  error: 'bg-red-500/20 text-red-400 border-red-500/30 shadow-[0_0_8px_rgba(239,68,68,0.2)]',
-  fatal: 'bg-pink-500/20 text-pink-400 border-pink-500/30 shadow-[0_0_8px_rgba(236,72,153,0.2)]',
-  debug: 'bg-cyan-500/15 text-cyan-400 border-cyan-500/25 shadow-[0_0_6px_rgba(6,182,212,0.15)]',
-  trace: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
-  unknown: 'bg-gray-500/8 text-gray-500 border-gray-500/15',
-};
-
-/**
- * Props for LevelBadge component.
- */
-export interface ILevelBadgeProps {
-  /** Log level to display */
-  level: TLogLevel;
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Level badge component (memoized).
- *
- * Displays a colored badge with the log level label.
- * Uses Synthwave Dark theme colors with glassmorphic effect.
- *
- * @example
- * ```tsx
- * <LevelBadge level="info" />
- * // Renders: [INFO] with blue background
- * ```
- */
-export const LevelBadge = memo(function LevelBadge({ level, className }: ILevelBadgeProps): React.JSX.Element {
-  return (
-    <span
-      className={cn(
-        'px-2 py-0.5 rounded border font-mono text-[10px] font-bold tracking-wider',
-        LEVEL_COLORS[level],
-        className
-      )}
-    >
-      {level.toUpperCase()}
-    </span>
-  );
-});
-
-/**
- * Props for TimestampBadge component.
- */
-export interface ITimestampBadgeProps {
-  /** Timestamp string to display */
-  timestamp: string;
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Timestamp badge component (memoized).
- *
- * Displays a timestamp with muted styling.
- * Uses tabular numbers for consistent alignment.
- *
- * @example
- * ```tsx
- * <TimestampBadge timestamp="22:41:03" />
- * // Renders: 22:41:03 in gray
- * ```
- */
-export const TimestampBadge = memo(function TimestampBadge({ timestamp, className }: ITimestampBadgeProps): React.JSX.Element {
-  // Truncate to HH:MM:SS format for consistent width
-  const timeOnly = timestamp.includes('.')
-    ? timestamp.split('.')[0]
-    : timestamp;
-
-  return (
-    <span
-      className={cn(
-        'ml-auto text-muted-foreground font-mono text-xs tabular-nums',
-        'opacity-70',
-        className
-      )}
-    >
-      {timeOnly}
-    </span>
-  );
-});
-
-/**
- * Props for TagBadge component.
- */
-export interface ITagBadgeProps {
-  /** Tag string to display */
-  tag: string;
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Tag badge component (memoized).
- *
- * Displays a component tag (e.g., "API", "ROUTES").
- * Truncates long tags to 12 characters.
- *
- * @example
- * ```tsx
- * <TagBadge tag="WORKSPACEMANAGER" />
- * // Renders: [WORKSPACEMAN...] in cyan
- * ```
- */
-export const TagBadge = memo(function TagBadge({ tag, className }: ITagBadgeProps): React.JSX.Element {
-  // Truncate long tags
-  const displayTag = tag.length > 12 ? tag.slice(0, 9) + '...' : tag;
-
-  return (
-    <span
-      className={cn(
-        'px-1.5 py-0.5 rounded border font-mono text-xs',
-        'bg-purple-500/10 text-purple-400 border-purple-500/20',
-        className
-      )}
-    >
-      {displayTag}
-    </span>
-  );
-});
-
-/**
- * Props for TagBadges component.
- */
-export interface ITagBadgesProps {
-  /** Array of tag strings */
-  tags: string[];
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Tag badges container component (memoized).
- *
- * Displays multiple tag badges with consistent spacing.
- *
- * @example
- * ```tsx
- * <TagBadges tags={['API', 'ROUTES']} />
- * // Renders: [API][ROUTES] with spacing
- * ```
- */
-export const TagBadges = memo(function TagBadges({ tags, className }: ITagBadgesProps): React.JSX.Element | null {
-  if (!tags || tags.length === 0) return null;
-
-  return (
-    <span className={cn('flex items-center gap-1', className)}>
-      {tags.map((tag) => (
-        <TagBadge key={tag} tag={tag} />
-      ))}
-    </span>
-  );
-});
-
-/**
- * Content type badge color and label mapping.
- *
- * Maps each content type to its display label and Tailwind color classes.
- * 'plain' entries are hidden (no badge rendered).
- */
-const CONTENT_TYPE_STYLES: Record<TContentType, { label: string; className: string }> = {
-  plain: { label: '', className: '' },
-  http: {
-    label: 'HTTP',
-    className: 'bg-cyan-500/15 text-cyan-400 border-cyan-500/25 shadow-[0_0_6px_rgba(6,182,212,0.15)]',
-  },
-  json: {
-    label: 'JSON',
-    className: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/25 shadow-[0_0_6px_rgba(16,185,129,0.15)]',
-  },
-  table: {
-    label: 'TABLE',
-    className: 'bg-violet-500/15 text-violet-400 border-violet-500/25 shadow-[0_0_6px_rgba(139,92,246,0.15)]',
-  },
-  error: {
-    label: 'ERR',
-    className: 'bg-red-500/20 text-red-400 border-red-500/30 shadow-[0_0_8px_rgba(239,68,68,0.2)]',
-  },
-};
-
-/**
- * Props for ContentTypeBadge component.
- */
-export interface IContentTypeBadgeProps {
-  /** Content type of the log entry */
-  contentType: TContentType;
-  /** HTTP method (GET, POST, etc.) — shown instead of generic "HTTP" label */
-  httpMethod?: string;
-  /** Optional custom class name */
-  className?: string;
-}
-
-/**
- * Content type badge component (memoized).
- *
- * Displays a colored badge indicating the content type of a log entry
- * (HTTP, JSON, TABLE, ERR). HTTP entries show the actual method
- * (GET, POST, etc.) instead of a generic "HTTP" label.
- *
- * Returns null for 'plain' content type — no badge rendered.
- *
- * @example
- * ```tsx
- * <ContentTypeBadge contentType="http" httpMethod="GET" />
- * // Renders: [GET] in cyan
- *
- * <ContentTypeBadge contentType="json" />
- * // Renders: [JSON] in emerald
- * ```
- */
-export const ContentTypeBadge = memo(function ContentTypeBadge({
-  contentType,
-  httpMethod,
-  className,
-}: IContentTypeBadgeProps): React.JSX.Element | null {
-  if (contentType === 'plain' || !contentType) return null;
-  const style = CONTENT_TYPE_STYLES[contentType];
-
-  // HTTP entries show the actual method (GET, POST, etc.) instead of generic "HTTP"
-  const label = contentType === 'http' && httpMethod
-    ? httpMethod.toUpperCase()
-    : style.label;
-
-  return (
-    <span className={cn(
-      'px-1.5 py-0.5 rounded border font-mono text-[10px] font-bold tracking-wider',
-      style.className,
-      className
-    )}>
-      {label}
-    </span>
-  );
-});
-
-/**
- * Props for LogLineContainer component.
- */
-export interface ILogLineContainerProps {
-  /** Log level for styling */
-  level: TLogLevel;
-  /** Line number */
-  lineNumber: number;
-  /** Whether this is a continuation line */
-  isContinuation?: boolean;
-  /** Optional custom class name */
-  className?: string;
-  /** Child elements */
-  children: React.ReactNode;
-}
-
-/**
- * Log line container component.
- *
- * Provides consistent styling and structure for log lines.
- * Adds subtle hover effect and line number on hover.
- *
- * @example
- * ```tsx
- * <LogLineContainer level="info" lineNumber={42}>
- *   <LevelBadge level="info" />
- *   <span>Log message here</span>
- * </LogLineContainer>
- * ```
- */
-export function LogLineContainer({
-  level,
-  lineNumber,
-  isContinuation = false,
-  className,
-  children,
-}: ILogLineContainerProps): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        'group flex items-start gap-2 py-0.5 px-2 rounded-sm',
-        'hover:bg-white/5 transition-colors duration-150',
-        'border-l-2',
-        isContinuation ? 'border-transparent ml-6' : 'border-transparent',
-        // Add colored left border on hover based on level
-        `hover:border-${level === 'error' || level === 'fatal' ? 'red' : level === 'warn' ? 'yellow' : 'blue'}-500/50`,
-        className
-      )}
-      title={`Line ${lineNumber}`}
-    >
-      {children}
-    </div>
-  );
-}

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

@@ -1,218 +0,0 @@
-/**
- * Specialized syntax highlighter for different log content types.
- *
- * Provides syntax highlighting for HTTP requests, tables, and JSON
- * with appropriate styling for each type.
- *
- * @module components/devenv/terminal/SpecializedSyntaxHighlighter
- */
-
-'use client';
-
-import { HttpLogParser } from '../parsing/HttpLogParser';
-import { TableParser, TABLE_CHARS } from '../parsing/TableParser';
-import { HighlightedJson } from './SyntaxHighlight';
-import { cn } from '@/react-ui/lib/utils';
-
-/**
- * Props for specialized syntax highlighting.
- */
-export interface ISpecializedSyntaxHighlighterProps {
-  /** Content type */
-  contentType?: 'plain' | 'http' | 'json' | 'table' | 'error';
-
-  /** HTTP method (for HTTP content) */
-  httpMethod?: string;
-
-  /** HTTP path (for HTTP content) */
-  httpPath?: string;
-
-  /** Table data (for table content) */
-  tableData?: unknown;
-
-  /** JSON data (for JSON content) */
-  jsonData?: Record<string, unknown> | unknown;
-
-  /** Raw text to highlight */
-  text: string;
-
-  /** Optional custom class name */
-  className?: string;
-}
-
-// Singleton instances
-const httpParser = new HttpLogParser();
-const tableParser = new TableParser();
-
-/**
- * Specialized syntax highlighter component.
- *
- * Applies appropriate highlighting based on content type:
- * - HTTP: pink method, cyan path
- * - JSON: structured syntax highlighting
- * - Table: borders in gray, content in colors
- * - Plain: default highlighting
- *
- * @example
- * ```tsx
- * <SpecializedSyntaxHighlighter
- *   contentType="http"
- *   httpMethod="GET"
- *   httpPath="/api/endpoint"
- *   text="GET /api/endpoint {"
- * />
- * ```
- */
-export function SpecializedSyntaxHighlighter({
-  contentType = 'plain',
-  httpMethod: _httpMethod,
-  httpPath: _httpPath,
-  tableData: _tableData,
-  jsonData,
-  text,
-  className,
-}: ISpecializedSyntaxHighlighterProps): React.JSX.Element {
-  // HTTP content highlighting
-  if (contentType === 'http') {
-    return <HttpHighlighter text={text} className={className} />;
-  }
-
-  // JSON content highlighting
-  if (contentType === 'json' && jsonData) {
-    return (
-      <div className={cn('font-mono text-xs', className)}>
-        <HighlightedJson json={jsonData as Record<string, unknown>} />
-      </div>
-    );
-  }
-
-  // Table content highlighting
-  if (contentType === 'table') {
-    return <TableHighlighter text={text} className={className} />;
-  }
-
-  // Plain content - use default syntax highlighting
-  return <span className={cn('font-mono text-sm', className)}>{text}</span>;
-}
-
-/**
- * HTTP request syntax highlighter.
- *
- * Highlights HTTP method (pink) and path (cyan).
- */
-function HttpHighlighter({ text, className }: { text: string; className?: string }): React.JSX.Element {
-  const parts = httpParser.highlightLine(text);
-
-  return (
-    <span className={cn('font-mono text-sm', className)}>
-      {parts.map((part, i) => (
-        <span key={i} className={part.className}>
-          {part.text}
-        </span>
-      ))}
-    </span>
-  );
-}
-
-/**
- * Table syntax highlighter.
- *
- * Renders detected tables as actual styled HTML tables
- * with header detection, alternating rows, and proper borders.
- * Falls back to box-drawing character highlighting.
- */
-function TableHighlighter({ text, className }: { text: string; className?: string }): React.JSX.Element {
-  const lines = text.split('\n').filter((l) => l.trim().length > 0);
-
-  // Try to extract structured table data
-  const tableData = tableParser.parseTable(lines, 0);
-  const { headers, dataRows } = tableData;
-
-  // If we have structured data, render as an actual HTML table
-  if (dataRows.length > 0 && (headers || dataRows.length > 1)) {
-    const displayHeaders = headers || (dataRows.length > 1 ? dataRows[0] : undefined);
-    const displayRows = headers ? dataRows.filter((r) => r !== headers) : dataRows.slice(displayHeaders ? 1 : 0);
-
-    return (
-      <div className={cn('my-1 overflow-x-auto rounded-md border border-border/20', className)}>
-        <table className="w-full font-mono text-xs border-collapse">
-          {displayHeaders && (
-            <thead>
-              <tr className="bg-muted/30 border-b border-border/30">
-                {displayHeaders.map((header, i) => (
-                  <th
-                    key={i}
-                    className="px-3 py-1.5 text-left text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80"
-                  >
-                    {header}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-          )}
-          <tbody>
-            {displayRows.map((row, i) => (
-              <tr
-                key={i}
-                className={cn(
-                  'border-b border-border/10 transition-colors hover:bg-white/[0.04]',
-                  i % 2 === 0 ? 'bg-transparent' : 'bg-white/[0.02]'
-                )}
-              >
-                {row.map((cell, j) => (
-                  <td key={j} className="px-3 py-1 text-foreground/85 whitespace-nowrap">
-                    {cell}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-
-  // Fallback: render with box-drawing character highlighting
-  return (
-    <div className={cn('font-mono text-xs', className)}>
-      {lines.map((line, i) => {
-        const rowType = tableParser.getRowType(line);
-        const rowClass = tableParser.getRowClass(rowType);
-        return (
-          <div key={i} className={rowClass}>
-            <TableRowLine line={line} />
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-/**
- * Individual table row with box-drawing character highlighting.
- */
-function TableRowLine({ line }: { line: string }): React.JSX.Element {
-  const parts: React.ReactNode[] = [];
-  let lastIndex = 0;
-
-  for (let i = 0; i < line.length; i++) {
-    const char = line[i];
-    if (TABLE_CHARS.includes(char as typeof TABLE_CHARS[number])) {
-      if (i > lastIndex) {
-        parts.push(<span key={lastIndex}>{line.slice(lastIndex, i)}</span>);
-      }
-      parts.push(<span key={i} className="text-border/40">{char}</span>);
-      lastIndex = i + 1;
-    }
-  }
-
-  if (lastIndex < line.length) {
-    parts.push(<span key={lastIndex}>{line.slice(lastIndex)}</span>);
-  }
-
-  if (parts.length === 0) {
-    return <span>{line}</span>;
-  }
-
-  return <>{parts}</>;
-}