@heyramzi/ui 2.0.1 → 2.2.0

package/src/tasks/time/duration.ts

@@ -2,68 +2,68 @@ import type { Tone } from "../../lib/tone.js";
 
 /** "90", "45m", "1h", "1.5h", "1h30", "1h 30m" and "1:30" to whole minutes. Null when it isn't a duration. */
 export function parseMinutes(text: string): number | null {
-	const value = text.trim().toLowerCase();
-	if (!value) return null;
-	if (/^\d+$/.test(value)) return Number(value);
-	const clock = /^(\d+):([0-5]?\d)$/.exec(value);
-	if (clock) return Number(clock[1]) * 60 + Number(clock[2]);
-	const decimalHours = /^(\d+(?:[.,]\d+)?)\s*h$/.exec(value);
-	if (decimalHours?.[1]) return Math.round(Number(decimalHours[1].replace(",", ".")) * 60);
-	const parts = /^(?:(\d+)\s*h)?\s*(?:(\d+)\s*m?)?$/.exec(value);
-	if (!parts || (!parts[1] && !parts[2])) return null;
-	return Number(parts[1] ?? 0) * 60 + Number(parts[2] ?? 0);
+  const value = text.trim().toLowerCase();
+  if (!value) return null;
+  if (/^\d+$/.test(value)) return Number(value);
+  const clock = /^(\d+):([0-5]?\d)$/.exec(value);
+  if (clock) return Number(clock[1]) * 60 + Number(clock[2]);
+  const decimalHours = /^(\d+(?:[.,]\d+)?)\s*h$/.exec(value);
+  if (decimalHours?.[1]) return Math.round(Number(decimalHours[1].replace(",", ".")) * 60);
+  const parts = /^(?:(\d+)\s*h)?\s*(?:(\d+)\s*m?)?$/.exec(value);
+  if (!parts || (!parts[1] && !parts[2])) return null;
+  return Number(parts[1] ?? 0) * 60 + Number(parts[2] ?? 0);
 }
 
 /** 150 to "2h 30m". */
 export function formatMinutes(minutes: number): string {
-	const whole = Math.max(0, Math.round(Number.isFinite(minutes) ? minutes : 0));
-	const hours = Math.floor(whole / 60);
-	const rest = whole % 60;
-	if (hours === 0) return `${rest}m`;
-	return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
+  const whole = Math.max(0, Math.round(Number.isFinite(minutes) ? minutes : 0));
+  const hours = Math.floor(whole / 60);
+  const rest = whole % 60;
+  if (hours === 0) return `${rest}m`;
+  return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
 }
 
 /** Milliseconds to the timer readout, "1:05:09". */
 export function formatClock(ms: number): { hours: string; minutes: string; seconds: string } {
-	const total = Math.max(0, Math.floor(ms / 1000));
-	return {
-		hours: String(Math.floor(total / 3600)),
-		minutes: String(Math.floor((total % 3600) / 60)).padStart(2, "0"),
-		seconds: String(total % 60).padStart(2, "0"),
-	};
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return {
+    hours: String(Math.floor(total / 3600)),
+    minutes: String(Math.floor((total % 3600) / 60)).padStart(2, "0"),
+    seconds: String(total % 60).padStart(2, "0"),
+  };
 }
 
 /** The reader's own calendar day as `YYYY-MM-DD`. */
 export function localDay(date: Date = new Date()): string {
-	const month = String(date.getMonth() + 1).padStart(2, "0");
-	const day = String(date.getDate()).padStart(2, "0");
-	return `${date.getFullYear()}-${month}-${day}`;
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${date.getFullYear()}-${month}-${day}`;
 }
 
 /** "Today", "Yesterday", then "Mon, Oct 12", in the given locale. */
 export function dayLabel(day: string, locale?: string): string {
-	const date = new Date(`${day}T12:00:00`);
-	const now = new Date();
-	now.setHours(12, 0, 0, 0);
-	const gap = Math.round((date.getTime() - now.getTime()) / 86_400_000);
-	if (gap === 0 || gap === -1) {
-		const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(gap, "day");
-		return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
-	}
-	return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
+  const date = new Date(`${day}T12:00:00`);
+  const now = new Date();
+  now.setHours(12, 0, 0, 0);
+  const gap = Math.round((date.getTime() - now.getTime()) / 86_400_000);
+  if (gap === 0 || gap === -1) {
+    const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(gap, "day");
+    return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+  }
+  return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
 }
 
 /** The tone of a budget: quiet until 90%, warning to 100%, destructive past it. */
 export function budgetTone(logged: number, estimate: number | null | undefined): Tone {
-	if (!estimate || estimate <= 0) return "neutral";
-	const ratio = logged / estimate;
-	if (ratio > 1) return "destructive";
-	return ratio >= 0.9 ? "warning" : "neutral";
+  if (!estimate || estimate <= 0) return "neutral";
+  const ratio = logged / estimate;
+  if (ratio > 1) return "destructive";
+  return ratio >= 0.9 ? "warning" : "neutral";
 }
 
 /** A stable color for a person, from their name or id. */
 export function personColor(key: string): string {
-	let hash = 0;
-	for (const char of key) hash = (hash * 31 + char.charCodeAt(0)) % 360;
-	return `oklch(0.72 0.12 ${hash})`;
+  let hash = 0;
+  for (const char of key) hash = (hash * 31 + char.charCodeAt(0)) % 360;
+  return `oklch(0.72 0.12 ${hash})`;
 }

package/src/tasks/time/time-chip.svelte

@@ -16,7 +16,7 @@
 		/** Replaces the spoken name. Defaults to a sentence built from the numbers. */
 		label?: string;
 		class?: string;
-	};
+	}
 
 	let { minutes, estimate, running = false, label, class: className }: Props = $props();
 
@@ -56,7 +56,14 @@
 			<span class="size-3 shrink-0 [&>svg]:size-full" aria-hidden="true"><Clock /></span>
 		{/if}
 		<span aria-hidden="true">
-			{formatMinutes(minutes)}{#if estimate}<span class={cn("font-normal", tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone])}> / {formatMinutes(estimate)}</span>{/if}
+			{formatMinutes(minutes)}{#if estimate}<span
+					class={cn(
+						"font-normal",
+						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
+					)}
+				>
+					/ {formatMinutes(estimate)}</span
+				>{/if}
 		</span>
 	</span>
 {/if}

package/src/tasks/time/time-dot.svelte

@@ -6,7 +6,7 @@
 		running?: boolean;
 		size?: number;
 		class?: string;
-	};
+	}
 
 	let { running = false, size = 8, class: className }: Props = $props();
 </script>

package/src/tasks/time/time-ring.svelte

@@ -17,7 +17,7 @@
 		/** Rendered in the middle, e.g. the percentage. */
 		children?: Snippet;
 		class?: string;
-	};
+	}
 
 	let { value, max, size = 56, stroke = 4, label, children, class: className }: Props = $props();
 
@@ -36,7 +36,14 @@
 	aria-hidden={label ? undefined : "true"}
 >
 	<svg viewBox="0 0 36 36" class="size-full -rotate-90" fill="none" aria-hidden="true">
-		<circle cx="18" cy="18" r={R} stroke="currentColor" stroke-width={stroke} class="text-foreground/10" />
+		<circle
+			cx="18"
+			cy="18"
+			r={R}
+			stroke="currentColor"
+			stroke-width={stroke}
+			class="text-foreground/10"
+		/>
 		<circle
 			cx="18"
 			cy="18"
@@ -58,7 +65,8 @@
 <style>
 	.time-ring-arc {
 		transition:
-			stroke-dasharray var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			stroke-dasharray var(--duration-slow, 400ms)
+				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
 			color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 

package/src/tasks/time/time-tracker.svelte

@@ -13,7 +13,12 @@
 		personColor,
 	} from "./duration.js";
 	import { DEFAULT_TIME_LABELS } from "./time-types.js";
-	import type { TimeLabels, TimeLogInput, TimeRunning, TimeStopInfo } from "./time-types.js";
+	import type {
+		TimeLabels,
+		TimeLogInput,
+		TimeRunning,
+		TimeStopInfo,
+	} from "./time-types.js";
 	import TimeDot from "./time-dot.svelte";
 	import { CaretDown, Play, Stop, X } from "phosphor-svelte";
 
@@ -135,7 +140,9 @@
 	let invalid = $state(false);
 	let durationInput = $state<HTMLInputElement>();
 	let parsed = $derived(parseMinutes(duration));
-	let preview = $derived(parsed !== null && parsed >= 1 && parsed <= 1440 ? formatMinutes(parsed) : "");
+	let preview = $derived(
+		parsed !== null && parsed >= 1 && parsed <= 1440 ? formatMinutes(parsed) : "",
+	);
 
 	async function submit(event: SubmitEvent): Promise<void> {
 		event.preventDefault();
@@ -228,9 +235,15 @@
 			<Popover.Trigger class="time-open" aria-label={labels.title}>
 				{#if running}
 					<TimeDot running size={6} />
-					<span role="timer" aria-label={labels.elapsed}>{clock.hours}:{clock.minutes}:{clock.seconds}</span>
+					<span role="timer" aria-label={labels.elapsed}
+						>{clock.hours}:{clock.minutes}:{clock.seconds}</span
+					>
 				{:else if total > 0}
-					<span>{formatMinutes(total)}{#if estimate}<span class="ms-1 font-normal text-muted-foreground">/ {formatMinutes(estimate)}</span>{/if}</span>
+					<span
+						>{formatMinutes(total)}{#if estimate}<span
+								class="ms-1 font-normal text-muted-foreground">/ {formatMinutes(estimate)}</span
+							>{/if}</span
+					>
 				{:else}
 					<span class="text-muted-foreground">{labels.timer}</span>
 				{/if}
@@ -254,12 +267,20 @@
 						class={cn("time-field w-full tabular-nums", preview && "pr-12")}
 					/>
 					{#if preview && preview !== duration.trim()}
-						<span class="time-preview pointer-events-none absolute inset-y-0 right-2 flex items-center text-xs text-muted-foreground tabular-nums" aria-hidden="true">
+						<span
+							class="time-preview pointer-events-none absolute inset-y-0 right-2 flex items-center text-xs text-muted-foreground tabular-nums"
+							aria-hidden="true"
+						>
 							{preview}
 						</span>
 					{/if}
 				</div>
-				<input type="date" bind:value={day} aria-label={labels.date} class="time-field w-full tabular-nums" />
+				<input
+					type="date"
+					bind:value={day}
+					aria-label={labels.date}
+					class="time-field w-full tabular-nums"
+				/>
 				<input
 					bind:value={note}
 					placeholder={labels.notePlaceholder}
@@ -288,11 +309,18 @@
 							<div class="h-1 overflow-hidden rounded-full bg-muted" aria-hidden="true">
 								<div
 									class="time-segment h-full rounded-full"
-									style:background={tone === "neutral" ? "var(--color-foreground)" : TONE_COLOR[tone]}
+									style:background={tone === "neutral"
+										? "var(--color-foreground)"
+										: TONE_COLOR[tone]}
 									style:width="{Math.min(100, percent)}%"
 								></div>
 							</div>
-							<p class={cn("text-xs tabular-nums", tone === "neutral" ? "text-muted-foreground" : TONE_TEXT[tone])}>
+							<p
+								class={cn(
+									"text-xs tabular-nums",
+									tone === "neutral" ? "text-muted-foreground" : TONE_TEXT[tone],
+								)}
+							>
 								{liveTotal > estimate
 									? labels.over(formatMinutes(liveTotal - estimate), formatMinutes(estimate))
 									: labels.remaining(formatMinutes(estimate - liveTotal), formatMinutes(estimate))}
@@ -303,7 +331,11 @@
 						<ul class="flex flex-wrap gap-x-3 gap-y-1">
 							{#each people as person (person.key)}
 								<li class="flex items-center gap-1.5 text-xs">
-									<span class="size-2 rounded-full" style:background={personColor(person.key)} aria-hidden="true"></span>
+									<span
+										class="size-2 rounded-full"
+										style:background={personColor(person.key)}
+										aria-hidden="true"
+									></span>
 									<span class="text-muted-foreground">{person.name}</span>
 									<span class="font-medium tabular-nums">{formatMinutes(person.minutes)}</span>
 								</li>
@@ -318,8 +350,12 @@
 					{#each groups as group (group.day)}
 						<div>
 							<div class="flex items-baseline justify-between border-b border-border/60 pb-1">
-								<h3 class="text-xs font-medium text-muted-foreground">{dayLabel(group.day, locale)}</h3>
-								<span class="text-xs font-medium text-muted-foreground tabular-nums">{formatMinutes(group.minutes)}</span>
+								<h3 class="text-xs font-medium text-muted-foreground">
+									{dayLabel(group.day, locale)}
+								</h3>
+								<span class="text-xs font-medium text-muted-foreground tabular-nums"
+									>{formatMinutes(group.minutes)}</span
+								>
 							</div>
 							<ul>
 								{#each group.items as entry (getId(entry))}
@@ -341,9 +377,13 @@
 										<span class="min-w-0 flex-1 truncate">
 											<span class="sr-only">{name},</span>
 											{#if text}{text}{:else}<span class="text-muted-foreground">{name}</span>{/if}
-											{#if renderMeta}<span class="ms-1.5 text-xs text-muted-foreground">{@render renderMeta(entry)}</span>{/if}
+											{#if renderMeta}<span class="ms-1.5 text-xs text-muted-foreground"
+													>{@render renderMeta(entry)}</span
+												>{/if}
 										</span>
-										<span class="shrink-0 font-medium tabular-nums">{formatMinutes(getMinutes(entry))}</span>
+										<span class="shrink-0 font-medium tabular-nums"
+											>{formatMinutes(getMinutes(entry))}</span
+										>
 										{#if onDelete && (canDelete?.(entry) ?? true)}
 											<button
 												type="button"
@@ -498,7 +538,8 @@
 	}
 
 	.time-segment {
-		transition: width var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: width var(--duration-slow, 400ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 
 	.time-delete {
@@ -527,7 +568,8 @@
 	}
 
 	.time-row.is-new {
-		animation: time-row-in var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+		animation: time-row-in var(--duration-fast, 250ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 	}
 
 	@keyframes time-pop {

package/src/tasks/time/time-types.ts

@@ -1,74 +1,74 @@
 /** A running timer. The host persists it, the tracker only reads it. */
 export type TimeRunning = {
-	startedAt: Date | string | number;
+  startedAt: Date | string | number;
 };
 
 /** What the tracker hands back when a manual entry is submitted. */
 export type TimeLogInput = {
-	minutes: number;
-	/** The day worked, `YYYY-MM-DD`. */
-	day: string;
-	note?: string;
+  minutes: number;
+  /** The day worked, `YYYY-MM-DD`. */
+  day: string;
+  note?: string;
 };
 
 /** What the tracker hands back when the timer stops. */
 export type TimeStopInfo = {
-	/** Elapsed whole minutes, never below 1. */
-	minutes: number;
-	startedAt: Date;
-	stoppedAt: Date;
-	/** The day it started, `YYYY-MM-DD`, in the reader's calendar. */
-	day: string;
+  /** Elapsed whole minutes, never below 1. */
+  minutes: number;
+  startedAt: Date;
+  stoppedAt: Date;
+  /** The day it started, `YYYY-MM-DD`, in the reader's calendar. */
+  day: string;
 };
 
 export type TimeLabels = {
-	title: string;
-	timer: string;
-	start: string;
-	stop: string;
-	running: string;
-	since: (time: string) => string;
-	started: string;
-	runningFor: (duration: string) => string;
-	stopped: (duration: string) => string;
-	elapsed: string;
-	logged: string;
-	duration: string;
-	durationPlaceholder: string;
-	date: string;
-	note: string;
-	notePlaceholder: string;
-	log: string;
-	saving: string;
-	invalid: string;
-	empty: string;
-	remaining: (left: string, estimate: string) => string;
-	over: (over: string, estimate: string) => string;
-	deleteEntry: (duration: string) => string;
+  title: string;
+  timer: string;
+  start: string;
+  stop: string;
+  running: string;
+  since: (time: string) => string;
+  started: string;
+  runningFor: (duration: string) => string;
+  stopped: (duration: string) => string;
+  elapsed: string;
+  logged: string;
+  duration: string;
+  durationPlaceholder: string;
+  date: string;
+  note: string;
+  notePlaceholder: string;
+  log: string;
+  saving: string;
+  invalid: string;
+  empty: string;
+  remaining: (left: string, estimate: string) => string;
+  over: (over: string, estimate: string) => string;
+  deleteEntry: (duration: string) => string;
 };
 
 export const DEFAULT_TIME_LABELS: TimeLabels = {
-	title: "Time",
-	timer: "Timer",
-	start: "Start timer",
-	stop: "Stop timer",
-	running: "Running",
-	since: (time) => `Since ${time}`,
-	started: "Timer started",
-	runningFor: (duration) => `Timer running, ${duration}`,
-	stopped: (duration) => `Timer stopped, ${duration} to log`,
-	elapsed: "Elapsed time",
-	logged: "Logged",
-	duration: "Time spent",
-	durationPlaceholder: "1h30",
-	date: "Date worked",
-	note: "Note",
-	notePlaceholder: "What was done",
-	log: "Log",
-	saving: "Saving",
-	invalid: "Try 45m, 1h30 or 1.5h",
-	empty: "Log your first hour",
-	remaining: (left, estimate) => `${left} left of ${estimate}`,
-	over: (over, estimate) => `${over} over ${estimate}`,
-	deleteEntry: (duration) => `Delete ${duration} entry`,
+  title: "Time",
+  timer: "Timer",
+  start: "Start timer",
+  stop: "Stop timer",
+  running: "Running",
+  since: (time) => `Since ${time}`,
+  started: "Timer started",
+  runningFor: (duration) => `Timer running, ${duration}`,
+  stopped: (duration) => `Timer stopped, ${duration} to log`,
+  elapsed: "Elapsed time",
+  logged: "Logged",
+  duration: "Time spent",
+  durationPlaceholder: "1h30",
+  date: "Date worked",
+  note: "Note",
+  notePlaceholder: "What was done",
+  log: "Log",
+  saving: "Saving",
+  invalid: "Try 45m, 1h30 or 1.5h",
+  empty: "Log your first hour",
+  remaining: (left, estimate) => `${left} left of ${estimate}`,
+  over: (over, estimate) => `${over} over ${estimate}`,
+  deleteEntry: (duration) => `Delete ${duration} entry`,
 };

package/src/tasks/use-kanban-dnd.svelte.ts

@@ -22,9 +22,8 @@ export type KanbanDndConfig<T> = {
 };
 
 /**
- * The drag state and handlers for a board. Native HTML5 drag is deliberate:
- * it reuses the browser's own drop targets, so a card can leave the board and
- * land on any other element a caller wired up.
+ * A board's drag state and handlers, on native HTML5 drag so a card can leave the board for
+ * any drop target a caller wired up.
  */
 export function createKanbanDnd<T>(config: KanbanDndConfig<T>) {
   let draggedId = $state<string | null>(null);

package/src/thread/README.md

@@ -0,0 +1,31 @@
+# @heyramzi/ui/thread
+
+One comment thread for any subject: a task, a project, a doc or a diagram. The thread owns the layout and the draft state. It never fetches. You pass comments and callbacks, and it hands back what the person did.
+
+```svelte
+<script lang="ts">
+  import { Thread, type ThreadComment, type ThreadPost } from "@heyramzi/ui/thread";
+
+  let comments = $state<ThreadComment[]>([]);
+
+  async function onPost({ body, parentId }: ThreadPost) {
+    const saved = await save(body, parentId);
+    if (!saved) return false; // keeps the draft
+    comments = [...comments, saved];
+  }
+</script>
+
+<Thread {comments} {onPost} {onEdit} {onDelete} {onResolve} canEdit={(c) => c.author.name === me} />
+```
+
+- **Replies.** `parentId` points at the comment answered. A reply to a reply sits under the same root, a reply whose parent is gone becomes a root, and `buildThread(comments)` gives you the same grouping without the component.
+- **Authors.** `author.kind` is `user` or `agent`. An agent shows an "AI" chip. The `avatar` snippet replaces the face for both kinds, so an app passes its cast portrait there.
+- **Rich bodies.** A comment with `content` (Tiptap JSON) draws through `@heyramzi/ui/editor`'s renderer. `body` stays the plain-text fallback. A rich comment has no edit button, because the thread edits text only.
+- **Resolve.** Pass `onResolve` and each root gets a check. Resolved roots fold away behind a "Show N resolved" button.
+- **Anchor.** `anchor` carries `{ nodeId, dx, dy, x, y }` for a canvas pin. A pinned comment shows a chip, and `onAnchor` fires on a click so the canvas can move to the node. `anchorChip` replaces the chip.
+- **Attachments.** The `attachments` snippet draws under a comment's body.
+- **Labels.** Every string comes from `labels`, a partial of `ThreadLabels`. `showResolved` holds a `{count}` slot. `when(comment)` formats the time.
+
+```ts
+const fr = { title: "Activité", send: "Commenter", showResolved: "Afficher {count} résolu" };
+```

package/src/thread/index.ts

@@ -0,0 +1,12 @@
+export { default as Thread } from "./thread.svelte";
+export { buildThread, fillCount, resolveThreadLabels, resolvedCount } from "./logic.js";
+export { DEFAULT_THREAD_LABELS } from "./types.js";
+export type {
+  ThreadAnchor,
+  ThreadAuthor,
+  ThreadAuthorKind,
+  ThreadComment,
+  ThreadLabels,
+  ThreadNode,
+  ThreadPost,
+} from "./types.js";

package/src/thread/logic.ts

@@ -0,0 +1,61 @@
+import type { ThreadComment, ThreadLabels, ThreadNode } from "./types.js";
+import { DEFAULT_THREAD_LABELS } from "./types.js";
+
+function time(comment: ThreadComment): number {
+  const ms = Date.parse(comment.createdAt);
+  return Number.isNaN(ms) ? Number.POSITIVE_INFINITY : ms;
+}
+
+/** Oldest first, a malformed timestamp last, ties in the order they came. */
+function byTime(comments: ThreadComment[]): ThreadComment[] {
+  return comments
+    .map((comment, index) => ({ comment, index }))
+    .toSorted((a, b) => time(a.comment) - time(b.comment) || a.index - b.index)
+    .map((row) => row.comment);
+}
+
+/**
+ * Roots in time order with their replies: a reply to a reply joins the root, an orphan becomes a
+ * root, and a parent loop can't hang the walk.
+ */
+export function buildThread(comments: ThreadComment[]): ThreadNode[] {
+  const byId = new Map(comments.map((comment) => [comment.id, comment]));
+
+  function rootOf(comment: ThreadComment): ThreadComment {
+    const seen = new Set<string>([comment.id]);
+    let current = comment;
+    for (;;) {
+      const parent = current.parentId ? byId.get(current.parentId) : undefined;
+      if (!parent) return current;
+      if (seen.has(parent.id)) return comment;
+      seen.add(parent.id);
+      current = parent;
+    }
+  }
+
+  const replies = new Map<string, ThreadComment[]>();
+  const roots: ThreadComment[] = [];
+  for (const comment of comments) {
+    const root = rootOf(comment);
+    if (root.id === comment.id) roots.push(comment);
+    else replies.set(root.id, [...(replies.get(root.id) ?? []), comment]);
+  }
+  return byTime(roots).map((comment) => ({
+    comment,
+    replies: byTime(replies.get(comment.id) ?? []),
+  }));
+}
+
+/** How many conversations are resolved. */
+export function resolvedCount(nodes: ThreadNode[]): number {
+  return nodes.filter((node) => node.comment.resolved).length;
+}
+
+export function resolveThreadLabels(overrides?: Partial<ThreadLabels>): ThreadLabels {
+  return { ...DEFAULT_THREAD_LABELS, ...overrides };
+}
+
+/** Fills `{count}` in a label, so a French host writes its own sentence. */
+export function fillCount(label: string, count: number): string {
+  return label.replaceAll("{count}", String(count));
+}