@heyramzi/ui 6.0.1 → 7.0.0

package/src/shadcn/hooks/use-highlighted-code.svelte.ts

@@ -0,0 +1,98 @@
+import {
+  loadHighlighter,
+  type Highlighter,
+  type HighlightedLine,
+} from "./highlighter.js";
+import type { GrammarState } from "shiki/core";
+
+/**
+ * Highlights `code` in `language`. `current` holds one entry per line: a plain
+ * string until the highlighter loads, then the line's tokens. Pass each one to
+ * the `code` prop of a `CodeBlock.Line`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * 	const lines = useHighlightedCode(() => code, () => "json");
+ * </script>
+ *
+ * {#each lines.current as line, index (index)}
+ * 	<CodeBlock.Line code={line} />
+ * {/each}
+ * ```
+ */
+export function useHighlightedCode(value: () => string, language: () => string) {
+  let loaded = $state.raw<{
+    language: string;
+    highlighter: Highlighter | null;
+  } | null>(null);
+
+  $effect(() => {
+    const lang = language();
+    let cancelled = false;
+
+    loadHighlighter(lang)
+      .then((next) => {
+        if (!cancelled) {
+          loaded = { language: lang, highlighter: next };
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  // The complete lines, highlighted. While the code streams, only the new
+  // lines are tokenized, starting from the grammar state of the last one.
+  let done: {
+    highlighter: Highlighter | null;
+    text: string;
+    lines: HighlightedLine[];
+    state?: GrammarState;
+  } = { highlighter: null, text: "", lines: [] };
+
+  const lines = $derived.by((): HighlightedLine[] => {
+    const raw = value();
+    // A trailing newline would render as an extra empty line.
+    const code = raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+    const lang = language();
+    const highlighter = loaded?.language === lang ? loaded.highlighter : null;
+
+    if (!highlighter) {
+      return code.split("\n");
+    }
+
+    let next = done;
+
+    if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+      next = { highlighter, text: "", lines: [] };
+    }
+
+    const end = code.lastIndexOf("\n") + 1;
+
+    if (end > next.text.length) {
+      const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+
+      next = {
+        highlighter,
+        text: code.slice(0, end),
+        lines: [...next.lines, ...result.lines],
+        state: result.state,
+      };
+    }
+
+    done = next;
+
+    // The last line is still being written, so it is tokenized every time.
+    const tail = code.slice(end);
+
+    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+  });
+
+  return {
+    get current() {
+      return lines;
+    },
+  };
+}

package/src/shadcn/kbd/index.ts

@@ -0,0 +1,10 @@
+import Root from "./kbd.svelte";
+import Group from "./kbd-group.svelte";
+
+export {
+  Root,
+  Group,
+  //
+  Root as Kbd,
+  Group as KbdGroup,
+};

package/src/shadcn/kbd/kbd-group.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<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn("inline-flex items-center gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/shadcn/kbd/kbd.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<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium tabular-nums select-none [&_svg:not([class*='size-'])]:size-3",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/shadcn/message-scroller/index.ts

@@ -0,0 +1,28 @@
+import Button from "./message-scroller-button.svelte";
+import Content from "./message-scroller-content.svelte";
+import Item from "./message-scroller-item.svelte";
+import Provider from "./message-scroller-provider.svelte";
+import Viewport from "./message-scroller-viewport.svelte";
+import Root from "./message-scroller.svelte";
+
+export {
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn-svelte/primitives/message-scroller";
+
+export {
+  Provider,
+  Root,
+  Viewport,
+  Content,
+  Item,
+  Button,
+  //
+  Provider as MessageScrollerProvider,
+  Root as MessageScroller,
+  Viewport as MessageScrollerViewport,
+  Content as MessageScrollerContent,
+  Item as MessageScrollerItem,
+  Button as MessageScrollerButton,
+};

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+	import { Button } from "../button/index.js";
+	import type { ButtonSize, ButtonVariant } from "../button/index.js";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		direction = "end",
+		class: className,
+		children,
+		child: childProp,
+		variant = "outline",
+		size = "sm",
+		...restProps
+	}: MessageScrollerPrimitive.ButtonProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<MessageScrollerPrimitive.Button
+	bind:ref
+	data-slot="message-scroller-button"
+	data-direction={direction}
+	data-variant={variant}
+	data-size={size}
+	{direction}
+	class={cn(
+		"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet child(state)}
+		{#if childProp}
+			{@render childProp(state)}
+		{:else}
+			<Button {variant} {size} icon={!children} {...state.props}>
+				{#if children}
+					{@render children()}
+				{:else}
+					<ArrowDownIcon />
+					<span class="sr-only">
+						{direction === "end" ? "Scroll to end" : "Scroll to start"}
+					</span>
+				{/if}
+			</Button>
+		{/if}
+	{/snippet}
+</MessageScrollerPrimitive.Button>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MessageScrollerPrimitive.ContentProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Content
+	bind:ref
+	data-slot="message-scroller-content"
+	class={cn("gap-8 flex h-max min-h-full flex-col", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		scrollAnchor = false,
+		...restProps
+	}: MessageScrollerPrimitive.ItemProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Item
+	bind:ref
+	data-slot="message-scroller-item"
+	{scrollAnchor}
+	class={cn(
+		"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+
+	let { ...restProps }: MessageScrollerPrimitive.ProviderProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Provider {...restProps} />

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.ViewportProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Viewport
+	bind:ref
+	data-slot="message-scroller-viewport"
+	class={cn(
+		"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.RootProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Root
+	bind:ref
+	data-slot="message-scroller"
+	class={cn(
+		"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/tabs/tabs-list.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "@heyramzi/utils";
+	import { slidingPill } from "../../lib/sliding-pill.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		size = "default",
+		children,
 		...restProps
 	}: TabsPrimitive.ListProps & {
 		/** Same steps as Button: sm 28, default 32, lg 36. */
@@ -18,8 +20,17 @@
 	data-slot="tabs-list"
 	data-size={size}
 	class={cn(
-		"bg-muted text-muted-foreground group/tabs-list inline-flex data-[size=sm]:h-7 data-[size=default]:h-8 data-[size=lg]:h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		"bg-muted text-muted-foreground group/tabs-list relative inline-flex data-[size=sm]:h-7 data-[size=default]:h-8 data-[size=lg]:h-9 w-fit items-center justify-center rounded-lg p-[3px]",
 		className,
 	)}
 	{...restProps}
-/>
+>
+	<!-- Zero width until the attachment measures, so a server-rendered list
+	     shows the trigger's own active background and never an empty pill. -->
+	<span
+		aria-hidden="true"
+		class="bg-background dark:border-input dark:bg-input/30 pointer-events-none absolute inset-y-[3px] left-0 z-0 w-0 rounded-md border border-transparent opacity-0 shadow-sm transition-[transform,width,opacity] duration-[var(--duration-fast,250ms)] ease-[var(--ease-smooth-out,cubic-bezier(0.22,1,0.36,1))] will-change-[transform,width] motion-reduce:transition-opacity"
+		{@attach slidingPill}
+	></span>
+	{@render children?.()}
+</TabsPrimitive.List>

package/src/shadcn/tabs/tabs-trigger.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground relative inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground group-data-[pill=on]/tabs-list:data-[state=active]:border-transparent group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent group-data-[pill=on]/tabs-list:data-[state=active]:shadow-none dark:group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent relative z-[1] inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className,
 	)}
 	{...restProps}

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 ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	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">
+		<ChevronRightIcon />
+	</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/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.",