@parallelworks/ui 0.50.0 → 0.51.0

package/dist/components/tone.js

@@ -1,6 +1,15 @@
 //#region src/components/tone.ts
 /** Text in the tone, for a status line beside a dot or icon. */
 var toneText = {
+	default: "text-(--theme-app)",
+	success: "text-(--theme-success-text)",
+	warning: "text-(--theme-warning-text)",
+	error: "text-(--theme-error-text)",
+	info: "text-(--theme-info-text)",
+	muted: "text-(--theme-muted-text-color)"
+};
+/** An icon in the tone, through `currentColor`. */
+var toneIcon = {
 	default: "text-(--theme-app)",
 	success: "text-(--theme-success)",
 	warning: "text-(--theme-warning)",
@@ -11,13 +20,13 @@ var toneText = {
 /** A tinted surface with a border and text in the tone, for a badge or a callout. */
 var toneSurface = {
 	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
-	success: "bg-(--theme-success-muted) text-(--theme-success) border-(--theme-success)/25",
-	warning: "bg-(--theme-warning-muted) text-(--theme-warning) border-(--theme-warning)/25",
-	error: "bg-(--theme-error-muted) text-(--theme-error) border-(--theme-error)/25",
-	info: "bg-(--theme-info-muted) text-(--theme-info) border-(--theme-info)/25",
+	success: "bg-(--theme-success-muted) text-(--theme-success-text) border-(--theme-success)/25",
+	warning: "bg-(--theme-warning-muted) text-(--theme-warning-text) border-(--theme-warning)/25",
+	error: "bg-(--theme-error-muted) text-(--theme-error-text) border-(--theme-error)/25",
+	info: "bg-(--theme-info-muted) text-(--theme-info-text) border-(--theme-info)/25",
 	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
 };
-/** A solid fill in the tone, for a dot. */
+/** A solid fill in the tone, for a dot or a bar. */
 var toneFill = {
 	default: "bg-(--theme-app)",
 	success: "bg-(--theme-success)",
@@ -27,4 +36,4 @@ var toneFill = {
 	muted: "bg-(--theme-muted-text-color)"
 };
 //#endregion
-export { toneFill, toneSurface, toneText };
+export { toneFill, toneIcon, toneSurface, toneText };

package/dist/form/Wizard/WizardNavigation.js

@@ -33,7 +33,7 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 	};
 	return /* @__PURE__ */ jsxs("div", { children: [error && /* @__PURE__ */ jsxs("p", {
 		role: "alert",
-		className: "mb-3 flex items-center gap-1.5 text-sm text-(--theme-error)",
+		className: "mb-3 flex items-center gap-1.5 text-sm text-(--theme-error-text)",
 		children: [/* @__PURE__ */ jsx(WarningIcon, {
 			"aria-hidden": "true",
 			className: "size-4 shrink-0"

package/dist/form/Wizard/WizardStepIndicator.js

@@ -80,7 +80,7 @@ function StepItem({ number, title, description, status, onJump }) {
 				children: strings.stepDone
 			}),
 			status === "invalid" && /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-(--theme-error)",
+				className: "text-xs text-(--theme-error-text)",
 				children: strings.stepNeedsAttention
 			}),
 			description && /* @__PURE__ */ jsx("span", {

package/dist/graph/DependencyGraph.js

@@ -5,8 +5,8 @@ import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../componen
 import { Button } from "../components/Button.js";
 import { Modal } from "../components/Modal.js";
 import { DisclosurePanel } from "../components/Disclosure.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { IconButton } from "../components/IconButton.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { formatDateTime } from "../format.js";
 import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";

package/dist/graph/GraphEditor.js

@@ -1461,7 +1461,7 @@ function DragOverlays({ api, container, trashRef }) {
 	const problem = drag.target?.kind === "steps" ? drag.target.problem : void 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [drag.payload.kind === "jobs" && /* @__PURE__ */ jsxs("div", {
 		ref: trashRef,
-		className: cx("absolute bottom-2 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2 rounded-lg border-2 border-dashed px-4 py-2 text-sm", overTrash ? "border-(--theme-error) bg-(--theme-error-muted) text-(--theme-error)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
+		className: cx("absolute bottom-2 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2 rounded-lg border-2 border-dashed px-4 py-2 text-sm", overTrash ? "border-(--theme-error) bg-(--theme-error-muted) text-(--theme-error-text)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
 		children: [/* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }), t.dropToDelete]
 	}), drag.payload.kind !== "connect" && /* @__PURE__ */ jsx(DragLabel, {
 		at: {

package/dist/graph/GraphEditorDialogs.js

@@ -722,7 +722,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 										children: other
 									}),
 									!Object.hasOwn(jobs, other) && /* @__PURE__ */ jsx("span", {
-										className: "text-xs text-(--theme-error)",
+										className: "text-xs text-(--theme-error-text)",
 										children: t.missingJob
 									})
 								]

package/dist/graph/ProblemsButton.js

@@ -24,7 +24,7 @@ function ProblemsButton({ problems }) {
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-label": label,
-				className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error) theme-hover",
+				className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error-text) theme-hover",
 				children: [/* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5" }), problems.length]
 			})
 		}),
@@ -36,7 +36,7 @@ function ProblemsButton({ problems }) {
 					className: "mr-1.5 theme-muted-text",
 					children: t.problemLine(problem.line)
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-(--theme-error)",
+					className: "text-(--theme-error-text)",
 					children: problem.message
 				})] });
 				return /* @__PURE__ */ jsx("li", { children: pick ? /* @__PURE__ */ jsx("button", {

package/dist/graph/ShortcutsButton.js

@@ -1,6 +1,6 @@
 import { KeyboardIcon } from "../icons.js";
-import { Popover } from "../components/Popover.js";
 import { IconButton } from "../components/IconButton.js";
+import { Popover } from "../components/Popover.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { toolbarPanel } from "./toolbarPanel.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/graph/editorChrome.js

@@ -10,7 +10,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
 function DragLabel({ at, text, refused = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error-text)" : "theme-border"),
 		style: {
 			left: at.x + 12,
 			top: at.y + 12

package/dist/graph/fieldProblems.js

@@ -92,7 +92,7 @@ function ProblemList({ problems }) {
 	if (problems.length === 0) return null;
 	const fieldOf = (problem) => [...fields ?? []].filter(([key]) => within(problem, key)).sort(([a], [b]) => b.length - a.length)[0]?.[1];
 	return /* @__PURE__ */ jsx("ul", {
-		className: "flex flex-col gap-1 text-sm text-(--theme-error)",
+		className: "flex flex-col gap-1 text-sm text-(--theme-error-text)",
 		children: keyedByContent(problems, (problem) => `${problem.at.join(".")}:${problem.message}`).map(({ key, item: problem }) => {
 			const field = fieldOf(problem);
 			return /* @__PURE__ */ jsxs("li", {

package/dist/graph/stepWith.js

@@ -515,7 +515,7 @@ function ExtraKey({ name, uses, draft, original, onChange }) {
 					children: name
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-xs text-(--theme-error)",
+					className: "text-xs text-(--theme-error-text)",
 					children: t.notActionInput
 				}),
 				/* @__PURE__ */ jsx(IconButton, {

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { type OpenMenu, type OpenMenuOptions, useContextMenu, } from './componen
 export { CopyCodeBlock, default as CopyToClipboard } from './components/CopyToClipboard.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { DatePicker, type DatePickerProps } from './components/DatePicker.js';
-export { DescriptionListItem, default as DescriptionList } from './components/DescriptionList.js';
+export { DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
 export { Disclosure, DisclosurePanel, type DisclosureProps } from './components/Disclosure.js';
 export { Drawer, type DrawerProps } from './components/Drawer.js';
 export { EmptyState, type EmptyStateProps } from './components/EmptyState.js';

package/dist/index.js

@@ -35,14 +35,14 @@ import { Disclosure, DisclosurePanel } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
 import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
 import { DatePicker } from "./components/DatePicker.js";
+import { isTextEntryContext, useShortcutKey } from "./components/shortcutKey.js";
+import { IconButton } from "./components/IconButton.js";
 import { ExternalLink } from "./components/ExternalLink.js";
 import { Popover, PopoverClose, useClosePopover } from "./components/Popover.js";
 import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
 import DescriptionList, { DescriptionListItem } from "./components/DescriptionList.js";
 import { Drawer } from "./components/Drawer.js";
 import { HoverCard } from "./components/HoverCard.js";
-import { isTextEntryContext, useShortcutKey } from "./components/shortcutKey.js";
-import { IconButton } from "./components/IconButton.js";
 import { LetterBadge } from "./components/LetterBadge.js";
 import Markdown from "./components/Markdown.js";
 import { Meter, ProgressBar, levelTone } from "./components/Meter.js";

package/dist/list/ActionToolbar.d.ts

@@ -1,10 +1,10 @@
 import type { RowAction } from './rowMenu.js';
 /** A toolbar button, which moves into the `…` menu as a row when the toolbar runs out of room. */
-export interface ToolbarAction extends RowAction {
+export type ToolbarAction = RowAction & {
     /** A hint on the enabled button. */
     tooltip?: string | undefined;
     hidden?: boolean;
-}
+};
 /** A pre-rendered element (e.g. a button component that owns its modal). */
 interface ToolbarElement {
     key: string;

package/dist/list/ActionToolbar.js

@@ -4,7 +4,7 @@ import { MenuPopup } from "../components/Menu.js";
 import { buttonClasses } from "../components/buttonClasses.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useLink, useStrings } from "../components/Provider.js";
-import { MenuEntries } from "../components/MenuEntries.js";
+import { MenuEntries, useRunAction, warnIfInert } from "../components/MenuEntries.js";
 import { Button } from "../components/Button.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -20,12 +20,15 @@ function ToolbarItemView({ item }) {
 function ToolbarButton({ action }) {
 	const inOverflowMenu = useContext(OverflowMenuContext);
 	const Link = useLink();
+	const runAction = useRunAction();
 	if (inOverflowMenu) return /* @__PURE__ */ jsx(MenuEntries, { entries: [action] });
 	const className = buttonClasses({
 		variant: action.checked === false ? "outline" : "primary",
 		size: "md"
 	});
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
+	warnIfInert(action, "ActionToolbar");
+	const run = () => runAction(action);
 	let control;
 	if (action.href && !action.disabled) control = /* @__PURE__ */ jsx(Link, {
 		href: action.href,
@@ -34,7 +37,7 @@ function ToolbarButton({ action }) {
 	});
 	else if (action.checked !== void 0) control = /* @__PURE__ */ jsx(Toggle, {
 		pressed: action.checked,
-		onPressedChange: () => action.onClick?.(),
+		onPressedChange: run,
 		disabled: action.disabled,
 		className,
 		children: content
@@ -42,7 +45,7 @@ function ToolbarButton({ action }) {
 	else control = /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
 		size: "md",
-		onClick: action.onClick,
+		onClick: run,
 		disabled: action.disabled,
 		focusableWhenDisabled: true,
 		children: content

package/dist/list/ListPage.js

@@ -1,7 +1,7 @@
 import { cx } from "../cx.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useLink, useNavigation } from "../components/Provider.js";
-import { isMenuDivider, isMenuSubmenu } from "../components/MenuEntries.js";
+import { isMenuDivider, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
 import { PageHeader } from "../components/PageHeader.js";
 import { Table } from "../components/Table.js";
 import { ListActionsHeader } from "./ListTable.js";
@@ -136,7 +136,9 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 	});
 }
 function PinnedActionButton({ action, visible }) {
+	warnIfInert(action, "ListPage pinned action");
 	const Link = useLink();
+	const runAction = useRunAction();
 	const reason = action.disabled ? action.disabledReason : void 0;
 	const props = {
 		"aria-label": reason ? `${action.label}. ${reason}` : action.label,
@@ -154,7 +156,7 @@ function PinnedActionButton({ action, visible }) {
 			"aria-disabled": action.disabled,
 			onClick: (e) => {
 				e.stopPropagation();
-				if (!action.disabled) action.onClick?.();
+				if (!action.disabled) runAction(action);
 			},
 			...props,
 			children: action.icon

package/dist/list/ListViewControls.js

@@ -5,9 +5,9 @@ import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { useQueryMatch } from "../components/search.js";
 import { Switch } from "../components/Switch.js";
+import { IconButton } from "../components/IconButton.js";
 import { Popover } from "../components/Popover.js";
 import { InfoTip } from "../components/InfoTip.js";
-import { IconButton } from "../components/IconButton.js";
 import { Select } from "../components/Select.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/list/rowMenu.d.ts

@@ -2,9 +2,9 @@ import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import type { OpenMenu } from '../components/ContextMenu.js';
 import type { MenuAction, MenuEntry, MenuSubmenu } from '../components/MenuEntries.js';
 /** An action on a row, which its menu lists and its pinned buttons show, named by `key`. */
-export interface RowAction extends MenuAction {
+export type RowAction = MenuAction & {
     key: string;
-}
+};
 /** Assembles a row's context menu in the shared order: leading link(s) → middle
  * actions → extra items → Copy submenu → trailing (destructive) actions last. */
 export declare function assembleRowMenu({ lead, actions, exclude, order, trailing, extra, copy, }: {

package/dist/logviewer/LogViewer.js

@@ -6,9 +6,9 @@ import { useOptionalWorkflowEngine, useStrings } from "../components/Provider.js
 import { useCopy } from "../components/useCopy.js";
 import { Button } from "../components/Button.js";
 import { DatePicker } from "../components/DatePicker.js";
+import { IconButton } from "../components/IconButton.js";
 import { Popover } from "../components/Popover.js";
 import { InfoTip } from "../components/InfoTip.js";
-import { IconButton } from "../components/IconButton.js";
 import { SearchInput } from "../components/SearchInput.js";
 import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/styles/theme.css

@@ -29,16 +29,26 @@
   --theme-accent-subtle: #d3ebfc;
   --theme-focus: #06354f;
   --theme-focus-ring: rgba(6, 53, 79, 0.25);
-  --theme-success: #005f23;
-  --theme-success-muted: rgba(0, 95, 35, 0.1);
-  --theme-error: #95050f;
-  --theme-error-muted: rgba(149, 5, 15, 0.1);
-  --theme-warning: #794800;
-  --theme-warning-muted: rgba(121, 72, 0, 0.1);
-  --theme-info: #004caa;
-  --theme-info-muted: rgba(0, 76, 170, 0.1);
-  --theme-favorite: #920242;
-  --theme-favorite-muted: rgba(146, 2, 66, 0.1);
+  --theme-success: #00973d;
+  --theme-success-text: #006226;
+  --theme-success-solid: #00873c;
+  --theme-success-muted: rgba(0, 151, 61, 0.1);
+  --theme-error: #ea4841;
+  --theme-error-text: #a11a1b;
+  --theme-error-solid: #db3934;
+  --theme-error-muted: rgba(234, 72, 65, 0.1);
+  --theme-warning: #bd7100;
+  --theme-warning-text: #7b4a00;
+  --theme-warning-solid: #a76900;
+  --theme-warning-muted: rgba(189, 113, 0, 0.1);
+  --theme-info: #0681f8;
+  --theme-info-text: #0050af;
+  --theme-info-solid: #0073e8;
+  --theme-info-muted: rgba(6, 129, 248, 0.1);
+  --theme-favorite: #e7457a;
+  --theme-favorite-text: #9e174b;
+  --theme-favorite-solid: #d7366e;
+  --theme-favorite-muted: rgba(231, 69, 122, 0.1);
   --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
   --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
   --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
@@ -64,6 +74,10 @@
 
 @media (color-gamut: p3) {
   :root {
+    --theme-success: color(display-p3 0.1559 0.5942 0.2459);
+    --theme-success-solid: color(display-p3 0.0738 0.5422 0.1959);
+    --theme-success-muted: color(display-p3 0.1559 0.5942 0.2459 / 0.1);
+    --theme-warning-solid: color(display-p3 0.6474 0.4089 0);
     --theme-ansi-cyan: color(display-p3 0 0.4024 0.4329);
   }
 }