contactsheet 0.1.3 → 0.1.4

package/dist/canvas/app.js

@@ -1296,220 +1296,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;
+  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 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 (e.key === "Backspace" || e.key === "Delete") {
-      if (selectedPin()) {
-        e.preventDefault();
-        deleteSelectedPin();
-      }
-      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 (e.key === "c" || e.key === "C") {
-      if (state.mode === "browse" && !state.pinPending) {
-        e.preventDefault();
-        enterPinMode();
+    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);
       }
-      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;
+      listEl.appendChild(g.el);
     }
-    if (e.key === "-" || e.key === "_") {
-      e.preventDefault();
-      zoomStep(0.8);
+    if (!listEl.childElementCount) {
+      listEl.appendChild(h("div", "cs-sb-empty", filter ? "\u6CA1\u6709\u5339\u914D\u7684\u753B\u677F" : "\u8FD8\u6CA1\u6709\u753B\u677F"));
     }
+    syncActive();
+    restoreFocus(keepFocus);
   }
-  function attachFrameKeys(doc) {
-    doc.addEventListener("keydown", onKeyDown);
-  }
-  function onMouseMove(e) {
-    if (isPanning()) return;
-    const overlay = e.target?.closest?.(".cs-ovl");
-    const board = overlay ? boardOf(e.target) : null;
-    if (!board) {
-      hideHover();
-      return;
-    }
-    if (state.mode !== "browse") return;
-    setActive(board.entry.id);
-    const el = elementAt(board, e.clientX, e.clientY);
-    if (!el) {
-      hideHover();
-      return;
-    }
-    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;
-    }
-    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 (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)}`));
-  }
-  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 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 };
   }
-  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 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();
     });
-    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();
+    });
+    el.append(go, eye);
+    if (isHidden(id)) el.classList.add("is-hidden-board");
+    return el;
+  }
+  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
@@ -2393,210 +2383,243 @@ ${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();
-      }
-    });
-    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 match(text) {
-    return !filter || text.toLowerCase().includes(filter);
+  // 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;
   }
-  function collapseKey() {
-    return `cs-collapsed:${state.info?.projectRoot ?? "unknown"}`;
+  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 collapsedSet() {
-    try {
-      return new Set(JSON.parse(localStorage.getItem(collapseKey()) ?? "[]"));
-    } catch {
-      return /* @__PURE__ */ new Set();
+  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 isCollapsed(key) {
-    return searchCollapsed ? searchCollapsed.has(key) : collapsedSet().has(key);
+  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 toggleCollapsed(key) {
-    if (searchCollapsed) {
-      if (!searchCollapsed.delete(key)) searchCollapsed.add(key);
+  function escape() {
+    if (isComposing()) {
+      closeComposer();
+      exitPinMode();
       return;
     }
-    const s = collapsedSet();
-    if (s.has(key)) s.delete(key);
-    else s.add(key);
-    try {
-      localStorage.setItem(collapseKey(), JSON.stringify([...s]));
-    } catch {
+    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 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 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 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 onKeyDown(e) {
+    if (e.key === "Escape") {
+      escape();
+      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 (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 (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);
+    if (e.key === "Backspace" || e.key === "Delete") {
+      if (selectedPin()) {
+        e.preventDefault();
+        deleteSelectedPin();
+        return;
       }
-      listEl.appendChild(g.el);
+      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");
+      }
+      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 (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);
     }
-    syncActive();
-    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 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 };
+  function attachFrameKeys(doc) {
+    doc.addEventListener("keydown", onKeyDown);
   }
-  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();
-    });
-    el.append(go, eye);
-    if (isHidden(id)) el.classList.add("is-hidden-board");
-    return 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;
+    }
+    if (state.mode !== "browse") return;
+    setActive(board.entry.id);
+    const el = elementAt(board, e.clientX, e.clientY);
+    if (!el) {
+      hideHover();
+      return;
+    }
+    showHover(board, el);
+    setProbe(`${board.entry.exportName}  ${describe(el)}`);
   }
-  function syncActive() {
-    if (!listEl) return;
-    for (const r of listEl.querySelectorAll(".cs-sb-row")) {
-      r.classList.toggle("is-active", r.dataset.id === state.activeId);
+  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;
+    }
+    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;
     }
+    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 (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)}`));
+  }
+  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 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();
+    });
+    syncHud();
   }
 
   // src/canvas/app.ts