@heyramzi/ui 2.0.1 → 2.2.0

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

@@ -15,94 +15,90 @@ export type InboxOutcome = "approve" | "decline" | "clarify";
 
 /** An editable email, filled in from a template by the agent. */
 export type InboxDraft = {
-	/** The template it came from. Comes back in the verdict so the host knows which one was sent. */
-	templateId: string;
-	/** The button's word: "Pre-qualify", "Decline", "Clarify". */
-	label: string;
-	subject: string;
-	body: string;
-	outcome?: InboxOutcome;
+  /** The template it came from. Comes back in the verdict so the host knows which one was sent. */
+  templateId: string;
+  /** The button's word: "Pre-qualify", "Decline", "Clarify". */
+  label: string;
+  subject: string;
+  body: string;
+  outcome?: InboxOutcome;
 };
 
 /** What the agent wants to do, in one line, with the drafts it prepared. */
 export type InboxProposal = {
-	summary: string;
-	detail?: string;
-	drafts?: InboxDraft[];
-	/** The draft to open on. Defaults to the first. */
-	recommended?: string;
+  summary: string;
+  detail?: string;
+  drafts?: InboxDraft[];
+  /** The draft to open on. Defaults to the first. */
+  recommended?: string;
 };
 
 /** A short quote the agent read. */
 export type InboxEvidence = {
-	quote: string;
-	/** Who said it, or where it sat: "Priya", "line 14". */
-	by?: string;
-	/** A position in the source, such as "12:41" in a call. */
-	at?: string;
+  quote: string;
+  /** Who said it, or where it sat: "Priya", "line 14". */
+  by?: string;
+  /** A position in the source, such as "12:41" in a call. */
+  at?: string;
 };
 
 /** Where an item came from and what the agent made of it. Every verdict is traceable to this. */
 export type InboxTrace = {
-	source: {
-		type: InboxSourceType;
-		label: string;
-		/** Display time, formatted by the host so server and browser agree. */
-		at: string;
-		href?: string;
-	};
-	evidence: InboxEvidence[];
-	reasoning: string;
+  source: {
+    type: InboxSourceType;
+    label: string;
+    /** Display time, formatted by the host so server and browser agree. */
+    at: string;
+    href?: string;
+  };
+  evidence: InboxEvidence[];
+  reasoning: string;
 };
 
 export type InboxConfidence = {
-	/** 0 to 1. */
-	score: number;
-	/** What the agent couldn't tell. Shown when the agent is unsure. */
-	missing?: string;
+  /** 0 to 1. */
+  score: number;
+  /** What the agent couldn't tell. Shown when the agent is unsure. */
+  missing?: string;
 };
 
 export type InboxProject = {
-	id: string;
-	name: string;
-	client?: string;
-	/** The project timeline. Decided items link here. */
-	href?: string;
+  id: string;
+  name: string;
+  client?: string;
+  /** The project timeline. Decided items link here. */
+  href?: string;
 };
 
 export type InboxAgent = {
-	name: string;
-	shape?: AgentShape;
-	color?: string;
+  name: string;
+  shape?: AgentShape;
+  color?: string;
 };
 
 export type InboxItem = {
-	id: string;
-	kind: InboxKind;
-	tier: InboxTier;
-	state: InboxState;
-	title: string;
-	project: InboxProject;
-	proposal: InboxProposal;
-	confidence: InboxConfidence;
-	trace: InboxTrace;
-	agent?: InboxAgent;
-	/** The last steer note, shown while the agent re-runs. */
-	steer?: string;
+  id: string;
+  kind: InboxKind;
+  tier: InboxTier;
+  state: InboxState;
+  title: string;
+  project: InboxProject;
+  proposal: InboxProposal;
+  confidence: InboxConfidence;
+  trace: InboxTrace;
+  agent?: InboxAgent;
+  /** The last steer note, shown while the agent re-runs. */
+  steer?: string;
 };
 
 /** The draft as the person left it, after editing. */
 export type InboxDraftEdit = Pick<InboxDraft, "templateId" | "subject" | "body">;
 
 export type InboxVerdict =
-	| { type: "approve"; id: string; draft?: InboxDraftEdit }
-	| { type: "decline"; id: string; draft?: InboxDraftEdit }
-	| { type: "steer"; id: string; note: string }
-	| { type: "undo"; id: string };
-
-export type InboxLane = "needs" | "auto" | "decided";
-
-export type InboxKindFilter = "all" | InboxKind;
+  | { type: "approve"; id: string; draft?: InboxDraftEdit }
+  | { type: "decline"; id: string; draft?: InboxDraftEdit }
+  | { type: "steer"; id: string; note: string }
+  | { type: "undo"; id: string };
 
 /** What the person typed into the drafts, by template id. */
 export type InboxDraftEdits = Record<string, { subject: string; body: string }>;

package/src/tasks/inbox/index.ts

@@ -1,23 +1,24 @@
-export { default as Inbox } from "./inbox.svelte";
-export { confidenceLevel, inboxConfidence, inboxKinds, inboxStates } from "./inbox-statuses.js";
-export { flatten, groupByProject, inLane, laneOf } from "./inbox-logic.js";
+export {
+  confidenceLevel,
+  inboxConfidence,
+  inboxKinds,
+  inboxStates,
+} from "./inbox-statuses.js";
 export type {
-	InboxAgent,
-	InboxConfidence,
-	InboxDraft,
-	InboxDraftEdit,
-	InboxDraftEdits,
-	InboxEvidence,
-	InboxItem,
-	InboxKind,
-	InboxKindFilter,
-	InboxLane,
-	InboxOutcome,
-	InboxProject,
-	InboxProposal,
-	InboxSourceType,
-	InboxState,
-	InboxTier,
-	InboxTrace,
-	InboxVerdict,
+  InboxAgent,
+  InboxConfidence,
+  InboxDraft,
+  InboxDraftEdit,
+  InboxDraftEdits,
+  InboxEvidence,
+  InboxItem,
+  InboxKind,
+  InboxOutcome,
+  InboxProject,
+  InboxProposal,
+  InboxSourceType,
+  InboxState,
+  InboxTier,
+  InboxTrace,
+  InboxVerdict,
 } from "./inbox-types.js";

package/src/tasks/index.ts

@@ -6,34 +6,31 @@ export { boardOrderAt, keyBetween } from "./board-order.js";
 export { reorderByIds } from "./reorder.js";
 export type { KanbanDndConfig, KanbanDragOver } from "./use-kanban-dnd.svelte.js";
 export type {
-	KanbanCardContext,
-	KanbanCardSnippet,
-	KanbanColumn as KanbanColumnDef,
-	KanbanColumnContext,
-	KanbanMove,
-	KanbanSortKey,
+  KanbanCardContext,
+  KanbanCardSnippet,
+  KanbanColumn as KanbanColumnDef,
+  KanbanColumnContext,
+  KanbanMove,
+  KanbanSortKey,
 } from "./kanban-types.js";
-export { default as StatusBadge } from "./status-badge.svelte";
-export { default as StatusDot } from "./status-dot.svelte";
-export { default as StatusIcon } from "./status-icon.svelte";
-export { defineStatuses } from "./define-statuses.js";
+export { StatusBadge, StatusDot, StatusIcon, defineStatuses } from "../status/index.js";
 export type {
-	StatusDef,
-	StatusDotVariant,
-	StatusId,
-	StatusMap,
-	Statuses,
-} from "./status-types.js";
-export { default as SidePanel } from "./side-panel.svelte";
-export type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
+  StatusDef,
+  StatusDotVariant,
+  StatusId,
+  StatusMap,
+  Statuses,
+} from "../status/index.js";
+export { SidePanel } from "../panel/index.js";
+export type { PanelStat, SidePanelWidth } from "../panel/index.js";
 export { default as TaskList } from "./task-list.svelte";
 export { default as TaskGantt } from "./task-gantt.svelte";
 export { addDays, dayNumber, isoFromDay, todayIso } from "./dates.js";
 export type {
-	GanttChange,
-	GanttLabelContext,
-	TaskListGroupContext,
-	TaskListRowContext,
+  GanttChange,
+  GanttLabelContext,
+  TaskListGroupContext,
+  TaskListRowContext,
 } from "./task-types.js";
 export { default as TaskDetail } from "./detail/task-detail.svelte";
 export { default as TaskThread } from "./detail/task-thread.svelte";
@@ -46,40 +43,42 @@ export { default as TimeChip } from "./time/time-chip.svelte";
 export { default as TimeRing } from "./time/time-ring.svelte";
 export { default as TimeDot } from "./time/time-dot.svelte";
 export {
-	budgetTone,
-	dayLabel,
-	formatClock,
-	formatMinutes,
-	localDay,
-	parseMinutes,
-	personColor,
+  budgetTone,
+  dayLabel,
+  formatClock,
+  formatMinutes,
+  localDay,
+  parseMinutes,
+  personColor,
 } from "./time/duration.js";
 export {
-	Inbox,
-	confidenceLevel,
-	inboxConfidence,
-	inboxKinds,
-	inboxStates,
+  confidenceLevel,
+  inboxConfidence,
+  inboxKinds,
+  inboxStates,
 } from "./inbox/index.js";
 export type {
-	InboxAgent,
-	InboxConfidence,
-	InboxDraft,
-	InboxDraftEdit,
-	InboxDraftEdits,
-	InboxEvidence,
-	InboxItem,
-	InboxKind,
-	InboxKindFilter,
-	InboxLane,
-	InboxOutcome,
-	InboxProject,
-	InboxProposal,
-	InboxSourceType,
-	InboxState,
-	InboxTier,
-	InboxTrace,
-	InboxVerdict,
+  InboxAgent,
+  InboxConfidence,
+  InboxDraft,
+  InboxDraftEdit,
+  InboxDraftEdits,
+  InboxEvidence,
+  InboxItem,
+  InboxKind,
+  InboxOutcome,
+  InboxProject,
+  InboxProposal,
+  InboxSourceType,
+  InboxState,
+  InboxTier,
+  InboxTrace,
+  InboxVerdict,
 } from "./inbox/index.js";
 export { DEFAULT_TIME_LABELS } from "./time/time-types.js";
-export type { TimeLabels, TimeLogInput, TimeRunning, TimeStopInfo } from "./time/time-types.js";
+export type {
+  TimeLabels,
+  TimeLogInput,
+  TimeRunning,
+  TimeStopInfo,
+} from "./time/time-types.js";

package/src/tasks/kanban-board.svelte

@@ -42,8 +42,8 @@
 		/** Rendered under a column's cards, e.g. a "Show all 12" or an add button. */
 		columnFooter?: Snippet<[C, KanbanColumnContext]>;
 		/**
-		 * Wraps a whole column, for a context menu or a tooltip around it. Render `column` once and
-		 * spread the `props` it hands you, so the wrapper's trigger lands on the column.
+		 * Wraps a column for a context menu or tooltip: render `column` once and spread the
+		 * `props` it hands you, so the trigger lands on the column.
 		 */
 		wrapColumn?: Snippet<[C, Snippet<[Record<string, unknown>]>]>;
 		/** Enter or Space on a focused card. Leave out when the card holds its own links and buttons. */
@@ -52,8 +52,8 @@
 		getLabel?: (item: T) => string;
 		emptyLabel?: string;
 		/**
-		 * Cards a column shows before the rest fold behind a footer. Return undefined for no cap.
-		 * A capped column's empty space drops on top, since the tail is out of sight.
+		 * Cards a column shows before the rest fold behind a footer, or undefined for no cap; a
+		 * capped column drops on top, since its tail is out of sight.
 		 */
 		limit?: (columnId: string) => number | undefined;
 		/** Column ids whose `limit` is lifted. Controlled; leave out to let the board remember. */
@@ -158,7 +158,7 @@
 	}
 
 	function canDrop(columnId: string): boolean {
-		return isDroppable?.(columnId) ?? (columns.find((c) => c.id === columnId)?.droppable ?? true);
+		return isDroppable?.(columnId) ?? columns.find((c) => c.id === columnId)?.droppable ?? true;
 	}
 
 	function expand(columnId: string): void {
@@ -216,9 +216,8 @@
 	});
 
 	/**
-	 * Keyboard move: Alt + ArrowLeft/Right drops the focused card in the
-	 * adjacent droppable column. Native drag stays the primary path; this
-	 * covers keyboard and touch-reader users with the same onMove contract.
+	 * Alt + ArrowLeft/Right moves the focused card to the next droppable column, so
+	 * keyboard and screen-reader users get drag's onMove contract.
 	 */
 	function onCardKeyDown(e: KeyboardEvent, id: string): void {
 		if (onSelect && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
@@ -373,7 +372,8 @@
 			<div
 				role="listitem"
 				tabindex="0"
-				aria-label={getLabel?.(item) ?? "Card. Press Alt plus Left or Right arrow to move between columns."}
+				aria-label={getLabel?.(item) ??
+					"Card. Press Alt plus Left or Right arrow to move between columns."}
 				aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
 				draggable="true"
 				ondragstart={(e) => {
@@ -465,8 +465,10 @@
 								"kanban-rail-item rounded-md transition-[background-color,outline-color] duration-[var(--duration-quick,120ms)] ease-[var(--ease-smooth-out,ease-out)]",
 								leaving.has(column.id) && "kanban-rail-item-leaving",
 							)}
-							style:background="color-mix(in oklch, {hue} {over ? 10 : 0}%, transparent)"
-							style:outline="1px solid color-mix(in oklch, {hue} {over ? 28 : 0}%, transparent)"
+							style:background="color-mix(in oklch, {hue}
+							{over ? 10 : 0}%, transparent)"
+							style:outline="1px solid color-mix(in oklch, {hue}
+							{over ? 28 : 0}%, transparent)"
 							ondragover={(e) => onHiddenDragOver(e, column.id)}
 							ondragleave={onHiddenDragLeave}
 							ondrop={(e) => onHiddenDrop(e, column.id)}
@@ -481,7 +483,9 @@
 								{:else}
 									<span class="truncate whitespace-nowrap">{column.label}</span>
 									{#if count > 0}
-										<span class="ms-auto text-xs text-muted-foreground/60 tabular-nums">{count}</span>
+										<span class="ms-auto text-xs text-muted-foreground/60 tabular-nums"
+											>{count}</span
+										>
 									{/if}
 								{/if}
 							</button>

package/src/tasks/kanban-types.ts

@@ -24,9 +24,8 @@ export type KanbanMove = {
    */
   boardOrder?: string;
   /**
-   * The cards that sit above and below the drop slot once the dragged card is
-   * set aside. Set on manual drops only, null at an end. For a backend that
-   * orders by neighbour instead of by key.
+   * The drop slot's neighbours, for a backend that orders by neighbour, not by
+   * key. Set on manual drops only, null at an end.
    */
   beforeId?: string | null;
   afterId?: string | null;

package/src/tasks/presets/sales.ts

@@ -1,16 +1,16 @@
-import { defineStatuses } from "../define-statuses.js";
+import { defineStatuses } from "../../status/define-statuses.js";
 
 /**
  * An example status map for a sales pipeline. Names are neutral on purpose:
  * swap the keys and labels for your own domain.
  */
 export const salesStatuses = defineStatuses({
-	new: { label: "New", tone: "accent", variant: "open" },
-	contacted: { label: "Contacted", tone: "info", variant: "open" },
-	proposal: { label: "Proposal", tone: "accent", variant: "progress", progress: 0.25 },
-	negotiation: { label: "Negotiation", tone: "warning", variant: "progress", progress: 0.75 },
-	won: { label: "Won", tone: "success", variant: "completed" },
-	lost: { label: "Lost", tone: "destructive", variant: "lost" },
+  new: { label: "New", tone: "accent", variant: "open" },
+  contacted: { label: "Contacted", tone: "info", variant: "open" },
+  proposal: { label: "Proposal", tone: "accent", variant: "progress", progress: 0.25 },
+  negotiation: { label: "Negotiation", tone: "warning", variant: "progress", progress: 0.75 },
+  won: { label: "Won", tone: "success", variant: "completed" },
+  lost: { label: "Lost", tone: "destructive", variant: "lost" },
 });
 
 export type SalesStatus = (typeof salesStatuses.ids)[number];

package/src/tasks/task-gantt.svelte

@@ -33,8 +33,8 @@
 		/** ISO date, inclusive. See `getStart`. */
 		getEnd: (item: T) => string | null | undefined;
 		/**
-		 * The id of the task this one sits under. Children nest under their parent, indented
-		 * and foldable. A parent with no dates of its own draws the span of what is below it.
+		 * The parent task's id; a parent with no dates of its own draws the span of the
+		 * children nested under it.
 		 */
 		getParent?: (item: T) => string | null | undefined;
 		/** Draws a flag at the end date instead of a bar. Milestones are not draggable. */
@@ -133,10 +133,16 @@
 	});
 
 	let days = $derived(buildDays(range.first, dayCount));
-	let monthFormat = $derived(new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }));
-	let dayFormat = $derived(new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }));
+	let monthFormat = $derived(
+		new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }),
+	);
+	let dayFormat = $derived(
+		new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }),
+	);
 	let months = $derived(buildMonths(days, monthFormat));
-	let rows = $derived(buildRows(items, { getId, getStart, getEnd, getParent, groups, getGroup, folded, drag }));
+	let rows = $derived(
+		buildRows(items, { getId, getStart, getEnd, getParent, groups, getGroup, folded, drag }),
+	);
 	let arrows = $derived(getDependsOn ? buildArrows(rows, layout, getDependsOn) : []);
 	let groupHue = $derived(new Map((groups ?? []).map((g) => [g.id, g.hue])));
 
@@ -148,7 +154,11 @@
 	}
 
 	function hueOf(item: T): string {
-		return getHue?.(item) ?? (getGroup ? groupHue.get(getGroup(item)) : undefined) ?? "var(--color-primary)";
+		return (
+			getHue?.(item) ??
+			(getGroup ? groupHue.get(getGroup(item)) : undefined) ??
+			"var(--color-primary)"
+		);
 	}
 
 	function hover(id: string, on: boolean): void {
@@ -172,7 +182,10 @@
 	export function scrollToToday(): void {
 		if (!scroller) return;
 		const label = corner?.offsetWidth ?? 0;
-		scroller.scrollTo({ left: Math.max(0, dayX(layout, todayDay) - (scroller.clientWidth - label) / 3), behavior: "smooth" });
+		scroller.scrollTo({
+			left: Math.max(0, dayX(layout, todayDay) - (scroller.clientWidth - label) / 3),
+			behavior: "smooth",
+		});
 	}
 </script>
 
@@ -192,7 +205,14 @@
 		<GanttHeader {layout} {days} {months} {labelHeading} {locale} bind:corner />
 
 		<div class="relative">
-			<GanttGrid {layout} {days} {arrows} rowCount={rows.length} {hoveredId} draggingId={drag?.id ?? null} />
+			<GanttGrid
+				{layout}
+				{days}
+				{arrows}
+				rowCount={rows.length}
+				{hoveredId}
+				draggingId={drag?.id ?? null}
+			/>
 
 			<div role="list" aria-label="Timeline">
 				{#each rows as row, index (row.kind === "group" ? `g:${row.group.id}` : row.id)}

package/src/tasks/task-list.svelte

@@ -7,7 +7,11 @@
 	import { cn } from "../lib/utils.js";
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
 	import { CaretRight } from "phosphor-svelte";
-	import type { KanbanColumn as KanbanColumnDef, KanbanMove, KanbanSortKey } from "./kanban-types.js";
+	import type {
+		KanbanColumn as KanbanColumnDef,
+		KanbanMove,
+		KanbanSortKey,
+	} from "./kanban-types.js";
 	import type { TaskListGroupContext, TaskListRowContext } from "./task-types.js";
 
 	interface Props<T, C extends KanbanColumnDef> {
@@ -18,8 +22,8 @@
 		/** 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.
+		 * Nests a group under another by its id, e.g. a project under its client, so it folds with
+		 * its parent. 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. */
@@ -36,8 +40,8 @@
 		/** 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.
+		 * Rows drag and take Alt plus Up or Down. Turn it off for a list that only groups, where
+		 * rows hold their own links and buttons.
 		 */
 		draggable?: boolean;
 		/** The screen-reader name of a row. Defaults to a hint about the keyboard move. */
@@ -115,7 +119,7 @@
 		groups.filter((g) => {
 			const parent = getParent?.(g);
 			return !parent || !groupIds.has(parent);
-		})
+		}),
 	);
 	let childrenOf = $derived.by(() => {
 		const map = new Map<string, C[]>();
@@ -137,7 +141,7 @@
 	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);
+		return isDroppable?.(groupId) ?? groups.find((g) => g.id === groupId)?.droppable ?? true;
 	}
 
 	function idAt(list: T[], index: number): string | null {
@@ -194,7 +198,6 @@
 			return;
 		}
 	}
-
 </script>
 
 {#snippet section(group: C, depth: number)}
@@ -207,7 +210,10 @@
 	{@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={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)}
@@ -215,7 +221,11 @@
 		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"))}
+			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}
 		>
@@ -227,7 +237,11 @@
 					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">
+					<span
+						class="tl-chevron size-3.5 [&>svg]:size-full"
+						class:tl-chevron-open={open}
+						aria-hidden="true"
+					>
 						<CaretRight weight="bold" />
 					</span>
 				</button>
@@ -267,7 +281,9 @@
 							role="listitem"
 							tabindex={draggable ? 0 : undefined}
 							aria-label={getLabel?.(item) ??
-								(draggable ? "Row. Press Alt plus Up or Down arrow to move between groups." : undefined)}
+								(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 }}
@@ -303,7 +319,9 @@
 					{/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">
+						<p
+							class="mx-1.5 rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground"
+						>
 							{emptyLabel}
 						</p>
 					{/if}
@@ -326,7 +344,10 @@
 >
 	{#if head}
 		<div
-			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")}
+			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>
@@ -357,7 +378,8 @@
 	}
 
 	.tl-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));
 	}
 
 	.tl-chevron-open {
@@ -370,7 +392,8 @@
 		grid-template-rows: 0fr;
 		opacity: 0;
 		transition:
-			grid-template-rows var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			grid-template-rows var(--duration-fast, 250ms)
+				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
 			opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
 	}
 
@@ -385,7 +408,8 @@
 	}
 
 	.tl-row {
-		animation: tl-row-in var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+		animation: tl-row-in var(--duration-slow, 400ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger, 40ms));
 		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
 	}