@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/Map/hooks/useMapEvents.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useMapContext } from '../context';
 
@@ -9,141 +9,100 @@ import type { MapEventHandlers, MapMouseEvent, MapViewport } from '../types'
 /**
  * Hook for subscribing to map events
  * Automatically cleans up event listeners on unmount
+ *
+ * Handlers are stored in a ref so callers don't need to memoize the
+ * `handlers` object — the underlying map listeners are attached once
+ * (per `isLoaded`) and always call the latest handler implementations.
  */
 export function useMapEvents(handlers: MapEventHandlers) {
   const { mapRef, setViewport, setHoveredFeature, isLoaded } = useMapContext()
 
-  const handleClick = useCallback(
-    (event: maplibregl.MapMouseEvent & { features?: GeoJSON.Feature[] }) => {
-      if (!handlers.onClick) return
+  // Keep latest handlers without forcing re-subscription.
+  const handlersRef = useRef(handlers)
+  useEffect(() => {
+    handlersRef.current = handlers
+  }, [handlers])
 
+  useEffect(() => {
+    const map = mapRef.current?.getMap()
+    if (!map || !isLoaded) return
+
+    const handleClick = (
+      event: maplibregl.MapMouseEvent & { features?: GeoJSON.Feature[] }
+    ) => {
+      const onClick = handlersRef.current.onClick
+      if (!onClick) return
       const mapEvent: MapMouseEvent = {
         lngLat: event.lngLat,
         point: event.point,
         features: event.features,
         originalEvent: event.originalEvent,
       }
-      handlers.onClick(mapEvent)
-    },
-    [handlers]
-  )
-
-  const handleMouseMove = useCallback(
-    (event: maplibregl.MapMouseEvent & { features?: GeoJSON.Feature[] }) => {
-      if (!handlers.onHover) return
+      onClick(mapEvent)
+    }
 
+    const handleMouseMove = (
+      event: maplibregl.MapMouseEvent & { features?: GeoJSON.Feature[] }
+    ) => {
+      const onHover = handlersRef.current.onHover
+      if (!onHover) return
       const feature = event.features?.[0] ?? null
       setHoveredFeature(feature)
-
       const mapEvent: MapMouseEvent = {
         lngLat: event.lngLat,
         point: event.point,
         features: event.features,
         originalEvent: event.originalEvent,
       }
-      handlers.onHover(mapEvent)
-    },
-    [handlers, setHoveredFeature]
-  )
-
-  const handleMoveStart = useCallback(() => {
-    handlers.onMoveStart?.()
-  }, [handlers])
-
-  const handleMoveEnd = useCallback(() => {
-    const map = mapRef.current
-    if (!map) return
-
-    const center = map.getCenter()
-    const zoom = map.getZoom()
-    const bearing = map.getBearing()
-    const pitch = map.getPitch()
-
-    const newViewport: MapViewport = {
-      longitude: center.lng,
-      latitude: center.lat,
-      zoom,
-      bearing,
-      pitch,
+      onHover(mapEvent)
     }
 
-    setViewport(newViewport)
-    handlers.onMoveEnd?.(newViewport)
-  }, [mapRef, setViewport, handlers])
-
-  const handleZoomStart = useCallback(() => {
-    handlers.onZoomStart?.()
-  }, [handlers])
-
-  const handleZoomEnd = useCallback(() => {
-    const zoom = mapRef.current?.getZoom()
-    if (zoom !== undefined) {
-      handlers.onZoomEnd?.(zoom)
+    const handleMoveStart = () => {
+      handlersRef.current.onMoveStart?.()
     }
-  }, [mapRef, handlers])
-
-  const handleLoad = useCallback(() => {
-    handlers.onLoad?.()
-  }, [handlers])
-
-  useEffect(() => {
-    const map = mapRef.current?.getMap()
-    if (!map || !isLoaded) return
 
-    if (handlers.onClick) {
-      map.on('click', handleClick)
-    }
-    if (handlers.onHover) {
-      map.on('mousemove', handleMouseMove)
-    }
-    if (handlers.onMoveStart) {
-      map.on('movestart', handleMoveStart)
-    }
-    if (handlers.onMoveEnd) {
-      map.on('moveend', handleMoveEnd)
+    const handleMoveEnd = () => {
+      const center = map.getCenter()
+      const newViewport: MapViewport = {
+        longitude: center.lng,
+        latitude: center.lat,
+        zoom: map.getZoom(),
+        bearing: map.getBearing(),
+        pitch: map.getPitch(),
+      }
+      setViewport(newViewport)
+      handlersRef.current.onMoveEnd?.(newViewport)
     }
-    if (handlers.onZoomStart) {
-      map.on('zoomstart', handleZoomStart)
+
+    const handleZoomStart = () => {
+      handlersRef.current.onZoomStart?.()
     }
-    if (handlers.onZoomEnd) {
-      map.on('zoomend', handleZoomEnd)
+
+    const handleZoomEnd = () => {
+      handlersRef.current.onZoomEnd?.(map.getZoom())
     }
 
+    map.on('click', handleClick)
+    map.on('mousemove', handleMouseMove)
+    map.on('movestart', handleMoveStart)
+    map.on('moveend', handleMoveEnd)
+    map.on('zoomstart', handleZoomStart)
+    map.on('zoomend', handleZoomEnd)
+
     return () => {
-      if (handlers.onClick) {
-        map.off('click', handleClick)
-      }
-      if (handlers.onHover) {
-        map.off('mousemove', handleMouseMove)
-      }
-      if (handlers.onMoveStart) {
-        map.off('movestart', handleMoveStart)
-      }
-      if (handlers.onMoveEnd) {
-        map.off('moveend', handleMoveEnd)
-      }
-      if (handlers.onZoomStart) {
-        map.off('zoomstart', handleZoomStart)
-      }
-      if (handlers.onZoomEnd) {
-        map.off('zoomend', handleZoomEnd)
-      }
+      map.off('click', handleClick)
+      map.off('mousemove', handleMouseMove)
+      map.off('movestart', handleMoveStart)
+      map.off('moveend', handleMoveEnd)
+      map.off('zoomstart', handleZoomStart)
+      map.off('zoomend', handleZoomEnd)
     }
-  }, [
-    mapRef,
-    isLoaded,
-    handlers,
-    handleClick,
-    handleMouseMove,
-    handleMoveStart,
-    handleMoveEnd,
-    handleZoomStart,
-    handleZoomEnd,
-  ])
+  }, [mapRef, isLoaded, setViewport, setHoveredFeature])
 
+  // Fire onLoad once the map reports loaded.
   useEffect(() => {
-    if (isLoaded && handlers.onLoad) {
-      handleLoad()
+    if (isLoaded) {
+      handlersRef.current.onLoad?.()
     }
-  }, [isLoaded, handlers.onLoad, handleLoad])
+  }, [isLoaded])
 }

package/src/tools/MarkdownEditor/MarkdownEditor.tsx

@@ -23,7 +23,17 @@ interface MarkdownManager {
   serialize: (json: Record<string, unknown>) => string;
 }
 
+/**
+ * Serialize the editor document to a markdown string.
+ *
+ * `@tiptap/markdown` v3 augments the `Editor` with a `getMarkdown()`
+ * method; we use it when present and fall back to the storage manager
+ * (and ultimately `getText()`) so the editor still produces *something*
+ * if the extension shape ever drifts.
+ */
 function getMarkdown(editor: Editor): string {
+  const withMd = editor as Editor & { getMarkdown?: () => string };
+  if (typeof withMd.getMarkdown === 'function') return withMd.getMarkdown();
   const storage = editor.storage.markdown as { manager?: MarkdownManager } | undefined;
   if (!storage?.manager) return editor.getText();
   return storage.manager.serialize(editor.getJSON());
@@ -49,6 +59,13 @@ export interface MarkdownEditorProps {
   className?: string;
   disabled?: boolean;
   showToolbar?: boolean;
+  /**
+   * Drop the editor's own border / background / focus ring. Use when
+   * the editor is embedded inside a host surface that already draws
+   * the frame (e.g. the chat composer's textarea slot) — avoids a
+   * double border.
+   */
+  unstyled?: boolean;
   /**
    * `@`-mention autocomplete config.
    *
@@ -117,6 +134,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     className = '',
     disabled = false,
     showToolbar = true,
+    unstyled = false,
     mentions,
     onMentionIdsChange,
     onSubmit,
@@ -237,6 +255,9 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     editable: !disabled,
     extensions,
     content: value,
+    // `value` is a markdown string — without this Tiptap treats the
+    // content as JSON and renders `# Hello` literally instead of an <h1>.
+    contentType: 'markdown',
     onUpdate: ({ editor }) => {
       if (isExternalUpdate.current) return;
       onChange(getMarkdown(editor));
@@ -253,16 +274,27 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     },
   });
 
+  // Sync external `value` → editor. `setContent` is given `contentType:
+  // 'markdown'` so the string is parsed (not treated as JSON), and
+  // `emitUpdate: false` so it does NOT re-fire `onUpdate` (which would
+  // loop back into `onChange`). `isExternalUpdate` stays as a guard.
   useEffect(() => {
     if (!editor) return;
     const current = getMarkdown(editor);
     if (current !== value) {
       isExternalUpdate.current = true;
-      editor.commands.setContent(value);
+      editor.commands.setContent(value, { contentType: 'markdown', emitUpdate: false });
       isExternalUpdate.current = false;
     }
   }, [value, editor]);
 
+  // Keep editability in sync with the `disabled` prop. `useEditor` only
+  // reads `editable` on init, so toggling `disabled` later is otherwise
+  // a no-op.
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+
   // Imperative API for hosts that drive the editor without owning a
   // TipTap ref directly — chat composer registration, voice slot,
   // focus-on-stream-end.
@@ -280,7 +312,12 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     [editor],
   );
 
-  const wrapperClass = `markdown-editor rounded-md border border-input bg-background ${disabled ? 'opacity-60' : ''} ${className}`.trim();
+  // `unstyled` drops the editor's own frame (border / bg / focus ring)
+  // so it can sit inside a host surface that already draws one.
+  const chromeClass = unstyled
+    ? 'markdown-editor--unstyled'
+    : 'rounded-md border border-input bg-background';
+  const wrapperClass = `markdown-editor ${chromeClass} ${disabled ? 'opacity-60' : ''} ${className}`.trim();
 
   return (
     <div className={wrapperClass}>
@@ -319,14 +356,32 @@ function MarkdownToolbar({ editor }: { editor: Editor }) {
   ], [editor]);
 
   return (
-    <div className="flex items-center gap-0.5 px-2 py-1.5 border-b border-border">
+    <div
+      className="flex items-center gap-0.5 px-2 py-1.5 border-b border-border"
+      role="toolbar"
+      aria-label="Text formatting"
+    >
       {items.map((item, i) => {
-        if (!item) return <div key={i} className="w-px h-4 bg-border mx-1" />;
+        if (!item) {
+          return <div key={i} className="w-px h-4 bg-border mx-1" aria-hidden="true" />;
+        }
         const Icon = item.icon;
         const btnClass = `markdown-toolbar-btn ${item.active ? 'active' : ''}`;
         return (
-          <button key={i} type="button" onClick={item.action} title={item.title} className={btnClass}>
-            <Icon style={{ width: 14, height: 14 }} />
+          <button
+            key={i}
+            type="button"
+            // Prevent the button from stealing focus from the editor on
+            // mousedown — keeps the selection intact so the formatting
+            // command applies to the user's current selection.
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={item.action}
+            title={item.title}
+            aria-label={item.title}
+            aria-pressed={item.active}
+            className={btnClass}
+          >
+            <Icon style={{ width: 14, height: 14 }} aria-hidden="true" />
           </button>
         );
       })}

package/src/tools/MarkdownEditor/MentionList.tsx

@@ -1,6 +1,14 @@
 'use client';
 
-import { forwardRef, useImperativeHandle, useState, useCallback, useEffect, type KeyboardEvent } from 'react';
+import {
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  type KeyboardEvent,
+} from 'react';
 import type { MentionItem } from './types';
 
 export interface MentionListRef {
@@ -15,9 +23,18 @@ interface MentionListProps {
 export const MentionList = forwardRef<MentionListRef, MentionListProps>(
   ({ items, command }, ref) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
+    // One ref per rendered option so keyboard nav can scroll the active
+    // item into view inside the (scrollable, max-height) dropdown.
+    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
     useEffect(() => setSelectedIndex(0), [items]);
 
+    // Keep the highlighted item visible when ArrowUp/Down moves the
+    // selection past the visible window of the dropdown.
+    useEffect(() => {
+      itemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' });
+    }, [selectedIndex]);
+
     const select = useCallback(
       (index: number) => {
         const item = items[index];
@@ -28,6 +45,7 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
 
     useImperativeHandle(ref, () => ({
       onKeyDown: (event: KeyboardEvent) => {
+        if (items.length === 0) return false;
         if (event.key === 'ArrowUp') {
           setSelectedIndex((i) => (i + items.length - 1) % items.length);
           return true;
@@ -36,7 +54,9 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
           setSelectedIndex((i) => (i + 1) % items.length);
           return true;
         }
-        if (event.key === 'Enter') {
+        // Tab commits the highlighted item too — matches GitHub / Slack /
+        // ChatGPT mention pickers. Returning true keeps focus in the editor.
+        if (event.key === 'Enter' || event.key === 'Tab') {
           select(selectedIndex);
           return true;
         }
@@ -47,12 +67,25 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
     if (items.length === 0) return null;
 
     return (
-      <div className="markdown-mention-list">
+      <div className="markdown-mention-list" role="listbox" aria-label="Mention suggestions">
         {items.map((item, i) => {
           const isSelected = i === selectedIndex;
           const cls = `markdown-mention-item ${isSelected ? 'selected' : ''}`;
           return (
-            <button key={item.id} type="button" className={cls} onClick={() => select(i)}>
+            <button
+              key={item.id}
+              type="button"
+              role="option"
+              aria-selected={isSelected}
+              ref={(el) => {
+                itemRefs.current[i] = el;
+              }}
+              className={cls}
+              // Pointer-driven selection mirrors the keyboard highlight so
+              // hovering then clicking never picks a different item.
+              onMouseEnter={() => setSelectedIndex(i)}
+              onClick={() => select(i)}
+            >
               {item.thumbnail && (
                 <img src={item.thumbnail} alt="" className="markdown-mention-avatar" />
               )}

package/src/tools/MarkdownEditor/createMentionSuggestion.ts

@@ -36,6 +36,14 @@ export function createMentionSuggestion(
         },
       });
 
+      // The popup wrapper is mounted in onStart and removed in onExit.
+      // While mounted it must stay hidden whenever MentionList renders
+      // nothing (empty query / no matches), otherwise an empty positioned
+      // div lingers next to the caret as a ghost block.
+      const setPopupVisible = (visible: boolean) => {
+        if (popup) popup.style.display = visible ? '' : 'none';
+      };
+
       const updatePosition = () => {
         if (!popup) return;
         const virtualEl = buildVirtualElement();
@@ -81,6 +89,7 @@ export function createMentionSuggestion(
           popup.style.cssText = 'position: absolute; top: 0; left: 0; z-index: 99999;';
           popup.appendChild(component.element);
           document.body.appendChild(popup);
+          setPopupVisible(props.items.length > 0);
 
           getReferenceRect = () => props.clientRect?.() ?? null;
 
@@ -98,6 +107,8 @@ export function createMentionSuggestion(
             },
           });
 
+          setPopupVisible(props.items.length > 0);
+
           // Refresh reference accessor so autoUpdate sees the new caret rect.
           getReferenceRect = () => props.clientRect?.() ?? null;
           updatePosition();

package/src/tools/MarkdownEditor/lazy.tsx

@@ -9,23 +9,48 @@
  * dropdown). Together that's ~200 KB minified — wrap it in React.lazy so
  * pages that don't render an editor don't pay.
  *
+ * Why a hand-rolled lazy wrapper instead of `createLazyComponent`:
+ * `createLazyComponent` returns a plain function component that does not
+ * forward `ref`, so the imperative `MarkdownEditorHandle` (focus /
+ * moveCursorToEnd — used by chat composer registration + voice slot)
+ * would be silently dropped. The wrapper below is a `forwardRef` so the
+ * ref reaches the underlying TipTap editor through `React.lazy`.
+ *
  * Light surface kept here:
  *   - All public types (erased at compile time).
  *   - `mentionPresets` — pure data describing how to render mentions to
  *     markdown. No TipTap imports at module scope.
  */
 
-import { createLazyComponent, LoadingFallback } from '../../components';
-import type { MarkdownEditorProps } from './MarkdownEditor';
+import { Suspense, lazy, forwardRef } from 'react';
+import { LoadingFallback } from '../../components';
+import type { MarkdownEditorProps, MarkdownEditorHandle } from './MarkdownEditor';
+
+const MarkdownEditorImpl = lazy(() =>
+  import('./MarkdownEditor').then((m) => ({ default: m.MarkdownEditor })),
+);
 
-export const LazyMarkdownEditor = createLazyComponent<MarkdownEditorProps>(
-  () => import('./MarkdownEditor').then((m) => ({ default: m.MarkdownEditor })),
-  {
-    displayName: 'LazyMarkdownEditor',
-    fallback: <LoadingFallback minHeight={140} text="Loading editor…" />,
+/**
+ * Lazy-loaded `MarkdownEditor`. Forwards `ref` (`MarkdownEditorHandle`)
+ * to the underlying TipTap editor once the chunk resolves.
+ */
+export const LazyMarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
+  function LazyMarkdownEditor(props, ref) {
+    return (
+      <Suspense fallback={<LoadingFallback minHeight={140} text="Loading editor…" />}>
+        <MarkdownEditorImpl {...props} ref={ref} />
+      </Suspense>
+    );
   },
 );
 
+// `MarkdownEditor` is the public eager-looking name — it resolves to the
+// same lazy component so importing it from this subpath does NOT pull
+// ~200 KB of TipTap into the caller's initial bundle. Keeping the name
+// here means `@djangocfg/ui-tools/markdown-editor` exposes
+// `MarkdownEditor`, `LazyMarkdownEditor`, and `mentionPresets`.
+export { LazyMarkdownEditor as MarkdownEditor };
+
 // Light surface — pure helpers + types.
 export { mentionPresets } from './mentionPresets';
 

package/src/tools/MarkdownEditor/styles.css

@@ -107,6 +107,15 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-ring, var(--ring)) 30%, transparent);
 }
 
+/* Embedded mode — the host surface (e.g. chat composer) draws the
+   frame, so the editor must not paint its own border or focus ring. */
+.markdown-editor--unstyled,
+.markdown-editor--unstyled:focus-within {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
 /* Mention inline chip */
 .markdown-mention {
   background: var(--color-primary, var(--primary));
@@ -190,6 +199,10 @@
   border-radius: 4px;
   border: none;
   background: transparent;
+  /* Explicit semantic colour — without it the icon inherits the host's
+     default text colour (UA black on a dark editor surface) and the
+     toolbar is invisible. */
+  color: var(--foreground);
   cursor: pointer;
   opacity: 0.5;
   transition: opacity 0.15s, background 0.15s;

package/src/tools/MarkdownMessage/CodeBlock.tsx

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import { CopyButton } from '@djangocfg/ui-core/components';
-import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 import PrettyCode from '../PrettyCode';
 
 interface CodeBlockProps {
@@ -8,6 +7,13 @@ interface CodeBlockProps {
   language: string;
   isUser: boolean;
   isCompact?: boolean;
+  /**
+   * Code surface palette. Default `'dark'` — syntax highlighting
+   * ships its own contrast model and reads washed out on a light
+   * surface (GitHub / ChatGPT / VSCode convention). Pass `'light'`
+   * to opt a host into a light code surface anyway.
+   */
+  codeTheme?: 'dark' | 'light';
 }
 
 /**
@@ -23,22 +29,25 @@ interface CodeBlockProps {
  * `isCompact` change. `code` is the main trigger — long code blocks
  * should not re-render when parent chat scrolls.
  */
-function CodeBlockRaw({ code, language }: CodeBlockProps) {
-  const theme = useResolvedTheme();
-
+function CodeBlockRaw({ code, language, codeTheme = 'dark' }: CodeBlockProps) {
   // Chat fences are always rendered in PrettyCode's compact mode:
   // 12px font, tighter padding, line-height 1.4. A fenced block in
   // a chat bubble shouldn't outweigh two paragraphs of body text —
   // the standalone PrettyCode story keeps the larger default for
   // docs/diff viewers.
+  //
+  // The surface defaults to dark: syntax highlighting ships its own
+  // contrast model, so a light code surface in a light-theme bubble
+  // renders washed out (GitHub / ChatGPT / VSCode convention). Hosts
+  // can opt into a light surface via `codeTheme="light"`.
   return (
     <div className="my-2">
       <PrettyCode
         data={code}
         language={language}
         className="text-xs"
-        customBg="bg-code"
-        mode={theme}
+        mode={codeTheme}
+        customBg={codeTheme === 'light' ? 'bg-code' : undefined}
         isCompact
         // Disable click-to-scroll-isolation in chat markdown: code
         // fences here are part of an assistant reply, not a docs
@@ -60,15 +69,15 @@ export const CodeBlock = memo(CodeBlockRaw);
  *  Memoised: re-renders only when `code`, `language`, `isUser` or
  *  `isCompact` change.
  */
-function CodeBlockFallbackRaw({ code, isUser }: CodeBlockProps) {
-  // See CodeBlock above for the spirit of this layout — palette
-  // pre-computed before render.
-  const copyHoverClass = isUser
-    ? 'hover:bg-white/20 text-white'
-    : 'hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground';
+function CodeBlockFallbackRaw({ code, codeTheme = 'dark' }: CodeBlockProps) {
+  const isDark = codeTheme === 'dark';
+  // On the dark surface the copy button is always light; on a light
+  // surface it follows the semantic muted token.
   const copyButtonClass =
-    `absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity ` +
-    `h-8 w-8 ${copyHoverClass}`;
+    `absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ` +
+    (isDark
+      ? 'text-white/70 hover:text-white hover:bg-white/15'
+      : 'text-muted-foreground hover:text-foreground hover:bg-muted');
 
   return (
     <div className="relative group my-3">
@@ -78,9 +87,23 @@ function CodeBlockFallbackRaw({ code, isUser }: CodeBlockProps) {
         className={copyButtonClass}
         title="Copy code"
       />
-      <pre className="p-3 rounded text-xs font-mono overflow-x-auto bg-code text-code-foreground border border-code-border">
-        <code>{code}</code>
-      </pre>
+      {isDark ? (
+        // Fixed dark surface to match PrettyCode's default.
+        <pre
+          className="p-3 rounded text-xs font-mono overflow-x-auto border"
+          style={{
+            backgroundColor: '#0d1117',
+            color: '#e5e7eb',
+            borderColor: '#1f2937',
+          }}
+        >
+          <code>{code}</code>
+        </pre>
+      ) : (
+        <pre className="p-3 rounded text-xs font-mono overflow-x-auto bg-code text-code-foreground border border-code-border">
+          <code>{code}</code>
+        </pre>
+      )}
     </div>
   );
 }