@panphora/clayjs 1.15.1 → 1.16.0

package/src/page/table.js

@@ -3,14 +3,14 @@ import { schema } from "./schema.js";
 import { keyBetween, keysBetween, newId, orderedIds, cellContent } from "./model.js";
 import { placeAt } from "./ybind/board-commands.js";
 import { parseDecimal, COLUMN_KINDS } from "./rich/csv.js";
-import { columnKinds, KIND_ICONS, KIND_LABELS } from "./table-kinds.js";
+import { columnKinds } from "./table-kinds.js";
 import { asStep } from "./blocksel.js";
-import { openPageMenu } from "./chrome.js";
-import { insertChartAfterTable } from "./chart.js";
 import { REMOTE_META } from "./ybind/layout.js";
+import { DERIVED } from "./history-intent.js";
 import { gridFromClipboard, tableFromGrid } from "./table-paste.js";
-import { rectTopLeft, selectLine } from "./table-select.js";
-import toast from "../ui/toast.js";
+import { rectTopLeft } from "./table-select.js";
+import { cellViews } from "./table-views.js";
+import toast from "../ui/toast-lazy.js";
 
 const { Plugin, TextSelection } = state;
 const N = schema.nodes;
@@ -60,8 +60,8 @@ function changeTable(st, dispatch, change) {
   return true;
 }
 
-export function insertTableNode(st, dispatch, table, remove = null, attachment = null) {
-  const index = st.selection.$head.index(0);
+export function insertTableNode(st, dispatch, table, remove = null, attachment = null, index = null) {
+  index ??= remove ? st.doc.resolve(remove.from).index(0) : st.selection.$head.index(0);
   const current = st.doc.child(index);
   let at = 0;
   for (let i = 0; i < index; i++) at += st.doc.child(i).nodeSize;
@@ -211,19 +211,6 @@ export const moveColumn = (delta) => (st, dispatch) => changeTable(st, dispatch,
 });
 
 export const MIN_WIDTH = 48, MAX_WIDTH = 1200, DEFAULT_WIDTH = 160;
-const FONT = ["fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing"];
-const textWidth = (el) => {
-  const doc = el.ownerDocument;
-  const style = doc.defaultView.getComputedStyle(el);
-  const probe = doc.createElement("span");
-  for (const key of FONT) probe.style[key] = style[key];
-  Object.assign(probe.style, { position: "absolute", visibility: "hidden", whiteSpace: "pre", left: "-9999px", top: "0" });
-  probe.textContent = el.textContent;
-  doc.body.append(probe);
-  const width = probe.getBoundingClientRect().width;
-  probe.remove();
-  return Math.ceil(width);
-};
 const widthOf = (value) => (Number.isFinite(value) && value > 0 ? Math.round(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, value))) : null);
 
 export const setColumnWidth = (colId, width) => (st, dispatch) => changeTable(st, dispatch, (table) => {
@@ -357,20 +344,11 @@ export function tablePlugin() {
           tr.setNodeMarkup(pos, null, { ...table.attrs, sort: null });
         }
       });
-      return tr.docChanged ? tr : null;
+      return tr.docChanged ? tr.setMeta(DERIVED, true) : null;
     },
   });
 }
 
-const button = (doc, label, action) => {
-  const el = doc.createElement("button");
-  el.type = "button";
-  el.textContent = label;
-  el.setAttribute("aria-label", label);
-  el.addEventListener("click", action);
-  return el;
-};
-
 export function setCellText(view, cellPos, text) {
   const cell = view.state.doc.nodeAt(cellPos);
   if (cell?.type !== N.table_cell) return false;
@@ -385,266 +363,3 @@ export function selectTableCell(view, tablePos, row, cell) {
   view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)));
   return true;
 }
-
-export class TableView {
-  constructor(node, view, getPos) {
-    this.node = node;
-    this.view = view;
-    this.getPos = getPos;
-    const doc = view.dom.ownerDocument;
-    this.dom = doc.createElement("div");
-    this.dom.className = "page-table";
-    this.dom.dataset.id = node.attrs.id ?? "";
-    this.dom.setAttribute("role", "group");
-    this.dom.setAttribute("aria-label", "Table");
-    const scroll = doc.createElement("div");
-    scroll.className = "page-table-scroll";
-    const table = doc.createElement("table");
-    this.table = table;
-    this.colgroup = doc.createElement("colgroup");
-    this.header = doc.createElement("thead");
-    this.header.contentEditable = "false";
-    this.contentDOM = doc.createElement("tbody");
-    table.append(this.colgroup, this.header, this.contentDOM);
-    scroll.append(table);
-    const addRowButton = button(doc, "+", () => this.append("row"));
-    addRowButton.className = "page-table-add-row";
-    addRowButton.setAttribute("aria-label", "Add a row");
-    addRowButton.title = "Add a row";
-    const addColumnButton = button(doc, "+", () => this.append("column"));
-    addColumnButton.className = "page-table-add-col";
-    addColumnButton.setAttribute("aria-label", "Add a column");
-    addColumnButton.title = "Add a column";
-    for (const control of [addRowButton, addColumnButton]) {
-      control.contentEditable = "false";
-      control.addEventListener("mousedown", (event) => event.preventDefault());
-    }
-    this.dom.append(scroll, addRowButton, addColumnButton);
-    this.render();
-  }
-  append(what) {
-    const pos = this.getPos();
-    if (pos == null) return;
-    const last = what === "row" ? [this.node.childCount - 1, 0] : [0, this.node.child(0).childCount - 1];
-    selectTableCell(this.view, pos, ...last);
-    (what === "row" ? addRow(true) : addColumn(true))(this.view.state, this.view.dispatch);
-    this.view.focus();
-  }
-  widths() {
-    const sized = columns(this.node).some((id) => this.node.attrs.cols[id].width);
-    const cols = columns(this.node).map((id) => {
-      const col = this.dom.ownerDocument.createElement("col");
-      col.dataset.col = id;
-      const width = this.node.attrs.cols[id].width;
-      if (sized) col.style.width = `${width ?? DEFAULT_WIDTH}px`;
-      return col;
-    });
-    this.colgroup.replaceChildren(...cols);
-    this.table.classList.toggle("is-sized", sized);
-    this.table.style.width = sized ? `${columns(this.node).reduce((sum, id) => sum + (this.node.attrs.cols[id].width ?? DEFAULT_WIDTH), 0)}px` : "";
-  }
-  resizer(colId, th) {
-    const doc = this.dom.ownerDocument;
-    const handle = doc.createElement("span");
-    handle.className = "page-table-resize";
-    handle.setAttribute("role", "separator");
-    handle.setAttribute("aria-orientation", "vertical");
-    handle.setAttribute("aria-label", "Resize column");
-    handle.title = "Drag to resize, double-click to fit";
-    handle.addEventListener("mousedown", (event) => event.preventDefault());
-    handle.addEventListener("pointerdown", (event) => {
-      event.preventDefault();
-      const start = event.clientX;
-      const from = this.node.attrs.cols[colId].width ?? (th.getBoundingClientRect().width || DEFAULT_WIDTH);
-      const rtl = this.dom.ownerDocument.defaultView.getComputedStyle?.(this.dom).direction === "rtl";
-      let width = from;
-      const move = (e) => {
-        width = widthOf(from + (rtl ? start - e.clientX : e.clientX - start)) ?? from;
-        const col = [...this.colgroup.children].find((el) => el.dataset.col === colId);
-        if (col) { this.table.classList.add("is-sized"); col.style.width = `${width}px`; }
-      };
-      const up = () => {
-        doc.removeEventListener("pointermove", move);
-        doc.removeEventListener("pointerup", up);
-        if (width !== from) this.command(setColumnWidth(colId, width));
-        else this.widths();
-      };
-      doc.addEventListener("pointermove", move);
-      doc.addEventListener("pointerup", up);
-    });
-    handle.addEventListener("dblclick", (event) => { event.preventDefault(); this.fit(colId); });
-    return handle;
-  }
-  command(run) {
-    const pos = this.getPos();
-    if (pos == null) return false;
-    selectTableCell(this.view, pos, 0, 0);
-    const done = run(this.view.state, this.view.dispatch);
-    this.view.focus();
-    return done;
-  }
-  fit(colId) {
-    let widest = 0;
-    for (const cell of this.contentDOM.querySelectorAll("td")) if (cell.dataset.col === colId) widest = Math.max(widest, textWidth(cell.firstElementChild ?? cell));
-    const head = [...this.header.querySelectorAll("th")].find((th) => th.dataset.col === colId)?.querySelector("button");
-    widest = Math.max(widest, head?.scrollWidth ?? 0);
-    return this.command(setColumnWidth(colId, widest + 24));
-  }
-  render() {
-    const doc = this.dom.ownerDocument;
-    const row = doc.createElement("tr");
-    const effective = columnKinds(this.node);
-    this.widths();
-    for (const [index, colId] of columns(this.node).entries()) {
-      const col = this.node.attrs.cols[colId];
-      const kind = effective[colId];
-      const th = doc.createElement("th");
-      th.dataset.col = colId;
-      th.dataset.kind = kind;
-      if (this.node.attrs.sort?.col === colId) th.setAttribute("aria-sort", this.node.attrs.sort.dir === "asc" ? "ascending" : "descending");
-      const control = button(doc, col.name || `Column ${index + 1}`, (event) => {
-        event.preventDefault();
-        const run = (command) => () => { selectTableCell(this.view, this.getPos(), 0, index); command(this.view.state, this.view.dispatch); this.view.focus(); };
-        const rename = () => {
-          const input = doc.createElement("input");
-          input.type = "text";
-          input.value = col.name;
-          input.setAttribute("aria-label", "Column name");
-          const finish = (save) => {
-            if (save && input.value.trim()) run(renameColumn(colId, input.value))();
-            else if (input.isConnected) { input.replaceWith(control); control.focus(); }
-          };
-          input.addEventListener("keydown", (e) => {
-            if (e.key === "Enter") { e.preventDefault(); finish(true); }
-            if (e.key === "Escape") { e.preventDefault(); finish(false); }
-            e.stopPropagation();
-          });
-          control.replaceWith(input);
-          input.focus();
-          input.select();
-        };
-        openPageMenu(this.view, control, [
-          { label: "Rename", run: rename, focus: false },
-          { label: "Kind ▸", icon: KIND_ICONS[kind], hint: col.kind ? KIND_LABELS[kind] : `Auto: ${KIND_LABELS[kind]}`, run: () => openPageMenu(this.view, control, [
-            { label: "Auto", icon: col.kind ? "" : KIND_ICONS[kind], hint: col.kind ? "" : KIND_LABELS[kind], checked: !col.kind, run: run(setColumnKind(colId, "auto")) },
-            ...COLUMN_KINDS.map((option) => ({ label: KIND_LABELS[option], icon: KIND_ICONS[option], checked: col.kind === option, run: run(setColumnKind(colId, option)) })),
-          ]), focus: false },
-          { label: "Sort ascending", icon: "↑", run: run(sortBy(colId, "asc")) },
-          { label: "Sort descending", icon: "↓", run: run(sortBy(colId, "desc")) },
-          { label: "Width ▸", icon: "↔", hint: col.width ? `${col.width}px` : "Auto", focus: false, run: () => openPageMenu(this.view, control, [
-            { label: "Wider", icon: "+", run: () => this.command(setColumnWidth(colId, (col.width ?? (th.getBoundingClientRect().width || DEFAULT_WIDTH)) + 40)) },
-            { label: "Narrower", icon: "−", run: () => this.command(setColumnWidth(colId, (col.width ?? (th.getBoundingClientRect().width || DEFAULT_WIDTH)) - 40)) },
-            { label: "Fit to content", icon: "↔", run: () => this.fit(colId) },
-            ...(col.width ? [{ label: "Reset width", icon: "×", run: () => this.command(setColumnWidth(colId, null)) }] : []),
-          ]) },
-          { label: "Chart this table", icon: "📊", run: () => insertChartAfterTable(this.view, this.getPos()) },
-          { label: "Insert column left", icon: "+", run: run(addColumn(false)) },
-          { label: "Insert column right", icon: "+", run: run(addColumn(true)) },
-          ...(index > 0 ? [{ label: "Move left", icon: "←", run: run(moveColumn(-1)) }] : []),
-          ...(index < columns(this.node).length - 1 ? [{ label: "Move right", icon: "→", run: run(moveColumn(1)) }] : []),
-          { label: "Select column", icon: "▦", run: () => selectLine(this.view, this.getPos(), "col", index) },
-          { label: "Delete column", icon: "×", run: run(deleteColumn) },
-        ]);
-      });
-      control.dataset.kind = kind;
-      th.append(control, this.resizer(colId, th));
-      row.append(th);
-    }
-    this.header.replaceChildren(row);
-  }
-  update(node) {
-    if (node.type !== N.table) return false;
-    this.node = node;
-    this.dom.dataset.id = node.attrs.id ?? "";
-    this.render();
-    const effective = columnKinds(node);
-    for (const cell of this.contentDOM.querySelectorAll("td[data-col]")) cell.dataset.kind = effective[cell.dataset.col] ?? "text";
-    return true;
-  }
-  stopEvent(event) { return !!event.target.closest?.("thead"); }
-  ignoreMutation(mutation) { return !this.contentDOM.contains(mutation.target); }
-}
-
-const cellViews = new WeakMap();
-
-export class TableCellView {
-  constructor(node, view, getPos) {
-    this.node = node;
-    this.view = view;
-    this.getPos = getPos;
-    this.date = null;
-    const doc = view.dom.ownerDocument;
-    this.dom = doc.createElement("td");
-    cellViews.set(this.dom, this);
-    this.dom.dataset.col = node.attrs.col;
-    this.contentDOM = doc.createElement("span");
-    this.dom.append(this.contentDOM);
-    const menu = doc.createElement("button");
-    menu.type = "button";
-    menu.className = "page-table-row-menu";
-    menu.textContent = "Row actions";
-    menu.setAttribute("aria-label", "Row actions");
-    menu.contentEditable = "false";
-    menu.addEventListener("click", () => {
-      const $cell = this.view.state.doc.resolve(this.getPos());
-      const tablePos = $cell.before(1);
-      const row = $cell.index(1);
-      const run = (command) => () => { selectTableCell(this.view, tablePos, row, 0); command(this.view.state, this.view.dispatch); this.view.focus(); };
-      const count = $cell.node(1).childCount;
-      openPageMenu(this.view, menu, [
-        { label: "Insert above", icon: "+", run: run(addRow(false)) },
-        { label: "Insert below", icon: "+", run: run(addRow(true)) },
-        ...(row > 0 ? [{ label: "Move up", icon: "↑", run: run(moveRow(-1)) }] : []),
-        ...(row < count - 1 ? [{ label: "Move down", icon: "↓", run: run(moveRow(1)) }] : []),
-        { label: "Select row", icon: "▦", run: () => selectLine(this.view, tablePos, "row", row) },
-        { label: "Delete row", icon: "×", run: run(deleteRow) },
-      ]);
-    });
-    this.menu = menu;
-    this.dom.append(menu);
-    this.update(node);
-  }
-  update(node) {
-    if (node.type !== N.table_cell) return false;
-    this.node = node;
-    const $cell = this.view.state.doc.resolve(this.getPos());
-    const table = $cell.node(1);
-    this.dom.dataset.kind = columnKinds(table)[node.attrs.col] ?? "text";
-    this.menu.hidden = $cell.index(2) !== 0;
-    if (this.dom.dataset.kind !== "date") this.closeDate();
-    return true;
-  }
-  openDate() {
-    if (this.date || this.dom.dataset.kind !== "date") return false;
-    const doc = this.dom.ownerDocument;
-    const input = doc.createElement("input");
-    input.type = "date";
-    input.className = "page-table-date";
-    input.contentEditable = "false";
-    input.setAttribute("aria-label", "Pick a date");
-    const current = this.node.textContent.trim();
-    if (/^\d{4}-\d{2}-\d{2}$/.test(current)) input.value = current;
-    input.addEventListener("change", () => {
-      if (input.value) setCellText(this.view, this.getPos(), input.value);
-      this.closeDate();
-      this.view.focus();
-    });
-    input.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") { event.preventDefault(); this.closeDate(); this.view.focus(); }
-      event.stopPropagation();
-    });
-    input.addEventListener("blur", () => this.closeDate());
-    this.date = input;
-    this.dom.append(input);
-    try { input.showPicker?.(); } catch {}
-    return true;
-  }
-  closeDate() {
-    const input = this.date;
-    this.date = null;
-    if (input?.isConnected) input.remove();
-  }
-  destroy() { this.closeDate(); }
-  stopEvent(event) { return !!event.target.closest?.(".page-table-row-menu, .page-table-date"); }
-  ignoreMutation(mutation) { return !this.contentDOM.contains(mutation.target); }
-}

package/src/page/themes/light-1.css

@@ -1,7 +1,144 @@
 /* Light 1: warm paper, Inter body under a Newsreader serif title, hairline chrome that darkens one small step on movement, from the parent bake-off seat. */
-@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500&family=Inter:wght@400;500;600&display=swap");
+@font-face {
+  font-family: "Newsreader";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(../../../fonts/newsreader-vietnamese-opsz-normal.woff2) format("woff2-variations");
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+@font-face {
+  font-family: "Newsreader";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(../../../fonts/newsreader-latin-ext-opsz-normal.woff2) format("woff2-variations");
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Newsreader";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(../../../fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-greek-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-greek-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-vietnamese-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../../../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+
+
+@layer page {
+  article[data-page] {
+    --page-link: #164583;
+    --page-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: var(--page-pad-top) 16px 30vh;
+    background: var(--page-bg);
+    color: var(--page-ink);
+    font-family: var(--page-font);
+    font-size: var(--page-font-size);
+    line-height: var(--page-line-height);
+    overflow-wrap: break-word;
+  }
+  article[data-page] ::selection { background: var(--page-selection); }
+  article[data-page] > * { max-width: var(--page-measure); margin: var(--page-block-gap) auto; }
+  article[data-page] > h1 { font-family: var(--page-font-display); font-size: var(--page-h1-size); font-weight: var(--page-h1-weight); letter-spacing: var(--page-h1-tracking); line-height: var(--page-h1-line); color: var(--page-ink-strong); margin-block: 0 0.6em; }
+  article[data-page] > h2 { font-family: var(--page-font-heading); font-size: var(--page-h2-size); font-weight: var(--page-h2-weight); color: var(--page-ink-strong); line-height: 1.35; margin-block-start: 1.4em; }
+  article[data-page] > h3 { font-family: var(--page-font-heading); font-size: var(--page-h3-size); font-weight: var(--page-h3-weight); color: var(--page-ink-strong); margin-block-start: 1.2em; }
+  article[data-page] a { color: var(--page-link, var(--page-accent)); }
+  article[data-page] code { font-family: var(--page-font-mono); font-size: 0.88em; background: var(--page-code-bg); color: var(--page-code-ink); border-radius: 4px; padding: 0.1em 0.3em; }
+  article[data-page] pre { position: relative; padding: 32px 14px 12px; font-family: var(--page-font-mono); font-size: 0.88em; background: var(--page-code-bg); color: var(--page-code-ink); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
+  article[data-page] pre[data-lang] { white-space: pre; overflow-wrap: normal; }
+  article[data-page] pre code { display: block; overflow-x: auto; background: none; padding: 0; font-size: inherit; }
+  article[data-page] .page-callout { background: var(--page-callout-bg); border: 1px solid var(--page-callout-line); border-radius: 8px; padding: 10px 14px; }
+  article[data-page] hr { border: 0; border-top: 1px solid var(--page-rule); margin-block: 1.2em; }
+  article[data-page] ul, article[data-page] ol { padding-inline-start: var(--page-indent); }
+  article[data-page] li { padding-inline-start: 0; }
+  article[data-page] li::marker { color: var(--page-marker); }
+  article[data-page] li:has(> input[type="checkbox"]) { list-style: none; }
+  article[data-page] li > input[type="checkbox"] { appearance: none; width: var(--page-check-size); height: var(--page-check-size); margin: 0 calc(var(--page-indent) - var(--page-check-size)) 0 0; vertical-align: -0.12em; border: 1px solid var(--page-check-border); border-radius: var(--page-check-radius); }
+  article[data-page] li > input[type="checkbox"]:checked { background: var(--page-check-fill); border-color: var(--page-check-fill); }
+  article[data-page] li > input[type="checkbox"]:checked::after { content: ""; display: block; width: 100%; height: 100%; background: var(--page-check-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.9 2.9 5.5-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.9 2.9 5.5-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
+  article[data-page] li:has(> input[type="checkbox"]:checked) { color: var(--page-done-ink); text-decoration: line-through; }
+  article[data-page] details { padding-inline-start: var(--page-indent); }
+  article[data-page] summary { color: var(--page-toggle-ink); cursor: pointer; }
+  article[data-page] figure { max-width: var(--page-measure); }
+  article[data-page] figure img, article[data-page] figure svg { display: block; max-width: 100%; height: auto; }
+  article[data-page] figcaption { color: var(--page-ink-soft); font-size: 0.88em; text-align: center; }
+  article[data-page] [data-type="file"] { padding: 8px 12px; border: 1px solid var(--page-rule); border-radius: 8px; }
+  article[data-page] table { width: 100%; border-collapse: collapse; border: 1px solid var(--page-rule); border-radius: 8px; }
+  article[data-page] th, article[data-page] td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
+  article[data-page] th { background: var(--page-code-bg); color: var(--page-ink-soft); font-weight: 600; }
+  article[data-page] th[data-kind="number"], article[data-page] td[data-kind="number"] { text-align: end; }
+  article[data-page] blockquote { color: var(--page-ink-soft); border-inline-start: 1px solid var(--page-rule); padding-inline-start: var(--page-indent); }
+}
+
 
-@import url("./content.css");
 
 :where(article[data-page], .page-shell) {
   --chart-1: #2F5E9E;