@heyramzi/ui 2.8.0 → 2.9.0

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";

package/src/inbox/logic.ts

@@ -1,8 +1,9 @@
-import { isOpen, isTyping } from "../tasks/inbox/inbox-logic.js";
+import { isOpen, isTyping } from "../work/inbox/inbox-logic.js";
 import {
   ALL,
   DEFAULT_INBOX_LABELS,
   type InboxEntry,
+  type InboxEntryKind,
   type InboxFilter,
   type InboxKey,
   type InboxLabels,
@@ -97,13 +98,15 @@ export function subjectTypes(threads: InboxThread[]): string[] {
 }
 
 export function actorNames(threads: InboxThread[]): string[] {
-  return [...new Set(threads.flatMap((thread) => thread.entries.map((entry) => entry.actor.name)))];
+  return [
+    ...new Set(threads.flatMap((thread) => thread.entries.map((entry) => entry.actor.name))),
+  ].filter(Boolean);
 }
 
 type KeyEventLike = Pick<
   KeyboardEvent,
   "key" | "metaKey" | "ctrlKey" | "altKey" | "defaultPrevented" | "target"
->;
+> & { shiftKey?: boolean; code?: string };
 
 const KEYS: Record<string, InboxKey> = {
   j: "next",
@@ -113,13 +116,20 @@ const KEYS: Record<string, InboxKey> = {
   a: "approve",
   d: "decline",
   s: "steer",
+  S: "unfollow",
   e: "edit",
 };
 
-/** What a key press asks for, or null when it isn't ours: a modifier is held, or focus is in a text field. */
+/**
+ * What a key press asks for, or null when it isn't ours: focus is in a text field, or a modifier
+ * other than Linear's Shift+S, Shift+Backspace and Alt+U is held.
+ */
 export function inboxKeyOf(event: KeyEventLike): InboxKey | null {
-  if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return null;
+  if (event.defaultPrevented || event.metaKey || event.ctrlKey) return null;
   if (isTyping(event.target)) return null;
+  // Option+U on a Mac types a dead key, so the physical key decides.
+  if (event.altKey) return event.code === "KeyU" && !event.shiftKey ? "readAll" : null;
+  if (event.key === "Backspace") return event.shiftKey ? "clearRead" : "clear";
   return KEYS[event.key] ?? null;
 }
 
@@ -167,3 +177,17 @@ export function entryLine(entry: InboxEntry, labels: InboxLabels): string {
       return labels.commented;
   }
 }
+
+/** An entry as a sentence: who, then what. With no known actor it starts with the verb, capitalised. */
+export function sentenceOf(entry: InboxEntry, labels: InboxLabels): string {
+  const line = entryLine(entry, labels);
+  if (entry.actor.name) return `${entry.actor.name} ${line}`;
+  return line.charAt(0).toUpperCase() + line.slice(1);
+}
+
+/** What happened to the subject, as against something a person wrote. */
+const EVENT_KINDS: ReadonlySet<InboxEntryKind> = new Set(["status", "assigned", "proposal"]);
+
+export function isEvent(entry: InboxEntry): boolean {
+  return EVENT_KINDS.has(entry.kind);
+}