@heyramzi/ui 2.0.1 → 2.2.0

package/src/editor/renderer.svelte

@@ -1,87 +1,87 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import "./content.css";
-import { renderTiptapContent } from "./serializer.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./content.css";
+	import { renderTiptapContent } from "./serializer.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	content: Record<string, unknown>;
-	/** Optional URL prefix to rewrite in rendered HTML (e.g. storage CDN -> local proxy). */
-	storagePrefix?: string;
-	/** Replacement path for storagePrefix rewrites. */
-	storageReplacement?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		content: Record<string, unknown>;
+		/** Optional URL prefix to rewrite in rendered HTML (e.g. storage CDN -> local proxy). */
+		storagePrefix?: string;
+		/** Replacement path for storagePrefix rewrites. */
+		storageReplacement?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { content, storagePrefix, storageReplacement = "" }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { content, storagePrefix, storageReplacement = "" }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let root = $state<HTMLDivElement | null>(null);
+	// =========================
+	// STATE
+	// =========================
+	let root = $state<HTMLDivElement | null>(null);
 
-// =========================
-// DERIVED
-// =========================
+	// =========================
+	// DERIVED
+	// =========================
 
-// WHY {@html}: the serializer only reads trusted admin CMS JSON, and unlike the
-// old client-only action it renders in SSR, so crawlers see the body. Issue #48.
-let html = $derived.by(() => {
-	if (!content) return "";
-	let rendered = renderTiptapContent(content);
-	if (storagePrefix && storageReplacement !== undefined) {
-		rendered = rendered.replaceAll(storagePrefix, storageReplacement);
-	}
-	return rendered;
-});
+	// WHY {@html}: the serializer only reads trusted admin CMS JSON, and unlike the
+	// old client-only action it renders in SSR, so crawlers see the body. Issue #48.
+	let html = $derived.by(() => {
+		if (!content) return "";
+		let rendered = renderTiptapContent(content);
+		if (storagePrefix && storageReplacement !== undefined) {
+			rendered = rendered.replaceAll(storagePrefix, storageReplacement);
+		}
+		return rendered;
+	});
 
-// =========================
-// EFFECTS
-// =========================
+	// =========================
+	// EFFECTS
+	// =========================
 
-// WHY bound here, not onclick on the div: the facade's real <button> already
-// handles Enter and Space. onclick on the div makes the compiler demand a role.
-$effect(() => {
-	const el = root;
-	if (!el) return;
-	el.addEventListener("click", handleClick);
-	return () => el.removeEventListener("click", handleClick);
-});
+	// WHY bound here, not onclick on the div: the facade's real <button> already
+	// handles Enter and Space. onclick on the div makes the compiler demand a role.
+	$effect(() => {
+		const el = root;
+		if (!el) return;
+		el.addEventListener("click", handleClick);
+		return () => el.removeEventListener("click", handleClick);
+	});
 
-// =========================
-// FUNCTIONS
-// =========================
+	// =========================
+	// FUNCTIONS
+	// =========================
 
-// WHY: the {@html} facade has no Svelte handlers, so this delegated listener swaps
-// a clicked facade for a youtube-nocookie.com iframe: no cookies, no cost until play.
-function handleClick(event: MouseEvent) {
-	const target = event.target as HTMLElement | null;
-	const facade = target?.closest<HTMLElement>(".tiptap-youtube");
-	if (!facade) return;
+	// WHY: the {@html} facade has no Svelte handlers, so this delegated listener swaps
+	// a clicked facade for a youtube-nocookie.com iframe: no cookies, no cost until play.
+	function handleClick(event: MouseEvent) {
+		const target = event.target as HTMLElement | null;
+		const facade = target?.closest<HTMLElement>(".tiptap-youtube");
+		if (!facade) return;
 
-	const videoId = facade.dataset.videoId;
-	if (!videoId) return;
-	const start = facade.dataset.start || "0";
-	const title = facade.querySelector(".tiptap-youtube-title")?.textContent ?? "";
+		const videoId = facade.dataset.videoId;
+		if (!videoId) return;
+		const start = facade.dataset.start || "0";
+		const title = facade.querySelector(".tiptap-youtube-title")?.textContent ?? "";
 
-	const iframe = document.createElement("iframe");
-	iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&start=${start}&rel=0`;
-	iframe.title = title;
-	iframe.setAttribute("frameborder", "0");
-	iframe.setAttribute(
-		"allow",
-		"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
-	);
-	iframe.allowFullscreen = true;
+		const iframe = document.createElement("iframe");
+		iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&start=${start}&rel=0`;
+		iframe.title = title;
+		iframe.setAttribute("frameborder", "0");
+		iframe.setAttribute(
+			"allow",
+			"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+		);
+		iframe.allowFullscreen = true;
 
-	facade.replaceChildren(iframe);
-}
+		facade.replaceChildren(iframe);
+	}
 </script>
 
 <!-- =========================== -->

package/src/editor/slash-menu.svelte

@@ -1,43 +1,38 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { SlashItem } from "./slash-items.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { SlashItem } from "./slash-items.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	items: SlashItem[];
-	pos: { top: number; left: number };
-	selectedIndex: number;
-	/** The menu element, so the parent can close it on an outside click. */
-	el?: HTMLDivElement;
-	onselect: (item: SlashItem) => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		items: SlashItem[];
+		pos: { top: number; left: number };
+		selectedIndex: number;
+		/** The menu element, so the parent can close it on an outside click. */
+		el?: HTMLDivElement;
+		onselect: (item: SlashItem) => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { items, pos, selectedIndex = $bindable(), el = $bindable(), onselect }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { items, pos, selectedIndex = $bindable(), el = $bindable(), onselect }: Props = $props();
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<div
-	bind:this={el}
-	class="slash-menu"
-	style="top: {pos.top}px; left: {pos.left}px;"
-	role="listbox"
->
+<div bind:this={el} class="slash-menu" style="top: {pos.top}px; left: {pos.left}px;" role="listbox">
 	{#each items as item, i}
 		<button
 			type="button"
 			class="slash-item"
 			class:selected={i === selectedIndex}
 			onclick={() => onselect(item)}
-			onpointerenter={() => selectedIndex = i}
+			onpointerenter={() => (selectedIndex = i)}
 			role="option"
 			aria-selected={i === selectedIndex}
 		>
@@ -117,7 +112,9 @@ let { items, pos, selectedIndex = $bindable(), el = $bindable(), onselect }: Pro
 		background: var(--color-muted);
 		color: var(--color-muted-foreground);
 		flex-shrink: 0;
-		transition: background-color var(--duration-micro) var(--ease-smooth-out), color var(--duration-micro) var(--ease-smooth-out);
+		transition:
+			background-color var(--duration-micro) var(--ease-smooth-out),
+			color var(--duration-micro) var(--ease-smooth-out);
 	}
 
 	.slash-item.selected .slash-icon {

package/src/effects/animated-beam/diagrams/BeamSvg.svelte

@@ -17,7 +17,7 @@
 		delay: number;
 		gradientStartColor: string;
 		gradientStopColor: string;
-	};
+	}
 	let {
 		id,
 		class: className,

package/src/effects/image-comparison/ImageComparison.svelte

@@ -200,7 +200,17 @@
 	/>
 	<div class="hr-compare__handle">
 		<span class="hr-compare__grip">
-			<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+			<svg
+				viewBox="0 0 24 24"
+				width="16"
+				height="16"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
 				<polyline points="10 6 4 12 10 18"></polyline>
 				<polyline points="14 6 20 12 14 18"></polyline>
 			</svg>

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte

@@ -1,47 +1,58 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { ArrowRight } from "phosphor-svelte";
-
-// =========================
-// TYPES
-// =========================
-interface Props {
-	href?: string;
-	/** `submit` posts the form the button sits in. */
-	type?: "button" | "submit";
-	disabled?: boolean;
-	size?: "default" | "md" | "sm";
-	tone?: "ink" | "coral";
-	beam?: boolean;
-	dot?: boolean;
-	class?: string;
-	onclick?: (event: MouseEvent) => void;
-	children: import("svelte").Snippet;
-};
-
-// =========================
-// PROPS
-// =========================
-let { href, type = "button", disabled = false, size = "default", tone = "ink", beam = true, dot = true, class: className, onclick, children }: Props = $props();
-
-// =========================
-// DERIVED
-// =========================
-let classes = $derived(
-	[
-		"cta-hover",
-		size === "md" && "cta-hover--md",
-		size === "sm" && "cta-hover--sm",
-		tone === "coral" && "cta-hover--coral",
-		!beam && "cta-hover--no-beam",
-		!dot && "cta-hover--no-dot",
-		className,
-	]
-		.filter(Boolean)
-		.join(" "),
-);
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ArrowRight } from "phosphor-svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		href?: string;
+		/** `submit` posts the form the button sits in. */
+		type?: "button" | "submit";
+		disabled?: boolean;
+		size?: "default" | "md" | "sm";
+		tone?: "ink" | "coral";
+		beam?: boolean;
+		dot?: boolean;
+		class?: string;
+		onclick?: (event: MouseEvent) => void;
+		children: import("svelte").Snippet;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		href,
+		type = "button",
+		disabled = false,
+		size = "default",
+		tone = "ink",
+		beam = true,
+		dot = true,
+		class: className,
+		onclick,
+		children,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let classes = $derived(
+		[
+			"cta-hover",
+			size === "md" && "cta-hover--md",
+			size === "sm" && "cta-hover--sm",
+			tone === "coral" && "cta-hover--coral",
+			!beam && "cta-hover--no-beam",
+			!dot && "cta-hover--no-dot",
+			className,
+		]
+			.filter(Boolean)
+			.join(" "),
+	);
 </script>
 
 <!-- =========================== -->
@@ -123,8 +134,8 @@ let classes = $derived(
 		background: conic-gradient(
 			transparent 0deg,
 			transparent 220deg,
-			oklch(0.65 0.20 30) 280deg,
-			oklch(0.82 0.10 30) 320deg,
+			oklch(0.65 0.2 30) 280deg,
+			oklch(0.82 0.1 30) 320deg,
 			transparent 360deg
 		);
 		transform: translate(-50%, -50%);
@@ -230,7 +241,9 @@ let classes = $derived(
 		justify-content: center;
 		gap: 8px;
 		width: 100%;
-		transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out);
+		transition:
+			opacity var(--duration-fast) var(--ease-smooth-out),
+			transform var(--duration-fast) var(--ease-smooth-out);
 	}
 
 	/* signal-600, not signal-400: the dot becomes the hover fill under a paper

package/src/effects/magic-card/MagicCard.css

@@ -6,9 +6,20 @@
     box-shadow 300ms ease;
 }
 
-.magic-card:hover {
-  border-color: color-mix(in oklch, var(--magic-card-glow, var(--color-primary)) 30%, var(--color-border));
-  box-shadow: 0 0 0 1px color-mix(in oklch, var(--magic-card-glow, var(--color-primary)) 8%, transparent);
+@media (hover: hover) and (pointer: fine) {
+  .magic-card:hover {
+    border-color: color-mix(
+      in oklch,
+      var(--magic-card-glow, var(--color-primary)) 30%,
+      var(--color-border)
+    );
+    box-shadow: 0 0 0 1px
+      color-mix(in oklch, var(--magic-card-glow, var(--color-primary)) 8%, transparent);
+  }
+
+  .magic-card:hover .magic-card__glow {
+    opacity: 1;
+  }
 }
 
 .magic-card:focus-within {
@@ -35,10 +46,6 @@
   );
 }
 
-.magic-card:hover .magic-card__glow {
-  opacity: 1;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .magic-card,
   .magic-card__glow {

package/src/effects/marquee/Marquee.svelte

@@ -25,8 +25,8 @@
 		/** Waits this many ms before the first scroll starts. */
 		delay?: number;
 		/**
-		 * Scrolls only while the content is longer than the box, for a line of text with a max width.
-		 * The box shrinks to its content, drops its padding, and shows one still copy when it fits.
+		 * Scrolls only while the content overflows the box; when it fits, the box shrinks to it,
+		 * drops its padding and shows one still copy.
 		 */
 		overflowOnly?: boolean;
 		style?: string;
@@ -73,9 +73,7 @@
 	let still = $derived(overflowOnly && !overflowing);
 	// WHY: two copies loop seamlessly once one copy is wider than the box.
 	let copies = $derived(overflowOnly ? (overflowing ? 2 : 1) : repeat);
-	let loopSeconds = $derived(
-		speed && trackSize > 0 ? (trackSize + gapSize) / speed : undefined,
-	);
+	let loopSeconds = $derived(speed && trackSize > 0 ? (trackSize + gapSize) / speed : undefined);
 
 	// WHY: only emit the CSS vars that were passed as props, so a consumer can
 	// still override timing or spacing with a `[--duration:24s]` utility class.

package/src/effects/reveal/observe.ts

@@ -36,9 +36,6 @@ export function observeInView(
 /**
  * Svelte action that calls back when the node enters or leaves the viewport.
  * Options are read at call time, so a `use:onInView={...}` update swaps the callbacks.
- *
- * @example
- * <section use:onInView={{ amount: 0.2, onEnter: () => (visible = true) }}>
  */
 export const onInView: Action<HTMLElement, InViewActionOptions | undefined> = (node, initial) => {
   let options = initial ?? {};

package/src/effects/spotlight/Spotlight.svelte

@@ -11,7 +11,7 @@
 	interface Props {
 		class?: string;
 		fill?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/effects/theme-toggle/ThemeToggle.css

@@ -8,17 +8,16 @@
   color: color-mix(in oklch, var(--color-background) 70%, transparent);
 }
 
-.theme-toggle--inverted:hover {
-  border-color: color-mix(in oklch, var(--color-background) 40%, transparent);
-  background: color-mix(in oklch, var(--color-background) 12%, transparent);
-  color: var(--color-background);
+@media (hover: hover) and (pointer: fine) {
+  .theme-toggle--inverted:hover {
+    border-color: color-mix(in oklch, var(--color-background) 40%, transparent);
+    background: color-mix(in oklch, var(--color-background) 12%, transparent);
+    color: var(--color-background);
+  }
 }
 
-/* The slide variant: a pill track with a thumb that moves to the active side.
-   A caller sets brand colours with custom properties on the class:
-   --theme-toggle-thumb-light, --theme-toggle-thumb-dark, --theme-toggle-track,
-   --theme-toggle-track-hover, --theme-toggle-sun, --theme-toggle-moon,
-   --theme-toggle-thumb-icon and --theme-toggle-glow. */
+/* The slide variant, a pill track with a moving thumb; a caller sets brand
+   colours through the `--theme-toggle-*` custom properties on this class. */
 .theme-toggle-slide {
   --tt-thumb: 1.5rem;
   --tt-pad: 0.25rem;
@@ -46,12 +45,18 @@
   --tt-thumb: 2rem;
 }
 
-.theme-toggle-slide:hover {
-  background: var(
-    --theme-toggle-track-hover,
-    color-mix(in oklch, var(--color-foreground) 20%, transparent)
-  );
-  box-shadow: 0 0 15px color-mix(in oklch, var(--theme-toggle-glow, transparent) 30%, transparent);
+@media (hover: hover) and (pointer: fine) {
+  .theme-toggle-slide:hover {
+    background: var(
+      --theme-toggle-track-hover,
+      color-mix(in oklch, var(--color-foreground) 20%, transparent)
+    );
+    box-shadow: 0 0 15px color-mix(in oklch, var(--theme-toggle-glow, transparent) 30%, transparent);
+  }
+
+  .theme-toggle-slide:hover .theme-toggle-slide__glow {
+    opacity: 1;
+  }
 }
 
 .theme-toggle-slide:active {
@@ -77,10 +82,6 @@
   transition: opacity 500ms;
 }
 
-.theme-toggle-slide:hover .theme-toggle-slide__glow {
-  opacity: 1;
-}
-
 .theme-toggle-slide[data-state="dark"] {
   --tt-glow-x: 75%;
 }
@@ -130,7 +131,9 @@
   border-radius: 9999px;
   background: var(--tt-thumb-color);
   color: var(--theme-toggle-thumb-icon, var(--color-primary-foreground));
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
   transition:
     transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
     background-color 500ms;
@@ -164,12 +167,12 @@
 
 .theme-toggle-slide__mark--moon {
   opacity: 0;
-  transform: scale(0) rotate(-90deg);
+  transform: scale(0.9) rotate(-90deg);
 }
 
 .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--sun {
   opacity: 0;
-  transform: scale(0) rotate(90deg);
+  transform: scale(0.9) rotate(90deg);
 }
 
 .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--moon {

package/src/effects/theme-toggle/ThemeToggle.svelte

@@ -53,12 +53,7 @@
 	let active = $derived(mode ?? (isDark ? "dark" : "light"));
 	let style = $derived(inverted ? "inverted" : variant);
 	let text = $derived(
-		label ??
-			(mode
-				? `Theme: ${mode}`
-				: isDark
-					? "Switch to light mode"
-					: "Switch to dark mode"),
+		label ?? (mode ? `Theme: ${mode}` : isDark ? "Switch to light mode" : "Switch to dark mode"),
 	);
 
 	// =========================
@@ -97,7 +92,11 @@
 		<span class="theme-toggle-slide__thumb" aria-hidden="true">
 			<span class="theme-toggle-slide__ring"></span>
 			<Sun size={14} weight="fill" class="theme-toggle-slide__mark theme-toggle-slide__mark--sun" />
-			<Moon size={14} weight="fill" class="theme-toggle-slide__mark theme-toggle-slide__mark--moon" />
+			<Moon
+				size={14}
+				weight="fill"
+				class="theme-toggle-slide__mark theme-toggle-slide__mark--moon"
+			/>
 		</span>
 		<span class="sr-only">{text}</span>
 	</button>

package/src/gallery.test.ts

@@ -51,21 +51,31 @@ describe("site gallery coverage", () => {
   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)] : [],
+        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 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([]);
+    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]);
     expect(listed.length).toBeGreaterThan(0);
-    expect(listed.filter((name) => !existsSync(join(SITE, "shadcn-demos", `${name}.svelte`)))).toEqual([]);
+    expect(
+      listed.filter((name) => !existsSync(join(SITE, "shadcn-demos", `${name}.svelte`))),
+    ).toEqual([]);
   });
 });

package/src/inbox/README.md

@@ -0,0 +1,27 @@
+# @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.