@heyramzi/ui 2.8.0 → 2.10.0

package/src/modules.test.ts

@@ -1,41 +1,10 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { describe, expect, it, vi } from "vite-plus/test";
-import * as status from "./status/index.js";
-import * as panel from "./panel/index.js";
+import { describe, expect, it } from "vite-plus/test";
 import * as record from "./record/index.js";
 import * as inbox from "./inbox/index.js";
 import * as thread from "./thread/index.js";
-import type {
-  PanelStat as FromTasksPanelStat,
-  SidePanelWidth as FromTasksWidth,
-  StatusDef as FromTasksStatusDef,
-  StatusDotVariant as FromTasksVariant,
-  StatusId as FromTasksId,
-  StatusMap as FromTasksMap,
-  Statuses as FromTasksStatuses,
-} from "./tasks/index.js";
-import type { PanelStat, SidePanelWidth } from "./panel/index.js";
-import type {
-  StatusDef,
-  StatusDotVariant,
-  StatusId,
-  StatusMap,
-  Statuses,
-} from "./status/index.js";
-
-// Both spellings of every moved type have to be the same type.
-type Same<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false;
-const sameTypes: [
-  Same<PanelStat, FromTasksPanelStat>,
-  Same<SidePanelWidth, FromTasksWidth>,
-  Same<StatusDef, FromTasksStatusDef>,
-  Same<StatusDotVariant, FromTasksVariant>,
-  Same<StatusId<{ a: StatusDef }>, FromTasksId<{ a: StatusDef }>>,
-  Same<StatusMap, FromTasksMap>,
-  Same<Statuses, FromTasksStatuses>,
-] = [true, true, true, true, true, true, true];
 
 const pkg = JSON.parse(
   readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8"),
@@ -44,23 +13,6 @@ const pkg = JSON.parse(
 };
 
 describe("module split", () => {
-  it("keeps every moved name on tasks, the same object as on its new module", async () => {
-    // The kanban board reads matchMedia on import, and jsdom has none.
-    vi.stubGlobal("matchMedia", () => ({
-      matches: false,
-      addEventListener() {},
-      removeEventListener() {},
-    }));
-    const tasks = await import("./tasks/index.js");
-    expect(sameTypes).toHaveLength(7);
-    expect(tasks.StatusBadge).toBe(status.StatusBadge);
-    expect(tasks.StatusDot).toBe(status.StatusDot);
-    expect(tasks.StatusIcon).toBe(status.StatusIcon);
-    expect(tasks.defineStatuses).toBe(status.defineStatuses);
-    expect(tasks.StatusBadge).toBeDefined();
-    expect(tasks.SidePanel).toBe(panel.SidePanel);
-  });
-
   it("holds the record page's names", () => {
     expect(record.RecordShell).toBeDefined();
     expect(record.DEFAULT_RECORD_LABELS).toBeDefined();
@@ -84,22 +36,10 @@ describe("module split", () => {
     expect(missing).toEqual([]);
   });
 
-  it("keeps the old subpaths and adds the new ones", () => {
-    for (const name of [
-      "./tasks",
-      "./tasks/status",
-      "./tasks/status-dot",
-      "./tasks/statuses",
-      "./tasks/side-panel",
-      "./tasks/record",
-      "./tasks/inbox",
-      "./status",
-      "./panel",
-      "./record",
-      "./thread",
-      "./inbox",
-    ]) {
+  it("exports each module once, under its own name", () => {
+    for (const name of ["./work", "./status", "./panel", "./record", "./thread", "./inbox"]) {
       expect(pkg.exports[name], name).toBeDefined();
     }
+    expect(Object.keys(pkg.exports).filter((name) => name.startsWith("./tasks"))).toEqual([]);
   });
 });

package/src/panel/README.md

@@ -1,5 +1,5 @@
 # @heyramzi/ui/panel
 
-`SidePanel`, a sheet for one record: badges, links out to other tools, a copy-a-prompt handoff and a stats strip. `PanelStat` types one stat. It used to live in `@heyramzi/ui/tasks`, which still re-exports both, and `tasks/side-panel` still resolves.
+`SidePanel`, a sheet for one record: badges, links out to other tools, a copy-a-prompt handoff and a stats strip. `PanelStat` types one stat. It used to live in `@heyramzi/ui/work`, which still re-exports both, and `tasks/side-panel` still resolves.
 
 Exports: `SidePanel` and the types `PanelStat`, `SidePanelWidth`.

package/src/record/README.md

@@ -1,3 +1,3 @@
 # @heyramzi/ui/record
 
-The page shell for a project or a client record: header, where-we-are, next up, stats, steps rail, timeline, project list and field sections. It used to live at `@heyramzi/ui/tasks/record`, which still resolves to the same module.
+The page shell for a project or a client record: header, where-we-are, next up, stats, steps rail, timeline, project list and field sections.

package/src/record/demo-data.ts

@@ -185,7 +185,7 @@ export const websiteEvents: RecordEvent[] = [
       { label: "Length", value: "45 min" },
       { label: "With", value: "Jane Roe, Tom Bell" },
     ],
-    href: "#call-scoping",
+    href: "#",
   },
   {
     id: "w3",
@@ -233,7 +233,7 @@ export const websiteEvents: RecordEvent[] = [
 export const website: RecordSummary = {
   id: "p-web",
   name: "Website rebuild",
-  href: "#project-web",
+  href: "#",
   stageKey: "sent",
   value: 12000,
   currency: "EUR",
@@ -254,7 +254,7 @@ export const website: RecordSummary = {
 export const audit: RecordSummary = {
   id: "p-audit",
   name: "Brand audit",
-  href: "#project-audit",
+  href: "#",
   stageKey: "lost",
   stageDetail: "Price",
   value: 4500,
@@ -272,7 +272,7 @@ export const audit: RecordSummary = {
 export const portal: RecordSummary = {
   id: "p-portal",
   name: "Booking portal",
-  href: "#project-portal",
+  href: "#",
   stageKey: "paid",
   value: 18000,
   paid: 18000,

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/record-demo.svelte

@@ -198,7 +198,7 @@
 					{#snippet header()}
 						<RecordHeader
 							title={website.name}
-							parent={{ label: "Marlow & Finch", href: "#client" }}
+							parent={{ label: "Marlow & Finch", href: "#" }}
 							stage={stage ? { label: stage.label, tone: stage.tone } : null}
 							facts={[
 								formatMoney(website.value ?? 0, "EUR", locale),
@@ -287,7 +287,7 @@
 					{#snippet header()}
 						<RecordHeader
 							title="Marlow & Finch"
-							parent={{ label: "Clients", href: "#clients" }}
+							parent={{ label: "Clients", href: "#" }}
 							facts={[
 								`Pipeline ${formatMoney(rollup.totals.EUR?.pipeline ?? 0, "EUR", locale, true)}`,
 								`Won ${formatMoney(rollup.totals.EUR?.won ?? 0, "EUR", locale, true)}`,

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>