@seed-ship/mcp-ui-solid 6.0.0 → 6.2.0

package/dist/components/VideoRenderer.cjs

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
-var _tmpl$ = /* @__PURE__ */ web.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__ */ web.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__ */ web.template(`<div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700"><p class="text-sm text-gray-600 dark:text-gray-400">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><div></div><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<video playsinline class="absolute inset-0 w-full h-full object-contain"><track kind=captions>Your browser does not support the video tag.`);
+const ExpandableWrapper = require("./ExpandableWrapper.cjs");
+var _tmpl$ = /* @__PURE__ */ web.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__ */ web.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__ */ web.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__ */ web.template(`<div><!$><!/><div></div><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<video playsinline class="absolute inset-0 w-full h-full object-contain"><track kind=captions>Your browser does not support the video tag.`);
 function parseVideoUrl(url) {
   const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
   if (youtubeMatch) {
@@ -27,6 +28,7 @@ const VideoRenderer = (props) => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
   };
+  const isExpanded = ExpandableWrapper.useExpanded();
   const videoInfo = solidJs.createMemo(() => {
     var _a;
     return parseVideoUrl(((_a = params()) == null ? void 0 : _a.url) || "");
@@ -79,80 +81,99 @@ const VideoRenderer = (props) => {
     console.error("Video error:", e);
     (_a = props.onError) == null ? void 0 : _a.call(props, error);
   };
-  return (() => {
-    var _el$ = web.getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$] = web.getNextMarker(_el$8.nextSibling), _el$4 = _el$9.nextSibling, _el$0 = _el$4.nextSibling, [_el$1, _co$2] = web.getNextMarker(_el$0.nextSibling);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        var _a;
-        return (_a = params()) == null ? void 0 : _a.title;
-      },
-      get children() {
-        var _el$2 = web.getNextElement(_tmpl$), _el$3 = _el$2.firstChild;
-        web.insert(_el$3, () => params().title);
-        return _el$2;
-      }
-    }), _el$9, _co$);
-    web.insert(_el$4, web.createComponent(solidJs.Show, {
-      get when() {
-        return embedUrl();
-      },
-      get fallback() {
-        return (
-          // Direct video file
-          (() => {
-            var _el$10 = web.getNextElement(_tmpl$5);
-            _el$10.addEventListener("error", handleVideoError);
-            web.effect((_p$) => {
-              var _a, _b, _c, _d, _e, _f;
-              var _v$3 = (_a = params()) == null ? void 0 : _a.url, _v$4 = (_b = params()) == null ? void 0 : _b.poster, _v$5 = (_c = params()) == null ? void 0 : _c.autoplay, _v$6 = ((_d = params()) == null ? void 0 : _d.controls) !== false, _v$7 = (_e = params()) == null ? void 0 : _e.loop, _v$8 = (_f = params()) == null ? void 0 : _f.muted;
-              _v$3 !== _p$.e && web.setAttribute(_el$10, "src", _p$.e = _v$3);
-              _v$4 !== _p$.t && web.setAttribute(_el$10, "poster", _p$.t = _v$4);
-              _v$5 !== _p$.a && web.setProperty(_el$10, "autoplay", _p$.a = _v$5);
-              _v$6 !== _p$.o && web.setProperty(_el$10, "controls", _p$.o = _v$6);
-              _v$7 !== _p$.i && web.setProperty(_el$10, "loop", _p$.i = _v$7);
-              _v$8 !== _p$.n && web.setProperty(_el$10, "muted", _p$.n = _v$8);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0,
-              o: void 0,
-              i: void 0,
-              n: void 0
-            });
-            return _el$10;
-          })()
-        );
-      },
-      get children() {
-        var _el$5 = web.getNextElement(_tmpl$2);
-        web.effect((_p$) => {
+  return web.createComponent(ExpandableWrapper.ExpandableWrapper, {
+    get title() {
+      var _a;
+      return ((_a = params()) == null ? void 0 : _a.title) || "Video";
+    },
+    get copyData() {
+      var _a;
+      return ((_a = params()) == null ? void 0 : _a.url) || "";
+    },
+    copyLabel: "Copy video URL",
+    get children() {
+      var _el$ = web.getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$] = web.getNextMarker(_el$8.nextSibling), _el$4 = _el$9.nextSibling, _el$0 = _el$4.nextSibling, [_el$1, _co$2] = web.getNextMarker(_el$0.nextSibling);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
           var _a;
-          var _v$ = embedUrl(), _v$2 = ((_a = params()) == null ? void 0 : _a.title) || "Video";
-          _v$ !== _p$.e && web.setAttribute(_el$5, "src", _p$.e = _v$);
-          _v$2 !== _p$.t && web.setAttribute(_el$5, "title", _p$.t = _v$2);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        return _el$5;
-      }
-    }));
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        var _a;
-        return (_a = params()) == null ? void 0 : _a.caption;
-      },
-      get children() {
-        var _el$6 = web.getNextElement(_tmpl$3), _el$7 = _el$6.firstChild;
-        web.insert(_el$7, () => params().caption);
-        return _el$6;
-      }
-    }), _el$1, _co$2);
-    web.effect(() => web.className(_el$4, `relative ${aspectClass()} bg-black`));
-    return _el$;
-  })();
+          return (_a = params()) == null ? void 0 : _a.title;
+        },
+        get children() {
+          var _el$2 = web.getNextElement(_tmpl$), _el$3 = _el$2.firstChild;
+          web.insert(_el$3, () => params().title);
+          return _el$2;
+        }
+      }), _el$9, _co$);
+      web.insert(_el$4, web.createComponent(solidJs.Show, {
+        get when() {
+          return embedUrl();
+        },
+        get fallback() {
+          return (
+            // Direct video file
+            (() => {
+              var _el$10 = web.getNextElement(_tmpl$5);
+              _el$10.addEventListener("error", handleVideoError);
+              web.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 && web.setAttribute(_el$10, "src", _p$.e = _v$5);
+                _v$6 !== _p$.t && web.setAttribute(_el$10, "poster", _p$.t = _v$6);
+                _v$7 !== _p$.a && web.setProperty(_el$10, "autoplay", _p$.a = _v$7);
+                _v$8 !== _p$.o && web.setProperty(_el$10, "controls", _p$.o = _v$8);
+                _v$9 !== _p$.i && web.setProperty(_el$10, "loop", _p$.i = _v$9);
+                _v$0 !== _p$.n && web.setProperty(_el$10, "muted", _p$.n = _v$0);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0,
+                n: void 0
+              });
+              return _el$10;
+            })()
+          );
+        },
+        get children() {
+          var _el$5 = web.getNextElement(_tmpl$2);
+          web.effect((_p$) => {
+            var _a;
+            var _v$ = embedUrl(), _v$2 = ((_a = params()) == null ? void 0 : _a.title) || "Video";
+            _v$ !== _p$.e && web.setAttribute(_el$5, "src", _p$.e = _v$);
+            _v$2 !== _p$.t && web.setAttribute(_el$5, "title", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$5;
+        }
+      }));
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          var _a;
+          return (_a = params()) == null ? void 0 : _a.caption;
+        },
+        get children() {
+          var _el$6 = web.getNextElement(_tmpl$3), _el$7 = _el$6.firstChild;
+          web.insert(_el$7, () => params().caption);
+          return _el$6;
+        }
+      }), _el$1, _co$2);
+      web.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 && web.className(_el$, _p$.e = _v$3);
+        _v$4 !== _p$.t && web.className(_el$4, _p$.t = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
 };
 function isSupportedVideoUrl(url) {
   const info = parseVideoUrl(url);

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'\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/**\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\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    <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      {/* 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 */}\n      <div class={`relative ${aspectClass()} bg-black`}>\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\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">{params()!.caption}</p>\n        </div>\n      </Show>\n    </div>\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","videoInfo","createMemo","embedUrl","info","p","ytParams","URLSearchParams","autoplay","controls","loop","mute","muted","startTime","set","String","vParams","aspectClass","aspectRatio","handleVideoError","e","error","Error","console","onError","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$4","_el$0","_el$1","_co$2","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_el$3","fallback","_el$10","_tmpl$5","addEventListener","_$effect","_p$","_v$3","_v$4","poster","_v$5","_v$6","_v$7","_v$8","_$setAttribute","t","a","_$setProperty","o","i","n","undefined","_el$5","_tmpl$2","_v$","_v$2","caption","_el$6","_tmpl$3","_el$7","_$className","isSupportedVideoUrl","getVideoProvider"],"mappings":";;;;;AA2CA,SAASA,cAAcC,KAAwB;AAM7C,QAAMC,eAAeD,IAAIE,MACvB,4EACF;AACA,MAAID,cAAc;AAChB,WAAO;AAAA,MAAEE,UAAU;AAAA,MAAWC,SAASH,aAAa,CAAC;AAAA,IAAA;AAAA,EACvD;AAKA,QAAMI,aAAaL,IAAIE,MAAM,mDAAmD;AAChF,MAAIG,YAAY;AACd,WAAO;AAAA,MAAEF,UAAU;AAAA,MAASC,SAASC,WAAW,CAAC;AAAA,IAAA;AAAA,EACnD;AAGA,SAAO;AAAA,IAAEF,UAAU;AAAA,EAAA;AACrB;AAEO,MAAMG,gBAAgDC,CAAAA,UAAU;AACrE,QAAMC,SAASA,MAAAA;;AAAMD,iBAAMC,YAAWD,WAAME,cAANF,mBAAiBC;AAAAA;AAEvD,QAAME,YAAYC,QAAAA,WAAW,MAAA;;AAAMZ,2BAAcS,kBAAAA,mBAAUR,QAAO,EAAE;AAAA,GAAC;AAErE,QAAMY,WAAWD,QAAAA,WAAW,MAAM;AAChC,UAAME,OAAOH,UAAAA;AACb,UAAMI,IAAIN,OAAAA;AAEV,QAAI,EAACM,uBAAGd,KAAK,QAAO;AAEpB,YAAQa,KAAKV,UAAAA;AAAAA,MACX,KAAK,WAAW;AACd,cAAMY,WAAW,IAAIC,gBAAgB;AAAA,UACnCC,UAAUH,EAAEG,WAAW,MAAM;AAAA,UAC7BC,UAAUJ,EAAEI,aAAa,QAAQ,MAAM;AAAA,UACvCC,MAAML,EAAEK,OAAO,MAAM;AAAA,UACrBC,MAAMN,EAAEO,QAAQ,MAAM;AAAA,QAAA,CACvB;AACD,YAAIP,EAAEQ,WAAW;AACfP,mBAASQ,IAAI,SAASC,OAAOV,EAAEQ,SAAS,CAAC;AAAA,QAC3C;AAEA,eAAO,0CAA0CT,KAAKT,OAAO,IAAIW,QAAQ;AAAA,MAC3E;AAAA,MAEA,KAAK,SAAS;AACZ,cAAMU,UAAU,IAAIT,gBAAgB;AAAA,UAClCC,UAAUH,EAAEG,WAAW,MAAM;AAAA,UAC7BE,MAAML,EAAEK,OAAO,MAAM;AAAA,UACrBE,OAAOP,EAAEO,QAAQ,MAAM;AAAA,QAAA,CACxB;AACD,eAAO,kCAAkCR,KAAKT,OAAO,IAAIqB,OAAO;AAAA,MAClE;AAAA,MAEA;AACE,eAAO;AAAA,IAAA;AAAA,EAEb,CAAC;AAED,QAAMC,cAAcA,MAAM;;AACxB,aAAQlB,YAAAA,MAAAA,mBAAUmB,aAAAA;AAAAA,MAChB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAMC,mBAAmBA,CAACC,MAAa;;AACrC,UAAMC,QAAQ,IAAIC,MAAM,sBAAsB;AAC9CC,YAAQF,MAAM,gBAAgBD,CAAC;AAC/BtB,gBAAM0B,YAAN1B,+BAAgBuB;AAAAA,EAClB;AAEA,UAAA,MAAA;AAAA,QAAAI,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAA,CAAAC,OAAAC,IAAA,IAAAC,IAAAA,cAAAJ,MAAAK,WAAA,GAAAC,QAAAJ,MAAAG,aAAAE,QAAAD,MAAAD,aAAA,CAAAG,OAAAC,KAAA,IAAAL,kBAAAG,MAAAF,WAAA;AAAAK,eAAAb,MAAAc,IAAAA,gBAGKC,cAAI;AAAA,MAAA,IAACC,OAAI;;AAAA,gBAAE1C,kBAAAA,mBAAU2C;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAlB,IAAAA,eAAAmB,MAAA,GAAAC,QAAAF,MAAAf;AAAAS,YAAAA,OAAAQ,OAAA,MAE0C/C,OAAAA,EAAU2C,KAAK;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAd,OAAAC,IAAA;AAAAO,eAAAJ,OAAAK,IAAAA,gBAMjFC,cAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAEtC,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAChB4C,WAAQ;AAAA;AAAA;AAAA,WACN,MAAA;AAAA,gBAAAC,SAAAtB,IAAAA,eAAAuB,OAAA;AAAAD,mBAAAE,iBAAA,SAUW/B,gBAAgB;AAAAgC,gBAAAA,OAAAC,CAAAA,QAAA;;AAAA,kBAAAC,QARpBtD,kBAAAA,mBAAUR,KAAG+D,QACVvD,YAAAA,MAAAA,mBAAUwD,QAAMC,QACdzD,kBAAAA,mBAAUS,UAAQiD,SAClB1D,YAAAA,MAAAA,mBAAUU,cAAa,OAAKiD,QAChC3D,kBAAAA,mBAAUW,MAAIiD,QACb5D,YAAAA,MAAAA,mBAAUa;AAAKyC,uBAAAD,IAAAhC,KAAAwC,IAAAA,aAAAZ,QAAA,OAAAI,IAAAhC,IAAAiC,IAAA;AAAAC,uBAAAF,IAAAS,KAAAD,IAAAA,aAAAZ,QAAA,UAAAI,IAAAS,IAAAP,IAAA;AAAAE,uBAAAJ,IAAAU,KAAAC,IAAAA,YAAAf,QAAA,YAAAI,IAAAU,IAAAN,IAAA;AAAAC,uBAAAL,IAAAY,KAAAD,IAAAA,YAAAf,QAAA,YAAAI,IAAAY,IAAAP,IAAA;AAAAC,uBAAAN,IAAAa,KAAAF,IAAAA,YAAAf,QAAA,QAAAI,IAAAa,IAAAP,IAAA;AAAAC,uBAAAP,IAAAc,KAAAH,IAAAA,YAAAf,QAAA,SAAAI,IAAAc,IAAAP,IAAA;AAAA,qBAAAP;AAAAA,YAAA,GAAA;AAAA,cAAAhC,GAAA+C;AAAAA,cAAAN,GAAAM;AAAAA,cAAAL,GAAAK;AAAAA,cAAAH,GAAAG;AAAAA,cAAAF,GAAAE;AAAAA,cAAAD,GAAAC;AAAAA,YAAAA,CAAA;AAAA,mBAAAnB;AAAAA,UAAA,GAAA;AAAA;AAAA,MAAA;AAAA,MAAA,IAAAL,WAAA;AAAA,YAAAyB,QAAA1C,IAAAA,eAAA2C,OAAA;AAAAlB,YAAAA,OAAAC,CAAAA,QAAA;;AAAA,cAAAkB,MAYnBnE,SAAAA,GAAWoE,SACTxE,YAAAA,MAAAA,mBAAU2C,UAAS;AAAO4B,kBAAAlB,IAAAhC,KAAAwC,IAAAA,aAAAQ,OAAA,OAAAhB,IAAAhC,IAAAkD,GAAA;AAAAC,mBAAAnB,IAAAS,KAAAD,IAAAA,aAAAQ,OAAA,SAAAhB,IAAAS,IAAAU,IAAA;AAAA,iBAAAnB;AAAAA,QAAA,GAAA;AAAA,UAAAhC,GAAA+C;AAAAA,UAAAN,GAAAM;AAAAA,QAAAA,CAAA;AAAA,eAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,CAAA;AAAA9B,eAAAb,MAAAc,IAAAA,gBAUtCC,cAAI;AAAA,MAAA,IAACC,OAAI;;AAAA,gBAAE1C,kBAAAA,mBAAUyE;AAAAA,MAAO;AAAA,MAAA,IAAA7B,WAAA;AAAA,YAAA8B,QAAA/C,IAAAA,eAAAgD,OAAA,GAAAC,QAAAF,MAAA5C;AAAAS,YAAAA,OAAAqC,OAAA,MAE4B5E,OAAAA,EAAUyE,OAAO;AAAA,eAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAArC,OAAAC,KAAA;AAAAc,eAAA,MAAAyB,IAAAA,UAAA1C,OApC9D,YAAYjB,YAAAA,CAAa,WAAW,CAAA;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAyCtD;AAKO,SAASoD,oBAAoBtF,KAAsB;AACxD,QAAMa,OAAOd,cAAcC,GAAG;AAC9B,SAAOa,KAAKV,aAAa,YAAYH,IAAIE,MAAM,wBAAwB,MAAM;AAC/E;AAKO,SAASqF,iBAAiBvF,KAA4B;AAC3D,SAAOD,cAAcC,GAAG,EAAEG;AAC5B;;;;"}
+{"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/**\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    >\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","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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"}

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;AAEjE,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;CACjC;AAED;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAsCnD,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,kBAAkB,CA8GvD,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;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;CACjC;AAED;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAsCnD,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,kBAAkB,CAuHvD,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,6 +1,7 @@
-import { getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, setProperty, className } from "solid-js/web";
+import { createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, setProperty, className } from "solid-js/web";
 import { createMemo, Show } from "solid-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"><p class="text-sm text-gray-600 dark:text-gray-400">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><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 { 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.`);
 function parseVideoUrl(url) {
   const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
   if (youtubeMatch) {
@@ -25,6 +26,7 @@ const VideoRenderer = (props) => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
   };
+  const isExpanded = useExpanded();
   const videoInfo = createMemo(() => {
     var _a;
     return parseVideoUrl(((_a = params()) == null ? void 0 : _a.url) || "");
@@ -77,80 +79,99 @@ const VideoRenderer = (props) => {
     console.error("Video error:", e);
     (_a = props.onError) == null ? void 0 : _a.call(props, error);
   };
-  return (() => {
-    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);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        var _a;
-        return (_a = params()) == null ? void 0 : _a.title;
-      },
-      get children() {
-        var _el$2 = getNextElement(_tmpl$), _el$3 = _el$2.firstChild;
-        insert(_el$3, () => params().title);
-        return _el$2;
-      }
-    }), _el$9, _co$);
-    insert(_el$4, createComponent(Show, {
-      get when() {
-        return embedUrl();
-      },
-      get fallback() {
-        return (
-          // Direct video file
-          (() => {
-            var _el$10 = getNextElement(_tmpl$5);
-            _el$10.addEventListener("error", handleVideoError);
-            effect((_p$) => {
-              var _a, _b, _c, _d, _e, _f;
-              var _v$3 = (_a = params()) == null ? void 0 : _a.url, _v$4 = (_b = params()) == null ? void 0 : _b.poster, _v$5 = (_c = params()) == null ? void 0 : _c.autoplay, _v$6 = ((_d = params()) == null ? void 0 : _d.controls) !== false, _v$7 = (_e = params()) == null ? void 0 : _e.loop, _v$8 = (_f = params()) == null ? void 0 : _f.muted;
-              _v$3 !== _p$.e && setAttribute(_el$10, "src", _p$.e = _v$3);
-              _v$4 !== _p$.t && setAttribute(_el$10, "poster", _p$.t = _v$4);
-              _v$5 !== _p$.a && setProperty(_el$10, "autoplay", _p$.a = _v$5);
-              _v$6 !== _p$.o && setProperty(_el$10, "controls", _p$.o = _v$6);
-              _v$7 !== _p$.i && setProperty(_el$10, "loop", _p$.i = _v$7);
-              _v$8 !== _p$.n && setProperty(_el$10, "muted", _p$.n = _v$8);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0,
-              o: void 0,
-              i: void 0,
-              n: void 0
-            });
-            return _el$10;
-          })()
-        );
-      },
-      get children() {
-        var _el$5 = getNextElement(_tmpl$2);
-        effect((_p$) => {
+  return createComponent(ExpandableWrapper, {
+    get title() {
+      var _a;
+      return ((_a = params()) == null ? void 0 : _a.title) || "Video";
+    },
+    get copyData() {
+      var _a;
+      return ((_a = params()) == null ? void 0 : _a.url) || "";
+    },
+    copyLabel: "Copy video URL",
+    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);
+      insert(_el$, createComponent(Show, {
+        get when() {
           var _a;
-          var _v$ = embedUrl(), _v$2 = ((_a = params()) == null ? void 0 : _a.title) || "Video";
-          _v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$5, "title", _p$.t = _v$2);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        return _el$5;
-      }
-    }));
-    insert(_el$, createComponent(Show, {
-      get when() {
-        var _a;
-        return (_a = params()) == null ? void 0 : _a.caption;
-      },
-      get children() {
-        var _el$6 = getNextElement(_tmpl$3), _el$7 = _el$6.firstChild;
-        insert(_el$7, () => params().caption);
-        return _el$6;
-      }
-    }), _el$1, _co$2);
-    effect(() => className(_el$4, `relative ${aspectClass()} bg-black`));
-    return _el$;
-  })();
+          return (_a = params()) == null ? void 0 : _a.title;
+        },
+        get children() {
+          var _el$2 = getNextElement(_tmpl$), _el$3 = _el$2.firstChild;
+          insert(_el$3, () => params().title);
+          return _el$2;
+        }
+      }), _el$9, _co$);
+      insert(_el$4, createComponent(Show, {
+        get when() {
+          return embedUrl();
+        },
+        get fallback() {
+          return (
+            // Direct video file
+            (() => {
+              var _el$10 = getNextElement(_tmpl$5);
+              _el$10.addEventListener("error", handleVideoError);
+              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);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0,
+                n: void 0
+              });
+              return _el$10;
+            })()
+          );
+        },
+        get children() {
+          var _el$5 = getNextElement(_tmpl$2);
+          effect((_p$) => {
+            var _a;
+            var _v$ = embedUrl(), _v$2 = ((_a = params()) == null ? void 0 : _a.title) || "Video";
+            _v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$5, "title", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$5;
+        }
+      }));
+      insert(_el$, createComponent(Show, {
+        get when() {
+          var _a;
+          return (_a = params()) == null ? void 0 : _a.caption;
+        },
+        get children() {
+          var _el$6 = getNextElement(_tmpl$3), _el$7 = _el$6.firstChild;
+          insert(_el$7, () => params().caption);
+          return _el$6;
+        }
+      }), _el$1, _co$2);
+      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);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
 };
 function isSupportedVideoUrl(url) {
   const info = parseVideoUrl(url);

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'\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/**\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\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    <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      {/* 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 */}\n      <div class={`relative ${aspectClass()} bg-black`}>\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\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">{params()!.caption}</p>\n        </div>\n      </Show>\n    </div>\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","videoInfo","createMemo","embedUrl","info","p","ytParams","URLSearchParams","autoplay","controls","loop","mute","muted","startTime","set","String","vParams","aspectClass","aspectRatio","handleVideoError","e","error","Error","console","onError","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$4","_el$0","_el$1","_co$2","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_el$3","fallback","_el$10","_tmpl$5","addEventListener","_$effect","_p$","_v$3","_v$4","poster","_v$5","_v$6","_v$7","_v$8","_$setAttribute","t","a","_$setProperty","o","i","n","undefined","_el$5","_tmpl$2","_v$","_v$2","caption","_el$6","_tmpl$3","_el$7","_$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'\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/**\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    >\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","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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"}

package/dist/index.cjs

@@ -15,6 +15,7 @@ require("./components/ActionGroupRenderer.cjs");
 require("./components/ChartJSRenderer.cjs");
 require("./components/LightboxOverlay.cjs");
 require("./components/ImageGalleryRenderer.cjs");
+const ExpandableWrapper = require("./components/ExpandableWrapper.cjs");
 require("./components/CodeBlockRenderer.cjs");
 const AgentCard = require("./components/AgentCard.cjs");
 const SplitStepper = require("./components/SplitStepper.cjs");
@@ -26,7 +27,6 @@ const ElicitationForm = require("./components/ElicitationForm.cjs");
 const DraggableGridItem = require("./components/DraggableGridItem.cjs");
 const ResizeHandle = require("./components/ResizeHandle.cjs");
 const EditableUIResourceRenderer = require("./components/EditableUIResourceRenderer.cjs");
-const ExpandableWrapper = require("./components/ExpandableWrapper.cjs");
 const ComponentToolbar = require("./components/ComponentToolbar.cjs");
 const FeedbackInline = require("./components/FeedbackInline.cjs");
 const useChatBus = require("./hooks/useChatBus.cjs");
@@ -66,6 +66,8 @@ exports.UIResourceRenderer = UIResourceRenderer.UIResourceRenderer;
 exports.renderCellValue = UIResourceRenderer.renderCellValue;
 exports.StreamingUIRenderer = StreamingUIRenderer.StreamingUIRenderer;
 exports.GenerativeUIErrorBoundary = GenerativeUIErrorBoundary.GenerativeUIErrorBoundary;
+exports.ExpandableWrapper = ExpandableWrapper.ExpandableWrapper;
+exports.useExpanded = ExpandableWrapper.useExpanded;
 exports.AgentCard = AgentCard.AgentCard;
 exports.AgentStatusBadge = AgentCard.AgentStatusBadge;
 exports.SplitStepper = SplitStepper.SplitStepper;
@@ -77,8 +79,6 @@ exports.ElicitationForm = ElicitationForm.ElicitationForm;
 exports.DraggableGridItem = DraggableGridItem.DraggableGridItem;
 exports.ResizeHandle = ResizeHandle.ResizeHandle;
 exports.EditableUIResourceRenderer = EditableUIResourceRenderer.EditableUIResourceRenderer;
-exports.ExpandableWrapper = ExpandableWrapper.ExpandableWrapper;
-exports.useExpanded = ExpandableWrapper.useExpanded;
 exports.ComponentToolbar = ComponentToolbar.ComponentToolbar;
 exports.FeedbackInline = FeedbackInline.FeedbackInline;
 exports.ChatBusProvider = useChatBus.ChatBusProvider;

package/dist/index.js

@@ -13,6 +13,7 @@ import "./components/ActionGroupRenderer.js";
 import "./components/ChartJSRenderer.js";
 import "./components/LightboxOverlay.js";
 import "./components/ImageGalleryRenderer.js";
+import { ExpandableWrapper, useExpanded } from "./components/ExpandableWrapper.js";
 import "./components/CodeBlockRenderer.js";
 import { AgentCard, AgentStatusBadge } from "./components/AgentCard.js";
 import { SplitStepper } from "./components/SplitStepper.js";
@@ -24,7 +25,6 @@ import { ElicitationForm } from "./components/ElicitationForm.js";
 import { DraggableGridItem } from "./components/DraggableGridItem.js";
 import { ResizeHandle } from "./components/ResizeHandle.js";
 import { EditableUIResourceRenderer } from "./components/EditableUIResourceRenderer.js";
-import { ExpandableWrapper, useExpanded } from "./components/ExpandableWrapper.js";
 import { ComponentToolbar } from "./components/ComponentToolbar.js";
 import { FeedbackInline } from "./components/FeedbackInline.js";
 import { ChatBusProvider, useChatBus } from "./hooks/useChatBus.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/CarouselRenderer.tsx

@@ -2,6 +2,7 @@ import { Component, For, createSignal } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import { useRenderContext } from './RenderContext'
 import type { UIComponent } from '../types'
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 
 export interface CarouselRendererProps {
     items: UIComponent[]
@@ -12,6 +13,7 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
     let scrollContainer: HTMLDivElement | undefined
     const [canScrollLeft, setCanScrollLeft] = createSignal(false)
     const [canScrollRight, setCanScrollRight] = createSignal(true)
+    const isExpanded = useExpanded()
 
     // Use render context to avoid circular dependency
     const { renderComponent } = useRenderContext()
@@ -34,7 +36,12 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
     }
 
     return (
-        <div class="relative group">
+        <ExpandableWrapper
+            title={'Carousel'}
+            copyData={JSON.stringify(props.items, null, 2)}
+            copyLabel="Copy items (JSON)"
+        >
+        <div class={`relative group ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>
             {/* Navigation Buttons */}
             <button
                 onClick={() => scroll('left')}
@@ -74,5 +81,6 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
                 </For>
             </div>
         </div>
+        </ExpandableWrapper>
     )
 }