contactsheet 0.1.6 → 0.1.7

package/README.md

@@ -152,7 +152,8 @@ open(橙) ──标记完成──▶ resolved(绿·待核验) ──核验通
   这份文件就是历史记录，日后沉淀 skill / 复盘"当初都提过什么、怎么改的"的原料。
 - 「删除」只留给误钉的 pin，会真的从历史里抹掉。
 - `Cmd/Ctrl + V` → 贴图，存进 `design/.canvas/refs/`。**在批注输入框或气泡编辑态里粘贴 = 挂到这条批注**
-  （缩略图跟着 pin 走，推给 Claude 的上下文里带上它的路径）；在别处粘贴才进右下角的全局坞
+  （缩略图跟着 pin 走，推给 Claude 的上下文里带上它的路径）；在别处粘贴才进右下角的全局坞。
+  气泡里的图显示为「图片 n」占位符 + 缩略图，点开大图；**悬停缩略图出 ✕ 可从批注移除**（文件保留在 refs/）
 - `Ctrl + 滚轮` / 捏合 → 以光标为锚点缩放（0.05–2 倍）；空白处拖拽或双指滚动 → 平移
 - `1` 全景（一屏看完整面墙）· `2` 聚焦当前画板 · `0` 回到 100% · `+` / `-` 步进缩放
 - 点一个 pin 选中它，然后 `Enter` 编辑（编辑中再按 `Enter` 保存，`Shift+Enter` 换行）、

package/dist/canvas/app.js

@@ -383,7 +383,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 +395,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 +816,25 @@ ${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) => strip.appendChild(refThumb(p, { index: i + 1, onRemove: onRemove ? () => onRemove(p) : 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, (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)");
+        })
+      );
+    }
     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,15 +880,24 @@ ${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, (path) => {
+        refs.splice(refs.indexOf(path), 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");
+          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"));
       }
     });
@@ -890,7 +918,7 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       e.stopPropagation();
       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;
@@ -1255,6 +1283,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));