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

package/CHANGELOG.md

@@ -5,6 +5,182 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.2.0] - 2026-05-03
+
+Cross-renderer fluidity audit — completes the work started in v6.1.0
+across 5 more renderers. Same UX pattern : `<ExpandableWrapper>` for
+fullscreen, copy data via the modal-header copy button, responsive
+expanded mode, format-specific export when relevant.
+
+### Added — fullscreen + copy/export on 4 more renderers
+
+- **`<MapRenderer>`** : wrapped in `<ExpandableWrapper>`. Copy data
+  exports markers as a **GeoJSON FeatureCollection** (`{ type:
+  'FeatureCollection', features: [...] }`). Both `[lat, lng]` tuple and
+  `{lat, lng}` object marker positions are normalized. When toggled
+  to fullscreen, the Leaflet container is given a tick to reflow then
+  `mapInstance.invalidateSize()` is called so tiles re-render at the
+  new size.
+- **`<VideoRenderer>`** : wrapped, copy = video URL. Aspect ratio
+  preserved inline ; when expanded, the container fills (aspect
+  override) so the video occupies the modal.
+- **`<CarouselRenderer>`** : wrapped, copy = items as JSON. When
+  expanded, the carousel fills the modal vertically (items keep their
+  horizontal scroll-snap layout, more visible at fullscreen size).
+- **`<ImageGalleryRenderer>`** : wrapped, copy = newline-separated
+  URL list (with captions when present, tab-separated). When
+  expanded, the gallery grid fills the modal and gets its own
+  internal scroll instead of the modal scrolling.
+
+### Added — `<CodeBlockRenderer>` search + download
+
+- **Search input** in the header — incremental highlight via the same
+  `highlightQuery` helper `<TableRenderer>` uses. Wraps `<mark>`
+  around matches in the already-syntax-highlighted HTML output (no
+  conflict with hljs spans).
+- **Download button** in the header — saves the code as a file with
+  the right extension picked from `params.language` (covers ts/tsx,
+  js/jsx, py, rb, go, rs, java, kt, swift, php, cs, cpp, c, sql,
+  json, yml, toml, sh, html, css, scss, md, xml, graphql ; falls
+  back to `.txt`). Filename uses `params.filename` when present,
+  else `code-<timestamp>.<ext>`.
+- Responsive expanded mode : the code area drops its `maxHeight` and
+  uses `flex-1 min-h-0` so the syntax-highlighted code fills the
+  modal vertically with internal scroll.
+
+### Tests
+
+- `ImageGalleryRenderer.test.tsx` — 2 existing button-count tests
+  updated to filter by class so they ignore the new
+  `<ExpandableWrapper>` expand button (was counting all buttons).
+- All v6.1.0 tests untouched. Total : 583 passed / 1 skipped / 584.
+
+### Non-breaking
+
+- All v6.1.0 APIs unchanged.
+- All renderers accept the same params as before. Apps that didn't
+  use the expand / copy / search / download features see no
+  behavior change.
+
+### What's NOT in this release
+
+- ImageGallery ZIP-all download (would add JSZip dep — heavy).
+- Map PNG snapshot export (would add leaflet-image plugin — heavy).
+- ImageGallery / Map / Video search (low ROI vs other priorities).
+
+These can come in v6.3.0+ if user demand surfaces.
+
+## [6.1.0] - 2026-05-03
+
+UX consistency / fluidity release. Three small but visible
+behaviors that were inconsistent across renderers : fullscreen sizing,
+chart export discoverability, table search discoverability.
+
+### Fixed — fullscreen sizing for chart, table, graph
+
+Pre-v6.1.0 bug : when the user clicked the expand button on a chart /
+table / graph and went fullscreen, the visualization stayed at its
+inline default size (`250px` for chart canvas, `400px` for graph,
+`max-height: 400px` for non-virtualized tables, `500px` for
+virtualized) instead of filling the modal. Tables in particular added
+an inner scroll bar at less than half of the available modal height.
+
+Cause : renderers had hard-coded heights and did not subscribe to
+`useExpanded()` from `<ExpandableWrapper>`.
+
+Fix :
+- `<ExpandableWrapper>` modal slot adds `flex flex-col` so aware
+  children can opt into `flex-1 min-h-0` to fill vertically. Unaware
+  children keep working via the existing `overflow-auto` fallback.
+- `<ChartJSRenderer>` (native canvas) : when expanded, outer card
+  becomes `flex-1 min-h-0 flex flex-col`, canvas wrapper drops the
+  fixed pixel height for `height: 100%`. Chart.js
+  `responsive: true` + `maintainAspectRatio: false` (already set)
+  triggers redraw on container resize.
+- `<TableRenderer>` : when expanded, the wrapping card and inner
+  padding container both become flex columns, the scroll container
+  drops its `max-height` and uses `flex-1 min-h-0` to fill — so the
+  internal table body scroll happens inside the visualization, not
+  on the modal.
+- `<GraphRenderer>` : same pattern as chart — outer card flex-fills,
+  G6 canvas container becomes `height: 100%` when expanded. G6
+  resize listener picks up the new size automatically.
+
+Inline mode (not expanded) is **unchanged** — same heights, same
+scroll heuristics as before.
+
+### Changed — table search input default-on
+
+`<TableRenderer>` : the search input was opt-in via `searchable: true`
+or auto-shown only when rows > 10. Now visible by default :
+
+```ts
+// before — search hidden on small tables
+const isSearchable = () =>
+  tableParams.searchable === true ||
+  (tableParams.searchable !== false && allRows().length > 10)
+
+// v6.1.0 — opt-out only
+const isSearchable = () => tableParams.searchable !== false
+```
+
+Backward compat : explicit `searchable: false` still hides the input.
+Tables with `searchable: true` (was already on) unchanged. The change
+only affects tables with no `searchable` prop and ≤ 10 rows — they
+now show search.
+
+### Changed — chart export button default-on + JSON copy added
+
+`<ChartJSRenderer>` : the PNG export button was opt-in via
+`exportable: true`. Now visible by default unless explicitly disabled :
+
+```ts
+// before
+<Show when={params().exportable}>
+
+// v6.1.0
+<Show when={params().exportable !== false}>
+```
+
+Plus a new **copy data (JSON)** button is now wired into the
+`<ExpandableWrapper>` header (visible in the fullscreen modal). Clicks
+copy `{ type, data }` of the chart to the clipboard — useful for
+debugging / re-emitting / sharing in markdown.
+
+Backward compat : explicit `exportable: false` still hides the button.
+Charts with `exportable: true` unchanged. Charts with no prop now show
+the button (was hidden).
+
+### Tests
+
+- `src/components/UIResourceRenderer.fluidity.test.tsx` — **+5 tests**
+  covering : search visible by default on small + large tables, search
+  hidden when explicitly opted out, chart renders without throwing
+  when exportable is undefined or false. Responsive expanded-mode
+  tests left to manual verification (the modal Portal subtree is
+  awkward to assert in jsdom).
+- All previous 578 tests untouched. Total : **583 passed / 1 skipped /
+  584 total**.
+
+### Non-breaking
+
+- All v6.0.0 APIs unchanged.
+- Apps that were relying on the auto-hide of search / export get them
+  shown now — opt out with `searchable: false` / `exportable: false`
+  if undesired.
+
+### What's NOT in this release (future "after" audit)
+
+The user request was scoped to chart + table responsive + the export
+discoverability gaps. A broader cross-renderer audit (map, image-
+gallery, video, code, carousel — for consistent copy/export +
+fullscreen + search behavior) is deferred to a follow-up release.
+Notable known gaps :
+- `<MapRenderer>` is NOT yet wrapped in `<ExpandableWrapper>` (no
+  fullscreen, no copy/export).
+- `<ImageGalleryRenderer>`, `<VideoRenderer>`, `<CarouselRenderer>`
+  have no integrated copy/export menus.
+
 ## [6.0.0] - 2026-05-02
 
 Major version marker — no API breakage. Bumps to `v6` to signal a

package/dist/components/CarouselRenderer.cjs

@@ -3,11 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const RenderContext = require("./RenderContext.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div class="relative group"><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><div class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"style=scroll-behavior:smooth>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="flex-none w-[85%] sm:w-[45%] snap-center"><div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">`);
+const ExpandableWrapper = require("./ExpandableWrapper.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><div class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"style=scroll-behavior:smooth>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="flex-none w-[85%] sm:w-[45%] snap-center"><div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">`);
 const CarouselRenderer = (props) => {
   let scrollContainer;
   const [canScrollLeft, setCanScrollLeft] = solidJs.createSignal(false);
   const [canScrollRight, setCanScrollRight] = solidJs.createSignal(true);
+  const isExpanded = ExpandableWrapper.useExpanded();
   const {
     renderComponent
   } = RenderContext.useRenderContext();
@@ -24,35 +26,44 @@ const CarouselRenderer = (props) => {
       behavior: "smooth"
     });
   };
-  return (() => {
-    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
-    _el$2.$$click = () => scroll("left");
-    _el$3.$$click = () => scroll("right");
-    _el$4.addEventListener("scroll", checkScroll);
-    var _ref$ = scrollContainer;
-    typeof _ref$ === "function" ? web.use(_ref$, _el$4) : scrollContainer = _el$4;
-    web.insert(_el$4, web.createComponent(solidJs.For, {
-      get each() {
-        return props.items;
-      },
-      children: (item) => (() => {
-        var _el$5 = web.getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
-        web.insert(_el$6, () => renderComponent(item));
-        return _el$5;
-      })()
-    }));
-    web.effect((_p$) => {
-      var _v$ = `absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`, _v$2 = `absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`;
-      _v$ !== _p$.e && web.className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$3, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    web.runHydrationEvents();
-    return _el$;
-  })();
+  return web.createComponent(ExpandableWrapper.ExpandableWrapper, {
+    title: "Carousel",
+    get copyData() {
+      return JSON.stringify(props.items, null, 2);
+    },
+    copyLabel: "Copy items (JSON)",
+    get children() {
+      var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+      _el$2.$$click = () => scroll("left");
+      _el$3.$$click = () => scroll("right");
+      _el$4.addEventListener("scroll", checkScroll);
+      var _ref$ = scrollContainer;
+      typeof _ref$ === "function" ? web.use(_ref$, _el$4) : scrollContainer = _el$4;
+      web.insert(_el$4, web.createComponent(solidJs.For, {
+        get each() {
+          return props.items;
+        },
+        children: (item) => (() => {
+          var _el$5 = web.getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
+          web.insert(_el$6, () => renderComponent(item));
+          return _el$5;
+        })()
+      }));
+      web.effect((_p$) => {
+        var _v$ = `relative group ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$2 = `absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`, _v$3 = `absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`;
+        _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+        _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      });
+      web.runHydrationEvents();
+      return _el$;
+    }
+  });
 };
 web.delegateEvents(["click"]);
 exports.CarouselRenderer = CarouselRenderer;

package/dist/components/CarouselRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRenderer.cjs","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useRenderContext } from './RenderContext'\nimport type { UIComponent } from '../types'\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n\n    // Use render context to avoid circular dependency\n    const { renderComponent } = useRenderContext()\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <div class=\"relative group\">\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                {renderComponent(item)}\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","renderComponent","useRenderContext","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","_$createComponent","For","each","items","children","item","_el$5","_tmpl$2","_el$6","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;;;AAUO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,QAAAA,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,QAAAA,aAAa,IAAI;AAG7D,QAAM;AAAA,IAAEG;AAAAA,EAAAA,IAAoBC,+BAAAA;AAE5B,QAAMC,cAAcA,MAAM;AACtB,QAAIC,IAAAA,YAAY,CAACT,gBAAiB;AAClCE,qBAAiBF,gBAAgBU,aAAa,CAAC;AAC/CL,sBACIL,gBAAgBU,aAAaV,gBAAgBW,cAAcX,gBAAgBY,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,IAAAA,YAAY,CAACT,gBAAiB;AAClC,UAAMe,eAAef,gBAAgBY,cAAc;AACnDZ,oBAAgBgB,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAIqB,MAAMd,OAAO,MAAM;AAACW,UAAAG,UAUpB,MAAMd,OAAO,OAAO;AAACa,UAAAE,iBAAA,UAYpBpB,WAAW;AAAA,QAAAqB,QADhB7B;AAAe,WAAA6B,UAAA,aAAAC,IAAAA,IAAAD,OAAAH,KAAA,IAAf1B,kBAAe0B;AAAAK,eAAAL,OAAAM,IAAAA,gBAKnBC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,MAAMoC;AAAAA,MAAK;AAAA,MAAAC,UAChBC,WAAI,MAAA;AAAA,YAAAC,QAAAlB,IAAAA,eAAAmB,OAAA,GAAAC,QAAAF,MAAAf;AAAAQ,YAAAA,OAAAS,OAAA,MAGOlC,gBAAgB+B,IAAI,CAAC;AAAA,eAAAC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAGjC,CAAA;AAAAG,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAhCE,4LAA4L1C,cAAAA,IAAkB,sCAAsC,+BAA+B,IACpR2C,OASC,6LAA6LxC,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtRuC,cAAAD,IAAAG,KAAAC,IAAAA,UAAAxB,OAAAoB,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAD,IAAAA,UAAAtB,OAAAkB,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,2BAAAA;AAAA,WAAA9B;AAAAA,EAAA,GAAA;AA0BtB;AAAC+B,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
+{"version":3,"file":"CarouselRenderer.cjs","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useRenderContext } from './RenderContext'\nimport type { UIComponent } from '../types'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n    const isExpanded = useExpanded()\n\n    // Use render context to avoid circular dependency\n    const { renderComponent } = useRenderContext()\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <ExpandableWrapper\n            title={'Carousel'}\n            copyData={JSON.stringify(props.items, null, 2)}\n            copyLabel=\"Copy items (JSON)\"\n        >\n        <div class={`relative group ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                {renderComponent(item)}\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n        </ExpandableWrapper>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","isExpanded","useExpanded","renderComponent","useRenderContext","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_$createComponent","ExpandableWrapper","title","copyData","JSON","stringify","items","copyLabel","children","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","For","each","item","_el$5","_tmpl$2","_el$6","_$effect","_p$","_v$","_v$2","_v$3","e","_$className","t","a","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;;;;AAWO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,QAAAA,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,QAAAA,aAAa,IAAI;AAC7D,QAAMG,aAAaC,kBAAAA,YAAAA;AAGnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAoBC,+BAAAA;AAE5B,QAAMC,cAAcA,MAAM;AACtB,QAAIC,IAAAA,YAAY,CAACX,gBAAiB;AAClCE,qBAAiBF,gBAAgBY,aAAa,CAAC;AAC/CP,sBACIL,gBAAgBY,aAAaZ,gBAAgBa,cAAcb,gBAAgBc,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,IAAAA,YAAY,CAACX,gBAAiB;AAClC,UAAMiB,eAAejB,gBAAgBc,cAAc;AACnDd,oBAAgBkB,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,SAAAC,IAAAA,gBACKC,kBAAAA,mBAAiB;AAAA,IACdC,OAAO;AAAA,IAAU,IACjBC,WAAQ;AAAA,aAAEC,KAAKC,UAAU3B,MAAM4B,OAAO,MAAM,CAAC;AAAA,IAAC;AAAA,IAC9CC,WAAS;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,YAAAK,UAKI,MAAMvB,OAAO,MAAM;AAACoB,YAAAG,UAUpB,MAAMvB,OAAO,OAAO;AAACsB,YAAAE,iBAAA,UAYpB7B,WAAW;AAAA,UAAA8B,QADhBxC;AAAe,aAAAwC,UAAA,aAAAC,IAAAA,IAAAD,OAAAH,KAAA,IAAfrC,kBAAeqC;AAAAK,iBAAAL,OAAAhB,IAAAA,gBAKnBsB,aAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE7C,MAAM4B;AAAAA,QAAK;AAAA,QAAAE,UAChBgB,WAAI,MAAA;AAAA,cAAAC,QAAAf,IAAAA,eAAAgB,OAAA,GAAAC,QAAAF,MAAAZ;AAAAQ,cAAAA,OAAAM,OAAA,MAGOxC,gBAAgBqC,IAAI,CAAC;AAAA,iBAAAC;AAAAA,QAAA,GAAA;AAAA,MAAA,CAGjC,CAAA;AAAAG,UAAAA,OAAAC,CAAAA,QAAA;AAAA,YAAAC,MApCD,kBAAkB7C,WAAAA,IAAe,iCAAiC,EAAE,IAAE8C,OAInE,4LAA4LnD,kBAAkB,sCAAsC,+BAA+B,IACpRoD,OASC,6LAA6LjD,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtR+C,gBAAAD,IAAAI,KAAAC,IAAAA,UAAAzB,MAAAoB,IAAAI,IAAAH,GAAA;AAAAC,iBAAAF,IAAAM,KAAAD,IAAAA,UAAAtB,OAAAiB,IAAAM,IAAAJ,IAAA;AAAAC,iBAAAH,IAAAO,KAAAF,IAAAA,UAAApB,OAAAe,IAAAO,IAAAJ,IAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,QAAAI,GAAAI;AAAAA,QAAAF,GAAAE;AAAAA,QAAAD,GAAAC;AAAAA,MAAAA,CAAA;AAAAC,6BAAAA;AAAA,aAAA7B;AAAAA,IAAA;AAAA,EAAA,CAAA;AA2BtB;AAAC8B,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselRenderer.d.ts","sourceRoot":"","sources":["../../src/components/CarouselRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,UAAU,CAAA;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CAmE7D,CAAA"}
+{"version":3,"file":"CarouselRenderer.d.ts","sourceRoot":"","sources":["../../src/components/CarouselRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,UAAU,CAAA;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,qBAAqB,CA0E7D,CAAA"}

package/dist/components/CarouselRenderer.js

@@ -1,11 +1,13 @@
-import { delegateEvents, getNextElement, template, insert, createComponent, effect, className, runHydrationEvents, isServer, use } from "solid-js/web";
+import { delegateEvents, createComponent, getNextElement, template, insert, effect, className, runHydrationEvents, isServer, use } from "solid-js/web";
 import { createSignal, For } from "solid-js";
 import { useRenderContext } from "./RenderContext.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div class="relative group"><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><div class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"style=scroll-behavior:smooth>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="flex-none w-[85%] sm:w-[45%] snap-center"><div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">`);
+import { useExpanded, ExpandableWrapper } from "./ExpandableWrapper.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><button><svg class="w-5 h-5 text-gray-700 dark:text-gray-300"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"></path></svg></button><div class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide"style=scroll-behavior:smooth>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="flex-none w-[85%] sm:w-[45%] snap-center"><div class="h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800">`);
 const CarouselRenderer = (props) => {
   let scrollContainer;
   const [canScrollLeft, setCanScrollLeft] = createSignal(false);
   const [canScrollRight, setCanScrollRight] = createSignal(true);
+  const isExpanded = useExpanded();
   const {
     renderComponent
   } = useRenderContext();
@@ -22,35 +24,44 @@ const CarouselRenderer = (props) => {
       behavior: "smooth"
     });
   };
-  return (() => {
-    var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
-    _el$2.$$click = () => scroll("left");
-    _el$3.$$click = () => scroll("right");
-    _el$4.addEventListener("scroll", checkScroll);
-    var _ref$ = scrollContainer;
-    typeof _ref$ === "function" ? use(_ref$, _el$4) : scrollContainer = _el$4;
-    insert(_el$4, createComponent(For, {
-      get each() {
-        return props.items;
-      },
-      children: (item) => (() => {
-        var _el$5 = getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
-        insert(_el$6, () => renderComponent(item));
-        return _el$5;
-      })()
-    }));
-    effect((_p$) => {
-      var _v$ = `absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`, _v$2 = `absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`;
-      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    runHydrationEvents();
-    return _el$;
-  })();
+  return createComponent(ExpandableWrapper, {
+    title: "Carousel",
+    get copyData() {
+      return JSON.stringify(props.items, null, 2);
+    },
+    copyLabel: "Copy items (JSON)",
+    get children() {
+      var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+      _el$2.$$click = () => scroll("left");
+      _el$3.$$click = () => scroll("right");
+      _el$4.addEventListener("scroll", checkScroll);
+      var _ref$ = scrollContainer;
+      typeof _ref$ === "function" ? use(_ref$, _el$4) : scrollContainer = _el$4;
+      insert(_el$4, createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: (item) => (() => {
+          var _el$5 = getNextElement(_tmpl$2), _el$6 = _el$5.firstChild;
+          insert(_el$6, () => renderComponent(item));
+          return _el$5;
+        })()
+      }));
+      effect((_p$) => {
+        var _v$ = `relative group ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$2 = `absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`, _v$3 = `absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? "opacity-0 group-hover:opacity-100" : "opacity-0 pointer-events-none"}`;
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      });
+      runHydrationEvents();
+      return _el$;
+    }
+  });
 };
 delegateEvents(["click"]);
 export {

package/dist/components/CarouselRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselRenderer.js","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useRenderContext } from './RenderContext'\nimport type { UIComponent } from '../types'\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n\n    // Use render context to avoid circular dependency\n    const { renderComponent } = useRenderContext()\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <div class=\"relative group\">\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                {renderComponent(item)}\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","renderComponent","useRenderContext","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","_$createComponent","For","each","items","children","item","_el$5","_tmpl$2","_el$6","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;AAUO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,aAAa,IAAI;AAG7D,QAAM;AAAA,IAAEG;AAAAA,EAAAA,IAAoBC,iBAAAA;AAE5B,QAAMC,cAAcA,MAAM;AACtB,QAAIC,YAAY,CAACT,gBAAiB;AAClCE,qBAAiBF,gBAAgBU,aAAa,CAAC;AAC/CL,sBACIL,gBAAgBU,aAAaV,gBAAgBW,cAAcX,gBAAgBY,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,YAAY,CAACT,gBAAiB;AAClC,UAAMe,eAAef,gBAAgBY,cAAc;AACnDZ,oBAAgBgB,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,UAAAK,UAIqB,MAAMd,OAAO,MAAM;AAACW,UAAAG,UAUpB,MAAMd,OAAO,OAAO;AAACa,UAAAE,iBAAA,UAYpBpB,WAAW;AAAA,QAAAqB,QADhB7B;AAAe,WAAA6B,UAAA,aAAAC,IAAAD,OAAAH,KAAA,IAAf1B,kBAAe0B;AAAAK,WAAAL,OAAAM,gBAKnBC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnC,MAAMoC;AAAAA,MAAK;AAAA,MAAAC,UAChBC,WAAI,MAAA;AAAA,YAAAC,QAAAlB,eAAAmB,OAAA,GAAAC,QAAAF,MAAAf;AAAAQ,eAAAS,OAAA,MAGOlC,gBAAgB+B,IAAI,CAAC;AAAA,eAAAC;AAAAA,MAAA,GAAA;AAAA,IAAA,CAGjC,CAAA;AAAAG,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAhCE,4LAA4L1C,cAAAA,IAAkB,sCAAsC,+BAA+B,IACpR2C,OASC,6LAA6LxC,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtRuC,cAAAD,IAAAG,KAAAC,UAAAxB,OAAAoB,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAD,UAAAtB,OAAAkB,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAC,uBAAAA;AAAA,WAAA9B;AAAAA,EAAA,GAAA;AA0BtB;AAAC+B,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"CarouselRenderer.js","sources":["../../src/components/CarouselRenderer.tsx"],"sourcesContent":["import { Component, For, createSignal } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useRenderContext } from './RenderContext'\nimport type { UIComponent } from '../types'\nimport { ExpandableWrapper, useExpanded } from './ExpandableWrapper'\n\nexport interface CarouselRendererProps {\n    items: UIComponent[]\n    height?: string\n}\n\nexport const CarouselRenderer: Component<CarouselRendererProps> = (props) => {\n    let scrollContainer: HTMLDivElement | undefined\n    const [canScrollLeft, setCanScrollLeft] = createSignal(false)\n    const [canScrollRight, setCanScrollRight] = createSignal(true)\n    const isExpanded = useExpanded()\n\n    // Use render context to avoid circular dependency\n    const { renderComponent } = useRenderContext()\n\n    const checkScroll = () => {\n        if (isServer || !scrollContainer) return\n        setCanScrollLeft(scrollContainer.scrollLeft > 0)\n        setCanScrollRight(\n            scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 10\n        )\n    }\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (isServer || !scrollContainer) return\n        const scrollAmount = scrollContainer.clientWidth * 0.8\n        scrollContainer.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth'\n        })\n    }\n\n    return (\n        <ExpandableWrapper\n            title={'Carousel'}\n            copyData={JSON.stringify(props.items, null, 2)}\n            copyLabel=\"Copy items (JSON)\"\n        >\n        <div class={`relative group ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>\n            {/* Navigation Buttons */}\n            <button\n                onClick={() => scroll('left')}\n                class={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollLeft() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n                </svg>\n            </button>\n\n            <button\n                onClick={() => scroll('right')}\n                class={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-full shadow-md border border-gray-200 dark:border-gray-700 transition-opacity ${canScrollRight() ? 'opacity-0 group-hover:opacity-100' : 'opacity-0 pointer-events-none'\n                    }`}\n            >\n                <svg class=\"w-5 h-5 text-gray-700 dark:text-gray-300\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n                </svg>\n            </button>\n\n            {/* Scroll Container */}\n            <div\n                ref={scrollContainer}\n                onScroll={checkScroll}\n                class=\"flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 scrollbar-hide\"\n                style={{ \"scroll-behavior\": \"smooth\" }}\n            >\n                <For each={props.items}>\n                    {(item) => (\n                        <div class=\"flex-none w-[85%] sm:w-[45%] snap-center\">\n                            <div class=\"h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800\">\n                                {renderComponent(item)}\n                            </div>\n                        </div>\n                    )}\n                </For>\n            </div>\n        </div>\n        </ExpandableWrapper>\n    )\n}\n"],"names":["CarouselRenderer","props","scrollContainer","canScrollLeft","setCanScrollLeft","createSignal","canScrollRight","setCanScrollRight","isExpanded","useExpanded","renderComponent","useRenderContext","checkScroll","isServer","scrollLeft","scrollWidth","clientWidth","scroll","direction","scrollAmount","scrollBy","left","behavior","_$createComponent","ExpandableWrapper","title","copyData","JSON","stringify","items","copyLabel","children","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","$$click","addEventListener","_ref$","_$use","_$insert","For","each","item","_el$5","_tmpl$2","_el$6","_$effect","_p$","_v$","_v$2","_v$3","e","_$className","t","a","undefined","_$runHydrationEvents","_$delegateEvents"],"mappings":";;;;;AAWO,MAAMA,mBAAsDC,CAAAA,UAAU;AACzE,MAAIC;AACJ,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,aAAa,KAAK;AAC5D,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,aAAa,IAAI;AAC7D,QAAMG,aAAaC,YAAAA;AAGnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAoBC,iBAAAA;AAE5B,QAAMC,cAAcA,MAAM;AACtB,QAAIC,YAAY,CAACX,gBAAiB;AAClCE,qBAAiBF,gBAAgBY,aAAa,CAAC;AAC/CP,sBACIL,gBAAgBY,aAAaZ,gBAAgBa,cAAcb,gBAAgBc,cAAc,EAC7F;AAAA,EACJ;AAEA,QAAMC,SAASA,CAACC,cAAgC;AAC5C,QAAIL,YAAY,CAACX,gBAAiB;AAClC,UAAMiB,eAAejB,gBAAgBc,cAAc;AACnDd,oBAAgBkB,SAAS;AAAA,MACrBC,MAAMH,cAAc,SAAS,CAACC,eAAeA;AAAAA,MAC7CG,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AAEA,SAAAC,gBACKC,mBAAiB;AAAA,IACdC,OAAO;AAAA,IAAU,IACjBC,WAAQ;AAAA,aAAEC,KAAKC,UAAU3B,MAAM4B,OAAO,MAAM,CAAC;AAAA,IAAC;AAAA,IAC9CC,WAAS;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC;AAAAH,YAAAK,UAKI,MAAMvB,OAAO,MAAM;AAACoB,YAAAG,UAUpB,MAAMvB,OAAO,OAAO;AAACsB,YAAAE,iBAAA,UAYpB7B,WAAW;AAAA,UAAA8B,QADhBxC;AAAe,aAAAwC,UAAA,aAAAC,IAAAD,OAAAH,KAAA,IAAfrC,kBAAeqC;AAAAK,aAAAL,OAAAhB,gBAKnBsB,KAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE7C,MAAM4B;AAAAA,QAAK;AAAA,QAAAE,UAChBgB,WAAI,MAAA;AAAA,cAAAC,QAAAf,eAAAgB,OAAA,GAAAC,QAAAF,MAAAZ;AAAAQ,iBAAAM,OAAA,MAGOxC,gBAAgBqC,IAAI,CAAC;AAAA,iBAAAC;AAAAA,QAAA,GAAA;AAAA,MAAA,CAGjC,CAAA;AAAAG,aAAAC,CAAAA,QAAA;AAAA,YAAAC,MApCD,kBAAkB7C,WAAAA,IAAe,iCAAiC,EAAE,IAAE8C,OAInE,4LAA4LnD,kBAAkB,sCAAsC,+BAA+B,IACpRoD,OASC,6LAA6LjD,eAAAA,IAAmB,sCAAsC,+BAA+B;AACtR+C,gBAAAD,IAAAI,KAAAC,UAAAzB,MAAAoB,IAAAI,IAAAH,GAAA;AAAAC,iBAAAF,IAAAM,KAAAD,UAAAtB,OAAAiB,IAAAM,IAAAJ,IAAA;AAAAC,iBAAAH,IAAAO,KAAAF,UAAApB,OAAAe,IAAAO,IAAAJ,IAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,QAAAI,GAAAI;AAAAA,QAAAF,GAAAE;AAAAA,QAAAD,GAAAC;AAAAA,MAAAA,CAAA;AAAAC,yBAAAA;AAAA,aAAA7B;AAAAA,IAAA;AAAA,EAAA,CAAA;AA2BtB;AAAC8B,eAAA,CAAA,OAAA,CAAA;"}

package/dist/components/ChartJSRenderer.cjs

@@ -25,7 +25,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const ExpandableWrapper = require("./ExpandableWrapper.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 px-2 py-1 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"title="Download PNG"aria-label="Download chart as PNG"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="flex items-center justify-between mb-3"><!$><!/><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group"><!$><!/><!$><!/><!$><!/><div class=w-full><canvas>`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 px-2 py-1 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"title="Download PNG"aria-label="Download chart as PNG"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="flex items-center justify-between mb-3 flex-shrink-0"><!$><!/><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800"><div class=text-center><div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3"><svg class="w-6 h-6 text-red-600 dark:text-red-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><!$><!/><div><canvas>`);
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -55,6 +55,12 @@ const ChartJSRenderer = (props) => {
   let canvasRef;
   let chartInstance;
   const params = () => props.component.params;
+  const isExpanded = ExpandableWrapper.useExpanded();
+  const exportEnabled = () => params().exportable !== false;
+  const copyDataJSON = () => JSON.stringify({
+    type: params().type,
+    data: params().data
+  }, null, 2);
   const handleExportPNG = () => {
     if (!canvasRef) return;
     const url = canvasRef.toDataURL("image/png");
@@ -132,11 +138,15 @@ const ChartJSRenderer = (props) => {
     get title() {
       return params().title || "Chart";
     },
+    get copyData() {
+      return copyDataJSON();
+    },
+    copyLabel: "Copy chart data (JSON)",
     get children() {
       var _el$ = web.getNextElement(_tmpl$6), _el$15 = _el$.firstChild, [_el$16, _co$3] = web.getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$4] = web.getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$5] = web.getNextMarker(_el$19.nextSibling), _el$13 = _el$20.nextSibling, _el$14 = _el$13.firstChild;
       web.insert(_el$, web.createComponent(solidJs.Show, {
         get when() {
-          return params().title || params().exportable;
+          return params().title || exportEnabled();
         },
         get children() {
           var _el$2 = web.getNextElement(_tmpl$3), _el$5 = _el$2.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = web.getNextMarker(_el$7.nextSibling);
@@ -152,7 +162,7 @@ const ChartJSRenderer = (props) => {
           }), _el$6, _co$);
           web.insert(_el$2, web.createComponent(solidJs.Show, {
             get when() {
-              return params().exportable;
+              return exportEnabled();
             },
             get children() {
               var _el$4 = web.getNextElement(_tmpl$2);
@@ -185,13 +195,23 @@ const ChartJSRenderer = (props) => {
       var _ref$ = canvasRef;
       typeof _ref$ === "function" ? web.use(_ref$, _el$14) : canvasRef = _el$14;
       web.effect((_p$) => {
-        var _v$ = params().height || "250px", _v$2 = error() ? "none" : "block";
-        _v$ !== _p$.e && web.setStyleProperty(_el$13, "height", _p$.e = _v$);
-        _v$2 !== _p$.t && web.setStyleProperty(_el$13, "display", _p$.t = _v$2);
+        var _v$ = `relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${isExpanded() ? "flex-1 min-h-0 flex flex-col" : ""}`, _v$2 = `w-full ${isExpanded() ? "flex-1 min-h-0" : ""}`, _v$3 = error() ? {
+          display: "none"
+        } : isExpanded() ? {
+          height: "100%",
+          display: "block"
+        } : {
+          height: params().height || "250px",
+          display: "block"
+        };
+        _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && web.className(_el$13, _p$.t = _v$2);
+        _p$.a = web.style(_el$13, _v$3, _p$.a);
         return _p$;
       }, {
         e: void 0,
-        t: void 0
+        t: void 0,
+        a: void 0
       });
       return _el$;
     }