@seed-ship/mcp-ui-solid 1.2.2 → 2.0.0

package/dist/components/GridRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridRenderer.js","sources":["../../src/components/GridRenderer.tsx"],"sourcesContent":["/**\n * GridRenderer - CSS Grid layout component for nested layouts\n * Phase 5.0: Quick Wins - Enables template builder layouts\n */\n\nimport { Component, For, createMemo } from 'solid-js'\nimport type { UIComponent, GridPosition } from '../types'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Parameters for GridRenderer component\n */\nexport interface GridComponentParams {\n  /**\n   * Number of columns (default: 12)\n   */\n  columns?: number\n\n  /**\n   * Gap between grid items (default: '1rem')\n   */\n  gap?: string\n\n  /**\n   * Minimum row height (optional)\n   */\n  minRowHeight?: string\n\n  /**\n   * CSS Grid template areas for named regions\n   * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]\n   */\n  areas?: string[][]\n\n  /**\n   * Child components to render within the grid\n   */\n  children: UIComponent[]\n}\n\nexport interface GridRendererProps {\n  /**\n   * Grid component with params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: any) => void\n}\n\n/**\n * Convert grid position to CSS style string\n */\nfunction getGridItemStyle(position: GridPosition | undefined, areas?: string[][]): string {\n  // Default to full width if no position specified\n  if (!position) {\n    return 'grid-column: 1 / -1; grid-row: auto'\n  }\n\n  const { colStart, colSpan, rowStart, rowSpan = 1 } = position\n\n  // If using named areas and component has area name, use grid-area\n  // Otherwise use explicit grid-column/grid-row\n  let style = `grid-column: ${colStart} / span ${colSpan}`\n\n  if (rowStart) {\n    style += `; grid-row: ${rowStart} / span ${rowSpan}`\n  } else {\n    style += '; grid-row: auto'\n  }\n\n  return style\n}\n\n/**\n * Build CSS grid-template-areas string from areas array\n */\nfunction buildGridTemplateAreas(areas: string[][]): string {\n  return areas.map((row) => `\"${row.join(' ')}\"`).join(' ')\n}\n\n/**\n * GridRenderer Component\n * Renders a CSS Grid container with nested UIComponents\n */\nexport const GridRenderer: Component<GridRendererProps> = (props) => {\n  // Extract params with defaults\n  const params = createMemo(() => {\n    const p = props.component.params as GridComponentParams\n    return {\n      columns: p.columns ?? 12,\n      gap: p.gap ?? '1rem',\n      minRowHeight: p.minRowHeight,\n      areas: p.areas,\n      children: p.children ?? [],\n    }\n  })\n\n  // Build grid container style\n  const gridContainerStyle = createMemo(() => {\n    const p = params()\n    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`\n\n    if (p.minRowHeight) {\n      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`\n    }\n\n    if (p.areas && p.areas.length > 0) {\n      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`\n    }\n\n    return style\n  })\n\n  return (\n    <div\n      class=\"w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden\"\n      data-component-type=\"grid\"\n      data-component-id={props.component.id}\n    >\n      <div class=\"p-4 h-full\" style={gridContainerStyle()}>\n        <For each={params().children}>\n          {(child) => (\n            <div\n              style={getGridItemStyle(child.position, params().areas)}\n              class=\"min-w-0 h-full\"\n            >\n              {/* Use UIResourceRenderer for recursive rendering */}\n              <UIResourceRenderer content={child} onError={props.onError} />\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default GridRenderer\n"],"names":["getGridItemStyle","position","areas","colStart","colSpan","rowStart","rowSpan","style","buildGridTemplateAreas","map","row","join","GridRenderer","props","params","createMemo","p","component","columns","gap","minRowHeight","children","gridContainerStyle","length","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","child","_el$3","_tmpl$2","UIResourceRenderer","content","onError","_$effect","_$p","_$style","_p$","_v$","id","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;AAuDA,SAASA,iBAAiBC,UAAoCC,OAA4B;AAExF,MAAI,CAACD,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IAAEE;AAAAA,IAAUC;AAAAA,IAASC;AAAAA,IAAUC,UAAU;AAAA,EAAA,IAAML;AAIrD,MAAIM,SAAQ,gBAAgBJ,QAAQ,WAAWC,OAAO;AAEtD,MAAIC,UAAU;AACZE,IAAAA,UAAS,eAAeF,QAAQ,WAAWC,OAAO;AAAA,EACpD,OAAO;AACLC,IAAAA,UAAS;AAAA,EACX;AAEA,SAAOA;AACT;AAKA,SAASC,uBAAuBN,OAA2B;AACzD,SAAOA,MAAMO,IAAKC,CAAAA,QAAQ,IAAIA,IAAIC,KAAK,GAAG,CAAC,GAAG,EAAEA,KAAK,GAAG;AAC1D;AAMO,MAAMC,eAA8CC,CAAAA,UAAU;AAEnE,QAAMC,SAASC,WAAW,MAAM;AAC9B,UAAMC,IAAIH,MAAMI,UAAUH;AAC1B,WAAO;AAAA,MACLI,SAASF,EAAEE,WAAW;AAAA,MACtBC,KAAKH,EAAEG,OAAO;AAAA,MACdC,cAAcJ,EAAEI;AAAAA,MAChBlB,OAAOc,EAAEd;AAAAA,MACTmB,UAAUL,EAAEK,YAAY,CAAA;AAAA,IAAA;AAAA,EAE5B,CAAC;AAGD,QAAMC,qBAAqBP,WAAW,MAAM;AAC1C,UAAMC,IAAIF,OAAAA;AACV,QAAIP,SAAQ,gDAAgDS,EAAEE,OAAO,gBAAgBF,EAAEG,GAAG;AAE1F,QAAIH,EAAEI,cAAc;AAClBb,MAAAA,UAAS,4BAA4BS,EAAEI,YAAY;AAAA,IACrD;AAEA,QAAIJ,EAAEd,SAASc,EAAEd,MAAMqB,SAAS,GAAG;AACjChB,MAAAA,UAAS,0BAA0BC,uBAAuBQ,EAAEd,KAAK,CAAC;AAAA,IACpE;AAEA,WAAOK;AAAAA,EACT,CAAC;AAED,UAAA,MAAA;AAAA,QAAAiB,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI;AAAAC,WAAAF,OAAAG,gBAOOC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAASO;AAAAA,MAAQ;AAAA,MAAAA,UACxBY,YAAK,MAAA;AAAA,YAAAC,QAAAT,eAAAU,OAAA;AAAAN,eAAAK,OAAAJ,gBAMFM,oBAAkB;AAAA,UAACC,SAASJ;AAAAA,UAAK,IAAEK,UAAO;AAAA,mBAAEzB,MAAMyB;AAAAA,UAAO;AAAA,QAAA,CAAA,CAAA;AAAAC,eAAAC,CAAAA,QAAAC,MAAAP,OAJnDlC,iBAAiBiC,MAAMhC,UAAUa,OAAAA,EAASZ,KAAK,GAACsC,GAAA,CAAA;AAAA,eAAAN;AAAAA,MAAA,GAAA;AAAA,IAAA,CAM1D,CAAA;AAAAK,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MAZc9B,MAAMI,UAAU2B,IAAEC,OAENvB,mBAAAA;AAAoBqB,cAAAD,IAAAI,KAAAC,aAAAvB,MAAA,qBAAAkB,IAAAI,IAAAH,GAAA;AAAAD,UAAAM,IAAAP,MAAAd,OAAAkB,MAAAH,IAAAM,CAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAezD;"}
+{"version":3,"file":"GridRenderer.js","sources":["../../src/components/GridRenderer.tsx"],"sourcesContent":["/**\n * GridRenderer - CSS Grid layout component for nested layouts\n * Phase 5.0: Quick Wins - Enables template builder layouts\n * Updated: Uses RenderContext to avoid circular dependencies\n */\n\nimport { Component, For, createMemo } from 'solid-js'\nimport type { UIComponent, GridPosition } from '../types'\nimport { useRenderContext } from './RenderContext'\n\n/**\n * Parameters for GridRenderer component\n */\nexport interface GridComponentParams {\n  /**\n   * Number of columns (default: 12)\n   */\n  columns?: number\n\n  /**\n   * Gap between grid items (default: '1rem')\n   */\n  gap?: string\n\n  /**\n   * Minimum row height (optional)\n   */\n  minRowHeight?: string\n\n  /**\n   * CSS Grid template areas for named regions\n   * Example: [['header', 'header'], ['sidebar', 'main'], ['footer', 'footer']]\n   */\n  areas?: string[][]\n\n  /**\n   * Child components to render within the grid\n   */\n  children: UIComponent[]\n}\n\nexport interface GridRendererProps {\n  /**\n   * Grid component with params\n   */\n  component: UIComponent\n\n  /**\n   * Error callback\n   */\n  onError?: (error: any) => void\n}\n\n/**\n * Convert grid position to CSS style string\n */\nfunction getGridItemStyle(position: GridPosition | undefined, _areas?: string[][]): string {\n  // Default to full width if no position specified\n  if (!position) {\n    return 'grid-column: 1 / -1; grid-row: auto'\n  }\n\n  const { colStart, colSpan, rowStart, rowSpan = 1 } = position\n\n  // If using named areas and component has area name, use grid-area\n  // Otherwise use explicit grid-column/grid-row\n  let style = `grid-column: ${colStart} / span ${colSpan}`\n\n  if (rowStart) {\n    style += `; grid-row: ${rowStart} / span ${rowSpan}`\n  } else {\n    style += '; grid-row: auto'\n  }\n\n  return style\n}\n\n/**\n * Build CSS grid-template-areas string from areas array\n */\nfunction buildGridTemplateAreas(areas: string[][]): string {\n  return areas.map((row) => `\"${row.join(' ')}\"`).join(' ')\n}\n\n/**\n * GridRenderer Component\n * Renders a CSS Grid container with nested UIComponents\n */\nexport const GridRenderer: Component<GridRendererProps> = (props) => {\n  // Use render context to avoid circular dependency\n  const { renderComponent } = useRenderContext()\n\n  // Extract params with defaults\n  const params = createMemo(() => {\n    const p = props.component.params as GridComponentParams\n    return {\n      columns: p.columns ?? 12,\n      gap: p.gap ?? '1rem',\n      minRowHeight: p.minRowHeight,\n      areas: p.areas,\n      children: p.children ?? [],\n    }\n  })\n\n  // Build grid container style\n  const gridContainerStyle = createMemo(() => {\n    const p = params()\n    let style = `display: grid; grid-template-columns: repeat(${p.columns}, 1fr); gap: ${p.gap}`\n\n    if (p.minRowHeight) {\n      style += `; grid-auto-rows: minmax(${p.minRowHeight}, auto)`\n    }\n\n    if (p.areas && p.areas.length > 0) {\n      style += `; grid-template-areas: ${buildGridTemplateAreas(p.areas)}`\n    }\n\n    return style\n  })\n\n  return (\n    <div\n      class=\"w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden\"\n      data-component-type=\"grid\"\n      data-component-id={props.component.id}\n    >\n      <div class=\"p-4 h-full\" style={gridContainerStyle()}>\n        <For each={params().children}>\n          {(child) => (\n            <div\n              style={getGridItemStyle(child.position, params().areas)}\n              class=\"min-w-0 h-full\"\n            >\n              {/* Use RenderContext for recursive rendering (avoids circular dependency) */}\n              {renderComponent(child, props.onError)}\n            </div>\n          )}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default GridRenderer\n"],"names":["getGridItemStyle","position","_areas","colStart","colSpan","rowStart","rowSpan","style","buildGridTemplateAreas","areas","map","row","join","GridRenderer","props","renderComponent","useRenderContext","params","createMemo","p","component","columns","gap","minRowHeight","children","gridContainerStyle","length","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","child","_el$3","_tmpl$2","onError","_$effect","_$p","_$style","_p$","_v$","id","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;AAwDA,SAASA,iBAAiBC,UAAoCC,QAA6B;AAEzF,MAAI,CAACD,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IAAEE;AAAAA,IAAUC;AAAAA,IAASC;AAAAA,IAAUC,UAAU;AAAA,EAAA,IAAML;AAIrD,MAAIM,SAAQ,gBAAgBJ,QAAQ,WAAWC,OAAO;AAEtD,MAAIC,UAAU;AACZE,IAAAA,UAAS,eAAeF,QAAQ,WAAWC,OAAO;AAAA,EACpD,OAAO;AACLC,IAAAA,UAAS;AAAA,EACX;AAEA,SAAOA;AACT;AAKA,SAASC,uBAAuBC,OAA2B;AACzD,SAAOA,MAAMC,IAAKC,CAAAA,QAAQ,IAAIA,IAAIC,KAAK,GAAG,CAAC,GAAG,EAAEA,KAAK,GAAG;AAC1D;AAMO,MAAMC,eAA8CC,CAAAA,UAAU;AAEnE,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAoBC,iBAAAA;AAG5B,QAAMC,SAASC,WAAW,MAAM;AAC9B,UAAMC,IAAIL,MAAMM,UAAUH;AAC1B,WAAO;AAAA,MACLI,SAASF,EAAEE,WAAW;AAAA,MACtBC,KAAKH,EAAEG,OAAO;AAAA,MACdC,cAAcJ,EAAEI;AAAAA,MAChBd,OAAOU,EAAEV;AAAAA,MACTe,UAAUL,EAAEK,YAAY,CAAA;AAAA,IAAA;AAAA,EAE5B,CAAC;AAGD,QAAMC,qBAAqBP,WAAW,MAAM;AAC1C,UAAMC,IAAIF,OAAAA;AACV,QAAIV,SAAQ,gDAAgDY,EAAEE,OAAO,gBAAgBF,EAAEG,GAAG;AAE1F,QAAIH,EAAEI,cAAc;AAClBhB,MAAAA,UAAS,4BAA4BY,EAAEI,YAAY;AAAA,IACrD;AAEA,QAAIJ,EAAEV,SAASU,EAAEV,MAAMiB,SAAS,GAAG;AACjCnB,MAAAA,UAAS,0BAA0BC,uBAAuBW,EAAEV,KAAK,CAAC;AAAA,IACpE;AAEA,WAAOF;AAAAA,EACT,CAAC;AAED,UAAA,MAAA;AAAA,QAAAoB,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI;AAAAC,WAAAF,OAAAG,gBAOOC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,SAASO;AAAAA,MAAQ;AAAA,MAAAA,UACxBY,YAAK,MAAA;AAAA,YAAAC,QAAAT,eAAAU,OAAA;AAAAN,eAAAK,OAAA,MAMFtB,gBAAgBqB,OAAOtB,MAAMyB,OAAO,CAAC;AAAAC,eAAAC,CAAAA,QAAAC,MAAAL,OAJ/BrC,iBAAiBoC,MAAMnC,UAAUgB,OAAAA,EAASR,KAAK,GAACgC,GAAA,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAM1D,CAAA;AAAAG,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MAZc9B,MAAMM,UAAUyB,IAAEC,OAENrB,mBAAAA;AAAoBmB,cAAAD,IAAAI,KAAAC,aAAArB,MAAA,qBAAAgB,IAAAI,IAAAH,GAAA;AAAAD,UAAAM,IAAAP,MAAAZ,OAAAgB,MAAAH,IAAAM,CAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAvB;AAAAA,EAAA,GAAA;AAezD;"}

package/dist/components/ImageGalleryRenderer.cjs

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+const LightboxOverlay = require("./LightboxOverlay.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(`<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__ */ web.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__ */ web.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__ */ web.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);
+const ImageGalleryRenderer = (props) => {
+  const [selectedIndex, setSelectedIndex] = solidJs.createSignal(null);
+  const params = () => {
+    var _a;
+    return props.params || ((_a = props.component) == null ? void 0 : _a.params);
+  };
+  const columnsClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.columns) {
+      case 2:
+        return "grid-cols-2";
+      case 3:
+        return "grid-cols-3";
+      case 4:
+        return "grid-cols-4";
+      case 5:
+        return "grid-cols-5";
+      default:
+        return "grid-cols-3";
+    }
+  };
+  const gapClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.gap) {
+      case "none":
+        return "gap-0";
+      case "sm":
+        return "gap-1";
+      case "lg":
+        return "gap-4";
+      default:
+        return "gap-2";
+    }
+  };
+  const aspectClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.aspectRatio) {
+      case "1:1":
+        return "aspect-square";
+      case "16:9":
+        return "aspect-video";
+      case "4:3":
+        return "aspect-[4/3]";
+      default:
+        return "";
+    }
+  };
+  const handleImageClick = (index) => {
+    var _a;
+    if (((_a = params()) == null ? void 0 : _a.lightbox) !== false) {
+      setSelectedIndex(index);
+    }
+  };
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$2), _el$5 = _el$.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling), _el$4 = _el$6.nextSibling, _el$7 = _el$4.nextSibling, [_el$8, _co$2] = web.getNextMarker(_el$7.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$6, _co$);
+    web.insert(_el$4, web.createComponent(solidJs.For, {
+      get each() {
+        var _a;
+        return (_a = params()) == null ? void 0 : _a.images;
+      },
+      children: (image, index) => (() => {
+        var _el$9 = web.getNextElement(_tmpl$5), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$13 = _el$1.nextSibling, [_el$14, _co$3] = web.getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$4] = web.getNextMarker(_el$15.nextSibling);
+        _el$9.$$click = () => handleImageClick(index());
+        web.insert(_el$9, web.createComponent(solidJs.Show, {
+          get when() {
+            var _a;
+            return web.memo(() => !!image.caption)() && ((_a = params()) == null ? void 0 : _a.showCaptions);
+          },
+          get children() {
+            var _el$10 = web.getNextElement(_tmpl$3), _el$11 = _el$10.firstChild;
+            web.insert(_el$11, () => image.caption);
+            return _el$10;
+          }
+        }), _el$14, _co$3);
+        web.insert(_el$9, web.createComponent(solidJs.Show, {
+          get when() {
+            var _a;
+            return ((_a = params()) == null ? void 0 : _a.lightbox) !== false;
+          },
+          get children() {
+            return web.getNextElement(_tmpl$4);
+          }
+        }), _el$16, _co$4);
+        web.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 && web.className(_el$9, _p$.e = _v$);
+          _v$2 !== _p$.t && web.setAttribute(_el$9, "aria-label", _p$.t = _v$2);
+          _v$3 !== _p$.a && web.setAttribute(_el$0, "src", _p$.a = _v$3);
+          _v$4 !== _p$.o && web.setAttribute(_el$0, "alt", _p$.o = _v$4);
+          _v$5 !== _p$.i && web.setAttribute(_el$0, "srcset", _p$.i = _v$5);
+          _v$6 !== _p$.n && web.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
+        });
+        web.runHydrationEvents();
+        return _el$9;
+      })()
+    }));
+    web.insert(_el$, web.createComponent(LightboxOverlay.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);
+    web.effect(() => web.className(_el$4, `grid ${columnsClass()} ${gapClass()} p-4`));
+    return _el$;
+  })();
+};
+web.delegateEvents(["click"]);
+exports.ImageGalleryRenderer = ImageGalleryRenderer;
+//# sourceMappingURL=ImageGalleryRenderer.cjs.map

package/dist/components/ImageGalleryRenderer.cjs.map

@@ -0,0 +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":";;;;;;AAqBO,MAAMA,uBAA8DC,CAAAA,UAAU;AACnF,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,QAAAA,aAA4B,IAAI;AAE1E,QAAMC,SAASA,MAAAA;;AAAMJ,iBAAMI,YAAWJ,WAAMK,cAANL,mBAAiBI;AAAAA;AAEvD,QAAME,eAAeA,MAAM;;AACzB,aAAQF,YAAAA,MAAAA,mBAAUG,SAAAA;AAAAA,MAChB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAMC,WAAWA,MAAM;;AACrB,aAAQJ,YAAAA,MAAAA,mBAAUK,KAAAA;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,cAAcA,MAAM;;AACxB,aAAQN,YAAAA,MAAAA,mBAAUO,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,UAAkB;;AAC1C,UAAIT,YAAAA,MAAAA,mBAAUU,cAAa,OAAO;AAChCZ,uBAAiBW,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,UAAA,MAAA;AAAA,QAAAE,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,gBAAE3B,kBAAAA,mBAAU4B;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAlB,IAAAA,eAAAmB,MAAA,GAAAC,QAAAF,MAAAf;AAAAS,YAAAA,OAAAQ,OAAA,MAE0ChC,OAAAA,EAAU4B,KAAK;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAd,OAAAC,IAAA;AAAAO,eAAAJ,OAAAK,IAAAA,gBAMjFQ,aAAG;AAAA,MAAA,IAACC,OAAI;;AAAA,gBAAElC,kBAAAA,mBAAUmC;AAAAA,MAAM;AAAA,MAAAN,UACxBA,CAACO,OAAO3B,WAAK,MAAA;AAAA,YAAA4B,QAAAzB,IAAAA,eAAA0B,OAAA,GAAAC,QAAAF,MAAAtB,YAAAyB,QAAAD,MAAApB,aAAAsB,SAAAD,MAAArB,aAAA,CAAAuB,QAAAC,KAAA,IAAAzB,IAAAA,cAAAuB,OAAAtB,WAAA,GAAAyB,SAAAF,OAAAvB,aAAA,CAAA0B,QAAAC,KAAA,IAAA5B,IAAAA,cAAA0B,OAAAzB,WAAA;AAAAkB,cAAAU,UAGD,MAAMvC,iBAAiBC,MAAAA,CAAO;AAACe,mBAAAa,OAAAZ,IAAAA,gBAiBvCC,cAAI;AAAA,UAAA,IAACC,OAAI;;AAAA,mBAAEqB,IAAAA,KAAA,MAAA,CAAA,CAAAZ,MAAMa,OAAO,EAAA,OAAIjD,YAAAA,MAAAA,mBAAUkD;AAAAA,UAAY;AAAA,UAAA,IAAArB,WAAA;AAAA,gBAAAsB,SAAAvC,IAAAA,eAAAwC,OAAA,GAAAC,SAAAF,OAAApC;AAAAS,gBAAAA,OAAA6B,QAAA,MAEjBjB,MAAMa,OAAO;AAAA,mBAAAE;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAT,QAAAC,KAAA;AAAAnB,mBAAAa,OAAAZ,IAAAA,gBAK9CC,cAAI;AAAA,UAAA,IAACC,OAAI;;AAAA,qBAAE3B,YAAAA,MAAAA,mBAAUU,cAAa;AAAA,UAAK;AAAA,UAAA,IAAAmB,WAAA;AAAA,mBAAAjB,IAAAA,eAAA0C,OAAA;AAAA,UAAA;AAAA,QAAA,CAAA,GAAAT,QAAAC,KAAA;AAAAS,YAAAA,OAAAC,CAAAA,QAAA;AAAA,cAAAC,MAzBjC,iGAAiGnD,YAAAA,CAAa,IAAEoD,OAG3GtB,MAAMuB,OAAO,cAAclD,MAAAA,IAAU,CAAC,IAAEmD,OAG7CxB,MAAMyB,aAAazB,MAAM0B,KAAGC,OAC5B3B,MAAMuB,OAAO,SAASlD,MAAAA,IAAU,CAAC,IAAEuD,OAChC5B,MAAM6B,QAAMC,OACb9B,MAAM+B;AAAKV,kBAAAD,IAAAY,KAAAC,IAAAA,UAAAhC,OAAAmB,IAAAY,IAAAX,GAAA;AAAAC,mBAAAF,IAAAc,KAAAC,IAAAA,aAAAlC,OAAA,cAAAmB,IAAAc,IAAAZ,IAAA;AAAAE,mBAAAJ,IAAAgB,KAAAD,IAAAA,aAAAhC,OAAA,OAAAiB,IAAAgB,IAAAZ,IAAA;AAAAG,mBAAAP,IAAAiB,KAAAF,IAAAA,aAAAhC,OAAA,OAAAiB,IAAAiB,IAAAV,IAAA;AAAAC,mBAAAR,IAAAkB,KAAAH,IAAAA,aAAAhC,OAAA,UAAAiB,IAAAkB,IAAAV,IAAA;AAAAE,mBAAAV,IAAAmB,KAAAJ,IAAAA,aAAAhC,OAAA,SAAAiB,IAAAmB,IAAAT,IAAA;AAAA,iBAAAV;AAAAA,QAAA,GAAA;AAAA,UAAAY,GAAAQ;AAAAA,UAAAN,GAAAM;AAAAA,UAAAJ,GAAAI;AAAAA,UAAAH,GAAAG;AAAAA,UAAAF,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAAC,+BAAAA;AAAA,eAAAxC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAoCvB,CAAA;AAAAb,eAAAb,MAAAc,IAAAA,gBAKJqD,iCAAe;AAAA,MAAA,IACd3C,SAAM;;AAAA,iBAAEnC,YAAAA,MAAAA,mBAAUmC,WAAU,CAAA;AAAA,MAAE;AAAA,MAAA,IAC9BtC,gBAAa;AAAA,eAAEA,cAAAA;AAAAA,MAAe;AAAA,MAC9BkF,SAASA,MAAMjF,iBAAiB,IAAI;AAAA,MACpCkF,YAAYlF;AAAAA,IAAAA,CAAgB,GAAAwB,OAAAC,KAAA;AAAAgC,QAAAA,OAAA,MAAAc,IAAAA,UAAAjD,OA1DlB,QAAQlB,aAAAA,CAAc,IAAIE,UAAU,MAAM,CAAA;AAAA,WAAAO;AAAAA,EAAA,GAAA;AA8D5D;AAACsE,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/components/ImageGalleryRenderer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ImageGalleryRenderer - Gallery view for multiple images
+ * Sprint 5: Media Components
+ */
+import { Component } from 'solid-js';
+import type { UIComponent, ImageGalleryParams } from '../types';
+export interface ImageGalleryRendererProps {
+    /**
+     * UIComponent containing gallery params
+     */
+    component?: UIComponent;
+    /**
+     * Direct gallery params (alternative to component)
+     */
+    params?: ImageGalleryParams;
+}
+export declare const ImageGalleryRenderer: Component<ImageGalleryRendererProps>;
+//# sourceMappingURL=ImageGalleryRenderer.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ImageGalleryRenderer.js

@@ -0,0 +1,139 @@
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, 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);
+const ImageGalleryRenderer = (props) => {
+  const [selectedIndex, setSelectedIndex] = createSignal(null);
+  const params = () => {
+    var _a;
+    return props.params || ((_a = props.component) == null ? void 0 : _a.params);
+  };
+  const columnsClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.columns) {
+      case 2:
+        return "grid-cols-2";
+      case 3:
+        return "grid-cols-3";
+      case 4:
+        return "grid-cols-4";
+      case 5:
+        return "grid-cols-5";
+      default:
+        return "grid-cols-3";
+    }
+  };
+  const gapClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.gap) {
+      case "none":
+        return "gap-0";
+      case "sm":
+        return "gap-1";
+      case "lg":
+        return "gap-4";
+      default:
+        return "gap-2";
+    }
+  };
+  const aspectClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.aspectRatio) {
+      case "1:1":
+        return "aspect-square";
+      case "16:9":
+        return "aspect-video";
+      case "4:3":
+        return "aspect-[4/3]";
+      default:
+        return "";
+    }
+  };
+  const handleImageClick = (index) => {
+    var _a;
+    if (((_a = params()) == null ? void 0 : _a.lightbox) !== false) {
+      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$;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  ImageGalleryRenderer
+};
+//# sourceMappingURL=ImageGalleryRenderer.js.map

package/dist/components/ImageGalleryRenderer.js.map

@@ -0,0 +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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"}

package/dist/components/LightboxOverlay.cjs

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Previous image"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M15 19l-7-7 7-7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Next image"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"role=dialog aria-modal=true aria-label="Image lightbox"><button class="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"aria-label="Close lightbox"><svg class="w-8 h-8"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button><!$><!/><!$><!/><img class="max-w-[90vw] max-h-[90vh] object-contain"><!$><!/><div class="absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm"><!$><!/> / <!$><!/>`);
+const LightboxOverlay = (props) => {
+  const isOpen = () => props.selectedIndex !== null;
+  const currentImage = () => props.selectedIndex !== null ? props.images[props.selectedIndex] : null;
+  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0;
+  const canGoNext = () => props.selectedIndex !== null && props.selectedIndex < props.images.length - 1;
+  const handlePrev = () => {
+    if (canGoPrev()) {
+      props.onNavigate(props.selectedIndex - 1);
+    }
+  };
+  const handleNext = () => {
+    if (canGoNext()) {
+      props.onNavigate(props.selectedIndex + 1);
+    }
+  };
+  solidJs.createEffect(() => {
+    if (!isOpen()) return;
+    const handleKeydown = (e) => {
+      switch (e.key) {
+        case "Escape":
+          props.onClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    document.body.style.overflow = "hidden";
+    solidJs.onCleanup(() => {
+      document.removeEventListener("keydown", handleKeydown);
+      document.body.style.overflow = "";
+    });
+  });
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return isOpen();
+    },
+    get children() {
+      return web.createComponent(web.Portal, {
+        get children() {
+          var _el$ = web.getNextElement(_tmpl$4), _el$2 = _el$.firstChild, _el$11 = _el$2.nextSibling, [_el$12, _co$3] = web.getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$4] = web.getNextMarker(_el$13.nextSibling), _el$5 = _el$14.nextSibling, _el$15 = _el$5.nextSibling, [_el$16, _co$5] = web.getNextMarker(_el$15.nextSibling), _el$7 = _el$16.nextSibling, _el$9 = _el$7.firstChild, [_el$0, _co$] = web.getNextMarker(_el$9.nextSibling), _el$8 = _el$0.nextSibling, _el$1 = _el$8.nextSibling, [_el$10, _co$2] = web.getNextMarker(_el$1.nextSibling);
+          web.addEventListener(_el$, "click", props.onClose, true);
+          web.addEventListener(_el$2, "click", props.onClose, true);
+          web.insert(_el$, web.createComponent(solidJs.Show, {
+            get when() {
+              return canGoPrev();
+            },
+            get children() {
+              var _el$3 = web.getNextElement(_tmpl$);
+              _el$3.$$click = (e) => {
+                e.stopPropagation();
+                handlePrev();
+              };
+              web.runHydrationEvents();
+              return _el$3;
+            }
+          }), _el$12, _co$3);
+          web.insert(_el$, web.createComponent(solidJs.Show, {
+            get when() {
+              return canGoNext();
+            },
+            get children() {
+              var _el$4 = web.getNextElement(_tmpl$2);
+              _el$4.$$click = (e) => {
+                e.stopPropagation();
+                handleNext();
+              };
+              web.runHydrationEvents();
+              return _el$4;
+            }
+          }), _el$14, _co$4);
+          _el$5.$$click = (e) => e.stopPropagation();
+          web.insert(_el$, web.createComponent(solidJs.Show, {
+            get when() {
+              var _a;
+              return (_a = currentImage()) == null ? void 0 : _a.caption;
+            },
+            get children() {
+              var _el$6 = web.getNextElement(_tmpl$3);
+              web.insert(_el$6, () => currentImage().caption);
+              return _el$6;
+            }
+          }), _el$16, _co$5);
+          web.insert(_el$7, () => (props.selectedIndex ?? 0) + 1, _el$0, _co$);
+          web.insert(_el$7, () => props.images.length, _el$10, _co$2);
+          web.effect((_p$) => {
+            var _a, _b, _c, _d;
+            var _v$ = (_a = currentImage()) == null ? void 0 : _a.url, _v$2 = ((_b = currentImage()) == null ? void 0 : _b.alt) || "", _v$3 = (_c = currentImage()) == null ? void 0 : _c.srcset, _v$4 = (_d = currentImage()) == null ? void 0 : _d.sizes;
+            _v$ !== _p$.e && web.setAttribute(_el$5, "src", _p$.e = _v$);
+            _v$2 !== _p$.t && web.setAttribute(_el$5, "alt", _p$.t = _v$2);
+            _v$3 !== _p$.a && web.setAttribute(_el$5, "srcset", _p$.a = _v$3);
+            _v$4 !== _p$.o && web.setAttribute(_el$5, "sizes", _p$.o = _v$4);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          });
+          web.runHydrationEvents();
+          return _el$;
+        }
+      });
+    }
+  });
+};
+web.delegateEvents(["click"]);
+exports.LightboxOverlay = LightboxOverlay;
+//# sourceMappingURL=LightboxOverlay.cjs.map

package/dist/components/LightboxOverlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxOverlay.cjs","sources":["../../src/components/LightboxOverlay.tsx"],"sourcesContent":["/**\n * LightboxOverlay - Fullscreen image viewer\n * Sprint 5: Media Components\n */\n\nimport { Component, Show, createEffect, onCleanup } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { GalleryImage } from '../types'\n\nexport interface LightboxOverlayProps {\n  /**\n   * Array of images to navigate through\n   */\n  images: GalleryImage[]\n\n  /**\n   * Currently selected image index (null when closed)\n   */\n  selectedIndex: number | null\n\n  /**\n   * Callback when lightbox should close\n   */\n  onClose: () => void\n\n  /**\n   * Callback when navigating to a different image\n   */\n  onNavigate: (index: number) => void\n}\n\nexport const LightboxOverlay: Component<LightboxOverlayProps> = (props) => {\n  const isOpen = () => props.selectedIndex !== null\n  const currentImage = () =>\n    props.selectedIndex !== null ? props.images[props.selectedIndex] : null\n  const canGoPrev = () => props.selectedIndex !== null && props.selectedIndex > 0\n  const canGoNext = () =>\n    props.selectedIndex !== null && props.selectedIndex < props.images.length - 1\n\n  const handlePrev = () => {\n    if (canGoPrev()) {\n      props.onNavigate(props.selectedIndex! - 1)\n    }\n  }\n\n  const handleNext = () => {\n    if (canGoNext()) {\n      props.onNavigate(props.selectedIndex! + 1)\n    }\n  }\n\n  // Keyboard navigation\n  createEffect(() => {\n    if (!isOpen()) return\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          props.onClose()\n          break\n        case 'ArrowLeft':\n          handlePrev()\n          break\n        case 'ArrowRight':\n          handleNext()\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeydown)\n    document.body.style.overflow = 'hidden'\n\n    onCleanup(() => {\n      document.removeEventListener('keydown', handleKeydown)\n      document.body.style.overflow = ''\n    })\n  })\n\n  return (\n    <Show when={isOpen()}>\n      <Portal>\n        <div\n          class=\"fixed inset-0 z-50 bg-black/90 flex items-center justify-center\"\n          onClick={props.onClose}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Image lightbox\"\n        >\n          {/* Close button */}\n          <button\n            class=\"absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n            onClick={props.onClose}\n            aria-label=\"Close lightbox\"\n          >\n            <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n\n          {/* Previous button */}\n          <Show when={canGoPrev()}>\n            <button\n              class=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handlePrev()\n              }}\n              aria-label=\"Previous image\"\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M15 19l-7-7 7-7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Next button */}\n          <Show when={canGoNext()}>\n            <button\n              class=\"absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors\"\n              onClick={(e) => {\n                e.stopPropagation()\n                handleNext()\n              }}\n              aria-label=\"Next image\"\n            >\n              <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 5l7 7-7 7\"\n                />\n              </svg>\n            </button>\n          </Show>\n\n          {/* Image */}\n          <img\n            src={currentImage()?.url}\n            alt={currentImage()?.alt || ''}\n            srcset={currentImage()?.srcset}\n            sizes={currentImage()?.sizes}\n            class=\"max-w-[90vw] max-h-[90vh] object-contain\"\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Caption */}\n          <Show when={currentImage()?.caption}>\n            <div class=\"absolute bottom-16 left-1/2 -translate-x-1/2 bg-black/60 text-white px-4 py-2 rounded-lg max-w-[80vw] text-center\">\n              {currentImage()!.caption}\n            </div>\n          </Show>\n\n          {/* Counter */}\n          <div class=\"absolute top-4 left-4 text-white/80 bg-black/40 px-3 py-1 rounded-full text-sm\">\n            {(props.selectedIndex ?? 0) + 1} / {props.images.length}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["LightboxOverlay","props","isOpen","selectedIndex","currentImage","images","canGoPrev","canGoNext","length","handlePrev","onNavigate","handleNext","createEffect","handleKeydown","e","key","onClose","document","addEventListener","body","style","overflow","onCleanup","removeEventListener","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$11","nextSibling","_el$12","_co$3","_$getNextMarker","_el$13","_el$14","_co$4","_el$5","_el$15","_el$16","_co$5","_el$7","_el$9","_el$0","_co$","_el$8","_el$1","_el$10","_co$2","_$addEventListener","_$insert","_el$3","_tmpl$","$$click","stopPropagation","_$runHydrationEvents","_el$4","_tmpl$2","caption","_el$6","_tmpl$3","_$effect","_p$","_v$","url","_v$2","alt","_v$3","srcset","_v$4","sizes","_$setAttribute","t","a","o","undefined","_$delegateEvents"],"mappings":"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"}

package/dist/components/LightboxOverlay.d.ts

@@ -0,0 +1,26 @@
+/**
+ * LightboxOverlay - Fullscreen image viewer
+ * Sprint 5: Media Components
+ */
+import { Component } from 'solid-js';
+import type { GalleryImage } from '../types';
+export interface LightboxOverlayProps {
+    /**
+     * Array of images to navigate through
+     */
+    images: GalleryImage[];
+    /**
+     * Currently selected image index (null when closed)
+     */
+    selectedIndex: number | null;
+    /**
+     * Callback when lightbox should close
+     */
+    onClose: () => void;
+    /**
+     * Callback when navigating to a different image
+     */
+    onNavigate: (index: number) => void;
+}
+export declare const LightboxOverlay: Component<LightboxOverlayProps>;
+//# sourceMappingURL=LightboxOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxOverlay.d.ts","sourceRoot":"","sources":["../../src/components/LightboxOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAiC,MAAM,UAAU,CAAA;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAA;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CA4I3D,CAAA"}