contactsheet 0.1.3 → 0.1.5

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");
@@ -1296,220 +1298,210 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     return viewport.classList.contains("is-panning");
   }
 
-  // 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;
+  // src/canvas/sidebar.ts
+  var root;
+  var listEl;
+  var filter = "";
+  var searchCollapsed = null;
+  var uid = 0;
+  function initSidebar() {
+    root = qs("#cs-sidebar");
+    root.textContent = "";
+    const head = h("div", "cs-sb-head");
+    const search = document.createElement("input");
+    search.className = "cs-sb-search";
+    search.type = "search";
+    search.placeholder = "\u641C\u7D22\u753B\u677F\u2026";
+    search.addEventListener("input", () => {
+      filter = search.value.trim().toLowerCase();
+      searchCollapsed = filter ? /* @__PURE__ */ new Set() : null;
+      renderSidebar();
+    });
+    search.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        search.value = "";
+        filter = "";
+        searchCollapsed = null;
+        renderSidebar();
+        search.blur();
+      }
+    });
+    head.append(h("span", "cs-sb-title", "\u753B\u677F"), search);
+    listEl = h("div", "cs-sb-list");
+    listEl.addEventListener("keydown", (e) => {
+      if ((e.key === "Enter" || e.key === " ") && e.target.closest("button")) {
+        e.stopPropagation();
+      }
+    });
+    root.append(head, listEl);
+    const toggle = qs("#cs-sb-toggle");
+    toggle.addEventListener("click", () => {
+      const closed = document.body.dataset.sidebar === "off";
+      document.body.dataset.sidebar = closed ? "on" : "off";
+      toggle.title = closed ? "\u6536\u8D77\u5217\u8868" : "\u5C55\u5F00\u5217\u8868";
+    });
+    renderSidebar();
   }
-  function setActive(id) {
-    if (state.activeId === id) return;
-    state.activeId = id;
-    for (const b of state.boards.values()) b.el.classList.toggle("is-active", b.entry.id === id);
+  function match(text) {
+    return !filter || text.toLowerCase().includes(filter);
   }
-  function setMode(mode, boardId) {
-    if (mode !== "browse" && boardId) setActive(boardId);
-    if (mode === "review" && !state.activeId) return;
-    const from = state.mode;
-    state.mode = mode;
-    hideHover();
-    if (mode !== "browse") clearSelection();
-    syncHud();
-    if (mode === "review" && from !== "review") {
-      state.modeBeforeReview = from;
-      state.viewBeforeReview = { scale: state.scale, tx: state.tx, ty: state.ty };
-      closeArgsPanel();
-      fitActiveBoard();
-    } else if (mode !== "review" && from === "review" && state.viewBeforeReview) {
-      const v = state.viewBeforeReview;
-      state.viewBeforeReview = null;
-      setView(v.tx, v.ty, v.scale);
+  function collapseKey() {
+    return `cs-collapsed:${state.info?.projectRoot ?? "unknown"}`;
+  }
+  function collapsedSet() {
+    try {
+      return new Set(JSON.parse(localStorage.getItem(collapseKey()) ?? "[]"));
+    } catch {
+      return /* @__PURE__ */ new Set();
     }
-    setProbe(
-      mode === "interact" ? "\u4EA4\u4E92\u6A21\u5F0F:\u76F4\u63A5\u64CD\u4F5C\u8FD9\u5757\u753B\u677F,Esc \u56DE\u6D4F\u89C8" : mode === "review" ? "\u8D70\u67E5\u6A21\u5F0F:Esc \u9000\u51FA" : "\u79FB\u5230\u753B\u677F\u4E0A\u53CD\u67E5\u5143\u7D20"
-    );
   }
-  function fitActiveBoard() {
-    const board = state.activeId ? state.boards.get(state.activeId) : null;
-    if (!board) return;
-    const r = board.frameEl.getBoundingClientRect();
-    const worldX = (r.left - state.tx) / state.scale;
-    const worldY = (r.top - state.ty) / state.scale;
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const s = clamp(Math.min(vw / board.width, vh / board.height), MIN_SCALE, MAX_SCALE);
-    setView((vw - board.width * s) / 2 - worldX * s, (vh - board.height * s) / 2 - worldY * s, s);
+  function isCollapsed(key) {
+    return searchCollapsed ? searchCollapsed.has(key) : collapsedSet().has(key);
   }
-  function escape() {
-    if (isComposing()) {
-      closeComposer();
-      exitPinMode();
-      return;
-    }
-    if (state.pinPending) {
-      exitPinMode();
-      return;
-    }
-    if (selectedPin()) {
-      selectPin(null);
-      return;
-    }
-    if (state.mode === "review") {
-      setMode(state.modeBeforeReview === "review" ? "browse" : state.modeBeforeReview);
+  function toggleCollapsed(key) {
+    if (searchCollapsed) {
+      if (!searchCollapsed.delete(key)) searchCollapsed.add(key);
       return;
     }
-    if (state.mode === "interact") {
-      setMode("browse");
-      return;
+    const s = collapsedSet();
+    if (s.has(key)) s.delete(key);
+    else s.add(key);
+    try {
+      localStorage.setItem(collapseKey(), JSON.stringify([...s]));
+    } catch {
     }
-    clearSelection();
-    closeArgsPanel();
-    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;
+  function bulkMode(ids) {
+    const shown = ids.filter((id) => !isHidden(id)).length;
+    return { mode: shown === ids.length ? "all" : shown === 0 ? "none" : "some", shown };
   }
-  function onKeyDown(e) {
-    if (e.key === "Escape") {
-      escape();
-      return;
-    }
-    if (isEditable(e.target) || e.metaKey || e.ctrlKey || e.altKey) return;
-    if (e.key === "Enter") {
-      if (selectedPin()) {
-        e.preventDefault();
-        editSelectedPin();
-        return;
-      }
-      if (state.mode !== "review" && state.activeId) {
-        e.preventDefault();
-        setMode("review", state.activeId);
-      }
-      return;
-    }
-    if (e.key === "Backspace" || e.key === "Delete") {
-      if (selectedPin()) {
-        e.preventDefault();
-        deleteSelectedPin();
-      }
-      return;
-    }
-    if (e.key === "c" || e.key === "C") {
-      if (state.mode === "browse" && !state.pinPending) {
-        e.preventDefault();
-        enterPinMode();
-      }
-      return;
-    }
-    if (e.key === "y" || e.key === "Y") {
-      e.preventDefault();
-      void copyContext();
-      return;
-    }
-    if (e.key === "p") {
-      e.preventDefault();
-      void pushToClaudeCode();
-      return;
-    }
-    if (e.key === "1") {
-      e.preventDefault();
-      fitAll();
-      return;
-    }
-    if (e.key === "2") {
-      e.preventDefault();
-      fitBoard();
-      return;
-    }
-    if (e.key === "0") {
-      e.preventDefault();
-      zoomReset();
-      return;
-    }
-    if (e.key === "=" || e.key === "+") {
-      e.preventDefault();
-      zoomStep(1.25);
-      return;
-    }
-    if (e.key === "-" || e.key === "_") {
-      e.preventDefault();
-      zoomStep(0.8);
-    }
+  function setGroupHidden(ids, hide) {
+    setHidden(ids, hide);
   }
-  function attachFrameKeys(doc) {
-    doc.addEventListener("keydown", onKeyDown);
+  function focusedKey() {
+    const el2 = document.activeElement;
+    return el2 && listEl.contains(el2) ? el2.dataset.fk ?? null : null;
   }
-  function onMouseMove(e) {
-    if (isPanning()) return;
-    const overlay = e.target?.closest?.(".cs-ovl");
-    const board = overlay ? boardOf(e.target) : null;
-    if (!board) {
-      hideHover();
-      return;
+  function restoreFocus(key) {
+    if (!key) return;
+    const el2 = listEl.querySelector(`[data-fk="${CSS.escape(key)}"]`);
+    el2?.focus({ preventScroll: true });
+  }
+  function renderSidebar() {
+    if (!listEl) return;
+    const keepFocus = focusedKey();
+    listEl.textContent = "";
+    uid = 0;
+    const screens = state.entries.filter((e) => e.kind === "screen");
+    const comps = state.entries.filter((e) => e.kind !== "screen");
+    const visScreens = screens.filter((e) => match(e.exportName) || match(e.url ?? ""));
+    if (visScreens.length) {
+      const g = group("sec:screen", "\u9875\u9762", visScreens.map((e) => e.id), "cs-sb-section");
+      for (const e of visScreens) g.body.appendChild(row(e.id, e.exportName, e.url ?? "", "screen"));
+      listEl.appendChild(g.el);
     }
-    if (state.mode !== "browse") return;
-    setActive(board.entry.id);
-    const el = elementAt(board, e.clientX, e.clientY);
-    if (!el) {
-      hideHover();
-      return;
+    const byFile = /* @__PURE__ */ new Map();
+    for (const e of comps) {
+      if (!(match(e.exportName) || match(groupLabel(e.file)))) continue;
+      const l = byFile.get(e.file);
+      if (l) l.push(e);
+      else byFile.set(e.file, [e]);
     }
-    showHover(board, el);
-    setProbe(`${board.entry.exportName}  ${describe(el)}`);
-  }
-  function onClick(e) {
-    const target = e.target;
-    const title = target?.closest?.(".cs-board-title");
-    if (title) {
-      const board2 = boardOf(target);
-      if (!board2) return;
-      setActive(board2.entry.id);
-      if (isArgsOpen(board2.entry.id)) closeArgsPanel();
-      else openArgsPanel(board2);
-      return;
+    if (byFile.size) {
+      const files = [...byFile.keys()].sort();
+      const allIds = files.flatMap((f) => (byFile.get(f) ?? []).map((e) => e.id));
+      const g = group("sec:component", "\u7EC4\u4EF6", allIds, "cs-sb-section");
+      for (const file of files) {
+        const list = byFile.get(file) ?? [];
+        const fg = group(`file:${file}`, groupLabel(file), list.map((e) => e.id), "cs-sb-file");
+        for (const e of list) fg.body.appendChild(row(e.id, e.exportName, "", "component"));
+        g.body.appendChild(fg.el);
+      }
+      listEl.appendChild(g.el);
     }
-    const overlay = target?.closest?.(".cs-ovl");
-    if (!overlay) return;
-    const board = boardOf(target);
-    if (!board) return;
-    if (state.mode === "interact") return;
-    setActive(board.entry.id);
-    const el = elementAt(board, e.clientX, e.clientY);
-    if (!el) return;
-    if (state.pinPending) {
-      openComposer(board, el, e.clientX, e.clientY);
-      return;
+    if (!listEl.childElementCount) {
+      listEl.appendChild(h("div", "cs-sb-empty", filter ? "\u6CA1\u6709\u5339\u914D\u7684\u753B\u677F" : "\u8FD8\u6CA1\u6709\u753B\u677F"));
     }
-    if (state.mode !== "browse") return;
-    const selector = buildSelector(el);
-    const rel = relPos(el, 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}`);
-    postSelection(state.selection).catch((err) => setProbe(`selection \u53D1\u9001\u5931\u8D25:${String(err)}`));
+    syncActive();
+    restoreFocus(keepFocus);
   }
-  function onDblClick(e) {
-    const board = boardOf(e.target);
-    if (!board || !e.target.closest(".cs-ovl")) return;
-    setMode("interact", board.entry.id);
+  function group(key, label, ids, headCls) {
+    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}`;
+    const collapsed = isCollapsed(key);
+    body.hidden = collapsed;
+    const { mode, shown } = bulkMode(ids);
+    const caret = h("button", "cs-sb-caret");
+    caret.type = "button";
+    caret.dataset.fk = `caret:${key}`;
+    caret.setAttribute("aria-expanded", String(!collapsed));
+    caret.setAttribute("aria-controls", body.id);
+    caret.title = collapsed ? `\u5C55\u5F00\u300C${label}\u300D` : `\u6298\u53E0\u300C${label}\u300D`;
+    const arrow = h("span", "cs-sb-arrow", "\u25B8");
+    arrow.setAttribute("aria-hidden", "true");
+    const count = h("span", "cs-sb-count", mode === "all" ? String(ids.length) : `${shown}/${ids.length}`);
+    caret.append(arrow, h("span", "cs-sb-label", label), count);
+    caret.addEventListener("click", () => {
+      toggleCollapsed(key);
+      renderSidebar();
+    });
+    const bulk = h("button", "cs-sb-bulk", mode === "all" ? "\u25CF" : mode === "none" ? "\u25CC" : "\u25D0");
+    bulk.type = "button";
+    bulk.dataset.fk = `bulk:${key}`;
+    bulk.dataset.state = mode;
+    bulk.setAttribute("aria-pressed", mode === "all" ? "true" : mode === "none" ? "false" : "mixed");
+    const act = mode === "all" ? `\u9690\u85CF\u300C${label}\u300D\u4E0B\u5168\u90E8 ${ids.length} \u5757\u753B\u677F` : `\u663E\u793A\u300C${label}\u300D\u4E0B\u5168\u90E8 ${ids.length} \u5757\u753B\u677F`;
+    bulk.setAttribute("aria-label", act);
+    bulk.title = mode === "some" ? `${act}(\u5F53\u524D ${shown}/${ids.length} \u663E\u793A\u4E2D)` : act;
+    bulk.addEventListener("click", (e) => {
+      e.stopPropagation();
+      setGroupHidden(ids, mode === "all");
+      renderSidebar();
+    });
+    headEl.append(caret, bulk);
+    el2.append(headEl, body);
+    return { el: el2, body };
   }
-  function initModes() {
-    viewport2 = qs("#cs-viewport");
-    viewport2.addEventListener("mousemove", onMouseMove);
-    viewport2.addEventListener("mouseleave", hideHover);
-    viewport2.addEventListener("click", onClick);
-    viewport2.addEventListener("dblclick", onDblClick);
-    document.addEventListener("keydown", onKeyDown);
-    window.addEventListener("resize", () => {
-      if (state.mode === "review") fitActiveBoard();
-      else applyView();
+  function row(id, name, sub, kind) {
+    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}`;
+    go.dataset.kind = kind;
+    go.title = sub ? `\u805A\u7126 ${name} (${sub})` : `\u805A\u7126 ${name}`;
+    go.append(h("span", "cs-sb-dot"), h("span", "cs-sb-name", name));
+    if (sub) go.appendChild(h("span", "cs-sb-route", sub));
+    go.addEventListener("click", () => {
+      if (isHidden(id)) toggleHidden(id);
+      fitBoard(id);
+      state.activeId = id;
+      syncActive();
     });
-    syncHud();
+    const eye = h("button", "cs-sb-eye", isHidden(id) ? "\u25CC" : "\u25CF");
+    eye.type = "button";
+    eye.dataset.fk = `eye:${id}`;
+    eye.title = isHidden(id) ? "\u663E\u793A\u8FD9\u5757\u753B\u677F" : "\u4ECE\u5899\u4E0A\u9690\u85CF(\u4E0D\u5220,\u968F\u65F6\u70B9\u56DE\u6765)";
+    eye.setAttribute("aria-label", isHidden(id) ? `\u663E\u793A ${name}` : `\u9690\u85CF ${name}`);
+    eye.setAttribute("aria-pressed", String(!isHidden(id)));
+    eye.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleHidden(id);
+      renderSidebar();
+    });
+    el2.append(go, eye);
+    if (isHidden(id)) el2.classList.add("is-hidden-board");
+    return el2;
+  }
+  function syncActive() {
+    if (!listEl) return;
+    for (const r of listEl.querySelectorAll(".cs-sb-row")) {
+      r.classList.toggle("is-active", r.dataset.id === state.activeId);
+    }
   }
 
   // src/canvas/wall.ts
@@ -1609,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);
@@ -1623,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,
@@ -1650,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];
@@ -2393,210 +2385,269 @@ ${board.entry.kind} \xB7 ${board.entry.id}`);
     settleTimer = null;
   }
 
-  // src/canvas/sidebar.ts
-  var root;
-  var listEl;
-  var filter = "";
-  var searchCollapsed = null;
-  var uid = 0;
-  function initSidebar() {
-    root = qs("#cs-sidebar");
-    root.textContent = "";
-    const head = h("div", "cs-sb-head");
-    const search = document.createElement("input");
-    search.className = "cs-sb-search";
-    search.type = "search";
-    search.placeholder = "\u641C\u7D22\u753B\u677F\u2026";
-    search.addEventListener("input", () => {
-      filter = search.value.trim().toLowerCase();
-      searchCollapsed = filter ? /* @__PURE__ */ new Set() : null;
-      renderSidebar();
-    });
-    search.addEventListener("keydown", (e) => {
-      e.stopPropagation();
-      if (e.key === "Escape") {
-        search.value = "";
-        filter = "";
-        searchCollapsed = null;
-        renderSidebar();
-        search.blur();
+  // src/canvas/modes.ts
+  var viewport2;
+  function boardOf(target) {
+    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;
+    state.activeId = id;
+    for (const b of state.boards.values()) b.el.classList.toggle("is-active", b.entry.id === id);
+  }
+  function setMode(mode, boardId) {
+    if (mode !== "browse" && boardId) setActive(boardId);
+    if (mode === "review" && !state.activeId) return;
+    const from = state.mode;
+    state.mode = mode;
+    hideHover();
+    if (mode !== "browse") clearSelection();
+    syncHud();
+    if (mode === "review" && from !== "review") {
+      state.modeBeforeReview = from;
+      state.viewBeforeReview = { scale: state.scale, tx: state.tx, ty: state.ty };
+      closeArgsPanel();
+      fitActiveBoard();
+    } else if (mode !== "review" && from === "review" && state.viewBeforeReview) {
+      const v = state.viewBeforeReview;
+      state.viewBeforeReview = null;
+      setView(v.tx, v.ty, v.scale);
+    }
+    setProbe(
+      mode === "interact" ? "\u4EA4\u4E92\u6A21\u5F0F:\u76F4\u63A5\u64CD\u4F5C\u8FD9\u5757\u753B\u677F,Esc \u56DE\u6D4F\u89C8" : mode === "review" ? "\u8D70\u67E5\u6A21\u5F0F:Esc \u9000\u51FA" : "\u79FB\u5230\u753B\u677F\u4E0A\u53CD\u67E5\u5143\u7D20"
+    );
+  }
+  function fitActiveBoard() {
+    const board = state.activeId ? state.boards.get(state.activeId) : null;
+    if (!board) return;
+    const r = board.frameEl.getBoundingClientRect();
+    const worldX = (r.left - state.tx) / state.scale;
+    const worldY = (r.top - state.ty) / state.scale;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const s = clamp(Math.min(vw / board.width, vh / board.height), MIN_SCALE, MAX_SCALE);
+    setView((vw - board.width * s) / 2 - worldX * s, (vh - board.height * s) / 2 - worldY * s, s);
+  }
+  function escape() {
+    if (isComposing()) {
+      closeComposer();
+      exitPinMode();
+      return;
+    }
+    if (state.pinPending) {
+      exitPinMode();
+      return;
+    }
+    if (selectedPin()) {
+      selectPin(null);
+      return;
+    }
+    if (state.mode === "review") {
+      setMode(state.modeBeforeReview === "review" ? "browse" : state.modeBeforeReview);
+      return;
+    }
+    if (state.mode === "interact") {
+      setMode("browse");
+      return;
+    }
+    clearSelection();
+    closeArgsPanel();
+    setProbe("\u79FB\u5230\u753B\u677F\u4E0A\u53CD\u67E5\u5143\u7D20");
+  }
+  function isEditable(target) {
+    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") {
+      escape();
+      return;
+    }
+    if (isEditable(e.target) || e.metaKey || e.ctrlKey || e.altKey) return;
+    if (e.key === "Enter") {
+      if (selectedPin()) {
+        e.preventDefault();
+        editSelectedPin();
+        return;
+      }
+      if (state.mode !== "review" && state.activeId) {
+        e.preventDefault();
+        setMode("review", state.activeId);
+      }
+      return;
+    }
+    if (e.key === "Backspace" || e.key === "Delete") {
+      if (selectedPin()) {
+        e.preventDefault();
+        deleteSelectedPin();
+        return;
+      }
+      if (state.mode === "browse" && state.activeId) {
+        e.preventDefault();
+        const b = state.boards.get(state.activeId);
+        setHidden([state.activeId], true);
+        clearSelection();
+        setActive(null);
+        toast(`\u5DF2\u6536\u8D77\u300C${b?.entry.exportName ?? state.activeId}\u300D\xB7 \u5DE6\u4FA7\u5217\u8868\u968F\u65F6\u70B9\u56DE\u6765`, "info");
       }
-    });
-    head.append(h("span", "cs-sb-title", "\u753B\u677F"), search);
-    listEl = h("div", "cs-sb-list");
-    listEl.addEventListener("keydown", (e) => {
-      if ((e.key === "Enter" || e.key === " ") && e.target.closest("button")) {
-        e.stopPropagation();
+      return;
+    }
+    if (e.key === "c" || e.key === "C") {
+      if (state.mode === "browse" && !state.pinPending) {
+        e.preventDefault();
+        enterPinMode();
       }
-    });
-    root.append(head, listEl);
-    const toggle = qs("#cs-sb-toggle");
-    toggle.addEventListener("click", () => {
-      const closed = document.body.dataset.sidebar === "off";
-      document.body.dataset.sidebar = closed ? "on" : "off";
-      toggle.title = closed ? "\u6536\u8D77\u5217\u8868" : "\u5C55\u5F00\u5217\u8868";
-    });
-    renderSidebar();
-  }
-  function match(text) {
-    return !filter || text.toLowerCase().includes(filter);
-  }
-  function collapseKey() {
-    return `cs-collapsed:${state.info?.projectRoot ?? "unknown"}`;
-  }
-  function collapsedSet() {
-    try {
-      return new Set(JSON.parse(localStorage.getItem(collapseKey()) ?? "[]"));
-    } catch {
-      return /* @__PURE__ */ new Set();
+      return;
     }
-  }
-  function isCollapsed(key) {
-    return searchCollapsed ? searchCollapsed.has(key) : collapsedSet().has(key);
-  }
-  function toggleCollapsed(key) {
-    if (searchCollapsed) {
-      if (!searchCollapsed.delete(key)) searchCollapsed.add(key);
+    if (e.key === "y" || e.key === "Y") {
+      e.preventDefault();
+      void copyContext();
       return;
     }
-    const s = collapsedSet();
-    if (s.has(key)) s.delete(key);
-    else s.add(key);
-    try {
-      localStorage.setItem(collapseKey(), JSON.stringify([...s]));
-    } catch {
+    if (e.key === "p") {
+      e.preventDefault();
+      void pushToClaudeCode();
+      return;
+    }
+    if (e.key === "1") {
+      e.preventDefault();
+      fitAll();
+      return;
+    }
+    if (e.key === "2") {
+      e.preventDefault();
+      fitBoard();
+      return;
+    }
+    if (e.key === "0") {
+      e.preventDefault();
+      zoomReset();
+      return;
+    }
+    if (e.key === "=" || e.key === "+") {
+      e.preventDefault();
+      zoomStep(1.25);
+      return;
+    }
+    if (e.key === "-" || e.key === "_") {
+      e.preventDefault();
+      zoomStep(0.8);
     }
   }
-  function bulkMode(ids) {
-    const shown = ids.filter((id) => !isHidden(id)).length;
-    return { mode: shown === ids.length ? "all" : shown === 0 ? "none" : "some", shown };
-  }
-  function setGroupHidden(ids, hide) {
-    setHidden(ids, hide);
-  }
-  function focusedKey() {
-    const el = document.activeElement;
-    return el && listEl.contains(el) ? el.dataset.fk ?? null : null;
-  }
-  function restoreFocus(key) {
-    if (!key) return;
-    const el = listEl.querySelector(`[data-fk="${CSS.escape(key)}"]`);
-    el?.focus({ preventScroll: true });
+  function attachFrameKeys(doc) {
+    doc.addEventListener("keydown", onKeyDown);
   }
-  function renderSidebar() {
-    if (!listEl) return;
-    const keepFocus = focusedKey();
-    listEl.textContent = "";
-    uid = 0;
-    const screens = state.entries.filter((e) => e.kind === "screen");
-    const comps = state.entries.filter((e) => e.kind !== "screen");
-    const visScreens = screens.filter((e) => match(e.exportName) || match(e.url ?? ""));
-    if (visScreens.length) {
-      const g = group("sec:screen", "\u9875\u9762", visScreens.map((e) => e.id), "cs-sb-section");
-      for (const e of visScreens) g.body.appendChild(row(e.id, e.exportName, e.url ?? "", "screen"));
-      listEl.appendChild(g.el);
+  function onMouseMove(e) {
+    if (isPanning()) return;
+    const overlay = e.target?.closest?.(".cs-ovl");
+    const board = overlay ? boardOf(e.target) : null;
+    if (!board) {
+      hideHover();
+      return;
     }
-    const byFile = /* @__PURE__ */ new Map();
-    for (const e of comps) {
-      if (!(match(e.exportName) || match(groupLabel(e.file)))) continue;
-      const l = byFile.get(e.file);
-      if (l) l.push(e);
-      else byFile.set(e.file, [e]);
+    if (state.mode !== "browse") return;
+    setActive(board.entry.id);
+    const el2 = elementAt(board, e.clientX, e.clientY);
+    if (!el2) {
+      hideHover();
+      return;
     }
-    if (byFile.size) {
-      const files = [...byFile.keys()].sort();
-      const allIds = files.flatMap((f) => (byFile.get(f) ?? []).map((e) => e.id));
-      const g = group("sec:component", "\u7EC4\u4EF6", allIds, "cs-sb-section");
-      for (const file of files) {
-        const list = byFile.get(file) ?? [];
-        const fg = group(`file:${file}`, groupLabel(file), list.map((e) => e.id), "cs-sb-file");
-        for (const e of list) fg.body.appendChild(row(e.id, e.exportName, "", "component"));
-        g.body.appendChild(fg.el);
-      }
-      listEl.appendChild(g.el);
+    showHover(board, el2);
+    setProbe(`${board.entry.exportName}  ${describe(el2)}`);
+  }
+  function onClick(e) {
+    const target = e.target;
+    const title = target?.closest?.(".cs-board-title");
+    if (title) {
+      const board2 = boardOf(target);
+      if (!board2) return;
+      setActive(board2.entry.id);
+      if (isArgsOpen(board2.entry.id)) closeArgsPanel();
+      else openArgsPanel(board2);
+      return;
     }
-    if (!listEl.childElementCount) {
-      listEl.appendChild(h("div", "cs-sb-empty", filter ? "\u6CA1\u6709\u5339\u914D\u7684\u753B\u677F" : "\u8FD8\u6CA1\u6709\u753B\u677F"));
+    const overlay = target?.closest?.(".cs-ovl");
+    if (!overlay) return;
+    const board = boardOf(target);
+    if (!board) return;
+    if (state.mode === "interact") {
+      if (board.entry.id !== state.activeId) hintInactive(board);
+      return;
     }
-    syncActive();
-    restoreFocus(keepFocus);
+    setActive(board.entry.id);
+    const el2 = elementAt(board, e.clientX, e.clientY);
+    if (!el2) return;
+    if (state.pinPending) {
+      openComposer(board, el2, e.clientX, e.clientY);
+      return;
+    }
+    if (state.mode !== "browse") return;
+    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}`);
+    postSelection(state.selection).catch((err) => setProbe(`selection \u53D1\u9001\u5931\u8D25:${String(err)}`));
   }
-  function group(key, label, ids, headCls) {
-    const el = h("div", "cs-sb-group");
-    if (headCls === "cs-sb-file") el.classList.add("is-file");
-    const headEl = h("div", headCls);
-    const body = h("div", "cs-sb-items");
-    body.id = `cs-sb-g${++uid}`;
-    const collapsed = isCollapsed(key);
-    body.hidden = collapsed;
-    const { mode, shown } = bulkMode(ids);
-    const caret = h("button", "cs-sb-caret");
-    caret.type = "button";
-    caret.dataset.fk = `caret:${key}`;
-    caret.setAttribute("aria-expanded", String(!collapsed));
-    caret.setAttribute("aria-controls", body.id);
-    caret.title = collapsed ? `\u5C55\u5F00\u300C${label}\u300D` : `\u6298\u53E0\u300C${label}\u300D`;
-    const arrow = h("span", "cs-sb-arrow", "\u25B8");
-    arrow.setAttribute("aria-hidden", "true");
-    const count = h("span", "cs-sb-count", mode === "all" ? String(ids.length) : `${shown}/${ids.length}`);
-    caret.append(arrow, h("span", "cs-sb-label", label), count);
-    caret.addEventListener("click", () => {
-      toggleCollapsed(key);
-      renderSidebar();
-    });
-    const bulk = h("button", "cs-sb-bulk", mode === "all" ? "\u25CF" : mode === "none" ? "\u25CC" : "\u25D0");
-    bulk.type = "button";
-    bulk.dataset.fk = `bulk:${key}`;
-    bulk.dataset.state = mode;
-    bulk.setAttribute("aria-pressed", mode === "all" ? "true" : mode === "none" ? "false" : "mixed");
-    const act = mode === "all" ? `\u9690\u85CF\u300C${label}\u300D\u4E0B\u5168\u90E8 ${ids.length} \u5757\u753B\u677F` : `\u663E\u793A\u300C${label}\u300D\u4E0B\u5168\u90E8 ${ids.length} \u5757\u753B\u677F`;
-    bulk.setAttribute("aria-label", act);
-    bulk.title = mode === "some" ? `${act}(\u5F53\u524D ${shown}/${ids.length} \u663E\u793A\u4E2D)` : act;
-    bulk.addEventListener("click", (e) => {
-      e.stopPropagation();
-      setGroupHidden(ids, mode === "all");
-      renderSidebar();
-    });
-    headEl.append(caret, bulk);
-    el.append(headEl, body);
-    return { el, body };
+  var lastHint = "";
+  var lastHintAt = 0;
+  function hintInactive(board) {
+    const cur = state.boards.get(state.activeId ?? "")?.entry.exportName ?? "?";
+    setProbe(`\u4EA4\u4E92\u4E2D\u7684\u662F\u300C${cur}\u300D\u2014\u2014 \u8981\u4EA4\u4E92\u8FD9\u5757\u8BF7\u53CC\u51FB\u5B83,Esc \u9000\u51FA\u4EA4\u4E92`);
+    const now = Date.now();
+    if (lastHint === board.entry.id && now - lastHintAt < 4e3) return;
+    lastHint = board.entry.id;
+    lastHintAt = now;
+    toast(`\u300C${board.entry.exportName}\u300D\u672A\u6FC0\u6D3B \xB7 \u53CC\u51FB\u5B83\u5207\u6362\u4EA4\u4E92\u76EE\u6807`, "info");
   }
-  function row(id, name, sub, kind) {
-    const el = h("div", "cs-sb-row");
-    el.dataset.id = id;
-    const go = h("button", "cs-sb-go");
-    go.type = "button";
-    go.dataset.fk = `go:${id}`;
-    go.dataset.kind = kind;
-    go.title = sub ? `\u805A\u7126 ${name} (${sub})` : `\u805A\u7126 ${name}`;
-    go.append(h("span", "cs-sb-dot"), h("span", "cs-sb-name", name));
-    if (sub) go.appendChild(h("span", "cs-sb-route", sub));
-    go.addEventListener("click", () => {
-      if (isHidden(id)) toggleHidden(id);
-      fitBoard(id);
-      state.activeId = id;
-      syncActive();
-    });
-    const eye = h("button", "cs-sb-eye", isHidden(id) ? "\u25CC" : "\u25CF");
-    eye.type = "button";
-    eye.dataset.fk = `eye:${id}`;
-    eye.title = isHidden(id) ? "\u663E\u793A\u8FD9\u5757\u753B\u677F" : "\u4ECE\u5899\u4E0A\u9690\u85CF(\u4E0D\u5220,\u968F\u65F6\u70B9\u56DE\u6765)";
-    eye.setAttribute("aria-label", isHidden(id) ? `\u663E\u793A ${name}` : `\u9690\u85CF ${name}`);
-    eye.setAttribute("aria-pressed", String(!isHidden(id)));
-    eye.addEventListener("click", (e) => {
-      e.stopPropagation();
-      toggleHidden(id);
-      renderSidebar();
+  function onDblClick(e) {
+    const board = boardOf(e.target);
+    if (!board || !e.target.closest(".cs-ovl")) return;
+    setMode("interact", board.entry.id);
+  }
+  function initModes() {
+    viewport2 = qs("#cs-viewport");
+    viewport2.addEventListener("mousemove", onMouseMove);
+    viewport2.addEventListener("mouseleave", hideHover);
+    viewport2.addEventListener("click", onClick);
+    viewport2.addEventListener("dblclick", onDblClick);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", () => {
+      if (state.mode === "review") fitActiveBoard();
+      else applyView();
     });
-    el.append(go, eye);
-    if (isHidden(id)) el.classList.add("is-hidden-board");
-    return el;
+    syncHud();
   }
-  function syncActive() {
-    if (!listEl) return;
-    for (const r of listEl.querySelectorAll(".cs-sb-row")) {
-      r.classList.toggle("is-active", r.dataset.id === state.activeId);
-    }
+
+  // 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
@@ -2655,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));
@@ -2701,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();
 })();