@cychien/ezdesign 0.0.0-stage → 0.9.1

package/dist/overlay.js

@@ -0,0 +1,2642 @@
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/Add01Icon.js
+  var Add01Icon = [
+    ["path", { d: "M12.001 5.00003V19.002", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M19.002 12.002L4.99998 12.002", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }]
+  ];
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/AlignSelectionIcon.js
+  var AlignSelectionIcon = [
+    ["path", { d: "M20 6V18M18 4H6M18 20H6M4 18V6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M22 4C22 5.10457 21.1046 6 20 6C18.8954 6 18 5.10457 18 4C18 2.89543 18.8954 2 20 2C21.1046 2 22 2.89543 22 4Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }],
+    ["path", { d: "M6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4Z", stroke: "currentColor", strokeWidth: "1.5", key: "2" }],
+    ["path", { d: "M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 18.8954 18 20 18C21.1046 18 22 18.8954 22 20Z", stroke: "currentColor", strokeWidth: "1.5", key: "3" }],
+    ["path", { d: "M6 20C6 21.1046 5.10457 22 4 22C2.89543 22 2 21.1046 2 20C2 18.8954 2.89543 18 4 18C5.10457 18 6 18.8954 6 20Z", stroke: "currentColor", strokeWidth: "1.5", key: "4" }]
+  ];
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/TextSelectIcon.js
+  var TextSelectIcon = [
+    ["path", { d: "M9.99877 2.5C9.45899 2.50516 8.96002 2.51488 8.49784 2.53315M14.0012 2.5C14.541 2.50516 15.04 2.51488 15.5022 2.53315M19.0043 3.13088C19.43 3.32055 19.7943 3.56673 20.1138 3.88624C20.4333 4.20575 20.6794 4.56995 20.8691 4.99568M3.13088 4.99568C3.32056 4.56995 3.56673 4.20575 3.88624 3.88624C4.20575 3.56673 4.56995 3.32055 4.99568 3.13088M21.5 9.99877C21.4948 9.45899 21.4851 8.96002 21.4669 8.49784M21.5 14.0012C21.4948 14.5409 21.4851 15.0399 21.4669 15.5021M20.8691 19.0043C20.6794 19.43 20.4333 19.7943 20.1138 20.1138C19.7943 20.4333 19.43 20.6794 19.0043 20.8691M15.5022 21.4668C15.04 21.4851 14.541 21.4948 14.0012 21.5M9.99877 21.5C9.45898 21.4948 8.96 21.4851 8.49781 21.4668M4.99568 20.8691C4.56995 20.6794 4.20575 20.4333 3.88624 20.1138C3.56673 19.7943 3.32056 19.43 3.13088 19.0043M2.5 14.0012C2.50516 14.5409 2.51488 15.0399 2.53315 15.5021M2.5 9.99884C2.50516 9.45904 2.51488 8.96004 2.53315 8.49784", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M7 8H15M7 12H17M7 16H13", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }]
+  ];
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/MagicWand01Icon.js
+  var MagicWand01Icon = [
+    ["path", { d: "M13.9258 12.7775L11.7775 10.6292C11.4847 10.3364 11.3383 10.19 11.1803 10.1117C10.8798 9.96277 10.527 9.96277 10.2264 10.1117C10.0685 10.19 9.92207 10.3364 9.62923 10.6292C9.33638 10.9221 9.18996 11.0685 9.11169 11.2264C8.96277 11.527 8.96277 11.8798 9.11169 12.1803C9.18996 12.3383 9.33638 12.4847 9.62923 12.7775L11.7775 14.9258M13.9258 12.7775L20.3708 19.2225C20.6636 19.5153 20.81 19.6617 20.8883 19.8197C21.0372 20.1202 21.0372 20.473 20.8883 20.7736C20.81 20.9315 20.6636 21.0779 20.3708 21.3708C20.0779 21.6636 19.9315 21.81 19.7736 21.8883C19.473 22.0372 19.1202 22.0372 18.8197 21.8883C18.6617 21.81 18.5153 21.6636 18.2225 21.3708L11.7775 14.9258M13.9258 12.7775L11.7775 14.9258", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M17 2L17.2948 2.7966C17.6813 3.84117 17.8746 4.36345 18.2556 4.74445C18.6366 5.12545 19.1588 5.31871 20.2034 5.70523L21 6L20.2034 6.29477C19.1588 6.68129 18.6366 6.87456 18.2556 7.25555C17.8746 7.63655 17.6813 8.15883 17.2948 9.2034L17 10L16.7052 9.2034C16.3187 8.15884 16.1254 7.63655 15.7444 7.25555C15.3634 6.87455 14.8412 6.68129 13.7966 6.29477L13 6L13.7966 5.70523C14.8412 5.31871 15.3634 5.12545 15.7444 4.74445C16.1254 4.36345 16.3187 3.84117 16.7052 2.7966L17 2Z", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }],
+    ["path", { d: "M6 4L6.22108 4.59745C6.51097 5.38087 6.65592 5.77259 6.94167 6.05834C7.22741 6.34408 7.61913 6.48903 8.40255 6.77892L9 7L8.40255 7.22108C7.61913 7.51097 7.22741 7.65592 6.94166 7.94167C6.65592 8.22741 6.51097 8.61913 6.22108 9.40255L6 10L5.77892 9.40255C5.48903 8.61913 5.34408 8.22741 5.05833 7.94167C4.77259 7.65592 4.38087 7.51097 3.59745 7.22108L3 7L3.59745 6.77892C4.38087 6.48903 4.77259 6.34408 5.05833 6.05833C5.34408 5.77259 5.48903 5.38087 5.77892 4.59745L6 4Z", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]
+  ];
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/Album02Icon.js
+  var Album02Icon = [
+    ["path", { d: "M17.5 5.73041V6.29128M17.7801 6.00085H17.25M18 6.00085C18 6.277 17.7761 6.50085 17.5 6.50085C17.2239 6.50085 17 6.277 17 6.00085C17 5.72471 17.2239 5.50085 17.5 5.50085C17.7761 5.50085 18 5.72471 18 6.00085Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M9.5 7.99945C9.5 5.17102 9.5 3.75681 10.3787 2.87813C11.2574 1.99945 12.6716 1.99945 15.5 1.99945C18.3284 1.99945 19.7426 1.99945 20.6213 2.87813C21.5 3.75681 21.5 5.17102 21.5 7.99945V11.9995C21.5 14.8279 21.5 16.2421 20.6213 17.1208C19.7426 17.9995 18.3284 17.9995 15.5 17.9995C12.6716 17.9995 11.2574 17.9995 10.3787 17.1208C9.5 16.2421 9.5 14.8279 9.5 11.9995V7.99945Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }],
+    ["path", { d: "M6.62279 5.99878C4.49094 6.58122 3.36407 6.978 2.81621 7.92692C2.19489 9.00308 2.56092 10.3691 3.29297 13.1012L4.32825 16.9649C5.0603 19.6969 5.42632 21.0629 6.50248 21.6843C7.57864 22.3056 8.94467 21.9396 11.6767 21.2075C12.1593 21.0782 12.5992 20.9603 13 20.8479", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }],
+    ["path", { d: "M9.5 13.9995L12.8693 10.6301C13.2731 10.2263 13.8208 9.99945 14.3919 9.99945C15.0873 9.99945 15.7399 10.3353 16.1441 10.9011L20.5 16.9995", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "3" }]
+  ];
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/File02Icon.js
+  var File02Icon = [
+    ["path", { d: "M8 17H16", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M8 13H12", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }],
+    ["path", { d: "M13 2.5V3C13 5.82843 13 7.24264 13.8787 8.12132C14.7574 9 16.1716 9 19 9H19.5M20 10.6569V14C20 17.7712 20 19.6569 18.8284 20.8284C17.6569 22 15.7712 22 12 22C8.22876 22 6.34315 22 5.17157 20.8284C4 19.6569 4 17.7712 4 14V9.45584C4 6.21082 4 4.58831 4.88607 3.48933C5.06508 3.26731 5.26731 3.06508 5.48933 2.88607C6.58831 2 8.21082 2 11.4558 2C12.1614 2 12.5141 2 12.8372 2.11401C12.9044 2.13772 12.9702 2.165 13.0345 2.19575C13.3436 2.34355 13.593 2.593 14.0919 3.09188L18.8284 7.82843C19.4065 8.40649 19.6955 8.69552 19.8478 9.06306C20 9.4306 20 9.83935 20 10.6569Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]
+  ];
+
+  // src/client/draft.ts
+  var NBSP = "\xA0";
+  var refMarker = (n) => `[ref ${n}]`;
+  var refChipText = (n, chosen = false) => `${chosen ? "\u63A2\u7D22\u6A23\u5F0F" : "\u9078\u53D6\u5143\u7D20"} ${n}`;
+  var pickChipText = (n) => `\u9078\u53D6\u7D20\u6750 ${n}`;
+  var fileMarker = (n) => `[file ${n}]`;
+  var skillMarker = (n) => `[skill ${n}]`;
+  function draftText(body) {
+    const out = [];
+    let file = 0;
+    let skill = 0;
+    for (const node of body) {
+      if (node.t === "text") out.push(node.v);
+      else if (node.t === "ref" && node.anchor) out.push(refMarker(node.n));
+      else if (node.t === "file" && node.id) out.push(fileMarker(++file));
+      else if (node.t === "skill") out.push(skillMarker(++skill));
+      else if (node.t === "pick") out.push(node.files.map(() => fileMarker(++file)).join(" "));
+    }
+    return out.join("").replaceAll(NBSP, " ").trim();
+  }
+  function draftSkills(body) {
+    return body.flatMap((node) => node.t === "skill" ? [node.name] : []);
+  }
+  function draftRefs(body) {
+    const out = [];
+    for (const node of body) {
+      if (node.t === "ref" && node.anchor) {
+        out.push({
+          n: node.n,
+          anchor: node.anchor,
+          label: node.label,
+          ...node.variant ? { variant: node.variant } : {}
+        });
+      }
+    }
+    return out;
+  }
+  function nextRefNumber(body) {
+    let max = 0;
+    for (const node of body) {
+      if (node.t === "ref" && node.anchor && node.n > max) max = node.n;
+    }
+    return max + 1;
+  }
+  function draftFileIds(body) {
+    return body.flatMap((n) => n.t === "file" && n.id ? [n.id] : n.t === "pick" ? n.files.map((f) => f.id) : []);
+  }
+  function draftPendingNames(body) {
+    return body.flatMap((n) => n.t === "file" && !n.id ? [n.name] : []);
+  }
+  function hasPendingRef(body) {
+    return body.some((n) => n.t === "ref" && !n.anchor);
+  }
+  function restorableBody(body) {
+    return normalizeDraft(body.filter((n) => !(n.t === "file" && !n.id)));
+  }
+  function normalizeDraft(body) {
+    const out = [];
+    for (const node of body) {
+      if (node.t !== "text") {
+        out.push(node);
+        continue;
+      }
+      if (!node.v) continue;
+      const last = out[out.length - 1];
+      if (last?.t === "text") out[out.length - 1] = { t: "text", v: last.v + node.v };
+      else out.push(node);
+    }
+    return out;
+  }
+  var GRACE_MS = 24 * 60 * 6e4;
+  function draftExpired(draft, now, graceMs) {
+    return now - draft.createdAt >= graceMs;
+  }
+
+  // src/client/icon.ts
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  var kebab = (key) => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+  function icon(node, size = 16) {
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("data-ez-ui", "");
+    for (const [tag, attrs] of node) {
+      const child = document.createElementNS(SVG_NS, tag);
+      for (const [key, value] of Object.entries(attrs)) {
+        if (key === "key") continue;
+        child.setAttribute(kebab(key), String(value));
+      }
+      svg.appendChild(child);
+    }
+    return svg;
+  }
+
+  // src/client/slash.ts
+  var MAX_QUERY = 24;
+  var BREAK = /[\s ]/;
+  var menuCount = 0;
+  function detectSlash(before, trigger = "/") {
+    const start = before.lastIndexOf(trigger);
+    if (start === -1) return null;
+    const prev = start === 0 ? "" : before[start - 1];
+    if (prev && !BREAK.test(prev)) return null;
+    const query = before.slice(start + 1);
+    if (query.length > MAX_QUERY || BREAK.test(query)) return null;
+    return { start, query };
+  }
+  function filterCommands(commands, query) {
+    const available = commands.filter((c) => c.enabled?.() ?? true);
+    const q = query.trim().toLowerCase();
+    if (!q) return available;
+    return available.filter(
+      (c) => [c.id, c.label, ...c.keywords].some((term) => term.toLowerCase().includes(q))
+    );
+  }
+  function attachSlashMenu(editable, {
+    mk,
+    commands,
+    triggerChar = "/",
+    title = "\u6307\u4EE4",
+    load
+  }) {
+    const doc = editable.ownerDocument;
+    const view = doc.defaultView;
+    const listId = `ez-slash-${++menuCount}`;
+    let menu = null;
+    let trigger = null;
+    let shown = [];
+    let active = 0;
+    let loaded = null;
+    let loading = false;
+    function readTrigger() {
+      const selection = doc.getSelection();
+      if (!selection?.isCollapsed || selection.rangeCount === 0) return null;
+      const range = selection.getRangeAt(0);
+      const node = range.startContainer;
+      if (!editable.contains(node) || node.nodeType !== Node.TEXT_NODE) return null;
+      const text = node;
+      const hit = detectSlash((text.nodeValue ?? "").slice(0, range.startOffset), triggerChar);
+      return hit ? { node: text, start: hit.start, query: hit.query } : null;
+    }
+    function slashRect() {
+      if (!trigger?.node.isConnected) return null;
+      const range = doc.createRange();
+      range.setStart(trigger.node, trigger.start);
+      range.setEnd(trigger.node, Math.min(trigger.node.length, trigger.start + 1));
+      return range.getBoundingClientRect();
+    }
+    function place() {
+      if (!menu || !view) return;
+      const at = slashRect();
+      if (!at) return;
+      const box = menu.getBoundingClientRect();
+      const left = Math.max(8, Math.min(at.left, view.innerWidth - box.width - 8));
+      const below = at.bottom + 6;
+      const above = at.top - box.height - 6;
+      const crowded = below + box.height > view.innerHeight - 8 || at.top > view.innerHeight * 0.6;
+      const top = crowded && above >= 8 ? above : Math.min(below, view.innerHeight - box.height - 8);
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+    }
+    function paintActive() {
+      const list = menu?.querySelector(".ez-slash-list");
+      if (!list) return;
+      [...list.children].forEach((item, i) => {
+        item.toggleAttribute("data-active", i === active);
+        item.setAttribute("aria-selected", String(i === active));
+      });
+      editable.setAttribute("aria-activedescendant", `${listId}-${active}`);
+    }
+    function render() {
+      if (!menu) return;
+      menu.textContent = "";
+      const headEl = mk("div", "ez-slash-head");
+      headEl.textContent = title;
+      const list = mk("div", "ez-slash-list");
+      list.id = listId;
+      list.setAttribute("role", "listbox");
+      list.setAttribute("aria-label", title);
+      menu.append(headEl, list);
+      shown.forEach((command, i) => {
+        const item = mk("div", "ez-slash-item");
+        item.id = `${listId}-${i}`;
+        item.setAttribute("role", "option");
+        const label = mk("span", "ez-slash-label");
+        label.textContent = command.label;
+        if (command.icon) item.append(icon(command.icon, 16));
+        item.append(label);
+        const hintText = typeof command.hint === "function" ? command.hint() : command.hint;
+        if (hintText) {
+          const hint = mk("span", "ez-slash-hint");
+          hint.textContent = hintText;
+          item.append(hint);
+        }
+        item.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          choose(command);
+        });
+        item.addEventListener("mousemove", () => {
+          if (active === i) return;
+          active = i;
+          paintActive();
+        });
+        list.appendChild(item);
+      });
+      paintActive();
+    }
+    function onSelectionChange() {
+      if (!readTrigger()) close();
+    }
+    function onBlur() {
+      close();
+    }
+    function open() {
+      menu = mk("div", "ez-slash-menu");
+      doc.body.appendChild(menu);
+      editable.setAttribute("aria-controls", listId);
+      doc.addEventListener("selectionchange", onSelectionChange);
+      editable.addEventListener("blur", onBlur);
+    }
+    function close() {
+      if (!menu) return false;
+      menu.remove();
+      menu = null;
+      trigger = null;
+      editable.removeAttribute("aria-controls");
+      editable.removeAttribute("aria-activedescendant");
+      doc.removeEventListener("selectionchange", onSelectionChange);
+      editable.removeEventListener("blur", onBlur);
+      return true;
+    }
+    function choose(command) {
+      const at = trigger;
+      close();
+      if (at?.node.isConnected) {
+        const end = Math.min(at.node.length, at.start + 1 + at.query.length);
+        const cut = doc.createRange();
+        cut.setStart(at.node, at.start);
+        cut.setEnd(at.node, end);
+        cut.deleteContents();
+        const caret = doc.createRange();
+        caret.setStart(at.node, at.start);
+        caret.collapse(true);
+        const selection = doc.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(caret);
+        editable.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      }
+      editable.focus();
+      command.run();
+    }
+    function sync() {
+      const hit = readTrigger();
+      if (!hit) {
+        close();
+        return;
+      }
+      if (load && !loaded && !loading) {
+        loading = true;
+        void Promise.resolve(load()).then((result) => {
+          loaded = result;
+        }).catch(() => {
+          loaded = [];
+        }).finally(() => {
+          loading = false;
+          if (readTrigger()) sync();
+        });
+      }
+      const matches = filterCommands(load ? loaded ?? [] : commands, hit.query);
+      if (matches.length === 0) {
+        close();
+        return;
+      }
+      const queryChanged = trigger?.query !== hit.query;
+      trigger = hit;
+      shown = matches;
+      if (!menu) open();
+      if (queryChanged) active = 0;
+      active = Math.min(active, shown.length - 1);
+      render();
+      place();
+    }
+    editable.addEventListener("input", (e) => {
+      if (e.isComposing) return;
+      sync();
+    });
+    editable.addEventListener("keydown", (e) => {
+      if (!menu) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        const step = e.key === "ArrowDown" ? 1 : shown.length - 1;
+        active = (active + step) % shown.length;
+        paintActive();
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        if (e.metaKey || e.ctrlKey) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const command = shown[active];
+        if (command) choose(command);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      }
+    });
+    return { close };
+  }
+
+  // src/client/attach.ts
+  var MAX_BYTES = 8 * 1024 * 1024;
+  function directAttachments(api) {
+    return {
+      async upload(file) {
+        const res = await fetch(`${api}/attachments`, {
+          method: "POST",
+          headers: {
+            "content-type": file.type || "application/octet-stream",
+            // A filename is free to hold bytes no header may carry.
+            "x-ez-name": encodeURIComponent(file.name || "image.png")
+          },
+          body: file
+        });
+        if (!res.ok) {
+          const body = await res.json().catch(() => null);
+          throw new Error(body?.error ?? `HTTP ${res.status}`);
+        }
+        return await res.json();
+      },
+      discard(id) {
+        fetch(`${api}/attachments/${id}`, { method: "DELETE" }).catch(() => {
+        });
+      }
+    };
+  }
+  var CHIP_ATTR = "data-ez-chip";
+  var REF_ATTR = "data-ez-ref";
+  var SKILL_ATTR = "data-ez-skill";
+  var PICK_ATTR = "data-ez-pick";
+  function attachify({
+    attachments,
+    mk,
+    className,
+    placeholder,
+    onChange,
+    commands,
+    skills,
+    chooseLibrary
+  }) {
+    const editable = mk("div", className);
+    editable.setAttribute("contenteditable", "plaintext-only");
+    editable.setAttribute("role", "textbox");
+    editable.setAttribute("aria-multiline", "true");
+    editable.setAttribute("aria-label", placeholder);
+    editable.dataset.placeholder = placeholder;
+    const field = mk("div", "ez-attach-field");
+    const error = mk("div", "ez-attach-error");
+    const wrap = mk("div", "ez-attach");
+    error.hidden = true;
+    field.append(editable);
+    const picker = mk("input", "ez-file-picker");
+    picker.type = "file";
+    picker.multiple = true;
+    picker.hidden = true;
+    picker.addEventListener("change", () => {
+      for (const file of take(picker.files ?? void 0)) add(file);
+      picker.value = "";
+    });
+    wrap.append(field, error, picker);
+    const slash = attachSlashMenu(editable, {
+      mk,
+      commands: [
+        {
+          id: "file",
+          label: "File",
+          hint: "\u9644\u52A0\u6A94\u6848",
+          keywords: ["file", "attach", "upload", "\u6A94\u6848", "\u9644\u4EF6", "\u5716\u7247"],
+          icon: File02Icon,
+          run: () => picker.click()
+        },
+        ...chooseLibrary ? [
+          {
+            id: "library",
+            label: "Library",
+            hint: "\u5F9E\u7D20\u6750\u5EAB\u9078\u64C7",
+            keywords: ["library", "reference", "asset", "inspiration", "\u7D20\u6750", "\u7D20\u6750\u5EAB", "\u53C3\u8003", "\u9748\u611F"],
+            icon: Album02Icon,
+            run: () => void addFromLibrary(chooseLibrary)
+          }
+        ] : [],
+        ...commands ?? []
+      ]
+    });
+    const skillMenu = attachSlashMenu(editable, {
+      mk,
+      triggerChar: "$",
+      title: "Skills",
+      commands: [],
+      load: skills
+    });
+    const uploading = /* @__PURE__ */ new Set();
+    let errorTimer = 0;
+    function showError(message) {
+      error.textContent = message;
+      error.hidden = false;
+      clearTimeout(errorTimer);
+      errorTimer = setTimeout(() => {
+        error.hidden = true;
+      }, 6e3);
+    }
+    function paintEmpty() {
+      const empty = !editable.textContent?.trim() && !editable.querySelector(".ez-chip");
+      editable.toggleAttribute("data-empty", empty);
+    }
+    function paintPicks() {
+      editable.querySelectorAll(`[${PICK_ATTR}] .ez-chip-name`).forEach((name, i) => {
+        name.textContent = pickChipText(i + 1);
+      });
+    }
+    function changed() {
+      paintEmpty();
+      paintPicks();
+      onChange?.();
+    }
+    function del(id) {
+      attachments.discard(id);
+    }
+    function makeChip(name, attr, value, glyph) {
+      const chip = mk("span", "ez-chip");
+      chip.setAttribute("contenteditable", "false");
+      chip.setAttribute(attr, value);
+      if (glyph) chip.append(icon(glyph, 11));
+      chip.append(mk("span", "ez-chip-name"));
+      chip.querySelector(".ez-chip-name").textContent = name;
+      if (attr === REF_ATTR) chip.classList.add("ez-chip-ref");
+      if (attr === SKILL_ATTR) chip.classList.add("ez-chip-skill");
+      if (!value) chip.classList.add("ez-chip-pending");
+      return chip;
+    }
+    const fileChip = (name, id = "") => makeChip(name, CHIP_ATTR, id, File02Icon);
+    const refChip = (ref, placeholder2) => {
+      const chip = makeChip(
+        ref ? refChipText(ref.n, !!ref.variant) : placeholder2,
+        REF_ATTR,
+        ref ? JSON.stringify(ref) : "",
+        ref?.variant ? MagicWand01Icon : AlignSelectionIcon
+      );
+      if (ref?.variant) chip.classList.add("ez-chip-chosen");
+      const title = ref?.variant ? [ref.variant.name, ref.label].filter(Boolean).join(" \xB7 ") : ref?.label ?? "";
+      if (title) chip.title = title;
+      return chip;
+    };
+    const pickChip = (files) => {
+      const chip = makeChip("", PICK_ATTR, JSON.stringify(files), Album02Icon);
+      chip.title = files.map((f) => f.name).join("\n");
+      return chip;
+    };
+    const skillChip = (name) => makeChip(`$${name}`, SKILL_ATTR, name, null);
+    const pendingRef = () => editable.querySelector(`[${REF_ATTR}=""]`);
+    function placeCaretAfter(node) {
+      const caret = document.createRange();
+      caret.setStartAfter(node);
+      caret.collapse(true);
+      const selection = document.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(caret);
+    }
+    function insertAtCaret(node) {
+      const selection = document.getSelection();
+      const live = selection?.rangeCount ? selection.getRangeAt(0) : null;
+      const range = live && editable.contains(live.commonAncestorContainer) ? live : null;
+      if (range) {
+        range.deleteContents();
+        range.insertNode(node);
+      } else {
+        editable.appendChild(node);
+      }
+      const after = document.createTextNode(NBSP);
+      node.parentNode?.insertBefore(after, node.nextSibling);
+      placeCaretAfter(after);
+    }
+    function add(file) {
+      if (file.size > MAX_BYTES) {
+        showError(`${file.name || "\u9019\u500B\u6A94\u6848"} \u8D85\u904E\u55AE\u6A94 8 MB \u4E0A\u9650`);
+        return;
+      }
+      const chip = fileChip(file.name || "\u8CBC\u4E0A\u7684\u5716\u7247");
+      insertAtCaret(chip);
+      uploading.add(chip);
+      changed();
+      void upload(chip, file);
+    }
+    async function upload(chip, file) {
+      try {
+        const saved = await attachments.upload(file);
+        if (!editable.contains(chip)) {
+          del(saved.id);
+          return;
+        }
+        chip.setAttribute(CHIP_ATTR, saved.id);
+        chip.querySelector(".ez-chip-name").textContent = saved.name;
+        chip.classList.remove("ez-chip-pending");
+      } catch (err) {
+        chip.remove();
+        showError(`\u300C${file.name || "\u6A94\u6848"}\u300D\u4E0A\u50B3\u5931\u6557\uFF1A${err.message}`);
+      } finally {
+        uploading.delete(chip);
+        changed();
+      }
+    }
+    async function addFromLibrary(choose) {
+      const selection = document.getSelection();
+      const live = selection?.rangeCount ? selection.getRangeAt(0) : null;
+      const spot = live && editable.contains(live.commonAncestorContainer) ? live.cloneRange() : null;
+      let files;
+      try {
+        files = await choose();
+      } catch (err) {
+        showError(`\u6C92\u9644\u4E0A\u7D20\u6750\uFF1A${err.message}`);
+        return;
+      }
+      editable.focus();
+      if (spot && editable.contains(spot.commonAncestorContainer)) {
+        selection?.removeAllRanges();
+        selection?.addRange(spot);
+      }
+      if (!files.length) return;
+      insertAtCaret(pickChip(files));
+      changed();
+    }
+    function take(list) {
+      return list ? [...list] : [];
+    }
+    function beginRef(label) {
+      if (hasPendingRef(snapshot())) return false;
+      insertAtCaret(refChip(null, label));
+      changed();
+      return true;
+    }
+    function resolveRef(ref) {
+      const chip = pendingRef();
+      if (!chip) return;
+      const numbered = { ...ref, n: nextRefNumber(snapshot()) };
+      chip.setAttribute(REF_ATTR, JSON.stringify(numbered));
+      chip.querySelector(".ez-chip-name").textContent = refChipText(numbered.n, !!numbered.variant);
+      if (numbered.label) chip.title = numbered.label;
+      chip.classList.remove("ez-chip-pending");
+      if (chip.nextSibling) placeCaretAfter(chip.nextSibling);
+      changed();
+    }
+    function insertRef(ref) {
+      const numbered = { ...ref, n: nextRefNumber(snapshot()) };
+      insertAtCaret(refChip(numbered, numbered.label));
+      changed();
+    }
+    function cancelRef() {
+      const chip = pendingRef();
+      if (!chip) return;
+      const after = chip.nextSibling;
+      chip.remove();
+      if (after?.nodeType === Node.TEXT_NODE && after.nodeValue?.startsWith(NBSP)) {
+        after.nodeValue = after.nodeValue.slice(1);
+        if (!after.nodeValue) after.parentNode?.removeChild(after);
+      }
+      changed();
+    }
+    function snapshot() {
+      const out = [];
+      collectNodes(editable, out);
+      return out;
+    }
+    function restore(body) {
+      editable.textContent = "";
+      const nodes = restorableBody(body);
+      for (const node of nodes) {
+        if (node.t === "text") editable.appendChild(document.createTextNode(node.v));
+        else if (node.t === "file") editable.appendChild(fileChip(node.name, node.id));
+        else if (node.t === "skill") editable.appendChild(skillChip(node.name));
+        else if (node.t === "pick") editable.appendChild(pickChip(node.files));
+        else {
+          const ref = node.anchor ? {
+            n: node.n,
+            anchor: node.anchor,
+            label: node.label,
+            ...node.variant ? { variant: node.variant } : {}
+          } : null;
+          editable.appendChild(refChip(ref, node.label));
+        }
+      }
+      if (nodes[nodes.length - 1]?.t !== "text") {
+        editable.appendChild(document.createTextNode(NBSP));
+      }
+      if (editable.lastChild) placeCaretAfter(editable.lastChild);
+      changed();
+    }
+    editable.addEventListener("paste", (e) => {
+      const data = e.clipboardData;
+      const files = take(data?.files);
+      if (files.length === 0) return;
+      if (!data?.getData("text/plain")) e.preventDefault();
+      e.stopPropagation();
+      for (const file of files) add(file);
+    });
+    const isChipNode = (node) => node instanceof HTMLElement && (node.hasAttribute(CHIP_ATTR) || node.hasAttribute(REF_ATTR) || node.hasAttribute(SKILL_ATTR) || node.hasAttribute(PICK_ATTR));
+    editable.addEventListener("beforeinput", (e) => {
+      if (e.inputType !== "deleteContentBackward") return;
+      const selection = document.getSelection();
+      if (!selection?.isCollapsed || selection.rangeCount === 0) return;
+      const range = selection.getRangeAt(0);
+      const node = range.startContainer;
+      if (node.nodeType !== Node.TEXT_NODE) return;
+      const text = node;
+      if (text.nodeValue !== NBSP || range.startOffset !== 1) return;
+      const before = text.previousSibling;
+      if (!isChipNode(before)) return;
+      e.preventDefault();
+      text.remove();
+      placeCaretAfter(before);
+      changed();
+    });
+    editable.addEventListener("input", changed);
+    const dragging = (e) => e.dataTransfer?.types.includes("Files") ?? false;
+    let depth = 0;
+    function endDrag() {
+      depth = 0;
+      field.removeAttribute("data-drop");
+    }
+    field.addEventListener("dragenter", (e) => {
+      if (!dragging(e)) return;
+      e.preventDefault();
+      depth++;
+      field.toggleAttribute("data-drop", true);
+    });
+    field.addEventListener("dragover", (e) => {
+      if (!dragging(e)) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+    });
+    field.addEventListener("dragleave", (e) => {
+      if (!dragging(e)) return;
+      if (--depth <= 0) endDrag();
+    });
+    field.addEventListener("drop", (e) => {
+      const files = take(e.dataTransfer?.files);
+      endDrag();
+      if (files.length === 0) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (document.activeElement !== editable) editable.focus();
+      for (const file of files) add(file);
+    });
+    paintEmpty();
+    return {
+      wrap,
+      field,
+      editable,
+      // All three read the same single walk, so the text a comment reads as, the
+      // files it carries and the elements it points at can never disagree about
+      // order - and all three are testable without a browser.
+      text: () => draftText(snapshot()),
+      skills: () => draftSkills(snapshot()),
+      insertSkill(name) {
+        insertAtCaret(skillChip(name));
+        changed();
+      },
+      ids: () => draftFileIds(snapshot()),
+      refs: () => draftRefs(snapshot()),
+      pending: () => [...uploading].filter((c) => editable.contains(c)).length,
+      pendingNames: () => draftPendingNames(snapshot()),
+      // Either menu, whichever is up - at most one can be, since a trigger only
+      // counts at the start of the word being typed.
+      closeSlash: () => slash.close() || skillMenu.close(),
+      beginRef,
+      resolveRef,
+      insertRef,
+      cancelRef,
+      snapshot,
+      restore,
+      reset() {
+        slash.close();
+        uploading.clear();
+        editable.textContent = "";
+        changed();
+      },
+      discard() {
+        slash.close();
+        for (const id of draftFileIds(snapshot())) del(id);
+        uploading.clear();
+        editable.textContent = "";
+        changed();
+      }
+    };
+  }
+  function collectNodes(node, out) {
+    for (const child of node.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        out.push({ t: "text", v: child.nodeValue ?? "" });
+        continue;
+      }
+      if (!(child instanceof HTMLElement)) continue;
+      const name = child.querySelector(".ez-chip-name")?.textContent ?? "";
+      if (child.hasAttribute(REF_ATTR)) {
+        const ref = parseRef(child.getAttribute(REF_ATTR));
+        out.push({
+          t: "ref",
+          n: ref?.n ?? 0,
+          anchor: ref?.anchor ?? null,
+          label: ref?.label ?? name,
+          ...ref?.variant ? { variant: ref.variant } : {}
+        });
+        continue;
+      }
+      if (child.hasAttribute(CHIP_ATTR)) {
+        out.push({ t: "file", id: child.getAttribute(CHIP_ATTR) ?? "", name });
+        continue;
+      }
+      if (child.hasAttribute(PICK_ATTR)) {
+        out.push({ t: "pick", files: parsePick(child.getAttribute(PICK_ATTR)) });
+        continue;
+      }
+      if (child.hasAttribute(SKILL_ATTR)) {
+        out.push({ t: "skill", name: child.getAttribute(SKILL_ATTR) ?? "" });
+        continue;
+      }
+      if (child.tagName === "BR") {
+        out.push({ t: "text", v: "\n" });
+        continue;
+      }
+      const prev = lastText(out);
+      if (prev !== void 0 && !prev.endsWith("\n")) out.push({ t: "text", v: "\n" });
+      collectNodes(child, out);
+    }
+  }
+  function lastText(out) {
+    for (let i = out.length - 1; i >= 0; i--) {
+      const node = out[i];
+      if (node?.t === "text") return node.v;
+    }
+    return void 0;
+  }
+  function parseRef(raw) {
+    if (!raw) return null;
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return null;
+    }
+  }
+  function parsePick(raw) {
+    try {
+      return JSON.parse(raw ?? "[]");
+    } catch {
+      return [];
+    }
+  }
+
+  // src/client/overlay-link.ts
+  function linkFromScript(script, api) {
+    if (script?.dataset.ezLink !== "relay") return directLink(api);
+    const shellOrigin = script.dataset.ezShell;
+    return shellOrigin ? relayLink({ shellOrigin }) : inertLink();
+  }
+  function libraryChooser(post2, fromShell) {
+    const pending = /* @__PURE__ */ new Map();
+    let seq = 0;
+    window.addEventListener("message", (e) => {
+      if (!fromShell(e)) return;
+      const data = e.data;
+      if (data?.type !== "ez:library-picked" || typeof data.reqId !== "string") return;
+      const waiting = pending.get(data.reqId);
+      pending.delete(data.reqId);
+      if (!waiting) return;
+      if (typeof data.error === "string") waiting.reject(new Error(data.error));
+      else waiting.resolve(Array.isArray(data.files) ? data.files : []);
+    });
+    return () => new Promise((resolve, reject) => {
+      const reqId = `l${++seq}-${Date.now().toString(36)}`;
+      pending.set(reqId, { resolve, reject });
+      post2({ type: "ez:library-pick", reqId });
+    });
+  }
+  function directLink(api) {
+    const post2 = (message) => window.parent?.postMessage(message, location.origin);
+    const fromShell = (e) => e.source === window.parent && e.origin === location.origin;
+    return {
+      kind: "direct",
+      post: post2,
+      annotate: async (body) => {
+        const res = await fetch(`${api}/annotations`, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(body)
+        });
+        if (!res.ok) throw new Error(`annotation rejected (${res.status})`);
+      },
+      attachments: directAttachments(api),
+      ...window.parent !== window ? { chooseLibrary: libraryChooser(post2, fromShell) } : {},
+      subscribe: (onSnapshot) => {
+        if (window.parent === window) {
+          const events = new EventSource(`${api}/events`);
+          events.onmessage = (e) => onSnapshot(JSON.parse(e.data));
+          return;
+        }
+        window.addEventListener("message", (e) => {
+          const data = e.data;
+          if (e.source === window.parent && e.origin === location.origin && data?.type === "ez:snapshot" && data.snapshot) {
+            onSnapshot(data.snapshot);
+          }
+        });
+      },
+      fromShell: (e) => e.origin === location.origin
+    };
+  }
+  var RELAY_TIMEOUT_MS = 1e4;
+  function relayLink(config) {
+    const { shellOrigin } = config;
+    const pending = /* @__PURE__ */ new Map();
+    const listeners = [];
+    let last = null;
+    let seq = 0;
+    const fromShell = (e) => e.source === window.parent && e.origin === shellOrigin;
+    const post2 = (message) => window.parent?.postMessage(message, shellOrigin);
+    window.addEventListener("message", (e) => {
+      if (!fromShell(e)) return;
+      const data = e.data;
+      if (data?.type === "ez:relay-done" && typeof data.reqId === "string") {
+        const waiting = pending.get(data.reqId);
+        pending.delete(data.reqId);
+        if (!waiting) return;
+        if (data.ok) waiting.resolve(data.body);
+        else waiting.reject(new Error(data.body?.error ?? "refused"));
+      }
+      if (data?.type === "ez:snapshot" && data.snapshot) {
+        last = data.snapshot;
+        for (const listener of listeners) listener(data.snapshot);
+      }
+    });
+    const request = (op, transfer) => new Promise((resolve, reject) => {
+      const reqId = `r${++seq}-${Date.now().toString(36)}`;
+      pending.set(reqId, { resolve, reject });
+      window.setTimeout(() => {
+        if (pending.delete(reqId)) reject(new Error("the review did not answer"));
+      }, RELAY_TIMEOUT_MS);
+      window.parent?.postMessage({ type: "ez:relay", reqId, op }, shellOrigin, transfer);
+    });
+    return {
+      kind: "relay",
+      post: post2,
+      annotate: async (body) => {
+        await request({ op: "annotate", body });
+      },
+      attachments: {
+        upload: async (file) => {
+          const bytes = await file.arrayBuffer();
+          const name = file.name || "image.png";
+          return await request(
+            { op: "upload", name, mime: file.type || "application/octet-stream", bytes },
+            [bytes]
+          );
+        },
+        discard: (id) => {
+          request({ op: "discard-upload", id }).catch(() => {
+          });
+        }
+      },
+      chooseLibrary: libraryChooser(post2, fromShell),
+      subscribe: (onSnapshot) => {
+        listeners.push(onSnapshot);
+        if (last) onSnapshot(last);
+      },
+      fromShell
+    };
+  }
+  function inertLink() {
+    const refused = () => Promise.reject(new Error("this frame has no review to report to"));
+    return {
+      kind: "relay",
+      post: () => {
+      },
+      annotate: refused,
+      attachments: { upload: refused, discard: () => {
+      } },
+      subscribe: () => {
+      },
+      fromShell: () => false
+    };
+  }
+
+  // src/client/variant.ts
+  var SWAPPED_ATTR = "data-ez-swapped";
+  var VARIANT_ATTR = "data-ez-variant";
+  var SOURCE_ATTR = "data-ez-source";
+  function scoreCandidate(anchor, candidate) {
+    if (anchor.source && candidate.source && anchor.source !== candidate.source) return -1;
+    let score = 0;
+    if (anchor.source && candidate.source === anchor.source) score += 100;
+    if (anchor.text && candidate.text) {
+      if (candidate.text === anchor.text) score += 40;
+      else if (candidate.text.includes(anchor.text) || anchor.text.includes(candidate.text)) {
+        score += 12;
+      }
+    }
+    if (anchor.selector && candidate.selector === anchor.selector) score += 20;
+    if (anchor.components?.length && candidate.components?.length) {
+      if (candidate.components[0] === anchor.components[0]) score += 4;
+      if (anchor.components.every((name) => candidate.components.includes(name))) score += 2;
+    }
+    return score;
+  }
+  var MIN_SCORE = 20;
+  function locate(anchor, candidates) {
+    let best = -1;
+    let bestScore = MIN_SCORE - 1;
+    candidates.forEach((candidate, i) => {
+      const score = scoreCandidate(anchor, candidate);
+      if (score > bestScore) {
+        bestScore = score;
+        best = i;
+      }
+    });
+    return best === -1 ? null : best;
+  }
+  var FORBIDDEN_TAGS = ["script", "iframe", "object", "embed", "link", "meta", "base"];
+  function sanitize(root) {
+    for (const tag of FORBIDDEN_TAGS) {
+      for (const node of [...root.querySelectorAll(tag)]) node.remove();
+    }
+    for (const element of [root, ...root.querySelectorAll("*")]) {
+      for (const attribute of [...element.attributes]) {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith("on")) element.removeAttribute(attribute.name);
+        else if ((name === "href" || name === "src" || name === "xlink:href") && /^\s*javascript:/i.test(attribute.value)) {
+          element.removeAttribute(attribute.name);
+        }
+      }
+    }
+  }
+  function buildVariant(html, doc) {
+    const template = doc.createElement("template");
+    template.innerHTML = html;
+    const root = template.content.firstElementChild;
+    if (!root) return null;
+    sanitize(root);
+    for (const style of root.querySelectorAll("style")) {
+      style.textContent = (style.textContent ?? "").replace(/:root\b/g, ":host");
+    }
+    return root;
+  }
+  var HOST_TAG = "ez-variant";
+  function mountVariant(root, exploreId, doc, boxSizing) {
+    const host = doc.createElement(HOST_TAG);
+    host.setAttribute(VARIANT_ATTR, exploreId);
+    host.style.display = "contents";
+    const baseline = doc.createElement("style");
+    baseline.textContent = `*, *::before, *::after { box-sizing: ${boxSizing}; }`;
+    host.attachShadow({ mode: "open" }).append(baseline, root);
+    return host;
+  }
+  var VariantSwapper = class {
+    constructor(doc, describe2) {
+      this.doc = doc;
+      this.describe = describe2;
+      __publicField(this, "swaps", /* @__PURE__ */ new Map());
+      __publicField(this, "observer", null);
+      __publicField(this, "queued", false);
+    }
+    /** Put a round's variant on the page, or take it off with `html: null`.
+     *
+     *  Always restores first. `apply` leaves a round alone that already has
+     *  something standing, which is what makes re-applying after a re-render
+     *  idempotent - but the user picking a *different* variant of the same round is
+     *  a real change, and without this it would be swallowed by that same guard. */
+    set(swap) {
+      this.restore(swap.exploreId);
+      if (swap.html === null) {
+        this.swaps.delete(swap.exploreId);
+      } else {
+        this.swaps.set(swap.exploreId, swap);
+        this.apply(swap);
+      }
+      this.watch();
+    }
+    /** Give the page back, whole. */
+    clear() {
+      for (const exploreId of [...this.swaps.keys()]) this.restore(exploreId);
+      this.swaps.clear();
+      this.watch();
+    }
+    /** Re-apply everything to whatever is mounted now. Called by the observer, and
+     *  safe to call at any time: a round already standing where it should be is
+     *  left alone. */
+    reapply() {
+      for (const swap of this.swaps.values()) this.apply(swap);
+    }
+    apply(swap) {
+      if (this.doc.querySelector(`[${VARIANT_ATTR}="${cssEscape(swap.exploreId)}"]`)) return;
+      const elements = [...this.doc.querySelectorAll(`[${SOURCE_ATTR}], body *`)].filter(
+        (el2) => !el2.closest(`[${VARIANT_ATTR}]`) && !el2.hasAttribute(SWAPPED_ATTR)
+      );
+      const index = locate(
+        swap.anchor,
+        elements.map((el2) => this.describe(el2))
+      );
+      if (index === null) return;
+      const target = elements[index];
+      const root = buildVariant(swap.html, this.doc);
+      if (!root) return;
+      const boxSizing = this.doc.defaultView?.getComputedStyle(target).boxSizing || "content-box";
+      target.setAttribute(SWAPPED_ATTR, swap.exploreId);
+      target.insertAdjacentElement(
+        "afterend",
+        mountVariant(root, swap.exploreId, this.doc, boxSizing)
+      );
+    }
+    restore(exploreId) {
+      const id = cssEscape(exploreId);
+      for (const node of this.doc.querySelectorAll(`[${VARIANT_ATTR}="${id}"]`)) node.remove();
+      for (const node of this.doc.querySelectorAll(`[${SWAPPED_ATTR}="${id}"]`)) {
+        node.removeAttribute(SWAPPED_ATTR);
+      }
+    }
+    /** Watch only while something is swapped: an observer on the whole body is not
+     *  free, and a review with no explore open should not be paying for one. */
+    watch() {
+      if (!this.swaps.size) {
+        this.observer?.disconnect();
+        this.observer = null;
+        return;
+      }
+      if (this.observer) return;
+      this.observer = new MutationObserver((records) => {
+        const theirs = records.some(
+          (record) => [...record.addedNodes, ...record.removedNodes].some(
+            (node) => !(node instanceof Element) || !this.ours(node)
+          )
+        );
+        if (!theirs) return;
+        if (this.queued) return;
+        this.queued = true;
+        queueMicrotask(() => {
+          this.queued = false;
+          this.collectOrphans();
+          this.reapply();
+        });
+      });
+      this.observer.observe(this.doc.body, { childList: true, subtree: true });
+    }
+    ours(node) {
+      return node.hasAttribute(VARIANT_ATTR) || node.hasAttribute(SWAPPED_ATTR);
+    }
+    /** A variant whose original is gone - the app removed one child rather than
+     *  the subtree - would otherwise be left standing on its own, which reads as
+     *  the variant having become the page. */
+    collectOrphans() {
+      for (const variant of this.doc.querySelectorAll(`[${VARIANT_ATTR}]`)) {
+        const id = variant.getAttribute(VARIANT_ATTR);
+        if (!this.doc.querySelector(`[${SWAPPED_ATTR}="${cssEscape(id)}"]`)) variant.remove();
+      }
+    }
+  };
+  var cssEscape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+  var CAPTURE_STYLES = [
+    "box-sizing",
+    "font-family",
+    "font-size",
+    "font-weight",
+    "line-height",
+    "letter-spacing",
+    "color",
+    "background-color",
+    "border",
+    "border-radius",
+    "padding",
+    "gap",
+    "box-shadow",
+    "text-transform"
+  ];
+  var INHERITED = [
+    "font-family",
+    "font-size",
+    "font-weight",
+    "line-height",
+    "letter-spacing",
+    "color"
+  ];
+  var SLOT_LAYOUT = {
+    display: "display",
+    direction: "flex-direction",
+    align: "align-items",
+    justify: "justify-content",
+    gap: "gap"
+  };
+  var MAX_CAPTURE_HTML = 16 * 1024;
+  var MAX_RULES_BYTES = 4 * 1024;
+  var MAX_RULES = 40;
+  var MAX_TOKENS = 40;
+  var MAX_SIBLINGS = 12;
+  function captureElement(element) {
+    const doc = element.ownerDocument;
+    const view = doc.defaultView;
+    const html = element.outerHTML;
+    const capture = {
+      html: html.slice(0, MAX_CAPTURE_HTML),
+      ...html.length > MAX_CAPTURE_HTML ? { truncated: true } : {}
+    };
+    if (!view) return capture;
+    const styles = pick(view.getComputedStyle(element), CAPTURE_STYLES);
+    if (Object.keys(styles).length) capture.styles = styles;
+    const rules = matchedRules(element, doc);
+    if (rules.length) capture.rules = rules;
+    const parent = element.parentElement;
+    if (parent) {
+      const width = parent.getBoundingClientRect().width;
+      if (width > 0) capture.parentWidth = Math.round(width);
+      const computed = view.getComputedStyle(parent);
+      const slot = {};
+      for (const [key, property] of Object.entries(SLOT_LAYOUT)) {
+        const value = computed.getPropertyValue(property).trim();
+        if (value && value !== "normal") slot[key] = value;
+      }
+      const inherits = pick(computed, INHERITED);
+      if (Object.keys(inherits).length) slot.inherits = inherits;
+      if (Object.keys(slot).length) capture.slot = slot;
+      const siblings = [...parent.children].filter(
+        (el2) => el2 !== element && !el2.hasAttribute(VARIANT_ATTR) && !el2.hasAttribute(SWAPPED_ATTR)
+      ).slice(0, MAX_SIBLINGS).map((el2) => {
+        const rect = el2.getBoundingClientRect();
+        const text = (el2.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 60);
+        const cls = el2.getAttribute("class")?.trim().slice(0, 80);
+        return {
+          tag: el2.tagName.toLowerCase(),
+          ...cls ? { class: cls } : {},
+          ...text ? { text } : {},
+          width: Math.round(rect.width),
+          height: Math.round(rect.height)
+        };
+      });
+      if (siblings.length) capture.siblings = siblings;
+    }
+    const tokens = rootTokens(doc);
+    if (Object.keys(tokens).length) capture.tokens = tokens;
+    const rootEl = doc.documentElement;
+    const theme = {};
+    const scheme = view.getComputedStyle(rootEl).getPropertyValue("color-scheme").trim();
+    if (scheme && scheme !== "normal") theme.scheme = scheme;
+    const classes = [rootEl.className, doc.body?.className ?? ""].filter(Boolean).join(" ").trim();
+    if (classes) theme.classes = classes.slice(0, 120);
+    const dataTheme = rootEl.dataset.theme ?? doc.body?.dataset.theme;
+    if (dataTheme) theme.dataTheme = dataTheme.slice(0, 40);
+    if (Object.keys(theme).length) capture.theme = theme;
+    return capture;
+  }
+  function pick(computed, properties) {
+    const out = {};
+    for (const property of properties) {
+      const value = computed.getPropertyValue(property).trim();
+      if (value) out[property] = value;
+    }
+    return out;
+  }
+  var PSEUDO = /::?[a-zA-Z-]+(\([^)]*\))?/g;
+  function matchedRules(element, doc) {
+    const targets = [element, ...element.querySelectorAll("*")];
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    let bytes = 0;
+    const applies = (selectorText) => selectorText.split(",").some((one) => {
+      const base = one.replace(PSEUDO, "").trim();
+      if (!base) return false;
+      try {
+        return targets.some((t) => t.matches(base));
+      } catch {
+        return false;
+      }
+    });
+    const take = (text) => {
+      if (seen.has(text)) return true;
+      if (out.length >= MAX_RULES || bytes + text.length > MAX_RULES_BYTES) return false;
+      seen.add(text);
+      out.push(text);
+      bytes += text.length;
+      return true;
+    };
+    const walk = (rules, wrap) => {
+      for (const rule of rules) {
+        if (rule instanceof CSSStyleRule) {
+          if (applies(rule.selectorText) && !take(wrap(rule.cssText))) return false;
+        } else if (rule instanceof CSSMediaRule) {
+          const condition = rule.conditionText;
+          if (!walk(rule.cssRules, (text) => wrap(`@media ${condition} { ${text} }`))) return false;
+        } else if (rule instanceof CSSSupportsRule) {
+          const condition = rule.conditionText;
+          if (!walk(rule.cssRules, (text) => wrap(`@supports ${condition} { ${text} }`))) return false;
+        }
+      }
+      return true;
+    };
+    for (const sheet of doc.styleSheets) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      if (!walk(rules, (text) => text)) break;
+    }
+    return out;
+  }
+  function rootTokens(doc) {
+    const names = /* @__PURE__ */ new Set();
+    const walk = (rules) => {
+      for (const rule of rules) {
+        if (rule instanceof CSSStyleRule) {
+          if (!/(^|,)\s*(:root|html)\s*(,|$)/.test(rule.selectorText)) continue;
+          for (let i = 0; i < rule.style.length; i += 1) {
+            const name = rule.style[i];
+            if (name.startsWith("--")) names.add(name);
+          }
+        } else if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
+          walk(rule.cssRules);
+        }
+      }
+    };
+    for (const sheet of doc.styleSheets) {
+      try {
+        walk(sheet.cssRules);
+      } catch {
+        continue;
+      }
+    }
+    const computed = doc.defaultView?.getComputedStyle(doc.documentElement);
+    const out = {};
+    if (!computed) return out;
+    for (const name of [...names].slice(0, MAX_TOKENS)) {
+      const value = computed.getPropertyValue(name).trim();
+      if (value) out[name] = value.slice(0, 120);
+    }
+    return out;
+  }
+
+  // src/client/scroll-sync.ts
+  var QUIET_MS = 250;
+  function scrollRange(scrollHeight, innerHeight) {
+    return Math.max(0, scrollHeight - innerHeight);
+  }
+  function scrollRatio(scrollY, range) {
+    if (range <= 0) return null;
+    return Math.min(1, Math.max(0, scrollY / range));
+  }
+  function following(now, appliedAt) {
+    return appliedAt !== null && now - appliedAt < QUIET_MS;
+  }
+
+  // src/client/region.ts
+  var DRAG_SLOP = 8;
+  var EDGE_SLACK = 1;
+  function regionFrom(from, to) {
+    return {
+      x: Math.round(Math.min(from.x, to.x)),
+      y: Math.round(Math.min(from.y, to.y)),
+      width: Math.round(Math.abs(to.x - from.x)),
+      height: Math.round(Math.abs(to.y - from.y))
+    };
+  }
+  function isRegion(region) {
+    return region.width >= DRAG_SLOP || region.height >= DRAG_SLOP;
+  }
+  function centerOf(region) {
+    return { x: region.x + region.width / 2, y: region.y + region.height / 2 };
+  }
+  function containsRect(region, rect) {
+    return rect.x >= region.x - EDGE_SLACK && rect.y >= region.y - EDGE_SLACK && rect.x + rect.width <= region.x + region.width + EDGE_SLACK && rect.y + rect.height <= region.y + region.height + EDGE_SLACK;
+  }
+  function intersectsRect(region, rect) {
+    return rect.x < region.x + region.width && rect.x + rect.width > region.x && rect.y < region.y + region.height && rect.y + rect.height > region.y;
+  }
+
+  // src/label.ts
+  function shortAnchor(anchor) {
+    const framed2 = anchor.contains?.length ? `\u6846\u9078 ${anchor.contains.length} \u9805` : "";
+    const what = anchor.text && truncate(anchor.text, 22) || anchor.section || anchor.components?.[0] || anchor.source?.split("/").pop() || "";
+    const at = viewportTag(anchor);
+    return [framed2, what, at].filter(Boolean).join(" \xB7 ");
+  }
+  function viewportTag(anchor) {
+    const vp = anchor.viewport;
+    if (!vp || vp.preset === "desktop") return "";
+    return `${vp.width}px`;
+  }
+  function truncate(s, max) {
+    const t = s.replace(/\s+/g, " ").trim();
+    return t.length > max ? `${t.slice(0, max)}\u2026` : t;
+  }
+
+  // src/client/overlay.ts
+  var framed = window.parent !== window;
+  var PREFIX = (() => {
+    const script = document.currentScript;
+    try {
+      return new URL(script.src).pathname.replace(/\/overlay\.js$/, "");
+    } catch {
+      return "/__ezdesign";
+    }
+  })();
+  var API = `${PREFIX}/api`;
+  var link = linkFromScript(document.currentScript, API);
+  var SOURCE_ATTR2 = "data-ez-source";
+  var mode = "off";
+  var ended = false;
+  var viewportPreset;
+  var uiScale = 1;
+  var scopedToDevice = false;
+  var appliedScrollAt = null;
+  var scrollRaf = 0;
+  function setFrameZoom(zoom) {
+    const next = zoom > 0 ? 1 / zoom : 1;
+    if (next === uiScale) return;
+    uiScale = next;
+    document.documentElement.style.setProperty("--ez-ui-scale", String(uiScale));
+    scheduleRepaint();
+  }
+  var annotations = [];
+  var canExplore = false;
+  var swapper = new VariantSwapper(document, (element) => {
+    const source = element.closest(`[${SOURCE_ATTR2}]`)?.getAttribute(SOURCE_ATTR2);
+    const text = (element.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 80);
+    return {
+      ...source ? { source } : {},
+      components: componentChain(element),
+      selector: cssPath(element),
+      ...text ? { text } : {}
+    };
+  });
+  var hoverTarget = null;
+  var held = false;
+  var pick2 = null;
+  var lastPointer = null;
+  var modHeld = false;
+  var framing = null;
+  var markedRegion = null;
+  var pendingFrame = null;
+  var swallowClick = false;
+  var popupSubject = null;
+  var highlightTarget = null;
+  var pinPage = null;
+  var popupRect = null;
+  var selectionRange = null;
+  var ui = {
+    highlight: el("div", "ez-highlight"),
+    badge: el("div", "ez-badge"),
+    pin: el("div", "ez-pin"),
+    markers: el("div", "ez-markers"),
+    /** The box being dragged, with its size read out in the corner. */
+    region: el("div", "ez-region"),
+    regionSize: el("div", "ez-region-size"),
+    /** The selected run, drawn by us. The browser stops painting the page's own
+     *  selection the moment the composer takes focus, and the run is the subject. */
+    selection: el("div", "ez-selection"),
+    popup: null,
+    /** Lives beside the popup: its uploads are only ever discarded with it. */
+    popupAttach: null,
+    /** A step *inside* the open popup that Escape should take back before the
+     *  popup itself. Only `/explore` has one today. Returns whether it took the
+     *  press, the way `closeSlash` does - the layers above it are settled the
+     *  same way, and a hook that cannot say "not mine" would eat presses that
+     *  belong to the popup. */
+    popupBack: null,
+    selectionBubble: null
+  };
+  function popupLive() {
+    return Boolean(ui.popup) && !pick2?.suspended;
+  }
+  function el(tag, className) {
+    const node = document.createElement(tag);
+    node.className = className;
+    node.setAttribute("data-ez-ui", "");
+    return node;
+  }
+  function isOwnUi(target) {
+    return target instanceof Element && target.closest("[data-ez-ui]") !== null;
+  }
+  function fiberOf(node) {
+    for (const key of Object.keys(node)) {
+      if (key.startsWith("__reactFiber$")) return node[key];
+    }
+    return null;
+  }
+  function componentChain(element) {
+    let node = element;
+    let fiber = null;
+    while (node && !fiber) {
+      fiber = fiberOf(node);
+      if (!fiber) node = node.parentElement;
+    }
+    const names = [];
+    let current = fiber;
+    while (current && names.length < 3) {
+      const type = current.type;
+      if (type && typeof type !== "string") {
+        const name = type.displayName || type.name;
+        if (name && /^[A-Z]/.test(name) && !names.includes(name)) names.push(name);
+      }
+      current = current.return;
+    }
+    return names;
+  }
+  function cssPath(element) {
+    if (element.id) return `#${CSS.escape(element.id)}`;
+    const parts = [];
+    let node = element;
+    while (node && node !== document.body && parts.length < 6) {
+      if (node.id) {
+        parts.unshift(`#${CSS.escape(node.id)}`);
+        break;
+      }
+      const section = node.getAttribute("data-section");
+      if (section) {
+        parts.unshift(`[data-section="${CSS.escape(section)}"]`);
+        break;
+      }
+      let part = node.tagName.toLowerCase();
+      const parent = node.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+        if (siblings.length > 1) part += `:nth-of-type(${siblings.indexOf(node) + 1})`;
+      }
+      parts.unshift(part);
+      node = parent;
+    }
+    return parts.join(" > ");
+  }
+  function buildAnchor(element, selectedText, pin) {
+    const rect = element.getBoundingClientRect();
+    const sourceHost = element.closest(`[${SOURCE_ATTR2}]`);
+    const sectionHost = element.closest("[data-section]");
+    const text = selectedText ?? (element.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 80);
+    return {
+      source: sourceHost?.getAttribute(SOURCE_ATTR2) ?? void 0,
+      components: componentChain(element),
+      section: sectionHost?.getAttribute("data-section") ?? void 0,
+      selector: cssPath(element),
+      text: text || void 0,
+      point: pin ? {
+        x: Math.round(pin.x),
+        y: Math.round(pin.y),
+        rel: {
+          x: rect.width ? clamp01((pin.x - rect.left - window.scrollX) / rect.width) : 0,
+          y: rect.height ? clamp01((pin.y - rect.top - window.scrollY) / rect.height) : 0
+        }
+      } : void 0,
+      rect: {
+        x: Math.round(rect.x + window.scrollX),
+        y: Math.round(rect.y + window.scrollY),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+      },
+      viewport: { width: window.innerWidth, height: window.innerHeight, preset: viewportPreset },
+      // A canvas frame is one document with no page in the app: its `frame`,
+      // stamped by the shell, says where it is.
+      ...link.kind === "relay" ? {} : { page: location.pathname }
+    };
+  }
+  var clamp01 = (n) => Math.min(1, Math.max(0, n));
+  function describe(element) {
+    const chain = componentChain(element);
+    const source = element.closest(`[${SOURCE_ATTR2}]`)?.getAttribute(SOURCE_ATTR2);
+    const tag = element.tagName.toLowerCase();
+    const head = chain.length ? `<${chain[0]}>` : tag;
+    return source ? `${head} \xB7 ${source}` : head;
+  }
+  var BADGE_GAP = 4;
+  var FRAME_RING = 1;
+  function insetToViewport(rect) {
+    const top = Math.max(FRAME_RING, rect.top);
+    const left = Math.max(FRAME_RING, rect.left);
+    const right = Math.min(window.innerWidth - FRAME_RING, rect.right);
+    const bottom = Math.min(window.innerHeight - FRAME_RING, rect.bottom);
+    return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+  }
+  function paintHighlight() {
+    if (!highlightTarget) {
+      ui.highlight.style.display = "none";
+      ui.badge.style.display = "none";
+      return;
+    }
+    const rect = highlightTarget.getBoundingClientRect();
+    const frame = insetToViewport(rect);
+    Object.assign(ui.highlight.style, {
+      display: "block",
+      top: `${frame.top}px`,
+      left: `${frame.left}px`,
+      width: `${frame.width}px`,
+      height: `${frame.height}px`
+    });
+    if (popupLive()) {
+      ui.badge.style.display = "none";
+      return;
+    }
+    ui.badge.textContent = describe(highlightTarget);
+    ui.badge.style.display = "block";
+    placeBadge(rect, ui.badge.offsetWidth * uiScale, ui.badge.offsetHeight * uiScale);
+  }
+  function selectionOwner(range) {
+    const node = range.commonAncestorContainer;
+    const owner = node instanceof Element ? node : node.parentElement;
+    return owner && !isOwnUi(owner) ? owner : null;
+  }
+  function liveSelectionRange() {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !selection.rangeCount) return null;
+    const range = selection.getRangeAt(0);
+    if (!range.toString().trim() || !selectionOwner(range)) return null;
+    return range;
+  }
+  function paintSelection() {
+    ui.selection.textContent = "";
+    if (!selectionRange) return;
+    for (const rect of selectionRange.getClientRects()) {
+      if (!rect.width || !rect.height) continue;
+      const band = el("div", "ez-selection-band");
+      Object.assign(band.style, {
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`
+      });
+      ui.selection.append(band);
+    }
+  }
+  function placeBadge(rect, width, height) {
+    const above = rect.top - height - BADGE_GAP;
+    const below = rect.bottom + BADGE_GAP;
+    const floor = BADGE_GAP;
+    const ceiling = Math.max(floor, window.innerHeight - height - BADGE_GAP);
+    const top = above >= floor ? above : below <= ceiling ? below : Math.min(Math.max(rect.top + BADGE_GAP, floor), ceiling);
+    const right = Math.max(floor, window.innerWidth - width - BADGE_GAP);
+    Object.assign(ui.badge.style, {
+      top: `${top}px`,
+      left: `${Math.min(Math.max(rect.left, floor), right)}px`
+    });
+  }
+  function paintPin() {
+    if (!pinPage || pick2) {
+      ui.pin.style.display = "none";
+      return;
+    }
+    Object.assign(ui.pin.style, {
+      display: "block",
+      top: `${pinPage.y - window.scrollY}px`,
+      left: `${pinPage.x - window.scrollX}px`
+    });
+  }
+  function paintPopup() {
+    const popup = ui.popup;
+    if (!popup || !popupRect) return;
+    const rect = popupRect();
+    const width = popup.offsetWidth * uiScale;
+    const height = popup.offsetHeight * uiScale;
+    const top = Math.min(rect.bottom + 8, window.innerHeight - height - 12);
+    const left = Math.min(Math.max(8, rect.left), window.innerWidth - width - 12);
+    Object.assign(popup.style, { top: `${Math.max(8, top)}px`, left: `${left}px` });
+  }
+  function movePin(at) {
+    pinPage = at;
+    paintPin();
+  }
+  function moveHighlight(element) {
+    highlightTarget = element;
+    paintHighlight();
+  }
+  function subjectOf(kind, element, extra) {
+    return {
+      kind,
+      page: location.pathname,
+      anchor: buildAnchor(element, extra?.selectedText, extra?.pin),
+      ...extra?.selectedText ? { selectedText: extra.selectedText } : {},
+      ...extra?.pin ? { pin: extra.pin } : {}
+    };
+  }
+  function closePopup() {
+    ui.popupAttach?.discard();
+    ui.popupAttach = null;
+    ui.popupBack = null;
+    if (ui.popup) post({ type: "ez:popup", open: false });
+    ui.popup?.remove();
+    ui.popup = null;
+    popupRect = null;
+    popupSubject = null;
+    selectionRange = null;
+    paintSelection();
+  }
+  function dismiss() {
+    closePopup();
+    hoverTarget = null;
+    moveHighlight(null);
+    movePin(null);
+    markedRegion = null;
+    paintRegion();
+  }
+  function exitToIdle() {
+    dismiss();
+    setMode("off");
+  }
+  function escape() {
+    if (ui.popupAttach?.closeSlash()) return;
+    if (!pick2 && (framing || pendingFrame)) {
+      endFraming();
+      return;
+    }
+    if (pick2) {
+      cancelPick("escape");
+      return;
+    }
+    if (ui.popupBack?.()) return;
+    if (ui.popup) {
+      dismiss();
+      return;
+    }
+    if (mode === "off") return;
+    exitToIdle();
+  }
+  var COMPOSE_PLACEHOLDER = "\u60F3\u600E\u9EBC\u8ABF\u6574\uFF1F\u8F38\u5165 / \u7528\u6307\u4EE4 (\u2318+Enter \u9001\u51FA)";
+  var EXPLORE_PLACEHOLDER = "\u7D66\u4E88\u63A2\u7D22\u65B9\u5411\uFF0C\u6216\u7559\u767D\u81EA\u7531\u63A2\u7D22";
+  function openPopup(subject, anchor, onSave, run = null, exploreElement = null) {
+    closePopup();
+    selectionRange = run;
+    paintSelection();
+    popupSubject = subject;
+    const popup = el("div", "ez-popup");
+    const actions = el("div", "ez-actions");
+    const save = el("button", "ez-btn ez-btn-primary");
+    const saveIcon = icon(Add01Icon, 14);
+    const saveLabel = document.createTextNode("\u52A0\u5165\u5F85\u9001\u6E05\u55AE");
+    save.append(saveIcon, saveLabel);
+    const cancel = el("button", "ez-btn");
+    cancel.textContent = "\u53D6\u6D88";
+    actions.append(cancel, save);
+    let saving = false;
+    const exploreTarget = subject.kind === "element" ? exploreElement : null;
+    let exploring = false;
+    const exploreHead = el("div", "ez-explore-head");
+    exploreHead.append(icon(MagicWand01Icon, 15), el("span", "ez-explore-title"));
+    exploreHead.querySelector(".ez-explore-title").textContent = "\u63A2\u7D22\u6A23\u5F0F";
+    exploreHead.hidden = true;
+    const attach = attachify({
+      attachments: link.attachments,
+      ...link.chooseLibrary ? { chooseLibrary: link.chooseLibrary } : {},
+      mk: el,
+      className: "ez-input",
+      placeholder: COMPOSE_PLACEHOLDER,
+      onChange: () => {
+        save.disabled = saving || attach.pending() > 0;
+        if (pick2?.suspended) postDraft();
+      },
+      // `enabled` rather than a built-once list, because what this box is for can
+      // change while it is open: arming an explore from inside one is a command
+      // with nothing to do, and the menu should not offer it.
+      commands: [
+        {
+          id: "element",
+          label: "Element",
+          hint: `\u9078\u53D6\u9801\u9762\u5143\u7D20\u6216\u7BC4\u570D`,
+          keywords: ["element", "pick", "ref", "reference", "\u5143\u7D20", "\u6307\u5B9A", "\u53C3\u8003", "\u6846\u9078"],
+          icon: AlignSelectionIcon,
+          run: () => void armPick("popup", newPickId())
+        },
+        {
+          id: "explore",
+          label: "Explore",
+          hint: "\u63A2\u7D22\u6A23\u5F0F",
+          keywords: ["explore", "variant", "ui", "\u63A2\u7D22", "\u6A23\u5F0F", "\u7248\u672C"],
+          icon: MagicWand01Icon,
+          enabled: () => canExplore && !!exploreTarget && !exploring,
+          run: () => setExploring(true)
+        }
+      ]
+    });
+    const input = attach.editable;
+    ui.popupAttach = attach;
+    attach.field.prepend(exploreHead);
+    let stashed = null;
+    function setExploring(on) {
+      if (on === exploring) return;
+      exploring = on;
+      const current = document.createDocumentFragment();
+      current.append(...input.childNodes);
+      if (on) stashed = current;
+      else if (stashed) {
+        input.append(stashed);
+        stashed = null;
+      }
+      input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+      exploreHead.hidden = !on;
+      popup.classList.toggle("ez-popup-explore", on);
+      input.dataset.placeholder = on ? EXPLORE_PLACEHOLDER : COMPOSE_PLACEHOLDER;
+      input.setAttribute("aria-label", on ? EXPLORE_PLACEHOLDER : COMPOSE_PLACEHOLDER);
+      cancel.textContent = on ? "\u8FD4\u56DE" : "\u53D6\u6D88";
+      saveIcon.toggleAttribute("hidden", on);
+      saveLabel.textContent = on ? "\u63A2\u7D22" : "\u52A0\u5165\u5F85\u9001\u6E05\u55AE";
+      input.focus();
+      caretToEnd();
+    }
+    function caretToEnd() {
+      const range = document.createRange();
+      range.selectNodeContents(input);
+      range.collapse(false);
+      const selection = document.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+    ui.popupBack = () => {
+      if (!exploring) return false;
+      setExploring(false);
+      return true;
+    };
+    const submit = async () => {
+      if (saving || attach.pending() > 0) return;
+      const comment = attach.text();
+      const attachments = attach.ids();
+      const references = attach.refs();
+      if (!exploring && !comment && attachments.length === 0 && references.length === 0) {
+        input.focus();
+        return;
+      }
+      ui.popupAttach = null;
+      save.disabled = true;
+      saving = true;
+      try {
+        if (exploring && exploreTarget) {
+          post({
+            type: "ez:explore",
+            anchor: buildAnchor(exploreTarget),
+            capture: captureElement(exploreTarget),
+            direction: comment,
+            // The direction travels with whatever was put in the sentence. "Like
+            // this screenshot", "make it match that button" are directions, and
+            // the markers in the text name these.
+            attachments,
+            references
+          });
+        } else {
+          await onSave(comment, attachments, references);
+        }
+      } catch {
+        if (ui.popup !== popup) return;
+        ui.popupAttach = attach;
+        save.disabled = false;
+        showPopupNotice(["\u6C92\u6709\u9001\u51FA\u6210\u529F\uFF0C\u8ACB\u518D\u8A66\u4E00\u6B21"]);
+        return;
+      } finally {
+        saving = false;
+      }
+      if (ui.popup !== popup) return;
+      if (exploring && exploreTarget) {
+        setExploring(false);
+        const draft = exploreDraft(attach);
+        if (draft) post({ type: "ez:explore-held", draft });
+        dismiss();
+        return;
+      }
+      dismiss();
+    };
+    save.onclick = () => void submit();
+    cancel.onclick = () => exploring ? setExploring(false) : dismiss();
+    input.onkeydown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") void submit();
+      e.stopPropagation();
+    };
+    popup.append(attach.wrap, actions);
+    popup.setAttribute("data-ez-subject", subject.kind);
+    document.body.appendChild(popup);
+    ui.popup = popup;
+    post({ type: "ez:popup", open: true });
+    popupRect = anchor;
+    paintPopup();
+    paintHighlight();
+    input.focus();
+  }
+  async function saveAnnotation(kind, element, comment, attachments, references, extra) {
+    const anchor = extra?.anchor ?? (element ? buildAnchor(element, extra?.selectedText, extra?.pin) : null);
+    if (!anchor) throw new Error("no anchor to save against");
+    await link.annotate({ kind, comment, attachments, references, anchor });
+  }
+  function corroborates(hit, anchor) {
+    if (!anchor.source) return true;
+    return hit.closest(`[${SOURCE_ATTR2}]`)?.getAttribute(SOURCE_ATTR2) === anchor.source;
+  }
+  function bySource(source) {
+    for (const node of document.querySelectorAll(`[${SOURCE_ATTR2}]`)) {
+      if (node.getAttribute(SOURCE_ATTR2) === source) return node;
+    }
+    return null;
+  }
+  function byText(needle) {
+    let best = null;
+    let bestLength = Number.POSITIVE_INFINITY;
+    for (const node of document.body.querySelectorAll("*")) {
+      if (isOwnUi(node)) continue;
+      const text = (node.textContent ?? "").replace(/\s+/g, " ");
+      if (!text.includes(needle) || text.length >= bestLength) continue;
+      best = node;
+      bestLength = text.length;
+    }
+    return best;
+  }
+  function resolveSubject(subject) {
+    const anchor = subject.anchor;
+    const hit = resolveSelector(anchor.selector);
+    if (hit && corroborates(hit, anchor)) return hit;
+    if (anchor.source) {
+      const found = bySource(anchor.source);
+      if (found) return found;
+    }
+    if (subject.selectedText) {
+      const found = byText(subject.selectedText);
+      if (found) return found;
+    }
+    return hit;
+  }
+  function staleRect(rect) {
+    if (!rect) {
+      return new DOMRect(window.innerWidth / 2 - 6, window.innerHeight / 2 - 6, 12, 12);
+    }
+    return new DOMRect(rect.x - window.scrollX, rect.y - window.scrollY, rect.width, rect.height);
+  }
+  function showPopupNotice(lines) {
+    if (!ui.popup || lines.length === 0) return;
+    ui.popup.querySelector(".ez-popup-notice")?.remove();
+    const notice = el("div", "ez-popup-notice");
+    notice.textContent = lines.join("\u3000");
+    ui.popup.prepend(notice);
+    paintPopup();
+  }
+  var SETTLE_MS = 800;
+  function whenSubjectSettles(subject, done) {
+    const deadline = Date.now() + SETTLE_MS;
+    const attempt = () => {
+      const found = resolveSubject(subject);
+      const target = found?.hasAttribute(SWAPPED_ATTR) ? null : found;
+      if (target || Date.now() >= deadline) {
+        done(target);
+        return;
+      }
+      requestAnimationFrame(attempt);
+    };
+    attempt();
+  }
+  function restoreDraft(draft) {
+    const subject = draft.subject;
+    if (!subject) return;
+    if (draftExpired(draft, Date.now(), GRACE_MS)) {
+      post({ type: "ez:draft-expired", pickId: draft.id });
+      return;
+    }
+    whenSubjectSettles(subject, (target) => rebuildPopup(draft, subject, target));
+  }
+  function rebuildPopup(draft, subject, target) {
+    restoreView(subject.scroll, target);
+    const box = subject.anchor.contains?.length ? subject.anchor.rect : void 0;
+    const lines = [];
+    if (!target && !box) lines.push("\u539F\u672C\u7684\u5143\u7D20\u5DF2\u7D93\u4E0D\u5728\u9801\u9762\u4E0A\uFF0C\u9019\u5247\u6A19\u8A3B\u6703\u7528\u7576\u6642\u7684\u4F4D\u7F6E\u9001\u51FA");
+    const lost = draftPendingNames(draft.body);
+    if (lost.length) lines.push(`\u4E0A\u50B3\u4E2D\u7684\u6A94\u6848\uFF08${lost.join("\u3001")}\uFF09\u6C92\u6709\u8DDF\u8457\u56DE\u4F86\uFF0C\u8ACB\u91CD\u65B0\u8CBC\u4E00\u6B21`);
+    moveHighlight(box ? null : target);
+    if (box) {
+      markedRegion = box;
+      paintRegion();
+    }
+    if (subject.pin) movePin(subject.pin);
+    openPopup(
+      subject,
+      box ? () => regionViewportRect(box) : target ? () => target.getBoundingClientRect() : () => staleRect(subject.anchor.rect),
+      (comment, files, refs) => saveAnnotation(subject.kind, target, comment, files, refs, {
+        selectedText: subject.selectedText,
+        pin: subject.pin,
+        // Keeps the recorded viewport too: it says what the user was actually
+        // looking at when they framed this, which a repaint would overwrite.
+        ...target && !box ? {} : { anchor: subject.anchor }
+      }),
+      null,
+      // The element this comment is about, so `/explore` is on offer again. A
+      // rebuilt popup used to come back without it, and every comment that had
+      // just been through one explore could not start another - which is the one
+      // thing a user with a variant in hand and a note to go with it wants next.
+      // A region has no single element to explore; `openPopup` already refuses a
+      // subject that is not an element, so only the box has to be kept out here.
+      box ? null : target
+    );
+    ui.popupAttach?.restore(draft.body);
+    showPopupNotice(lines);
+  }
+  var markerRaf = 0;
+  var MARKER_SIZE = 20;
+  function resolveSelector(selector) {
+    if (!selector) return null;
+    try {
+      return document.querySelector(selector);
+    } catch {
+      return null;
+    }
+  }
+  function madeHere(a) {
+    if (!scopedToDevice) return true;
+    const preset = a.anchor.viewport?.preset;
+    return !preset || preset === viewportPreset;
+  }
+  function markerPosition(a) {
+    const target = resolveSelector(a.anchor.selector);
+    const rect = target?.getBoundingClientRect();
+    const live = rect && (rect.width > 0 || rect.height > 0) ? rect : null;
+    if (a.kind === "point" && a.anchor.point) {
+      if (live) {
+        return {
+          top: live.top + a.anchor.point.rel.y * live.height,
+          left: live.left + a.anchor.point.rel.x * live.width
+        };
+      }
+      if (a.anchor.viewport && window.innerWidth !== a.anchor.viewport.width) return null;
+      return { top: a.anchor.point.y - window.scrollY, left: a.anchor.point.x - window.scrollX };
+    }
+    if (a.anchor.contains?.length && a.anchor.rect) {
+      if (!a.anchor.viewport || window.innerWidth === a.anchor.viewport.width) {
+        return { top: a.anchor.rect.y - window.scrollY, left: a.anchor.rect.x - window.scrollX };
+      }
+      return live ? { top: live.top, left: live.left } : null;
+    }
+    return live ? { top: live.top, left: live.left } : null;
+  }
+  function renderMarkers() {
+    ui.markers.textContent = "";
+    if (pick2) return;
+    const relevant = annotations.filter(
+      (a) => (link.kind === "relay" || a.anchor.page === location.pathname) && madeHere(a)
+    );
+    relevant.forEach((a) => {
+      const at = markerPosition(a);
+      if (!at) return;
+      const marker = el("div", "ez-marker");
+      marker.textContent = String(a.n ?? annotations.indexOf(a) + 1);
+      marker.title = a.comment;
+      const r = MARKER_SIZE / 2;
+      let top = at.top - r;
+      let left = at.left - r;
+      const onScreen = at.top >= 0 && at.top <= window.innerHeight && at.left >= 0 && at.left <= window.innerWidth;
+      if (onScreen) {
+        top = Math.min(Math.max(top, 2), window.innerHeight - MARKER_SIZE - 2);
+        left = Math.min(Math.max(left, 2), window.innerWidth - MARKER_SIZE - 2);
+      }
+      Object.assign(marker.style, { top: `${top}px`, left: `${left}px` });
+      ui.markers.appendChild(marker);
+    });
+  }
+  function scheduleRepaint() {
+    cancelAnimationFrame(markerRaf);
+    markerRaf = requestAnimationFrame(() => {
+      renderMarkers();
+      paintHighlight();
+      paintSelection();
+      paintPin();
+      paintRegion();
+      paintPopup();
+    });
+  }
+  var PICKING_LABEL = "\u9078\u53D6\u4E2D\u2026";
+  var pickSeq = 0;
+  var newPickId = () => `p${++pickSeq}-${Date.now().toString(36)}`;
+  function post(message) {
+    link.post(message);
+  }
+  function suspendPopup() {
+    if (!ui.popup) return false;
+    ui.popup.setAttribute("data-ez-hidden", "");
+    return true;
+  }
+  function restoreView(scroll, target) {
+    if (scroll) window.scrollTo({ left: scroll.x, top: scroll.y, behavior: "instant" });
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    if (rect.bottom > 0 && rect.top < window.innerHeight) return;
+    target.scrollIntoView({ block: "center", behavior: "instant" });
+  }
+  function resumePopup(view) {
+    if (!ui.popup) return;
+    if (view) restoreView(view.scroll, view.prevHighlight);
+    ui.popup.removeAttribute("data-ez-hidden");
+    paintPopup();
+    paintHighlight();
+    ui.popupAttach?.editable.focus();
+  }
+  var inExplore = false;
+  function currentDraft() {
+    if (!pick2 || pick2.host !== "popup" || !ui.popupAttach || !popupSubject) return null;
+    return {
+      id: pick2.id,
+      host: "popup",
+      createdAt: pick2.draftAt,
+      // Read now rather than at popup-open: this is the view the user is leaving.
+      subject: { ...popupSubject, scroll: { x: window.scrollX, y: window.scrollY } },
+      body: normalizeDraft(ui.popupAttach.snapshot())
+    };
+  }
+  function exploreDraft(attach) {
+    if (!popupSubject) return null;
+    return {
+      id: `x${Date.now().toString(36)}`,
+      host: "popup",
+      createdAt: Date.now(),
+      subject: { ...popupSubject, scroll: { x: window.scrollX, y: window.scrollY } },
+      body: normalizeDraft(attach.snapshot())
+    };
+  }
+  function postDraft() {
+    const draft = currentDraft();
+    if (draft) post({ type: "ez:draft", pickId: draft.id, draft });
+  }
+  function armPick(host, id) {
+    if (ended || pick2) return false;
+    const attach = host === "popup" ? ui.popupAttach : null;
+    pick2 = {
+      id,
+      host,
+      suspended: false,
+      prevHighlight: highlightTarget,
+      draftAt: Date.now(),
+      scroll: { x: window.scrollX, y: window.scrollY }
+    };
+    post({ type: "ez:pick-armed", pickId: id, host });
+    if (attach) {
+      attach.beginRef(PICKING_LABEL);
+      pick2.suspended = suspendPopup();
+      postDraft();
+    }
+    document.documentElement.setAttribute("data-ez-pick", "");
+    hoverTarget = null;
+    moveHighlight(null);
+    scheduleRepaint();
+    return true;
+  }
+  function frameUnderPointer() {
+    const at = lastPointer;
+    const target = at ? document.elementFromPoint(at.x, at.y) : null;
+    hoverTarget = target && !isOwnUi(target) ? target : null;
+    moveHighlight(hoverTarget);
+  }
+  function setModHeld(next) {
+    if (modHeld === next) return;
+    modHeld = next;
+    if (!pick2) return;
+    document.documentElement.toggleAttribute("data-ez-pick-hot", next);
+    if (next) {
+      frameUnderPointer();
+      return;
+    }
+    hoverTarget = null;
+    moveHighlight(null);
+  }
+  var isModKey = (key) => key === "Meta" || key === "Control";
+  function endPick() {
+    const done = pick2;
+    pick2 = null;
+    endFraming();
+    document.documentElement.removeAttribute("data-ez-pick");
+    document.documentElement.removeAttribute("data-ez-pick-hot");
+    hoverTarget = null;
+    moveHighlight(done.prevHighlight);
+    scheduleRepaint();
+    return done;
+  }
+  function refFor(element) {
+    const anchor = buildAnchor(element);
+    return { anchor, label: shortAnchor(anchor) || describe(element) };
+  }
+  function landPick(e) {
+    if (!pick2) return;
+    const target = e.target instanceof Element ? e.target : document.elementFromPoint(e.clientX, e.clientY);
+    if (!target || isOwnUi(target)) return;
+    deliverPick(refFor(target));
+  }
+  function deliverPick(ref) {
+    const done = endPick();
+    if (done.host === "popup" && done.suspended) {
+      resumePopup(done);
+      ui.popupAttach?.resolveRef(ref);
+      post({ type: "ez:draft-done", pickId: done.id });
+      return;
+    }
+    post({ type: "ez:picked", pickId: done.id, ref, page: location.pathname });
+  }
+  function pagePoint(e) {
+    return { x: e.clientX + window.scrollX, y: e.clientY + window.scrollY };
+  }
+  function pageRect(rect) {
+    return {
+      x: rect.x + window.scrollX,
+      y: rect.y + window.scrollY,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function paintRegion() {
+    const box = framing ? regionFrom(framing.from, framing.to) : pick2 ? null : markedRegion;
+    if (!box) {
+      ui.region.style.display = "none";
+      return;
+    }
+    Object.assign(ui.region.style, {
+      display: "block",
+      top: `${box.y - window.scrollY}px`,
+      left: `${box.x - window.scrollX}px`,
+      width: `${box.width}px`,
+      height: `${box.height}px`
+    });
+    ui.regionSize.style.display = framing ? "block" : "none";
+    if (!framing) return;
+    ui.regionSize.textContent = `${box.width} \xD7 ${box.height}`;
+    const bottom = box.y - window.scrollY + box.height;
+    ui.regionSize.toggleAttribute("data-ez-inside", bottom > window.innerHeight - 24);
+  }
+  function startFraming(at) {
+    framing = { from: at, to: at };
+    pendingFrame = null;
+    document.documentElement.setAttribute("data-ez-framing", "");
+    document.getSelection()?.removeAllRanges();
+    moveHighlight(null);
+    paintRegion();
+  }
+  function endFraming() {
+    pendingFrame = null;
+    if (!framing) return;
+    framing = null;
+    document.documentElement.removeAttribute("data-ez-framing");
+    paintRegion();
+  }
+  var MAX_FRAMED = 16;
+  function elementsIn(box) {
+    const found = [];
+    const walk = (parent) => {
+      for (const child of parent.children) {
+        if (found.length >= MAX_FRAMED) return;
+        if (child.hasAttribute("data-ez-ui")) continue;
+        const rect = pageRect(child.getBoundingClientRect());
+        if (!rect.width || !rect.height) {
+          walk(child);
+          continue;
+        }
+        if (containsRect(box, rect)) {
+          found.push(child);
+          continue;
+        }
+        if (intersectsRect(box, rect)) walk(child);
+      }
+    };
+    walk(document.body);
+    return found;
+  }
+  function commonAncestor(elements) {
+    let node = elements[0] ?? null;
+    while (node && !elements.every((e) => node.contains(e))) node = node.parentElement;
+    return node;
+  }
+  function hostAt(page) {
+    const at = document.elementFromPoint(page.x - window.scrollX, page.y - window.scrollY);
+    return at && !isOwnUi(at) ? at : null;
+  }
+  function framedText(elements) {
+    return elements.map((e) => (e.textContent ?? "").replace(/\s+/g, " ").trim()).filter(Boolean).join(" / ").slice(0, 80);
+  }
+  function framedLabel(element) {
+    const text = (element.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 24);
+    return text ? `${describe(element)} \xB7 "${text}"` : describe(element);
+  }
+  function regionRef(box) {
+    const framed2 = elementsIn(box);
+    if (framed2.length <= 1) {
+      const host2 = framed2[0] ?? hostAt(centerOf(box));
+      if (host2) return refFor(host2);
+    }
+    const host = commonAncestor(framed2) ?? document.body;
+    const text = framedText(framed2);
+    const anchor = {
+      ...buildAnchor(host),
+      // The box the user drew, not the ancestor's: the ancestor is only how the box
+      // gets a file:line, and its own rect is usually far larger than the area.
+      rect: box,
+      ...framed2.length ? { contains: framed2.map(framedLabel), text: text || void 0 } : {}
+    };
+    return { anchor, label: shortAnchor(anchor) || describe(host) };
+  }
+  var regionViewportRect = (box) => new DOMRect(box.x - window.scrollX, box.y - window.scrollY, box.width, box.height);
+  function openRegionPopup(box) {
+    const framed2 = elementsIn(box);
+    const host = commonAncestor(framed2) ?? hostAt(centerOf(box)) ?? document.body;
+    const text = framedText(framed2);
+    const anchor = {
+      ...buildAnchor(host),
+      // The box the user drew, not the host's rect - same contract as a pick's
+      // region: `rect` with `contains` beside it is only ever that box.
+      rect: box,
+      ...framed2.length ? { contains: framed2.map(framedLabel), text: text || void 0 } : {}
+    };
+    markedRegion = box;
+    paintRegion();
+    openPopup(
+      { kind: "element", page: location.pathname, anchor },
+      () => regionViewportRect(box),
+      // The recorded anchor verbatim: the box is the annotation's meaning, and
+      // re-measuring the host at save time would overwrite it.
+      (comment, files, refs) => saveAnnotation("element", null, comment, files, refs, { anchor })
+    );
+  }
+  function cancelPick(reason) {
+    if (!pick2) return;
+    const done = endPick();
+    if (done.host === "popup") {
+      ui.popupAttach?.cancelRef();
+      if (done.suspended) resumePopup(done);
+    }
+    if (reason !== "abort") {
+      post({ type: "ez:pick-cancelled", pickId: done.id, reason, resumed: done.suspended });
+    }
+  }
+  function setMode(next) {
+    if (ended && next !== "off") return;
+    if (mode === next) return;
+    cancelPick("mode");
+    endFraming();
+    mode = next;
+    const root = document.documentElement;
+    if (next === "off") root.removeAttribute("data-ez-mode");
+    else root.setAttribute("data-ez-mode", next);
+    dismiss();
+    ui.selectionBubble?.remove();
+    ui.selectionBubble = null;
+    post({ type: "ez:mode", mode });
+  }
+  function onMouseMove(e) {
+    lastPointer = { x: e.clientX, y: e.clientY };
+    if (framing) {
+      if (!(e.buttons & 1)) {
+        endFraming();
+        return;
+      }
+      framing.to = pagePoint(e);
+      paintRegion();
+      return;
+    }
+    if (pendingFrame) {
+      if (!(e.buttons & 1)) {
+        pendingFrame = null;
+      } else {
+        const at = pagePoint(e);
+        if (!isRegion(regionFrom(pendingFrame, at))) return;
+        startFraming(pendingFrame);
+        framing.to = at;
+        paintRegion();
+        return;
+      }
+    }
+    if (pick2) setModHeld(e.metaKey || e.ctrlKey);
+    if (isOwnUi(e.target)) return;
+    if (pick2 && !modHeld) return;
+    if (!pick2 && (mode === "off" || mode === "region" || ui.popup || held)) return;
+    const run = pick2 ? null : liveSelectionRange();
+    const target = run ? selectionOwner(run) : e.target instanceof Element ? e.target : null;
+    if (target !== hoverTarget) {
+      hoverTarget = target;
+      moveHighlight(target);
+    }
+  }
+  function onMouseLeave() {
+    if (ui.popup || !hoverTarget) return;
+    if (!pick2 && liveSelectionRange()) return;
+    hoverTarget = null;
+    moveHighlight(null);
+  }
+  function onMouseDown(e) {
+    if (e.button !== 0 || isOwnUi(e.target)) return;
+    const doc = document.documentElement;
+    if (e.clientX >= doc.clientWidth || e.clientY >= doc.clientHeight) return;
+    if (pick2) {
+      const modified = e.metaKey || e.ctrlKey;
+      if (!modified && isTyping(e.target)) return;
+      if (modified) e.preventDefault();
+      pendingFrame = pagePoint(e);
+      return;
+    }
+    if (mode === "off") return;
+    if (ui.popup || held) {
+      e.preventDefault();
+      return;
+    }
+    if (mode !== "region") return;
+    e.preventDefault();
+    pendingFrame = pagePoint(e);
+  }
+  function onClick(e) {
+    if (isOwnUi(e.target)) return;
+    if (swallowClick) {
+      swallowClick = false;
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    if (pick2) {
+      if (!e.metaKey && !e.ctrlKey) return;
+      e.preventDefault();
+      e.stopPropagation();
+      landPick(e);
+      return;
+    }
+    if (mode === "off") return;
+    if (ui.popup || held) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    if (mode === "region") {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    const selection = window.getSelection();
+    if (selection && !selection.isCollapsed) return;
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target || isOwnUi(target)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    moveHighlight(target);
+    openPopup(
+      subjectOf("element", target),
+      () => target.getBoundingClientRect(),
+      (comment, files, refs) => saveAnnotation("element", target, comment, files, refs),
+      null,
+      target
+    );
+  }
+  function onMouseUp(e) {
+    pendingFrame = null;
+    if (framing) {
+      const box = regionFrom(framing.from, pagePoint(e));
+      endFraming();
+      if (!isRegion(box)) return;
+      swallowClick = true;
+      if (pick2) {
+        deliverPick(regionRef(box));
+        return;
+      }
+      if (mode !== "region" || ui.popup || held) return;
+      openRegionPopup(box);
+      return;
+    }
+    if (pick2 || mode === "off" || mode === "region" || ui.popup || held) return;
+    setTimeout(() => {
+      ui.selectionBubble?.remove();
+      ui.selectionBubble = null;
+      const range = liveSelectionRange();
+      if (!range) return;
+      const container = selectionOwner(range);
+      if (!container) return;
+      const text = range.toString().trim();
+      const rect = range.getBoundingClientRect();
+      const bubble = el("button", "ez-select-btn");
+      bubble.append(icon(TextSelectIcon, 14), document.createTextNode("\u6A19\u8A3B\u9078\u53D6\u6587\u5B57"));
+      Object.assign(bubble.style, {
+        top: `${Math.max(4, rect.bottom + window.scrollY + 6)}px`,
+        left: `${Math.max(4, rect.left + window.scrollX)}px`
+      });
+      bubble.onclick = () => {
+        bubble.remove();
+        ui.selectionBubble = null;
+        openPopup(
+          subjectOf("text", container, { selectedText: text }),
+          () => range.getBoundingClientRect(),
+          (comment, files, refs) => saveAnnotation("text", container, comment, files, refs, { selectedText: text }),
+          range
+        );
+      };
+      document.body.appendChild(bubble);
+      ui.selectionBubble = bubble;
+    }, 0);
+  }
+  function isTyping(target) {
+    if (!(target instanceof HTMLElement)) return false;
+    return target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+  }
+  function onScrollAttempt(e) {
+    const w = e.type === "wheel" ? e : null;
+    if (w && (w.metaKey || w.ctrlKey) && window.parent !== window) {
+      e.preventDefault();
+      const unit = w.deltaMode === 1 ? 16 : w.deltaMode === 2 ? window.innerHeight : 1;
+      post({
+        type: "ez:wheel",
+        dx: w.deltaX * unit,
+        dy: w.deltaY * unit,
+        ...link.kind === "relay" ? { zoom: true, at: { x: w.clientX, y: w.clientY } } : {}
+      });
+      return;
+    }
+    if (pick2 || !popupLive() && !held || isOwnUi(e.target)) return;
+    e.preventDefault();
+  }
+  function onKeyDown(e) {
+    if (isModKey(e.key)) {
+      setModHeld(true);
+      return;
+    }
+    if (e.key === "Escape") {
+      escape();
+      return;
+    }
+    if (pick2 || ui.popup || isTyping(e.target)) return;
+    post({ type: "ez:key", chord: { key: e.key, metaKey: e.metaKey, ctrlKey: e.ctrlKey } });
+  }
+  function onScroll(e) {
+    scheduleRepaint();
+    if (e.target !== document && e.target !== document.documentElement) return;
+    cancelAnimationFrame(scrollRaf);
+    scrollRaf = requestAnimationFrame(reportScroll);
+  }
+  function reportScroll() {
+    if (following(performance.now(), appliedScrollAt)) return;
+    appliedScrollAt = null;
+    const range = scrollRange(document.documentElement.scrollHeight, window.innerHeight);
+    const ratio = scrollRatio(window.scrollY, range);
+    if (ratio === null) return;
+    post({ type: "ez:scroll", ratio });
+  }
+  function scrollToRatio(ratio) {
+    const range = scrollRange(document.documentElement.scrollHeight, window.innerHeight);
+    if (range <= 0) return;
+    const target = ratio * range;
+    if (Math.abs(target - window.scrollY) < 0.5) return;
+    appliedScrollAt = performance.now();
+    window.scrollTo({ top: target, left: window.scrollX, behavior: "instant" });
+  }
+  function here() {
+    return location.pathname + location.search + location.hash;
+  }
+  function watchLocation() {
+    let url = here();
+    const report = () => {
+      if (here() === url) return;
+      url = here();
+      post({ type: "ez:page", page: location.pathname, url });
+    };
+    const pushState = history.pushState.bind(history);
+    const replaceState = history.replaceState.bind(history);
+    const reporting = (write) => (data, unused, to) => {
+      write(data, unused, to);
+      report();
+    };
+    history.pushState = reporting(framed ? replaceState : pushState);
+    history.replaceState = reporting(replaceState);
+    window.addEventListener("popstate", report);
+    window.addEventListener("hashchange", report);
+  }
+  function linkTarget(e) {
+    if (e.defaultPrevented || e.button !== 0) return null;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return null;
+    const anchor = e.target instanceof Element ? e.target.closest("a") : null;
+    if (!(anchor instanceof HTMLAnchorElement)) return null;
+    if (isOwnUi(anchor) || !anchor.hasAttribute("href") || anchor.hasAttribute("download")) {
+      return null;
+    }
+    const target = anchor.getAttribute("target");
+    if (target && target !== "_self") return null;
+    let url;
+    try {
+      url = new URL(anchor.href);
+    } catch {
+      return null;
+    }
+    if (url.origin !== location.origin) return null;
+    return url.pathname + url.search + url.hash;
+  }
+  function onNavClick(e) {
+    if (link.kind === "relay") {
+      const href = e.target?.closest?.("a[href]")?.getAttribute("href");
+      if (href && !href.startsWith("#")) e.preventDefault();
+      return;
+    }
+    const to = linkTarget(e);
+    if (!to) return;
+    e.preventDefault();
+    post({ type: "ez:navigate", url: to });
+  }
+  function boot() {
+    watchLocation();
+    ui.region.append(ui.regionSize);
+    document.body.append(
+      ui.selection,
+      ui.highlight,
+      ui.badge,
+      ui.pin,
+      ui.markers,
+      ui.region
+    );
+    moveHighlight(null);
+    movePin(null);
+    document.addEventListener("mousedown", onMouseDown, true);
+    document.addEventListener("mousemove", onMouseMove, true);
+    document.addEventListener("mouseleave", onMouseLeave);
+    document.addEventListener("click", onClick, true);
+    if (framed) document.addEventListener("click", onNavClick);
+    document.addEventListener("mouseup", onMouseUp, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener(
+      "keyup",
+      (e) => {
+        if (isModKey(e.key)) setModHeld(false);
+      },
+      true
+    );
+    window.addEventListener("blur", () => {
+      setModHeld(false);
+      endFraming();
+    });
+    document.addEventListener("wheel", onScrollAttempt, { passive: false, capture: true });
+    document.addEventListener("touchmove", onScrollAttempt, { passive: false, capture: true });
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    new MutationObserver(scheduleRepaint).observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    window.addEventListener("message", (e) => {
+      if (!link.fromShell(e)) return;
+      const data = e.data;
+      if (data?.type === "ez:variant" && data.exploreId && data.anchor !== void 0) {
+        swapper.set({
+          exploreId: data.exploreId,
+          anchor: data.anchor,
+          html: data.html ?? null
+        });
+      }
+      if (data?.type === "ez:variants-clear") swapper.clear();
+      if (data?.type === "ez:can-explore") canExplore = data.on === true;
+      if (data?.type === "ez:in-explore") inExplore = data.on === true;
+      if (data?.type === "ez:set-mode") setMode(data.mode ?? "off");
+      if (data?.type === "ez:escape") escape();
+      if (data?.type === "ez:viewport") {
+        viewportPreset = data.preset;
+        const scoped = Boolean(data.scoped);
+        if (scoped !== scopedToDevice) {
+          scopedToDevice = scoped;
+          scheduleRepaint();
+        }
+        setFrameZoom(typeof data.zoom === "number" ? data.zoom : 1);
+      }
+      if (data?.type === "ez:pick" && data.pickId) {
+        armPick(data.host ?? "note", data.pickId);
+      }
+      if (data?.type === "ez:hold") {
+        held = Boolean(data.held);
+        if (held) {
+          endFraming();
+          hoverTarget = null;
+          moveHighlight(null);
+          ui.selectionBubble?.remove();
+          ui.selectionBubble = null;
+        }
+      }
+      if (data?.type === "ez:scroll-to" && typeof data.ratio === "number") scrollToRatio(data.ratio);
+      if (data?.type === "ez:pick-abort") cancelPick("abort");
+      if (data?.type === "ez:pick-resolve" && data.pickId) {
+        if (pick2?.id === data.pickId && pick2.host === "popup" && pick2.suspended && data.ref) deliverPick(data.ref);
+        else if (data.draft) restoreDraft(data.draft);
+      }
+      if (data?.type === "ez:restore" && data.draft) restoreDraft(data.draft);
+    });
+    link.subscribe((snapshot) => {
+      annotations = snapshot.annotations;
+      ended = snapshot.state === "ended";
+      if (ended) {
+        cancelPick("ended");
+        setMode("off");
+      }
+      scheduleRepaint();
+    });
+    post({ type: "ez:ready", page: location.pathname, url: here() });
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+})();