@heyramzi/ui 2.8.0 → 2.9.0

package/src/record/info-list.svelte

@@ -166,7 +166,7 @@
 {#snippet display(row: InfoRow, clamp = false)}
 	{#if row.chips?.length}
 		<span class="flex flex-wrap items-center gap-1">
-			{#each row.chips as chip (chip.label)}
+			{#each row.chips as chip, i (i)}
 				<StatusBadge tone={chip.tone ?? "neutral"} capitalize={false}>{chip.label}</StatusBadge>
 			{/each}
 		</span>
@@ -175,6 +175,7 @@
 	{:else if row.href && row.value}
 		<a
 			href={row.href}
+			title={row.value}
 			class={cn(
 				"min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline",
 				clamp &&
@@ -262,7 +263,7 @@
 					<dt
 						class={cn(
 							"flex items-center gap-1.5 text-xs text-muted-foreground",
-							labelPosition === "beside" && "shrink-0",
+							labelPosition === "beside" ? "shrink-0" : "[overflow-wrap:anywhere]",
 						)}
 					>
 						{#if row.term}
@@ -301,7 +302,7 @@
 			<h2 class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h2>
 		{/if}
 		<dl
-			class="grid grid-cols-[minmax(5rem,max-content)_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5"
+			class="grid grid-cols-[minmax(5rem,min(max-content,45%))_minmax(0,1fr)] items-start gap-x-4 gap-y-2.5"
 		>
 			{#each shown as row, index (row.divider ? `divider-${index}` : keyOf(row))}
 				{#if row.divider}
@@ -311,7 +312,7 @@
 					{@const long = row.input === "longtext"}
 					<dt
 						class={cn(
-							"flex min-h-7 items-center gap-2 text-sm text-muted-foreground",
+							"flex min-h-7 min-w-0 items-center gap-2 text-sm [overflow-wrap:anywhere] text-muted-foreground",
 							long && "col-span-2 min-h-0",
 						)}
 					>

package/src/record/next-up.svelte

@@ -8,7 +8,7 @@
 	import StatusBadge from "../status/status-badge.svelte";
 	import { gutterClass } from "./gutter.js";
 	import { formatRange } from "./format.js";
-	import { todayIso } from "../tasks/dates.js";
+	import { todayIso } from "../work/dates.js";
 	import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
 
 	// =========================

package/src/record/project-list.svelte

@@ -6,7 +6,7 @@
 	import { Progress } from "../shadcn/progress/index.js";
 	import { TONE_TEXT } from "../lib/tone.js";
 	import StatusBadge from "../status/status-badge.svelte";
-	import { todayIso } from "../tasks/dates.js";
+	import { todayIso } from "../work/dates.js";
 	import { formatMoney, formatRange } from "./format.js";
 	import {
 		resolveLabels,

package/src/record/steps-rail.svelte

@@ -18,7 +18,7 @@
 	import { Skeleton } from "../shadcn/skeleton/index.js";
 	import * as Popover from "../shadcn/popover/index.js";
 	import * as ContextMenu from "../shadcn/context-menu/index.js";
-	import { todayIso } from "../tasks/dates.js";
+	import { todayIso } from "../work/dates.js";
 	import { formatRange } from "./format.js";
 	import {
 		groupSteps,
@@ -280,8 +280,8 @@
 							<DotsThreeVertical class="size-4" weight="bold" />
 							{#if hiddenCount > 0}
 								<span
-									class="absolute -top-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums"
-									>{hiddenCount}</span
+									class="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-muted px-1 text-xs font-medium tabular-nums"
+									>{hiddenCount.toLocaleString()}</span
 								>
 							{/if}
 						</Button>

package/src/shadcn/badge/badge.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+		base: "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit max-w-full shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none",
 		variants: {
 			// Three weights a label can carry: filled, tinted, outlined. Severity is the
 			// `tone` prop, which reads `TONE_CLASS`, not a variant.

package/src/shadcn/card/card-title.svelte

@@ -2,11 +2,7 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 
-	// WHY: card titles render as a div by default for backwards compatibility,
-
-	// but a page whose sections are all cards ends up with no headings below the h1, so screen readers cannot navigate it by heading (WCAG 2.4.6).
-
-	// Pass `as="h2"` on real section titles.
+	// WHY: card titles default to a div, so pass `as="h2"` on real section titles or a page of cards has no headings for screen readers (WCAG 2.4.6).
 	let {
 		ref = $bindable(null),
 		class: className,

package/src/shadcn/empty/empty-description.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-description"
 	class={cn(
-		"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+		"text-sm/relaxed text-muted-foreground [overflow-wrap:anywhere] [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/progress/progress.svelte

@@ -15,6 +15,13 @@
 		/** The fill's colour on the severity scale. Left out, the primary colour. */
 		tone?: Tone;
 	} = $props();
+
+	// WHY clamped: a value past max drew a positive translateX and the fill left its track.
+	let pct = $derived.by(() => {
+		const top = max && max > 0 ? max : 1;
+		const raw = (100 * (value ?? 0)) / top;
+		return Number.isFinite(raw) ? Math.min(100, Math.max(0, raw)) : 0;
+	});
 </script>
 
 <ProgressPrimitive.Root
@@ -31,6 +38,6 @@
 	<div
 		data-slot="progress-indicator"
 		class="{progressToneClass(tone)} size-full flex-1 transition-transform duration-[var(--duration-slow)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none"
-		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
+		style="transform: translateX(-{100 - pct}%)"
 	></div>
 </ProgressPrimitive.Root>

package/src/shadcn/table/table-cell.svelte

@@ -5,15 +5,23 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		wrap = false,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTdAttributes> = $props();
+	}: WithElementRef<HTMLTdAttributes> & {
+		/** Lets a long user string wrap, so a trailing action cell keeps its place. Off by default: amounts and dates stay on one line. */
+		wrap?: boolean;
+	} = $props();
 </script>
 
 <td
 	bind:this={ref}
 	data-slot="table-cell"
-	class={cn("p-2 align-middle whitespace-nowrap tabular-nums [&:has([role=checkbox])]:pr-0", className)}
+	class={cn(
+		"p-2 align-middle tabular-nums [&:has([role=checkbox])]:pr-0",
+		wrap ? "whitespace-normal [overflow-wrap:anywhere]" : "whitespace-nowrap",
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/status/README.md

@@ -1,6 +1,6 @@
 # @heyramzi/ui/status
 
-Status badge, dot and icon from one map. `defineStatuses` builds the map, and the three parts read it, so a status looks the same everywhere. They used to live in `@heyramzi/ui/tasks`, which still re-exports every name.
+Status badge, dot and icon from one map. `defineStatuses` builds the map, and the three parts read it, so a status looks the same everywhere. They used to live in `@heyramzi/ui/work`, which still re-exports every name.
 
 ```svelte
 <script lang="ts">

package/src/thread/README.md

@@ -24,6 +24,8 @@ One comment thread for any subject: a task, a project, a doc or a diagram. The t
 - **Resolve.** Pass `onResolve` and each root gets a check. Resolved roots fold away behind a "Show N resolved" button.
 - **Anchor.** `anchor` carries `{ nodeId, dx, dy, x, y }` for a canvas pin. A pinned comment shows a chip, and `onAnchor` fires on a click so the canvas can move to the node. `anchorChip` replaces the chip.
 - **Attachments.** The `attachments` snippet draws under a comment's body.
+- **Events.** `events` takes `ThreadEvent`s (a whole sentence, a time, an optional Phosphor icon) and draws each as one `Trace` line between the conversations, in time order. `whenEvent(event)` formats its time. `interleave(nodes, events)` gives the same order without the component.
+- **Long bodies.** A body over 6 lines folds behind `showMore` and `showLess`.
 - **Labels.** Every string comes from `labels`, a partial of `ThreadLabels`. `showResolved` holds a `{count}` slot. `when(comment)` formats the time.
 
 ```ts

package/src/thread/index.ts

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

package/src/thread/logic.ts

@@ -1,11 +1,22 @@
-import type { ThreadComment, ThreadLabels, ThreadNode } from "./types.js";
+import type {
+  ThreadComment,
+  ThreadEvent,
+  ThreadItem,
+  ThreadLabels,
+  ThreadNode,
+} from "./types.js";
 import { DEFAULT_THREAD_LABELS } from "./types.js";
 
-function time(comment: ThreadComment): number {
-  const ms = Date.parse(comment.createdAt);
+/** A timestamp as a number, a malformed one last. */
+function at(iso: string): number {
+  const ms = Date.parse(iso);
   return Number.isNaN(ms) ? Number.POSITIVE_INFINITY : ms;
 }
 
+function time(comment: ThreadComment): number {
+  return at(comment.createdAt);
+}
+
 /** Oldest first, a malformed timestamp last, ties in the order they came. */
 function byTime(comments: ThreadComment[]): ThreadComment[] {
   return comments
@@ -59,3 +70,22 @@ export function resolveThreadLabels(overrides?: Partial<ThreadLabels>): ThreadLa
 export function fillCount(label: string, count: number): string {
   return label.replaceAll("{count}", String(count));
 }
+
+/** Conversations and events in time order, each run of events between two conversations as one item. */
+export function interleave(nodes: ThreadNode[], events: ThreadEvent[]): ThreadItem[] {
+  const timed = [
+    ...nodes.map((node, index) => ({ at: at(node.comment.createdAt), index, node })),
+    ...events.map((event, index) => ({ at: at(event.at), index: nodes.length + index, event })),
+  ].toSorted((a, b) => a.at - b.at || a.index - b.index);
+  const items: ThreadItem[] = [];
+  for (const row of timed) {
+    if ("node" in row) {
+      items.push({ type: "node", key: row.node.comment.id, node: row.node });
+      continue;
+    }
+    const last = items.at(-1);
+    if (last?.type === "events") last.events.push(row.event);
+    else items.push({ type: "events", key: row.event.id, events: [row.event] });
+  }
+  return items;
+}

package/src/thread/thread-body.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from "../lib/utils.js";
+
+	interface Props {
+		text: string;
+		more: string;
+		less: string;
+		class?: string;
+	}
+
+	let { text, more, less, class: className }: Props = $props();
+
+	let open = $state(false);
+	let long = $derived(text.length > 420 || text.split("\n").length > 6);
+</script>
+
+<div class="flex flex-col items-start gap-1">
+	<p
+		class={cn(
+			"text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty",
+			long && !open && "line-clamp-6",
+			className,
+		)}
+	>
+		{text}
+	</p>
+	{#if long}
+		<button
+			type="button"
+			class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"
+			aria-expanded={open}
+			onclick={() => (open = !open)}
+		>
+			{open ? less : more}
+		</button>
+	{/if}
+</div>

package/src/thread/thread-events.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import * as TraceUI from "../shadcn/trace/index.js";
+	import type { ThreadEvent } from "./types.js";
+
+	interface Props {
+		events: ThreadEvent[];
+		when: (event: ThreadEvent) => string;
+	}
+
+	let { events, when }: Props = $props();
+</script>
+
+<!-- ps-1 centres each 16px icon in the 24px avatar column the comments use. -->
+<TraceUI.Trace class="gap-1 ps-1">
+	{#each events as event (event.id)}
+		{@const Icon = event.icon}
+		<TraceUI.Line class="w-full items-start text-xs">
+			{#if Icon}
+				<TraceUI.Icon class="mt-px"><Icon size={14} /></TraceUI.Icon>
+			{/if}
+			<!-- Wraps, not truncates: a status name can be a sentence, and a touch screen has no hover title. -->
+			<TraceUI.Title class="flex-1 whitespace-normal text-pretty [overflow-wrap:anywhere]"
+				>{event.title}</TraceUI.Title
+			>
+			<TraceUI.Description>
+				<time datetime={event.at}>{when(event)}</time>
+			</TraceUI.Description>
+		</TraceUI.Line>
+	{/each}
+</TraceUI.Trace>

package/src/thread/thread.svelte

@@ -2,15 +2,25 @@
 	import type { Snippet } from "svelte";
 	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
+	import { initial } from "../lib/initials.js";
 	import { AgentAvatar } from "../agents/index.js";
-	import { TONE_CLASS } from "../lib/tone.js";
 	import RichRenderer from "../editor/renderer.svelte";
 	import { Skeleton } from "../shadcn/skeleton/index.js";
-	import { buildThread, fillCount, resolveThreadLabels, resolvedCount } from "./logic.js";
-	import type { ThreadComment, ThreadLabels, ThreadPost } from "./types.js";
+	import ThreadBody from "./thread-body.svelte";
+	import ThreadEvents from "./thread-events.svelte";
+	import {
+		buildThread,
+		fillCount,
+		interleave,
+		resolveThreadLabels,
+		resolvedCount,
+	} from "./logic.js";
+	import type { ThreadComment, ThreadEvent, ThreadLabels, ThreadPost } from "./types.js";
 
 	interface Props {
 		comments: ThreadComment[];
+		/** Status moves, assignments and the like, one quiet line each between the comments. */
+		events?: ThreadEvent[];
 		/** Rows still on their way. Draws skeleton rows in place of the thread. */
 		loading?: boolean;
 		labels?: Partial<ThreadLabels>;
@@ -22,6 +32,10 @@
 		anchorChip?: Snippet<[ThreadComment]>;
 		/** How a timestamp reads. Defaults to a short date. */
 		when?: (comment: ThreadComment) => string;
+		/** How an event's time reads. Defaults to a short date. */
+		whenEvent?: (event: ThreadEvent) => string;
+		/** The locale the default times read in. */
+		locale?: string;
 		/** Returns false to keep the draft. Without it no composer shows. */
 		onPost?: (post: ThreadPost) => void | boolean | Promise<void | boolean>;
 		onEdit?: (comment: ThreadComment, body: string) => void | Promise<void>;
@@ -37,13 +51,15 @@
 
 	let {
 		comments,
+		events = [],
+		locale = "en-GB",
 		loading = false,
 		labels: labelOverrides,
 		avatar,
 		attachments,
 		anchorChip,
-		when = (comment) =>
-			new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+		when = (comment) => shortDate(comment.createdAt),
+		whenEvent = (event) => shortDate(event.at),
 		onPost,
 		onEdit,
 		onDelete,
@@ -58,6 +74,11 @@
 	let resolved = $derived(resolvedCount(nodes));
 	let showResolved = $state(false);
 	let shown = $derived(showResolved ? nodes : nodes.filter((node) => !node.comment.resolved));
+	let items = $derived(interleave(shown, events));
+
+	function shortDate(at: string): string {
+		return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(new Date(at));
+	}
 
 	let draft = $state("");
 	let replyTo = $state<string | null>(null);
@@ -101,10 +122,6 @@
 		if (!body || body === comment.body) return;
 		await onEdit?.(comment, body);
 	}
-
-	function initial(name: string): string {
-		return name.trim().charAt(0).toLocaleUpperCase() || "?";
-	}
 </script>
 
 {#snippet composer(
@@ -164,14 +181,7 @@
 			<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,
-						)}
-					>
-						{labels.agent}
-					</span>
+					<span class="sr-only">{labels.agent}</span>
 				{/if}
 				<span class="text-xs text-muted-foreground tabular-nums">{when(comment)}</span>
 				{#if comment.edited}
@@ -254,7 +264,7 @@
 			{:else if comment.content}
 				<div class="text-sm leading-relaxed"><RichRenderer content={comment.content} /></div>
 			{:else}
-				<p class="text-sm leading-relaxed whitespace-pre-wrap text-pretty">{comment.body}</p>
+				<ThreadBody text={comment.body} more={labels.showMore} less={labels.showLess} />
 			{/if}
 
 			{@render attachments?.(comment)}
@@ -289,49 +299,54 @@
 				</li>
 			{/each}
 		</ol>
-	{:else if shown.length > 0}
+	{:else if items.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}
-				>
-					{@render row(node.comment, true)}
-					{#if node.comment.resolved}
-						<span class="ms-9 text-xs text-muted-foreground">{labels.resolved}</span>
-					{/if}
-					{#if node.replies.length > 0}
-						<ol class="ms-3 flex flex-col gap-3 border-s border-border ps-6">
-							{#each node.replies as reply (reply.id)}
-								<li>{@render row(reply, false)}</li>
-							{/each}
-						</ol>
-					{/if}
-					{#if onPost && !node.comment.resolved}
-						{#if replyTo === node.comment.id}
-							<div class="ms-9">
-								{@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 = "";
-								}}
-							>
-								<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
-							</button>
+			{#each items as item (item.key)}
+				{#if item.type === "events"}
+					<li><ThreadEvents events={item.events} when={whenEvent} /></li>
+				{:else}
+					{@const node = item.node}
+					<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>
 						{/if}
-					{/if}
-				</li>
+						{#if node.replies.length > 0}
+							<ol class="ms-3 flex flex-col gap-3 border-s border-border ps-6">
+								{#each node.replies as reply (reply.id)}
+									<li>{@render row(reply, false)}</li>
+								{/each}
+							</ol>
+						{/if}
+						{#if onPost && !node.comment.resolved}
+							{#if replyTo === node.comment.id}
+								<div class="ms-9">
+									{@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 = "";
+									}}
+								>
+									<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
+								</button>
+							{/if}
+						{/if}
+					</li>
+				{/if}
 			{/each}
 		</ol>
 	{:else if !onPost}

package/src/thread/types.ts

@@ -1,3 +1,5 @@
+import type { PhosphorIcon } from "../lib/icon-types.js";
+
 export type ThreadAuthorKind = "user" | "agent";
 
 export type ThreadAuthor = {
@@ -47,6 +49,21 @@ export type ThreadNode = {
   replies: ThreadComment[];
 };
 
+/** Something that happened to the subject, drawn as one quiet line between comments. */
+export type ThreadEvent = {
+  id: string;
+  /** The whole sentence, actor first: "Project Manager moved this from Open to In progress". */
+  title: string;
+  /** ISO timestamp. */
+  at: string;
+  icon?: PhosphorIcon;
+};
+
+/** The thread in time order: a conversation, or a run of events between two of them. */
+export type ThreadItem =
+  | { type: "node"; key: string; node: ThreadNode }
+  | { type: "events"; key: string; events: ThreadEvent[] };
+
 export type ThreadLabels = {
   title: string;
   empty: string;
@@ -68,6 +85,8 @@ export type ThreadLabels = {
   hideResolved: string;
   agent: string;
   pinned: string;
+  showMore: string;
+  showLess: string;
 };
 
 export const DEFAULT_THREAD_LABELS: ThreadLabels = {
@@ -90,4 +109,6 @@ export const DEFAULT_THREAD_LABELS: ThreadLabels = {
   hideResolved: "Hide resolved",
   agent: "AI",
   pinned: "Pinned",
+  showMore: "Show more",
+  showLess: "Show less",
 };

package/src/{tasks → work}/README.md

@@ -1,9 +1,12 @@
-# @heyramzi/ui/tasks
+# @heyramzi/ui/work
 
-Svelte 5 task views. One array of tasks shows as a drag-and-drop board, a
-grouped list or a gantt timeline, and the same column config drives all three.
-Status badges, dots and icons come from one map too. Live at
-[ui.heyramzi.com/tasks](https://ui.heyramzi.com/tasks).
+Svelte 5 work views: tasks and the docs that sit beside them. One array of
+tasks shows as a drag-and-drop board, a grouped list or a gantt timeline, and
+the same column config drives all three. Status badges, dots and icons come
+from one map too. Live at [ui.heyramzi.com/work](https://ui.heyramzi.com/work).
+
+Status badges and the side panel live in `@heyramzi/ui/status` and
+`@heyramzi/ui/panel`.
 
 Every view knows nothing about your data. You pass items and a few accessors,
 and it hands back a change to persist. It is a subpath of `@heyramzi/ui` and builds on its primitives and on
@@ -24,7 +27,7 @@ isn't a drop target (an Overdue lane, say).
 
 ```svelte
 <script lang="ts">
-  import { KanbanBoard, type KanbanMove } from "@heyramzi/ui/tasks";
+  import { KanbanBoard, type KanbanMove } from "@heyramzi/ui/work";
 
   type Task = { id: string; column: string; title: string; order: string };
 
@@ -204,7 +207,7 @@ icon, so `ChartBarHorizontal` stands in.
 `SidePanel` is a sheet for one record: a title, a description, status chips, doors
 out to other tools (`openIn`), a copy-a-prompt `handoff`, a strip of `stats`, then
 the body and an optional pinned `footer`. You pass the tools; the panel knows none.
-Import it from `@heyramzi/ui/panel`, or from `@heyramzi/ui/tasks` for now.
+Import it from `@heyramzi/ui/panel`, or from `@heyramzi/ui/work` for now.
 
 ```svelte
 <SidePanel
@@ -263,7 +266,7 @@ and fetches nothing. You pass entries in and persist what it hands back.
 | `locale`, `labels`, `class` | | `labels` overrides any string in `DEFAULT_TIME_LABELS`. |
 
 Alt+S starts and stops the timer. A screen reader hears the start, one update a
-minute and the stop. Import it alone from `@heyramzi/ui/tasks/time`.
+minute and the stop. Import it alone from `@heyramzi/ui/work/time`.
 
 For boards and lists: `TimeChip` (`minutes`, `estimate?`, `running?`) shows the
 logged total, with a pulsing dot while a timer runs and a small ring against an