@parallelworks/ui 0.76.0 → 0.78.0

package/dist/graph/ShortcutsButton.js

@@ -1,13 +1,14 @@
 import { KeyboardIcon } from "../icons.js";
+import { Kbd, isApplePlatform } from "../components/Kbd.js";
 import { IconButton } from "../components/IconButton.js";
 import { Popover } from "../components/Popover.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { toolbarPanel } from "./toolbarPanel.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 //#region src/graph/ShortcutsButton.tsx
 /** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
-var IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var IS_MAC = isApplePlatform();
 /** Copy, paste and undo take Command on a Mac and Control elsewhere, as the handlers do. A Mac
 *  shows its symbols; elsewhere the keys go by the names their keycaps carry in the strings. */
 function modifierKeys(key) {
@@ -22,6 +23,19 @@ function modifierKeys(key) {
 /** A toolbar button that opens the list of gestures and keys a pane takes. */
 function ShortcutsButton({ groups }) {
 	const t = useGraphEditorStrings();
+	const k = t.shortcutKeys;
+	const gestures = /* @__PURE__ */ new Set([
+		k.click,
+		k.drag,
+		k.dragJob,
+		k.dragCircle,
+		k.dragButton,
+		k.dragSpace,
+		k.dragHandle,
+		k.dragEdge,
+		k.rightClick,
+		k.scroll
+	]);
 	return /* @__PURE__ */ jsx(Popover, {
 		title: t.shortcuts,
 		...toolbarPanel,
@@ -38,15 +52,18 @@ function ShortcutsButton({ groups }) {
 				children: group.title
 			}), /* @__PURE__ */ jsx("dl", {
 				className: "grid grid-cols-[8.5rem_1fr] items-baseline gap-x-3 gap-y-1.5",
-				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 					className: "flex flex-wrap items-center gap-1",
-					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
 						className: "theme-muted-text",
 						children: "/"
-					}), keys.map((key) => /* @__PURE__ */ jsx("kbd", {
-						className: "rounded border theme-border px-1 py-px text-[11px]",
-						children: key
-					}, key))] }, keys.join("+")))
+					}), keys.some((key) => gestures.has(key)) ? /* @__PURE__ */ jsx("span", {
+						className: "inline-flex flex-wrap items-center gap-1",
+						children: keys.map((key) => gestures.has(key) ? /* @__PURE__ */ jsx("span", {
+							className: "text-[11px] text-(--theme-app)",
+							children: key
+						}, key) : /* @__PURE__ */ jsx(Kbd, { keys: [key] }, key))
+					}) : /* @__PURE__ */ jsx(Kbd, { keys })] }, keys.join("+")))
 				}), /* @__PURE__ */ jsx("dd", {
 					className: "theme-muted-text",
 					children: shortcut.does

package/dist/graph/StepSummaries.js

@@ -4,8 +4,8 @@ import { useRunFile, useStrings, useWorkflowEngine } from "../components/Provide
 import Markdown from "../components/Markdown.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { jobLabel } from "./util.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/StepSummaries.tsx
 var SEPARATOR = " › ";
 function completion(job) {

package/dist/graph/TreeView.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
+import { EmptyState } from "../components/EmptyState.js";
 import { ChevronRightIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
 import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { EmptyState } from "../components/EmptyState.js";
 import { Button } from "../components/Button.js";
 import { DisclosurePanel } from "../components/Disclosure.js";
 import { Elapsed } from "../components/relativeTime.js";
@@ -11,8 +11,8 @@ import { LogViewer } from "../logviewer/LogViewer.js";
 import { jobLabel, toggled } from "./util.js";
 import { WarningMark } from "./RunWarningsList.js";
 import { rowKey, useWarningMarks } from "./runWarnings.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/TreeView.tsx
 function Chevron({ open, hidden = false }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/graph/WorkflowSettingsDialog.js

@@ -12,8 +12,8 @@ import { expressionRefs } from "./expressionRefs.js";
 import { useNewInputs } from "./InputDialog.js";
 import { useSettingsViews } from "./GraphEditorDialogs.js";
 import { firstPageEdits, pagesBackEdits } from "./inputPages.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/WorkflowSettingsDialog.tsx
 var LINK_NAME = /^[a-z0-9_-]*[a-z0-9]$/;
 var ORG_VARIABLE = /^[A-Z][A-Z0-9_]*$/;
@@ -332,7 +332,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 	] : wizardOn && flatten !== (wizard["flatten"] !== false) ? [...settings, ...reflattenEdits(inputs, wizardEdit)] : [update];
 	const saveEdit = newInputs.save(dirty ? editing.batchOf(edits) : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionGeneral,
@@ -617,7 +617,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 						}
 					})
 				}),
-				wizardOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+				wizardOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					WIZARD_FLAGS.map((flag) => /* @__PURE__ */ jsx(FlagField, {
 						label: t.fields[flag],
 						yamlKey: flag,

package/dist/graph/editorFields.js

@@ -1,6 +1,6 @@
 import { AddIcon, ExpressionIcon, RemoveIcon } from "../icons.js";
-import { withPositionKeys } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
+import { withPositionKeys } from "../components/keys.js";
 import { Button } from "../components/Button.js";
 import { IconButton } from "../components/IconButton.js";
 import { Checkbox } from "../components/Checkbox.js";
@@ -14,8 +14,8 @@ import { useGraphEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorFields.tsx
 var EXPRESSION = /^\$\{\{.*\}\}$/;
 var ENV_KEY = /^[a-zA-Z0-9_]+$/;
@@ -392,7 +392,7 @@ function SuggestedInput({ label, yamlKey, description, value, onChange, suggesti
 		description,
 		error: error ?? lint.message,
 		id,
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 			...control,
 			value,
 			placeholder,

package/dist/graph/editorPrimitives.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/graph/editorPrimitives.tsx
 /** A small store for an editor's view state, so a change redraws only what reads it. */
 function createStore(initial) {

package/dist/graph/editorRows.js

@@ -3,8 +3,8 @@ import { AddIcon, DragHandleIcon, MoreIcon, WarningIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { MarqueeBox, place } from "./editorPrimitives.js";
 import { EDITOR_HANDLE_CLASS, NO_SELECTION, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, useGraphEditor, useSelectedEdges, useUi } from "./graphEditorState.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorRows.tsx
 /** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
 function GraphEditorCanvas() {
@@ -71,7 +71,7 @@ function SelectionBox({ api }) {
 	if (!grid || !bounds) return null;
 	const anchor = grid.cols.flat(2).find((job) => jobs.includes(job));
 	const y = bounds.connectorY;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "absolute rounded-xl border-2 border-dashed border-(--theme-accent)",
 			style: place(bounds)
@@ -246,7 +246,7 @@ function EditableJobRow({ job, label, badge = true, children }) {
 		menuLabel: t.jobActions,
 		menuClassName: "p-1 group-hover/row:opacity-100",
 		iconClassName: "h-[1em] w-[1em]",
-		badges: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
+		badges: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
 			api,
 			job
 		}), badge && api.isMatrixJob(job) && /* @__PURE__ */ jsx("span", {
@@ -295,7 +295,7 @@ function NodePorts({ jobs, left, right, drawLeft, drawRight, zIndex }) {
 	if (!api) return null;
 	const t = api.t;
 	const port = `node:${jobs[0]}`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PortCircle, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PortCircle, {
 		side: "in",
 		at: left,
 		draw: drawLeft,
@@ -445,7 +445,7 @@ function EdgeEnds({ edge, start, end, zIndex }) {
 			children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 rounded-full border-4 border-(--theme-accent) bg-(--theme-panel-bg)" })
 		})
 	}, side);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [handle("from", start, end), handle("to", end, start)] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [handle("from", start, end), handle("to", end, start)] });
 }
 /** Shown in place of the graph when the workflow has no jobs yet. */
 /** The canvas of a graph with no jobs, which takes the graph's keys, so undo and paste still work. */

package/dist/graph/fieldProblems.js

@@ -1,9 +1,9 @@
 import { WarningIcon } from "../icons.js";
-import { keyedByContent } from "../components/keys.js";
 import { useWorkflowEditing } from "../components/Provider.js";
+import { keyedByContent } from "../components/keys.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/fieldProblems.tsx
 var FieldProblemsContext = createContext(null);
 var keyOf = (at) => at.join(".");

package/dist/graph/inputRefs.js

@@ -10,8 +10,8 @@ import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
 import { ExpressionToggle, GROWING_AREA, YamlField, flagError, flagValue, text, useGrowingArea } from "./editorFields.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/inputRefs.tsx
 /** Every input with a value, where a run reads it: groups nest unless flattened, lists hide their rows. */
 function inputRefs(editing, inputs) {
@@ -88,6 +88,7 @@ function InputRefSelect({ refs, types, value, onChange, onNew, newLabel, label }
 	];
 	return /* @__PURE__ */ jsx(Select, {
 		"aria-label": label,
+		width: "fill",
 		placeholder: matching.length > 0 ? t.chooseInput : t.noMatchingInputs,
 		items,
 		value: known || !current ? current || null : `?${current}`,
@@ -155,7 +156,7 @@ function FlagField({ label, yamlKey, description, value, original, fallback = fa
 				onChange(void 0);
 			}
 		}),
-		children: (control) => typed ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		children: (control) => typed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex-1",
@@ -201,7 +202,7 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 		description,
 		error: lint.message,
 		id,
-		actions: /* @__PURE__ */ jsxs(Fragment, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
 			source,
 			label: t.insertValue,
 			onInsert: insert
@@ -210,7 +211,7 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 			source,
 			onCreated: (path) => onChange(flagExpression(path, false))
 		})] }),
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 			...control,
 			value,
 			placeholder: texts.default,
@@ -246,7 +247,7 @@ function ValueOrInputField({ label, yamlKey, description, value, onChange, sourc
 		required,
 		error: error ?? lint.message,
 		id,
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex-1",
@@ -286,7 +287,7 @@ function ScriptField({ label, yamlKey, description, value, onChange, source, row
 			label: t.insertValue,
 			onInsert: insert
 		}),
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Textarea, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Textarea, {
 			...control,
 			ref: area ?? fixed,
 			mono: true,

package/dist/graph/stepWith.js

@@ -11,8 +11,8 @@ import { SuggestionInput } from "./SuggestionInput.js";
 import { ChoiceButtons, EXPRESSION, KeyValueEditor, StringListEditor, SuggestedInput, ToggleField, YamlField, isScalar, labelled, parseJson, parseScalar, rowsError, rowsFrom, rowsTo, sameValue } from "./editorFields.js";
 import { ValueOrInputField, refSuggestions } from "./inputRefs.js";
 import { DynamicForm } from "../form/Form.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/stepWith.tsx
 var REPO_INPUTS = [{
 	key: "$yaml",
@@ -459,7 +459,7 @@ function WithEditor({ uses, draft, original, onChange, error, source }) {
 						original,
 						onChange
 					}, key)),
-					kind !== "action" && /* @__PURE__ */ jsxs(Fragment, { children: [known.map(([key, raw]) => {
+					kind !== "action" && /* @__PURE__ */ jsxs(Fragment$1, { children: [known.map(([key, raw]) => {
 						const definition = asRecord(raw);
 						const label = String(definition["label"] ?? "");
 						const about = String(definition["description"] ?? "");

package/dist/index.d.ts

@@ -1,39 +1,44 @@
-export { ActionMenu } from './components/ActionMenu.js';
+export { ActionMenu, type ActionMenuProps } from './components/ActionMenu.js';
 export { AppLink, type AppLinkProps, isPlainClick, type LinkTarget, } from './components/AppLink.js';
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, avatarInitials, } from './components/Avatar.js';
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarInitialsOptions, type AvatarKind, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, avatarInitials, } from './components/Avatar.js';
 export { type Breadcrumb, Breadcrumbs, type BreadcrumbsProps } from './components/Breadcrumbs.js';
 export { Button, type ButtonProps, MethodButton } from './components/Button.js';
 export { type ButtonSize, type ButtonStyle, type ButtonVariant, buttonClasses, } from './components/buttonClasses.js';
 export { Callout, type CalloutProps, type CalloutTone } from './components/Callout.js';
-export { Card, CardHeader, type CardHeaderProps, type CardProps } from './components/Card.js';
+export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, } from './components/Card.js';
 export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkbox.js';
 export { ColorInput, type ColorInputProps } from './components/ColorInput.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
-export { ConfirmModal, type ConfirmModalProps } from './components/ConfirmModal.js';
-export { type OpenMenu, type OpenMenuOptions, useContextMenu, } from './components/ContextMenu.js';
+export { ConfirmModal, type ConfirmModalProps, type ConfirmRequest, useConfirm, } from './components/ConfirmModal.js';
+export { ContextMenuProvider, type MenuOpener, type OpenMenu, type OpenMenuOptions, useContextMenu, useMenuOpenedBy, useOpenMenu, } from './components/ContextMenu.js';
 export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { categoryClasses, categoryOf } from './components/category.js';
-export { DatePicker, type DatePickerProps } from './components/DatePicker.js';
-export { DescriptionListGroup, DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
-export { Disclosure, DisclosurePanel, type DisclosureProps } from './components/Disclosure.js';
+export { type ChartLegendItem, ChartLegendList, ChartTooltipContent, type ChartTooltipItem, SeriesSwatch, type SeriesSwatchShape, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight, } from './components/chart.js';
+export { Calendar, type CalendarProps, DatePicker, type DatePickerProps, } from './components/DatePicker.js';
+export { DescriptionListGroup, DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListSize, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
+export { collapsePanelClassName, Disclosure, DisclosurePanel, type DisclosureProps, } from './components/Disclosure.js';
 export { Drawer, type DrawerProps } from './components/Drawer.js';
-export { EmptyState, type EmptyStateProps } from './components/EmptyState.js';
+export { EmptyState, type EmptyStateProps, type EmptyStateVariant } from './components/EmptyState.js';
+export { ErrorPage, type ErrorPageKind, type ErrorPageProps, errorPageKind, } from './components/ErrorPage.js';
 export { ExternalLink, type ExternalLinkProps } from './components/ExternalLink.js';
-export { ErrorText, Field, type FieldControlProps, type FieldLayout, FieldOption, type FieldProps, FieldValue, type FieldValueProps, RevealToggle, useFieldControl, useFieldLabelledControl, } from './components/Field.js';
+export { ErrorText, type ErrorTextProps, Field, type FieldControlProps, type FieldLayout, FieldOption, type FieldProps, FieldValue, type FieldValueProps, RevealToggle, useFieldControl, useFieldLabelledControl, } from './components/Field.js';
+export { FileButton, type FileButtonProps } from './components/FileButton.js';
 export { type FieldBoxOptions, type FieldBoxSize, fieldBox } from './components/fieldBox.js';
 export type { FloatingAnchor } from './components/floating.js';
 export { HoverCard, type HoverCardProps } from './components/HoverCard.js';
 export { IconButton, type IconButtonProps } from './components/IconButton.js';
 export { formatInfoTipContent, InfoTip } from './components/InfoTip.js';
-export { Input, type InputProps, Textarea, type TextareaProps } from './components/Input.js';
+export { Input, type InputProps, Textarea, type TextareaProps, TitleInput, type TitleInputProps, } from './components/Input.js';
+export { ariaKeyShortcuts, formatShortcut, isApplePlatform, Kbd, type KbdProps, type KbdSize, type KbdVariant, type KeyPlatform, shortcutText, useShortcutFormat, } from './components/Kbd.js';
 export { LetterBadge } from './components/LetterBadge.js';
+export { ListboxGroup, type ListboxNavigation, type ListboxNavigationOptions, ListboxOption, type ListboxOptionProps, ListboxPanel, type ListboxPanelProps, useListboxNavigation, } from './components/Listbox.js';
 export { Loader, type LoaderProps } from './components/Loader.js';
 export type { MarkdownProps } from './components/Markdown.js';
 export { default as Markdown } from './components/Markdown.js';
-export { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, type MenuPopupProps, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, } from './components/Menu.js';
-export { type MenuAction, type MenuDivider, MenuEntries, type MenuEntry, MenuFilter, type MenuSearch, type MenuSubmenu, menuDivider, } from './components/MenuEntries.js';
-export { type BarSize, type BarTone, levelTone, Meter, ProgressBar, } from './components/Meter.js';
+export { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, type MenuPopupProps, MenuRadioItem, MenuSeparator, type MenuSize, MenuSubmenuTrigger, } from './components/Menu.js';
+export { isMenuDivider, isMenuGroup, isMenuSubmenu, type MenuAction, type MenuDivider, MenuEntries, type MenuEntry, MenuFilter, type MenuGroup, type MenuSearch, type MenuSubmenu, menuDivider, } from './components/MenuEntries.js';
+export { type BarSize, type BarTone, type BarValuePlacement, levelTone, Meter, ProgressBar, type ProgressSegment, } from './components/Meter.js';
 export { Modal, ModalDescription, type ModalProps, type ModalSize, ModalTitle, modalPanelClassName, } from './components/Modal.js';
 export { NumberInput, type NumberInputProps } from './components/NumberInput.js';
 export { OneTimeCodeInput, type OneTimeCodeInputProps } from './components/OneTimeCodeInput.js';
@@ -42,35 +47,39 @@ export { PageHeader, PageHeaderBar, type PageHeaderBarProps, type PageHeaderProp
 export { PageHeaderAction, type PageHeaderActionProps, PageHeaderAddButton, type PageHeaderAddButtonProps, PageHeaderMenu, } from './components/PageHeaderAction.js';
 export { PAGE_SIZES, Pagination, type PaginationProps } from './components/Pagination.js';
 export { Popover, PopoverClose, type PopoverProps, useClosePopover, } from './components/Popover.js';
-export { type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, UIProvider, type UIProviderProps, type UISlots, type UIStringOverrides, type UIStrings, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
+export { type AvatarColoring, type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, UIProvider, type UIProviderProps, type UISlots, type UIStringOverrides, type UIStrings, useAvatarColoring, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
 export { Radio, RadioGroup, type RadioProps } from './components/Radio.js';
 export { RefreshButton, type RefreshButtonProps } from './components/RefreshButton.js';
 export { RequiredMark } from './components/RequiredMark.js';
-export { RunStatusIcon, runStatusTone } from './components/RunStatusIcon.js';
-export { Elapsed, RelativeTime, type RelativeTimeFormat, useClock, useElapsed, useRelativeTime, } from './components/relativeTime.js';
+export { RunStatusIcon, type RunStatusIconProps, type RunStatusIconStatus, runStatusTone, } from './components/RunStatusIcon.js';
+export { Elapsed, RelativeTime, type RelativeTimeFormat, type RelativeTimeProps, useClock, useElapsed, useRelativeTime, } from './components/relativeTime.js';
 export { SearchInput, type SearchInputProps } from './components/SearchInput.js';
-export { Section, type SectionProps, type SectionVariant, } from './components/Section.js';
-export { SegmentedControl, type SegmentedOption } from './components/SegmentedControl.js';
+export { Section, type SectionProps, type SectionTone, type SectionVariant, } from './components/Section.js';
+export { SegmentedControl, type SegmentedControlRootProps, type SegmentedOption, } from './components/SegmentedControl.js';
 export { Select, type SelectItem, type SelectProps } from './components/Select.js';
+export { SelectionCopy } from './components/SelectionCopy.js';
 export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingsCard, type SettingsCardProps, SettingsHeading, } from './components/SettingsCard.js';
 export { LoadingRegion, Skeleton, type SkeletonProps } from './components/Skeleton.js';
 export { Slider, type SliderProps } from './components/Slider.js';
-export { type BadgeVariant, StatusBadge, StatusDot, statusTextClass, } from './components/StatusBadge.js';
+export { type BadgeEmphasis, type BadgeShape, type BadgeSize, type BadgeVariant, CountBadge, type CountBadgeProps, StatusBadge, type StatusBadgeProps, StatusDot, statusTextClass, } from './components/StatusBadge.js';
 export { StickyBar, type StickyBarProps } from './components/StickyBar.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
+export type { SegmentTone } from './components/segmented.js';
 export { isTextEntryContext, useShortcutKey } from './components/shortcutKey.js';
 export { type SortDirection, Table, type TableDensity } from './components/Table.js';
 export { type TabItem, TabPanel, Tabs, type TabsProps } from './components/Tabs.js';
+export { normalizeTags, Tag, type TagItem, TagList, type TagListProps, type TagProps, type TagStyle, tagClasses, } from './components/Tag.js';
 export { ThemeEditor, type ThemeEditorProps, ThemePreview } from './components/ThemeEditor.js';
 export { type ToastAction, type Toaster, type ToastOptions, type ToastTone, type ToastUpdate, toast, } from './components/Toast.js';
 export { ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, } from './components/ToggleGroup.js';
 export { Tooltip, type TooltipProps, TooltipProvider, type TooltipSide, } from './components/Tooltip.js';
+export { useClosingValue } from './components/useClosingValue.js';
 export { type CopyOptions, useCopy } from './components/useCopy.js';
 export { useCssIsDark } from './components/useCssIsDark.js';
 export { useApplyTheme, useColorMode } from './components/useTheme.js';
 export { cx } from './cx.js';
 export type { EditRefusalReason, FieldPatch, GraphEdit, GraphEditResult, GraphEditState, GraphLayout, GraphPosition, GraphSlot, InputEdit, InputPath, LintFix, NeedRef, StepRef, WorkflowAction, WorkflowActionInput, WorkflowEditing, WorkflowLintContext, WorkflowLintProblem, } from './editing.js';
 export type { EngineJob, EngineStep, EvaluateOptions, ExpansionKeys, LogCommand, LogSegment, MatrixGroup, ProcessedLogLine, RunStatus, WorkflowEngine, WorkflowVariable, WorkflowVariables, } from './engine.js';
-export { formatBytes, formatCount, formatDateTime, formatDuration, formatTimeLeft, type TimeValue, } from './format.js';
+export { type DateTimeStyle, formatBytes, formatCount, formatDateTime, formatDuration, formatTimeLeft, type TimeValue, } from './format.js';
 export * from './theme/index.js';

package/dist/index.js

@@ -1,17 +1,19 @@
 import { cx } from "./cx.js";
 import { buttonClasses } from "./components/buttonClasses.js";
+import { EmptyState } from "./components/EmptyState.js";
 import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
+import { ContextMenuProvider, useContextMenu, useMenuOpenedBy, useOpenMenu } from "./components/ContextMenu.js";
 import { Loader } from "./components/Loader.js";
 import { toast } from "./components/Toast.js";
+import { Kbd, ariaKeyShortcuts, formatShortcut, isApplePlatform, shortcutText, useShortcutFormat } from "./components/Kbd.js";
 import { Tooltip, TooltipProvider } from "./components/Tooltip.js";
-import { UIProvider, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
+import { UIProvider, useAvatarColoring, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
 import { AppLink, isPlainClick } from "./components/AppLink.js";
-import { EmptyState } from "./components/EmptyState.js";
 import { useCopy } from "./components/useCopy.js";
-import { MenuEntries, MenuFilter, menuDivider } from "./components/MenuEntries.js";
+import { MenuEntries, MenuFilter, isMenuDivider, isMenuGroup, isMenuSubmenu, menuDivider } from "./components/MenuEntries.js";
 import { ActionMenu } from "./components/ActionMenu.js";
 import { categoryClasses, categoryOf } from "./components/category.js";
-import { Avatar, avatarInitials } from "./components/Avatar.js";
+import { Avatar, AvatarGroup, avatarInitials } from "./components/Avatar.js";
 import { LoadingRegion, Skeleton } from "./components/Skeleton.js";
 import { Breadcrumbs } from "./components/Breadcrumbs.js";
 import { Button, MethodButton } from "./components/Button.js";
@@ -32,21 +34,25 @@ import { Popover, PopoverClose, useClosePopover } from "./components/Popover.js"
 import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
 import { RequiredMark } from "./components/RequiredMark.js";
 import { ErrorText, Field, FieldOption, FieldValue, RevealToggle, useFieldControl, useFieldLabelledControl } from "./components/Field.js";
-import { Input, Textarea } from "./components/Input.js";
+import { Input, Textarea, TitleInput } from "./components/Input.js";
 import { ColorInput } from "./components/ColorInput.js";
+import { Tag, TagList, normalizeTags, tagClasses } from "./components/Tag.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
 import { Modal, ModalDescription, ModalTitle, modalPanelClassName } from "./components/Modal.js";
-import { ConfirmModal } from "./components/ConfirmModal.js";
-import { useContextMenu } from "./components/ContextMenu.js";
+import { ConfirmModal, useConfirm } from "./components/ConfirmModal.js";
 import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
-import { Disclosure, DisclosurePanel } from "./components/Disclosure.js";
+import { Disclosure, DisclosurePanel, collapsePanelClassName } 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 { ChartLegendList, ChartTooltipContent, SeriesSwatch, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight } from "./components/chart.js";
+import { Calendar, DatePicker } from "./components/DatePicker.js";
 import DescriptionList, { DescriptionListGroup, DescriptionListItem } from "./components/DescriptionList.js";
 import { Drawer } from "./components/Drawer.js";
+import { ErrorPage, errorPageKind } from "./components/ErrorPage.js";
+import { FileButton } from "./components/FileButton.js";
 import { HoverCard } from "./components/HoverCard.js";
 import { LetterBadge } from "./components/LetterBadge.js";
+import { ListboxGroup, ListboxOption, ListboxPanel, useListboxNavigation } from "./components/Listbox.js";
 import Markdown from "./components/Markdown.js";
 import { Meter, ProgressBar, levelTone } from "./components/Meter.js";
 import { NumberInput } from "./components/NumberInput.js";
@@ -54,25 +60,27 @@ import { OneTimeCodeInput } from "./components/OneTimeCodeInput.js";
 import { Overview } from "./components/Overview.js";
 import { PageHeader, PageHeaderBar, PageHeaderProvider } from "./components/PageHeader.js";
 import { PageHeaderAction, PageHeaderAddButton, PageHeaderMenu } from "./components/PageHeaderAction.js";
+import { formatBytes, formatCount, formatDateTime, formatDuration, formatTimeLeft } from "./format.js";
 import { Select } from "./components/Select.js";
 import { PAGE_SIZES, Pagination } from "./components/Pagination.js";
 import { Radio, RadioGroup } from "./components/Radio.js";
-import { formatBytes, formatCount, formatDateTime, formatDuration, formatTimeLeft } from "./format.js";
 import { Elapsed, RelativeTime, useClock, useElapsed, useRelativeTime } from "./components/relativeTime.js";
 import { RefreshButton } from "./components/RefreshButton.js";
 import { RunStatusIcon, runStatusTone } from "./components/RunStatusIcon.js";
 import { SearchInput } from "./components/SearchInput.js";
 import { Section } from "./components/Section.js";
 import { SegmentedControl } from "./components/SegmentedControl.js";
+import { SelectionCopy } from "./components/SelectionCopy.js";
 import { SettingModeOption } from "./components/SettingModeOption.js";
 import { SettingRow, SettingsCard, SettingsHeading } from "./components/SettingsCard.js";
 import { Slider } from "./components/Slider.js";
-import { StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
+import { CountBadge, StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
 import { StickyBar } from "./components/StickyBar.js";
 import { Table } from "./components/Table.js";
 import { TabPanel, Tabs } from "./components/Tabs.js";
 import { ThemeEditor, ThemePreview } from "./components/ThemeEditor.js";
 import { ToggleGroup } from "./components/ToggleGroup.js";
+import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, Breadcrumbs, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, categoryClasses, categoryOf, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ActionToolbar.d.ts

@@ -7,6 +7,10 @@ export type ToolbarAction = RowAction & {
      *  action at most: the rest are outlined, so it stands out. */
     primary?: boolean | undefined;
     hidden?: boolean;
+    /** Busy with what it started, such as a refresh: a spinner takes the icon's
+     *  place, and it keeps focus but can't be pressed again until done, in the
+     *  toolbar or as a row of its `…` menu. */
+    loading?: boolean | undefined;
 };
 /** A pre-rendered element (e.g. a button component that owns its modal). */
 interface ToolbarElement {