@parallelworks/ui 0.50.0 → 0.52.0

package/dist/theme/derive.d.ts

@@ -1,5 +1,5 @@
 import { type CodeStyle, 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-muted', '--theme-error', '--theme-error-muted', '--theme-warning', '--theme-warning-muted', '--theme-info', '--theme-info-muted', '--theme-favorite', '--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 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>;
 /** The tokens the sidebar owns. A host's chrome may supply its own fallbacks, so the stylesheet gives them no defaults. */

package/dist/theme/derive.js

@@ -23,14 +23,24 @@ var THEME_TOKENS = [
 	"--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",
@@ -131,7 +141,7 @@ function targets(k) {
 			50,
 			65
 		]),
-		focus: { wcag: byContrast(k, [
+		graphic: { wcag: byContrast(k, [
 			3,
 			3,
 			4.5
@@ -141,9 +151,14 @@ function targets(k) {
 			2.2,
 			3
 		]) },
-		onAccent: { wcag: 4.5 }
+		label: { wcag: 4.5 }
 	};
 }
+var WHITE = {
+	l: 1,
+	c: 0,
+	h: 0
+};
 var STATUS = {
 	success: 150,
 	error: 27,
@@ -217,7 +232,7 @@ function build(scheme, options) {
 	const t = targets(k);
 	const paints = {};
 	const checks = [];
-	const hexOf = (d) => typeof d === "string" ? toHex(paints[d].color) : compositeHex(paints[d.fill], paints[d.over]);
+	const hexOf = (d) => typeof d === "string" ? toHex(paints[d].color) : "fixed" in d ? toHex(d.fixed) : compositeHex(paints[d.fill], paints[d.over]);
 	const set = (token, color, alpha) => {
 		paints[token] = alpha === void 0 ? { color } : {
 			color,
@@ -287,7 +302,7 @@ function build(scheme, options) {
 		"--theme-app-bg",
 		"--theme-panel-bg",
 		"--theme-input-bg"
-	], t.focus), dark ? .35 : .25);
+	], t.graphic), dark ? .35 : .25);
 	solved("--theme-border-strong", border, [
 		"--theme-app-bg",
 		"--theme-panel-bg",
@@ -303,18 +318,21 @@ function build(scheme, options) {
 		l: white ? 1 : 0,
 		c: 0,
 		h: 0
-	}, ["--theme-accent", "--theme-accent-hover"], t.onAccent);
+	}, ["--theme-accent", "--theme-accent-hover"], t.label);
 	const mutedAlpha = dark ? .15 : .1;
+	const statusOn = [
+		"--theme-app-bg",
+		"--theme-panel-bg",
+		"--theme-panel-hover",
+		"--theme-muted-panel-bg",
+		"--theme-hover",
+		"--theme-input-bg"
+	];
 	for (const [name, hue] of Object.entries(STATUS)) {
 		const token = `--theme-${name}`;
 		const muted = `--theme-${name}-muted`;
-		const plain = [
-			"--theme-app-bg",
-			"--theme-panel-bg",
-			"--theme-muted-panel-bg"
-		];
 		const on = [
-			...plain,
+			...statusOn,
 			{
 				fill: muted,
 				over: "--theme-app-bg"
@@ -324,18 +342,24 @@ function build(scheme, options) {
 				over: "--theme-panel-bg"
 			}
 		];
-		let color = solve({
-			l: dark ? .75 : .55,
-			c: .17,
+		let vivid = solve({
+			l: dark ? .7 : .66,
+			c: .2,
 			h: hue
-		}, plain.map(hexOf), t.secondary);
+		}, statusOn.map(hexOf), t.graphic);
 		for (let round = 0; round < 6; round++) {
-			set(muted, color, mutedAlpha);
-			const next = solve(color, on.map(hexOf), t.secondary);
-			if (next === color) break;
-			color = next;
+			set(muted, vivid, mutedAlpha);
+			const next = solve(vivid, on.map(hexOf), t.graphic);
+			if (next === vivid) break;
+			vivid = next;
 		}
-		keep(token, color, on, t.secondary);
+		keep(token, vivid, on, t.graphic);
+		solved(`--theme-${name}-text`, {
+			l: dark ? .75 : .55,
+			c: .17,
+			h: hue
+		}, on, t.secondary);
+		solved(`--theme-${name}-solid`, vivid, [{ fixed: WHITE }], t.label);
 	}
 	const sidebarBase = scheme.sidebar?.base ? oklch(scheme.sidebar.base) : neutral(dark ? Math.max(.08, base.l - .035 * s) : base.l - .035 * s);
 	const sidebarAccent = scheme.sidebar?.accent ? oklch(scheme.sidebar.accent) : accent;
@@ -431,6 +455,7 @@ function p3Overrides(paints, checks) {
 	const show = (token) => shown(paints[token].color, gamutOf(token));
 	const backdrop = (d) => {
 		if (typeof d === "string") return show(d);
+		if ("fixed" in d) return shown(d.fixed, "srgb");
 		const fill = paints[d.fill];
 		return over(show(d.fill), fill.alpha ?? 1, rendered(paints[d.over].color, gamutOf(d.over)));
 	};
@@ -443,7 +468,7 @@ function p3Overrides(paints, checks) {
 				changed = true;
 				if (passes(check)) continue;
 			}
-			for (const d of check.on) for (const token of typeof d === "string" ? [d] : [d.fill, d.over]) changed = wide.delete(token) || changed;
+			for (const d of check.on) for (const token of typeof d === "string" ? [d] : "fixed" in d ? [] : [d.fill, d.over]) changed = wide.delete(token) || changed;
 		}
 		if (!changed) break;
 	}

package/dist/theme/fit.js

@@ -19,10 +19,16 @@ var FLOORS = {
 	"--theme-placeholder": ["--theme-input-bg", 3],
 	"--theme-focus": ["--theme-app-bg", 3],
 	"--theme-accent-text": ["--theme-accent", 4.5],
-	"--theme-success": ["--theme-app-bg", 4.5],
-	"--theme-error": ["--theme-app-bg", 4.5],
-	"--theme-warning": ["--theme-app-bg", 4.5],
-	"--theme-info": ["--theme-app-bg", 4.5],
+	"--theme-success": ["--theme-app-bg", 3],
+	"--theme-success-text": ["--theme-app-bg", 4.5],
+	"--theme-error": ["--theme-app-bg", 3],
+	"--theme-error-text": ["--theme-app-bg", 4.5],
+	"--theme-warning": ["--theme-app-bg", 3],
+	"--theme-warning-text": ["--theme-app-bg", 4.5],
+	"--theme-info": ["--theme-app-bg", 3],
+	"--theme-info-text": ["--theme-app-bg", 4.5],
+	"--theme-favorite": ["--theme-app-bg", 3],
+	"--theme-favorite-text": ["--theme-app-bg", 4.5],
 	"--theme-sidebar-text": ["--theme-sidebar-bg", 4.5],
 	"--theme-sidebar-active-text": ["--theme-sidebar-active-bg", 4.5],
 	"--theme-code-text": ["--theme-code-bg", 4.5],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.50.0",
+  "version": "0.52.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": {

package/dist/components/Breadcrumbs.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-export interface IBreadcrumbItem {
-    label: string;
-    href?: string;
-    newWindow?: boolean;
-}
-interface BreadcrumbContextType {
-    breadcrumbs: IBreadcrumbItem[];
-    setBreadcrumbs: (breadcrumbs: IBreadcrumbItem[]) => void;
-    rightsideBreadcrumb?: IBreadcrumbItem | null;
-    setRightsideBreadcrumb: (breadcrumb: IBreadcrumbItem | null) => void;
-    hidden: boolean;
-    setHidden: (hidden: boolean) => void;
-    /** Null whenever the breadcrumb strip isn't rendered (classic chrome). */
-    titleActionSlot: HTMLElement | null;
-    setTitleActionSlot: (el: HTMLElement | null) => void;
-    rightActionSlot: HTMLElement | null;
-    setRightActionSlot: (el: HTMLElement | null) => void;
-    /** Pathname whose breadcrumbs a page set itself, so layouts leave it alone. */
-    claimedPath: React.MutableRefObject<string | null>;
-}
-export declare const useBreadcrumb: () => BreadcrumbContextType;
-export declare function BreadcrumbProvider({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function useSetBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;
-/**
- * For layout routes that derive breadcrumbs from the URL: applies them only
- * while no page under the layout has set its own for the current path.
- * Without this, a layout re-running its effect (for example when the
- * organization's display name loads) overwrote the page's breadcrumbs.
- */
-export declare function useSetDefaultBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;
-/** For pages that render their own header instead of the breadcrumb strip. */
-export declare function useClearBreadcrumbs(): void;
-export declare function useHideBreadcrumbs(hidden: boolean): void;
-export {};

package/dist/components/Breadcrumbs.js

@@ -1,90 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
-//#region src/components/Breadcrumbs.tsx
-var BreadcrumbContext = createContext({
-	breadcrumbs: [],
-	setBreadcrumbs: () => {},
-	rightsideBreadcrumb: null,
-	setRightsideBreadcrumb: () => {},
-	hidden: false,
-	setHidden: () => {},
-	titleActionSlot: null,
-	setTitleActionSlot: () => {},
-	rightActionSlot: null,
-	setRightActionSlot: () => {},
-	claimedPath: { current: null }
-});
-var useBreadcrumb = () => useContext(BreadcrumbContext);
-function BreadcrumbProvider({ children }) {
-	const [breadcrumbs, setBreadcrumbs] = React.useState([]);
-	const [rightsideBreadcrumb, setRightsideBreadcrumb] = React.useState(null);
-	const [hidden, setHidden] = React.useState(false);
-	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
-	const [rightActionSlot, setRightActionSlot] = React.useState(null);
-	const claimedPath = React.useRef(null);
-	const value = useMemo(() => ({
-		breadcrumbs,
-		setBreadcrumbs,
-		rightsideBreadcrumb,
-		setRightsideBreadcrumb,
-		hidden,
-		setHidden,
-		titleActionSlot,
-		setTitleActionSlot,
-		rightActionSlot,
-		setRightActionSlot,
-		claimedPath
-	}), [
-		breadcrumbs,
-		rightsideBreadcrumb,
-		hidden,
-		titleActionSlot,
-		rightActionSlot
-	]);
-	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
-		value,
-		children
-	});
-}
-function useSetBreadcrumbs(getBreadcrumbs) {
-	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
-	useLayoutEffect(() => {
-		claimedPath.current = window.location.pathname;
-		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
-	}, [
-		getBreadcrumbs,
-		setBreadcrumbs,
-		claimedPath
-	]);
-}
-/**
-* For layout routes that derive breadcrumbs from the URL: applies them only
-* while no page under the layout has set its own for the current path.
-* Without this, a layout re-running its effect (for example when the
-* organization's display name loads) overwrote the page's breadcrumbs.
-*/
-function useSetDefaultBreadcrumbs(getBreadcrumbs) {
-	const { setBreadcrumbs, claimedPath } = useBreadcrumb();
-	useLayoutEffect(() => {
-		if (claimedPath.current === window.location.pathname) return;
-		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
-	}, [
-		getBreadcrumbs,
-		setBreadcrumbs,
-		claimedPath
-	]);
-}
-var EMPTY_BREADCRUMBS = [];
-/** For pages that render their own header instead of the breadcrumb strip. */
-function useClearBreadcrumbs() {
-	useSetBreadcrumbs(EMPTY_BREADCRUMBS);
-}
-function useHideBreadcrumbs(hidden) {
-	const { setHidden } = useBreadcrumb();
-	useEffect(() => {
-		setHidden(hidden);
-		return () => setHidden(false);
-	}, [hidden, setHidden]);
-}
-//#endregion
-export { BreadcrumbProvider, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs };

package/dist/components/CopyToClipboard.d.ts

@@ -1,17 +0,0 @@
-interface ICopyToClipboardProps {
-    as?: 'div' | 'button';
-    text: string;
-    className?: string;
-    children?: React.ReactNode;
-    showIcon?: boolean;
-}
-export default function CopyToClipboard({ as, text, className, children, showIcon, }: ICopyToClipboardProps): import("react").JSX.Element;
-interface CopyCodeBlockProps {
-    textToCopy: string;
-    children: React.ReactNode;
-    secret?: boolean;
-    isRevealed?: boolean;
-    onRevealToggle?: () => void;
-}
-export declare function CopyCodeBlock({ textToCopy, children, secret, isRevealed, onRevealToggle, }: CopyCodeBlockProps): import("react").JSX.Element;
-export {};

package/dist/components/CopyToClipboard.js

@@ -1,66 +0,0 @@
-import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { useStrings } from "./Provider.js";
-import { useCopy } from "./useCopy.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/CopyToClipboard.tsx
-function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
-	const { common } = useStrings();
-	const { copy } = useCopy();
-	const handleCopy = () => void copy(text);
-	return /* @__PURE__ */ jsxs(as, {
-		className,
-		onClick: handleCopy,
-		...as === "button" ? { type: "button" } : {
-			role: "button",
-			"aria-label": common.copy,
-			tabIndex: 0,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleCopy();
-				}
-			}
-		},
-		children: [showIcon && /* @__PURE__ */ jsx(CopyIcon, {}), children]
-	});
-}
-function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
-	const { common } = useStrings();
-	const { copy, copied } = useCopy();
-	const handleCopy = () => {
-		if (!copied) copy(textToCopy);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "group relative",
-		role: "none",
-		onClick: handleCopy,
-		children: [/* @__PURE__ */ jsx("pre", {
-			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
-			children
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "absolute top-0 right-0 bottom-0 flex items-center gap-1 pl-8 pr-2 bg-gradient-to-l from-[var(--color-panel)] from-70% to-transparent rounded-r-lg",
-			children: [secret && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					onRevealToggle?.();
-				},
-				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": isRevealed ? common.hideValue : common.showValue,
-				title: isRevealed ? common.hideValue : common.showValue,
-				children: isRevealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					handleCopy();
-				},
-				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": copied ? common.copied : common.copyToClipboard,
-				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
-			})]
-		})]
-	});
-}
-//#endregion
-export { CopyCodeBlock, CopyToClipboard as default };

package/dist/components/Sort.d.ts

@@ -1,9 +0,0 @@
-export type TDirection = 'ascending' | 'descending' | 'unsorted';
-declare function Sort<T extends string>({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection, }: {
-    currentlySorted: T | null;
-    name: NoInfer<T>;
-    setCurrentDirection: (direction: TDirection) => void;
-    setCurrentlySorted: (value: NoInfer<T> | '') => void;
-    currentDirection: TDirection;
-}): import("react").JSX.Element;
-export default Sort;

package/dist/components/Sort.js

@@ -1,42 +0,0 @@
-import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
-import { useStrings } from "./Provider.js";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/Sort.tsx
-var SortIcon = ({ currentlySorted, currentDirection, name }) => {
-	const style = { transform: "translateY(2px)" };
-	if (currentlySorted === name) {
-		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(SortDownIcon, { style });
-		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(SortUpIcon, { style });
-	} else return /* @__PURE__ */ jsx(SortUnsortedIcon, { style });
-	return null;
-};
-function Sort({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection }) {
-	const t = useStrings().common;
-	const sort = (sorted, direction) => {
-		if (sorted === name) {
-			if (direction === "ascending") setCurrentDirection("descending");
-			else if (direction === "descending") {
-				setCurrentDirection("unsorted");
-				setCurrentlySorted("");
-			}
-		} else {
-			setCurrentDirection("ascending");
-			setCurrentlySorted(name);
-		}
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: "inline",
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": t.sort,
-			onClick: () => sort(currentlySorted, currentDirection),
-			children: /* @__PURE__ */ jsx(SortIcon, {
-				currentDirection,
-				currentlySorted,
-				name
-			})
-		})
-	});
-}
-//#endregion
-export { Sort as default };