@heyramzi/ui 2.1.0 → 2.2.0

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

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

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

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

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

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

package/src/thread/index.ts

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

package/src/thread/logic.ts

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

package/src/thread/thread.svelte

@@ -42,7 +42,8 @@
 		avatar,
 		attachments,
 		anchorChip,
-		when = (comment) => new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+		when = (comment) =>
+			new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
 		onPost,
 		onEdit,
 		onDelete,
@@ -106,8 +107,16 @@
 	}
 </script>
 
-{#snippet composer(value: string, placeholder: string, onSend: () => Promise<void>, set: (next: string) => void, isReply: boolean)}
-	<div class="rounded-lg border border-input transition-shadow focus-within:ring-3 focus-within:ring-ring/50">
+{#snippet composer(
+	value: string,
+	placeholder: string,
+	onSend: () => Promise<void>,
+	set: (next: string) => void,
+	isReply: boolean,
+)}
+	<div
+		class="rounded-lg border border-input transition-shadow focus-within:ring-3 focus-within:ring-ring/50"
+	>
 		<!-- svelte-ignore a11y_autofocus -->
 		<textarea
 			{value}
@@ -120,7 +129,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={onSend} disabled={!value.trim() || sending}>
+			<button
+				type="button"
+				class="thread-button thread-primary"
+				onclick={onSend}
+				disabled={!value.trim() || sending}
+			>
 				{sending ? labels.sending : isReply ? labels.reply : labels.send}
 			</button>
 		</div>
@@ -137,7 +151,10 @@
 			{:else if comment.author.avatar}
 				<img src={comment.author.avatar} alt="" class="size-6 rounded-full object-cover" />
 			{: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.name)}
 				</span>
 			{/if}
@@ -147,7 +164,12 @@
 			<div class="flex min-h-6 flex-wrap items-center gap-x-2">
 				<span class="truncate text-[13px] font-medium">{comment.author.name}</span>
 				{#if comment.author.kind === "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.agent}
 					</span>
 				{/if}
@@ -163,11 +185,15 @@
 							<MapPin class="size-3" aria-hidden="true" />{labels.pinned}
 						</button>
 					{:else}
-						<span class="thread-chip"><MapPin class="size-3" aria-hidden="true" />{labels.pinned}</span>
+						<span class="thread-chip"
+							><MapPin class="size-3" aria-hidden="true" />{labels.pinned}</span
+						>
 					{/if}
 				{/if}
 				{#if editingId !== comment.id}
-					<span class="ms-auto flex gap-0.5 opacity-0 transition-opacity group-hover/row: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/row:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
+					>
 						{#if isRoot && onResolve}
 							<button
 								type="button"
@@ -181,12 +207,25 @@
 						{/if}
 						{#if canEdit(comment)}
 							{#if onEdit && !comment.content}
-								<button type="button" class="thread-icon" aria-label={labels.edit} onclick={() => { editingId = comment.id; editDraft = comment.body; }}>
+								<button
+									type="button"
+									class="thread-icon"
+									aria-label={labels.edit}
+									onclick={() => {
+										editingId = comment.id;
+										editDraft = comment.body;
+									}}
+								>
 									<PencilSimple class="size-3.5" aria-hidden="true" />
 								</button>
 							{/if}
 							{#if onDelete}
-								<button type="button" class="thread-icon" aria-label={labels.delete} onclick={() => onDelete?.(comment)}>
+								<button
+									type="button"
+									class="thread-icon"
+									aria-label={labels.delete}
+									onclick={() => onDelete?.(comment)}
+								>
 									<Trash class="size-3.5" aria-hidden="true" />
 								</button>
 							{/if}
@@ -203,8 +242,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 if comment.content}
 				<div class="text-sm leading-relaxed"><RichRenderer content={comment.content} /></div>
@@ -221,7 +266,12 @@
 	<div class="flex h-7 items-center justify-between">
 		<h2 class="text-xs font-medium text-muted-foreground">{labels.title}</h2>
 		{#if resolved > 0}
-			<button type="button" class="thread-button" aria-expanded={showResolved} onclick={() => (showResolved = !showResolved)}>
+			<button
+				type="button"
+				class="thread-button"
+				aria-expanded={showResolved}
+				onclick={() => (showResolved = !showResolved)}
+			>
 				{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
 			</button>
 		{/if}
@@ -242,7 +292,10 @@
 	{:else if shown.length > 0}
 		<ol class="flex flex-col gap-4">
 			{#each shown as node (node.comment.id)}
-				<li class={cn("flex flex-col gap-3", node.comment.resolved && "opacity-60")} data-resolved={node.comment.resolved || undefined}>
+				<li
+					class={cn("flex flex-col gap-3", node.comment.resolved && "opacity-60")}
+					data-resolved={node.comment.resolved || undefined}
+				>
 					{@render row(node.comment, true)}
 					{#if node.comment.resolved}
 						<span class="ms-9 text-xs text-muted-foreground">{labels.resolved}</span>
@@ -257,10 +310,23 @@
 					{#if onPost && !node.comment.resolved}
 						{#if replyTo === node.comment.id}
 							<div class="ms-9">
-								{@render composer(replyDraft, labels.replyPlaceholder, sendReply, (next) => (replyDraft = next), true)}
+								{@render composer(
+									replyDraft,
+									labels.replyPlaceholder,
+									sendReply,
+									(next) => (replyDraft = next),
+									true,
+								)}
 							</div>
 						{:else}
-							<button type="button" class="thread-button ms-9 flex w-fit items-center gap-1.5" onclick={() => { replyTo = node.comment.id; replyDraft = ""; }}>
+							<button
+								type="button"
+								class="thread-button ms-9 flex w-fit items-center gap-1.5"
+								onclick={() => {
+									replyTo = node.comment.id;
+									replyDraft = "";
+								}}
+							>
 								<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
 							</button>
 						{/if}