@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/heatmap/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/><path d="M16 3v4M8 3v4M4 11h16"/></g><rect x="50" y="28" width="46" height="6" rx="3" fill="#3b3a37"/><rect x="150" y="29" width="60" height="5" rx="2.5" fill="#c4c2bd"/><rect x="36" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="78" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="78" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="62" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="85" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="85" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="92" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="99" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="99" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="83" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="55" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="120" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="120" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="127" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="127" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="127" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="127" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="62" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="134" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="83" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="141" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="148" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="155" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="90" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="162" y="55" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="69" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="169" y="48" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="169" y="55" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="169" y="62" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="169" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="169" y="76" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="169" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="169" y="90" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="176" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="76" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="176" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="183" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="183" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="183" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="83" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="183" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="190" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="190" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="83" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="197" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="204" y="48" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="204" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="204" y="62" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="204" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="204" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="204" y="83" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="204" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/></svg>

package/packs/gallery/heatmap/style.css

@@ -0,0 +1,201 @@
+/* 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, 编辑热力图, its line, the quiet note at its end (how many
+   edits, or since when it is kept; the period where the figures show), its end clear of the card's grip); the
+   weekdays down the left, the months over the weeks, the squares a column a week, Monday at the top. The
+   squares' side and gaps are the script's (--gallery-heatmap-cell, --gallery-heatmap-gap, and
+   --gallery-heatmap-across between the weeks, wider on a card far wider than high: as big as the card
+   lets them be), their corners a quarter of their side, the grid hung from the left under the head
+   and the room left over at its right; the weekdays' column left out where a square is under 6px
+   (data-small: its words would run into each other). A day drawn by its level, 0 to 4, the accent's
+   shades on the card's fill (a quarter, a half, three quarters of it, and the accent itself; in dark two
+   fifths, three fifths, four fifths, so that the first stands off the track), a day of none the track's
+   gray (a step stronger than the track, so that a year of none still reads as a grid), a day before the
+   record only outlined in that gray, an empty slot rather than a day of nothing, so that a record just
+   begun reads as starting now; a day to come none. A wide card with something counted (data-figures)
+   shows its figures beside the squares: what they count, the edits (or words) in all, large (the cards'
+   hero size), the days that had any and today's, a hairline at their right; under 150px high, today's
+   left out, under 124px what they count too. Less to more (the script places it) under the squares at their left where the room
+   under them holds it, else at the head's end, where a card too narrow for it beside the line leaves it out. */
+[data-doc-component="gallery/heatmap"] {
+  --gallery-heatmap-0: light-dark(rgb(33 27 23 / 10%), rgb(255 255 255 / 11%));
+  --gallery-heatmap-1: light-dark(color-mix(in oklab, var(--gallery-accent) 26%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 42%, var(--gallery-card-fill)));
+  --gallery-heatmap-2: light-dark(color-mix(in oklab, var(--gallery-accent) 50%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 62%, var(--gallery-card-fill)));
+  --gallery-heatmap-3: light-dark(color-mix(in oklab, var(--gallery-accent) 75%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 81%, var(--gallery-card-fill)));
+  --gallery-heatmap-4: var(--gallery-accent);
+  height: 12em;
+  container-type: size;
+  > .gallery-heatmap-face {
+    --gallery-heatmap-cell: 10px;
+    --gallery-heatmap-gap: 3px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gallery-face-gap);
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    color: var(--gallery-text);
+    font-size: 12px;
+    line-height: 1.3;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-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-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-title { flex: none; font-size: var(--gallery-title-size); font-weight: 600; line-height: var(--gallery-title-line); color: var(--gallery-text-strong); }
+  /* The head's last piece (its line, or less to more where the script put it there) at the content's edge, faded while the card's grip shows. */
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line:last-child,
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend { margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-inline-start: 4px;
+    font-size: var(--gallery-meta-size);
+    color: var(--doc-muted);
+    text-align: end;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+  /* The figures beside the squares (a wide card's, where something is counted): what they count, small and
+     muted, over the edits (or words) in all, large, their unit after them, and a muted line of the days
+     that had any and today's; a hairline at their right. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside {
+    display: none;
+    flex: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    align-self: stretch;
+    width: clamp(120px, 18cqi, 190px);
+    box-sizing: border-box;
+    margin-inline-end: 6px;
+    padding-inline-end: 16px;
+    border-inline-end: 1px solid var(--doc-grid);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { font-size: var(--gallery-meta-size); line-height: 16px; color: var(--doc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { display: flex; align-items: baseline; flex-wrap: wrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number {
+    font-size: var(--gallery-hero-size);
+    line-height: 1.1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    color: var(--gallery-text-strong);
+    font-variant-numeric: tabular-nums;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-inline-start: var(--gallery-unit-gap); font-size: max(12px, calc(var(--gallery-hero-size) * .4)); font-weight: 500; color: var(--doc-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more { display: flex; flex-direction: column; font-size: var(--gallery-meta-size); line-height: 1.5; color: var(--doc-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more > .gallery-heatmap-piece { white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-rows {
+    display: grid;
+    flex: none;
+    grid-template-rows: repeat(7, var(--gallery-heatmap-cell));
+    gap: var(--gallery-heatmap-gap);
+    margin-top: 18px;
+    color: var(--doc-muted);
+    font-size: 10px;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-rows > .gallery-heatmap-row { display: flex; align-items: center; line-height: 1; }
+  > .gallery-heatmap-face[data-small] > .gallery-heatmap-body > .gallery-heatmap-rows { display: none; }
+  /* Less to more under the squares: the weekdays as much shorter at the bottom, so that they stay beside their rows. */
+  > .gallery-heatmap-face > .gallery-heatmap-body:has(> .gallery-heatmap-area > .gallery-heatmap-legend) > .gallery-heatmap-rows { margin-bottom: 18px; }
+  /* As wide as its weeks, hung from the left beside the weekdays. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area { flex: none; width: calc(var(--gallery-heatmap-weeks, 53) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-across, var(--gallery-heatmap-gap))) - var(--gallery-heatmap-across, var(--gallery-heatmap-gap))); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-months {
+    position: relative;
+    height: 14px;
+    margin-bottom: 4px;
+    color: var(--doc-muted);
+    font-size: 10px;
+    line-height: 14px;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-months > .gallery-heatmap-month {
+    position: absolute;
+    top: 0;
+    left: calc(var(--gallery-heatmap-week) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-across, var(--gallery-heatmap-gap))));
+    white-space: nowrap;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(7, var(--gallery-heatmap-cell));
+    grid-auto-columns: var(--gallery-heatmap-cell);
+    gap: var(--gallery-heatmap-gap) var(--gallery-heatmap-across, var(--gallery-heatmap-gap));
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day {
+    box-sizing: border-box;
+    border-radius: max(2px, calc(var(--gallery-heatmap-cell) / 4));
+    background: var(--gallery-heatmap-0);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="1"] { background: var(--gallery-heatmap-1); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="2"] { background: var(--gallery-heatmap-2); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="3"] { background: var(--gallery-heatmap-3); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="4"] { background: var(--gallery-heatmap-4); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day.gallery-heatmap-before { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day.gallery-heatmap-future { visibility: hidden; }
+  /* Less to more, wherever the script put it: under the squares or at the head's end. */
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend,
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-legend {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 3px;
+    flex: none;
+    color: var(--doc-muted);
+    font-size: 10px;
+    line-height: 1;
+    > .gallery-heatmap-less { margin-inline-end: 3px; }
+    > .gallery-heatmap-more { margin-inline-start: 3px; }
+    > .gallery-heatmap-square { width: 10px; height: 10px; border-radius: 3px; background: var(--gallery-heatmap-0); }
+    > .gallery-heatmap-square[data-level="1"] { background: var(--gallery-heatmap-1); }
+    > .gallery-heatmap-square[data-level="2"] { background: var(--gallery-heatmap-2); }
+    > .gallery-heatmap-square[data-level="3"] { background: var(--gallery-heatmap-3); }
+    > .gallery-heatmap-square[data-level="4"] { background: var(--gallery-heatmap-4); }
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-legend { align-self: flex-start; margin-top: 8px; }
+}
+/* A wide card (8 cells and more) with something counted: the figures beside the squares. */
+@container (min-width: 560px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face[data-figures] > .gallery-heatmap-body > .gallery-heatmap-aside { display: flex; }
+}
+/* Not so high (a 2-high card from a window 1440px wide): today's left out of the figures, which would not fit with the rest. */
+@container (max-height: 150px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more > .gallery-heatmap-piece + .gallery-heatmap-piece { display: none; }
+}
+/* Low (a 2-high card from a window under 1440px wide): what the figures count left out too, the number the figure size. */
+@container (max-height: 124px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { display: none; }
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-size: var(--gallery-figure-size); }
+}
+/* A card too narrow for less to more beside the line: the line alone. */
+@container (max-width: 440px) {
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend { display: none; }
+  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line { margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+}
+/* On a custom page the face is the card's: as high as what the card holds inside its padding. */
+.gallery-card > [data-doc-component="gallery/heatmap"] { height: 100%; }

package/packs/gallery/heatmap/template.html

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

package/packs/gallery/heatmap/writing.md

@@ -0,0 +1,21 @@
+# 编辑热力图 (gallery/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.
+
+## 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 heatmap`, the instance as template.html has it. Sizes: 8 × 3 (the default: most of a year, its weekdays and less to more under the squares), 12 × 3 (a year) and 4 × 3 (the last weeks alone): as many weeks as the card holds are drawn, the last ending today.
+
+## How it looks
+
+编辑热力图 beside a calendar's chip, how many edits there were at the top line's end, the weekdays down the left (Monday first), the months over the weeks, the squares in the accent's shades, darker for a day of more; 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. Less to more stands under the squares where the card has the room, else at the top line's end. On a wide card (8 cells and more), once anything is counted, the figures stand at the left of the squares: 期间编辑, the edits (or words) in all, large, how many days had any and today's, the top line then saying since when. A day before the record began is an outlined square, an empty slot. Each square says its day and its count where the pointer rests on it. Until anything is counted the line says since when the record is kept (从 11月8日 开始记录). It follows by itself: a document saved, or written by the Agent, shows on today's square at once, and what was written while Gallery did not run is counted on its day when it starts. In an exported file, which has no workspace to read, the line says 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.

package/packs/gallery/kanban/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery/kanban",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "看板", "en": "Board" },
+  "description": { "zh": "表格的视图：按一列把每一行分组成卡片，拖动卡片就改了那一格", "en": "A view of a table: its rows as cards grouped by a column, a card dragged changing that cell" },
+  "words": "kanban renwukanban board 看板 任务 分组 视图 view tasks",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-kanban-face"] },
+  "places": ["document"],
+  "settings": [
+    { "key": "group", "label": { "zh": "分组依据", "en": "Group by" }, "type": "text", "default": "" },
+    { "key": "order", "label": { "zh": "分组的顺序", "en": "Order of the groups" }, "type": "text", "default": "" }
+  ],
+  "needs": ["tables", "workspace"]
+}

package/packs/gallery/kanban/example.html

@@ -0,0 +1,12 @@
+<table data-doc-chart-source="tasks">
+  <thead><tr><th>任务</th><th>状态</th><th>负责人</th><th>截止</th></tr></thead>
+  <tbody>
+    <tr><td>写发布说明</td><td>待办</td><td>小王</td><td>11 月 12 日</td></tr>
+    <tr><td>更新安装文档</td><td>待办</td><td>小李</td><td>11 月 13 日</td></tr>
+    <tr><td>回归测试</td><td>进行中</td><td>小张</td><td>11 月 10 日</td></tr>
+    <tr><td>确定版本号</td><td>已完成</td><td>小李</td><td>11 月 6 日</td></tr>
+  </tbody>
+</table>
+<div data-doc-component="gallery/kanban" data-doc-from="tasks">
+  <script type="application/json">{"group":"状态","order":"待办,进行中,已完成"}</script>
+</div>