@stigmer/react 3.0.9-dev.20260615153829 → 3.1.0

package/src/internal/__tests__/RevealToggle.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { RevealToggle } from "../RevealToggle";
+
+afterEach(cleanup);
+
+describe("RevealToggle", () => {
+  it("shows the default 'Show more' label and a collapsed aria-expanded when collapsed", () => {
+    render(<RevealToggle expanded={false} onToggle={() => {}} />);
+    const btn = screen.getByRole("button", { name: /Show more/ });
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("shows the default 'Show less' label and an expanded aria-expanded when expanded", () => {
+    render(<RevealToggle expanded onToggle={() => {}} />);
+    const btn = screen.getByRole("button", { name: /Show less/ });
+    expect(btn.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("honours custom more/less labels (e.g. the line-count primitives)", () => {
+    const { rerender } = render(
+      <RevealToggle
+        expanded={false}
+        onToggle={() => {}}
+        moreLabel="Show all 42 lines"
+        lessLabel="Show less"
+      />,
+    );
+    expect(screen.getByText("Show all 42 lines")).toBeTruthy();
+
+    rerender(
+      <RevealToggle
+        expanded
+        onToggle={() => {}}
+        moreLabel="Show all 42 lines"
+        lessLabel="Show less"
+      />,
+    );
+    expect(screen.getByText("Show less")).toBeTruthy();
+  });
+
+  it("invokes onToggle on click", () => {
+    const onToggle = vi.fn();
+    render(<RevealToggle expanded={false} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it("forwards the e2e cursor-target hook onto the control", () => {
+    render(
+      <RevealToggle
+        expanded={false}
+        onToggle={() => {}}
+        cursorTarget="tool-detail-expand"
+      />,
+    );
+    expect(
+      screen.getByRole("button").getAttribute("data-cursor-target"),
+    ).toBe("tool-detail-expand");
+  });
+});

package/src/internal/__tests__/code-highlight.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { resolveLanguage, highlightToReact } from "../code-highlight";
+
+afterEach(cleanup);
+
+describe("resolveLanguage", () => {
+  it.each([
+    ["a registered name", "go", "go"],
+    ["uppercase is normalized", "GO", "go"],
+    ["surrounding whitespace is trimmed", "  yaml  ", "yaml"],
+    ["a registered alias (ts → typescript)", "ts", "ts"],
+    ["a registered alias (tsx)", "tsx", "tsx"],
+    ["a registered alias (html → xml)", "html", "html"],
+    ["a registered alias (sh → bash)", "sh", "sh"],
+  ])("resolves %s", (_label, input, expected) => {
+    expect(resolveLanguage(input)).toBe(expected);
+  });
+
+  it.each([
+    ["an unregistered language", "hcl"],
+    ["a nonsense language", "klingon"],
+    ["an empty string", ""],
+    ["whitespace only", "   "],
+    ["undefined", undefined],
+  ])("returns null for %s", (_label, input) => {
+    expect(resolveLanguage(input)).toBeNull();
+  });
+});
+
+describe("highlightToReact", () => {
+  it("produces hljs token spans for a known language", () => {
+    const node = highlightToReact("func main() {}", "go");
+    expect(node).not.toBeNull();
+
+    const { container } = render(<code>{node}</code>);
+    // `func` is a Go keyword → at least one tokenized span must appear.
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("highlights via an alias (ts)", () => {
+    const node = highlightToReact("const x: number = 1;", "ts");
+    expect(node).not.toBeNull();
+
+    const { container } = render(<code>{node}</code>);
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it.each([
+    ["an unregistered language", "hcl"],
+    ["no language", undefined],
+  ])("returns null for %s (caller falls back to flat)", (_label, language) => {
+    expect(highlightToReact("anything at all", language)).toBeNull();
+  });
+});

package/src/internal/__tests__/markdown-components.test.tsx

@@ -1,5 +1,18 @@
-import { describe, it, expect } from "vitest";
-import { unwrapEnclosingMarkdownFence } from "../markdown-components";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import {
+  MARKDOWN_COMPONENTS,
+  unwrapEnclosingMarkdownFence,
+} from "../markdown-components";
+
+afterEach(cleanup);
+
+/** The shared `code` override, typed for direct rendering in tests. */
+const CodeComponent = MARKDOWN_COMPONENTS.code as ComponentType<{
+  className?: string;
+  children?: ReactNode;
+}>;
 
 describe("unwrapEnclosingMarkdownFence", () => {
   describe("unwraps a whole-message markdown fence", () => {
@@ -51,3 +64,56 @@ describe("unwrapEnclosingMarkdownFence", () => {
     expect(unwrapEnclosingMarkdownFence(once)).toBe(once);
   });
 });
+
+describe("MARKDOWN_COMPONENTS.code (shared highlight seam)", () => {
+  it("syntax-highlights a fenced block with a known language", () => {
+    const { container } = render(
+      <CodeComponent className="language-go">
+        {"func main() {}"}
+      </CodeComponent>,
+    );
+
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code!.className).toContain("hljs");
+    expect(code!.className).toContain("language-go");
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("falls back to flat text for an unknown language (no token spans)", () => {
+    const { container } = render(
+      <CodeComponent className="language-hcl">
+        {'resource "x" {}'}
+      </CodeComponent>,
+    );
+
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code!.textContent).toContain('resource "x" {}');
+    expect(container.querySelectorAll('span[class*="hljs-"]').length).toBe(0);
+  });
+
+  it("falls back to flat for non-string children (e.g. a streaming caret)", () => {
+    const { container } = render(
+      <CodeComponent className="language-go">
+        <span data-testid="caret">x</span>
+      </CodeComponent>,
+    );
+
+    // Renders children untouched, no throw, no tokenization attempted.
+    expect(container.querySelector('[data-testid="caret"]')).not.toBeNull();
+    expect(container.querySelectorAll('span[class*="hljs-"]').length).toBe(0);
+  });
+
+  it("leaves inline code unhighlighted and unboxed by hljs", () => {
+    const { container } = render(<CodeComponent>{"inlineToken"}</CodeComponent>);
+
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code!.className).not.toContain("hljs");
+    expect(code!.className).toContain("bg-muted");
+    expect(code!.textContent).toBe("inlineToken");
+  });
+});

package/src/internal/__tests__/useAutoDisclosure.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useAutoDisclosure } from "../useAutoDisclosure";
+
+describe("useAutoDisclosure", () => {
+  it("starts open when autoOpen is true", () => {
+    const { result } = renderHook(() => useAutoDisclosure(true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("starts closed when autoOpen is false", () => {
+    const { result } = renderHook(() => useAutoDisclosure(false));
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("honours initialOpen over autoOpen for the first render", () => {
+    const { result } = renderHook(() =>
+      useAutoDisclosure(false, { initialOpen: true }),
+    );
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("tracks autoOpen while the user has not toggled", () => {
+    const { result, rerender } = renderHook(
+      ({ autoOpen }) => useAutoDisclosure(autoOpen),
+      { initialProps: { autoOpen: true } },
+    );
+    expect(result.current[0]).toBe(true);
+
+    rerender({ autoOpen: false });
+    expect(result.current[0]).toBe(false);
+
+    rerender({ autoOpen: true });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("freezes on the user's choice once toggled, ignoring autoOpen", () => {
+    const { result, rerender } = renderHook(
+      ({ autoOpen }) => useAutoDisclosure(autoOpen),
+      { initialProps: { autoOpen: true } },
+    );
+
+    // User collapses while the section is auto-open.
+    act(() => result.current[1]());
+    expect(result.current[0]).toBe(false);
+
+    // Auto signal flips both ways — user's collapse must persist.
+    rerender({ autoOpen: false });
+    expect(result.current[0]).toBe(false);
+    rerender({ autoOpen: true });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("toggle flips from a user-opened state too", () => {
+    const { result } = renderHook(() => useAutoDisclosure(false));
+    expect(result.current[0]).toBe(false);
+
+    act(() => result.current[1]());
+    expect(result.current[0]).toBe(true);
+
+    act(() => result.current[1]());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("keeps a stable toggle identity across renders", () => {
+    const { result, rerender } = renderHook(
+      ({ autoOpen }) => useAutoDisclosure(autoOpen),
+      { initialProps: { autoOpen: false } },
+    );
+    const first = result.current[1];
+    rerender({ autoOpen: true });
+    expect(result.current[1]).toBe(first);
+  });
+});

package/src/internal/__tests__/useElapsedSince.test.tsx

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { renderHook, act, cleanup } from "@testing-library/react";
+import { useElapsedSince, formatElapsed } from "../useElapsedSince";
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-07-02T12:00:30Z"));
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe("useElapsedSince", () => {
+  it("returns the elapsed ms since the timestamp", () => {
+    const { result } = renderHook(() =>
+      useElapsedSince("2026-07-02T12:00:00Z"),
+    );
+    expect(result.current).toBe(30_000);
+  });
+
+  it("ticks forward once per second", () => {
+    const { result } = renderHook(() =>
+      useElapsedSince("2026-07-02T12:00:00Z"),
+    );
+    act(() => {
+      vi.advanceTimersByTime(3_000);
+    });
+    expect(result.current).toBe(33_000);
+  });
+
+  it("clamps to zero when the timestamp is ahead of the client clock", () => {
+    const { result } = renderHook(() =>
+      useElapsedSince("2026-07-02T12:00:35Z"),
+    );
+    expect(result.current).toBe(0);
+  });
+
+  it("returns null for an empty timestamp", () => {
+    const { result } = renderHook(() => useElapsedSince(""));
+    expect(result.current).toBeNull();
+  });
+
+  it("returns null for an unparseable timestamp", () => {
+    const { result } = renderHook(() => useElapsedSince("not-a-date"));
+    expect(result.current).toBeNull();
+  });
+
+  it("tears down its interval on unmount", () => {
+    const { unmount } = renderHook(() =>
+      useElapsedSince("2026-07-02T12:00:00Z"),
+    );
+    unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});
+
+describe("formatElapsed", () => {
+  it("formats each magnitude", () => {
+    expect(formatElapsed(500)).toBe("just now");
+    expect(formatElapsed(42_000)).toBe("42s");
+    expect(formatElapsed(3 * 60_000 + 12_000)).toBe("3m 12s");
+    expect(formatElapsed(5 * 60_000)).toBe("5m");
+    expect(formatElapsed(65 * 60_000)).toBe("1h 5m");
+    expect(formatElapsed(120 * 60_000)).toBe("2h");
+  });
+});

package/src/internal/__tests__/useIsOverflowing.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { createElement } from "react";
+import { render, cleanup } from "@testing-library/react";
+import { useIsOverflowing } from "../useIsOverflowing";
+
+afterEach(cleanup);
+
+function Probe({
+  enabled,
+  onState,
+}: {
+  enabled: boolean;
+  onState: (overflowing: boolean) => void;
+}) {
+  const { ref, isOverflowing } = useIsOverflowing<HTMLDivElement>(enabled);
+  onState(isOverflowing);
+  return createElement("div", { ref }, "content");
+}
+
+// happy-dom does not compute layout (scrollHeight === clientHeight === 0), so the
+// deterministic contract here is the `enabled` gate and the not-overflowing
+// baseline; the clipped (overflowing) case is verified against a real browser in
+// the e2e layer, mirroring the SDK's documented unit/e2e split.
+describe("useIsOverflowing", () => {
+  it("reports not-overflowing when disabled (observer never attached)", () => {
+    let state = true;
+    render(createElement(Probe, { enabled: false, onState: (s) => (state = s) }));
+    expect(state).toBe(false);
+  });
+
+  it("reports not-overflowing for content that fits its container", () => {
+    let state = true;
+    render(createElement(Probe, { enabled: true, onState: (s) => (state = s) }));
+    expect(state).toBe(false);
+  });
+});

package/src/internal/__tests__/useKeyedSubmission.test.tsx

@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useKeyedSubmission } from "../useKeyedSubmission";
+
+describe("useKeyedSubmission", () => {
+  it("tracks a key while its operation is in flight, then releases it", async () => {
+    let resolve!: () => void;
+    const { result } = renderHook(() => useKeyedSubmission<void>());
+
+    let pending: Promise<void>;
+    act(() => {
+      pending = result.current.run("k-1", () => new Promise<void>((r) => (resolve = r)));
+    });
+
+    expect(result.current.submittingKeys.has("k-1")).toBe(true);
+
+    await act(async () => {
+      resolve();
+      await pending;
+    });
+
+    expect(result.current.submittingKeys.size).toBe(0);
+  });
+
+  it("records a failure keyed, releases the in-flight key, then rethrows", async () => {
+    const { result } = renderHook(() => useKeyedSubmission<void>());
+
+    await act(async () => {
+      await expect(
+        result.current.run("k-1", () => Promise.reject(new Error("boom"))),
+      ).rejects.toThrow("boom");
+    });
+
+    expect(result.current.errorsByKey.get("k-1")?.message).toBe("boom");
+    expect(result.current.submittingKeys.size).toBe(0);
+  });
+
+  it("coerces a non-Error rejection into an Error", async () => {
+    const { result } = renderHook(() => useKeyedSubmission<void>());
+
+    await act(async () => {
+      await expect(
+        result.current.run("k-1", () => Promise.reject("plain string")),
+      ).rejects.toBe("plain string");
+    });
+
+    const recorded = result.current.errorsByKey.get("k-1");
+    expect(recorded).toBeInstanceOf(Error);
+    expect(recorded?.message).toBe("plain string");
+  });
+
+  it("keys two failures independently — one never clobbers another", async () => {
+    const { result } = renderHook(() => useKeyedSubmission<void>());
+
+    await act(async () => {
+      await expect(
+        result.current.run("k-a", () => Promise.reject(new Error("fail-a"))),
+      ).rejects.toThrow("fail-a");
+    });
+    await act(async () => {
+      await expect(
+        result.current.run("k-b", () => Promise.reject(new Error("fail-b"))),
+      ).rejects.toThrow("fail-b");
+    });
+
+    expect(result.current.errorsByKey.get("k-a")?.message).toBe("fail-a");
+    expect(result.current.errorsByKey.get("k-b")?.message).toBe("fail-b");
+  });
+
+  it("clears a key's prior error at retry-start, leaving siblings untouched", async () => {
+    const { result } = renderHook(() => useKeyedSubmission<void>());
+
+    await act(async () => {
+      await expect(
+        result.current.run("k-a", () => Promise.reject(new Error("fail-a"))),
+      ).rejects.toThrow("fail-a");
+    });
+    await act(async () => {
+      await expect(
+        result.current.run("k-b", () => Promise.reject(new Error("fail-b"))),
+      ).rejects.toThrow("fail-b");
+    });
+
+    // Retrying k-a succeeds: its error clears at run-start; k-b's persists.
+    await act(async () => {
+      await result.current.run("k-a", () => Promise.resolve());
+    });
+
+    expect(result.current.errorsByKey.has("k-a")).toBe(false);
+    expect(result.current.errorsByKey.get("k-b")?.message).toBe("fail-b");
+  });
+
+  it("returns the resolved value on success", async () => {
+    const { result } = renderHook(() => useKeyedSubmission<number>());
+
+    let value: number | undefined;
+    await act(async () => {
+      value = await result.current.run("k-1", () => Promise.resolve(42));
+    });
+
+    expect(value).toBe(42);
+    expect(result.current.errorsByKey.size).toBe(0);
+  });
+
+  it("clearErrors resets every recorded error", async () => {
+    const { result } = renderHook(() => useKeyedSubmission<void>());
+
+    await act(async () => {
+      await expect(
+        result.current.run("k-a", () => Promise.reject(new Error("fail-a"))),
+      ).rejects.toThrow("fail-a");
+    });
+    expect(result.current.errorsByKey.size).toBe(1);
+
+    act(() => result.current.clearErrors());
+    expect(result.current.errorsByKey.size).toBe(0);
+  });
+
+  it("keeps a stable return reference across renders when nothing changes", () => {
+    const { result, rerender } = renderHook(() => useKeyedSubmission<void>());
+
+    const first = result.current;
+    rerender();
+    expect(result.current).toBe(first);
+  });
+});

package/src/internal/code-highlight.tsx

@@ -0,0 +1,120 @@
+import { Fragment, type ReactNode } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createLowlight } from "lowlight";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+
+// Dependency licensing (DD-012): `lowlight` and `hast-util-to-jsx-runtime` are
+// MIT; `highlight.js` is BSD-3-Clause. BSD-3-Clause is a permissive, OSI-approved
+// license, compatible with MIT/Apache-2.0, that imposes no obligations on SDK
+// consumers beyond attribution — so it satisfies DD-012's "MIT or Apache-2.0
+// compatible" rule. Recorded here so the choice is auditable at the point of use.
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import go from "highlight.js/lib/languages/go";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+
+/**
+ * Syntax highlighter for fenced code blocks in SDK markdown surfaces.
+ *
+ * This is the single highlighting engine behind the shared `code` override in
+ * {@link file://./markdown-components.tsx} — so chat (Streamdown) and the
+ * artifact/skill viewers (react-markdown) colorize code identically.
+ *
+ * The engine emits highlight.js token classes (`hljs-keyword`, `hljs-string`,
+ * …) which `styles.css` maps onto the `--stgm-syntax-*` theme tokens. Colors
+ * are therefore 100% token-driven: they track the host's preset and color-mode
+ * with no hardcoded values, exactly like the CodeMirror YAML editor.
+ *
+ * **Eager, not lazy.** Highlighting is on the core path (almost every
+ * `SessionViewer` consumer renders agent messages containing code), so DD-013's
+ * lazy pattern (for rarely-used heavy deps) does not apply. The grammars are
+ * imported eagerly; because this module is only reachable through the markdown
+ * components, normal tree-shaking still keeps it out of bundles that never
+ * render markdown.
+ *
+ * **Curated grammar set.** Only the languages agents commonly emit are
+ * registered, to keep the payload small. Anything else falls back to flat
+ * rendering (see {@link resolveLanguage}) — a deterministic choice, never
+ * highlight.js auto-detection, consistent with this codebase's avoidance of
+ * fuzzy heuristics.
+ */
+const lowlight = createLowlight({
+  bash,
+  css,
+  dockerfile,
+  go,
+  java,
+  javascript,
+  json,
+  markdown,
+  python,
+  rust,
+  sql,
+  typescript,
+  xml,
+  yaml,
+});
+
+// Fence info-strings agents use that aren't already registered as grammar
+// aliases by highlight.js. `xml` is highlight.js's grammar for HTML markup.
+lowlight.registerAlias({
+  bash: ["sh", "shell", "zsh", "console"],
+  dockerfile: ["docker"],
+  javascript: ["js", "jsx", "mjs", "cjs"],
+  markdown: ["md"],
+  python: ["py"],
+  typescript: ["ts", "tsx"],
+  xml: ["html"],
+  yaml: ["yml"],
+});
+
+const jsxRuntime = { Fragment, jsx, jsxs } as const;
+
+/**
+ * Resolves a fence info-string to a registered highlight.js language name, or
+ * `null` when no grammar is registered for it (the caller then renders the code
+ * flat). Case-insensitive and whitespace-tolerant; never guesses.
+ *
+ * @param language - The raw language from a `language-*` class (e.g. `"go"`).
+ * @returns The normalized, registered language name, or `null`.
+ */
+export function resolveLanguage(language: string | undefined): string | null {
+  if (!language) return null;
+  const name = language.trim().toLowerCase();
+  return name && lowlight.registered(name) ? name : null;
+}
+
+/**
+ * Highlights `code` for the given fence `language` and returns themed React
+ * nodes — token `<span>`s carrying `hljs-*` classes that `styles.css` maps to
+ * `--stgm-syntax-*`.
+ *
+ * Returns `null` (so the caller can fall back to flat rendering) when the
+ * language has no registered grammar or tokenization throws. Highlighting is
+ * synchronous: there is no loading state to handle.
+ *
+ * @param code - The raw source text of the fenced block.
+ * @param language - The fence language (e.g. `"ts"`); unknown → `null`.
+ */
+export function highlightToReact(
+  code: string,
+  language: string | undefined,
+): ReactNode | null {
+  const resolved = resolveLanguage(language);
+  if (resolved === null) return null;
+  try {
+    return toJsxRuntime(lowlight.highlight(resolved, code), jsxRuntime);
+  } catch {
+    return null;
+  }
+}

package/src/internal/markdown-components.tsx

@@ -2,6 +2,9 @@ import type { ComponentProps, JSX } from "react";
 import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@stigmer/theme";
+import { highlightToReact } from "./code-highlight";
+
+const LANGUAGE_CLASS_PREFIX = "language-";
 
 type MdProps<T extends keyof JSX.IntrinsicElements> = ComponentProps<T>;
 
@@ -163,15 +166,29 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   code({ children, className: codeClassName, ...props }: MdProps<"code">) {
     const isBlock =
-      typeof codeClassName === "string" && codeClassName.startsWith("language-");
+      typeof codeClassName === "string" &&
+      codeClassName.startsWith(LANGUAGE_CLASS_PREFIX);
 
     if (isBlock) {
+      // Tokenize here, in the one component both renderers (Streamdown for
+      // chat, react-markdown for artifacts/skills) share, so highlighting is
+      // identical everywhere. Highlight only plain-string children — anything
+      // else (e.g. a streaming caret node) falls back to flat rendering.
+      const language = codeClassName.slice(LANGUAGE_CLASS_PREFIX.length);
+      const highlighted =
+        typeof children === "string"
+          ? highlightToReact(children, language)
+          : null;
+
       return (
         <code
-          className={cn("font-mono text-xs text-foreground", codeClassName)}
+          className={cn(
+            "hljs font-mono text-xs text-foreground",
+            codeClassName,
+          )}
           {...props}
         >
-          {children}
+          {highlighted ?? children}
         </code>
       );
     }