@heyramzi/ui 2.24.0 → 3.1.0

package/src/status/status-badge.svelte

@@ -21,6 +21,8 @@
 		dot?: boolean;
 		/** Shows a spinner: a background job is still working on the record. */
 		busy?: boolean;
+		/** What a screen reader hears after the label while `busy`, since the spinner is hidden. */
+		busyLabel?: string;
 		/** Capitalizes the first letter of each word. Turn off for a name or a number. */
 		capitalize?: boolean;
 		/** The chip's text, for a caller that already has the word. Wins over `label` and the registry. */
@@ -35,6 +37,7 @@
 		tone,
 		dot = false,
 		busy = false,
+		busyLabel = "working",
 		capitalize = true,
 		children,
 		class: className,
@@ -71,9 +74,8 @@
 	class={cn(capitalize && "capitalize", className)}
 	{...restProps}
 >
-	{#if children}
-		{@render children()}
-	{:else}
-		{resolvedLabel}
-	{/if}
+	<!-- One line: a break before the busy note would read as a space before its comma. -->
+	{#if children}{@render children()}{:else}{resolvedLabel}{/if}{#if busy}<span class="sr-only"
+			>, {busyLabel}</span
+		>{/if}
 </StatusPill>

package/src/status/status-badge.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Tone } from "../lib/tone.js";
+import type { Statuses } from "./status-types.js";
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+    /** A registry from `defineStatuses`. Supplies the label and tone. */
+    statuses?: Statuses;
+    /** The status id to look up in `statuses`. Leave it out when you pass `children`. */
+    status?: string;
+    /** Override the registry label. */
+    label?: string;
+    /** Override the registry tone. */
+    tone?: Tone;
+    /** Shows a dot in the tone's colour before the label. */
+    dot?: boolean;
+    /** Shows a spinner: a background job is still working on the record. */
+    busy?: boolean;
+    /** What a screen reader hears after the label while `busy`, since the spinner is hidden. */
+    busyLabel?: string;
+    /** Capitalizes the first letter of each word. Turn off for a name or a number. */
+    capitalize?: boolean;
+    /** The chip's text, for a caller that already has the word. Wins over `label` and the registry. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/status/status-badge.test.ts

@@ -0,0 +1,44 @@
+import { flushSync, mount, unmount } from "svelte";
+import { Check } from "phosphor-svelte";
+import { describe, expect, it } from "vite-plus/test";
+import StatusBadge from "./status-badge.svelte";
+import StatusIcon from "./status-icon.svelte";
+import { defineStatuses } from "./define-statuses.js";
+
+const statuses = defineStatuses({
+  done: { label: "Done", tone: "success", icon: Check },
+  open: { label: "Open", tone: "neutral" },
+});
+
+function render(start: (target: HTMLElement) => Record<string, unknown>) {
+  const target = document.createElement("div");
+  const app = start(target);
+  flushSync();
+  return { target, done: () => void unmount(app) };
+}
+
+// The 10 Nov audit: the busy spinner was hidden with nothing in its place, and a lone status icon had no name.
+describe("status names", () => {
+  it("says the busy state after the label while the spinner stays hidden", () => {
+    const { target, done } = render((target) =>
+      mount(StatusBadge, { target, props: { statuses, status: "open", busy: true } }),
+    );
+    expect(target.textContent?.replace(/\s+/g, " ").trim()).toBe("Open, working");
+    expect(target.querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
+    done();
+  });
+
+  it("names a status icon only when given a label", () => {
+    const named = render((target) =>
+      mount(StatusIcon, { target, props: { statuses, status: "done", label: "Done" } }),
+    );
+    expect(named.target.querySelector("span[role=img]")?.getAttribute("aria-label")).toBe("Done");
+    named.done();
+    const plain = render((target) =>
+      mount(StatusIcon, { target, props: { statuses, status: "done" } }),
+    );
+    expect(plain.target.querySelector("span[role=img]")).toBeNull();
+    expect(plain.target.querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
+    plain.done();
+  });
+});

package/src/status/status-dot.svelte

@@ -135,23 +135,63 @@
 {/if}
 
 <style>
-	.sd {
-		flex-shrink: 0;
-	}
+	@layer theme, base, components, utilities;
 
-	/* The tick and cross read as cut out of the disc. A host sets the mark to its own ground. */
-	.sd-mark {
-		stroke: var(--status-dot-mark, white);
-	}
+	@layer components {
+		.sd {
+			flex-shrink: 0;
+		}
 
-	/* 12 dashes that close evenly: 2 * PI * 5.5 = 34.56, cut into 12 periods of 2.88. */
-	.sd-dashed {
-		stroke-dasharray: 1.3 1.58;
-	}
+		/* The tick and cross read as cut out of the disc. A host sets the mark to its own ground. */
+		.sd-mark {
+			stroke: var(--status-dot-mark, white);
+		}
+
+		/* 12 dashes that close evenly: 2 * PI * 5.5 = 34.56, cut into 12 periods of 2.88. */
+		.sd-dashed {
+			stroke-dasharray: 1.3 1.58;
+		}
+
+		.sd-fill {
+			transform-origin: 7px 7px;
+			animation: sd-fill-in var(--duration-slow) var(--ease-smooth-out) forwards;
+		}
+
+		.sd-pop {
+			transform-origin: 7px 7px;
+			animation: sd-pop-in var(--duration-medium) var(--ease-smooth-out) forwards;
+		}
+
+		.sd-check {
+			stroke-dasharray: 12;
+			stroke-dashoffset: 12;
+			animation: sd-trace var(--duration-medium) var(--ease-smooth-out) var(--duration-quick)
+				forwards;
+		}
+
+		.sd-cross {
+			stroke-dasharray: 6;
+			stroke-dashoffset: 6;
+			animation: sd-trace calc(var(--duration-fast) / 2) var(--ease-smooth-out)
+				var(--duration-quick) forwards;
+		}
+
+		.sd-cross-second {
+			animation-delay: calc(var(--duration-quick) + var(--duration-fast) / 2);
+		}
 
-	.sd-fill {
-		transform-origin: 7px 7px;
-		animation: sd-fill-in var(--duration-slow) var(--ease-smooth-out) forwards;
+		@media (prefers-reduced-motion: reduce) {
+			.sd-fill,
+			.sd-pop,
+			.sd-check,
+			.sd-cross {
+				animation: none;
+			}
+			.sd-check,
+			.sd-cross {
+				stroke-dashoffset: 0;
+			}
+		}
 	}
 
 	@keyframes sd-fill-in {
@@ -165,11 +205,6 @@
 		}
 	}
 
-	.sd-pop {
-		transform-origin: 7px 7px;
-		animation: sd-pop-in var(--duration-medium) var(--ease-smooth-out) forwards;
-	}
-
 	@keyframes sd-pop-in {
 		from {
 			transform: scale(0.4);
@@ -181,39 +216,9 @@
 		}
 	}
 
-	.sd-check {
-		stroke-dasharray: 12;
-		stroke-dashoffset: 12;
-		animation: sd-trace var(--duration-medium) var(--ease-smooth-out) var(--duration-quick) forwards;
-	}
-
-	.sd-cross {
-		stroke-dasharray: 6;
-		stroke-dashoffset: 6;
-		animation: sd-trace calc(var(--duration-fast) / 2) var(--ease-smooth-out) var(--duration-quick)
-			forwards;
-	}
-
-	.sd-cross-second {
-		animation-delay: calc(var(--duration-quick) + var(--duration-fast) / 2);
-	}
-
 	@keyframes sd-trace {
 		to {
 			stroke-dashoffset: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.sd-fill,
-		.sd-pop,
-		.sd-check,
-		.sd-cross {
-			animation: none;
-		}
-		.sd-check,
-		.sd-cross {
-			stroke-dashoffset: 0;
-		}
-	}
 </style>

package/src/status/status-dot.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { StatusDotVariant, Statuses } from "./status-types.js";
+interface Props {
+    /** A registry from `defineStatuses`. Resolves color, variant and progress. */
+    statuses?: Statuses;
+    status?: string;
+    /** Explicit color, overrides the registry and tone. */
+    color?: string;
+    variant?: StatusDotVariant;
+    progress?: number;
+    size?: number;
+    animate?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/status/status-icon.svelte

@@ -10,21 +10,34 @@
 		status: string;
 		size?: number;
 		animate?: boolean;
+		/** Names the icon for a screen reader, like the status word. Leave it out when the word is printed beside it. */
+		label?: string;
 		class?: string;
 	}
 
-	let { statuses, status, size = 14, animate = true, class: className }: Props = $props();
+	let { statuses, status, size = 14, animate = true, label, class: className }: Props = $props();
 
 	// An icon in the map wins; otherwise the status falls back to its dot.
 	let icon = $derived(
-		statuses.icon(status) as Component<{ size?: number; class?: string }> | undefined,
+		statuses.icon(status) as
+			| Component<{ size?: number; class?: string; "aria-hidden"?: boolean | "true" | "false" }>
+			| undefined,
 	);
 	let tone = $derived(statuses.tone(status));
 </script>
 
-{#if icon}
-	{@const Icon = icon}
-	<Icon {size} class={cn("shrink-0", TONE_ICON[tone], className)} />
+{#snippet mark()}
+	{#if icon}
+		{@const Icon = icon}
+		<Icon aria-hidden="true" {size} class={cn("shrink-0", TONE_ICON[tone], className)} />
+	{:else}
+		<StatusDot {statuses} {status} {size} {animate} class={className} />
+	{/if}
+{/snippet}
+
+<!-- Decorative by default: the status word usually sits beside it. Alone, `label` names it. -->
+{#if label}
+	<span role="img" aria-label={label} class="inline-flex shrink-0">{@render mark()}</span>
 {:else}
-	<StatusDot {statuses} {status} {size} {animate} class={className} />
+	{@render mark()}
 {/if}

package/src/status/status-icon.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from "svelte";
+import type { Statuses } from "./status-types.js";
+interface Props {
+    statuses: Statuses;
+    status: string;
+    size?: number;
+    animate?: boolean;
+    /** Names the icon for a screen reader, like the status word. Leave it out when the word is printed beside it. */
+    label?: string;
+    class?: string;
+}
+declare const $$Component: Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/status/status-pill.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Tone } from "../lib/tone.js";
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+    tone?: Tone;
+    /** What sits before the label: a Phosphor icon, a `StatusIcon`, a dot or a spinner. */
+    icon?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/test-setup.test.ts

@@ -0,0 +1,5 @@
+import { MediaQuery } from "svelte/reactivity";
+import { expect, it } from "vite-plus/test";
+it("has matchMedia before any import runs", () => {
+  expect(new MediaQuery("(min-width: 1px)").current).toBe(false);
+});

package/src/thread/thread-body.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    text: string;
+    more: string;
+    less: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/thread/thread-events.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ThreadEvent } from "./types.js";
+interface Props {
+    events: ThreadEvent[];
+    when: (event: ThreadEvent) => string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/thread/thread-focus.svelte.test.ts

@@ -0,0 +1,90 @@
+import { flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import Thread from "./thread.svelte";
+import { DEFAULT_THREAD_LABELS, type ThreadComment } from "./types.js";
+
+const ada = { kind: "user", name: "Ada" } as const;
+
+function comment(id: string, minute: number): ThreadComment {
+  return { id, author: ada, body: `Body ${id}`, createdAt: `2026-10-22T10:0${minute}:00Z` };
+}
+
+function render() {
+  const props = $state({
+    comments: [comment("a", 0), comment("b", 1), comment("c", 2)],
+    canEdit: () => true,
+    onPost: () => {},
+    onEdit: () => {},
+    onDelete: (gone: ThreadComment) => {
+      props.comments = props.comments.filter((c) => c.id !== gone.id);
+    },
+  });
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(Thread, { target, props });
+  flushSync();
+  const q = <E extends Element = HTMLElement>(selector: string) =>
+    target.querySelector(selector) as E | null;
+  return {
+    q,
+    press: (key: string) =>
+      document.activeElement?.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true })),
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+async function settle() {
+  for (let i = 0; i < 4; i++) await tick();
+  flushSync();
+}
+
+const { edit, cancel, save, reply } = DEFAULT_THREAD_LABELS;
+
+describe("Thread focus", () => {
+  it("moves focus into the edit box, and back to Edit on Esc, Cancel and Save", async () => {
+    const { q, press, done } = render();
+    const editOf = () => q(`[data-comment="b"] [aria-label="${edit}"]`);
+    for (const close of ["Escape", cancel, save]) {
+      editOf()?.click();
+      await settle();
+      expect(document.activeElement).toBe(q('[data-thread-edit-box="b"]'));
+      if (close === "Escape") press("Escape");
+      else
+        [...document.querySelectorAll("button")]
+          .find((b) => b.textContent?.trim() === close)
+          ?.click();
+      await settle();
+      expect(q('[data-thread-edit-box="b"]')).toBeNull();
+      expect(document.activeElement).toBe(editOf());
+    }
+    done();
+  });
+
+  it("closes a reply on Esc and puts focus back on its Reply button", async () => {
+    const { q, press, done } = render();
+    q('[data-thread-reply="a"]')?.click();
+    await settle();
+    expect(document.activeElement?.getAttribute("aria-label")).toBe(
+      DEFAULT_THREAD_LABELS.replyPlaceholder,
+    );
+    press("Escape");
+    await settle();
+    expect(document.activeElement).toBe(q('[data-thread-reply="a"]'));
+    expect(document.activeElement?.textContent?.trim()).toBe(reply);
+    done();
+  });
+
+  it("moves focus to the next comment after a delete, then the one before", async () => {
+    const { q, done } = render();
+    q(`[data-comment="b"] [aria-label="${DEFAULT_THREAD_LABELS.delete}"]`)?.click();
+    await settle();
+    expect(document.activeElement).toBe(q('[data-comment="c"]'));
+    q(`[data-comment="c"] [aria-label="${DEFAULT_THREAD_LABELS.delete}"]`)?.click();
+    await settle();
+    expect(document.activeElement).toBe(q('[data-comment="a"]'));
+    done();
+  });
+});

package/src/thread/thread.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from "svelte";
 	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
+	import { focusAfterRender } from "../lib/focus.js";
 	import { shortDate } from "../lib/dates.js";
 	import { initial } from "../lib/initials.js";
 	import { AgentAvatar } from "../agents/index.js";
@@ -91,6 +92,7 @@
 	let sending = $state(false);
 	let editingId = $state<string | null>(null);
 	let editDraft = $state("");
+	let threadEl: HTMLElement | undefined = $state();
 
 	async function post(body: string, parentId: string | null): Promise<boolean> {
 		const text = body.trim();
@@ -105,28 +107,66 @@
 
 	async function sendRoot(): Promise<void> {
 		if (await post(draft, null)) draft = "";
+		// The emptied draft disables Send, which drops focus to the page.
+		if (document.activeElement === document.body) {
+			await focusAfterRender(threadEl, "[data-thread-composer]");
+		}
 	}
 
 	async function sendReply(): Promise<void> {
-		if (await post(replyDraft, replyTo)) {
-			replyDraft = "";
-			replyTo = null;
-		}
+		if (await post(replyDraft, replyTo)) closeReply();
 	}
 
-	function submitOnModEnter(event: KeyboardEvent, send: () => Promise<void>): void {
+	function closeReply(): void {
+		const parentId = replyTo;
+		replyDraft = "";
+		replyTo = null;
+		void focusAfterRender(threadEl, `[data-thread-reply="${CSS.escape(parentId ?? "")}"]`);
+	}
+
+	function onComposerKey(event: KeyboardEvent, send: () => Promise<void>, isReply: boolean): void {
 		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
 			event.preventDefault();
 			void send();
+		} else if (event.key === "Escape" && isReply) {
+			event.preventDefault();
+			closeReply();
 		}
 	}
 
+	function openEdit(comment: ThreadComment): void {
+		editingId = comment.id;
+		editDraft = comment.body;
+		void focusAfterRender(threadEl, `[data-thread-edit-box="${CSS.escape(comment.id)}"]`);
+	}
+
+	function closeEdit(id: string): void {
+		editingId = null;
+		void focusAfterRender(threadEl, `[data-thread-edit="${CSS.escape(id)}"]`);
+	}
+
 	async function saveEdit(comment: ThreadComment): Promise<void> {
 		const body = editDraft.trim();
-		editingId = null;
+		closeEdit(comment.id);
 		if (!body || body === comment.body) return;
 		await onEdit?.(comment, body);
 	}
+
+	// Focus lands on the next comment still shown, then the one before, the composer, the thread.
+	async function remove(comment: ThreadComment): Promise<void> {
+		const ids = [...(threadEl?.querySelectorAll<HTMLElement>("[data-comment]") ?? [])].map(
+			(el) => el.dataset.comment ?? "",
+		);
+		const at = ids.indexOf(comment.id);
+		const around = [...ids.slice(at + 1), ...ids.slice(0, at).reverse()];
+		await onDelete?.(comment);
+		await focusAfterRender(
+			threadEl,
+			...around.map((id) => `[data-comment="${CSS.escape(id)}"]`),
+			"[data-thread-composer]",
+			threadEl,
+		);
+	}
 </script>
 
 {#snippet composer(
@@ -143,11 +183,12 @@
 		<textarea
 			{value}
 			oninput={(event) => set(event.currentTarget.value)}
-			onkeydown={(event) => submitOnModEnter(event, onSend)}
+			onkeydown={(event) => onComposerKey(event, onSend, isReply)}
 			rows={2}
 			{placeholder}
 			aria-label={placeholder}
 			autofocus={isReply}
+			data-thread-composer={isReply ? undefined : ""}
 			class="block max-h-60 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm leading-relaxed outline-none [field-sizing:content] placeholder:text-muted-foreground"
 		></textarea>
 		<div class="flex justify-end px-2 pb-2">
@@ -159,7 +200,11 @@
 {/snippet}
 
 {#snippet row(comment: ThreadComment, isRoot: boolean)}
-	<div class="group/row hover-row relative flex gap-3">
+	<div
+		data-comment={comment.id}
+		tabindex="-1"
+		class="group/row hover-row relative flex gap-3 rounded-md outline-none focus-visible:shadow-(--ring-focus)"
+	>
 		<span class="relative size-6 shrink-0">
 			{#if avatar}
 				{@render avatar(comment)}
@@ -226,10 +271,8 @@
 									size="sm"
 									icon
 									aria-label={labels.edit}
-									onclick={() => {
-										editingId = comment.id;
-										editDraft = comment.body;
-									}}
+									data-thread-edit={comment.id}
+									onclick={() => openEdit(comment)}
 								>
 									<PencilSimple class="size-3.5" aria-hidden="true" />
 								</Button>
@@ -240,7 +283,7 @@
 									size="sm"
 									icon
 									aria-label={labels.delete}
-									onclick={() => onDelete?.(comment)}
+									onclick={() => remove(comment)}
 								>
 									<Trash class="size-3.5" aria-hidden="true" />
 								</Button>
@@ -255,10 +298,16 @@
 					bind:value={editDraft}
 					rows={3}
 					aria-label={labels.edit}
+					data-thread-edit-box={comment.id}
+					onkeydown={(event) => {
+						if (event.key !== "Escape") return;
+						event.preventDefault();
+						closeEdit(comment.id);
+					}}
 					class="mt-1 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:shadow-(--ring-focus)"
 				></textarea>
 				<div class="mt-2 flex justify-end gap-1.5">
-					<Button variant="ghost" size="sm" onclick={() => (editingId = null)}
+					<Button variant="ghost" size="sm" onclick={() => closeEdit(comment.id)}
 						>{labels.cancel}</Button
 					>
 					<Button size="sm" onclick={() => saveEdit(comment)}>{labels.save}</Button>
@@ -278,7 +327,12 @@
 	</div>
 {/snippet}
 
-<section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
+<section
+	bind:this={threadEl}
+	tabindex="-1"
+	aria-label={labels.title}
+	class={cn("flex flex-col gap-3 outline-none", className)}
+>
 	<div class={cn("flex h-7 items-center justify-between", !heading && resolved === 0 && "sr-only")}>
 		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>
 			{labels.title}
@@ -345,6 +399,7 @@
 									variant="ghost"
 									size="sm"
 									class="ms-9 w-fit"
+									data-thread-reply={node.comment.id}
 									onclick={() => {
 										replyTo = node.comment.id;
 										replyDraft = "";

package/src/thread/thread.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from "svelte";
+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>;
+    /** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+    avatar?: Snippet<[ThreadComment]>;
+    /** Content under a comment's body, such as files. */
+    attachments?: Snippet<[ThreadComment]>;
+    /** Replaces the default "Pinned" chip on a comment that has an anchor. */
+    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>;
+    onDelete?: (comment: ThreadComment) => void | Promise<void>;
+    /** Without it a root has no resolve button. */
+    onResolve?: (comment: ThreadComment, resolved: boolean) => void | Promise<void>;
+    /** A click on a pinned comment's chip, to move a canvas to its node. */
+    onAnchor?: (comment: ThreadComment) => void;
+    /** Whose comments carry the edit and delete buttons. A rich comment can't be edited here. */
+    canEdit?: (comment: ThreadComment) => boolean;
+    /** False hides the visible title, for a thread already named by its tab. Screen readers still get it. */
+    heading?: boolean;
+    /** Drawn above the composer, such as a question waiting on an answer. */
+    footer?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;