@heyramzi/ui 2.0.1 → 2.1.0

package/src/inbox/thread-inbox.svelte

@@ -0,0 +1,363 @@
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+	import { ArrowLeft, BellSlash, Circle, Envelope, EnvelopeOpen } from "phosphor-svelte";
+	import { AgentAvatar } from "../agents/index.js";
+	import { Badge } from "../shadcn/badge/index.js";
+	import { Button } from "../shadcn/button/index.js";
+	import * as Empty from "../shadcn/empty/index.js";
+	import { Kbd, KbdGroup } from "../shadcn/kbd/index.js";
+	import { ToggleGroup, ToggleGroupItem } from "../shadcn/toggle-group/index.js";
+	import { cn } from "../lib/utils.js";
+	import { TONE_CLASS } from "../lib/tone.js";
+	import InboxCard from "../tasks/inbox/inbox-card.svelte";
+	import type { InboxItem, InboxVerdict } from "../tasks/inbox/inbox-types.js";
+	import {
+		NO_FILTER,
+		actorNames,
+		entryLine,
+		filterThreads,
+		inboxKeyOf,
+		resolveInboxLabels,
+		snoozeChoices,
+		subjectTypes,
+		threadsOf,
+	} from "./logic.js";
+	import {
+		ALL,
+		type InboxActor,
+		type InboxEntry,
+		type InboxFilter,
+		type InboxLabels,
+		type InboxSnooze,
+		type InboxSubject,
+		type InboxThread,
+	} from "./types.js";
+
+	interface Props {
+		entries: InboxEntry[];
+		/** The key of the open thread. Without a match the first thread opens. */
+		selected?: string;
+		/** Threads with unread entries come first. */
+		unreadFirst?: boolean;
+		labels?: Partial<InboxLabels>;
+		/** Display names for subject types, such as `{ task: "Tasks" }`. A missing type shows as written. */
+		typeLabels?: Record<string, string>;
+		/** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+		avatar?: Snippet<[InboxActor]>;
+		/** A badge for the subject's status, drawn by the host with its own status map. */
+		status?: Snippet<[InboxSubject]>;
+		/** Replaces a pinned proposal's summary lines. */
+		renderProposal?: Snippet<[InboxItem]>;
+		/** How a timestamp reads. Defaults to a short date and time. */
+		when?: (at: string) => string;
+		onSelect?: (thread: InboxThread) => void;
+		/** `read` is true when the thread had unread entries, so the host marks them all read. */
+		onRead?: (thread: InboxThread, read: boolean) => void;
+		onSnooze?: (request: InboxSnooze) => void;
+		onDecide?: (verdict: InboxVerdict, thread: InboxThread) => void;
+		class?: string;
+	}
+
+	let {
+		entries,
+		selected = $bindable(),
+		unreadFirst = false,
+		labels: labelOverrides,
+		typeLabels = {},
+		avatar,
+		status,
+		renderProposal,
+		when = (at) => {
+			const date = new Date(at);
+			return Number.isNaN(date.getTime())
+				? ""
+				: date.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+		},
+		onSelect,
+		onRead,
+		onSnooze,
+		onDecide,
+		class: className,
+	}: Props = $props();
+
+	let labels = $derived(resolveInboxLabels(labelOverrides));
+	let filter = $state<InboxFilter>({ ...NO_FILTER });
+	let snoozing = $state(false);
+	let detailOpen = $state(false);
+	let cards = $state<Record<string, ReturnType<typeof InboxCard> | null>>({});
+
+	let all = $derived(threadsOf(entries, { unreadFirst }));
+	let visible = $derived(filterThreads(all, filter));
+	let types = $derived(subjectTypes(all));
+	let people = $derived(actorNames(all));
+	let current = $derived(visible.find((thread) => thread.key === selected) ?? visible[0]);
+	let needsYouCount = $derived(all.filter((thread) => thread.pending.length > 0).length);
+	let filtered = $derived(filter.type !== ALL || filter.who !== ALL || filter.needsYou);
+	let pinned = $derived(current?.pending[0]);
+	let timeline = $derived(current?.entries.filter((entry) => !current.pending.includes(entry)) ?? []);
+
+	function open(thread: InboxThread): void {
+		selected = thread.key;
+		snoozing = false;
+		detailOpen = true;
+		onSelect?.(thread);
+	}
+
+	async function move(step: number): Promise<void> {
+		if (!visible.length) return;
+		const from = current ? visible.indexOf(current) : -1;
+		const next = visible[Math.max(0, Math.min(visible.length - 1, from + step))];
+		open(next);
+		detailOpen = false;
+		await tick();
+		document.querySelector<HTMLElement>(`[data-thread-key="${CSS.escape(next.key)}"]`)?.focus();
+	}
+
+	function toggleRead(): void {
+		if (current) onRead?.(current, current.unread > 0);
+	}
+
+	function snooze(until: Date): void {
+		if (current) onSnooze?.({ thread: current, until });
+		snoozing = false;
+	}
+
+	function onkeydown(event: KeyboardEvent): void {
+		if (snoozing && !event.defaultPrevented && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			const choice = snoozeChoices(new Date())[Number(event.key) - 1];
+			if (choice) {
+				event.preventDefault();
+				snooze(choice.until);
+				return;
+			}
+			if (event.key === "Escape") {
+				snoozing = false;
+				return;
+			}
+		}
+		const key = inboxKeyOf(event);
+		if (!key) return;
+		const card = pinned ? cards[pinned.id] : null;
+		const actions = {
+			next: () => move(1),
+			previous: () => move(-1),
+			toggleRead,
+			snooze: () => (snoozing = !snoozing),
+			approve: () => card?.approve(),
+			decline: () => card?.decline(),
+			steer: () => card?.steer(),
+			edit: () => card?.edit(),
+		};
+		event.preventDefault();
+		actions[key]();
+	}
+
+	function setType(next: string | undefined): void {
+		filter = { ...filter, type: next || ALL };
+	}
+
+	function snoozeLabel(id: string): string {
+		return id === "later" ? labels.snoozeLater : id === "tomorrow" ? labels.snoozeTomorrow : labels.snoozeNextWeek;
+	}
+
+	function initial(name: string): string {
+		return name.trim().charAt(0).toLocaleUpperCase() || "?";
+	}
+
+	function lastEntry(thread: InboxThread): InboxEntry {
+		return thread.entries[thread.entries.length - 1];
+	}
+</script>
+
+{#snippet face(actor: InboxActor)}
+	<span class="relative size-6 shrink-0">
+		{#if avatar}
+			{@render avatar(actor)}
+		{:else if actor.kind === "agent"}
+			<AgentAvatar name={actor.name} size={24} paused interactive={false} />
+		{:else if actor.avatar}
+			<img src={actor.avatar} alt="" class="size-6 rounded-full object-cover" />
+		{:else}
+			<span class="grid size-6 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground" aria-hidden="true">
+				{initial(actor.name)}
+			</span>
+		{/if}
+	</span>
+{/snippet}
+
+<!-- WHY the key handler sits on the region: the shortcuts work wherever focus is inside the inbox and nowhere else on the page. -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div role="region" aria-label={labels.title} class={cn("flex h-full min-h-0 flex-col gap-3", className)} {onkeydown}>
+	<div class="flex flex-wrap items-center gap-2">
+		<ToggleGroup type="single" variant="outline" size="sm" value={filter.type} onValueChange={setType} aria-label={labels.filterType}>
+			<ToggleGroupItem value={ALL}>{labels.all}</ToggleGroupItem>
+			{#each types as type (type)}
+				<ToggleGroupItem value={type}>{typeLabels[type] ?? type}</ToggleGroupItem>
+			{/each}
+		</ToggleGroup>
+		<select
+			aria-label={labels.filterWho}
+			value={filter.who}
+			onchange={(event) => (filter = { ...filter, who: event.currentTarget.value })}
+			class="h-7 rounded-lg border border-border bg-background px-2 text-[0.8rem] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 any-pointer-coarse:h-10"
+		>
+			<option value={ALL}>{labels.anyone}</option>
+			{#each people as name (name)}
+				<option value={name}>{name}</option>
+			{/each}
+		</select>
+		<Button
+			size="sm"
+			variant={filter.needsYou ? "default" : "outline"}
+			aria-pressed={filter.needsYou}
+			onclick={() => (filter = { ...filter, needsYou: !filter.needsYou })}
+		>
+			{labels.needsYou}
+			<span class="tabular-nums opacity-70">{needsYouCount}</span>
+		</Button>
+	</div>
+
+	<div class="grid min-h-0 flex-1 gap-3 md:grid-cols-[20rem_minmax(0,1fr)]">
+		<ol class={cn("-mx-1 min-h-0 flex-col gap-1 overflow-y-auto px-1 pb-1", detailOpen ? "max-md:hidden md:flex" : "flex")} aria-label={labels.title}>
+			{#each visible as thread (thread.key)}
+				{@const last = lastEntry(thread)}
+				<li>
+					<button
+						type="button"
+						data-thread-key={thread.key}
+						aria-current={current?.key === thread.key}
+						onclick={() => open(thread)}
+						class={cn(
+							"flex w-full flex-col gap-1 rounded-lg border border-transparent p-2.5 text-start outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+							current?.key === thread.key ? "border-border bg-muted" : "hover:bg-muted/50",
+						)}
+					>
+						<span class="flex items-center gap-2">
+							{#if thread.unread > 0}
+								<Circle weight="fill" class="size-2 shrink-0 text-primary" aria-hidden="true" />
+							{/if}
+							{#if thread.subject.ref}
+								<span class="text-xs text-muted-foreground tabular-nums">{thread.subject.ref}</span>
+							{/if}
+							<span class={cn("truncate text-sm", thread.unread > 0 ? "font-medium" : "")}>{thread.subject.title}</span>
+							<span class="ms-auto shrink-0 text-xs text-muted-foreground tabular-nums">{when(thread.latestAt)}</span>
+						</span>
+						<span class="flex items-center gap-2 ps-4 text-xs text-muted-foreground">
+							<span class="truncate">{last.actor.name} {entryLine(last, labels)}</span>
+							{#if thread.pending.length > 0}
+								<span class={cn("ms-auto inline-flex h-5 shrink-0 items-center rounded-sm border px-1.5 font-medium", TONE_CLASS.warning)}>
+									{labels.needsYou}
+								</span>
+							{:else if thread.unread > 0}
+								<Badge variant="outline" class="ms-auto tabular-nums" aria-label="{thread.unread} {labels.unread}">{thread.unread}</Badge>
+							{/if}
+						</span>
+					</button>
+				</li>
+			{:else}
+				<li class="h-full">
+					<Empty.Root class="h-full">
+						<Empty.Header>
+							<Empty.Title>
+								{filtered ? (filter.needsYou ? labels.emptyNeedsYou : labels.emptyFiltered) : labels.empty}
+							</Empty.Title>
+						</Empty.Header>
+						{#if filtered}
+							<Empty.Content>
+								<Button size="sm" variant="outline" onclick={() => (filter = { ...NO_FILTER })}>{labels.clearFilters}</Button>
+							</Empty.Content>
+						{/if}
+					</Empty.Root>
+				</li>
+			{/each}
+		</ol>
+
+		<section
+			class={cn("min-h-0 flex-col gap-4 overflow-y-auto rounded-xl border border-border p-4", detailOpen ? "flex" : "max-md:hidden md:flex")}
+			aria-label={current?.subject.title ?? labels.selectThread}
+		>
+			{#if current}
+				<header class="flex flex-wrap items-center gap-2">
+					<Button size="sm" variant="ghost" class="md:hidden" onclick={() => (detailOpen = false)} aria-label={labels.title}>
+						<ArrowLeft aria-hidden="true" />
+					</Button>
+					{#if current.subject.ref}
+						<span class="text-xs text-muted-foreground tabular-nums">{current.subject.ref}</span>
+					{/if}
+					<h2 class="min-w-0 truncate text-sm font-medium">
+						{#if current.subject.href}
+							<a href={current.subject.href} class="hover:underline">{current.subject.title}</a>
+						{:else}
+							{current.subject.title}
+						{/if}
+					</h2>
+					{@render status?.(current.subject)}
+					<span class="ms-auto flex items-center gap-1">
+						<Button size="sm" variant="ghost" onclick={toggleRead} aria-keyshortcuts="u">
+							{#if current.unread > 0}
+								<EnvelopeOpen aria-hidden="true" />{labels.markRead}
+							{:else}
+								<Envelope aria-hidden="true" />{labels.markUnread}
+							{/if}
+						</Button>
+						<Button size="sm" variant="ghost" onclick={() => (snoozing = !snoozing)} aria-expanded={snoozing} aria-keyshortcuts="h">
+							<BellSlash aria-hidden="true" />{labels.snooze}
+						</Button>
+					</span>
+				</header>
+
+				{#if snoozing}
+					<div class="flex flex-wrap gap-2" role="group" aria-label={labels.snooze}>
+						{#each snoozeChoices(new Date()) as choice, index (choice.id)}
+							<Button size="sm" variant="outline" onclick={() => snooze(choice.until)}>
+								<Kbd>{index + 1}</Kbd>{snoozeLabel(choice.id)}
+							</Button>
+						{/each}
+					</div>
+				{/if}
+
+				{#each current.pending as entry (entry.id)}
+					<InboxCard
+						bind:this={cards[entry.id]}
+						item={entry.proposal!}
+						selected={entry === pinned}
+						onverdict={(verdict) => onDecide?.(verdict, current)}
+						{renderProposal}
+					/>
+				{/each}
+
+				<ol class="flex flex-col gap-4">
+					{#each timeline as entry (entry.id)}
+						<li class={cn("flex gap-3", !entry.read && "font-medium")}>
+							{@render face(entry.actor)}
+							<div class="min-w-0 flex-1">
+								<div class="flex flex-wrap items-center gap-x-2 text-[13px]">
+									<span class="truncate font-medium">{entry.actor.name}</span>
+									{#if entry.actor.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>
+									{/if}
+									<span class="font-normal text-muted-foreground">{entryLine(entry, labels)}</span>
+									<span class="ms-auto text-xs font-normal text-muted-foreground tabular-nums">{when(entry.at)}</span>
+								</div>
+								{#if entry.body}
+									<p class="mt-1 text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty">{entry.body}</p>
+								{/if}
+							</div>
+						</li>
+					{/each}
+				</ol>
+			{:else}
+				<p class="text-sm text-muted-foreground">{labels.selectThread}</p>
+			{/if}
+		</section>
+	</div>
+
+	<footer class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground max-sm:hidden">
+		<span class="inline-flex items-center gap-1.5"><KbdGroup><Kbd>j</Kbd><Kbd>k</Kbd></KbdGroup> {labels.hintMove}</span>
+		<span class="inline-flex items-center gap-1.5"><Kbd>u</Kbd> {labels.hintRead}</span>
+		<span class="inline-flex items-center gap-1.5"><Kbd>h</Kbd> {labels.hintSnooze}</span>
+		<span class="inline-flex items-center gap-1.5"><KbdGroup><Kbd>a</Kbd><Kbd>d</Kbd><Kbd>s</Kbd><Kbd>e</Kbd></KbdGroup> {labels.hintAct}</span>
+	</footer>
+</div>

package/src/inbox/types.ts

@@ -0,0 +1,139 @@
+import type { InboxItem } from "../tasks/inbox/inbox-types.js";
+
+export type InboxActorKind = "user" | "agent";
+
+export type InboxActor = {
+	kind: InboxActorKind;
+	name: string;
+	/** Image URL for a person. The host's own portrait goes through the `avatar` snippet. */
+	avatar?: string;
+};
+
+export type InboxEntryKind = "comment" | "status" | "assigned" | "mention" | "agent_response" | "proposal";
+
+/** What the thread is about: one task, project or doc. Entries with the same type and id share a thread. */
+export type InboxSubject = {
+	/** "task", "project", "doc" or whatever the host calls it. */
+	type: string;
+	id: string;
+	/** The short reference, such as "TSK-7". */
+	ref?: string;
+	title: string;
+	/** A status id the host draws itself, for a badge in the thread header. */
+	status?: string;
+	href?: string;
+};
+
+export type InboxEntry = {
+	id: string;
+	kind: InboxEntryKind;
+	/** An entry with no subject id belongs to no thread and is dropped. */
+	subject?: InboxSubject;
+	actor: InboxActor;
+	/** ISO timestamp. A malformed one sorts last. */
+	at: string;
+	read?: boolean;
+	/** Text of a comment, a mention or an agent response. */
+	body?: string;
+	/** A `status` entry: where the subject moved. */
+	status?: { from?: string; to: string };
+	/** An `assigned` entry: who got the work. */
+	assignee?: string;
+	/** A `proposal` entry: the agent's ask, drawn as an InboxCard while it waits. */
+	proposal?: InboxItem;
+};
+
+export type InboxThread = {
+	/** `type:id`, unique across subjects. */
+	key: string;
+	subject: InboxSubject;
+	/** Oldest first. */
+	entries: InboxEntry[];
+	unread: number;
+	/** The newest valid timestamp, as written. The raw first one when none parses. */
+	latestAt: string;
+	/** Proposals still waiting for a verdict, newest first. */
+	pending: InboxEntry[];
+};
+
+export type InboxFilter = {
+	/** A subject type, or "all". */
+	type: string;
+	/** An actor name, or "all". */
+	who: string;
+	/** Only threads holding a pending proposal. */
+	needsYou: boolean;
+};
+
+export const ALL = "all";
+
+export type InboxKey = "next" | "previous" | "toggleRead" | "snooze" | "approve" | "decline" | "steer" | "edit";
+
+export type InboxSnooze = { thread: InboxThread; until: Date };
+
+export type InboxLabels = {
+	title: string;
+	all: string;
+	anyone: string;
+	needsYou: string;
+	empty: string;
+	emptyNeedsYou: string;
+	emptyFiltered: string;
+	clearFilters: string;
+	unread: string;
+	markRead: string;
+	markUnread: string;
+	snooze: string;
+	snoozeLater: string;
+	snoozeTomorrow: string;
+	snoozeNextWeek: string;
+	selectThread: string;
+	filterType: string;
+	filterWho: string;
+	agent: string;
+	statusMoved: string;
+	statusSet: string;
+	assigned: string;
+	mentioned: string;
+	commented: string;
+	responded: string;
+	proposed: string;
+	/** Keyboard hint words. */
+	hintMove: string;
+	hintRead: string;
+	hintSnooze: string;
+	hintAct: string;
+};
+
+export const DEFAULT_INBOX_LABELS: InboxLabels = {
+	title: "Inbox",
+	all: "All",
+	anyone: "Anyone",
+	needsYou: "Needs you",
+	empty: "Nothing here",
+	emptyNeedsYou: "Nothing is waiting on you",
+	emptyFiltered: "No thread matches these filters",
+	clearFilters: "Clear filters",
+	unread: "unread",
+	markRead: "Mark read",
+	markUnread: "Mark unread",
+	snooze: "Snooze",
+	snoozeLater: "Later today",
+	snoozeTomorrow: "Tomorrow",
+	snoozeNextWeek: "Next week",
+	selectThread: "Select a thread",
+	filterType: "Filter by type",
+	filterWho: "Filter by person or agent",
+	agent: "AI",
+	statusMoved: "moved this from {from} to {to}",
+	statusSet: "set this to {to}",
+	assigned: "assigned this to {assignee}",
+	mentioned: "mentioned you",
+	commented: "commented",
+	responded: "replied",
+	proposed: "asks for your call",
+	hintMove: "move",
+	hintRead: "read",
+	hintSnooze: "snooze",
+	hintAct: "approve, decline, steer, edit",
+};

package/src/modules.test.ts

@@ -0,0 +1,95 @@
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it, vi } from "vite-plus/test";
+import * as status from "./status/index.js";
+import * as panel from "./panel/index.js";
+import * as record from "./record/index.js";
+import * as taskInbox from "./tasks/inbox/index.js";
+import * as inbox from "./inbox/index.js";
+import * as thread from "./thread/index.js";
+import type {
+	PanelStat as FromTasksPanelStat,
+	SidePanelWidth as FromTasksWidth,
+	StatusDef as FromTasksStatusDef,
+	StatusDotVariant as FromTasksVariant,
+	StatusId as FromTasksId,
+	StatusMap as FromTasksMap,
+	Statuses as FromTasksStatuses,
+} from "./tasks/index.js";
+import type { PanelStat, SidePanelWidth } from "./panel/index.js";
+import type { StatusDef, StatusDotVariant, StatusId, StatusMap, Statuses } from "./status/index.js";
+
+// Both spellings of every moved type have to be the same type.
+type Same<A, B> = [A] extends [B] ? ([B] extends [A] ? true : false) : false;
+const sameTypes: [
+	Same<PanelStat, FromTasksPanelStat>,
+	Same<SidePanelWidth, FromTasksWidth>,
+	Same<StatusDef, FromTasksStatusDef>,
+	Same<StatusDotVariant, FromTasksVariant>,
+	Same<StatusId<{ a: StatusDef }>, FromTasksId<{ a: StatusDef }>>,
+	Same<StatusMap, FromTasksMap>,
+	Same<Statuses, FromTasksStatuses>,
+] = [true, true, true, true, true, true, true];
+
+const pkg = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8")) as {
+	exports: Record<string, string | Record<string, string>>;
+};
+
+describe("module split", () => {
+	it("keeps every moved name on tasks, the same object as on its new module", async () => {
+		// The kanban board reads matchMedia on import, and jsdom has none.
+		vi.stubGlobal("matchMedia", () => ({ matches: false, addEventListener() {}, removeEventListener() {} }));
+		const tasks = await import("./tasks/index.js");
+		expect(sameTypes).toHaveLength(7);
+		expect(tasks.StatusBadge).toBe(status.StatusBadge);
+		expect(tasks.StatusDot).toBe(status.StatusDot);
+		expect(tasks.StatusIcon).toBe(status.StatusIcon);
+		expect(tasks.defineStatuses).toBe(status.defineStatuses);
+		expect(tasks.StatusBadge).toBeDefined();
+		expect(tasks.SidePanel).toBe(panel.SidePanel);
+		expect(Object.keys(taskInbox)).toContain("Inbox");
+	});
+
+	it("holds the record page's names", () => {
+		expect(record.RecordShell).toBeDefined();
+		expect(record.DEFAULT_RECORD_LABELS).toBeDefined();
+	});
+
+	it("names what the new modules export", () => {
+		expect(thread.Thread).toBeDefined();
+		expect(inbox.ThreadInbox).toBeDefined();
+		expect(inbox.InboxCard).toBeDefined();
+		expect(inbox.threadsOf).toBeTypeOf("function");
+	});
+
+	it("resolves every export path to a file", () => {
+		const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+		const missing: string[] = [];
+		for (const [name, target] of Object.entries(pkg.exports)) {
+			const path = typeof target === "string" ? target : (target.default ?? target.svelte);
+			if (path.includes("*") || path.endsWith(".css")) continue;
+			if (!existsSync(join(root, path))) missing.push(`${name} -> ${path}`);
+		}
+		expect(missing).toEqual([]);
+	});
+
+	it("keeps the old subpaths and adds the new ones", () => {
+		for (const name of [
+			"./tasks",
+			"./tasks/status",
+			"./tasks/status-dot",
+			"./tasks/statuses",
+			"./tasks/side-panel",
+			"./tasks/record",
+			"./tasks/inbox",
+			"./status",
+			"./panel",
+			"./record",
+			"./thread",
+			"./inbox",
+		]) {
+			expect(pkg.exports[name], name).toBeDefined();
+		}
+	});
+});

package/src/panel/README.md

@@ -0,0 +1,5 @@
+# @heyramzi/ui/panel
+
+`SidePanel`, a sheet for one record: badges, links out to other tools, a copy-a-prompt handoff and a stats strip. `PanelStat` types one stat. It used to live in `@heyramzi/ui/tasks`, which still re-exports both, and `tasks/side-panel` still resolves.
+
+Exports: `SidePanel` and the types `PanelStat`, `SidePanelWidth`.

package/src/panel/index.ts

@@ -0,0 +1,2 @@
+export { default as SidePanel } from "./side-panel.svelte";
+export type { PanelStat, SidePanelWidth } from "./side-panel-types.js";

package/src/{tasks → panel}/side-panel.svelte

@@ -13,7 +13,7 @@ import { OpenIn, type OpenInTool } from "../components/open-in/index.js";
 import { CopyButton } from "../components/copy/index.js";
 import type { Tone } from "../lib/tone.js";
 import { cn } from "../lib/utils.js";
-import StatusBadge from "./status-badge.svelte";
+import StatusBadge from "../status/status-badge.svelte";
 
 // =========================
 // PROPS

package/src/record/README.md

@@ -0,0 +1,3 @@
+# @heyramzi/ui/record
+
+The page shell for a project or a client record: header, where-we-are, next up, stats, steps rail, timeline, project list and field sections. It used to live at `@heyramzi/ui/tasks/record`, which still resolves to the same module.

package/src/{tasks/record → record}/field-section.svelte

@@ -2,7 +2,7 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "../../lib/utils.js";
+import { cn } from "../lib/utils.js";
 import { fieldRow, groupFields, type FieldValues } from "./fields.js";
 import InfoList from "./info-list.svelte";
 import type {

package/src/{tasks/record → record}/info-list.svelte

@@ -3,15 +3,15 @@
 // IMPORTS
 // =========================
 import { Check, CaretUpDown } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { Input } from "../../shadcn/input/index.js";
-import { Textarea } from "../../shadcn/textarea/index.js";
-import { Spinner } from "../../shadcn/spinner/index.js";
-import * as Select from "../../shadcn/select/index.js";
-import * as Popover from "../../shadcn/popover/index.js";
-import * as Command from "../../shadcn/command/index.js";
-import StatusBadge from "../status-badge.svelte";
+import { cn } from "../lib/utils.js";
+import { Button } from "../shadcn/button/index.js";
+import { Input } from "../shadcn/input/index.js";
+import { Textarea } from "../shadcn/textarea/index.js";
+import { Spinner } from "../shadcn/spinner/index.js";
+import * as Select from "../shadcn/select/index.js";
+import * as Popover from "../shadcn/popover/index.js";
+import * as Command from "../shadcn/command/index.js";
+import StatusBadge from "../status/status-badge.svelte";
 import { resolveLabels, type InfoRow, type RecordLabels } from "./types.js";
 
 // =========================

package/src/{tasks/record → record}/next-up.svelte

@@ -3,12 +3,12 @@
 // IMPORTS
 // =========================
 import { ArrowRight } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { TONE_TEXT } from "../../lib/tone.js";
-import StatusBadge from "../status-badge.svelte";
+import { cn } from "../lib/utils.js";
+import { TONE_TEXT } from "../lib/tone.js";
+import StatusBadge from "../status/status-badge.svelte";
 import { gutterClass } from "./gutter.js";
 import { formatRange } from "./format.js";
-import { todayIso } from "../dates.js";
+import { todayIso } from "../tasks/dates.js";
 import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
 
 // =========================