@stealthscale/plugin-theming 0.0.0-stage → 0.1.0

package/dist/motion-DRbsuZZo.js

@@ -0,0 +1,202 @@
+import { s as keyOf } from "./theming-text.recipe-Dvcza4j1.js";
+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 { n as ThemingMotion } from "./parts-BVmqVMgo.js";
+import { ANIMATIONS, ANIMATION_STYLES, DURATIONS, EASINGS, PACES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { Code } from "@stealthscale/component-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@stealthscale/component-actions";
+//#region src/blocks/motion-grid.tsx
+/**
+* Renders a grid of motions, each played on a tile beside its name, and a control that plays them
+* all again.
+*/
+/**
+* Renders a tile per motion and the replay control.
+*
+* @remarks
+*   A motion that runs once runs when its tile mounts, so the replay control mounts every tile
+*   again. A loop keeps running, and a motion the scroll drives moves as the page scrolls. Every
+*   motion stops for a reader who asked for less motion.
+*/
+function MotionGrid(t0) {
+	const $ = c(15);
+	const { names } = t0;
+	const { t } = useWords();
+	const [played, setPlayed] = useState(0);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			setPlayed(_temp);
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== t) {
+		t2 = t("blocks.replay");
+		$[1] = t;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			onClick: t1,
+			size: "sm",
+			variant: "outline",
+			children: t2
+		});
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== names || $[6] !== played) {
+		let t5;
+		if ($[8] !== played) {
+			t5 = (name) => /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				gap: "md",
+				children: [/* @__PURE__ */ jsx(ThemingMotion, { motion: keyOf(name) }), /* @__PURE__ */ jsx(Code, { children: name })]
+			}, `${name}-${String(played)}`);
+			$[8] = played;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = names.map(t5);
+		$[5] = names;
+		$[6] = played;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fill-xs",
+			gap: "md",
+			children: t4
+		});
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t3 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			gap: "lg",
+			children: [t3, t5]
+		});
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+function _temp(count) {
+	return count + 1;
+}
+//#endregion
+//#region src/pages/motion.tsx
+/**
+* Lists each pace's duration and curve, job by job.
+*/
+const JOBS = PACES.flatMap((pace) => ["durations", "easings"].map((category) => ({
+	name: `${category}.${pace}`,
+	variable: variableOf(category, pace)
+})));
+/**
+* Lists the page's tables of tokens by their sections, in reading order.
+*/
+const TABLES = [
+	{
+		id: "durations",
+		rows: tokenRows("durations", DURATIONS)
+	},
+	{
+		id: "easings",
+		rows: tokenRows("easings", EASINGS)
+	},
+	{
+		id: "animations",
+		rows: tokenRows("animations", ANIMATIONS)
+	}
+];
+/**
+* Renders the motion page.
+*/
+function MotionPage() {
+	const $ = c(12);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("motion.sections.paces.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t0,
+				rows: JOBS
+			}),
+			id: "paces"
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { id: "statement" };
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t || $[6] !== t1) {
+		let t4;
+		if ($[8] !== t) {
+			t4 = (t5) => {
+				const { id, rows } = t5;
+				return {
+					block: /* @__PURE__ */ jsx(TokenTable, {
+						caption: t(`motion.sections.${id}.title`, { defaultValue: id }),
+						rows
+					}),
+					id
+				};
+			};
+			$[8] = t;
+			$[9] = t4;
+		} else t4 = $[9];
+		let t5;
+		let t6;
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = {
+				block: /* @__PURE__ */ jsx(MotionGrid, { names: ANIMATION_STYLES }),
+				id: "styles"
+			};
+			t6 = { id: "reduced" };
+			$[10] = t5;
+			$[11] = t6;
+		} else {
+			t5 = $[10];
+			t6 = $[11];
+		}
+		t3 = /* @__PURE__ */ jsx(DocPage, {
+			page: "motion",
+			sections: [
+				t1,
+				t2,
+				...TABLES.map(t4),
+				t5,
+				t6
+			]
+		});
+		$[5] = t;
+		$[6] = t1;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+//#endregion
+export { MotionPage };

package/dist/overview-BbE82N2c.js

@@ -0,0 +1,192 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { themingContract } from "@stealthscale/plugin-theming-contract";
+import { c } from "react/compiler-runtime";
+import { Grid } from "@stealthscale/component-layout";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "@stealthscale/component-navigation";
+import { Card } from "@stealthscale/component-surfaces";
+import { createLink, useRouteHref } from "@stealthscale/provider-router";
+//#region src/blocks/page-card.tsx
+/**
+* Renders the navigation package's link as the router's link, so a title navigates without a
+* reload.
+*/
+const Opening = createLink(Link);
+/**
+* Renders the page's card in the outline look, its title linking to the page.
+*
+* @remarks
+*   The title is the link, so a screen reader lists the page by its name, and the interactive card
+*   stretches the link over the whole card.
+*/
+function PageCard(t0) {
+	const $ = c(15);
+	const { route, slug } = t0;
+	const { t } = useWords();
+	const href = useRouteHref(route);
+	const t1 = `${slug}.title`;
+	let t2;
+	if ($[0] !== slug || $[1] !== t || $[2] !== t1) {
+		t2 = t(t1, { defaultValue: slug });
+		$[0] = slug;
+		$[1] = t;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== href || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Card.Title, {
+			as: "h3",
+			children: /* @__PURE__ */ jsx(Opening, {
+				inherit: true,
+				to: href,
+				variant: "plain",
+				children: t2
+			})
+		});
+		$[4] = href;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const t4 = `${slug}.about`;
+	let t5;
+	if ($[7] !== t || $[8] !== t4) {
+		t5 = t(t4, { defaultValue: "" });
+		$[7] = t;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Card.Description, { children: t5 });
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t3 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Card.Root, {
+			interactive: true,
+			variant: "outline",
+			children: /* @__PURE__ */ jsxs(Card.Header, { children: [t3, t6] })
+		});
+		$[12] = t3;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+//#endregion
+//#region src/menus.ts
+/**
+* The prefix of every page's path, which leaves the page's slug.
+*/
+const PREFIX = "theming/";
+/**
+* Returns a menu's rank, which puts a menu without one after every ranked menu.
+*/
+function rankOf(menu) {
+	return menu.order ?? Number.MAX_SAFE_INTEGER;
+}
+/**
+* Returns the menus by their rank, an unranked menu last.
+*
+* @param menus - The contract's menus, by name.
+*/
+function menusByRank(menus) {
+	return Object.values(menus).toSorted((one, other) => rankOf(one) - rankOf(other));
+}
+/**
+* Returns the name a menu's qualified id ends with: `color` for `theming/color`.
+*
+* @param menu - A menu of the contract, whose id starts with the plugin's id.
+*/
+function nameOf(menu) {
+	return menu.id.slice(menu.id.indexOf("/") + 1);
+}
+/**
+* Returns the pages a menu lists, by their rank, each with its slug.
+*
+* @param routes - The contract's routes, by name.
+* @param menu - The qualified id of the menu.
+*/
+function pagesOf(routes, menu) {
+	return Object.values(routes).flatMap((route) => route.navigation?.menu?.id === menu && route.path?.startsWith(PREFIX) === true ? [{
+		order: route.navigation.order ?? 0,
+		route,
+		slug: route.path.slice(8)
+	}] : []).toSorted((one, other) => one.order - other.order).map(({ route, slug }) => ({
+		route,
+		slug
+	}));
+}
+//#endregion
+//#region src/blocks/page-cards.tsx
+/**
+* Renders the menu's pages in the order the menu lists them, in columns as wide as the room allows.
+*/
+function PageCards(t0) {
+	const $ = c(4);
+	const { menu } = t0;
+	let t1;
+	if ($[0] !== menu) {
+		t1 = pagesOf(themingContract.routes, menu).map(_temp$1);
+		$[0] = menu;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fill-xs",
+			gap: "md",
+			children: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+function _temp$1(t0) {
+	const { route, slug } = t0;
+	return /* @__PURE__ */ jsx(PageCard, {
+		route,
+		slug
+	}, route.id);
+}
+//#endregion
+//#region src/pages/overview.tsx
+/**
+* The sections that open the overview, before a section per group of pages.
+*/
+const OPENING = [
+	"statement",
+	"tokens",
+	"scoping",
+	"modes",
+	"reading"
+];
+/**
+* Renders the overview, with a section per menu in the sidebar's order.
+*/
+function OverviewPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "overview",
+			sections: [...OPENING.map(_temp), ...menusByRank(themingContract.menus).map(_temp2)]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function _temp2(menu) {
+	return {
+		block: /* @__PURE__ */ jsx(PageCards, { menu: menu.id }),
+		id: nameOf(menu)
+	};
+}
+function _temp(id) {
+	return { id };
+}
+//#endregion
+export { OverviewPage };

package/dist/palettes-CZo2HrNT.js

@@ -0,0 +1,49 @@
+import { n as variableOf } from "./variables-ymFs3Bzn.js";
+import { t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as ModeColors } from "./mode-colors-Cf_ZPo3g.js";
+import { PALETTES, ROLES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/palettes.tsx
+/**
+* Returns a palette's roles as the rows of a color table: each on the page, and the label on the
+* solid.
+*/
+function rowsOf(palette) {
+	const solid = {
+		name: `${palette}.solid`,
+		variable: variableOf("colors", `${palette}.solid`)
+	};
+	return ROLES.map((role) => ({
+		against: role === "contrast" ? solid : void 0,
+		name: `${palette}.${role}`,
+		variable: variableOf("colors", `${palette}.${role}`)
+	}));
+}
+/**
+* The page's sections: the roles, then a section per palette.
+*/
+const SECTIONS = [{ id: "roles" }, ...PALETTES.map((palette) => ({
+	block: /* @__PURE__ */ jsx(ModeColors, {
+		name: palette,
+		rows: rowsOf(palette)
+	}),
+	id: palette
+}))];
+/**
+* Renders the palettes page.
+*/
+function PalettesPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "palettes",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { PalettesPage };

package/dist/parts-BVmqVMgo.js

@@ -0,0 +1,25 @@
+import { a as recipe$4, i as recipe, n as recipe$1, o as recipe$2, t as recipe$3 } from "./theming-text.recipe-Dvcza4j1.js";
+import { createRecipeContext } from "@stealthscale/theme";
+//#region src/parts.ts
+/**
+* Renders a div as the panel that shows a block in one color mode.
+*/
+const ThemingPanel = createRecipeContext(recipe).withContext("div");
+/**
+* Renders a span that shows a token, in the shape passed as `shape`.
+*/
+const ThemingSample = createRecipeContext(recipe$1).withContext("span");
+/**
+* Renders a div that shows a layer style, in the look passed as `look`.
+*/
+const ThemingLook = createRecipeContext(recipe$2).withContext("div");
+/**
+* Renders a span of words in the text style passed as `text`.
+*/
+const ThemingText = createRecipeContext(recipe$3).withContext("span");
+/**
+* Renders a span that plays the animation style passed as `motion`.
+*/
+const ThemingMotion = createRecipeContext(recipe$4).withContext("span");
+//#endregion
+export { ThemingText as a, ThemingSample as i, ThemingMotion as n, ThemingPanel as r, ThemingLook as t };

package/dist/recipes-C88xVIGB.js

@@ -0,0 +1,32 @@
+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/recipes.tsx
+/**
+* The page's sections, in reading order.
+*/
+const SECTIONS = [
+	{ id: "binding" },
+	{ id: "writing" },
+	{ id: "parts" },
+	{ id: "layers" },
+	{ id: "emitted" },
+	{ id: "classes" }
+];
+/**
+* Renders the recipes page.
+*/
+function RecipesPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "recipes",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { RecipesPage };

package/dist/rows-Dv8c7jye.js

@@ -0,0 +1,18 @@
+import { n as variableOf, t as referenceOf } from "./variables-ymFs3Bzn.js";
+//#region src/blocks/rows.ts
+/**
+* Returns a row per name: the name, its custom property, and a sample where the caller renders one.
+*
+* @param category - The tokens' category, such as `spacing`.
+* @param names - The tokens' paths inside the category, in the order the table lists them.
+* @param sample - Renders a token's sample from its reference, `var(--spacing-gap-md)`.
+*/
+function tokenRows(category, names, sample) {
+	return names.map((name) => ({
+		name,
+		variable: variableOf(category, name),
+		...sample === void 0 ? {} : { sample: sample(referenceOf(category, name)) }
+	}));
+}
+//#endregion
+export { tokenRows as t };

package/dist/sampler-Ue67PX2n.js

@@ -0,0 +1,27 @@
+import { r as SAMPLE } from "./theming-text.recipe-Dvcza4j1.js";
+import { i as ThemingSample } from "./parts-BVmqVMgo.js";
+import { t as setting } from "./setting-BsgJKTlh.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/sampler.tsx
+/**
+* Returns a function that renders a sample from a token's reference.
+*
+* @param shape - The sample's shape.
+* @param property - The value of the sample the token sets, such as `radius`.
+* @param words - The words a text sample is set in. A sample of another shape renders none.
+*/
+function sampler(shape, property, words) {
+	/**
+	* Renders the sample of one token.
+	*/
+	function sampled(reference) {
+		return /* @__PURE__ */ jsx(ThemingSample, {
+			shape,
+			style: setting(SAMPLE[property], reference),
+			children: words
+		});
+	}
+	return sampled;
+}
+//#endregion
+export { sampler as t };

package/dist/series-AvSZjk2b.js

@@ -0,0 +1,63 @@
+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 { SERIES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/series.tsx
+/**
+* Returns the series colors as rows measured against one surface.
+*/
+function rowsOn(surface) {
+	return SERIES.map((step) => ({
+		against: {
+			name: surface,
+			variable: variableOf("colors", surface)
+		},
+		name: `series.${step}`,
+		variable: variableOf("colors", `series.${step}`)
+	}));
+}
+/**
+* Renders the series page: how the colors are chosen, then the colors on each surface, each list
+* named by its surface.
+*/
+function SeriesPage() {
+	const $ = c(3);
+	const { t } = useWords();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { id: "order" };
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = /* @__PURE__ */ jsx(DocPage, {
+			page: "series",
+			sections: [t0, ...[{
+				id: "page",
+				surface: "bg"
+			}, {
+				id: "panel",
+				surface: "bg.panel"
+			}].map((t2) => {
+				const { id, surface } = t2;
+				return {
+					block: /* @__PURE__ */ jsx(ModeColors, {
+						name: t("blocks.onSurface", {
+							name: "series",
+							surface
+						}),
+						rows: rowsOn(surface)
+					}),
+					id
+				};
+			})]
+		});
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+export { SeriesPage };

package/dist/setting-BsgJKTlh.js

@@ -0,0 +1,12 @@
+//#region src/reading/setting.ts
+/**
+* Returns a style that sets one custom property.
+*
+* @param property - The custom property, such as `--theming-radius`.
+* @param value - Its value, such as `var(--radii-l2)`.
+*/
+function setting(property, value) {
+	return { [property]: value };
+}
+//#endregion
+export { setting as t };