@parallelworks/ui 0.52.0 → 0.54.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

@@ -492,11 +492,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.52.0",
+  "version": "0.54.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": {
@@ -10,7 +10,9 @@
   },
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./src/editor/monacoFeatures.ts",
+    "./dist/editor/monacoFeatures.js"
   ],
   "exports": {
     ".": {
@@ -58,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"
@@ -96,6 +102,7 @@
     "clsx": "^2.1.1",
     "css-tree": "^3.2.1",
     "dequal": "^2.0.3",
+    "katex": "^0.16.27",
     "lucide-react": "1.52.0",
     "luxon": "^3.7.2",
     "react-zoom-pan-pinch": "^4.2.0",

package/dist/file-explorer/FilePreview/CodePreviewEditor.d.ts

@@ -1,6 +0,0 @@
-interface CodePreviewEditorProps {
-    value: string;
-    language: string;
-}
-export default function CodePreviewEditor({ value, language }: CodePreviewEditorProps): import("react").JSX.Element;
-export {};

package/dist/file-explorer/FilePreview/CodePreviewEditor.js

@@ -1,64 +0,0 @@
-import { useCssIsDark } from "../../components/useCssIsDark.js";
-import { defineEditorThemes, followThemeTokens, getThemeName } from "../../editor/themes.js";
-import { setupMonacoWorkers } from "../../editor/workers.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import * as monaco from "monaco-editor";
-//#region src/file-explorer/FilePreview/CodePreviewEditor.tsx
-var OPTIONS = {
-	readOnly: true,
-	domReadOnly: true,
-	automaticLayout: true,
-	minimap: { enabled: false },
-	scrollBeyondLastLine: false,
-	renderLineHighlight: "none",
-	overviewRulerLanes: 0,
-	hideCursorInOverviewRuler: true,
-	lineNumbers: "on",
-	wordWrap: "off",
-	fontSize: 12,
-	scrollbar: { alwaysConsumeMouseWheel: false }
-};
-setupMonacoWorkers();
-function CodePreviewEditor({ value, language }) {
-	const isDark = useCssIsDark();
-	const editorRef = useRef(null);
-	useEffect(() => {
-		return () => {
-			editorRef.current?.getModel()?.dispose();
-			editorRef.current?.dispose();
-			editorRef.current = null;
-		};
-	}, []);
-	useEffect(() => {
-		const model = editorRef.current?.getModel();
-		if (model && model.getValue() !== value) model.setValue(value);
-	}, [value]);
-	useEffect(() => {
-		const model = editorRef.current?.getModel();
-		if (model) monaco.editor.setModelLanguage(model, language);
-	}, [language]);
-	useEffect(() => {
-		if (editorRef.current) {
-			defineEditorThemes(monaco.editor);
-			monaco.editor.setTheme(getThemeName(isDark));
-		}
-		return followThemeTokens(monaco.editor, () => getThemeName(isDark));
-	}, [isDark]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "h-full w-full",
-		ref: (container) => {
-			if (container && !editorRef.current) {
-				defineEditorThemes(monaco.editor);
-				const model = monaco.editor.createModel(value, language);
-				editorRef.current = monaco.editor.create(container, {
-					...OPTIONS,
-					model
-				});
-				monaco.editor.setTheme(getThemeName(isDark));
-			}
-		}
-	});
-}
-//#endregion
-export { CodePreviewEditor as default };