@parallelworks/ui 0.83.3 → 0.84.1

package/dist/components/Loader.js

@@ -1,7 +1,9 @@
 import { cx } from "../cx.js";
 import { RunningIcon } from "../icons.js";
+import { pinnedAbove, scrollContainer } from "./stickyTop.js";
 import { useStrings } from "./Provider.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loader.tsx
 var RIPPLE_STAGGER_S = .22;
 var LOGO_RINGS = [
@@ -19,6 +21,10 @@ var fillClasses = {
 *  known, such as rows of a list, sketch it with `Skeleton` instead. */
 function Loader({ fill, ...props }) {
 	if (!fill) return /* @__PURE__ */ jsx(LoaderMark, { ...props });
+	if (fill === "content") return /* @__PURE__ */ jsx(ContentArea, { children: /* @__PURE__ */ jsx(LoaderMark, {
+		...props,
+		size: props.size ?? 48
+	}) });
 	return /* @__PURE__ */ jsx("div", {
 		className: fillClasses[fill],
 		children: /* @__PURE__ */ jsx(LoaderMark, {
@@ -68,5 +74,51 @@ function LoaderMark({ size = 48, label, variant = "spinner", inline = false, col
 		})]
 	});
 }
+/** Centers its content in the box of the scrolling region it sits in, which in an app with a
+*  sidebar is its content area, below what that region pins at its top and held to what of it
+*  the window shows; the window, where the document itself scrolls. It lays nothing out around
+*  it and takes no pointer. */
+function ContentArea({ children }) {
+	const anchor = useRef(null);
+	const [box, setBox] = useState(null);
+	useLayoutEffect(() => {
+		const el = anchor.current;
+		if (!el) return;
+		const area = scrollContainer(el);
+		if (area === el.ownerDocument.documentElement) return;
+		const view = el.ownerDocument.defaultView ?? window;
+		const pinned = pinnedAbove(el);
+		const place = () => {
+			const rect = area.getBoundingClientRect();
+			const chrome = Math.max(0, ...pinned.chrome.map((c) => c.getBoundingClientRect().bottom));
+			const top = Math.max(rect.top, chrome, 0);
+			const bottom = Math.min(rect.bottom, view.innerHeight);
+			setBox({
+				top,
+				left: rect.left,
+				width: rect.width,
+				height: Math.max(bottom - top, 0)
+			});
+		};
+		place();
+		view.addEventListener("resize", place);
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+		observer?.observe(area);
+		for (const chrome of pinned.chrome) observer?.observe(chrome);
+		return () => {
+			view.removeEventListener("resize", place);
+			observer?.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: anchor,
+		hidden: true
+	}), /* @__PURE__ */ jsx("div", {
+		"data-loader-area": "",
+		className: "pointer-events-none fixed inset-0 flex items-center justify-center",
+		style: box ?? void 0,
+		children
+	})] });
+}
 //#endregion
 export { Loader };

package/dist/components/MarkdownImpl.d.ts

@@ -1,3 +1,6 @@
 import 'katex/dist/katex.min.css';
 import type { MarkdownProps } from './Markdown.js';
+/** While a reply streams, a table's opening rows read as stray pipes until its
+ *  delimiter row arrives; they are held back until then. */
+export declare function withoutUnfinishedTable(text: string): string;
 export default function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.js

@@ -112,6 +112,20 @@ function makeCode(controls, diagrams) {
 		});
 	};
 }
+var TABLE_ROW = /^\s*\|/;
+var TABLE_DELIMITER = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?\s*$/;
+/** While a reply streams, a table's opening rows read as stray pipes until its
+*  delimiter row arrives; they are held back until then. */
+function withoutUnfinishedTable(text) {
+	if ((text.match(/^\s*(```|~~~)/gm)?.length ?? 0) % 2 === 1) return text;
+	const lines = text.split("\n");
+	let start = lines.length;
+	while (start > 0 && TABLE_ROW.test(lines[start - 1] ?? "")) start--;
+	if (start === lines.length) return text;
+	const rows = lines.slice(start);
+	if (rows.length >= 2 && TABLE_DELIMITER.test(rows[1] ?? "")) return text;
+	return lines.slice(0, start).join("\n");
+}
 function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact }) {
 	const needsMermaid = !!children && children.includes("```mermaid");
 	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
@@ -158,9 +172,9 @@ function MarkdownImpl({ children, isStreaming, controls, components, httpsImages
 				}),
 				...components
 			},
-			children: children || ""
+			children: (isStreaming ? withoutUnfinishedTable(children || "") : children) || ""
 		})
 	});
 }
 //#endregion
-export { MarkdownImpl as default };
+export { MarkdownImpl as default, withoutUnfinishedTable };

package/dist/components/RefreshButton.d.ts

@@ -14,8 +14,9 @@ export interface RefreshButtonProps {
     /** A button's look, `ghost` by default; `inline` is text-sized muted text with no box, for
      *  a line of details such as a header's "Updated 2 minutes ago". */
     variant?: ButtonVariant | 'inline' | undefined;
-    /** Only the icon shows, with "Refresh" as its name and tooltip. */
-    iconOnly?: boolean | undefined;
+    /** Only the icon shows, with "Refresh" as its name and tooltip. `phone` shows the label on a
+     *  wider screen and only the icon on a phone, the label still its name for a screen reader. */
+    iconOnly?: boolean | 'phone' | undefined;
     className?: string | undefined;
 }
 /** Fetches again on demand, and says so while it does, out loud too. */

package/dist/components/RefreshButton.js

@@ -7,6 +7,12 @@ import { useRelativeTime } from "./relativeTime.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RefreshButton.tsx
+var phoneSquares = {
+	xs: "max-sm:w-6 max-sm:px-0",
+	sm: "max-sm:w-7 max-sm:px-0",
+	md: "max-sm:w-8 max-sm:px-0",
+	lg: "max-sm:w-10 max-sm:px-0"
+};
 var inlineClasses = "inline-flex cursor-pointer items-center gap-1 rounded px-1 py-0.5 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) [&_svg]:size-3";
 /** Fetches again on demand, and says so while it does, out loud too. */
 function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md", variant = "ghost", iconOnly = false, className }) {
@@ -14,6 +20,8 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 	const [pending, setPending] = useState(false);
 	const busy = refreshing || pending;
 	const ago = useRelativeTime(updatedAt);
+	const phone = iconOnly === "phone";
+	const square = iconOnly === true;
 	const refresh = () => {
 		if (busy) return;
 		const result = onRefresh();
@@ -27,27 +35,30 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 		type: "button",
 		onClick: refresh,
 		"aria-busy": busy,
-		"aria-label": iconOnly ? t.refresh : void 0,
+		"aria-label": square ? t.refresh : void 0,
 		className: cx(variant === "inline" ? inlineClasses : buttonClasses({
 			variant,
 			size,
-			iconOnly
-		}), "group aria-busy:cursor-progress", className),
+			iconOnly: square
+		}), phone && variant !== "inline" && phoneSquares[size], "group aria-busy:cursor-progress", className),
 		children: [/* @__PURE__ */ jsx(RefreshIcon, {
 			"aria-hidden": "true",
 			className: cx("shrink-0 motion-reduce:animate-none motion-reduce:transition-none", busy ? "animate-spin" : "transition-transform duration-300 group-hover:rotate-180")
-		}), !iconOnly && (ago ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
-			className: "sr-only",
-			children: [t.refresh, ". "]
-		}), t.updated(ago)] }) : busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: t.refresh
-		}), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			children: t.refreshing
-		})] }) : t.refresh)]
+		}), !square && /* @__PURE__ */ jsx("span", {
+			className: phone ? "max-sm:sr-only" : void 0,
+			children: ago ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [t.refresh, ". "]
+			}), t.updated(ago)] }) : busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t.refresh
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: t.refreshing
+			})] }) : t.refresh
+		})]
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [square ? /* @__PURE__ */ jsx(Tooltip, {
 		content: t.refresh,
 		children: button
 	}) : button, /* @__PURE__ */ jsx("span", {

package/dist/components/RunStatusIcon.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentPropsWithRef } from 'react';
 import type { RunStatus } from '../engine.js';
 import { type Tone } from './tone.js';
 /** A status the icon shows: a run's, or one a host maps onto it, such as
@@ -6,7 +7,9 @@ export type RunStatusIconStatus = RunStatus | 'pending' | 'warning';
 /** The tone a run status reads in, so a badge that says the status in words matches the
  *  icon: `<StatusBadge variant={runStatusTone(status)}>`. */
 export declare function runStatusTone(status: RunStatusIconStatus): Tone;
-export interface RunStatusIconProps {
+/** Any other span attribute and the ref reach the icon's element, so it can be a Tooltip's or a
+ *  popover's direct child. */
+export interface RunStatusIconProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     status: RunStatusIconStatus;
     /** Names the icon in place of `strings.dag.statusLabel`, for a host's own status
      *  shown in a run's look, such as "Provisioning" as running. */
@@ -18,4 +21,4 @@ export interface RunStatusIconProps {
 /** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
  *  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
  *  `StatusBadge` with `runStatusTone`. */
-export declare function RunStatusIcon({ status, label: ownLabel, tooltip, className, }: RunStatusIconProps): import("react").JSX.Element;
+export declare function RunStatusIcon({ status, label: ownLabel, tooltip, className, ...rest }: RunStatusIconProps): import("react").JSX.Element;

package/dist/components/RunStatusIcon.js

@@ -71,12 +71,13 @@ function runStatusTone(status) {
 /** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
 *  is named by `label`, or else `strings.dag.statusLabel`. To say the status in words, use
 *  `StatusBadge` with `runStatusTone`. */
-function RunStatusIcon({ status, label: ownLabel, tooltip = false, className }) {
+function RunStatusIcon({ status, label: ownLabel, tooltip = false, className, ...rest }) {
 	const { dag } = useStrings();
 	const look = looks[status ?? ""];
 	const Icon = look.icon;
 	const label = ownLabel ?? dag.statusLabel(status ?? "");
 	const icon = /* @__PURE__ */ jsx("span", {
+		...rest,
 		...label ? {
 			role: "img",
 			"aria-label": label

package/dist/components/StatusBadge.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { type Tone } from './tone.js';
 /** A badge's tone: a status, or the theme's accent for something set apart that
  *  isn't a status, such as "New". */
@@ -13,7 +13,9 @@ declare const sizeClasses: {
     readonly md: 'gap-1.5 py-0.5 text-[11px] leading-4';
 };
 export type BadgeSize = keyof typeof sizeClasses;
-export interface StatusBadgeProps {
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface StatusBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     /** Badge content */
     children: ReactNode;
     /** Visual variant */
@@ -41,8 +43,10 @@ export interface StatusBadgeProps {
  *  dot rather than inside a badge. */
 export declare function statusTextClass(variant: BadgeVariant): string;
 /** A short status or label in a tone, such as "Running" or "Preview". */
-export declare function StatusBadge({ children, variant, emphasis, shape, caps, truncate, pulse, dot, size, render, className, }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export interface CountBadgeProps {
+export declare function StatusBadge({ children, variant, emphasis, shape, caps, truncate, pulse, dot, size, render, className, ref, ...rest }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface CountBadgeProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     count: number;
     /** Above it, the count reads as `max` and a plus, such as "99+". */
     max?: number | undefined;
@@ -64,12 +68,14 @@ export interface CountBadgeProps {
 }
 /** A number beside a link or tab, such as unread messages or items waiting,
  *  capped at `max` so a big count doesn't widen what it sits in. */
-export declare function CountBadge({ count, max, variant, emphasis, size, label, showZero, locale, className, }: CountBadgeProps): import("react").JSX.Element | null;
-interface StatusDotProps {
-    variant?: BadgeVariant;
-    pulse?: boolean;
-    size?: number;
-    className?: string;
+export declare function CountBadge({ count, max, variant, emphasis, size, label, showZero, locale, className, ...rest }: CountBadgeProps): import("react").JSX.Element | null;
+/** Any other span attribute and the ref reach its element, so it can be a Tooltip's or a popover's
+ *  direct child. */
+export interface StatusDotProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
+    variant?: BadgeVariant | undefined;
+    pulse?: boolean | undefined;
+    size?: number | undefined;
+    className?: string | undefined;
 }
-export declare function StatusDot({ variant, pulse, size, className, }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ variant, pulse, size, className, style, ...rest }: StatusDotProps): import("react").JSX.Element;
 export {};

package/dist/components/StatusBadge.js

@@ -3,6 +3,7 @@ import { toneFill, toneSurface, toneText } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/StatusBadge.tsx
 var emphasisClasses = {
 	soft: {
@@ -56,11 +57,12 @@ function statusTextClass(variant) {
 	return variant === "accent" ? "text-(--theme-link)" : toneText[variant];
 }
 /** A short status or label in a tone, such as "Running" or "Preview". */
-function StatusBadge({ children, variant = "default", emphasis = "soft", shape = "pill", caps = false, truncate = false, pulse = false, dot = false, size = "sm", render, className }) {
+function StatusBadge({ children, variant = "default", emphasis = "soft", shape = "pill", caps = false, truncate = false, pulse = false, dot = false, size = "sm", render, className, ref, ...rest }) {
 	const indicator = emphasis === "solid" ? "bg-current" : dotFill[variant];
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("span", {}),
-		props: {
+		ref,
+		props: mergeProps(rest, {
 			className: cx("inline-flex items-center border font-medium no-underline", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", sizeClasses[size], padClasses[shape][size], shapeClasses[shape], caps && "uppercase tracking-wider", truncate && "min-w-0 max-w-full", emphasisClasses[emphasis][variant], className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [
 				pulse && /* @__PURE__ */ jsxs("span", {
@@ -73,7 +75,7 @@ function StatusBadge({ children, variant = "default", emphasis = "soft", shape =
 					children
 				}) : children
 			] })
-		}
+		})
 	});
 }
 var countSizeClasses = {
@@ -82,12 +84,13 @@ var countSizeClasses = {
 };
 /** A number beside a link or tab, such as unread messages or items waiting,
 *  capped at `max` so a big count doesn't widen what it sits in. */
-function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", size = "md", label, showZero = false, locale, className }) {
+function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", size = "md", label, showZero = false, locale, className, ...rest }) {
 	const { common } = useStrings();
 	if (count <= 0 && !showZero) return null;
 	const number = new Intl.NumberFormat(locale);
 	const text = count > max ? common.countOverflow(number.format(max)) : number.format(count);
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
 		"data-count": count,
 		className: cx("inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums", countSizeClasses[size], emphasisClasses[emphasis][variant], className),
 		children: [text, label && /* @__PURE__ */ jsxs("span", {
@@ -96,10 +99,12 @@ function CountBadge({ count, max = 99, variant = "accent", emphasis = "solid", s
 		})]
 	});
 }
-function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
+function StatusDot({ variant = "default", pulse = false, size = 8, className, style, ...rest }) {
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
 		className: cx("relative inline-flex", className),
 		style: {
+			...style,
 			width: size,
 			height: size
 		},

package/dist/components/Table.d.ts

@@ -5,11 +5,21 @@ export type SortDirection = 'ascending' | 'descending' | 'none';
  *  height, such as a key and value list or a dashboard card's runs; `dense`
  *  sets small type in tight rows, for a panel of figures. */
 export type TableDensity = 'comfortable' | 'compact' | 'dense';
+/** What a list row asks of the cell in a place, through whatever component of the host's renders
+ *  it: its column's classes, content to show after its own, or that it shows stacked, under the
+ *  first cell's, as a line in place of a cell. */
+export interface CellPlacement {
+    className?: string | undefined;
+    after?: React.ReactNode;
+    stacked?: boolean | undefined;
+}
+/** Set by a list row around each of its cells; a `Table.Item` takes what it asks. */
+export declare const CellPlacementContext: React.Context<CellPlacement | null>;
 interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     /** Lets the text wrap; by default a cell keeps to one line. */
     wrap?: boolean;
 }
-declare function Item({ wrap, children, className, ...tdProps }: ItemProps): React.JSX.Element;
+declare function Item({ wrap, children, className, ...tdProps }: ItemProps): React.JSX.Element | null;
 interface HeaderProps {
     children?: React.ReactNode;
     className?: string | undefined;

package/dist/components/Table.js

@@ -1,7 +1,7 @@
 import { cx } from "../cx.js";
 import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
-import { Loader } from "./Loader.js";
 import { useStickyTop } from "./stickyTop.js";
+import { Loader } from "./Loader.js";
 import React, { createContext, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table.tsx
@@ -23,12 +23,23 @@ var headerY = {
 	dense: "py-1"
 };
 var cellX = "px-3";
+/** Set by a list row around each of its cells; a `Table.Item` takes what it asks. */
+var CellPlacementContext = createContext(null);
 function Item({ wrap = false, children, className, ...tdProps }) {
 	const density = useContext(DensityContext);
+	const placed = useContext(CellPlacementContext);
+	if (placed?.stacked) return React.Children.toArray(children).length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: "mt-1 flex min-w-0 items-center @[36rem]:hidden",
+		"data-stacked": true,
+		children
+	}) : null;
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		className: cx(cellX, cellY[density], wrap ? wrapY[density] : "whitespace-nowrap", className),
-		children
+		className: cx(cellX, cellY[density], wrap ? wrapY[density] : "whitespace-nowrap", className, placed?.className),
+		children: /* @__PURE__ */ jsxs(CellPlacementContext, {
+			value: null,
+			children: [children, placed?.after]
+		})
 	});
 }
 var sortIcons = {
@@ -107,4 +118,4 @@ function Table({ density = "comfortable", columns, caps = true, flush = false, c
 Table.Header = Header;
 Table.Item = Item;
 //#endregion
-export { Table };
+export { CellPlacementContext, Table };

package/dist/components/Tabs.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
+import { useStickyTop } from "./stickyTop.js";
 import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
-import { useStickyTop } from "./stickyTop.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";

package/dist/components/Tag.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export interface TagStyle {
     /** Monospace text, for a value read as code, such as a key=value label. */
     mono?: boolean | undefined;
@@ -8,7 +8,9 @@ export interface TagStyle {
 /** The one tag look: a pill with a hairline border and 11px text. Another component's chip,
  *  such as a picker's chosen value, uses it to look the same. */
 export declare function tagClasses({ mono, caps }?: TagStyle): string;
-export interface TagProps extends TagStyle {
+/** Any other attribute and the ref reach the tag's element, its link with `href` and no `onRemove`,
+ *  so it can be a Tooltip's or a popover's direct child. */
+export interface TagProps extends TagStyle, Omit<ComponentPropsWithRef<'span'>, 'children' | 'className' | 'color' | 'title'> {
     children: ReactNode;
     /** A dot before the text in this color, any CSS color, such as a label's own. */
     color?: string | undefined;
@@ -23,7 +25,7 @@ export interface TagProps extends TagStyle {
 }
 /** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
  *  with `onRemove`. */
-export declare function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, }: TagProps): import("react").JSX.Element;
+export declare function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, ref, ...rest }: TagProps): import("react").JSX.Element;
 /** One tag of a `TagList`: a string is its own key and label. */
 export type TagItem = string | {
     key: string;

package/dist/components/Tag.js

@@ -13,7 +13,7 @@ function tagClasses({ mono = false, caps = false } = {}) {
 }
 /** A tag or label on a thing: a pill with an optional color dot, a link with `href`, and an ×
 *  with `onRemove`. */
-function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className }) {
+function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps, className, ref, ...rest }) {
 	const { dropdown } = useStrings();
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [color && /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
@@ -29,17 +29,23 @@ function Tag({ children, color, href, onRemove, removeLabel, title, mono, caps,
 	}), className);
 	const hover = "transition-colors hover:bg-(--theme-hover)";
 	if (!onRemove) return href ? /* @__PURE__ */ jsx(AppLink, {
+		...rest,
+		ref,
 		href,
 		title,
 		className: cx(classes, hover, "no-underline"),
 		children: content
 	}) : /* @__PURE__ */ jsx("span", {
+		...rest,
+		ref,
 		title,
 		className: classes,
 		children: content
 	});
 	const name = removeLabel ?? dropdown.removeValue(typeof children === "string" ? children : "");
 	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		ref,
 		title,
 		className: cx(classes, "pr-0.5"),
 		children: [href ? /* @__PURE__ */ jsx(AppLink, {

package/dist/components/relativeTime.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type DateTimeStyle, type TimeValue } from '../format.js';
 export type { TimeValue };
 /** Something worked out from the time, kept current by one clock that ticks
@@ -15,7 +15,8 @@ export type RelativeTimeFormat = 'long' | 'compact';
 /** How long ago, or until, `value` is, kept current as time passes. Empty for
  *  a missing or invalid time. */
 export declare function useRelativeTime(value: TimeValue, format?: RelativeTimeFormat): string;
-export interface RelativeTimeProps {
+/** Any other attribute and the ref reach the `<time>`, so it can be a popover's direct child. */
+export interface RelativeTimeProps extends Omit<ComponentPropsWithRef<'time'>, 'children' | 'className' | 'dateTime'> {
     value: TimeValue;
     format?: RelativeTimeFormat | undefined;
     /** Shown in place of a missing or invalid time, such as "Never" or "—". Default nothing. */
@@ -31,17 +32,19 @@ export interface RelativeTimeProps {
 /** A time shown relative to now ("5 minutes ago", or "5m" compact), counting
  *  on while it stays on screen, with the exact time on hover. Renders the
  *  `fallback`, or nothing, for a missing time. */
-export declare function RelativeTime({ value, format, fallback, exact, show, className, }: RelativeTimeProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare function RelativeTime({ value, format, fallback, exact, show, className, ...rest }: RelativeTimeProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 /** Milliseconds from `start` to `end`, or to now while `running`, in whole
  *  seconds so it changes at most once a second. Running defaults to having no
  *  end; pass false for something that stopped without recording when. Null
  *  without a start. */
 export declare function useElapsed(start: TimeValue, end?: TimeValue, running?: boolean): number | null;
-/** How long something took, or has taken so far while it runs: 45s, 2m 13s.
- *  Renders nothing without a start. */
-export declare function Elapsed({ start, end, running, className, }: {
+/** Any other attribute and the ref reach the `<time>`, so it can be a Tooltip's direct child. */
+export interface ElapsedProps extends Omit<ComponentPropsWithRef<'time'>, 'children' | 'className' | 'dateTime'> {
     start: TimeValue;
     end?: TimeValue;
-    running?: boolean;
-    className?: string;
-}): import("react").JSX.Element | null;
+    running?: boolean | undefined;
+    className?: string | undefined;
+}
+/** How long something took, or has taken so far while it runs: 45s, 2m 13s.
+ *  Renders nothing without a start. */
+export declare function Elapsed({ start, end, running, className, ...rest }: ElapsedProps): import("react").JSX.Element | null;

package/dist/components/relativeTime.js

@@ -100,7 +100,7 @@ function useRelativeTime(value, format = "long") {
 /** A time shown relative to now ("5 minutes ago", or "5m" compact), counting
 *  on while it stays on screen, with the exact time on hover. Renders the
 *  `fallback`, or nothing, for a missing time. */
-function RelativeTime({ value, format = "long", fallback = null, exact = "seconds", show = "relative", className }) {
+function RelativeTime({ value, format = "long", fallback = null, exact = "seconds", show = "relative", className, ...rest }) {
 	const label = useRelativeTime(value, format);
 	const locale = useLocale();
 	const time = toDateTime(value);
@@ -108,6 +108,7 @@ function RelativeTime({ value, format = "long", fallback = null, exact = "second
 	const absolute = formatDateTime(time, exact || "seconds", locale);
 	const [text, tip] = show === "absolute" ? [absolute, label] : [label, exact ? absolute : null];
 	const element = /* @__PURE__ */ jsx("time", {
+		...rest,
 		dateTime: time.toISO() ?? void 0,
 		className,
 		children: text
@@ -129,11 +130,12 @@ function useElapsed(start, end, running = toDateTime(end) === null) {
 }
 /** How long something took, or has taken so far while it runs: 45s, 2m 13s.
 *  Renders nothing without a start. */
-function Elapsed({ start, end, running, className }) {
+function Elapsed({ start, end, running, className, ...rest }) {
 	const elapsed = useElapsed(start, end, running);
 	const locale = useLocale();
 	if (elapsed === null) return null;
 	return /* @__PURE__ */ jsx("time", {
+		...rest,
 		dateTime: Duration.fromMillis(elapsed).toISO() ?? void 0,
 		className,
 		children: formatDuration(elapsed, locale)

package/dist/components/stickyTop.d.ts

@@ -1,6 +1,15 @@
 /** Pins a bar to the top of its scroller, over what scrolls under it.
  *  `useStickyTop` moves it below whatever else is pinned there. */
 export declare const stickyClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
+/** The box a sticky element sticks to: its nearest ancestor that scrolls, or
+ *  the document's when none does. */
+export declare function scrollContainer(el: Element): Element;
+/** What a page pins at the top of `el`'s scroller over it, such as a page header and a toolbar:
+ *  those elements, and how far below the scroller's top their bottom edge sits. */
+export declare function pinnedAbove(el: Element): {
+    chrome: HTMLElement[];
+    bottom: number;
+};
 /**
  * Pins a `sticky` element just below whatever its scroller already pins at
  * the top, such as a page header, a toolbar and a tab row, rather than at

package/dist/components/stickyTop.js

@@ -47,6 +47,15 @@ function pinnedBottom(chrome) {
 	const height = chrome.getBoundingClientRect().height;
 	return height > 0 ? (Number.parseFloat(getComputedStyle(chrome).top) || 0) + height : 0;
 }
+/** What a page pins at the top of `el`'s scroller over it, such as a page header and a toolbar:
+*  those elements, and how far below the scroller's top their bottom edge sits. */
+function pinnedAbove(el) {
+	const { chrome } = chromeAbove(el, scrollContainer(el));
+	return {
+		chrome,
+		bottom: Math.max(0, ...chrome.map(pinnedBottom))
+	};
+}
 /**
 * Pins a `sticky` element just below whatever its scroller already pins at
 * the top, such as a page header, a toolbar and a tab row, rather than at
@@ -95,4 +104,4 @@ function useStickyTop(el, enabled) {
 	}, [el, enabled]);
 }
 //#endregion
-export { stickyClasses, useStickyTop };
+export { pinnedAbove, scrollContainer, stickyClasses, useStickyTop };

package/dist/graph/DependencyGraph.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon, FileTextIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
+import { useStickyTop } from "../components/stickyTop.js";
 import { Loader } from "../components/Loader.js";
 import { useLocale, useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
@@ -10,7 +11,6 @@ import { DisclosurePanel } from "../components/Disclosure.js";
 import { formatDateTime } from "../format.js";
 import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
-import { useStickyTop } from "../components/stickyTop.js";
 import { Tabs } from "../components/Tabs.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { initializeValues } from "../form/lib.js";