contactsheet 0.1.4 → 0.1.5

package/README.md

@@ -271,6 +271,19 @@ iframe 的画布永远是不透明的，所以组件画板必然有一层底。
 - 画板路由在生产环境不可访问：`next build` 的路由清单里它仍然在，但运行时一律 404（`notFound()` 守卫）。
   想连清单都不进，`next build` 前跑一次 `contactsheet clean`。
 
+## dev server 出问题时（画布会替你归因）
+
+画布长开时，被代理的 `next dev` 自己可能出问题。外壳每 20 秒探测一次它的 SSR 路径，
+连挂两次就在画布顶部拉**红色横幅**——看到横幅，坏的是 dev server，不是画布。两种实测指纹：
+
+1. **所有路由秒回 500、连请求日志都不打**：`.next` 开发缓存被硬杀打坏（next/font 会进入
+   失败重试死循环，`.next` 疯狂膨胀）。重启救不回来，`rm -rf .next` 后再起即愈。
+2. **静态资源 200、SSR 报错、API 挂死、worker 数暴涨**：dev server 僵死，重启 `next dev` 即愈。
+
+外壳侧的配合：客户端中途放弃的请求（僵死期浏览器的重试洪水就是这样）会**向上游同步中断**——
+否则每次放弃都在 dev server 里留一个永远"渲染中"的挂起请求，把它压得更死（这同时也是外壳自身的
+fd 泄漏源，实测 300 次中断泄 300 个 fd，已修）。
+
 ## 卸载
 
 ```bash

package/dist/canvas/app.js

@@ -15,7 +15,7 @@
     return req(`${BASE}/api/state`);
   }
   function fetchRegistry() {
-    return req(`${BASE}/registry`);
+    return req(`${BASE}/registry`, { signal: AbortSignal.timeout(15e3) });
   }
   function fetchAnnotations() {
     return req(`${BASE}/api/annotations`);
@@ -72,24 +72,26 @@
       }
       if (ev.type === "registry") on.registry(ev.entries ?? []);
       else if (ev.type === "annotations") on.annotations(ev.annotations ?? []);
+      else if (ev.type === "health") on.health(ev.ok, ev.detail);
     };
     es.addEventListener("registry", (e) => dispatch(e.data));
     es.addEventListener("annotations", (e) => dispatch(e.data));
+    es.addEventListener("health", (e) => dispatch(e.data));
     es.onmessage = (e) => dispatch(e.data);
     return es;
   }
 
   // src/canvas/dom.ts
   function h(tag, cls, text) {
-    const el = document.createElement(tag);
-    if (cls) el.className = cls;
-    if (text !== void 0) el.textContent = text;
-    return el;
+    const el2 = document.createElement(tag);
+    if (cls) el2.className = cls;
+    if (text !== void 0) el2.textContent = text;
+    return el2;
   }
   function qs(sel) {
-    const el = document.querySelector(sel);
-    if (!el) throw new Error(`canvas: \u7F3A\u5C11\u9AA8\u67B6\u5143\u7D20 ${sel}`);
-    return el;
+    const el2 = document.querySelector(sel);
+    if (!el2) throw new Error(`canvas: \u7F3A\u5C11\u9AA8\u67B6\u5143\u7D20 ${sel}`);
+    return el2;
   }
   function clamp(v, lo, hi) {
     return v < lo ? lo : v > hi ? hi : v;
@@ -312,14 +314,14 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     return host;
   }
   function toast(text, kind = "info") {
-    const el = h("div", `cs-toast is-${kind}`, text);
-    ensureHost().appendChild(el);
-    requestAnimationFrame(() => el.classList.add("is-in"));
+    const el2 = h("div", `cs-toast is-${kind}`, text);
+    ensureHost().appendChild(el2);
+    requestAnimationFrame(() => el2.classList.add("is-in"));
     const life = kind === "error" ? 6e3 : kind === "warn" ? 4500 : 3e3;
     setTimeout(() => {
-      el.classList.remove("is-in");
-      el.addEventListener("transitionend", () => el.remove(), { once: true });
-      setTimeout(() => el.remove(), 400);
+      el2.classList.remove("is-in");
+      el2.addEventListener("transitionend", () => el2.remove(), { once: true });
+      setTimeout(() => el2.remove(), 400);
     }, life);
   }
 
@@ -472,10 +474,10 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       return null;
     }
     if (board.entry.kind !== "component") return stack[0] ?? null;
-    for (const el of stack) {
-      const t = el.tagName;
-      if (t === "HTML" || t === "BODY" || el.hasAttribute("data-cs-artboard")) return null;
-      if (paintsSomething(el, doc)) return el;
+    for (const el2 of stack) {
+      const t = el2.tagName;
+      if (t === "HTML" || t === "BODY" || el2.hasAttribute("data-cs-artboard")) return null;
+      if (paintsSomething(el2, doc)) return el2;
     }
     return null;
   }
@@ -499,15 +501,15 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     const m = bg.match(/^rgba\([^)]*,\s*([\d.]+)\s*\)$/);
     return m ? parseFloat(m[1]) : 1;
   }
-  function paintsSomething(el, doc) {
-    if (VISIBLE_TAGS.has(el.tagName)) return true;
-    if (el.closest("svg")) return true;
-    for (const n of el.childNodes) {
+  function paintsSomething(el2, doc) {
+    if (VISIBLE_TAGS.has(el2.tagName)) return true;
+    if (el2.closest("svg")) return true;
+    for (const n of el2.childNodes) {
       if (n.nodeType === 3 && n.textContent && n.textContent.trim()) return true;
     }
     const win = doc.defaultView;
     if (!win) return false;
-    const cs = win.getComputedStyle(el);
+    const cs = win.getComputedStyle(el2);
     if (cs.backgroundImage !== "none") return true;
     if (bgAlpha(cs.backgroundColor) > 0) return true;
     if (cs.boxShadow !== "none") return true;
@@ -515,19 +517,19 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     if (cs.outlineStyle !== "none" && (parseFloat(cs.outlineWidth) || 0) > 0) return true;
     return false;
   }
-  function screenRect(board, el) {
+  function screenRect(board, el2) {
     if (!board.iframe || !board.el.isConnected) return null;
     const fr = board.iframe.getBoundingClientRect();
     const s = liveScale(board, board.frameEl.getBoundingClientRect());
-    const b = el.getBoundingClientRect();
+    const b = el2.getBoundingClientRect();
     return new DOMRect(fr.left + b.left * s, fr.top + b.top * s, b.width * s, b.height * s);
   }
   function liveScale(board, frame) {
     if (board.width > 0 && frame.width > 0) return frame.width / board.width;
     return state.scale || 1;
   }
-  function relPos(el, clientX, clientY, board) {
-    const r = screenRect(board, el);
+  function relPos(el2, clientX, clientY, board) {
+    const r = screenRect(board, el2);
     if (!r || r.width === 0 || r.height === 0) return { x: 0, y: 0 };
     const round = (v) => Math.round(clamp(v, 0, 1) * 1e3) / 1e3;
     return { x: round((clientX - r.left) / r.width), y: round((clientY - r.top) / r.height) };
@@ -539,31 +541,31 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       return false;
     }
   }
-  function idSelector(el) {
-    const id = el.getAttribute("id");
+  function idSelector(el2) {
+    const id = el2.getAttribute("id");
     if (!id) return null;
     return `#${CSS.escape(id)}`;
   }
-  function dataSelector(el) {
-    for (const attr of Array.from(el.attributes)) {
+  function dataSelector(el2) {
+    for (const attr of Array.from(el2.attributes)) {
       if (!attr.name.startsWith("data-") || !attr.value) continue;
       const v = attr.value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
       return `[${attr.name}="${v}"]`;
     }
     return null;
   }
-  function nthPart(el) {
-    const tag = el.localName;
-    const parent = el.parentElement;
+  function nthPart(el2) {
+    const tag = el2.localName;
+    const parent = el2.parentElement;
     if (!parent) return tag;
     const sames = Array.from(parent.children).filter((c) => c.localName === tag);
     if (sames.length < 2) return tag;
-    return `${tag}:nth-of-type(${sames.indexOf(el) + 1})`;
+    return `${tag}:nth-of-type(${sames.indexOf(el2) + 1})`;
   }
-  function buildSelector(el) {
-    const doc = el.ownerDocument;
+  function buildSelector(el2) {
+    const doc = el2.ownerDocument;
     const parts = [];
-    let cur = el;
+    let cur = el2;
     while (cur && cur !== doc.documentElement && parts.length < 5) {
       const byId = idSelector(cur);
       if (byId && isUnique(doc, byId)) {
@@ -580,12 +582,12 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       if (isUnique(doc, joined)) return joined;
       cur = cur.parentElement;
     }
-    return parts.join(" > ") || el.localName;
+    return parts.join(" > ") || el2.localName;
   }
-  function describe(el) {
-    const probe = el.closest("[data-probe]")?.getAttribute("data-probe");
-    const cls = typeof el.className === "string" ? el.className : "";
-    return `<${el.localName}>` + (probe ? `  probe=${probe}` : "") + (cls ? `  .${cls.trim().split(/\s+/).slice(0, 3).join(".")}` : "");
+  function describe(el2) {
+    const probe = el2.closest("[data-probe]")?.getAttribute("data-probe");
+    const cls = typeof el2.className === "string" ? el2.className : "";
+    return `<${el2.localName}>` + (probe ? `  probe=${probe}` : "") + (cls ? `  .${cls.trim().split(/\s+/).slice(0, 3).join(".")}` : "");
   }
   var TAG_GAP = 1;
   function placeTag(tag, box, frame, st, label) {
@@ -606,8 +608,8 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     tag.style.left = `${x - box.left - 1}px`;
     tag.style.top = `${y - box.top - 1}px`;
   }
-  function paint(box, board, el, label) {
-    const r = screenRect(board, el);
+  function paint(box, board, el2, label) {
+    const r = screenRect(board, el2);
     if (!r || r.width + r.height === 0) {
       const off = box.classList.contains("is-on");
       box.classList.remove("is-on");
@@ -654,8 +656,8 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       }
     }
     if (selectRef) {
-      const el = resolveSelected();
-      if (el) changed = paint(selectBox, selectRef.board, el, selectRef.selector) || changed;
+      const el2 = resolveSelected();
+      if (el2) changed = paint(selectBox, selectRef.board, el2, selectRef.selector) || changed;
       else if (selectBox.classList.contains("is-on")) {
         selectBox.classList.remove("is-on");
         changed = true;
@@ -676,9 +678,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     stillFrames = 0;
     if (!followRaf && (hoverRef || selectRef)) followRaf = requestAnimationFrame(follow);
   }
-  function showHover(board, el) {
-    hoverRef = { board, el };
-    paint(hoverBox, board, el, el.localName);
+  function showHover(board, el2) {
+    hoverRef = { board, el: el2 };
+    paint(hoverBox, board, el2, el2.localName);
     wake();
   }
   function hideHover() {
@@ -721,14 +723,14 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       let top = 8;
       let orphan = true;
       if (doc && ann.anchor) {
-        let el = null;
+        let el2 = null;
         try {
-          el = doc.querySelector(ann.anchor.selector);
+          el2 = doc.querySelector(ann.anchor.selector);
         } catch {
-          el = null;
+          el2 = null;
         }
-        if (el) {
-          const r = el.getBoundingClientRect();
+        if (el2) {
+          const r = el2.getBoundingClientRect();
           left = r.left + ann.anchor.x * r.width;
           top = r.top + ann.anchor.y * r.height;
           orphan = false;
@@ -1013,10 +1015,10 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     if (i >= 0) state.annotations[i] = ann;
     else state.annotations.push(ann);
   }
-  function openComposer(board, el, clientX, clientY) {
+  function openComposer(board, el2, clientX, clientY) {
     closeComposer();
-    const selector = buildSelector(el);
-    const rel = relPos(el, clientX, clientY, board);
+    const selector = buildSelector(el2);
+    const rel = relPos(el2, clientX, clientY, board);
     const box = h("div", "cs-pin-input");
     box.style.left = `${Math.min(clientX + 10, window.innerWidth - 250)}px`;
     box.style.top = `${Math.min(clientY + 10, window.innerHeight - 170)}px`;
@@ -1242,9 +1244,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     applyView();
   }
   function isBlank(target) {
-    const el = target;
-    if (!el) return false;
-    return !el.closest(".cs-board");
+    const el2 = target;
+    if (!el2) return false;
+    return !el2.closest(".cs-board");
   }
   function initView() {
     viewport = qs("#cs-viewport");
@@ -1378,13 +1380,13 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     setHidden(ids, hide);
   }
   function focusedKey() {
-    const el = document.activeElement;
-    return el && listEl.contains(el) ? el.dataset.fk ?? null : null;
+    const el2 = document.activeElement;
+    return el2 && listEl.contains(el2) ? el2.dataset.fk ?? null : null;
   }
   function restoreFocus(key) {
     if (!key) return;
-    const el = listEl.querySelector(`[data-fk="${CSS.escape(key)}"]`);
-    el?.focus({ preventScroll: true });
+    const el2 = listEl.querySelector(`[data-fk="${CSS.escape(key)}"]`);
+    el2?.focus({ preventScroll: true });
   }
   function renderSidebar() {
     if (!listEl) return;
@@ -1425,8 +1427,8 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     restoreFocus(keepFocus);
   }
   function group(key, label, ids, headCls) {
-    const el = h("div", "cs-sb-group");
-    if (headCls === "cs-sb-file") el.classList.add("is-file");
+    const el2 = h("div", "cs-sb-group");
+    if (headCls === "cs-sb-file") el2.classList.add("is-file");
     const headEl = h("div", headCls);
     const body = h("div", "cs-sb-items");
     body.id = `cs-sb-g${++uid}`;
@@ -1461,12 +1463,12 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       renderSidebar();
     });
     headEl.append(caret, bulk);
-    el.append(headEl, body);
-    return { el, body };
+    el2.append(headEl, body);
+    return { el: el2, body };
   }
   function row(id, name, sub, kind) {
-    const el = h("div", "cs-sb-row");
-    el.dataset.id = id;
+    const el2 = h("div", "cs-sb-row");
+    el2.dataset.id = id;
     const go = h("button", "cs-sb-go");
     go.type = "button";
     go.dataset.fk = `go:${id}`;
@@ -1491,9 +1493,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       toggleHidden(id);
       renderSidebar();
     });
-    el.append(go, eye);
-    if (isHidden(id)) el.classList.add("is-hidden-board");
-    return el;
+    el2.append(go, eye);
+    if (isHidden(id)) el2.classList.add("is-hidden-board");
+    return el2;
   }
   function syncActive() {
     if (!listEl) return;
@@ -1599,9 +1601,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     return titleEl;
   }
   function createBoard(entry) {
-    const el = h("div", "cs-board");
-    el.dataset.id = entry.id;
-    el.dataset.kind = entry.kind;
+    const el2 = h("div", "cs-board");
+    el2.dataset.id = entry.id;
+    el2.dataset.kind = entry.kind;
     const titleEl = h("div", "cs-board-title");
     const nameEl = h("span", "cs-name", entry.exportName);
     const badgeEl = h("span", "cs-badge", entry.kind);
@@ -1613,11 +1615,11 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     const overlayEl = h("div", "cs-ovl");
     const pinLayerEl = h("div", "cs-pins");
     frameEl.append(placeholderEl, overlayEl);
-    el.append(titleEl, frameEl, pinLayerEl);
-    world2.appendChild(el);
+    el2.append(titleEl, frameEl, pinLayerEl);
+    world2.appendChild(el2);
     const board = {
       entry,
-      el,
+      el: el2,
       titleEl,
       nameEl,
       badgeEl,
@@ -1640,10 +1642,10 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     }
     attachResizeHandles(board);
     attachBoardDrag(board);
-    el.hidden = isHidden(entry.id);
+    el2.hidden = isHidden(entry.id);
     applySize(board);
     updateBoard(board, entry);
-    io.observe(el);
+    io.observe(el2);
     return board;
   }
   var WIDTH_PRESETS = [390, 768, 1024, 1280, 1440];
@@ -2386,9 +2388,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
   // src/canvas/modes.ts
   var viewport2;
   function boardOf(target) {
-    const el = target?.closest?.(".cs-board");
-    if (!el?.dataset.id) return null;
-    return state.boards.get(el.dataset.id) ?? null;
+    const el2 = target?.closest?.(".cs-board");
+    if (!el2?.dataset.id) return null;
+    return state.boards.get(el2.dataset.id) ?? null;
   }
   function setActive(id) {
     if (state.activeId === id) return;
@@ -2455,11 +2457,11 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     setProbe("\u79FB\u5230\u753B\u677F\u4E0A\u53CD\u67E5\u5143\u7D20");
   }
   function isEditable(target) {
-    const el = target;
-    if (!el) return false;
-    const tag = el.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable === true) return true;
-    return el.closest("#cs-sidebar, #cs-args, .cs-picker, #cs-topbar") !== null;
+    const el2 = target;
+    if (!el2) return false;
+    const tag = el2.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el2.isContentEditable === true) return true;
+    return el2.closest("#cs-sidebar, #cs-args, .cs-picker, #cs-topbar") !== null;
   }
   function onKeyDown(e) {
     if (e.key === "Escape") {
@@ -2550,13 +2552,13 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     }
     if (state.mode !== "browse") return;
     setActive(board.entry.id);
-    const el = elementAt(board, e.clientX, e.clientY);
-    if (!el) {
+    const el2 = elementAt(board, e.clientX, e.clientY);
+    if (!el2) {
       hideHover();
       return;
     }
-    showHover(board, el);
-    setProbe(`${board.entry.exportName}  ${describe(el)}`);
+    showHover(board, el2);
+    setProbe(`${board.entry.exportName}  ${describe(el2)}`);
   }
   function onClick(e) {
     const target = e.target;
@@ -2578,15 +2580,15 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
       return;
     }
     setActive(board.entry.id);
-    const el = elementAt(board, e.clientX, e.clientY);
-    if (!el) return;
+    const el2 = elementAt(board, e.clientX, e.clientY);
+    if (!el2) return;
     if (state.pinPending) {
-      openComposer(board, el, e.clientX, e.clientY);
+      openComposer(board, el2, e.clientX, e.clientY);
       return;
     }
     if (state.mode !== "browse") return;
-    const selector = buildSelector(el);
-    const rel = relPos(el, e.clientX, e.clientY, board);
+    const selector = buildSelector(el2);
+    const rel = relPos(el2, e.clientX, e.clientY, board);
     showSelection(board, selector);
     state.selection = { artboardId: board.entry.id, selector, x: rel.x, y: rel.y, ts: Date.now() };
     setProbe(`\u5DF2\u9009\u4E2D ${board.entry.exportName} \u2192 ${selector}`);
@@ -2622,6 +2624,32 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     syncHud();
   }
 
+  // src/canvas/health-banner.ts
+  var el = null;
+  var lastOkAt;
+  function setLastOk(ts) {
+    lastOkAt = ts;
+  }
+  function showUnhealthy(detail) {
+    hideUnhealthy();
+    const at = lastOkAt ? new Date(lastOkAt).toLocaleTimeString("zh-CN", { hour12: false }) : null;
+    el = h("div", "cs-health");
+    el.setAttribute("role", "alert");
+    el.appendChild(h("b", void 0, "\u4F60\u7684 dev server \u6CA1\u54CD\u5E94\u4E86"));
+    el.appendChild(
+      h(
+        "span",
+        void 0,
+        `${detail ?? "SSR \u63A2\u6D4B\u5931\u8D25"}${at ? ` \xB7 \u6700\u540E\u6B63\u5E38 ${at}` : ""} \u2014\u2014 \u753B\u5E03\u6CA1\u574F,\u753B\u677F\u7834\u56FE\u662F\u5B83\u6E32\u67D3\u4E0D\u51FA\u6765\u3002\u901A\u5E38\u91CD\u542F next dev \u5373\u6108\u3002`
+      )
+    );
+    document.body.appendChild(el);
+  }
+  function hideUnhealthy() {
+    el?.remove();
+    el = null;
+  }
+
   // src/canvas/app.ts
   function showBootError(err) {
     const boot2 = qs("#cs-boot");
@@ -2678,9 +2706,9 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
   }
   function showTarget() {
     const info = state.info;
-    const el = qs("#cs-target");
-    el.textContent = info ? `${info.target} \xB7 ${info.designDir}` : "";
-    el.title = info ? `v${info.version} \xB7 ${info.projectRoot}` : "";
+    const el2 = qs("#cs-target");
+    el2.textContent = info ? `${info.target} \xB7 ${info.designDir}` : "";
+    el2.title = info ? `v${info.version} \xB7 ${info.projectRoot}` : "";
   }
   function onRegistryEvent(entries) {
     void reloadUntilMatches(entries.map((e) => e.id));
@@ -2724,16 +2752,31 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     }
     showTarget();
     restoreView();
-    await tryLoadRegistry();
     try {
-      state.annotations = await fetchAnnotations();
-      renderPins();
+      const hres = await fetch("/__cs/api/health");
+      const hstate = await hres.json();
+      setLastOk(hstate.lastOkAt);
+      if (!hstate.ok) showUnhealthy(hstate.detail);
     } catch {
     }
     connectEvents({
       registry: onRegistryEvent,
-      annotations: onAnnotations
+      annotations: onAnnotations,
+      health: (ok, detail) => {
+        if (ok) {
+          setLastOk(Date.now());
+          hideUnhealthy();
+        } else {
+          showUnhealthy(detail);
+        }
+      }
     });
+    await tryLoadRegistry();
+    try {
+      state.annotations = await fetchAnnotations();
+      renderPins();
+    } catch {
+    }
   }
   void boot();
 })();