@heyramzi/ui 6.1.0 → 8.0.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

@@ -1,27 +1,3 @@
-// =========================
-// CONVERSATION (scroll container)
-// =========================
-
-export {
-  Conversation,
-  ConversationContent,
-  ConversationEmptyState,
-  ConversationScrollButton,
-  StickToBottomContext,
-  getStickToBottomContext,
-  setStickToBottomContext,
-  type ConversationProps,
-  type ConversationContentProps,
-  type ConversationEmptyStateProps,
-  type ConversationScrollButtonProps,
-} from "./conversation/index.js";
-
-// =========================
-// COMPOSER
-// =========================
-
-export { Composer, type ComposerProps } from "./composer/index.js";
-
 // =========================
 // TYPING DOTS
 // =========================
@@ -117,3 +93,19 @@ export {
 // =========================
 
 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/prompt-input/PromptInput.svelte

@@ -5,14 +5,26 @@
 	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, children, ...rest }: PromptInputProps = $props();
+	let {
+		class: className,
+		onSubmit,
+		error = null,
+		accent,
+		children,
+		...rest
+	}: PromptInputProps = $props();
 
 	async function handleSubmit(event: SubmitEvent) {
 		event.preventDefault();
@@ -31,8 +43,14 @@
 		"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/PromptInputSubmit.svelte

@@ -8,6 +8,10 @@
 		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;
@@ -18,7 +22,7 @@
 <script lang="ts">
 	import { cn } from "@heyramzi/utils";
 	import { Button } from "../../shadcn/button/index.js";
-	import LoaderIcon from "phosphor-svelte/lib/CircleNotch";
+	import { Spinner } from "../../shadcn/spinner/index.js";
 	import SendIcon from "phosphor-svelte/lib/PaperPlaneRight";
 	import SquareIcon from "phosphor-svelte/lib/Square";
 	import XIcon from "phosphor-svelte/lib/X";
@@ -27,6 +31,8 @@
 		status = "ready",
 		onStop,
 		onclick,
+		submitLabel = "Submit",
+		stopLabel = "Stop",
 		variant = "default",
 		size = "default",
 		icon = true,
@@ -56,13 +62,13 @@
 	type={buttonType}
 	data-prompt-input-submit
 	onclick={handleClick}
-	aria-label={isGenerating ? "Stop" : "Submit"}
+	aria-label={isGenerating ? stopLabel : submitLabel}
 	class={cn("gap-1.5", className)}
 >
 	{#if children}
 		{@render children()}
 	{:else if status === "submitted"}
-		<LoaderIcon class="size-4 animate-spin" />
+		<Spinner />
 	{:else if status === "streaming"}
 		<SquareIcon class="size-4" />
 	{:else if status === "error"}

package/src/ai/reasoning/Reasoning.svelte

@@ -10,6 +10,7 @@
 </script>
 
 <script lang="ts">
+	import { untrack } from "svelte";
 	import { cn } from "@heyramzi/utils";
 	import { Collapsible } from "../../shadcn/collapsible/index.js";
 	import { setReasoningContext } from "./reasoning-context.svelte.js";
@@ -23,18 +24,20 @@
 		...rest
 	}: ReasoningProps = $props();
 
-	// WHY: child parts read streaming/duration through this proxy; the $effect keeps
-	// it synced to props so $derived in the trigger reruns on every change.
-	const ctx = $state({ isStreaming, duration });
-	$effect(() => {
-		ctx.isStreaming = isStreaming;
-		ctx.duration = duration;
+	// WHY: child parts read streaming/duration through these getters, so $derived in
+	// the trigger reruns whenever the props change.
+	setReasoningContext({
+		get isStreaming() {
+			return isStreaming;
+		},
+		get duration() {
+			return duration;
+		},
 	});
-	setReasoningContext(ctx);
 
 	// WHY: auto-open on stream start and auto-close on stream end, but only on the
 	// transition itself so a user who toggles mid-stream is left alone.
-	let prev = isStreaming;
+	let prev = untrack(() => isStreaming);
 	$effect(() => {
 		if (isStreaming && !prev) open = true;
 		else if (!isStreaming && prev) open = false;

package/src/ambient.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A stylesheet imported for its side effect, bundled by the consumer's Vite.
+ */
+declare module "*.css";

package/src/animations/README.md

@@ -17,49 +17,49 @@ The script writes pristine upstream copies to `.upstream/transitions/` and hashe
 
 | File | Selector | Used by |
 | --- | --- | --- |
-| `accordion.css` | `.t-acc` | standalone |
 | `avatar-group-hover.css` | `.t-avatar-group`, `.t-avatar` | standalone |
 | `card-tilt.css` | `.t-tilt`, `.t-tilt-card`, `.t-tilt-glare` | standalone |
 | `digit-pop-in.css` | `.t-digit` | standalone |
-| `dropdown.css` | `.t-dropdown` | (not yet wired) |
-| `icon-swap.css` | `.t-icon-swap` | standalone |
+| `dropdown.css` | `.t-dropdown` | `shadcn/tooltip`, `dropdown-menu`, `popover`, `context-menu` and `select` content |
 | `input-clear-dissolve.css` | `.t-clear`, `.t-clear-mirror`, `.t-clear-glow` | standalone |
 | `input-shake.css` | `.t-input-wrap`, `.t-input`, `.t-error-msg` | (none, form layer moved to upsys) |
 | `learn-more-hover.css` | `.t-learn`, `.t-learn-chevron` | standalone |
 | `like-button.css` | `.t-like`, `.t-like-particles` | standalone |
 | `modal.css` | `.t-modal`, `.t-modal-backdrop` | `shadcn/dialog`, `shadcn/alert-dialog` |
-| `notification-badge.css` | `.t-badge` | standalone |
 | `page-side-by-side.css` | `.t-page` | standalone |
-| `panel.css` | `.t-panel` | (not yet wired) |
 | `plus-menu-morph.css` | `.t-morph`, `.t-morph-plus`, `.t-morph-menu` | standalone |
-| `reasoning-stream.css` | `.t-reason`, `.t-reason-viewport` | standalone |
 | `resize.css` | `.t-resize` | standalone |
 | `shimmer-text.css` | `.t-shimmer` | `thinking-states.css` |
-| `skeleton-reveal.css` | `.t-skel` | standalone |
 | `spinning-counter.css` | `.t-reel`, `.t-reel-col` | standalone |
-| `streaming-text.css` | `.t-stream-w` | standalone |
 | `success-check.css` | `.t-success-check` | standalone |
-| `tabs-sliding.css` | `.t-tabs`, `.t-tab`, `.t-tabs-pill` | standalone |
 | `text-swap.css` + `text-swap.ts` | `.t-text-swap` | standalone |
-| `texts-reveal.css` | `.t-stagger`, `.t-stagger-line` | standalone |
 | `thinking-states.css` | `.t-think`, `.t-think-text` | standalone |
-| `tooltip.css` | `.t-tt-wrap`, `.t-tt`, `.t-tt-trigger` | standalone |
 
 `index.css` is the barrel — imports all of the above.
 
-## Five upstream transitions that are not files here
+## Fifteen upstream transitions that are not files here
 
 One behaviour, one implementation. Where a component already did the job, the upstream recipe was merged into it or dropped, rather than shipped as a second way to do the same thing.
 
 | Upstream | Where it lives instead |
 | --- | --- |
-| `toggle` | `shadcn/switch/switch.css` — the thumb slide, on our switch. |
-| `checkbox-check` | `shadcn/checkbox/checkbox.css` — the mark draw, on our checkbox. |
+| `toggle` | `shadcn/switch/switch.svelte` — the thumb slide, on our switch. |
+| `checkbox-check` | `shadcn/checkbox/checkbox.svelte` — the fill and border, on our checkbox. |
 | `toast-open-close` | `shadcn/sonner` — svelte-sonner owns toast motion. |
 | `banner-stacking` | `shadcn/sonner` — stacking and hover spread are what it does. |
 | `matrix-dot-loader` | `ai/loading-state` — `PixelLoader` is the dot-grid loader. |
-
-Two more pairs look like duplicates and are not: `spinning-counter` rolls a number between values, `digit-pop-in` updates one in place; `streaming-text` resolves a paragraph word by word, `ai/response` only blinks a caret while `.is-streaming`.
+| `tabs-sliding` | `shadcn/tabs/tabs-list.svelte` with `lib/sliding-pill.ts` — the pill slides under the active tab. |
+| `tooltip-open-close` | `shadcn/tooltip/tooltip-content.svelte` — wired through `.t-dropdown`. |
+| `accordion` | `shadcn/accordion/accordion-content.svelte` — the expand and collapse keyframes. |
+| `skeleton-loader-and-reveal` | `shadcn/skeleton/skeleton.svelte` — the pulse. |
+| `notification-badge` | `shadcn/badge/badge.svelte` — the badge. |
+| `reasoning-stream` | `ai/reasoning/ReasoningContent.svelte` — the reasoning body. |
+| `streaming-text` | `effects/reveal/TextEffect.svelte` — word by word with a blur. |
+| `texts-reveal` | `effects/reveal/TextEffect.svelte` — the staggered rise. |
+| `panel-reveal` | `shadcn/sheet/sheet.css` — the sheet slide, imported by the sheet itself. |
+| `icon-swap` | `effects/theme-toggle/ThemeToggle.svelte` — the sun, moon and monitor icons cross-fade. |
+
+One more pair looks like a duplicate and is not: `spinning-counter` rolls a number between values, `digit-pop-in` updates one in place.
 
 ## How to consume
 
@@ -81,4 +81,4 @@ Every transition reads semantic CSS variables (`--modal-open-dur`, `--tilt-follo
 
 So the scale is single-sourced when the design layer is imported, and the transition still runs at the shipped value when it is not. A value the scale has no token for — a 1000ms tilt return, a 90ms reel stagger — stays a literal rather than being rounded onto the nearest rung. Override any of them at `:root` or per-scope to retune without forking the CSS.
 
-See the [transitions.dev SKILL](../../../../ai-doc/skills/design/motion/transitions-dev/SKILL.md) for the full token list and the per-transition variables.
+See the `transitions-dev` skill in vibe-kit (`ai-doc/skills/design/motion/transitions-dev/SKILL.md`) for the full token list and the per-transition variables.

package/src/animations/index.css

@@ -1,34 +1,23 @@
 /* Transitions.dev — bundle */
 /* Source: https://github.com/Jakubantalik/transitions.dev */
-/* Refresh the vendored upstream with `pnpm sync:transitions`. Two free
-   transitions are not here because a component already owns them: the switch
-   thumb lives in shadcn/switch/switch.css and the checkbox draw in
-   shadcn/checkbox/checkbox.css. See README.md. */
+/* Refresh the vendored upstream with `pnpm sync:transitions`. Fourteen free
+   transitions are not here because a component already owns them. See
+   README.md. */
 
 @import "./modal.css";
-@import "./icon-swap.css";
-@import "./panel.css";
 @import "./dropdown.css";
 @import "./text-swap.css";
 @import "./resize.css";
 @import "./digit-pop-in.css";
-@import "./notification-badge.css";
 @import "./page-side-by-side.css";
 @import "./input-shake.css";
 @import "./success-check.css";
 @import "./avatar-group-hover.css";
-@import "./skeleton-reveal.css";
 @import "./shimmer-text.css";
-@import "./tabs-sliding.css";
-@import "./tooltip.css";
-@import "./texts-reveal.css";
 @import "./input-clear-dissolve.css";
-@import "./accordion.css";
 @import "./learn-more-hover.css";
 @import "./card-tilt.css";
 @import "./plus-menu-morph.css";
 @import "./like-button.css";
 @import "./spinning-counter.css";
 @import "./thinking-states.css";
-@import "./reasoning-stream.css";
-@import "./streaming-text.css";

package/src/animations/upstream-coverage.test.ts

@@ -11,7 +11,7 @@
  */
 
 /*
- * The homes are not all in this folder: five live on the component that already did the job. See README.md.
+ * The homes are not all in this folder: fifteen live on the component that already did the job. See README.md.
  */
 
 import { existsSync, readdirSync, readFileSync } from "node:fs";