@heycys/gallery 0.1.1 → 0.1.2

package/THIRD-PARTY-NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-@heycys/gallery 0.1.1 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.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/.
 
 ## @asamuzakjp/css-color 5.1.11
 

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

@@ -49,11 +49,11 @@ export function ratiosAfterRemove(ratios, removed) {
 /**
  * The gap after column `index` dragged by `fraction` of the row's width: only the two columns
  * beside it change, snapping to their equal split or to a tenth of the row for the left one when
- * within 1%, both keeping the least share (1/24, or more where `least` says so for a part: the
+ * within `near` of the row (page/columns/ gives 5px of it; 1% when not said; 0: no snapping), both keeping the least share (1/24, or more where `least` says so for a part: the
  * share its content needs, a flowchart's node as narrow as the kit lets it be, page/columns/).
  * `ratios` are those when the drag started.
  */
-export function ratiosAfterResize(ratios, index, fraction, least = []) {
+export function ratiosAfterResize(ratios, index, fraction, least = [], near = 0.01) {
   const left = ratios[index];
   const right = ratios[index + 1];
   const low = Math.max(MIN_RATIO, least[index] ?? 0);
@@ -62,8 +62,8 @@ export function ratiosAfterResize(ratios, index, fraction, least = []) {
   let moved = fraction;
   const equal = (left + right) / 2 - left;
   const step = Math.round(10 * (left + moved)) / 10 - left;
-  if (Math.abs(equal - moved) < 0.01) moved = equal;
-  else if (Math.abs(step - moved) < 0.01) moved = step;
+  if (Math.abs(equal - moved) < near) moved = equal;
+  else if (Math.abs(step - moved) < near) moved = step;
   moved = Math.min(Math.max(moved, low - left), right - high);
   const out = [...ratios];
   out[index] = left + moved;

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

@@ -24,8 +24,8 @@ export const HEIGHT = "--doc-embed-height";
 /** The frame's height as a size: the least and the most (px) it may be given. */
 export const HEIGHT_SIZE = { min: 96, max: 2000, px: true };
 
-/** The sandbox of a web page's frame (Notion's), and of an HTML file's (no origin of its own). */
-export const WEB_SANDBOX = "allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin allow-storage-access-by-user-activation allow-popups-to-escape-sandbox";
+/** The sandbox of a web page's frame (Notion's: the sidebar's web links have it too, shared/web-links.mjs), and of an HTML file's (no origin of its own). */
+export { WEB_SANDBOX } from "../../../shared/web-links.mjs";
 export const FILE_SANDBOX = "allow-scripts allow-popups allow-forms allow-modals";
 
 /**

package/browser/editor/components/flowchart/add.mjs

@@ -10,20 +10,21 @@ import { t } from "../../../shared/i18n/index.mjs";
 // card's vertical middle (the layer over the page draws it: overlay-layer.mjs, so it scrolls with
 // the node and never touches the report's markup; above the handle and a section's bar there,
 // IN_LAYER button, so the half of a row's last node's button over its section's bar is the
-// button's), a white surface with a hairline border and a thin outline plus, grey once the pointer
-// is on it (Notion-flat: no blue). A click adds a node right
+// button's), a white surface lifted by a soft shadow (no line round it) and a thin outline plus, the plus
+// darker once the pointer is on it and the surface grey only while it is pressed (the editor's icon button
+// look, look.mjs BUTTONS; Notion-flat: no blue). A click adds a node right
 // after it (page.mjs addAfter: one undo step, the caret in its empty first line, bold armed); the
 // press itself moves no caret and starts no box selection. It goes as the pointer leaves the node
 // (and the button), as a drag or a box selection begins, and with any structural change that takes
 // its node away.
 
 const STYLE = `
-  .ge-flow-add { z-index: ${IN_LAYER.button}; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 1px solid light-dark(rgb(44 44 43 / 16%), rgb(243 243 243 / 18%)); border-radius: 50%;
-    background: var(--doc-surface, #fff); color: var(--ge-ico2); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px light-dark(rgb(25 25 25 / 6%), rgb(0 0 0 / 20%));
-    opacity: 0; transition: opacity .12s, background-color .12s, color .12s, border-color .12s; }
+  .ge-flow-add { z-index: ${IN_LAYER.button}; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
+    background: var(--doc-surface, #fff); color: var(--ge-ico2); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px light-dark(rgb(25 25 25 / 18%), rgb(0 0 0 / 45%));
+    opacity: 0; transition: opacity .12s, background-color .12s, color .12s; }
   .ge-flow-add[data-shown] { opacity: 1; }
   .ge-flow-add > svg { display: block; width: 14px; height: 14px; margin: 3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
-  .ge-flow-add:hover { background: light-dark(#f4f4f3, #2f2f2f); color: var(--ge-ico); border-color: light-dark(rgb(44 44 43 / 24%), rgb(255 255 255 / 26%)); }
+  .ge-flow-add:hover { color: var(--ge-ico); }
   .ge-flow-add:active { background: light-dark(#ebebea, #404040); }
   @media (prefers-reduced-motion: reduce) { .ge-flow-add { transition: none; } }
 `;

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

@@ -266,7 +266,7 @@ const NODE_CHOICES = [
 const STYLE = `
   [data-ge-editing] ol.doc-flow > li { --ge-text-radius: 8px; }
   [data-ge-editing] ol.doc-flow > li > * { --ge-text-radius: 3px; }
-  [data-ge-editing] ol.doc-flow > li > p[data-ge-placeholder]:first-of-type::before { font-weight: 600; }
+  [data-ge-editing] ol.doc-flow > li > p[data-ge-placeholder]:first-of-type::before { font-weight: 700; }
 `;
 
 /**

package/browser/editor/components/icons.mjs

@@ -24,6 +24,14 @@ export const PAGE_ICON = svg('<path d="M5 18.33a1.67 1.67 0 0 1-1.67-1.66V3.33a1
 /** A section (分区): blocks gathered between brackets, the block menu's 组成新分区 and the section's line in 设置 › 组件列表. */
 export const SECTION_ICON = svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2H6M14 3.75h.75a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H14"/><path d="M7.25 7.75h5.5M7.25 12.25h5.5"/>');
 
+/**
+ * A custom block (自定义块): a card of text, a rounded square with a short title line over two longer
+ * ones. The one mark of a block that has no picture of its own: the "/" menu's row and a block's menu,
+ * 添加自定义块's library, and a custom block's line in 设置 › 组件列表. On the 20 box of the icons beside
+ * it, so that the menus' stroke (1.25 at 20px) is its stroke too.
+ */
+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 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/crop.mjs

@@ -1,5 +1,5 @@
 import { Z } from "../../../shared/layers.mjs";
-import { addStyle, element, mount } from "../../page/ui.mjs";
+import { addStyle, element, mount, textButton } from "../../page/ui.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 裁剪图片 (notion-lite's blocks/image/edit/crop.js, Notion's 31868): a dialog over the page, the
@@ -19,13 +19,10 @@ const STYLE = `
     box-shadow: 0 0 0 1px var(--ge-outline), 0 20px 40px rgb(0 0 0 / 30%); }
   .ge-crop-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ge-line); }
   .ge-crop-title { flex: 1; text-align: center; font-weight: 500; white-space: nowrap; }
-  .ge-crop-shape, .ge-crop-cancel, .ge-crop-save { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
-  .ge-crop-shape { color: var(--ge-tx2); }
+  .ge-crop-shape { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ge-tx2); font: inherit; cursor: pointer; }
   .ge-crop-shape[aria-pressed="true"] { background: var(--ge-fill); color: var(--ge-accent-text); }
-  .ge-crop-shape:hover, .ge-crop-cancel:hover { background: var(--ge-hover); }
-  .ge-crop-cancel { color: var(--ge-tx2); }
-  .ge-crop-save { background: var(--ge-accent); color: #fff; font-weight: 500; }
-  .ge-crop-save:hover { background: var(--ge-accent-hover); }
+  .ge-crop-shape:hover { background: var(--ge-hover); }
+  .ge-crop-shape[aria-pressed="true"]:hover { background: var(--ge-btn-primary-hover); }
   .ge-crop-body { display: flex; justify-content: center; padding: 30px; background: light-dark(#f7f6f3, #1f1f1f); }
   .ge-crop-stage { position: relative; overflow: hidden; }
   .ge-crop-stage > img { display: block; max-width: 70vw; max-height: 75vh; pointer-events: none; }
@@ -56,8 +53,8 @@ export function openCrop(img, save, from = {}) {
     button.addEventListener("click", () => shape(ratio, button));
     return button;
   });
-  const cancel = element("button", { type: "button", class: "ge-crop-cancel", text: t("取消") });
-  const done = element("button", { type: "button", class: "ge-crop-save", text: t("保存") });
+  const cancel = textButton(t("取消"), null, { class: "ge-crop-cancel" });
+  const done = textButton(t("保存"), null, { class: "ge-crop-save", primary: true });
   const dialog = element("div", { class: "ge-crop-dialog", role: "dialog", "aria-label": t("裁剪图片") },
     element("div", { class: "ge-crop-bar" }, ...shapes, element("div", { class: "ge-crop-title", text: t("裁剪图片") }), cancel, done),
     element("div", { class: "ge-crop-body" }, stage));

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 { 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,7 +103,7 @@ export default {
   sealed: INSTANCE,
   units: {
     installed: {
-      name: t("组件@block"),
+      name: t("自定义块@block"),
       icon: ICON,
       match: [{ rank: 0, tag: ["div", "section"], attr: ATTRIBUTE }],
       boxed: true,
@@ -130,11 +131,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 table's 视图 › made it of its template, 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

@@ -398,22 +398,33 @@ 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 a table's 视图 › offers too (`readsTables`: page/table/views.mjs), which
+    // binds the one it makes to the table (VIEW_FROM). 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: pictureOf(entry) ?? ICON,
+        words: `${entry.name.zh} ${entry.name.en} ${entry.id} ${entry.words}`.toLowerCase(),
+        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);
+          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

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

@@ -17,13 +17,14 @@ let any = false; // the server could not say which: the page connected a moment
 export const isBehind = (id) => any || behind.has(id);
 
 /**
- * `components`, the list a page holds, as the reader's settings now say: the state each package says,
- * which a menu reads, at once and with nothing shown again (`doc-settings-changed`). A package that
- * comes on is in none of that yet: it comes with the list the page reads as the catalog changes, as
- * one added does (`doc-catalog-changed`, ./page.mjs).
+ * `components`, the list a page holds, as the reader's settings now say: the state each package says
+ * by its `places` and gallery.json's hidden, shown, disabled, unlisted and packs off (settingState, inDocumentMenus: the
+ * server's own rule), which a menu reads, at once and with nothing shown again (`doc-settings-changed`).
+ * A package that comes on is in none of that yet: it comes with the list the page reads as the catalog
+ * changes, as one added does (`doc-catalog-changed`, ./page.mjs).
  */
 export function followSettings(components, settings) {
-  for (const entry of components) entry.state = settingState(entry.id, settings);
+  for (const entry of components) entry.state = settingState(entry.id, { hidden: [], shown: [], disabled: [], unlisted: [], packsOff: [], ...settings }, entry.places);
 }
 
 /** Hears what changed of the catalog while the page held no instance of it. */

package/browser/editor/components/instances.mjs

@@ -0,0 +1,18 @@
+import { ATTRIBUTE, INSTANCE } from "../../shared/components/installed.mjs";
+
+// A custom page's card read for the instance it holds, by the host's own mark of an instance
+// (shared/components/installed.mjs INSTANCE, ATTRIBUTE: a div or section naming its package): the one
+// the server reads (shared/page-cards.mjs readPage, which refuses an article or a span carrying the
+// attribute, and page check fails it) and the kit's page runtime reads. The board
+// (src/editor/page/board/index.mjs) is a page engine and knows no package's marks, so what it asks of
+// the DOM it asks here: a card with an `<article data-doc-component="…">` is a card with no instance on
+// the page too, offered no settings and sending no part, instead of one the service then refuses.
+
+/** The instance card `card` holds (its child that is one), or null. */
+export const instanceOf = (card) => [...card.children].find((child) => child.matches(INSTANCE)) ?? null;
+
+/** The package id an instance names (<scope>/<name>), or null for no instance. */
+export const packageOf = (instance) => instance?.getAttribute(ATTRIBUTE) ?? null;
+
+/** The nearest instance around `node` (itself counted), or null. */
+export const instanceAround = (node) => node.closest(INSTANCE);

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

@@ -6,7 +6,7 @@ import { begin, done, made } from "../../page/made.mjs";
 import { createMenu } from "../../page/menu.mjs";
 import { keptByComponent } from "../../page/page-objects.mjs";
 import { hideTooltip, tooltipAt } from "../../page/tooltip.mjs";
-import { addStyle, element } from "../../page/ui.mjs";
+import { addStyle, element, textButton } from "../../page/ui.mjs";
 import { CHECKED, CONTINUE, FLOW, START, TODO, heldListType, holdsSays, listType, mergeSays } from "./index.mjs";
 import { BLOCK_TYPES, accepts } from "../registry.mjs";
 import { FLOW_KEY, isFlowLabel } from "../../../shared/components/list.mjs";
@@ -186,8 +186,7 @@ const STYLE = `
   .ge-list-value-title { padding: 10px 12px 0; color: var(--ge-tx2); font-size: 12px; font-weight: 500; line-height: 14px; }
   .ge-list-value input { box-sizing: border-box; flex: 1; min-width: 0; 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-list-value input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ge-tx3) 60%, transparent); }
-  .ge-list-value button { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ge-accent); color: #fff; font: inherit; cursor: pointer; }
-  .ge-list-value button:hover { background: var(--ge-accent-hover); }
+  .ge-list-value .ge-btn { flex: none; }
 `;
 
 // ---------- keys, numbers ----------
@@ -494,9 +493,7 @@ export function create({ struct, say, convertHost, targetsOf, look, isEditing, b
       } else return;
       event.preventDefault();
     });
-    const confirm = element("button", { type: "button", text: t("确定") });
-    confirm.addEventListener("mousedown", (event) => event.preventDefault());
-    confirm.addEventListener("click", apply);
+    const confirm = textButton(t("确定"), apply, { primary: true });
     const view = element("div", {}, element("div", { class: "ge-list-value-title", text: t("新编号为") }), element("div", { class: "ge-list-value" }, field, confirm));
     item.setAttribute("data-ge-number", "open");
     menu.open([{ node: view, cells: [] }], rect, { label: t("修改编号值"), icons: false, width: 148, highlight: false, onClose: () => item.removeAttribute("data-ge-number") });

package/browser/editor/components/registry.mjs

@@ -136,7 +136,7 @@ import { t } from "../../shared/i18n/index.mjs";
 //               own. Every component's rules are tried in `rank` order, with the page's (PAGE below),
 //               and the first match wins: a rule ranked below the page's 80 goes before any control's,
 //               and is the one that can claim a button as its own.
-//   hosts       the kinds of text block it defines (data-ge-kind): { [kind]: { name, caps, tex?, wrapped?, parts?, opensBefore?, textFilters?, formula?, closed?, inner?, blankSays?, placeholder? } }, caps
+//   hosts       the kinds of text block it defines (data-ge-kind): { [kind]: { name, caps, tex?, wrapped?, parts?, opensBefore?, textFilters?, formula?, closed?, inner?, pictures?, blankSays?, placeholder?, untitled?, opensBody? } }, caps
 //               ({ bound, blockLevel }) giving what such a text block can do (source/); opensBefore:
 //               Enter at its very start, with words in it, puts an empty paragraph before its block
 //               where it does not split, as one that splits does (typing/); textFilters: false, what
@@ -145,14 +145,19 @@ import { t } from "../../shared/i18n/index.mjs";
 //               none there (takesFormula);
 //               closed: the page holds no text block for it until the reader opens it (a code block);
 //               inner(element): the text a save takes of one, as markup, where that is not what its
-//               nodes say (a code block's code);
+//               nodes say (a code block's code); pictures: it holds pictures amid its words (a table
+//               cell's), { show(root) (the file's made the page's: where the server serves them),
+//               write(element) (one's markup, "" for one of no file, null for no picture) } (core.mjs);
 //               parts: the parts of components ([component id, part name]: a part of its shared
 //               description edited as text, src/shared/components/) whose elements are text blocks
 //               of this kind, found so by the server's scan; tex: its text is a formula's TeX alone; wrapped: the page makes the text block a
 //               span inside the element, which keeps its own behaviour (a Sheet tab's button);
 //               blankSays: what the status line says of one left blank that must hold words, as a
 //               type's says of a block of it (blankSaysOf); placeholder: what one says while it
-//               is empty under the caret, whatever part it is (placeholderOf)
+//               is empty under the caret, whatever part it is (placeholderOf); untitled: it says its
+//               placeholder whenever it is empty, the caret in it or not (the page's title, notion-lite's
+//               data-ph 新页面: typing/ updatePlaceholder); opensBody: Enter in it goes to the body, what
+//               follows the caret a new paragraph right below it (the page's title: typing/ enterBody)
 //   placeholders  what an empty text block says while the caret is in it: { [part]: text }, part
 //               being a part of its shared description (src/shared/components/) whose element it is
 //               (placeholderOf); a heading's own is its type's `placeholder`, and a type's `placeholder:
@@ -380,7 +385,11 @@ const PAGE = {
   hosts: {
     // A free text block may be left empty (Notion's): written as an empty element, one line high.
     flow: { opensBefore: true, caps: ({ bound }) => bound ? ["split", "merge", "links"] : ["split", "merge", "remove", "empty", "links"] },
-    title: { name: t("文档主标题"), caps: () => ["plain"], blankSays: t("文档主标题还空着：写上标题后才会保存。") },
+    // The page's title may be left empty (notion-lite's page title): an untitled document, its title
+    // saying 未命名文档 in gray (`untitled`), never written into the file; whatever names the document
+    // names it so (the workbench's reportTitle, links/pages.mjs, an export's <title>). Enter in it goes to the
+    // body (`opensBody`: typing/ enterBody, notion-lite's page title).
+    title: { name: t("文档主标题"), caps: () => ["plain", "empty"], placeholder: t("未命名文档"), untitled: true, opensBody: true },
     ...MEDIA_HOSTS,
   },
   readOnly: [

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

@@ -6,6 +6,8 @@ import { columnWidths, slotsOf, tileSlots, tileSpans } from "../../../shared/tab
 import { CELL_ALIGN_CLASSES, CELL_BOLD_CLASS, CELL_VALIGN_CLASSES } from "../../../shared/components/table.mjs";
 import { CHART_KEY, CHART_SOURCE } from "../../../shared/table-chart.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
+import { escapeAttribute } from "../../../shared/escape.mjs";
+import { servedFile } from "../../page/served.mjs";
 
 const ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2"/><path d="M3.25 8h13.5M3.25 12.1h13.5M8.25 3.75v12.5"/>');
 
@@ -53,7 +55,9 @@ export default {
       boxed: true,
       resizable: ".doc-table-wrap[data-ge-unit]", // its right and bottom edges, once it is in the file
       copy: "itself", // within the report a copy keeps all of its markup (its scope line, its frame's size); another report's gets the table's data (tableData) made anew
-      attributes: { [NUMBERS]: (value) => value === "off" },
+      // 识别数字列 off, and the key a chart or a view reads it by (src/shared/table-chart.mjs), which 视图 ›
+      // of its menu puts on a table that has none (page/table/views.mjs) in the step that puts the view in.
+      attributes: { [NUMBERS]: (value) => value === "off", [CHART_SOURCE]: (value) => CHART_KEY.test(value) },
       sizes: {
         [SPAN]: { min: 0.15, max: 3 }, // past 1 the table is wider than the text and scrolls in its frame
         [TABLE_HEIGHT]: { min: 80, max: 4000, px: true, none: true, height: true },
@@ -62,7 +66,7 @@ export default {
   },
   components: ["doc-table-wrap", "doc-table-meta"],
   hosts: {
-    cell: { name: t("表格单元格"), caps: () => ["empty", "links"] },
+    cell: { name: t("表格单元格"), caps: () => ["empty", "links"], pictures: { show: showPictures, write: writtenPicture } },
   },
   types: {
     // Made by a paste or the "/" menu (三列三行, a header row: page.mjs newTable): no class here, so
@@ -306,3 +310,56 @@ export function tableData(element, serializeInner) {
     ...(chart && CHART_KEY.test(chart) ? { chart } : {}),
   };
 }
+
+// ---------- a cell's pictures ----------
+// 单元格里的图片 (page/table/pictures.mjs; source/blocks.mjs cellPictureProblem says what the file
+// takes): an <img> amid a cell's words, a picture of the report's folder. On the page it shows where
+// the server serves the folder (`src`, page/served.mjs), the file it is in data-ge-src, as an
+// image block's; the cell's text writes it back from its element (the host's `pictures`, which
+// core.mjs reads): <img src="assets/<file>" alt="…" width="N">, its attributes in the order the
+// element has them, the file's own; one the browser put in from elsewhere, its file no picture of
+// the folder, is no part of the text.
+
+const PICTURE_FILE = /^assets\/[A-Za-z0-9][A-Za-z0-9._-]{0,80}$/;
+const PICTURE_WIDTH = /^[1-9]\d{0,3}$/;
+const isPicture = (node) => node?.nodeType === 1 && node.localName === "img";
+
+/** The file of a picture in a cell (assets/<file>), or null: none the page writes. */
+export const pictureFile = (img) => {
+  const file = img.getAttribute("data-ge-src") || img.getAttribute("src") || "";
+  return PICTURE_FILE.test(file) ? file : null;
+};
+
+/**
+ * A picture for a cell: the file `path` (assets/<file>) shown where the server serves it, its `alt`
+ * words, its `width` in pixels (none: the kit's own size).
+ */
+export function cellPicture(doc, path, { alt = "", width = null } = {}) {
+  const img = doc.createElement("img");
+  img.setAttribute("src", servedFile(path));
+  img.setAttribute("alt", alt);
+  if (width) img.setAttribute("width", String(Math.round(width)));
+  img.setAttribute("data-ge-src", path);
+  img.draggable = false;
+  return img;
+}
+
+// A cell's pictures as the file has them made the page's (core.mjs prepareBlock): shown where the server serves them.
+function showPictures(root) {
+  for (const img of root.querySelectorAll("img")) {
+    const file = img.getAttribute("src") ?? "";
+    if (!PICTURE_FILE.test(file)) continue;
+    img.setAttribute("data-ge-src", file);
+    img.setAttribute("src", servedFile(file));
+    img.draggable = false;
+  }
+}
+
+// A picture as the cell's text writes it: its markup, "" (no file of the folder), null (no picture).
+function writtenPicture(node) {
+  if (!isPicture(node)) return null;
+  const file = pictureFile(node);
+  if (!file) return "";
+  const said = [...node.attributes].filter(({ name, value }) => name === "src" || name === "alt" || (name === "width" && PICTURE_WIDTH.test(value)));
+  return `<img${said.map(({ name, value }) => ` ${name}="${escapeAttribute(name === "src" ? file : value)}"`).join("")}>`;
+}

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

@@ -120,7 +120,7 @@ function cellNodes(doc, html, inline) {
  * row, its names' column a header column, its numeric columns read (the page's own copy as it was).
  */
 export function build({ doc, block, inline }) {
-  const rows = block.rows.map((row) => row.map((html) => cellNodes(doc, html, inline)));
+  const rows = block.rows.map((row) => row.map((html) => cellNodes(doc, html, (text) => inline(text, { pictures: true })))); // a cell's pictures its own
   const table = newTable(doc, { rows, header: Boolean(block.header), column: Boolean(block.column), numbers: block.numbers !== false, looks: block.looks, widths: block.widths, spans: block.spans, chart: block.chart });
   if (block.outside) optimizeTable(table);
   return table;

package/browser/editor/page/annotate/card.mjs

@@ -32,8 +32,7 @@ export const STYLE = `
   .ge-note-marker { width: ${RAIL.marker}px; height: ${RAIL.marker}px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; display: grid; place-items: center; color: var(--ge-ico2); cursor: pointer; pointer-events: auto; }
   .ge-note-marker svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
   .ge-note-marker[hidden], .ge-note-card[hidden] { display: none; }
-  .ge-note-marker:hover, .ge-note-marker[data-hot] { background: var(--ge-hover); color: var(--ge-ico); }
-  .ge-note-marker:active { background: var(--ge-press); }
+  .ge-note-marker[data-hot] { background: var(--ge-hover); color: var(--ge-ico); }
   .ge-note-marker:focus-visible { outline: 2px solid var(--ge-focus); outline-offset: -2px; }
   /* The card, where the format bar would stand: a popover as the bar is, as wide as ${RAIL.card}px or the column. Its face is what shows; the card itself stands still, so a face going left under the pointer keeps it. */
   .ge-note-card { z-index: 1; width: ${RAIL.card}px; box-sizing: border-box; color: var(--ge-tx); pointer-events: auto; cursor: text; }
@@ -60,8 +59,6 @@ export const STYLE = `
   .ge-note-card[data-long][data-top] textarea { --top: 28px; }
   /* Its delete button, on the field's first line, in the room the field leaves it. */
   .ge-note-delete { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; display: grid; place-items: center; color: var(--ge-ico3); cursor: pointer; }
-  .ge-note-delete:hover { background: var(--ge-hover); }
-  .ge-note-delete:active { background: var(--ge-press); }
   .ge-note-delete svg { width: 18px; height: 18px; pointer-events: none; }
   .ge-note-bar { width: 2px; border-radius: 1px; background: var(--ge-note-line); }
   .ge-note-bar[data-hot] { background: var(--ge-note-hot-line); }
@@ -74,13 +71,13 @@ export const STYLE = `
 export const layerNode = () => element("div", { class: "ge-note-layer", "data-doc-dev": "" });
 
 export function markerNode(id) {
-  return element("button", { type: "button", class: "ge-note-marker", "data-note": id, "aria-label": t("批注"), tabindex: "-1", html: MARKER_ICON });
+  return element("button", { type: "button", class: "ge-note-marker ge-icon-btn", "data-note": id, "aria-label": t("批注"), tabindex: "-1", html: MARKER_ICON });
 }
 
 /** A card: a plain-text field, and the button that deletes what it holds, on its face. */
 export function cardNode() {
   const field = element("textarea", { rows: "1", spellcheck: "false", maxlength: TEXT_MOST, placeholder: t("写下建议…"), "aria-label": t("批注") });
-  const erase = element("button", { type: "button", class: "ge-note-delete", "aria-label": t("删除批注"), tabindex: "-1", html: ICONS.trash });
+  const erase = element("button", { type: "button", class: "ge-note-delete ge-icon-btn", "aria-label": t("删除批注"), tabindex: "-1", html: ICONS.trash });
   tooltip(erase, t("删除批注"));
   return { node: element("div", { class: "ge-note-card", role: "group" }, element("div", { class: "ge-note-face" }, field, erase)), field, erase };
 }