@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/changes/bar.mjs

@@ -0,0 +1,102 @@
+import { t } from "../../../shared/i18n/index.mjs";
+import { Z } from "../../../shared/layers.mjs";
+import { PANEL_STYLE, onPanels, panelGone, panelShown } from "../panel.mjs";
+import { addStyle, button, element, fadeIn, fadeOut, mount } from "../ui.mjs";
+
+// The bar of the Agent's changes (docs/editor.md "Agent's changes"), Cursor's review bar: the third of
+// the editor's bottom panels (panel.mjs), in the middle of the window's bottom, so that a notice
+// stands above it as above the others. It says how many blocks the Agent added and changed (+) and
+// changed and deleted (−), the numbers in the conflict card's green and red, and offers 撤回 and 确认
+// (the primary one), buttons with no border, as the format bar's. Reverted, it says so and offers
+// 撤销 for UNDO_SHOWN. A conflict card at the left or the lost texts at the right reaching under it
+// lift it 8px above them.
+
+const STYLE = `
+  .ge-changes { position: fixed; left: 50%; bottom: var(--ge-changes-bottom, 16px); transform: translateX(-50%); z-index: ${Z.panel};
+    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; box-sizing: border-box; max-width: calc(100vw - 32px);
+    border-radius: 10px; background: var(--ge-bg); color: var(--ge-tx); box-shadow: var(--ge-shadow);
+    font: 13px/1 var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); white-space: nowrap; }
+  .ge-changes[hidden] { display: none; }
+  .ge-changes-what { color: var(--ge-tx2); }
+  .ge-changes-count { display: inline-flex; gap: 6px; margin-right: 4px; font-variant-numeric: tabular-nums; font-weight: 500; }
+  .ge-changes-plus { color: var(--ge-diff-add-text); }
+  .ge-changes-minus { color: var(--ge-diff-del-text); }
+  /* Its buttons as the editor's floating bars' (the format bar's 转换为): no border, 6px corners, a gray under the
+     pointer, darker pressed; 确认 the primary blue (the workbench dialog's, the media menu's 嵌入链接). */
+  .ge-changes button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 20ms ease-in; }
+  .ge-changes button:hover:not(:disabled) { background: var(--ge-hover); }
+  .ge-changes button:active:not(:disabled) { background: var(--ge-press); }
+  .ge-changes button[data-primary] { background: var(--ge-accent); color: #fff; }
+  .ge-changes button[data-primary]:hover:not(:disabled) { background: var(--ge-accent-hover); }
+  .ge-changes button[data-primary]:active:not(:disabled) { background: var(--ge-accent-press); }
+  .ge-changes button:disabled { opacity: .45; cursor: default; }
+  @media print { .ge-changes { display: none; } }
+`;
+
+export const UNDO_SHOWN = 6000; // how long a revert can be undone from the bar
+const ABOVE = 8; // px between a bottom panel and the bar lifted over it
+const BOTTOM = 16;
+
+/** The bar: { counts(counts), reverted(left, undo), hide(), node }. revert(), accept(): what its buttons do. */
+export function createBar({ revert, accept }) {
+  addStyle(PANEL_STYLE);
+  addStyle(STYLE);
+  let bar = null;
+  let timer = 0;
+  // Lifted over a bottom panel it would stand on.
+  const place = () => {
+    if (!bar || bar.hidden) return;
+    const own = bar.getBoundingClientRect();
+    let lift = BOTTOM;
+    for (const panel of document.querySelectorAll(".ge-conflicts:not([hidden]), .ge-panel")) {
+      const rect = panel.getBoundingClientRect();
+      if (rect.height > 0 && rect.left < own.right && rect.right > own.left) lift = Math.max(lift, Math.round(innerHeight - rect.top) + ABOVE);
+    }
+    bar.style.setProperty("--ge-changes-bottom", `${lift}px`);
+  };
+  onPanels(place);
+  addEventListener("resize", place, { passive: true });
+  const made = () => {
+    if (!bar) bar = mount(element("div", { class: "ge-changes", role: "region", "aria-label": t("Agent 的修改"), hidden: "" }));
+    return bar;
+  };
+  const show = (...children) => {
+    clearTimeout(timer);
+    const node = made();
+    node.replaceChildren(...children);
+    if (node.hidden) {
+      fadeIn(node);
+      panelShown(node);
+    }
+    place();
+  };
+  return {
+    get node() { return bar; },
+    counts({ added = 0, changed = 0, removed = 0 }) {
+      const plus = added + changed;
+      const minus = removed + changed;
+      show(
+        element("span", { class: "ge-changes-what", text: t("Agent 已修改") }),
+        element("span", { class: "ge-changes-count", title: t("Agent 新增 {0} 块、改动 {1} 块、删除 {2} 块", added, changed, removed) },
+          ...(plus ? [element("span", { class: "ge-changes-plus", text: `+${plus}` })] : []),
+          ...(minus ? [element("span", { class: "ge-changes-minus", text: `−${minus}` })] : [])),
+        button(t("撤回"), revert, { title: t("撤回 Agent 的这些修改，你自己的修改会保留"), "data-action": "revert" }),
+        button(t("确认"), accept, { primary: true, title: t("保留这些修改，不再标出"), "data-action": "accept" }),
+      );
+    },
+    // Reverted `left` ms ago at most: 撤销 offered until UNDO_SHOWN is over.
+    reverted(left, undo) {
+      show(
+        element("span", { class: "ge-changes-what", text: t("已撤回 Agent 的修改") }),
+        button(t("撤销"), undo, { "data-action": "undo" }),
+      );
+      timer = setTimeout(() => this.hide(), Math.max(0, left));
+    },
+    hide() {
+      clearTimeout(timer);
+      if (!bar || bar.hidden) return;
+      const node = bar;
+      fadeOut(node, 100, () => panelGone(node));
+    },
+  };
+}

package/browser/editor/page/changes/ghost.mjs

@@ -0,0 +1,206 @@
+import { IN_LAYER } from "../../../shared/layers.mjs";
+import { KIND_NAMES } from "../../components/registry.mjs";
+import { identityOf, withLeads } from "../core.mjs";
+import { own } from "../overlays.mjs";
+import { drawAt, layerOf } from "../overlay-layer.mjs";
+import { element } from "../ui.mjs";
+
+// The blocks an Agent deleted, shown where they were (docs/editor.md "Agent's changes"): a ghost of
+// them, their words in red struck through on a faint red fill, a line each (a heading larger and
+// bold, an item with its marker, nested items further in, a table a line each row, a block with no
+// words its kind's name), never a block of the page: nothing of it is in the document's flows, so no
+// commit, undo step, copy, selection, drop or search ever meets it. Room is made for it where the
+// blocks were by a margin of the block after the place (`before`; at the document's end the last
+// block's below it, `after`; with no block left at all, the body's top, `into`), written in a
+// stylesheet of the editor's own keyed by that block's identity (data-ge-id: never a style
+// attribute, which the file would get), and the ghost is drawn in that room in the block's overlay
+// layer (overlay-layer.mjs), measured first: the room is its height and the gap the page had
+// there, the gap kept above it and below it (a collapsed margin made good on a second measure). A
+// block that stands beside others (a Sheet's tab in its bar, a flowchart's node in its row, a column
+// of 分栏) has the room made before the row it stands in, which a margin of its own would push out of
+// line; what stands at one place is one ghost in one room (two groups before one row; one before a
+// block and one before the first of its blocks that stays, a paragraph before a list and the list's
+// first item: a margin of the inner one would fold into the outer one's, the two drawn over each
+// other). Placed again whenever the page may have moved (the overlays' frame loop), the room made
+// again when its height changes (the window narrowed, its lines wrapped anew).
+
+const REACH = 2; // px past the block at its sides, as a text block's fill
+const GAP_LEAST = 6;
+const GAP_MOST = 20;
+
+export const GHOST_STYLE = `
+  .ge-diff-ghost { left: 0; top: 0; z-index: ${IN_LAYER.halo}; box-sizing: border-box; padding: 2px ${REACH}px; border-radius: 4px; background: var(--ge-diff-del-fill); color: var(--ge-diff-del-text); pointer-events: none; user-select: none; overflow-wrap: anywhere; }
+  .ge-diff-ghost-line { position: relative; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
+  .ge-diff-ghost-line + .ge-diff-ghost-line { margin-top: 2px; }
+  .ge-diff-ghost-words { text-decoration: line-through; text-decoration-color: var(--ge-diff-del-text); }
+  .ge-diff-ghost-line[data-tag="h1"], .ge-diff-ghost-line[data-tag="h2"] { font-size: 1.25em; font-weight: 600; }
+  .ge-diff-ghost-line:is([data-tag="h3"], [data-tag="h4"]) { font-size: 1.1em; font-weight: 600; }
+  .ge-diff-ghost-line[data-tag="pre"] { font-family: var(--doc-mono, ui-monospace, SFMono-Regular, Consolas, monospace); font-size: .875em; }
+  .ge-diff-ghost-marker { position: absolute; transform: translateX(-100%); padding-right: .45em; font-variant-numeric: tabular-nums; }
+  .ge-diff-ghost-line[data-empty] .ge-diff-ghost-words { text-decoration: none; opacity: .8; }
+  @media print { .ge-diff-ghost { display: none; } }
+`;
+
+const shows = (node) => node.isConnected && node.getClientRects().length > 0 && node.getBoundingClientRect().width > 0;
+
+// Whether `node` stands beside the blocks next to it rather than under them: in a row of a flex box,
+// a grid of more than one column, or a line of text.
+function beside(node) {
+  const parent = node.parentElement;
+  if (!parent || parent.localName === "main") return false;
+  const style = getComputedStyle(parent);
+  if (style.display.includes("flex")) return style.flexDirection.startsWith("row");
+  if (style.display.includes("grid")) return style.gridTemplateColumns.trim().split(/\s+/).length > 1;
+  return getComputedStyle(node).display.startsWith("inline");
+}
+// The block a room is made before or after for `node`: itself, or the row it stands in.
+function rowOf(node) {
+  while (beside(node)) node = node.parentElement;
+  return node;
+}
+const level = (a, b) => Math.abs(a.getBoundingClientRect().top - b.getBoundingClientRect().top) < 1;
+
+/** A line of the ghost: one deleted block (source/changes.mjs ghostRow). */
+function lineOf(row) {
+  const words = (row.text ?? "").trim();
+  const line = element("div", { class: "ge-diff-ghost-line", "data-tag": row.tag ?? "" });
+  line.style.paddingLeft = `${(row.depth ?? 0) * 1.5 + (row.marker ? 1.5 : 0)}em`;
+  if (row.marker) line.append(element("span", { class: "ge-diff-ghost-marker", text: row.marker === "ol" ? `${row.number ?? 1}.` : "•" }));
+  if (!words) line.setAttribute("data-empty", "");
+  line.append(element("span", { class: "ge-diff-ghost-words", text: words || KIND_NAMES[row.kind] || "…" }));
+  return line;
+}
+
+/**
+ * The ghosts of a review's deleted blocks. Returns { add(group, anchor, edge), place(), clear(),
+ * drop(gone?), count, entries }: add makes one (drawn at the next place), place puts each where its
+ * room is (made or made again as needed), clear takes them and their rooms away.
+ */
+export function createGhosts() {
+  const sheet = element("style", { "data-doc-dev": "", "data-ge-changes-room": "" });
+  let entries = []; // { drawn, group, anchor, edge, target, height, width, gap, room }
+
+  // The rooms, one rule each, for the screen alone (printed, the page is as the file has it). A
+  // room's margin is !important: the kit's spacing (a flow's first block's none, the gap between two
+  // kinds of block) is said by rules more specific than one attribute, and the room is added to it.
+  function writeRules() {
+    const text = entries.map((entry) => entry.room).filter(Boolean).join("\n");
+    const css = text ? `@media screen {\n${text}\n}` : "";
+    if (sheet.textContent !== css) sheet.textContent = css;
+    if (css && !sheet.isConnected) document.head.append(sheet);
+    if (!css && sheet.isConnected) sheet.remove();
+  }
+  const selectorOf = (target) => (target.localName === "main" ? "main" : `[data-ge-id="${CSS.escape(identityOf(target))}"]`);
+  const setRule = (entry, declaration) => {
+    entry.room = declaration ? `${selectorOf(entry.target)} { ${declaration} }` : null;
+    writeRules();
+  };
+
+  // Room for `height` px where `entry`'s blocks were, the gap the page had there kept on either side.
+  function makeRoom(entry, height) {
+    const { target, edge } = entry;
+    setRule(entry, null);
+    const style = getComputedStyle(target);
+    if (edge === "after") {
+      entry.gap = Math.min(GAP_MOST, Math.max(GAP_LEAST, parseFloat(style.marginBottom) || 0));
+      setRule(entry, `margin-bottom: ${Math.round((parseFloat(style.marginBottom) || 0) + entry.gap + height + entry.gap)}px !important;`);
+      return;
+    }
+    if (edge === "into") {
+      entry.gap = GAP_LEAST;
+      setRule(entry, `padding-top: ${Math.round((parseFloat(style.paddingTop) || 0) + height + 2 * entry.gap)}px !important;`);
+      return;
+    }
+    const top = target.getBoundingClientRect().top;
+    let before = target.previousElementSibling;
+    while (before && (before.hasAttribute("data-doc-dev") || !shows(before))) before = before.previousElementSibling;
+    const above = before ? top - before.getBoundingClientRect().bottom : null;
+    entry.gap = Math.min(GAP_MOST, Math.max(GAP_LEAST, above ?? GAP_LEAST));
+    const want = height + entry.gap; // how far the block goes down
+    let margin = (parseFloat(style.marginTop) || 0) + want;
+    setRule(entry, `margin-top: ${Math.round(margin)}px !important;`);
+    const moved = target.getBoundingClientRect().top - top;
+    if (Math.abs(moved - want) > 0.5) { // its margin collapsed with the one above it
+      margin += want - moved;
+      setRule(entry, `margin-top: ${Math.round(margin)}px !important;`);
+    }
+  }
+
+  return {
+    get count() { return entries.length; },
+    get entries() { return entries; },
+    /** A ghost of `group` (a review's `removed` entry) at `anchor`'s `edge` ("before", "after", "into"). */
+    add(group, anchor, edge) {
+      const lines = group.rows.map(lineOf);
+      if (group.more || group.rows.length === 0) lines.push(lineOf({ text: "…", tag: "", depth: 0 }));
+      const target = edge === "into" ? anchor : rowOf(edge === "before" ? withLeads(anchor)[0] : anchor);
+      // At the place of one made already (the groups come in the page's order): its lines go on in that one.
+      const one = entries.find((entry) => entry.edge === edge && (entry.target === target || (edge === "before" && entry.target.contains(target) && level(entry.target, target))));
+      if (one) {
+        one.drawn.append(...lines);
+        one.height = -1;
+        return one;
+      }
+      const drawn = element("div", { class: "ge-diff-ghost", "data-doc-dev": "", "aria-hidden": "true" }, ...lines);
+      const entry = { drawn, group, anchor, edge, target, height: -1, width: -1, gap: GAP_LEAST, room: null };
+      own(drawn, "changes", { owner: anchor, alive: () => anchor.isConnected && entries.includes(entry) });
+      entries.push(entry);
+      return entry;
+    },
+    /** Each ghost where its room is; a block not shown (a closed disclosure, another tab) neither ghost nor room. */
+    place() {
+      let changed = false;
+      for (const entry of entries) {
+        const { drawn: node, target } = entry;
+        if (!entry.anchor.isConnected || !shows(target)) {
+          node.remove();
+          if (entry.room) {
+            entry.room = null;
+            entry.height = -1;
+            changed = true;
+          }
+          continue;
+        }
+        const layer = layerOf(target);
+        if (node.parentNode !== layer) {
+          const font = getComputedStyle(target.closest("main") ?? document.body);
+          Object.assign(node.style, { fontFamily: font.fontFamily, fontSize: font.fontSize, lineHeight: font.lineHeight });
+          layer.append(node);
+        }
+        let rect = target.getBoundingClientRect();
+        const width = Math.round(rect.width + 2 * REACH);
+        if (width !== entry.width) {
+          node.style.width = `${width}px`;
+          entry.width = width;
+        }
+        const height = node.offsetHeight;
+        if (height !== entry.height) {
+          makeRoom(entry, height);
+          entry.height = height;
+          rect = target.getBoundingClientRect();
+        }
+        const top = entry.edge === "before" ? rect.top - entry.gap - height
+          : entry.edge === "after" ? rect.bottom + entry.gap
+          : rect.top + (parseFloat(getComputedStyle(target).paddingTop) || 0) - height - entry.gap;
+        const origin = layer.getBoundingClientRect();
+        drawAt(node, layer, rect.left - REACH - origin.left, top - origin.top);
+      }
+      if (changed) writeRules();
+      return entries.length > 0;
+    },
+    /** Ghosts whose block left the page go, and their rooms. */
+    settle() {
+      const gone = entries.filter((entry) => !entry.anchor.isConnected);
+      if (gone.length === 0) return;
+      for (const entry of gone) entry.drawn.remove();
+      entries = entries.filter((entry) => !gone.includes(entry));
+      writeRules();
+    },
+    /** Every ghost and room taken away. */
+    clear() {
+      for (const entry of entries) entry.drawn.remove();
+      entries = [];
+      writeRules();
+    },
+  };
+}

package/browser/editor/page/changes/gone-words.mjs

@@ -0,0 +1,94 @@
+import { isPad } from "../pads.mjs";
+
+// The words an Agent took out of a text block, shown where they were (docs/editor.md "Agent's
+// changes"): an empty inline span of the editor's own in the block's text (`span.ge-diff-del`,
+// `data-ge-gone-words` holding the words, drawn by its ::before, contenteditable="false",
+// aria-hidden, data-doc-dev). It holds no text node, so whatever reads the block's words (its
+// textContent, a selection's text, readText, the search, the outline, a copy's plain text) reads none
+// of them; what reads its markup leaves it out (core.mjs serializeNodes, writing the text on either side
+// of it as one; ownHTML, which undo records; a copy's clipboard.own, which drops data-doc-dev). Put in, it
+// splits the text node it stands in (the live ranges, the selection and the added words' highlight
+// among them, follow); taken out, the two halves are one text node again, the caret where it was (and
+// the live ranges it is given: a selection across blocks', which keeps its ends as points of its own).
+
+const ATTRIBUTE = "data-ge-gone-words";
+
+/**
+ * A mark of `words` taken out (not on the page yet). `before`, `after`: the characters of the text on
+ * either side of where it goes. A space at either end of the words is drawn apart from them, neither
+ * struck nor filled (data-ge-gone-lead, -tail), and only where the text beside has none: "words
+ * [that were removed] stay", never a struck space.
+ */
+export function goneMark(words, doc = document, { before, after } = {}) {
+  const span = doc.createElement("span");
+  span.className = "ge-diff-del";
+  const bare = words.trim();
+  span.setAttribute(ATTRIBUTE, bare || words);
+  if (bare && /^\s/.test(words) && before !== undefined && !/\s/.test(before)) span.setAttribute("data-ge-gone-lead", "");
+  if (bare && /\s$/.test(words) && after !== undefined && !/\s/.test(after)) span.setAttribute("data-ge-gone-tail", "");
+  span.setAttribute("contenteditable", "false");
+  span.setAttribute("aria-hidden", "true");
+  span.setAttribute("data-doc-dev", "");
+  return span;
+}
+
+/**
+ * Where words taken out at character `at` of `read` (annotate/anchors.mjs readText of the block)
+ * stand: before that character, or after the one before it when it is a line's end or there is
+ * none (the words taken out at the block's end). { place, side }, or null for a block with no text.
+ */
+export function placeOf(read, at) {
+  if (read.at[at]) return { place: read.at[at], side: "before" };
+  if (at > 0 && read.at[at - 1]) return { place: read.at[at - 1], side: "after" };
+  for (let index = at + 1; index < read.at.length; index++) if (read.at[index]) return { place: read.at[index], side: "before" };
+  for (let index = Math.min(at, read.at.length) - 1; index >= 0; index--) if (read.at[index]) return { place: read.at[index], side: "after" };
+  return null;
+}
+
+/** Put `mark` at `where` (placeOf): in a text node split there, or beside a formula or a chip, never inside one. */
+export function putMark(mark, { place, side }) {
+  if (place.node) {
+    const { node } = place;
+    const at = side === "before" ? place.offset : place.offset + 1;
+    if (at <= 0) node.before(mark);
+    else if (at >= node.length) node.after(mark);
+    else node.splitText(at).before(mark);
+    return;
+  }
+  const beside = place.element.closest("[data-ge-atom]") ?? place.element;
+  if (side === "before") beside.before(mark);
+  else beside.after(mark);
+}
+
+/**
+ * Take `mark` off the page, the text on either side of it one text node again, the selection where it
+ * was, and so each of `ranges` (live ranges a tool keeps: a selection across blocks' pieces,
+ * text-select/), whose ends in the second half would otherwise fall out of the text with it.
+ */
+export function takeMark(mark, ranges = []) {
+  const first = mark.previousSibling;
+  const second = mark.nextSibling;
+  mark.remove();
+  if (first?.nodeType !== 3 || second?.nodeType !== 3 || isPad(first) || isPad(second)) return;
+  const selection = first.ownerDocument.getSelection();
+  const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+  const length = first.length;
+  const held = ranges.map((range) => [range, range.startContainer === second ? range.startOffset : -1, range.endContainer === second ? range.endOffset : -1]);
+  first.appendData(second.data);
+  second.remove();
+  for (const [range, start, end] of held) {
+    if (start >= 0) range.setStart(first, length + start);
+    if (end >= 0) range.setEnd(first, length + end);
+  }
+  if (anchorNode !== second && focusNode !== second) return; // where it is still says the same (a point in `first`, or in their parent)
+  const point = (node, offset) => (node === second ? [first, length + offset] : [node, offset]);
+  selection.setBaseAndExtent(...point(anchorNode, anchorOffset), ...point(focusNode, focusOffset));
+}
+
+// The reader edits a block holding marks: they go first, before the edit touches it (changes/index.mjs).
+// A key edits unless it only moves the caret or the view, or copies, selects all, finds, saves or prints.
+const MOVES = /^(Arrow(Up|Down|Left|Right)|Home|End|PageUp|PageDown|Escape|Shift|Control|Alt|Meta|AltGraph|CapsLock|NumLock|ScrollLock|ContextMenu|F\d{1,2})$/;
+const KEEPS = /^[acfsp]$/;
+
+/** Whether a keydown may edit the block the caret is in (an input method's Process key does). */
+export const editsBy = (event) => !MOVES.test(event.key) && !((event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey && KEEPS.test(event.key));