@parallelworks/ui 0.16.0 → 0.18.0

package/dist/chunks/{list-CduoUsMW.js → list-qrojZZNv.js}

@@ -1,14 +1,14 @@
+import { a as usePersistedState, n as useLink, r as useNavigation, u as useStrings } from "./Provider-Ghua9PkN.js";
+import { T as Avatar, _ as useRowMenuActive, c as PageHeader, f as rowContextMenuProps, u as MoreButton } from "./PageHeader-l49p1nM9.js";
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, MenuIcon, SearchIcon, XIcon } from "../icons.js";
-import { c as useStrings, n as useLink, r as useNavigation } from "./Provider-CbFVFB7O.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-n9w7Tkt1.js";
-import { _ as useRowMenuActive, c as PageHeader, p as rowContextMenuProps, u as MoreButton } from "./PageHeader-CoZWF0pJ.js";
-import { n as Table } from "./Table-CutP1bRt.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-Crxo_eU_.js";
+import { n as Table } from "./Table-4OHjdKdO.js";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import { useLocalStorage } from "usehooks-ts";
 //#region src/list/ActionToolbar.tsx
 var OverflowMenuContext = createContext(false);
 /** Omits data-tooltip-content when absent — react-tooltip treats an explicit undefined as an empty tooltip anchor. */
@@ -20,7 +20,7 @@ function tipProps(content, place) {
 	};
 }
 function ToolbarItemView({ item }) {
-	if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { children: item.element });
+	if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element });
 	return /* @__PURE__ */ jsx(ToolbarButton, { action: item });
 }
 function ToolbarButton({ action }) {
@@ -30,7 +30,7 @@ function ToolbarButton({ action }) {
 	const className = cx("inline-flex items-center gap-x-0.5 h-9 px-2 rounded-md text-[13.5px] uppercase font-semibold transition-colors whitespace-nowrap", "bg-(--theme-element) text-(--theme-element-text)", action.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-(--theme-element-hover)");
 	const tooltipProps = tipProps(action.disabled ? action.disabledTooltip : action.enabledTooltip, "bottom");
 	const Icon = action.icon;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "h-6 flex items-center",
 		children: /* @__PURE__ */ jsx(Icon, { className: cx("w-auto", action.iconClassName) })
 	}), action.label] });
@@ -64,7 +64,7 @@ function OverflowRow({ item }) {
 	const Icon = item.icon;
 	const className = cx("flex w-full items-center gap-x-1 px-4 py-2 text-[13px] uppercase font-semibold link hover:theme-hover", item.disabled && "opacity-50 cursor-not-allowed");
 	const tooltipProps = tipProps(item.disabled ? item.disabledTooltip : item.enabledTooltip, "left");
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "w-5 h-6 flex items-center",
 		children: /* @__PURE__ */ jsx(Icon, { className: cx(item.iconClassName) })
 	}), item.label] });
@@ -106,7 +106,7 @@ function OverflowMenu({ items }) {
 			className: "z-50 min-w-56 rounded-md border theme-border bg-(--theme-app-bg) shadow-lg py-1 focus:outline-none",
 			children: /* @__PURE__ */ jsx(OverflowMenuContext.Provider, {
 				value: true,
-				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
+				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
 			})
 		})]
 	});
@@ -177,7 +177,7 @@ function ActionToolbar({ groups, right = [], sticky = false }) {
 		className: cx("flex items-center gap-2.5", sticky && cx("sticky top-10 z-10 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", {
+			children: visibleGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-1",
 				children: group.map((item) => /* @__PURE__ */ jsx(ToolbarItemView, { item }, item.key))
 			})] }, group[0]?.key ?? i))
@@ -203,14 +203,15 @@ var listTableFixedProps = {
 	...listTableProps,
 	className: listTableProps.className.replace("table-auto", "table-fixed")
 };
-function NameCell({ icon, name, subtitle, href, badge }) {
+function NameCell({ icon, name, subtitle, href, badge, title }) {
 	const Link = useLink();
-	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
+				title,
 				children: name
 			}), badge]
 		}), subtitle && /* @__PURE__ */ jsx("div", {
@@ -331,7 +332,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 			width,
 			minWidth: width
 		},
-		className: cx("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"
@@ -401,7 +402,7 @@ function ListPage({ section = "main", shellPadded, embedded = false, breadcrumbs
 		})]
 	});
 }
-function ListRow({ href, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
+function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
 	const { show: showActions, always: alwaysShowActions, columnClasses } = useContext(RowActionsContext);
 	const styledCells = Children.toArray(children).map((child, i) => {
@@ -417,11 +418,12 @@ function ListRow({ href, items, goTo, openMenu, pinnedActions, selected, selecti
 			return;
 		}
 		if (href) goTo(href);
+		else onActivate?.();
 	};
 	const pinnedLabels = new Set((pinnedActions ?? []).map((a) => a.label));
 	const hasOverflowItems = items.some((item) => item.kind !== "divider" && (item.kind === "submenu" || !pinnedLabels.has(item.label)));
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cx("group", selected ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || 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: [
@@ -460,7 +462,7 @@ function ListRow({ href, items, goTo, openMenu, pinnedActions, selected, selecti
 }
 /** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
 function ListColumns({ view }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
 		className: cx(col.headerClassName, view.columnClasses[i]),
 		style: col.alwaysVisible ? { minWidth: 200 } : void 0,
@@ -518,16 +520,16 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const defaultOrderByValue = isFavorite ? DEFAULT_ORDER : defaultOrderBy ?? orderBys[0]?.value ?? "";
 	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !c.alwaysVisible).map((c) => c.key), [columns]);
 	const defaultPinnedKeys = useMemo(() => actions.filter((a) => a.defaultPinned).map((a) => a.key), [actions]);
-	const [hiddenKeys, setHiddenKeys] = useLocalStorage(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
-	const [pinnedKeys, setPinnedKeys] = useLocalStorage(`${storageKey}:pinnedActions`, defaultPinnedKeys);
-	const [groupBy, setGroupBy] = useLocalStorage(`${storageKey}:groupBy`, defaultGroupByValue);
-	const [showColumnHeaders, setShowColumnHeaders] = useLocalStorage(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
-	const [showActions, setShowActions] = useLocalStorage(`${storageKey}:showActions`, defaultShowActions);
-	const [alwaysShowActions, setAlwaysShowActions] = useLocalStorage(`${storageKey}:alwaysShowActions`, false);
-	const [orderBy, setOrderBy] = useLocalStorage(`${storageKey}:orderBy`, defaultOrderByValue);
-	const [orderDir, setOrderDir] = useLocalStorage(`${storageKey}:orderDir`, "asc");
-	const [localFilters, setLocalFilters] = useLocalStorage(`${storageKey}:filters`, {});
-	const [sharedFilters, setSharedFilters] = useLocalStorage(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
+	const [hiddenKeys, setHiddenKeys] = usePersistedState(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
+	const [pinnedKeys, setPinnedKeys] = usePersistedState(`${storageKey}:pinnedActions`, defaultPinnedKeys);
+	const [groupBy, setGroupBy] = usePersistedState(`${storageKey}:groupBy`, defaultGroupByValue);
+	const [showColumnHeaders, setShowColumnHeaders] = usePersistedState(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
+	const [showActions, setShowActions] = usePersistedState(`${storageKey}:showActions`, defaultShowActions);
+	const [alwaysShowActions, setAlwaysShowActions] = usePersistedState(`${storageKey}:alwaysShowActions`, false);
+	const [orderBy, setOrderBy] = usePersistedState(`${storageKey}:orderBy`, defaultOrderByValue);
+	const [orderDir, setOrderDir] = usePersistedState(`${storageKey}:orderDir`, "asc");
+	const [localFilters, setLocalFilters] = usePersistedState(`${storageKey}:filters`, {});
+	const [sharedFilters, setSharedFilters] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
 	const sharedKeys = useMemo(() => new Set(facets.filter((f) => f.shared).map((f) => f.key)), [facets]);
 	const filters = useMemo(() => {
 		if (sharedKeys.size === 0) return localFilters;
@@ -741,7 +743,7 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, [shortcut, open]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 		ref: btnRef,
 		type: "button",
 		onClick: () => pos ? close() : open(),
@@ -984,7 +986,7 @@ function FilterMenuBody({ view }) {
 	const scheduleClose = () => {
 		closeTimer.current = setTimeout(() => setOpenKey(null), 160);
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between px-3 py-1",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
@@ -1184,7 +1186,7 @@ var LIST_PAGE_SIZES = [
 	200
 ];
 /** Footer pager bar for paginated new-nav lists: "{start}–{end} of {total}" with prev/next. Renders nothing for a single page. */
-function ListPager({ page, pageSize, total, onPageChange, pageSizes = LIST_PAGE_SIZES, onPageSizeChange }) {
+function ListPager({ page, pageSize, total, onPageChange, pageSizes = LIST_PAGE_SIZES, onPageSizeChange, hasNext }) {
 	const t = useStrings().list;
 	const pageCount = Math.max(1, Math.ceil(total / pageSize));
 	const start = page * pageSize + 1;
@@ -1220,7 +1222,7 @@ function ListPager({ page, pageSize, total, onPageChange, pageSizes = LIST_PAGE_
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": t.paginationNext,
-				disabled: page >= pageCount - 1,
+				disabled: hasNext === void 0 ? page >= pageCount - 1 : !hasNext,
 				onClick: () => onPageChange(page + 1),
 				className: cx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
 				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
@@ -1295,4 +1297,115 @@ function HoverCardSurface({ x, y, widthClassName, padded = true, relayoutKey, on
 	}), document.querySelector(".ds-root") ?? document.body);
 }
 //#endregion
-export { ActionToolbar as A, ListSkeleton as C, actionsColumnWidth as D, RowSelectCheckbox as E, stickyTabsClasses as M, stickyTabsUnderHeaderClasses as N, listTableFixedProps as O, stickyToolbarClasses as P, ListError as S, NameCell as T, ListRow as _, ListCount as a, GroupRow as b, ListDisplayMenu as c, isTextEntryContext as d, DEFAULT_ORDER as f, ListPage as g, ListColumns as h, ListPager as i, ToolbarButton as j, listTableProps as k, ListFilterMenu as l, useListView as m, useHoverCard as n, ListSearchControl as o, FAVORITE_ORDER as p, LIST_PAGE_SIZES as r, useListSearch as s, HoverCardSurface as t, listControlButtonClasses as u, ListRowActionsProvider as v, NAME_MIN_WIDTH_PX as w, ListActionsHeader as x, useListNavigate as y };
+//#region src/list/UserHoverCard.tsx
+/** Opens `card` after a short hover or on focus of `children`. */
+function HoverCardTrigger({ className, children, card }) {
+	const { triggerRef, coords, scheduleOpen, scheduleClose, keepOpen } = useHoverCard();
+	return /* @__PURE__ */ jsxs("span", {
+		ref: triggerRef,
+		role: "none",
+		className,
+		onMouseEnter: scheduleOpen,
+		onMouseLeave: scheduleClose,
+		onFocus: scheduleOpen,
+		onBlur: scheduleClose,
+		children: [children, coords && card({
+			x: coords.x,
+			y: coords.y,
+			onKeepOpen: keepOpen,
+			onLeave: scheduleClose
+		})]
+	});
+}
+function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, badge, href, linkComponent, loading = false, relayoutKey, children }) {
+	const strings = useStrings();
+	const SlotLink = useLink();
+	const Link = linkComponent ?? SlotLink;
+	const displayName = name || username;
+	const header = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Avatar, {
+		src: avatarSrc,
+		name: displayName,
+		size: "lg",
+		className: "shrink-0"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm font-semibold text-(--theme-app)",
+				children: displayName
+			}), badge && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 rounded-full bg-(--theme-muted-panel-bg) px-1.5 py-0.5 text-[10px] font-medium leading-none text-(--theme-muted-text-color)",
+				children: badge
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "truncate text-xs text-(--theme-muted-text-color)",
+			children: username
+		})]
+	})] });
+	return /* @__PURE__ */ jsxs(HoverCardSurface, {
+		x,
+		y,
+		widthClassName: "w-64",
+		relayoutKey,
+		onKeepOpen,
+		onLeave,
+		children: [href ? /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: "flex items-center gap-3 transition-opacity hover:opacity-80",
+			children: header
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-3",
+			children: header
+		}), loading ? /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"aria-label": strings.loading,
+			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-3 w-24 animate-pulse rounded theme-muted-panel"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-3 w-36 animate-pulse rounded theme-muted-panel"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: strings.loading
+				})
+			]
+		}) : children ? /* @__PURE__ */ jsx("div", {
+			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3 text-[13px]",
+			children
+		}) : null]
+	});
+}
+var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
+/** One detail line of a hover card: a leading icon and its content. With
+* `onClick` the line is a button. */
+function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick }) {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: cx("min-w-0", truncate && "truncate"),
+		children
+	})] });
+	const alignClass = align === "start" ? "items-start" : "items-center";
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick,
+		className: cx(rowClasses, alignClass, "-mx-1 max-w-full rounded px-1 py-0.5 text-left transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)"),
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		title,
+		className: cx(rowClasses, alignClass),
+		children: content
+	});
+}
+//#endregion
+export { actionsColumnWidth as A, GroupRow as C, NAME_MIN_WIDTH_PX as D, ListSkeleton as E, stickyTabsClasses as F, stickyTabsUnderHeaderClasses as I, stickyToolbarClasses as L, listTableProps as M, ActionToolbar as N, NameCell as O, ToolbarButton as P, useListNavigate as S, ListError as T, useListView as _, useHoverCard as a, ListRow as b, ListCount as c, ListDisplayMenu as d, ListFilterMenu as f, FAVORITE_ORDER as g, DEFAULT_ORDER as h, HoverCardSurface as i, listTableFixedProps as j, RowSelectCheckbox as k, ListSearchControl as l, isTextEntryContext as m, HoverCardTrigger as n, LIST_PAGE_SIZES as o, listControlButtonClasses as p, UserHoverCard as r, ListPager as s, HoverCardRow as t, useListSearch as u, ListColumns as v, ListActionsHeader as w, ListRowActionsProvider as x, ListPage as y };

package/dist/components/AddMenu.d.ts

@@ -5,6 +5,7 @@ export interface HeaderAddMenuItem {
     to?: string;
     onSelect?: () => void;
     disabled?: boolean;
+    hint?: string | undefined;
     separatorAbove?: boolean;
 }
 export declare function AddMenu({ items, label, buttonClassName, zClassName, children, }: {

package/dist/components/Avatar.d.ts

@@ -0,0 +1,13 @@
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+export interface AvatarProps {
+    /** Image URL; absent or failing to load shows the initials of `name`. */
+    src?: string | null | undefined;
+    name?: string | undefined;
+    size?: AvatarSize | undefined;
+    status?: AvatarStatus | undefined;
+    className?: string | undefined;
+}
+/** Up to two initials: the first and last word of a name split on spaces and dots. */
+export declare function avatarInitials(name: string | undefined): string;
+export declare function Avatar({ src, name, size, status, className, }: AvatarProps): import("react").JSX.Element;

package/dist/components/Button.d.ts

@@ -13,6 +13,7 @@ interface MethodButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label: string;
     description?: string;
     href?: string;
+    loading?: boolean;
 }
-export declare function MethodButton({ icon, label, description, href, className, ...props }: MethodButtonProps): import("react").JSX.Element;
+export declare function MethodButton({ icon, label, description, href, loading, disabled, className, ...props }: MethodButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/Dropdown.d.ts

@@ -24,5 +24,7 @@ export interface IProps {
     /** Label for the toggle row hiding a category's collapsible options. */
     collapsedLabel?: (count: number) => string;
     portalEl?: HTMLElement;
+    /** Smaller option rows and text, for dense toolbars. */
+    compact?: boolean | undefined;
 }
 export default function Dropdown(props: IProps): import("react").JSX.Element;

package/dist/components/Provider.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { RunLink } from '../workflow/types.js';
 export type UIToastId = string | number;
 export interface UIToastOptions {
     toastId?: UIToastId;
@@ -54,6 +55,7 @@ export interface UIStrings {
         create: string;
         remove: string;
         sort: string;
+        userAvatar: string;
     };
     dropdown: {
         select: (type: string) => string;
@@ -321,7 +323,15 @@ export interface UIStrings {
         readOnlyDescription: string;
         readOnlyForced: string;
     };
+    time: {
+        now: string;
+        minutes: (n: number) => string;
+        hours: (n: number) => string;
+        days: (n: number) => string;
+        years: (n: number) => string;
+    };
     list: {
+        copyMenu: string;
         copy: (label: string) => string;
         copied: (label: string) => string;
         couldntCopy: (label: string) => string;
@@ -380,6 +390,7 @@ export interface RunFileResult {
     isLoading: boolean;
     error: unknown;
 }
+export type PersistedStateHook = <T>(key: string, defaultValue: T) => [T, Dispatch<SetStateAction<T>>];
 export interface UIData {
     /**
      * Host-bound hook resolving a file in a run's artifact tree (logs, scripts).
@@ -406,6 +417,49 @@ export interface UIData {
     }) => Promise<{
         error?: string;
     }>;
+    usePersistedState: PersistedStateHook;
+    /**
+     * Repository completions for `uses:`, bound by the host because the credential
+     * lives on the platform. Absent, those completions no-op.
+     */
+    repoSuggestions?: {
+        refs: (repo: string) => Promise<RepoRef[]>;
+        files: (repo: string, ref: string, path: string) => Promise<RepoEntry[]>;
+        file: (repo: string, ref: string, path: string) => Promise<string>;
+        repos: (owner: string) => Promise<RepoSummary[]>;
+        gitlabProjects: (search: string, host?: string) => Promise<GitlabProject[]>;
+        owners: (provider: 'github' | 'gitlab', search: string, host?: string) => Promise<RepoOwner[]>;
+    };
+}
+/** One branch, tag or commit a `uses:` reference can name. */
+export interface RepoRef {
+    name: string;
+    kind: string;
+    detail: string;
+}
+/** One repository in an owner listing. */
+export interface RepoSummary {
+    name: string;
+    description: string;
+    private: boolean;
+}
+/** One account, organization or group a repository can live under. */
+export interface RepoOwner {
+    name: string;
+    kind: string;
+    host?: string | undefined;
+}
+/** One GitLab project, with the server a $host must name to reach it. */
+export interface GitlabProject {
+    path: string;
+    host: string;
+    description: string;
+    private: boolean;
+}
+/** One entry in a repository directory listing. */
+export interface RepoEntry {
+    path: string;
+    type: 'blob' | 'tree';
 }
 import type { FieldComponent } from '../form/fieldRegistry.js';
 import type { PageHeaderCrumb } from './PageHeader.js';
@@ -431,11 +485,12 @@ export interface UISlots {
      * renders fields inside a Suspense boundary.
      */
     formFields?: Record<string, FieldComponent>;
-    /** Sessions block for a run's sidebar; absent hides the section. */
+    /** Links and sessions block for a run's sidebar; absent hides the section. */
     runSessions?: (args: {
         runId: string;
         runNumber: number;
         runActive: boolean;
+        links?: Record<string, RunLink> | undefined;
     }) => ReactNode;
     /** Rich read-only YAML viewer; absent falls back to a plain <pre>. */
     yamlViewer?: (args: {
@@ -488,9 +543,11 @@ export declare function useNavigation(): UINavigation;
 export declare function useSlots(): UISlots;
 export declare function useWorkflowJsonResolver(): ((ref: WorkflowJsonRef) => Promise<unknown>) | undefined;
 export declare function useProvisionCorsRules(): UIData['provisionCorsRules'];
+export declare function useRepoSuggestions(): UIData['repoSuggestions'];
 export declare function useRunFile(slug: string, path: string | null, options?: {
     refreshInterval?: number;
 }): RunFileResult;
+export declare function usePersistedState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>];
 export declare function UIProvider({ notify, strings, navigation, data, slots, children, }: {
     notify?: Partial<UINotify>;
     strings?: {

package/dist/components/SectionHeader.d.ts

@@ -1,6 +1,8 @@
 interface ISectionHeaderProps {
     className?: string;
+    /** 'sm' heads a group inside a page rather than the page's own section. */
+    size?: 'md' | 'sm';
     children: React.ReactNode;
 }
-export default function SectionHeader({ children, className, }: ISectionHeaderProps): import("react").JSX.Element;
+export default function SectionHeader({ children, className, size, }: ISectionHeaderProps): import("react").JSX.Element;
 export {};

package/dist/components/StatusBadge.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
 interface StatusBadgeProps {
     /** Badge content */
     children: ReactNode;
@@ -7,12 +7,17 @@ interface StatusBadgeProps {
     variant?: BadgeVariant;
     /** Show animated pulse indicator */
     pulse?: boolean;
+    /** Show a still indicator in the variant's colour */
+    dot?: boolean;
     /** Size */
     size?: 'sm' | 'md';
     /** Additional class */
     className?: string;
 }
-export declare function StatusBadge({ children, variant, pulse, size, className, }: StatusBadgeProps): import("react").JSX.Element;
+/** A line of text in a variant's colour, for a status that stands beside a
+ *  dot rather than inside a badge. */
+export declare function statusTextClass(variant: BadgeVariant): string;
+export declare function StatusBadge({ children, variant, pulse, dot, size, className, }: StatusBadgeProps): import("react").JSX.Element;
 interface StatusDotProps {
     variant?: BadgeVariant;
     pulse?: boolean;

package/dist/components/relativeTime.d.ts

@@ -0,0 +1,15 @@
+import { DateTime } from 'luxon';
+export declare function compactRelativeMinutes(minutes: number, t: {
+    now: string;
+    minutes: (n: number) => string;
+    hours: (n: number) => string;
+    days: (n: number) => string;
+    years: (n: number) => string;
+}): string;
+/** A clock that re-reads itself, so "5m" ages while the page sits open, with
+ *  the abbreviated form a row has room for. */
+export declare function useRelativeTime(): {
+    now: DateTime;
+    compact: (iso: string | undefined) => string;
+    compactMinutes: (minutes: number) => string;
+};

package/dist/editor/index.js

@@ -1,2 +1,2 @@
-import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-Ko3zX22Y.js";
+import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-9_uVtUyy.js";
 export { Editor, EditorField, FormCodePanel, defineEditorThemes, getThemeName, setupMonacoWorkers };

package/dist/editor/usesGitlab.d.ts

@@ -0,0 +1,97 @@
+/** Pure helpers behind the gitlab/ uses: completion, kept out of Monaco.tsx so they can
+ * be tested without loading the editor. */
+export interface MonacoRange {
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+}
+interface LineReader {
+    getLineContent: (line: number) => string;
+}
+/** Splits GROUP/PROJECT@REF; the ref is null when no @ has been typed yet. */
+export declare function splitAtRef(typed: string): [string, string | null];
+/** What to insert for a chosen project, given what is already typed. A typed prefix is
+ * completed like the github one; a mid-path match has to replace what is there. */
+export declare function projectInsert(typed: string, path: string): {
+    text: string;
+    replace: boolean;
+};
+/** The $host the step pins, or undefined. Quotes and a trailing comment are stripped,
+ * so a pinned host is recognised however it was written. */
+export declare function stepHostAbove(model: LineReader, usesLine: number, maxLines?: number): string | undefined;
+/** A YAML scalar as written: quotes removed, a trailing comment dropped. */
+export declare function unquoteScalar(raw: string): string;
+/** A missing $host already means gitlab.com, so naming it adds nothing. */
+export declare const DEFAULT_GITLAB_HOST = "gitlab.com";
+/** How to add `$host` to a step. Always an edit of its own: monaco re-indents a
+ * multi-line insertText, and the cursor has to stay after the project. */
+export declare function hostCompletion(model: LineReader & {
+    getLineCount: () => number;
+}, usesLine: number, host: string): {
+    appendText: string;
+    edits: {
+        range: MonacoRange;
+        text: string;
+    }[];
+};
+/** A trailing slash or @ after a known project is the ref separator, the way a trailing
+ * slash is for github/OWNER/REPO. The slash is swapped for @ when a ref is accepted. */
+export declare function refTrigger(typed: string, knownPaths: string[]): {
+    projectPath: string;
+    replaceSlash: boolean;
+} | undefined;
+/** What to ask the platform for when completing a project path: everything before the
+ * first slash. Typing deeper then filters that answer instead of asking again. */
+export declare function projectSearchKey(typed: string): string;
+/** Where a `$yaml:`/`$thumbnail:` value's files come from: the nearest `uses:` above,
+ * addressed the way the platform's file endpoint expects. A gitlab/ path carries no
+ * host, so the step's $host supplies it. */
+export declare function usesFileSource(model: LineReader, fromLine: number, maxLines?: number): {
+    repo: string;
+    ref: string;
+} | undefined;
+/** One entry of a repository tree. */
+export interface RepoTreeEntry {
+    path: string;
+    type: 'tree' | 'blob';
+}
+declare const FILE_VALUE_KINDS: {
+    $yaml: {
+        detail: string;
+        keep: (path: string) => boolean;
+    };
+    $thumbnail: {
+        detail: string;
+        keep: (path: string) => boolean;
+    };
+};
+/** Which of the two file-valued keys the cursor sits on, if either. */
+export declare function fileValueKey(textUntilCursor: string): keyof typeof FILE_VALUE_KINDS | undefined;
+/** The files worth offering for a `$yaml:`/`$thumbnail:` value, from whichever
+ * repository the step's `uses:` names. Empty when the line is not one of those keys,
+ * no `uses:` is above it, or the tree cannot be read. */
+export declare function fileValueSuggestions(model: LineReader, line: number, textUntilCursor: string, loadTree: (repo: string, ref: string) => Promise<RepoTreeEntry[]>): Promise<{
+    path: string;
+    detail: string;
+}[]>;
+/** Every $-prefixed key a step already sets, mapped to its value. Nothing already
+ * written is offered a second time, and an existing one must not suppress the rest. */
+export declare function specialKeysNearUses(model: LineReader & {
+    getLineCount: () => number;
+}, usesLineNumber: number): Map<string, string>;
+/** The same, for a with: block located by its own indentation. */
+export declare function specialKeysInWithBlock(model: LineReader & {
+    getLineCount: () => number;
+}, withLineNumber: number): Map<string, string>;
+/** Text to be inserted as a snippet, with the characters monaco's snippet parser would
+ * otherwise read as placeholders escaped. */
+export declare function snippetLiteral(text: string): string;
+/** How a completion inserts its text when a `$host` block has to travel with it. The
+ * cursor stop is what keeps the caret on the uses: line rather than after the block;
+ * without a block there is nothing to escape and it stays a plain insert. */
+export declare function completionInsert(text: string, appendText: string): {
+    insertText: string;
+    isSnippet: boolean;
+};
+export {};