@heycys/gallery 0.1.1 → 0.1.2

package/kit/report.css

@@ -18,10 +18,10 @@
 
 :root {
   color-scheme: light dark;
-  /* The page: #2c2c2b on white in light (Notion's), its own pair in dark; the lines below are the text at a strength. */
+  /* The page: #2d2d2d on white in light, #262626 where the platform is Apple's (below), its own pair in dark; the lines below are the text at a strength. */
   --doc-bg: light-dark(#ffffff, #181818);
   --doc-surface: light-dark(#ffffff, #202020);
-  --doc-text: light-dark(#2c2c2b, #f3f3f3); /* the text: Notion's (and DingTalk's) #2c2c2b, the editor's own --ge-tx */
+  --doc-text: light-dark(#2d2d2d, #f3f3f3); /* the text: #2d2d2d, and #262626 on an Apple platform (the user's of 2026-11-08, below) */
   --doc-muted: light-dark(#6e6e73, #a1a1a6);
   --doc-border: light-dark(rgb(44 44 43 / 12%), rgb(243 243 243 / 13%));
   --doc-grid: light-dark(rgb(44 44 43 / 8%), rgb(243 243 243 / 8%));
@@ -175,6 +175,51 @@
   --doc-diff-removed-strip: light-dark(rgb(248 81 73 / 55%), rgb(248 81 73 / 55%));
   --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%));
+  --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;
+  --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-numeral-weight: 600;
+  --gallery-numeral-tracking: -.025em;
+  --gallery-unit-size: .4em;
+  --gallery-unit-gap: .3em;
+  --gallery-hero-size: 40px;
+  --gallery-figure-size: 28px;
 }
 
 :root[data-doc-theme="light"] { color-scheme: light; }
@@ -200,6 +245,10 @@
 :root[data-doc-size="small"][data-doc-spacing="loose"] { --doc-body-line-height: 26px; --doc-small-line-height: 18px; --doc-note-line-height: 20px; --doc-title-line-height: 35px; --doc-h1-line-height: 35px; --doc-h2-line-height: 31px; --doc-h3-line-height: 28px; --doc-h4-line-height: 24px; --doc-card-title-line-height: 25px; --doc-table-line-height: 20px; }
 :root[data-doc-size="large"][data-doc-spacing="compact"] { --doc-body-line-height: 27px; --doc-small-line-height: 20px; --doc-note-line-height: 21px; --doc-title-line-height: 39px; --doc-h1-line-height: 38px; --doc-h2-line-height: 33px; --doc-h3-line-height: 30px; --doc-h4-line-height: 25px; --doc-card-title-line-height: 26px; --doc-table-line-height: 22px; }
 :root[data-doc-size="large"][data-doc-spacing="loose"] { --doc-body-line-height: 32px; --doc-small-line-height: 22px; --doc-note-line-height: 24px; --doc-title-line-height: 43px; --doc-h1-line-height: 43px; --doc-h2-line-height: 37px; --doc-h3-line-height: 34px; --doc-h4-line-height: 29px; --doc-card-title-line-height: 29px; --doc-table-line-height: 24px; }
+
+/* The text on an Apple platform (macOS, iOS, iPadOS: runtime/index.js sets data-doc-platform when the page opens, so an exported file
+   judges on its reader's machine): a shade darker, as its type is drawn thinner there; base.css smooths it. Dark is the same. */
+:root[data-doc-platform="mac"] { --doc-text: light-dark(#262626, #f3f3f3); }
 /* 衬线体: the kit's own controls (the display menu, a code block's language, a diff's counts) keep the
    sans, --doc-font itself given it back on them, for what in them names --doc-font again (the display
    menu's card, controls.css) takes it there. 混合体: the title and every heading in the serif, of no
@@ -247,11 +296,14 @@ body {
   font-size: var(--doc-body-font-size);
   line-height: var(--doc-body-line-height);
 }
+/* On an Apple platform (runtime/index.js) the type is smoothed as the system's own apps' is; the workbench's frame has it, a document in its iframe does not inherit it. */
+:root[data-doc-platform="mac"] body { -webkit-font-smoothing: antialiased; }
 
 /* Hold the first paint until ui.js marks the page ready: by then the reader's theme and width
    are applied and the report's scripts have set up Sheets, charts, tables and formulas, so the
-   page never flashes an intermediate state. If that never happens, reveal it anyway. */
-:root:not([data-doc-ready]) body:has(> .doc-page) {
+   page never flashes an intermediate state. If that never happens, reveal it anyway. A custom page
+   (main.gallery-page) is held the same way, until its board has placed its cards (board/). */
+:root:not([data-doc-ready]) body:has(> :is(.doc-page, .gallery-page)) {
   visibility: hidden;
   animation: doc-reveal 0s linear 1.2s forwards;
 }
@@ -364,6 +416,55 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   .doc-kit-error { display: none; }
 }
 
+/* A block online that waits for the reader's consent (the kit's runtime, net.js): a line and a button
+   after it in a document, over its card on a custom page (the card is the board's, position: relative),
+   its fill the card's so that what the block drew underneath does not show through. Never in a file,
+   an export or on paper (data-doc-dev). */
+.doc-net-consent {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--doc-muted);
+  background: var(--doc-surface);
+  font: 13px/1.5 var(--doc-font);
+}
+/* 允许 is the card's one action: a button with no line, the pale blue fill of a primary (the editor's look.mjs
+   BUTTONS and the workbench's, from the document's own accent), a deeper one under the pointer and pressed. */
+.doc-net-consent-allow {
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 6px;
+  color: color-mix(in srgb, var(--doc-accent) 80%, var(--doc-text));
+  background: color-mix(in srgb, var(--doc-accent) 14%, transparent);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  transition: background-color 20ms ease-in;
+}
+.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); }
+.gallery-card > .doc-net-consent {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  margin: 0;
+  padding: 12px;
+  border-radius: inherit;
+  text-align: center;
+  background: var(--gallery-card-fill, var(--doc-surface));
+}
+@media print {
+  .doc-net-consent { display: none; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
 }
@@ -495,7 +596,9 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
 }
 
-.doc-display-button:hover,
+/* An icon button: the icon darkens under the pointer, the gray only while it is pressed or its menu is open. */
+.doc-display-button:hover { color: var(--doc-text); }
+
 .doc-display-button[aria-expanded="true"] {
   color: var(--doc-text);
   background: var(--doc-hover);
@@ -679,6 +782,122 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   .doc-display { display: none; }
 }
 
+/* A choice (runtime/choice.js): the menu card a <select> and DocKit.choose open instead of the browser's
+   popup, and the quiet look a <select> has where nobody gave it one. The card is the display menu's
+   (controls.css): radius 10, Notion's popup surface and shadow, rows of 28px that take one light fill
+   under the pointer or the keys, the chosen row checked at its right (no empty column before the words
+   on the others), as wide as its rows (the trigger's width at least, 320px at most, its words cut by an
+   ellipsis past that). It stands in the top layer (a popover, so no z-index of the page covers it);
+   z-index is for a browser without popovers. */
+
+.doc-choice {
+  position: fixed;
+  inset: auto;
+  left: 0;
+  top: 0;
+  z-index: 1100;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  margin: 0;
+  padding: 4px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  border: 0;
+  border-radius: 10px;
+  color: var(--doc-text);
+  background: light-dark(#ffffff, #252525);
+  box-shadow:
+    0 0 0 1px light-dark(rgb(42 28 0 / 7%), #383836),
+    0 20px 24px light-dark(rgb(25 25 25 / 5%), rgb(0 0 0 / 20%)),
+    0 5px 8px light-dark(rgb(25 25 25 / 2.7%), rgb(0 0 0 / 12%));
+  font: 14px/1.2 var(--doc-font);
+  user-select: none;
+  transition: opacity 120ms ease-out;
+}
+
+@starting-style {
+  .doc-choice { opacity: 0; }
+}
+
+.doc-choice-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  margin: 0 4px 1px;
+  padding: 0 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 20ms ease-in;
+}
+
+/* Under the pointer, or reached with the keys: one light fill, as every menu's rows. */
+.doc-choice-row.is-active { background: var(--doc-hover); }
+.doc-choice-row:active { background: var(--doc-press); }
+.doc-choice-row[aria-disabled="true"] { opacity: .45; cursor: default; }
+.doc-choice-row[aria-disabled="true"]:active { background: transparent; }
+
+.doc-choice-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The chosen row: a check at its right. */
+.doc-choice-check {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* An <optgroup>'s name: a small heading, no row. */
+.doc-choice-group {
+  padding: 6px 12px 2px;
+  color: var(--doc-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.doc-choice-group:not(:first-child) { margin-top: 4px; }
+
+/* A <select> nobody styled: no frame, a light fill that darkens under the pointer, the browser's own
+   arrow at its right (kept whatever the page sets as border or background, which a drawn arrow would
+   lose). A class's or a block's own rule outweighs this (it has no weight); a list box (multiple) is
+   the browser's. */
+:where(select:not([multiple], [size])) {
+  min-height: 28px;
+  padding: 0 4px 0 8px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--doc-text);
+  background-color: var(--doc-hover);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(select:not([multiple], [size]):hover) { background-color: var(--doc-press); }
+
+:where(select:not([multiple], [size]):focus-visible) {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 2px;
+}
+
+/* On paper a <select> is the words of its chosen option, no arrow, and the menu is never there. */
+@media print {
+  select { appearance: none; background-image: none; }
+  .doc-choice { display: none; }
+}
+
 /* 选项卡区块 (sheets.js), as Notion's tabs: a frame 16px round (1px, Notion's line) holding a row of
    pill tabs and the panel shown, 16px in; or, with .doc-sheet-shell--plain, no frame and no room
    inside it (the tabs and the panel at the flow's edge). A tab is a pill 32px high, its name 14px:
@@ -1387,7 +1606,7 @@ span.doc-link-mention-icon {
     :where(&:is(ol):has(> li[value]), & li > ol:has(> li[value])) > li::marker { color: var(--doc-list-marker); }
   }
 
-  & > :where(p, ul, ol, blockquote, h1, h2, h3, h4) :where(strong) { font-weight: 600; }
+  & > :where(p, ul, ol, blockquote, h1, h2, h3, h4) :where(strong) { font-weight: 700; }
 
   /* A quote and a divider (in the flow, or held by one of its list items: the same look, there the
      list's one gap above it and none below, as any block an item holds, none at its sides). */
@@ -1543,7 +1762,7 @@ ol.doc-flow > li {
   border-radius: 8px;
   background: var(--doc-surface);
   box-shadow: none;
-  font-weight: 600; /* a step written the short way: its own words its title */
+  font-weight: 700; /* a step written the short way: its own words its title, bold as a <strong> is (flow.css) */
   overflow-wrap: anywhere;
   break-inside: avoid;
 }
@@ -2076,7 +2295,6 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   border-radius: 6px;
   color: inherit;
   background: color-mix(in srgb, currentColor 8%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
   font: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -2416,18 +2634,19 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .doc-table-wrap[data-doc-whole] { max-height: var(--doc-table-height, none); }
 .doc-table-wrap:has(> .doc-scrollbars[data-y]) { overscroll-behavior-block: none; }
 
-/* The frame's scrollbars (tables.js): a layer stuck at the frame's top-left that takes no room,
-   with a rail along the right edge and one along the bottom for each axis that overflows
-   (data-y, data-x), each thumb 3px in from the frame's edge. tables.js sets each rail's place
-   (the part of the edge that scrolls: below the header, between the rounded corners) and its
-   track, thumb size and thumb offset (--doc-scrollbar-*). They show while the pointer is
-   over the frame or it scrolls. */
+/* The frame's scrollbars (tables.js): a layer stuck at the frame's top-left that takes no room (no
+   height; as wide as the frame's inside, which it never makes wider, so that the frame's line is
+   as wide as the frame in the same layout as the frame: below), with a rail along the right edge
+   and one along the bottom for each axis that overflows (data-y, data-x), each thumb 3px in from
+   the frame's edge. tables.js sets each rail's place (the part of the edge that scrolls: below the
+   header, between the rounded corners) and its track, thumb size and thumb offset
+   (--doc-scrollbar-*). They show while the pointer is over the frame or it scrolls. */
 .doc-scrollbars {
   position: sticky;
   top: 0;
   left: 0;
   z-index: 6;
-  width: 0;
+  width: 100%;
   height: 0;
 }
 .doc-scrollbar {
@@ -2465,11 +2684,14 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 }
 .doc-scrollbar:is(:hover, [data-drag]) > .doc-scrollbar-thumb { background: var(--doc-scrollbar-thumb-active); }
 /* The frame's line above everything in the frame (a header row or column that sticks over the
-   outline too): as big as the frame (tables.js), on the layer stuck at its top-left. */
+   outline too): as big as the frame, on the layer stuck at its top-left; as wide as the layer, so
+   as the frame whenever the frame is laid out (a width read and written later by a script could
+   disagree with it for a frame), as tall as tables.js reads the frame. */
 .doc-scrollbars-frame {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   box-sizing: border-box;
   border: 1px solid var(--doc-table-frame);
   border-radius: var(--doc-table-radius);
@@ -2560,6 +2782,12 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .doc-table :is(td, th) > :is(ul, ol):last-child { margin-bottom: 0; }
 .doc-table :is(td, th) > :is(ul, ol) > li + li { margin-top: 2px; }
 
+/* A picture in a cell (单元格里的图片, an <img> amid its words): as wide as its width says (pixels; the
+   page editor's drag of its edge writes it), with none at most 240px, never past its cell; its height
+   by its own ratio, its middle on the line's, so a row grows with it. */
+.doc-table :is(td, th) img { max-width: 100%; height: auto; vertical-align: middle; }
+.doc-table :is(td, th) img:not([width]) { max-width: min(100%, 240px); }
+
 .doc-table--auto { table-layout: fixed; max-width: none; }
 .doc-table [data-column-kind="compact"] { white-space: nowrap; word-break: normal; }
 .doc-table [data-column-kind="narrative"] { overflow-wrap: break-word; }
@@ -2630,7 +2858,7 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
    (base.css), a fill over the whole cell (base.css's: a cell is square, and one that sticks wears it too, above), bold words (the words
    typed in it later too), and an alignment over the kit's own (a numeric column's centre), a vertical one (the kit's: top). A header
    row's look is these: .doc-highlight-gray and .doc-bold (a header column has none of its own). */
-.doc-table :is(td, th).doc-bold { font-weight: 600; }
+.doc-table :is(td, th).doc-bold { font-weight: 700; }
 .doc-table :is(td, th).doc-align-left { text-align: left; }
 .doc-table :is(td, th).doc-align-center { text-align: center; }
 .doc-table :is(td, th).doc-align-right { text-align: right; }
@@ -2839,6 +3067,16 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 [data-doc-component] {
   margin: var(--doc-block-gap) 0;
 }
+/* [hidden] hides what is in an instance whatever display a block's style gave it: a control a block
+   hides where nothing is written (an export: form.hidden = !context.canEdit()) stays hidden though its
+   own rule says display: flex, which an author's rule on the class would otherwise win over the
+   browser's [hidden] { display: none }. What a slot holds is the document's blocks, which keep their
+   own rules (a Sheet panel, an empty figure the editor shows), so the rule stops at a slot. */
+@scope ([data-doc-component]) to ([data-doc-slot]) {
+  :scope [hidden] {
+    display: none !important;
+  }
+}
 /* A slot holds the document's blocks: they read as in any flow (flow.css), the first and the last flush with it. */
 [data-doc-slot] > :where(:first-child) {
   margin-top: 0;