contactsheet 0.1.0

package/dist/canvas/app.js

@@ -0,0 +1,2675 @@
+"use strict";
+(() => {
+  // src/canvas/api.ts
+  var BASE = "/__cs";
+  async function req(url, init) {
+    const res = await fetch(url, init);
+    if (!res.ok) throw new Error(`${init?.method ?? "GET"} ${url} \u2192 HTTP ${res.status}`);
+    const text = await res.text();
+    return text ? JSON.parse(text) : null;
+  }
+  function jsonInit(method, body) {
+    return { method, headers: { "content-type": "application/json" }, body: JSON.stringify(body) };
+  }
+  function fetchState() {
+    return req(`${BASE}/api/state`);
+  }
+  function fetchRegistry() {
+    return req(`${BASE}/registry`);
+  }
+  function fetchAnnotations() {
+    return req(`${BASE}/api/annotations`);
+  }
+  function postSelection(sel) {
+    return req(`${BASE}/api/selection`, jsonInit("POST", sel));
+  }
+  function createAnnotation(body) {
+    return req(`${BASE}/api/annotations`, jsonInit("POST", body));
+  }
+  async function deleteAnnotation(id) {
+    const res = await fetch(`${BASE}/api/annotations/${encodeURIComponent(id)}`, { method: "DELETE" });
+    if (!res.ok) throw new Error(`DELETE annotation \u2192 HTTP ${res.status}`);
+  }
+  async function pushContext(pid) {
+    const token = document.querySelector('meta[name="cs-token"]')?.content ?? "";
+    const res = await fetch(`${BASE}/api/push`, {
+      method: "POST",
+      headers: { "content-type": "application/json", "x-cs-token": token },
+      body: JSON.stringify(pid !== void 0 ? { pid } : {})
+    });
+    if (!res.ok) throw new Error(`POST push \u2192 HTTP ${res.status}`);
+    return res.json();
+  }
+  async function fetchContext() {
+    const res = await fetch(`${BASE}/api/context`);
+    if (!res.ok) throw new Error(`GET context \u2192 HTTP ${res.status}`);
+    return res.text();
+  }
+  function patchAnnotation(id, patch) {
+    return req(`${BASE}/api/annotations/${encodeURIComponent(id)}`, jsonInit("PATCH", patch));
+  }
+  function postRef(name, dataBase64) {
+    return req(`${BASE}/api/refs`, jsonInit("POST", { name, dataBase64 }));
+  }
+  function refUrl(path) {
+    return `${BASE}/api/refs/${path.split("/").map(encodeURIComponent).join("/")}`;
+  }
+  function boardUrl(entry, args) {
+    if (entry.kind === "screen") return entry.url || "/";
+    const base = `${BASE}/ab/${encodeURIComponent(entry.id)}`;
+    if (!args) return base;
+    return `${base}?args=${encodeURIComponent(JSON.stringify(args))}`;
+  }
+  function connectEvents(on) {
+    const es = new EventSource(`${BASE}/events`);
+    const dispatch = (raw) => {
+      if (typeof raw !== "string") return;
+      let ev;
+      try {
+        ev = JSON.parse(raw);
+      } catch {
+        return;
+      }
+      if (ev.type === "registry") on.registry(ev.entries ?? []);
+      else if (ev.type === "annotations") on.annotations(ev.annotations ?? []);
+    };
+    es.addEventListener("registry", (e) => dispatch(e.data));
+    es.addEventListener("annotations", (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;
+  }
+  function qs(sel) {
+    const el = document.querySelector(sel);
+    if (!el) throw new Error(`canvas: \u7F3A\u5C11\u9AA8\u67B6\u5143\u7D20 ${sel}`);
+    return el;
+  }
+  function clamp(v, lo, hi) {
+    return v < lo ? lo : v > hi ? hi : v;
+  }
+  function debounce(ms, fn) {
+    let timer;
+    return (...args) => {
+      if (timer !== void 0) clearTimeout(timer);
+      timer = setTimeout(() => fn(...args), ms);
+    };
+  }
+  function frameDoc(iframe) {
+    if (!iframe) return null;
+    try {
+      return iframe.contentDocument;
+    } catch {
+      return null;
+    }
+  }
+
+  // src/canvas/state.ts
+  var state = {
+    info: null,
+    entries: [],
+    boards: /* @__PURE__ */ new Map(),
+    /** file → 该组内画板 id 的稳定顺序(已有 id 不动,新 id 排组尾) */
+    order: /* @__PURE__ */ new Map(),
+    annotations: [],
+    mode: "browse",
+    /** 进走查前的模式,Esc 逐级退回 */
+    modeBeforeReview: "browse",
+    /** 走查前的视图,退出时还原 */
+    viewBeforeReview: null,
+    /** 当前活动画板(hover/点击/双击都会更新),Enter 走查的就是它 */
+    activeId: null,
+    selection: null,
+    /** 按了 c、等着点元素落 pin */
+    pinPending: false,
+    pinnedThisRun: 0,
+    scale: 1,
+    tx: 284,
+    // 给左侧栏让位(侧栏 236 + 边距)
+    ty: 48
+  };
+
+  // src/canvas/hud.ts
+  var modeEl;
+  var probeEl;
+  var MODE_LABEL = { browse: "\u6D4F\u89C8", interact: "\u4EA4\u4E92", review: "\u8D70\u67E5" };
+  function initHud() {
+    modeEl = qs("#cs-mode");
+    probeEl = qs("#cs-probe");
+    syncHud();
+  }
+  function syncHud() {
+    const n = state.pinPending ? state.pinnedThisRun : 0;
+    modeEl.textContent = state.pinPending ? n > 0 ? `\u6279\u6CE8\u4E2D \xB7 \u5DF2\u9489 ${n}` : "\u6279\u6CE8\u4E2D" : MODE_LABEL[state.mode];
+    document.body.dataset.mode = state.mode;
+    document.body.dataset.pin = state.pinPending ? "on" : "off";
+  }
+  function setProbe(text) {
+    probeEl.textContent = text;
+  }
+
+  // src/canvas/args-panel.ts
+  var panel;
+  var openId = null;
+  var readers = [];
+  function initArgsPanel() {
+    panel = qs("#cs-args");
+  }
+  function readMeta(board) {
+    const doc = frameDoc(board.iframe);
+    const node = doc?.getElementById("__cs_meta");
+    if (node?.textContent) {
+      try {
+        const meta = JSON.parse(node.textContent);
+        if (meta && typeof meta === "object" && meta.args && typeof meta.args === "object") return meta.args;
+      } catch {
+      }
+    }
+    return board.argsOverride ?? board.entry.args ?? null;
+  }
+  function closeArgsPanel() {
+    openId = null;
+    readers = [];
+    panel.hidden = true;
+    panel.textContent = "";
+    document.body.dataset.args = "closed";
+  }
+  function isArgsOpen(id) {
+    return openId === id;
+  }
+  function openArgsPanel(board) {
+    openId = board.entry.id;
+    readers = [];
+    panel.textContent = "";
+    panel.hidden = false;
+    document.body.dataset.args = "open";
+    const head = h("div", "cs-args-head");
+    const title = h("div", "cs-args-title", board.entry.exportName);
+    const close = h("button", "cs-x", "\u2715");
+    close.title = "\u5173\u95ED";
+    close.addEventListener("click", closeArgsPanel);
+    head.append(title, close);
+    const sub = h("div", "cs-args-sub", `${board.entry.file}
+${board.entry.kind} \xB7 ${board.entry.id}`);
+    const body = h("div", "cs-args-body");
+    const args = readMeta(board);
+    const keys = args ? Object.keys(args) : [];
+    if (!args || keys.length === 0) {
+      body.appendChild(
+        h(
+          "div",
+          "cs-args-empty",
+          board.entry.kind === "screen" ? "screen \u753B\u677F\u6CA1\u6709 args(\u5B83\u76F4\u63A5\u6E32\u67D3\u76EE\u6807\u9875\u9762)\u3002" : "\u8FD9\u4E2A\u753B\u677F\u6CA1\u6709\u58F0\u660E args\u3002\u5728 .artboard.tsx \u91CC\u52A0 args: { \u2026 } \u5C31\u80FD\u5728\u8FD9\u91CC\u8C03\u3002"
+        )
+      );
+    } else {
+      for (const key of keys) body.appendChild(field(key, args[key]));
+    }
+    const foot = h("div", "cs-args-foot");
+    const save = h("button", void 0, "\u5B58\u4E3A\u753B\u677F");
+    save.disabled = true;
+    save.title = "v1 \u672A\u5B9E\u73B0:\u6539\u597D\u7684 args \u8BF7\u624B\u52A8\u5199\u56DE .artboard.tsx \u65B0\u589E\u4E00\u4E2A export";
+    foot.appendChild(save);
+    panel.append(head, sub, body, foot);
+  }
+  var applySoon = debounce(300, () => {
+    if (!openId) return;
+    const board = state.boards.get(openId);
+    if (!board) return;
+    const next = { ...readMeta(board) ?? {} };
+    for (const f of readers) {
+      const v = f.read();
+      if (v === void 0) return;
+      next[f.key] = v;
+    }
+    board.argsOverride = next;
+    const url = boardUrl(board.entry, next);
+    const win = board.iframe?.contentWindow;
+    if (win) win.location.replace(url);
+    else if (board.iframe) board.iframe.src = url;
+    if (board.iframe) board.iframe.dataset.csUrl = url;
+    setProbe(`args \u5DF2\u5E94\u7528:${url.slice(0, 70)}`);
+  });
+  function field(key, value) {
+    const wrap = h("div", "cs-field");
+    if (typeof value === "boolean") {
+      wrap.classList.add("is-bool");
+      const label = h("label");
+      const input = h("input");
+      input.type = "checkbox";
+      input.checked = value;
+      input.dataset.key = key;
+      label.append(input, h("span", void 0, key));
+      wrap.appendChild(label);
+      readers.push({ key, read: () => input.checked });
+      input.addEventListener("change", applySoon);
+      return wrap;
+    }
+    if (typeof value === "number") {
+      wrap.appendChild(h("label", void 0, key));
+      const input = h("input");
+      input.type = "number";
+      input.value = String(value);
+      wrap.appendChild(input);
+      readers.push({
+        key,
+        read: () => {
+          const n = Number(input.value);
+          return input.value.trim() === "" || Number.isNaN(n) ? void 0 : n;
+        }
+      });
+      input.addEventListener("input", applySoon);
+      return wrap;
+    }
+    if (typeof value === "string") {
+      wrap.appendChild(h("label", void 0, key));
+      const input = h("input");
+      input.type = "text";
+      input.value = value;
+      wrap.appendChild(input);
+      readers.push({ key, read: () => input.value });
+      input.addEventListener("input", applySoon);
+      return wrap;
+    }
+    wrap.appendChild(h("label", void 0, `${key} (JSON)`));
+    const ta = h("textarea");
+    ta.value = JSON.stringify(value ?? null, null, 2);
+    wrap.appendChild(ta);
+    readers.push({
+      key,
+      read: () => {
+        try {
+          return JSON.parse(ta.value);
+        } catch {
+          ta.style.borderColor = "var(--cs-danger)";
+          return void 0;
+        }
+      }
+    });
+    ta.addEventListener("input", () => {
+      ta.style.borderColor = "";
+      applySoon();
+    });
+    return wrap;
+  }
+
+  // src/canvas/toast.ts
+  var host = null;
+  function ensureHost() {
+    if (host) return host;
+    host = document.getElementById("cs-toasts");
+    if (!host) {
+      host = h("div", "cs-toasts");
+      host.id = "cs-toasts";
+      qs("body").appendChild(host);
+    }
+    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 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);
+    }, life);
+  }
+
+  // src/canvas/refs.ts
+  var dock;
+  var lightbox;
+  var dockHead = null;
+  var localSrc = /* @__PURE__ */ new Map();
+  var pasteTarget = null;
+  function setPasteTarget(target) {
+    pasteTarget = target;
+  }
+  function activeTarget() {
+    if (pasteTarget && !pasteTarget.el.isConnected) pasteTarget = null;
+    return pasteTarget;
+  }
+  function initRefs() {
+    dock = qs("#cs-refs");
+    dock.title = "\u5168\u5C40\u53C2\u8003\u56FE:\u7C98\u8D34\u65F6\u6CA1\u6709\u5F00\u7740\u6279\u6CE8\u8F93\u5165\u6846\u7684\u56FE\u843D\u5728\u8FD9\u91CC,\u4E0D\u6302\u5728\u4EFB\u4F55\u4E00\u6761\u6279\u6CE8\u4E0A";
+    lightbox = qs("#cs-lightbox");
+    lightbox.addEventListener("click", () => {
+      lightbox.hidden = true;
+      lightbox.textContent = "";
+    });
+    document.addEventListener("paste", onPaste);
+  }
+  function onPaste(e) {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of Array.from(items)) {
+      if (item.kind !== "file" || !item.type.startsWith("image/")) continue;
+      const file = item.getAsFile();
+      if (!file) continue;
+      e.preventDefault();
+      const target = activeTarget();
+      if (target) target.onFile(file);
+      else void uploadToDock(file);
+      return;
+    }
+  }
+  async function uploadRef(file) {
+    const dataUrl = await readDataUrl(file);
+    const base64 = dataUrl.slice(dataUrl.indexOf(",") + 1);
+    const ext = (file.type.split("/")[1] || "png").replace("jpeg", "jpg");
+    const name = file.name || `paste-${Date.now()}.${ext}`;
+    setProbe(`\u4E0A\u4F20\u53C2\u8003\u56FE ${name}\u2026`);
+    const { path } = await postRef(name, base64);
+    localSrc.set(path, dataUrl);
+    return path;
+  }
+  function readDataUrl(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = () => reject(new Error("\u8BFB\u56FE\u5931\u8D25"));
+      reader.onload = () => resolve(String(reader.result));
+      reader.readAsDataURL(file);
+    });
+  }
+  function refSrc(path) {
+    return localSrc.get(path) ?? refUrl(path);
+  }
+  function refThumb(path) {
+    const card = h("div", "cs-ref-thumb");
+    card.title = path;
+    const img = h("img");
+    const broken = () => {
+      img.hidden = true;
+      card.classList.add("is-broken");
+    };
+    img.addEventListener("error", broken);
+    img.alt = path;
+    img.src = refSrc(path);
+    if (img.complete && img.naturalWidth === 0) broken();
+    card.append(img, h("span", "cs-ref-name", fileOf(path)));
+    card.addEventListener("click", (e) => {
+      e.stopPropagation();
+      openLightbox(refSrc(path), path);
+    });
+    return card;
+  }
+  function openLightbox(src, caption) {
+    lightbox.textContent = "";
+    const big = h("img");
+    big.src = src;
+    big.alt = caption;
+    lightbox.append(big, h("span", void 0, caption));
+    lightbox.hidden = false;
+  }
+  function fileOf(path) {
+    return path.split("/").pop() ?? path;
+  }
+  async function uploadToDock(file) {
+    try {
+      const path = await uploadRef(file);
+      addThumb(path);
+      toast(
+        `\u53C2\u8003\u56FE\u5DF2\u5B58:${path} \u2014\u2014 \u8FD9\u662F\u5168\u5C40\u53C2\u8003\u56FE,\u6CA1\u6302\u5728\u6279\u6CE8\u4E0A\u3002\u8981\u6302\u5230\u67D0\u6761\u6279\u6CE8:\u6309 c \u5199\u6279\u6CE8\u65F6\u7C98\u8D34,\u6216\u5728 pin \u6C14\u6CE1\u91CC\u70B9\u300C\u7F16\u8F91\u300D\u540E\u7C98\u8D34`,
+        "ok"
+      );
+    } catch (err) {
+      toast(`\u53C2\u8003\u56FE\u4E0A\u4F20\u5931\u8D25:${String(err)}`, "error");
+    }
+  }
+  function addThumb(path) {
+    ensureDockHead();
+    const card = h("div", "cs-ref");
+    const img = h("img");
+    img.src = refSrc(path);
+    img.alt = path;
+    card.append(img, h("span", void 0, fileOf(path)));
+    card.title = `${path}(\u5168\u5C40\u53C2\u8003\u56FE,\u4E0D\u5C5E\u4E8E\u4EFB\u4F55\u6279\u6CE8)`;
+    card.addEventListener("click", () => openLightbox(refSrc(path), path));
+    dock.appendChild(card);
+  }
+  function ensureDockHead() {
+    if (dockHead) return;
+    dockHead = h("div", "cs-refs-head", "\u5168\u5C40\u53C2\u8003\u56FE \xB7 \u672A\u6302\u5230\u6279\u6CE8");
+    dockHead.title = "\u7C98\u8D34\u65F6\u6CA1\u6709\u5F00\u7740\u6279\u6CE8\u8F93\u5165\u6846\u7684\u56FE\u843D\u5728\u8FD9\u91CC\u3002\u8981\u6302\u5230\u67D0\u6761\u6279\u6CE8:\u6309 c \u5199\u6279\u6CE8\u65F6\u7C98\u8D34,\u6216\u5728 pin \u6C14\u6CE1\u91CC\u70B9\u300C\u7F16\u8F91\u300D\u540E\u7C98\u8D34";
+    dock.insertBefore(dockHead, dock.firstChild);
+  }
+
+  // src/canvas/select.ts
+  var fx;
+  var hoverBox;
+  var selectBox;
+  var hoverRef = null;
+  var selectRef = null;
+  var painted = /* @__PURE__ */ new Map();
+  function makeBox(kind) {
+    const box = h("div", "cs-box");
+    box.dataset.kind = kind;
+    box.appendChild(h("span", "cs-box-tag"));
+    fx.appendChild(box);
+    return box;
+  }
+  function initSelect() {
+    fx = qs("#cs-fx");
+    hoverBox = makeBox("hover");
+    selectBox = makeBox("select");
+  }
+  function elementAt(board, clientX, clientY) {
+    const doc = frameDoc(board.iframe);
+    if (!doc || !board.iframe) return null;
+    const r = board.iframe.getBoundingClientRect();
+    const s = liveScale(board, board.frameEl.getBoundingClientRect());
+    let stack;
+    try {
+      stack = doc.elementsFromPoint((clientX - r.left) / s, (clientY - r.top) / s);
+    } catch {
+      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;
+    }
+    return null;
+  }
+  var VISIBLE_TAGS = /* @__PURE__ */ new Set([
+    "IMG",
+    "VIDEO",
+    "CANVAS",
+    "INPUT",
+    "SELECT",
+    "TEXTAREA",
+    "BUTTON",
+    "HR",
+    "IFRAME",
+    "PICTURE",
+    "AUDIO",
+    "EMBED",
+    "OBJECT"
+  ]);
+  function bgAlpha(bg) {
+    if (bg === "transparent") return 0;
+    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) {
+      if (n.nodeType === 3 && n.textContent && n.textContent.trim()) return true;
+    }
+    const win = doc.defaultView;
+    if (!win) return false;
+    const cs = win.getComputedStyle(el);
+    if (cs.backgroundImage !== "none") return true;
+    if (bgAlpha(cs.backgroundColor) > 0) return true;
+    if (cs.boxShadow !== "none") return true;
+    if ((parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderRightWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0) + (parseFloat(cs.borderLeftWidth) || 0) > 0) return true;
+    if (cs.outlineStyle !== "none" && (parseFloat(cs.outlineWidth) || 0) > 0) return true;
+    return false;
+  }
+  function screenRect(board, el) {
+    if (!board.iframe || !board.el.isConnected) return null;
+    const fr = board.iframe.getBoundingClientRect();
+    const s = liveScale(board, board.frameEl.getBoundingClientRect());
+    const b = el.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);
+    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) };
+  }
+  function isUnique(doc, sel) {
+    try {
+      return doc.querySelectorAll(sel).length === 1;
+    } catch {
+      return false;
+    }
+  }
+  function idSelector(el) {
+    const id = el.getAttribute("id");
+    if (!id) return null;
+    return `#${CSS.escape(id)}`;
+  }
+  function dataSelector(el) {
+    for (const attr of Array.from(el.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;
+    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})`;
+  }
+  function buildSelector(el) {
+    const doc = el.ownerDocument;
+    const parts = [];
+    let cur = el;
+    while (cur && cur !== doc.documentElement && parts.length < 5) {
+      const byId = idSelector(cur);
+      if (byId && isUnique(doc, byId)) {
+        parts.unshift(byId);
+        return parts.join(" > ");
+      }
+      const byData = dataSelector(cur);
+      if (byData && isUnique(doc, byData)) {
+        parts.unshift(byData);
+        return parts.join(" > ");
+      }
+      parts.unshift(nthPart(cur));
+      const joined = parts.join(" > ");
+      if (isUnique(doc, joined)) return joined;
+      cur = cur.parentElement;
+    }
+    return parts.join(" > ") || el.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(".")}` : "");
+  }
+  var TAG_GAP = 1;
+  function placeTag(tag, box, frame, st, label) {
+    const maxW = Math.max(24, Math.floor(frame.width) - 2);
+    const key = `${label}|${maxW}`;
+    if (st.tagKey !== key) {
+      tag.style.maxWidth = `${maxW}px`;
+      const t = tag.getBoundingClientRect();
+      st.tagKey = t.height > 0 ? key : "";
+      st.tagW = t.width;
+      st.tagH = t.height;
+    }
+    let x = box.left;
+    let y = box.top - st.tagH - TAG_GAP;
+    if (y < frame.top) y = box.top + TAG_GAP;
+    y = clamp(y, frame.top, Math.max(frame.top, frame.bottom - st.tagH));
+    x = clamp(x, frame.left, Math.max(frame.left, frame.right - st.tagW));
+    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);
+    if (!r || r.width + r.height === 0) {
+      const off = box.classList.contains("is-on");
+      box.classList.remove("is-on");
+      return off;
+    }
+    const frame = board.frameEl.getBoundingClientRect();
+    const sig = `${r.left},${r.top},${r.width},${r.height}|${frame.left},${frame.top},${frame.width},${frame.height}|${label}`;
+    let st = painted.get(box);
+    if (st && st.sig === sig && box.classList.contains("is-on")) return false;
+    if (!st) {
+      st = { sig, tagKey: "", tagW: 0, tagH: 0 };
+      painted.set(box, st);
+    }
+    st.sig = sig;
+    box.style.left = `${r.left}px`;
+    box.style.top = `${r.top}px`;
+    box.style.width = `${r.width}px`;
+    box.style.height = `${r.height}px`;
+    const tag = box.firstElementChild;
+    if (tag.textContent !== label) tag.textContent = label;
+    box.classList.add("is-on");
+    placeTag(tag, r, frame, st, label);
+    return true;
+  }
+  function resolveSelected() {
+    if (!selectRef) return null;
+    if (selectRef.el?.isConnected) return selectRef.el;
+    const doc = frameDoc(selectRef.board.iframe);
+    try {
+      selectRef.el = doc ? doc.querySelector(selectRef.selector) : null;
+    } catch {
+      selectRef.el = null;
+    }
+    return selectRef.el;
+  }
+  function paintAll() {
+    let changed = false;
+    if (hoverRef) {
+      if (hoverRef.el.isConnected) {
+        changed = paint(hoverBox, hoverRef.board, hoverRef.el, hoverRef.el.localName) || changed;
+      } else {
+        hideHover();
+        changed = true;
+      }
+    }
+    if (selectRef) {
+      const el = resolveSelected();
+      if (el) changed = paint(selectBox, selectRef.board, el, selectRef.selector) || changed;
+      else if (selectBox.classList.contains("is-on")) {
+        selectBox.classList.remove("is-on");
+        changed = true;
+      }
+    }
+    return changed;
+  }
+  var STILL_FRAMES = 24;
+  var followRaf = 0;
+  var stillFrames = 0;
+  function follow() {
+    followRaf = 0;
+    if (!hoverRef && !selectRef) return;
+    stillFrames = paintAll() ? 0 : stillFrames + 1;
+    if (stillFrames < STILL_FRAMES) followRaf = requestAnimationFrame(follow);
+  }
+  function wake() {
+    stillFrames = 0;
+    if (!followRaf && (hoverRef || selectRef)) followRaf = requestAnimationFrame(follow);
+  }
+  function showHover(board, el) {
+    hoverRef = { board, el };
+    paint(hoverBox, board, el, el.localName);
+    wake();
+  }
+  function hideHover() {
+    hoverRef = null;
+    hoverBox.classList.remove("is-on");
+  }
+  function showSelection(board, selector) {
+    selectRef = { board, selector, el: null };
+    refreshBoxes();
+  }
+  function clearSelection() {
+    selectRef = null;
+    selectBox.classList.remove("is-on");
+  }
+  function refreshBoxes() {
+    if (hoverRef && !hoverRef.el.isConnected) hideHover();
+    paintAll();
+    wake();
+  }
+
+  // src/canvas/pins.ts
+  var fx2;
+  var composer = null;
+  function initPins() {
+    fx2 = qs("#cs-fx");
+  }
+  function renderPins() {
+    for (const board of state.boards.values()) renderBoardPins(board);
+  }
+  function renderBoardPins(board) {
+    const layer = board.pinLayerEl;
+    layer.textContent = "";
+    const doc = frameDoc(board.iframe);
+    const list = state.annotations.filter(
+      (a) => a.artboardId === board.entry.id && a.status !== "verified"
+    );
+    const used = /* @__PURE__ */ new Map();
+    list.forEach((ann, i) => {
+      let left = 8;
+      let top = 8;
+      let orphan = true;
+      if (doc && ann.anchor) {
+        let el = null;
+        try {
+          el = doc.querySelector(ann.anchor.selector);
+        } catch {
+          el = null;
+        }
+        if (el) {
+          const r = el.getBoundingClientRect();
+          left = r.left + ann.anchor.x * r.width;
+          top = r.top + ann.anchor.y * r.height;
+          orphan = false;
+        }
+      }
+      const key = `${Math.round(left / 12)}:${Math.round(top / 12)}`;
+      const dup = used.get(key) ?? 0;
+      used.set(key, dup + 1);
+      left += dup * 20;
+      const pin = h("div", "cs-pin", String(ann.seq ?? i + 1));
+      pin.dataset.annId = ann.id;
+      if (ann.status === "resolved") pin.classList.add("is-resolved");
+      if (ann.id === selectedPinId) pin.classList.add("is-selected");
+      if (orphan) {
+        pin.classList.add("is-orphan");
+        pin.title = "\u951A\u70B9\u5143\u7D20\u6CA1\u627E\u5230,pin \u843D\u5728\u753B\u677F\u5DE6\u4E0A\u89D2";
+      }
+      pin.style.left = `${left}px`;
+      pin.style.top = `${top}px`;
+      pin.addEventListener("click", (e) => {
+        e.stopPropagation();
+        selectPin(ann.id);
+      });
+      pin.appendChild(bubble(ann));
+      attachHoverGrace(pin);
+      layer.appendChild(pin);
+    });
+  }
+  var selectedPinId = null;
+  function selectedPin() {
+    return selectedPinId;
+  }
+  function selectPin(id) {
+    selectedPinId = id;
+    for (const p of document.querySelectorAll(".cs-pin")) {
+      p.classList.toggle("is-selected", !!id && p.dataset.annId === id);
+      if (id && p.dataset.annId === id) p.classList.add("is-open");
+      else p.classList.remove("is-open");
+    }
+    setProbe(id ? "\u6279\u6CE8\u5DF2\u9009\u4E2D:Enter \u7F16\u8F91 \xB7 Backspace \u5220\u9664 \xB7 Esc \u53D6\u6D88" : "\u79FB\u5230\u753B\u677F\u4E0A\u53CD\u67E5\u5143\u7D20");
+  }
+  function editSelectedPin() {
+    if (!selectedPinId) return;
+    const pin = document.querySelector(`.cs-pin[data-ann-id="${CSS.escape(selectedPinId)}"]`);
+    if (!pin) return;
+    const box = pin.querySelector(".cs-pin-bubble");
+    if (!box) return;
+    const saveBtn = [...box.querySelectorAll("button")].find((b) => b.textContent === "\u4FDD\u5B58");
+    if (saveBtn) {
+      saveBtn.click();
+      return;
+    }
+    const ann = state.annotations.find((a) => a.id === selectedPinId);
+    const textEl = box.querySelector(".cs-pin-text");
+    if (ann && textEl) startEdit(box, textEl, ann);
+  }
+  function deleteSelectedPin() {
+    if (!selectedPinId) return;
+    const id = selectedPinId;
+    selectedPinId = null;
+    void remove(id);
+  }
+  function attachHoverGrace(pin) {
+    let timer = null;
+    pin.addEventListener("mouseenter", () => {
+      if (timer !== null) clearTimeout(timer);
+      timer = null;
+      pin.classList.add("is-open");
+    });
+    pin.addEventListener("mouseleave", () => {
+      timer = setTimeout(() => {
+        if (!pin.querySelector(".cs-pin-bubble.is-editing")) pin.classList.remove("is-open");
+      }, 250);
+    });
+  }
+  function refStrip(paths) {
+    const strip = h("div", "cs-ref-strip");
+    for (const p of paths) strip.appendChild(refThumb(p));
+    return strip;
+  }
+  function bubble(ann) {
+    const box = h("div", "cs-pin-bubble");
+    const textEl = h("div", "cs-pin-text", ann.text);
+    box.appendChild(textEl);
+    if (ann.refs?.length) box.appendChild(refStrip(ann.refs));
+    const meta = h("div", "cs-pin-meta");
+    meta.appendChild(h("span", void 0, ann.status === "open" ? "open" : "\u5F85\u6838\u9A8C"));
+    const act = (label, cls, fn) => {
+      const btn = h("button", cls, label);
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        fn();
+      });
+      meta.appendChild(btn);
+    };
+    if (ann.status === "open") {
+      act(
+        "\u6807\u8BB0\u5B8C\u6210",
+        "cs-x",
+        () => void transition(ann.id, { status: "resolved", resolvedAt: (/* @__PURE__ */ new Date()).toISOString() }, "\u5DF2\u6807\u8BB0\u5B8C\u6210,\u5F85\u4EBA\u5DE5\u6838\u9A8C")
+      );
+    } else {
+      act(
+        "\u6838\u9A8C\u901A\u8FC7",
+        "cs-x",
+        () => void transition(ann.id, { status: "verified", verifiedAt: (/* @__PURE__ */ new Date()).toISOString() }, "\u6838\u9A8C\u901A\u8FC7,\u5DF2\u5F52\u6863\u8FDB\u5386\u53F2")
+      );
+      act("\u6253\u56DE", "cs-x", () => void transition(ann.id, { status: "open" }, "\u5DF2\u6253\u56DE,\u91CD\u65B0\u5F85\u5904\u7406"));
+    }
+    act("\u7F16\u8F91", "cs-x", () => startEdit(box, textEl, ann));
+    act("\u5220\u9664", "cs-x cs-x-danger", () => void remove(ann.id));
+    box.appendChild(meta);
+    return box;
+  }
+  async function transition(id, patch, msg) {
+    try {
+      const updated = await patchAnnotation(id, patch);
+      upsert(updated);
+      renderPins();
+      toast(msg, "ok");
+    } catch (err) {
+      toast(`\u6279\u6CE8\u72B6\u6001\u66F4\u65B0\u5931\u8D25:${err}`, "error");
+    }
+  }
+  function startEdit(box, textEl, ann) {
+    if (box.querySelector("textarea")) return;
+    box.classList.add("is-editing");
+    const ta = h("textarea", "cs-pin-edit");
+    ta.value = ann.text;
+    const refs = [...ann.refs ?? []];
+    const strip = box.querySelector(".cs-ref-strip") ?? refStrip([]);
+    if (!strip.isConnected) box.insertBefore(strip, box.querySelector(".cs-pin-meta"));
+    setPasteTarget({
+      el: box,
+      onFile: (file) => {
+        void uploadRef(file).then((path) => {
+          refs.push(path);
+          strip.appendChild(refThumb(path));
+          toast(`\u53C2\u8003\u56FE\u5DF2\u4E0A\u4F20:${path} \u2014\u2014 \u70B9\u300C\u4FDD\u5B58\u300D\u540E\u624D\u6302\u5230\u8FD9\u6761\u6279\u6CE8`, "ok");
+        }).catch((err) => toast(`\u53C2\u8003\u56FE\u4E0A\u4F20\u5931\u8D25:${String(err)}`, "error"));
+      }
+    });
+    ta.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        e.preventDefault();
+        save.click();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        renderPins();
+      }
+    });
+    ta.addEventListener("mousedown", (e) => e.stopPropagation());
+    const row2 = h("div", "cs-pin-meta");
+    const save = h("button", "cs-x", "\u4FDD\u5B58");
+    save.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const text = ta.value.trim();
+      const textChanged = !!text && text !== ann.text;
+      const refsChanged = refs.length !== (ann.refs?.length ?? 0);
+      if (!textChanged && !refsChanged) return renderPins();
+      const patch = {};
+      if (textChanged) patch.text = text;
+      if (refsChanged) patch.refs = refs;
+      void patchAnnotation(ann.id, patch).then((updated) => {
+        upsert(updated);
+        renderPins();
+        toast("\u6279\u6CE8\u5DF2\u66F4\u65B0", "ok");
+      }).catch((err) => toast(`\u6279\u6CE8\u66F4\u65B0\u5931\u8D25:${err}`, "error"));
+    });
+    const cancel = h("button", "cs-x", "\u53D6\u6D88");
+    cancel.addEventListener("click", (e) => {
+      e.stopPropagation();
+      renderPins();
+    });
+    row2.appendChild(save);
+    row2.appendChild(cancel);
+    textEl.replaceWith(ta);
+    box.appendChild(row2);
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+  }
+  async function remove(id) {
+    try {
+      await deleteAnnotation(id);
+      state.annotations = state.annotations.filter((a) => a.id !== id);
+      renderPins();
+      toast("\u6279\u6CE8\u5DF2\u5220\u9664", "ok");
+    } catch (err) {
+      toast(`\u6279\u6CE8\u5220\u9664\u5931\u8D25:${err}`, "error");
+    }
+  }
+  function legacyPushMemKey() {
+    return `cs-pushpid:${state.info?.projectRoot ?? "unknown"}`;
+  }
+  async function pushToClaudeCode(pid) {
+    setProbe("\u63A8\u9001\u4E2D\u2026");
+    try {
+      try {
+        localStorage.removeItem(legacyPushMemKey());
+      } catch {
+      }
+      let r = await pushContext(pid);
+      if (!r.ok && "reason" in r && r.reason?.includes("\u5DF2\u4E0D\u5728") && pid !== void 0) {
+        r = await pushContext();
+      }
+      if (r.ok) {
+        toast(`\u5DF2\u6295\u9012\u5230\u300C${r.name}\u300D\u7684 inbox \u2014 \u8BE5\u4F1A\u8BDD\u53EF\u80FD\u9700\u8981\u4F60\u5728\u7EC8\u7AEF\u70B9\u4E00\u4E0B\u786E\u8BA4`, "ok");
+        return;
+      }
+      if ("choose" in r && r.choose?.length) {
+        showSessionPicker(r.choose);
+        return;
+      }
+      toast(`${"reason" in r && r.reason || "\u63A8\u9001\u5931\u8D25"} \u2014\u2014 \u5DF2\u56DE\u843D\u4E3A\u590D\u5236\u5230\u526A\u8D34\u677F`, "warn");
+      await copyContext();
+    } catch (err) {
+      toast(`\u63A8\u9001\u5931\u8D25:${err} \u2014\u2014 \u5DF2\u56DE\u843D\u4E3A\u590D\u5236\u5230\u526A\u8D34\u677F`, "warn");
+      await copyContext();
+    }
+  }
+  function showSessionPicker(items) {
+    document.getElementById("cs-picker")?.remove();
+    const wrap = h("div", "cs-picker");
+    wrap.id = "cs-picker";
+    const card = h("div", "cs-card");
+    card.appendChild(h("h2", void 0, "\u63A8\u9001\u7ED9\u54EA\u4E2A\u4F1A\u8BDD?"));
+    const cleanup = () => {
+      document.removeEventListener("keydown", onKey, true);
+      wrap.remove();
+    };
+    items.slice(0, 9).forEach((it, i) => {
+      const row2 = h(
+        "button",
+        "cs-picker-row",
+        `${i + 1}  ${it.name}`
+      );
+      const badge = h("span", `cs-picker-status is-${it.status}`, it.status);
+      row2.appendChild(badge);
+      row2.addEventListener("click", () => {
+        cleanup();
+        void pushToClaudeCode(it.pid);
+      });
+      card.appendChild(row2);
+    });
+    card.appendChild(h("p", "cs-dim", "\u6570\u5B57\u952E\u9009\u62E9 \xB7 Esc \u53D6\u6D88"));
+    wrap.appendChild(card);
+    const onKey = (e) => {
+      const n = Number(e.key);
+      if (Number.isInteger(n) && n >= 1 && n <= Math.min(items.length, 9)) {
+        e.stopPropagation();
+        cleanup();
+        void pushToClaudeCode(items[n - 1].pid);
+      } else if (e.key === "Escape") {
+        e.stopPropagation();
+        cleanup();
+        toast("\u5DF2\u53D6\u6D88\u63A8\u9001");
+      }
+    };
+    document.addEventListener("keydown", onKey, true);
+    wrap.addEventListener("click", (e) => {
+      if (e.target === wrap) cleanup();
+    });
+    document.body.appendChild(wrap);
+  }
+  async function copyContext() {
+    try {
+      const text = await fetchContext();
+      if (!text.trim()) {
+        toast("\u6CA1\u6709\u5F85\u5904\u7406\u7684\u6279\u6CE8\u6216\u9009\u4E2D,\u5148\u6309 c \u9489\u4E00\u6761", "warn");
+        return;
+      }
+      await navigator.clipboard.writeText(text);
+      const n = state.annotations.filter((a) => a.status === "open").length;
+      toast(`\u5DF2\u590D\u5236 ${n} \u6761\u6279\u6CE8(\u542B\u9009\u4E2D),\u7C98\u5230\u4EFB\u4F55 Claude Code \u7A97\u53E3\u5373\u53EF`, "ok");
+    } catch (err) {
+      toast(`\u590D\u5236\u5931\u8D25:${err}`, "error");
+    }
+  }
+  function upsert(ann) {
+    const i = state.annotations.findIndex((a) => a.id === ann.id);
+    if (i >= 0) state.annotations[i] = ann;
+    else state.annotations.push(ann);
+  }
+  function openComposer(board, el, clientX, clientY) {
+    closeComposer();
+    const selector = buildSelector(el);
+    const rel = relPos(el, 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`;
+    const ta = h("textarea");
+    ta.placeholder = `\u6279\u6CE8 ${selector}`;
+    const strip = refStrip([]);
+    const tip = h("div", "cs-pin-tip", "Enter \u63D0\u4EA4 \xB7 Shift+Enter \u6362\u884C \xB7 Cmd/Ctrl+V \u8D34\u53C2\u8003\u56FE \xB7 Esc \u53D6\u6D88");
+    box.append(ta, strip, tip);
+    fx2.appendChild(box);
+    composer = box;
+    ta.focus();
+    const refs = [];
+    setPasteTarget({
+      el: box,
+      onFile: (file) => {
+        void uploadRef(file).then((path) => {
+          refs.push(path);
+          strip.appendChild(refThumb(path));
+          setProbe(`\u53C2\u8003\u56FE\u5DF2\u6302\u5230\u8FD9\u6761\u6279\u6CE8:${path}`);
+        }).catch((err) => toast(`\u53C2\u8003\u56FE\u4E0A\u4F20\u5931\u8D25:${String(err)}`, "error"));
+      }
+    });
+    ta.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        closeComposer();
+        exitPinMode();
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        const text = ta.value.trim();
+        if (!text) {
+          closeComposer();
+          exitPinMode();
+          return;
+        }
+        void submit(board, selector, rel, text, refs);
+      }
+    });
+  }
+  async function submit(board, selector, rel, text, refs) {
+    closeComposer();
+    try {
+      const ann = await createAnnotation({
+        artboardId: board.entry.id,
+        anchor: { selector, x: rel.x, y: rel.y },
+        text,
+        refs,
+        status: "open"
+      });
+      upsert(ann);
+      renderBoardPins(board);
+      state.pinnedThisRun++;
+      syncHud();
+      const withRefs = refs.length ? ` \xB7 \u5E26 ${refs.length} \u5F20\u53C2\u8003\u56FE` : "";
+      toast(`\u5DF2\u8BB0\u6279\u6CE8:${text.slice(0, 30)}${text.length > 30 ? "\u2026" : ""}${withRefs}`, "ok");
+    } catch (err) {
+      toast(`\u6279\u6CE8\u5931\u8D25:${String(err)}`, "error");
+    }
+  }
+  function closeComposer() {
+    composer?.remove();
+    composer = null;
+    setPasteTarget(null);
+  }
+  function isComposing() {
+    return composer !== null;
+  }
+  function enterPinMode() {
+    state.pinPending = true;
+    state.pinnedThisRun = 0;
+    syncHud();
+    setProbe("\u6279\u6CE8\u6A21\u5F0F:\u70B9\u5143\u7D20\u843D pin,\u53EF\u8FDE\u9489\u591A\u6761,Esc \u9000\u51FA");
+  }
+  function exitPinMode() {
+    if (!state.pinPending) return;
+    state.pinPending = false;
+    if (state.pinnedThisRun > 0)
+      toast(`\u672C\u8F6E\u9489\u4E86 ${state.pinnedThisRun} \u6761\u6279\u6CE8 \xB7 \u6309 p \u63A8\u7ED9 Claude`, "info");
+    state.pinnedThisRun = 0;
+    syncHud();
+    setProbe("\u79FB\u5230\u753B\u677F\u4E0A\u53CD\u67E5\u5143\u7D20");
+  }
+
+  // src/canvas/view.ts
+  var MIN_SCALE = 0.05;
+  var MAX_SCALE = 2;
+  var viewport;
+  var world;
+  var zoomLabel;
+  var listeners = [];
+  function onViewChange(fn) {
+    listeners.push(fn);
+  }
+  function viewKey() {
+    return `cs-view:${state.info?.projectRoot ?? "unknown"}`;
+  }
+  var saveTimer = null;
+  function persistView() {
+    const v = state.mode === "review" && state.viewBeforeReview ? state.viewBeforeReview : { tx: state.tx, ty: state.ty, scale: state.scale };
+    if (saveTimer !== null) clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+      try {
+        localStorage.setItem(viewKey(), JSON.stringify(v));
+      } catch {
+      }
+    }, 300);
+  }
+  function restoreView() {
+    try {
+      const raw = localStorage.getItem(viewKey());
+      if (!raw) return false;
+      const v = JSON.parse(raw);
+      if (![v.tx, v.ty, v.scale].every(Number.isFinite)) return false;
+      setView(v.tx, v.ty, v.scale);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  var raf = 0;
+  function applyView() {
+    world.style.transform = `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`;
+    world.style.setProperty("--cs-inv", String(1 / state.scale));
+    const grid = 24 * state.scale;
+    viewport.style.backgroundSize = `${grid}px ${grid}px`;
+    viewport.style.backgroundPosition = `${state.tx}px ${state.ty}px`;
+    zoomLabel.textContent = `${Math.round(state.scale * 100)}%`;
+    persistView();
+    if (raf) return;
+    raf = requestAnimationFrame(() => {
+      raf = 0;
+      for (const fn of listeners) fn();
+    });
+  }
+  function setView(tx, ty, scale) {
+    state.scale = clamp(scale, MIN_SCALE, MAX_SCALE);
+    state.tx = tx;
+    state.ty = ty;
+    applyView();
+  }
+  function worldBounds() {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const b of state.boards.values()) {
+      if (b.el.hidden) continue;
+      const x = parseFloat(b.el.style.left || "0");
+      const y = parseFloat(b.el.style.top || "0");
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + b.width);
+      maxY = Math.max(maxY, y + b.height + 40);
+    }
+    if (!Number.isFinite(minX)) return null;
+    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+  }
+  function animateTo(tx, ty, scale) {
+    const world3 = qs("#cs-world");
+    world3.style.transition = `transform var(--cs-dur-3) var(--cs-ease-out)`;
+    setView(tx, ty, scale);
+    window.setTimeout(() => {
+      world3.style.transition = "";
+      applyView();
+    }, 260);
+  }
+  function usableViewport() {
+    const vp = qs("#cs-viewport").getBoundingClientRect();
+    const sb = document.getElementById("cs-sidebar");
+    const off = sb && document.body.dataset.sidebar !== "off" ? sb.getBoundingClientRect().width : 0;
+    return { x: vp.x + off, y: vp.y, width: vp.width - off, height: vp.height };
+  }
+  function fitAll(pad = 64) {
+    const b = worldBounds();
+    if (!b) return;
+    const vp = usableViewport();
+    const scale = clamp(
+      Math.min((vp.width - pad * 2) / b.w, (vp.height - pad * 2) / b.h),
+      MIN_SCALE,
+      MAX_SCALE
+    );
+    animateTo(
+      vp.x + vp.width / 2 - (b.x + b.w / 2) * scale,
+      vp.y + vp.height / 2 - (b.y + b.h / 2) * scale,
+      scale
+    );
+  }
+  function fitBoard(id, pad = 80) {
+    const board = state.boards.get(id ?? state.activeId ?? "");
+    if (!board) return fitAll();
+    const x = parseFloat(board.el.style.left || "0");
+    const y = parseFloat(board.el.style.top || "0");
+    const vp = usableViewport();
+    const scale = clamp(
+      Math.min((vp.width - pad * 2) / board.width, (vp.height - pad * 2) / (board.height + 40)),
+      MIN_SCALE,
+      MAX_SCALE
+    );
+    animateTo(
+      vp.x + vp.width / 2 - (x + board.width / 2) * scale,
+      vp.y + vp.height / 2 - (y + (board.height + 40) / 2) * scale,
+      scale
+    );
+  }
+  function zoomReset() {
+    const vp = usableViewport();
+    const cx = vp.x + vp.width / 2;
+    const cy = vp.y + vp.height / 2;
+    const k = 1 / state.scale;
+    animateTo(cx - (cx - state.tx) * k, cy - (cy - state.ty) * k, 1);
+  }
+  function zoomStep(factor) {
+    const vp = usableViewport();
+    zoomAt(vp.x + vp.width / 2, vp.y + vp.height / 2, factor);
+  }
+  function zoomAt(clientX, clientY, factor) {
+    const next = clamp(state.scale * factor, MIN_SCALE, MAX_SCALE);
+    if (next === state.scale) return;
+    const r = viewport.getBoundingClientRect();
+    const cx = clientX - r.left;
+    const cy = clientY - r.top;
+    const k = next / state.scale;
+    state.tx = cx - (cx - state.tx) * k;
+    state.ty = cy - (cy - state.ty) * k;
+    state.scale = next;
+    applyView();
+  }
+  function isBlank(target) {
+    const el = target;
+    if (!el) return false;
+    return !el.closest(".cs-board");
+  }
+  function initView() {
+    viewport = qs("#cs-viewport");
+    world = qs("#cs-world");
+    zoomLabel = qs("#cs-zoom");
+    viewport.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        if (e.ctrlKey || e.metaKey) {
+          zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY / 260));
+        } else {
+          state.tx -= e.deltaX;
+          state.ty -= e.deltaY;
+          applyView();
+        }
+      },
+      { passive: false }
+    );
+    let panId = null;
+    let lastX = 0;
+    let lastY = 0;
+    viewport.addEventListener("pointerdown", (e) => {
+      if (!(e.button === 1 || e.button === 0 && isBlank(e.target))) return;
+      panId = e.pointerId;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      viewport.classList.add("is-panning");
+      viewport.setPointerCapture(e.pointerId);
+    });
+    viewport.addEventListener("pointermove", (e) => {
+      if (panId !== e.pointerId) return;
+      state.tx += e.clientX - lastX;
+      state.ty += e.clientY - lastY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      applyView();
+    });
+    const endPan = (e) => {
+      if (panId !== e.pointerId) return;
+      panId = null;
+      viewport.classList.remove("is-panning");
+    };
+    viewport.addEventListener("pointerup", endPan);
+    viewport.addEventListener("pointercancel", endPan);
+    applyView();
+  }
+  function isPanning() {
+    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;
+  }
+  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 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 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 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 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/wall.ts
+  var PAD = 48;
+  var BOARD_GAP = 24;
+  var TITLE_H = 24;
+  var SECTION_HEAD_H = 34;
+  var SECTION_GAP = 40;
+  var ROW_MAX_W = 5200;
+  var MIN_H = 88;
+  var MAX_H = 1200;
+  var DEFAULT_W = 480;
+  var MOUNT_MIN_SCALE = 0.35;
+  var world2;
+  var io;
+  var groups = /* @__PURE__ */ new Map();
+  var measureCount = /* @__PURE__ */ new Map();
+  var lastBodyH = /* @__PURE__ */ new Map();
+  var heightWatchers = /* @__PURE__ */ new Map();
+  function initWall() {
+    world2 = qs("#cs-world");
+    initWallTools();
+    io = new IntersectionObserver(
+      (records) => {
+        for (const r of records) {
+          if (!r.isIntersecting) continue;
+          if (state.scale < MOUNT_MIN_SCALE) continue;
+          const id = r.target.dataset.id;
+          const board = id ? state.boards.get(id) : null;
+          if (board) requestMount(board);
+          io.unobserve(r.target);
+        }
+      },
+      // 视口外 1.5 屏就开始挂
+      { root: qs("#cs-viewport"), rootMargin: "150%" }
+    );
+  }
+  function syncEntries(entries) {
+    state.entries = entries;
+    syncWallTools();
+    const byFile = /* @__PURE__ */ new Map();
+    for (const e of entries) {
+      const list = byFile.get(e.file);
+      if (list) list.push(e);
+      else byFile.set(e.file, [e]);
+    }
+    const alive = new Set(entries.map((e) => e.id));
+    for (const [id, board] of state.boards) {
+      if (alive.has(id)) continue;
+      io.unobserve(board.el);
+      board.el.remove();
+      state.boards.delete(id);
+      measureCount.delete(id);
+      lastBodyH.delete(id);
+      bgSyncs.delete(id);
+      heightWatchers.get(id)?.disconnect();
+      heightWatchers.delete(id);
+    }
+    for (const [file, list] of byFile) {
+      const ids = list.map((e) => e.id);
+      const kept = (state.order.get(file) ?? []).filter((id) => ids.includes(id));
+      state.order.set(file, kept.concat(ids.filter((id) => !kept.includes(id))));
+      for (const entry of list) {
+        const exist = state.boards.get(entry.id);
+        if (exist) updateBoard(exist, entry);
+        else state.boards.set(entry.id, createBoard(entry));
+      }
+    }
+    for (const file of [...state.order.keys()]) if (!byFile.has(file)) state.order.delete(file);
+    if (firstSync && !hasAnyPos()) {
+      autoArrange();
+      settleDeadline = Date.now() + SETTLE_WINDOW;
+    } else {
+      const n = placeNewBoards();
+      applyPositions();
+      if (n && !firstSync) toast(`\u65B0\u753B\u677F ${n} \u5757 \xB7 \u5DF2\u653E\u5230\u5899\u5E95\u90E8`, "info");
+    }
+    if (state.boards.size) firstSync = false;
+    renderSidebar();
+  }
+  function groupLabel(file) {
+    let s = file;
+    const dir = state.info?.designDir;
+    if (dir && s.startsWith(`${dir}/`)) s = s.slice(dir.length + 1);
+    return s.replace(/\.artboard\.tsx?$/, "");
+  }
+  function ensureSection(key) {
+    const found = groups.get(key);
+    if (found) return found.titleEl;
+    const titleEl = h("div", "cs-section-title");
+    titleEl.dataset.section = key;
+    world2.appendChild(titleEl);
+    groups.set(key, { el: titleEl, titleEl });
+    return titleEl;
+  }
+  function createBoard(entry) {
+    const el = h("div", "cs-board");
+    el.dataset.id = entry.id;
+    el.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);
+    badgeEl.dataset.kind = entry.kind;
+    const argsCountEl = h("span", "cs-args-n");
+    titleEl.append(nameEl, badgeEl, argsCountEl);
+    const frameEl = h("div", "cs-frame");
+    const placeholderEl = h("div", "cs-ph", entry.exportName);
+    const overlayEl = h("div", "cs-ovl");
+    const pinLayerEl = h("div", "cs-pins");
+    frameEl.append(placeholderEl, overlayEl);
+    el.append(titleEl, frameEl, pinLayerEl);
+    world2.appendChild(el);
+    const board = {
+      entry,
+      el,
+      titleEl,
+      nameEl,
+      badgeEl,
+      argsCountEl,
+      frameEl,
+      overlayEl,
+      pinLayerEl,
+      placeholderEl,
+      iframe: null,
+      width: boardWidth(entry),
+      // 高度优先级:手动拖过的 > 声明的 > 上次测出来缓存的 > 兜底 320。
+      // 用缓存值开局,懒挂载的画板挂上来时高度就已经是对的,不会挂一块动一次墙。
+      height: clamp(getSize(entry.id).h ?? entry.env?.height ?? getFit(entry.id).h ?? 320, MIN_H, MAX_DRAG_H),
+      argsOverride: null
+    };
+    if (entry.kind === "screen") titleEl.appendChild(widthSwitcher(board));
+    if (entry.kind === "component") {
+      titleEl.appendChild(bgToggle(board));
+      board.el.dataset.bg = effectiveBg(entry.id);
+    }
+    attachResizeHandles(board);
+    attachBoardDrag(board);
+    applySize(board);
+    updateBoard(board, entry);
+    io.observe(el);
+    return board;
+  }
+  var WIDTH_PRESETS = [390, 768, 1024, 1280, 1440];
+  var MIN_SIZE = 120;
+  var MAX_DRAG_H = 2400;
+  var wsels = /* @__PURE__ */ new Map();
+  function sizeKey(id) {
+    return `cs-size:${state.info?.projectRoot ?? "unknown"}:${id}`;
+  }
+  function getSize(id) {
+    try {
+      return JSON.parse(localStorage.getItem(sizeKey(id)) ?? "{}") ?? {};
+    } catch {
+      return {};
+    }
+  }
+  function setSize(id, patch) {
+    try {
+      localStorage.setItem(sizeKey(id), JSON.stringify({ ...getSize(id), ...patch }));
+    } catch {
+    }
+  }
+  function clearSize(id, dims) {
+    const cur = getSize(id);
+    if (dims.w) delete cur.w;
+    if (dims.h) delete cur.h;
+    try {
+      localStorage.setItem(sizeKey(id), JSON.stringify(cur));
+    } catch {
+    }
+  }
+  function boardWidth(entry) {
+    const o = getSize(entry.id).w;
+    if (typeof o === "number" && o >= MIN_SIZE) return o;
+    if (entry.env?.width) return entry.env.width;
+    return getFit(entry.id).w ?? DEFAULT_W;
+  }
+  function fitKey(id) {
+    return `cs-fit:${state.info?.projectRoot ?? "unknown"}:${id}`;
+  }
+  function getFit(id) {
+    try {
+      return JSON.parse(localStorage.getItem(fitKey(id)) ?? "{}") ?? {};
+    } catch {
+      return {};
+    }
+  }
+  function setFit(id, patch) {
+    try {
+      localStorage.setItem(fitKey(id), JSON.stringify({ ...getFit(id), ...patch }));
+    } catch {
+    }
+  }
+  function posKey(id) {
+    return `cs-pos:${state.info?.projectRoot ?? "unknown"}:${id}`;
+  }
+  function getPos(id) {
+    try {
+      const raw = localStorage.getItem(posKey(id));
+      if (!raw) return null;
+      const p = JSON.parse(raw);
+      return Number.isFinite(p?.x) && Number.isFinite(p?.y) ? p : null;
+    } catch {
+      return null;
+    }
+  }
+  function setPos(id, p) {
+    try {
+      localStorage.setItem(posKey(id), JSON.stringify(p));
+    } catch {
+    }
+  }
+  function hasAnyPos() {
+    for (const id of state.boards.keys()) if (getPos(id)) return true;
+    return false;
+  }
+  function hiddenKey() {
+    return `cs-hidden:${state.info?.projectRoot ?? "unknown"}`;
+  }
+  function hiddenSet() {
+    try {
+      return new Set(JSON.parse(localStorage.getItem(hiddenKey()) ?? "[]"));
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  }
+  function isHidden(id) {
+    return hiddenSet().has(id);
+  }
+  function toggleHidden(id) {
+    setHidden([id], !hiddenSet().has(id));
+  }
+  function setHidden(ids, hidden) {
+    const s = hiddenSet();
+    for (const id of ids) {
+      if (hidden) s.add(id);
+      else s.delete(id);
+    }
+    try {
+      localStorage.setItem(hiddenKey(), JSON.stringify([...s]));
+    } catch {
+    }
+    cancelSettleArrange();
+    placeNewBoards();
+    applyPositions();
+  }
+  function widthSwitcher(board) {
+    const sel = document.createElement("select");
+    sel.className = "cs-wsel";
+    sel.title = "\u89C6\u53E3\u5BBD\u5EA6:\u5207\u6362\u4E0D\u91CD\u8F7D,\u54CD\u5E94\u5F0F\u5F53\u573A\u91CD\u6392;\u9009\u8FC7\u7684\u8BB0\u5728\u672C\u673A";
+    const declared = board.entry.env?.width;
+    const opts = [.../* @__PURE__ */ new Set([...declared ? [declared] : [], ...WIDTH_PRESETS])].sort((a, b) => a - b);
+    for (const w of opts) {
+      const o = document.createElement("option");
+      o.value = String(w);
+      o.textContent = `${w}${w === declared ? " (\u58F0\u660E)" : ""}`;
+      sel.appendChild(o);
+    }
+    const custom = document.createElement("option");
+    custom.value = "custom";
+    custom.textContent = "\u81EA\u5B9A\u4E49\u2026";
+    sel.appendChild(custom);
+    sel.value = String(board.width);
+    if (sel.value !== String(board.width)) {
+      const o = document.createElement("option");
+      o.value = String(board.width);
+      o.textContent = String(board.width);
+      sel.insertBefore(o, custom);
+      sel.value = String(board.width);
+    }
+    sel.addEventListener("click", (e) => e.stopPropagation());
+    sel.addEventListener("change", (e) => {
+      e.stopPropagation();
+      let w;
+      if (sel.value === "custom") {
+        const input = prompt("\u89C6\u53E3\u5BBD\u5EA6(px):", String(board.width));
+        w = Number(input);
+        if (!Number.isFinite(w) || w < MIN_SIZE) {
+          sel.value = String(board.width);
+          return;
+        }
+      } else {
+        w = Number(sel.value);
+      }
+      syncWsel(sel, w);
+      board.width = w;
+      setSize(board.entry.id, { w });
+      cancelSettleArrange();
+      applySize(board);
+      applyPositions();
+    });
+    wsels.set(board.entry.id, sel);
+    return sel;
+  }
+  function syncWsel(sel, w) {
+    if (![...sel.options].some((o) => o.value === String(w))) {
+      const custom = [...sel.options].find((o2) => o2.value === "custom") ?? null;
+      const o = document.createElement("option");
+      o.value = String(w);
+      o.textContent = String(w);
+      sel.insertBefore(o, custom);
+    }
+    sel.value = String(w);
+  }
+  function attachBoardDrag(board) {
+    board.titleEl.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0) return;
+      cancelSettleArrange();
+      if (e.target.closest("select,button")) return;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const x0 = parseFloat(board.el.style.left || "0");
+      const y0 = parseFloat(board.el.style.top || "0");
+      let moved = false;
+      board.titleEl.setPointerCapture(e.pointerId);
+      const move = (ev) => {
+        const dx = (ev.clientX - startX) / state.scale;
+        const dy = (ev.clientY - startY) / state.scale;
+        if (!moved && Math.hypot(ev.clientX - startX, ev.clientY - startY) < 4) return;
+        if (!moved) {
+          moved = true;
+          board.el.classList.add("is-dragging");
+        }
+        board.el.style.left = `${Math.round(x0 + dx)}px`;
+        board.el.style.top = `${Math.round(y0 + dy)}px`;
+        setProbe(`${Math.round(x0 + dx)}, ${Math.round(y0 + dy)}`);
+      };
+      const up = () => {
+        board.titleEl.removeEventListener("pointermove", move);
+        board.titleEl.removeEventListener("pointerup", up);
+        board.titleEl.releasePointerCapture?.(e.pointerId);
+        if (!moved) return;
+        board.el.classList.remove("is-dragging");
+        setPos(board.entry.id, {
+          x: parseFloat(board.el.style.left || "0"),
+          y: parseFloat(board.el.style.top || "0")
+        });
+        applyPositions();
+        renderBoardPins(board);
+      };
+      board.titleEl.addEventListener("pointermove", move);
+      board.titleEl.addEventListener("pointerup", up);
+    });
+    board.titleEl.addEventListener("dblclick", (e) => {
+      if (e.target.closest("select,button")) return;
+      e.stopPropagation();
+      const p = computeAutoPositions().get(board.entry.id);
+      if (!p) return;
+      setPos(board.entry.id, p);
+      applyPositions();
+      setProbe("\u5DF2\u5F52\u4F4D\u5230\u81EA\u52A8\u6392\u5217\u7684\u4F4D\u7F6E");
+    });
+  }
+  var resizing = null;
+  function attachResizeHandles(board) {
+    const mk = (cls, dw, dh) => {
+      const handle = h("div", `cs-rz ${cls}`);
+      handle.title = "\u62D6\u52A8\u8C03\u6574 \xB7 \u53CC\u51FB\u8FD8\u539F\u4E3A\u58F0\u660E/\u81EA\u52A8\u5C3A\u5BF8";
+      handle.addEventListener("dblclick", (e) => {
+        e.stopPropagation();
+        cancelSettleArrange();
+        clearSize(board.entry.id, { w: dw, h: dh });
+        board.width = boardWidth(board.entry);
+        const sel = wsels.get(board.entry.id);
+        if (sel && dw) syncWsel(sel, board.width);
+        measureBoard(board);
+        applySize(board);
+        applyPositions();
+        setProbe("\u5DF2\u8FD8\u539F\u5C3A\u5BF8");
+      });
+      handle.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        cancelSettleArrange();
+        handle.setPointerCapture(e.pointerId);
+        resizing = board.entry.id;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const w0 = board.width;
+        const h0 = board.frameEl.getBoundingClientRect().height / state.scale;
+        const move = (ev) => {
+          if (dw) board.width = Math.round(clamp(w0 + (ev.clientX - startX) / state.scale, MIN_SIZE, MAX_DRAG_H));
+          if (dh) board.height = Math.round(clamp(h0 + (ev.clientY - startY) / state.scale, MIN_SIZE, MAX_DRAG_H));
+          applySize(board);
+          setProbe(`${board.width} \xD7 ${Math.round(board.height)}`);
+        };
+        const up = () => {
+          handle.removeEventListener("pointermove", move);
+          handle.removeEventListener("pointerup", up);
+          const patch = {};
+          if (dw) patch.w = board.width;
+          if (dh) patch.h = Math.round(board.height);
+          setSize(board.entry.id, patch);
+          resizing = null;
+          const sel = wsels.get(board.entry.id);
+          if (sel && dw) syncWsel(sel, board.width);
+          applyPositions();
+        };
+        handle.addEventListener("pointermove", move);
+        handle.addEventListener("pointerup", up);
+      });
+      board.el.appendChild(handle);
+    };
+    mk("cs-rz-e", true, false);
+    mk("cs-rz-s", false, true);
+    mk("cs-rz-se", true, true);
+  }
+  function updateBoard(board, entry) {
+    const urlChanged = board.entry.kind !== entry.kind || board.entry.url !== entry.url;
+    board.entry = entry;
+    board.nameEl.textContent = entry.exportName;
+    board.nameEl.title = entry.exportName;
+    board.badgeEl.textContent = entry.kind;
+    board.badgeEl.title = entry.kind === "screen" ? "\u9875\u9762\u753B\u677F" : "\u7EC4\u4EF6\u753B\u677F";
+    board.badgeEl.dataset.kind = entry.kind;
+    board.el.dataset.kind = entry.kind;
+    const n = entry.args ? Object.keys(entry.args).length : 0;
+    if (entry.kind === "screen" && entry.url) {
+      board.argsCountEl.textContent = entry.url;
+      board.argsCountEl.classList.add("cs-route");
+      board.argsCountEl.title = `\u8DEF\u7531 ${entry.url}`;
+    } else {
+      board.argsCountEl.textContent = n ? `${n} args` : "";
+      board.argsCountEl.classList.remove("cs-route");
+      board.argsCountEl.title = "";
+    }
+    board.width = boardWidth(entry);
+    if (entry.env?.height) board.height = clamp(entry.env.height, MIN_H, MAX_H);
+    applySize(board);
+    if (urlChanged && board.iframe) {
+      const url = boardUrl(entry, board.argsOverride);
+      board.iframe.dataset.csUrl = url;
+      board.iframe.src = url;
+    }
+  }
+  function applySize(board) {
+    board.el.style.width = `${board.width}px`;
+    board.frameEl.style.width = `${board.width}px`;
+    board.frameEl.style.height = `${board.height}px`;
+    schedulePinSync(board);
+  }
+  var pinSyncPending = /* @__PURE__ */ new Set();
+  var pinSyncRaf = 0;
+  function schedulePinSync(board) {
+    pinSyncPending.add(board.entry.id);
+    if (pinSyncRaf) return;
+    pinSyncRaf = requestAnimationFrame(() => {
+      pinSyncRaf = 0;
+      for (const id of pinSyncPending) {
+        const b = state.boards.get(id);
+        if (b) renderBoardPins(b);
+      }
+      pinSyncPending.clear();
+    });
+  }
+  var MAX_LOADING = 4;
+  var loadingCount = 0;
+  var mountQueue = [];
+  function mountVisible() {
+    if (state.scale < MOUNT_MIN_SCALE) return;
+    const vp = qs("#cs-viewport").getBoundingClientRect();
+    for (const board of state.boards.values()) {
+      if (board.iframe) continue;
+      const r = board.el.getBoundingClientRect();
+      const visible = r.bottom > vp.top - vp.height && r.top < vp.bottom + vp.height && r.right > vp.left - vp.width && r.left < vp.right + vp.width;
+      if (visible) requestMount(board);
+    }
+  }
+  function requestMount(board) {
+    if (board.iframe || mountQueue.includes(board)) return;
+    if (loadingCount >= MAX_LOADING) {
+      mountQueue.push(board);
+      return;
+    }
+    mount(board);
+  }
+  function drainMountQueue() {
+    while (loadingCount < MAX_LOADING && mountQueue.length) {
+      const next = mountQueue.shift();
+      if (next && !next.iframe) mount(next);
+    }
+  }
+  function mount(board) {
+    if (board.iframe) return;
+    loadingCount++;
+    const iframe = document.createElement("iframe");
+    iframe.title = board.entry.exportName;
+    const url = boardUrl(board.entry, board.argsOverride);
+    iframe.dataset.csUrl = url;
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      loadingCount = Math.max(0, loadingCount - 1);
+      drainMountQueue();
+    };
+    iframe.addEventListener("load", () => {
+      settle();
+      onFrameLoad(board);
+    });
+    setTimeout(settle, 1e4);
+    board.frameEl.insertBefore(iframe, board.overlayEl);
+    iframe.src = url;
+    board.iframe = iframe;
+    board.placeholderEl.hidden = true;
+  }
+  function onFrameLoad(board) {
+    const doc = frameDoc(board.iframe);
+    if (!doc) return;
+    attachFrameKeys(doc);
+    injectWallCss(board);
+    measureBoard(board);
+    applyPositions();
+    scheduleSettleArrange();
+    renderBoardPins(board);
+    watchContentHeight(board);
+  }
+  function injectWallCss(board) {
+    const doc = frameDoc(board.iframe);
+    if (!doc?.head) return;
+    if (!doc.getElementById("__cs_wall_css")) {
+      const st = doc.createElement("style");
+      st.id = "__cs_wall_css";
+      st.textContent = "nextjs-portal{display:none !important}";
+      doc.head.appendChild(st);
+    }
+    applyBgPref(board);
+  }
+  var BG_FALLBACK = "blend";
+  var BG_LABEL = { blend: "\u878D\u5165\u753B\u5E03", real: "\u9879\u76EE\u771F\u5B9E\u5E95\u8272" };
+  function bgGlobalKey() {
+    return `cs-bg-default:${state.info?.projectRoot ?? "unknown"}`;
+  }
+  function globalBg() {
+    try {
+      return localStorage.getItem(bgGlobalKey()) === "real" ? "real" : BG_FALLBACK;
+    } catch {
+      return BG_FALLBACK;
+    }
+  }
+  function setGlobalBg(mode) {
+    try {
+      localStorage.setItem(bgGlobalKey(), mode);
+    } catch {
+    }
+  }
+  function bgKey(id) {
+    return `cs-bg:${state.info?.projectRoot ?? "unknown"}:${id}`;
+  }
+  function bgOverride(id) {
+    try {
+      const v = localStorage.getItem(bgKey(id));
+      if (v === "blend") return "blend";
+      if (v === "real" || v === "1") return "real";
+      return null;
+    } catch {
+      return null;
+    }
+  }
+  function setBgOverride(id, mode) {
+    try {
+      if (mode) localStorage.setItem(bgKey(id), mode);
+      else localStorage.removeItem(bgKey(id));
+    } catch {
+    }
+  }
+  function effectiveBg(id) {
+    return bgOverride(id) ?? globalBg();
+  }
+  function canvasBg() {
+    return getComputedStyle(document.documentElement).getPropertyValue("--cs-bg").trim() || "#0a0b0d";
+  }
+  function applyBgPref(board) {
+    if (board.entry.kind !== "component") return;
+    const mode = effectiveBg(board.entry.id);
+    board.el.dataset.bg = mode;
+    const doc = frameDoc(board.iframe);
+    if (!doc?.head) return;
+    let st = doc.getElementById("__cs_bg");
+    if (!st) {
+      st = doc.createElement("style");
+      st.id = "__cs_bg";
+      doc.head.appendChild(st);
+    }
+    const noScrollbar = "html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}";
+    st.textContent = (mode === "blend" ? `html,body{background:${canvasBg()} !important}` : "html,body{background:var(--background,#fff) !important}") + noScrollbar;
+  }
+  var bgSyncs = /* @__PURE__ */ new Map();
+  function bgToggle(board) {
+    const id = board.entry.id;
+    const btn = document.createElement("button");
+    btn.className = "cs-bgbtn";
+    const sync = () => {
+      const ov = bgOverride(id);
+      const eff = ov ?? globalBg();
+      btn.textContent = eff === "blend" ? "\u25FB" : "\u25A3";
+      btn.classList.toggle("is-on", eff === "real");
+      btn.classList.toggle("is-auto", ov === null);
+      btn.title = `\u5E95\u8272:${BG_LABEL[eff]}(${ov ? "\u672C\u677F\u8986\u76D6" : "\u8DDF\u968F\u5168\u5C40"}) \xB7 \u70B9\u51FB\u5207\u6362`;
+      btn.setAttribute("aria-label", btn.title);
+    };
+    sync();
+    bgSyncs.set(id, sync);
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const ov = bgOverride(id);
+      const g = globalBg();
+      setBgOverride(id, ov === null ? g === "blend" ? "real" : "blend" : ov === g ? null : g);
+      sync();
+      applyBgPref(board);
+    });
+    return btn;
+  }
+  var segBtns = [];
+  function initWallTools() {
+    const bar = h("div", "cs-wall-tools");
+    bar.id = "cs-wall-tools";
+    const label = h("span", "cs-wt-label", "\u7EC4\u4EF6\u5E95\u8272");
+    label.title = "\u7EC4\u4EF6\u753B\u677F\u7684\u9ED8\u8BA4\u5E95\u8272(\u6309\u9879\u76EE\u8BB0\u5728\u672C\u673A)\u3002\u5355\u5757\u753B\u677F\u53EF\u4EE5\u7528\u6807\u9898\u6761\u4E0A\u7684 \u25FB/\u25A3 \u5355\u72EC\u8986\u76D6";
+    const seg = h("div", "cs-seg");
+    for (const mode of ["blend", "real"]) {
+      const b = h("button", "cs-seg-btn", mode === "blend" ? "\u878D\u5165\u753B\u5E03" : "\u9879\u76EE\u5E95\u8272");
+      b.title = mode === "blend" ? "\u6240\u6709\u7EC4\u4EF6\u753B\u677F\u9ED8\u8BA4\u628A\u5E95\u8272\u5237\u6210\u753B\u5E03\u540C\u8272 \u2014\u2014 \u767D\u5E95\u4E0D\u518D\u62A2\u955C" : "\u6240\u6709\u7EC4\u4EF6\u753B\u677F\u9ED8\u8BA4\u663E\u793A\u9879\u76EE\u81EA\u5DF1\u7684 --background";
+      b.addEventListener("click", () => {
+        setGlobalBg(mode);
+        syncWallTools();
+        for (const board of state.boards.values()) {
+          applyBgPref(board);
+          bgSyncs.get(board.entry.id)?.();
+        }
+      });
+      seg.appendChild(b);
+      segBtns.push({ el: b, mode });
+    }
+    const arrange = h("button", "cs-wt-btn", "\u81EA\u52A8\u6392\u5217");
+    arrange.title = "\u628A\u6240\u6709\u753B\u677F\u91CD\u65B0\u94FA\u5F00(\u9875\u9762 4/\u884C\u3001\u7EC4\u4EF6 15/\u884C)\u3002\u5E73\u65F6\u4E0D\u4F1A\u81EA\u52A8\u91CD\u6392 \u2014\u2014 \u4F60\u6446\u597D\u7684\u4F4D\u7F6E\u4E00\u76F4\u7559\u7740";
+    arrange.addEventListener("click", () => {
+      cancelSettleArrange();
+      toast(`\u5DF2\u91CD\u65B0\u6392\u5217 ${autoArrange()} \u5757\u753B\u677F`, "ok");
+    });
+    bar.append(label, seg, arrange);
+    document.body.appendChild(bar);
+    syncWallTools();
+  }
+  function syncWallTools() {
+    const g = globalBg();
+    for (const s of segBtns) {
+      s.el.classList.toggle("is-on", s.mode === g);
+      s.el.setAttribute("aria-pressed", String(s.mode === g));
+    }
+  }
+  function watchContentHeight(board) {
+    heightWatchers.get(board.entry.id)?.disconnect();
+    const doc = frameDoc(board.iframe);
+    const body = doc?.body;
+    if (!body || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      const cur = body.getBoundingClientRect().height;
+      const prev = lastBodyH.get(board.entry.id) ?? -1;
+      schedulePinSync(board);
+      if (Math.abs(cur - prev) < 2) return;
+      lastBodyH.set(board.entry.id, cur);
+      const times = (measureCount.get(board.entry.id) ?? 0) + 1;
+      measureCount.set(board.entry.id, times);
+      if (times > 30) {
+        ro.disconnect();
+        return;
+      }
+      measureBoard(board);
+      applyPositions();
+      scheduleSettleArrange();
+    });
+    ro.observe(body);
+    heightWatchers.set(board.entry.id, ro);
+  }
+  function measureBoard(board) {
+    if (resizing === board.entry.id) return;
+    const manual = getSize(board.entry.id);
+    if (manual.h) {
+      board.height = clamp(manual.h, MIN_SIZE, MAX_DRAG_H);
+      applySize(board);
+      return;
+    }
+    const fixed = board.entry.env?.height;
+    if (fixed) {
+      board.height = clamp(fixed, MIN_H, MAX_H);
+      applySize(board);
+      return;
+    }
+    const iframe = board.iframe;
+    const doc = frameDoc(iframe);
+    if (!iframe || !doc?.documentElement) return;
+    const prev = iframe.style.height;
+    iframe.style.height = `${MIN_H}px`;
+    const raw = Math.max(doc.documentElement.scrollHeight, doc.body?.scrollHeight ?? 0);
+    iframe.style.height = prev;
+    board.height = clamp(raw, MIN_H, MAX_H);
+    lastBodyH.set(board.entry.id, doc.body?.getBoundingClientRect().height ?? -1);
+    setFit(board.entry.id, { h: Math.round(board.height) });
+    if (board.entry.kind === "component" && !board.entry.env?.width && !manual.w) {
+      const ab = doc.querySelector("[data-cs-artboard]");
+      if (ab) {
+        const w = Math.ceil(ab.getBoundingClientRect().width);
+        if (w > 0) {
+          board.width = clamp(w, 120, DEFAULT_W);
+          setFit(board.entry.id, { w: board.width });
+        }
+      }
+    }
+    applySize(board);
+  }
+  function remeasureAll() {
+    for (const board of state.boards.values()) {
+      measureCount.set(board.entry.id, 0);
+      if (board.iframe) measureBoard(board);
+    }
+    applyPositions();
+  }
+  var PER_ROW = { screen: 4, component: 15 };
+  function arrangeable() {
+    const out = [];
+    for (const file of [...state.order.keys()].sort()) {
+      for (const id of state.order.get(file) ?? []) {
+        const b = state.boards.get(id);
+        if (b && !isHidden(id)) out.push(b);
+      }
+    }
+    return out;
+  }
+  function flowRows(list, kind, startY, out) {
+    let y = startY;
+    let row2 = [];
+    let rowW = 0;
+    const flush = () => {
+      if (!row2.length) return;
+      let x = PAD;
+      const rowH = Math.max(...row2.map((b) => TITLE_H + b.height));
+      for (const b of row2) {
+        out.set(b.entry.id, { x, y });
+        x += b.width + BOARD_GAP;
+      }
+      y += rowH + BOARD_GAP;
+      row2 = [];
+      rowW = 0;
+    };
+    for (const b of list) {
+      if (row2.length >= PER_ROW[kind] || row2.length && rowW + b.width > ROW_MAX_W) flush();
+      row2.push(b);
+      rowW += b.width + BOARD_GAP;
+    }
+    flush();
+    return y;
+  }
+  function computeAutoPositions() {
+    const out = /* @__PURE__ */ new Map();
+    const ordered = arrangeable();
+    let y = PAD;
+    for (const kind of ["screen", "component"]) {
+      const list = ordered.filter((b) => b.entry.kind === kind);
+      if (!list.length) continue;
+      y += SECTION_HEAD_H;
+      y = flowRows(list, kind, y, out);
+      y += SECTION_GAP;
+    }
+    return out;
+  }
+  function autoArrange() {
+    const pos = computeAutoPositions();
+    for (const [id, p] of pos) setPos(id, p);
+    applyPositions();
+    return pos.size;
+  }
+  function placeNewBoards() {
+    const ordered = arrangeable();
+    const fresh = ordered.filter((b) => !getPos(b.entry.id));
+    if (!fresh.length) return 0;
+    let bottom = -Infinity;
+    for (const b of ordered) {
+      const p = getPos(b.entry.id);
+      if (p) bottom = Math.max(bottom, p.y + TITLE_H + b.height);
+    }
+    let y = Number.isFinite(bottom) ? bottom + SECTION_GAP : PAD;
+    const out = /* @__PURE__ */ new Map();
+    for (const kind of ["screen", "component"]) {
+      const list = fresh.filter((b) => b.entry.kind === kind);
+      if (!list.length) continue;
+      y = flowRows(list, kind, y, out) + SECTION_GAP;
+    }
+    for (const [id, p] of out) setPos(id, p);
+    return out.size;
+  }
+  function applyPositions() {
+    for (const b of state.boards.values()) {
+      const p = getPos(b.entry.id);
+      if (p) {
+        b.el.style.left = `${p.x}px`;
+        b.el.style.top = `${p.y}px`;
+      }
+      b.el.hidden = isHidden(b.entry.id);
+    }
+    layoutSections();
+    applyView();
+  }
+  function layoutSections() {
+    for (const kind of ["screen", "component"]) {
+      const titleEl = ensureSection(kind);
+      let minX = Infinity;
+      let minY = Infinity;
+      let n = 0;
+      for (const b of state.boards.values()) {
+        if (b.entry.kind !== kind || isHidden(b.entry.id)) continue;
+        n++;
+        const p = getPos(b.entry.id);
+        if (!p) continue;
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+      }
+      if (!n || !Number.isFinite(minX)) {
+        titleEl.hidden = true;
+        continue;
+      }
+      titleEl.hidden = false;
+      titleEl.textContent = "";
+      titleEl.append(
+        h("span", void 0, kind === "screen" ? "\u9875\u9762" : "\u7EC4\u4EF6"),
+        h("span", "cs-section-count", String(n))
+      );
+      titleEl.style.left = `${minX}px`;
+      titleEl.style.top = `${minY - SECTION_HEAD_H}px`;
+    }
+  }
+  var SETTLE_WINDOW = 8e3;
+  var firstSync = true;
+  var settleDeadline = 0;
+  var settleTimer = null;
+  function scheduleSettleArrange() {
+    if (!settleDeadline || Date.now() > settleDeadline) return;
+    if (settleTimer !== null) clearTimeout(settleTimer);
+    settleTimer = setTimeout(() => {
+      settleTimer = null;
+      if (!settleDeadline) return;
+      autoArrange();
+    }, 350);
+  }
+  function cancelSettleArrange() {
+    settleDeadline = 0;
+    if (settleTimer !== null) clearTimeout(settleTimer);
+    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);
+  }
+  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();
+    }
+  }
+  function isCollapsed(key) {
+    return searchCollapsed ? searchCollapsed.has(key) : collapsedSet().has(key);
+  }
+  function toggleCollapsed(key) {
+    if (searchCollapsed) {
+      if (!searchCollapsed.delete(key)) searchCollapsed.add(key);
+      return;
+    }
+    const s = collapsedSet();
+    if (s.has(key)) s.delete(key);
+    else s.add(key);
+    try {
+      localStorage.setItem(collapseKey(), JSON.stringify([...s]));
+    } catch {
+    }
+  }
+  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 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);
+    }
+    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 (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);
+    }
+    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 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 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 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/app.ts
+  function showBootError(err) {
+    const boot2 = qs("#cs-boot");
+    boot2.textContent = "";
+    const card = h("div", "cs-card");
+    const compileErr = /HTTP 5\d\d/.test(String(err));
+    if (compileErr) {
+      card.appendChild(h("h2", void 0, "\u753B\u677F\u6587\u4EF6\u7F16\u8BD1\u9519\u8BEF"));
+      card.appendChild(
+        h("p", void 0, "next dev \u5728\u8DD1,\u4F46\u753B\u677F\u6CE8\u518C\u8868\u6A21\u5757\u6E32\u67D3\u5931\u8D25 \u2014\u2014 \u901A\u5E38\u662F\u67D0\u4E2A *.artboard.tsx \u6709\u8BED\u6CD5\u6216 import \u9519\u8BEF\u3002\u53BB next dev \u7684\u7EC8\u7AEF\u770B\u5177\u4F53\u62A5\u9519,\u4FEE\u597D\u540E\u8FD9\u9762\u5899\u4F1A\u81EA\u52A8\u6062\u590D\u3002")
+      );
+    } else {
+      card.appendChild(h("h2", void 0, "\u76EE\u6807 dev server \u672A\u542F\u52A8"));
+      card.appendChild(h("p", void 0, "\u753B\u5E03\u8FDE\u4E0D\u4E0A\u753B\u677F\u6570\u636E\u3002\u5148\u5728\u9879\u76EE\u91CC\u8D77 next dev,\u5899\u4F1A\u81EA\u52A8\u6062\u590D\u3002"));
+      const p = h("p");
+      p.appendChild(h("code", void 0, "pnpm dev"));
+      card.appendChild(p);
+    }
+    card.appendChild(h("div", "cs-err", String(err)));
+    card.appendChild(h("p", "cs-dim", "\u6BCF 3 \u79D2\u81EA\u52A8\u91CD\u8BD5\u4E2D\u2026"));
+    const btn = h("button", void 0, "\u7ACB\u5373\u91CD\u8BD5");
+    btn.addEventListener("click", () => void tryLoadRegistry());
+    card.appendChild(btn);
+    boot2.appendChild(card);
+    boot2.hidden = false;
+  }
+  var retryTimer = null;
+  async function tryLoadRegistry() {
+    try {
+      const reg = await fetchRegistry();
+      syncEntries(reg);
+      remeasureAll();
+      renderPins();
+      qs("#cs-boot").hidden = true;
+      if (retryTimer !== null) {
+        clearInterval(retryTimer);
+        retryTimer = null;
+      }
+      return true;
+    } catch (err) {
+      showBootError(err);
+      if (retryTimer === null) retryTimer = setInterval(() => void tryLoadRegistry(), 3e3);
+      return false;
+    }
+  }
+  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}` : "";
+  }
+  function onRegistryEvent(entries) {
+    void reloadUntilMatches(entries.map((e) => e.id));
+  }
+  async function reloadUntilMatches(wantIds, tries = 4) {
+    const want = new Set(wantIds);
+    for (let i = 0; i < tries; i++) {
+      if (!await tryLoadRegistry()) return;
+      const got = new Set(state.entries.map((e) => e.id));
+      if (got.size === want.size && [...want].every((id) => got.has(id))) return;
+      await new Promise((r) => setTimeout(r, 700));
+    }
+  }
+  function onAnnotations(list) {
+    state.annotations = list;
+    renderPins();
+  }
+  async function boot() {
+    initView();
+    initSelect();
+    initHud();
+    initPins();
+    initArgsPanel();
+    initWall();
+    initSidebar();
+    initModes();
+    initRefs();
+    onViewChange(refreshBoxes);
+    let mountTimer = null;
+    onViewChange(() => {
+      if (mountTimer !== null) clearTimeout(mountTimer);
+      mountTimer = setTimeout(mountVisible, 180);
+    });
+    qs("#cs-copy").addEventListener("click", () => void copyContext());
+    qs("#cs-push").addEventListener("click", () => void pushToClaudeCode());
+    try {
+      state.info = await fetchState();
+    } catch (err) {
+      showBootError(err);
+      return;
+    }
+    showTarget();
+    restoreView();
+    await tryLoadRegistry();
+    try {
+      state.annotations = await fetchAnnotations();
+      renderPins();
+    } catch {
+    }
+    connectEvents({
+      registry: onRegistryEvent,
+      annotations: onAnnotations
+    });
+  }
+  void boot();
+})();
+//# sourceMappingURL=app.js.map