@heycys/gallery 0.1.0 → 0.1.2

package/browser/shared/card-size.mjs

@@ -0,0 +1,59 @@
+// What a block's script is told of the custom page it stands on (notes/plans/custom-blocks-spec-2026-11-07.md,
+// sections 3, 5 and 6), as the kit's runtime reads it (runtime/kernel.js: context.place, context.size,
+// context.state): the page's markup, a card's id and the cells the board draws it at. The page's host
+// writes that markup and its board script lays the cards out by the rule below (the kit's board/
+// imports cellsOf from here, as DocBoard.cellsOf): one rule, so that a block lays out for the card as
+// drawn, never for the raw attributes. Pure, for the page.
+
+/** A custom page's root, around every card (page.html's main). */
+export const PAGE = "main.gallery-page";
+
+/** A board of a custom page, its cards its children; it says how many columns it has now (data-columns: 12, fewer where it is narrower). */
+export const BOARD = ".gallery-board";
+
+/** A card of a board, around one instance: the closest one to an instance, whatever its tag. */
+export const CARD = ".gallery-card";
+
+/** A card's id, unique in its page: what an instance's reading state goes by there. */
+export const CARD_ID = "data-card-id";
+
+/** The most cells a card is wide and high (the manifest's own range for a card, spec section 1). */
+export const MOST = Object.freeze({ w: 12, h: 24 });
+
+/** What a card whose cells are no number is drawn at. */
+const DEFAULT = Object.freeze({ x: 0, y: 0, w: 4, h: 2 });
+
+const whole = (value, fallback) => {
+  const number = Number.parseInt(value ?? "", 10);
+  return Number.isFinite(number) ? number : fallback;
+};
+
+/**
+ * A card's cells as the board draws them: its data-x, data-y, data-w and data-h, each a whole number
+ * (parsed as an integer: "8.5" is 8), held to 1 <= w <= 12, 0 <= x <= 12 - w, 0 <= y and
+ * 1 <= h <= 24, one that is no number the default (a 4 x 2 card at 0, 0).
+ * @param {{ dataset: Record<string, string | undefined> }} card
+ */
+export function cellsOf(card) {
+  const w = Math.min(MOST.w, Math.max(1, whole(card.dataset.w, DEFAULT.w)));
+  const h = Math.min(MOST.h, Math.max(1, whole(card.dataset.h, DEFAULT.h)));
+  const x = Math.min(MOST.w - w, Math.max(0, whole(card.dataset.x, DEFAULT.x)));
+  const y = Math.max(0, whole(card.dataset.y, DEFAULT.y));
+  return { x, y, w, h };
+}
+
+/**
+ * The cells a card is drawn at now, what context.size says: its cells (cellsOf), its width no more than
+ * the columns its board has now (data-columns, the board script's: 12, or fewer on a board narrower than
+ * twelve of its fixed cells, 4 at the least; 12 where it says none), its height the one the board
+ * script drew it at (--gallery-h: a card whose block lays out by its content is as high as that,
+ * whatever data-h says), else its own.
+ * @param {Element & { dataset: Record<string, string | undefined>, style?: CSSStyleDeclaration }} card
+ * @returns {{ w: number, h: number }}
+ */
+export function drawnCells(card) {
+  const { w, h } = cellsOf(card);
+  const columns = Number(/** @type {HTMLElement | null} */ (card.closest(BOARD))?.dataset.columns) || MOST.w;
+  const drawn = Number.parseInt(card.style?.getPropertyValue?.("--gallery-h") ?? "", 10);
+  return { w: Math.min(w, columns), h: Number.isFinite(drawn) ? Math.min(MOST.h, Math.max(1, drawn)) : h };
+}

package/browser/shared/code-folds.mjs

@@ -3,7 +3,11 @@
 // after a line that is folded (the kit's styles/code.css asks for it as `@fold-dots`, which
 // kit-build.mjs fills in; the editor's styles interpolate it). Its colors are the kit's tokens.
 
-/** A folding line's arrow (markup; it takes the color of its button). */
+/**
+ * A folding line's arrow (markup; it takes the color of its button), pointing down; folded, it is
+ * turned to point at what it folds: a code block's and its lines' -90° (right: they stand left of
+ * the code), a heading's 90° (left: it stands right of the words, page/fold/).
+ */
 export const FOLD_ARROW = '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3.25 4.5h5.5L6 8z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>';
 
 /** The three dots of a folded line's "…" (a CSS image). */

package/browser/shared/colors.mjs

@@ -1,5 +1,6 @@
 // The kit's nine colors (Notion's text and background colors, light and dark), written once: their
-// names, what the reader calls them and their values. The kit's stylesheets (render/kit/styles/
+// names, what the reader calls them and their values (a text color, a block's fill and the deeper
+// fill of words in a line). The kit's stylesheets (render/kit/styles/
 // base.css: .doc-text-* and .doc-highlight-*, tokens.css) are written by hand, as CSS is;
 // tests/unit/clipboard.mjs holds them to these values. Everything else that needs a value reads it
 // here: the editor's color pickers (names), pasted colors matched onto the nine (clipboard/import/
@@ -7,22 +8,24 @@
 
 /**
  * Each color in Notion's order: `name` (the classes are doc-text-<name> and doc-highlight-
- * <name>), `label` (what the reader calls it), and its text color and its background as [light,
- * dark].
+ * <name>), `label` (what the reader calls it), and its text color, its background as a block's
+ * (`fill`, base.css's --doc-fill) and its background on words in a line (`mark`, base.css's
+ * --doc-mark, deeper than the fill) as [light, dark].
  */
 export const COLORS = [
-  { name: "gray", label: "灰色", text: ["#6e6e73", "#a1a1a6"], fill: ["#f0efed", "#383836"] },
-  { name: "brown", label: "棕色", text: ["#9f765a", "#ba856f"], fill: ["#f5ede9", "#45362d"] },
-  { name: "orange", label: "橙色", text: ["#d27b2d", "#c77d48"], fill: ["#fbebde", "#53361f"] },
-  { name: "yellow", label: "黄色", text: ["#cb9434", "#ca9849"], fill: ["#f9f3dc", "#504425"] },
-  { name: "green", label: "绿色", text: ["#50946e", "#529e72"], fill: ["#e8f1ec", "#263d30"] },
-  { name: "blue", label: "蓝色", text: ["#387dc9", "#5e87c9"], fill: ["#e5f2fc", "#233850"] },
-  { name: "purple", label: "紫色", text: ["#9a6bb4", "#9d68d3"], fill: ["#f3ebf9", "#3c2d47"] },
-  { name: "pink", label: "粉色", text: ["#c14c8a", "#d15796"], fill: ["#fae9f1", "#4e2b3c"] },
-  { name: "red", label: "红色", text: ["#cf5148", "#df5452"], fill: ["#fce9e7", "#502c29"] },
+  { name: "gray", label: "灰色", text: ["#6e6e73", "#a1a1a6"], fill: ["#f0efed", "#383836"], mark: ["#e0dfdd", "#454542"] },
+  { name: "brown", label: "棕色", text: ["#9f765a", "#ba856f"], fill: ["#f5ede9", "#45362d"], mark: ["#efdbce", "#534034"] },
+  { name: "orange", label: "橙色", text: ["#d27b2d", "#c77d48"], fill: ["#fbebde", "#53361f"], mark: ["#fbddc5", "#654025"] },
+  { name: "yellow", label: "黄色", text: ["#cb9434", "#ca9849"], fill: ["#f9f3dc", "#504425"], mark: ["#f8eab6", "#614f26"] },
+  { name: "green", label: "绿色", text: ["#50946e", "#529e72"], fill: ["#e8f1ec", "#263d30"], mark: ["#cfead9", "#2c4b3a"] },
+  { name: "blue", label: "蓝色", text: ["#387dc9", "#5e87c9"], fill: ["#e5f2fc", "#233850"], mark: ["#cde5fb", "#294564"] },
+  { name: "purple", label: "紫色", text: ["#9a6bb4", "#9d68d3"], fill: ["#f3ebf9", "#3c2d47"], mark: ["#ebdaf6", "#4b3859"] },
+  { name: "pink", label: "粉色", text: ["#c14c8a", "#d15796"], fill: ["#fae9f1", "#4e2b3c"], mark: ["#f8d7e6", "#5d3548"] },
+  { name: "red", label: "红色", text: ["#cf5148", "#df5452"], fill: ["#fce9e7", "#502c29"], mark: ["#fed7d1", "#663632"] },
 ];
 
 export const COLOR_NAMES = COLORS.map(({ name }) => name);
 
-/** The page's own text color and background (tokens.css --doc-text, --doc-surface) as [light, dark]: what no color is. */
-export const BODY = { text: ["#1d1d1f", "#f3f3f3"], background: ["#ffffff", "#202020"] };
+/** The page's own text color and background (tokens.css --doc-text, --doc-surface) as [light, dark]: what no color is. The text's light is
+ *  the kit's default; on an Apple platform it is #262626 (tokens.css, data-doc-platform), a shade a pasted color never needs to tell apart. */
+export const BODY = { text: ["#2d2d2d", "#f3f3f3"], background: ["#ffffff", "#202020"] };