@heyramzi/ui 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus tasks, charts, slides, an editor, onboarding and a canvas as subpaths.",
   "license": "MIT",
   "repository": {
@@ -172,6 +172,31 @@
       "default": "./src/agents/index.ts"
     },
     "./agents/demo.svelte": "./src/agents/demo.svelte",
+    "./status": {
+      "svelte": "./src/status/index.ts",
+      "types": "./src/status/index.ts",
+      "default": "./src/status/index.ts"
+    },
+    "./panel": {
+      "svelte": "./src/panel/index.ts",
+      "types": "./src/panel/index.ts",
+      "default": "./src/panel/index.ts"
+    },
+    "./record": {
+      "svelte": "./src/record/index.ts",
+      "types": "./src/record/index.ts",
+      "default": "./src/record/index.ts"
+    },
+    "./thread": {
+      "svelte": "./src/thread/index.ts",
+      "types": "./src/thread/index.ts",
+      "default": "./src/thread/index.ts"
+    },
+    "./inbox": {
+      "svelte": "./src/inbox/index.ts",
+      "types": "./src/inbox/index.ts",
+      "default": "./src/inbox/index.ts"
+    },
     "./tasks": {
       "svelte": "./src/tasks/index.ts",
       "types": "./src/tasks/index.ts",
@@ -193,19 +218,19 @@
       "default": "./src/tasks/task-gantt.svelte"
     },
     "./tasks/status": {
-      "svelte": "./src/tasks/status-badge.svelte",
-      "types": "./src/tasks/status-badge.svelte",
-      "default": "./src/tasks/status-badge.svelte"
+      "svelte": "./src/status/status-badge.svelte",
+      "types": "./src/status/status-badge.svelte",
+      "default": "./src/status/status-badge.svelte"
     },
     "./tasks/status-dot": {
-      "svelte": "./src/tasks/status-dot.svelte",
-      "types": "./src/tasks/status-dot.svelte",
-      "default": "./src/tasks/status-dot.svelte"
+      "svelte": "./src/status/status-dot.svelte",
+      "types": "./src/status/status-dot.svelte",
+      "default": "./src/status/status-dot.svelte"
     },
     "./tasks/statuses": {
-      "svelte": "./src/tasks/define-statuses.ts",
-      "types": "./src/tasks/define-statuses.ts",
-      "default": "./src/tasks/define-statuses.ts"
+      "svelte": "./src/status/define-statuses.ts",
+      "types": "./src/status/define-statuses.ts",
+      "default": "./src/status/define-statuses.ts"
     },
     "./tasks/time": {
       "svelte": "./src/tasks/time/time-tracker.svelte",
@@ -218,9 +243,9 @@
       "default": "./src/tasks/inbox/index.ts"
     },
     "./tasks/side-panel": {
-      "svelte": "./src/tasks/side-panel.svelte",
-      "types": "./src/tasks/side-panel.svelte",
-      "default": "./src/tasks/side-panel.svelte"
+      "svelte": "./src/panel/side-panel.svelte",
+      "types": "./src/panel/side-panel.svelte",
+      "default": "./src/panel/side-panel.svelte"
     },
     "./tasks/presets/sales": {
       "svelte": "./src/tasks/presets/sales.ts",
@@ -234,11 +259,11 @@
     },
     "./tasks/detail-demo.svelte": "./src/tasks/detail/detail-demo.svelte",
     "./tasks/record": {
-      "svelte": "./src/tasks/record/index.ts",
-      "types": "./src/tasks/record/index.ts",
-      "default": "./src/tasks/record/index.ts"
+      "svelte": "./src/record/index.ts",
+      "types": "./src/record/index.ts",
+      "default": "./src/record/index.ts"
     },
-    "./tasks/record-demo.svelte": "./src/tasks/record/record-demo.svelte",
+    "./tasks/record-demo.svelte": "./src/record/record-demo.svelte",
     "./tasks/demo": {
       "svelte": "./src/tasks/demo.svelte",
       "default": "./src/tasks/demo.svelte"
@@ -337,44 +362,44 @@
   "dependencies": {
     "@dagrejs/dagre": "^3.1.1",
     "@shadcn-svelte/primitives": "^0.0.1",
-    "@tiptap/core": "^3.31.4",
-    "@tiptap/extension-drag-handle": "^3.31.4",
-    "@tiptap/extension-image": "^3.31.4",
-    "@tiptap/extension-placeholder": "^3.31.4",
-    "@tiptap/pm": "^3.31.4",
-    "@tiptap/starter-kit": "^3.31.4",
+    "@tiptap/core": "^3.32.0",
+    "@tiptap/extension-drag-handle": "^3.32.0",
+    "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/extension-placeholder": "^3.32.0",
+    "@tiptap/pm": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
     "@zag-js/svelte": "^1.46.0",
     "@zag-js/tour": "^1.46.0",
     "clsx": "^2.1.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "layerchart": "^2.5.1",
-    "markdown-it": "^15.0.2",
-    "marked": "^18.1.0",
+    "layerchart": "^2.8.1",
+    "markdown-it": "^15.0.3",
+    "marked": "^18.1.1",
     "perfect-freehand": "^1.2.3",
-    "phosphor-svelte": "^3.1.0",
+    "phosphor-svelte": "^3.1.1",
     "roughjs": "^4.6.6",
     "shiki": "^4.5.0",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
-    "zod": "^4.6.5"
+    "zod": "^4.6.7"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",
-    "@types/node": "^26.6.4",
+    "@types/node": "^26.6.5",
     "@xyflow/svelte": "^1.7.0",
-    "bits-ui": "^2.19.5",
-    "jsdom": "^30.1.2",
+    "bits-ui": "^2.20.0",
+    "jsdom": "^30.1.3",
     "mode-watcher": "^1.1.0",
     "svelte": "^5.57.2",
-    "svelte-check": "^4.7.6",
+    "svelte-check": "^4.7.7",
     "svelte-sonner": "^1.2.1",
     "typescript": "~7.0.2",
-    "vite-plus": "^1.0.0",
-    "vitest": "^5.0.3"
+    "vite-plus": "^1.3.0",
+    "vitest": "^5.0.5"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",

package/scripts/sync-shadcn.mjs

@@ -69,6 +69,8 @@ const DEMO_ALIASES = [
   ["$lib/utils.js", "@heyramzi/utils"],
   // The peer here is the runes build, published under its own name.
   ["@tabler/icons-svelte/", "@tabler/icons-svelte-runes/"],
+  // Upstream's docs live under /docs/components; ours are at /components, and the prerender follows the link.
+  ['href="/docs/components"', 'href="/components"'],
 ];
 
 /* Registry primitives this package does not ship: no product imports them. Skipped, so a sync does not bring them back. */

package/src/canvas/README.md

@@ -9,7 +9,7 @@ MIT. It runs on any domain and costs nothing per install.
 ## What's in it
 
 - **Pen layer.** Freehand strokes (perfect-freehand), a highlighter, an eraser, plain text, and rectangle, ellipse and diamond shapes. Colours are token names, so a board drawn in light mode reads fine in dark.
-- **Tool bar.** A floating bar with the tools, undo and redo. Pick from 6 colours and 3 brush sizes. Keys: V, H, P, M, E, T, R, O, D.
+- **Tool bar.** A floating bar with the tools, a colour and a brush size. Pick from 8 colours and 3 brush sizes. Keys: V, H, L, P, M, E, T, R, O, D, F. Undo and redo are yours to wire to `createCanvasDispatcher`.
 - **Plugin API.** Register your own card types, ops and layout passes. One registry builds xyflow's `nodeTypes` for you.
 - **Ops.** 8 core ops (`addNode`, `removeNode`, `patchNode`, `moveNode`, `setParent`, `addEdge`, `removeEdge`, `patchEdge`) as plain functions over nodes and edges. Zod checks every one.
 - **Undo history.** `createCanvasDispatcher` wraps each edit in a transaction. A whole pen stroke is one undo step.
@@ -68,14 +68,15 @@ Drop this in `src/routes/+page.svelte`.
     toolbar: "Canvas tools",
     style: "Style",
     tools: {
-      select: "Select", hand: "Hand", pen: "Pen", highlighter: "Highlighter",
-      eraser: "Eraser", text: "Text", rectangle: "Rectangle", ellipse: "Ellipse",
-      diamond: "Diamond", shapes: "Shapes",
+      select: "Select", hand: "Hand", connect: "Connect", frame: "Frame", pen: "Pen",
+      highlighter: "Highlighter", eraser: "Eraser", text: "Text", rectangle: "Rectangle",
+      ellipse: "Ellipse", diamond: "Diamond", shapes: "Shapes", note: "Note",
+    },
+    colors: {
+      ink: "Ink", red: "Red", blue: "Blue", green: "Green", amber: "Amber",
+      violet: "Violet", indigo: "Indigo", terra: "Terracotta",
     },
-    colors: { ink: "Ink", red: "Red", blue: "Blue", green: "Green", amber: "Amber", violet: "Violet" },
     sizes: ["Small", "Medium", "Large"],
-    undo: "Undo",
-    redo: "Redo",
   } as const;
 </script>
 
@@ -100,10 +101,6 @@ Drop this in `src/routes/+page.svelte`.
       bind:color
       bind:level
       {labels}
-      canUndo={history.canUndo}
-      canRedo={history.canRedo}
-      onUndo={history.undo}
-      onRedo={history.redo}
     />
   </SvelteFlow>
 </div>
@@ -192,7 +189,7 @@ The pen is `PenOverlay` (or `PenLayer` inside xyflow), and it needs 2 callbacks
 
 The eraser removes whole strokes, never part of one. A swipe across a big shape doesn't wipe it.
 
-The pen has 6 colours: `ink`, `red`, `blue`, `green`, `amber` and `violet`. `pen.css` maps them to CSS variables with a light and a dark value. Dark mode applies under a `.dark` class on an ancestor or on `.svelte-flow`.
+The pen has 8 colours: `ink`, `red`, `blue`, `green`, `amber`, `violet`, `indigo` and `terra`. `pen.css` maps them to CSS variables with a light and a dark value. Dark mode applies under a `.dark` class on an ancestor or on `.svelte-flow`.
 
 ## Headless ops
 

package/src/charts/dashboard/data-panel.svelte

@@ -5,7 +5,7 @@
 import type { Snippet } from "svelte";
 import { cn } from "../../lib/utils.js";
 import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-import { SectionLabel } from "../../components/list-page/index.js";
+import { SectionLabel } from "../../components/section-header/index.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 // =========================

package/src/components/list-page/detail-panel.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import SectionLabel from "./section-label.svelte";
+import SectionLabel from "../section-header/section-label.svelte";
 import { cn } from "../../lib/utils.js";
 import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";

package/src/components/list-page/filter-popover.svelte

@@ -7,7 +7,7 @@ import * as Popover from "../../shadcn/popover/index.js";
 import { Funnel as FunnelIcon } from "phosphor-svelte";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../../shadcn/button/index.js";
-import { toolbarTriggerClass } from "./toolbar-trigger.js";
+import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 // phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in

package/src/components/list-page/index.ts

@@ -12,7 +12,7 @@ export { default as RailBody } from "./rail-body.svelte";
 export { default as RailEmpty } from "./rail-empty.svelte";
 export { default as RailHead } from "./rail-head.svelte";
 export { default as RailRow } from "./rail-row.svelte";
-export { default as SectionLabel } from "./section-label.svelte";
+export { default as SectionLabel } from "../section-header/section-label.svelte";
 export { queueRailClass, queueRailWidth } from "./queue-rail.js";
 export { default as FilterPopover } from "./filter-popover.svelte";
 export { filterSectionClass } from "./filter-section.js";
@@ -21,8 +21,8 @@ export { default as ListPageShell } from "./list-page-shell.svelte";
 export { default as MasterDetail } from "./master-detail.svelte";
 // The segmented control isn't re-exported here. Two import paths drifted, so
 // its one home is `@heyramzi/ui/components/segmented`.
-export { default as ToolbarSearch } from "./toolbar-search.svelte";
-export { toolbarTriggerClass } from "./toolbar-trigger.js";
+export { default as ToolbarSearch } from "../toolbar/toolbar-search.svelte";
+export { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
 export { listTable } from "./list-table.js";
 export type { ViewMode } from "./types.js";
 export { getSectionHost, setSectionHost, type SectionHost } from "./section-host.js";

package/src/components/list-page/rail-head.svelte

@@ -3,7 +3,7 @@
 // IMPORTS
 // =========================
 import type { Snippet } from "svelte";
-import SectionLabel from "./section-label.svelte";
+import SectionLabel from "../section-header/section-label.svelte";
 import { cn } from "../../lib/utils.js";
 
 // =========================

package/src/components/section-header/index.ts

@@ -1 +1,2 @@
 export { default as SectionHeader } from "./section-header.svelte";
+export { default as SectionLabel } from "./section-label.svelte";

package/src/components/section-header/section-header.svelte

@@ -3,7 +3,7 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import SectionLabel from "../list-page/section-label.svelte";
+	import SectionLabel from "./section-label.svelte";
 
 	// =========================
 	// TYPES

package/src/components/toolbar/index.ts

@@ -3,3 +3,5 @@
  * each of those folds into a menu and the row never wraps.
  */
 export { default as Toolbar } from "./toolbar.svelte";
+export { default as ToolbarSearch } from "./toolbar-search.svelte";
+export { toolbarTriggerClass } from "./toolbar-trigger.js";

package/src/components/toolbar/toolbar.svelte

@@ -6,8 +6,8 @@
 	import { CaretDown, MagnifyingGlass } from "phosphor-svelte";
 	import { SegmentedFilter } from "../segmented/index.js";
 	import type { TabDef } from "../segmented/animated-tabs.svelte";
-	import { toolbarTriggerClass } from "../list-page/toolbar-trigger.js";
-	import ToolbarSearch from "../list-page/toolbar-search.svelte";
+	import { toolbarTriggerClass } from "./toolbar-trigger.js";
+	import ToolbarSearch from "./toolbar-search.svelte";
 	import { Input } from "../../shadcn/input/index.js";
 	import * as DropdownMenu from "../../shadcn/dropdown-menu/index.js";
 	import * as Popover from "../../shadcn/popover/index.js";

package/src/editor/editor.svelte

@@ -3,6 +3,7 @@
 // IMPORTS
 // =========================
 import { Editor } from "@tiptap/core";
+import { untrack } from "svelte";
 import "./content.css";
 import { buildExtensions } from "./extensions.js";
 import { buildSlashItems, type SlashItem } from "./slash-items.js";
@@ -176,7 +177,7 @@ function deleteActiveImage() {
 	activeImageElement = null;
 }
 
-$effect(() => {
+function mount() {
 	if (!editorElement || editorInstance) return;
 
 	const extensions = buildExtensions({ preset, placeholder, blockIds });
@@ -270,6 +271,12 @@ $effect(() => {
 		editorInstance?.destroy();
 		editorInstance = null;
 	};
+}
+
+// Only the element mounts the editor. Read tracked, `content` (fed back by onchange) and the
+// `tick++` each transaction makes would destroy and rebuild it until Svelte stops the loop.
+$effect(() => {
+	if (editorElement) return untrack(mount);
 });
 </script>
 

package/src/gallery.test.ts

@@ -28,7 +28,12 @@ const SITE = join(PKG, "..", "..", "site", "src", "lib");
 
 describe("site gallery coverage", () => {
   it("gives every animation a stage", () => {
-    const section = readFileSync(join(SITE, "demos", "motion.svelte"), "utf8");
+    // Each animation's stage is its own file under demos/motion/.
+    const stages = join(SITE, "demos", "motion");
+    const section = readdirSync(stages)
+      .filter((file) => file.endsWith(".svelte"))
+      .map((file) => readFileSync(join(stages, file), "utf8"))
+      .join("\n");
     const missing = readdirSync(join(PKG, "src", "animations"))
       .filter((file) => file.endsWith(".css") && file !== "index.css")
       .filter((file) => !section.includes(`animations/${file.replace(".css", "")}`));
@@ -43,6 +48,20 @@ describe("site gallery coverage", () => {
     expect(vendored.filter((name) => !manifest.includes(`name: "${name}"`))).toEqual([]);
   });
 
+  it("gives every component, AI part and effect a place on the site", () => {
+    const walk = (dir: string): string[] =>
+      readdirSync(dir, { withFileTypes: true }).flatMap((d) =>
+        d.isDirectory() ? walk(join(dir, d.name)) : /\.(svelte|ts)$/.test(d.name) ? [join(dir, d.name)] : [],
+      );
+    const site = walk(join(SITE, "..")).map((file) => readFileSync(file, "utf8")).join("\n");
+    const parts = ["components", "ai", "effects"].flatMap((top) =>
+      readdirSync(join(PKG, "src", top), { withFileTypes: true })
+        .filter((d) => d.isDirectory())
+        .map((d) => `${top}/${d.name}`),
+    );
+    expect(parts.filter((part) => !site.includes(`${part}/`) && !site.includes(`${part}"`))).toEqual([]);
+  });
+
   it("keeps a demo file behind every listed primitive", () => {
     const manifest = readFileSync(join(SITE, "shadcn-demos", "index.ts"), "utf8");
     const listed = [...manifest.matchAll(/name: "([a-z-]+)"/g)].map((m) => m[1]);

package/src/inbox/README.md

@@ -0,0 +1,29 @@
+# @heyramzi/ui/inbox
+
+One threaded inbox. Entries from any source (a comment, a status change, an assignment, a mention, an agent reply, an agent's ask) group into one thread per subject, and the screen shows the thread list on the left and the selected thread on the right. The inbox never fetches. Everything leaves through callbacks.
+
+```svelte
+<script lang="ts">
+  import { ThreadInbox, type InboxEntry } from "@heyramzi/ui/inbox";
+
+  let entries = $state<InboxEntry[]>([]);
+</script>
+
+<ThreadInbox
+  {entries}
+  unreadFirst
+  onRead={(thread, read) => mark(thread.key, read)}
+  onSnooze={({ thread, until }) => snooze(thread.key, until)}
+  onDecide={(verdict, thread) => decide(verdict)}
+/>
+```
+
+- **Grouping.** `threadsOf(entries, { unreadFirst })` keys on `subject.type` plus `subject.id`, sorts threads by their newest entry and entries oldest first. An entry with no subject id is dropped. A malformed timestamp sorts last. Each thread carries `unread`, `latestAt` and `pending`.
+- **Needs you.** A `proposal` entry whose `proposal` (an `InboxItem`) is still open pins to the top of its thread, drawn with `InboxCard`. The "Needs you" filter keeps threads that hold one. Verdicts come out of `onDecide`.
+- **Filters.** By subject type, by actor name and by Needs you. `filterThreads` runs them without the component.
+- **Keys.** `j` and `k` move, `u` marks the thread read (or unread when nothing is unread), `h` opens the snooze row (`1`, `2`, `3` pick a time), and `a`, `d`, `s`, `e` act on the pinned proposal. A key does nothing while focus is in an input, a textarea, a select or an editable element, or while a modifier is held. `inboxKeyOf(event)` is the same check.
+- **Snooze.** `onSnooze({ thread, until })` gets a `Date`: 3 hours on, tomorrow 9:00 or next Monday 9:00 (`snoozeChoices(now)`). The host decides what snoozed means and stops passing the entries.
+- **Read.** `onRead(thread, read)` is true when the thread had unread entries, so the host marks them all read.
+- **Words.** `labels` is a partial of `InboxLabels`. Status and assignment lines have `{from}`, `{to}` and `{assignee}` slots. `typeLabels` names the subject types. The `avatar` and `status` snippets let the app draw its own portrait and status badge.
+
+`@heyramzi/ui/tasks/inbox` still exports the approvals-only `Inbox`.

package/src/inbox/inbox.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+	NO_FILTER,
+	entryLine,
+	filterThreads,
+	inboxKeyOf,
+	resolveInboxLabels,
+	snoozeChoices,
+	threadsOf,
+} from "./logic.js";
+import type { InboxEntry, InboxSubject } from "./types.js";
+import type { InboxItem } from "../tasks/inbox/inbox-types.js";
+
+const tsk7: InboxSubject = { type: "task", id: "7", ref: "TSK-7", title: "Write the pricing page" };
+const tsk9: InboxSubject = { type: "task", id: "9", ref: "TSK-9", title: "Fix the footer" };
+const doc1: InboxSubject = { type: "doc", id: "1", title: "Brief" };
+const ada = { kind: "user", name: "Ada" } as const;
+const bot = { kind: "agent", name: "Scribe" } as const;
+
+function entry(id: string, at: string, extra: Partial<InboxEntry> = {}): InboxEntry {
+	return { id, kind: "comment", subject: tsk7, actor: ada, at, ...extra };
+}
+
+const proposal = (state: InboxItem["state"] = "proposed", tier: InboxItem["tier"] = "ask"): InboxItem => ({
+	id: "p",
+	kind: "decision",
+	tier,
+	state,
+	title: "Send the quote",
+	project: { id: "x", name: "X" },
+	proposal: { summary: "Send it" },
+	confidence: { score: 0.9 },
+	trace: { source: { type: "email", label: "Mail", at: "Mon" }, evidence: [], reasoning: "" },
+});
+
+describe("threadsOf", () => {
+	it("makes one thread of an agent comment and a status change on TSK-7", () => {
+		const threads = threadsOf([
+			entry("c1", "2026-10-22T09:00:00Z", { kind: "agent_response", actor: bot, body: "Drafted" }),
+			entry("s1", "2026-10-22T09:05:00Z", { kind: "status", status: { from: "todo", to: "review" } }),
+		]);
+		expect(threads).toHaveLength(1);
+		expect(threads[0].entries).toHaveLength(2);
+		expect(threads[0].unread).toBe(2);
+		expect(threads[0].subject.ref).toBe("TSK-7");
+		expect(threads[0].latestAt).toBe("2026-10-22T09:05:00Z");
+	});
+
+	it("counts only unread entries", () => {
+		const [thread] = threadsOf([entry("a", "2026-10-22T09:00:00Z", { read: true }), entry("b", "2026-10-22T09:01:00Z")]);
+		expect(thread.unread).toBe(1);
+	});
+
+	it("sorts threads by their latest entry, newest first", () => {
+		const threads = threadsOf([
+			entry("a", "2026-10-22T09:00:00Z"),
+			entry("b", "2026-10-22T11:00:00Z", { subject: tsk9 }),
+			entry("c", "2026-10-22T10:00:00Z", { subject: doc1 }),
+		]);
+		expect(threads.map((t) => t.subject.id)).toEqual(["9", "1", "7"]);
+	});
+
+	it("puts threads with unread entries first on request", () => {
+		const entries = [
+			entry("a", "2026-10-22T09:00:00Z"),
+			entry("b", "2026-10-22T11:00:00Z", { subject: tsk9, read: true }),
+		];
+		expect(threadsOf(entries).map((t) => t.subject.id)).toEqual(["9", "7"]);
+		expect(threadsOf(entries, { unreadFirst: true }).map((t) => t.subject.id)).toEqual(["7", "9"]);
+	});
+
+	it("drops an entry with no subject id", () => {
+		const threads = threadsOf([
+			entry("a", "2026-10-22T09:00:00Z"),
+			entry("b", "2026-10-22T09:01:00Z", { subject: undefined }),
+			entry("c", "2026-10-22T09:02:00Z", { subject: { ...tsk9, id: "" } }),
+		]);
+		expect(threads).toHaveLength(1);
+		expect(threads[0].entries.map((e) => e.id)).toEqual(["a"]);
+	});
+
+	it("sorts a malformed timestamp last, among threads and inside one", () => {
+		const threads = threadsOf([
+			entry("bad", "yesterday", { subject: tsk9 }),
+			entry("ok", "2026-10-22T09:00:00Z"),
+			entry("late", "2026-10-22T09:30:00Z"),
+			entry("junk", "??"),
+		]);
+		expect(threads.map((t) => t.subject.id)).toEqual(["7", "9"]);
+		expect(threads[0].entries.map((e) => e.id)).toEqual(["ok", "late", "junk"]);
+		expect(threads[0].latestAt).toBe("2026-10-22T09:30:00Z");
+	});
+
+	it("keeps a pending proposal and ignores a decided one", () => {
+		const [open] = threadsOf([entry("p", "2026-10-22T09:00:00Z", { kind: "proposal", proposal: proposal() })]);
+		expect(open.pending).toHaveLength(1);
+		const [done] = threadsOf([entry("p", "2026-10-22T09:00:00Z", { kind: "proposal", proposal: proposal("approved") })]);
+		expect(done.pending).toHaveLength(0);
+	});
+});
+
+describe("filterThreads", () => {
+	const threads = threadsOf([
+		entry("a", "2026-10-22T09:00:00Z", { actor: bot }),
+		entry("b", "2026-10-22T10:00:00Z", { subject: doc1 }),
+		entry("p", "2026-10-22T11:00:00Z", { subject: tsk9, kind: "proposal", proposal: proposal() }),
+	]);
+
+	it("filters by type, by who and by needs you", () => {
+		expect(filterThreads(threads, { ...NO_FILTER, type: "doc" }).map((t) => t.subject.id)).toEqual(["1"]);
+		expect(filterThreads(threads, { ...NO_FILTER, who: "Scribe" }).map((t) => t.subject.id)).toEqual(["7"]);
+		expect(filterThreads(threads, { ...NO_FILTER, needsYou: true }).map((t) => t.subject.id)).toEqual(["9"]);
+		expect(filterThreads(threads, NO_FILTER)).toHaveLength(3);
+	});
+});
+
+const press = (key: string, target: EventTarget | null = document.body) =>
+	inboxKeyOf({ key, metaKey: false, ctrlKey: false, altKey: false, defaultPrevented: false, target });
+
+describe("keys", () => {
+	it("maps the nine keys", () => {
+		expect(["j", "k", "u", "h", "a", "d", "s", "e"].map((k) => press(k))).toEqual([
+			"next",
+			"previous",
+			"toggleRead",
+			"snooze",
+			"approve",
+			"decline",
+			"steer",
+			"edit",
+		]);
+		expect(press("x")).toBeNull();
+	});
+
+	it("does nothing for u while typing", () => {
+		for (const tag of ["input", "textarea", "select"]) {
+			expect(press("u", document.createElement(tag))).toBeNull();
+		}
+		const editable = document.createElement("div");
+		Object.defineProperty(editable, "isContentEditable", { value: true });
+		expect(press("u", editable)).toBeNull();
+	});
+
+	it("ignores a held modifier", () => {
+		expect(inboxKeyOf({ key: "u", metaKey: true, ctrlKey: false, altKey: false, defaultPrevented: false, target: document.body })).toBeNull();
+	});
+});
+
+describe("snoozeChoices", () => {
+	it("offers 3 hours on, tomorrow at 9 and the next Monday at 9", () => {
+		const wed = new Date(2026, 9, 21, 14, 30);
+		const [later, tomorrow, nextWeek] = snoozeChoices(wed);
+		expect(later.until.getTime() - wed.getTime()).toBe(3 * 60 * 60 * 1000);
+		expect([tomorrow.until.getDate(), tomorrow.until.getHours()]).toEqual([22, 9]);
+		expect([nextWeek.until.getDay(), nextWeek.until.getDate(), nextWeek.until.getHours()]).toEqual([1, 26, 9]);
+	});
+
+	it("moves a Monday to the following Monday", () => {
+		const mon = new Date(2026, 9, 26, 10, 0);
+		expect(snoozeChoices(mon)[2].until.getDate()).toBe(2);
+	});
+});
+
+describe("entryLine", () => {
+	it("fills the host's own words, French included", () => {
+		const fr = resolveInboxLabels({ statusMoved: "a déplacé ceci de {from} à {to}" });
+		expect(entryLine(entry("s", "2026-10-22T09:00:00Z", { kind: "status", status: { from: "A faire", to: "Revue" } }), fr)).toBe(
+			"a déplacé ceci de A faire à Revue",
+		);
+	});
+});

package/src/inbox/index.ts

@@ -0,0 +1,31 @@
+export { default as ThreadInbox } from "./thread-inbox.svelte";
+export {
+	NO_FILTER,
+	actorNames,
+	entryLine,
+	filterThreads,
+	inboxKeyOf,
+	isPending,
+	resolveInboxLabels,
+	snoozeChoices,
+	subjectTypes,
+	threadsOf,
+} from "./logic.js";
+export type { SnoozeChoice, ThreadsOptions } from "./logic.js";
+export { ALL, DEFAULT_INBOX_LABELS } from "./types.js";
+export type {
+	InboxActor,
+	InboxActorKind,
+	InboxEntry,
+	InboxEntryKind,
+	InboxFilter,
+	InboxKey,
+	InboxLabels,
+	InboxSnooze,
+	InboxSubject,
+	InboxThread,
+} from "./types.js";
+
+// The approval card a pinned proposal is drawn with, and the types its `proposal` field carries.
+export { default as InboxCard } from "../tasks/inbox/inbox-card.svelte";
+export type { InboxItem, InboxVerdict } from "../tasks/inbox/inbox-types.js";