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

package/dist/utils/theme.cjs.map

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

package/dist/utils/theme.d.ts

@@ -0,0 +1,11 @@
+/** Read only explicitly supplied host tokens; blank values retain engine defaults. */
+export declare function readThemeTokens(element: Element | undefined, names: readonly string[]): Record<string, string | undefined>;
+/** Observe inherited theme changes, including moving a mounted renderer into a portal. */
+export declare function observeTheme(element: HTMLElement, callback: () => void): () => void;
+/**
+ * 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 declare function bindPortalTheme(portal: HTMLElement, source: () => HTMLElement | undefined): void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/utils/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAIA,sFAAsF;AACtF,wBAAgB,eAAe,CAC7B,OAAO,EAAE,OAAO,GAAG,SAAS,EAC5B,KAAK,EAAE,SAAS,MAAM,EAAE,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAMpC;AAED,0FAA0F;AAC1F,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAiCnF;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,CA2ChG"}

package/dist/utils/theme.js

@@ -0,0 +1,91 @@
+import { createEffect, onCleanup } from "solid-js";
+const THEME_PREFIX = "--mcp-ui-";
+function readThemeTokens(element, names) {
+  const result = {};
+  const view = element == null ? void 0 : element.ownerDocument.defaultView;
+  const style = element && view ? view.getComputedStyle(element) : void 0;
+  for (const name of names) result[name] = (style == null ? void 0 : style.getPropertyValue(name).trim()) || void 0;
+  return result;
+}
+function observeTheme(element, callback) {
+  const view = element.ownerDocument.defaultView;
+  if (!(view == null ? void 0 : 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();
+  });
+  observer.observe(element.ownerDocument.documentElement, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  return () => {
+    stopped = true;
+    observer.disconnect();
+  };
+}
+function bindPortalTheme(portal, source) {
+  createEffect(() => {
+    const anchor = source();
+    const view = anchor == null ? void 0 : anchor.ownerDocument.defaultView;
+    if (!anchor || !view) return;
+    const copied = /* @__PURE__ */ new Set();
+    const sync = () => {
+      const style = view.getComputedStyle(anchor);
+      const inherited = portal.parentElement ? view.getComputedStyle(portal.parentElement) : void 0;
+      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 = /* @__PURE__ */ new Map();
+      for (const name of names) {
+        const value = style.getPropertyValue(name).trim();
+        if (value) values.set(name, value);
+        else if (inherited == null ? void 0 : 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");
+    });
+  });
+}
+export {
+  bindPortalTheme,
+  observeTheme,
+  readThemeTokens
+};
+//# sourceMappingURL=theme.js.map

package/dist/utils/theme.js.map

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

package/docs/SECURITY-DEPENDENCIES.md

@@ -0,0 +1,81 @@
+# Security dependency notes (6.25.1)
+
+Verified on 2026-10-18. This is a dependency-remediation record, not a claim
+that every renderer or consuming application has been security-audited.
+
+## Updates
+
+| Dependency | Previous lock | Updated lock | Scope and advisories |
+| --- | --- | --- | --- |
+| DOMPurify | 3.4.13 | 3.4.17 | Required runtime dependency; published floor is `^3.4.17`. [Rawtext root](https://github.com/cure53/DOMPurify/security/advisories/GHSA-6688-9rhm-gjv2), [hook removal](https://github.com/cure53/DOMPurify/security/advisories/GHSA-p98j-92pf-mc4p) and [subsequent hardening](https://github.com/cure53/DOMPurify/releases/tag/3.4.17). |
+| Solid / Seroval / Seroval plugins | 1.9.11 / 1.5.6 / 1.5.0 | 1.9.17 / 1.6.11 / 1.6.11 | Workspace development resolution; Solid remains a required host peer. [Callable invocation](https://github.com/lxsmnsyc/seroval/security/advisories/GHSA-p6vx-979v-rg4c), [TypedArray allocation](https://github.com/lxsmnsyc/seroval/security/advisories/GHSA-jp82-f5mq-hwhp). |
+| source-map-js | 1.2.1 | 1.2.2 | Build/test tooling via PostCSS and css-tree. [Indexed-map denial of service](https://github.com/advisories/GHSA-68fv-2mgg-jv7q). |
+| brace-expansion | 5.0.9 | 5.0.12 | Lint tooling via minimatch. [Rewrite complexity](https://github.com/juliangruber/brace-expansion/security/advisories/GHSA-q2hr-2g5m-vwhr), [nested groups](https://github.com/advisories/GHSA-qhr7-859c-m2p7), [comma recursion](https://github.com/advisories/GHSA-6j4f-fj2g-mc7p). |
+
+The sanitizer accepts strings, not live DOM nodes, and the library's profiles
+do not use `IN_PLACE` or node-removing hooks. The two reported DOMPurify
+preconditions were not found in these library paths; this is not a finding
+that every possible host configuration is safe. No renderer policy is relaxed.
+
+Solid 1.9.17 requests Seroval and its plugins in the supported `~1.6.8` range.
+The workspace override follows that range instead of forcing Solid's old
+`~1.5.3` resolution. Seroval 1.6.2 alone would not cover the additional
+TypedArray advisory, which was fixed in 1.6.3.
+
+## Host applications
+
+This package externalizes dependencies. Its DOMPurify manifest floor affects
+the version installed by consumers, but this repository's root pnpm overrides
+and development lockfile do **not** propagate to an application's lockfile.
+The public `solid-js` peer range remains `^1.9.0` for compatibility; it is not
+a guarantee that the host has a corrected Seroval resolution.
+
+Update the application lockfile separately. An upstream-aligned option is
+Solid 1.9.17 with its supported Seroval/plugin 1.6.x dependencies; verify the
+resolved versions and audit the application itself. The library's new test
+performs a real asynchronous Solid server render with hydration serialization,
+plus a legitimate Map/Date/typed-array/Promise JSON transport roundtrip through
+Solid's own Seroval. It is a compatibility smoke test, not browser hydration
+proof, an exploitability assessment of the host, or an end-to-end SolidStart test.
+
+## Remaining advisory: braces 3.0.3
+
+[`GHSA-vfj7-8cjw-p6xm`](https://github.com/advisories/GHSA-vfj7-8cjw-p6xm)
+is HIGH severity and has no patched version listed as of the verification
+date. It concerns stack exhaustion when deeply nested, attacker-controlled
+brace patterns reach recursive glob parsing. `braces` and `brace-expansion`
+are different packages: updating the latter does not fix this advisory.
+
+The retained development-only chain is:
+
+```text
+ESLint / typescript-eslint
+  -> typescript-estree -> globby -> fast-glob -> micromatch -> braces 3.0.3
+```
+
+No compatible published parent update that removes this chain was identified.
+Even the checked latest globby release still uses fast-glob/micromatch and
+braces. The [upstream issue](https://github.com/micromatch/braces/issues/70)
+remains the follow-up point.
+
+Current lint scripts use `eslint src`; repository lint configuration has
+simple static file patterns and no `parserOptions.project` glob. No production
+renderer path to braces was identified. Keep project/glob patterns static and
+reviewed, and do not expose this tooling as a service accepting untrusted
+patterns without a depth guard and isolation. These observations bound the
+known exposure; they do not prove complete unreachability, including through
+every future lint configuration or pull request.
+
+The advisory stays visible: no audit suppression, alias, downgrade, vendored
+patch or GitHub dismissal is included. Recheck upstream before claiming it
+resolved. The verified full-workspace audit moves from 9 advisories
+(1 critical, 5 high, 1 moderate, 2 low) to **1 high**; a nonzero full audit
+result is therefore expected until this residual is fixed.
+
+## Release boundary
+
+The package version bump does not itself start npm staging. The current
+GitHub workflow triggers on an approved `v*.*.*` tag (or manual dispatch),
+then uses `npm stage publish`. A successful upload still requires maintainer
+approval in npm Staged Packages with 2FA before it is public. Do not label a
+merge, a green CI run or an uploaded stage as a public npm release.

package/docs/THEMING.md

@@ -0,0 +1,205 @@
+# Theming (6.25.0)
+
+Set `--mcp-ui-*` custom properties on any ancestor of the library's components.
+They inherit through nested components and can be scoped differently for two
+instances on the same page. No provider, global theme or new dependency is
+required. Continue scanning `src/**/*.{ts,tsx}` with Tailwind v4 and use the
+host's class-based `.dark` variant. Import the existing autocomplete CSS when
+using those components, as before.
+
+## Defaults and inheritance
+
+The migrated component roots carry `mcp-ui-root`, but **do not assign public
+token defaults** there. Assigning `--mcp-ui-surface: white` on a nested root
+would mask an inherited host value. Instead, each static utility consumes a
+token with the exact old color as its fallback, for example:
+
+```tsx
+class="bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))]"
+```
+
+The host's existing Tailwind palette remains authoritative. Fallbacks retain
+the original per-component shades, dark variants and alpha paints; there is
+deliberately no single replacement palette that collapses those distinctions.
+Removing a token restores that original fallback. A custom color replaces the
+whole paint, including opacity, rather than applying the old opacity to it.
+Host tokens apply without a `.dark` class too; that class only selects the
+original dark fallbacks. Normal form text falls back to its inherited color
+when `--mcp-ui-fg` is absent, while muted fields keep their secondary role.
+
+## Tokens
+
+Values below describe the original fallbacks, not declarations on the root.
+`gray-*`, `blue-*`, etc. refer to the host's Tailwind color variables. Exact
+per-use defaults remain visible in the static source classes. The frozen
+6.24.0 browser fixture records representative resolved light/dark values.
+
+| Token | Role | Original default / behavior |
+| --- | --- | --- |
+| `--mcp-ui-bg` | Outer resource-renderer background | Transparent |
+| `--mcp-ui-surface` | Cards, panels, menus, input surfaces | White; dark gray-800, with original local exceptions |
+| `--mcp-ui-surface-muted` | Headers, secondary/disabled surfaces | Original gray-50/100; dark gray-700/900 variants |
+| `--mcp-ui-surface-hover` | Hovered neutral elements | Original gray-50/100; dark gray-700 variants |
+| `--mcp-ui-fg` | Primary text | Original gray-700/900; dark gray-100/300/white |
+| `--mcp-ui-fg-muted` | Descriptions and secondary text | Original gray-500/600; dark gray-400 variants |
+| `--mcp-ui-fg-subtle` | Hints, placeholders, disabled text | Original gray-400 and existing autocomplete RGBA values |
+| `--mcp-ui-border` | Decorative borders and dividers | Original gray-100/200; dark gray-600/700 |
+| `--mcp-ui-border-control` | Form-field outlines | Original gray-300; dark gray-600, with local variants |
+| `--mcp-ui-focus` | Focus ring/border | Original blue-400/500 |
+| `--mcp-ui-accent` | Primary action, link, selected text | Original blue/indigo shades |
+| `--mcp-ui-accent-fg` | Text on a strong action fill | White |
+| `--mcp-ui-accent-hover` | Strong action hover fill | Original blue-700 |
+| `--mcp-ui-accent-soft` | Selection and preview backgrounds | Original blue-50/100; dark blue-900 with original alpha |
+| `--mcp-ui-accent-border` | Accent borders | Original blue-200/300; dark blue-600/800 |
+| `--mcp-ui-danger` | Destructive/error text or strong fill | Original red/rose shades |
+| `--mcp-ui-danger-hover` | Destructive hover fill | Original red-700 |
+| `--mcp-ui-danger-soft` | Error backgrounds | Original red-50/100; dark red-900 with original alpha |
+| `--mcp-ui-danger-border` | Error borders | Original red-200/300; dark red-600/800 |
+| `--mcp-ui-warning` | Warning/loading text or strong fill | Original amber/yellow/orange shades |
+| `--mcp-ui-warning-hover` | Warning action hover | Original amber-700 |
+| `--mcp-ui-warning-soft` | Warning backgrounds | Original amber/yellow/orange soft paints |
+| `--mcp-ui-warning-border` | Warning borders | Original amber/yellow/orange border shades |
+| `--mcp-ui-success` | Successful/completed states | Original green/emerald shades |
+| `--mcp-ui-success-soft` | Success backgrounds | Original green-50/100; dark green-900 with original alpha |
+| `--mcp-ui-info` | Ready/information states | Original cyan/sky/teal shades |
+| `--mcp-ui-info-soft` | Information backgrounds | Original cyan/sky/teal soft paints |
+| `--mcp-ui-info-border` | Information borders | Original cyan/sky/teal border shades |
+| `--mcp-ui-secondary` | Processing/comparison states | Original purple/violet/pink shades |
+| `--mcp-ui-secondary-soft` | Secondary-state backgrounds | Original purple/violet/pink soft paints |
+| `--mcp-ui-highlight` | Table search match | Original yellow-200 and existing dark search paint |
+| `--mcp-ui-overlay` | Dialog backdrop | Black at 50% |
+| `--mcp-ui-shadow` | Full shadow value, not a color | Existing Tailwind shadow or autocomplete box-shadow |
+| `--mcp-ui-scrollbar-thumb` / `--mcp-ui-scrollbar-track` | Scratchpad native scrollbars | Original automatic rendering when unset |
+| `--mcp-ui-chart-1` … `--mcp-ui-chart-8` | Series / graph node / pie-point colors | Engine-managed defaults when absent |
+| `--mcp-ui-chart-grid` | Chart grid / graph edges | Existing engine defaults |
+| `--mcp-ui-chart-axis` | Chart axis border / graph node stroke | Existing engine defaults |
+| `--mcp-ui-chart-label` | Axes, legend, graph labels, no-data text | Existing engine defaults |
+
+Typography, spacing and radii are not changed by this release. Native
+scrollbars retain their automatic appearance unless the host supplies tokens.
+Existing non-color `!important` utilities and the pre-existing
+autocomplete selected-state/reduced-motion rules remain; the theme migration
+adds no `!important` rule and no global palette selector.
+
+## Host example
+
+```css
+.app-theme {
+  --mcp-ui-surface: #fff;
+  --mcp-ui-surface-muted: #f1f5f9;
+  --mcp-ui-surface-hover: #e2e8f0;
+  --mcp-ui-fg: #0f172a;
+  --mcp-ui-fg-muted: #475569;
+  --mcp-ui-fg-subtle: #64748b;
+  --mcp-ui-border: #cbd5e1;
+  --mcp-ui-border-control: #64748b;
+  --mcp-ui-accent: #1d4ed8;
+  --mcp-ui-accent-hover: #1e40af;
+  --mcp-ui-accent-fg: #fff;
+  --mcp-ui-accent-soft: #dbeafe;
+  --mcp-ui-focus: #1d4ed8;
+  --mcp-ui-chart-1: #1d4ed8;
+  --mcp-ui-chart-grid: #cbd5e1;
+  --mcp-ui-chart-axis: #64748b;
+  --mcp-ui-chart-label: #334155;
+}
+.dark .app-theme {
+  --mcp-ui-surface: #0f172a;
+  --mcp-ui-surface-muted: #1e293b;
+  --mcp-ui-surface-hover: #334155;
+  --mcp-ui-fg: #f8fafc;
+  --mcp-ui-fg-muted: #cbd5e1;
+  --mcp-ui-fg-subtle: #94a3b8;
+  --mcp-ui-border: #475569;
+  --mcp-ui-border-control: #94a3b8;
+  --mcp-ui-accent: #93c5fd;
+  --mcp-ui-accent-hover: #60a5fa;
+  --mcp-ui-accent-fg: #0f172a;
+  --mcp-ui-accent-soft: #1e3a8a;
+  --mcp-ui-focus: #93c5fd;
+  --mcp-ui-chart-1: #93c5fd;
+  --mcp-ui-chart-grid: #475569;
+  --mcp-ui-chart-axis: #94a3b8;
+  --mcp-ui-chart-label: #e2e8f0;
+}
+```
+
+Choose semantic status colors and all series colors appropriate for the host.
+Recheck contrast against the actual backgrounds, including hover/disabled
+states and chart series. The example is a starting point, not a full theme
+or an accessibility certification.
+
+## Portals and mounted graphics
+
+Export menus and dialogs stay mounted under `document.body`. Moving them into
+the host container would restore clipping and transformed-parent positioning
+bugs. The library copies only effective `--mcp-ui-*` values and local dark
+state from the menu trigger or the stationary inline expansion slot. It
+updates them while the portal is open and clears stale values when its
+anchor changes. `ModalRenderer` uses a hidden inline anchor. Fullscreen
+content is still moved, not duplicated.
+
+Canvas renderers read computed tokens from their own roots. Ancestor
+class/style/data-attribute changes, token removal and DOM reparenting trigger
+an in-place Chart.js `update('none')` or G6 `setOptions`/`draw`, preserving
+renderer identity and layout/zoom. Explicit dataset, scale, element, tooltip,
+node and edge styles keep precedence. Chart payload objects are shallow-cloned
+before the engine adds its generated colors, allowing one payload in multiple
+independently themed instances.
+Point paint overrides are separate from the line/radar stroke: an explicit
+point outline does not block a host series color on the line itself. Live
+updates also refresh Chart.js's shared point/bar paints without replacing
+their shared option objects or changing non-color settings.
+
+Chart.js tooltips use `surface`, `fg` and `border`; G6 tooltip content reads
+those current tokens when shown. An omitted series token leaves its original
+engine color. Chart.js's default cycle is seven colors, while configured host
+tokens address eight repeating slots. No default palette is installed globally.
+
+Pure stylesheet/CSSOM or media-query changes without a DOM attribute change
+are not observed. When switching such a host theme, also update the host's
+class or a `data-theme` attribute. The supported light/dark strategy remains
+the `.dark` ancestor class.
+
+## Coverage and known accessibility gaps
+
+Migrated: `ChatPrompt`, `UIResourceRenderer` (including table chrome and virtual
+rows), `ScratchpadPanel`, `FormFieldRenderer`, `AutocompleteFormField`,
+`AutocompleteDropdown`, `GhostText`, `ComponentToolbar`, `ExpandableWrapper`,
+`PortalDropdownMenu`, `FormRenderer`, `ActionGroupRenderer`, `ModalRenderer`,
+missing-value/degraded/error surfaces, and Chart.js/G6 chrome and canvas colors.
+
+Not fully migrated: map/Leaflet chrome and external tiles, code highlighting
+themes, `AgentCard`/`AgentHandoff`/`AgentStatusBadge`, standalone artifact,
+carousel, footer, grid/editor, gallery/video and presentation-feedback chrome,
+and other renderers outside the list above. Native OS select popups are outside
+the library's DOM styling. Hosts should remove old overrides only for migrated
+surfaces and retain targeted overrides for these remaining components.
+
+Default colors are preserved even where they miss accessibility targets.
+The frozen Chromium fixture measured these existing gaps:
+
+| Measurement | Light | Dark | Target |
+| --- | ---: | ---: | ---: |
+| Required input / form select / scratchpad select border | 1.47:1 | 1.94:1 | 3:1 |
+| Search / choice control border | 1.24:1 | 1.94:1 | 3:1 |
+| Required input visible 2px focus ring | 3.76:1 | 3.90:1 | 3:1 |
+
+The represented text measurements reached at least 4.52:1; this is not a full
+audit of every field, state or renderer. Supplementary Chart.js 4.5.1 palette
+measurements on white put six of seven opaque default colors, and all seven
+50%-alpha fills, below 3:1. These are palette measurements, not a rendered
+canvas or adjacent-series audit. Changing those defaults would alter existing
+appearance, so hosts must supply their own accessible theme where needed.
+
+See [`tests/theme/README.md`](../tests/theme/README.md) for the exact baseline
+commit, tool versions, measured deficits and limits. The fixture checks actual
+computed styles, not screenshot equality; raster canvas appearance and native
+popup pixels are outside that comparison.
+
+## Release handoff
+
+This is a Solid-only 6.25.0 release. The MCP schema and Spec/CLI versions are
+unchanged. Hosts can upgrade, bind their design tokens, remove the corresponding
+overrides and run their own browser contrast checks. The public release follows
+review/CI, the `v6.25.0` tag, then maintainer approval of the staged npm package.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "6.23.0",
+  "version": "6.25.1",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "files": [
@@ -11,6 +11,8 @@
     "!src/test-setup.ts",
     "README.md",
     "CHANGELOG.md",
+    "docs/THEMING.md",
+    "docs/SECURITY-DEPENDENCIES.md",
     "LICENSE"
   ],
   "sideEffects": [
@@ -229,9 +231,9 @@
     }
   },
   "dependencies": {
-    "@seed-ship/mcp-ui-spec": "^5.6.0",
+    "@seed-ship/mcp-ui-spec": "^5.7.0",
     "@types/dompurify": "^3.0.5",
-    "dompurify": "^3.4.12",
+    "dompurify": "^3.4.17",
     "marked": "^16.3.0",
     "zod": "^3.22.4"
   },
@@ -253,7 +255,7 @@
     "katex": "0.18.4",
     "leaflet.markercluster": "^1.5.3",
     "size-limit": "^12.0.0",
-    "solid-js": "^1.9.11",
+    "solid-js": "^1.9.17",
     "typescript": "^5.3.3",
     "vite": "^6.4.1",
     "vite-plugin-solid": "^2.11.8",
@@ -289,7 +291,7 @@
     "test:watch": "vitest",
     "test:browser": "vitest --mode browser",
     "lint": "eslint src",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.contracts.json",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.contracts.json && tsc --noEmit -p tsconfig.examples.json",
     "clean": "rm -rf dist",
     "size": "size-limit",
     "size:analyze": "size-limit --why"

package/src/components/ActionGroupRenderer.tsx

@@ -62,17 +62,17 @@ const ActionButton: Component<{
   const variantClass = () => {
     switch (props.action.variant) {
       case 'primary':
-        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'
+        return 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]'
       case 'secondary':
-        return 'bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:ring-gray-500'
+        return 'bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-300,#d1d5db))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-600,#4b5563))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'
       case 'outline':
-        return 'border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500'
+        return 'border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'
       case 'ghost':
-        return 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500'
+        return 'text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'
       case 'danger':
-        return 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
+        return 'bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-red-500))]'
       default:
-        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'
+        return 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]'
     }
   }
 

package/src/components/AutocompleteDropdown.tsx

@@ -162,10 +162,10 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
     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))',
     'max-height': props.maxHeight || '240px',
     overflow: 'auto',
     ...positionStyles()
@@ -174,7 +174,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
   return (
     <Show when={props.isOpen}>
       <div
-        class={`mcp-autocomplete-dropdown ${props.class || ''}`}
+        class={`mcp-ui-root mcp-autocomplete-dropdown ${props.class || ''}`}
         style={containerStyles()}
         role="listbox"
         aria-label={strings.autocompleteSuggestions}
@@ -185,7 +185,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
             class="mcp-autocomplete-loading"
             style={{
               padding: '12px 16px',
-              color: '#6b7280',
+              color: 'var(--mcp-ui-fg-muted, #6b7280)',
               'font-size': '0.875rem',
               display: 'flex',
               'align-items': 'center',
@@ -197,8 +197,8 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
                 display: 'inline-block',
                 width: '14px',
                 height: '14px',
-                border: '2px solid #e5e7eb',
-                'border-top-color': '#3b82f6',
+                border: '2px solid var(--mcp-ui-border, #e5e7eb)',
+                'border-top-color': 'var(--mcp-ui-accent, #3b82f6)',
                 'border-radius': '50%',
                 animation: 'mcp-spin 0.6s linear infinite'
               }}
@@ -213,7 +213,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
             class="mcp-autocomplete-empty"
             style={{
               padding: '12px 16px',
-              color: '#9ca3af',
+              color: 'var(--mcp-ui-fg-subtle, #9ca3af)',
               'font-size': '0.875rem',
               'text-align': 'center'
             }}
@@ -242,8 +242,8 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
                     style={{
                       padding: '8px 16px',
                       cursor: isDisabled() ? 'not-allowed' : 'pointer',
-                      'background-color': isSelected() ? '#eff6ff' : 'transparent',
-                      color: isDisabled() ? '#9ca3af' : '#374151',
+                      'background-color': isSelected() ? 'var(--mcp-ui-accent-soft, #eff6ff)' : 'transparent',
+                      color: isDisabled() ? 'var(--mcp-ui-fg-subtle, #9ca3af)' : 'var(--mcp-ui-fg, #374151)',
                       'font-size': '0.875rem',
                       transition: 'background-color 150ms ease'
                     }}
@@ -283,14 +283,14 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
             class="mcp-autocomplete-footer"
             style={{
               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)'
             }}
           >
             <kbd style={{
-              'background-color': '#e5e7eb',
+              'background-color': 'var(--mcp-ui-surface-hover, #e5e7eb)',
               padding: '1px 4px',
               'border-radius': '2px',
               'font-family': 'inherit',
@@ -298,7 +298,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
             }}>↑</kbd>
             {' '}
             <kbd style={{
-              'background-color': '#e5e7eb',
+              'background-color': 'var(--mcp-ui-surface-hover, #e5e7eb)',
               padding: '1px 4px',
               'border-radius': '2px',
               'font-family': 'inherit',
@@ -306,7 +306,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
             }}>↓</kbd>
             {strings.autocompleteHintNavigate}
             <kbd style={{
-              'background-color': '#e5e7eb',
+              'background-color': 'var(--mcp-ui-surface-hover, #e5e7eb)',
               padding: '1px 4px',
               'border-radius': '2px',
               'font-family': 'inherit',
@@ -314,7 +314,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
             }}>Enter</kbd>
             {strings.autocompleteHintSelect}
             <kbd style={{
-              'background-color': '#e5e7eb',
+              'background-color': 'var(--mcp-ui-surface-hover, #e5e7eb)',
               padding: '1px 4px',
               'border-radius': '2px',
               'font-family': 'inherit',