@heyramzi/ui 2.1.0 → 2.2.0

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

@@ -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

@@ -5,44 +5,44 @@ 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}

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,25 +6,20 @@ 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 {
-	StatusBadge,
-	StatusDot,
-	StatusIcon,
-	defineStatuses,
-} from "../status/index.js";
+export { StatusBadge, StatusDot, StatusIcon, defineStatuses } from "../status/index.js";
 export type {
-	StatusDef,
-	StatusDotVariant,
-	StatusId,
-	StatusMap,
-	Statuses,
+  StatusDef,
+  StatusDotVariant,
+  StatusId,
+  StatusMap,
+  Statuses,
 } from "../status/index.js";
 export { SidePanel } from "../panel/index.js";
 export type { PanelStat, SidePanelWidth } from "../panel/index.js";
@@ -32,10 +27,10 @@ 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";
@@ -48,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";