@heyramzi/ui 6.1.0 → 7.0.0

package/src/shadcn/code-block/index.ts

@@ -0,0 +1,42 @@
+import Actions from "./code-block-actions.svelte";
+import Content from "./code-block-content.svelte";
+import CopyButton from "./code-block-copy-button.svelte";
+import Footer from "./code-block-footer.svelte";
+import Header from "./code-block-header.svelte";
+import Title from "./code-block-title.svelte";
+import Line, {
+  codeBlockLineVariants,
+  type CodeBlockLineToken,
+  type CodeBlockLineVariant,
+} from "./code-block-line.svelte";
+import Root, {
+  codeBlockVariants,
+  type CodeBlockSize,
+  type CodeBlockVariant,
+} from "./code-block.svelte";
+
+export {
+  Root,
+  Header,
+  Title,
+  Actions,
+  CopyButton,
+  Content,
+  Line,
+  Footer,
+  codeBlockVariants,
+  codeBlockLineVariants,
+  type CodeBlockVariant,
+  type CodeBlockSize,
+  type CodeBlockLineVariant,
+  type CodeBlockLineToken,
+  //
+  Root as CodeBlock,
+  Header as CodeBlockHeader,
+  Title as CodeBlockTitle,
+  Actions as CodeBlockActions,
+  CopyButton as CodeBlockCopyButton,
+  Content as CodeBlockContent,
+  Line as CodeBlockLine,
+  Footer as CodeBlockFooter,
+};

package/src/shadcn/hooks/highlighter.ts

@@ -0,0 +1,132 @@
+import {
+  createHighlighterCore,
+  type GrammarState,
+  type HighlighterCore,
+  type ThemedToken,
+} from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+  bash: () => import("shiki/langs/shellscript.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  svelte: () => import("shiki/langs/svelte.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+};
+
+const aliases: Record<string, keyof typeof languages> = {
+  js: "javascript",
+  md: "markdown",
+  py: "python",
+  sh: "bash",
+  shell: "bash",
+  shellscript: "bash",
+  ts: "typescript",
+  yml: "yaml",
+  zsh: "bash",
+};
+
+let highlighter: Promise<HighlighterCore> | undefined;
+
+function getHighlighter() {
+  highlighter ??= createHighlighterCore({
+    themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+    langs: [],
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  });
+
+  return highlighter;
+}
+
+function getLanguage(language: string) {
+  const name = language.toLowerCase();
+
+  if (name === "ansi") {
+    return name;
+  }
+
+  if (name in languages) {
+    return name as keyof typeof languages;
+  }
+
+  return aliases[name] ?? null;
+}
+
+// One highlighted token. Render it as a `<span>` with this style and class.
+export type HighlightedToken = {
+  content: string;
+  style?: string;
+  class?: string;
+};
+
+// A line of plain text, or the highlighted tokens of a line.
+export type HighlightedLine = string | HighlightedToken[];
+
+function toHighlightedLine(tokens: ThemedToken[]): HighlightedToken[] {
+  return tokens.map((token) => ({
+    content: token.content,
+    style: Object.entries(token.htmlStyle ?? {})
+      .map(([property, value]) => `${property}:${value}`)
+      .join(";"),
+    class: "text-(--shiki-light) dark:text-(--shiki-dark)",
+  }));
+}
+
+export type Highlighter = NonNullable<Awaited<ReturnType<typeof loadHighlighter>>>;
+
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+export async function loadHighlighter(language: string) {
+  const lang = getLanguage(language);
+
+  if (!lang) {
+    return null;
+  }
+
+  const shiki = await getHighlighter();
+
+  if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languages[lang]);
+  }
+
+  return {
+    // Returns the tokens of each line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code: string, state?: GrammarState) {
+      const tokenize = (text: string) =>
+        shiki.codeToTokens(text, {
+          lang,
+          themes: { light: "github-light", dark: "github-dark" },
+          defaultColor: false,
+          grammarState: state,
+        }).tokens;
+
+      // ANSI has no grammar state, so each line is tokenized on its own and
+      // gets the same colors whether it arrives in one piece or streams.
+      const tokens =
+        lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+
+      return {
+        lines: tokens.map((line) => toHighlightedLine(line)),
+        state: shiki.getLastGrammarState(tokens),
+      };
+    },
+  };
+}
+
+// Returns the tokens of each line, or null for a language that is not listed.
+export async function highlightCode(code: string, language: string) {
+  const highlighter = await loadHighlighter(language);
+
+  return highlighter ? highlighter.highlight(code).lines : null;
+}

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}
+/>