@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/shared/emoji/glyphs.mjs

@@ -0,0 +1,134 @@
+import { GLYPH_SETS, ICON_COLORS, ICON_COLOR_VALUES, glyphOf, glyphValue } from "./icon-value.mjs";
+import { KEYS } from "../renamed-storage.mjs";
+
+/* The 图标 tab's icons (glyphs): two open-source sets of filled icons, MingCute Core Filled
+ * (Apache-2.0) and Tabler Filled (MIT), as the 443 pairs of icons both have for one thing, and
+ * Tabler's 40 numbers (0–9 in four shapes), which MingCute has no series of (data/icons.json, made
+ * by src/cli/import-icons.mjs), each in one of 12 categories. The tab shows one set (MingCute unless
+ * the reader switched to Tabler: kept in this browser), each pair in the same place in either, so
+ * the switch compares them in place; an icon only one set has (a number) is that set's in either.
+ * Shared by the page editor (the icon picker, the page's icon) and the workbench;
+ * src/render/emoji.mjs reads the same data for the preview and an export.
+ *   A glyph's value: `/icons/<name>_<color>.svg` (MingCute's) or `/icons/tabler/<name>_<color>.svg`
+ *   (icon-value.mjs glyphOf, glyphValue): a number is always Tabler's.
+ *   Colors (Notion's ten, the icon picker's: icon_picker_color): set once, an icon goes in in it; not
+ *   set ("每次询问"), a click on an icon asks for one first. Recent: at most 2 × 12 icons, by pair.
+ *   Search: an icon's Chinese name, both sets' names (and each name's words, split at "-") and its
+ *   search words (the list's, English; the numbers' Chinese too; a name it had before), best first:
+ *   the Chinese name equal (100) > it begins with the filter (80) > a set's name or a word of it
+ *   equal (50) > the Chinese name holds it (40) > a set's name or word begins with it (30) > a search
+ *   word equal (20) > one begins with it (10) > one holds it (5, Chinese filters alone: an English
+ *   word inside another, "art" in "start", is no match); among equals, the tab's order.
+ *   Random: any icon of the tab, in the set shown (a number: Tabler's), in the color set (or any one).
+ * The data is fetched (the page editor's modules are served unbundled); the settings, the recent
+ * pairs and the set shown are this browser's (localStorage). */
+
+/* iconPickerColorPicker.color.* */
+export const ICON_COLOR_NAMES = { gray: '默认', lightgray: '浅灰色', brown: '棕色', yellow: '黄色', orange: '橙色', green: '绿色', blue: '蓝色', purple: '紫色', pink: '粉色', red: '红色' };
+/* The color button's and swatches' values (an icon's fill too), by theme: from icon-value.mjs's one table. */
+export const ICON_COLOR_BY_THEME = {
+  light: Object.fromEntries(ICON_COLORS.map(color => [color, ICON_COLOR_VALUES[color][0]])),
+  dark: Object.fromEntries(ICON_COLORS.map(color => [color, ICON_COLOR_VALUES[color][1]])),
+};
+/** The sets' names as the tab shows them. */
+export const GLYPH_SET_NAMES = { mingcute: 'MingCute', tabler: 'Tabler' };
+const COLOR_KEY = KEYS.iconColor, RECENT_KEY = KEYS.recentGlyphs, SET_KEY = KEYS.glyphSet;
+
+// An icon of the tab (a pair, or a number only Tabler has): { key (its MingCute name; one of
+// Tabler's alone `tabler/<name>`), label (its Chinese name), names: { mingcute, tabler } and svg
+// (each undefined for a set that has it not), category (its name, Chinese), words (its search words) }.
+const state = { loaded: false, pairs: [], categories: [], byKey: new Map(), byName: new Map() };
+let loading = null;
+
+export function loadGlyphs() {
+  loading ??= fetch(new URL('./data/icons.json', import.meta.url).href).then(response => {
+    if (!response.ok) throw new Error(`icons.json: ${response.status}`);
+    return response.json();
+  }).then(data => {
+    state.categories = data.categories;
+    for (const [label, mingcute, tabler, mingcuteSvg, tablerSvg, category, words] of data.icons) {
+      const pair = {
+        key: mingcute ?? `tabler/${tabler}`, label, names: { mingcute: mingcute ?? undefined, tabler }, svg: { mingcute: mingcuteSvg ?? undefined, tabler: tablerSvg },
+        category: data.categories[category], words: (words ?? []).flatMap(word => [word, ...(/\s/.test(word) ? word.split(/\s+/) : [])]),
+      };
+      state.pairs.push(pair);
+      state.byKey.set(pair.key, pair);
+      for (const set of GLYPH_SETS) if (pair.names[set]) state.byName.set(`${set}/${pair.names[set]}`, pair);
+    }
+    state.loaded = true;
+  });
+  return loading;
+}
+export const glyphsLoaded = () => state.loaded;
+/** Every icon of the tab, in its order: by category, each's pairs, then its icons of one set alone. */
+export const allPairs = () => state.pairs;
+/** The categories' names (Chinese), in the tab's order. */
+export const glyphCategories = () => state.categories;
+export const pairOf = key => state.byKey.get(key);
+/** The set `pair` is drawn in when the tab shows `set`: that one, or the one set it has (a number: Tabler). */
+export const glyphSetOf = (pair, set) => (pair.svg[set] ? set : GLYPH_SETS.find(each => pair.svg[each]));
+/** The one set `pair` is of when only one has it (a number: "tabler"), else null (a pair). */
+export const onlySetOf = pair => { const sets = GLYPH_SETS.filter(set => pair.svg[set]); return sets.length === 1 ? sets[0] : null; };
+/** The value of `pair`'s icon of `set` (or of the one set it has) in `color`. */
+export const pairValue = (pair, set, color) => { const shown = glyphSetOf(pair, set); return glyphValue(shown, pair.names[shown], color); };
+/** The pair a glyph's value is of, or undefined (none, or the data not loaded yet). */
+export function pairOfValue(value) {
+  const glyph = glyphOf(value);
+  return glyph ? state.byName.get(`${glyph.set}/${glyph.name}`) : undefined;
+}
+export const isGlyph = value => glyphOf(value) !== null;
+
+/** A pair's icon of `set` (or of the one set it has) drawn in `color` for theme `mode` ("light", "dark"), its SVG text. */
+export const glyphSVG = (pair, set, color, mode) => pair.svg[glyphSetOf(pair, set)].split('#COLOR').join(ICON_COLOR_BY_THEME[mode][color] ?? ICON_COLOR_BY_THEME[mode].gray);
+/** A glyph's SVG text drawn in the color of where it stands (currentColor), or null. */
+export function glyphSVGOf(value) {
+  const glyph = glyphOf(value), pair = pairOfValue(value);
+  return pair ? pair.svg[glyph.set].split('#COLOR').join('currentColor') : null;
+}
+
+/* Search: the icons' keys, best first (the scores above; a stable sort keeps the tab's order among equals). */
+export function searchGlyphs(filter) {
+  const q = filter.trim().toLowerCase();
+  if (!q) return [];
+  const chinese = /[^\x00-\x7f]/.test(q);
+  const hits = [];
+  for (const pair of state.pairs) {
+    const label = pair.label.toLowerCase();
+    const names = [...new Set(GLYPH_SETS.flatMap(set => pair.names[set] ? [pair.names[set], ...pair.names[set].split('-')] : []))];
+    const score = label === q ? 100 : label.startsWith(q) ? 80 : names.includes(q) ? 50 : label.includes(q) ? 40
+      : names.some(w => w.startsWith(q)) ? 30 : pair.words.includes(q) ? 20 : pair.words.some(w => w.startsWith(q)) ? 10
+      : chinese && pair.words.some(w => w.includes(q)) ? 5 : 0;
+    if (score) hits.push([score, pair.key]);
+  }
+  return hits.sort((a, b) => b[0] - a[0]).map(h => h[1]);
+}
+
+/* ---------- settings, the recent pairs and the set shown ---------- */
+const read = key => { try { return localStorage.getItem(key); } catch { return null; } };
+const write = (key, value) => { try { if (value === null) localStorage.removeItem(key); else localStorage.setItem(key, value); } catch { /* for this session only */ } };
+
+let iconColor = read(COLOR_KEY) ?? undefined;
+export const getIconColor = () => iconColor;
+/* undefined = 每次询问 */
+export function setIconColor(color) {
+  iconColor = color;
+  write(COLOR_KEY, color === undefined ? null : color);
+}
+
+let set = GLYPH_SETS.includes(read(SET_KEY)) ? read(SET_KEY) : GLYPH_SETS[0];
+/** The set the tab shows: "mingcute" (the default) or "tabler". */
+export const getGlyphSet = () => set;
+export function setGlyphSet(next) {
+  set = GLYPH_SETS.includes(next) ? next : GLYPH_SETS[0];
+  write(SET_KEY, set === GLYPH_SETS[0] ? null : set);
+}
+
+let recent = (() => { try { return JSON.parse(read(RECENT_KEY) || '[]'); } catch { return []; } })();
+export const recentGlyphs = () => recent;
+export function recordGlyphUse(key, max) {
+  recent = [key, ...recent.filter(k => k !== key)].slice(0, max); // first, once
+  write(RECENT_KEY, JSON.stringify(recent));
+}
+
+const pickOne = list => list[Math.floor(Math.random() * list.length)];
+export const randomGlyph = () => pairValue(pickOne(state.pairs), set, iconColor ?? pickOne(ICON_COLORS));

package/browser/shared/emoji/icon-value.mjs

@@ -0,0 +1,91 @@
+import { iconImageFile } from "../media.mjs";
+
+// A page's icon (the kit's "icon" component): what its value may be, its markup in a report and
+// the value of that markup again. Shared by the editor (components/icon/, source/apply.mjs), the
+// render (an export's and the preview's images: src/render/emoji.mjs) and the workbench.
+//
+// Its value, as report.json has it, and its markup in the file:
+//   an emoji                          <div class="doc-icon">🎯</div>
+//   an icon of the 图标 tab, in a color <div class="doc-icon" data-icon="/icons/airplane_blue.svg"></div>
+//   an image of the report's folder   <div class="doc-icon"><img src="assets/icon-1a2b3c4d.png" alt=""></div>
+// The 图标 tab's icons (a glyph: glyphs.mjs) are two open-source sets of the same 443 things,
+// MingCute (the default: /icons/<name>_<color>.svg) and Tabler (/icons/tabler/<name>_<color>.svg),
+// and Tabler's numbers (/icons/tabler/circle-number-3_<color>.svg: MingCute has none).
+
+export const ICON = "doc-icon";
+
+const KEYCAP = String.fromCodePoint(0x20e3);
+/**
+ * The ten icon colors (Notion's), each's value light and dark: the one table (glyphs.mjs, the icon picker's
+ * swatches, the browser tab's icon and the glyphs' drawing read it; styles/page.css of the kit and the
+ * workbench's base.css write the same values as CSS, which tests/unit/icons.mjs holds to it).
+ */
+export const ICON_COLOR_VALUES = {
+  gray: ["#55534E", "#D3D3D3"], lightgray: ["#A6A299", "#7F7F7F"], brown: ["#9F6B53", "#AA755F"], yellow: ["#CB912F", "#CA8E1B"], orange: ["#D9730D", "#D87620"],
+  green: ["#448361", "#2D9964"], blue: ["#337EA9", "#2E7CD1"], purple: ["#9065B0", "#8D5BC1"], pink: ["#C14C8A", "#C94079"], red: ["#D44C47", "#CD4945"],
+};
+/** The icon colors, in the picker's order. */
+export const ICON_COLORS = Object.keys(ICON_COLOR_VALUES);
+/** The 图标 tab's two sets, the default first. */
+export const GLYPH_SETS = ["mingcute", "tabler"];
+const GLYPH = new RegExp(`^/icons/(?:(tabler)/)?([a-z0-9-]+)_(${ICON_COLORS.join("|")})\\.svg$`);
+
+/** A glyph's value: { set, name, color }, or null (no glyph's). */
+export function glyphOf(value) {
+  const found = typeof value === "string" ? value.match(GLYPH) : null;
+  return found ? { set: found[1] ?? GLYPH_SETS[0], name: found[2], color: found[3] } : null;
+}
+/** The value of icon `name` of set `set` in `color`. */
+export const glyphValue = (set, name, color) => `/icons/${set === GLYPH_SETS[0] ? "" : `${set}/`}${name}_${color}.svg`;
+
+/** What kind of icon a value is: "emoji", "glyph" (an icon of the 图标 tab), "image", or null (none a page may have). */
+export function iconKind(value) {
+  if (typeof value !== "string" || value.length === 0 || value.length > 120) return null;
+  if (GLYPH.test(value)) return "glyph";
+  if (iconImageFile(value)) return "image";
+  // An emoji: pictographs, a flag or a keycap, no letters, nothing that is markup.
+  return value.length <= 32 && !/[\s<>&"'A-Za-z]/.test(value) && (/\p{Extended_Pictographic}|\p{Regional_Indicator}/u.test(value) || value.includes(KEYCAP)) ? "emoji" : null;
+}
+export const validIcon = (value) => iconKind(value) !== null;
+
+/** The custom property a Sheet tab's emoji is drawn through (the kit's sheets.css), and its value for the image at `url`: the server's (render/emoji.mjs) and the editor's (components/sheets/pills.mjs). */
+export const TAB_ICON = "--doc-tab-icon";
+export const tabIconValue = (url) => `url('${url}')`;
+
+/** The icon's element as the file has it (`id`: its block id attribute, or ""). */
+export function iconMarkup(value, id = "") {
+  const kind = iconKind(value);
+  if (kind === "glyph") return `<div class="${ICON}" data-icon="${value}"${id}></div>`;
+  if (kind === "image") return `<div class="${ICON}"${id}><img src="${value}" alt=""></div>`;
+  return `<div class="${ICON}"${id}>${value}</div>`; // checked: an emoji holds no markup
+}
+
+/**
+ * An icon as one image the preview server serves (GET /__gallery/edit/icon): the workbench's tree and
+ * menus; with `tab`, the browser tab's (a glyph in its own color, light or dark as the system).
+ * `slug`: the report whose folder holds an image.
+ * @param {string} value
+ * @param {string | null} [slug]
+ * @param {{ tab?: boolean }} [options]
+ */
+export const iconUrl = (value, slug = null, { tab = false } = {}) => `/__gallery/edit/icon?${new URLSearchParams({ value, ...(slug ? { slug } : {}), ...(tab ? { tab: "1" } : {}) })}`;
+
+const [TAB_LIGHT, TAB_DARK] = ICON_COLOR_VALUES.gray;
+/**
+ * The browser tab's image of a page with no icon (the workbench's and the preview page's): the page
+ * the workbench's tree shows for one (its "page" icon, components/icons.ts: Lucide's file-text,
+ * FinHarness's 文档), its box cropped to `1 1 22 22` so it fills the tab as an emoji does, in the tab
+ * glyphs' gray, light or dark as the system is. An image, never none: a tab given no image, or one that does not
+ * load, keeps the one it showed (Chrome), so a page with no icon opened after one with one showed that one's.
+ */
+export const DEFAULT_TAB_ICON = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 22 22" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><style>svg{color:${TAB_LIGHT}}@media (prefers-color-scheme:dark){svg{color:${TAB_DARK}}}</style><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>`)}`;
+
+/** The value of an icon's element as the file (or a page) has it, or null. */
+export function iconValueOf(html) {
+  const glyph = html.match(/\bdata-icon="([^"]*)"/)?.[1];
+  if (glyph && iconKind(glyph) === "glyph") return glyph;
+  const image = html.match(/<img\b[^>]*\bsrc="([^"]*)"/)?.[1];
+  if (image && iconKind(image) === "image") return image;
+  const text = html.replace(/<[^>]*>/g, "").trim();
+  return iconKind(text) === "emoji" ? text : null;
+}

package/browser/shared/escape.mjs

@@ -0,0 +1,20 @@
+// The one place a string is made safe to stand in markup, for the page, the server and the render
+// side alike. A writer picks the set of characters its markup needs and has always written:
+//   escapeText       & < >   text in an element
+//   escapeAttribute  & "     a value in double quotes
+//   escapeMarkup     & < > "  a string that lands in text or in an attribute
+//   escapeTyped      & <     what a reader typed into a block: a bare > is as valid, and the file
+//                            keeps the one an author wrote
+const ENTITIES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" };
+const replacing = (characters) => {
+  const pattern = new RegExp(`[${characters}]`, "g");
+  return (text) => text.replace(pattern, (character) => ENTITIES[character]);
+};
+
+export const escapeText = replacing("&<>");
+export const escapeAttribute = replacing('&"');
+export const escapeMarkup = replacing('&<>"');
+export const escapeTyped = replacing("&<");
+
+/** The text an escaped string reads as: what the page reads back from a source it holds. */
+export const unescapeText = (text) => text.replace(/&(lt|gt|quot|#39|#93|#36|amp);/g, (_, name) => ({ lt: "<", gt: ">", quot: '"', "#39": "'", "#93": "]", "#36": "$", amp: "&" })[name]);

package/browser/shared/export-wrap.mjs

@@ -0,0 +1,89 @@
+// What an export of a report wraps its parts in, written once for the two things that make an
+// export: the CLI's (src/render/pipeline.mjs) and the reader's 导出当前视图副本 (src/render/kit/ui.js,
+// which the kit's build bundles with this file), so that one export cannot allow what the other forbids.
+
+/** The policy of an export: nothing reaches the network but an embed block's page (online). */
+export const EXPORT_CSP = [
+  "default-src 'none'",
+  "script-src 'unsafe-inline'",
+  "style-src 'unsafe-inline'",
+  "img-src data: blob:",
+  "font-src data:",
+  "media-src data: blob:",
+  "frame-src https: data: blob:", // an embed block's page (online), or its file
+  "connect-src 'none'",
+  "object-src 'none'",
+  "base-uri 'none'",
+  "form-action 'none'",
+].join("; ");
+
+// Some desktop HTML viewers expose CommonJS globals inside local documents. UMD bundles such as D3
+// otherwise write into `exports` and leave `globalThis.d3` undefined, so report shells render but
+// their charts stay empty. Shadow those globals only while the bundle initializes and force its
+// normal browser-global branch.
+/** A UMD bundle's source, run with the CommonJS globals shadowed. */
+export const isolateUmd = (source) => `(function (exports, module, define) {\n${source}\n}).call(globalThis, undefined, undefined, undefined);`;
+
+/** A component package's stylesheet as the text of a <style>: nothing in it ends the element. A style reads the escape as the slash it stands for. */
+export const styleText = (css) => css.replace(/<\/style/gi, "<\\/style");
+
+/**
+ * A component package's kit.js as a page runs it, the route's copy and an export's alike: in a function
+ * of its own, so that what it declares is its own and two packages on a page never meet. A classic
+ * script all the same, `this` the global object, its lines the file's lines.
+ */
+export const packageScript = (code) => `(function () {${code}\n}).call(globalThis);`;
+
+/**
+ * A component package's script as the text of a <script>, whatever it holds. An author's text may say
+ * </script>, which would end the element, and <!-- and <script, after which the parser takes the next
+ * end tag for a part of it, and no rewriting of a script's text keeps its sense in a string, a regular
+ * expression, a comment and code alike. So its text stays a string, where < can be escaped, and goes
+ * in as a script of its own, run where it stands; the policy allows that as any inline script.
+ */
+export const scriptText = (code) => `(function () {
+  var script = document.createElement("script");
+  script.textContent = ${JSON.stringify(code).replace(/</g, "\\u003c")};
+  document.currentScript.after(script);
+  script.remove();
+})();`;
+
+// Which report.html an export was made from: the sha256 of the file's bytes as the export read them,
+// in a meta of its own right after the export's policy (pipeline.mjs withExportPolicy), which
+// gallery qa compares with the file as it is now (src/cli/qa.mjs, so that a file restored or
+// copied is judged by its text, never by when it was written) and an import of the export takes out
+// again (src/transfer/own-report.mjs). Never in report.html itself. Named as the view copy's
+// doc-export-id is (ui.js).
+export const SOURCE_META = "doc-export-source";
+
+// Which component packages an export holds, each by its stamp, in a meta of its own right after that
+// one, none for a page of no package: an export is as old as what it holds of them, which a
+// document's text does not say, and gallery qa compares these with what the workspace holds now.
+export const PACKAGES_META = "doc-export-packages";
+/** How `packages` (their ids and stamps, any order) are said, in that meta and by gallery qa: "" for none. */
+export const packagesSaid = (packages) => packages.map(({ id, stamp }) => `${id}@${stamp}`).sort().join(" ");
+/** The meta saying an export holds `packages`. */
+export const packagesMeta = (packages) => `<meta name="${PACKAGES_META}" content="${packagesSaid(packages)}">`;
+
+// Who made an export: <meta name="generator" content="Gallery">, the first of its head (pipeline.mjs
+// withExportPolicy). An export made before the product's rename (2026-10-26) says "HTML Report Studio":
+// every reader takes either (exportSourceOf below, an import's undoExport in src/transfer/own-report.mjs,
+// the kit's runtime/kernel.js, which writes the two out as a classic script), and no export is rewritten.
+export const GENERATOR = "Gallery";
+/** The generators an export may name: the new one first, then the one exports made before said. */
+export const GENERATORS = [GENERATOR, "HTML Report Studio"];
+
+/** The meta saying an export was made from a report.html whose bytes' sha256 is `hash`. */
+export const sourceMeta = (hash) => `<meta name="${SOURCE_META}" content="sha256:${hash}">`;
+
+// An export's own metas, where it writes them, right after its generator and its policy at the start of its head.
+const OWN_METAS = new RegExp(`<head\\b[^>]*>\\s*<meta name="generator" content="(?:${GENERATORS.join("|")})">\\s*<meta http-equiv="Content-Security-Policy" content="[^"]*">\\s*<meta name="${SOURCE_META}" content="sha256:([0-9a-f]{64})">(?:\\s*<meta name="${PACKAGES_META}" content="([^"]*)">)?`, "i");
+
+/** The sha256 an export (`html`, its text) says it was made from: its sourceMeta; null when it says none. */
+export function exportSourceOf(html) {
+  const found = OWN_METAS.exec(html);
+  return found ? found[1].toLowerCase() : null;
+}
+
+/** The packages an export (`html`, its text) says it holds, as packagesSaid says them; "" when it says none. */
+export const exportPackagesOf = (html) => OWN_METAS.exec(html)?.[2] ?? "";

package/browser/shared/files.mjs

@@ -0,0 +1,33 @@
+import { createHash } from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export function sha256(value) {
+  return createHash("sha256").update(value).digest("hex");
+}
+
+// Write a sibling temp file, then rename it over the report. Windows can refuse the rename while
+// another process (editor, antivirus, indexer) holds the file, so retry briefly before failing.
+// With `expect`, the file must still hold exactly that text right before each rename attempt;
+// otherwise nothing is written and the result is false. That is a check, not a lock: a writer
+// that does not go through this service can still change the file between it and the rename.
+export async function writeAtomic(file, text, { expect } = {}) {
+  const temp = path.join(path.dirname(file), `.${path.basename(file)}.${process.pid}.${Date.now()}.tmp`);
+  await fs.writeFile(temp, text);
+  for (let attempt = 0; ; attempt++) {
+    try {
+      if (expect !== undefined && (await fs.readFile(file, "utf8").catch(() => null)) !== expect) {
+        await fs.rm(temp, { force: true });
+        return false;
+      }
+      await fs.rename(temp, file);
+      return true;
+    } catch (error) {
+      if (attempt >= 9 || !["EPERM", "EBUSY", "EACCES"].includes(error.code)) {
+        await fs.rm(temp, { force: true });
+        throw error;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 40 * (attempt + 1)));
+    }
+  }
+}

package/browser/shared/html-tree.mjs

@@ -0,0 +1,59 @@
+// Reading a parsed report (parse5's tree: { tagName, attrs, childNodes, sourceCodeLocation }): what
+// every system that reads the HTML as a tree asks of an element. The render's checks, the editor's
+// source and the components' selectors (components/index.mjs) all read through it. Pure data: no
+// parser is imported here, so code that runs in the browser may import it too.
+
+/** Block-level elements: what a text block made of `text` may be, what holds units. */
+export const BLOCK_LEVEL = new Set([
+  "address", "article", "aside", "blockquote", "caption", "dd", "details", "dialog", "div", "dl", "dt",
+  "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr",
+  "li", "main", "menu", "nav", "ol", "p", "pre", "section", "summary", "table", "tbody", "td", "tfoot",
+  "th", "thead", "tr", "ul",
+]);
+
+/** An element's attribute, or undefined. */
+export const attr = (node, name) => node.attrs?.find((entry) => entry.name === name)?.value;
+
+/** Whether an element has the class. */
+export const hasClass = (node, name) => (attr(node, "class") ?? "").split(/\s+/).includes(name);
+
+/**
+ * The attributes of an element whose value its file opens with a curly quote (name=“… or name=”…,
+ * U+201C or U+201D, where a straight quote belongs), each { name, written: the attribute as the file
+ * writes it, line }: HTML takes no curly quote for a quote, so the value is read unquoted, the curly
+ * quotes part of it (class=”doc-sheet-tab” is the class ”doc-sheet-tab”). Read from the
+ * attribute's place in `html` (parse5's sourceCodeLocation), never from its value: title="“引语”"
+ * is a value in straight quotes that holds curly ones, as a Chinese text does. An editor that keeps
+ * a file's “…” style (as an Edit matched with its quotes made straight does) writes them.
+ */
+export function curlyQuoted(html, node) {
+  const places = node.sourceCodeLocation?.attrs ?? {};
+  return Object.entries(places).flatMap(([name, place]) => {
+    const written = html.slice(place.startOffset, place.endOffset);
+    return /^[^\s=]+\s*=\s*[“”]/.test(written) ? [{ name, written, line: place.startLine }] : [];
+  });
+}
+
+/** The element children of a node. */
+export const elementsOf = (node) => (node.childNodes ?? []).filter((child) => child.tagName);
+
+/**
+ * Every element under `root`, in document order, handed to `visit`. What a template holds is part of
+ * the page's markup (`inTemplates`, the default) or left out, as a browser's querySelectorAll does
+ * (what is inert there). A template in an <svg> or <math> holds no content: its children are the page's.
+ * `stop(element)`: what it says yes to is handed to `visit`, and what that holds is not, but for
+ * the elements `through(element)` gives of it, whose insides the walk goes on in (themselves not handed
+ * to `visit`): an instance of a component package and its slots (components/index.mjs BODY).
+ */
+export function walk(root, visit, { inTemplates = true, stop = null, through = null } = {}) {
+  const options = { inTemplates, stop, through };
+  for (const child of elementsOf(root)) {
+    visit(child);
+    if (stop?.(child)) {
+      for (const inner of through?.(child) ?? []) walk(inner, visit, options);
+      continue;
+    }
+    if (!(child.tagName === "template" && child.content)) walk(child, visit, options);
+    else if (inTemplates) walk(child.content, visit, options);
+  }
+}

package/browser/shared/http.mjs

@@ -0,0 +1,22 @@
+// The local server's answers: JSON for its endpoints (the editor's saves, the workbench's commands),
+// and files for its routes.
+
+// A JSON answer.
+export function sendJson(response, status, body) {
+  response.statusCode = status;
+  response.setHeader("Content-Type", "application/json; charset=utf-8");
+  response.setHeader("Cache-Control", "no-store");
+  response.end(JSON.stringify(body));
+}
+
+// What the routes answer with: a status (404 with nothing else), a content type, the headers the
+// route sets (its caching, nosniff, a sandbox) and the body.
+export function serve(response, { status = 200, type, headers = {}, body } = {}) {
+  response.statusCode = status;
+  if (type) response.setHeader("Content-Type", type);
+  for (const [name, value] of Object.entries(headers)) response.setHeader(name, value);
+  response.end(body);
+}
+
+// A file the route reads: its answer, or 404 when there is none.
+export const serveFound = (response, body, options) => (body ? serve(response, { ...options, body }) : serve(response, { status: 404 }));