@heyramzi/ui 7.0.0 → 8.0.0

package/src/shadcn/badge/badge.svelte

@@ -4,16 +4,13 @@
 	export const badgeVariants = tv({
 		base: "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none",
 		variants: {
-			// Three weights a label can carry: filled, tinted, outlined. Severity is
-			// `StatusBadge` reading `TONE_CLASS`, not a badge colour. `destructive`,
-			// `warning`, `ghost` and `link` went on 4 Sep 2026.
+			// Three weights a label can carry: filled, tinted, outlined. Severity is the
+			// `tone` prop, which reads `TONE_CLASS`, not a variant.
 			variant: {
 				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
 				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-				// Kept when the three weights landed: severity is `StatusBadge` reading its tone, but a consumer outside this workspace still needs one badge that says "this is wrong" without a status
-
-				// scale behind it.
+				// For a consumer that wants one "this is wrong" badge without a tone prop.
 				destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20",
 			},
 		},
@@ -28,16 +25,20 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { TONE_CLASS, type Tone } from "../../lib/tone.js";
 
 	let {
 		ref = $bindable(null),
 		href,
 		class: className,
 		variant = "default",
+		tone,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariant;
+		/** The severity scale. Draws an outlined chip in the tone's colours and ignores `variant`. */
+		tone?: Tone;
 	} = $props();
 </script>
 
@@ -46,7 +47,7 @@
 	bind:this={ref}
 	data-slot="badge"
 	{href}
-	class={cn(badgeVariants({ variant }), className)}
+	class={cn(badgeVariants({ variant: tone ? "outline" : variant }), tone && TONE_CLASS[tone], className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/shadcn/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { DotsThree } from "phosphor-svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef, type WithoutChildren } from "@heyramzi/utils";
 
@@ -18,6 +18,6 @@
 	class={cn("flex size-9 items-center justify-center", className)}
 	{...restProps}
 >
-	<EllipsisIcon class="size-4" />
+	<DotsThree class="size-4" />
 	<span class="sr-only">More</span>
 </span>

package/src/shadcn/breadcrumb/breadcrumb-separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { CaretRight } from "phosphor-svelte";
 	import { cn, type WithElementRef } from "@heyramzi/utils";
 	import type { HTMLLiAttributes } from "svelte/elements";
 
@@ -22,6 +22,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRightIcon />
+		<CaretRight />
 	{/if}
 </li>

package/src/shadcn/calendar/calendar-month-select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { CaretDown } from "phosphor-svelte";
 
 	let {
 		ref = $bindable(null),
@@ -37,7 +37,7 @@
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
-				<ChevronDownIcon class="size-4" />
+				<CaretDown class="size-4" />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.MonthSelect>

package/src/shadcn/calendar/calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { CaretRight } from "phosphor-svelte";
 	import { buttonVariants, type ButtonVariant } from "../button/index.js";
 	import { cn } from "@heyramzi/utils";
 
@@ -16,7 +16,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class="size-4" />
+	<CaretRight class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.NextButton

package/src/shadcn/calendar/calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { CaretLeft } from "phosphor-svelte";
 	import { buttonVariants, type ButtonVariant } from "../button/index.js";
 	import { cn } from "@heyramzi/utils";
 
@@ -16,7 +16,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class="size-4" />
+	<CaretLeft class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton

package/src/shadcn/calendar/calendar-year-select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { CaretDown } from "phosphor-svelte";
 
 	let {
 		ref = $bindable(null),
@@ -36,7 +36,7 @@
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
-				<ChevronDownIcon class="size-4" />
+				<CaretDown class="size-4" />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.YearSelect>

package/src/shadcn/calendar/calendar.svelte

@@ -24,6 +24,10 @@
 		yearFormat = "numeric",
 		day,
 		disableDaysOutsideMonth = false,
+		// Monday first and six rows always: a five-week month would otherwise resize
+		// the popover as the reader pages through the year.
+		weekStartsOn = 1,
+		fixedWeeks = true,
 		...restProps
 	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
 		buttonVariant?: ButtonVariant;
@@ -52,6 +56,8 @@ get along, so we shut typescript up by casting `value` to `never`.
 	bind:placeholder
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
+	{weekStartsOn}
+	{fixedWeeks}
 	class={cn(
 		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
 		className,

package/src/shadcn/code-block/code-block-copy-button.svelte

@@ -1,59 +1,10 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import CopyIcon from "@lucide/svelte/icons/copy";
-	import { Button, type ButtonProps } from "../button/index.js";
-	import { cn } from "@heyramzi/utils";
+	import type { ComponentProps } from "svelte";
+	import CopyButton from "../../components/copy/copy-button.svelte";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		value,
-		variant = "ghost",
-		size = "sm",
-		onclick,
-		...restProps
-	}: Omit<ButtonProps, "onclick"> & {
-		value: string;
-		onclick?: (e: MouseEvent) => void;
-	} = $props();
-
-	let copied = $state(false);
-	let timeout: ReturnType<typeof setTimeout> | undefined;
-
-	function copy() {
-		navigator.clipboard
-			.writeText(value)
-			.then(() => {
-				copied = true;
-				clearTimeout(timeout);
-				timeout = setTimeout(() => (copied = false), 2000);
-			})
-			.catch(() => {});
-	}
-
-	onDestroy(() => clearTimeout(timeout));
+	// WHY this wraps the shared control: the code block's own copy button drew a
+	// second icon swap and a second clipboard write. `md` is the 28px icon Button.
+	let { size = "md", ...restProps }: ComponentProps<typeof CopyButton> = $props();
 </script>
 
-<Button
-	bind:ref
-	data-slot="code-block-copy-button"
-	data-copied={copied || undefined}
-	{variant}
-	{size}
-	icon
-	aria-label={copied ? "Copied" : "Copy"}
-	class={cn(className)}
-	onclick={(e) => {
-		onclick?.(e);
-		copy();
-	}}
-	{...restProps}
->
-	{#if copied}
-		<CheckIcon />
-	{:else}
-		<CopyIcon />
-	{/if}
-</Button>
-<span aria-live="polite" class="sr-only">{copied ? "Copied" : ""}</span>
+<CopyButton data-slot="code-block-copy-button" {size} {...restProps} />

package/src/shadcn/command/index.ts

@@ -1,3 +1,4 @@
+import { computeCommandScore } from "bits-ui";
 import Root from "./command.svelte";
 import Loading from "./command-loading.svelte";
 import Dialog from "./command-dialog.svelte";
@@ -10,7 +11,9 @@ import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
 import LinkItem from "./command-link-item.svelte";
 
+// The scorer Command uses by default, for a custom `filter` that wants to rank its own words.
 export {
+  computeCommandScore,
   Root,
   Dialog,
   Empty,

package/src/shadcn/field/index.ts

@@ -8,6 +8,7 @@ import Title from "./field-title.svelte";
 import Description from "./field-description.svelte";
 import Separator from "./field-separator.svelte";
 import Error from "./field-error.svelte";
+import Simple from "./simple-field.svelte";
 
 export {
   Field,
@@ -20,6 +21,7 @@ export {
   Description,
   Separator,
   Error,
+  Simple,
   //
   Set as FieldSet,
   Legend as FieldLegend,
@@ -30,4 +32,5 @@ export {
   Description as FieldDescription,
   Separator as FieldSeparator,
   Error as FieldError,
+  Simple as SimpleField,
 };

package/src/shadcn/field/simple-field.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import Field from "./field.svelte";
+	import FieldLabel from "./field-label.svelte";
+	import FieldDescription from "./field-description.svelte";
+	import FieldError from "./field-error.svelte";
+
+	interface Props {
+		label?: string;
+		description?: string;
+		error?: string;
+		/** Id of the control the label binds to. Also picks the control that gets the message link. */
+		for?: string;
+		/** "default" is text-sm foreground; "muted" is a text-xs micro-label. */
+		labelVariant?: "default" | "muted";
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		label,
+		description,
+		error,
+		for: htmlFor,
+		labelVariant = "default",
+		class: className,
+		children,
+	}: Props = $props();
+
+	const uid = $props.id();
+	const messageId = `${uid}-message`;
+	let message = $derived(error ?? description);
+
+	// WHY an attachment: the control is the caller's snippet, so the wrapper can't
+	// set its props. Wiring the DOM here means no call site can forget the link.
+	const CONTROL = "input, textarea, select, [role=combobox], [role=switch], [role=checkbox]";
+	const link: Attachment<HTMLElement> = (node) => {
+		if (!message) return;
+		const control =
+			(htmlFor ? node.querySelector<HTMLElement>(`[id="${CSS.escape(htmlFor)}"]`) : null) ??
+			node.querySelector<HTMLElement>(CONTROL);
+		if (!control) return;
+		const before = control.getAttribute("aria-describedby");
+		control.setAttribute("aria-describedby", [before, messageId].filter(Boolean).join(" "));
+		if (error) control.setAttribute("aria-invalid", "true");
+		return () => {
+			if (before === null) control.removeAttribute("aria-describedby");
+			else control.setAttribute("aria-describedby", before);
+			if (error) control.removeAttribute("aria-invalid");
+		};
+	};
+</script>
+
+<Field class={cn("gap-2", className)} data-invalid={error ? "true" : undefined} {@attach link}>
+	{#if label}
+		<FieldLabel
+			for={htmlFor}
+			class={labelVariant === "muted" ? "text-muted-foreground text-xs" : undefined}
+		>
+			{label}
+		</FieldLabel>
+	{/if}
+	{@render children()}
+	{#if error}
+		<FieldError id={messageId} class="text-xs">{error}</FieldError>
+	{:else if description}
+		<FieldDescription id={messageId} class="text-xs">{description}</FieldDescription>
+	{/if}
+</Field>

package/src/shadcn/field/simple-field.test.ts

@@ -0,0 +1,47 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import SimpleField from "./simple-field.svelte";
+
+const input = createRawSnippet(() => ({ render: () => `<input id="email" />` }));
+
+function render(props: { error?: string; description?: string }) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(SimpleField, { target, props: { label: "Email", for: "email", children: input, ...props } });
+  flushSync();
+  return {
+    target,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+describe("SimpleField", () => {
+  it("links the error to its input and marks it invalid", () => {
+    const { target, done } = render({ error: "Enter a valid email" });
+    const control = target.querySelector("input")!;
+    const message = target.querySelector("[data-slot=field-error]")!;
+    expect(message.textContent).toContain("Enter a valid email");
+    expect(message.getAttribute("role")).toBe("alert");
+    expect(control.getAttribute("aria-describedby")).toBe(message.id);
+    expect(control.getAttribute("aria-invalid")).toBe("true");
+    done();
+  });
+
+  it("links the description when there is no error", () => {
+    const { target, done } = render({ description: "We never share it" });
+    const control = target.querySelector("input")!;
+    const message = target.querySelector("[data-slot=field-description]")!;
+    expect(control.getAttribute("aria-describedby")).toBe(message.id);
+    expect(control.hasAttribute("aria-invalid")).toBe(false);
+    done();
+  });
+
+  it("leaves the input alone when there is nothing to say", () => {
+    const { target, done } = render({});
+    expect(target.querySelector("input")!.hasAttribute("aria-describedby")).toBe(false);
+    done();
+  });
+});

package/src/shadcn/message-scroller/message-scroller-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
-	import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+	import { ArrowDown } from "phosphor-svelte";
 	import { Button } from "../button/index.js";
 	import type { ButtonSize, ButtonVariant } from "../button/index.js";
 	import { cn } from "@heyramzi/utils";
@@ -41,7 +41,7 @@
 				{#if children}
 					{@render children()}
 				{:else}
-					<ArrowDownIcon />
+					<ArrowDown />
 					<span class="sr-only">
 						{direction === "end" ? "Scroll to end" : "Scroll to start"}
 					</span>

package/src/shadcn/radio-group/radio-group-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { Circle } from "phosphor-svelte";
 	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
 
 	let {
@@ -22,7 +22,8 @@
 	{#snippet children({ checked })}
 		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
 			{#if checked}
-				<CircleIcon
+				<Circle
+					weight="fill"
 					class="fill-primary absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
 				/>
 			{/if}

package/src/shadcn/sheet/sheet-content.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <script lang="ts">
+	import "./sheet.css";
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import type { Snippet } from "svelte";
 	import SheetPortal from "./sheet-portal.svelte";

package/src/shadcn/sheet/sheet.css

@@ -0,0 +1,48 @@
+/* The sheet slide: transitions.dev panel reveal, owned by the sheet. */
+
+:root {
+  --sheet-open-dur: 300ms;
+  --sheet-close-dur: 250ms;
+  --sheet-translate: 100%;
+  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.t-sheet {
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--sheet-close-dur) var(--sheet-ease),
+    opacity var(--sheet-close-dur) var(--sheet-ease);
+  will-change: transform, opacity;
+}
+
+.t-sheet[data-side="right"] {
+  transform: translateX(var(--sheet-translate));
+}
+
+.t-sheet[data-side="left"] {
+  transform: translateX(calc(-1 * var(--sheet-translate)));
+}
+
+.t-sheet[data-side="top"] {
+  transform: translateY(calc(-1 * var(--sheet-translate)));
+}
+
+.t-sheet[data-side="bottom"] {
+  transform: translateY(var(--sheet-translate));
+}
+
+.t-sheet[data-state="open"] {
+  transform: translate(0, 0);
+  opacity: 1;
+  pointer-events: auto;
+  transition:
+    transform var(--sheet-open-dur) var(--sheet-ease),
+    opacity var(--sheet-open-dur) var(--sheet-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-sheet {
+    transition: none !important;
+  }
+}

package/src/shadcn/sonner/sonner.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
-	import InfoIcon from "@lucide/svelte/icons/info";
-	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
-	import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+	import { CheckCircle, Info, Warning, XCircle } from "phosphor-svelte";
 
+	import { Spinner } from "../spinner/index.js";
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
 
@@ -17,18 +14,18 @@
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
 	>{#snippet loadingIcon()}
-		<Loader2Icon class="size-4 animate-spin" />
+		<Spinner />
 	{/snippet}
 	{#snippet successIcon()}
-		<CircleCheckIcon class="size-4" />
+		<CheckCircle class="size-4" />
 	{/snippet}
 	{#snippet errorIcon()}
-		<OctagonXIcon class="size-4" />
+		<XCircle class="size-4" />
 	{/snippet}
 	{#snippet infoIcon()}
-		<InfoIcon class="size-4" />
+		<Info class="size-4" />
 	{/snippet}
 	{#snippet warningIcon()}
-		<TriangleAlertIcon class="size-4" />
+		<Warning class="size-4" />
 	{/snippet}
 </Sonner>

package/src/shadcn/toggle-group/toggle-group.svelte

@@ -32,10 +32,17 @@
 		...restProps
 	}: ToggleGroupPrimitive.RootProps & ToggleVariants & { spacing?: number } = $props();
 
+	// WHY: getters, so an item reads the group's current props, not the ones it mounted with.
 	setToggleGroupCtx({
-		variant,
-		size,
-		spacing,
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
 	});
 </script>
 

package/src/shadcn/trace/trace-collapsible-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Collapsible from "../collapsible/index.js";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { CaretRight } from "phosphor-svelte";
 	import { cn, type WithoutChild } from "@heyramzi/utils";
 	import TraceIcon from "./trace-icon.svelte";
 	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
@@ -24,6 +24,6 @@
 >
 	{@render children?.()}
 	<TraceIcon class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
-		<ChevronRightIcon />
+		<CaretRight />
 	</TraceIcon>
 </Collapsible.Trigger>

package/src/ai/composer/Composer.css

@@ -1,108 +0,0 @@
-.chat-composer {
-  border-top: 1px solid color-mix(in srgb, var(--border, rgba(0, 0, 0, 0.1)) 40%, transparent);
-  padding: 0.625rem 0.75rem;
-}
-
-.chat-composer-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 0.375rem;
-}
-
-.chat-composer-input {
-  /* WHY: grows with content; min/max bounds can be widened via `inputClass`. */
-  field-sizing: content;
-  max-height: 6rem;
-  flex: 1;
-  resize: none;
-  border: 0;
-  border-radius: 1rem;
-  background: color-mix(in srgb, var(--muted, rgba(0, 0, 0, 0.06)) 40%, transparent);
-  padding: 0.5rem 0.875rem;
-  font-size: 0.875rem;
-  color: inherit;
-  transition: background-color 120ms ease;
-}
-
-.chat-composer-input::placeholder {
-  color: var(--muted-foreground, rgba(0, 0, 0, 0.45));
-}
-
-.chat-composer-input:focus {
-  outline: none;
-  background: color-mix(in srgb, var(--muted, rgba(0, 0, 0, 0.06)) 60%, transparent);
-  /* WHY: a soft ring in the conversation's accent, which is per-surface. */
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--chat-accent, var(--primary, #6647f0)) 28%, transparent);
-}
-
-.chat-composer-input:disabled {
-  opacity: 0.4;
-}
-
-.chat-composer-send {
-  display: flex;
-  height: 2.25rem;
-  width: 2.25rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 9999px;
-  background: var(--chat-accent, var(--primary, #6647f0));
-  color: var(--chat-accent-foreground, #fff);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  transition:
-    transform 150ms ease,
-    box-shadow 150ms ease;
-}
-
-.chat-composer-send:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
-}
-
-.chat-composer-send:active:not(:disabled) {
-  transform: translateY(0) scale(0.95);
-}
-
-.chat-composer-send:disabled {
-  cursor: not-allowed;
-  opacity: 0.2;
-  box-shadow: none;
-}
-
-.chat-composer-icon {
-  height: 0.875rem;
-  width: 0.875rem;
-}
-
-.chat-composer-spin {
-  animation: chat-composer-spin 800ms linear infinite;
-}
-
-@keyframes chat-composer-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.chat-composer-error {
-  margin-top: 0.25rem;
-  padding: 0 0.25rem;
-  font-size: 0.75rem;
-  color: var(--destructive, #dc2626);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chat-composer-send {
-    transition: background-color 150ms ease;
-  }
-  .chat-composer-send:hover:not(:disabled) {
-    transform: none;
-  }
-  .chat-composer-spin {
-    animation: none;
-  }
-}