@civilization/dsh-drawio 0.2.1 → 0.4.0

package/README.md

@@ -10,15 +10,29 @@
 - 编辑器资源由 DSH Host 从本机提供，不连接 diagrams.net。
 - 用户保存和 Agent 工具修改的是同一份 XML 文件。
 - 文件读取、写入、路径限制和审批继续经过 DSH 服务。
+- 提供 `drawio-operation` Skill 和 3 个模型专属工具。
 
-## Agent 工具
+## Agent 工具与 Skill
 
-- `drawio_inspect`：把画板读取为页面、节点、连线和几何信息。
-- `drawio_edit`：批量新增、更新、删除节点和连线。
+- `drawio-operation` Skill：向模型注入 Draw.io 画板整体架构、工业级排版规范、现代配色方案、离线导出机制与最佳绘图工作流。
+- `drawio_inspect`：把画板读取为页面、节点、连线和几何信息，自动提取去除 HTML 的纯文本标题与容器子节点列表。
+- `drawio_edit`：批量新增、更新、删除节点与连线，支持 `add_page`、`rename_page`、`delete_page` 多页面管理，以及 `stylePatch` 局部增量更新样式。
 - `drawio_write`：校验并写入完整的 Draw.io XML。
 
-工具统一保存为未压缩 XML，便于 Agent 继续修改，也便于 Git 查看差异。画板会
-自动保存，并轮询同步 Agent 对同一文件的修改。
+工具统一保存为未压缩 XML，便于 Agent 继续修改，也便于 Git 查看差异。画板具备真乐观并发控制（防静默覆盖冲突），并采用轻量版本感知机制自动同步 Agent 对同一文件的修改。
+
+## 本地离线图片导出 (Export)
+
+由于 Draw.io 原版导出功能依赖云端渲染服务（`export.diagrams.net`），在离线及局域网环境下无法正常工作。本插件基于 Draw.io 离线内核的 Embed 消息通道与 Canvas / SVG 渲染协议，实现了**100% 纯本地离线图片导出引擎**：
+
+- **支持格式**：
+  - **PNG (超清 2x)**：采用高倍率抗锯齿光栅化渲染，支持透明背景切换，适合插入文档和交流汇报；
+  - **SVG (矢量图)**：提取无损矢量图形，任意放大不失真；
+  - **XML-PNG (可编辑图)**：在 PNG 图像中内嵌图表 XML 原数据，既能作为常规图片展示，又可随时拖回 Draw.io 继续二次编辑。
+- **三大输出方式**：
+  - **保存到工作区**：在当前画板文件同级目录下自动生成同名图片文件（如 `arch.drawio` -> `arch.png`），自动触发 DSH 文件系统感知；
+  - **复制到剪贴板**：一键将 PNG 图片写入操作系统剪贴板（`navigator.clipboard`），方便在 Markdown、PRD 或聊天工具中直接 `Ctrl + V` 粘贴；
+  - **下载图片文件**：触发浏览器原生下载弹窗保存到本地磁盘。
 
 ## 开发验证
 
@@ -38,4 +52,4 @@ dsh web --port 3082 --no-open
 已在 DSH 0.1.5-rc.2 上验证构建、XML 操作、本地静态资源加载和官方右侧栏注册。
 
 当前内置的精简 Draw.io runtime 固定为 31.4.5。包含完整满血版内置图库（通用、流程图、UML、ER、BPMN、网络、Kubernetes、AWS、GCP、Cisco、电子、平面图等全部分类均可自由开启）以及 PlantUML 离线渲染模块；
-云盘、在线图库、模板库、VSDX/Gliffy 导入和服务端导出未包含。
+云盘、在线图库、模板库、VSDX/Gliffy 导入未包含；已全面支持纯本地离线 Canvas + SVG 导出引擎。

package/lib/client.js

@@ -23,7 +23,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   apply: () => apply,
-  inject: () => inject
+  inject: () => inject,
+  parseDrawioAddress: () => parseDrawioAddress
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
@@ -51,39 +52,61 @@ function apply(ctx) {
 }
 function OfficialDrawioTabTitle({ useTabInfo }) {
   const { tab } = useTabInfo();
+  const title = tab?.title || (tab?.navigation?.address ? fileName(parseDrawioAddress(tab.navigation.address)?.path ?? "Draw.io") : "Draw.io");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasIcon, { size: 15 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: tab.title })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
   ] });
 }
 function OfficialDrawioTabBody({ sessionId, useSessions, useTabInfo }) {
   const { tab } = useTabInfo();
-  const cwd = useSessions((sessions) => sessions?.byId?.[sessionId]?.cwd);
-  const resource = (0, import_react.useMemo)(() => parseDrawioAddress(tab.navigation.address), [tab.navigation.address]);
+  const rawAddress = tab?.navigation?.address;
+  const resource = (0, import_react.useMemo)(() => parseDrawioAddress(rawAddress, sessionId), [rawAddress, sessionId]);
+  const activeCwd = useSessions((sessions) => sessions?.byId?.[sessionId]?.cwd);
+  const resourceCwd = useSessions((sessions) => resource?.sessionId ? sessions?.byId?.[resource.sessionId]?.cwd : void 0);
+  const cwd = activeCwd || resourceCwd;
+  const effectiveSessionId = sessionId || resource?.sessionId || "";
   const [file, setFile] = (0, import_react.useState)(null);
   const [error, setError] = (0, import_react.useState)(null);
-  const key = `${sessionId}\0${cwd ?? ""}\0${resource?.path ?? ""}`;
+  const key = `${effectiveSessionId}\0${cwd ?? ""}\0${resource?.path ?? ""}`;
   (0, import_react.useEffect)(() => {
-    if (!resource || resource.sessionId !== sessionId || !cwd) return;
+    if (!resource?.path || !effectiveSessionId || !cwd) return;
     const controller = new AbortController();
     setError(null);
-    void fsRead({ sessionId, cwd }, resource.path, controller.signal).then((content) => {
-      if (!controller.signal.aborted) setFile({ key, content });
+    void fsRead({ sessionId: effectiveSessionId, cwd }, resource.path, controller.signal).then((res) => {
+      if (!controller.signal.aborted) setFile({ key, content: res.content, version: res.version });
     }).catch((reason) => {
       if (!controller.signal.aborted) setError(messageOf(reason));
     });
     return () => controller.abort();
-  }, [key, resource?.sessionId, resource?.path, sessionId, cwd]);
-  if (!resource || resource.sessionId !== sessionId) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u6587\u4EF6\u5730\u5740\u4E0D\u662F\u5F53\u524D\u4F1A\u8BDD\u4E2D\u7684 Draw.io \u6587\u4EF6\u3002" });
-  if (!cwd) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u5F53\u524D\u4F1A\u8BDD\u6CA1\u6709\u53EF\u7528\u7684\u5DE5\u4F5C\u533A\u3002" });
+  }, [key, resource?.path, effectiveSessionId, cwd]);
+  if (!resource || !resource.path) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CenteredMessage,
+      {
+        title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F",
+        detail: rawAddress ? `\u65E0\u6CD5\u89E3\u6790 Draw.io \u6587\u4EF6\u5730\u5740\uFF1A${rawAddress}` : "\u65E0\u6CD5\u83B7\u53D6\u6587\u4EF6\u5BFC\u822A\u5730\u5740\u3002"
+      }
+    );
+  }
+  if (!cwd) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CenteredMessage,
+      {
+        title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F",
+        detail: "\u5F53\u524D\u4F1A\u8BDD\u6CA1\u6709\u5173\u8054\u53EF\u7528\u7684\u5DE5\u4F5C\u533A\uFF0C\u8BF7\u5148\u5728 DSH \u4E2D\u6253\u5F00\u6216\u9009\u62E9\u4E00\u4E2A\u5DE5\u4F5C\u533A\u6587\u4EF6\u5939\u3002"
+      }
+    );
+  }
   if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u753B\u677F\u8F7D\u5165\u5931\u8D25", detail: error });
   if (file?.key !== key) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u6B63\u5728\u8F7D\u5165\u753B\u677F", detail: fileName(resource.path) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawioCanvas, { content: file.content, path: resource.path, scope: { sessionId, cwd } });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawioCanvas, { content: file.content, version: file.version, path: resource.path, scope: { sessionId: effectiveSessionId, cwd } });
 }
-function DrawioCanvas({ content, truncated, path, scope }) {
+function DrawioCanvas({ content, version, truncated, path, scope }) {
   const frame = (0, import_react.useRef)(null);
   const latestFile = (0, import_react.useRef)(content ?? "");
   const latestEditor = (0, import_react.useRef)(content ?? "");
+  const latestVersion = (0, import_react.useRef)(version);
   const saveTimer = (0, import_react.useRef)(void 0);
   const saveGeneration = (0, import_react.useRef)(0);
   const [ready, setReady] = (0, import_react.useState)(false);
@@ -92,24 +115,46 @@ function DrawioCanvas({ content, truncated, path, scope }) {
   const lastUserActivity = (0, import_react.useRef)(0);
   const isInteracting = (0, import_react.useRef)(false);
   const { dark, accent: accentColor } = useDshTheme();
-  const src = (0, import_react.useMemo)(() => `/dsh-drawio/runtime/index.html?embed=1&proto=json&spin=1&offline=1&local=1&ui=min&libraries=1&configure=1&noExitBtn=1&saveAndExit=0&dark=${dark ? "1" : "0"}`, [dark]);
+  const initialDark = (0, import_react.useRef)(dark);
+  const src = (0, import_react.useMemo)(() => `/dsh-drawio/runtime/index.html?embed=1&proto=json&spin=1&offline=1&local=1&ui=min&libraries=1&configure=1&noExitBtn=1&saveAndExit=0&dark=${initialDark.current ? "1" : "0"}`, []);
   const post = (0, import_react.useCallback)((message) => {
     frame.current?.contentWindow?.postMessage(JSON.stringify(message), window.location.origin);
   }, []);
+  const reloadFromDisk = (0, import_react.useCallback)(async () => {
+    try {
+      setSaveState("loading");
+      const result = await fsRead(scope, path);
+      latestFile.current = result.content;
+      latestEditor.current = result.content;
+      latestVersion.current = result.version;
+      post({ action: "load", xml: result.content, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 });
+      setSaveState("saved");
+      setError(null);
+    } catch (reason) {
+      setError(messageOf(reason));
+    }
+  }, [scope, path, dark, post]);
   const persist = (0, import_react.useCallback)(async (xml) => {
     const generation = ++saveGeneration.current;
     setSaveState("saving");
     try {
-      await fsWrite(scope, path, xml);
+      const outcome = await fsWrite(scope, path, xml, latestVersion.current);
       if (generation !== saveGeneration.current) return;
       latestFile.current = xml;
       latestEditor.current = xml;
+      if (outcome?.version) latestVersion.current = outcome.version;
       setSaveState("saved");
       setError(null);
     } catch (reason) {
       if (generation !== saveGeneration.current) return;
-      setSaveState("error");
-      setError(messageOf(reason));
+      const msg = messageOf(reason);
+      if (msg.includes("modified by an external process") || msg.includes("409")) {
+        setSaveState("conflict");
+        setError("\u6587\u4EF6\u5DF2\u88AB\u5916\u90E8\u6216 AI \u4FEE\u6539\uFF0C\u5F53\u524D\u5B58\u5728\u5E76\u53D1\u51B2\u7A81\uFF0C\u70B9\u51FB\u53EF\u91CD\u65B0\u8F7D\u5165\u6700\u65B0\u5185\u5BB9");
+      } else {
+        setSaveState("error");
+        setError(msg);
+      }
     }
   }, [scope.sessionId, scope.cwd, path]);
   const scheduleSave = (0, import_react.useCallback)((xml, immediate = false) => {
@@ -131,7 +176,8 @@ function DrawioCanvas({ content, truncated, path, scope }) {
   (0, import_react.useEffect)(() => {
     latestFile.current = content ?? "";
     latestEditor.current = content ?? "";
-  }, [content, path]);
+    latestVersion.current = version;
+  }, [content, version, path]);
   const markActivity = (0, import_react.useCallback)(() => {
     lastUserActivity.current = Date.now();
   }, []);
@@ -162,6 +208,86 @@ function DrawioCanvas({ content, truncated, path, scope }) {
     const timer = window.setInterval(handleFrameAttach, 800);
     return () => window.clearInterval(timer);
   }, []);
+  const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
+  const [exportFormat, setExportFormat] = (0, import_react.useState)("png");
+  const [isTransparent, setIsTransparent] = (0, import_react.useState)(false);
+  const [isExporting, setIsExporting] = (0, import_react.useState)(false);
+  const [toast, setToast] = (0, import_react.useState)(null);
+  const pendingExport = (0, import_react.useRef)(null);
+  const menuRef = (0, import_react.useRef)(null);
+  const showToast = (0, import_react.useCallback)((msg) => {
+    setToast(msg);
+    window.setTimeout(() => setToast((current) => current === msg ? null : current), 3200);
+  }, []);
+  const startExport = (0, import_react.useCallback)((target) => {
+    if (!ready || isExporting) return;
+    const ext = exportFormat === "svg" ? ".svg" : exportFormat === "xmlpng" ? ".drawio.png" : ".png";
+    const base = path.replace(/\.drawio$/i, "");
+    const targetPath = `${base}${ext}`;
+    pendingExport.current = {
+      format: exportFormat,
+      target,
+      targetPath
+    };
+    setIsExporting(true);
+    setMenuOpen(false);
+    post({
+      action: "export",
+      format: exportFormat,
+      scale: exportFormat === "svg" ? 1 : 2,
+      transparent: isTransparent,
+      border: 10,
+      spin: "\u6B63\u5728\u6E32\u67D3\u5BFC\u51FA\u56FE\u7247..."
+    });
+  }, [ready, isExporting, exportFormat, isTransparent, path, post]);
+  const handleExportResult = (0, import_react.useCallback)(async (pending, data) => {
+    try {
+      if (pending.target === "download") {
+        const link = document.createElement("a");
+        link.download = fileName(pending.targetPath);
+        link.href = data;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        showToast(`\u5DF2\u5F00\u59CB\u4E0B\u8F7D\uFF1A${fileName(pending.targetPath)}`);
+      } else if (pending.target === "clipboard") {
+        try {
+          if (pending.format === "svg") {
+            const svgText = data.startsWith("data:image/svg+xml") ? decodeURIComponent(data.split(",")[1] || "") : data;
+            await navigator.clipboard.writeText(svgText);
+            showToast("\u5DF2\u590D\u5236 SVG \u4EE3\u7801\u5230\u526A\u8D34\u677F");
+          } else {
+            const res = await fetch(data);
+            const blob = await res.blob();
+            await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+            showToast("\u5DF2\u590D\u5236\u56FE\u7247\u5230\u526A\u8D34\u677F");
+          }
+        } catch {
+          const link = document.createElement("a");
+          link.download = fileName(pending.targetPath);
+          link.href = data;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          showToast(`\u526A\u8D34\u677F\u65E0\u6743\u9650\uFF0C\u5DF2\u81EA\u52A8\u4E0B\u8F7D\uFF1A${fileName(pending.targetPath)}`);
+        }
+      } else if (pending.target === "workspace") {
+        const result = await fsSaveImage(scope, pending.targetPath, data);
+        showToast(`\u5DF2\u4FDD\u5B58\u5230\u5DE5\u4F5C\u533A\uFF1A${fileName(result.path)} (${Math.round(result.bytes / 1024)} KB)`);
+      }
+    } catch (reason) {
+      setError(`\u5BFC\u51FA\u5931\u8D25\uFF1A${messageOf(reason)}`);
+    }
+  }, [scope, showToast]);
+  (0, import_react.useEffect)(() => {
+    const handleOutsideClick = (e) => {
+      if (menuOpen && menuRef.current && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    window.addEventListener("pointerdown", handleOutsideClick);
+    return () => window.removeEventListener("pointerdown", handleOutsideClick);
+  }, [menuOpen]);
   (0, import_react.useEffect)(() => {
     setReady(false);
     setSaveState("loading");
@@ -181,11 +307,18 @@ function DrawioCanvas({ content, truncated, path, scope }) {
         setSaveState("saved");
       } else if ((message.event === "autosave" || message.event === "save") && typeof message.xml === "string") {
         scheduleSave(message.xml, message.event === "save");
+      } else if (message.event === "export" && typeof message.data === "string") {
+        const pending = pendingExport.current;
+        pendingExport.current = null;
+        setIsExporting(false);
+        if (pending) {
+          void handleExportResult(pending, message.data);
+        }
       }
     };
     window.addEventListener("message", receive);
     return () => window.removeEventListener("message", receive);
-  }, [src, dark, path, post, scheduleSave]);
+  }, [src, dark, path, post, scheduleSave, handleExportResult]);
   (0, import_react.useEffect)(() => {
     if (!ready || truncated) return;
     let cancelled = false;
@@ -195,12 +328,19 @@ function DrawioCanvas({ content, truncated, path, scope }) {
       if (saveTimer.current !== void 0) return;
       if (typeof document !== "undefined" && document.hidden) return;
       try {
-        const xml = await fsRead(scope, path);
+        const stat = await fsStat(scope, path);
+        if (cancelled || isInteracting.current || Date.now() - lastUserActivity.current < 1200) return;
+        if (stat.version && latestVersion.current && stat.version === latestVersion.current) return;
+        const res = await fsRead(scope, path);
         if (cancelled || isInteracting.current || Date.now() - lastUserActivity.current < 1200) return;
-        if (xml === latestFile.current || xml === latestEditor.current) return;
-        latestFile.current = xml;
-        latestEditor.current = xml;
-        post({ action: "load", xml, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 });
+        if (res.content === latestFile.current || res.content === latestEditor.current) {
+          latestVersion.current = res.version;
+          return;
+        }
+        latestFile.current = res.content;
+        latestEditor.current = res.content;
+        latestVersion.current = res.version;
+        post({ action: "load", xml: res.content, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 });
         setSaveState("external");
         window.setTimeout(() => {
           if (!cancelled) setSaveState("saved");
@@ -219,16 +359,124 @@ function DrawioCanvas({ content, truncated, path, scope }) {
   }, [ready, truncated, scope.sessionId, scope.cwd, path, dark, post]);
   (0, import_react.useEffect)(() => () => {
     if (saveTimer.current !== void 0) window.clearTimeout(saveTimer.current);
-    if (latestEditor.current !== latestFile.current) void fsWrite(scope, path, latestEditor.current, true);
+    if (latestEditor.current !== latestFile.current) void fsWrite(scope, path, latestEditor.current, latestVersion.current, true);
   }, [scope.sessionId, scope.cwd, path]);
   if (truncated) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u6587\u4EF6\u5185\u5BB9\u5DF2\u88AB\u622A\u65AD\uFF0C\u7EE7\u7EED\u7F16\u8F91\u53EF\u80FD\u635F\u574F\u539F\u6587\u4EF6\u3002" });
+  const targetExt = exportFormat === "svg" ? ".svg" : exportFormat === "xmlpng" ? ".drawio.png" : ".png";
+  const previewName = `${fileName(path).replace(/\.drawio$/i, "")}${targetExt}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { ref: frame, title: `${fileName(path)} Draw.io \u753B\u677F`, src, style: styles.frame }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "status", "aria-live": "polite", style: { ...styles.status, ...saveState === "error" ? styles.statusError : {} }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...styles.dot, background: accentColor } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: menuRef, style: styles.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMenuOpen((open) => !open),
+          disabled: !ready || isExporting,
+          style: { ...styles.exportTrigger, ...isExporting ? styles.triggerActive : {} },
+          title: "\u5BFC\u51FA\u5F53\u524D\u753B\u677F\u4E3A\u56FE\u7247",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CameraIcon, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: isExporting ? "\u6B63\u5728\u5BFC\u51FA..." : "\u5BFC\u51FA\u56FE\u7247" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.arrowIcon, children: "\u25BE" })
+          ]
+        }
+      ),
+      menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.exportMenu, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.menuHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.menuTitle, children: "\u5BFC\u51FA\u753B\u677F\u56FE\u7247" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.menuSub, children: previewName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.formatRow, children: ["png", "svg", "xmlpng"].map((fmt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExportFormat(fmt),
+            style: {
+              ...styles.formatBtn,
+              ...exportFormat === fmt ? { ...styles.formatBtnActive, borderColor: accentColor } : {}
+            },
+            children: fmt === "png" ? "PNG (\u8D85\u6E05)" : fmt === "svg" ? "SVG (\u77E2\u91CF)" : "XML-PNG"
+          },
+          fmt
+        )) }),
+        exportFormat !== "svg" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: styles.checkRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: isTransparent,
+              onChange: (e) => setIsTransparent(e.target.checked),
+              style: styles.checkbox
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u900F\u660E\u80CC\u666F" })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.actionCol, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => startExport("workspace"),
+              style: { ...styles.actionBtn, ...styles.actionBtnPrimary, background: accentColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaveIcon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "\u4FDD\u5B58\u5230\u5DE5\u4F5C\u533A (",
+                  targetExt,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => startExport("clipboard"),
+              style: styles.actionBtn,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyIcon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u590D\u5236\u5230\u526A\u8D34\u677F" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => startExport("download"),
+              style: styles.actionBtn,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DownloadIcon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u4E0B\u8F7D\u56FE\u7247\u6587\u4EF6" })
+              ]
+            }
+          )
+        ] })
+      ] }) : null
+    ] }),
+    toast ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.toast, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { size: 14 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: toast })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "status", "aria-live": "polite", style: { ...styles.status, ...saveState === "error" || saveState === "conflict" ? styles.statusError : {} }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...styles.dot, background: saveState === "conflict" ? "var(--dsw-alias-warning, #e6a23c)" : accentColor } }),
       statusText(saveState)
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", title: error, onClick: () => setError(null), style: styles.error, children: "\u4FDD\u5B58\u5931\u8D25 \xB7 \u70B9\u51FB\u5173\u95ED" }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        title: error,
+        onClick: () => {
+          if (saveState === "conflict") void reloadFromDisk();
+          setError(null);
+        },
+        style: styles.error,
+        children: saveState === "conflict" ? "\u26A0\uFE0F \u68C0\u6D4B\u5230\u5916\u90E8\u4FEE\u6539 \xB7 \u70B9\u51FB\u91CD\u65B0\u8F7D\u5165" : "\u4FDD\u5B58\u5931\u8D25 \xB7 \u70B9\u51FB\u5173\u95ED"
+      }
+    ) : null
   ] });
 }
 function useDshTheme() {
@@ -269,12 +517,17 @@ function detectDark() {
   if (numbers?.length === 3) return numbers[0] * 0.299 + numbers[1] * 0.587 + numbers[2] * 0.114 < 128;
   return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
+async function fsStat(scope, path, signal) {
+  return call("stat", scope, { path }, false, signal);
+}
 async function fsRead(scope, path, signal) {
-  const value = await call("read", scope, { path }, false, signal);
-  return value.content;
+  return call("read", scope, { path }, false, signal);
 }
-async function fsWrite(scope, path, content, keepalive = false) {
-  await call("write", scope, { path, content }, keepalive);
+async function fsWrite(scope, path, content, version, keepalive = false) {
+  return call("write", scope, { path, content, ...version ? { version } : {} }, keepalive);
+}
+async function fsSaveImage(scope, path, data) {
+  return call("save-image", scope, { path, data });
 }
 async function call(method, scope, extra, keepalive = false, signal) {
   const response = await fetch(`/dsh-drawio/api/${method}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ sessionId: scope.sessionId, ...scope.cwd ? { cwd: scope.cwd } : {}, ...extra }), keepalive, signal });
@@ -290,6 +543,34 @@ function CanvasIcon({ size = 16, className }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.4 7.8l3.2 4.4M8.2 6.2h3.6M6.2 8.2v3.6", stroke: "currentColor", strokeLinecap: "round" })
   ] });
 }
+function CameraIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6.5A1.5 1.5 0 0 1 5.5 5h1.8a1.5 1.5 0 0 0 1.2-.6l.5-.7A1.5 1.5 0 0 1 10.2 3h1.6a1.5 1.5 0 0 1 1.2.7l.5.7a1.5 1.5 0 0 0 1.2.6h1.8A1.5 1.5 0 0 1 18 6.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 15.5v-9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "11", r: "3.5" })
+  ] });
+}
+function SaveIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 17H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9.5l3.5 3.5V16a1 1 0 0 1-1 1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 17v-6H7v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 3v4h6" })
+  ] });
+}
+function CopyIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 13H3.5A1.5 1.5 0 0 1 2 11.5v-8A1.5 1.5 0 0 1 3.5 2h8A1.5 1.5 0 0 1 13 3.5V4" })
+  ] });
+}
+function DownloadIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 3v10m0 0l-3.5-3.5M10 13l3.5-3.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 14v2a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-2" })
+  ] });
+}
+function CheckIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10.5l4 4 8-9" }) });
+}
 function CenteredMessage({ title, detail }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.center, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: title }),
@@ -297,21 +578,43 @@ function CenteredMessage({ title, detail }) {
   ] });
 }
 var fileName = (path) => path.replace(/\\/g, "/").split("/").pop() || path;
-function parseDrawioAddress(address) {
-  const prefix = "dsh-resource://file/session/";
-  if (!address.startsWith(prefix)) return null;
+function parseDrawioAddress(address, fallbackSessionId) {
+  if (!address || typeof address !== "string") return null;
   try {
-    const parts = address.slice(prefix.length).split("/").map(decodeURIComponent);
-    const sessionId = parts.shift() ?? "";
-    const path = parts.join("/");
-    if (!sessionId || !path || !/\.drawio$/i.test(path) || parts.some((part) => part.includes("/") || part.includes("\\") || part.includes("\0"))) return null;
-    return { sessionId, path };
+    let clean = address.trim();
+    let parsedSessionId = "";
+    if (clean.startsWith("dsh-resource://file/session/")) {
+      const rest = clean.slice("dsh-resource://file/session/".length);
+      const slashIdx = rest.indexOf("/");
+      if (slashIdx >= 0) {
+        parsedSessionId = decodeURIComponent(rest.slice(0, slashIdx));
+        clean = rest.slice(slashIdx + 1);
+      } else {
+        clean = rest;
+      }
+    } else if (clean.startsWith("dsh-resource://file/")) {
+      clean = clean.slice("dsh-resource://file/".length);
+    } else if (clean.startsWith("file:///")) {
+      clean = clean.slice("file:///".length);
+    }
+    let decodedPath = clean;
+    try {
+      decodedPath = decodeURIComponent(clean);
+    } catch {
+    }
+    decodedPath = decodedPath.replace(/\\/g, "/").replace(/^\/+/, "");
+    if (!/\.drawio$/i.test(decodedPath)) return null;
+    if (decodedPath.includes("\0")) return null;
+    return {
+      sessionId: parsedSessionId || fallbackSessionId || "",
+      path: decodedPath
+    };
   } catch {
     return null;
   }
 }
 var messageOf = (reason) => reason instanceof Error ? reason.message : String(reason);
-var statusText = (state) => state === "loading" ? "\u6B63\u5728\u8F7D\u5165" : state === "saving" ? "\u6B63\u5728\u4FDD\u5B58" : state === "external" ? "\u5DF2\u540C\u6B65 AI \u4FEE\u6539" : state === "error" ? "\u4FDD\u5B58\u5931\u8D25" : "\u5DF2\u4FDD\u5B58";
+var statusText = (state) => state === "loading" ? "\u6B63\u5728\u8F7D\u5165" : state === "saving" ? "\u6B63\u5728\u4FDD\u5B58" : state === "external" ? "\u5DF2\u540C\u6B65 AI \u4FEE\u6539" : state === "conflict" ? "\u68C0\u6D4B\u5230\u51B2\u7A81" : state === "error" ? "\u4FDD\u5B58\u5931\u8D25" : "\u5DF2\u4FDD\u5B58";
 var fg = "var(--dsw-alias-label-primary, currentColor)";
 var muted = "var(--dsw-alias-label-secondary, rgba(127,127,127,.9))";
 var layer = "var(--dsw-alias-container-bg, Canvas)";
@@ -320,6 +623,23 @@ var accent = "var(--dsw-alias-brand-primary, #ed67ad)";
 var styles = {
   root: { position: "relative", width: "100%", height: "100%", minHeight: 0, overflow: "hidden", color: fg, background: layer },
   frame: { display: "block", width: "100%", height: "100%", border: 0, background: layer },
+  toolbar: { position: "absolute", right: 12, top: 12, zIndex: 10, display: "flex", flexDirection: "column", alignItems: "flex-end" },
+  exportTrigger: { display: "flex", alignItems: "center", gap: 6, padding: "5px 10px", border: `1px solid ${border}`, borderRadius: 6, color: fg, background: layer, boxShadow: "var(--dsw-alias-shadow-sm, 0 2px 8px rgba(0,0,0,.12))", fontSize: 12, fontWeight: 500, cursor: "pointer", backdropFilter: "blur(8px)", transition: "all 0.15s ease" },
+  triggerActive: { opacity: 0.75, cursor: "wait" },
+  arrowIcon: { fontSize: 10, opacity: 0.6, marginLeft: 2 },
+  exportMenu: { marginTop: 6, width: 220, padding: 12, border: `1px solid ${border}`, borderRadius: 8, background: layer, boxShadow: "var(--dsw-alias-shadow-md, 0 6px 20px rgba(0,0,0,.18))", backdropFilter: "blur(12px)", display: "flex", flexDirection: "column", gap: 10 },
+  menuHeader: { display: "flex", flexDirection: "column", gap: 2, paddingBottom: 6, borderBottom: `1px solid ${border}` },
+  menuTitle: { fontSize: 12, fontWeight: 600, color: fg },
+  menuSub: { fontSize: 10, color: muted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  formatRow: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4 },
+  formatBtn: { padding: "4px 2px", border: `1px solid ${border}`, borderRadius: 4, background: "transparent", color: muted, fontSize: 10.5, cursor: "pointer", textAlign: "center", transition: "all 0.1s ease" },
+  formatBtnActive: { color: fg, fontWeight: 600, background: "var(--dsw-alias-fill-quaternary, rgba(127,127,127,0.12))" },
+  checkRow: { display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: muted, cursor: "pointer", userSelect: "none" },
+  checkbox: { cursor: "pointer", margin: 0 },
+  actionCol: { display: "flex", flexDirection: "column", gap: 6, paddingTop: 4 },
+  actionBtn: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "6px 10px", border: `1px solid ${border}`, borderRadius: 5, background: "transparent", color: fg, fontSize: 11.5, cursor: "pointer", transition: "all 0.12s ease" },
+  actionBtnPrimary: { color: "#ffffff", border: "none", fontWeight: 500 },
+  toast: { position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)", zIndex: 12, display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", border: `1px solid ${border}`, borderRadius: 20, background: layer, color: fg, boxShadow: "var(--dsw-alias-shadow-md, 0 4px 14px rgba(0,0,0,.16))", fontSize: 12, backdropFilter: "blur(10px)", pointerEvents: "none" },
   status: { position: "absolute", right: 10, bottom: 9, zIndex: 2, display: "flex", alignItems: "center", gap: 6, padding: "4px 8px", border: `1px solid ${border}`, borderRadius: 999, color: muted, background: layer, boxShadow: "var(--dsw-alias-shadow-sm, 0 2px 8px rgba(0,0,0,.12))", fontSize: 11, pointerEvents: "none" },
   statusError: { color: "var(--dsw-alias-danger, #d84f5f)" },
   dot: { width: 6, height: 6, borderRadius: 99, background: accent },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civilization/dsh-drawio",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Local draw.io canvas and model tools for DeepSeek Harness",
   "license": "Apache-2.0",
   "type": "module",
@@ -14,6 +14,7 @@
     "src",
     "lib",
     "vendor",
+    "skills",
     "cordis.patch.yml",
     "README.md",
     "THIRD_PARTY_NOTICES.md",