@cychien/ezdesign 0.8.1 → 0.9.1

package/dist/overlay.js

@@ -4,14 +4,13 @@
   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.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/Add01Icon.js
+  // 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" }]
   ];
-  var Add01Icon_default = Add01Icon;
 
-  // node_modules/.pnpm/@hugeicons+core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/AlignSelectionIcon.js
+  // 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" }],
@@ -19,35 +18,40 @@
     ["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" }]
   ];
-  var AlignSelectionIcon_default = AlignSelectionIcon;
 
-  // node_modules/.pnpm/@hugeicons+core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/TextSelectIcon.js
+  // 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" }]
   ];
-  var TextSelectIcon_default = TextSelectIcon;
 
-  // node_modules/.pnpm/@hugeicons+core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/MagicWand01Icon.js
+  // 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" }]
   ];
-  var MagicWand01Icon_default = MagicWand01Icon;
 
-  // node_modules/.pnpm/@hugeicons+core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/File02Icon.js
+  // 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" }]
   ];
-  var File02Icon_default = File02Icon;
 
   // 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) {
@@ -59,6 +63,7 @@
       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();
   }
@@ -87,7 +92,7 @@
     return max + 1;
   }
   function draftFileIds(body) {
-    return body.flatMap((n) => n.t === "file" && n.id ? [n.id] : []);
+    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] : []);
@@ -142,6 +147,7 @@
   // 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;
@@ -168,6 +174,7 @@
   }) {
     const doc = editable.ownerDocument;
     const view = doc.defaultView;
+    const listId = `ez-slash-${++menuCount}`;
     let menu = null;
     let trigger = null;
     let shown = [];
@@ -211,6 +218,7 @@
         item.toggleAttribute("data-active", i === active);
         item.setAttribute("aria-selected", String(i === active));
       });
+      editable.setAttribute("aria-activedescendant", `${listId}-${active}`);
     }
     function render() {
       if (!menu) return;
@@ -218,10 +226,13 @@
       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;
@@ -255,6 +266,7 @@
     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);
     }
@@ -263,6 +275,8 @@
       menu.remove();
       menu = null;
       trigger = null;
+      editable.removeAttribute("aria-controls");
+      editable.removeAttribute("aria-activedescendant");
       doc.removeEventListener("selectionchange", onSelectionChange);
       editable.removeEventListener("blur", onBlur);
       return true;
@@ -351,17 +365,43 @@
 
   // 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({
-    api,
+    attachments,
     mk,
     className,
     placeholder,
     onChange,
     commands,
-    skills
+    skills,
+    chooseLibrary
   }) {
     const editable = mk("div", className);
     editable.setAttribute("contenteditable", "plaintext-only");
@@ -391,9 +431,19 @@
           label: "File",
           hint: "\u9644\u52A0\u6A94\u6848",
           keywords: ["file", "attach", "upload", "\u6A94\u6848", "\u9644\u4EF6", "\u5716\u7247"],
-          icon: File02Icon_default,
+          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 ?? []
       ]
     });
@@ -406,7 +456,6 @@
     });
     const uploading = /* @__PURE__ */ new Set();
     let errorTimer = 0;
-    const chips = () => [...editable.querySelectorAll(`[${CHIP_ATTR}]`)];
     function showError(message) {
       error.textContent = message;
       error.hidden = false;
@@ -416,16 +465,21 @@
       }, 6e3);
     }
     function paintEmpty() {
-      const empty = !editable.textContent?.trim() && chips().length === 0;
+      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) {
-      fetch(`${api}/attachments/${id}`, { method: "DELETE" }).catch(() => {
-      });
+      attachments.discard(id);
     }
     function makeChip(name, attr, value, glyph) {
       const chip = mk("span", "ez-chip");
@@ -439,19 +493,24 @@
       if (!value) chip.classList.add("ez-chip-pending");
       return chip;
     }
-    const fileChip = (name, id = "") => makeChip(name, CHIP_ATTR, id, File02Icon_default);
+    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_default : AlignSelectionIcon_default
+        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) {
@@ -489,20 +548,7 @@
     }
     async function upload(chip, file) {
       try {
-        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}`);
-        }
-        const saved = await res.json();
+        const saved = await attachments.upload(file);
         if (!editable.contains(chip)) {
           del(saved.id);
           return;
@@ -518,6 +564,26 @@
         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] : [];
     }
@@ -566,6 +632,7 @@
         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,
@@ -590,7 +657,7 @@
       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));
+    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();
@@ -673,7 +740,7 @@
       },
       discard() {
         slash.close();
-        for (const id of chips().map((c) => c.getAttribute(CHIP_ATTR))) if (id) del(id);
+        for (const id of draftFileIds(snapshot())) del(id);
         uploading.clear();
         editable.textContent = "";
         changed();
@@ -703,6 +770,10 @@
         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;
@@ -731,10 +802,144 @@
       return null;
     }
   }
+  function parsePick(raw) {
+    try {
+      return JSON.parse(raw ?? "[]");
+    } catch {
+      return [];
+    }
+  }
 
-  // src/client/pick.ts
-  function modLabel(userAgent) {
-    return /Mac|iP(hone|ad|od)/.test(userAgent) ? "\u2318" : "Ctrl";
+  // 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
@@ -1154,6 +1359,7 @@
     }
   })();
   var API = `${PREFIX}/api`;
+  var link = linkFromScript(document.currentScript, API);
   var SOURCE_ATTR2 = "data-ez-source";
   var mode = "off";
   var ended = false;
@@ -1200,10 +1406,6 @@
     badge: el("div", "ez-badge"),
     pin: el("div", "ez-pin"),
     markers: el("div", "ez-markers"),
-    /** Shown only while picking: a wash at the edges of the viewport, and a pill
-     *  saying what the modifier does. The page stays clickable underneath, so the
-     *  chrome is the only thing telling the user this moment is different. */
-    banner: el("div", "ez-pick-banner"),
     /** The box being dragged, with its size read out in the corner. */
     region: el("div", "ez-region"),
     regionSize: el("div", "ez-region-size"),
@@ -1309,7 +1511,9 @@
         height: Math.round(rect.height)
       },
       viewport: { width: window.innerWidth, height: window.innerHeight, preset: viewportPreset },
-      page: location.pathname
+      // 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));
@@ -1481,7 +1685,7 @@
     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_default, 14);
+    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");
@@ -1491,11 +1695,12 @@
     const exploreTarget = subject.kind === "element" ? exploreElement : null;
     let exploring = false;
     const exploreHead = el("div", "ez-explore-head");
-    exploreHead.append(icon(MagicWand01Icon_default, 15), el("span", "ez-explore-title"));
+    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({
-      api: API,
+      attachments: link.attachments,
+      ...link.chooseLibrary ? { chooseLibrary: link.chooseLibrary } : {},
       mk: el,
       className: "ez-input",
       placeholder: COMPOSE_PLACEHOLDER,
@@ -1512,7 +1717,7 @@
           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_default,
+          icon: AlignSelectionIcon,
           run: () => void armPick("popup", newPickId())
         },
         {
@@ -1520,7 +1725,7 @@
           label: "Explore",
           hint: "\u63A2\u7D22\u6A23\u5F0F",
           keywords: ["explore", "variant", "ui", "\u63A2\u7D22", "\u6A23\u5F0F", "\u7248\u672C"],
-          icon: MagicWand01Icon_default,
+          icon: MagicWand01Icon,
           enabled: () => canExplore && !!exploreTarget && !exploring,
           run: () => setExploring(true)
         }
@@ -1630,12 +1835,7 @@
   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");
-    const res = await fetch(`${API}/annotations`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ kind, comment, attachments, references, anchor })
-    });
-    if (!res.ok) throw new Error(`annotation rejected (${res.status})`);
+    await link.annotate({ kind, comment, attachments, references, anchor });
   }
   function corroborates(hit, anchor) {
     if (!anchor.source) return true;
@@ -1785,12 +1985,14 @@
   function renderMarkers() {
     ui.markers.textContent = "";
     if (pick2) return;
-    const relevant = annotations.filter((a) => a.anchor.page === location.pathname && madeHere(a));
-    relevant.forEach((a, i) => {
+    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(i + 1);
+      marker.textContent = String(a.n ?? annotations.indexOf(a) + 1);
       marker.title = a.comment;
       const r = MARKER_SIZE / 2;
       let top = at.top - r;
@@ -1815,12 +2017,11 @@
       paintPopup();
     });
   }
-  var MOD_LABEL = modLabel(navigator.userAgent);
   var PICKING_LABEL = "\u9078\u53D6\u4E2D\u2026";
   var pickSeq = 0;
   var newPickId = () => `p${++pickSeq}-${Date.now().toString(36)}`;
   function post(message) {
-    window.parent?.postMessage(message, location.origin);
+    link.post(message);
   }
   function suspendPopup() {
     if (!ui.popup) return false;
@@ -1843,19 +2044,6 @@
     ui.popupAttach?.editable.focus();
   }
   var inExplore = false;
-  function paintPickChrome() {
-    const on = Boolean(pick2);
-    ui.banner.style.display = on ? "flex" : "none";
-    if (!pick2) return;
-    const back = pick2.returnTo && pick2.returnTo !== location.pathname ? pick2.returnTo : null;
-    ui.banner.textContent = "";
-    const text = el("span", "ez-pick-text");
-    text.textContent = back ? `${MOD_LABEL} + \u9EDE\u64CA\u5143\u7D20\u6216\u76F4\u63A5\u62D6\u66F3\u6846\u9078\u30FB\u5B8C\u6210\u5F8C\u56DE\u5230 ${back}` : `${MOD_LABEL} + \u9EDE\u64CA\u5143\u7D20\uFF0C\u6216\u62D6\u66F3\u6846\u9078\u7BC4\u570D`;
-    const cancel = el("button", "ez-pick-cancel");
-    cancel.textContent = "\u53D6\u6D88";
-    cancel.onclick = () => cancelPick("escape");
-    ui.banner.append(icon(AlignSelectionIcon_default, 14), text, cancel);
-  }
   function currentDraft() {
     if (!pick2 || pick2.host !== "popup" || !ui.popupAttach || !popupSubject) return null;
     return {
@@ -1881,7 +2069,7 @@
     const draft = currentDraft();
     if (draft) post({ type: "ez:draft", pickId: draft.id, draft });
   }
-  function armPick(host, id, returnTo) {
+  function armPick(host, id) {
     if (ended || pick2) return false;
     const attach = host === "popup" ? ui.popupAttach : null;
     pick2 = {
@@ -1889,7 +2077,6 @@
       host,
       suspended: false,
       prevHighlight: highlightTarget,
-      returnTo,
       draftAt: Date.now(),
       scroll: { x: window.scrollX, y: window.scrollY }
     };
@@ -1902,7 +2089,6 @@
     document.documentElement.setAttribute("data-ez-pick", "");
     hoverTarget = null;
     moveHighlight(null);
-    paintPickChrome();
     scheduleRepaint();
     return true;
   }
@@ -1933,7 +2119,6 @@
     document.documentElement.removeAttribute("data-ez-pick-hot");
     hoverTarget = null;
     moveHighlight(done.prevHighlight);
-    paintPickChrome();
     scheduleRepaint();
     return done;
   }
@@ -2102,7 +2287,7 @@
     dismiss();
     ui.selectionBubble?.remove();
     ui.selectionBubble = null;
-    window.parent?.postMessage({ type: "ez:mode", mode }, location.origin);
+    post({ type: "ez:mode", mode });
   }
   function onMouseMove(e) {
     lastPointer = { x: e.clientX, y: e.clientY };
@@ -2231,7 +2416,7 @@
       const text = range.toString().trim();
       const rect = range.getBoundingClientRect();
       const bubble = el("button", "ez-select-btn");
-      bubble.append(icon(TextSelectIcon_default, 14), document.createTextNode("\u6A19\u8A3B\u9078\u53D6\u6587\u5B57"));
+      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`
@@ -2259,7 +2444,12 @@
     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 });
+      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;
@@ -2340,6 +2530,11 @@
     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();
@@ -2354,12 +2549,10 @@
       ui.badge,
       ui.pin,
       ui.markers,
-      ui.region,
-      ui.banner
+      ui.region
     );
     moveHighlight(null);
     movePin(null);
-    paintPickChrome();
     document.addEventListener("mousedown", onMouseDown, true);
     document.addEventListener("mousemove", onMouseMove, true);
     document.addEventListener("mouseleave", onMouseLeave);
@@ -2386,7 +2579,7 @@
       subtree: true
     });
     window.addEventListener("message", (e) => {
-      if (e.origin !== location.origin) return;
+      if (!link.fromShell(e)) return;
       const data = e.data;
       if (data?.type === "ez:variant" && data.exploreId && data.anchor !== void 0) {
         swapper.set({
@@ -2410,7 +2603,7 @@
         setFrameZoom(typeof data.zoom === "number" ? data.zoom : 1);
       }
       if (data?.type === "ez:pick" && data.pickId) {
-        armPick(data.host ?? "note", data.pickId, data.returnTo);
+        armPick(data.host ?? "note", data.pickId);
       }
       if (data?.type === "ez:hold") {
         held = Boolean(data.held);
@@ -2424,11 +2617,13 @@
       }
       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);
     });
-    const events = new EventSource(`${API}/events`);
-    events.onmessage = (e) => {
-      const snapshot = JSON.parse(e.data);
+    link.subscribe((snapshot) => {
       annotations = snapshot.annotations;
       ended = snapshot.state === "ended";
       if (ended) {
@@ -2436,7 +2631,7 @@
         setMode("off");
       }
       scheduleRepaint();
-    };
+    });
     post({ type: "ez:ready", page: location.pathname, url: here() });
   }
   if (document.readyState === "loading") {