powr-sdk-web 4.0.2 → 4.0.4

package/dist/tools/PowrBaseTools.js

@@ -12,6 +12,11 @@ var _PowrToolConfig = _interopRequireDefault(require("./PowrToolConfig"));
 var _PowrToolStatus = _interopRequireDefault(require("./PowrToolStatus"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t6 in e) "default" !== _t6 && {}.hasOwnProperty.call(e, _t6) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t6)) && (i.get || i.set) ? o(f, _t6, i) : f[_t6] = e[_t6]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
@@ -22,6 +27,121 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+// Inline styles for the tools component
+var styles = {
+  container: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    color: '#374151',
+    background: '#ffffff',
+    borderRadius: '8px',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    overflow: 'hidden'
+  },
+  containerDark: {
+    background: '#1f2937',
+    color: '#f9fafb'
+  },
+  header: {
+    padding: '24px 24px 0',
+    borderBottom: '1px solid #e5e7eb'
+  },
+  headerDark: {
+    borderBottomColor: '#374151'
+  },
+  headerTitle: {
+    fontSize: '24px',
+    fontWeight: '700',
+    margin: '0 0 8px 0',
+    color: '#111827'
+  },
+  headerTitleDark: {
+    color: '#f9fafb'
+  },
+  headerSubtitle: {
+    fontSize: '14px',
+    color: '#6b7280',
+    margin: '0 0 24px 0'
+  },
+  headerSubtitleDark: {
+    color: '#9ca3af'
+  },
+  tabs: {
+    display: 'flex',
+    borderBottom: '1px solid #e5e7eb',
+    background: '#f9fafb'
+  },
+  tabsDark: {
+    borderBottomColor: '#374151',
+    background: '#111827'
+  },
+  tab: {
+    flex: 1,
+    padding: '16px 24px',
+    background: 'none',
+    border: 'none',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: '#6b7280',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    borderBottom: '2px solid transparent'
+  },
+  tabDark: {
+    color: '#9ca3af'
+  },
+  tabHover: {
+    color: '#374151',
+    background: '#f3f4f6'
+  },
+  tabHoverDark: {
+    color: '#d1d5db',
+    background: '#1f2937'
+  },
+  tabActive: {
+    color: '#2563eb',
+    borderBottomColor: '#2563eb',
+    background: '#ffffff'
+  },
+  tabActiveDark: {
+    background: '#1f2937'
+  },
+  content: {
+    padding: '24px'
+  },
+  loading: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '200px',
+    fontSize: '16px',
+    color: '#6b7280'
+  },
+  loadingDark: {
+    color: '#9ca3af'
+  },
+  error: {
+    padding: '24px',
+    textAlign: 'center'
+  },
+  errorMessage: {
+    color: '#dc2626',
+    marginBottom: '16px',
+    fontSize: '14px'
+  },
+  errorMessageDark: {
+    color: '#f87171'
+  },
+  retryButton: {
+    background: '#2563eb',
+    color: 'white',
+    border: 'none',
+    padding: '8px 16px',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    transition: 'background 0.2s ease'
+  }
+};
 var PowrBaseTools = function PowrBaseTools(_ref) {
   var apiUrl = _ref.apiUrl,
     projectId = _ref.projectId,
@@ -261,43 +381,46 @@ var PowrBaseTools = function PowrBaseTools(_ref) {
   }, []);
   if (loading) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "powr-tools-loading ".concat(className)
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "loading-spinner"
-    }, "Loading tools..."));
+      style: _objectSpread(_objectSpread({}, styles.loading), theme === 'dark' ? styles.loadingDark : {})
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Loading tools..."));
   }
   if (error) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "powr-tools-error ".concat(className)
+      style: styles.error
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "error-message"
+      style: _objectSpread(_objectSpread({}, styles.errorMessage), theme === 'dark' ? styles.errorMessageDark : {})
     }, error), /*#__PURE__*/_react["default"].createElement("button", {
+      style: styles.retryButton,
       onClick: fetchTools
     }, "Retry"));
   }
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "powr-base-tools ".concat(className, " theme-").concat(theme)
+    style: _objectSpread(_objectSpread({}, styles.container), theme === 'dark' ? styles.containerDark : {})
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tools-header"
-  }, /*#__PURE__*/_react["default"].createElement("h2", null, "Tools"), /*#__PURE__*/_react["default"].createElement("p", null, "Connect and manage your tools and services")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tools-tabs"
+    style: _objectSpread(_objectSpread({}, styles.header), theme === 'dark' ? styles.headerDark : {})
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    style: _objectSpread(_objectSpread({}, styles.headerTitle), theme === 'dark' ? styles.headerTitleDark : {})
+  }, "Tools"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: _objectSpread(_objectSpread({}, styles.headerSubtitle), theme === 'dark' ? styles.headerSubtitleDark : {})
+  }, "Connect and manage your tools and services")), /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, styles.tabs), theme === 'dark' ? styles.tabsDark : {})
   }, /*#__PURE__*/_react["default"].createElement("button", {
-    className: "tab ".concat(activeTab === 'available' ? 'active' : ''),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styles.tab), theme === 'dark' ? styles.tabDark : {}), activeTab === 'available' ? theme === 'dark' ? styles.tabActiveDark : styles.tabActive : {}),
     onClick: function onClick() {
       return setActiveTab('available');
     }
   }, "Available Tools"), showUserSettings && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "tab ".concat(activeTab === 'configured' ? 'active' : ''),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styles.tab), theme === 'dark' ? styles.tabDark : {}), activeTab === 'configured' ? theme === 'dark' ? styles.tabActiveDark : styles.tabActive : {}),
     onClick: function onClick() {
       return setActiveTab('configured');
     }
   }, "My Tools"), showGlobalSettings && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "tab ".concat(activeTab === 'global' ? 'active' : ''),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styles.tab), theme === 'dark' ? styles.tabDark : {}), activeTab === 'global' ? theme === 'dark' ? styles.tabActiveDark : styles.tabActive : {}),
     onClick: function onClick() {
       return setActiveTab('global');
     }
   }, "Global Settings")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tools-content"
+    style: styles.content
   }, activeTab === 'available' && /*#__PURE__*/_react["default"].createElement(_PowrToolList["default"], {
     tools: tools,
     userTools: userTools,

package/dist/tools/PowrToolCard.js

@@ -6,6 +6,180 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// Inline styles for the tool card component
+var cardStyles = {
+  card: {
+    background: '#ffffff',
+    border: '1px solid #e5e7eb',
+    borderRadius: '12px',
+    padding: '20px',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    position: 'relative'
+  },
+  cardEnabled: {
+    borderColor: '#10b981'
+  },
+  cardConfigured: {
+    borderLeft: '4px solid #2563eb'
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '16px',
+    marginBottom: '16px'
+  },
+  icon: {
+    flexShrink: 0,
+    width: '48px',
+    height: '48px',
+    background: '#f3f4f6',
+    borderRadius: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '24px'
+  },
+  info: {
+    flex: 1,
+    minWidth: 0
+  },
+  name: {
+    fontSize: '18px',
+    fontWeight: '600',
+    margin: '0 0 4px 0',
+    color: '#111827',
+    lineHeight: 1.2
+  },
+  description: {
+    fontSize: '14px',
+    color: '#6b7280',
+    margin: '0 0 8px 0',
+    lineHeight: 1.4
+  },
+  meta: {
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'center'
+  },
+  category: {
+    background: '#dbeafe',
+    color: '#1e40af',
+    padding: '4px 8px',
+    borderRadius: '6px',
+    fontSize: '12px',
+    fontWeight: '500',
+    textTransform: 'capitalize'
+  },
+  version: {
+    fontSize: '12px',
+    color: '#6b7280',
+    fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", monospace'
+  },
+  status: {
+    flexShrink: 0
+  },
+  statusBadge: {
+    padding: '4px 8px',
+    borderRadius: '6px',
+    fontSize: '12px',
+    fontWeight: '500'
+  },
+  statusEnabled: {
+    background: '#dcfce7',
+    color: '#166534'
+  },
+  statusDisabled: {
+    background: '#fef2f2',
+    color: '#991b1b'
+  },
+  actions: {
+    marginTop: '16px'
+  },
+  availableActions: {
+    marginBottom: '16px'
+  },
+  actionsTitle: {
+    fontSize: '14px',
+    fontWeight: '600',
+    margin: '0 0 8px 0',
+    color: '#374151'
+  },
+  actionsList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px'
+  },
+  actionItem: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '8px 12px',
+    background: '#f9fafb',
+    borderRadius: '6px',
+    fontSize: '13px'
+  },
+  actionName: {
+    fontWeight: '500',
+    color: '#374151'
+  },
+  actionDescription: {
+    color: '#6b7280',
+    fontSize: '12px'
+  },
+  actionButtons: {
+    display: 'flex',
+    gap: '8px',
+    flexWrap: 'wrap'
+  },
+  button: {
+    padding: '8px 16px',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '13px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    flex: 1,
+    minWidth: '80px'
+  },
+  toggleEnabled: {
+    background: '#dc2626',
+    color: 'white'
+  },
+  toggleDisabled: {
+    background: '#10b981',
+    color: 'white'
+  },
+  testButton: {
+    background: '#f59e0b',
+    color: 'white'
+  },
+  configureButton: {
+    background: '#2563eb',
+    color: 'white'
+  },
+  tags: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '6px',
+    marginTop: '12px'
+  },
+  tag: {
+    background: '#f3f4f6',
+    color: '#374151',
+    padding: '4px 8px',
+    borderRadius: '4px',
+    fontSize: '12px',
+    fontWeight: '500'
+  }
+};
 var PowrToolCard = function PowrToolCard(_ref) {
   var tool = _ref.tool,
     userTool = _ref.userTool,
@@ -34,67 +208,92 @@ var PowrToolCard = function PowrToolCard(_ref) {
       onExecute(tool.id, actionId, params);
     }
   };
+
+  // Get icon based on tool name
+  var getToolIcon = function getToolIcon(toolName) {
+    var name = toolName.toLowerCase();
+    if (name.includes('gmail') || name.includes('email')) return '📧';
+    if (name.includes('slack')) return '💬';
+    if (name.includes('github')) return '🐙';
+    if (name.includes('openai') || name.includes('ai')) return '🤖';
+    if (name.includes('stripe') || name.includes('payment')) return '💳';
+    if (name.includes('aws') || name.includes('s3')) return '☁️';
+    if (name.includes('google') || name.includes('drive')) return '📁';
+    if (name.includes('twitter') || name.includes('x')) return '🐦';
+    if (name.includes('linkedin')) return '💼';
+    if (name.includes('discord')) return '🎮';
+    if (name.includes('notion')) return '📝';
+    if (name.includes('trello') || name.includes('jira')) return '📋';
+    if (name.includes('zoom') || name.includes('meet')) return '📹';
+    if (name.includes('calendar')) return '📅';
+    if (name.includes('dropbox')) return '📦';
+    if (name.includes('figma')) return '🎨';
+    if (name.includes('shopify')) return '🛒';
+    if (name.includes('mailchimp')) return '📢';
+    if (name.includes('hubspot')) return '🎯';
+    return '🔧'; // Default icon
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "powr-tool-card ".concat(isEnabled ? 'enabled' : 'disabled', " ").concat(isConfigured ? 'configured' : ''),
+    style: _objectSpread(_objectSpread(_objectSpread({}, cardStyles.card), isEnabled ? cardStyles.cardEnabled : {}), isConfigured ? cardStyles.cardConfigured : {}),
     onClick: function onClick() {
       return onSelect && onSelect(tool);
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-header"
+    style: cardStyles.header
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-icon"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "icon"
-  }, tool.icon)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-info"
+    style: cardStyles.icon
+  }, /*#__PURE__*/_react["default"].createElement("span", null, getToolIcon(tool.name))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: cardStyles.info
   }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: "tool-name"
+    style: cardStyles.name
   }, tool.name), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "tool-description"
+    style: cardStyles.description
   }, tool.description), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-meta"
+    style: cardStyles.meta
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "category"
+    style: cardStyles.category
   }, tool.category), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "version"
+    style: cardStyles.version
   }, "v", tool.version))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-status"
+    style: cardStyles.status
   }, isConfigured && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "status-badge ".concat(isEnabled ? 'enabled' : 'disabled')
+    style: _objectSpread(_objectSpread({}, cardStyles.statusBadge), isEnabled ? cardStyles.statusEnabled : cardStyles.statusDisabled)
   }, isEnabled ? 'Active' : 'Inactive'))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-actions"
+    style: cardStyles.actions
   }, tool.actions && tool.actions.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "available-actions"
-  }, /*#__PURE__*/_react["default"].createElement("h4", null, "Available Actions:"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "actions-list"
+    style: cardStyles.availableActions
+  }, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: cardStyles.actionsTitle
+  }, "Available Actions:"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: cardStyles.actionsList
   }, tool.actions.map(function (action) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: action.id,
-      className: "action-item"
+      style: cardStyles.actionItem
     }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "action-name"
+      style: cardStyles.actionName
     }, action.name), /*#__PURE__*/_react["default"].createElement("span", {
-      className: "action-description"
+      style: cardStyles.actionDescription
     }, action.description));
   }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "action-buttons"
+    style: cardStyles.actionButtons
   }, isConfigured && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
-    className: "toggle-btn ".concat(isEnabled ? 'enabled' : 'disabled'),
+    style: _objectSpread(_objectSpread({}, cardStyles.button), isEnabled ? cardStyles.toggleEnabled : cardStyles.toggleDisabled),
     onClick: handleToggle
   }, isEnabled ? 'Disable' : 'Enable'), /*#__PURE__*/_react["default"].createElement("button", {
-    className: "test-btn",
+    style: _objectSpread(_objectSpread({}, cardStyles.button), cardStyles.testButton),
     onClick: handleTest
   }, "Test Connection")), /*#__PURE__*/_react["default"].createElement("button", {
-    className: "configure-btn",
+    style: _objectSpread(_objectSpread({}, cardStyles.button), cardStyles.configureButton),
     onClick: function onClick() {
       return onSelect && onSelect(tool);
     }
   }, isConfigured ? 'Configure' : 'Add Tool'))), tool.tags && tool.tags.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-tags"
+    style: cardStyles.tags
   }, tool.tags.map(function (tag) {
     return /*#__PURE__*/_react["default"].createElement("span", {
       key: tag,
-      className: "tag"
+      style: cardStyles.tag
     }, tag);
   })));
 };

package/dist/tools/PowrToolList.js

@@ -19,6 +19,106 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+// Inline styles for the tool list component
+var listStyles = {
+  container: {
+    width: '100%'
+  },
+  filters: {
+    display: 'flex',
+    gap: '16px',
+    marginBottom: '24px',
+    flexWrap: 'wrap'
+  },
+  searchBox: {
+    flex: 1,
+    minWidth: '200px'
+  },
+  searchInput: {
+    width: '100%',
+    padding: '12px 16px',
+    border: '1px solid #d1d5db',
+    borderRadius: '8px',
+    fontSize: '14px',
+    background: '#ffffff',
+    color: '#374151',
+    transition: 'border-color 0.2s ease, box-shadow 0.2s ease'
+  },
+  filterControls: {
+    display: 'flex',
+    gap: '12px'
+  },
+  select: {
+    padding: '12px 16px',
+    border: '1px solid #d1d5db',
+    borderRadius: '8px',
+    fontSize: '14px',
+    background: '#ffffff',
+    color: '#374151',
+    cursor: 'pointer',
+    transition: 'border-color 0.2s ease'
+  },
+  resultsInfo: {
+    marginBottom: '16px',
+    fontSize: '14px',
+    color: '#6b7280'
+  },
+  toolsGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))',
+    gap: '20px',
+    marginBottom: '24px'
+  },
+  noTools: {
+    gridColumn: '1 / -1',
+    textAlign: 'center',
+    padding: '48px 24px'
+  },
+  emptyState: {
+    maxWidth: '400px',
+    margin: '0 auto'
+  },
+  emptyIcon: {
+    fontSize: '48px',
+    marginBottom: '16px'
+  },
+  emptyTitle: {
+    fontSize: '18px',
+    fontWeight: '600',
+    margin: '0 0 8px 0',
+    color: '#374151'
+  },
+  emptyText: {
+    fontSize: '14px',
+    color: '#6b7280',
+    margin: '0 0 16px 0'
+  },
+  clearFiltersBtn: {
+    background: '#2563eb',
+    color: 'white',
+    border: 'none',
+    padding: '8px 16px',
+    borderRadius: '6px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    transition: 'background 0.2s ease'
+  },
+  loadMoreSection: {
+    textAlign: 'center',
+    marginTop: '24px'
+  },
+  loadMoreBtn: {
+    background: '#f3f4f6',
+    color: '#374151',
+    border: '1px solid #d1d5db',
+    padding: '12px 24px',
+    borderRadius: '8px',
+    fontSize: '14px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease'
+  }
+};
 var PowrToolList = function PowrToolList(_ref) {
   var tools = _ref.tools,
     userTools = _ref.userTools,
@@ -76,11 +176,11 @@ var PowrToolList = function PowrToolList(_ref) {
     }
   });
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "powr-tool-list"
+    style: listStyles.container
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tool-filters"
+    style: listStyles.filters
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "search-box"
+    style: listStyles.searchBox
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     placeholder: "Search tools...",
@@ -88,15 +188,15 @@ var PowrToolList = function PowrToolList(_ref) {
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     },
-    className: "search-input"
+    style: listStyles.searchInput
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "filter-controls"
+    style: listStyles.filterControls
   }, /*#__PURE__*/_react["default"].createElement("select", {
     value: selectedCategory,
     onChange: function onChange(e) {
       return setSelectedCategory(e.target.value);
     },
-    className: "category-filter"
+    style: listStyles.select
   }, categories.map(function (category) {
     return /*#__PURE__*/_react["default"].createElement("option", {
       key: category,
@@ -107,7 +207,7 @@ var PowrToolList = function PowrToolList(_ref) {
     onChange: function onChange(e) {
       return setSortBy(e.target.value);
     },
-    className: "sort-filter"
+    style: listStyles.select
   }, /*#__PURE__*/_react["default"].createElement("option", {
     value: "name"
   }, "Sort by Name"), /*#__PURE__*/_react["default"].createElement("option", {
@@ -115,9 +215,9 @@ var PowrToolList = function PowrToolList(_ref) {
   }, "Sort by Category"), /*#__PURE__*/_react["default"].createElement("option", {
     value: "popularity"
   }, "Sort by Popularity")))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "results-info"
+    style: listStyles.resultsInfo
   }, /*#__PURE__*/_react["default"].createElement("p", null, "Showing ", sortedTools.length, " of ", tools.length, " tools")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tools-grid"
+    style: listStyles.toolsGrid
   }, sortedTools.length > 0 ? sortedTools.map(function (tool) {
     var userTool = userTools.find(function (ut) {
       return ut.toolId === tool.id;
@@ -133,21 +233,25 @@ var PowrToolList = function PowrToolList(_ref) {
       showConfiguredOnly: showConfiguredOnly
     });
   }) : /*#__PURE__*/_react["default"].createElement("div", {
-    className: "no-tools"
+    style: listStyles.noTools
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "empty-state"
+    style: listStyles.emptyState
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "empty-icon"
-  }, "\uD83D\uDD0D"), /*#__PURE__*/_react["default"].createElement("h3", null, "No tools found"), /*#__PURE__*/_react["default"].createElement("p", null, searchTerm || selectedCategory !== 'all' ? 'Try adjusting your search or filters' : 'No tools available at the moment'), (searchTerm || selectedCategory !== 'all') && /*#__PURE__*/_react["default"].createElement("button", {
+    style: listStyles.emptyIcon
+  }, "\uD83D\uDD0D"), /*#__PURE__*/_react["default"].createElement("h3", {
+    style: listStyles.emptyTitle
+  }, "No tools found"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: listStyles.emptyText
+  }, searchTerm || selectedCategory !== 'all' ? 'Try adjusting your search or filters' : 'No tools available at the moment'), (searchTerm || selectedCategory !== 'all') && /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
       setSearchTerm('');
       setSelectedCategory('all');
     },
-    className: "clear-filters-btn"
+    style: listStyles.clearFiltersBtn
   }, "Clear Filters")))), sortedTools.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "load-more-section"
+    style: listStyles.loadMoreSection
   }, /*#__PURE__*/_react["default"].createElement("button", {
-    className: "load-more-btn"
+    style: listStyles.loadMoreBtn
   }, "Load More Tools")));
 };
 var _default = exports["default"] = PowrToolList;

package/dist/tools/tools.css

@@ -0,0 +1,680 @@
+/* PowrBaseTools Component Styles */
+.powr-base-tools {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  color: #374151;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+/* Dark theme */
+.powr-base-tools.theme-dark {
+  background: #1f2937;
+  color: #f9fafb;
+}
+
+/* Header */
+.tools-header {
+  padding: 24px 24px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.theme-dark .tools-header {
+  border-bottom-color: #374151;
+}
+
+.tools-header h2 {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 8px 0;
+  color: #111827;
+}
+
+.theme-dark .tools-header h2 {
+  color: #f9fafb;
+}
+
+.tools-header p {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0 0 24px 0;
+}
+
+.theme-dark .tools-header p {
+  color: #9ca3af;
+}
+
+/* Tabs */
+.tools-tabs {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.theme-dark .tools-tabs {
+  border-bottom-color: #374151;
+  background: #111827;
+}
+
+.tools-tabs .tab {
+  flex: 1;
+  padding: 16px 24px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-bottom: 2px solid transparent;
+}
+
+.theme-dark .tools-tabs .tab {
+  color: #9ca3af;
+}
+
+.tools-tabs .tab:hover {
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.theme-dark .tools-tabs .tab:hover {
+  color: #d1d5db;
+  background: #1f2937;
+}
+
+.tools-tabs .tab.active {
+  color: #2563eb;
+  border-bottom-color: #2563eb;
+  background: #ffffff;
+}
+
+.theme-dark .tools-tabs .tab.active {
+  background: #1f2937;
+}
+
+/* Content */
+.tools-content {
+  padding: 24px;
+}
+
+/* Loading State */
+.powr-tools-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  font-size: 16px;
+  color: #6b7280;
+}
+
+.theme-dark .powr-tools-loading {
+  color: #9ca3af;
+}
+
+.loading-spinner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.loading-spinner::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 2px solid #e5e7eb;
+  border-top: 2px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Error State */
+.powr-tools-error {
+  padding: 24px;
+  text-align: center;
+}
+
+.error-message {
+  color: #dc2626;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.theme-dark .error-message {
+  color: #f87171;
+}
+
+.powr-tools-error button {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.powr-tools-error button:hover {
+  background: #1d4ed8;
+}
+
+/* Tool List Styles */
+.powr-tool-list {
+  width: 100%;
+}
+
+/* Filters and Search */
+.tool-filters {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.search-box {
+  flex: 1;
+  min-width: 200px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  background: #ffffff;
+  color: #374151;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.theme-dark .search-input {
+  background: #374151;
+  border-color: #4b5563;
+  color: #f9fafb;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.theme-dark .search-input:focus {
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
+}
+
+.filter-controls {
+  display: flex;
+  gap: 12px;
+}
+
+.category-filter,
+.sort-filter {
+  padding: 12px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  background: #ffffff;
+  color: #374151;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.theme-dark .category-filter,
+.theme-dark .sort-filter {
+  background: #374151;
+  border-color: #4b5563;
+  color: #f9fafb;
+}
+
+.category-filter:focus,
+.sort-filter:focus {
+  outline: none;
+  border-color: #2563eb;
+}
+
+/* Results Info */
+.results-info {
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.theme-dark .results-info {
+  color: #9ca3af;
+}
+
+/* Tools Grid */
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+/* Tool Card */
+.powr-tool-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.theme-dark .powr-tool-card {
+  background: #374151;
+  border-color: #4b5563;
+}
+
+.powr-tool-card:hover {
+  border-color: #2563eb;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.theme-dark .powr-tool-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.powr-tool-card.enabled {
+  border-color: #10b981;
+}
+
+.powr-tool-card.configured {
+  border-left: 4px solid #2563eb;
+}
+
+/* Tool Header */
+.tool-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.tool-icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  background: #f3f4f6;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.theme-dark .tool-icon {
+  background: #4b5563;
+}
+
+.tool-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.tool-name {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 4px 0;
+  color: #111827;
+  line-height: 1.2;
+}
+
+.theme-dark .tool-name {
+  color: #f9fafb;
+}
+
+.tool-description {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0 0 8px 0;
+  line-height: 1.4;
+}
+
+.theme-dark .tool-description {
+  color: #9ca3af;
+}
+
+.tool-meta {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.category {
+  background: #dbeafe;
+  color: #1e40af;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.theme-dark .category {
+  background: #1e3a8a;
+  color: #93c5fd;
+}
+
+.version {
+  font-size: 12px;
+  color: #6b7280;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.theme-dark .version {
+  color: #9ca3af;
+}
+
+.tool-status {
+  flex-shrink: 0;
+}
+
+.status-badge {
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-badge.enabled {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.theme-dark .status-badge.enabled {
+  background: #14532d;
+  color: #86efac;
+}
+
+.status-badge.disabled {
+  background: #fef2f2;
+  color: #991b1b;
+}
+
+.theme-dark .status-badge.disabled {
+  background: #450a0a;
+  color: #fca5a5;
+}
+
+/* Tool Actions */
+.tool-actions {
+  margin-top: 16px;
+}
+
+.available-actions {
+  margin-bottom: 16px;
+}
+
+.available-actions h4 {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #374151;
+}
+
+.theme-dark .available-actions h4 {
+  color: #d1d5db;
+}
+
+.actions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.action-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f9fafb;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.theme-dark .action-item {
+  background: #4b5563;
+}
+
+.action-name {
+  font-weight: 500;
+  color: #374151;
+}
+
+.theme-dark .action-name {
+  color: #d1d5db;
+}
+
+.action-description {
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.theme-dark .action-description {
+  color: #9ca3af;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.toggle-btn,
+.test-btn,
+.configure-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 1;
+  min-width: 80px;
+}
+
+.toggle-btn.enabled {
+  background: #dc2626;
+  color: white;
+}
+
+.toggle-btn.enabled:hover {
+  background: #b91c1c;
+}
+
+.toggle-btn.disabled {
+  background: #10b981;
+  color: white;
+}
+
+.toggle-btn.disabled:hover {
+  background: #059669;
+}
+
+.test-btn {
+  background: #f59e0b;
+  color: white;
+}
+
+.test-btn:hover {
+  background: #d97706;
+}
+
+.configure-btn {
+  background: #2563eb;
+  color: white;
+}
+
+.configure-btn:hover {
+  background: #1d4ed8;
+}
+
+/* Tool Tags */
+.tool-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.tag {
+  background: #f3f4f6;
+  color: #374151;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.theme-dark .tag {
+  background: #4b5563;
+  color: #d1d5db;
+}
+
+/* Empty State */
+.no-tools {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 48px 24px;
+}
+
+.empty-state {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.empty-state h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #374151;
+}
+
+.theme-dark .empty-state h3 {
+  color: #f9fafb;
+}
+
+.empty-state p {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0 0 16px 0;
+}
+
+.theme-dark .empty-state p {
+  color: #9ca3af;
+}
+
+.clear-filters-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.clear-filters-btn:hover {
+  background: #1d4ed8;
+}
+
+/* Load More */
+.load-more-section {
+  text-align: center;
+  margin-top: 24px;
+}
+
+.load-more-btn {
+  background: #f3f4f6;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.theme-dark .load-more-btn {
+  background: #4b5563;
+  color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.load-more-btn:hover {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+}
+
+.theme-dark .load-more-btn:hover {
+  background: #6b7280;
+  border-color: #9ca3af;
+}
+
+/* Configured Tools Section */
+.configured-tools h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 16px 0;
+  color: #111827;
+}
+
+.theme-dark .configured-tools h3 {
+  color: #f9fafb;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .tools-tabs {
+    flex-direction: column;
+  }
+  
+  .tools-tabs .tab {
+    border-bottom: 1px solid #e5e7eb;
+    border-right: none;
+  }
+  
+  .theme-dark .tools-tabs .tab {
+    border-bottom-color: #374151;
+  }
+  
+  .tool-filters {
+    flex-direction: column;
+  }
+  
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .tools-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .tool-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "4.0.2",
+    "version": "4.0.4",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",