@heyramzi/ui 2.24.0 → 3.1.0

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLButtonAttributes, "children"> {
+    /** No value yet: the label is a prompt and recedes until hovered. */
+    empty?: boolean;
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -65,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. */
@@ -94,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),
@@ -124,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 },
@@ -151,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,
@@ -173,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 = "";
@@ -195,7 +198,7 @@
 		open = false;
 		// A blocked clipboard still reports, so the host can say the copy didn't land.
 		await copyText(text);
-		oncopy?.(kind, text);
+		onCopy?.(kind, text);
 	}
 
 	function onWindowKey(event: KeyboardEvent) {
@@ -264,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
@@ -330,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;