@heycys/gallery 0.1.2 → 0.2.1

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

@@ -0,0 +1,181 @@
+/* 柔光风格's editing heatmap. Every selector starts at the instance and goes down from it, so that nothing
+   here reaches the rest of the page. The soft look's tokens first, light and dark (light-dark(): the page's
+   color scheme, which follows its theme), the squares' five shades of the accent among them, then the face:
+   a faint wash of the accent from the card's top over the soft card's fill; a head of a calendar's chip and
+   编辑热力图, its quiet meta at the end (less to more, or the count and the weeks; fading while the grip
+   shows); the squares the hero, rounded, placed by the script (left, top and size), the months' names over
+   them and the weekdays' initials beside them muted; a day before the record began a faint dot, today ringed
+   in the accent, the square under the pointer ringed in the text's color with a dark tip over it saying its
+   day. On a card wider than 6 cells a column of figures beside the squares: what they count, its total large,
+   four small figures under it, and the reader's and the Agent's shares as a bar of two at its bottom (three
+   cells high, 8 × 3: the total and the first two figures alone); on a
+   narrower one less to more under the squares at their right. Nothing read: the cards' empty face. On a custom
+   page the face is the card's whole room, taken out over the card's padding and given the soft frame's (24px),
+   the board's line around it; where no card is (a document, as gallery block check shows it) the face frames
+   itself at an 8 × 4 card's size. */
+[data-doc-component="gallery-soft/heatmap"] {
+  --soft-font: "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  --soft-num: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --soft-card: light-dark(#ffffff, #1f1f20);
+  --soft-card-line: light-dark(rgb(28 28 32 / 6.5%), rgb(255 255 255 / 7.5%));
+  --soft-card-shadow: 0 0 0 1px var(--soft-card-line), 0 1px 2px light-dark(rgb(28 28 32 / 3.5%), rgb(0 0 0 / 0%)), 0 8px 24px -14px light-dark(rgb(28 28 32 / 12%), rgb(0 0 0 / 60%));
+  --soft-wash: linear-gradient(180deg, light-dark(rgb(62 122 198 / 6%), rgb(126 173 226 / 7%)) 0%, transparent 52%);
+  --soft-text: light-dark(#37352f, #d9d9dc);
+  --soft-strong: light-dark(#1f1f1f, #f1f1f2);
+  --soft-muted: light-dark(#7a7a7f, #9d9da3);
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-accent-soft: light-dark(#ecf3fb, rgb(126 173 226 / 14%));
+  --soft-track: light-dark(rgb(28 28 32 / 7%), rgb(255 255 255 / 8%));
+  --soft-slot: light-dark(rgb(28 28 32 / 8.5%), rgb(255 255 255 / 9%));
+  --soft-h0: light-dark(rgb(28 28 32 / 6%), rgb(255 255 255 / 7%));
+  --soft-h1: light-dark(#d6e4f4, #253a55);
+  --soft-h2: light-dark(#a6c4e8, #3a5d88);
+  --soft-h3: light-dark(#6b9bd4, #5a8bc7);
+  --soft-h4: light-dark(#3e7ac6, #96bfea);
+  --soft-agent: light-dark(#a3c2e6, #4a6f9b);
+  --soft-grip-room: 0px;
+  > .gallery-soft-heatmap-face {
+    --soft-pad: 24px;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 624px;
+    max-width: 100%;
+    height: 304px;
+    padding: calc(var(--soft-pad) - var(--soft-edge, 0px));
+    overflow: hidden;
+    border-radius: 16px;
+    box-shadow: var(--soft-card-shadow);
+    background: var(--soft-wash), var(--soft-card);
+    color: var(--soft-text);
+    font: 13px/1.5 var(--soft-font);
+    -webkit-font-smoothing: antialiased;
+  }
+  > .gallery-soft-heatmap-face[data-pad="m"] { --soft-pad: 20px; }
+  > .gallery-soft-heatmap-face[data-pad="s"] { --soft-pad: 18px; }
+  /* The head: the calendar's chip, 编辑热力图, its meta at the end. */
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head { display: flex; align-items: center; gap: 10px; flex: none; height: 28px; min-width: 0; padding-inline-end: var(--soft-grip-room); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head > .gallery-soft-heatmap-chip { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--soft-accent-soft); color: var(--soft-accent); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head > .gallery-soft-heatmap-chip > svg { display: block; width: 16px; height: 16px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head > .gallery-soft-heatmap-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: var(--soft-strong); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head > .gallery-soft-heatmap-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: none;
+    margin-left: auto;
+    margin-inline-end: calc(-1 * var(--soft-grip-room));
+    font-size: 12px;
+    color: var(--soft-muted);
+    white-space: nowrap;
+    opacity: calc(1 - var(--gallery-grip-shown, 0));
+    transition: opacity .12s ease-out;
+  }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head > .gallery-soft-heatmap-meta > .gallery-soft-heatmap-count { font: 600 12px var(--soft-num); color: var(--soft-text); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-head > .gallery-soft-heatmap-meta > .gallery-soft-heatmap-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
+  /* Less to more: five squares between its words. */
+  .gallery-soft-heatmap-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--soft-muted); }
+  .gallery-soft-heatmap-legend > .gallery-soft-heatmap-key { width: 11px; height: 11px; border-radius: 3px; background: var(--soft-h0); }
+  /* The figures beside the squares and the squares' room. */
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body { display: flex; gap: 28px; flex: 1; min-height: 0; margin-top: 16px; }
+  > .gallery-soft-heatmap-face[data-narrow] > .gallery-soft-heatmap-body { margin-top: 14px; }
+  > .gallery-soft-heatmap-face[data-unread] > .gallery-soft-heatmap-body { display: none; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside { display: flex; flex-direction: column; flex: none; width: 150px; min-width: 0; }
+  > .gallery-soft-heatmap-face[data-w="12"] > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside { width: 176px; }
+  > .gallery-soft-heatmap-face[data-narrow] > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside { display: none; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside .gallery-soft-heatmap-label { font-size: 12px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--soft-text); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-total {
+    margin: 6px 0 0;
+    white-space: nowrap;
+    font: 700 36px/1 var(--soft-num);
+    letter-spacing: -.025em;
+    font-variant-numeric: tabular-nums;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-total > .gallery-soft-heatmap-unit { margin-left: 4px; font: 500 13px var(--soft-font); letter-spacing: 0; color: var(--soft-muted); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-figures { display: grid; grid-template-columns: auto auto; column-gap: 22px; row-gap: 3px; margin-top: 18px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-figures > .gallery-soft-heatmap-label { font-size: 11.5px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-figures > .gallery-soft-heatmap-label:nth-child(n + 5):nth-child(-n + 6) { margin-top: 10px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-figures > .gallery-soft-heatmap-value { font: 600 17px/1.2 var(--soft-num); letter-spacing: -.01em; color: var(--soft-strong); white-space: nowrap; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-figures > .gallery-soft-heatmap-value > .gallery-soft-heatmap-small { margin-left: 2px; font: 500 11.5px var(--soft-font); letter-spacing: 0; color: var(--soft-muted); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split { margin-top: auto; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-bar { display: flex; gap: 2px; height: 6px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-bar > i { border-radius: 3px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-bar > .gallery-soft-heatmap-you { background: var(--soft-accent); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-bar > .gallery-soft-heatmap-agent { flex: 1; background: var(--soft-agent); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-key-line { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-key-line > span { display: inline-flex; align-items: center; gap: 5px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-key-line > span > .gallery-soft-heatmap-swatch { width: 7px; height: 7px; border-radius: 2px; background: var(--soft-accent); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-key-line > .gallery-soft-heatmap-agent-key > .gallery-soft-heatmap-swatch { background: var(--soft-agent); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split > .gallery-soft-heatmap-key-line > span > .gallery-soft-heatmap-share { font: 600 11.5px var(--soft-num); color: var(--soft-text); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-room { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-room > .gallery-soft-heatmap-legend { align-self: flex-end; margin-top: auto; }
+  /* Three cells high (8 × 3, the user's word of 2026-11-09): the figures beside the squares the total and the
+     first two under it (the days with any, today's), no average, most or shares' bar, which the height has no room for. */
+  > .gallery-soft-heatmap-face[data-h="3"] > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-figures > :nth-child(n + 5) { display: none; }
+  > .gallery-soft-heatmap-face[data-h="3"] > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside > .gallery-soft-heatmap-split { display: none; }
+  /* Two cells high (8 × 2): the squares alone, no head, figures or legend; the months' row the first, kept out of
+     the grip's corner by the script (the probe: as wide as that corner). */
+  > .gallery-soft-heatmap-face[data-alone] > .gallery-soft-heatmap-head { display: none; }
+  > .gallery-soft-heatmap-face[data-alone] > .gallery-soft-heatmap-body { margin-top: 0; }
+  > .gallery-soft-heatmap-face[data-alone] > .gallery-soft-heatmap-body > .gallery-soft-heatmap-aside { display: none; }
+  > .gallery-soft-heatmap-face[data-alone] > .gallery-soft-heatmap-body > .gallery-soft-heatmap-room > .gallery-soft-heatmap-legend { display: none; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-grip-room { position: absolute; width: var(--soft-grip-room, 0px); height: 0; visibility: hidden; pointer-events: none; }
+  /* The squares, the months and the weekdays, placed by the script. */
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-body > .gallery-soft-heatmap-room > .gallery-soft-heatmap-grid { position: relative; flex: 1; min-height: 0; }
+  .gallery-soft-heatmap-day { position: absolute; border-radius: 5px; background: var(--soft-h0); }
+  :is(.gallery-soft-heatmap-day, .gallery-soft-heatmap-key)[data-level="1"] { background: var(--soft-h1); }
+  :is(.gallery-soft-heatmap-day, .gallery-soft-heatmap-key)[data-level="2"] { background: var(--soft-h2); }
+  :is(.gallery-soft-heatmap-day, .gallery-soft-heatmap-key)[data-level="3"] { background: var(--soft-h3); }
+  :is(.gallery-soft-heatmap-day, .gallery-soft-heatmap-key)[data-level="4"] { background: var(--soft-h4); }
+  .gallery-soft-heatmap-day.gallery-soft-heatmap-before { background: radial-gradient(circle, var(--soft-slot) 0 2px, transparent 2.5px); }
+  .gallery-soft-heatmap-day.gallery-soft-heatmap-today { box-shadow: 0 0 0 2px var(--soft-card), 0 0 0 3.5px var(--soft-accent); }
+  .gallery-soft-heatmap-day.gallery-soft-heatmap-pointed { box-shadow: 0 0 0 2px var(--soft-card), 0 0 0 3.5px var(--soft-strong); }
+  :is(.gallery-soft-heatmap-month, .gallery-soft-heatmap-row) { position: absolute; font-size: 11px; line-height: 14px; color: var(--soft-muted); white-space: nowrap; }
+  .gallery-soft-heatmap-month { top: 0; }
+  .gallery-soft-heatmap-row { left: 0; }
+  /* The tip: over the card in the top layer (a popover, else fixed), placed in the window by the script. */
+  .gallery-soft-heatmap-tip {
+    position: fixed;
+    inset: auto;
+    z-index: 10; /* the top layer needs none: this is where no popover is */
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+    overflow: visible;
+    padding: 7px 10px;
+    border-radius: 8px;
+    background: var(--soft-strong);
+    color: var(--soft-card);
+    font-size: 11.5px;
+    line-height: 1.45;
+    white-space: nowrap;
+    box-shadow: 0 6px 18px -6px rgb(0 0 0 / 35%);
+    pointer-events: none;
+  }
+  .gallery-soft-heatmap-tip[hidden] { display: none; }
+  .gallery-soft-heatmap-tip > .gallery-soft-heatmap-tip-count { font-family: var(--soft-num); font-weight: 600; }
+  .gallery-soft-heatmap-tip > :is(.gallery-soft-heatmap-tip-day, .gallery-soft-heatmap-tip-who) { opacity: .7; }
+  /* Nothing read: the cards' empty face. */
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-empty { display: none; }
+  > .gallery-soft-heatmap-face[data-unread] > .gallery-soft-heatmap-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; min-height: 0; text-align: center; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-empty > .gallery-soft-heatmap-disc { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--soft-track); color: var(--soft-muted); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-empty > .gallery-soft-heatmap-disc > svg { display: block; width: 20px; height: 20px; }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-empty > .gallery-soft-heatmap-line { margin: 0; font-size: 13px; color: var(--soft-text); }
+  > .gallery-soft-heatmap-face > .gallery-soft-heatmap-empty > .gallery-soft-heatmap-how { margin: 0; font-size: 12px; color: var(--soft-muted); }
+}
+/* On a custom page: the face over the card's whole room, its padding the soft frame's, the board's line around it; the head's end kept clear of the grip's corner. */
+.gallery-card > [data-doc-component="gallery-soft/heatmap"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/heatmap"] > .gallery-soft-heatmap-face {
+  --soft-edge: 1px;
+  --soft-grip-room: max(0px, calc(40px - var(--soft-pad)));
+  width: auto;
+  max-width: none;
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  border-radius: calc(var(--gallery-card-radius) - 1px);
+  box-shadow: none;
+}

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

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

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

@@ -0,0 +1,23 @@
+# 编辑热力图 (gallery-soft/heatmap)
+
+A card for a custom page (its places are `page`, its needs `workspace`): how much the workspace was edited each day of the past year, as GitHub draws a year of contributions, a column a week, a square a day, darker for a day of more. What it counts is Gallery's own record of edits (the reader's saves and the Agent's writes, by day, since the workspace's first start of a Gallery that keeps it): the edits of a day, or with its setting the words it added. Use it on the home page.
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/heatmap`, 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.
+
+## Settings
+
+Its one setting is the card's form, which the user opens from the grip at the card's top right › 设置…:
+
+| Key | Label | Type | What it is |
+| --- | --- | --- | --- |
+| `words` | 按字数显示 | switch | each day by the words it added, not by how many edits it had |
+
+It is kept in its data part `settings`, a `<script type="application/json">`: `{}` (template.html, what a menu adds) counts edits. Write `{"words":true}` when the user asks for the words written. The block reads it and writes nothing.
+
+## How to write it
+
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add gallery-soft/heatmap`, the instance as template.html has it. Sizes: 8 × 4 (the default: the squares and the figures beside them), 6 × 4 (the squares alone, less to more under them), 12 × 4 (more weeks), 8 × 3 (the squares and the total beside them, with the days that had edits and today's) and 8 × 2 (the squares alone, smaller, about 43 weeks: no head, figures or legend): as many weeks as the card holds are drawn, the last ending today.
+
+## How it looks
+
+编辑热力图 beside a calendar's chip on the top line, less to more at its end (on a 6 × 4 card the count and the weeks instead); the squares large (22px, 20px on a 6 × 4 card), a column a week, Monday at the top, a month's name over the week it begins in, today ringed in the accent, a day before the record began a faint dot, the shade of each by where its day stands among the days of any edit; the pointer on a square says its day, its count and how much of it was the user's and how much the Agent's. Beside the squares on an 8 × 4 or 12 × 4 card: what they count (近 14 周编辑), its total large, the days with edits of the days recorded and today's, the average a day and the day of the most, and a bar of two shares, 你 and Agent; while nothing is counted yet, since when it records and what it will show; in 柔光风格's soft look (as every card of it: a faint wash of blue from the card's top, a head of a rounded tinted chip and a title, its end clear of the card's grip), light and dark. The script runs with the rights of the page's own scripts, as any block's does.

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

@@ -0,0 +1,14 @@
+{
+  "id": "gallery-soft/note",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "便签", "en": "Note" },
+  "description": { "zh": "几行随手记，写在一张纸上，在卡片上直接写，存在页面里", "en": "A few lines jotted on a sheet of paper, typed on the card and kept in the page" },
+  "words": "bianqian note memo sticky 便签 笔记 随手记 记事",
+  "parts": {
+    "note": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-soft-note-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "min": { "w": 2, "h": 2 }, "max": { "w": 4, "h": 8 }, "resize": true }
+}

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

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery-soft/note">
+  <script type="application/json">{"text":"周三前把发布说明发给小林\n续费域名（11月20日到期）\n周五晚上和阿杰吃饭，订 7 点的位"}</script>
+</div>

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

@@ -0,0 +1,162 @@
+// gallery-soft/note (便签, 柔光风格): Gallery 风格's gallery/note in the soft look, the same logic. A few lines
+// of free text, kept in the instance's data part, a script of JSON, { "text": "…" }, and typed on the card
+// itself, in a <textarea> the block draws. The field is the kit's (DocKit.input): what the reader typed goes
+// to the file once they are done with it, as they leave the field or press Ctrl+Enter (⌘Enter on a Mac;
+// Enter alone is a new line), never while an input method composes, and never a value it holds already; Esc
+// puts back what the file holds. Each of those is one context.editJSON, one undo step, the JSON written
+// back on one line as it was. It draws from the part on every `source` (an Agent's write, an undo), the
+// words the reader is typing kept where they are. Where nothing takes its writes (an export, a page that
+// has not come to edit yet: context.canEdit() false) the field is read-only, and shows the same words.
+//
+// Its face is a sheet of paper (the paper's warm fill, faint ruled lines the words sit on): a head (the
+// chip, a note's picture in the warm color, 便签, and how many characters it holds, its blanks not
+// counted, said again as the reader types), the field under it, and while the reader types in it a line
+// at the bottom saying how to keep and how to drop what they typed (Ctrl+Enter 保存, Esc 放弃). An empty
+// note says 写点什么, on a wide card with an example of what (比如今天要记住的事). Laid out by its card's size
+// (`context.size`, read again on `layout`; the face's data-w, data-h and data-pad, style.css).
+
+const WORDS = {
+  zh: {
+    empty: "写点什么",
+    emptyWide: "写点什么，比如今天要记住的事",
+    label: "便签",
+    count: (/** @type {number} */ count) => `${count} 字`,
+    keep: (/** @type {boolean} */ mac) => `${mac ? "⌘" : "Ctrl+"}Enter 保存`,
+    drop: "Esc 放弃",
+  },
+  en: {
+    empty: "Write something",
+    emptyWide: "Write something to remember today",
+    label: "Note",
+    count: (/** @type {number} */ count) => `${count} ${count === 1 ? "character" : "characters"}`,
+    keep: (/** @type {boolean} */ mac) => `${mac ? "⌘" : "Ctrl+"}Enter to keep`,
+    drop: "Esc to drop",
+  },
+};
+
+/** 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";
+}
+
+/**
+ * The words a note's data holds (context.readJSON's): its `text`, "" where it has none yet; throws
+ * saying why for data that is no note, which the block does not draw over.
+ * @param {any} data
+ * @returns {string}
+ */
+function textOf(data) {
+  if (data === null || typeof data !== "object" || Array.isArray(data)) throw new Error("its data is no object: a note holds { \"text\": \"…\" }");
+  if (data.text === undefined) return "";
+  if (typeof data.text !== "string") throw new Error("its text is no string");
+  return data.text;
+}
+
+/**
+ * The note made to hold `text`, one write (context.editJSON): what a reader's words, once they are done
+ * with the field, call, and the example too. Whether it was taken.
+ * @param {DocComponentContext} context
+ * @param {string} text
+ */
+function writeNote(context, text) {
+  return context.editJSON("note", (data) => {
+    textOf(data);
+    data.text = text;
+  });
+}
+
+/** How many characters `text` holds, its blanks not counted (the head's count). @param {string} text */
+const countOf = (text) => [...text.replace(/\s+/g, "")].length;
+
+/**
+ * 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" };
+}
+
+DocKit.component({
+  id: "gallery-soft/note",
+  on: ["source", "editable", "layout"],
+  mount(host, context) {
+    const words = WORDS[languageOf(document.documentElement)];
+    const mac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+    const face = document.createElement("div");
+    face.className = "gallery-soft-note-face";
+    const head = document.createElement("div");
+    head.className = "gallery-soft-note-head";
+    head.setAttribute("aria-hidden", "true");
+    const chip = document.createElement("span");
+    chip.className = "gallery-soft-note-chip";
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4.5h14v9.2L13.7 19H5z"/><path d="M13.5 19v-5.5H19"/><path d="M8.5 8.5h7M8.5 11.5h4"/></svg>';
+    const title = document.createElement("span");
+    title.className = "gallery-soft-note-title";
+    title.textContent = words.label;
+    // Its quiet meta at the head's end: how many characters the field holds (its blanks not counted), as the reader types too.
+    const meta = document.createElement("span");
+    meta.className = "gallery-soft-note-meta";
+    head.append(chip, title, meta);
+    const field = document.createElement("textarea");
+    field.className = "gallery-soft-note-field";
+    field.spellcheck = false;
+    field.setAttribute("aria-label", words.label);
+    // While the reader types: how to keep and how to drop it.
+    const hint = document.createElement("div");
+    hint.className = "gallery-soft-note-hint";
+    hint.setAttribute("aria-hidden", "true");
+    const keep = document.createElement("span");
+    keep.textContent = words.keep(mac);
+    const drop = document.createElement("span");
+    drop.textContent = words.drop;
+    hint.append(keep, drop);
+    face.append(head, field, hint);
+    host.append(face);
+    const typed = DocKit.input(field, { signal: context.signal, commit: (value) => writeNote(context, value) });
+    const recount = () => {
+      const count = countOf(field.value);
+      const said = count > 0 ? words.count(count) : "";
+      if (meta.textContent !== said) meta.textContent = said;
+    };
+    field.addEventListener("input", recount);
+    context.signal?.addEventListener("abort", () => field.removeEventListener("input", recount), { once: true });
+    const lay = () => {
+      const { w, h, pad } = sizeOf(context.size, [4, 2]);
+      face.dataset.w = String(w);
+      face.dataset.h = String(h);
+      face.dataset.pad = pad;
+      const placeholder = w <= 2 ? words.empty : words.emptyWide;
+      if (field.placeholder !== placeholder) field.placeholder = placeholder;
+    };
+    const draw = () => {
+      const data = context.readJSON("note");
+      if (data === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
+      let text;
+      try {
+        text = textOf(data);
+      } catch (error) {
+        return context.fail(error);
+      }
+      field.readOnly = !context.canEdit();
+      typed.set(text);
+      recount();
+    };
+    lay();
+    draw();
+    return {
+      update(reason) {
+        if (reason === "layout") lay();
+        else draw();
+      },
+    };
+  },
+  example(host, context) {
+    writeNote(context, `${textOf(context.readJSON("note"))}\n再加一行`);
+  },
+});

package/packs/gallery-soft/note/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="#fffcf3" stroke="#e8e7e4"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#fdf1df"/><rect x="34" y="30" width="6" height="2" rx="1" fill="#e59a2c"/><rect x="50" y="28" width="26" height="6" rx="3" fill="#37352f"/><rect x="186" y="28" width="18" height="6" rx="3" fill="#c4c2bd"/><rect x="30" y="48" width="150" height="6" rx="3" fill="#4a4843"/><rect x="30" y="58" width="180" height="1" fill="#eadfca"/><rect x="30" y="63" width="120" height="6" rx="3" fill="#4a4843"/><rect x="30" y="73" width="180" height="1" fill="#eadfca"/><rect x="30" y="78" width="92" height="6" rx="3" fill="#4a4843"/><rect x="30" y="88" width="180" height="1" fill="#eadfca"/></svg>

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

@@ -0,0 +1,148 @@
+/* 柔光风格's note. 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 soft look's tokens first, light and dark (light-dark():
+   the page's color scheme, which follows its theme), then the face: a sheet of paper, its warm fill and
+   faint ruled lines the words sit on, one every line of the field's (the lines scroll with its words), a
+   head of a warm chip, 便签 and the count at its end, the field under it with no border, fill or ring of its
+   own, its placeholder faint (muted while the reader types), the caret the accent; while the field has the
+   focus and takes edits, a line at the bottom saying how to keep and drop what was typed. On a custom page
+   the face is the card's whole room, taken out over the card's padding and given the soft frame's (20px,
+   18px on a 2 × 2 card, 24px on a tall one: the face's data-pad), the board's line around it; where no card
+   is (a document, as gallery block check shows it) the face frames itself at the size of a 4 × 2 card. */
+[data-doc-component="gallery-soft/note"] {
+  --soft-font: "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  --soft-num: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --soft-card-line: light-dark(rgb(28 28 32 / 6.5%), rgb(255 255 255 / 7.5%));
+  --soft-card-shadow: 0 0 0 1px var(--soft-card-line), 0 1px 2px light-dark(rgb(28 28 32 / 3.5%), rgb(0 0 0 / 0%)), 0 8px 24px -14px light-dark(rgb(28 28 32 / 12%), rgb(0 0 0 / 60%));
+  --soft-text: light-dark(#37352f, #d9d9dc);
+  --soft-strong: light-dark(#1f1f1f, #f1f1f2);
+  --soft-muted: light-dark(#7a7a7f, #9d9da3);
+  --soft-faint: light-dark(#ababb0, #66666c);
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-warm: light-dark(#e59a2c, #f0b257);
+  --soft-warm-soft: light-dark(#fdf1df, rgb(240 178 87 / 14%));
+  --soft-paper: light-dark(#fffcf3, #232220);
+  --soft-paper-line: light-dark(rgb(160 120 40 / 10%), rgb(255 220 150 / 6%));
+  --soft-grip-room: 0px;
+  > .gallery-soft-note-face {
+    --soft-pad: 20px;
+    --soft-line: 22px;
+    --soft-head: 28px;
+    --soft-gap: 10px;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 304px;
+    max-width: 100%;
+    height: 144px;
+    padding: calc(var(--soft-pad) - var(--soft-edge, 0px));
+    overflow: hidden;
+    border-radius: 16px;
+    box-shadow: var(--soft-card-shadow);
+    background: var(--soft-paper);
+    color: var(--soft-text);
+    font: 13px/1.5 var(--soft-font);
+    -webkit-font-smoothing: antialiased;
+  }
+  > .gallery-soft-note-face[data-pad="s"] { --soft-pad: 18px; --soft-line: 21px; --soft-head: 24px; --soft-gap: 8px; }
+  > .gallery-soft-note-face[data-pad="l"] { --soft-pad: 24px; }
+  > .gallery-soft-note-face[data-pad="xs"] { padding: 0 calc(16px - var(--soft-edge, 0px)); justify-content: center; }
+  > .gallery-soft-note-face > .gallery-soft-note-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: none;
+    height: 28px;
+    min-width: 0;
+    padding-inline-end: var(--soft-grip-room);
+  }
+  > .gallery-soft-note-face > .gallery-soft-note-head > .gallery-soft-note-chip {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: var(--soft-warm-soft);
+    color: var(--soft-warm);
+  }
+  > .gallery-soft-note-face > .gallery-soft-note-head > .gallery-soft-note-chip > svg { display: block; width: 16px; height: 16px; }
+  > .gallery-soft-note-face > .gallery-soft-note-head > .gallery-soft-note-title {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--soft-strong);
+  }
+  > .gallery-soft-note-face > .gallery-soft-note-head > .gallery-soft-note-meta:empty { display: none; }
+  > .gallery-soft-note-face > .gallery-soft-note-head > .gallery-soft-note-meta {
+    flex: none;
+    margin-left: auto;
+    margin-inline-end: calc(-1 * var(--soft-grip-room));
+    font-size: 12px;
+    color: var(--soft-muted);
+    white-space: nowrap;
+    opacity: calc(1 - var(--gallery-grip-shown, 0));
+    transition: opacity .12s ease-out;
+  }
+  > .gallery-soft-note-face[data-pad="s"] > .gallery-soft-note-head { gap: 8px; height: 24px; }
+  > .gallery-soft-note-face[data-pad="s"] > .gallery-soft-note-head > .gallery-soft-note-chip { width: 24px; height: 24px; border-radius: 7px; }
+  > .gallery-soft-note-face[data-pad="s"] > .gallery-soft-note-head > .gallery-soft-note-chip > svg { width: 14px; height: 14px; }
+  > .gallery-soft-note-face[data-pad="s"] > .gallery-soft-note-head > .gallery-soft-note-title { font-size: 13px; }
+  /* The field: the paper's ruled lines, one a line of its words, as high as whole lines fit. */
+  > .gallery-soft-note-face > .gallery-soft-note-field {
+    display: block;
+    flex: none;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 0;
+    height: round(down, calc(100% - var(--soft-head) - var(--soft-gap) - var(--soft-hint, 0px)), var(--soft-line));
+    margin: var(--soft-gap) 0 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    resize: none;
+    background-color: transparent;
+    background-image: linear-gradient(transparent calc(var(--soft-line) - 1px), var(--soft-paper-line) calc(var(--soft-line) - 1px), var(--soft-paper-line) var(--soft-line));
+    background-size: 100% var(--soft-line);
+    background-attachment: local;
+    font: inherit;
+    font-size: 13.5px;
+    line-height: var(--soft-line);
+    color: var(--soft-text);
+    caret-color: var(--soft-accent);
+    overflow-wrap: break-word;
+    scrollbar-width: none;
+  }
+  > .gallery-soft-note-face[data-pad="s"] > .gallery-soft-note-field { font-size: 13px; }
+  > .gallery-soft-note-face > .gallery-soft-note-field::placeholder { color: var(--soft-faint); opacity: 1; }
+  > .gallery-soft-note-face > .gallery-soft-note-field:focus::placeholder { color: var(--soft-muted); }
+  > .gallery-soft-note-face > .gallery-soft-note-field:read-only { cursor: default; }
+  > .gallery-soft-note-face > .gallery-soft-note-hint {
+    display: none;
+    justify-content: space-between;
+    gap: 8px;
+    flex: none;
+    margin-top: 6px;
+    font-size: 11.5px;
+    line-height: 18px;
+    color: var(--soft-muted);
+    white-space: nowrap;
+  }
+  > .gallery-soft-note-face:has(> .gallery-soft-note-field:focus:not(:read-only)) { --soft-hint: 24px; }
+  > .gallery-soft-note-face:has(> .gallery-soft-note-field:focus:not(:read-only)) > .gallery-soft-note-hint { display: flex; margin-top: auto; }
+}
+/* On a custom page: the face over the card's whole room, its padding the soft frame's, the board's line around it; the head's end kept clear of the grip's corner. */
+.gallery-card > [data-doc-component="gallery-soft/note"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/note"] > .gallery-soft-note-face {
+  --soft-edge: 1px;
+  --soft-grip-room: max(0px, calc(40px - var(--soft-pad)));
+  width: auto;
+  max-width: none;
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  border-radius: calc(var(--gallery-card-radius) - 1px);
+  box-shadow: none;
+}

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

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

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

@@ -0,0 +1,20 @@
+# 便签 (gallery-soft/note)
+
+A card for a custom page (its places are `page`): a few lines the user types on the card itself, kept in the page. Use it where the user wants to jot something down beside the rest of a page (a reminder, a list for today).
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/note`, 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/note`, the instance as template.html has it: its data part, a `<script type="application/json">` holding `{"text":"…"}` (on one line and compact, as the block writes it back), the note's words, lines apart with `\n`; `{"text":""}` for an empty one, which shows 写点什么.
+
+- Leave the words of a note that is there alone: they are the user's. To start one with words of yours (a list the user asked for), write them in `text`, as example.html does.
+- Sizes: 4 × 2 (the default), 2 × 2 and 4 × 4 are the ones its menu lists; any height from 2 to 8 cells, 2 to 4 wide, is one too (the card's corner reaches each). Words that do not fit scroll inside the card.
+
+## What the user does
+
+They click the card and type. What they typed is written to the page once they leave the card, or press Ctrl+Enter (⌘Enter on a Mac); Enter alone starts a new line, and Esc puts back what was there. Each write is one step of the page's undo. Nothing is written while a Chinese input method is composing.
+
+## How it looks
+
+A sheet of paper: the paper's warm fill and faint ruled lines the words sit on, a head of a warm chip, 便签 and how many characters it holds (65 字) at its end, the words under it in the page's font, as many lines as the card holds whole; an empty one says 写点什么 (on a wide card 写点什么，比如今天要记住的事), faint; while the user types, a line at the bottom says how to keep and how to drop it (Ctrl+Enter 保存, Esc 放弃); in 柔光风格's soft look (as every card of it: a faint wash of blue from the card's top, a head of a rounded tinted chip and a title, its end clear of the card's grip), light and dark. Where nothing can be written (an export) the words show read-only. The script runs with the rights of the page's own scripts, as any block's does.

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

@@ -0,0 +1,13 @@
+{
+  "id": "gallery-soft/recent",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "最近编辑", "en": "Recently edited" },
+  "description": { "zh": "最近改过的文档，像侧栏一样一行一篇，点一篇就打开它", "en": "The documents edited last, a row each as in the sidebar: click one to open it" },
+  "words": "zuijinbianji zuijin bianji recent recently edited documents 最近 最近编辑 文档 改过",
+  "parts": {},
+  "runtime": { "generated": [":scope > .gallery-soft-recent-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 4], [4, 2], [4, 6]], "min": { "w": 4, "h": 2 }, "max": { "w": 4, "h": 8 }, "resize": true },
+  "needs": ["workspace"]
+}

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

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