@stealthscale/plugin-theming 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+//#region src/manifest.d.ts
+/**
+ * Maps the theming plugin's contract to its code: one page module per route, each behind a lazy
+ * importer.
+ */
+/**
+ * The theming plugin's manifest, which a product installs.
+ */
+export declare const manifest: import("@stealthscale/sdk-core").PluginManifest<import("@stealthscale/sdk-core").Contract<"theming", {
+  readonly menus: {
+    basics: import("@stealthscale/sdk-core").MenuMarker;
+    building: import("@stealthscale/sdk-core").MenuMarker;
+    color: import("@stealthscale/sdk-core").MenuMarker;
+    motion: import("@stealthscale/sdk-core").MenuMarker;
+    shape: import("@stealthscale/sdk-core").MenuMarker;
+    space: import("@stealthscale/sdk-core").MenuMarker;
+    type: import("@stealthscale/sdk-core").MenuMarker;
+  };
+  readonly routes: {
+    accessibility: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    breakpoints: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    code: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    conditions: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    corners: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    cursors: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    density: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    depth: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    extending: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    faces: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    gate: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    layers: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    looks: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    motion: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    overview: NoInfer<import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>>;
+    palettes: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    recipes: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    series: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    sizes: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    spacing: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    surfaces: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    textStyles: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    themes: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    tokens: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+    writing: import("@stealthscale/sdk-core").RouteMarker<Readonly<Record<never, string>>, unknown>;
+  };
+  readonly version: string;
+}>>;
+//#endregion

package/dist/index.js

@@ -0,0 +1,39 @@
+import { themingContract } from "@stealthscale/plugin-theming-contract";
+import { definePlugin } from "@stealthscale/sdk-core";
+//#region src/manifest.ts
+/**
+* Maps the theming plugin's contract to its code: one page module per route, each behind a lazy
+* importer.
+*/
+/**
+* The theming plugin's manifest, which a product installs.
+*/
+const manifest = definePlugin(themingContract, { routes: {
+	accessibility: () => import("./accessibility-Dg5Dh35o.js"),
+	breakpoints: () => import("./breakpoints-CJjhy79u.js"),
+	code: () => import("./code-DcoH6hCX.js"),
+	conditions: () => import("./conditions-CjjQwqro.js"),
+	corners: () => import("./corners-CH5jyCks.js"),
+	cursors: () => import("./cursors-hl00ix41.js"),
+	density: () => import("./density-DEW_j0I5.js"),
+	depth: () => import("./depth-DCn3mAAJ.js"),
+	extending: () => import("./extending-CY7ry7Y4.js"),
+	faces: () => import("./faces-D76c_Ryh.js"),
+	gate: () => import("./gate-CoX2Yr9x.js"),
+	layers: () => import("./layers-BxdWdfPg.js"),
+	looks: () => import("./looks-BrROho5Y.js"),
+	motion: () => import("./motion-DRbsuZZo.js"),
+	overview: () => import("./overview-BbE82N2c.js"),
+	palettes: () => import("./palettes-CZo2HrNT.js"),
+	recipes: () => import("./recipes-C88xVIGB.js"),
+	series: () => import("./series-AvSZjk2b.js"),
+	sizes: () => import("./sizes-B7LgvyBS.js"),
+	spacing: () => import("./spacing-DMyyV6vX.js"),
+	surfaces: () => import("./surfaces-Db0HjMwB.js"),
+	textStyles: () => import("./text-styles-BZnXaigP.js"),
+	themes: () => import("./themes-yClyRA9e.js"),
+	tokens: () => import("./tokens-7Pm-eLiZ.js"),
+	writing: () => import("./writing-b05oSPB2.js")
+} });
+//#endregion
+export { manifest };

package/dist/layers-BxdWdfPg.js

@@ -0,0 +1,53 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as tokenRows } from "./rows-Dv8c7jye.js";
+import { t as TokenTable } from "./token-table-yrZh5kLy.js";
+import { LAYERS } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/layers.tsx
+/**
+* Lists the layers, lowest first.
+*/
+const ROWS = tokenRows("zIndex", LAYERS);
+/**
+* Renders the layers page.
+*/
+function LayersPage() {
+	const $ = c(7);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("layers.sections.stack.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t0,
+				rows: ROWS
+			}),
+			id: "stack"
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { id: "using" };
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(DocPage, {
+			page: "layers",
+			sections: [t1, t2]
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+export { LayersPage };

package/dist/looks-BrROho5Y.js

@@ -0,0 +1,107 @@
+import { s as keyOf } from "./theming-text.recipe-Dvcza4j1.js";
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as ThemingLook } from "./parts-BVmqVMgo.js";
+import { LAYER_STYLES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { Code } from "@stealthscale/component-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/look-grid.tsx
+/**
+* The layer style of an inactive control.
+*
+* @remarks
+*   Its sample is marked disabled, because the look fades the words below the contrast minimum and
+*   WCAG exempts the text of an inactive component from that minimum.
+*/
+const INACTIVE = "disabled";
+/**
+* Renders a box per layer style, in the primary palette, under the style's name.
+*
+* @remarks
+*   The name is above the box and not inside it, because a blur or a mask also changes the words
+*   inside the box. A look that responds to the pointer, such as a fill's hover or the ripple's
+*   press, responds here too, so a reader can try each one.
+*/
+function LookGrid(t0) {
+	const $ = c(7);
+	const { names } = t0;
+	const { t } = useWords();
+	let t1;
+	if ($[0] !== names || $[1] !== t) {
+		let t2;
+		if ($[3] !== t) {
+			t2 = (name) => /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Code, { children: name }), /* @__PURE__ */ jsx(ThemingLook, {
+					"aria-disabled": name === INACTIVE ? true : void 0,
+					look: keyOf(name),
+					children: t("blocks.specimen")
+				})]
+			}, name);
+			$[3] = t;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = names.map(t2);
+		$[0] = names;
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fill-xs",
+			gap: "lg",
+			children: t1
+		});
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+//#endregion
+//#region src/pages/looks.tsx
+/**
+* The page's sections: a grid of samples per group.
+*/
+const SECTIONS = [
+	["fills", ["fill."]],
+	["flats", ["flat."]],
+	["outlines", ["outline."]],
+	["fields", ["field."]],
+	["indicators", ["indicator."]],
+	["states", [
+		"disabled",
+		"glass",
+		"ripple"
+	]],
+	["effects", [
+		"glow.",
+		"blur.",
+		"border.",
+		"dim.",
+		"text.",
+		"mask."
+	]],
+	["backdrops", ["backdrop."]]
+].map(([id, prefixes]) => ({
+	block: /* @__PURE__ */ jsx(LookGrid, { names: LAYER_STYLES.filter((name) => prefixes.some((prefix) => name.startsWith(prefix))) }),
+	id
+}));
+/**
+* Renders the looks page.
+*/
+function LooksPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "looks",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { LooksPage };

package/dist/measure-uwF7Fmpy.js

@@ -0,0 +1,137 @@
+import { contrast, linear } from "@stealthscale/theme/contract";
+//#region src/reading/format.ts
+/**
+* Turns readings into what a page writes: a color as hex, the contrast ratio of two colors, and a
+* length in pixels.
+*/
+/**
+* Encodes a linear channel with the sRGB transfer curve, clipped to the display's range, and writes
+* it as two hex digits.
+*/
+function byteOf(channel) {
+	const clipped = Math.min(Math.max(channel, 0), 1);
+	const encoded = clipped <= .0031308 ? clipped * 12.92 : 1.055 * clipped ** (1 / 2.4) - .055;
+	return Math.round(encoded * 255).toString(16).padStart(2, "0");
+}
+/**
+* Returns a color as the six hex digits a display shows for it.
+*
+* @remarks
+*   A color outside sRGB is clipped, as a display clips it. A color with transparency has no hex of
+*   its own, because what shows depends on what is under it.
+* @param color - The color as a browser serialises it: OKLCH, hex or `rgb()`.
+* @returns The hex color, or undefined where the color cannot be read or is translucent.
+*/
+function hexOf(color) {
+	const read = linear(color);
+	return read === void 0 ? void 0 : `#${byteOf(read.red)}${byteOf(read.green)}${byteOf(read.blue)}`;
+}
+/**
+* Returns the color a reading resolved to.
+*
+* @remarks
+*   A browser resolves the color, and a document without a color engine leaves it empty, where the
+*   substituted value is the color as the stylesheet writes it.
+* @param reading - A token's reading, or undefined before the token is read.
+* @returns The color, or undefined where the stylesheet declares no such token.
+*/
+function colorOf(reading) {
+	if (reading === void 0 || reading.value === "") return void 0;
+	return reading.color === "" ? reading.value : reading.color;
+}
+/**
+* Returns the contrast ratio of two colors.
+*
+* @param front - The color in front, or undefined where it was not read.
+* @param back - The color behind, or undefined where it was not read.
+* @returns The ratio, from 1 to 21, or undefined where either color cannot be measured.
+*/
+function ratioOf(front, back) {
+	if (front === void 0 || back === void 0) return void 0;
+	const ratio = contrast(front, back);
+	return Number.isNaN(ratio) ? void 0 : ratio;
+}
+/**
+* Returns a value with the zeros after each number's last significant digit dropped, and a zero
+* before a number that starts at its decimal point: `0.5000rem` as `0.5rem`, `1.0000rem` as `1rem`
+* and `.125rem` as `0.125rem`.
+*
+* @remarks
+*   A built stylesheet writes a number below one without its leading zero, and a development
+*   stylesheet writes it with four decimals, so both read alike on a page.
+* @param value - A value as a stylesheet writes it.
+*/
+function tidyNumbers(value) {
+	return value.replaceAll(/(\.\d*?)0+(?!\d)/gu, "$1").replaceAll(/\.(?!\d)/gu, "").replaceAll(/(?<before>^|[^\d.\\])\.(?=\d)/gu, "$<before>0.");
+}
+/**
+* Returns a computed value with every length in pixels rounded to two decimals: `83.2256px` as
+* `83.23px` and `-1.66451px` as `-1.66px`.
+*
+* @remarks
+*   A browser computes a length from a size in rem through the density and the type scale, so a
+*   length in pixels can have four decimals or more, which no reader compares.
+* @param value - A value as a browser computes it, such as `16px` or `normal`.
+*/
+function roundedPixels(value) {
+	return value.replaceAll(/-?\d+\.\d+(?=px)/gu, (number) => String(Number(Number(number).toFixed(2))));
+}
+/**
+* Returns the pixels a reading's length resolved to.
+*
+* @param reading - A token's reading, or undefined before the token is read.
+* @returns The length in pixels, or undefined where the token is not a length a browser computed.
+*/
+function pixelsOf(reading) {
+	return reading?.length.endsWith("px") === true ? roundedPixels(reading.length) : void 0;
+}
+/**
+* Returns the multiplier a density reading resolved to.
+*
+* @param reading - The reading of the density property, or undefined before it is read.
+* @returns The multiplier, or `1` where nothing sets the property.
+*/
+function multiplierOf(reading) {
+	return reading === void 0 || reading.value === "" ? "1" : reading.value;
+}
+//#endregion
+//#region src/reading/measure.ts
+/**
+* Fixes the custom property the probe states each token under.
+*/
+const PROBE = "--theming-probe";
+/**
+* Collapses each run of whitespace to one space and trims the ends.
+*/
+function tidied(value) {
+	return value.replaceAll(/\s+/gu, " ").trim();
+}
+/**
+* Reads every token inside an element.
+*
+* @param box - The element the tokens resolve in.
+* @param variables - The custom properties to read, such as `--colors-bg`.
+* @returns Each custom property's reading, keyed by the property.
+*/
+function measured(box, variables) {
+	const probe = box.ownerDocument.createElement("span");
+	const readings = /* @__PURE__ */ new Map();
+	probe.hidden = true;
+	box.append(probe);
+	for (const variable of variables) {
+		const reference = `var(${variable})`;
+		probe.style.setProperty(PROBE, reference);
+		probe.style.setProperty("color", reference);
+		probe.style.setProperty("inline-size", reference);
+		const computed = getComputedStyle(probe);
+		readings.set(variable, {
+			color: tidied(computed.color),
+			length: tidied(computed.inlineSize),
+			value: tidied(computed.getPropertyValue(PROBE))
+		});
+	}
+	probe.remove();
+	return readings;
+}
+//#endregion
+export { pixelsOf as a, tidyNumbers as c, multiplierOf as i, colorOf as n, ratioOf as o, hexOf as r, roundedPixels as s, measured as t };

package/dist/mode-colors-Cf_ZPo3g.js

@@ -0,0 +1,260 @@
+import { n as colorOf, o as ratioOf, r as hexOf } from "./measure-uwF7Fmpy.js";
+import { n as useWords } from "./doc-page-BQXdbP_h.js";
+import { t as useReadings } from "./use-readings-D56mNtEc.js";
+import { t as ModePanels } from "./mode-panels-Bmh0ec0U.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Stack } from "@stealthscale/component-layout";
+import { Table } from "@stealthscale/component-collections";
+import { ColorSwatch, Format } from "@stealthscale/component-data";
+import { Code } from "@stealthscale/component-typography";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/color-table.tsx
+/**
+* Renders a table of colors in one mode: each color's swatch and name, the hex a display shows for
+* it, and its contrast ratio against the color it is read on.
+*/
+/**
+* The page, which a color is read on where its row names nothing else.
+*/
+const PAGE = {
+	name: "bg",
+	variable: "--colors-bg"
+};
+/**
+* The digits a ratio is written with.
+*/
+const DIGITS = {
+	maximumFractionDigits: 2,
+	minimumFractionDigits: 2
+};
+/**
+* Returns the words a value cell writes: nothing before the color is read, its hex, the color as
+* the browser writes it where it has no hex, or the word for a color the stylesheet does not
+* declare.
+*/
+function written(reading, missing) {
+	if (reading === void 0) return "";
+	const color = colorOf(reading);
+	return color === void 0 ? missing : hexOf(color) ?? color;
+}
+/**
+* Returns a row's name cell: the swatch, painted in the mode the table is read in, and the name.
+*/
+function named({ name, variable }) {
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		gap: "sm",
+		children: [/* @__PURE__ */ jsx(ColorSwatch, {
+			size: "sm",
+			value: `var(${variable})`
+		}), /* @__PURE__ */ jsx(Code, {
+			size: "sm",
+			children: name
+		})]
+	});
+}
+/**
+* Returns a row's cell of the color behind it.
+*/
+function behind({ against = PAGE }) {
+	return /* @__PURE__ */ jsx(Code, {
+		size: "sm",
+		children: against.name
+	});
+}
+/**
+* Returns a row's ratio cell: the ratio with two digits, or nothing where either color cannot be
+* measured.
+*/
+function measuredRatio({ against = PAGE, variable }, readings) {
+	const ratio = ratioOf(colorOf(readings.get(variable)), colorOf(readings.get(against.variable)));
+	return ratio === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Format.Number, {
+		options: DIGITS,
+		value: ratio
+	}), ":1"] });
+}
+/**
+* Renders the table, reading every color and every color behind it inside the table's viewport.
+*
+* @remarks
+*   A table inside a mode panel reads that panel's mode, and its swatches paint in it. The ratio is
+*   WCAG's, measured on the colors the display shows. The table is set at the `sm` size, so its
+*   four columns fit one panel beside the contents rail in a window 1100px wide or more.
+*/
+function ColorTable(t0) {
+	const $ = c(40);
+	const { caption, rows } = t0;
+	const { t } = useWords();
+	const [box, setBox] = useState(null);
+	let t1;
+	if ($[0] !== rows) {
+		t1 = new Set(rows.flatMap(_temp));
+		$[0] = rows;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = [...t1];
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const readings = useReadings(box, t2);
+	let t3;
+	if ($[4] !== caption || $[5] !== t) {
+		t3 = t("blocks.tableOf", { name: caption });
+		$[4] = caption;
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("blocks.name");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			cell: named,
+			key: "name",
+			label: t4,
+			rowHeader: true
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== readings || $[12] !== t) {
+		t6 = (t7) => {
+			const { variable } = t7;
+			return written(readings.get(variable), t("blocks.missing"));
+		};
+		$[11] = readings;
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("blocks.value");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t6 || $[17] !== t7) {
+		t8 = {
+			cell: t6,
+			key: "value",
+			label: t7
+		};
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = t("blocks.against");
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t9) {
+		t10 = {
+			cell: behind,
+			key: "against",
+			label: t9
+		};
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== readings) {
+		t11 = (row_0) => measuredRatio(row_0, readings);
+		$[23] = readings;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t) {
+		t12 = t("blocks.ratio");
+		$[25] = t;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t11 || $[28] !== t12) {
+		t13 = {
+			cell: t11,
+			key: "ratio",
+			label: t12,
+			numeric: true
+		};
+		$[27] = t11;
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t10 || $[31] !== t13 || $[32] !== t5 || $[33] !== t8) {
+		t14 = [
+			t5,
+			t8,
+			t10,
+			t13
+		];
+		$[30] = t10;
+		$[31] = t13;
+		$[32] = t5;
+		$[33] = t8;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== caption || $[36] !== rows || $[37] !== t14 || $[38] !== t3) {
+		t15 = /* @__PURE__ */ jsx(Table.Simple, {
+			"aria-label": t3,
+			caption,
+			columns: t14,
+			rows,
+			rowToKey: _temp2,
+			size: "sm",
+			viewportRef: setBox
+		});
+		$[35] = caption;
+		$[36] = rows;
+		$[37] = t14;
+		$[38] = t3;
+		$[39] = t15;
+	} else t15 = $[39];
+	return t15;
+}
+function _temp2(t0) {
+	const { variable: variable_0 } = t0;
+	return variable_0;
+}
+function _temp(row) {
+	return [row.variable, (row.against ?? PAGE).variable];
+}
+//#endregion
+//#region src/blocks/mode-colors.tsx
+/**
+* Renders a color table in each mode's panel.
+*/
+function ModeColors(t0) {
+	const $ = c(4);
+	const { name, rows } = t0;
+	const { t } = useWords();
+	let t1;
+	if ($[0] !== name || $[1] !== rows || $[2] !== t) {
+		t1 = /* @__PURE__ */ jsx(ModePanels, { children: (mode) => /* @__PURE__ */ jsx(ColorTable, {
+			caption: t("blocks.inMode", {
+				mode: t(`blocks.${mode}Mode`),
+				name
+			}),
+			rows
+		}) });
+		$[0] = name;
+		$[1] = rows;
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+//#endregion
+export { ModeColors as t };

package/dist/mode-panels-Bmh0ec0U.js

@@ -0,0 +1,54 @@
+import { n as useWords } from "./doc-page-BQXdbP_h.js";
+import { n as attributesOf, t as MODES } from "./attributes-vx1W0PiK.js";
+import { t as useWornTheme } from "./worn-D4HEJsJ2.js";
+import { r as ThemingPanel } from "./parts-BVmqVMgo.js";
+import { c } from "react/compiler-runtime";
+import { Grid } from "@stealthscale/component-layout";
+import { Heading } from "@stealthscale/component-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/reading/mode-panels.tsx
+/**
+* Renders a panel per mode, each with the theme and the mode attributes, its mode's name as a
+* heading, and the block.
+*
+* @remarks
+*   The panels are keyed by the theme, so a block inside mounts again and reads its tokens again
+*   when a person wears another theme. Each panel is at least `sizes.xl` wide, the room a table of
+*   colors needs, so the panels stack unless the page has room for two at that width.
+* @returns The grid of the two panels.
+*/
+function ModePanels(t0) {
+	const $ = c(7);
+	const { children } = t0;
+	const worn = useWornTheme();
+	const { t } = useWords();
+	let t1;
+	if ($[0] !== children || $[1] !== t || $[2] !== worn) {
+		t1 = MODES.map((mode) => /* @__PURE__ */ jsxs(ThemingPanel, {
+			...attributesOf(worn, mode),
+			children: [/* @__PURE__ */ jsx(Heading, {
+				as: "h3",
+				size: "xs",
+				children: t(`blocks.${mode}`)
+			}), children(mode)]
+		}, mode));
+		$[0] = children;
+		$[1] = t;
+		$[2] = worn;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1 || $[5] !== worn) {
+		t2 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fit-xl",
+			gap: "md",
+			children: t1
+		}, worn);
+		$[4] = t1;
+		$[5] = worn;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+//#endregion
+export { ModePanels as t };