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

package/dist/components/ModalRenderer.cjs

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<h2 id=modal-title class="text-lg font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div>`), _tmpl$3 = /* @__PURE__ */ web.template(`<button class="p-1 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"aria-label="Close modal"><svg class="w-5 h-5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"role=dialog aria-modal=true tabindex=-1 style="animation:modal-fade-in 0.15s ease-out"><div style="animation:modal-scale-in 0.15s ease-out"><!$><!/><div class=p-4>`), _tmpl$6 = /* @__PURE__ */ web.template(`<style>
+          @keyframes modal-fade-in {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes modal-scale-in {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+          }
+        `);
+const ModalRenderer = (props) => {
+  const [isVisible, setIsVisible] = solidJs.createSignal(false);
+  const params = () => {
+    var _a;
+    return props.params || ((_a = props.component) == null ? void 0 : _a.params) || {};
+  };
+  solidJs.createEffect(() => {
+    if (props.isOpen !== void 0) {
+      setIsVisible(props.isOpen);
+    }
+  });
+  solidJs.createEffect(() => {
+    if (!isVisible()) return;
+    const handleEscape = (e) => {
+      var _a;
+      if (e.key === "Escape" && ((_a = params()) == null ? void 0 : _a.closeOnEscape) !== false) {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    solidJs.onCleanup(() => document.removeEventListener("keydown", handleEscape));
+  });
+  solidJs.createEffect(() => {
+    if (isVisible()) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    solidJs.onCleanup(() => {
+      document.body.style.overflow = "";
+    });
+  });
+  solidJs.createEffect(() => {
+    if (isVisible()) {
+      setTimeout(() => {
+        const modal = document.querySelector('[role="dialog"]');
+        if (modal instanceof HTMLElement) {
+          modal.focus();
+        }
+      }, 10);
+    }
+  });
+  const handleClose = () => {
+    var _a;
+    setIsVisible(false);
+    (_a = props.onClose) == null ? void 0 : _a.call(props);
+  };
+  const handleBackdropClick = (e) => {
+    var _a;
+    if (e.target === e.currentTarget && ((_a = params()) == null ? void 0 : _a.closeOnBackdrop) !== false) {
+      handleClose();
+    }
+  };
+  const sizeClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.size) {
+      case "sm":
+        return "max-w-md";
+      case "lg":
+        return "max-w-4xl";
+      case "xl":
+        return "max-w-6xl";
+      case "full":
+        return "max-w-full mx-4";
+      default:
+        return "max-w-2xl";
+    }
+  };
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return isVisible();
+    },
+    get children() {
+      return web.createComponent(web.Portal, {
+        get children() {
+          return [(() => {
+            var _el$ = web.getNextElement(_tmpl$5), _el$2 = _el$.firstChild, _el$12 = _el$2.firstChild, [_el$13, _co$4] = web.getNextMarker(_el$12.nextSibling), _el$11 = _el$13.nextSibling;
+            _el$.$$click = handleBackdropClick;
+            _el$2.$$click = (e) => e.stopPropagation();
+            web.insert(_el$2, web.createComponent(solidJs.Show, {
+              get when() {
+                var _a, _b;
+                return ((_a = params()) == null ? void 0 : _a.title) || ((_b = params()) == null ? void 0 : _b.showClose) !== false;
+              },
+              get children() {
+                var _el$3 = web.getNextElement(_tmpl$4), _el$7 = _el$3.firstChild, [_el$8, _co$] = web.getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = web.getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$3] = web.getNextMarker(_el$1.nextSibling);
+                web.insert(_el$3, web.createComponent(solidJs.Show, {
+                  get when() {
+                    var _a;
+                    return (_a = params()) == null ? void 0 : _a.title;
+                  },
+                  get children() {
+                    var _el$4 = web.getNextElement(_tmpl$);
+                    web.insert(_el$4, () => params().title);
+                    return _el$4;
+                  }
+                }), _el$8, _co$);
+                web.insert(_el$3, web.createComponent(solidJs.Show, {
+                  get when() {
+                    var _a;
+                    return !((_a = params()) == null ? void 0 : _a.title);
+                  },
+                  get children() {
+                    return web.getNextElement(_tmpl$2);
+                  }
+                }), _el$0, _co$2);
+                web.insert(_el$3, web.createComponent(solidJs.Show, {
+                  get when() {
+                    var _a;
+                    return ((_a = params()) == null ? void 0 : _a.showClose) !== false;
+                  },
+                  get children() {
+                    var _el$6 = web.getNextElement(_tmpl$3);
+                    _el$6.$$click = handleClose;
+                    web.runHydrationEvents();
+                    return _el$6;
+                  }
+                }), _el$10, _co$3);
+                return _el$3;
+              }
+            }), _el$13, _co$4);
+            web.insert(_el$11, () => props.children);
+            web.effect((_p$) => {
+              var _a, _b;
+              var _v$ = ((_a = params()) == null ? void 0 : _a.title) ? "modal-title" : void 0, _v$2 = `relative w-full ${sizeClass()} bg-white dark:bg-gray-800 rounded-lg shadow-xl`, _v$3 = ((_b = params()) == null ? void 0 : _b.maxHeight) ? {
+                "max-height": params().maxHeight,
+                "overflow-y": "auto"
+              } : {};
+              _v$ !== _p$.e && web.setAttribute(_el$, "aria-labelledby", _p$.e = _v$);
+              _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
+              _p$.a = web.style(_el$11, _v$3, _p$.a);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            });
+            web.runHydrationEvents();
+            return _el$;
+          })(), web.getNextElement(_tmpl$6)];
+        }
+      });
+    }
+  });
+};
+web.delegateEvents(["click"]);
+exports.ModalRenderer = ModalRenderer;
+//# sourceMappingURL=ModalRenderer.cjs.map

package/dist/components/ModalRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalRenderer.cjs","sources":["../../src/components/ModalRenderer.tsx"],"sourcesContent":["/**\n * ModalRenderer - Dialog overlay component\n * Sprint 3: UX Improvements\n */\n\nimport { Component, Show, createSignal, createEffect, onCleanup, JSX } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { UIComponent, ModalComponentParams } from '../types'\n\nexport interface ModalRendererProps {\n  /**\n   * UIComponent with modal params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct modal params (alternative to component)\n   */\n  params?: ModalComponentParams\n\n  /**\n   * External open state control\n   */\n  isOpen?: boolean\n\n  /**\n   * Callback when modal is closed\n   */\n  onClose?: () => void\n\n  /**\n   * Modal content (preferred for programmatic use)\n   */\n  children?: JSX.Element\n}\n\n/**\n * Modal/Dialog overlay component with Portal rendering\n *\n * @example Programmatic usage\n * ```tsx\n * function MyComponent() {\n *   const { isOpen, open, close } = useModal()\n *\n *   return (\n *     <>\n *       <button onClick={open}>Open Modal</button>\n *       <ModalRenderer\n *         isOpen={isOpen()}\n *         onClose={close}\n *         params={{ title: 'My Modal', size: 'md' }}\n *       >\n *         <p>Modal content here</p>\n *       </ModalRenderer>\n *     </>\n *   )\n * }\n * ```\n *\n * @example Declarative usage\n * ```tsx\n * const modalComponent: UIComponent = {\n *   id: 'details-modal',\n *   type: 'modal',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     title: 'User Details',\n *     size: 'lg',\n *   },\n * }\n * <ModalRenderer component={modalComponent} isOpen={true} onClose={close} />\n * ```\n */\nexport const ModalRenderer: Component<ModalRendererProps> = (props) => {\n  const [isVisible, setIsVisible] = createSignal(false)\n\n  const params = () => props.params || (props.component?.params as ModalComponentParams) || {}\n\n  // Sync with external isOpen prop\n  createEffect(() => {\n    if (props.isOpen !== undefined) {\n      setIsVisible(props.isOpen)\n    }\n  })\n\n  // Handle escape key\n  createEffect(() => {\n    if (!isVisible()) return\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && params()?.closeOnEscape !== false) {\n        handleClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    onCleanup(() => document.removeEventListener('keydown', handleEscape))\n  })\n\n  // Prevent body scroll when modal is open\n  createEffect(() => {\n    if (isVisible()) {\n      document.body.style.overflow = 'hidden'\n    } else {\n      document.body.style.overflow = ''\n    }\n    onCleanup(() => {\n      document.body.style.overflow = ''\n    })\n  })\n\n  // Focus trap - focus the modal when it opens\n  createEffect(() => {\n    if (isVisible()) {\n      // Small delay to ensure the modal is rendered\n      setTimeout(() => {\n        const modal = document.querySelector('[role=\"dialog\"]')\n        if (modal instanceof HTMLElement) {\n          modal.focus()\n        }\n      }, 10)\n    }\n  })\n\n  const handleClose = () => {\n    setIsVisible(false)\n    props.onClose?.()\n  }\n\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget && params()?.closeOnBackdrop !== false) {\n      handleClose()\n    }\n  }\n\n  const sizeClass = () => {\n    switch (params()?.size) {\n      case 'sm':\n        return 'max-w-md'\n      case 'lg':\n        return 'max-w-4xl'\n      case 'xl':\n        return 'max-w-6xl'\n      case 'full':\n        return 'max-w-full mx-4'\n      default: // md\n        return 'max-w-2xl'\n    }\n  }\n\n  return (\n    <Show when={isVisible()}>\n      <Portal>\n        {/* Backdrop */}\n        <div\n          class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm\"\n          style={{ animation: 'modal-fade-in 0.15s ease-out' }}\n          onClick={handleBackdropClick}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={params()?.title ? 'modal-title' : undefined}\n          tabIndex={-1}\n        >\n          {/* Modal container */}\n          <div\n            class={`relative w-full ${sizeClass()} bg-white dark:bg-gray-800 rounded-lg shadow-xl`}\n            style={{ animation: 'modal-scale-in 0.15s ease-out' }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {/* Header */}\n            <Show when={params()?.title || params()?.showClose !== false}>\n              <div class=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700\">\n                <Show when={params()?.title}>\n                  <h2\n                    id=\"modal-title\"\n                    class=\"text-lg font-semibold text-gray-900 dark:text-white\"\n                  >\n                    {params()!.title}\n                  </h2>\n                </Show>\n                <Show when={!params()?.title}>\n                  <div />\n                </Show>\n                <Show when={params()?.showClose !== false}>\n                  <button\n                    onClick={handleClose}\n                    class=\"p-1 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 modal\"\n                  >\n                    <svg\n                      class=\"w-5 h-5\"\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=\"M6 18L18 6M6 6l12 12\"\n                      />\n                    </svg>\n                  </button>\n                </Show>\n              </div>\n            </Show>\n\n            {/* Content */}\n            <div\n              class=\"p-4\"\n              style={params()?.maxHeight ? { 'max-height': params()!.maxHeight, 'overflow-y': 'auto' } : {}}\n            >\n              {props.children}\n            </div>\n          </div>\n        </div>\n\n        {/* CSS Animations */}\n        <style>{`\n          @keyframes modal-fade-in {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          @keyframes modal-scale-in {\n            from { opacity: 0; transform: scale(0.95); }\n            to { opacity: 1; transform: scale(1); }\n          }\n        `}</style>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["ModalRenderer","props","isVisible","setIsVisible","createSignal","params","component","createEffect","isOpen","undefined","handleEscape","e","key","closeOnEscape","handleClose","document","addEventListener","onCleanup","removeEventListener","body","style","overflow","setTimeout","modal","querySelector","HTMLElement","focus","onClose","handleBackdropClick","target","currentTarget","closeOnBackdrop","sizeClass","size","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$5","_el$2","firstChild","_el$12","_el$13","_co$4","_$getNextMarker","nextSibling","_el$11","$$click","stopPropagation","_$insert","title","showClose","_el$3","_tmpl$4","_el$7","_el$8","_co$","_el$9","_el$0","_co$2","_el$1","_el$10","_co$3","_el$4","_tmpl$","_tmpl$2","_el$6","_tmpl$3","_$runHydrationEvents","_$effect","_p$","_v$","_v$2","_v$3","maxHeight","_$setAttribute","t","_$className","a","_$style","_tmpl$6","_$delegateEvents"],"mappings":"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"}

package/dist/components/ModalRenderer.d.ts

@@ -0,0 +1,67 @@
+/**
+ * ModalRenderer - Dialog overlay component
+ * Sprint 3: UX Improvements
+ */
+import { Component, JSX } from 'solid-js';
+import type { UIComponent, ModalComponentParams } from '../types';
+export interface ModalRendererProps {
+    /**
+     * UIComponent with modal params (for declarative use)
+     */
+    component?: UIComponent;
+    /**
+     * Direct modal params (alternative to component)
+     */
+    params?: ModalComponentParams;
+    /**
+     * External open state control
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when modal is closed
+     */
+    onClose?: () => void;
+    /**
+     * Modal content (preferred for programmatic use)
+     */
+    children?: JSX.Element;
+}
+/**
+ * Modal/Dialog overlay component with Portal rendering
+ *
+ * @example Programmatic usage
+ * ```tsx
+ * function MyComponent() {
+ *   const { isOpen, open, close } = useModal()
+ *
+ *   return (
+ *     <>
+ *       <button onClick={open}>Open Modal</button>
+ *       <ModalRenderer
+ *         isOpen={isOpen()}
+ *         onClose={close}
+ *         params={{ title: 'My Modal', size: 'md' }}
+ *       >
+ *         <p>Modal content here</p>
+ *       </ModalRenderer>
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * @example Declarative usage
+ * ```tsx
+ * const modalComponent: UIComponent = {
+ *   id: 'details-modal',
+ *   type: 'modal',
+ *   position: { colStart: 1, colSpan: 12 },
+ *   params: {
+ *     title: 'User Details',
+ *     size: 'lg',
+ *   },
+ * }
+ * <ModalRenderer component={modalComponent} isOpen={true} onClose={close} />
+ * ```
+ */
+export declare const ModalRenderer: Component<ModalRendererProps>;
+//# sourceMappingURL=ModalRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ModalRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAA+C,GAAG,EAAE,MAAM,UAAU,CAAA;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAEjE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAE7B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,kBAAkB,CA8JvD,CAAA"}

package/dist/components/ModalRenderer.js

@@ -0,0 +1,162 @@
+import { delegateEvents, createComponent, Portal, getNextElement, template, getNextMarker, insert, runHydrationEvents, effect, setAttribute, className, style } from "solid-js/web";
+import { createSignal, createEffect, onCleanup, Show } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<h2 id=modal-title class="text-lg font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<button class="p-1 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"aria-label="Close modal"><svg class="w-5 h-5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"role=dialog aria-modal=true tabindex=-1 style="animation:modal-fade-in 0.15s ease-out"><div style="animation:modal-scale-in 0.15s ease-out"><!$><!/><div class=p-4>`), _tmpl$6 = /* @__PURE__ */ template(`<style>
+          @keyframes modal-fade-in {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes modal-scale-in {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+          }
+        `);
+const ModalRenderer = (props) => {
+  const [isVisible, setIsVisible] = createSignal(false);
+  const params = () => {
+    var _a;
+    return props.params || ((_a = props.component) == null ? void 0 : _a.params) || {};
+  };
+  createEffect(() => {
+    if (props.isOpen !== void 0) {
+      setIsVisible(props.isOpen);
+    }
+  });
+  createEffect(() => {
+    if (!isVisible()) return;
+    const handleEscape = (e) => {
+      var _a;
+      if (e.key === "Escape" && ((_a = params()) == null ? void 0 : _a.closeOnEscape) !== false) {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    onCleanup(() => document.removeEventListener("keydown", handleEscape));
+  });
+  createEffect(() => {
+    if (isVisible()) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    onCleanup(() => {
+      document.body.style.overflow = "";
+    });
+  });
+  createEffect(() => {
+    if (isVisible()) {
+      setTimeout(() => {
+        const modal = document.querySelector('[role="dialog"]');
+        if (modal instanceof HTMLElement) {
+          modal.focus();
+        }
+      }, 10);
+    }
+  });
+  const handleClose = () => {
+    var _a;
+    setIsVisible(false);
+    (_a = props.onClose) == null ? void 0 : _a.call(props);
+  };
+  const handleBackdropClick = (e) => {
+    var _a;
+    if (e.target === e.currentTarget && ((_a = params()) == null ? void 0 : _a.closeOnBackdrop) !== false) {
+      handleClose();
+    }
+  };
+  const sizeClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.size) {
+      case "sm":
+        return "max-w-md";
+      case "lg":
+        return "max-w-4xl";
+      case "xl":
+        return "max-w-6xl";
+      case "full":
+        return "max-w-full mx-4";
+      default:
+        return "max-w-2xl";
+    }
+  };
+  return createComponent(Show, {
+    get when() {
+      return isVisible();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          return [(() => {
+            var _el$ = getNextElement(_tmpl$5), _el$2 = _el$.firstChild, _el$12 = _el$2.firstChild, [_el$13, _co$4] = getNextMarker(_el$12.nextSibling), _el$11 = _el$13.nextSibling;
+            _el$.$$click = handleBackdropClick;
+            _el$2.$$click = (e) => e.stopPropagation();
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                var _a, _b;
+                return ((_a = params()) == null ? void 0 : _a.title) || ((_b = params()) == null ? void 0 : _b.showClose) !== false;
+              },
+              get children() {
+                var _el$3 = getNextElement(_tmpl$4), _el$7 = _el$3.firstChild, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$3] = getNextMarker(_el$1.nextSibling);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    var _a;
+                    return (_a = params()) == null ? void 0 : _a.title;
+                  },
+                  get children() {
+                    var _el$4 = getNextElement(_tmpl$);
+                    insert(_el$4, () => params().title);
+                    return _el$4;
+                  }
+                }), _el$8, _co$);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    var _a;
+                    return !((_a = params()) == null ? void 0 : _a.title);
+                  },
+                  get children() {
+                    return getNextElement(_tmpl$2);
+                  }
+                }), _el$0, _co$2);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    var _a;
+                    return ((_a = params()) == null ? void 0 : _a.showClose) !== false;
+                  },
+                  get children() {
+                    var _el$6 = getNextElement(_tmpl$3);
+                    _el$6.$$click = handleClose;
+                    runHydrationEvents();
+                    return _el$6;
+                  }
+                }), _el$10, _co$3);
+                return _el$3;
+              }
+            }), _el$13, _co$4);
+            insert(_el$11, () => props.children);
+            effect((_p$) => {
+              var _a, _b;
+              var _v$ = ((_a = params()) == null ? void 0 : _a.title) ? "modal-title" : void 0, _v$2 = `relative w-full ${sizeClass()} bg-white dark:bg-gray-800 rounded-lg shadow-xl`, _v$3 = ((_b = params()) == null ? void 0 : _b.maxHeight) ? {
+                "max-height": params().maxHeight,
+                "overflow-y": "auto"
+              } : {};
+              _v$ !== _p$.e && setAttribute(_el$, "aria-labelledby", _p$.e = _v$);
+              _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+              _p$.a = style(_el$11, _v$3, _p$.a);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            });
+            runHydrationEvents();
+            return _el$;
+          })(), getNextElement(_tmpl$6)];
+        }
+      });
+    }
+  });
+};
+delegateEvents(["click"]);
+export {
+  ModalRenderer
+};
+//# sourceMappingURL=ModalRenderer.js.map

package/dist/components/ModalRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalRenderer.js","sources":["../../src/components/ModalRenderer.tsx"],"sourcesContent":["/**\n * ModalRenderer - Dialog overlay component\n * Sprint 3: UX Improvements\n */\n\nimport { Component, Show, createSignal, createEffect, onCleanup, JSX } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { UIComponent, ModalComponentParams } from '../types'\n\nexport interface ModalRendererProps {\n  /**\n   * UIComponent with modal params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct modal params (alternative to component)\n   */\n  params?: ModalComponentParams\n\n  /**\n   * External open state control\n   */\n  isOpen?: boolean\n\n  /**\n   * Callback when modal is closed\n   */\n  onClose?: () => void\n\n  /**\n   * Modal content (preferred for programmatic use)\n   */\n  children?: JSX.Element\n}\n\n/**\n * Modal/Dialog overlay component with Portal rendering\n *\n * @example Programmatic usage\n * ```tsx\n * function MyComponent() {\n *   const { isOpen, open, close } = useModal()\n *\n *   return (\n *     <>\n *       <button onClick={open}>Open Modal</button>\n *       <ModalRenderer\n *         isOpen={isOpen()}\n *         onClose={close}\n *         params={{ title: 'My Modal', size: 'md' }}\n *       >\n *         <p>Modal content here</p>\n *       </ModalRenderer>\n *     </>\n *   )\n * }\n * ```\n *\n * @example Declarative usage\n * ```tsx\n * const modalComponent: UIComponent = {\n *   id: 'details-modal',\n *   type: 'modal',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     title: 'User Details',\n *     size: 'lg',\n *   },\n * }\n * <ModalRenderer component={modalComponent} isOpen={true} onClose={close} />\n * ```\n */\nexport const ModalRenderer: Component<ModalRendererProps> = (props) => {\n  const [isVisible, setIsVisible] = createSignal(false)\n\n  const params = () => props.params || (props.component?.params as ModalComponentParams) || {}\n\n  // Sync with external isOpen prop\n  createEffect(() => {\n    if (props.isOpen !== undefined) {\n      setIsVisible(props.isOpen)\n    }\n  })\n\n  // Handle escape key\n  createEffect(() => {\n    if (!isVisible()) return\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && params()?.closeOnEscape !== false) {\n        handleClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    onCleanup(() => document.removeEventListener('keydown', handleEscape))\n  })\n\n  // Prevent body scroll when modal is open\n  createEffect(() => {\n    if (isVisible()) {\n      document.body.style.overflow = 'hidden'\n    } else {\n      document.body.style.overflow = ''\n    }\n    onCleanup(() => {\n      document.body.style.overflow = ''\n    })\n  })\n\n  // Focus trap - focus the modal when it opens\n  createEffect(() => {\n    if (isVisible()) {\n      // Small delay to ensure the modal is rendered\n      setTimeout(() => {\n        const modal = document.querySelector('[role=\"dialog\"]')\n        if (modal instanceof HTMLElement) {\n          modal.focus()\n        }\n      }, 10)\n    }\n  })\n\n  const handleClose = () => {\n    setIsVisible(false)\n    props.onClose?.()\n  }\n\n  const handleBackdropClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget && params()?.closeOnBackdrop !== false) {\n      handleClose()\n    }\n  }\n\n  const sizeClass = () => {\n    switch (params()?.size) {\n      case 'sm':\n        return 'max-w-md'\n      case 'lg':\n        return 'max-w-4xl'\n      case 'xl':\n        return 'max-w-6xl'\n      case 'full':\n        return 'max-w-full mx-4'\n      default: // md\n        return 'max-w-2xl'\n    }\n  }\n\n  return (\n    <Show when={isVisible()}>\n      <Portal>\n        {/* Backdrop */}\n        <div\n          class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm\"\n          style={{ animation: 'modal-fade-in 0.15s ease-out' }}\n          onClick={handleBackdropClick}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={params()?.title ? 'modal-title' : undefined}\n          tabIndex={-1}\n        >\n          {/* Modal container */}\n          <div\n            class={`relative w-full ${sizeClass()} bg-white dark:bg-gray-800 rounded-lg shadow-xl`}\n            style={{ animation: 'modal-scale-in 0.15s ease-out' }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {/* Header */}\n            <Show when={params()?.title || params()?.showClose !== false}>\n              <div class=\"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700\">\n                <Show when={params()?.title}>\n                  <h2\n                    id=\"modal-title\"\n                    class=\"text-lg font-semibold text-gray-900 dark:text-white\"\n                  >\n                    {params()!.title}\n                  </h2>\n                </Show>\n                <Show when={!params()?.title}>\n                  <div />\n                </Show>\n                <Show when={params()?.showClose !== false}>\n                  <button\n                    onClick={handleClose}\n                    class=\"p-1 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 modal\"\n                  >\n                    <svg\n                      class=\"w-5 h-5\"\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=\"M6 18L18 6M6 6l12 12\"\n                      />\n                    </svg>\n                  </button>\n                </Show>\n              </div>\n            </Show>\n\n            {/* Content */}\n            <div\n              class=\"p-4\"\n              style={params()?.maxHeight ? { 'max-height': params()!.maxHeight, 'overflow-y': 'auto' } : {}}\n            >\n              {props.children}\n            </div>\n          </div>\n        </div>\n\n        {/* CSS Animations */}\n        <style>{`\n          @keyframes modal-fade-in {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          @keyframes modal-scale-in {\n            from { opacity: 0; transform: scale(0.95); }\n            to { opacity: 1; transform: scale(1); }\n          }\n        `}</style>\n      </Portal>\n    </Show>\n  )\n}\n"],"names":["ModalRenderer","props","isVisible","setIsVisible","createSignal","params","component","createEffect","isOpen","undefined","handleEscape","e","key","closeOnEscape","handleClose","document","addEventListener","onCleanup","removeEventListener","body","style","overflow","setTimeout","modal","querySelector","HTMLElement","focus","onClose","handleBackdropClick","target","currentTarget","closeOnBackdrop","sizeClass","size","_$createComponent","Show","when","children","Portal","_el$","_$getNextElement","_tmpl$5","_el$2","firstChild","_el$12","_el$13","_co$4","_$getNextMarker","nextSibling","_el$11","$$click","stopPropagation","_$insert","title","showClose","_el$3","_tmpl$4","_el$7","_el$8","_co$","_el$9","_el$0","_co$2","_el$1","_el$10","_co$3","_el$4","_tmpl$","_tmpl$2","_el$6","_tmpl$3","_$runHydrationEvents","_$effect","_p$","_v$","_v$2","_v$3","maxHeight","_$setAttribute","t","_$className","a","_$style","_tmpl$6","_$delegateEvents"],"mappings":";;;;;;;;;;;;AAyEO,MAAMA,gBAAgDC,CAAAA,UAAU;AACrE,QAAM,CAACC,WAAWC,YAAY,IAAIC,aAAa,KAAK;AAEpD,QAAMC,SAASA,MAAAA;;AAAMJ,iBAAMI,YAAWJ,WAAMK,cAANL,mBAAiBI,WAAmC,CAAA;AAAA;AAG1FE,eAAa,MAAM;AACjB,QAAIN,MAAMO,WAAWC,QAAW;AAC9BN,mBAAaF,MAAMO,MAAM;AAAA,IAC3B;AAAA,EACF,CAAC;AAGDD,eAAa,MAAM;AACjB,QAAI,CAACL,YAAa;AAElB,UAAMQ,eAAeA,CAACC,MAAqB;;AACzC,UAAIA,EAAEC,QAAQ,cAAYP,YAAAA,MAAAA,mBAAUQ,mBAAkB,OAAO;AAC3DC,oBAAAA;AAAAA,MACF;AAAA,IACF;AAEAC,aAASC,iBAAiB,WAAWN,YAAY;AACjDO,cAAU,MAAMF,SAASG,oBAAoB,WAAWR,YAAY,CAAC;AAAA,EACvE,CAAC;AAGDH,eAAa,MAAM;AACjB,QAAIL,aAAa;AACfa,eAASI,KAAKC,MAAMC,WAAW;AAAA,IACjC,OAAO;AACLN,eAASI,KAAKC,MAAMC,WAAW;AAAA,IACjC;AACAJ,cAAU,MAAM;AACdF,eAASI,KAAKC,MAAMC,WAAW;AAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAGDd,eAAa,MAAM;AACjB,QAAIL,aAAa;AAEfoB,iBAAW,MAAM;AACf,cAAMC,QAAQR,SAASS,cAAc,iBAAiB;AACtD,YAAID,iBAAiBE,aAAa;AAChCF,gBAAMG,MAAAA;AAAAA,QACR;AAAA,MACF,GAAG,EAAE;AAAA,IACP;AAAA,EACF,CAAC;AAED,QAAMZ,cAAcA,MAAM;;AACxBX,iBAAa,KAAK;AAClBF,gBAAM0B,YAAN1B;AAAAA,EACF;AAEA,QAAM2B,sBAAsBA,CAACjB,MAAkB;;AAC7C,QAAIA,EAAEkB,WAAWlB,EAAEmB,mBAAiBzB,YAAAA,MAAAA,mBAAU0B,qBAAoB,OAAO;AACvEjB,kBAAAA;AAAAA,IACF;AAAA,EACF;AAEA,QAAMkB,YAAYA,MAAM;;AACtB,aAAQ3B,YAAAA,MAAAA,mBAAU4B,MAAAA;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,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAElC,UAAAA;AAAAA,IAAW;AAAA,IAAA,IAAAmC,WAAA;AAAA,aAAAH,gBACpBI,QAAM;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,EAAA,MAAA;AAAA,gBAAAE,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,SAAAF,MAAAC,YAAA,CAAAE,QAAAC,KAAA,IAAAC,cAAAH,OAAAI,WAAA,GAAAC,SAAAJ,OAAAG;AAAAT,iBAAAW,UAKMtB;AAAmBc,kBAAAQ,UAUhBvC,CAAAA,MAAMA,EAAEwC,gBAAAA;AAAiBC,mBAAAV,OAAAR,gBAGlCC,MAAI;AAAA,cAAA,IAACC,OAAI;;AAAA,yBAAE/B,YAAAA,MAAAA,mBAAUgD,YAAShD,YAAAA,MAAAA,mBAAUiD,eAAc;AAAA,cAAK;AAAA,cAAA,IAAAjB,WAAA;AAAA,oBAAAkB,QAAAf,eAAAgB,OAAA,GAAAC,QAAAF,MAAAZ,YAAA,CAAAe,OAAAC,IAAA,IAAAZ,cAAAU,MAAAT,WAAA,GAAAY,QAAAF,MAAAV,aAAA,CAAAa,OAAAC,KAAA,IAAAf,cAAAa,MAAAZ,WAAA,GAAAe,QAAAF,MAAAb,aAAA,CAAAgB,QAAAC,KAAA,IAAAlB,cAAAgB,MAAAf,WAAA;AAAAI,uBAAAG,OAAArB,gBAEvDC,MAAI;AAAA,kBAAA,IAACC,OAAI;;AAAA,4BAAE/B,kBAAAA,mBAAUgD;AAAAA,kBAAK;AAAA,kBAAA,IAAAhB,WAAA;AAAA,wBAAA6B,QAAA1B,eAAA2B,MAAA;AAAAf,2BAAAc,OAAA,MAKtB7D,OAAAA,EAAUgD,KAAK;AAAA,2BAAAa;AAAAA,kBAAA;AAAA,gBAAA,CAAA,GAAAR,OAAAC,IAAA;AAAAP,uBAAAG,OAAArB,gBAGnBC,MAAI;AAAA,kBAAA,IAACC,OAAI;;AAAA,2BAAE,GAAC/B,kBAAAA,mBAAUgD;AAAAA,kBAAK;AAAA,kBAAA,IAAAhB,WAAA;AAAA,2BAAAG,eAAA4B,OAAA;AAAA,kBAAA;AAAA,gBAAA,CAAA,GAAAP,OAAAC,KAAA;AAAAV,uBAAAG,OAAArB,gBAG3BC,MAAI;AAAA,kBAAA,IAACC,OAAI;;AAAA,6BAAE/B,YAAAA,MAAAA,mBAAUiD,eAAc;AAAA,kBAAK;AAAA,kBAAA,IAAAjB,WAAA;AAAA,wBAAAgC,QAAA7B,eAAA8B,OAAA;AAAAD,0BAAAnB,UAE5BpC;AAAWyD,uCAAAA;AAAA,2BAAAF;AAAAA,kBAAA;AAAA,gBAAA,CAAA,GAAAL,QAAAC,KAAA;AAAA,uBAAAV;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAAV,QAAAC,KAAA;AAAAM,mBAAAH,QAAA,MA2BzBhD,MAAMoC,QAAQ;AAAAmC,mBAAAC,CAAAA,QAAA;;AAAA,kBAAAC,QApDFrE,YAAAA,MAAAA,mBAAUgD,SAAQ,gBAAgB5C,QAASkE,OAKnD,mBAAmB3C,UAAAA,CAAW,mDAAiD4C,SA6C7EvE,YAAAA,MAAAA,mBAAUwE,aAAY;AAAA,gBAAE,cAAcxE,SAAUwE;AAAAA,gBAAW,cAAc;AAAA,cAAA,IAAW,CAAA;AAAEH,sBAAAD,IAAA9D,KAAAmE,aAAAvC,MAAA,mBAAAkC,IAAA9D,IAAA+D,GAAA;AAAAC,uBAAAF,IAAAM,KAAAC,UAAAtC,OAAA+B,IAAAM,IAAAJ,IAAA;AAAAF,kBAAAQ,IAAAC,MAAAjC,QAAA2B,MAAAH,IAAAQ,CAAA;AAAA,qBAAAR;AAAAA,YAAA,GAAA;AAAA,cAAA9D,GAAAF;AAAAA,cAAAsE,GAAAtE;AAAAA,cAAAwE,GAAAxE;AAAAA,YAAAA,CAAA;AAAA8D,+BAAAA;AAAA,mBAAAhC;AAAAA,UAAA,GAAA,GAAAC,eAAA2C,OAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAqB3G;AAACC,eAAA,CAAA,OAAA,CAAA;"}

package/dist/components/RenderContext.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg"><p class="text-sm text-yellow-800 dark:text-yellow-200">Component "<!$><!/>" cannot be rendered outside of UIResourceRenderer`);
+const defaultContextValue = {
+  renderComponent: (component) => (() => {
+    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling);
+    _el$6.nextSibling;
+    web.insert(_el$2, () => component.type, _el$6, _co$);
+    return _el$;
+  })()
+};
+const RenderContext = solidJs.createContext(defaultContextValue);
+function useRenderContext() {
+  return solidJs.useContext(RenderContext);
+}
+function RenderProvider(props) {
+  return web.createComponent(RenderContext.Provider, {
+    get value() {
+      return {
+        renderComponent: props.renderComponent
+      };
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+exports.RenderContext = RenderContext;
+exports.RenderProvider = RenderProvider;
+exports.useRenderContext = useRenderContext;
+//# sourceMappingURL=RenderContext.cjs.map

package/dist/components/RenderContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.cjs","sources":["../../src/components/RenderContext.tsx"],"sourcesContent":["/**\n * RenderContext - Provides component rendering without circular dependencies\n *\n * This context breaks the circular dependency between:\n * - UIResourceRenderer → CarouselRenderer/GridRenderer\n * - CarouselRenderer/GridRenderer → UIResourceRenderer\n *\n * By providing the render function via context, child components can render\n * nested components without importing UIResourceRenderer directly.\n */\n\nimport { createContext, useContext, JSX } from 'solid-js'\nimport type { UIComponent, RendererError } from '../types'\n\n/**\n * Render function type that renders a UIComponent\n */\nexport type RenderComponentFn = (\n  component: UIComponent,\n  onError?: (error: RendererError) => void\n) => JSX.Element\n\n/**\n * Context value for component rendering\n */\nexport interface RenderContextValue {\n  /**\n   * Renders a single UIComponent\n   */\n  renderComponent: RenderComponentFn\n}\n\n/**\n * Default context value (fallback when not wrapped in provider)\n */\nconst defaultContextValue: RenderContextValue = {\n  renderComponent: (component) => (\n    <div class=\"p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg\">\n      <p class=\"text-sm text-yellow-800 dark:text-yellow-200\">\n        Component \"{component.type}\" cannot be rendered outside of UIResourceRenderer\n      </p>\n    </div>\n  ),\n}\n\n/**\n * Context for providing component rendering capability\n */\nexport const RenderContext = createContext<RenderContextValue>(defaultContextValue)\n\n/**\n * Hook to access the render context\n * Used by CarouselRenderer and GridRenderer to render nested components\n */\nexport function useRenderContext(): RenderContextValue {\n  return useContext(RenderContext)\n}\n\n/**\n * Provider component for render context\n */\nexport function RenderProvider(props: {\n  renderComponent: RenderComponentFn\n  children: JSX.Element\n}) {\n  return (\n    <RenderContext.Provider value={{ renderComponent: props.renderComponent }}>\n      {props.children}\n    </RenderContext.Provider>\n  )\n}\n"],"names":["defaultContextValue","renderComponent","component","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$5","nextSibling","_el$6","_co$","_$getNextMarker","_$insert","type","RenderContext","createContext","useRenderContext","useContext","RenderProvider","props","_$createComponent","Provider","value","children"],"mappings":";;;;;AAmCA,MAAMA,sBAA0C;AAAA,EAC9CC,iBAAkBC,gBAAS,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAA,CAAAC,OAAAC,IAAA,IAAAC,IAAAA,cAAAJ,MAAAC,WAAA;AAAAC,UAAAD;AAAAI,QAAAA,OAAAR,OAAA,MAGTJ,UAAUa,MAAIJ,OAAAC,IAAA;AAAA,WAAAT;AAAAA,EAAA,GAAA;AAIlC;AAKO,MAAMa,gBAAgBC,QAAAA,cAAkCjB,mBAAmB;AAM3E,SAASkB,mBAAuC;AACrD,SAAOC,QAAAA,WAAWH,aAAa;AACjC;AAKO,SAASI,eAAeC,OAG5B;AACD,SAAAC,IAAAA,gBACGN,cAAcO,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAE;AAAA,QAAEvB,iBAAiBoB,MAAMpB;AAAAA,MAAAA;AAAAA,IAAiB;AAAA,IAAA,IAAAwB,WAAA;AAAA,aACtEJ,MAAMI;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;;;;"}

package/dist/components/RenderContext.d.ts

@@ -0,0 +1,42 @@
+/**
+ * RenderContext - Provides component rendering without circular dependencies
+ *
+ * This context breaks the circular dependency between:
+ * - UIResourceRenderer → CarouselRenderer/GridRenderer
+ * - CarouselRenderer/GridRenderer → UIResourceRenderer
+ *
+ * By providing the render function via context, child components can render
+ * nested components without importing UIResourceRenderer directly.
+ */
+import { JSX } from 'solid-js';
+import type { UIComponent, RendererError } from '../types';
+/**
+ * Render function type that renders a UIComponent
+ */
+export type RenderComponentFn = (component: UIComponent, onError?: (error: RendererError) => void) => JSX.Element;
+/**
+ * Context value for component rendering
+ */
+export interface RenderContextValue {
+    /**
+     * Renders a single UIComponent
+     */
+    renderComponent: RenderComponentFn;
+}
+/**
+ * Context for providing component rendering capability
+ */
+export declare const RenderContext: import("solid-js").Context<RenderContextValue>;
+/**
+ * Hook to access the render context
+ * Used by CarouselRenderer and GridRenderer to render nested components
+ */
+export declare function useRenderContext(): RenderContextValue;
+/**
+ * Provider component for render context
+ */
+export declare function RenderProvider(props: {
+    renderComponent: RenderComponentFn;
+    children: JSX.Element;
+}): JSX.Element;
+//# sourceMappingURL=RenderContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.d.ts","sourceRoot":"","sources":["../../src/components/RenderContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAA6B,GAAG,EAAE,MAAM,UAAU,CAAA;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE1D;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAC9B,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,KACrC,GAAG,CAAC,OAAO,CAAA;AAEhB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,eAAe,EAAE,iBAAiB,CAAA;CACnC;AAeD;;GAEG;AACH,eAAO,MAAM,aAAa,gDAAyD,CAAA;AAEnF;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,CAErD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,eAAe,EAAE,iBAAiB,CAAA;IAClC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,eAMA"}

package/dist/components/RenderContext.js

@@ -0,0 +1,33 @@
+import { getNextElement, template, getNextMarker, insert, createComponent } from "solid-js/web";
+import { createContext, useContext } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg"><p class="text-sm text-yellow-800 dark:text-yellow-200">Component "<!$><!/>" cannot be rendered outside of UIResourceRenderer`);
+const defaultContextValue = {
+  renderComponent: (component) => (() => {
+    var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, [_el$6, _co$] = getNextMarker(_el$5.nextSibling);
+    _el$6.nextSibling;
+    insert(_el$2, () => component.type, _el$6, _co$);
+    return _el$;
+  })()
+};
+const RenderContext = createContext(defaultContextValue);
+function useRenderContext() {
+  return useContext(RenderContext);
+}
+function RenderProvider(props) {
+  return createComponent(RenderContext.Provider, {
+    get value() {
+      return {
+        renderComponent: props.renderComponent
+      };
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+export {
+  RenderContext,
+  RenderProvider,
+  useRenderContext
+};
+//# sourceMappingURL=RenderContext.js.map

package/dist/components/RenderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderContext.js","sources":["../../src/components/RenderContext.tsx"],"sourcesContent":["/**\n * RenderContext - Provides component rendering without circular dependencies\n *\n * This context breaks the circular dependency between:\n * - UIResourceRenderer → CarouselRenderer/GridRenderer\n * - CarouselRenderer/GridRenderer → UIResourceRenderer\n *\n * By providing the render function via context, child components can render\n * nested components without importing UIResourceRenderer directly.\n */\n\nimport { createContext, useContext, JSX } from 'solid-js'\nimport type { UIComponent, RendererError } from '../types'\n\n/**\n * Render function type that renders a UIComponent\n */\nexport type RenderComponentFn = (\n  component: UIComponent,\n  onError?: (error: RendererError) => void\n) => JSX.Element\n\n/**\n * Context value for component rendering\n */\nexport interface RenderContextValue {\n  /**\n   * Renders a single UIComponent\n   */\n  renderComponent: RenderComponentFn\n}\n\n/**\n * Default context value (fallback when not wrapped in provider)\n */\nconst defaultContextValue: RenderContextValue = {\n  renderComponent: (component) => (\n    <div class=\"p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg\">\n      <p class=\"text-sm text-yellow-800 dark:text-yellow-200\">\n        Component \"{component.type}\" cannot be rendered outside of UIResourceRenderer\n      </p>\n    </div>\n  ),\n}\n\n/**\n * Context for providing component rendering capability\n */\nexport const RenderContext = createContext<RenderContextValue>(defaultContextValue)\n\n/**\n * Hook to access the render context\n * Used by CarouselRenderer and GridRenderer to render nested components\n */\nexport function useRenderContext(): RenderContextValue {\n  return useContext(RenderContext)\n}\n\n/**\n * Provider component for render context\n */\nexport function RenderProvider(props: {\n  renderComponent: RenderComponentFn\n  children: JSX.Element\n}) {\n  return (\n    <RenderContext.Provider value={{ renderComponent: props.renderComponent }}>\n      {props.children}\n    </RenderContext.Provider>\n  )\n}\n"],"names":["defaultContextValue","renderComponent","component","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$5","nextSibling","_el$6","_co$","_$getNextMarker","_$insert","type","RenderContext","createContext","useRenderContext","useContext","RenderProvider","props","_$createComponent","Provider","value","children"],"mappings":";;;AAmCA,MAAMA,sBAA0C;AAAA,EAC9CC,iBAAkBC,gBAAS,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAA,CAAAC,OAAAC,IAAA,IAAAC,cAAAJ,MAAAC,WAAA;AAAAC,UAAAD;AAAAI,WAAAR,OAAA,MAGTJ,UAAUa,MAAIJ,OAAAC,IAAA;AAAA,WAAAT;AAAAA,EAAA,GAAA;AAIlC;AAKO,MAAMa,gBAAgBC,cAAkCjB,mBAAmB;AAM3E,SAASkB,mBAAuC;AACrD,SAAOC,WAAWH,aAAa;AACjC;AAKO,SAASI,eAAeC,OAG5B;AACD,SAAAC,gBACGN,cAAcO,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAE;AAAA,QAAEvB,iBAAiBoB,MAAMpB;AAAAA,MAAAA;AAAAA,IAAiB;AAAA,IAAA,IAAAwB,WAAA;AAAA,aACtEJ,MAAMI;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;"}