@heycys/gallery 0.1.2 → 0.2.1

package/packs/gallery/stats/style.css

@@ -1,151 +1,73 @@
 /* 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 工作区统计, its end clear of the card's grip), then four
-   cells in the middle of the room under it, each its label small and muted (after a small picture of
-   what it counts) over its number, large (the cards' figure size), its
-   unit small and muted after it, the to-dos done with a bar under their count, as wide as the cell, the
-   share done in the accent on the track; two by two on a card 4 cells wide, the room the card has spread
-   evenly above, between and under the rows (the face's gap between them at the least), all four in a row
-   past 560px (the instance is a container), the hero size, a hairline between them and each cell's bar
-   ending short of the next one's line, and on a card too low for two rows with their air (under 160px: a
-   4 x 2 one from a window 1440px wide and narrower) in a row too, smaller; a line under them where the
-   workspace cannot be read. Light and dark. */
+   reaches the rest of the page. The pack's design B, in the kit's card tokens: no head, four cells, each
+   its label after a small picture of what it counts (12px, muted; the picture faint), its number (28px,
+   32px on a wide card) with its unit or its whole after it, its picture at the bottom (the documents'
+   squares, the words' line and the area fading under it, the to-dos' bar, the week's bars: the accent and
+   its middle shade, on the track) and a faint line under it, its key words 600. In a row (8 × 2, 12 × 2)
+   the cells stand a hairline apart, the face out over the card's padding at its sides so that each cell has
+   the card's own 16px; two by two (4 × 4) the face fills the card, each cell padded 16px, lined between
+   them. Unread (no workspace) a faint dash each and a line at the bottom left. Light and dark. */
 [data-doc-component="gallery/stats"] {
-  container-type: size;
-  height: 9em;
-  > .gallery-stats-face {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gallery-face-gap);
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 0;
-    color: var(--gallery-text);
-  }
-  > .gallery-stats-face > .gallery-stats-head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: none;
-    min-width: 0;
-    padding-inline-end: var(--gallery-grip-room, 0px);
-  }
-  > .gallery-stats-face > .gallery-stats-head > .gallery-stats-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-stats-face > .gallery-stats-head > .gallery-stats-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
-  > .gallery-stats-face > .gallery-stats-head > .gallery-stats-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-strong);
-  }
-  > .gallery-stats-face > .gallery-stats-grid {
-    display: grid;
-    flex: 1 1 auto;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    align-content: space-evenly;
-    gap: var(--gallery-face-gap) 16px;
-    min-height: 0;
-    margin: 0;
-  }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell { min-width: 0; }
-  /* Each label after a small picture of what it counts, in its muted color. */
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: var(--gallery-meta-size);
-    line-height: 16px;
-    color: var(--doc-muted);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label::before {
-    content: "";
-    flex: none;
-    width: 13px;
-    height: 13px;
-    background: currentColor;
-    opacity: .85;
-    -webkit-mask: var(--gallery-stats-icon) center / contain no-repeat;
-    mask: var(--gallery-stats-icon) center / contain no-repeat;
-  }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="documents"] { --gallery-stats-icon: 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='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/svg%3E"); }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="todos"] { --gallery-stats-icon: 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='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="words"] { --gallery-stats-icon: 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='M5 7V5h14v2'/%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M9 19h6'/%3E%3C/svg%3E"); }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell[data-stat="week"] { --gallery-stats-icon: 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='M4 20h4L18.5 9.5a2.83 2.83 0 1 0-4-4L4 16v4'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    margin: 3px 0 0;
-    font-size: var(--gallery-figure-size);
-    line-height: 1.1;
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-stats-face { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
+  > .gallery-stats-face > .gallery-stats-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 0; margin: 0; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell { display: flex; flex-direction: column; min-width: 0; padding: 0 16px; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { border-left: 1px solid var(--gallery-hair); }
+  > .gallery-stats-face[data-unread] > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { border-left-color: transparent; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > dd { margin: 0; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label { display: flex; align-items: center; gap: 6px; padding-inline-end: 0; font-size: 12px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label > svg { flex: none; width: 13px; height: 13px; color: var(--gallery-faint); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label > .gallery-stats-label-words { overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value { display: flex; align-items: baseline; margin-top: 7px; white-space: nowrap; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-number {
+    font-size: 28px;
+    line-height: 1;
     font-weight: var(--gallery-numeral-weight);
     letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
     color: var(--gallery-text-strong);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-unit {
-    margin-inline-start: var(--gallery-unit-gap);
-    font-size: max(12px, var(--gallery-unit-size));
-    font-weight: 500;
-    letter-spacing: 0;
-    color: var(--doc-muted);
-  }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-unit:empty { display: none; }
-  /* The share of the to-dos done: a bar of the accent on the track under the count, as wide as the cell. */
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-bar {
-    flex: 0 0 100%;
-    height: 4px;
-    margin-top: 6px;
-    border-radius: 2px;
-    background: var(--gallery-track);
-    overflow: hidden;
   }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-bar > .gallery-stats-fill {
-    display: block;
-    width: calc(var(--share, 0) * 100%);
-    height: 100%;
-    border-radius: 2px;
-    background: var(--gallery-accent);
-  }
-  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-bar[hidden] { display: none; }
-  > .gallery-stats-face > .gallery-stats-line { margin: 0; font-size: var(--gallery-meta-size); line-height: 1.4; color: var(--doc-muted); }
+  > .gallery-stats-face[data-unread] > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-number { font-weight: 300; color: var(--gallery-faintest); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-of { margin-left: 3px; font-size: 15px; font-weight: 600; color: var(--gallery-faint); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-picture { margin-top: auto; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-picture > svg { display: block; overflow: visible; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-caption { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; overflow: hidden; }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-caption > .gallery-stats-mark { flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--gallery-accent); }
+  > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-caption > .gallery-stats-strong { font-weight: 600; color: var(--gallery-muted); }
+  /* The pictures' colors. */
+  > .gallery-stats-face .gallery-stats-on { fill: var(--gallery-accent); }
+  > .gallery-stats-face :is(.gallery-stats-off, .gallery-stats-stub) { fill: var(--gallery-track); }
+  > .gallery-stats-face .gallery-stats-empty { fill: var(--gallery-fill); }
+  > .gallery-stats-face .gallery-stats-flat { stroke: var(--gallery-track); }
+  > .gallery-stats-face .gallery-stats-line { stroke: var(--gallery-accent); }
+  > .gallery-stats-face .gallery-stats-stop { stop-color: var(--gallery-accent); }
+  > .gallery-stats-face .gallery-stats-end { fill: var(--gallery-accent); stroke: var(--gallery-card-fill); }
+  > .gallery-stats-face .gallery-stats-today { fill: var(--gallery-accent); }
+  > .gallery-stats-face .gallery-stats-day { fill: var(--gallery-accent-mid); }
+  > .gallery-stats-face .gallery-stats-bar { position: relative; display: block; height: 6px; border-radius: 3px; overflow: hidden; background: var(--gallery-track); }
+  > .gallery-stats-face .gallery-stats-bar > .gallery-stats-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gallery-accent); }
+  /* Unread: a line at the bottom left. */
+  > .gallery-stats-face > .gallery-stats-line { position: absolute; left: 16px; bottom: 0; margin: 0; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); }
   > .gallery-stats-face > .gallery-stats-line[hidden] { display: none; }
+  /* A wide card: the numbers larger. */
+  > .gallery-stats-face[data-layout="wide"] > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value > .gallery-stats-number { font-size: 32px; }
+  /* A square card: two by two. */
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell { padding: 16px; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { border-left: 0; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell:nth-child(2n) { border-left: 1px solid var(--gallery-hair); }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-grid > .gallery-stats-cell:nth-child(n + 3) { border-top: 1px solid var(--gallery-hair); }
+  > .gallery-stats-face[data-layout="square"][data-unread] > .gallery-stats-grid > .gallery-stats-cell { border-color: transparent; }
+  > .gallery-stats-face[data-layout="square"] .gallery-stats-bar { height: 8px; border-radius: 4px; }
+  > .gallery-stats-face[data-layout="square"] .gallery-stats-bar > .gallery-stats-fill { border-radius: 4px; }
+  > .gallery-stats-face[data-layout="square"] > .gallery-stats-line { bottom: 16px; }
 }
-/* Wide (8 cells and more): the four in one row, a hairline between them, each cell's bar ending short of the
-   next line, the hero size. */
-@container (min-width: 560px) {
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell + .gallery-stats-cell { padding-inline-start: 20px; border-inline-start: 1px solid var(--doc-grid); }
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell:not(:last-child) { padding-inline-end: 16px; }
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value { font-size: var(--gallery-hero-size); }
-}
-/* Low (under 160px: a 4 x 2 card from a window 1440px wide and narrower, where two rows under the head would
-   leave the second at the card's bottom edge): the four in one row, their numbers smaller, their labels with
-   no picture. */
-@container (max-height: 160px) and (max-width: 559px) {
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; align-content: center; }
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-label::before { display: none; }
-  [data-doc-component="gallery/stats"] > .gallery-stats-face > .gallery-stats-grid > .gallery-stats-cell > .gallery-stats-value { font-size: clamp(16px, 6.4cqi, 22px); }
-}
-/* On a custom page the face is the card's: as high as what the card holds inside its padding. Where no card
-   is around it (a document, as gallery block check shows it) it is as high as a 4 x 2 card's face, for the
-   instance is a container of its height too and would otherwise have none. */
+/* On a custom page the face is the card's: out over its padding at its sides (all round when square), so
+   that each cell has the card's own room. */
 .gallery-card > [data-doc-component="gallery/stats"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/stats"] > .gallery-stats-face { height: 100%; margin: 0 calc(-1 * var(--gallery-card-pad)); }
+.gallery-card > [data-doc-component="gallery/stats"] > .gallery-stats-face[data-layout="square"] { height: calc(100% + 2 * var(--gallery-card-pad)); margin: calc(-1 * var(--gallery-card-pad)); }

package/packs/gallery/stats/writing.md

@@ -4,8 +4,8 @@ A card for a custom page (its places are `page`, its needs `workspace`): four nu
 
 ## 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 stats`: the instance is empty, `<div data-doc-component="gallery/stats"></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 × 2 (the default: two by two) and 8 × 2 (the four in a row).
+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 stats`: the instance is empty, `<div data-doc-component="gallery/stats"></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: 8 × 2 (the default: the four in a row), 12 × 2 (the same, larger) and 4 × 4 (two by two).
 
 ## How it looks
 
-工作区统计 beside a chart's chip on the top line, then each number large under its label, muted, after a small picture of what it counts (two by two, or four in a row on a wide card or a low one), the to-dos done with a bar under them, the share done in the accent; 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; a workspace with no document shows each 0. The numbers follow by themselves: a document written, a to-do checked, a document made or taken away shows at once. A big count of words is said short (12.3万). In an exported file, which has no workspace to read, each is a dash, with a line saying it 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.
+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. It has no head: the four labels are its titles, each after a small picture of what it counts, four cells a hairline apart (two by two on a 4 × 4 card), each a number (28px) and a small chart of its own: the documents a square each, those edited this week in the accent; the words a line of their total over the last 30 days and what those days added (近 30 天 +6万); the to-dos done a bar (70% · 还剩 8 项); the edits this week a bar a day, today's in the accent, against the same days of the week before (比上周同期 +14%). An empty workspace says 0 and what each waits for; where the workspace cannot be read, a dash each.

package/packs/gallery/today/component.json

@@ -1,12 +1,12 @@
 {
   "id": "gallery/today",
   "apiVersion": 1,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "name": { "zh": "问候与日期", "en": "Greeting and date" },
   "description": { "zh": "按时间问候，显示今天的日期和星期，到点自己更新", "en": "A greeting by the time of day, today's date and weekday, kept up to date by the clock" },
   "words": "wenhouyuriqi wenhou riqi xingqi jintian today greeting date 问候 日期 星期 今天 时间",
   "parts": {},
   "runtime": { "generated": [":scope > .gallery-today-face"] },
   "places": ["page"],
-  "card": { "sizes": [[4, 2], [2, 2]], "resize": true }
+  "card": { "sizes": [[4, 2], [2, 2], [4, 1]], "resize": true }
 }

package/packs/gallery/today/kit.js

@@ -5,14 +5,20 @@
 // else Chinese, the kit's own rule. Drawn again by the kit's clock (`clock`): at each whole minute, which
 // moves the greeting on as the hour turns, and as a day begins, which moves the date; one timer for
 // every block on the page, none of its own. It holds no part and writes nothing: all it shows is drawn
-// (the manifest's `runtime`), and a file holds the bare instance. On a custom page it is a card's whole
-// face, laid out by the room it has (style.css, container queries): a 2 x 2 card stacks what a 4 x 2
-// one sets on a line. Its head is the cards' chip (the kit's card tokens): the sun from 5 to 17, the moon
-// from 18 to 4, as the greeting's part of the day, which the face says too (`data-sky`: its glow, the
-// sun's warm color or the accent), and the number of the week (ISO 8601's, `weekNumberOf`) its quiet meta. A card wide enough also shows the week it is in, Monday
-// to Sunday, each day's initial over its date, today's 今 (Today) over its date and marked (`weekOf`):
-// drawn, for the eye alone (the date says it), again as a day begins. The date line's weekday is marked
-// (gallery-today-weekday), which a narrow card leaves out, so that its head stays one line (11月9日).
+// (the manifest's `runtime`), and a file holds the bare instance.
+//
+// Its face (the pack's design B, notes/plans/block-packs-plan-2026-11-09.md) is laid out by its card's
+// cells (`context.size`, read again on `layout`: the face's `data-layout`, style.css): a card 3 or more
+// wide and 2 or more high ("full", the 4 × 2 default) has a head of the chip (the sun from 5 to 17 in its
+// warm color, the moon after it in the accent's), the date and the number of the week (ISO 8601's,
+// `weekNumberOf`: 第 46 周) as its quiet meta, the greeting large under it, and the week it is in at the
+// bottom, Monday to Sunday, each day's initial over its date, the days gone fainter, today's 今 (Today)
+// over its date on the accent (`weekOf`, for the eye alone: the date says it); a narrow card ("narrow",
+// 2 wide) is a page of a desk calendar, the greeting in its head, today's day of the month large at the
+// bottom and its weekday and month under it; a card one cell high ("line", 4 × 1) a line, the chip, the
+// greeting and the date. A soft glow from the card's top left, the sun's warm color by day, the accent's
+// in the evening (the face's `data-sky`), the one mood of a home page. The date line's weekday is
+// marked (gallery-today-weekday), a piece a line breaks before and never inside.
 
 const WORDS = {
   zh: {
@@ -27,6 +33,8 @@ const WORDS = {
     line: (month, day, weekday) => [`${month}月${day}日`, weekday],
     /** Which of the line's pieces is the weekday. */
     weekdayAt: 1,
+    /** A desk calendar's foot: the weekday, then the month. @param {number} month @param {string} weekday */
+    foot: (month, weekday) => [weekday, `${month}月`],
   },
   en: {
     morning: "Good morning",
@@ -37,10 +45,13 @@ const WORDS = {
     today: "Today",
     week: (/** @type {number} */ number) => `Week ${number}`,
     /** The weekday first: Saturday, November 7. @param {number} month @param {number} day @param {string} weekday */
-    line: (month, day, weekday) => [`${weekday},`, `${["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month - 1]} ${day}`],
+    line: (month, day, weekday) => [`${weekday},`, `${MONTHS[month - 1]} ${day}`],
     weekdayAt: 0,
+    /** @param {number} month @param {string} weekday */
+    foot: (month, weekday) => [weekday, MONTHS[month - 1].slice(0, 3)],
   },
 };
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
 /** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
 function languageOf(/** @type {HTMLElement} */ root) {
@@ -77,10 +88,22 @@ function faceOf(now, language) {
   };
 }
 
+/**
+ * How a card of `size` (context.size: its cells, or null where no card holds it, a document) lays its face
+ * out: "line" one cell high, "narrow" two wide or less, else "full".
+ * @param {{ w: number, h: number } | null | undefined} size
+ * @returns {"full" | "narrow" | "line"}
+ */
+function layoutOf(size) {
+  if (!size) return "full";
+  if (size.h <= 1) return "line";
+  return size.w <= 2 ? "narrow" : "full";
+}
+
 // The chip's two pictures, 24 x 24 lines in the chip's ink: the sun by day, the moon in the evening.
 const PICTURES = {
-  sun: '<circle cx="12" cy="12" r="4" fill="currentColor" fill-opacity=".28"/><path d="M12 2.6v2.3M12 19.1v2.3M2.6 12h2.3M19.1 12h2.3M5.4 5.4l1.6 1.6M17 17l1.6 1.6M5.4 18.6l1.6-1.6M17 7l1.6-1.6"/>',
-  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2.8v1.9M12 19.3v1.9M2.8 12h1.9M19.3 12h1.9M5.5 5.5l1.3 1.3M17.2 17.2l1.3 1.3M5.5 18.5l1.3-1.3M17.2 6.8l1.3-1.3"/>',
+  moon: '<path d="M19.5 14.3A7.8 7.8 0 0 1 9.7 4.5a7.8 7.8 0 1 0 9.8 9.8z"/>',
 };
 
 /**
@@ -124,20 +147,24 @@ function made(tag, kind) {
 
 DocKit.component({
   id: "gallery/today",
-  on: ["clock"],
-  mount(host) {
+  on: ["clock", "layout"],
+  mount(host, context) {
     const face = made("div", "face");
     const chip = made("span", "chip");
     chip.setAttribute("aria-hidden", "true");
     const greeting = made("p", "greeting");
     const date = made("time", "date");
-    const week = made("ol", "week");
-    week.setAttribute("aria-hidden", "true");
-    face.append(chip, greeting, date, week);
-    // The head's quiet meta, at its end: the number of the week.
+    // The head's quiet meta, after the date: the number of the week.
     const number = made("span", "meta");
     number.setAttribute("aria-hidden", "true");
-    face.append(number);
+    const week = made("ol", "week");
+    week.setAttribute("aria-hidden", "true");
+    // A narrow card's desk calendar: the day of the month, large, and its weekday and month under it.
+    const big = made("span", "big");
+    big.setAttribute("aria-hidden", "true");
+    const foot = made("span", "foot");
+    foot.setAttribute("aria-hidden", "true");
+    face.append(chip, greeting, date, number, week, big, foot);
     host.append(face);
     // Each word set only when it is another, so that a minute that changes nothing writes nothing.
     const put = (/** @type {HTMLElement} */ node, /** @type {string} */ words) => {
@@ -146,7 +173,10 @@ DocKit.component({
     const draw = () => {
       const at = new Date();
       const language = languageOf(document.documentElement);
+      const words = WORDS[language];
       const now = faceOf(at, language);
+      const layout = layoutOf(context?.size);
+      if (face.dataset.layout !== layout) face.dataset.layout = layout;
       const sky = partOfDay(at.getHours()) === "evening" ? "moon" : "sun";
       if (chip.dataset.sky !== sky) {
         chip.dataset.sky = sky;
@@ -156,25 +186,30 @@ DocKit.component({
       put(greeting, now.greeting);
       // The date line's pieces, a space between them, made again only when its words are others.
       if (date.textContent !== now.line.join(" ")) {
-        date.replaceChildren(...now.line.flatMap((words, index) => {
-          const piece = made("span", "piece");
-          piece.classList.toggle("gallery-today-weekday", index === WORDS[language].weekdayAt);
-          piece.textContent = words;
-          return index === 0 ? [piece] : [" ", piece];
+        date.replaceChildren(...now.line.flatMap((piece, index) => {
+          const node = made("span", "piece");
+          node.classList.toggle("gallery-today-weekday", index === words.weekdayAt);
+          node.textContent = piece;
+          return index === 0 ? [node] : [" ", node];
         }));
       }
       if (date.dateTime !== now.datetime) {
         date.dateTime = now.datetime;
-        number.textContent = WORDS[language].week(weekNumberOf(at));
+        number.textContent = words.week(weekNumberOf(at));
+        big.textContent = String(at.getDate());
+        const [weekday, month] = words.foot(at.getMonth() + 1, words.weekdays[at.getDay()]);
+        const dot = made("span", "dot");
+        dot.textContent = "·";
+        foot.replaceChildren(weekday, dot, month);
         week.replaceChildren(...weekOf(at, language).map((day) => {
           const item = made("li", "day");
           item.classList.toggle("gallery-today-now", day.today);
           item.classList.toggle("gallery-today-past", day.past);
           const initial = made("span", "initial");
           initial.textContent = day.initial;
-          const number = made("span", "number");
-          number.textContent = String(day.date);
-          item.append(initial, number);
+          const value = made("span", "number");
+          value.textContent = String(day.date);
+          item.append(initial, value);
           return item;
         }));
       }

package/packs/gallery/today/preview.svg

@@ -1 +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="#fbf0df"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#d98a1c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.6"/><path d="M12 2.6v2.3M12 19.1v2.3M2.6 12h2.3M19.1 12h2.3M5.4 5.4l1.6 1.6M17 17l1.6 1.6M5.4 18.6l1.6-1.6M17 7l1.6-1.6"/></g><rect x="50" y="28" width="30" height="6" rx="3" fill="#3b3a37"/><rect x="84" y="28" width="22" height="6" rx="3" fill="#c4c2bd"/><rect x="30" y="50" width="74" height="17" rx="5" fill="#3b3a37"/><rect x="35.5" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="34" y="89" width="10" height="5" rx="2.5" fill="#e9e8e5"/><rect x="61" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="59.5" y="89" width="10" height="5" rx="2.5" fill="#e9e8e5"/><rect x="80" y="78" width="20" height="20" rx="5" fill="#efeeec"/><rect x="86.5" y="82" width="7" height="3" rx="1.5" fill="#2e7cd1"/><rect x="85" y="89" width="10" height="5" rx="2.5" fill="#2e7cd1"/><rect x="112" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="110.5" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/><rect x="137.5" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="136" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/><rect x="163" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="161.5" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/><rect x="188.5" y="82" width="7" height="3" rx="1.5" fill="#c4c2bd"/><rect x="187" y="89" width="10" height="5" rx="2.5" fill="#c4c2bd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><defs><radialGradient id="g" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 12) scale(140 96)"><stop offset="0" stop-color="#ffb74d" stop-opacity=".22"/><stop offset=".62" stop-color="#ffb74d" stop-opacity="0"/></radialGradient></defs><rect x="16.5" y="12.5" width="207" height="95" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="17" y="13" width="206" height="94" rx="7.5" fill="url(#g)"/><rect x="28" y="22" width="10" height="10" rx="3" fill="#fdf1dd"/><rect x="42" y="24.5" width="46" height="5" rx="2.5" fill="#37352f"/><rect x="92" y="24.5" width="20" height="5" rx="2.5" fill="#d4d3cf"/><rect x="28" y="42" width="60" height="15" rx="3" fill="#1d1d1b"/><rect x="35" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="33" y="84" width="10" height="6" rx="3" fill="#a6a5a1"/><rect x="62" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="60" y="84" width="10" height="6" rx="3" fill="#a6a5a1"/><rect x="89" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="87" y="84" width="10" height="6" rx="3" fill="#a6a5a1"/><rect x="108" y="71" width="22" height="26" rx="6" fill="#4084cf"/><rect x="116" y="76" width="6" height="3" rx="1.5" fill="#ffffff"/><rect x="114" y="84" width="10" height="6" rx="3" fill="#ffffff"/><rect x="143" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="141" y="84" width="10" height="6" rx="3" fill="#37352f"/><rect x="170" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="168" y="84" width="10" height="6" rx="3" fill="#37352f"/><rect x="197" y="76" width="6" height="3" rx="1.5" fill="#d4d3cf"/><rect x="195" y="84" width="10" height="6" rx="3" fill="#37352f"/></svg>