@heycys/gallery 0.1.1 → 0.2.0

package/packs/gallery/heatmap/style.css

@@ -0,0 +1,189 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. The pack's design B, in the kit's card tokens: the head (the chip, a
+   calendar, 编辑热力图 and its quiet meta), its end clear of the card's grip; the squares the hero, a grid
+   of columns of seven (the script's --gallery-heatmap-cell, -gap and -weeks), five shades of the accent
+   (their own in dark: the deepest the lightest there), a day before the record a small gray dot, today
+   ringed; the months' names over them and 一 三 五 at their left, faint; less to more under them. Laid out by
+   the face's data-layout: "full" the figures in a column of 156px at the left (what the weeks are, the
+   total large, the average a day, three facts and the reader's and the Agent's split as a bar), the squares
+   24px after it; "compact" the total and the days with any on a line over the squares; "strip" the squares
+   alone under the head; "grid" (8 × 2) the squares alone. A pointer on a square: a dark tip over it with its
+   day, over the card (the top layer). Unread: a line over empty squares. Light and dark. */
+[data-doc-component="gallery/heatmap"] {
+  --gallery-heatmap-0: light-dark(rgb(55 53 47 / 6.5%), rgb(255 255 255 / 6.5%));
+  --gallery-heatmap-1: light-dark(#d1e2f6, #243b5a);
+  --gallery-heatmap-2: light-dark(#90b6e3, #335e95);
+  --gallery-heatmap-3: light-dark(#4d88d3, #4e89d0);
+  --gallery-heatmap-4: light-dark(#2e5e9c, #a0c2ea);
+  --gallery-heatmap-dot: light-dark(rgb(55 53 47 / 17%), rgb(255 255 255 / 17%));
+  --gallery-heatmap-tip: light-dark(#2a2927, #3b3b39);
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-heatmap-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    height: 20px;
+    min-width: 0;
+    padding-inline-end: var(--gallery-grip-room, 0px);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--gallery-chip-size);
+    height: var(--gallery-chip-size);
+    border-radius: var(--gallery-chip-radius);
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip > svg { display: block; 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); line-height: var(--gallery-title-line); font-weight: 600; color: var(--gallery-text); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line > .gallery-heatmap-dot { margin: 0 5px; color: var(--gallery-faintest); }
+  > .gallery-heatmap-face > .gallery-heatmap-body { flex: 1; display: flex; gap: 24px; min-height: 0; margin-top: 16px; }
+
+  /* The figures: a column at the left of a full card. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside { flex: none; display: flex; flex-direction: column; width: 156px; min-width: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { font-size: 12px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { display: flex; align-items: baseline; margin-top: 6px; white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number {
+    font-size: 36px;
+    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);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); white-space: pre; }
+  > .gallery-heatmap-face[data-unread] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-weight: 300; color: var(--gallery-faintest); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-average { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-average > .gallery-heatmap-strong { font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts { display: flex; flex-direction: column; gap: 8px; margin: auto 0 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact > dt { margin: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact > dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--gallery-text); font-variant-numeric: tabular-nums; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact > dd > small { margin-left: 2px; font-size: 11.5px; font-weight: 400; color: var(--gallery-faint); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fresh { margin: 0; font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fresh > .gallery-heatmap-clause { display: inline-block; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who { margin-top: auto; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who[hidden] { display: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split { display: flex; gap: 2px; height: 6px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split > i { border-radius: 3px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split > .gallery-heatmap-you-bar { background: var(--gallery-accent); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split > .gallery-heatmap-agent-bar { background: var(--gallery-accent-mid); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; line-height: 15px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > span { display: inline-flex; align-items: center; gap: 5px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > span > b { margin-left: -2px; font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > span > i { width: 6px; height: 6px; border-radius: 2px; background: var(--gallery-accent); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > .gallery-heatmap-agent > i { background: var(--gallery-accent-mid); }
+
+  /* The squares and what stands around them. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area {
+    position: relative;
+    flex: none;
+    box-sizing: content-box;
+    width: calc(var(--gallery-heatmap-weeks, 14) * (var(--gallery-heatmap-cell, 23px) + var(--gallery-heatmap-gap, 4px)) - var(--gallery-heatmap-gap, 4px));
+    padding: 18px 0 0 20px;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-months { position: absolute; top: 0; left: 20px; right: 0; height: 18px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .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-gap))); font-size: 11px; line-height: 14px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-rows { position: absolute; top: 18px; left: 0; display: grid; grid-template-rows: repeat(7, var(--gallery-heatmap-cell, 23px)); row-gap: var(--gallery-heatmap-gap, 4px); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-rows > .gallery-heatmap-row { display: flex; align-items: center; font-size: 11px; line-height: 1; color: var(--gallery-faint); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(7, var(--gallery-heatmap-cell, 23px));
+    grid-auto-columns: var(--gallery-heatmap-cell, 23px);
+    gap: var(--gallery-heatmap-gap, 4px);
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day { position: relative; border-radius: max(3px, calc(var(--gallery-heatmap-cell, 23px) * .24)); background: var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .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-field > .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-field > .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-field > .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-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-future { visibility: hidden; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before { background: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3.2px; height: 3.2px; margin: -1.6px 0 0 -1.6px; border-radius: 50%; background: var(--gallery-heatmap-dot); }
+  > .gallery-heatmap-face[data-layout="full"] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
+  > .gallery-heatmap-face[data-unread] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before { background: var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face[data-unread] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before::after { content: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-today { outline: 1.5px solid var(--gallery-muted); outline-offset: 1.75px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-date]:hover { outline: 1.5px solid var(--gallery-text); outline-offset: 1.75px; }
+  /* The tip: over the card in the top layer (a popover, else fixed), placed in the window by the script, the arrow at its square (--gallery-heatmap-arrow; at its top when it stands under the square). */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-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(--gallery-heatmap-tip);
+    box-shadow: 0 6px 18px -6px rgb(0 0 0 / 35%);
+    font-size: 12px;
+    line-height: 17px;
+    color: #f5f5f3;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip[hidden] { display: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip > small { display: block; font-size: 11.5px; color: rgb(255 255 255 / 60%); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip::after { content: ""; position: absolute; bottom: -4px; left: var(--gallery-heatmap-arrow, 50%); width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip[data-below]::after { top: -4px; bottom: auto; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; font-size: 11px; line-height: 14px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square { width: 11px; height: 11px; border-radius: 3px; background: var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="1"] { background: var(--gallery-heatmap-1); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="2"] { background: var(--gallery-heatmap-2); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="3"] { background: var(--gallery-heatmap-3); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="4"] { background: var(--gallery-heatmap-4); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-note { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-note > s { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--gallery-heatmap-dot); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: 0;
+    padding: 6px 12px;
+    border-radius: 8px;
+    transform: translate(-50%, -50%);
+    background: var(--gallery-card-fill);
+    box-shadow: 0 0 0 1px var(--gallery-hair);
+    font-size: 12.5px;
+    line-height: 18px;
+    color: var(--gallery-muted);
+    white-space: nowrap;
+  }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-overlay[hidden] { display: none; }
+
+  /* A compact card: a line of the total over the squares, no legend. */
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body { flex-direction: column; gap: 10px; margin-top: 12px; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside { flex-direction: row; align-items: flex-end; justify-content: space-between; width: auto; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > :is(.gallery-heatmap-label, .gallery-heatmap-facts, .gallery-heatmap-who) { display: none; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { margin: 0; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-size: 28px; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-left: 11px; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-average { margin: 0; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend { display: none; }
+  /* A strip: the squares alone under the head. */
+  > .gallery-heatmap-face[data-layout="strip"] > .gallery-heatmap-body { margin-top: 12px; }
+  > .gallery-heatmap-face[data-layout="strip"] > .gallery-heatmap-body > .gallery-heatmap-aside { display: none; }
+  /* Two cells high (8 × 2): the squares alone, no head, figures or legend, in the middle of the card's height;
+     the months' row its first, kept out of the grip's corner by the script (the probe: as wide as that corner). */
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-head { display: none; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body { margin-top: 0; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body > .gallery-heatmap-aside { display: none; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body > .gallery-heatmap-field { justify-content: center; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend { display: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-grip-room { position: absolute; width: var(--gallery-grip-room, 0px); height: 0; visibility: hidden; pointer-events: none; }
+}
+/* On a custom page the face fills the card the board frames. */
+.gallery-card > [data-doc-component="gallery/heatmap"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face { 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 × 4 (the default: 14 weeks and the figures beside them), 12 × 4 (26 weeks and the figures), 4 × 4 (10 weeks under a line of the total), 12 × 3 (a year, the total in the head), 8 × 3 (about 33 weeks, the total in the head) and 8 × 2 (the squares alone, about 44 weeks: no head, figures or legend): as many weeks as the card holds are drawn, the last ending today.
+
+## How it looks
+
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a calendar's chip and 编辑热力图. The squares are the hero, five shades of the accent by how a day stands among the days recorded, today's ringed, the months' names over them and 一 三 五 beside them, less to more under them; a day before the record began is a small gray dot, never an empty square. On an 8 × 4 or 12 × 4 card the figures stand at their left: the edits of the weeks shown, large, the average a day, the days with any, the longest run of them and today's, and a bar of how the reader's and the Agent's edits split. A pointer on a square shows its day, its edits and whose they were. 按字数显示 counts the words each day added instead.

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>