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

package/src/context/MCPUIStringsContext.tsx

@@ -274,6 +274,30 @@ export interface MCPUIStrings {
   /** `aria-label` of the lightbox "next image" button. */
   lightboxNext?: string
 
+  // ── Zoom controls (lightbox, chart) ────────────────────────
+  /**
+   * `aria-label` / `title` of the "zoom in" button.
+   * @since 6.22.0
+   */
+  zoomIn?: string
+  /**
+   * `aria-label` / `title` of the "zoom out" button.
+   * @since 6.22.0
+   */
+  zoomOut?: string
+  /**
+   * `aria-label` / `title` of the "reset zoom" button — the one the chart
+   * toolbar only shows while the chart is actually zoomed.
+   * @since 6.22.0
+   */
+  zoomReset?: string
+  /**
+   * Zoom-level readout next to the zoom buttons.
+   * Template — `{percent}` = the scale as a whole percentage (`100` at rest).
+   * @since 6.22.0
+   */
+  zoomLevel?: string
+
   // ── ModalRenderer ──────────────────────────────────────────
   /** `aria-label` of the modal close button. */
   modalClose?: string
@@ -323,6 +347,13 @@ export interface MCPUIStrings {
   imageViewFullSize?: string
   /** Fallback `title` of an iframe without one. */
   iframeTitle?: string
+  /**
+   * Label of the "open in a new tab" link rendered under an embed
+   * (`IframeRenderer`, `VideoRenderer`). A COEP-blocked iframe fires no
+   * observable event, so this link is the only way out of a blank frame.
+   * @since 6.21.0
+   */
+  iframeOpenInNewTab?: string
   /** Fallback label of a link component without one. */
   linkLabel?: string
   /**
@@ -1085,6 +1116,15 @@ export const DEFAULT_MCPUI_STRINGS: Required<MCPUIStrings> = {
   sizeBytes: '{size} B',
   sizeKilobytes: '{size} KB',
   sizeMegabytes: '{size} MB',
+
+  // ── 6.21.0 — iframe COEP fallback ──────────────────────────
+  iframeOpenInNewTab: 'Open in a new tab',
+
+  // ── 6.22.0 — zoom / pan controls ───────────────────────────
+  zoomIn: 'Zoom in',
+  zoomOut: 'Zoom out',
+  zoomReset: 'Reset zoom',
+  zoomLevel: 'Zoom {percent}%',
 }
 
 /**

package/src/hooks/index.ts

@@ -59,6 +59,19 @@ export type {
   UseAutocompleteReturn,
 } from './useAutocomplete'
 
+// Pan/zoom primitive (v6.22.0). It lives under `src/utils` because it is pure
+// arithmetic plus two signals, but it is reactive and registers an onCleanup,
+// so it is used exactly like a hook — hence this re-export on the `./hooks`
+// subpath as well as on the root barrel.
+export { createPanZoom } from '../utils/pan-zoom'
+export type {
+  PanZoomOptions,
+  PanZoomController,
+  PanZoomState,
+  PanZoomPoint,
+  PanZoomCursor,
+} from '../utils/pan-zoom'
+
 // Data Validator hooks (v3.1.0 — anti-hallucination)
 export { useDataValidator } from './useDataValidator'
 export type {

package/src/index.ts

@@ -128,6 +128,22 @@ export type {
   DuplicateMountReporter,
 } from './utils/duplicate-mount-registry'
 
+// Cursor-anchored zoom + drag-pan primitive (v6.22.0 — lightbox, expanded views)
+export {
+  createPanZoom,
+  clampScale,
+  contentPointAt,
+  viewportPointOf,
+  zoomAtAnchor,
+} from './utils/pan-zoom'
+export type {
+  PanZoomOptions,
+  PanZoomController,
+  PanZoomState,
+  PanZoomPoint,
+  PanZoomCursor,
+} from './utils/pan-zoom'
+
 // Chrome i18n — library's own strings, EN defaults (v6.6.0 — D2/R4)
 export {
   MCPUIStringsProvider,
@@ -142,6 +158,18 @@ export type {
   MCPUIStringsProviderProps,
 } from './context/MCPUIStringsContext'
 
+// Host rendering policy — iframe `credentialless` / COEP (v6.21.0)
+export {
+  MCPUIConfigProvider,
+  MCPUIConfigContext,
+  useMCPUIConfig,
+  DEFAULT_MCPUI_CONFIG,
+} from './context/MCPUIConfigContext'
+export type {
+  MCPUIConfig,
+  MCPUIConfigProviderProps,
+} from './context/MCPUIConfigContext'
+
 // Telemetry sink (B.5 — v5.6.0)
 export {
   MCPUITelemetryProvider,
@@ -331,6 +359,9 @@ export {
   validateLayout,
   validateIframeDomain,
   getIframeSandbox,
+  // v6.21.0 — the trusted-host test behind `getIframeSandbox` and the
+  // `credentialless` iframe attribute.
+  isTrustedIframeDomain,
   DEFAULT_RESOURCE_LIMITS,
   DEFAULT_IFRAME_DOMAINS,
   TRUSTED_IFRAME_DOMAINS,

package/src/services/index.ts

@@ -9,6 +9,7 @@ export {
   validateLayout,
   validateIframeDomain,
   getIframeSandbox,
+  isTrustedIframeDomain,
   DEFAULT_RESOURCE_LIMITS,
   DEFAULT_IFRAME_DOMAINS,
   TRUSTED_IFRAME_DOMAINS,

package/src/services/validation.ts

@@ -689,6 +689,42 @@ export function validateIframeDomain(
   }
 }
 
+/**
+ * Is this URL's host a trusted iframe host?
+ *
+ * A host matches when it equals an entry of `TRUSTED_IFRAME_DOMAINS` (plus
+ * `options.customTrustedDomains`) or is a subdomain of one. Trusted hosts
+ * need their own cookies/storage to authenticate, which is why they receive
+ * `allow-same-origin` in `getIframeSandbox` and deliberately do NOT receive
+ * the `credentialless` iframe attribute (an authenticated embed loaded
+ * without its cookies only shows a login screen).
+ *
+ * An unparsable URL is never trusted.
+ *
+ * @param url - The iframe URL
+ * @param options - Optional custom trusted domains, merged over the defaults
+ * @returns `true` when the URL's host is trusted
+ * @since v6.21.0 — extracted from `getIframeSandbox`, identical matching.
+ */
+export function isTrustedIframeDomain(
+  url: string,
+  options?: { customTrustedDomains?: string[] }
+): boolean {
+  try {
+    const domain = new URL(url).hostname;
+    const trustedList = options?.customTrustedDomains
+      ? [...TRUSTED_IFRAME_DOMAINS, ...options.customTrustedDomains]
+      : TRUSTED_IFRAME_DOMAINS;
+
+    return trustedList.some(
+      (trusted) => domain === trusted || domain.endsWith(`.${trusted}`)
+    );
+  } catch {
+    // Invalid URL — never trusted.
+    return false;
+  }
+}
+
 /**
  * Get the appropriate sandbox attribute for an iframe URL.
  *
@@ -707,22 +743,8 @@ export function getIframeSandbox(
 ): string {
   const baseSandbox = 'allow-scripts allow-popups';
 
-  try {
-    const domain = new URL(url).hostname;
-    let trustedList = TRUSTED_IFRAME_DOMAINS;
-    if (options?.customTrustedDomains) {
-      trustedList = [...TRUSTED_IFRAME_DOMAINS, ...options.customTrustedDomains];
-    }
-
-    const isTrusted = trustedList.some(
-      (trusted) => domain === trusted || domain.endsWith(`.${trusted}`)
-    );
-
-    if (isTrusted) {
-      return `${baseSandbox} allow-same-origin allow-forms`;
-    }
-  } catch {
-    // Invalid URL — use restrictive sandbox
+  if (isTrustedIframeDomain(url, options)) {
+    return `${baseSandbox} allow-same-origin allow-forms`;
   }
 
   return baseSandbox;

package/src/solid-jsx-attrs.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Solid JSX augmentation — `attr:credentialless` (v6.21.0).
+ *
+ * `credentialless` is listed in dom-expressions' `Properties` set, so the
+ * plain `credentialless={…}` form compiles to a JS property assignment
+ * (`el.credentialless = v`) and never reaches the DOM as an attribute in an
+ * engine that does not reflect it (jsdom, and any pre-110 browser). The
+ * `attr:` namespace forces `setAttribute` / `ssrAttribute` instead.
+ *
+ * Solid types `attr:*` only for keys declared in `JSX.ExplicitAttributes`,
+ * which ships empty — hence this augmentation. The value type is
+ * `true | undefined` on purpose: `undefined` removes the attribute, so the
+ * boolean attribute is never emitted as `credentialless="false"`.
+ */
+
+import 'solid-js'
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface ExplicitAttributes {
+      credentialless: true | undefined
+    }
+  }
+}

package/src/utils/iframe-coep.ts

@@ -0,0 +1,81 @@
+/**
+ * COEP helpers for the two iframes the library renders
+ * (`IframeRenderer` in `UIResourceRenderer.tsx`, and the YouTube / Vimeo
+ * embed in `VideoRenderer.tsx`).
+ *
+ * @since v6.21.0
+ *
+ * A host that serves `Cross-Origin-Embedder-Policy: credentialless` makes the
+ * browser refuse any cross-origin iframe whose own document sends no COEP
+ * header. The HTML attribute `credentialless` on the `<iframe>` lifts that,
+ * at the price of the embedded document losing access to the cookies and
+ * storage of its own origin — see `MCPUIConfigContext` for the policy.
+ */
+
+import { createSignal, onMount, type Accessor } from 'solid-js'
+import { isTrustedIframeDomain } from '../services/validation'
+import type { MCPUIConfig } from '../context/MCPUIConfigContext'
+
+/**
+ * Does this iframe get the boolean `credentialless` attribute?
+ *
+ * `'auto'` (the default) says yes only when the embed has nothing to lose:
+ * the host is not trusted AND the iframe already runs without cookies because
+ * its `sandbox` has no `allow-same-origin` (`sandboxedWithoutSameOrigin`).
+ * The video embed carries no sandbox, so in `'auto'` it keeps its provider
+ * cookies and a COEP host must opt in with `'always'`.
+ *
+ * An unparsable URL is not trusted, so it gets the attribute.
+ *
+ * Takes a RESOLVED config (`Required<MCPUIConfig>` — what `useMCPUIConfig()`
+ * and `DEFAULT_MCPUI_CONFIG` hand out). `MCPUIConfig`'s own fields are
+ * optional so new keys stay backward compatible, and reading an unresolved
+ * one here would silently re-implement the defaults next to their source.
+ */
+export function shouldSetCredentialless(
+  url: string,
+  config: Required<MCPUIConfig>,
+  options: { sandboxedWithoutSameOrigin: boolean }
+): boolean {
+  const mode = config.iframeCredentialless
+  if (mode === 'always') return true
+  if (mode === 'never') return false
+  if (!options.sandboxedWithoutSameOrigin) return false
+  return !isTrustedIframeDomain(url, {
+    customTrustedDomains: config.customTrustedIframeDomains,
+  })
+}
+
+/**
+ * `window.crossOriginIsolated`, read **after mount** into a signal.
+ *
+ * Reading it during render would make the server emit markup the client
+ * cannot reproduce; the signal starts at `false` (the SSR value) and flips
+ * once mounted, so hydration always matches.
+ */
+export function createCrossOriginIsolated(): Accessor<boolean> {
+  const [isolated, setIsolated] = createSignal(false)
+  onMount(() => {
+    setIsolated(typeof window !== 'undefined' && window.crossOriginIsolated === true)
+  })
+  return isolated
+}
+
+/**
+ * Does the "open in a new tab" link show under an embed?
+ *
+ * `'auto'` shows it only on a cross-origin-isolated page — exactly where COEP
+ * can block the frame, and where the blocking is silent (a refused
+ * cross-origin document fires no `error` event the parent can observe).
+ *
+ * Takes a resolved config, for the reason given on `shouldSetCredentialless`.
+ */
+export function shouldShowIframeFallbackLink(
+  config: Required<MCPUIConfig>,
+  crossOriginIsolated: boolean
+): boolean {
+  const mode = config.iframeFallbackLink
+  if (mode === 'always') return true
+  if (mode === 'never') return false
+  return crossOriginIsolated
+}