@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,248 @@
+/**
+ * TerminalThemeSelector Component.
+ *
+ * Searchable dropdown for restty's 458 built-in terminal themes.
+ * Uses Popover for the dropdown UI with glassmorphism styling
+ * matching the existing TerminalFilterDropdown pattern.
+ *
+ * @module components/devenv/terminal/panel/TerminalThemeSelector
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup } from '@/react-ui/ui/Popover';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Props for the TerminalThemeSelector component.
+ */
+export interface ITerminalThemeSelectorProps {
+  /** Currently active theme name */
+  currentTheme: string;
+
+  /** Callback when user selects a new theme */
+  onThemeChange: (themeName: string) => void;
+}
+
+/**
+ * Favorite themes displayed at the top of the list.
+ */
+const FAVORITE_THEMES = [
+  'Synthwave Alpha',
+  'Synthwave',
+  'Dracula',
+  'Nord',
+  'One Dark',
+  'Tokyo Night',
+  'Catppuccin Mocha',
+  'Gruvbox Dark',
+];
+
+/**
+ * Action button base styles (matches TerminalInteractivePanel pattern).
+ */
+const triggerStyles =
+  'h-8 px-2.5 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1.5 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0 border border-border/30';
+
+/**
+ * TerminalThemeSelector Component.
+ *
+ * Searchable dropdown for restty's built-in theme catalog.
+ * Favorites are pinned to the top, followed by alphabetically
+ * sorted themes. Search filters by case-insensitive substring.
+ *
+ * @example
+ * ```tsx
+ * <TerminalThemeSelector
+ *   currentTheme="Synthwave Alpha"
+ *   onThemeChange={(name) => setResttyThemeName(name)}
+ * />
+ * ```
+ */
+export function TerminalThemeSelector({ currentTheme, onThemeChange }: ITerminalThemeSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [themeNames, setThemeNames] = useState<string[]>([]);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * Load the theme catalog from restty on first open.
+   */
+  useEffect(() => {
+    if (!open || themeNames.length > 0) return;
+
+    import('restty').then(({ listBuiltinThemeNames }) => {
+      const names = listBuiltinThemeNames();
+      if (Array.isArray(names)) {
+        setThemeNames(names.sort((a: string, b: string) => a.localeCompare(b)));
+      }
+    }).catch(() => {
+      // restty not available — show favorites only
+    });
+  }, [open, themeNames.length]);
+
+  /**
+   * Focus search input on open.
+   */
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    } else {
+      setSearch('');
+    }
+  }, [open]);
+
+  /**
+   * Filter and group themes based on search query.
+   */
+  const { favorites, others } = useMemo(() => {
+    const query = search.toLowerCase().trim();
+    const allNames = themeNames.length > 0 ? themeNames : FAVORITE_THEMES;
+
+    const favSet = new Set(FAVORITE_THEMES);
+
+    const filteredFavorites = FAVORITE_THEMES.filter(
+      (name) => !query || name.toLowerCase().includes(query)
+    );
+
+    const filteredOthers = allNames.filter(
+      (name) => !favSet.has(name) && (!query || name.toLowerCase().includes(query))
+    );
+
+    return { favorites: filteredFavorites, others: filteredOthers };
+  }, [search, themeNames]);
+
+  /**
+   * Handle theme selection.
+   */
+  const handleSelect = useCallback(
+    (themeName: string) => {
+      onThemeChange(themeName);
+      setOpen(false);
+    },
+    [onThemeChange]
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>
+        <button type="button" className={triggerStyles} title="Select terminal theme">
+          <span className="truncate max-w-[140px]">{currentTheme}</span>
+          <svg
+            className={cn('w-3 h-3 transition-transform flex-shrink-0', open && 'rotate-180')}
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path d="M3 5l3 3 3-3" />
+          </svg>
+        </button>
+      </PopoverTrigger>
+
+      <PopoverPortal>
+        <PopoverPositioner align="start" sideOffset={6}>
+          <PopoverPopup className="w-64 p-0 glass-subtle rounded-lg">
+        {/* Search */}
+        <div className="p-2 border-b border-border/30">
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search themes..."
+            className="w-full h-8 px-2.5 rounded-md bg-muted/20 border border-border/30 text-xs font-mono text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 transition-colors"
+          />
+        </div>
+
+        {/* Theme list */}
+        <div className="max-h-[300px] overflow-y-auto py-1">
+          {/* Favorites section */}
+          {favorites.length > 0 && (
+            <>
+              <div className="px-3 py-1.5">
+                <span className="text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider">
+                  Favorites
+                </span>
+              </div>
+              {favorites.map((name) => (
+                <ThemeOption
+                  key={`fav-${name}`}
+                  name={name}
+                  isActive={name === currentTheme}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </>
+          )}
+
+          {/* All themes section */}
+          {others.length > 0 && (
+            <>
+              {favorites.length > 0 && (
+                <div className="mx-2 my-1 h-px bg-border/20" />
+              )}
+              <div className="px-3 py-1.5">
+                <span className="text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider">
+                  All Themes ({others.length})
+                </span>
+              </div>
+              {others.map((name) => (
+                <ThemeOption
+                  key={name}
+                  name={name}
+                  isActive={name === currentTheme}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </>
+          )}
+
+          {/* No results */}
+          {favorites.length === 0 && others.length === 0 && (
+            <div className="px-3 py-4 text-center">
+              <span className="text-xs font-mono text-muted-foreground/50">
+                No themes match &quot;{search}&quot;
+              </span>
+            </div>
+          )}
+        </div>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </Popover>
+  );
+}
+
+/**
+ * Individual theme option in the dropdown list.
+ */
+function ThemeOption({
+  name,
+  isActive,
+  onSelect,
+}: {
+  name: string;
+  isActive: boolean;
+  onSelect: (name: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(name)}
+      className={cn(
+        'w-full text-left px-3 py-1.5 text-xs font-mono transition-colors',
+        'hover:bg-muted/20',
+        isActive
+          ? 'text-primary bg-primary/10'
+          : 'text-foreground/80'
+      )}
+    >
+      {isActive && (
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary mr-2 align-middle" />
+      )}
+      {name}
+    </button>
+  );
+}

package/src/react-ui/blocks/Terminal/panel/index.ts

@@ -0,0 +1,72 @@
+/**
+ * Terminal Panel Module.
+ *
+ * Complete terminal panel with session tabs, header, filter tabs,
+ * action bar, display, and footer. Ghostty-inspired design with
+ * glassmorphism effects and premium visual details.
+ *
+ * @module components/devenv/terminal/panel
+ */
+
+// Main components
+export { TerminalLogsPanel } from './TerminalLogsPanel';
+export { TerminalInteractivePanel } from './TerminalInteractivePanel';
+export { TerminalInteractivePanelRestty } from './TerminalInteractivePanelRestty';
+export { TerminalPanelChrome } from './TerminalPanelChrome';
+
+// Settings UI
+export { TerminalSettingsPopover } from './TerminalSettingsPopover';
+export { TerminalThemeSelector } from './TerminalThemeSelector';
+
+// Debug panel
+export { TerminalDebugPanel, type ITerminalDebugPanelProps } from './TerminalDebugPanel';
+
+// Shared constants (noise texture, scroll styles)
+export { NOISE_TEXTURE_SVG, terminalScrollStyles } from './TerminalPanelChrome';
+
+// Sub-components
+export { TerminalPanelHeader } from './TerminalPanelHeader';
+export { TerminalPanelFooter } from './TerminalPanelFooter';
+
+// Ghostty-inspired components
+export { TerminalSessionTabs } from './TerminalSessionTabs';
+export { TerminalFilterTabs } from './TerminalFilterTabs';
+export { TerminalFilterDropdown } from './TerminalFilterDropdown';
+export { TerminalSessionControl } from './TerminalSessionControl';
+
+// React viewer components
+export { LogLinesViewer } from './LogLinesViewer';
+
+// Types - Chrome
+export type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
+
+// Types - Interactive panel
+export type {
+  ITerminalInteractivePanelProps,
+  ITerminalInteractivePanelRef,
+} from './TerminalInteractivePanel.types';
+
+// Types - Theme selector
+export type { ITerminalThemeSelectorProps } from './TerminalThemeSelector';
+
+// Types - Logs panel and sub-components
+export type {
+  ITerminalLogsPanelProps,
+  ITerminalLogsPanelRef,
+  ITerminalPanelHeaderProps,
+  ITerminalPanelToolbarProps,
+  ITerminalPanelFooterProps,
+  ITerminalSession,
+  ITerminalSessionTabsProps,
+  ITerminalFilterTabsProps,
+  ITerminalFilterDropdownProps,
+  ITerminalSessionControlProps,
+  TLogLevelFilter,
+  ILevelFilterButton,
+  TTerminalAction,
+  TLogLevel,
+} from './TerminalLogsPanel.types';
+
+export type {
+  ILogLinesViewerProps,
+} from './LogLinesViewer';

package/src/react-ui/blocks/Terminal/panel/terminal-filter-dropdown.module.css

@@ -0,0 +1,59 @@
+/**
+ * TerminalFilterDropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for dropdown placement.
+ * Button acts as anchor, dropdown is positioned relative to it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
+ */
+
+/* Trigger button - acts as CSS anchor */
+.triggerButton {
+  anchor-name: --filter-dropdown-anchor;
+}
+
+/* Dropdown menu - anchored to trigger button */
+.dropdownMenu {
+  position-anchor: --filter-dropdown-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 180px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.dropdownMenu[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .dropdownMenu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .dropdownMenu[data-open="true"] {
+    display: block;
+  }
+}

package/src/react-ui/blocks/Terminal/panel/terminal-session-tabs.module.css

@@ -0,0 +1,59 @@
+/**
+ * TerminalSessionTabs Dropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for the "add container" dropdown.
+ * The + button acts as anchor, dropdown is positioned below it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-session-tabs/styles
+ */
+
+/* + button - acts as CSS anchor */
+.addButton {
+  anchor-name: --session-tabs-add-anchor;
+}
+
+/* Container dropdown - anchored to + button */
+.containerDropdown {
+  position-anchor: --session-tabs-add-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 200px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.containerDropdown[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .containerDropdown {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .containerDropdown[data-open="true"] {
+    display: block;
+  }
+}

package/src/react-ui/blocks/Terminal/parsing/BadgeFormatter.ts

@@ -0,0 +1,180 @@
+/**
+ * Badge formatter for terminal logs.
+ *
+ * Creates stylized badges using standard ANSI escape codes
+ * compatible with xterm.js.
+ *
+ * @module components/devenv/terminal/parsing/badge
+ */
+
+import type { TLogLevel } from './LogParser.types';
+
+/**
+ * ANSI color combinations for badges.
+ *
+ * Uses standard 16-color palette for maximum compatibility.
+ */
+const BADGE_COLORS = {
+  info: '\x1b[44m\x1b[97m',      // Blue bg, bright white fg
+  warn: '\x1b[43m\x1b[30m',      // Yellow bg, black fg
+  error: '\x1b[41m\x1b[97m',     // Red bg, bright white fg
+  debug: '\x1b[46m\x1b[30m',     // Cyan bg, black fg
+  fatal: '\x1b[45m\x1b[97m',     // Magenta bg, bright white fg
+  trace: '\x1b[47m\x1b[30m',     // White bg, black fg
+  unknown: '\x1b[47m\x1b[30m',   // White bg, black fg
+} as const;
+
+/**
+ * Tag badge colors (cyan on gray).
+ */
+const TAG_COLORS = '\x1b[90m\x1b[36m'; // Dim bg, cyan fg
+
+/**
+ * Timestamp colors (gray).
+ */
+const TIMESTAMP_COLORS = '\x1b[90m\x1b[37m'; // Dim bg, white fg
+
+/**
+ * Reset code.
+ */
+const RESET = '\x1b[0m';
+
+/**
+ * Bold modifier.
+ */
+const BOLD = '\x1b[1m';
+
+/**
+ * Level badge icons.
+ */
+const LEVEL_ICONS: Record<TLogLevel, string> = {
+  info: 'I',
+  warn: 'W',
+  error: 'E',
+  fatal: 'F',
+  debug: 'D',
+  trace: 'T',
+  unknown: '?',
+};
+
+/**
+ * Badge formatter class.
+ *
+ * Creates simple ANSI badges for log levels, tags, and timestamps.
+ *
+ * @example
+ * ```ts
+ * const formatter = new BadgeFormatter();
+ * const infoBadge = formatter.createLevelBadge('info');
+ * // Returns: '\x1b[1m\x1b[44m\x1b[97m[ INFO ]\x1b[0m'
+ * ```
+ */
+export class BadgeFormatter {
+  /**
+   * Create a level badge.
+   *
+   * Badge format: [ INFO ] with background color
+   *
+   * @param level - Log level
+   * @returns ANSI-formatted level badge string
+   */
+  createLevelBadge(level: TLogLevel): string {
+    const colors = BADGE_COLORS[level] ?? BADGE_COLORS.unknown;
+    const icon = LEVEL_ICONS[level] ?? LEVEL_ICONS.unknown;
+    const label = level.toUpperCase().padEnd(4); // "INFO", "WARN", etc.
+
+    // Badge: [INFO] with background color
+    return `${BOLD}${colors}[${icon}${label}]${RESET}`;
+  }
+
+  /**
+   * Create a timestamp badge for end of line.
+   *
+   * Badge format: " 22:55:20" aligned to right
+   *
+   * @param timestamp - Display timestamp string
+   * @returns ANSI-formatted timestamp string
+   */
+  createTimestampBadge(timestamp: string): string {
+    if (!timestamp) return '';
+
+    // Truncate to HH:MM:SS format for consistent width
+    const timeOnly = timestamp.includes('.')
+      ? timestamp.split('.')[0] // 22:55:20.916 -> 22:55:20
+      : timestamp;
+
+    // Pad to 12 chars for right alignment visual
+    const padded = timeOnly.padStart(12);
+
+    return `${TIMESTAMP_COLORS}${padded}${RESET}`;
+  }
+
+  /**
+   * Create a tag badge.
+   *
+   * Badge format: [TAG] with subtle styling
+   *
+   * @param tag - Tag string
+   * @returns ANSI-formatted tag badge string
+   */
+  createTagBadge(tag: string): string {
+    // Truncate long tags
+    const displayTag = tag.length > 12 ? tag.slice(0, 9) + '...' : tag;
+
+    return `${TAG_COLORS}[${displayTag}]${RESET}`;
+  }
+
+  /**
+   * Create multiple tag badges joined with space.
+   *
+   * @param tags - Array of tag strings
+   * @returns ANSI-formatted tag badges string
+   */
+  createTagBadges(tags: string[]): string {
+    if (!tags || tags.length === 0) return '';
+    return tags.map(tag => this.createTagBadge(tag)).join('');
+  }
+
+  /**
+   * Create a status indicator.
+   *
+   * @param status - Status type
+   * @returns ANSI-formatted status indicator
+   */
+  createStatusIndicator(status: 'success' | 'warning' | 'error' | 'info'): string {
+    const colors = {
+      success: '\x1b[42m\x1b[97m', // Green
+      warning: '\x1b[43m\x1b[30m', // Yellow
+      error: '\x1b[41m\x1b[97m',   // Red
+      info: '\x1b[44m\x1b[97m',    // Blue
+    } as const;
+
+    const symbols = {
+      success: '✓',
+      warning: '⚠',
+      error: '✖',
+      info: 'i',
+    } as const;
+
+    return `${colors[status]} ${symbols[status]} ${RESET}`;
+  }
+
+  /**
+   * Create a box badge (multi-line).
+   *
+   * @param text - Text to display
+   * @param level - Log level for color
+   * @returns Multi-line ANSI box
+   */
+  createBoxBadge(text: string, level: TLogLevel = 'info'): string {
+    const colors = BADGE_COLORS[level] ?? BADGE_COLORS.unknown;
+    const padding = 2;
+    const width = text.length + padding * 2 + 2;
+
+    const topBorder = `\x1b[90m┌${'─'.repeat(width)}┐${RESET}`;
+    const middle = `${colors}│${' '.repeat(padding)}${text}${' '.repeat(padding)}│${RESET}`;
+    const bottomBorder = `\x1b[90m└${'─'.repeat(width)}┘${RESET}`;
+
+    return `${topBorder}\r\n${middle}\r\n${bottomBorder}`;
+  }
+}