@heycys/gallery 0.1.1 → 0.2.0

package/browser/editor/page/insert/index.mjs

@@ -1,10 +1,10 @@
 import { OUTER, UNIT, blocksIn, boxKind, heldIn, newHost, newTail, placeBefore, unitElement, withLeads } from "../core.mjs";
 import { containerType } from "../convert.mjs";
 import { begin, done, made } from "../made.mjs";
-import { selectsBeside } from "../beside.mjs";
+import { caretBeside } from "../beside.mjs";
 import { caretAt, nearestOnLine, placeCaret, selectAt } from "../caret.mjs";
 import { sectionOps } from "../page-objects.mjs";
-import { contentOf, endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
+import { endOf, hoverAt, innerBox, measure } from "../geometry.mjs";
 import { BOXED, HOLDS_ONE, accepts } from "../../components/registry.mjs";
 import { DIALOG } from "../../components/kit.mjs";
 
@@ -18,9 +18,9 @@ import { DIALOG } from "../../components/kit.mjs";
 
 /**
  * struct(parents, touched, mutate): the editor's undoable structural change (history.mjs). blocks():
- * the block tools (blocks.mjs).
+ * the block tools (blocks.mjs). after: the caret after a block (after/).
  */
-export function createInsert({ struct, blocks }) {
+export function createInsert({ struct, blocks, after }) {
   // An empty paragraph right before the block of a text block, the caret staying where it is.
   // Returns whether one could go there.
   function paragraphBefore(host) {
@@ -54,10 +54,10 @@ export function createInsert({ struct, blocks }) {
   // (geometry.mjs endOf). Under the last block of a box whose end is its own padding (endIsPadding: a
   // highlight block, a callout, a disclosure's content; the user's, 2026-11-06, as notion-lite's click-blank.js
   // makes a block only below the page and in a column) it is a gap like any other, below. Right of
-  // the text area a boxed block (a code block, a callout, a file…: not text) or a row of columns
-  // stands in, at its height (boxedBeside), that block selected, so Delete takes it and Enter puts a
-  // paragraph after it; between a narrower block's right edge and its column's, as beside any block
-  // of no text (below). Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
+  // a boxed block (a code block, a callout, a file…: not text) or a row of columns, at its height
+  // (boxedBeside), the caret after it, at its bottom right (after/: Backspace deletes it, Enter or a
+  // key makes a paragraph after it; the user's, 2026-11-09: a click there selected it before).
+  // Elsewhere beside text, the caret goes into the text block on that line (the nearest of those
   // side by side), where the line is nearest the click (Notion's way); in the gap between two
   // blocks, or beside a block of no text, into the nearer of the blocks around it that is text, in the
   // innermost box at that height (boxBeside: the press may be on the page's margin, the block in a
@@ -82,7 +82,7 @@ export function createInsert({ struct, blocks }) {
     if (end) return newParagraph(end.box, end.after);
     const top = y + scrollY;
     const beside = boxedBeside(main, x, y, target);
-    if (beside) return blocks().select(beside);
+    if (beside) return after.place(beside);
     const host = hoverAt(measure(main, { top, bottom: top }), x + scrollX, top, { reach: Infinity, skip: (unit) => !unit.text });
     if (host) return caretNear(host, x, y);
     for (let around = boxBeside(box, x, y); around; around = around === box ? null : around.parentElement.closest("[data-ge-box]")) {
@@ -157,26 +157,24 @@ export function createInsert({ struct, blocks }) {
     const texts = [unit, ...unit.querySelectorAll("[data-ge-block], [data-ge-new]")].filter((node) => node.isContentEditable && node.getClientRects().length > 0 && !node.closest("details:not([open]) > :not(summary)"));
     return (last ? texts.at(-1) : texts[0]) ?? null;
   }
-  // A boxed block or a row of columns at height `y` with (x, y) right of the text area it stands in
-  // (the content box of its box: the page's column, a column of 分栏, a section's, a quote's, a
-  // highlight block's or a callout's, a disclosure's content) and right of the block itself (one
-  // wider than that area), or null: in the page's margin, or in the padding of the box it stands in;
-  // never between a narrower block's right edge and its area's (a table, a picture: the user's,
-  // 2026-11-07, a click there selected it), nor in another text area (the blank box `target` the
-  // press was on holds the block: a column further right is no place beside one in the column left
-  // of it). The innermost, but never a block inside a row of columns the click is to the right of too
-  // (the row is selected whole): past a column's edge is the gap to the next column, whose press is
-  // the gap's (columns/: it drags, a click alone changes nothing), or past the row, which is selected.
+  // A boxed block or a row of columns at height `y` with (x, y) right of it: between its right edge
+  // and the text area's it stands in (a table, a picture narrower than its column: the user's,
+  // 2026-11-09, the caret after it where a click there once selected it, 2026-11-07, and later went to
+  // the nearest text), in the padding of the box it stands in (a highlight block's, a callout's) or in the
+  // page's margin; or null. Never in another text area (the blank box `target` the press was on holds the
+  // block: a column further right is no place beside one in the column left of it). The innermost,
+  // but never a block inside a row of columns the click is to the right of too (the caret goes after
+  // the row): past a column's edge is the gap to the next column, whose press is the gap's (columns/:
+  // it drags, a click alone changes nothing), or past the row.
   function boxedBeside(main, x, y, target) {
     let found = null;
     const right = (unit) => {
       const rect = unit.getBoundingClientRect();
       if (y < rect.top || y > rect.bottom || (target?.contains && !target.contains(unit))) return false;
-      const box = unit.parentElement;
-      return x > Math.max(rect.right, contentOf(box.getBoundingClientRect(), getComputedStyle(box)).right);
+      return x > rect.right;
     };
     for (const unit of main.querySelectorAll(`[data-ge-unit-kind]`)) {
-      if (!selectsBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;
+      if (!caretBeside(unit) || !unit.parentElement?.hasAttribute("data-ge-box") || unit.parentElement.closest("details:not([open])")) continue;
       if (!right(unit)) continue;
       const row = unit.parentElement.closest('[data-ge-unit-kind="columns"]');
       if (row && main.contains(row) && right(row)) continue;

package/browser/editor/page/links/index.mjs

@@ -9,7 +9,7 @@ import { placeBox } from "../placement.mjs";
 import { tooltip } from "../tooltip.mjs";
 import { addStyle, copyAddress, element, fadeIn, mount, swallowNext } from "../ui.mjs";
 import { typedHref } from "./address.mjs";
-import { findPages, heldList, pageRows, placeIn, readPages, titleIn, trashed } from "./pages.mjs";
+import { findPages, heldList, pageRows, placeIn, readPages, titleIn, trashed, webLinkIn } from "./pages.mjs";
 import { DIALOG_TRIGGER } from "../../components/dialog/index.mjs";
 import { DIALOG_ICON } from "../../components/icons.mjs";
 import { VIEWS, closeOffer, closeViews, hasViews, hrefOf, isPageChip, offerViews, openViews, pageChip, refetch, viewNodes, viewOf, viewsHold } from "./views.mjs";
@@ -668,12 +668,14 @@ async function listedPage(address) {
 
 /**
  * Whether a page alone in a tab may leave for a workbench's `hash`, which only the list reads: not for
- * one that names no document, said as the workbench says it, the page staying. With no answer it goes,
+ * one that names no document, said as the workbench says it, the page staying. A web link of the sidebar,
+ * or an entry of an extension's column with an address (#~<id>/<entry id>), is a place the workbench
+ * opens (in its content area), so it goes there. With no answer it goes,
  * for the workbench to say.
  */
 export async function leadsToPage(hash) {
   const list = await readPages(use.own());
-  if (!list || placeIn(list, `#${hash}`)) return true;
+  if (!list || placeIn(list, `#${hash}`) || webLinkIn(list, hash)) return true;
   use.say(inTrash(list.trash, hash) ? t("这个页面已删除。") : t("没有找到这个页面。"));
   return false;
 }

package/browser/editor/page/links/pages.mjs

@@ -1,15 +1,21 @@
 import { iconUrl } from "../../../shared/emoji/icon-value.mjs";
 import { escapeAttribute } from "../../../shared/escape.mjs";
 import { addressOn, decoded, hashAddress } from "../../../shared/page-address.mjs";
+import { DOCS, isTop, topOf } from "../../../shared/outline-shape.mjs";
+import { entryOfKey } from "../../../shared/extension-sidebar.mjs";
 import { inTrash, namedLinks, pageLink, pageLinks } from "../../../shared/page-links.mjs";
 import { PAGE_ICON } from "../../components/icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
 
 // The documents of the workspace, as a link's card, a page block's box and "@" look for them
 // (docs/editor.md, "Links"): one search for the three. The list is read once for each opening from
 // what the workbench reads itself (GET /__gallery/workspace/outline: no route of its own, nothing
-// pushed), in the sidebar's order, each document with the title of the one above it in the sidebar; 写作偏好
-// is no page to link to, and this page has the title it shows now, not the one last saved. A list that
-// cannot be read is no results, and the field goes on taking addresses.
+// pushed), in the sidebar's order, column after column (栏: shared/outline-shape.mjs), each document with
+// the title of the one above it in the sidebar; 写作偏好 is no page to link to, nor is a web link of the
+// sidebar (kind "link": no file of its own to link to; the documents under one are pages all the same) or a
+// draft of another workspace (kind "draft": its file is that workspace's, which no relative link reaches),
+// and this page has the title it shows now, not the one last saved. A list that cannot be read is no
+// results, and the field goes on taking addresses.
 //
 // What a copy writes is an address by a page's link, and a copy cannot wait for an answer: the
 // clipboard takes a write only in the click itself. So the page holds the list ready, the last one
@@ -31,8 +37,8 @@ let shown = () => null; // this page, as readPages takes it
 
 /**
  * The workspace's documents: { pages: [{ slug, title, icon, parent }] (`parent`: the title of the one
- * it is under, or null), links: their links (shared/page-links.mjs), trash: what the trash holds }, or
- * null when the list cannot be read. `own`: this page, { slug, title } as it shows it.
+ * it is under, or null), links: their links (shared/page-links.mjs), trash: what the trash holds but web links }, or
+ * null when the list cannot be read (`webs`: the links of the sidebar's web links, which are no pages). `own`: this page, { slug, title } as it shows it.
  */
 export async function readPages(own = null) {
   const listed = await fetch(OUTLINE).then((answer) => answer.json()).catch(() => null);
@@ -41,13 +47,18 @@ export async function readPages(own = null) {
   const pages = [];
   const walk = (parent) => {
     for (const slug of listed.outline?.children?.[parent] ?? []) {
-      if (!listed.reports[slug] || listed.reports[slug].instructions) continue;
-      pages.push({ slug, title: titleOf(slug) || slug, icon: listed.reports[slug].icon ?? null, parent: parent ? titleOf(parent) || parent : null });
+      const report = listed.reports[slug];
+      if (!report || report.instructions) continue;
+      // An untitled document is named 未命名文档, as the workbench names it (its link's words: its page id alone).
+      if (report.kind !== "link" && report.kind !== "draft") pages.push({ slug, title: titleOf(slug) || t("未命名文档"), icon: report.icon ?? null, parent: isTop(parent) ? null : titleOf(parent) || t("未命名文档") });
       walk(slug);
     }
   };
-  walk("");
-  held = { pages, links: pageLinks(pages.map(({ slug }) => ({ slug, title: titleOf(slug) }))), trash: listed.trash ?? [] };
+  for (const { id } of listed.outline?.groups ?? [{ id: DOCS }]) walk(topOf(id));
+  // The sidebar's web links, by their links as a workbench's hash holds them: no page to link to, but an address the workbench opens.
+  const web = Object.values(listed.reports).filter((report) => report.kind === "link").map(({ slug, title }) => ({ slug, title }));
+  // And the extensions' columns (their entries: an address #~<id>/<entry id> the workbench opens too).
+  held = { pages, links: pageLinks(pages.map(({ slug }) => ({ slug, title: titleOf(slug) }))), webs: pageLinks(web), extensions: listed.extensions ?? [], trash: (listed.trash ?? []).filter(({ kind }) => kind !== "link") };
   return held;
 }
 
@@ -118,6 +129,13 @@ export function placeIn(list, text) {
   return page ? { ...page, block: place.block } : null;
 }
 
+/**
+ * Whether workbench hash `hash` (no #) names a web link of the sidebar, or an entry of an extension's
+ * column that has an address (#~<id>/<entry id>): the workbench opens it in its content area, though it
+ * is no page to link to.
+ */
+export const webLinkIn = (list, hash) => Boolean(hashAddress(decoded(hash), list.webs) || entryOfKey(list.extensions, decoded(hash))?.url);
+
 /** The title of the page `text` is an address of, of `list` or of its trash, or null: what stands for a link to it where its address would be a folder's. */
 export function titleIn(list, text) {
   const binned = addressOn(text, pageLinks(list.trash), globalThis.location?.origin)?.slug;

package/browser/editor/page/look.mjs

@@ -1,13 +1,15 @@
 // What every popup of the editor is painted with, written once: Notion's neutral palette, its blue
 // and its two shadows, light and dark by light-dark() (the page's color-scheme decides). A sheet of
-// `:root` custom properties, put in every document the editor draws in (ui.mjs addStyleTo), so a
+// `:root` custom properties and the one button look (BUTTONS), put in every document the editor draws in (ui.mjs addStyleTo), so a
 // menu, a card, a bar, a notice reads them wherever it stands and none declares a palette of its
 // own. Values are Notion's own as notion-lite carries them (view/theme/notion-vars.css), which this
 // editor follows; the page's content colors (--doc-*, the kit's tokens.css) are another matter.
 //
 // The blue is two tokens because notion-lite has two, for two jobs: --ge-accent (its
-// --c-bluBacAccPri: a primary button, a switch, a chosen icon) and --ge-focus (its --c-butBluFocRin
-// and --c-inpBluFocRin: the ring round a focused field).
+// --c-bluBacAccPri: a switch, a chosen icon, a table's tools, the bars that mark a place) and
+// --ge-focus (its --c-butBluFocRin and --c-inpBluFocRin: the ring round a focused field). A button is
+// neither: the one button look is BUTTONS below, whose primary is a pale blue (--ge-btn-primary*), the
+// workbench's, never the solid --ge-accent.
 //
 // Two shadows, because Notion has two surfaces: --ge-shadow, a card standing over the text (the
 // format bar, the formula and link cards, the conflicts, a notice), and --ge-shadow-pop, a menu
@@ -15,6 +17,38 @@
 // emoji-picker/support.mjs keeps notion-lite's --c-* variables only for the media menu and the image's
 // alignment bar.
 
+/**
+ * The one look of a button the editor draws on a page (the Agent changes' bar, the conflict card and the lost
+ * texts' panel, the crop window, a list's number, the icon picker's upload, the media menu): rules in the
+ * palette's sheet, so that every document the editor draws in has them from the first paint and no style
+ * repeats them. `.ge-btn` is a text button (ui.mjs textButton): no line and no fill, a gray under the
+ * pointer and while the keys are on it, a deeper one pressed; `data-primary` the pale blue (add, confirm,
+ * save), with `data-danger` the pale red (a delete); `data-quiet` a small one for looking, not deciding
+ * (收起, 定位). `.disabled` and `aria-disabled` are how a button made of a div says it cannot be pressed.
+ * `.ge-icon-btn` is the look of an icon button standing alone (a 批注's marker and its delete): no fill under
+ * the pointer (the icon goes darker), a gray only while it is pressed. The tools of a bar (the format bar's,
+ * the link card's) and a menu's rows are gray under the pointer, as Notion's are. Text fields are not
+ * buttons: they keep their thin outline.
+ */
+const OFF = ":disabled, .disabled, [aria-disabled=\"true\"]";
+export const BUTTONS = `
+  .ge-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; box-shadow: none; background: transparent; color: var(--ge-tx); font: inherit; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background 20ms ease-in; }
+  .ge-btn:is(:hover, :focus-visible):not(${OFF}) { outline: none; background: var(--ge-hover); }
+  .ge-btn:active:not(${OFF}) { background: var(--ge-press); }
+  .ge-btn[data-primary] { background: var(--ge-btn-primary); color: var(--ge-btn-primary-text); }
+  .ge-btn[data-primary]:is(:hover, :focus-visible):not(${OFF}) { background: var(--ge-btn-primary-hover); }
+  .ge-btn[data-primary]:active:not(${OFF}) { background: var(--ge-btn-primary-press); }
+  .ge-btn[data-primary][data-danger] { background: var(--ge-btn-danger); color: var(--ge-btn-danger-text); }
+  .ge-btn[data-primary][data-danger]:is(:hover, :focus-visible):not(${OFF}) { background: var(--ge-btn-danger-hover); }
+  .ge-btn[data-primary][data-danger]:active:not(${OFF}) { background: var(--ge-btn-danger-press); }
+  .ge-btn[data-quiet] { height: 24px; padding: 0 6px; color: var(--ge-tx2); font-weight: 400; }
+  .ge-btn[data-quiet]:is(:hover, :focus-visible):not(${OFF}) { color: var(--ge-tx); }
+  .ge-btn:is(${OFF}) { opacity: .45; cursor: default; }
+  .ge-icon-btn { border: 0; box-shadow: none; background: transparent; cursor: pointer; transition: background 20ms ease-in, color 20ms ease-in; }
+  .ge-icon-btn:hover:not(:disabled) { color: var(--ge-ico); }
+  .ge-icon-btn:active:not(:disabled) { background: var(--ge-press); }
+`;
+
 export const TOKENS = `
   :root {
     --ge-tx: light-dark(#2c2c2b, #f0efed);
@@ -40,6 +74,17 @@ export const TOKENS = `
     --ge-focus: #2383e2;
     --ge-red: light-dark(#eb5757, #ff6b6b);
     --ge-quote: light-dark(rgb(28 19 1 / 16%), rgb(255 255 235 / 16%));
+    /* Buttons (BUTTONS below; the user's rule, restated 2026-11-09): a primary is a pale blue fill, always shown, its words the
+       deeper blue; a primary that cannot be taken back a pale red; every other button has no fill and no line, a gray under
+       the pointer (--ge-hover) and a deeper one pressed (--ge-press). The workbench's own values (--btnPriBg, --btnDanBg: tokens.css). */
+    --ge-btn-primary: light-dark(rgb(35 131 226 / 14%), rgb(67 155 255 / 24%));
+    --ge-btn-primary-hover: light-dark(rgb(35 131 226 / 22%), rgb(67 155 255 / 34%));
+    --ge-btn-primary-press: light-dark(rgb(35 131 226 / 30%), rgb(67 155 255 / 44%));
+    --ge-btn-primary-text: light-dark(#1a69bd, #7ab8ff);
+    --ge-btn-danger: light-dark(rgb(235 87 87 / 14%), rgb(255 104 92 / 24%));
+    --ge-btn-danger-hover: light-dark(rgb(235 87 87 / 22%), rgb(255 104 92 / 34%));
+    --ge-btn-danger-press: light-dark(rgb(235 87 87 / 30%), rgb(255 104 92 / 44%));
+    --ge-btn-danger-text: light-dark(#c4403c, #ff9a90);
     --ge-fill: light-dark(rgb(35 131 226 / 14%), rgb(35 131 226 / 28%));
     --ge-halo: rgb(35 131 226 / 14%);
     --ge-select: light-dark(rgb(35 131 226 / 28%), rgb(35 131 226 / 45%));
@@ -55,6 +100,11 @@ export const TOKENS = `
     --ge-toast-bg: light-dark(#0f0f0f, #2f2f2f);
     /* The quiet gray a heading is lit with for a moment when the outline goes to it (outline/), never a blue. */
     --ge-outline-flash: light-dark(rgb(33 27 23 / 7%), rgb(255 255 255 / 8%));
+    /* The lines a size is dragged by (resize/, columns/), grays like Notion's column resizer (its border.primaryTranslucent), never a
+       bright blue (the user, 2026-11-07): where a drag may start, the line being dragged, and that line where it snaps. */
+    --ge-guide: light-dark(rgb(55 53 47 / 16%), rgb(255 255 255 / 14%));
+    --ge-guide-hot: light-dark(rgb(55 53 47 / 36%), rgb(255 255 255 / 32%));
+    --ge-guide-snap: light-dark(rgb(55 53 47 / 62%), rgb(255 255 255 / 58%));
     /* 批注 (annotate/): a warm mark on the words an annotation is about, its 2px underline leading (a faint fill, so it is never
        taken for the report's own yellow background), a block anchor's bar; stronger for the one shown. */
     --ge-note: light-dark(rgb(255 212 0 / 6%), rgb(255 212 0 / 6%));
@@ -74,4 +124,5 @@ export const TOKENS = `
     --ge-diff-del-fill: light-dark(rgb(223 22 0 / 4.5%), rgb(255 104 92 / 10%));
     --ge-diff-del-text: light-dark(#cf5148, #ff8f85);
   }
+  ${BUTTONS}
 `;

package/browser/editor/page/margin.mjs

@@ -1,5 +1,6 @@
 import { OLD_OUTLINE_OPEN_KEY, OLD_PREFERENCES_KEY, OUTLINE_OPEN_KEY, PREFERENCES_KEY } from "../../shared/preferences.mjs";
 import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
+import { ADD, HANDLE } from "./handle-sizes.mjs";
 
 // The right side of the page while it is edited (docs/editor.md, "The outline and the right side"): the
 // outline (目录, outline/) docked at the window's right edge, the cards of 批注 (annotate/) between it and
@@ -52,9 +53,18 @@ import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
 // column stands where it will stay from the first paint, and by setMargin() after that.
 // When they move the column, the page hears a resize, so what stands over the text (the format bar, a
 // selection's strips, a card) is placed again.
+//
+// The edge room is also the page's gutters (the kit's --doc-page-gutter and --doc-wide-gutter, page.css),
+// set by MARGIN_STYLE, which the edit service puts in the page's head: the column the kit lets show
+// (data-doc-ready, the frame a workbench swaps the page in on) stands where the editor keeps it, its lines
+// broken as they stay, before the editor has started, the outline off and no 批注 as much as with them.
+// (Until 2026-11-09 the handle put them in once the page edited: in a workbench with its sidebar open, a
+// page 795px wide came in with the kit's 20px gutters, its column 712 wide and 42 in, and moved to 667 and
+// 64 a few frames later, its lines breaking anew: the user's report on 0.1.1.)
 
 /**
- * The numbers: the edge room (the least room either side of the column keeps), the least it gives up
+ * The numbers: the edge room (the least room either side of the column keeps, and the page's gutters:
+ * the bar's square left of the block handle's grip, the grip, its gap and room to breathe, 64), the least it gives up
  * to (the block handle's: its 38px, its 12px gap, 2px), the column, the least a full-width column
  * keeps, the outline in full (its default width, the least and the most it is dragged to), its
  * list's inset in its panel (`guide`: the column's right room ends there, at the list's edge, its
@@ -65,7 +75,7 @@ import { LOOK_ATTRIBUTES } from "../../shared/document-look.mjs";
  * clear; one focused comes 20px left, and no button shows then), a card's width, the least it gives up
  * to, and the room past it (clear of the outline's list: its guide and grip).
  */
-export const MARGIN = Object.freeze({ edge: 64, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
+export const MARGIN = Object.freeze({ edge: ADD.width + HANDLE.width + HANDLE.gap + 12, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
 
 /**
  * The outline's width in full for the reader's choice `chosen` (px; 0 or none: the default), within
@@ -116,8 +126,13 @@ export function marginLayout({ width, outline = false, collapsed = false, notes
 
 const SLIDE = 200; // ms: the column's slide as the page comes to have 批注 or has none left
 
-/** The page's rules for the room: the column placed (and narrowed only when it must), screen only. */
+/**
+ * The page's rules for the room: its gutters the edge room, and on screen the column placed (and
+ * narrowed only when it must).
+ */
 export const MARGIN_STYLE = `
+  /* The handle's room beside the page's blocks, the page's gutters from its first paint (a page the editor edits: this sheet is in the head the edit service serves); resize/ and the workbench's sidebar read --ge-edge-room. */
+  :root { --ge-edge-room: ${MARGIN.edge}px; --doc-page-gutter: var(--ge-edge-room); --doc-wide-gutter: var(--ge-edge-room); }
   @media screen {
     :root[data-ge-margin] {
       /* The least room either side of the column keeps (marginLayout's side: the edge room, less where the page is short of it, down to the handle's). */

package/browser/editor/page/media-menu/index.mjs

@@ -28,15 +28,14 @@ const STYLE = `
   .nmedia-menu-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; border-bottom: 2px solid var(--c-texPri); }
   .nmedia-menu-body { padding: 12px 12px 10px; }
   .nmedia-menu-inner { display: flex; justify-content: center; padding: 4px; }
-  .nmedia-menu-upload { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ca-borPriTra); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 20ms ease-in; }
-  .nmedia-menu-upload:hover { background: var(--ca-bacIntTra); }
+  /* Its buttons are the editor's one button look (look.mjs BUTTONS): the pale blue primary, here what the tab does. */
+  .nmedia-menu-upload, .nmedia-menu-embed { width: 100%; font-size: 14px; }
   .nmedia-menu-link { flex-direction: column; align-items: stretch; gap: 8px; }
   .nmedia-menu-input { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 3px 6px; border-radius: 6px; background: var(--ca-bacSecTra); box-shadow: 0 0 0 1px var(--ca-borPriTra); box-sizing: border-box; }
   .nmedia-menu-input:focus-within { box-shadow: var(--c-inpBluFocRin); }
   .nmedia-menu-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-texPri); }
   .nmedia-menu-input input::placeholder { color: var(--c-texTer); }
-  .nmedia-menu-embed { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; margin: 0 auto; height: 28px; padding: 0 8px; border-radius: 6px; background: var(--c-bluBacAccPri); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; }
-  .nmedia-menu-embed:hover { filter: brightness(.94); }
+  .nmedia-menu-embed { max-width: 300px; margin: 0 auto; }
   .nmedia-menu-caption { margin: -6px 0 4px; padding: 4px 0; font-size: 12px; line-height: 1.4; color: var(--c-texSec); text-align: center; }
   .nmedia-menu.dragover .nmedia-menu-body { background: var(--ca-bluBacSecTra); }
   .nmedia-menu-choose { margin-top: 8px; }
@@ -76,10 +75,10 @@ export function openMediaMenu(anchor, { tabs, width, upload = {}, link = {}, onU
       `<div class="nmedia-menu-tab-wrap"><div role="tab" class="nmedia-menu-tab${key === current ? " active" : ""}" aria-selected="${key === current}" data-tab="${key}">${esc(label)}</div></div>`).join("")}</div>` : "")
       + `<div class="nmedia-menu-body">${current === "upload"
         ? (upload.primary
-          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="nmedia-menu-embed nmedia-menu-choose" data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
-          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="nmedia-menu-upload" data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
+          ? `<div class="nmedia-menu-inner nmedia-menu-link"><div role="button" tabindex="0" class="ge-btn nmedia-menu-embed nmedia-menu-choose" data-primary data-do="upload">${esc(upload.label ?? t("选择文件"))}</div>${upload.caption ? `<div class="nmedia-menu-caption">${esc(upload.caption)}</div>` : ""}</div>`
+          : `<div class="nmedia-menu-inner"><div role="button" tabindex="0" class="ge-btn nmedia-menu-upload" data-primary data-do="upload">${esc(upload.label ?? t("上传文件"))}</div></div>`)
         : `<div class="nmedia-menu-inner nmedia-menu-link"><div class="nmedia-menu-input"><input type="url" placeholder="${esc(link.placeholder ?? t("粘贴链接…"))}" autocomplete="off"></div>`
-          + `<div role="button" tabindex="0" class="nmedia-menu-embed" data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
+          + `<div role="button" tabindex="0" class="ge-btn nmedia-menu-embed" data-primary data-do="embed">${esc(link.button ?? t("嵌入链接"))}</div>`
           + (link.caption ? `<div class="nmedia-menu-caption">${esc(link.caption)}</div>` : "") + "</div>"}</div>`;
     const input = el.querySelector("input");
     if (input) {

package/browser/editor/page/menu.mjs

@@ -37,6 +37,8 @@ const STYLE = `
   }
   /* A width given (data-sized: opts.width, placed by place()): that width, whatever the rows hold. */
   .ge-pop[data-sized] { min-width: 0; max-width: calc(100vw - 16px); }
+  /* A short list of one kind of word (a card's 大小 ›: 4 × 2): only as wide as its rows, no 180px floor. */
+  .ge-pop[data-compact] { min-width: 0; }
   @keyframes ge-pop-in { from { opacity: 0; transform: scale(.98); } }
   @media (prefers-reduced-motion: reduce) { .ge-pop { animation: none; } }
   .ge-pop-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
@@ -58,6 +60,7 @@ const STYLE = `
      words and the hint takes what is left, cut short with an ellipsis where it is too long (an English
      row's current choice once took the whole row, its label drawn 0px wide). */
   .ge-pop-label:has(+ .ge-pop-hint) { flex: 1 0 auto; max-width: 100%; }
+  .ge-pop-of { color: var(--ge-tx3); }
   .ge-pop-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ge-tx3); font-size: 12px; white-space: nowrap; }
   /* A row of a page (its title, the page it is under as its hint): a long title is what an ellipsis
      cuts, and the page above keeps its words, up to a part of the row. */
@@ -83,8 +86,8 @@ const STYLE = `
   /* A note wraps at the card's width and never widens it (no width of its own: contain). */
   .ge-pop-note { contain: inline-size; padding: 0 12px 6px 40px; color: var(--ge-tx3); font-size: 12px; line-height: 1.5; }
   .ge-pop-empty { padding: 8px 12px; color: var(--ge-tx3); }
-  /* What a row makes, shown beside it under the pointer (a component package's preview.svg). */
-  .ge-pop-preview { display: block; width: 240px; max-height: 180px; border-radius: 4px; object-fit: contain; background: var(--ge-bg); }
+  /* What a row makes, shown beside it under the pointer (a component package's preview.svg), in the middle of the bubble: its description under it wraps wider than the picture. */
+  .ge-pop-preview { display: block; width: 240px; max-width: 100%; max-height: 180px; margin: 0 auto; border-radius: 4px; object-fit: contain; object-position: center; background: var(--ge-bg); }
   .ge-pop-search { position: sticky; top: 0; z-index: 1; padding: 8px 8px 6px; background: var(--ge-bg); }
   .ge-pop-search input { box-sizing: border-box; width: 100%; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; outline: none; background: var(--ge-hover); color: var(--ge-tx); font: inherit; box-shadow: inset 0 0 0 1px var(--ge-line); }
   .ge-pop-search input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
@@ -125,10 +128,12 @@ const opened = new Set(); // the menus open now, whichever part of the page open
 export const menuOpen = () => opened.size > 0;
 
 /**
- * items: rows { label, run, icon?, hint?, long?, current?, checked?, disabled?, note?, preview? } (long:
+ * items: rows { label, run, icon?, of?, hint?, long?, current?, checked?, disabled?, note?, preview? } (of: what
+ * the label is of, grey after it, a block's pack where two rows have one name; long:
  * a label of any length, a page's title, cut before its hint is; current: the choice
  * made, checked and not to be chosen again; checked: a switch that is on, checked and clicked to turn
- * it off; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
+ * it off; selected: the choice of a dropdown (a field's list of options), checked as current is but
+ * still a row to click, which closes the card with nothing changed; preview: { src, says }, a picture of what the row makes, where it has one, and a line on it,
  * shown at the row's right while the pointer rests on it, notion-lite's row tooltip) (or { label, icon?, submenu:
  * () => items, width?, search? } opening a submenu, with a search field at its top when `search` is
  * given, as `opts.search` below, and `search.empty` the words shown when nothing is found; a row
@@ -140,10 +145,14 @@ export const menuOpen = () => opened.size > 0;
  * as its rows (FIT; SEARCHING with a search field). around: the rect of the block a handle
  * (the anchor) stands for; the menu keeps clear of that block: left of it beside the handle, else
  * below or above it (scrolling inside when only part of it fits), and over it only when the block
- * leaves no room at all. side: "right": beside the anchor, right of it (left of it when there is no
+ * leaves no room at all; a tall block (more than TALL high: a table, a formula, a highlight, an image)
+ * has it beside the handle, left of it or, with no room there,
+ * right of it over the block, centered on the handle, never over the handle. side: "right": beside the anchor, right of it (left of it when there is no
  * room), level with it (a section's bar). Without either the menu stands below the anchor (the
  * caret), or above it when there is no room below; align: "end", its right edge at the anchor's.
- * icons: false, rows of words alone (no column for icons: a code block's languages); height: the
+ * icons: false, rows of words alone (no column for icons: a code block's languages; a row that opens a
+ * submenu says it of its own as `icons: false`, and `compact: true` makes it only as wide as its rows, no
+ * 180px floor: a card's 大小 ›); height: the
  * card's greatest height, in px (its rows scroll inside it past that). stand(size): where the card
  * stands, its { left, top } for its { width, height }, in place of all of these rules (a pasted
  * address's 选择视图, by the format bar's rule: placement.mjs besideText). inside: an element the rows
@@ -221,7 +230,8 @@ export function createMenu() {
         if (row.split) row.setAttribute("data-split", "");
         if (item.long) row.setAttribute("data-long", "");
         if (options.icons !== false) words.append(element("span", { class: "ge-pop-icon", html: item.icon ?? "" }));
-        words.append(element("span", { class: "ge-pop-label", text: item.label }));
+        // A row's pack where two rows have one name (我的待办 · 柔光风格): grey, after the name, in the label.
+        words.append(item.of ? element("span", { class: "ge-pop-label" }, item.label, element("span", { class: "ge-pop-of", text: ` · ${item.of}` })) : element("span", { class: "ge-pop-label", text: item.label }));
         if (item.hint) words.append(element("span", { class: "ge-pop-hint", text: item.hint }));
         if (row.split) row.append(words, element("span", { class: "ge-pop-more", html: `<span class="ge-pop-arrow">${ICONS.chevron}</span>` }));
         else if (item.submenu) row.append(element("span", { class: "ge-pop-arrow", html: ICONS.chevron }));
@@ -230,11 +240,12 @@ export function createMenu() {
           row.submenu = item.submenu;
           row.subWidth = item.width;
           row.subSearch = item.search;
+          row.subLook = { icons: item.icons, compact: item.compact };
         }
-        if (item.current || item.checked) {
-          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.current ? t("当前") : t("已开启") }));
+        if (item.current || item.checked || item.selected) {
+          row.append(element("span", { class: "ge-pop-check", html: ICONS.check, "aria-label": item.checked ? t("已开启") : t("当前") }));
           row.setAttribute("data-current", "");
-          if (item.checked) row.setAttribute("aria-checked", "true");
+          if (item.checked || item.selected) row.setAttribute("aria-checked", "true");
         }
         row.disabled = Boolean(item.disabled || item.current);
         row.run = item.run;
@@ -267,6 +278,7 @@ export function createMenu() {
   }
 
   const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+  const TALL = 34; // px: a block taller than this (a line of text is 26px) is a tall one: its menu may stand over it
 
   function place() {
     if (options.inside) return;
@@ -315,11 +327,16 @@ export function createMenu() {
       const below = innerHeight - margin - (block.bottom + gap);
       const above = block.top - gap - margin;
       const beside = anchor.left - gap - width;
-      if (beside >= margin) {
-        // Left of the block, centered on its handle.
+      // A block of more than a line (a table, a formula, a highlight, an image: taller than TALL) may
+      // have the menu over it: beside its handle, right of it where there is no room left of it,
+      // rather than below the block, away from the handle.
+      const middle = (anchor.top + anchor.bottom) / 2;
+      const onRight = block.bottom - block.top > TALL && anchor.right + gap + width <= innerWidth - margin;
+      if (beside >= margin || onRight) {
+        // Beside the handle (never over it), left first, centered on it.
         fit(room);
-        left = beside;
-        top = clamp((anchor.top + anchor.bottom) / 2 - height / 2, margin, innerHeight - margin - height);
+        left = beside >= margin ? beside : anchor.right + gap;
+        top = clamp(middle - height / 2, margin, innerHeight - margin - height);
       } else if (Math.max(below, above) >= Math.min(height, 180)) {
         // Below the block, else above it; in the larger of the two when it fits in neither.
         left = clamp(anchor.left, margin, innerWidth - width - margin);
@@ -360,6 +377,7 @@ export function createMenu() {
     const search = row.subSearch && { placeholder: row.subSearch.placeholder, filter: (text) => closing(row.subSearch.filter(text)) };
     sub.open(items, row.getBoundingClientRect(), {
       side: "right", gap: 0, height: Math.round(innerHeight * 0.7), highlight: keys, width: row.subWidth, label: row.textContent, search, empty: row.subSearch?.empty, focus: keys,
+      ...(row.subLook.icons === false ? { icons: false } : {}), ...(row.subLook.compact ? { compact: true } : {}),
       onClose: () => {
         row.removeAttribute("aria-expanded");
         if (subRow === row) {
@@ -439,6 +457,7 @@ export function createMenu() {
       opened.add(menu);
       node = element("div", { class: "ge-pop", role: "menu", "aria-label": opts.label ?? t("菜单") });
       if (options.width) node.setAttribute("data-sized", "");
+      if (options.compact) node.setAttribute("data-compact", "");
       if (opts.inside) {
         node.setAttribute("data-inside", "");
         opts.inside.append(node);

package/browser/editor/page/notices.mjs

@@ -1,6 +1,6 @@
 import { Z } from "../../shared/layers.mjs";
 import { PANEL_STYLE, onPanels, panelGone, panelRoom, panelShown } from "./panel.mjs";
-import { addStyle, button, element, mount } from "./ui.mjs";
+import { addStyle, element, mount, textButton } from "./ui.mjs";
 import { t } from "../../shared/i18n/index.mjs";
 import { preference } from "../../shared/preferences.mjs";
 import { routine } from "./quiet.mjs";
@@ -128,7 +128,7 @@ export function showPanel(title) {
   closePanel();
   addStyle(PANEL_STYLE);
   panel = mount(element("div", { class: "ge-panel", role: "region", "aria-label": title },
-    element("div", { class: "ge-panel-head" }, element("span", { text: title }), button(t("关闭"), closePanel, { "data-quiet": "" }))));
+    element("div", { class: "ge-panel-head" }, element("span", { text: title }), textButton(t("关闭"), closePanel, { quiet: true }))));
   panelShown(panel);
 }
 

package/browser/editor/page/page-objects.mjs

@@ -31,8 +31,15 @@ export function menuEntry(key) {
 /** The row of a key of a menu of blocks: its type's, or its variant's; null for neither. */
 export const menuRow = (key) => TYPE_INFO[key] ?? menuEntry(key).variant;
 
-/** The keys of every variant there is now. */
-export const variantKeys = () => Object.keys(TYPE_COMPONENT).flatMap((type) => Object.keys(pageOfType(type)?.menuVariants?.() ?? {}).map((name) => `${type}:${name}`));
+// Every variant there is now: [key, row].
+const variants = () => Object.keys(TYPE_COMPONENT).flatMap((type) => Object.entries(pageOfType(type)?.menuVariants?.() ?? {}).map(([name, row]) => [`${type}:${name}`, row]));
+
+/**
+ * The keys of the variants the menus of blocks offer now ("/", 在下方新建, the handle's +, 转换成): every
+ * one, a view of a table (`readsTables`: a custom block whose needs hold "tables") too, which binds
+ * itself to the table above it as it is made (components/installed/page.mjs; page/table/binding.mjs).
+ */
+export const variantKeys = () => variants().map(([key]) => key);
 
 /** The page objects, in the order they are made. */
 export const pageObjects = () => Object.values(pages);

package/browser/editor/page/panel.mjs

@@ -3,8 +3,10 @@ import { Z } from "../../shared/layers.mjs";
 // The editor's bottom panels: the conflicts' (conflicts.mjs, left) and the lost texts' (notices.mjs,
 // right) are the same card, and the bar of the Agent's changes (changes/bar.mjs, in the middle) is its
 // buttons in a row: a small muted head with a red dot, items under it, the reader's words as
-// a quote, one filled primary button, the rest outlined or, looking only, quiet text. No notice covers
-// one: while one stands, the toast stands above it (notices.mjs, and the workbench's, told the room).
+// a quote, one pale blue primary button, the rest with no line and no fill (gray under the pointer) or, looking
+// only, quiet text: all of them the editor's one button look (look.mjs BUTTONS, ui.mjs textButton), none of
+// their own here. No notice covers one: while one stands, the toast stands above it (notices.mjs, and the
+// workbench's, told the room).
 
 const PANELS = ".ge-conflicts:not([hidden]), .ge-panel, .ge-changes:not([hidden])";
 
@@ -55,11 +57,4 @@ export const PANEL_STYLE = `
   :is(.ge-conflict, .ge-panel-item) p + .ge-version { margin-top: 6px; }
   :is(.ge-conflicts, .ge-panel) .ge-version { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--ge-quote); overflow-wrap: anywhere; }
   :is(.ge-conflicts, .ge-panel) .ge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
-  :is(.ge-conflicts, .ge-panel) button { height: 28px; padding: 0 10px; border: 1px solid var(--ge-edge); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
-  :is(.ge-conflicts, .ge-panel) button:hover:not(:disabled) { background: var(--ge-hover); }
-  :is(.ge-conflicts, .ge-panel) button[data-primary] { border-color: transparent; background: var(--ge-accent); color: #fff; }
-  :is(.ge-conflicts, .ge-panel) button[data-primary]:hover:not(:disabled) { background: var(--ge-accent-hover); }
-  :is(.ge-conflicts, .ge-panel) button[data-quiet] { height: 24px; padding: 0 6px; border-color: transparent; color: var(--ge-tx2); font-weight: 400; }
-  :is(.ge-conflicts, .ge-panel) button[data-quiet]:hover:not(:disabled) { color: var(--ge-tx); background: transparent; }
-  :is(.ge-conflicts, .ge-panel) button:disabled { opacity: .45; cursor: default; }
 `;