@heyramzi/ui 2.23.0 → 2.24.0

package/src/ai/confirmation/index.ts

@@ -1,50 +1,35 @@
 import Confirmation from "./Confirmation.svelte";
 import ConfirmationTitle from "./ConfirmationTitle.svelte";
-import ConfirmationRequest from "./ConfirmationRequest.svelte";
-import ConfirmationAccepted from "./ConfirmationAccepted.svelte";
-import ConfirmationRejected from "./ConfirmationRejected.svelte";
-import ConfirmationFailed from "./ConfirmationFailed.svelte";
+import ConfirmationState from "./ConfirmationState.svelte";
 import ConfirmationActions from "./ConfirmationActions.svelte";
 import ConfirmationAction from "./ConfirmationAction.svelte";
 
 import type { ConfirmationProps } from "./Confirmation.svelte";
 import type { ConfirmationTitleProps } from "./ConfirmationTitle.svelte";
-import type { ConfirmationRequestProps } from "./ConfirmationRequest.svelte";
-import type { ConfirmationAcceptedProps } from "./ConfirmationAccepted.svelte";
-import type { ConfirmationRejectedProps } from "./ConfirmationRejected.svelte";
-import type { ConfirmationFailedProps } from "./ConfirmationFailed.svelte";
+import type { ConfirmationStateProps } from "./ConfirmationState.svelte";
 import type { ConfirmationActionsProps } from "./ConfirmationActions.svelte";
 import type { ConfirmationActionProps } from "./ConfirmationAction.svelte";
 
 export type {
   ConfirmationContextValue,
-  ConfirmationState,
+  ConfirmationKind,
 } from "./confirmation-context.svelte.js";
 
 export {
   Confirmation,
   ConfirmationTitle,
-  ConfirmationRequest,
-  ConfirmationAccepted,
-  ConfirmationRejected,
-  ConfirmationFailed,
+  ConfirmationState,
   ConfirmationActions,
   ConfirmationAction,
   type ConfirmationProps,
   type ConfirmationTitleProps,
-  type ConfirmationRequestProps,
-  type ConfirmationAcceptedProps,
-  type ConfirmationRejectedProps,
-  type ConfirmationFailedProps,
+  type ConfirmationStateProps,
   type ConfirmationActionsProps,
   type ConfirmationActionProps,
   //
   Confirmation as Root,
   ConfirmationTitle as Title,
-  ConfirmationRequest as Request,
-  ConfirmationAccepted as Accepted,
-  ConfirmationRejected as Rejected,
-  ConfirmationFailed as Failed,
+  ConfirmationState as State,
   ConfirmationActions as Actions,
   ConfirmationAction as Action,
 };

package/src/ai/index.ts

@@ -46,28 +46,18 @@ export {
 export {
   Confirmation,
   ConfirmationTitle,
-  ConfirmationRequest,
-  ConfirmationAccepted,
-  ConfirmationRejected,
+  ConfirmationState,
   ConfirmationActions,
   ConfirmationAction,
   type ConfirmationProps,
   type ConfirmationTitleProps,
-  type ConfirmationRequestProps,
-  type ConfirmationAcceptedProps,
-  type ConfirmationRejectedProps,
+  type ConfirmationStateProps,
   type ConfirmationActionsProps,
   type ConfirmationActionProps,
   type ConfirmationContextValue,
-  type ConfirmationState,
+  type ConfirmationKind,
 } from "./confirmation/index.js";
 
-// =========================
-// THINKING DOTS
-// =========================
-
-export { ThinkingDots, type ThinkingDotsProps } from "./thinking-dots/index.js";
-
 // =========================
 // VOICE WAVEFORM
 // =========================

package/src/ai/typing-dots/TypingDots.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" module>
 	import type { HTMLAttributes } from "svelte/elements";
 
-	export interface TypingDotsProps extends HTMLAttributes<HTMLSpanElement> {
+	export interface TypingDotsProps extends HTMLAttributes<HTMLElement> {
 		/** Dot diameter in px. */
 		size?: number;
+		/** Set, even to "", the dots become a `role="status"` line; the text shows when non-empty. */
+		label?: string;
 		class?: string;
 	}
 </script>
@@ -12,16 +14,34 @@
 	import "./TypingDots.css";
 	import { cn } from "../../lib/utils.js";
 
-	let { size = 4, class: className, ...rest }: TypingDotsProps = $props();
+	let { size = 4, label, class: className, ...rest }: TypingDotsProps = $props();
 </script>
 
-<span
-	class={cn("typing-dots", className)}
-	style:--typing-dot-size="{size}px"
-	aria-hidden="true"
-	{...rest}
->
-	<span class="typing-dot"></span>
-	<span class="typing-dot"></span>
-	<span class="typing-dot"></span>
-</span>
+{#snippet dots(extra?: HTMLAttributes<HTMLElement>, dotsClass?: string)}
+	<span
+		class={cn("typing-dots", dotsClass)}
+		style:--typing-dot-size="{size}px"
+		aria-hidden="true"
+		{...extra}
+	>
+		<span class="typing-dot"></span>
+		<span class="typing-dot"></span>
+		<span class="typing-dot"></span>
+	</span>
+{/snippet}
+
+{#if label === undefined}
+	{@render dots(rest, className)}
+{:else}
+	<div
+		class={cn(
+			"inline-flex items-center gap-2 text-sm text-[color:var(--ai-thinking-fg,inherit)]",
+			className,
+		)}
+		role="status"
+		{...rest}
+	>
+		{#if label}<span>{label}</span>{/if}
+		{@render dots()}
+	</div>
+{/if}

package/src/ai/typing-dots/typing-dots.test.ts

@@ -0,0 +1,36 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TypingDots, { type TypingDotsProps } from "./TypingDots.svelte";
+
+function render(props: TypingDotsProps): HTMLElement {
+  const target = document.createElement("div");
+  const app = mount(TypingDots, { target, props });
+  flushSync();
+  const root = target.firstElementChild as HTMLElement;
+  void unmount(app);
+  return root;
+}
+
+describe("TypingDots", () => {
+  it("is three hidden dots with no label", () => {
+    const root = render({});
+    expect(root.getAttribute("aria-hidden")).toBe("true");
+    expect(root.getAttribute("role")).toBeNull();
+    expect(root.querySelectorAll(".typing-dot")).toHaveLength(3);
+  });
+
+  it("becomes a status line with its text when labelled", () => {
+    const root = render({ label: "Thinking", class: "extra" });
+    expect(root.getAttribute("role")).toBe("status");
+    expect(root.textContent?.trim()).toBe("Thinking");
+    expect(root.classList.contains("extra")).toBe(true);
+    expect(root.querySelector(".typing-dots")?.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("keeps the status role and the caller's aria-label for an empty label", () => {
+    const root = render({ label: "", "aria-label": "Thinking" });
+    expect(root.getAttribute("role")).toBe("status");
+    expect(root.getAttribute("aria-label")).toBe("Thinking");
+    expect(root.textContent?.trim()).toBe("");
+  });
+});

package/src/canvas/ui/canvas-ui.css

@@ -70,6 +70,18 @@
   background: var(--cv-surface);
 }
 
+/* On a phone the rail runs along the bottom edge and the credit would sit under
+   it, in the frame's rounded corner. It moves to the top right, inset off the
+   corner's curve. */
+@media (max-width: 639px) {
+  .svelte-flow .svelte-flow__panel.svelte-flow__attribution {
+    top: 0;
+    bottom: auto;
+    margin: 6px 8px;
+    border-radius: var(--radius-sm, 4px);
+  }
+}
+
 .svelte-flow .svelte-flow__attribution a {
   color: var(--cv-ink-muted);
 }

package/src/charts/README.md

@@ -71,8 +71,8 @@ The `@source` line matters: the chart markup carries Tailwind classes, and Tailw
 | --- | --- |
 | `DashboardSection`, `PanelGrid`, `StatBand` | A named area, a row of panels side by side, a row of number cards |
 | `StatTile` | A number card on `NumberChart`: a delta, a share track, a trend shape behind the figure, an optional link |
-| `DataPanel`, `DashboardEmpty` | A titled panel for a table or chart, and the dashed empty state |
-| `DataTable`, `DataSortHead`, `RatingChip` | The one data table: sortable heads, a row that opens, columns that hide on a phone, share bars, loading and empty states. An A to E grade chip |
+| `DataPanel` | A titled panel for a table or chart. The dashed empty state is `EmptyState surface="dashed"` from `@heyramzi/ui/components/list-page` |
+| `DataTable`, `RatingChip` | The one data table: sortable heads (bind `sort`, the `SortState` TableView takes; a new column starts descending), a row that opens, columns that hide on a phone, share bars, loading and empty states. An A to E grade chip |
 | `PeriodFilter`, `DAY_WINDOWS` | The 7, 30 and 90 day window, as a filter or as links |
 | `CHART_HEIGHT`, `dataTableClass` and friends | The one chart height and the table skin |
 

package/src/charts/area-chart.svelte

@@ -12,6 +12,7 @@
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
 	import ReferenceLine, { type ChartReference } from "./reference-line.svelte";
 	import {
@@ -153,15 +154,7 @@
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
 
-	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
-	const compact = new Intl.NumberFormat(undefined, {
-		notation: "compact",
-		maximumFractionDigits: 1,
-	});
-	function valueTick(v: number): string {
-		const full = formatValue(v);
-		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
-	}
+	const tick = $derived(valueTick(formatValue));
 	const figureRows = $derived(
 		display
 			? series.map((s) => ({
@@ -212,7 +205,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} ticks={ticksForWidth(xTicks)} />
 					<g class="hr-area-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/bar-chart.svelte

@@ -8,6 +8,7 @@
 	import { scaleBand } from "d3-scale";
 	import Figure from "./figure.svelte";
 	import { TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 
 	// =========================
 	// TYPES
@@ -134,16 +135,7 @@
 	});
 	const activeColor = $derived(active && colorOf ? colorOf(active) : color);
 
-	// WHY: "1,000,000" overflows the 48px gutter and the gap between ticks, so a long label
-	// falls back to "1M"; the tooltip keeps the full value.
-	const compact = new Intl.NumberFormat(undefined, {
-		notation: "compact",
-		maximumFractionDigits: 1,
-	});
-	function valueTick(v: number): string {
-		const full = formatValue(v);
-		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
-	}
+	const tick = $derived(valueTick(formatValue));
 </script>
 
 <!-- =========================== -->
@@ -188,12 +180,12 @@
 				<Svg>
 					{#if horizontal}
 						<Axis placement="left" format={(v) => (formatTick ?? formatX)(v)} />
-						<Axis placement="bottom" format={(v) => valueTick(Number(v))} ticks={4} />
+						<Axis placement="bottom" format={(v) => tick(Number(v))} ticks={4} />
 						<g class="hr-bar-grid">
 							<Axis placement="bottom" grid rule={false} ticks={4} format={() => ""} />
 						</g>
 					{:else}
-						<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+						<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 						<Axis placement="bottom" format={(v) => (formatTick ?? formatX)(v)} />
 						<g class="hr-bar-grid">
 							<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/dashboard/data-table.svelte

@@ -42,9 +42,14 @@
 	 * optional pager. A row opens by `rowHref` or `onRowClick`, stretched over the row from the lead.
 	 */
 	import { cn } from "../../lib/utils.js";
-	import DataSortHead from "./data-sort-head.svelte";
 	import RatingChip from "./rating-chip.svelte";
-	import { Pagination, paginateRows, totalPages } from "../../components/data-table/index.js";
+	import {
+		Pagination,
+		SortableHead,
+		paginateRows,
+		totalPages,
+		type SortState,
+	} from "../../components/data-table/index.js";
 	import {
 		dataTableClass,
 		dataTdClass,
@@ -69,8 +74,8 @@
 		minWidth?: string;
 		/** Omit for every row on one page. */
 		pageSize?: number;
-		sortKey?: string | null;
-		descending?: boolean;
+		/** The ranked column and its direction. Bind it; a column with `sort` sets it. */
+		sort?: SortState;
 		page?: number;
 		/** The row opens a page. The lead becomes the link. */
 		rowHref?: (row: T) => string;
@@ -92,8 +97,7 @@
 		leadWidth,
 		minWidth = "min-w-[48rem]",
 		pageSize,
-		sortKey = $bindable(null),
-		descending = $bindable(true),
+		sort = $bindable(null),
 		page = $bindable(1),
 		rowHref,
 		onRowClick,
@@ -116,9 +120,9 @@
 		"text-left outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-ring";
 
 	const sorted = $derived.by(() => {
-		const by = columns.find((column) => column.key === sortKey)?.sort;
-		if (!by) return rows;
-		const direction = descending ? -1 : 1;
+		const by = columns.find((column) => column.key === sort?.key)?.sort;
+		if (!by || !sort) return rows;
+		const direction = sort.direction === "desc" ? -1 : 1;
 		return [...rows].sort((left, right) => (by(left) - by(right)) * direction);
 	});
 
@@ -134,12 +138,8 @@
 
 	function rankBy(key: string) {
 		page = 1;
-		if (sortKey === key) {
-			descending = !descending;
-			return;
-		}
-		sortKey = key;
-		descending = true;
+		const flip = sort?.key === key && sort.direction === "desc";
+		sort = { key, direction: flip ? "asc" : "desc" };
 	}
 
 	function isMuted(column: DataColumn<T>, row: T) {
@@ -168,16 +168,16 @@
 			<th scope="col" class={dataThClass}>{leadLabel}</th>
 			{#each columns as column (column.key)}
 				{#if column.sort}
-					<DataSortHead
+					<SortableHead
+						key={column.key}
+						{sort}
+						onSort={rankBy}
 						numeric={column.align !== "start"}
-						class={columnClass(column)}
-						active={sortKey === column.key}
-						{descending}
-						onSort={() => rankBy(column.key)}
+						class={cn(column.align === "start" ? dataThClass : dataThNumClass, columnClass(column))}
 						title={column.hint}
 					>
 						{column.label}
-					</DataSortHead>
+					</SortableHead>
 				{:else}
 					<th
 						scope="col"

package/src/charts/dashboard/index.ts

@@ -1,12 +1,10 @@
-export { default as DataPanel } from "./data-panel.svelte";
-export { default as DataSortHead } from "./data-sort-head.svelte";
+export { default as DataPanel } from "../../lib/panel.svelte";
 export {
   default as DataTable,
   type DataColumn,
   type DataColumnBreakpoint,
 } from "./data-table.svelte";
 export { default as RatingChip } from "./rating-chip.svelte";
-export { default as DashboardEmpty } from "./dashboard-empty.svelte";
 export { default as DashboardSection } from "./dashboard-section.svelte";
 export { default as PanelGrid } from "./panel-grid.svelte";
 export { default as PeriodFilter } from "./period-filter.svelte";

package/src/charts/dashboard/rating-chip.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	/*
-	 * One A to E grade on one colour scale, so a C means one thing everywhere.
-	 * Light mode takes the 800 shades, since amber on cream fails contrast.
-	 */
+	// One A to E grade on the shared tone scale, so a C means one thing everywhere.
+	import { TONE_TINT, type Tone } from "../../lib/tone.js";
 	import { cn } from "../../lib/utils.js";
 
 	interface Props {
@@ -14,19 +12,19 @@
 
 	let { grade, hint, class: className }: Props = $props();
 
-	const TONE: Record<string, string> = {
-		A: "bg-success/12 text-success-800 dark:text-success",
-		B: "bg-success/12 text-success-800 dark:text-success",
-		C: "bg-muted text-foreground",
-		D: "bg-warning/18 text-warning-800 dark:text-warning",
-		E: "bg-destructive/12 text-destructive",
+	const GRADE_TONE: Record<string, Tone> = {
+		A: "success",
+		B: "success",
+		C: "neutral",
+		D: "warning",
+		E: "destructive",
 	};
 </script>
 
 <span
 	class={cn(
 		"inline-flex h-6 min-w-6 items-center justify-center rounded-md px-1.5 text-xs font-semibold tabular-nums",
-		TONE[grade] ?? TONE.C,
+		TONE_TINT[GRADE_TONE[grade] ?? "neutral"],
 		className,
 	)}
 	title={hint}

package/src/charts/dashboard/stat-tile.svelte

@@ -14,7 +14,6 @@
 	import Sparkline from "../sparkline.svelte";
 	import type { Snippet } from "svelte";
 	import { cn } from "../../lib/utils.js";
-	import { Icon } from "../../components/icon/index.js";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 	// =========================
@@ -87,7 +86,7 @@
 		shareLabel,
 		color,
 		series,
-		icon,
+		icon: Icon,
 		href,
 		hrefLabel,
 		target = "_blank",
@@ -124,7 +123,7 @@
 	)}
 >
 	{#snippet tileIcon()}
-		{#if icon}<Icon {icon} size={14} class="shrink-0" />{/if}
+		{#if Icon}<Icon size={14} class="shrink-0" />{/if}
 	{/snippet}
 
 	<NumberChart
@@ -135,7 +134,7 @@
 		{share}
 		{shareLabel}
 		{color}
-		icon={icon ? tileIcon : undefined}
+		icon={Icon ? tileIcon : undefined}
 		size={lead ? "lg" : "md"}
 		caption={hint}
 		class={cn(

package/src/charts/line-chart.svelte

@@ -22,6 +22,7 @@
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
 
 	// =========================
@@ -119,15 +120,7 @@
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
 
-	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
-	const compact = new Intl.NumberFormat(undefined, {
-		notation: "compact",
-		maximumFractionDigits: 1,
-	});
-	function valueTick(v: number): string {
-		const full = formatValue(v);
-		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
-	}
+	const tick = $derived(valueTick(formatValue));
 	// WHY: a dashed tail is two splines sharing the boundary point so the solid
 	// and dashed segments meet without a gap.
 	const hasTail = $derived(
@@ -200,7 +193,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} />
 					<g class="hr-line-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/primitives/chart-utils.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vite-plus/test";
+import { valueTick } from "./chart-utils.js";
+
+describe("valueTick", () => {
+  const tick = valueTick((v) => v.toLocaleString("en-US"));
+
+  it("keeps a label of 6 characters or fewer as the formatter wrote it", () => {
+    expect(tick(1234)).toBe("1,234");
+    expect(tick(12345)).toBe("12,345");
+  });
+
+  it("shortens a longer label to compact notation", () => {
+    expect(tick(1_000_000)).toBe("1M");
+    expect(tick(1_234_567)).toBe("1.2M");
+    expect(tick(-12345)).toBe("-12.3K");
+  });
+});

package/src/charts/primitives/chart-utils.ts

@@ -39,6 +39,22 @@ export function getPayloadConfigFromPayload(
   return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
 }
 
+const compact = new Intl.NumberFormat(undefined, {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+/**
+ * An axis tick formatter. "1,000,000" overflows the 48px gutter and the gap between ticks, so a
+ * label over 6 characters falls back to "1M"; the tooltip keeps the full value.
+ */
+export function valueTick(format: (v: number) => string): (v: number) => string {
+  return (v) => {
+    const full = format(v);
+    return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+  };
+}
+
 type ChartContextValue = {
   config: ChartConfig;
 };

package/src/charts/time-series-chart.svelte

@@ -63,7 +63,7 @@
 		label = "Value",
 		label2,
 		color = "var(--chart-series-1)",
-		color2 = "var(--muted-foreground)",
+		color2 = "var(--chart-series-2)",
 		formatValue = (v) => v.toLocaleString(),
 		formatValue2,
 		height = 280,
@@ -152,7 +152,7 @@
 						<Spline
 							y="value2"
 							curve={curveMonotoneX}
-							style="stroke: {color2}; stroke-dasharray: 4 4; stroke-width: 1; fill: none"
+							style="stroke: {color2}; stroke-dasharray: 4 4; stroke-width: 1.5; fill: none"
 						/>
 					{/if}
 				</Reveal>
@@ -168,9 +168,13 @@
 						})}
 					/>
 					<Tooltip.List>
-						<Tooltip.Item {label} value={formatValue(d.value)} />
+						<Tooltip.Item {label} {color} value={formatValue(d.value)} />
 						{#if label2 && d.value2 !== undefined}
-							<Tooltip.Item label={label2} value={(formatValue2 ?? formatValue)(d.value2)} />
+							<Tooltip.Item
+								label={label2}
+								color={color2}
+								value={(formatValue2 ?? formatValue)(d.value2)}
+							/>
 						{/if}
 					</Tooltip.List>
 				{/snippet}

package/src/components/chip/count-chip.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+		count: number;
+		/** `sm` is 16px, for a count inside a control or on a button; `md` is 20px, beside a heading. */
+		size?: "sm" | "md";
+		/** `brand` marks a count that is on: an applied filter, the selected segment. */
+		tone?: "neutral" | "brand";
+		class?: string;
+	}
+
+	let { count, size = "md", tone = "neutral", class: className, ...restProps }: Props = $props();
+
+	const SIZE = { sm: "h-4 min-w-4", md: "h-5 min-w-5" };
+	const TONE = {
+		neutral: "bg-foreground/6 text-muted-foreground",
+		brand: "bg-brand/12 text-brand dark:text-brand-light",
+	};
+</script>
+
+<!-- A count is a pill (DESIGN.md rule 15). Min width equals height with 4px padding, so one digit
+     draws a circle, not an ellipse. -->
+<span
+	class={cn(
+		"inline-grid shrink-0 place-items-center rounded-full px-1 text-xs leading-none font-medium tabular-nums",
+		SIZE[size],
+		TONE[tone],
+		className,
+	)}
+	{...restProps}
+>
+	{count.toLocaleString()}
+</span>

package/src/components/chip/index.ts

@@ -1 +1,2 @@
+export { default as CountChip } from "./count-chip.svelte";
 export { default as TagChip } from "./tag-chip.svelte";

package/src/components/data-table/data-table.ts

@@ -26,7 +26,7 @@ export function anyContainsQuery(values: Array<string | null | undefined>, query
 // ========================= TYPES
 export type SortDirection = "asc" | "desc";
 
-export type SortState<T> = {
+export type SortState<T = Record<string, unknown>> = {
   key: keyof T & string;
   direction: SortDirection;
 } | null;

package/src/components/data-table/row-context-menu.svelte

@@ -5,6 +5,7 @@
 	import * as ContextMenu from "../../shadcn/context-menu/index.js";
 	import { HoldToConfirm } from "../hold-to-confirm/index.js";
 	import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
+	import { copyText } from "../copy/clipboard.js";
 	import type { Snippet } from "svelte";
 
 	// =========================
@@ -47,14 +48,12 @@
 	// message, a doc or an agent prompt, none of which can resolve "/clients/42".
 	async function handleCopyLink() {
 		if (!href) return;
-		await navigator.clipboard.writeText(new URL(href, window.location.origin).href);
-		onCopied?.();
+		if (await copyText(new URL(href, window.location.origin).href)) onCopied?.();
 	}
 
 	async function handleCopyId() {
 		if (!id) return;
-		await navigator.clipboard.writeText(id);
-		onCopied?.();
+		if (await copyText(id)) onCopied?.();
 	}
 </script>