@parallelworks/ui 0.50.0 → 0.51.0

package/README.md

@@ -34,7 +34,8 @@ Each need has one component. Reach for it before styling markup by hand.
 | A text field | `Input`, `Textarea`, or a control framed by `Field`, whose `actions` hold buttons that act on it |
 | A number, a date, a color | `NumberInput`, `DatePicker`, `ColorInput` |
 | A one-time code, such as a sign-in check | `OneTimeCodeInput` |
-| A labeled value nobody edits, among fields | `FieldValue` in a `Field`; `DescriptionList` for a set of them alone |
+| A labeled value nobody edits, among fields | `FieldValue` in a `Field` |
+| A record's details, such as in a drawer or a card: names and values on their own | `DescriptionList` of `DescriptionListItem`s; `copy` on an ID, `mono` on a path, `variant="card"` to frame them |
 | An error beside a control outside a `Field` | `ErrorText` |
 | A dense field in a toolbar or a table cell | any field control with `size="sm"`; a width in `className` wins, and `cx` merges classes the same way |
 | On or off | `Switch`; `Checkbox` in a list of things to tick, several of which may be on |
@@ -101,6 +102,30 @@ Some pairs look alike and are split on purpose:
   A `Combobox` filters as you type, for a list long enough to search, and is the
   one that takes several values, new ones, or free text (`Autocomplete`).
 
+## Menu and row actions
+
+A `MenuAction`, and the `RowAction` and `ToolbarAction` built on it, does
+exactly one thing: runs `onClick`, navigates to `href`, or copies `copy`. An
+action with none of them, or with two, doesn't compile, so a row that silently
+does nothing when chosen can't ship. `checked` makes an `onClick` row an on/off
+choice, and `reloadDocument` belongs to an `href`. A disabled action keeps its
+behavior. In development, a menu row, pinned row button or toolbar button warns
+in the console when it gets an action with no behavior anyway, from JavaScript
+or a cast.
+
+Moving to it:
+
+- Rename a handler kept under another name, such as `onSelect`, to `onClick`.
+  An action built apart from its array, typed loosely or by another interface,
+  slipped past the old type; it now fails where it joins the array.
+- Leave out an action that can't run, rather than passing
+  `onClick: cond ? run : undefined` or `href: url ?? undefined`:
+  `...(cond ? [{ key, label, onClick: run }] : [])`.
+- Drop `onClick` from a `copy` or `href` action, and `checked` from an `href`
+  or `copy` one. To copy and also do something, call `useCopy` in an `onClick`.
+- Write `RowAction` and `ToolbarAction` as types, not interfaces to extend:
+  `type MyAction = RowAction & { … }`.
+
 ## Themes
 
 Every color a component may use is one of the closed set of `--theme-*` CSS
@@ -150,14 +175,29 @@ until it reaches its target against every surface it sits on.
 | Pair | WCAG at 0 / 30 / 100 | APCA Lc |
 | --- | --- | --- |
 | Body text | 4.5 / 7 / 12 | 75 / 90 / 105 |
-| Secondary text, links, status, syntax and terminal colors | 4.5 / 4.5 / 7 | 60 / 70 / 85 |
+| Secondary text, links, status text, syntax and terminal colors | 4.5 / 4.5 / 7 | 60 / 70 / 85 |
 | Placeholders | 3 / 3 / 4.5 | 45 / 50 / 65 |
-| Focus ring | 3 / 3 / 4.5 | |
+| Focus ring, status icons, dots, borders and bars | 3 / 3 / 4.5 | |
 | Control borders | 1.6 / 2.2 / 3 | |
-| Text on the accent | 4.5 | |
+| Text on the accent, white text on a solid status fill | 4.5 | |
 
 Status colors (success, error, warning, info, favorite) and terminal colors keep
-fixed hues, so red means the same thing in every theme. Syntax colors turn away
+fixed hues, so red means the same thing in every theme.
+
+Each status comes in four tokens, so a red icon stays bright while red words stay
+readable:
+
+| Token | For | Solved to |
+| --- | --- | --- |
+| `--theme-error` | Icons, dots, borders, rings, bars: anything but words | 3:1 on every surface and on the muted tint (WCAG 1.4.11) |
+| `--theme-error-text` | Words in the status: error messages, a destructive menu item or text button, a badge's label | Secondary text's targets, on the surfaces and on the muted tint |
+| `--theme-error-solid` | A fill under a white label, such as a destructive button | White on it at 4.5:1 |
+| `--theme-error-muted` | A tinted background, such as a callout or badge | The vivid shade at 10% (15% in dark mode) |
+
+The same four exist for `success`, `warning`, `info` and `favorite`. Words never
+take the bare token: `--theme-error` meets only the 3:1 that graphics need. An
+icon beside an error message may keep the message's text shade through
+`currentColor`. Syntax colors turn away
 from the accent's hue when they come within 30° of it, so a keyword never looks
 like a link.
 
@@ -259,6 +299,11 @@ one is meant to differ.
 | `--theme-bg` | `--theme-sidebar-bg` |
 | `theme-element` (utility) | `theme-accent` |
 
+`--theme-<status>` (`success`, `error`, `warning`, `info`, `favorite`) was once
+solved as text. It is now the vivid graphic shade, so words that read it move to
+`--theme-<status>-text`, and a fill under a white label to
+`--theme-<status>-solid`.
+
 ## Buttons and spinners
 
 Every pressable thing has one look, from `buttonClasses({ variant, size, iconOnly })`:

package/dist/ai/components/ModelSelector.js

@@ -109,7 +109,7 @@ function ModelSelector({ targetSession }) {
 		children: t.loading
 	});
 	if (modelsError && models.length === 0) return /* @__PURE__ */ jsxs("span", {
-		className: cx(chipClassName, "cursor-default text-(--theme-error)"),
+		className: cx(chipClassName, "cursor-default text-(--theme-error-text)"),
 		children: [t.failed, /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => refreshModels(),

package/dist/ai/components/agent/AgentMessageParts.js

@@ -220,7 +220,7 @@ function ToolCallBlock({ part }) {
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
 			!isDiff && !expanded && /* @__PURE__ */ jsx("div", {
-				className: cx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-(--theme-error)" : "theme-muted-text"),
+				className: cx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-(--theme-error-text)" : "theme-muted-text"),
 				children: summary
 			}),
 			isDiff && /* @__PURE__ */ jsx("div", {
@@ -277,7 +277,7 @@ function SubagentCard({ part }) {
 					]
 				})]
 			})] }),
-			panelClassName: cx("ml-5 mt-0.5 space-y-1 text-[13px]", part.status === "failed" ? "text-(--theme-error)" : "theme-muted-text"),
+			panelClassName: cx("ml-5 mt-0.5 space-y-1 text-[13px]", part.status === "failed" ? "text-(--theme-error-text)" : "theme-muted-text"),
 			children: [actions.length > 0 && /* @__PURE__ */ jsxs("ul", {
 				className: "space-y-0.5",
 				children: [actions.map((a, i) => /* @__PURE__ */ jsx("li", { children: a }, i)), part.status !== "running" && /* @__PURE__ */ jsx("li", { children: outcome })]
@@ -286,7 +286,7 @@ function SubagentCard({ part }) {
 				children: /* @__PURE__ */ jsx(Markdown, { children: part.report })
 			})]
 		}), !expanded && /* @__PURE__ */ jsx("div", {
-			className: cx("ml-5 mt-0.5 text-[13px]", part.status === "failed" ? "text-(--theme-error)" : "theme-muted-text"),
+			className: cx("ml-5 mt-0.5 text-[13px]", part.status === "failed" ? "text-(--theme-error-text)" : "theme-muted-text"),
 			children: outcome
 		})]
 	});

package/dist/components/Callout.js

@@ -1,16 +1,12 @@
 import { cx } from "../cx.js";
 import { InfoIcon, WarningIcon } from "../icons.js";
-import { toneSurface } from "./tone.js";
+import { toneIcon, toneSurface } from "./tone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
-	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(WarningIcon, {
+	return /* @__PURE__ */ jsx(type === "info" ? InfoIcon : WarningIcon, {
 		"aria-hidden": "true",
-		className: "mr-3 h-5 w-5 shrink-0"
-	});
-	else return /* @__PURE__ */ jsx(InfoIcon, {
-		"aria-hidden": "true",
-		className: "mr-3 h-5 w-5 shrink-0"
+		className: cx("mr-3 h-5 w-5 shrink-0", toneIcon[type])
 	});
 }
 function Callout({ type, className = "", children }) {

package/dist/components/CreateModal.js

@@ -127,7 +127,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
 							}),
 							nameError && /* @__PURE__ */ jsx("p", {
-								className: "mt-1 text-xs text-(--theme-error)",
+								className: "mt-1 text-xs text-(--theme-error-text)",
 								children: nameError
 							}),
 							hint && /* @__PURE__ */ jsx("p", {

package/dist/components/DescriptionList.d.ts

@@ -1,18 +1,32 @@
-import React from 'react';
-interface IDescriptionListItemProps {
-    label: string;
-    children: React.ReactNode;
-    tooltip?: string;
-    className?: string;
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+/** `plain` sets rows apart by space alone; `divided` rules a line between them; `card`
+ *  also frames them in a panel. */
+export type DescriptionListVariant = 'plain' | 'divided' | 'card';
+export interface DescriptionListProps extends Omit<ComponentPropsWithoutRef<'dl'>, 'className'> {
+    variant?: DescriptionListVariant | undefined;
+    /** Puts each label over its value at any width. Without it they stack only when the
+     *  list is too narrow for both side by side. */
+    stacked?: boolean | undefined;
+    /** Styles the box around the list, such as its margins or width. */
+    className?: string | undefined;
 }
-export declare function DescriptionListItem({ label, children, tooltip, className, ...props }: IDescriptionListItemProps & React.ComponentPropsWithoutRef<'dd'>): React.JSX.Element;
-export default function DescriptionList({ children, title, separators, subtitle, className, wrapperClassName, vertical, }: {
-    children: React.ReactNode;
-    className?: string;
-    wrapperClassName?: string;
-    title?: string | React.ReactNode;
-    separators?: boolean;
-    subtitle?: string | React.ReactNode;
-    vertical?: boolean;
-}): React.JSX.Element;
-export {};
+/** Names and their values, such as the details of a record in a drawer or a card. The
+ *  label column is as wide as its longest label, up to two fifths of the list, so a
+ *  long label wraps rather than squeezing the values; each label sits over its value
+ *  when the list is narrow. */
+export default function DescriptionList({ variant, stacked, className, children, ...props }: DescriptionListProps): import("react").JSX.Element;
+export interface DescriptionListItemProps {
+    label: ReactNode;
+    /** The value. Nothing, an empty string or `false` shows the library's empty mark. */
+    children?: ReactNode;
+    /** Help behind an info button beside the label. */
+    tooltip?: string | undefined;
+    /** Sets the value in a monospace face, for an ID, a path or a hash. */
+    mono?: boolean | undefined;
+    /** Adds a button that copies the value: `true` copies its text as shown; a string
+     *  copies that instead, such as a full ID behind a shortened one. */
+    copy?: boolean | string | undefined;
+    className?: string | undefined;
+}
+/** A label and its value in a DescriptionList. */
+export declare function DescriptionListItem({ label, children, tooltip, mono, copy, className, }: DescriptionListItemProps): import("react").JSX.Element;

package/dist/components/DescriptionList.js

@@ -1,41 +1,93 @@
 import { cx } from "../cx.js";
+import { CheckIcon, CopyIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { useCopy } from "./useCopy.js";
+import { IconButton } from "./IconButton.js";
 import { InfoTip } from "./InfoTip.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import { useId, useRef } from "react";
 //#region src/components/DescriptionList.tsx
-function DescriptionListItem({ label, children, tooltip, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
-		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+var variantClasses = {
+	plain: "*:py-1",
+	divided: "divide-y divide-(--theme-border) *:py-2",
+	card: "panel divide-y divide-(--theme-border) px-4 *:py-2"
+};
+/** Names and their values, such as the details of a record in a drawer or a card. The
+*  label column is as wide as its longest label, up to two fifths of the list, so a
+*  long label wraps rather than squeezing the values; each label sits over its value
+*  when the list is narrow. */
+function DescriptionList({ variant = "plain", stacked = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("@container/dl min-w-0", className),
+		children: /* @__PURE__ */ jsx("dl", {
+			...props,
+			className: cx("m-0 grid grid-cols-[minmax(0,1fr)] text-sm", !stacked && "@sm/dl:grid-cols-[fit-content(40%)_minmax(0,1fr)] @sm/dl:gap-x-6", variantClasses[variant]),
+			children
+		})
+	});
+}
+var isEmpty = (value) => value === null || value === void 0 || value === false || value === "";
+/** A label and its value in a DescriptionList. */
+function DescriptionListItem({ label, children, tooltip, mono = false, copy = false, className }) {
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("col-span-full grid grid-cols-subgrid gap-y-0.5", className),
+		children: [/* @__PURE__ */ jsxs("dt", {
+			className: "min-w-0 leading-5 wrap-break-word text-(--theme-muted-text-color)",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				children: label
+			}), tooltip && /* @__PURE__ */ jsx(InfoTip, {
+				className: "ml-1 align-[-2px]",
+				text: tooltip
+			})]
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "m-0 flex min-w-0 items-start gap-1 text-(--theme-app)",
+			children: isEmpty(children) ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				"data-value": true,
+				className: cx("min-w-0 leading-5 wrap-anywhere", mono && "font-mono text-[0.8125rem]"),
+				children
+			}), copy !== false && /* @__PURE__ */ jsx(CopyValue, {
+				text: copy === true ? void 0 : copy,
+				label,
+				labelId
+			})] })
+		})]
+	});
+}
+var EMPTY_MARK = "—";
+function EmptyValue() {
+	const { common: t } = useStrings();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "leading-5 text-(--theme-muted-text-color)",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 truncate",
-			children: label
-		}), tooltip && /* @__PURE__ */ jsx(InfoTip, {
-			className: "pr-2",
-			text: tooltip
+			"aria-hidden": "true",
+			children: EMPTY_MARK
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: t.noValue
 		})]
-	}), /* @__PURE__ */ jsx("dd", {
-		...props,
-		className: "flex text-[13px] leading-6 col-span-4 font-light items-center overflow-auto",
-		children
-	})] });
+	});
 }
-function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("w-full", wrapperClassName),
-		children: [
-			title && /* @__PURE__ */ jsx("h2", {
-				className: "text-sm font-semibold w-full mb-1",
-				children: title
-			}),
-			subtitle && /* @__PURE__ */ jsx("div", {
-				className: "max-w-2xl text-sm/6 w-full",
-				children: subtitle
-			}),
-			/* @__PURE__ */ jsx("dl", {
-				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
-				children: Array.isArray(children) ? React.Children.toArray(children) : children
-			})
-		]
+function CopyValue({ text, label, labelId }) {
+	const { common: t } = useStrings();
+	const { copy, copied } = useCopy();
+	const buttonId = useId();
+	const button = useRef(null);
+	const onClick = () => {
+		const value = button.current?.closest("dd")?.querySelector("[data-value]");
+		const shown = value?.innerText ?? value?.textContent;
+		copy(text ?? shown ?? "", typeof label === "string" ? { label } : void 0);
+	};
+	return /* @__PURE__ */ jsx(IconButton, {
+		ref: button,
+		id: buttonId,
+		size: "xs",
+		label: copied ? t.copied : t.copy,
+		"aria-labelledby": `${buttonId} ${labelId}`,
+		icon: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+		onClick,
+		className: "-my-0.5"
 	});
 }
 //#endregion

package/dist/components/Field.js

@@ -31,7 +31,7 @@ var labelSizes = {
 };
 var labelClassName = "flex items-center gap-1 font-medium";
 var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
-var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error)";
+var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error-text)";
 /** An error in the look a Field gives its own, for a control outside a Field, or for a part of
 *  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
 *  in the control's `aria-describedby` so the error is read with the control. */

package/dist/components/MenuEntries.d.ts

@@ -1,27 +1,47 @@
 import { type ReactNode } from 'react';
-/** Something a menu row does: navigates with `href`, or runs `onClick`. */
-export interface MenuAction {
+interface MenuActionBase {
     label: string;
     icon?: ReactNode;
-    /** Navigates instead of calling onClick. */
-    href?: string | undefined;
-    /** Loads the page instead of routing, for paths the host's router doesn't serve. */
-    reloadDocument?: boolean | undefined;
-    onClick?: (() => void) | undefined;
     disabled?: boolean | undefined;
     /** Why the action is disabled, shown on hover and read with its name. */
     disabledReason?: string | undefined;
     destructive?: boolean | undefined;
+    /** More text a menu's search matches, beside the label. */
+    keywords?: string | undefined;
+}
+/** Runs `onClick`. */
+interface MenuClickAction extends MenuActionBase {
+    onClick: () => void;
     /** Makes the row an on/off choice, checked while true. */
     checked?: boolean | undefined;
-    /** Text the row copies to the clipboard, confirmed with a toast naming `label`. */
-    copy?: {
+    href?: never;
+    reloadDocument?: never;
+    copy?: never;
+}
+/** Navigates to `href`. */
+interface MenuLinkAction extends MenuActionBase {
+    href: string;
+    /** Loads the page instead of routing, for paths the host's router doesn't serve. */
+    reloadDocument?: boolean | undefined;
+    onClick?: never;
+    checked?: never;
+    copy?: never;
+}
+/** Copies `copy.text` to the clipboard, confirmed with a toast naming `copy.label`. */
+interface MenuCopyAction extends MenuActionBase {
+    copy: {
         text: string;
         label: string;
-    } | undefined;
-    /** More text a menu's search matches, beside the label. */
-    keywords?: string | undefined;
+    };
+    onClick?: never;
+    checked?: never;
+    href?: never;
+    reloadDocument?: never;
 }
+/** Something a menu row does: runs `onClick`, navigates to `href`, or copies
+ *  `copy`. Exactly one, so a row that does nothing when chosen doesn't compile.
+ *  A disabled action keeps its behavior; one that has none belongs out of the menu. */
+export type MenuAction = MenuClickAction | MenuLinkAction | MenuCopyAction;
 /** A row that opens a menu of its own. */
 export interface MenuSubmenu {
     label: string;
@@ -54,3 +74,10 @@ export declare function MenuEntries({ entries, search, query, }: {
     /** The search's text, from the MenuFilter around the menu's root. */
     query?: string;
 }): import("react").JSX.Element;
+/** Warns in development when an action has no behavior. The types rule that
+ *  out, but a JavaScript caller or a cast still can, and its row renders fine
+ *  and silently does nothing. */
+export declare function warnIfInert(action: MenuAction, where: string): void;
+/** Runs an action that isn't a link: copies its text or calls its onClick. */
+export declare function useRunAction(): (action: MenuAction) => void;
+export {};

package/dist/components/MenuEntries.js

@@ -9,7 +9,7 @@ import { useQueryMatch } from "./search.js";
 import { useCopy } from "./useCopy.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 //#region src/components/MenuEntries.tsx
 var menuDivider = { divider: true };
 var isMenuDivider = (entry) => "divider" in entry;
@@ -73,10 +73,29 @@ function SubmenuRow({ submenu }) {
 		})] })
 	});
 }
-var destructiveClassName = "text-(--theme-error) data-highlighted:text-(--theme-error)";
+var destructiveClassName = "text-(--theme-error-text) data-highlighted:text-(--theme-error-text)";
+var warnedInert = /* @__PURE__ */ new Set();
+/** Warns in development when an action has no behavior. The types rule that
+*  out, but a JavaScript caller or a cast still can, and its row renders fine
+*  and silently does nothing. */
+function warnIfInert(action, where) {
+	if (process.env.NODE_ENV === "production") return;
+	if (action.onClick || action.href || action.copy || warnedInert.has(action.label)) return;
+	warnedInert.add(action.label);
+	console.warn(`${where}: the action "${action.label}" has no onClick, href or copy, so choosing it does nothing.`);
+}
+/** Runs an action that isn't a link: copies its text or calls its onClick. */
+function useRunAction() {
+	const { copy } = useCopy();
+	return useCallback((action) => {
+		if (action.copy) copy(action.copy.text, { label: action.copy.label });
+		else action.onClick?.();
+	}, [copy]);
+}
 function ActionRow({ action }) {
+	warnIfInert(action, "MenuEntries");
 	const Link = useLink();
-	const { copy } = useCopy();
+	const runAction = useRunAction();
 	const className = cx(action.destructive && destructiveClassName);
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
 	if (action.href && !action.disabled) return action.reloadDocument ? /* @__PURE__ */ jsx(MenuLinkItem, {
@@ -88,10 +107,7 @@ function ActionRow({ action }) {
 		className,
 		children: content
 	});
-	const run = () => {
-		if (action.copy) copy(action.copy.text, { label: action.copy.label });
-		action.onClick?.();
-	};
+	const run = () => runAction(action);
 	const reason = action.disabled ? action.disabledReason : void 0;
 	const label = /* @__PURE__ */ jsxs(Fragment, { children: [content, reason && /* @__PURE__ */ jsxs("span", {
 		className: "sr-only",
@@ -115,4 +131,4 @@ function ActionRow({ action }) {
 	});
 }
 //#endregion
-export { MenuEntries, MenuFilter, isMenuDivider, isMenuSubmenu, menuDivider };
+export { MenuEntries, MenuFilter, isMenuDivider, isMenuSubmenu, menuDivider, useRunAction, warnIfInert };

package/dist/components/Meter.js

@@ -6,9 +6,9 @@ import { Progress } from "@base-ui/react/progress";
 //#region src/components/Meter.tsx
 var fillClassName = {
 	accent: "bg-(--theme-accent)",
-	success: "bg-green-600",
-	warning: "bg-amber-500",
-	error: "bg-red-600",
+	success: "bg-(--theme-success)",
+	warning: "bg-(--theme-warning)",
+	error: "bg-(--theme-error)",
 	muted: "bg-(--theme-muted-text-color)"
 };
 var trackClassName = {

package/dist/components/PageHeader.js

@@ -100,7 +100,7 @@ function BreadcrumbsRightAction({ children }) {
 var breadcrumbsActionClasses = "flex cursor-pointer items-center gap-1 text-xs whitespace-nowrap hover:not-disabled:underline disabled:cursor-not-allowed disabled:opacity-50";
 function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip, destructive = false }) {
 	const Link = useLink();
-	const className = cx(breadcrumbsActionClasses, destructive ? "text-(--theme-error)" : "text-(--theme-link)");
+	const className = cx(breadcrumbsActionClasses, destructive ? "text-(--theme-error-text)" : "text-(--theme-link)");
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: tooltip,

package/dist/components/Provider.d.ts

@@ -56,6 +56,8 @@ export interface UIStrings {
         copyThing: (label: string) => string;
         copiedThing: (label: string) => string;
         copyThingFailed: (label: string) => string;
+        /** Read out where a value is missing, which shows as a dash. */
+        noValue: string;
         /** A name field's rule: the characters a key or identifier allows. */
         invalidName: string;
         invalidNumber: string;

package/dist/components/Provider.js

@@ -68,6 +68,7 @@ var DEFAULTS = {
 			copyThing: (label) => `Copy ${label}`,
 			copiedThing: (label) => `Copied ${label}`,
 			copyThingFailed: (label) => `Couldn't copy ${label}`,
+			noValue: "None",
 			invalidName: "Use letters, numbers, dashes, and underscores.",
 			invalidNumber: "Use a number.",
 			copy: "Copy",

package/dist/components/RequiredMark.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 function RequiredMark() {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: "text-red-500 ml-0.5",
+		className: "ml-0.5 text-(--theme-error)",
 		children: "*"
 	});
 }

package/dist/components/RunStatusIcon.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
-import { toneText } from "./tone.js";
+import { toneIcon } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/RunStatusIcon.tsx
@@ -73,7 +73,7 @@ function RunStatusIcon({ status, className }) {
 			"aria-label": label
 		} : { "aria-hidden": true },
 		"data-status": status || "not-run",
-		className: cx("flex h-2 items-center", toneText[look.tone], className),
+		className: cx("flex h-2 items-center", toneIcon[look.tone], className),
 		children: /* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
 			className: cx(look.spin && "animate-spin rounded-full")

package/dist/components/StatusIcons.js

@@ -3,10 +3,10 @@ import { ErrorIcon, SuccessIcon } from "../icons.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/StatusIcons.tsx
 function SuccessCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(SuccessIcon, { className: cx(colored && "text-green-500", className) });
+	return /* @__PURE__ */ jsx(SuccessIcon, { className: cx(colored && "text-(--theme-success)", className) });
 }
 function ErrorCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(ErrorIcon, { className: cx(colored && "text-red-400", className) });
+	return /* @__PURE__ */ jsx(ErrorIcon, { className: cx(colored && "text-(--theme-error)", className) });
 }
 //#endregion
 export { ErrorCheckmark, SuccessCheckmark };

package/dist/components/ThemeEditor.js

@@ -318,13 +318,13 @@ function ThemePreview({ theme, mode }) {
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex flex-wrap items-center gap-2",
 							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "rounded-full bg-(--theme-success-muted) px-2 py-0.5 text-xs text-(--theme-success)",
-									children: t.previewPassed
+								/* @__PURE__ */ jsxs("span", {
+									className: "inline-flex items-center gap-1.5 rounded-full bg-(--theme-success-muted) px-2 py-0.5 text-xs text-(--theme-success-text)",
+									children: [/* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-(--theme-success)" }), t.previewPassed]
 								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "rounded-full bg-(--theme-error-muted) px-2 py-0.5 text-xs text-(--theme-error)",
-									children: t.previewFailed
+								/* @__PURE__ */ jsxs("span", {
+									className: "inline-flex items-center gap-1.5 rounded-full bg-(--theme-error-muted) px-2 py-0.5 text-xs text-(--theme-error-text)",
+									children: [/* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-(--theme-error)" }), t.previewFailed]
 								}),
 								/* @__PURE__ */ jsx("span", {
 									className: "text-(--theme-link) underline underline-offset-2",

package/dist/components/Toast.js

@@ -2,7 +2,7 @@ import { cx } from "../cx.js";
 import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../icons.js";
 import { buttonClasses } from "./buttonClasses.js";
 import { Loader } from "./Loader.js";
-import { toneText } from "./tone.js";
+import { toneIcon } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useSyncExternalStore } from "react";
@@ -149,7 +149,7 @@ function ToneIcon({ tone }) {
 	const Icon = ICONS[tone];
 	return /* @__PURE__ */ jsx(Icon, {
 		"aria-hidden": "true",
-		className: cx("mt-0.5 size-4 shrink-0", toneText[tone])
+		className: cx("mt-0.5 size-4 shrink-0", toneIcon[tone])
 	});
 }
 function ToastList() {

package/dist/components/buttonClasses.js

@@ -6,7 +6,7 @@ var variants = {
 	secondary: "border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) hover:not-disabled:not-aria-disabled:bg-(--theme-hover)",
 	outline: "border border-(--theme-border) text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:border-(--theme-link) aria-pressed:text-(--theme-app) data-selected:border-(--theme-link) data-selected:text-(--theme-app) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
 	ghost: "text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:bg-(--theme-muted-panel-bg) aria-pressed:text-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-link) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
-	danger: "bg-(--theme-error) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error)/90"
+	danger: "bg-(--theme-error-solid) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error-solid)/90"
 };
 var sizes = {
 	xs: "h-6 px-2 text-xs [&_svg]:size-3",

package/dist/components/tone.d.ts

@@ -1,9 +1,12 @@
 /** How a status reads: its colors come from the theme's tone tokens, so every
- *  theme, dark ones included, sets them once. */
+ *  theme, dark ones included, sets them once. Words take a status's text shade,
+ *  and icons and dots its vivid one, which only graphics' 3:1 holds. */
 export type Tone = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
 /** Text in the tone, for a status line beside a dot or icon. */
 export declare const toneText: Record<Tone, string>;
+/** An icon in the tone, through `currentColor`. */
+export declare const toneIcon: Record<Tone, string>;
 /** A tinted surface with a border and text in the tone, for a badge or a callout. */
 export declare const toneSurface: Record<Tone, string>;
-/** A solid fill in the tone, for a dot. */
+/** A solid fill in the tone, for a dot or a bar. */
 export declare const toneFill: Record<Tone, string>;