@heyramzi/ui 0.0.0-stage → 1.53.0

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

@@ -0,0 +1,354 @@
+<script lang="ts" module>
+	export interface GenerationSteps {
+		completed: number;
+		total: number;
+		currentStep?: string;
+	}
+
+	// No `variant` prop: bar, card and inline drew the same four facts three ways.
+	export interface GenerationProgressProps {
+		status: "idle" | "generating" | "failed";
+		progress?: GenerationSteps | null;
+		label?: string;
+		showElapsed?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		status,
+		progress = null,
+		label,
+		showElapsed = false,
+		class: className,
+	}: GenerationProgressProps = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let elapsed = $state(0);
+
+	// =========================
+	// DERIVED
+	// =========================
+	let heading = $derived(label || "Generating");
+	let percent = $derived(progress && progress.total > 0 ? (progress.completed / progress.total) * 100 : 0);
+
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		if (!showElapsed || status !== "generating") {
+			elapsed = 0;
+			return;
+		}
+
+		const interval = setInterval(() => {
+			elapsed += 1;
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+</script>
+
+<!-- ===========================
+     MARKUP
+     =========================== -->
+{#if status === "failed"}
+	<div class={cn("gen gen-failed", className)}>
+		<div class="gen-head">
+			<span class="gen-dot"></span>
+			<span class="gen-label">Generation failed</span>
+		</div>
+	</div>
+{:else if status === "generating"}
+	<div class={cn("gen", className)}>
+		<div class="gen-head">
+			<span class="gen-dot"></span>
+			<!-- data-text carries the same string for the shimmer's ::before layer. -->
+			<span class="gen-label t-shimmer" data-text={heading}>{heading}</span>
+			<span class="gen-meta">
+				{#if progress}
+					<span class="gen-count">
+						<!-- #key is the reflow: Svelte drops the node and builds a new one,
+						     which is what replays the pop-in on every step. -->
+						{#key progress.completed}
+							<span class="t-digit-group is-animating"><span class="t-digit">{progress.completed}</span></span>
+						{/key}<span class="gen-total">/{progress.total}</span>
+					</span>
+				{/if}
+				{#if showElapsed}
+					<span class="gen-elapsed">{elapsed}s</span>
+				{/if}
+			</span>
+		</div>
+
+		<div class="gen-track" data-indeterminate={progress ? undefined : true}>
+			<div class="gen-fill" style:transform={progress ? `scaleX(${percent / 100})` : undefined}></div>
+		</div>
+
+		{#if progress?.currentStep}
+			{#key progress.currentStep}
+				<p class="gen-step">{progress.currentStep}</p>
+			{/key}
+		{/if}
+	</div>
+{/if}
+
+<!-- ===========================
+     STYLE
+     =========================== -->
+<style>
+	/* ── Surface ─────────────────────────────────────────── */
+	.gen {
+		--shimmer-dur: 2200ms;
+		--shimmer-base: var(--color-brand-indigo);
+		/* 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-indigo));
+		--shimmer-band: 400%;
+		--shimmer-ease: linear;
+		--digit-dur: var(--duration-very-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-indigo) 10%, transparent);
+	}
+
+	:global(.dark) .gen {
+		--shimmer-highlight: color-mix(in oklab, white 70%, var(--color-brand-indigo));
+	}
+
+	.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-dot {
+		flex: none;
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: 9999px;
+		background: var(--color-brand-indigo);
+		animation: gen-pulse 1.8s var(--ease-in-out, ease-in-out) infinite;
+	}
+
+	.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;
+	}
+
+	/* terra-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-terra-600);
+	}
+
+	:global(.dark) .gen-failed .gen-label {
+		color: var(--color-terra-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-indigo);
+	}
+
+	.gen-count {
+		display: inline-flex;
+		align-items: baseline;
+	}
+
+	.gen-total,
+	.gen-elapsed {
+		opacity: 0.6;
+	}
+
+	/* ── 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-indigo) 22%, transparent);
+	}
+
+	.gen-fill {
+		width: 100%;
+		height: 100%;
+		transform-origin: left;
+		border-radius: 9999px;
+		background: var(--color-brand-indigo);
+		transition: transform var(--duration-slow, 400ms) 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;
+	}
+
+	.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-indigo) 70%, var(--color-foreground));
+		animation: gen-step-in var(--duration-quick, 150ms) var(--ease-in-out, ease-in-out) both;
+	}
+
+	@keyframes gen-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.35;
+		}
+	}
+
+	@keyframes gen-sweep {
+		0% {
+			translate: -110% 0;
+		}
+		100% {
+			translate: 290% 0;
+		}
+	}
+
+	@keyframes gen-step-in {
+		from {
+			opacity: 0;
+			transform: translateY(var(--distance-micro, 4px));
+			filter: blur(var(--blur-small, 2px));
+		}
+		to {
+			opacity: 1;
+			transform: none;
+			filter: blur(0);
+		}
+	}
+
+	/* ── 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;
+		}
+		100% {
+			background-position: 0% 0;
+		}
+	}
+
+	/* ── transitions.dev: number pop-in ──────────────────── */
+	@keyframes t-digit-pop-in {
+		0% {
+			transform: translate(
+				calc(var(--digit-distance) * var(--digit-dir-x)),
+				calc(var(--digit-distance) * var(--digit-dir-y))
+			);
+			opacity: 0;
+			filter: blur(var(--digit-blur));
+		}
+		100% {
+			transform: translate(0, 0);
+			opacity: 1;
+			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/index.ts

@@ -0,0 +1,7 @@
+import GenerationProgress from "./GenerationProgress.svelte";
+import type {
+  GenerationProgressProps,
+  GenerationSteps,
+} from "./GenerationProgress.svelte";
+
+export { GenerationProgress, type GenerationProgressProps, type GenerationSteps };

package/src/ai/index.ts

@@ -0,0 +1,111 @@
+// =========================
+// TYPING DOTS
+// =========================
+
+export { TypingDots, type TypingDotsProps } from "./typing-dots/index.js";
+
+// =========================
+// RESPONSE (markdown)
+// =========================
+
+export { Response, type ResponseProps } from "./response/index.js";
+
+// =========================
+// SUGGESTION
+// =========================
+
+export {
+  Suggestion,
+  Suggestions,
+  type SuggestionProps,
+  type SuggestionsProps,
+} from "./suggestion/index.js";
+
+// =========================
+// PROMPT INPUT
+// =========================
+
+export {
+  PromptInput,
+  PromptInputBody,
+  PromptInputToolbar,
+  PromptInputTextarea,
+  PromptInputSubmit,
+  type PromptInputProps,
+  type PromptInputBodyProps,
+  type PromptInputToolbarProps,
+  type PromptInputTextareaProps,
+  type PromptInputSubmitProps,
+  type PromptInputStatus,
+} from "./prompt-input/index.js";
+
+// =========================
+// CONFIRMATION
+// =========================
+
+export {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationActions,
+  ConfirmationAction,
+  type ConfirmationProps,
+  type ConfirmationTitleProps,
+  type ConfirmationRequestProps,
+  type ConfirmationAcceptedProps,
+  type ConfirmationRejectedProps,
+  type ConfirmationActionsProps,
+  type ConfirmationActionProps,
+  type ConfirmationContextValue,
+  type ConfirmationState,
+} from "./confirmation/index.js";
+
+// =========================
+// THINKING DOTS
+// =========================
+
+export { ThinkingDots, type ThinkingDotsProps } from "./thinking-dots/index.js";
+
+// =========================
+// VOICE WAVEFORM
+// =========================
+
+export { VoiceWaveform, type VoiceWaveformProps } from "./voice-waveform/index.js";
+
+// =========================
+// REASONING
+// =========================
+
+export {
+  Reasoning,
+  ReasoningTrigger,
+  ReasoningContent,
+  type ReasoningProps,
+  type ReasoningTriggerProps,
+  type ReasoningContentProps,
+  type ReasoningContextValue,
+} from "./reasoning/index.js";
+
+// =========================
+// LOADING STATE
+// =========================
+
+export { PixelLoader, type PixelLoaderProps } from "./loading-state/index.js";
+
+// =========================
+// AI BUTTON
+// =========================
+
+export { AiButton, type AiButtonProps, type AiStatus } from "./ai-button/index.js";
+
+// =========================
+// GENERATION PROGRESS
+// =========================
+
+export {
+  GenerationProgress,
+  type GenerationProgressProps,
+  type GenerationSteps,
+} from "./generation-progress/index.js";

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

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+	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;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		label = "Working",
+		elapsed = true,
+		startSeconds = 0,
+		class: className,
+		...rest
+	}: PixelLoaderProps = $props();
+
+	// WHY nine cells and not a spinner: the grid reads as work happening in
+
+	// parallel, which is what an agent is doing, and it stays legible at 12px where a rotating ring turns into a smudge.
+	const CELLS = 9;
+
+	// The prop seeds the clock once; after that the clock is its own.
+	let seconds = $state(untrack(() => startSeconds));
+
+	// WHY the clock lives here and not in the caller: every surface that shows
+
+	// this loader wants the same "how long has it been" line, and a caller that forgets to tear its interval down leaks one per render.
+	$effect(() => {
+		if (!elapsed) return;
+		const id = setInterval(() => {
+			seconds += 1;
+		}, 1000);
+		return () => clearInterval(id);
+	});
+
+	const clock = $derived(
+		seconds < 60
+			? `${seconds}s`
+			: `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`,
+	);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn("pixel-loader inline-flex items-center gap-2.5", className)}
+	role="status"
+	aria-label={label}
+	{...rest}
+>
+	<span class="grid shrink-0 grid-cols-3 gap-[1.5px]" aria-hidden="true">
+		{#each { length: CELLS } as _, i (i)}
+			<span class="cell size-[4px] rounded-[1px] bg-current" style="animation-delay: {i * 90}ms"
+			></span>
+		{/each}
+	</span>
+
+	<span class="shimmer text-sm font-medium">{label}</span>
+
+	{#if elapsed}
+		<span class="font-mono text-[11px] tabular-nums text-[color:var(--muted-foreground,#71717a)]">
+			{clock}
+		</span>
+	{/if}
+</div>
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	.pixel-loader {
+		color: var(--foreground, #09090b);
+	}
+
+	.cell {
+		opacity: 0.15;
+		animation: pixel-on 650ms ease-in-out infinite;
+	}
+
+	@keyframes pixel-on {
+		0%,
+		100% {
+			opacity: 0.15;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
+
+	/* 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;
+		}
+		to {
+			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/index.ts

@@ -0,0 +1,5 @@
+import PixelLoader from "./PixelLoader.svelte";
+import type { PixelLoaderProps } from "./PixelLoader.svelte";
+
+export { PixelLoader, type PixelLoaderProps };
+export default PixelLoader;

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

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+	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;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { fade } from "svelte/transition";
+
+	let {
+		class: className,
+		onSubmit,
+		error = null,
+		accent,
+		children,
+		...rest
+	}: PromptInputProps = $props();
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (!onSubmit) return;
+		const form = event.currentTarget as HTMLFormElement;
+		const data = new FormData(form);
+		const value = (data.get("message") as string | null) ?? "";
+		await onSubmit(value, event);
+	}
+</script>
+
+<form
+	class={cn(
+		"w-full overflow-hidden rounded-lg border bg-[color:var(--card,white)]",
+		"border-[color:var(--border,rgba(0,0,0,0.1))]",
+		"focus-within:ring-1 focus-within:ring-[color:var(--ring,currentColor)]",
+		className,
+	)}
+	style:--ring={accent}
+	onsubmit={handleSubmit}
+	{...rest}
+>
+	{@render children?.()}
+	{#if error}
+		<p role="alert" class="text-destructive px-3 pb-2 text-xs" in:fade={{ duration: 150 }}>
+			{error}
+		</p>
+	{/if}
+</form>

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

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface PromptInputBodyProps extends HTMLAttributes<HTMLDivElement> {
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let { class: className, children, ...rest }: PromptInputBodyProps = $props();
+</script>
+
+<div class={cn("flex flex-col", className)} {...rest}>
+	{@render children?.()}
+</div>