@stealthscale/plugin-theming 0.0.0-stage → 0.2.1

package/dist/doc-page-BQXdbP_h.js

@@ -0,0 +1,439 @@
+import { c } from "react/compiler-runtime";
+import { Stack } from "@stealthscale/component-layout";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useTranslation } from "@stealthscale/provider-i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Page, Section } from "@stealthscale/component-screen";
+import { useDocumentTitle } from "@stealthscale/sdk-plugin";
+import { Toc } from "@stealthscale/component-navigation";
+import { Markdown } from "@stealthscale/component-content";
+//#region src/words.ts
+/**
+* Reads the theming plugin's words from the `theming` namespace, which the contract package's
+* catalogue fills.
+*
+* @remarks
+*   The plugin's own words are at the namespace's top level, and each page's words are under the
+*   page's slug, from the page's own file in the catalogue's `theming` directory.
+*/
+/**
+* The namespace the plugin's words are in.
+*/
+const WORDS = "theming";
+/**
+* Reads the plugin's words.
+*
+* @remarks
+*   A hook rather than a reading, so a language switched under a running page applies to every
+*   part that called it.
+* @returns `t` bound to the namespace, with the instance and whether the words are ready.
+*/
+function useWords() {
+	return useTranslation(WORDS);
+}
+//#endregion
+//#region src/doc/contents.tsx
+/**
+* Renders the rail in the page's aside, sticking beside the body while the page scrolls.
+*
+* @remarks
+*   On a narrow page the aside stacks under the body, so a phone keeps the rail's links, and a page
+*   of text alone keeps a link that takes keyboard focus. The rail is the navigation package's
+*   table of contents, so the mark follows the sections as they come on screen and a press scrolls
+*   the page to one.
+*/
+function Contents(t0) {
+	const $ = c(38);
+	const { of } = t0;
+	const { t } = useWords();
+	let T0;
+	let T1;
+	let T2;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== of || $[1] !== t) {
+		const listed = of.map(_temp);
+		T2 = Page.Aside;
+		if ($[14] !== t) {
+			t7 = t("contents.title");
+			$[14] = t;
+			$[15] = t7;
+		} else t7 = $[15];
+		t8 = "under";
+		t9 = true;
+		T1 = Toc.Root;
+		t3 = listed.map(_temp2);
+		t4 = "0px";
+		t5 = "sm";
+		let t10;
+		if ($[16] !== t) {
+			t10 = t("contents.title");
+			$[16] = t;
+			$[17] = t10;
+		} else t10 = $[17];
+		if ($[18] !== t10) {
+			t6 = /* @__PURE__ */ jsx(Toc.Title, { children: t10 });
+			$[18] = t10;
+			$[19] = t6;
+		} else t6 = $[19];
+		T0 = Toc.List;
+		if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(Toc.Indicator, {});
+			$[20] = t1;
+		} else t1 = $[20];
+		t2 = listed.map(_temp3);
+		$[0] = of;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = T1;
+		$[4] = T2;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+		$[13] = t9;
+	} else {
+		T0 = $[2];
+		T1 = $[3];
+		T2 = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+		t8 = $[12];
+		t9 = $[13];
+	}
+	let t10;
+	if ($[21] !== T0 || $[22] !== t1 || $[23] !== t2) {
+		t10 = /* @__PURE__ */ jsxs(T0, { children: [t1, t2] });
+		$[21] = T0;
+		$[22] = t1;
+		$[23] = t2;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== T1 || $[26] !== t10 || $[27] !== t3 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6) {
+		t11 = /* @__PURE__ */ jsxs(T1, {
+			items: t3,
+			rootMargin: t4,
+			size: t5,
+			children: [t6, t10]
+		});
+		$[25] = T1;
+		$[26] = t10;
+		$[27] = t3;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t11;
+	} else t11 = $[31];
+	let t12;
+	if ($[32] !== T2 || $[33] !== t11 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
+		t12 = /* @__PURE__ */ jsx(T2, {
+			"aria-label": t7,
+			folds: t8,
+			sticky: t9,
+			children: t11
+		});
+		$[32] = T2;
+		$[33] = t11;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t9;
+		$[37] = t12;
+	} else t12 = $[37];
+	return t12;
+}
+function _temp3(t0) {
+	const { item: item_0, title: title_0 } = t0;
+	return /* @__PURE__ */ jsx(Toc.Item, {
+		item: item_0,
+		children: /* @__PURE__ */ jsx(Toc.Link, {
+			href: `#${item_0.value}`,
+			item: item_0,
+			children: title_0
+		})
+	}, item_0.value);
+}
+function _temp2(t0) {
+	const { item } = t0;
+	return item;
+}
+function _temp(t0) {
+	const { id, title } = t0;
+	return {
+		item: {
+			depth: 2,
+			value: id
+		},
+		title
+	};
+}
+//#endregion
+//#region src/doc/prose.tsx
+/**
+* The icons of the copy control in each code block's header.
+*/
+const GLYPHS = { copy: {
+	copied: /* @__PURE__ */ jsx(CheckIcon, {
+		"aria-hidden": true,
+		size: "1em"
+	}),
+	idle: /* @__PURE__ */ jsx(CopyIcon, {
+		"aria-hidden": true,
+		size: "1em"
+	})
+} };
+/**
+* Renders the passage at the reading measure, with a copy control on each code block and its code
+* blocks and tables named in the plugin's words.
+*
+* @remarks
+*   A heading inside a passage starts at the third level, below the page's title and its section's
+*   heading.
+*/
+function Prose(t0) {
+	const $ = c(13);
+	const { source } = t0;
+	const { t } = useWords();
+	let t1;
+	let t2;
+	if ($[0] !== t) {
+		t1 = (language) => language === void 0 ? t("blocks.code") : t("blocks.codeIn", { language });
+		t2 = t("blocks.copied");
+		$[0] = t;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] !== t) {
+		t3 = t("blocks.copy");
+		$[3] = t;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t) {
+		t4 = t("blocks.table");
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== source || $[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Markdown, {
+			codeLabel: t1,
+			copiedLabel: t2,
+			copyLabel: t3,
+			glyphs: GLYPHS,
+			headingLevel: 3,
+			source,
+			tableLabel: t4
+		});
+		$[7] = source;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+//#endregion
+//#region src/doc/doc-section.tsx
+/**
+* Renders the section with its heading from `<page>.sections.<id>.title`, its prose from
+* `<page>.sections.<id>.body`, and the block.
+*
+* @remarks
+*   A section without prose renders its heading and its block alone. The prose and the block are
+*   `lg` apart, the gap between two blocks of the prose itself.
+*/
+function DocSection(t0) {
+	const $ = c(18);
+	const { children, id, page } = t0;
+	const { t } = useWords();
+	const t1 = `${page}.sections.${id}.body`;
+	let t2;
+	if ($[0] !== t || $[1] !== t1) {
+		t2 = t(t1, { defaultValue: "" });
+		$[0] = t;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const body = t2;
+	const t3 = `${page}.sections.${id}.title`;
+	let t4;
+	if ($[3] !== id || $[4] !== t || $[5] !== t3) {
+		t4 = t(t3, { defaultValue: id });
+		$[3] = id;
+		$[4] = t;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Section.Header, { children: /* @__PURE__ */ jsx(Section.Title, { children: t4 }) });
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== body) {
+		t6 = body === "" ? null : /* @__PURE__ */ jsx(Prose, { source: body });
+		$[9] = body;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== children || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Section.Body, { children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "lg",
+			children: [t6, children]
+		}) });
+		$[11] = children;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== id || $[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Section.Root, {
+			id,
+			children: [t5, t7]
+		});
+		$[14] = id;
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+//#endregion
+//#region src/doc/doc-page.tsx
+/**
+* Renders the page in the screen package's page, titling the document with the page's title.
+*/
+function DocPage(t0) {
+	const $ = c(34);
+	const { page, sections } = t0;
+	const { t } = useWords();
+	const t1 = `${page}.title`;
+	let t2;
+	if ($[0] !== page || $[1] !== t || $[2] !== t1) {
+		t2 = t(t1, { defaultValue: page });
+		$[0] = page;
+		$[1] = t;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const title = t2;
+	useDocumentTitle(title);
+	let t3;
+	if ($[4] !== title) {
+		t3 = /* @__PURE__ */ jsx(Page.Title, { children: title });
+		$[4] = title;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = `${page}.about`;
+	let t5;
+	if ($[6] !== t || $[7] !== t4) {
+		t5 = t(t4, { defaultValue: "" });
+		$[6] = t;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Page.Description, { children: t5 });
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t3 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Page.Header, { children: [t3, t6] });
+		$[11] = t3;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== page || $[15] !== sections) {
+		let t9;
+		if ($[17] !== page) {
+			t9 = (t10) => {
+				const { block, id } = t10;
+				return /* @__PURE__ */ jsx(DocSection, {
+					id,
+					page,
+					children: block
+				}, id);
+			};
+			$[17] = page;
+			$[18] = t9;
+		} else t9 = $[18];
+		t8 = sections.map(t9);
+		$[14] = page;
+		$[15] = sections;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Page.Body, { children: t8 });
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== page || $[22] !== sections || $[23] !== t) {
+		let t11;
+		if ($[25] !== page || $[26] !== t) {
+			t11 = (t12) => {
+				const { id: id_0 } = t12;
+				return {
+					id: id_0,
+					title: t(`${page}.sections.${id_0}.title`, { defaultValue: id_0 })
+				};
+			};
+			$[25] = page;
+			$[26] = t;
+			$[27] = t11;
+		} else t11 = $[27];
+		t10 = sections.map(t11);
+		$[21] = page;
+		$[22] = sections;
+		$[23] = t;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[28] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Contents, { of: t10 });
+		$[28] = t10;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== t11 || $[31] !== t7 || $[32] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Page.Root, { children: [
+			t7,
+			t9,
+			t11
+		] });
+		$[30] = t11;
+		$[31] = t7;
+		$[32] = t9;
+		$[33] = t12;
+	} else t12 = $[33];
+	return t12;
+}
+//#endregion
+export { useWords as n, DocPage as t };

package/dist/extending-CY7ry7Y4.js

@@ -0,0 +1,31 @@
+import { t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/extending.tsx
+/**
+* The page's sections, in reading order. Each is prose with its code.
+*/
+const SECTIONS = [
+	{ id: "extension" },
+	{ id: "scope" },
+	{ id: "slots" },
+	{ id: "limits" },
+	{ id: "checks" }
+];
+/**
+* Renders the page on extending a recipe from a theme.
+*/
+function ExtendingPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "extending",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { ExtendingPage };

package/dist/faces-D76c_Ryh.js

@@ -0,0 +1,65 @@
+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 { FACES, FONT_SIZES, FONT_WEIGHTS } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/faces.tsx
+/**
+* Lists the page's tables, in reading order.
+*/
+const TABLES = [
+	{
+		category: "fonts",
+		id: "faces",
+		names: FACES,
+		property: "face"
+	},
+	{
+		category: "fontSizes",
+		id: "sizes",
+		names: FONT_SIZES,
+		property: "fontSize"
+	},
+	{
+		category: "fontWeights",
+		id: "weights",
+		names: FONT_WEIGHTS,
+		property: "weight"
+	}
+];
+/**
+* Renders the faces page.
+*/
+function FacesPage() {
+	const $ = c(3);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = { id: "scale" };
+			$[2] = t2;
+		} else t2 = $[2];
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "faces",
+			sections: [...TABLES.map((t1) => {
+				const { category, id, names, property } = t1;
+				return {
+					block: /* @__PURE__ */ jsx(TokenTable, {
+						caption: t(`faces.sections.${id}.title`, { defaultValue: id }),
+						lengths: id === "sizes",
+						rows: tokenRows(category, names, sampler("text", property, t("blocks.specimen")))
+					}),
+					id
+				};
+			}), t2]
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+//#endregion
+export { FacesPage };

package/dist/gate-CoX2Yr9x.js

@@ -0,0 +1,199 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { FLOOR, THRESHOLDS } 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";
+//#region src/blocks/values-table.tsx
+/**
+* Renders the name of a row in code.
+*/
+function nameCell({ name }) {
+	return /* @__PURE__ */ jsx(Code, { children: name });
+}
+/**
+* Renders a row per number: its name and the number.
+*/
+function ValuesTable(t0) {
+	const $ = c(21);
+	const { caption, values } = t0;
+	const { t } = useWords();
+	let t1;
+	if ($[0] !== values) {
+		t1 = Object.entries(values).map(_temp);
+		$[0] = values;
+		$[1] = t1;
+	} else t1 = $[1];
+	const rows = t1;
+	let t2;
+	if ($[2] !== caption || $[3] !== t) {
+		t2 = t("blocks.tableOf", { name: caption });
+		$[2] = caption;
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("blocks.name");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = {
+			cell: nameCell,
+			key: "name",
+			label: t3,
+			rowHeader: true
+		};
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("blocks.value");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = {
+			cell: _temp2,
+			key: "value",
+			label: t5,
+			numeric: true
+		};
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t4 || $[14] !== t6) {
+		t7 = [t4, t6];
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== caption || $[17] !== rows || $[18] !== t2 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Table.Simple, {
+			"aria-label": t2,
+			caption,
+			columns: t7,
+			rows,
+			rowToKey: _temp3
+		});
+		$[16] = caption;
+		$[17] = rows;
+		$[18] = t2;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+function _temp3(t0) {
+	const { name: name_0 } = t0;
+	return name_0;
+}
+function _temp2(t0) {
+	const { value: value_0 } = t0;
+	return String(value_0);
+}
+function _temp(t0) {
+	const [name, value] = t0;
+	return {
+		name,
+		value
+	};
+}
+//#endregion
+//#region src/pages/gate.tsx
+/**
+* Renders the gate page.
+*/
+function GatePage() {
+	const $ = c(16);
+	const { t } = useWords();
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { id: "violations" };
+		t1 = { id: "checks" };
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("gate.sections.thresholds.title");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { ...THRESHOLDS };
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2) {
+		t4 = {
+			block: /* @__PURE__ */ jsx(ValuesTable, {
+				caption: t2,
+				values: t3
+			}),
+			id: "thresholds"
+		};
+		$[5] = t2;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("gate.sections.floor.title");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = {
+			block: /* @__PURE__ */ jsx(ValuesTable, {
+				caption: t5,
+				values: FLOOR
+			}),
+			id: "floor"
+		};
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { id: "skipping" };
+		t8 = { id: "report" };
+		$[11] = t7;
+		$[12] = t8;
+	} else {
+		t7 = $[11];
+		t8 = $[12];
+	}
+	let t9;
+	if ($[13] !== t4 || $[14] !== t6) {
+		t9 = /* @__PURE__ */ jsx(DocPage, {
+			page: "gate",
+			sections: [
+				t0,
+				t1,
+				t4,
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t9;
+	} else t9 = $[15];
+	return t9;
+}
+//#endregion
+export { GatePage };