@lokvis/ui-react 0.2.2 → 0.4.2

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,101 @@
+/**
+ * ErrorBoundary - React 错误边界(D6)
+ *
+ * 捕获子组件树渲染期间的运行时异常,避免整个 Workspace 白屏。
+ * 必须是 class 组件(React 错误边界 API 仅支持 class)。
+ *
+ * 设计:
+ * - 默认 fallback 使用 lokvis token,与 Workspace 错误态视觉一致
+ * - 可选 fallback 渲染 prop(消费方自定义 UI)
+ * - 可选 onError 回调(上报等);默认 console.error,不引入 sentry 等
+ *   app 层依赖,保持 ui-react 包架构纯净(不反向依赖消费方)
+ * - reset() 清空 error 状态,尝试重新渲染子树
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary>
+ *   <Workspace plugins={[...]} />
+ * </ErrorBoundary>
+ * ```
+ */
+
+import * as React from 'react';
+
+export interface ErrorBoundaryProps {
+ children: React.ReactNode;
+ /** 自定义 fallback;不传则用默认 UI */
+ fallback?: (error: Error, reset: () => void) => React.ReactNode;
+ /** 错误回调(上报等),不传则 console.error */
+ onError?: (error: Error, info: React.ErrorInfo) => void;
+}
+
+interface State {
+ error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+ state: State = { error: null };
+
+ static getDerivedStateFromError(error: Error): State {
+ return { error };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo) {
+ if (this.props.onError) {
+ this.props.onError(error, info);
+ } else {
+ console.error('[lokvis ErrorBoundary]', error, info.componentStack);
+ }
+ }
+
+ reset = () => {
+ this.setState({ error: null });
+ };
+
+ render() {
+ if (this.state.error) {
+ if (this.props.fallback) {
+ return this.props.fallback(this.state.error, this.reset);
+ }
+ return <DefaultFallback error={this.state.error} onReset={this.reset} />;
+ }
+ return this.props.children;
+ }
+}
+
+function DefaultFallback({ error, onReset }: { error: Error; onReset: () => void }) {
+ return (
+ <div className="flex h-full w-full items-center justify-center p-6" role="alert">
+ <div className="max-w-md rounded-xl border border-[var(--lokvis-danger)]/30 bg-[var(--lokvis-surface)] p-6 text-center shadow-[var(--lokvis-elevation-2)]">
+ <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--lokvis-danger)]/15">
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="text-[var(--lokvis-danger)]"
+ >
+ <circle cx="12" cy="12" r="10" />
+ <line x1="12" y1="8" x2="12" y2="12" />
+ <line x1="12" y1="16" x2="12.01" y2="16" />
+ </svg>
+ </div>
+ <p className="font-semibold text-[var(--lokvis-fg)]">Something went wrong</p>
+ <p className="mt-1.5 break-words text-sm text-[var(--lokvis-fg-muted)]">
+ {error.message || 'An unexpected error occurred while rendering this panel.'}
+ </p>
+ <button
+ type="button"
+ onClick={onReset}
+ className="mt-4 inline-flex items-center justify-center rounded-lg bg-[var(--lokvis-primary)] px-4 py-2 text-sm font-medium text-[var(--lokvis-primary-fg)] transition-colors hover:bg-[var(--lokvis-primary-hover)]"
+ >
+ Try again
+ </button>
+ </div>
+ </div>
+ );
+}

package/src/components/ExifPanel.tsx

@@ -121,7 +121,7 @@ export function ExifPanel({ className = '' }: ExifPanelProps) {
  <button
  type="button"
  onClick={() => setOpen(!open)}
- className="flex w-full items-center justify-between px-3 h-10 text-left transition-colors hover:bg-[var(--lokvis-surface)]"
+ className="flex w-full items-center justify-between px-3 h-[var(--lokvis-panel-header-h)] text-left transition-colors hover:bg-[var(--lokvis-surface)]"
  aria-expanded={open}
  >
  <div className="flex items-center gap-2">

package/src/components/GlobalDropzone.tsx

@@ -76,6 +76,8 @@ export function GlobalDropzone({
  // dragCounter:用计数器而非布尔,避免子元素 dragenter/dragleave 触发抖动
  const [dragCounter, setDragCounter] = React.useState(0);
  const [rejectedFiles, setRejectedFiles] = React.useState<string[]>([]);
+ // W21.6: 持有 rejectedFiles 自动清除定时器,unmount 时 cleanup
+ const rejectTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
  React.useEffect(() => {
  // 阻止浏览器默认行为(打开文件 / 下载),否则 drop 不会触发
@@ -134,8 +136,9 @@ export function GlobalDropzone({
  }
  if (rejected.length > 0) {
  setRejectedFiles(rejected);
- // 5 秒后自动清空拒绝提示
- setTimeout(() => setRejectedFiles([]), 5000);
+ // W21.6: 5 秒后自动清空拒绝提示,clear 旧 timer 避免重叠
+ if (rejectTimerRef.current) clearTimeout(rejectTimerRef.current);
+ rejectTimerRef.current = setTimeout(() => setRejectedFiles([]), 5000);
  }
  if (accepted.length > 0) {
  void importFiles(accepted);
@@ -154,6 +157,8 @@ export function GlobalDropzone({
  window.removeEventListener('dragover', onDragOver);
  window.removeEventListener('dragleave', onDragLeave);
  window.removeEventListener('drop', onDrop);
+ // W21.6: 清理 rejectedFiles 自动清除定时器
+ if (rejectTimerRef.current) clearTimeout(rejectTimerRef.current);
  };
  }, [accept, importFiles, setStatus, setError]);
 
@@ -173,7 +178,7 @@ export function GlobalDropzone({
 
  {/* 内容 */}
  <div
- className={`relative w-full max-w-md rounded-2xl border-2 border-dashed p-8 text-center bg-[var(--lokvis-surface)] shadow-2xl ${
+ className={`relative w-full max-w-md rounded-2xl border-2 border-dashed p-8 text-center bg-[var(--lokvis-surface)] shadow-[var(--lokvis-elevation-overlay)] ${
  hasRejections ? 'border-[var(--lokvis-danger)]' : 'border-[var(--lokvis-primary)]'
  }`}
  >

package/src/components/Inspector.tsx

@@ -6,8 +6,9 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { Icon, Input } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
+import { filterCapabilities } from '../utils.js';
 import { ParamForm } from './ParamForm.js';
 import { ExifPanel } from './ExifPanel.js';
 
@@ -20,6 +21,7 @@ export function Inspector({ className = '' }: InspectorProps) {
  const nodes = useWorkspaceStore((s) => s.nodes);
  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
  const capabilityMap = useWorkspaceStore((s) => s.capabilityMap);
+ const stubCapabilities = useWorkspaceStore((s) => s.stubCapabilities);
  const addNode = useWorkspaceStore((s) => s.addNode);
  const updateNodeParams = useWorkspaceStore((s) => s.updateNodeParams);
 
@@ -27,11 +29,7 @@ export function Inspector({ className = '' }: InspectorProps) {
  const [filter, setFilter] = React.useState('');
  const [configureOpen, setConfigureOpen] = React.useState(true);
 
- const filtered = capabilities.filter(
- (c) =>
- c.name.toLowerCase().includes(filter.toLowerCase()) ||
- c.description.toLowerCase().includes(filter.toLowerCase())
- );
+ const filtered = filterCapabilities(capabilities, filter);
 
  // 按域分组
  const grouped = React.useMemo(() => {
@@ -59,7 +57,9 @@ export function Inspector({ className = '' }: InspectorProps) {
  <button
  type="button"
  onClick={() => setConfigureOpen(!configureOpen)}
- className="flex w-full items-center justify-between px-3 h-10 text-left transition-colors hover:bg-[var(--lokvis-surface)]"
+ aria-expanded={configureOpen}
+ aria-controls={`configure-panel-${selectedNode.id}`}
+ className="flex w-full items-center justify-between px-3 h-[var(--lokvis-panel-header-h)] text-left transition-colors hover:bg-[var(--lokvis-surface)]"
  >
  <div className="flex items-center gap-2">
  <Icon size={12} className={`text-[var(--lokvis-fg-subtle)] transition-transform ${configureOpen ? 'rotate-90' : ''}`}><path d="m9 5 7 7-7 7" /></Icon>
@@ -70,7 +70,7 @@ export function Inspector({ className = '' }: InspectorProps) {
  </span>
  </button>
  {configureOpen && (
- <div className="px-3 pb-3 max-h-60 overflow-y-auto">
+ <div id={`configure-panel-${selectedNode.id}`} className="px-3 pb-3 max-h-60 overflow-y-auto">
  <ParamForm
  capability={capabilityMap[selectedNode.capability]!}
  values={selectedNode.params}
@@ -83,7 +83,7 @@ export function Inspector({ className = '' }: InspectorProps) {
 
  {/* Capabilities section */}
  <div className="flex flex-1 flex-col overflow-hidden">
- <div className="flex items-center justify-between px-3 h-10 shrink-0 border-b border-[var(--lokvis-border)]">
+ <div className="flex items-center justify-between px-3 h-[var(--lokvis-panel-header-h)] shrink-0 border-b border-[var(--lokvis-border)]">
  <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
  Capabilities
  </span>
@@ -92,17 +92,16 @@ export function Inspector({ className = '' }: InspectorProps) {
 
  {/* Search */}
  <div className="px-2 py-2 border-b border-[var(--lokvis-border)]">
- <div className="relative">
- <Icon size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--lokvis-fg-subtle)]"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></Icon>
- <input
- type="text"
+ <Input
+ size="sm"
  placeholder="Search capabilities..."
  value={filter}
  onChange={(e) => setFilter(e.target.value)}
- className="w-full rounded-md border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] py-1 pl-7 pr-2 text-[11px] placeholder-zinc-400 focus:border-[var(--lokvis-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--lokvis-primary)]"
+ leadingIcon={
+ <Icon size={12}><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></Icon>
+ }
  />
  </div>
- </div>
 
  {/* Capability list */}
  <div className="flex-1 overflow-y-auto p-2">
@@ -123,11 +122,14 @@ export function Inspector({ className = '' }: InspectorProps) {
  <ul className="space-y-0.5">
  {caps.map((cap) => {
  const isInPipeline = nodes.some((n) => n.capability === cap.name);
+ // A7: stub-only 能力显示 "Coming Soon" 标记(无可用引擎)
+ const isStubOnly = stubCapabilities.has(cap.name);
  return (
  <li key={cap.name}>
  <button
  type="button"
  onClick={() => addNode(cap.name)}
+ title={isStubOnly ? 'Coming soon — no engine installed yet' : undefined}
  className={`group w-full rounded-md px-2 py-1.5 text-left transition-all ${
  isInPipeline
  ? 'bg-[var(--lokvis-primary)]/5 ring-1 ring-[var(--lokvis-primary)]/40'
@@ -135,7 +137,12 @@ export function Inspector({ className = '' }: InspectorProps) {
  }`}
  >
  <div className="flex items-center justify-between gap-2">
- <span className="truncate font-mono text-[11px] font-medium">{cap.name}</span>
+ <span className={`truncate font-mono text-[11px] font-medium ${isStubOnly ? 'text-[var(--lokvis-fg-muted)]' : ''}`}>{cap.name}</span>
+ {isStubOnly ? (
+ <span className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase bg-[var(--lokvis-warning)]/15 text-[var(--lokvis-warning)]">
+ Soon
+ </span>
+ ) : (
  <span className={`shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase ${
  cap.performance === 'fast'
  ? 'bg-[var(--lokvis-success)]/15 text-[var(--lokvis-success)]'
@@ -145,6 +152,7 @@ export function Inspector({ className = '' }: InspectorProps) {
  }`}>
  {cap.performance}
  </span>
+ )}
  </div>
  <p className="mt-0.5 truncate text-[10px] text-[var(--lokvis-fg-muted)]">{cap.description}</p>
  </button>

package/src/components/ParamForm.tsx

@@ -6,6 +6,7 @@
  */
 
 import type { Capability, CapabilityParam } from '@lokvis/schema';
+import { Input } from '@lokvis/ui-core';
 
 export interface ParamFormProps {
  capability: Capability;
@@ -40,8 +41,10 @@ export function ParamForm({ capability, values, onChange }: ParamFormProps) {
  );
 }
 
-const inputBase =
- 'w-full rounded-md border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-2.5 py-1.5 text-[11px] transition-colors focus:border-[var(--lokvis-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--lokvis-primary)]';
+// 仅用于 enum 的原生 <select>(Select 组件 API 不同,不在此迁移);
+// 文本/数字输入已统一改用 <Input size="sm"> 组件,消除重复样式。
+const selectBase =
+ 'w-full rounded-md border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-2.5 py-1.5 text-[11px] transition-colors hover:border-[var(--lokvis-border-strong)] focus:border-[var(--lokvis-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lokvis-primary)]/30 disabled:cursor-not-allowed disabled:opacity-50';
 
 function ParamField({
  param,
@@ -79,7 +82,7 @@ function ParamField({
  <select
  value={(value as string) ?? (param.default as string) ?? ''}
  onChange={(e) => onChange(e.target.value)}
- className={inputBase}
+ className={selectBase}
  >
  {param.values.map((v) => (
  <option key={v} value={v}>{v}</option>
@@ -102,11 +105,11 @@ function ParamField({
  onChange={(e) => onChange(e.target.value)}
  className="h-7 w-7 shrink-0 cursor-pointer rounded border border-[var(--lokvis-border)]"
  />
- <input
+ <Input
  type="text"
+ size="sm"
  value={(value as string) ?? (param.default as string) ?? '#ffffff'}
  onChange={(e) => onChange(e.target.value)}
- className={inputBase}
  />
  </div>
  </div>
@@ -129,13 +132,13 @@ function ParamField({
  </span>
  )}
  </div>
- <input
+ <Input
  type="number"
+ size="sm"
  value={value === undefined ? (param.default as number | undefined) ?? '' : (value as number)}
  min={param.min}
  max={param.max}
  onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
- className={inputBase}
  />
  </div>
  );
@@ -151,12 +154,12 @@ function ParamField({
  <span className="ml-1 font-normal text-[var(--lokvis-fg-subtle)]">{param.description}</span>
  )}
  </label>
- <input
+ <Input
  type="text"
+ size="sm"
  value={(value as string) ?? (param.default as string) ?? ''}
  onChange={(e) => onChange(e.target.value)}
  placeholder={param.type === 'file' ? 'data URL or path' : ''}
- className={inputBase}
  />
  </div>
  );

package/src/components/PipelineBar.tsx

@@ -6,8 +6,9 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { FOCUS_RING, Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
+import { StatusDot } from './StatusDot.js';
 
 export interface PipelineBarProps {
  className?: string;
@@ -47,10 +48,21 @@ export function PipelineBar({ className = '' }: PipelineBarProps) {
  const selected = node.id === selectedNodeId;
  return (
  <React.Fragment key={node.id}>
+ {/* D7: remove button 作为 node button 的兄弟而非子元素(HTML 规范禁止 button 嵌套) */}
+ <div className="group flex shrink-0 items-center gap-0.5">
  <button
  type="button"
  onClick={() => selectNode(node.id)}
- className={`group flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all ${
+ onKeyDown={(e) => {
+ // 键盘可达:Delete/Backspace 删除节点(与 WorkflowEditor 一致)
+ if (e.key === 'Delete' || e.key === 'Backspace') {
+ e.preventDefault();
+ removeNode(node.id);
+ }
+ }}
+ aria-label={`节点 ${node.capability},位置 ${i + 1},Delete 删除`}
+ aria-pressed={selected}
+ className={`flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all ${FOCUS_RING} ${
  selected
  ? 'bg-[var(--lokvis-primary)]/15 text-[var(--lokvis-primary)] ring-1 ring-[var(--lokvis-primary)]/50'
  : node.status === 'running'
@@ -64,18 +76,16 @@ export function PipelineBar({ className = '' }: PipelineBarProps) {
  >
  <span className="font-mono">{node.capability}</span>
  <StatusDot status={node.status} />
- <span
- onClick={(e) => {
- e.stopPropagation();
- removeNode(node.id);
- }}
- className="ml-0.5 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-[var(--lokvis-danger)]/15 hover:text-[var(--lokvis-danger)]"
- role="button"
+ </button>
+ <button
+ type="button"
+ onClick={() => removeNode(node.id)}
+ className="rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lokvis-danger)] hover:bg-[var(--lokvis-danger)]/15 hover:text-[var(--lokvis-danger)]"
  aria-label="Remove step"
  >
  <Icon size={10} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
- </span>
  </button>
+ </div>
 
  {/* Arrow between nodes */}
  {i < nodes.length - 1 && (
@@ -107,20 +117,3 @@ export function PipelineBar({ className = '' }: PipelineBarProps) {
  </div>
  );
 }
-
-function StatusDot({ status }: { status: string }) {
- 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/StatusBar.tsx

@@ -12,19 +12,12 @@
 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`;
-}
-
 /** useOnlineStatus - 监听 navigator.onLine + online/offline 事件(W9.6) */
 function useOnlineStatus(): boolean {
  const [online, setOnline] = React.useState<boolean>(() =>
@@ -68,7 +61,7 @@ export function StatusBar({ className = '' }: StatusBarProps) {
 
  return (
  <footer
- className={`flex h-7 shrink-0 items-center justify-between border-t border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-3 ${className}`}
+ 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
@@ -116,7 +109,7 @@ export function StatusBar({ className = '' }: StatusBarProps) {
  <button
  type="button"
  onClick={() => setError(null)}
- className="shrink-0 text-[10px] text-[var(--lokvis-danger)] underline decoration-red-300 hover:text-[var(--lokvis-danger)]"
+ className="shrink-0 text-[10px] text-[var(--lokvis-danger)] underline decoration-[var(--lokvis-danger)]/40 hover:text-[var(--lokvis-danger)]"
  >
  dismiss
  </button>

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

@@ -85,7 +85,7 @@ export function ThemeToggle({ className = '', showLabel = false }: ThemeTogglePr
  {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-lg"
+ 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;