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

package/CHANGELOG.md

@@ -5,6 +5,34 @@ 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).
 
+## [1.2.6] - 2025-11-26
+
+### Fixed - Sprint 12: Component Rendering (tagged release)
+- **CarouselRenderer**: Now actually rendered in UIResourceRenderer's ComponentRenderer
+- **ArtifactRenderer**: Now actually rendered in UIResourceRenderer's ComponentRenderer
+- Components were previously exported and registered but not rendered in the main switch
+- Fixed props mapping for both components
+
+## [1.2.5] - 2025-11-26
+
+### Fixed - Sprint 12: Component Rendering (re-release)
+- **CarouselRenderer**: Now actually rendered in UIResourceRenderer's ComponentRenderer
+- **ArtifactRenderer**: Now actually rendered in UIResourceRenderer's ComponentRenderer
+- Components were previously exported and registered but not rendered in the main switch
+- Fixed props mapping for both components
+
+## [1.2.4] - 2025-11-26
+
+### Note
+- Skipped due to npm publish issue (version already existed)
+
+## [1.2.3] - 2025-11-26
+
+### Fixed - Sprint 9: UI Fixes
+- **ErrorCardRenderer**: Added for proper error display
+- **UIResource vs UILayout routing**: Fixed validation routing
+- **auto-layout.ts**: Fixed label → title property mapping
+
 ## [1.2.2] - 2025-11-26
 
 ### Added - Sprint 4: Public Exports & Registry

package/dist/_virtual/_commonjsHelpers.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+//# sourceMappingURL=_commonjsHelpers.cjs.map

package/dist/_virtual/_commonjsHelpers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,7 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/_virtual/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+const _commonjsHelpers = require("./_commonjsHelpers.cjs");
+const index = require("../node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/lib/index.cjs");
+var libExports = /* @__PURE__ */ index.__require();
+const HighlightJS = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(libExports);
+module.exports = HighlightJS;
+//# sourceMappingURL=index.cjs.map

package/dist/_virtual/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/index.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireLib } from "../node_modules/.pnpm/highlight.js@11.11.1/node_modules/highlight.js/lib/index.js";
+var libExports = /* @__PURE__ */ requireLib();
+const HighlightJS = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
+export {
+  HighlightJS as default
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/leaflet-src.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const _commonjsHelpers = require("./_commonjsHelpers.cjs");
+const leafletSrc$2 = require("../node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/leaflet-src.cjs");
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: () => e[k]
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
+var leafletSrcExports = leafletSrc$2.__require();
+const leafletSrc = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(leafletSrcExports);
+const leafletSrc$1 = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null,
+  default: leafletSrc
+}, [leafletSrcExports]);
+exports.default = leafletSrc;
+exports.leafletSrc = leafletSrc$1;
+//# sourceMappingURL=leaflet-src.cjs.map

package/dist/_virtual/leaflet-src.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet-src.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_virtual/leaflet-src.js

@@ -0,0 +1,32 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireLeafletSrc } from "../node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/leaflet-src.js";
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: () => e[k]
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
+var leafletSrcExports = requireLeafletSrc();
+const leafletSrc = /* @__PURE__ */ getDefaultExportFromCjs(leafletSrcExports);
+const leafletSrc$1 = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null,
+  default: leafletSrc
+}, [leafletSrcExports]);
+export {
+  leafletSrc as default,
+  leafletSrc$1 as l
+};
+//# sourceMappingURL=leaflet-src.js.map

package/dist/_virtual/leaflet-src.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet-src.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_virtual/leaflet-src2.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var leafletSrc = { exports: {} };
+exports.__module = leafletSrc;
+//# sourceMappingURL=leaflet-src2.cjs.map

package/dist/_virtual/leaflet-src2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet-src2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/leaflet-src2.js

@@ -0,0 +1,5 @@
+var leafletSrc = { exports: {} };
+export {
+  leafletSrc as __module
+};
+//# sourceMappingURL=leaflet-src2.js.map

package/dist/_virtual/leaflet-src2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet-src2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/leaflet.markercluster-src.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const leaflet_markerclusterSrc$1 = require("../node_modules/.pnpm/leaflet.markercluster@1.5.3_leaflet@1.9.4/node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.cjs");
+leaflet_markerclusterSrc$1.__require();
+const leaflet_markerclusterSrc = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
+}, Symbol.toStringTag, { value: "Module" }));
+exports.leaflet_markerclusterSrc = leaflet_markerclusterSrc;
+//# sourceMappingURL=leaflet.markercluster-src.cjs.map

package/dist/_virtual/leaflet.markercluster-src.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet.markercluster-src.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/_virtual/leaflet.markercluster-src.js

@@ -0,0 +1,9 @@
+import { __require as requireLeaflet_markerclusterSrc } from "../node_modules/.pnpm/leaflet.markercluster@1.5.3_leaflet@1.9.4/node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js";
+requireLeaflet_markerclusterSrc();
+const leaflet_markerclusterSrc = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  leaflet_markerclusterSrc as l
+};
+//# sourceMappingURL=leaflet.markercluster-src.js.map

package/dist/_virtual/leaflet.markercluster-src.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet.markercluster-src.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/_virtual/leaflet.markercluster-src2.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var leaflet_markerclusterSrc = { exports: {} };
+exports.__module = leaflet_markerclusterSrc;
+//# sourceMappingURL=leaflet.markercluster-src2.cjs.map

package/dist/_virtual/leaflet.markercluster-src2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet.markercluster-src2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/leaflet.markercluster-src2.js

@@ -0,0 +1,5 @@
+var leaflet_markerclusterSrc = { exports: {} };
+export {
+  leaflet_markerclusterSrc as __module
+};
+//# sourceMappingURL=leaflet.markercluster-src2.js.map

package/dist/_virtual/leaflet.markercluster-src2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaflet.markercluster-src2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/ActionGroupRenderer.cjs

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+const useAction = require("../hooks/useAction.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<span class=text-current>`), _tmpl$2 = /* @__PURE__ */ web.template(`<a target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full">`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div role=group>`);
+const ActionButton = (props) => {
+  const {
+    execute,
+    isExecuting
+  } = useAction.useAction();
+  const handleClick = async (e) => {
+    if (props.action.disabled) return;
+    if (props.action.action === "tool-call" && props.action.toolName) {
+      e.preventDefault();
+      await execute(props.action.toolName, props.action.params || {});
+    } else if (props.action.action === "link" && props.action.url) {
+      window.open(props.action.url, "_blank", "noopener,noreferrer");
+    }
+  };
+  const isDisabled = () => props.action.disabled || props.action.action === "tool-call" && isExecuting();
+  const variantClass = () => {
+    switch (props.action.variant) {
+      case "primary":
+        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+      case "secondary":
+        return "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:ring-gray-500";
+      case "outline":
+        return "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500";
+      case "ghost":
+        return "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500";
+      case "danger":
+        return "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500";
+      default:
+        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+    }
+  };
+  const sizeClass = () => {
+    switch (props.action.size) {
+      case "sm":
+        return "px-2 py-1 text-xs";
+      case "lg":
+        return "px-6 py-3 text-base";
+      default:
+        return "px-4 py-2 text-sm";
+    }
+  };
+  if (props.action.type === "link" || props.action.action === "link" && props.action.url) {
+    return (() => {
+      var _el$ = web.getNextElement(_tmpl$2), _el$3 = _el$.firstChild, [_el$4, _co$] = web.getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = web.getNextMarker(_el$5.nextSibling);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return props.action.icon;
+        },
+        get children() {
+          var _el$2 = web.getNextElement(_tmpl$);
+          web.insert(_el$2, () => props.action.icon);
+          return _el$2;
+        }
+      }), _el$4, _co$);
+      web.insert(_el$, () => props.action.label, _el$6, _co$2);
+      web.effect((_p$) => {
+        var _v$ = props.action.url || "#", _v$2 = `inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${isDisabled() ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}`;
+        _v$ !== _p$.e && web.setAttribute(_el$, "href", _p$.e = _v$);
+        _v$2 !== _p$.t && web.className(_el$, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    })();
+  }
+  return (() => {
+    var _el$7 = web.getNextElement(_tmpl$4), _el$0 = _el$7.firstChild, [_el$1, _co$3] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = web.getNextMarker(_el$10.nextSibling), _el$12 = _el$11.nextSibling, [_el$13, _co$5] = web.getNextMarker(_el$12.nextSibling);
+    _el$7.$$click = handleClick;
+    web.insert(_el$7, web.createComponent(solidJs.Show, {
+      get when() {
+        return web.memo(() => !!isExecuting())() && props.action.action === "tool-call";
+      },
+      get children() {
+        return web.getNextElement(_tmpl$3);
+      }
+    }), _el$1, _co$3);
+    web.insert(_el$7, web.createComponent(solidJs.Show, {
+      get when() {
+        return web.memo(() => !!props.action.icon)() && !(isExecuting() && props.action.action === "tool-call");
+      },
+      get children() {
+        var _el$9 = web.getNextElement(_tmpl$);
+        web.insert(_el$9, () => props.action.icon);
+        return _el$9;
+      }
+    }), _el$11, _co$4);
+    web.insert(_el$7, () => props.action.label, _el$13, _co$5);
+    web.effect((_p$) => {
+      var _v$3 = isDisabled(), _v$4 = `inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${isDisabled() ? "opacity-50 cursor-not-allowed" : ""}`;
+      _v$3 !== _p$.e && web.setProperty(_el$7, "disabled", _p$.e = _v$3);
+      _v$4 !== _p$.t && web.className(_el$7, _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    web.runHydrationEvents();
+    return _el$7;
+  })();
+};
+const ActionGroupRenderer = (props) => {
+  const params = () => {
+    var _a;
+    return props.params || ((_a = props.component) == null ? void 0 : _a.params) || {
+      actions: []
+    };
+  };
+  const layoutClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.layout) {
+      case "vertical":
+        return "flex flex-col";
+      case "space-between":
+        return "flex justify-between";
+      case "end":
+        return "flex justify-end";
+      case "center":
+        return "flex justify-center";
+      default:
+        return "flex";
+    }
+  };
+  const gapClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.gap) {
+      case "none":
+        return "gap-0";
+      case "sm":
+        return "gap-1";
+      case "lg":
+        return "gap-4";
+      default:
+        return "gap-2";
+    }
+  };
+  return (() => {
+    var _el$14 = web.getNextElement(_tmpl$5);
+    web.insert(_el$14, web.createComponent(solidJs.For, {
+      get each() {
+        var _a;
+        return ((_a = params()) == null ? void 0 : _a.actions) || [];
+      },
+      children: (action, index) => web.createComponent(ActionButton, {
+        action,
+        get index() {
+          return index();
+        }
+      })
+    }));
+    web.effect((_p$) => {
+      var _a, _b;
+      var _v$5 = `${layoutClass()} ${gapClass()} ${((_a = params()) == null ? void 0 : _a.fullWidth) ? "w-full" : ""}`, _v$6 = ((_b = params()) == null ? void 0 : _b.label) || "Action group";
+      _v$5 !== _p$.e && web.className(_el$14, _p$.e = _v$5);
+      _v$6 !== _p$.t && web.setAttribute(_el$14, "aria-label", _p$.t = _v$6);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$14;
+  })();
+};
+web.delegateEvents(["click"]);
+exports.ActionGroupRenderer = ActionGroupRenderer;
+//# sourceMappingURL=ActionGroupRenderer.cjs.map

package/dist/components/ActionGroupRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroupRenderer.cjs","sources":["../../src/components/ActionGroupRenderer.tsx"],"sourcesContent":["/**\n * ActionGroupRenderer - Group of actions with layout options\n * Sprint 3: UX Improvements\n */\n\nimport { Component, For, Show } from 'solid-js'\nimport type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'\nimport { useAction } from '../hooks/useAction'\n\nexport interface ActionGroupRendererProps {\n  /**\n   * UIComponent with action-group params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct action group params (alternative to component)\n   */\n  params?: ActionGroupParams\n}\n\n/**\n * Render a single action button with variants and click handling\n */\nconst ActionButton: Component<{\n  action: ActionComponentParams\n  index: number\n}> = (props) => {\n  const { execute, isExecuting } = useAction()\n\n  const handleClick = async (e: MouseEvent) => {\n    if (props.action.disabled) return\n\n    if (props.action.action === 'tool-call' && props.action.toolName) {\n      e.preventDefault()\n      await execute(props.action.toolName, props.action.params || {})\n    } else if (props.action.action === 'link' && props.action.url) {\n      window.open(props.action.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const isDisabled = () =>\n    props.action.disabled || (props.action.action === 'tool-call' && isExecuting())\n\n  const variantClass = () => {\n    switch (props.action.variant) {\n      case 'primary':\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n      case 'secondary':\n        return 'bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:ring-gray-500'\n      case 'outline':\n        return 'border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500'\n      case 'ghost':\n        return 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500'\n      case 'danger':\n        return 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'\n      default:\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n    }\n  }\n\n  const sizeClass = () => {\n    switch (props.action.size) {\n      case 'sm':\n        return 'px-2 py-1 text-xs'\n      case 'lg':\n        return 'px-6 py-3 text-base'\n      default:\n        return 'px-4 py-2 text-sm'\n    }\n  }\n\n  // Render as link if it's a link action\n  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {\n    return (\n      <a\n        href={props.action.url || '#'}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${\n          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''\n        }`}\n      >\n        <Show when={props.action.icon}>\n          <span class=\"text-current\">{props.action.icon}</span>\n        </Show>\n        {props.action.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isDisabled()}\n      class={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${\n        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''\n      }`}\n    >\n      <Show when={isExecuting() && props.action.action === 'tool-call'}>\n        <span class=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n      </Show>\n      <Show when={props.action.icon && !(isExecuting() && props.action.action === 'tool-call')}>\n        <span class=\"text-current\">{props.action.icon}</span>\n      </Show>\n      {props.action.label}\n    </button>\n  )\n}\n\n/**\n * Action group component for rendering multiple actions with consistent layout\n *\n * @example\n * ```tsx\n * const actionGroup: UIComponent = {\n *   id: 'form-actions',\n *   type: 'action-group',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     layout: 'end',\n *     gap: 'md',\n *     actions: [\n *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },\n *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },\n *     ],\n *   },\n * }\n * <ActionGroupRenderer component={actionGroup} />\n * ```\n */\nexport const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {\n  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }\n\n  const layoutClass = () => {\n    switch (params()?.layout) {\n      case 'vertical':\n        return 'flex flex-col'\n      case 'space-between':\n        return 'flex justify-between'\n      case 'end':\n        return 'flex justify-end'\n      case 'center':\n        return 'flex justify-center'\n      default: // horizontal\n        return 'flex'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default: // md\n        return 'gap-2'\n    }\n  }\n\n  return (\n    <div\n      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}\n      role=\"group\"\n      aria-label={params()?.label || 'Action group'}\n    >\n      <For each={params()?.actions || []}>\n        {(action, index) => <ActionButton action={action} index={index()} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ActionButton","props","execute","isExecuting","useAction","handleClick","e","action","disabled","toolName","preventDefault","params","url","window","open","isDisabled","variantClass","variant","sizeClass","size","type","_el$","_$getNextElement","_tmpl$2","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$5","_el$6","_co$2","_$insert","_$createComponent","Show","when","icon","children","_el$2","_tmpl$","label","_$effect","_p$","_v$","_v$2","_$setAttribute","t","_$className","undefined","_el$7","_tmpl$4","_el$0","_el$1","_co$3","_el$10","_el$11","_co$4","_el$12","_el$13","_co$5","$$click","_$memo","_tmpl$3","_el$9","_v$3","_v$4","_$setProperty","_$runHydrationEvents","ActionGroupRenderer","component","actions","layoutClass","layout","gapClass","gap","_el$14","_tmpl$5","For","each","index","_v$5","fullWidth","_v$6","_$delegateEvents"],"mappings":"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"}

package/dist/components/ActionGroupRenderer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ActionGroupRenderer - Group of actions with layout options
+ * Sprint 3: UX Improvements
+ */
+import { Component } from 'solid-js';
+import type { UIComponent, ActionGroupParams } from '../types';
+export interface ActionGroupRendererProps {
+    /**
+     * UIComponent with action-group params (for declarative use)
+     */
+    component?: UIComponent;
+    /**
+     * Direct action group params (alternative to component)
+     */
+    params?: ActionGroupParams;
+}
+/**
+ * Action group component for rendering multiple actions with consistent layout
+ *
+ * @example
+ * ```tsx
+ * const actionGroup: UIComponent = {
+ *   id: 'form-actions',
+ *   type: 'action-group',
+ *   position: { colStart: 1, colSpan: 12 },
+ *   params: {
+ *     layout: 'end',
+ *     gap: 'md',
+ *     actions: [
+ *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },
+ *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },
+ *     ],
+ *   },
+ * }
+ * <ActionGroupRenderer component={actionGroup} />
+ * ```
+ */
+export declare const ActionGroupRenderer: Component<ActionGroupRendererProps>;
+//# sourceMappingURL=ActionGroupRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroupRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ActionGroupRenderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAa,MAAM,UAAU,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAyB,MAAM,UAAU,CAAA;AAGrF,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC3B;AA4FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,CAAC,wBAAwB,CA0CnE,CAAA"}

package/dist/components/ActionGroupRenderer.js

@@ -0,0 +1,173 @@
+import { delegateEvents, getNextElement, template, insert, createComponent, effect, className, setAttribute, getNextMarker, memo, setProperty, runHydrationEvents } from "solid-js/web";
+import { For, Show } from "solid-js";
+import { useAction } from "../hooks/useAction.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span class=text-current>`), _tmpl$2 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ template(`<span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full">`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<div role=group>`);
+const ActionButton = (props) => {
+  const {
+    execute,
+    isExecuting
+  } = useAction();
+  const handleClick = async (e) => {
+    if (props.action.disabled) return;
+    if (props.action.action === "tool-call" && props.action.toolName) {
+      e.preventDefault();
+      await execute(props.action.toolName, props.action.params || {});
+    } else if (props.action.action === "link" && props.action.url) {
+      window.open(props.action.url, "_blank", "noopener,noreferrer");
+    }
+  };
+  const isDisabled = () => props.action.disabled || props.action.action === "tool-call" && isExecuting();
+  const variantClass = () => {
+    switch (props.action.variant) {
+      case "primary":
+        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+      case "secondary":
+        return "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:ring-gray-500";
+      case "outline":
+        return "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500";
+      case "ghost":
+        return "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500";
+      case "danger":
+        return "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500";
+      default:
+        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+    }
+  };
+  const sizeClass = () => {
+    switch (props.action.size) {
+      case "sm":
+        return "px-2 py-1 text-xs";
+      case "lg":
+        return "px-6 py-3 text-base";
+      default:
+        return "px-4 py-2 text-sm";
+    }
+  };
+  if (props.action.type === "link" || props.action.action === "link" && props.action.url) {
+    return (() => {
+      var _el$ = getNextElement(_tmpl$2), _el$3 = _el$.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return props.action.icon;
+        },
+        get children() {
+          var _el$2 = getNextElement(_tmpl$);
+          insert(_el$2, () => props.action.icon);
+          return _el$2;
+        }
+      }), _el$4, _co$);
+      insert(_el$, () => props.action.label, _el$6, _co$2);
+      effect((_p$) => {
+        var _v$ = props.action.url || "#", _v$2 = `inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${isDisabled() ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}`;
+        _v$ !== _p$.e && setAttribute(_el$, "href", _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    })();
+  }
+  return (() => {
+    var _el$7 = getNextElement(_tmpl$4), _el$0 = _el$7.firstChild, [_el$1, _co$3] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = getNextMarker(_el$10.nextSibling), _el$12 = _el$11.nextSibling, [_el$13, _co$5] = getNextMarker(_el$12.nextSibling);
+    _el$7.$$click = handleClick;
+    insert(_el$7, createComponent(Show, {
+      get when() {
+        return memo(() => !!isExecuting())() && props.action.action === "tool-call";
+      },
+      get children() {
+        return getNextElement(_tmpl$3);
+      }
+    }), _el$1, _co$3);
+    insert(_el$7, createComponent(Show, {
+      get when() {
+        return memo(() => !!props.action.icon)() && !(isExecuting() && props.action.action === "tool-call");
+      },
+      get children() {
+        var _el$9 = getNextElement(_tmpl$);
+        insert(_el$9, () => props.action.icon);
+        return _el$9;
+      }
+    }), _el$11, _co$4);
+    insert(_el$7, () => props.action.label, _el$13, _co$5);
+    effect((_p$) => {
+      var _v$3 = isDisabled(), _v$4 = `inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${isDisabled() ? "opacity-50 cursor-not-allowed" : ""}`;
+      _v$3 !== _p$.e && setProperty(_el$7, "disabled", _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$7, _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    runHydrationEvents();
+    return _el$7;
+  })();
+};
+const ActionGroupRenderer = (props) => {
+  const params = () => {
+    var _a;
+    return props.params || ((_a = props.component) == null ? void 0 : _a.params) || {
+      actions: []
+    };
+  };
+  const layoutClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.layout) {
+      case "vertical":
+        return "flex flex-col";
+      case "space-between":
+        return "flex justify-between";
+      case "end":
+        return "flex justify-end";
+      case "center":
+        return "flex justify-center";
+      default:
+        return "flex";
+    }
+  };
+  const gapClass = () => {
+    var _a;
+    switch ((_a = params()) == null ? void 0 : _a.gap) {
+      case "none":
+        return "gap-0";
+      case "sm":
+        return "gap-1";
+      case "lg":
+        return "gap-4";
+      default:
+        return "gap-2";
+    }
+  };
+  return (() => {
+    var _el$14 = getNextElement(_tmpl$5);
+    insert(_el$14, createComponent(For, {
+      get each() {
+        var _a;
+        return ((_a = params()) == null ? void 0 : _a.actions) || [];
+      },
+      children: (action, index) => createComponent(ActionButton, {
+        action,
+        get index() {
+          return index();
+        }
+      })
+    }));
+    effect((_p$) => {
+      var _a, _b;
+      var _v$5 = `${layoutClass()} ${gapClass()} ${((_a = params()) == null ? void 0 : _a.fullWidth) ? "w-full" : ""}`, _v$6 = ((_b = params()) == null ? void 0 : _b.label) || "Action group";
+      _v$5 !== _p$.e && className(_el$14, _p$.e = _v$5);
+      _v$6 !== _p$.t && setAttribute(_el$14, "aria-label", _p$.t = _v$6);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$14;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  ActionGroupRenderer
+};
+//# sourceMappingURL=ActionGroupRenderer.js.map