@heycys/gallery 0.1.2 → 0.2.1

package/packs/gallery/static/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="26" width="72" height="8" rx="4" fill="#3b3a37"/><circle cx="33" cy="52" r="2" fill="#8f8d88"/><rect x="40" y="49.5" width="120" height="6" rx="3" fill="#7b7a76"/><circle cx="33" cy="66" r="2" fill="#8f8d88"/><rect x="40" y="63.5" width="96" height="6" rx="3" fill="#7b7a76"/><circle cx="33" cy="80" r="2" fill="#8f8d88"/><rect x="40" y="77.5" width="136" height="6" rx="3" fill="#7b7a76"/><rect x="30" y="92" width="46" height="5" rx="2.5" fill="#387dc9"/><rect x="82" y="92" width="40" height="5" rx="2.5" fill="#c4c2bd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="60.5" y="6.5" width="119" height="107" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="70" y="14" width="10" height="10" rx="3" fill="#efefed"/><rect x="84" y="16.5" width="30" height="5" rx="2.5" fill="#37352f"/><circle cx="72" cy="36" r="1.5" fill="#a6a5a1"/><rect x="77" y="34" width="52" height="4.5" rx="2.25" fill="#37352f"/><circle cx="72" cy="46" r="1.5" fill="#a6a5a1"/><rect x="77" y="44" width="40" height="4.5" rx="2.25" fill="#37352f"/><circle cx="72" cy="56" r="1.5" fill="#a6a5a1"/><rect x="77" y="54" width="46" height="4.5" rx="2.25" fill="#37352f"/><rect x="70" y="66" width="14" height="3.5" rx="1.75" fill="#a6a5a1"/><rect x="70" y="76" width="6" height="6" rx="3" fill="#d4d3cf"/><rect x="80" y="77" width="48" height="4.5" rx="2.25" fill="#4084cf"/><rect x="70" y="87" width="6" height="6" rx="3" fill="#d4d3cf"/><rect x="80" y="88" width="54" height="4.5" rx="2.25" fill="#4084cf"/><rect x="148" y="88.5" width="22" height="3.5" rx="1.75" fill="#d4d3cf"/><rect x="70" y="98" width="6" height="6" rx="3" fill="#d4d3cf"/><rect x="80" y="99" width="40" height="4.5" rx="2.25" fill="#4084cf"/></svg>

package/packs/gallery/static/style.css

@@ -1,26 +1,29 @@
 /* The static card has no script: what its content holds, any HTML, is what a reader sees. It gives that
-   HTML a plain reading look (headings, paragraphs, lists, links, a table, a picture no wider than the
-   card). Each of those rules is written in an @scope of the instance with :where(), so that it weighs
-   nothing: the page's own <style> and an inline style always win over it. It sets no color of its own
-   but the links' (the kit's link color): its words are the color they stand in, inherited (the page's
-   text, which follows the theme, or a color the page gives the card or a wrapper of the content), and
-   what is muted (small words, a quote, an empty card's words) or drawn as a line (a table's, a rule's, a
-   quote's) is a share of that color (color-mix with currentColor, the shares of the kit's own muted text
-   and lines), so that light words on a dark fill a page writes stay light in every heading and line.
-   Its first line keeps its end clear of the card's grip, and only its first: a float as wide and as high as
-   the grip's corner (--gallery-grip-room, the kit's card tokens) stands at the top right of the instance
-   on a card, before its content, so that the words of the first line or two go round it and every line
-   after has the card's whole width; its text wraps so that no line is left with a word or a character
-   alone (text-wrap: pretty). A heading the content starts with, where more follows it, is drawn as the
-   cards' head row (the kit's card tokens): the title's size and weight, a chip before it (the cards' tinted
-   square, the accent's, with lines of text in it: the one color it gives besides the links'), the face's gap
-   under it; a heading alone (a card that names a group of cards) stays a heading. Every selector stands in
-   the instance: nothing here reaches the rest of the page. A card with nothing in its content (a new one,
-   from a menu) says so, in the page's language, until an Agent writes it: the cards' empty face, a short
-   line over a muted one saying what to do. */
+   HTML a light reading look (the pack's design B): 13px words on 20px lines; the heading it starts with,
+   where more follows it, the cards' head row (a small chip of lines before it, 13px and 600, 8px over what
+   follows); a list's items after a small dot; a small heading (h4 to h6) a faint 11.5px label over what it
+   names; a paragraph of strong words alone right after the heading it starts with at the card's foot, with
+   what follows it; a paragraph holding one link a row of 28px, a small picture before the link (a page for one of the
+   workspace's, a link's for the web) and its <small> (a domain, a date) at its end; a table compact, its
+   heads faint, its rows a hairline apart; a heading alone (a card that names a group of cards) 15px, its
+   <small> beside it; a link alone (a tile) 600 after an arrow; content of one line on a card one cell high
+   in the middle of it. Each of those rules is written in an @scope of the instance with :where(), so that
+   it weighs nothing: the page's own <style> and an inline style always win over it. It sets no color of
+   its own but the links' (the accent's ink): its words are the color they stand in, inherited (the page's
+   text, which follows the theme, or a color the page gives the card or a wrapper of the content), and what
+   is muted (small words, a label, a quote, a dot, an empty card's words) or drawn as a line is a share of
+   that color (color-mix with currentColor: 65% muted, 12% a line), so that light words on a dark fill a page
+   writes stay light in every heading and line. Its first line keeps its end clear of the card's grip, and
+   only its first: a float as wide and as high as the grip's corner (--gallery-grip-room) stands at the top
+   right of the instance on a card, before its content, so that the words of the first line or two go round
+   it; its text wraps so that no line is left with a word or a character alone (text-wrap: pretty). Every
+   selector stands in the instance: nothing here reaches the rest of the page. A card with nothing in its
+   content (a new one, from a menu) says so, in the page's language, until an Agent writes it: the cards'
+   empty face, a short line over a muted one saying what to do. */
 [data-doc-component="gallery/static"] > div {
-  font-size: 14px;
-  line-height: 1.6;
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 20px;
   overflow-wrap: break-word;
   text-wrap: pretty;
 }
@@ -32,31 +35,49 @@
   height: var(--gallery-grip-room, 0px);
 }
 @scope ([data-doc-component="gallery/static"]) {
-  :where(h1, h2, h3, h4, h5, h6) {
-    margin: 12px 0 6px;
-    font-size: 15px;
-    line-height: 1.4;
-    font-weight: 600;
-  }
-  :where(h1, h2) { font-size: 18px; }
-  :where(h3) { font-size: 16px; }
+  :where(h1, h2, h3) { margin: 12px 0 6px; font-size: 15px; line-height: 22px; font-weight: 600; }
+  :where(h4, h5, h6) { margin: 14px 0 4px; font-size: 11.5px; line-height: 16px; font-weight: 600; color: color-mix(in srgb, currentColor 65%, transparent); }
   :where(p, ul, ol, dl, blockquote, table, figure, pre) { margin: 0 0 8px; }
-  :where(ul, ol) { padding-inline-start: 1.5em; }
-  :where(li + li) { margin-top: 2px; }
-  :where(a) { color: var(--doc-link); text-decoration: none; }
+  :where(ul) { display: flex; flex-direction: column; gap: 5px; padding: 0; list-style: none; }
+  :where(ul) > :where(li) { position: relative; padding-inline-start: 14px; }
+  :where(ul) > :where(li)::before { content: ""; position: absolute; top: 8px; inset-inline-start: 3px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, currentColor 45%, transparent); }
+  :where(ol) { padding-inline-start: 1.5em; }
+  :where(a) { color: var(--gallery-accent-ink); text-decoration: none; }
   :where(a:hover) { text-decoration: underline; }
   :where(img, svg, video) { max-width: 100%; }
   :where(img, video) { height: auto; }
-  :where(table) { border-collapse: collapse; }
-  :where(th, td) { padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); text-align: start; vertical-align: top; }
-  :where(th) { font-weight: 600; }
+  :where(table) { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  :where(th, td) { padding: 5px 8px 5px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); line-height: 18px; text-align: start; vertical-align: top; white-space: nowrap; }
+  :where(th) { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, currentColor 65%, transparent); }
+  :where(tr:last-child) > :where(td) { border-bottom-style: none; }
   :where(hr) { margin: 12px 0; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
   :where(code) { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 6%, transparent); font-family: var(--doc-mono); font-size: .9em; }
   /* A quote's line is a share of its own muted color: 18% of 65%, about the 12% of the other lines. */
   :where(blockquote) { padding-inline-start: 12px; border-inline-start: 3px solid color-mix(in srgb, currentColor 18%, transparent); color: color-mix(in srgb, currentColor 65%, transparent); }
-  :where(small) { color: color-mix(in srgb, currentColor 65%, transparent); }
+  :where(small) { font-size: 11.5px; color: color-mix(in srgb, currentColor 65%, transparent); }
   :scope > div > :where(:first-child) { margin-top: 0; }
   :scope > div > :where(:last-child) { margin-bottom: 0; }
+  /* A paragraph of one link (and a small word after it): a row, a small picture before the link, the small word at its end. */
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 -6px; padding: 0 6px; border-radius: 6px; }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(a) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(a)::before {
+    content: "";
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-inline-end: 8px;
+    vertical-align: -2px;
+    background: color-mix(in srgb, var(--gallery-text, currentColor) 45%, transparent);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(a[href^="http"])::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1 1M13.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1-1'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1 1M13.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1-1'/%3E%3C/svg%3E");
+  }
+  :where(p:has(> a:only-of-type)):where(:not(:has(> :not(a, small)))) > :where(small) { flex: none; }
+  /* A paragraph of strong words alone: a line larger, 15px. */
+  :where(p:has(> strong:only-child)):where(:not(:has(> :not(strong)))) { font-size: 15px; line-height: 22px; }
   /* The heading it starts with, where more follows: the cards' head row, a chip before it. */
   :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:first-child:not(:last-child)) {
     position: relative;
@@ -64,10 +85,11 @@
     align-items: center;
     gap: 8px;
     min-height: var(--gallery-chip-size);
-    margin: 0 0 var(--gallery-face-gap);
+    margin: 0 0 8px;
     font-size: var(--gallery-title-size);
     line-height: var(--gallery-title-line);
     font-weight: 600;
+    color: inherit;
   }
   :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:first-child:not(:last-child))::before {
     content: "";
@@ -75,7 +97,7 @@
     width: var(--gallery-chip-size);
     height: var(--gallery-chip-size);
     border-radius: var(--gallery-chip-radius);
-    background: var(--gallery-accent-soft);
+    background: color-mix(in srgb, currentColor 6%, transparent);
   }
   :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:first-child:not(:last-child))::after {
     content: "";
@@ -85,50 +107,61 @@
     width: var(--gallery-chip-icon);
     height: var(--gallery-chip-icon);
     margin-top: calc(var(--gallery-chip-icon) / -2);
-    background: var(--gallery-accent);
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M4.5 12h10M4.5 17.5h12.5'/%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M4.5 12h10M4.5 17.5h12.5'/%3E%3C/svg%3E") center / contain no-repeat;
+    background: color-mix(in srgb, currentColor 60%, transparent);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5h14M5 12h14M5 17.5h9'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5h14M5 12h14M5 17.5h9'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  /* A heading alone (a card naming a group of cards): 15px, its small words beside it. */
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:only-child) { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: inherit; }
+  :scope > div > :where(h1, h2, h3, h4, h5, h6):where(:only-child) > :where(small) { font-size: 12px; font-weight: 400; }
+  /* A link alone (a tile): 600, after an arrow, in the words' color. */
+  :scope > div > :where(p:only-child:has(> a:only-child)) > :where(a) { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; }
+  :scope > div > :where(p:only-child:has(> a:only-child)) > :where(a)::before {
+    content: "";
+    width: 15px;
+    height: 15px;
+    margin: 0;
+    background: color-mix(in srgb, currentColor 45%, transparent);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / contain no-repeat;
   }
 }
-/* Nothing in it: the cards' empty face, in the middle of the card, a share of its color as all else of
-   it: a soft disc with sparkles in it (the instance's ::before, one mask, where the grip's float stands on
-   a card with content, as nothing runs round it here), then a short line (还没有内容) over what to do, muted
-   (the content's ::before and ::after), each line whole. */
+/* A card whose heading is followed by a paragraph of strong words alone (还差 2 项, a number, a word to keep in
+   mind): the content as high as the card, a column, and that paragraph and what follows it at the card's foot,
+   as a small widget's figure (margin-top: auto). In a column no float goes round, so the grip's corner is
+   the heading's to keep clear (padding at its end), one line as it is. One rule for every size. */
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child) { height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child)::before { display: none; }
+.gallery-card > [data-doc-component="gallery/static"] > div:has(> :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child) { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"] > div:has(> :is(h1, h2, h3, h4, h5, h6):first-child + p > strong:only-child) > :is(h1, h2, h3, h4, h5, h6):first-child { padding-inline-end: var(--gallery-grip-room, 0px); }
+.gallery-card > [data-doc-component="gallery/static"] > div > :is(h1, h2, h3, h4, h5, h6):first-child + p:has(> strong:only-child) { margin-top: auto; }
+.gallery-card > [data-doc-component="gallery/static"] > div > :is(h1, h2, h3, h4, h5, h6):first-child + p:has(> strong:only-child) + p { margin-top: -2px; }
+/* Content of one line on a card: in the middle of its height. */
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :only-child:is(h1, h2, h3, h4, h5, h6, p)) { display: flex; flex-direction: column; justify-content: center; height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"]:has(> div > :only-child:is(h1, h2, h3, h4, h5, h6, p))::before { display: none; }
+/* Nothing in it: the cards' empty face, a short line over what to do, muted (the content's ::before and
+   ::after), each line whole, at the left of the card's middle. */
 [data-doc-component="gallery/static"]:has(> div:empty) {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
-  gap: 10px;
   box-sizing: border-box;
 }
 .gallery-card > [data-doc-component="gallery/static"]:has(> div:empty) { height: 100%; }
+.gallery-card > [data-doc-component="gallery/static"]:has(> div:empty)::before { display: none; }
 [data-doc-component="gallery/static"] > div:empty {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 2px;
+  align-items: flex-start;
+  gap: 4px;
   box-sizing: border-box;
-  padding: 0 12px;
-  font-size: 13px;
-  line-height: 1.45;
-  text-align: center;
-}
-[data-doc-component="gallery/static"]:has(> div:empty)::before,
-.gallery-card > [data-doc-component="gallery/static"]:has(> div:empty)::before {
-  content: "";
-  float: none;
-  flex: none;
-  width: 44px;
-  height: 44px;
-  background: color-mix(in srgb, currentColor 55%, transparent);
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm0-12a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm-7 12a6 6 0 0 1 6-6a6 6 0 0 1-6-6a6 6 0 0 1-6 6a6 6 0 0 1 6 6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm0-12a2 2 0 0 1 2 2a2 2 0 0 1 2-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2zm-7 12a6 6 0 0 1 6-6a6 6 0 0 1-6-6a6 6 0 0 1-6 6a6 6 0 0 1 6 6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
+  font-size: 12px;
+  line-height: 18px;
 }
-[data-doc-component="gallery/static"] > div:empty::before { content: "还没有内容"; font-size: 14px; }
+[data-doc-component="gallery/static"] > div:empty::before { content: "还没有内容"; font-size: 13.5px; line-height: 20px; font-weight: 600; }
 [data-doc-component="gallery/static"] > div:empty::after {
   content: "跟 Agent 说要在这里放什么";
-  color: color-mix(in srgb, currentColor 65%, transparent);
+  color: color-mix(in srgb, currentColor 55%, transparent);
 }
 :root[data-ge-language="en"] [data-doc-component="gallery/static"] > div:empty::before,
 :root:not([data-ge-language])[lang|="en" i] [data-doc-component="gallery/static"] > div:empty::before { content: "Nothing here yet"; }

package/packs/gallery/static/writing.md

@@ -8,8 +8,8 @@ Put it on a custom page as a card of its board, `<section class="gallery-card" d
 
 - the content, the `div` right inside the instance (its part `content`, edited as `none`): any HTML, headings, paragraphs, lists, links, a table, a picture. No `<script>`, no form fields, no `on…` attributes: the card only shows.
 - a picture: a file of the page's `assets/` (`pages/<slug>/assets/`), written `assets/<file>` (a name of letters, digits, dots, dashes and underscores, right in that folder), which the server serves at `/pages/<slug>/assets/<file>`: put the file there first (`gallery page check` says a picture whose file is not there), and never `cover.png` alone, which nothing serves. A small SVG or PNG may be a `data:` address in the `<img>` itself.
-- the look: the card gives it a plain one (14px text, headings a little larger, but a heading the content starts with, where more follows it, drawn as the cards' head row: the title's size, a chip of lines before it, so that the card sits among Gallery's own; a heading alone stays a heading, links in the kit's link color, tables with lines between rows, pictures no wider than the card) that weighs nothing, so that a page's own `<style>` or a `style` attribute changes any of it. It sets no color but the links' and that head chip's: its words are the color they stand in, the page's text or the color your page gives the card (`.gallery-card[data-card-id="…"] { background: …; color: … }`) or a wrapper of the content (`style="color: …"`), every heading in it too, and its small words, quotes and lines a share of that color. Write colors of your own for both themes (`:root[data-doc-effective-theme="dark"]` on a custom page), a link's too where its fill is dark.
-- Size: any whole number of cells, 1 to 12 wide and 1 to 24 high, 4 × 2 by default: write `data-w` and `data-h` to fit what you wrote (`gallery page add static --w <w> --h <h>` does too). The user changes it by dragging the card's lower right corner, or from the 大小 menu of the grip at the card's top right, which lists the common sizes. The card does not grow with what it holds: what does not fit scrolls inside it, so give it the height it needs.
+- the look: the card gives it a light one (Gallery 风格's: 13px words on 20px lines) that weighs nothing, so that a page's own `<style>` or a `style` attribute changes any of it: a heading the content starts with, where more follows it, is drawn as the cards' head row (13px, 600, a small chip of lines before it), so that the card sits among Gallery's own; a list's items stand after small dots; a small heading (`<h4>`) is a faint label over what follows (常用); a paragraph of one link is a row with a small picture before it (a page for one of the workspace's, a link's for the web) and its `<small>` at its end, for a domain or a date: `<p><a href="https://www.npmjs.com/…">npm · @heycys/gallery</a><small>npmjs.com</small></p>`; a paragraph of `<strong>` words alone is a line larger (15px), and right after the heading the content starts with it stands at the card's foot with what follows it, a small widget's figure (`<h3>发布前</h3><p><strong>还差 2 项</strong></p><p><small>门禁 · 盲测</small></p>`); a table is compact, its heads faint, its rows a hairline apart; a heading alone (a card that names a group of cards, `<h2>工作 <small>项目和待办</small></h2>`) is 15px with its small words beside it, and a link alone is a tile (600, after an arrow); content of one line stands in the middle of a card one cell high. Links are in the accent's ink. It sets no other color: its words are the color they stand in, the page's text or the color your page gives the card (`.gallery-card[data-card-id="…"] { background: …; color: … }`) or a wrapper of the content (`style="color: …"`), every heading in it too, and its small words, labels, dots, quotes and lines a share of that color. Write colors of your own for both themes (`:root[data-doc-effective-theme="dark"]` on a custom page), a link's too where its fill is dark.
+- Size: any whole number of cells, 1 to 12 wide and 1 to 24 high, 4 × 4 by default (2 × 1 for one link, 4 × 1 for a heading of a group, 4 × 2 for a few links, 8 × 2 for a short table): write `data-w` and `data-h` to fit what you wrote (`gallery page add static --w <w> --h <h>` does too). The user changes it by dragging the card's lower right corner, or from the 大小 menu of the grip at the card's top right, which lists the common sizes. The card does not grow with what it holds: what does not fit scrolls inside it, so give it the height it needs.
 
 An empty one (`<div></div>`, what a menu adds) says that it has nothing yet (还没有内容, 跟 Agent 说要在这里放什么), so that the user asks you for it.
 

package/packs/gallery/stats/component.json

@@ -1,13 +1,13 @@
 {
   "id": "gallery/stats",
   "apiVersion": 1,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "name": { "zh": "工作区统计", "en": "Workspace numbers" },
-  "description": { "zh": "文档数、待办完成了几项、总字数、本周编辑了几篇", "en": "How many documents, to-dos done, words in all, documents edited this week" },
+  "description": { "zh": "文档数、总字数、待办完成了几项、本周编辑了几次，各配一张小图", "en": "How many documents, words in all, to-dos done and edits this week, each over a small chart" },
   "words": "gongzuoqutongji tongji shuzi stats statistics numbers count words 统计 工作区 字数 文档数 待办",
   "parts": {},
   "runtime": { "generated": [":scope > .gallery-stats-face"] },
   "places": ["page"],
-  "card": { "sizes": [[4, 2], [8, 2]], "resize": true },
+  "card": { "sizes": [[8, 2], [12, 2], [4, 4]], "resize": true },
   "needs": ["workspace"]
 }