@eveshipfit/ui-ingame 1.1.0 → 1.3.0

package/dist/style.css

@@ -418,6 +418,29 @@
   position: absolute;
   transform: translate(-50%, -50%);
 }
+.ld11eq_button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  display: block;
+}
+
+.ld11eq_button[aria-disabled="true"] {
+  cursor: default;
+}
+
+.ld11eq_button:focus-visible {
+  outline: 1px solid var(--esf-text);
+}
+
+.ld11eq_button > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 .T6VD6G_slot {
   --colour: var(--esf-state-online);
   --reach: calc((var(--slot-centre) + var(--slot-size) / 2) * var(--wheel-unit));
@@ -584,28 +607,7 @@
   position: absolute;
 }
 
-.T6VD6G_button, .T6VD6G_module {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.T6VD6G_button {
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-.T6VD6G_button[aria-disabled="true"] {
-  cursor: default;
-}
-
-.T6VD6G_button:focus-visible {
-  outline: 1px solid var(--esf-text);
-}
-
-.T6VD6G_button > img, .T6VD6G_module > span {
+.T6VD6G_module, .T6VD6G_module > span {
   width: 100%;
   height: 100%;
   display: block;
@@ -771,6 +773,10 @@
   display: grid;
 }
 
+.QyA-_q_text {
+  text-box: trim-both cap alphabetic;
+}
+
 .QyA-_q_bar[data-damage="thermal"] {
   --colour: var(--esf-damage-thermal);
 }
@@ -824,6 +830,350 @@
   border-radius: 50%;
   position: absolute;
 }
+.R9jwpW_slot {
+  --service-unit: calc(1px * var(--esf-scale, 1));
+  height: calc(44 * var(--service-unit));
+  width: calc(44 * var(--service-unit));
+  position: relative;
+}
+
+.R9jwpW_slot:hover, .R9jwpW_slot:has(:focus-visible) {
+  z-index: 1;
+}
+
+.R9jwpW_body {
+  user-select: none;
+  position: absolute;
+  inset: 0;
+}
+
+.R9jwpW_body:before {
+  background: var(--texture) center / 100% 100%;
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.R9jwpW_icon, .R9jwpW_empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.R9jwpW_icon {
+  height: calc(36 * var(--service-unit));
+  width: calc(36 * var(--service-unit));
+}
+
+.R9jwpW_icon > span, .R9jwpW_empty > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.R9jwpW_empty {
+  height: calc(32 * var(--service-unit));
+  width: calc(32 * var(--service-unit));
+}
+
+.R9jwpW_press {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+}
+
+.R9jwpW_press:focus-visible {
+  outline: var(--service-unit) solid var(--esf-text);
+}
+
+.R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
+  opacity: .4;
+}
+
+.R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
+  opacity: .3;
+}
+
+.R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
+  opacity: .1;
+}
+
+.R9jwpW_slot[data-preview] .R9jwpW_icon {
+  filter: sepia() hue-rotate(190deg) saturate(200%);
+}
+
+.R9jwpW_actions {
+  opacity: 0;
+  padding: 0 0 var(--service-unit);
+  pointer-events: none;
+  border: none;
+  flex-direction: column-reverse;
+  margin: 0;
+  display: flex;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  translate: -50%;
+}
+
+.R9jwpW_slot:hover > .R9jwpW_actions, .R9jwpW_slot:has(:focus-visible) > .R9jwpW_actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.R9jwpW_action {
+  height: calc(15.5 * var(--service-unit));
+  width: calc(15.5 * var(--service-unit));
+}
+.gVdevq_panel {
+  background: var(--esf-menu-bg);
+  border: var(--window-unit) solid var(--esf-input-border);
+  box-sizing: border-box;
+  color: var(--esf-text);
+  gap: calc(10 * var(--window-unit));
+  margin: calc(4 * var(--window-unit)) 0;
+  padding: calc(12 * var(--window-unit)) calc(2 * var(--window-unit));
+  position-anchor: var(--bay-anchor);
+  position-area: bottom span-right;
+  position-try-fallbacks: flip-block;
+  width: calc(370 * var(--window-unit));
+  justify-items: center;
+  inset: auto;
+}
+
+.gVdevq_panel:popover-open {
+  display: grid;
+}
+
+.gVdevq_panel[data-empty] {
+  padding: calc(17 * var(--window-unit)) calc(20 * var(--window-unit));
+  width: auto;
+}
+
+.gVdevq_list {
+  column-gap: calc(8 * var(--window-unit));
+  grid-template-columns: minmax(calc(62 * var(--window-unit)), max-content) auto 1fr auto;
+  max-height: calc(8 * 32 * var(--window-unit));
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  overflow-y: auto;
+}
+
+.gVdevq_row {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  height: calc(32 * var(--window-unit));
+  padding: 0 calc(8 * var(--window-unit));
+  align-items: center;
+  display: grid;
+}
+
+.gVdevq_row:hover {
+  background: var(--esf-bay-row-hover);
+}
+
+.gVdevq_quantity {
+  border: var(--window-unit) solid transparent;
+  align-items: center;
+  column-gap: calc(8 * var(--window-unit));
+  padding: calc(5 * var(--window-unit)) calc(6 * var(--window-unit));
+  grid-template-columns: auto auto;
+  justify-self: end;
+  justify-items: center;
+  display: grid;
+}
+
+.gVdevq_count {
+  appearance: textfield;
+  color: inherit;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.gVdevq_count::-webkit-inner-spin-button {
+  appearance: none;
+}
+
+.gVdevq_count:focus {
+  outline: none;
+}
+
+.gVdevq_times, .gVdevq_steps {
+  grid-area: 1 / 2;
+}
+
+.gVdevq_steps {
+  visibility: hidden;
+}
+
+.gVdevq_steps > button {
+  cursor: default;
+  opacity: .6;
+  background: none;
+  border: none;
+  padding: 0;
+  display: block;
+}
+
+.gVdevq_steps > button:hover {
+  opacity: 1;
+}
+
+.gVdevq_steps img {
+  height: calc(8 * var(--window-unit));
+  width: calc(8 * var(--window-unit));
+  display: block;
+}
+
+.gVdevq_quantity:hover, .gVdevq_quantity:focus-within {
+  border-color: var(--esf-spinner-edge);
+}
+
+.gVdevq_quantity:hover .gVdevq_times, .gVdevq_quantity:focus-within .gVdevq_times {
+  visibility: hidden;
+}
+
+.gVdevq_quantity:hover .gVdevq_steps, .gVdevq_quantity:focus-within .gVdevq_steps {
+  visibility: visible;
+}
+
+.gVdevq_quantity:focus-within {
+  background: var(--esf-spinner-focus);
+  border-color: var(--esf-spinner-focus-edge);
+}
+
+.gVdevq_icon {
+  height: calc(24 * var(--window-unit));
+  width: calc(24 * var(--window-unit));
+}
+
+.gVdevq_icon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.gVdevq_middle {
+  gap: calc(6 * var(--window-unit));
+  min-width: 0;
+  display: grid;
+}
+
+.gVdevq_name {
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.gVdevq_activeDrones {
+  padding-left: calc(8 * var(--window-unit));
+  justify-self: start;
+  font-weight: 600;
+}
+
+.gVdevq_panel[data-drones] .gVdevq_list {
+  grid-template-columns: minmax(calc(52 * var(--window-unit)), max-content) auto 1fr auto;
+  max-height: calc(5 * 64 * var(--window-unit));
+}
+
+.gVdevq_panel[data-drones] .gVdevq_row {
+  height: calc(64 * var(--window-unit));
+}
+
+.gVdevq_panel[data-drones] .gVdevq_icon {
+  height: calc(60 * var(--window-unit));
+  width: calc(60 * var(--window-unit));
+}
+
+.gVdevq_panel[data-drones] .gVdevq_name {
+  text-align: left;
+}
+
+.gVdevq_selection {
+  color: var(--esf-text-muted);
+  align-items: center;
+  gap: calc(3 * var(--window-unit));
+  display: flex;
+}
+
+.gVdevq_box {
+  background: var(--esf-drone-box);
+  border: var(--window-unit) solid var(--esf-button-edge);
+  color: var(--esf-text);
+  cursor: default;
+  font-size: calc(10 * var(--window-unit));
+  height: calc(13 * var(--window-unit));
+  width: calc(13 * var(--window-unit));
+  padding: 0;
+  line-height: 1;
+}
+
+.gVdevq_box:first-child {
+  margin-left: calc(2 * var(--window-unit));
+}
+
+.gVdevq_box[data-state="active"] {
+  background: var(--esf-button-active);
+}
+
+.gVdevq_box[data-state="open"] {
+  background: var(--esf-drone-box-open);
+}
+
+.gVdevq_box:enabled:hover {
+  border-color: var(--esf-button-active-edge);
+}
+
+.gVdevq_box[data-state="none"] {
+  background: var(--esf-drone-box-empty);
+  border-color: var(--esf-drone-box-empty);
+}
+
+.gVdevq_remove {
+  cursor: default;
+  opacity: .6;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.gVdevq_remove:hover, .gVdevq_remove:focus-visible {
+  opacity: 1;
+}
+
+.gVdevq_remove > img {
+  height: calc(16 * var(--window-unit));
+  width: calc(16 * var(--window-unit));
+  display: block;
+}
+
+.gVdevq_removeAll {
+  background: var(--esf-button);
+  border: var(--window-unit) solid var(--esf-button-edge);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  height: calc(31 * var(--window-unit));
+  padding: 0 calc(14 * var(--window-unit));
+}
+
+.gVdevq_removeAll:hover, .gVdevq_removeAll:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+}
+
+.gVdevq_remove:focus-visible, .gVdevq_removeAll:focus-visible, .gVdevq_box:focus-visible {
+  outline: var(--window-unit) solid var(--esf-text);
+}
 .L9t91q_window {
   --window-unit: calc(1px * var(--esf-scale, 1));
   --browser-width: 0px;
@@ -831,9 +1181,9 @@
   color: var(--esf-text);
   font-family: var(--esf-font);
   font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
-  height: calc(630 * var(--window-unit));
+  height: calc(694 * var(--window-unit));
   user-select: none;
-  width: calc(700 * var(--window-unit) + var(--browser-width) + var(--statistics-width));
+  width: calc(708 * var(--window-unit) + var(--browser-width) + var(--statistics-width));
   transition: width .2s;
   position: relative;
 }
@@ -843,11 +1193,11 @@
 }
 
 .L9t91q_window[data-statistics] {
-  --statistics-width: calc(272 * var(--window-unit));
+  --statistics-width: calc(264 * var(--window-unit));
 }
 
 .L9t91q_frame {
-  inset: 0 auto 0 var(--browser-width);
+  inset: calc(29 * var(--window-unit)) auto 0 var(--browser-width);
   width: calc(700 * var(--window-unit));
   transition: left .2s;
   position: absolute;
@@ -864,7 +1214,7 @@
   top: 0;
 }
 
-.L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_resources {
+.L9t91q_name, .L9t91q_violations, .L9t91q_tools, .L9t91q_panels, .L9t91q_bays, .L9t91q_history, .L9t91q_services, .L9t91q_resources {
   position: absolute;
 }
 
@@ -914,12 +1264,15 @@
 }
 
 .L9t91q_violation {
-  --colour: var(--esf-violation-notice);
   height: calc(28 * var(--window-unit));
   width: calc(28 * var(--window-unit));
   position: relative;
 }
 
+.L9t91q_violation, .L9t91q_alert {
+  --colour: var(--esf-violation-notice);
+}
+
 .L9t91q_violation:before {
   background: var(--colour);
   content: "";
@@ -928,14 +1281,38 @@
   inset: 0;
 }
 
-.L9t91q_violation[data-kind="error"] {
+.L9t91q_violation[data-kind="error"], .L9t91q_alert[data-kind="error"] {
   --colour: var(--esf-violation-error);
 }
 
-.L9t91q_violation[data-kind="skill"] {
+.L9t91q_violation[data-kind="skill"], .L9t91q_alert[data-kind="skill"] {
   --colour: var(--esf-violation-skill);
 }
 
+.L9t91q_alert {
+  display: contents;
+}
+
+.L9t91q_alertTitle {
+  color: var(--colour);
+  text-transform: uppercase;
+}
+
+.L9t91q_alertLine {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.L9t91q_alertLine:before {
+  background: var(--colour);
+  content: "";
+  height: 1.4em;
+  mask: var(--texture) center / 100% 100%;
+  flex: none;
+  width: 1.4em;
+}
+
 .L9t91q_count {
   left: calc(100% - 2 * var(--window-unit));
   top: calc(-2 * var(--window-unit));
@@ -996,20 +1373,38 @@
 
 .L9t91q_bays {
   gap: calc(4 * var(--window-unit));
+  bottom: calc(17 * var(--window-unit));
   left: calc(19 * var(--window-unit));
-  top: calc(560 * var(--window-unit));
   display: grid;
 }
 
 .L9t91q_bay {
+  color: inherit;
   align-items: center;
   column-gap: calc(5 * var(--window-unit));
+  cursor: default;
+  font: inherit;
   line-height: calc(13 * var(--window-unit));
+  background: none;
+  border: none;
   grid-template-columns: repeat(4, auto);
   justify-content: start;
+  padding: 0;
   display: grid;
 }
 
+.L9t91q_bayAnchor {
+  anchor-name: var(--bay-anchor);
+}
+
+.L9t91q_bay > * {
+  pointer-events: none;
+}
+
+.L9t91q_bay:focus-visible {
+  outline: var(--window-unit) solid var(--esf-text);
+}
+
 .L9t91q_bay > img {
   height: calc(32 * var(--window-unit));
   width: calc(32 * var(--window-unit));
@@ -1034,16 +1429,23 @@
 }
 
 .L9t91q_history {
+  bottom: calc(17 * var(--window-unit));
   left: calc(199 * var(--window-unit));
-  top: calc(590 * var(--window-unit));
+}
+
+.L9t91q_services {
+  gap: calc(4 * var(--window-unit));
+  bottom: calc(38 * var(--window-unit));
+  left: calc(164 * var(--window-unit));
+  display: flex;
 }
 
 .L9t91q_resources {
   gap: calc(10 * var(--window-unit));
   line-height: calc(16 * var(--window-unit));
   right: calc(13 * var(--window-unit));
+  bottom: calc(17 * var(--window-unit));
   text-align: right;
-  top: calc(546 * var(--window-unit));
   display: grid;
 }
 
@@ -1069,8 +1471,8 @@
 }
 
 .L9t91q_browser, .L9t91q_statistics {
-  bottom: 0;
-  top: calc(35 * var(--window-unit));
+  bottom: calc(16 * var(--window-unit));
+  top: calc(64 * var(--window-unit));
   position: absolute;
   overflow: hidden;
 }
@@ -1243,6 +1645,13 @@
   overflow-y: auto;
 }
 
+.xFSZwa_empty {
+  color: var(--esf-text-muted);
+  font-size: calc(20 * var(--browser-unit));
+  margin: calc(24 * var(--browser-unit)) 0 0;
+  text-align: center;
+}
+
 .xFSZwa_hull {
   font-weight: 600;
 }
@@ -1402,6 +1811,29 @@
   width: calc(16 * var(--statistics-unit));
 }
 
+.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))
+    calc(4 * var(--fighters-unit));
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.lebA7G_manage {
+  background: var(--esf-button);
+  border: var(--fighters-unit) solid var(--esf-button-edge);
+  color: inherit;
+  cursor: default;
+  font: inherit;
+  height: calc(30 * var(--fighters-unit));
+  padding: 0 calc(16 * var(--fighters-unit));
+}
+
+.lebA7G_manage:focus-visible {
+  outline: var(--fighters-unit) solid var(--esf-text);
+}
+
 .lebA7G_defense {
   --defense-unit: calc(1px * var(--esf-scale, 1));
   align-items: center;

package/dist/theme.css

@@ -50,6 +50,13 @@
   --esf-tree-hover: #192024;
   --esf-flyable: #00cef6;
   --esf-not-flyable: #be181e;
+  --esf-bay-row-hover: #161f24;
+  --esf-drone-box: #193036;
+  --esf-drone-box-open: #2b4f59;
+  --esf-drone-box-empty: #0d1213;
+  --esf-spinner-edge: #161718;
+  --esf-spinner-focus: #1a2629;
+  --esf-spinner-focus-edge: #273437;
 
   /* EVE's UI scale; 1 is 100%. */
   --esf-scale: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eveshipfit/ui-ingame",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "EVE Online ship fitting UI that looks like the in-game one",
   "license": "MIT",
   "author": "EVEShipFit Team <info@eveship.fit>",
@@ -27,11 +27,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@eveshipfit/react-hooks": "1.2.0"
+    "@eveshipfit/react-hooks": "1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@eveshipfit/images": "^1.3542233.6",
+    "@eveshipfit/images": "^1.3552227.1",
     "@rolldown/plugin-babel": "^0.2.4",
     "@storybook/react-vite": "^10.6.0",
     "@tsdown/css": "^0.23.0",
@@ -43,11 +43,11 @@
     "storybook": "^10.6.0",
     "tsdown": "^0.23.0",
     "vite": "^8.3.0",
-    "@eveshipfit/sde-loader": "1.1.0",
-    "@eveshipfit/fitting": "1.1.0"
+    "@eveshipfit/fitting": "1.3.0",
+    "@eveshipfit/sde-loader": "1.3.0"
   },
   "peerDependencies": {
-    "@eveshipfit/images": "^1.3542233.6",
+    "@eveshipfit/images": "^1.3552227.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },