@parallelworks/ui 0.44.0 → 0.46.0

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
 import { keyedByContent } from "./keys.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useState } from "react";
@@ -19,21 +19,18 @@ function KbdShortcut({ keys }) {
 	});
 }
 function TooltipPopup({ content, shortcut, side }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		container: portalContainer(),
-		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-			side,
-			sideOffset: 8,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
-				className: `max-w-xs ${tipClassName}`,
-				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
-					className: "inline-flex items-center gap-2",
-					children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
-				}) : content]
-			})
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side,
+		sideOffset: 8,
+		className: positionerClassName,
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			className: `max-w-xs ${tipClassName}`,
+			children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-2",
+				children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
+			}) : content]
 		})
-	});
+	}) });
 }
 /** One popup serves every Tooltip below it, so each anchor costs only a trigger.
 *  UIProvider mounts it; nothing else needs to. */

package/dist/components/buttonClasses.d.ts

@@ -0,0 +1,18 @@
+/** `primary` is the one action a view leads to; `secondary` sits beside it;
+ *  `outline` and `ghost` are toolbar and inline actions, bordered or not;
+ *  `danger` confirms what can't be undone. */
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'xs' | 'sm' | 'md';
+export interface ButtonStyle {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    /** A square holding only an icon. */
+    iconOnly?: boolean | undefined;
+}
+/** The one look for anything pressed: a button, or a link or popup trigger
+ *  that acts as one. `Button` and `IconButton` apply it; use it directly on a
+ *  host link or another component's trigger. Outline and ghost read as
+ *  selected for a pressed toggle (`aria-pressed`), an open popup's trigger
+ *  (`data-popup-open`, which Base UI triggers set), or a button that shows its
+ *  state some other way, such as by its label (`data-selected`). */
+export declare function buttonClasses({ variant, size, iconOnly, }?: ButtonStyle): string;

package/dist/components/buttonClasses.js

@@ -0,0 +1,31 @@
+import { cx } from "../cx.js";
+//#region src/components/buttonClasses.ts
+var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+var variants = {
+	primary: "bg-(--theme-accent) text-(--theme-accent-text) hover:not-disabled:not-aria-disabled:bg-(--theme-accent-hover)",
+	secondary: "border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) hover:not-disabled:not-aria-disabled:bg-(--theme-hover)",
+	outline: "border border-(--theme-border) text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:border-(--theme-link) aria-pressed:text-(--theme-app) data-selected:border-(--theme-link) data-selected:text-(--theme-app) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
+	ghost: "text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:bg-(--theme-muted-panel-bg) aria-pressed:text-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-link) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
+	danger: "bg-(--theme-error) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error)/90"
+};
+var sizes = {
+	xs: "h-6 px-2 text-xs [&_svg]:size-3",
+	sm: "h-7 px-2.5 text-xs [&_svg]:size-3.5",
+	md: "h-8 px-3 text-sm [&_svg]:size-4"
+};
+var squares = {
+	xs: "size-6 text-xs [&_svg]:size-3",
+	sm: "size-7 text-xs [&_svg]:size-3.5",
+	md: "size-8 text-sm [&_svg]:size-4"
+};
+/** The one look for anything pressed: a button, or a link or popup trigger
+*  that acts as one. `Button` and `IconButton` apply it; use it directly on a
+*  host link or another component's trigger. Outline and ghost read as
+*  selected for a pressed toggle (`aria-pressed`), an open popup's trigger
+*  (`data-popup-open`, which Base UI triggers set), or a button that shows its
+*  state some other way, such as by its label (`data-selected`). */
+function buttonClasses({ variant = "secondary", size = "md", iconOnly = false } = {}) {
+	return cx(base, variants[variant], (iconOnly ? squares : sizes)[size]);
+}
+//#endregion
+export { buttonClasses };

package/dist/components/codeTheme.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeRegistration } from 'shiki';
+/** The light and dark registrations; they're the same tokens, so either mode follows the theme. */
+export declare const CODE_THEMES: [ThemeRegistration, ThemeRegistration];
+/** The name to highlight with when one theme is enough. */
+export declare const CODE_THEME: ThemeRegistration;

package/dist/components/codeTheme.js

@@ -0,0 +1,93 @@
+//#region src/components/codeTheme.ts
+var v = (token) => `var(--theme-code-${token})`;
+/** TextMate scopes for each code token. */
+var SCOPES = [
+	[
+		"comment",
+		["comment", "punctuation.definition.comment"],
+		"italic"
+	],
+	["keyword", [
+		"keyword",
+		"storage",
+		"storage.type",
+		"storage.modifier",
+		"constant.language",
+		"markup.heading",
+		"markup.bold"
+	]],
+	["string", [
+		"string",
+		"markup.inline.raw",
+		"markup.fenced_code",
+		"string.regexp"
+	]],
+	["number", [
+		"constant.numeric",
+		"constant.character",
+		"constant.other",
+		"variable.other.constant"
+	]],
+	["function", [
+		"entity.name.function",
+		"support.function",
+		"meta.function-call.generic"
+	]],
+	["type", [
+		"entity.name.type",
+		"entity.name.class",
+		"entity.other.inherited-class",
+		"support.type",
+		"support.class"
+	]],
+	["property", [
+		"entity.name.tag",
+		"entity.other.attribute-name",
+		"variable.other.property",
+		"variable.other.object.property",
+		"support.type.property-name",
+		"meta.object-literal.key",
+		"markup.underline.link"
+	]],
+	["text", [
+		"variable",
+		"punctuation",
+		"keyword.operator",
+		"meta.embedded"
+	]]
+];
+function registration(name, type) {
+	return {
+		name,
+		type,
+		fg: v("text"),
+		bg: v("bg"),
+		colors: {
+			"editor.background": v("bg"),
+			"editor.foreground": v("text")
+		},
+		tokenColors: [
+			...SCOPES.map(([token, scope, fontStyle]) => ({
+				scope,
+				settings: {
+					foreground: v(token),
+					...fontStyle ? { fontStyle } : {}
+				}
+			})),
+			{
+				scope: ["markup.inserted"],
+				settings: { foreground: "var(--theme-ansi-green)" }
+			},
+			{
+				scope: ["markup.deleted"],
+				settings: { foreground: "var(--theme-ansi-red)" }
+			}
+		]
+	};
+}
+/** The light and dark registrations; they're the same tokens, so either mode follows the theme. */
+var CODE_THEMES = [registration("theme-code-light", "light"), registration("theme-code-dark", "dark")];
+/** The name to highlight with when one theme is enough. */
+var CODE_THEME = CODE_THEMES[0];
+//#endregion
+export { CODE_THEME, CODE_THEMES };

package/dist/components/comboboxItems.d.ts

@@ -15,7 +15,7 @@ export interface ComboboxGroup<Value = string> {
     /** Empty for a group that only reports a status; a search finds it by its heading. */
     items: readonly ComboboxLeaf<Value>[];
 }
-/** One item: an option, or a bare string labelled by its value. */
+/** One item: an option, or a bare string labeled by its value. */
 export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
 /** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
 export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];

package/dist/components/fieldBox.d.ts

@@ -0,0 +1,14 @@
+export type FieldBoxSize = 'sm' | 'md';
+export interface FieldBoxOptions {
+    size?: FieldBoxSize | undefined;
+    /** Grows with its content, as a textarea or a field of chips does, instead of holding one line. */
+    multiline?: boolean | undefined;
+    /** False when what is inside pads itself, as an input beside buttons does. */
+    padded?: boolean | undefined;
+    /** Drawn around the element that takes focus rather than on it, as for an input with
+     *  buttons beside it: focus, invalid and disabled then follow what is inside. */
+    within?: boolean | undefined;
+}
+/** The box every input-like control draws: text inputs, textareas, and the triggers of
+ *  pickers. Invalid follows `aria-invalid`, disabled follows `disabled` or `data-disabled`. */
+export declare function fieldBox({ size, multiline, padded, within, }?: FieldBoxOptions): string;

package/dist/components/fieldBox.js

@@ -0,0 +1,29 @@
+import { cx } from "../cx.js";
+//#region src/components/fieldBox.ts
+var sizes = {
+	sm: {
+		height: "h-7",
+		minHeight: "min-h-7",
+		px: "px-2",
+		py: "py-1",
+		text: "text-xs"
+	},
+	md: {
+		height: "h-9",
+		minHeight: "min-h-9",
+		px: "px-3",
+		py: "py-2",
+		text: "text-sm"
+	}
+};
+var base = "w-full min-w-0 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-muted-text-color)";
+var own = cx("focus-visible:border-(--theme-accent) focus-visible:ring-1 focus-visible:ring-(--theme-accent)", "aria-invalid:border-(--theme-error) aria-invalid:focus-visible:ring-(--theme-error)", "disabled:cursor-not-allowed disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
+var inside = cx("has-[:focus-visible]:border-(--theme-accent) has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-(--theme-accent)", "has-[[aria-invalid=true]]:border-(--theme-error) has-[[aria-invalid=true]:focus-visible]:ring-(--theme-error)", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
+/** The box every input-like control draws: text inputs, textareas, and the triggers of
+*  pickers. Invalid follows `aria-invalid`, disabled follows `disabled` or `data-disabled`. */
+function fieldBox({ size = "md", multiline = false, padded = true, within = false } = {}) {
+	const box = sizes[size];
+	return cx(base, box.text, multiline ? box.minHeight : box.height, padded && box.px, padded && multiline && box.py, within ? inside : own);
+}
+//#endregion
+export { fieldBox };

package/dist/components/floating.d.ts

@@ -1,14 +1,35 @@
-/** Popups portal into the host's .ds-root when it has one, so they inherit the
- *  design system's CSS variables; undefined lets the portal use document.body. */
-export declare function portalContainer(): HTMLElement | undefined;
 /** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
-export declare const positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
 /** A row in a panel. */
-export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
 export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
 /** A hover card's surface; the card sets its own width and padding. */
 export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+/** Where a popup opens: under an element, such as the button that opened it, or
+ *  at a pointer event's point, which then moves with the element it landed on. */
+export type FloatingAnchor = Element | {
+    clientX: number;
+    clientY: number;
+    currentTarget?: EventTarget | null;
+};
+/** A popup positioner's anchor: an element, or a point that reads its place each frame. */
+export type PositionerAnchor = Element | {
+    getBoundingClientRect: () => DOMRect | ReturnType<typeof pointRect>;
+    contextElement?: Element;
+};
+declare function pointRect(x: number, y: number): {
+    x: number;
+    y: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export declare function toPositionerAnchor(at: FloatingAnchor): PositionerAnchor;
+export {};

package/dist/components/floating.js

@@ -1,21 +1,43 @@
 //#region src/components/floating.ts
-/** Popups portal into the host's .ds-root when it has one, so they inherit the
-*  design system's CSS variables; undefined lets the portal use document.body. */
-function portalContainer() {
-	if (typeof document === "undefined") return;
-	return document.querySelector(".ds-root") ?? void 0;
-}
 /** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
-var positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
 /** A row in a panel. */
-var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
 var tipClassName = `rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
 var tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
 /** A hover card's surface; the card sets its own width and padding. */
 var cardClassName = `overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
+function pointRect(x, y) {
+	return {
+		x,
+		y,
+		left: x,
+		top: y,
+		right: x,
+		bottom: y,
+		width: 0,
+		height: 0
+	};
+}
+function toPositionerAnchor(at) {
+	if (at instanceof Element) return at;
+	const { clientX, clientY } = at;
+	const on = at.currentTarget instanceof Element ? at.currentTarget : null;
+	if (!on) return { getBoundingClientRect: () => pointRect(clientX, clientY) };
+	const start = on.getBoundingClientRect();
+	const dx = clientX - start.left;
+	const dy = clientY - start.top;
+	return {
+		contextElement: on,
+		getBoundingClientRect: () => {
+			const now = on.getBoundingClientRect();
+			return pointRect(now.left + dx, now.top + dy);
+		}
+	};
+}
 //#endregion
-export { cardClassName, panelClassName, panelItemClassName, portalContainer, positionerClassName, tipArrowClassName, tipClassName };
+export { cardClassName, panelClassName, panelItemClassName, positionerClassName, tipArrowClassName, tipClassName, toPositionerAnchor };

package/dist/{ai/ui/codeBreaks.js → components/markdownCodeBreaks.js}

@@ -1,4 +1,4 @@
-//#region src/ai/ui/codeBreaks.ts
+//#region src/components/markdownCodeBreaks.ts
 var BREAK_AFTER = /(?<=[/])/;
 function withBreaks(text) {
 	const pieces = text.split(BREAK_AFTER);

package/dist/components/persistedState.d.ts

@@ -0,0 +1,2 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export declare function useLocalPersistedState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>];

package/dist/components/persistedState.js

@@ -0,0 +1,63 @@
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+//#region src/components/persistedState.ts
+var listeners = /* @__PURE__ */ new Map();
+var memory = /* @__PURE__ */ new Map();
+var MISSING = Symbol("missing");
+function readRaw(key) {
+	const held = memory.get(key);
+	if (held !== void 0) return held;
+	try {
+		return globalThis.localStorage?.getItem(key) ?? null;
+	} catch {
+		return null;
+	}
+}
+function writeRaw(key, raw) {
+	try {
+		if (raw === null) globalThis.localStorage?.removeItem(key);
+		else globalThis.localStorage?.setItem(key, raw);
+		memory.delete(key);
+	} catch {
+		if (raw === null) memory.delete(key);
+		else memory.set(key, raw);
+	}
+}
+function parse(raw) {
+	if (raw === null) return MISSING;
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return MISSING;
+	}
+}
+function subscribe(key, listener) {
+	let keyListeners = listeners.get(key);
+	if (!keyListeners) {
+		keyListeners = /* @__PURE__ */ new Set();
+		listeners.set(key, keyListeners);
+	}
+	keyListeners.add(listener);
+	const onStorage = (e) => {
+		if (e.key === key || e.key === null) listener();
+	};
+	window.addEventListener("storage", onStorage);
+	return () => {
+		keyListeners.delete(listener);
+		window.removeEventListener("storage", onStorage);
+	};
+}
+function useLocalPersistedState(key, defaultValue) {
+	const raw = useSyncExternalStore(useCallback((listener) => subscribe(key, listener), [key]), () => readRaw(key), () => null);
+	const fallback = useRef(defaultValue);
+	fallback.current = defaultValue;
+	const stored = useMemo(() => parse(raw), [raw]);
+	return [stored === MISSING ? defaultValue : stored, useCallback((update) => {
+		const current = parse(readRaw(key));
+		const previous = current === MISSING ? fallback.current : current;
+		const next = typeof update === "function" ? update(previous) : update;
+		writeRaw(key, next === void 0 ? null : JSON.stringify(next));
+		for (const listener of listeners.get(key) ?? []) listener();
+	}, [key])];
+}
+//#endregion
+export { useLocalPersistedState };

package/dist/components/relativeTime.d.ts

@@ -1,8 +1,36 @@
-import { DateTime } from 'luxon';
-/** 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;
-};
+import { type TimeValue } from '../format.js';
+export type { TimeValue };
+/** Something worked out from the time, kept current by one clock that ticks
+ *  each second for every component reading it. A component re-renders only
+ *  when what `select` returns changes, so a label reading "3h" sits still
+ *  while the clock runs. `select` runs every tick, so keep it cheap; while
+ *  `running` is false the component leaves the clock and `select` sees the
+ *  last tick's time. */
+export declare function useClock<T>(select: (now: number) => T, running?: boolean): T;
+/** `long` reads "5 minutes ago" in the host's locale; `compact` reads "5m",
+ *  for a row with little room. */
+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;
+/** 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 nothing
+ *  for a missing time. */
+export declare function RelativeTime({ value, format, className, }: {
+    value: TimeValue;
+    format?: RelativeTimeFormat;
+    className?: string;
+}): import("react").JSX.Element | 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, }: {
+    start: TimeValue;
+    end?: TimeValue;
+    running?: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/relativeTime.js

@@ -1,32 +1,115 @@
+import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
-import { useEffect, useState } from "react";
-import { DateTime } from "luxon";
-//#region src/components/relativeTime.ts
-var TICK_MS = 3e4;
-function compactRelativeMinutes(minutes, t) {
-	if (!Number.isFinite(minutes) || minutes < 1) return t.now;
+import { formatDateTime, formatDuration, toDateTime } from "../format.js";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useSyncExternalStore } from "react";
+import { DateTime, Duration } from "luxon";
+//#region src/components/relativeTime.tsx
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var listeners = /* @__PURE__ */ new Set();
+var timer;
+var now = Date.now();
+function subscribe(listener) {
+	listeners.add(listener);
+	if (!timer) {
+		now = Date.now();
+		timer = setInterval(() => {
+			now = Date.now();
+			for (const notify of listeners) notify();
+		}, SECOND);
+	}
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size === 0) {
+			clearInterval(timer);
+			timer = void 0;
+		}
+	};
+}
+var stopped = () => () => {};
+/** Something worked out from the time, kept current by one clock that ticks
+*  each second for every component reading it. A component re-renders only
+*  when what `select` returns changes, so a label reading "3h" sits still
+*  while the clock runs. `select` runs every tick, so keep it cheap; while
+*  `running` is false the component leaves the clock and `select` sees the
+*  last tick's time. */
+function useClock(select, running = true) {
+	const snapshot = () => select(now);
+	return useSyncExternalStore(running ? subscribe : stopped, snapshot, snapshot);
+}
+function compactLabel(age, t) {
+	const minutes = Math.floor(Math.abs(age) / MINUTE);
+	if (minutes < 1) return t.now;
 	if (minutes < 60) return t.minutes(minutes);
 	const hours = Math.floor(minutes / 60);
 	if (hours < 24) return t.hours(hours);
 	const days = Math.floor(hours / 24);
-	if (days < 365) return t.days(days);
-	return t.years(Math.floor(days / 365));
+	return days < 365 ? t.days(days) : t.years(Math.floor(days / 365));
+}
+function unitOf(age) {
+	const size = Math.abs(age);
+	return size < MINUTE ? SECOND : size < HOUR ? MINUTE : size < DAY ? HOUR : DAY;
 }
-/** A clock that re-reads itself, so "5m" ages while the page sits open, with
-*  the abbreviated form a row has room for. */
-function useRelativeTime() {
+/** How long ago, or until, `value` is, kept current as time passes. Empty for
+*  a missing or invalid time. */
+function useRelativeTime(value, format = "long") {
 	const t = useStrings().time;
-	const [now, setNow] = useState(() => DateTime.now());
-	useEffect(() => {
-		const id = setInterval(() => setNow(DateTime.now()), TICK_MS);
-		return () => clearInterval(id);
-	}, []);
-	const compactMinutes = (minutes) => compactRelativeMinutes(minutes, t);
-	return {
-		now,
-		compactMinutes,
-		compact: (iso) => iso ? compactMinutes(Math.floor(now.diff(DateTime.fromISO(iso)).as("minutes"))) : ""
-	};
+	const at = toDateTime(value)?.toMillis() ?? null;
+	const last = useRef(null);
+	return useClock((current) => {
+		if (at === null) return "";
+		const age = current - at;
+		const unit = unitOf(age);
+		const key = `${format}:${at}:${unit}:${Math.trunc(age / unit)}`;
+		if (last.current?.key !== key) {
+			const label = format === "compact" ? compactLabel(age, t) : DateTime.fromMillis(at).toRelative({ base: DateTime.fromMillis(current) }) ?? "";
+			last.current = {
+				key,
+				label
+			};
+		}
+		return last.current.label;
+	}, at !== null);
+}
+/** 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 nothing
+*  for a missing time. */
+function RelativeTime({ value, format = "long", className }) {
+	const label = useRelativeTime(value, format);
+	const time = toDateTime(value);
+	if (!label || !time) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: formatDateTime(time, "seconds"),
+		children: /* @__PURE__ */ jsx("time", {
+			dateTime: time.toISO() ?? void 0,
+			className,
+			children: label
+		})
+	});
+}
+/** 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. */
+function useElapsed(start, end, running = toDateTime(end) === null) {
+	const from = toDateTime(start)?.toMillis() ?? null;
+	const to = toDateTime(end)?.toMillis() ?? null;
+	const [shownAt] = useState(Date.now);
+	return useClock((current) => from === null ? null : Math.max(0, Math.floor(((to ?? Math.max(current, shownAt)) - from) / SECOND) * SECOND), from !== null && to === null && running);
+}
+/** 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 }) {
+	const elapsed = useElapsed(start, end, running);
+	if (elapsed === null) return null;
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: Duration.fromMillis(elapsed).toISO() ?? void 0,
+		className,
+		children: formatDuration(elapsed)
+	});
 }
 //#endregion
-export { useRelativeTime };
+export { Elapsed, RelativeTime, useClock, useElapsed, useRelativeTime };

package/dist/components/segmented.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/** The parts SegmentedControl and segmented Tabs share, so a picker and a set
+ *  of views beside it look the same. */
+export interface SegmentLayout {
+    /** Segments share the container's width equally. */
+    fill?: boolean | undefined;
+    /** Segments stack as icons with their labels in tooltips, for a collapsed rail. */
+    iconOnly?: boolean | undefined;
+}
+export declare function segmentGroupClassName({ fill, iconOnly }: SegmentLayout): string;
+export declare function segmentClassName(current: boolean, { fill, iconOnly }: SegmentLayout): string;
+export declare function SegmentContent({ label, icon, badge, iconOnly, }: {
+    label: string;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    iconOnly?: boolean | undefined;
+}): import("react").JSX.Element;

package/dist/components/segmented.js

@@ -0,0 +1,27 @@
+import { cx } from "../cx.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/segmented.tsx
+function segmentGroupClassName({ fill, iconOnly }) {
+	return cx("gap-0.5", iconOnly ? "flex flex-col items-center" : cx("rounded-lg theme-muted-panel p-0.5", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
+}
+function segmentClassName(current, { fill, iconOnly }) {
+	return cx("relative flex min-w-0 cursor-pointer items-center justify-center rounded-md font-medium transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50", current ? "bg-(--theme-panel-bg) theme-text shadow-sm ring-1 ring-(--theme-border)" : "theme-muted-text hover:theme-text hover:bg-(--theme-hover)", iconOnly ? "h-8 w-8" : cx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
+}
+function SegmentContent({ label, icon, badge, iconOnly }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon,
+		iconOnly ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		}),
+		badge && (iconOnly ? /* @__PURE__ */ jsx("span", {
+			className: "absolute top-1 right-1 inline-flex",
+			children: badge
+		}) : badge)
+	] });
+}
+//#endregion
+export { SegmentContent, segmentClassName, segmentGroupClassName };