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

package/dist/components/ExpandableWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableWrapper.js","sources":["../../src/components/ExpandableWrapper.tsx"],"sourcesContent":["/**\n * ExpandableWrapper - Generic expand/fullscreen wrapper for components\n * v2.2.0: Reusable wrapper that adds expand button + fullscreen modal\n *\n * Uses DOM reparenting to avoid rendering children twice — critical for\n * imperative components like ChartJS that bind instances to DOM nodes.\n */\n\nimport { Component, Show, createSignal, createEffect, onCleanup, JSX, createContext, useContext, Accessor } from 'solid-js'\nimport { Portal } from 'solid-js/web'\n\n/** Context for child components to know if they're in expanded/fullscreen view */\nconst ExpandedContext = createContext<Accessor<boolean>>(() => false)\n\n/** Hook for child components to read expanded state */\nexport const useExpanded = () => useContext(ExpandedContext)\n\nexport interface ExpandableWrapperProps {\n  /** Content to render inline (and in expanded view) */\n  children: JSX.Element\n  /** Title shown in the expanded modal header */\n  title?: string\n  /** Data string for copy-to-clipboard in expanded view */\n  copyData?: string\n  /** Label for copy button tooltip */\n  copyLabel?: string\n}\n\n/**\n * Wraps any component with an expand button (top-right corner).\n * Opens a fullscreen Portal modal. The children's DOM is physically\n * reparented into the modal (not duplicated), so imperative bindings\n * like Chart.js canvas refs stay intact.\n *\n * @example\n * <ExpandableWrapper title=\"Sales Data\" copyData={tsvData}>\n *   <TableRenderer ... />\n * </ExpandableWrapper>\n */\nexport const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {\n  const [isExpanded, setIsExpanded] = createSignal(false)\n  const [copied, setCopied] = createSignal(false)\n  let dialogRef: HTMLDivElement | undefined\n  let contentRef: HTMLDivElement | undefined\n  let inlineSlotRef: HTMLDivElement | undefined\n  let modalSlotRef: HTMLDivElement | undefined\n\n  const handleOpen = () => setIsExpanded(true)\n  const handleClose = () => setIsExpanded(false)\n\n  // Reparent content DOM between inline and modal slots\n  createEffect(() => {\n    if (!contentRef) return\n\n    if (isExpanded()) {\n      // Move content into modal\n      modalSlotRef?.appendChild(contentRef)\n    } else {\n      // Move content back to inline\n      inlineSlotRef?.appendChild(contentRef)\n    }\n  })\n\n  // Keyboard: Escape to close\n  createEffect(() => {\n    if (!isExpanded()) return\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        handleClose()\n      }\n    }\n\n    document.addEventListener('keydown', onKeyDown)\n    onCleanup(() => document.removeEventListener('keydown', onKeyDown))\n  })\n\n  // Prevent body scroll when expanded\n  createEffect(() => {\n    if (isExpanded()) {\n      const prev = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      // Focus the dialog\n      setTimeout(() => dialogRef?.focus(), 10)\n      onCleanup(() => {\n        document.body.style.overflow = prev\n      })\n    }\n  })\n\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget) handleClose()\n  }\n\n  const handleCopy = async () => {\n    if (!props.copyData) return\n    try {\n      await navigator.clipboard.writeText(props.copyData)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch (err) {\n      console.error('Failed to copy:', err)\n    }\n  }\n\n  return (\n    <div class=\"relative group\">\n      {/* Inline slot — content lives here when not expanded */}\n      <div ref={inlineSlotRef}>\n        <div ref={contentRef}>\n          <ExpandedContext.Provider value={isExpanded}>\n            {props.children}\n          </ExpandedContext.Provider>\n        </div>\n      </div>\n\n      {/* Expand button — visible on hover */}\n      <button\n        onClick={handleOpen}\n        class=\"absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-70 hover:!opacity-100 p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm\"\n        title=\"Expand\"\n        aria-label=\"Expand to fullscreen\"\n      >\n        <svg class=\"w-3.5 h-3.5 text-gray-500 dark:text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n\n      {/* Fullscreen modal via Portal */}\n      <Show when={isExpanded()}>\n        <Portal>\n          <div\n            class=\"fixed inset-0 z-50 flex flex-col bg-black/50 backdrop-blur-sm\"\n            style={{ animation: 'expandable-fade-in 0.15s ease-out' }}\n            onClick={handleBackdropClick}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={props.title || 'Expanded view'}\n            tabIndex={-1}\n            ref={dialogRef}\n          >\n            {/* Modal panel */}\n            <div\n              class=\"relative flex flex-col m-4 flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden\"\n              style={{ animation: 'expandable-scale-in 0.15s ease-out' }}\n              onClick={(e) => e.stopPropagation()}\n            >\n              {/* Header */}\n              <div class=\"flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0\">\n                <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white truncate\">\n                  {props.title || 'Expanded View'}\n                </h2>\n                <div class=\"flex items-center gap-2\">\n                  {/* Copy button */}\n                  <Show when={props.copyData}>\n                    <button\n                      onClick={handleCopy}\n                      class=\"p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n                      title={props.copyLabel || 'Copy to clipboard'}\n                      aria-label={props.copyLabel || 'Copy to clipboard'}\n                    >\n                      <Show\n                        when={!copied()}\n                        fallback={\n                          <svg class=\"w-5 h-5 text-green-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                          </svg>\n                        }\n                      >\n                        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" />\n                        </svg>\n                      </Show>\n                    </button>\n                  </Show>\n                  {/* Close button */}\n                  <button\n                    onClick={handleClose}\n                    class=\"p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n                    aria-label=\"Close expanded view\"\n                  >\n                    <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Modal slot — content is reparented here when expanded.\n                  v6.1.0 : `flex flex-col` lets aware children opt into\n                  `flex-1 min-h-0` to fill the modal vertically (chart,\n                  table, map, graph). Unaware children keep working\n                  thanks to `overflow-auto` (their natural height\n                  scrolls if it overflows the slot). */}\n              <div class=\"flex-1 min-h-0 overflow-auto p-4 flex flex-col\" ref={modalSlotRef} />\n            </div>\n          </div>\n\n          <style>{`\n            @keyframes expandable-fade-in {\n              from { opacity: 0; }\n              to { opacity: 1; }\n            }\n            @keyframes expandable-scale-in {\n              from { opacity: 0; transform: scale(0.97); }\n              to { opacity: 1; transform: scale(1); }\n            }\n          `}</style>\n        </Portal>\n      </Show>\n    </div>\n  )\n}\n"],"names":["ExpandedContext","createContext","useExpanded","useContext","ExpandableWrapper","props","isExpanded","setIsExpanded","createSignal","copied","setCopied","dialogRef","contentRef","inlineSlotRef","modalSlotRef","handleOpen","handleClose","createEffect","appendChild","onKeyDown","e","key","preventDefault","document","addEventListener","onCleanup","removeEventListener","prev","body","style","overflow","setTimeout","focus","handleBackdropClick","target","currentTarget","handleCopy","copyData","navigator","clipboard","writeText","err","console","error","_el$","_$getNextElement","_tmpl$5","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$15","_el$16","_co$2","_$getNextMarker","_ref$","_$use","_ref$2","_$insert","_$createComponent","Provider","value","children","$$click","Show","when","Portal","_el$5","_tmpl$3","_el$6","_el$7","_el$8","_el$9","_el$11","_el$12","_co$","_el$10","_el$13","_ref$3","stopPropagation","title","_el$0","_tmpl$2","fallback","_tmpl$6","_tmpl$","_$effect","_p$","_v$","copyLabel","_v$2","_$setAttribute","t","undefined","_$runHydrationEvents","_ref$4","_tmpl$4","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ExpandableWrapper.js","sources":["../../src/components/ExpandableWrapper.tsx"],"sourcesContent":["/**\n * ExpandableWrapper - Generic expand/fullscreen wrapper for components\n * v2.2.0: Reusable wrapper that adds expand button + fullscreen modal\n *\n * Uses DOM reparenting to avoid rendering children twice — critical for\n * imperative components like ChartJS that bind instances to DOM nodes.\n */\n\nimport { Component, Show, createSignal, createEffect, onCleanup, JSX, createContext, useContext, Accessor } from 'solid-js'\nimport { Portal } from 'solid-js/web'\n\n/** Context for child components to know if they're in expanded/fullscreen view */\nconst ExpandedContext = createContext<Accessor<boolean>>(() => false)\n\n/** Hook for child components to read expanded state */\nexport const useExpanded = () => useContext(ExpandedContext)\n\nexport interface ExpandableWrapperProps {\n  /** Content to render inline (and in expanded view) */\n  children: JSX.Element\n  /** Title shown in the expanded modal header */\n  title?: string\n  /** Data string for copy-to-clipboard in expanded view */\n  copyData?: string\n  /** Label for copy button tooltip */\n  copyLabel?: string\n  /**\n   * Visibility behavior of the inline expand button (v6.3.0 — axe 4 deposium handoff).\n   *   - `'hover'` (default) : opacity 0, fades to 0.7 on parent group hover.\n   *     Backwards-compatible — pre-v6.3.0 behavior.\n   *   - `'always-visible'` : opacity 0.6 permanent, 1 on hover. Use this when\n   *     the inline button needs to be discoverable without hovering — esp.\n   *     on touch surfaces and consumer themes where the hover-only pattern\n   *     hides the affordance.\n   */\n  toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * Wraps any component with an expand button (top-right corner).\n * Opens a fullscreen Portal modal. The children's DOM is physically\n * reparented into the modal (not duplicated), so imperative bindings\n * like Chart.js canvas refs stay intact.\n *\n * @example\n * <ExpandableWrapper title=\"Sales Data\" copyData={tsvData}>\n *   <TableRenderer ... />\n * </ExpandableWrapper>\n */\nexport const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {\n  const [isExpanded, setIsExpanded] = createSignal(false)\n  const [copied, setCopied] = createSignal(false)\n  let dialogRef: HTMLDivElement | undefined\n  let contentRef: HTMLDivElement | undefined\n  let inlineSlotRef: HTMLDivElement | undefined\n  let modalSlotRef: HTMLDivElement | undefined\n\n  const handleOpen = () => setIsExpanded(true)\n  const handleClose = () => setIsExpanded(false)\n\n  // Reparent content DOM between inline and modal slots\n  createEffect(() => {\n    if (!contentRef) return\n\n    if (isExpanded()) {\n      // Move content into modal\n      modalSlotRef?.appendChild(contentRef)\n    } else {\n      // Move content back to inline\n      inlineSlotRef?.appendChild(contentRef)\n    }\n  })\n\n  // Keyboard: Escape to close\n  createEffect(() => {\n    if (!isExpanded()) return\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        handleClose()\n      }\n    }\n\n    document.addEventListener('keydown', onKeyDown)\n    onCleanup(() => document.removeEventListener('keydown', onKeyDown))\n  })\n\n  // Prevent body scroll when expanded\n  createEffect(() => {\n    if (isExpanded()) {\n      const prev = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      // Focus the dialog\n      setTimeout(() => dialogRef?.focus(), 10)\n      onCleanup(() => {\n        document.body.style.overflow = prev\n      })\n    }\n  })\n\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget) handleClose()\n  }\n\n  const handleCopy = async () => {\n    if (!props.copyData) return\n    try {\n      await navigator.clipboard.writeText(props.copyData)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch (err) {\n      console.error('Failed to copy:', err)\n    }\n  }\n\n  return (\n    <div class=\"relative group\">\n      {/* Inline slot — content lives here when not expanded */}\n      <div ref={inlineSlotRef}>\n        <div ref={contentRef}>\n          <ExpandedContext.Provider value={isExpanded}>\n            {props.children}\n          </ExpandedContext.Provider>\n        </div>\n      </div>\n\n      {/* Expand button — visibility per `toolbarVariant` (default 'hover') */}\n      <button\n        onClick={handleOpen}\n        class={`absolute top-2 right-2 z-10 ${\n          props.toolbarVariant === 'always-visible'\n            ? 'opacity-60 hover:opacity-100'\n            : 'opacity-0 group-hover:opacity-70 hover:!opacity-100'\n        } p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm`}\n        title=\"Expand\"\n        aria-label=\"Expand to fullscreen\"\n      >\n        <svg class=\"w-3.5 h-3.5 text-gray-500 dark:text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n\n      {/* Fullscreen modal via Portal */}\n      <Show when={isExpanded()}>\n        <Portal>\n          <div\n            class=\"fixed inset-0 z-50 flex flex-col bg-black/50 backdrop-blur-sm\"\n            style={{ animation: 'expandable-fade-in 0.15s ease-out' }}\n            onClick={handleBackdropClick}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={props.title || 'Expanded view'}\n            tabIndex={-1}\n            ref={dialogRef}\n          >\n            {/* Modal panel */}\n            <div\n              class=\"relative flex flex-col m-4 flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden\"\n              style={{ animation: 'expandable-scale-in 0.15s ease-out' }}\n              onClick={(e) => e.stopPropagation()}\n            >\n              {/* Header */}\n              <div class=\"flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0\">\n                <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white truncate\">\n                  {props.title || 'Expanded View'}\n                </h2>\n                <div class=\"flex items-center gap-2\">\n                  {/* Copy button */}\n                  <Show when={props.copyData}>\n                    <button\n                      onClick={handleCopy}\n                      class=\"p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n                      title={props.copyLabel || 'Copy to clipboard'}\n                      aria-label={props.copyLabel || 'Copy to clipboard'}\n                    >\n                      <Show\n                        when={!copied()}\n                        fallback={\n                          <svg class=\"w-5 h-5 text-green-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                          </svg>\n                        }\n                      >\n                        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" />\n                        </svg>\n                      </Show>\n                    </button>\n                  </Show>\n                  {/* Close button */}\n                  <button\n                    onClick={handleClose}\n                    class=\"p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n                    aria-label=\"Close expanded view\"\n                  >\n                    <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Modal slot — content is reparented here when expanded.\n                  v6.1.0 : `flex flex-col` lets aware children opt into\n                  `flex-1 min-h-0` to fill the modal vertically (chart,\n                  table, map, graph). Unaware children keep working\n                  thanks to `overflow-auto` (their natural height\n                  scrolls if it overflows the slot). */}\n              <div class=\"flex-1 min-h-0 overflow-auto p-4 flex flex-col\" ref={modalSlotRef} />\n            </div>\n          </div>\n\n          <style>{`\n            @keyframes expandable-fade-in {\n              from { opacity: 0; }\n              to { opacity: 1; }\n            }\n            @keyframes expandable-scale-in {\n              from { opacity: 0; transform: scale(0.97); }\n              to { opacity: 1; transform: scale(1); }\n            }\n          `}</style>\n        </Portal>\n      </Show>\n    </div>\n  )\n}\n"],"names":["ExpandedContext","createContext","useExpanded","useContext","ExpandableWrapper","props","isExpanded","setIsExpanded","createSignal","copied","setCopied","dialogRef","contentRef","inlineSlotRef","modalSlotRef","handleOpen","handleClose","createEffect","appendChild","onKeyDown","e","key","preventDefault","document","addEventListener","onCleanup","removeEventListener","prev","body","style","overflow","setTimeout","focus","handleBackdropClick","target","currentTarget","handleCopy","copyData","navigator","clipboard","writeText","err","console","error","_el$","_$getNextElement","_tmpl$5","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$15","_el$16","_co$2","_$getNextMarker","_ref$","_$use","_ref$2","_$insert","_$createComponent","Provider","value","children","$$click","Show","when","Portal","_el$5","_tmpl$3","_el$6","_el$7","_el$8","_el$9","_el$11","_el$12","_co$","_el$10","_el$13","_ref$3","stopPropagation","title","_el$0","_tmpl$2","fallback","_tmpl$6","_tmpl$","_$effect","_p$","_v$","copyLabel","_v$2","_$setAttribute","t","undefined","_$runHydrationEvents","_ref$4","_tmpl$4","_$className","toolbarVariant","_$delegateEvents"],"mappings":"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"}

package/dist/components/ImageGalleryRenderer.cjs

@@ -3,9 +3,15 @@ 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 ExpandableWrapper = require("./ExpandableWrapper.cjs");
+var _tmpl$ = /* @__PURE__ */ web.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__ */ web.template(`<div><!$><!/><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);
+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] = solidJs.createSignal(null);
+  const isExpanded = ExpandableWrapper.useExpanded();
   const params = () => {
     var _a;
     return props.params || ((_a = props.component) == null ? void 0 : _a.params);
@@ -57,82 +63,100 @@ const ImageGalleryRenderer = (props) => {
       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$;
-  })();
+  return web.createComponent(ExpandableWrapper.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$ = 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$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 && web.className(_el$9, _p$.e = _v$3);
+            _v$4 !== _p$.t && web.setAttribute(_el$9, "aria-label", _p$.t = _v$4);
+            _v$5 !== _p$.a && web.setAttribute(_el$0, "src", _p$.a = _v$5);
+            _v$6 !== _p$.o && web.setAttribute(_el$0, "alt", _p$.o = _v$6);
+            _v$7 !== _p$.i && web.setAttribute(_el$0, "srcset", _p$.i = _v$7);
+            _v$8 !== _p$.n && web.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
+          });
+          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((_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 && web.className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && web.className(_el$4, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
 };
 web.delegateEvents(["click"]);
 exports.ImageGalleryRenderer = ImageGalleryRenderer;

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":";;;;;AAwBA,SAASA,iBAAiBC,GAA2C;AACnE,MAAI,CAACA,EAAG,QAAO;AACf,UAAQA,EAAEC,UAAU,CAAA,GACjBC,IAAKC,CAAAA,QAASA,IAAIC,UAAU,GAAGD,IAAIE,GAAG,IAAKF,IAAIC,OAAO,KAAKD,IAAIE,GAAI,EACnEC,KAAK,IAAI;AACd;AAEO,MAAMC,uBAA8DC,CAAAA,UAAU;AACnF,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,aAA4B,IAAI;AAC1E,QAAMC,aAAaC,YAAAA;AAEnB,QAAMC,SAASA,MAAAA;;AAAMN,iBAAMM,YAAWN,WAAMO,cAANP,mBAAiBM;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;AAChCd,uBAAiBa,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SAAAE,gBACGC,mBAAiB;AAAA,IAAA,IAChBC,QAAK;;AAAA,eAAEb,YAAAA,MAAAA,mBAAUa,UAAS;AAAA,IAAS;AAAA,IAAA,IACnCC,WAAQ;AAAA,aAAE7B,iBAAiBe,QAAQ;AAAA,IAAC;AAAA,IACpCe,WAAS;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAA,CAAAC,OAAAC,IAAA,IAAAC,cAAAJ,MAAAK,WAAA,GAAAC,QAAAJ,MAAAG,aAAAE,QAAAD,MAAAD,aAAA,CAAAG,OAAAC,KAAA,IAAAL,cAAAG,MAAAF,WAAA;AAAAK,aAAAb,MAAAN,gBAMRoB,MAAI;AAAA,QAAA,IAACC,OAAI;;AAAA,kBAAEhC,kBAAAA,mBAAUa;AAAAA,QAAK;AAAA,QAAA,IAAAG,WAAA;AAAA,cAAAiB,QAAAf,eAAAgB,MAAA,GAAAC,QAAAF,MAAAZ;AAAAS,iBAAAK,OAAA,MAE0CnC,OAAAA,EAAUa,KAAK;AAAA,iBAAAoB;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAX,OAAAC,IAAA;AAAAO,aAAAJ,OAAAf,gBAMjFyB,KAAG;AAAA,QAAA,IAACC,OAAI;;AAAA,kBAAErC,kBAAAA,mBAAUb;AAAAA,QAAM;AAAA,QAAA6B,UACxBA,CAACsB,OAAO7B,WAAK,MAAA;AAAA,cAAA8B,QAAArB,eAAAsB,OAAA,GAAAC,QAAAF,MAAAlB,YAAAqB,QAAAD,MAAAhB,aAAAkB,SAAAD,MAAAjB,aAAA,CAAAmB,QAAAC,KAAA,IAAArB,cAAAmB,OAAAlB,WAAA,GAAAqB,SAAAF,OAAAnB,aAAA,CAAAsB,QAAAC,KAAA,IAAAxB,cAAAsB,OAAArB,WAAA;AAAAc,gBAAAU,UAGD,MAAMzC,iBAAiBC,MAAAA,CAAO;AAACqB,iBAAAS,OAAA5B,gBAiBvCoB,MAAI;AAAA,YAAA,IAACC,OAAI;;AAAA,qBAAEkB,KAAA,MAAA,CAAA,CAAAZ,MAAMhD,OAAO,EAAA,OAAIU,YAAAA,MAAAA,mBAAUmD;AAAAA,YAAY;AAAA,YAAA,IAAAnC,WAAA;AAAA,kBAAAoC,SAAAlC,eAAAmC,OAAA,GAAAC,SAAAF,OAAA/B;AAAAS,qBAAAwB,QAAA,MAEjBhB,MAAMhD,OAAO;AAAA,qBAAA8D;AAAAA,YAAA;AAAA,UAAA,CAAA,GAAAR,QAAAC,KAAA;AAAAf,iBAAAS,OAAA5B,gBAK9CoB,MAAI;AAAA,YAAA,IAACC,OAAI;;AAAA,uBAAEhC,YAAAA,MAAAA,mBAAUU,cAAa;AAAA,YAAK;AAAA,YAAA,IAAAM,WAAA;AAAA,qBAAAE,eAAAqC,OAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAR,QAAAC,KAAA;AAAAQ,iBAAAC,CAAAA,QAAA;AAAA,gBAAAC,OAzBjC,iGAAiGpD,YAAAA,CAAa,IAAEqD,OAG3GrB,MAAMsB,OAAO,cAAcnD,MAAAA,IAAU,CAAC,IAAEoD,OAG7CvB,MAAMwB,aAAaxB,MAAM/C,KAAGwE,OAC5BzB,MAAMsB,OAAO,SAASnD,MAAAA,IAAU,CAAC,IAAEuD,OAChC1B,MAAM2B,QAAMC,OACb5B,MAAM6B;AAAKT,qBAAAD,IAAAW,KAAAC,UAAA9B,OAAAkB,IAAAW,IAAAV,IAAA;AAAAC,qBAAAF,IAAAa,KAAAC,aAAAhC,OAAA,cAAAkB,IAAAa,IAAAX,IAAA;AAAAE,qBAAAJ,IAAAe,KAAAD,aAAA9B,OAAA,OAAAgB,IAAAe,IAAAX,IAAA;AAAAE,qBAAAN,IAAAgB,KAAAF,aAAA9B,OAAA,OAAAgB,IAAAgB,IAAAV,IAAA;AAAAC,qBAAAP,IAAAiB,KAAAH,aAAA9B,OAAA,UAAAgB,IAAAiB,IAAAV,IAAA;AAAAE,qBAAAT,IAAAkB,KAAAJ,aAAA9B,OAAA,SAAAgB,IAAAkB,IAAAT,IAAA;AAAA,mBAAAT;AAAAA,UAAA,GAAA;AAAA,YAAAW,GAAAQ;AAAAA,YAAAN,GAAAM;AAAAA,YAAAJ,GAAAI;AAAAA,YAAAH,GAAAG;AAAAA,YAAAF,GAAAE;AAAAA,YAAAD,GAAAC;AAAAA,UAAAA,CAAA;AAAAC,6BAAAA;AAAA,iBAAAtC;AAAAA,QAAA,GAAA;AAAA,MAAA,CAoCvB,CAAA;AAAAT,aAAAb,MAAAN,gBAKJmE,iBAAe;AAAA,QAAA,IACd3F,SAAM;;AAAA,mBAAEa,YAAAA,MAAAA,mBAAUb,WAAU,CAAA;AAAA,QAAE;AAAA,QAAA,IAC9BQ,gBAAa;AAAA,iBAAEA,cAAAA;AAAAA,QAAe;AAAA,QAC9BoF,SAASA,MAAMnF,iBAAiB,IAAI;AAAA,QACpCoF,YAAYpF;AAAAA,MAAAA,CAAgB,GAAAgC,OAAAC,KAAA;AAAA2B,aAAAC,CAAAA,QAAA;AAAA,YAAAwB,MArEpB,qHACVnF,WAAAA,IAAe,iCAAiC,EAAE,IAClDoF,OASY,QAAQhF,aAAAA,CAAc,IAAIE,SAAAA,CAAU,QAAQN,WAAAA,IAAe,iCAAiC,EAAE;AAAEmF,gBAAAxB,IAAAW,KAAAC,UAAApD,MAAAwC,IAAAW,IAAAa,GAAA;AAAAC,iBAAAzB,IAAAa,KAAAD,UAAA3C,OAAA+B,IAAAa,IAAAY,IAAA;AAAA,eAAAzB;AAAAA,MAAA,GAAA;AAAA,QAAAW,GAAAQ;AAAAA,QAAAN,GAAAM;AAAAA,MAAAA,CAAA;AAAA,aAAA3D;AAAAA,IAAA;AAAA,EAAA,CAAA;AA+DlH;AAACkE,eAAA,CAAA,OAAA,CAAA;"}