@parallelworks/ui 0.54.0 → 0.56.0

package/dist/theme/derive.d.ts

@@ -17,6 +17,8 @@ export interface DeriveOptions {
 /** The surfaces placeholder and disabled text sit on: field boxes, and the bare inputs of
  *  search bars, menus and dialogs that take their surface's background. */
 export declare const PLACEHOLDER_ON: ThemeToken[];
+/** The surfaces a control's edge sits on: the page, panels, and the control's own fill. */
+export declare const CONTROL_ON: ThemeToken[];
 /** Every token as sRGB, plus display-p3 overrides that keep every contrast the sRGB output meets. */
 export declare function generateTheme(scheme: Scheme, options?: DeriveOptions): GeneratedTheme;
 /** Every `--theme-*` token for a scheme, in sRGB. */

package/dist/theme/derive.js

@@ -107,6 +107,13 @@ var PLACEHOLDER_ON = [
 	"--theme-panel-bg",
 	"--theme-muted-panel-bg"
 ];
+/** The surfaces a control's edge sits on: the page, panels, and the control's own fill. */
+var CONTROL_ON = [
+	"--theme-app-bg",
+	"--theme-panel-bg",
+	"--theme-muted-panel-bg",
+	"--theme-input-bg"
+];
 /** The roles' targets at a contrast. WCAG AA is the floor at every contrast. */
 function targets(k) {
 	const at = (wcag, apca) => ({
@@ -146,11 +153,6 @@ function targets(k) {
 			3,
 			4.5
 		]) },
-		control: { wcag: byContrast(k, [
-			1.6,
-			2.2,
-			3
-		]) },
 		label: { wcag: 4.5 }
 	};
 }
@@ -159,6 +161,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 +279,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", {
@@ -298,16 +312,13 @@ function build(scheme, options) {
 		"--theme-muted-panel-bg",
 		"--theme-hover"
 	], t.secondary);
-	set("--theme-focus-ring", solved("--theme-focus", accent, [
+	const focusOn = [
 		"--theme-app-bg",
 		"--theme-panel-bg",
 		"--theme-input-bg"
-	], t.graphic), dark ? .35 : .25);
-	solved("--theme-border-strong", border, [
-		"--theme-app-bg",
-		"--theme-panel-bg",
-		"--theme-input-bg"
-	], t.control);
+	];
+	set("--theme-focus-ring", solved("--theme-focus", accent, focusOn, meets(toHex(accent), focusOn.map(hexOf), t.graphic) ? t.graphic : { wcag: t.secondary.wcag }), dark ? .35 : .25);
+	solved("--theme-border-strong", border, CONTROL_ON, t.graphic);
 	set("--theme-accent", accent);
 	const white = contrastRatio("#ffffff", toHex(accent)) >= 4.5;
 	set("--theme-accent-hover", {
@@ -559,4 +570,4 @@ function themeStylesheet(selector, scheme, options = {}) {
 	return `${selector} {\n${block(srgb, "  ")}\n}\n${wide ? `\n@media (color-gamut: p3) {\n  ${selector} {\n${wide}\n  }\n}\n` : ""}`;
 }
 //#endregion
-export { PLACEHOLDER_ON, SIDEBAR_TOKENS, THEME_TOKENS, deriveTheme, generateTheme, themeStylesheet };
+export { CONTROL_ON, PLACEHOLDER_ON, SIDEBAR_TOKENS, THEME_TOKENS, deriveTheme, generateTheme, themeStylesheet };

package/package.json

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

package/dist/access/GroupPicker.d.ts

@@ -1,35 +0,0 @@
-import { type AccessModel } from './model.js';
-import type { AccessStrings } from './strings.js';
-import type { AccessGroup, AccessGroupDetails, AccessRole } from './types.js';
-export type DescribeGroup = (groupId: string, signal: AbortSignal) => Promise<AccessGroupDetails>;
-export type SearchGroups = (query: string, signal: AbortSignal) => Promise<readonly AccessGroup[]>;
-/** Details already loaded, kept for as long as the drawer is open. */
-export type DetailsCache = Map<string, AccessGroupDetails>;
-export declare function GroupTile({ everyone, className }: {
-    everyone: boolean;
-    className?: string;
-}): import("react").JSX.Element;
-interface GroupPickerProps {
-    model: AccessModel;
-    value: readonly string[];
-    onValueChange: (ids: string[]) => void;
-    /** The roles being granted, which the details weigh against what the group holds. */
-    granting: readonly AccessRole[];
-    resourceName: string;
-    describeGroup?: DescribeGroup | undefined;
-    searchGroups?: SearchGroups | undefined;
-    groupCount?: number | undefined;
-    recentGroupIds?: readonly string[] | undefined;
-    cache: DetailsCache;
-    /** Every group the picker has seen, by id, so a chosen one found by a search keeps its name. */
-    seen: Map<string, AccessGroup>;
-    id: string;
-    describedBy: string;
-    /** The drawer's body, above its footer, which the open list fills. */
-    boundary: Element | null;
-    t: AccessStrings;
-}
-/** The groups field: everyone pinned first, then recent groups, then all of them; a pane beside
- *  the list says who is in the highlighted group and what it holds here. */
-export declare function GroupPicker({ model, value, onValueChange, granting, resourceName, describeGroup, searchGroups, groupCount, recentGroupIds, cache, seen, id, describedBy, boundary, t, }: GroupPickerProps): import("react").JSX.Element;
-export {};