@rpg-engine/long-bow 0.8.37 → 0.8.39

package/dist/long-bow.esm.js

@@ -31550,7 +31550,8 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
     onToggle = _ref.onToggle,
     sections = _ref.sections,
     onClearAll = _ref.onClearAll,
-    hasActiveFilters = _ref.hasActiveFilters;
+    hasActiveFilters = _ref.hasActiveFilters,
+    onClose = _ref.onClose;
   var renderFilterSection = function renderFilterSection(section) {
     switch (section.type) {
       case 'range':
@@ -31596,11 +31597,11 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
     setButtonPosition = _React$useState[1];
   var buttonRef = useRef(null);
   var panelRef = useRef(null);
+  var isMobile = isMobileOrTablet();
   useEffect(function () {
     if (isOpen && buttonRef.current) {
       var rect = buttonRef.current.getBoundingClientRect();
-      var isMobileView = window.innerWidth < 480;
-      if (isMobileView) {
+      if (isMobile) {
         // For mobile, position in center of screen
         setButtonPosition({
           top: window.innerHeight / 2,
@@ -31616,7 +31617,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
         });
       }
     }
-  }, [isOpen]);
+  }, [isOpen, isMobile]);
   // Handle click outside to close the panel
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -31631,6 +31632,12 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, onToggle]);
+  var handleClose = function handleClose() {
+    onToggle();
+    if (onClose) {
+      onClose();
+    }
+  };
   return React.createElement(Container$q, null, React.createElement(FilterButton, {
     onClick: onToggle,
     "$hasActiveFilters": hasActiveFilters,
@@ -31647,18 +31654,17 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       return rangeValue[0] !== undefined || rangeValue[1] !== undefined;
     }
     return section.value !== 'all';
-  }).length)), isOpen && React.createElement(Portal, null, React.createElement(FiltersPanel, {
+  }).length)), isOpen && React.createElement(Portal, null, isMobile && React.createElement(Overlay$1, null), React.createElement(FiltersPanel, {
     ref: panelRef,
     style: {
       position: 'fixed',
-      top: buttonPosition.isMobile ? '50vh' : buttonPosition.top + "px",
-      left: buttonPosition.isMobile ? '50vw' : buttonPosition.left + "px",
-      transform: buttonPosition.isMobile ? 'translate(-50%, -50%)' : 'translateX(-50%)',
+      top: isMobile ? '50vh' : buttonPosition.top + "px",
+      left: isMobile ? '50vw' : buttonPosition.left + "px",
       zIndex: 9999
     },
-    "$isMobile": buttonPosition.isMobile
+    "$isMobile": isMobile
   }, React.createElement(FilterHeader, null, React.createElement(FilterTitle, null, "Advanced Filters"), React.createElement(CloseButton$6, {
-    onClick: onToggle
+    onClick: handleClose
   }, "\xD7")), sections.map(renderFilterSection), hasActiveFilters && React.createElement(ClearFiltersButton, {
     onClick: onClearAll
   }, "Clear All Filters"))));
@@ -31690,40 +31696,52 @@ var FilterCount = /*#__PURE__*/styled.div.withConfig({
 var FiltersPanel = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__FiltersPanel",
   componentId: "sc-1xj6ldr-3"
-})(["background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:1rem;width:280px;max-width:calc(100vw - 20px);display:flex;flex-direction:column;gap:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.3);font-family:'Press Start 2P',cursive;@media (max-width:320px){width:250px;padding:0.75rem;gap:0.75rem;}&:before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#1a1a1a;border-left:1px solid #333;border-top:1px solid #333;display:", ";}"], function (props) {
+})(["background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:", ";width:", ";max-width:calc(100vw - 20px);display:flex;flex-direction:column;gap:", ";box-shadow:0 4px 12px rgba(0,0,0,0.3);font-family:'Press Start 2P',cursive;transform:", ";@media (max-width:320px){width:220px;padding:0.65rem;gap:0.65rem;}&:before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#1a1a1a;border-left:1px solid #333;border-top:1px solid #333;display:", ";}"], function (props) {
+  return props.$isMobile ? '0.75rem' : '1rem';
+}, function (props) {
+  return props.$isMobile ? '240px' : '280px';
+}, function (props) {
+  return props.$isMobile ? '0.75rem' : '1rem';
+}, function (props) {
+  return props.$isMobile ? 'translate(-50%, -50%) scale(0.9)' : 'translateX(-50%)';
+}, function (props) {
   return props.$isMobile ? 'none' : 'block';
 });
 var FilterHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__FilterHeader",
   componentId: "sc-1xj6ldr-4"
 })(["display:flex;align-items:center;justify-content:space-between;padding-bottom:0.75rem;margin-bottom:0.5rem;border-bottom:1px solid #333;"]);
+var Overlay$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AdvancedFilters__Overlay",
+  componentId: "sc-1xj6ldr-5"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:9998;animation:fadeIn 0.2s ease-out;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
 var FilterTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__FilterTitle",
-  componentId: "sc-1xj6ldr-5"
+  componentId: "sc-1xj6ldr-6"
 })(["font-weight:600;color:#ffd700;font-size:0.75rem;"]);
 var FilterSection = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__FilterSection",
-  componentId: "sc-1xj6ldr-6"
+  componentId: "sc-1xj6ldr-7"
 })(["display:flex;flex-direction:column;gap:0.5rem;"]);
 var Label$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__Label",
-  componentId: "sc-1xj6ldr-7"
+  componentId: "sc-1xj6ldr-8"
 })(["color:#999;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;"]);
 var RangeInputs = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__RangeInputs",
-  componentId: "sc-1xj6ldr-8"
+  componentId: "sc-1xj6ldr-9"
 })(["display:flex;align-items:center;gap:0.5rem;input{width:80px;background:#262626 !important;border:1px solid #444 !important;border-radius:4px !important;color:#ddd !important;font-size:0.65rem !important;padding:0.5rem !important;height:auto !important;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2) !important;&::placeholder{color:#666 !important;}&:focus{border-color:#f59e0b !important;outline:none !important;}}svg{color:#666;font-size:0.875rem;}"]);
 var ClearFiltersButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "AdvancedFilters__ClearFiltersButton",
-  componentId: "sc-1xj6ldr-9"
+  componentId: "sc-1xj6ldr-10"
 })(["width:100%;background:transparent;color:#666;border:none;padding:0.75rem 0;margin-top:0.5rem;cursor:pointer;font-size:0.65rem;transition:all 0.2s;border-top:1px solid #333;text-transform:uppercase;letter-spacing:0.05em;font-family:'Press Start 2P',cursive;&:hover{color:#ffd700;}"]);
 var CloseButton$6 = /*#__PURE__*/styled.button.withConfig({
   displayName: "AdvancedFilters__CloseButton",
-  componentId: "sc-1xj6ldr-10"
+  componentId: "sc-1xj6ldr-11"
 })(["background:transparent;border:none;color:#999;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;&:hover{color:#ffd700;}"]);
 var StyledDropdownWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__StyledDropdownWrapper",
-  componentId: "sc-1xj6ldr-11"
+  componentId: "sc-1xj6ldr-12"
 })([".rpgui-dropdown-imp{font-size:0.8rem;min-height:unset;padding-top:0.3rem;}"]);
 
 var ItemsAdvancedFilters = function ItemsAdvancedFilters(_ref) {
@@ -32692,7 +32710,8 @@ var InformationCenter = function InformationCenter(_ref) {
     loading = _ref$loading === void 0 ? false : _ref$loading,
     error = _ref.error,
     _ref$initialSearchQue = _ref.initialSearchQuery,
-    initialSearchQuery = _ref$initialSearchQue === void 0 ? '' : _ref$initialSearchQue;
+    initialSearchQuery = _ref$initialSearchQue === void 0 ? '' : _ref$initialSearchQue,
+    onClose = _ref.onClose;
   var _useState = useState('bestiary'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
@@ -32741,7 +32760,10 @@ var InformationCenter = function InformationCenter(_ref) {
     title: "Information Center",
     type: RPGUIContainerTypes.Framed,
     width: isMobile ? '95%' : '80%',
-    minWidth: "300px"
+    minWidth: "300px",
+    cancelDrag: ".PaginatedContent-content",
+    isFullScreen: isMobile,
+    onCloseButton: onClose
   }, React.createElement(Container$r, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
@@ -36131,7 +36153,7 @@ var Spell = function Spell(_ref) {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay$1, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+  }, disabled && React.createElement(Overlay$2, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -36177,7 +36199,7 @@ var Cost = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Cost",
   componentId: "sc-j96fa2-6"
 })(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
-var Overlay$1 = /*#__PURE__*/styled.p.withConfig({
+var Overlay$2 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Overlay",
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);