@mks2508/mks-ui 0.5.4 → 0.5.8

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

@@ -1,261 +0,0 @@
-/**
- * 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

@@ -1,248 +0,0 @@
-/**
- * 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

@@ -1,72 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-/**
- * 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;
-  }
-}