@lokvis/ui-react 0.2.0 → 0.2.2

package/src/components/Inspector.tsx

@@ -12,152 +12,152 @@ import { ParamForm } from './ParamForm.js';
 import { ExifPanel } from './ExifPanel.js';
 
 export interface InspectorProps {
-  className?: string;
+ className?: string;
 }
 
 export function Inspector({ className = '' }: InspectorProps) {
-  const capabilities = useWorkspaceStore((s) => s.capabilities);
-  const nodes = useWorkspaceStore((s) => s.nodes);
-  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
-  const capabilityMap = useWorkspaceStore((s) => s.capabilityMap);
-  const addNode = useWorkspaceStore((s) => s.addNode);
-  const updateNodeParams = useWorkspaceStore((s) => s.updateNodeParams);
+ const capabilities = useWorkspaceStore((s) => s.capabilities);
+ const nodes = useWorkspaceStore((s) => s.nodes);
+ const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+ const capabilityMap = useWorkspaceStore((s) => s.capabilityMap);
+ const addNode = useWorkspaceStore((s) => s.addNode);
+ const updateNodeParams = useWorkspaceStore((s) => s.updateNodeParams);
 
-  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
-  const [filter, setFilter] = React.useState('');
-  const [configureOpen, setConfigureOpen] = React.useState(true);
+ const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+ 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 = capabilities.filter(
+ (c) =>
+ c.name.toLowerCase().includes(filter.toLowerCase()) ||
+ c.description.toLowerCase().includes(filter.toLowerCase())
+ );
 
-  // 按域分组
-  const grouped = React.useMemo(() => {
-    const map = new Map<string, typeof filtered>();
-    for (const cap of filtered) {
-      const domain = cap.name.split('.')[0] ?? 'other';
-      if (!map.has(domain)) map.set(domain, []);
-      map.get(domain)!.push(cap);
-    }
-    return map;
-  }, [filtered]);
+ // 按域分组
+ const grouped = React.useMemo(() => {
+ const map = new Map<string, typeof filtered>();
+ for (const cap of filtered) {
+ const domain = cap.name.split('.')[0] ?? 'other';
+ if (!map.has(domain)) map.set(domain, []);
+ map.get(domain)!.push(cap);
+ }
+ return map;
+ }, [filtered]);
 
-  const showConfigure = selectedNode && capabilityMap[selectedNode.capability];
+ const showConfigure = selectedNode && capabilityMap[selectedNode.capability];
 
-  return (
-    <aside
-      className={`flex w-72 shrink-0 flex-col border-l border-zinc-200 dark:border-zinc-800 ${className}`}
-    >
-      {/* EXIF panel (selected image asset only, hides automatically for non-image) */}
-      <ExifPanel />
+ return (
+ <aside
+ className={`flex w-72 shrink-0 flex-col border-l border-[var(--lokvis-border)] ${className}`}
+ >
+ {/* EXIF panel (selected image asset only, hides automatically for non-image) */}
+ <ExifPanel />
 
-      {/* Configure section (when a node is selected) */}
-      {showConfigure && (
-        <div className="shrink-0 border-b border-zinc-200 dark:border-zinc-800">
-          <button
-            type="button"
-            onClick={() => setConfigureOpen(!configureOpen)}
-            className="flex w-full items-center justify-between px-3 h-10 text-left transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
-          >
-            <div className="flex items-center gap-2">
-              <Icon size={12} className={`text-zinc-400 transition-transform ${configureOpen ? 'rotate-90' : ''}`}><path d="m9 5 7 7-7 7" /></Icon>
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Configure</span>
-            </div>
-            <span className="font-mono text-[10px] text-indigo-500 bg-indigo-50 dark:bg-indigo-950/30 px-1.5 py-0.5 rounded">
-              {selectedNode.capability}
-            </span>
-          </button>
-          {configureOpen && (
-            <div className="px-3 pb-3 max-h-60 overflow-y-auto">
-              <ParamForm
-                capability={capabilityMap[selectedNode.capability]!}
-                values={selectedNode.params}
-                onChange={(params) => updateNodeParams(selectedNode.id, params)}
-              />
-            </div>
-          )}
-        </div>
-      )}
+ {/* Configure section (when a node is selected) */}
+ {showConfigure && (
+ <div className="shrink-0 border-b border-[var(--lokvis-border)]">
+ <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)]"
+ >
+ <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>
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">Configure</span>
+ </div>
+ <span className="font-mono text-[10px] text-[var(--lokvis-primary)] bg-[var(--lokvis-primary)]/10 px-1.5 py-0.5 rounded">
+ {selectedNode.capability}
+ </span>
+ </button>
+ {configureOpen && (
+ <div className="px-3 pb-3 max-h-60 overflow-y-auto">
+ <ParamForm
+ capability={capabilityMap[selectedNode.capability]!}
+ values={selectedNode.params}
+ onChange={(params) => updateNodeParams(selectedNode.id, params)}
+ />
+ </div>
+ )}
+ </div>
+ )}
 
-      {/* 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-zinc-200 dark:border-zinc-800">
-          <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
-            Capabilities
-          </span>
-          <span className="text-[11px] tabular-nums text-zinc-400">{filtered.length}</span>
-        </div>
+ {/* 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)]">
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+ Capabilities
+ </span>
+ <span className="text-[11px] tabular-nums text-[var(--lokvis-fg-subtle)]">{filtered.length}</span>
+ </div>
 
-        {/* Search */}
-        <div className="px-2 py-2 border-b border-zinc-100 dark:border-zinc-800/50">
-          <div className="relative">
-            <Icon size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-zinc-400"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></Icon>
-            <input
-              type="text"
-              placeholder="Search capabilities..."
-              value={filter}
-              onChange={(e) => setFilter(e.target.value)}
-              className="w-full rounded-md border border-zinc-200 bg-white py-1 pl-7 pr-2 text-[11px] placeholder-zinc-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400 dark:border-zinc-700 dark:bg-zinc-900"
-            />
-          </div>
-        </div>
+ {/* 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"
+ 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)]"
+ />
+ </div>
+ </div>
 
-        {/* Capability list */}
-        <div className="flex-1 overflow-y-auto p-2">
-          {capabilities.length === 0 ? (
-            <div className="px-2 py-8 text-center">
-              <p className="text-[11px] text-zinc-400">No capabilities loaded</p>
-              <p className="mt-1 text-[10px] text-zinc-500">Load a plugin to get started</p>
-            </div>
-          ) : filtered.length === 0 ? (
-            <p className="px-2 py-4 text-[11px] text-zinc-400">No matching capabilities</p>
-          ) : (
-            <div className="space-y-3">
-              {Array.from(grouped.entries()).map(([domain, caps]) => (
-                <div key={domain}>
-                  <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
-                    {domain}
-                  </div>
-                  <ul className="space-y-0.5">
-                    {caps.map((cap) => {
-                      const isInPipeline = nodes.some((n) => n.capability === cap.name);
-                      return (
-                        <li key={cap.name}>
-                          <button
-                            type="button"
-                            onClick={() => addNode(cap.name)}
-                            className={`group w-full rounded-md px-2 py-1.5 text-left transition-all ${
-                              isInPipeline
-                                ? 'bg-indigo-50/50 ring-1 ring-indigo-200 dark:bg-indigo-950/20 dark:ring-indigo-800'
-                                : 'hover:bg-zinc-50 dark:hover:bg-zinc-800'
-                            }`}
-                          >
-                            <div className="flex items-center justify-between gap-2">
-                              <span className="truncate font-mono text-[11px] font-medium">{cap.name}</span>
-                              <span className={`shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase ${
-                                cap.performance === 'fast'
-                                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
-                                  : cap.performance === 'medium'
-                                  ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
-                                  : 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'
-                              }`}>
-                                {cap.performance}
-                              </span>
-                            </div>
-                            <p className="mt-0.5 truncate text-[10px] text-zinc-500 dark:text-zinc-400">{cap.description}</p>
-                          </button>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </aside>
-  );
+ {/* Capability list */}
+ <div className="flex-1 overflow-y-auto p-2">
+ {capabilities.length === 0 ? (
+ <div className="px-2 py-8 text-center">
+ <p className="text-[11px] text-[var(--lokvis-fg-subtle)]">No capabilities loaded</p>
+ <p className="mt-1 text-[10px] text-[var(--lokvis-fg-muted)]">Load a plugin to get started</p>
+ </div>
+ ) : filtered.length === 0 ? (
+ <p className="px-2 py-4 text-[11px] text-[var(--lokvis-fg-subtle)]">No matching capabilities</p>
+ ) : (
+ <div className="space-y-3">
+ {Array.from(grouped.entries()).map(([domain, caps]) => (
+ <div key={domain}>
+ <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+ {domain}
+ </div>
+ <ul className="space-y-0.5">
+ {caps.map((cap) => {
+ const isInPipeline = nodes.some((n) => n.capability === cap.name);
+ return (
+ <li key={cap.name}>
+ <button
+ type="button"
+ onClick={() => addNode(cap.name)}
+ 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'
+ : 'hover:bg-[var(--lokvis-surface)]'
+ }`}
+ >
+ <div className="flex items-center justify-between gap-2">
+ <span className="truncate font-mono text-[11px] font-medium">{cap.name}</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)]'
+ : cap.performance === 'medium'
+ ? 'bg-[var(--lokvis-warning)]/15 text-[var(--lokvis-warning)]'
+ : 'bg-[var(--lokvis-surface-muted)] text-[var(--lokvis-fg-muted)]'
+ }`}>
+ {cap.performance}
+ </span>
+ </div>
+ <p className="mt-0.5 truncate text-[10px] text-[var(--lokvis-fg-muted)]">{cap.description}</p>
+ </button>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ </div>
+ </aside>
+ );
 }

package/src/components/ParamForm.tsx

@@ -8,156 +8,156 @@
 import type { Capability, CapabilityParam } from '@lokvis/schema';
 
 export interface ParamFormProps {
-  capability: Capability;
-  values: Record<string, unknown>;
-  onChange: (values: Record<string, unknown>) => void;
+ capability: Capability;
+ values: Record<string, unknown>;
+ onChange: (values: Record<string, unknown>) => void;
 }
 
 export function ParamForm({ capability, values, onChange }: ParamFormProps) {
-  const set = (name: string, value: unknown) => {
-    onChange({ ...values, [name]: value });
-  };
+ const set = (name: string, value: unknown) => {
+ onChange({ ...values, [name]: value });
+ };
 
-  if (capability.params.length === 0) {
-    return (
-      <p className="py-3 text-center text-[11px] text-zinc-400 italic">
-        This capability has no configurable parameters.
-      </p>
-    );
-  }
+ if (capability.params.length === 0) {
+ return (
+ <p className="py-3 text-center text-[11px] text-[var(--lokvis-fg-subtle)] italic">
+ This capability has no configurable parameters.
+ </p>
+ );
+ }
 
-  return (
-    <div className="space-y-2.5">
-      {capability.params.map((p) => (
-        <ParamField
-          key={p.name}
-          param={p}
-          value={values[p.name]}
-          onChange={(v) => set(p.name, v)}
-        />
-      ))}
-    </div>
-  );
+ return (
+ <div className="space-y-2.5">
+ {capability.params.map((p) => (
+ <ParamField
+ key={p.name}
+ param={p}
+ value={values[p.name]}
+ onChange={(v) => set(p.name, v)}
+ />
+ ))}
+ </div>
+ );
 }
 
 const inputBase =
-  'w-full rounded-md border border-zinc-200 bg-white px-2.5 py-1.5 text-[11px] transition-colors focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400 dark:border-zinc-700 dark:bg-zinc-900';
+ '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)]';
 
 function ParamField({
-  param,
-  value,
-  onChange,
+ param,
+ value,
+ onChange,
 }: {
-  param: CapabilityParam;
-  value: unknown;
-  onChange: (value: unknown) => void;
+ param: CapabilityParam;
+ value: unknown;
+ onChange: (value: unknown) => void;
 }) {
-  if (param.type === 'boolean') {
-    return (
-      <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
-        <input
-          type="checkbox"
-          checked={Boolean(value ?? param.default)}
-          onChange={(e) => onChange(e.target.checked)}
-          className="h-3.5 w-3.5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
-        />
-        <span className="flex-1 text-[11px] text-zinc-700 dark:text-zinc-300">{param.name}</span>
-        {param.description && (
-          <span className="shrink-0 text-[10px] text-zinc-400">{param.description}</span>
-        )}
-      </label>
-    );
-  }
+ if (param.type === 'boolean') {
+ return (
+ <label className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 transition-colors hover:bg-[var(--lokvis-surface)]">
+ <input
+ type="checkbox"
+ checked={Boolean(value ?? param.default)}
+ onChange={(e) => onChange(e.target.checked)}
+ className="h-3.5 w-3.5 rounded border-[var(--lokvis-border-strong)] text-[var(--lokvis-primary)] focus:ring-[var(--lokvis-primary)]"
+ />
+ <span className="flex-1 text-[11px] text-[var(--lokvis-fg-muted)]">{param.name}</span>
+ {param.description && (
+ <span className="shrink-0 text-[10px] text-[var(--lokvis-fg-subtle)]">{param.description}</span>
+ )}
+ </label>
+ );
+ }
 
-  if (param.type === 'enum' && param.values) {
-    return (
-      <div>
-        <label className="mb-1 block text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
-          {param.name}
-          {param.required && <span className="ml-0.5 text-red-500">*</span>}
-        </label>
-        <select
-          value={(value as string) ?? (param.default as string) ?? ''}
-          onChange={(e) => onChange(e.target.value)}
-          className={inputBase}
-        >
-          {param.values.map((v) => (
-            <option key={v} value={v}>{v}</option>
-          ))}
-        </select>
-      </div>
-    );
-  }
+ if (param.type === 'enum' && param.values) {
+ return (
+ <div>
+ <label className="mb-1 block text-[11px] font-medium text-[var(--lokvis-fg-muted)]">
+ {param.name}
+ {param.required && <span className="ml-0.5 text-[var(--lokvis-danger)]">*</span>}
+ </label>
+ <select
+ value={(value as string) ?? (param.default as string) ?? ''}
+ onChange={(e) => onChange(e.target.value)}
+ className={inputBase}
+ >
+ {param.values.map((v) => (
+ <option key={v} value={v}>{v}</option>
+ ))}
+ </select>
+ </div>
+ );
+ }
 
-  if (param.type === 'color') {
-    return (
-      <div>
-        <label className="mb-1 block text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
-          {param.name}
-        </label>
-        <div className="flex gap-2">
-          <input
-            type="color"
-            value={(value as string) ?? (param.default as string) ?? '#ffffff'}
-            onChange={(e) => onChange(e.target.value)}
-            className="h-7 w-7 shrink-0 cursor-pointer rounded border border-zinc-200 dark:border-zinc-700"
-          />
-          <input
-            type="text"
-            value={(value as string) ?? (param.default as string) ?? '#ffffff'}
-            onChange={(e) => onChange(e.target.value)}
-            className={inputBase}
-          />
-        </div>
-      </div>
-    );
-  }
+ if (param.type === 'color') {
+ return (
+ <div>
+ <label className="mb-1 block text-[11px] font-medium text-[var(--lokvis-fg-muted)]">
+ {param.name}
+ </label>
+ <div className="flex gap-2">
+ <input
+ type="color"
+ value={(value as string) ?? (param.default as string) ?? '#ffffff'}
+ onChange={(e) => onChange(e.target.value)}
+ className="h-7 w-7 shrink-0 cursor-pointer rounded border border-[var(--lokvis-border)]"
+ />
+ <input
+ type="text"
+ value={(value as string) ?? (param.default as string) ?? '#ffffff'}
+ onChange={(e) => onChange(e.target.value)}
+ className={inputBase}
+ />
+ </div>
+ </div>
+ );
+ }
 
-  if (param.type === 'number') {
-    return (
-      <div>
-        <div className="mb-1 flex items-center justify-between">
-          <label className="text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
-            {param.name}
-            {param.required && <span className="ml-0.5 text-red-500">*</span>}
-          </label>
-          {(param.min !== undefined || param.max !== undefined) && (
-            <span className="text-[10px] text-zinc-400">
-              {param.min !== undefined ? param.min : '-'}
-              {' — '}
-              {param.max !== undefined ? param.max : '∞'}
-            </span>
-          )}
-        </div>
-        <input
-          type="number"
-          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>
-    );
-  }
+ if (param.type === 'number') {
+ return (
+ <div>
+ <div className="mb-1 flex items-center justify-between">
+ <label className="text-[11px] font-medium text-[var(--lokvis-fg-muted)]">
+ {param.name}
+ {param.required && <span className="ml-0.5 text-[var(--lokvis-danger)]">*</span>}
+ </label>
+ {(param.min !== undefined || param.max !== undefined) && (
+ <span className="text-[10px] text-[var(--lokvis-fg-subtle)]">
+ {param.min !== undefined ? param.min : '-'}
+ {' — '}
+ {param.max !== undefined ? param.max : '∞'}
+ </span>
+ )}
+ </div>
+ <input
+ type="number"
+ 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>
+ );
+ }
 
-  // string / file / array / object → text input
-  return (
-    <div>
-      <label className="mb-1 block text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
-        {param.name}
-        {param.required && <span className="ml-0.5 text-red-500">*</span>}
-        {param.description && (
-          <span className="ml-1 font-normal text-zinc-400">{param.description}</span>
-        )}
-      </label>
-      <input
-        type="text"
-        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>
-  );
+ // string / file / array / object → text input
+ return (
+ <div>
+ <label className="mb-1 block text-[11px] font-medium text-[var(--lokvis-fg-muted)]">
+ {param.name}
+ {param.required && <span className="ml-0.5 text-[var(--lokvis-danger)]">*</span>}
+ {param.description && (
+ <span className="ml-1 font-normal text-[var(--lokvis-fg-subtle)]">{param.description}</span>
+ )}
+ </label>
+ <input
+ type="text"
+ 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>
+ );
 }