@stealthscale/plugin-theming 0.0.0-stage → 0.1.0

package/dist/token-table-yrZh5kLy.js

@@ -0,0 +1,182 @@
+import { a as pixelsOf, c as tidyNumbers } from "./measure-uwF7Fmpy.js";
+import { n as useWords } from "./doc-page-BQXdbP_h.js";
+import { t as useReadings } from "./use-readings-D56mNtEc.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Table } from "@stealthscale/component-collections";
+import { Code } from "@stealthscale/component-typography";
+import { jsx } from "react/jsx-runtime";
+//#region src/blocks/token-table.tsx
+/**
+* Renders a table of tokens: each token's name, an optional sample, its value as the stylesheet
+* resolves it, and the pixels a length comes to.
+*/
+/**
+* Returns the words a value cell writes: nothing before the token is read, the value, or the word
+* for a token the stylesheet does not declare.
+*/
+function written(reading, missing) {
+	if (reading === void 0) return "";
+	return reading.value === "" ? missing : tidyNumbers(reading.value);
+}
+/**
+* Returns a row's name cell: the token's name in code.
+*/
+function nameCell({ name }) {
+	return /* @__PURE__ */ jsx(Code, { children: name });
+}
+/**
+* Renders the table, reading every token inside the table's viewport.
+*
+* @remarks
+*   The sample column renders where a row states a sample, and the pixels column where the tokens
+*   are lengths. A table inside a mode panel reads that panel's mode.
+*/
+function TokenTable(t0) {
+	const $ = c(36);
+	const { caption, lengths: t1, rows } = t0;
+	const lengths = t1 === void 0 ? false : t1;
+	const { t } = useWords();
+	const [box, setBox] = useState(null);
+	let t2;
+	if ($[0] !== rows) {
+		t2 = rows.map(_temp);
+		$[0] = rows;
+		$[1] = t2;
+	} else t2 = $[1];
+	const readings = useReadings(box, t2);
+	let t3;
+	if ($[2] !== rows) {
+		t3 = rows.some(_temp2);
+		$[2] = rows;
+		$[3] = t3;
+	} else t3 = $[3];
+	const sampled = t3;
+	let t4;
+	if ($[4] !== caption || $[5] !== t) {
+		t4 = t("blocks.tableOf", { name: caption });
+		$[4] = caption;
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("blocks.name");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = {
+			cell: nameCell,
+			key: "name",
+			label: t5,
+			rowHeader: true
+		};
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== sampled || $[12] !== t) {
+		t7 = sampled ? [{
+			cell: _temp3,
+			key: "sample",
+			label: t("blocks.sample")
+		}] : [];
+		$[11] = sampled;
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== readings || $[15] !== t) {
+		t8 = (t9) => {
+			const { variable: variable_0 } = t9;
+			return written(readings.get(variable_0), t("blocks.missing"));
+		};
+		$[14] = readings;
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t) {
+		t9 = t("blocks.value");
+		$[17] = t;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t8 || $[20] !== t9) {
+		t10 = {
+			cell: t8,
+			key: "value",
+			label: t9
+		};
+		$[19] = t8;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== lengths || $[23] !== readings || $[24] !== t) {
+		t11 = lengths ? [{
+			cell: (t12) => {
+				const { variable: variable_1 } = t12;
+				return pixelsOf(readings.get(variable_1)) ?? "";
+			},
+			key: "pixels",
+			label: t("blocks.pixels"),
+			numeric: true
+		}] : [];
+		$[22] = lengths;
+		$[23] = readings;
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t10 || $[27] !== t11 || $[28] !== t6 || $[29] !== t7) {
+		t12 = [
+			t6,
+			...t7,
+			t10,
+			...t11
+		];
+		$[26] = t10;
+		$[27] = t11;
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== caption || $[32] !== rows || $[33] !== t12 || $[34] !== t4) {
+		t13 = /* @__PURE__ */ jsx(Table.Simple, {
+			"aria-label": t4,
+			caption,
+			columns: t12,
+			rows,
+			rowToKey: _temp4,
+			viewportRef: setBox
+		});
+		$[31] = caption;
+		$[32] = rows;
+		$[33] = t12;
+		$[34] = t4;
+		$[35] = t13;
+	} else t13 = $[35];
+	return t13;
+}
+function _temp4(t0) {
+	const { variable: variable_2 } = t0;
+	return variable_2;
+}
+function _temp3(t0) {
+	const { sample: sample_0 } = t0;
+	return sample_0;
+}
+function _temp2(t0) {
+	const { sample } = t0;
+	return sample !== void 0;
+}
+function _temp(t0) {
+	const { variable } = t0;
+	return variable;
+}
+//#endregion
+export { TokenTable as t };

package/dist/tokens-7Pm-eLiZ.js

@@ -0,0 +1,138 @@
+import { n as variableOf } from "./variables-ymFs3Bzn.js";
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as TokenTable } from "./token-table-yrZh5kLy.js";
+import { PALETTES } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { Stack } from "@stealthscale/component-layout";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@stealthscale/component-actions";
+//#region src/blocks/palette-buttons.tsx
+/**
+* Lists the looks the buttons are shown in.
+*/
+const LOOKS = ["solid", "subtle"];
+/**
+* Renders a row per look, each with a button per palette named by the palette.
+*
+* @remarks
+*   One recipe renders every button, and the palette points `colorPalette` at another palette, so
+*   each button reads the same roles of another palette.
+*/
+function PaletteButtons() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Stack, {
+			gap: "sm",
+			children: LOOKS.map(_temp$1)
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function _temp$1(look) {
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "row",
+		gap: "sm",
+		wrap: true,
+		children: PALETTES.map((palette) => /* @__PURE__ */ jsx(Button, {
+			palette,
+			size: "sm",
+			variant: look,
+			children: palette
+		}, palette))
+	}, look);
+}
+//#endregion
+//#region src/pages/tokens.tsx
+/**
+* Lists the tokens whose custom properties the page reads, by category and path.
+*/
+const READ = [
+	["colors", "bg.panel"],
+	["spacing", "gap.md"],
+	["sizes", "control.md"],
+	["radii", "l2"],
+	["durations", "press"]
+];
+/**
+* Renders the tokens page.
+*/
+function TokensPage() {
+	const $ = c(11);
+	const { t } = useWords();
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { id: "kinds" };
+		t1 = { id: "naming" };
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("tokens.sections.variables.title");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = READ.map(_temp);
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2) {
+		t4 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t2,
+				rows: t3
+			}),
+			id: "variables"
+		};
+		$[5] = t2;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	let t6;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			block: /* @__PURE__ */ jsx(PaletteButtons, {}),
+			id: "palette"
+		};
+		t6 = { id: "runtime" };
+		$[7] = t5;
+		$[8] = t6;
+	} else {
+		t5 = $[7];
+		t6 = $[8];
+	}
+	let t7;
+	if ($[9] !== t4) {
+		t7 = /* @__PURE__ */ jsx(DocPage, {
+			page: "tokens",
+			sections: [
+				t0,
+				t1,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[9] = t4;
+		$[10] = t7;
+	} else t7 = $[10];
+	return t7;
+}
+function _temp(t0) {
+	const [category, path] = t0;
+	const variable = variableOf(category, path);
+	return {
+		name: variable,
+		variable
+	};
+}
+//#endregion
+export { TokensPage };

package/dist/use-readings-D56mNtEc.js

@@ -0,0 +1,77 @@
+import { t as measured } from "./measure-uwF7Fmpy.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { COLOR_MODE_ATTRIBUTE, THEME_ATTRIBUTE } from "@stealthscale/theme";
+//#region src/reading/use-readings.ts
+/**
+* Reads what a list of tokens resolves to inside an element, once the element is in the document.
+*/
+/**
+* The readings before the element is in the document.
+*/
+const NONE = /* @__PURE__ */ new Map();
+/**
+* Reads every token inside an element now and again whenever the document's theme or color mode
+* changes.
+*
+* @param element - The element the tokens resolve in.
+* @param asked - The custom properties to read, encoded as JSON.
+* @param store - Receives each set of readings.
+* @returns The function that stops reading.
+*/
+function watched(element, asked, store) {
+	const list = JSON.parse(asked);
+	const observer = new MutationObserver(read);
+	function read() {
+		store(measured(element, list));
+	}
+	read();
+	observer.observe(document.documentElement, {
+		attributeFilter: [THEME_ATTRIBUTE, COLOR_MODE_ATTRIBUTE],
+		attributes: true
+	});
+	return () => {
+		observer.disconnect();
+	};
+}
+/**
+* Reads every token inside an element after it renders, again when the element or the list
+* changes, and again whenever the document's theme or color mode changes.
+*
+* @remarks
+*   The effect depends on the list encoded rather than on the array, because a caller that writes
+*   the array inline passes a new one every render. The theme provider writes the document's theme
+*   and color mode in an effect, which runs after the effects of the page under it, so the readings
+*   follow the document's attributes and not the theme a person picked.
+* @param box - The element the tokens resolve in, or null before it renders.
+* @param variables - The custom properties to read.
+* @returns Each custom property's reading, or none before the element renders.
+*/
+function useReadings(box, variables) {
+	const $ = c(6);
+	const [readings, setReadings] = useState(NONE);
+	let t0;
+	if ($[0] !== variables) {
+		t0 = JSON.stringify(variables);
+		$[0] = variables;
+		$[1] = t0;
+	} else t0 = $[1];
+	const asked = t0;
+	let t1;
+	let t2;
+	if ($[2] !== asked || $[3] !== box) {
+		t1 = () => box === null ? void 0 : watched(box, asked, setReadings);
+		t2 = [asked, box];
+		$[2] = asked;
+		$[3] = box;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	return readings;
+}
+//#endregion
+export { useReadings as t };

package/dist/variables-ymFs3Bzn.js

@@ -0,0 +1,43 @@
+//#region src/reading/variables.ts
+/**
+* Writes the custom property a token is declared under, the way the stylesheet compiler names it.
+*
+* @remarks
+*   The compiler joins the category and the path with dashes, writes a capital as a dash and the
+*   lower-case letter, and escapes every other character a custom property's name cannot contain:
+*   `colors.primary.focusRing` is `--colors-primary-focus-ring` and the grid step `spacing.0.5` is
+*   `--spacing-0\.5`. A dot between two digits is part of a step's name and every other dot
+*   separates two segments, because no key of the foundation has a dot between letters.
+*/
+/**
+* Matches a dot that separates two segments of a path: one that is not between two digits.
+*/
+const SEPARATOR = /\.(?!\d)|(?<!\d)\./u;
+/**
+* Writes one segment of a name: each capital as a dash and its lower-case letter, and each other
+* character a custom property cannot contain escaped.
+*/
+function segmentOf(segment) {
+	return segment.replaceAll(/[A-Z]/gu, (capital) => `-${capital.toLowerCase()}`).replaceAll(/[^\w-]/gu, (other) => `\\${other}`);
+}
+/**
+* Returns the custom property a token is declared under.
+*
+* @param category - The token's category, such as `colors` or `zIndex`.
+* @param path - The token's path inside the category, such as `primary.solid`. A `DEFAULT` segment
+*   is the category's own value and adds no segment.
+*/
+function variableOf(category, path) {
+	return `--${[category, ...path.split(SEPARATOR).filter((one) => one !== "DEFAULT")].map((segment) => segmentOf(segment)).join("-")}`;
+}
+/**
+* Returns a reference to the custom property a token is declared under, as a style reads it.
+*
+* @param category - The token's category.
+* @param path - The token's path inside the category.
+*/
+function referenceOf(category, path) {
+	return `var(${variableOf(category, path)})`;
+}
+//#endregion
+export { variableOf as n, referenceOf as t };

package/dist/worn-D4HEJsJ2.js

@@ -0,0 +1,15 @@
+import { useThemeChoice } from "@stealthscale/provider-shell";
+//#region src/reading/worn.ts
+/**
+* Reads the theme the page wears.
+*/
+/**
+* Returns the theme the page wears: the one a person chose, else the first the product offers, or
+* undefined for a product that offers none.
+*/
+function useWornTheme() {
+	const { theme, themes } = useThemeChoice();
+	return theme ?? themes[0];
+}
+//#endregion
+export { useWornTheme as t };

package/dist/writing-b05oSPB2.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/writing.tsx
+/**
+* The page's sections, in reading order. Each is prose with its code.
+*/
+const SECTIONS = [
+	{ id: "statement" },
+	{ id: "axes" },
+	{ id: "colors" },
+	{ id: "derived" },
+	{ id: "installing" }
+];
+/**
+* Renders the page on writing a theme.
+*/
+function WritingPage() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DocPage, {
+			page: "writing",
+			sections: SECTIONS
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+//#endregion
+export { WritingPage };

package/package.json

@@ -1,6 +1,127 @@
 {
   "name": "@stealthscale/plugin-theming",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Renders the theming pages: what a theme is, every token, style and condition it fills with the values read from the stylesheet in both color modes, the gate's pairs measured live, and how a theme is written.",
+  "keywords": [
+    "design-system",
+    "plugins",
+    "react",
+    "theme",
+    "theming"
+  ],
+  "homepage": "https://github.com/stealth-scale/scale/tree/main/plugins/theming/web#readme",
+  "bugs": "https://github.com/stealth-scale/scale/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stealth-scale/scale.git",
+    "directory": "plugins/theming/web"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme": "./dist/theme.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@stealthscale/plugin-theming-contract": "^0.1.0",
+    "@stealthscale/sdk-core": "^0.2.0",
+    "lucide-react": "^1.52"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18",
+    "@openfeature/web-sdk": "^1.10",
+    "@stealthscale/component-actions": "^0.2.0",
+    "@stealthscale/component-collections": "^0.1.0",
+    "@stealthscale/component-content": "^0.1.0",
+    "@stealthscale/component-data": "^0.2.0",
+    "@stealthscale/component-disclosure": "^0.2.0",
+    "@stealthscale/component-forms": "^0.2.0",
+    "@stealthscale/component-layout": "^0.2.0",
+    "@stealthscale/component-navigation": "^0.2.0",
+    "@stealthscale/component-screen": "^0.1.0",
+    "@stealthscale/component-surfaces": "^0.1.0",
+    "@stealthscale/component-typography": "^0.2.0",
+    "@stealthscale/hooks": "^0.2.0",
+    "@stealthscale/provider-color-mode": "^0.2.0",
+    "@stealthscale/provider-data": "^0.2.0",
+    "@stealthscale/provider-form": "^0.2.0",
+    "@stealthscale/provider-hotkeys": "^0.2.0",
+    "@stealthscale/provider-i18n": "^0.1.0",
+    "@stealthscale/provider-router": "^0.2.0",
+    "@stealthscale/provider-shell": "^0.2.0",
+    "@stealthscale/provider-viewport": "^0.2.0",
+    "@stealthscale/sdk-host": "^0.2.0",
+    "@stealthscale/sdk-plugin": "^0.2.0",
+    "@stealthscale/settings": "^0.1.0",
+    "@stealthscale/testing-config": "^0.6.0",
+    "@stealthscale/testing-plugin": "^0.2.0",
+    "@stealthscale/testing-react": "^0.9.0",
+    "@stealthscale/testing-theme": "^0.3.0",
+    "@stealthscale/theme": "^0.4.0",
+    "@stealthscale/vite-config": "^0.7.0",
+    "@stealthscale/vite-config-core": "^0.4.0",
+    "@stealthscale/vite-config-i18n": "^0.2.0",
+    "@stealthscale/vite-config-product": "^0.2.0",
+    "@stealthscale/vite-config-react": "^0.9.0",
+    "@stealthscale/vite-config-typescript": "^0.3.0",
+    "@tanstack/react-form": "^1.33",
+    "@tanstack/react-hotkeys": "^0.13",
+    "@tanstack/react-query": "^5.104",
+    "@tanstack/react-router": "1.170.41",
+    "@tanstack/react-router-ssr-query": "^1.167",
+    "@testing-library/react": "^16.3",
+    "@types/react": "^19.3",
+    "@types/react-dom": "^19.3",
+    "@vitest/coverage-v8": "5.0.3",
+    "happy-dom": "^20.14",
+    "i18next": "^26.4",
+    "oxc-transform-react": "^0.153",
+    "publint": "^0.3",
+    "react": "^19.3",
+    "react-dom": "^19.3",
+    "react-i18next": "^17.0",
+    "typescript": "^7.0",
+    "vitest": "5.0.3"
+  },
+  "peerDependencies": {
+    "@stealthscale/component-actions": "^0.2.0",
+    "@stealthscale/component-collections": "^0.1.0",
+    "@stealthscale/component-content": "^0.1.0",
+    "@stealthscale/component-data": "^0.2.0",
+    "@stealthscale/component-disclosure": "^0.2.0",
+    "@stealthscale/component-forms": "^0.2.0",
+    "@stealthscale/component-layout": "^0.2.0",
+    "@stealthscale/component-navigation": "^0.2.0",
+    "@stealthscale/component-screen": "^0.1.0",
+    "@stealthscale/component-surfaces": "^0.1.0",
+    "@stealthscale/component-typography": "^0.2.0",
+    "@stealthscale/hooks": "^0.2.0",
+    "@stealthscale/provider-i18n": "^0.1.0",
+    "@stealthscale/provider-router": "^0.2.0",
+    "@stealthscale/provider-shell": "^0.2.0",
+    "@stealthscale/sdk-plugin": "^0.2.0",
+    "@stealthscale/theme": "^0.4.0",
+    "react": "^19.3"
+  },
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test"
+  }
 }