@heycys/gallery 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,131 @@
+import { iconUrl } from "../../../shared/emoji/icon-value.mjs";
+import { escapeAttribute } from "../../../shared/escape.mjs";
+import { addressOn, decoded, hashAddress } from "../../../shared/page-address.mjs";
+import { inTrash, namedLinks, pageLink, pageLinks } from "../../../shared/page-links.mjs";
+import { PAGE_ICON } from "../../components/icons.mjs";
+
+// The documents of the workspace, as a link's card, a page block's box and "@" look for them
+// (docs/editor.md, "Links"): one search for the three. The list is read once for each opening from
+// what the workbench reads itself (GET /__gallery/workspace/outline: no route of its own, nothing
+// pushed), in the sidebar's order, each document with the title of the one above it in the sidebar; 写作偏好
+// is no page to link to, and this page has the title it shows now, not the one last saved. A list that
+// cannot be read is no results, and the field goes on taking addresses.
+//
+// What a copy writes is an address by a page's link, and a copy cannot wait for an answer: the
+// clipboard takes a write only in the click itself. So the page holds the list ready, the last one
+// read by any of these (holdPages reads one as the page starts, as it gets the focus and as a block's
+// menu opens), and goes by it with the title it shows now (heldList), saved or not. This page has its
+// link whatever the list says. Another page, until the first answer comes, a moment as the page opens,
+// or for as long as the server cannot be reached, goes by its page id, which opens it all the same.
+//
+// A title is matched as it is written, without pinyin: it starts with what is typed, or one of its
+// words does, or it holds it, or it holds its characters in their order (what makes it fuzzy), and
+// within each of those the sidebar's order stands. No words typed is the sidebar's order.
+
+const OUTLINE = "/__gallery/workspace/outline";
+const TRASH = "/__gallery/workspace/trash";
+const MOST = 6; // rows of a search
+
+let held = null; // the list as last read
+let shown = () => null; // this page, as readPages takes it
+
+/**
+ * The workspace's documents: { pages: [{ slug, title, icon, parent }] (`parent`: the title of the one
+ * it is under, or null), links: their links (shared/page-links.mjs), trash: what the trash holds }, or
+ * null when the list cannot be read. `own`: this page, { slug, title } as it shows it.
+ */
+export async function readPages(own = null) {
+  const listed = await fetch(OUTLINE).then((answer) => answer.json()).catch(() => null);
+  if (!listed?.reports) return null;
+  const titleOf = (slug) => (slug === own?.slug && own.title ? own.title : listed.reports[slug]?.title);
+  const pages = [];
+  const walk = (parent) => {
+    for (const slug of listed.outline?.children?.[parent] ?? []) {
+      if (!listed.reports[slug] || listed.reports[slug].instructions) continue;
+      pages.push({ slug, title: titleOf(slug) || slug, icon: listed.reports[slug].icon ?? null, parent: parent ? titleOf(parent) || parent : null });
+      walk(slug);
+    }
+  };
+  walk("");
+  held = { pages, links: pageLinks(pages.map(({ slug }) => ({ slug, title: titleOf(slug) }))), trash: listed.trash ?? [] };
+  return held;
+}
+
+/** Read the list for what cannot wait for it. `own`: what readPages takes of this page, asked for each time, as its title may be changing. */
+export function holdPages(own) {
+  shown = own;
+  readPages(own());
+}
+
+/** The list held, as a list readPages gives it with `named` (shared/page-links.mjs namedLinks) and this page by the title it shows now: with no list read yet, its link and no pages. */
+export function heldList() {
+  const { slug, title } = shown() ?? {};
+  const pages = (held?.pages ?? []).map((page) => (page.slug === slug && title ? { ...page, title } : page));
+  const links = new Map(held?.links);
+  if (title) links.set(slug, pageLink({ slug, title }));
+  const trash = held?.trash ?? [];
+  return { pages, links, trash, named: namedLinks(links, trash) };
+}
+
+/** Whether document `slug` is in the workspace's trash (not when the trash cannot be read). */
+export async function trashed(slug) {
+  const listed = await fetch(TRASH).then((answer) => answer.json()).catch(() => null);
+  return inTrash(listed?.entries ?? [], slug);
+}
+
+const LETTER = /[\p{L}\p{M}\p{N}]/u;
+
+// Whether a word of `title` starts with `query`: somewhere it stands with no letter or number before it.
+function startsWord(title, query) {
+  for (let at = title.indexOf(query); at >= 0; at = title.indexOf(query, at + 1)) if (at === 0 || !LETTER.test(title[at - 1])) return true;
+  return false;
+}
+
+// Whether the characters of `query` stand in `title`, in their order.
+function inOrder(title, query) {
+  let at = 0;
+  for (const character of query.replace(/\s/g, "")) {
+    at = title.indexOf(character, at);
+    if (at < 0) return false;
+    at += character.length;
+  }
+  return true;
+}
+
+// How well `title` matches `query` (both in lower case), the lower the better; null for not at all.
+function rank(title, query) {
+  if (title.startsWith(query)) return 0;
+  if (startsWord(title, query)) return 1;
+  if (title.includes(query)) return 2;
+  return inOrder(title, query) ? 3 : null;
+}
+
+/** The first of `pages` (readPages) whose titles match `query`, best first; with no words, the first of them. */
+export function findPages(pages, query) {
+  const wanted = query.trim().toLowerCase();
+  if (!wanted) return pages.slice(0, MOST);
+  return pages.map((page) => [page, rank(page.title.toLowerCase(), wanted)]).filter(([, score]) => score !== null).sort((a, b) => a[1] - b[1]).slice(0, MOST).map(([page]) => page);
+}
+
+/**
+ * The page of `list` (readPages) that `text` is the address of, with the block it names: a page's
+ * fields and `block`, or null. On top of every form of shared/page-address.mjs, #<link or
+ * slug>[/<block id>], what a workbench's hash holds.
+ */
+export function placeIn(list, text) {
+  const place = text.startsWith("#") ? hashAddress(decoded(text.slice(1)), list.links) : addressOn(text, list.links, globalThis.location?.origin);
+  const page = place && list.pages.find(({ slug }) => slug === place.slug);
+  return page ? { ...page, block: place.block } : null;
+}
+
+/** The title of the page `text` is an address of, of `list` or of its trash, or null: what stands for a link to it where its address would be a folder's. */
+export function titleIn(list, text) {
+  const binned = addressOn(text, pageLinks(list.trash), globalThis.location?.origin)?.slug;
+  return placeIn(list, text)?.title ?? list.trash.find(({ slug }) => slug === binned)?.title ?? null;
+}
+
+/** A page's icon, as markup: by the icon route (each icon its own color), the page's line drawing for one with none. */
+export const pageIcon = ({ icon, slug }) => (icon ? `<img src="${escapeAttribute(iconUrl(icon, slug, { tab: true }))}" alt="" draggable="false">` : PAGE_ICON);
+
+/** The pages `found`, as rows of a menu (menu.mjs): each its icon, its title and in gray the page it is under; choose(page) runs for the row chosen. */
+export const pageRows = (found, choose) => found.map((page) => ({ label: page.title, hint: page.parent, long: true, icon: pageIcon(page), run: () => choose(page) }));

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

@@ -0,0 +1,369 @@
+import { Z } from "../../../shared/layers.mjs";
+import { can, isMention, mentionOf, newMention, ownHTML } from "../core.mjs";
+import { caretAt, editable, select } from "../caret.mjs";
+import { build } from "../clipboard/own/index.mjs";
+import { createMenu } from "../menu.mjs";
+import { besideText, textAnchor } from "../placement.mjs";
+import { LINK_ICON, PAGE_ICON, svg } from "../../components/icons.mjs";
+import { TYPE_INFO } from "../../components/registry.mjs";
+import { pageOfType } from "../page-objects.mjs";
+import { addStyle, element, mount } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { iconUrl } from "../../../shared/emoji/icon-value.mjs";
+import { elsewhere, fileLink, isPageAddress } from "../../../shared/page-address.mjs";
+
+// The views of a link to a web page (docs/editor.md, "Links"), Feishu's (510137 / 390669;
+// feishu-lite link-toolbar.ts, bookmark-views.ts and commands/bookmark.ts), with Notion's link
+// mention as one more:
+//   链接视图  the address as the link's text
+//   标题视图  the page's title as the link's text (a link as any other)
+//   图标视图  the site's icon and the page's title, a whole in the text (a chip, as a formula is:
+//             core.mjs newMention; shared/components/mention.mjs)
+//   书签视图  a 网页书签 block in the link's place: the text before it stays in its block, the text
+//             after it goes on in a paragraph after the bookmark, a block left empty goes
+//             (clipboard/ blocksAt)
+// The link card's view button (index.mjs) and a bookmark's block menu (显示为 ›) switch between them;
+// an address pasted alone, or given to the "/" menu's 链接, is a link of 链接视图 first, with its
+// views offered (offerViews: Feishu's, notion-lite's 粘贴为), 链接视图 highlighted: after a paste
+// 选择视图, where the format bar stands for selected text, after the "/" menu 显示为 at the link's
+// end; Esc, a press elsewhere or typing on closes it, the link staying. Our own address pasted is
+// a link to a document (标题视图, by the document's title from the list of pages, no web page being
+// read) and its 选择视图 offers that or 页面块, a whole in the text as 图标视图 is, of the same element
+// (pageChip): no 链接视图 or 书签视图, which are a web page's. The server reads the page
+// (POST /__gallery/edit/unfurl: only its title for 标题视图; its icon too, kept in the report's
+// folder, for 图标视图; everything for a bookmark), a spinner after the link meanwhile; a page that
+// cannot be read gives its host as the title (飞书: 暂不支持获取该网站的预览信息), a globe for the
+// icon. Titles are cut at 100 characters. Each switch is one undo step. connectViews() gives the
+// views what they need from the editor.
+
+const STYLE = `
+  /* Placed by left and top, so that it turns about its own middle (a translate with it would swing it round the corner of the window). */
+  .ge-link-spin { position: fixed; z-index: ${Z.spin}; width: 12px; height: 12px; box-sizing: border-box; pointer-events: none;
+    border: 1.5px solid light-dark(rgb(55 53 47 / 45%), rgb(255 255 255 / 45%)); border-right-color: transparent; border-radius: 50%; animation: ge-link-spin .7s linear infinite; }
+  @keyframes ge-link-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+`;
+
+/** The views, in Feishu's order (图标视图 after 标题视图), with their names and icons. */
+export const VIEWS = {
+  link: { label: t("链接视图"), icon: LINK_ICON },
+  title: { label: t("标题视图"), icon: svg('<path d="M3 10h2.25M8 10h9"/>') },
+  icon: { label: t("图标视图"), icon: svg('<circle cx="5.5" cy="10" r="2.5"/><path d="M10.5 10h6.5"/>') },
+  bookmark: { label: t("书签视图"), icon: TYPE_INFO.bookmark?.icon },
+};
+
+/** The rows of a link to a document, offered after a paste. */
+const PAGE_VIEWS = {
+  title: VIEWS.title,
+  chip: { label: t("页面块"), icon: PAGE_ICON },
+};
+
+const WEB = /^https?:\/\/[^\s"<>]+$/i;
+const TITLE_MAX = 100;
+
+let use = null; // { say, recordStep, struct, slug, unfurl(url, parts), assetUrl(path), blocksAt(host, range, made, kinds) }
+
+export function connectViews(editor) {
+  use = editor;
+  addStyle(STYLE);
+}
+
+export const hrefOf = (link) => link.getAttribute("href") ?? "";
+
+/** Whether a link has views: one to a web page (not a detail card's entry, not an anchor, not a document of the workspace: an address on another server may be another program's, a web page like any). */
+export const hasViews = (link) => WEB.test(hrefOf(link)) && (!isPageAddress(hrefOf(link)) || elsewhere(hrefOf(link), location.origin)) && !link.classList.contains("doc-dialog-trigger");
+
+/** Whether a link is a page block: a chip whose address is a document's, not a web page's. */
+export const isPageChip = (link) => isMention(link) && !WEB.test(hrefOf(link));
+
+/**
+ * The page block of `page` (pages.mjs placeIn): written with the title it has now and an empty icon, as
+ * its file holds it, and showing its icon by the icon route as the server draws it.
+ */
+export const pageChip = (page) => newMention(document, { href: fileLink(page, use.slug), title: page.title, drawn: page.icon ? iconUrl(page.icon, page.slug, { tab: true }) : null }, use.assetUrl);
+
+/** The view a link is in: a chip is 图标视图; a link whose text is its address 链接视图; else 标题视图. */
+export function viewOf(link) {
+  if (isMention(link)) return "icon";
+  const href = hrefOf(link);
+  const text = link.textContent.trim();
+  const plain = (value) => {
+    try {
+      return decodeURI(value);
+    } catch {
+      return value;
+    }
+  };
+  return text === href || plain(text) === plain(href) || text === href.replace(/^https?:\/\//i, "") ? "link" : "title";
+}
+
+/** The views a link can be switched to where it stands (a bookmark only from a block that splits). */
+export function viewsOf(link) {
+  const host = editable(link);
+  return Object.keys(VIEWS).filter((view) => view !== "bookmark" || (pageOfType(view)?.fromPage && host && can(host, "split")));
+}
+
+/** The host of an address (the address itself when it is none). */
+export const hostOf = (url) => {
+  try {
+    return new URL(url).hostname || url;
+  } catch {
+    return url;
+  }
+};
+
+/** A page's title for a link: its spaces as one, at most 100 characters (else its host). */
+export function linkTitle(title, href) {
+  const characters = [...String(title ?? "").replace(/\s+/g, " ").trim()];
+  if (characters.length === 0) return hostOf(href);
+  return characters.length > TITLE_MAX ? `${characters.slice(0, TITLE_MAX).join("")}…` : characters.join("");
+}
+
+// ---------- reading the page ----------
+
+// A spinner after the link while its page is read (drawn over the page, so no snapshot of the text
+// holds it), only once the reading takes a moment (no flash for a quick answer).
+function spinner(link) {
+  const node = mount(element("div", { class: "ge-link-spin", "data-doc-dev": "" }));
+  node.style.visibility = "hidden";
+  const shown = setTimeout(() => { node.style.visibility = ""; }, 200);
+  const place = () => {
+    const rect = [...link.getClientRects()].at(-1);
+    if (!rect || !link.isConnected) return void (node.style.display = "none");
+    node.style.display = "";
+    node.style.left = `${Math.round(rect.right + 4)}px`;
+    node.style.top = `${Math.round(rect.top + (rect.height - 12) / 2)}px`;
+  };
+  place();
+  addEventListener("scroll", place, { passive: true, capture: true });
+  return () => {
+    clearTimeout(shown);
+    removeEventListener("scroll", place, { capture: true });
+    node.remove();
+  };
+}
+
+// What the server read of the page (`parts`: "title", "icon" or "all"); `unread` when it gave
+// nothing (飞书: 暂不支持获取该网站的预览信息), said with the switch.
+async function read(link, href, parts) {
+  const stop = spinner(link);
+  try {
+    const page = await use.unfurl(href, parts);
+    return { ...page, unread: !page.title && !page.icon };
+  } catch {
+    return { title: "", description: "", icon: null, cover: null, unread: true };
+  } finally {
+    stop();
+  }
+}
+const UNREAD = t("暂不支持获取该网站的预览信息");
+
+// ---------- switching ----------
+
+// `next` (made by `make`, or the link itself changed) in the link's place: one undo step. The
+// caret, when it was in the link, goes after it. No space goes beside it (a link shown with its
+// icon stands as the text put it).
+function replace(host, link, make, message) {
+  const before = ownHTML(host);
+  const next = make();
+  if (next !== link) link.replaceWith(next);
+  const selection = getSelection();
+  if (selection.rangeCount && !selection.getRangeAt(0).startContainer.isConnected) {
+    const after = document.createRange();
+    after.setStartAfter(next);
+    after.collapse(true);
+    select(after);
+  }
+  use.recordStep(host, before);
+  use.say(t("{0} · Ctrl+Z 撤销", message));
+  return next;
+}
+
+// A plain link to `href` showing `text`.
+function textLink(href, text) {
+  const link = document.createElement("a");
+  link.setAttribute("href", href);
+  link.textContent = text;
+  return link;
+}
+
+// A plain link of `text`: the link itself when it is one (its text changed), else a new one.
+const plainLink = (link, href, text) => () => {
+  if (isMention(link)) return textLink(href, text);
+  link.replaceChildren(text);
+  return link;
+};
+
+/**
+ * Show `link` (a link of the text, or a chip) as `view`. Reads the page where the view wants what
+ * is not known yet; nothing happens when the link has changed meanwhile.
+ */
+export async function switchView(link, view) {
+  const host = editable(link);
+  if (!host || !link.isConnected || !hasViews(link)) return;
+  const from = viewOf(link);
+  if (view === from) return;
+  const href = hrefOf(link);
+  if (view === "link") return replace(host, link, plainLink(link, href, href), t("已转为链接视图"));
+  // A chip's own title, when only that is wanted.
+  let page = view === "title" && from === "icon" ? { title: mentionOf(link).title, unread: false } : null;
+  if (!page) {
+    page = await read(link, href, view === "bookmark" ? "all" : view === "icon" ? "icon" : "title");
+    if (!link.isConnected || hrefOf(link) !== href || editable(link) !== host) return;
+  }
+  const title = linkTitle(page.title, href);
+  const said = (done) => (page.unread ? t("{0}，{1}", UNREAD, done) : done);
+  if (view === "title") return replace(host, link, plainLink(link, href, title), said(page.unread ? t("标题用了网址的域名") : t("已转为标题视图")));
+  if (view === "icon") return replace(host, link, () => newMention(document, { href, title, icon: page.icon ?? null }, use.assetUrl), said(page.unread ? t("用了网址的域名") : t("已转为图标视图")));
+  const figure = pageOfType(view).fromPage({ url: href, title: page.title ?? "", description: page.description ?? "", icon: page.icon ?? null, cover: page.cover ?? null });
+  const range = document.createRange();
+  range.selectNode(link);
+  if (use.blocksAt(host, range, [figure], ["bookmark"])) use.say(t("{0} · Ctrl+Z 撤销", said(t("已转为网页书签"))), page.unread ? "note" : undefined);
+}
+
+/**
+ * A link shown with its icon given another address (its card's field): the web page read again, shown
+ * so. A document's (`listed`: the page) is a page block; any other address that is no web page's has
+ * no icon to read and stays a link of the chip's title.
+ */
+export async function refetch(chip, href, listed = null) {
+  const host = editable(chip);
+  if (!host) return;
+  if (listed) return replace(host, chip, () => pageChip(listed), t("链接：{0}", listed.title));
+  if (!WEB.test(href)) return replace(host, chip, () => textLink(href, mentionOf(chip).title), t("链接：{0}", href));
+  const page = await read(chip, href, "icon");
+  if (!chip.isConnected || editable(chip) !== host) return;
+  replace(host, chip, () => newMention(document, { href, title: linkTitle(page.title, href), icon: page.icon ?? null }, use.assetUrl), page.unread ? t("{0}，用了网址的域名", UNREAD) : t("链接：{0}", href));
+}
+
+/**
+ * A bookmark's 显示为 › (its block menu, Feishu's 卡片视图 ▾): its link in the text again, in a
+ * paragraph in its place (feishu-lite bookmarkToText), the caret at its end; one undo step.
+ */
+export function bookmarkItems(figure, { href, title, icon }) {
+  return Object.entries(VIEWS).map(([view, { label, icon: drawn }]) => ({
+    label, icon: drawn, current: view === "bookmark",
+    run: () => {
+      if (view === "bookmark" || !figure.isConnected || !WEB.test(href)) return;
+      const text = linkTitle(title, href);
+      const link = view === "icon" ? newMention(document, { href, title: text, icon }, use.assetUrl) : textLink(href, view === "link" ? href : text);
+      const paragraph = build(document, { type: "paragraph", html: "" });
+      paragraph.append(link);
+      const done = use.struct([figure.parentElement], [], () => {
+        figure.replaceWith(paragraph);
+        return { touched: [paragraph], focus: paragraph, created: [] };
+      });
+      if (!done) return;
+      caretAt(paragraph, "end");
+      use.say(t("已转为{0} · Ctrl+Z 撤销", label));
+    },
+  }));
+}
+
+// ---------- the menus ----------
+
+// One menu for both, made when first needed (the module loads where there is no page too).
+let card = null;
+const menu = () => (card ??= createMenu());
+let offer = null; // { link, keys, press, typed, moved }: a link's views, offered
+
+/** The views of `link` as menu items (the card's view button), the current one checked; `done()` runs first. */
+export function viewItems(link, done = () => {}) {
+  const current = viewOf(link);
+  return viewsOf(link).map((view) => ({
+    label: VIEWS[view].label, icon: VIEWS[view].icon, current: view === current,
+    run: () => {
+      done();
+      switchView(link, view);
+    },
+  }));
+}
+
+// The keys of a views menu: ↑/↓ and Enter in it (Enter with no row highlighted goes on), Esc closes
+// it (`close`); any other key closes it and goes on. On the window, so that they come before the
+// editor's own (on the document).
+const menuKeys = (close) => (event) => {
+  if (event.isComposing) return;
+  if (!menu().arrow(event)) {
+    if (event.key === "Escape") close();
+    else if (event.key !== "Enter" || !menu().choose()) {
+      if (!["Shift", "Control", "Alt", "Meta"].includes(event.key)) close();
+      return;
+    }
+  }
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+/** The views menu below `rect` (the card's view button); `done()` before a pick, `onClose()` when it goes. */
+export function openViews(link, rect, done, onClose = () => {}) {
+  closeOffer();
+  const keys = menuKeys(() => card?.close());
+  menu().open(viewItems(link, done), rect, {
+    label: t("显示为"), width: 168, highlight: false,
+    onClose: () => {
+      removeEventListener("keydown", keys, true);
+      onClose();
+    },
+  });
+  addEventListener("keydown", keys, true);
+}
+
+export const closeViews = () => card?.close();
+
+/**
+ * The views of a link just made of an address alone: `pasted`, 选择视图 where the format bar would
+ * stand if its words were selected; else (the "/" menu's 链接) 显示为 at its end. `page`: a link to
+ * that document (pages.mjs placeIn), whose views are PAGE_VIEWS.
+ */
+export function offerViews(link, { pasted = false, page = null } = {}) {
+  if (!link.isConnected || !(page || hasViews(link))) return;
+  closeOffer();
+  const end = () => {
+    const rect = [...link.getClientRects()].at(-1);
+    return rect && { left: rect.right, right: rect.right, top: rect.top, bottom: rect.bottom };
+  };
+  const rect = end();
+  if (!rect) return;
+  const label = pasted ? t("选择视图") : t("显示为");
+  const words = document.createRange();
+  words.selectNodeContents(link);
+  const items = [{ title: label }, ...(page ? Object.keys(PAGE_VIEWS) : viewsOf(link)).map((view) => ({
+    label: (page ? PAGE_VIEWS : VIEWS)[view].label, icon: (page ? PAGE_VIEWS : VIEWS)[view].icon,
+    run: () => {
+      closeOffer();
+      if (view === "chip") replace(editable(link), link, () => pageChip(page), t("已转为页面块"));
+      else if (!page && view !== "link") switchView(link, view);
+    },
+  }))];
+  menu().open(items, rect, { label, width: 200, stand: pasted ? (size) => besideText(textAnchor(words), size) : null, onClose: () => closeOffer() });
+  const keys = menuKeys(closeOffer);
+  const press = (event) => {
+    if (!menu().contains(event.target)) closeOffer();
+  };
+  // Text typed (an input method's too, which may send no key first) closes it.
+  const typed = () => closeOffer();
+  // It goes with its link as the page moves, as the format bar goes with its text.
+  const moved = () => menu().follow(end());
+  addEventListener("keydown", keys, true);
+  addEventListener("pointerdown", press, true);
+  addEventListener("beforeinput", typed, true);
+  addEventListener("scroll", moved, { passive: true, capture: true });
+  addEventListener("resize", moved);
+  offer = { link, keys, press, typed, moved };
+}
+
+export function closeOffer() {
+  if (!offer) return;
+  const { keys, press, typed, moved } = offer;
+  offer = null;
+  removeEventListener("keydown", keys, true);
+  removeEventListener("pointerdown", press, true);
+  removeEventListener("beforeinput", typed, true);
+  removeEventListener("scroll", moved, { capture: true });
+  removeEventListener("resize", moved);
+  card?.close();
+}
+
+/** Whether a node is in a views menu; the nodes to keep in the top layer when a dialog opens. */
+export const viewsHold = (target) => Boolean(card?.contains(target));
+export const viewNodes = () => card?.nodes ?? [];

package/browser/editor/page/look.mjs

@@ -0,0 +1,65 @@
+// What every popup of the editor is painted with, written once: Notion's neutral palette, its blue
+// and its two shadows, light and dark by light-dark() (the page's color-scheme decides). A sheet of
+// `:root` custom properties, put in every document the editor draws in (ui.mjs addStyleTo), so a
+// menu, a card, a bar, a notice reads them wherever it stands and none declares a palette of its
+// own. Values are Notion's own as notion-lite carries them (view/theme/notion-vars.css), which this
+// editor follows; the page's content colors (--doc-*, the kit's tokens.css) are another matter.
+//
+// The blue is two tokens because notion-lite has two, for two jobs: --ge-accent (its
+// --c-bluBacAccPri: a primary button, a switch, a chosen icon) and --ge-focus (its --c-butBluFocRin
+// and --c-inpBluFocRin: the ring round a focused field).
+//
+// Two shadows, because Notion has two surfaces: --ge-shadow, a card standing over the text (the
+// format bar, the formula and link cards, the conflicts, a notice), and --ge-shadow-pop, a menu
+// (Notion's large outer shadow). The emoji picker (emoji-picker/support.mjs) carries notion-lite's
+// own --c-* variables, taken over as they are.
+
+export const TOKENS = `
+  :root {
+    --ge-tx: light-dark(#2c2c2b, #f0efed);
+    --ge-tx2: light-dark(#7d7a75, #ada9a3);
+    --ge-tx3: light-dark(#a19e99, #7d7a75);
+    --ge-ico: light-dark(#383836, #e6e5e3);
+    --ge-ico2: light-dark(#8e8b86, #ada9a3);
+    /* The quietest icon gray (notion-lite's --c-icoTer): the block handle's dots, its bar and its +. */
+    --ge-ico3: light-dark(#ada9a3, #7d7a75);
+    --ge-bg: light-dark(#ffffff, #252525);
+    --ge-field: light-dark(rgb(66 35 3 / 3%), rgb(252 252 252 / 3%));
+    --ge-hover: light-dark(rgb(33 27 23 / 5%), rgb(255 255 255 / 5.5%));
+    --ge-press: light-dark(rgb(33 27 23 / 10%), rgb(255 255 255 / 11%));
+    --ge-line: light-dark(rgb(42 28 0 / 7%), rgb(255 255 243 / 8.2%));
+    --ge-edge: light-dark(rgb(28 19 1 / 11%), rgb(255 255 235 / 10%));
+    --ge-outline: light-dark(rgb(42 28 0 / 7%), #383836);
+    --ge-line-strong: light-dark(rgb(42 28 0 / 14%), rgb(255 255 243 / 14%));
+    --ge-accent: #2783de;
+    --ge-accent-hover: #3d93e8;
+    --ge-accent-press: #55a2ec;
+    --ge-accent-text: light-dark(#2783de, #5e9fe8);
+    --ge-focus: #2383e2;
+    --ge-red: light-dark(#eb5757, #ff6b6b);
+    --ge-quote: light-dark(rgb(28 19 1 / 16%), rgb(255 255 235 / 16%));
+    --ge-fill: light-dark(rgb(35 131 226 / 14%), rgb(35 131 226 / 28%));
+    --ge-halo: rgb(35 131 226 / 14%);
+    --ge-select: light-dark(rgb(35 131 226 / 28%), rgb(35 131 226 / 45%));
+    /* The same blue as a strip blended over the page (text-select/: multiplied on a light page, screened on a dark one), so the text under it keeps its color. */
+    --ge-select-strip: light-dark(rgb(193 220 247), rgb(5 53 100));
+    --ge-shadow: 0 20px 24px 0 light-dark(rgb(25 25 25 / 5%), transparent), 0 5px 8px 0 light-dark(rgb(25 25 25 / 2.7%), transparent), 0 0 0 1px var(--ge-outline),
+      0 14px 28px -6px light-dark(transparent, rgb(25 25 25 / 20%)), 0 2px 4px -1px light-dark(transparent, rgb(25 25 25 / 11.8%));
+    --ge-shadow-pop: 0 20px 24px 0 light-dark(rgb(25 25 25 / 5%), rgb(25 25 25 / 20%)), 0 5px 8px 0 light-dark(rgb(25 25 25 / 2.7%), rgb(25 25 25 / 10.8%)), 0 0 0 1px var(--ge-outline);
+    --ge-tip-bg: #2c2c2b;
+    --ge-tip-tx: #f0efed;
+    --ge-tip-tx2: #ada9a3;
+    --ge-tip-shadow: 0 4px 12px -2px rgb(0 0 0 / 8%), inset 0 0 0 1px rgb(255 255 255 / 5%);
+    --ge-toast-bg: light-dark(#0f0f0f, #2f2f2f);
+    /* The quiet gray a heading is lit with for a moment when the outline goes to it (outline/), never a blue. */
+    --ge-outline-flash: light-dark(rgb(33 27 23 / 7%), rgb(255 255 255 / 8%));
+    /* 批注 (annotate/): a warm mark on the words an annotation is about, its 2px underline leading (a faint fill, so it is never
+       taken for the report's own yellow background), a block anchor's bar; stronger for the one shown. */
+    --ge-note: light-dark(rgb(255 212 0 / 6%), rgb(255 212 0 / 6%));
+    --ge-note-line: light-dark(rgb(232 174 0 / 55%), rgb(255 204 64 / 42%));
+    --ge-note-hot: light-dark(rgb(255 212 0 / 34%), rgb(255 212 0 / 24%));
+    --ge-note-hot-line: light-dark(rgb(222 160 0 / 90%), rgb(255 204 64 / 80%));
+    /* A card of 批注 in the margin under the pointer (notion-lite's --c-hovMarDisBac): a shade of the page. */
+    --ge-note-shade: light-dark(#f9f9f8, #202020);
+  }
+`;

package/browser/editor/page/made.mjs

@@ -0,0 +1,24 @@
+// What a structural change on the page made: the containers it created, whose child lists undo
+// records too (editor.mjs `struct`), and the text block that holds the text now (the focus).
+// Conversions (convert.mjs) and the components' own changes (a new section, an indented list item,
+// a paragraph leaving a panel) collect them here and return done(focus): { focus, created }.
+
+let created = [];
+
+/** A change begins: nothing made yet. */
+export const begin = () => {
+  created = [];
+};
+
+/** A container the change made. */
+export const made = (node) => {
+  created.push(node);
+  return node;
+};
+
+/** The change is done: { focus, created }. */
+export const done = (focus) => {
+  const result = { focus, created };
+  created = [];
+  return result;
+};