@heycys/gallery 0.1.1 → 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/colors.mjs

@@ -26,5 +26,6 @@ export const COLORS = [
 
 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: ["#2c2c2b", "#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"] };