@heyramzi/ui 6.0.1 → 7.0.0

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

package/src/ai/conversation/stick-to-bottom-context.svelte.ts

@@ -1,131 +0,0 @@
-import { setContext, getContext } from "svelte";
-
-const STICK_TO_BOTTOM_CONTEXT_KEY = Symbol("stick-to-bottom-context");
-
-const SCROLL_THRESHOLD_PX = 200;
-
-export class StickToBottomContext {
-  #element: HTMLElement | null = $state(null);
-  #isAtBottom = $state(true);
-  #userHasScrolled = $state(false);
-  #resizeObserver: ResizeObserver | null = null;
-  #mutationObserver: MutationObserver | null = null;
-  #intersectionObserver: IntersectionObserver | null = null;
-  #sentinel: HTMLElement | null = null;
-
-  isAtBottom = $derived(this.#isAtBottom);
-
-  setElement(element: HTMLElement) {
-    this.#cleanup();
-    this.#element = element;
-    if (element) this.#setupObservers();
-  }
-
-  scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
-    if (!this.#element) return;
-    this.#userHasScrolled = false;
-    this.#element.scrollTo({ top: this.#element.scrollHeight, behavior });
-  };
-
-  destroy() {
-    this.#cleanup();
-    this.#element = null;
-  }
-
-  #handleScroll = () => {
-    if (!this.#element) return;
-    const { scrollTop, scrollHeight, clientHeight } = this.#element;
-    const isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX;
-    this.#isAtBottom = isAtBottom;
-    if (!isAtBottom) {
-      this.#userHasScrolled = true;
-    } else if (this.#userHasScrolled) {
-      this.#userHasScrolled = false;
-    }
-  };
-
-  #setupObservers() {
-    if (!this.#element) return;
-
-    this.#sentinel = document.createElement("div");
-    this.#sentinel.style.height = "1px";
-    this.#sentinel.style.width = "100%";
-    this.#sentinel.style.pointerEvents = "none";
-    this.#sentinel.style.opacity = "0";
-    this.#sentinel.setAttribute("data-stick-to-bottom-sentinel", "");
-    this.#element.appendChild(this.#sentinel);
-
-    this.#intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (entry?.isIntersecting) {
-          this.#isAtBottom = true;
-          this.#userHasScrolled = false;
-        }
-      },
-      { threshold: 0, root: this.#element },
-    );
-    this.#intersectionObserver.observe(this.#sentinel);
-
-    this.#element.addEventListener("scroll", this.#handleScroll, { passive: true });
-
-    this.#resizeObserver = new ResizeObserver(() => {
-      this.#checkPosition();
-      if (this.#isAtBottom && !this.#userHasScrolled) {
-        this.scrollToBottom("auto");
-      }
-    });
-    this.#resizeObserver.observe(this.#element);
-
-    this.#mutationObserver = new MutationObserver(() => {
-      requestAnimationFrame(() => {
-        const shouldAutoScroll = this.#isAtBottom && !this.#userHasScrolled;
-        this.#checkPosition();
-        if (shouldAutoScroll) this.scrollToBottom("smooth");
-      });
-    });
-    this.#mutationObserver.observe(this.#element, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
-
-    this.#checkPosition();
-  }
-
-  #checkPosition() {
-    if (!this.#element) return;
-    const { scrollTop, scrollHeight, clientHeight } = this.#element;
-    this.#isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX;
-  }
-
-  #cleanup() {
-    this.#resizeObserver?.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#intersectionObserver?.disconnect();
-    if (this.#element) {
-      this.#element.removeEventListener("scroll", this.#handleScroll);
-    }
-    if (this.#sentinel && this.#element?.contains(this.#sentinel)) {
-      this.#element.removeChild(this.#sentinel);
-    }
-    this.#resizeObserver = null;
-    this.#mutationObserver = null;
-    this.#intersectionObserver = null;
-    this.#sentinel = null;
-  }
-}
-
-export function setStickToBottomContext(): StickToBottomContext {
-  const context = new StickToBottomContext();
-  setContext(STICK_TO_BOTTOM_CONTEXT_KEY, context);
-  return context;
-}
-
-export function getStickToBottomContext(): StickToBottomContext {
-  const context = getContext<StickToBottomContext>(STICK_TO_BOTTOM_CONTEXT_KEY);
-  if (!context) {
-    throw new Error("Conversation parts must be used inside a <Conversation>.");
-  }
-  return context;
-}

package/src/charts/animated-value.css

@@ -1,7 +0,0 @@
-/* Styles for AnimatedValue. Plain stylesheet (see area-chart.css for why).
-   `.hr-animated-value` is the component's own namespaced fallback for tabular
-   figures (it also carries the `tabular-nums` utility class). */
-
-.hr-animated-value {
-  font-variant-numeric: tabular-nums;
-}