@heyramzi/ui 2.1.0 → 2.2.0

package/src/record/logic.ts

@@ -1,13 +1,13 @@
 // The record's pure logic: grouping, merging, picking. No DOM, no clock of its own.
 import type {
-	RecordEvent,
-	RecordFilterDef,
-	RecordNext,
-	RecordSummary,
-	StageDef,
-	StepDef,
-	StepGroupDef,
-	StepMarker,
+  RecordEvent,
+  RecordFilterDef,
+  RecordNext,
+  RecordSummary,
+  StageDef,
+  StepDef,
+  StepGroupDef,
+  StepMarker,
 } from "./types.js";
 
 // =========================
@@ -16,117 +16,117 @@ import type {
 
 /** The calendar day of a timestamp as `YYYY-MM-DD`, in the given zone or the viewer's own. */
 export function localDay(iso: string, timeZone?: string): string {
-	return new Intl.DateTimeFormat("en-CA", {
-		year: "numeric",
-		month: "2-digit",
-		day: "2-digit",
-		timeZone,
-	}).format(new Date(iso));
+  return new Intl.DateTimeFormat("en-CA", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone,
+  }).format(new Date(iso));
 }
 
 export type DayGroup = { day: string; events: RecordEvent[] };
 
 /** Newest day first, newest event first inside a day. */
 export function groupEventsByDay(events: readonly RecordEvent[], timeZone?: string): DayGroup[] {
-	const sorted = [...events].sort(
-		(a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
-	);
-	const groups: DayGroup[] = [];
-	for (const event of sorted) {
-		const day = localDay(event.occurredAt, timeZone);
-		const last = groups[groups.length - 1];
-		if (last && last.day === day) last.events.push(event);
-		else groups.push({ day, events: [event] });
-	}
-	return groups;
+  const sorted = [...events].sort(
+    (a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
+  );
+  const groups: DayGroup[] = [];
+  for (const event of sorted) {
+    const day = localDay(event.occurredAt, timeZone);
+    const last = groups[groups.length - 1];
+    if (last && last.day === day) last.events.push(event);
+    else groups.push({ day, events: [event] });
+  }
+  return groups;
 }
 
 /** `today`, `yesterday` or `date`, by calendar distance from `today`. */
 export function dayRelation(day: string, today: string): "today" | "yesterday" | "date" {
-	if (day === today) return "today";
-	const gap = (Date.parse(`${today}T00:00:00Z`) - Date.parse(`${day}T00:00:00Z`)) / 86_400_000;
-	return gap === 1 ? "yesterday" : "date";
+  if (day === today) return "today";
+  const gap = (Date.parse(`${today}T00:00:00Z`) - Date.parse(`${day}T00:00:00Z`)) / 86_400_000;
+  return gap === 1 ? "yesterday" : "date";
 }
 
 /** The events one filter chip shows. An unknown or empty key shows everything. */
 export function eventsForFilter(
-	events: readonly RecordEvent[],
-	filterKey: string,
-	filters: readonly RecordFilterDef[],
+  events: readonly RecordEvent[],
+  filterKey: string,
+  filters: readonly RecordFilterDef[],
 ): RecordEvent[] {
-	const filter = filters.find((f) => f.key === filterKey);
-	if (!filter) return [...events];
-	const kinds = new Set(filter.kinds);
-	return events.filter((e) => kinds.has(e.kind));
+  const filter = filters.find((f) => f.key === filterKey);
+  if (!filter) return [...events];
+  const kinds = new Set(filter.kinds);
+  return events.filter((e) => kinds.has(e.kind));
 }
 
 /** Per-chip counts. Chips with no events are the host's to hide. */
 export function filterCounts(
-	events: readonly RecordEvent[],
-	filters: readonly RecordFilterDef[],
+  events: readonly RecordEvent[],
+  filters: readonly RecordFilterDef[],
 ): Record<string, number> {
-	const counts: Record<string, number> = {};
-	for (const filter of filters) {
-		const kinds = new Set(filter.kinds);
-		counts[filter.key] = events.filter((e) => kinds.has(e.kind)).length;
-	}
-	return counts;
+  const counts: Record<string, number> = {};
+  for (const filter of filters) {
+    const kinds = new Set(filter.kinds);
+    counts[filter.key] = events.filter((e) => kinds.has(e.kind)).length;
+  }
+  return counts;
 }
 
 /** Keep the newest `limit` events and count the rest, cutting a day group where the limit falls. */
 export function foldGroups(
-	groups: readonly DayGroup[],
-	limit: number,
+  groups: readonly DayGroup[],
+  limit: number,
 ): { groups: DayGroup[]; hidden: number } {
-	const kept: DayGroup[] = [];
-	let used = 0;
-	let total = 0;
-	for (const group of groups) total += group.events.length;
-	for (const group of groups) {
-		if (used >= limit) break;
-		const room = limit - used;
-		const events = group.events.slice(0, room);
-		kept.push({ day: group.day, events });
-		used += events.length;
-	}
-	return { groups: kept, hidden: total - used };
+  const kept: DayGroup[] = [];
+  let used = 0;
+  let total = 0;
+  for (const group of groups) total += group.events.length;
+  for (const group of groups) {
+    if (used >= limit) break;
+    const room = limit - used;
+    const events = group.events.slice(0, room);
+    kept.push({ day: group.day, events });
+    used += events.length;
+  }
+  return { groups: kept, hidden: total - used };
 }
 
 export type ProjectEvents = {
-	id: string;
-	name: string;
-	href?: string | null;
-	events: readonly RecordEvent[];
+  id: string;
+  name: string;
+  href?: string | null;
+  events: readonly RecordEvent[];
 };
 
 /**
- * One client's timeline: its own events and every project's, each project event
- * tagged with where it came from. An id seen twice keeps the first, so a source
- * passed in both lists draws once. Newest first.
+ * One client's timeline, newest first, with project events tagged. An id seen twice keeps the
+ * first, so a source passed in both lists draws once.
  */
 export function mergeClientEvents(
-	clientEvents: readonly RecordEvent[],
-	projects: readonly ProjectEvents[],
+  clientEvents: readonly RecordEvent[],
+  projects: readonly ProjectEvents[],
 ): RecordEvent[] {
-	const seen = new Set<string>();
-	const merged: RecordEvent[] = [];
-	const add = (event: RecordEvent) => {
-		if (seen.has(event.id)) return;
-		seen.add(event.id);
-		merged.push(event);
-	};
-	for (const project of projects) {
-		for (const event of project.events) {
-			add({
-				...event,
-				projectId: project.id,
-				projectName: project.name,
-				projectHref: project.href ?? null,
-			});
-		}
-	}
-	for (const event of clientEvents) add({ ...event, projectId: null, projectName: null, projectHref: null });
-	return merged.sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
+  const seen = new Set<string>();
+  const merged: RecordEvent[] = [];
+  const add = (event: RecordEvent) => {
+    if (seen.has(event.id)) return;
+    seen.add(event.id);
+    merged.push(event);
+  };
+  for (const project of projects) {
+    for (const event of project.events) {
+      add({
+        ...event,
+        projectId: project.id,
+        projectName: project.name,
+        projectHref: project.href ?? null,
+      });
+    }
+  }
+  for (const event of clientEvents)
+    add({ ...event, projectId: null, projectName: null, projectHref: null });
+  return merged.sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
 }
 
 // =========================
@@ -137,93 +137,94 @@ const ACTIVE: ReadonlySet<string> = new Set(["open", "proposal", "ongoing"]);
 
 /** Projects still in play: not closed, and in a stage that isn't won-and-done or lost. */
 export function activeProjects(
-	projects: readonly RecordSummary[],
-	stages: readonly StageDef[],
+  projects: readonly RecordSummary[],
+  stages: readonly StageDef[],
 ): RecordSummary[] {
-	const category = new Map(stages.map((s) => [s.key, s.category]));
-	return projects.filter((p) => {
-		if (p.closed) return false;
-		const c = category.get(p.stageKey);
-		return c === undefined || ACTIVE.has(c);
-	});
+  const category = new Map(stages.map((s) => [s.key, s.category]));
+  return projects.filter((p) => {
+    if (p.closed) return false;
+    const c = category.get(p.stageKey);
+    return c === undefined || ACTIVE.has(c);
+  });
 }
 
 /** The earliest dated next across active projects, undated ones after, ties by list order. */
 export function nextAcrossProjects(
-	projects: readonly RecordSummary[],
-	stages: readonly StageDef[],
+  projects: readonly RecordSummary[],
+  stages: readonly StageDef[],
 ): RecordNext | null {
-	let best: RecordNext | null = null;
-	for (const project of activeProjects(projects, stages)) {
-		const next = project.next;
-		if (!next) continue;
-		const candidate: RecordNext = { ...next, projectId: project.id, projectName: project.name };
-		if (!best) {
-			best = candidate;
-			continue;
-		}
-		if (!best.date && candidate.date) best = candidate;
-		else if (best.date && candidate.date && candidate.date < best.date) best = candidate;
-	}
-	return best;
+  let best: RecordNext | null = null;
+  for (const project of activeProjects(projects, stages)) {
+    const next = project.next;
+    if (!next) continue;
+    const candidate: RecordNext = { ...next, projectId: project.id, projectName: project.name };
+    if (!best) {
+      best = candidate;
+      continue;
+    }
+    if (!best.date && candidate.date) best = candidate;
+    else if (best.date && candidate.date && candidate.date < best.date) best = candidate;
+  }
+  return best;
 }
 
 export type LatestStatus = NonNullable<RecordSummary["whereWeAre"]> & {
-	projectId: string;
-	projectName: string;
+  projectId: string;
+  projectName: string;
 };
 
 /** The newest "where we are" across projects, tagged with its project. */
 export function latestWhereWeAre(projects: readonly RecordSummary[]): LatestStatus | null {
-	let best: LatestStatus | null = null;
-	for (const project of projects) {
-		const status = project.whereWeAre;
-		if (!status || !status.text) continue;
-		const at = status.at ? new Date(status.at).getTime() : 0;
-		const bestAt = best?.at ? new Date(best.at).getTime() : -1;
-		if (!best || at > bestAt) best = { ...status, projectId: project.id, projectName: project.name };
-	}
-	return best;
+  let best: LatestStatus | null = null;
+  for (const project of projects) {
+    const status = project.whereWeAre;
+    if (!status || !status.text) continue;
+    const at = status.at ? new Date(status.at).getTime() : 0;
+    const bestAt = best?.at ? new Date(best.at).getTime() : -1;
+    if (!best || at > bestAt)
+      best = { ...status, projectId: project.id, projectName: project.name };
+  }
+  return best;
 }
 
 export type MoneyTotals = Record<string, { pipeline: number; won: number; paid: number }>;
 
 export type ClientRollup = {
-	count: number;
-	activeCount: number;
-	totals: MoneyTotals;
-	lastCallAt: string | null;
+  count: number;
+  activeCount: number;
+  totals: MoneyTotals;
+  lastCallAt: string | null;
 };
 
 /**
- * The client's strip. Pipeline is the value of projects in an open or proposal
- * stage, won the value in an ongoing or completed one, paid what came in. A lost
- * project adds to none. Totals stay per currency, because a sum across two is a lie.
+ * The client's pipeline, won and paid totals, kept per currency because a sum across two
+ * currencies is a lie.
  */
 export function rollupProjects(
-	projects: readonly RecordSummary[],
-	stages: readonly StageDef[],
-	fallbackCurrency = "EUR",
+  projects: readonly RecordSummary[],
+  stages: readonly StageDef[],
+  fallbackCurrency = "EUR",
 ): ClientRollup {
-	const category = new Map(stages.map((s) => [s.key, s.category]));
-	const totals: MoneyTotals = {};
-	let lastCallAt: string | null = null;
-	for (const project of projects) {
-		const currency = project.currency ?? fallbackCurrency;
-		const bucket = (totals[currency] ??= { pipeline: 0, won: 0, paid: 0 });
-		const c = category.get(project.stageKey);
-		const value = project.value ?? 0;
-		if (c === "open" || c === "proposal") bucket.pipeline += value;
-		if (c === "ongoing" || c === "completed") bucket.won += value;
-		bucket.paid += project.paid ?? 0;
-		if (project.lastCallAt && (!lastCallAt || project.lastCallAt > lastCallAt)) lastCallAt = project.lastCallAt;
-	}
-	return {
-		count: projects.length,
-		activeCount: activeProjects(projects, stages).length,
-		totals,
-		lastCallAt,
-	};
+  const category = new Map(stages.map((s) => [s.key, s.category]));
+  const totals: MoneyTotals = {};
+  let lastCallAt: string | null = null;
+  for (const project of projects) {
+    const currency = project.currency ?? fallbackCurrency;
+    const bucket = (totals[currency] ??= { pipeline: 0, won: 0, paid: 0 });
+    const c = category.get(project.stageKey);
+    const value = project.value ?? 0;
+    if (c === "open" || c === "proposal") bucket.pipeline += value;
+    if (c === "ongoing" || c === "completed") bucket.won += value;
+    bucket.paid += project.paid ?? 0;
+    if (project.lastCallAt && (!lastCallAt || project.lastCallAt > lastCallAt))
+      lastCallAt = project.lastCallAt;
+  }
+  return {
+    count: projects.length,
+    activeCount: activeProjects(projects, stages).length,
+    totals,
+    lastCallAt,
+  };
 }
 
 // =========================
@@ -232,93 +233,94 @@ export function rollupProjects(
 
 /** A step is visible unless hidden. */
 export function visibleSteps(steps: readonly StepDef[]): StepDef[] {
-	return steps.filter((s) => !s.hidden);
+  return steps.filter((s) => !s.hidden);
 }
 
 export function stepProgress(steps: readonly StepDef[]): { done: number; total: number } {
-	const visible = visibleSteps(steps);
-	return { done: visible.filter((s) => s.done).length, total: visible.length };
+  const visible = visibleSteps(steps);
+  return { done: visible.filter((s) => s.done).length, total: visible.length };
 }
 
 /**
- * One marker per visible step. The current step is the first one not done. Any
- * open step before it, or past its own date, is late. Nothing else is.
- * `today` is an ISO date.
+ * One marker per step. Only an open step before the current one, or past its own date, is
+ * late. `today` is an ISO date.
  */
 export function stepMarkers(steps: readonly StepDef[], today: string): Map<string, StepMarker> {
-	const visible = visibleSteps(steps);
-	const currentId = visible.find((s) => !s.done)?.id ?? null;
-	const markers = new Map<string, StepMarker>();
-	let beforeCurrent = currentId !== null;
-	for (const step of visible) {
-		if (step.done) {
-			markers.set(step.id, "complete");
-			continue;
-		}
-		if (step.id === currentId) {
-			markers.set(step.id, "current");
-			beforeCurrent = false;
-			continue;
-		}
-		const due = (step.end ?? step.start)?.slice(0, 10);
-		const overdue = due !== undefined && due < today;
-		markers.set(step.id, beforeCurrent || overdue ? "late" : "pending");
-	}
-	return markers;
+  const visible = visibleSteps(steps);
+  const currentId = visible.find((s) => !s.done)?.id ?? null;
+  const markers = new Map<string, StepMarker>();
+  let beforeCurrent = currentId !== null;
+  for (const step of visible) {
+    if (step.done) {
+      markers.set(step.id, "complete");
+      continue;
+    }
+    if (step.id === currentId) {
+      markers.set(step.id, "current");
+      beforeCurrent = false;
+      continue;
+    }
+    const due = (step.end ?? step.start)?.slice(0, 10);
+    const overdue = due !== undefined && due < today;
+    markers.set(step.id, beforeCurrent || overdue ? "late" : "pending");
+  }
+  return markers;
 }
 
 export type StepBucket = { key: string; label: string | null; steps: StepDef[] };
 
 /**
- * Buckets by group in the declared order, not by consecutive runs, so a reordered
- * rail still draws one header per group. Steps with no or an unknown group go last,
- * under no header.
+ * Buckets by declared group order, not consecutive runs, so a reordered rail still draws one
+ * header per group. Ungrouped steps go last.
  */
-export function groupSteps(steps: readonly StepDef[], groups: readonly StepGroupDef[] = []): StepBucket[] {
-	const known = new Set(groups.map((g) => g.key));
-	const buckets: StepBucket[] = groups.map((g) => ({ key: g.key, label: g.label, steps: [] }));
-	const loose: StepBucket = { key: "", label: null, steps: [] };
-	for (const step of steps) {
-		const bucket = buckets.find((b) => b.key === step.group);
-		(step.group && known.has(step.group) && bucket ? bucket : loose).steps.push(step);
-	}
-	const result = buckets.filter((b) => b.steps.length > 0);
-	if (loose.steps.length > 0) result.push(loose);
-	return result;
+export function groupSteps(
+  steps: readonly StepDef[],
+  groups: readonly StepGroupDef[] = [],
+): StepBucket[] {
+  const known = new Set(groups.map((g) => g.key));
+  const buckets: StepBucket[] = groups.map((g) => ({ key: g.key, label: g.label, steps: [] }));
+  const loose: StepBucket = { key: "", label: null, steps: [] };
+  for (const step of steps) {
+    const bucket = buckets.find((b) => b.key === step.group);
+    (step.group && known.has(step.group) && bucket ? bucket : loose).steps.push(step);
+  }
+  const result = buckets.filter((b) => b.steps.length > 0);
+  if (loose.steps.length > 0) result.push(loose);
+  return result;
 }
 
 /** Move `movedId` next to `targetId` inside the id list. Same list back when nothing moves. */
 export function reorderIds(
-	ids: readonly string[],
-	movedId: string,
-	targetId: string,
-	before: boolean,
+  ids: readonly string[],
+  movedId: string,
+  targetId: string,
+  before: boolean,
 ): string[] {
-	if (movedId === targetId) return [...ids];
-	const from = ids.indexOf(movedId);
-	if (from < 0 || !ids.includes(targetId)) return [...ids];
-	const next = [...ids];
-	next.splice(from, 1);
-	const at = next.indexOf(targetId);
-	next.splice(before ? at : at + 1, 0, movedId);
-	return next;
+  if (movedId === targetId) return [...ids];
+  const from = ids.indexOf(movedId);
+  if (from < 0 || !ids.includes(targetId)) return [...ids];
+  const next = [...ids];
+  next.splice(from, 1);
+  const at = next.indexOf(targetId);
+  next.splice(before ? at : at + 1, 0, movedId);
+  return next;
 }
 
 /** Swap a step with its neighbour in its own group. Same list back at an edge. */
 export function nudgeStep(steps: readonly StepDef[], id: string, direction: -1 | 1): string[] {
-	const ids = steps.map((s) => s.id);
-	const step = steps.find((s) => s.id === id);
-	if (!step) return ids;
-	const mates = steps.filter((s) => s.group === step.group && !s.hidden);
-	const at = mates.findIndex((s) => s.id === id);
-	const neighbour = mates[at + direction];
-	if (!neighbour) return ids;
-	const a = ids.indexOf(id);
-	const b = ids.indexOf(neighbour.id);
-	const first = ids[a];
-	const second = ids[b];
-	if (first === undefined || second === undefined) return ids;
-	ids[a] = second;
-	ids[b] = first;
-	return ids;
+  const ids = steps.map((s) => s.id);
+  const step = steps.find((s) => s.id === id);
+  if (!step) return ids;
+  const mates = steps.filter((s) => s.group === step.group && !s.hidden);
+  const at = mates.findIndex((s) => s.id === id);
+  const neighbour = mates[at + direction];
+  if (!neighbour) return ids;
+  const a = ids.indexOf(id);
+  const b = ids.indexOf(neighbour.id);
+  const first = ids[a];
+  const second = ids[b];
+  if (first === undefined || second === undefined) return ids;
+  ids[a] = second;
+  ids[b] = first;
+  return ids;
 }

package/src/record/next-up.svelte

@@ -1,38 +1,45 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { ArrowRight } from "phosphor-svelte";
-import { cn } from "../lib/utils.js";
-import { TONE_TEXT } from "../lib/tone.js";
-import StatusBadge from "../status/status-badge.svelte";
-import { gutterClass } from "./gutter.js";
-import { formatRange } from "./format.js";
-import { todayIso } from "../tasks/dates.js";
-import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ArrowRight } from "phosphor-svelte";
+	import { cn } from "../lib/utils.js";
+	import { TONE_TEXT } from "../lib/tone.js";
+	import StatusBadge from "../status/status-badge.svelte";
+	import { gutterClass } from "./gutter.js";
+	import { formatRange } from "./format.js";
+	import { todayIso } from "../tasks/dates.js";
+	import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
 
-// =========================
-// PROPS
-// =========================
-interface Props {
-	next?: RecordNext | null;
-	/** Client mode: say which project the next step belongs to. */
-	showProject?: boolean;
-	labels?: Partial<RecordLabels>;
-	locale?: string;
-	/** ISO date. Decides "late". Defaults to the viewer's today. */
-	today?: string;
-	class?: string;
-}
-let { next, showProject = false, labels, locale, today = todayIso(), class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		next?: RecordNext | null;
+		/** Client mode: say which project the next step belongs to. */
+		showProject?: boolean;
+		labels?: Partial<RecordLabels>;
+		locale?: string;
+		/** ISO date. Decides "late". Defaults to the viewer's today. */
+		today?: string;
+		class?: string;
+	}
+	let {
+		next,
+		showProject = false,
+		labels,
+		locale,
+		today = todayIso(),
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let t = $derived(resolveLabels(labels));
-let due = $derived((next?.endDate ?? next?.date)?.slice(0, 10));
-let late = $derived(due !== undefined && due < today);
-let when = $derived(next?.date ? formatRange(next.date, next.endDate, locale) : null);
+	// =========================
+	// DERIVED
+	// =========================
+	let t = $derived(resolveLabels(labels));
+	let due = $derived((next?.endDate ?? next?.date)?.slice(0, 10));
+	let late = $derived(due !== undefined && due < today);
+	let when = $derived(next?.date ? formatRange(next.date, next.endDate, locale) : null);
 </script>
 
 <!-- =========================== -->
@@ -50,10 +57,14 @@ let when = $derived(next?.date ? formatRange(next.date, next.endDate, locale) :
 		<ArrowRight class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
 		<span class="font-medium">{t.next}</span>
 		{#if when}
-			<span class={cn("tabular-nums", late ? TONE_TEXT.warning : "text-muted-foreground")}>{when}</span>
+			<span class={cn("tabular-nums", late ? TONE_TEXT.warning : "text-muted-foreground")}
+				>{when}</span
+			>
 		{/if}
 		{#if next.href}
-			<a href={next.href} class="min-w-0 truncate underline-offset-2 hover:underline">{next.label}</a>
+			<a href={next.href} class="min-w-0 truncate underline-offset-2 hover:underline"
+				>{next.label}</a
+			>
 		{:else}
 			<span class="min-w-0 truncate">{next.label}</span>
 		{/if}