@heyramzi/ui 6.1.0 → 7.0.0

package/COMPONENTS.md

@@ -21,6 +21,7 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `calendar` — Calendar
 - `card` — Card
 - `checkbox` — Checkbox
+- `code-block` — CodeBlock. Highlight with `useHighlightedCode` from `@heyramzi/ui/shadcn/hooks/use-highlighted-code.svelte` (Shiki, ANSI too)
 - `collapsible` — Collapsible
 - `command` — Command
 - `context-menu` — ContextMenu
@@ -34,6 +35,7 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `label` — Label
 - `marker` — Marker
 - `message` — Message
+- `message-scroller` — MessageScroller, the chat transcript scroller: follows a streamed reply, anchors each turn, keeps place on prepend
 - `popover` — Popover
 - `progress` — Progress
 - `radio-group` — RadioGroup
@@ -53,6 +55,7 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `toggle` — toggleVariants, ToggleSize, ToggleVariant, ToggleVariants
 - `toggle-group` — ToggleGroup
 - `tooltip` — Tooltip
+- `trace` — Trace, an agent's steps: reasoning, tool calls and sources as status rows that can expand
 
 ## Effects (`src/effects`)
 
@@ -66,7 +69,7 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `reveal` — InView, AnimatedGroup, TextEffect, observeInView, RevealPreset, RevealPer
 - `shader-gradient` — ShaderGradient, ShaderGradientProps, ShaderGradientUniforms
 - `spotlight` — Spotlight
-- `theme-toggle` — ThemeToggle, revealTheme. Props: `isDark`, `mode` (`light`, `dark`, `system`; swaps in the Monitor icon), `onToggle`, `variant` (`outline`, `ghost`, `inverted`; `inverted` boolean is an alias), `size`, `label`, `title`, `skipTransition`, `class`. `revealTheme(event, apply, { skip, duration })` is the circular wipe on its own: `import { revealTheme } from "@heyramzi/ui"` (the `./lib/*` subpath points at `.js` and the source is `.ts`).
+- `theme-toggle` — ThemeToggle, revealTheme. Props: `isDark`, `mode` (`light`, `dark`, `system`; swaps in the Monitor icon), `onToggle`, `variant` (`outline`, `ghost`, `inverted`; `inverted` boolean is an alias), `size`, `label`, `title`, `skipTransition`, `class`. `revealTheme(event, apply, { skip, duration, easing })` is the circular wipe on its own: `import { revealTheme } from "@heyramzi/ui"` (the `./lib/*` subpath points at `.js` and the source is `.ts`).
 
 ## Animations (`src/animations`)
 
@@ -102,7 +105,6 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 
 - `composer` — Composer, ComposerProps
 - `confirmation` — Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction
-- `conversation` — Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton
 - `loading-state` — PixelLoader
 - `prompt-input` — PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit
 - `reasoning` — Reasoning, ReasoningTrigger, ReasoningContent
@@ -112,30 +114,9 @@ The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS
 - `typing-dots` — TypingDots
 - `voice-waveform` — VoiceWaveform
 
-## Charts (`src/charts`)
-
-- `animated-value` — AnimatedValue
-- `area-chart` — AreaChart
-- `bar-chart` — BarChart
-- `crosshair` — Crosshair
-- `donut-chart` — DonutChart
-- `edge-fade` — EdgeFade
-- `figure` — Figure
-- `gauge-chart` — GaugeChart
-- `hover-focus` — HoverFocus
-- `legend` — Legend
-- `line-chart` — LineChart
-- `number-chart` — NumberChart
-- `reveal` — Reveal
-- `ring-chart` — RingChart
-- `sparkline` — Sparkline
-- `stat-card` — StatCard
-- `time-series-chart` — TimeSeriesChart
-- `trend-pill` — TrendPill
-- `primitives` — ChartContainer, ChartTooltip, ChartStyle, ChartConfig, TooltipSeriesItem, getPayloadConfigFromPayload
-
 ---
 
 Skipped on purpose: brand assets (logos, marks, brand renderer, language flags,
-locale switch), kanban and status (they live in `@heyramzi/board`). The bot avatars
+locale switch), kanban, list, gantt and status (they live in `@heyramzi/tasks`), and charts
+(they live in `@heyramzi/charts`). The bot avatars
 are in `src/agents`, imported from `@heyramzi/ui/agents`.

package/README.md

@@ -1,7 +1,7 @@
 # @heyramzi/ui
 
 Svelte 5 UI primitives you copy into your project and own. Components, visual
-effects, CSS animations, charts and a small set of chat and AI surfaces. No build step, no runtime wrapper,
+effects, CSS animations and a small set of chat and AI surfaces. No build step, no runtime wrapper,
 no framework lock-in.
 
 The package is a source registry. Every component is a folder under
@@ -15,9 +15,7 @@ only a convenience.
   image comparison, shimmer gradients and a theme toggle.
 - `src/animations` keyframe CSS for dropdowns, modals, tooltips, text swaps,
   success checks and the rest of the motion vocabulary.
-- `src/ai` chat and AI surfaces: conversation, composer, prompt input, response, reasoning, confirmation and loaders.
-- `src/charts` SVG charts: line, area, bar, donut, ring, gauge, sparkline,
-  time series, and stat cards.
+- `src/ai` chat and AI surfaces: composer, prompt input, response, reasoning, confirmation and loaders.
 - `src/agents` bot avatars and a cast grid, imported from `@heyramzi/ui/agents`:
   `AgentAvatar` draws an eyes-only face from a name, role, shape and colour, and
   `AgentCast` lays a list of agents out as cards you can pick from.
@@ -43,6 +41,10 @@ Retheme by overriding any variable on `:root`, for example
 `--color-brand-indigo` or `--radius-lg`. Dark mode keys off a `.dark`
 class on `html`.
 
+Charts live in their own package now,
+[`@heyramzi/charts`](https://github.com/heyramzi/ui/tree/main/packages/charts). It reads
+the same tokens, so import `tokens.css` once and both work.
+
 React and other framework ports are out of scope. The source is Svelte 5
 runes only.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "Svelte 5 UI primitives: effects, animations, and shared component CSS.",
   "license": "MIT",
   "repository": {
@@ -115,11 +115,6 @@
     "./animations/*": {
       "default": "./src/animations/*"
     },
-    "./charts": {
-      "svelte": "./src/charts/index.ts",
-      "types": "./src/charts/index.ts",
-      "default": "./src/charts/index.ts"
-    },
     "./showcase": {
       "svelte": "./src/showcase/index.ts",
       "types": "./src/showcase/index.ts",
@@ -130,10 +125,10 @@
       "types": "./src/showcase/kit.ts",
       "default": "./src/showcase/kit.ts"
     },
-    "./shadcn/hooks/is-mobile.svelte": {
-      "svelte": "./src/shadcn/hooks/is-mobile.svelte.ts",
-      "types": "./src/shadcn/hooks/is-mobile.svelte.ts",
-      "default": "./src/shadcn/hooks/is-mobile.svelte.ts"
+    "./shadcn/hooks/*": {
+      "svelte": "./src/shadcn/hooks/*.ts",
+      "types": "./src/shadcn/hooks/*.ts",
+      "default": "./src/shadcn/hooks/*.ts"
     },
     "./shadcn/*": {
       "svelte": "./src/shadcn/*/index.ts",
@@ -164,20 +159,17 @@
   "dependencies": {
     "@heyramzi/utils": "^1.3.3",
     "@lucide/svelte": "^1.52.0",
+    "@shadcn-svelte/primitives": "^0.0.1",
     "clsx": "^2.1.1",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
-    "layerchart": "^2.5.1",
     "marked": "^18.1.0",
     "phosphor-svelte": "^3.1.0",
+    "shiki": "^4.5.0",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-shape": "^3.2.0",
     "bits-ui": "^2.19.5",
     "jsdom": "^30.1.2",
     "mode-watcher": "^1.1.0",

package/scripts/sync-shadcn.mjs

@@ -42,12 +42,16 @@ const ALIASES = [
   ["$UTILS$.js", "@heyramzi/utils"],
   ["$UI$/", "../src/shadcn"],
   ["$HOOKS$/", "../src/shadcn/hooks"],
+  ["$LIB$/", "../src/shadcn/hooks"],
 ];
 
 /* Upstream target path -> ours, where the two differ. Everything else lands at
  * src/shadcn/<target>. */
 const REROUTE = {
   "is-mobile/is-mobile.svelte.ts": "src/shadcn/hooks/is-mobile.svelte.ts",
+  "highlighter/highlighter.ts": "src/shadcn/hooks/highlighter.ts",
+  "use-highlighted-code/use-highlighted-code.svelte.ts":
+    "src/shadcn/hooks/use-highlighted-code.svelte.ts",
 };
 
 const DOCS = "https://raw.githubusercontent.com/huntabyte/shadcn-svelte/main/docs";
@@ -90,12 +94,17 @@ const NOT_SHIPPED = new Set([
   // `cn` ships from @heyramzi/utils in vibe-kit, so a copy here would be a stray.
   "utils",
   "questionnaire",
-  // Every app chat runs on our ai/conversation, so a second scroller would be two answers to one job.
-  "message-scroller",
 ]);
 
 /* No demo to take: `hooks`, `is-mobile` and `utils` are not components, and `sidebar` demos as a page block. */
-const NO_DEMO = new Set(["hooks", "is-mobile", "sidebar", "utils"]);
+const NO_DEMO = new Set([
+  "hooks",
+  "is-mobile",
+  "highlighter",
+  "use-highlighted-code",
+  "sidebar",
+  "utils",
+]);
 
 const adapt = (text) => ALIASES.reduce((acc, [from, to]) => acc.replaceAll(from, to), text);
 const adaptDemo = (text) =>

package/src/ai/index.ts

@@ -1,21 +1,3 @@
-// =========================
-// CONVERSATION (scroll container)
-// =========================
-
-export {
-  Conversation,
-  ConversationContent,
-  ConversationEmptyState,
-  ConversationScrollButton,
-  StickToBottomContext,
-  getStickToBottomContext,
-  setStickToBottomContext,
-  type ConversationProps,
-  type ConversationContentProps,
-  type ConversationEmptyStateProps,
-  type ConversationScrollButtonProps,
-} from "./conversation/index.js";
-
 // =========================
 // COMPOSER
 // =========================

package/src/animations/README.md

@@ -53,8 +53,8 @@ One behaviour, one implementation. Where a component already did the job, the up
 
 | Upstream | Where it lives instead |
 | --- | --- |
-| `toggle` | `shadcn/switch/switch.css` — the thumb slide, on our switch. |
-| `checkbox-check` | `shadcn/checkbox/checkbox.css` — the mark draw, on our checkbox. |
+| `toggle` | `shadcn/switch/switch.svelte` — the thumb slide, on our switch. |
+| `checkbox-check` | `shadcn/checkbox/checkbox.svelte` — the fill and border, on our checkbox. |
 | `toast-open-close` | `shadcn/sonner` — svelte-sonner owns toast motion. |
 | `banner-stacking` | `shadcn/sonner` — stacking and hover spread are what it does. |
 | `matrix-dot-loader` | `ai/loading-state` — `PixelLoader` is the dot-grid loader. |
@@ -81,4 +81,4 @@ Every transition reads semantic CSS variables (`--modal-open-dur`, `--tilt-follo
 
 So the scale is single-sourced when the design layer is imported, and the transition still runs at the shipped value when it is not. A value the scale has no token for — a 1000ms tilt return, a 90ms reel stagger — stays a literal rather than being rounded onto the nearest rung. Override any of them at `:root` or per-scope to retune without forking the CSS.
 
-See the [transitions.dev SKILL](../../../../ai-doc/skills/design/motion/transitions-dev/SKILL.md) for the full token list and the per-transition variables.
+See the `transitions-dev` skill in vibe-kit (`ai-doc/skills/design/motion/transitions-dev/SKILL.md`) for the full token list and the per-transition variables.

package/src/lib/sliding-pill.ts

@@ -0,0 +1,68 @@
+import type { Attachment } from "svelte/attachments";
+
+/** The travelling highlight behind the active tab. Attach it to a span inside the list. */
+
+// WHY attach to the pill, not the list: the pill finds its list via
+// `parentElement`, so any strip that renders one span gets the motion.
+
+// WHY measure: the active item's width is its label. The selector covers the
+// three ways a strip marks it: a tab, a nav link, a toggle.
+
+// Per transitions.dev `tabs-sliding`: first paint and resizes write the
+// position with the transition off, so the pill snaps in instead of flying.
+const ACTIVE = '[data-state="active"],[aria-current="page"],[aria-pressed="true"]';
+
+export const slidingPill: Attachment<HTMLElement> = (pill) => {
+  const list = pill.parentElement;
+  if (!list) return;
+
+  let settled = false;
+
+  function move(animate: boolean) {
+    const active = list!.querySelector<HTMLElement>(ACTIVE);
+    if (!active) {
+      pill.style.opacity = "0";
+      return;
+    }
+    pill.style.opacity = "1";
+    if (animate) {
+      pill.style.transform = `translateX(${active.offsetLeft}px)`;
+      pill.style.width = `${active.offsetWidth}px`;
+      return;
+    }
+    // Suspend, write, reflow, restore. Without the reflow the browser
+    // coalesces the two writes and the snap animates anyway.
+    pill.style.transition = "none";
+    pill.style.transform = `translateX(${active.offsetLeft}px)`;
+    pill.style.width = `${active.offsetWidth}px`;
+    void pill.offsetWidth;
+    pill.style.transition = "";
+  }
+
+  // Position first, THEN hand the highlight over. Swapped, one frame draws both
+  // the trigger's own background and a zero-width pill: a flicker on hydration.
+  move(false);
+  list.dataset.pill = "on";
+  settled = true;
+
+  // The selection lives in an attribute bits-ui owns, and a badge arriving
+  // changes a trigger's width without any attribute changing.
+  const attributes = new MutationObserver(() => move(settled));
+  attributes.observe(list, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-state", "aria-current", "aria-pressed"],
+  });
+
+  // A list that reflows (a rail collapsing, a font landing) re-measures
+  // without motion: nothing was chosen, so nothing should travel.
+  const resize = new ResizeObserver(() => move(false));
+  resize.observe(list);
+
+  return () => {
+    attributes.disconnect();
+    resize.disconnect();
+    delete list.dataset.pill;
+  };
+};

package/src/lib/theme-transition.ts

@@ -3,6 +3,8 @@ export interface RevealThemeOptions {
   skip?: boolean;
   /** Wipe length in ms. */
   duration?: number;
+  /** Wipe easing, any CSS easing value. */
+  easing?: string;
 }
 
 const DEFAULT_DURATION = 400;
@@ -20,7 +22,7 @@ export function revealTheme(
   apply: () => void,
   options: RevealThemeOptions = {},
 ): void {
-  const { skip = false, duration = DEFAULT_DURATION } = options;
+  const { skip = false, duration = DEFAULT_DURATION, easing = "ease-in-out" } = options;
   const origin = event.currentTarget;
 
   const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -45,7 +47,7 @@ export function revealTheme(
   transition.ready.then(() => {
     document.documentElement.animate(
       { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`] },
-      { duration, easing: "ease-in-out", pseudoElement: "::view-transition-new(root)" },
+      { duration, easing, pseudoElement: "::view-transition-new(root)" },
     );
   });
 }

package/src/shadcn/code-block/code-block-actions.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="code-block-actions"
+	class={cn(
+		"-my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:top-3 [[data-slot=code-block]>&]:end-3 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block-content.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import CodeBlockLine from "./code-block-line.svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		style,
+		code,
+		wrap = false,
+		lineNumbers = false,
+		startLine = 1,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLPreElement>> & {
+		/** Plain text to render. Split into lines when `lineNumbers` is set. */
+		code?: string;
+		wrap?: boolean;
+		lineNumbers?: boolean;
+		startLine?: number;
+	} = $props();
+
+	// A `code` string is split into lines so each one can be numbered.
+	const lines = $derived(
+		code !== undefined && lineNumbers ? code.replace(/\n$/, "").split("\n") : null
+	);
+</script>
+
+{#snippet content()}
+	<code
+		data-slot="code-block-code"class=" grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0">
+		{#if lines}
+			{#each lines as line, index (index)}
+				<CodeBlockLine code={line} />
+			{/each}
+		{:else if code !== undefined}
+			{code}
+		{:else}
+			{@render children?.()}
+		{/if}
+	</code>
+{/snippet}
+
+<!-- Whitespace inside a <pre> is rendered, so its content is a snippet defined outside it, where Svelte trims whitespace as usual. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<pre
+	bind:this={ref}
+	data-slot="code-block-content"data-wrap={wrap || undefined}
+	data-numbered={lineNumbers || undefined}
+	dir="ltr"tabindex={0}
+	style="counter-reset: line {startLine - 1};{style ?? ''}"class={cn("px-4 py-4 leading-relaxed group-has-data-[slot=code-block-header]/code-block:pt-2 group-has-data-[slot=code-block-footer]/code-block:pb-2 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:py-3 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto text-start font-mono outline-none data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap",
+		className
+	)}
+	{...restProps}>{@render content()}</pre>

package/src/shadcn/code-block/code-block-copy-button.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import CopyIcon from "@lucide/svelte/icons/copy";
+	import { Button, type ButtonProps } from "../button/index.js";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		variant = "ghost",
+		size = "sm",
+		onclick,
+		...restProps
+	}: Omit<ButtonProps, "onclick"> & {
+		value: string;
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	let copied = $state(false);
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+
+	function copy() {
+		navigator.clipboard
+			.writeText(value)
+			.then(() => {
+				copied = true;
+				clearTimeout(timeout);
+				timeout = setTimeout(() => (copied = false), 2000);
+			})
+			.catch(() => {});
+	}
+
+	onDestroy(() => clearTimeout(timeout));
+</script>
+
+<Button
+	bind:ref
+	data-slot="code-block-copy-button"
+	data-copied={copied || undefined}
+	{variant}
+	{size}
+	icon
+	aria-label={copied ? "Copied" : "Copy"}
+	class={cn(className)}
+	onclick={(e) => {
+		onclick?.(e);
+		copy();
+	}}
+	{...restProps}
+>
+	{#if copied}
+		<CheckIcon />
+	{:else}
+		<CopyIcon />
+	{/if}
+</Button>
+<span aria-live="polite" class="sr-only">{copied ? "Copied" : ""}</span>

package/src/shadcn/code-block/code-block-footer.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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block-footer"
+	class={cn("gap-2 px-4 pb-4 text-muted-foreground group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pb-3 flex min-w-0 shrink-0 items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block-header.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="code-block-header"
+	class={cn(
+		"gap-2 px-4 pt-4 text-muted-foreground group-data-[variant=destructive]/code-block:text-destructive group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pt-3 flex min-w-0 shrink-0 items-center *:has-[>[data-slot=code-block-title]]:min-w-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/code-block/code-block-line.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const codeBlockLineVariants = tv({
+		base: "-mx-4 px-4 in-data-numbered:gap-x-3 before:min-w-6 before:text-end before:text-muted-foreground after:start-1 after:text-muted-foreground group-data-[size=sm]/code-block:-mx-3 group-data-[size=sm]/code-block:px-3 relative block min-h-lh after:absolute after:top-0 after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+		variants: {
+			variant: {
+				default: "",
+				added: "bg-muted after:content-['+']",
+				removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+				highlighted: "bg-muted",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type CodeBlockLineVariant = VariantProps<typeof codeBlockLineVariants>["variant"];
+
+	// One highlighted token, such as one returned by `useHighlightedCode`.
+	export type CodeBlockLineToken = {
+		content: string;
+		style?: string;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		code,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		variant?: CodeBlockLineVariant;
+		/** The line as plain text, or as highlighted tokens. When it is set, `children` is ignored. */
+		code?: string | CodeBlockLineToken[];
+	} = $props();
+
+	const newline = "\n";
+</script>
+
+<!-- An empty line holds a newline so copying a selection keeps blank lines. -->
+<span
+	bind:this={ref}
+	data-slot="code-block-line"data-variant={variant}
+	class={cn(codeBlockLineVariants({ variant }), className)}
+	{...restProps}
+>
+	<span data-slot="code-block-line-content"class="min-w-0">
+		{#if typeof code ==="string"}
+			{code || newline}
+		{:else if code?.length}
+			{#each code as token, index (index)}
+				<span style={token.style} class={token.class}>{token.content}</span>
+			{/each}
+		{:else if code}
+			{newline}
+		{:else if children}
+			{@render children()}
+		{:else}
+			{newline}
+		{/if}
+	</span>
+</span>

package/src/shadcn/code-block/code-block-title.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="code-block-title"
+	class={cn(
+		"font-sans text-sm font-medium text-foreground group-data-[variant=destructive]/code-block:text-destructive *:[svg]:me-1.5 [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/code-block:text-xs group-data-[size=sm]/code-block:[&_svg:not([class*='size-'])]:size-3.5 min-w-0 truncate [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const codeBlockVariants = tv({
+		base: "rounded-lg text-sm data-[size=sm]:text-xs has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 group/code-block relative flex w-full min-w-0 flex-col overflow-hidden",
+		variants: {
+			variant: {
+				default: "border border-input text-foreground dark:bg-input/30 has-[>[data-slot=code-block-content]:focus-visible]:border-ring",
+				destructive: "border border-destructive/30 text-destructive dark:border-destructive/40",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type CodeBlockVariant = VariantProps<typeof codeBlockVariants>["variant"];
+	export type CodeBlockSize = "default" | "sm";
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: CodeBlockVariant;
+		size?: CodeBlockSize;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="code-block"
+	data-variant={variant}
+	data-size={size}
+	class={cn(codeBlockVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>