contactsheet 0.1.6 → 0.1.8

package/README.md

@@ -152,7 +152,10 @@ open(橙) ──标记完成──▶ resolved(绿·待核验) ──核验通
   这份文件就是历史记录，日后沉淀 skill / 复盘"当初都提过什么、怎么改的"的原料。
 - 「删除」只留给误钉的 pin，会真的从历史里抹掉。
 - `Cmd/Ctrl + V` → 贴图，存进 `design/.canvas/refs/`。**在批注输入框或气泡编辑态里粘贴 = 挂到这条批注**
-  （缩略图跟着 pin 走，推给 Claude 的上下文里带上它的路径）；在别处粘贴才进右下角的全局坞
+  （缩略图跟着 pin 走，推给 Claude 的上下文里带上它的路径）；在别处粘贴才进右下角的全局坞。
+  粘贴时在**光标处插入 `[图片 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);
@@ -383,7 +411,7 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
   function refSrc(path) {
     return localSrc.get(path) ?? refUrl(path);
   }
-  function refThumb(path) {
+  function refThumb(path, opts) {
     const card = h("div", "cs-ref-thumb");
     card.title = path;
     const img = h("img");
@@ -395,11 +423,21 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     img.alt = path;
     img.src = refSrc(path);
     if (img.complete && img.naturalWidth === 0) broken();
-    card.append(img, h("span", "cs-ref-name", fileOf(path)));
+    card.append(img, h("span", "cs-ref-name", opts?.index ? `\u56FE\u7247 ${opts.index}` : fileOf(path)));
     card.addEventListener("click", (e) => {
       e.stopPropagation();
       openLightbox(refSrc(path), path);
     });
+    if (opts?.onRemove) {
+      const rm = h("button", "cs-ref-rm", "\u2715");
+      rm.title = "\u4ECE\u8FD9\u6761\u6279\u6CE8\u79FB\u9664(\u6587\u4EF6\u4FDD\u7559\u5728 refs/)";
+      rm.setAttribute("aria-label", rm.title);
+      rm.addEventListener("click", (e) => {
+        e.stopPropagation();
+        opts.onRemove?.();
+      });
+      card.appendChild(rm);
+    }
     return card;
   }
   function openLightbox(src, caption) {
@@ -806,16 +844,33 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       }, 250);
     });
   }
-  function refStrip(paths) {
+  function refStrip(paths, onRemove) {
     const strip = h("div", "cs-ref-strip");
-    for (const p of paths) strip.appendChild(refThumb(p));
+    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) {
     const box = h("div", "cs-pin-bubble");
     const textEl = h("div", "cs-pin-text", ann.text);
     box.appendChild(textEl);
-    if (ann.refs?.length) box.appendChild(refStrip(ann.refs));
+    if (ann.refs?.length) {
+      box.appendChild(
+        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)"
+          );
+        })
+      );
+    }
     const meta = h("div", "cs-pin-meta");
     meta.appendChild(h("span", void 0, ann.status === "open" ? "open" : "\u5F85\u6838\u9A8C"));
     const act = (label, cls, fn) => {
@@ -861,17 +916,21 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     const ta = h("textarea", "cs-pin-edit");
     ta.value = ann.text;
     const refs = [...ann.refs ?? []];
-    const strip = box.querySelector(".cs-ref-strip") ?? refStrip([]);
-    if (!strip.isConnected) box.insertBefore(strip, box.querySelector(".cs-pin-meta"));
+    let strip = box.querySelector(".cs-ref-strip");
+    const redrawStrip = () => {
+      const next = refStrip(refs, (idx) => {
+        refs.splice(idx, 1);
+        ta.value = removeRefToken(ta.value, idx + 1);
+        redrawStrip();
+      });
+      if (strip?.isConnected) strip.replaceWith(next);
+      else box.insertBefore(next, box.querySelector(".cs-pin-meta"));
+      strip = next;
+    };
+    redrawStrip();
     setPasteTarget({
       el: box,
-      onFile: (file) => {
-        void uploadRef(file).then((path) => {
-          refs.push(path);
-          strip.appendChild(refThumb(path));
-          toast(`\u53C2\u8003\u56FE\u5DF2\u4E0A\u4F20:${path} \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();
@@ -888,9 +947,10 @@ ${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 = refs.length !== (ann.refs?.length ?? 0);
+      const refsChanged = JSON.stringify(refs) !== JSON.stringify(ann.refs ?? []);
       if (!textChanged && !refsChanged) return renderPins();
       const patch = {};
       if (textChanged) patch.text = text;
@@ -1031,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();
@@ -1048,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();
@@ -1255,6 +1320,7 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     viewport.addEventListener(
       "wheel",
       (e) => {
+        if (e.target?.closest?.(".cs-pin-bubble, .cs-pin-input")) return;
         e.preventDefault();
         if (e.ctrlKey || e.metaKey) {
           zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY / 260));