@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/index.css

@@ -1,129 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist-mono";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.577 0.245 27.325);
-    --primary-foreground: oklch(0.971 0.013 17.38);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.58 0.22 27);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.808 0.114 19.571);
-    --chart-2: oklch(0.637 0.237 25.331);
-    --chart-3: oklch(0.577 0.245 27.325);
-    --chart-4: oklch(0.505 0.213 27.518);
-    --chart-5: oklch(0.444 0.177 26.899);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.577 0.245 27.325);
-    --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.637 0.237 25.331);
-    --primary-foreground: oklch(0.971 0.013 17.38);
-    --secondary: oklch(0.274 0.006 286.033);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.808 0.114 19.571);
-    --chart-2: oklch(0.637 0.237 25.331);
-    --chart-3: oklch(0.577 0.245 27.325);
-    --chart-4: oklch(0.505 0.213 27.518);
-    --chart-5: oklch(0.444 0.177 26.899);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.637 0.237 25.331);
-    --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-    --font-mono: 'Geist Mono Variable', monospace;
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-    }
-  body {
-    @apply font-sans bg-background text-foreground;
-    }
-  html {
-    @apply font-sans;
-    }
-}

package/src/index.ts

@@ -1,29 +0,0 @@
-/**
- * @mks2508/mks-ui
- *
- * UI component library - Framework-agnostic core types and React components.
- *
- * ## Entry Points
- *
- * ### Main Entry (Core Types)
- * ```typescript
- * import type { StyleSlots, SlotOverrides, IBaseConfig } from '@mks2508/mks-ui';
- * ```
- *
- * ### React Entry (Components, Hooks, Icons, Utils)
- * ```typescript
- * import { Button, Card, CornerBracket } from '@mks2508/mks-ui/react';
- * import { useAutoHeight } from '@mks2508/mks-ui/react';
- * import { Check, Search } from '@mks2508/mks-ui/react';
- * import { cn } from '@mks2508/mks-ui/react';
- * ```
- *
- * @example
- * ```tsx
- * import type { StyleSlots } from '@mks2508/mks-ui';
- * import { Button, Card, CornerBracket } from '@mks2508/mks-ui/react';
- * ```
- */
-
-// Core types (framework-agnostic)
-export * from './core';

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

@@ -1,278 +0,0 @@
-/**
- * ResttyAdapter - ITerminalAdapter implementation for restty.
- *
- * Wraps restty's GPU-accelerated terminal renderer into the
- * pluggable adapter interface, enabling renderer switching in the UI.
- *
- * Key differences from XTermAdapter:
- * - Restty manages its own PTY WebSocket via custom PtyTransport
- * - GPU rendering (WebGPU/WebGL2) instead of DOM/canvas
- * - No write()/writeln() for injecting display text — restty renders PTY output
- * - Built-in multi-pane, theme catalog, and text shaping with ligatures
- *
- * @module components/devenv/terminal/ResttyAdapter
- */
-
-import type {
-  ITerminalAdapter,
-  ITerminalAdapterCapabilities,
-  ITerminalBackendType,
-  ITerminalMode,
-  ITerminalOptions,
-  IPtyTransport,
-  IPtyTransportFactory,
-} from './Terminal.types';
-import type { Restty, ResttyPaneHandle } from 'restty';
-import { getSynthwaveGhosttyTheme, xtermThemeToGhostty } from './Terminal.theme.restty';
-
-/**
- * ITerminalAdapter implementation backed by restty.
- *
- * Uses restty's Restty class with a custom DevenvPtyTransport
- * that bridges the mks-devenv WebSocket JSON protocol. Status messages
- * are not rendered in the terminal — they should be handled as React overlays.
- *
- * @example
- * ```ts
- * const adapter = new ResttyAdapter({ fontSize: 14 });
- * await adapter.initialize(containerEl, options);
- * adapter.connectPty?.('ws://localhost:3100/terminal/session-1');
- * ```
- */
-export class ResttyAdapter implements ITerminalAdapter {
-  /** Backend type identifier for factory pattern */
-  public readonly type: ITerminalBackendType = 'xterm'; // kept for backward compat with union
-
-  /** Adapter capabilities — restty manages its own connection and supports GPU */
-  public readonly capabilities: ITerminalAdapterCapabilities = {
-    managesOwnConnection: true,
-    gpuRendering: true,
-    multiPane: true,
-    builtinThemes: true,
-  };
-
-  private restty: Restty | null = null;
-  private transport: IPtyTransport | null = null;
-  private options: ITerminalOptions;
-  private rootElement: HTMLElement | null = null;
-  private createTransport?: IPtyTransportFactory;
-
-  /**
-   * @param options - Terminal initialization options
-   * @param createTransport - Optional factory to create a custom PTY transport.
-   *   If not provided, restty manages its own PTY connection internally.
-   */
-  constructor(options: ITerminalOptions, createTransport?: IPtyTransportFactory) {
-    this.options = options;
-    this.createTransport = createTransport;
-  }
-
-  /**
-   * Initialize restty in the given container element.
-   * Dynamically imports restty to enable code-splitting and SSR safety.
-   *
-   * @param container - DOM element to render the terminal into
-   * @param options - Terminal initialization options
-   */
-  async initialize(container: HTMLElement, options: ITerminalOptions): Promise<void> {
-    this.options = { ...this.options, ...options };
-    this.rootElement = container;
-
-    const { Restty } = await import('restty');
-
-    // Create custom PtyTransport if factory provided
-    this.transport = this.createTransport?.() ?? null;
-
-    this.restty = new Restty({
-      root: container,
-      appOptions: {
-        renderer: 'auto',
-        fontSize: this.options.fontSize ?? 14,
-        autoResize: true,
-        ...(this.transport ? { ptyTransport: this.transport } : {}),
-      },
-      fontSources: this.buildFontSources(),
-      createInitialPane: true,
-      shortcuts: false, // Disable built-in pane splitting shortcuts
-      defaultContextMenu: true,
-    });
-
-    // Apply theme
-    if (this.options.theme) {
-      this.restty.applyTheme(xtermThemeToGhostty(this.options.theme));
-    } else {
-      this.restty.applyTheme(getSynthwaveGhosttyTheme());
-    }
-  }
-
-  /**
-   * Write data to the terminal display.
-   * No-op for restty — it renders PTY output via its own connection.
-   * Status messages should be displayed as React overlays.
-   */
-  write(_data: string): void {
-    // No-op: restty renders from PTY stream, not injected text
-  }
-
-  /**
-   * Write data with newline to the terminal display.
-   * No-op for restty — see write().
-   */
-  writeln(_data: string): void {
-    // No-op: restty renders from PTY stream, not injected text
-  }
-
-  /**
-   * Clear the terminal screen and scrollback.
-   */
-  clear(): void {
-    this.restty?.clearScreen();
-  }
-
-  /**
-   * Resize the terminal to explicit dimensions.
-   * Uses Restty's native resize() (v0.1.21+) for precise control.
-   *
-   * @param cols - Number of columns
-   * @param rows - Number of rows
-   */
-  resize(cols: number, rows: number): void {
-    this.restty?.resize(cols, rows);
-  }
-
-  /**
-   * Dispose of restty and release all resources (GPU, WASM, WebSocket).
-   */
-  dispose(): void {
-    this.restty?.destroy();
-    this.restty = null;
-    this.transport = null;
-    this.rootElement = null;
-  }
-
-  /**
-   * Switch between interactive and readonly modes.
-   * No-op for restty — mode is determined by PTY connection state.
-   */
-  setMode(_mode: ITerminalMode): void {
-    // Restty doesn't have a separate readonly mode
-  }
-
-  /**
-   * Focus the terminal for keyboard input.
-   * Uses Restty's native focus() (v0.1.21+) which handles pane focus correctly.
-   */
-  focus(): void {
-    this.restty?.focus();
-  }
-
-  /**
-   * Remove focus from the terminal.
-   * Uses Restty's native blur() (v0.1.21+).
-   */
-  blur(): void {
-    this.restty?.blur();
-  }
-
-  /**
-   * Connect to a PTY backend via WebSocket URL.
-   *
-   * @param url - WebSocket URL for PTY connection
-   */
-  connectPty(url: string): void {
-    this.restty?.connectPty(url);
-  }
-
-  /**
-   * Disconnect from the PTY backend.
-   */
-  disconnectPty(): void {
-    this.restty?.disconnectPty();
-  }
-
-  /**
-   * Check if PTY WebSocket is connected.
-   */
-  isPtyConnected(): boolean {
-    return this.restty?.isPtyConnected() ?? false;
-  }
-
-  /**
-   * Update font size at runtime.
-   *
-   * @param size - Font size in CSS pixels
-   */
-  setFontSize(size: number): void {
-    this.restty?.setFontSize(size);
-  }
-
-  /**
-   * Send raw input data to the terminal PTY.
-   *
-   * @param data - Input data string
-   */
-  sendInput(data: string): void {
-    this.restty?.sendInput(data);
-  }
-
-  /**
-   * Copy the current text selection to the clipboard.
-   */
-  async copySelection(): Promise<boolean> {
-    return this.restty?.copySelectionToClipboard() ?? false;
-  }
-
-  /**
-   * Paste clipboard contents into the terminal.
-   */
-  async pasteClipboard(): Promise<boolean> {
-    return this.restty?.pasteFromClipboard() ?? false;
-  }
-
-  /**
-   * Get the underlying Restty instance for advanced usage.
-   * Use sparingly — prefer the adapter interface.
-   */
-  getResttyInstance(): Restty | null {
-    return this.restty;
-  }
-
-  /**
-   * Get the active pane handle for direct restty pane operations.
-   */
-  getActivePane(): ResttyPaneHandle | null {
-    return this.restty?.activePane() ?? null;
-  }
-
-  /**
-   * Build font source list following restty's priority pattern:
-   * local fonts first (fast), then CDN fallback.
-   */
-  private buildFontSources() {
-    const family = this.options.fontFamily;
-
-    if (family) {
-      // Parse comma-separated font family string into matchers
-      const matchers = family
-        .split(',')
-        .map((f) => f.trim().replace(/['"]/g, '').toLowerCase())
-        .filter(Boolean);
-
-      return [{ type: 'local' as const, matchers }];
-    }
-
-    // Default: prefer local system fonts commonly available in dev environments
-    return [
-      {
-        type: 'local' as const,
-        matchers: [
-          'jetbrains mono',
-          'fira code',
-          'sf mono',
-          'cascadia code',
-          'meslo',
-        ],
-      },
-    ];
-  }
-}

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

@@ -1,97 +0,0 @@
-/**
- * Terminal adapter interface and factory.
- *
- * Allows switching between xterm.js, WebContainer, and Monaco backends
- * through a unified interface. Backends are loaded dynamically to enable
- * code-splitting and reduce initial bundle size.
- *
- * @module components/devenv/terminal/adapter
- */
-
-import type {
-  ITerminalAdapter,
-  ITerminalBackendType,
-  ITerminalRendererType,
-  ITerminalOptions,
-} from './Terminal.types';
-
-/**
- * Create terminal adapter based on backend type.
- *
- * Factory function that instantiates the appropriate terminal backend
- * adapter. Currently only xterm.js is implemented, with WebContainer
- * and Monaco planned for future releases.
- *
- * @param backend - Backend type to instantiate
- * @param options - Terminal options to pass to the adapter
- * @returns Promise resolving to the configured adapter
- *
- * @throws {Error} If backend type is not supported yet
- *
- * @example
- * ```ts
- * const adapter = await createTerminalAdapter('xterm', {
- *   mode: 'interactive',
- *   wsUrl: 'ws://localhost:3100/terminal/session-123',
- * });
- * await adapter.initialize(container, options);
- * ```
- */
-export async function createTerminalAdapter(
-  backend: ITerminalBackendType,
-  options: ITerminalOptions
-): Promise<ITerminalAdapter> {
-  switch (backend) {
-    case 'xterm':
-      const { XTermAdapter } = await import('./XTermAdapter');
-      return new XTermAdapter(options);
-
-    // TODO: Implement WebContainer and Monaco adapters
-    case 'webcontainer':
-    case 'monaco':
-      throw new Error(
-        `Backend '${backend}' is not yet implemented. Use 'xterm' backend for now.`
-      );
-
-    default:
-      throw new Error(`Unknown terminal backend: ${backend}`);
-  }
-}
-
-/**
- * Create terminal adapter based on renderer type.
- *
- * Factory function that instantiates the appropriate terminal renderer
- * adapter. Uses dynamic import for code-splitting — restty's WASM bundle
- * is only loaded when the `'restty'` renderer is selected.
- *
- * @param renderer - Renderer type to instantiate
- * @param options - Terminal options to pass to the adapter
- * @returns Promise resolving to the configured adapter
- *
- * @example
- * ```ts
- * const adapter = await createTerminalAdapterForRenderer('restty', {
- *   mode: 'interactive',
- *   wsUrl: 'ws://localhost:3100/terminal/session-123',
- * });
- * await adapter.initialize(container, options);
- * ```
- */
-export async function createTerminalAdapterForRenderer(
-  renderer: ITerminalRendererType,
-  options: ITerminalOptions
-): Promise<ITerminalAdapter> {
-  switch (renderer) {
-    case 'restty': {
-      const { ResttyAdapter } = await import('./ResttyAdapter');
-      return new ResttyAdapter(options);
-    }
-
-    case 'xterm':
-    default: {
-      const { XTermAdapter } = await import('./XTermAdapter');
-      return new XTermAdapter(options);
-    }
-  }
-}

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);
-}