@lokvis/ui-react 0.1.0 → 0.2.0

package/src/hooks/useShareLink.ts

@@ -0,0 +1,158 @@
+/**
+ * useShareLink - 分享链接生成与解析(W11.5)
+ *
+ * 把当前工作流节点序列编码为 base64 URL 参数,生成可分享的链接。
+ * 接收方打开链接即可还原工作流(本地 base64,无需 cloud 短链)。
+ *
+ * 编码格式:
+ *   `<origin><pathname>?workflow=<base64url-encoded-json>`
+ *
+ * 其中 JSON 结构为 `{ v: 1, nodes: [{c, p}] }`(v=版本号,向前兼容)。
+ * 使用 base64url 编码(URL 安全,无 +/= 字符)。
+ *
+ * 注意:
+ *   - base64 编码会膨胀约 33%,长工作流可能超过 URL 长度限制(浏览器 ~2KB 安全,~8KB 极限)
+ *   - 5 步工作流通常远小于限制
+ *   - 不包含 asset 引用(asset 是本地文件,无法跨设备分享)
+ *
+ * @module useShareLink
+ */
+
+import { useCallback } from 'react';
+import { useWorkspaceStore } from '../store/index.js';
+
+/** 分享链接编码的数据结构 */
+interface ShareableWorkflow {
+  /** 版本号(向前兼容) */
+  v: 1;
+  /** 节点序列(精简字段:c=capability, p=params) */
+  nodes: Array<{ c: string; p: Record<string, unknown> }>;
+}
+
+/** 标准 base64 → base64url(URL 安全: + → -, / → _, 去除 = 填充) */
+function toBase64Url(b64: string): string {
+  return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/** base64url → 标准 base64 */
+function fromBase64Url(b64url: string): string {
+  let b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
+  // 补齐 padding
+  const pad = b64.length % 4;
+  if (pad) b64 += '='.repeat(4 - pad);
+  return b64;
+}
+
+/** UTF-8 安全的 base64 编码(处理非 ASCII 字符如中文水印) */
+function encodeUtf8Base64Url(str: string): string {
+  const bytes = new TextEncoder().encode(str);
+  let binary = '';
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return toBase64Url(btoa(binary));
+}
+
+/** UTF-8 安全的 base64url 解码 */
+function decodeUtf8Base64Url(b64url: string): string {
+  const b64 = fromBase64Url(b64url);
+  const binary = atob(b64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new TextDecoder().decode(bytes);
+}
+
+/**
+ * 编码工作流节点为 base64url 字符串(用于分享链接)。
+ * 导出供测试与外部直接使用。
+ */
+export function encodeWorkflowForShare(
+  nodes: ReadonlyArray<{ capability: string; params: Record<string, unknown> }>
+): string {
+  const data: ShareableWorkflow = {
+    v: 1,
+    nodes: nodes.map((n) => ({ c: n.capability, p: n.params })),
+  };
+  return encodeUtf8Base64Url(JSON.stringify(data));
+}
+
+/**
+ * 解码 base64url 字符串为工作流节点。
+ * @returns 节点数组;解析失败返回 null。
+ */
+export function decodeWorkflowFromShare(
+  encoded: string
+): Array<{ capability: string; params: Record<string, unknown> }> | null {
+  try {
+    const json = decodeUtf8Base64Url(encoded);
+    const data = JSON.parse(json) as ShareableWorkflow;
+    if (!data || typeof data !== 'object' || data.v !== 1 || !Array.isArray(data.nodes)) {
+      return null;
+    }
+    return data.nodes.map((n) => ({
+      capability: String(n.c),
+      params: (n.p && typeof n.p === 'object' ? n.p : {}) as Record<string, unknown>,
+    }));
+  } catch {
+    return null;
+  }
+}
+
+export interface UseShareLinkResult {
+  /**
+   * 生成分享链接(基于当前 store 中的 nodes)。
+   * 返回完整 URL;若 nodes 为空返回 null。
+   */
+  generateShareUrl(): string | null;
+  /**
+   * 从 URL 解析工作流节点。
+   * @param url 完整 URL 或仅 search 部分
+   * @returns 节点数组;无 workflow 参数或解析失败返回 null
+   */
+  parseShareUrl(url: string): Array<{ capability: string; params: Record<string, unknown> }> | null;
+  /**
+   * 从当前页面 URL 加载工作流(若有 ?workflow=)。
+   * @returns true 表示成功加载并应用到 store
+   */
+  loadFromCurrentUrl(): boolean;
+}
+
+export function useShareLink(): UseShareLinkResult {
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const loadWorkflowTemplate = useWorkspaceStore((s) => s.loadWorkflowTemplate);
+
+  const generateShareUrl = useCallback((): string | null => {
+    if (nodes.length === 0) return null;
+    const encoded = encodeWorkflowForShare(nodes);
+    if (typeof window === 'undefined') return null;
+    const { origin, pathname } = window.location;
+    return `${origin}${pathname}?workflow=${encoded}`;
+  }, [nodes]);
+
+  const parseShareUrl = useCallback(
+    (url: string): Array<{ capability: string; params: Record<string, unknown> }> | null => {
+      const searchPart = url.includes('?') ? url.slice(url.indexOf('?') + 1) : '';
+      const params = new URLSearchParams(searchPart);
+      const encoded = params.get('workflow');
+      if (!encoded) return null;
+      return decodeWorkflowFromShare(encoded);
+    },
+    []
+  );
+
+  const loadFromCurrentUrl = useCallback((): boolean => {
+    if (typeof window === 'undefined') return false;
+    const parsed = parseShareUrl(window.location.href);
+    if (!parsed || parsed.length === 0) return false;
+    loadWorkflowTemplate(parsed);
+    return true;
+  }, [parseShareUrl, loadWorkflowTemplate]);
+
+  return {
+    generateShareUrl,
+    parseShareUrl,
+    loadFromCurrentUrl,
+  };
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,116 @@
+/**
+ * useTheme - 暗色模式切换 + 持久化(W9.7)
+ *
+ * 监听并切换 `<html>` 的 `.dark` / `.light` 类,与 `tokens.css` 双触发机制对齐:
+ *   - 显式设置:`document.documentElement.classList` 添加 `dark` 或 `light`
+ *   - 系统兜底:未显式设置时,`@media prefers-color-scheme` 自动生效
+ *
+ * 持久化:`localStorage.theme = 'dark' | 'light'`,刷新后恢复。
+ * 跨 tab 同步:监听 `storage` 事件,一个 tab 切换,其他 tab 同步生效。
+ *
+ * 系统偏好变化:未显式设置主题时,跟随 `matchMedia('(prefers-color-scheme: dark)')`。
+ *
+ * @example
+ * ```tsx
+ * const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme();
+ * ```
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+
+export type ThemeMode = 'light' | 'dark';
+
+const STORAGE_KEY = 'lokvis-theme';
+
+function readStoredTheme(): ThemeMode | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const v = window.localStorage.getItem(STORAGE_KEY);
+    if (v === 'light' || v === 'dark') return v;
+  } catch {
+    // localStorage 不可用(隐私模式 / iframe 沙箱)— 退回系统偏好
+  }
+  return null;
+}
+
+function readSystemTheme(): ThemeMode {
+  if (typeof window === 'undefined' || !window.matchMedia) return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+/** 把显式主题应用到 <html>(null 表示清空,回退到系统偏好) */
+function applyTheme(theme: ThemeMode | null) {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  root.classList.remove('dark', 'light');
+  if (theme === 'dark') root.classList.add('dark');
+  else if (theme === 'light') root.classList.add('light');
+  // theme === null: 两个类都不加 → 由 @media prefers-color-scheme 接管
+}
+
+export interface UseThemeResult {
+  /** 用户显式选择的主题(未设置时为 null,跟随系统) */
+  theme: ThemeMode | null;
+  /** 实际生效的主题(显式选择或系统偏好) */
+  resolvedTheme: ThemeMode;
+  /** 设置指定主题(传 null 表示跟随系统) */
+  setTheme(theme: ThemeMode | null): void;
+  /** 在 light / dark 之间切换(无显式主题时基于 resolvedTheme 决定下一态) */
+  toggleTheme(): void;
+}
+
+export function useTheme(): UseThemeResult {
+  const [theme, setThemeState] = useState<ThemeMode | null>(() => readStoredTheme());
+  const [systemTheme, setSystemTheme] = useState<ThemeMode>(() => readSystemTheme());
+
+  // 监听系统偏好变化(仅在用户未显式选择时影响 resolvedTheme)
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = () => setSystemTheme(mq.matches ? 'dark' : 'light');
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
+  // 应用主题到 <html>
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  // 跨 tab 同步:监听 storage 事件
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onStorage = (e: StorageEvent) => {
+      if (e.key !== STORAGE_KEY) return;
+      setThemeState(readStoredTheme());
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  const setTheme = useCallback((next: ThemeMode | null) => {
+    setThemeState(next);
+    try {
+      if (typeof window === 'undefined') return;
+      if (next === null) {
+        window.localStorage.removeItem(STORAGE_KEY);
+      } else {
+        window.localStorage.setItem(STORAGE_KEY, next);
+      }
+    } catch {
+      // 写入失败(隐私模式 / quota)— 不影响运行时切换,只是无法持久化
+    }
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    const resolved = theme ?? systemTheme;
+    setTheme(resolved === 'dark' ? 'light' : 'dark');
+  }, [theme, systemTheme, setTheme]);
+
+  return {
+    theme,
+    resolvedTheme: theme ?? systemTheme,
+    setTheme,
+    toggleTheme,
+  };
+}

package/src/hooks/useWorkflowProgress.ts

@@ -0,0 +1,41 @@
+/**
+ * useWorkflowProgress - 工作流执行进度(W11.6,review 抽取)
+ *
+ * 单一来源计算节点执行进度,供 ProgressBar / StatusBar 共用,
+ * 避免两组件各自从 nodes 重复计算 done/total/pct。
+ *
+ * 计算口径:
+ *   - done: 已结束节点(success + failed + cancelled)
+ *   - failedCount: 失败节点数(用于红色高亮)
+ *   - pct: 完成百分比(0-100),total=0 时为 0
+ *
+ * @module useWorkflowProgress
+ */
+
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface WorkflowProgress {
+  /** 节点总数 */
+  total: number;
+  /** 已结束节点数(success + failed + cancelled) */
+  done: number;
+  /** 失败节点数 */
+  failedCount: number;
+  /** 完成百分比(0-100) */
+  pct: number;
+  /** 是否有失败节点 */
+  hasFailure: boolean;
+}
+
+/** 计算工作流执行进度(单一来源,供 ProgressBar / StatusBar 共用) */
+export function useWorkflowProgress(): WorkflowProgress {
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const total = nodes.length;
+  const done = nodes.filter(
+    (n) => n.status === 'success' || n.status === 'failed' || n.status === 'cancelled'
+  ).length;
+  const failedCount = nodes.filter((n) => n.status === 'failed').length;
+  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+  const hasFailure = failedCount > 0;
+  return { total, done, failedCount, pct, hasFailure };
+}

package/src/hooks/useWorkflows.ts

@@ -0,0 +1,326 @@
+/**
+ * useWorkflows - 工作流槽位持久化 hook(W10.6 + W10.7)
+ *
+ * 提供 5 个工作流槽位的本地保存能力(免费 5 / Pro 无限),以及 JSON 导入/导出。
+ * 数据存储在 localStorage 的 `lokvis.workflows` key,JSON 数组形式。
+ *
+ * 与 useCustomPresets 的区别:
+ *   - 自定义预设是尺寸配置(width/height/fit)
+ *   - 工作流槽位是完整 Workflow 定义(含 nodes/edges/inputs/outputs)
+ *
+ * 序列化策略:
+ *   - 保存时用 workflowSchema.safeParse() 防御损坏数据(数据完整性)
+ *   - 加载时用 workflowSchema.safeParse() 过滤无效条目(向前兼容)
+ *   - JSON 导出:Workflow JSON + $schema 字段
+ *   - JSON 导入:validateWorkflow() 完整校验(含 capability 兼容性若提供回调)
+ *
+ * 多 tab / 多实例同步:
+ *   - 原生 storage 事件:跨 tab 同步
+ *   - 自定义 SYNC_EVENT:同 tab 多实例同步
+ *
+ * @module useWorkflows
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import type { Workflow } from '@lokvis/schema';
+import { workflowSchema, validateWorkflow, type ValidateWorkflowOptions } from '@lokvis/schema';
+
+const STORAGE_KEY = 'lokvis.workflows';
+/** 同 tab 多实例同步用的自定义事件名 */
+const SYNC_EVENT = 'lokvis:workflows-change';
+
+/** 免费用户工作流槽位上限 */
+export const FREE_WORKFLOW_LIMIT = 5;
+/** Pro 用户无上限 */
+export const PRO_WORKFLOW_LIMIT = Infinity;
+
+/** 工作流槽位存储格式 */
+export interface WorkflowSlot {
+  /** 唯一 ID */
+  id: string;
+  /** 用户自定义名称(默认取 workflow.name) */
+  name: string;
+  /** 完整 Workflow 定义 */
+  workflow: Workflow;
+  /** 创建时间戳 */
+  createdAt: number;
+  /** 最后更新时间戳 */
+  updatedAt: number;
+}
+
+/** 保存工作流时的输入 */
+export interface SaveWorkflowInput {
+  /** 工作流名称(可选,默认取 workflow.name) */
+  name?: string;
+  /** 完整 Workflow 定义 */
+  workflow: Workflow;
+  /** 若指定则更新该 id 的槽位,否则新增 */
+  id?: string;
+}
+
+export interface UseWorkflowsResult {
+  /** 当前所有工作流槽位(按 updatedAt 降序) */
+  slots: WorkflowSlot[];
+  /** 保存或更新工作流;超限时抛 Error */
+  save(input: SaveWorkflowInput): WorkflowSlot;
+  /** 按 id 删除槽位 */
+  remove(id: string): void;
+  /** 按 id 加载工作流到 store(返回 Workflow) */
+  load(id: string): Workflow | null;
+  /** 当前上限(免费 5 / Pro 无限) */
+  limit: number;
+  /** 是否还能再保存 */
+  canSaveMore: boolean;
+  /** 还能再保存多少个 */
+  remaining: number;
+  /** 导出工作流为 JSON 字符串(可直接下载) */
+  exportToJson(id: string): string | null;
+  /** 导出所有工作流为 JSON 数组字符串 */
+  exportAllToJson(): string;
+  /** 从 JSON 字符导入工作流(单个或数组);返回导入结果(含跳过原因) */
+  importFromJson(
+    json: string,
+    options?: { resolveCapability?: ValidateWorkflowOptions['resolveCapability']; maxSteps?: number }
+  ): { imported: number; skipped: Array<{ reason: string }> };
+}
+
+/** 类型守卫:判断 unknown 是否为 Record<string, unknown> */
+function isRecord(x: unknown): x is Record<string, unknown> {
+  return typeof x === 'object' && x !== null;
+}
+
+/** 从 localStorage 读取工作流槽位。
+ * 容错:JSON 解析失败 / 非数组 / 字段缺失时返回空数组。 */
+function readFromStorage(): WorkflowSlot[] {
+  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 [];
+    // 字段白名单过滤 + workflowSchema 校验(防御损坏数据)
+    return parsed.filter((it): it is WorkflowSlot => {
+      if (!isRecord(it)) return false;
+      if (
+        typeof it.id !== 'string' ||
+        typeof it.name !== 'string' ||
+        typeof it.createdAt !== 'number' ||
+        typeof it.updatedAt !== 'number'
+      ) {
+        return false;
+      }
+      // workflow 字段必须通过 schema 校验
+      const result = workflowSchema.safeParse(it.workflow);
+      return result.success;
+    });
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * 写入 localStorage。
+ * @returns true 成功;false 失败(隐私模式 / 配额超限 / 序列化异常)
+ * 失败时不静默:调用方需感知以便提示用户"保存失败,数据未持久化"
+ */
+function writeToStorage(slots: WorkflowSlot[]): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(slots));
+    window.dispatchEvent(new CustomEvent(SYNC_EVENT));
+    return true;
+  } catch (err) {
+    // 隐私模式 / Safari 配额 / QuotaExceededError:不静默吞错,
+    // 但也不抛错(保存是 fire-and-forget 操作);返回 false 让调用方决策。
+    console.warn('[lokvis] Failed to persist workflows to localStorage:', err);
+    return false;
+  }
+}
+
+/** 生成唯一 ID */
+function genId(): string {
+  return `wf-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+/**
+ * @param isPro 是否为 Pro 模式。父组件从 runtime.isPro 传入。
+ * 影响 limit:免费 5 / Pro 无上限。
+ */
+export function useWorkflows(isPro = false): UseWorkflowsResult {
+  const limit = isPro ? PRO_WORKFLOW_LIMIT : FREE_WORKFLOW_LIMIT;
+  const [slots, setSlots] = useState<WorkflowSlot[]>(() => readFromStorage());
+
+  // 监听跨 tab storage + 同 tab SYNC_EVENT
+  useEffect(() => {
+    const handler = () => setSlots(readFromStorage());
+    window.addEventListener('storage', handler);
+    window.addEventListener(SYNC_EVENT, handler);
+    return () => {
+      window.removeEventListener('storage', handler);
+      window.removeEventListener(SYNC_EVENT, handler);
+    };
+  }, []);
+
+  const save = useCallback(
+    (input: SaveWorkflowInput): WorkflowSlot => {
+      const current = readFromStorage();
+      const now = Date.now();
+      // 更新已有
+      if (input.id) {
+        const existing = current.find((s) => s.id === input.id);
+        if (existing) {
+          const updated: WorkflowSlot = {
+            ...existing,
+            name: input.name ?? input.workflow.name,
+            workflow: input.workflow,
+            updatedAt: now,
+          };
+          const next = current.map((s) => (s.id === input.id ? updated : s));
+          const ok = writeToStorage(next);
+          if (!ok) {
+            // 写入失败仍更新内存 state(用户当前会话可见),但提示未持久化
+            console.warn('[lokvis] 工作流未持久化到 localStorage,仅当前会话有效');
+          }
+          setSlots(next);
+          return updated;
+        }
+      }
+      // 新增
+      if (current.length >= limit) {
+        throw new Error(
+          `工作流槽位已达上限(${limit} 个)${isPro ? '' : ',升级 Pro 可无限制保存'}`
+        );
+      }
+      const slot: WorkflowSlot = {
+        id: genId(),
+        name: input.name ?? input.workflow.name,
+        workflow: input.workflow,
+        createdAt: now,
+        updatedAt: now,
+      };
+      const next = [...current, slot];
+      const ok = writeToStorage(next);
+      if (!ok) {
+        console.warn('[lokvis] 工作流未持久化到 localStorage,仅当前会话有效');
+      }
+      setSlots(next);
+      return slot;
+    },
+    [limit, isPro]
+  );
+
+  const remove = useCallback((id: string) => {
+    const current = readFromStorage();
+    const next = current.filter((s) => s.id !== id);
+    writeToStorage(next);
+    setSlots(next);
+  }, []);
+
+  const load = useCallback((id: string): Workflow | null => {
+    const current = readFromStorage();
+    const slot = current.find((s) => s.id === id);
+    return slot ? slot.workflow : null;
+  }, []);
+
+  const exportToJson = useCallback((id: string): string | null => {
+    const current = readFromStorage();
+    const slot = current.find((s) => s.id === id);
+    if (!slot) return null;
+    return JSON.stringify(slot.workflow, null, 2);
+  }, []);
+
+  const exportAllToJson = useCallback((): string => {
+    const current = readFromStorage();
+    return JSON.stringify(current.map((s) => s.workflow), null, 2);
+  }, []);
+
+  const importFromJson = useCallback(
+    (
+      json: string,
+      options?: {
+        resolveCapability?: ValidateWorkflowOptions['resolveCapability'];
+        maxSteps?: number;
+      }
+    ): { imported: number; skipped: Array<{ reason: string }> } => {
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(json);
+      } catch {
+        throw new Error('JSON 格式错误,无法解析');
+      }
+      const list: unknown[] = Array.isArray(parsed) ? parsed : [parsed];
+      const current = readFromStorage();
+      const imported: WorkflowSlot[] = [];
+      // 收集被跳过条目的原因,供调用方提示用户(不再静默吞错)
+      const skipped: Array<{ reason: string }> = [];
+      const now = Date.now();
+
+      for (const item of list) {
+        // 先做 zod 形状校验
+        const shapeResult = workflowSchema.safeParse(item);
+        if (!shapeResult.success) {
+          // 跳过无效条目而非抛错,继续处理后续;记录原因供调用方提示
+          const detail = shapeResult.error.issues
+            .map((i) => `${i.path.join('.') || '<root>'}: ${i.message}`)
+            .join('; ');
+          skipped.push({ reason: `shape validation failed: ${detail}` });
+          continue;
+        }
+        // 再做完整结构校验(含 capability 兼容性若提供回调)
+        const fullResult = validateWorkflow(item, options);
+        if (!fullResult.success) {
+          // 结构问题也跳过(导入是宽容操作,不阻断有效条目),但记录原因
+          const detail = fullResult.error.issues
+            .map((i) => i.message)
+            .join('; ');
+          skipped.push({ reason: `structural validation failed: ${detail}` });
+          continue;
+        }
+        // 检查上限
+        if (current.length + imported.length >= limit) {
+          throw new Error(
+            `导入会超过上限(${limit} 个),已导入 ${imported.length} 条,请先删除部分工作流`
+          );
+        }
+        imported.push({
+          id: genId(),
+          name: shapeResult.data.name,
+          workflow: shapeResult.data,
+          createdAt: now,
+          updatedAt: now,
+        });
+      }
+
+      if (imported.length === 0) {
+        // 不再以"没有有效工作流"作为唯一信息;把跳过原因一并抛出,
+        // 让用户知道为什么一个都没导入(而非笼统失败)
+        const skipSummary = skipped.length > 0
+          ? `; skipped: ${skipped.map((s) => s.reason).join(' | ')}`
+          : '';
+        throw new Error(`JSON 中没有有效的工作流定义${skipSummary}`);
+      }
+
+      const next = [...current, ...imported];
+      writeToStorage(next);
+      setSlots(next);
+      return { imported: imported.length, skipped };
+    },
+    [limit]
+  );
+
+  const canSaveMore = slots.length < limit;
+  const remaining = Math.max(0, limit - slots.length);
+
+  return {
+    slots,
+    save,
+    remove,
+    load,
+    limit,
+    canSaveMore,
+    remaining,
+    exportToJson,
+    exportAllToJson,
+    importFromJson,
+  };
+}

package/src/index.ts

@@ -11,20 +11,52 @@
  * - `<PipelineBar />` - Workflow pipeline step bar
  * - `<Toolbar />` - Top toolbar
  * - `<StatusBar />` - Bottom status bar
+ * - `<HistoryPanel />` - History panel (W7.1, supports horizontal variant W9.1)
+ * - `<CommandPalette />` - ⌘K command palette (W9.2)
+ * - `<GlobalDropzone />` - Full-screen drag-drop with MIME validation (W9.3)
+ * - `<CompareSlider />` - before/after comparison slider (W9.4)
+ * - `<DownloadPanel />` - Workflow outputs download panel (W9.5)
+ * - `<ThemeToggle />` - Dark mode toggle button (W9.7)
  * - `useLokvis()` - React hook for initializing Runtime + plugins
+ * - `useTheme()` - Dark mode hook with localStorage + system preference (W9.7)
+ * - `useMediaQuery()` / `useBreakpoints()` - Responsive hooks (W9.8)
+ * - `useCommandPalette()` - ⌘K shortcut registration hook (W9.2)
  */
 
 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 { 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 { AssetPanel } from './components/AssetPanel.js';
 export { Canvas } from './components/Canvas.js';
 export { Inspector } from './components/Inspector.js';
+export { ExifPanel, type ExifPanelProps } from './components/ExifPanel.js';
 export { PipelineBar } from './components/PipelineBar.js';
+export { WorkflowEditor, type WorkflowEditorProps } from './components/WorkflowEditor.js';
+export { ProgressBar, type ProgressBarProps } from './components/ProgressBar.js';
+export { ErrorBanner, type ErrorBannerProps } from './components/ErrorBanner.js';
+export { WorkflowTemplates, type WorkflowTemplatesProps } from './components/WorkflowTemplates.js';
 export { Toolbar } from './components/Toolbar.js';
 export { StatusBar } from './components/StatusBar.js';
 export { ParamForm, type ParamFormProps } from './components/ParamForm.js';
+export { HistoryPanel, type HistoryPanelProps } from './components/HistoryPanel.js';
+export { CommandPalette, useCommandPalette, type CommandPaletteProps, type UseCommandPaletteOptions } from './components/CommandPalette.js';
+export { GlobalDropzone, type GlobalDropzoneProps } from './components/GlobalDropzone.js';
+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 {
+  WORKFLOW_TEMPLATES,
+  type WorkflowTemplate,
+  type WorkflowTemplateNode,
+  findTemplate,
+} from './data/workflow-templates.js';
 
 export type {
   WorkspaceEvent,