@lokvis/ui-react 0.2.2 → 0.4.1

package/src/components/Workspace.tsx

@@ -39,7 +39,7 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { ConfirmDialog, Icon } from '@lokvis/ui-core';
 import { useLokvis, type UseLokvisOptions } from '../hooks/useLokvis.js';
 import { useBreakpoints } from '../hooks/useMediaQuery.js';
 import { Toolbar } from './Toolbar.js';
@@ -56,6 +56,7 @@ import { DownloadPanel } from './DownloadPanel.js';
 import { CommandPalette, useCommandPalette } from './CommandPalette.js';
 import { GlobalDropzone } from './GlobalDropzone.js';
 import { ThemeToggle } from './ThemeToggle.js';
+import { ErrorBoundary } from './ErrorBoundary.js';
 import { useShareLink } from '../hooks/useShareLink.js';
 import { useWorkspaceStore } from '../store/index.js';
 
@@ -84,6 +85,27 @@ export interface WorkspaceProps extends UseLokvisOptions {
  enableErrorBanner?: boolean;
  /** 是否从 URL ?workflow= 参数加载分享工作流（默认 true,W11.5） */
  enableShareLink?: boolean;
+
+ /**
+  * 初始化时自动导入的资产列表。
+  * Runtime 就绪后,通过 runtime.importAsset() 逐个导入。
+  */
+ initialAssets?: Array<{ blob: Blob; name: string }>;
+ /**
+  * 初始化时预选的能力名称(自动添加到工作流节点)。
+  */
+ initialCapability?: string;
+ /**
+  * 初始化时预填的参数(与 initialCapability 配合使用)。
+  */
+ initialParams?: Record<string, unknown>;
+ /**
+  * 布局模式:
+  * - 'full': 完整三栏布局(默认)
+  * - 'focused': 精简模式,隐藏 AssetPanel 和 PipelineBar,适合单工具页跳转进入
+  */
+ mode?: 'full' | 'focused';
+
  className?: string;
 }
 
@@ -103,6 +125,10 @@ export function Workspace({
  enableProgressBar = true,
  enableErrorBanner = true,
  enableShareLink = true,
+ initialAssets,
+ initialCapability,
+ initialParams,
+ mode = 'full',
  className = '',
  ...lokvisOptions
 }: WorkspaceProps) {
@@ -114,39 +140,80 @@ export function Workspace({
 
  // W11.5: 从 URL ?workflow= 参数加载分享工作流(runtime 就绪后执行一次)
  // 保护:若用户已通过其它路径(如 localStorage 恢复或手动添加)有 nodes,
- // 不静默替换 —— 用 confirm 让用户显式选择,避免丢失未保存工作。
+ // 不静默替换 —— 用 ConfirmDialog 让用户显式选择,避免丢失未保存工作。
  // 注:不用 useWorkspaceStore 订阅 nodes.length 做 effect 依赖
  // (review 反馈:那样 nodesLength 变化会触发 effect 重跑,而 ref 已 true
  // 时重跑无意义,且语义上 effect 只应在 status 切换时跑一次)。
  // 改用 getState() 在体内读取最新值,既不订阅也不进 deps。
  const { loadFromCurrentUrl } = useShareLink();
  const shareLoadedRef = React.useRef(false);
+ // 待确认的分享链接替换(nodes>0 时需用户确认才替换)
+ const [shareConfirmOpen, setShareConfirmOpen] = React.useState(false);
+ const [shareConfirmNodes, setShareConfirmNodes] = React.useState(0);
  React.useEffect(() => {
  if (enableShareLink && !shareLoadedRef.current && status !== 'initializing' && status !== 'error') {
  shareLoadedRef.current = true;
- // 仅在 URL 含 ?workflow= 参数时才提示(避免无谓 confirm 弹窗)
+ // 仅在 URL 含 ?workflow= 参数时才提示(避免无谓弹窗)
  const hasShareParam = typeof window !== 'undefined'
  && new URLSearchParams(window.location.search).has('workflow');
  if (!hasShareParam) return;
  // 读取当前 nodes 长度(最新值,非订阅快照)
  const currentNodesLength = useWorkspaceStore.getState().nodes.length;
  if (currentNodesLength > 0) {
- const ok = window.confirm(
- `检测到分享工作流链接,但当前已有 ${currentNodesLength} 个节点。是否替换为分享的工作流?`
- );
- if (!ok) return;
+ setShareConfirmNodes(currentNodesLength);
+ setShareConfirmOpen(true);
+ return;
  }
  loadFromCurrentUrl();
  }
  }, [enableShareLink, status, loadFromCurrentUrl]);
 
+ // 初始化 props:runtime 就绪后导入资产、添加节点、填充参数
+ const initDoneRef = React.useRef(false);
+ React.useEffect(() => {
+  if (initDoneRef.current || status !== 'ready') return;
+  const store = useWorkspaceStore.getState();
+  if (!store.runtime) return;
+  initDoneRef.current = true;
+
+  (async () => {
+   // 导入初始资产
+   if (initialAssets?.length) {
+    for (const { blob, name } of initialAssets) {
+     const file = new File([blob], name, { type: blob.type });
+     await store.runtime!.importAsset({ kind: 'file', file });
+    }
+    await store.refreshAssets();
+    // 自动选中第一个资产
+    const assets = store.assets;
+    if (assets.length > 0) {
+     store.selectAsset(assets[0]!.id);
+    }
+   }
+
+   // 添加初始能力节点并填充参数
+   if (initialCapability) {
+    store.addNode(initialCapability);
+    if (initialParams) {
+     const nodes = useWorkspaceStore.getState().nodes;
+     const lastNode = nodes[nodes.length - 1];
+     if (lastNode) {
+      store.updateNodeParams(lastNode.id, initialParams);
+     }
+    }
+   }
+  })();
+ }, [status, initialAssets, initialCapability, initialParams]);
+
+ const isFocused = mode === 'focused';
+
  if (status === 'initializing') {
  return (
  <div className="flex h-full items-center justify-center">
  <div className="flex flex-col items-center gap-4">
  <div className="relative flex h-12 w-12 items-center justify-center">
  <div className="absolute inset-0 rounded-full border-2 border-[var(--lokvis-primary)]/40" />
- <div className="h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-indigo-500" />
+ <div className="h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-[var(--lokvis-primary)]" />
  </div>
  <div className="text-center">
  <p className="text-sm font-medium text-[var(--lokvis-fg-muted)]">Initializing Runtime</p>
@@ -214,6 +281,9 @@ export function Workspace({
  );
 
  return (
+ // D6: ErrorBoundary 捕获子组件渲染异常,避免整个 workspace 白屏。
+ // useLokvis 异常不在本组件树内(早于本 return),由消费方在外层包裹处理。
+ <ErrorBoundary>
  <div className={`flex h-full flex-col bg-[var(--lokvis-surface)] ${className}`}>
  {/* Top: Toolbar */}
  <Toolbar title={title} rightExtra={toolbarRight} />
@@ -232,6 +302,7 @@ export function Workspace({
  {/* Middle: Panel area */}
  <div className="flex flex-1 overflow-hidden relative">
  {/* W9.8 桌面:三栏并列;移动:Canvas 单独,其他为 overlay drawer */}
+ {!isFocused && (
  <div
  className={`${
  isMobile
@@ -243,6 +314,7 @@ export function Workspace({
  >
  <AssetPanel className="h-full" />
  </div>
+ )}
 
  <Canvas enableCompare={enableCompare} />
 
@@ -259,7 +331,7 @@ export function Workspace({
  </div>
 
  {/* W9.8 移动端遮罩:点击关闭抽屉 */}
- {isMobile && mobilePanel !== null && (
+ {isMobile && mobilePanel !== null && !isFocused && (
  <button
  type="button"
  aria-label="Close panel"
@@ -270,7 +342,7 @@ export function Workspace({
  </div>
 
  {/* Pipeline bar */}
- {enableWorkflowEditor ? <WorkflowEditor /> : <PipelineBar />}
+ {!isFocused && (enableWorkflowEditor ? <WorkflowEditor /> : <PipelineBar />)}
 
  {/* W11.6 ProgressBar + Cancel */}
  {enableProgressBar && <ProgressBar />}
@@ -283,6 +355,21 @@ export function Workspace({
 
  {/* Bottom: StatusBar */}
  {showStatusBar && <StatusBar />}
+
+ {/* W11.5 分享链接替换确认(替代 window.confirm) */}
+ <ConfirmDialog
+ open={shareConfirmOpen}
+ title="加载分享工作流"
+ message={`检测到分享工作流链接,但当前已有 ${shareConfirmNodes} 个节点。是否替换为分享的工作流?`}
+ confirmText="替换"
+ variant="danger"
+ onConfirm={() => {
+ setShareConfirmOpen(false);
+ loadFromCurrentUrl();
+ }}
+ onClose={() => setShareConfirmOpen(false)}
+ />
  </div>
+ </ErrorBoundary>
  );
 }

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

@@ -31,11 +31,13 @@ export { useLokvis, type UseLokvisOptions, type UseLokvisResult } from './hooks/
 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';
@@ -54,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,