@heyramzi/tasks 0.3.0 → 0.5.0

package/src/task-list.svelte

@@ -1,29 +1,49 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="T, C extends KanbanColumnDef = KanbanColumnDef">
 	import type { Snippet } from "svelte";
 	import { flip } from "svelte/animate";
 	import { cubicOut } from "svelte/easing";
 	import { liftDragImage } from "./kanban-drag.js";
 	import { boardOrderAt } from "./board-order.js";
-	import { cn } from "./lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
-	import chevronIcon from "./icons/chevron-right.svg?raw";
+	import { CaretRight } from "phosphor-svelte";
 	import type { KanbanColumn as KanbanColumnDef, KanbanMove, KanbanSortKey } from "./kanban-types.js";
 	import type { TaskListGroupContext, TaskListRowContext } from "./task-types.js";
 
-	type Props<T> = {
+	type Props<T, C extends KanbanColumnDef> = {
 		/** The same shape as board columns, so one config feeds both views. */
-		groups: KanbanColumnDef[];
+		groups: C[];
 		items: T[];
 		getId: (item: T) => string;
 		/** The group id a row belongs to. */
 		getGroup: (item: T) => string;
+		/**
+		 * Nests a group under another by its id, e.g. a project under its client. A child draws
+		 * inside its parent's section, indented, and folds with it. Return nothing for a top-level group.
+		 */
+		getParent?: (group: C) => string | null | undefined;
 		/** Called on drop with what to persist. Same contract as the board. */
 		onMove: (id: string, move: KanbanMove) => void | Promise<void>;
 		renderRow: Snippet<[T, TaskListRowContext]>;
 		/** Optional sticky header row above every group, e.g. column labels. */
 		head?: Snippet;
-		groupHeader?: Snippet<[KanbanColumnDef, TaskListGroupContext]>;
+		groupHeader?: Snippet<[C, TaskListGroupContext]>;
+		/** Controls at the end of a group header, shown on hover, focus or a coarse pointer. */
+		actions?: Snippet<[C, TaskListGroupContext]>;
+		/** Rendered under a group's rows, e.g. an add-task row. Folds with the group. */
+		groupFooter?: Snippet<[C, TaskListGroupContext]>;
 		boardOrder?: (item: T) => string | null | undefined;
+		/** Breaks a tie in manual order: two rows with the same key, or both without one. */
+		manualTiebreak?: (a: T, b: T) => number;
+		/**
+		 * Rows are draggable and take Alt plus Up or Down. Turn it off for a list that only groups,
+		 * where rows hold their own links and buttons and a drop makes no sense.
+		 */
+		draggable?: boolean;
+		/** The screen-reader name of a row. Defaults to a hint about the keyboard move. */
+		getLabel?: (item: T) => string;
+		/** Fires when a group is folded or unfolded, with every folded id. */
+		onCollapsedChange?: (ids: string[]) => void;
 		sortKeys?: KanbanSortKey<T>[];
 		sortKey?: string;
 		/** Groups can be folded from their header. Defaults to true. */
@@ -32,6 +52,8 @@
 		collapsed?: string[];
 		emptyLabel?: string;
 		isDroppable?: (groupId: string) => boolean;
+		/** Drops the card chrome (border, radius, fill) so the list sits flat on the page. Group dividers stay. */
+		flat?: boolean;
 		class?: string;
 	};
 
@@ -40,19 +62,27 @@
 		items,
 		getId,
 		getGroup,
+		getParent,
 		onMove,
 		renderRow,
 		head,
 		groupHeader,
+		actions,
+		groupFooter,
 		boardOrder,
+		manualTiebreak,
+		draggable = true,
+		getLabel,
+		onCollapsedChange,
 		sortKeys = [],
 		sortKey = "manual",
 		collapsible = true,
 		collapsed = [],
 		emptyLabel = "Nothing here yet",
 		isDroppable,
+		flat = false,
 		class: className,
-	}: Props<T> = $props();
+	}: Props<T, C> = $props();
 
 	// Rows past this index enter together, so a long list never waits on its stagger.
 	const STAGGER_CAP = 8;
@@ -62,13 +92,14 @@
 
 	function compare(a: T, b: T): number {
 		if (sortKey === "manual") {
-			if (!boardOrder) return 0;
+			const tie = manualTiebreak?.(a, b) ?? 0;
+			if (!boardOrder) return tie;
 			const ao = boardOrder(a);
 			const bo = boardOrder(b);
-			if (ao == null && bo == null) return 0;
+			if (ao == null && bo == null) return tie;
 			if (ao == null) return 1;
 			if (bo == null) return -1;
-			return ao < bo ? -1 : ao > bo ? 1 : 0;
+			return ao < bo ? -1 : ao > bo ? 1 : tie;
 		}
 		const key = sortKeys.find((entry) => entry.id === sortKey);
 		return key ? key.compare(a, b) : 0;
@@ -78,7 +109,34 @@
 		return items.filter((item) => getGroup(item) === groupId).sort(compare);
 	}
 
+	// A group nested under a missing parent is top-level, so no row is ever dropped from view.
+	let groupIds = $derived(new Set(groups.map((g) => g.id)));
+	let roots = $derived(
+		groups.filter((g) => {
+			const parent = getParent?.(g);
+			return !parent || !groupIds.has(parent);
+		})
+	);
+	let childrenOf = $derived.by(() => {
+		const map = new Map<string, C[]>();
+		for (const g of groups) {
+			const parent = getParent?.(g);
+			if (!parent || !groupIds.has(parent)) continue;
+			map.set(parent, [...(map.get(parent) ?? []), g]);
+		}
+		return map;
+	});
+
+	/** Rows in a group and in every group nested under it. */
+	function countWithin(groupId: string): number {
+		let n = sortedByGroup(groupId).length;
+		for (const child of childrenOf.get(groupId) ?? []) n += countWithin(child.id);
+		return n;
+	}
+
 	function canDrop(groupId: string): boolean {
+		// A group that only holds other groups has no rows of its own to drop into.
+		if (childrenOf.has(groupId)) return false;
 		return isDroppable?.(groupId) ?? (groups.find((g) => g.id === groupId)?.droppable ?? true);
 	}
 
@@ -103,6 +161,7 @@
 		if (next.has(groupId)) next.delete(groupId);
 		else next.add(groupId);
 		folded = next;
+		onCollapsedChange?.([...next]);
 	}
 
 	/** Alt + ArrowUp/Down sends the focused row to the end of the group above or below. */
@@ -118,11 +177,16 @@
 			const target = groups[i];
 			if (!canDrop(target.id)) continue;
 			e.preventDefault();
-			if (sortKey === "manual" && boardOrder) {
+			if (sortKey === "manual") {
 				const rows = sortedByGroup(target.id).filter((entry) => getId(entry) !== id);
+				const last = rows.at(-1);
 				void onMove(id, {
 					columnId: target.id,
-					boardOrder: boardOrderAt(rows, rows.length, (entry) => boardOrder(entry)),
+					...(boardOrder
+						? { boardOrder: boardOrderAt(rows, rows.length, (entry) => boardOrder(entry)) }
+						: {}),
+					beforeId: last === undefined ? null : getId(last),
+					afterId: null,
 				});
 			} else {
 				void onMove(id, { columnId: target.id });
@@ -131,109 +195,145 @@
 		}
 	}
 
-	let view = $derived(groups.map((group) => ({ group, rows: sortedByGroup(group.id) })));
 </script>
 
+{#snippet section(group: C, depth: number)}
+	{@const rows = sortedByGroup(group.id)}
+	{@const children = childrenOf.get(group.id) ?? []}
+	{@const count = countWithin(group.id)}
+	{@const active = dnd.dragOver?.columnId === group.id}
+	{@const open = !folded.has(group.id)}
+	{@const hue = group.hue ?? "var(--color-primary)"}
+	{@const context = { count, active, open, depth, hasChildren: children.length > 0 }}
+	<section
+		aria-label={group.ariaLabel ?? group.label}
+		class={cn("tl-group group/tl", depth === 0 ? "border-b border-border last:border-b-0" : "border-t border-border/60")}
+		class:tl-group-active={active}
+		style:--tl-hue={hue}
+		ondragover={children.length ? undefined : (e) => dnd.onColumnDragOver(e, group.id)}
+		ondragleave={children.length ? undefined : dnd.onDragLeave}
+		ondrop={children.length ? undefined : (e) => dnd.onDrop(e, group.id)}
+	>
+		<div
+			class={cn("sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm", flat ? "bg-background/90" : "bg-card/90", depth === 0 && (head ? "top-9" : "top-0"))}
+			style:top={depth > 0 ? `${(head ? 2.25 : 0) + depth * 2.5}rem` : undefined}
+			style:padding-inline-start={depth > 0 ? `${0.75 + depth * 1.25}rem` : undefined}
+		>
+			{#if collapsible}
+				<button
+					type="button"
+					aria-expanded={open}
+					aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
+					onclick={() => toggle(group.id)}
+					class="-ml-1 grid size-6 place-items-center rounded-md text-muted-foreground outline-none transition-colors duration-[var(--duration-quick,150ms)] hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
+				>
+					<span class="tl-chevron size-3.5 [&>svg]:size-full" class:tl-chevron-open={open} aria-hidden="true">
+						<CaretRight weight="bold" />
+					</span>
+				</button>
+			{/if}
+			{#if groupHeader}
+				{@render groupHeader(group, context)}
+			{:else}
+				<span class="size-2 shrink-0 rounded-full" style:background={hue}></span>
+				<span class="truncate text-sm font-medium text-foreground">{group.label}</span>
+				<span
+					class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
+				>
+					{count}
+				</span>
+			{/if}
+			{#if actions}
+				<div
+					class="tl-actions ms-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity duration-[var(--duration-quick,150ms)] focus-within:opacity-100 any-pointer-coarse:opacity-100"
+				>
+					{@render actions(group, context)}
+				</div>
+			{/if}
+		</div>
+
+		<div class="tl-fold" class:tl-fold-open={open}>
+			<div class="tl-fold-inner">
+				<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
+					{#each rows as item, index (getId(item))}
+						{@const id = getId(item)}
+						{@const dropBefore =
+							dnd.showIndicatorBefore(group.id, id) &&
+							!dnd.isDragSource(id) &&
+							idAt(rows, index - 1) !== dnd.draggedId}
+						<!-- WHY: a row is a list item that takes focus for the Alt+arrow move; making it a button would hide the list from screen readers. -->
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+						<div
+							role="listitem"
+							tabindex={draggable ? 0 : undefined}
+							aria-label={getLabel?.(item) ??
+								(draggable ? "Row. Press Alt plus Up or Down arrow to move between groups." : undefined)}
+							aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
+							draggable={draggable ? "true" : undefined}
+							animate:flip={{ duration: 250, easing: cubicOut }}
+							ondragstart={draggable
+								? (e) => {
+										liftDragImage(e, -1);
+										dnd.onDragStart(e, id);
+									}
+								: undefined}
+							ondragend={draggable ? () => dnd.resetDrag() : undefined}
+							ondragover={draggable
+								? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
+								: undefined}
+							onkeydown={draggable ? (e) => onRowKeyDown(e, id) : undefined}
+							style:--tl-i={Math.min(index, STAGGER_CAP)}
+							class={cn(
+								"tl-row relative mx-1.5 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+								draggable && "cursor-grab active:cursor-grabbing",
+								dropBefore && "tl-drop-before",
+								dnd.isDragSource(id) && "opacity-40",
+							)}
+						>
+							{@render renderRow(item, { groupId: group.id, index })}
+						</div>
+					{/each}
+
+					{#if dnd.showIndicatorEnd(group.id) && idAt(rows, rows.length - 1) !== dnd.draggedId}
+						<div class="tl-drop-end relative mx-1.5 h-2" aria-hidden="true"></div>
+					{/if}
+
+					{#if groupFooter}
+						{@render groupFooter(group, context)}
+					{/if}
+
+					{#if rows.length === 0 && children.length === 0 && !active}
+						<p class="mx-1.5 rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
+							{emptyLabel}
+						</p>
+					{/if}
+				</div>
+
+				{#each children as child (child.id)}
+					{@render section(child, depth + 1)}
+				{/each}
+			</div>
+		</div>
+	</section>
+{/snippet}
+
 <div
 	class={cn(
-		"task-list flex min-h-0 flex-1 flex-col overflow-y-auto rounded-xl border border-border bg-card text-card-foreground",
+		"task-list flex min-h-0 flex-1 flex-col overflow-y-auto",
+		flat ? "bg-background" : "rounded-xl border border-border bg-card text-card-foreground",
 		className,
 	)}
 >
 	{#if head}
 		<div
-			class="sticky top-0 z-20 flex h-9 shrink-0 items-center border-b border-border bg-card/90 text-xs font-medium text-muted-foreground backdrop-blur-sm"
+			class={cn("sticky top-0 z-20 flex h-9 shrink-0 items-center border-b border-border text-xs font-medium text-muted-foreground backdrop-blur-sm", flat ? "bg-background/90" : "bg-card/90")}
 		>
 			{@render head()}
 		</div>
 	{/if}
 
-	{#each view as { group, rows } (group.id)}
-		{@const active = dnd.dragOver?.columnId === group.id}
-		{@const open = !folded.has(group.id)}
-		{@const hue = group.hue ?? "var(--color-primary)"}
-		<section
-			aria-label={group.ariaLabel ?? group.label}
-			class="tl-group border-b border-border last:border-b-0"
-			class:tl-group-active={active}
-			style:--tl-hue={hue}
-			ondragover={(e) => dnd.onColumnDragOver(e, group.id)}
-			ondragleave={dnd.onDragLeave}
-			ondrop={(e) => dnd.onDrop(e, group.id)}
-		>
-			<div class={cn("sticky z-10 flex h-10 items-center gap-2 bg-card/90 px-3 backdrop-blur-sm", head ? "top-9" : "top-0")}>
-				{#if collapsible}
-					<button
-						type="button"
-						aria-expanded={open}
-						aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
-						onclick={() => toggle(group.id)}
-						class="-ml-1 grid size-6 place-items-center rounded-md text-muted-foreground outline-none transition-colors duration-[var(--duration-quick,150ms)] hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
-					>
-						<span class="tl-chevron size-3.5 [&>svg]:size-full" class:tl-chevron-open={open} aria-hidden="true">
-							{@html chevronIcon}
-						</span>
-					</button>
-				{/if}
-				{#if groupHeader}
-					{@render groupHeader(group, { count: rows.length, active, open })}
-				{:else}
-					<span class="size-2 shrink-0 rounded-full" style:background={hue}></span>
-					<span class="truncate text-sm font-medium text-foreground">{group.label}</span>
-					<span
-						class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
-					>
-						{rows.length}
-					</span>
-				{/if}
-			</div>
-
-			<div class="tl-fold" class:tl-fold-open={open}>
-				<div class="tl-fold-inner">
-					<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
-						{#each rows as item, index (getId(item))}
-							{@const id = getId(item)}
-							{@const dropBefore =
-								dnd.showIndicatorBefore(group.id, id) &&
-								!dnd.isDragSource(id) &&
-								idAt(rows, index - 1) !== dnd.draggedId}
-							<div
-								role="listitem"
-								tabindex="0"
-								aria-label="Row. Press Alt plus Up or Down arrow to move between groups."
-								draggable="true"
-								animate:flip={{ duration: 250, easing: cubicOut }}
-								ondragstart={(e) => {
-									liftDragImage(e, -1);
-									dnd.onDragStart(e, id);
-								}}
-								ondragend={() => dnd.resetDrag()}
-								ondragover={(e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))}
-								onkeydown={(e) => onRowKeyDown(e, id)}
-								style:--tl-i={Math.min(index, STAGGER_CAP)}
-								class={cn(
-									"tl-row relative mx-1.5 cursor-grab rounded-lg outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-ring/60",
-									dropBefore && "tl-drop-before",
-									dnd.isDragSource(id) && "opacity-40",
-								)}
-							>
-								{@render renderRow(item, { groupId: group.id, index })}
-							</div>
-						{/each}
-
-						{#if dnd.showIndicatorEnd(group.id) && idAt(rows, rows.length - 1) !== dnd.draggedId}
-							<div class="tl-drop-end relative mx-1.5 h-2" aria-hidden="true"></div>
-						{/if}
-
-						{#if rows.length === 0 && !active}
-							<p class="mx-1.5 rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
-								{emptyLabel}
-							</p>
-						{/if}
-					</div>
-				</div>
-			</div>
-		</section>
+	{#each roots as group (group.id)}
+		{@render section(group, 0)}
 	{/each}
 </div>
 
@@ -242,6 +342,11 @@
 		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
 	}
 
+	.tl-group:hover :global(.tl-actions),
+	.tl-group :global(.tl-actions:focus-within) {
+		opacity: 1;
+	}
+
 	.tl-group-active {
 		background: color-mix(in oklab, var(--tl-hue) 6%, transparent);
 	}

package/src/task-types.ts

@@ -1,5 +1,3 @@
-import type { Component } from "svelte";
-
 /** Second argument handed to the list row snippet. */
 export type TaskListRowContext = {
   groupId: string;
@@ -8,9 +6,13 @@ export type TaskListRowContext = {
 
 /** Second argument handed to the list group header snippet. */
 export type TaskListGroupContext = {
+  /** Rows in the group, and in every group nested under it. */
   count: number;
   active: boolean;
   open: boolean;
+  /** 0 for a top-level group. Only grows when `getParent` is set. */
+  depth: number;
+  hasChildren: boolean;
 };
 
 /** What the gantt asks the caller to persist after a bar is moved or resized. */
@@ -21,10 +23,11 @@ export type GanttChange = {
   end: string;
 };
 
-/** One option in the view switch. */
-export type TaskView = {
-  id: string;
-  label: string;
-  /** Any Svelte component that takes `size` and `class`, e.g. `BoardIcon`. */
-  icon?: Component<{ size?: number; class?: string }>;
+/** Second argument handed to the gantt label snippet. */
+export type GanttLabelContext = {
+  /** 0 for a top-level task. Only grows when `getParent` is set. */
+  depth: number;
+  hasChildren: boolean;
+  /** False when the task's children are folded away. */
+  open: boolean;
 };

package/src/time/duration.ts

@@ -0,0 +1,69 @@
+import type { Tone } from "@heyramzi/ui/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);
+}
+
+/** 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`;
+}
+
+/** 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"),
+	};
+}
+
+/** 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}`;
+}
+
+/** "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" });
+}
+
+/** 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";
+}
+
+/** 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})`;
+}

package/src/time/time-chip.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { TONE_CLASS, TONE_TEXT } from "@heyramzi/ui/lib/tone.js";
+	import { budgetTone, formatMinutes } from "./duration.js";
+	import TimeDot from "./time-dot.svelte";
+	import TimeRing from "./time-ring.svelte";
+	import { Clock } from "phosphor-svelte";
+
+	type Props = {
+		/** Minutes logged on the task. */
+		minutes: number;
+		/** Minutes budgeted. Draws a small ring and tints the chip as the budget runs out. */
+		estimate?: number;
+		/** A timer is running on the task. */
+		running?: boolean;
+		/** 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();
+
+	let tone = $derived(budgetTone(minutes, estimate));
+	let visible = $derived(minutes > 0 || running || !!estimate);
+	let spoken = $derived(
+		label ??
+			[
+				`${formatMinutes(minutes)} logged`,
+				estimate ? `of ${formatMinutes(estimate)}` : "",
+				running ? "timer running" : "",
+			]
+				.filter(Boolean)
+				.join(", "),
+	);
+</script>
+
+{#if visible}
+	<span
+		role="img"
+		aria-label={spoken}
+		class={cn(
+			"inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border px-1.5 text-xs font-medium tabular-nums",
+			running
+				? TONE_CLASS.accent
+				: tone === "neutral"
+					? "border-transparent text-muted-foreground"
+					: TONE_CLASS[tone],
+			className,
+		)}
+	>
+		{#if running}
+			<TimeDot running size={6} />
+		{:else if estimate}
+			<TimeRing value={minutes} max={estimate} size={12} stroke={6} />
+		{:else}
+			<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}
+		</span>
+	</span>
+{/if}

package/src/time/time-dot.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	type Props = {
+		/** Pulses while true. The dot takes its color from the text around it. */
+		running?: boolean;
+		size?: number;
+		class?: string;
+	};
+
+	let { running = false, size = 8, class: className }: Props = $props();
+</script>
+
+<span
+	class={cn("time-dot", running && "is-running", className)}
+	style:--time-dot-size="{size}px"
+	aria-hidden="true"
+></span>
+
+<style>
+	.time-dot {
+		position: relative;
+		display: inline-block;
+		flex: none;
+		width: var(--time-dot-size);
+		height: var(--time-dot-size);
+		border-radius: 9999px;
+		background: currentColor;
+	}
+
+	.time-dot.is-running::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: currentColor;
+		animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out) infinite;
+	}
+
+	@keyframes time-dot-pulse {
+		from {
+			transform: scale(1);
+			opacity: 0.45;
+		}
+		to {
+			transform: scale(2.8);
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.time-dot.is-running::after {
+			animation: none;
+			transform: scale(1.9);
+			opacity: 0.25;
+		}
+	}
+</style>