@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown.tsx

@@ -1,202 +0,0 @@
-/**
- * TerminalFilterDropdown Component.
- *
- * Dropdown menu for log level filtering.
- * Replaces tab-style filters with a compact dropdown menu.
- *
- * @module components/devenv/terminal/panel/filter-dropdown
- */
-
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { cn } from '@/react-ui/lib/utils';
-import type { TLogLevelFilter, TLogLevel } from './TerminalLogsPanel.types';
-import styles from './terminal-filter-dropdown.module.css';
-
-/**
- * Props for TerminalFilterDropdown component.
- */
-export interface ITerminalFilterDropdownProps {
-  /** Current log level filter */
-  filterLevel: TLogLevelFilter;
-
-  /** Log level counts for badges */
-  levelCounts: Partial<Record<TLogLevel, number>>;
-
-  /** Callback when filter level changes */
-  onFilterChange: (level: TLogLevelFilter) => void;
-
-  /** Custom class name */
-  className?: string;
-}
-
-/**
- * Log level filter configurations.
- */
-const FILTER_OPTIONS: Array<{ value: TLogLevelFilter; label: string; color: string }> = [
-  { value: 'all', label: 'All Levels', color: 'text-foreground' },
-  { value: 'trace', label: 'Trace', color: 'text-slate-400' },
-  { value: 'debug', label: 'Debug', color: 'text-blue-400' },
-  { value: 'info', label: 'Info', color: 'text-green-400' },
-  { value: 'warn', label: 'Warn', color: 'text-yellow-400' },
-  { value: 'error', label: 'Error', color: 'text-orange-400' },
-  { value: 'fatal', label: 'Fatal', color: 'text-red-400' },
-];
-
-/**
- * Get count for a specific log level.
- */
-function getCount(level: TLogLevelFilter, levelCounts: Partial<Record<TLogLevel, number>>): number {
-  if (level === 'all') {
-    return Object.values(levelCounts).reduce((sum, count) => sum + (count ?? 0), 0);
-  }
-  return levelCounts[level] ?? 0;
-}
-
-/**
- * TerminalFilterDropdown Component.
- *
- * Displays a dropdown menu with:
- * - Current filter level as button label
- * - Filter options with badges
- * - Keyboard shortcuts
- * - Glassmorphic dropdown menu
- *
- * @example
- * ```tsx
- * <TerminalFilterDropdown
- *   filterLevel="all"
- *   levelCounts={{ info: 42, warn: 3, error: 1 }}
- *   onFilterChange={(level) => setFilterLevel(level)}
- * />
- * ```
- */
-export function TerminalFilterDropdown({
-  filterLevel,
-  levelCounts,
-  onFilterChange,
-  className,
-}: ITerminalFilterDropdownProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen]);
-
-  const currentOption = FILTER_OPTIONS.find((opt) => opt.value === filterLevel);
-  const currentCount = getCount(filterLevel, levelCounts);
-
-  return (
-    <div className={cn('relative', className)} ref={containerRef}>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className={cn(
-          styles.triggerButton,
-          'flex items-center gap-2 px-3 py-2 h-9 rounded-md transition-all duration-200',
-          'bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground',
-          'border border-border/30 hover:border-border/50',
-          'shadow-[inset_0_0.5px_0_rgba(255,255,255,0.1)] hover:shadow-[0_0_8px_rgba(0,0,0,0.1)]',
-          'text-xs font-mono font-medium uppercase tracking-wider'
-        )}
-        aria-label="Filter logs by level"
-        aria-expanded={isOpen}
-      >
-        {/* Filter Icon */}
-        <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-
-        {/* Current Filter Label */}
-        <span className="flex-shrink-0">{currentOption?.label}</span>
-
-        {/* Badge with count */}
-        {currentCount > 0 && (
-          <span className="inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 bg-primary/20 text-primary rounded font-mono text-[10px] font-bold">
-            {currentCount}
-          </span>
-        )}
-
-        {/* Chevron */}
-        <svg
-          className={cn('w-3 h-3 transition-transform duration-200 flex-shrink-0', isOpen && 'rotate-180')}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-
-      {/* Dropdown Menu - CSS Anchor Positioned */}
-      <div
-        className={styles.dropdownMenu}
-        data-open={isOpen}
-      >
-        <div className="glass-subtle rounded-lg py-1">
-            {FILTER_OPTIONS.map((option) => {
-              const count = getCount(option.value, levelCounts);
-              const isActive = filterLevel === option.value;
-
-              return (
-                <button
-                  key={option.value}
-                  type="button"
-                  onClick={() => {
-                    onFilterChange(option.value);
-                    setIsOpen(false);
-                  }}
-                  className={cn(
-                    'w-full px-3 py-2 flex items-center justify-between gap-3',
-                    'transition-all duration-150',
-                    'hover:bg-primary/10',
-                    isActive && 'bg-primary/15'
-                  )}
-                >
-                  <div className="flex items-center gap-2">
-                    {/* Color indicator dot */}
-                    <div
-                      className={cn(
-                        'w-2 h-2 rounded-full flex-shrink-0',
-                        option.value === 'all' ? 'bg-foreground' : `bg-${option.label.toLowerCase()}-400`
-                      )}
-                      style={{
-                        backgroundColor: option.value === 'all' ? 'hsl(var(--foreground))' : undefined
-                      }}
-                    />
-                    <span className={cn('text-sm font-mono', isActive ? option.color : 'text-muted-foreground')}>
-                      {option.label}
-                    </span>
-                  </div>
-
-                  {/* Count badge */}
-                  {count > 0 && (
-                    <span
-                      className={cn(
-                        'inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 rounded font-mono text-[10px] font-bold',
-                        isActive ? 'bg-primary/30 text-primary' : 'bg-muted/40 text-muted-foreground'
-                      )}
-                    >
-                      {count}
-                    </span>
-                  )}
-                </button>
-              );
-            })}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/react-ui/blocks/Terminal/panel/TerminalFilterTabs.tsx

@@ -1,140 +0,0 @@
-/**
- * TerminalFilterTabs Component.
- *
- * Tab-style filter buttons with badge counts and glow effects.
- * Replaces pill-style filter buttons with Ghostty-inspired tab design.
- *
- * @module components/devenv/terminal/panel/filter-tabs
- */
-
-'use client';
-
-import { cn } from '@/react-ui/lib/utils';
-import type { TLogLevelFilter, TLogLevel } from './TerminalLogsPanel.types';
-
-/**
- * Props for TerminalFilterTabs component.
- */
-export interface ITerminalFilterTabsProps {
-  /** Current log level filter */
-  filterLevel: TLogLevelFilter;
-
-  /** Log level counts for badges */
-  levelCounts: Partial<Record<TLogLevel, number>>;
-
-  /** Callback when filter level changes */
-  onFilterChange: (level: TLogLevelFilter) => void;
-
-  /** Custom class name */
-  className?: string;
-}
-
-/**
- * Log level filter tab configurations.
- */
-const FILTER_TABS: Array<{ value: TLogLevelFilter; label: string; shortcut: string }> = [
-  { value: 'all', label: 'ALL', shortcut: 'Ctrl+1' },
-  { value: 'trace', label: 'TRACE', shortcut: 'Ctrl+2' },
-  { value: 'debug', label: 'DEBUG', shortcut: 'Ctrl+3' },
-  { value: 'info', label: 'INFO', shortcut: 'Ctrl+4' },
-  { value: 'warn', label: 'WARN', shortcut: 'Ctrl+5' },
-  { value: 'error', label: 'ERROR', shortcut: 'Ctrl+6' },
-  { value: 'fatal', label: 'FATAL', shortcut: 'Ctrl+7' },
-];
-
-/**
- * Get count for a specific log level.
- */
-function getCount(level: TLogLevelFilter, levelCounts: Partial<Record<TLogLevel, number>>): number {
-  if (level === 'all') {
-    return Object.values(levelCounts).reduce((sum, count) => sum + (count ?? 0), 0);
-  }
-  return levelCounts[level] ?? 0;
-}
-
-/**
- * TerminalFilterTabs Component.
- *
- * Displays tab-style filter buttons with:
- * - Tab-style layout (not pill buttons)
- * - Badge count integration with glow on active
- * - Keyboard shortcuts in tooltips
- * - Compact horizontal arrangement
- * - Smooth animations on state changes
- *
- * @example
- * ```tsx
- * <TerminalFilterTabs
- *   filterLevel="all"
- *   levelCounts={{ info: 42, warn: 3, error: 1 }}
- *   onFilterChange={(level) => setFilterLevel(level)}
- * />
- * ```
- */
-export function TerminalFilterTabs({
-  filterLevel,
-  levelCounts,
-  onFilterChange,
-  className,
-}: ITerminalFilterTabsProps) {
-  return (
-    <div className={cn(
-      'flex items-center gap-1 px-3 h-12',
-      // Stepping colors para más contraste
-      'bg-gradient-to-b from-background/90 to-background/85',
-      // Enhanced border: top light reflection, bottom dark shadow
-      'border-t border-white/10 border-b border-border/60',
-      // Multi-layer inset shadows for depth
-      'shadow-[inset_0_1px_0_0_rgba(255,255,255,0.2),inset_0_-1px_0_0_rgba(0,0,0,0.08)]',
-      className
-    )}>
-      {FILTER_TABS.map((tab) => {
-        const count = getCount(tab.value, levelCounts);
-        const isActive = filterLevel === tab.value;
-        const showBadge = count > 0;
-
-        return (
-          <button
-            key={tab.value}
-            type="button"
-            onClick={() => onFilterChange(tab.value)}
-            className={cn(
-              'group relative flex items-center gap-1.5 px-3 py-1.5 h-9 rounded-t-md font-mono text-xs font-bold uppercase tracking-wider transition-all duration-200 flex-shrink-0',
-              isActive
-                ? 'bg-background text-foreground border-b-2 border-b-primary shadow-[0_0_8px_hsla(330,85%,43%,0.25)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.35)]'
-                : 'bg-muted/40 text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] hover:-translate-y-0.5'
-            )}
-            title={`${tab.label} logs (${count}) - ${tab.shortcut}`}
-          >
-            {/* Tab Label */}
-            <span>{tab.label}</span>
-
-            {/* Badge with Enhanced Glow on Active */}
-            {showBadge && (
-              <span
-                className={cn(
-                  'inline-flex items-center justify-center',
-                  'px-1.5 py-0.5 min-w-[1.25rem] h-4',
-                  'rounded font-mono text-[10px] font-bold transition-all duration-200',
-                  isActive
-                    ? 'bg-primary/20 text-primary shadow-[0_0_6px_hsla(330,85%,43%,0.4),0_0_12px_hsla(330,85%,43%,0.2)]'
-                    : 'bg-muted/40 text-muted-foreground'
-                )}
-              >
-                {count}
-              </span>
-            )}
-
-            {/* Active Tab Glow Effect */}
-            {isActive && (
-              <>
-                <div className="absolute inset-0 rounded-t-md bg-primary/5 pointer-events-none" />
-                <div className="absolute inset-0 rounded-t-md bg-gradient-to-t from-primary/10 to-transparent pointer-events-none" />
-              </>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.tsx

@@ -1,68 +0,0 @@
-/**
- * TerminalInteractivePanel Router.
- *
- * Thin router that delegates to the xterm or restty panel based on
- * the `renderer` prop or global terminal settings. Both panels are
- * lazy-loaded for code-splitting — restty's WASM bundle is only
- * fetched when the user selects the GPU renderer.
- *
- * @module components/devenv/terminal/panel/interactive
- */
-
-'use client';
-
-import { lazy, Suspense, forwardRef } from 'react';
-import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
-import { useTerminalSettings } from '../hooks/useTerminalSettings';
-
-const TerminalInteractivePanelXterm = lazy(() =>
-  import('./TerminalInteractivePanelXterm').then((m) => ({ default: m.TerminalInteractivePanelXterm }))
-);
-const TerminalInteractivePanelRestty = lazy(() =>
-  import('./TerminalInteractivePanelRestty').then((m) => ({ default: m.TerminalInteractivePanelRestty }))
-);
-
-/**
- * TerminalInteractivePanel Component.
- *
- * Routes to the appropriate renderer-specific panel. The `renderer`
- * prop overrides the global setting from `useTerminalSettings`,
- * allowing per-panel control when needed.
- *
- * Consumer code is unchanged — same component name, same props, same ref.
- *
- * @example
- * ```tsx
- * // Uses global setting (default: xterm)
- * <TerminalInteractivePanel
- *   containerName="mks-devenv"
- *   wsUrl="ws://localhost:3100/terminal/session-1"
- * />
- *
- * // Force restty renderer for this instance
- * <TerminalInteractivePanel
- *   renderer="restty"
- *   containerName="mks-devenv"
- *   wsUrl="ws://localhost:3100/terminal/session-1"
- * />
- * ```
- */
-export const TerminalInteractivePanel = forwardRef<
-  ITerminalInteractivePanelRef,
-  ITerminalInteractivePanelProps
->((props, ref) => {
-  const { settings } = useTerminalSettings();
-  const renderer = props.renderer ?? settings.renderer;
-
-  return (
-    <Suspense fallback={<div className="min-h-[400px] bg-[#241B2F]" />}>
-      {renderer === 'restty' ? (
-        <TerminalInteractivePanelRestty ref={ref} {...props} />
-      ) : (
-        <TerminalInteractivePanelXterm ref={ref} {...props} />
-      )}
-    </Suspense>
-  );
-});
-
-TerminalInteractivePanel.displayName = 'TerminalInteractivePanel';

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

@@ -1,85 +0,0 @@
-/**
- * Types for TerminalInteractivePanel component.
- *
- * @module components/devenv/terminal/panel/interactive/types
- */
-
-import type { ITerminalSession } from './TerminalLogsPanel.types';
-
-/**
- * Props for TerminalInteractivePanel component.
- *
- * Configures the interactive terminal with WebSocket connection,
- * session management, and lifecycle callbacks.
- */
-export interface ITerminalInteractivePanelProps {
-  /** Container/session name displayed in header */
-  containerName: string;
-
-  /** WebSocket URL for terminal connection (ws:// or wss://) */
-  wsUrl: string;
-
-  /**
-   * Terminal renderer to use.
-   * - `xterm`: xterm.js DOM/canvas renderer (default)
-   * - `restty`: GPU-accelerated WebGPU/WebGL2 renderer
-   */
-  renderer?: 'xterm' | 'restty';
-
-  /**
-   * PTY backend type.
-   * - `nodepty`: node-pty via WebSocket (default)
-   * - `webcontainer`: @webcontainer/api in-browser
-   */
-  ptyBackend?: 'nodepty' | 'webcontainer';
-
-  /** Session tabs (optional for single-session mode) */
-  sessions?: ITerminalSession[];
-
-  /** Currently active session ID */
-  activeSessionId?: string | null;
-
-  /** Callback when session tab is clicked */
-  onSessionChange?: (sessionId: string) => void;
-
-  /** Callback when session tab close is clicked */
-  onSessionClose?: (sessionId: string) => void;
-
-  /** Callback when new session button is clicked */
-  onNewSession?: () => void;
-
-  /** Lifecycle: connection established */
-  onConnect?: () => void;
-
-  /** Lifecycle: connection lost */
-  onDisconnect?: () => void;
-
-  /** Lifecycle: error occurred */
-  onError?: (error: string) => void;
-
-  /** Custom class name */
-  className?: string;
-}
-
-/**
- * Imperative handle for TerminalInteractivePanel.
- *
- * Exposes terminal control methods to parent components
- * via React.forwardRef + useImperativeHandle.
- */
-export interface ITerminalInteractivePanelRef {
-  /** Write text directly to terminal display */
-  write: (text: string) => void;
-
-  /** Clear terminal display */
-  clear: () => void;
-
-  /** Focus terminal for input */
-  focus: () => void;
-
-  /** Send raw input to backend via WebSocket */
-  sendInput: (data: string) => void;
-
-  /** Check if WebSocket is connected */
-  isConnected: () => boolean;
-}