@heycys/gallery 0.1.1 → 0.2.0

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

@@ -0,0 +1,212 @@
+/* 柔光风格's to-dos. 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), then the face: a faint wash of the accent from the card's top over the
+   soft card's fill; a head of a checked list's chip and 我的待办, how many are done at its end (fading while
+   the grip shows); the list the hero, grouped by document, each group's title small and muted after its
+   document's icon, its count at the end, each item a row: a box with no fill and a soft ring (the accent's,
+   a check in it, once done, the words then faint and struck), the words, the headings it stands under faint
+   at the end; a row under the pointer a soft gray. By the card's size (data-layout, from the script): square
+   (4 × 4) the list alone; tall (4 × 6) a ring of the share done and a key of the two counts over it; wide (8 ×
+   4) the ring and the key down the left side, a hairline after them, the groups two to a row beside them.
+   Under the list a muted line of how many more are below. Nothing to list: the cards' empty face (a soft
+   disc of the list's picture, red where nothing could be read; all done the ring full in green). 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
+   (data-pad: 24px on these tall cards), the board's line around it; where no card is (a document, as gallery
+   block check shows it) the face frames itself at a 4 × 4 card's size. */
+[data-doc-component="gallery-soft/todos"] {
+  --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-faint: light-dark(#ababb0, #66666c);
+  --soft-accent: light-dark(#3e7ac6, #7eade2);
+  --soft-accent-soft: light-dark(#ecf3fb, rgb(126 173 226 / 14%));
+  --soft-accent-mid: light-dark(#afcaea, #4a6f9b);
+  --soft-on-accent: light-dark(#ffffff, #152436);
+  --soft-track: light-dark(rgb(28 28 32 / 7%), rgb(255 255 255 / 8%));
+  --soft-box: light-dark(rgb(28 28 32 / 28%), rgb(255 255 255 / 32%));
+  --soft-hover: light-dark(rgb(55 53 47 / 6%), rgb(255 255 255 / 6%));
+  --soft-good: light-dark(#23874f, #6fcf97);
+  --soft-good-mark: light-dark(#2fa463, #4cb87c);
+  --soft-bad: light-dark(#c9473d, #f08a80);
+  --soft-bad-soft: light-dark(#fcecea, rgb(240 138 128 / 14%));
+  --soft-grip-room: 0px;
+  > .gallery-soft-todos-face {
+    --soft-pad: 24px;
+    position: relative;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 28px minmax(0, 1fr) auto auto;
+    grid-template-areas: "head" "list" "more" "note";
+    min-width: 0;
+    width: 304px;
+    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-todos-face[data-pad="m"] { --soft-pad: 20px; }
+  > .gallery-soft-todos-face[data-pad="s"] { --soft-pad: 18px; }
+  > .gallery-soft-todos-face[data-layout="tall"] { grid-template-rows: 28px auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "summary" "list" "more" "note"; }
+  > .gallery-soft-todos-face[data-layout="wide"] { grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: 28px minmax(0, 1fr) auto auto; grid-template-areas: "head head" "summary list" ". more" ". note"; column-gap: 28px; }
+  /* The head: the chip, 我的待办, how many are done at its end. */
+  > .gallery-soft-todos-face > .gallery-soft-todos-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; padding-inline-end: var(--soft-grip-room); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-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-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-chip > svg { display: block; width: 16px; height: 16px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: var(--soft-strong); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-count {
+    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-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-count > .gallery-soft-todos-done-count { font: 600 12px var(--soft-num); color: var(--soft-text); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-count > .gallery-soft-todos-of { font-family: var(--soft-num); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-head > .gallery-soft-todos-count > .gallery-soft-todos-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
+  /* A ring of the share done, its percent in its middle. */
+  .gallery-soft-todos-ring { position: relative; display: grid; place-items: center; flex: none; }
+  .gallery-soft-todos-ring > svg { position: absolute; inset: 0; display: block; }
+  .gallery-soft-todos-ring > svg > circle { fill: none; }
+  .gallery-soft-todos-ring > svg > .gallery-soft-todos-track { stroke: var(--soft-track); }
+  .gallery-soft-todos-ring > svg > .gallery-soft-todos-arc { stroke: var(--soft-accent); stroke-linecap: round; }
+  .gallery-soft-todos-ring > .gallery-soft-todos-percent { position: relative; font: 700 15px/1 var(--soft-num); letter-spacing: -.01em; color: var(--soft-strong); }
+  .gallery-soft-todos-ring > .gallery-soft-todos-percent > .gallery-soft-todos-percent-sign { margin-left: 1px; font-size: .62em; font-weight: 600; color: var(--soft-muted); }
+  /* The summary: the ring and a key of the two counts (a tall card's over the list, a wide one's beside it). */
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary { grid-area: summary; display: none; }
+  > .gallery-soft-todos-face[data-state="items"][data-layout="tall"] > .gallery-soft-todos-summary { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
+  > .gallery-soft-todos-face[data-state="items"][data-layout="wide"] > .gallery-soft-todos-summary { display: flex; flex-direction: column; justify-content: center; gap: 18px; margin-top: 16px; padding-right: 28px; box-shadow: inset -1px 0 0 var(--soft-track); }
+  > .gallery-soft-todos-face[data-layout="wide"] > .gallery-soft-todos-summary .gallery-soft-todos-percent { font-size: 24px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary > .gallery-soft-todos-key { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 18px; row-gap: 4px; margin: 0; font-size: 12.5px; }
+  > .gallery-soft-todos-face[data-layout="wide"] > .gallery-soft-todos-summary > .gallery-soft-todos-key { grid-template-columns: 1fr auto; row-gap: 8px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary > .gallery-soft-todos-key > .gallery-soft-todos-key-row { display: contents; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary > .gallery-soft-todos-key > .gallery-soft-todos-key-row > .gallery-soft-todos-key-name { display: flex; align-items: center; gap: 7px; color: var(--soft-muted); white-space: nowrap; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary > .gallery-soft-todos-key > .gallery-soft-todos-key-row > .gallery-soft-todos-key-name > .gallery-soft-todos-key-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--soft-accent); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary > .gallery-soft-todos-key > .gallery-soft-todos-key-row[data-kind="left"] > .gallery-soft-todos-key-name > .gallery-soft-todos-key-dot { background: var(--soft-track); box-shadow: inset 0 0 0 1.5px var(--soft-accent-mid); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-summary > .gallery-soft-todos-key > .gallery-soft-todos-key-row > .gallery-soft-todos-key-count { margin: 0; font: 600 13px var(--soft-num); color: var(--soft-strong); text-align: right; }
+  /* The list: its groups, a row an item. */
+  > .gallery-soft-todos-face > .gallery-soft-todos-list {
+    grid-area: list;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    margin-top: 14px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+  > .gallery-soft-todos-face[data-layout="tall"] > .gallery-soft-todos-list { margin-top: 20px; }
+  > .gallery-soft-todos-face[data-layout="wide"] > .gallery-soft-todos-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 12px; align-content: start; margin-top: 16px; }
+  > .gallery-soft-todos-face:not([data-state="items"]) > :is(.gallery-soft-todos-list, .gallery-soft-todos-more) { display: none; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group { min-width: 0; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head { display: flex; align-items: center; gap: 6px; height: 20px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--soft-muted); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-icon { display: grid; place-items: center; flex: none; width: 16px; height: 16px; font-size: 12px; line-height: 1; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-icon > :is(svg, img) { display: block; width: 14px; height: 14px; object-fit: cover; border-radius: 3px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-plain { color: var(--soft-faint); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-glyph::before { content: ""; width: 14px; height: 14px; background: var(--soft-muted); -webkit-mask: var(--gallery-soft-todos-icon) center / contain no-repeat; mask: var(--gallery-soft-todos-icon) center / contain no-repeat; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-doc {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-doc:is(:hover, :focus-visible) { outline: none; color: var(--soft-text); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-group-head > .gallery-soft-todos-group-count { flex: none; margin-left: auto; font: 500 11.5px var(--soft-num); color: var(--soft-faint); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items { margin: 0; padding: 0; list-style: none; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 28px;
+    min-width: 0;
+    margin: 0 -6px;
+    padding: 0 6px;
+    border-radius: 6px;
+  }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item:hover { background: var(--soft-hover); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > :is(.gallery-soft-todos-check, .gallery-soft-todos-todo) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > .gallery-soft-todos-check { display: grid; place-items: center; flex: none; border-radius: 5px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > .gallery-soft-todos-check:focus-visible { outline: 2px solid var(--soft-accent-soft); outline-offset: 1px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item .gallery-soft-todos-box {
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 5px;
+    box-shadow: inset 0 0 0 1.5px var(--soft-box);
+    color: transparent;
+  }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item .gallery-soft-todos-box > svg { display: block; width: 11px; height: 11px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-done .gallery-soft-todos-box { background: var(--soft-accent); box-shadow: none; color: var(--soft-on-accent); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > .gallery-soft-todos-todo { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 100%; text-align: left; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > .gallery-soft-todos-todo:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--soft-faint); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > .gallery-soft-todos-todo > .gallery-soft-todos-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--soft-text); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-done > .gallery-soft-todos-todo > .gallery-soft-todos-text { color: var(--soft-faint); text-decoration: line-through; text-decoration-color: var(--soft-faint); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-list > .gallery-soft-todos-group > .gallery-soft-todos-items > .gallery-soft-todos-item > .gallery-soft-todos-todo > .gallery-soft-todos-path { flex: none; margin-left: auto; padding-left: 8px; max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--soft-faint); }
+  /* How many more are below. */
+  > .gallery-soft-todos-face > .gallery-soft-todos-more { grid-area: more; display: flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: 12px; color: var(--soft-muted); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-more[hidden] { display: none; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-more > .gallery-soft-todos-arrow { display: block; width: 13px; height: 13px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-more > .gallery-soft-todos-arrow > svg { display: block; width: 100%; height: 100%; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-note { grid-area: note; margin: 6px 0 0; font-size: 12px; color: var(--soft-bad); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-note[hidden] { display: none; }
+  /* Nothing to list: the cards' empty face, over the list's room and the summary's. */
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty { display: none; }
+  > .gallery-soft-todos-face:not([data-state="items"]) > .gallery-soft-todos-empty { grid-column: 1 / -1; grid-row: 2 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; text-align: center; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-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-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-disc > svg { display: block; width: 20px; height: 20px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-bad { background: var(--soft-bad-soft); color: var(--soft-bad); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-full { margin-bottom: 12px; }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-full > svg > .gallery-soft-todos-arc { stroke: var(--soft-good-mark); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-full > .gallery-soft-todos-percent { font-size: 20px; color: var(--soft-good); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-line { margin: 0; font-size: 13px; color: var(--soft-text); }
+  > .gallery-soft-todos-face > .gallery-soft-todos-empty > .gallery-soft-todos-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/todos"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery-soft/todos"] > .gallery-soft-todos-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/todos/template.html

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

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

@@ -0,0 +1,32 @@
+# 我的待办 (gallery-soft/todos)
+
+A card for a custom page (its places are `page`, its needs `workspace`): the to-dos of every document of the workspace that are not done yet, an item of a to-do list each (`<ul class="doc-todo">`), grouped by document, the one edited last first, each with the headings it stands under. Use it on the home page, or on a page about the user's work.
+
+It is 柔光风格's (the pack `gallery-soft`, off until the user turns it on in 设置 › 组件列表): the same card as Gallery 风格's `gallery/todos`, 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 two settings are the card's form, which the user opens from the grip at the card's top right › 设置…:
+
+| Key | Label | Type | What it is |
+| --- | --- | --- | --- |
+| `document` | 只看这篇文档 | document | a document's slug: its to-dos alone; left out, every document's |
+| `done` | 也显示已完成的 | switch | the done ones too, checked and struck through |
+
+They are kept in its data part `settings`, a `<script type="application/json">`: `{}` (template.html, what a menu adds) shows the open to-dos of every document. Write `document` when the user asks for one document's to-dos. The block reads them 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/todos`, the instance as template.html has it. Sizes: 4 × 4 (the default), 4 × 6 and 8 × 4; the list shows whole rows and scrolls inside the card, a muted line under it saying how many more.
+
+## What the user does
+
+- clicks an item's box: the item is checked (or cleared) in its document, which Gallery writes as the user's own edit; the home page's undo (Ctrl+Z) checks it back. An item checked on the card stays there, struck through, until the page is shown again. Where the item changed meanwhile (its words), the card says so and reads again;
+- clicks an item's words: its document opens, at the item where it has a block id;
+- clicks a document's title: the document opens.
+
+The card follows by itself: a to-do added, checked or taken out in any document shows at once.
+
+## How it looks
+
+我的待办 beside a checked list's chip on the top line, how many are done of all at its end (a small ring and 18 / 27; 共 27 项 on a tall card; 9 项没做完 · 4 篇文档 on a wide one); the list under it, grouped by document, each group's title small and muted after its document's icon, its count at the end, each to-do a row: a box with a soft ring (the accent's, with a check, once done), its words, the headings it stands under faint at the end; a 4 × 6 card shows over the list a ring of the share done and a key of the two counts, an 8 × 4 card the ring and the key down its left side and the groups two to a row; under the list 还有 4 项 where more are below; all done, the ring full in green over 待办都完成了; 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/weather/component.json

@@ -0,0 +1,19 @@
+{
+  "id": "gallery-soft/weather",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "天气", "en": "Weather" },
+  "description": { "zh": "一个城市现在的天气和接下来几天的预报，天空画成小图，数据来自 Open-Meteo，要先允许联网", "en": "A city's weather now and for the days ahead, its sky drawn in color, from Open-Meteo, once the reader lets it online" },
+  "words": "tianqi qiwen yubao weather forecast temperature 天气 气温 预报 温度 下雨",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-soft-weather-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true, "consent": { "zh": "允许联网之后显示天气", "en": "Allow internet access to show the weather" } },
+  "settings": [
+    { "key": "city", "label": { "zh": "城市", "en": "City" }, "type": "text", "default": "", "required": true },
+    { "key": "unit", "label": { "zh": "单位", "en": "Unit" }, "type": "select", "options": ["℃", "℉"], "default": "℃" }
+  ],
+  "needs": ["net:api.open-meteo.com", "net:geocoding-api.open-meteo.com"]
+}

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

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery-soft/weather">
+  <script type="application/json">{"city":"上海","unit":"℃"}</script>
+</div>