@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery-soft/static/style.css

@@ -0,0 +1,186 @@
+/* 柔光风格's static card has no script: what its content holds, any HTML, is what a reader sees. Its content
+   (the instance's one div) is the card's face: on a custom page it is taken out over the card's padding and
+   given the soft frame's, by the card's size (the instance is a container of it: 16px at the sides of a card
+   one cell high, its line in the middle; 18px on a 2 × 2 card; 24px on one 3 cells high or more; else 20px),
+   with a faint wash of the accent from the card's top over whatever fill the card has (the board's, or one
+   the page gives it). It gives the HTML the soft cards' reading look: a heading it starts with, where more
+   follows, is drawn as the cards' head row (a chip of lines in the accent's soft tint, the title; small words
+   in it its quiet meta at the end); a list a dot an item, an item that is one link a row like the sidebar's
+   (a small square with a link's picture before it, small words in it at its end), a paragraph that is one
+   link the accent's with an arrow out after it; a table of hairlines, its first column words and the others
+   numbers at the right; on a 2 × 2 card what follows the heading at the bottom; on a card one cell high its
+   line in the middle, a link there after a chip of a page and before an arrow out, a first small span (an
+   emoji) on a chip. Each rule weighs nothing (:where()), so that the page's own <style> and an inline style
+   win. Its colors are a share of the color it stands in (currentColor), but the chips', the links' and the
+   wash's, so that the page may color a card. The grip's corner: the first thing in it keeps its end clear.
+   Nothing in it: the cards' empty face. Every selector stands in the instance. */
+[data-doc-component="gallery-soft/static"] {
+  --soft-font: "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  --soft-num: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-accent-ink: light-dark(#356cb3, #98bee9);
+  --soft-accent-soft: light-dark(#ecf3fb, rgb(126 173 226 / 14%));
+  --soft-wash: linear-gradient(180deg, light-dark(rgb(62 122 198 / 6%), rgb(126 173 226 / 7%)) 0%, transparent 52%);
+  --soft-pad: 20px;
+  --soft-grip-room: 0px;
+  --soft-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h8.5'/%3E%3C/svg%3E");
+  --soft-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
+  --soft-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.8L18 7.7V20.5H7z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E");
+  --soft-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16.5 7.5'/%3E%3Cpath d='M9.5 7.5h7v7'/%3E%3C/svg%3E");
+  > div {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    font: 13.5px/1.5 var(--soft-font);
+    overflow-wrap: break-word;
+    text-wrap: pretty;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+/* On a custom page: the content over the card's whole room, its padding the soft frame's by the card's size
+   (the board's line takes the first pixel of it). (:first-child: the board's rule that takes the outer margins
+   off an instance's first and last child weighs as much as a class more.) */
+.gallery-card > [data-doc-component="gallery-soft/static"] { height: 100%; container-type: size; }
+.gallery-card > [data-doc-component="gallery-soft/static"] > div:first-child {
+  --soft-grip-room: max(0px, calc(40px - var(--soft-pad)));
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  padding: calc(var(--soft-pad) - 1px);
+  overflow: hidden;
+  border-radius: calc(var(--gallery-card-radius) - 1px);
+  background: var(--soft-wash);
+}
+@container (min-height: 141px) {
+  .gallery-card > [data-doc-component="gallery-soft/static"] > div:first-child { --soft-pad: 24px; }
+}
+@container (min-height: 61px) and (max-height: 140px) and (max-width: 140px) {
+  .gallery-card > [data-doc-component="gallery-soft/static"] > div:first-child { --soft-pad: 18px; }
+}
+@container (max-height: 60px) {
+  .gallery-card > [data-doc-component="gallery-soft/static"] > div:first-child { --soft-pad: 16px; padding-block: 0; justify-content: center; }
+}
+/* Its HTML's look. In the instance's scope, each rule as light as its elements (a page's own rule of a class wins
+   over it, and it wins over the kit's rules of an element alone, by the scope's nearness). */
+@scope ([data-doc-component="gallery-soft/static"]) {
+  :where(:scope > div > *) { flex: none; margin: 0; }
+  :where(:scope > div > :first-child) { padding-inline-end: var(--soft-grip-room); }
+  h1, h2, h3, h4, h5, h6 { margin: 10px 0 4px; font-size: 15px; line-height: 1.4; font-weight: 600; }
+  :is(p, ul, ol, dl, blockquote, table, figure, pre) + :is(p, ul, ol, dl, blockquote, table, figure, pre) { margin-top: 8px; }
+  a { color: var(--soft-accent-ink); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  small { font-size: 12px; color: color-mix(in srgb, currentColor 62%, transparent); }
+  img, svg, video { max-width: 100%; align-self: flex-start; }
+  img, video { height: auto; }
+  code { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 6%, transparent); font-family: var(--doc-mono); font-size: .9em; }
+  blockquote { padding-inline-start: 12px; border-inline-start: 3px solid color-mix(in srgb, currentColor 18%, transparent); color: color-mix(in srgb, currentColor 65%, transparent); }
+  hr { margin: 10px 0; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); }
+  /* The heading it starts with, where more follows: the cards' head row, a chip of lines before it, small words in it its quiet meta at the end. */
+  :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 28px;
+    margin: 0;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+  :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child)::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--soft-accent-soft); }
+  :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 6px;
+    width: 16px;
+    height: 16px;
+    margin-top: -8px;
+    background: var(--soft-accent);
+    -webkit-mask: var(--soft-lines) center / contain no-repeat;
+    mask: var(--soft-lines) center / contain no-repeat;
+  }
+  :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child) > small { margin-left: auto; margin-inline-end: calc(-1 * var(--soft-grip-room)); font-weight: 400; white-space: nowrap; opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child) + * { margin-top: 10px; }
+  /* Its subtitle: a paragraph of small words alone under the head; what follows it a little apart. */
+  :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child + p:has(> small:only-child) { margin-top: 6px; }
+  p:has(> small:only-child) > small { font-size: 13px; }
+  p:has(> small:only-child) + * { margin-top: 10px; }
+  /* A list: a dot an item. */
+  ul { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
+  ul > li { display: flex; gap: 10px; align-items: baseline; }
+  ul > li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .38; transform: translateY(-2px); }
+  ol { padding-inline-start: 1.4em; }
+  /* An item that is one link: a row like the sidebar's, a link's picture on a soft square before it, its small words at its end. */
+  ul:has(> li > a:only-child) { gap: 0; }
+  ul > li:has(> a:only-child)::before { display: none; }
+  li > a:only-child { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 30px; margin: 0 -6px; padding: 0 6px; border-radius: 6px; color: inherit; }
+  li > a:only-child:hover { text-decoration: none; background: color-mix(in srgb, currentColor 6%, transparent); }
+  li > a:only-child::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; background: color-mix(in srgb, currentColor 7%, transparent); }
+  li > a:only-child::after { content: ""; position: absolute; top: 50%; left: 9px; width: 12px; height: 12px; margin-top: -6px; background: color-mix(in srgb, currentColor 55%, transparent); -webkit-mask: var(--soft-link) center / contain no-repeat; mask: var(--soft-link) center / contain no-repeat; }
+  /* one to a page of the workspace (no scheme: ../<slug>/doc.html, #…, /…) a page's picture */
+  li > a:only-child:not([href*=":"])::after { -webkit-mask-image: var(--soft-doc); mask-image: var(--soft-doc); }
+  li > a:only-child > small { margin-left: auto; font: 11.5px var(--soft-num); color: color-mix(in srgb, currentColor 45%, transparent); white-space: nowrap; }
+  /* A paragraph that is one link: the accent's, an arrow out after it; the last such at the card's bottom. */
+  p > a:only-child { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
+  p > a:only-child::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--soft-out) center / contain no-repeat; mask: var(--soft-out) center / contain no-repeat; }
+  :scope > div > p:last-child:not(:first-child):has(> a:only-child) { margin-top: auto; padding-top: 8px; }
+  /* A table: hairlines between the rows, its head small and muted, its columns after the first numbers at the right. */
+  table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  th { padding: 0 0 4px; text-align: left; font-size: 11.5px; font-weight: 500; color: color-mix(in srgb, currentColor 62%, transparent); }
+  td { padding: 3px 0; text-align: left; box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 7%, transparent); }
+  :is(th, td):not(:first-child) { text-align: right; font-family: var(--soft-num); }
+}
+/* A 2 × 2 card: what follows the heading at the bottom, the head and the rows a size smaller. */
+@container (min-height: 61px) and (max-height: 140px) and (max-width: 140px) {
+  @scope ([data-doc-component="gallery-soft/static"]) {
+    :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child) { gap: 8px; min-height: 24px; font-size: 13px; }
+    :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child)::before { width: 24px; height: 24px; border-radius: 7px; }
+    :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child)::after { left: 5px; width: 14px; height: 14px; margin-top: -7px; }
+    :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child) + * { margin-top: auto; }
+    li > a:only-child { gap: 8px; height: 26px; font-size: 13px; }
+  }
+}
+/* A card 2 cells high and wider than 2: a list of link rows a size closer (26px) and nearer the head, so that three rows fit above the padding. */
+@container (min-height: 61px) and (max-height: 140px) and (min-width: 141px) {
+  @scope ([data-doc-component="gallery-soft/static"]) {
+    :scope > div > :is(h1, h2, h3, h4, h5, h6):first-child:not(:last-child) + ul:has(> li > a:only-child) { margin-top: 4px; }
+    li > a:only-child { height: 26px; }
+  }
+}
+/* A card one cell high: its one line in the middle, a link after a chip of a page and before an arrow out, a first small span on a chip. */
+@container (max-height: 60px) {
+  @scope ([data-doc-component="gallery-soft/static"]) {
+    :scope > div > p { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
+    :scope > div > p > span:first-child { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--soft-accent-soft); font-size: 14px; }
+    :scope > div > p:has(> a:only-child)::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--soft-accent-soft); }
+    :scope > div > p > a:only-child { position: relative; display: flex; flex: 1; gap: 10px; min-width: 0; font-size: 13.5px; color: inherit; }
+    :scope > div > p > a:only-child::before { content: ""; position: absolute; top: 50%; left: -30px; width: 14px; height: 14px; margin-top: -7px; background: var(--soft-accent); -webkit-mask: var(--soft-doc) center / contain no-repeat; mask: var(--soft-doc) center / contain no-repeat; }
+    /* its arrow out at the card's end, in the grip's room, faded while the grip shows */
+    :scope > div > p > a:only-child::after { position: absolute; top: 50%; right: calc(-1 * var(--soft-grip-room)); width: 14px; height: 14px; margin-top: -7px; background: color-mix(in srgb, currentColor 40%, transparent); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  }
+}
+/* Nothing in it: the cards' empty face, in the middle of the card, a share of its color as all else of it: a
+   soft disc with lines in it (the instance's ::before, one mask, over the content), then a short line (还没有
+   内容) over what to do, muted (the content's ::before and ::after). */
+[data-doc-component="gallery-soft/static"]:has(> div:empty) { position: relative; }
+[data-doc-component="gallery-soft/static"]:has(> div:empty)::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: calc(50% - 48px);
+  left: calc(50% - 22px);
+  width: 44px;
+  height: 44px;
+  background: color-mix(in srgb, currentColor 55%, transparent);
+  -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='.13'/%3E%3Cg transform='translate(12 12) scale(.8333)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h8.5'/%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='.13'/%3E%3Cg transform='translate(12 12) scale(.8333)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h8.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+}
+[data-doc-component="gallery-soft/static"] > div:empty { align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding-top: 74px; text-align: center; }
+.gallery-card > [data-doc-component="gallery-soft/static"] > div:first-child:empty { min-height: 0; padding-top: 74px; }
+[data-doc-component="gallery-soft/static"] > div:empty::before { content: "还没有内容"; font-size: 13px; }
+[data-doc-component="gallery-soft/static"] > div:empty::after { content: "跟 Agent 说要在这里放什么"; font-size: 12px; color: color-mix(in srgb, currentColor 62%, transparent); }
+:root[data-ge-language="en"] [data-doc-component="gallery-soft/static"] > div:empty::before,
+:root:not([data-ge-language])[lang|="en" i] [data-doc-component="gallery-soft/static"] > div:empty::before { content: "Nothing here yet"; }
+:root[data-ge-language="en"] [data-doc-component="gallery-soft/static"] > div:empty::after,
+:root:not([data-ge-language])[lang|="en" i] [data-doc-component="gallery-soft/static"] > div:empty::after { content: "Tell your Agent what this card should show"; }

package/packs/gallery-soft/static/template.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery-soft/static"><div></div></div>

package/packs/gallery-soft/static/writing.md

@@ -0,0 +1,20 @@
+# 静态卡片 (gallery-soft/static)
+
+A card that shows any HTML you write, as it is: nothing on it changes in the page, and it has no script. Use it on a custom page for whatever only shows (a heading for a group of cards, links the user opens often, a short list, a picture, a table of a few rows); make a block of your own only where the card needs behavior or data that changes. Its places are `page` alone: a document already has a block for everything that only shows, and you write its HTML as it is there (writing-html.md), so no document's menu offers it.
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/static`, its settings, its data and what the user does on it the same, in the soft look of design A (a faint wash of blue from the card's top, rounded chips, big numbers). Write it only where the user asked for 柔光风格 or the page already holds its cards.
+
+## 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 gallery-soft/static`, and write the HTML in the instance's one `<div>`, as example.html does:
+
+- the content, the `div` right inside the instance (its part `content`, edited as `none`): any HTML, headings, paragraphs, lists, links, a table, a picture. No `<script>`, no form fields, no `on…` attributes: the card only shows.
+- a picture: a file of the page's `assets/` (`pages/<slug>/assets/`), written `assets/<file>` (a name of letters, digits, dots, dashes and underscores, right in that folder), which the server serves at `/pages/<slug>/assets/<file>`: put the file there first (`gallery page check` says a picture whose file is not there), and never `cover.png` alone, which nothing serves. A small SVG or PNG may be a `data:` address in the `<img>` itself.
+- the look: 柔光风格's (How it looks, below), each rule as light as the elements it names, so that a page's own `<style>` or a `style` attribute changes any of it. It sets no color but the links', the chips' and a faint wash of blue from the card's top: its words are the color they stand in, the page's text or the color your page gives the card (`.gallery-card[data-card-id="…"] { background: …; color: … }`) or a wrapper of the content (`style="color: …"`), every heading in it too, and its small words, list dots, quotes and lines a share of that color. Write colors of your own for both themes (`:root[data-doc-effective-theme="dark"]` on a custom page), a link's too where its fill is dark.
+- Size: any whole number of cells, 1 to 12 wide and 1 to 24 high, 4 × 2 by default (the 大小 menu lists 4 × 2, 2 × 2, 4 × 4, 8 × 2, 2 × 1 and 4 × 1): write `data-w` and `data-h` to fit what you wrote (`gallery page add <slug> gallery-soft/static --w <w> --h <h>` does too). The user changes it by dragging the card's lower right corner, or from the 大小 menu of the grip at the card's top right, which lists the common sizes. The card does not grow with what it holds: what does not fit scrolls inside it, so give it the height it needs.
+
+An empty one (`<div></div>`, what a menu adds) says that it has nothing yet (还没有内容, 跟 Agent 说要在这里放什么), so that the user asks you for it.
+
+## How it looks
+
+What you wrote, in 柔光风格's soft look: a heading it starts with, where more follows, is the card's head row (a chip of lines in the accent's soft tint and the title; small words in the heading, `<h3>十一月开销 <small>截至 11月12日</small></h3>`, its quiet meta at the end); a paragraph of small words alone right under it a muted subtitle; a list a dot an item; a list whose items are each one link, rows like the sidebar's (`<li><a href="…">Gallery 仓库 <small>github.com</small></a></li>`: a link's picture on a soft square before it, the small words at its end); a last paragraph that is one link, the accent's with an arrow out, at the card's bottom; a table of hairlines, its columns after the first numbers at the right; on a 2 × 2 card what follows the heading at the bottom; on a card one cell high its one line in the middle, a paragraph that is one link after a chip of a page and before an arrow out, a first `<span>` of it (an emoji: `<p><span>📌</span> 这周专心发版</p>`) on a chip. The user changes it only by asking you: to change it, write the HTML in `page.html` again, that card alone, its `data-card-id` and place kept.

package/packs/gallery-soft/stats/component.json

@@ -0,0 +1,13 @@
+{
+  "id": "gallery-soft/stats",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "工作区统计", "en": "Workspace numbers" },
+  "description": { "zh": "文档数、总字数、待办完成了几项、本周编辑了几篇，每个数下面一件小东西：字数的走势、本周每天的编辑", "en": "How many documents, words in all, to-dos done, documents edited this week, each with a small thing under it: the words' trend, this week's edits by day" },
+  "words": "gongzuoqutongji tongji shuzi stats statistics numbers count words 统计 工作区 字数 文档数 待办",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-soft-stats-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[8, 2], [12, 2], [4, 2], [4, 4]], "resize": true },
+  "needs": ["workspace"]
+}

package/packs/gallery-soft/stats/example.html

@@ -0,0 +1 @@
+<div data-doc-component="gallery-soft/stats"></div>

package/packs/gallery-soft/stats/kit.js

@@ -0,0 +1,341 @@
+// gallery-soft/stats (工作区统计, 柔光风格): Gallery 风格's gallery/stats in the soft look, the same numbers.
+// Four numbers of the workspace, read through context.workspace.query("stats") (its manifest's needs hold
+// "workspace"): its documents, the words of all its documents, its to-dos done of all, and the documents
+// edited this week (since Monday, 0:00); a workspace with none of them shows each 0. Under each number a small
+// thing of its own: the words a document holds on average; how the words grew over the last 30 days (a line,
+// its end ringed; a card 12 cells wide adds the words added this week in a green pill, against the last 14
+// days), from the workspace's record of edits (query("activity"), the words each day added); the share of
+// the to-dos done as a bar; and this week's edits day by day as small bars, today's in the accent, the days
+// to come a stub. It reads again whenever the workspace says they changed (the `data` signal, "stats" and
+// "activity": a document written, a to-do checked, a document made or gone) and as a day begins (the kit's
+// clock: a new week starts on a Monday). It holds no part and writes nothing: all it shows is drawn (the
+// manifest's `runtime`). Where the workspace cannot be read (an exported file, where it has no server; a
+// server that does not answer) each number is a dash and a line says why; where its record of edits cannot
+// be read the line and the bars are left out. The words are the page's language; a big number of words is
+// said short (12.6 万字, 126.5K words) as the language does.
+//
+// Its face, laid out by its card's size (`context.size`, read again on `layout`; data-w, data-h, data-pad): no
+// head of its own, each number's small chip and name the head of its cell. A card 8 or 12 cells wide and 2
+// high holds the four side by side, a hairline between them, each like a small card; a 4 × 4 card two by two;
+// a 4 × 2 card two by two, each its name over its number alone.
+
+const WORDS = {
+  zh: {
+    documents: "文档",
+    todos: "待办完成",
+    words: "总字数",
+    week: "本周编辑",
+    pieces: "篇",
+    wordsUnit: "字",
+    wordsBig: "万字",
+    average: (/** @type {string} */ count) => ["平均每篇", count, "字"],
+    added: "本周新增",
+    offline: "在 Gallery 里打开时显示",
+    failed: "读不到工作区的统计",
+    locale: "zh-CN",
+  },
+  en: {
+    documents: "Documents",
+    todos: "To-dos done",
+    words: "Words",
+    week: "Edited this week",
+    pieces: "",
+    wordsUnit: "words",
+    wordsBig: "words",
+    average: (/** @type {string} */ count) => ["", count, "words a document"],
+    added: "this week",
+    offline: "Shown when opened in Gallery",
+    failed: "The workspace's numbers could not be read",
+    locale: "en",
+  },
+};
+
+/** 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";
+}
+
+/**
+ * A count as the card writes it, in `language`: whole and grouped up to 99,999 (12,345), shorter past
+ * it (12.3万, 123.5K), as the language writes a big number.
+ * @param {number} value
+ * @param {"zh" | "en"} language
+ */
+function countOf(value, language) {
+  const big = Math.abs(value) >= 100_000;
+  return new Intl.NumberFormat(WORDS[language].locale, big ? { notation: "compact", maximumFractionDigits: 1 } : { maximumFractionDigits: 0 }).format(value);
+}
+
+/**
+ * The words of the workspace as the card's figure writes them, in `language`: { value, unit }, whole and
+ * grouped under 10,000 (8,420 字), in 万 past it in Chinese (12.6 万字) and short in English (126.5K words).
+ * @param {number} value
+ * @param {"zh" | "en"} language
+ */
+function wordsOf(value, language) {
+  const words = WORDS[language];
+  if (Math.abs(value) < 10_000) return { value: countOf(value, language), unit: words.wordsUnit };
+  if (language === "zh") return { value: (value / 10_000).toFixed(1).replace(/\.0$/, ""), unit: words.wordsBig };
+  return { value: new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(value), unit: words.wordsBig };
+}
+
+/**
+ * The four cells the card shows of `stats` (workspace.query("stats")'s data), or of none (null: a dash
+ * each), in `language`: [{ key, label, value, unit }].
+ * @param {{ documents: number, todos: { done: number, total: number }, words: number, editedThisWeek: number } | null} stats
+ * @param {"zh" | "en"} language
+ */
+function cellsOf(stats, language) {
+  const words = WORDS[language];
+  const dash = "—";
+  const written = stats ? wordsOf(stats.words, language) : { value: dash, unit: words.wordsBig };
+  return [
+    { key: "documents", label: words.documents, value: stats ? countOf(stats.documents, language) : dash, unit: words.pieces },
+    { key: "words", label: words.words, value: written.value, unit: written.unit },
+    { key: "todos", label: words.todos, value: stats ? countOf(stats.todos.done, language) : dash, unit: stats ? `/ ${countOf(stats.todos.total, language)}` : "" },
+    { key: "week", label: words.week, value: stats ? countOf(stats.editedThisWeek, language) : dash, unit: words.pieces },
+  ];
+}
+
+/** A local day as the record writes it, YYYY-MM-DD. @param {Date} date */
+const dayOf = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+
+/**
+ * What the record of edits (`days`, workspace.query("activity")'s data, the last first or last; any order)
+ * says the cells' feet draw, at `now`, the workspace's words now being `words`: `climb`, the words the
+ * workspace held at the end of each of those days, the oldest first (the words now, less what each later day
+ * added); `added`, the words this week added (since Monday); `week`, this week's edits day by day, Monday
+ * first, null for a day still to come.
+ * @param {Array<{ date: string, edits: number, words: number }>} days
+ * @param {number} words
+ * @param {Date} now
+ */
+function trendOf(days, words, now) {
+  const sorted = [...days].sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  const climb = new Array(sorted.length);
+  let held = words;
+  for (let index = sorted.length - 1; index >= 0; index--) {
+    climb[index] = held;
+    held -= sorted[index].words;
+  }
+  const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7), 12);
+  const byDay = new Map(sorted.map((day) => [day.date, day]));
+  const week = Array.from({ length: 7 }, (_, index) => {
+    const date = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + index, 12);
+    return dayOf(date) > dayOf(now) ? null : byDay.get(dayOf(date))?.edits ?? 0;
+  });
+  const added = sorted.filter((day) => day.date >= dayOf(monday) && day.date <= dayOf(now)).reduce((sum, day) => sum + day.words, 0);
+  return { climb, added, week };
+}
+
+/**
+ * How much of `all` is done, as a whole percent, as every soft card says it (the to-dos' ring, the stats'
+ * bar): rounded, but 100 only when all are done and 0 only when none is (18 of 27: 67; 199 of 200: 99;
+ * 1 of 300: 1).
+ * @param {number} done
+ * @param {number} all
+ */
+function percentDone(done, all) {
+  if (!(all > 0) || !(done > 0)) return 0;
+  if (done >= all) return 100;
+  return Math.min(99, Math.max(1, Math.round((100 * done) / all)));
+}
+
+/**
+ * The size the face is laid out by: its card's cells (`context.size`), or `fallback` (the manifest's first
+ * size) where no card is; and the frame's padding for it, as the soft cards pad theirs: "xs" on a card one
+ * cell high, "s" on a small one (2 × 2 and less), "l" on one 3 cells high or more, else "m".
+ * @param {DocComponentSize | null | undefined} size
+ * @param {[number, number]} fallback
+ */
+function sizeOf(size, fallback) {
+  const w = size?.w ?? fallback[0];
+  const h = size?.h ?? fallback[1];
+  return { w, h, pad: h === 1 ? "xs" : w <= 2 && h <= 2 ? "s" : h >= 3 ? "l" : "m" };
+}
+
+/**
+ * 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-soft-stats-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+const ICONS = {
+  documents: '<path d="M8.5 6.5h-2A1.5 1.5 0 0 0 5 8v11.5A1.5 1.5 0 0 0 6.5 21H15a1.5 1.5 0 0 0 1.5-1.5v-1"/><path d="M9 3h6.5L19.5 7v10a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 7.5 17V4.5A1.5 1.5 0 0 1 9 3z"/>',
+  words: '<path d="M6 6.5h12M12 6.5V19M9.5 19h5"/>',
+  todos: '<path d="M4 7l1.8 1.8L9.2 5.4"/><path d="M4 14.5l1.8 1.8 3.4-3.4"/><path d="M12.5 7.5H20M12.5 15H20"/>',
+  week: '<path d="M14.5 5.5l4 4L9 19H5v-4z"/>',
+};
+const line = (/** @type {string} */ paths, /** @type {number} */ width = 1.8) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${width}" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+
+let sparks = 0; // the sparklines drawn on the page, each gradient's id its own
+
+/**
+ * A line of `values`, `width` x `height` px, the room under it washed with the accent, its last point ringed.
+ * @param {number[]} values
+ * @param {number} width
+ * @param {number} height
+ */
+function sparkOf(values, width, height) {
+  const id = `gallery-soft-stats-spark-${++sparks}`;
+  const most = Math.max(...values);
+  const least = Math.min(...values);
+  const points = values.map((value, index) => [values.length > 1 ? (index / (values.length - 1)) * width : width, height - 2 - ((value - least) / (most - least || 1)) * (height - 5)]);
+  const path = points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
+  const [lastX, lastY] = points[points.length - 1];
+  const holder = made("span", "spark");
+  holder.innerHTML = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true"><defs><linearGradient id="${id}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" class="gallery-soft-stats-wash-top"/><stop offset="1" class="gallery-soft-stats-wash-end"/></linearGradient></defs><path d="${path} L${width} ${height} L0 ${height} Z" fill="url(#${id})"/><path class="gallery-soft-stats-spark-line" d="${path}"/><circle class="gallery-soft-stats-end" cx="${lastX.toFixed(1)}" cy="${lastY.toFixed(1)}" r="2.6"/></svg>`;
+  return holder;
+}
+
+DocKit.component({
+  id: "gallery-soft/stats",
+  on: ["data", "clock", "layout"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const grid = made("dl", "grid");
+    const note = made("p", "line");
+    note.hidden = true;
+    face.append(grid, 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"));
+    /** @type {Parameters<typeof cellsOf>[0]} */
+    let stats = null;
+    /** @type {Array<{ date: string, edits: number, words: number }> | null} */
+    let record = null;
+    let failure = "";
+    // The cells drawn anew: each its chip and name, its number and unit, and its foot as the card's size has room for.
+    const draw = () => {
+      const { w, h, pad } = sizeOf(context.size, [8, 2]);
+      const layout = h <= 2 && w >= 6 ? "row" : h <= 2 ? "compact" : "quad";
+      Object.assign(face.dataset, { w: String(w), h: String(h), pad, layout });
+      face.toggleAttribute("data-zero", stats !== null && stats.documents === 0 && stats.words === 0 && stats.todos.total === 0);
+      const cells = cellsOf(stats, language);
+      const trend = stats && record ? trendOf(record, stats.words, new Date()) : null;
+      const showFeet = layout !== "compact" && stats !== null && !face.hasAttribute("data-zero");
+      grid.replaceChildren(...cells.map(({ key, label, value, unit }) => {
+        const cell = made("div", "cell");
+        cell.dataset.stat = key;
+        const name = made("dt", "label");
+        const chip = made("span", "chip");
+        chip.setAttribute("aria-hidden", "true");
+        chip.innerHTML = line(ICONS[/** @type {keyof typeof ICONS} */ (key)], layout === "compact" ? 2 : 1.8);
+        name.append(chip, label);
+        const figure = made("dd", "figure");
+        figure.append(made("span", "number", value), ...(unit ? [made("span", "unit", unit)] : []));
+        cell.append(name, figure);
+        if (showFeet && stats) {
+          const foot = made("dd", "foot");
+          if (key === "documents" && stats.documents > 0) {
+            const [before, count, after] = words.average(countOf(Math.round(stats.words / stats.documents), language));
+            const said = made("span", "said");
+            said.append(...(before ? [`${before} `] : []), made("b", "average", count), ` ${after}`);
+            foot.append(said);
+          } else if (key === "todos" && stats.todos.total > 0) {
+            const bar = made("span", "bar");
+            const fill = made("i", "fill");
+            fill.style.width = `${((100 * stats.todos.done) / stats.todos.total).toFixed(1)}%`;
+            bar.append(fill);
+            foot.append(bar, made("b", "share", `${percentDone(stats.todos.done, stats.todos.total)}%`));
+          } else if (key === "week" && trend) {
+            const most = Math.max(1, ...trend.week.map((edits) => edits ?? 0));
+            const bars = made("span", "bars");
+            bars.setAttribute("aria-hidden", "true");
+            const today = (new Date().getDay() + 6) % 7;
+            bars.append(...trend.week.map((edits, index) => {
+              const bar = made("i", "day");
+              if (edits === null) bar.classList.add("gallery-soft-stats-future");
+              else bar.style.height = `${Math.max(3, Math.round((edits / most) * 24))}px`;
+              if (index === today) bar.classList.add("gallery-soft-stats-today");
+              return bar;
+            }));
+            foot.append(bars);
+          } else if (key === "words" && trend && trend.climb.length > 1) {
+            if (w >= 12 && h <= 2) {
+              const pill = made("span", trend.added < 0 ? "fell" : "grew");
+              pill.innerHTML = line(trend.added < 0 ? '<path d="M4 7.5l5.5 5.5 3.5-3.5L20 17"/><path d="M14.5 17H20v-5.5"/>' : '<path d="M4 16.5l5.5-5.5 3.5 3.5L20 7"/><path d="M14.5 7H20v5.5"/>', 2.2);
+              pill.append(countOf(Math.abs(trend.added), language));
+              foot.append(pill, made("span", "added", words.added), made("span", "room"));
+            } else foot.append(made("span", "room"));
+          }
+          cell.append(foot);
+        }
+        return cell;
+      }));
+      // The sparklines, as wide as their room once it is laid out.
+      if (trend) {
+        for (const room of /** @type {NodeListOf<HTMLElement>} */ (grid.querySelectorAll(".gallery-soft-stats-room"))) {
+          const wide = room.parentElement?.querySelector(".gallery-soft-stats-grew, .gallery-soft-stats-fell") !== null;
+          const width = Math.max(40, Math.floor(room.clientWidth));
+          room.replaceChildren(sparkOf(wide ? trend.climb.slice(-14) : trend.climb, width, layout === "quad" ? 24 : 22));
+        }
+      }
+      note.hidden = !failure;
+      note.textContent = failure;
+    };
+    let asking = 0; // the last read asked: an older answer that comes after it is dropped
+    const read = () => {
+      const ticket = ++asking;
+      workspace.query("stats").then(({ data }) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        stats = data;
+        failure = "";
+        draw();
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        stats = null;
+        failure = error?.code === "offline" ? words.offline : words.failed;
+        draw();
+      });
+    };
+    let reading = 0;
+    const readRecord = () => {
+      const ticket = ++reading;
+      workspace.query("activity", { days: 30 }).then(({ data }) => {
+        if (ticket !== reading || context.signal.aborted) return;
+        record = data;
+        draw();
+      }, () => {
+        if (ticket !== reading || context.signal.aborted) return;
+        record = null;
+        draw();
+      });
+    };
+    draw();
+    read();
+    readRecord();
+    // The sparklines' room changes with the card's width: drawn again as it does.
+    if (typeof ResizeObserver === "function") {
+      let width = 0;
+      const watch = new ResizeObserver(() => {
+        if (Math.round(face.clientWidth) === width) return;
+        width = Math.round(face.clientWidth);
+        draw();
+      });
+      watch.observe(face);
+      context.signal?.addEventListener("abort", () => watch.disconnect(), { once: true });
+    }
+    return {
+      update(reason, detail) {
+        if (reason === "data" && detail === "stats") read();
+        else if (reason === "data" && detail === "activity") readRecord();
+        else if (reason === "clock" && detail === "day") {
+          read();
+          readRecord();
+        } else if (reason === "layout") draw();
+      },
+    };
+  },
+});

package/packs/gallery-soft/stats/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><defs><linearGradient id="w" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3e7ac6" stop-opacity=".07"/><stop offset=".52" stop-color="#3e7ac6" stop-opacity="0"/></linearGradient></defs><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="14" fill="#ffffff" stroke="#e8e7e4"/><rect x="17" y="13" width="206" height="94" rx="13.5" fill="url(#w)"/><rect x="26" y="24" width="10" height="10" rx="4.5" fill="#ecf3fb"/><rect x="28" y="28" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="40" y="26" width="20" height="5" rx="2.5" fill="#c4c2bd"/><rect x="27" y="44" width="20" height="14" rx="7" fill="#1f1f1f"/><rect x="50" y="50" width="9" height="6" rx="3" fill="#8d8c88"/><rect x="68.5" y="13" width="1" height="94" fill="#efeeec"/><rect x="77.5" y="24" width="10" height="10" rx="4.5" fill="#ecf3fb"/><rect x="79.5" y="28" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="91.5" y="26" width="20" height="5" rx="2.5" fill="#c4c2bd"/><rect x="78.5" y="44" width="20" height="14" rx="7" fill="#1f1f1f"/><rect x="101.5" y="50" width="9" height="6" rx="3" fill="#8d8c88"/><rect x="120" y="13" width="1" height="94" fill="#efeeec"/><rect x="129" y="24" width="10" height="10" rx="4.5" fill="#ecf3fb"/><rect x="131" y="28" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="143" y="26" width="20" height="5" rx="2.5" fill="#c4c2bd"/><rect x="130" y="44" width="20" height="14" rx="7" fill="#1f1f1f"/><rect x="153" y="50" width="9" height="6" rx="3" fill="#8d8c88"/><rect x="171.5" y="13" width="1" height="94" fill="#efeeec"/><rect x="180.5" y="24" width="10" height="10" rx="4.5" fill="#ecf3fb"/><rect x="182.5" y="28" width="6" height="2" rx="1" fill="#3e7ac6"/><rect x="194.5" y="26" width="20" height="5" rx="2.5" fill="#c4c2bd"/><rect x="181.5" y="44" width="20" height="14" rx="7" fill="#1f1f1f"/><rect x="204.5" y="50" width="9" height="6" rx="3" fill="#8d8c88"/><rect x="27" y="86" width="34" height="4" rx="2" fill="#c4c2bd"/><path d="M78 92 L90 90 L98 88 L106 86 L114 84" fill="none" stroke="#3e7ac6" stroke-width="1.6" stroke-linecap="round"/><circle cx="114" cy="84" r="2" fill="#fff" stroke="#3e7ac6" stroke-width="1.4"/><rect x="130" y="86" width="26" height="4" rx="2" fill="#efeff0"/><rect x="130" y="86" width="17" height="4" rx="2" fill="#3e7ac6"/><rect x="181" y="82" width="4" height="10" rx="1" fill="#afcaea"/><rect x="187" y="88" width="4" height="4" rx="1" fill="#afcaea"/><rect x="193" y="86" width="4" height="6" rx="1" fill="#afcaea"/><rect x="199" y="83" width="4" height="9" rx="1" fill="#3e7ac6"/></svg>