@heyramzi/ui 2.24.0 → 3.0.0

package/src/ai/generation-progress/GenerationProgress.svelte

@@ -41,6 +41,14 @@
 	// DERIVED
 	// =========================
 	let heading = $derived(label || "Generating");
+	// What the live region says: the step as it changes, and a failure. The count and timer stay quiet.
+	let spoken = $derived(
+		status === "failed"
+			? "Generation failed"
+			: status === "generating"
+				? [heading, progress?.currentStep].filter(Boolean).join(": ")
+				: "",
+	);
 	let percent = $derived(
 		progress && progress.total > 0 ? (progress.completed / progress.total) * 100 : 0,
 	);
@@ -96,7 +104,16 @@
 			</span>
 		</div>
 
-		<div class="gen-track" data-indeterminate={progress ? undefined : true}>
+		<div
+			class="gen-track"
+			data-indeterminate={progress ? undefined : true}
+			role="progressbar"
+			aria-label={heading}
+			aria-valuemin={progress ? 0 : undefined}
+			aria-valuemax={progress?.total}
+			aria-valuenow={progress?.completed}
+			aria-valuetext={progress ? `${progress.completed} of ${progress.total}` : undefined}
+		>
 			<div
 				class="gen-fill"
 				style:transform={progress ? `scaleX(${percent / 100})` : undefined}
@@ -110,137 +127,206 @@
 		{/if}
 	</div>
 {/if}
+<!-- Always drawn, even idle, so a screen reader is already listening when generation starts. -->
+<span class="sr-only" role="status">{spoken}</span>
 
 <!-- ===========================
      STYLE
      =========================== -->
 <style>
-	/* ── Surface ─────────────────────────────────────────── */
-	.gen {
-		--shimmer-dur: 2200ms;
-		--shimmer-base: var(--color-brand);
-		/* The band is darker than the base on a pale tint and lighter on ink.
-		   Otherwise the sweep looks like the label dropping out. */
-		--shimmer-highlight: color-mix(in oklab, black 45%, var(--color-brand));
-		--shimmer-band: 400%;
-		--shimmer-ease: linear;
-		--digit-dur: var(--duration-slow);
-		--digit-distance: var(--distance-base);
-		--digit-blur: var(--blur-small);
-		--digit-ease: var(--ease-smooth-out);
-		--digit-dir-x: 0;
-		--digit-dir-y: 1;
-
-		padding: 0.625rem 0.875rem;
-		border-radius: var(--radius-lg);
-		background: color-mix(in oklab, var(--color-brand) 10%, transparent);
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* ── Surface ─────────────────────────────────────────── */
+		.gen {
+			--shimmer-dur: 2200ms;
+			--shimmer-base: var(--color-brand);
+			/* The band is darker than the base on a pale tint and lighter on ink.
+			   Otherwise the sweep looks like the label dropping out. */
+			--shimmer-highlight: color-mix(in oklab, black 45%, var(--color-brand));
+			--shimmer-band: 400%;
+			--shimmer-ease: linear;
+			--digit-dur: var(--duration-slow);
+			--digit-distance: var(--distance-base);
+			--digit-blur: var(--blur-small);
+			--digit-ease: var(--ease-smooth-out);
+			--digit-dir-x: 0;
+			--digit-dir-y: 1;
+
+			padding: 0.625rem 0.875rem;
+			border-radius: var(--radius-lg);
+			background: color-mix(in oklab, var(--color-brand) 10%, transparent);
+		}
 
-	:global(.dark) .gen {
-		--shimmer-highlight: color-mix(in oklab, white 70%, var(--color-brand));
-	}
+		:global(.dark) .gen {
+			--shimmer-highlight: color-mix(in oklab, white 70%, var(--color-brand));
+		}
 
-	.gen-failed {
-		--shimmer-base: var(--color-destructive);
-		background: color-mix(in oklab, var(--color-destructive) 10%, transparent);
-	}
+		.gen-failed {
+			--shimmer-base: var(--color-destructive);
+			background: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+		}
 
-	.gen-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.5rem;
-	}
+		.gen-head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 0.5rem;
+		}
 
-	.gen-dot {
-		flex: none;
-		width: 0.375rem;
-		height: 0.375rem;
-		border-radius: 9999px;
-		background: var(--color-brand);
-		animation: gen-pulse 1.8s var(--ease-in-out, ease-in-out) infinite;
-	}
+		.gen-dot {
+			flex: none;
+			width: 0.375rem;
+			height: 0.375rem;
+			border-radius: 9999px;
+			background: var(--color-brand);
+			animation: gen-pulse 1.8s var(--ease-in-out, ease-in-out) infinite;
+		}
 
-	.gen-failed .gen-dot {
-		background: var(--color-destructive);
-		animation: none;
-	}
+		.gen-failed .gen-dot {
+			background: var(--color-destructive);
+			animation: none;
+		}
 
-	.gen-label {
-		margin-inline-end: auto;
-		font-size: 0.75rem;
-		font-weight: 500;
-		line-height: 1.4;
-	}
+		.gen-label {
+			margin-inline-end: auto;
+			font-size: 0.75rem;
+			font-weight: 500;
+			line-height: 1.4;
+		}
 
-	/* signal-600, not --color-destructive: that token is tuned for fills, and at
-	   L=0.6 small text on the pale tint fails. Dark mode uses the lighter step. */
-	.gen-failed .gen-label {
-		color: var(--color-signal-600);
-	}
+		/* signal-600, not --color-destructive: that token is tuned for fills, and at
+		   L=0.6 small text on the pale tint fails. Dark mode uses the lighter step. */
+		.gen-failed .gen-label {
+			color: var(--color-signal-600);
+		}
 
-	:global(.dark) .gen-failed .gen-label {
-		color: var(--color-signal-400);
-	}
+		:global(.dark) .gen-failed .gen-label {
+			color: var(--color-signal-400);
+		}
 
-	.gen-meta {
-		display: flex;
-		align-items: baseline;
-		gap: 0.375rem;
-		font-size: 0.75rem;
-		font-weight: 500;
-		font-variant-numeric: tabular-nums;
-		color: var(--color-brand);
-	}
+		.gen-meta {
+			display: flex;
+			align-items: baseline;
+			gap: 0.375rem;
+			font-size: 0.75rem;
+			font-weight: 500;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-brand);
+		}
 
-	.gen-count {
-		display: inline-flex;
-		align-items: baseline;
-	}
+		.gen-count {
+			display: inline-flex;
+			align-items: baseline;
+		}
 
-	.gen-total,
-	.gen-elapsed {
-		opacity: 0.6;
-	}
+		/* A muted token, not opacity: brand at 60% fell to 3.8:1 on the card. */
+		.gen-total,
+		.gen-elapsed {
+			color: var(--color-muted-foreground);
+		}
 
-	/* ── Track ───────────────────────────────────────────── */
-	.gen-track {
-		position: relative;
-		overflow: hidden;
-		margin-top: 0.5rem;
-		height: 0.25rem;
-		border-radius: 9999px;
-		background: color-mix(in oklab, var(--color-brand) 22%, transparent);
-	}
+		/* ── Track ───────────────────────────────────────────── */
+		.gen-track {
+			position: relative;
+			overflow: hidden;
+			margin-top: 0.5rem;
+			height: 0.25rem;
+			border-radius: 9999px;
+			background: color-mix(in oklab, var(--color-brand) 22%, transparent);
+		}
 
-	.gen-fill {
-		width: 100%;
-		height: 100%;
-		transform-origin: left;
-		border-radius: 9999px;
-		background: var(--color-brand);
-		transition: transform var(--duration-slow, 300ms) var(--ease-smooth-out, ease);
-	}
+		.gen-fill {
+			width: 100%;
+			height: 100%;
+			transform-origin: left;
+			border-radius: 9999px;
+			background: var(--color-brand);
+			transition: transform var(--duration-slow, 300ms) var(--ease-smooth-out, ease);
+		}
 
-	/* A job with no step count still has to look like it is running, so the fill
-	   becomes a band that sweeps instead of a length that grows. */
-	.gen-track[data-indeterminate] .gen-fill {
-		width: 38%;
-		transition: none;
-		animation: gen-sweep 1.5s var(--ease-in-out, ease-in-out) infinite;
-	}
+		/* A job with no step count still has to look like it is running, so the fill
+		   becomes a band that sweeps instead of a length that grows. */
+		.gen-track[data-indeterminate] .gen-fill {
+			width: 38%;
+			transition: none;
+			animation: gen-sweep 1.5s var(--ease-in-out, ease-in-out) infinite;
+		}
+
+		.gen-step {
+			margin: 0.375rem 0 0;
+			overflow: hidden;
+			font-size: 0.75rem;
+			line-height: 1.5;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			/* Mix toward the foreground, not transparent: a 70% indigo wash on its
+			   own track measured 2.9:1. This stays quieter than the label and AA. */
+			color: color-mix(in oklab, var(--color-brand) 70%, var(--color-foreground));
+			animation: gen-step-in var(--duration-quick, 150ms) var(--ease-in-out, ease-in-out) both;
+		}
+
+		/* ── transitions.dev: shimmer text ───────────────────── */
+		.t-shimmer {
+			position: relative;
+			display: inline-block;
+			color: var(--shimmer-base);
+		}
+		.t-shimmer::before {
+			content: attr(data-text);
+			/* Empty alt text, so the copy drawn for the shimmer isn't read a second time. */
+			content: attr(data-text) / "";
+			position: absolute;
+			inset: 0;
+			pointer-events: none;
+			background-image: linear-gradient(
+				90deg,
+				transparent 0%,
+				transparent 40%,
+				var(--shimmer-highlight) 50%,
+				transparent 60%,
+				transparent 100%
+			);
+			background-size: var(--shimmer-band) 100%;
+			background-repeat: no-repeat;
+			-webkit-background-clip: text;
+			background-clip: text;
+			color: transparent;
+			-webkit-text-fill-color: transparent;
+			animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
+		}
 
-	.gen-step {
-		margin: 0.375rem 0 0;
-		overflow: hidden;
-		font-size: 0.75rem;
-		line-height: 1.5;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		/* Mix toward the foreground, not transparent: a 70% indigo wash on its
-		   own track measured 2.9:1. This stays quieter than the label and AA. */
-		color: color-mix(in oklab, var(--color-brand) 70%, var(--color-foreground));
-		animation: gen-step-in var(--duration-quick, 150ms) var(--ease-in-out, ease-in-out) both;
+		/* ── transitions.dev: number pop-in ──────────────────── */
+		.t-digit-group {
+			display: inline-flex;
+			align-items: baseline;
+		}
+		.t-digit {
+			display: inline-block;
+			will-change: transform, opacity, filter;
+		}
+		.t-digit-group.is-animating .t-digit {
+			animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.t-shimmer::before {
+				animation: none !important;
+			}
+			.t-digit-group.is-animating .t-digit,
+			.gen-dot,
+			.gen-step {
+				animation: none;
+			}
+			.gen-track[data-indeterminate] .gen-fill {
+				width: 100%;
+				animation: none;
+				opacity: 0.5;
+			}
+			.gen-fill {
+				transition: none;
+			}
+		}
 	}
 
 	@keyframes gen-pulse {
@@ -275,33 +361,6 @@
 		}
 	}
 
-	/* ── transitions.dev: shimmer text ───────────────────── */
-	.t-shimmer {
-		position: relative;
-		display: inline-block;
-		color: var(--shimmer-base);
-	}
-	.t-shimmer::before {
-		content: attr(data-text);
-		position: absolute;
-		inset: 0;
-		pointer-events: none;
-		background-image: linear-gradient(
-			90deg,
-			transparent 0%,
-			transparent 40%,
-			var(--shimmer-highlight) 50%,
-			transparent 60%,
-			transparent 100%
-		);
-		background-size: var(--shimmer-band) 100%;
-		background-repeat: no-repeat;
-		-webkit-background-clip: text;
-		background-clip: text;
-		color: transparent;
-		-webkit-text-fill-color: transparent;
-		animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
-	}
 	@keyframes t-shimmer {
 		0% {
 			background-position: 100% 0;
@@ -311,7 +370,6 @@
 		}
 	}
 
-	/* ── transitions.dev: number pop-in ──────────────────── */
 	@keyframes t-digit-pop-in {
 		0% {
 			transform: translate(
@@ -327,35 +385,4 @@
 			filter: blur(0);
 		}
 	}
-
-	.t-digit-group {
-		display: inline-flex;
-		align-items: baseline;
-	}
-	.t-digit {
-		display: inline-block;
-		will-change: transform, opacity, filter;
-	}
-	.t-digit-group.is-animating .t-digit {
-		animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.t-shimmer::before {
-			animation: none !important;
-		}
-		.t-digit-group.is-animating .t-digit,
-		.gen-dot,
-		.gen-step {
-			animation: none;
-		}
-		.gen-track[data-indeterminate] .gen-fill {
-			width: 100%;
-			animation: none;
-			opacity: 0.5;
-		}
-		.gen-fill {
-			transition: none;
-		}
-	}
 </style>

package/src/ai/generation-progress/GenerationProgress.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface GenerationSteps {
+    completed: number;
+    total: number;
+    currentStep?: string;
+}
+export interface GenerationProgressProps {
+    status: "idle" | "generating" | "failed";
+    progress?: GenerationSteps | null;
+    label?: string;
+    showElapsed?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<GenerationProgressProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/generation-progress/generation-progress.test.ts

@@ -0,0 +1,37 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import GenerationProgress from "./GenerationProgress.svelte";
+
+// The 10 Nov audit: no progressbar role and nothing live, so a screen reader heard no step and no failure.
+describe("GenerationProgress", () => {
+  it("is a progressbar with a value, and its step is said in a live region", () => {
+    const target = document.createElement("div");
+    const props = {
+      status: "generating" as const,
+      progress: { completed: 2, total: 5, currentStep: "Writing the summary" },
+    };
+    const app = mount(GenerationProgress, { target, props });
+    flushSync();
+    const bar = target.querySelector("[role=progressbar]");
+    expect(bar?.getAttribute("aria-label")).toBe("Generating");
+    expect(bar?.getAttribute("aria-valuenow")).toBe("2");
+    expect(bar?.getAttribute("aria-valuemax")).toBe("5");
+    expect(bar?.getAttribute("aria-valuetext")).toBe("2 of 5");
+    expect(target.querySelector("[role=status]")?.textContent).toBe(
+      "Generating: Writing the summary",
+    );
+    void unmount(app);
+  });
+
+  it("keeps the live region while idle and says a failure in it", () => {
+    const target = document.createElement("div");
+    const idle = mount(GenerationProgress, { target, props: { status: "idle" } });
+    flushSync();
+    expect(target.querySelector("[role=status]")?.textContent).toBe("");
+    void unmount(idle);
+    const failed = mount(GenerationProgress, { target, props: { status: "failed" } });
+    flushSync();
+    expect(target.querySelector("[role=status]")?.textContent).toBe("Generation failed");
+    void unmount(failed);
+  });
+});

package/src/ai/loading-state/PixelLoader.svelte

@@ -66,7 +66,8 @@
 		{/each}
 	</span>
 
-	<span class="shimmer text-sm font-medium">{label}</span>
+	<!-- Not `shimmer`: that's a kit utility, and a utility beats this label's own sweep. -->
+	<span class="pixel-loader-label text-sm font-medium">{label}</span>
 
 	{#if elapsed}
 		<span class="font-mono text-2xs tabular-nums text-[color:var(--muted-foreground,#71717a)]">
@@ -79,13 +80,46 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
-	.pixel-loader {
-		color: var(--foreground, #09090b);
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.pixel-loader {
+			color: var(--foreground, #09090b);
+		}
+
+		.cell {
+			opacity: 0.15;
+			animation: pixel-on 650ms ease-in-out infinite;
+		}
+
+		/* The label carries the same wait the grid does, so the two read as one
+		   object rather than as a spinner that happens to sit beside a word. */
+		.pixel-loader-label {
+			background: linear-gradient(
+				90deg,
+				var(--muted-foreground, #71717a) 0%,
+				var(--foreground, #09090b) 50%,
+				var(--muted-foreground, #71717a) 100%
+			);
+			background-size: 200% 100%;
+			background-clip: text;
+			-webkit-background-clip: text;
+			color: transparent;
+			animation: shimmer-sweep 1800ms linear infinite;
+		}
 
-	.cell {
-		opacity: 0.15;
-		animation: pixel-on 650ms ease-in-out infinite;
+		@media (prefers-reduced-motion: reduce) {
+			.cell {
+				animation: none;
+				opacity: 0.55;
+			}
+
+			.pixel-loader-label {
+				animation: none;
+				background: none;
+				color: var(--foreground, #09090b);
+			}
+		}
 	}
 
 	@keyframes pixel-on {
@@ -98,22 +132,6 @@
 		}
 	}
 
-	/* The label carries the same wait the grid does, so the two read as one
-	   object rather than as a spinner that happens to sit beside a word. */
-	.shimmer {
-		background: linear-gradient(
-			90deg,
-			var(--muted-foreground, #71717a) 0%,
-			var(--foreground, #09090b) 50%,
-			var(--muted-foreground, #71717a) 100%
-		);
-		background-size: 200% 100%;
-		background-clip: text;
-		-webkit-background-clip: text;
-		color: transparent;
-		animation: shimmer-sweep 1800ms linear infinite;
-	}
-
 	@keyframes shimmer-sweep {
 		from {
 			background-position: 200% 0;
@@ -122,17 +140,4 @@
 			background-position: -200% 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.cell {
-			animation: none;
-			opacity: 0.55;
-		}
-
-		.shimmer {
-			animation: none;
-			background: none;
-			color: var(--foreground, #09090b);
-		}
-	}
 </style>

package/src/ai/loading-state/PixelLoader.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface PixelLoaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the agent is doing. Read out by screen readers. */
+    label?: string;
+    /** Show the running clock beside the label. */
+    elapsed?: boolean;
+    /** Seconds already spent when the loader mounts, e.g. resuming a run. */
+    startSeconds?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<PixelLoaderProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/prompt-input/PromptInput.svelte

@@ -49,7 +49,7 @@
 >
 	{@render children?.()}
 	{#if error}
-		<p role="alert" class="text-destructive px-3 pb-2 text-xs" in:fade={{ duration: 150 }}>
+		<p role="alert" class="text-destructive-ink px-3 pb-2 text-xs" in:fade={{ duration: 150 }}>
 			{error}
 		</p>
 	{/if}

package/src/ai/prompt-input/PromptInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLFormAttributes } from "svelte/elements";
+export interface PromptInputProps extends Omit<HTMLFormAttributes, "onsubmit"> {
+    onSubmit?: (value: string, event: SubmitEvent) => void | Promise<void>;
+    class?: string;
+    /** A line under the input, for a send that failed. Cleared by passing null. */
+    error?: string | null;
+    /** Colour of the focus ring. Falls back to `--ring`. */
+    accent?: string;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<PromptInputProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/prompt-input/PromptInputBody.svelte.d.ts

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

package/src/ai/prompt-input/PromptInputSubmit.svelte

@@ -70,10 +70,10 @@
 	{:else if status === "submitted"}
 		<Spinner />
 	{:else if status === "streaming"}
-		<SquareIcon class="size-4" />
+		<SquareIcon aria-hidden="true" class="size-4" />
 	{:else if status === "error"}
-		<XIcon class="size-4" />
+		<XIcon aria-hidden="true" class="size-4" />
 	{:else}
-		<SendIcon class="size-4" />
+		<SendIcon aria-hidden="true" class="size-4" />
 	{/if}
 </Button>

package/src/ai/prompt-input/PromptInputSubmit.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { ButtonProps, ButtonSize, ButtonVariant } from "../../shadcn/button/index.js";
+export type PromptInputStatus = "ready" | "submitted" | "streaming" | "error";
+export interface PromptInputSubmitProps extends Omit<ButtonProps, "type" | "onclick"> {
+    status?: PromptInputStatus;
+    onStop?: () => void;
+    onclick?: (event: MouseEvent) => void;
+    /** Accessible name while idle. Translate at the call site. */
+    submitLabel?: string;
+    /** Accessible name while generating, when a click stops the run. */
+    stopLabel?: string;
+    class?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<PromptInputSubmitProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;