@eveshipfit/ui-ingame 1.9.0 → 1.11.0

package/dist/style.css

@@ -1,11 +1,12 @@
 .kwi1cG_dialog {
+  --dialog-unit: calc(1px * var(--esf-scale, 1));
   background: var(--esf-surface);
-  border: 1px solid var(--esf-border);
+  border: var(--dialog-unit) solid var(--esf-border);
   border-radius: var(--esf-radius);
   color: var(--esf-text);
   font-family: var(--esf-font);
-  font-size: var(--esf-font-size);
-  max-width: min(640px, 90vw);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  max-width: min(calc(640 * var(--dialog-unit)), 90vw);
   padding: 0;
 }
 
@@ -15,9 +16,9 @@
 
 .kwi1cG_header {
   background: var(--esf-surface-raised);
-  border-bottom: 1px solid var(--esf-border);
+  border-bottom: var(--dialog-unit) solid var(--esf-border);
+  padding: calc(6 * var(--dialog-unit)) calc(10 * var(--dialog-unit));
   align-items: center;
-  padding: 6px 10px;
   display: flex;
 }
 
@@ -42,7 +43,7 @@
 }
 
 .kwi1cG_content {
-  padding: 10px;
+  padding: calc(10 * var(--dialog-unit));
 }
 .cmKEiW_anchor {
   display: contents;
@@ -53,29 +54,35 @@
 }
 
 .cmKEiW_tooltip {
-  --notch-size: 10px;
-  --notch-reach: calc(var(--notch-size) * .71 + 1px);
+  --tooltip-unit: calc(1px * var(--esf-scale, 1));
+  --notch-size: calc(10 * var(--tooltip-unit));
+  --notch-reach: calc((var(--notch-size) + 2 * var(--tooltip-unit)) * .707 + var(--tooltip-unit));
   anchor-name: var(--tooltip-box);
   color: var(--esf-text);
   font-family: var(--esf-font);
-  font-size: var(--esf-font-size);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
   margin: var(--notch-reach) 0;
+  max-width: calc(320 * var(--tooltip-unit));
   opacity: .9;
   pointer-events: none;
   position-anchor: var(--tooltip-anchor);
   position-area: top;
   position-try-fallbacks: flip-block;
+  white-space: normal;
   background: none;
   border: none;
-  max-width: 320px;
   padding: 0;
   inset: auto;
   overflow: visible;
 }
 
+.cmKEiW_tooltip[data-wide] {
+  max-width: 90vw;
+}
+
 .cmKEiW_notch, .cmKEiW_label {
   background: var(--esf-bg);
-  border: 1px solid var(--esf-border);
+  border: var(--tooltip-unit) solid var(--esf-border);
 }
 
 .cmKEiW_notch, .cmKEiW_label:after {
@@ -97,7 +104,7 @@
 }
 
 .cmKEiW_label {
-  padding: 8px 14px;
+  padding: calc(8 * var(--tooltip-unit)) calc(14 * var(--tooltip-unit));
   display: block;
   position: relative;
 }
@@ -105,19 +112,19 @@
 .cmKEiW_label:after {
   background: var(--esf-bg);
   content: "";
-  height: 1px;
-  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
-  width: calc(var(--notch-size) * 1.41 - 2px);
+  height: var(--tooltip-unit);
+  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - var(--tooltip-unit));
+  width: calc(var(--notch-size) * 1.414);
   translate: -50%;
 }
 
 .cmKEiW_text {
-  gap: 8px;
+  gap: calc(8 * var(--tooltip-unit));
   display: grid;
 }
 
 .cmKEiW_text + .cmKEiW_text {
-  margin-top: 12px;
+  margin-top: calc(12 * var(--tooltip-unit));
 }
 
 .cmKEiW_title {
@@ -189,7 +196,7 @@
   padding-left: calc(21 * var(--tree-unit));
 }
 
-.ZoSRha_tree > li > .ZoSRha_head, .ZoSRha_tree > .ZoSRha_head {
+.ZoSRha_tree > li > .ZoSRha_head {
   background: var(--esf-tree-header);
 }
 
@@ -620,9 +627,11 @@
 }
 
 .T6VD6G_action {
-  height: calc(var(--action-size) * var(--wheel-unit));
-  margin: calc(var(--action-size) / -2 * var(--wheel-unit));
-  width: calc(var(--action-size) * var(--wheel-unit));
+  --size: round(down, calc(var(--action-size) * var(--wheel-unit)), 1px);
+  height: var(--size);
+  left: round(calc(var(--left) - var(--size) / 2), 1px);
+  top: round(calc(var(--top) - var(--size) / 2), 1px);
+  width: var(--size);
   position: absolute;
 }
 
@@ -637,7 +646,7 @@
   inset: 0;
 }
 
-._-v7zG_icon, ._-v7zG_dot {
+._-v7zG_dot {
   height: calc(16 * var(--wheel-unit));
   pointer-events: none;
   width: calc(16 * var(--wheel-unit));
@@ -645,11 +654,24 @@
   transform: translate(-50%, -50%);
 }
 
+._-v7zG_icon {
+  height: calc(16 * var(--wheel-unit));
+  margin: calc(-8 * var(--wheel-unit));
+  width: calc(16 * var(--wheel-unit));
+  position: absolute;
+}
+
 ._-v7zG_icon > img {
   width: 100%;
   height: 100%;
   display: block;
 }
+
+._-v7zG_title {
+  gap: calc(24px * var(--esf-scale, 1));
+  justify-content: space-between;
+  display: flex;
+}
 .pLDZ2W_gauge {
   --colour: var(--esf-cpu);
   background: var(--colour);
@@ -890,6 +912,54 @@
 ._6LFjiq_cell[data-lit] {
   background: var(--lit);
 }
+.BL_QfG_menu {
+  --menu-unit: calc(1px * var(--esf-scale, 1));
+  background: var(--esf-menu-bg);
+  border: var(--menu-unit) solid var(--esf-input-border);
+  color: var(--esf-text);
+  font-family: var(--esf-font);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  min-width: calc(160 * var(--menu-unit));
+  padding: calc(6 * var(--menu-unit)) 0;
+  outline: none;
+  margin: 0;
+  position: fixed;
+  inset: auto;
+}
+
+.BL_QfG_menu > button {
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  align-items: center;
+  gap: calc(6 * var(--menu-unit));
+  padding: calc(4 * var(--menu-unit)) calc(16 * var(--menu-unit)) calc(4 * var(--menu-unit)) calc(8 * var(--menu-unit));
+  text-align: left;
+  white-space: nowrap;
+  background: none;
+  border: none;
+  width: 100%;
+  display: flex;
+}
+
+.BL_QfG_menu > button:hover, .BL_QfG_menu > button:focus-visible {
+  background: var(--esf-menu-hover);
+  outline: none;
+}
+
+.BL_QfG_icon {
+  height: calc(16 * var(--menu-unit));
+  width: calc(16 * var(--menu-unit));
+  flex: none;
+  place-items: center;
+  display: grid;
+}
+
+.BL_QfG_separator {
+  border: none;
+  border-top: var(--menu-unit) solid var(--esf-border);
+  margin: calc(4 * var(--menu-unit)) 0;
+}
 .tsr2Sa_hint {
   height: var(--wheel-texture-size);
   left: calc(50% - var(--wheel-texture-size) / 2);
@@ -968,6 +1038,25 @@
   display: block;
   position: relative;
 }
+._1EVyAG_notice {
+  height: var(--wheel-texture-size);
+  left: calc(50% - var(--wheel-texture-size) / 2);
+  pointer-events: none;
+  top: calc(50% - var(--wheel-texture-size) / 2);
+  width: var(--wheel-texture-size);
+  position: absolute;
+  overflow: visible;
+}
+
+._1EVyAG_text {
+  fill: #d9d9d9;
+  font-family: var(--esf-font);
+  letter-spacing: .1em;
+  paint-order: stroke;
+  stroke: #0009;
+  stroke-width: 3px;
+  font-size: 13px;
+}
 .BVBbxW_track {
   fill: none;
   pointer-events: none;
@@ -1062,7 +1151,7 @@
 }
 
 .BVBbxW_slot:has(.BVBbxW_press:hover) .BVBbxW_frame, .BVBbxW_slot:has(.BVBbxW_press:focus-visible) .BVBbxW_frame {
-  stroke: var(--esf-text-muted);
+  fill: #1a2a2d;
 }
 
 .BVBbxW_number {
@@ -1091,21 +1180,28 @@
   opacity: 1;
 }
 
+.BVBbxW_slot > .BVBbxW_actions[inert] {
+  opacity: 0;
+}
+
 .BVBbxW_slot:hover :is(.BVBbxW_action, .BVBbxW_bridge), .BVBbxW_slot:has(:focus-visible) :is(.BVBbxW_action, .BVBbxW_bridge) {
   pointer-events: auto;
 }
 
 .BVBbxW_action {
+  box-shadow: 0 0 0 calc(2 * var(--wheel-unit)) #0d1213;
   height: calc(var(--action-size) * var(--wheel-unit));
   left: calc(50% + var(--x) * var(--wheel-unit));
   margin: calc(var(--action-size) / -2 * var(--wheel-unit));
   top: calc(50% + var(--y) * var(--wheel-unit));
   width: calc(var(--action-size) * var(--wheel-unit));
+  background: #0d1213;
+  border-radius: 50%;
   position: absolute;
 }
 
 .BVBbxW_bridge {
-  height: calc((var(--tray-start) + var(--tray-length) - var(--slot-size) / 2) * var(--wheel-unit));
+  height: calc((var(--actions-start) + var(--actions-length) - var(--slot-size) / 2) * var(--wheel-unit));
   left: calc(50% - var(--slot-size) / 2 * var(--wheel-unit));
   transform: rotate(var(--angle)) translateY(calc(var(--slot-size) / 2 * var(--wheel-unit)));
   transform-origin: 50% 0;
@@ -1113,28 +1209,15 @@
   position: absolute;
   top: 50%;
 }
-
-.BVBbxW_tray {
-  border-radius: calc(var(--tray-width) / 2 * var(--wheel-unit));
-  box-sizing: border-box;
-  height: calc(var(--tray-length) * var(--wheel-unit));
-  left: calc(50% - var(--tray-width) / 2 * var(--wheel-unit));
-  transform: rotate(var(--angle)) translateY(calc(var(--tray-start) * var(--wheel-unit)));
-  transform-origin: 50% 0;
-  width: calc(var(--tray-width) * var(--wheel-unit));
-  background: #0d1213f2;
-  border: 1px solid #3d5960;
-  position: absolute;
-  top: 50%;
-}
 ._f5iUa_tooltip {
-  gap: 8px;
+  --module-tooltip-unit: calc(1px * var(--esf-scale, 1));
+  gap: calc(8 * var(--module-tooltip-unit));
   display: grid;
 }
 
 ._f5iUa_type, ._f5iUa_line, ._f5iUa_bonuses, ._f5iUa_bonus {
   align-items: center;
-  gap: 8px;
+  gap: calc(8 * var(--module-tooltip-unit));
   display: flex;
 }
 
@@ -1143,35 +1226,41 @@
 }
 
 ._f5iUa_block {
-  gap: 4px;
+  gap: calc(4 * var(--module-tooltip-unit));
   display: grid;
 }
 
 ._f5iUa_bonuses {
-  gap: 12px;
+  gap: calc(12 * var(--module-tooltip-unit));
 }
 
 ._f5iUa_bonus {
-  gap: 4px;
+  gap: calc(4 * var(--module-tooltip-unit));
 }
 
-._f5iUa_noIcon {
+._f5iUa_icon, ._f5iUa_noIcon {
+  height: calc(24 * var(--module-tooltip-unit));
+  width: calc(24 * var(--module-tooltip-unit));
   flex: none;
-  width: 24px;
-  height: 24px;
+}
+
+._f5iUa_icon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 ._f5iUa_iconless {
+  min-height: calc(24 * var(--module-tooltip-unit));
+  padding-left: calc(32 * var(--module-tooltip-unit));
   align-items: center;
-  min-height: 24px;
-  padding-left: 32px;
   display: flex;
 }
 
 ._f5iUa_values {
+  padding-left: calc(27 * var(--module-tooltip-unit));
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
-  padding-left: 27px;
   display: grid;
 }
 
@@ -1198,11 +1287,11 @@
 
 ._f5iUa_info {
   background: var(--esf-button-active-edge);
-  height: 16px;
+  height: calc(16 * var(--module-tooltip-unit));
+  margin: calc(4 * var(--module-tooltip-unit));
   mask: var(--texture) center / 100% 100%;
+  width: calc(16 * var(--module-tooltip-unit));
   flex: none;
-  width: 16px;
-  margin: 4px;
 }
 .GK_wGG_centre {
   inset: calc(86 * var(--wheel-unit));
@@ -1266,15 +1355,15 @@
   outline: var(--service-unit) solid var(--esf-text);
 }
 
-.R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
+.R9jwpW_slot[data-state="empty"] .R9jwpW_body:before {
   opacity: .4;
 }
 
-.R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
+.R9jwpW_slot[data-state="offline"] .R9jwpW_body {
   opacity: .3;
 }
 
-.R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
+.R9jwpW_slot[data-state="unavailable"] .R9jwpW_body {
   opacity: .1;
 }
 
@@ -1562,6 +1651,52 @@
   height: calc(16 * var(--info-unit));
   width: calc(16 * var(--info-unit));
 }
+.qMyuGa_bonuses {
+  --unit: var(--tooltip-unit, 1px);
+  color: var(--esf-text-muted);
+  align-items: baseline;
+  column-gap: calc(8 * var(--unit));
+  max-height: min(calc(500 * var(--unit)), 60vh);
+  row-gap: calc(4 * var(--unit));
+  scrollbar-color: var(--esf-border) transparent;
+  scrollbar-width: thin;
+  grid-template-columns: auto 1fr;
+  line-height: 1.3;
+  display: grid;
+  overflow-y: auto;
+}
+
+.qMyuGa_name {
+  color: var(--esf-text);
+  grid-column: 1 / -1;
+}
+
+.qMyuGa_header {
+  color: var(--esf-bonus-header);
+  margin-top: calc(6 * var(--unit));
+  grid-column: 1 / -1;
+  font-weight: 600;
+}
+
+.qMyuGa_value {
+  color: var(--esf-bonus-value);
+  text-align: right;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.qMyuGa_bonuses [data-bold] {
+  color: var(--esf-text);
+  font-weight: 600;
+}
+
+.qMyuGa_bonuses [data-italic] {
+  font-style: italic;
+}
+
+.qMyuGa_bonuses [data-underline] {
+  text-decoration: underline;
+}
 .gVdevq_panel {
   background: var(--esf-menu-bg);
   border: var(--window-unit) solid var(--esf-input-border);
@@ -2176,7 +2311,7 @@
 
 .L9t91q_alertLine {
   align-items: center;
-  gap: 8px;
+  gap: calc(8 * var(--window-unit));
   display: flex;
 }
 
@@ -2360,8 +2495,12 @@
 
 .L9t91q_statistics {
   left: calc(700 * var(--window-unit) + var(--browser-width));
-  width: calc(280 * var(--window-unit));
   transition: left .2s;
+  right: 0;
+}
+
+.L9t91q_statistics > .L9t91q_slide {
+  width: calc(280 * var(--window-unit));
 }
 
 .L9t91q_slide {
@@ -2674,6 +2813,10 @@
   width: calc(16 * var(--browser-unit));
 }
 
+.xFSZwa_copy:disabled > img {
+  opacity: .4;
+}
+
 .xFSZwa_menu {
   background: var(--esf-menu-bg);
   border: var(--browser-unit) solid var(--esf-input-border);
@@ -2706,9 +2849,9 @@
 }
 
 .xFSZwa_form {
+  gap: calc(8 * var(--browser-unit));
+  width: min(calc(420 * var(--browser-unit)), 80vw);
   flex-direction: column;
-  gap: 8px;
-  width: min(420px, 80vw);
   display: flex;
 }
 
@@ -2718,8 +2861,9 @@
 
 .xFSZwa_form > input, .xFSZwa_form > textarea {
   background: var(--esf-input-bg);
-  border: 1px solid var(--esf-input-border);
+  border: var(--browser-unit) solid var(--esf-input-border);
   color: var(--esf-text);
+  font: inherit;
 }
 
 .xFSZwa_form > textarea {
@@ -2733,16 +2877,16 @@
 }
 
 .xFSZwa_confirm {
-  max-width: min(360px, 80vw);
+  max-width: min(calc(360 * var(--browser-unit)), 80vw);
 }
 
 .xFSZwa_confirm > p {
-  margin: 0 0 12px;
+  margin: 0 0 calc(12 * var(--browser-unit));
 }
 
 .xFSZwa_dialogButtons {
+  gap: calc(8 * var(--browser-unit));
   justify-content: flex-end;
-  gap: 8px;
   display: flex;
 }
 
@@ -2827,6 +2971,47 @@
   width: calc(16 * var(--statistics-unit));
 }
 
+.lebA7G_priceList {
+  --price-unit: calc(1px * var(--esf-scale, 1));
+  column-gap: calc(12 * var(--price-unit));
+  row-gap: calc(4 * var(--price-unit));
+  white-space: nowrap;
+  grid-template-columns: auto 1fr auto auto;
+  display: grid;
+}
+
+.lebA7G_priceTotal, .lebA7G_priceItem {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+  display: grid;
+}
+
+.lebA7G_priceTotal {
+  border-bottom: calc(1 * var(--price-unit)) solid var(--esf-border);
+  padding-bottom: calc(6 * var(--price-unit));
+  font-weight: 600;
+}
+
+.lebA7G_priceTotal > :first-child {
+  grid-column: 1 / -2;
+}
+
+.lebA7G_priceIcon {
+  height: calc(24 * var(--price-unit));
+  width: calc(24 * var(--price-unit));
+}
+
+.lebA7G_priceIcon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.lebA7G_priceTotal > :last-child, .lebA7G_priceItem > :nth-child(n+3) {
+  text-align: right;
+}
+
 .lebA7G_fighters {
   --fighters-unit: calc(1px * var(--esf-scale, 1));
   padding: calc(4 * var(--fighters-unit)) calc(10 * var(--fighters-unit)) calc(4 * var(--fighters-unit))
@@ -3069,9 +3254,9 @@
 }
 
 .lebA7G_profileForm {
+  gap: calc(8 * var(--damage-profile-unit));
+  width: min(calc(300 * var(--damage-profile-unit)), 80vw);
   flex-direction: column;
-  gap: 8px;
-  width: min(300px, 80vw);
   display: flex;
 }
 
@@ -3081,7 +3266,7 @@
 
 .lebA7G_profileForm input {
   background: var(--esf-input-bg);
-  border: 1px solid var(--esf-input-border);
+  border: var(--damage-profile-unit) solid var(--esf-input-border);
   color: var(--esf-text);
   font: inherit;
 }
@@ -3092,22 +3277,22 @@
 }
 
 .lebA7G_amounts {
-  --share-unit: 1px;
+  --share-unit: var(--damage-profile-unit);
+  gap: calc(4 * var(--damage-profile-unit)) calc(8 * var(--damage-profile-unit));
+  margin-top: calc(4 * var(--damage-profile-unit));
   grid-template-columns: repeat(4, 1fr);
-  gap: 4px 8px;
-  margin-top: 4px;
   display: grid;
 }
 
 .lebA7G_amount {
   align-items: center;
-  gap: 2px;
+  gap: calc(2 * var(--damage-profile-unit));
   display: flex;
 }
 
 .lebA7G_amount > img {
-  width: 22px;
-  height: 22px;
+  height: calc(22 * var(--damage-profile-unit));
+  width: calc(22 * var(--damage-profile-unit));
 }
 
 .lebA7G_amount > input {
@@ -3116,21 +3301,21 @@
 }
 
 .lebA7G_dialogButtons {
+  gap: calc(8 * var(--damage-profile-unit));
+  margin-top: calc(4 * var(--damage-profile-unit));
   justify-content: flex-end;
-  gap: 8px;
-  margin-top: 4px;
   display: flex;
 }
 
 .lebA7G_action {
   background: var(--esf-button);
-  border: 1px solid var(--esf-button-edge);
+  border: var(--damage-profile-unit) solid var(--esf-button-edge);
   color: var(--esf-text);
   cursor: pointer;
   font: inherit;
-  min-width: 80px;
-  height: 32px;
-  padding: 0 16px;
+  height: calc(32 * var(--damage-profile-unit));
+  min-width: calc(80 * var(--damage-profile-unit));
+  padding: 0 calc(16 * var(--damage-profile-unit));
 }
 
 .lebA7G_action:hover:not(:disabled), .lebA7G_action:focus-visible {

package/dist/theme.css

@@ -29,7 +29,9 @@
   --esf-history-current: #bfbfbf;
   --esf-button-active: #366370;
   --esf-button-active-edge: #57a6be;
-  --esf-stats-header: #161718;
+  --esf-stats-header: var(--esf-tree-header);
+  --esf-bonus-header: #5499c3;
+  --esf-bonus-value: #d0efff;
   --esf-good: #8cc068;
   --esf-bad: #fb444a;
   --esf-damage-em: #1e71a1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eveshipfit/ui-ingame",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "EVE Online ship fitting UI that looks like the in-game one",
   "license": "MIT",
   "author": "EVEShipFit Team <info@eveship.fit>",
@@ -27,24 +27,24 @@
     "access": "public"
   },
   "dependencies": {
-    "@eveshipfit/react-hooks": "2.3.1"
+    "@eveshipfit/fitting": "2.5.0",
+    "@eveshipfit/react-hooks": "2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@eveshipfit/images": "^3.3561556.0",
+    "@babel/core": "^8.0.9",
+    "@eveshipfit/images": "^3.3654997.0",
     "@rolldown/plugin-babel": "^0.2.4",
-    "@storybook/react-vite": "^10.6.0",
-    "@tsdown/css": "^0.23.0",
+    "@storybook/react-vite": "^10.6.5",
+    "@tsdown/css": "^0.23.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "babel-plugin-react-compiler": "^1.0.0",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "storybook": "^10.6.0",
-    "tsdown": "^0.23.0",
-    "vite": "^8.3.0",
-    "@eveshipfit/fitting": "2.4.0",
-    "@eveshipfit/sde-loader": "3.0.0"
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "^10.6.5",
+    "tsdown": "^0.23.3",
+    "vite": "^8.3.5",
+    "@eveshipfit/sde-loader": "4.0.0"
   },
   "peerDependencies": {
     "@eveshipfit/images": "^3.3561556.0",