@seed-ship/mcp-ui-solid 6.22.0 → 6.24.0

package/src/components/chart-missing-plugin.ts

@@ -0,0 +1,334 @@
+/**
+ * Missing values in a Chart.js chart (v6.24.0) — everything the renderer adds
+ * to its Chart.js config when a payload says a value is MISSING (`null`).
+ *
+ * The rule: absence is never zero. Chart.js already keeps the slot of a `null`
+ * (no label dropped) and draws nothing for it; what it does not do is make the
+ * absence READABLE. A null bar is a zero-height bar that is skipped when
+ * drawn, a null line point is a hole the line may bridge (`spanGaps`), and the
+ * legend, tooltip and axis know nothing of either. This module supplies:
+ *
+ * - {@link createMissingValuesPlugin} — a PER-CHART plugin (never
+ *   `Chart.register`ed, so it can leak into no other chart) that outlines a
+ *   dashed stub where a bar should have been (not on stacked or overlaid
+ *   bars, whose baseline belongs to another series), and says "no data" on a
+ *   chart with nothing to draw;
+ * - {@link createMissingLegendGenerator} — marks a fully-missing series in the
+ *   legend;
+ * - {@link createTooltipLabel} — names a missing value, and appends the unit;
+ * - {@link withDatasetsNoGapSpan} — the shallow-cloned data with
+ *   `spanGaps: false`;
+ * - {@link applyUnitAxisTitle} — the unit as the value axis title.
+ *
+ * Runtime-free on purpose (no `solid-js`, no `chart.js` import): the renderer
+ * hands in the Chart.js pieces it loaded and the chrome strings (lazily, as
+ * getters, so a late locale change is honoured at draw time). Every function
+ * is defensive — a drawing hook that throws would blank the whole chart.
+ *
+ * Chart.js 4.5.1 facts this relies on (verified in `dist/chart.js`):
+ * - a bar whose parsed value is `null` gets `base = head = vScale.getBasePixel()`
+ *   and no `skip` flag (BarController.updateElements), and `BarController.draw`
+ *   skips it (`getParsed(i)[vScale.axis] !== null`) — so nothing is painted;
+ * - the bar element still carries its true index-axis thickness (`width` for a
+ *   vertical bar, `height` for a horizontal one).
+ */
+
+import type { MCPUIStrings } from '../context/MCPUIStringsContext';
+import { formatMCPUIString } from '../utils/format-string';
+import { isMissingChartValue } from '../utils/missing-value';
+
+type Strings = Required<MCPUIStrings>;
+
+/** Length, in px along the value axis, of the dashed stub of a missing bar. */
+export const MISSING_BAR_STUB_LENGTH = 12;
+/** Stroke of the stub when the dataset names no border colour. */
+export const MISSING_BAR_FALLBACK_COLOR = '#9ca3af';
+/** Colour of the centred "no data" text. */
+export const NO_DATA_TEXT_COLOR = '#6b7280';
+const STUB_DASH = [4, 3];
+
+/** Chart types whose value axis is `y` and whose points are `{x, y}`. */
+const POINT_CHART_TYPES = new Set(['scatter', 'bubble']);
+
+/**
+ * The category of convention line a chart shows under its canvas:
+ * `'gaps'` (a line breaks), `'bars'` (a dashed outline stands in for the
+ * bar) or `'omitted'` (nothing is drawn: scatter, bubble, stacked bars).
+ */
+export type MissingNoteKind = 'gaps' | 'bars' | 'omitted';
+
+/**
+ * Whether a bar chart's bars are stacked or overlaid (`stacked` on either
+ * axis). A missing bar there has no slot of its own at the baseline — the
+ * baseline belongs to the series below — so no dashed outline is drawn.
+ */
+export function isStackedChart(options: any): boolean {
+  return Boolean(options?.scales?.x?.stacked || options?.scales?.y?.stacked);
+}
+
+/** Which convention note a chart gets: how ITS missing values are drawn. */
+export function missingNoteKind(chartType: string | undefined, options?: any): MissingNoteKind {
+  if (chartType === 'bar') return isStackedChart(options) ? 'omitted' : 'bars';
+  if (chartType === 'scatter' || chartType === 'bubble') return 'omitted';
+  return 'gaps';
+}
+
+// ─── Data ──────────────────────────────────────────────────────────────────
+
+/**
+ * Chart.js data with every dataset shallow-cloned and `spanGaps: false`, so a
+ * line breaks at a missing value instead of joining its neighbours. Never
+ * mutates its input; `labels` and every other key are carried by reference.
+ */
+export function withDatasetsNoGapSpan<D extends { datasets?: unknown }>(data: D): D {
+  const datasets = Array.isArray(data?.datasets) ? data.datasets : null;
+  if (!datasets) return data;
+  return {
+    ...data,
+    datasets: datasets.map((dataset: unknown) =>
+      dataset !== null && typeof dataset === 'object'
+        ? { ...(dataset as object), spanGaps: false }
+        : dataset
+    ),
+  };
+}
+
+// ─── Legend ────────────────────────────────────────────────────────────────
+
+type LegendGenerator = (chart: any) => any[];
+
+/**
+ * Wraps a Chart.js legend label generator so a fully-missing dataset reads
+ * `"{series} (no data)"` (`strings.chartLegendNoData`). Every other item is
+ * passed through untouched.
+ */
+export function createMissingLegendGenerator(
+  base: LegendGenerator,
+  fullyMissing: readonly boolean[],
+  getStrings: () => Strings
+): LegendGenerator {
+  return function generateLabels(this: unknown, chart: any) {
+    const items = base.call(this, chart);
+    if (!Array.isArray(items)) return items;
+    return items.map((item) => {
+      const index = item?.datasetIndex;
+      if (typeof index !== 'number' || !fullyMissing[index]) return item;
+      const text = typeof item.text === 'string' ? item.text : String(item.text ?? '');
+      return {
+        ...item,
+        text: formatMCPUIString(getStrings().chartLegendNoData, { series: text }),
+      };
+    });
+  };
+}
+
+// ─── Tooltip ───────────────────────────────────────────────────────────────
+
+/** Whether a Chart.js tooltip item stands for a missing value. */
+export function isMissingTooltipItem(item: any): boolean {
+  if (item === null || item === undefined) return false;
+  if (item.raw === null || item.raw === undefined || isMissingChartValue(item.raw)) return true;
+  const parsed = item.parsed;
+  if (parsed !== null && typeof parsed === 'object') {
+    const chartType = item.chart?.config?.type;
+    const valueKey =
+      chartType === 'radar' ? 'r' : item.chart?.options?.indexAxis === 'y' ? 'x' : 'y';
+    if (valueKey in parsed && parsed[valueKey] === null) return true;
+  }
+  return false;
+}
+
+/**
+ * Tooltip `label` callback: names a missing value (`"{series}: Missing
+ * value"`) and, with a `unit`, appends it to a present one. Otherwise it is
+ * Chart.js's default composition (dataset label, `": "`, formatted value) —
+ * including its `mode: 'dataset'` branch, which prefixes the CATEGORY label
+ * instead, since every item of that tooltip belongs to the same dataset.
+ * Hence a regular function: Chart.js calls it with the tooltip as `this`.
+ *
+ * `unit` is left off scatter and bubble tooltips: their formatted value is the
+ * pair `(x, y)`, to which one unit does not belong.
+ */
+export function createTooltipLabel(
+  getStrings: () => Strings,
+  unit: string | undefined,
+  chartType: string | undefined
+): (this: any, item: any) => string {
+  const applyUnit = unit !== undefined && !POINT_CHART_TYPES.has(chartType ?? '');
+  return function label(this: any, item: any) {
+    const strings = getStrings();
+    const prefixLabel = this?.options?.mode === 'dataset' ? item?.label : item?.dataset?.label;
+    const prefix = typeof prefixLabel === 'string' && prefixLabel !== '' ? `${prefixLabel}: ` : '';
+
+    if (isMissingTooltipItem(item)) return `${prefix}${strings.missingValue}`;
+
+    const formatted = item?.formattedValue;
+    if (formatted === null || formatted === undefined) return prefix;
+    const value = applyUnit
+      ? formatMCPUIString(strings.chartValueWithUnit, { value: formatted, unit: unit as string })
+      : String(formatted);
+    return `${prefix}${value}`;
+  };
+}
+
+// ─── Axis ──────────────────────────────────────────────────────────────────
+
+/**
+ * Sets the chart's `unit` as the title of its value axis, in place on the
+ * `options` object the renderer just built (never on the payload's).
+ *
+ * Only bar, line, scatter and bubble have a value axis to title. The value
+ * axis is `y`, or `x` when the index axis is `y` (a horizontal bar or line).
+ * An existing `scales[axis].title` is the payload's own word and is kept; the
+ * rest of the scale config (a `timeAxis` block sets `scales.x`) is kept too.
+ */
+export function applyUnitAxisTitle(
+  options: any,
+  chartType: string | undefined,
+  unit: string | undefined
+): void {
+  if (unit === undefined) return;
+  if (chartType !== 'bar' && chartType !== 'line' && !POINT_CHART_TYPES.has(chartType ?? '')) {
+    return;
+  }
+  const horizontal = (chartType === 'bar' || chartType === 'line') && options?.indexAxis === 'y';
+  const axis = horizontal ? 'x' : 'y';
+  if (options.scales?.[axis]?.title !== undefined) return;
+  options.scales = {
+    ...options.scales,
+    [axis]: { ...options.scales?.[axis], title: { display: true, text: unit } },
+  };
+}
+
+// ─── Plugin ────────────────────────────────────────────────────────────────
+
+export interface MissingValuesPluginOptions {
+  /** At least one dataset and every one of them has no observed value. */
+  allMissing: boolean;
+  /** Lazy: read at draw time. */
+  getNoDataText: () => string;
+  /** Lazy: `Chart.defaults.font.family`, when the build exposes it. */
+  getFontFamily?: () => string | undefined;
+}
+
+/** A dataset colour for entry `index`, as a string, or `undefined`. */
+function colorAt(color: unknown, index: number): string | undefined {
+  if (typeof color === 'string' && color !== '') return color;
+  if (Array.isArray(color) && color.length > 0) {
+    const picked = color[index % color.length];
+    return typeof picked === 'string' && picked !== '' ? picked : undefined;
+  }
+  return undefined;
+}
+
+/**
+ * Draws a dashed outline stub for every missing bar of every visible,
+ * non-stacked bar dataset, so a missing value is a visible mark, not a bar
+ * that "is" zero.
+ *
+ * The stub sits on the value-axis base, as thick as the bar would have been,
+ * and runs {@link MISSING_BAR_STUB_LENGTH}px toward the middle of the chart
+ * area (up from a bottom baseline, down from a top one, right from a left
+ * one). Clipped to the chart area.
+ */
+export function drawMissingBarStubs(chart: any): void {
+  const ctx = chart?.ctx;
+  const area = chart?.chartArea;
+  const datasets = chart?.data?.datasets;
+  if (!ctx || !area || !Array.isArray(datasets)) return;
+
+  const left = area.left;
+  const top = area.top;
+  const right = area.right ?? left + (area.width ?? 0);
+  const bottom = area.bottom ?? top + (area.height ?? 0);
+
+  let saved = false;
+  datasets.forEach((dataset: any, datasetIndex: number) => {
+    const meta = chart.getDatasetMeta?.(datasetIndex);
+    if (!meta) return;
+    const isBar = meta.type === 'bar' || meta.controller?.constructor?.id === 'bar';
+    if (!isBar) return;
+    // Stacked or overlaid bars: the baseline under a missing segment is the
+    // series below, so an outline there would point at the wrong series.
+    if (meta.vScale?.options?.stacked || meta.iScale?.options?.stacked) return;
+    if (typeof chart.isDatasetVisible === 'function' && !chart.isDatasetVisible(datasetIndex)) {
+      return;
+    }
+    const values: unknown[] = Array.isArray(dataset?.data) ? dataset.data : [];
+    const elements: any[] = Array.isArray(meta.data) ? meta.data : [];
+
+    values.forEach((value, index) => {
+      if (!isMissingChartValue(value)) return;
+      const element = elements[index];
+      if (!element) return;
+      const props = element.getProps?.(['x', 'y', 'base', 'width', 'height'], true) ?? element;
+      const { x, y, base, width, height } = props;
+      if (![x, y, base].every((n) => Number.isFinite(n))) return;
+      const horizontal = element.horizontal === true;
+      const thickness = horizontal ? height : width;
+      if (!Number.isFinite(thickness) || thickness <= 0) return;
+
+      let rect: [number, number, number, number];
+      if (horizontal) {
+        const dir = base < (left + right) / 2 ? 1 : -1;
+        rect = [Math.min(base, base + dir * MISSING_BAR_STUB_LENGTH), y - thickness / 2, MISSING_BAR_STUB_LENGTH, thickness];
+      } else {
+        const dir = base > (top + bottom) / 2 ? -1 : 1;
+        rect = [x - thickness / 2, Math.min(base, base + dir * MISSING_BAR_STUB_LENGTH), thickness, MISSING_BAR_STUB_LENGTH];
+      }
+
+      if (!saved) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(left, top, right - left, bottom - top);
+        ctx.clip();
+        saved = true;
+      }
+      ctx.strokeStyle = colorAt(dataset?.borderColor, index) ?? MISSING_BAR_FALLBACK_COLOR;
+      ctx.lineWidth = 1;
+      ctx.setLineDash(STUB_DASH);
+      ctx.strokeRect(...rect);
+    });
+  });
+  if (saved) {
+    ctx.setLineDash?.([]);
+    ctx.restore();
+  }
+}
+
+/** Draws `text` centred in the chart area (a chart with nothing to plot). */
+export function drawNoDataText(chart: any, text: string, fontFamily?: string): void {
+  const ctx = chart?.ctx;
+  const area = chart?.chartArea;
+  if (!ctx || !area || !text) return;
+  const cx = (area.left + (area.right ?? area.left + (area.width ?? 0))) / 2;
+  const cy = (area.top + (area.bottom ?? area.top + (area.height ?? 0))) / 2;
+  ctx.save();
+  ctx.font = `12px ${fontFamily || 'sans-serif'}`;
+  ctx.fillStyle = NO_DATA_TEXT_COLOR;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(text, cx, cy);
+  ctx.restore();
+}
+
+/**
+ * The per-chart plugin object. Passed as `config.plugins = [plugin]`: Chart.js
+ * scopes it to that one chart. Both hooks swallow their own errors — a
+ * decoration must never take the chart down.
+ */
+export function createMissingValuesPlugin(options: MissingValuesPluginOptions) {
+  return {
+    id: 'mcpuiMissingValues',
+    afterDatasetsDraw(chart: any) {
+      try {
+        drawMissingBarStubs(chart);
+        if (options.allMissing) {
+          drawNoDataText(chart, options.getNoDataText(), options.getFontFamily?.());
+        }
+      } catch {
+        // Cosmetic layer: never break the chart.
+      }
+    },
+  };
+}

package/src/context/MCPUIConfigContext.tsx

@@ -43,24 +43,34 @@ import type { IframePolicy } from '../types'
  * Host-level rendering policy. Every field has a default — a provider passes
  * a partial override.
  *
- * ## Why every field is optional
- *
- * This interface grows a key every time the library gains a policy switch,
- * and those releases are MINOR. Were the fields required, adding one would
- * break the build of any consumer holding a COMPLETE `MCPUIConfig` value —
- * a typed constant, a helper that returns one, or a direct
- * `<MCPUIConfigContext.Provider value={…}>` — because their object would
- * suddenly miss a key. Nothing about their behaviour changed; only `tsc`
- * would fail. Optional fields make each new key additive.
- *
- * The completeness guarantee moves from the type to the two values that
- * actually need it, exactly as `MCPUIStrings` does it:
- * `DEFAULT_MCPUI_CONFIG` is `Required<MCPUIConfig>`, so forgetting a default
- * is a compile error HERE, and {@link useMCPUIConfig} returns
- * `Required<MCPUIConfig>`, so every renderer still reads a fully resolved
- * value and never has to null-check a policy.
+ * ## Two names, because there are two jobs
+ *
+ * This type grows a key every time the library gains a policy switch, and
+ * those releases are MINOR — so neither AUTHORING a config nor READING one
+ * may break when a key appears. Those two demands pull in opposite
+ * directions, and one name cannot serve both:
+ *
+ * - an author must be allowed to omit the new key, so the fields they write
+ *   have to be OPTIONAL;
+ * - a reader assigning `const p: IframePolicy = config.iframePolicy` must not
+ *   suddenly face `undefined`, so the fields they read have to be REQUIRED.
+ *
+ * Hence {@link MCPUIConfigInput} (what a host writes — every field optional)
+ * and {@link MCPUIConfig} (what the library hands back — every field
+ * resolved). `MCPUIConfig` is derived from the input type, so the two can
+ * never drift and a key is declared exactly once.
+ *
+ * Which one you name depends on the surface:
+ *
+ * - `<MCPUIConfigProvider config={…}>` takes `MCPUIConfigInput` — name that
+ *   type for a partial you build, and it merges the rest;
+ * - `<MCPUIConfigContext.Provider value={…}>` takes the RESOLVED
+ *   `MCPUIConfig`, because that context is read as well as written, so a
+ *   direct provider hands over `{ ...DEFAULT_MCPUI_CONFIG, ...mine }`;
+ * - anything you RECEIVE is `MCPUIConfig`, which is what
+ *   {@link useMCPUIConfig} returns.
  */
-export interface MCPUIConfig {
+export interface MCPUIConfigInput {
   /**
    * When the library puts the boolean `credentialless` attribute on an
    * `<iframe>` it renders.
@@ -87,14 +97,14 @@ export interface MCPUIConfig {
    *
    * This only RECLASSIFIES a host the allow-list already accepts. To render an
    * iframe whose host is outside `DEFAULT_IFRAME_DOMAINS`, add it to
-   * {@link MCPUIConfig.customIframeDomains} with `iframePolicy: 'extend'`.
+   * {@link MCPUIConfigInput.customIframeDomains} with `iframePolicy: 'extend'`.
    */
   customTrustedIframeDomains?: string[]
 
   /**
    * How `UIResourceRenderer` validates an `iframe` component's host:
    * `'strict'` (default) accepts `DEFAULT_IFRAME_DOMAINS` only, `'extend'`
-   * also accepts {@link MCPUIConfig.customIframeDomains}.
+   * also accepts {@link MCPUIConfigInput.customIframeDomains}.
    */
   iframePolicy?: IframePolicy
 
@@ -141,17 +151,27 @@ export interface MCPUIConfig {
   chartZoom?: 'expanded' | 'always' | 'never'
 }
 
+/**
+ * The resolved host policy: every key present. This is what the library hands
+ * back, so a reader never null-checks a policy.
+ *
+ * Extends `Required<`{@link MCPUIConfigInput}`>` rather than declaring the
+ * fields again, so a key exists in exactly one place and the two views cannot
+ * drift. It remains an interface so existing consumers can extend or augment
+ * the public contract as they could before 6.22.0.
+ */
+export interface MCPUIConfig extends Required<MCPUIConfigInput> {}
+
 /**
  * Defaults. Chosen so a host that sends no COEP header sees no change from
  * 6.20.0 apart from the fallback link, which `'auto'` keeps hidden there —
  * and, since 6.22.0, so no inline component ever captures the wheel
  * (`chartZoom: 'expanded'`).
  *
- * Typed `Required<MCPUIConfig>`: the interface's fields are optional so that
- * adding one stays backward compatible, and this annotation is what keeps a
- * new key from shipping without a default.
+ * Typed `MCPUIConfig` (i.e. resolved): that annotation is what stops a new
+ * key from shipping without a default.
  */
-export const DEFAULT_MCPUI_CONFIG: Required<MCPUIConfig> = {
+export const DEFAULT_MCPUI_CONFIG: MCPUIConfig = {
   iframeCredentialless: 'auto',
   customTrustedIframeDomains: [],
   iframePolicy: 'strict',
@@ -161,10 +181,19 @@ export const DEFAULT_MCPUI_CONFIG: Required<MCPUIConfig> = {
 }
 
 /**
- * Deliberately typed with the PARTIAL `MCPUIConfig`, not `Required<…>`: a
- * host that bypasses `MCPUIConfigProvider` and feeds this provider directly
- * may pass whichever keys it cares about, and `useMCPUIConfig` fills the
- * rest. Widening it this way only ever accepts more than before.
+ * Typed with the RESOLVED view, because this context is read as well as
+ * written: it is exported, so a consumer may call
+ * `useContext(MCPUIConfigContext)` directly, and typing it as the input view
+ * would hand them `IframePolicy | undefined` — exactly the regression this
+ * whole split exists to undo.
+ *
+ * The cost lands on the rarer side: a host feeding this context directly
+ * passes a COMPLETE value, `{ ...DEFAULT_MCPUI_CONFIG, ...mine }`. Anyone who
+ * wants to pass only the keys they care about uses `MCPUIConfigProvider`,
+ * whose `config` prop takes `Partial<`{@link MCPUIConfig}`>` and does that
+ * merge. That preserves optional properties added through declaration
+ * merging; {@link MCPUIConfigInput} remains the unaugmented built-in input
+ * shape a host can name for ordinary authored configs.
  */
 export const MCPUIConfigContext = createContext<MCPUIConfig>(DEFAULT_MCPUI_CONFIG)
 
@@ -173,7 +202,7 @@ export const MCPUIConfigContext = createContext<MCPUIConfig>(DEFAULT_MCPUI_CONFI
  * came from the provider or from `DEFAULT_MCPUI_CONFIG`. Returns the defaults
  * outright when no `<MCPUIConfigProvider>` is mounted above.
  */
-export function useMCPUIConfig(): Required<MCPUIConfig> {
+export function useMCPUIConfig(): MCPUIConfig {
   return mergeProps(DEFAULT_MCPUI_CONFIG, useContext(MCPUIConfigContext))
 }
 

package/src/context/MCPUIMathContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, type Accessor, type JSX } from 'solid-js'
+
+export interface MathRenderOptions {
+  displayMode: boolean
+}
+
+/** A synchronous, host-supplied renderer. Returned markup is always sanitized by MCP-UI. */
+export type MathRenderer = (tex: string, options: MathRenderOptions) => string | null
+
+const MCPUIMathContext = createContext<Accessor<MathRenderer | undefined>>(() => undefined)
+
+export interface MCPUIMathProviderProps {
+  /** Omit or pass null to explicitly disable an inherited renderer. */
+  renderMath?: MathRenderer | null
+  children: JSX.Element
+}
+
+export function MCPUIMathProvider(props: MCPUIMathProviderProps): JSX.Element {
+  return (
+    <MCPUIMathContext.Provider value={() => props.renderMath ?? undefined}>
+      {props.children}
+    </MCPUIMathContext.Provider>
+  )
+}
+
+/**
+ * Returns a reactive accessor for the nearest math renderer. Call the accessor
+ * at use time; its value changes when a provider swaps or disables its renderer.
+ */
+export function useMCPUIMath(): Accessor<MathRenderer | undefined> {
+  return useContext(MCPUIMathContext)
+}

package/src/context/MCPUIStringsContext.tsx

@@ -823,6 +823,70 @@ export interface MCPUIStrings {
   sizeKilobytes?: string
   /** ArtifactRenderer file size in megabytes. Template — `{size}`. */
   sizeMegabytes?: string
+
+  // ── Missing values (tables, chart data views, charts) ──────
+  /**
+   * Accessible name of a value that is explicitly missing: read by screen
+   * readers in place of the `-` a table cell shows, and the tooltip value of
+   * a bar whose value is `null`.
+   * @since 6.24.0
+   */
+  missingValue?: string
+  /**
+   * Legend under a table or data view that contains at least one missing
+   * value. Template — `{marker}` = the glyph the cells show (`-`).
+   * @since 6.24.0
+   */
+  missingValueLegend?: string
+  /**
+   * Note under a line or radar chart with a missing value: the line is broken
+   * there rather than drawn through, or down to zero.
+   * @since 6.24.0
+   */
+  chartMissingGaps?: string
+  /**
+   * Note under a bar chart with a missing value, which the chart draws as a
+   * dashed outline at the baseline so it cannot be read as a zero bar.
+   * @since 6.24.0
+   */
+  chartMissingBars?: string
+  /**
+   * Note under a chart that draws nothing for a missing value — a scatter or
+   * bubble chart, or a stacked bar chart (whose baseline belongs to the series
+   * below, so no outline can stand in for the bar).
+   * @since 6.24.0
+   */
+  chartMissingPoints?: string
+  /**
+   * Note naming the series whose values are ALL missing.
+   * Template — `{series}` = the series names, joined as a list in the locale.
+   * @since 6.24.0
+   */
+  chartSeriesNoData?: string
+  /**
+   * Legend entry of a series whose values are all missing.
+   * Template — `{series}` = the series name.
+   * @since 6.24.0
+   */
+  chartLegendNoData?: string
+  /**
+   * A value followed by the chart's `unit`, in tooltips.
+   * Template — `{value}` (already formatted), `{unit}`.
+   * @since 6.24.0
+   */
+  chartValueWithUnit?: string
+  /**
+   * A column header followed by the chart's `unit`, in the chart data view
+   * and the degraded tables. Template — `{label}`, `{unit}`.
+   * @since 6.24.0
+   */
+  chartLabelWithUnit?: string
+  /**
+   * Shown instead of a pie, doughnut or polar-area chart that received a
+   * missing value: those types would draw it as a zero share.
+   * @since 6.24.0
+   */
+  chartMissingUnsupported?: string
 }
 
 /**
@@ -1125,6 +1189,18 @@ export const DEFAULT_MCPUI_STRINGS: Required<MCPUIStrings> = {
   zoomOut: 'Zoom out',
   zoomReset: 'Reset zoom',
   zoomLevel: 'Zoom {percent}%',
+
+  // ── 6.24.0 — missing values ────────────────────────────────
+  missingValue: 'Missing value',
+  missingValueLegend: '“{marker}” marks a missing value.',
+  chartMissingGaps: 'Breaks in a line mark missing values.',
+  chartMissingBars: 'Dashed outlines mark missing values.',
+  chartMissingPoints: 'Missing values are not plotted.',
+  chartSeriesNoData: 'No data for {series}.',
+  chartLegendNoData: '{series} (no data)',
+  chartValueWithUnit: '{value} {unit}',
+  chartLabelWithUnit: '{label} ({unit})',
+  chartMissingUnsupported: 'This chart type cannot show missing values.',
 }
 
 /**

package/src/index.ts

@@ -167,6 +167,7 @@ export {
 } from './context/MCPUIConfigContext'
 export type {
   MCPUIConfig,
+  MCPUIConfigInput,
   MCPUIConfigProviderProps,
 } from './context/MCPUIConfigContext'
 
@@ -389,6 +390,9 @@ export {
   DEGRADED_PROJECTION_LABELS,
 } from './utils/degraded-projections'
 export type { DegradedProjectionLabels } from './utils/degraded-projections'
+export { MCPUIMathProvider } from './context/MCPUIMathContext'
+export type { MathRenderer, MathRenderOptions, MCPUIMathProviderProps } from './context/MCPUIMathContext'
+
 export { chartToDataTable, CHART_DATA_TABLE_LABELS } from './components/chart-data-table'
 export type { ChartDataTableLabels } from './components/chart-data-table'
 

package/src/plugins/katex.ts

@@ -0,0 +1,25 @@
+import katex from 'katex'
+import type { MathRenderer } from '../context/MCPUIMathContext'
+
+/**
+ * Optional KaTeX adapter. It emits MathML only: no HTML layout tree, inline
+ * styles, fonts, stylesheet, shared macro state, or trusted TeX commands.
+ */
+export const renderKatexMath: MathRenderer = (tex, { displayMode }) => {
+  try {
+    return katex.renderToString(tex, {
+      displayMode,
+      output: 'mathml',
+      // Invalid TeX must return null so the core can preserve the complete
+      // source token, including its delimiters, instead of showing KaTeX's
+      // red error MathML and silently consuming the dollars.
+      throwOnError: true,
+      trust: false,
+      maxExpand: 1000,
+      maxSize: 20,
+      macros: {},
+    })
+  } catch {
+    return null
+  }
+}

package/src/services/component-registry.ts

@@ -50,14 +50,15 @@ export const QuickchartRegistry: ComponentRegistryEntry = {
                 data: {
                   // Empty arrays match both branches; mirror Zod's inclusive union.
                   anyOf: [
-                    { type: 'array', items: { type: 'number' } },
+                    // `null` is an explicit MISSING value (v6.24.0): never a zero.
+                    { type: 'array', items: { type: ['number', 'null'] } },
                     {
                       type: 'array',
                       items: {
                         type: 'object',
                         properties: {
                           x: { oneOf: [{ type: 'string' }, { type: 'number' }] },
-                          y: { type: 'number' },
+                          y: { type: ['number', 'null'] },
                           r: { type: 'number', minimum: 0 },
                         },
                         required: ['x', 'y'],
@@ -110,6 +111,13 @@ export const QuickchartRegistry: ComponentRegistryEntry = {
           max: { type: 'string' },
         },
       },
+      unit: {
+        type: 'string',
+        minLength: 1,
+        maxLength: 32,
+        description:
+          'Unit of the values (e.g. "°C", "%"): shown on the value axis, in tooltips and in the data view',
+      },
       height: { type: 'string', description: 'Chart container height as a CSS value' },
       className: { type: 'string' },
     },