@heyramzi/ui 2.8.0 → 2.10.0

package/src/editor/doc-page.css

@@ -0,0 +1,389 @@
+/* A document's type, scoped to `.doc-surface` so other editors keep theirs: 15/24 body,
+   19 and 17 for the two heading steps. */
+
+.doc-surface .tiptap {
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  font-weight: 450;
+  letter-spacing: -0.003em;
+  color: var(--color-foreground);
+  caret-color: var(--color-brand);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The page is the writing surface, so it takes no ring of its own; the caret is the focus. */
+.doc-surface .tiptap:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.doc-surface .tiptap :is(h1, h2, h3, h4) {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: -0.012em;
+  color: var(--color-foreground);
+  scroll-margin-top: 1.5rem;
+}
+
+.doc-surface .tiptap h1 {
+  font-size: 1.375rem;
+  line-height: calc(28 / 22);
+  margin: 2.25rem 0 0.5rem;
+}
+
+.doc-surface .tiptap h2 {
+  font-size: 1.1875rem;
+  line-height: calc(26 / 19);
+  margin: 2rem 0 0.375rem;
+}
+
+.doc-surface .tiptap h3 {
+  font-size: 1.0625rem;
+  line-height: calc(24 / 17);
+  margin: 1.5rem 0 0.25rem;
+}
+
+.doc-surface .tiptap h4 {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin: 1.25rem 0 0.25rem;
+}
+
+.doc-surface .tiptap > :first-child {
+  margin-top: 0;
+}
+
+.doc-surface .tiptap p {
+  margin: 0 0 0.5rem;
+}
+
+.doc-surface .tiptap :is(ul, ol) {
+  margin: 0 0 0.5rem;
+  padding-left: 1.5rem;
+}
+
+.doc-surface .tiptap li {
+  margin: 0;
+}
+
+.doc-surface .tiptap li > p {
+  margin: 0;
+}
+
+.doc-surface .tiptap li::marker {
+  color: var(--color-muted-foreground);
+}
+
+.doc-surface .tiptap a {
+  color: var(--color-foreground);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--color-foreground) 35%, transparent);
+  text-underline-offset: 3px;
+}
+
+.doc-surface .tiptap :not(pre) > code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-xs);
+  background: color-mix(in oklab, var(--color-foreground) 7%, transparent);
+}
+
+.doc-surface .tiptap blockquote {
+  margin: 0.75rem 0;
+  padding-left: 1rem;
+  font-style: normal;
+  color: var(--color-foreground);
+}
+
+.doc-surface .tiptap blockquote::before {
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: color-mix(in oklab, var(--color-foreground) 22%, transparent);
+}
+
+.doc-surface .tiptap hr {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: 1.5rem 0;
+}
+
+/* ---- Checklist ---- */
+.doc-surface .tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] ul[data-type="taskList"] {
+  padding-left: 1.625rem;
+  margin-bottom: 0;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li > label {
+  position: relative;
+  display: flex;
+  height: 1.5rem;
+  align-items: center;
+  user-select: none;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li > div {
+  min-width: 0;
+  flex: 1;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li input[type="checkbox"] {
+  appearance: none;
+  margin: 0;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  border: 1.5px solid color-mix(in oklab, var(--color-foreground) 32%, transparent);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.75rem;
+  transition:
+    background-color var(--duration-fast) var(--ease-smooth-out),
+    border-color var(--duration-fast) var(--ease-smooth-out);
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li input[type="checkbox"]:checked {
+  border-color: var(--color-brand);
+  background-color: var(--color-brand);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 5 8.8l4.5-5'/%3E%3C/svg%3E");
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li input[type="checkbox"]:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
+  outline-offset: 2px;
+}
+
+.doc-surface .tiptap ul[data-type="taskList"] > li[data-checked="true"] > div {
+  color: var(--color-muted-foreground);
+}
+
+/* ---- Table ---- */
+.doc-surface .tiptap .tableWrapper {
+  overflow-x: auto;
+  margin: 0.75rem 0 1rem;
+}
+
+.doc-surface .tiptap table {
+  width: 100%;
+  margin: 0.75rem 0 1rem;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: 0.875rem;
+  line-height: calc(20 / 14);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.doc-surface .tiptap .tableWrapper table {
+  margin: 0;
+}
+
+.doc-surface .tiptap :is(th, td) {
+  position: relative;
+  padding: 0.5rem 0.75rem;
+  vertical-align: top;
+  text-align: left;
+  border-right: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.doc-surface .tiptap :is(th, td):last-child {
+  border-right: 0;
+}
+
+.doc-surface .tiptap tr:last-child > :is(th, td) {
+  border-bottom: 0;
+}
+
+/* Beats the blog renderer's uppercase header row and bold first column. */
+.doc-surface .tiptap table tr > :is(th, td) {
+  font-size: 0.875rem;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  background: transparent;
+  color: var(--color-foreground);
+}
+
+.doc-surface .tiptap table tr > th {
+  font-weight: 550;
+  background: color-mix(in oklab, var(--color-foreground) 3.5%, transparent);
+}
+
+.doc-surface .tiptap table tr:not(:first-child) > td:first-child {
+  font-weight: 400;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .doc-surface .tiptap table tr:hover > td {
+    background: transparent;
+  }
+}
+
+.doc-surface .tiptap :is(th, td) > p {
+  margin: 0;
+}
+
+.doc-surface .tiptap .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: color-mix(in oklab, var(--color-brand) 14%, transparent);
+}
+
+/* ---- Code block: line numbers, language label ---- */
+.doc-surface .tiptap pre {
+  position: relative;
+  margin: 0.75rem 0 1rem;
+  padding: 0.75rem 1rem 0.75rem 3.25rem;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: calc(20 / 13);
+  font-weight: 400;
+  tab-size: 2;
+}
+
+.doc-surface .tiptap pre::before {
+  content: attr(data-lines);
+  position: absolute;
+  top: 0.75rem;
+  left: 0;
+  width: 2.25rem;
+  white-space: pre;
+  text-align: right;
+  color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  user-select: none;
+}
+
+.doc-surface .tiptap pre code {
+  display: block;
+  min-width: max-content;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+
+.doc-surface .tiptap .code-language {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.5rem;
+  appearance: none;
+  height: 1.375rem;
+  padding: 0 0.5rem;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-muted-foreground);
+  font-family: var(--font-sans);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--duration-fast) var(--ease-smooth-out),
+    background-color var(--duration-fast) var(--ease-smooth-out);
+}
+
+.doc-surface .tiptap pre:focus-within .code-language,
+.doc-surface .tiptap .code-language:focus-visible {
+  opacity: 1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .doc-surface .tiptap pre:hover .code-language {
+    opacity: 1;
+  }
+
+  .doc-surface .tiptap .code-language:hover {
+    background: color-mix(in oklab, var(--color-foreground) 7%, transparent);
+    color: var(--color-foreground);
+  }
+}
+
+@media (hover: none) {
+  .doc-surface .tiptap .code-language {
+    opacity: 1;
+  }
+}
+
+/* ---- Heading anchor ---- */
+.doc-surface .tiptap .heading-anchor {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  margin-left: 0.625rem;
+  padding: 0 0.375rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-muted-foreground);
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 450;
+  letter-spacing: 0;
+  vertical-align: 0.1em;
+  cursor: pointer;
+  opacity: 0;
+  user-select: none;
+  transition:
+    opacity var(--duration-fast) var(--ease-smooth-out),
+    color var(--duration-fast) var(--ease-smooth-out);
+}
+
+.doc-surface .tiptap .heading-anchor[data-copied="true"] {
+  color: var(--color-brand);
+  opacity: 1;
+}
+
+.doc-surface .tiptap .heading-anchor:focus-visible {
+  opacity: 1;
+  outline: 2px solid color-mix(in oklab, var(--color-brand) 55%, transparent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .doc-surface .tiptap .has-anchor:hover .heading-anchor {
+    opacity: 1;
+  }
+
+  .doc-surface .tiptap .heading-anchor:hover {
+    color: var(--color-foreground);
+  }
+}
+
+@media (hover: none) {
+  .doc-surface .tiptap .heading-anchor {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .doc-surface .tiptap :is(.heading-anchor, .code-language, input[type="checkbox"]) {
+    transition: none;
+  }
+}

package/src/editor/editor.svelte

@@ -5,6 +5,7 @@
 	import { Editor } from "@tiptap/core";
 	import { untrack } from "svelte";
 	import "./content.css";
+	import "./doc-page.css";
 	import { buildExtensions } from "./extensions.js";
 	import { buildSlashItems, type SlashItem } from "./slash-items.js";
 	import { parseYoutubeUrl } from "./youtube-url.js";
@@ -22,6 +23,17 @@
 		minHeight?: string;
 		preset?: "full" | "notes";
 		blockIds?: boolean;
+		/**
+		 * `box` is the framed editor with a toolbar. `page` is a document: no frame, no toolbar,
+		 * type set by `.doc-surface` (see doc-page.css), heading anchors on.
+		 */
+		variant?: "box" | "page";
+		/** The word on a heading's hover button, for `page`. */
+		copyLinkLabel?: string;
+		/** A heading's link was copied. */
+		oncopylink?: (url: string, id: string) => void;
+		/** The live editor, for a host that needs focus or the document. */
+		instance?: Editor | null;
 	}
 
 	// =========================
@@ -34,6 +46,10 @@
 		minHeight = "28rem",
 		preset = "full",
 		blockIds = false,
+		variant = "box",
+		copyLinkLabel = "Copy link",
+		oncopylink,
+		instance = $bindable(null),
 	}: Props = $props();
 
 	// =========================
@@ -59,6 +75,11 @@
 	// DERIVED
 	// =========================
 	let editor: Editor | null = $derived(tick >= 0 ? editorInstance : null);
+	let isPage = $derived(variant === "page");
+
+	$effect(() => {
+		instance = editorInstance;
+	});
 
 	let slashItems = $derived.by((): SlashItem[] =>
 		editor
@@ -204,7 +225,12 @@
 	function mount() {
 		if (!editorElement || editorInstance) return;
 
-		const extensions = buildExtensions({ preset, placeholder, blockIds });
+		const extensions = buildExtensions({
+			preset,
+			placeholder,
+			blockIds,
+			anchors: variant === "page" ? { label: copyLinkLabel, oncopy: oncopylink } : false,
+		});
 
 		editorInstance = new Editor({
 			element: editorElement,
@@ -309,10 +335,14 @@
 <!-- =========================== -->
 <div
 	class="editor-wrapper"
-	class:focused={editor?.isFocused}
+	class:focused={editor?.isFocused && !isPage}
+	class:page={isPage}
+	class:doc-surface={isPage}
 	style="--editor-min-height: {minHeight};"
 >
-	<EditorToolbar {editor} {tick} {preset} onInsertYoutube={insertYoutubeVideo} />
+	{#if !isPage}
+		<EditorToolbar {editor} {tick} {preset} onInsertYoutube={insertYoutubeVideo} />
+	{/if}
 
 	<!-- Editor surface -->
 	<div bind:this={editorElement} class="editor-surface tiptap-content"></div>
@@ -334,7 +364,7 @@
 	{/if}
 
 	<!-- Status bar -->
-	{#if editor}
+	{#if editor && !isPage}
 		<div class="status-bar">
 			<span class="status-hint">Type <kbd>/</kbd> for commands</span>
 		</div>
@@ -361,12 +391,24 @@
 		box-shadow: 0 0 0 3px oklch(from var(--color-brand) l c h / 0.06);
 	}
 
+	/* A document page owns its frame, so the editor draws none. */
+	.editor-wrapper.page {
+		border: 0;
+		border-radius: 0;
+		background: transparent;
+	}
+
+	.editor-wrapper.page .editor-surface :global(.tiptap) {
+		outline: none;
+		min-height: var(--editor-min-height, 28rem);
+	}
+
 	/* ---- EDITOR SURFACE ---- */
 	.editor-surface {
 		min-height: var(--editor-min-height, 28rem);
 	}
 
-	.editor-surface :global(.tiptap) {
+	.editor-wrapper:not(.page) .editor-surface :global(.tiptap) {
 		padding: 2rem 2.5rem;
 		outline: none;
 		min-height: var(--editor-min-height, 28rem);

package/src/editor/extensions.ts

@@ -3,7 +3,10 @@ import { StarterKit } from "@tiptap/starter-kit";
 import { Image } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { DragHandle } from "@tiptap/extension-drag-handle";
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 import { BlockIdExtension } from "./block-id.js";
+import { CodeBlockChrome, HeadingAnchors } from "./doc-blocks.js";
 
 const CmsBlock = TiptapNode.create({
   name: "cmsBlock",
@@ -127,17 +130,38 @@ export type ExtensionOptions = {
   preset: "full" | "notes";
   placeholder: string;
   blockIds: boolean;
+  /** A document page: heading anchors with a hover "Copy link", and the label for it. */
+  anchors?: { label: string; oncopy?: (url: string, id: string) => void } | false;
 };
 
 /** The extension list for a preset: `full` adds CMS blocks, YouTube, images and H4. */
-export function buildExtensions({ preset, placeholder, blockIds }: ExtensionOptions): Extensions {
+export function buildExtensions({
+  preset,
+  placeholder,
+  blockIds,
+  anchors = false,
+}: ExtensionOptions): Extensions {
   const full = preset === "full";
   return dedupeExtensions([
     StarterKit.configure({
       heading: { levels: full ? [1, 2, 3, 4] : [1, 2, 3] },
       link: { openOnClick: false },
     }),
-    ...(full ? [CmsBlock, Youtube, Image.configure({ inline: false })] : []),
+    ...(full
+      ? [
+          CmsBlock,
+          Youtube,
+          Image.configure({ inline: false }),
+          TaskList,
+          TaskItem.configure({ nested: true }),
+          Table.configure({ resizable: false }),
+          TableRow,
+          TableHeader,
+          TableCell,
+          CodeBlockChrome,
+        ]
+      : []),
+    ...(anchors ? [HeadingAnchors.configure(anchors)] : []),
     Placeholder.configure({ placeholder }),
     dragHandle(),
     ...(blockIds ? [BlockIdExtension] : []),

package/src/editor/markdown.ts

@@ -392,6 +392,28 @@ function youtubeToMd(node: TiptapNode): string {
 
 const dropped: MdWriter = () => "";
 
+function taskBullet(item: TiptapNode): string {
+  return item.attrs?.checked === true ? "- [x]" : "- [ ]";
+}
+
+// GFM pipe table. The first row is the header; a cell holds its paragraphs on one line.
+function tableToMd(node: TiptapNode): string {
+  const rows = (node.content ?? []).map((row) =>
+    (row.content ?? []).map((cell) =>
+      (cell.content ?? [])
+        .map((block) => inlineToMd(block.content ?? []))
+        .join(" ")
+        .replace(/\|/g, "\\|"),
+    ),
+  );
+  if (rows.length === 0) return "";
+  const width = Math.max(...rows.map((row) => row.length));
+  const line = (cells: string[]) =>
+    `| ${Array.from({ length: width }, (_, i) => cells[i] ?? "").join(" | ")} |`;
+  const rule = `| ${Array.from({ length: width }, () => "---").join(" | ")} |`;
+  return [line(rows[0]), rule, ...rows.slice(1).map(line)].join("\n");
+}
+
 const MD_WRITERS: Record<string, MdWriter> = {
   paragraph: (node) => inlineToMd(node.content ?? []),
   heading: headingToMd,
@@ -405,10 +427,13 @@ const MD_WRITERS: Record<string, MdWriter> = {
   horizontalRule: () => "---",
   hardBreak: () => "  \n",
   youtube: youtubeToMd,
-  // WHY: images, cmsBlock and tables are out of scope for the notes bridge.
+  taskList: (node, listDepth) =>
+    (node.content ?? []).map((item) => listItemToMd(item, taskBullet(item), listDepth)).join("\n"),
+  taskItem: (node, listDepth) => listItemContentsToMd(node, listDepth),
+  table: tableToMd,
+  // WHY: images and cmsBlock are out of scope for the notes bridge.
   image: dropped,
   cmsBlock: dropped,
-  table: dropped,
   tableRow: dropped,
   tableCell: dropped,
   tableHeader: dropped,

package/src/editor/slash-items.ts

@@ -12,6 +12,8 @@ import {
   ImageSquare,
   Paragraph,
   VideoCamera,
+  ListChecks,
+  Table,
 } from "phosphor-svelte";
 
 export type SlashItem = {
@@ -62,6 +64,22 @@ export function buildSlashItems(editor: Editor, query: string, options: SlashOpt
       icon: ListNumbers,
       command: () => run().toggleOrderedList().run(),
     },
+    ...(full
+      ? [
+          {
+            label: "Checklist",
+            description: "Tasks with checkboxes",
+            icon: ListChecks,
+            command: () => run().toggleTaskList().run(),
+          },
+          {
+            label: "Table",
+            description: "Rows and columns",
+            icon: Table,
+            command: () => run().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+          },
+        ]
+      : []),
     {
       label: "Quote",
       description: "Blockquote",

package/src/icons/trades.ts

@@ -15,7 +15,7 @@
  */
 
 /*
- * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not legacy ` @tabler/icons-svelte`).
+ * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
  */
 
 import {

package/src/inbox/README.md

@@ -21,7 +21,9 @@ One threaded inbox. Entries from any source (a comment, a status change, an assi
 - **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.
+- **Keys.** `j` and `k` move, `u` marks the thread read (or unread when nothing is unread) and Alt+U marks everything read, `h` opens the snooze row (`1`, `2`, `3` pick a time) or brings a snoozed thread back, Shift+S unfollows, Backspace clears the thread and Shift+Backspace clears every read one, and `a`, `d`, `s`, `e` act on the pinned proposal. These are Linear's keys. A key does nothing while focus is in an input, a textarea, a select or an editable element, or while Cmd or Ctrl is held. `inboxKeyOf(event)` is the same check.
+- **Clear.** `onClear(thread)` takes a thread out of the inbox and opens the next one. `onClearRead(threads)` gets every thread with nothing unread. A thread holding a pending proposal is never cleared. The host decides what cleared means (Linear archives, so it can be undone) and stops passing the entries. The buttons and the hint show only when the callback is passed.
+- **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. With `onShowSnoozed` the filter offers "Show snoozed": the host sets `showSnoozed`, passes the snoozed entries with `subject.snoozedUntil`, and `onUnsnooze(thread)` brings one back.
+- **Read.** `onRead(thread, read)` is true when the thread had unread entries, so the host marks them all read. `onReadAll()` marks every thread read.
+- **Unfollow.** `onUnfollow(thread)` shows on a thread whose `subject.followed` is set. The host stops new notifications for it.
+- **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. Below the pinned card the thread draws through `@heyramzi/ui/thread`: comments as comments, status moves and assignments as event lines. `threadLabels` gives that thread its words, and the `attachments` snippet draws under a comment.

package/src/inbox/inbox.test.ts

@@ -9,7 +9,7 @@ import {
   threadsOf,
 } from "./logic.js";
 import type { InboxEntry, InboxSubject } from "./types.js";
-import type { InboxItem } from "../tasks/inbox/inbox-types.js";
+import type { InboxItem } from "../work/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" };

package/src/inbox/index.ts

@@ -27,5 +27,5 @@ export type {
 } 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";
+export { default as InboxCard } from "../work/inbox/inbox-card.svelte";
+export type { InboxItem, InboxVerdict } from "../work/inbox/inbox-types.js";