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

package/CHANGELOG.md

@@ -5,6 +5,229 @@ 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.22.0] - 2026-09-18
+
+Wheel zoom and drag pan on the surfaces that could not be read when the content
+was dense: the image lightbox, and Chart.js charts in their expanded view.
+
+### The rule this follows
+
+**Wheel zoom is only ever enabled on a surface that owns its viewport** — a
+fullscreen overlay or the expanded modal. A component sitting inline in a
+scrolling page must not swallow the wheel, or a user scrolling the page finds
+themselves zooming a chart instead. That is why chart zoom defaults to the
+expanded view only, and why inline zoom is opt-in.
+
+### Added
+
+- **`createPanZoom(options)`** (`src/utils/pan-zoom.ts`, exported from the root
+  and from the `./hooks` subpath) — a dependency-free cursor-anchored zoom and
+  drag-pan primitive: the point under the pointer stays under the pointer.
+  Handles two-finger pinch, clamps to `min`/`max`, and exposes
+  `cancelGesture()` for the case where the surface carrying the handlers is
+  torn down while a pointer is still down. The pure helpers behind it
+  (`clampScale`, `contentPointAt`, `viewportPointOf`, `zoomAtAnchor`) are
+  exported too.
+- **`LightboxOverlay` zooms.** Wheel, drag to pan, double-click to toggle,
+  pinch on touch, and the keyboard shortcuts `+` / `-` / `0` alongside the
+  existing Escape and arrows. Zoom controls carry a level readout, and the zoom
+  resets when the displayed image changes.
+- **Chart.js zoom and pan**, through `chartjs-plugin-zoom` as a new **optional**
+  peer dependency. Absent, charts render exactly as before — no warning, no
+  broken UI. A reset button appears in the toolbar only while the chart is
+  actually zoomed. A chart's own `options.plugins.zoom` is preserved: the
+  renderer's block is deep-merged into it, the caller's explicit values win
+  (`limits`, wheel `speed`, a pan `modifierKey`, `mode`), and a caller's
+  `onZoom` / `onPan` is *composed* with the renderer's rather than replacing
+  it, so the reset control stays in sync with the viewport either way. A key
+  the caller left `undefined` is read as an omission, not as an erasure. And
+  `options.plugins.zoom: false` — Chart.js's documented per-chart plugin
+  opt-out — beats `chartZoom`: the plugin is never downloaded and the toolbar
+  offers no controls.
+- **`MCPUIConfig.chartZoom`**: `'expanded'` (default), `'always'` or `'never'`.
+- Four string keys: `zoomIn`, `zoomOut`, `zoomReset`, `zoomLevel`
+  (`'Zoom {percent}%'`). Chrome key count 271 → 275.
+
+### Changed
+
+- **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 —
+  and while the fields were required, each addition broke the build of anyone
+  holding a *complete* config: a typed constant, a helper returning one, or a
+  direct `<MCPUIConfigContext.Provider value={…}>`. Nothing about their
+  behaviour had changed; only `tsc` failed. Adding a key is additive now.
+
+  The completeness guarantee moved onto the values: `DEFAULT_MCPUI_CONFIG` is
+  typed `Required<MCPUIConfig>` (a new key without a default is a compile error
+  in the library), and `useMCPUIConfig()` returns `Required<MCPUIConfig>`, so
+  every renderer still reads a fully resolved policy and never null-checks one.
+  `MCPUIConfigContext` itself stays typed `MCPUIConfig`, which makes providing
+  it directly *more* permissive than before. Backward compatible in both
+  directions: a consumer already passing a field still type-checks.
+
+### Fixed
+
+- **`ExpandableWrapper` no longer closes on a drag released over its backdrop.**
+  When a press and its release have different targets the browser dispatches
+  `click` on their nearest common ancestor — the backdrop — so panning a zoomed
+  chart, or selecting text in an expanded table, and releasing over the 16px
+  margin around the panel tore the modal down mid-gesture. The close now
+  requires the gesture to have *begun* on the backdrop. This was reachable
+  before this release for any drag inside an expanded view; chart panning just
+  made it easy to hit.
+
+### Not affected
+
+Maps and graphs already zoomed: `MapRenderer` enables Leaflet's
+`scrollWheelZoom` and `GraphRenderer` registers G6's `zoom-canvas` /
+`drag-canvas`. Iframes (including a diagram served from `mermaid.ink`) are
+cross-origin documents and cannot be transformed by the host at all.
+
+## [6.21.0] - 2026-09-17
+
+The library's iframes now work on a host that serves
+`Cross-Origin-Embedder-Policy: credentialless`.
+
+### The problem
+
+Under that header a browser refuses **any** cross-origin iframe whose own
+document does not itself send a COEP header. That is YouTube, Vimeo, Google
+Docs, Notion — nearly every entry of `DEFAULT_IFRAME_DOMAINS`. The frame stays
+blank and nothing in the page can detect it: a refused cross-origin document
+fires no `error` event the parent can observe. The `credentialless` *header*
+only relaxes the rule for sub-resources (images, fonts, map tiles — which is
+why the quickchart `<img>` fallback and the Leaflet tiles were never
+affected); nested documents need the boolean HTML attribute
+`<iframe credentialless>` on the tag itself.
+
+### What the library now does
+
+Both iframes it renders — `IframeRenderer` (the `iframe` component) and
+`VideoRenderer`'s YouTube / Vimeo embed — can carry `credentialless` when their
+host is **not** in `TRUSTED_IFRAME_DOMAINS`.
+
+- **The `iframe` component on an untrusted host gets it by default.** Those
+  frames already ran without cookies, since their sandbox has no
+  `allow-same-origin`. The attribute costs them nothing and is exactly what
+  unblocks them under COEP.
+- **The video embed does NOT get it by default.** It carries no sandbox, so a
+  YouTube or Vimeo frame really does hold provider cookies (consent, playback
+  state, sign-in). Taking them away on every host — including the majority
+  that send no COEP header — would be a silent regression, so `'auto'` leaves
+  it alone and a COEP host opts in with `iframeCredentialless: 'always'`.
+- **Trusted hosts deliberately do NOT get it.** `TRUSTED_IFRAME_DOMAINS`
+  (Google Docs/Drive, Notion, Airtable, Figma, Linear, Stripe, Polar, HubSpot,
+  Calendly, …) exists precisely because those embeds need their own cookies to
+  authenticate. Loaded `credentialless` they would render a login screen — a
+  visibly broken embed. Under COEP they stay blocked, which is the honest
+  outcome; `iframeCredentialless: 'always'` overrides it if you disagree.
+
+The attribute is a **boolean** attribute: it is absent from the DOM when it
+does not apply, never `credentialless="false"`.
+
+### Added
+
+- **`<MCPUIConfigProvider>` / `useMCPUIConfig()` / `DEFAULT_MCPUI_CONFIG` /
+  `MCPUIConfig`** (new `src/context/MCPUIConfigContext.tsx`, exported from the
+  root barrel) — host-level rendering policy, the behavioural counterpart of
+  `MCPUIStrings`. Three options:
+
+  | option | default | meaning |
+  | --- | --- | --- |
+  | `iframeCredentialless` | `'auto'` | `'auto'`: attribute on the `iframe` component when its host is not trusted (those frames already run without cookies); the video embed, which has no sandbox, is left alone. `'always'`: every iframe, video and trusted hosts included. `'never'`: none. |
+  | `customTrustedIframeDomains` | `[]` | extra hosts treated as trusted — no `credentialless`, and `allow-same-origin` in the sandbox. Subdomains match. Reclassification only: the allow-list must already accept the host. |
+  | `iframePolicy` | `'strict'` | how an `iframe` component's host is validated; `'extend'` also accepts `customIframeDomains`. |
+  | `customIframeDomains` | `[]` | extra hosts the allow-list accepts under `iframePolicy: 'extend'`. Without this, an unlisted host never reaches a renderer. |
+  | `iframeFallbackLink` | `'auto'` | when the "open in a new tab" link shows under an embed. `'auto'`: only on a cross-origin-isolated page. |
+
+  ```tsx
+  import { MCPUIConfigProvider } from '@seed-ship/mcp-ui-solid'
+
+  // A host that serves COEP: credentialless and embeds its own tool.
+  <MCPUIConfigProvider
+    config={{
+      iframeCredentialless: 'always',
+      iframePolicy: 'extend',
+      customIframeDomains: ['embed.acme.com'],
+      customTrustedIframeDomains: ['embed.acme.com'],
+      iframeFallbackLink: 'auto',
+    }}
+  >
+    <App />
+  </MCPUIConfigProvider>
+
+  // A host with no COEP header that does not want its embeds to lose cookies.
+  <MCPUIConfigProvider config={{ iframeCredentialless: 'never' }}>
+    <App />
+  </MCPUIConfigProvider>
+  ```
+
+  With no provider mounted, `DEFAULT_MCPUI_CONFIG` applies — every renderer
+  still works standalone.
+
+- **`isTrustedIframeDomain(url, { customTrustedDomains? })`** — the trusted-host
+  test `getIframeSandbox` already performed, extracted and exported from the
+  root barrel and from the `@seed-ship/mcp-ui-solid/validation` subpath
+  (`getIframeSandbox` is now exported from that subpath too). Invalid URL →
+  `false`, so an unparsable URL is never trusted and does receive the
+  attribute. Matching is unchanged: exact host, or a subdomain of a listed
+  host.
+
+- **`MCPUIStrings.iframeOpenInNewTab`** — optional, default
+  `'Open in a new tab'`. Label of the link rendered under an embed, which is
+  the only way out of a silently blocked frame. Visibility follows
+  `iframeFallbackLink`; `window.crossOriginIsolated` is read **after mount**,
+  never during render, so SSR markup and hydration agree. That flag requires
+  COOP `same-origin` on top of COEP — a host that sends COEP alone should set
+  `iframeFallbackLink: 'always'`, since its embeds are blocked while the flag
+  reads false. The link is skipped
+  when `safeUrl()` rejects the URL. `MCPUIStrings` now covers **271 keys**.
+
+### Fixed
+
+- `IframeRenderer` called `getIframeSandbox(params.url)` with no options, so a
+  host's custom trusted domains never reached the sandbox. It now passes
+  `{ customTrustedDomains: config.customTrustedIframeDomains }`, which is what
+  makes `customTrustedIframeDomains` grant `allow-same-origin` as documented.
+
+### Browser support
+
+| | header `COEP: credentialless` | attribute `<iframe credentialless>` |
+| --- | --- | --- |
+| Chrome / Edge | 96+ | **110+** |
+| Firefox | 119+ | **not supported** |
+| Safari | not supported (value ignored) | not supported |
+
+- **Chrome / Edge** — the attribute fixes the problem. This is the majority
+  case.
+- **Firefox** — honours the header but ignores the attribute, so third-party
+  iframes stay blocked for as long as the host page sends COEP. Nothing in
+  this library can change that; it is a host-side trade-off (drop COEP, or
+  accept the degradation on Firefox). The fallback link is what the user gets
+  there.
+- **Safari** — does not know the `credentialless` value and treats the header
+  as absent: no cross-origin isolation, but embeds work.
+
+### Note for hosts
+
+The library's allow-list is not a substitute for your CSP. The browser also
+enforces `frame-src`, which the host sets — a domain missing from it stays
+blocked whatever this library emits (see the comment at
+`services/validation.ts` on `DEFAULT_IFRAME_DOMAINS`: "Must match CSP
+frame-src directive").
+
+### Tests
+
+`src/components/IframeCredentialless.test.tsx` (25 tests) — the
+`isTrustedIframeDomain` matching table, attribute presence/absence through
+`<UIResourceRenderer>` and `<VideoRenderer>` for each `iframeCredentialless`
+mode, the `customTrustedIframeDomains` → sandbox plumbing, the fallback link
+under each `iframeFallbackLink` mode with `window.crossOriginIsolated`
+stubbed, and the SSR-shape assertions on the pure decision helpers. Plus a new
+`iframeOpenInNewTab` case in `MCPUIStringsContext.sweep.test.tsx` and the
+default pinned in `mcpui-strings-defaults.test.ts`.
+
 ## [6.20.0] - 2026-09-17
 
 Every user-visible chrome string the library itself renders — button titles,

package/README.md

@@ -5,6 +5,25 @@ 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.21.0
+
+- **Iframes work under `Cross-Origin-Embedder-Policy: credentialless`.** Both
+  iframes the library renders — the `iframe` component and `VideoRenderer`'s
+  YouTube / Vimeo embed — now carry the boolean `credentialless` attribute
+  when their host is **not** in `TRUSTED_IFRAME_DOMAINS`. Trusted hosts
+  deliberately do not get it (a cookie-less authenticated embed shows a login
+  screen). Chrome / Edge 110+ honour the attribute; Firefox ignores it; Safari
+  ignores the COEP value entirely — see
+  [*Iframes under COEP*](#iframes-under-coep--mcpuiconfigprovider-v6210).
+- **New `<MCPUIConfigProvider>`** (`MCPUIConfig`, `useMCPUIConfig`,
+  `DEFAULT_MCPUI_CONFIG`) — host-level rendering policy:
+  `iframeCredentialless`, `customTrustedIframeDomains`, `iframeFallbackLink`.
+- **New `isTrustedIframeDomain()`** export (root barrel and `/validation`),
+  and a new `iframeOpenInNewTab` chrome string for the "open in a new tab"
+  link rendered under an embed that COEP may have blocked silently.
+- **Fixed**: `IframeRenderer` called `getIframeSandbox()` without options, so
+  a host's custom trusted domains never reached the sandbox.
+
 ## What's New in v6.20.0
 
 - **Complete i18n of the library chrome.** Every user-visible chrome string —
@@ -951,7 +970,7 @@ const { state, pinned, close } = useScratchpadState()
 | `modal` | Portal overlay, sizes sm-full, Escape/backdrop close |
 | `image-gallery` | Grid layout, lightbox, keyboard nav |
 | `video` | YouTube/Vimeo/direct URL |
-| `iframe` | Tiered sandbox, 80+ whitelisted domains |
+| `iframe` | Tiered sandbox, 80+ whitelisted domains, COEP `credentialless` (v6.21.0) |
 | `image` | Responsive with lazy loading |
 | `link` | Styled link cards |
 | `action` | Tool call buttons |
@@ -961,6 +980,99 @@ const { state, pinned, close } = useScratchpadState()
 | `artifact` | File download/preview |
 | `footer` | Metadata display |
 
+## Iframes under COEP — `MCPUIConfigProvider` (v6.21.0)
+
+The library renders exactly two iframes: the `iframe` component
+(`IframeRenderer`) and `VideoRenderer`'s YouTube / Vimeo embed. Both are
+constrained by `DEFAULT_IFRAME_DOMAINS` (the allow-list) and
+`getIframeSandbox()` (the tiered sandbox — `allow-same-origin allow-forms`
+for `TRUSTED_IFRAME_DOMAINS`, `allow-scripts allow-popups` for everything
+else).
+
+A host that serves `Cross-Origin-Embedder-Policy: credentialless` adds a
+third constraint: the browser refuses any cross-origin iframe whose own
+document sends no COEP header — which is YouTube, Vimeo, Google Docs, Notion
+and most of the allow-list. The frame stays blank, and the page cannot even
+detect it (a refused cross-origin document fires no `error` event). The fix
+is the boolean HTML attribute `<iframe credentialless>`.
+
+By default (`'auto'`) the library sets it only where nothing is lost: the
+`iframe` component pointing at a **non-trusted** host, whose sandbox already
+has no `allow-same-origin` and therefore no cookies or storage. Two cases are
+left alone on purpose:
+
+- **Trusted hosts** are in that list because they need their own cookies to
+  authenticate, and a cookie-less authenticated embed only renders a login
+  screen — a clear block beats a broken frame.
+- **The video embed** carries no sandbox, so a YouTube or Vimeo frame really
+  does hold provider cookies (consent, playback state). A host under COEP
+  unblocks it with `iframeCredentialless: 'always'`, accepting that trade;
+  a host without COEP keeps 6.20.0 behaviour and changes nothing.
+
+`<MCPUIConfigProvider>` is where a host overrides all of this. It is the
+behavioural counterpart of `<MCPUIStringsProvider>`: context-based, entirely
+optional, and `DEFAULT_MCPUI_CONFIG` applies when it is absent.
+
+```tsx
+import { MCPUIConfigProvider } from '@seed-ship/mcp-ui-solid'
+
+<MCPUIConfigProvider
+  config={{
+    iframeCredentialless: 'always',            // also unblocks the video embed
+    iframePolicy: 'extend',                    // accept hosts outside the allow-list
+    customIframeDomains: ['embed.acme.com'],   // …these ones
+    customTrustedIframeDomains: ['embed.acme.com'], // …and treat them as trusted
+    iframeFallbackLink: 'auto',                // default
+  }}
+>
+  <App />
+</MCPUIConfigProvider>
+```
+
+| 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. |
+| `customTrustedIframeDomains` | `string[]` | `[]` | Hosts treated as trusted on top of `TRUSTED_IFRAME_DOMAINS`: no `credentialless`, and `allow-same-origin` in the sandbox. Subdomains of a listed host match. This only reclassifies a host the allow-list already accepts — pair it with `customIframeDomains` for anything else. |
+| `iframePolicy` | `'strict'` \| `'extend'` \| `'allow-all'` | `'strict'` | How `UIResourceRenderer` validates an `iframe` component's host. `'strict'` accepts `DEFAULT_IFRAME_DOMAINS` only; a host outside it is replaced by the validation card before any renderer runs. |
+| `customIframeDomains` | `string[]` | `[]` | Extra hosts the allow-list accepts when `iframePolicy` is `'extend'`. |
+| `iframeFallbackLink` | `'auto'` \| `'always'` \| `'never'` | `'auto'` | Whether an "open in a new tab" link (`strings.iframeOpenInNewTab`) shows under the embed. `'auto'` shows it only when the page is cross-origin isolated. `window.crossOriginIsolated` is read **after mount**, so SSR markup and hydration match. Note that flag needs COOP `same-origin` **and** COEP: a host that sends COEP alone blocks embeds while the flag is false, so it should set `'always'`. |
+
+The attribute is a boolean attribute: absent from the DOM when it does not
+apply, never `credentialless="false"`.
+
+Like `<MCPUIStringsProvider>`, a nested `<MCPUIConfigProvider>` merges over the
+defaults, not over an outer provider: repeat the options you want to keep.
+
+`isTrustedIframeDomain(url, { customTrustedDomains? })` is exported (root
+barrel and the `/validation` subpath) if you need the same decision outside
+the renderers.
+
+### Browser support
+
+| | header `COEP: credentialless` | attribute `<iframe credentialless>` |
+| --- | --- | --- |
+| Chrome / Edge | 96+ | **110+** |
+| Firefox | 119+ | **not supported** |
+| Safari | not supported (value ignored) | not supported |
+
+Firefox applies the header but ignores the attribute, so third-party iframes
+stay blocked there while the host sends COEP — nothing in this library can
+change that, and the fallback link is what the user gets. Safari does not
+know the value, treats the header as absent, and embeds simply work.
+
+### The CSP is still yours
+
+The allow-list is not a substitute for your Content-Security-Policy. The
+browser enforces `frame-src`, which the **host** sets, and a domain missing
+from it stays blocked whatever this library emits:
+
+```
+Content-Security-Policy: frame-src https://www.youtube-nocookie.com https://player.vimeo.com …
+```
+
+The comment on `DEFAULT_IFRAME_DOMAINS` in `services/validation.ts` says the
+same thing: *"Must match CSP frame-src directive."*
+
 ## SSR Compatibility
 
 The published `dist/` is a DOM (client) Solid build — importing it directly
@@ -1153,6 +1265,7 @@ formatMCPUIString('Export CSV ({count} rows)', { count: 42 }) // 'Export CSV (42
 | `imageAlt` | `Image` | `UIResourceRenderer` (image) — fallback `alt` text |
 | `imageViewFullSize` | `View full size: {alt}` | `UIResourceRenderer` (image) — zoom-link `aria-label`. Template: `{alt}` |
 | `iframeTitle` | `Embedded content` | `UIResourceRenderer` (iframe) — fallback `title` |
+| `iframeOpenInNewTab` | `Open in a new tab` | `IframeRenderer` / `VideoRenderer` — label of the COEP fallback link under an embed (v6.21.0) |
 | `linkLabel` | `Link` | `UIResourceRenderer` (link) — fallback visible label |
 | `linkOpensInNewTab` | `{label}: {description} (opens in new tab)` | `UIResourceRenderer` (link) — `aria-label`. Template: `{label}`, `{description}` |
 | `validationWarning` | `Component validation warning` | `UIResourceRenderer` — inline component-validation warning chip `aria-label` |
@@ -1484,6 +1597,7 @@ const fr: MCPUIStrings = {
   imageAlt: 'Image',
   imageViewFullSize: 'Voir en taille réelle : {alt}',
   iframeTitle: 'Contenu intégré',
+  iframeOpenInNewTab: 'Ouvrir dans un nouvel onglet',
   linkLabel: 'Lien',
   linkOpensInNewTab: '{label} : {description} (ouvre un nouvel onglet)',
   validationWarning: 'Avertissement de validation du composant',
@@ -1781,6 +1895,7 @@ import {
   GraphRenderer, isG6Available, graphToMermaid, graphToJSON,
   renderCellValue, // v5.7.0 — citation-chip-aware table cell renderer
   MCPUIStringsProvider, useMCPUIStrings, DEFAULT_MCPUI_STRINGS, // v6.6.0 i18n chrome
+  MCPUIConfigProvider, useMCPUIConfig, DEFAULT_MCPUI_CONFIG, // v6.21.0 host policy
 } from '@seed-ship/mcp-ui-solid'
 
 // Hooks
@@ -1808,7 +1923,8 @@ import {
 // Validation + Security
 import {
   validateComponent, validateLayout, validateIframeDomain,
-  getIframeSandbox, DEFAULT_RESOURCE_LIMITS,
+  getIframeSandbox, isTrustedIframeDomain, // v6.21.0 — trusted-host test
+  DEFAULT_RESOURCE_LIMITS,
   DEFAULT_IFRAME_DOMAINS, TRUSTED_IFRAME_DOMAINS,
   ComponentRegistry, mergeScratchpadSections,
   validateAgainstSource, // v4.0.0 — anti-hallucination
@@ -1849,7 +1965,8 @@ import type {
   MapPopupConfig, MapLayer, MapPMTilesConfig,
   IframePolicy, ValidationOptions,
   CitationCtx, CitationEntry, DuplicateMountInfo, DuplicateMountReporter,
-  MCPUIStrings, TelemetryEvent, TelemetrySink, TelemetryOptions, TelemetryDispatcher,
+  MCPUIStrings, MCPUIConfig, // v6.21.0
+  TelemetryEvent, TelemetrySink, TelemetryOptions, TelemetryDispatcher,
   DataValidation, HallucinatedNumber, DataValidationOptions,
   VerifiedTextContent, DataPreviewContent, MapSectionContent,
   ChatBus, ChatEvents, ChatCommands, ScratchpadState, ScratchpadSection,