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

package/dist/components/ImageGalleryRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGalleryRenderer.cjs","sources":["../../src/components/ImageGalleryRenderer.tsx"],"sourcesContent":["/**\n * ImageGalleryRenderer - Gallery view for multiple images\n * Sprint 5: Media Components\n */\n\nimport { Component, createSignal, For, Show } from 'solid-js'\nimport type { UIComponent, ImageGalleryParams } from '../types'\nimport { LightboxOverlay } from './LightboxOverlay'\n\nexport interface ImageGalleryRendererProps {\n  /**\n   * UIComponent containing gallery params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct gallery params (alternative to component)\n   */\n  params?: ImageGalleryParams\n}\n\nexport const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {\n  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)\n\n  const params = () => props.params || (props.component?.params as ImageGalleryParams)\n\n  const columnsClass = () => {\n    switch (params()?.columns) {\n      case 2:\n        return 'grid-cols-2'\n      case 3:\n        return 'grid-cols-3'\n      case 4:\n        return 'grid-cols-4'\n      case 5:\n        return 'grid-cols-5'\n      default:\n        return 'grid-cols-3'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default:\n        return 'gap-2'\n    }\n  }\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '16:9':\n        return 'aspect-video'\n      case '4:3':\n        return 'aspect-[4/3]'\n      default:\n        return ''\n    }\n  }\n\n  const handleImageClick = (index: number) => {\n    if (params()?.lightbox !== false) {\n      setSelectedIndex(index)\n    }\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      {/* Gallery Grid */}\n      <div class={`grid ${columnsClass()} ${gapClass()} p-4`}>\n        <For each={params()?.images}>\n          {(image, index) => (\n            <button\n              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}\n              onClick={() => handleImageClick(index())}\n              type=\"button\"\n              aria-label={image.alt || `View image ${index() + 1}`}\n            >\n              <img\n                src={image.thumbnail || image.url}\n                alt={image.alt || `Image ${index() + 1}`}\n                srcset={image.srcset}\n                sizes={image.sizes}\n                class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200\"\n                loading=\"lazy\"\n              />\n\n              {/* Hover overlay */}\n              <div class=\"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200\" />\n\n              {/* Caption overlay */}\n              <Show when={image.caption && params()?.showCaptions}>\n                <div class=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4\">\n                  <span class=\"truncate block\">{image.caption}</span>\n                </div>\n              </Show>\n\n              {/* Zoom icon on hover */}\n              <Show when={params()?.lightbox !== false}>\n                <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n                  <div class=\"bg-white/90 dark:bg-gray-800/90 rounded-full p-2\">\n                    <svg\n                      class=\"w-5 h-5 text-gray-700 dark:text-gray-200\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n\n      {/* Lightbox */}\n      <LightboxOverlay\n        images={params()?.images || []}\n        selectedIndex={selectedIndex()}\n        onClose={() => setSelectedIndex(null)}\n        onNavigate={setSelectedIndex}\n      />\n    </div>\n  )\n}\n"],"names":["ImageGalleryRenderer","props","selectedIndex","setSelectedIndex","createSignal","params","component","columnsClass","columns","gapClass","gap","aspectClass","aspectRatio","handleImageClick","index","lightbox","_el$","_$getNextElement","_tmpl$2","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$4","_el$7","_el$8","_co$2","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_el$3","For","each","images","image","_el$9","_tmpl$5","_el$0","_el$1","_el$13","_el$14","_co$3","_el$15","_el$16","_co$4","$$click","_$memo","caption","showCaptions","_el$10","_tmpl$3","_el$11","_tmpl$4","_$effect","_p$","_v$","_v$2","alt","_v$3","thumbnail","url","_v$4","_v$5","srcset","_v$6","sizes","e","_$className","t","_$setAttribute","a","o","i","n","undefined","_$runHydrationEvents","LightboxOverlay","onClose","onNavigate","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ImageGalleryRenderer.cjs","sources":["../../src/components/ImageGalleryRenderer.tsx"],"sourcesContent":["/**\n * ImageGalleryRenderer - Gallery view for multiple images\n * Sprint 5: Media Components\n */\n\nimport { Component, createSignal, For, Show } from 'solid-js'\nimport type { UIComponent, ImageGalleryParams } from '../types'\nimport { LightboxOverlay } from './LightboxOverlay'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\n\nexport interface ImageGalleryRendererProps {\n  /**\n   * UIComponent containing gallery params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct gallery params (alternative to component)\n   */\n  params?: ImageGalleryParams\n}\n\n/** Build a newline-separated list of image URLs (with captions when present)\n * for the ExpandableWrapper copy button. v6.2.0. */\nfunction imagesToTextList(p: ImageGalleryParams | undefined): string {\n  if (!p) return ''\n  return (p.images ?? [])\n    .map((img) => (img.caption ? `${img.url}\\t${img.caption}` : img.url))\n    .join('\\n')\n}\n\nexport const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {\n  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)\n  const isExpanded = useExpanded()\n\n  const params = () => props.params || (props.component?.params as ImageGalleryParams)\n\n  const columnsClass = () => {\n    switch (params()?.columns) {\n      case 2:\n        return 'grid-cols-2'\n      case 3:\n        return 'grid-cols-3'\n      case 4:\n        return 'grid-cols-4'\n      case 5:\n        return 'grid-cols-5'\n      default:\n        return 'grid-cols-3'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default:\n        return 'gap-2'\n    }\n  }\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '16:9':\n        return 'aspect-video'\n      case '4:3':\n        return 'aspect-[4/3]'\n      default:\n        return ''\n    }\n  }\n\n  const handleImageClick = (index: number) => {\n    if (params()?.lightbox !== false) {\n      setSelectedIndex(index)\n    }\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || 'Gallery'}\n      copyData={imagesToTextList(params())}\n      copyLabel=\"Copy image URLs\"\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 flex-shrink-0\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Gallery Grid */}\n      <div class={`grid ${columnsClass()} ${gapClass()} p-4 ${isExpanded() ? 'flex-1 min-h-0 overflow-auto' : ''}`}>\n        <For each={params()?.images}>\n          {(image, index) => (\n            <button\n              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}\n              onClick={() => handleImageClick(index())}\n              type=\"button\"\n              aria-label={image.alt || `View image ${index() + 1}`}\n            >\n              <img\n                src={image.thumbnail || image.url}\n                alt={image.alt || `Image ${index() + 1}`}\n                srcset={image.srcset}\n                sizes={image.sizes}\n                class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200\"\n                loading=\"lazy\"\n              />\n\n              {/* Hover overlay */}\n              <div class=\"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200\" />\n\n              {/* Caption overlay */}\n              <Show when={image.caption && params()?.showCaptions}>\n                <div class=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4\">\n                  <span class=\"truncate block\">{image.caption}</span>\n                </div>\n              </Show>\n\n              {/* Zoom icon on hover */}\n              <Show when={params()?.lightbox !== false}>\n                <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n                  <div class=\"bg-white/90 dark:bg-gray-800/90 rounded-full p-2\">\n                    <svg\n                      class=\"w-5 h-5 text-gray-700 dark:text-gray-200\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n\n      {/* Lightbox */}\n      <LightboxOverlay\n        images={params()?.images || []}\n        selectedIndex={selectedIndex()}\n        onClose={() => setSelectedIndex(null)}\n        onNavigate={setSelectedIndex}\n      />\n    </div>\n    </ExpandableWrapper>\n  )\n}\n"],"names":["imagesToTextList","p","images","map","img","caption","url","join","ImageGalleryRenderer","props","selectedIndex","setSelectedIndex","createSignal","isExpanded","useExpanded","params","component","columnsClass","columns","gapClass","gap","aspectClass","aspectRatio","handleImageClick","index","lightbox","_$createComponent","ExpandableWrapper","title","copyData","copyLabel","children","_el$","_$getNextElement","_tmpl$2","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$4","_el$7","_el$8","_co$2","_$insert","Show","when","_el$2","_tmpl$","_el$3","For","each","image","_el$9","_tmpl$5","_el$0","_el$1","_el$13","_el$14","_co$3","_el$15","_el$16","_co$4","$$click","_$memo","showCaptions","_el$10","_tmpl$3","_el$11","_tmpl$4","_$effect","_p$","_v$3","_v$4","alt","_v$5","thumbnail","_v$6","_v$7","srcset","_v$8","sizes","e","_$className","t","_$setAttribute","a","o","i","n","undefined","_$runHydrationEvents","LightboxOverlay","onClose","onNavigate","_v$","_v$2","_$delegateEvents"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageGalleryRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ImageGalleryRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAA2B,MAAM,UAAU,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAG/D,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AAED,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC,yBAAyB,CA4HrE,CAAA"}
+{"version":3,"file":"ImageGalleryRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ImageGalleryRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAA2B,MAAM,UAAU,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI/D,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AAWD,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC,yBAAyB,CAqIrE,CAAA"}

package/dist/components/ImageGalleryRenderer.js

@@ -1,9 +1,15 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, memo, effect, className, setAttribute, runHydrationEvents } from "solid-js/web";
+import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, memo, effect, className, setAttribute, runHydrationEvents } from "solid-js/web";
 import { createSignal, Show, For } from "solid-js";
 import { LightboxOverlay } from "./LightboxOverlay.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(`<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$3 = /* @__PURE__ */ template(`<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4"><span class="truncate block">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"><div class="bg-white/90 dark:bg-gray-800/90 rounded-full p-2"><svg class="w-5 h-5 text-gray-700 dark:text-gray-200"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7">`), _tmpl$5 = /* @__PURE__ */ template(`<button type=button><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"loading=lazy><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200"></div><!$><!/><!$><!/>`, true, false, false);
+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 flex-shrink-0"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><div></div><!$><!/>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4"><span class="truncate block">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"><div class="bg-white/90 dark:bg-gray-800/90 rounded-full p-2"><svg class="w-5 h-5 text-gray-700 dark:text-gray-200"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7">`), _tmpl$5 = /* @__PURE__ */ template(`<button type=button><img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"loading=lazy><div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200"></div><!$><!/><!$><!/>`, true, false, false);
+function imagesToTextList(p) {
+  if (!p) return "";
+  return (p.images ?? []).map((img) => img.caption ? `${img.url}	${img.caption}` : img.url).join("\n");
+}
 const ImageGalleryRenderer = (props) => {
   const [selectedIndex, setSelectedIndex] = createSignal(null);
+  const isExpanded = useExpanded();
   const params = () => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
@@ -55,82 +61,100 @@ const ImageGalleryRenderer = (props) => {
       setSelectedIndex(index);
     }
   };
-  return (() => {
-    var _el$ = getNextElement(_tmpl$2), _el$5 = _el$.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$4 = _el$6.nextSibling, _el$7 = _el$4.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.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$6, _co$);
-    insert(_el$4, createComponent(For, {
-      get each() {
-        var _a;
-        return (_a = params()) == null ? void 0 : _a.images;
-      },
-      children: (image, index) => (() => {
-        var _el$9 = getNextElement(_tmpl$5), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$13 = _el$1.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling);
-        _el$9.$$click = () => handleImageClick(index());
-        insert(_el$9, createComponent(Show, {
-          get when() {
-            var _a;
-            return memo(() => !!image.caption)() && ((_a = params()) == null ? void 0 : _a.showCaptions);
-          },
-          get children() {
-            var _el$10 = getNextElement(_tmpl$3), _el$11 = _el$10.firstChild;
-            insert(_el$11, () => image.caption);
-            return _el$10;
-          }
-        }), _el$14, _co$3);
-        insert(_el$9, createComponent(Show, {
-          get when() {
-            var _a;
-            return ((_a = params()) == null ? void 0 : _a.lightbox) !== false;
-          },
-          get children() {
-            return getNextElement(_tmpl$4);
-          }
-        }), _el$16, _co$4);
-        effect((_p$) => {
-          var _v$ = `relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`, _v$2 = image.alt || `View image ${index() + 1}`, _v$3 = image.thumbnail || image.url, _v$4 = image.alt || `Image ${index() + 1}`, _v$5 = image.srcset, _v$6 = image.sizes;
-          _v$ !== _p$.e && className(_el$9, _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$9, "aria-label", _p$.t = _v$2);
-          _v$3 !== _p$.a && setAttribute(_el$0, "src", _p$.a = _v$3);
-          _v$4 !== _p$.o && setAttribute(_el$0, "alt", _p$.o = _v$4);
-          _v$5 !== _p$.i && setAttribute(_el$0, "srcset", _p$.i = _v$5);
-          _v$6 !== _p$.n && setAttribute(_el$0, "sizes", _p$.n = _v$6);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0,
-          a: void 0,
-          o: void 0,
-          i: void 0,
-          n: void 0
-        });
-        runHydrationEvents();
-        return _el$9;
-      })()
-    }));
-    insert(_el$, createComponent(LightboxOverlay, {
-      get images() {
-        var _a;
-        return ((_a = params()) == null ? void 0 : _a.images) || [];
-      },
-      get selectedIndex() {
-        return selectedIndex();
-      },
-      onClose: () => setSelectedIndex(null),
-      onNavigate: setSelectedIndex
-    }), _el$8, _co$2);
-    effect(() => className(_el$4, `grid ${columnsClass()} ${gapClass()} p-4`));
-    return _el$;
-  })();
+  return createComponent(ExpandableWrapper, {
+    get title() {
+      var _a;
+      return ((_a = params()) == null ? void 0 : _a.title) || "Gallery";
+    },
+    get copyData() {
+      return imagesToTextList(params());
+    },
+    copyLabel: "Copy image URLs",
+    get children() {
+      var _el$ = getNextElement(_tmpl$2), _el$5 = _el$.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$4 = _el$6.nextSibling, _el$7 = _el$4.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.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$6, _co$);
+      insert(_el$4, createComponent(For, {
+        get each() {
+          var _a;
+          return (_a = params()) == null ? void 0 : _a.images;
+        },
+        children: (image, index) => (() => {
+          var _el$9 = getNextElement(_tmpl$5), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$13 = _el$1.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling);
+          _el$9.$$click = () => handleImageClick(index());
+          insert(_el$9, createComponent(Show, {
+            get when() {
+              var _a;
+              return memo(() => !!image.caption)() && ((_a = params()) == null ? void 0 : _a.showCaptions);
+            },
+            get children() {
+              var _el$10 = getNextElement(_tmpl$3), _el$11 = _el$10.firstChild;
+              insert(_el$11, () => image.caption);
+              return _el$10;
+            }
+          }), _el$14, _co$3);
+          insert(_el$9, createComponent(Show, {
+            get when() {
+              var _a;
+              return ((_a = params()) == null ? void 0 : _a.lightbox) !== false;
+            },
+            get children() {
+              return getNextElement(_tmpl$4);
+            }
+          }), _el$16, _co$4);
+          effect((_p$) => {
+            var _v$3 = `relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`, _v$4 = image.alt || `View image ${index() + 1}`, _v$5 = image.thumbnail || image.url, _v$6 = image.alt || `Image ${index() + 1}`, _v$7 = image.srcset, _v$8 = image.sizes;
+            _v$3 !== _p$.e && className(_el$9, _p$.e = _v$3);
+            _v$4 !== _p$.t && setAttribute(_el$9, "aria-label", _p$.t = _v$4);
+            _v$5 !== _p$.a && setAttribute(_el$0, "src", _p$.a = _v$5);
+            _v$6 !== _p$.o && setAttribute(_el$0, "alt", _p$.o = _v$6);
+            _v$7 !== _p$.i && setAttribute(_el$0, "srcset", _p$.i = _v$7);
+            _v$8 !== _p$.n && setAttribute(_el$0, "sizes", _p$.n = _v$8);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0
+          });
+          runHydrationEvents();
+          return _el$9;
+        })()
+      }));
+      insert(_el$, createComponent(LightboxOverlay, {
+        get images() {
+          var _a;
+          return ((_a = params()) == null ? void 0 : _a.images) || [];
+        },
+        get selectedIndex() {
+          return selectedIndex();
+        },
+        onClose: () => setSelectedIndex(null),
+        onNavigate: setSelectedIndex
+      }), _el$8, _co$2);
+      effect((_p$) => {
+        var _v$ = `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$2 = `grid ${columnsClass()} ${gapClass()} p-4 ${isExpanded() ? "flex-1 min-h-0 overflow-auto" : ""}`;
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
 };
 delegateEvents(["click"]);
 export {

package/dist/components/ImageGalleryRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGalleryRenderer.js","sources":["../../src/components/ImageGalleryRenderer.tsx"],"sourcesContent":["/**\n * ImageGalleryRenderer - Gallery view for multiple images\n * Sprint 5: Media Components\n */\n\nimport { Component, createSignal, For, Show } from 'solid-js'\nimport type { UIComponent, ImageGalleryParams } from '../types'\nimport { LightboxOverlay } from './LightboxOverlay'\n\nexport interface ImageGalleryRendererProps {\n  /**\n   * UIComponent containing gallery params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct gallery params (alternative to component)\n   */\n  params?: ImageGalleryParams\n}\n\nexport const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {\n  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)\n\n  const params = () => props.params || (props.component?.params as ImageGalleryParams)\n\n  const columnsClass = () => {\n    switch (params()?.columns) {\n      case 2:\n        return 'grid-cols-2'\n      case 3:\n        return 'grid-cols-3'\n      case 4:\n        return 'grid-cols-4'\n      case 5:\n        return 'grid-cols-5'\n      default:\n        return 'grid-cols-3'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default:\n        return 'gap-2'\n    }\n  }\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '16:9':\n        return 'aspect-video'\n      case '4:3':\n        return 'aspect-[4/3]'\n      default:\n        return ''\n    }\n  }\n\n  const handleImageClick = (index: number) => {\n    if (params()?.lightbox !== false) {\n      setSelectedIndex(index)\n    }\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      {/* Gallery Grid */}\n      <div class={`grid ${columnsClass()} ${gapClass()} p-4`}>\n        <For each={params()?.images}>\n          {(image, index) => (\n            <button\n              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}\n              onClick={() => handleImageClick(index())}\n              type=\"button\"\n              aria-label={image.alt || `View image ${index() + 1}`}\n            >\n              <img\n                src={image.thumbnail || image.url}\n                alt={image.alt || `Image ${index() + 1}`}\n                srcset={image.srcset}\n                sizes={image.sizes}\n                class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200\"\n                loading=\"lazy\"\n              />\n\n              {/* Hover overlay */}\n              <div class=\"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200\" />\n\n              {/* Caption overlay */}\n              <Show when={image.caption && params()?.showCaptions}>\n                <div class=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4\">\n                  <span class=\"truncate block\">{image.caption}</span>\n                </div>\n              </Show>\n\n              {/* Zoom icon on hover */}\n              <Show when={params()?.lightbox !== false}>\n                <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n                  <div class=\"bg-white/90 dark:bg-gray-800/90 rounded-full p-2\">\n                    <svg\n                      class=\"w-5 h-5 text-gray-700 dark:text-gray-200\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n\n      {/* Lightbox */}\n      <LightboxOverlay\n        images={params()?.images || []}\n        selectedIndex={selectedIndex()}\n        onClose={() => setSelectedIndex(null)}\n        onNavigate={setSelectedIndex}\n      />\n    </div>\n  )\n}\n"],"names":["ImageGalleryRenderer","props","selectedIndex","setSelectedIndex","createSignal","params","component","columnsClass","columns","gapClass","gap","aspectClass","aspectRatio","handleImageClick","index","lightbox","_el$","_$getNextElement","_tmpl$2","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$4","_el$7","_el$8","_co$2","_$insert","_$createComponent","Show","when","title","children","_el$2","_tmpl$","_el$3","For","each","images","image","_el$9","_tmpl$5","_el$0","_el$1","_el$13","_el$14","_co$3","_el$15","_el$16","_co$4","$$click","_$memo","caption","showCaptions","_el$10","_tmpl$3","_el$11","_tmpl$4","_$effect","_p$","_v$","_v$2","alt","_v$3","thumbnail","url","_v$4","_v$5","srcset","_v$6","sizes","e","_$className","t","_$setAttribute","a","o","i","n","undefined","_$runHydrationEvents","LightboxOverlay","onClose","onNavigate","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ImageGalleryRenderer.js","sources":["../../src/components/ImageGalleryRenderer.tsx"],"sourcesContent":["/**\n * ImageGalleryRenderer - Gallery view for multiple images\n * Sprint 5: Media Components\n */\n\nimport { Component, createSignal, For, Show } from 'solid-js'\nimport type { UIComponent, ImageGalleryParams } from '../types'\nimport { LightboxOverlay } from './LightboxOverlay'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\n\nexport interface ImageGalleryRendererProps {\n  /**\n   * UIComponent containing gallery params\n   */\n  component?: UIComponent\n\n  /**\n   * Direct gallery params (alternative to component)\n   */\n  params?: ImageGalleryParams\n}\n\n/** Build a newline-separated list of image URLs (with captions when present)\n * for the ExpandableWrapper copy button. v6.2.0. */\nfunction imagesToTextList(p: ImageGalleryParams | undefined): string {\n  if (!p) return ''\n  return (p.images ?? [])\n    .map((img) => (img.caption ? `${img.url}\\t${img.caption}` : img.url))\n    .join('\\n')\n}\n\nexport const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {\n  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)\n  const isExpanded = useExpanded()\n\n  const params = () => props.params || (props.component?.params as ImageGalleryParams)\n\n  const columnsClass = () => {\n    switch (params()?.columns) {\n      case 2:\n        return 'grid-cols-2'\n      case 3:\n        return 'grid-cols-3'\n      case 4:\n        return 'grid-cols-4'\n      case 5:\n        return 'grid-cols-5'\n      default:\n        return 'grid-cols-3'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default:\n        return 'gap-2'\n    }\n  }\n\n  const aspectClass = () => {\n    switch (params()?.aspectRatio) {\n      case '1:1':\n        return 'aspect-square'\n      case '16:9':\n        return 'aspect-video'\n      case '4:3':\n        return 'aspect-[4/3]'\n      default:\n        return ''\n    }\n  }\n\n  const handleImageClick = (index: number) => {\n    if (params()?.lightbox !== false) {\n      setSelectedIndex(index)\n    }\n  }\n\n  return (\n    <ExpandableWrapper\n      title={params()?.title || 'Gallery'}\n      copyData={imagesToTextList(params())}\n      copyLabel=\"Copy image URLs\"\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 flex-shrink-0\">\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{params()!.title}</h3>\n        </div>\n      </Show>\n\n      {/* Gallery Grid */}\n      <div class={`grid ${columnsClass()} ${gapClass()} p-4 ${isExpanded() ? 'flex-1 min-h-0 overflow-auto' : ''}`}>\n        <For each={params()?.images}>\n          {(image, index) => (\n            <button\n              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}\n              onClick={() => handleImageClick(index())}\n              type=\"button\"\n              aria-label={image.alt || `View image ${index() + 1}`}\n            >\n              <img\n                src={image.thumbnail || image.url}\n                alt={image.alt || `Image ${index() + 1}`}\n                srcset={image.srcset}\n                sizes={image.sizes}\n                class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-200\"\n                loading=\"lazy\"\n              />\n\n              {/* Hover overlay */}\n              <div class=\"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200\" />\n\n              {/* Caption overlay */}\n              <Show when={image.caption && params()?.showCaptions}>\n                <div class=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4\">\n                  <span class=\"truncate block\">{image.caption}</span>\n                </div>\n              </Show>\n\n              {/* Zoom icon on hover */}\n              <Show when={params()?.lightbox !== false}>\n                <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n                  <div class=\"bg-white/90 dark:bg-gray-800/90 rounded-full p-2\">\n                    <svg\n                      class=\"w-5 h-5 text-gray-700 dark:text-gray-200\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-width=\"2\"\n                        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </Show>\n            </button>\n          )}\n        </For>\n      </div>\n\n      {/* Lightbox */}\n      <LightboxOverlay\n        images={params()?.images || []}\n        selectedIndex={selectedIndex()}\n        onClose={() => setSelectedIndex(null)}\n        onNavigate={setSelectedIndex}\n      />\n    </div>\n    </ExpandableWrapper>\n  )\n}\n"],"names":["imagesToTextList","p","images","map","img","caption","url","join","ImageGalleryRenderer","props","selectedIndex","setSelectedIndex","createSignal","isExpanded","useExpanded","params","component","columnsClass","columns","gapClass","gap","aspectClass","aspectRatio","handleImageClick","index","lightbox","_$createComponent","ExpandableWrapper","title","copyData","copyLabel","children","_el$","_$getNextElement","_tmpl$2","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$4","_el$7","_el$8","_co$2","_$insert","Show","when","_el$2","_tmpl$","_el$3","For","each","image","_el$9","_tmpl$5","_el$0","_el$1","_el$13","_el$14","_co$3","_el$15","_el$16","_co$4","$$click","_$memo","showCaptions","_el$10","_tmpl$3","_el$11","_tmpl$4","_$effect","_p$","_v$3","_v$4","alt","_v$5","thumbnail","_v$6","_v$7","srcset","_v$8","sizes","e","_$className","t","_$setAttribute","a","o","i","n","undefined","_$runHydrationEvents","LightboxOverlay","onClose","onNavigate","_v$","_v$2","_$delegateEvents"],"mappings":"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"}

package/dist/components/MapRenderer.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="p-4 text-red-500 bg-red-50 dark:bg-red-900/20 text-center">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="relative z-0"style=width:100%;z-index:0>`), _tmpl$3 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/>`);
+const ExpandableWrapper = require("./ExpandableWrapper.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class="p-4 text-red-500 bg-red-50 dark:bg-red-900/20 text-center">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div>`), _tmpl$3 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/>`);
 let L = null;
 let clusterCssLoaded = false;
 function getChoroplethColor(value, scale, fallback) {
@@ -93,15 +94,53 @@ function addGeoJSONLayer(mapInst, leaflet, geojson, style, popup) {
   layer.addTo(mapInst);
   return layer;
 }
+function mapToGeoJSON(p) {
+  if (!p) return '{"type":"FeatureCollection","features":[]}';
+  const features = [];
+  for (const marker of p.markers ?? []) {
+    const pos = marker.position;
+    const lat = Array.isArray(pos) ? pos[0] : pos == null ? void 0 : pos.lat;
+    const lng = Array.isArray(pos) ? pos[1] : pos == null ? void 0 : pos.lng;
+    if (typeof lat !== "number" || typeof lng !== "number") continue;
+    features.push({
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [lng, lat]
+      },
+      properties: {
+        ...marker.tooltip ? {
+          tooltip: marker.tooltip
+        } : {},
+        ...marker.popup ? {
+          popup: marker.popup
+        } : {}
+      }
+    });
+  }
+  return JSON.stringify({
+    type: "FeatureCollection",
+    features
+  }, null, 2);
+}
 const MapRenderer = (props) => {
   let mapContainer;
   let mapInstance = null;
   const [isLeafletLoaded, setIsLeafletLoaded] = solidJs.createSignal(false);
   const [error, setError] = solidJs.createSignal(null);
+  const isExpanded = ExpandableWrapper.useExpanded();
   const params = () => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
   };
+  solidJs.createEffect(() => {
+    isExpanded();
+    if (!mapInstance) return;
+    setTimeout(() => {
+      var _a;
+      return (_a = mapInstance == null ? void 0 : mapInstance.invalidateSize) == null ? void 0 : _a.call(mapInstance);
+    }, 100);
+  });
   solidJs.createEffect(async () => {
     var _a, _b, _c, _d, _e;
     if (web.isServer) return;
@@ -270,39 +309,60 @@ const MapRenderer = (props) => {
       mapInstance = null;
     }
   });
-  return (() => {
-    var _el$ = web.getNextElement(_tmpl$3), _el$4 = _el$.firstChild, [_el$5, _co$] = web.getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = web.getNextMarker(_el$6.nextSibling);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return error();
-      },
-      get children() {
-        var _el$2 = web.getNextElement(_tmpl$);
-        web.insert(_el$2, error);
-        return _el$2;
-      }
-    }), _el$5, _co$);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return !error();
-      },
-      get children() {
-        var _el$3 = web.getNextElement(_tmpl$2);
-        var _ref$ = mapContainer;
-        typeof _ref$ === "function" ? web.use(_ref$, _el$3) : mapContainer = _el$3;
-        web.effect((_$p) => {
-          var _a;
-          return web.setStyleProperty(_el$3, "height", ((_a = params()) == null ? void 0 : _a.height) || "400px");
-        });
-        return _el$3;
-      }
-    }), _el$7, _co$2);
-    web.effect(() => {
-      var _a;
-      return web.className(_el$, `w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${((_a = params()) == null ? void 0 : _a.className) || ""}`);
-    });
-    return _el$;
-  })();
+  return web.createComponent(ExpandableWrapper.ExpandableWrapper, {
+    title: "Map",
+    get copyData() {
+      return mapToGeoJSON(params());
+    },
+    copyLabel: "Copy markers as GeoJSON",
+    get children() {
+      var _el$ = web.getNextElement(_tmpl$3), _el$4 = _el$.firstChild, [_el$5, _co$] = web.getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = web.getNextMarker(_el$6.nextSibling);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return error();
+        },
+        get children() {
+          var _el$2 = web.getNextElement(_tmpl$);
+          web.insert(_el$2, error);
+          return _el$2;
+        }
+      }), _el$5, _co$);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return !error();
+        },
+        get children() {
+          var _el$3 = web.getNextElement(_tmpl$2);
+          var _ref$ = mapContainer;
+          typeof _ref$ === "function" ? web.use(_ref$, _el$3) : mapContainer = _el$3;
+          web.effect((_p$) => {
+            var _a;
+            var _v$ = isExpanded() ? {
+              height: "100%",
+              width: "100%",
+              "z-index": 0
+            } : {
+              height: ((_a = params()) == null ? void 0 : _a.height) || "400px",
+              width: "100%",
+              "z-index": 0
+            }, _v$2 = `relative z-0 ${isExpanded() ? "flex-1 min-h-0" : ""}`;
+            _p$.e = web.style(_el$3, _v$, _p$.e);
+            _v$2 !== _p$.t && web.className(_el$3, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$3;
+        }
+      }), _el$7, _co$2);
+      web.effect(() => {
+        var _a;
+        return web.className(_el$, `w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${((_a = params()) == null ? void 0 : _a.className) || ""} ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`);
+      });
+      return _el$;
+    }
+  });
 };
 exports.MapRenderer = MapRenderer;
 //# sourceMappingURL=MapRenderer.cjs.map