@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/floating.js

@@ -6,11 +6,11 @@ var enterExit = "origin-(--transform-origin) transition-[transform,opacity] dura
 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, inside its `panelListClassName` gutter; its text lines up with a field's. */
 var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 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 tooltip's, infotip's or popover tip's surface: a small panel in the page's colors, so a
+*  hint reads as part of the page rather than a dark patch over it. */
+var tipClassName = `max-w-64 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) px-2.5 py-1.5 text-xs text-(--theme-app) shadow-(--theme-shadow-lg) whitespace-pre-line break-words data-instant:transition-none ${enterExit}`;
 /** 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}`;
+var cardClassName = `overflow-hidden rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
 function pointRect(x, y) {
 	return {
 		x,
@@ -40,4 +40,4 @@ function toPositionerAnchor(at) {
 	};
 }
 //#endregion
-export { cardClassName, panelClassName, panelItemClassName, positionerClassName, tipArrowClassName, tipClassName, toPositionerAnchor };
+export { cardClassName, panelClassName, panelItemClassName, positionerClassName, tipClassName, toPositionerAnchor };

package/dist/components/headerActionsFit.d.ts

@@ -0,0 +1,37 @@
+import type { MenuEntry } from './MenuEntries.js';
+/**
+ * Which of the page header's actions have moved into its "…" menu, and what
+ * each would be as a row of that menu. The actions render in the page's tree
+ * and the bar measures them in its own, so they meet here: each action
+ * registers its menu row and hides while it has moved, and the bar decides
+ * which move and lists them.
+ */
+export declare class HeaderActionsFit {
+    private entries;
+    private overflow;
+    private version;
+    private listeners;
+    subscribe: (listener: () => void) => (() => void);
+    /** Changes whenever the menu would: what moved, or a moved action's row. */
+    getVersion: () => number;
+    register(id: string, entry: MenuEntry): void;
+    unregister(id: string): void;
+    isOverflowed(id: string): boolean;
+    /** The moved actions' rows, in the bar's order. */
+    menu(): MenuEntry[];
+    setOverflow(ids: readonly string[]): void;
+    private changed;
+}
+/** Set around the header's `actions`, so the actions there can move into its
+ *  menu; title actions sit beside the title and never do. */
+export declare const HeaderActionsFitContext: import("react").Context<HeaderActionsFit | null>;
+/**
+ * The trailing actions to move into the "…" menu so the rest fit in `room`
+ * pixels, last first, or none when everything fits. `shown` is the actions'
+ * width as they are now, with `moved` already in the menu, so what they would
+ * take with nothing moved is worked out from it and each action's width.
+ */
+export declare function overflowingActions(items: readonly {
+    id: string;
+    width: number;
+}[], shown: number, moved: readonly string[], room: number): string[];

package/dist/components/headerActionsFit.js

@@ -0,0 +1,81 @@
+import { createContext } from "react";
+//#region src/components/headerActionsFit.ts
+/**
+* Which of the page header's actions have moved into its "…" menu, and what
+* each would be as a row of that menu. The actions render in the page's tree
+* and the bar measures them in its own, so they meet here: each action
+* registers its menu row and hides while it has moved, and the bar decides
+* which move and lists them.
+*/
+var HeaderActionsFit = class {
+	entries = /* @__PURE__ */ new Map();
+	overflow = [];
+	version = 0;
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	/** Changes whenever the menu would: what moved, or a moved action's row. */
+	getVersion = () => this.version;
+	register(id, entry) {
+		this.entries.set(id, entry);
+		if (this.overflow.includes(id)) this.changed();
+	}
+	unregister(id) {
+		this.entries.delete(id);
+		if (this.overflow.includes(id)) {
+			this.overflow = this.overflow.filter((other) => other !== id);
+			this.changed();
+		}
+	}
+	isOverflowed(id) {
+		return this.overflow.includes(id);
+	}
+	/** The moved actions' rows, in the bar's order. */
+	menu() {
+		return this.overflow.flatMap((id) => {
+			const entry = this.entries.get(id);
+			return entry ? [entry] : [];
+		});
+	}
+	setOverflow(ids) {
+		if (ids.length === this.overflow.length && ids.every((id, i) => this.overflow[i] === id)) return;
+		this.overflow = ids;
+		this.changed();
+	}
+	changed() {
+		this.version++;
+		for (const listener of this.listeners) listener();
+	}
+};
+/** Set around the header's `actions`, so the actions there can move into its
+*  menu; title actions sit beside the title and never do. */
+var HeaderActionsFitContext = createContext(null);
+var ACTION_GAP = 4;
+/**
+* The trailing actions to move into the "…" menu so the rest fit in `room`
+* pixels, last first, or none when everything fits. `shown` is the actions'
+* width as they are now, with `moved` already in the menu, so what they would
+* take with nothing moved is worked out from it and each action's width.
+*/
+function overflowingActions(items, shown, moved, room) {
+	const width = new Map(items.map((item) => [item.id, item.width]));
+	let total = shown;
+	if (moved.length > 0) {
+		total += moved.reduce((sum, id) => sum + (width.get(id) ?? 0) + ACTION_GAP, 0);
+		total -= 28;
+	}
+	const next = [];
+	for (let i = items.length - 1; i >= 0 && total > room + .5; i--) {
+		const item = items[i];
+		if (next.length === 0) total += 28;
+		total -= item.width + ACTION_GAP;
+		next.unshift(item.id);
+	}
+	return next;
+}
+//#endregion
+export { HeaderActionsFit, HeaderActionsFitContext, overflowingActions };

package/dist/components/pageHeaderStore.d.ts

@@ -1,4 +1,5 @@
 import type { Breadcrumb } from './Breadcrumbs.js';
+import { HeaderActionsFit } from './headerActionsFit.js';
 export type PageHeaderRegion = 'titleActions' | 'actions' | 'toolbar';
 /** The nodes a declaration portals its regions into. They are created with the
  *  declaration, before any bar exists, so its content renders on the first pass
@@ -25,6 +26,8 @@ export declare function sameCrumbs(a: readonly Breadcrumb[] | undefined, b: read
  * provider.
  */
 export declare class PageHeaderStore {
+    /** Which of the declared actions the bar has moved into its "…" menu. */
+    readonly actionsFit: HeaderActionsFit;
     private declarations;
     private listeners;
     private snapshot;

package/dist/components/pageHeaderStore.js

@@ -1,3 +1,4 @@
+import { HeaderActionsFit } from "./headerActionsFit.js";
 //#region src/components/pageHeaderStore.ts
 var NO_NODES = [];
 var NO_CRUMBS = [];
@@ -26,6 +27,8 @@ function sameNodes(a, b) {
 * provider.
 */
 var PageHeaderStore = class {
+	/** Which of the declared actions the bar has moved into its "…" menu. */
+	actionsFit = new HeaderActionsFit();
 	declarations = /* @__PURE__ */ new Map();
 	listeners = /* @__PURE__ */ new Set();
 	snapshot = EMPTY;

package/dist/components/pathBreaks.js

@@ -1,5 +1,5 @@
+import { Children, Fragment, cloneElement, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, cloneElement, isValidElement } from "react";
 //#region src/components/pathBreaks.tsx
 var SEPARATOR = /(?<=[/\\])(?![/\\])/;
 /** The pieces of `text` with a break allowed after each, split after each path
@@ -10,7 +10,7 @@ function pathPieces(text) {
 function breakText(text) {
 	const pieces = pathPieces(text);
 	if (pieces.length < 2) return text;
-	return pieces.map((piece, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [piece, i < pieces.length - 1 && /* @__PURE__ */ jsx("wbr", {})] }, i));
+	return pieces.map((piece, i) => /* @__PURE__ */ jsxs(Fragment, { children: [piece, i < pieces.length - 1 && /* @__PURE__ */ jsx("wbr", {})] }, i));
 }
 /** `node` with a place to wrap after each path separator in its text: a string,
 *  or an element, such as a link, whose child is one. Deeper content is left as

package/dist/components/popupContainer.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+/** Where a popup opening now from `trigger` belongs. A modal dialog sits in the
+ *  browser's top layer, above any z-index, and leaves the rest of the page inert,
+ *  so a popup portaled to the body would open under it, out of reach. Focus stays
+ *  inside the dialog, so it also places a popup opened by code rather than by the
+ *  reader. A fullscreen element is all the browser shows. Null keeps the default:
+ *  the popup it opened from, or the body. */
+export declare function popupContainerFor(trigger: Element | null): HTMLElement | null;
+export interface PopupPortalProps {
+    /** Read when the portal mounts, which is when its popup opens. */
+    container: RefObject<HTMLElement | null>;
+    className: string;
+}
+/** Props for a popup's portal. The popup opens inside the innermost open modal
+ *  `<dialog>` that holds its trigger, or else the fullscreen element, or else
+ *  the body, so it shows above whatever the trigger sits in. */
+export declare function usePopupContainer(): PopupPortalProps;

package/dist/components/popupContainer.js

@@ -0,0 +1,69 @@
+import { useSyncExternalStore } from "react";
+//#region src/components/popupContainer.ts
+var lastTarget = null;
+var tracking = false;
+var remember = (event) => {
+	if (event.target instanceof Element) lastTarget = event.target;
+};
+function track() {
+	if (tracking) return;
+	tracking = true;
+	for (const type of [
+		"pointerdown",
+		"pointerover",
+		"focusin",
+		"keydown",
+		"contextmenu"
+	]) document.addEventListener(type, remember, {
+		capture: true,
+		passive: true
+	});
+}
+function subscribe(onChange) {
+	track();
+	document.addEventListener("fullscreenchange", onChange);
+	return () => document.removeEventListener("fullscreenchange", onChange);
+}
+function fullscreenElement() {
+	const element = document.fullscreenElement;
+	return element instanceof HTMLElement ? element : void 0;
+}
+/** The innermost `<dialog>` shown with `showModal()` that holds the node. */
+function modalDialogAround(node) {
+	for (let dialog = node?.closest("dialog"); dialog; dialog = dialog.parentElement?.closest("dialog")) if (dialog.open && dialog.matches(":modal")) return dialog;
+}
+/** Where a popup opening now from `trigger` belongs. A modal dialog sits in the
+*  browser's top layer, above any z-index, and leaves the rest of the page inert,
+*  so a popup portaled to the body would open under it, out of reach. Focus stays
+*  inside the dialog, so it also places a popup opened by code rather than by the
+*  reader. A fullscreen element is all the browser shows. Null keeps the default:
+*  the popup it opened from, or the body. */
+function popupContainerFor(trigger) {
+	return modalDialogAround(trigger?.isConnected ? trigger : null) ?? modalDialogAround(document.activeElement) ?? fullscreenElement() ?? null;
+}
+var portalClassName = "[dialog>&]:fixed [dialog>&]:top-0 [dialog>&]:left-0 [dialog>&]:z-(--layer-popover)";
+function portalProps() {
+	return {
+		container: { get current() {
+			return popupContainerFor(lastTarget);
+		} },
+		className: portalClassName
+	};
+}
+var onPage = portalProps();
+var inFullscreen = /* @__PURE__ */ new WeakMap();
+/** Props for a popup's portal. The popup opens inside the innermost open modal
+*  `<dialog>` that holds its trigger, or else the fullscreen element, or else
+*  the body, so it shows above whatever the trigger sits in. */
+function usePopupContainer() {
+	const fullscreen = useSyncExternalStore(subscribe, fullscreenElement, () => void 0);
+	if (!fullscreen) return onPage;
+	let props = inFullscreen.get(fullscreen);
+	if (!props) {
+		props = portalProps();
+		inFullscreen.set(fullscreen, props);
+	}
+	return props;
+}
+//#endregion
+export { popupContainerFor, usePopupContainer };

package/dist/components/relativeTime.d.ts

@@ -1,4 +1,5 @@
-import { type TimeValue } from '../format.js';
+import { 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
  *  each second for every component reading it. A component re-renders only
@@ -7,20 +8,30 @@ export type { TimeValue };
  *  `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. */
+/** `long` reads "5 minutes ago" or "yesterday" in the host's locale (UIProvider's `locale`);
+ *  `compact` reads "5m", "in 3h", then a date such as "Sep 4" once a week away, 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, }: {
+export interface RelativeTimeProps {
     value: TimeValue;
-    format?: RelativeTimeFormat;
-    className?: string;
-}): import("react").JSX.Element | null;
+    format?: RelativeTimeFormat | undefined;
+    /** Shown in place of a missing or invalid time, such as "Never" or "—". Default nothing. */
+    fallback?: ReactNode;
+    /** How the exact time reads: in the tooltip, or in the text with `show="absolute"`. Default
+     *  `seconds`; `full` adds the time zone. False leaves out the tooltip. */
+    exact?: DateTimeStyle | false | undefined;
+    /** `absolute` shows the exact time, with the relative one on hover, for a record read for
+     *  its moment rather than its age. Default `relative`. */
+    show?: 'relative' | 'absolute' | undefined;
+    className?: string | undefined;
+}
+/** 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;
 /** 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

package/dist/components/relativeTime.js

@@ -1,14 +1,15 @@
 import { Tooltip } from "./Tooltip.js";
-import { useStrings } from "./Provider.js";
+import { useLocale, useStrings } from "./Provider.js";
 import { formatDateTime, formatDuration, toDateTime } from "../format.js";
-import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
 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 WEEK = 7 * DAY;
 var listeners = /* @__PURE__ */ new Set();
 var timer;
 var now = Date.now();
@@ -40,14 +41,35 @@ 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);
+function compactLabel(at, age, t, locale) {
+	const size = Math.abs(age);
+	if (size >= WEEK) return t.date(new Date(at), locale);
+	const minutes = Math.floor(size / 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);
-	return days < 365 ? t.days(days) : t.years(Math.floor(days / 365));
+	const label = minutes < 60 ? t.minutes(minutes) : hours < 24 ? t.hours(hours) : t.days(Math.floor(hours / 24));
+	return age < 0 ? t.inFuture(label) : label;
+}
+var LONG_UNITS = [
+	["year", 365 * DAY],
+	["month", 30 * DAY],
+	["week", WEEK],
+	["day", DAY],
+	["hour", HOUR],
+	["minute", MINUTE],
+	["second", SECOND]
+];
+var relativeFormats = /* @__PURE__ */ new Map();
+function longLabel(age, locale) {
+	const tag = locale ?? DateTime.now().locale ?? "en-US";
+	let format = relativeFormats.get(tag);
+	if (!format) {
+		format = new Intl.RelativeTimeFormat(tag, { numeric: "auto" });
+		relativeFormats.set(tag, format);
+	}
+	const size = Math.abs(age);
+	const [unit, length] = LONG_UNITS.find(([, length]) => size >= length) ?? ["second", SECOND];
+	return format.format(-Math.trunc(age / length), unit);
 }
 function unitOf(age) {
 	const size = Math.abs(age);
@@ -57,15 +79,16 @@ function unitOf(age) {
 *  a missing or invalid time. */
 function useRelativeTime(value, format = "long") {
 	const t = useStrings().time;
+	const locale = useLocale();
 	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)}`;
+		const key = `${format}:${locale}:${at}:${unit}:${Math.trunc(age / unit)}`;
 		if (last.current?.key !== key) {
-			const label = format === "compact" ? compactLabel(age, t) : Math.abs(age) < SECOND ? t.now : DateTime.fromMillis(at).toRelative({ base: DateTime.fromMillis(current) }) ?? "";
+			const label = format === "compact" ? compactLabel(at, age, t, locale) : Math.abs(age) < SECOND ? t.now : longLabel(age, locale);
 			last.current = {
 				key,
 				label
@@ -75,20 +98,24 @@ function useRelativeTime(value, format = "long") {
 	}, 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 }) {
+*  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 }) {
 	const label = useRelativeTime(value, format);
+	const locale = useLocale();
 	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
-		})
+	if (!label || !time) return fallback;
+	const absolute = formatDateTime(time, exact || "seconds", locale);
+	const [text, tip] = show === "absolute" ? [absolute, label] : [label, exact ? absolute : null];
+	const element = /* @__PURE__ */ jsx("time", {
+		dateTime: time.toISO() ?? void 0,
+		className,
+		children: text
 	});
+	return tip ? /* @__PURE__ */ jsx(Tooltip, {
+		content: tip,
+		children: element
+	}) : element;
 }
 /** 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
@@ -104,11 +131,12 @@ function useElapsed(start, end, running = toDateTime(end) === null) {
 *  Renders nothing without a start. */
 function Elapsed({ start, end, running, className }) {
 	const elapsed = useElapsed(start, end, running);
+	const locale = useLocale();
 	if (elapsed === null) return null;
 	return /* @__PURE__ */ jsx("time", {
 		dateTime: Duration.fromMillis(elapsed).toISO() ?? void 0,
 		className,
-		children: formatDuration(elapsed)
+		children: formatDuration(elapsed, locale)
 	});
 }
 //#endregion

package/dist/components/segmented.d.ts

@@ -2,16 +2,30 @@ 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 share the container's width equally. `narrow` does so only on a
+     *  phone-width screen and sits at its own width from the `sm` breakpoint,
+     *  such as a choice at the head of a form. */
+    fill?: boolean | 'narrow' | undefined;
     /** Segments stack as icons with their labels in tooltips, for a collapsed rail. */
     iconOnly?: boolean | undefined;
+    /** `sm` fits a page header, a toolbar or a pane's head beside other small
+     *  controls; `md` stands on its own. */
+    size?: 'sm' | 'md' | undefined;
 }
+/** A segment's or tab's tone, for a view that needs attention, such as what failed. */
+export type SegmentTone = 'warning' | 'danger';
 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, }: {
+export declare function segmentClassName(current: boolean, { fill, iconOnly, size }: SegmentLayout, tone?: SegmentTone | undefined): string;
+/** How many things a tab or segment holds, as a pill after its label. */
+export declare function CountPill({ count, tone }: {
+    count: number;
+    tone?: SegmentTone | undefined;
+}): import("react").JSX.Element;
+export declare function SegmentContent({ label, icon, badge, count, tone, iconOnly, }: {
     label: string;
     icon?: ReactNode;
     badge?: ReactNode;
+    count?: number | undefined;
+    tone?: SegmentTone | undefined;
     iconOnly?: boolean | undefined;
 }): import("react").JSX.Element;

package/dist/components/segmented.js

@@ -1,22 +1,64 @@
 import { cx } from "../cx.js";
+import { useLocale } from "./Provider.js";
+import { formatCount } from "../format.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented.tsx
+var fillKey = (fill) => fill === "narrow" ? "narrow" : fill ? "fill" : "none";
+var fillGroup = {
+	fill: "grid auto-cols-fr grid-flow-col",
+	narrow: "grid auto-cols-fr grid-flow-col sm:inline-flex",
+	none: "inline-flex"
+};
+var segmentSizes = {
+	md: {
+		fill: "h-7 gap-1.5 px-1.5 text-[13px]",
+		narrow: "h-7 gap-1.5 px-1.5 text-[13px] sm:px-2.5",
+		none: "h-7 gap-1.5 px-2.5 text-[13px]"
+	},
+	sm: {
+		fill: "h-6 gap-1 px-1.5 text-xs",
+		narrow: "h-6 gap-1 px-1.5 text-xs sm:px-2",
+		none: "h-6 gap-1 px-2 text-xs"
+	}
+};
+var toneText = {
+	warning: "text-(--theme-warning)",
+	danger: "text-(--theme-error-text)"
+};
+var tonePill = {
+	warning: "bg-(--theme-warning-muted) text-(--theme-warning)",
+	danger: "bg-(--theme-error-muted) text-(--theme-error-text)",
+	none: "bg-(--theme-muted-text-color)/12 text-(--theme-muted-text-color)"
+};
 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"));
+	return cx("gap-0.5", iconOnly ? "flex flex-col items-center" : cx("rounded-lg theme-muted-panel p-0.5", fillGroup[fillKey(fill)]));
 }
-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 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) 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 segmentClassName(current, { fill, iconOnly, size = "md" }, tone) {
+	return cx("relative flex min-w-0 cursor-pointer items-center justify-center rounded-md font-medium transition-colors duration-150 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) data-disabled:cursor-not-allowed data-disabled:opacity-50", current ? "bg-(--theme-panel-bg) shadow-sm ring-1 ring-(--theme-border)" : "hover:not-data-disabled:bg-(--theme-hover)", tone ? toneText[tone] : current ? "theme-text" : "theme-muted-text hover:not-data-disabled:theme-text", iconOnly ? "h-8 w-8" : segmentSizes[size][fillKey(fill)]);
 }
-function SegmentContent({ label, icon, badge, iconOnly }) {
+/** How many things a tab or segment holds, as a pill after its label. */
+function CountPill({ count, tone }) {
+	const locale = useLocale();
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full px-1.5 text-[11px] font-medium tabular-nums", tonePill[tone ?? "none"]),
+		children: formatCount(count, locale)
+	});
+}
+function SegmentContent({ label, icon, badge, count, tone, iconOnly }) {
+	const locale = useLocale();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon,
 		iconOnly ? /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: label
+			children: count === void 0 ? label : `${label} ${formatCount(count, locale)}`
 		}) : /* @__PURE__ */ jsx("span", {
 			className: "truncate",
 			children: label
 		}),
+		!iconOnly && count !== void 0 && /* @__PURE__ */ jsx(CountPill, {
+			count,
+			tone
+		}),
 		badge && (iconOnly ? /* @__PURE__ */ jsx("span", {
 			className: "absolute top-1 right-1 inline-flex",
 			children: badge
@@ -24,4 +66,4 @@ function SegmentContent({ label, icon, badge, iconOnly }) {
 	] });
 }
 //#endregion
-export { SegmentContent, segmentClassName, segmentGroupClassName };
+export { CountPill, SegmentContent, segmentClassName, segmentGroupClassName };

package/dist/components/typedDate.d.ts

@@ -0,0 +1,5 @@
+/** The local day typed text names: `yyyy-mm-dd`, or the locale's numeric date in its own
+ *  order, such as `10/30/2026` or `30.10.26`; a day and month alone fall in this year. */
+export declare function parseTypedDate(text: string, locale: string | undefined, today?: Date): Date | undefined;
+/** A day as the locale writes it in numbers, the form `parseTypedDate` reads back. */
+export declare function formatNumericDate(date: Date, locale: string | undefined): string;

package/dist/components/typedDate.js

@@ -0,0 +1,50 @@
+//#region src/components/typedDate.ts
+var orders = /* @__PURE__ */ new Map();
+function partOrder(locale) {
+	let order = orders.get(locale);
+	if (!order) {
+		order = new Intl.DateTimeFormat(locale, {
+			year: "numeric",
+			month: "numeric",
+			day: "numeric"
+		}).formatToParts(new Date(2001, 10, 22)).map((part) => part.type).filter((type) => type === "year" || type === "month" || type === "day");
+		orders.set(locale, order);
+	}
+	return order;
+}
+function calendarDay(year, month, day) {
+	const date = new Date(year, month - 1, day);
+	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : void 0;
+}
+/** The local day typed text names: `yyyy-mm-dd`, or the locale's numeric date in its own
+*  order, such as `10/30/2026` or `30.10.26`; a day and month alone fall in this year. */
+function parseTypedDate(text, locale, today = /* @__PURE__ */ new Date()) {
+	const trimmed = text.trim();
+	const iso = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+	if (iso) return calendarDay(Number(iso[1]), Number(iso[2]), Number(iso[3]));
+	const numbers = trimmed.split(/\D+/).filter(Boolean).map(Number);
+	if (numbers.length < 2 || numbers.length > 3) return;
+	const order = partOrder(locale);
+	const parts = numbers.length === 3 ? order : order.filter((part) => part !== "year");
+	const value = {
+		year: today.getFullYear(),
+		month: 0,
+		day: 0
+	};
+	parts.forEach((part, index) => {
+		value[part] = numbers[index] ?? 0;
+	});
+	if (numbers.length === 3 && value.year < 100) value.year += 2e3;
+	return calendarDay(value.year, value.month, value.day);
+}
+/** A day as the locale writes it in numbers, the form `parseTypedDate` reads back. */
+function formatNumericDate(date, locale) {
+	return new Intl.DateTimeFormat(locale, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		numberingSystem: "latn"
+	}).format(date);
+}
+//#endregion
+export { formatNumericDate, parseTypedDate };

package/dist/components/useClosingValue.d.ts

@@ -0,0 +1,4 @@
+/** The last value that wasn't null or undefined, so a modal or drawer keeps showing what it was
+ *  about while it animates closed, after the host has already let go of it:
+ *  `<Drawer open={item !== null}>{useClosingValue(item)?.name}</Drawer>`. */
+export declare function useClosingValue<T>(value: T | null | undefined): T | undefined;

package/dist/components/useClosingValue.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+//#region src/components/useClosingValue.ts
+/** The last value that wasn't null or undefined, so a modal or drawer keeps showing what it was
+*  about while it animates closed, after the host has already let go of it:
+*  `<Drawer open={item !== null}>{useClosingValue(item)?.name}</Drawer>`. */
+function useClosingValue(value) {
+	const [last, setLast] = useState(value ?? void 0);
+	if (value !== null && value !== void 0 && !Object.is(value, last)) setLast(value);
+	return value ?? last;
+}
+//#endregion
+export { useClosingValue };