@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/todos/kit.js

@@ -0,0 +1,342 @@
+// gallery/todos (我的待办): the to-dos of the workspace's documents (each item of a to-do list, ul.doc-todo),
+// those not done yet, read through context.workspace.query("todos") (its manifest's needs hold
+// "workspace"), grouped by document, the one edited last first, each group's items in its document's
+// order, each with the headings it stands under. Its box checks the item in its document
+// (context.workspace.setTodo: the server writes that document as the reader's edit, and the home page's
+// undo checks it back), drawn checked at once, put back with a line saying why where the write is refused
+// (the item changed meanwhile, several items alike, one the document's own page cannot check, the document
+// being written, no server); an item checked here stays in the list, struck through, until the page is shown
+// again, so that a slip is undone where it was made, and its group stays where it is (the document the box
+// wrote is the one edited last, which the facts would put first: once a box is checked here the groups keep
+// the order they were drawn in, a document new to the card first). A click on an item's words opens its
+// document there, at the item's block where it has an id, else at the document (context.workspace.open:
+// the workbench goes there); a click on a group's title opens the document. It reads again whenever the workspace says its to-dos changed (the `data` signal, "todos":
+// a to-do added, checked or taken out in any document, a document renamed or gone) and when its settings
+// do (`source`). Its two settings, the card's form (the grip at its top right › 设置…), are kept in its data part `settings`,
+// which the board writes and this block only reads: `document` (a document's slug: its to-dos alone) and
+// `done` (the done ones too, checked and struck through). Where the workspace cannot be read (an exported
+// file, where it has no server; a server that does not answer) it says so in a line; where nothing writes
+// it (an exported file: no setTodo) its boxes are only drawn. The words are the page's language (the UI's
+// where Gallery says it, else the page's lang). Its head is the cards' (the kit's card tokens): the chip,
+// a checked list, before its title, how many to-dos there are its quiet note at the end (共 6 项); under it,
+// where there are any, how many are done of all (of the document asked, or of every one): a ring of the
+// share done, its percent in the middle, and a key of the two counts. An item's headings are said after it
+// but for the document's own title (its first heading, as often), which the group's title above says. The
+// face says by `data-state` what it shows: items, every one done (the ring then its picture in the middle
+// of the room, 待办都完成了 under it, no key) or none.
+
+const WORDS = {
+  zh: {
+    title: "我的待办",
+    empty: "所有文档里的待办会出现在这里",
+    allDone: "待办都完成了",
+    noneIn: "这篇文档里没有待办",
+    offline: "在 Gallery 里打开时，这里列出所有文档里的待办",
+    failed: "读不到工作区的待办",
+    open: (/** @type {string} */ title) => `打开「${title}」`,
+    path: (/** @type {string[]} */ path) => path.join(" › "),
+    check: "标记为完成",
+    uncheck: "标记为未完成",
+    done: "已完成",
+    left: "未完成",
+    share: (/** @type {number} */ done, /** @type {number} */ all) => `${all} 项待办完成了 ${done} 项`,
+    all: (/** @type {number} */ count) => `共 ${count} 项`,
+    refused: {
+      changed: "这一项刚被改过，已重新读取",
+      ambiguous: "文档里有几项一样的待办，请在文档里勾选",
+      locked: "这一项在文档里是只读的，不能勾选",
+      busy: "文档正在被修改，请稍后再勾选",
+      offline: "在 Gallery 里打开时才能勾选",
+      missing: "找不到这篇文档",
+      failed: "没能勾选这一项",
+    },
+  },
+  en: {
+    title: "My to-dos",
+    empty: "The to-dos of every document will show here",
+    allDone: "Every to-do is done",
+    noneIn: "This document has no to-dos",
+    offline: "Opened in Gallery, this lists the to-dos of every document",
+    failed: "The workspace's to-dos could not be read",
+    open: (/** @type {string} */ title) => `Open “${title}”`,
+    path: (/** @type {string[]} */ path) => path.join(" › "),
+    check: "Mark as done",
+    uncheck: "Mark as not done",
+    done: "Done",
+    left: "Open",
+    share: (/** @type {number} */ done, /** @type {number} */ all) => `${done} of ${all} to-dos done`,
+    all: (/** @type {number} */ count) => `${count} in all`,
+    refused: {
+      changed: "This to-do just changed: read again",
+      ambiguous: "The document has several to-dos alike: check it in the document",
+      locked: "This to-do is read-only in its document: it cannot be checked",
+      busy: "The document is being written: try again in a moment",
+      offline: "Open it in Gallery to check it",
+      missing: "The document is not there",
+      failed: "The to-do could not be checked",
+    },
+  },
+};
+
+/** How long a line saying why a check was refused stays, in ms. */
+const SAID_FOR = 4000;
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/**
+ * What the card's settings ask (context.readJSON's, {} where none is set yet): { document, done }, the
+ * slug of the one document to read (null: every one) and whether the done ones show too.
+ * @param {any} settings
+ */
+function askedOf(settings) {
+  const table = settings !== null && typeof settings === "object" && !Array.isArray(settings) ? settings : {};
+  return { document: typeof table.document === "string" && table.document ? table.document : null, done: table.done === true };
+}
+
+/** @typedef {{ ref: DocTodoRef, text: string, done: boolean, slug: string, title: string, path: string[] }} Todo */
+
+/**
+ * An item by its document, its headings and its words: what names it while the card lives, whether it has
+ * an id yet or not (its check gives it one).
+ * @param {Todo} todo
+ */
+const itemKey = (todo) => JSON.stringify([todo.slug, todo.path, todo.text]);
+
+/**
+ * The to-dos (workspace.query("todos")'s data) as the card shows them, of `asked`: { groups, open,
+ * all }, groups [{ slug, title, items }] in the order the documents come (the one edited last first),
+ * items those shown (not done, or all with `asked.done`, and the ones checked on this card: `kept`);
+ * `open` how many are not done, `all` how many there are of the document asked or of the workspace.
+ * `order` (the slugs as drawn before, or null): the groups keep that order, a document not in it before them.
+ * @param {Todo[]} todos
+ * @param {{ document: string | null, done: boolean }} asked
+ * @param {Set<string>} kept
+ * @param {string[] | null} [order]
+ */
+function groupsOf(todos, asked, kept, order = null) {
+  const mine = todos.filter((todo) => asked.document === null || todo.slug === asked.document);
+  /** @type {Map<string, { slug: string, title: string, items: Todo[] }>} */
+  const groups = new Map();
+  for (const todo of mine) {
+    if (todo.done && !asked.done && !kept.has(itemKey(todo))) continue;
+    if (!groups.has(todo.slug)) groups.set(todo.slug, { slug: todo.slug, title: todo.title, items: [] });
+    groups.get(todo.slug)?.items.push(todo);
+  }
+  const placed = [...groups.values()];
+  if (order) placed.sort((a, b) => order.indexOf(a.slug) - order.indexOf(b.slug)); // stable: those not in it keep the order they came in
+  return { groups: placed, open: mine.filter((todo) => !todo.done).length, all: mine.length };
+}
+
+/**
+ * The line the card says where it shows no item, or null where it shows some: none in the workspace,
+ * none in the one document asked, all done.
+ * @param {{ groups: unknown[], all: number }} shown
+ * @param {{ document: string | null }} asked
+ * @param {"zh" | "en"} language
+ */
+function emptyLine(shown, asked, language) {
+  if (shown.groups.length > 0) return null;
+  const words = WORDS[language];
+  if (shown.all > 0) return words.allDone;
+  return asked.document === null ? words.empty : words.noneIn;
+}
+
+/**
+ * An element of the face, of `kind` (its class).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-todos-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/todos",
+  on: ["source", "data"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const head = made("div", "head");
+    const count = made("span", "count");
+    const chip = made("span", "chip");
+    chip.setAttribute("aria-hidden", "true");
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9"/></svg>';
+    head.append(chip, made("span", "title", words.title), count);
+    // How many are done of all: a ring of the share done (the good green once all are) and a key of the two counts.
+    const summary = made("div", "summary");
+    summary.hidden = true;
+    summary.setAttribute("role", "img");
+    const ring = made("span", "ring");
+    ring.innerHTML = '<svg viewBox="0 0 100 100" aria-hidden="true"><circle class="gallery-todos-track" cx="50" cy="50" r="42"/><circle class="gallery-todos-arc" cx="50" cy="50" r="42" pathLength="100" transform="rotate(-90 50 50)"/></svg>';
+    const percent = made("span", "percent");
+    ring.append(percent);
+    const key = made("dl", "key");
+    const doneCount = made("dd", "key-count");
+    const leftCount = made("dd", "key-count");
+    const doneRow = made("div", "key-row");
+    doneRow.dataset.kind = "done";
+    doneRow.append(made("dt", "key-name", words.done), doneCount);
+    const leftRow = made("div", "key-row");
+    leftRow.dataset.kind = "left";
+    leftRow.append(made("dt", "key-name", words.left), leftCount);
+    key.append(doneRow, leftRow);
+    summary.append(ring, key);
+    const list = made("div", "list");
+    const line = made("p", "line");
+    const note = made("p", "note");
+    note.hidden = true;
+    note.setAttribute("role", "status");
+    face.append(head, summary, list, line, note);
+    host.append(face);
+    const workspace = context.workspace;
+    if (!workspace) return void context.fail(new Error("its manifest's needs hold \"workspace\": context.workspace is not there"));
+    const open = (/** @type {{ slug: string, block?: string | null }} */ target) => workspace.open(target);
+    const setTodo = workspace.setTodo;
+    const kept = new Set(); // the items checked on this card, shown until the page is shown again
+    /** @type {Todo[] | null} */
+    let last = null; // what was read last, as drawn (a check drawn into it at once)
+    /** @type {{ document: string | null, done: boolean }} */
+    let lastAsked = { document: null, done: false };
+    /** @type {string[]} */
+    let order = []; // the documents of the groups as drawn
+    /** @type {string[] | null} */
+    let held = null; // that order as it was when the first box was checked here: the groups keep it from then on
+
+    const say = (/** @type {string | null} */ words) => {
+      line.hidden = words === null;
+      line.textContent = words ?? "";
+    };
+    let noteTimer = 0;
+    const tell = (/** @type {string} */ words) => {
+      note.textContent = words;
+      note.hidden = false;
+      clearTimeout(noteTimer);
+      noteTimer = context.timeout(() => { note.hidden = true; }, SAID_FOR);
+    };
+
+    // An item's box checked or cleared: drawn so at once, then written in its document; a refusal puts it
+    // back, says why and reads again.
+    const check = (/** @type {Todo} */ todo) => {
+      if (!setTodo || !last) return;
+      const done = !todo.done;
+      const drawn = { ...todo, done };
+      kept.add(itemKey(todo));
+      held ??= order;
+      last = last.map((one) => (one === todo ? drawn : one));
+      draw();
+      setTodo(todo.ref, done).catch((/** @type {any} */ error) => {
+        if (context.signal.aborted) return;
+        if (last?.includes(drawn)) {
+          last = last.map((one) => (one === drawn ? todo : one));
+          draw();
+        }
+        const refused = /** @type {Record<string, string>} */ (words.refused);
+        tell(refused[error?.code] ?? refused.failed);
+        read();
+      });
+    };
+
+    // The list drawn anew of what was read, scrolled where it was.
+    const draw = () => {
+      if (!last) return;
+      const asked = lastAsked;
+      const shown = groupsOf(last, asked, kept, held);
+      order = shown.groups.map((group) => group.slug);
+      const top = list.scrollTop;
+      count.textContent = shown.all > 0 ? words.all(shown.all) : "";
+      // The summary of all the to-dos asked (of one document, or of every one), none where there are none.
+      const done = shown.all - shown.open;
+      summary.hidden = shown.all === 0;
+      summary.toggleAttribute("data-all", shown.all > 0 && done === shown.all);
+      summary.style.setProperty("--gallery-todos-share", String(shown.all > 0 ? done / shown.all : 0));
+      summary.setAttribute("aria-label", words.share(done, shown.all));
+      if (shown.all > 0) percent.replaceChildren(String(Math.floor((100 * done) / shown.all)), made("span", "percent-sign", "%"));
+      else percent.replaceChildren();
+      doneCount.textContent = String(done);
+      leftCount.textContent = String(shown.open);
+      face.dataset.state = shown.groups.length > 0 ? "items" : shown.all > 0 ? "done" : "none";
+      list.replaceChildren(...shown.groups.map((group) => {
+        const section = made("section", "group");
+        const title = made("button", "doc", group.title);
+        title.type = "button";
+        title.title = words.open(group.title);
+        title.addEventListener("click", () => open({ slug: group.slug }));
+        const items = made("ul", "items");
+        for (const todo of group.items) {
+          const item = made("li", "item");
+          const button = made("button", "todo");
+          button.type = "button";
+          if (todo.done) {
+            button.classList.add("gallery-todos-done");
+            item.classList.add("gallery-todos-done");
+          }
+          button.title = words.open(group.title);
+          const text = made("span", "text", todo.text);
+          if (setTodo) {
+            const box = made("button", "check");
+            box.type = "button";
+            box.setAttribute("role", "checkbox");
+            box.setAttribute("aria-checked", String(todo.done));
+            box.title = todo.done ? words.uncheck : words.check;
+            box.setAttribute("aria-label", `${todo.done ? words.uncheck : words.check}: ${todo.text}`);
+            box.append(made("span", "box"));
+            box.addEventListener("click", (event) => {
+              event.stopPropagation();
+              check(todo);
+            });
+            item.append(box);
+            button.append(text);
+          } else button.append(made("span", "box"), text);
+          // Its headings, but for the document's title the group's title above says (its first heading, as often).
+          const path = todo.path[0] === group.title ? todo.path.slice(1) : todo.path;
+          if (path.length > 0) button.append(made("span", "path", words.path(path)));
+          button.addEventListener("click", () => open({ slug: todo.ref.slug, block: todo.ref.block }));
+          item.append(button);
+          items.append(item);
+        }
+        section.append(title, items);
+        return section;
+      }));
+      list.scrollTop = top;
+      say(emptyLine(shown, asked, language));
+    };
+
+    let asking = 0; // the last read asked: an older answer that comes after it is dropped
+    const read = () => {
+      const settings = context.readJSON("settings");
+      if (settings === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      const asked = askedOf(settings);
+      const ticket = ++asking;
+      workspace.query("todos", { limit: 1000, ...(asked.document ? { slugs: [asked.document] } : {}) }).then(({ data }) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        last = data;
+        lastAsked = asked;
+        draw();
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        last = null;
+        count.textContent = "";
+        summary.hidden = true;
+        face.dataset.state = "none";
+        list.replaceChildren();
+        say(error?.code === "offline" ? words.offline : words.failed);
+      });
+    };
+    read();
+    return {
+      update(reason, detail) {
+        if (reason === "source" || (reason === "data" && detail === "todos")) read();
+      },
+    };
+  },
+});

package/packs/gallery/todos/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9"/></g><rect x="50" y="28" width="40" height="6" rx="3" fill="#3b3a37"/><rect x="186" y="28.5" width="24" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="40" cy="55" r="8.5" fill="none" stroke="#ecebe8" stroke-width="3.2"/><circle cx="40" cy="55" r="8.5" fill="none" stroke="#2e7cd1" stroke-width="3.2" stroke-linecap="round" stroke-dasharray="32.0 53.4" transform="rotate(-90 40 55)"/><circle cx="59" cy="50.5" r="2" fill="#2e7cd1"/><rect x="64" y="48.5" width="20" height="4" rx="2" fill="#c4c2bd"/><rect x="98" y="48.5" width="7" height="4" rx="2" fill="#3b3a37"/><circle cx="59" cy="59.5" r="2" fill="#ecebe8"/><rect x="64" y="57.5" width="20" height="4" rx="2" fill="#c4c2bd"/><rect x="98" y="57.5" width="7" height="4" rx="2" fill="#3b3a37"/><rect x="30" y="70" width="180" height="1" fill="#efeeec"/><rect x="30" y="76" width="10" height="10" rx="3" fill="#2e7cd1"/><path d="M32.12 81.18l1.98 1.98 3.96-4.14" fill="none" stroke="#fff" stroke-width="1.44" stroke-linecap="round" stroke-linejoin="round"/><rect x="47" y="78.5" width="92" height="5" rx="2.5" fill="#c4c2bd"/><rect x="144" y="78.5" width="16" height="5" rx="2.5" fill="#e9e8e5"/><rect x="30.75" y="91.75" width="8.5" height="8.5" rx="2.6" fill="none" stroke="#a9a7a2" stroke-width="1.3"/><rect x="47" y="93.5" width="70" height="5" rx="2.5" fill="#3b3a37"/><rect x="122" y="93.5" width="16" height="5" rx="2.5" fill="#e9e8e5"/></svg>

package/packs/gallery/todos/style.css

@@ -0,0 +1,267 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. The face fills its card on a custom page (the board draws the frame), in
+   the kit's card tokens: its head (the chip, the title, how many there are its quiet note at the end,
+   clear of the card's grip), the summary of how many are done (where there are any: a ring of the share,
+   56px, 88px on a card 280px high and more, as large whatever it shows, its percent in the middle, the
+   sign small and muted, a key of the two counts beside it), then the documents' to-dos, which scroll inside the card, each
+   document's title small and muted over its items, an item a rounded box (checked, it fills with the
+   accent), its words and the headings it stands under, muted. A row a press away from its document (a
+   hover fill, as a row of the sidebar has). A wide card (8 cells) sets the documents in two columns.
+   Every one done, the summary's ring (no key) is the card's empty face, in the middle of the room under the
+   head, the line under it; none at all, the cards' empty face (a picture in a soft disc over a muted line).
+   Light and dark. */
+[data-doc-component="gallery/todos"] {
+  container-type: size;
+  --gallery-todos-ring: 56px;
+  --gallery-todos-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  > .gallery-todos-face {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-face-gap);
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+    font-size: 14px;
+    line-height: 1.45;
+  }
+  > .gallery-todos-face > .gallery-todos-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-accent-soft);
+    color: var(--gallery-accent);
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--gallery-text-strong);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-count {
+    flex: none;
+    margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out;
+    font-size: var(--gallery-meta-size);
+    color: var(--doc-muted);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-count:empty { display: none; }
+  /* How many are done of all, under the head: a ring of the share done in the accent (the good green
+     once all are), the share in its middle, and a key of the two counts beside it, each a dot of its
+     color, its name muted and its count at the end; a hairline under it where the list follows. */
+  > .gallery-todos-face > .gallery-todos-summary {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex: none;
+    min-width: 0;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--doc-grid);
+  }
+  > .gallery-todos-face > .gallery-todos-summary[hidden] { display: none; }
+  /* All done: the summary the card's empty face, the ring (as large as ever) in the middle of the room
+     under the head, the line (待办都完成了) under it, no key, no picture of its own. */
+  > .gallery-todos-face[data-state="done"] > .gallery-todos-summary { flex-direction: column; gap: 10px; margin-top: auto; padding-bottom: 0; border-bottom: 0; }
+  > .gallery-todos-face[data-state="done"] > .gallery-todos-summary > .gallery-todos-key { display: none; }
+  > .gallery-todos-face[data-state="done"] > .gallery-todos-list { display: none; }
+  > .gallery-todos-face[data-state="done"] > .gallery-todos-line { flex: none; margin-bottom: auto; padding-top: 0; }
+  > .gallery-todos-face[data-state="done"] > .gallery-todos-line::before { display: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring {
+    position: relative;
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gallery-todos-ring);
+    height: var(--gallery-todos-ring);
+  }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > circle { fill: none; stroke-width: 10; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-track { stroke: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-arc {
+    stroke: var(--gallery-accent);
+    stroke-linecap: round;
+    stroke-dasharray: calc(var(--gallery-todos-share, 0) * 100) 100;
+  }
+  > .gallery-todos-face > .gallery-todos-summary[data-all] > .gallery-todos-ring > svg > .gallery-todos-arc { stroke: var(--gallery-good); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent {
+    position: relative;
+    font-size: calc(var(--gallery-todos-ring) * .27);
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+  }
+  /* The percent sign small and muted, as every number's unit. */
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent > .gallery-todos-percent-sign { margin-inline-start: .08em; font-size: .55em; font-weight: 500; letter-spacing: 0; color: var(--doc-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 160px;
+    margin: 0;
+  }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-summary[data-all] > .gallery-todos-key > .gallery-todos-key-row[data-kind="done"]::before { background: var(--gallery-good); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row[data-kind="left"]::before { background: var(--gallery-track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--doc-muted) 35%, transparent); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > .gallery-todos-key-name { flex: 1 1 auto; min-width: 0; color: var(--doc-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > .gallery-todos-key-count { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
+  > .gallery-todos-face > .gallery-todos-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    margin: -2px -6px 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group + .gallery-todos-group { margin-top: 10px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > button,
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > button {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > button:hover,
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > button:hover { background: var(--doc-hover); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-doc {
+    padding: 2px 6px;
+    font-size: var(--gallery-meta-size);
+    font-weight: 500;
+    color: var(--doc-muted);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items { margin: 0; padding: 0; list-style: none; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo {
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 8px;
+    padding: 4px 6px 4px 30px;
+    position: relative;
+  }
+  /* The box: a rounded square of the muted color's line, filled with the accent and ticked once done. */
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-box,
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check > .gallery-todos-box {
+    position: absolute;
+    top: calc(4px + .725em - 8px);
+    left: 7px;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid color-mix(in srgb, var(--doc-muted) 70%, transparent);
+    border-radius: 5px;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-text { min-width: 0; overflow-wrap: anywhere; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-path {
+    min-width: 0;
+    font-size: var(--gallery-meta-size);
+    color: var(--doc-muted);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo.gallery-todos-done > .gallery-todos-text { color: var(--doc-muted); text-decoration: line-through; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo.gallery-todos-done > .gallery-todos-box,
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check[aria-checked="true"] > .gallery-todos-box {
+    border-color: transparent;
+    background: var(--gallery-accent) var(--gallery-todos-tick) center / 12px no-repeat;
+  }
+  /* The box as a button of its own (where the workspace takes checks: setTodo), over the item's start: a
+     press checks it in its document, the words beside it still open the document. */
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item { position: relative; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: calc(8px + 1.45em);
+    padding: 0;
+    border-radius: 6px 0 0 6px;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check:hover { background: transparent; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check:hover > .gallery-todos-box { border-color: var(--doc-muted); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check[aria-checked="true"]:hover > .gallery-todos-box { border-color: transparent; }
+  /* Why a check was refused, for a few seconds, under the list. */
+  > .gallery-todos-face > .gallery-todos-note { flex: none; margin: 0; font-size: var(--gallery-meta-size); color: var(--gallery-bad); }
+  > .gallery-todos-face > .gallery-todos-note[hidden] { display: none; }
+  /* What it says where it lists nothing: in the middle of what the card has left, muted, a quiet
+     picture over it in a soft disc (the cards' empty face), a check in the good green's once all are done. */
+  > .gallery-todos-face > .gallery-todos-line {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 0;
+    padding: 8px 12px;
+    font-size: 13px;
+    color: var(--doc-muted);
+    text-align: center;
+  }
+  > .gallery-todos-face > .gallery-todos-line::before {
+    content: "";
+    flex: none;
+    width: 44px;
+    height: 44px;
+    margin-bottom: 2px;
+    background: currentColor;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-todos-face[data-state="done"] > .gallery-todos-line::before {
+    background: var(--gallery-good);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/g%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/g%3E%3C/svg%3E");
+  }
+  > .gallery-todos-face > .gallery-todos-line[hidden] { display: none; }
+}
+/* A tall card (280px high and more: 4 high from a window 1440px wide): the ring larger, the key beside it. */
+@container (min-height: 280px) {
+  [data-doc-component="gallery/todos"] > .gallery-todos-face { --gallery-todos-ring: 88px; }
+  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-summary { gap: 20px; }
+  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key { max-width: 200px; gap: 6px; }
+  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row { font-size: 14px; }
+}
+/* A wide card (8 cells): the documents side by side, two to a row, the list still scrolling down. */
+@container (min-width: 560px) {
+  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px 24px; }
+  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group + .gallery-todos-group { margin-top: 0; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding. Where no
+   card is around it (a document, as gallery block check shows it) it is a few items high. */
+[data-doc-component="gallery/todos"] { height: 16em; }
+.gallery-card > [data-doc-component="gallery/todos"] { height: 100%; }

package/packs/gallery/todos/template.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/todos">
+  <script type="application/json">{}</script>
+</div>

package/packs/gallery/todos/writing.md

@@ -0,0 +1,30 @@
+# 我的待办 (gallery/todos)
+
+A card for a custom page (its places are `page`, its needs `workspace`): the to-dos of every document of the workspace that are not done yet, an item of a to-do list each (`<ul class="doc-todo">`), grouped by document, the one edited last first, each with the headings it stands under. Use it on the home page, or on a page about the user's work.
+
+## Settings
+
+Its two settings are the card's form, which the user opens from the grip at the card's top right › 设置…:
+
+| Key | Label | Type | What it is |
+| --- | --- | --- | --- |
+| `document` | 只看这篇文档 | document | a document's slug: its to-dos alone; left out, every document's |
+| `done` | 也显示已完成的 | switch | the done ones too, checked and struck through |
+
+They are kept in its data part `settings`, a `<script type="application/json">`: `{}` (template.html, what a menu adds) shows the open to-dos of every document. Write `document` when the user asks for one document's to-dos. The block reads them and writes nothing.
+
+## How to write it
+
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add todos`, the instance as template.html has it. Sizes: 4 × 4 (the default), 4 × 6 and 8 × 4; the list scrolls inside the card.
+
+## What the user does
+
+- clicks an item's box: the item is checked (or cleared) in its document, which Gallery writes as the user's own edit; the home page's undo (Ctrl+Z) checks it back. An item checked on the card stays there, struck through, until the page is shown again. Where the item changed meanwhile (its words), the card says so and reads again;
+- clicks an item's words: its document opens, at the item where it has a block id;
+- clicks a document's title: the document opens.
+
+The card follows by itself: a to-do added, checked or taken out in any document shows at once.
+
+## How it looks
+
+我的待办 beside a checked list's chip on the top line, how many to-dos there are at its end (共 6 项); under it how many are done of all, a ring of the share done (larger on a tall card) and the two counts; then each document's title small and muted over its items, an item a rounded box (filled with the accent once checked), its words and the headings it stands under (but the document's title, which its group's says); on an 8 × 4 card the documents two to a row; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark. With every to-do done, the ring stands in the middle (green at 100%) over 待办都完成了; with no to-do it says 所有文档里的待办会出现在这里. In an exported file, which has no workspace to read, it says the list shows when the page is opened in Gallery; its boxes there are drawn and do nothing. The script runs with the rights of the page's own scripts, as any block's does.