@heyramzi/ui 2.24.0 → 3.1.0

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

@@ -11,6 +11,8 @@
 		/** WHY: opt-out of "Enter submits, Shift+Enter newline" if the consumer
 		 *  prefers explicit Cmd/Ctrl+Enter only. */
 		enterSubmits?: boolean;
+		/** Accessible name. A placeholder isn't one. Translate at the call site. */
+		label?: string;
 	}
 </script>
 
@@ -23,6 +25,7 @@
 		name = "message",
 		placeholder = "Ask anything",
 		enterSubmits = true,
+		label = "Message",
 		...rest
 	}: PromptInputTextareaProps = $props();
 
@@ -50,7 +53,8 @@
 		const submit =
 			form.querySelector<HTMLButtonElement>("[data-prompt-input-submit]") ??
 			form.querySelector<HTMLButtonElement>('button[type="submit"]');
-		if (submit?.disabled) return;
+		// While a reply generates the button turns into type="button" (Stop), and requestSubmit throws on a non-submit button.
+		if (submit && (submit.disabled || submit.type !== "submit")) return;
 		if (submit) {
 			form.requestSubmit(submit);
 		} else {
@@ -70,4 +74,5 @@
 	bind:value
 	onkeydown={handleKeyDown}
 	{placeholder}
+	aria-label={label}
 	{...rest}></textarea>

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

@@ -0,0 +1,14 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+export interface PromptInputTextareaProps extends Omit<HTMLTextareaAttributes, "value" | "name" | "onkeydown"> {
+    value?: string;
+    name?: string;
+    class?: string;
+    /** WHY: opt-out of "Enter submits, Shift+Enter newline" if the consumer
+     *  prefers explicit Cmd/Ctrl+Enter only. */
+    enterSubmits?: boolean;
+    /** Accessible name. A placeholder isn't one. Translate at the call site. */
+    label?: string;
+}
+declare const $$Component: import("svelte").Component<PromptInputTextareaProps, {}, "value">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

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

package/src/ai/prompt-input/prompt-input.test.ts

@@ -0,0 +1,64 @@
+import { flushSync, mount, unmount } from "svelte";
+import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+import PromptInputSubmit, {
+  type PromptInputStatus,
+} from "./PromptInputSubmit.svelte";
+import PromptInputTextarea from "./PromptInputTextarea.svelte";
+
+function render(status: PromptInputStatus) {
+  const form = document.createElement("form");
+  const onSubmit = vi.fn((event: SubmitEvent) => event.preventDefault());
+  form.addEventListener("submit", onSubmit);
+  document.body.appendChild(form);
+  const textarea = mount(PromptInputTextarea, { target: form, props: {} });
+  const submit = mount(PromptInputSubmit, { target: form, props: { status } });
+  flushSync();
+  const field = form.querySelector("textarea");
+  if (!field) throw new Error("PromptInputTextarea rendered no textarea");
+  return {
+    field,
+    onSubmit,
+    enter: () => field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true })),
+    done: () => {
+      void unmount(textarea);
+      void unmount(submit);
+      form.remove();
+    },
+  };
+}
+
+const errors: unknown[] = [];
+const onError = (event: ErrorEvent) => {
+  errors.push(event.error);
+  event.preventDefault();
+};
+
+afterEach(() => {
+  window.removeEventListener("error", onError);
+  errors.length = 0;
+});
+
+describe("PromptInputTextarea Enter", () => {
+  it("submits when ready", () => {
+    const { onSubmit, enter, done } = render("ready");
+    enter();
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    done();
+  });
+
+  // 10 Nov 2026: Enter mid-reply handed requestSubmit the Stop button, and it threw a TypeError.
+  it("does nothing while a reply is generating", () => {
+    window.addEventListener("error", onError);
+    const { onSubmit, enter, done } = render("streaming");
+    enter();
+    expect(errors).toEqual([]);
+    expect(onSubmit).not.toHaveBeenCalled();
+    done();
+  });
+
+  it("is named Message by default", () => {
+    const { field, done } = render("ready");
+    expect(field.getAttribute("aria-label")).toBe("Message");
+    done();
+  });
+});

package/src/ai/reasoning/Reasoning.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+export interface ReasoningProps extends CollapsiblePrimitive.RootProps {
+    isStreaming?: boolean;
+    duration?: number;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ReasoningProps, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/reasoning/ReasoningContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+export interface ReasoningContentProps extends CollapsiblePrimitive.ContentProps {
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ReasoningContentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/reasoning/ReasoningTrigger.svelte

@@ -36,13 +36,14 @@
 	)}
 	{...rest}
 >
-	<BrainIcon class={cn("size-4 shrink-0", ctx.isStreaming && "animate-pulse")} />
+	<BrainIcon aria-hidden="true" class={cn("size-4 shrink-0", ctx.isStreaming && "animate-pulse")} />
 	{#if children}
 		{@render children()}
 	{:else}
 		<span>{label}</span>
 	{/if}
 	<ChevronDownIcon
+		aria-hidden="true"
 		class="size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180"
 	/>
 </CollapsibleTrigger>

package/src/ai/reasoning/ReasoningTrigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+export interface ReasoningTriggerProps extends CollapsiblePrimitive.TriggerProps {
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<ReasoningTriggerProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/response/Response.css

@@ -1,15 +1,26 @@
-/* WHY: Svelte never scopes marked's {@html} output, so the caret reaches its last child
-   with :global() while the parent class stays scoped. */
-.ai-response.is-streaming > :last-child::after {
-  content: "";
-  display: inline-block;
-  width: 0.5ch;
-  height: 1em;
-  margin-left: 0.1ch;
-  vertical-align: text-bottom;
-  border-radius: 1px;
-  background: currentColor;
-  animation: ai-response-caret 1s steps(1, end) infinite;
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* WHY: Svelte never scopes marked's {@html} output, so the caret reaches its last child
+     with :global() while the parent class stays scoped. */
+  .ai-response.is-streaming > :last-child::after {
+    content: "";
+    display: inline-block;
+    width: 0.5ch;
+    height: 1em;
+    margin-left: 0.1ch;
+    vertical-align: text-bottom;
+    border-radius: 1px;
+    background: currentColor;
+    animation: ai-response-caret 1s steps(1, end) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ai-response.is-streaming > :last-child::after {
+      animation: none;
+      opacity: 0.7;
+    }
+  }
 }
 
 @keyframes ai-response-caret {
@@ -22,10 +33,3 @@
     opacity: 0;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ai-response.is-streaming > :last-child::after {
-    animation: none;
-    opacity: 0.7;
-  }
-}

package/src/ai/response/Response.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
+    content: string;
+    /** Render a blinking caret after the content while tokens are still arriving. */
+    streaming?: boolean;
+    class?: string;
+}
+import "./Response.css";
+declare const $$Component: import("svelte").Component<ResponseProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/suggestion/Suggestion.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps } from "../../shadcn/button/index.js";
+export interface SuggestionProps extends Omit<ButtonProps, "onclick" | "children"> {
+    suggestion: string;
+    onclick?: (suggestion: string) => void;
+    class?: string;
+    children?: import("svelte").Snippet;
+}
+declare const $$Component: import("svelte").Component<SuggestionProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/suggestion/Suggestions.svelte

@@ -5,10 +5,12 @@
 
 	export interface SuggestionsProps extends HTMLAttributes<HTMLDivElement> {
 		children?: Snippet;
+		/** The group's name for a screen reader. */
+		label?: string;
 		class?: string;
 	}
 
-	let { children, class: className, ...rest }: SuggestionsProps = $props();
+	let { children, label = "Suggestions", class: className, ...rest }: SuggestionsProps = $props();
 </script>
 
 <div
@@ -18,7 +20,8 @@
 		"[scrollbar-width:none]",
 		className,
 	)}
-	role="list"
+	role="group"
+	aria-label={label}
 	{...rest}
 >
 	{@render children?.()}

package/src/ai/suggestion/Suggestions.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface SuggestionsProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    /** The group's name for a screen reader. */
+    label?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<SuggestionsProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/typing-dots/TypingDots.css

@@ -1,23 +1,33 @@
-.typing-dots {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
+@layer theme, base, components, utilities;
 
-.typing-dots .typing-dot {
-  width: var(--typing-dot-size, 4px);
-  height: var(--typing-dot-size, 4px);
-  border-radius: 999px;
-  background: currentColor;
-  animation: typing-dot 900ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
-}
+@layer components {
+  .typing-dots {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
 
-.typing-dots .typing-dot:nth-child(2) {
-  animation-delay: 120ms;
-}
+  .typing-dots .typing-dot {
+    width: var(--typing-dot-size, 4px);
+    height: var(--typing-dot-size, 4px);
+    border-radius: 999px;
+    background: currentColor;
+    animation: typing-dot 900ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
+  }
+
+  .typing-dots .typing-dot:nth-child(2) {
+    animation-delay: 120ms;
+  }
 
-.typing-dots .typing-dot:nth-child(3) {
-  animation-delay: 240ms;
+  .typing-dots .typing-dot:nth-child(3) {
+    animation-delay: 240ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .typing-dots .typing-dot {
+      animation: none;
+    }
+  }
 }
 
 @keyframes typing-dot {
@@ -31,9 +41,3 @@
     transform: translateY(-2px);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .typing-dots .typing-dot {
-    animation: none;
-  }
-}

package/src/ai/typing-dots/TypingDots.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface TypingDotsProps extends HTMLAttributes<HTMLElement> {
+    /** Dot diameter in px. */
+    size?: number;
+    /** Set, even to "", the dots become a `role="status"` line; the text shows when non-empty. */
+    label?: string;
+    class?: string;
+}
+import "./TypingDots.css";
+declare const $$Component: import("svelte").Component<TypingDotsProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/ai/voice-waveform/VoiceWaveform.css

@@ -1,26 +1,36 @@
-.waveform {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  height: 28px;
-}
+@layer theme, base, components, utilities;
 
-.waveform span {
-  width: 3px;
-  height: 8px;
-  border-radius: 999px;
-  background: currentColor;
-  opacity: 0.45;
-  transition:
-    height 180ms cubic-bezier(0.25, 1, 0.5, 1),
-    opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
-}
+@layer components {
+  .waveform {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    height: 28px;
+  }
 
-.waveform.active span {
-  height: var(--bar-height);
-  opacity: 0.9;
-  animation: voice-bar 760ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
-  animation-delay: var(--delay);
+  .waveform span {
+    width: 3px;
+    height: 8px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.45;
+    transition:
+      height 180ms cubic-bezier(0.25, 1, 0.5, 1),
+      opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .waveform.active span {
+    height: var(--bar-height);
+    opacity: 0.9;
+    animation: voice-bar 760ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
+    animation-delay: var(--delay);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .waveform.active span {
+      animation: none;
+    }
+  }
 }
 
 @keyframes voice-bar {
@@ -32,9 +42,3 @@
     transform: scaleY(1);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .waveform.active span {
-    animation: none;
-  }
-}

package/src/ai/voice-waveform/VoiceWaveform.svelte.d.ts

@@ -0,0 +1,10 @@
+import "./VoiceWaveform.css";
+import type { HTMLAttributes } from "svelte/elements";
+export interface VoiceWaveformProps extends HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    class?: string;
+    bars?: readonly number[];
+}
+declare const $$Component: import("svelte").Component<VoiceWaveformProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/animations/avatar-group-hover.css

@@ -1,3 +1,5 @@
+@layer theme, base, components, utilities;
+
 /* Transitions.dev — Avatar group hover */
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
@@ -6,28 +8,30 @@
   transition-timing-function inline before those writes, or the ease is wrong.
 */
 
-:root {
-  --avatar-lift: -4px;
-  --avatar-dur: 320ms;
-  --avatar-scale: 1.05;
-  --avatar-falloff: 0.45;
-  --avatar-ease-in: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --avatar-ease-out: var(--ease-smooth-out);
-}
-
-/* Hover-spring transition only — bring your own avatar/chip
-   styling (size, shape, border, stacking, background). */
-.t-avatar {
-  transform-origin: center;
-  /* translateY before scale so scale doesn't amplify the lift offset. */
-  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
-  transition: transform var(--avatar-dur) var(--avatar-ease-in);
-  will-change: transform;
-}
+@layer components {
+  :root {
+    --avatar-lift: -4px;
+    --avatar-dur: 320ms;
+    --avatar-scale: 1.05;
+    --avatar-falloff: 0.45;
+    --avatar-ease-in: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --avatar-ease-out: var(--ease-smooth-out);
+  }
 
-@media (prefers-reduced-motion: reduce) {
+  /* Hover-spring transition only — bring your own avatar/chip
+     styling (size, shape, border, stacking, background). */
   .t-avatar {
-    transition: none !important;
-    transform: none !important;
+    transform-origin: center;
+    /* translateY before scale so scale doesn't amplify the lift offset. */
+    transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
+    transition: transform var(--avatar-dur) var(--avatar-ease-in);
+    will-change: transform;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-avatar {
+      transition: none !important;
+      transform: none !important;
+    }
   }
 }

package/src/animations/card-tilt.css

@@ -1,71 +1,77 @@
-/* Card hover tilt, transitions.dev `3d-tilt`: bind pointermove to the flat outer
-   `.t-tilt`, never the card, or its rotating edges slip under the cursor and the
-   hover flickers. */
-:root {
-  --tilt-perspective: 1000px;
-  --tilt-return: 1000ms;
-  --tilt-return-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tilt-follow: var(--duration-slow, 300ms);
-  --tilt-follow-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tilt-glare-opacity: 0.32;
-  --tilt-glare-fade: 300ms;
-  --tilt-glare-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-/* touch-action lets a finger drag the tilt instead of scrolling the page. */
-.t-tilt {
-  touch-action: none;
-}
+@layer theme, base, components, utilities;
 
-.t-tilt-card {
-  position: relative;
-  border-radius: var(--radius-xl, 10px);
-  overflow: hidden;
-  transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg))
-    rotateY(var(--tilt-ry, 0deg));
-  transform-style: preserve-3d;
-  transition: transform var(--tilt-return) var(--tilt-return-ease);
-  will-change: transform;
-}
-/* A short follow clock while the pointer moves, so the tilt tracks it 1:1. */
-.t-tilt-card.is-tilting {
-  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
-}
+@layer components {
+  /* Card hover tilt, transitions.dev `3d-tilt`: bind pointermove to the flat outer
+     `.t-tilt`, never the card, or its rotating edges slip under the cursor and the
+     hover flickers. */
+  :root {
+    --tilt-perspective: 1000px;
+    --tilt-return: 1000ms;
+    --tilt-return-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --tilt-follow: var(--duration-slow, 300ms);
+    --tilt-follow-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --tilt-glare-opacity: 0.32;
+    --tilt-glare-fade: 300ms;
+    --tilt-glare-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  }
 
-/* Layered soft circles that add like light at the pointer position. */
-.t-tilt-glare {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0;
-  mix-blend-mode: screen;
-  background:
-    radial-gradient(
-      circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
-      rgb(255 255 255 / 0.48),
-      rgb(255 255 255 / 0.06) 52%,
-      rgb(255 255 255 / 0) 84%
-    ),
-    radial-gradient(
-      circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
-      rgb(255 255 255 / 0.22),
-      rgb(255 255 255 / 0.04) 58%,
-      rgb(255 255 255 / 0) 78%
-    ),
-    radial-gradient(
-      circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
-      rgb(255 255 255 / 0.1),
-      rgb(255 255 255 / 0) 88%
-    );
-  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
-}
-.t-tilt.is-hover .t-tilt-glare {
-  opacity: var(--tilt-glare-opacity);
-}
+  /* touch-action lets a finger drag the tilt instead of scrolling the page. */
+  .t-tilt {
+    touch-action: none;
+  }
 
-@media (prefers-reduced-motion: reduce) {
   .t-tilt-card {
-    transform: none !important;
-    transition: none !important;
+    position: relative;
+    border-radius: var(--radius-xl, 10px);
+    overflow: hidden;
+    transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg))
+      rotateY(var(--tilt-ry, 0deg));
+    transform-style: preserve-3d;
+    transition: transform var(--tilt-return) var(--tilt-return-ease);
+    will-change: transform;
+  }
+
+  /* A short follow clock while the pointer moves, so the tilt tracks it 1:1. */
+  .t-tilt-card.is-tilting {
+    transition: transform var(--tilt-follow) var(--tilt-follow-ease);
+  }
+
+  /* Layered soft circles that add like light at the pointer position. */
+  .t-tilt-glare {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
+    mix-blend-mode: screen;
+    background:
+      radial-gradient(
+        circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+        rgb(255 255 255 / 0.48),
+        rgb(255 255 255 / 0.06) 52%,
+        rgb(255 255 255 / 0) 84%
+      ),
+      radial-gradient(
+        circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+        rgb(255 255 255 / 0.22),
+        rgb(255 255 255 / 0.04) 58%,
+        rgb(255 255 255 / 0) 78%
+      ),
+      radial-gradient(
+        circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+        rgb(255 255 255 / 0.1),
+        rgb(255 255 255 / 0) 88%
+      );
+    transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
+  }
+
+  .t-tilt.is-hover .t-tilt-glare {
+    opacity: var(--tilt-glare-opacity);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-tilt-card {
+      transform: none !important;
+      transition: none !important;
+    }
   }
 }