@lokvis/ui-react 0.1.0 → 0.2.0

package/dist/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"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"}

package/dist/store.js

@@ -0,0 +1,217 @@
+/**
+ * Workspace UI 状态管理
+ *
+ * 使用 Zustand 管理工作台状态。Runtime 永远不知道 React，
+ * 但 UI 层负责把 Runtime 事件桥接到 store。
+ */
+import { create } from 'zustand';
+/** 生成节点 ID */
+function genNodeId() {
+    return `node_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`;
+}
+export const useWorkspaceStore = create((set, get) => ({
+    runtime: null,
+    initializing: false,
+    initError: null,
+    assets: [],
+    selectedAssetId: null,
+    thumbnails: {},
+    capabilities: [],
+    capabilityMap: {},
+    nodes: [],
+    selectedNodeId: null,
+    running: false,
+    statusMessage: 'Idle',
+    error: null,
+    async init(runtime) {
+        set({ runtime, initializing: true, initError: null });
+        try {
+            await get().refreshAssets();
+            await get().refreshCapabilities();
+            set({ initializing: false, statusMessage: 'Ready' });
+        }
+        catch (err) {
+            set({
+                initializing: false,
+                initError: err instanceof Error ? err.message : String(err),
+            });
+        }
+    },
+    async refreshAssets() {
+        const { runtime } = get();
+        if (!runtime)
+            return;
+        const assets = await runtime.listAssets();
+        set({ assets });
+    },
+    async refreshCapabilities() {
+        const { runtime } = get();
+        if (!runtime)
+            return;
+        const capabilities = await runtime.capabilities();
+        const capabilityMap = {};
+        for (const cap of capabilities)
+            capabilityMap[cap.name] = cap;
+        set({ capabilities, capabilityMap });
+    },
+    async importFiles(files) {
+        const { runtime } = get();
+        if (!runtime)
+            return;
+        set({ statusMessage: `Importing ${files.length} file(s)...` });
+        for (const file of files) {
+            await runtime.importAsset({ kind: 'file', file });
+        }
+        await get().refreshAssets();
+        set({ statusMessage: `Imported ${files.length} file(s)` });
+    },
+    selectAsset(id) {
+        set({ selectedAssetId: id });
+    },
+    setThumbnail(id, url) {
+        set((state) => ({ thumbnails: { ...state.thumbnails, [id]: url } }));
+    },
+    async removeAsset(id) {
+        const { runtime } = get();
+        if (!runtime)
+            return;
+        await runtime.removeAsset(id);
+        await get().refreshAssets();
+        if (get().selectedAssetId === id)
+            set({ selectedAssetId: null });
+    },
+    addNode(capability) {
+        const node = {
+            id: genNodeId(),
+            capability,
+            params: {},
+            status: 'idle',
+        };
+        set((state) => ({
+            nodes: [...state.nodes, node],
+            selectedNodeId: node.id,
+        }));
+    },
+    updateNodeParams(id, params) {
+        set((state) => ({
+            nodes: state.nodes.map((n) => (n.id === id ? { ...n, params } : n)),
+        }));
+    },
+    removeNode(id) {
+        set((state) => ({
+            nodes: state.nodes.filter((n) => n.id !== id),
+            selectedNodeId: state.selectedNodeId === id ? null : state.selectedNodeId,
+        }));
+    },
+    selectNode(id) {
+        set({ selectedNodeId: id });
+    },
+    setNodeStatus(id, status, error, duration) {
+        set((state) => ({
+            nodes: state.nodes.map((n) => n.id === id ? { ...n, status, error, duration } : n),
+        }));
+    },
+    async run() {
+        const { runtime, nodes, selectedAssetId } = get();
+        if (!runtime)
+            throw new Error('Runtime not initialized');
+        if (nodes.length === 0)
+            throw new Error('Workflow is empty');
+        if (!selectedAssetId)
+            throw new Error('No asset selected');
+        set({ running: true, error: null, statusMessage: 'Running...' });
+        // 重置所有节点状态
+        set((state) => ({
+            nodes: state.nodes.map((n) => ({ ...n, status: 'pending', error: undefined })),
+        }));
+        try {
+            // 构建 Workflow
+            const workflow = buildLinearWorkflow(nodes);
+            const input = await runtime.getAsset(selectedAssetId);
+            set({ statusMessage: 'Running workflow...' });
+            const result = await runtime.run(workflow, [input]);
+            // 更新节点状态
+            if (result.status === 'completed') {
+                for (const node of nodes) {
+                    get().setNodeStatus(node.id, 'success', undefined, undefined);
+                }
+            }
+            else if (result.status === 'failed') {
+                for (const node of nodes) {
+                    if (get().nodes.find((n) => n.id === node.id)?.status === 'pending') {
+                        get().setNodeStatus(node.id, 'failed', result.error);
+                    }
+                }
+            }
+            // 加载输出资产
+            const outputs = [];
+            for (const id of result.outputs) {
+                try {
+                    outputs.push(await runtime.getAsset(id));
+                }
+                catch {
+                    // skip
+                }
+            }
+            set({
+                running: false,
+                statusMessage: `Workflow ${result.status} in ${result.duration}ms`,
+            });
+            if (result.status === 'failed') {
+                set({ error: result.error ?? 'Workflow failed' });
+            }
+            await get().refreshAssets();
+            return outputs;
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            set({
+                running: false,
+                error: message,
+                statusMessage: 'Failed',
+            });
+            throw err;
+        }
+    },
+    setStatus(message) {
+        set({ statusMessage: message });
+    },
+    setError(error) {
+        set({ error });
+    },
+    clearWorkflow() {
+        set({ nodes: [], selectedNodeId: null });
+    },
+}));
+/** 把工作台节点序列构建为线性 Workflow */
+function buildLinearWorkflow(nodes) {
+    if (nodes.length === 0) {
+        throw new Error('Workflow is empty');
+    }
+    const workflowNodes = nodes.map((n) => ({
+        id: n.id,
+        type: 'transform',
+        capability: n.capability,
+        params: n.params,
+    }));
+    const edges = [];
+    for (let i = 0; i < workflowNodes.length - 1; i++) {
+        edges.push({ from: workflowNodes[i].id, to: workflowNodes[i + 1].id });
+    }
+    return {
+        id: `wf_${Date.now().toString(36)}`,
+        name: 'Workspace Workflow',
+        version: '1',
+        description: 'Workspace linear workflow',
+        author: { id: 'local', name: 'Local User' },
+        category: 'image',
+        tags: [],
+        nodes: workflowNodes,
+        edges,
+        inputs: { type: 'image', multiple: true },
+        outputs: { type: 'image' },
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+    };
+}
+//# sourceMappingURL=store.js.map

package/dist/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@lokvis/ui-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Lokvis Workspace UI - React components for Image/Video/PDF Workspace",
   "license": "MIT",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,11 +31,11 @@
   },
   "dependencies": {
     "zustand": "^5.0.0",
-    "@lokvis/schema": "0.1.0",
-    "@lokvis/runtime": "0.1.0",
-    "@lokvis/sdk": "0.1.0",
-    "@lokvis/ui-core": "0.1.0",
-    "@lokvis/capability": "0.1.0"
+    "@lokvis/schema": "0.2.0",
+    "@lokvis/runtime": "0.2.0",
+    "@lokvis/sdk": "0.2.0",
+    "@lokvis/ui-core": "0.2.0",
+    "@lokvis/capability": "0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/components/AssetPanel.tsx

@@ -1,17 +1,30 @@
 /**
  * AssetPanel - 左侧资产面板
  *
- * 紧凑布局：section header + 上传按钮 + 资产列表。
- * 支持拖拽导入、点击选择、缩略图预览。
+ * 紧凑布局：section header + 上传按钮 + 筛选 + 资产列表。
+ * 支持拖拽导入、点击选择、缩略图预览、按类型/关键词筛选、删除(W6.5)。
  */
 
 import * as React from 'react';
+import type { AssetType } from '@lokvis/schema';
+import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface AssetPanelProps {
   className?: string;
 }
 
+/** 类型筛选 chip 显示名 */
+const TYPE_LABEL: Record<AssetType, string> = {
+  image: 'Image',
+  video: 'Video',
+  audio: 'Audio',
+  pdf: 'PDF',
+  text: 'Text',
+  data: 'Data',
+  unknown: 'Other',
+};
+
 export function AssetPanel({ className = '' }: AssetPanelProps) {
   const assets = useWorkspaceStore((s) => s.assets);
   const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
@@ -23,6 +36,11 @@ export function AssetPanel({ className = '' }: AssetPanelProps) {
   const runtime = useWorkspaceStore((s) => s.runtime);
 
   const [dragging, setDragging] = React.useState(false);
+  // W6.5 筛选:类型 + 关键词(纯 UI 状态,不入 store)
+  const [filterType, setFilterType] = React.useState<'all' | AssetType>('all');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  // B2 修复:跟踪 in-flight exportAsset,避免同一 asset 跨 effect 重跑并发发起
+  const inflightRef = React.useRef<Set<string>>(new Set());
 
   async function handleFiles(files: FileList | File[] | null) {
     if (!files) return;
@@ -31,24 +49,69 @@ export function AssetPanel({ className = '' }: AssetPanelProps) {
   }
 
   // 自动生成缩略图
+  // B2 修复:
+  // - cancelled flag:effect 重跑/卸载时,await 完成的 exportAsset 不再创建
+  //   ObjectURL 也不 setThumbnail,避免覆盖更新值与孤儿 URL
+  // - inflightRef:同一 asset 在上一轮 effect 还在 await 时,新一轮 effect
+  //   不再重复发起(批量导入 assets 频繁变化场景)
   React.useEffect(() => {
     if (!runtime) return;
+    let cancelled = false;
+    const inflight = inflightRef.current;
     for (const asset of assets) {
       if (thumbnails[asset.id]) continue;
       if (asset.type !== 'image') continue;
+      if (inflight.has(asset.id)) continue;
+      inflight.add(asset.id);
       (async () => {
         try {
           const blob = await runtime.exportAsset(asset.id);
+          // effect 已过期或资产已删除:不创建 ObjectURL(零泄漏)
+          if (cancelled) return;
           const url = URL.createObjectURL(blob);
+          if (cancelled) {
+            // 双重检查:await 与 createObjectURL 之间可能被取消
+            URL.revokeObjectURL(url);
+            return;
+          }
           setThumbnail(asset.id, url);
         } catch {
-          // ignore
+          // ignore export 失败
+        } finally {
+          inflight.delete(asset.id);
         }
       })();
     }
+    return () => {
+      cancelled = true;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [assets, runtime]);
 
+  // 资产中实际存在的类型(仅展示有意义的 chip,避免空类型噪音)
+  const availableTypes = React.useMemo(() => {
+    const set = new Set<AssetType>();
+    for (const a of assets) set.add(a.type);
+    return Array.from(set);
+  }, [assets]);
+
+  // 筛选后的资产列表
+  const filteredAssets = React.useMemo(() => {
+    let result = assets;
+    if (filterType !== 'all') {
+      result = result.filter((a) => a.type === filterType);
+    }
+    const q = searchQuery.trim().toLowerCase();
+    if (q) {
+      result = result.filter(
+        (a) =>
+          a.metadata.format.toLowerCase().includes(q) ||
+          a.metadata.mimeType.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [assets, filterType, searchQuery]);
+
   return (
     <aside
       className={`flex w-56 shrink-0 flex-col border-r border-zinc-200 dark:border-zinc-800 ${className}`}
@@ -68,7 +131,11 @@ export function AssetPanel({ className = '' }: AssetPanelProps) {
         <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
           Assets
         </span>
-        <span className="text-[11px] tabular-nums text-zinc-400">{assets.length}</span>
+        <span className="text-[11px] tabular-nums text-zinc-400">
+          {filterType === 'all' && !searchQuery
+            ? assets.length
+            : `${filteredAssets.length}/${assets.length}`}
+        </span>
       </div>
 
       {/* Upload zone */}
@@ -85,30 +152,105 @@ export function AssetPanel({ className = '' }: AssetPanelProps) {
           className="hidden"
           onChange={(e) => handleFiles(e.target.files)}
         />
-        <svg className="mx-auto h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-        </svg>
+        <Icon size={16} className="mx-auto">
+          <path d="M12 4.5v15m7.5-7.5h-15" />
+        </Icon>
         <span className="mt-1 block text-[10px] font-medium">
           {dragging ? 'Drop here' : 'Add files'}
         </span>
       </label>
 
+      {/* W6.5 筛选栏:仅当有资产时显示 */}
+      {assets.length > 0 && (
+        <div className="px-2 pb-2 space-y-1.5">
+          {/* 类型 chips:m10 radiogroup 语义,屏幕阅读器识别为单选组 */}
+          <div
+            role="radiogroup"
+            aria-label="Filter by type"
+            className="flex flex-wrap gap-1"
+          >
+            <button
+              type="button"
+              role="radio"
+              aria-checked={filterType === 'all'}
+              onClick={() => setFilterType('all')}
+              className={`rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                filterType === 'all'
+                  ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300'
+                  : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700'
+              }`}
+            >
+              All
+            </button>
+            {availableTypes.map((t) => (
+              <button
+                key={t}
+                type="button"
+                role="radio"
+                aria-checked={filterType === t}
+                onClick={() => setFilterType(t)}
+                className={`rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                  filterType === t
+                    ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300'
+                    : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700'
+                }`}
+              >
+                {TYPE_LABEL[t]}
+              </button>
+            ))}
+          </div>
+          {/* 搜索框:m4 文案改为与实际过滤行为一致(按 format/mimeType) */}
+          <div className="relative">
+            <Icon
+              size={11}
+              className="absolute left-1.5 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none"
+            >
+              <circle cx="10" cy="10" r="6" />
+              <path d="m20 20-5-5" />
+            </Icon>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Filter by type..."
+              aria-label="Filter assets by format"
+              className="w-full rounded bg-zinc-100 py-1 pl-6 pr-1.5 text-[10px] text-zinc-700 placeholder:text-zinc-400 focus:outline-none focus:ring-1 focus:ring-indigo-300 dark:bg-zinc-800 dark:text-zinc-200 dark:placeholder:text-zinc-500"
+            />
+          </div>
+        </div>
+      )}
+
       {/* Asset list */}
       <div className="flex-1 overflow-y-auto px-2 pb-2">
         {assets.length === 0 ? (
           <p className="px-1 py-4 text-center text-[10px] text-zinc-400">
             No assets imported
           </p>
+        ) : filteredAssets.length === 0 ? (
+          <p className="px-1 py-4 text-center text-[10px] text-zinc-400">
+            No assets match filter
+          </p>
         ) : (
           <ul className="space-y-1">
-            {assets.map((asset) => {
+            {filteredAssets.map((asset) => {
               const selected = asset.id === selectedAssetId;
               const thumb = thumbnails[asset.id];
               return (
                 <li
                   key={asset.id}
+                  // M3: 键盘可达 —— tabIndex + role + onKeyDown(Enter/Space 选中)
+                  tabIndex={0}
+                  role="button"
+                  aria-pressed={selected}
+                  aria-label={`Select asset ${asset.metadata.format}`}
                   onClick={() => selectAsset(asset.id)}
-                  className={`group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs transition-all ${
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      selectAsset(asset.id);
+                    }
+                  }}
+                  className={`group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs transition-all focus:outline-none focus:ring-2 focus:ring-indigo-300 ${
                     selected
                       ? 'bg-indigo-50 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:ring-indigo-800'
                       : 'hover:bg-zinc-50 dark:hover:bg-zinc-800'
@@ -135,10 +277,10 @@ export function AssetPanel({ className = '' }: AssetPanelProps) {
                       e.stopPropagation();
                       void removeAsset(asset.id);
                     }}
-                    className="shrink-0 rounded p-0.5 text-zinc-300 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:text-zinc-600 dark:hover:bg-red-950/30"
-                    aria-label="Remove asset"
+                    className="shrink-0 rounded p-0.5 text-zinc-300 opacity-0 transition-all hover:bg-red-50 hover:text-red-500 focus:opacity-100 group-hover:opacity-100 dark:text-zinc-600 dark:hover:bg-red-950/30"
+                    aria-label={`Remove asset ${asset.metadata.format}`}
                   >
-                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+                    <Icon size={12}><path d="M6 18L18 6M6 6l12 12" /></Icon>
                   </button>
                 </li>
               );