@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/components/image/page.mjs

@@ -0,0 +1,385 @@
+import { MEDIA_CLASS } from "../../../shared/components/index.mjs";
+import { SPAN, SPAN_SIZE, UPLOAD_LIMITS, sizeLimit } from "../../../shared/media.mjs";
+import { gestureLock } from "../../page/gesture.mjs";
+import { openCrop } from "./crop.mjs";
+import { openViewer } from "./viewer.mjs";
+import { svg } from "../icons.mjs";
+import { closePopup, openPopup } from "../../page/emoji-picker/support.mjs";
+import { ICONS } from "../../page/menu.mjs";
+import { onSettle, own } from "../../page/overlays.mjs";
+import { drawAt, shapeOf } from "../../page/overlay-layer.mjs";
+import { keptByComponent } from "../../page/page-objects.mjs";
+import { addStyle, element } from "../../page/ui.mjs";
+import { TOOL_ICONS } from "../media/icons.mjs";
+import { barClass } from "../placeholder-bar.mjs";
+import { captionNode, captionOf, fileOf, showFile } from "../media/parts.mjs";
+import { SNAP, columnRoom, readingRoom } from "../media/size.mjs";
+import { mediaBar, toolButton } from "../media/toolbar.mjs";
+import { ALIGN, cropOf, imageOf, newImage } from "./index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { zoomable } from "../../../shared/zoom.mjs";
+
+// 图片 on the page (notion-lite's src/blocks/image/edit/, Notion's media block). A new image (the "/"
+// menu's 图片, made from an empty block: convert.mjs) is a placeholder, a gray bar saying 添加图片,
+// until a picture is chosen in the 上传 / 链接 menu (media-menu/) that opens below it at once and on
+// a click (../media/page.mjs): a file (an image, 10 MB at most) goes to the report's folder, a link's picture is
+// downloaded there by the server (an export never reaches the web); either is one undo step. The
+// picture shows where the server serves the folder; what the file is stays in data-ge-src.
+// With the pointer on a picture, Notion's toolbar stands at its top right (对齐, 标题, 展开, 更多:
+// the block menu) and a handle at each side; dragging one resizes the picture (a share of the reading
+// width, at most the width it stands in, both sides at once while centered; snapping to the whole of
+// that width, a share of 1: styles/sizes.css), one undo step on
+// letting go (Esc puts it back). 标题 shows its caption (empty ones show only then) with the caret
+// in it; Enter there makes a paragraph after the image. A double-click on the picture (or on any
+// other picture that opens large: a table's, a card's), or 展开, shows it alone over the page (a
+// click or Esc closes it). The block menu has 替换图片, 标题, 对齐 ›
+// and 恢复原始大小 (menuItems). A picture pasted (an image file on the clipboard) becomes an image
+// below the block the caret is in (`acceptsFile`, `fromFiles`).
+
+const MAX_BYTES = UPLOAD_LIMITS.image;
+// 裁剪图片's row: a crop mark, drawn as the menus' other icons are.
+const CROP_ICON = svg('<path d="M6 2.75V13a1 1 0 0 0 1 1h10.25"/><path d="M2.75 6H13a1 1 0 0 1 1 1v10.25"/>');
+
+const STYLE = `
+  /* The placeholder of an image with no picture yet (Notion's 605415): every empty block's, served with the page (../placeholder.mjs). */
+  [data-ge-editing] .doc-image > img { cursor: default; }
+  /* The handles (Notion's 681598); the toolbar is the media blocks' (../media/toolbar.mjs). */
+  .ge-layer > .ge-image-handle { pointer-events: auto; }
+  .ge-image-align { display: flex; align-items: center; padding: 2px; border-radius: 6px; background: var(--c-popBac); box-shadow: var(--c-shaOutLg); }
+  .ge-image-align-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--ca-borSecTra); }
+  .ge-image-handle { display: flex; align-items: center; justify-content: center; width: 15px; cursor: col-resize; }
+  /* A plain gray bar, no border (the embed's corners the same). */
+  .ge-image-handle::after { content: ""; width: 4px; height: 40px; max-height: 50%; border-radius: 4px; background: light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); transition: background 120ms ease; }
+  .ge-image-handle:hover::after, html[data-ge-image-resize] .ge-image-handle::after { background: light-dark(rgb(55 53 47 / 60%), rgb(255 255 255 / 62%)); }
+  ${gestureLock("data-ge-image-resize", { cursor: "col-resize" })}
+`;
+
+const ALIGNS = [["left", t("左对齐"), "alignLeft"], ["center", t("居中对齐"), "alignCenter"], ["right", t("右对齐"), "alignRight"]];
+const sideOf = (figure) => figure.classList.contains(ALIGN[0]) ? "left" : figure.classList.contains(ALIGN[1]) ? "right" : "center";
+const sideLook = (side) => ({ classes: { [ALIGN[0]]: side === "left", [ALIGN[1]]: side === "right" } });
+
+// A picture of the report's folder (`path`, assets/<file>) where the server serves it (`url`), and an
+// empty caption; cropped (`cropped`: { original, crop }), the picture it was cropped from and what of it is kept.
+function pictureParts(doc, path, url, caption = "", cropped = null) {
+  const img = doc.createElement("img");
+  showFile(img, "src", path, url);
+  img.alt = "";
+  img.draggable = false;
+  if (cropped) {
+    img.setAttribute("data-original", cropped.original);
+    img.setAttribute("data-crop", cropped.crop);
+  }
+  return [img, captionNode(doc, caption)];
+}
+
+/**
+ * Images on the page, with what the editor gives them: the media blocks' shared parts (`pages.media`:
+ * ../media/page.mjs block("image"): the undo steps, say, active(), select, the block menu, the
+ * upload of kind "image", the menu, the caption) and assetUrl(path) (where the server serves a file
+ * of the report's folder).
+ */
+export function create({ pages, assetUrl }) {
+  const media = pages.media.block("image");
+  const { say, active, look, openMenu } = media;
+  addStyle(STYLE);
+
+  // ---------- a picture chosen ----------
+
+  /** The 上传 / 链接 menu of an image, below its placeholder (or its picture: 替换图片). */
+  const pick = (figure) => media.pick(figure, {
+    width: 360, // Notion's 540 stood far out past the block
+    tabs: [{ key: "upload", label: t("上传") }, { key: "link", label: t("链接") }],
+    upload: { label: t("上传文件"), accept: "image/*" },
+    link: { placeholder: t("粘贴图片链接…"), button: t("嵌入图片"), caption: t("适用于网络上的任何图片。") },
+    onUpload: (file) => uploadInto(figure, file),
+    onEmbed: (url) => fetchInto(figure, url),
+  }, (each) => each.querySelector(`:scope > .${barClass(MEDIA_CLASS.image)}`) ?? imageOf(each) ?? each);
+
+  async function uploadInto(figure, file, options = {}) {
+    if (!/^image\//.test(file.type)) return say(t("很抱歉，不支持该文件类型。"), "error");
+    if (file.size > MAX_BYTES) return say(t("图片太大（最多 {0}）。", sizeLimit("image")), "error");
+    return media.attempt(figure, t("正在上传…"), t("无法上传这张图片"), async () => {
+      const pixels = await pixelSize(file);
+      place(figure, (await media.uploadFile(file)).path, pixels, options);
+    });
+  }
+
+  // A picture's size in pixels ({ width, height }), or null when the browser cannot read it.
+  async function pixelSize(file) {
+    try {
+      const bitmap = await createImageBitmap(file);
+      const size = { width: bitmap.width, height: bitmap.height };
+      bitmap.close();
+      return size;
+    } catch {
+      return null;
+    }
+  }
+  // The share of the reading width that `pixels` take on this screen, or "" for the kit's own size:
+  // a picture as wide as the width `figure` stands in or wider, or one that would stand taller than
+  // 80% of this window (a phone's screenshot), which the kit shows at most that tall on every
+  // reader's window (styles/image.css), where a span would hold it at its width however tall.
+  function naturalShare(figure, pixels) {
+    if (!pixels?.width) return "";
+    const room = columnRoom(figure);
+    const ratio = devicePixelRatio || 1;
+    const width = pixels.width / ratio;
+    if (!(room > 0) || width >= room || pixels.height / ratio > innerHeight * 0.8) return "";
+    return String(Math.max(SPAN_SIZE.min, Math.round((width / readingRoom(figure)) * 1000) / 1000));
+  }
+
+  const fetchInto = (figure, url, options = {}) => media.attempt(figure, t("正在下载…"), t("无法下载这张图片"), async () => {
+    place(figure, (await media.uploadUrl(url)).path, null, options);
+  });
+
+  // The picture in: a new image in the place of the placeholder, or of the image that had one
+  // (替换图片, with its caption, side and width), never the same element, so that undo brings back
+  // what stood there (a placeholder never written, an image as it was) and the file loses the new
+  // one. One undo step; the image selected.
+  //
+  // A new picture from this computer (`pixels`: its size in pixels) shows as large as it was on the
+  // screen it was taken on (D7 of the polish plan): its pixels over this screen's device pixel ratio,
+  // as a share of the reading width, never past the width it stands in (a screenshot on a high-density
+  // screen once showed twice its size); one that tall is left to the kit's 80% of the window
+  // (naturalShare). A picture replaced keeps the width the old one had.
+  // `cropped`: { original, crop } said on the picture (a crop's); `quiet`: its own word said by the caller.
+  function place(figure, path, pixels = null, { cropped = null, quiet = false, pasted = false } = {}) {
+    if (!figure.isConnected) return;
+    const doc = figure.ownerDocument;
+    const replacing = Boolean(imageOf(figure));
+    const next = newImage(doc);
+    next.className = figure.className;
+    const span = figure.style.getPropertyValue(SPAN) || (replacing ? "" : naturalShare(figure, pixels));
+    if (span) next.style.setProperty(SPAN, span);
+    next.replaceChildren(...pictureParts(doc, path, assetUrl(path), captionOf(figure)?.innerHTML ?? "", cropped));
+    media.place(figure, next, { replacing, pasted });
+    if (replacing && !quiet) say(t("已替换图片 · Ctrl+Z 撤销"));
+  }
+
+  // ---------- the toolbar and the handles ----------
+
+  let hovered = null; // the image the pointer is on
+  let resizing = null; // { figure, side, x, start, room, before, centered }
+  const bar = mediaBar(t("图片操作"));
+  const tool = (label, tip, icon, run) => toolButton({ label, tip, icon, run, alive: () => hovered?.isConnected });
+  const tools = {
+    align: tool(t("对齐方式"), t("设置区块对齐"), () => TOOL_ICONS[{ left: "alignLeft", center: "alignCenter", right: "alignRight" }[sideOf(hovered)]], (button) => alignPopup(hovered, button)),
+    caption: tool(t("标题@caption"), t("添加标题"), TOOL_ICONS.caption, () => media.caption(hovered)),
+    expand: tool(t("展开"), t("全屏查看"), TOOL_ICONS.expand, () => view(hovered)),
+    more: tool(t("更多"), t("打开区块操作菜单"), TOOL_ICONS.more, (button) => {
+      const rect = button.getBoundingClientRect();
+      openMenu(hovered, { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom });
+    }),
+  };
+  bar.append(...Object.values(tools));
+  const handles = { left: element("div", { class: "ge-image-handle", "data-side": "left" }), right: element("div", { class: "ge-image-handle", "data-side": "right" }) };
+
+  // The toolbar and the handles over the picture of `figure`, or away.
+  function show(figure) {
+    hovered = figure;
+    const img = figure && imageOf(figure);
+    const shape = img && shapeOf(img);
+    if (!shape) {
+      hovered = null;
+      for (const node of [bar, handles.left, handles.right]) node.remove();
+      return;
+    }
+    const alive = () => hovered === figure && figure.isConnected;
+    for (const node of [bar, handles.left, handles.right]) own(node, "image tools", { owner: figure, alive });
+    for (const button of Object.values(tools)) button.draw();
+    const { rect } = shape;
+    tools.align.style.display = figure.style.getPropertyValue(SPAN).trim() === "1" ? "none" : ""; // a picture as wide as it can be has no side
+    if (bar.parentNode !== shape.layer) shape.layer.append(bar); // in the page before its width is measured
+    drawAt(bar, shape.layer, rect.right - 4 - bar.offsetWidth, rect.top + 4);
+    for (const [side, handle] of Object.entries(handles)) {
+      handle.style.height = `${Math.round(rect.bottom - rect.top)}px`;
+      drawAt(handle, shape.layer, side === "left" ? rect.left : rect.right - 15, rect.top);
+    }
+  }
+
+  document.addEventListener("mousemove", (event) => {
+    if (resizing || [bar, handles.left, handles.right].some((node) => node.contains(event.target))) return;
+    const figure = active() && !keptByComponent(event.target) ? event.target.closest?.("main figure.doc-image") ?? null : null;
+    if (figure !== hovered) show(figure && imageOf(figure) ? figure : null);
+  }, { passive: true, capture: true });
+  addEventListener("scroll", () => { if (hovered && !resizing) show(hovered); }, { passive: true, capture: true });
+  document.documentElement.addEventListener("mouseleave", () => { if (!resizing) show(null); });
+  // The hovered picture taken off the page by an undo, a redo or a commit: the tools go at once, not at the next pointer move.
+  onSettle(() => { if (hovered && !hovered.isConnected && !resizing) show(null); });
+
+  // Dragging a handle: the picture's width as a share of the reading width, at most the width it
+  // stands in (1 when it reaches that), live; one undo step on letting go.
+  for (const [side, handle] of Object.entries(handles)) {
+    handle.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0 || !hovered) return;
+      event.preventDefault();
+      const figure = hovered;
+      const room = columnRoom(figure);
+      resizing = { figure, side, x: event.clientX, start: imageOf(figure).getBoundingClientRect().width, room, page: readingRoom(figure), before: figure.style.getPropertyValue(SPAN), centered: sideOf(figure) === "center" };
+      handle.setPointerCapture?.(event.pointerId);
+      document.documentElement.setAttribute("data-ge-image-resize", "");
+    });
+    handle.addEventListener("pointermove", (event) => {
+      if (!resizing) return;
+      const { figure, x, start, room, page, centered } = resizing;
+      const delta = (event.clientX - x) * (side === "right" ? 1 : -1) * (centered ? 2 : 1);
+      const width = Math.max(Math.min(room, page * SPAN_SIZE.min), Math.min(room, start + delta));
+      figure.style.setProperty(SPAN, room - width <= SNAP ? "1" : String(Math.round((width / page) * 1000) / 1000));
+      show(figure);
+    });
+    const end = (keep) => {
+      if (!resizing) return;
+      const { figure, before } = resizing;
+      resizing = null;
+      document.documentElement.removeAttribute("data-ge-image-resize");
+      const after = figure.style.getPropertyValue(SPAN);
+      if (before) figure.style.setProperty(SPAN, before);
+      else figure.style.removeProperty(SPAN);
+      if (keep && after !== before && look(figure, { sizes: { [SPAN]: after || null } })) say(t("图片宽度 {0}% · Ctrl+Z 撤销", Math.round(Number(after) * 100)));
+      show(figure);
+    };
+    handle.addEventListener("pointerup", () => end(true));
+    handle.addEventListener("pointercancel", () => end(false));
+    handle.addEventListener("lostpointercapture", () => end(true));
+  }
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || !resizing) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const { figure, before } = resizing;
+    resizing = null;
+    document.documentElement.removeAttribute("data-ge-image-resize");
+    if (before) figure.style.setProperty(SPAN, before);
+    else figure.style.removeProperty(SPAN);
+    show(figure);
+  }, true);
+
+  // 对齐: Notion's small popover of the three sides, under its button.
+  function alignPopup(figure, button) {
+    const el = document.createElement("div");
+    el.className = "ge-image-align";
+    el.setAttribute("data-doc-dev", "");
+    const current = sideOf(figure);
+    el.innerHTML = ALIGNS.map(([side, label, name], index) => `${index ? '<div class="ge-image-align-sep"></div>' : ""}<div role="button" class="ge-media-tool"${side === current ? " data-on" : ""} data-side="${side}" aria-label="${label}">${TOOL_ICONS[name]}</div>`).join("");
+    el.addEventListener("mousedown", (event) => event.preventDefault());
+    el.addEventListener("click", (event) => {
+      const side = event.target.closest("[data-side]")?.dataset.side;
+      if (!side) return;
+      closePopup(popup);
+      align(figure, side);
+    });
+    const rect = button.getBoundingClientRect();
+    const popup = openPopup({ origin: { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height }, placement: "bottom", align: "center", gap: 8, content: el });
+  }
+
+  function align(figure, side) {
+    if (look(figure, sideLook(side))) say(t("已{0} · Ctrl+Z 撤销", ALIGNS.find(([each]) => each === side)[1]));
+    if (hovered === figure) show(figure);
+  }
+
+  // ---------- the viewer ----------
+
+  // The viewer (viewer.mjs: the wheel zooms, 下载, the page's other pictures), on an image block's picture.
+  const view = (figure) => openViewer(imageOf(figure), download);
+
+  // 下载: the picture saved, by the name it has in the report's folder (`img`: an image block's, or
+  // any picture the viewer shows).
+  async function download(img) {
+    if (!img) return;
+    const kept = fileOf(img, "src") ?? img.getAttribute("src") ?? "";
+    const type = /^data:image\/([a-z+]+)/.exec(kept)?.[1]?.replace("+xml", "") ?? null;
+    const name = type ? `image.${type}` : kept.split(/[?#]/)[0].split("/").filter(Boolean).pop() || "image.png";
+    try {
+      const response = await fetch(img.src);
+      if (!response.ok) throw new Error(String(response.status));
+      const url = URL.createObjectURL(await response.blob());
+      const link = element("a", { href: url, download: name });
+      document.body.append(link);
+      link.click();
+      link.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 2000);
+    } catch {
+      say(t("没能下载这张图片。"), "error");
+    }
+  }
+
+  // 裁剪图片 (crop.mjs, notion-lite's: nothing is lost): the dialog shows the picture it was cropped
+  // from, when it was, with the box kept then, so what was cut away can come back. What is kept, a new
+  // picture of the report's folder in its place (its caption, side and width kept), that original and
+  // the box kept said on it; the whole picture kept, the original back. One undo step.
+  function crop(figure) {
+    const img = figure && imageOf(figure);
+    if (!img) return;
+    const original = img.getAttribute("data-original");
+    const from = original ?? fileOf(img, "src");
+    openCrop(img, async (blob, kept) => {
+      if (!figure.isConnected) return;
+      try {
+        if (!kept) {
+          if (!original) return; // nothing cut away, nothing to bring back
+          place(figure, original, null, { quiet: true });
+          return say(t("已恢复原图 · Ctrl+Z 撤销"));
+        }
+        place(figure, (await media.uploadFile(blob, "crop.png")).path, null, { cropped: from ? { original: from, crop: kept } : null, quiet: true });
+        say(t("已裁剪图片 · Ctrl+Z 撤销"));
+      } catch (error) {
+        say(t("无法保存裁剪的图片：{0}", error.message), "error");
+      }
+    }, { src: original ? assetUrl(original) : img.src, crop: original ? cropOf(img.getAttribute("data-crop")) : null });
+  }
+  // A double-click on a picture that opens large (src/shared/zoom.mjs: an image block's, or one in a
+  // table, a card, a column) views it, notion-lite's rule while editing (726447: a double-click on a
+  // page that can be edited, a click on one that cannot: the kit's viewer, runtime/zoom.js, leaves a
+  // click on the page edited to the editor, which selects the block).
+  document.addEventListener("dblclick", (event) => {
+    const img = event.target;
+    if (img?.localName !== "img" || !active() || !zoomable(img)) return;
+    event.preventDefault();
+    openViewer(img, download);
+  }, true);
+  // ---------- the block menu, pasting ----------
+
+  /** An image's rows in its block menu. */
+  function menuItems(target) {
+    if (!target?.matches?.("figure.doc-image") || !imageOf(target)) return [];
+    const rows = [
+      { label: t("替换图片"), icon: ICONS.reset, run: () => setTimeout(() => pick(target)) },
+      { label: t("标题@caption"), icon: TOOL_ICONS.caption, run: () => setTimeout(() => media.caption(target)) },
+      { label: t("对齐"), icon: TOOL_ICONS[{ left: "alignLeft", center: "alignCenter", right: "alignRight" }[sideOf(target)]], width: 180,
+        submenu: () => ALIGNS.map(([side, label, name]) => ({ label, icon: TOOL_ICONS[name], current: side === sideOf(target), run: () => align(target, side) })) },
+    ];
+    if (target.style.getPropertyValue(SPAN)) rows.push({ label: t("恢复原始大小"), icon: ICONS.reset, run: () => { if (look(target, { sizes: { [SPAN]: null } })) say(t("已恢复原始大小 · Ctrl+Z 撤销")); } });
+    rows.push({ label: t("裁剪图片"), icon: CROP_ICON, run: () => setTimeout(() => crop(target)) });
+    rows.push({ label: t("全屏查看"), icon: TOOL_ICONS.expand, run: () => view(target) });
+    rows.push({ label: t("下载"), icon: TOOL_ICONS.download, run: () => download(imageOf(target)) });
+    return rows;
+  }
+
+  /**
+   * An image pasted with its picture's address (clipboard/): the picture downloaded into the
+   * report's folder (a data: address uploaded), one undo step with the paste (`options`).
+   */
+  async function fromLink(figure, src, options) {
+    if (!/^data:/i.test(src)) return fetchInto(figure, src, options);
+    try {
+      const blob = await (await fetch(src)).blob();
+      return uploadInto(figure, new File([blob], `image.${(blob.type.split("/")[1] ?? "png").replace("svg+xml", "svg").replace("jpeg", "jpg")}`, { type: blob.type }), options);
+    } catch {
+      return undefined;
+    }
+  }
+
+  return {
+    pick, menuItems, fromLink,
+    /** Whether a file makes an image. */
+    acceptsFile: (file) => /^image\//.test(file.type),
+    /** An image made of `file`, put where the paste puts it (`put`), its picture uploaded. Returns whether it took it. */
+    fromFiles: (put, [file]) => media.paste(put, file, newImage, uploadInto),
+    /** A new one: its picture chosen next. */
+    onCreated(figure) {
+      pick(figure);
+      return true;
+    },
+    get nodes() { return [bar, handles.left, handles.right].filter((node) => node.isConnected); },
+  };
+}

package/browser/editor/components/image/viewer.mjs

@@ -0,0 +1,213 @@
+import { Z } from "../../../shared/layers.mjs";
+import { tooltip } from "../../page/tooltip.mjs";
+import { addStyleTo, element, mountOver, overlayHost } from "../../page/ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { zoomable } from "../../../shared/zoom.mjs";
+
+// The picture over the page (notion-lite's blocks/image/edit/viewer.js, Notion's 523009 → 749527,
+// with Feishu's wheel): the image's toolbar 展开, its block menu's 全屏查看, and a double-click on a
+// picture of the page that opens large (notion-lite's rule while editing; which pictures is
+// src/shared/zoom.mjs's: an image block's, or one in a table, a card, a column; a reader's single
+// click opens the kit's viewer instead, runtime/zoom.js, which leaves the page edited alone). The picture fits the
+// window (32px around it from 1020px wide), never larger than itself. The wheel zooms around the
+// pointer (25% to 400%), as do −, + and the keys − and +; the percentage puts it back to 100%; a
+// zoomed picture is dragged about. A bar at the bottom: ‹ › (when the page has more pictures, ← →
+// too), −, the percentage, +, 下载, 关闭; it and the pointer hide after two seconds still. Esc, the
+// space bar or a click beside the picture closes it. In a workbench it covers the workbench's window
+// (ui.mjs overlayHost), its keys heard in either document.
+
+const STYLE = `
+  .ge-image-viewer { position: fixed; inset: 0; z-index: ${Z.viewer}; display: flex; align-items: center; justify-content: center; overflow: hidden;
+    background: rgb(15 15 15 / 80%); opacity: 0; transition: opacity 150ms; user-select: none; }
+  .ge-image-viewer[data-shown] { opacity: 1; }
+  /* The picture's own cursor (grab, grabbing) is set inline while it is moved, which only !important beats. */
+  .ge-image-viewer[data-idle], .ge-image-viewer[data-idle] img { cursor: none !important; }
+  .ge-image-viewer > img { display: block; max-width: none; object-fit: contain; transform-origin: center; transition: transform 80ms ease-out; }
+  .ge-viewer-bar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; font: 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; transition: opacity 200ms; }
+  .ge-image-viewer[data-idle] .ge-viewer-bar { opacity: 0; pointer-events: none; }
+  .ge-viewer-group { display: flex; align-items: center; border-radius: 4px; background: rgb(0 0 0 / 62%); }
+  .ge-viewer-button { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 6px; border-radius: 4px; color: #fff; cursor: pointer; transition: background 20ms ease-in; }
+  .ge-viewer-button:hover { background: rgb(255 255 255 / 5.5%); }
+  .ge-viewer-button[data-off] { opacity: .4; pointer-events: none; }
+  .ge-viewer-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
+  .ge-viewer-zoom { width: 50px; color: rgb(255 255 255 / 50%); font-size: 13px; }
+  .ge-viewer-sep { width: 1px; height: 16px; background: rgb(255 255 255 / 28%); }
+`;
+
+const icon = (path) => `<svg viewBox="0 0 16 16" aria-hidden="true">${path}</svg>`;
+const ICONS = {
+  prev: icon('<path d="M13 8H3M7.5 3.5 3 8l4.5 4.5"/>'),
+  next: icon('<path d="M3 8h10M8.5 3.5 13 8l-4.5 4.5"/>'),
+  out: icon('<path d="M3 8h10"/>'),
+  in: icon('<path d="M3 8h10M8 3v10"/>'),
+  download: icon('<path d="M8 2.75v7.5M4.75 7.25 8 10.5l3.25-3.25M3 13.25h10"/>'),
+  close: icon('<path d="m4 4 8 8M12 4l-8 8"/>'),
+};
+const ZOOM = { min: 0.25, max: 4 };
+
+let viewer = null; // { node, img, pictures, index, zoom, x, y, moved, timer, keys, wake, host }
+
+/**
+ * Open the viewer on `picture` (an <img> of the page); `download(picture)` saves one (page.mjs).
+ * The page's pictures that open large are gone through in document order, `picture` among them
+ * whatever its size: 展开 and 全屏查看 ask for it by name, so an image block showing its picture under
+ * ZOOM_LEAST (a 32px picture at its own size) or one not loaded yet opens too; the double-click goes
+ * by the reader's rule (zoomable) before it calls this.
+ */
+export function openViewer(picture, download) {
+  closeViewer();
+  const pictures = [...document.querySelectorAll("main img")].filter((img) => img === picture || zoomable(img));
+  if (!pictures.includes(picture)) return;
+  const host = overlayHost();
+  addStyleTo(host.doc, STYLE);
+  const img = element("img", { alt: "", draggable: "false" });
+  const button = (name, label, text) => {
+    const node = element("div", { class: "ge-viewer-button", role: "button", "aria-label": label, "data-act": name });
+    if (text) node.textContent = text;
+    else node.innerHTML = ICONS[name];
+    if (!text && host.doc === document) tooltip(node, label);
+    else if (!text) node.title = label; // the editor's tooltips stand on the page, not over the workbench
+    return node;
+  };
+  const zoomed = button("reset", "100%", "100%");
+  zoomed.classList.add("ge-viewer-zoom");
+  const groups = [];
+  if (pictures.length > 1) groups.push(element("div", { class: "ge-viewer-group" }, button("prev", t("上一张")), button("next", t("下一张"))));
+  groups.push(element("div", { class: "ge-viewer-group" }, button("out", t("缩小")), zoomed, button("in", t("放大")), element("div", { class: "ge-viewer-sep" }), button("download", t("下载")), element("div", { class: "ge-viewer-sep" }), button("close", t("关闭"))));
+  const node = mountOver(host, element("div", { class: "ge-image-viewer", role: "dialog", "aria-label": t("查看图片") }, img, element("div", { class: "ge-viewer-bar" }, ...groups)));
+  const v = { node, img, pictures, index: pictures.indexOf(picture), zoom: 1, x: 0, y: 0, moved: false, timer: 0, download, host };
+  viewer = v;
+
+  node.addEventListener("click", (event) => {
+    const act = event.target.closest?.("[data-act]")?.getAttribute("data-act");
+    if (act) return run(act);
+    if (event.target === img) return;
+    if (!event.target.closest(".ge-viewer-bar") && !v.moved) closeViewer(); // a click beside the picture
+  });
+  node.addEventListener("wheel", (event) => {
+    event.preventDefault();
+    zoomTo(v.zoom * Math.exp(-event.deltaY * 0.0015), around(event));
+  }, { passive: false });
+  node.addEventListener("pointerdown", (event) => {
+    v.moved = false;
+    if (event.button !== 0 || event.target !== img || v.zoom <= 1) return;
+    event.preventDefault();
+    const start = { x: event.clientX, y: event.clientY, panX: v.x, panY: v.y };
+    img.style.cursor = "grabbing";
+    const move = (moving) => {
+      if (Math.abs(moving.clientX - start.x) + Math.abs(moving.clientY - start.y) > 3) v.moved = true;
+      v.x = start.panX + moving.clientX - start.x;
+      v.y = start.panY + moving.clientY - start.y;
+      paint();
+    };
+    const up = () => {
+      host.win.removeEventListener("pointermove", move, true);
+      host.win.removeEventListener("pointerup", up, true);
+      paint();
+    };
+    host.win.addEventListener("pointermove", move, true);
+    host.win.addEventListener("pointerup", up, true);
+  });
+  v.keys = (event) => {
+    const done = () => { event.preventDefault(); event.stopPropagation(); };
+    if (event.key === "Escape" || event.key === " ") { done(); closeViewer(); }
+    else if (event.key === "ArrowLeft") { done(); show(v.index - 1); }
+    else if (event.key === "ArrowRight") { done(); show(v.index + 1); }
+    else if (event.key === "+" || event.key === "=") { done(); zoomTo(v.zoom * 1.25); }
+    else if (event.key === "-" || event.key === "_") { done(); zoomTo(v.zoom / 1.25); }
+    else if (!(event.ctrlKey || event.metaKey)) done(); // the page takes no keys meanwhile
+  };
+  v.wake = () => {
+    node.removeAttribute("data-idle");
+    clearTimeout(v.timer);
+    v.timer = setTimeout(() => viewer === v && node.setAttribute("data-idle", ""), 2000);
+  };
+  for (const doc of new Set([document, host.doc])) doc.addEventListener("keydown", v.keys, true);
+  host.win.addEventListener("pointermove", v.wake, true);
+  host.win.addEventListener("resize", fit);
+  img.addEventListener("load", fit);
+  document.activeElement?.blur?.();
+  show(v.index);
+  v.wake();
+  node.getBoundingClientRect(); // its first style taken, so that showing it fades in
+  node.setAttribute("data-shown", "");
+}
+
+/** The viewer gone, if it is open. */
+export function closeViewer() {
+  const v = viewer;
+  if (!v) return;
+  viewer = null;
+  for (const doc of new Set([document, v.host.doc])) doc.removeEventListener("keydown", v.keys, true);
+  v.host.win.removeEventListener("pointermove", v.wake, true);
+  v.host.win.removeEventListener("resize", fit);
+  clearTimeout(v.timer);
+  v.node.remove();
+}
+
+function run(act) {
+  const v = viewer;
+  if (act === "close") closeViewer();
+  else if (act === "prev") show(v.index - 1);
+  else if (act === "next") show(v.index + 1);
+  else if (act === "in") zoomTo(v.zoom * 1.25);
+  else if (act === "out") zoomTo(v.zoom / 1.25);
+  else if (act === "reset") zoomTo(1);
+  else if (act === "download") v.download(v.pictures[v.index]);
+}
+
+function show(index) {
+  const v = viewer;
+  v.index = Math.max(0, Math.min(v.pictures.length - 1, index));
+  v.zoom = 1;
+  v.x = 0;
+  v.y = 0;
+  v.img.src = v.pictures[v.index].currentSrc || v.pictures[v.index].src;
+  v.node.querySelector('[data-act="prev"]')?.toggleAttribute("data-off", v.index === 0);
+  v.node.querySelector('[data-act="next"]')?.toggleAttribute("data-off", v.index === v.pictures.length - 1);
+  fit();
+}
+
+// The picture fitted into the window it covers (32px around it from 1020px wide), never past its own size.
+function fit() {
+  const v = viewer;
+  if (!v?.img.naturalWidth) return;
+  const { naturalWidth: width, naturalHeight: height } = v.img;
+  const { innerWidth: across, innerHeight: down } = v.host.win;
+  const gap = across >= 1020 ? 32 : 0;
+  const scale = Math.min(1, (across - 2 * gap) / width, (down - 2 * gap) / height);
+  v.img.style.width = `${width * scale}px`;
+  v.img.style.height = `${height * scale}px`;
+  paint();
+}
+
+// Where the pointer is, from the window's middle (the zoom's center).
+function around(event) {
+  const rect = viewer.node.getBoundingClientRect();
+  return { x: event.clientX - (rect.left + rect.width / 2), y: event.clientY - (rect.top + rect.height / 2) };
+}
+
+function zoomTo(value, at = null) {
+  const v = viewer;
+  const zoom = Math.max(ZOOM.min, Math.min(ZOOM.max, Math.round(value * 1000) / 1000));
+  if (at) {
+    const k = zoom / v.zoom;
+    v.x = at.x - (at.x - v.x) * k;
+    v.y = at.y - (at.y - v.y) * k;
+  }
+  v.zoom = zoom;
+  if (zoom <= 1) {
+    v.x = 0;
+    v.y = 0;
+  }
+  paint();
+}
+
+function paint() {
+  const v = viewer;
+  v.img.style.transform = `translate(${v.x}px, ${v.y}px) scale(${v.zoom})`;
+  v.img.style.cursor = v.zoom > 1 ? "grab" : "default";
+  v.node.querySelector(".ge-viewer-zoom").textContent = `${Math.round(v.zoom * 100)}%`;
+  v.node.querySelector('[data-act="out"]').toggleAttribute("data-off", v.zoom <= ZOOM.min);
+  v.node.querySelector('[data-act="in"]').toggleAttribute("data-off", v.zoom >= ZOOM.max);
+}