@parallelworks/ui 0.44.0 → 0.45.0

package/dist/index.d.ts

@@ -1,52 +1,69 @@
 export { ActionMenu } from './components/ActionMenu.js';
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, avatarInitials, } from './components/Avatar.js';
 export { BreadcrumbProvider, type IBreadcrumbItem, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs, } from './components/Breadcrumbs.js';
-export { Button, MethodButton } from './components/Button.js';
+export { Button, type ButtonProps, MethodButton } from './components/Button.js';
+export { type ButtonSize, type ButtonStyle, type ButtonVariant, buttonClasses, } from './components/buttonClasses.js';
 export { default as Callout } from './components/Callout.js';
-export { Card, CardHeader } from './components/Card.js';
+export { Card, CardHeader, type CardProps } from './components/Card.js';
+export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkbox.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
 export { ConfirmModal } from './components/ConfirmModal.js';
-export { type MenuAnchor, type OpenMenu, type OpenMenuOptions, useContextMenu, } from './components/ContextMenu.js';
+export { type OpenMenu, type OpenMenuOptions, useContextMenu, } from './components/ContextMenu.js';
 export { CopyCodeBlock, default as CopyToClipboard } from './components/CopyToClipboard.js';
-export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, } from './components/CreateModal.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 { default as EmptyState } from './components/EmptyState.js';
-export { default as Filter } from './components/Filter.js';
-export { FilterPill } from './components/FilterPill.js';
-export { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses, } from './components/ghostButton.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';
+export { ExternalLink, type ExternalLinkProps } from './components/ExternalLink.js';
+export { Field, type FieldControlProps, type FieldLayout, FieldOption, type FieldProps, RevealToggle, useFieldControl, } from './components/Field.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 } from './components/IconButton.js';
-export { Indicator } from './components/Indicator.js';
+export { IconButton, type IconButtonProps } from './components/IconButton.js';
 export { formatInfoTipContent, InfoTip } from './components/InfoTip.js';
-export { Input, Textarea } from './components/Input.js';
-export { inputClasses } from './components/inputClasses.js';
+export { Input, type InputProps, Textarea, type TextareaProps } from './components/Input.js';
 export { LetterBadge } from './components/LetterBadge.js';
-export { default as Loader } from './components/Loader.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 { Modal, ModalDescription, type ModalProps, ModalTitle, modalPanelClassName, } from './components/Modal.js';
+export { NumberInput, type NumberInputProps } from './components/NumberInput.js';
 export { Overview } from './components/Overview.js';
-export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, headerActionButtonClasses, PageHeader, type PageHeaderBreadcrumb, type PageHeaderCrumb, } from './components/PageHeader.js';
-export { Pagination } from './components/Pagination.js';
-export { type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, type UINotify, UIProvider, type UISlots, type UIStrings, type UIToastId, type UIToastOptions, type UIToastUpdate, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
+export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader, type PageHeaderBreadcrumb, type PageHeaderCrumb, } from './components/PageHeader.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 UISlots, type UIStrings, 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 { useRelativeTime } from './components/relativeTime.js';
-export { default as SectionHeader } from './components/SectionHeader.js';
+export { RunStatusIcon, runStatusTone } from './components/RunStatusIcon.js';
+export { Elapsed, RelativeTime, type RelativeTimeFormat, 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 { Select, type SelectItem, type SelectProps } from './components/Select.js';
 export { SettingModeOption } from './components/SettingModeOption.js';
-export { SettingRow, SettingSection } from './components/SettingRow.js';
-export { default as SettingsCard } from './components/SettingsCard.js';
-export { default as SettingsGroup } from './components/SettingsGroup.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 { default as Sort, type TDirection } from './components/Sort.js';
 export { type BadgeVariant, StatusBadge, StatusDot, statusTextClass, } from './components/StatusBadge.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
+export { isTextEntryContext, useShortcutKey } from './components/shortcutKey.js';
 export { CompactTable, Table } from './components/Table.js';
+export { type TabItem, TabPanel, Tabs, type TabsProps } from './components/Tabs.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 { Tooltip, type TooltipProps, TooltipProvider, type TooltipSide, } from './components/Tooltip.js';
+export { type CopyOptions, useCopy } from './components/useCopy.js';
 export { useCssIsDark } from './components/useCssIsDark.js';
+export { useApplyTheme, useColorMode } from './components/useTheme.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 * from './theme/index.js';

package/dist/index.js

@@ -1,6 +1,11 @@
 import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
+import { EmptyState } from "./components/EmptyState.js";
+import { buttonClasses } from "./components/buttonClasses.js";
+import { Loader } from "./components/Loader.js";
+import { toast } from "./components/Toast.js";
 import { Tooltip, TooltipProvider } from "./components/Tooltip.js";
-import { UIProvider, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
+import { UIProvider, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
+import { useCopy } from "./components/useCopy.js";
 import { MenuEntries, MenuFilter, menuDivider } from "./components/MenuEntries.js";
 import { ActionMenu } from "./components/ActionMenu.js";
 import { Avatar, avatarInitials } from "./components/Avatar.js";
@@ -8,43 +13,59 @@ import { BreadcrumbProvider, useBreadcrumb, useClearBreadcrumbs, useHideBreadcru
 import { Button, MethodButton } from "./components/Button.js";
 import Callout from "./components/Callout.js";
 import { Card, CardHeader } from "./components/Card.js";
+import { Checkbox, CheckboxGroup } from "./components/Checkbox.js";
+import { fieldBox } from "./components/fieldBox.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
-import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./components/ghostButton.js";
 import { Modal, ModalDescription, ModalTitle, modalPanelClassName } from "./components/Modal.js";
 import { ConfirmModal } from "./components/ConfirmModal.js";
 import { useContextMenu } from "./components/ContextMenu.js";
 import CopyToClipboard, { CopyCodeBlock } from "./components/CopyToClipboard.js";
-import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
+import { Disclosure, DisclosurePanel } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
-import { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea } from "./components/CreateModal.js";
+import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
+import { DatePicker } from "./components/DatePicker.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 EmptyState from "./components/EmptyState.js";
-import Filter from "./components/Filter.js";
-import { FilterPill } from "./components/FilterPill.js";
+import { Drawer } from "./components/Drawer.js";
+import { RequiredMark } from "./components/RequiredMark.js";
+import { Field, FieldOption, RevealToggle, useFieldControl } from "./components/Field.js";
 import { HoverCard } from "./components/HoverCard.js";
+import { isTextEntryContext, useShortcutKey } from "./components/shortcutKey.js";
 import { IconButton } from "./components/IconButton.js";
-import { Indicator } from "./components/Indicator.js";
-import { RequiredMark } from "./components/RequiredMark.js";
 import { Input, Textarea } from "./components/Input.js";
-import { inputClasses } from "./components/inputClasses.js";
 import { LetterBadge } from "./components/LetterBadge.js";
-import Loader from "./components/Loader.js";
 import Markdown from "./components/Markdown.js";
+import { Meter, ProgressBar, levelTone } from "./components/Meter.js";
+import { NumberInput } from "./components/NumberInput.js";
+import { LoadingRegion, Skeleton } from "./components/Skeleton.js";
 import { Overview } from "./components/Overview.js";
-import { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader, headerActionButtonClasses } from "./components/PageHeader.js";
-import { Pagination } from "./components/Pagination.js";
+import { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader } from "./components/PageHeader.js";
+import { Select } from "./components/Select.js";
+import { PAGE_SIZES, Pagination } from "./components/Pagination.js";
 import { Radio, RadioGroup } from "./components/Radio.js";
-import { useRelativeTime } from "./components/relativeTime.js";
-import SectionHeader from "./components/SectionHeader.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 { Select } from "./components/Select.js";
 import { SettingModeOption } from "./components/SettingModeOption.js";
-import { SettingRow, SettingSection } from "./components/SettingRow.js";
-import SettingsCard from "./components/SettingsCard.js";
-import SettingsGroup from "./components/SettingsGroup.js";
+import { SettingRow, SettingsCard, SettingsHeading } from "./components/SettingsCard.js";
+import { Slider } from "./components/Slider.js";
 import Sort from "./components/Sort.js";
 import { StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
 import { CompactTable, Table } from "./components/Table.js";
+import { TabPanel, Tabs } from "./components/Tabs.js";
+import { JND, composite, deltaE, parseColor, toHex, toP3 } from "./theme/color.js";
+import { apcaContrast, contrastRatio, isDarkColor } from "./theme/contrast.js";
+import { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, resolveMode, schemeFor, serializeTheme } from "./theme/model.js";
+import { SIDEBAR_TOKENS, THEME_TOKENS, deriveTheme, generateTheme, themeStylesheet } from "./theme/derive.js";
+import { fitSeed } from "./theme/fit.js";
+import { applyTheme, prefersWideGamut } from "./theme/index.js";
+import { ThemeEditor, ThemePreview } from "./components/ThemeEditor.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
-import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
-export { ActionMenu, Autocomplete, Avatar, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, Callout, Card, CardHeader, Combobox, CompactTable, ConfirmModal, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, DEFAULT_PRESET, DescriptionList, DescriptionListItem, EmptyState, Filter, FilterPill, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HoverCard, IconButton, Indicator, InfoTip, Input, LetterBadge, Loader, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, MethodButton, Modal, ModalDescription, ModalTitle, Overview, PageHeader, Pagination, Radio, RadioGroup, RequiredMark, SectionHeader, SegmentedControl, Select, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, Table, Textarea, Tooltip, TooltipProvider, UIProvider, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, formatInfoTipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isDarkColor, menuDivider, modalPanelClassName, primaryButtonClasses, statusTextClass, useBreadcrumb, useClearBreadcrumbs, useContextMenu, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+import { useApplyTheme, useColorMode } from "./components/useTheme.js";
+export { ActionMenu, Autocomplete, Avatar, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, Combobox, CompactTable, ConfirmModal, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ExternalLink, Field, FieldOption, HeaderActionMenu, HeaderAddButton, HeaderEditButton, 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, Overview, PAGE_SIZES, PageHeader, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, Sort, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, composite, contrastRatio, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useBreadcrumb, useClearBreadcrumbs, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useHideBreadcrumbs, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ActionToolbar.d.ts

@@ -17,11 +17,7 @@ export declare function ToolbarButton({ action }: {
     action: ToolbarAction;
 }): import("react").JSX.Element;
 /** Pins a detail-page toolbar just below the sticky breadcrumb strip (top-10 matches the strip's 40px height). */
-export declare const stickyToolbarClasses = "sticky top-10 z-10 bg-(--theme-app-bg)";
-/** Pins a detail-page tabs row under the pinned toolbar (top-22 = 40px strip + 48px toolbar block). */
-export declare const stickyTabsClasses = "sticky top-22 z-10 bg-(--theme-app-bg)";
-/** Pins a detail-page tabs row directly under the breadcrumb strip when the page has no pinned toolbar (top-10 = the strip's height). */
-export declare const stickyTabsUnderHeaderClasses = "sticky top-10 z-10 bg-(--theme-app-bg)";
+export declare const stickyToolbarClasses = "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** Action groups left, secondary actions right (collapsing into a `…` menu). */
 export declare function ActionToolbar({ groups, right, sticky, }: {
     groups: ToolbarItem[][];

package/dist/list/ActionToolbar.js

@@ -1,13 +1,14 @@
-import { BsThreeDotsVertical } from "../icons/bs/BsThreeDotsVertical.js";
+import { cx } from "../cx.js";
+import { MoreIcon } from "../icons.js";
 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 { Button } from "../components/Button.js";
 import { Menu } from "@base-ui/react/menu";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, useContext, useLayoutEffect, useRef, useState } from "react";
-import { Button } from "@base-ui/react/button";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/list/ActionToolbar.tsx
 var OverflowMenuContext = createContext(false);
@@ -20,12 +21,11 @@ function ToolbarButton({ action }) {
 	const inOverflowMenu = useContext(OverflowMenuContext);
 	const Link = useLink();
 	if (inOverflowMenu) return /* @__PURE__ */ jsx(MenuEntries, { entries: [action] });
-	const off = action.checked === false;
-	const className = clsx("inline-flex items-center gap-x-0.5 h-9 px-2 rounded-md text-[13.5px] uppercase font-semibold transition-colors whitespace-nowrap", off ? "border theme-border theme-muted-text" : "bg-(--theme-element) text-(--theme-element-text)", "data-disabled:opacity-50 data-disabled:cursor-not-allowed", !action.disabled && (off ? "cursor-pointer hover:theme-hover" : "cursor-pointer hover:bg-(--theme-element-hover)"));
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "h-6 flex items-center [&>svg]:w-auto",
-		children: action.icon
-	}), action.label] });
+	const className = buttonClasses({
+		variant: action.checked === false ? "outline" : "primary",
+		size: "md"
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
 	let control;
 	if (action.href && !action.disabled) control = /* @__PURE__ */ jsx(Link, {
 		href: action.href,
@@ -40,10 +40,11 @@ function ToolbarButton({ action }) {
 		children: content
 	});
 	else control = /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		size: "md",
 		onClick: action.onClick,
 		disabled: action.disabled,
 		focusableWhenDisabled: true,
-		className,
 		children: content
 	});
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -58,9 +59,13 @@ function OverflowMenu({ items }) {
 		content: t.moreActions,
 		children: /* @__PURE__ */ jsx(Menu.Trigger, {
 			"aria-label": t.moreActions,
-			className: "inline-flex items-center justify-center h-9 w-9 rounded-md border theme-border link hover:theme-hover transition-colors",
+			className: buttonClasses({
+				variant: "outline",
+				size: "md",
+				iconOnly: true
+			}),
 			"data-testid": "action-toolbar-menu-button",
-			children: /* @__PURE__ */ jsx(BsThreeDotsVertical, {})
+			children: /* @__PURE__ */ jsx(MoreIcon, {})
 		})
 	}), /* @__PURE__ */ jsx(MenuPopup, {
 		keepMounted: true,
@@ -72,7 +77,7 @@ function OverflowMenu({ items }) {
 		})
 	})] });
 }
-var MENU_BUTTON_WIDTH = 44;
+var MENU_BUTTON_WIDTH = 40;
 var ITEM_GAP = 4;
 function fitCount(widths, available, gap, menuWidth) {
 	if (widths.length === 0) return 0;
@@ -125,17 +130,13 @@ function CollapsibleRight({ items }) {
 	});
 }
 /** Pins a detail-page toolbar just below the sticky breadcrumb strip (top-10 matches the strip's 40px height). */
-var stickyToolbarClasses = "sticky top-10 z-10 bg-(--theme-app-bg)";
-/** Pins a detail-page tabs row under the pinned toolbar (top-22 = 40px strip + 48px toolbar block). */
-var stickyTabsClasses = "sticky top-22 z-10 bg-(--theme-app-bg)";
-/** Pins a detail-page tabs row directly under the breadcrumb strip when the page has no pinned toolbar (top-10 = the strip's height). */
-var stickyTabsUnderHeaderClasses = "sticky top-10 z-10 bg-(--theme-app-bg)";
+var stickyToolbarClasses = "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** Action groups left, secondary actions right (collapsing into a `…` menu). */
 function ActionToolbar({ groups, right = [], sticky = false }) {
 	const visibleGroups = groups.map((group) => group.filter((a) => !a.hidden)).filter((group) => group.length > 0);
 	const visibleRight = right.filter((a) => !a.hidden);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center gap-2.5", sticky && clsx("sticky top-10 z-10 bg-(--theme-app-bg)", "py-1.5")),
+		className: cx("flex items-center gap-2.5", sticky && cx("sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)", "py-1.5")),
 		children: [visibleGroups.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2.5 shrink-0",
 			children: visibleGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
@@ -146,4 +147,4 @@ function ActionToolbar({ groups, right = [], sticky = false }) {
 	});
 }
 //#endregion
-export { ActionToolbar, ToolbarButton, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses };
+export { ActionToolbar, ToolbarButton, stickyToolbarClasses };

package/dist/list/ListPage.js

@@ -1,3 +1,4 @@
+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";
@@ -5,7 +6,6 @@ import { PageHeader } from "../components/PageHeader.js";
 import { Table } from "../components/Table.js";
 import { ListActionsHeader } from "./ListTable.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from "react";
 //#region src/list/ListPage.tsx
@@ -53,7 +53,7 @@ function ListRowActionsProvider({ view, children }) {
 function ListPage({ section = "main", shellPadded, embedded = false, breadcrumbs, title, titleAction, actions, toolbar, view, children }) {
 	const cancelShellPadding = shellPadded ?? SECTION_SHELL_PADDED[section];
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex h-full min-h-0 flex-col", cancelShellPadding && "-m-4"),
+		className: cx("flex h-full min-h-0 flex-col", cancelShellPadding && "-m-4"),
 		children: [embedded ? toolbar && /* @__PURE__ */ jsx("div", {
 			className: "px-4 py-1.5",
 			children: toolbar
@@ -87,14 +87,14 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		if (!isValidElement(child) || !cls && !(i === 0 && stacked.length > 0)) return child;
 		const el = child;
 		if (i === 0 && stacked.length > 0) return cloneElement(el, {
-			className: clsx(el.props.className, cls),
+			className: cx(el.props.className, cls),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
 				className: "mt-1 @[36rem]:hidden",
 				"data-stacked": true,
 				children: content
 			}, j))] })
 		});
-		return cloneElement(el, { className: clsx(el.props.className, cls) });
+		return cloneElement(el, { className: cx(el.props.className, cls) });
 	});
 	const handleRowClick = (e) => {
 		if (e.target.closest("a,button,input,label")) return;
@@ -108,7 +108,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 	const pinnedLabels = new Set((pinnedActions ?? []).map((a) => a.label));
 	const hasOverflowItems = items.some((item) => !isMenuDivider(item) && (isMenuSubmenu(item) || !pinnedLabels.has(item.label)));
 	return /* @__PURE__ */ jsxs("tr", {
-		className: clsx("group", selected ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", className),
+		className: cx("group", selected ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", className),
 		onClick: handleRowClick,
 		...rowContextMenuProps(openRowMenu, items),
 		children: [
@@ -140,7 +140,7 @@ function PinnedActionButton({ action, visible }) {
 	const reason = action.disabled ? action.disabledReason : void 0;
 	const props = {
 		"aria-label": reason ? `${action.label}. ${reason}` : action.label,
-		className: clsx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100")
+		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100")
 	};
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: reason ?? action.label,
@@ -165,7 +165,7 @@ function PinnedActionButton({ action, visible }) {
 function ListColumns({ view }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
-		className: clsx(col.headerClassName, view.columnClasses[i]),
+		className: cx(col.headerClassName, view.columnClasses[i]),
 		style: col.alwaysVisible ? { minWidth: 200 } : void 0,
 		children: col.label
 	}, col.key)), /* @__PURE__ */ jsx(ListActionsHeader, { view })] });

package/dist/list/ListTable.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 /** table-auto + horizontal scroll; the name column has a min-width floor so it can't be crushed. */
 export declare const listTableProps: {
     readonly borderless: true;
@@ -51,7 +51,8 @@ export declare function actionsColumnWidth(count: number): number;
 export declare function RowSelectCheckbox({ checked, label, onToggle, }: {
     checked: boolean;
     label: string;
-    onToggle: (e: ReactMouseEvent) => void;
+    /** Gets the press, a click or a key, so a host can extend a range on Shift. */
+    onToggle: (event: Event) => void;
 }): import("react").JSX.Element;
 /** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
  * chrome (structurally: showActions + actionsWidth) or actionCount. */

package/dist/list/ListTable.js

@@ -1,8 +1,10 @@
-import { BiError } from "../icons/bi/BiError.js";
+import { cx } from "../cx.js";
+import { ErrorIcon } from "../icons.js";
 import { positionKeys } from "../components/keys.js";
 import { useLink, useStrings } from "../components/Provider.js";
+import { Checkbox } from "../components/Checkbox.js";
+import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Table } from "../components/Table.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListTable.tsx
 var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
@@ -29,7 +31,7 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: clsx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
+				className: cx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
 				title,
 				children: name
 			}), badge]
@@ -78,7 +80,7 @@ function ListError({ error, noun = "data" }) {
 	const message = error && typeof error === "object" && "message" in error ? String(error.message) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-center justify-center gap-3 py-20 text-center",
-		children: [/* @__PURE__ */ jsx(BiError, { className: "h-10 w-10 text-red-400 opacity-80" }), /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx(ErrorIcon, { className: "h-10 w-10 text-red-400 opacity-80" }), /* @__PURE__ */ jsxs("div", {
 			className: "space-y-1",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "text-sm font-medium text-(--theme-app)",
@@ -91,26 +93,32 @@ function ListError({ error, noun = "data" }) {
 	});
 }
 function ListSkeleton({ rows = 6 }) {
-	const { loading } = useStrings();
-	return /* @__PURE__ */ jsxs("div", {
-		role: "status",
-		"aria-label": loading,
+	return /* @__PURE__ */ jsx(LoadingRegion, {
 		className: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
-		children: [positionKeys(rows, "skeleton").map((key) => /* @__PURE__ */ jsxs("div", {
-			"aria-hidden": "true",
-			className: "flex items-center gap-3 px-4 py-2.5 animate-pulse",
+		children: positionKeys(rows, "skeleton").map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 px-4 py-2.5",
 			children: [
-				/* @__PURE__ */ jsx("div", { className: "h-5 w-5 rounded bg-(--theme-muted-panel-bg)" }),
+				/* @__PURE__ */ jsx(Skeleton, {
+					width: 20,
+					height: 20
+				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "space-y-1.5",
-					children: [/* @__PURE__ */ jsx("div", { className: "h-3 w-40 rounded bg-(--theme-muted-panel-bg)" }), /* @__PURE__ */ jsx("div", { className: "h-2.5 w-24 rounded bg-(--theme-muted-panel-bg)" })]
+					children: [/* @__PURE__ */ jsx(Skeleton, {
+						width: 160,
+						height: 12
+					}), /* @__PURE__ */ jsx(Skeleton, {
+						width: 96,
+						height: 10
+					})]
 				}),
-				/* @__PURE__ */ jsx("div", { className: "ml-auto h-3 w-20 rounded bg-(--theme-muted-panel-bg)" })
+				/* @__PURE__ */ jsx(Skeleton, {
+					width: 80,
+					height: 12,
+					className: "ml-auto"
+				})
 			]
-		}, key)), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: loading
-		})]
+		}, key))
 	});
 }
 /** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
@@ -128,24 +136,20 @@ function actionsColumnWidth(count) {
 /** Shared leading selection checkbox for multi-select rows: stops the row-click
 * and suppresses shift-click text selection. Wrap in <Table.Item> for `leading`. */
 function RowSelectCheckbox({ checked, label, onToggle }) {
-	return /* @__PURE__ */ jsx("input", {
-		type: "checkbox",
+	return /* @__PURE__ */ jsx(Checkbox, {
 		"aria-label": label,
 		checked,
-		onChange: () => {},
-		onClick: (e) => {
-			e.stopPropagation();
-			onToggle(e);
-		},
+		onCheckedChange: (_, details) => onToggle(details.event),
+		onClick: (e) => e.stopPropagation(),
 		onMouseDown: (e) => {
 			if (e.shiftKey) e.preventDefault();
-		},
-		className: "h-4 w-4 shrink-0 rounded border-(--theme-border) text-blue-500 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer"
+		}
 	});
 }
 /** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
 * chrome (structurally: showActions + actionsWidth) or actionCount. */
 function ListActionsHeader({ view, actionCount = 0, className }) {
+	const { common } = useStrings();
 	if (view && !view.showActions) return null;
 	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
 	return /* @__PURE__ */ jsx(Table.Header, {
@@ -154,10 +158,10 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 			width,
 			minWidth: width
 		},
-		className: clsx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		className: cx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Actions"
+			children: common.actions
 		})
 	});
 }

package/dist/list/ListViewControls.d.ts

@@ -1,21 +1,4 @@
-import type { ReactNode } from 'react';
 import type { ListView } from './listView.js';
-/** Shared chrome for the toolbar control buttons (Filter, Display, Search) so
- * they read as a consistent button cluster — matched by ListSearchControl. */
-export declare const listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
-/** A header-strip button that opens a panel under it. The panel is a
- *  non-modal dialog named by the button, not a menu: it holds switches,
- *  pills and text rather than menu items. */
-export declare function AnchoredPopover({ icon, label, active, shortcut, panelClassName: panelClass, children, }: {
-    icon: ReactNode;
-    label: string;
-    active?: boolean;
-    /** Single-key shortcut (e.g. 'd') that opens the popover; also shown in the
-     * tooltip. */
-    shortcut?: string;
-    panelClassName?: string;
-    children: ReactNode;
-}): import("react").JSX.Element;
 export declare function ListDisplayMenu<T>({ view, label }: {
     view: ListView<T>;
     label?: string;