@lovett/ui 0.0.11 → 0.2.0

package/src/chart-legend.tsx

@@ -0,0 +1,304 @@
+/**
+ * ChartLegend — swatch + label + optional value, horizontal or vertical.
+ *
+ * Promoted in ADR-146 D5 (chart layer). Rendered standalone by `DonutChart`,
+ * and passed into `ChartFrame`'s `legend` slot by the axis charts for any
+ * chart with two or more series.
+ *
+ * CONSUMERS — measured 2026-09-06.
+ *   TODAY, inside `@lovett/ui` (3): `line-chart.tsx`, `bar-chart.tsx`,
+ *   `donut-chart.tsx`.
+ *   `RankedBars` does NOT import it — its rows carry their own labels — and
+ *   neither does `ChartFrame`, which takes an already-rendered `legend?:
+ *   ReactNode` from its caller. The earlier claim naming both was wrong.
+ *   TODAY, in product code (0): no file under `apps/workspace/src` imports
+ *   `ChartLegend`. Tracked in
+ *   `docs/follow-ups/_pending/adr-146-consumer-gate.md`.
+ *
+ * THE ONE RULE THIS PRIMITIVE EXISTS TO HOLD (ADR-146 D10.4)
+ * ----------------------------------------------------------
+ * **Text wears text tokens, never the series colour.** Labels and values are
+ * `--foreground`, secondary meta is `--text-tertiary`, and only the swatch
+ * carries the hue. This
+ * is the same rule as `tokens.css`'s folder hues — a series colour is a
+ * *fill*, not an *ink* — and it is exactly where the source kit is wrong: its
+ * tooltip inks its label in the series violet, which at 14px is a contrast failure on both
+ * its own surfaces. We do not copy that. If coloured text is ever genuinely
+ * required it owes a measured `*-ink` companion token first.
+ *
+ * The swatch is a small **rounded square**, not a circle: it reads as a data
+ * mark rather than a bullet, which is what the source kit's 10×10 `Point`
+ * does. A circle at this size is indistinguishable from a list bullet.
+ *
+ * Identity is never colour alone (D10.1) — every swatch sits beside its own
+ * text label, and the swatch itself is `aria-hidden` because the label
+ * already carries the meaning.
+ *
+ * WHICH IS EXACTLY WHAT A FLEX COLUMN CAN TAKE AWAY (fixed 2026-09-06)
+ * -------------------------------------------------------------------
+ * `min-w-0` on the label wrapper is what lets a long label truncate — and it
+ * is also what lets a starved container shrink it to NOTHING. Measured in a
+ * browser at a 390px viewport, both themes, inside `DonutChart`: the legend
+ * column was allotted 0px, and all five labels rendered at `width: 0` against
+ * `scrollWidth`s of 73-124px. Swatch and value survived; the names did not.
+ * Five series, identified by colour alone — the one thing D10.1 forbids, and
+ * a chart a colour-blind reader loses entirely.
+ *
+ * The row now carries `flex-wrap` and the label a `labelMinWidth` floor,
+ * bounded by `min(floor, 100%)`. When label and value cannot both fit, the
+ * VALUE drops to a second line; the label never gives up its width. Beyond
+ * that the label truncates with a `title`, which is a readable loss rather
+ * than a silent one.
+ *
+ * Token discipline: every colour is `rgb(var(--token))`; series hues resolve
+ * through the frozen `SERIES` lookup in `lib/series.ts` (D8 — never a
+ * constructed `--series-${i}`). Every size, gap and radius is a token. The
+ * swatch radius is `calc(var(--radius-xs) / 2)` rather than a literal: at a
+ * 12px swatch, `--radius-xs` (6px) is exactly half the box, so the browser
+ * clamps it to a full circle and the "rounded square, not a bullet" intent is
+ * lost. Halving the token keeps the mark square-ish AND keeps it on the
+ * scale. (A `--radius-2xs` token would be the tidier answer — logged as a
+ * follow-up, not invented here.)
+ */
+
+import { cn } from './lib/utils'
+import { slotColor, type ChartSlot, type SeriesPalette } from './lib/series'
+
+// The palette is re-exported from here so the barrel has one ADR-146 block
+// and consumers never reach into `lib/`. `lib/series.ts` stays the canonical
+// definition — see its header for why it is a frozen array (D8).
+export {
+  SERIES,
+  SERIES_SCATTER,
+  SERIES_SLOT_COUNT,
+  SCATTER_SLOT_COUNT,
+  OTHER_SLOT_COLOR,
+  isSeriesSlot,
+  isScatterSlot,
+  seriesColor,
+  scatterColor,
+  paletteColor,
+  slotColor,
+} from './lib/series'
+export type {
+  SeriesSlot,
+  ScatterSlot,
+  SeriesPalette,
+  ChartSlot,
+} from './lib/series'
+
+export interface ChartLegendItem {
+  /**
+   * Stable identity key. Also the React key and the `onSelect` payload.
+   *
+   * ADR-146 D7: **colour follows the entity, never its rank.** Assign the
+   * slot from this key, not from the array index after filtering — otherwise
+   * removing a series repaints every survivor.
+   */
+  key: string
+  /** The series name. Always rendered — identity is never colour alone. */
+  label: string
+  /** Palette slot, or `'other'` for the folded remainder. */
+  slot: ChartSlot
+  /**
+   * Optional pre-formatted value at the row end (vertical orientation) or
+   * after the label (horizontal). Format through `@lovett/ui/format` — this
+   * primitive never formats a number, it only sets it in `tabular-nums`.
+   */
+  value?: string
+  /** Optional muted secondary text under the label. Vertical only. */
+  meta?: string
+}
+
+export interface ChartLegendProps {
+  /** The series, in draw order. */
+  items: readonly ChartLegendItem[]
+  /**
+   * `'horizontal'` — an inline row for a chart header.
+   * `'vertical'` — a divided list for a donut or ranked-bar panel.
+   * Default `'horizontal'`.
+   */
+  orientation?: 'horizontal' | 'vertical'
+  /**
+   * Which palette the slots index into. `'scatter'` is the all-pairs,
+   * three-slot palette; a slot beyond its cap renders as `'other'` rather
+   * than wrapping around onto a hue already in use. Default `'default'`.
+   */
+  palette?: SeriesPalette
+  /**
+   * Makes each row a button. Receives the item's `key`. Omit for a static
+   * legend — an inert row must not advertise an interaction it does not have.
+   */
+  onSelect?: (key: string) => void
+  /**
+   * The emphasized series. Every other row dims. `null`/omitted = no
+   * emphasis. Dimming is opacity only, so nothing reflows.
+   */
+  activeKey?: string | null
+  /**
+   * Reserved width for the value column, so a value that grows from "9" to
+   * "11,227" does not resize the row (layout stability). Pass a token-derived
+   * length. Default `var(--space-12)`.
+   */
+  valueMinWidth?: string
+  /**
+   * Floor for the LABEL column, so a starved container cannot crush the label
+   * to zero width and leave the reader identifying series by colour alone
+   * (D10.1). Measured 2026-09-06: inside `DonutChart` at a 390px viewport the
+   * legend column was allotted 0px and every label rendered at `width: 0`
+   * while its `scrollWidth` was 73-124px — swatch and value only.
+   *
+   * `min-width: auto` is flexbox's default for a flex item and would be the
+   * right answer, except the label must also be allowed to TRUNCATE, which
+   * needs an explicit floor instead. The floor is bounded by `min(..., 100%)`
+   * so it can never push the row wider than its container; when the label and
+   * the value cannot both fit, the row wraps and the value drops to a second
+   * line rather than the label giving up its width.
+   *
+   * Pass a token-derived length. Default `calc(var(--space-12) * 2)`.
+   */
+  labelMinWidth?: string
+  /** Accessible name for the list. Default `'Chart legend'`. */
+  label?: string
+  /** Optional className on the list container. */
+  className?: string
+}
+
+export function ChartLegend({
+  items,
+  orientation = 'horizontal',
+  palette = 'default',
+  onSelect,
+  activeKey = null,
+  valueMinWidth = 'var(--space-12)',
+  labelMinWidth = 'calc(var(--space-12) * 2)',
+  label = 'Chart legend',
+  className,
+}: ChartLegendProps) {
+  const vertical = orientation === 'vertical'
+  const interactive = onSelect !== undefined
+
+  return (
+    <ul
+      aria-label={label}
+      className={cn(
+        vertical ? 'flex flex-col' : 'flex flex-wrap items-center',
+        className,
+      )}
+      style={vertical ? undefined : { gap: 'var(--space-4)' }}
+    >
+      {items.map((item, index) => {
+        const dimmed = activeKey !== null && activeKey !== item.key
+        const color = slotColor(item.slot, palette)
+
+        const body = (
+          <>
+            <span
+              aria-hidden="true"
+              className="shrink-0"
+              style={{
+                width: 'var(--space-3)',
+                height: 'var(--space-3)',
+                background: color,
+                // See the header note: half of --radius-xs, because
+                // --radius-xs on a 12px box clamps to a circle.
+                borderRadius: 'calc(var(--radius-xs) / 2)',
+              }}
+            />
+            <span
+              className={cn('min-w-0', vertical && 'flex-1')}
+              style={{ minWidth: `min(${labelMinWidth}, 100%)` }}
+            >
+              <span
+                className="block truncate text-[14px] font-medium"
+                style={{ color: 'rgb(var(--foreground))' }}
+                title={item.label}
+              >
+                {item.label}
+              </span>
+              {vertical && item.meta !== undefined && (
+                <span
+                  className="block truncate text-[12px]"
+                  style={{
+                    marginTop: 'var(--space-1)',
+                    color: 'rgb(var(--text-tertiary))',
+                  }}
+                  title={item.meta}
+                >
+                  {item.meta}
+                </span>
+              )}
+            </span>
+            {item.value !== undefined && (
+              <span
+                className={cn(
+                  'shrink-0 text-[14px] font-semibold tabular-nums',
+                  vertical ? 'text-right' : '',
+                )}
+                style={{
+                  color: 'rgb(var(--foreground))',
+                  minWidth: vertical ? valueMinWidth : undefined,
+                  // Keeps the value on the right edge of whichever line it
+                  // lands on, so a wrapped value still reads as the value
+                  // column rather than as a stray second label.
+                  marginInlineStart: vertical ? 'auto' : undefined,
+                }}
+              >
+                {item.value}
+              </span>
+            )}
+          </>
+        )
+
+        // `flex-wrap` is the escape valve that makes `labelMinWidth` safe: when
+        // the label floor plus the reserved value column exceed the row, the
+        // VALUE drops to a second line and the label keeps its width. Without
+        // it the floor would just overflow the container instead.
+        const rowClass = cn(
+          'flex w-full flex-wrap items-center text-left',
+          vertical ? 'gap-3' : 'gap-2',
+        )
+        const rowStyle = {
+          paddingBlock: vertical ? 'var(--space-4)' : undefined,
+          opacity: dimmed ? 0.55 : 1,
+        }
+
+        return (
+          <li
+            key={item.key}
+            className="min-w-0"
+            style={{
+              borderTop:
+                vertical && index > 0 ? '1px solid rgb(var(--border))' : undefined,
+            }}
+          >
+            {interactive ? (
+              <button
+                type="button"
+                aria-pressed={activeKey === item.key}
+                onClick={() => onSelect(item.key)}
+                className={cn(
+                  rowClass,
+                  'cursor-pointer rounded-[var(--radius-xs)]',
+                  'motion-safe:transition-opacity',
+                  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+                )}
+                style={{
+                  ...rowStyle,
+                  transitionDuration: 'var(--dur-fast)',
+                  transitionTimingFunction: 'var(--ease-out)',
+                }}
+              >
+                {body}
+              </button>
+            ) : (
+              <span className={rowClass} style={rowStyle}>
+                {body}
+              </span>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/src/chart-tooltip.tsx

@@ -0,0 +1,267 @@
+/**
+ * ChartTooltip — the floating readout over a plot.
+ *
+ * Promoted in ADR-146 D5 (chart layer); it is the kit's `Information` card.
+ *
+ * CONSUMERS — measured 2026-09-06.
+ *   TODAY, inside `@lovett/ui` (3): `line-chart.tsx` (`LineChart` /
+ *   `AreaChart` — the hover band's readout), `bar-chart.tsx`,
+ *   `donut-chart.tsx`.
+ *   TODAY, in product code (0): no file under `apps/workspace/src` imports
+ *   `ChartTooltip` directly; it reaches the product only through those
+ *   charts. Tracked in
+ *   `docs/follow-ups/_pending/adr-146-consumer-gate.md`.
+ *
+ * ADR-146 D9 makes the hover layer part of the primitive rather than the
+ * caller's problem: an SVG chart is interactive by nature, and shipping one
+ * without a readout is shipping it unfinished.
+ *
+ * WHAT THIS PRIMITIVE IS RESPONSIBLE FOR
+ * --------------------------------------
+ * 1. **Never overflowing its plot.** It flips to the other side of the anchor
+ *    near the right edge (and back near the left), and clamps vertically. The
+ *    flip decision needs the tooltip's real size, so the box is measured in a
+ *    layout effect — before paint, so there is no visible jump.
+ * 2. **Never re-laying out the plot.** Positioning is a `transform` on an
+ *    absolutely-positioned box with `pointer-events: none`. It cannot push a
+ *    mark, cannot resize the plot, and cannot steal a hover from the chart
+ *    underneath it. `visible={false}` keeps it mounted and merely hides it, so
+ *    showing it costs no measurement and no reflow.
+ * 3. **Text wears text tokens** (D10.4). The swatch carries the hue; the label
+ *    is `--text-secondary` and the value `--foreground`. The source kit paints
+ *    its tooltip label in the series colour — that is the one thing from its
+ *    `Information` card we deliberately do not copy.
+ *
+ * THE PARENT MUST BE `position: relative`. `ChartFrame`'s plot area already
+ * is; a bespoke plot has to opt in, and the coordinates are relative to that
+ * box's top-left.
+ *
+ * Token discipline: panel is `--surface-card` + 1px `--border` + `--shadow-md`
+ * + `--radius-sm`, padded `--space-2` / `--space-3`. Series hues come from the
+ * frozen `SERIES` lookup (D8), never a constructed `--series-${i}`. The only
+ * bare numbers are geometry — pixel arithmetic cannot read a CSS custom
+ * property, and `offset` documents its token equivalent.
+ */
+
+import { useLayoutEffect, useRef, useState } from 'react'
+
+import { cn } from './lib/utils'
+import { slotColor, type ChartSlot, type SeriesPalette } from './lib/series'
+
+export interface ChartTooltipRow {
+  /** Stable identity key — also the React key. */
+  key: string
+  /** Series name. Wears `--text-secondary`, never the series colour. */
+  label: string
+  /**
+   * Pre-formatted value. Format through `@lovett/ui/format` at the chart
+   * level; the tooltip only sets it in `tabular-nums`.
+   */
+  value: string
+  /**
+   * Palette slot for the swatch, or `'other'`. Omit for a single-series
+   * readout, where a swatch would be noise — the title already names it.
+   */
+  slot?: ChartSlot
+}
+
+export interface ChartTooltipProps {
+  /** Anchor x, in pixels from the plot box's left edge. */
+  x: number
+  /** Anchor y, in pixels from the plot box's top edge. */
+  y: number
+  /** Plot box width in px — the right-edge flip and clamp bound. */
+  plotWidth: number
+  /** Plot box height in px — the vertical clamp bound. */
+  plotHeight: number
+  /** Optional heading — usually the x value ("Mar 14"). */
+  title?: string
+  /** One row per series at this x. */
+  rows: readonly ChartTooltipRow[]
+  /** Which palette `slot` indexes into. Default `'default'`. */
+  palette?: SeriesPalette
+  /**
+   * Gap in px between the anchor and the tooltip's near edge. Default `12`,
+   * the pixel value of `--space-3`; it is a number because the flip/clamp is
+   * arithmetic and cannot read a custom property.
+   */
+  offset?: number
+  /**
+   * Whether the readout is showing. Default `true`. `false` hides it without
+   * unmounting, so the measured size survives and re-showing costs no reflow.
+   */
+  visible?: boolean
+  /**
+   * Reserved width for the value column so a value growing from "9" to
+   * "11,227" does not resize the tooltip mid-hover. Default `var(--space-10)`.
+   */
+  valueMinWidth?: string
+  /** Optional className on the tooltip box. */
+  className?: string
+}
+
+interface Size {
+  readonly width: number
+  readonly height: number
+}
+
+const UNMEASURED: Size = { width: 0, height: 0 }
+
+/**
+ * Clamp `value` into `[0, max]`, tolerating a `max` below zero (a tooltip
+ * wider than its plot pins to the left edge rather than going negative).
+ */
+function clamp(value: number, max: number): number {
+  if (!Number.isFinite(value)) return 0
+  return Math.max(0, Math.min(value, Math.max(0, max)))
+}
+
+/**
+ * Where the tooltip box sits, given the anchor, the plot bounds and the
+ * measured box. Exported for tests — the flip/clamp is the whole contract and
+ * it is far easier to assert as arithmetic than as a rendered transform.
+ *
+ * - Prefers the right of the anchor; flips left when the right side would
+ *   overflow **and** the left side actually fits (otherwise flipping would
+ *   just overflow the other way).
+ * - Vertically centres on the anchor, then clamps inside the plot.
+ * - An unmeasured box (`0 × 0`) simply sits at the anchor; the layout effect
+ *   corrects it before paint.
+ */
+export function tooltipPosition(
+  anchor: { x: number; y: number },
+  plot: Size,
+  box: Size,
+  offset: number,
+): { left: number; top: number } {
+  const x = Number.isFinite(anchor.x) ? anchor.x : 0
+  const y = Number.isFinite(anchor.y) ? anchor.y : 0
+
+  const right = x + offset
+  const left = x - offset - box.width
+  const overflowsRight = right + box.width > plot.width
+  const fitsLeft = left >= 0
+  const chosen = overflowsRight && fitsLeft ? left : right
+
+  return {
+    left: clamp(chosen, plot.width - box.width),
+    top: clamp(y - box.height / 2, plot.height - box.height),
+  }
+}
+
+export function ChartTooltip({
+  x,
+  y,
+  plotWidth,
+  plotHeight,
+  title,
+  rows,
+  palette = 'default',
+  offset = 12,
+  visible = true,
+  valueMinWidth = 'var(--space-10)',
+  className,
+}: ChartTooltipProps) {
+  const boxRef = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState<Size>(UNMEASURED)
+
+  // Re-measure exactly when the rendered content changes. A content signature
+  // rather than `[rows]` because `rows` is a fresh array on every parent
+  // render, which would make this effect run forever.
+  const signature = `${title ?? ''}\u0000${rows
+    .map((row) => `${row.key}\u0001${row.label}\u0001${row.value}`)
+    .join('\u0002')}`
+
+  useLayoutEffect(() => {
+    const el = boxRef.current
+    if (el === null) return
+    const next: Size = { width: el.offsetWidth, height: el.offsetHeight }
+    setSize((prev) =>
+      prev.width === next.width && prev.height === next.height ? prev : next,
+    )
+  }, [signature])
+
+  const { left, top } = tooltipPosition(
+    { x, y },
+    { width: plotWidth, height: plotHeight },
+    size,
+    offset,
+  )
+
+  return (
+    <div
+      ref={boxRef}
+      role="tooltip"
+      aria-hidden={!visible}
+      className={cn(
+        'pointer-events-none absolute top-0 left-0 z-10 w-max max-w-full',
+        'motion-safe:transition-transform',
+        className,
+      )}
+      style={{
+        transform: `translate3d(${left}px, ${top}px, 0)`,
+        transitionDuration: 'var(--dur-fast)',
+        // Data changes tween with ease-out. Never ease-spring: overshoot on a
+        // readout that tracks the cursor reads as imprecise (ADR-146 D9).
+        transitionTimingFunction: 'var(--ease-out)',
+        visibility: visible ? 'visible' : 'hidden',
+        background: 'rgb(var(--surface-card))',
+        border: '1px solid rgb(var(--border))',
+        borderRadius: 'var(--radius-sm)',
+        boxShadow: 'var(--shadow-md)',
+        padding: 'var(--space-2) var(--space-3)',
+      }}
+    >
+      {title !== undefined && (
+        <div
+          className="text-[12px] font-semibold tabular-nums"
+          style={{
+            marginBottom: 'var(--space-1)',
+            color: 'rgb(var(--foreground))',
+          }}
+        >
+          {title}
+        </div>
+      )}
+      <div className="flex flex-col" style={{ gap: 'var(--space-1)' }}>
+        {rows.map((row) => (
+          <div
+            key={row.key}
+            className="flex items-center gap-2"
+          >
+            {row.slot !== undefined && (
+              <span
+                aria-hidden="true"
+                className="shrink-0"
+                style={{
+                  width: 'var(--space-2)',
+                  height: 'var(--space-2)',
+                  background: slotColor(row.slot, palette),
+                  // Half of --radius-xs: at 8px the full token clamps to a
+                  // circle, and a circle reads as a bullet, not a data mark.
+                  borderRadius: 'calc(var(--radius-xs) / 2)',
+                }}
+              />
+            )}
+            <span
+              className="text-[12px] whitespace-nowrap"
+              style={{ color: 'rgb(var(--text-secondary))' }}
+            >
+              {row.label}
+            </span>
+            <span
+              className="ml-auto text-[12px] font-semibold tabular-nums whitespace-nowrap"
+              style={{
+                color: 'rgb(var(--foreground))',
+                minWidth: valueMinWidth,
+                textAlign: 'right',
+              }}
+            >
+              {row.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/code-block.tsx

@@ -9,7 +9,7 @@
  * Promoted from brand-ai-extension (ADR-036 D20).
  */
 
-import { useEffect, useState, type HTMLAttributes } from 'react'
+import { createContext, useContext, useEffect, useState, type HTMLAttributes, type ReactNode } from 'react'
 import { Check, Copy } from 'lucide-react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { vscDarkPlus, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
@@ -207,14 +207,54 @@ export function CodeBlock({ language, children }: CodeBlockProps) {
 }
 
 /**
- * MarkdownCode — react-markdown code element adapter.
+ * Whether the code being rendered sits inside react-markdown's `pre` element,
+ * i.e. is a fenced or indented code BLOCK.
  *
- * Inline code (single backtick, no className) renders as a small chip.
- * Fenced code (triple backtick, className="language-xxx") delegates to
- * CodeBlock for syntax highlighting + copy button.
+ * The signal is structural, not textual. `remark-rehype` always emits block
+ * code as `<pre><code>` (its `code` handler wraps unconditionally) and inline
+ * code as a bare `<code>` (its `inlineCode` handler never wraps). react-markdown
+ * 10 hands every component the hast `node`, but a hast Element carries no
+ * parent link, so the `code` component cannot see `pre` from `node` alone —
+ * and react-markdown exposes `parent` only to `allowElement` / `urlTransform`,
+ * never to components. So the `pre` component announces itself here and
+ * `MarkdownCode` reads it.
+ *
+ * The previous discriminator was "has a className", which is only set when
+ * the fence names a language. That made every language-less fence — the rich
+ * composer's default (ADR-148 D3) — render as an inline chip. This is right
+ * for a bare fence, an empty fence, and a code span that wraps onto a second
+ * line (CommonMark folds its newline to a space, but nothing here relies on
+ * that).
+ */
+const PreContext = createContext(false)
+
+/**
+ * MarkdownPre — react-markdown `pre` element adapter.
+ *
+ * Renders no element of its own: `CodeBlock` owns its container, and a real
+ * `<pre>` here would double-wrap every fenced block. Its only job is to tell
+ * the `code` inside it that it is a block. Register together with
+ * `MarkdownCode` (as `markdownComponents` does).
+ */
+export function MarkdownPre({ children }: HTMLAttributes<HTMLElement>) {
+  return <PreContext.Provider value={true}>{children}</PreContext.Provider>
+}
+
+/**
+ * MarkdownCode — react-markdown `code` element adapter.
+ *
+ * A BLOCK is a `code` inside react-markdown's `pre` (see `PreContext`) — or one
+ * handed a className, which is how `<MarkdownCode className="language-json">`
+ * is used directly outside react-markdown. Blocks delegate to `CodeBlock`: a
+ * `language-*` capture picks the highlighter; no capture (a bare fence, or a
+ * class that is not a language) gets the plain preformatted surface with the
+ * same header and copy button. Everything else is inline code and renders as
+ * a small chip.
  */
 export function MarkdownCode({ className, children }: HTMLAttributes<HTMLElement>) {
-  if (!className) {
+  const inPre = useContext(PreContext)
+  const block = inPre || Boolean(className)
+  if (!block) {
     return (
       <code
         className="rounded px-1.5 py-0.5 font-mono text-[0.85em]"
@@ -229,7 +269,21 @@ export function MarkdownCode({ className, children }: HTMLAttributes<HTMLElement
     )
   }
 
-  const match = /language-([\w-]+)/.exec(className)
+  const match = className === undefined ? null : /language-([\w-]+)/.exec(className)
   const language = match?.[1]
-  return <CodeBlock {...(language !== undefined ? { language } : {})}>{String(children)}</CodeBlock>
+  return <CodeBlock {...(language !== undefined ? { language } : {})}>{sourceOf(children)}</CodeBlock>
+}
+
+/**
+ * The code text react-markdown hands a block: one string for a fence with
+ * content, and NOTHING for an empty fence — `hast-util-to-jsx-runtime`'s
+ * `addChildren` only sets `props.children` when the child is truthy, so the
+ * empty-string text node never arrives and `String(children)` would render
+ * the word "undefined".
+ */
+function sourceOf(children: ReactNode): string {
+  if (typeof children === 'string') return children
+  if (typeof children === 'number') return String(children)
+  if (children === undefined || children === null || typeof children === 'boolean') return ''
+  return String(children)
 }