@heyramzi/ui 2.23.0 → 3.0.0

package/src/work/gantt/gantt.test.ts

@@ -47,7 +47,9 @@ describe("TaskGantt", () => {
 
   it("moves a bar a day on an arrow key, and grows it on shift plus arrow", async () => {
     const changes: GanttChange[] = [];
-    const root = render({ onChange: (_id: string, change: GanttChange) => changes.push(change) });
+    const root = render({
+      onDatesChange: (_id: string, change: GanttChange) => changes.push(change),
+    });
     const bar = root.querySelector("[data-bar]");
     bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
     bar?.dispatchEvent(
@@ -60,7 +62,17 @@ describe("TaskGantt", () => {
     ]);
   });
 
-  it("selects on Enter and stays read-only without onChange", async () => {
+  it("announces a bar's new dates after an arrow key and keeps focus on it", async () => {
+    const root = render({ onDatesChange: () => {} });
+    const bar = root.querySelector<HTMLElement>('[data-bar="a"]');
+    bar?.focus();
+    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    for (let i = 0; i < 4; i++) await tick();
+    expect(root.querySelector('[role="status"]')?.textContent).toBe("Now Oct 6 to Oct 10, 5 days");
+    expect(document.activeElement).toBe(root.querySelector('[data-bar="a"]'));
+  });
+
+  it("selects on Enter and stays read-only without onDatesChange", async () => {
     const picked: string[] = [];
     const root = render({ onSelect: (id: string) => picked.push(id) });
     const bar = root.querySelector("[data-bar]");

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

@@ -29,14 +29,15 @@
 	import { TagChip } from "../../components/chip/index.js";
 	import { workLooks } from "../../components/work-parts/looks.js";
 	import { FolderSimple } from "phosphor-svelte";
+	import { Copied } from "../../components/copy/copied.svelte.js";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
 
 	interface Props {
 		item: InboxItem;
 		/** The keyboard cursor is on this card. */
 		selected?: boolean;
-		onselect?: () => void;
-		onverdict: (verdict: InboxVerdict) => void;
+		onSelect?: () => void;
+		onVerdict: (verdict: InboxVerdict) => void;
 		/** Replaces the summary lines, for a host that renders its own proposal. */
 		renderProposal?: Snippet<[InboxItem]>;
 		/** How the source time reads. Defaults to a relative time, never a raw ISO string. */
@@ -49,8 +50,8 @@
 	let {
 		item,
 		selected = false,
-		onselect,
-		onverdict,
+		onSelect,
+		onVerdict,
 		renderProposal,
 		when = whenOf,
 	}: Props = $props();
@@ -78,7 +79,7 @@
 	let steering = $state(false);
 	let note = $state("");
 	let noteEl = $state<HTMLTextAreaElement | null>(null);
-	let copied = $state(false);
+	const copied = new Copied();
 
 	// WHY the selection is derived from the pick: a revised proposal brings new
 	// drafts, and the old pick may not exist in them. The agent's choice wins then.
@@ -107,7 +108,7 @@
 		if (!open) return;
 		// Sending the decline template closes the item as declined, whichever button sent it.
 		const type = selectedDraft?.outcome === "decline" ? "decline" : "approve";
-		onverdict({ type, id: item.id, draft: current() });
+		onVerdict({ type, id: item.id, draft: current() });
 	}
 
 	export function decline() {
@@ -119,7 +120,7 @@
 			edit();
 			return;
 		}
-		onverdict({ type: "decline", id: item.id });
+		onVerdict({ type: "decline", id: item.id });
 	}
 
 	export function steer() {
@@ -134,13 +135,13 @@
 	}
 
 	export function undo() {
-		if (canUndo(item)) onverdict({ type: "undo", id: item.id });
+		if (canUndo(item)) onVerdict({ type: "undo", id: item.id });
 	}
 
 	function submitSteer() {
 		const text = note.trim();
 		if (!text) return;
-		onverdict({ type: "steer", id: item.id, note: text });
+		onVerdict({ type: "steer", id: item.id, note: text });
 		steering = false;
 		note = "";
 	}
@@ -158,13 +159,7 @@
 	async function copy() {
 		const draft = current();
 		if (!draft) return;
-		try {
-			await navigator.clipboard.writeText(`${draft.subject}\n\n${draft.body}`);
-			copied = true;
-			setTimeout(() => (copied = false), 1600);
-		} catch {
-			copied = false;
-		}
+		if (!(await copied.copy(`${draft.subject}\n\n${draft.body}`, "", 1600))) copied.reset();
 	}
 
 	let sendLabel = $derived(
@@ -176,19 +171,16 @@
 	);
 </script>
 
-<!-- WHY a card only while it waits: a decided or automatic item is a line in a log, so it
-     drops to the grey ground and the queue stays scannable. The card step draws its own
-     hairline, so a border on top of it would show a 2px edge. -->
-<!-- WHY a focusable article: j and k move focus card to card, and a screen reader
-     reads the card as one labelled unit. -->
+<!-- Only a waiting item is a card; the card step draws its own hairline, so a border here
+     doubles it. Focusable so j and k move card to card. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <article
 	data-inbox-item={item.id}
 	data-selected={selected || undefined}
 	aria-label={item.title}
 	tabindex={selected ? 0 : -1}
-	onfocusin={onselect}
-	onpointerdown={onselect}
+	onfocusin={onSelect}
+	onpointerdown={onSelect}
 	class={cn(
 		"flex flex-col gap-3 p-3 outline-none transition-[background-color,box-shadow] duration-quick ease-smooth-out motion-reduce:transition-none",
 		"focus-visible:shadow-(--ring-focus)",
@@ -332,7 +324,7 @@
 				selected={selectedDraft.templateId}
 				bind:edits
 				bind:bodyEl
-				onpick={(id) => (pickedDraft = id)}
+				onPick={(id) => (pickedDraft = id)}
 			/>
 		</div>
 	{/if}
@@ -364,7 +356,7 @@
 			<Button size="sm" variant="ghost" onclick={steer} aria-keyshortcuts="s">Steer</Button>
 			{#if drafts.length}
 				<Button size="sm" variant="ghost" onclick={copy} class="ml-auto" aria-live="polite">
-					{copied ? "Copied" : "Copy"}
+					{copied.is() ? "Copied" : "Copy"}
 				</Button>
 			{/if}
 		</div>

package/src/work/inbox/inbox-card.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Snippet } from "svelte";
+import type { InboxItem, InboxVerdict } from "./inbox-types.js";
+interface Props {
+    item: InboxItem;
+    /** The keyboard cursor is on this card. */
+    selected?: boolean;
+    onSelect?: () => void;
+    onVerdict: (verdict: InboxVerdict) => void;
+    /** Replaces the summary lines, for a host that renders its own proposal. */
+    renderProposal?: Snippet<[InboxItem]>;
+    /** How the source time reads. Defaults to a relative time, never a raw ISO string. */
+    when?: (at: string) => string;
+}
+declare const $$Component: import("svelte").Component<Props, {
+    approve: () => void;
+    decline: () => void;
+    steer: () => void;
+    edit: () => void;
+    undo: () => void;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -14,7 +14,7 @@
 		/** What the person typed, by template. A template with no entry shows the agent's text. */
 		edits: InboxDraftEdits;
 		/** The person picked another template. */
-		onpick: (templateId: string) => void;
+		onPick: (templateId: string) => void;
 		/** The body field, so a shortcut can focus it. */
 		bodyEl?: HTMLTextAreaElement | null;
 		disabled?: boolean;
@@ -25,7 +25,7 @@
 		drafts,
 		recommended,
 		selected,
-		onpick,
+		onPick,
 		edits = $bindable(),
 		bodyEl = $bindable(null),
 		disabled = false,
@@ -48,7 +48,7 @@
 			variant="outline"
 			size="sm"
 			value={selected}
-			onValueChange={(next) => next && onpick(next)}
+			onValueChange={(next) => next && onPick(next)}
 			aria-label="Reply template"
 			class="flex-wrap"
 		>

package/src/work/inbox/inbox-draft.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { InboxDraft, InboxDraftEdits } from "./inbox-types.js";
+interface Props {
+    drafts: InboxDraft[];
+    /** The template the agent picked. Marked in the picker. */
+    recommended?: string;
+    selected: string;
+    /** What the person typed, by template. A template with no entry shows the agent's text. */
+    edits: InboxDraftEdits;
+    /** The person picked another template. */
+    onPick: (templateId: string) => void;
+    /** The body field, so a shortcut can focus it. */
+    bodyEl?: HTMLTextAreaElement | null;
+    disabled?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "edits" | "bodyEl">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -1,3 +1,4 @@
+import { relativeTime, shortDate } from "../../lib/dates.js";
 import type { InboxDraft, InboxItem } from "./inbox-types.js";
 
 /** The draft to open on: the agent's pick, else the first. */
@@ -64,12 +65,6 @@ export function freshReasoning(item: InboxItem, facts: CardFacts): string {
 }
 
 const ISO = /^\d{4}-\d{2}-\d{2}T/;
-const UNITS: [number, Intl.RelativeTimeFormatUnit][] = [
-  [604_800, "week"],
-  [86_400, "day"],
-  [3_600, "hour"],
-  [60, "minute"],
-];
 
 /**
  * A time as a person says it: "3 hr. ago", "Oct 12". A host-formatted string stays as written,
@@ -79,16 +74,9 @@ export function whenOf(at: string, now: number = Date.now(), locale = "en-GB"):
   if (!ISO.test(at)) return at;
   const time = Date.parse(at);
   if (Number.isNaN(time)) return "";
-  const seconds = Math.round((time - now) / 1000);
-  const age = Math.abs(seconds);
-  if (age >= 4 * 604_800) {
-    return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(time);
-  }
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
-  for (const [size, unit] of UNITS) {
-    if (age >= size) return rtf.format(Math.round(seconds / size), unit);
-  }
-  return rtf.format(0, "second");
+  const age = Math.abs(Math.round((time - now) / 1000));
+  if (age >= 4 * 604_800) return shortDate(time, { locale });
+  return relativeTime(time, now, { locale, style: "short" });
 }
 
 /** True when a key press belongs to a text field and so isn't a shortcut. */

package/src/work/inbox/inbox-trace.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { InboxTrace } from "./inbox-types.js";
+interface Props {
+    trace: InboxTrace;
+    /** The reasoning no other line of the card says. Empty when the card already shows it. */
+    reasoning?: string;
+    /** The name the card's meta line shows, so the source label doesn't repeat it. */
+    agent?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/index.ts

@@ -23,11 +23,9 @@ export type {
   TaskListRowContext,
 } from "./task-types.js";
 export { default as TaskDetail } from "./detail/task-detail.svelte";
-export { default as TaskThread } from "./detail/task-thread.svelte";
-export { default as TaskProperty } from "./detail/task-property.svelte";
 export { default as TaskChip } from "./detail/task-chip.svelte";
 export { DEFAULT_TASK_DETAIL_LABELS } from "./detail/detail-types.js";
-export type { TaskComment, TaskDetailLabels } from "./detail/detail-types.js";
+export type { TaskDetailLabels } from "./detail/detail-types.js";
 export { default as TimeTracker } from "./time/time-tracker.svelte";
 export { default as TimeChip } from "./time/time-chip.svelte";
 export { default as TimeRing } from "./time/time-ring.svelte";
@@ -41,30 +39,6 @@ export {
   parseMinutes,
   personColor,
 } from "./time/duration.js";
-export {
-  confidenceLevel,
-  inboxConfidence,
-  inboxKinds,
-  inboxStates,
-} from "./inbox/index.js";
-export type {
-  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,

package/src/work/kanban-board.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" generics="T, C extends KanbanColumnDef = KanbanColumnDef">
 	import type { Snippet } from "svelte";
 	import { slide } from "svelte/transition";
+	import LiveRegion from "../lib/live-region.svelte";
+	import { focusAfterRender } from "../lib/focus.js";
 	import KanbanColumn from "./kanban-column.svelte";
 	import KanbanColumnHead from "./kanban-column-head.svelte";
 	import KanbanFoldChevron from "./kanban-fold-chevron.svelte";
@@ -51,8 +53,10 @@
 		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. */
 		onSelect?: (id: string) => void;
-		/** The screen-reader name of a card. Defaults to a hint about the keyboard move. */
+		/** The screen-reader name of a card. Defaults to the card's own text. */
 		getLabel?: (item: T) => string;
+		/** Read after a card's name, as its description. */
+		moveHint?: string;
 		emptyLabel?: string;
 		/** Shows a plus in each default column head that adds a card to that column. */
 		onAdd?: (columnId: string) => void;
@@ -93,6 +97,8 @@
 		 * preventDefault, so it is not a drop target.
 		 */
 		isDroppable?: (columnId: string) => boolean;
+		/** What a screen reader hears after a card moves with the keyboard. */
+		movedLabel?: (column: C) => string;
 		class?: string;
 	}
 
@@ -111,6 +117,7 @@
 		columnFooter,
 		wrapColumn,
 		getLabel,
+		moveHint = "Press Alt plus Left or Right arrow to move between columns.",
 		onSelect,
 		emptyLabel = "Nothing here yet",
 		onAdd,
@@ -129,6 +136,7 @@
 		hiddenItem,
 		dropAtTop,
 		isDroppable,
+		movedLabel = (column) => `Moved to ${column.label}`,
 		class: className,
 	}: Props<T, C> = $props();
 
@@ -155,6 +163,19 @@
 	const rail = board.rail;
 
 	type ColumnView = KanbanColumnView<T, C>;
+
+	const uid = $props.id();
+	const hintId = `${uid}-hint`;
+	let boardEl: HTMLDivElement | undefined = $state();
+	let live: LiveRegion | undefined = $state();
+
+	async function onCardKeyDown(e: KeyboardEvent, id: string) {
+		const moved = board.onCardKeyDown(e, id);
+		if (!moved) return;
+		await moved.done;
+		void live?.announce(movedLabel(moved.column));
+		await focusAfterRender(boardEl, `[data-kanban-card="${CSS.escape(id)}"]`);
+	}
 </script>
 
 <!-- The slot keeps the drag state where it is, or hovering it would bubble to the column and jump it to the end. -->
@@ -173,6 +194,7 @@
 
 {#snippet card(column: C, item: T, index: number, list: T[])}
 	{@const id = getId(item)}
+	{@const cardId = `${uid}-card-${encodeURIComponent(id)}`}
 	{@const nextId = board.idAt(list, index + 1)}
 	{@const isSource = dnd.isDragSource(id)}
 	<!-- The slot right after the held card is its own spot, so the card's place shows it instead. -->
@@ -186,8 +208,11 @@
 	<div
 		role="listitem"
 		tabindex="0"
-		aria-label={getLabel?.(item) ??
-			"Card. Press Alt plus Left or Right arrow to move between columns."}
+		id={cardId}
+		data-kanban-card={id}
+		aria-label={getLabel?.(item)}
+		aria-labelledby={getLabel ? undefined : cardId}
+		aria-describedby={hintId}
 		aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
 		draggable="true"
 		ondragstart={(e) => {
@@ -200,7 +225,7 @@
 			rail.dragOverHidden = null;
 		}}
 		ondragover={(e) => dnd.onItemDragOver(e, column.id, id, nextId)}
-		onkeydown={(e) => board.onCardKeyDown(e, id)}
+		onkeydown={(e) => void onCardKeyDown(e, id)}
 		class={cn(
 			"kanban-card cursor-grab outline-none focus-visible:shadow-(--ring-focus) active:cursor-grabbing",
 			workLooks.card,
@@ -244,14 +269,19 @@
 			/>
 		{/snippet}
 
-		{#each head as item, index (getId(item))}
-			{@render card(column, item, index, list)}
-		{/each}
+		<!-- contents: the list owns the cards for screen readers and leaves the column's flex gap alone. -->
+		{#if head.length > 0}
+			<div role="list" class="contents">
+				{#each head as item, index (getId(item))}
+					{@render card(column, item, index, list)}
+				{/each}
+			</div>
+		{/if}
 
 		{#if showTail}
 			<!-- The tail sits shut in a 0fr row, so opening and closing animate its height. -->
 			<div class="kanban-fold" data-open={open} inert={!open}>
-				<div class="kanban-fold-inner">
+				<div class="kanban-fold-inner" role="list">
 					{#each tail as item, index (getId(item))}
 						{@render card(column, item, head.length + index, list)}
 					{/each}
@@ -289,6 +319,7 @@
 {/snippet}
 
 <div
+	bind:this={boardEl}
 	class={cn(
 		"kanban-board @container/kanban-board flex min-h-0 flex-1 items-stretch gap-4 overflow-x-auto pb-2",
 		"max-sm:-mx-4 max-sm:snap-x max-sm:snap-proximity max-sm:scroll-px-4 max-sm:px-4",
@@ -319,75 +350,81 @@
 			{hiddenItem}
 		/>
 	{/if}
+
+	<LiveRegion bind:this={live} />
+	<p id={hintId} hidden>{moveHint}</p>
 </div>
 
 <style>
-	/* A grid row folds the card out of the column smoothly, so the cards below slide up. */
-	.kanban-card {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		grid-template-rows: 1fr;
-		transition:
-			grid-template-rows var(--duration-quick) var(--ease-smooth-out),
-			margin-top var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.kanban-card > :global(*) {
-		min-height: 0;
-	}
+	@layer components {
+		/* A grid row folds the card out of the column smoothly, so the cards below slide up. */
+		.kanban-card {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: 1fr;
+			transition:
+				grid-template-rows var(--duration-quick) var(--ease-smooth-out),
+				margin-top var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* -0.375rem cancels the column's gap-1.5, so a folded card leaves no gap behind. */
-	.kanban-lifted-out {
-		grid-template-rows: 0fr;
-		margin-top: -0.375rem;
-	}
+		.kanban-card > :global(*) {
+			min-height: 0;
+		}
 
-	.kanban-lifted-out > :global(*) {
-		overflow: hidden;
-		visibility: hidden;
-	}
+		/* -0.375rem cancels the column's gap-1.5, so a folded card leaves no gap behind. */
+		.kanban-lifted-out {
+			grid-template-rows: 0fr;
+			margin-top: -0.375rem;
+		}
 
-	/* The fold: height rides grid-template-rows 0fr to 1fr, the fade runs shorter so it leads.
-	   Shut, -0.375rem cancels the well's gap-1.5, so a closed fold leaves no gap behind. */
-	.kanban-fold {
-		display: grid;
-		grid-template-rows: 0fr;
-		margin-top: -0.375rem;
-		opacity: 0;
-		transition:
-			grid-template-rows var(--duration-fast) var(--ease-smooth-out),
-			margin-top var(--duration-fast) var(--ease-smooth-out),
-			opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		.kanban-lifted-out > :global(*) {
+			overflow: hidden;
+			visibility: hidden;
+		}
 
-	.kanban-fold[data-open="true"] {
-		grid-template-rows: 1fr;
-		margin-top: 0;
-		opacity: 1;
-	}
+		/* The fold: height rides grid-template-rows 0fr to 1fr and the shorter fade leads.
+		   Shut, -0.375rem cancels the well's gap-1.5, so a closed fold leaves no gap. */
+		.kanban-fold {
+			display: grid;
+			grid-template-rows: 0fr;
+			margin-top: -0.375rem;
+			opacity: 0;
+			transition:
+				grid-template-rows var(--duration-fast) var(--ease-smooth-out),
+				margin-top var(--duration-fast) var(--ease-smooth-out),
+				opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* clip, not hidden: the margin lets a lifted card's shadow out while the fold stays shut.
-	   relative: a card's sr-only labels are absolute, and clip only cuts what this box contains.
-	   Without it they hang below a shut fold and the page scrolls past its last lane (TSK-1617). */
-	.kanban-fold-inner {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		min-height: 0;
-		overflow: clip;
-		overflow-clip-margin: 0.375rem;
-	}
+		.kanban-fold[data-open="true"] {
+			grid-template-rows: 1fr;
+			margin-top: 0;
+			opacity: 1;
+		}
 
-	/* The held card's place keeps its hole, never its content. */
-	.kanban-origin-slot > :global(*) {
-		visibility: hidden;
-	}
+		/* clip, not hidden, lets a lifted card's shadow out. relative keeps cards' absolute
+		   sr-only labels clipped, or they hang below a shut fold and scroll the page (TSK-1617). */
+		.kanban-fold-inner {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			gap: 0.375rem;
+			min-height: 0;
+			overflow: clip;
+			overflow-clip-margin: 0.375rem;
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		.kanban-card,
-		.kanban-fold {
-			transition: none;
+		/* The held card's place keeps its hole, never its content. */
+		.kanban-origin-slot > :global(*) {
+			visibility: hidden;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.kanban-card,
+			.kanban-fold {
+				transition: none;
+			}
 		}
 	}
 </style>