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

package/src/components/DegradedFallback.tsx

@@ -17,6 +17,7 @@
 
 import { Component, For, Show } from 'solid-js';
 import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
+import { MissingValueLegend, MissingValueMark } from './MissingValue';
 
 export interface DegradedFallbackProps {
   /** Short, human-readable reason the native render was skipped/failed. */
@@ -35,6 +36,13 @@ export interface DegradedFallbackProps {
   caption?: string;
   /** Max rows to render before truncating (default 50). */
   maxRows?: number;
+  /**
+   * Same shape as `rows`: `true` marks a cell whose value is missing, which
+   * renders as `<MissingValueMark/>` instead of its text. A
+   * `<MissingValueLegend/>` follows the table when a SHOWN cell is missing.
+   * Omitted, the output is unchanged. @since v6.24.0
+   */
+  missing?: boolean[][];
 }
 
 export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
@@ -43,6 +51,15 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
   const allRows = () => props.rows ?? [];
   const shownRows = () => allRows().slice(0, maxRows());
   const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);
+  const isMissing = (rowIndex: number, colIndex: number) =>
+    props.missing?.[rowIndex]?.[colIndex] === true;
+  const anyShownMissing = () => {
+    const columnCount = props.columns?.length ?? 0;
+    return shownRows().some((_row, r) => {
+      for (let c = 0; c < columnCount; c += 1) if (isMissing(r, c)) return true;
+      return false;
+    });
+  };
   const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;
 
   return (
@@ -69,12 +86,14 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
             </thead>
             <tbody>
               <For each={shownRows()}>
-                {(row) => (
+                {(row, rowIndex) => (
                   <tr class="border-t border-amber-100 dark:border-amber-800/60">
                     <For each={props.columns}>
                       {(_col, i) => (
                         <td class="px-2 py-1 text-amber-800 dark:text-amber-200">
-                          {String(row[i()] ?? '')}
+                          <Show when={isMissing(rowIndex(), i())} fallback={String(row[i()] ?? '')}>
+                            <MissingValueMark />
+                          </Show>
                         </td>
                       )}
                     </For>
@@ -84,6 +103,9 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
             </tbody>
           </table>
         </div>
+        <Show when={anyShownMissing()}>
+          <MissingValueLegend class="mt-2" />
+        </Show>
         <Show when={hiddenCount() > 0}>
           <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
             {formatMCPUIString(strings.degradedMoreRows, { count: hiddenCount() })}

package/src/components/MissingValue.tsx

@@ -0,0 +1,61 @@
+/**
+ * The visible and accessible marks of a missing value (v6.24.0).
+ *
+ * A table cell with no value has always shown `-`. On its own that glyph says
+ * nothing to a screen reader (it is read as "dash", or skipped) and it is easy
+ * to take for a zero or a minus sign. These two components give it a meaning:
+ *
+ * - {@link MissingValueMark} — the cell content: the `-` hidden from
+ *   assistive technology, followed by `strings.missingValue` hidden from
+ *   sight. Visually-hidden through an inline style rather than Tailwind's
+ *   `sr-only`, so the text cannot leak on a host whose Tailwind build does
+ *   not scan this package.
+ * - {@link MissingValueLegend} — one line under a table or data view that
+ *   contains a missing value, so the convention never has to be guessed.
+ *
+ * Both are SSR-safe: no browser API, and the same markup on server and client.
+ */
+
+import type { Component, JSX } from 'solid-js'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
+import { MISSING_VALUE_MARKER } from '../utils/missing-value'
+
+/** The classic visually-hidden recipe: in the accessibility tree, out of sight. */
+export const VISUALLY_HIDDEN_STYLE: JSX.CSSProperties = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  'white-space': 'nowrap',
+  border: '0',
+}
+
+/** Content of a cell whose value is missing. */
+export const MissingValueMark: Component = () => {
+  const strings = useMCPUIStrings()
+  return (
+    <span data-mcp-missing-value="">
+      <span aria-hidden="true" class="text-gray-400 dark:text-gray-500">
+        {MISSING_VALUE_MARKER}
+      </span>
+      <span style={VISUALLY_HIDDEN_STYLE}>{strings.missingValue}</span>
+    </span>
+  )
+}
+
+/** The legend line explaining the missing-value glyph. */
+export const MissingValueLegend: Component<{ class?: string }> = (props) => {
+  const strings = useMCPUIStrings()
+  return (
+    <p
+      data-mcp-missing-legend=""
+      role="note"
+      class={`text-xs text-gray-500 dark:text-gray-400 ${props.class ?? ''}`}
+    >
+      {formatMCPUIString(strings.missingValueLegend, { marker: MISSING_VALUE_MARKER })}
+    </p>
+  )
+}

package/src/components/UIResourceRenderer.tsx

@@ -28,6 +28,8 @@ import {
   useMCPUIStrings,
 } from '../context/MCPUIStringsContext'
 import { useMCPUIConfig } from '../context/MCPUIConfigContext'
+import { isMissingCellValue, stripUndefinedDebris } from '../utils/missing-value'
+import { MissingValueLegend, MissingValueMark } from './MissingValue'
 import { shouldSetCredentialless } from '../utils/iframe-coep'
 import { IframeFallbackLink } from './IframeFallbackLink'
 
@@ -347,6 +349,7 @@ function ChartRenderer(props: {
                 caption={strings.chartQuickchartCaption}
                 {...chartToDegradedTable(params() ?? {}, {
                   series: strings.degradedSeries,
+                  withUnit: strings.chartLabelWithUnit,
                 })}
               />
             </div>
@@ -639,9 +642,10 @@ export function renderCellValue(value: any, citationCtx?: CitationCtx, mathRende
 
   // Clean up "undefined" patterns from backend data
   // Pattern 1: "Text – undefined" or "Text - undefined" → "Text"
-  strValue = strValue.replace(/\s*[–-]\s*undefined\s*$/gi, '')
   // Pattern 2: "undefined – Text" or "undefined - Text" → "Text"
-  strValue = strValue.replace(/^undefined\s*[–-]\s*/gi, '')
+  // (shared with `isMissingCellValue`, so the cells shown as `-` and the cells
+  // the table marks and explains as missing can never drift apart)
+  strValue = stripUndefinedDebris(strValue)
   // Pattern 3: standalone "undefined" → "-"
   if (strValue.trim().toLowerCase() === 'undefined') {
     return '-'
@@ -766,12 +770,18 @@ function TableRenderer(props: {
     const dir = sortDir()
     if (!key || !dir) return r
     const col = columns().find((c: any) => c.key === key)
-    const isNum = col?.type === 'number' || (r.length > 0 && typeof r[0]?.[key] === 'number')
+    // v6.24.0 — numeric mode is decided from the first NON-missing value, so a
+    // missing first row no longer flips a numeric column to string order.
+    const firstObserved = r.find((row: any) => !isMissingCellValue(row?.[key]))?.[key]
+    const isNum = col?.type === 'number' || typeof firstObserved === 'number'
     return [...r].sort((a: any, b: any) => {
       const va = a[key], vb = b[key]
-      if (va == null && vb == null) return 0
-      if (va == null) return 1
-      if (vb == null) return -1
+      // Missing values (null, undefined, '', 'undefined', '-') sort last in
+      // both directions — never as 0 and never first.
+      const missA = isMissingCellValue(va), missB = isMissingCellValue(vb)
+      if (missA && missB) return 0
+      if (missA) return 1
+      if (missB) return -1
       let cmp: number
       if (isNum) {
         cmp = (Number(va) || 0) - (Number(vb) || 0)
@@ -820,7 +830,7 @@ function TableRenderer(props: {
     return sortedRows().filter((row: any) =>
       cols.some((col: any) => {
         const val = row[col.key]
-        if (val == null) return false
+        if (isMissingCellValue(val)) return false
         return normalize(String(val)).includes(q)
       })
     )
@@ -1015,6 +1025,14 @@ function TableRenderer(props: {
 
   const tableId = `table-${Math.random().toString(36).slice(2, 9)}`
 
+  // v6.24.0 — whether ANY declared cell of ANY row is missing. Deliberately
+  // computed on all rows (not the current page / filter) so the legend does not
+  // flicker while paging, sorting or searching.
+  const hasMissingCells = createMemo(() => {
+    const cols = columns()
+    return allRows().some((row: any) => cols.some((col: any) => isMissingCellValue(row?.[col.key])))
+  })
+
   // Standard table body (non-virtualized) — uses client pagination when active
   const StandardTableBody = () => (
     <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
@@ -1024,7 +1042,12 @@ function TableRenderer(props: {
             <For each={tableParams.columns}>
               {(column: any) => (
                 <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-200 whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">
-                  <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())} />
+                  <Show
+                    when={!isMissingCellValue(row[column.key])}
+                    fallback={<MissingValueMark />}
+                  >
+                    <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())} />
+                  </Show>
                 </td>
               )}
             </For>
@@ -1063,7 +1086,12 @@ function TableRenderer(props: {
                 <For each={tableParams.columns}>
                   {(column: any) => (
                     <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-200 whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">
-                      <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())} />
+                      <Show
+                        when={!isMissingCellValue(row[column.key])}
+                        fallback={<MissingValueMark />}
+                      >
+                        <SafeHtml html={() => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())} />
+                      </Show>
                     </td>
                   )}
                 </For>
@@ -1222,6 +1250,11 @@ function TableRenderer(props: {
             </table>
           </div>
 
+          {/* Missing-value legend (v6.24.0) — outside the scroll region, before pagination */}
+          <Show when={hasMissingCells()}>
+            <MissingValueLegend class="mt-2 px-1" />
+          </Show>
+
           {/* Server-side pagination (legacy) */}
           <Show when={tableParams.pagination}>
             <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">

package/src/components/chart-data-table.ts

@@ -1,4 +1,5 @@
 import { formatMCPUIString } from '../utils/format-string';
+import { isMissingChartValue } from '../utils/missing-value';
 
 /**
  * Column headers and series names of the accessible chart data table.
@@ -26,10 +27,17 @@ export interface ChartDataTableLabels {
   x: string;
   y: string;
   r: string;
+  /**
+   * A value column header followed by the chart's `unit`. Template — `{label}`,
+   * `{unit}`. Only applied when the chart has a unit. Optional so that a
+   * complete labels table written for 6.20.0–6.23.0 still type-checks.
+   * @since v6.24.0
+   */
+  withUnit?: string;
 }
 
 /** English defaults for {@link ChartDataTableLabels}. */
-export const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {
+export const CHART_DATA_TABLE_LABELS: Required<ChartDataTableLabels> = {
   series: 'Series',
   point: 'Point',
   label: 'Label',
@@ -37,11 +45,20 @@ export const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {
   x: 'x',
   y: 'y',
   r: 'r',
+  withUnit: '{label} ({unit})',
 };
 
 export interface ChartDataTable {
   columns: string[];
   rows: Array<Array<string | number>>;
+  /**
+   * Same shape as `rows`: `true` for a VALUE cell whose source entry is
+   * missing (`null` / non-finite, or a point whose `y` is). A slot past the
+   * end of a shorter or empty dataset has no entry and is not flagged. Label,
+   * series, point-index, `x` and `r` cells are never missing. `rows` itself
+   * still holds `''` there. @since v6.24.0
+   */
+  missing: boolean[][];
 }
 
 interface ChartDatasetLike {
@@ -51,6 +68,8 @@ interface ChartDatasetLike {
 
 export interface ChartDataLike {
   type?: string;
+  /** Unit of the values: appended to the value column headers. @since v6.24.0 */
+  unit?: string;
   data?: {
     labels?: Array<string | number>;
     datasets?: ChartDatasetLike[];
@@ -87,6 +106,10 @@ export function chartToDataTable(
   labels?: Partial<ChartDataTableLabels>
 ): ChartDataTable {
   const l: ChartDataTableLabels = { ...CHART_DATA_TABLE_LABELS, ...labels };
+  const unit = typeof params.unit === 'string' && params.unit !== '' ? params.unit : undefined;
+  const unitTemplate = l.withUnit ?? CHART_DATA_TABLE_LABELS.withUnit;
+  const withUnit = (label: string) =>
+    unit === undefined ? label : formatMCPUIString(unitTemplate, { label, unit });
   const datasets = params.data?.datasets ?? [];
   const dataLabels = params.data?.labels ?? [];
   const pointData =
@@ -104,10 +127,11 @@ export function chartToDataTable(
       l.point,
       ...(hasLabels ? [l.label] : []),
       l.x,
-      l.y,
+      withUnit(l.y),
       ...(hasRadius ? [l.r] : []),
     ];
     const rows: Array<Array<string | number>> = [];
+    const missing: boolean[][] = [];
 
     datasets.forEach((dataset, datasetIndex) => {
       const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });
@@ -121,10 +145,20 @@ export function chartToDataTable(
           tableCell(point.y),
           ...(hasRadius ? [tableCell(point.r)] : []),
         ]);
+        // Only the y cell can be missing; a bare entry is its own y.
+        const yMissing = isMissingChartValue(isPoint(value) ? point.y : value);
+        missing.push([
+          false,
+          false,
+          ...(hasLabels ? [false] : []),
+          false,
+          yMissing,
+          ...(hasRadius ? [false] : []),
+        ]);
       });
     });
 
-    return { columns, rows };
+    return { columns, rows, missing };
   }
 
   const rowCount = Math.max(
@@ -134,18 +168,28 @@ export function chartToDataTable(
   );
   const columns = [
     l.label,
-    ...datasets.map(
-      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })
+    ...datasets.map((dataset, index) =>
+      withUnit(dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 }))
     ),
   ];
   const rows: Array<Array<string | number>> = [];
+  const missing: boolean[][] = [];
 
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
     rows.push([
       tableCell(dataLabels[rowIndex] ?? rowIndex + 1),
       ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),
     ]);
+    // Only an ENTRY can be missing: a slot past the end of a shorter (or
+    // empty) dataset has no entry, and renders as before (an empty cell).
+    missing.push([
+      false,
+      ...datasets.map(
+        (dataset) =>
+          rowIndex < (dataset.data?.length ?? 0) && isMissingChartValue(dataset.data?.[rowIndex])
+      ),
+    ]);
   }
 
-  return { columns, rows };
+  return { columns, rows, missing };
 }