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

package/src/styles/autocomplete.css

@@ -37,7 +37,7 @@
 }
 
 .mcp-ghost-text {
-  color: #9ca3af;
+  color: var(--mcp-ui-fg-subtle, #9ca3af);
   opacity: 0.7;
 }
 
@@ -47,11 +47,11 @@
   top: 50%;
   transform: translateY(-50%);
   font-size: 0.75rem;
-  color: #6b7280;
-  background-color: rgba(255, 255, 255, 0.95);
+  color: var(--mcp-ui-fg-muted, #6b7280);
+  background-color: var(--mcp-ui-surface, rgba(255, 255, 255, 0.95));
   padding: 2px 8px;
   border-radius: 4px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--mcp-ui-border, #e5e7eb);
   pointer-events: none;
   animation: mcp-hint-fade-in 150ms ease;
 }
@@ -86,10 +86,10 @@
   left: 0;
   right: 0;
   z-index: 50;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
+  background-color: var(--mcp-ui-surface, #ffffff);
+  border: 1px solid var(--mcp-ui-border, #e5e7eb);
   border-radius: 6px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--mcp-ui-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
   overflow: hidden;
   animation: mcp-dropdown-enter 150ms ease;
 }
@@ -120,11 +120,11 @@
 }
 
 .mcp-autocomplete-option:hover {
-  background-color: #f3f4f6;
+  background-color: var(--mcp-ui-surface-hover, #f3f4f6);
 }
 
 .mcp-autocomplete-option-selected {
-  background-color: #eff6ff !important;
+  background-color: var(--mcp-ui-accent-soft, #eff6ff) !important;
 }
 
 .mcp-autocomplete-option-disabled {
@@ -159,7 +159,7 @@
 .mcp-autocomplete-option-label {
   display: block;
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--mcp-ui-fg, #374151);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -168,7 +168,7 @@
 .mcp-autocomplete-option-description {
   display: block;
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--mcp-ui-fg-muted, #6b7280);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -177,14 +177,14 @@
 
 .mcp-autocomplete-highlight {
   font-weight: 600;
-  color: #1d4ed8;
+  color: var(--mcp-ui-accent, #1d4ed8);
 }
 
 .mcp-autocomplete-loading,
 .mcp-autocomplete-empty {
   padding: 12px 16px;
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--mcp-ui-fg-muted, #6b7280);
 }
 
 .mcp-autocomplete-loading {
@@ -199,10 +199,10 @@
 
 .mcp-autocomplete-footer {
   padding: 6px 12px;
-  border-top: 1px solid #e5e7eb;
-  background-color: #f9fafb;
+  border-top: 1px solid var(--mcp-ui-border, #e5e7eb);
+  background-color: var(--mcp-ui-surface-muted, #f9fafb);
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--mcp-ui-fg-muted, #6b7280);
 }
 
 /* =============================================================================
@@ -211,107 +211,107 @@
 
 @media (prefers-color-scheme: dark) {
   .mcp-ghost-text {
-    color: #6b7280;
+    color: var(--mcp-ui-fg-muted, #6b7280);
   }
 
   .mcp-ghost-text-hint {
-    background-color: rgba(31, 41, 55, 0.95);
-    border-color: #374151;
-    color: #9ca3af;
+    background-color: var(--mcp-ui-surface, rgba(31, 41, 55, 0.95));
+    border-color: var(--mcp-ui-border, #374151);
+    color: var(--mcp-ui-fg-subtle, #9ca3af);
   }
 
   .mcp-autocomplete-dropdown {
-    background-color: #1f2937;
-    border-color: #374151;
+    background-color: var(--mcp-ui-surface, #1f2937);
+    border-color: var(--mcp-ui-border, #374151);
   }
 
   .mcp-autocomplete-option:hover {
-    background-color: #374151;
+    background-color: var(--mcp-ui-surface-hover, #374151);
   }
 
   .mcp-autocomplete-option-selected {
-    background-color: #1e3a5f !important;
+    background-color: var(--mcp-ui-accent-soft, #1e3a5f) !important;
   }
 
   .mcp-autocomplete-option-label {
-    color: #e5e7eb;
+    color: var(--mcp-ui-fg, #e5e7eb);
   }
 
   .mcp-autocomplete-option-description {
-    color: #9ca3af;
+    color: var(--mcp-ui-fg-subtle, #9ca3af);
   }
 
   .mcp-autocomplete-highlight {
-    color: #60a5fa;
+    color: var(--mcp-ui-accent, #60a5fa);
   }
 
   .mcp-autocomplete-loading,
   .mcp-autocomplete-empty {
-    color: #9ca3af;
+    color: var(--mcp-ui-fg-subtle, #9ca3af);
   }
 
   .mcp-autocomplete-footer {
-    background-color: #111827;
-    border-color: #374151;
-    color: #9ca3af;
+    background-color: var(--mcp-ui-surface-muted, #111827);
+    border-color: var(--mcp-ui-border, #374151);
+    color: var(--mcp-ui-fg-subtle, #9ca3af);
   }
 
   .mcp-autocomplete-footer kbd {
-    background-color: #374151;
-    color: #d1d5db;
+    background-color: var(--mcp-ui-surface-hover, #374151);
+    color: var(--mcp-ui-fg, #d1d5db);
   }
 }
 
 /* Explicit dark mode class support */
 .dark .mcp-ghost-text {
-  color: #6b7280;
+  color: var(--mcp-ui-fg-muted, #6b7280);
 }
 
 .dark .mcp-ghost-text-hint {
-  background-color: rgba(31, 41, 55, 0.95);
-  border-color: #374151;
-  color: #9ca3af;
+  background-color: var(--mcp-ui-surface, rgba(31, 41, 55, 0.95));
+  border-color: var(--mcp-ui-border, #374151);
+  color: var(--mcp-ui-fg-subtle, #9ca3af);
 }
 
 .dark .mcp-autocomplete-dropdown {
-  background-color: #1f2937;
-  border-color: #374151;
+  background-color: var(--mcp-ui-surface, #1f2937);
+  border-color: var(--mcp-ui-border, #374151);
 }
 
 .dark .mcp-autocomplete-option:hover {
-  background-color: #374151;
+  background-color: var(--mcp-ui-surface-hover, #374151);
 }
 
 .dark .mcp-autocomplete-option-selected {
-  background-color: #1e3a5f !important;
+  background-color: var(--mcp-ui-accent-soft, #1e3a5f) !important;
 }
 
 .dark .mcp-autocomplete-option-label {
-  color: #e5e7eb;
+  color: var(--mcp-ui-fg, #e5e7eb);
 }
 
 .dark .mcp-autocomplete-option-description {
-  color: #9ca3af;
+  color: var(--mcp-ui-fg-subtle, #9ca3af);
 }
 
 .dark .mcp-autocomplete-highlight {
-  color: #60a5fa;
+  color: var(--mcp-ui-accent, #60a5fa);
 }
 
 .dark .mcp-autocomplete-loading,
 .dark .mcp-autocomplete-empty {
-  color: #9ca3af;
+  color: var(--mcp-ui-fg-subtle, #9ca3af);
 }
 
 .dark .mcp-autocomplete-footer {
-  background-color: #111827;
-  border-color: #374151;
-  color: #9ca3af;
+  background-color: var(--mcp-ui-surface-muted, #111827);
+  border-color: var(--mcp-ui-border, #374151);
+  color: var(--mcp-ui-fg-subtle, #9ca3af);
 }
 
 .dark .mcp-autocomplete-footer kbd {
-  background-color: #374151;
-  color: #d1d5db;
+  background-color: var(--mcp-ui-surface-hover, #374151);
+  color: var(--mcp-ui-fg, #d1d5db);
 }
 
 /* =============================================================================
@@ -327,12 +327,12 @@
 }
 
 .mcp-autocomplete-options::-webkit-scrollbar-thumb {
-  background-color: #d1d5db;
+  background-color: var(--mcp-ui-surface-hover, #d1d5db);
   border-radius: 3px;
 }
 
 .dark .mcp-autocomplete-options::-webkit-scrollbar-thumb {
-  background-color: #4b5563;
+  background-color: var(--mcp-ui-surface-hover, #4b5563);
 }
 
 /* =============================================================================
@@ -341,7 +341,7 @@
 
 /* Focus styles */
 .mcp-autocomplete-option:focus {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--mcp-ui-focus, #3b82f6);
   outline-offset: -2px;
 }
 

package/src/types/index.ts

@@ -81,7 +81,13 @@ export interface ChartComponentParams {
     labels: string[]
     datasets: Array<{
       label: string
-      data: number[] | Array<{ x: string | number; y: number; r?: number }>
+      /**
+       * `null` is an explicit missing value (v6.24.0): its label keeps its
+       * slot, a line breaks there, a bar shows a dashed outline — never a
+       * zero. Pie, doughnut and polar-area charts reject it, since they
+       * would draw it as a zero share.
+       */
+      data: Array<number | null> | Array<{ x: string | number; y: number | null; r?: number }>
       backgroundColor?: string | string[]
       borderColor?: string | string[]
       borderWidth?: number
@@ -135,6 +141,12 @@ export interface ChartComponentParams {
    * Custom CSS class (Sprint 7)
    */
   className?: string
+  /**
+   * Unit of every value in the chart (`'mm'`, `'km/h'`), shown as the value
+   * axis title (unless `options.scales` already sets one), after each tooltip
+   * value, and in the data-view column headers (v6.24.0). One unit per chart.
+   */
+  unit?: string
 }
 
 /**

package/src/utils/degraded-projections.ts

@@ -12,6 +12,7 @@
  */
 
 import { formatMCPUIString } from './format-string';
+import { isMissingChartValue } from './missing-value';
 
 /**
  * Column headers and series names of the degraded tables.
@@ -46,10 +47,17 @@ export interface DegradedProjectionLabels {
   feature: string;
   /** Chart table — fallback dataset name. Template — `{n}`. */
   series: string;
+  /**
+   * Chart table — a dataset 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 DegradedProjectionLabels}. */
-export const DEGRADED_PROJECTION_LABELS: DegradedProjectionLabels = {
+export const DEGRADED_PROJECTION_LABELS: Required<DegradedProjectionLabels> = {
   source: 'Source',
   target: 'Target',
   label: 'Label',
@@ -61,6 +69,7 @@ export const DEGRADED_PROJECTION_LABELS: DegradedProjectionLabels = {
   marker: 'marker',
   feature: 'feature',
   series: 'Series {n}',
+  withUnit: '{label} ({unit})',
 };
 
 const withLabels = (labels?: Partial<DegradedProjectionLabels>): DegradedProjectionLabels => ({
@@ -73,6 +82,12 @@ export interface DegradedTable {
   rows: Array<Array<string | number>>;
 }
 
+/** A degraded chart table: its cells, plus which of them are missing values. */
+export interface DegradedChartTable extends DegradedTable {
+  /** Same shape as `rows`; `true` for a dataset entry that is missing. @since v6.24.0 */
+  missing: boolean[][];
+}
+
 const MAX_PROJECTED_ROWS = 200;
 
 /** Compact a value to a single table cell string. */
@@ -188,25 +203,50 @@ export function mapToDegradedTable(params: {
  * Chart → a series table: one row per label, one column per dataset. So a
  * chart that can't draw still shows its numbers. Point/object data (scatter,
  * bubble, time series) is stringified per cell.
+ *
+ * `missing` flags the cells whose dataset entry is a missing value (`null`
+ * or non-finite) so the table can mark them instead of showing an empty
+ * cell. A slot past the end of a shorter or empty dataset has no entry and is
+ * not flagged; a point object keeps its JSON text (where a `"y":null` reads
+ * as such) and is not flagged either. With a `unit`, dataset column headers
+ * become `labels.withUnit`.
  */
 export function chartToDegradedTable(params: {
+  unit?: string;
   data?: {
     labels?: Array<string | number>;
     datasets?: Array<{ label?: string; data?: unknown[] }>;
   };
-}, labels?: Partial<DegradedProjectionLabels>): DegradedTable {
+}, labels?: Partial<DegradedProjectionLabels>): DegradedChartTable {
   const l = withLabels(labels);
+  const unit = typeof params.unit === 'string' && params.unit !== '' ? params.unit : undefined;
   const datasets = params.data?.datasets ?? [];
   const dataLabels = params.data?.labels ?? [];
   const rowCount = Math.max(dataLabels.length, ...datasets.map((d) => d.data?.length ?? 0), 0);
 
   const columns = [
     '',
-    ...datasets.map((d, i) => d.label ?? formatMCPUIString(l.series, { n: i + 1 })),
+    ...datasets.map((d, i) => {
+      const name = d.label ?? formatMCPUIString(l.series, { n: i + 1 });
+      return unit === undefined
+        ? name
+        : formatMCPUIString(l.withUnit ?? DEGRADED_PROJECTION_LABELS.withUnit, { label: name, unit });
+    }),
   ];
   const rows: Array<Array<string | number>> = [];
+  const missing: boolean[][] = [];
   for (let r = 0; r < Math.min(rowCount, MAX_PROJECTED_ROWS); r++) {
     rows.push([cell(dataLabels[r] ?? r + 1), ...datasets.map((d) => cell(d.data?.[r]))]);
+    missing.push([
+      false,
+      ...datasets.map((d) => {
+        // Past the end of a shorter or empty dataset there is no entry, so
+        // nothing to flag (the cell stays empty, as before 6.24.0).
+        if (r >= (d.data?.length ?? 0)) return false;
+        const entry = d.data?.[r];
+        return (entry === null || typeof entry !== 'object') && isMissingChartValue(entry);
+      }),
+    ]);
   }
-  return { columns, rows };
+  return { columns, rows, missing };
 }

package/src/utils/math-markdown.ts

@@ -104,7 +104,7 @@ function isCurrencyLike(raw: string, tex: string, following: string): boolean {
   return closerLooksLikeLaterOpener
 }
 
-const CELL_LINK_ATTRIBUTES = 'target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:underline"'
+const CELL_LINK_ATTRIBUTES = 'target="_blank" rel="noopener noreferrer" class="text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:underline"'
 
 function cellLinkExtension(): MarkedExtension {
   return {

package/src/utils/missing-value.ts

@@ -0,0 +1,127 @@
+/**
+ * Missing values — one definition shared by tables, chart data views,
+ * degraded projections, chart validation and the chart renderer.
+ *
+ * @since v6.24.0
+ *
+ * A missing value is a value the payload says EXISTS but was not observed:
+ * `null` in a chart dataset (or as a point's `y`), `null` / `undefined` in a
+ * table cell. It is not a zero, and it is not the absence of a row or of a
+ * label: every view keeps its slot and marks it.
+ *
+ * Runtime-free on purpose (no `solid-js`): the pure projections in
+ * `chart-data-table.ts` and `degraded-projections.ts`, and `validation.ts`
+ * (published as the `/validation` subpath), import it.
+ */
+
+/** The glyph a table cell shows for a missing value — `renderCellValue`'s historical `-`. */
+export const MISSING_VALUE_MARKER = '-'
+
+/**
+ * Chart types that encode a value as a share of a whole (or, for polar area,
+ * as a wedge whose emptiness reads as zero). Chart.js parses a `null` share
+ * as `0`, so these types refuse missing values instead of drawing them.
+ */
+export const PART_TO_WHOLE_CHART_TYPES: ReadonlySet<string> = new Set([
+  'pie',
+  'doughnut',
+  'polarArea',
+])
+
+/**
+ * Whether a raw TABLE cell value is displayed as {@link MISSING_VALUE_MARKER}.
+ *
+ * Mirrors the rules `renderCellValue` applies before any formatting — `null`,
+ * `undefined`, and a string that is empty or the word `undefined` once the
+ * backend's `"X – undefined"` debris is stripped — plus the literal marker
+ * itself (whitespace around it aside, which a table cell does not render),
+ * since it looks identical on screen and so must read identically.
+ *
+ * Objects are never missing here: `renderCellValue` renders them (link,
+ * name, or escaped JSON).
+ */
+export function isMissingCellValue(value: unknown): boolean {
+  if (value === null || value === undefined) return true
+  if (typeof value === 'object') return false
+  const cleaned = stripUndefinedDebris(String(value)).trim()
+  return cleaned === '' || cleaned === MISSING_VALUE_MARKER || cleaned.toLowerCase() === 'undefined'
+}
+
+/**
+ * Removes the `"Text – undefined"` / `"undefined – Text"` debris some
+ * backends concatenate. Shared with `renderCellValue` so both apply the very
+ * same cleanup.
+ */
+export function stripUndefinedDebris(value: string): string {
+  return value.replace(/\s*[–-]\s*undefined\s*$/gi, '').replace(/^undefined\s*[–-]\s*/gi, '')
+}
+
+/**
+ * Whether one CHART data entry is missing: `null` / `undefined`, a non-finite
+ * number (Chart.js parses those to `null` too), or a point whose `y` is.
+ */
+export function isMissingChartValue(value: unknown): boolean {
+  if (value === null || value === undefined) return true
+  if (typeof value === 'number') return !Number.isFinite(value)
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const y = (value as { y?: unknown }).y
+    return y === null || y === undefined || (typeof y === 'number' && !Number.isFinite(y))
+  }
+  return false
+}
+
+/**
+ * What a chart's missing values amount to.
+ *
+ * Only ENTRIES count: an explicit `null` (or non-finite number, or a point
+ * whose `y` is one). A dataset with no entry at all (`data: []`) is not
+ * "missing" — it is how 6.23.0 and earlier payloads said "nothing yet", e.g.
+ * while streaming, and it keeps rendering exactly as it did then.
+ */
+export interface ChartMissingSummary {
+  /** At least one entry of one dataset is missing. */
+  hasMissing: boolean
+  /** Per dataset, in order: it has entries and every one of them is missing. */
+  fullyMissing: boolean[]
+  /**
+   * Per dataset, in order: at least one observed value AND at least one
+   * missing entry — the series a reader actually sees broken.
+   */
+  partiallyMissing: boolean[]
+  /** Something is missing and no dataset has a single observed value: nothing to plot. */
+  allMissing: boolean
+}
+
+interface ChartDataLike {
+  data?: {
+    datasets?: Array<{ data?: unknown[] } | null | undefined>
+  }
+}
+
+/** Summarises the missing values of a chart payload. Never throws on a malformed payload. */
+export function summarizeChartMissing(params: ChartDataLike | null | undefined): ChartMissingSummary {
+  const datasets = Array.isArray(params?.data?.datasets) ? params.data.datasets : []
+  const fullyMissing: boolean[] = []
+  const partiallyMissing: boolean[] = []
+  let anyMissing = false
+  let anyObserved = false
+  for (const dataset of datasets) {
+    const data = Array.isArray(dataset?.data) ? dataset.data : []
+    let observed = 0
+    let missing = 0
+    for (const value of data) {
+      if (isMissingChartValue(value)) missing += 1
+      else observed += 1
+    }
+    fullyMissing.push(missing > 0 && observed === 0)
+    partiallyMissing.push(observed > 0 && missing > 0)
+    anyMissing ||= missing > 0
+    anyObserved ||= observed > 0
+  }
+  return {
+    hasMissing: anyMissing,
+    fullyMissing,
+    partiallyMissing,
+    allMissing: anyMissing && !anyObserved,
+  }
+}

package/src/utils/theme.ts

@@ -0,0 +1,101 @@
+import { createEffect, onCleanup } from 'solid-js'
+
+const THEME_PREFIX = '--mcp-ui-'
+
+/** Read only explicitly supplied host tokens; blank values retain engine defaults. */
+export function readThemeTokens(
+  element: Element | undefined,
+  names: readonly string[],
+): Record<string, string | undefined> {
+  const result: Record<string, string | undefined> = {}
+  const view = element?.ownerDocument.defaultView
+  const style = element && view ? view.getComputedStyle(element) : undefined
+  for (const name of names) result[name] = style?.getPropertyValue(name).trim() || undefined
+  return result
+}
+
+/** Observe inherited theme changes, including moving a mounted renderer into a portal. */
+export function observeTheme(element: HTMLElement, callback: () => void): () => void {
+  const view = element.ownerDocument.defaultView
+  if (!view?.MutationObserver) return () => {}
+  let stopped = false
+  let pending = false
+  const schedule = () => {
+    if (pending || stopped) return
+    pending = true
+    queueMicrotask(() => {
+      pending = false
+      if (!stopped) callback()
+    })
+  }
+  const observer = new view.MutationObserver((records) => {
+    if (records.some((record) => {
+      if (record.type === 'attributes') {
+        return record.target instanceof view.Element && record.target.contains(element)
+      }
+      return [...record.addedNodes, ...record.removedNodes].some(
+        (node) => node === element || node.contains(element),
+      )
+    })) schedule()
+  })
+  // Attribute names are deliberately not filtered: hosts may use any data-* selector.
+  observer.observe(element.ownerDocument.documentElement, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  })
+  return () => {
+    stopped = true
+    observer.disconnect()
+  }
+}
+
+/**
+ * A body portal cannot inherit a local host theme. Copy only our effective
+ * custom properties and dark state from its stationary anchor, and keep them
+ * synchronized for the lifetime of the Solid owner. Geometry stays unchanged.
+ */
+export function bindPortalTheme(portal: HTMLElement, source: () => HTMLElement | undefined): void {
+  createEffect(() => {
+    const anchor = source()
+    const view = anchor?.ownerDocument.defaultView
+    if (!anchor || !view) return
+    const copied = new Set<string>()
+    const sync = () => {
+      const style = view.getComputedStyle(anchor)
+      const inherited = portal.parentElement ? view.getComputedStyle(portal.parentElement) : undefined
+      const names = new Set(copied)
+      for (const computed of [style, inherited]) {
+        if (!computed) continue
+        for (let index = 0; index < computed.length; index++) {
+          const name = computed.item(index)
+          if (name.startsWith(THEME_PREFIX)) names.add(name)
+        }
+      }
+      const values = new Map<string, string>()
+      for (const name of names) {
+        const value = style.getPropertyValue(name).trim()
+        if (value) values.set(name, value)
+        // Empty setProperty removes a declaration. Explicitly block a body
+        // token when the local scope reset it to the guaranteed-invalid value.
+        else if (inherited?.getPropertyValue(name).trim()) values.set(name, 'initial')
+      }
+      for (const name of copied) {
+        if (!values.has(name)) portal.style.removeProperty(name)
+      }
+      copied.clear()
+      for (const [name, value] of values) {
+        if (portal.style.getPropertyValue(name) !== value) portal.style.setProperty(name, value)
+        copied.add(name)
+      }
+      portal.classList.toggle('dark', anchor.closest('.dark') !== null)
+    }
+    sync()
+    const stop = observeTheme(anchor, sync)
+    onCleanup(() => {
+      stop()
+      for (const name of copied) portal.style.removeProperty(name)
+      portal.classList.remove('dark')
+    })
+  })
+}