@parallelworks/ui 0.53.0 → 0.55.0

package/dist/theme/derive.d.ts

@@ -1,4 +1,4 @@
-import { type CodeStyle, type Scheme } from './model.js';
+import { type CodeStyle, type Mode, type Scheme } from './model.js';
 export declare const THEME_TOKENS: readonly ['--theme-app-bg', '--theme-panel-bg', '--theme-panel-hover', '--theme-muted-panel-bg', '--theme-hover', '--theme-input-bg', '--theme-input-disabled-bg', '--theme-app', '--theme-muted-text-color', '--theme-placeholder', '--theme-link', '--theme-border', '--theme-border-strong', '--theme-accent', '--theme-accent-text', '--theme-accent-hover', '--theme-accent-subtle', '--theme-focus', '--theme-focus-ring', '--theme-success', '--theme-success-text', '--theme-success-solid', '--theme-success-muted', '--theme-error', '--theme-error-text', '--theme-error-solid', '--theme-error-muted', '--theme-warning', '--theme-warning-text', '--theme-warning-solid', '--theme-warning-muted', '--theme-info', '--theme-info-text', '--theme-info-solid', '--theme-info-muted', '--theme-favorite', '--theme-favorite-text', '--theme-favorite-solid', '--theme-favorite-muted', '--theme-shadow-sm', '--theme-shadow', '--theme-shadow-lg', '--theme-shadow-xl', '--theme-sidebar-bg', '--theme-sidebar-text', '--theme-sidebar-hover', '--theme-sidebar-active-bg', '--theme-sidebar-active-text', '--theme-code-bg', '--theme-code-text', '--theme-code-comment', '--theme-code-keyword', '--theme-code-string', '--theme-code-number', '--theme-code-function', '--theme-code-type', '--theme-code-property', '--theme-ansi-black', '--theme-ansi-red', '--theme-ansi-green', '--theme-ansi-yellow', '--theme-ansi-blue', '--theme-ansi-magenta', '--theme-ansi-cyan', '--theme-ansi-white'];
 export type ThemeToken = (typeof THEME_TOKENS)[number];
 export type ThemeVariables = Record<ThemeToken, string>;
@@ -22,7 +22,9 @@ export declare function generateTheme(scheme: Scheme, options?: DeriveOptions):
 /** Every `--theme-*` token for a scheme, in sRGB. */
 export declare function deriveTheme(scheme: Scheme, options?: DeriveOptions): ThemeVariables;
 /** A stylesheet for a scheme: sRGB under `selector`, and the display-p3 overrides under
- *  `@media (color-gamut: p3)`. `omit` leaves tokens out, such as ones a host supplies. */
-export declare function themeStylesheet(selector: string, scheme: Scheme, options?: DeriveOptions & {
+ *  `@media (color-gamut: p3)`. Given a scheme for each mode, every token that differs between
+ *  them is written as `light-dark()`, so the tokens follow the CSS color-scheme wherever they are
+ *  used. `omit` leaves tokens out, such as ones a host supplies. */
+export declare function themeStylesheet(selector: string, scheme: Scheme | Record<Mode, Scheme>, options?: DeriveOptions & {
     omit?: readonly ThemeToken[];
 }): string;

package/dist/theme/derive.js

@@ -159,6 +159,12 @@ var WHITE = {
 	c: 0,
 	h: 0
 };
+/** The WCAG contrast a dark mode's hover keeps against the page at contrast 0, 30 and 100. */
+var HOVER_STEP = [
+	1.45,
+	1.6,
+	1.9
+];
 var STATUS = {
 	success: 150,
 	error: 27,
@@ -271,7 +277,13 @@ function build(scheme, options) {
 	set("--theme-app-bg", base);
 	set("--theme-panel-hover", neutral(set("--theme-panel-bg", raised(.85, .035)).l + dir * (dark ? .04 : .025) * s, 1));
 	const mutedPanel = set("--theme-muted-panel-bg", step(.03, .065));
-	set("--theme-hover", step(.045, .08));
+	const hoverStep = step(.045, .08);
+	const hoverGoal = dark ? solve(hoverStep, [toHex(base)], { wcag: byContrast(k, HOVER_STEP) }) : hoverStep;
+	const hoverAt = (share) => ({
+		...hoverStep,
+		l: hoverStep.l + (hoverGoal.l - hoverStep.l) * share
+	});
+	set("--theme-hover", hoverAt(roomFor(hoverAt, { wcag: t.primary.wcag })));
 	set("--theme-input-bg", raised(.7, .05));
 	set("--theme-input-disabled-bg", step(.02, .025));
 	set("--theme-accent-subtle", {
@@ -492,11 +504,69 @@ function compositeHex(fill, backdrop) {
 function deriveTheme(scheme, options = {}) {
 	return build(scheme, options).srgb;
 }
+var COLOR = /#[0-9a-f]{3,8}\b|rgba?\([^)]*\)|color\([^)]*\)/gi;
+/** One value for both modes: each color that differs becomes `light-dark()`, which follows the
+*  CSS color-scheme. A shadow keeps its geometry and pairs its colors. */
+function lightDark(light, dark) {
+	if (light === dark) return light;
+	const darks = dark.match(COLOR) ?? [];
+	if (light.replace(COLOR, "") !== dark.replace(COLOR, "")) throw new Error(`cannot pair ${light} with ${dark}`);
+	let i = 0;
+	return light.replace(COLOR, (color) => {
+		const other = darks[i++];
+		return color === other ? color : `light-dark(${color}, ${other})`;
+	});
+}
+/** Splits at the commas outside any parentheses. */
+function topLevel(value) {
+	const parts = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i < value.length; i++) {
+		const ch = value[i];
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (ch === "," && depth === 0) {
+			parts.push(value.slice(start, i).trim());
+			start = i + 1;
+		}
+	}
+	parts.push(value.slice(start).trim());
+	return parts;
+}
+/** A declaration laid out as the repository's formatter lays out CSS past 100 columns: a list
+*  takes a line per item, and a single function a line per argument. */
+function declaration(token, value, indent) {
+	const line = `${indent}${token}: ${value};`;
+	if (line.length <= 100) return line;
+	const inner = `${indent}  `;
+	const items = topLevel(value);
+	if (items.length > 1) return `${indent}${token}:\n${items.map((item) => `${inner}${item}`).join(",\n")};`;
+	const call = /^([\w-]+)\((.*)\)$/s.exec(value);
+	if (!call) return line;
+	const args = topLevel(call[2]);
+	return `${indent}${token}: ${call[1]}(\n${args.map((arg) => `${inner}${arg}`).join(",\n")}\n${indent});`;
+}
 /** A stylesheet for a scheme: sRGB under `selector`, and the display-p3 overrides under
-*  `@media (color-gamut: p3)`. `omit` leaves tokens out, such as ones a host supplies. */
+*  `@media (color-gamut: p3)`. Given a scheme for each mode, every token that differs between
+*  them is written as `light-dark()`, so the tokens follow the CSS color-scheme wherever they are
+*  used. `omit` leaves tokens out, such as ones a host supplies. */
 function themeStylesheet(selector, scheme, options = {}) {
-	const { srgb, p3 } = generateTheme(scheme, options);
-	const block = (vars, indent) => THEME_TOKENS.filter((token) => !options.omit?.includes(token) && vars[token] !== void 0).map((token) => `${indent}${token}: ${vars[token]};`).join("\n");
+	const tokens = THEME_TOKENS.filter((token) => !options.omit?.includes(token));
+	let srgb;
+	let p3;
+	if ("interface" in scheme) ({srgb, p3} = generateTheme(scheme, options));
+	else {
+		const light = generateTheme(scheme.light, options);
+		const dark = generateTheme(scheme.dark, options);
+		srgb = {};
+		p3 = {};
+		for (const token of tokens) {
+			srgb[token] = lightDark(light.srgb[token], dark.srgb[token]);
+			if (light.p3[token] !== void 0 || dark.p3[token] !== void 0) p3[token] = lightDark(light.p3[token] ?? light.srgb[token], dark.p3[token] ?? dark.srgb[token]);
+		}
+	}
+	const block = (vars, indent) => tokens.filter((token) => vars[token] !== void 0).map((token) => declaration(token, vars[token], indent)).join("\n");
 	const wide = block(p3, "    ");
 	return `${selector} {\n${block(srgb, "  ")}\n}\n${wide ? `\n@media (color-gamut: p3) {\n  ${selector} {\n${wide}\n  }\n}\n` : ""}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
@@ -60,6 +60,10 @@
       "types": "./dist/file-explorer/index.d.ts",
       "import": "./dist/file-explorer/index.js"
     },
+    "./access": {
+      "types": "./dist/access/index.d.ts",
+      "import": "./dist/access/index.js"
+    },
     "./ai": {
       "types": "./dist/ai/index.d.ts",
       "import": "./dist/ai/index.js"
@@ -98,7 +102,7 @@
     "clsx": "^2.1.1",
     "css-tree": "^3.2.1",
     "dequal": "^2.0.3",
-    "katex": "^0.16.27",
+    "katex": "^0.19.0",
     "lucide-react": "1.52.0",
     "luxon": "^3.7.2",
     "react-zoom-pan-pinch": "^4.2.0",