@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/core/types.ts

@@ -1,82 +0,0 @@
-/**
- * Framework-agnostic core types for @mks2508/mks-ui.
- *
- * These types are shared across all framework implementations (React, Solid, etc.).
- * React-specific types should go in src/react/.
- *
- * @module @mks2508/mks-ui/core/types
- */
-
-/**
- * Maps each slot name to its default Tailwind class string.
- * Used to define base styling of each visual region of a component.
- *
- * @example
- * ```typescript
- * type ButtonSlot = 'root' | 'icon' | 'label';
- *
- * const ButtonStyles: StyleSlots<ButtonSlot> = {
- *   root: 'inline-flex items-center justify-center',
- *   icon: 'size-4 shrink-0',
- *   label: 'truncate',
- * };
- * ```
- */
-export type StyleSlots<S extends string> = Record<S, string>;
-
-/**
- * Partial override for slot classes. Consumers pass this via the `slots` prop
- * to add or replace Tailwind classes on specific visual regions.
- *
- * @example
- * ```tsx
- * <Accordion slots={{ trigger: 'text-cyan-400 font-bold', panel: 'bg-zinc-900/50' }} />
- * ```
- */
-export type SlotOverrides<S extends string> = Partial<Record<S, string>>;
-
-/**
- * Base configuration interface for component behavior and animation.
- * Components extend this with their specific config options.
- *
- * @example
- * ```typescript
- * export interface IAccordionConfig extends IBaseConfig {
- *   collapseOnBlur?: boolean;
- * }
- * ```
- */
-export interface IBaseConfig {
-	/**
-	 * Animation settings.
-	 * Components define their own defaults.
-	 */
-	animation?: {
-		/** Duration in seconds. */
-		duration?: number;
-		/** CSS easing function or motion easing name. */
-		easing?: string;
-	};
-}
-
-/**
- * Motion props for advanced animation control.
- * Passed directly to internal motion element.
- * When provided, overrides config.animation completely.
- *
- * @example
- * ```tsx
- * <Dialog
- *   motionProps={{
- *     initial: { opacity: 0, scale: 0.95 },
- *     animate: { opacity: 1, scale: 1 },
- *     transition: { type: 'spring', stiffness: 300 },
- *   }}
- * />
- * ```
- *
- * @remarks
- * This is defined as an opaque type alias. The actual type is imported
- * from motion/react in React-specific files to avoid core depending on motion.
- */
-export type MotionOverride = Record<string, unknown>;

package/src/css.d.ts

@@ -1,7 +0,0 @@
-declare module '*.module.css' {
-  const classes: Record<string, string>;
-  export default classes;
-}
-
-declare module '@xterm/xterm/css/xterm.css';
-declare module '*.css';

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