@lokvis/ui-react 0.2.1 → 0.4.1

package/src/components/StatusBar.tsx

@@ -4,179 +4,172 @@
  * 紧凑单行:左侧状态指示 + 当前工具 + 进度,右侧在线状态 + 资源统计 + 存储配额。
  *
  * W9.6 新增:
- *   - 当前选中工具名(从 selectedNode 取)
- *   - 执行进度(已完成节点数 / 总节点数)
- *   - 在线状态(navigator.onLine + 事件监听)
+ * - 当前选中工具名(从 selectedNode 取)
+ * - 执行进度(已完成节点数 / 总节点数)
+ * - 在线状态(navigator.onLine + 事件监听)
  */
 
 import * as React from 'react';
 import { useWorkspaceStore } from '../store/index.js';
 import { useWorkflowProgress } from '../hooks/useWorkflowProgress.js';
+import { formatBytes } from '../utils.js';
 
 export interface StatusBarProps {
-  className?: string;
-}
-
-/** 格式化字节数为人类可读(KB/MB/GB) */
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+ className?: string;
 }
 
 /** useOnlineStatus - 监听 navigator.onLine + online/offline 事件(W9.6) */
 function useOnlineStatus(): boolean {
-  const [online, setOnline] = React.useState<boolean>(() =>
-    typeof navigator !== 'undefined' ? navigator.onLine : true
-  );
-  React.useEffect(() => {
-    const onOnline = () => setOnline(true);
-    const onOffline = () => setOnline(false);
-    window.addEventListener('online', onOnline);
-    window.addEventListener('offline', onOffline);
-    return () => {
-      window.removeEventListener('online', onOnline);
-      window.removeEventListener('offline', onOffline);
-    };
-  }, []);
-  return online;
+ const [online, setOnline] = React.useState<boolean>(() =>
+ typeof navigator !== 'undefined' ? navigator.onLine : true
+ );
+ React.useEffect(() => {
+ const onOnline = () => setOnline(true);
+ const onOffline = () => setOnline(false);
+ window.addEventListener('online', onOnline);
+ window.addEventListener('offline', onOffline);
+ return () => {
+ window.removeEventListener('online', onOnline);
+ window.removeEventListener('offline', onOffline);
+ };
+ }, []);
+ return online;
 }
 
 export function StatusBar({ className = '' }: StatusBarProps) {
-  const statusMessage = useWorkspaceStore((s) => s.statusMessage);
-  const error = useWorkspaceStore((s) => s.error);
-  const running = useWorkspaceStore((s) => s.running);
-  const assets = useWorkspaceStore((s) => s.assets);
-  const capabilities = useWorkspaceStore((s) => s.capabilities);
-  const nodes = useWorkspaceStore((s) => s.nodes);
-  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
-  const storageUsage = useWorkspaceStore((s) => s.storageUsage);
-  const setError = useWorkspaceStore((s) => s.setError);
-  const online = useOnlineStatus();
+ const statusMessage = useWorkspaceStore((s) => s.statusMessage);
+ const error = useWorkspaceStore((s) => s.error);
+ const running = useWorkspaceStore((s) => s.running);
+ const assets = useWorkspaceStore((s) => s.assets);
+ const capabilities = useWorkspaceStore((s) => s.capabilities);
+ const nodes = useWorkspaceStore((s) => s.nodes);
+ const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+ const storageUsage = useWorkspaceStore((s) => s.storageUsage);
+ const setError = useWorkspaceStore((s) => s.setError);
+ const online = useOnlineStatus();
 
-  // W9.6 当前选中工具名
-  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+ // W9.6 当前选中工具名
+ const selectedNode = nodes.find((n) => n.id === selectedNodeId);
 
-  // W9.6 执行进度(抽取到共享 hook,与 ProgressBar 共用,避免重复逻辑)
-  const { total: totalNodes, done: doneNodes, pct: progressPct } = useWorkflowProgress();
+ // W9.6 执行进度(抽取到共享 hook,与 ProgressBar 共用,避免重复逻辑)
+ const { total: totalNodes, done: doneNodes, pct: progressPct } = useWorkflowProgress();
 
-  // W6.7 存储配额压力:>=95% 红(临界),>=80% 琥珀(警告),其余正常
-  const ratio = storageUsage ? storageUsage.usage / storageUsage.quota : 0;
-  const storageCritical = ratio >= 0.95;
-  const storageWarning = ratio >= 0.8 && !storageCritical;
+ // W6.7 存储配额压力:>=95% 红(临界),>=80% 琥珀(警告),其余正常
+ const ratio = storageUsage ? storageUsage.usage / storageUsage.quota : 0;
+ const storageCritical = ratio >= 0.95;
+ const storageWarning = ratio >= 0.8 && !storageCritical;
 
-  return (
-    <footer
-      className={`flex h-7 shrink-0 items-center justify-between border-t border-zinc-200 bg-zinc-50 px-3 dark:border-zinc-800 dark:bg-zinc-950 ${className}`}
-    >
-      {/* Left: Status — m5 加 aria-live,屏幕阅读器播报状态变化 */}
-      <div
-        className="flex items-center gap-2 min-w-0"
-        role="status"
-        aria-live="polite"
-      >
-        <span className="flex items-center gap-1.5">
-          <span
-            className={`h-1.5 w-1.5 rounded-full shrink-0 ${
-              error
-                ? 'bg-red-500'
-                : running
-                ? 'bg-amber-500 animate-pulse'
-                : 'bg-emerald-500'
-            }`}
-            aria-hidden="true"
-          />
-          <span className={`truncate text-[10px] ${error ? 'text-red-500' : 'text-zinc-500'}`}>
-            {statusMessage}
-          </span>
-        </span>
+ return (
+ <footer
+ className={`flex h-[var(--lokvis-statusbar-h)] shrink-0 items-center justify-between border-t border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-3 ${className}`}
+ >
+ {/* Left: Status — m5 加 aria-live,屏幕阅读器播报状态变化 */}
+ <div
+ className="flex items-center gap-2 min-w-0"
+ role="status"
+ aria-live="polite"
+ >
+ <span className="flex items-center gap-1.5">
+ <span
+ className={`h-1.5 w-1.5 rounded-full shrink-0 ${
+ error
+ ? 'bg-[var(--lokvis-danger)]'
+ : running
+ ? 'bg-[var(--lokvis-warning)] animate-pulse'
+ : 'bg-[var(--lokvis-success)]'
+ }`}
+ aria-hidden="true"
+ />
+ <span className={`truncate text-[10px] ${error ? 'text-[var(--lokvis-danger)]' : 'text-[var(--lokvis-fg-muted)]'}`}>
+ {statusMessage}
+ </span>
+ </span>
 
-        {/* W9.6 当前工具名 */}
-        {selectedNode && (
-          <>
-            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">·</span>
-            <span className="shrink-0 font-mono text-[10px] text-indigo-500 dark:text-indigo-400 truncate max-w-[120px]">
-              {selectedNode.capability}
-            </span>
-          </>
-        )}
+ {/* W9.6 当前工具名 */}
+ {selectedNode && (
+ <>
+ <span className="text-[var(--lokvis-fg-subtle)]" aria-hidden="true">·</span>
+ <span className="shrink-0 font-mono text-[10px] text-[var(--lokvis-primary)] truncate max-w-[120px]">
+ {selectedNode.capability}
+ </span>
+ </>
+ )}
 
-        {/* W9.6 执行进度 */}
-        {running && totalNodes > 0 && (
-          <>
-            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">·</span>
-            <span className="shrink-0 tabular-nums text-[10px] text-amber-600 dark:text-amber-400">
-              {doneNodes}/{totalNodes} ({progressPct}%)
-            </span>
-          </>
-        )}
+ {/* W9.6 执行进度 */}
+ {running && totalNodes > 0 && (
+ <>
+ <span className="text-[var(--lokvis-fg-subtle)]" aria-hidden="true">·</span>
+ <span className="shrink-0 tabular-nums text-[10px] text-[var(--lokvis-warning)]">
+ {doneNodes}/{totalNodes} ({progressPct}%)
+ </span>
+ </>
+ )}
 
-        {error && (
-          <button
-            type="button"
-            onClick={() => setError(null)}
-            className="shrink-0 text-[10px] text-red-500 underline decoration-red-300 hover:text-red-600 dark:decoration-red-800"
-          >
-            dismiss
-          </button>
-        )}
-      </div>
+ {error && (
+ <button
+ type="button"
+ onClick={() => setError(null)}
+ className="shrink-0 text-[10px] text-[var(--lokvis-danger)] underline decoration-[var(--lokvis-danger)]/40 hover:text-[var(--lokvis-danger)]"
+ >
+ dismiss
+ </button>
+ )}
+ </div>
 
-      {/* Right: Stats */}
-      <div className="flex items-center gap-3 shrink-0 text-[10px] text-zinc-400 tabular-nums">
-        {/* W9.6 在线状态 */}
-        <span
-          className={`flex items-center gap-1 ${online ? 'text-emerald-500' : 'text-amber-500'}`}
-          title={online ? 'Online' : 'Offline — running locally, no upload needed'}
-          aria-label={online ? 'Online' : 'Offline — files still processed locally'}
-        >
-          <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-emerald-500' : 'bg-amber-500'}`} aria-hidden="true" />
-          {online ? 'Online' : 'Offline'}
-        </span>
-        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
+ {/* Right: Stats */}
+ <div className="flex items-center gap-3 shrink-0 text-[10px] text-[var(--lokvis-fg-subtle)] tabular-nums">
+ {/* W9.6 在线状态 */}
+ <span
+ className={`flex items-center gap-1 ${online ? 'text-[var(--lokvis-success)]' : 'text-[var(--lokvis-warning)]'}`}
+ title={online ? 'Online' : 'Offline — running locally, no upload needed'}
+ aria-label={online ? 'Online' : 'Offline — files still processed locally'}
+ >
+ <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-[var(--lokvis-success)]' : 'bg-[var(--lokvis-warning)]'}`} aria-hidden="true" />
+ {online ? 'Online' : 'Offline'}
+ </span>
+ <span className="text-[var(--lokvis-fg-subtle)]" aria-hidden="true">|</span>
 
-        {/* W6.7 存储配额:接近上限时变色警告;m5 加 aria-label 让屏幕阅读器播报告警 */}
-        {storageUsage && (
-          <>
-            <span
-              className={`flex items-center gap-1 ${
-                storageCritical
-                  ? 'text-red-500 font-semibold'
-                  : storageWarning
-                  ? 'text-amber-500'
-                  : 'text-zinc-400'
-              }`}
-              title={
-                storageCritical
-                  ? `Storage almost full (${Math.round(ratio * 100)}%) — clean up to free space`
-                  : storageWarning
-                  ? `Storage nearing limit (${Math.round(ratio * 100)}%)`
-                  : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)}`
-              }
-              aria-label={
-                storageCritical
-                  ? `Storage critical: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent. Clean up to free space.`
-                  : storageWarning
-                  ? `Storage warning: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent.`
-                  : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used.`
-              }
-              aria-live={storageCritical ? 'assertive' : 'polite'}
-            >
-              {(storageCritical || storageWarning) && (
-                <span className="text-[9px]" aria-hidden="true">⚠</span>
-              )}
-              {formatBytes(storageUsage.usage)} / {formatBytes(storageUsage.quota)}
-            </span>
-            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
-          </>
-        )}
-        <span>{assets.length} asset{assets.length !== 1 ? 's' : ''}</span>
-        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
-        <span>{capabilities.length} cap{capabilities.length !== 1 ? 's' : ''}</span>
-        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
-        <span>{nodes.length} step{nodes.length !== 1 ? 's' : ''}</span>
-      </div>
-    </footer>
-  );
+ {/* W6.7 存储配额:接近上限时变色警告;m5 加 aria-label 让屏幕阅读器播报告警 */}
+ {storageUsage && (
+ <>
+ <span
+ className={`flex items-center gap-1 ${
+ storageCritical
+ ? 'text-[var(--lokvis-danger)] font-semibold'
+ : storageWarning
+ ? 'text-[var(--lokvis-warning)]'
+ : 'text-[var(--lokvis-fg-subtle)]'
+ }`}
+ title={
+ storageCritical
+ ? `Storage almost full (${Math.round(ratio * 100)}%) — clean up to free space`
+ : storageWarning
+ ? `Storage nearing limit (${Math.round(ratio * 100)}%)`
+ : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)}`
+ }
+ aria-label={
+ storageCritical
+ ? `Storage critical: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent. Clean up to free space.`
+ : storageWarning
+ ? `Storage warning: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent.`
+ : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used.`
+ }
+ aria-live={storageCritical ? 'assertive' : 'polite'}
+ >
+ {(storageCritical || storageWarning) && (
+ <span className="text-[9px]" aria-hidden="true">⚠</span>
+ )}
+ {formatBytes(storageUsage.usage)} / {formatBytes(storageUsage.quota)}
+ </span>
+ <span className="text-[var(--lokvis-fg-subtle)]" aria-hidden="true">|</span>
+ </>
+ )}
+ <span>{assets.length} asset{assets.length !== 1 ? 's' : ''}</span>
+ <span className="text-[var(--lokvis-fg-subtle)]" aria-hidden="true">|</span>
+ <span>{capabilities.length} cap{capabilities.length !== 1 ? 's' : ''}</span>
+ <span className="text-[var(--lokvis-fg-subtle)]" aria-hidden="true">|</span>
+ <span>{nodes.length} step{nodes.length !== 1 ? 's' : ''}</span>
+ </div>
+ </footer>
+ );
 }

package/src/components/StatusDot.tsx

@@ -0,0 +1,27 @@
+/**
+ * StatusDot - 节点状态指示圆点
+ *
+ * 根据 status 显示不同颜色,running 时带 pulse 动画。
+ * PipelineBar 与 WorkflowEditor 共享此组件。
+ */
+export interface StatusDotProps {
+  /** 节点状态(pending/running/success/failed/idle) */
+  status: string;
+}
+
+export function StatusDot({ status }: StatusDotProps) {
+  const color =
+    status === 'running'
+      ? 'bg-[var(--lokvis-warning)]'
+      : status === 'success'
+      ? 'bg-[var(--lokvis-success)]'
+      : status === 'failed'
+      ? 'bg-[var(--lokvis-danger)]'
+      : status === 'pending'
+      ? 'bg-[var(--lokvis-fg-subtle)]'
+      : 'bg-[var(--lokvis-fg-subtle)]';
+
+  const animate = status === 'running' ? 'animate-pulse' : '';
+
+  return <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${color} ${animate}`} />;
+}

package/src/components/ThemeToggle.tsx

@@ -5,10 +5,10 @@
  * 与 `tokens.css` 的 `.dark` / `.light` 类双触发机制对齐。
  *
  * 交互:
- *   - 左键单击:在 light / dark 之间切换(基于当前 resolvedTheme 决定下一态)
- *   - 右键单击:弹出菜单(light / dark / system 三态)
- *   - ESC:关闭菜单
- *   - 点击菜单外部:关闭菜单
+ * - 左键单击:在 light / dark 之间切换(基于当前 resolvedTheme 决定下一态)
+ * - 右键单击:弹出菜单(light / dark / system 三态)
+ * - ESC:关闭菜单
+ * - 点击菜单外部:关闭菜单
  */
 
 import * as React from 'react';
@@ -16,107 +16,107 @@ import { Icon } from '@lokvis/ui-core';
 import { useTheme, type ThemeMode } from '../hooks/useTheme.js';
 
 export interface ThemeToggleProps {
-  className?: string;
-  /** 是否显示文字标签(默认仅图标) */
-  showLabel?: boolean;
+ className?: string;
+ /** 是否显示文字标签(默认仅图标) */
+ showLabel?: boolean;
 }
 
 export function ThemeToggle({ className = '', showLabel = false }: ThemeToggleProps) {
-  const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme();
-  const [menuOpen, setMenuOpen] = React.useState(false);
-  const btnRef = React.useRef<HTMLButtonElement>(null);
+ const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme();
+ const [menuOpen, setMenuOpen] = React.useState(false);
+ const btnRef = React.useRef<HTMLButtonElement>(null);
 
-  // 点击外部关闭菜单 + ESC 关闭
-  React.useEffect(() => {
-    if (!menuOpen) return;
-    const onDown = (e: MouseEvent) => {
-      // e.target 可能是任意 EventTarget;用 instanceof Node 类型守卫收窄,
-      // 避免 as 断言(与 WorkflowEditor 等处统一)
-      if (e.target instanceof Node && btnRef.current && !btnRef.current.contains(e.target)) {
-        setMenuOpen(false);
-      }
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setMenuOpen(false);
-    };
-    document.addEventListener('mousedown', onDown);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [menuOpen]);
+ // 点击外部关闭菜单 + ESC 关闭
+ React.useEffect(() => {
+ if (!menuOpen) return;
+ const onDown = (e: MouseEvent) => {
+ // e.target 可能是任意 EventTarget;用 instanceof Node 类型守卫收窄,
+ // 避免 as 断言(与 WorkflowEditor 等处统一)
+ if (e.target instanceof Node && btnRef.current && !btnRef.current.contains(e.target)) {
+ setMenuOpen(false);
+ }
+ };
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') setMenuOpen(false);
+ };
+ document.addEventListener('mousedown', onDown);
+ document.addEventListener('keydown', onKey);
+ return () => {
+ document.removeEventListener('mousedown', onDown);
+ document.removeEventListener('keydown', onKey);
+ };
+ }, [menuOpen]);
 
-  const isDark = resolvedTheme === 'dark';
+ const isDark = resolvedTheme === 'dark';
 
-  const icon = isDark ? (
-    <Icon size={14} strokeWidth={2}>
-      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-    </Icon>
-  ) : (
-    <Icon size={14} strokeWidth={2}>
-      <circle cx="12" cy="12" r="4" />
-      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
-    </Icon>
-  );
+ const icon = isDark ? (
+ <Icon size={14} strokeWidth={2}>
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+ </Icon>
+ ) : (
+ <Icon size={14} strokeWidth={2}>
+ <circle cx="12" cy="12" r="4" />
+ <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+ </Icon>
+ );
 
-  const label = theme === null ? 'System' : theme === 'dark' ? 'Dark' : 'Light';
+ const label = theme === null ? 'System' : theme === 'dark' ? 'Dark' : 'Light';
 
-  return (
-    <div className={`relative ${className}`}>
-      <button
-        ref={btnRef}
-        type="button"
-        aria-haspopup="menu"
-        aria-expanded={menuOpen}
-        onClick={() => toggleTheme()}
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setMenuOpen((v) => !v);
-        }}
-        aria-label={`Theme: ${label}. Click to toggle, right-click for options.`}
-        title={`Theme: ${label} (right-click for options)`}
-        className="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
-      >
-        {icon}
-        {showLabel && <span className="ml-1 text-xs">{label}</span>}
-      </button>
+ return (
+ <div className={`relative ${className}`}>
+ <button
+ ref={btnRef}
+ type="button"
+ aria-haspopup="menu"
+ aria-expanded={menuOpen}
+ onClick={() => toggleTheme()}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ setMenuOpen((v) => !v);
+ }}
+ aria-label={`Theme: ${label}. Click to toggle, right-click for options.`}
+ title={`Theme: ${label} (right-click for options)`}
+ className="flex h-8 w-8 items-center justify-center rounded-md text-[var(--lokvis-fg-muted)] transition-colors hover:bg-[var(--lokvis-surface-muted)] hover:text-[var(--lokvis-fg-muted)]"
+ >
+ {icon}
+ {showLabel && <span className="ml-1 text-xs">{label}</span>}
+ </button>
 
-      {menuOpen && (
-        <div
-          role="menu"
-          className="absolute right-0 top-full z-50 mt-1 w-32 overflow-hidden rounded-md border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-900"
-        >
-          {(['light', 'dark', null] as Array<ThemeMode | null>).map((mode) => {
-            const isActive = theme === mode;
-            const text = mode === null ? 'System' : mode === 'dark' ? 'Dark' : 'Light';
-            return (
-              <button
-                key={mode ?? 'system'}
-                type="button"
-                role="menuitemradio"
-                aria-checked={isActive}
-                onClick={() => {
-                  setTheme(mode);
-                  setMenuOpen(false);
-                }}
-                className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors ${
-                  isActive
-                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-300'
-                    : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800'
-                }`}
-              >
-                <span>{text}</span>
-                {isActive && (
-                  <Icon size={12} strokeWidth={3}>
-                    <path d="M5 13l4 4L19 7" />
-                  </Icon>
-                )}
-              </button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
+ {menuOpen && (
+ <div
+ role="menu"
+ className="absolute right-0 top-full z-50 mt-1 w-32 overflow-hidden rounded-md border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] py-1 shadow-[var(--lokvis-elevation-2)]"
+ >
+ {(['light', 'dark', null] as Array<ThemeMode | null>).map((mode) => {
+ const isActive = theme === mode;
+ const text = mode === null ? 'System' : mode === 'dark' ? 'Dark' : 'Light';
+ return (
+ <button
+ key={mode ?? 'system'}
+ type="button"
+ role="menuitemradio"
+ aria-checked={isActive}
+ onClick={() => {
+ setTheme(mode);
+ setMenuOpen(false);
+ }}
+ className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors ${
+ isActive
+ ? 'bg-[var(--lokvis-primary)]/10 text-[var(--lokvis-primary)]'
+ : 'text-[var(--lokvis-fg-muted)] hover:bg-[var(--lokvis-surface-muted)]'
+ }`}
+ >
+ <span>{text}</span>
+ {isActive && (
+ <Icon size={12} strokeWidth={3}>
+ <path d="M5 13l4 4L19 7" />
+ </Icon>
+ )}
+ </button>
+ );
+ })}
+ </div>
+ )}
+ </div>
+ );
 }