@heyramzi/ui 2.1.0 → 2.2.0

package/src/tasks/detail/task-property.svelte

@@ -11,7 +11,13 @@
 
 <!-- A labelled row in the rail. In the narrow chip row the label hides and
      names the group for assistive tech. -->
-<div class="flex min-h-7 items-center @3xl:grid @3xl:grid-cols-[6rem_minmax(0,1fr)]" role="group" aria-label={label}>
-	<span class="hidden text-xs font-medium text-muted-foreground @3xl:block" aria-hidden="true">{label}</span>
+<div
+	class="flex min-h-7 items-center @3xl:grid @3xl:grid-cols-[6rem_minmax(0,1fr)]"
+	role="group"
+	aria-label={label}
+>
+	<span class="hidden text-xs font-medium text-muted-foreground @3xl:block" aria-hidden="true"
+		>{label}</span
+	>
 	<div class="flex min-w-0 items-center">{@render children()}</div>
 </div>

package/src/tasks/detail/task-thread.svelte

@@ -5,7 +5,11 @@
 	import { AgentAvatar } from "../../agents/index.js";
 	import { TONE_CLASS } from "../../lib/tone.js";
 	import { Skeleton } from "../../shadcn/skeleton/index.js";
-	import { DEFAULT_TASK_DETAIL_LABELS, type TaskComment, type TaskDetailLabels } from "./detail-types.js";
+	import {
+		DEFAULT_TASK_DETAIL_LABELS,
+		type TaskComment,
+		type TaskDetailLabels,
+	} from "./detail-types.js";
 
 	interface Props {
 		comments: TaskComment[];
@@ -31,7 +35,8 @@
 		labels: labelOverrides,
 		agentAvatar,
 		avatar,
-		when = (comment) => new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+		when = (comment) =>
+			new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
 		onSend,
 		onEdit,
 		onDelete,
@@ -100,7 +105,10 @@
 			{#each comments as comment (comment.id)}
 				<li class="group relative flex gap-3">
 					<!-- The rail that ties one avatar to the next, as in an activity feed. -->
-					<span class="absolute start-[11.5px] top-8 -bottom-3 w-px bg-border group-last:hidden" aria-hidden="true"></span>
+					<span
+						class="absolute start-[11.5px] top-8 -bottom-3 w-px bg-border group-last:hidden"
+						aria-hidden="true"
+					></span>
 					<span class="relative size-6 shrink-0">
 						{#if comment.agent}
 							{#if agentAvatar}
@@ -111,7 +119,10 @@
 						{:else if avatar}
 							{@render avatar(comment)}
 						{:else}
-							<span class="grid size-6 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground" aria-hidden="true">
+							<span
+								class="grid size-6 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground"
+								aria-hidden="true"
+							>
 								{initial(comment.author)}
 							</span>
 						{/if}
@@ -121,7 +132,12 @@
 						<div class="flex h-6 items-center gap-2">
 							<span class="truncate text-[13px] font-medium">{comment.author}</span>
 							{#if comment.agent}
-								<span class={cn("inline-flex h-5 items-center rounded-sm border px-1.5 text-xs font-medium", TONE_CLASS.accent)}>
+								<span
+									class={cn(
+										"inline-flex h-5 items-center rounded-sm border px-1.5 text-xs font-medium",
+										TONE_CLASS.accent,
+									)}
+								>
 									{labels.ai}
 								</span>
 							{/if}
@@ -130,14 +146,26 @@
 								<span class="text-xs text-muted-foreground">{labels.commentEdited}</span>
 							{/if}
 							{#if canEdit(comment) && editingId !== comment.id}
-								<span class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
+								<span
+									class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
+								>
 									{#if onEdit}
-										<button type="button" class="thread-icon" aria-label={labels.commentEdit} onclick={() => startEdit(comment)}>
+										<button
+											type="button"
+											class="thread-icon"
+											aria-label={labels.commentEdit}
+											onclick={() => startEdit(comment)}
+										>
 											<PencilSimple class="size-3.5" aria-hidden="true" />
 										</button>
 									{/if}
 									{#if onDelete}
-										<button type="button" class="thread-icon" aria-label={labels.commentDelete} onclick={() => onDelete?.(comment)}>
+										<button
+											type="button"
+											class="thread-icon"
+											aria-label={labels.commentDelete}
+											onclick={() => onDelete?.(comment)}
+										>
 											<Trash class="size-3.5" aria-hidden="true" />
 										</button>
 									{/if}
@@ -153,8 +181,14 @@
 								class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
 							></textarea>
 							<div class="mt-2 flex justify-end gap-1.5">
-								<button type="button" class="thread-button" onclick={() => (editingId = null)}>{labels.cancel}</button>
-								<button type="button" class="thread-button thread-primary" onclick={() => saveEdit(comment)}>{labels.save}</button>
+								<button type="button" class="thread-button" onclick={() => (editingId = null)}
+									>{labels.cancel}</button
+								>
+								<button
+									type="button"
+									class="thread-button thread-primary"
+									onclick={() => saveEdit(comment)}>{labels.save}</button
+								>
 							</div>
 						{:else}
 							<p class="text-sm leading-relaxed whitespace-pre-wrap text-pretty">{comment.body}</p>
@@ -168,7 +202,9 @@
 	{/if}
 
 	{#if onSend}
-		<div class="rounded-lg border border-input transition-shadow focus-within:ring-3 focus-within:ring-ring/50">
+		<div
+			class="rounded-lg border border-input transition-shadow focus-within:ring-3 focus-within:ring-ring/50"
+		>
 			<textarea
 				bind:value={draft}
 				onkeydown={onComposerKeydown}
@@ -178,7 +214,12 @@
 				class="block max-h-60 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm leading-relaxed outline-none [field-sizing:content] placeholder:text-muted-foreground"
 			></textarea>
 			<div class="flex justify-end px-2 pb-2">
-				<button type="button" class="thread-button thread-primary" onclick={send} disabled={!canSend}>
+				<button
+					type="button"
+					class="thread-button thread-primary"
+					onclick={send}
+					disabled={!canSend}
+				>
 					{sending ? labels.saving : labels.commentSend}
 				</button>
 			</div>

package/src/tasks/gantt/gantt-bar.svelte

@@ -54,7 +54,9 @@
 	function onPointerDown(e: PointerEvent, mode: Drag["mode"]): void {
 		if (!editable || e.button !== 0) return;
 		e.stopPropagation();
-		(e.currentTarget as HTMLElement).closest<HTMLElement>("[data-bar]")?.setPointerCapture(e.pointerId);
+		(e.currentTarget as HTMLElement)
+			.closest<HTMLElement>("[data-bar]")
+			?.setPointerCapture(e.pointerId);
 		setDrag({ id, mode, originX: e.clientX, dx: 0 });
 	}
 
@@ -95,7 +97,9 @@
 	role="button"
 	tabindex="0"
 	aria-roledescription="task bar"
-	aria-label="{title}, {describe(span)}.{editable ? ' Arrow keys move it a day, Shift plus arrow keys change its end.' : ''}"
+	aria-label="{title}, {describe(span)}.{editable
+		? ' Arrow keys move it a day, Shift plus arrow keys change its end.'
+		: ''}"
 	class={cn(
 		"g-bar g-enter absolute top-1/2 flex -translate-y-1/2 items-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
 		editable && "cursor-grab",
@@ -117,15 +121,21 @@
 	{#if progress > 0}
 		<!-- The clip keeps the bar's rounded corners while the fill scales. -->
 		<span class="absolute inset-0 overflow-hidden rounded-lg" aria-hidden="true">
-			<span class="g-progress absolute inset-0 origin-left" style:transform="scaleX({progress})"></span>
+			<span class="g-progress absolute inset-0 origin-left" style:transform="scaleX({progress})"
+			></span>
 		</span>
 	{/if}
 	{#if width >= inlineTitleMin}
 		<span class="relative truncate px-2.5 text-xs font-medium text-foreground">{title}</span>
 	{/if}
 	{#if editable}
-		<span class="g-handle left-0" aria-hidden="true" onpointerdown={(e) => onPointerDown(e, "start")}></span>
-		<span class="g-handle right-0" aria-hidden="true" onpointerdown={(e) => onPointerDown(e, "end")}></span>
+		<span
+			class="g-handle left-0"
+			aria-hidden="true"
+			onpointerdown={(e) => onPointerDown(e, "start")}
+		></span>
+		<span class="g-handle right-0" aria-hidden="true" onpointerdown={(e) => onPointerDown(e, "end")}
+		></span>
 	{/if}
 	{#if dragging && drag && drag.dx !== 0}
 		<span
@@ -182,7 +192,8 @@
 
 	.g-progress {
 		background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
-		transition: transform var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: transform var(--duration-fast, 250ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 
 	/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */

package/src/tasks/gantt/gantt-grid.svelte

@@ -16,26 +16,55 @@
 </script>
 
 <!-- The layer behind every row: weekends, week lines, the today line and arrows. -->
-<div class="pointer-events-none absolute inset-y-0 left-(--g-label)" style:width="{layout.timelineWidth}px" aria-hidden="true">
+<div
+	class="pointer-events-none absolute inset-y-0 left-(--g-label)"
+	style:width="{layout.timelineWidth}px"
+	aria-hidden="true"
+>
 	{#each days as d (d.day)}
 		{#if d.weekend}
-			<div class="absolute inset-y-0 bg-foreground/[0.025]" style:left="{d.i * layout.dayWidth}px" style:width="{layout.dayWidth}px"></div>
+			<div
+				class="absolute inset-y-0 bg-foreground/[0.025]"
+				style:left="{d.i * layout.dayWidth}px"
+				style:width="{layout.dayWidth}px"
+			></div>
 		{/if}
 		{#if d.wd === 1}
-			<div class="absolute inset-y-0 w-px bg-border/70" style:left="{d.i * layout.dayWidth}px"></div>
+			<div
+				class="absolute inset-y-0 w-px bg-border/70"
+				style:left="{d.i * layout.dayWidth}px"
+			></div>
 		{/if}
 	{/each}
 	{#if layout.todayDay >= layout.first && layout.todayDay <= layout.last}
-		<div class="g-today absolute inset-y-0 w-px bg-primary" style:left="{dayX(layout, layout.todayDay) + layout.dayWidth / 2}px">
+		<div
+			class="g-today absolute inset-y-0 w-px bg-primary"
+			style:left="{dayX(layout, layout.todayDay) + layout.dayWidth / 2}px"
+		>
 			<span class="absolute -top-1 -left-[3px] size-[7px] rounded-full bg-primary"></span>
 		</div>
 	{/if}
-	<svg class="absolute inset-0 overflow-visible" width={layout.timelineWidth} height={rowCount * layout.rowHeight}>
+	<svg
+		class="absolute inset-0 overflow-visible"
+		width={layout.timelineWidth}
+		height={rowCount * layout.rowHeight}
+	>
 		{#each arrows as arrow (arrow.key)}
-			{@const lit = hoveredId === arrow.from || hoveredId === arrow.to || draggingId === arrow.from || draggingId === arrow.to}
+			{@const lit =
+				hoveredId === arrow.from ||
+				hoveredId === arrow.to ||
+				draggingId === arrow.from ||
+				draggingId === arrow.to}
 			<g class="g-arrow" class:g-arrow-lit={lit}>
 				<path d={arrow.d} pathLength="1" fill="none" stroke-width="1.5" class="g-arrow-line"></path>
-				<path d={arrow.head} fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="g-arrow-head"></path>
+				<path
+					d={arrow.head}
+					fill="none"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="g-arrow-head"
+				></path>
 			</g>
 		{/each}
 	</svg>
@@ -44,7 +73,8 @@
 <style>
 	.g-today {
 		transform-origin: top;
-		animation: g-today-in var(--duration-very-slow, 500ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+		animation: g-today-in var(--duration-very-slow, 500ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 	}
 
 	.g-arrow {
@@ -59,7 +89,8 @@
 	.g-arrow-line {
 		stroke-dasharray: 1;
 		stroke-dashoffset: 0;
-		animation: g-draw var(--duration-very-slow, 500ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) 300ms backwards;
+		animation: g-draw var(--duration-very-slow, 500ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) 300ms backwards;
 	}
 
 	.g-arrow-head {

package/src/tasks/gantt/gantt-group-row.svelte

@@ -15,13 +15,19 @@
 	let hue = $derived(row.group.hue ?? "var(--color-primary)");
 </script>
 
-<div role="listitem" class="relative flex border-b border-border/60 bg-muted/30" style:height="{layout.rowHeight}px">
+<div
+	role="listitem"
+	class="relative flex border-b border-border/60 bg-muted/30"
+	style:height="{layout.rowHeight}px"
+>
 	<!-- Opaque card under the row's muted tint, so bars never show through the pinned column. -->
 	<div class="sticky left-0 z-10 w-(--g-label) shrink-0 border-r border-border bg-card">
 		<div class="flex h-full items-center gap-2 bg-muted/30 px-3">
 			<span class="size-2 shrink-0 rounded-full" style:background={hue}></span>
 			<span class="truncate text-sm font-medium text-foreground">{row.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">
+			<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"
+			>
 				{row.count}
 			</span>
 		</div>

package/src/tasks/gantt/gantt-header.svelte

@@ -13,7 +13,9 @@
 
 	let { layout, days, months, labelHeading, locale, corner = $bindable() }: Props = $props();
 
-	let weekdayFormat = $derived(new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" }));
+	let weekdayFormat = $derived(
+		new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" }),
+	);
 </script>
 
 <!-- Months over days, pinned to the top. -->
@@ -32,7 +34,9 @@
 					style:left="{month.i * layout.dayWidth}px"
 					style:width="{month.length * layout.dayWidth}px"
 				>
-					<span class="sticky left-(--g-label) inline-block px-2 pt-1.5 text-xs font-medium whitespace-nowrap text-foreground">
+					<span
+						class="sticky left-(--g-label) inline-block px-2 pt-1.5 text-xs font-medium whitespace-nowrap text-foreground"
+					>
 						{month.label}
 					</span>
 				</div>
@@ -51,7 +55,9 @@
 					style:width="{layout.dayWidth}px"
 				>
 					{#if layout.dayWidth >= 26}
-						<span class="mb-0.5 opacity-70">{weekdayFormat.format(new Date(d.day * 86_400_000))}</span>
+						<span class="mb-0.5 opacity-70"
+							>{weekdayFormat.format(new Date(d.day * 86_400_000))}</span
+						>
 					{/if}
 					{#if showNumber}
 						<span

package/src/tasks/gantt/gantt-task-row.svelte

@@ -3,7 +3,14 @@
 	import { CaretRight, FlagPennant } from "phosphor-svelte";
 	import type { GanttChange, GanttLabelContext } from "../task-types.js";
 	import GanttBar from "./gantt-bar.svelte";
-	import { barWidth, dayX, type Drag, type Layout, type Span, type TaskRow } from "./logic.js";
+	import {
+		barWidth,
+		dayX,
+		type Drag,
+		type Layout,
+		type Span,
+		type TaskRow,
+	} from "./logic.js";
 	import "./gantt.css";
 
 	interface Props<T> {
@@ -60,7 +67,12 @@
 	let hot = $derived(hovered || drag?.id === row.id);
 </script>
 
-<div role="listitem" class="g-row relative flex border-b border-border/40 last:border-b-0" class:g-row-hot={hot} style:height="{layout.rowHeight}px">
+<div
+	role="listitem"
+	class="g-row relative flex border-b border-border/40 last:border-b-0"
+	class:g-row-hot={hot}
+	style:height="{layout.rowHeight}px"
+>
 	<div
 		class="sticky left-0 z-10 flex w-(--g-label) shrink-0 items-center gap-2 border-r border-border bg-card px-3 text-sm"
 		style:padding-inline-start={nested ? `${row.depth * indent + 12}px` : undefined}
@@ -74,7 +86,11 @@
 					onclick={() => onToggle(row.id)}
 					class="-ml-1 grid size-5 shrink-0 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="g-chevron size-3.5 [&>svg]:size-full" class:g-chevron-open={row.open} aria-hidden="true">
+					<span
+						class="g-chevron size-3.5 [&>svg]:size-full"
+						class:g-chevron-open={row.open}
+						aria-hidden="true"
+					>
 						<CaretRight weight="bold" />
 					</span>
 				</button>
@@ -108,7 +124,9 @@
 				onpointerenter={() => onhover(row.id, true)}
 				onpointerleave={() => onhover(row.id, false)}
 			>
-				<span class="size-5 [&>svg]:size-full" aria-hidden="true"><FlagPennant weight="fill" /></span>
+				<span class="size-5 [&>svg]:size-full" aria-hidden="true"
+					><FlagPennant weight="fill" /></span
+				>
 			</button>
 		{:else if !row.own}
 			<!-- A parent with no dates of its own: the span of what is below it. Not draggable. -->
@@ -124,7 +142,8 @@
 				style:width="{barWidth(span, layout)}px"
 				style:height="{Math.max(layout.rowHeight - 24, 10)}px"
 				onclick={() => onSelect?.(row.id)}
-				onkeydown={(e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
+				onkeydown={(e) =>
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
 				onpointerenter={() => onhover(row.id, true)}
 				onpointerleave={() => onhover(row.id, false)}
 			></div>
@@ -161,7 +180,8 @@
 	}
 
 	.g-chevron {
-		transition: rotate var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: rotate var(--duration-fast, 250ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 
 	.g-chevron-open {

package/src/tasks/gantt/gantt.css

@@ -1,6 +1,7 @@
 /* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
 .g-enter {
-  animation: g-bar-in var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+  animation: g-bar-in var(--duration-slow, 400ms)
+    var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
   animation-delay: calc(var(--g-i, 0) * var(--duration-stagger, 40ms));
 }
 

package/src/tasks/gantt/gantt.test.ts

@@ -50,7 +50,9 @@ describe("TaskGantt", () => {
     const root = render({ onChange: (_id: string, change: GanttChange) => changes.push(change) });
     const bar = root.querySelector("[data-bar]");
     bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
-    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", shiftKey: true, bubbles: true }));
+    bar?.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", shiftKey: true, bubbles: true }),
+    );
     await tick();
     expect(changes).toEqual([
       { start: "2026-10-06", end: "2026-10-10" },

package/src/tasks/gantt/logic.test.ts

@@ -1,8 +1,28 @@
 import { describe, expect, it } from "vite-plus/test";
 import { dayNumber } from "../dates.js";
-import { barWidth, buildArrows, buildMonths, buildDays, buildRows, liveSpan, rangeLabel, rangeOf, roundedPath, spanOf, type Drag, type Layout } from "./logic.js";
+import {
+  barWidth,
+  buildArrows,
+  buildMonths,
+  buildDays,
+  buildRows,
+  liveSpan,
+  rangeLabel,
+  rangeOf,
+  roundedPath,
+  spanOf,
+  type Drag,
+  type Layout,
+} from "./logic.js";
 
-type Task = { id: string; start?: string; end?: string; parent?: string; group?: string; after?: string[] };
+type Task = {
+  id: string;
+  start?: string;
+  end?: string;
+  parent?: string;
+  group?: string;
+  after?: string[];
+};
 
 const dates = { getStart: (t: Task) => t.start, getEnd: (t: Task) => t.end };
 const source = (overrides: Partial<Parameters<typeof buildRows<Task>>[1]> = {}) => ({
@@ -19,12 +39,20 @@ describe("spanOf", () => {
     expect(span && span.end - span.start).toBe(2);
   });
   it("lets a lone date stand for a one-day task", () => {
-    expect(spanOf({ id: "a", end: "2026-10-05" }, dates)).toEqual({ start: dayNumber("2026-10-05"), end: dayNumber("2026-10-05") });
-    expect(spanOf({ id: "a", start: "2026-10-05" }, dates)).toEqual({ start: dayNumber("2026-10-05"), end: dayNumber("2026-10-05") });
+    expect(spanOf({ id: "a", end: "2026-10-05" }, dates)).toEqual({
+      start: dayNumber("2026-10-05"),
+      end: dayNumber("2026-10-05"),
+    });
+    expect(spanOf({ id: "a", start: "2026-10-05" }, dates)).toEqual({
+      start: dayNumber("2026-10-05"),
+      end: dayNumber("2026-10-05"),
+    });
   });
   it("gives an undated task no span, and never an end before the start", () => {
     expect(spanOf({ id: "a" }, dates)).toBeNull();
-    expect(spanOf({ id: "a", start: "2026-10-09", end: "2026-10-05" }, dates)?.end).toBe(dayNumber("2026-10-09"));
+    expect(spanOf({ id: "a", start: "2026-10-09", end: "2026-10-05" }, dates)?.end).toBe(
+      dayNumber("2026-10-09"),
+    );
   });
 });
 
@@ -46,13 +74,20 @@ describe("liveSpan", () => {
 describe("rangeOf", () => {
   const today = dayNumber("2026-10-21");
   it("pads the tasks' span and starts on a Monday", () => {
-    const { first, last } = rangeOf([{ id: "a", start: "2026-10-14", end: "2026-10-30" }], dates, today);
+    const { first, last } = rangeOf(
+      [{ id: "a", start: "2026-10-14", end: "2026-10-30" }],
+      dates,
+      today,
+    );
     expect(new Date(first * 86_400_000).getUTCDay()).toBe(1);
     expect(first).toBeLessThanOrEqual(dayNumber("2026-10-07"));
     expect(last).toBe(dayNumber("2026-10-30") + 21);
   });
   it("honours from and to, and never ends before it starts", () => {
-    expect(rangeOf([], dates, today, "2026-10-21", "2026-10-01")).toEqual({ first: today, last: today });
+    expect(rangeOf([], dates, today, "2026-10-21", "2026-10-01")).toEqual({
+      first: today,
+      last: today,
+    });
   });
 });
 
@@ -91,15 +126,30 @@ describe("buildRows", () => {
       { id: "b", group: "one", start: "2026-10-01", end: "2026-10-02" },
       { id: "c", group: "one", start: "2026-10-10", end: "2026-10-12" },
     ];
-    const rows = buildRows(grouped, source({
-      groups: [{ id: "one", label: "One" }, { id: "two", label: "Two" }],
-      getGroup: (t) => t.group ?? "",
-    }));
-    expect(rows.map((r) => (r.kind === "group" ? `#${r.group.id}:${r.count}` : r.id))).toEqual(["#one:2", "b", "c", "#two:1", "a"]);
+    const rows = buildRows(
+      grouped,
+      source({
+        groups: [
+          { id: "one", label: "One" },
+          { id: "two", label: "Two" },
+        ],
+        getGroup: (t) => t.group ?? "",
+      }),
+    );
+    expect(rows.map((r) => (r.kind === "group" ? `#${r.group.id}:${r.count}` : r.id))).toEqual([
+      "#one:2",
+      "b",
+      "c",
+      "#two:1",
+      "a",
+    ]);
     expect(rows[0].span).toEqual({ start: dayNumber("2026-10-01"), end: dayNumber("2026-10-12") });
   });
   it("applies a live drag to the row it moves", () => {
-    const rows = buildRows([{ id: "a", start: "2026-10-05", end: "2026-10-06" }], source({ drag: { id: "a", mode: "move", originX: 0, dx: 2 } }));
+    const rows = buildRows(
+      [{ id: "a", start: "2026-10-05", end: "2026-10-06" }],
+      source({ drag: { id: "a", mode: "move", originX: 0, dx: 2 } }),
+    );
     const row = rows[0];
     if (row.kind !== "task") throw new Error("expected a task row");
     expect(row.span).toEqual({ start: dayNumber("2026-10-07"), end: dayNumber("2026-10-08") });
@@ -108,7 +158,15 @@ describe("buildRows", () => {
 
 describe("buildArrows", () => {
   const first = dayNumber("2026-10-05");
-  const layout: Layout = { first, last: first + 30, dayWidth: 32, rowHeight: 40, inset: 3, timelineWidth: 31 * 32, todayDay: first };
+  const layout: Layout = {
+    first,
+    last: first + 30,
+    dayWidth: 32,
+    rowHeight: 40,
+    inset: 3,
+    timelineWidth: 31 * 32,
+    todayDay: first,
+  };
   const rows = (tasks: Task[]) => buildRows(tasks, source());
   it("draws one arrow per known dependency and skips unknown or undated ones", () => {
     const tasks: Task[] = [
@@ -124,7 +182,11 @@ describe("buildArrows", () => {
       { id: "a", start: "2026-10-05", end: "2026-10-05" },
       { id: "b", start: "2026-10-12", end: "2026-10-12", after: ["a"] },
     ];
-    const [arrow] = buildArrows(rows(tasks), layout, (t) => tasks.find((x) => x.id === t.id)?.after);
+    const [arrow] = buildArrows(
+      rows(tasks),
+      layout,
+      (t) => tasks.find((x) => x.id === t.id)?.after,
+    );
     expect(arrow.d.match(/Q/g)).toHaveLength(2);
   });
   it("routes round the row gap when the bars touch", () => {
@@ -132,30 +194,58 @@ describe("buildArrows", () => {
       { id: "a", start: "2026-10-05", end: "2026-10-08" },
       { id: "b", start: "2026-10-06", end: "2026-10-09", after: ["a"] },
     ];
-    const [arrow] = buildArrows(rows(tasks), layout, (t) => tasks.find((x) => x.id === t.id)?.after);
+    const [arrow] = buildArrows(
+      rows(tasks),
+      layout,
+      (t) => tasks.find((x) => x.id === t.id)?.after,
+    );
     expect(arrow.d.match(/Q/g)).toHaveLength(4);
   });
 });
 
 describe("roundedPath", () => {
   it("rounds each corner by up to the radius and ends on the last point", () => {
-    expect(roundedPath([[0, 0], [20, 0], [20, 20]], 6)).toBe("M0,0 L14,0 Q20,0 20,6 L20,20");
+    expect(
+      roundedPath(
+        [
+          [0, 0],
+          [20, 0],
+          [20, 20],
+        ],
+        6,
+      ),
+    ).toBe("M0,0 L14,0 Q20,0 20,6 L20,20");
   });
 });
 
 describe("timeline helpers", () => {
   it("groups days under their month", () => {
     const first = dayNumber("2026-10-30");
-    const months = buildMonths(buildDays(first, 4), new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric", timeZone: "UTC" }));
+    const months = buildMonths(
+      buildDays(first, 4),
+      new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric", timeZone: "UTC" }),
+    );
     expect(months).toEqual([
       { key: "2026-10", label: "October 2026", i: 0, length: 2 },
       { key: "2026-11", label: "November 2026", i: 2, length: 2 },
     ]);
   });
   it("never draws a bar under 8px, and labels the span", () => {
-    const layout: Layout = { first: 0, last: 9, dayWidth: 4, rowHeight: 40, inset: 0, timelineWidth: 40, todayDay: 0 };
+    const layout: Layout = {
+      first: 0,
+      last: 9,
+      dayWidth: 4,
+      rowHeight: 40,
+      inset: 0,
+      timelineWidth: 40,
+      todayDay: 0,
+    };
     expect(barWidth({ start: 1, end: 1 }, layout)).toBe(8);
-    const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
+    const format = new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      timeZone: "UTC",
+    });
     const start = dayNumber("2026-10-05");
     expect(rangeLabel({ start, end: start }, format)).toBe("Oct 5 to Oct 5, 1 day");
     expect(rangeLabel({ start, end: start + 2 }, format)).toBe("Oct 5 to Oct 7, 3 days");