@stealthscale/plugin-theming 0.0.0-stage → 0.2.1

package/dist/code-DcoH6hCX.js

@@ -0,0 +1,69 @@
+import { n as variableOf } from "./variables-ymFs3Bzn.js";
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as ModeColors } from "./mode-colors-Cf_ZPo3g.js";
+import { CODE } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/code.tsx
+/**
+* Returns the code inks as rows measured against one surface.
+*/
+function rowsOn(surface) {
+	return CODE.map((ink) => ({
+		against: {
+			name: surface,
+			variable: variableOf("colors", surface)
+		},
+		name: `code.${ink}`,
+		variable: variableOf("colors", `code.${ink}`)
+	}));
+}
+/**
+* Renders the code page: the inks on each surface, each list named by its surface, then a passage
+* set in them.
+*/
+function CodePage() {
+	const $ = c(5);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = [{
+			id: "page",
+			surface: "bg"
+		}, {
+			id: "panel",
+			surface: "bg.panel"
+		}].map((t1) => {
+			const { id, surface } = t1;
+			return {
+				block: /* @__PURE__ */ jsx(ModeColors, {
+					name: t("blocks.onSurface", {
+						name: "code",
+						surface
+					}),
+					rows: rowsOn(surface)
+				}),
+				id
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { id: "sample" };
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsx(DocPage, {
+			page: "code",
+			sections: [...t0, t1]
+		});
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+//#endregion
+export { CodePage };

package/dist/conditions-CjjQwqro.js

@@ -0,0 +1,338 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { CONDITIONS } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { Table } from "@stealthscale/component-collections";
+import { Code } from "@stealthscale/component-typography";
+import { jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "@stealthscale/hooks";
+//#region src/blocks/condition-table.tsx
+/**
+* Returns a cell that writes a condition as a recipe writes it.
+*/
+function named(condition) {
+	return /* @__PURE__ */ jsx(Code, { children: `_${condition}` });
+}
+/**
+* Renders a row per condition, in the vocabulary's order, with the sentence the plugin's words
+* write for it.
+*/
+function ConditionTable() {
+	const $ = c(23);
+	const { t } = useWords();
+	let T0;
+	let caption;
+	let t0;
+	if ($[0] !== t) {
+		caption = t("conditions.sections.conditions.title");
+		T0 = Table.Simple;
+		t0 = t("blocks.tableOf", { name: caption });
+		$[0] = t;
+		$[1] = T0;
+		$[2] = caption;
+		$[3] = t0;
+	} else {
+		T0 = $[1];
+		caption = $[2];
+		t0 = $[3];
+	}
+	let t1;
+	if ($[4] !== t) {
+		t1 = t("blocks.condition");
+		$[4] = t;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== t1) {
+		t2 = {
+			cell: _temp$1,
+			key: "condition",
+			label: t1,
+			rowHeader: true
+		};
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t) {
+		t3 = t("blocks.meaning");
+		$[8] = t;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t3) {
+		t4 = {
+			key: "meaning",
+			label: t3
+		};
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t2 || $[13] !== t4) {
+		t5 = [t2, t4];
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t) {
+		t6 = CONDITIONS.map((condition_0) => ({
+			condition: condition_0,
+			meaning: t(`conditions.meanings.${condition_0}`, { defaultValue: "" })
+		}));
+		$[15] = t;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== T0 || $[18] !== caption || $[19] !== t0 || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			"aria-label": t0,
+			caption,
+			columns: t5,
+			rows: t6,
+			rowToKey: _temp2$1
+		});
+		$[17] = T0;
+		$[18] = caption;
+		$[19] = t0;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
+}
+function _temp2$1(t0) {
+	const { condition: condition_1 } = t0;
+	return condition_1;
+}
+function _temp$1(t0) {
+	const { condition } = t0;
+	return named(condition);
+}
+//#endregion
+//#region src/blocks/media-states.tsx
+/**
+* Lists the conditions a browser decides from the reader's device and settings.
+*/
+const DECIDED = [
+	{
+		condition: "_mouse",
+		query: "(pointer: fine)"
+	},
+	{
+		condition: "_touch",
+		query: "(pointer: coarse)"
+	},
+	{
+		condition: "_osDark",
+		query: "(prefers-color-scheme: dark)"
+	},
+	{
+		condition: "_motionReduce",
+		query: "(prefers-reduced-motion: reduce)"
+	},
+	{
+		condition: "_reducedTransparency",
+		query: "(prefers-reduced-transparency: reduce)"
+	},
+	{
+		condition: "_highContrast",
+		query: "(forced-colors: active)"
+	}
+];
+/**
+* Returns a cell that writes a name as code.
+*/
+function coded(name) {
+	return /* @__PURE__ */ jsx(Code, {
+		size: "sm",
+		children: name
+	});
+}
+/**
+* Renders a row per condition, re-read whenever one of the queries changes.
+*
+* @remarks
+*   The queries are read on the first render, so the page shows the reader's state at once. The
+*   table is set at the `sm` size, so the longest media query fits beside the contents rail in a
+*   window 1280px wide.
+*/
+function MediaStates() {
+	const $ = c(32);
+	const { t } = useWords();
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = DECIDED.map(_temp);
+		t1 = { ssr: false };
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	const matches = useMediaQuery(t0, t1);
+	let t2;
+	if ($[2] !== matches) {
+		t2 = DECIDED.map((t3, at) => {
+			const { condition, query: query_0 } = t3;
+			return {
+				condition,
+				matches: matches[at] === true,
+				query: query_0
+			};
+		});
+		$[2] = matches;
+		$[3] = t2;
+	} else t2 = $[3];
+	const rows = t2;
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("blocks.tableOf", { name: t("blocks.decided") });
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("blocks.decided");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("blocks.condition");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5) {
+		t6 = {
+			cell: _temp2,
+			key: "condition",
+			label: t5,
+			rowHeader: true
+		};
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("blocks.query");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = {
+			cell: _temp3,
+			key: "query",
+			label: t7
+		};
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = (t10) => {
+			const { matches: now } = t10;
+			return now ? t("blocks.yes") : t("blocks.no");
+		};
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("blocks.matches");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10 || $[21] !== t9) {
+		t11 = {
+			cell: t9,
+			key: "matches",
+			label: t10
+		};
+		$[20] = t10;
+		$[21] = t9;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t6 || $[25] !== t8) {
+		t12 = [
+			t6,
+			t8,
+			t11
+		];
+		$[23] = t11;
+		$[24] = t6;
+		$[25] = t8;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== rows || $[28] !== t12 || $[29] !== t3 || $[30] !== t4) {
+		t13 = /* @__PURE__ */ jsx(Table.Simple, {
+			"aria-label": t3,
+			caption: t4,
+			columns: t12,
+			rows,
+			rowToKey: _temp4,
+			size: "sm"
+		});
+		$[27] = rows;
+		$[28] = t12;
+		$[29] = t3;
+		$[30] = t4;
+		$[31] = t13;
+	} else t13 = $[31];
+	return t13;
+}
+function _temp4(t0) {
+	const { condition: condition_1 } = t0;
+	return condition_1;
+}
+function _temp3(t0) {
+	const { query: query_1 } = t0;
+	return coded(query_1);
+}
+function _temp2(t0) {
+	const { condition: condition_0 } = t0;
+	return coded(condition_0);
+}
+function _temp(t0) {
+	const { query } = t0;
+	return query;
+}
+//#endregion
+//#region src/pages/conditions.tsx
+/**
+* The page's sections, in reading order.
+*/
+const SECTIONS = [
+	{
+		block: /* @__PURE__ */ jsx(ConditionTable, {}),
+		id: "conditions"
+	},
+	{
+		block: /* @__PURE__ */ jsx(MediaStates, {}),
+		id: "decided"
+	},
+	{ id: "writing" }
+];
+/**
+* Renders the conditions page.
+*/
+function ConditionsPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "conditions",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { ConditionsPage };

package/dist/corners-CH5jyCks.js

@@ -0,0 +1,92 @@
+import { n as variableOf } from "./variables-ymFs3Bzn.js";
+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 { t as sampler } from "./sampler-Ue67PX2n.js";
+import { BORDER_WIDTHS, CORNERS, RADII, STROKES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/corners.tsx
+/**
+* Renders a tile with a corner.
+*/
+const TILE = sampler("tile", "radius");
+/**
+* Renders a line as thick as a stroke.
+*/
+const LINE = sampler("line", "stroke");
+/**
+* Lists the page's tables of tokens, in reading order.
+*/
+const TABLES = [
+	{
+		id: "corners",
+		rows: tokenRows("radii", CORNERS, TILE)
+	},
+	{
+		id: "radii",
+		rows: tokenRows("radii", RADII, TILE)
+	},
+	{
+		id: "strokes",
+		rows: tokenRows("borderWidths", STROKES, LINE)
+	},
+	{
+		id: "widths",
+		rows: tokenRows("borderWidths", BORDER_WIDTHS, LINE)
+	}
+];
+/**
+* Lists the two tokens of the focus ring: its width and the room it leaves round a control.
+*/
+const RING = [{
+	name: "borderWidths.ring",
+	variable: variableOf("borderWidths", "ring")
+}, {
+	name: "spacing.ring",
+	variable: variableOf("spacing", "ring")
+}];
+/**
+* Renders the corners page.
+*/
+function CornersPage() {
+	const $ = c(4);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		const t2 = TABLES.map((t1) => {
+			const { id, rows } = t1;
+			return {
+				block: /* @__PURE__ */ jsx(TokenTable, {
+					caption: t(`corners.sections.${id}.title`, { defaultValue: id }),
+					lengths: true,
+					rows
+				}),
+				id
+			};
+		});
+		const t3 = t("corners.sections.ring.title");
+		let t4;
+		if ($[2] !== t3) {
+			t4 = {
+				block: /* @__PURE__ */ jsx(TokenTable, {
+					caption: t3,
+					lengths: true,
+					rows: RING
+				}),
+				id: "ring"
+			};
+			$[2] = t3;
+			$[3] = t4;
+		} else t4 = $[3];
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "corners",
+			sections: [...t2, t4]
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+//#endregion
+export { CornersPage };

package/dist/cursors-hl00ix41.js

@@ -0,0 +1,54 @@
+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 { t as sampler } from "./sampler-Ue67PX2n.js";
+import { CURSORS } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/cursors.tsx
+/**
+* Lists the cursors, each on a tile that shows it.
+*/
+const ROWS = tokenRows("cursor", CURSORS, sampler("tile", "cursor"));
+/**
+* Renders the cursors page.
+*/
+function CursorsPage() {
+	const $ = c(7);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("cursors.sections.cursors.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t0,
+				rows: ROWS
+			}),
+			id: "cursors"
+		};
+		$[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: "cursors",
+			sections: [t1, t2]
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+export { CursorsPage };