@heycys/gallery 0.1.2 → 0.2.0

package/THIRD-PARTY-NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-@heycys/gallery 0.1.2 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
+@heycys/gallery 0.2.0 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
 
 ## @asamuzakjp/css-color 5.1.11
 
@@ -3254,7 +3254,7 @@ SOFTWARE.
 
 ## Lucide icons
 
-A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, and the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab).
+A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab), and the default home page's house.
 
 ```
 ISC License

package/browser/editor/components/align.mjs

@@ -0,0 +1,58 @@
+// A block's alignment, and a text block's indent (对齐与缩进, the block menu's: Feishu's 缩进和对齐 ›;
+// components that say `toggles: ALIGN_TOGGLES`, a paragraph and a heading; a table, whose frame is placed
+// on the page the same way, says `toggles: ALIGN_PLACES`). Class switches the file keeps and the
+// kit draws (src/render/kit/styles/flow.css, table.css): centred or right-aligned (doc-align-center,
+// doc-align-right; left is neither, the kit's own), and for a text block moved in by levels of two body
+// characters (doc-indent-1 … doc-indent-8). The page editor's block menu sets them (page/align.mjs), Enter carries them
+// to the block it makes (core.mjs newBlock), and Backspace at a block's start takes them off one at a
+// time before it joins or deletes (typing/: the alignment first, then a level of indent, Feishu's
+// order).
+
+import { TEXT_ALIGN_CLASSES } from "../../shared/components/paragraph.mjs";
+
+/** The alignments a text block may have, by name: none is left (the kit's own). */
+export const ALIGNS = { center: "doc-align-center", right: "doc-align-right" };
+
+/** The indents' classes, level 1 first (the kit's: src/shared/components/paragraph.mjs). */
+export const INDENTS = TEXT_ALIGN_CLASSES.filter((name) => name.startsWith("doc-indent-"));
+
+/** The deepest indent. */
+export const INDENT_MOST = INDENTS.length;
+
+/** The classes of a text block's alignment and indent: its component's `toggles`. */
+export const ALIGN_TOGGLES = TEXT_ALIGN_CLASSES;
+
+/** The classes of a block's alignment alone (a table's frame: its component's `toggles`), the same two. */
+export const ALIGN_PLACES = Object.values(ALIGNS);
+
+/** The elements that take a text block's alignment and indent (a paragraph, a heading; a cell's alignment is its own classes'). */
+export const TEXT_BLOCKS = "p, h1, h2, h3, h4";
+
+/** A block's alignment: "left", "center" or "right". */
+export const alignOf = (element) => Object.keys(ALIGNS).find((name) => element.classList.contains(ALIGNS[name])) ?? "left";
+
+/** A block's indent: 0 to INDENT_MOST. */
+export const indentOf = (element) => INDENTS.findIndex((name) => element.classList.contains(name)) + 1;
+
+/** The look (class switches) that gives a block the alignment `name` ("left": none). */
+export const alignLook = (name) => ({ classes: Object.fromEntries(Object.entries(ALIGNS).map(([each, cls]) => [cls, each === name])) });
+
+/** The look that gives a block the indent `level` (0: none). */
+export const indentLook = (level) => ({ classes: Object.fromEntries(INDENTS.map((cls, index) => [cls, index + 1 === level])) });
+
+/**
+ * The alignment and indent of text block `from` (a paragraph or a heading) given to `to`, a paragraph
+ * made from it (Enter's split: core.mjs newBlock, the half after the caret or the empty line before it,
+ * as a word processor's new line keeps its paragraph's). Returns `to`.
+ */
+export function carry(from, to) {
+  if (!from?.matches?.(TEXT_BLOCKS)) return to;
+  for (const name of ALIGN_TOGGLES) if (from.classList.contains(name)) to.classList.add(name);
+  return to;
+}
+
+/** Whether a block takes an alignment (its kind's toggles hold it; `toggles`: TOGGLES of its kind). */
+export const aligns = (toggles) => Boolean(toggles?.includes(ALIGNS.center));
+
+/** Whether a block takes an indent too, as a text block does (a table's alignment has none). */
+export const indents = (toggles) => Boolean(toggles?.includes(INDENTS[0]));

package/browser/editor/components/code/index.mjs

@@ -67,7 +67,7 @@ export default {
   components: ["doc-code"],
   placeholders: { title: t("请输入代码块名称") }, // Feishu's
   hosts: {
-    code: { name: t("代码块"), caps: CODE_CAPS, opensBefore: true, textFilters: false, closed: true, inner: (element) => escapeText(codeText(element)) }, // plain text, its lines kept
+    code: { name: t("代码块"), caps: CODE_CAPS, opensBefore: false, textFilters: false, closed: true, inner: (element) => escapeText(codeText(element)) }, // Enter stays inside its code, including at the start
     codeTitle: { name: t("代码块标题"), caps: CODE_CAPS, parts: [["code", "title"]] }, // one line; empty, the kit shows 代码块
   },
   types: {

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

@@ -37,7 +37,7 @@ const STYLE = `
   ${gestureLock("data-ge-embed-resize=\"right\"", { cursor: "nwse-resize" })}
   ${gestureLock("data-ge-embed-resize=\"left\"", { cursor: "nesw-resize" })}
   .ge-layer > .ge-embed-corner { pointer-events: auto; }
-  /* A corner handle: a plain gray bar bent round the frame's corner, no border (as the image's sides). */
+  /* A corner handle: a plain gray bar bent round the frame's corner, no border. */
   .ge-embed-corner { width: 20px; height: 20px; cursor: nwse-resize; }
   .ge-embed-corner[data-side="left"] { cursor: nesw-resize; }
   .ge-embed-corner::after { content: ""; position: absolute; bottom: 5px; width: 9px; height: 9px; border: 0 solid light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); border-bottom-width: 3px; transition: border-color 120ms ease; }

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

@@ -58,9 +58,9 @@ export function create({ pages, fileUrl }) {
     onEmbed: (url) => fetchInto(figure, url),
   });
 
-  async function uploadInto(figure, file) {
+  async function uploadInto(figure, file, options = {}) {
     if (file.size > MAX_BYTES) return say(t("文件太大（最多 {0}）。", sizeLimit("file")), "error");
-    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file)));
+    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file), options));
   }
 
   const fetchInto = (figure, url) => media.attempt(figure, t("正在下载…"), t("无法下载这个文件"), async () => place(figure, await media.uploadUrl(url)));
@@ -69,13 +69,13 @@ export function create({ pages, fileUrl }) {
   // with its caption), never the same element, so that undo brings back what stood there (a
   // placeholder never written, a block as it was) and the file loses the new one. One undo step; the
   // block selected.
-  function place(figure, answer) {
+  function place(figure, answer, { pasted = false } = {}) {
     if (!figure.isConnected) return;
     const doc = figure.ownerDocument;
     const replacing = Boolean(linkOf(figure));
     const next = newFile(doc);
     next.replaceChildren(...fileParts(doc, answer, fileUrl(answer.path), captionOf(figure)?.innerHTML ?? ""));
-    media.place(figure, next, { replacing });
+    media.place(figure, next, { replacing, pasted });
     if (replacing) say(t("已替换文件 · Ctrl+Z 撤销"));
   }
 

package/browser/editor/components/heading/index.mjs

@@ -1,4 +1,5 @@
 import { headingIcon } from "../icons.mjs";
+import { ALIGN_TOGGLES } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 标题 1–4: headings h1–h4 (the fourth is body-sized, set apart by its weight; an author's h5 or h6 is
@@ -10,7 +11,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // heading into a paragraph), clipboard/own/ and src/transfer/markdown.mjs (written by its level: `clipboard`).
 // Folding its section: page/fold/ (the triangle right of its words, what is hidden, the section going with
 // it wherever blocks are taken away whole) and page.mjs (Ctrl/⌘+Enter in its words).
-// Its color (颜色 in the block menu): class switches, colors.mjs.
+// Its color (颜色 in the block menu): class switches, colors.mjs; its alignment and indent (对齐与缩进), align.mjs.
 // Its look: the kit's styles/flow.css (src/render/kit/).
 // How a heading of a level is written out: # … #### by level.
 const writtenAs = (level) => ({ kind: "heading", level });
@@ -23,7 +24,7 @@ export default {
     heading: {
       name: t("标题"),
       match: [{ rank: 190, tag: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
-      colors: ["text", "background"],
+      colors: ["text", "background"], toggles: ALIGN_TOGGLES,
       emptyIsNothing: true, fromWords: true,
       clipboard: { of: (unit) => writtenAs(Math.min(4, Number(unit.localName.slice(1)) || 2)) }, // h5 and h6, which no type stands for, as heading 4
     },
@@ -31,22 +32,22 @@ export default {
   types: {
     heading1: {
       turn: 3, menu: ["basic", 3],
-      tag: "h1", kind: "heading", leaf: "heading1", text: true, empty: true, placeholder: t("标题 1"), clipboard: writtenAs(1),
+      tag: "h1", kind: "heading", leaf: "heading1", text: true, empty: true, emptyToText: true, placeholder: t("标题 1"), clipboard: writtenAs(1),
       label: t("标题 1"), icon: headingIcon(1), hint: "#", markdown: [{ match: /^(#|＃)[ \u00a0\u3000]$/ }], words: "标题1 一级标题 大标题 biaoti1 yiji bt1 bt heading1 h1 title",
     },
     heading2: {
       turn: 4, menu: ["basic", 4],
-      tag: "h2", kind: "heading", leaf: "heading2", text: true, empty: true, placeholder: t("标题 2"), clipboard: writtenAs(2),
+      tag: "h2", kind: "heading", leaf: "heading2", text: true, empty: true, emptyToText: true, placeholder: t("标题 2"), clipboard: writtenAs(2),
       label: t("标题 2"), icon: headingIcon(2), hint: "##", markdown: [{ match: /^(##|＃＃)[ \u00a0\u3000]$/ }], words: "标题2 二级标题 biaoti2 erji bt2 bt heading2 h2",
     },
     heading3: {
       turn: 5, menu: ["basic", 5],
-      tag: "h3", kind: "heading", leaf: "heading3", text: true, empty: true, placeholder: t("标题 3"), clipboard: writtenAs(3),
+      tag: "h3", kind: "heading", leaf: "heading3", text: true, empty: true, emptyToText: true, placeholder: t("标题 3"), clipboard: writtenAs(3),
       label: t("标题 3"), icon: headingIcon(3), hint: "###", markdown: [{ match: /^(###|＃＃＃)[ \u00a0\u3000]$/ }], words: "标题3 三级标题 小标题 biaoti3 sanji bt3 bt heading3 h3",
     },
     heading4: {
       turn: 6, menu: ["basic", 6],
-      tag: "h4", kind: "heading", leaf: "heading4", text: true, empty: true, placeholder: t("标题 4"), clipboard: writtenAs(4),
+      tag: "h4", kind: "heading", leaf: "heading4", text: true, empty: true, emptyToText: true, placeholder: t("标题 4"), clipboard: writtenAs(4),
       label: t("标题 4"), icon: headingIcon(4), hint: "####", markdown: [{ match: /^(####|＃＃＃＃)[ \u00a0\u3000]$/ }], words: "标题4 四级标题 biaoti4 siji bt4 bt heading4 h4",
     },
   },

package/browser/editor/components/icons.mjs

@@ -32,6 +32,9 @@ export const SECTION_ICON = svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0
  */
 export const BLOCK_ICON = svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5"/><path d="M6.75 7h3.5M6.75 10h6.5M6.75 13h4.5"/>');
 
+/** 设置: a ring with eight short rays, the board's card menu and a custom block's handle menu. */
+export const SETTINGS_ICON = svg('<circle cx="10" cy="10" r="2.25"/><path d="M10 3.25v1.5M10 15.25v1.5M3.25 10h1.5M15.25 10h1.5M5.2 5.2l1.06 1.06M13.74 13.74l1.06 1.06M5.2 14.8l1.06-1.06M13.74 6.26l1.06-1.06"/>');
+
 /** A detail card (详情卡片): a card with two lines of text. */
 export const DIALOG_ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2.5"/><path d="M6.5 8h7M6.5 11.5h4.5"/>');
 export const LINK_ICON = svg('<g transform="rotate(45 10 10)"><path d="M7 8.5V6a3 3 0 0 1 6 0v2.5M7 11.5V14a3 3 0 0 0 6 0v-2.5M10 7.5v5"/></g>'); // two U's and the line between them, turned 45°

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

@@ -36,6 +36,8 @@ export default {
       name: t("图片"),
       match: [{ rank: 45, tag: "figure", class: "doc-image" }],
       boxed: true,
+      // Selected alone with its picture, its corner grips and toolbar show it: no selection fill (selection/index.mjs).
+      unfilled: ":scope > img",
       toggles: ALIGN,
       sizes: { [SPAN]: SPAN_SIZE },
     },

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

@@ -1,6 +1,7 @@
 import { MEDIA_CLASS } from "../../../shared/components/index.mjs";
+import { IN_LAYER } from "../../../shared/layers.mjs";
 import { SPAN, SPAN_SIZE, UPLOAD_LIMITS, sizeLimit } from "../../../shared/media.mjs";
-import { gestureLock } from "../../page/gesture.mjs";
+import { cancelOnEscape, endsGesture, gestureLock } from "../../page/gesture.mjs";
 import { openCrop } from "./crop.mjs";
 import { openViewer } from "./viewer.mjs";
 import { svg } from "../icons.mjs";
@@ -25,33 +26,68 @@ import { zoomable } from "../../../shared/zoom.mjs";
 // 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`).
+// A click on a picture selects its image (`click`); while it is the one block selected (however it
+// was: the click, its handle, the keys, a picture just put in) a short gray L stands at each of the
+// picture's corners (the user's, 2026-11-09, feishu-lite's four corner handles drawn as Ls) and the
+// toolbar at its top right, moved in clear of them (对齐, 标题, 展开, 更多: the block menu), both
+// placed in the block tools' frames (`blockTools` follow, ../../page/blocks.mjs). Dragging a corner
+// resizes the picture, its shape kept (feishu-lite's: by how far the pointer moves across, the left
+// corners the other way, twice while centered), a share of the reading width, at most the width it
+// stands in, snapping to the whole of that width (a share of 1: styles/sizes.css), one undo step on
+// letting go (Esc puts it back). An L is a gray line with a thin edge of the page's color around it, so it
+// reads on a black picture in light mode and a white one in dark mode (the old side bars, a gray of
+// the page's ink, did not). 标题 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 what the toolbar has not: 同步宽度到全局 first (every other image of the
+// page as wide as this one, one undo step), 替换图片, 恢复原始大小, 裁剪图片 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"/>');
+// 同步宽度到全局's row: a width (an arrow both ways) over two pictures as wide as each other.
+const SYNC_ICON = svg('<path d="M4 4.25h12M6 2.5 4 4.25 6 6M14 2.5l2 1.75L14 6"/><rect x="3.75" y="8.25" width="12.5" height="3.5" rx="1"/><rect x="3.75" y="14" width="12.5" height="3.5" rx="1"/>');
+
+// A corner's grip: a box of GRIP px, the picture's corner AT px in from the box's outer corner, an L
+// whose lines run ARM px along the picture's two edges from its corner, centered a little outside them.
+const GRIP = 24;
+const AT = 8;
+const ARM = 12;
+const L_PATH = `M${AT - 1} ${AT - 1 + ARM}V${AT - 1}h${ARM}`; // drawn for the top left; the others mirror it
+// The corners: which way each mirrors the top left's L, and its cursor.
+const CORNERS = {
+  nw: { x: "left", y: "top", cursor: "nwse" },
+  ne: { x: "right", y: "top", cursor: "nesw" },
+  sw: { x: "left", y: "bottom", cursor: "nesw" },
+  se: { x: "right", y: "bottom", cursor: "nwse" },
+};
+const INSET = 16; // how far the toolbar stands from the picture's top and from its right edge, the same each way (the user's, 2026-11-09: the top as far as the right): clear of the L's arms and of the top right grip's box, which reaches GRIP - AT = 16px in
+const GAP = 6; // how far it stands above the picture when it does not fit in
 
 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; }
+  /* The toolbar is the media blocks' (../media/toolbar.mjs). */
   .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" })}
+  /* The corners' grips: a short gray L, round at its ends, no edge round it (the user, 2026-11-09): a
+     neutral gray that reads on a black picture and a white one alike (4.5 to 1 on each), with a soft
+     shadow for a picture of its own gray; darker (lighter) under the pointer and while it is dragged.
+     No border, no fill. */
+  .ge-layer > .ge-image-grip { pointer-events: auto; z-index: ${IN_LAYER.button}; } /* over the image's fill: it is selected */
+  .ge-image-grip { width: ${GRIP}px; height: ${GRIP}px; --ge-grip-line: #767676; filter: drop-shadow(0 0 2px rgb(0 0 0 / 42%)); }
+  .ge-image-grip[data-cursor="nwse"] { cursor: nwse-resize; }
+  .ge-image-grip[data-cursor="nesw"] { cursor: nesw-resize; }
+  .ge-image-grip svg { display: block; width: ${GRIP}px; height: ${GRIP}px; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
+  .ge-image-grip[data-corner="ne"] svg { transform: scaleX(-1); }
+  .ge-image-grip[data-corner="sw"] svg { transform: scaleY(-1); }
+  .ge-image-grip[data-corner="se"] svg { transform: scale(-1); }
+  .ge-image-grip-line { stroke: var(--ge-grip-line); stroke-width: 3; transition: stroke 120ms ease; }
+  .ge-image-grip:hover, .ge-image-grip[data-on] { --ge-grip-line: light-dark(#4f4d49, #d3d1cb); }
+  ${gestureLock('data-ge-image-resize="nwse"', { cursor: "nwse-resize", select: true })}
+  ${gestureLock('data-ge-image-resize="nesw"', { cursor: "nesw-resize", select: true })}
 `;
 
 const ALIGNS = [["left", t("左对齐"), "alignLeft"], ["center", t("居中对齐"), "alignCenter"], ["right", t("右对齐"), "alignRight"]];
@@ -156,103 +192,110 @@ export function create({ pages, assetUrl }) {
     if (replacing && !quiet) say(t("已替换图片 · Ctrl+Z 撤销"));
   }
 
-  // ---------- the toolbar and the handles ----------
+  // ---------- the toolbar and the corners' grips ----------
 
-  let hovered = null; // the image the pointer is on
-  let resizing = null; // { figure, side, x, start, room, before, centered }
+  let shown = null; // the image whose tools show: the one block selected
+  let resizing = null; // { figure, corner, x, start, room, page, before, centered }
+  let aligning = null; // the 对齐 popover open, a press in which keeps the image selected
   const bar = mediaBar(t("图片操作"));
-  const tool = (label, tip, icon, run) => toolButton({ label, tip, icon, run, alive: () => hovered?.isConnected });
+  const tool = (label, tip, icon, run) => toolButton({ label, tip, icon, run, alive: () => shown?.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)),
+    align: tool(t("对齐方式"), t("设置区块对齐"), () => TOOL_ICONS[{ left: "alignLeft", center: "alignCenter", right: "alignRight" }[sideOf(shown)]], (button) => alignPopup(shown, button)),
+    caption: tool(t("标题@caption"), t("添加标题"), TOOL_ICONS.caption, () => media.caption(shown)),
+    expand: tool(t("展开"), t("全屏查看"), TOOL_ICONS.expand, () => view(shown)),
     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 });
+      openMenu(shown, { 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" }) };
+  const lines = `<svg viewBox="0 0 ${GRIP} ${GRIP}" aria-hidden="true"><path class="ge-image-grip-line" d="${L_PATH}"/></svg>`;
+  const grips = Object.fromEntries(Object.entries(CORNERS).map(([corner, { cursor }]) => {
+    const grip = element("div", { class: "ge-image-grip", "data-corner": corner, "data-cursor": cursor, "aria-hidden": "true" });
+    grip.innerHTML = lines;
+    return [corner, grip];
+  }));
+  const nodes = () => [bar, ...Object.values(grips)];
 
-  // The toolbar and the handles over the picture of `figure`, or away.
+  // The toolbar and the grips over the picture of `figure`, or away. The toolbar stands at the
+  // picture's top right, INSET from its top and from its right edge; on a picture too narrow to hold
+  // it with that room each side, above the picture, its right edge on the picture's.
   function show(figure) {
-    hovered = figure;
+    shown = 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();
+      shown = null;
+      for (const node of nodes()) 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 });
+    const alive = () => shown === figure && figure.isConnected;
+    for (const node of nodes()) own(node, "image tools", { owner: figure, alive });
     for (const button of Object.values(tools)) button.draw();
-    const { rect } = shape;
+    const { rect, layer } = 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);
+    if (bar.parentNode !== layer) layer.append(bar); // in the page before its width is measured
+    const fits = rect.right - rect.left >= bar.offsetWidth + 2 * INSET;
+    drawAt(bar, layer, fits ? rect.right - INSET - bar.offsetWidth : rect.right - bar.offsetWidth, fits ? rect.top + INSET : rect.top - AT - GAP - bar.offsetHeight);
+    for (const [corner, grip] of Object.entries(grips)) {
+      const { x, y } = CORNERS[corner];
+      drawAt(grip, layer, x === "left" ? rect.left - AT : rect.right - GRIP + AT, y === "top" ? rect.top - AT : rect.bottom - GRIP + AT);
     }
   }
 
-  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); });
+  // The image the tools stand for, from the blocks selected (the block tools' frame): one image with
+  // its picture, not one a component keeps; while a corner is dragged, the one dragged.
+  function follow(picked) {
+    if (resizing) return show(resizing.figure);
+    const [one] = picked.length === 1 ? picked : [];
+    const figure = one?.matches?.("figure.doc-image") && imageOf(one) && active() && !keptByComponent(one) ? one : null;
+    if (figure || shown) show(figure);
+  }
+  // The picture taken off the page by an undo, a redo or a commit: the tools go at once, not at the next frame.
+  onSettle(() => { if (shown && !shown.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;
+  // Dragging a corner: the picture's width as a share of the reading width, at most the width it
+  // stands in (1 when it reaches that), live, its height following (its shape kept); feishu-lite's
+  // rule (resize.ts): by how far the pointer moves across, the left corners the other way, twice while
+  // centered (it grows on both sides). One undo step on letting go; Esc, or the press cancelled, puts it back.
+  for (const [corner, grip] of Object.entries(grips)) {
+    grip.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0 || !shown || resizing) 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", "");
+      const figure = shown;
+      resizing = { figure, corner, x: event.clientX, start: imageOf(figure).getBoundingClientRect().width, room: columnRoom(figure), page: readingRoom(figure), before: figure.style.getPropertyValue(SPAN), centered: sideOf(figure) === "center" };
+      grip.setPointerCapture?.(event.pointerId);
+      grip.setAttribute("data-on", "");
+      document.documentElement.setAttribute("data-ge-image-resize", CORNERS[corner].cursor);
     });
-    handle.addEventListener("pointermove", (event) => {
-      if (!resizing) return;
+    grip.addEventListener("pointermove", (event) => {
+      if (resizing?.corner !== corner) return;
       const { figure, x, start, room, page, centered } = resizing;
-      const delta = (event.clientX - x) * (side === "right" ? 1 : -1) * (centered ? 2 : 1);
+      const delta = (event.clientX - x) * (CORNERS[corner].x === "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));
+    grip.addEventListener("pointerup", () => endResize(true));
+    grip.addEventListener("pointercancel", () => endResize(false));
+    grip.addEventListener("lostpointercapture", () => endResize(true));
   }
-  document.addEventListener("keydown", (event) => {
-    if (event.key !== "Escape" || !resizing) return;
-    event.preventDefault();
-    event.stopPropagation();
+  // The drag over: the width it had back on the page, then (`keep`) the one dragged to as one undo step.
+  function endResize(keep) {
+    if (!resizing) return;
     const { figure, before } = resizing;
     resizing = null;
+    for (const grip of Object.values(grips)) grip.removeAttribute("data-on");
     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);
-  }, true);
+  }
+  // Esc gives the drag up and goes no further (the image stays selected); so do the window losing the focus and the page hidden.
+  cancelOnEscape({ active: () => Boolean(resizing), cancel: () => endResize(false) });
+  endsGesture({ active: () => Boolean(resizing), cancel: () => endResize(false), owns: () => false });
 
   // 对齐: Notion's small popover of the three sides, under its button.
   function alignPopup(figure, button) {
@@ -270,11 +313,29 @@ export function create({ pages, assetUrl }) {
     });
     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 });
+    aligning = 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);
+    if (shown === figure) show(figure);
+  }
+
+  // 同步宽度到全局: every other image of the page (with its picture, not one a component keeps) as wide
+  // as this one shows, one undo step (undo selects this one again), written as one change. The width is
+  // what the picture shows at as a share of the reading width (styles/sizes.css), so a picture with no
+  // width of its own, or held narrower by its column, passes on the width it is seen at; the whole
+  // reading width is 1. This one is left as it is.
+  const others = (figure) => [...document.querySelectorAll("main figure.doc-image")].filter((each) => each !== figure && imageOf(each) && each.matches("[data-ge-unit], [data-ge-new]") && !keptByComponent(each));
+  function syncWidths(figure) {
+    const img = imageOf(figure);
+    if (!img?.isConnected) return;
+    const page = readingRoom(figure);
+    const width = img.getBoundingClientRect().width;
+    const share = page - width <= SNAP ? "1" : String(Math.max(SPAN_SIZE.min, Math.round((width / page) * 1000) / 1000));
+    const targets = others(figure).filter((each) => each.style.getPropertyValue(SPAN).trim() !== share);
+    if (targets.length === 0 || !look(targets, { sizes: { [SPAN]: share } }, figure)) return say(t("页面上的图片已经都是这个宽度。"));
+    say(t("已将 {0} 张图片设为同一宽度 · Ctrl+Z 撤销", targets.length));
   }
 
   // ---------- the viewer ----------
@@ -339,18 +400,18 @@ export function create({ pages, assetUrl }) {
   }, true);
   // ---------- the block menu, pasting ----------
 
-  /** An image's rows in its block menu. */
+  /**
+   * An image's rows in its block menu: what its toolbar has not (标题, 对齐 and 展开 are there, and the
+   * toolbar shows whenever the image is the one block selected, as it is while its menu is open):
+   * 同步宽度到全局 first (where the page has another picture), 替换图片, 恢复原始大小, 裁剪图片, 下载.
+   */
   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) })) },
-    ];
+    const rows = [];
+    if (others(target).length > 0) rows.push({ label: t("同步宽度到全局"), icon: SYNC_ICON, run: () => syncWidths(target) });
+    rows.push({ label: t("替换图片"), icon: ICONS.reset, run: () => setTimeout(() => pick(target)) });
     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;
   }
@@ -380,6 +441,27 @@ export function create({ pages, assetUrl }) {
       pick(figure);
       return true;
     },
-    get nodes() { return [bar, handles.left, handles.right].filter((node) => node.isConnected); },
+    /**
+     * A click on an image's picture selects the image (its toolbar and grips then show: `blockTools`),
+     * the second of a double-click too (its press let go of it; the double-click itself is the
+     * viewer's). Returns whether it took the click.
+     */
+    click(event) {
+      const img = event.target;
+      const figure = img?.localName === "img" ? img.parentElement : null;
+      if (event.button !== 0 || !figure?.matches("main figure.doc-image") || imageOf(figure) !== img || !active() || keptByComponent(figure)) return false;
+      media.select(figure);
+      return true;
+    },
+    /** The toolbar and the grips as a part of the block tools: placed in their frames by the blocks selected (`follow`), a press on them keeping the selection (`holds`). */
+    blockTools: () => [{
+      follow,
+      holds: (node) => nodes().some((each) => each.contains(node)) || Boolean(aligning?.isConnected && aligning.contains(node)),
+      hide() {
+        endResize(false);
+        show(null);
+      },
+    }],
+    get nodes() { return nodes().filter((node) => node.isConnected); },
   };
 }

package/browser/editor/components/installed/index.mjs

@@ -2,7 +2,7 @@ import { escapeText } from "../../../shared/escape.mjs";
 import { ATTRIBUTE, FALLBACK, INSTANCE, PACKAGE_ID, SLOT, SLOT_PART, componentAt, heldBy, instanceMatch, refusedInCopy, slotsIn } from "../../../shared/components/installed.mjs";
 import { wordsIn } from "../../page/clipboard/own/writers.mjs";
 import { BLOCK_ICON } from "../icons.mjs";
-import { VIEW_FROM } from "../../../shared/table-chart.mjs";
+import { CHART_KEY, VIEW_FROM } from "../../../shared/table-chart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 组件: the one kind of block every component package is to the engines, the host of a package's
@@ -109,6 +109,10 @@ export default {
       boxed: true,
       chapter: true,
       copy: "itself",
+      // The key of the table a view reads (VIEW_FROM), which a view's 设置 changes on an instance the file
+      // has (the commit writes it in its start tag, as a table's CHART_SOURCE); one made on the page says it
+      // by `extras` below.
+      attributes: { [VIEW_FROM]: (value) => CHART_KEY.test(value) },
     },
   },
   boxes: {
@@ -131,7 +135,7 @@ export default {
       // Its markup is the file's, from its template or what was carried (`data-ge-copy`, its slots
       // empty); what its slots hold goes apart, blocks made on the page as any (`children`, each in the
       // slot `boxKeys` names), so that the commit's answer names each, as for a block made in a column.
-      // A view of a table (a table's 视图 › made it of its template, or a paste carried one) says the key
+      // A view of a table (a menu made it of its template, bound to the table above it, or a paste carried one) says the key
       // of the table it reads as the page has it (`from`, its VIEW_FROM, which a paste may have given it
       // anew: clipboard/own/chart-keys.mjs), which the file writes on it (file.mjs source); one carried
       // with none on it says null (a view pasted into another document, its key taken off there), so