@rpg-engine/long-bow 0.8.190 → 0.8.192

package/dist/components/SkillProgressBar.d.ts

@@ -13,5 +13,6 @@ export interface ISkillProgressBarProps {
     atlasJSON: any;
     atlasIMG: any;
     buffAndDebuff?: number;
+    onClick?: () => void;
 }
 export declare const SkillProgressBar: React.FC<ISkillProgressBarProps>;

package/dist/components/SkillsContainer.d.ts

@@ -7,5 +7,6 @@ export interface ISkillContainerProps {
     atlasJSON: any;
     atlasIMG: any;
     scale?: number;
+    onSkillClick?: (skillKey: string) => void;
 }
 export declare const SkillsContainer: React.FC<ISkillContainerProps>;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/CheckButton';
+export * from './components/ConfirmModal';
 export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';

package/dist/long-bow.cjs.development.js

@@ -16,9 +16,9 @@ var reactErrorBoundary = require('react-error-boundary');
 var fa = require('react-icons/fa');
 var rx = require('react-icons/rx');
 var io = require('react-icons/io');
-var Draggable = _interopDefault(require('react-draggable'));
 var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
+var Draggable = _interopDefault(require('react-draggable'));
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
 var ai = require('react-icons/ai');
@@ -36035,6 +36035,105 @@ var CheckButton = function CheckButton(_ref) {
   }));
 };
 
+var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
+var ModalPortal = function ModalPortal(_ref) {
+  var children = _ref.children;
+  return ReactDOM__default.createPortal(React__default.createElement(Container$9, {
+    className: "rpgui-content"
+  }, children), modalRoot);
+};
+var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ModalPortal__Container",
+  componentId: "sc-dgmp04-0"
+})(["position:static !important;"]);
+
+// Global style to prevent body scrolling when modal is open
+var GlobalStyle = /*#__PURE__*/styled.createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
+var ConfirmModal = function ConfirmModal(_ref) {
+  var onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? 'Are you sure?' : _ref$message;
+  var handleConfirm = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onConfirm();
+  }, [onConfirm]);
+  var handleClose = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  // Fix type issues by separating event handlers for different event types
+  var stopPropagationClick = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var stopPropagationTouch = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var stopPropagationPointer = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  return React__default.createElement(ModalPortal, null, React__default.createElement(GlobalStyle, null), React__default.createElement(Overlay, {
+    onPointerDown: handleClose
+  }), React__default.createElement(ModalContainer, null, React__default.createElement(ModalContent, {
+    onClick: stopPropagationClick,
+    onTouchStart: stopPropagationTouch,
+    onTouchEnd: stopPropagationTouch,
+    onTouchMove: stopPropagationTouch,
+    onPointerDown: stopPropagationPointer
+  }, React__default.createElement(Header$1, null, React__default.createElement(Title, null, "Confirm"), React__default.createElement(CloseButton$3, {
+    onPointerDown: handleClose,
+    "aria-label": "Close"
+  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(MessageContainer, null, typeof message === 'string' ? React__default.createElement(Message$1, null, message) : message), React__default.createElement(ButtonsContainer$1, null, React__default.createElement(CancelButtonWrapper, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: handleClose
+  }, "No")), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: handleConfirm
+  }, "Yes")))));
+};
+var Overlay = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__Overlay",
+  componentId: "sc-11qkyu1-0"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:1000;animation:fadeIn 0.2s ease-out;cursor:pointer;touch-action:none;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
+var ModalContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ModalContainer",
+  componentId: "sc-11qkyu1-1"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);"]);
+var ModalContent = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ModalContent",
+  componentId: "sc-11qkyu1-2"
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}@media (max-width:768px){width:85%;}"]);
+var Header$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__Header",
+  componentId: "sc-11qkyu1-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+var Title = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "ConfirmModal__Title",
+  componentId: "sc-11qkyu1-4"
+})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
+var CloseButton$3 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "ConfirmModal__CloseButton",
+  componentId: "sc-11qkyu1-5"
+})(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
+var MessageContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__MessageContainer",
+  componentId: "sc-11qkyu1-6"
+})(["text-align:center;"]);
+var Message$1 = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "ConfirmModal__Message",
+  componentId: "sc-11qkyu1-7"
+})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.6rem;color:rgba(255,255,255,0.85);line-height:1.8;"]);
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ButtonsContainer",
+  componentId: "sc-11qkyu1-8"
+})(["display:flex;justify-content:center;gap:20px;margin-top:4px;@media (max-width:768px){gap:30px;}"]);
+var CancelButtonWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__CancelButtonWrapper",
+  componentId: "sc-11qkyu1-9"
+})(["filter:grayscale(0.7);"]);
+
 var CheckItem = function CheckItem(_ref) {
   var label = _ref.label,
     _ref$defaultValue = _ref.defaultValue,
@@ -36215,7 +36314,7 @@ var CircularController = function CircularController(_ref) {
       return word[0];
     })));
   };
-  return React__default.createElement(ButtonsContainer$1, null, React__default.createElement(ShortcutsContainer, null, Array.from({
+  return React__default.createElement(ButtonsContainer$2, null, React__default.createElement(ShortcutsContainer, null, Array.from({
     length: 12
   }).map(function (_, i) {
     return renderShortcut(i);
@@ -36237,7 +36336,7 @@ var CancelButton = /*#__PURE__*/styled__default(Button$1).withConfig({
   displayName: "CircularController__CancelButton",
   componentId: "sc-1fewf3h-1"
 })(["width:3rem;height:3rem;font-size:0.8rem;position:relative;left:2.6rem;span{margin-top:4px;margin-left:2px;pointer-events:none;}"]);
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CircularController__ButtonsContainer",
   componentId: "sc-1fewf3h-2"
 })(["display:flex;align-items:center;justify-content:center;gap:0.5rem;scale:0.9;"]);
@@ -36392,7 +36491,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     },
     defaultPosition: initialPosition,
     scale: scale
-  }, React__default.createElement(Container$9, {
+  }, React__default.createElement(Container$a, {
     ref: draggableRef,
     width: width,
     height: height || 'auto',
@@ -36403,15 +36502,15 @@ var DraggableContainer = function DraggableContainer(_ref) {
     opacity: opacity
   }, title && React__default.createElement(TitleContainer, {
     className: "drag-handler"
-  }, React__default.createElement(Title, null, imgSrc && React__default.createElement(Icon, {
+  }, React__default.createElement(Title$1, null, imgSrc && React__default.createElement(Icon, {
     src: imgSrc,
     width: imgWidth
-  }), title)), onCloseButton && React__default.createElement(CloseButton$3, {
+  }), title)), onCloseButton && React__default.createElement(CloseButton$4, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"), children));
 };
-var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
 })(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
@@ -36432,7 +36531,7 @@ var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
   var isFullScreen = _ref6.isFullScreen;
   return isFullScreen && styled.css(["justify-content:center;align-items:flex-start;align-content:flex-start;"]);
 });
-var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
   componentId: "sc-184mpyl-1"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
@@ -36440,7 +36539,7 @@ var TitleContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__TitleContainer",
   componentId: "sc-184mpyl-2"
 })(["width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;max-height:42px;"]);
-var Title = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$1 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "DraggableContainer__Title",
   componentId: "sc-184mpyl-3"
 })(["color:white;z-index:22;font-size:", ";"], uiFonts.size.large);
@@ -36488,7 +36587,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React__default.createElement(Container$a, {
+  return React__default.createElement(Container$b, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -36516,7 +36615,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$a = /*#__PURE__*/styled__default.div.withConfig({
+var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -36537,18 +36636,6 @@ var DropdownOptions$1 = /*#__PURE__*/styled__default.ul.withConfig({
   return props.opensUp ? 'auto' : '100%';
 });
 
-var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
-var ModalPortal = function ModalPortal(_ref) {
-  var children = _ref.children;
-  return ReactDOM__default.createPortal(React__default.createElement(Container$b, {
-    className: "rpgui-content"
-  }, children), modalRoot);
-};
-var Container$b = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ModalPortal__Container",
-  componentId: "sc-dgmp04-0"
-})(["position:static !important;"]);
-
 function useTouchTarget() {
   var getTouchTarget = React.useCallback(function (e) {
     // Check if it's a touch event
@@ -37449,7 +37536,7 @@ var ItemInfo = function ItemInfo(_ref) {
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
   return React__default.createElement(Container$d, {
     item: item
-  }, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
+  }, React__default.createElement(Header$2, null, React__default.createElement("div", null, React__default.createElement(Title$2, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
   }, item.rarity), React__default.createElement(Type, null, item.subType)), React__default.createElement(AllowedSlots, null, renderAvaibleSlots())), item.minRequirements && React__default.createElement(LevelRequirement, null, React__default.createElement("div", {
     className: "title"
@@ -37472,7 +37559,7 @@ var Container$d = /*#__PURE__*/styled__default.div.withConfig({
   var item = _ref3.item;
   return "0 0 5px 2px " + rarityColor(item);
 });
-var Title$1 = /*#__PURE__*/styled__default.div.withConfig({
+var Title$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Title",
   componentId: "sc-1xm4q8k-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -37502,7 +37589,7 @@ var Description = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Description",
   componentId: "sc-1xm4q8k-6"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$1 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Header",
   componentId: "sc-1xm4q8k-7"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -38091,7 +38178,7 @@ var CraftBook = function CraftBook(_ref) {
     cancelDrag: ".inputRadioCraftBook",
     onCloseButton: onClose,
     scale: scale
-  }, React__default.createElement(Wrapper, null, React__default.createElement(HeaderContainer, null, React__default.createElement(Title$2, null, "Craftbook"), React__default.createElement(HeaderControls, null, React__default.createElement(DropdownWrapper, null, React__default.createElement(Dropdown, {
+  }, React__default.createElement(Wrapper, null, React__default.createElement(HeaderContainer, null, React__default.createElement(Title$3, null, "Craftbook"), React__default.createElement(HeaderControls, null, React__default.createElement(DropdownWrapper, null, React__default.createElement(Dropdown, {
     options: categoryOptions,
     onChange: function onChange(value) {
       setSelectedType(value);
@@ -38185,7 +38272,7 @@ var HeaderContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CraftBook__HeaderContainer",
   componentId: "sc-19q95ue-1"
 })(["display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 16px 0;"]);
-var Title$2 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$3 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "CraftBook__Title",
   componentId: "sc-19q95ue-2"
 })(["font-size:1.2rem;color:", " !important;margin:0;text-shadow:2px 2px 2px rgba(0,0,0,0.5);"], uiColors.yellow);
@@ -39378,93 +39465,6 @@ var EmptyMessage = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-debjdj-14"
 })(["font-size:8px !important;color:", " !important;font-family:'Press Start 2P',cursive !important;text-align:center;padding:20px;"], uiColors.lightGray);
 
-// Global style to prevent body scrolling when modal is open
-var GlobalStyle = /*#__PURE__*/styled.createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
-var ConfirmModal = function ConfirmModal(_ref) {
-  var onConfirm = _ref.onConfirm,
-    onClose = _ref.onClose,
-    _ref$message = _ref.message,
-    message = _ref$message === void 0 ? 'Are you sure?' : _ref$message;
-  var handleConfirm = React.useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    onConfirm();
-  }, [onConfirm]);
-  var handleClose = React.useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    onClose();
-  }, [onClose]);
-  // Fix type issues by separating event handlers for different event types
-  var stopPropagationClick = React.useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  var stopPropagationTouch = React.useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  var stopPropagationPointer = React.useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(GlobalStyle, null), React__default.createElement(Overlay, {
-    onPointerDown: handleClose
-  }), React__default.createElement(ModalContainer, null, React__default.createElement(ModalContent, {
-    onClick: stopPropagationClick,
-    onTouchStart: stopPropagationTouch,
-    onTouchEnd: stopPropagationTouch,
-    onTouchMove: stopPropagationTouch,
-    onPointerDown: stopPropagationPointer
-  }, React__default.createElement(Header$2, null, React__default.createElement(Title$3, null, "Confirm"), React__default.createElement(CloseButton$4, {
-    onPointerDown: handleClose,
-    "aria-label": "Close"
-  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(MessageContainer, null, typeof message === 'string' ? React__default.createElement(Message$1, null, message) : message), React__default.createElement(ButtonsContainer$2, null, React__default.createElement(CancelButtonWrapper, null, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: handleClose
-  }, "No")), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: handleConfirm
-  }, "Yes")))));
-};
-var Overlay = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Overlay",
-  componentId: "sc-11qkyu1-0"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:1000;animation:fadeIn 0.2s ease-out;cursor:pointer;touch-action:none;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
-var ModalContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__ModalContainer",
-  componentId: "sc-11qkyu1-1"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);"]);
-var ModalContent = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__ModalContent",
-  componentId: "sc-11qkyu1-2"
-})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}@media (max-width:768px){width:85%;}"]);
-var Header$2 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Header",
-  componentId: "sc-11qkyu1-3"
-})(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$3 = /*#__PURE__*/styled__default.h3.withConfig({
-  displayName: "ConfirmModal__Title",
-  componentId: "sc-11qkyu1-4"
-})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$4 = /*#__PURE__*/styled__default.button.withConfig({
-  displayName: "ConfirmModal__CloseButton",
-  componentId: "sc-11qkyu1-5"
-})(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
-var MessageContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__MessageContainer",
-  componentId: "sc-11qkyu1-6"
-})(["text-align:center;"]);
-var Message$1 = /*#__PURE__*/styled__default.p.withConfig({
-  displayName: "ConfirmModal__Message",
-  componentId: "sc-11qkyu1-7"
-})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.6rem;color:rgba(255,255,255,0.85);line-height:1.8;"]);
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__ButtonsContainer",
-  componentId: "sc-11qkyu1-8"
-})(["display:flex;justify-content:center;gap:20px;margin-top:4px;@media (max-width:768px){gap:30px;}"]);
-var CancelButtonWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__CancelButtonWrapper",
-  componentId: "sc-11qkyu1-9"
-})(["filter:grayscale(0.7);"]);
-
 var CTAButton = function CTAButton(_ref) {
   var icon = _ref.icon,
     label = _ref.label,
@@ -49692,7 +49692,8 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     showSkillPoints = _ref$showSkillPoints === void 0 ? true : _ref$showSkillPoints,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    buffAndDebuff = _ref.buffAndDebuff;
+    buffAndDebuff = _ref.buffAndDebuff,
+    onClick = _ref.onClick;
   // Use CharacterClass.None as default if skillKey is provided but characterClass is not
   var effectiveClass = characterClass != null ? characterClass : shared.CharacterClass.None;
   // Calculate the effective level based on actual SP/XP (handles data inconsistencies)
@@ -49747,7 +49748,10 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     var result = level * (buffAndDebuff / 100);
     return result > 0 ? "+" + result.toFixed(2) : "" + result.toFixed(2);
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React__default.createElement(React__default.Fragment, null, buffAndDebuff > 0 ? React__default.createElement(BuffAndDebuffContainer, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameBuff, null, skillName), React__default.createElement(TitleNameBuff, null, "lv ", effectiveLevel, " (", skillsBuffsCalc(effectiveLevel, buffAndDebuff), ")")), React__default.createElement(TitleNameBuffContainer, null, React__default.createElement(TitleNameBuff, null, "(+", formatBuffAndDebuff(buffAndDebuff), "%)"))) : buffAndDebuff < 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameDebuff, null, skillName), React__default.createElement(TitleNameDebuff, null, "lv ", effectiveLevel, " (", skillsBuffsCalc(effectiveLevel, buffAndDebuff), ")")), React__default.createElement("div", null, React__default.createElement(TitleNameDebuff, null, "(", formatBuffAndDebuff(buffAndDebuff), "%)"))) : React__default.createElement(TitleName, null, skillName)), !buffAndDebuff && React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", effectiveLevel))), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer$7, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ClickableRow, {
+    onClick: onClick,
+    "$isClickable": !!onClick
+  }, React__default.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React__default.createElement(React__default.Fragment, null, buffAndDebuff > 0 ? React__default.createElement(BuffAndDebuffContainer, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameBuff, null, skillName), React__default.createElement(TitleNameBuff, null, "lv ", effectiveLevel, " (", skillsBuffsCalc(effectiveLevel, buffAndDebuff), ")")), React__default.createElement(TitleNameBuffContainer, null, React__default.createElement(TitleNameBuff, null, "(+", formatBuffAndDebuff(buffAndDebuff), "%)"))) : buffAndDebuff < 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameDebuff, null, skillName), React__default.createElement(TitleNameDebuff, null, "lv ", effectiveLevel, " (", skillsBuffsCalc(effectiveLevel, buffAndDebuff), ")")), React__default.createElement("div", null, React__default.createElement(TitleNameDebuff, null, "(", formatBuffAndDebuff(buffAndDebuff), "%)"))) : React__default.createElement(TitleName, null, skillName)), !buffAndDebuff && React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", effectiveLevel))), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer$7, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
@@ -49815,6 +49819,16 @@ var TitleNameContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillProgressBar__TitleNameContainer",
   componentId: "sc-5vuroc-13"
 })(["display:flex;justify-content:space-between;"]);
+var ClickableRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SkillProgressBar__ClickableRow",
+  componentId: "sc-5vuroc-14"
+})(["cursor:", ";border-radius:4px;transition:background-color 0.15s ease;", ""], function (_ref2) {
+  var $isClickable = _ref2.$isClickable;
+  return $isClickable ? 'pointer' : 'default';
+}, function (_ref3) {
+  var $isClickable = _ref3.$isClickable;
+  return $isClickable && "\n    &:hover {\n      background-color: rgba(255, 255, 255, 0.05);\n    }\n    &:active {\n      background-color: rgba(255, 255, 255, 0.1);\n    }\n  ";
+});
 
 var skillProps = {
   attributes: {
@@ -49881,7 +49895,8 @@ var SkillsContainer = function SkillsContainer(_ref) {
     characterClass = _ref.characterClass,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    onSkillClick = _ref.onSkillClick;
   var onRenderSkillCategory = function onRenderSkillCategory(category) {
     var skillCategory = skillProps[category];
     var skillCategoryColor = skillCategory.color;
@@ -49919,7 +49934,10 @@ var SkillsContainer = function SkillsContainer(_ref) {
           texturePath: value,
           atlasIMG: atlasIMG,
           atlasJSON: atlasJSON,
-          buffAndDebuff: skillDetails.buffAndDebuff
+          buffAndDebuff: skillDetails.buffAndDebuff,
+          onClick: onSkillClick ? function () {
+            return onSkillClick(key);
+          } : undefined
         }));
       },
       _ret;
@@ -49948,7 +49966,10 @@ var SkillsContainer = function SkillsContainer(_ref) {
     skillPointsToNextLevel: Math.round(shared.getXPForLevel(skill.level + 1)) || 0,
     texturePath: 'swords/broad-sword.png',
     atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON
+    atlasJSON: atlasJSON,
+    onClick: onSkillClick ? function () {
+      return onSkillClick('level');
+    } : undefined
   }), React__default.createElement("p", null, "Combat Skills"), React__default.createElement("hr", {
     className: "golden"
   })), onRenderSkillCategory('combat'), React__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "Crafting Skills"), React__default.createElement("hr", {
@@ -74065,6 +74086,7 @@ exports.ChatRevamp = ChatRevamp;
 exports.CheckButton = CheckButton;
 exports.CheckItem = CheckItem;
 exports.CircularController = CircularController;
+exports.ConfirmModal = ConfirmModal;
 exports.CountdownTimer = CountdownTimer;
 exports.CraftBook = CraftBook;
 exports.DCRateStrip = DCRateStrip;