@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/recent/style.css

@@ -0,0 +1,158 @@
+/* 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 and 最近编辑, how many were edited today its quiet meta at the
+   end, clear of the card's grip), then the
+   documents, as many whole rows as fit (the script sets the list's height; they scroll inside it), a row each as the sidebar draws one (its icon, its title, and
+   when it was edited at its end, muted), a hover fill a press away from opening it; where more are below
+   what it shows, a muted line under the list says how many (the script's); none, the cards' empty face (a
+   page in a soft disc over a muted line). Light and dark. */
+[data-doc-component="gallery/recent"] {
+  height: 16em;
+  > .gallery-recent-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-recent-face > .gallery-recent-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-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-recent-face > .gallery-recent-head > .gallery-recent-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: var(--gallery-text-strong);
+  }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-meta { flex: none; font-size: var(--gallery-meta-size); color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  > .gallery-recent-face > .gallery-recent-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    margin: -2px -6px 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 6px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document:hover { background: var(--doc-hover); }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    color: var(--doc-muted);
+  }
+  /* A document with no icon: a page, drawn as the sidebar's (a folded corner), in the muted color. */
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon:empty:not(.gallery-recent-glyph)::before {
+    content: "";
+    display: block;
+    width: 13px;
+    height: 16px;
+    background: currentColor;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M2 .75h6.2l4.05 4.05V14A1.25 1.25 0 0 1 11 15.25H2A1.25 1.25 0 0 1 .75 14V2A1.25 1.25 0 0 1 2 .75z M8 1v3.5a.75.75 0 0 0 .75.75H12' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%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 13 16'%3E%3Cpath d='M2 .75h6.2l4.05 4.05V14A1.25 1.25 0 0 1 11 15.25H2A1.25 1.25 0 0 1 .75 14V2A1.25 1.25 0 0 1 2 .75z M8 1v3.5a.75.75 0 0 0 .75.75H12' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-glyph {
+    background: currentColor;
+    -webkit-mask: var(--gallery-recent-icon) center / 16px no-repeat;
+    mask: var(--gallery-recent-icon) center / 16px no-repeat;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-picture > img { display: block; width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-when { flex: none; font-size: var(--gallery-meta-size); color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  /* What it says where it lists nothing: in the middle of what the card has left, muted, a quiet
+     picture of a page over it. */
+  > .gallery-recent-face > .gallery-recent-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-recent-face > .gallery-recent-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='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%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='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-recent-face > .gallery-recent-line[hidden] { display: none; }
+  /* How many more are below what the list shows. */
+  > .gallery-recent-face > .gallery-recent-more {
+    flex: none;
+    margin: -2px 0 0;
+    font-size: var(--gallery-meta-size);
+    line-height: 16px;
+    color: var(--doc-muted);
+  }
+  > .gallery-recent-face > .gallery-recent-more[hidden] { display: none; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding, and a
+   container of that height, so that a low card (two rows of cells) says it lists nothing in its words
+   alone, the picture over them left out (it would not fit under the head). */
+.gallery-card > [data-doc-component="gallery/recent"] { height: 100%; container-type: size; }
+@container (max-height: 150px) {
+  [data-doc-component="gallery/recent"] > .gallery-recent-face > .gallery-recent-line { padding-block: 0; }
+  [data-doc-component="gallery/recent"] > .gallery-recent-face > .gallery-recent-line::before { display: none; }
+}

package/packs/gallery/recent/template.html

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

package/packs/gallery/recent/writing.md

@@ -0,0 +1,15 @@
+# 最近编辑 (gallery/recent)
+
+A card for a custom page (its places are `page`, its needs `workspace`): the documents of the workspace edited last, the last first, each with its page icon, its title and when it was edited (刚刚, 5 分钟前, 昨天, 11月2日). Use it on the home page, for the user to go back to what they were working on.
+
+## 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 recent`: the instance is empty, `<div data-doc-component="gallery/recent"></div>`, everything on it drawn by its script. It has no settings and holds no data: there is nothing to fill in and nothing it writes. Sizes: 4 × 5 (the default), 4 × 2, 4 × 4 and 4 × 6; the list scrolls inside the card.
+
+## What the user does
+
+Clicks a document: it opens. The list follows by itself: a document written, renamed or given another icon, made or taken away shows at once, and the times move on each minute.
+
+## How it looks
+
+最近编辑 beside a clock's chip on the top line, how many were edited today at its end (今天 3 篇), then a row a document as the sidebar draws one, its time muted at its end, as many whole rows as the card holds, a muted line under them saying how many more are below (还有 3 篇); 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 no document it says 还没有文档. In an exported file, which has no workspace to read, it says the list shows when the page is opened in Gallery. The script runs with the rights of the page's own scripts, as any block's does.

package/packs/gallery/static/component.json

@@ -0,0 +1,13 @@
+{
+  "id": "gallery/static",
+  "apiVersion": 1,
+  "version": "1.2.0",
+  "name": { "zh": "静态卡片", "en": "Static card" },
+  "description": { "zh": "放一段任意的 HTML，只展示，不能在页面上改", "en": "Any HTML, shown as it is: nothing on it changes in the page" },
+  "words": "jingtaikapian jingtai kapian static html card 静态 卡片 展示 内容",
+  "parts": {
+    "content": { "at": ":scope > div", "edit": "none" }
+  },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 1], [2, 2], [4, 1], [4, 3], [4, 4], [6, 2], [6, 4], [8, 4], [12, 2], [12, 4]], "min": { "w": 1, "h": 1 }, "max": { "w": 12, "h": 24 }, "resize": true }
+}

package/packs/gallery/static/example.html

@@ -0,0 +1,11 @@
+<div data-doc-component="gallery/static">
+  <div>
+    <h3>这周的重点</h3>
+    <ul>
+      <li>周三前定下发布日期</li>
+      <li>和设计一起过一遍首页</li>
+      <li>读完《深度工作》第三章</li>
+    </ul>
+    <p><a href="https://example.com/plan">完整的计划</a> · <small>11 月 7 日更新</small></p>
+  </div>
+</div>

package/packs/gallery/static/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="26" width="72" height="8" rx="4" fill="#3b3a37"/><circle cx="33" cy="52" r="2" fill="#8f8d88"/><rect x="40" y="49.5" width="120" height="6" rx="3" fill="#7b7a76"/><circle cx="33" cy="66" r="2" fill="#8f8d88"/><rect x="40" y="63.5" width="96" height="6" rx="3" fill="#7b7a76"/><circle cx="33" cy="80" r="2" fill="#8f8d88"/><rect x="40" y="77.5" width="136" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="92" width="46" height="5" rx="2.5" fill="#387dc9"/><rect x="82" y="92" width="40" height="5" rx="2.5" fill="#c4c2bd"/></svg>

package/packs/gallery/static/style.css

@@ -0,0 +1,138 @@
+/* The static card has no script: what its content holds, any HTML, is what a reader sees. It gives that
+   HTML a plain reading look (headings, paragraphs, lists, links, a table, a picture no wider than the
+   card). Each of those rules is written in an @scope of the instance with :where(), so that it weighs
+   nothing: the page's own <style> and an inline style always win over it. It sets no color of its own
+   but the links' (the kit's link color): its words are the color they stand in, inherited (the page's
+   text, which follows the theme, or a color the page gives the card or a wrapper of the content), and
+   what is muted (small words, a quote, an empty card's words) or drawn as a line (a table's, a rule's, a
+   quote's) is a share of that color (color-mix with currentColor, the shares of the kit's own muted text
+   and lines), so that light words on a dark fill a page writes stay light in every heading and line.
+   Its first line keeps its end clear of the card's grip, and only its first: a float as wide and as high as
+   the grip's corner (--gallery-grip-room, the kit's card tokens) stands at the top right of the instance
+   on a card, before its content, so that the words of the first line or two go round it and every line
+   after has the card's whole width; its text wraps so that no line is left with a word or a character
+   alone (text-wrap: pretty). A heading the content starts with, where more follows it, is drawn as the
+   cards' head row (the kit's card tokens): the title's size and weight, a chip before it (the cards' tinted
+   square, the accent's, with lines of text in it: the one color it gives besides the links'), the face's gap
+   under it; a heading alone (a card that names a group of cards) stays a heading. Every selector stands in
+   the instance: nothing here reaches the rest of the page. A card with nothing in its content (a new one,
+   from a menu) says so, in the page's language, until an Agent writes it: the cards' empty face, a short
+   line over a muted one saying what to do. */
+[data-doc-component="gallery/static"] > div {
+  font-size: 14px;
+  line-height: 1.6;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+/* The grip's corner, on a card: a float the content's first lines go round. */
+.gallery-card > [data-doc-component="gallery/static"]::before {
+  content: "";
+  float: inline-end;
+  width: var(--gallery-grip-room, 0px);
+  height: var(--gallery-grip-room, 0px);
+}
+@scope ([data-doc-component="gallery/static"]) {
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin: 12px 0 6px;
+    font-size: 15px;
+    line-height: 1.4;
+    font-weight: 600;
+  }
+  :where(h1, h2) { font-size: 18px; }
+  :where(h3) { font-size: 16px; }
+  :where(p, ul, ol, dl, blockquote, table, figure, pre) { margin: 0 0 8px; }
+  :where(ul, ol) { padding-inline-start: 1.5em; }
+  :where(li + li) { margin-top: 2px; }
+  :where(a) { color: var(--doc-link); text-decoration: none; }
+  :where(a:hover) { text-decoration: underline; }
+  :where(img, svg, video) { max-width: 100%; }
+  :where(img, video) { height: auto; }
+  :where(table) { border-collapse: collapse; }
+  :where(th, td) { padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); text-align: start; vertical-align: top; }
+  :where(th) { font-weight: 600; }
+  :where(hr) { margin: 12px 0; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
+  :where(code) { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 6%, transparent); font-family: var(--doc-mono); font-size: .9em; }
+  /* A quote's line is a share of its own muted color: 18% of 65%, about the 12% of the other lines. */
+  :where(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); }
+  :where(small) { color: color-mix(in srgb, currentColor 65%, transparent); }
+  :scope > div > :where(:first-child) { margin-top: 0; }
+  :scope > div > :where(:last-child) { margin-bottom: 0; }
+  /* The heading it starts with, where more follows: the cards' head row, a chip before it. */
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:first-child:not(:last-child)) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: var(--gallery-chip-size);
+    margin: 0 0 var(--gallery-face-gap);
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+  }
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:first-child:not(:last-child))::before {
+    content: "";
+    flex: none;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-accent-soft);
+  }
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:first-child:not(:last-child))::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: calc((var(--gallery-chip-size) - var(--gallery-chip-icon)) / 2);
+    width: var(--gallery-chip-icon);
+    height: var(--gallery-chip-icon);
+    margin-top: calc(var(--gallery-chip-icon) / -2);
+    background: var(--gallery-accent);
+    -webkit-mask: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M4.5 12h10M4.5 17.5h12.5'/%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 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M4.5 12h10M4.5 17.5h12.5'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+}
+/* 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 sparkles in it (the instance's ::before, one mask, where the grip's float stands on
+   a card with content, as nothing runs round it here), then a short line (还没有内容) over what to do, muted
+   (the content's ::before and ::after), each line whole. */
+[data-doc-component="gallery/static"]:has(> div:empty) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  box-sizing: border-box;
+}
+.gallery-card > [data-doc-component="gallery/static"]:has(> div:empty) { height: 100%; }
+[data-doc-component="gallery/static"] > div:empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.45;
+  text-align: center;
+}
+[data-doc-component="gallery/static"]:has(> div:empty)::before,
+.gallery-card > [data-doc-component="gallery/static"]:has(> div:empty)::before {
+  content: "";
+  float: none;
+  flex: none;
+  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='.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='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm0-12a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm-7 12a6 6 0 0 1 6-6a6 6 0 0 1-6-6a6 6 0 0 1-6 6a6 6 0 0 1 6 6z'/%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='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm0-12a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm-7 12a6 6 0 0 1 6-6a6 6 0 0 1-6-6a6 6 0 0 1-6 6a6 6 0 0 1 6 6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+}
+[data-doc-component="gallery/static"] > div:empty::before { content: "还没有内容"; font-size: 14px; }
+[data-doc-component="gallery/static"] > div:empty::after {
+  content: "跟 Agent 说要在这里放什么";
+  color: color-mix(in srgb, currentColor 65%, transparent);
+}
+:root[data-ge-language="en"] [data-doc-component="gallery/static"] > div:empty::before,
+:root:not([data-ge-language])[lang|="en" i] [data-doc-component="gallery/static"] > div:empty::before { content: "Nothing here yet"; }
+:root[data-ge-language="en"] [data-doc-component="gallery/static"] > div:empty::after,
+:root:not([data-ge-language])[lang|="en" i] [data-doc-component="gallery/static"] > div:empty::after {
+  content: "Tell your Agent what this card should show";
+}

package/packs/gallery/static/template.html

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

package/packs/gallery/static/writing.md

@@ -0,0 +1,18 @@
+# 静态卡片 (gallery/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.
+
+## 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 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: the card gives it a plain one (14px text, headings a little larger, but a heading the content starts with, where more follows it, drawn as the cards' head row: the title's size, a chip of lines before it, so that the card sits among Gallery's own; a heading alone stays a heading, links in the kit's link color, tables with lines between rows, pictures no wider than the card) that weighs nothing, so that a page's own `<style>` or a `style` attribute changes any of it. It sets no color but the links' and that head chip's: 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, 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: write `data-w` and `data-h` to fit what you wrote (`gallery page add 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 the board's card frame on a page. 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/stats/component.json

@@ -0,0 +1,13 @@
+{
+  "id": "gallery/stats",
+  "apiVersion": 1,
+  "version": "1.2.0",
+  "name": { "zh": "工作区统计", "en": "Workspace numbers" },
+  "description": { "zh": "文档数、待办完成了几项、总字数、本周编辑了几篇", "en": "How many documents, to-dos done, words in all, documents edited this week" },
+  "words": "gongzuoqutongji tongji shuzi stats statistics numbers count words 统计 工作区 字数 文档数 待办",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-stats-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [8, 2]], "resize": true },
+  "needs": ["workspace"]
+}

package/packs/gallery/stats/example.html

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

package/packs/gallery/stats/kit.js

@@ -0,0 +1,166 @@
+// gallery/stats (工作区统计): four numbers of the workspace, read through context.workspace.query("stats")
+// (its manifest's needs hold "workspace"): its documents, its to-dos done of all, the words of all its
+// documents, and the documents edited this week (since Monday, 0:00); a workspace with none of them
+// shows each 0. It reads again whenever the workspace says they changed (the `data` signal, "stats": 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. The words are the page's
+// language (the UI's where Gallery says it, else the page's lang); a big number of words is said short
+// (12.3万, 123K) as the language does. Its head is the cards' (the kit's card tokens): the chip, bars of a
+// chart, before its title; each label after a small picture of what it counts (style.css, by the cell's
+// `data-stat`); the to-dos done drawn as a bar too under their count, the share of all that is done in
+// the accent on the track.
+
+const WORDS = {
+  zh: {
+    title: "工作区统计",
+    documents: "文档",
+    todos: "待办完成",
+    words: "总字数",
+    week: "本周编辑",
+    pieces: "篇",
+    offline: "在 Gallery 里打开时显示",
+    failed: "读不到工作区的统计",
+    locale: "zh-CN",
+  },
+  en: {
+    title: "Workspace",
+    documents: "Documents",
+    todos: "To-dos done",
+    words: "Words",
+    week: "Edited this week",
+    pieces: "",
+    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 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 = "–";
+  return [
+    { key: "documents", label: words.documents, value: stats ? countOf(stats.documents, language) : dash, unit: stats ? words.pieces : "" },
+    { key: "todos", label: words.todos, value: stats ? `${countOf(stats.todos.done, language)}/${countOf(stats.todos.total, language)}` : dash, unit: "" },
+    { key: "words", label: words.words, value: stats ? countOf(stats.words, language) : dash, unit: "" },
+    { key: "week", label: words.week, value: stats ? countOf(stats.editedThisWeek, language) : dash, unit: stats ? words.pieces : "" },
+  ];
+}
+
+/**
+ * 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-stats-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+DocKit.component({
+  id: "gallery/stats",
+  on: ["data", "clock"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const face = made("div", "face");
+    const head = made("div", "head");
+    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="M4.5 19.5h15M7.5 15.5v-5M12 15.5V4.5M16.5 15.5V8"/></svg>';
+    head.append(chip, made("span", "title", words.title));
+    const grid = made("dl", "grid");
+    const line = made("p", "line");
+    line.hidden = true;
+    face.append(head, grid, line);
+    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"));
+    // The cells, each a label over its number, made again only where their words are others.
+    const draw = (/** @type {Parameters<typeof cellsOf>[0]} */ stats) => {
+      const cells = cellsOf(stats, language);
+      if (grid.children.length !== cells.length) {
+        grid.replaceChildren(...cells.map(({ key }) => {
+          const cell = made("div", "cell");
+          cell.dataset.stat = key;
+          const value = made("dd", "value");
+          value.append(made("span", "number"), made("span", "unit"));
+          if (key === "todos") {
+            const bar = made("span", "bar");
+            bar.setAttribute("aria-hidden", "true");
+            bar.append(made("span", "fill"));
+            value.append(bar);
+          }
+          cell.append(made("dt", "label"), value);
+          return cell;
+        }));
+      }
+      cells.forEach(({ label, value, unit }, index) => {
+        const cell = /** @type {HTMLElement} */ (grid.children[index]);
+        const put = (/** @type {string} */ selector, /** @type {string} */ text) => {
+          const node = cell.querySelector(selector);
+          if (node && node.textContent !== text) node.textContent = text;
+        };
+        put(".gallery-stats-label", label);
+        put(".gallery-stats-number", value);
+        put(".gallery-stats-unit", unit);
+      });
+      // The bar of the to-dos: the share done, none drawn where nothing is known or there is none.
+      const bar = /** @type {HTMLElement | null} */ (grid.querySelector(".gallery-stats-bar"));
+      if (bar) {
+        const share = stats && stats.todos.total > 0 ? stats.todos.done / stats.todos.total : null;
+        bar.hidden = share === null;
+        bar.style.setProperty("--share", String(share ?? 0));
+      }
+    };
+    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;
+        line.hidden = true;
+        draw(data);
+      }, (/** @type {any} */ error) => {
+        if (ticket !== asking || context.signal.aborted) return;
+        draw(null);
+        line.hidden = false;
+        line.textContent = error?.code === "offline" ? words.offline : words.failed;
+      });
+    };
+    draw(null);
+    read();
+    return {
+      update(reason, detail) {
+        if ((reason === "data" && detail === "stats") || (reason === "clock" && detail === "day")) read();
+      },
+    };
+  },
+});

package/packs/gallery/stats/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="M6 19v-6M12 19V5M18 19v-9"/></g><rect x="50" y="28" width="50" height="6" rx="3" fill="#3b3a37"/><rect x="30" y="50" width="18" height="4" rx="2" fill="#c4c2bd"/><text x="29" y="70" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="17" font-weight="600" letter-spacing="-.5" fill="#3b3a37">5</text><rect x="41" y="64" width="7" height="5" rx="2" fill="#c4c2bd"/><rect x="126" y="50" width="26" height="4" rx="2" fill="#c4c2bd"/><text x="125" y="70" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="17" font-weight="600" letter-spacing="-.5" fill="#3b3a37">1/4</text><rect x="126" y="74.5" width="82" height="2.6" rx="1.3" fill="#efeeec"/><rect x="126" y="74.5" width="20" height="2.6" rx="1.3" fill="#2e7cd1"/><rect x="30" y="82" width="22" height="4" rx="2" fill="#c4c2bd"/><text x="29" y="101" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="17" font-weight="600" letter-spacing="-.5" fill="#3b3a37">1,293</text><rect x="126" y="82" width="26" height="4" rx="2" fill="#c4c2bd"/><text x="125" y="101" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="17" font-weight="600" letter-spacing="-.5" fill="#3b3a37">2</text><rect x="137" y="95" width="7" height="5" rx="2" fill="#c4c2bd"/></svg>