@parallelworks/ui 0.55.0 → 0.57.0

package/dist/theme/derive.d.ts

@@ -1,5 +1,5 @@
 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 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-field', '--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. */
@@ -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

@@ -15,6 +15,7 @@ var THEME_TOKENS = [
 	"--theme-placeholder",
 	"--theme-link",
 	"--theme-border",
+	"--theme-border-field",
 	"--theme-border-strong",
 	"--theme-accent",
 	"--theme-accent-text",
@@ -107,6 +108,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,9 +154,9 @@ function targets(k) {
 			3,
 			4.5
 		]) },
-		control: { wcag: byContrast(k, [
-			1.6,
-			2.2,
+		field: { wcag: byContrast(k, [
+			1.3,
+			1.5,
 			3
 		]) },
 		label: { wcag: 4.5 }
@@ -310,16 +318,14 @@ 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);
+	solved("--theme-border-field", border, CONTROL_ON, t.field);
 	set("--theme-accent", accent);
 	const white = contrastRatio("#ffffff", toHex(accent)) >= 4.5;
 	set("--theme-accent-hover", {
@@ -571,4 +577,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.55.0",
+  "version": "0.57.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/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 {};