@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,41 @@
+// The table operations' and tools' own reading of a table's slots (docs/editor.md, "Tables"): a
+// rectangle of slots grown until it cuts no merged cell, the cells covering one, where a cell goes in
+// a row, a cell's spans set. The slots themselves (each row has a slot in each column, a cell covers
+// a rectangle of them) are src/shared/table-slots.mjs, which the kit and the server read too.
+
+/** A rectangle { r0, r1, c0, c1 } grown until it cuts no merged cell. */
+export function closeRect(slots, rect) {
+  let { r0, r1, c0, c1 } = rect;
+  for (let grown = true; grown;) {
+    grown = false;
+    for (let r = r0; r <= r1; r++) {
+      for (let c = c0; c <= c1; c++) {
+        const place = slots.places.get(slots.matrix[r][c]);
+        const next = { r0: Math.min(r0, place.r), r1: Math.max(r1, place.r + place.rows - 1), c0: Math.min(c0, place.c), c1: Math.max(c1, place.c + place.cols - 1) };
+        if (next.r0 !== r0 || next.r1 !== r1 || next.c0 !== c0 || next.c1 !== c1) {
+          ({ r0, r1, c0, c1 } = next);
+          grown = true;
+        }
+      }
+    }
+  }
+  return { r0, r1, c0, c1 };
+}
+
+/** The cells covering a rectangle, each once, in reading order. */
+export function cellsIn(slots, { r0, r1, c0, c1 }) {
+  const cells = new Set();
+  for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) if (slots.matrix[r]?.[c]) cells.add(slots.matrix[r][c]);
+  return [...cells].sort((a, b) => slots.places.get(a).r - slots.places.get(b).r || slots.places.get(a).c - slots.places.get(b).c);
+}
+
+/** The first cell of row `r` (its element `row`) that begins at column `c` or right of it, or null: where a cell at `c` goes in. */
+export const cellFrom = (slots, row, c) => [...row.cells].find((cell) => (slots.places.get(cell)?.c ?? -1) >= c) ?? null;
+
+/** A cell's spans set: rows × columns (an attribute only past 1). */
+export function setSpan(cell, rows, cols) {
+  if (rows > 1) cell.setAttribute("rowspan", String(rows));
+  else cell.removeAttribute("rowspan");
+  if (cols > 1) cell.setAttribute("colspan", String(cols));
+  else cell.removeAttribute("colspan");
+}

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

@@ -0,0 +1,50 @@
+import { componentOf } from "../../../shared/components/index.mjs";
+import { svg } from "../icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// How a block of it is written out: its words; a declared diff (its lines in the JSON it holds) as a
+// fence of its lines, its title in bold.
+const WORDS = { kind: "words" };
+const DIFF = {
+  kind: "code",
+  read(unit, { plain }) {
+    let lines = [];
+    try {
+      lines = JSON.parse(unit.querySelector('script[type="application/json"]')?.textContent ?? "{}").lines ?? [];
+    } catch {}
+    const sign = { added: "+", removed: "-" };
+    return { title: plain(unit.querySelector(":scope > .doc-code-title")), language: "diff", lines: lines.map((line) => `${sign[line.type] ?? " "}${line.content ?? ""}`) };
+  },
+};
+
+// The kit's whole blocks, as their descriptions name them: the classes of the reading state that are
+// a block of their own (a filter, its row, the fields, the list of what was kept) and the diff.
+const WHOLE = [...componentOf("state").wholes, ...componentOf("diff").classes];
+
+// 整体块 (whole block): a report's own widget, any element with a class of its own that is no kit
+// component, and what the kit draws whole (a diff: .doc-diff) or holds whole (a filter: its
+// buttons and what they filter; a row of filter buttons, labelled fields, a list of what the reader kept).
+// One block that moves and goes as a whole; nothing goes in or out. Its text (a label, a color's
+// name, its paragraphs, headings and items, a step a card's drawing makes) is still editable as
+// text blocks of words only (this host): emptied but not removed, never split or joined, an inline
+// element of the report's own in them an atom kept as written
+// (../../page/own.mjs) (pending: a whole
+// block is to be moved alone, src/shared/components/widget.mjs); a script that uses it keeps it
+// from being deleted. Where the engines reach it:
+// ../source/ (its text: textLeaf, and its p, h1–h4 and li made words only in scan; what refers to
+// it: keepReferenced), src/editor/page/hints/ (`readOnly`), src/transfer/markdown.mjs (`clipboard`:
+// its words, never copied on the page).
+export default {
+  name: "widget",
+  glance: { row: 22, name: "整体块", write: "an element of a class of your own that is no figure (a strip of metrics, a panel of your own), styled in the page's `<style>`", rule: "Figures and charts" },
+  readOnly: [{ rank: 30, at: ".doc-diff", says: t("代码对比由数据绘制，整块移动；要改内容，请让 AI 修改。") }],
+  units: {
+    block: { clipboard: { of: (unit) => (unit.matches(".doc-diff") ? DIFF : WORDS) }, name: t("整体块"), match: WHOLE.map((name, at) => ({ rank: 104 + at, class: name })), boxed: true, icon: svg('<rect x="3.25" y="3.25" width="5.5" height="5.5" rx="1.25"/><rect x="11.25" y="3.25" width="5.5" height="5.5" rx="1.25"/><rect x="3.25" y="11.25" width="5.5" height="5.5" rx="1.25"/><rect x="11.25" y="11.25" width="5.5" height="5.5" rx="1.25"/>'), chapter: true }, // and whatever no other rule matches (unitKind in source/units.mjs)
+  },
+  components: WHOLE, // a diff the kit draws, controls it holds
+  hosts: {
+    // Text of an element of the report's own (a footer, a line in a widget): it may be cleared, and
+    // the element goes only with its block.
+    text: { name: t("这段文字"), caps: ({ blockLevel }) => blockLevel ? ["empty", "links"] : ["plain", "empty"] },
+  },
+};

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

@@ -0,0 +1,229 @@
+import { BLOCKS_QUOTE_MOST, LINE_TAGS, excerptOf, findQuote, squash, tidyLines } from "../../../shared/annotations.mjs";
+import { UNIT, isMention, sourceWords, unitElement } from "../core.mjs";
+
+// Anchors on the page (docs/editor.md "Annotations"): what a selection is as an anchor, and where an
+// anchor's words or blocks are on the page now. A block's text is read as the server reads it
+// (shared/annotations.mjs treeText: a formula its TeX, a chip the words its source gives it, which a
+// page block may show otherwise, the blocks in it a line each, white space as one), with where each
+// of its characters is, so a quote found in it is a range of the page again.
+// What the kit or the editor adds to a block (a code block's tools, a formula's drawing, the editor's
+// own nodes) is no part of its text.
+
+const SKIP = [
+  "script", "style", "template", "noscript", "svg", "[data-doc-dev]", "[aria-hidden='true']", "button:not(.doc-sheet-tab)",
+  ".ge-code-gutter", ".doc-code-tools", ".doc-code-range",
+].join(", ");
+
+const elementOf = (node) => (node?.nodeType === 1 ? node : node?.parentElement ?? null);
+// A block an anchor may name: the body's, and the header's lines under the title, not the title, the
+// page's icon or the header as a whole (v1: no annotation on the title or the page as a whole).
+export const annotatable = (unit) => Boolean(unit?.closest("main")) && !unit.matches(".doc-header, main > header") && !unit.closest(".doc-title, .doc-icon");
+const unitOf = (node) => {
+  const unit = unitElement(elementOf(node));
+  return annotatable(unit) ? unit : null;
+};
+
+/**
+ * The text of `elements` (in page order) as the server reads a block, a line between them: { text,
+ * at }, `at[i]` where character `i` comes from ({ node, offset } in a text node, { element } for a
+ * formula's TeX, null for a line's end).
+ */
+export function readText(elements) {
+  let text = "";
+  const at = [];
+  const put = (char, place) => { text += char; at.push(place); };
+  const space = (place) => { if (text && !/[ \n]$/.test(text)) put(" ", place); };
+  const line = () => {
+    if (!text) return;
+    if (text.endsWith(" ")) { text = text.slice(0, -1); at.pop(); }
+    if (!text.endsWith("\n")) put("\n", null);
+  };
+  const walk = (parent) => {
+    for (const child of parent.childNodes) {
+      if (child.nodeType === 3) {
+        const value = child.data;
+        for (let offset = 0; offset < value.length; offset++) {
+          const char = value[offset];
+          if (char === "​" || char === "") continue;
+          if (/\s/.test(char)) space({ node: child, offset });
+          else put(char, { node: child, offset });
+        }
+        continue;
+      }
+      if (child.nodeType !== 1) continue;
+      if (child.matches(".katex")) { // a formula, as the file writes it: its TeX in its delimiters
+        const tex = (child.querySelector('annotation[encoding="application/x-tex"]')?.textContent ?? "").replace(/\s+/g, " ").trim();
+        const written = child.closest(".katex-display") ? `\\[${tex}\\]` : `\\(${tex}\\)`;
+        space({ element: child });
+        for (let index = 0; index < written.length; index++) put(written[index], { element: child });
+        space({ element: child });
+        continue;
+      }
+      if (child.matches(SKIP)) continue;
+      const words = isMention(child) ? sourceWords(child) : null;
+      if (words !== null) {
+        for (const char of words) (/\s/.test(char) ? space : (place) => put(char, place))({ element: child });
+        continue;
+      }
+      const own = LINE_TAGS.has(child.localName);
+      if (own) line();
+      walk(child);
+      if (own) line();
+    }
+  };
+  for (const element of elements) {
+    line();
+    walk(element);
+  }
+  while (text && /[ \n]$/.test(text)) { text = text.slice(0, -1); at.pop(); }
+  return { text, at };
+}
+
+/** The range of the page from character `start` to `end` of `read` (readText), or null. */
+export function rangeOf(read, start, end) {
+  const places = read.at.slice(start, end);
+  const first = places.find(Boolean);
+  const last = places.findLast(Boolean);
+  if (!first || !last) return null;
+  const range = document.createRange();
+  if (first.node) range.setStart(first.node, first.offset);
+  else range.setStartBefore(first.element);
+  if (last.node) range.setEnd(last.node, last.offset + 1);
+  else range.setEndAfter(last.element);
+  return range;
+}
+
+// Whether character `place` of a text is inside `range`.
+function inside(range, place) {
+  if (!place) return false;
+  if (place.element) return range.intersectsNode(place.element);
+  return range.comparePoint(place.node, place.offset) === 0 && range.comparePoint(place.node, place.offset + 1) === 0;
+}
+
+/**
+ * The blocks a range of text is in, as an anchor names them: the one block holding it; across blocks,
+ * the blocks right inside the one holding both ends (or the page's) that it reaches, so their text
+ * holds it in order.
+ */
+export function unitsOfRange(range) {
+  const start = unitOf(range.startContainer);
+  const end = unitOf(range.endContainer);
+  if (!start || !end) return [];
+  if (start === end) return [start];
+  const common = unitOf(range.commonAncestorContainer);
+  if (common && (common === start || common === end)) return [common];
+  const scope = common ?? start.closest("main");
+  return [...scope.querySelectorAll(UNIT)].filter((unit) => unitOf(unit.parentElement) === common && unitOf(unit) === unit && range.intersectsNode(unit));
+}
+
+/**
+ * A selection of text as an anchor: { units (the block elements), range (the words, trimmed), excerpt
+ * ({ quote, prefix, suffix }) }, or null when it holds no words of the body.
+ */
+export function textSelection(range) {
+  const units = unitsOfRange(range);
+  if (units.length === 0) return null;
+  const read = readText(units);
+  let first = -1;
+  let last = -1;
+  read.at.forEach((place, index) => {
+    if (!inside(range, place) || read.text[index] === " " || read.text[index] === "\n") return;
+    if (first < 0) first = index;
+    last = index;
+  });
+  if (first < 0) return null;
+  const excerpt = excerptOf(read.text, first, last + 1);
+  if (!squash(excerpt.quote)) return null;
+  return { kind: "text", units, range: rangeOf(read, first, last + 1), excerpt };
+}
+
+/** Blocks selected whole as an anchor: { units, excerpt ({ quote }) }, or null. */
+export function blockSelection(units) {
+  const list = units.filter(annotatable);
+  if (list.length === 0) return null;
+  return { kind: "blocks", units: list, range: null, excerpt: { quote: tidyLines(readText(list).text).slice(0, BLOCKS_QUOTE_MOST) } };
+}
+
+/** The elements of `ids` on the page, in page order. */
+export function elementsOf(ids) {
+  const main = document.querySelector("main");
+  if (!main) return [];
+  const found = [...new Set(ids)].map((id) => main.querySelector(`[data-block-id="${CSS.escape(id)}"]`)).filter(Boolean);
+  return found.sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+}
+
+// The unit right after `unit` and what it holds (the next one in page order not inside it), or null.
+function unitAfter(unit) {
+  const main = unit.closest("main");
+  if (!main) return null;
+  const walker = document.createTreeWalker(main, NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => (node.matches(UNIT) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP) });
+  walker.currentNode = unit;
+  for (let next = walker.nextNode(); next; next = walker.nextNode()) if (!unit.contains(next)) return annotatable(next) ? next : null;
+  return null;
+}
+
+/**
+ * Where an anchor is on the page now: { range, units } for words (range null for blocks), null when
+ * it is not (its words or blocks gone), `unknown` when it cannot be told (kept as it was shown).
+ * `units` are the elements of its blocks; with `elements` given, those (blocks named by the page and
+ * not given their ids yet, or the blocks the page last found its words in). With `exact`, the words
+ * only as they are (shared/annotations.mjs findQuote). Words split by Enter in their middle are found
+ * as they are across their blocks and the one right after them (the server reads them so too).
+ */
+export function locate(anchor, elements = null, { exact = false } = {}) {
+  const units = elements?.filter((node) => node.isConnected) ?? elementsOf(anchor.blocks ?? []);
+  if (anchor.kind === "blocks") return units.length ? { range: null, units } : null;
+  if (units.length > 0) {
+    const read = readText(units);
+    const found = findQuote(read.text, anchor, { exact });
+    if (found && !found.unknown) return { range: rangeOf(read, found.start, found.end), units };
+    if (!found) {
+      const next = unitAfter(units.at(-1));
+      const more = next ? [...units, next] : null;
+      const split = more ? readText(more) : null;
+      const across = split ? findQuote(split.text, anchor, { exact: true }) : null;
+      // Begun in its own blocks and gone on in that one (not words of its own further on).
+      if (across && across.start < read.text.length && across.end > read.text.length) return { range: rangeOf(split, across.start, across.end), units: more };
+    }
+    if (found?.unknown) return { unknown: true, units };
+    return null;
+  }
+  // None of its blocks here (an Agent rewrote them without their ids): its words, found once in the page's blocks.
+  const needle = squash(anchor.quote);
+  const main = document.querySelector("main");
+  if (!needle || !main) return null;
+  const holding = [...main.querySelectorAll("[data-ge-unit]")].filter((unit) => annotatable(unit) && squash(readText([unit]).text).includes(needle));
+  const innermost = holding.filter((unit) => !holding.some((other) => other !== unit && unit.contains(other)));
+  if (innermost.length !== 1) return null;
+  const read = readText(innermost);
+  const found = findQuote(read.text, anchor);
+  return found && !found.unknown ? { range: rangeOf(read, found.start, found.end), units: innermost } : null;
+}
+
+/**
+ * `range` from its first character of text to its last (white space aside), in text nodes, or null
+ * when it holds none: a range the page's edits left with an end between elements (a block taken out
+ * moves an end to its parent) is read again from its words.
+ */
+export function tighten(range) {
+  if (!range.startContainer.isConnected || !range.endContainer.isConnected || range.collapsed) return null;
+  const root = range.commonAncestorContainer;
+  const walker = document.createTreeWalker(root.nodeType === 3 ? root.parentNode : root, NodeFilter.SHOW_TEXT);
+  let first = null;
+  let last = null;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (!range.intersectsNode(node)) continue;
+    const from = node === range.startContainer ? range.startOffset : 0;
+    const to = node === range.endContainer ? range.endOffset : node.data.length;
+    for (let at = from; at < to; at++) {
+      if (/\s|​|/.test(node.data[at])) continue;
+      first ??= { node, at };
+      last = { node, at };
+    }
+  }
+  if (!first) return null;
+  const tight = document.createRange();
+  tight.setStart(first.node, first.at);
+  tight.setEnd(last.node, last.at + 1);
+  return tight;
+}

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

@@ -0,0 +1,102 @@
+import { CARD, RAIL, TEXT_MOST } from "../../../shared/annotations.mjs";
+import { Z } from "../../../shared/layers.mjs";
+import { ICONS } from "../menu.mjs";
+import { tooltip } from "../tooltip.mjs";
+import { element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// What 批注 draws on the page (docs/editor.md "Annotations"), in a layer of its own at the page's
+// origin (it scrolls with the page natively), level `note` (shared/layers.mjs): with room, a card of
+// each annotation right of the column (data-margin on the layer); with none, the marker of each in the
+// column's right gutter and the card of the one shown by its words or blocks; and a block anchor's bar.
+// The words an anchor holds are marked by two CSS highlights (no DOM change): ge-note, and ge-note-hot
+// for the one shown; the blocks of the one shown are filled (fills.mjs).
+
+// Our own drawing, on the editor's 20-unit grid: the speech bubble of components/icons.mjs filled, its
+// two lines of text cut out: drawn by its fill alone (no stroke over it, which a translucent color
+// would paint twice), as far out as the line version's stroke reaches, the cuts a line wide (SOLID_NOTE);
+// the top bar's button is the same bubble in line (workbench components/icons.ts annotate).
+const SOLID_NOTE = "M10 17.425A7.425 7.425 0 1 0 2.575 10v5.25a2.175 2.175 0 0 0 2.175 2.175zM7.5 8.325h5.5a.675 .675 0 1 1 0 1.35h-5.5a.675 .675 0 1 1 0-1.35zM7.5 11.325h3.5a.675 .675 0 1 1 0 1.35h-3.5a.675 .675 0 1 1 0-1.35z"; // the bubble filled for a 1.35 stroke, its lines cut out
+const MARKER_ICON = `<svg viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="${SOLID_NOTE}"/></svg>`;
+
+export const MARK = "ge-note";
+export const HOT = "ge-note-hot";
+
+export const STYLE = `
+  ::highlight(${MARK}) { background-color: var(--ge-note); text-decoration: underline 2px var(--ge-note-line); }
+  ::highlight(${HOT}) { background-color: var(--ge-note-hot); text-decoration: underline 2px var(--ge-note-hot-line); }
+  .ge-note-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; z-index: ${Z.note}; pointer-events: none;
+    font: 14px/22px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; }
+  .ge-note-layer > * { position: absolute; left: 0; top: 0; }
+  .ge-note-layer svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
+  .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: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; }
+  .ge-note-face { position: relative; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; background: var(--ge-bg); box-shadow: var(--ge-shadow); }
+  /* In the margin (notion-lite's comments.css): at rest a hairline on the page's own background, a shade and 5px left under the pointer, the one in front no line, a shadow and 20px left. They move once they have been laid out (data-moves), never on the first paint. */
+  .ge-note-layer[data-margin] .ge-note-card { z-index: 0; }
+  .ge-note-layer[data-margin] .ge-note-card[data-front] { z-index: 1; }
+  .ge-note-layer[data-moves] .ge-note-card { transition: top 350ms ease; }
+  .ge-note-layer[data-margin] .ge-note-face { padding: 7px 11px; border: 1px solid var(--ge-line); background: var(--doc-bg); box-shadow: none; transition: transform 200ms ease, background-color 200ms ease; }
+  .ge-note-layer[data-margin] .ge-note-card:hover .ge-note-face { background: var(--ge-note-shade); transform: translateX(-5px); }
+  .ge-note-layer[data-margin] .ge-note-card[data-front] .ge-note-face { border-color: transparent; background: var(--ge-bg); box-shadow: var(--ge-shadow); transform: translateX(-20px); }
+  .ge-note-layer[data-margin][data-pressed] .ge-note-card { pointer-events: none; }
+  .ge-note-layer[data-margin] .ge-note-delete { top: 6px; right: 6px; }
+  .ge-note-layer[data-margin] .ge-note-card[data-last]::after { content: ""; position: absolute; top: 100%; left: 0; width: 1px; height: ${CARD.end}px; pointer-events: none; }
+  @media (prefers-reduced-motion: reduce) {
+    .ge-note-layer[data-moves] .ge-note-card, .ge-note-layer[data-margin] .ge-note-face { transition: none; }
+  }
+  .ge-note-card textarea { display: block; width: calc(100% - 28px); height: 22px; min-height: 22px; max-height: 220px; box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: none; resize: none; overflow: hidden;
+    background: transparent; color: inherit; font: inherit; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
+  .ge-note-card textarea::placeholder { color: var(--ge-tx3); opacity: 1; }
+  .ge-note-card[data-long] textarea { overflow-y: auto; scrollbar-width: thin; }
+  .ge-note-card[data-long] textarea { --top: 0px; --end: 0px; -webkit-mask-image: linear-gradient(transparent, #000 var(--top), #000 calc(100% - var(--end)), transparent); mask-image: linear-gradient(transparent, #000 var(--top), #000 calc(100% - var(--end)), transparent); }
+  .ge-note-card[data-long]:not([data-end]) textarea { --end: 28px; }
+  .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); }
+  @media print {
+    .ge-note-layer { display: none; }
+    ::highlight(${MARK}), ::highlight(${HOT}) { background-color: transparent; text-decoration: none; }
+  }
+`;
+
+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 });
+}
+
+/** 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 });
+  tooltip(erase, t("删除批注"));
+  return { node: element("div", { class: "ge-note-card", role: "group" }, element("div", { class: "ge-note-face" }, field, erase)), field, erase };
+}
+
+export const barNode = () => element("div", { class: "ge-note-bar" });
+
+/** The field as tall as its text (ten lines at most; then it scrolls, fading at its foot until its end and at its top once scrolled). Returns its height. */
+export function fitField(card, field) {
+  const scrolled = field.scrollTop;
+  field.style.height = "22px";
+  const height = Math.min(field.scrollHeight, 220);
+  field.style.height = `${Math.max(22, height)}px`;
+  field.scrollTop = scrolled;
+  const long = field.scrollHeight > 222;
+  card.toggleAttribute("data-long", long);
+  card.toggleAttribute("data-end", !long || field.scrollTop + field.clientHeight >= field.scrollHeight - 2);
+  card.toggleAttribute("data-top", long && field.scrollTop > 2);
+  return Math.max(22, height);
+}