@heycys/gallery 0.1.1 → 0.2.0

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

@@ -1,7 +1,8 @@
 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 { svg } from "../icons.mjs";
+import { BLOCK_ICON } from "../icons.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
@@ -86,8 +87,8 @@ function elementOf(html, doc = globalThis.document) {
 // The most a description carries of one piece of markup (blocks.mjs `string`).
 const CARRIED = 1e6;
 
-// A block of four corners and a notch, a piece that fits something else.
-export const ICON = svg('<path d="M4 6.75A1.75 1.75 0 0 1 5.75 5H8a2 2 0 0 1 4 0h2.25A1.75 1.75 0 0 1 16 6.75V9a2 2 0 0 1 0 4v1.25A1.75 1.75 0 0 1 14.25 16H5.75A1.75 1.75 0 0 1 4 14.25z"/>');
+// The mark of any custom block with no picture of its own: a card of text (icons.mjs).
+export const ICON = BLOCK_ICON;
 
 export default {
   name: "installed",
@@ -102,12 +103,16 @@ export default {
   sealed: INSTANCE,
   units: {
     installed: {
-      name: t("组件@block"),
+      name: t("自定义块@block"),
       icon: ICON,
       match: [{ rank: 0, tag: ["div", "section"], attr: ATTRIBUTE }],
       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: {
@@ -130,11 +135,17 @@ 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 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
+      // that the file has none either, whatever its markup carried.
       extras(element, { nodes }) {
         const held = slotsIn(element).filter((slot) => slot.hasAttribute("data-ge-box")).flatMap((slot) => (nodes?.(slot) ?? []).map((node) => [slot.getAttribute(SLOT), node]));
         return {
           package: element.getAttribute(ATTRIBUTE),
           ...(element.hasAttribute("data-ge-copy") ? { html: element.getAttribute("data-ge-copy") } : {}),
+          ...(element.hasAttribute(VIEW_FROM) ? { from: element.getAttribute(VIEW_FROM) } : element.hasAttribute("data-ge-copy") ? { from: null } : {}),
           ...(slotsIn(element).length > 0 ? { children: held.map(([, node]) => node), boxKeys: held.map(([key]) => key) } : {}),
         };
       },

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

@@ -1,6 +1,9 @@
 import { ARRIVING, ATTRIBUTE, DATA_MOST, DATA_SHOWN, FALLBACK, FIELDS, INSTANCE, NO_TEXT, PACKAGE_MARK, SCHEMA, SLOT, SLOT_PART, componentAt, fitsDataScript, heldBy, instanceMatch, isDataScript, noDataPart, refusedInData, schemaAhead, slotsIn } from "../../../shared/components/installed.mjs";
 import { referencedIds } from "../../../shared/copy-ids.mjs";
+import { jsonIn } from "../../../shared/json-layout.mjs";
+import { CHART_SOURCE, VIEW_FROM } from "../../../shared/table-chart.mjs";
 import { language, t } from "../../../shared/i18n/index.mjs";
+import { searchWords } from "../../../shared/pinyin.mjs";
 import { caretAt, editable } from "../../page/caret.mjs";
 import { htmlToBlocks, parseClipboardHTML } from "../../page/clipboard/import/html.mjs";
 import { toBlocks } from "../../page/clipboard/import/to-blocks.mjs";
@@ -8,8 +11,11 @@ import { build as buildBlock } from "../../page/clipboard/own/blocks.mjs";
 import { copyOf } from "../../page/clipboard/own/describe.mjs";
 import { ownIds } from "../../page/clipboard/own/ids.mjs";
 import { firstHost, newHost, unitElement } from "../../page/core.mjs";
+import { openSettings } from "../../page/board/settings.mjs";
+import { bindAbove, keyOf, tableChoices } from "../../page/table/binding.mjs";
 import { addStyle } from "../../page/ui.mjs";
 import { accepts, capsFor } from "../registry.mjs";
+import { SETTINGS_ICON } from "../icons.mjs";
 import { ICON } from "./index.mjs";
 import { followCatalog, followSettings, isBehind } from "./served.mjs";
 
@@ -301,9 +307,6 @@ function keepSlots(node, from, next) {
   console.error(`[DocKit] ${instance.getAttribute(ATTRIBUTE)}: a slot left its instance: it is put back, its blocks the document's`);
 }
 
-// A package's picture where a menu shows a mark.
-const pictureOf = ({ preview }) => (preview ? `<img src="${preview}" alt="">` : null);
-
 // A slot the file has empty (an Agent's): what a disclosure's content says (details/page.mjs), a click
 // on it making a paragraph there (insert/ clickBlank).
 const SLOT_EMPTY = `
@@ -312,7 +315,7 @@ const SLOT_EMPTY = `
 `;
 
 /** An instance on the page: what its events are, what Enter does in its words, and what the menus make of its package. */
-export function create({ map, newParagraph, active, sourceStep, struct }) {
+export function create({ map, newParagraph, active, sourceStep, struct, look }) {
   held = map;
   addStyle(SLOT_EMPTY);
   // Whether a key in an instance, on no field of it, is undo or redo: a button or what a component draws
@@ -360,7 +363,73 @@ export function create({ map, newParagraph, active, sourceStep, struct }) {
     sourceStep(changed.map(([part, was]) => [part, was]));
     return true;
   }
+  // ---------- 设置 ----------
+  // An instance's 设置 (the handle's menu; the board's form of a custom page, page/board/settings.mjs, whose
+  // menu cards a choice is made in): the fields its manifest's `settings` lists, kept in its part
+  // `settings` (a script of JSON, what `context.editJSON` writes: one undo step, a change laid out as the
+  // part was), and for a view of a table (needs "tables") which table it reads, kept in its VIEW_FROM and on
+  // the table's frame (binding.mjs), one undo step too. Null where it has none: no field, or no part to keep
+  // them in, and no table to choose; an instance that does not run or that is past its manifest has no form.
+  const TABLE_FIELD = "__table"; // the form's field for the table: no setting of the manifest's
+  const settingsIn = (part) => {
+    try {
+      const value = JSON.parse(part?.textContent?.trim() || "{}");
+      return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+    } catch {
+      return {};
+    }
+  };
+  function formOf(instance) {
+    if (!active() || instance.hasAttribute(FALLBACK) || ahead(instance)) return null;
+    const entry = entryOf(instance.getAttribute(ATTRIBUTE));
+    if (!entry) return null;
+    const part = dataParts(instance).find(([name]) => name === "settings")?.[1] ?? null;
+    const fields = part ? entry.settings ?? [] : [];
+    const reads = entry.needs?.includes("tables") ?? false;
+    return fields.length > 0 || reads ? { entry, part, fields, reads } : null;
+  }
+  // The values of the manifest's fields put in the part, one `source` step, as editJSON writes them.
+  function writeSettings(instance, part, values) {
+    write({
+      parts: [{ name: "settings", part }],
+      run({ settings: draft }) {
+        const text = draft.textContent ?? "";
+        const current = settingsIn(draft);
+        draft.textContent = text.trim() ? jsonIn(text, { ...current, ...values }) : JSON.stringify({ ...current, ...values });
+        return true;
+      },
+    }, instance);
+  }
+  // The table a view reads put on it, as one undo step: its key on both, a new one on a table with none.
+  function readTable(instance, frame) {
+    const key = frame ? keyOf(frame) : null;
+    const keyed = frame && frame.getAttribute(CHART_SOURCE) !== key;
+    look([instance, ...(keyed ? [frame] : [])], [{ attributes: { [VIEW_FROM]: key } }, ...(keyed ? [{ attributes: { [CHART_SOURCE]: key } }] : [])]);
+  }
+  function openFormOf(instance) {
+    const form = formOf(instance);
+    if (!form) return;
+    const choices = form.reads ? tableChoices() : [];
+    const bound = form.reads ? choices.findIndex(({ frame }) => frame.getAttribute(CHART_SOURCE) === instance.getAttribute(VIEW_FROM) && instance.hasAttribute(VIEW_FROM)) : -1;
+    const fields = [
+      ...(form.reads ? [{ key: TABLE_FIELD, label: t("表格"), type: "choice", choices: [["", t("（未选择）")], ...choices.map(({ label }, at) => [String(at), label])] }] : []),
+      ...form.fields,
+    ];
+    const box = instance.getBoundingClientRect();
+    const top = Math.min(Math.max(box.top, 8), innerHeight - 40);
+    openSettings({
+      fields, name: form.entry.name,
+      values: { ...(form.part ? settingsIn(form.part) : {}), ...(form.reads ? { [TABLE_FIELD]: bound >= 0 ? String(bound) : "" } : {}) },
+      anchor: { left: box.left, right: box.right, top, bottom: top + 8, width: box.width, height: 8 },
+      save({ [TABLE_FIELD]: table, ...values }) {
+        if (table !== undefined) readTable(instance, table === "" ? null : choices[Number(table)]?.frame ?? null);
+        if (Object.keys(values).length > 0 && form.part?.isConnected) writeSettings(instance, form.part, values);
+      },
+    });
+  }
   return {
+    /** An instance's own rows in its block menu: 设置…, where it has a form (formOf). */
+    menuItems: (unit) => (formOf(unit) ? [{ label: t("设置…"), icon: SETTINGS_ICON, run: () => openFormOf(unit) }] : []),
     keepsKeys: (node, event) => componentAt(node) && !editable(node) && !pageUndo(node, event),
     undoHere: (node) => componentAt(node) && !editable(node),
     keys: {
@@ -398,22 +467,34 @@ export function create({ map, newParagraph, active, sourceStep, struct }) {
     // insertTypedBlock: the caret in its first text part; with none, in an empty paragraph after it, as
     // for a divider). Its slots are boxes made on the page at once, what the template has in each made
     // blocks of the page's (an empty paragraph where it has none), so that the reader writes in one
-    // before the instance is saved, and Enter in a text part goes into the slot after it.
-    menuVariants: () => Object.fromEntries((map.components ?? []).filter(({ template, state }) => template && state === "normal").map((entry) => [entry.id, {
-      label: entry.name[language],
-      icon: pictureOf(entry) ?? ICON,
-      words: `${entry.name.zh} ${entry.name.en} ${entry.id} ${entry.words}`.toLowerCase(),
-      sample: true,
-      preview: { src: entry.preview, says: entry.description[language] },
-      create({ doc, put: place, paragraph }) {
-        bring(entry);
-        const instance = newInstance(doc, entry.template);
-        slotsMade(doc, instance, (slot) => blocksOfTemplate(doc, slot));
-        ownIds(doc, [instance]);
-        place(instance);
-        return editableParts(instance)[0] ?? firstHost(instance) ?? place(paragraph());
-      },
-    }])),
+    // before the instance is saved, and Enter in a text part goes into the slot after it. One whose needs
+    // hold "tables" is a view of a table (`readsTables`), which binds itself to the nearest table above it as
+    // it is made (VIEW_FROM: page/table/binding.mjs). Where two offered have one name (the same block
+    // of two packs: 我的待办 of Gallery 风格 and of 柔光风格), each row says its pack's name after it in grey
+    // (`of`: the menu's ge-pop-of).
+    menuVariants: () => {
+      const offered = (map.components ?? []).filter(({ template, state }) => template && state === "normal");
+      const counts = new Map();
+      for (const entry of offered) counts.set(entry.name[language], (counts.get(entry.name[language]) ?? 0) + 1);
+      return Object.fromEntries(offered.map((entry) => [entry.id, {
+        label: entry.name[language],
+        ...(counts.get(entry.name[language]) > 1 ? { of: entry.pack?.name?.[language] ?? entry.id.split("/")[0] } : {}),
+        icon: ICON,
+        words: searchWords(entry),
+        sample: true,
+        readsTables: entry.needs?.includes("tables") ?? false,
+        preview: { src: entry.preview, says: entry.description[language] },
+        create({ doc, put: place, paragraph }) {
+          bring(entry);
+          const instance = newInstance(doc, entry.template);
+          slotsMade(doc, instance, (slot) => blocksOfTemplate(doc, slot));
+          ownIds(doc, [instance]);
+          place(instance);
+          if (entry.needs?.includes("tables")) bindAbove(instance); // a view reads the nearest table above it; its 设置 changes that
+          return editableParts(instance)[0] ?? firstHost(instance) ?? place(paragraph());
+        },
+      }]));
+    },
     /**
      * Whether a copy of an instance's unit stands for it: not where it has slots, whose blocks that copy
      * would write whole, with no ids the page knows; such an instance is copied by what it carries alone
@@ -447,11 +528,8 @@ export function create({ map, newParagraph, active, sourceStep, struct }) {
       if (next) caretAt(next, "start");
       else if (next === null) selection.removeAllRanges();
     },
-    /** Its package's picture, or the mark of any component. */
-    iconOf: (unit) => {
-      const entry = entryOf(unit.getAttribute(ATTRIBUTE));
-      return (entry && pictureOf(entry)) ?? ICON;
-    },
+    /** The mark of a custom block: the one every custom block has in a menu, its picture shown beside its row instead. */
+    iconOf: () => ICON,
     /**
      * What of an instance its component writes, part by part, as the file is to hold it (null: nothing
      * here does): its parts as the kit's dehydrate leaves them, what it and its component leave on them