@lokvis/ui-react 0.1.0 → 0.2.0

package/src/components/GlobalDropzone.tsx

@@ -0,0 +1,220 @@
+/**
+ * GlobalDropzone - 全屏拖拽导入区 + MIME 类型校验(W9.3)
+ *
+ * 当用户拖拽文件进入窗口时,显示全屏遮罩引导用户拖到任意位置即可导入。
+ * 通过 `accept` 白名单做 MIME 类型校验,拒绝类型时给出视觉反馈 + 警告。
+ *
+ * 工作机制:
+ *   1. 监听 window dragenter / dragover / dragleave / drop 事件
+ *   2. dragenter 显示遮罩,dragleave(离开 window)隐藏
+ *   3. drop 时校验文件类型 → 合法则 importFiles,非法则提示拒绝原因
+ *
+ * MIME 校验:
+ *   - 默认接受所有 image/* 类型(以及 video/audio/pdf 等,与 workspace 多媒体定位对齐)
+ *   - 拒绝类型在遮罩中央显示红色提示,并阻止导入
+ *
+ * 与 AssetPanel / Canvas 内置的局部 dropzone 互不冲突:它们各自处理自己的
+ * drop 事件并 `stopPropagation()`,本组件的 window drop 监听不会触发。
+ *
+ * 防御性兜底:即便子组件忘了 `stopPropagation`,本组件也会再次处理 drop 事件,
+ * 但通过 `importFiles` 的幂等性(以 File 引用去重)— 不,File 引用并不去重,
+ * 所以子组件**必须** `stopPropagation()`。本组件在 drop 事件触发时,先检查
+ * `e.defaultPrevented`(子组件会 `preventDefault()` 表明已处理),若已处理
+ * 则直接 return,避免双重导入。
+ *
+ * @example
+ * ```tsx
+ * <GlobalDropzone accept="image/*" />
+ * ```
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface GlobalDropzoneProps {
+  /** 接受的 MIME 类型(逗号分隔),默认接受图片/视频/音频/PDF */
+  accept?: string;
+  className?: string;
+}
+
+/** 默认接受的类型:与 Workspace 多媒体定位对齐 */
+const DEFAULT_ACCEPT = 'image/*,video/*,audio/*,application/pdf';
+
+/** 检查单个文件是否符合 accept 白名单 */
+function isFileAccepted(file: File, accept: string): boolean {
+  if (!accept) return true;
+  const patterns = accept.split(',').map((p) => p.trim().toLowerCase()).filter(Boolean);
+  if (patterns.length === 0) return true;
+  const mime = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return patterns.some((p) => {
+    // image/* → image/(prefix match)
+    if (p.endsWith('/*')) {
+      return mime.startsWith(p.slice(0, -1));
+    }
+    // image/jpeg → exact mime match
+    if (p.includes('/')) {
+      return mime === p;
+    }
+    // .png → extension match
+    if (p.startsWith('.')) {
+      return name.endsWith(p);
+    }
+    return false;
+  });
+}
+
+export function GlobalDropzone({
+  accept = DEFAULT_ACCEPT,
+  className = '',
+}: GlobalDropzoneProps) {
+  const importFiles = useWorkspaceStore((s) => s.importFiles);
+  const setStatus = useWorkspaceStore((s) => s.setStatus);
+  const setError = useWorkspaceStore((s) => s.setError);
+
+  // dragCounter:用计数器而非布尔,避免子元素 dragenter/dragleave 触发抖动
+  const [dragCounter, setDragCounter] = React.useState(0);
+  const [rejectedFiles, setRejectedFiles] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    // 阻止浏览器默认行为(打开文件 / 下载),否则 drop 不会触发
+    const preventDefault = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    // dragenter:进入窗口,计数 +1
+    const onDragEnter = (e: DragEvent) => {
+      preventDefault(e);
+      if (e.dataTransfer?.types?.includes('Files')) {
+        setDragCounter((c) => c + 1);
+        setRejectedFiles([]);
+      }
+    };
+    // dragover:必须 preventDefault 才能触发 drop
+    const onDragOver = (e: DragEvent) => {
+      preventDefault(e);
+      if (e.dataTransfer) {
+        // 显示 drop 效果
+        e.dataTransfer.dropEffect = 'copy';
+      }
+    };
+    // dragleave:离开窗口,计数 -1
+    const onDragLeave = (e: DragEvent) => {
+      preventDefault(e);
+      // 只在离开 window 时(relatedTarget 为 null 或 document.documentElement)减计数
+      // relatedTarget 为 null 表示离开文档边界
+      if (e.relatedTarget === null) {
+        setDragCounter(0);
+        setRejectedFiles([]);
+      }
+    };
+    // drop:校验 + 导入
+    const onDrop = (e: DragEvent) => {
+      // 兜底:子组件(Canvas / AssetPanel)若已处理 drop 并 preventDefault(),
+      // 表明文件已导入,本组件跳过避免双重导入。子组件仍需 stopPropagation()
+      // 防止事件冒泡到 window,这里 defaultPrevented 是双保险。
+      if (e.defaultPrevented) {
+        setDragCounter(0);
+        return;
+      }
+      preventDefault(e);
+      setDragCounter(0);
+      const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+      if (files.length === 0) return;
+
+      const accepted: File[] = [];
+      const rejected: string[] = [];
+      for (const file of files) {
+        if (isFileAccepted(file, accept)) {
+          accepted.push(file);
+        } else {
+          rejected.push(`${file.name} (${file.type || 'unknown'})`);
+        }
+      }
+      if (rejected.length > 0) {
+        setRejectedFiles(rejected);
+        // 5 秒后自动清空拒绝提示
+        setTimeout(() => setRejectedFiles([]), 5000);
+      }
+      if (accepted.length > 0) {
+        void importFiles(accepted);
+      } else {
+        setStatus(`Rejected ${rejected.length} file(s) — unsupported type`);
+        setError(null);
+      }
+    };
+
+    window.addEventListener('dragenter', onDragEnter);
+    window.addEventListener('dragover', onDragOver);
+    window.addEventListener('dragleave', onDragLeave);
+    window.addEventListener('drop', onDrop);
+    return () => {
+      window.removeEventListener('dragenter', onDragEnter);
+      window.removeEventListener('dragover', onDragOver);
+      window.removeEventListener('dragleave', onDragLeave);
+      window.removeEventListener('drop', onDrop);
+    };
+  }, [accept, importFiles, setStatus, setError]);
+
+  const isDragging = dragCounter > 0;
+  const hasRejections = rejectedFiles.length > 0;
+
+  if (!isDragging && !hasRejections) return null;
+
+  return (
+    <div
+      className={`pointer-events-none fixed inset-0 z-40 flex items-center justify-center p-8 ${className}`}
+      role="alertdialog"
+      aria-live="polite"
+    >
+      {/* 遮罩 */}
+      <div className="absolute inset-0 bg-indigo-50/80 backdrop-blur-sm dark:bg-indigo-950/60" />
+
+      {/* 内容 */}
+      <div
+        className={`relative w-full max-w-md rounded-2xl border-2 border-dashed p-8 text-center bg-white shadow-2xl dark:bg-zinc-900 ${
+          hasRejections ? 'border-red-400 dark:border-red-600' : 'border-indigo-500 dark:border-indigo-400'
+        }`}
+      >
+        {hasRejections ? (
+          <>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/40">
+              <Icon size={24} className="text-red-500" strokeWidth={2}>
+                <circle cx="12" cy="12" r="10" />
+                <line x1="15" y1="9" x2="9" y2="15" />
+                <line x1="9" y1="9" x2="15" y2="15" />
+              </Icon>
+            </div>
+            <p className="mt-3 text-sm font-semibold text-red-700 dark:text-red-400">
+              Unsupported file type
+            </p>
+            <p className="mt-1.5 text-xs text-red-600/80 dark:text-red-400/70">
+              {rejectedFiles.join(', ')}
+            </p>
+            <p className="mt-2 text-[10px] text-zinc-500">
+              Accepted: {accept || 'all files'}
+            </p>
+          </>
+        ) : (
+          <>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/40">
+              <Icon size={24} className="text-indigo-500" strokeWidth={1.5}>
+                <path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+              </Icon>
+            </div>
+            <p className="mt-3 text-sm font-semibold text-indigo-700 dark:text-indigo-300">
+              Drop files to import
+            </p>
+            <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+              Files are processed locally in your browser
+            </p>
+            <p className="mt-2 text-[10px] text-zinc-400">
+              Accepted: {accept || 'all files'}
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/HistoryPanel.tsx

@@ -1,127 +1,254 @@
 /**
- * HistoryPanel - 处理历史面板
+ * HistoryPanel - 历史栈面板(W7.1 / W9.1)
  *
- * 监听 Runtime 事件，记录最近处理过的资产与工作流执行。
- * MVP 仅做只读展示，撤销/重做通过 Runtime API（已留接口）。
+ * 展示当前工作流的执行历史,支持:
+ * - Undo / Redo 按钮(根据 cursor 禁用)
+ * - 点击条目直接跳转(jumpTo)
+ * - cursor 当前位置高亮,cursor 之后的条目标灰(redo 分支)
+ *
+ * W9.1: 支持 `variant` 切换布局方向
+ *   - `vertical`(默认):侧栏垂直布局,适合嵌入左/右栏
+ *   - `horizontal`:底部横条布局,作为底部 history bar 使用
+ *
+ * 数据来自 history-slice(store 单一来源),由 runtime-slice 的
+ * history:changed 订阅自动更新,组件无需自行订阅事件。
+ *
+ * 历史条目渲染:把 HistoryEntry 的 capability + params 摘要为可读标签。
  */
 
-import * as React from 'react';
-import type { LokvisEvent } from '@lokvis/schema';
+import type { HistoryEntry } from '@lokvis/schema';
+import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 
-interface HistoryItem {
-  id: string;
-  type: string;
-  message: string;
-  timestamp: number;
-}
-
 export interface HistoryPanelProps {
   className?: string;
-  /** 最大记录数 */
-  maxItems?: number;
+  /** 布局方向(W9.1):vertical 侧栏,horizontal 底部横条 */
+  variant?: 'vertical' | 'horizontal';
 }
 
-export function HistoryPanel({ className = '', maxItems = 50 }: HistoryPanelProps) {
-  const runtime = useWorkspaceStore((s) => s.runtime);
-  const [items, setItems] = React.useState<HistoryItem[]>([]);
+export function HistoryPanel({ className = '', variant = 'vertical' }: HistoryPanelProps) {
+  const entries = useWorkspaceStore((s) => s.historyEntries);
+  const cursor = useWorkspaceStore((s) => s.historyCursor);
+  const workflowId = useWorkspaceStore((s) => s.historyWorkflowId);
+  const undo = useWorkspaceStore((s) => s.undo);
+  const redo = useWorkspaceStore((s) => s.redo);
+  const jumpTo = useWorkspaceStore((s) => s.jumpToHistory);
+
+  const canUndo = cursor >= 0;
+  const canRedo = cursor < entries.length - 1;
+  const horizontal = variant === 'horizontal';
 
-  React.useEffect(() => {
-    if (!runtime) return;
-    const push = (e: LokvisEvent) => {
-      const item: HistoryItem = {
-        id: `${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
-        type: e.type,
-        message: formatEvent(e),
-        timestamp: Date.now(),
-      };
-      setItems((prev) => [item, ...prev].slice(0, maxItems));
-    };
-    // 使用 onAny 订阅所有事件，避免枚举所有类型
-    const off = runtime.eventBus.onAny(push);
-    return () => {
-      off();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runtime]);
+  const undoBtn = (
+    <button
+      type="button"
+      onClick={() => void undo()}
+      disabled={!canUndo}
+      aria-label="Undo"
+      className="rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    >
+      <Icon size={13}>
+        <path d="M9 14L4 9l5-5" />
+        <path d="M4 9h11a4 4 0 0 1 0 8h-3" />
+      </Icon>
+    </button>
+  );
+  const redoBtn = (
+    <button
+      type="button"
+      onClick={() => void redo()}
+      disabled={!canRedo}
+      aria-label="Redo"
+      className="rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    >
+      <Icon size={13}>
+        <path d="M15 14l5-5-5-5" />
+        <path d="M20 9H9a4 4 0 0 0 0 8h3" />
+      </Icon>
+    </button>
+  );
 
+  const headerEl = (
+    <div
+      className={`flex shrink-0 items-center justify-between px-3 ${
+        horizontal ? 'h-full border-r border-zinc-200 dark:border-zinc-800' : 'h-10 border-b border-zinc-200 dark:border-zinc-800'
+      }`}
+    >
+      <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+        History
+      </span>
+      <div className="flex items-center gap-0.5">
+        {undoBtn}
+        {redoBtn}
+      </div>
+    </div>
+  );
+
+  // 空状态
+  if (!workflowId || entries.length === 0) {
+    return (
+      <aside
+        className={`flex shrink-0 ${
+          horizontal
+            ? 'h-12 flex-row items-center border-t border-zinc-200 dark:border-zinc-800'
+            : 'w-48 flex-col border-r border-zinc-200 dark:border-zinc-800'
+        } ${className}`}
+        aria-label="History panel"
+      >
+        {headerEl}
+        <p className="px-3 text-[10px] text-zinc-400">No history yet</p>
+      </aside>
+    );
+  }
+
+  if (horizontal) {
+    // 横向布局:header | entries(横向滚动)
+    return (
+      <aside
+        className={`flex h-12 shrink-0 items-stretch border-t border-zinc-200 dark:border-zinc-800 ${className}`}
+        aria-label="History panel"
+      >
+        {headerEl}
+        <ol className="flex flex-1 items-center gap-1 overflow-x-auto px-2">
+          {/* 初始状态项 */}
+          <li className="shrink-0">
+            <button
+              type="button"
+              onClick={() => void jumpTo(-1)}
+              className={`flex items-center gap-1.5 rounded px-2 py-1 text-[10px] transition-colors ${
+                cursor === -1
+                  ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                  : 'text-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800'
+              }`}
+            >
+              <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-zinc-300 dark:bg-zinc-600" aria-hidden="true" />
+              <span className="truncate">Initial</span>
+            </button>
+          </li>
+          {entries.map((entry, i) => {
+            const isCurrent = i === cursor;
+            const isRedoBranch = i > cursor;
+            return (
+              <li key={entry.id} className="shrink-0">
+                <button
+                  type="button"
+                  onClick={() => void jumpTo(i)}
+                  aria-current={isCurrent ? 'step' : undefined}
+                  className={`flex items-center gap-1.5 rounded px-2 py-1 text-[10px] transition-colors ${
+                    isCurrent
+                      ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                      : isRedoBranch
+                      ? 'text-zinc-300 hover:bg-zinc-50 dark:text-zinc-600 dark:hover:bg-zinc-800/50'
+                      : 'text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-800'
+                  }`}
+                >
+                  <span
+                    className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                      isCurrent
+                        ? 'bg-indigo-500'
+                        : isRedoBranch
+                        ? 'bg-zinc-200 dark:bg-zinc-700'
+                        : 'bg-zinc-400 dark:bg-zinc-500'
+                    }`}
+                    aria-hidden="true"
+                  />
+                  <span className="truncate font-medium">{describeHistoryEntry(entry)}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </aside>
+    );
+  }
+
+  // 垂直布局(原实现)
   return (
     <aside
-      className={`flex h-32 flex-col border-t border-zinc-200 bg-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-950/50 ${className}`}
+      className={`flex w-48 shrink-0 flex-col border-r border-zinc-200 dark:border-zinc-800 ${className}`}
+      aria-label="History panel"
     >
-      <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-1.5 dark:border-zinc-800">
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-          History
-        </h3>
-        {items.length > 0 && (
-          <button
-            type="button"
-            onClick={() => setItems([])}
-            className="text-xs text-zinc-400 hover:text-zinc-600"
-          >
-            Clear
-          </button>
-        )}
-      </div>
-      <div className="flex-1 overflow-x-auto overflow-y-hidden px-2 py-1.5">
-        {items.length === 0 ? (
-          <p className="px-2 text-xs text-zinc-400">No history yet</p>
-        ) : (
-          <ul className="flex h-full items-stretch gap-1.5">
-            {items.map((item) => (
-              <li
-                key={item.id}
-                className="flex w-56 flex-none flex-col justify-between rounded border border-zinc-200 bg-white px-2 py-1 text-xs dark:border-zinc-800 dark:bg-zinc-900"
-              >
-                <div className="flex items-center justify-between gap-2">
-                  <span className="font-mono text-[10px] text-zinc-400">
-                    {new Date(item.timestamp).toLocaleTimeString()}
-                  </span>
-                  <span className="font-mono text-[10px] text-zinc-400">{item.type}</span>
-                </div>
-                <div className="truncate text-zinc-600 dark:text-zinc-300" title={item.message}>
-                  {item.message}
-                </div>
+      {headerEl}
+      <div className="flex-1 overflow-y-auto px-2 py-2">
+        <ol className="space-y-0.5">
+          {/* 初始状态项(index=-1) */}
+          <li>
+            <button
+              type="button"
+              onClick={() => void jumpTo(-1)}
+              className={`flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-[10px] transition-colors ${
+                cursor === -1
+                  ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                  : 'text-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800'
+              }`}
+            >
+              <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-zinc-300 dark:bg-zinc-600" aria-hidden="true" />
+              <span className="truncate">Initial</span>
+            </button>
+          </li>
+          {entries.map((entry, i) => {
+            const isCurrent = i === cursor;
+            const isRedoBranch = i > cursor;
+            return (
+              <li key={entry.id}>
+                <button
+                  type="button"
+                  onClick={() => void jumpTo(i)}
+                  aria-current={isCurrent ? 'step' : undefined}
+                  className={`flex w-full items-start gap-1.5 rounded px-2 py-1 text-left text-[10px] transition-colors ${
+                    isCurrent
+                      ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:ring-indigo-800'
+                      : isRedoBranch
+                      ? 'text-zinc-300 hover:bg-zinc-50 dark:text-zinc-600 dark:hover:bg-zinc-800/50'
+                      : 'text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-800'
+                  }`}
+                >
+                  <span
+                    className={`mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full ${
+                      isCurrent
+                        ? 'bg-indigo-500'
+                        : isRedoBranch
+                        ? 'bg-zinc-200 dark:bg-zinc-700'
+                        : 'bg-zinc-400 dark:bg-zinc-500'
+                    }`}
+                    aria-hidden="true"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate font-medium">
+                      {describeHistoryEntry(entry)}
+                    </div>
+                    <div className="text-[9px] text-zinc-400">
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </div>
+                  </div>
+                </button>
               </li>
-            ))}
-          </ul>
-        )}
+            );
+          })}
+        </ol>
       </div>
     </aside>
   );
 }
 
-function formatEvent(e: LokvisEvent): string {
-  switch (e.type) {
-    case 'asset:imported':
-      return `Imported ${e.metadata.mimeType}`;
-    case 'asset:removed':
-      return `Removed asset ${e.assetId.slice(0, 8)}`;
-    case 'workflow:started':
-      return `Workflow started: ${e.workflowId.slice(0, 8)}`;
-    case 'workflow:completed':
-      return `Workflow ${e.result.status} in ${e.result.duration}ms`;
-    case 'workflow:cancelled':
-      return 'Workflow cancelled';
-    case 'workflow:paused':
-      return 'Workflow paused';
-    case 'workflow:resumed':
-      return 'Workflow resumed';
-    case 'node:started':
-      return `Node started: ${e.nodeId.slice(0, 8)}`;
-    case 'node:finished':
-      return `Node finished: ${e.nodeId.slice(0, 8)} (${e.duration}ms)`;
-    case 'node:failed':
-      return `Node failed: ${e.error.message}`;
-    case 'plugin:loaded':
-      return `Plugin loaded: ${e.name}@${e.version}`;
-    case 'export:completed':
-      return `Exported ${e.format} (${(e.size / 1024).toFixed(1)} KB)`;
-    case 'capability:registered':
-      return `Capability registered: ${e.capability} (${e.engine})`;
-    case 'history:changed':
-      return `History changed (${e.entries.length} entries)`;
-    default:
-      return (e as { type: string }).type;
+/** 把 HistoryEntry 摘要为可读标签(capability 简称 + 关键参数) */
+function describeHistoryEntry(entry: HistoryEntry): string {
+  // image.resize → Resize;image.watermark → Watermark
+  const short = entry.capability.replace(/^image\./, '');
+  const cap = short.charAt(0).toUpperCase() + short.slice(1);
+  const params = entry.params ?? {};
+  // 摘取 1-2 个关键参数作为提示
+  const hints: string[] = [];
+  if (typeof params.width === 'number' || typeof params.width === 'string') {
+    hints.push(`${params.width}w`);
+  }
+  if (typeof params.quality === 'number') {
+    hints.push(`q${params.quality}`);
+  }
+  if (typeof params.format === 'string') {
+    hints.push(String(params.format));
+  }
+  if (typeof params.text === 'string' && params.text) {
+    hints.push(`"${String(params.text).slice(0, 8)}"`);
   }
+  return hints.length > 0 ? `${cap} (${hints.join(' ')})` : cap;
 }

package/src/components/Inspector.tsx

@@ -6,8 +6,10 @@
  */
 
 import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 import { ParamForm } from './ParamForm.js';
+import { ExifPanel } from './ExifPanel.js';
 
 export interface InspectorProps {
   className?: string;
@@ -48,6 +50,9 @@ export function Inspector({ className = '' }: InspectorProps) {
     <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 />
+
       {/* Configure section (when a node is selected) */}
       {showConfigure && (
         <div className="shrink-0 border-b border-zinc-200 dark:border-zinc-800">
@@ -57,7 +62,7 @@ export function Inspector({ className = '' }: InspectorProps) {
             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">
-              <svg className={`h-3 w-3 text-zinc-400 transition-transform ${configureOpen ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7"/></svg>
+              <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">
@@ -88,7 +93,7 @@ export function Inspector({ className = '' }: InspectorProps) {
         {/* Search */}
         <div className="px-2 py-2 border-b border-zinc-100 dark:border-zinc-800/50">
           <div className="relative">
-            <svg className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+            <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..."