@parallelworks/ui 0.33.0 → 0.35.0

package/dist/graph/MatrixGroup.d.ts

@@ -12,7 +12,7 @@ export declare function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded
     preview: boolean;
 }): import("react").JSX.Element;
 /** Matrix group node in the DAG visualization. */
-export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, }: {
+export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, rowsAbove, }: {
     matrixGroup: MatrixGroup;
     jobNames: string[];
     idPrefix: string;
@@ -27,4 +27,6 @@ export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExp
     zBase: number;
     handlers: JobHandlers;
     preview: boolean;
+    /** Empty rows of its column above this node. */
+    rowsAbove?: number;
 }): import("react").JSX.Element;

package/dist/graph/MatrixGroup.js

@@ -1,11 +1,13 @@
-import { useWorkflowEngine } from "../components/Provider.js";
+import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Indicator } from "../components/Indicator.js";
+import { emptyRowsStyle } from "./gridSpacing.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/MatrixGroup.tsx
 /** Matrix group item in the summary sidebar. */
 function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, handlers, preview }) {
+	const { dag: t } = useStrings();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -15,18 +17,14 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
 			children: [/* @__PURE__ */ jsx(Indicator, { status }), /* @__PURE__ */ jsxs("div", {
 				className: "font-semibold",
-				children: [
-					"Matrix: ",
-					matrixGroup.originaljob,
-					/* @__PURE__ */ jsxs("span", {
-						className: "font-normal text-sm ml-1",
-						children: [
-							"(",
-							matrixGroup.members.length,
-							" jobs)"
-						]
-					})
-				]
+				children: [t.matrixOf(matrixGroup.originaljob), /* @__PURE__ */ jsxs("span", {
+					className: "font-normal text-sm ml-1",
+					children: [
+						"(",
+						t.jobCount(matrixGroup.members.length),
+						")"
+					]
+				})]
 			})]
 		}), /* @__PURE__ */ jsx(Reveal, {
 			open: isExpanded,
@@ -43,16 +41,33 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 	});
 }
 /** Matrix group node in the DAG visualization. */
-function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview }) {
+function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, rowsAbove = 0 }) {
+	const { dag: t } = useStrings();
 	const matrixName = matrixGroup.originaljob;
 	const first = jobNames[0] ?? "";
 	const matrixMembers = matrixGroup.members;
 	const { aggStatus, statusLabel } = useWorkflowEngine().matrixStatus(matrixMembers.map((m) => jobs[m]?.status));
+	const header = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": isExpanded,
+		className: "cursor-pointer w-full text-left",
+		onClick: onToggle,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "font-semibold text-md p-0.5",
+			children: t.matrixOf(matrixName.length > 20 ? `${matrixName.slice(0, 20)}...` : matrixName)
+		}), !isExpanded && /* @__PURE__ */ jsxs("div", {
+			className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
+			children: [!preview && /* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel })]
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		id: `node_${idPrefix}${first}`,
 		role: "none",
 		className: "relative m-24",
-		style: { zIndex: (activeDists?.has(first) ? 25 : 1) + zBase },
+		style: {
+			zIndex: (activeDists?.has(first) ? 25 : 1) + zBase,
+			...emptyRowsStyle(rowsAbove)
+		},
 		onMouseEnter,
 		onMouseLeave,
 		onFocus: onMouseEnter,
@@ -63,19 +78,7 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 				opacity: hoveredRelated && !hoveredRelated.has(first) ? .5 : 1,
 				transition: `opacity ${animT}s`
 			},
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-expanded": isExpanded,
-				className: "cursor-pointer w-full text-left",
-				onClick: onToggle,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "font-semibold text-md p-0.5",
-					children: ["Matrix: ", matrixName.length > 20 ? `${matrixName.slice(0, 20)}...` : matrixName]
-				}), !isExpanded && /* @__PURE__ */ jsxs("div", {
-					className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
-					children: [/* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: statusLabel })]
-				})]
-			}), /* @__PURE__ */ jsx(Reveal, {
+			children: [header, /* @__PURE__ */ jsx(Reveal, {
 				open: isExpanded,
 				growWidth: true,
 				children: /* @__PURE__ */ jsx("div", {

package/dist/graph/TreeView.js

@@ -1,4 +1,4 @@
-import { useRunFile, useSlots, useWorkflowEngine } from "../components/Provider.js";
+import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { LoaderIcon } from "../components/StatusIcons.js";
 import { Indicator } from "../components/Indicator.js";
@@ -182,6 +182,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 }
 function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 	const engine = useWorkflowEngine();
+	const { dag } = useStrings();
 	const visibleJobNames = useMemo(() => {
 		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
 	}, [jobs]);
@@ -250,7 +251,7 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 				const job = jobs[jobName];
 				if (!job) continue;
 				const matrixOrigin = job._matrix?.originaljob;
-				if (matrixOrigin) {
+				if (matrixOrigin && (matrixGroups[matrixOrigin]?.members.length ?? 0) > 1) {
 					if (seenMatrixGroups.has(matrixOrigin)) continue;
 					seenMatrixGroups.add(matrixOrigin);
 					const group = matrixGroups[matrixOrigin];
@@ -271,11 +272,10 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 								/* @__PURE__ */ jsxs("span", {
 									className: "font-mono text-sm text-[var(--theme-app)]",
 									children: [
-										"Matrix: ",
-										matrixOrigin,
+										dag.matrixOf(matrixOrigin),
 										" (",
-										group.members.length,
-										" jobs)"
+										dag.jobCount(group.members.length),
+										")"
 									]
 								})
 							]

package/dist/graph/gridSpacing.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+export declare const SLOT_PITCH = 176;
+/** Top margin for a node that sits below `rows` empty rows of its column. */
+export declare function emptyRowsStyle(rows: number): CSSProperties;
+export declare const COLUMN_PITCH = 381;
+/** Left margin for a column that follows `columns` empty ones. */
+export declare function emptyColumnsStyle(columns: number): CSSProperties;

package/dist/graph/gridSpacing.js

@@ -0,0 +1,10 @@
+/** Top margin for a node that sits below `rows` empty rows of its column. */
+function emptyRowsStyle(rows) {
+	return rows > 0 ? { marginTop: `calc(6rem + ${rows * 176}px)` } : {};
+}
+/** Left margin for a column that follows `columns` empty ones. */
+function emptyColumnsStyle(columns) {
+	return columns > 0 ? { marginLeft: columns * 381 } : {};
+}
+//#endregion
+export { emptyColumnsStyle, emptyRowsStyle };

package/dist/graph/util.d.ts

@@ -1,4 +1,6 @@
 import type { WorkflowJob } from './types.js';
+/** How far below a node's top edge its connectors meet it, level with its first job. */
+export declare const NODE_CONNECTOR_Y = 37;
 /** A job as people read it: `run_tests` is "Run tests", a matrix member "Build (2/4)". */
 export declare function jobLabel(jobName: string, job?: WorkflowJob): string;
 /** A copy of `set` with `key` added, or removed if it was there. */

package/dist/graph/util.js

@@ -2,8 +2,8 @@
 /** A job as people read it: `run_tests` is "Run tests", a matrix member "Build (2/4)". */
 function jobLabel(jobName, job) {
 	const matrix = job?._matrix;
-	if (matrix?.originaljob) return `${capitalize(matrix.originaljob)} (${(matrix.index ?? 0) + 1}/${matrix.totalingroup ?? "?"})`;
-	return capitalize(jobName).replace(/_/g, " ");
+	if (matrix?.originaljob && matrix.totalingroup !== 1) return `${capitalize(matrix.originaljob)} (${(matrix.index ?? 0) + 1}/${matrix.totalingroup ?? "?"})`;
+	return capitalize(matrix?.originaljob ?? jobName).replace(/_/g, " ");
 }
 function capitalize(s) {
 	return s.charAt(0).toUpperCase() + s.slice(1);

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export { type PersistedStateHook, type RunFileResult, type UIData, type UILinkCo
 export { RequiredMark } from './components/RequiredMark.js';
 export { useRelativeTime } from './components/relativeTime.js';
 export { default as SectionHeader } from './components/SectionHeader.js';
+export { SegmentedControl, type SegmentedOption } from './components/SegmentedControl.js';
 export { SettingModeOption } from './components/SettingModeOption.js';
 export { SettingRow, SettingSection } from './components/SettingRow.js';
 export { default as SettingsCard } from './components/SettingsCard.js';

package/dist/index.js

@@ -33,6 +33,7 @@ import { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction
 import { Pagination } from "./components/Pagination.js";
 import { useRelativeTime } from "./components/relativeTime.js";
 import SectionHeader from "./components/SectionHeader.js";
+import { SegmentedControl } from "./components/SegmentedControl.js";
 import { SettingModeOption } from "./components/SettingModeOption.js";
 import { SettingRow, SettingSection } from "./components/SettingRow.js";
 import SettingsCard from "./components/SettingsCard.js";
@@ -45,4 +46,4 @@ import { CompactTable, Table } from "./components/Table.js";
 import { Toggle } from "./components/Toggle.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
-export { AddMenu, Avatar, BareModal, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CREATE_MODAL_SELECT_FILTER_THRESHOLD, Callout, Card, CardHeader, CompactTable, ConfirmModal, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, PageHeader, Pagination, RequiredMark, SectionHeader, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, statusTextClass, toggleSetMember, truncationTooltipProps, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowEngine, useWorkflowEngineLoader };
+export { AddMenu, Avatar, BareModal, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CREATE_MODAL_SELECT_FILTER_THRESHOLD, Callout, Card, CardHeader, CompactTable, ConfirmModal, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, PageHeader, Pagination, RequiredMark, SectionHeader, SegmentedControl, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, statusTextClass, toggleSetMember, truncationTooltipProps, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ListViewControls.d.ts

@@ -1,7 +1,22 @@
+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. Portals into .ds-root so the panel
+ *  escapes the toolbar's overflow clipping. */
+export declare function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children, }: {
+    icon: ReactNode;
+    label: string;
+    active?: boolean;
+    /** Single-key shortcut (e.g. 'f') 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;

package/dist/list/ListViewControls.js

@@ -22,7 +22,10 @@ function pillClass(on) {
 	return cx("whitespace-nowrap rounded-full border px-2.5 py-1 text-[12px] transition-colors", on ? "border-transparent bg-(--theme-muted-panel-bg) text-(--theme-app)" : "border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)");
 }
 var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
-/** Portals into .ds-root so the panel escapes the toolbar's overflow clipping. */
+/** 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. Portals into .ds-root so the panel
+*  escapes the toolbar's overflow clipping. */
 function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children }) {
 	const btnRef = useRef(null);
 	const panelRef = useRef(null);
@@ -70,6 +73,8 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 		type: "button",
 		onClick: () => pos ? close() : open(),
 		"aria-label": label,
+		"aria-haspopup": "dialog",
+		"aria-expanded": pos !== null,
 		"data-tooltip-id": TOOLTIP_ID,
 		"data-tooltip-content": label,
 		"data-tooltip-shortcut": shortcut ? shortcut.toUpperCase() : void 0,
@@ -85,7 +90,8 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			ref: panelRef,
-			role: "menu",
+			role: "dialog",
+			"aria-label": label,
 			onMouseDown: (e) => e.stopPropagation(),
 			className: cx("absolute rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg", panelClassName),
 			style: {
@@ -389,4 +395,4 @@ function FacetOptions({ view, facet, selected }) {
 	});
 }
 //#endregion
-export { ListDisplayMenu, ListFilterMenu, listControlButtonClasses };
+export { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses };

package/dist/list/index.d.ts

@@ -3,7 +3,7 @@ export { HoverCardSurface, useHoverCard } from './HoverCard.js';
 export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, type ListSection, type PinnedRowAction, useListNavigate, } from './ListPage.js';
 export { LIST_PAGE_SIZES, ListPager } from './ListPager.js';
 export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
-export { ListDisplayMenu, ListFilterMenu, listControlButtonClasses, } from './ListViewControls.js';
+export { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses, } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';
 export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, useListView, } from './listView.js';
 export { assembleRowMenu, type CopyFields, type CopySubmenu, MoreButton, type OpenMenu, type RowAction, type RowMenuItem, rowContextMenuProps, toolbarActionToRowAction, toRowMenuItem, useCopySubmenu, useRowMenu, useRowMenuActive, } from './RowContextMenu.js';

package/dist/list/index.js

@@ -4,9 +4,9 @@ import { HoverCardSurface, useHoverCard } from "./HoverCard.js";
 import { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
 import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { isTextEntryContext } from "./textEntry.js";
-import { ListDisplayMenu, ListFilterMenu, listControlButtonClasses } from "./ListViewControls.js";
+import { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses } from "./ListViewControls.js";
 import { LIST_PAGE_SIZES, ListPager } from "./ListPager.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { HoverCardRow, HoverCardTrigger, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, HoverCardSurface, HoverCardTrigger, LIST_PAGE_SIZES, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useHoverCard, useListNavigate, useListSearch, useListView, useRowMenu, useRowMenuActive };
+export { ActionToolbar, AnchoredPopover, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, HoverCardSurface, HoverCardTrigger, LIST_PAGE_SIZES, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useHoverCard, useListNavigate, useListSearch, useListView, useRowMenu, useRowMenuActive };

package/dist/styles/base.css

@@ -52,6 +52,8 @@
     margin-right: 0.5rem;
   }
   .form-label-top {
-    height: 20px;
+    min-height: 20px;
+    height: auto;
+    width: 100%;
   }
 }

package/dist/styles/theme.css

@@ -65,6 +65,11 @@
   color: var(--theme-panel, #000);
 }
 
+/* The bordered panel graphs and settings cards sit in; graph circles hide connectors with its color. */
+@utility panel {
+  @apply border-solid rounded-2xl border border-(--theme-border) theme-panel;
+}
+
 @utility theme-muted-panel {
   background-color: var(--theme-muted-panel-bg, #f8f9fa);
   color: var(--theme-muted-panel-color, #5f6b76);