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

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

@@ -209,6 +209,8 @@ export interface MissingValuesPluginOptions {
   getNoDataText: () => string;
   /** Lazy: `Chart.defaults.font.family`, when the build exposes it. */
   getFontFamily?: () => string | undefined;
+  /** Lazy host theme override; omission retains the historical grey. */
+  getTextColor?: () => string | undefined;
 }
 
 /** A dataset colour for entry `index`, as a string, or `undefined`. */
@@ -297,7 +299,7 @@ export function drawMissingBarStubs(chart: any): void {
 }
 
 /** Draws `text` centred in the chart area (a chart with nothing to plot). */
-export function drawNoDataText(chart: any, text: string, fontFamily?: string): void {
+export function drawNoDataText(chart: any, text: string, fontFamily?: string, color?: string): void {
   const ctx = chart?.ctx;
   const area = chart?.chartArea;
   if (!ctx || !area || !text) return;
@@ -305,7 +307,7 @@ export function drawNoDataText(chart: any, text: string, fontFamily?: string): v
   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.fillStyle = color || NO_DATA_TEXT_COLOR;
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   ctx.fillText(text, cx, cy);
@@ -324,7 +326,7 @@ export function createMissingValuesPlugin(options: MissingValuesPluginOptions) {
       try {
         drawMissingBarStubs(chart);
         if (options.allMissing) {
-          drawNoDataText(chart, options.getNoDataText(), options.getFontFamily?.());
+          drawNoDataText(chart, options.getNoDataText(), options.getFontFamily?.(), options.getTextColor?.());
         }
       } catch {
         // Cosmetic layer: never break the chart.

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/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/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')
+    })
+  })
+}