@parallelworks/ui 0.45.0 → 0.46.0

package/README.md

@@ -300,8 +300,8 @@ root:
 
 | Variable            | Meaning                                                                 |
 | ------------------- | ----------------------------------------------------------------------- |
-| `--app-inset-top`   | The height of a fixed top bar. A drawer starts below it.                |
-| `--app-inset-start` | The width of a fixed sidebar on the start side. A drawer at its widest leaves that strip, and never less than 2.5rem. |
+| `--app-inset-top`   | The height of a fixed top bar. Drawers and toasts start below it.       |
+| `--app-inset-start` | The width of a fixed sidebar on the start side. Toasts center over the page beside it, and a drawer at its widest leaves that strip, and never less than 2.5rem. Update it when the sidebar collapses. |
 
 ```ts
 document.documentElement.style.setProperty('--app-inset-top', '56px')
@@ -340,7 +340,7 @@ name is a meaning, such as `RetryIcon` or `WarningIcon`, drawn from
 stroke. Don't import `lucide-react` directly: a name here keeps one glyph per
 meaning across the apps.
 
-- **Size and colour:** an icon is `1em` square in `currentColor`, so it follows
+- **Size and color:** an icon is `1em` square in `currentColor`, so it follows
   the text around it. A class such as `size-4` or `h-3 w-3` sets another size,
   and `size` takes pixels.
 - **Accessibility:** an icon is decoration, hidden from assistive technology,
@@ -362,7 +362,7 @@ meaning across the apps.
 
 Logos of other companies' products, such as `GitHubIcon` or `UbuntuIcon`, are
 in `@parallelworks/ui/brand-icons`. They take the same props, are filled in the
-text's colour, and are only for naming the product. They come from Simple Icons
+text's color, and are only for naming the product. They come from Simple Icons
 (CC0) and Bootstrap Icons (MIT), and the file carries their notices.
 
 The `UI/Icons` story shows every icon and logo by name.

package/dist/ai/agent/permissions.d.ts

@@ -6,7 +6,7 @@ export declare const DEFAULT_PERMISSION_MODE: PermissionMode;
 export declare function isNamedPermissionMode(mode: string | undefined): mode is NamedPermissionMode;
 /** The daemon clamps a remote request to its owner's remoteMaxPermissionMode
  *  and refuses a mode it does not know, so a menu offers only what that
- *  machine will honour. */
+ *  machine will honor. */
 export declare function permissionModesUpTo(ceiling: string | undefined, accepted?: readonly string[] | undefined): PermissionMode[];
 export declare function clampPermissionMode(mode: PermissionMode, ceiling: string | undefined, accepted?: readonly string[] | undefined): PermissionMode;
 export {};

package/dist/ai/agent/permissions.js

@@ -26,7 +26,7 @@ var LEGACY_PERMISSION_MODES = [
 ];
 /** The daemon clamps a remote request to its owner's remoteMaxPermissionMode
 *  and refuses a mode it does not know, so a menu offers only what that
-*  machine will honour. */
+*  machine will honor. */
 function permissionModesUpTo(ceiling, accepted = void 0) {
 	const max = isNamedPermissionMode(ceiling) ? PERMISSION_RANK[ceiling] : PERMISSION_RANK[DEFAULT_PERMISSION_MODE];
 	const known = accepted?.length ? accepted : LEGACY_PERMISSION_MODES;

package/dist/ai/ai.css

@@ -55,7 +55,7 @@
   padding: 0.125em 0.375em;
   background-color: color-mix(in oklab, var(--theme-app, #000) 8%, transparent);
   border-radius: 0.25rem;
-  /* Identifiers carry a colour of their own so they read as code at a glance
+  /* Identifiers carry a color of their own so they read as code at a glance
    * without the weight the plugin gives them: the theme's link blue, which
    * every palette already keeps legible on its surfaces. */
   color: var(--theme-link, #2f6fa8);
@@ -248,7 +248,7 @@
    explicitly to ensure correct colors in all modes.
    See: https://shiki.style/guide/dual-themes#class-based-dark-mode */
 
-/* Light mode: the primary Shiki theme's colours (--sdm-c) on the block's own
+/* Light mode: the primary Shiki theme's colors (--sdm-c) on the block's own
    surface, which stands in for the theme's background. */
 .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
@@ -259,7 +259,7 @@
   color: var(--sdm-c, inherit);
 }
 
-/* Dark mode: the --shiki-dark colours, again on the block's surface. */
+/* Dark mode: the --shiki-dark colors, again on the block's surface. */
 .dark .markdown [data-streamdown="code-block-body"] pre {
   /* biome-ignore lint/complexity/noImportantStyles: the highlighter sets the background as an inline style */
   background-color: transparent !important;
@@ -369,7 +369,7 @@
 
 /* The composer is one surface lifted off the page: a hairline of the ink for
  * its edge, and a short, soft shadow that deepens while it has focus. The
- * shadow is black on every scheme; an ink-coloured one would glow on dark. */
+ * shadow is black on every scheme; an ink-colored one would glow on dark. */
 .chat-composer {
   box-shadow:
     0 0 0 1px color-mix(in oklab, var(--theme-app, #000) 12%, transparent),

package/dist/ai/components/ChatStage.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 /** Where a new conversation starts: the heading and the composer together, a
- *  little above centre, with what the surface offers next under the box. The
+ *  little above center, with what the surface offers next under the box. The
  *  composer keeps its place however much is under it, so surfaces that share
  *  the stage put it in the same spot; a long list scrolls instead. */
 export default function ChatStage({ heading, subheading, children, }: {

package/dist/ai/components/ChatStage.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/components/ChatStage.tsx
 /** Where a new conversation starts: the heading and the composer together, a
-*  little above centre, with what the surface offers next under the box. The
+*  little above center, with what the surface offers next under the box. The
 *  composer keeps its place however much is under it, so surfaces that share
 *  the stage put it in the same spot; a long list scrolls instead. */
 function ChatStage({ heading, subheading, children }) {

package/dist/ai/core/pasteLanguage.d.ts

@@ -1,5 +1,5 @@
 /** The highlighter's name for the language a paste is written in, or ''
- *  when it is not recognisably one. */
+ *  when it is not recognizably one. */
 export declare function guessPasteLanguage(text: string): string;
 /** The paste as a fenced code block in its language. The fence outruns any
  *  run of backticks inside the paste, so nothing in it can close the fence. */

package/dist/ai/core/pasteLanguage.js

@@ -17,7 +17,7 @@ function isJson(trimmed) {
 var YAML_LINE = /^\s*(-\s+)?["']?[\w./-]+["']?\s*:(\s|$)|^\s*-(\s|$)|^---\s*$/;
 var TOML_LINE = /^\s*\[{1,2}[\w."-]+\]{1,2}\s*$|^\s*[\w."-]+\s*=\s*\S/;
 /** The highlighter's name for the language a paste is written in, or ''
-*  when it is not recognisably one. */
+*  when it is not recognizably one. */
 function guessPasteLanguage(text) {
 	const trimmed = text.trim();
 	if (!trimmed) return "";

package/dist/brandIcons.js

@@ -25,7 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * Each logo is its owner's trademark; use one only to refer to its product.
 */
-/** A one-colour logo in the text's colour, at the text's size. */
+/** A one-color logo in the text's color, at the text's size. */
 function brand(viewBox, ...paths) {
 	function Icon({ title, size = "1em", color = "currentColor", strokeWidth: _strokeWidth, absoluteStrokeWidth: _absoluteStrokeWidth, nonScalingStroke: _nonScalingStroke, children, ...props }) {
 		const named = Boolean(title || props["aria-label"] || props["aria-labelledby"]);

package/dist/components/Loader.d.ts

@@ -5,7 +5,7 @@ export interface LoaderProps {
      *  loader is named with the provider's `loading` string. */
     label?: string | undefined;
     variant?: 'spinner' | 'logo';
-    /** Sits in a line of text or a button instead of centring in its own row. */
+    /** Sits in a line of text or a button instead of centering in its own row. */
     inline?: boolean;
     /** The spinner's color, such as `currentColor` inside a button. */
     color?: string | undefined;

package/dist/components/Provider.d.ts

@@ -406,7 +406,7 @@ export interface UIStrings {
             failedTitle: string;
             unknownTitle: string;
             unknownShort: string;
-            cancelled: string;
+            canceled: string;
             completed: string;
             failed: string;
             totalSize: string;
@@ -417,9 +417,9 @@ export interface UIStrings {
             expandDetails: string;
             minimizeDetails: string;
             sessionNotQueued: (id: string, status: string) => string;
-            allCancelled: (count: number) => string;
+            allCanceled: (count: number) => string;
             someUploaded: (count: number) => string;
-            someCancelled: (count: number) => string;
+            someCanceled: (count: number) => string;
             allUploaded: string;
             failedSummary: (failed: number, total: number) => string;
             failReasonGeneric: string;

package/dist/components/Provider.js

@@ -404,7 +404,7 @@ var DEFAULTS = {
 				failedTitle: "Upload Failed",
 				unknownTitle: "Unknown Status",
 				unknownShort: "Unknown",
-				cancelled: "Cancelled",
+				canceled: "Canceled",
 				completed: "Completed",
 				failed: "Failed",
 				totalSize: "Total size:",
@@ -414,9 +414,9 @@ var DEFAULTS = {
 				expandDetails: "Expand details",
 				minimizeDetails: "Minimize details",
 				sessionNotQueued: (id, status) => `Upload session with ID ${id} is not queued, current status is ${status}`,
-				allCancelled: (count) => `All ${count} file(s) were cancelled by user.`,
+				allCanceled: (count) => `All ${count} file(s) were canceled by user.`,
 				someUploaded: (count) => `${count} file(s) uploaded successfully!`,
-				someCancelled: (count) => `${count} file(s) cancelled by user.`,
+				someCanceled: (count) => `${count} file(s) canceled by user.`,
 				allUploaded: "Upload file(s) successfully!",
 				failedSummary: (failed, total) => `${failed}/${total} files failed to upload:`,
 				failReasonGeneric: "The file(s) may be too large or the connection may have been interrupted.",

package/dist/components/StatusBadge.d.ts

@@ -9,14 +9,14 @@ interface StatusBadgeProps {
     variant?: BadgeVariant;
     /** Show animated pulse indicator */
     pulse?: boolean;
-    /** Show a still indicator in the variant's colour */
+    /** Show a still indicator in the variant's color */
     dot?: boolean;
     /** Size */
     size?: 'sm' | 'md';
     /** Additional class */
     className?: string;
 }
-/** A line of text in a variant's colour, for a status that stands beside a
+/** A line of text in a variant's color, for a status that stands beside a
  *  dot rather than inside a badge. */
 export declare function statusTextClass(variant: BadgeVariant): string;
 export declare function StatusBadge({ children, variant, pulse, dot, size, className, }: StatusBadgeProps): import("react").JSX.Element;

package/dist/components/StatusBadge.js

@@ -2,7 +2,7 @@ import { cx } from "../cx.js";
 import { toneFill, toneSurface, toneText } from "./tone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/StatusBadge.tsx
-/** A line of text in a variant's colour, for a status that stands beside a
+/** A line of text in a variant's color, for a status that stands beside a
 *  dot rather than inside a badge. */
 function statusTextClass(variant) {
 	return toneText[variant];

package/dist/components/Toast.js

@@ -135,7 +135,7 @@ function ToastViewport() {
 	return /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
 		"data-toast-viewport": "",
 		"aria-label": common.notifications,
-		className: "fixed inset-x-0 top-3 z-(--layer-toast) mx-auto w-[calc(100vw-2rem)] outline-none sm:w-96",
+		className: "fixed top-[calc(var(--app-inset-top,0px)+0.75rem)] right-0 left-(--app-inset-start,0px) z-(--layer-toast) mx-auto w-[calc(100vw-var(--app-inset-start,0px)-2rem)] outline-none sm:w-96",
 		children: /* @__PURE__ */ jsx(ToastList, {})
 	}) });
 }

package/dist/components/comboboxItems.d.ts

@@ -15,7 +15,7 @@ export interface ComboboxGroup<Value = string> {
     /** Empty for a group that only reports a status; a search finds it by its heading. */
     items: readonly ComboboxLeaf<Value>[];
 }
-/** One item: an option, or a bare string labelled by its value. */
+/** One item: an option, or a bare string labeled by its value. */
 export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
 /** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
 export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];

package/dist/components/tone.d.ts

@@ -1,4 +1,4 @@
-/** How a status reads: its colours come from the theme's tone tokens, so every
+/** How a status reads: its colors come from the theme's tone tokens, so every
  *  theme, dark ones included, sets them once. */
 export type Tone = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
 /** Text in the tone, for a status line beside a dot or icon. */

package/dist/editing.d.ts

@@ -320,7 +320,7 @@ export type SettingsYamlProblem = {
 /** A key or list index on the way down to a YAML node. */
 export type YamlSegment = string | number;
 type UnknownRecord = Record<string, unknown>;
-/** One input a built-in action takes in its step's `with`, labelled in the reader's language. */
+/** One input a built-in action takes in its step's `with`, labeled in the reader's language. */
 export interface WorkflowActionInput {
     key: string;
     kind: 'text' | 'textarea' | 'number' | 'any' | 'list' | 'bool' | 'choice' | 'flags' | 'target';

package/dist/file-explorer/FileExplorerContext.js

@@ -107,7 +107,7 @@ function FileExplorerProvider({ children }) {
 		const fileProgress = session.progress.allFiles.get(relativePath);
 		if (fileProgress?.abortController && (fileProgress.status === "pending" || fileProgress.status === "uploading")) {
 			fileProgress.abortController.abort();
-			updateFileProgressInUploadSession(session, relativePath, { status: "cancelled" });
+			updateFileProgressInUploadSession(session, relativePath, { status: "canceled" });
 		}
 	};
 	const handleSessionCancel = (session) => {
@@ -116,12 +116,12 @@ function FileExplorerProvider({ children }) {
 				fileProgress.abortController.abort();
 				session.progress?.allFiles?.set(relativePath, {
 					...fileProgress,
-					status: "cancelled"
+					status: "canceled"
 				});
 			}
 		});
 		session.abortController?.abort();
-		session.status = "cancelled";
+		session.status = "canceled";
 	};
 	const startUploadSession = async (sessionId) => {
 		const session = getUploadSessionById(sessionId);
@@ -157,7 +157,7 @@ function FileExplorerProvider({ children }) {
 			const results = await mapWithConcurrency(session.uploadNodes, UPLOAD_CONCURRENCY, async (node) => {
 				const fileProgress = session.progress?.allFiles?.get(node.relativePath);
 				if (!fileProgress) return;
-				if (fileProgress.status === "cancelled") throw new Error("Upload cancelled by user");
+				if (fileProgress.status === "canceled") throw new Error("Upload canceled by user");
 				updateFileProgressInUploadSession(session, node.relativePath, {
 					status: "uploading",
 					loadedBytes: 0,
@@ -172,11 +172,11 @@ function FileExplorerProvider({ children }) {
 				}
 				const input = uploadFileInput(session.storageName, objectPath, node.file);
 				const onProgress = (progress) => {
-					if (session.status === "cancelled" || !session.progress?.allFiles) return;
+					if (session.status === "canceled" || !session.progress?.allFiles) return;
 					const currentFileProgress = session.progress.allFiles.get(node.relativePath);
 					if (!currentFileProgress || [
 						"failed",
-						"cancelled",
+						"canceled",
 						"completed"
 					].includes(currentFileProgress.status ?? "")) return;
 					updateFileProgressInUploadSession(session, node.relativePath, {
@@ -205,8 +205,8 @@ function FileExplorerProvider({ children }) {
 					updateFileProgressInUploadSession(session, node.relativePath, { status: "completed" });
 				} catch (error) {
 					const errorMessage = error instanceof Error ? error.message : String(error ?? "");
-					const isCancelled = errorMessage.toLowerCase().includes("abort") || errorMessage.toLowerCase().includes("cancel");
-					updateFileProgressInUploadSession(session, node.relativePath, { status: isCancelled ? "cancelled" : "failed" });
+					const isCanceled = errorMessage.toLowerCase().includes("abort") || errorMessage.toLowerCase().includes("cancel");
+					updateFileProgressInUploadSession(session, node.relativePath, { status: isCanceled ? "canceled" : "failed" });
 					toast.update(sessionId, {
 						message: progressToast({
 							...session,
@@ -218,7 +218,7 @@ function FileExplorerProvider({ children }) {
 							}
 						}),
 						icon: false,
-						dismissible: session.status === "failed" || session.status === "cancelled",
+						dismissible: session.status === "failed" || session.status === "canceled",
 						timeout: false
 					});
 					throw error;
@@ -267,12 +267,12 @@ function FileExplorerProvider({ children }) {
 			else if (abortedCount > 0 && successfulCount > 0) toast.update(sessionId, {
 				message: /* @__PURE__ */ jsxs("div", {
 					className: "w-full flex flex-col gap-1",
-					children: [/* @__PURE__ */ jsx("div", { children: t.upload.someUploaded(successfulCount) }), /* @__PURE__ */ jsx("div", { children: t.upload.someCancelled(abortedCount) })]
+					children: [/* @__PURE__ */ jsx("div", { children: t.upload.someUploaded(successfulCount) }), /* @__PURE__ */ jsx("div", { children: t.upload.someCanceled(abortedCount) })]
 				}),
 				tone: "success"
 			});
 			else if (abortedCount > 0 && successfulCount === 0) toast.update(sessionId, {
-				message: t.upload.allCancelled(abortedCount),
+				message: t.upload.allCanceled(abortedCount),
 				tone: "info"
 			});
 			else toast.update(sessionId, {

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

@@ -34,7 +34,7 @@ function useObjectBlobUrl(url, { maxBytes, knownSize, mimeType, cacheKey }) {
 			});
 			return;
 		}
-		let cancelled = false;
+		let canceled = false;
 		const record = loadPreviewContent(cacheKey, async (signal) => {
 			const response = await fetchPreviewObject(cacheKey, url, signal);
 			const { bytes, tooLarge: exceeded } = await readCappedBytes(response, maxBytes);
@@ -52,17 +52,17 @@ function useObjectBlobUrl(url, { maxBytes, knownSize, mimeType, cacheKey }) {
 			loading: true
 		});
 		record.promise.then((result) => {
-			if (!cancelled) setState(toState(result));
+			if (!canceled) setState(toState(result));
 		}).catch((err) => {
 			if (err instanceof DOMException && err.name === "AbortError") return;
-			if (!cancelled) setState({
+			if (!canceled) setState({
 				...IDLE,
 				error: err instanceof Error ? err.message : "Failed to load file",
 				corsError: err instanceof CorsError
 			});
 		});
 		return () => {
-			cancelled = true;
+			canceled = true;
 		};
 	}, [
 		url,

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

@@ -60,7 +60,7 @@ function useObjectText(url, { maxBytes, maxLines, knownSize, cacheKey, tail = fa
 			});
 			return;
 		}
-		let cancelled = false;
+		let canceled = false;
 		const record = loadPreviewContent(key, (signal) => readObjectText(signal, {
 			url,
 			cacheKey,
@@ -74,17 +74,17 @@ function useObjectText(url, { maxBytes, maxLines, knownSize, cacheKey, tail = fa
 			loading: true
 		});
 		record.promise.then((result) => {
-			if (!cancelled) setState(toState(result));
+			if (!canceled) setState(toState(result));
 		}).catch((err) => {
 			if (err instanceof DOMException && err.name === "AbortError") return;
-			if (!cancelled) setState({
+			if (!canceled) setState({
 				...IDLE,
 				error: err instanceof Error ? err.message : "Failed to load file",
 				corsError: err instanceof CorsError
 			});
 		});
 		return () => {
-			cancelled = true;
+			canceled = true;
 		};
 	}, [
 		url,

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

@@ -46,7 +46,7 @@ function usePresignedUrl(node, getPresignedUrl, { enabled, linkErrorMessage }) {
 			});
 			return;
 		}
-		let cancelled = false;
+		let canceled = false;
 		const record = loadPreviewUrl(path, () => getUrlRef.current(node));
 		setState(record.value ? toState(record.value, linkErrorRef.current) : {
 			url: null,
@@ -54,16 +54,16 @@ function usePresignedUrl(node, getPresignedUrl, { enabled, linkErrorMessage }) {
 			error: null
 		});
 		record.promise.then((result) => {
-			if (!cancelled) setState(toState(result, linkErrorRef.current));
+			if (!canceled) setState(toState(result, linkErrorRef.current));
 		}).catch((err) => {
-			if (!cancelled) setState({
+			if (!canceled) setState({
 				url: null,
 				loading: false,
 				error: err instanceof Error ? err.message : linkErrorRef.current
 			});
 		});
 		return () => {
-			cancelled = true;
+			canceled = true;
 		};
 	}, [path]);
 	const cached = path ? peekPreviewUrl(path) : void 0;

package/dist/file-explorer/lib/types.d.ts

@@ -79,14 +79,14 @@ export interface UploadFileProgress {
     totalBytes?: number;
     percentage?: number;
     abortController?: AbortController;
-    status?: 'pending' | 'uploading' | 'completed' | 'failed' | 'cancelled';
+    status?: 'pending' | 'uploading' | 'completed' | 'failed' | 'canceled';
 }
 export interface UploadSession {
     id: string;
     storageName: string;
     targetPath: string;
     uploadNodes: UploadNode[];
-    status: 'queued' | 'uploading' | 'completed' | 'failed' | 'cancelled';
+    status: 'queued' | 'uploading' | 'completed' | 'failed' | 'canceled';
     queueIndex: number;
     client: IFileExplorerClient;
     provider: IFileExplorerProvider;

package/dist/file-explorer/toasts.js

@@ -42,9 +42,9 @@ function getSessionStatusInfo(session, queueLength, strings) {
 		};
 	}
 }
-function barTone({ isCompleted, isCancelled, isFailed }) {
+function barTone({ isCompleted, isCanceled, isFailed }) {
 	if (isCompleted) return "success";
-	if (isCancelled) return "muted";
+	if (isCanceled) return "muted";
 	return isFailed ? "error" : "accent";
 }
 function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
@@ -55,9 +55,9 @@ function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
 	const loadedBytes = fileProgress.loadedBytes || 0;
 	const totalBytes = fileProgress.fileSizeBytes || fileProgress.totalBytes || 0;
 	const isCompleted = percentage === 100 || fileProgress.status === "completed";
-	const isCancelled = fileProgress.status === "cancelled";
+	const isCanceled = fileProgress.status === "canceled";
 	const isFailed = fileProgress.status === "failed";
-	const isSettled = isCompleted || isCancelled || isFailed;
+	const isSettled = isCompleted || isCanceled || isFailed;
 	const canCancel = !!fileProgress.abortController && !isSettled;
 	const stop = (e, then) => {
 		e.stopPropagation();
@@ -71,11 +71,11 @@ function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
 				value: percentage,
 				tone: barTone({
 					isCompleted,
-					isCancelled,
+					isCanceled,
 					isFailed
 				}),
 				label: fileName,
-				status: isCancelled ? strings.cancelled : isCompleted ? strings.completed : isFailed ? strings.failed : void 0,
+				status: isCanceled ? strings.canceled : isCompleted ? strings.completed : isFailed ? strings.failed : void 0,
 				detail: !isSettled && totalBytes > 0 ? `${formatBytes(loadedBytes)} / ${formatBytes(totalBytes)}` : void 0
 			}),
 			!showCancelConfirm && canCancel && /* @__PURE__ */ jsx(IconButton, {
@@ -120,14 +120,14 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 	const statusInfo = getSessionStatusInfo(session, queueLength, strings);
 	const targetPath = `${session.targetPath}/`;
 	const isCompleted = session.status === "completed";
-	const isCancelled = session.status === "cancelled";
+	const isCanceled = session.status === "canceled";
 	const isFailed = session.status === "failed";
-	const isUploading = !isCompleted && !isCancelled && !isFailed;
+	const isUploading = !isCompleted && !isCanceled && !isFailed;
 	const totalProgress = session.progress?.overallProgress || 0;
 	const totalSize = session.progress?.totalSizeBytes || 0;
 	const sessionTone = barTone({
 		isCompleted,
-		isCancelled,
+		isCanceled,
 		isFailed
 	});
 	const allFiles = session.progress?.allFiles ? Array.from(session.progress.allFiles.values()) : [];

package/dist/form/utils/fieldItems.d.ts

@@ -17,7 +17,7 @@ export interface FieldOptionGroup<Value = string> {
     category?: string | undefined;
     options: readonly (FieldOptionItem<Value> | string)[];
 }
-/** A dropdown option: a bare string is a choice labelled by its value. */
+/** A dropdown option: a bare string is a choice labeled by its value. */
 export type FieldOption<Value = string> = string | FieldOptionItem<Value> | FieldOptionGroup<Value>;
 /** A picker item that also sets other fields when chosen, through `secondaryField`. */
 export type ChoiceItem<Value = unknown> = ComboboxItem<Value> & {

package/dist/graph/SuggestionInput.d.ts

@@ -4,7 +4,7 @@ export interface Suggestion {
     value: string;
     label?: string | undefined;
 }
-/** A labelled suggestion shows its meaning, with the value it writes beneath. */
+/** A labeled suggestion shows its meaning, with the value it writes beneath. */
 export declare function suggestionItems(suggestions: Suggestion[]): ComboboxItem[];
 /** A field that takes any typed value, offering `suggestions` as it's typed. */
 export declare function SuggestionInput({ suggestions, ...props }: Omit<AutocompleteProps, 'items' | 'defaultValue'> & {

package/dist/graph/SuggestionInput.js

@@ -1,7 +1,7 @@
 import { Autocomplete } from "../components/Combobox.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/graph/SuggestionInput.tsx
-/** A labelled suggestion shows its meaning, with the value it writes beneath. */
+/** A labeled suggestion shows its meaning, with the value it writes beneath. */
 function suggestionItems(suggestions) {
 	return suggestions.map(({ value, label }) => label ? {
 		value,

package/dist/graph/editorPrimitives.d.ts

@@ -33,7 +33,7 @@ interface DragOptions {
     onMove?: (client: Point) => void;
     /** The release; `dragged` tells a drag from a click. */
     onEnd?: (client: Point, dragged: boolean) => void;
-    /** A cancelled pointer, or Escape when `escape` is on. */
+    /** A canceled pointer, or Escape when `escape` is on. */
     onCancel?: (dragged: boolean) => void;
     /** Escape cancels the press, and goes no further. */
     escape?: boolean;
@@ -42,7 +42,7 @@ interface DragOptions {
     /** The click after the release: swallowed always, only after a drag, or never. */
     swallowClick?: 'always' | 'drag' | 'never';
 }
-/** Follows a press from `start` until it's released or cancelled. */
+/** Follows a press from `start` until it's released or canceled. */
 export declare function trackDrag(start: Point, { onMove, onEnd, onCancel, escape: cancelOnEscape, holdText, swallowClick, }: DragOptions): void;
 export declare function place(box: Box): {
     left: number;

package/dist/graph/editorPrimitives.js

@@ -69,7 +69,7 @@ function suppressNextClick() {
 	window.addEventListener("click", swallow, true);
 	setTimeout(() => window.removeEventListener("click", swallow, true), 0);
 }
-/** Follows a press from `start` until it's released or cancelled. */
+/** Follows a press from `start` until it's released or canceled. */
 function trackDrag(start, { onMove, onEnd, onCancel, escape: cancelOnEscape = false, holdText, swallowClick = "never" }) {
 	let dragged = false;
 	const cleanup = () => {

package/dist/graph/editorStrings.d.ts

@@ -203,14 +203,14 @@ export declare const GRAPH_EDITOR_STRINGS: {
         default: string;
         always: string;
         failure: string;
-        cancelled: string;
+        canceled: string;
         success: string;
     };
     jobConditions: {
         default: string;
         always: string;
         failure: string;
-        cancelled: string;
+        canceled: string;
         success: string;
     };
     modeFromInput: string;

package/dist/graph/editorStrings.js

@@ -204,14 +204,14 @@ var GRAPH_EDITOR_STRINGS = {
 		default: "After the steps before it succeed",
 		always: "Always, even after a failure or a cancel",
 		failure: "Only after a step failed",
-		cancelled: "Only after the run was canceled",
+		canceled: "Only after the run was canceled",
 		success: "Only if nothing failed or was canceled"
 	},
 	jobConditions: {
 		default: "After the jobs it needs succeed",
 		always: "Always, whatever the jobs it needs did",
 		failure: "Only if a job it needs failed",
-		cancelled: "Only if a job it needs was canceled",
+		canceled: "Only if a job it needs was canceled",
 		success: "Only if every job it needs succeeded"
 	},
 	modeFromInput: "From an input",
@@ -620,8 +620,8 @@ var INPUTS_EDITOR_STRINGS = {
 		hidden: "Hide the field from the form; its default is still used. Use an expression to decide when.",
 		disabled: "Show the field but don’t let users change it. Use an expression to decide when.",
 		ignore: "Don’t pass this field’s value to the run. Use an expression to decide when.",
-		placeholder: "Grey hint text shown while the field is empty.",
-		prefillDefault: "Put the default in the field as its value. When off, the field starts empty and shows the default as grey hint text.",
+		placeholder: "Gray hint text shown while the field is empty.",
+		prefillDefault: "Put the default in the field as its value. When off, the field starts empty and shows the default as gray hint text.",
 		textarea: "Show a bigger box for several lines of text.",
 		minLength: "The fewest characters the value can have.",
 		maxLength: "The most characters the value can have.",

package/dist/graph/inputRefs.js

@@ -182,7 +182,7 @@ function FlagField({ label, yamlKey, description, value, original, fallback = fa
 var CONDITIONS = [
 	["always", "always"],
 	["failure()", "failure"],
-	["cancelled()", "cancelled"],
+	["canceled()", "canceled"],
 	["success()", "success"]
 ];
 /** When a job or step runs: any condition, typed, with the executor's status checks and the form's switches offered. */

package/dist/icons.js

@@ -3,7 +3,7 @@ import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRigh
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons.tsx
 var STROKE_WIDTH = 2;
-/** The text's size and colour by default, so a class such as `size-4` or a
+/** The text's size and color by default, so a class such as `size-4` or a
 *  parent's font size sets it. */
 function icon(Glyph, defaults) {
 	function Icon({ title, children, ...props }) {