@seed-ship/mcp-ui-solid 6.19.1 → 6.21.0

package/dist/components/VideoRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRenderer.cjs","sources":["../../src/components/VideoRenderer.tsx"],"sourcesContent":["/**\n * VideoRenderer - Video embed component\n * Sprint 5: Media Components\n *\n * Supports YouTube, Vimeo, and direct video files\n */\n\nimport { Component, createMemo, Show } from 'solid-js'\nimport type { UIComponent, VideoComponentParams } from '../types'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\n\nexport interface VideoRendererProps {\n  /**\n   * UIComponent containing video params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct video params (alternative to component)\n   */\n  params?: VideoComponentParams\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n\n  /**\n   * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).\n   * @see ExpandableWrapperProps.toolbarVariant\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * Video provider type\n */\ntype VideoProvider = 'youtube' | 'vimeo' | 'direct'\n\n/**\n * Parsed video info\n */\ninterface VideoInfo {\n  provider: VideoProvider\n  videoId?: string\n}\n\n/**\n * Extract video ID and provider from URL\n */\nfunction parseVideoUrl(url: string): VideoInfo {\n  // YouTube patterns:\n  // - youtube.com/watch?v=VIDEO_ID\n  // - youtube.com/embed/VIDEO_ID\n  // - youtube.com/v/VIDEO_ID\n  // - youtu.be/VIDEO_ID\n  const youtubeMatch = url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/|v\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/\n  )\n  if (youtubeMatch) {\n    return { provider: 'youtube', videoId: youtubeMatch[1] }\n  }\n\n  // Vimeo patterns:\n  // - vimeo.com/VIDEO_ID\n  // - player.vimeo.com/video/VIDEO_ID\n  const vimeoMatch = url.match(/(?:vimeo\\.com\\/|player\\.vimeo\\.com\\/video\\/)(\\d+)/)\n  if (vimeoMatch) {\n    return { provider: 'vimeo', videoId: vimeoMatch[1] }\n  }\n\n  // Direct video file\n  return { provider: 'direct' }\n}\n\nexport const VideoRenderer: Component<VideoRendererProps> = (props) => {\n  const params = () => props.params || (props.component?.params as VideoComponentParams)\n  const isExpanded = useExpanded()\n\n  const videoInfo = createMemo(() => parseVideoUrl(params()?.url || ''))\n\n  const embedUrl = createMemo(() => {\n    const info = videoInfo()\n    const p = params()\n\n    if (!p?.url) return null\n\n    switch (info.provider) {\n      case 'youtube': {\n        const ytParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          controls: p.controls !== false ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          mute: p.muted ? '1' : '0',\n        })\n        if (p.startTime) {\n          ytParams.set('start', String(p.startTime))\n        }\n        // Use youtube-nocookie.com for privacy\n        return `https://www.youtube-nocookie.com/embed/${info.videoId}?${ytParams}`\n      }\n\n      case 'vimeo': {\n        const vParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          muted: p.muted ? '1' : '0',\n        })\n        return `https://player.vimeo.com/video/${info.videoId}?${vParams}`\n      }\n\n      default:\n        return null\n    }\n  })\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '4:3':\n        return 'aspect-[4/3]'\n      case '21:9':\n        return 'aspect-[21/9]'\n      default:\n        return 'aspect-video' // 16:9\n    }\n  }\n\n  const handleVideoError = (e: Event) => {\n    const error = new Error('Video failed to load')\n    console.error('Video error:', e)\n    props.onError?.(error)\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || 'Video'}\n      copyData={params()?.url || ''}\n      copyLabel=\"Copy video URL\"\n      toolbarVariant={props.toolbarVariant}\n    >\n    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${\n      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''\n    }`}>\n      {/* Title */}\n      <Show when={params()?.title}>\n        <div class=\"px-4 py-3 border-b border-gray-200 dark:border-gray-700\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Video Container — when expanded, fill remaining space (override aspect ratio) */}\n      <div class={`relative bg-black ${isExpanded() ? 'flex-1 min-h-0' : aspectClass()}`}>\n        <Show\n          when={embedUrl()}\n          fallback={\n            // Direct video file\n            <video\n              src={params()?.url}\n              poster={params()?.poster}\n              autoplay={params()?.autoplay}\n              controls={params()?.controls !== false}\n              loop={params()?.loop}\n              muted={params()?.muted}\n              playsinline\n              class=\"absolute inset-0 w-full h-full object-contain\"\n              onError={handleVideoError}\n            >\n              <track kind=\"captions\" />\n              Your browser does not support the video tag.\n            </video>\n          }\n        >\n          {/* YouTube/Vimeo embed */}\n          <iframe\n            src={embedUrl()!}\n            title={params()?.title || 'Video'}\n            class=\"absolute inset-0 w-full h-full\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen\n            loading=\"lazy\"\n          />\n        </Show>\n      </div>\n\n      {/* Caption */}\n      <Show when={params()?.caption}>\n        <div class=\"px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">{params()!.caption}</p>\n        </div>\n      </Show>\n    </div>\n    </ExpandableWrapper>\n  )\n}\n\n/**\n * Check if a URL is from a supported video provider\n */\nexport function isSupportedVideoUrl(url: string): boolean {\n  const info = parseVideoUrl(url)\n  return info.provider !== 'direct' || url.match(/\\.(mp4|webm|ogg|mov)$/i) !== null\n}\n\n/**\n * Get video provider from URL\n */\nexport function getVideoProvider(url: string): VideoProvider {\n  return parseVideoUrl(url).provider\n}\n"],"names":["parseVideoUrl","url","youtubeMatch","match","provider","videoId","vimeoMatch","VideoRenderer","props","params","component","isExpanded","useExpanded","videoInfo","createMemo","embedUrl","info","p","ytParams","URLSearchParams","autoplay","controls","loop","mute","muted","startTime","set","String","vParams","aspectClass","aspectRatio","handleVideoError","e","error","Error","console","onError","_$createComponent","ExpandableWrapper","title","copyData","copyLabel","toolbarVariant","children","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$4","_el$0","_el$1","_co$2","_$insert","Show","when","_el$2","_tmpl$","_el$3","fallback","_el$10","_tmpl$5","addEventListener","_$effect","_p$","_v$5","_v$6","poster","_v$7","_v$8","_v$9","_v$0","_$setAttribute","t","a","_$setProperty","o","i","n","undefined","_el$5","_tmpl$2","_v$","_v$2","caption","_el$6","_tmpl$3","_el$7","_v$3","_v$4","_$className","isSupportedVideoUrl","getVideoProvider"],"mappings":"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"}
+{"version":3,"file":"VideoRenderer.cjs","sources":["../../src/components/VideoRenderer.tsx"],"sourcesContent":["/**\n * VideoRenderer - Video embed component\n * Sprint 5: Media Components\n *\n * Supports YouTube, Vimeo, and direct video files\n */\n\nimport { Component, createMemo, Show } from 'solid-js'\nimport type { UIComponent, VideoComponentParams } from '../types'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\nimport { useMCPUIConfig } from '../context/MCPUIConfigContext'\nimport { shouldSetCredentialless } from '../utils/iframe-coep'\nimport { IframeFallbackLink } from './IframeFallbackLink'\n\nexport interface VideoRendererProps {\n  /**\n   * UIComponent containing video params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct video params (alternative to component)\n   */\n  params?: VideoComponentParams\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n\n  /**\n   * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).\n   * @see ExpandableWrapperProps.toolbarVariant\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * Video provider type\n */\ntype VideoProvider = 'youtube' | 'vimeo' | 'direct'\n\n/**\n * Parsed video info\n */\ninterface VideoInfo {\n  provider: VideoProvider\n  videoId?: string\n}\n\n/**\n * Extract video ID and provider from URL\n */\nfunction parseVideoUrl(url: string): VideoInfo {\n  // YouTube patterns:\n  // - youtube.com/watch?v=VIDEO_ID\n  // - youtube.com/embed/VIDEO_ID\n  // - youtube.com/v/VIDEO_ID\n  // - youtu.be/VIDEO_ID\n  const youtubeMatch = url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/|v\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/\n  )\n  if (youtubeMatch) {\n    return { provider: 'youtube', videoId: youtubeMatch[1] }\n  }\n\n  // Vimeo patterns:\n  // - vimeo.com/VIDEO_ID\n  // - player.vimeo.com/video/VIDEO_ID\n  const vimeoMatch = url.match(/(?:vimeo\\.com\\/|player\\.vimeo\\.com\\/video\\/)(\\d+)/)\n  if (vimeoMatch) {\n    return { provider: 'vimeo', videoId: vimeoMatch[1] }\n  }\n\n  // Direct video file\n  return { provider: 'direct' }\n}\n\nexport const VideoRenderer: Component<VideoRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const config = useMCPUIConfig()\n  const params = () => props.params || (props.component?.params as VideoComponentParams)\n  const isExpanded = useExpanded()\n\n  const videoInfo = createMemo(() => parseVideoUrl(params()?.url || ''))\n\n  const embedUrl = createMemo(() => {\n    const info = videoInfo()\n    const p = params()\n\n    if (!p?.url) return null\n\n    switch (info.provider) {\n      case 'youtube': {\n        const ytParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          controls: p.controls !== false ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          mute: p.muted ? '1' : '0',\n        })\n        if (p.startTime) {\n          ytParams.set('start', String(p.startTime))\n        }\n        // Use youtube-nocookie.com for privacy\n        return `https://www.youtube-nocookie.com/embed/${info.videoId}?${ytParams}`\n      }\n\n      case 'vimeo': {\n        const vParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          muted: p.muted ? '1' : '0',\n        })\n        return `https://player.vimeo.com/video/${info.videoId}?${vParams}`\n      }\n\n      default:\n        return null\n    }\n  })\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '4:3':\n        return 'aspect-[4/3]'\n      case '21:9':\n        return 'aspect-[21/9]'\n      default:\n        return 'aspect-video' // 16:9\n    }\n  }\n\n  const handleVideoError = (e: Event) => {\n    const error = new Error('Video failed to load')\n    console.error('Video error:', e)\n    props.onError?.(error)\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || strings.videoTitle}\n      copyData={params()?.url || ''}\n      copyLabel={strings.videoCopy}\n      toolbarVariant={props.toolbarVariant}\n    >\n    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${\n      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''\n    }`}>\n      {/* Title */}\n      <Show when={params()?.title}>\n        <div class=\"px-4 py-3 border-b border-gray-200 dark:border-gray-700\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Video Container — when expanded, fill remaining space (override aspect ratio) */}\n      <div class={`relative bg-black ${isExpanded() ? 'flex-1 min-h-0' : aspectClass()}`}>\n        <Show\n          when={embedUrl()}\n          fallback={\n            // Direct video file\n            <video\n              src={params()?.url}\n              poster={params()?.poster}\n              autoplay={params()?.autoplay}\n              controls={params()?.controls !== false}\n              loop={params()?.loop}\n              muted={params()?.muted}\n              playsinline\n              class=\"absolute inset-0 w-full h-full object-contain\"\n              onError={handleVideoError}\n            >\n              <track kind=\"captions\" />\n              {strings.videoUnsupported}\n            </video>\n          }\n        >\n          {/* YouTube/Vimeo embed */}\n          <iframe\n            src={embedUrl()!}\n            title={params()?.title || strings.videoTitle}\n            class=\"absolute inset-0 w-full h-full\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen\n            // v6.21.0 — youtube-nocookie / player.vimeo are not trusted hosts,\n            // so under COEP `credentialless` is what lets them load at all.\n            // `attr:` + `true | undefined` — see the note in `IframeRenderer`.\n            attr:credentialless={\n              // No sandbox here: a YouTube/Vimeo embed keeps its provider\n              // cookies, so `'auto'` leaves it alone and a COEP host opts in\n              // with `iframeCredentialless: 'always'`.\n              shouldSetCredentialless(embedUrl()!, config, {\n                sandboxedWithoutSameOrigin: false,\n              }) || undefined\n            }\n            loading=\"lazy\"\n          />\n        </Show>\n      </div>\n\n      {/* v6.21.0 — a COEP-blocked embed is silent; this link is the way out. */}\n      <Show when={embedUrl()}>\n        <IframeFallbackLink url={params()?.url || ''} />\n      </Show>\n\n      {/* Caption */}\n      <Show when={params()?.caption}>\n        <div class=\"px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">{params()!.caption}</p>\n        </div>\n      </Show>\n    </div>\n    </ExpandableWrapper>\n  )\n}\n\n/**\n * Check if a URL is from a supported video provider\n */\nexport function isSupportedVideoUrl(url: string): boolean {\n  const info = parseVideoUrl(url)\n  return info.provider !== 'direct' || url.match(/\\.(mp4|webm|ogg|mov)$/i) !== null\n}\n\n/**\n * Get video provider from URL\n */\nexport function getVideoProvider(url: string): VideoProvider {\n  return parseVideoUrl(url).provider\n}\n"],"names":["parseVideoUrl","url","youtubeMatch","match","provider","videoId","vimeoMatch","VideoRenderer","props","strings","useMCPUIStrings","config","useMCPUIConfig","params","component","isExpanded","useExpanded","videoInfo","createMemo","embedUrl","info","p","ytParams","URLSearchParams","autoplay","controls","loop","mute","muted","startTime","set","String","vParams","aspectClass","aspectRatio","handleVideoError","e","error","Error","console","onError","_$createComponent","ExpandableWrapper","title","videoTitle","copyData","copyLabel","videoCopy","toolbarVariant","children","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$4","_el$0","_el$1","_co$2","_el$10","_el$11","_co$3","_$insert","Show","when","_el$2","_tmpl$","_el$3","fallback","_el$12","_tmpl$5","_el$13","_el$14","_el$15","_co$4","addEventListener","videoUnsupported","_$effect","_p$","_v$6","_v$7","poster","_v$8","_v$9","_v$0","_v$1","_$setAttribute","t","a","_$setProperty","o","i","n","undefined","_el$5","_tmpl$2","_v$","_v$2","_v$3","shouldSetCredentialless","sandboxedWithoutSameOrigin","IframeFallbackLink","caption","_el$6","_tmpl$3","_el$7","_v$4","_v$5","_$className","isSupportedVideoUrl","getVideoProvider"],"mappings":"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"}

package/dist/components/VideoRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRenderer.d.ts","sourceRoot":"","sources":["../../src/components/VideoRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAoB,MAAM,UAAU,CAAA;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAGjE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAA;CAC5C;AAED;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAsCnD,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,kBAAkB,CAwHvD,CAAA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAGxD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAE3D"}
+{"version":3,"file":"VideoRenderer.d.ts","sourceRoot":"","sources":["../../src/components/VideoRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAoB,MAAM,UAAU,CAAA;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAOjE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAA;CAC5C;AAED;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAsCnD,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,kBAAkB,CA0IvD,CAAA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAGxD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAE3D"}

package/dist/components/VideoRenderer.js

@@ -1,7 +1,11 @@
 import { createComponent, getNextElement, getNextMarker, insert, effect, setAttribute, setProperty, className, template } from "solid-js/web";
 import { createMemo, Show } from "solid-js";
 import { useExpanded, ExpandableWrapper } from "./ExpandableWrapper.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<iframe class="absolute inset-0 w-full h-full"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"allowfullscreen loading=lazy>`, true, false, false), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0"><p class="text-sm text-gray-600 dark:text-gray-400">`), _tmpl$4 = /* @__PURE__ */ template(`<div><!$><!/><div></div><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<video playsinline class="absolute inset-0 w-full h-full object-contain"><track kind=captions>Your browser does not support the video tag.`);
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { useMCPUIConfig } from "../context/MCPUIConfigContext.js";
+import { shouldSetCredentialless } from "../utils/iframe-coep.js";
+import { IframeFallbackLink } from "./IframeFallbackLink.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<iframe class="absolute inset-0 w-full h-full"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"allowfullscreen loading=lazy>`, true, false, false), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0"><p class="text-sm text-gray-600 dark:text-gray-400">`), _tmpl$4 = /* @__PURE__ */ template(`<div><!$><!/><div></div><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<video playsinline class="absolute inset-0 w-full h-full object-contain"><track kind=captions><!$><!/>`);
 function parseVideoUrl(url) {
   const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
   if (youtubeMatch) {
@@ -22,6 +26,8 @@ function parseVideoUrl(url) {
   };
 }
 const VideoRenderer = (props) => {
+  const strings = useMCPUIStrings();
+  const config = useMCPUIConfig();
   const params = () => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
@@ -82,18 +88,20 @@ const VideoRenderer = (props) => {
   return createComponent(ExpandableWrapper, {
     get title() {
       var _a;
-      return ((_a = params()) == null ? void 0 : _a.title) || "Video";
+      return ((_a = params()) == null ? void 0 : _a.title) || strings.videoTitle;
     },
     get copyData() {
       var _a;
       return ((_a = params()) == null ? void 0 : _a.url) || "";
     },
-    copyLabel: "Copy video URL",
+    get copyLabel() {
+      return strings.videoCopy;
+    },
     get toolbarVariant() {
       return props.toolbarVariant;
     },
     get children() {
-      var _el$ = getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$] = getNextMarker(_el$8.nextSibling), _el$4 = _el$9.nextSibling, _el$0 = _el$4.nextSibling, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling);
+      var _el$ = getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$] = getNextMarker(_el$8.nextSibling), _el$4 = _el$9.nextSibling, _el$0 = _el$4.nextSibling, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$3] = getNextMarker(_el$10.nextSibling);
       insert(_el$, createComponent(Show, {
         get when() {
           var _a;
@@ -113,17 +121,18 @@ const VideoRenderer = (props) => {
           return (
             // Direct video file
             (() => {
-              var _el$10 = getNextElement(_tmpl$5);
-              _el$10.addEventListener("error", handleVideoError);
+              var _el$12 = getNextElement(_tmpl$5), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, [_el$15, _co$4] = getNextMarker(_el$14.nextSibling);
+              _el$12.addEventListener("error", handleVideoError);
+              insert(_el$12, () => strings.videoUnsupported, _el$15, _co$4);
               effect((_p$) => {
                 var _a, _b, _c, _d, _e, _f;
-                var _v$5 = (_a = params()) == null ? void 0 : _a.url, _v$6 = (_b = params()) == null ? void 0 : _b.poster, _v$7 = (_c = params()) == null ? void 0 : _c.autoplay, _v$8 = ((_d = params()) == null ? void 0 : _d.controls) !== false, _v$9 = (_e = params()) == null ? void 0 : _e.loop, _v$0 = (_f = params()) == null ? void 0 : _f.muted;
-                _v$5 !== _p$.e && setAttribute(_el$10, "src", _p$.e = _v$5);
-                _v$6 !== _p$.t && setAttribute(_el$10, "poster", _p$.t = _v$6);
-                _v$7 !== _p$.a && setProperty(_el$10, "autoplay", _p$.a = _v$7);
-                _v$8 !== _p$.o && setProperty(_el$10, "controls", _p$.o = _v$8);
-                _v$9 !== _p$.i && setProperty(_el$10, "loop", _p$.i = _v$9);
-                _v$0 !== _p$.n && setProperty(_el$10, "muted", _p$.n = _v$0);
+                var _v$6 = (_a = params()) == null ? void 0 : _a.url, _v$7 = (_b = params()) == null ? void 0 : _b.poster, _v$8 = (_c = params()) == null ? void 0 : _c.autoplay, _v$9 = ((_d = params()) == null ? void 0 : _d.controls) !== false, _v$0 = (_e = params()) == null ? void 0 : _e.loop, _v$1 = (_f = params()) == null ? void 0 : _f.muted;
+                _v$6 !== _p$.e && setAttribute(_el$12, "src", _p$.e = _v$6);
+                _v$7 !== _p$.t && setAttribute(_el$12, "poster", _p$.t = _v$7);
+                _v$8 !== _p$.a && setProperty(_el$12, "autoplay", _p$.a = _v$8);
+                _v$9 !== _p$.o && setProperty(_el$12, "controls", _p$.o = _v$9);
+                _v$0 !== _p$.i && setProperty(_el$12, "loop", _p$.i = _v$0);
+                _v$1 !== _p$.n && setProperty(_el$12, "muted", _p$.n = _v$1);
                 return _p$;
               }, {
                 e: void 0,
@@ -133,7 +142,7 @@ const VideoRenderer = (props) => {
                 i: void 0,
                 n: void 0
               });
-              return _el$10;
+              return _el$12;
             })()
           );
         },
@@ -141,17 +150,39 @@ const VideoRenderer = (props) => {
           var _el$5 = getNextElement(_tmpl$2);
           effect((_p$) => {
             var _a;
-            var _v$ = embedUrl(), _v$2 = ((_a = params()) == null ? void 0 : _a.title) || "Video";
+            var _v$ = embedUrl(), _v$2 = ((_a = params()) == null ? void 0 : _a.title) || strings.videoTitle, _v$3 = (
+              // No sandbox here: a YouTube/Vimeo embed keeps its provider
+              // cookies, so `'auto'` leaves it alone and a COEP host opts in
+              // with `iframeCredentialless: 'always'`.
+              shouldSetCredentialless(embedUrl(), config, {
+                sandboxedWithoutSameOrigin: false
+              }) || void 0
+            );
             _v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
             _v$2 !== _p$.t && setAttribute(_el$5, "title", _p$.t = _v$2);
+            _v$3 !== _p$.a && setAttribute(_el$5, "credentialless", _p$.a = _v$3);
             return _p$;
           }, {
             e: void 0,
-            t: void 0
+            t: void 0,
+            a: void 0
           });
           return _el$5;
         }
       }));
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return embedUrl();
+        },
+        get children() {
+          return createComponent(IframeFallbackLink, {
+            get url() {
+              var _a;
+              return ((_a = params()) == null ? void 0 : _a.url) || "";
+            }
+          });
+        }
+      }), _el$1, _co$2);
       insert(_el$, createComponent(Show, {
         get when() {
           var _a;
@@ -162,11 +193,11 @@ const VideoRenderer = (props) => {
           insert(_el$7, () => params().caption);
           return _el$6;
         }
-      }), _el$1, _co$2);
+      }), _el$11, _co$3);
       effect((_p$) => {
-        var _v$3 = `w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$4 = `relative bg-black ${isExpanded() ? "flex-1 min-h-0" : aspectClass()}`;
-        _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
-        _v$4 !== _p$.t && className(_el$4, _p$.t = _v$4);
+        var _v$4 = `w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$5 = `relative bg-black ${isExpanded() ? "flex-1 min-h-0" : aspectClass()}`;
+        _v$4 !== _p$.e && className(_el$, _p$.e = _v$4);
+        _v$5 !== _p$.t && className(_el$4, _p$.t = _v$5);
         return _p$;
       }, {
         e: void 0,

package/dist/components/VideoRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRenderer.js","sources":["../../src/components/VideoRenderer.tsx"],"sourcesContent":["/**\n * VideoRenderer - Video embed component\n * Sprint 5: Media Components\n *\n * Supports YouTube, Vimeo, and direct video files\n */\n\nimport { Component, createMemo, Show } from 'solid-js'\nimport type { UIComponent, VideoComponentParams } from '../types'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\n\nexport interface VideoRendererProps {\n  /**\n   * UIComponent containing video params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct video params (alternative to component)\n   */\n  params?: VideoComponentParams\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n\n  /**\n   * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).\n   * @see ExpandableWrapperProps.toolbarVariant\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * Video provider type\n */\ntype VideoProvider = 'youtube' | 'vimeo' | 'direct'\n\n/**\n * Parsed video info\n */\ninterface VideoInfo {\n  provider: VideoProvider\n  videoId?: string\n}\n\n/**\n * Extract video ID and provider from URL\n */\nfunction parseVideoUrl(url: string): VideoInfo {\n  // YouTube patterns:\n  // - youtube.com/watch?v=VIDEO_ID\n  // - youtube.com/embed/VIDEO_ID\n  // - youtube.com/v/VIDEO_ID\n  // - youtu.be/VIDEO_ID\n  const youtubeMatch = url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/|v\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/\n  )\n  if (youtubeMatch) {\n    return { provider: 'youtube', videoId: youtubeMatch[1] }\n  }\n\n  // Vimeo patterns:\n  // - vimeo.com/VIDEO_ID\n  // - player.vimeo.com/video/VIDEO_ID\n  const vimeoMatch = url.match(/(?:vimeo\\.com\\/|player\\.vimeo\\.com\\/video\\/)(\\d+)/)\n  if (vimeoMatch) {\n    return { provider: 'vimeo', videoId: vimeoMatch[1] }\n  }\n\n  // Direct video file\n  return { provider: 'direct' }\n}\n\nexport const VideoRenderer: Component<VideoRendererProps> = (props) => {\n  const params = () => props.params || (props.component?.params as VideoComponentParams)\n  const isExpanded = useExpanded()\n\n  const videoInfo = createMemo(() => parseVideoUrl(params()?.url || ''))\n\n  const embedUrl = createMemo(() => {\n    const info = videoInfo()\n    const p = params()\n\n    if (!p?.url) return null\n\n    switch (info.provider) {\n      case 'youtube': {\n        const ytParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          controls: p.controls !== false ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          mute: p.muted ? '1' : '0',\n        })\n        if (p.startTime) {\n          ytParams.set('start', String(p.startTime))\n        }\n        // Use youtube-nocookie.com for privacy\n        return `https://www.youtube-nocookie.com/embed/${info.videoId}?${ytParams}`\n      }\n\n      case 'vimeo': {\n        const vParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          muted: p.muted ? '1' : '0',\n        })\n        return `https://player.vimeo.com/video/${info.videoId}?${vParams}`\n      }\n\n      default:\n        return null\n    }\n  })\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '4:3':\n        return 'aspect-[4/3]'\n      case '21:9':\n        return 'aspect-[21/9]'\n      default:\n        return 'aspect-video' // 16:9\n    }\n  }\n\n  const handleVideoError = (e: Event) => {\n    const error = new Error('Video failed to load')\n    console.error('Video error:', e)\n    props.onError?.(error)\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || 'Video'}\n      copyData={params()?.url || ''}\n      copyLabel=\"Copy video URL\"\n      toolbarVariant={props.toolbarVariant}\n    >\n    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${\n      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''\n    }`}>\n      {/* Title */}\n      <Show when={params()?.title}>\n        <div class=\"px-4 py-3 border-b border-gray-200 dark:border-gray-700\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Video Container — when expanded, fill remaining space (override aspect ratio) */}\n      <div class={`relative bg-black ${isExpanded() ? 'flex-1 min-h-0' : aspectClass()}`}>\n        <Show\n          when={embedUrl()}\n          fallback={\n            // Direct video file\n            <video\n              src={params()?.url}\n              poster={params()?.poster}\n              autoplay={params()?.autoplay}\n              controls={params()?.controls !== false}\n              loop={params()?.loop}\n              muted={params()?.muted}\n              playsinline\n              class=\"absolute inset-0 w-full h-full object-contain\"\n              onError={handleVideoError}\n            >\n              <track kind=\"captions\" />\n              Your browser does not support the video tag.\n            </video>\n          }\n        >\n          {/* YouTube/Vimeo embed */}\n          <iframe\n            src={embedUrl()!}\n            title={params()?.title || 'Video'}\n            class=\"absolute inset-0 w-full h-full\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen\n            loading=\"lazy\"\n          />\n        </Show>\n      </div>\n\n      {/* Caption */}\n      <Show when={params()?.caption}>\n        <div class=\"px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">{params()!.caption}</p>\n        </div>\n      </Show>\n    </div>\n    </ExpandableWrapper>\n  )\n}\n\n/**\n * Check if a URL is from a supported video provider\n */\nexport function isSupportedVideoUrl(url: string): boolean {\n  const info = parseVideoUrl(url)\n  return info.provider !== 'direct' || url.match(/\\.(mp4|webm|ogg|mov)$/i) !== null\n}\n\n/**\n * Get video provider from URL\n */\nexport function getVideoProvider(url: string): VideoProvider {\n  return parseVideoUrl(url).provider\n}\n"],"names":["parseVideoUrl","url","youtubeMatch","match","provider","videoId","vimeoMatch","VideoRenderer","props","params","component","isExpanded","useExpanded","videoInfo","createMemo","embedUrl","info","p","ytParams","URLSearchParams","autoplay","controls","loop","mute","muted","startTime","set","String","vParams","aspectClass","aspectRatio","handleVideoError","e","error","Error","console","onError","_$createComponent","ExpandableWrapper","title","copyData","copyLabel","toolbarVariant","children","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$4","_el$0","_el$1","_co$2","_$insert","Show","when","_el$2","_tmpl$","_el$3","fallback","_el$10","_tmpl$5","addEventListener","_$effect","_p$","_v$5","_v$6","poster","_v$7","_v$8","_v$9","_v$0","_$setAttribute","t","a","_$setProperty","o","i","n","undefined","_el$5","_tmpl$2","_v$","_v$2","caption","_el$6","_tmpl$3","_el$7","_v$3","_v$4","_$className","isSupportedVideoUrl","getVideoProvider"],"mappings":"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"}
+{"version":3,"file":"VideoRenderer.js","sources":["../../src/components/VideoRenderer.tsx"],"sourcesContent":["/**\n * VideoRenderer - Video embed component\n * Sprint 5: Media Components\n *\n * Supports YouTube, Vimeo, and direct video files\n */\n\nimport { Component, createMemo, Show } from 'solid-js'\nimport type { UIComponent, VideoComponentParams } from '../types'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\nimport { useMCPUIConfig } from '../context/MCPUIConfigContext'\nimport { shouldSetCredentialless } from '../utils/iframe-coep'\nimport { IframeFallbackLink } from './IframeFallbackLink'\n\nexport interface VideoRendererProps {\n  /**\n   * UIComponent containing video params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct video params (alternative to component)\n   */\n  params?: VideoComponentParams\n\n  /**\n   * Error callback\n   */\n  onError?: (error: Error) => void\n\n  /**\n   * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).\n   * @see ExpandableWrapperProps.toolbarVariant\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * Video provider type\n */\ntype VideoProvider = 'youtube' | 'vimeo' | 'direct'\n\n/**\n * Parsed video info\n */\ninterface VideoInfo {\n  provider: VideoProvider\n  videoId?: string\n}\n\n/**\n * Extract video ID and provider from URL\n */\nfunction parseVideoUrl(url: string): VideoInfo {\n  // YouTube patterns:\n  // - youtube.com/watch?v=VIDEO_ID\n  // - youtube.com/embed/VIDEO_ID\n  // - youtube.com/v/VIDEO_ID\n  // - youtu.be/VIDEO_ID\n  const youtubeMatch = url.match(\n    /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/|v\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/\n  )\n  if (youtubeMatch) {\n    return { provider: 'youtube', videoId: youtubeMatch[1] }\n  }\n\n  // Vimeo patterns:\n  // - vimeo.com/VIDEO_ID\n  // - player.vimeo.com/video/VIDEO_ID\n  const vimeoMatch = url.match(/(?:vimeo\\.com\\/|player\\.vimeo\\.com\\/video\\/)(\\d+)/)\n  if (vimeoMatch) {\n    return { provider: 'vimeo', videoId: vimeoMatch[1] }\n  }\n\n  // Direct video file\n  return { provider: 'direct' }\n}\n\nexport const VideoRenderer: Component<VideoRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const config = useMCPUIConfig()\n  const params = () => props.params || (props.component?.params as VideoComponentParams)\n  const isExpanded = useExpanded()\n\n  const videoInfo = createMemo(() => parseVideoUrl(params()?.url || ''))\n\n  const embedUrl = createMemo(() => {\n    const info = videoInfo()\n    const p = params()\n\n    if (!p?.url) return null\n\n    switch (info.provider) {\n      case 'youtube': {\n        const ytParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          controls: p.controls !== false ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          mute: p.muted ? '1' : '0',\n        })\n        if (p.startTime) {\n          ytParams.set('start', String(p.startTime))\n        }\n        // Use youtube-nocookie.com for privacy\n        return `https://www.youtube-nocookie.com/embed/${info.videoId}?${ytParams}`\n      }\n\n      case 'vimeo': {\n        const vParams = new URLSearchParams({\n          autoplay: p.autoplay ? '1' : '0',\n          loop: p.loop ? '1' : '0',\n          muted: p.muted ? '1' : '0',\n        })\n        return `https://player.vimeo.com/video/${info.videoId}?${vParams}`\n      }\n\n      default:\n        return null\n    }\n  })\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '4:3':\n        return 'aspect-[4/3]'\n      case '21:9':\n        return 'aspect-[21/9]'\n      default:\n        return 'aspect-video' // 16:9\n    }\n  }\n\n  const handleVideoError = (e: Event) => {\n    const error = new Error('Video failed to load')\n    console.error('Video error:', e)\n    props.onError?.(error)\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || strings.videoTitle}\n      copyData={params()?.url || ''}\n      copyLabel={strings.videoCopy}\n      toolbarVariant={props.toolbarVariant}\n    >\n    <div class={`w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${\n      isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''\n    }`}>\n      {/* Title */}\n      <Show when={params()?.title}>\n        <div class=\"px-4 py-3 border-b border-gray-200 dark:border-gray-700\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Video Container — when expanded, fill remaining space (override aspect ratio) */}\n      <div class={`relative bg-black ${isExpanded() ? 'flex-1 min-h-0' : aspectClass()}`}>\n        <Show\n          when={embedUrl()}\n          fallback={\n            // Direct video file\n            <video\n              src={params()?.url}\n              poster={params()?.poster}\n              autoplay={params()?.autoplay}\n              controls={params()?.controls !== false}\n              loop={params()?.loop}\n              muted={params()?.muted}\n              playsinline\n              class=\"absolute inset-0 w-full h-full object-contain\"\n              onError={handleVideoError}\n            >\n              <track kind=\"captions\" />\n              {strings.videoUnsupported}\n            </video>\n          }\n        >\n          {/* YouTube/Vimeo embed */}\n          <iframe\n            src={embedUrl()!}\n            title={params()?.title || strings.videoTitle}\n            class=\"absolute inset-0 w-full h-full\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen\n            // v6.21.0 — youtube-nocookie / player.vimeo are not trusted hosts,\n            // so under COEP `credentialless` is what lets them load at all.\n            // `attr:` + `true | undefined` — see the note in `IframeRenderer`.\n            attr:credentialless={\n              // No sandbox here: a YouTube/Vimeo embed keeps its provider\n              // cookies, so `'auto'` leaves it alone and a COEP host opts in\n              // with `iframeCredentialless: 'always'`.\n              shouldSetCredentialless(embedUrl()!, config, {\n                sandboxedWithoutSameOrigin: false,\n              }) || undefined\n            }\n            loading=\"lazy\"\n          />\n        </Show>\n      </div>\n\n      {/* v6.21.0 — a COEP-blocked embed is silent; this link is the way out. */}\n      <Show when={embedUrl()}>\n        <IframeFallbackLink url={params()?.url || ''} />\n      </Show>\n\n      {/* Caption */}\n      <Show when={params()?.caption}>\n        <div class=\"px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">{params()!.caption}</p>\n        </div>\n      </Show>\n    </div>\n    </ExpandableWrapper>\n  )\n}\n\n/**\n * Check if a URL is from a supported video provider\n */\nexport function isSupportedVideoUrl(url: string): boolean {\n  const info = parseVideoUrl(url)\n  return info.provider !== 'direct' || url.match(/\\.(mp4|webm|ogg|mov)$/i) !== null\n}\n\n/**\n * Get video provider from URL\n */\nexport function getVideoProvider(url: string): VideoProvider {\n  return parseVideoUrl(url).provider\n}\n"],"names":["parseVideoUrl","url","youtubeMatch","match","provider","videoId","vimeoMatch","VideoRenderer","props","strings","useMCPUIStrings","config","useMCPUIConfig","params","component","isExpanded","useExpanded","videoInfo","createMemo","embedUrl","info","p","ytParams","URLSearchParams","autoplay","controls","loop","mute","muted","startTime","set","String","vParams","aspectClass","aspectRatio","handleVideoError","e","error","Error","console","onError","_$createComponent","ExpandableWrapper","title","videoTitle","copyData","copyLabel","videoCopy","toolbarVariant","children","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$4","_el$0","_el$1","_co$2","_el$10","_el$11","_co$3","_$insert","Show","when","_el$2","_tmpl$","_el$3","fallback","_el$12","_tmpl$5","_el$13","_el$14","_el$15","_co$4","addEventListener","videoUnsupported","_$effect","_p$","_v$6","_v$7","poster","_v$8","_v$9","_v$0","_v$1","_$setAttribute","t","a","_$setProperty","o","i","n","undefined","_el$5","_tmpl$2","_v$","_v$2","_v$3","shouldSetCredentialless","sandboxedWithoutSameOrigin","IframeFallbackLink","caption","_el$6","_tmpl$3","_el$7","_v$4","_v$5","_$className","isSupportedVideoUrl","getVideoProvider"],"mappings":"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"}

package/dist/components/chart-data-table.cjs

@@ -1,5 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formatString = require("../utils/format-string.cjs");
+const CHART_DATA_TABLE_LABELS = {
+  series: "Series",
+  point: "Point",
+  label: "Label",
+  seriesName: "Series {n}",
+  x: "x",
+  y: "y",
+  r: "r"
+};
 function tableCell(value) {
   if (value == null) return "";
   if (typeof value === "string" || typeof value === "number") return value;
@@ -13,37 +23,38 @@ function tableCell(value) {
 function isPoint(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value) && ("x" in value || "y" in value || "r" in value);
 }
-function chartToDataTable(params) {
+function chartToDataTable(params, labels) {
   var _a, _b;
+  const l = { ...CHART_DATA_TABLE_LABELS, ...labels };
   const datasets = ((_a = params.data) == null ? void 0 : _a.datasets) ?? [];
-  const labels = ((_b = params.data) == null ? void 0 : _b.labels) ?? [];
+  const dataLabels = ((_b = params.data) == null ? void 0 : _b.labels) ?? [];
   const pointData = params.type === "scatter" || params.type === "bubble" || datasets.some((dataset) => {
     var _a2;
     return (_a2 = dataset.data) == null ? void 0 : _a2.some(isPoint);
   });
   if (pointData) {
-    const hasLabels = labels.length > 0;
+    const hasLabels = dataLabels.length > 0;
     const hasRadius = params.type === "bubble" || datasets.some((dataset) => {
       var _a2;
       return (_a2 = dataset.data) == null ? void 0 : _a2.some((value) => isPoint(value) && "r" in value);
     });
     const columns2 = [
-      "Series",
-      "Point",
-      ...hasLabels ? ["Label"] : [],
-      "x",
-      "y",
-      ...hasRadius ? ["r"] : []
+      l.series,
+      l.point,
+      ...hasLabels ? [l.label] : [],
+      l.x,
+      l.y,
+      ...hasRadius ? [l.r] : []
     ];
     const rows2 = [];
     datasets.forEach((dataset, datasetIndex) => {
-      const series = dataset.label || `Series ${datasetIndex + 1}`;
+      const series = dataset.label || formatString.formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });
       (dataset.data ?? []).forEach((value, pointIndex) => {
         const point = isPoint(value) ? value : { y: value };
         rows2.push([
           series,
           pointIndex + 1,
-          ...hasLabels ? [tableCell(labels[pointIndex])] : [],
+          ...hasLabels ? [tableCell(dataLabels[pointIndex])] : [],
           tableCell(point.x),
           tableCell(point.y),
           ...hasRadius ? [tableCell(point.r)] : []
@@ -52,15 +63,24 @@ function chartToDataTable(params) {
     });
     return { columns: columns2, rows: rows2 };
   }
-  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => {
-    var _a2;
-    return ((_a2 = dataset.data) == null ? void 0 : _a2.length) ?? 0;
-  }), 0);
-  const columns = ["Label", ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];
+  const rowCount = Math.max(
+    dataLabels.length,
+    ...datasets.map((dataset) => {
+      var _a2;
+      return ((_a2 = dataset.data) == null ? void 0 : _a2.length) ?? 0;
+    }),
+    0
+  );
+  const columns = [
+    l.label,
+    ...datasets.map(
+      (dataset, index) => dataset.label || formatString.formatMCPUIString(l.seriesName, { n: index + 1 })
+    )
+  ];
   const rows = [];
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
     rows.push([
-      tableCell(labels[rowIndex] ?? rowIndex + 1),
+      tableCell(dataLabels[rowIndex] ?? rowIndex + 1),
       ...datasets.map((dataset) => {
         var _a2;
         return tableCell((_a2 = dataset.data) == null ? void 0 : _a2[rowIndex]);
@@ -69,5 +89,6 @@ function chartToDataTable(params) {
   }
   return { columns, rows };
 }
+exports.CHART_DATA_TABLE_LABELS = CHART_DATA_TABLE_LABELS;
 exports.chartToDataTable = chartToDataTable;
 //# sourceMappingURL=chart-data-table.cjs.map

package/dist/components/chart-data-table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chart-data-table.cjs","sources":["../../src/components/chart-data-table.ts"],"sourcesContent":["export interface ChartDataTable {\n  columns: string[];\n  rows: Array<Array<string | number>>;\n}\n\ninterface ChartDatasetLike {\n  label?: string;\n  data?: unknown[];\n}\n\nexport interface ChartDataLike {\n  type?: string;\n  data?: {\n    labels?: Array<string | number>;\n    datasets?: ChartDatasetLike[];\n  };\n}\n\nfunction tableCell(value: unknown): string | number {\n  if (value == null) return '';\n  if (typeof value === 'string' || typeof value === 'number') return value;\n  if (typeof value === 'boolean') return String(value);\n  try {\n    return JSON.stringify(value);\n  } catch {\n    return String(value);\n  }\n}\n\nfunction isPoint(value: unknown): value is Record<string, unknown> {\n  return (\n    value !== null &&\n    typeof value === 'object' &&\n    !Array.isArray(value) &&\n    ('x' in value || 'y' in value || 'r' in value)\n  );\n}\n\n/**\n * Project Chart.js data into an accessible table without flattening point\n * coordinates. Categorical charts use a compact wide table; scatter, bubble,\n * and object-valued line charts use one row per point so x/y/r remain distinct.\n */\nexport function chartToDataTable(params: ChartDataLike): ChartDataTable {\n  const datasets = params.data?.datasets ?? [];\n  const labels = params.data?.labels ?? [];\n  const pointData =\n    params.type === 'scatter' ||\n    params.type === 'bubble' ||\n    datasets.some((dataset) => dataset.data?.some(isPoint));\n\n  if (pointData) {\n    const hasLabels = labels.length > 0;\n    const hasRadius =\n      params.type === 'bubble' ||\n      datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));\n    const columns = [\n      'Series',\n      'Point',\n      ...(hasLabels ? ['Label'] : []),\n      'x',\n      'y',\n      ...(hasRadius ? ['r'] : []),\n    ];\n    const rows: Array<Array<string | number>> = [];\n\n    datasets.forEach((dataset, datasetIndex) => {\n      const series = dataset.label || `Series ${datasetIndex + 1}`;\n      (dataset.data ?? []).forEach((value, pointIndex) => {\n        const point = isPoint(value) ? value : { y: value };\n        rows.push([\n          series,\n          pointIndex + 1,\n          ...(hasLabels ? [tableCell(labels[pointIndex])] : []),\n          tableCell(point.x),\n          tableCell(point.y),\n          ...(hasRadius ? [tableCell(point.r)] : []),\n        ]);\n      });\n    });\n\n    return { columns, rows };\n  }\n\n  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length ?? 0), 0);\n  const columns = ['Label', ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];\n  const rows: Array<Array<string | number>> = [];\n\n  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {\n    rows.push([\n      tableCell(labels[rowIndex] ?? rowIndex + 1),\n      ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),\n    ]);\n  }\n\n  return { columns, rows };\n}\n"],"names":["_a","columns","rows"],"mappings":";;AAkBA,SAAS,UAAU,OAAiC;AAClD,MAAI,SAAS,KAAM,QAAO;AAC1B,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAAU,QAAO;AACnE,MAAI,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AACnD,MAAI;AACF,WAAO,KAAK,UAAU,KAAK;AAAA,EAC7B,QAAQ;AACN,WAAO,OAAO,KAAK;AAAA,EACrB;AACF;AAEA,SAAS,QAAQ,OAAkD;AACjE,SACE,UAAU,QACV,OAAO,UAAU,YACjB,CAAC,MAAM,QAAQ,KAAK,MACnB,OAAO,SAAS,OAAO,SAAS,OAAO;AAE5C;AAOO,SAAS,iBAAiB,QAAuC;;AACtE,QAAM,aAAW,YAAO,SAAP,mBAAa,aAAY,CAAA;AAC1C,QAAM,WAAS,YAAO,SAAP,mBAAa,WAAU,CAAA;AACtC,QAAM,YACJ,OAAO,SAAS,aAChB,OAAO,SAAS,YAChB,SAAS,KAAK,CAAC,YAAA;;AAAY,YAAAA,MAAA,QAAQ,SAAR,gBAAAA,IAAc,KAAK;AAAA,GAAQ;AAExD,MAAI,WAAW;AACb,UAAM,YAAY,OAAO,SAAS;AAClC,UAAM,YACJ,OAAO,SAAS,YAChB,SAAS,KAAK,CAAC,YAAA;;AAAY,cAAAA,MAAA,QAAQ,SAAR,gBAAAA,IAAc,KAAK,CAAC,UAAU,QAAQ,KAAK,KAAK,OAAO;AAAA,KAAM;AAC1F,UAAMC,WAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA,GAAI,YAAY,CAAC,OAAO,IAAI,CAAA;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,GAAI,YAAY,CAAC,GAAG,IAAI,CAAA;AAAA,IAAC;AAE3B,UAAMC,QAAsC,CAAA;AAE5C,aAAS,QAAQ,CAAC,SAAS,iBAAiB;AAC1C,YAAM,SAAS,QAAQ,SAAS,UAAU,eAAe,CAAC;AAC1D,OAAC,QAAQ,QAAQ,CAAA,GAAI,QAAQ,CAAC,OAAO,eAAe;AAClD,cAAM,QAAQ,QAAQ,KAAK,IAAI,QAAQ,EAAE,GAAG,MAAA;AAC5CA,cAAK,KAAK;AAAA,UACR;AAAA,UACA,aAAa;AAAA,UACb,GAAI,YAAY,CAAC,UAAU,OAAO,UAAU,CAAC,CAAC,IAAI,CAAA;AAAA,UAClD,UAAU,MAAM,CAAC;AAAA,UACjB,UAAU,MAAM,CAAC;AAAA,UACjB,GAAI,YAAY,CAAC,UAAU,MAAM,CAAC,CAAC,IAAI,CAAA;AAAA,QAAC,CACzC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAED,WAAO,EAAE,SAAAD,UAAS,MAAAC,MAAAA;AAAAA,EACpB;AAEA,QAAM,WAAW,KAAK,IAAI,OAAO,QAAQ,GAAG,SAAS,IAAI,CAAC;;AAAY,aAAAF,MAAA,QAAQ,SAAR,gBAAAA,IAAc,WAAU;AAAA,GAAC,GAAG,CAAC;AACnG,QAAM,UAAU,CAAC,SAAS,GAAG,SAAS,IAAI,CAAC,SAAS,UAAU,QAAQ,SAAS,UAAU,QAAQ,CAAC,EAAE,CAAC;AACrG,QAAM,OAAsC,CAAA;AAE5C,WAAS,WAAW,GAAG,WAAW,UAAU,YAAY,GAAG;AACzD,SAAK,KAAK;AAAA,MACR,UAAU,OAAO,QAAQ,KAAK,WAAW,CAAC;AAAA,MAC1C,GAAG,SAAS,IAAI,CAAC,YAAA;;AAAY,0BAAUA,MAAA,QAAQ,SAAR,gBAAAA,IAAe,SAAS;AAAA,OAAC;AAAA,IAAA,CACjE;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,KAAA;AACpB;;"}
+{"version":3,"file":"chart-data-table.cjs","sources":["../../src/components/chart-data-table.ts"],"sourcesContent":["import { formatMCPUIString } from '../utils/format-string';\n\n/**\n * Column headers and series names of the accessible chart data table.\n *\n * `chartToDataTable` is a pure helper with no access to `MCPUIStrings`, so\n * the wording is injected: it takes an optional trailing `labels` partial,\n * which `ChartJSRenderer` feeds from `useMCPUIStrings()`. Left out, the\n * English defaults below apply — the pre-v6.20.0 behaviour.\n *\n * `x` / `y` / `r` stay untranslated on purpose: they are the Chart.js point\n * property NAMES the cells mirror, not prose.\n *\n * @since v6.20.0\n */\nexport interface ChartDataTableLabels {\n  /** Series column of the per-point table. */\n  series: string;\n  /** Point-index column of the per-point table. */\n  point: string;\n  /** Label column (categorical table, and per-point table when labelled). */\n  label: string;\n  /** Fallback dataset name. Template — `{n}`. */\n  seriesName: string;\n  /** Chart.js point property names — machine tokens, rarely overridden. */\n  x: string;\n  y: string;\n  r: string;\n}\n\n/** English defaults for {@link ChartDataTableLabels}. */\nexport const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {\n  series: 'Series',\n  point: 'Point',\n  label: 'Label',\n  seriesName: 'Series {n}',\n  x: 'x',\n  y: 'y',\n  r: 'r',\n};\n\nexport interface ChartDataTable {\n  columns: string[];\n  rows: Array<Array<string | number>>;\n}\n\ninterface ChartDatasetLike {\n  label?: string;\n  data?: unknown[];\n}\n\nexport interface ChartDataLike {\n  type?: string;\n  data?: {\n    labels?: Array<string | number>;\n    datasets?: ChartDatasetLike[];\n  };\n}\n\nfunction tableCell(value: unknown): string | number {\n  if (value == null) return '';\n  if (typeof value === 'string' || typeof value === 'number') return value;\n  if (typeof value === 'boolean') return String(value);\n  try {\n    return JSON.stringify(value);\n  } catch {\n    return String(value);\n  }\n}\n\nfunction isPoint(value: unknown): value is Record<string, unknown> {\n  return (\n    value !== null &&\n    typeof value === 'object' &&\n    !Array.isArray(value) &&\n    ('x' in value || 'y' in value || 'r' in value)\n  );\n}\n\n/**\n * Project Chart.js data into an accessible table without flattening point\n * coordinates. Categorical charts use a compact wide table; scatter, bubble,\n * and object-valued line charts use one row per point so x/y/r remain distinct.\n */\nexport function chartToDataTable(\n  params: ChartDataLike,\n  labels?: Partial<ChartDataTableLabels>\n): ChartDataTable {\n  const l: ChartDataTableLabels = { ...CHART_DATA_TABLE_LABELS, ...labels };\n  const datasets = params.data?.datasets ?? [];\n  const dataLabels = params.data?.labels ?? [];\n  const pointData =\n    params.type === 'scatter' ||\n    params.type === 'bubble' ||\n    datasets.some((dataset) => dataset.data?.some(isPoint));\n\n  if (pointData) {\n    const hasLabels = dataLabels.length > 0;\n    const hasRadius =\n      params.type === 'bubble' ||\n      datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));\n    const columns = [\n      l.series,\n      l.point,\n      ...(hasLabels ? [l.label] : []),\n      l.x,\n      l.y,\n      ...(hasRadius ? [l.r] : []),\n    ];\n    const rows: Array<Array<string | number>> = [];\n\n    datasets.forEach((dataset, datasetIndex) => {\n      const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });\n      (dataset.data ?? []).forEach((value, pointIndex) => {\n        const point = isPoint(value) ? value : { y: value };\n        rows.push([\n          series,\n          pointIndex + 1,\n          ...(hasLabels ? [tableCell(dataLabels[pointIndex])] : []),\n          tableCell(point.x),\n          tableCell(point.y),\n          ...(hasRadius ? [tableCell(point.r)] : []),\n        ]);\n      });\n    });\n\n    return { columns, rows };\n  }\n\n  const rowCount = Math.max(\n    dataLabels.length,\n    ...datasets.map((dataset) => dataset.data?.length ?? 0),\n    0\n  );\n  const columns = [\n    l.label,\n    ...datasets.map(\n      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })\n    ),\n  ];\n  const rows: Array<Array<string | number>> = [];\n\n  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {\n    rows.push([\n      tableCell(dataLabels[rowIndex] ?? rowIndex + 1),\n      ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),\n    ]);\n  }\n\n  return { columns, rows };\n}\n"],"names":["_a","columns","rows","formatMCPUIString"],"mappings":"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"}

package/dist/components/chart-data-table.d.ts

@@ -1,3 +1,32 @@
+/**
+ * Column headers and series names of the accessible chart data table.
+ *
+ * `chartToDataTable` is a pure helper with no access to `MCPUIStrings`, so
+ * the wording is injected: it takes an optional trailing `labels` partial,
+ * which `ChartJSRenderer` feeds from `useMCPUIStrings()`. Left out, the
+ * English defaults below apply — the pre-v6.20.0 behaviour.
+ *
+ * `x` / `y` / `r` stay untranslated on purpose: they are the Chart.js point
+ * property NAMES the cells mirror, not prose.
+ *
+ * @since v6.20.0
+ */
+export interface ChartDataTableLabels {
+    /** Series column of the per-point table. */
+    series: string;
+    /** Point-index column of the per-point table. */
+    point: string;
+    /** Label column (categorical table, and per-point table when labelled). */
+    label: string;
+    /** Fallback dataset name. Template — `{n}`. */
+    seriesName: string;
+    /** Chart.js point property names — machine tokens, rarely overridden. */
+    x: string;
+    y: string;
+    r: string;
+}
+/** English defaults for {@link ChartDataTableLabels}. */
+export declare const CHART_DATA_TABLE_LABELS: ChartDataTableLabels;
 export interface ChartDataTable {
     columns: string[];
     rows: Array<Array<string | number>>;
@@ -18,6 +47,6 @@ export interface ChartDataLike {
  * coordinates. Categorical charts use a compact wide table; scatter, bubble,
  * and object-valued line charts use one row per point so x/y/r remain distinct.
  */
-export declare function chartToDataTable(params: ChartDataLike): ChartDataTable;
+export declare function chartToDataTable(params: ChartDataLike, labels?: Partial<ChartDataTableLabels>): ChartDataTable;
 export {};
 //# sourceMappingURL=chart-data-table.d.ts.map

package/dist/components/chart-data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-data-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-data-table.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;CACrC;AAED,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE;QACL,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;KAC/B,CAAC;CACH;AAsBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,cAAc,CAqDtE"}
+{"version":3,"file":"chart-data-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-data-table.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAoB;IACnC,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,yDAAyD;AACzD,eAAO,MAAM,uBAAuB,EAAE,oBAQrC,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;CACrC;AAED,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE;QACL,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;KAC/B,CAAC;CACH;AAsBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,aAAa,EACrB,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACrC,cAAc,CA+DhB"}

package/dist/components/chart-data-table.js

@@ -1,3 +1,13 @@
+import { formatMCPUIString } from "../utils/format-string.js";
+const CHART_DATA_TABLE_LABELS = {
+  series: "Series",
+  point: "Point",
+  label: "Label",
+  seriesName: "Series {n}",
+  x: "x",
+  y: "y",
+  r: "r"
+};
 function tableCell(value) {
   if (value == null) return "";
   if (typeof value === "string" || typeof value === "number") return value;
@@ -11,37 +21,38 @@ function tableCell(value) {
 function isPoint(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value) && ("x" in value || "y" in value || "r" in value);
 }
-function chartToDataTable(params) {
+function chartToDataTable(params, labels) {
   var _a, _b;
+  const l = { ...CHART_DATA_TABLE_LABELS, ...labels };
   const datasets = ((_a = params.data) == null ? void 0 : _a.datasets) ?? [];
-  const labels = ((_b = params.data) == null ? void 0 : _b.labels) ?? [];
+  const dataLabels = ((_b = params.data) == null ? void 0 : _b.labels) ?? [];
   const pointData = params.type === "scatter" || params.type === "bubble" || datasets.some((dataset) => {
     var _a2;
     return (_a2 = dataset.data) == null ? void 0 : _a2.some(isPoint);
   });
   if (pointData) {
-    const hasLabels = labels.length > 0;
+    const hasLabels = dataLabels.length > 0;
     const hasRadius = params.type === "bubble" || datasets.some((dataset) => {
       var _a2;
       return (_a2 = dataset.data) == null ? void 0 : _a2.some((value) => isPoint(value) && "r" in value);
     });
     const columns2 = [
-      "Series",
-      "Point",
-      ...hasLabels ? ["Label"] : [],
-      "x",
-      "y",
-      ...hasRadius ? ["r"] : []
+      l.series,
+      l.point,
+      ...hasLabels ? [l.label] : [],
+      l.x,
+      l.y,
+      ...hasRadius ? [l.r] : []
     ];
     const rows2 = [];
     datasets.forEach((dataset, datasetIndex) => {
-      const series = dataset.label || `Series ${datasetIndex + 1}`;
+      const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });
       (dataset.data ?? []).forEach((value, pointIndex) => {
         const point = isPoint(value) ? value : { y: value };
         rows2.push([
           series,
           pointIndex + 1,
-          ...hasLabels ? [tableCell(labels[pointIndex])] : [],
+          ...hasLabels ? [tableCell(dataLabels[pointIndex])] : [],
           tableCell(point.x),
           tableCell(point.y),
           ...hasRadius ? [tableCell(point.r)] : []
@@ -50,15 +61,24 @@ function chartToDataTable(params) {
     });
     return { columns: columns2, rows: rows2 };
   }
-  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => {
-    var _a2;
-    return ((_a2 = dataset.data) == null ? void 0 : _a2.length) ?? 0;
-  }), 0);
-  const columns = ["Label", ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];
+  const rowCount = Math.max(
+    dataLabels.length,
+    ...datasets.map((dataset) => {
+      var _a2;
+      return ((_a2 = dataset.data) == null ? void 0 : _a2.length) ?? 0;
+    }),
+    0
+  );
+  const columns = [
+    l.label,
+    ...datasets.map(
+      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })
+    )
+  ];
   const rows = [];
   for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
     rows.push([
-      tableCell(labels[rowIndex] ?? rowIndex + 1),
+      tableCell(dataLabels[rowIndex] ?? rowIndex + 1),
       ...datasets.map((dataset) => {
         var _a2;
         return tableCell((_a2 = dataset.data) == null ? void 0 : _a2[rowIndex]);
@@ -68,6 +88,7 @@ function chartToDataTable(params) {
   return { columns, rows };
 }
 export {
+  CHART_DATA_TABLE_LABELS,
   chartToDataTable
 };
 //# sourceMappingURL=chart-data-table.js.map

package/dist/components/chart-data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-data-table.js","sources":["../../src/components/chart-data-table.ts"],"sourcesContent":["export interface ChartDataTable {\n  columns: string[];\n  rows: Array<Array<string | number>>;\n}\n\ninterface ChartDatasetLike {\n  label?: string;\n  data?: unknown[];\n}\n\nexport interface ChartDataLike {\n  type?: string;\n  data?: {\n    labels?: Array<string | number>;\n    datasets?: ChartDatasetLike[];\n  };\n}\n\nfunction tableCell(value: unknown): string | number {\n  if (value == null) return '';\n  if (typeof value === 'string' || typeof value === 'number') return value;\n  if (typeof value === 'boolean') return String(value);\n  try {\n    return JSON.stringify(value);\n  } catch {\n    return String(value);\n  }\n}\n\nfunction isPoint(value: unknown): value is Record<string, unknown> {\n  return (\n    value !== null &&\n    typeof value === 'object' &&\n    !Array.isArray(value) &&\n    ('x' in value || 'y' in value || 'r' in value)\n  );\n}\n\n/**\n * Project Chart.js data into an accessible table without flattening point\n * coordinates. Categorical charts use a compact wide table; scatter, bubble,\n * and object-valued line charts use one row per point so x/y/r remain distinct.\n */\nexport function chartToDataTable(params: ChartDataLike): ChartDataTable {\n  const datasets = params.data?.datasets ?? [];\n  const labels = params.data?.labels ?? [];\n  const pointData =\n    params.type === 'scatter' ||\n    params.type === 'bubble' ||\n    datasets.some((dataset) => dataset.data?.some(isPoint));\n\n  if (pointData) {\n    const hasLabels = labels.length > 0;\n    const hasRadius =\n      params.type === 'bubble' ||\n      datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));\n    const columns = [\n      'Series',\n      'Point',\n      ...(hasLabels ? ['Label'] : []),\n      'x',\n      'y',\n      ...(hasRadius ? ['r'] : []),\n    ];\n    const rows: Array<Array<string | number>> = [];\n\n    datasets.forEach((dataset, datasetIndex) => {\n      const series = dataset.label || `Series ${datasetIndex + 1}`;\n      (dataset.data ?? []).forEach((value, pointIndex) => {\n        const point = isPoint(value) ? value : { y: value };\n        rows.push([\n          series,\n          pointIndex + 1,\n          ...(hasLabels ? [tableCell(labels[pointIndex])] : []),\n          tableCell(point.x),\n          tableCell(point.y),\n          ...(hasRadius ? [tableCell(point.r)] : []),\n        ]);\n      });\n    });\n\n    return { columns, rows };\n  }\n\n  const rowCount = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length ?? 0), 0);\n  const columns = ['Label', ...datasets.map((dataset, index) => dataset.label || `Series ${index + 1}`)];\n  const rows: Array<Array<string | number>> = [];\n\n  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {\n    rows.push([\n      tableCell(labels[rowIndex] ?? rowIndex + 1),\n      ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),\n    ]);\n  }\n\n  return { columns, rows };\n}\n"],"names":["_a","columns","rows"],"mappings":"AAkBA,SAAS,UAAU,OAAiC;AAClD,MAAI,SAAS,KAAM,QAAO;AAC1B,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAAU,QAAO;AACnE,MAAI,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AACnD,MAAI;AACF,WAAO,KAAK,UAAU,KAAK;AAAA,EAC7B,QAAQ;AACN,WAAO,OAAO,KAAK;AAAA,EACrB;AACF;AAEA,SAAS,QAAQ,OAAkD;AACjE,SACE,UAAU,QACV,OAAO,UAAU,YACjB,CAAC,MAAM,QAAQ,KAAK,MACnB,OAAO,SAAS,OAAO,SAAS,OAAO;AAE5C;AAOO,SAAS,iBAAiB,QAAuC;AAzBxE;AA0BE,QAAM,aAAW,YAAO,SAAP,mBAAa,aAAY,CAAA;AAC1C,QAAM,WAAS,YAAO,SAAP,mBAAa,WAAU,CAAA;AACtC,QAAM,YACJ,OAAO,SAAS,aAChB,OAAO,SAAS,YAChB,SAAS,KAAK,CAAC,YAAA;AA/BnB,QAAAA;AA+B+B,YAAAA,MAAA,QAAQ,SAAR,gBAAAA,IAAc,KAAK;AAAA,GAAQ;AAExD,MAAI,WAAW;AACb,UAAM,YAAY,OAAO,SAAS;AAClC,UAAM,YACJ,OAAO,SAAS,YAChB,SAAS,KAAK,CAAC,YAAA;AArCrB,UAAAA;AAqCiC,cAAAA,MAAA,QAAQ,SAAR,gBAAAA,IAAc,KAAK,CAAC,UAAU,QAAQ,KAAK,KAAK,OAAO;AAAA,KAAM;AAC1F,UAAMC,WAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA,GAAI,YAAY,CAAC,OAAO,IAAI,CAAA;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,GAAI,YAAY,CAAC,GAAG,IAAI,CAAA;AAAA,IAAC;AAE3B,UAAMC,QAAsC,CAAA;AAE5C,aAAS,QAAQ,CAAC,SAAS,iBAAiB;AAC1C,YAAM,SAAS,QAAQ,SAAS,UAAU,eAAe,CAAC;AAC1D,OAAC,QAAQ,QAAQ,CAAA,GAAI,QAAQ,CAAC,OAAO,eAAe;AAClD,cAAM,QAAQ,QAAQ,KAAK,IAAI,QAAQ,EAAE,GAAG,MAAA;AAC5CA,cAAK,KAAK;AAAA,UACR;AAAA,UACA,aAAa;AAAA,UACb,GAAI,YAAY,CAAC,UAAU,OAAO,UAAU,CAAC,CAAC,IAAI,CAAA;AAAA,UAClD,UAAU,MAAM,CAAC;AAAA,UACjB,UAAU,MAAM,CAAC;AAAA,UACjB,GAAI,YAAY,CAAC,UAAU,MAAM,CAAC,CAAC,IAAI,CAAA;AAAA,QAAC,CACzC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAED,WAAO,EAAE,SAAAD,UAAS,MAAAC,MAAAA;AAAAA,EACpB;AAEA,QAAM,WAAW,KAAK,IAAI,OAAO,QAAQ,GAAG,SAAS,IAAI,CAAC;AAlE5D,QAAAF;AAkEwE,aAAAA,MAAA,QAAQ,SAAR,gBAAAA,IAAc,WAAU;AAAA,GAAC,GAAG,CAAC;AACnG,QAAM,UAAU,CAAC,SAAS,GAAG,SAAS,IAAI,CAAC,SAAS,UAAU,QAAQ,SAAS,UAAU,QAAQ,CAAC,EAAE,CAAC;AACrG,QAAM,OAAsC,CAAA;AAE5C,WAAS,WAAW,GAAG,WAAW,UAAU,YAAY,GAAG;AACzD,SAAK,KAAK;AAAA,MACR,UAAU,OAAO,QAAQ,KAAK,WAAW,CAAC;AAAA,MAC1C,GAAG,SAAS,IAAI,CAAC,YAAA;AAzEvB,YAAAA;AAyEmC,0BAAUA,MAAA,QAAQ,SAAR,gBAAAA,IAAe,SAAS;AAAA,OAAC;AAAA,IAAA,CACjE;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,KAAA;AACpB;"}
+{"version":3,"file":"chart-data-table.js","sources":["../../src/components/chart-data-table.ts"],"sourcesContent":["import { formatMCPUIString } from '../utils/format-string';\n\n/**\n * Column headers and series names of the accessible chart data table.\n *\n * `chartToDataTable` is a pure helper with no access to `MCPUIStrings`, so\n * the wording is injected: it takes an optional trailing `labels` partial,\n * which `ChartJSRenderer` feeds from `useMCPUIStrings()`. Left out, the\n * English defaults below apply — the pre-v6.20.0 behaviour.\n *\n * `x` / `y` / `r` stay untranslated on purpose: they are the Chart.js point\n * property NAMES the cells mirror, not prose.\n *\n * @since v6.20.0\n */\nexport interface ChartDataTableLabels {\n  /** Series column of the per-point table. */\n  series: string;\n  /** Point-index column of the per-point table. */\n  point: string;\n  /** Label column (categorical table, and per-point table when labelled). */\n  label: string;\n  /** Fallback dataset name. Template — `{n}`. */\n  seriesName: string;\n  /** Chart.js point property names — machine tokens, rarely overridden. */\n  x: string;\n  y: string;\n  r: string;\n}\n\n/** English defaults for {@link ChartDataTableLabels}. */\nexport const CHART_DATA_TABLE_LABELS: ChartDataTableLabels = {\n  series: 'Series',\n  point: 'Point',\n  label: 'Label',\n  seriesName: 'Series {n}',\n  x: 'x',\n  y: 'y',\n  r: 'r',\n};\n\nexport interface ChartDataTable {\n  columns: string[];\n  rows: Array<Array<string | number>>;\n}\n\ninterface ChartDatasetLike {\n  label?: string;\n  data?: unknown[];\n}\n\nexport interface ChartDataLike {\n  type?: string;\n  data?: {\n    labels?: Array<string | number>;\n    datasets?: ChartDatasetLike[];\n  };\n}\n\nfunction tableCell(value: unknown): string | number {\n  if (value == null) return '';\n  if (typeof value === 'string' || typeof value === 'number') return value;\n  if (typeof value === 'boolean') return String(value);\n  try {\n    return JSON.stringify(value);\n  } catch {\n    return String(value);\n  }\n}\n\nfunction isPoint(value: unknown): value is Record<string, unknown> {\n  return (\n    value !== null &&\n    typeof value === 'object' &&\n    !Array.isArray(value) &&\n    ('x' in value || 'y' in value || 'r' in value)\n  );\n}\n\n/**\n * Project Chart.js data into an accessible table without flattening point\n * coordinates. Categorical charts use a compact wide table; scatter, bubble,\n * and object-valued line charts use one row per point so x/y/r remain distinct.\n */\nexport function chartToDataTable(\n  params: ChartDataLike,\n  labels?: Partial<ChartDataTableLabels>\n): ChartDataTable {\n  const l: ChartDataTableLabels = { ...CHART_DATA_TABLE_LABELS, ...labels };\n  const datasets = params.data?.datasets ?? [];\n  const dataLabels = params.data?.labels ?? [];\n  const pointData =\n    params.type === 'scatter' ||\n    params.type === 'bubble' ||\n    datasets.some((dataset) => dataset.data?.some(isPoint));\n\n  if (pointData) {\n    const hasLabels = dataLabels.length > 0;\n    const hasRadius =\n      params.type === 'bubble' ||\n      datasets.some((dataset) => dataset.data?.some((value) => isPoint(value) && 'r' in value));\n    const columns = [\n      l.series,\n      l.point,\n      ...(hasLabels ? [l.label] : []),\n      l.x,\n      l.y,\n      ...(hasRadius ? [l.r] : []),\n    ];\n    const rows: Array<Array<string | number>> = [];\n\n    datasets.forEach((dataset, datasetIndex) => {\n      const series = dataset.label || formatMCPUIString(l.seriesName, { n: datasetIndex + 1 });\n      (dataset.data ?? []).forEach((value, pointIndex) => {\n        const point = isPoint(value) ? value : { y: value };\n        rows.push([\n          series,\n          pointIndex + 1,\n          ...(hasLabels ? [tableCell(dataLabels[pointIndex])] : []),\n          tableCell(point.x),\n          tableCell(point.y),\n          ...(hasRadius ? [tableCell(point.r)] : []),\n        ]);\n      });\n    });\n\n    return { columns, rows };\n  }\n\n  const rowCount = Math.max(\n    dataLabels.length,\n    ...datasets.map((dataset) => dataset.data?.length ?? 0),\n    0\n  );\n  const columns = [\n    l.label,\n    ...datasets.map(\n      (dataset, index) => dataset.label || formatMCPUIString(l.seriesName, { n: index + 1 })\n    ),\n  ];\n  const rows: Array<Array<string | number>> = [];\n\n  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {\n    rows.push([\n      tableCell(dataLabels[rowIndex] ?? rowIndex + 1),\n      ...datasets.map((dataset) => tableCell(dataset.data?.[rowIndex])),\n    ]);\n  }\n\n  return { columns, rows };\n}\n"],"names":["_a","columns","rows"],"mappings":"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"}