@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,261 @@
+/**
+ * TerminalSettingsPopover Component.
+ *
+ * Gear icon popover for global terminal settings:
+ * renderer (xterm/restty), theme (458 built-in), PTY backend,
+ * and font size. Reads and writes via useTerminalSettings hook.
+ *
+ * @module components/devenv/terminal/panel/TerminalSettingsPopover
+ */
+
+'use client';
+
+import { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup } from '@/react-ui/ui/Popover';
+import { Separator } from '@/react-ui/ui/Separator';
+import { SettingsIcon } from '@/react-ui/icons/lucide-animated';
+import { useTerminalSettings } from '../hooks/useTerminalSettings';
+import { TerminalThemeSelector } from './TerminalThemeSelector';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Action button base styles for the trigger icon.
+ */
+const triggerBtnStyles =
+  'h-8 w-8 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0';
+
+/**
+ * Segmented control button styles.
+ */
+const segmentedBase = 'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all';
+const segmentedInactive = 'text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]';
+const segmentedActive = '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)]';
+
+/**
+ * Min/max font size bounds.
+ */
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+
+/**
+ * Small control button for font size +/-.
+ */
+const fontBtnStyles =
+  'h-7 w-7 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:pointer-events-none';
+
+/**
+ * TerminalSettingsPopover Component.
+ *
+ * Renders a settings gear icon that opens a popover with
+ * terminal configuration options. Reads settings from
+ * `useTerminalSettings` — no prop drilling needed.
+ *
+ * @example
+ * ```tsx
+ * // In action bar:
+ * <TerminalSettingsPopover />
+ * ```
+ */
+export function TerminalSettingsPopover() {
+  const {
+    settings,
+    setRenderer,
+    setPtyBackend,
+    setResttyThemeName,
+    setFontSize,
+    setCrtEffect,
+    setDebugPanel,
+    resetToDefaults,
+  } = useTerminalSettings();
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <button type="button" className={triggerBtnStyles} title="Terminal settings">
+          <SettingsIcon size={16} />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverPortal>
+        <PopoverPositioner align="end" sideOffset={6}>
+          <PopoverPopup className="w-72 p-0 glass-subtle">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-4 py-3">
+          <SettingsIcon size={14} className="text-muted-foreground" />
+          <span className="text-sm font-medium text-foreground">Terminal Settings</span>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Renderer */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            Renderer
+          </label>
+          <div className="flex items-center gap-1 bg-muted/10 rounded-lg p-0.5">
+            <button
+              type="button"
+              onClick={() => setRenderer('xterm')}
+              className={cn(segmentedBase, settings.renderer === 'xterm' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              xterm
+            </button>
+            <button
+              type="button"
+              onClick={() => setRenderer('restty')}
+              className={cn(segmentedBase, settings.renderer === 'restty' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              restty
+            </button>
+          </div>
+        </div>
+
+        {/* Theme (restty only) */}
+        {settings.renderer === 'restty' && (
+          <>
+            <Separator className="bg-border/30" />
+            <div className="px-4 py-3 space-y-2">
+              <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+                Theme
+              </label>
+              <TerminalThemeSelector
+                currentTheme={settings.resttyThemeName}
+                onThemeChange={setResttyThemeName}
+              />
+            </div>
+          </>
+        )}
+
+        <Separator className="bg-border/30" />
+
+        {/* PTY Backend */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            PTY Backend
+          </label>
+          <div className="flex items-center gap-1 bg-muted/10 rounded-lg p-0.5">
+            <button
+              type="button"
+              onClick={() => setPtyBackend('nodepty')}
+              className={cn(segmentedBase, settings.ptyBackend === 'nodepty' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              nodepty
+            </button>
+            <button
+              type="button"
+              onClick={() => setPtyBackend('webcontainer')}
+              className={cn(segmentedBase, settings.ptyBackend === 'webcontainer' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              webcontainer
+            </button>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Font Size */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            Font Size
+          </label>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setFontSize(settings.fontSize - 1)}
+              className={fontBtnStyles}
+              disabled={settings.fontSize <= MIN_FONT_SIZE}
+              title="Decrease font size"
+            >
+              <span className="text-sm font-bold">&minus;</span>
+            </button>
+            <span className="text-sm font-mono text-foreground w-8 text-center">
+              {settings.fontSize}
+            </span>
+            <button
+              type="button"
+              onClick={() => setFontSize(settings.fontSize + 1)}
+              className={fontBtnStyles}
+              disabled={settings.fontSize >= MAX_FONT_SIZE}
+              title="Increase font size"
+            >
+              <span className="text-sm font-bold">+</span>
+            </button>
+            <span className="text-[10px] font-mono text-muted-foreground/50 ml-auto">px</span>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* CRT Effect */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            CRT Effect
+          </label>
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              Scanlines, bloom &amp; vignette
+            </span>
+            <button
+              type="button"
+              onClick={() => setCrtEffect(!settings.crtEffect)}
+              className={cn(
+                'relative w-9 h-5 rounded-full transition-colors',
+                settings.crtEffect
+                  ? 'bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]'
+                  : 'bg-muted/30'
+              )}
+            >
+              <span className={cn(
+                'absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all',
+                settings.crtEffect ? 'left-[18px]' : 'left-0.5'
+              )} />
+            </button>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Debug Panel */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            Debug Panel
+          </label>
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              GPU, FPS, grid &amp; connection info
+            </span>
+            <button
+              type="button"
+              onClick={() => setDebugPanel(!settings.debugPanel)}
+              className={cn(
+                'relative w-9 h-5 rounded-full transition-colors',
+                settings.debugPanel
+                  ? 'bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]'
+                  : 'bg-muted/30'
+              )}
+            >
+              <span className={cn(
+                'absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all',
+                settings.debugPanel ? 'left-[18px]' : 'left-0.5'
+              )} />
+            </button>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Reset */}
+        <div className="px-4 py-3">
+          <button
+            type="button"
+            onClick={resetToDefaults}
+            className="w-full h-8 rounded-md text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors"
+          >
+            Reset to Defaults
+          </button>
+        </div>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </Popover>
+  );
+}

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