@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/note/component.json

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

package/packs/gallery/note/kit.js

@@ -1,19 +1,23 @@
 // gallery/note (便签): a few lines of free text, kept in the instance's data part, a script of JSON,
-// { "text": "…" }, and typed on the card itself, in a <textarea> the block draws over the whole card.
+// { "text": "…" }, and typed on the card itself, in a <textarea> the block draws under its head.
 // The field is the kit's (DocKit.input): what the reader typed goes to the file once they are done with
 // it, as they leave the field or press Ctrl+Enter (⌘Enter on a Mac; Enter alone is a new line), never
 // while an input method composes, and never a value it holds already; Esc puts back what the file holds.
 // Each of those is one context.editJSON, one undo step, the JSON written back on one line as it was. It
 // draws from the part on every `source` (an Agent's write, an undo), the words the reader is typing kept
 // where they are. Where nothing takes its writes (an export, a page that has not come to edit yet:
-// context.canEdit() false) the field is read-only, and shows the same words. An empty note says 写点什么.
-// Above the field its head, as the cards' heads are (the kit's card tokens): the chip, a note's picture,
-// and its name, 便签, and its quiet meta, how many characters the field holds (its blanks not counted,
-// said again as the reader types); nothing of it is written.
+// context.canEdit() false) the field is read-only, and shows the same words. An empty note says 写点什么….
+// Above the field its head (the pack's design B: the kit's card tokens): the chip, a pencil, its name,
+// 便签, and its quiet meta after it, how many characters the field holds (its blanks not counted, said
+// again as the reader types; none on a card two cells wide, `data-layout` "narrow" by context.size, read
+// again on `layout`). Its lines are ruled faintly, a hint that it takes writing (style.css); while the
+// reader types, a line under the field says the two keys (Ctrl+Enter 保存, Esc 还原; ⌘Enter on a Mac), and
+// the card is ringed in the accent's wash; scrolled down, the field's top fades (data-scrolled). Nothing of
+// the head or the foot is written.
 
 const WORDS = {
-  zh: { empty: "写点什么", label: "便签", count: (/** @type {number} */ count) => `${count} 字` },
-  en: { empty: "Write something", label: "Note", count: (/** @type {number} */ count) => `${count} ${count === 1 ? "character" : "characters"}` },
+  zh: { empty: "写点什么…", label: "便签", count: (/** @type {number} */ count) => `${count} 字`, save: "保存", undo: "还原" },
+  en: { empty: "Write something…", label: "Note", count: (/** @type {number} */ count) => `${count} ${count === 1 ? "character" : "characters"}`, save: "save", undo: "revert" },
 };
 
 /** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
@@ -48,9 +52,12 @@ function writeNote(context, text) {
   });
 }
 
+/** How many characters `text` holds, its blanks (spaces, new lines) not counted. @param {string} text */
+const countOf = (text) => [...text.replace(/\s+/g, "")].length;
+
 DocKit.component({
   id: "gallery/note",
-  on: ["source", "editable"],
+  on: ["source", "editable", "layout"],
   mount(host, context) {
     const words = WORDS[languageOf(document.documentElement)];
     const head = document.createElement("div");
@@ -58,11 +65,11 @@ DocKit.component({
     head.setAttribute("aria-hidden", "true");
     const chip = document.createElement("span");
     chip.className = "gallery-note-chip";
-    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M13 20l7-7M13 20v-6a1 1 0 0 1 1-1h6V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7"/></svg>';
+    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 19.5h3.8L19 8.8a2.4 2.4 0 0 0-3.4-3.4L4.9 16.1z"/><path d="M14 7l3 3"/></svg>';
     const title = document.createElement("span");
     title.className = "gallery-note-title";
     title.textContent = words.label;
-    // Its quiet meta at the head's end: how many characters the field holds (its blanks not counted), as the reader types too.
+    // Its quiet meta after the title: how many characters the field holds (its blanks not counted), as the reader types too.
     const meta = document.createElement("span");
     meta.className = "gallery-note-meta";
     head.append(chip, title, meta);
@@ -71,16 +78,35 @@ DocKit.component({
     field.placeholder = words.empty;
     field.spellcheck = false;
     field.setAttribute("aria-label", words.label);
-    host.append(head, field);
+    // While the reader types: the two keys, Ctrl+Enter (⌘Enter on a Mac) and Esc.
+    const foot = document.createElement("div");
+    foot.className = "gallery-note-foot";
+    foot.setAttribute("aria-hidden", "true");
+    const key = (/** @type {string} */ name, /** @type {string} */ does) => {
+      const said = document.createElement("span");
+      const bold = document.createElement("b");
+      bold.textContent = name;
+      said.append(bold, ` ${does}`);
+      return said;
+    };
+    foot.append(key(document.documentElement.dataset.docPlatform === "mac" ? "⌘Enter" : "Ctrl+Enter", words.save), key("Esc", words.undo));
+    host.append(head, field, foot);
     const typed = DocKit.input(field, { signal: context.signal, commit: (value) => writeNote(context, value) });
     const recount = () => {
-      const count = [...field.value.replace(/s+/g, "")].length;
+      const count = countOf(field.value);
       const said = count > 0 ? words.count(count) : "";
       if (meta.textContent !== said) meta.textContent = said;
     };
     field.addEventListener("input", recount);
     context.signal?.addEventListener("abort", () => field.removeEventListener("input", recount), { once: true });
-    const draw = () => {
+    // Scrolled down, its top fades (style.css), so that a line it scrolled past is never cut hard.
+    const scrolled = () => field.toggleAttribute("data-scrolled", field.scrollTop > 0);
+    field.addEventListener("scroll", scrolled, { passive: true });
+    context.signal?.addEventListener("abort", () => field.removeEventListener("scroll", scrolled), { once: true });
+    const draw = (/** @type {string} */ reason = "") => {
+      const layout = context.size && context.size.w <= 2 ? "narrow" : "wide";
+      if (head.dataset.layout !== layout) head.dataset.layout = layout;
+      if (reason === "layout") return;
       const data = context.readJSON("note");
       if (data === undefined) return; // no JSON: the instance has failed, and Gallery shows what it holds
       let text;
@@ -92,6 +118,7 @@ DocKit.component({
       field.readOnly = !context.canEdit();
       typed.set(text);
       recount();
+      scrolled();
     };
     draw();
     return { update: draw };

package/packs/gallery/note/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="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13 20l7-7M13 20v-6a1 1 0 0 1 1-1h6V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7"/></g><rect x="50" y="28" width="24" height="6" rx="3" fill="#3b3a37"/><rect x="30" y="50" width="150" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="62" width="118" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="74" width="168" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="86" width="92" height="6" rx="3" fill="#7b7a76"/><rect x="125" y="84" width="1.5" height="10" fill="#3b3a37"/></svg>
+<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="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="28" y="22" width="10" height="10" rx="3" fill="#efefed"/><rect x="42" y="24.5" width="22" height="5" rx="2.5" fill="#37352f"/><rect x="68" y="24.5" width="18" height="5" rx="2.5" fill="#d4d3cf"/><line x1="28" x2="212" y1="57" y2="57" stroke="#ededeb"/><rect x="28" y="47" width="24" height="6" rx="3" fill="#37352f"/><line x1="28" x2="212" y1="73" y2="73" stroke="#ededeb"/><rect x="28" y="63" width="112" height="6" rx="3" fill="#37352f"/><line x1="28" x2="212" y1="89" y2="89" stroke="#ededeb"/><rect x="28" y="79" width="96" height="6" rx="3" fill="#37352f"/></svg>

package/packs/gallery/note/style.css

@@ -1,39 +1,46 @@
 /* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
-   reaches the rest of the page. In the kit's card tokens: its head (the chip and 便签, how many characters
-   it holds its quiet meta at the end), its end clear of the card's grip, and under it the field the script draws, the rest of the note's face: no border, no
-   fill and no ring of its own, its words in the page's font, its placeholder (写点什么) muted. On a custom
-   page it fills the card the board frames; where no card is around it (a document, as gallery block
-   check shows it) the instance frames itself, a few lines high. Light and dark. */
+   reaches the rest of the page. The pack's design B, in the kit's card tokens: its head (the chip, a
+   pencil, and 便签, how many characters it holds its quiet meta after it, none on a narrow card), its end
+   clear of the card's grip, and under it the field the script draws, the rest of the note's face: no
+   border and no fill of its own, words half a size larger than the other cards' on wide lines (26px, a
+   faint rule under each, scrolling with them: a hint that it takes writing), its placeholder (写点什么…)
+   faint, the caret the accent's. While the reader types the card is ringed in the accent's wash and a line
+   under the field says its two keys; scrolled down, the field's top fades over 8px. On a custom page it is the card's whole face, taken out over the card's padding so that
+   its ring is the card's edge; where no card is around it (a document, as gallery block check shows it) the
+   instance frames itself, a few lines high. Light and dark. */
 [data-doc-component="gallery/note"] {
+  --gallery-note-rule: light-dark(rgb(55 53 47 / 7.5%), rgb(255 255 255 / 6%));
   display: flex;
   flex-direction: column;
-  gap: var(--gallery-face-gap);
   box-sizing: border-box;
-  padding: 14px 16px;
-  border: 1px solid var(--doc-border);
+  padding: 16px;
   border-radius: var(--gallery-card-radius);
+  box-shadow: var(--gallery-card-shadow);
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
   > .gallery-note-head {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: none;
+    height: 20px;
     min-width: 0;
     padding-inline-end: var(--gallery-grip-room, 0px);
   }
   > .gallery-note-head > .gallery-note-chip {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: 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);
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
   }
-  > .gallery-note-head > .gallery-note-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-note-head > .gallery-note-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
   > .gallery-note-head > .gallery-note-title {
-    flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -41,36 +48,50 @@
     font-size: var(--gallery-title-size);
     line-height: var(--gallery-title-line);
     font-weight: 600;
-    color: var(--gallery-text-strong);
+    color: var(--gallery-text);
   }
-  > .gallery-note-head > .gallery-note-meta { flex: none; font-size: var(--gallery-meta-size); color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  > .gallery-note-head > .gallery-note-meta { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-note-head[data-layout="narrow"] > .gallery-note-meta { display: none; }
   > .gallery-note-field {
     display: block;
     flex: 1 1 auto;
     box-sizing: border-box;
     width: 100%;
-    min-height: 7.5em;
-    margin: 0;
+    min-height: 104px;
+    margin: 8px 0 0;
     padding: 0;
     border: 0;
     outline: 0;
     resize: none;
-    background: transparent;
+    background: transparent linear-gradient(to bottom, transparent 25px, var(--gallery-note-rule) 25px, var(--gallery-note-rule) 26px, transparent 26px) 0 0 / 100% 26px local;
     font: inherit;
-    font-size: 14px;
-    line-height: 1.65;
+    font-size: 13.5px;
+    line-height: 26px;
     color: var(--gallery-text);
+    caret-color: var(--gallery-accent);
     overflow-wrap: break-word;
-    scrollbar-width: thin;
+    scrollbar-width: none;
   }
-  > .gallery-note-field::placeholder { color: var(--doc-muted); opacity: .7; }
+  > .gallery-note-field[data-scrolled] { mask-image: linear-gradient(to bottom, transparent, #000 8px); }
+  > .gallery-note-head[data-layout="narrow"] ~ .gallery-note-field { font-size: 13px; }
+  > .gallery-note-field::placeholder { color: var(--gallery-faint); opacity: 1; }
   > .gallery-note-field:read-only { cursor: default; }
+  > .gallery-note-foot { display: none; flex: none; gap: 12px; padding-top: 6px; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-note-foot b { font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-note-field:focus:not(:read-only) + .gallery-note-foot { display: flex; }
+  &:has(> .gallery-note-field:focus:not(:read-only)) { box-shadow: var(--gallery-card-shadow), 0 0 0 2px var(--gallery-accent-wash); }
 }
-/* On a custom page the board draws the frame: the note is as high as what the card holds inside it. */
+/* On a custom page the board draws the frame: the note is the card's whole face, out over its padding, its
+   ring (while the reader types) at the card's edge, inside it. */
 .gallery-card > [data-doc-component="gallery/note"] {
-  height: 100%;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  > .gallery-note-field { min-height: 0; }
+  height: calc(100% + 2 * var(--gallery-card-pad));
+  margin: calc(-1 * var(--gallery-card-pad));
+  padding: var(--gallery-card-pad);
+  box-shadow: none;
+  /* The field as high as whole lines fit under the head (20px and 8px), and over the keys' line (22px) while
+     the reader types, so that a line scrolled to is never cut at the top: on a 4 × 2 card three lines,
+     two while typing. */
+  > .gallery-note-field { flex: none; min-height: 0; height: max(26px, round(down, calc(100% - 28px), 26px)); }
+  > .gallery-note-field:focus:not(:read-only) { height: max(26px, round(down, calc(100% - 50px), 26px)); }
+  &:has(> .gallery-note-field:focus:not(:read-only)) { box-shadow: inset 0 0 0 2px var(--gallery-accent-wash); }
 }

package/packs/gallery/note/writing.md

@@ -7,7 +7,7 @@ A card for a custom page (its places are `page`): a few lines the user types on
 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 note`, the instance as template.html has it: its data part, a `<script type="application/json">` holding `{"text":"…"}` (on one line and compact, as the block writes it back), the note's words, lines apart with `\n`; `{"text":""}` for an empty one, which shows 写点什么.
 
 - Leave the words of a note that is there alone: they are the user's. To start one with words of yours (a list the user asked for), write them in `text`, as example.html does.
-- Sizes: 4 × 2 (the default), 2 × 2 and 4 × 4. Words that do not fit scroll inside the card.
+- Sizes: 4 × 2 (the default), 2 × 2 (no count of characters) and 4 × 4 are the ones its menu lists; any height from 2 to 8 cells, 2 to 4 wide, is one too (the card's corner reaches each). Words that do not fit scroll inside the card.
 
 ## What the user does
 
@@ -15,4 +15,4 @@ They click the card and type. What they typed is written to the page once they l
 
 ## How it looks
 
-Its head (a chip and 便签, how many characters it holds at its end) at the top, the words filling the rest of the card, in the page's font, with no frame of their own (the board draws the card's), 写点什么 muted where there are none; 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. Where nothing can be written (an export) it shows the same words, read-only. 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. Its head is a pencil's chip, 便签 and how many characters it holds; under it the words, half a size larger than the other cards' on wide 26px lines, each ruled faintly (a hint that it takes writing, not a yellow paper). While the reader types the card is ringed in the accent's wash and a line under the field says the two keys (Ctrl+Enter 保存, Esc 还原; ⌘Enter on a Mac). Empty, it says 写点什么… faintly.

package/packs/gallery/recent/component.json

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