@heyramzi/ui 2.23.0 → 3.0.0

package/src/agents/agent-cast.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Agent } from "./types.js";
+interface Props {
+    /** The cast to lay out. */
+    agents: Agent[];
+    /** Selected agent id, when the cast is a picker. */
+    selectedId?: string | null;
+    /** Called with the agent that was picked. */
+    onSelect?: (agent: Agent) => void;
+    /** Hide the role line under each name. */
+    showRole?: boolean;
+    /** Extra props forwarded to every `<AgentAvatar>`. */
+    avatarProps?: Record<string, unknown>;
+    /** Minimum card width, any CSS length. Controls the column count. */
+    minColumn?: string;
+    class?: string;
+    style?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/agents/types.ts

@@ -67,6 +67,7 @@ export type AgentAvatarProps = Omit<
   size?: number;
   class?: string;
   style?: string;
+  /** Set, the avatar is a button named like the image, so the action takes focus and Enter. */
   onclick?: (event: MouseEvent) => void;
   "aria-label"?: string;
   /** Hide the canvas from assistive tech when a parent already names the agent. */

package/src/ai/ai-button/AiButton.svelte

@@ -39,6 +39,14 @@
 		class: className,
 		iconOnly = false,
 	}: AiButtonProps = $props();
+
+	// A disabled button drops focus to the page, so while it works it's aria-disabled and ignores presses instead.
+	const busy = $derived(status === "processing");
+
+	function handleClick(e: MouseEvent) {
+		if (busy) return;
+		onclick?.(e);
+	}
 </script>
 
 <!-- ===========================
@@ -49,29 +57,32 @@
 		{variant}
 		size="sm"
 		icon
-		disabled={disabled || status === "processing"}
-		{onclick}
-		class={cn("relative", status === "processing" && "pointer-events-none", className)}
+		{disabled}
+		aria-disabled={busy || undefined}
+		aria-label={busy ? processingLabel : label}
+		onclick={handleClick}
+		class={cn("relative", busy && "pointer-events-none opacity-50", className)}
 	>
-		{#if status === "processing"}
+		{#if busy}
 			<Spinner class="size-4" />
 		{:else}
-			<Sparkle class="size-4" weight="fill" />
+			<Sparkle class="size-4" weight="fill" aria-hidden="true" />
 		{/if}
 	</Button>
 {:else}
 	<Button
 		{variant}
 		{size}
-		disabled={disabled || status === "processing"}
-		{onclick}
-		class={cn("gap-1.5", status === "processing" && "pointer-events-none", className)}
+		{disabled}
+		aria-disabled={busy || undefined}
+		onclick={handleClick}
+		class={cn("gap-1.5", busy && "pointer-events-none opacity-50", className)}
 	>
-		{#if status === "processing"}
+		{#if busy}
 			<Spinner class="size-3.5" />
 			<span>{processingLabel}</span>
 		{:else}
-			<Sparkle class="size-3.5" weight="fill" />
+			<Sparkle class="size-3.5" weight="fill" aria-hidden="true" />
 			<span>{label}</span>
 		{/if}
 	</Button>

package/src/ai/ai-button/AiButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps } from "../../shadcn/button/index.js";
+export type AiStatus = "idle" | "processing" | "done";
+export interface AiButtonProps {
+    status?: AiStatus;
+    label?: string;
+    processingLabel?: string;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    disabled?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    class?: string;
+    iconOnly?: boolean;
+}
+declare const $$Component: import("svelte").Component<AiButtonProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/ai-button/ai-button.svelte.test.ts

@@ -0,0 +1,27 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it, vi } from "vite-plus/test";
+import AiButton, { type AiStatus } from "./AiButton.svelte";
+
+// 10 Nov 2026: the button turned disabled while it worked, and focus dropped to the page.
+describe("AiButton while processing", () => {
+  for (const iconOnly of [false, true]) {
+    it(`keeps focus and ignores presses${iconOnly ? " (icon only)" : ""}`, () => {
+      const target = document.createElement("div");
+      document.body.appendChild(target);
+      const onclick = vi.fn();
+      const props = $state({ status: "idle" as AiStatus, onclick, iconOnly });
+      const app = mount(AiButton, { target, props });
+      flushSync();
+      const button = target.querySelector("button");
+      button?.focus();
+      props.status = "processing";
+      flushSync();
+      expect(document.activeElement).toBe(button);
+      expect(button?.getAttribute("aria-disabled")).toBe("true");
+      button?.click();
+      expect(onclick).not.toHaveBeenCalled();
+      void unmount(app);
+      target.remove();
+    });
+  }
+});

package/src/ai/confirmation/Confirmation.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { ConfirmationState } from "./confirmation-context.svelte.js";
+	import type { ConfirmationKind } from "./confirmation-context.svelte.js";
 
 	export interface ConfirmationProps extends HTMLAttributes<HTMLElement> {
-		kind: ConfirmationState;
+		kind: ConfirmationKind;
 		executing?: boolean;
 		class?: string;
 		children?: Snippet;
@@ -32,20 +32,36 @@
 			return executing;
 		},
 	});
+
+	let section = $state<HTMLElement | null>(null);
+	let hadFocus = false;
+
+	// The actions unmount once it resolves. If one held focus, the box takes it so focus doesn't drop to the page.
+	$effect.pre(() => {
+		void kind;
+		hadFocus = !!section?.contains(document.activeElement);
+	});
+
+	$effect(() => {
+		void kind;
+		if (hadFocus && section && !section.contains(document.activeElement)) section.focus();
+		hadFocus = false;
+	});
 </script>
 
 {#if kind !== "idle"}
-	{@const isResolved = kind === "accepted" || kind === "rejected" || kind === "failed"}
+	<!-- Live from the moment it shows, so the change to the result is read out. -->
 	<section
+		bind:this={section}
+		tabindex="-1"
 		class={cn(
-			"flex flex-col gap-2 rounded-lg border p-3",
+			"flex flex-col gap-2 rounded-lg border p-3 outline-none",
 			"border-[color:var(--border,rgba(0,0,0,0.1))] bg-[color:var(--card,white)] shadow-sm",
 			className,
 		)}
 		aria-label="Confirmation"
 		aria-busy={executing ? "true" : undefined}
-		role={isResolved ? "status" : undefined}
-		aria-live={isResolved ? "polite" : undefined}
+		aria-live="polite"
 		data-state={kind}
 		{...rest}
 	>

package/src/ai/confirmation/Confirmation.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ConfirmationKind } from "./confirmation-context.svelte.js";
+export interface ConfirmationProps extends HTMLAttributes<HTMLElement> {
+    kind: ConfirmationKind;
+    executing?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ConfirmationProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/ConfirmationAction.svelte

@@ -34,7 +34,12 @@
 				? false
 				: ctx.executing && variant === "default",
 	);
-	const isDisabled = $derived(Boolean(disabled) || ctx.executing);
+	// A disabled button drops focus to the page, so while the action runs it's aria-disabled and stops presses here.
+	function blockWhileRunning(event: MouseEvent) {
+		if (!ctx.executing) return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	}
 </script>
 
 <Button
@@ -42,8 +47,10 @@
 	{variant}
 	{size}
 	type="button"
-	disabled={isDisabled}
-	class={cn("h-8 px-3 text-sm", className)}
+	{disabled}
+	aria-disabled={ctx.executing || undefined}
+	onclickcapture={blockWhileRunning}
+	class={cn("h-8 px-3 text-sm", ctx.executing && "pointer-events-none opacity-50", className)}
 >
 	{#if showBusy && busyLabel}
 		{busyLabel}

package/src/ai/confirmation/ConfirmationAction.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from "../../shadcn/button/index.js";
+export interface ConfirmationActionProps extends ButtonProps {
+    busyLabel?: string;
+    busyWhen?: "always" | "default" | "never";
+}
+declare const $$Component: import("svelte").Component<ConfirmationActionProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/ConfirmationActions.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface ConfirmationActionsProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ConfirmationActionsProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/{ConfirmationRequest.svelte → ConfirmationState.svelte}

@@ -1,7 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
+	import type { ConfirmationKind } from "./confirmation-context.svelte.js";
 
-	export interface ConfirmationRequestProps {
+	export interface ConfirmationStateProps {
+		/** The state whose content this shows. */
+		when: Exclude<ConfirmationKind, "idle">;
 		children?: Snippet;
 	}
 </script>
@@ -9,12 +12,12 @@
 <script lang="ts">
 	import { getConfirmationContext } from "./confirmation-context.svelte.js";
 
-	let { children }: ConfirmationRequestProps = $props();
+	let { when, children }: ConfirmationStateProps = $props();
 
 	const ctx = getConfirmationContext();
 </script>
 
-{#if ctx.kind === "requested"}
+{#if ctx.kind === when}
 	<!-- WHY: the wrapper mirrors the parent section's stack so the state swap can
        animate as one block without changing the children's layout. -->
 	<div

package/src/ai/confirmation/ConfirmationState.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { ConfirmationKind } from "./confirmation-context.svelte.js";
+export interface ConfirmationStateProps {
+    /** The state whose content this shows. */
+    when: Exclude<ConfirmationKind, "idle">;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ConfirmationStateProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/ConfirmationTitle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface ConfirmationTitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ConfirmationTitleProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/confirmation-context.svelte.ts

@@ -2,10 +2,10 @@ import { getContext, setContext } from "svelte";
 
 const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
 
-export type ConfirmationState = "idle" | "requested" | "accepted" | "rejected" | "failed";
+export type ConfirmationKind = "idle" | "requested" | "accepted" | "rejected" | "failed";
 
 export interface ConfirmationContextValue {
-  readonly kind: ConfirmationState;
+  readonly kind: ConfirmationKind;
   readonly executing: boolean;
 }
 

package/src/ai/confirmation/confirmation-focus.test.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	// A request whose Delete runs, then resolves, for the focus and live region test.
+	import {
+		Confirmation,
+		ConfirmationAction,
+		ConfirmationActions,
+		ConfirmationState,
+		type ConfirmationKind,
+	} from "./index.js";
+
+	let { onDelete }: { onDelete: () => void } = $props();
+	let kind = $state<ConfirmationKind>("requested");
+	let executing = $state(false);
+
+	export function resolve() {
+		executing = false;
+		kind = "accepted";
+	}
+</script>
+
+<Confirmation {kind} {executing}>
+	<ConfirmationState when="requested">
+		<ConfirmationActions>
+			<ConfirmationAction
+				onclick={() => {
+					executing = true;
+					onDelete();
+				}}>Delete</ConfirmationAction
+			>
+		</ConfirmationActions>
+	</ConfirmationState>
+	<ConfirmationState when="accepted">Deleted.</ConfirmationState>
+</Confirmation>

package/src/ai/confirmation/confirmation-focus.test.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    onDelete: () => void;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {
+    resolve: () => void;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/confirmation-focus.test.ts

@@ -0,0 +1,34 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it, vi } from "vite-plus/test";
+import Flow from "./confirmation-focus.test.svelte";
+
+// 10 Nov 2026: focus dropped to the page after Delete, and the box turned live in the same update as its result.
+describe("Confirmation after an action", () => {
+  it("keeps focus through the run and moves it to the live box once resolved", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const onDelete = vi.fn();
+    const app = mount(Flow, { target, props: { onDelete } });
+    flushSync();
+    const section = target.querySelector("section");
+    const button = target.querySelector("button");
+    expect(section?.getAttribute("aria-live")).toBe("polite");
+
+    button?.focus();
+    button?.click();
+    flushSync();
+    expect(onDelete).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).toBe(button);
+    expect(button?.disabled).toBe(false);
+    button?.click();
+    expect(onDelete).toHaveBeenCalledTimes(1);
+
+    app.resolve();
+    flushSync();
+    expect(section?.textContent?.trim()).toBe("Deleted.");
+    expect(document.activeElement).toBe(section);
+
+    void unmount(app);
+    target.remove();
+  });
+});

package/src/ai/confirmation/confirmation-parts.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	// Every state part under one Confirmation, for the state-swap test.
+	import {
+		Confirmation,
+		ConfirmationState,
+		type ConfirmationKind,
+	} from "./index.js";
+
+	let { kind }: { kind: ConfirmationKind } = $props();
+</script>
+
+<Confirmation {kind}>
+	<ConfirmationState when="requested">request</ConfirmationState>
+	<ConfirmationState when="accepted">accepted</ConfirmationState>
+	<ConfirmationState when="rejected">rejected</ConfirmationState>
+	<ConfirmationState when="failed">failed</ConfirmationState>
+</Confirmation>

package/src/ai/confirmation/confirmation-parts.test.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type ConfirmationKind } from "./index.js";
+type $$ComponentProps = {
+    kind: ConfirmationKind;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/confirmation/confirmation-parts.test.ts

@@ -0,0 +1,23 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import type { ConfirmationKind } from "./index.js";
+import Parts from "./confirmation-parts.test.svelte";
+
+function shown(kind: ConfirmationKind): string {
+  const target = document.createElement("div");
+  const app = mount(Parts, { target, props: { kind } });
+  flushSync();
+  const text = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+  void unmount(app);
+  return text;
+}
+
+describe("ConfirmationState", () => {
+  it("shows only the part whose `when` matches the kind", () => {
+    expect(shown("requested")).toBe("request");
+    expect(shown("accepted")).toBe("accepted");
+    expect(shown("rejected")).toBe("rejected");
+    expect(shown("failed")).toBe("failed");
+    expect(shown("idle")).toBe("");
+  });
+});

package/src/ai/confirmation/index.ts

@@ -1,50 +1,35 @@
 import Confirmation from "./Confirmation.svelte";
 import ConfirmationTitle from "./ConfirmationTitle.svelte";
-import ConfirmationRequest from "./ConfirmationRequest.svelte";
-import ConfirmationAccepted from "./ConfirmationAccepted.svelte";
-import ConfirmationRejected from "./ConfirmationRejected.svelte";
-import ConfirmationFailed from "./ConfirmationFailed.svelte";
+import ConfirmationState from "./ConfirmationState.svelte";
 import ConfirmationActions from "./ConfirmationActions.svelte";
 import ConfirmationAction from "./ConfirmationAction.svelte";
 
 import type { ConfirmationProps } from "./Confirmation.svelte";
 import type { ConfirmationTitleProps } from "./ConfirmationTitle.svelte";
-import type { ConfirmationRequestProps } from "./ConfirmationRequest.svelte";
-import type { ConfirmationAcceptedProps } from "./ConfirmationAccepted.svelte";
-import type { ConfirmationRejectedProps } from "./ConfirmationRejected.svelte";
-import type { ConfirmationFailedProps } from "./ConfirmationFailed.svelte";
+import type { ConfirmationStateProps } from "./ConfirmationState.svelte";
 import type { ConfirmationActionsProps } from "./ConfirmationActions.svelte";
 import type { ConfirmationActionProps } from "./ConfirmationAction.svelte";
 
 export type {
   ConfirmationContextValue,
-  ConfirmationState,
+  ConfirmationKind,
 } from "./confirmation-context.svelte.js";
 
 export {
   Confirmation,
   ConfirmationTitle,
-  ConfirmationRequest,
-  ConfirmationAccepted,
-  ConfirmationRejected,
-  ConfirmationFailed,
+  ConfirmationState,
   ConfirmationActions,
   ConfirmationAction,
   type ConfirmationProps,
   type ConfirmationTitleProps,
-  type ConfirmationRequestProps,
-  type ConfirmationAcceptedProps,
-  type ConfirmationRejectedProps,
-  type ConfirmationFailedProps,
+  type ConfirmationStateProps,
   type ConfirmationActionsProps,
   type ConfirmationActionProps,
   //
   Confirmation as Root,
   ConfirmationTitle as Title,
-  ConfirmationRequest as Request,
-  ConfirmationAccepted as Accepted,
-  ConfirmationRejected as Rejected,
-  ConfirmationFailed as Failed,
+  ConfirmationState as State,
   ConfirmationActions as Actions,
   ConfirmationAction as Action,
 };