@heyramzi/ui 2.22.1 → 2.24.0

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

@@ -13,12 +13,12 @@
 	import { Card } from "../../shadcn/card/index.js";
 	import * as Avatar from "../../shadcn/avatar/index.js";
 	import TaskDetail from "./task-detail.svelte";
-	import TaskProperty from "./task-property.svelte";
+	import PropertyRow from "../../components/work-parts/property-row.svelte";
 	import TaskChip from "./task-chip.svelte";
 	import TimeTracker from "../time/time-tracker.svelte";
 	import StatusDot from "../../status/status-dot.svelte";
 	import { defineStatuses } from "../../status/define-statuses.js";
-	import type { TaskComment } from "./detail-types.js";
+	import type { ThreadComment, ThreadPost } from "../../thread/types.js";
 	import type { TimeLogInput, TimeStopInfo } from "../time/time-types.js";
 
 	type Scenario =
@@ -53,32 +53,33 @@
 	const hour = 3_600_000;
 	const stamp = (agoHours: number) => new Date(now - agoHours * hour).toISOString();
 
-	const seed: TaskComment[] = [
+	const person = (name: string) => ({ name, kind: "user" as const });
+	const planner = { name: "Planner", kind: "agent" as const };
+
+	const seed: ThreadComment[] = [
 		{
 			id: "c1",
-			author: "Ada Lovelace",
+			author: person("Ada Lovelace"),
 			body: "Calls with Yoan: the format that sold the template was simple. A board on why, then the system, then the demo.",
 			createdAt: stamp(30),
 		},
 		{
 			id: "c2",
-			author: "Planner",
-			agent: true,
+			author: planner,
 			body: "Reused that shape for the outline. Three sections, the demo last, one call to action at the end.",
 			createdAt: stamp(26),
 		},
 		{
 			id: "c3",
-			author: "Bo Chen",
+			author: person("Bo Chen"),
 			body: "Looks right. I'll record Thursday.",
 			createdAt: stamp(5),
 			edited: true,
 		},
 	];
-	const crowd: TaskComment[] = Array.from({ length: 24 }, (_, i) => ({
+	const crowd: ThreadComment[] = Array.from({ length: 24 }, (_, i) => ({
 		id: `b${i}`,
-		author: i % 4 === 1 ? "Planner" : (people[i % people.length] ?? "Ada Lovelace"),
-		agent: i % 4 === 1,
+		author: i % 4 === 1 ? planner : person(people[i % people.length] ?? "Ada Lovelace"),
 		body:
 			i % 5 === 0
 				? "Pushed the second cut. The intro runs 40 seconds, so I trimmed the first example and kept the one with numbers."
@@ -95,7 +96,7 @@
 	let narrow = $state(false);
 	let title = $state("Record the video and hand it off");
 	let description = $state<string | null>(brief);
-	let thread = $state<TaskComment[]>([...seed]);
+	let thread = $state<ThreadComment[]>([...seed]);
 	let done = $state(false);
 	let timer = $state<{ startedAt: number } | null>(null);
 	let entries = $state([
@@ -140,13 +141,14 @@
 		timer = null;
 	}
 
-	function onSend(body: string) {
+	function onPostComment({ body, parentId }: ThreadPost) {
 		thread = [
 			...thread,
 			{
 				id: `n${thread.length}`,
-				author: "Ada Lovelace",
+				author: person("Ada Lovelace"),
 				body,
+				parentId,
 				createdAt: new Date().toISOString(),
 			},
 		];
@@ -191,27 +193,28 @@
 			}}
 			comments={thread}
 			loadingComments={scenario === "loading"}
-			{onSend}
+			{onPostComment}
 			onDeleteComment={(comment) => {
 				thread = thread.filter((row) => row.id !== comment.id);
 			}}
-			canEditComment={(comment) => !comment.agent && comment.author === "Ada Lovelace"}
+			canEditComment={(comment) =>
+				comment.author.kind === "user" && comment.author.name === "Ada Lovelace"}
 		>
 			{#snippet meta()}
 				<span>From a call</span>
 				<span class="tabular-nums">Created Sep 9, 2026</span>
 			{/snippet}
 			{#snippet properties()}
-				<TaskProperty label="Status" icon={CircleHalf}>
+				<PropertyRow label="Status" icon={CircleHalf} layout="responsive">
 					<TaskChip aria-label="Status: {statusLabel}"
 						><StatusDot {statuses} {status} size={14} animate={false} />{statusLabel}</TaskChip
 					>
-				</TaskProperty>
-				<TaskProperty label="Priority" icon={Flag}>
+				</PropertyRow>
+				<PropertyRow label="Priority" icon={Flag} layout="responsive">
 					<TaskChip><Flag weight="fill" class="text-destructive" aria-hidden="true" />High</TaskChip
 					>
-				</TaskProperty>
-				<TaskProperty label="Assignee" icon={UserCircle}>
+				</PropertyRow>
+				<PropertyRow label="Assignee" icon={UserCircle} layout="responsive">
 					{#if assignee}
 						<TaskChip>
 							<Avatar.Root class="size-4" aria-hidden="true">
@@ -222,14 +225,14 @@
 					{:else}
 						<TaskChip empty><CircleDashed aria-hidden="true" />Assign</TaskChip>
 					{/if}
-				</TaskProperty>
-				<TaskProperty label="Due date" icon={CalendarBlank}>
+				</PropertyRow>
+				<PropertyRow label="Due date" icon={CalendarBlank} layout="responsive">
 					<TaskChip><CalendarBlank aria-hidden="true" />Oct 9, 2026</TaskChip>
-				</TaskProperty>
-				<TaskProperty label="Project" icon={Folder}>
+				</PropertyRow>
+				<PropertyRow label="Project" icon={Folder} layout="responsive">
 					<TaskChip><Folder aria-hidden="true" />Agency OS</TaskChip>
-				</TaskProperty>
-				<TaskProperty label="Time" icon={Timer}>
+				</PropertyRow>
+				<PropertyRow label="Time" icon={Timer} layout="responsive">
 					<TimeTracker
 						{entries}
 						running={timer}
@@ -248,7 +251,7 @@
 							entries = entries.filter((row) => row.id !== entry.id);
 						}}
 					/>
-				</TaskProperty>
+				</PropertyRow>
 			{/snippet}
 		</TaskDetail>
 	</Card>

package/src/work/detail/detail-types.ts

@@ -1,16 +1,4 @@
-/** One entry in a task's thread. The host resolves the author's name. */
-export type TaskComment = {
-  id: string;
-  author: string;
-  body: string;
-  /** ISO timestamp. */
-  createdAt: string;
-  /** An agent wrote it: the thread draws the agent avatar and an "AI" label. */
-  agent?: boolean;
-  /** Set when the body changed after posting. */
-  edited?: boolean;
-};
-
+/** The task page's own words. The comment thread's come through `threadLabels`. */
 export type TaskDetailLabels = {
   markComplete: string;
   markIncomplete: string;
@@ -21,14 +9,6 @@ export type TaskDetailLabels = {
   save: string;
   saving: string;
   cancel: string;
-  comments: string;
-  commentPlaceholder: string;
-  commentSend: string;
-  commentEdit: string;
-  commentDelete: string;
-  commentEdited: string;
-  commentsEmpty: string;
-  ai: string;
   properties: string;
 };
 
@@ -42,13 +22,5 @@ export const DEFAULT_TASK_DETAIL_LABELS: TaskDetailLabels = {
   save: "Save",
   saving: "Saving",
   cancel: "Cancel",
-  comments: "Activity",
-  commentPlaceholder: "Leave a comment",
-  commentSend: "Comment",
-  commentEdit: "Edit comment",
-  commentDelete: "Delete comment",
-  commentEdited: "edited",
-  commentsEmpty: "No comments yet",
-  ai: "AI",
   properties: "Properties",
 };

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/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,
@@ -193,7 +194,7 @@
 	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(() => {});
+		await copyText(text);
 		oncopy?.(kind, text);
 	}
 

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. */

package/src/work/inbox/inbox-card.svelte

@@ -29,6 +29,7 @@
 	import { TagChip } from "../../components/chip/index.js";
 	import { workLooks } from "../../components/work-parts/looks.js";
 	import { FolderSimple } from "phosphor-svelte";
+	import { Copied } from "../../components/copy/copied.svelte.js";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
 
 	interface Props {
@@ -78,7 +79,7 @@
 	let steering = $state(false);
 	let note = $state("");
 	let noteEl = $state<HTMLTextAreaElement | null>(null);
-	let copied = $state(false);
+	const copied = new Copied();
 
 	// WHY the selection is derived from the pick: a revised proposal brings new
 	// drafts, and the old pick may not exist in them. The agent's choice wins then.
@@ -158,13 +159,7 @@
 	async function copy() {
 		const draft = current();
 		if (!draft) return;
-		try {
-			await navigator.clipboard.writeText(`${draft.subject}\n\n${draft.body}`);
-			copied = true;
-			setTimeout(() => (copied = false), 1600);
-		} catch {
-			copied = false;
-		}
+		if (!(await copied.copy(`${draft.subject}\n\n${draft.body}`, "", 1600))) copied.reset();
 	}
 
 	let sendLabel = $derived(
@@ -364,7 +359,7 @@
 			<Button size="sm" variant="ghost" onclick={steer} aria-keyshortcuts="s">Steer</Button>
 			{#if drafts.length}
 				<Button size="sm" variant="ghost" onclick={copy} class="ml-auto" aria-live="polite">
-					{copied ? "Copied" : "Copy"}
+					{copied.is() ? "Copied" : "Copy"}
 				</Button>
 			{/if}
 		</div>

package/src/work/inbox/inbox-logic.ts

@@ -1,3 +1,4 @@
+import { relativeTime, shortDate } from "../../lib/dates.js";
 import type { InboxDraft, InboxItem } from "./inbox-types.js";
 
 /** The draft to open on: the agent's pick, else the first. */
@@ -64,12 +65,6 @@ export function freshReasoning(item: InboxItem, facts: CardFacts): string {
 }
 
 const ISO = /^\d{4}-\d{2}-\d{2}T/;
-const UNITS: [number, Intl.RelativeTimeFormatUnit][] = [
-  [604_800, "week"],
-  [86_400, "day"],
-  [3_600, "hour"],
-  [60, "minute"],
-];
 
 /**
  * A time as a person says it: "3 hr. ago", "Oct 12". A host-formatted string stays as written,
@@ -79,16 +74,9 @@ export function whenOf(at: string, now: number = Date.now(), locale = "en-GB"):
   if (!ISO.test(at)) return at;
   const time = Date.parse(at);
   if (Number.isNaN(time)) return "";
-  const seconds = Math.round((time - now) / 1000);
-  const age = Math.abs(seconds);
-  if (age >= 4 * 604_800) {
-    return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(time);
-  }
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "short" });
-  for (const [size, unit] of UNITS) {
-    if (age >= size) return rtf.format(Math.round(seconds / size), unit);
-  }
-  return rtf.format(0, "second");
+  const age = Math.abs(Math.round((time - now) / 1000));
+  if (age >= 4 * 604_800) return shortDate(time, { locale });
+  return relativeTime(time, now, { locale, style: "short" });
 }
 
 /** True when a key press belongs to a text field and so isn't a shortcut. */

package/src/work/index.ts

@@ -23,11 +23,9 @@ export type {
   TaskListRowContext,
 } from "./task-types.js";
 export { default as TaskDetail } from "./detail/task-detail.svelte";
-export { default as TaskThread } from "./detail/task-thread.svelte";
-export { default as TaskProperty } from "./detail/task-property.svelte";
 export { default as TaskChip } from "./detail/task-chip.svelte";
 export { DEFAULT_TASK_DETAIL_LABELS } from "./detail/detail-types.js";
-export type { TaskComment, TaskDetailLabels } from "./detail/detail-types.js";
+export type { TaskDetailLabels } from "./detail/detail-types.js";
 export { default as TimeTracker } from "./time/time-tracker.svelte";
 export { default as TimeChip } from "./time/time-chip.svelte";
 export { default as TimeRing } from "./time/time-ring.svelte";

package/src/work/kanban-column.svelte

@@ -65,11 +65,13 @@
 </div>
 
 <style>
-	/* Columns split the board's width equally, never under 280px (the board scrolls instead)
-	   nor over 420px (a 2-line card title stays near 55 characters a line). */
+	/* Columns split the board's width equally, never under 240px (the board scrolls instead)
+	   nor over 420px (a 2-line card title stays near 55 characters a line). At 280px four
+	   columns needed 1168px, so a docs page at 1440 cut the Done column off; 240px fits four
+	   in the 1008px a 1440 page leaves, and a card's meta row still fits on one line. */
 	.kanban-column {
 		flex: 1 1 0;
-		min-width: var(--kanban-column-min, 280px);
+		min-width: var(--kanban-column-min, 240px);
 		max-width: var(--kanban-column-max, 420px);
 		transition: opacity var(--duration-quick) var(--ease-smooth-out);
 	}

package/src/work/time/duration.ts

@@ -1,3 +1,4 @@
+import { localDay as dayOf } from "../../lib/dates.js";
 import type { Tone } from "../../lib/tone.js";
 
 /** "90", "45m", "1h", "1.5h", "1h30", "1h 30m" and "1:30" to whole minutes. Null when it isn't a duration. */
@@ -35,9 +36,7 @@ export function formatClock(ms: number): { hours: string; minutes: string; secon
 
 /** The reader's own calendar day as `YYYY-MM-DD`. */
 export function localDay(date: Date = new Date()): string {
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${date.getFullYear()}-${month}-${day}`;
+  return dayOf(date);
 }
 
 /** "Today", "Yesterday", then "Mon, Oct 12", in the given locale. */

package/src/work/time/time-chip.svelte

@@ -57,9 +57,7 @@
 					class={cn(
 						"font-normal",
 						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
-					)}
-				>
-					/ {formatMinutes(estimate)}</span
+					)}>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
 				>{/if}
 		</span>
 	</StatusPill>

package/dist/ai/thinking-dots/index.js

@@ -1,3 +0,0 @@
-import ThinkingDots from "../../../src/ai/thinking-dots/ThinkingDots.svelte";
-export { ThinkingDots };
-export default ThinkingDots;

package/dist/components/icon/index.js

@@ -1 +0,0 @@
-export { default as Icon } from "../../../src/components/icon/icon.svelte";

package/dist/components/locale-switch/index.js

@@ -1 +0,0 @@
-export { default as LocaleSwitch } from "../../../src/components/locale-switch/locale-switch.svelte";

package/dist/icons/trades.js

@@ -1,49 +0,0 @@
-/**
-* Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
-*/
-/*
-* Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
-*/
-/*
-* `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
-*/
-/*
-* Tabler 3.46 (6184 icons, MIT) has all 14 at a consistent 2px stroke on 24×24: droplet/pipe, bolt, home (roof), tools, key, window,
-*/
-/*
-* car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
-*/
-import { IconBolt, IconCar, IconCarGarage, IconCrane, IconDroplet, IconGridDots, IconHammer, IconHelmet, IconHome, IconKey, IconLeaf, IconTools, IconTrowel, IconWindow } from "@tabler/icons-svelte-runes";
-export const tradeIconMap = {
-	plumbers: IconDroplet,
-	electricians: IconBolt,
-	roofers: IconHome,
-	handymen: IconTools,
-	locksmiths: IconKey,
-	"window-cleaners": IconWindow,
-	garages: IconCarGarage,
-	carpenters: IconHammer,
-	builders: IconHelmet,
-	plasterers: IconTrowel,
-	tilers: IconGridDots,
-	gardeners: IconLeaf,
-	"mobile-mechanics": IconCar,
-	"construction-companies": IconCrane
-};
-export const tradeLabels = {
-	plumbers: "PLUMBERS",
-	electricians: "ELECTRICIANS",
-	roofers: "ROOFERS",
-	handymen: "HANDYMEN",
-	locksmiths: "LOCKSMITHS",
-	"window-cleaners": "WINDOW CLEANERS",
-	garages: "GARAGES",
-	carpenters: "CARPENTERS",
-	builders: "BUILDERS",
-	plasterers: "PLASTERERS",
-	tilers: "TILERS",
-	gardeners: "GARDENERS",
-	"mobile-mechanics": "MOBILE MECHANICS",
-	"construction-companies": "CONSTRUCTION COMPANIES"
-};
-export const tradeSlugs = Object.keys(tradeIconMap);

package/dist/status/pill-tint.js

@@ -1,13 +0,0 @@
-// A quiet tint and no border: the icon and the text carry the tone, the fill only groups
-// them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
-// the canvas and vanishes there (tokens board, "what fights the new scale").
-// It lives in a .ts module, not status-pill.svelte's module script, so a plain tsc consumer
-// can import it: tsc's `*.svelte` shim only knows a default export.
-export const PILL_TINT = {
-	neutral: "bg-foreground/6 text-muted-foreground",
-	accent: "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
-	info: "bg-info/12 text-info-800 dark:text-info-400",
-	success: "bg-success/12 text-success-800 dark:text-success-400",
-	warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
-	destructive: "bg-destructive/10 text-destructive-ink"
-};

package/dist/work/presets/sales.js

@@ -1,39 +0,0 @@
-import { defineStatuses } from "../../status/define-statuses.js";
-/**
-* An example status map for a sales pipeline. Names are neutral on purpose:
-* swap the keys and labels for your own domain.
-*/
-export const salesStatuses = defineStatuses({
-	new: {
-		label: "New",
-		tone: "accent",
-		variant: "open"
-	},
-	contacted: {
-		label: "Contacted",
-		tone: "info",
-		variant: "open"
-	},
-	proposal: {
-		label: "Proposal",
-		tone: "accent",
-		variant: "progress",
-		progress: .25
-	},
-	negotiation: {
-		label: "Negotiation",
-		tone: "warning",
-		variant: "progress",
-		progress: .75
-	},
-	won: {
-		label: "Won",
-		tone: "success",
-		variant: "completed"
-	},
-	lost: {
-		label: "Lost",
-		tone: "destructive",
-		variant: "lost"
-	}
-});

package/src/ai/confirmation/ConfirmationAccepted.svelte

@@ -1,23 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ConfirmationAcceptedProps {
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { getConfirmationContext } from "./confirmation-context.svelte.js";
-
-	let { children }: ConfirmationAcceptedProps = $props();
-
-	const ctx = getConfirmationContext();
-</script>
-
-{#if ctx.kind === "accepted"}
-	<div
-		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
-	>
-		{@render children?.()}
-	</div>
-{/if}

package/src/ai/confirmation/ConfirmationFailed.svelte

@@ -1,23 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ConfirmationFailedProps {
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { getConfirmationContext } from "./confirmation-context.svelte.js";
-
-	let { children }: ConfirmationFailedProps = $props();
-
-	const ctx = getConfirmationContext();
-</script>
-
-{#if ctx.kind === "failed"}
-	<div
-		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
-	>
-		{@render children?.()}
-	</div>
-{/if}

package/src/ai/confirmation/ConfirmationRejected.svelte

@@ -1,23 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ConfirmationRejectedProps {
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { getConfirmationContext } from "./confirmation-context.svelte.js";
-
-	let { children }: ConfirmationRejectedProps = $props();
-
-	const ctx = getConfirmationContext();
-</script>
-
-{#if ctx.kind === "rejected"}
-	<div
-		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
-	>
-		{@render children?.()}
-	</div>
-{/if}