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

package/CHANGELOG.md

@@ -5,6 +5,95 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.23.0] - 2026-09-18
+
+### Added
+
+- Opt-in `MCPUIMathProvider` and `MathRenderer` for markdown text and table
+  cells, including virtualized tables; separate optional `/plugins/katex`
+  adapter. No new required config fields and no KaTeX import from the root.
+- Bounded dollar-delimited math parsing, currency guards, isolated Marked
+  instances, sanitized MathML-only rendering and literal fallback. Styles,
+  annotation subtrees, executable markup and trusted TeX commands stay blocked.
+- SSR keeps escaped source until the existing client hydration upgrade;
+  original text/data is retained for copy and export. No CSS or font install.
+- Optional KaTeX peer pinned to 0.18.4 to preserve Node 20 installation
+  compatibility; later 0.18.x releases currently require Node >=22.12 via
+  Commander. Cell links retain the existing new-tab, rel and styling policy.
+
+## [6.22.1] - 2026-09-18
+
+Fixes a typing regression 6.22.0 introduced. Runtime behaviour is identical.
+
+### The mistake
+
+6.22.0 made every `MCPUIConfig` field optional so that adding a policy key
+would stop breaking consumers who *author* a complete config. That fixed one
+direction and broke the other: `MCPUIConfig` is a published type, so anyone who
+*reads* one — `const policy: IframePolicy = config.iframePolicy` — suddenly
+faced `… | undefined` and stopped compiling under `strictNullChecks`. Trading
+one compile break for the opposite one is not a fix.
+
+The two demands genuinely conflict, and one name cannot serve both: an author
+must be allowed to omit a key, a reader must never meet `undefined`.
+
+### The fix — two names
+
+- **`MCPUIConfigInput`** (new, exported): what a host writes. Every field
+  optional, so a new policy key is always additive. This is what
+  `MCPUIConfigProvider`'s `config` prop takes. Note it is NOT what
+  `MCPUIConfigContext.Provider` takes — see below.
+- **`MCPUIConfig`**: what the library hands back — an interface extending
+  `Required<MCPUIConfigInput>`, every key present, which is the 6.21.0 meaning
+  restored. Keeping it an interface also preserves consumer extension and
+  declaration merging. `useMCPUIConfig()`, `DEFAULT_MCPUI_CONFIG` and
+  `MCPUIConfigContext` carry it.
+
+`MCPUIConfigContext` keeps the resolved type on purpose: it is exported, so
+`useContext(MCPUIConfigContext)` is a public read surface and typing it with the
+input view would leave a direct reader on `IframePolicy | undefined` — the very
+regression being undone. A host that bypasses `MCPUIConfigProvider` therefore
+passes a complete value, `{ ...DEFAULT_MCPUI_CONFIG, ...mine }`; passing only
+some keys is what the provider's `config` prop is for. `useMCPUIConfig()` still
+merges at runtime, so an untyped host cannot break a renderer.
+
+Derived rather than declared twice, so a key is written once and the two views
+cannot drift. The guard test now pins **both** halves: every `MCPUIConfigInput`
+field stays optional, and `MCPUIConfig` stays an interface extending
+`Required<…>`. The contract typecheck also pins interface extension and
+declaration merging. Both sides were verified to fail when their corresponding
+regression is reintroduced.
+
+### How this got through
+
+Through 6.22.0, `pnpm typecheck` ran the main `tsconfig.json` alone, and that
+config excludes `**/*.test.ts(x)`: a type-level claim written in a test file
+failed nothing. 6.22.0 shipped both a broken `MCPUIConfig` and a fixture
+annotated with the wrong type, and neither `typecheck` nor `test` said a word.
+`typecheck` now runs a second pass, `tsconfig.contracts.json`, which
+type-checks the handful of test files whose `satisfies` and annotations *are*
+the test. Including every test file instead would surface 53 unrelated errors,
+so that stays a separate piece of work.
+
+### Upgrading
+
+Reading is exactly as it was in 6.21.0, whether through `useMCPUIConfig()`,
+`useContext(MCPUIConfigContext)` or a value typed `MCPUIConfig`.
+`MCPUIConfigProvider`'s `config` prop still accepts everything it accepted
+before, `Partial<MCPUIConfig>` included.
+
+Two authoring patterns stop compiling, coming from 6.21.0 or from 6.22.0:
+
+- **A config annotated `MCPUIConfig`.** From 6.22.0 a partial one fails; from
+  6.21.0 a complete one fails too, since it lacks `chartZoom`. Annotate it
+  `MCPUIConfigInput` instead.
+- **A value handed straight to `<MCPUIConfigContext.Provider>`**, annotated or
+  not: an inline literal fails the same way. Spread the defaults,
+  `{ ...DEFAULT_MCPUI_CONFIG, ...mine }`, or pass the keys to
+  `<MCPUIConfigProvider config={…}>`, which does that merge for you.
+
+Both replacements keep compiling when the library adds its next policy key.
+
 ## [6.22.0] - 2026-09-18
 
 Wheel zoom and drag pan on the surfaces that could not be read when the content
@@ -50,6 +139,11 @@ expanded view only, and why inline zoom is opt-in.
 
 ### Changed
 
+> **Superseded by 6.22.1.** Making the fields of the published `MCPUIConfig`
+> optional broke every consumer that *reads* one. 6.22.1 moves the optional
+> fields to a new `MCPUIConfigInput` and restores `MCPUIConfig` as the
+> resolved type. The entry below describes 6.22.0 as published.
+
 - **Every `MCPUIConfig` field is now optional**, as `MCPUIStrings` has always
   been. `MCPUIConfig` grows a key in a minor release each time the library
   gains a policy switch — `iframeFallbackLink` in 6.21.0, `chartZoom` here —

package/README.md

@@ -5,6 +5,65 @@ SolidJS components + chat toolkit for MCP-generated UI. Part of the [MCP UI ecos
 [![npm version](https://img.shields.io/npm/v/@seed-ship/mcp-ui-solid.svg)](https://www.npmjs.com/package/@seed-ship/mcp-ui-solid)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+## What's New in v6.23.0
+
+Opt-in LaTeX in markdown text components and table cells, with the same
+currency guards and sanitized MathML output. No change without a provider;
+`MCPUIConfig` is unchanged. See [Math rendering](#math-rendering).
+
+## Math rendering
+
+Install the optional peer only if the host wants the supplied KaTeX adapter:
+
+```bash
+pnpm add --save-exact katex@0.18.4
+```
+
+```tsx
+import { MCPUIMathProvider, UIResourceRenderer } from '@seed-ship/mcp-ui-solid'
+import { renderKatexMath } from '@seed-ship/mcp-ui-solid/plugins/katex'
+
+<MCPUIMathProvider renderMath={renderKatexMath}>
+  <UIResourceRenderer content={resource} />
+</MCPUIMathProvider>
+```
+
+The adapter's optional peer is pinned to 0.18.4 to retain Node 20 installation
+compatibility. KaTeX 0.18.5–0.18.7 pull in Commander 15 (Node >=22.12);
+do not replace the pin with a caret range on Node 20.
+
+The provider applies to `text` with `markdown: true` and string-valued table
+cells, including virtualized rows. It recognizes `$...$` inline and `$$...$$`
+display formulas in their own paragraph (not embedded mid-sentence).
+Code spans/fences and link destinations are not formulas;
+currency such as `$5` and `$5-$10` remains text. Malformed/incomplete formulas
+degrade to their source. Copy/export continues to use the original data.
+Dollar syntax can be ambiguous: `$5$` is a formula. Escape a literal dollar
+as `\$` when composing currency and formulas; numeric math such as `$2 + 3$`
+remains supported. Math-enabled cell links keep their existing new-tab behavior.
+
+The adapter emits **MathML only**: no KaTeX stylesheet, fonts, CDN requests,
+HTML layout or inline styles. Native MathML rendering varies by browser and
+may differ from the chat's HTML+MathML layout. There is no automatic loading:
+the explicit plugin import is the opt-in dependency boundary; hosts can load
+that module before mounting the provider if they want a separate chunk.
+
+Alternatively pass a synchronous `MathRenderer` function returning MathML
+(`(tex, { displayMode }) => string | null`). The library still sanitizes it;
+return `null` or throw to retain literal source. Passing `null` (or omitting
+`renderMath`) on a nested provider disables inherited math. Arbitrary Marked
+extensions and sanitizer overrides are deliberately not public API.
+
+On the server, escaped source is emitted without calling the renderer. The
+existing `SafeHtml` client upgrade renders sanitized formulas after hydration.
+Processing is bounded to 100,000 source characters, 4,096 per expression and
+128 expressions per parse; oversized input stays escaped text. The adapter
+also limits macro expansion and dimensions, disables trusted commands, and
+does not share macro definitions across formulas. TeX annotation subtrees are
+removed rather than exposing duplicate source after sanitization.
+
+See the [design and integration handoff](./docs/briefs/LATEX-MATHML-2026-09-18.md).
+
 ## What's New in v6.21.0
 
 - **Iframes work under `Cross-Origin-Embedder-Policy: credentialless`.** Both
@@ -1029,6 +1088,48 @@ import { MCPUIConfigProvider } from '@seed-ship/mcp-ui-solid'
 </MCPUIConfigProvider>
 ```
 
+When you keep a partial configuration in a variable, name the authored,
+all-optional view explicitly:
+
+```tsx
+import {
+  MCPUIConfigProvider,
+  type MCPUIConfigInput,
+} from '@seed-ship/mcp-ui-solid'
+
+const config: MCPUIConfigInput = {
+  iframeCredentialless: 'always',
+  chartZoom: 'never',
+}
+
+<MCPUIConfigProvider config={config}>
+  <App />
+</MCPUIConfigProvider>
+```
+
+Prefer `MCPUIConfigProvider` for partial overrides. The exported raw context is
+also a public read surface, so its `Provider` requires the complete, resolved
+`MCPUIConfig` value. If an integration must provide that context directly,
+spread the defaults first:
+
+```tsx
+import {
+  DEFAULT_MCPUI_CONFIG,
+  MCPUIConfigContext,
+} from '@seed-ship/mcp-ui-solid'
+
+<MCPUIConfigContext.Provider
+  value={{ ...DEFAULT_MCPUI_CONFIG, iframeCredentialless: 'always' }}
+>
+  <App />
+</MCPUIConfigContext.Provider>
+```
+
+`MCPUIConfigInput` contains the library's built-in authoring fields.
+`MCPUIConfig` remains an interface for consumers that extend or augment the
+resolved contract; `MCPUIConfigProvider` also accepts those augmented fields
+as partial inline overrides.
+
 | Option | Values | Default | What it does |
 |--------|--------|---------|--------------|
 | `iframeCredentialless` | `'auto'` \| `'always'` \| `'never'` | `'auto'` | `'auto'`: the attribute on the `iframe` component when its host is **not** in `TRUSTED_IFRAME_DOMAINS` (+ `customTrustedIframeDomains`) — those frames already run without cookies. The video embed is excluded, since it has none of that sandboxing. `'always'`: every iframe, video and trusted hosts included — what a COEP host wants. `'never'`: none. |
@@ -1966,6 +2067,7 @@ import type {
   IframePolicy, ValidationOptions,
   CitationCtx, CitationEntry, DuplicateMountInfo, DuplicateMountReporter,
   MCPUIStrings, MCPUIConfig, // v6.21.0
+  MCPUIConfigInput, // v6.22.1 — the authored, all-optional view
   TelemetryEvent, TelemetrySink, TelemetryOptions, TelemetryDispatcher,
   DataValidation, HallucinatedNumber, DataValidationOptions,
   VerifiedTextContent, DataPreviewContent, MapSectionContent,

package/dist/components/UIResourceRenderer.cjs

@@ -60,6 +60,8 @@ const RenderContext = require("./RenderContext.cjs");
 const useAction = require("../hooks/useAction.cjs");
 const createResponsiveGrid = require("../hooks/createResponsiveGrid.cjs");
 const marked = require("marked");
+const MCPUIMathContext = require("../context/MCPUIMathContext.cjs");
+const mathMarkdown = require("../utils/math-markdown.cjs");
 const formatString = require("../utils/format-string.cjs");
 var _tmpl$ = /* @__PURE__ */ web.template(`<svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button data-mcp-ui-action=copy type=button>`), _tmpl$3 = /* @__PURE__ */ web.template(`<svg class="w-3 h-3 text-green-500"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 13l4 4L19 7">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"><p class="text-red-500 dark:text-red-400 text-sm">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=p-3>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600">`), _tmpl$7 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center p-4"><div class=text-center><p class="text-red-600 dark:text-red-400 text-sm font-medium"></p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1">`), _tmpl$8 = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$9 = /* @__PURE__ */ web.template(`<div class="w-full h-full p-4"><!$><!/><div class="w-full h-full"role=img><img class="w-full h-auto max-h-[300px] object-contain">`), _tmpl$0 = /* @__PURE__ */ web.template(`<div class="relative w-full h-full min-h-[300px] bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ web.template(`<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">`), _tmpl$10 = /* @__PURE__ */ web.template(`<tr>`), _tmpl$11 = /* @__PURE__ */ web.template(`<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">`), _tmpl$12 = /* @__PURE__ */ web.template(`<tbody class="bg-white dark:bg-gray-800 relative">`), _tmpl$13 = /* @__PURE__ */ web.template(`<button class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ web.template(`<div class="absolute right-10 top-2 z-10"><button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"aria-haspopup=menu><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg></button><!$><!/>`), _tmpl$15 = /* @__PURE__ */ web.template(`<span class="ml-2 text-xs font-normal text-gray-400">`), _tmpl$16 = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3 flex-shrink-0"><!$><!/><!$><!/>`), _tmpl$17 = /* @__PURE__ */ web.template(`<button type=button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm">&times;`), _tmpl$18 = /* @__PURE__ */ web.template(`<div class="relative mb-3"><span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-sm">🔍</span><input type=text class="w-full max-w-xs min-w-[200px] pl-8 pr-8 py-1.5 text-sm border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none"><!$><!/>`), _tmpl$19 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">`), _tmpl$20 = /* @__PURE__ */ web.template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>`), _tmpl$21 = /* @__PURE__ */ web.template(`<select class="ml-2 px-1 py-0.5 text-xs border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300"data-mcp-ui-action=page-size>`), _tmpl$22 = /* @__PURE__ */ web.template(`<span class=text-gray-400>`), _tmpl$23 = /* @__PURE__ */ web.template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span><!$><!/>&ndash;<!$><!/> / <!$><!/></span><div class="flex items-center gap-2"><button type=button class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"data-mcp-ui-action=page-prev><span aria-hidden=true>&#x25C0;</span></button><span aria-live=polite><!$><!/> / <!$><!/></span><button type=button class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"data-mcp-ui-action=page-next><span aria-hidden=true>&#x25B6;</span></button><!$><!/>`), _tmpl$24 = /* @__PURE__ */ web.template(`<div><!$><!/><div><!$><!/><!$><!/><div role=region tabindex=0><table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border-separate border-spacing-0"><thead class="bg-gray-100 dark:bg-gray-900 sticky top-0 z-10"><tr></tr></thead><!$><!/></table></div><!$><!/><!$><!/>`), _tmpl$25 = /* @__PURE__ */ web.template(`<th scope=col class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 first:pl-6 last:pr-6 bg-gray-100 dark:bg-gray-900 cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"><span class="inline-flex items-center gap-1"><!$><!/><span class="text-[10px] leading-none">`), _tmpl$26 = /* @__PURE__ */ web.template(`<option>`), _tmpl$27 = /* @__PURE__ */ web.template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$28 = /* @__PURE__ */ web.template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$29 = /* @__PURE__ */ web.template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$30 = /* @__PURE__ */ web.template(`<div class="relative w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 group"><!$><!/><div class="flex flex-col h-full justify-between"><div><p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></p><div class="mt-2 flex items-baseline"><p class="text-2xl font-semibold text-gray-900 dark:text-white"></p><!$><!/></div></div><!$><!/><!$><!/>`), _tmpl$31 = /* @__PURE__ */ web.template(`<div class="relative w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 group"><!$><!/><!$><!/>`), _tmpl$32 = /* @__PURE__ */ web.template(`<img class="max-w-full max-h-[400px] object-contain rounded shadow-sm hover:opacity-90 transition-opacity"loading=lazy>`, true, false, false), _tmpl$33 = /* @__PURE__ */ web.template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"><div class="flex-1 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 min-h-[200px]"></div><div class="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"><p class="text-sm text-gray-600 dark:text-gray-400 text-center italic">`), _tmpl$34 = /* @__PURE__ */ web.template(`<a target=_blank rel="noopener noreferrer"class=cursor-zoom-in>`), _tmpl$35 = /* @__PURE__ */ web.template(`<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$36 = /* @__PURE__ */ web.template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"><!$><!/><iframe class="w-full border-0 flex-1"loading=lazy></iframe><!$><!/>`, true, false, false), _tmpl$37 = /* @__PURE__ */ web.template(`<figcaption class="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"><p class="text-sm text-gray-600 dark:text-gray-400 text-center">`), _tmpl$38 = /* @__PURE__ */ web.template(`<figure><div class="flex-1 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 min-h-[200px]"><a target=_blank rel="noopener noreferrer"class="cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded"><img class="max-w-full max-h-[500px] object-contain rounded shadow-sm hover:opacity-95 transition-opacity"loading=lazy></a></div><!$><!/>`, true, false, false), _tmpl$39 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400 truncate">`), _tmpl$40 = /* @__PURE__ */ web.template(`<a target=_blank rel="noopener noreferrer"><div class="p-2 bg-blue-50 dark:bg-blue-900/30 rounded-full text-blue-600 dark:text-blue-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50 shrink-0 transition-colors"aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"></h4><!$><!/></div><svg xmlns=http://www.w3.org/2000/svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 shrink-0 transition-colors"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1=10 y1=14 x2=21 y2=3>`), _tmpl$41 = /* @__PURE__ */ web.template(`<div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"role=alert><svg xmlns=http://www.w3.org/2000/svg class="w-3.5 h-3.5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1=12 y1=9 x2=12 y2=13></line><line x1=12 y1=17 x2=12.01 y2=17></line></svg><span>`), _tmpl$42 = /* @__PURE__ */ web.template(`<div class="w-full h-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4"><p class="text-sm font-medium text-red-900 dark:text-red-100"></p><p class="text-xs text-red-700 dark:text-red-300 mt-1">`), _tmpl$43 = /* @__PURE__ */ web.template(`<div role=alert class="w-full rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-200"><!$><!/> <code class=font-mono>`), _tmpl$44 = /* @__PURE__ */ web.template(`<span aria-hidden=true>`), _tmpl$45 = /* @__PURE__ */ web.template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ web.template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full"aria-hidden=true>`), _tmpl$47 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/><!$><!/>`), _tmpl$48 = /* @__PURE__ */ web.template(`<p class="text-xs text-red-600 dark:text-red-400 mt-1">`), _tmpl$49 = /* @__PURE__ */ web.template(`<div class=mt-3><p class="text-xs font-medium text-red-700 dark:text-red-300"></p><ul class="mt-1 text-xs text-red-600 dark:text-red-400 list-disc list-inside">`), _tmpl$50 = /* @__PURE__ */ web.template(`<p class="text-xs text-red-500 dark:text-red-500 mt-2">`), _tmpl$51 = /* @__PURE__ */ web.template(`<div class="relative w-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 group"><!$><!/><div class="flex items-start gap-3"><div class="p-2 bg-red-100 dark:bg-red-900/40 rounded-full shrink-0"><svg class="w-5 h-5 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-semibold text-red-800 dark:text-red-200"></h4><p class="text-sm text-red-700 dark:text-red-300 mt-1"></p><!$><!/><!$><!/><!$><!/>`), _tmpl$52 = /* @__PURE__ */ web.template(`<li>`), _tmpl$53 = /* @__PURE__ */ web.template(`<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"><h3 class="text-sm font-semibold text-gray-900 dark:text-white capitalize">`), _tmpl$54 = /* @__PURE__ */ web.template(`<div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><!$><!/>`), _tmpl$55 = /* @__PURE__ */ web.template(`<div><div class="grid gap-4"data-mcp-ui-grid></div><!$><!/>`), _tmpl$56 = /* @__PURE__ */ web.template(`<div class=min-w-0>`);
 function CopyButton(props) {
@@ -308,7 +310,7 @@ function ChartRenderer(props) {
 }
 const HIGHLIGHT_MARK_CLASS = "bg-yellow-200 dark:bg-[#222F49] text-inherit rounded px-0.5";
 function highlightQuery(html, query) {
-  var _a;
+  var _a, _b;
   const q = query.trim();
   if (!q) return html;
   if (typeof document === "undefined") return html;
@@ -319,6 +321,7 @@ function highlightQuery(html, query) {
   const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_TEXT);
   const textNodes = [];
   for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if ((_a = node.parentElement) == null ? void 0 : _a.closest("math")) continue;
     textNodes.push(node);
   }
   for (const node of textNodes) {
@@ -346,7 +349,7 @@ function highlightQuery(html, query) {
     if (cursor < text.length) {
       fragment.appendChild(document.createTextNode(text.slice(cursor)));
     }
-    (_a = node.parentNode) == null ? void 0 : _a.replaceChild(fragment, node);
+    (_b = node.parentNode) == null ? void 0 : _b.replaceChild(fragment, node);
   }
   return template.innerHTML;
 }
@@ -374,7 +377,7 @@ function transformCellCitations(text, ctx) {
     });
   });
 }
-function renderCellValue(value, citationCtx) {
+function renderCellValue(value, citationCtx, mathRenderer) {
   if (value === null || value === void 0) {
     return "-";
   }
@@ -404,6 +407,9 @@ function renderCellValue(value, citationCtx) {
   if (strValue.trim() === "") {
     return "-";
   }
+  if (mathRenderer && strValue.includes("$")) {
+    return mathMarkdown.parseMathMarkdown(strValue, mathRenderer, "cellMarkdown", citationCtx ? (text) => transformCellCitations(text, citationCtx) : void 0);
+  }
   const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
   if (markdownLinkRegex.test(strValue)) {
     const htmlValue = strValue.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:underline">$1</a>');
@@ -429,6 +435,7 @@ function TableRenderer(props) {
   const tableParams = props.component.params;
   let scrollContainerRef;
   const strings = MCPUIStringsContext.useMCPUIStrings();
+  const mathRenderer = MCPUIMathContext.useMCPUIMath();
   const citationCtx = tableParams.citationMap ? {
     map: tableParams.citationMap,
     render: tableParams.citationRender,
@@ -688,7 +695,7 @@ ${dataRows}`;
           children: (column) => (() => {
             var _el$27 = web.getNextElement(_tmpl$11);
             web.insert(_el$27, web.createComponent(SafeHtml.SafeHtml, {
-              html: () => highlightQuery(renderCellValue(row[column.key], citationCtx), debouncedQuery())
+              html: () => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())
             }));
             return _el$27;
           })()
@@ -723,7 +730,7 @@ ${dataRows}`;
               children: (column) => (() => {
                 var _el$30 = web.getNextElement(_tmpl$11);
                 web.insert(_el$30, web.createComponent(SafeHtml.SafeHtml, {
-                  html: () => highlightQuery(renderCellValue(row[column.key], citationCtx), debouncedQuery())
+                  html: () => highlightQuery(renderCellValue(row[column.key], citationCtx, mathRenderer()), debouncedQuery())
                 }));
                 return _el$30;
               })()
@@ -1144,6 +1151,7 @@ function extractImageFromMarkdown(content, fallbackAlt) {
 }
 function TextRenderer(props) {
   const strings = MCPUIStringsContext.useMCPUIStrings();
+  const mathRenderer = MCPUIMathContext.useMCPUIMath();
   const textParams = props.component.params;
   const imageData = solidJs.createMemo(() => {
     if (textParams.markdown && textParams.content) {
@@ -1168,6 +1176,8 @@ function TextRenderer(props) {
       return escapeHtml.escapeHtml(String(raw));
     }
     if (textParams.markdown && !imageData()) {
+      const renderMath = mathRenderer();
+      if (renderMath) return mathMarkdown.parseMathMarkdown(String(raw), renderMath, "prose");
       return sanitizeHtml.sanitizeHtml(marked.marked.parse(raw, {
         async: false
       }), sanitizeHtml.SANITIZE_PROFILES.prose);