@heyramzi/ui 6.0.1 → 7.0.0

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>

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