@heycys/gallery 0.1.0 → 0.1.1

package/browser/shared/colors.mjs

@@ -1,5 +1,6 @@
 // The kit's nine colors (Notion's text and background colors, light and dark), written once: their
-// names, what the reader calls them and their values. The kit's stylesheets (render/kit/styles/
+// names, what the reader calls them and their values (a text color, a block's fill and the deeper
+// fill of words in a line). The kit's stylesheets (render/kit/styles/
 // base.css: .doc-text-* and .doc-highlight-*, tokens.css) are written by hand, as CSS is;
 // tests/unit/clipboard.mjs holds them to these values. Everything else that needs a value reads it
 // here: the editor's color pickers (names), pasted colors matched onto the nine (clipboard/import/
@@ -7,22 +8,23 @@
 
 /**
  * Each color in Notion's order: `name` (the classes are doc-text-<name> and doc-highlight-
- * <name>), `label` (what the reader calls it), and its text color and its background as [light,
- * dark].
+ * <name>), `label` (what the reader calls it), and its text color, its background as a block's
+ * (`fill`, base.css's --doc-fill) and its background on words in a line (`mark`, base.css's
+ * --doc-mark, deeper than the fill) as [light, dark].
  */
 export const COLORS = [
-  { name: "gray", label: "灰色", text: ["#6e6e73", "#a1a1a6"], fill: ["#f0efed", "#383836"] },
-  { name: "brown", label: "棕色", text: ["#9f765a", "#ba856f"], fill: ["#f5ede9", "#45362d"] },
-  { name: "orange", label: "橙色", text: ["#d27b2d", "#c77d48"], fill: ["#fbebde", "#53361f"] },
-  { name: "yellow", label: "黄色", text: ["#cb9434", "#ca9849"], fill: ["#f9f3dc", "#504425"] },
-  { name: "green", label: "绿色", text: ["#50946e", "#529e72"], fill: ["#e8f1ec", "#263d30"] },
-  { name: "blue", label: "蓝色", text: ["#387dc9", "#5e87c9"], fill: ["#e5f2fc", "#233850"] },
-  { name: "purple", label: "紫色", text: ["#9a6bb4", "#9d68d3"], fill: ["#f3ebf9", "#3c2d47"] },
-  { name: "pink", label: "粉色", text: ["#c14c8a", "#d15796"], fill: ["#fae9f1", "#4e2b3c"] },
-  { name: "red", label: "红色", text: ["#cf5148", "#df5452"], fill: ["#fce9e7", "#502c29"] },
+  { name: "gray", label: "灰色", text: ["#6e6e73", "#a1a1a6"], fill: ["#f0efed", "#383836"], mark: ["#e0dfdd", "#454542"] },
+  { name: "brown", label: "棕色", text: ["#9f765a", "#ba856f"], fill: ["#f5ede9", "#45362d"], mark: ["#efdbce", "#534034"] },
+  { name: "orange", label: "橙色", text: ["#d27b2d", "#c77d48"], fill: ["#fbebde", "#53361f"], mark: ["#fbddc5", "#654025"] },
+  { name: "yellow", label: "黄色", text: ["#cb9434", "#ca9849"], fill: ["#f9f3dc", "#504425"], mark: ["#f8eab6", "#614f26"] },
+  { name: "green", label: "绿色", text: ["#50946e", "#529e72"], fill: ["#e8f1ec", "#263d30"], mark: ["#cfead9", "#2c4b3a"] },
+  { name: "blue", label: "蓝色", text: ["#387dc9", "#5e87c9"], fill: ["#e5f2fc", "#233850"], mark: ["#cde5fb", "#294564"] },
+  { name: "purple", label: "紫色", text: ["#9a6bb4", "#9d68d3"], fill: ["#f3ebf9", "#3c2d47"], mark: ["#ebdaf6", "#4b3859"] },
+  { name: "pink", label: "粉色", text: ["#c14c8a", "#d15796"], fill: ["#fae9f1", "#4e2b3c"], mark: ["#f8d7e6", "#5d3548"] },
+  { name: "red", label: "红色", text: ["#cf5148", "#df5452"], fill: ["#fce9e7", "#502c29"], mark: ["#fed7d1", "#663632"] },
 ];
 
 export const COLOR_NAMES = COLORS.map(({ name }) => name);
 
 /** The page's own text color and background (tokens.css --doc-text, --doc-surface) as [light, dark]: what no color is. */
-export const BODY = { text: ["#1d1d1f", "#f3f3f3"], background: ["#ffffff", "#202020"] };
+export const BODY = { text: ["#2c2c2b", "#f3f3f3"], background: ["#ffffff", "#202020"] };

package/browser/shared/component-catalog.mjs

@@ -5,7 +5,7 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { parseFragment, serializeOuter } from "parse5";
 import { isInstance, parseCompound, parsePart, parseSelector, partOf } from "./components/index.mjs";
-import { ATTRIBUTE, NO_TEXT, PACKAGE_ID, PACKAGE_MARK, instanceMatch, refusedInCopy, settingState } from "./components/installed.mjs";
+import { ATTRIBUTE, NO_TEXT, PACKAGE_ID, PACKAGE_MARK, SLOT, instanceMatch, refusedInCopy, settingState } from "./components/installed.mjs";
 import { writeAtomic } from "./files.mjs";
 import { attr, walk } from "./html-tree.mjs";
 import { inLanguage, refusal, said, saying, told } from "./i18n/index.mjs";
@@ -24,7 +24,7 @@ import { DEVICE_NAMES, PACKAGE_MANIFEST, WORKSPACE_MARK, findWorkspace, layoutOf
 // does not run, which counts as disabled, or one the settings turned off) stands in `problems`, by its
 // id in lowercase, as an instance names it, with why (`problem`, said()'s, in either language by
 // problemIn), and touches nothing else: its instances show as those of a package that is not there,
-// and whoever reads them says why. `settings` is what gallery.json says of the components (设置 › 组件,
+// and whoever reads them says why. `settings` is what gallery.json says of the components (设置 › 组件列表,
 // componentSettings): `hidden` and `disabled`, by the id of a package or the name of a built-in
 // component, and `problem` where the file cannot be read as saying anything (settingsNow). A package
 // hidden runs as any other and is left out of the lists that offer one, each of which reads its state
@@ -51,8 +51,15 @@ const FIELDS = ["id", "apiVersion", "version", "name", "description", "words", "
 const PART_FIELDS = ["at", "edit", "optional", "min", "max"];
 const RUNTIME_FIELDS = ["generated", "attrs"];
 
-// What a package's part may be edited as: its text, its data through the kit's edit, or not at all.
-const EDITS = ["text", "data", "none"];
+// What a package's part may be edited as: its text, its data through the kit's edit, the document's
+// blocks (a slot, marked data-doc-slot="<name>" in its markup), or not at all.
+const EDITS = ["text", "data", "flow", "none"];
+// What a slot's name may be: it is written in an attribute's value, and a selector finds it there.
+const SLOT_NAME = /^[a-z][a-z0-9-]*$/;
+/** Where a part edited as flow is in an instance: the slot of its name. */
+export const slotAt = (name) => `div[${SLOT}="${name}"], section[${SLOT}="${name}"]`;
+// A manifest's parts as the engines read them: a slot's `at` is its mark, which the manifest does not write.
+const partsRead = (parts) => Object.fromEntries(Object.entries(parts).map(([name, part]) => [name, part.edit === "flow" ? { ...part, at: slotAt(name) } : part]));
 const MARKDOWN = ["parts", "text"];
 
 // The files of a package by their fixed names: those served from its folder (kit.js and style.css are
@@ -158,13 +165,21 @@ function checkPart(name, part) {
   const where = `parts.${name}`;
   if (!isTable(part)) fail(said("{0} 要写成一张表", where));
   onlyFields(part, PART_FIELDS, `${where}.`);
+  if (part.edit === "flow") {
+    // A slot: found by its mark, one to an instance.
+    if (!SLOT_NAME.test(name)) fail(said("{0} 是插槽，名字只用小写字母、数字和连字符", where));
+    if (part.at !== undefined) fail(said("{0} 是插槽，由 data-doc-slot=\"{1}\" 标出，不写 at", where, name));
+    if (part.min !== undefined || part.max !== undefined) fail(said("{0} 是插槽，一个实例里只有一个，不写 min、max", where));
+    if (part.optional !== undefined && typeof part.optional !== "boolean") fail(said("{0} 要写成 true 或 false", `${where}.optional`));
+    return;
+  }
   if (!isWords(part.at)) fail(said("缺少 {0}", `${where}.at`));
   try {
     parsePart(part.at);
   } catch (error) {
     fail(said("{0} 写错了：{1}", `${where}.at`, error.message));
   }
-  if (!EDITS.includes(part.edit)) fail(said("{0} 的 edit 只能是 text、data 或 none", where));
+  if (!EDITS.includes(part.edit)) fail(said("{0} 的 edit 只能是 text、data、flow 或 none", where));
   if (part.optional !== undefined && typeof part.optional !== "boolean") fail(said("{0} 要写成 true 或 false", `${where}.optional`));
   for (const bound of ["min", "max"]) if (part[bound] !== undefined && !(Number.isInteger(part[bound]) && part[bound] >= 0)) fail(said("{0} 要写成不小于 0 的整数", `${where}.${bound}`));
   if (part.min > part.max) fail(said("{0} 的 min 比 max 大，没有实例能满足", where));
@@ -253,7 +268,7 @@ function packageOf(id, folder, text) {
   return {
     id,
     match: instanceMatch(id),
-    parts: manifest.parts,
+    parts: partsRead(manifest.parts),
     ...(runtime ? { runtime } : {}),
     ...(manifest.schema !== undefined ? { schema: manifest.schema } : {}),
     apiVersion: manifest.apiVersion,
@@ -411,7 +426,7 @@ export const problemIn = (language, problem) => inLanguage(language, () => told(
 // Why a package does not load, in both languages, as a page and a list say it.
 const bothProblems = (problem) => ({ zh: problemIn("zh", problem), en: problemIn("en", problem) });
 
-/** Why gallery.json cannot be read, in both languages, as 设置 › 组件 says it, or null. */
+/** Why gallery.json cannot be read, in both languages, as 设置 › 组件列表 says it, or null. */
 export const settingsProblem = ({ settings }) => (settings.problem ? bothProblems(settings.problem) : null);
 
 // What a package is now: "normal", "hidden", "disabled" (turned off, or for an apiVersion this Gallery
@@ -500,7 +515,7 @@ function readTemplate({ id, template, parts }) {
   if (held.length > 0) return { problem: said("template.html 里的 <{0}> 进不了新建的块：脚本、事件、样式和 Gallery 自己的标记都不写在模板里", held[0]) };
   const short = Object.entries(parts).find(([, part]) => {
     const count = partOf(read.root, part.at).length;
-    return count < (part.optional ? 0 : part.min ?? 1) || count > (part.max ?? Infinity);
+    return count < (part.optional ? 0 : part.min ?? 1) || count > (part.edit === "flow" ? 1 : part.max ?? Infinity);
   });
   return short ? { problem: said("template.html 的 {0} 和清单写的数目不符", short[0]) } : { markup: read.markup };
 }
@@ -515,8 +530,7 @@ export const templateOf = (found) => readTemplate(found).markup ?? null;
  * What the page the editor runs on holds of a catalog: its MAP's `components` (src/editor/service.mjs),
  * no route and no dynamic import. One entry for each package that loads, by id: { id, version, name:
  * { zh, en }, description: { zh, en }, words, definition, stamp, template (the markup "/" puts in: one
- * instance of it, or null), preview (the address of its picture, or null), state ("normal", or "hidden":
- * a menu offers what is "normal" and reads no setting), markdown, assets (the kit's files it asks for,
+ * instance of it, or null), preview (the address of its picture, or null), state ("normal", or "hidden": a menu offers what is "normal" and reads no setting), markdown, assets (the kit's files it asks for,
  * by id), tags (packageTags: what loads it in a page that was served without it, the line that tells the
  * kit of its parts among them) }. A page knows what it holds of a package's parts from the kit
  * (descriptionsOf), and of one that came after it was served from these tags.

package/browser/shared/components/callout.mjs

@@ -1,7 +1,9 @@
-// A callout (提示块): a basic block.
+// A callout (提示块), a container of blocks set apart on a fill, a line at its left; one written the
+// old way, words straight in it, holds them as one paragraph (the editor's natural HTML).
 export default {
   id: "callout",
-  category: "block",
+  category: "container",
   match: ".doc-callout",
+  flow: ".doc-callout",
   classes: ["doc-callout"],
 };

package/browser/shared/components/index.mjs

@@ -28,7 +28,7 @@ import table from "./table.mjs";
 import text from "./text.mjs";
 import widget from "./widget.mjs";
 import { attr, elementsOf, walk } from "../html-tree.mjs";
-import { ATTRIBUTE, INSTANCE } from "./installed.mjs";
+import { ATTRIBUTE, INSTANCE, SLOT, SLOT_PART } from "./installed.mjs";
 
 // The kit's components as every system sees them (docs/internals.md, "Components"): what each is
 // in a report's markup, one plain-data description each, shared by the kit (how it runs), the
@@ -95,8 +95,8 @@ import { ATTRIBUTE, INSTANCE } from "./installed.mjs";
 
 export const COMPONENTS = [
   page, text, mention, // the page; inline marks, links shown with their icon
-  paragraph, heading, list, quote, callout, code, divider, math, // basic blocks
-  section, highlight, details, dialog, sheets, table, columns, // containers
+  paragraph, heading, list, quote, code, divider, math, // basic blocks
+  section, highlight, callout, details, dialog, sheets, table, columns, // containers
   figure, chart, image, file, bookmark, embed, // cards (a figure: a chart or a drawing of the report's own; an image, a file, a bookmark, an embed)
   widget, diff, icon, installed, // whole blocks (the page's icon one, in the header; an instance of a component package)
   state, // reading state, bound to blocks of any kind
@@ -135,7 +135,9 @@ export const CATEGORIES = {
 export const EVENTS = {
   "doc-theme-change": "the theme shown changed (ui.js): the reader chose one, the workbench asked for one, or the system's changed while none is chosen",
   "doc-theme-request": "a workbench asks for a theme (ui.js listens)",
-  "doc-layout-change": "a card's size changed where widths do not tell (the editor)",
+  "doc-look-request": "the document's look is asked of the page (字体与布局: the page's session for the workbench, the preview's live reload for doc.json written again; ui.js puts it on <html>, src/shared/document-look.mjs)",
+  "doc-look-change": "the look the page shows changed (ui.js): the page editor's session tells the workbench",
+  "doc-layout-change": "a card's size changed where widths do not tell (the editor), or the document's look changed (ui.js)",
   "doc-editable": "the page takes what a component writes from now on (the editor)",
   "doc-component-edit": "a component's context.edit asks to write a part: the editor cancels it to say it took the edit, the kit writing no file (on the instance)",
   "doc-export-copy-done": "导出当前视图副本 finished (ui.js)",
@@ -239,6 +241,58 @@ export function matchesNode(node, selector) {
 /** Whether a parsed node is an instance of a component package (installed.mjs): asked of every element by every walk, so by its attribute first, which few have. */
 export const isInstance = (node) => attr(node, ATTRIBUTE) !== undefined && matchesNode(node, INSTANCE);
 
+/** Whether a parsed node is a slot of an instance (installed.mjs SLOT): a block-level div or section marked so, wherever it stands. */
+export const isSlot = (node) => attr(node, SLOT) !== undefined && matchesNode(node, SLOT_PART);
+
+// The nearest edge of a region around a parsed node (an instance or a slot, itself left out), or null.
+const edgeAround = (node) => {
+  let around = node.parentNode;
+  while (around && !(isInstance(around) || isSlot(around))) around = around.parentNode;
+  return around ?? null;
+};
+
+/**
+ * The instance whose own region a parsed node stands in, or null where it is the document's: the rule
+ * of installed.mjs heldBy, on parse5's tree (the edges folded from the outermost in: an instance's own
+ * slot opens the document's again, what stands in a component's region stays its).
+ */
+export function heldByNode(node) {
+  const edge = edgeAround(node);
+  if (!edge) return null;
+  const owner = heldByNode(edge);
+  if (isInstance(edge)) return owner ?? edge;
+  return owner !== null && edgeAround(edge) === owner ? null : owner;
+}
+
+/**
+ * Every slot of an instance's own markup, in document order (none of an instance in it, none in
+ * another slot), whatever its name: what the checks hold to its manifest.
+ */
+export function ownSlots(instance) {
+  const found = [];
+  const look = (node) => {
+    for (const child of elementsOf(node)) {
+      if (isSlot(child)) found.push(child);
+      else if (!isInstance(child)) look(child);
+    }
+  };
+  look(instance);
+  return found;
+}
+
+/** The slots of an instance, the first of each name: where what it holds is the document's (a second of a name is a failure of the checks). */
+export function instanceSlots(instance) {
+  const named = new Set();
+  return ownSlots(instance).filter((slot) => !named.has(attr(slot, SLOT)) && named.add(attr(slot, SLOT)));
+}
+
+/**
+ * How a walk (html-tree.mjs) goes through what is the document's own: it stops at an instance of a
+ * component package and goes on in its slots, never handing a slot itself to the visit (its tag is
+ * the component's, what it holds the document's).
+ */
+export const BODY = Object.freeze({ stop: isInstance, through: instanceSlots });
+
 /** A part's elements in a parsed host, each once, in document order. */
 export function partOf(host, at) {
   const pieces = piecesOf(at);
@@ -254,12 +308,12 @@ export function partOf(host, at) {
 
 /**
  * Each instance of a component in a parsed tree, in document order. What stands in an instance of a
- * component package is its component's and no other's, and such an element is of its own package
- * alone, whatever class it carries.
+ * component package is its component's and no other's, but for what its slots hold, which is the
+ * document's (BODY), and such an element is of its own package alone, whatever class it carries.
  */
 export function instancesOf(root, component) {
   const found = [];
-  if (component.match) walk(root, (element) => { if (matchesNode(element, component.match) && (!isInstance(element) || attr(element, ATTRIBUTE) === component.id)) found.push(element); }, { stop: isInstance });
+  if (component.match) walk(root, (element) => { if (matchesNode(element, component.match) && (!isInstance(element) || attr(element, ATTRIBUTE) === component.id)) found.push(element); }, BODY);
   return found;
 }
 

package/browser/shared/components/installed.mjs

@@ -2,11 +2,16 @@
 // src/shared/component-catalog.mjs): a block-level div or section naming its package, which is all a
 // system needs to tell where the instance stands. The boundary depends on no catalog, so it holds in
 // a file sent to someone who has no such package, or that has lost it: nothing of Gallery's goes into
-// an instance, whatever it holds (the scan and naturalize, the kit's other components, formulas,
-// spacing and a picture's viewer), but the parts its manifest gives the editor. The rest of it is
-// the component's, its events too. One of no package is shown as it stands, read-only, and the kit marks
-// it so (FALLBACK), a note beside what it holds in a preview, and what a script of data in it holds,
-// which no reader would see, drawn as the kit draws any (DATA_SHOWN).
+// an instance's own region, whatever it holds (the scan and naturalize, the kit's other components,
+// formulas, spacing and a picture's viewer), but the parts its manifest gives the editor. The rest of
+// it is the component's, its events too, but for its slots (SLOT: a div or section of its own markup
+// marked data-doc-slot, its manifest's part edited as "flow"), whose insides are the document's again:
+// its blocks, read, edited, checked and drawn as anywhere in a flow, by the same mark and no catalog
+// either. One rule tells whose an element is (heldBy), the same on the server (components/index.mjs
+// heldByNode), in the kit and on the page. One of no package is shown as it stands, read-only, and the
+// kit marks it so (FALLBACK), a note beside what it holds in a preview, and what a script of data in
+// it holds, which no reader would see, drawn as the kit draws any (DATA_SHOWN); its slots stay the
+// document's, and editable.
 
 /** The attribute that makes an element an instance, its value the package's id: <scope>/<name>. */
 export const ATTRIBUTE = "data-doc-component";
@@ -17,6 +22,66 @@ export const PACKAGE_ID = /^[a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*$/;
 /** Where a document's instances are: what stops every system at the edge of one. */
 export const INSTANCE = `div[${ATTRIBUTE}], section[${ATTRIBUTE}]`;
 
+/** The attribute that makes an element of an instance's own markup a slot, its value the name of the part its manifest edits as "flow". */
+export const SLOT = "data-doc-slot";
+
+/** Where slots are: a block-level div or section so marked. */
+export const SLOT_PART = `div[${SLOT}], section[${SLOT}]`;
+
+// The edges of a region: an instance, where the component's begins, and a slot, where the document's may again.
+const REGION = `${INSTANCE}, ${SLOT_PART}`;
+
+// The nearest edge of a region around a node (itself left out), or null.
+const edgeAround = (node) => node?.parentElement?.closest(REGION) ?? null;
+
+/**
+ * The instance whose own region a node of a page stands in, or null where it is the document's: the
+ * edges around it folded from the outermost in. An instance met in the document's region opens its
+ * component's; its own slot (one whose nearest edge is that instance) opens the document's again; an
+ * instance or a slot met in a component's region stays that component's. A slot itself is its
+ * instance's (the component places it), and an instance itself stands in the region around it (its
+ * frame and its handle are Gallery's). For a page's DOM; the server's is heldByNode.
+ */
+export function heldBy(node) {
+  const edge = edgeAround(node);
+  if (!edge) return null;
+  const owner = heldBy(edge);
+  if (edge.matches(INSTANCE)) return owner ?? edge;
+  return owner !== null && edgeAround(edge) === owner ? null : owner;
+}
+
+/** Whether an element is a slot that opens the document's region again: one of an instance that stands in the document's. */
+const opensDocument = (node) => node.matches(SLOT_PART) && heldBy(node) !== null && edgeAround(node) === heldBy(node);
+
+/**
+ * Whether what happens on an element (a press, a key, a change of what it holds) is a component's: it
+ * stands in an instance's own region. Not a slot that opens the document's (its blank is the page's
+ * box), nor an instance itself (its frame is Gallery's).
+ */
+export const componentAt = (node) => node?.nodeType === 1 && heldBy(node) !== null && !opensDocument(node);
+
+/**
+ * The slot whose inside is the document's region a node stands in (one of an instance that stands in
+ * the document's, opening it again), the nearest, or null for the page around it: where what is one
+ * block of the page's is looked for (the editor's registry.mjs ownerOf).
+ */
+export function slotAround(node) {
+  for (let at = node; at;) {
+    const owner = heldBy(at);
+    if (owner) {
+      at = owner;
+      continue;
+    }
+    const edge = edgeAround(at); // a slot, or none: no instance holds it
+    if (!edge || opensDocument(edge)) return edge;
+    at = edge; // a slot of no instance's: the region around it
+  }
+  return null;
+}
+
+/** The slots of an instance: those of its own markup (no other instance's, nor one in another slot), in document order. */
+export const slotsIn = (instance) => [...instance.querySelectorAll(SLOT_PART)].filter((slot) => edgeAround(slot) === instance);
+
 /** The kit's mark on an instance of no package, for its look (styles/installed.css). */
 export const FALLBACK = "data-doc-fallback";
 
@@ -150,9 +215,14 @@ export default {
   id: "installed",
   category: "whole",
   match: INSTANCE,
+  // An instance's slots are flows: what they hold is the document's blocks (FLOWS, styles/flow.css). A
+  // plain string, [SLOT]: an expression here would keep this description in every bundle that imports a
+  // constant of this file (the runtime takes none of its prose).
+  flow: "[data-doc-slot]",
   attrs: {
     "data-doc-component": "the package an instance is of: <scope>/<name>, on a block-level div or section",
     "data-doc-schema": "the shape an instance holds its content in: a whole number its component chooses, read-only past its manifest's schema",
+    "data-doc-slot": "a slot of an instance: the part of its manifest edited as flow, by name, on a block-level div or section in the instance's own region; what it holds is the document's blocks",
   },
   runtime: {
     generated: [".doc-component-note", ".doc-component-data"],

package/browser/shared/components/page.mjs

@@ -13,6 +13,13 @@ export function pageLanguage(html) {
   return /\slang\s*=\s*["']?en(?:-[^"'\s>]*)?(?=["'\s>]|$)/i.test(tag) ? "en" : "zh";
 }
 
+/**
+ * A document's look on its <html> (字体与布局: its doc.json's look, which the render puts on and the kit's
+ * tokens read; src/shared/document-look.mjs), the attribute of each choice. The width's is
+ * data-doc-measure (a column's measure, its line length): data-doc-width is the reader's own 全宽.
+ */
+export const LOOK_ATTRIBUTES = Object.freeze({ font: "data-doc-font", size: "data-doc-size", spacing: "data-doc-spacing", width: "data-doc-measure" });
+
 export default {
   id: "page",
   match: "main.doc-page",
@@ -31,7 +38,9 @@ export default {
   runtime: {
     generated: [".doc-display", "script[data-doc-state]"],
     root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] },
-    state: { html: ["data-doc-theme", "data-doc-width"] },
+    // The reader's theme and width (ui.js), and the document's look (字体与布局: its doc.json's, put on by
+    // the render, src/shared/document-look.mjs), which a copy of the view keeps; never written in doc.html.
+    state: { html: ["data-doc-theme", "data-doc-width", ...Object.values(LOOK_ATTRIBUTES)] },
     internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"],
   },
 };

package/browser/shared/components/table.mjs

@@ -31,7 +31,7 @@ export default {
     "data-doc-chart-source": "on its frame: the key a chart drawn from it reads it by (data-doc-chart-data on the chart's host)",
   },
   // A cell may also be given a text color or a fill (doc-text-*, doc-highlight-*: text.mjs), an alignment, a vertical one and bold
-  // (doc-bold); a header cell's look is doc-bold doc-highlight-gray, as the page editor gives it.
+  // (doc-bold); a header row's cell's look is doc-bold doc-highlight-gray, as the page editor gives it (a header column's th scope="row" none).
   classes: ["doc-table", "doc-table-wrap", "doc-table-meta", "doc-table--sticky-first", ...CELL_ALIGN_CLASSES, ...CELL_VALIGN_CLASSES, CELL_BOLD_CLASS],
   fills: { "th": ["data-sort-type"] },
   runtime: {

package/browser/shared/components/text.mjs

@@ -9,6 +9,6 @@ export default {
     ...COLORS.map((color) => `doc-highlight-${color}`),
     ...["orange", "blue", "purple", "plain", "thin", "thick"].map((kind) => `doc-underline-${kind}`),
   ],
-  // A number range in the text (3–13, 1–3B), held on one line (runtime/spacing.js).
-  runtime: { classes: { ".doc-range": ["doc-range"] } },
+  // A number range in the text (3–13, 1–3B), held on one line, and a long run (a path, a URL: src/shared/long-runs.mjs) held in a span that breaks anywhere (runtime/spacing.js).
+  runtime: { classes: { ".doc-range": ["doc-range"], ".doc-long-run": ["doc-long-run"] } },
 };

package/browser/shared/document-look.mjs

@@ -0,0 +1,178 @@
+// A document's look (字体与布局, under the workbench's 更多: Notion's page format, notion-lite's
+// view/frame/page-format.js): its font, the size of its text, the spacing of its lines and blocks and
+// the width of its reading column. The document's own, as Notion keeps it on the page: `look` in its
+// doc.json (report.json in a document made before Gallery 0.1), over the workspace's default look,
+// `look` in its gallery.json (which the card's 应用到全部文档 writes, every document's own taken away:
+// ./workspace-look.mjs), choice by choice (effectiveLook). The workspace's keeps each choice that is
+// not the default, the field gone when none is; a doc.json each choice that is not the workspace's,
+// the field gone when none is:
+//
+//   "look": { "font": "serif" | "mixed", "size": "small" | "large", "spacing": "compact" | "loose", "width": "narrow" | "wide" }
+//
+// A doc.json may say a default too ("font": "sans", "size": "default"…): 默认 chosen on a page while
+// the workspace's default says otherwise. The look a document shows is never written in doc.html: the
+// render puts it on the page's <html> as data attributes
+// (withLook, render/report-html.mjs: the preview, 演示视图, a build, an export, its PDF), which the
+// kit's tokens read (styles/tokens.css, @kit-look, written by render/look-css.mjs); a page takes a
+// change at once (`doc-look-request`, the kit's ui.js: the workbench's choice, sent by the page's
+// session, and doc.json changed, said by the preview's live reload). A value it does not know is the
+// default. docs/render.md "A document's look" says what each choice does.
+
+import { LOOK_ATTRIBUTES } from "./components/page.mjs";
+
+/** Each choice and its values, the default first. */
+export const LOOK = Object.freeze({
+  font: Object.freeze(["sans", "serif", "mixed"]), // 等线体, 衬线体, 混合体 (the title and headings serif)
+  size: Object.freeze(["default", "small", "large"]), // 字体大小: 小号, 默认, 大号
+  spacing: Object.freeze(["default", "compact", "loose"]), // 正文间距: 紧凑, 默认, 宽松
+  width: Object.freeze(["default", "narrow", "wide"]), // 正文宽度: 偏窄, 默认, 偏宽
+});
+
+/** The attribute each choice is on <html> by: the page's description says them (components/page.mjs). */
+export { LOOK_ATTRIBUTES };
+
+/**
+ * 字体大小: the factor every size of the text takes, and its line height with it (body text 15px, 16px,
+ * 18px): the type alone, not the gaps between blocks (正文间距's) nor the column's width (正文宽度's).
+ * 14px (Notion's small text) set small text and captions at 11px, too small for Chinese; 17px was hard
+ * to tell from 16px.
+ */
+export const SIZE_FACTOR = Object.freeze({ default: 1, small: 15 / 16, large: 18 / 16 });
+
+/**
+ * 正文间距: what a line's leading (its line height less its font size) and the gaps between blocks
+ * are taken at (body text's line 24px, 26px, 28px at 16px; a paragraph's gap 9px, 12px, 15px at any
+ * 字体大小).
+ */
+export const SPACING = Object.freeze({
+  default: Object.freeze({ leading: 1, gaps: 1 }),
+  compact: Object.freeze({ leading: 0.8, gaps: 0.75 }),
+  loose: Object.freeze({ leading: 1.2, gaps: 1.25 }),
+});
+
+/**
+ * 正文宽度: the reading column in px, whatever the 字体大小 (which changes the type alone): 默认 the
+ * kit's 712px (tokens.css --doc-content-max-width), 44 characters of Chinese body text to a line at the
+ * default 16px; 偏窄 and 偏宽 the widths of 40 and 48 of them (40.5 and 48.5 times 16px, as 712 is 44.5
+ * times it). The user counted a line in characters only to fix these widths (2026-11-07: until then
+ * they were counted at the size chosen, so 大号 widened the column too). A narrow window narrows it as
+ * ever.
+ */
+export const WIDTH = Object.freeze({ default: 712, narrow: 648, wide: 776 });
+
+/**
+ * The serif (衬线体, and 混合体's title and headings): the system's own book serifs, nothing to download
+ * (the sidebar's Gallery wordmark is set in the first of them), then the Chinese serifs: Songti SC
+ * (macOS), Noto or Source Han Serif where installed, SimSun (Windows).
+ */
+export const SERIF_FONT = '"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif';
+
+const isPlain = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+
+/** A look as kept: the choices `value` makes that are known and not the default, {} for none. */
+export function lookOf(value) {
+  const look = {};
+  if (!isPlain(value)) return look;
+  for (const [key, choices] of Object.entries(LOOK)) {
+    const chosen = value[key];
+    if (typeof chosen === "string" && choices.includes(chosen) && chosen !== choices[0]) look[key] = chosen;
+  }
+  return look;
+}
+
+/** Each choice of a look, the default where it makes none: { font, size, spacing, width }. */
+export const fullLook = (value) => ({ ...Object.fromEntries(Object.entries(LOOK).map(([key, [first]]) => [key, first])), ...lookOf(value) });
+
+/** Whether two looks are the same. */
+export const sameLook = (a, b) => JSON.stringify(lookOf(a)) === JSON.stringify(lookOf(b));
+
+/**
+ * A document's own look as its doc.json keeps it: each known choice `value` makes, the default too
+ * ("sans", "default": 默认 chosen on a page while the workspace's default look says otherwise), {} for
+ * none. lookOf is what it shows of that alone.
+ */
+export function ownLookOf(value) {
+  const look = {};
+  if (!isPlain(value)) return look;
+  for (const [key, choices] of Object.entries(LOOK)) {
+    const chosen = value[key];
+    if (typeof chosen === "string" && choices.includes(chosen)) look[key] = chosen;
+  }
+  return look;
+}
+
+/**
+ * The look a document shows (lookOf's form: the defaults left out), choice by choice: its own (doc.json's
+ * `look`, ownLookOf), else the workspace's default look (gallery.json's `look`, 应用到全部文档), else the
+ * default.
+ */
+export const effectiveLook = (own, workspace) => lookOf({ ...lookOf(workspace), ...ownLookOf(own) });
+
+/**
+ * What a document's doc.json keeps for it to show `look` under the workspace's default look
+ * `workspace`: each choice that is not the workspace's, a default too (ownLookOf), {} when it shows
+ * the workspace's own.
+ */
+export function ownLookFor(look, workspace) {
+  const [shown, base] = [fullLook(look), fullLook(workspace)];
+  return Object.fromEntries(Object.keys(LOOK).filter((key) => shown[key] !== base[key]).map((key) => [key, shown[key]]));
+}
+
+/**
+ * A document's doc.json (its parsed object) with its own look as given (ownLookOf: an explicit default
+ * kept): in the field's place when it had one, else last; the field gone when it makes no choice.
+ * Every other field stays as it is.
+ */
+export function withLookField(metadata, look) {
+  const next = ownLookOf(look);
+  const keep = Object.keys(next).length > 0;
+  const base = isPlain(metadata) ? metadata : {};
+  if (!Object.hasOwn(base, "look")) return keep ? { ...base, look: next } : { ...base };
+  return Object.fromEntries(Object.entries(base).flatMap(([key, value]) => (key !== "look" ? [[key, value]] : keep ? [[key, next]] : [])));
+}
+
+/** The look's attributes on <html>: [name, value] for each choice that is not the default. */
+export const lookAttributes = (look) => Object.entries(lookOf(look)).map(([key, value]) => [LOOK_ATTRIBUTES[key], value]);
+
+const ATTRIBUTE_VALUE = String.raw`(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?`;
+
+/**
+ * A page's text with the look on its <html> start tag (the first one), as the render serves and
+ * exports it: whatever look attributes the file writes there taken off (doc.json is their one home),
+ * the look's put on. A page without an <html> tag is returned as it is.
+ */
+export function withLook(html, look) {
+  const text = String(html ?? "");
+  const found = /<html\b[^>]*>/i.exec(text);
+  if (!found) return text;
+  let tag = found[0];
+  for (const name of Object.values(LOOK_ATTRIBUTES)) tag = tag.replace(new RegExp(String.raw`\s${name}${ATTRIBUTE_VALUE}(?=[\s/>])`, "gi"), "");
+  const added = lookAttributes(look).map(([name, value]) => ` ${name}="${value}"`).join("");
+  if (added) tag = tag.replace(/\s*>$/, (end) => `${added}${end.trimStart()}`);
+  return text.slice(0, found.index) + tag + text.slice(found.index + found[0].length);
+}
+
+/** The look an element (the page's <html>) carries by its attributes. */
+export function lookOfElement(element) {
+  return lookOf(Object.fromEntries(Object.entries(LOOK_ATTRIBUTES).map(([key, name]) => [key, element?.getAttribute?.(name) ?? undefined])));
+}
+
+/** Put a look on an element (the page's <html>) by its attributes; whether anything changed. */
+export function setLookOn(element, look) {
+  const next = lookOf(look);
+  let changed = false;
+  for (const [key, name] of Object.entries(LOOK_ATTRIBUTES)) {
+    const value = next[key] ?? null;
+    if (element.getAttribute(name) === value) continue;
+    if (value === null) element.removeAttribute(name);
+    else element.setAttribute(name, value);
+    changed = true;
+  }
+  return changed;
+}
+
+/** A look as a line's word (the preview's live reload says "look <word>"): "font=serif&size=small", "" for the default. */
+export const lookWord = (look) => Object.entries(lookOf(look)).map(([key, value]) => `${key}=${value}`).join("&");
+
+/** The look a word says (lookWord's inverse; anything else the default). */
+export const lookOfWord = (word) => lookOf(Object.fromEntries(new URLSearchParams(String(word ?? ""))));

package/browser/shared/emoji/data/LICENSE-lucide.txt

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.