@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/recent/style.css

@@ -0,0 +1,85 @@
+/* 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 pack's design B, in the kit's card tokens: the head (the chip, a
+   clock, 最近编辑 and how many were edited today, faint), its end clear of the card's grip; rows like the
+   sidebar's (30px, out to the face's edges by 6px so that a row's hover fill has room), each its icon, its
+   title and its time at its end, faint; the groups' titles (今天, 昨天, 本周, 更早) small, faint and 600; and
+   under them how many more there are, faint. A short card (data-layout "short") lists three, no groups.
+   No document: the cards' empty face in the middle. A document's icon as the sidebar draws it (a picture,
+   a glyph masked in the faint color, or a page drawn here). Light and dark. */
+[data-doc-component="gallery/recent"] {
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-recent-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
+  > .gallery-recent-face > .gallery-recent-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    height: 20px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-chip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
+  }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-title { 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); }
+  > .gallery-recent-face > .gallery-recent-head > .gallery-recent-meta { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-recent-face > .gallery-recent-list { flex: 1 1 auto; min-height: 0; margin: 6px -6px 0; padding: 0; overflow: hidden; list-style: none; }
+  > .gallery-recent-face[data-layout="short"] > .gallery-recent-list { margin-top: 4px; }
+  > .gallery-recent-face > .gallery-recent-list[hidden] { display: none; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-group { padding: 8px 6px 2px; font-size: 11.5px; line-height: 16px; font-weight: 600; color: var(--gallery-faint); }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 30px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document:hover { background: var(--gallery-hover); }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document:focus-visible { outline: 2px solid var(--gallery-accent-wash); outline-offset: -2px; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-picture > img { display: block; width: 15px; height: 15px; object-fit: contain; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-glyph::before { content: ""; width: 15px; height: 15px; background: var(--gallery-faint); -webkit-mask: var(--gallery-recent-icon) center / contain no-repeat; mask: var(--gallery-recent-icon) center / contain no-repeat; }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-icon:empty::before {
+    content: "";
+    width: 15px;
+    height: 15px;
+    background: var(--gallery-faint);
+    -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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--gallery-text); }
+  > .gallery-recent-face > .gallery-recent-list > .gallery-recent-item > .gallery-recent-document > .gallery-recent-when { flex: none; font-size: 12px; color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-recent-face > .gallery-recent-more { flex: none; margin: 0; padding-top: 6px; font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-recent-face > .gallery-recent-more[hidden] { display: none; }
+  /* No document, or no workspace: the cards' empty face in the middle. */
+  > .gallery-recent-face > .gallery-recent-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; text-align: center; }
+  > .gallery-recent-face > .gallery-recent-empty[hidden] { display: none; }
+  > .gallery-recent-face > .gallery-recent-empty > p { margin: 0; }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-empty-picture { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 8px; background: var(--gallery-fill); color: var(--gallery-faint); }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-empty-picture > svg { width: 16px; height: 16px; }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-line { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-recent-face > .gallery-recent-empty > .gallery-recent-hint { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+}
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/recent"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/recent"] > .gallery-recent-face { height: 100%; }

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 × 4 (the default), 4 × 2 (the last three, no groups) and 4 × 6 are the ones its menu lists; it is 4 wide and any height from 2 to 8 cells. As many whole rows as the card holds, and how many more there are under them.
+
+## 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
+
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a clock's chip, 最近编辑 and how many were edited today; then rows like the sidebar's, grouped as 今天, 昨天, 本周 and 更早, each the document's icon, its title and its time at its end (12 分钟前, then the hour; yesterday's hour; this week's weekday, 周二; earlier ones the date). A row under the pointer takes the hover's gray. No document yet: it says so in the middle.

package/packs/gallery/static/component.json

@@ -0,0 +1,13 @@
+{
+  "id": "gallery/static",
+  "apiVersion": 1,
+  "version": "2.0.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, 4], [4, 2], [8, 2], [2, 2], [4, 1], [2, 1]], "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="60.5" y="6.5" width="119" height="107" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="70" y="14" width="10" height="10" rx="3" fill="#efefed"/><rect x="84" y="16.5" width="30" height="5" rx="2.5" fill="#37352f"/><circle cx="72" cy="36" r="1.5" fill="#a6a5a1"/><rect x="77" y="34" width="52" height="4.5" rx="2.25" fill="#37352f"/><circle cx="72" cy="46" r="1.5" fill="#a6a5a1"/><rect x="77" y="44" width="40" height="4.5" rx="2.25" fill="#37352f"/><circle cx="72" cy="56" r="1.5" fill="#a6a5a1"/><rect x="77" y="54" width="46" height="4.5" rx="2.25" fill="#37352f"/><rect x="70" y="66" width="14" height="3.5" rx="1.75" fill="#a6a5a1"/><rect x="70" y="76" width="6" height="6" rx="3" fill="#d4d3cf"/><rect x="80" y="77" width="48" height="4.5" rx="2.25" fill="#4084cf"/><rect x="70" y="87" width="6" height="6" rx="3" fill="#d4d3cf"/><rect x="80" y="88" width="54" height="4.5" rx="2.25" fill="#4084cf"/><rect x="148" y="88.5" width="22" height="3.5" rx="1.75" fill="#d4d3cf"/><rect x="70" y="98" width="6" height="6" rx="3" fill="#d4d3cf"/><rect x="80" y="99" width="40" height="4.5" rx="2.25" fill="#4084cf"/></svg>

package/packs/gallery/static/style.css

@@ -0,0 +1,171 @@
+/* The static card has no script: what its content holds, any HTML, is what a reader sees. It gives that
+   HTML a light reading look (the pack's design B): 13px words on 20px lines; the heading it starts with,
+   where more follows it, the cards' head row (a small chip of lines before it, 13px and 600, 8px over what
+   follows); a list's items after a small dot; a small heading (h4 to h6) a faint 11.5px label over what it
+   names; a paragraph of strong words alone right after the heading it starts with at the card's foot, with
+   what follows it; a paragraph holding one link a row of 28px, a small picture before the link (a page for one of the
+   workspace's, a link's for the web) and its <small> (a domain, a date) at its end; a table compact, its
+   heads faint, its rows a hairline apart; a heading alone (a card that names a group of cards) 15px, its
+   <small> beside it; a link alone (a tile) 600 after an arrow; content of one line on a card one cell high
+   in the middle of it. 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 accent's ink): 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 label, a quote, a dot, an empty card's words) or drawn as a line is a share of
+   that color (color-mix with currentColor: 65% muted, 12% a line), 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) 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; its text wraps so that no line is left with a word or a character alone (text-wrap: pretty). 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-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 20px;
+  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) { margin: 12px 0 6px; font-size: 15px; line-height: 22px; font-weight: 600; }
+  :where(h4, h5, h6) { margin: 14px 0 4px; font-size: 11.5px; line-height: 16px; font-weight: 600; color: color-mix(in srgb, currentColor 65%, transparent); }
+  :where(p, ul, ol, dl, blockquote, table, figure, pre) { margin: 0 0 8px; }
+  :where(ul) { display: flex; flex-direction: column; gap: 5px; padding: 0; list-style: none; }
+  :where(ul) > :where(li) { position: relative; padding-inline-start: 14px; }
+  :where(ul) > :where(li)::before { content: ""; position: absolute; top: 8px; inset-inline-start: 3px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, currentColor 45%, transparent); }
+  :where(ol) { padding-inline-start: 1.5em; }
+  :where(a) { color: var(--gallery-accent-ink); text-decoration: none; }
+  :where(a:hover) { text-decoration: underline; }
+  :where(img, svg, video) { max-width: 100%; }
+  :where(img, video) { height: auto; }
+  :where(table) { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  :where(th, td) { padding: 5px 8px 5px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); line-height: 18px; text-align: start; vertical-align: top; white-space: nowrap; }
+  :where(th) { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, currentColor 65%, transparent); }
+  :where(tr:last-child) > :where(td) { border-bottom-style: none; }
+  :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) { font-size: 11.5px; color: color-mix(in srgb, currentColor 65%, transparent); }
+  :scope > div > :where(:first-child) { margin-top: 0; }
+  :scope > div > :where(:last-child) { margin-bottom: 0; }
+  /* A paragraph of one link (and a small word after it): a row, a small picture before the link, the small word at its end. */
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 -6px; padding: 0 6px; border-radius: 6px; }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(a) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(a)::before {
+    content: "";
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-inline-end: 8px;
+    vertical-align: -2px;
+    background: color-mix(in srgb, var(--gallery-text, currentColor) 45%, transparent);
+    -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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(a[href^="http"])::before {
+    -webkit-mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1 1M13.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1-1'/%3E%3C/svg%3E");
+    mask-image: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1 1M13.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1-1'/%3E%3C/svg%3E");
+  }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(small) { flex: none; }
+  /* A paragraph of strong words alone: a line larger, 15px. */
+  :where(p:has(> strong:only-child)):where(:not(:has(> :not(strong)))) { font-size: 15px; line-height: 22px; }
+  /* 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 8px;
+    font-size: var(--gallery-title-size);
+    line-height: var(--gallery-title-line);
+    font-weight: 600;
+    color: inherit;
+  }
+  :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: color-mix(in srgb, currentColor 6%, transparent);
+  }
+  :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: color-mix(in srgb, currentColor 60%, transparent);
+    -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='M5 6.5h14M5 12h14M5 17.5h9'/%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='M5 6.5h14M5 12h14M5 17.5h9'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  /* A heading alone (a card naming a group of cards): 15px, its small words beside it. */
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:only-child) { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: inherit; }
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:only-child) > :where(small) { font-size: 12px; font-weight: 400; }
+  /* A link alone (a tile): 600, after an arrow, in the words' color. */
+  :scope > div > :where(p:only-child:has(> a:only-child)) > :where(a) { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; }
+  :scope > div > :where(p:only-child:has(> a:only-child)) > :where(a)::before {
+    content: "";
+    width: 15px;
+    height: 15px;
+    margin: 0;
+    background: color-mix(in srgb, currentColor 45%, transparent);
+    -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+}
+/* A card whose heading is followed by a paragraph of strong words alone (还差 2 项, a number, a word to keep in
+   mind): the content as high as the card, a column, and that paragraph and what follows it at the card's foot,
+   as a small widget's figure (margin-top: auto). In a column no float goes round, so the grip's corner is
+   the heading's to keep clear (padding at its end), one line as it is. One rule for every size. */
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child) { height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child)::before { display: none; }
+.gallery-card > [data-doc-component="gallery/static"] > div:has(> :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child) { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"] > div:has(> :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child) > :is(h1, h2, h3, h4, h5, h6):first-child { padding-inline-end: var(--gallery-grip-room, 0px); }
+.gallery-card > [data-doc-component="gallery/static"] > div > :is(h1, h2, h3, h4, h5, h6):first-child + p:has(> strong:only-child) { margin-top: auto; }
+.gallery-card > [data-doc-component="gallery/static"] > div > :is(h1, h2, h3, h4, h5, h6):first-child + p:has(> strong:only-child) + p { margin-top: -2px; }
+/* Content of one line on a card: in the middle of its height. */
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :only-child:is(h1, h2, h3, h4, h5, h6, p)) { display: flex; flex-direction: column; justify-content: center; height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :only-child:is(h1, h2, h3, h4, h5, h6, p))::before { display: none; }
+/* Nothing in it: the cards' empty face, a short line over what to do, muted (the content's ::before and
+   ::after), each line whole, at the left of the card's middle. */
+[data-doc-component="gallery/static"]:has(> div:empty) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.gallery-card > [data-doc-component="gallery/static"]:has(> div:empty) { height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"]:has(> div:empty)::before { display: none; }
+[data-doc-component="gallery/static"] > div:empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 18px;
+}
+[data-doc-component="gallery/static"] > div:empty::before { content: "还没有内容"; font-size: 13.5px; line-height: 20px; font-weight: 600; }
+[data-doc-component="gallery/static"] > div:empty::after {
+  content: "跟 Agent 说要在这里放什么";
+  color: color-mix(in srgb, currentColor 55%, 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 light one (Gallery 风格's: 13px words on 20px lines) that weighs nothing, so that a page's own `<style>` or a `style` attribute changes any of it: a heading the content starts with, where more follows it, is drawn as the cards' head row (13px, 600, a small chip of lines before it), so that the card sits among Gallery's own; a list's items stand after small dots; a small heading (`<h4>`) is a faint label over what follows (常用); a paragraph of one link is a row with a small picture before it (a page for one of the workspace's, a link's for the web) and its `<small>` at its end, for a domain or a date: `<p><a href="https://www.npmjs.com/…">npm · @heycys/gallery</a><small>npmjs.com</small></p>`; a paragraph of `<strong>` words alone is a line larger (15px), and right after the heading the content starts with it stands at the card's foot with what follows it, a small widget's figure (`<h3>发布前</h3><p><strong>还差 2 项</strong></p><p><small>门禁 · 盲测</small></p>`); a table is compact, its heads faint, its rows a hairline apart; a heading alone (a card that names a group of cards, `<h2>工作 <small>项目和待办</small></h2>`) is 15px with its small words beside it, and a link alone is a tile (600, after an arrow); content of one line stands in the middle of a card one cell high. Links are in the accent's ink. It sets no other color: 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, labels, 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 × 4 by default (2 × 1 for one link, 4 × 1 for a heading of a group, 4 × 2 for a few links, 8 × 2 for a short table): 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": "2.0.0",
+  "name": { "zh": "工作区统计", "en": "Workspace numbers" },
+  "description": { "zh": "文档数、总字数、待办完成了几项、本周编辑了几次，各配一张小图", "en": "How many documents, words in all, to-dos done and edits this week, each over a small chart" },
+  "words": "gongzuoqutongji tongji shuzi stats statistics numbers count words 统计 工作区 字数 文档数 待办",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-stats-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[8, 2], [12, 2], [4, 4]], "resize": true },
+  "needs": ["workspace"]
+}

package/packs/gallery/stats/example.html

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