@heyramzi/ui 2.8.0 → 2.10.0

package/src/thread/thread.svelte

@@ -2,15 +2,25 @@
 	import type { Snippet } from "svelte";
 	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
+	import { initial } from "../lib/initials.js";
 	import { AgentAvatar } from "../agents/index.js";
-	import { TONE_CLASS } from "../lib/tone.js";
 	import RichRenderer from "../editor/renderer.svelte";
 	import { Skeleton } from "../shadcn/skeleton/index.js";
-	import { buildThread, fillCount, resolveThreadLabels, resolvedCount } from "./logic.js";
-	import type { ThreadComment, ThreadLabels, ThreadPost } from "./types.js";
+	import ThreadBody from "./thread-body.svelte";
+	import ThreadEvents from "./thread-events.svelte";
+	import {
+		buildThread,
+		fillCount,
+		interleave,
+		resolveThreadLabels,
+		resolvedCount,
+	} from "./logic.js";
+	import type { ThreadComment, ThreadEvent, ThreadLabels, ThreadPost } from "./types.js";
 
 	interface Props {
 		comments: ThreadComment[];
+		/** Status moves, assignments and the like, one quiet line each between the comments. */
+		events?: ThreadEvent[];
 		/** Rows still on their way. Draws skeleton rows in place of the thread. */
 		loading?: boolean;
 		labels?: Partial<ThreadLabels>;
@@ -22,6 +32,10 @@
 		anchorChip?: Snippet<[ThreadComment]>;
 		/** How a timestamp reads. Defaults to a short date. */
 		when?: (comment: ThreadComment) => string;
+		/** How an event's time reads. Defaults to a short date. */
+		whenEvent?: (event: ThreadEvent) => string;
+		/** The locale the default times read in. */
+		locale?: string;
 		/** Returns false to keep the draft. Without it no composer shows. */
 		onPost?: (post: ThreadPost) => void | boolean | Promise<void | boolean>;
 		onEdit?: (comment: ThreadComment, body: string) => void | Promise<void>;
@@ -37,13 +51,15 @@
 
 	let {
 		comments,
+		events = [],
+		locale = "en-GB",
 		loading = false,
 		labels: labelOverrides,
 		avatar,
 		attachments,
 		anchorChip,
-		when = (comment) =>
-			new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+		when = (comment) => shortDate(comment.createdAt),
+		whenEvent = (event) => shortDate(event.at),
 		onPost,
 		onEdit,
 		onDelete,
@@ -58,6 +74,11 @@
 	let resolved = $derived(resolvedCount(nodes));
 	let showResolved = $state(false);
 	let shown = $derived(showResolved ? nodes : nodes.filter((node) => !node.comment.resolved));
+	let items = $derived(interleave(shown, events));
+
+	function shortDate(at: string): string {
+		return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(new Date(at));
+	}
 
 	let draft = $state("");
 	let replyTo = $state<string | null>(null);
@@ -101,10 +122,6 @@
 		if (!body || body === comment.body) return;
 		await onEdit?.(comment, body);
 	}
-
-	function initial(name: string): string {
-		return name.trim().charAt(0).toLocaleUpperCase() || "?";
-	}
 </script>
 
 {#snippet composer(
@@ -164,14 +181,7 @@
 			<div class="flex min-h-6 flex-wrap items-center gap-x-2">
 				<span class="truncate text-[13px] font-medium">{comment.author.name}</span>
 				{#if comment.author.kind === "agent"}
-					<span
-						class={cn(
-							"inline-flex h-5 items-center rounded-sm border px-1.5 text-xs font-medium",
-							TONE_CLASS.accent,
-						)}
-					>
-						{labels.agent}
-					</span>
+					<span class="sr-only">{labels.agent}</span>
 				{/if}
 				<span class="text-xs text-muted-foreground tabular-nums">{when(comment)}</span>
 				{#if comment.edited}
@@ -254,7 +264,7 @@
 			{:else if comment.content}
 				<div class="text-sm leading-relaxed"><RichRenderer content={comment.content} /></div>
 			{:else}
-				<p class="text-sm leading-relaxed whitespace-pre-wrap text-pretty">{comment.body}</p>
+				<ThreadBody text={comment.body} more={labels.showMore} less={labels.showLess} />
 			{/if}
 
 			{@render attachments?.(comment)}
@@ -289,49 +299,54 @@
 				</li>
 			{/each}
 		</ol>
-	{:else if shown.length > 0}
+	{:else if items.length > 0}
 		<ol class="flex flex-col gap-4">
-			{#each shown as node (node.comment.id)}
-				<li
-					class={cn("flex flex-col gap-3", node.comment.resolved && "opacity-60")}
-					data-resolved={node.comment.resolved || undefined}
-				>
-					{@render row(node.comment, true)}
-					{#if node.comment.resolved}
-						<span class="ms-9 text-xs text-muted-foreground">{labels.resolved}</span>
-					{/if}
-					{#if node.replies.length > 0}
-						<ol class="ms-3 flex flex-col gap-3 border-s border-border ps-6">
-							{#each node.replies as reply (reply.id)}
-								<li>{@render row(reply, false)}</li>
-							{/each}
-						</ol>
-					{/if}
-					{#if onPost && !node.comment.resolved}
-						{#if replyTo === node.comment.id}
-							<div class="ms-9">
-								{@render composer(
-									replyDraft,
-									labels.replyPlaceholder,
-									sendReply,
-									(next) => (replyDraft = next),
-									true,
-								)}
-							</div>
-						{:else}
-							<button
-								type="button"
-								class="thread-button ms-9 flex w-fit items-center gap-1.5"
-								onclick={() => {
-									replyTo = node.comment.id;
-									replyDraft = "";
-								}}
-							>
-								<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
-							</button>
+			{#each items as item (item.key)}
+				{#if item.type === "events"}
+					<li><ThreadEvents events={item.events} when={whenEvent} /></li>
+				{:else}
+					{@const node = item.node}
+					<li
+						class={cn("flex flex-col gap-3", node.comment.resolved && "opacity-60")}
+						data-resolved={node.comment.resolved || undefined}
+					>
+						{@render row(node.comment, true)}
+						{#if node.comment.resolved}
+							<span class="ms-9 text-xs text-muted-foreground">{labels.resolved}</span>
 						{/if}
-					{/if}
-				</li>
+						{#if node.replies.length > 0}
+							<ol class="ms-3 flex flex-col gap-3 border-s border-border ps-6">
+								{#each node.replies as reply (reply.id)}
+									<li>{@render row(reply, false)}</li>
+								{/each}
+							</ol>
+						{/if}
+						{#if onPost && !node.comment.resolved}
+							{#if replyTo === node.comment.id}
+								<div class="ms-9">
+									{@render composer(
+										replyDraft,
+										labels.replyPlaceholder,
+										sendReply,
+										(next) => (replyDraft = next),
+										true,
+									)}
+								</div>
+							{:else}
+								<button
+									type="button"
+									class="thread-button ms-9 flex w-fit items-center gap-1.5"
+									onclick={() => {
+										replyTo = node.comment.id;
+										replyDraft = "";
+									}}
+								>
+									<ArrowBendDownRight class="size-3.5" aria-hidden="true" />{labels.reply}
+								</button>
+							{/if}
+						{/if}
+					</li>
+				{/if}
 			{/each}
 		</ol>
 	{:else if !onPost}

package/src/thread/types.ts

@@ -1,3 +1,5 @@
+import type { PhosphorIcon } from "../lib/icon-types.js";
+
 export type ThreadAuthorKind = "user" | "agent";
 
 export type ThreadAuthor = {
@@ -47,6 +49,21 @@ export type ThreadNode = {
   replies: ThreadComment[];
 };
 
+/** Something that happened to the subject, drawn as one quiet line between comments. */
+export type ThreadEvent = {
+  id: string;
+  /** The whole sentence, actor first: "Project Manager moved this from Open to In progress". */
+  title: string;
+  /** ISO timestamp. */
+  at: string;
+  icon?: PhosphorIcon;
+};
+
+/** The thread in time order: a conversation, or a run of events between two of them. */
+export type ThreadItem =
+  | { type: "node"; key: string; node: ThreadNode }
+  | { type: "events"; key: string; events: ThreadEvent[] };
+
 export type ThreadLabels = {
   title: string;
   empty: string;
@@ -68,6 +85,8 @@ export type ThreadLabels = {
   hideResolved: string;
   agent: string;
   pinned: string;
+  showMore: string;
+  showLess: string;
 };
 
 export const DEFAULT_THREAD_LABELS: ThreadLabels = {
@@ -90,4 +109,6 @@ export const DEFAULT_THREAD_LABELS: ThreadLabels = {
   hideResolved: "Hide resolved",
   agent: "AI",
   pinned: "Pinned",
+  showMore: "Show more",
+  showLess: "Show less",
 };

package/src/{tasks → work}/README.md

@@ -1,9 +1,12 @@
-# @heyramzi/ui/tasks
+# @heyramzi/ui/work
 
-Svelte 5 task views. One array of tasks shows as a drag-and-drop board, a
-grouped list or a gantt timeline, and the same column config drives all three.
-Status badges, dots and icons come from one map too. Live at
-[ui.heyramzi.com/tasks](https://ui.heyramzi.com/tasks).
+Svelte 5 work views: tasks and the docs that sit beside them. One array of
+tasks shows as a drag-and-drop board, a grouped list or a gantt timeline, and
+the same column config drives all three. Status badges, dots and icons come
+from one map too. Live at [ui.heyramzi.com/work](https://ui.heyramzi.com/work).
+
+Status badges and the side panel live in `@heyramzi/ui/status` and
+`@heyramzi/ui/panel`.
 
 Every view knows nothing about your data. You pass items and a few accessors,
 and it hands back a change to persist. It is a subpath of `@heyramzi/ui` and builds on its primitives and on
@@ -24,7 +27,7 @@ isn't a drop target (an Overdue lane, say).
 
 ```svelte
 <script lang="ts">
-  import { KanbanBoard, type KanbanMove } from "@heyramzi/ui/tasks";
+  import { KanbanBoard, type KanbanMove } from "@heyramzi/ui/work";
 
   type Task = { id: string; column: string; title: string; order: string };
 
@@ -204,7 +207,7 @@ icon, so `ChartBarHorizontal` stands in.
 `SidePanel` is a sheet for one record: a title, a description, status chips, doors
 out to other tools (`openIn`), a copy-a-prompt `handoff`, a strip of `stats`, then
 the body and an optional pinned `footer`. You pass the tools; the panel knows none.
-Import it from `@heyramzi/ui/panel`, or from `@heyramzi/ui/tasks` for now.
+Import it from `@heyramzi/ui/panel`, or from `@heyramzi/ui/work` for now.
 
 ```svelte
 <SidePanel
@@ -263,7 +266,7 @@ and fetches nothing. You pass entries in and persist what it hands back.
 | `locale`, `labels`, `class` | | `labels` overrides any string in `DEFAULT_TIME_LABELS`. |
 
 Alt+S starts and stops the timer. A screen reader hears the start, one update a
-minute and the stop. Import it alone from `@heyramzi/ui/tasks/time`.
+minute and the stop. Import it alone from `@heyramzi/ui/work/time`.
 
 For boards and lists: `TimeChip` (`minutes`, `estimate?`, `running?`) shows the
 logged total, with a pulsing dot while a timer runs and a small ring against an

package/src/{tasks → work}/detail/task-thread.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { PencilSimple, Trash } from "phosphor-svelte";
-	import { cn } from "../../lib/utils.js";
+	import { initial } from "../../lib/initials.js";
 	import { AgentAvatar } from "../../agents/index.js";
-	import { TONE_CLASS } from "../../lib/tone.js";
 	import { Skeleton } from "../../shadcn/skeleton/index.js";
 	import {
 		DEFAULT_TASK_DETAIL_LABELS,
@@ -22,6 +21,8 @@
 		avatar?: Snippet<[TaskComment]>;
 		/** How a timestamp reads. Defaults to a short date. */
 		when?: (comment: TaskComment) => string;
+		/** The locale the default times read in. */
+		locale?: string;
 		/** Returns false to keep the draft. Without it the composer is hidden. */
 		onSend?: (body: string) => void | boolean | Promise<void | boolean>;
 		onEdit?: (comment: TaskComment, body: string) => void | Promise<void>;
@@ -35,8 +36,11 @@
 		labels: labelOverrides,
 		agentAvatar,
 		avatar,
+		locale = "en-GB",
 		when = (comment) =>
-			new Date(comment.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+			new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(
+				new Date(comment.createdAt),
+			),
 		onSend,
 		onEdit,
 		onDelete,
@@ -79,10 +83,6 @@
 		if (!body || body === comment.body) return;
 		await onEdit?.(comment, body);
 	}
-
-	function initial(name: string): string {
-		return name.trim().charAt(0).toLocaleUpperCase() || "?";
-	}
 </script>
 
 <section aria-label={labels.comments} class="flex flex-col gap-3">
@@ -132,14 +132,7 @@
 						<div class="flex h-6 items-center gap-2">
 							<span class="truncate text-[13px] font-medium">{comment.author}</span>
 							{#if comment.agent}
-								<span
-									class={cn(
-										"inline-flex h-5 items-center rounded-sm border px-1.5 text-xs font-medium",
-										TONE_CLASS.accent,
-									)}
-								>
-									{labels.ai}
-								</span>
+								<span class="sr-only">{labels.ai}</span>
 							{/if}
 							<span class="text-xs text-muted-foreground tabular-nums">{when(comment)}</span>
 							{#if comment.edited}

package/src/work/docs/doc-editor-page.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Editor } from "@tiptap/core";
+	import { FileText } from "phosphor-svelte";
+	import type { Snippet } from "svelte";
+	import OnThisPage from "../../components/docs/on-this-page.svelte";
+	import { ScrollSpy } from "../../components/docs/scroll-spy.svelte.js";
+	import RichEditor from "../../editor/editor.svelte";
+	import { docLabels, type DocLabels } from "./labels.js";
+	import { outlineOfDoc, type OutlineHeading } from "./outline.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** The title, edited in place. */
+		title: string;
+		/** The body as Tiptap JSON. Read once: wrap the page in `{#key doc.id}` to swap documents. */
+		content?: Record<string, unknown> | null;
+		onchange?: (json: Record<string, unknown>) => void;
+		ontitle?: (title: string) => void;
+		/** Focus the title on open: a doc that was just created. */
+		autofocusTitle?: boolean;
+		/** Parent icon, parent title › this doc. */
+		breadcrumb?: Snippet;
+		/** Sits beside the breadcrumb: the star, the `…` menu. */
+		menu?: Snippet;
+		/** Right side of the bar, before the actions: the "Edited" chip. */
+		meta?: Snippet;
+		/** Right side of the bar: copy link, subscribe. */
+		actions?: Snippet;
+		/** The tile above the title. Defaults to a document glyph. */
+		icon?: Snippet;
+		/** A heading's link was copied; show the toast here. */
+		oncopylink?: (url: string, id: string) => void;
+		labels?: Partial<DocLabels>;
+		/** The live editor, to focus it or read it. */
+		instance?: Editor | null;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		title = $bindable(""),
+		content = null,
+		onchange,
+		ontitle,
+		autofocusTitle = false,
+		breadcrumb,
+		menu,
+		meta,
+		actions,
+		icon,
+		oncopylink,
+		labels: labelOverrides,
+		instance = $bindable(null),
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let scroller = $state<HTMLElement | null>(null);
+	let titleField = $state<HTMLTextAreaElement | null>(null);
+	let outline = $state<OutlineHeading[]>(outlineOfDoc(untrackedContent()));
+	const spy = new ScrollSpy();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let t = $derived(docLabels(labelOverrides));
+
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => spy.attach(scroller, outline));
+
+	$effect(() => {
+		if (autofocusTitle) titleField?.focus();
+	});
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	// The first outline reads the prop once; later ones come from the editor's own changes.
+	function untrackedContent() {
+		return content;
+	}
+
+	function handleChange(json: Record<string, unknown>) {
+		outline = outlineOfDoc(json);
+		onchange?.(json);
+	}
+
+	function onTitleKey(event: KeyboardEvent) {
+		if (event.key === "Enter" || (event.key === "ArrowDown" && !event.shiftKey)) {
+			event.preventDefault();
+			instance?.commands.focus("start");
+		}
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class="@container/doc flex h-full min-h-0 flex-col bg-background text-foreground">
+	<header
+		class="flex h-11 shrink-0 items-center gap-2 border-b border-border/70 px-3 @2xl/doc:px-4"
+	>
+		<div class="flex min-w-0 flex-1 items-center gap-1 text-[13px]">
+			{#if breadcrumb}{@render breadcrumb()}{/if}
+			{#if menu}{@render menu()}{/if}
+		</div>
+		<div class="flex shrink-0 items-center gap-1">
+			{#if meta}{@render meta()}{/if}
+			{#if actions}{@render actions()}{/if}
+		</div>
+	</header>
+
+	<div class="relative min-h-0 flex-1">
+		{#if outline.length > 0}
+			<!-- Wide: ticks in the left gutter, centred on the pane. -->
+			<div class="absolute top-1/2 left-1 z-20 hidden -translate-y-1/2 @4xl/doc:block">
+				<OnThisPage
+					variant="ticks"
+					items={outline}
+					active={spy.active}
+					label={t.outline}
+					onselect={(id) => spy.jump(id)}
+				/>
+			</div>
+			<!-- Narrow: the strip the reading pages use, since a phone has no gutter. -->
+			<div
+				class="absolute inset-x-0 top-0 z-20 border-b border-border/70 bg-background/95 backdrop-blur @4xl/doc:hidden"
+			>
+				<OnThisPage
+					variant="bar"
+					items={outline}
+					active={spy.active}
+					label={t.outline}
+					onselect={(id) => spy.jump(id)}
+				/>
+			</div>
+		{/if}
+
+		<div bind:this={scroller} class="thin-scrollbar h-full overflow-y-auto">
+			<div
+				class="mx-auto w-full max-w-[56rem] px-5 pb-40 @2xl/doc:px-8 {outline.length > 0
+					? 'pt-[3.75rem] @4xl/doc:pt-14'
+					: 'pt-8 @2xl/doc:pt-14'}"
+			>
+				<div
+					class="mb-4 flex size-12 items-center justify-center rounded-xl border border-border bg-muted/40 text-muted-foreground"
+				>
+					{#if icon}{@render icon()}{:else}<FileText size={22} aria-hidden="true" />{/if}
+				</div>
+
+				<textarea
+					bind:this={titleField}
+					bind:value={title}
+					oninput={() => ontitle?.(title)}
+					onkeydown={onTitleKey}
+					rows="1"
+					spellcheck="false"
+					aria-label={t.titlePlaceholder}
+					placeholder={t.titlePlaceholder}
+					class="doc-title mb-6 block w-full resize-none border-0 bg-transparent p-0 font-heading text-2xl leading-8 font-semibold tracking-tight text-foreground caret-brand outline-none focus-visible:shadow-none placeholder:text-muted-foreground/45"
+				></textarea>
+
+				<RichEditor
+					{content}
+					onchange={handleChange}
+					variant="page"
+					preset="full"
+					placeholder=""
+					minHeight="20rem"
+					copyLinkLabel={t.copyLink}
+					{oncopylink}
+					bind:instance
+				/>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	/* The title grows with its text, so a long one wraps instead of scrolling sideways. */
+	.doc-title {
+		field-sizing: content;
+		text-wrap: balance;
+	}
+</style>