@mks2508/mks-ui 0.5.4 → 0.5.8

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

@@ -1,112 +0,0 @@
-/**
- * TerminalPanelFooter Component.
- *
- * Footer displaying line count, byte count, and current filter.
- *
- * @module components/devenv/terminal/panel/footer
- */
-
-'use client';
-
-import type { ITerminalPanelFooterProps } from './TerminalLogsPanel.types';
-
-/**
- * Stat item styles.
- */
-const statItemStyles = 'flex items-center gap-1 text-xs text-muted-foreground';
-const statValueStyles = 'font-mono font-medium text-foreground';
-
-/**
- * TerminalPanelFooter Component.
- *
- * Displays footer with:
- * - Line count
- * - Byte count
- * - Current filter level
- * - Filtered count (if applicable)
- *
- * @example
- * ```tsx
- * <TerminalPanelFooter
- *   lineCount={1234}
- *   byteCount={45678}
- *   filterLevel="all"
- *   filteredCount={1200}
- *   totalCount={1234}
- * />
- * ```
- */
-export function TerminalPanelFooter({
-  lineCount,
-  byteCount,
-  filterLevel,
-  filteredCount,
-  totalCount,
-}: ITerminalPanelFooterProps) {
-  /**
-   * Format byte count for human-readable display.
-   */
-  const formatBytes = (bytes: number): string => {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
-  };
-
-  /**
-   * Format line count with thousands separator.
-   */
-  const formatLines = (lines: number): string => {
-    return lines.toLocaleString();
-  };
-
-  /**
-   * Get filter display label.
-   */
-  const getFilterLabel = (): string => {
-    if (filterLevel === 'all') return 'All Levels';
-    return filterLevel.toUpperCase();
-  };
-
-  return (
-    <div className="relative">
-      {/* Gradient separator */}
-      <div className="absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-border/40 to-transparent" />
-
-      <div className="flex items-center justify-between px-4 h-9 bg-background/40">
-        {/* Left: Stats */}
-        <div className="flex items-center gap-3">
-          <div className={statItemStyles}>
-            <span className="text-muted-foreground/50">Lines</span>
-            <span className={statValueStyles}>{formatLines(lineCount)}</span>
-          </div>
-          <div className="w-px h-3 bg-border/20" />
-          <div className={statItemStyles}>
-            <span className="text-muted-foreground/50">Size</span>
-            <span className={statValueStyles}>{formatBytes(byteCount)}</span>
-          </div>
-        </div>
-
-        {/* Right: Filter info */}
-        <div className="flex items-center gap-3">
-          {filteredCount !== undefined && totalCount !== undefined && filteredCount < totalCount && (
-            <>
-              <div className={statItemStyles}>
-                <span className="text-muted-foreground/50">Showing</span>
-                <span className={statValueStyles}>
-                  {formatLines(filteredCount)}<span className="text-muted-foreground/40">/{formatLines(totalCount)}</span>
-                </span>
-              </div>
-              <div className="w-px h-3 bg-border/20" />
-            </>
-          )}
-          <div className={statItemStyles}>
-            <span className="text-muted-foreground/50">Filter</span>
-            <span className={`${statValueStyles} text-primary/80`}>{getFilterLabel()}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,178 +0,0 @@
-/**
- * TerminalPanelHeader Component.
- *
- * Enhanced macOS-style header with glassmorphism, dynamic session name,
- * gradient mesh overlay, and premium glass effects.
- *
- * @module components/devenv/terminal/panel/header
- */
-
-'use client';
-
-import { motion } from 'motion/react';
-import type { ITerminalPanelHeaderProps } from './TerminalLogsPanel.types';
-import { TerminalIcon, ListIcon } from '@/react-ui/icons/lucide-animated';
-import { cn } from '@/react-ui/lib/utils';
-import { IconWrapper } from '@/react-ui/lib/icon-wrapper';
-
-/**
- * Traffic light button styles with macOS group hover behavior.
- * Dots are desaturated until the group is hovered.
- */
-const trafficLightStyles = {
-  close: 'w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-red-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(239,68,68,0.4)] hover:!bg-red-500 hover:!shadow-[0_0_12px_rgba(239,68,68,0.6)] hover:!scale-110',
-  minimize: 'w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-yellow-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(234,179,8,0.4)] hover:!bg-yellow-500 hover:!shadow-[0_0_12px_rgba(234,179,8,0.6)] hover:!scale-110',
-  maximize: 'w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-green-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(34,197,94,0.4)] hover:!bg-green-500 hover:!shadow-[0_0_12px_rgba(34,197,94,0.6)] hover:!scale-110',
-};
-
-/**
- * Segmented control button styles (macOS-style).
- */
-const segmentedButtonStyles = {
-  base: 'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all',
-  inactive: 'text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]',
-  active: 'bg-primary/20 text-primary border border-primary/30 shadow-[0_0_8px_hsla(330,85%,43%,0.15)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.25)]',
-};
-
-/**
- * Connection status color classes with glow effects.
- */
-function getStatusColor(isConnected: boolean): string {
-  if (isConnected) {
-    return 'bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)] animate-pulse';
-  }
-  return 'bg-muted-foreground/60';
-}
-
-/**
- * TerminalPanelHeader Component.
- *
- * Displays enhanced macOS-style header with:
- * - Traffic light buttons (close, minimize, maximize) with glow effects
- * - Dynamic session/container name display
- * - Connection status badge with pulse animation
- * - Gradient mesh overlay for depth
- * - Multi-layer glassmorphism effect
- * - Animated top accent line
- *
- * @example
- * ```tsx
- * <TerminalPanelHeader
- *   containerName="devenv-agent-backend"
- *   isConnected={true}
- *   onClose={() => console.log('close')}
- * />
- * ```
- */
-export function TerminalPanelHeader({
-  containerName,
-  isConnected,
-  viewMode = 'terminal',
-  onViewModeChange,
-  onClose,
-  onMinimize,
-  onMaximize,
-}: ITerminalPanelHeaderProps) {
-  return (
-    <div
-      className={cn(
-        'relative overflow-hidden',
-        'flex items-center justify-between px-4 h-12',
-        'bg-background/60',
-        'border-b border-border/30'
-      )}
-    >
-      {/* Content Layer */}
-      <div className="flex items-center justify-between w-full">
-        {/* Traffic Lights (macOS-style group hover) */}
-        <div className="group/traffic flex items-center gap-2 px-1 py-1 -mx-1 rounded-md">
-          <button
-            type="button"
-            onClick={onClose}
-            className={trafficLightStyles.close}
-            aria-label="Close"
-            title="Close"
-          />
-          <button
-            type="button"
-            onClick={onMinimize}
-            className={trafficLightStyles.minimize}
-            aria-label="Minimize"
-            title="Minimize"
-          />
-          <button
-            type="button"
-            onClick={onMaximize}
-            className={trafficLightStyles.maximize}
-            aria-label="Maximize"
-            title="Maximize"
-          />
-        </div>
-
-        {/* Container/Session Name with Icon */}
-        <div className="flex-1 flex items-center justify-center gap-2">
-          <IconWrapper
-            icon={TerminalIcon}
-            size={14}
-            className={cn(
-              'transition-all duration-500 flex-shrink-0',
-              isConnected ? 'text-primary/80' : 'text-muted-foreground/40'
-            )}
-          />
-          <h3
-            className={cn(
-              'text-sm font-mono font-medium truncate transition-all duration-500',
-              isConnected
-                ? 'text-foreground/95 drop-shadow-[0_0_8px_hsla(330,85%,43%,0.3)]'
-                : 'text-foreground/60'
-            )}
-          >
-            {containerName}
-          </h3>
-        </div>
-
-        {/* Right Side: View Mode Toggle + Connection Status */}
-        <div className="flex items-center gap-3">
-          {/* View Mode Segmented Control */}
-          <div className="flex items-center bg-background/80 rounded-lg p-0.5 border-t border-white/10 border-b border-border/50 border-x border-border/40 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15),0_0_0_1px_rgba(0,0,0,0.1)]">
-            <button
-              type="button"
-              onClick={() => onViewModeChange?.('terminal')}
-              className={cn(
-                segmentedButtonStyles.base,
-                !onViewModeChange && 'opacity-70 cursor-not-allowed',
-                viewMode === 'terminal' ? segmentedButtonStyles.active : segmentedButtonStyles.inactive
-              )}
-              title="Terminal mode - Raw logs with original ANSI colors"
-            >
-              <IconWrapper icon={TerminalIcon} size={14} />
-              <span className="hidden xs:inline">Terminal</span>
-            </button>
-            <button
-              type="button"
-              onClick={() => onViewModeChange?.('react')}
-              className={cn(
-                segmentedButtonStyles.base,
-                !onViewModeChange && 'opacity-70 cursor-not-allowed',
-                viewMode === 'react' ? segmentedButtonStyles.active : segmentedButtonStyles.inactive
-              )}
-              title="React mode - Logs with badges and syntax highlighting"
-            >
-              <IconWrapper icon={ListIcon} size={14} />
-              <span className="hidden xs:inline">List</span>
-            </button>
-          </div>
-
-          {/* Connection Status */}
-          <div className="flex items-center gap-2">
-            <div className={cn('w-2 h-2 rounded-full transition-all duration-300', getStatusColor(isConnected))} />
-            <span className="text-xs text-muted-foreground font-medium hidden sm:inline">
-              {isConnected ? 'Connected' : 'Disconnected'}
-            </span>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  );
-}

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

@@ -1,203 +0,0 @@
-/**
- * TerminalPanelToolbar Component.
- *
- * Filter toolbar with log level buttons, toggles, and action buttons.
- *
- * @module components/devenv/terminal/panel/toolbar
- */
-
-'use client';
-
-import { ArrowDownToLineIcon, ArrowUpIcon, ListIcon, SearchIcon, DeleteIcon, DownloadIcon } from '@/react-ui/icons/lucide-animated';
-import type {
-  ITerminalPanelToolbarProps,
-  ILevelFilterButton,
-  TLogLevelFilter,
-  TLogLevel,
-} from './TerminalLogsPanel.types';
-import { TerminalLogBadge } from '../components/TerminalLogBadge';
-import { IconWrapper } from '@/react-ui/lib/icon-wrapper';
-
-/**
- * Log level filter button configurations.
- */
-const LEVEL_FILTERS: ILevelFilterButton[] = [
-  { value: 'all', label: 'ALL' },
-  { value: 'trace', label: 'TRACE' },
-  { value: 'debug', label: 'DEBUG' },
-  { value: 'info', label: 'INFO' },
-  { value: 'warn', label: 'WARN' },
-  { value: 'error', label: 'ERROR' },
-  { value: 'fatal', label: 'FATAL' },
-];
-
-/**
- * Button variant styles for active and inactive states.
- */
-const buttonVariantStyles = {
-  base: 'px-3 py-1.5 rounded-md font-mono text-xs font-bold uppercase tracking-wider transition-all',
-  inactive:
-    'bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:scale-105 active:scale-95 border border-border/20',
-  active: 'bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsla(330,85%,43%,0.2)] hover:scale-105 active:scale-95',
-};
-
-/**
- * Toggle button styles.
- */
-const toggleStyles = {
-  base: 'p-2 rounded-md transition-all hover:scale-105 active:scale-95',
-  inactive: 'bg-muted/40 text-muted-foreground hover:bg-muted/60',
-  active: 'bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsla(330,85%,43%,0.2)]',
-};
-
-/**
- * Action button styles.
- */
-const actionButtonStyles = {
-  base: 'p-2 rounded-md transition-all hover:scale-105 active:scale-95',
-  default: 'bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground',
-};
-
-/**
- * TerminalPanelToolbar Component.
- *
- * Displays filter toolbar with:
- * - Log level filter buttons with badges
- * - Follow cursor toggle
- * - Line numbers toggle
- * - Action buttons (Search, Clear, Download)
- *
- * @example
- * ```tsx
- * <TerminalPanelToolbar
- *   filterLevel="all"
- *   followCursor={true}
- *   showLineNumbers={false}
- *   levelCounts={{ info: 42, warn: 3, error: 1 }}
- *   onFilterChange={(level) => setFilterLevel(level)}
- *   onFollowCursorChange={(enabled) => setFollowCursor(enabled)}
- *   onShowLineNumbersChange={(enabled) => setShowLineNumbers(enabled)}
- *   onClear={() => clearLogs()}
- *   onDownload={() => downloadLogs()}
- *   onSearch={() => openSearch()}
- * />
- * ```
- */
-export function TerminalPanelToolbar({
-  filterLevel,
-  followCursor,
-  showLineNumbers,
-  levelCounts,
-  onFilterChange,
-  onFollowCursorChange,
-  onShowLineNumbersChange,
-  onClear,
-  onDownload,
-  onSearch,
-}: ITerminalPanelToolbarProps) {
-  /**
-   * Get count for a specific log level.
-   */
-  const getCount = (level: TLogLevelFilter): number | undefined => {
-    if (level === 'all') {
-      return Object.values(levelCounts).reduce((sum, count) => (sum ?? 0) + (count ?? 0), 0);
-    }
-    return levelCounts[level];
-  };
-
-  return (
-    <div className="flex items-center gap-2 px-3 py-2 bg-muted/20 border-b border-border/20 flex-wrap">
-      {/* Log Level Filters */}
-      <div className="flex items-center gap-1">
-        {LEVEL_FILTERS.map((filter) => {
-          const count = getCount(filter.value);
-          const isActive = filterLevel === filter.value;
-          const showBadge = count !== undefined && count > 0;
-
-          return (
-            <button
-              key={filter.value}
-              type="button"
-              onClick={() => onFilterChange(filter.value)}
-              className={`${buttonVariantStyles.base} ${isActive ? buttonVariantStyles.active : buttonVariantStyles.inactive}`}
-              title={`Show ${filter.label.toLowerCase()} logs${count !== undefined ? ` (${count})` : ''}`}
-            >
-              {filter.label}
-              {showBadge && (
-                <TerminalLogBadge level={filter.value} className="ml-1 px-1 min-w-[1.25rem]">
-                  {count}
-                </TerminalLogBadge>
-              )}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Separator */}
-      <div className="w-px h-6 bg-border/30" />
-
-      {/* Toggles */}
-      <div className="flex items-center gap-1">
-        {/* Follow Cursor Toggle */}
-        <button
-          type="button"
-          onClick={() => onFollowCursorChange(!followCursor)}
-          className={`${toggleStyles.base} ${followCursor ? toggleStyles.active : toggleStyles.inactive}`}
-          title={followCursor ? 'Disable auto-scroll' : 'Enable auto-scroll'}
-        >
-          {followCursor ? (
-            <ArrowDownToLineIcon className="w-4 h-4" />
-          ) : (
-            <ArrowUpIcon className="w-4 h-4" />
-          )}
-        </button>
-
-        {/* Line Numbers Toggle */}
-        <button
-          type="button"
-          onClick={() => onShowLineNumbersChange(!showLineNumbers)}
-          className={`${toggleStyles.base} ${showLineNumbers ? toggleStyles.active : toggleStyles.inactive}`}
-          title={showLineNumbers ? 'Hide line numbers' : 'Show line numbers'}
-        >
-          <ListIcon className="w-4 h-4" />
-        </button>
-      </div>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Action Buttons */}
-      <div className="flex items-center gap-1">
-        {/* Search */}
-        <button
-          type="button"
-          onClick={onSearch}
-          className={`${actionButtonStyles.base} ${actionButtonStyles.default}`}
-          title="Search in logs (Ctrl+Shift+F)"
-        >
-          <IconWrapper icon={SearchIcon} size={16} />
-        </button>
-
-        {/* Clear */}
-        <button
-          type="button"
-          onClick={onClear}
-          className={`${actionButtonStyles.base} ${actionButtonStyles.default}`}
-          title="Clear logs"
-        >
-          <IconWrapper icon={DeleteIcon} size={16} />
-        </button>
-
-        {/* Download */}
-        <button
-          type="button"
-          onClick={onDownload}
-          className={`${actionButtonStyles.base} ${actionButtonStyles.default}`}
-          title="Download logs"
-        >
-          <IconWrapper icon={DownloadIcon} size={16} />
-        </button>
-      </div>
-    </div>
-  );
-}