@heyramzi/ui 2.0.1 → 2.2.0

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

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

package/src/tasks/gantt/logic.ts

@@ -68,7 +68,8 @@ export function spanOf<T>(item: T, { getStart, getEnd }: Dates<T>): Span | null
 export function liveSpan(span: Span | null, drag: Drag | null, id: string): Span | null {
   if (!span || drag?.id !== id || drag.dx === 0) return span;
   if (drag.mode === "move") return { start: span.start + drag.dx, end: span.end + drag.dx };
-  if (drag.mode === "start") return { start: Math.min(span.start + drag.dx, span.end), end: span.end };
+  if (drag.mode === "start")
+    return { start: Math.min(span.start + drag.dx, span.end), end: span.end };
   return { start: span.start, end: Math.max(span.end + drag.dx, span.start) };
 }
 
@@ -103,7 +104,13 @@ export function buildDays(first: number, count: number) {
   return Array.from({ length: count }, (_, i) => {
     const day = first + i;
     const wd = weekday(day);
-    return { day, i, date: Number(isoFromDay(day).slice(8, 10)), wd, weekend: wd === 0 || wd === 6 };
+    return {
+      day,
+      i,
+      date: Number(isoFromDay(day).slice(8, 10)),
+      wd,
+      weekend: wd === 0 || wd === 6,
+    };
   });
 }
 export type GanttDay = ReturnType<typeof buildDays>[number];
@@ -133,7 +140,17 @@ export function buildRows<T>(items: T[], source: RowSource<T>): Row<T>[] {
       for (const item of members) {
         const id = getId(item);
         const own = live(item, id);
-        out.push({ kind: "task", item, id, order: order++, depth: 0, hasChildren: false, open: true, own, span: own });
+        out.push({
+          kind: "task",
+          item,
+          id,
+          order: order++,
+          depth: 0,
+          hasChildren: false,
+          open: true,
+          own,
+          span: own,
+        });
       }
       return;
     }
@@ -149,7 +166,17 @@ export function buildRows<T>(items: T[], source: RowSource<T>): Row<T>[] {
       const children = kids.get(id) ?? [];
       const open = !folded.has(id);
       const own = live(item, id);
-      const row: TaskRow<T> = { kind: "task", item, id, order: 0, depth, hasChildren: children.length > 0, open, own, span: own };
+      const row: TaskRow<T> = {
+        kind: "task",
+        item,
+        id,
+        order: 0,
+        depth,
+        hasChildren: children.length > 0,
+        open,
+        own,
+        span: own,
+      };
       if (visible) {
         row.order = order++;
         out.push(row);
@@ -195,7 +222,11 @@ export function roundedPath(points: [number, number][], radius: number): string
 }
 
 /** Each arrow runs from the end of the task waited on to the start of the one waiting. */
-export function buildArrows<T>(rows: Row<T>[], layout: Layout, getDependsOn: (item: T) => string[] | undefined): Arrow[] {
+export function buildArrows<T>(
+  rows: Row<T>[],
+  layout: Layout,
+  getDependsOn: (item: T) => string[] | undefined,
+): Arrow[] {
   const { rowHeight, inset } = layout;
   const at = new Map<string, { row: number; span: Span }>();
   rows.forEach((row, index) => {
@@ -216,7 +247,12 @@ export function buildArrows<T>(rows: Row<T>[], layout: Layout, getDependsOn: (it
       // Room between the bars: one bend in the gap. No room: out, round the row gap, and back in.
       const points: [number, number][] =
         x2 - x1 >= 24
-          ? [[x1, y1], [x1 + 12, y1], [x1 + 12, y2], [x2, y2]]
+          ? [
+              [x1, y1],
+              [x1 + 12, y1],
+              [x1 + 12, y2],
+              [x2, y2],
+            ]
           : [
               [x1, y1],
               [x1 + 10, y1],

package/src/tasks/inbox/inbox-card.svelte

@@ -5,8 +5,8 @@
 	import { Button } from "../../shadcn/button/index.js";
 	import { Textarea } from "../../shadcn/textarea/index.js";
 	import { cn } from "../../lib/utils.js";
-	import StatusBadge from "../status-badge.svelte";
-	import StatusDot from "../status-dot.svelte";
+	import StatusBadge from "../../status/status-badge.svelte";
+	import StatusDot from "../../status/status-dot.svelte";
 	import { TONE_TEXT } from "../../lib/tone.js";
 	import InboxDraftEditor from "./inbox-draft.svelte";
 	import { canUndo, isOpen, startDraft } from "./inbox-logic.js";
@@ -29,7 +29,7 @@
 		onverdict: (verdict: InboxVerdict) => void;
 		/** Replaces the summary lines, for a host that renders its own proposal. */
 		renderProposal?: Snippet<[InboxItem]>;
-	};
+	}
 
 	let { item, selected = false, onselect, onverdict, renderProposal }: Props = $props();
 
@@ -158,7 +158,9 @@
 	class={cn(
 		"flex flex-col gap-3 rounded-xl p-3 outline-none transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick,120ms)] ease-[var(--ease-smooth-out,ease-out)]",
 		"focus-visible:ring-ring/50 focus-visible:ring-3",
-		open ? "border-border bg-card border shadow-[var(--elev-card,none)]" : "bg-muted/30 border border-transparent",
+		open
+			? "border-border bg-card border shadow-[var(--elev-card,none)]"
+			: "bg-muted/30 border border-transparent",
 		selected && open && "border-ring",
 	)}
 >
@@ -228,7 +230,9 @@
 		<div class="flex flex-col gap-1.5 pl-6">
 			<PixelLoader label="Agent is re-running with your note" />
 			{#if item.steer}
-				<p class="text-muted-foreground border-border border-l-2 pl-3 text-sm">&ldquo;{item.steer}&rdquo;</p>
+				<p class="text-muted-foreground border-border border-l-2 pl-3 text-sm">
+					&ldquo;{item.steer}&rdquo;
+				</p>
 			{/if}
 		</div>
 	{/if}
@@ -259,14 +263,18 @@
 			<div class="flex flex-wrap items-center gap-2">
 				<Button size="sm" onclick={submitSteer} disabled={!note.trim()}>Send to agent</Button>
 				<Button size="sm" variant="ghost" onclick={() => (steering = false)}>Cancel</Button>
-				<span class="text-muted-foreground text-xs max-sm:hidden">The agent retries with your note.</span>
+				<span class="text-muted-foreground text-xs max-sm:hidden"
+					>The agent retries with your note.</span
+				>
 			</div>
 		</div>
 	{:else if open}
 		<div class="flex flex-wrap items-center gap-2 pl-6">
 			<Button size="sm" onclick={approve} aria-keyshortcuts="a">{sendLabel}</Button>
 			{#if !drafts.some((d) => d.outcome === "decline")}
-				<Button size="sm" variant="destructive" onclick={decline} aria-keyshortcuts="d">Decline</Button>
+				<Button size="sm" variant="destructive" onclick={decline} aria-keyshortcuts="d"
+					>Decline</Button
+				>
 			{/if}
 			<Button size="sm" variant="outline" onclick={steer} aria-keyshortcuts="s">Steer</Button>
 			{#if drafts.length}

package/src/tasks/inbox/inbox-draft.svelte

@@ -19,7 +19,7 @@
 		bodyEl?: HTMLTextAreaElement | null;
 		disabled?: boolean;
 		class?: string;
-	};
+	}
 
 	let {
 		drafts,

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

@@ -1,55 +1,21 @@
-import type {
-	InboxDraft,
-	InboxItem,
-	InboxKindFilter,
-	InboxLane,
-	InboxProject,
-} from "./inbox-types.js";
-
-/** Which lane an item sits in. The agent's own work and the person's decisions never share one. */
-export function laneOf(item: InboxItem): InboxLane {
-	if (item.tier === "auto") return "auto";
-	return item.state === "proposed" || item.state === "working" ? "needs" : "decided";
-}
-
-export function inLane(items: InboxItem[], lane: InboxLane, kind: InboxKindFilter): InboxItem[] {
-	return items.filter((item) => laneOf(item) === lane && (kind === "all" || item.kind === kind));
-}
-
-export type InboxGroup = { project: InboxProject; items: InboxItem[] };
-
-/** Group by project in order of first appearance, so the oldest waiting item keeps its place. */
-export function groupByProject(items: InboxItem[]): InboxGroup[] {
-	const groups = new Map<string, InboxGroup>();
-	for (const item of items) {
-		const group = groups.get(item.project.id);
-		if (group) group.items.push(item);
-		else groups.set(item.project.id, { project: item.project, items: [item] });
-	}
-	return [...groups.values()];
-}
-
-/** Items in the order the screen shows them, so j and k walk what the eye sees. */
-export function flatten(groups: InboxGroup[]): InboxItem[] {
-	return groups.flatMap((group) => group.items);
-}
+import type { InboxDraft, InboxItem } from "./inbox-types.js";
 
 /** The draft to open on: the agent's pick, else the first. */
 export function startDraft(drafts: InboxDraft[], recommended?: string): InboxDraft | undefined {
-	return drafts.find((draft) => draft.templateId === recommended) ?? drafts[0];
+  return drafts.find((draft) => draft.templateId === recommended) ?? drafts[0];
 }
 
 /** A person can act on an item only while it waits for them. */
 export function isOpen(item: InboxItem): boolean {
-	return item.tier === "ask" && item.state === "proposed";
+  return item.tier === "ask" && item.state === "proposed";
 }
 
 export function canUndo(item: InboxItem): boolean {
-	return item.tier === "auto" && item.state === "done";
+  return item.tier === "auto" && item.state === "done";
 }
 
 /** True when a key press belongs to a text field and so isn't a shortcut. */
 export function isTyping(target: EventTarget | null): boolean {
-	if (!(target instanceof HTMLElement)) return false;
-	return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
 }

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

@@ -1,48 +1,48 @@
-import { defineStatuses } from "../define-statuses.js";
+import { defineStatuses } from "../../status/define-statuses.js";
 import { ClipboardText, EnvelopeSimple, Hash, Phone } from "phosphor-svelte";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 import type { InboxSourceType } from "./inbox-types.js";
 
 /** The lifecycle of an item. The dot and the badge both read this one map. */
 export const inboxStates = defineStatuses({
-	proposed: { label: "Needs you", tone: "warning", variant: "open" },
-	working: { label: "Agent working", tone: "accent", variant: "progress", progress: 0.6 },
-	approved: { label: "Approved", tone: "success", variant: "completed" },
-	declined: { label: "Declined", tone: "neutral", variant: "lost" },
-	done: { label: "Done by agent", tone: "success", variant: "completed" },
-	undone: { label: "Undone", tone: "neutral", variant: "lost" },
+  proposed: { label: "Needs you", tone: "warning", variant: "open" },
+  working: { label: "Agent working", tone: "accent", variant: "progress", progress: 0.6 },
+  approved: { label: "Approved", tone: "success", variant: "completed" },
+  declined: { label: "Declined", tone: "neutral", variant: "lost" },
+  done: { label: "Done by agent", tone: "success", variant: "completed" },
+  undone: { label: "Undone", tone: "neutral", variant: "lost" },
 });
 
 /** What the agent made of the touchpoint. */
 export const inboxKinds = defineStatuses({
-	information: { label: "Information", tone: "info", variant: "filled" },
-	action: { label: "Action", tone: "accent", variant: "filled" },
-	decision: { label: "Decision", tone: "warning", variant: "filled" },
+  information: { label: "Information", tone: "info", variant: "filled" },
+  action: { label: "Action", tone: "accent", variant: "filled" },
+  decision: { label: "Decision", tone: "warning", variant: "filled" },
 });
 
 /** How sure the agent is, bucketed. The dot's fill carries the exact score. */
 export const inboxConfidence = defineStatuses({
-	high: { label: "Confident", tone: "success", variant: "progress" },
-	medium: { label: "Unsure", tone: "warning", variant: "progress" },
-	low: { label: "Guessing", tone: "destructive", variant: "progress" },
+  high: { label: "Confident", tone: "success", variant: "progress" },
+  medium: { label: "Unsure", tone: "warning", variant: "progress" },
+  low: { label: "Guessing", tone: "destructive", variant: "progress" },
 });
 
 export function confidenceLevel(score: number): "high" | "medium" | "low" {
-	if (score >= 0.8) return "high";
-	if (score >= 0.5) return "medium";
-	return "low";
+  if (score >= 0.8) return "high";
+  if (score >= 0.5) return "medium";
+  return "low";
 }
 
 export const SOURCE_ICON: Record<InboxSourceType, PhosphorIcon> = {
-	call: Phone,
-	email: EnvelopeSimple,
-	slack: Hash,
-	form: ClipboardText,
+  call: Phone,
+  email: EnvelopeSimple,
+  slack: Hash,
+  form: ClipboardText,
 };
 
 export const SOURCE_LABEL: Record<InboxSourceType, string> = {
-	call: "Call",
-	email: "Email",
-	slack: "Slack",
-	form: "Form",
+  call: "Call",
+  email: "Email",
+  slack: "Slack",
+  form: "Form",
 };

package/src/tasks/inbox/inbox-trace.svelte

@@ -3,7 +3,9 @@
 	import { SOURCE_ICON, SOURCE_LABEL } from "./inbox-statuses.js";
 	import type { InboxTrace } from "./inbox-types.js";
 
-	interface Props { trace: InboxTrace };
+	interface Props {
+		trace: InboxTrace;
+	}
 
 	let { trace }: Props = $props();
 
@@ -26,7 +28,9 @@
 			<p class="text-foreground">
 				{trace.source.label}
 				{#if trace.source.href}
-					<a href={trace.source.href} class="text-foreground ml-1 underline underline-offset-2">Open source</a>
+					<a href={trace.source.href} class="text-foreground ml-1 underline underline-offset-2"
+						>Open source</a
+					>
 				{/if}
 			</p>
 			<ul class="flex flex-col gap-2">
@@ -34,7 +38,9 @@
 					<li>
 						<blockquote class="text-foreground">&ldquo;{evidence.quote}&rdquo;</blockquote>
 						{#if evidence.by || evidence.at}
-							<span class="text-xs tabular-nums">{[evidence.by, evidence.at].filter(Boolean).join(", ")}</span>
+							<span class="text-xs tabular-nums"
+								>{[evidence.by, evidence.at].filter(Boolean).join(", ")}</span
+							>
 						{/if}
 					</li>
 				{/each}