@heyramzi/ui 6.1.0 → 7.0.0

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/showcase/AiSection.svelte

@@ -3,7 +3,6 @@
 <!-- ========================== -->
 <script lang="ts">
 	import ShowcaseStage from "./ShowcaseStage.svelte";
-	import Convo from "./demos/ai/conversation.svelte";
 	import Prompt from "./demos/ai/prompt-input.svelte";
 	import LoadingStateDemo from "./demos/ai/loading-state.svelte";
 	import ThinkingDotsDemo from "./demos/ai/thinking-dots.svelte";
@@ -22,12 +21,6 @@
 	// =========================
 	// The order is the order a turn happens in: the surface it is said on, the waiting, the thinking, the decision, and last the voice.
 	const demos: Demo[] = [
-		{
-			title: "Conversation",
-			note: "Chat bubbles, responses and per-message actions.",
-			Comp: Convo,
-			path: "import { Conversation, ConversationContent, Response } from '@heyramzi/ui/ai';\nimport * as Message from '@heyramzi/ui/shadcn/message';\nimport * as Bubble from '@heyramzi/ui/shadcn/bubble';",
-		},
 		{
 			title: "PromptInput",
 			note: "Suggestions, textarea, status-aware submit.",

package/src/showcase/demos/shadcn/code-block.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import DownloadIcon from "@lucide/svelte/icons/download";
+	import FileCodeIcon from "@lucide/svelte/icons/file-code";
+	import WrapTextIcon from "@lucide/svelte/icons/text-wrap";
+	import * as CodeBlock from "../../../shadcn/code-block/index.js";
+	import { useHighlightedCode } from "../../../shadcn/hooks/use-highlighted-code.svelte.js";
+	import { Button } from "../../../shadcn/button/index.js";
+
+	const code = `import { streamText } from "ai"
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const result = streamText({
+    model: "anthropic/claude-sonnet-4.5",
+    system: "You are a helpful assistant. Answer in one short paragraph.",
+    messages,
+  })
+
+  return result.toUIMessageStreamResponse()
+}`;
+
+	function download(value: string, filename: string) {
+		const url = URL.createObjectURL(new Blob([value], { type: "text/plain" }));
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = filename;
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+
+	let wrap = $state(false);
+
+	const lines = useHighlightedCode(
+		() => code,
+		() => "ts"
+	);
+</script>
+
+<div class="w-full max-w-lg">
+	<CodeBlock.Root>
+		<CodeBlock.Header>
+			<CodeBlock.Title>
+				<FileCodeIcon />
+				app/api/chat/route.ts
+			</CodeBlock.Title>
+			<CodeBlock.Actions>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon
+					aria-label="Wrap lines"
+					aria-pressed={wrap}
+					class="aria-pressed:text-foreground"
+					onclick={() => (wrap = !wrap)}
+				>
+					<WrapTextIcon />
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon
+					aria-label="Download"
+					onclick={() => download(code, "route.ts")}
+				>
+					<DownloadIcon />
+				</Button>
+				<CodeBlock.CopyButton value={code} />
+			</CodeBlock.Actions>
+		</CodeBlock.Header>
+		<CodeBlock.Content {wrap} lineNumbers>
+			{#each lines.current as line, index (index)}
+				<CodeBlock.Line
+					variant={index >= 5 && index <= 9 ? "highlighted" : "default"}
+					code={line}
+				/>
+			{/each}
+		</CodeBlock.Content>
+	</CodeBlock.Root>
+</div>

package/src/showcase/demos/shadcn/index.ts

@@ -13,6 +13,7 @@ import ButtonDemo from "./button.svelte";
 import CalendarDemo from "./calendar.svelte";
 import CardDemo from "./card.svelte";
 import CheckboxDemo from "./checkbox.svelte";
+import CodeBlockDemo from "./code-block.svelte";
 import CollapsibleDemo from "./collapsible.svelte";
 import CommandDemo from "./command.svelte";
 import ContextMenuDemo from "./context-menu.svelte";
@@ -26,6 +27,7 @@ import InputOtpDemo from "./input-otp.svelte";
 import LabelDemo from "./label.svelte";
 import MarkerDemo from "./marker.svelte";
 import MessageDemo from "./message.svelte";
+import MessageScrollerDemo from "./message-scroller.svelte";
 import PopoverDemo from "./popover.svelte";
 import ProgressDemo from "./progress.svelte";
 import RadioGroupDemo from "./radio-group.svelte";
@@ -44,6 +46,7 @@ import TextareaDemo from "./textarea.svelte";
 import ToggleDemo from "./toggle.svelte";
 import ToggleGroupDemo from "./toggle-group.svelte";
 import TooltipDemo from "./tooltip.svelte";
+import TraceDemo from "./trace.svelte";
 
 export type ShadcnDemo = {
   name: string;
@@ -138,6 +141,13 @@ export const SHADCN_DEMOS: ShadcnDemo[] = [
     path: 'import { Checkbox } from "@heyramzi/ui/shadcn/checkbox";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
     Comp: CheckboxDemo,
   },
+  {
+    name: "code-block",
+    title: "Code Block",
+    note: "Displays code, terminal output and diffs with an optional header, line numbers and a copy button.",
+    path: 'import * as CodeBlock from "@heyramzi/ui/shadcn/code-block";\nimport { useHighlightedCode } from "@heyramzi/ui/shadcn/hooks/use-highlighted-code.svelte.js";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
+    Comp: CodeBlockDemo,
+  },
   {
     name: "collapsible",
     title: "Collapsible",
@@ -229,6 +239,13 @@ export const SHADCN_DEMOS: ShadcnDemo[] = [
     path: 'import * as Avatar from "@heyramzi/ui/shadcn/avatar";\nimport * as Bubble from "@heyramzi/ui/shadcn/bubble";\nimport * as Marker from "@heyramzi/ui/shadcn/marker";\nimport * as Message from "@heyramzi/ui/shadcn/message";',
     Comp: MessageDemo,
   },
+  {
+    name: "message-scroller",
+    title: "Message Scroller",
+    note: "A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.",
+    path: 'import * as Card from "@heyramzi/ui/shadcn/card";\nimport * as DropdownMenu from "@heyramzi/ui/shadcn/dropdown-menu";\nimport * as Empty from "@heyramzi/ui/shadcn/empty";\nimport * as InputGroup from "@heyramzi/ui/shadcn/input-group";\nimport * as MessageScroller from "@heyramzi/ui/shadcn/message-scroller";\nimport * as Tooltip from "@heyramzi/ui/shadcn/tooltip";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
+    Comp: MessageScrollerDemo,
+  },
   {
     name: "popover",
     title: "Popover",
@@ -355,4 +372,11 @@ export const SHADCN_DEMOS: ShadcnDemo[] = [
     path: 'import * as Tooltip from "@heyramzi/ui/shadcn/tooltip";\nimport { buttonVariants } from "@heyramzi/ui/shadcn/button";',
     Comp: TooltipDemo,
   },
+  {
+    name: "trace",
+    title: "Trace",
+    note: "The building block for reasoning, tool calls, sources and more.",
+    path: 'import * as Bubble from "@heyramzi/ui/shadcn/bubble";\nimport * as CodeBlock from "@heyramzi/ui/shadcn/code-block";\nimport * as Message from "@heyramzi/ui/shadcn/message";\nimport * as Trace from "@heyramzi/ui/shadcn/trace";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
+    Comp: TraceDemo,
+  },
 ];

package/src/showcase/demos/shadcn/message-scroller.svelte

@@ -0,0 +1,44 @@
+<!-- Ours, not upstream's: theirs streams through @ai-sdk/svelte and docs-only helpers this package doesn't ship. -->
+<script lang="ts">
+	import * as Bubble from "../../../shadcn/bubble/index.js";
+	import * as Message from "../../../shadcn/message/index.js";
+	import * as MessageScroller from "../../../shadcn/message-scroller/index.js";
+	import { Response } from "../../../ai/index.js";
+
+	const turns = [
+		{ id: "q1", role: "user", text: "How should I clean up our beam effects?" },
+		{
+			id: "a1",
+			role: "assistant",
+			text: "Here is the plan:\n\n1. **Extract** the beam into the shared package\n2. **Showcase** it on the Effects page\n3. **Migrate** both apps onto the shared copy",
+		},
+		{ id: "q2", role: "user", text: "And the old copies?" },
+		{ id: "a2", role: "assistant", text: "Delete them in the same change, so nothing imports the stale one." },
+	] as const;
+</script>
+
+<div class="h-68 w-full max-w-md">
+	<MessageScroller.Provider>
+		<MessageScroller.Root>
+			<MessageScroller.Viewport>
+				<MessageScroller.Content class="gap-4 p-1">
+					{#each turns as turn (turn.id)}
+						{@const user = turn.role === "user"}
+						<MessageScroller.Item messageId={turn.id} scrollAnchor={user}>
+							<Message.Root align={user ? "end" : "start"}>
+								<Message.Content>
+									<Bubble.Root variant={user ? "default" : "muted"} align={user ? "end" : "start"}>
+										<Bubble.Content>
+											{#if user}{turn.text}{:else}<Response content={turn.text} />{/if}
+										</Bubble.Content>
+									</Bubble.Root>
+								</Message.Content>
+							</Message.Root>
+						</MessageScroller.Item>
+					{/each}
+				</MessageScroller.Content>
+			</MessageScroller.Viewport>
+			<MessageScroller.Button />
+		</MessageScroller.Root>
+	</MessageScroller.Provider>
+</div>

package/src/showcase/demos/shadcn/trace.svelte

@@ -0,0 +1,51 @@
+<!-- Ours, not upstream's: theirs streams through @ai-sdk/svelte and docs-only helpers this package doesn't ship. -->
+<script lang="ts">
+	import CircleAlertIcon from "@lucide/svelte/icons/circle-alert";
+	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+	import LoaderCircleIcon from "@lucide/svelte/icons/loader-circle";
+	import * as CodeBlock from "../../../shadcn/code-block/index.js";
+	import * as Trace from "../../../shadcn/trace/index.js";
+
+	const steps = [
+		{ command: "pnpm --version", output: "12.10.1" },
+		{
+			command: "git diff --stat HEAD~1 -- package.json pnpm-lock.yaml",
+			output: " package.json | 2 +-\n 1 file changed, 1 insertion(+), 1 deletion(-)",
+		},
+		{
+			command: "pnpm install --frozen-lockfile",
+			error: "ERR_PNPM_OUTDATED_LOCKFILE  pnpm-lock.yaml is not up to date with package.json",
+		},
+	];
+</script>
+
+<div class="w-full max-w-md">
+	<Trace.Root>
+		<Trace.Line>
+			<Trace.Icon><CircleCheckIcon /></Trace.Icon>
+			<Trace.Title>Thought for 5s</Trace.Title>
+		</Trace.Line>
+		{#each steps as step (step.command)}
+			<Trace.Collapsible>
+				<Trace.CollapsibleTrigger>
+					<Trace.Line status={step.error ? "error" : undefined}>
+						<Trace.Icon>
+							{#if step.error}<CircleAlertIcon />{:else}<CircleCheckIcon />{/if}
+						</Trace.Icon>
+						<Trace.Title>{step.error ? "Failed to run" : "Ran"} {step.command}</Trace.Title>
+					</Trace.Line>
+				</Trace.CollapsibleTrigger>
+				<Trace.CollapsibleContent>
+					<CodeBlock.Root size="sm" variant={step.error ? "destructive" : "default"}>
+						<CodeBlock.Content wrap class="max-h-64" code={step.error ?? step.output} />
+					</CodeBlock.Root>
+				</Trace.CollapsibleContent>
+			</Trace.Collapsible>
+		{/each}
+		<Trace.Line status="running">
+			<Trace.Icon><LoaderCircleIcon class="animate-spin" /></Trace.Icon>
+			<Trace.Title>Writing the fix</Trace.Title>
+			<Trace.Description>2 sources</Trace.Description>
+		</Trace.Line>
+	</Trace.Root>
+</div>

package/src/showcase/kit.ts

@@ -1,5 +1,5 @@
 // The showcase of @heyramzi/ui itself: its shadcn primitives,
-// its motion vocabulary, its visual effects, its chart set and its AI surface.
+// its motion vocabulary, its visual effects and its AI surface. The chart set's own section ships with `@heyramzi/charts/showcase`.
 
 // WHY they ship with the package and not with the app showing them: they demo
 
@@ -13,5 +13,4 @@
 export { default as AnimationsSection } from "./AnimationsSection.svelte";
 export { default as ShadcnSection } from "./ShadcnSection.svelte";
 export { default as EffectsSection } from "./EffectsSection.svelte";
-export { default as ChartsSection } from "./ChartsSection.svelte";
 export { default as AiSection } from "./AiSection.svelte";

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