contactsheet 0.1.5 → 0.1.7

package/README.md

@@ -57,10 +57,11 @@ flags：`--port`（外壳端口，默认 5199）、`--target`（你的 dev serve
 **端口被占了怎么办**（都不用你手动排查）：
 
 - `init` 会读你 package.json 的 dev script——`next dev -p 3100` 这种写法会被认出来，target 自动写成 3100；
-- 5199 被**别的进程**占着：自动顺延到下一个空闲端口（最多 +20）并醒目提示。注意顺延 = 换浏览器源，
-  画板位置这些本机记忆按源隔离，`.mcp.json`/hook 也仍指向原端口——想固定就改 config 的 port 再跑一次 `init`；
-- 5199 上跑的是**本项目的另一个 contactsheet**（最常见：忘了已经起过）：直接提示地址退出，不再起第二个；
-- 显式传了 `--port` 时不猜你的意图：被占就报错，附排查命令；
+- 5199 被**别的进程**占着：**硬失败**，报错里带占用者 PID 和两条出路（kill 它，或改 config.port 重跑 init）。
+  不自动顺延——`.mcp.json`/hook/config 全指着这个端口，静默换端口的话浏览器里看着一切正常，
+  agent 侧接线却全指向别的进程，谁都收不到错误（实测这样吞掉过一次升级）；
+- 5199 上跑的是**本项目的另一个 contactsheet**：版本相同 → 提示地址直接退出，不起第二个；
+  **版本不同 → 报错退出**，提示先 kill 旧实例——静默复用旧的等于升级没生效；
 - **判定「被占」看的是双栈**：外壳同时绑 `127.0.0.1` 和 `::1`（浏览器解析 localhost 普遍优先 IPv6——
   只绑 v4 的话，v6 侧被别的进程占着时 curl 一切正常、浏览器却拿到别人的空响应，Docker 的端口转发就常年蹲在
   IPv6 通配上）。任何一侧绑不上都算冲突，照常顺延。
@@ -151,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));