@heyramzi/ui 2.23.0 → 3.0.0

package/src/work/detail/task-detail.svelte

@@ -4,12 +4,12 @@
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { Textarea } from "../../shadcn/textarea/index.js";
+	import Thread from "../../thread/thread.svelte";
+	import type { ThreadComment, ThreadLabels, ThreadPost } from "../../thread/types.js";
 	import {
 		DEFAULT_TASK_DETAIL_LABELS,
-		type TaskComment,
 		type TaskDetailLabels,
 	} from "./detail-types.js";
-	import TaskThread from "./task-thread.svelte";
 
 	interface Props {
 		title: string;
@@ -21,22 +21,24 @@
 		onToggleDone?: () => void;
 		/** One 12px line under the title: origin, dates. */
 		meta?: Snippet;
-		/** The rail. A row of `TaskProperty` with a `TaskChip` or any picker trigger in each. */
+		/** The rail. A `PropertyRow layout="responsive"` with a `TaskChip` or any picker trigger in each. */
 		properties?: Snippet;
 		/** Under the rail's rows: ids, shortcuts, anything quiet. */
 		railFooter?: Snippet;
 		description?: string | null;
 		onDescriptionChange?: (next: string | null) => void | Promise<void>;
-		comments?: TaskComment[];
+		comments?: ThreadComment[];
 		loadingComments?: boolean;
-		agentAvatar?: Snippet<[TaskComment]>;
-		avatar?: Snippet<[TaskComment]>;
-		when?: (comment: TaskComment) => string;
-		onSend?: (body: string) => void | boolean | Promise<void | boolean>;
-		onEditComment?: (comment: TaskComment, body: string) => void | Promise<void>;
-		onDeleteComment?: (comment: TaskComment) => void | Promise<void>;
-		canEditComment?: (comment: TaskComment) => boolean;
+		/** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+		avatar?: Snippet<[ThreadComment]>;
+		when?: (comment: ThreadComment) => string;
+		/** Returns false to keep the draft. Without it no composer shows. */
+		onPostComment?: (post: ThreadPost) => void | boolean | Promise<void | boolean>;
+		onEditComment?: (comment: ThreadComment, body: string) => void | Promise<void>;
+		onDeleteComment?: (comment: ThreadComment) => void | Promise<void>;
+		canEditComment?: (comment: ThreadComment) => boolean;
 		labels?: Partial<TaskDetailLabels>;
+		threadLabels?: Partial<ThreadLabels>;
 		class?: string;
 	}
 
@@ -53,14 +55,14 @@
 		onDescriptionChange,
 		comments = [],
 		loadingComments = false,
-		agentAvatar,
 		avatar,
 		when,
-		onSend,
+		onPostComment,
 		onEditComment,
 		onDeleteComment,
 		canEditComment,
 		labels: labelOverrides,
+		threadLabels,
 		class: className,
 	}: Props = $props();
 
@@ -260,14 +262,13 @@
 					{/if}
 				</div>
 
-				<TaskThread
+				<Thread
 					{comments}
 					loading={loadingComments}
-					labels={labelOverrides}
-					{agentAvatar}
+					labels={threadLabels}
 					{avatar}
 					{when}
-					{onSend}
+					onPost={onPostComment}
 					onEdit={onEditComment}
 					onDelete={onDeleteComment}
 					canEdit={canEditComment}

package/src/work/detail/task-detail.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { ThreadComment, ThreadLabels, ThreadPost } from "../../thread/types.js";
+import { type TaskDetailLabels } from "./detail-types.js";
+interface Props {
+    title: string;
+    /** Without it the title is read-only. */
+    onTitleChange?: (next: string) => void | Promise<void>;
+    done?: boolean;
+    /** Closed covers done and dropped: the title mutes, never strikes through. */
+    closed?: boolean;
+    onToggleDone?: () => void;
+    /** One 12px line under the title: origin, dates. */
+    meta?: Snippet;
+    /** The rail. A `PropertyRow layout="responsive"` with a `TaskChip` or any picker trigger in each. */
+    properties?: Snippet;
+    /** Under the rail's rows: ids, shortcuts, anything quiet. */
+    railFooter?: Snippet;
+    description?: string | null;
+    onDescriptionChange?: (next: string | null) => void | Promise<void>;
+    comments?: ThreadComment[];
+    loadingComments?: boolean;
+    /** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+    avatar?: Snippet<[ThreadComment]>;
+    when?: (comment: ThreadComment) => string;
+    /** Returns false to keep the draft. Without it no composer shows. */
+    onPostComment?: (post: ThreadPost) => void | boolean | Promise<void | boolean>;
+    onEditComment?: (comment: ThreadComment, body: string) => void | Promise<void>;
+    onDeleteComment?: (comment: ThreadComment) => void | Promise<void>;
+    canEditComment?: (comment: ThreadComment) => boolean;
+    labels?: Partial<TaskDetailLabels>;
+    threadLabels?: Partial<ThreadLabels>;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -20,8 +20,8 @@
 		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;
+		onContentChange?: (json: Record<string, unknown>) => void;
+		onTitleChange?: (title: string) => void;
 		/** Focus the title on open: a doc that was just created. */
 		autofocusTitle?: boolean;
 		/** Parent icon, parent title › this doc. */
@@ -35,7 +35,7 @@
 		/** 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;
+		onCopyLink?: (url: string, id: string) => void;
 		labels?: Partial<DocLabels>;
 		/** The live editor, to focus it or read it. */
 		instance?: Editor | null;
@@ -47,15 +47,15 @@
 	let {
 		title = $bindable(""),
 		content = null,
-		onchange,
-		ontitle,
+		onContentChange,
+		onTitleChange,
 		autofocusTitle = false,
 		breadcrumb,
 		menu,
 		meta,
 		actions,
 		icon,
-		oncopylink,
+		onCopyLink,
 		labels: labelOverrides,
 		instance = $bindable(null),
 	}: Props = $props();
@@ -92,7 +92,7 @@
 
 	function handleChange(json: Record<string, unknown>) {
 		outline = outlineOfDoc(json);
-		onchange?.(json);
+		onContentChange?.(json);
 	}
 
 	function onTitleKey(event: KeyboardEvent) {
@@ -129,7 +129,7 @@
 					items={outline}
 					active={spy.active}
 					label={t.outline}
-					onselect={(id) => spy.jump(id)}
+					onSelect={(id) => spy.jump(id)}
 				/>
 			</div>
 			<!-- Narrow: the strip the reading pages use, since a phone has no gutter. -->
@@ -141,7 +141,7 @@
 					items={outline}
 					active={spy.active}
 					label={t.outline}
-					onselect={(id) => spy.jump(id)}
+					onSelect={(id) => spy.jump(id)}
 				/>
 			</div>
 		{/if}
@@ -161,7 +161,7 @@
 				<textarea
 					bind:this={titleField}
 					bind:value={title}
-					oninput={() => ontitle?.(title)}
+					oninput={() => onTitleChange?.(title)}
 					onkeydown={onTitleKey}
 					rows="1"
 					spellcheck="false"
@@ -172,13 +172,13 @@
 
 				<RichEditor
 					{content}
-					onchange={handleChange}
+					onContentChange={handleChange}
 					variant="page"
 					preset="full"
 					placeholder=""
 					minHeight="20rem"
 					copyLinkLabel={t.copyLink}
-					{oncopylink}
+					{onCopyLink}
 					bind:instance
 				/>
 			</div>
@@ -187,9 +187,13 @@
 </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;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* The title grows with its text, so a long one wraps instead of scrolling sideways. */
+		.doc-title {
+			field-sizing: content;
+			text-wrap: balance;
+		}
 	}
 </style>

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

@@ -0,0 +1,31 @@
+import type { Editor } from "@tiptap/core";
+import type { Snippet } from "svelte";
+import { type DocLabels } from "./labels.js";
+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;
+    onContentChange?: (json: Record<string, unknown>) => void;
+    onTitleChange?: (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;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "title" | "instance">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/docs/doc-menu.svelte

@@ -29,6 +29,7 @@
 		AlertDialogTitle,
 	} from "../../shadcn/alert-dialog/index.js";
 	import { buttonVariants } from "../../shadcn/button/index.js";
+	import { copyText } from "../../components/copy/clipboard.js";
 	import {
 		Command,
 		CommandEmpty,
@@ -64,17 +65,17 @@
 		content?: unknown;
 		favorited?: boolean;
 		/** Every item is a callback. One that isn't passed doesn't show. */
-		onmove?: () => void;
-		onduplicate?: () => void;
-		onrename?: () => void;
-		ontemplate?: () => void;
-		onfavorite?: () => void;
+		onMove?: () => void;
+		onDuplicate?: () => void;
+		onRename?: () => void;
+		onTemplate?: () => void;
+		onFavorite?: () => void;
 		/** Passing it shows Copy. It runs after the text is on the clipboard, for a toast. */
-		oncopy?: (kind: CopyKind, text: string) => void;
-		onremind?: () => void;
-		onhistory?: () => void;
+		onCopy?: (kind: CopyKind, text: string) => void;
+		onRemind?: () => void;
+		onHistory?: () => void;
 		/** Passing it shows Delete, behind a confirm that names the doc. */
-		ondelete?: () => void;
+		onDelete?: () => void;
 		/** One line under the confirm title: "and its 3 sub-pages". */
 		deleteDetail?: string;
 		/** Fire items from the keyboard (⇧R) while no field has focus. */
@@ -93,15 +94,15 @@
 		url,
 		content,
 		favorited = false,
-		onmove,
-		onduplicate,
-		onrename,
-		ontemplate,
-		onfavorite,
-		oncopy,
-		onremind,
-		onhistory,
-		ondelete,
+		onMove,
+		onDuplicate,
+		onRename,
+		onTemplate,
+		onFavorite,
+		onCopy,
+		onRemind,
+		onHistory,
+		onDelete,
 		deleteDetail,
 		shortcuts = true,
 		open = $bindable(false),
@@ -123,15 +124,15 @@
 	let all = $derived(
 		menuItems(
 			{
-				move: !!onmove,
-				duplicate: !!onduplicate,
-				rename: !!onrename,
-				template: !!ontemplate,
-				favorite: !!onfavorite,
-				copy: !!oncopy,
-				remind: !!onremind,
-				history: !!onhistory,
-				delete: !!ondelete,
+				move: !!onMove,
+				duplicate: !!onDuplicate,
+				rename: !!onRename,
+				template: !!onTemplate,
+				favorite: !!onFavorite,
+				copy: !!onCopy,
+				remind: !!onRemind,
+				history: !!onHistory,
+				delete: !!onDelete,
 			},
 			t,
 			{ favorited },
@@ -150,7 +151,10 @@
 	);
 	let confirmName = $derived(deleteName(title, t));
 
-	const ICONS: Record<MenuId, Component<{ class?: string }>> = {
+	const ICONS: Record<
+		MenuId,
+		Component<{ class?: string; "aria-hidden"?: boolean | "true" | "false" }>
+	> = {
 		move: ArrowsOutCardinal,
 		duplicate: CopySimple,
 		rename: PencilSimple,
@@ -172,13 +176,13 @@
 
 	function fire(id: MenuId) {
 		const run: Partial<Record<MenuId, (() => void) | undefined>> = {
-			move: onmove,
-			duplicate: onduplicate,
-			rename: onrename,
-			template: ontemplate,
-			favorite: onfavorite,
-			remind: onremind,
-			history: onhistory,
+			move: onMove,
+			duplicate: onDuplicate,
+			rename: onRename,
+			template: onTemplate,
+			favorite: onFavorite,
+			remind: onRemind,
+			history: onHistory,
 		};
 		if (id === "copy") {
 			query = "";
@@ -193,8 +197,8 @@
 	async function copy(kind: CopyKind, text: string) {
 		open = false;
 		// A blocked clipboard still reports, so the host can say the copy didn't land.
-		await navigator.clipboard.writeText(text).catch(() => {});
-		oncopy?.(kind, text);
+		await copyText(text);
+		onCopy?.(kind, text);
 	}
 
 	function onWindowKey(event: KeyboardEvent) {
@@ -263,9 +267,12 @@
 								<CommandItem
 									value={item.id}
 									onSelect={() => fire(item.id)}
-									class={item.danger ? "text-destructive data-selected:text-destructive" : ""}
+									class={item.danger
+										? "text-destructive-ink data-selected:text-destructive-ink"
+										: ""}
 								>
 									<Icon
+										aria-hidden="true"
 										class={item.id === "favorite" && favorited
 											? "text-brand"
 											: item.danger
@@ -329,7 +336,7 @@
 			<AlertDialogCancel>{t.cancel}</AlertDialogCancel>
 			<AlertDialogAction
 				class={buttonVariants({ variant: "destructive" })}
-				onclick={() => ondelete?.()}
+				onclick={() => onDelete?.()}
 			>
 				{t.delete}
 			</AlertDialogAction>

package/src/work/docs/doc-menu.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Component, Snippet } from "svelte";
+import { type DocLabels } from "./labels.js";
+import { type CopyKind } from "./menu.js";
+interface Props {
+    /** The doc's title. An empty one reads "Untitled" in the delete confirm. */
+    title: string;
+    /** The doc's address; "Copy URL" and "title as link" need it. */
+    url?: string;
+    /** The doc as Tiptap JSON; "Copy content as Markdown" needs it. */
+    content?: unknown;
+    favorited?: boolean;
+    /** Every item is a callback. One that isn't passed doesn't show. */
+    onMove?: () => void;
+    onDuplicate?: () => void;
+    onRename?: () => void;
+    onTemplate?: () => void;
+    onFavorite?: () => void;
+    /** Passing it shows Copy. It runs after the text is on the clipboard, for a toast. */
+    onCopy?: (kind: CopyKind, text: string) => void;
+    onRemind?: () => void;
+    onHistory?: () => void;
+    /** Passing it shows Delete, behind a confirm that names the doc. */
+    onDelete?: () => void;
+    /** One line under the confirm title: "and its 3 sub-pages". */
+    deleteDetail?: string;
+    /** Fire items from the keyboard (⇧R) while no field has focus. */
+    shortcuts?: boolean;
+    open?: boolean;
+    labels?: Partial<DocLabels>;
+    /** Replaces the round `…` button. Spread `props` on the element. */
+    trigger?: Snippet<[Record<string, unknown>]>;
+}
+declare const $$Component: Component<Props, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/docs/edited-chip.svelte

@@ -24,9 +24,9 @@
 		lastEditor?: (Person & { at?: DateInput }) | null;
 		/** The switch row shows only when this is passed. */
 		showAuthorNames?: boolean;
-		onshowauthors?: (show: boolean) => void;
+		onShowAuthorNamesChange?: (show: boolean) => void;
 		/** The history button shows only when this is passed. */
-		onhistory?: () => void;
+		onHistory?: () => void;
 		labels?: Partial<DocLabels>;
 		timeZone?: string;
 		now?: Date;
@@ -40,8 +40,8 @@
 		owner = null,
 		lastEditor = null,
 		showAuthorNames = false,
-		onshowauthors,
-		onhistory,
+		onShowAuthorNamesChange,
+		onHistory,
 		labels: labelOverrides,
 		timeZone,
 		now,
@@ -54,7 +54,7 @@
 	let chip = $derived(editedLabel(editedAt, t.edited, { timeZone, now }));
 	let editorStamp = $derived(editStamp(lastEditor?.at ?? editedAt, { timeZone, now }));
 	// Nothing to open: the chip is a plain label rather than a button that opens an empty card.
-	let hasDetails = $derived(!!onshowauthors || !!owner || !!lastEditor || !!onhistory);
+	let hasDetails = $derived(!!onShowAuthorNamesChange || !!owner || !!lastEditor || !!onHistory);
 </script>
 
 {#snippet person(who: Person)}
@@ -83,12 +83,12 @@
 			class="w-[21.5rem] gap-0 p-0 text-(length:--text-control)"
 		>
 			<div class="divide-y divide-border/70">
-				{#if onshowauthors}
+				{#if onShowAuthorNamesChange}
 					<div class="flex items-center justify-between px-4 py-3">
 						<span class="text-muted-foreground">{t.showAuthorNames}</span>
 						<Switch
 							checked={showAuthorNames}
-							onCheckedChange={(next) => onshowauthors?.(next)}
+							onCheckedChange={(next) => onShowAuthorNamesChange?.(next)}
 							aria-label={t.showAuthorNames}
 						/>
 					</div>
@@ -108,11 +108,11 @@
 						{/if}
 					</div>
 				{/if}
-				{#if onhistory}
+				{#if onHistory}
 					<div class="p-2">
 						<button
 							type="button"
-							onclick={onhistory}
+							onclick={onHistory}
 							class="t-press flex h-8 w-full items-center justify-center gap-2 {docLooks.control} bg-foreground/5 font-medium transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:shadow-(--ring-focus)"
 						>
 							<ClockCounterClockwise size={14} aria-hidden="true" />

package/src/work/docs/edited-chip.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type DateInput } from "./edited.js";
+import { type DocLabels } from "./labels.js";
+type Person = {
+    name: string;
+    image?: string | null;
+};
+interface Props {
+    /** When the doc last changed. Unreadable or missing leaves just "Edited". */
+    editedAt?: DateInput;
+    owner?: Person | null;
+    /** The last editor. Their time falls back to `editedAt`. */
+    lastEditor?: (Person & {
+        at?: DateInput;
+    }) | null;
+    /** The switch row shows only when this is passed. */
+    showAuthorNames?: boolean;
+    onShowAuthorNamesChange?: (show: boolean) => void;
+    /** The history button shows only when this is passed. */
+    onHistory?: () => void;
+    labels?: Partial<DocLabels>;
+    timeZone?: string;
+    now?: Date;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/docs/edited.ts

@@ -1,5 +1,7 @@
 /** The "Edited Oct 23" chip: how a stamp reads, and what to show when it can't be read. */
 
+import { shortDate as monthDay } from "../../lib/dates.js";
+
 export type DateInput = Date | string | number | null | undefined;
 
 export type StampOptions = {
@@ -24,13 +26,8 @@ export function shortDate(value: DateInput, options: StampOptions = {}): string
   const date = parseStamp(value);
   if (!date) return "";
   const { locale = "en-US", timeZone, now = new Date() } = options;
-  const sameYear = yearOf(date, options) === yearOf(now, options);
-  return new Intl.DateTimeFormat(locale, {
-    month: "short",
-    day: "numeric",
-    year: sameYear ? undefined : "numeric",
-    timeZone,
-  }).format(date);
+  const year = yearOf(date, options) !== yearOf(now, options);
+  return monthDay(date, { locale, timeZone, year });
 }
 
 /** "Oct 23, 14:44" for the last-edit row. Empty when the date can't be read. */