@heyramzi/ui 2.0.1 → 2.2.0

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

@@ -2,7 +2,11 @@
 	import type { Snippet } from "svelte";
 	import { Circle, CheckCircle, PencilSimple } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.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";
 	import TaskThread from "./task-thread.svelte";
 
 	interface Props {
@@ -119,7 +123,10 @@
 						onclick={onToggleDone}
 						disabled={!onToggleDone}
 						aria-label={done ? labels.markIncomplete : labels.markComplete}
-						class={cn("tk-icon mt-px", done ? "text-success" : "text-muted-foreground/60 hover:text-foreground")}
+						class={cn(
+							"tk-icon mt-px",
+							done ? "text-success" : "text-muted-foreground/60 hover:text-foreground",
+						)}
 					>
 						{#if done}
 							<CheckCircle class="size-5" weight="fill" aria-hidden="true" />
@@ -139,7 +146,9 @@
 							class="-mx-2 -my-1 min-w-0 flex-1 resize-none rounded-md border border-input bg-transparent px-2 py-1 text-2xl leading-tight font-semibold tracking-tight outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
 						></textarea>
 					{:else}
-						<h1 class="min-w-0 flex-1 text-2xl leading-tight font-semibold tracking-tight text-balance break-words">
+						<h1
+							class="min-w-0 flex-1 text-2xl leading-tight font-semibold tracking-tight text-balance break-words"
+						>
 							<button
 								type="button"
 								onclick={startTitle}
@@ -153,14 +162,19 @@
 							>
 								{title}
 								{#if onTitleChange}
-									<PencilSimple class="ms-1.5 inline size-3.5 align-middle text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true" />
+									<PencilSimple
+										class="ms-1.5 inline size-3.5 align-middle text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+										aria-hidden="true"
+									/>
 								{/if}
 							</button>
 						</h1>
 					{/if}
 				</div>
 				{#if meta}
-					<div class="mt-2 flex min-h-5 flex-wrap items-center gap-x-3 gap-y-1 ps-9 text-xs text-muted-foreground">
+					<div
+						class="mt-2 flex min-h-5 flex-wrap items-center gap-x-3 gap-y-1 ps-9 text-xs text-muted-foreground"
+					>
 						{@render meta()}
 					</div>
 				{/if}
@@ -171,10 +185,14 @@
 			class="px-4 pt-3 @3xl:col-start-2 @3xl:row-span-2 @3xl:row-start-1 @3xl:border-s @3xl:border-border @3xl:px-5 @3xl:pt-6"
 			aria-label={labels.properties}
 		>
-			<div class="flex flex-wrap items-center gap-1 @3xl:sticky @3xl:top-0 @3xl:flex-col @3xl:items-stretch @3xl:gap-0.5">
+			<div
+				class="flex flex-wrap items-center gap-1 @3xl:sticky @3xl:top-0 @3xl:flex-col @3xl:items-stretch @3xl:gap-0.5"
+			>
 				{@render properties?.()}
 				{#if railFooter}
-					<div class="mt-2 hidden w-full border-t border-border/60 pt-3 @3xl:block">{@render railFooter()}</div>
+					<div class="mt-2 hidden w-full border-t border-border/60 pt-3 @3xl:block">
+						{@render railFooter()}
+					</div>
 				{/if}
 			</div>
 		</aside>
@@ -185,7 +203,12 @@
 					<div class="flex h-7 items-center justify-between">
 						<h2 class="text-xs font-medium text-muted-foreground">{labels.description}</h2>
 						{#if !editingDescription && description && onDescriptionChange}
-							<button type="button" class="tk-icon" onclick={startDescription} aria-label={labels.editDescription}>
+							<button
+								type="button"
+								class="tk-icon"
+								onclick={startDescription}
+								aria-label={labels.editDescription}
+							>
 								<PencilSimple class="size-3.5" aria-hidden="true" />
 							</button>
 						{/if}
@@ -200,8 +223,15 @@
 							class="w-full resize-y rounded-md border border-input bg-transparent px-3 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-1 flex justify-end gap-1.5">
-							<button type="button" class="tk-button" onclick={() => (editingDescription = false)}>{labels.cancel}</button>
-							<button type="button" class="tk-button tk-primary" onclick={saveDescription} disabled={savingDescription}>
+							<button type="button" class="tk-button" onclick={() => (editingDescription = false)}
+								>{labels.cancel}</button
+							>
+							<button
+								type="button"
+								class="tk-button tk-primary"
+								onclick={saveDescription}
+								disabled={savingDescription}
+							>
 								{savingDescription ? labels.saving : labels.save}
 							</button>
 						</div>

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

@@ -16,7 +16,7 @@ let app: Record<string, unknown> | undefined;
 function render(extra: Record<string, unknown> = {}) {
   target = document.createElement("div");
   document.body.append(target);
-  app = mount(TaskGantt, {
+  app = mount(TaskGantt<Task>, {
     target,
     props: {
       items,
@@ -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" },