@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/conflicts.mjs

@@ -0,0 +1,269 @@
+import { blocksText, partOwner, plainText } from "./core.mjs";
+import { commonRun } from "./merge.mjs";
+import { PANEL_STYLE, panelGone, panelShown } from "./panel.mjs";
+import { addStyle, button, element, mount } from "./ui.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// The conflicts the page holds back (docs/editor.md, "Conflicts"), each a card in one panel: what
+// happened, the reader's version and the file's where there are two (a word diff on demand), and
+// what can be done about it. Only the block or operation concerned waits; the rest of the page goes
+// on saving, and the reader may leave the page (what waits is in the crash buffer). The block
+// concerned is flagged (data-ge-flag="conflict"); a click on it shows its card.
+//
+// An entry is { key, kind, reason, ... }: kind "text" (block, mine: its text and the blocks split
+// off it, written with it; theirs), "unit" (unit, change),
+// "insert" (element, mine), "reverted" (mine, theirs: someone else's write put the reader's committed
+// text back), "reverted-unit" (unit, gone, mine: it took out a block the reader made, or moved one
+// the reader moved back) or "reverted-source" (unit, written: it put back parts of what the block's
+// component wrote). act(entry, action) does what the reader chose; it resolves with whether the card goes.
+//
+// What a component wrote (a unit's `change.source`, or what someone else put back of it) is no text:
+// the reader's version is the block as it stands on the page, flagged, and the card prints none of it.
+// What it offers to keep is that block, copied as Ctrl+C copies it selected, which pastes as a block of
+// the same package holding what the page holds, whatever the reader then chooses.
+
+// The card is the editor's one bottom panel (panel.mjs, shared with the lost texts):
+// a popover like the workbench's, no colored frame, the flagged block is what stands out; the
+// reader's words and the file's are told apart by one pair of colors.
+const STYLE = `
+  .ge-conflicts { --ge-mine: light-dark(rgba(223,22,0,.094), rgba(255,104,92,.24)); --ge-mine-text: light-dark(#cf5148, #ff8f85); --ge-theirs: light-dark(rgba(0,100,45,.09), rgba(108,255,172,.157)); --ge-theirs-text: light-dark(#448361, #6fc596); }
+  .ge-conflict[data-ge-current] { background: var(--ge-hover); }
+  .ge-conflict-label { display: flex; gap: 6px; margin: 10px 0 3px; color: var(--ge-tx2); font-size: 12px; }
+  .ge-conflict :is(ins, del, .ge-chip) { border-radius: 3px; text-decoration: none; }
+  .ge-conflict :is(del, .ge-chip[data-mine]) { background: var(--ge-mine); color: var(--ge-mine-text); }
+  .ge-conflict :is(ins, .ge-chip[data-theirs]) { background: var(--ge-theirs); color: var(--ge-theirs-text); }
+  .ge-chip { padding: 0 6px; }
+  .ge-conflict-quiet { display: flex; gap: 2px; margin-left: auto; }
+`;
+
+// The server's reasons for what the file cannot hold, whatever stands in it now (source/checks.mjs).
+const UNFIT = new Set(["invalid", "fixed", "empty", "no-package"]);
+
+/** Whether a held entry is what the file cannot hold, no conflict with a newer version of it. */
+export const unfit = (entry) => UNFIT.has(entry.reason);
+
+/** Whether a held entry was refused for what became of its component's package, the file as it was. */
+export const packageChanged = (entry) => entry.reason === "package";
+
+// Whether what the reader wrote is a block a component writes, kept by copying the block: no text.
+const holdsBlock = (entry) => (entry.kind === "unit" && Boolean(entry.change?.source)) || entry.kind === "reverted-source";
+
+// What the card says and offers, by kind and reason.
+function describe(entry, restorable) {
+  const copy = holdsBlock(entry) ? [t("复制这一块"), "copy-block"] : [t("复制我的文字"), "copy"];
+  if (entry.kind === "reverted") {
+    return { text: t("AI 的写入把你之前保存的这段修改改回去了。"), both: true, actions: [[t("恢复我的"), "mine", true], [t("接受 AI 的"), "theirs"]] };
+  }
+  if (entry.kind === "reverted-unit") {
+    return { text: entry.gone ? t("AI 的写入删掉了你这次新建的这一块。") : t("AI 的写入把你移动的这一块放回了原处。"), actions: [[t("恢复我的"), "mine", true], [t("接受 AI 的"), "theirs"], ...(entry.mine ? [copy] : [])] };
+  }
+  if (entry.kind === "reverted-source") {
+    return { text: t("AI 的写入把你在这个组件里保存的修改改回去了。"), actions: [[t("恢复我的"), "mine", true], [t("接受 AI 的"), "theirs"], copy] };
+  }
+  if (unfit(entry)) return { text: entry.reason === "no-package" ? t("这个组件已经不在这个工作区里，这一块没有保存。") : t("这一处的内容文档存不下，没有保存。"), actions: [entry.kind === "insert" ? [t("撤销这一块"), "undo", true] : [t("使用最新版本"), "theirs", true], ...(entry.mine || holdsBlock(entry) ? [copy] : [])] };
+  if (entry.kind === "text") {
+    if (entry.reason === "changed") return { text: t("这一段你和 AI 同时改了同一处。"), both: true, diff: true, actions: [[t("保留我的"), "mine", true], [t("使用最新版本"), "theirs"]] };
+    if (entry.reason === "missing") return { text: t("你修改的这一块已被 AI 删除。"), actions: [...(restorable ? [[t("恢复我的"), "restore", true]] : []), [t("接受删除"), "accept"], copy] };
+    if (entry.reason === "structure") return { text: t("你修改的这一处所在的组件已被 AI 改过结构，没法确定对应的位置。"), actions: [[t("使用最新版本"), "theirs"], copy] };
+    if (packageChanged(entry)) return { text: t("这个组件的组件包刚刚变了，这处文字不再能修改，你的修改没有写进文件。"), actions: [[t("使用最新版本"), "theirs"], copy] };
+    return { text: t("这一处在文件里找不到唯一对应的位置，没有保存。"), actions: [[t("使用最新版本"), "theirs"], copy] };
+  }
+  if (entry.kind === "unit") {
+    const what = entry.change?.remove ? t("删除") : entry.change?.replace || entry.change?.retag ? t("转换类型") : entry.change?.move ? t("移动") : t("调整");
+    const words = entry.mine || holdsBlock(entry) ? [copy] : []; // a conversion carries the block's text, a component's write the block
+    const verb = what.toLowerCase(); // in a sentence (English writes it in lower case there)
+    // Refused again after 仍然… (`again`): written again since the reader was shown it, which the card says,
+    // so that the next word is seen to be a new decision. The block's words as the file holds them (`theirs`)
+    // stand beside the reader's: what 仍然… writes over, and, of a block deleted, which one it is.
+    if (entry.reason === "changed") return { text: entry.again ? t("AI 在你看到之后又改了这一块，这次{0}没有保存。", verb) : t("你{0}的这一块已被 AI 修改。", verb), both: true, actions: [[t("仍然{0}", what), "force", true], [t("保留 AI 的"), "theirs"], ...words] };
+    if (entry.reason === "missing") return { text: t("你{0}的这一块已被 AI 删除。", verb), actions: [[t("接受删除"), "accept", true], ...words] };
+    if (entry.reason === "referenced") return { text: t("你删除的这一块现在被脚本或页面其他地方引用了，不能删除。"), actions: [[t("保留它"), "theirs", true]] };
+    if (entry.reason === "ambiguous") return { text: t("你{0}的这一块在文件里找不到唯一对应的一块（AI 写了一样的内容），没有保存。", verb), actions: [[t("使用最新版本"), "theirs", true], ...words] };
+    return { text: t("你{0}的这一块没能写进文件（周围的内容已被 AI 改动）。", verb), actions: [[t("使用最新版本"), "theirs", true], ...words] };
+  }
+  return { text: t("你新建（或放回）的这一块没法放进文件（周围的块已被 AI 改动或删除）。"), actions: [[t("放到附近"), "nearby", true], [t("撤销这一块"), "undo"], copy] };
+}
+
+// A word diff of two texts, the reader's version against the file's: runs of { tag, text }, tag null
+// for words both have, "del" for the reader's alone and "ins" for the file's alone (an ins before
+// the del it stands beside). Words are runs of letters and digits, spaces, single other characters
+// (each Chinese character on its own); at most 1500 words of each (merge.mjs commonRun finds what is shared).
+export function wordDiff(mine, theirs) {
+  const tokens = (text) => (text.match(/[A-Za-z0-9]+|\s+|[^A-Za-z0-9\s]/gu) ?? []).slice(0, 1500);
+  const a = tokens(mine);
+  const b = tokens(theirs);
+  const runs = [];
+  const add = (tag, text) => {
+    if (runs.at(-1)?.tag === tag) runs.at(-1).text += text;
+    else runs.push({ tag, text });
+  };
+  let [i, j] = [0, 0];
+  for (const [x, y] of [...commonRun(a, b), [a.length, b.length]]) {
+    while (j < y) add("ins", b[j++]);
+    while (i < x) add("del", a[i++]);
+    if (x < a.length) add(null, a[i++]);
+    j++;
+  }
+  return runs;
+}
+
+const diffNodes = (mine, theirs) => wordDiff(mine, theirs).map(({ tag, text }) => tag ? element(tag, { text }) : document.createTextNode(text));
+
+/**
+ * act(entry, action) -> Promise<boolean>: do what the reader chose ("mine", "theirs", "force",
+ * "restore", "accept", "undo", "nearby"; "copy" and "copy-block" are done here); true when the card goes. nodeOf(entry): the
+ * block it is about, or null; restorable(entry): whether a text the file lost can be made again
+ * as a new block; copyBlock(node): the block to the clipboard as the editor copies one selected (clipboard/
+ * copyBlocks), whether it went; say(text, kind): the status line.
+ */
+export function createConflicts({ act, nodeOf, restorable, copyBlock, say }) {
+  addStyle(PANEL_STYLE);
+  addStyle(STYLE);
+  const cards = new Map(); // key -> { entry, node }
+  let panel = null;
+  let serial = 0;
+
+  const flag = (entry, on) => {
+    const node = nodeOf(entry);
+    if (on) node?.setAttribute("data-ge-flag", "conflict");
+    else if (node?.getAttribute("data-ge-flag") === "conflict") node.removeAttribute("data-ge-flag");
+  };
+
+  function render() {
+    if (cards.size === 0) {
+      if (panel) {
+        panel.remove();
+        panelGone(panel);
+      }
+      panel = null;
+      return;
+    }
+    if (!panel) {
+      panel = mount(element("div", { class: "ge-conflicts", role: "region", "aria-label": t("冲突") }));
+      panelShown(panel);
+    }
+    const conflicts = [...cards.values()].every(({ entry }) => !unfit(entry));
+    const head = element("div", { class: "ge-conflicts-head" }, element("span", { text: conflicts ? t("{0} 处冲突待处理", cards.size) : t("{0} 处内容待处理", cards.size) }), button(t("收起"), () => { panel.hidden = true; }, { "data-quiet": "" }));
+    panel.replaceChildren(head, ...[...cards.values()].map(({ node }) => node));
+  }
+
+  function card(entry) {
+    const { text, both, diff, actions } = describe(entry, restorable(entry));
+    const mine = entry.mine && !holdsBlock(entry) ? plainText(entry.mine) : "";
+    const theirs = typeof entry.theirs === "string" ? plainText(entry.theirs) : "";
+    const node = element("div", { class: "ge-conflict" }, element("p", { text }));
+    const versions = element("div");
+    if (mine) versions.append(element("div", { class: "ge-conflict-label", text: t("你的版本") }), element("div", { class: "ge-version", text: mine }));
+    if (both && theirs) versions.append(element("div", { class: "ge-conflict-label", text: t("文件里的（AI 的）") }), element("div", { class: "ge-version", text: theirs }));
+    node.append(versions);
+    const buttons = element("div", { class: "ge-actions" });
+    const quiet = element("span", { class: "ge-conflict-quiet" }); // looking, not deciding: on the right
+    for (const [label, action, primary] of actions) {
+      buttons.append(button(label, async () => {
+        if (action === "copy-block") {
+          const node = nodeOf(entry);
+          if (!node?.isConnected || !copyBlock(node)) say(t("没能完成，请再试一次。"), "error");
+          return;
+        }
+        if (action === "copy") {
+          // What the block holds now, with the blocks split off it now (written with it), while on the
+          // page: the reader may have written on.
+          const node = nodeOf(entry);
+          const parts = node?.parentElement ? [...node.parentElement.children].filter((other) => partOwner(other)?.owner === node) : [];
+          const text = [node, ...parts].filter((part) => part?.isConnected).map(blocksText).filter(Boolean).join("\n") || mine;
+          if (text) navigator.clipboard?.writeText(text).then(() => say(t("已复制。")));
+          else say(t("没有可复制的文字。"));
+          return;
+        }
+        buttons.querySelectorAll("button").forEach((each) => { each.disabled = true; });
+        const done = await act(entry, action).catch(() => false);
+        buttons.querySelectorAll("button").forEach((each) => { each.disabled = false; });
+        if (done) remove(entry.key);
+        else say(t("没能完成，请再试一次。"), "error");
+      }, { primary: Boolean(primary) }));
+    }
+    // The word diff takes the two versions' place (one text, the differing words in their colors).
+    if (diff && mine && theirs) {
+      const legend = element("div", { class: "ge-conflict-label" }, element("span", { class: "ge-chip", "data-mine": "", text: t("你的") }), element("span", { class: "ge-chip", "data-theirs": "", text: t("AI 的") }));
+      const view = element("div", { hidden: "" }, legend, element("div", { class: "ge-version" }));
+      const toggle = button(t("查看局部差异"), () => {
+        view.hidden = !view.hidden;
+        versions.hidden = !view.hidden;
+        toggle.textContent = view.hidden ? t("查看局部差异") : t("查看两个版本");
+        if (!view.hidden) view.lastElementChild.replaceChildren(...diffNodes(mine, theirs));
+      }, { "data-quiet": "" });
+      quiet.append(toggle);
+      node.append(view);
+    }
+    if (nodeOf(entry)) quiet.append(button(t("定位"), () => locate(entry.key), { "data-quiet": "" }));
+    if (quiet.childElementCount > 0) buttons.append(quiet);
+    node.append(buttons);
+    return node;
+  }
+
+  /** Hold these conflicts for the reader: each a card, its block flagged. */
+  function add(entries) {
+    for (const entry of entries) {
+      // An entry with no key of its own (not one of commits' issues) gets the panel's own.
+      const key = entry.key ?? `i${serial++}`;
+      const held = { ...entry, key };
+      cards.get(key)?.node.remove();
+      cards.set(key, { entry: held, node: card(held) });
+      flag(held, true);
+    }
+    render();
+    if (panel) panel.hidden = false;
+  }
+
+  /**
+   * The card of `key` goes (decided). Its block stays flagged while another card is about it (a
+   * component's write held, and what someone else's write put back of what it wrote before).
+   */
+  function remove(key) {
+    const found = cards.get(key);
+    if (!found) return;
+    cards.delete(key);
+    const node = nodeOf(found.entry);
+    if (!node || ![...cards.values()].some(({ entry }) => nodeOf(entry) === node)) flag(found.entry, false);
+    render();
+  }
+
+  /** The cards `lapsed(entry)` says are about nothing any more go. Returns their entries. */
+  function drop(lapsed) {
+    const gone = [...cards.values()].map(({ entry }) => entry).filter(lapsed);
+    gone.forEach((entry) => remove(entry.key));
+    return gone;
+  }
+
+  // Scroll to the block of a card, what hides it opened first (a closed disclosure, a tab not shown: the
+  // kit's DocKit.reveal), and mark the card as the one looked at.
+  function locate(key) {
+    const found = cards.get(key);
+    const node = found && nodeOf(found.entry);
+    if (node) globalThis.DocKit?.reveal(node);
+    node?.scrollIntoView({ block: "center", behavior: "smooth" });
+    for (const other of cards.values()) other.node.toggleAttribute("data-ge-current", other === found);
+  }
+
+  /**
+   * Flag again the block each card is about: undo or a conversion may have put another element in
+   * its place (the one flagged before is off the page, or no longer what a card is about).
+   */
+  function reflag() {
+    const current = new Set([...cards.values()].map(({ entry }) => nodeOf(entry)).filter(Boolean));
+    for (const node of document.querySelectorAll('[data-ge-flag="conflict"]')) if (!current.has(node)) node.removeAttribute("data-ge-flag");
+    for (const node of current) if (node.getAttribute("data-ge-flag") !== "conflict") node.setAttribute("data-ge-flag", "conflict");
+  }
+
+  /** A click on a flagged block: its card, shown. */
+  function show(target) {
+    const found = [...cards.values()].find(({ entry }) => nodeOf(entry)?.contains(target));
+    if (!found) return false;
+    if (panel) panel.hidden = false;
+    for (const other of cards.values()) other.node.toggleAttribute("data-ge-current", other === found);
+    found.node.scrollIntoView({ block: "nearest" });
+    return true;
+  }
+
+  return { add, remove, drop, show, reflag, node: () => panel };
+}