@heyramzi/ui 6.1.0 → 8.0.0

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/index.ts

@@ -0,0 +1,29 @@
+import CollapsibleContent from "./trace-collapsible-content.svelte";
+import CollapsibleTrigger from "./trace-collapsible-trigger.svelte";
+import Collapsible from "./trace-collapsible.svelte";
+import Description from "./trace-description.svelte";
+import Icon from "./trace-icon.svelte";
+import Title from "./trace-title.svelte";
+import Root from "./trace.svelte";
+import Line, { type TraceLineStatus } from "./trace-line.svelte";
+
+export {
+  Root,
+  Line,
+  Icon,
+  Title,
+  Description,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type TraceLineStatus,
+  //
+  Root as Trace,
+  Line as TraceLine,
+  Icon as TraceIcon,
+  Title as TraceTitle,
+  Description as TraceDescription,
+  Collapsible as TraceCollapsible,
+  CollapsibleTrigger as TraceCollapsibleTrigger,
+  CollapsibleContent as TraceCollapsibleContent,
+};

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Collapsible from "../collapsible/index.js";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<CollapsiblePrimitive.ContentProps> = $props();
+</script>
+
+<Collapsible.Content
+	bind:ref
+	data-slot="trace-collapsible-content"
+	class="duration-200 min-w-0 overflow-hidden [--bits-accordion-content-height:var(--bits-collapsible-content-height)] data-open:animate-accordion-down data-closed:animate-accordion-up"
+	{...restProps}
+>
+	<div
+		data-slot="trace-collapsible-content-inner"
+		class={cn(
+			"mt-2 mb-1 ml-[calc(--spacing(2)_-_1px)] border-l pr-1 pl-4 leading-relaxed min-w-0 wrap-break-word text-muted-foreground",
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</Collapsible.Content>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Collapsible from "../collapsible/index.js";
+	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";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<CollapsiblePrimitive.TriggerProps> = $props();
+</script>
+
+<Collapsible.Trigger
+	bind:ref
+	data-slot="trace-collapsible-trigger"
+	class={cn(
+		"gap-1 rounded-md focus-visible:ring-3 focus-visible:ring-ring/50 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<TraceIcon class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
+		<CaretRight />
+	</TraceIcon>
+</Collapsible.Trigger>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Collapsible from "../collapsible/index.js";
+	import { cn } from "@heyramzi/utils";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		class: className,
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<Collapsible.Root
+	bind:ref
+	bind:open
+	data-slot="trace-collapsible"
+	class={cn("flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+/>

package/src/shadcn/trace/trace-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-description"
+	class={cn("shrink-0 text-muted-foreground/70 tabular-nums", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace-icon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-icon"
+	aria-hidden="true"
+	class={cn(
+		"size-4 [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace-line.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	export type TraceLineStatus = "running" | "error" | "pending";
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		status,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		status?: TraceLineStatus;
+	} = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-line"
+	data-status={status}
+	class={cn(
+		"gap-2 text-sm flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-title"
+	class={cn("min-w-0 truncate motion-reduce:shimmer-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="trace"
+	class={cn(
+		"gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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;
-  }
-}

package/src/ai/composer/Composer.svelte

@@ -1,111 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-
-	export interface ComposerProps {
-		value: string;
-		class?: string;
-		/** Extra classes for the textarea (e.g. a taller min/max height). */
-		inputClass?: string;
-		placeholder?: string;
-		/** Accent color for the send button and focus ring. Falls back to `--primary`. */
-		accent?: string;
-		sending?: boolean;
-		disabled?: boolean;
-		error?: string | null;
-		sendLabel?: string;
-		/**
-		 * Whether the message can be sent. When omitted, falls back to
-		 * "has non-empty text".
-		 */
-		canSend?: boolean;
-		onSubmit: () => void;
-		inputRef?: HTMLTextAreaElement | null;
-		/** Rendered left of the textarea (e.g. an attach button). */
-		leading?: Snippet;
-		/** Rendered above the input row (e.g. a reply-to banner). */
-		header?: Snippet;
-		/** Replaces the default spinner shown while sending. */
-		busy?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import "./Composer.css";
-	import { cn } from "@heyramzi/utils";
-	import { fade } from "svelte/transition";
-	import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
-	import Spinner from "phosphor-svelte/lib/Spinner";
-
-	let {
-		value = $bindable(),
-		class: className,
-		inputClass,
-		placeholder = "Write a message...",
-		accent,
-		sending = false,
-		disabled = false,
-		error = null,
-		sendLabel = "Send message",
-		canSend,
-		onSubmit,
-		inputRef = $bindable(null),
-		leading,
-		header,
-		busy,
-	}: ComposerProps = $props();
-
-	// When canSend is not supplied, fall back to "has non-empty text".
-	const submittable = $derived(canSend ?? value.trim().length > 0);
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Enter" && !e.shiftKey) {
-			e.preventDefault();
-			onSubmit();
-		}
-	}
-</script>
-
-<!-- WHY: visuals are scoped CSS so the composer renders without the consumer's
-     Tailwind generating arbitrary classes; theme hooks come from CSS vars. -->
-<div class={cn("chat-composer", className)} style:--chat-accent={accent}>
-	{@render header?.()}
-
-	<form
-		onsubmit={(e) => {
-			e.preventDefault();
-			onSubmit();
-		}}
-		class="chat-composer-row"
-	>
-		{@render leading?.()}
-
-		<textarea
-			bind:this={inputRef}
-			bind:value
-			onkeydown={handleKeydown}
-			{placeholder}
-			disabled={disabled || sending}
-			rows={1}
-			class={cn("chat-composer-input", inputClass)}
-		></textarea>
-
-		<button
-			type="submit"
-			disabled={disabled || sending || !submittable}
-			class="chat-composer-send"
-			aria-label={sendLabel}
-		>
-			{#if sending && busy}
-				{@render busy()}
-			{:else if sending}
-				<Spinner class="chat-composer-icon chat-composer-spin" />
-			{:else}
-				<PaperPlaneRight class="chat-composer-icon" />
-			{/if}
-		</button>
-	</form>
-
-	{#if error}
-		<p class="chat-composer-error" in:fade={{ duration: 150 }}>{error}</p>
-	{/if}
-</div>

package/src/ai/composer/index.ts

@@ -1,10 +0,0 @@
-import Composer from "./Composer.svelte";
-
-import type { ComposerProps } from "./Composer.svelte";
-
-export {
-  Composer,
-  type ComposerProps,
-  //
-  Composer as Root,
-};

package/src/ai/conversation/Conversation.svelte

@@ -1,28 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	export interface ConversationProps extends HTMLAttributes<HTMLDivElement> {
-		children?: Snippet;
-		class?: string;
-	}
-</script>
-
-<script lang="ts">
-	import { cn } from "@heyramzi/utils";
-	import { setStickToBottomContext } from "./stick-to-bottom-context.svelte.js";
-
-	let { class: className, children, ...rest }: ConversationProps = $props();
-
-	setStickToBottomContext();
-</script>
-
-<div
-	class={cn("relative flex h-full flex-col overflow-hidden", className)}
-	role="log"
-	aria-live="polite"
-	aria-atomic="false"
-	{...rest}
->
-	{@render children?.()}
-</div>

package/src/ai/conversation/ConversationContent.svelte

@@ -1,35 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	export interface ConversationContentProps extends HTMLAttributes<HTMLDivElement> {
-		children?: Snippet;
-		class?: string;
-	}
-</script>
-
-<script lang="ts">
-	import { cn } from "@heyramzi/utils";
-	import { onDestroy } from "svelte";
-	import { getStickToBottomContext } from "./stick-to-bottom-context.svelte.js";
-
-	let { class: className, children, ...rest }: ConversationContentProps = $props();
-
-	const context = getStickToBottomContext();
-	let element = $state<HTMLDivElement | null>(null);
-
-	$effect(() => {
-		if (element) {
-			context.setElement(element);
-			context.scrollToBottom("smooth");
-		}
-	});
-
-	onDestroy(() => {
-		context.destroy();
-	});
-</script>
-
-<div bind:this={element} class={cn("flex-1 overflow-y-auto", className)} {...rest}>
-	{@render children?.()}
-</div>

package/src/ai/conversation/ConversationEmptyState.svelte

@@ -1,46 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	export interface ConversationEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
-		title?: string;
-		description?: string;
-		icon?: Snippet;
-		children?: Snippet;
-		class?: string;
-	}
-</script>
-
-<script lang="ts">
-	import { cn } from "@heyramzi/utils";
-
-	let {
-		class: className,
-		title,
-		description,
-		icon,
-		children,
-		...rest
-	}: ConversationEmptyStateProps = $props();
-</script>
-
-<div
-	class={cn("flex size-full flex-col items-center justify-center gap-3 p-6 text-center", className)}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		{#if icon}
-			<div class="text-[color:var(--muted-foreground,inherit)]">
-				{@render icon()}
-			</div>
-		{/if}
-		<div class="space-y-1">
-			{#if title}<h3 class="text-sm font-medium">{title}</h3>{/if}
-			{#if description}
-				<p class="text-[color:var(--muted-foreground,inherit)] text-sm">{description}</p>
-			{/if}
-		</div>
-	{/if}
-</div>

package/src/ai/conversation/ConversationScrollButton.svelte

@@ -1,51 +0,0 @@
-<script lang="ts" module>
-	import type { ButtonProps } from "../../shadcn/button/index.js";
-
-	export interface ConversationScrollButtonProps extends Omit<ButtonProps, "onclick"> {
-		class?: string;
-		onclick?: (event: MouseEvent) => void;
-	}
-</script>
-
-<script lang="ts">
-	import { cn } from "@heyramzi/utils";
-	import { Button } from "../../shadcn/button/index.js";
-	import ArrowDown from "phosphor-svelte/lib/ArrowDown";
-	import { fly } from "svelte/transition";
-	import { backOut } from "svelte/easing";
-	import { getStickToBottomContext } from "./stick-to-bottom-context.svelte.js";
-
-	let { class: className, onclick, ...rest }: ConversationScrollButtonProps = $props();
-
-	const context = getStickToBottomContext();
-
-	function handleClick(event: MouseEvent) {
-		context.scrollToBottom();
-		onclick?.(event);
-	}
-</script>
-
-{#if !context.isAtBottom}
-	<div
-		in:fly={{ duration: 300, y: 10, easing: backOut }}
-		out:fly={{ duration: 200, y: 10, easing: backOut }}
-		class="pointer-events-auto absolute bottom-3 left-1/2 -translate-x-1/2"
-	>
-		<Button
-			class={cn(
-				"rounded-full shadow-lg backdrop-blur-sm",
-				"bg-[color:var(--background,white)]/80 hover:bg-[color:var(--background,white)]/95",
-				"border-[color:var(--border,rgba(0,0,0,0.1))]",
-				className,
-			)}
-			onclick={handleClick}
-			icon
-			type="button"
-			variant="outline"
-			aria-label="Scroll to latest"
-			{...rest}
-		>
-			<ArrowDown class="size-4" />
-		</Button>
-	</div>
-{/if}

package/src/ai/conversation/index.ts

@@ -1,33 +0,0 @@
-import Conversation from "./Conversation.svelte";
-import ConversationContent from "./ConversationContent.svelte";
-import ConversationEmptyState from "./ConversationEmptyState.svelte";
-import ConversationScrollButton from "./ConversationScrollButton.svelte";
-import {
-  StickToBottomContext,
-  getStickToBottomContext,
-  setStickToBottomContext,
-} from "./stick-to-bottom-context.svelte.js";
-
-import type { ConversationProps } from "./Conversation.svelte";
-import type { ConversationContentProps } from "./ConversationContent.svelte";
-import type { ConversationEmptyStateProps } from "./ConversationEmptyState.svelte";
-import type { ConversationScrollButtonProps } from "./ConversationScrollButton.svelte";
-
-export {
-  Conversation,
-  ConversationContent,
-  ConversationEmptyState,
-  ConversationScrollButton,
-  StickToBottomContext,
-  getStickToBottomContext,
-  setStickToBottomContext,
-  type ConversationProps,
-  type ConversationContentProps,
-  type ConversationEmptyStateProps,
-  type ConversationScrollButtonProps,
-  //
-  Conversation as Root,
-  ConversationContent as Content,
-  ConversationEmptyState as EmptyState,
-  ConversationScrollButton as ScrollButton,
-};