contactsheet 0.1.7 → 0.1.8

package/README.md

@@ -153,7 +153,9 @@ open(橙) ──标记完成──▶ resolved(绿·待核验) ──核验通
 - 「删除」只留给误钉的 pin，会真的从历史里抹掉。
 - `Cmd/Ctrl + V` → 贴图，存进 `design/.canvas/refs/`。**在批注输入框或气泡编辑态里粘贴 = 挂到这条批注**
   （缩略图跟着 pin 走，推给 Claude 的上下文里带上它的路径）；在别处粘贴才进右下角的全局坞。
-  气泡里的图显示为「图片 n」占位符 + 缩略图，点开大图；**悬停缩略图出 ✕ 可从批注移除**（文件保留在 refs/）
+  粘贴时在**光标处插入 `[图片 n]` 占位符**——图在文字里有位置，「把这里改成[图片 1]这样」是完整的话。
+  气泡下方是编号对应的缩略图（点开大图）；**悬停缩略图出 ✕ 可移除**，正文占位符同步摘掉并重编号（文件保留在 refs/）。
+  推送给 Claude 的文本里正文自带 `[图片 n]`，下方 `图片 n:路径` 一一对应，Claude 能 Read 到图
 - `Ctrl + 滚轮` / 捏合 → 以光标为锚点缩放（0.05–2 倍）；空白处拖拽或双指滚动 → 平移
 - `1` 全景（一屏看完整面墙）· `2` 聚焦当前画板 · `0` 回到 100% · `+` / `-` 步进缩放
 - 点一个 pin 选中它，然后 `Enter` 编辑（编辑中再按 `Enter` 保存，`Shift+Enter` 换行）、

package/dist/canvas/app.js

@@ -362,6 +362,34 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       return;
     }
   }
+  var UPLOADING = "__uploading__";
+  function removeRefToken(text, idx1) {
+    return text.replace(new RegExp(`\\[\u56FE\u7247 ${idx1}\\]`, "g"), "").replace(/\[图片 (\d+)\]/g, (m, d) => {
+      const n = Number(d);
+      return n > idx1 ? `[\u56FE\u7247 ${n - 1}]` : m;
+    });
+  }
+  function insertAtCursor(ta, token) {
+    const start = ta.selectionStart ?? ta.value.length;
+    const end = ta.selectionEnd ?? start;
+    ta.setRangeText(token, start, end, "end");
+    ta.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  function attachInline(ta, refs, file, redraw) {
+    const n = refs.length + 1;
+    refs.push(UPLOADING);
+    insertAtCursor(ta, `[\u56FE\u7247 ${n}]`);
+    redraw();
+    void uploadRef(file).then((path) => {
+      refs[n - 1] = path;
+      redraw();
+    }).catch((err) => {
+      refs.splice(n - 1, 1);
+      ta.value = removeRefToken(ta.value, n);
+      redraw();
+      toast(`\u53C2\u8003\u56FE\u4E0A\u4F20\u5931\u8D25:${String(err)}`, "error");
+    });
+  }
   async function uploadRef(file) {
     const dataUrl = await readDataUrl(file);
     const base64 = dataUrl.slice(dataUrl.indexOf(",") + 1);
@@ -818,9 +846,13 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
   }
   function refStrip(paths, onRemove) {
     const strip = h("div", "cs-ref-strip");
-    paths.forEach(
-      (p, i) => strip.appendChild(refThumb(p, { index: i + 1, onRemove: onRemove ? () => onRemove(p) : void 0 }))
-    );
+    paths.forEach((p, i) => {
+      if (p === UPLOADING) {
+        strip.appendChild(h("div", "cs-ref-thumb is-broken", `\u56FE\u7247 ${i + 1} \xB7 \u4E0A\u4F20\u4E2D\u2026`));
+        return;
+      }
+      strip.appendChild(refThumb(p, { index: i + 1, onRemove: onRemove ? () => onRemove(i) : void 0 }));
+    });
     return strip;
   }
   function bubble(ann) {
@@ -829,9 +861,13 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     box.appendChild(textEl);
     if (ann.refs?.length) {
       box.appendChild(
-        refStrip(ann.refs, (path) => {
-          const next = (ann.refs ?? []).filter((r) => r !== path);
-          void transition(ann.id, { refs: next }, "\u53C2\u8003\u56FE\u5DF2\u79FB\u9664(\u6587\u4EF6\u4FDD\u7559\u5728 refs/ \u91CC)");
+        refStrip(ann.refs, (idx) => {
+          const next = (ann.refs ?? []).filter((_, i) => i !== idx);
+          void transition(
+            ann.id,
+            { refs: next, text: removeRefToken(ann.text, idx + 1) },
+            "\u53C2\u8003\u56FE\u5DF2\u79FB\u9664(\u6587\u4EF6\u4FDD\u7559\u5728 refs/ \u91CC)"
+          );
         })
       );
     }
@@ -882,8 +918,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     const refs = [...ann.refs ?? []];
     let strip = box.querySelector(".cs-ref-strip");
     const redrawStrip = () => {
-      const next = refStrip(refs, (path) => {
-        refs.splice(refs.indexOf(path), 1);
+      const next = refStrip(refs, (idx) => {
+        refs.splice(idx, 1);
+        ta.value = removeRefToken(ta.value, idx + 1);
         redrawStrip();
       });
       if (strip?.isConnected) strip.replaceWith(next);
@@ -893,13 +930,7 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     redrawStrip();
     setPasteTarget({
       el: box,
-      onFile: (file) => {
-        void uploadRef(file).then((path) => {
-          refs.push(path);
-          redrawStrip();
-          toast(`\u53C2\u8003\u56FE\u5DF2\u4E0A\u4F20 \u2014\u2014 \u70B9\u300C\u4FDD\u5B58\u300D\u540E\u624D\u6302\u5230\u8FD9\u6761\u6279\u6CE8`, "ok");
-        }).catch((err) => toast(`\u53C2\u8003\u56FE\u4E0A\u4F20\u5931\u8D25:${String(err)}`, "error"));
-      }
+      onFile: (file) => attachInline(ta, refs, file, redrawStrip)
     });
     ta.addEventListener("keydown", (e) => {
       e.stopPropagation();
@@ -916,6 +947,7 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     const save = h("button", "cs-x", "\u4FDD\u5B58");
     save.addEventListener("click", (e) => {
       e.stopPropagation();
+      if (refs.includes(UPLOADING)) return toast("\u6709\u56FE\u7247\u8FD8\u5728\u4E0A\u4F20,\u7A0D\u7B49\u4E00\u4E0B\u518D\u4FDD\u5B58", "warn");
       const text = ta.value.trim();
       const textChanged = !!text && text !== ann.text;
       const refsChanged = JSON.stringify(refs) !== JSON.stringify(ann.refs ?? []);
@@ -1059,15 +1091,19 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     composer = box;
     ta.focus();
     const refs = [];
+    let stripEl = strip;
+    const redrawStrip = () => {
+      const next = refStrip(refs, (idx) => {
+        refs.splice(idx, 1);
+        ta.value = removeRefToken(ta.value, idx + 1);
+        redrawStrip();
+      });
+      stripEl.replaceWith(next);
+      stripEl = next;
+    };
     setPasteTarget({
       el: box,
-      onFile: (file) => {
-        void uploadRef(file).then((path) => {
-          refs.push(path);
-          strip.appendChild(refThumb(path));
-          setProbe(`\u53C2\u8003\u56FE\u5DF2\u6302\u5230\u8FD9\u6761\u6279\u6CE8:${path}`);
-        }).catch((err) => toast(`\u53C2\u8003\u56FE\u4E0A\u4F20\u5931\u8D25:${String(err)}`, "error"));
-      }
+      onFile: (file) => attachInline(ta, refs, file, redrawStrip)
     });
     ta.addEventListener("keydown", (e) => {
       e.stopPropagation();
@@ -1076,6 +1112,7 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
         exitPinMode();
       } else if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
+        if (refs.includes(UPLOADING)) return toast("\u6709\u56FE\u7247\u8FD8\u5728\u4E0A\u4F20,\u7A0D\u7B49\u4E00\u4E0B\u518D\u63D0\u4EA4", "warn");
         const text = ta.value.trim();
         if (!text) {
           closeComposer();