@rpg-engine/long-bow 0.8.206 → 0.8.208

package/dist/long-bow.esm.js

@@ -13347,6 +13347,12 @@ var rarityColor$1 = function rarityColor(rarity) {
   var _RARITY_COLORS$toLowe;
   return (_RARITY_COLORS$toLowe = RARITY_COLORS$1[(rarity != null ? rarity : '').toLowerCase()]) != null ? _RARITY_COLORS$toLowe : RARITY_COLORS$1.common;
 };
+var rarityGlowColor = function rarityGlowColor(rarity) {
+  var _RARITY_COLORS$key;
+  var key = (rarity != null ? rarity : '').toLowerCase();
+  if (!key || key === 'common') return null;
+  return (_RARITY_COLORS$key = RARITY_COLORS$1[key]) != null ? _RARITY_COLORS$key : null;
+};
 var formatEquipmentSlot = function formatEquipmentSlot(slot) {
   if (!slot) return 'Unknown';
   return slot.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').replace(/\b\w/g, function (_char) {
@@ -13393,7 +13399,7 @@ var CharacterDetailModal = function CharacterDetailModal(_ref) {
     var a = _ref2[1];
     var b = _ref3[1];
     return b - a;
-  }).slice(0, 8);
+  });
   return React.createElement(ModalPortal, null, isConfirming && React.createElement(ConfirmModal, {
     onConfirm: handleConfirm,
     onClose: function onClose() {
@@ -13411,7 +13417,7 @@ var CharacterDetailModal = function CharacterDetailModal(_ref) {
     onPointerDown: handleClose,
     "aria-label": "Close",
     type: "button"
-  }, React.createElement(FaTimes, null))), React.createElement(HeroSection, null, React.createElement(SpriteContainer$5, null, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(FaTimes, null))), React.createElement(ScrollableBody, null, React.createElement(HeroSection, null, React.createElement(SpriteContainer$5, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: characterAtlasIMG,
     atlasJSON: characterAtlasJSON,
     spriteKey: snap.textureKey + "/down/standing/0.png",
@@ -13421,7 +13427,7 @@ var CharacterDetailModal = function CharacterDetailModal(_ref) {
     centered: true
   })), React.createElement(HeroInfo, null, React.createElement(CharacterName$1, null, snap.name || 'Unknown'), React.createElement(CharacterClass, null, "Lv.", snap.level, " \xB7 ", snap["class"]), React.createElement(CharacterOrigin, null, snap.race, " \xB7 ", snap.faction), React.createElement(ModeBadge, {
     "$hardcore": ((_snap$mode = snap.mode) == null ? void 0 : _snap$mode.toLowerCase()) === 'hardcore'
-  }, snap.mode || 'Standard'))), React.createElement(Divider, null), React.createElement(MetaColumns, null, topSkills.length > 0 && React.createElement(Section$3, null, React.createElement(SectionTitle$3, null, "Skills"), React.createElement(SkillsList, null, topSkills.map(function (_ref4) {
+  }, snap.mode || 'Standard'), snap.gold != null && snap.gold > 0 && React.createElement(GoldRow, null, React.createElement(GoldLabel, null, "GOLD"), React.createElement(GoldAmount$1, null, snap.gold.toLocaleString())))), React.createElement(Divider, null), React.createElement(MetaColumns, null, topSkills.length > 0 && React.createElement(Section$3, null, React.createElement(SectionTitle$3, null, "Skills"), React.createElement(SkillsList, null, topSkills.map(function (_ref4) {
     var name = _ref4[0],
       value = _ref4[1];
     return React.createElement(SkillRow, {
@@ -13430,7 +13436,9 @@ var CharacterDetailModal = function CharacterDetailModal(_ref) {
   }))), ((_snap$equipment = snap.equipment) == null ? void 0 : _snap$equipment.length) > 0 && React.createElement(Section$3, null, React.createElement(SectionTitle$3, null, "Equipment"), React.createElement(EquipmentList, null, snap.equipment.map(function (eq, i) {
     return React.createElement(EquipmentRow, {
       key: i
-    }, React.createElement(EquipmentSprite, null, React.createElement(SpriteFromAtlas, {
+    }, React.createElement(EquipmentSprite, {
+      "$rarity": eq.rarity
+    }, React.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       spriteKey: eq.itemKey,
@@ -13438,10 +13446,16 @@ var CharacterDetailModal = function CharacterDetailModal(_ref) {
       width: 32,
       height: 32,
       centered: true
-    })), React.createElement(EquipMeta, null, React.createElement(EquipName, null, eq.itemName), React.createElement(EquipDetails, null, React.createElement(EquipSlot, null, formatEquipmentSlot(eq.slot)), React.createElement(RarityBadge, {
+    }), eq.attachedGems && eq.attachedGems.length > 0 && React.createElement(GemRow, null, eq.attachedGems.map(function (gem, gi) {
+      var _gemColors$gem$key;
+      return React.createElement(GemDot, {
+        key: gi,
+        "$color": (_gemColors$gem$key = gemColors[gem.key]) != null ? _gemColors$gem$key : '#fff'
+      });
+    }))), React.createElement(EquipMeta, null, React.createElement(EquipName, null, eq.itemName), React.createElement(EquipDetails, null, React.createElement(EquipSlot, null, formatEquipmentSlot(eq.slot)), React.createElement(RarityBadge, {
       "$rarity": eq.rarity
     }, eq.rarity || 'Common'))));
-  })))), React.createElement(Divider, null), React.createElement(Footer$1, null, React.createElement(SellerInfo, null, "Listed by ", listing.listedByCharacterName), React.createElement(FooterActions, null, React.createElement(PriceDisplay, null, React.createElement(DCCoinWrapper$2, null, React.createElement(SpriteFromAtlas, {
+  }))))), React.createElement(FooterDivider, null), React.createElement(Footer$1, null, React.createElement(SellerInfo, null, "Listed by ", listing.listedByCharacterName), React.createElement(FooterActions, null, React.createElement(PriceDisplay, null, React.createElement(DCCoinWrapper$2, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: "others/definya-coin.png",
@@ -13469,7 +13483,7 @@ var ModalContainer$5 = /*#__PURE__*/styled.div.withConfig({
 var ModalContent$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__ModalContent",
   componentId: "sc-1kdn1l6-2"
-})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:580px;max-width:96%;max-height:85dvh;display:flex;flex-direction:column;gap:14px;overflow-y:auto;overflow-x:hidden;pointer-events:auto;animation:", " 0.15s ease-out;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.3);border-radius:4px;}"], scaleIn$2);
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 16px;width:580px;max-width:96%;max-height:85dvh;display:flex;flex-direction:column;gap:14px;overflow:hidden;pointer-events:auto;animation:", " 0.15s ease-out;"], scaleIn$2);
 var Header$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__Header",
   componentId: "sc-1kdn1l6-3"
@@ -13520,103 +13534,141 @@ var Divider = /*#__PURE__*/styled.hr.withConfig({
   displayName: "CharacterDetailModal__Divider",
   componentId: "sc-1kdn1l6-13"
 })(["border:none;border-top:1px solid rgba(255,255,255,0.06);margin:0;flex-shrink:0;"]);
+var FooterDivider = /*#__PURE__*/styled(Divider).withConfig({
+  displayName: "CharacterDetailModal__FooterDivider",
+  componentId: "sc-1kdn1l6-14"
+})([""]);
+var ScrollableBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterDetailModal__ScrollableBody",
+  componentId: "sc-1kdn1l6-15"
+})(["flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:14px;min-height:0;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.3);border-radius:4px;}"]);
 var Section$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__Section",
-  componentId: "sc-1kdn1l6-14"
+  componentId: "sc-1kdn1l6-16"
 })(["display:flex;flex-direction:column;gap:8px;"]);
 var SectionTitle$3 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__SectionTitle",
-  componentId: "sc-1kdn1l6-15"
+  componentId: "sc-1kdn1l6-17"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.45rem !important;color:#f59e0b !important;text-transform:uppercase;letter-spacing:1px;"]);
 var MetaColumns = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__MetaColumns",
-  componentId: "sc-1kdn1l6-16"
+  componentId: "sc-1kdn1l6-18"
 })(["display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;@media (max-width:640px){grid-template-columns:1fr;}"]);
 var SkillsList = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__SkillsList",
-  componentId: "sc-1kdn1l6-17"
+  componentId: "sc-1kdn1l6-19"
 })(["display:flex;flex-direction:column;gap:4px;"]);
 var SkillRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__SkillRow",
-  componentId: "sc-1kdn1l6-18"
+  componentId: "sc-1kdn1l6-20"
 })(["display:flex;justify-content:space-between;align-items:center;gap:8px;"]);
 var SkillName = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__SkillName",
-  componentId: "sc-1kdn1l6-19"
+  componentId: "sc-1kdn1l6-21"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#9ca3af !important;text-transform:capitalize;"]);
 var SkillValue = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__SkillValue",
-  componentId: "sc-1kdn1l6-20"
+  componentId: "sc-1kdn1l6-22"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#fef08a !important;"]);
 var EquipmentList = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__EquipmentList",
-  componentId: "sc-1kdn1l6-21"
+  componentId: "sc-1kdn1l6-23"
 })(["display:flex;flex-direction:column;gap:5px;"]);
 var EquipmentRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__EquipmentRow",
-  componentId: "sc-1kdn1l6-22"
+  componentId: "sc-1kdn1l6-24"
 })(["display:flex;align-items:center;gap:8px;padding:5px 8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:4px;min-width:0;"]);
 var EquipmentSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__EquipmentSprite",
-  componentId: "sc-1kdn1l6-23"
-})(["display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;"]);
+  componentId: "sc-1kdn1l6-25"
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:3px;", ""], function (_ref7) {
+  var $rarity = _ref7.$rarity;
+  var color = rarityGlowColor($rarity);
+  return color ? "box-shadow: 0 0 4px 3px " + color + " inset, 0 0 6px 2px " + color + ";" : '';
+});
+var GemRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterDetailModal__GemRow",
+  componentId: "sc-1kdn1l6-26"
+})(["position:absolute;bottom:-1px;left:0;display:flex;gap:1px;pointer-events:none;"]);
+var GemDot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterDetailModal__GemDot",
+  componentId: "sc-1kdn1l6-27"
+})(["width:5px;height:5px;border-radius:1px;transform:rotate(45deg);background:radial-gradient( circle at 30% 30%,rgba(255,255,255,0.8),transparent 40% ),linear-gradient(45deg,", ",rgba(255,255,255,0.2));border:1px solid rgba(0,0,0,0.6);box-shadow:0 0 3px ", ";"], function (_ref8) {
+  var $color = _ref8.$color;
+  return $color;
+}, function (_ref9) {
+  var $color = _ref9.$color;
+  return $color;
+});
+var GoldRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterDetailModal__GoldRow",
+  componentId: "sc-1kdn1l6-28"
+})(["display:flex;align-items:center;gap:4px;margin-top:2px;"]);
+var GoldLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterDetailModal__GoldLabel",
+  componentId: "sc-1kdn1l6-29"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#6b7280 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var GoldAmount$1 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterDetailModal__GoldAmount",
+  componentId: "sc-1kdn1l6-30"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#fde68a !important;"]);
 var EquipMeta = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__EquipMeta",
-  componentId: "sc-1kdn1l6-24"
+  componentId: "sc-1kdn1l6-31"
 })(["display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;"]);
 var EquipDetails = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__EquipDetails",
-  componentId: "sc-1kdn1l6-25"
+  componentId: "sc-1kdn1l6-32"
 })(["display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;"]);
 var EquipSlot = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__EquipSlot",
-  componentId: "sc-1kdn1l6-26"
+  componentId: "sc-1kdn1l6-33"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.34rem !important;color:#6b7280 !important;text-transform:capitalize;min-width:0;"]);
 var EquipName = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__EquipName",
-  componentId: "sc-1kdn1l6-27"
+  componentId: "sc-1kdn1l6-34"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#d1d5db !important;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var RarityBadge = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__RarityBadge",
-  componentId: "sc-1kdn1l6-28"
-})(["font-family:'Press Start 2P',cursive !important;font-size:0.32rem !important;color:", " !important;border:1px solid ", "44;border-radius:2px;padding:1px 4px;text-transform:uppercase;flex-shrink:0;"], function (_ref7) {
-  var $rarity = _ref7.$rarity;
+  componentId: "sc-1kdn1l6-35"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.32rem !important;color:", " !important;border:1px solid ", "44;border-radius:2px;padding:1px 4px;text-transform:uppercase;flex-shrink:0;"], function (_ref10) {
+  var $rarity = _ref10.$rarity;
   return rarityColor$1($rarity);
-}, function (_ref8) {
-  var $rarity = _ref8.$rarity;
+}, function (_ref11) {
+  var $rarity = _ref11.$rarity;
   return rarityColor$1($rarity);
 });
 var Footer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__Footer",
-  componentId: "sc-1kdn1l6-29"
+  componentId: "sc-1kdn1l6-36"
 })(["display:flex;flex-direction:column;gap:8px;flex-shrink:0;"]);
 var SellerInfo = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__SellerInfo",
-  componentId: "sc-1kdn1l6-30"
+  componentId: "sc-1kdn1l6-37"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#6b7280 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var FooterActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__FooterActions",
-  componentId: "sc-1kdn1l6-31"
+  componentId: "sc-1kdn1l6-38"
 })(["display:flex;align-items:center;justify-content:space-between;gap:12px;@media (max-width:640px){flex-direction:column;align-items:stretch;}"]);
 var PriceDisplay = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterDetailModal__PriceDisplay",
-  componentId: "sc-1kdn1l6-32"
+  componentId: "sc-1kdn1l6-39"
 })(["display:flex;align-items:center;gap:6px;line-height:1;"]);
 var DCCoinWrapper$2 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__DCCoinWrapper",
-  componentId: "sc-1kdn1l6-33"
+  componentId: "sc-1kdn1l6-40"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;"]);
 var PriceAmount = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__PriceAmount",
-  componentId: "sc-1kdn1l6-34"
+  componentId: "sc-1kdn1l6-41"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.7rem !important;color:#fef08a !important;"]);
 var BuyBtn = /*#__PURE__*/styled(CTAButton).withConfig({
   displayName: "CharacterDetailModal__BuyBtn",
-  componentId: "sc-1kdn1l6-35"
+  componentId: "sc-1kdn1l6-42"
 })(["flex-shrink:0;padding:10px 18px;height:34px;span{font-size:0.6rem;}"]);
 var PendingNotice = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterDetailModal__PendingNotice",
-  componentId: "sc-1kdn1l6-36"
+  componentId: "sc-1kdn1l6-43"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#ef4444 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 
 var CharacterMarketplacePanel = function CharacterMarketplacePanel(_ref) {
@@ -13818,6 +13870,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     accountCharacters = _ref.accountCharacters,
+    activeCharacterId = _ref.activeCharacterId,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     characterAtlasJSON = _ref.characterAtlasJSON,
@@ -13841,7 +13894,10 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
   var eligibleCharacters = accountCharacters.filter(function (c) {
     return !c.isListedForSale && !c.tradedAt;
   });
-  var canList = !!selectedId && Number(price) > 0;
+  var isActiveCharacter = function isActiveCharacter(c) {
+    return !!activeCharacterId && c._id === activeCharacterId;
+  };
+  var canList = !!selectedId && Number(price) > 0 && selectedId !== activeCharacterId;
   var handleClose = function handleClose() {
     setSelectedId(null);
     setPrice('');
@@ -13883,23 +13939,27 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
     type: "button"
   }, React.createElement(FaTimes, null))), React.createElement(CharacterList$1, null, eligibleCharacters.length === 0 ? React.createElement(EmptyState$6, null, "No eligible characters to list.") : eligibleCharacters.map(function (character) {
     var isSelected = selectedId === character._id;
+    var isActive = isActiveCharacter(character);
     return React.createElement(CharacterRow, {
       key: character._id,
-      "$selected": isSelected,
+      "$selected": isSelected && !isActive,
+      "$disabled": isActive,
       onPointerDown: function onPointerDown() {
-        return setSelectedId(character._id);
+        return !isActive && setSelectedId(character._id);
       },
       role: "radio",
-      "aria-checked": isSelected,
-      tabIndex: 0,
+      "aria-checked": isSelected && !isActive,
+      "aria-disabled": isActive,
+      tabIndex: isActive ? -1 : 0,
       onKeyDown: function onKeyDown(e) {
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (!isActive && (e.key === 'Enter' || e.key === ' ')) {
           e.preventDefault();
           setSelectedId(character._id);
         }
       }
     }, React.createElement(RadioCircle$1, {
-      "$selected": isSelected
+      "$selected": isSelected && !isActive,
+      "$disabled": isActive
     }), React.createElement(SpriteWrapper$3, null, React.createElement(SpriteFromAtlas, {
       atlasIMG: characterAtlasIMG,
       atlasJSON: characterAtlasJSON,
@@ -13907,7 +13967,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
       imgScale: 2,
       height: 40,
       width: 40
-    })), React.createElement(CharacterInfo$1, null, React.createElement(CharacterName$3, null, character.name || 'Unknown'), React.createElement(CharacterMeta$1, null, "Level ", getLevel(character))));
+    })), React.createElement(CharacterInfo$1, null, React.createElement(CharacterName$3, null, character.name || 'Unknown'), React.createElement(CharacterMeta$1, null, "Level ", getLevel(character))), isActive && React.createElement(ActiveTag, null, "In-game"));
   })), React.createElement(PriceSection$1, null, React.createElement(PriceLabel, null, "Set Price (DC)"), React.createElement(PriceRow$1, null, React.createElement(Input, {
     onChange: function onChange(e) {
       return setPrice(e.target.value);
@@ -13969,76 +14029,94 @@ var CharacterList$1 = /*#__PURE__*/styled.div.withConfig({
 var CharacterRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__CharacterRow",
   componentId: "sc-1uxkx35-7"
-})(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";background:", ";}&:focus-visible{outline:2px solid rgba(245,158,11,0.6);outline-offset:2px;}"], function (_ref2) {
-  var $selected = _ref2.$selected;
-  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.08)';
+})(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:", ";opacity:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";background:", ";}&:focus-visible{outline:2px solid rgba(245,158,11,0.6);outline-offset:2px;}"], function (_ref2) {
+  var $selected = _ref2.$selected,
+    $disabled = _ref2.$disabled;
+  return $disabled ? 'rgba(255,255,255,0.04)' : $selected ? '#f59e0b' : 'rgba(255,255,255,0.08)';
 }, function (_ref3) {
-  var $selected = _ref3.$selected;
-  return $selected ? 'rgba(245,158,11,0.1)' : 'rgba(255,255,255,0.02)';
+  var $selected = _ref3.$selected,
+    $disabled = _ref3.$disabled;
+  return $disabled ? 'rgba(0,0,0,0.15)' : $selected ? 'rgba(245,158,11,0.1)' : 'rgba(255,255,255,0.02)';
 }, function (_ref4) {
-  var $selected = _ref4.$selected;
-  return $selected ? '#f59e0b' : 'rgba(245,158,11,0.4)';
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref5) {
-  var $selected = _ref5.$selected;
-  return $selected ? 'rgba(245,158,11,0.1)' : 'rgba(245,158,11,0.05)';
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 0.5 : 1;
+}, function (_ref6) {
+  var $selected = _ref6.$selected,
+    $disabled = _ref6.$disabled;
+  return $disabled ? 'rgba(255,255,255,0.04)' : $selected ? '#f59e0b' : 'rgba(245,158,11,0.4)';
+}, function (_ref7) {
+  var $selected = _ref7.$selected,
+    $disabled = _ref7.$disabled;
+  return $disabled ? 'rgba(0,0,0,0.15)' : $selected ? 'rgba(245,158,11,0.1)' : 'rgba(245,158,11,0.05)';
 });
 var RadioCircle$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__RadioCircle",
   componentId: "sc-1uxkx35-8"
-})(["width:14px;height:14px;border-radius:50%;border:2px solid ", ";flex-shrink:0;display:flex;align-items:center;justify-content:center;&::after{content:'';width:6px;height:6px;border-radius:50%;background:#f59e0b;opacity:", ";transition:opacity 0.15s;}"], function (_ref6) {
-  var $selected = _ref6.$selected;
-  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.4)';
-}, function (_ref7) {
-  var $selected = _ref7.$selected;
+})(["width:14px;height:14px;border-radius:50%;border:2px solid ", ";flex-shrink:0;display:flex;align-items:center;justify-content:center;&::after{content:'';width:6px;height:6px;border-radius:50%;background:", ";opacity:", ";transition:opacity 0.15s;}"], function (_ref8) {
+  var $selected = _ref8.$selected,
+    $disabled = _ref8.$disabled;
+  return $disabled ? 'rgba(255,255,255,0.15)' : $selected ? '#f59e0b' : 'rgba(255,255,255,0.4)';
+}, function (_ref9) {
+  var $disabled = _ref9.$disabled;
+  return $disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b';
+}, function (_ref10) {
+  var $selected = _ref10.$selected;
   return $selected ? 1 : 0;
 });
+var ActiveTag = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterListingModal__ActiveTag",
+  componentId: "sc-1uxkx35-9"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#666 !important;background:rgba(255,255,255,0.06);padding:3px 6px;border-radius:3px;white-space:nowrap;margin-left:auto;"]);
 var SpriteWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__SpriteWrapper",
-  componentId: "sc-1uxkx35-9"
+  componentId: "sc-1uxkx35-10"
 })(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;flex-shrink:0;width:40px;height:40px;"]);
 var CharacterInfo$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__CharacterInfo",
-  componentId: "sc-1uxkx35-10"
+  componentId: "sc-1uxkx35-11"
 })(["display:flex;flex-direction:column;gap:4px;flex:1;"]);
 var CharacterName$3 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__CharacterName",
-  componentId: "sc-1uxkx35-11"
+  componentId: "sc-1uxkx35-12"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#f3f4f6 !important;"]);
 var CharacterMeta$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__CharacterMeta",
-  componentId: "sc-1uxkx35-12"
+  componentId: "sc-1uxkx35-13"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var PricePreview = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__PricePreview",
-  componentId: "sc-1uxkx35-13"
+  componentId: "sc-1uxkx35-14"
 })(["display:flex;align-items:center;gap:6px;"]);
 var DCCoinWrapper$4 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__DCCoinWrapper",
-  componentId: "sc-1uxkx35-14"
+  componentId: "sc-1uxkx35-15"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
 var PricePreviewAmount = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__PricePreviewAmount",
-  componentId: "sc-1uxkx35-15"
+  componentId: "sc-1uxkx35-16"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#fef08a !important;"]);
 var PriceSection$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__PriceSection",
-  componentId: "sc-1uxkx35-16"
+  componentId: "sc-1uxkx35-17"
 })(["display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,0.06);padding-top:12px;"]);
 var PriceLabel = /*#__PURE__*/styled.p.withConfig({
   displayName: "CharacterListingModal__PriceLabel",
-  componentId: "sc-1uxkx35-17"
+  componentId: "sc-1uxkx35-18"
 })(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var PriceRow$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__PriceRow",
-  componentId: "sc-1uxkx35-18"
+  componentId: "sc-1uxkx35-19"
 })(["display:flex;gap:8px;align-items:center;.price-input{flex:1;height:12px;}"]);
 var ListBtn = /*#__PURE__*/styled(CTAButton).withConfig({
   displayName: "CharacterListingModal__ListBtn",
-  componentId: "sc-1uxkx35-19"
+  componentId: "sc-1uxkx35-20"
 })(["flex-shrink:0;padding:10px 16px;height:32px;span{font-size:0.6rem;}svg{font-size:1.1rem;}"]);
 var EmptyState$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__EmptyState",
-  componentId: "sc-1uxkx35-20"
+  componentId: "sc-1uxkx35-21"
 })(["display:flex;align-items:center;justify-content:center;padding:32px 16px;font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#666 !important;text-transform:uppercase;letter-spacing:1px;"]);
 
 var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
@@ -14050,6 +14128,7 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
     onCharacterDelist = _ref.onCharacterDelist,
     accountCharacters = _ref.accountCharacters,
     _onCharacterList = _ref.onCharacterList,
+    activeCharacterId = _ref.activeCharacterId,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     characterAtlasJSON = _ref.characterAtlasJSON,
@@ -14090,6 +14169,7 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
       return setIsListingModalOpen(false);
     },
     accountCharacters: accountCharacters,
+    activeCharacterId: activeCharacterId,
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     characterAtlasJSON: characterAtlasJSON,
@@ -14441,6 +14521,7 @@ var Marketplace = function Marketplace(props) {
     onCharacterDelist: onCharacterDelist != null ? onCharacterDelist : function () {},
     accountCharacters: accountCharacters != null ? accountCharacters : [],
     onCharacterList: onCharacterList != null ? onCharacterList : function () {},
+    activeCharacterId: props.characterId,
     atlasJSON: props.atlasJSON,
     atlasIMG: props.atlasIMG,
     characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,