@lokvis/ui-react 0.2.1 → 0.4.1

package/src/hooks/useCustomPresets.ts

@@ -0,0 +1,284 @@
+/**
+ * useCustomPresets - 自定义尺寸预设持久化 hook(W17.5)
+ *
+ * 提供用户自定义图像尺寸预设的本地保存能力(免费 3 / Pro 无限)。
+ * 数据存储在 localStorage 的 `lokvis.customPresets` key,JSON 数组形式。
+ *
+ * 与 useWorkflows 的区别:
+ *   - 自定义预设是尺寸配置(name/width/height/fit/format),轻量
+ *   - 工作流槽位是完整 Workflow 定义(含 nodes/edges/inputs/outputs)
+ *
+ * 与 PLATFORM_PRESETS 的区别:
+ *   - PLATFORM_PRESETS 是内置的固定预设(YouTube/TikTok 等平台标准尺寸)
+ *   - 自定义预设是用户自建的任意尺寸配置,自由命名
+ *
+ * id 命名空间约定:自定义预设 id 以 `custom.` 前缀,与内置预设区分
+ * (如 `custom.my-instagram-square`),避免 PlatformPresetSelector 冲突。
+ *
+ * 多 tab / 多实例同步:
+ *   - 原生 storage 事件:跨 tab 同步
+ *   - 自定义 SYNC_EVENT:同 tab 多实例同步
+ *
+ * @module useCustomPresets
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import type {
+  PlatformFitStrategy,
+  PlatformRecommendedFormat,
+} from '@lokvis/capability';
+
+const STORAGE_KEY = 'lokvis.customPresets';
+/** 同 tab 多实例同步用的自定义事件名 */
+const SYNC_EVENT = 'lokvis:custom-presets-change';
+
+/** 免费用户自定义预设上限 */
+export const FREE_PRESET_LIMIT = 3;
+/** Pro 用户无上限 */
+export const PRO_PRESET_LIMIT = Infinity;
+
+/** 自定义尺寸预设存储格式 */
+export interface CustomSizePreset {
+  /** 唯一 ID,以 `custom.` 前缀 */
+  id: string;
+  /** 用户自定义名称(如 "我的方形预设") */
+  name: string;
+  /** 目标宽度(像素) */
+  width: number;
+  /** 目标高度(像素) */
+  height: number;
+  /** fit 策略(默认 cover) */
+  fit: PlatformFitStrategy;
+  /** 推荐输出格式(可选) */
+  format?: PlatformRecommendedFormat;
+  /** 创建时间戳 */
+  createdAt: number;
+  /** 最后更新时间戳 */
+  updatedAt: number;
+}
+
+/** 保存预设时的输入(不含 id / 时间戳,由 save 自动生成) */
+export interface SavePresetInput {
+  /** 预设名称 */
+  name: string;
+  /** 目标宽度(像素,>0) */
+  width: number;
+  /** 目标高度(像素,>0) */
+  height: number;
+  /** fit 策略(默认 cover) */
+  fit?: PlatformFitStrategy;
+  /** 推荐输出格式(可选) */
+  format?: PlatformRecommendedFormat;
+  /** 若指定则更新该 id 的预设,否则新增 */
+  id?: string;
+}
+
+export interface UseCustomPresetsResult {
+  /** 当前所有自定义预设(按 updatedAt 降序) */
+  presets: CustomSizePreset[];
+  /** 保存或更新预设;超限时抛 Error */
+  save(input: SavePresetInput): CustomSizePreset;
+  /** 按 id 删除预设 */
+  remove(id: string): void;
+  /** 按 id 查找预设 */
+  get(id: string): CustomSizePreset | null;
+  /** 当前上限(免费 3 / Pro 无限) */
+  limit: number;
+  /** 是否还能再保存 */
+  canSaveMore: boolean;
+  /** 还能再保存多少个 */
+  remaining: number;
+}
+
+/** 类型守卫:判断 unknown 是否为 Record<string, unknown> */
+function isRecord(x: unknown): x is Record<string, unknown> {
+  return typeof x === 'object' && x !== null;
+}
+
+const VALID_FIT_STRATEGIES: readonly PlatformFitStrategy[] = ['cover', 'contain', 'fill', 'inside', 'outside'];
+const VALID_FORMATS: readonly PlatformRecommendedFormat[] = ['png', 'jpeg', 'webp'];
+
+/** 从 localStorage 读取自定义预设。
+ * 容错:JSON 解析失败 / 非数组 / 字段缺失时返回空数组。
+ *
+ * 导出供测试直接调用(避免渲染 React 组件)。 */
+export function readCustomPresetsFromStorage(): CustomSizePreset[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    // 字段白名单过滤(防御损坏数据)
+    const result = parsed.filter((it): it is CustomSizePreset => {
+      if (!isRecord(it)) return false;
+      if (
+        typeof it.id !== 'string' ||
+        typeof it.name !== 'string' ||
+        typeof it.width !== 'number' ||
+        typeof it.height !== 'number' ||
+        typeof it.fit !== 'string' ||
+        typeof it.createdAt !== 'number' ||
+        typeof it.updatedAt !== 'number'
+      ) {
+        return false;
+      }
+      // id 必须以 custom. 前缀开头,与内置 PLATFORM_PRESETS 隔离
+      if (!it.id.startsWith('custom.')) return false;
+      // fit 必须是合法值
+      if (!VALID_FIT_STRATEGIES.includes(it.fit as PlatformFitStrategy)) {
+        return false;
+      }
+      // format 可选,若有则必须是合法值
+      if (it.format !== undefined && !VALID_FORMATS.includes(it.format as PlatformRecommendedFormat)) {
+        return false;
+      }
+      // width / height 必须为正整数
+      if (it.width <= 0 || it.height <= 0) return false;
+      return true;
+    });
+    // 按 updatedAt 降序(最新在前),与接口契约一致
+    result.sort((a, b) => b.updatedAt - a.updatedAt);
+    return result;
+  } catch {
+    console.warn('[lokvis] Failed to read custom presets from storage');
+    return [];
+  }
+}
+
+/**
+ * 写入 localStorage。
+ * @returns true 成功;false 失败(隐私模式 / 配额超限 / 序列化异常)
+ *
+ * 导出供测试直接调用。
+ */
+export function writeCustomPresetsToStorage(presets: CustomSizePreset[]): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(presets));
+    window.dispatchEvent(new CustomEvent(SYNC_EVENT));
+    return true;
+  } catch (err) {
+    console.warn('[lokvis] Failed to persist custom presets to localStorage:', err);
+    return false;
+  }
+}
+
+/** 生成唯一 ID(custom. 前缀,与内置预设命名空间隔离) */
+export function genCustomPresetId(): string {
+  const rand = Math.random().toString(36).slice(2, 8);
+  return `custom.${Date.now()}-${rand}`;
+}
+
+/**
+ * @param isPro 是否为 Pro 模式。父组件从 runtime.isPro 传入。
+ * 影响 limit:免费 3 / Pro 无上限。
+ */
+export function useCustomPresets(isPro = false): UseCustomPresetsResult {
+  const limit = isPro ? PRO_PRESET_LIMIT : FREE_PRESET_LIMIT;
+  const [presets, setPresets] = useState<CustomSizePreset[]>(() =>
+    readCustomPresetsFromStorage()
+  );
+
+  // 监听跨 tab storage + 同 tab SYNC_EVENT
+  useEffect(() => {
+    const handler = () => setPresets(readCustomPresetsFromStorage());
+    window.addEventListener('storage', handler);
+    window.addEventListener(SYNC_EVENT, handler);
+    return () => {
+      window.removeEventListener('storage', handler);
+      window.removeEventListener(SYNC_EVENT, handler);
+    };
+  }, []);
+
+  const save = useCallback(
+    (input: SavePresetInput): CustomSizePreset => {
+      // 输入校验
+      if (input.width <= 0 || input.height <= 0) {
+        throw new Error('预设尺寸必须为正数');
+      }
+      if (!input.name.trim()) {
+        throw new Error('预设名称不能为空');
+      }
+
+      const current = readCustomPresetsFromStorage();
+      const now = Date.now();
+
+      // 更新已有
+      if (input.id) {
+        const existing = current.find((p) => p.id === input.id);
+        if (existing) {
+          const updated: CustomSizePreset = {
+            ...existing,
+            name: input.name,
+            width: input.width,
+            height: input.height,
+            fit: input.fit ?? existing.fit,
+            format: input.format ?? existing.format,
+            updatedAt: now,
+          };
+          const next = current.map((p) => (p.id === input.id ? updated : p));
+          const ok = writeCustomPresetsToStorage(next);
+          if (!ok) {
+            console.warn('[lokvis] 自定义预设未持久化到 localStorage,仅当前会话有效');
+          }
+          setPresets(next);
+          return updated;
+        }
+      }
+
+      // 新增
+      if (current.length >= limit) {
+        throw new Error(
+          `自定义预设已达上限(${limit} 个)${isPro ? '' : ',升级 Pro 可无限制保存'}`
+        );
+      }
+      const preset: CustomSizePreset = {
+        id: genCustomPresetId(),
+        name: input.name,
+        width: input.width,
+        height: input.height,
+        fit: input.fit ?? 'cover',
+        format: input.format,
+        createdAt: now,
+        updatedAt: now,
+      };
+      const next = [...current, preset];
+      const ok = writeCustomPresetsToStorage(next);
+      if (!ok) {
+        console.warn('[lokvis] 自定义预设未持久化到 localStorage,仅当前会话有效');
+      }
+      setPresets(next);
+      return preset;
+    },
+    [limit, isPro]
+  );
+
+  const remove = useCallback((id: string) => {
+    const current = readCustomPresetsFromStorage();
+    const next = current.filter((p) => p.id !== id);
+    const ok = writeCustomPresetsToStorage(next);
+    if (!ok) {
+      console.warn('[lokvis] Failed to persist custom presets removal');
+    }
+    setPresets(next);
+  }, []);
+
+  const get = useCallback((id: string): CustomSizePreset | null => {
+    const current = readCustomPresetsFromStorage();
+    return current.find((p) => p.id === id) ?? null;
+  }, []);
+
+  const canSaveMore = presets.length < limit;
+  const remaining = Math.max(0, limit - presets.length);
+
+  return {
+    presets,
+    save,
+    remove,
+    get,
+    limit,
+    canSaveMore,
+    remaining,
+  };
+}

package/src/hooks/useLokvis.ts

@@ -14,12 +14,20 @@
  *   return <Workspace />;
  * }
  * ```
+ *
+ * @example 接 cloud session(W17.6)
+ * ```tsx
+ * const { runtime } = useLokvis({
+ *   plugins: [imageToolsPlugin()],
+ *   auth: { session: cloudJwt }, // → isPro: true,批量/槽位无上限
+ * });
+ * ```
  */
 
 import { useEffect, useRef, useState } from 'react';
 import { createLokvis } from '@lokvis/sdk';
 import type { LokvisRuntime, RuntimeConfig } from '@lokvis/runtime';
-import type { PluginLoadEntry } from '@lokvis/sdk';
+import type { LokvisAuthSession, PluginLoadEntry } from '@lokvis/sdk';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface UseLokvisOptions extends RuntimeConfig {
@@ -27,6 +35,16 @@ export interface UseLokvisOptions extends RuntimeConfig {
   plugins?: PluginLoadEntry[];
   /** 是否在挂载时自动初始化（默认 true） */
   autoInit?: boolean;
+  /**
+   * Cloud 注入的认证信息(W17.3 / W17.6)。
+   *
+   * 透传到 `createLokvis({ auth })`,SDK 据 presence 推导 `isPro`:
+   * - 传入非空 `session` 或 `token` 且未显式 `isPro: false` → Pro 模式
+   * - 不传 `auth`:保持 free 模式
+   *
+   * 详见 `@lokvis/sdk` 的 `LokvisAuthSession` 与 `resolveIsPro()` 文档。
+   */
+  auth?: LokvisAuthSession;
 }
 
 export interface UseLokvisResult {
@@ -36,29 +54,45 @@ export interface UseLokvisResult {
 }
 
 export function useLokvis(options: UseLokvisOptions = {}): UseLokvisResult {
-  const { plugins = [], autoInit = true, ...runtimeConfig } = options;
+  const { plugins = [], autoInit = true, auth, ...runtimeConfig } = options;
   const [runtime, setRuntime] = useState<LokvisRuntime | null>(null);
   const [status, setStatus] = useState<UseLokvisResult['status']>('idle');
   const [error, setError] = useState<string | null>(null);
-  const initRef = useRef(false);
 
   const storeInit = useWorkspaceStore((s) => s.init);
 
+  // 用 useRef 持有 plugins / runtimeConfig / auth / storeInit 的最新值,
+  // 避免 effect 依赖这些对象引用导致每次 render 都重新初始化 runtime。
+  // effect 仅在 authKey / autoInit 变化时触发,内部从 ref 读取当前值。
+  const pluginsRef = useRef(plugins);
+  const runtimeConfigRef = useRef(runtimeConfig);
+  const authRef = useRef(auth);
+  const storeInitRef = useRef(storeInit);
+  pluginsRef.current = plugins;
+  runtimeConfigRef.current = runtimeConfig;
+  authRef.current = auth;
+  storeInitRef.current = storeInit;
+
+  // 用 JSON.stringify(auth) 作为 effect 依赖,使 auth 变化时重新初始化。
+  // (auth 是对象,直接放依赖数组会因引用变化每次 render 都触发;
+  //  JSON.stringify 提供稳定的 primitive 依赖,只在 auth 内容变化时重 init)
+  const authKey = JSON.stringify(auth ?? null);
+
   useEffect(() => {
-    if (!autoInit || initRef.current) return;
-    initRef.current = true;
+    if (!autoInit) return;
 
     let cancelled = false;
     (async () => {
       try {
         setStatus('initializing');
         const rt = await createLokvis({
-          ...runtimeConfig,
-          plugins,
+          ...runtimeConfigRef.current,
+          plugins: pluginsRef.current,
+          auth: authRef.current,
         });
         if (cancelled) return;
         setRuntime(rt);
-        await storeInit(rt);
+        await storeInitRef.current(rt);
         if (cancelled) return;
         setStatus('ready');
       } catch (err) {
@@ -71,8 +105,7 @@ export function useLokvis(options: UseLokvisOptions = {}): UseLokvisResult {
     return () => {
       cancelled = true;
     };
-    // oxlint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [authKey, autoInit]);
 
   return { runtime, status, error };
 }

package/src/index.ts

@@ -23,15 +23,21 @@
  * - `useCommandPalette()` - ⌘K shortcut registration hook (W9.2)
  */
 
+// 引入设计 token(--lokvis-* CSS 变量),消费方无需手动 import styles.css。
+// sideEffects: ["**/*.css"] 保证 bundler 不 tree-shake 此 import。
+import '@lokvis/ui-core/styles.css';
+
 export { useLokvis, type UseLokvisOptions, type UseLokvisResult } from './hooks/useLokvis.js';
 export { useTheme, type UseThemeResult, type ThemeMode } from './hooks/useTheme.js';
 export { useMediaQuery, useBreakpoints, type Breakpoints } from './hooks/useMediaQuery.js';
 export { useWorkflows, FREE_WORKFLOW_LIMIT, PRO_WORKFLOW_LIMIT, type UseWorkflowsResult, type WorkflowSlot, type SaveWorkflowInput } from './hooks/useWorkflows.js';
+export { useCustomPresets, FREE_PRESET_LIMIT, PRO_PRESET_LIMIT, readCustomPresetsFromStorage, writeCustomPresetsToStorage, genCustomPresetId, type UseCustomPresetsResult, type CustomSizePreset, type SavePresetInput } from './hooks/useCustomPresets.js';
 export { useDebouncedRun, type UseDebouncedRunOptions, type UseDebouncedRunResult } from './hooks/useDebouncedRun.js';
 export { useShareLink, type UseShareLinkResult, encodeWorkflowForShare, decodeWorkflowFromShare } from './hooks/useShareLink.js';
 export { useWorkspaceStore, type WorkspaceState, type WorkspaceActions } from './store/index.js';
 
 export { Workspace, type WorkspaceProps } from './components/Workspace.js';
+export { ErrorBoundary, type ErrorBoundaryProps } from './components/ErrorBoundary.js';
 export { AssetPanel } from './components/AssetPanel.js';
 export { Canvas } from './components/Canvas.js';
 export { Inspector } from './components/Inspector.js';
@@ -50,6 +56,7 @@ export { GlobalDropzone, type GlobalDropzoneProps } from './components/GlobalDro
 export { CompareSlider, type CompareSliderProps } from './components/CompareSlider.js';
 export { DownloadPanel, type DownloadPanelProps } from './components/DownloadPanel.js';
 export { ThemeToggle, type ThemeToggleProps } from './components/ThemeToggle.js';
+export { ToolRunner, type ToolRunnerProps } from './components/ToolRunner.js';
 
 export {
   WORKFLOW_TEMPLATES,

package/src/store/assets-slice.ts

@@ -1,5 +1,12 @@
 /**
  * Assets slice —— 资产导入 / 选择 / 删除 / 缩略图
+ *
+ * TD-5.1 长期方案:缩略图 ObjectURL 的创建 / 替换 / 释放统一在 store 内管理,
+ * 消除原先"创建在 AssetPanel effect、释放在 removeAsset action"的跨边界脆弱性。
+ * - ensureThumbnails:iterate assets → exportAsset → createObjectURL → setThumbnail
+ * - setThumbnail:替换时自动 revoke 旧 ObjectURL
+ * - removeAsset:删除时 revoke ObjectURL + 清理 entry
+ * inflight 去重通过闭包捕获的 Set(非响应式,不触发额外 re-render)。
  */
 import type { StateCreator } from 'zustand';
 import type { WorkspaceStore, WorkspaceState, WorkspaceActions } from './types.js';
@@ -8,7 +15,12 @@ export interface AssetsSlice
   extends Pick<WorkspaceState, 'assets' | 'selectedAssetId' | 'thumbnails'>,
     Pick<
       WorkspaceActions,
-      'refreshAssets' | 'importFiles' | 'selectAsset' | 'setThumbnail' | 'removeAsset'
+      | 'refreshAssets'
+      | 'importFiles'
+      | 'selectAsset'
+      | 'setThumbnail'
+      | 'ensureThumbnails'
+      | 'removeAsset'
     > {}
 
 export const createAssetsSlice: StateCreator<
@@ -16,61 +28,103 @@ export const createAssetsSlice: StateCreator<
   [],
   [],
   AssetsSlice
-> = (set, get) => ({
-  assets: [],
-  selectedAssetId: null,
-  thumbnails: {},
+> = (set, get) => {
+  // TD-5.1:per-store inflight 缩略图去重(闭包捕获,非响应式,不触发 re-render)
+  const inflightThumbnails = new Set<string>();
 
-  async refreshAssets() {
-    const { runtime } = get();
-    if (!runtime) return;
-    const assets = await runtime.listAssets();
-    set({ assets });
-  },
+  return {
+    assets: [],
+    selectedAssetId: null,
+    thumbnails: {},
 
-  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();
-    await get().refreshStorageUsage();
-    set({ statusMessage: `Imported ${files.length} file(s)` });
-  },
+    async refreshAssets() {
+      const { runtime } = get();
+      if (!runtime) return;
+      const assets = await runtime.listAssets();
+      set({ assets });
+    },
 
-  selectAsset(id) {
-    set({ selectedAssetId: id });
-  },
-
-  setThumbnail(id, url) {
-    set((state) => ({ thumbnails: { ...state.thumbnails, [id]: url } }));
-  },
+    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();
+      await get().refreshStorageUsage();
+      set({ statusMessage: `Imported ${files.length} file(s)` });
+    },
 
-  async removeAsset(id) {
-    const { runtime } = get();
-    if (!runtime) return;
-    await runtime.removeAsset(id);
-    await get().refreshAssets();
-    await get().refreshStorageUsage();
-    if (get().selectedAssetId === id) set({ selectedAssetId: null });
+    selectAsset(id) {
+      set({ selectedAssetId: id });
+    },
 
-    // 修复 review 报告：原实现删除 asset 后未 revoke 缩略图 ObjectURL，导致
-    // 浏览器 Blob 引用泄漏（每删一张图就漏一个 blob 内存）。
-    // 同时从 thumbnails map 中删除该 entry，避免 stale ref
-    const oldUrl = get().thumbnails[id];
-    if (oldUrl) {
-      try {
-        URL.revokeObjectURL(oldUrl);
-      } catch {
-        /* URL 已失效或非 ObjectURL，忽略 */
-      }
+    setThumbnail(id, url) {
+      // TD-5.1:替换时 revoke 旧 ObjectURL,集中管理释放,避免孤儿 URL
       set((state) => {
-        const next = { ...state.thumbnails };
-        delete next[id];
-        return { thumbnails: next };
+        const old = state.thumbnails[id];
+        if (old) {
+          try {
+            URL.revokeObjectURL(old);
+          } catch {
+            /* URL 已失效或非 ObjectURL,忽略 */
+          }
+        }
+        return { thumbnails: { ...state.thumbnails, [id]: url } };
       });
-    }
-  },
-});
+    },
+
+    ensureThumbnails() {
+      const { runtime, assets, thumbnails } = get();
+      if (!runtime) return;
+      for (const asset of assets) {
+        if (thumbnails[asset.id]) continue;
+        if (asset.type !== 'image') continue;
+        if (inflightThumbnails.has(asset.id)) continue;
+        inflightThumbnails.add(asset.id);
+        void (async () => {
+          try {
+            const blob = await runtime.exportAsset(asset.id);
+            const url = URL.createObjectURL(blob);
+            // 资产可能在 await 期间被删除:若已不在 assets 中,revoke URL 不入 store
+            if (!get().assets.some((a) => a.id === asset.id)) {
+              URL.revokeObjectURL(url);
+              return;
+            }
+            get().setThumbnail(asset.id, url);
+          } catch {
+            // export 失败,不留缩略图(下次 ensureThumbnails 会重试)
+          } finally {
+            inflightThumbnails.delete(asset.id);
+          }
+        })();
+      }
+    },
+
+    async removeAsset(id) {
+      const { runtime } = get();
+      if (!runtime) return;
+      await runtime.removeAsset(id);
+      await get().refreshAssets();
+      await get().refreshStorageUsage();
+      if (get().selectedAssetId === id) set({ selectedAssetId: null });
+
+      // TD-5.1:删除资产时 revoke 缩略图 ObjectURL + 清理 entry(与 setThumbnail
+      // 的 replace-revoke 一起,构成"创建/替换/释放"全在 store 内的闭环)
+      const oldUrl = get().thumbnails[id];
+      if (oldUrl) {
+        try {
+          URL.revokeObjectURL(oldUrl);
+        } catch {
+          /* URL 已失效或非 ObjectURL,忽略 */
+        }
+        set((state) => {
+          const next = { ...state.thumbnails };
+          delete next[id];
+          return { thumbnails: next };
+        });
+      }
+    },
+  };
+};

package/src/store/capabilities-slice.ts

@@ -6,7 +6,7 @@ import type { CapabilityMap } from '../types.js';
 import type { WorkspaceStore, WorkspaceState, WorkspaceActions } from './types.js';
 
 export interface CapabilitiesSlice
-  extends Pick<WorkspaceState, 'capabilities' | 'capabilityMap'>,
+  extends Pick<WorkspaceState, 'capabilities' | 'capabilityMap' | 'stubCapabilities'>,
     Pick<WorkspaceActions, 'refreshCapabilities'> {}
 
 export const createCapabilitiesSlice: StateCreator<
@@ -17,6 +17,7 @@ export const createCapabilitiesSlice: StateCreator<
 > = (set, get) => ({
   capabilities: [],
   capabilityMap: {},
+  stubCapabilities: new Set<string>(),
 
   async refreshCapabilities() {
     const { runtime } = get();
@@ -24,6 +25,13 @@ export const createCapabilitiesSlice: StateCreator<
     const capabilities = await runtime.capabilities();
     const capabilityMap: CapabilityMap = {};
     for (const cap of capabilities) capabilityMap[cap.name] = cap;
-    set({ capabilities, capabilityMap });
+    // A7: 探测 stub-only 能力,供 UI 显示 "Coming Soon" 标记
+    const stubCapabilities = new Set<string>();
+    await Promise.all(
+      capabilities.map(async (cap) => {
+        if (await runtime.isStubOnly(cap.name)) stubCapabilities.add(cap.name);
+      })
+    );
+    set({ capabilities, capabilityMap, stubCapabilities });
   },
 });

package/src/store/index.ts

@@ -27,4 +27,4 @@ export const useWorkspaceStore = create<WorkspaceStore>()((...a) => ({
 }));
 
 export type { WorkspaceState, WorkspaceActions, WorkspaceStore } from './types.js';
-export { MAX_WORKFLOW_STEPS } from './types.js';
+export { MAX_WORKFLOW_STEPS } from '@lokvis/schema';