@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/blocks/Terminal/Terminal.theme.restty.ts

@@ -1,155 +0,0 @@
-/**
- * Theme bridge between ITerminalTheme (xterm.js format) and GhosttyTheme (restty format).
- *
- * Converts the mks-dev-environment Synthwave theme colors into
- * restty's Ghostty-compatible theme format for GPU-rendered terminals.
- *
- * @module components/devenv/terminal/theme-restty
- */
-
-import type { ITerminalTheme } from './Terminal.types';
-import { SYNTHWAVE_TERMINAL_THEME } from './Terminal.theme';
-
-/**
- * RGB color as used by restty's Ghostty theme format.
- * Each channel is 0-255.
- */
-export interface IResttyThemeColor {
-  r: number;
-  g: number;
-  b: number;
-  a?: number;
-}
-
-/**
- * Ghostty theme structure compatible with restty's applyTheme().
- * Mirrors the GhosttyTheme type from restty/theme.
- */
-export interface IResttyGhosttyTheme {
-  name?: string;
-  colors: {
-    background?: IResttyThemeColor;
-    foreground?: IResttyThemeColor;
-    cursor?: IResttyThemeColor;
-    cursorText?: IResttyThemeColor;
-    selectionBackground?: IResttyThemeColor;
-    selectionForeground?: IResttyThemeColor;
-    palette: Array<IResttyThemeColor | undefined>;
-  };
-  raw: Record<string, string>;
-}
-
-/**
- * Convert a hex color string (#RRGGBB or #RGB) to restty's ThemeColor format.
- *
- * @param hex - Hex color string (e.g., '#D40C67', '#fff')
- * @returns RGB color object with channels 0-255
- */
-export function hexToResttyColor(hex: string): IResttyThemeColor {
-  let clean = hex.replace('#', '');
-
-  // Handle shorthand (#RGB → #RRGGBB)
-  if (clean.length === 3) {
-    clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
-  }
-
-  return {
-    r: parseInt(clean.slice(0, 2), 16),
-    g: parseInt(clean.slice(2, 4), 16),
-    b: parseInt(clean.slice(4, 6), 16),
-  };
-}
-
-/**
- * Convert an rgba() color string to restty's ThemeColor format.
- * Falls back to opaque white for unparseable values.
- *
- * @param rgba - CSS rgba() string (e.g., 'rgba(0, 217, 255, 0.3)')
- * @returns RGB color object
- */
-function rgbaToResttyColor(rgba: string): IResttyThemeColor {
-  const match = rgba.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);
-  if (!match) return { r: 255, g: 255, b: 255 };
-
-  return {
-    r: parseInt(match[1], 10),
-    g: parseInt(match[2], 10),
-    b: parseInt(match[3], 10),
-    a: match[4] ? Math.round(parseFloat(match[4]) * 255) : undefined,
-  };
-}
-
-/**
- * Parse any CSS color value (hex or rgba) to restty ThemeColor.
- *
- * @param color - CSS color string
- * @returns RGB color object
- */
-function cssColorToResttyColor(color: string): IResttyThemeColor {
-  if (color.startsWith('#')) return hexToResttyColor(color);
-  if (color.startsWith('rgb')) return rgbaToResttyColor(color);
-  return { r: 255, g: 255, b: 255 };
-}
-
-/**
- * Convert ITerminalTheme (xterm.js format) to GhosttyTheme (restty format).
- *
- * Maps the 16-color ANSI palette plus background, foreground, cursor,
- * and selection colors to restty's Ghostty theme structure.
- *
- * @param theme - xterm.js theme with hex color values
- * @returns Ghostty theme compatible with restty's applyTheme()
- */
-export function xtermThemeToGhostty(theme: ITerminalTheme): IResttyGhosttyTheme {
-  const palette: Array<IResttyThemeColor | undefined> = new Array(256).fill(undefined);
-
-  // Standard ANSI colors (indices 0-7)
-  palette[0] = hexToResttyColor(theme.black);
-  palette[1] = hexToResttyColor(theme.red);
-  palette[2] = hexToResttyColor(theme.green);
-  palette[3] = hexToResttyColor(theme.yellow);
-  palette[4] = hexToResttyColor(theme.blue);
-  palette[5] = hexToResttyColor(theme.magenta);
-  palette[6] = hexToResttyColor(theme.cyan);
-  palette[7] = hexToResttyColor(theme.white);
-
-  // Bright ANSI colors (indices 8-15)
-  palette[8] = hexToResttyColor(theme.brightBlack);
-  palette[9] = hexToResttyColor(theme.brightRed);
-  palette[10] = hexToResttyColor(theme.brightGreen);
-  palette[11] = hexToResttyColor(theme.brightYellow);
-  palette[12] = hexToResttyColor(theme.brightBlue);
-  palette[13] = hexToResttyColor(theme.brightMagenta);
-  palette[14] = hexToResttyColor(theme.brightCyan);
-  palette[15] = hexToResttyColor(theme.brightWhite);
-
-  return {
-    name: 'Synthwave Industrial Dark',
-    colors: {
-      background: hexToResttyColor(theme.background),
-      foreground: hexToResttyColor(theme.foreground),
-      cursor: hexToResttyColor(theme.cursor),
-      cursorText: theme.cursorAccent ? hexToResttyColor(theme.cursorAccent) : undefined,
-      selectionBackground: theme.selectionBackground
-        ? cssColorToResttyColor(theme.selectionBackground)
-        : undefined,
-      selectionForeground: theme.selectionForeground
-        ? cssColorToResttyColor(theme.selectionForeground)
-        : undefined,
-      palette,
-    },
-    raw: {},
-  };
-}
-
-/**
- * Get the Synthwave Industrial Dark theme in Ghostty format for restty.
- *
- * Pre-built conversion of the default terminal theme, ready to pass
- * directly to `restty.applyTheme()`.
- *
- * @returns GhosttyTheme with Synthwave colors
- */
-export function getSynthwaveGhosttyTheme(): IResttyGhosttyTheme {
-  return xtermThemeToGhostty(SYNTHWAVE_TERMINAL_THEME);
-}

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

@@ -1,80 +0,0 @@
-/**
- * Synthwave Industrial Dark theme for xterm.js.
- *
- * Matches mks-dev-environment design system from globals.css:
- * - background: #241B2F (220 25% 15%)
- * - primary: #D40C67 (330 85% 43%)
- * - success: #44ffaa (142 100% 62%)
- *
- * Color palette optimized for dark terminal with high contrast
- * and cyberpunk/synthwave aesthetic.
- *
- * @module components/devenv/terminal/theme
- */
-
-import type { ITerminalTheme } from './Terminal.types';
-
-/**
- * Synthwave Industrial Dark theme for xterm.js.
- *
- * Features:
- * - Deep purple background (#241B2F) matching design system
- * - Primary magenta cursor (#D40C67) with glow effect support
- * - High-contrast ANSI colors for readability
- * - Cyan selection with transparency for visual feedback
- */
-export const SYNTHWAVE_TERMINAL_THEME: ITerminalTheme = {
-  // Base colors from design system
-  background: '#241B2F',
-  foreground: '#e8e8ec',
-
-  // Cursor - primary magenta with glow effect
-  cursor: '#D40C67',
-  cursorAccent: '#D40C67',
-
-  // Selection - cyan with transparency
-  selectionBackground: 'rgba(0, 217, 255, 0.3)',
-
-  // ANSI colors - adjusted for synthwave aesthetic
-  black: '#1a1a2e',
-  red: '#ff4466',
-  green: '#44ffaa',
-  yellow: '#ffcc00',
-  blue: '#00d9ff',
-  magenta: '#D40C67',
-  cyan: '#00d9ff',
-  white: '#e8e8ec',
-
-  // Bright ANSI colors - enhanced for better visibility
-  brightBlack: '#2d2d44',
-  brightRed: '#ff6b6b',
-  brightGreen: '#66ffcc',
-  brightYellow: '#ffdd33',
-  brightBlue: '#33e0ff',
-  brightMagenta: '#ff3399',
-  brightCyan: '#33e0ff',
-  brightWhite: '#ffffff',
-};
-
-/**
- * Get terminal theme with optional overrides.
- *
- * Allows customizing the Synthwave theme while preserving
- * the default color scheme. Useful for per-session theming.
- *
- * @param overrides - Partial theme properties to override
- * @returns Complete terminal theme with applied overrides
- *
- * @example
- * ```ts
- * const customTheme = getTerminalTheme({
- *   cursor: '#00ff00',
- *   fontSize: 16,
- * });
- * ```
- */
-export function getTerminalTheme(
-  overrides?: Partial<ITerminalTheme>
-): ITerminalTheme {
-  return { ...SYNTHWAVE_TERMINAL_THEME, ...overrides };
-}

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

@@ -1,438 +0,0 @@
-/**
- * Terminal component types.
- *
- * Provides interfaces for the terminal component system supporting
- * multiple renderers (xterm.js, restty) and PTY backends (node-pty,
- * WebContainer) with configurable modes (interactive, read-only)
- * and connection statuses.
- *
- * @module components/devenv/terminal/types
- */
-
-/**
- * Terminal renderer type - determines the rendering engine.
- *
- * - `xterm`: xterm.js DOM/canvas renderer (default, recommended for compatibility)
- * - `restty`: GPU-accelerated WebGPU/WebGL2 renderer via restty with libghostty-vt WASM core
- */
-export type ITerminalRendererType = 'xterm' | 'restty';
-
-/**
- * Terminal PTY backend type - determines what drives the terminal server-side.
- *
- * - `nodepty`: node-pty via WebSocket (default, used by mks-devenv agent-backend)
- * - `webcontainer`: @webcontainer/api for in-browser Node.js runtime
- */
-export type ITerminalPtyBackendType = 'nodepty' | 'webcontainer';
-
-/**
- * Terminal backend type - determines the rendering engine.
- *
- * @deprecated Use {@link ITerminalRendererType} for renderer selection
- * and {@link ITerminalPtyBackendType} for backend selection instead.
- *
- * - `xterm`: xterm.js with WebSocket/SSE support (recommended)
- * - `webcontainer`: @webcontainer/api for full Node.js in browser
- * - `monaco`: Monaco Editor for Code-Server/Claude Code integration
- */
-export type ITerminalBackendType = 'xterm' | 'webcontainer' | 'monaco';
-
-/**
- * Terminal mode - determines user interaction capabilities.
- *
- * - `interactive`: Full terminal with input/output via WebSocket
- * - `readonly`: Output-only mode via SSE for logs viewing
- */
-export type ITerminalMode = 'interactive' | 'readonly';
-
-/**
- * Connection status for WebSocket/SSE connections.
- *
- * Connection lifecycle states for terminal session management.
- */
-export type ITerminalConnectionStatus =
-  | 'disconnected'
-  | 'connecting'
-  | 'connected'
-  | 'error';
-
-/**
- * Terminal session information.
- *
- * Represents an active terminal session with metadata for
- * multi-session management in the UI.
- */
-export interface ITerminalSession {
-  /** Unique session identifier */
-  id: string;
-
-  /** Display name for the session (e.g., container name, workspace path) */
-  name: string;
-
-  /** Backend type rendering this session */
-  backend: ITerminalBackendType;
-
-  /** Renderer type for this session (default: 'xterm') */
-  renderer?: ITerminalRendererType;
-
-  /** Interaction mode for this session */
-  mode: ITerminalMode;
-
-  /** Current connection status */
-  status: ITerminalConnectionStatus;
-
-  /** Session creation timestamp */
-  createdAt: Date;
-
-  /** WebSocket URL for interactive mode (optional) */
-  wsUrl?: string;
-
-  /** SSE URL for readonly mode (optional) */
-  sseUrl?: string;
-}
-
-/**
- * Terminal options for initialization.
- *
- * Configuration options passed to terminal backends during
- * initialization. Includes xterm.js-specific options,
- * WebSocket/SSE URLs, and lifecycle callbacks.
- */
-export interface ITerminalOptions {
-  // Renderer & backend selection
-
-  /** Renderer type to use (default: 'xterm') */
-  renderer?: ITerminalRendererType;
-
-  /** PTY backend type (default: 'nodepty') */
-  ptyBackend?: ITerminalPtyBackendType;
-
-  /**
-   * Backend type to use (default: 'xterm').
-   * @deprecated Use {@link renderer} instead.
-   */
-  backend?: ITerminalBackendType;
-
-  /** Terminal mode (default: 'interactive') */
-  mode?: ITerminalMode;
-
-  // xterm.js options
-
-  /** Enable cursor blink animation (default: true) */
-  cursorBlink?: boolean;
-
-  /** Scrollback buffer size in lines (default: 1000) */
-  scrollback?: number;
-
-  /** Font size in pixels (default: 14) */
-  fontSize?: number;
-
-  /** Font family string (default: 'JetBrains Mono') */
-  fontFamily?: string;
-
-  /** Terminal theme colors */
-  theme?: ITerminalTheme;
-
-  // WebSocket/SSE configuration
-
-  /** WebSocket URL for interactive mode (ws:// or wss://) */
-  wsUrl?: string;
-
-  /** SSE URL for readonly mode (http:// or https://) */
-  sseUrl?: string;
-
-  // Callbacks
-
-  /** Called when user types input in interactive mode */
-  onData?: (data: string) => void;
-
-  /** Called on connection errors */
-  onError?: (error: Error) => void;
-
-  /** Called when connection closes */
-  onClose?: () => void;
-}
-
-/**
- * Terminal theme matching Synthwave design system.
- *
- * Color palette for xterm.js rendering. Matches the mks-dev-environment
- * design system from globals.css with background #241B2F, primary #D40C67,
- * and success #44ffaa.
- */
-export interface ITerminalTheme {
-  /** Background color (default: #241B2F - synthwave dark) */
-  background: string;
-
-  /** Default text color (default: #e8e8ec) */
-  foreground: string;
-
-  /** Cursor color (default: #D40C67 - primary magenta) */
-  cursor: string;
-
-  /** Cursor accent color for block cursor (optional) */
-  cursorAccent?: string;
-
-  /** Selection background color (optional) */
-  selectionBackground?: string;
-
-  /** Selection foreground color (optional, restty v0.1.24+) */
-  selectionForeground?: string;
-
-  /** ANSI color: black */
-  black: string;
-
-  /** ANSI color: red */
-  red: string;
-
-  /** ANSI color: green */
-  green: string;
-
-  /** ANSI color: yellow */
-  yellow: string;
-
-  /** ANSI color: blue */
-  blue: string;
-
-  /** ANSI color: magenta */
-  magenta: string;
-
-  /** ANSI color: cyan */
-  cyan: string;
-
-  /** ANSI color: white */
-  white: string;
-
-  /** ANSI bright color: bright black */
-  brightBlack: string;
-
-  /** ANSI bright color: bright red */
-  brightRed: string;
-
-  /** ANSI bright color: bright green */
-  brightGreen: string;
-
-  /** ANSI bright color: bright yellow */
-  brightYellow: string;
-
-  /** ANSI bright color: bright blue */
-  brightBlue: string;
-
-  /** ANSI bright color: bright magenta */
-  brightMagenta: string;
-
-  /** ANSI bright color: bright cyan */
-  brightCyan: string;
-
-  /** ANSI bright color: bright white */
-  brightWhite: string;
-}
-
-/**
- * Capabilities that a terminal adapter supports.
- *
- * Used for runtime feature detection to adapt UI behavior
- * based on the underlying renderer's capabilities.
- */
-export interface ITerminalAdapterCapabilities {
-  /** Whether the adapter manages its own PTY WebSocket connection */
-  managesOwnConnection: boolean;
-
-  /** Whether the adapter supports GPU-accelerated rendering */
-  gpuRendering: boolean;
-
-  /** Whether the adapter supports built-in multi-pane splits */
-  multiPane: boolean;
-
-  /** Whether the adapter has a built-in theme catalog */
-  builtinThemes: boolean;
-}
-
-/**
- * Terminal adapter interface - allows pluggable renderers.
- *
- * Abstraction layer for different terminal renderers (xterm.js, restty).
- * All renderers must implement the core methods. Optional methods provide
- * access to renderer-specific features when available (check `capabilities`).
- */
-export interface ITerminalAdapter {
-  /** Backend type identifier */
-  type: ITerminalBackendType;
-
-  /** Adapter capabilities for runtime feature detection */
-  readonly capabilities: ITerminalAdapterCapabilities;
-
-  /**
-   * Initialize the terminal in the given container element.
-   *
-   * @param container - DOM element to render terminal into
-   * @param options - Terminal initialization options
-   * @returns Promise that resolves when terminal is ready
-   */
-  initialize(container: HTMLElement, options: ITerminalOptions): Promise<void>;
-
-  /**
-   * Write data to the terminal without newline.
-   * No-op for adapters that manage their own PTY connection (e.g. restty).
-   *
-   * @param data - String data to write
-   */
-  write(data: string): void;
-
-  /**
-   * Write data to the terminal with newline.
-   * No-op for adapters that manage their own PTY connection (e.g. restty).
-   *
-   * @param data - String data to write
-   */
-  writeln(data: string): void;
-
-  /**
-   * Clear the terminal buffer.
-   */
-  clear(): void;
-
-  /**
-   * Resize the terminal to the given dimensions.
-   *
-   * @param cols - Number of columns
-   * @param rows - Number of rows
-   */
-  resize(cols: number, rows: number): void;
-
-  /**
-   * Dispose of the terminal and release resources.
-   */
-  dispose(): void;
-
-  /**
-   * Switch between interactive and readonly modes.
-   *
-   * @param mode - Target mode
-   */
-  setMode(mode: ITerminalMode): void;
-
-  /**
-   * Focus the terminal for input.
-   */
-  focus(): void;
-
-  /**
-   * Remove focus from the terminal.
-   */
-  blur(): void;
-
-  /**
-   * Connect to a PTY backend via WebSocket URL.
-   * Only applicable when capabilities.managesOwnConnection is true.
-   *
-   * @param url - WebSocket URL for PTY connection
-   */
-  connectPty?(url: string): void;
-
-  /**
-   * Disconnect from the PTY backend.
-   * Only applicable when capabilities.managesOwnConnection is true.
-   */
-  disconnectPty?(): void;
-
-  /**
-   * Check if PTY WebSocket is connected.
-   * Only applicable when capabilities.managesOwnConnection is true.
-   */
-  isPtyConnected?(): boolean;
-
-  /**
-   * Update font size at runtime.
-   *
-   * @param size - Font size in pixels
-   */
-  setFontSize?(size: number): void;
-
-  /**
-   * Send raw input data to the terminal PTY.
-   * For adapters that manage their own connection.
-   *
-   * @param data - Input data string
-   */
-  sendInput?(data: string): void;
-
-  /**
-   * Copy the current text selection to the clipboard.
-   *
-   * @returns Whether the copy succeeded
-   */
-  copySelection?(): Promise<boolean>;
-
-  /**
-   * Paste clipboard contents into the terminal.
-   *
-   * @returns Whether the paste succeeded
-   */
-  pasteClipboard?(): Promise<boolean>;
-}
-
-/**
- * PTY transport callbacks matching restty's PtyCallbacks contract.
- * Consumers implement these to receive terminal events.
- */
-export interface IPtyTransportCallbacks {
-  /** Called when WebSocket connection opens */
-  onConnect?: () => void;
-  /** Called when WebSocket connection closes */
-  onDisconnect?: () => void;
-  /** Called with terminal output data */
-  onData?: (data: string) => void;
-  /** Called when the server reports PTY status (shell name) */
-  onStatus?: (shell: string) => void;
-  /** Called when the server reports an error */
-  onError?: (message: string, errors?: string[]) => void;
-  /** Called when the PTY process exits */
-  onExit?: (code: number) => void;
-}
-
-/**
- * PTY transport connect options matching restty's PtyConnectOptions.
- */
-export interface IPtyTransportConnectOptions {
-  /** WebSocket URL (ws:// or wss://) */
-  url: string;
-  /** Initial terminal width in columns */
-  cols?: number;
-  /** Initial terminal height in rows */
-  rows?: number;
-  /** Event callbacks for connection lifecycle and data */
-  callbacks: IPtyTransportCallbacks;
-}
-
-/**
- * PTY transport interface matching restty's expected contract.
- * Consumers provide a custom implementation to bridge their WebSocket protocol.
- */
-export interface IPtyTransport {
-  /** Open a connection to the PTY server */
-  connect: (options: IPtyTransportConnectOptions) => void;
-  /** Close the current connection */
-  disconnect: () => void;
-  /** Send terminal input data to the server */
-  sendInput: (data: string) => boolean;
-  /** Send terminal resize notification to the server */
-  resize: (cols: number, rows: number) => boolean;
-  /** Check if the transport is currently connected */
-  isConnected: () => boolean;
-  /** Release all resources held by the transport */
-  destroy: () => void;
-}
-
-/**
- * Factory function that creates a PTY transport instance.
- * Consumers inject this to provide custom WebSocket protocol bridging.
- *
- * @example
- * ```ts
- * // In mks-devenv consumer:
- * const factory: IPtyTransportFactory = () => createDevenvPtyTransport();
- * <TerminalRestty createPtyTransport={factory} wsUrl={wsUrl} />
- * ```
- */
-export type IPtyTransportFactory = () => IPtyTransport;

package/src/react-ui/blocks/Terminal/TerminalDisplay.styles.ts

@@ -1,38 +0,0 @@
-/**
- * TerminalDisplay style definitions.
- *
- * @module components/devenv/terminal/TerminalDisplay.styles
- */
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-import type { TerminalDisplaySlot } from './TerminalDisplay.types';
-
-/**
- * Default style slots for TerminalDisplay regions.
- */
-export const terminalDisplayStyles: StyleSlots<TerminalDisplaySlot> = {
-  root: 'relative overflow-hidden',
-  chrome: '',
-  terminal: 'w-full h-full pointer-events-none',
-  emptyState: 'flex items-center justify-center text-sm text-muted-foreground/50 font-mono',
-};
-
-/**
- * CVA variants for the display root.
- */
-export const terminalDisplayVariants = cva(terminalDisplayStyles.root, {
-  variants: {
-    variant: {
-      default: '',
-      compact: '',
-      error: '',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-/** Extracted variant props type */
-export type TerminalDisplayVariantProps = VariantProps<typeof terminalDisplayVariants>;