@heycys/gallery 0.1.2 → 0.2.0

package/kit/report.css

@@ -131,6 +131,8 @@
      palette's gray, opaque. The frame lies over the table's body, whose fill is the page's, where the
      veil comes out the gray of a block around it. */
   --doc-table-frame-filled: light-dark(#e6e5e3, #545450);
+  /* The hairline as it lies on the page, opaque: the right edge of a frame that scrolls sideways (table.css), under which the columns past it must not show through the dark veil. */
+  --doc-hairline-solid: light-dark(#e6e5e3, #383836);
   /* A flowchart's arrows and the circle behind a step's number (flowchart.css): neutral greys. */
   --doc-flow-line: light-dark(rgb(55 53 47 / 38%), rgb(255 255 255 / 34%));
   --doc-flow-badge: light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 10%));
@@ -176,49 +178,73 @@
   --doc-chart-axis-font-size: 13px;
   --doc-table-fill: var(--doc-bg);
   /* Cards (docs/render.md, Design defaults, "Cards"): a custom page's ground and the board's frame around each card
-     (board.css), and the language Gallery's own blocks draw their faces in, which an Agent's block uses
-     too (references/pages-and-data.md). One accent, Gallery's own blue (the list markers'), used
-     sparingly: an icon's chip, a ring or bar toward a target, a day done; green and red only for a state
-     that is good or bad; everything else the text and its muted gray. Dark is its own pair of surfaces
-     (a ground, a card a step lighter with a faint top edge), never the light one inverted. */
-  --gallery-page-fill: light-dark(#f8f8f7, #181818);
-  --gallery-card-fill: light-dark(#ffffff, #212121);
-  --gallery-card-line: light-dark(rgb(28 25 20 / 9%), rgb(255 255 255 / 8%));
-  --gallery-card-radius: 14px;
-  --gallery-card-pad: 18px;
-  --gallery-card-shadow: 0 1px 2px light-dark(rgb(28 25 20 / 4.5%), rgb(0 0 0 / 24%)), 0 8px 20px -10px light-dark(rgb(28 25 20 / 10%), rgb(0 0 0 / 45%)), inset 0 1px 0 light-dark(rgb(255 255 255 / 0%), rgb(255 255 255 / 4.5%));
-  --gallery-accent: light-dark(#2e7cd1, #5c9ad9);
-  --gallery-accent-soft: light-dark(rgb(46 124 209 / 9%), rgb(92 154 217 / 15%));
-  --gallery-good: light-dark(#2b8a4e, #5dbb7c);
-  --gallery-good-soft: light-dark(rgb(43 138 78 / 10%), rgb(93 187 124 / 14%));
+     (board.css), and the language Gallery's own blocks draw their faces in (the pack 「Gallery 风格」, the
+     design B of 2026-11-09: notes/plans/block-packs-plan-2026-11-09.md), which an Agent's block uses too
+     (references/pages-and-data.md). A quiet, type-led look: each card one hero (a big number, a field of
+     squares, a list), its head saying only whose it is, the rest small and gray. One accent, a Notion blue,
+     on the data and on today alone; a warm orange for the sun and a flame; green only for a thing done.
+     White cards on the page's own white, set off by a hairline ring and a soft shadow; dark its own pair of
+     surfaces (a card a step lighter than the ground), never the light one inverted. */
+  --gallery-page-fill: light-dark(#ffffff, #191919);
+  --gallery-card-fill: light-dark(#ffffff, #202020);
+  --gallery-card-line: light-dark(rgb(15 15 15 / 7%), rgb(255 255 255 / 7.5%));
+  --gallery-card-radius: 12px;
+  --gallery-card-pad: 16px;
+  /* The ring (the card's line, drawn outside it so that it takes nothing of its cells), a close shadow and a soft
+     one under it, deeper in dark: each a color of light-dark(), as a shadow's offsets cannot be. */
+  --gallery-card-shadow: 0 0 0 1px var(--gallery-card-line), 0 1px 2px light-dark(rgb(15 15 15 / 3.5%), rgb(0 0 0 / 25%)), 0 4px 14px -6px light-dark(rgb(15 15 15 / 7%), transparent), 0 6px 16px -8px light-dark(transparent, rgb(0 0 0 / 50%));
+  /* Its ink, five steps: the big numbers and a greeting (strong), the words (text), a label or a unit
+     (muted), a caption or a head's quiet meta (faint), and the faintest, a separator or a day to come. */
+  --gallery-text-strong: light-dark(#1d1d1b, #f3f3f1);
+  --gallery-text: light-dark(#37352f, rgb(255 255 255 / 86%));
+  --gallery-muted: light-dark(#7a7975, rgb(255 255 255 / 55%));
+  --gallery-faint: light-dark(#a6a5a1, rgb(255 255 255 / 36%));
+  --gallery-faintest: light-dark(#d4d3cf, rgb(255 255 255 / 17%));
+  /* A line between rows, a soft gray fill (a chip, an empty day), the track a bar or a ring stands on,
+     and a row under the pointer. */
+  --gallery-hair: light-dark(rgb(55 53 47 / 9%), rgb(255 255 255 / 8%));
+  --gallery-fill: light-dark(rgb(55 53 47 / 5.5%), rgb(255 255 255 / 6%));
+  --gallery-track: light-dark(rgb(55 53 47 / 10%), rgb(255 255 255 / 10%));
+  --gallery-hover: light-dark(rgb(55 53 47 / 6%), rgb(255 255 255 / 5.5%));
+  --gallery-neutral-soft: var(--gallery-fill);
+  /* The accent: its fill (today, a bar, a day done), its ink (words in it), a pale fill behind a primary
+     button's words, a middle shade (the days before today's in a week's bars, the Agent's share) and a wash
+     (a field's focus). */
+  --gallery-accent: light-dark(#4084cf, #508fd6);
+  --gallery-accent-ink: light-dark(#336db0, #8bb8e9);
+  --gallery-accent-soft: light-dark(#ebf2fa, rgb(80 143 214 / 17%));
+  --gallery-accent-mid: light-dark(#b0cbeb, #395f8d);
+  --gallery-accent-wash: light-dark(rgb(64 132 207 / 11%), rgb(80 143 214 / 18%));
+  --gallery-good: light-dark(#2f9e68, #3db37a);
+  --gallery-good-ink: light-dark(#217a4e, #74d4a3);
+  --gallery-good-soft: light-dark(#e6f4ec, rgb(61 179 122 / 16%));
   --gallery-bad: light-dark(#c8473d, #f07d72);
   --gallery-bad-soft: light-dark(rgb(200 71 61 / 9%), rgb(240 125 114 / 14%));
-  --gallery-neutral-soft: light-dark(rgb(33 27 23 / 5.5%), rgb(255 255 255 / 7%));
-  /* What a ring, a bar or an empty day stands on: the track. */
-  --gallery-track: light-dark(rgb(33 27 23 / 7%), rgb(255 255 255 / 8%));
-  /* A card's head: its icon in a tinted rounded square (the chip), its title, a quiet meta text. */
-  --gallery-chip-size: 26px;
-  --gallery-chip-radius: 8px;
-  --gallery-chip-icon: 15px;
-  --gallery-title-size: 14px;
+  /* The warm one: the sun's chip by day, a streak's flame, a stale weather's sign. */
+  --gallery-warm: light-dark(#e08a12, #f2ae45);
+  --gallery-warm-soft: light-dark(#fdf1dd, rgb(242 174 69 / 15%));
+  /* A card's head: its icon in a small gray rounded square (the chip; warm or blue for the sun, a flame, the
+     moon), its title, a quiet meta text; 8px apart, the row 20px high. */
+  /* The cards' own type: Segoe UI on Windows, PingFang SC on a Mac, Microsoft YaHei for the Chinese Segoe UI
+     has not; as the system draws them (not the document's metrics-tuned alias, --doc-font's Doc Segoe). */
+  --gallery-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
+  --gallery-chip-size: 20px;
+  --gallery-chip-radius: 6px;
+  --gallery-chip-icon: 13px;
+  --gallery-title-size: 13px;
   --gallery-title-line: 20px;
   --gallery-meta-size: 12px;
   /* The rows of a card's face stand this far apart. */
-  --gallery-face-gap: 10px;
-  /* A card's ink: the document's text in light; in dark a softer white than the document's #f3f3f3 (which
-     on a card's #212121 makes Chinese words look heavy and lit), a step brighter for its titles and big
-     numbers. The muted gray stays the document's. */
-  --gallery-text: light-dark(var(--doc-text), rgb(255 255 255 / 82%));
-  --gallery-text-strong: light-dark(var(--doc-text), rgb(255 255 255 / 90%));
-  /* A big number: its weight and tracking, figures of one width; its unit a smaller muted word after it,
-     this far from it (of the unit's own size), the same in every block. Two sizes: the hero, a card's one
-     main number (a countdown's days, a streak, a temperature, a heatmap's total), and the figure, a
-     number among others (the stats' cells, a ring's middle on a large ring). */
+  --gallery-face-gap: 8px;
+  /* A big number: its weight and tracking, figures of one height; its unit a 13px muted word 3px after it
+     (--gallery-unit-size, a share of the number, is what a document's metric takes). Two sizes: the hero,
+     a card's one main number, and the figure, a number among others. */
   --gallery-numeral-weight: 600;
   --gallery-numeral-tracking: -.025em;
   --gallery-unit-size: .4em;
   --gallery-unit-gap: .3em;
-  --gallery-hero-size: 40px;
+  --gallery-unit: 13px;
+  --gallery-hero-size: 44px;
   --gallery-figure-size: 28px;
 }
 
@@ -448,19 +474,48 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
 }
 .doc-net-consent-allow:is(:hover, :focus-visible) { outline: none; background: color-mix(in srgb, var(--doc-accent) 22%, transparent); }
 .doc-net-consent-allow:active { background: color-mix(in srgb, var(--doc-accent) 30%, transparent); }
+/* The why's words, and the button's: in a document the why and 允许访问 <host>; on a card the from line and the short words too. */
+.doc-net-consent-words { display: contents; }
+.doc-net-consent-from, .doc-net-consent-short { display: none; }
+/* On a card of a custom page (the pack Gallery 风格's banner, design B): over the card under its head row, on
+   the card's fill, so that the card still says whose it is: the why (13.5px, 600) over whose the data is
+   (faint) at the left, 允许访问 at the right, a pale primary with no line; the hosts in its title. */
 .gallery-card > .doc-net-consent {
   position: absolute;
-  inset: 0;
+  inset: calc(var(--gallery-card-pad, 16px) + 20px) 0 0;
   z-index: 1;
-  flex-direction: column;
   flex-wrap: nowrap;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 12px;
   margin: 0;
-  padding: 12px;
-  border-radius: inherit;
-  text-align: center;
+  padding: 0 var(--gallery-card-pad, 16px) var(--gallery-card-pad, 16px);
+  border-radius: 0 0 var(--gallery-card-radius, 12px) var(--gallery-card-radius, 12px);
+  font: 13px/1.5 var(--gallery-font, var(--doc-font));
   background: var(--gallery-card-fill, var(--doc-surface));
 }
+.gallery-card > .doc-net-consent > .doc-net-consent-words { display: flex; flex-direction: column; min-width: 0; }
+.gallery-card > .doc-net-consent .doc-net-consent-why { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text, var(--doc-text)); }
+.gallery-card > .doc-net-consent .doc-net-consent-from { display: block; overflow: hidden; font-size: 12px; line-height: 18px; color: var(--gallery-faint, var(--doc-muted)); white-space: nowrap; text-overflow: ellipsis; }
+.gallery-card > .doc-net-consent > .doc-net-consent-allow {
+  flex: none;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--gallery-accent-ink, var(--doc-accent));
+  background: var(--gallery-accent-soft, color-mix(in srgb, var(--doc-accent) 14%, transparent));
+}
+.gallery-card > .doc-net-consent > .doc-net-consent-allow:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--gallery-accent, var(--doc-accent)) 18%, var(--gallery-accent-soft, transparent)); }
+.gallery-card > .doc-net-consent .doc-net-consent-long { display: none; }
+.gallery-card > .doc-net-consent .doc-net-consent-short { display: inline; }
+/* On a narrow card (data-doc-net-narrow: under 240px of content, net.js) the line just over the button, both at the card's
+   foot, the button as wide as the card, as a narrow habit card's streak and 打卡 are; the line 13px, three lines at
+   most, and whose the data is left to the button's title, so that the banner fits a 2 × 2 card in either language. */
+.gallery-card > .doc-net-consent[data-doc-net-narrow] { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; }
+.gallery-card > .doc-net-consent[data-doc-net-narrow] .doc-net-consent-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; line-height: 17px; }
+.gallery-card > .doc-net-consent[data-doc-net-narrow] .doc-net-consent-from { display: none; }
 @media print {
   .doc-net-consent { display: none; }
 }
@@ -1639,6 +1694,21 @@ span.doc-link-mention-icon {
    title too, and a callout the file has empty (an empty one of the editor's before 2026-11-07). */
 .doc-page :where(p, h1, h2, h3, h4, li, .doc-callout, .doc-details-summary-label):empty::after { content: "\200b"; }
 
+/* A paragraph's or a heading's alignment and indent (对齐与缩进 in the page editor's block menu,
+   Feishu's): centred or at the right (left is neither), and moved in by levels of two body characters,
+   whatever the block's own size, its background with it (a margin, so its fill keeps to its words). */
+:is(p, h1, h2, h3, h4).doc-align-center { text-align: center; }
+:is(p, h1, h2, h3, h4).doc-align-right { text-align: right; }
+:is(p, h1, h2, h3, h4):is(.doc-indent-1, .doc-indent-2, .doc-indent-3, .doc-indent-4, .doc-indent-5, .doc-indent-6, .doc-indent-7, .doc-indent-8) { margin-inline-start: calc(var(--doc-indent-level) * 2 * var(--doc-body-font-size)); }
+.doc-indent-1 { --doc-indent-level: 1; }
+.doc-indent-2 { --doc-indent-level: 2; }
+.doc-indent-3 { --doc-indent-level: 3; }
+.doc-indent-4 { --doc-indent-level: 4; }
+.doc-indent-5 { --doc-indent-level: 5; }
+.doc-indent-6 { --doc-indent-level: 6; }
+.doc-indent-7 { --doc-indent-level: 7; }
+.doc-indent-8 { --doc-indent-level: 8; }
+
 /* An item's color (颜色 in the page editor's block menu, notion-lite's: base.css's classes): a text
    color is its marker's too, and the items it holds take both; a background lies behind it, its
    marker and the items it holds, 2px past them as a paragraph's (base.css), its part left of the
@@ -2601,6 +2671,7 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 
 .doc-table-wrap {
   --doc-table-frame: var(--doc-hairline);
+  --doc-table-frame-solid: var(--doc-hairline-solid);
   position: relative;
   align-self: start;
   /* A share over 1 keeps the wrapper at the reading width; the table is that much wider and
@@ -2627,6 +2698,11 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   scrollbar-width: none;
 }
 .doc-table-wrap::-webkit-scrollbar { display: none; } /* WebKit without scrollbar-width */
+/* A table narrower than the text is placed on the page as a paragraph's words are (对齐 in the page
+   editor's block menu, a text block's classes: components/align.mjs): at the left unless its frame
+   says centred or at the right, where the text has room (a frame as wide as the text has none). */
+:is(.doc-table-wrap, table).doc-align-center { margin-inline: auto; }
+:is(.doc-table-wrap, table).doc-align-right { margin-inline: auto 0; }
 /* A short table, or one mostly of words (data-doc-whole, tables/whole.js), is shown whole: its
    frame as tall as its rows, read with the page. A long table of data keeps the kit's height above,
    its rows scrolling under the header row that stays; a height written on the frame
@@ -2702,7 +2778,7 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .doc-table-wrap:has(> .doc-scrollbars) { outline-color: transparent; }
 /* In a block with a fill of its own (a highlight block, its gray its own unless it is given a text
    color; any block of the palette's background colors) the frame's line is opaque (above). */
-:is(:is(.doc-summary, .doc-panel):not(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red), .doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) .doc-table-wrap { --doc-table-frame: var(--doc-table-frame-filled); }
+:is(:is(.doc-summary, .doc-panel):not(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red), .doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) .doc-table-wrap { --doc-table-frame: var(--doc-table-frame-filled); --doc-table-frame-solid: var(--doc-table-frame-filled); }
 /* A frame that scrolls sideways and is not at its end fades out at its right edge (data-more,
    tables.js): the columns go on past it, which its rails, shown only under the pointer, do not say.
    Drawn over the cells by the frame's line layer, taking no room. */
@@ -2719,6 +2795,9 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   transition: opacity 160ms ease;
 }
 .doc-scrollbars[data-more] > .doc-scrollbars-frame::after { opacity: 1; }
+/* Its right edge, under which the columns past it lie, is drawn opaque (the dark line is a veil that
+   shows what is under it): the line over the fade, nothing of those columns through it. */
+.doc-scrollbars[data-more] > .doc-scrollbars-frame { border-right-color: var(--doc-table-frame-solid); }
 
 /* Each cell draws its own lines, on its right and at its bottom (separate borders: a cell that sticks
    while the frame scrolls takes its lines along, a merged cell has them where it ends); in a frame

package/kit/runtime.js

@@ -4,7 +4,7 @@
   var define_COMPONENT_FLOWS_default = [".doc-page", ".doc-section", ".doc-summary", ".doc-panel", ".doc-callout", ".doc-details-content", ".doc-dialog-content", "[data-doc-sheet]", ".doc-column", "[data-doc-slot]"];
 
   // <define:__COMPONENT_RUNTIME__>
-  var define_COMPONENT_RUNTIME_default = [{ id: "page", match: "main.doc-page", runtime: { generated: [".doc-display", "script[data-doc-state]"], root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls", "data-doc-effective-theme", "data-doc-platform"] }, state: { html: ["data-doc-theme", "data-doc-font", "data-doc-size", "data-doc-spacing", "data-doc-measure", "data-doc-width"] }, internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error", "doc-net-consent*", "data-doc-snapshot", "data-at", "data-x", "data-y", "data-w", "data-h", "data-columns"] } }, { id: "text", runtime: { classes: { ".doc-range": ["doc-range"], ".doc-long-run": ["doc-long-run"] } } }, { id: "mention", runtime: { attrs: { "a.doc-link-mention": ["data-doc-gone"] } } }, { id: "paragraph", match: "p" }, { id: "heading", match: "h1, h2, h3, h4" }, { id: "list", match: "ul, ol", runtime: { attrs: { "ol.doc-flow": ["data-doc-flow-key", "data-doc-flow-recount"] }, generated: ["br.doc-item-line"] } }, { id: "quote", match: "blockquote" }, { id: "code", match: ".doc-code", runtime: { generated: [".doc-code-fold", ".doc-code-range", ".doc-code-tools"], internal: ["doc-code-lines", "doc-code-line*", "doc-code-content", "doc-code-toolbar", "doc-code-language", "doc-code-separator", "doc-code-copy*", "doc-code-wrap*", "data-line-number"] } }, { id: "divider", match: "hr" }, { id: "math", match: ".doc-math-inline, .doc-math-block", runtime: { generated: [".doc-math-break", ".doc-math-joiner"], classes: { ".doc-math-tie": ["doc-math-tie"], ".doc-math-skip": ["doc-math-skip"] } } }, { id: "section", match: "section.doc-section" }, { id: "highlight", match: ".doc-panel, .doc-summary" }, { id: "callout", match: ".doc-callout" }, { id: "details", match: "details.doc-details" }, { id: "dialog", match: "dialog.doc-dialog", runtime: { attrs: { "dialog.doc-dialog": ["data-doc-dialog-ready", "open", "aria-label"], ".doc-dialog-content": ["tabindex"] }, root: { classes: ["doc-dialog-open", "doc-dialog-gutter"] }, internal: ["doc-dialog-in", "doc-dialog-fade"] } }, { id: "sheets", match: "[data-doc-sheets]", runtime: { state: { "[data-doc-sheets]": ["data-active-sheet"], "[data-sheet-tab]": ["aria-selected", "tabindex", "is-active"], "[data-doc-sheet]": ["hidden", "aria-hidden"] }, internal: ["doc-sheets"] } }, { id: "table", match: "table.doc-table", runtime: { generated: ["colgroup[data-doc-columns]", ".doc-scrollbars"], attrs: { "table.doc-table": ["data-doc-sortable-ready", "data-doc-filled"], ".doc-table-wrap": ["data-doc-min-width", "data-doc-layout", "data-doc-whole"], "th, td": ["data-column-kind", "data-column-wrap", "data-run-wrap", "data-doc-edge"] }, classes: { "table.doc-table": ["doc-table--auto"] }, internal: ["doc-code-run", "doc-table-sort-button", "doc-scrollbar*", "data-doc-sort-arrow", "data-active", "data-drag", "data-x", "data-y", "data-more"] } }, { id: "columns", match: ".doc-columns" }, { id: "figure", match: "figure" }, { id: "chart", match: "[data-doc-chart]", runtime: { attrs: { "[data-doc-chart]": ["data-doc-layout"] }, classes: { "[data-doc-chart]": ["doc-chart"] }, internal: ["doc-chart-message", "data-missing"] } }, { id: "image", match: "figure.doc-image", runtime: { generated: ["dialog.doc-zoom"], attrs: { "img[data-doc-zoom]": ["data-doc-zoom", "tabindex", "role", "aria-haspopup", "aria-label"] }, root: { classes: ["doc-zoom-open", "doc-zoom-gutter", "doc-zoom-hover"] }, internal: ["doc-zoom-*"] } }, { id: "file", match: "figure.doc-file" }, { id: "bookmark", match: "figure.doc-bookmark" }, { id: "embed", match: "figure.doc-embed", runtime: { attrs: { "iframe.doc-embed-frame": ["data-doc-blob"] } } }, { id: "diff", match: ".doc-diff", runtime: { generated: [".doc-diff-body", ".doc-diff-stats"], internal: ["doc-diff-added", "doc-diff-removed"] } }, { id: "icon", match: ".doc-icon", runtime: { internal: ["data-doc-tab-icon"] } }, { id: "installed", match: "div[data-doc-component], section[data-doc-component]", runtime: { generated: [".doc-component-note", ".doc-component-data"], attrs: { "[data-doc-fallback]": ["data-doc-fallback"], "[data-doc-fallback-control]": ["data-doc-fallback-control", "inert"] }, internal: ["data-doc-package", "doc-component-more", "doc-component-one", "doc-component-line", "doc-component-short", "doc-dragging"] } }, { id: "state", match: "[data-doc-bind], [data-doc-show]", runtime: { generated: [".doc-choice"], attrs: { "[data-doc-show]": ["hidden"] }, state: { "button[data-doc-bind]": ["aria-pressed"] }, internal: ["doc-choice-*"] } }];
+  var define_COMPONENT_RUNTIME_default = [{ id: "page", match: "main.doc-page", runtime: { generated: [".doc-display", "script[data-doc-state]"], root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls", "data-doc-effective-theme", "data-doc-platform"] }, state: { html: ["data-doc-theme", "data-doc-font", "data-doc-size", "data-doc-spacing", "data-doc-measure", "data-doc-width"] }, internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error", "doc-net-consent*", "data-doc-snapshot", "data-doc-net-narrow", "data-at", "data-x", "data-y", "data-w", "data-h", "data-columns"] } }, { id: "text", runtime: { classes: { ".doc-range": ["doc-range"], ".doc-long-run": ["doc-long-run"] } } }, { id: "mention", runtime: { attrs: { "a.doc-link-mention": ["data-doc-gone"] } } }, { id: "paragraph", match: "p" }, { id: "heading", match: "h1, h2, h3, h4" }, { id: "list", match: "ul, ol", runtime: { attrs: { "ol.doc-flow": ["data-doc-flow-key", "data-doc-flow-recount"] }, generated: ["br.doc-item-line"] } }, { id: "quote", match: "blockquote" }, { id: "code", match: ".doc-code", runtime: { generated: [".doc-code-fold", ".doc-code-range", ".doc-code-tools"], internal: ["doc-code-lines", "doc-code-line*", "doc-code-content", "doc-code-toolbar", "doc-code-language", "doc-code-separator", "doc-code-copy*", "doc-code-wrap*", "data-line-number"] } }, { id: "divider", match: "hr" }, { id: "math", match: ".doc-math-inline, .doc-math-block", runtime: { generated: [".doc-math-break", ".doc-math-joiner"], classes: { ".doc-math-tie": ["doc-math-tie"], ".doc-math-skip": ["doc-math-skip"] } } }, { id: "section", match: "section.doc-section" }, { id: "highlight", match: ".doc-panel, .doc-summary" }, { id: "callout", match: ".doc-callout" }, { id: "details", match: "details.doc-details" }, { id: "dialog", match: "dialog.doc-dialog", runtime: { attrs: { "dialog.doc-dialog": ["data-doc-dialog-ready", "open", "aria-label"], ".doc-dialog-content": ["tabindex"] }, root: { classes: ["doc-dialog-open", "doc-dialog-gutter"] }, internal: ["doc-dialog-in", "doc-dialog-fade"] } }, { id: "sheets", match: "[data-doc-sheets]", runtime: { state: { "[data-doc-sheets]": ["data-active-sheet"], "[data-sheet-tab]": ["aria-selected", "tabindex", "is-active"], "[data-doc-sheet]": ["hidden", "aria-hidden"] }, internal: ["doc-sheets"] } }, { id: "table", match: "table.doc-table", runtime: { generated: ["colgroup[data-doc-columns]", ".doc-scrollbars"], attrs: { "table.doc-table": ["data-doc-sortable-ready", "data-doc-filled"], ".doc-table-wrap": ["data-doc-min-width", "data-doc-layout", "data-doc-whole"], "th, td": ["data-column-kind", "data-column-wrap", "data-run-wrap", "data-doc-edge"] }, classes: { "table.doc-table": ["doc-table--auto"] }, internal: ["doc-code-run", "doc-table-sort-button", "doc-scrollbar*", "data-doc-sort-arrow", "data-active", "data-drag", "data-x", "data-y", "data-more"] } }, { id: "columns", match: ".doc-columns" }, { id: "figure", match: "figure" }, { id: "chart", match: "[data-doc-chart]", runtime: { attrs: { "[data-doc-chart]": ["data-doc-layout"] }, classes: { "[data-doc-chart]": ["doc-chart"] }, internal: ["doc-chart-message", "data-missing"] } }, { id: "image", match: "figure.doc-image", runtime: { generated: ["dialog.doc-zoom"], attrs: { "img[data-doc-zoom]": ["data-doc-zoom", "tabindex", "role", "aria-haspopup", "aria-label"] }, root: { classes: ["doc-zoom-open", "doc-zoom-gutter", "doc-zoom-hover"] }, internal: ["doc-zoom-*"] } }, { id: "file", match: "figure.doc-file" }, { id: "bookmark", match: "figure.doc-bookmark" }, { id: "embed", match: "figure.doc-embed", runtime: { attrs: { "iframe.doc-embed-frame": ["data-doc-blob"] } } }, { id: "diff", match: ".doc-diff", runtime: { generated: [".doc-diff-body", ".doc-diff-stats"], internal: ["doc-diff-added", "doc-diff-removed"] } }, { id: "icon", match: ".doc-icon", runtime: { internal: ["data-doc-tab-icon"] } }, { id: "installed", match: "div[data-doc-component], section[data-doc-component]", runtime: { generated: [".doc-component-note", ".doc-component-data"], attrs: { "[data-doc-fallback]": ["data-doc-fallback"], "[data-doc-fallback-control]": ["data-doc-fallback-control", "inert"] }, internal: ["data-doc-package", "doc-component-more", "doc-component-one", "doc-component-line", "doc-component-short", "doc-dragging"] } }, { id: "state", match: "[data-doc-bind], [data-doc-show]", runtime: { generated: [".doc-choice"], attrs: { "[data-doc-show]": ["hidden"] }, state: { "button[data-doc-bind]": ["aria-pressed"] }, internal: ["doc-choice-*"] } }];
 
   // src/render/kit/runtime/bindings.js
   var global = globalThis;
@@ -494,8 +494,14 @@
     "flowchart": FLOW_LABEL,
     // net.js: a block whose fetch waits for the reader's consent, its bar's line and its button.
     "net-why": { zh: "\u8FD9\u4E2A\u5757\u8981\u8054\u7F51\u624D\u80FD\u663E\u793A\u5185\u5BB9", en: "This block needs the internet to show its content" },
+    // On a card a reader reads: what letting it online brings, never the maintainers' 块 (a block's manifest may say its own: card.consent).
+    "net-card-why": { zh: "\u5141\u8BB8\u8054\u7F51\u4E4B\u540E\u663E\u793A\u5185\u5BB9", en: "Allow internet access to show this" },
     "net-allow": { zh: "\u5141\u8BB8\u8BBF\u95EE {0}", en: "Allow {0}" },
-    "net-allow-many": { zh: "\u5141\u8BB8\u8BBF\u95EE {0} \u7B49 {1} \u4E2A\u7F51\u7AD9", en: "Allow {0} and others ({1} sites)" }
+    "net-allow-many": { zh: "\u5141\u8BB8\u8BBF\u95EE {0} \u7B49 {1} \u4E2A\u7F51\u7AD9", en: "Allow {0} and others ({1} sites)" },
+    // On a card of a custom page: the button's words alone, and a line under the why saying whose the data is.
+    "net-allow-short": { zh: "\u5141\u8BB8\u8BBF\u95EE", en: "Allow" },
+    "net-from": { zh: "\u6570\u636E\u6765\u81EA {0}", en: "From {0}" },
+    "net-from-many": { zh: "\u6570\u636E\u6765\u81EA {0} \u7B49 {1} \u4E2A\u7F51\u7AD9", en: "From {0} and others ({1} sites)" }
   };
   var UI_LANGUAGE = "data-ge-language";
   function kitLanguage(root = globalThis.document?.documentElement) {
@@ -1070,7 +1076,9 @@
     "doc-valign-top",
     "doc-valign-middle",
     "doc-valign-bottom",
-    "doc-bold"
+    "doc-bold",
+    // A paragraph's or a heading's indent (the editor's components/align.mjs INDENTS; its alignment is a cell's classes above).
+    ...Array.from({ length: 8 }, (_, index) => `doc-indent-${index + 1}`)
   ]);
   function lookChanged(before, after) {
     const looks = (value) => [...new Set(String(value ?? "").split(/\s+/).filter((name) => LOOK_CLASSES.has(name)))].sort().join(" ");
@@ -1250,6 +1258,17 @@ ${indent}${list2 ? "]" : "}"}`;
       }
     };
     const ownSlug = () => document.querySelector(".doc-page")?.dataset.docId || null;
+    const NARROW = 240;
+    const fit = (bar) => {
+      const card = bar.parentElement;
+      if (!card?.classList.contains("gallery-card")) return;
+      const style = global2.getComputedStyle(card);
+      const inner = card.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+      bar.toggleAttribute("data-doc-net-narrow", inner > 0 && inner < NARROW);
+    };
+    global2.addEventListener("doc-layout-change", () => {
+      for (const bar of bars.values()) if (bar.isConnected) fit(bar);
+    });
     const pageSlug = () => /^\/pages\/([a-z0-9-]+)\/?$/.exec(location.pathname)?.[1] ?? null;
     function clear(host) {
       refused.delete(host);
@@ -1275,6 +1294,11 @@ ${indent}${list2 ? "]" : "}"}`;
         bar.setAttribute("role", "group");
         const why = document.createElement("span");
         why.className = `${CONSENT_BAR}-why`;
+        const from = document.createElement("span");
+        from.className = `${CONSENT_BAR}-from`;
+        const words = document.createElement("span");
+        words.className = `${CONSENT_BAR}-words`;
+        words.append(why, from);
         const button2 = document.createElement("button");
         button2.type = "button";
         button2.className = `${CONSENT_BAR}-allow`;
@@ -1284,16 +1308,30 @@ ${indent}${list2 ? "]" : "}"}`;
           const waiting = refused.get(host);
           if (waiting) ask(waiting.id, waiting.hosts);
         });
-        bar.append(why, button2);
+        bar.append(words, button2);
         host.after(bar);
         bars.set(host, bar);
       }
       const [first, ...others] = hosts;
-      bar.querySelector(`.${CONSENT_BAR}-why`).textContent = sayRuntime("net-why");
+      const onCard = host.parentElement?.classList.contains("gallery-card") === true;
+      const own = describe(id)?.consent?.[kitLanguage()];
+      const reason = onCard ? typeof own === "string" && own ? own : sayRuntime("net-card-why") : sayRuntime("net-why");
+      bar.querySelector(`.${CONSENT_BAR}-why`).textContent = reason;
+      fit(bar);
       const button = bar.querySelector(`.${CONSENT_BAR}-allow`);
-      button.textContent = others.length > 0 ? sayRuntime("net-allow-many", first, hosts.length) : sayRuntime("net-allow", first);
+      const long2 = document.createElement("span");
+      long2.className = `${CONSENT_BAR}-long`;
+      long2.textContent = others.length > 0 ? sayRuntime("net-allow-many", first, hosts.length) : sayRuntime("net-allow", first);
+      const short = document.createElement("span");
+      short.className = `${CONSENT_BAR}-short`;
+      short.textContent = sayRuntime("net-allow-short");
+      button.replaceChildren(long2, short);
+      button.setAttribute("aria-label", long2.textContent);
+      const site = (name) => name.split(".").slice(-2).join(".");
+      const shared = hosts.every((name) => site(name) === site(first)) ? site(first) : null;
+      bar.querySelector(`.${CONSENT_BAR}-from`).textContent = shared ? sayRuntime("net-from", shared) : others.length > 0 ? sayRuntime("net-from-many", first, hosts.length) : sayRuntime("net-from", first);
       button.title = hosts.join("\n");
-      bar.setAttribute("aria-label", sayRuntime("net-why"));
+      bar.setAttribute("aria-label", reason);
     }
     global2.addEventListener("doc-settings-changed", (event) => {
       const told = event.detail?.net;

package/kit/tables.js

@@ -421,6 +421,8 @@
         "doc-kit-error",
         "doc-net-consent*",
         "data-doc-snapshot",
+        // A consent bar on a card under 240px of content (runtime/net.js), its line over its button.
+        "data-doc-net-narrow",
         // The time an export's snapshot was made (its data-doc-snapshot tag's: render/net-snapshot.mjs), which context.workspace.query answers as `at`.
         "data-at",
         // A custom page's (no document's: src/render/page-html.mjs, the kit's board/): its cards' cells, the Agent's

package/kit/ui.js

@@ -250,6 +250,8 @@ ${source}
         "doc-kit-error",
         "doc-net-consent*",
         "data-doc-snapshot",
+        // A consent bar on a card under 240px of content (runtime/net.js), its line over its button.
+        "data-doc-net-narrow",
         // The time an export's snapshot was made (its data-doc-snapshot tag's: render/net-snapshot.mjs), which context.workspace.query answers as `at`.
         "data-at",
         // A custom page's (no document's: src/render/page-html.mjs, the kit's board/): its cards' cells, the Agent's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycys/gallery",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Gallery: documents written as HTML by an AI agent, shown and edited in the browser, delivered as one offline file. The gallery command and its local server.",
   "keywords": [
     "gallery",

package/packs/gallery/chart-view/kit.js

@@ -1,5 +1,5 @@
 // gallery/chart-view (图表): a view of a table of the document (its manifest's needs hold "tables"; the
-// table's frame carries the key its data-doc-from names, which the table's 视图 › puts on both), drawn as
+// table's frame carries the key its data-doc-from names, which a chart made from "/" takes from the table above it), drawn as
 // horizontal bars from zero, each with its value at its end, under its title. Its settings (its data part
 // `settings`, JSON) say what: `by` a column whose values are the bars (the rows grouped by it, in the order
 // the rows first say them), each the `op` of its rows, "count" (how many), "sum" or "average" of the
@@ -30,7 +30,7 @@ const WORDS = {
     average: (/** @type {string} */ by, /** @type {string} */ value) => `各${by}的${value}平均`,
     each_: (/** @type {string} */ name, /** @type {string} */ value) => `各${name}的${value}`,
     more: (/** @type {number} */ shown, /** @type {number} */ all) => `只画了前 ${shown} 条，共 ${all} 条：按一列分组可以都画出来。`,
-    unbound: "这张图还没有接到表格上：在表格的菜单里选“视图 › 图表”。",
+    unbound: "这张图还没有接到表格上：在它的菜单里选“设置…”，选一张表格。",
     unread: "读不到这张图的表格：它不在页面上了，或者有合并的单元格。",
     missing: (/** @type {string} */ name) => `找不到列“${name}”：表格的列名改过了吗？`,
     noNumbers: "表格里没有写数的列：每行一条、合计和平均要一列数。",
@@ -50,7 +50,7 @@ const WORDS = {
     average: (/** @type {string} */ by, /** @type {string} */ value) => `Average ${value} by ${by}`,
     each_: (/** @type {string} */ name, /** @type {string} */ value) => `${value} by ${name}`,
     more: (/** @type {number} */ shown, /** @type {number} */ all) => `The first ${shown} bars of ${all}: group by a column to draw them all.`,
-    unbound: "This chart reads no table yet: pick View › Chart in a table's menu.",
+    unbound: "This chart reads no table yet: pick Settings… in its menu and choose a table.",
     unread: "This chart's table cannot be read: it is not on the page, or it has merged cells.",
     missing: (/** @type {string} */ name) => `No column “${name}”: was the table's column renamed?`,
     noNumbers: "The table has no column of numbers: a bar a row, a sum and an average need one.",

package/packs/gallery/chart-view/writing.md

@@ -15,7 +15,7 @@ Write a table, then the chart, as example.html does (`gallery block show gallery
 
   One table may have several views (a 看板, 指标, another chart), each with the same key.
 
-The reader adds a chart in Gallery from a table's menu, 视图 › 图表, which writes the key on both; it is not in "/", as a chart needs its table. Its ⚙ (where the page edits) changes its settings.
+The reader adds a chart in Gallery from "/" (图表): it reads the nearest table above it, the key written on both; its menu's 设置… picks another table and changes its settings (so does its ⚙, where the page edits).
 
 ## How it looks
 

package/packs/gallery/countdown/component.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery/countdown",
   "apiVersion": 1,
-  "version": "1.3.0",
+  "version": "2.0.0",
   "name": { "zh": "倒计时", "en": "Countdown" },
   "description": { "zh": "离某一天还有几天，到了那天说今天，过了说已经几天", "en": "How many days until a date: today on the day, and the days since after it" },
   "words": "daojishi daoshu countdown days until 倒计时 倒数日 纪念日 日子",