@eveshipfit/ui-ingame 1.4.0 → 1.6.0

package/dist/style.css

@@ -562,11 +562,11 @@
   --colour: var(--esf-state-overload);
 }
 
-.T6VD6G_slot[data-state="offline"] > .T6VD6G_body {
+.T6VD6G_slot[data-state="offline"] .T6VD6G_body {
   opacity: .3;
 }
 
-.T6VD6G_slot[data-state="unavailable"] > .T6VD6G_body {
+.T6VD6G_slot[data-state="unavailable"] .T6VD6G_body {
   opacity: .1;
 }
 
@@ -600,6 +600,13 @@
   position: absolute;
 }
 
+.T6VD6G_anchor {
+  height: calc(var(--slot-size) * var(--wheel-unit));
+  margin: calc(var(--slot-size) / -2 * var(--wheel-unit));
+  width: calc(var(--slot-size) * var(--wheel-unit));
+  position: absolute;
+}
+
 .T6VD6G_action {
   height: calc(var(--action-size) * var(--wheel-unit));
   margin: calc(var(--action-size) / -2 * var(--wheel-unit));
@@ -657,6 +664,10 @@
 .pLDZ2W_gauge[data-over] {
   --colour: var(--esf-state-overload);
 }
+
+.pLDZ2W_gauge[data-loading] {
+  opacity: 0;
+}
 .zDAPCG_hull {
   opacity: .8;
   pointer-events: none;
@@ -668,6 +679,26 @@
   top: 3%;
   left: 3%;
 }
+._4DcEdq_link {
+  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;
+}
+
+._4DcEdq_text {
+  fill: #cdcdcd;
+  letter-spacing: .05em;
+  pointer-events: auto;
+  font-size: 11px;
+}
+
+._4DcEdq_text:hover {
+  fill: #fff;
+}
 .dnJ0cW_stat {
   --stat-unit: calc(1px * var(--esf-scale, 1));
   align-items: center;
@@ -825,6 +856,146 @@
 ._6LFjiq_cell[data-lit] {
   background: var(--lit);
 }
+._9_b9FW_modes {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+._9_b9FW_place {
+  height: calc(32 * var(--wheel-unit));
+  margin: calc(-16 * var(--wheel-unit));
+  pointer-events: auto;
+  width: calc(32 * var(--wheel-unit));
+  position: absolute;
+}
+
+._9_b9FW_mode {
+  cursor: pointer;
+  background: radial-gradient(circle closest-side, #1c1e20d9 90%, #0000);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+}
+
+._9_b9FW_mode > input {
+  appearance: none;
+  cursor: inherit;
+  border-radius: 50%;
+  outline: none;
+  margin: 0;
+  position: absolute;
+  inset: 0;
+}
+
+._9_b9FW_mode:has(:disabled) {
+  cursor: default;
+}
+
+._9_b9FW_mode:hover:not(:has(:disabled)) {
+  background: radial-gradient(circle closest-side, #ffffff1a 90%, #0000);
+}
+
+._9_b9FW_mode:has(:checked) {
+  background: radial-gradient(circle closest-side,
+    color-mix(in srgb, var(--esf-button-active-edge) 55%, transparent) 70%,
+    transparent);
+}
+
+._9_b9FW_mode:has(:checked) > img {
+  filter: drop-shadow(0 0 calc(2 * var(--wheel-unit)) var(--esf-button-active-edge));
+}
+
+._9_b9FW_mode:has(:focus-visible) {
+  outline: calc(1 * var(--wheel-unit)) solid var(--esf-text);
+}
+
+._9_b9FW_mode > img {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+}
+._f5iUa_tooltip {
+  gap: 8px;
+  display: grid;
+}
+
+._f5iUa_type, ._f5iUa_line, ._f5iUa_bonuses, ._f5iUa_bonus {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+._f5iUa_type {
+  font-weight: 600;
+}
+
+._f5iUa_block {
+  gap: 4px;
+  display: grid;
+}
+
+._f5iUa_bonuses {
+  gap: 12px;
+}
+
+._f5iUa_bonus {
+  gap: 4px;
+}
+
+._f5iUa_noIcon {
+  flex: none;
+  width: 24px;
+  height: 24px;
+}
+
+._f5iUa_iconless {
+  align-items: center;
+  min-height: 24px;
+  padding-left: 32px;
+  display: flex;
+}
+
+._f5iUa_values {
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  padding-left: 27px;
+  display: grid;
+}
+
+._f5iUa_line > ._f5iUa_values {
+  flex: 1;
+  padding-left: 0;
+}
+
+._f5iUa_values ._f5iUa_bonus {
+  gap: 0;
+}
+
+._f5iUa_status[data-tone="muted"] {
+  color: var(--esf-text-muted);
+}
+
+._f5iUa_status[data-tone="active"] {
+  color: var(--esf-state-active);
+}
+
+._f5iUa_status[data-tone="overload"] {
+  color: var(--esf-state-overload);
+}
+
+._f5iUa_info {
+  background: var(--esf-button-active-edge);
+  height: 16px;
+  mask: var(--texture) center / 100% 100%;
+  flex: none;
+  width: 16px;
+  margin: 4px;
+}
 .GK_wGG_centre {
   inset: calc(86 * var(--wheel-unit));
   border-radius: 50%;
@@ -1437,17 +1608,32 @@
   align-items: center;
   gap: calc(2 * var(--window-unit));
   left: calc(20 * var(--window-unit));
-  max-width: calc(200 * var(--window-unit));
+  max-width: calc(150 * var(--window-unit));
   top: calc(40 * var(--window-unit));
   white-space: nowrap;
   display: flex;
 }
 
 .L9t91q_fitName {
+  color: inherit;
+  cursor: text;
+  font: inherit;
   text-overflow: ellipsis;
+  background: none;
+  border: none;
+  padding: 0;
   overflow: hidden;
 }
 
+.L9t91q_fitNameInput {
+  background: var(--esf-input-bg);
+  border: var(--window-unit) solid var(--esf-input-border);
+  color: var(--esf-text);
+  font: inherit;
+  min-width: 0;
+  padding: 0 calc(2 * var(--window-unit));
+}
+
 .L9t91q_icon {
   cursor: default;
   background: none;
@@ -1966,6 +2152,124 @@
   top: 0;
   left: -1000px;
 }
+
+.xFSZwa_actions {
+  gap: calc(8 * var(--browser-unit));
+  margin-top: calc(8 * var(--browser-unit));
+  display: flex;
+}
+
+.xFSZwa_action {
+  background: var(--esf-button);
+  border: var(--browser-unit) solid var(--esf-button-edge);
+  color: var(--esf-text);
+  cursor: pointer;
+  font: inherit;
+  height: calc(32 * var(--browser-unit));
+  min-width: calc(80 * var(--browser-unit));
+  padding: 0 calc(16 * var(--browser-unit));
+}
+
+.xFSZwa_action:hover:not(:disabled), .xFSZwa_action:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+}
+
+.xFSZwa_action:disabled {
+  color: var(--esf-text-muted);
+  cursor: default;
+}
+
+.xFSZwa_copyAnchor {
+  anchor-name: --fit-copy;
+  display: flex;
+}
+
+.xFSZwa_copy {
+  min-width: 0;
+  width: calc(32 * var(--browser-unit));
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.xFSZwa_copy > img {
+  height: calc(16 * var(--browser-unit));
+  width: calc(16 * var(--browser-unit));
+}
+
+.xFSZwa_menu {
+  background: var(--esf-menu-bg);
+  border: var(--browser-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));
+  margin: calc(4 * var(--browser-unit)) 0;
+  padding: calc(6 * var(--browser-unit)) 0;
+  position-anchor: --fit-copy;
+  position-area: top span-right;
+  position-try-fallbacks: flip-block;
+  inset: auto;
+}
+
+.xFSZwa_menu > button {
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: calc(5 * var(--browser-unit)) calc(16 * var(--browser-unit));
+  text-align: left;
+  background: none;
+  border: none;
+  width: 100%;
+  display: block;
+}
+
+.xFSZwa_menu > button:hover, .xFSZwa_menu > button:focus-visible {
+  background: var(--esf-menu-hover);
+  outline: none;
+}
+
+.xFSZwa_form {
+  flex-direction: column;
+  gap: 8px;
+  width: min(420px, 80vw);
+  display: flex;
+}
+
+.xFSZwa_form > label {
+  color: var(--esf-text-muted);
+}
+
+.xFSZwa_form > input, .xFSZwa_form > textarea {
+  background: var(--esf-input-bg);
+  border: 1px solid var(--esf-input-border);
+  color: var(--esf-text);
+}
+
+.xFSZwa_form > textarea {
+  resize: vertical;
+  font-family: ui-monospace, monospace;
+}
+
+.xFSZwa_importError {
+  color: var(--esf-bad);
+  margin: 0;
+}
+
+.xFSZwa_confirm {
+  max-width: min(360px, 80vw);
+}
+
+.xFSZwa_confirm > p {
+  margin: 0 0 12px;
+}
+
+.xFSZwa_dialogButtons {
+  justify-content: flex-end;
+  gap: 8px;
+  display: flex;
+}
 .lebA7G_statistics {
   --statistics-unit: calc(1px * var(--esf-scale, 1));
   color: var(--esf-text);
@@ -2000,6 +2304,10 @@
   color: var(--esf-bad);
 }
 
+.lebA7G_limit[data-over] {
+  color: var(--esf-violation-error);
+}
+
 .lebA7G_lines {
   display: grid;
 }

package/dist/theme.css

@@ -1,6 +1,6 @@
 /* Every colour and size the components use; override any of these to restyle. */
 :root {
-  --esf-font: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --esf-font: "Noto Sans Variable", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
   --esf-font-size: 13px;
 
   --esf-bg: #0b0d0f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eveshipfit/ui-ingame",
-  "version": "1.4.0",
+  "version": "1.6.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": "2.0.0"
+    "@eveshipfit/react-hooks": "2.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@eveshipfit/images": "^1.3552227.2",
+    "@eveshipfit/images": "^3.3561556.0",
     "@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/fitting": "2.0.0",
-    "@eveshipfit/sde-loader": "1.3.0"
+    "@eveshipfit/fitting": "2.2.0",
+    "@eveshipfit/sde-loader": "2.0.0"
   },
   "peerDependencies": {
-    "@eveshipfit/images": "^1.3552227.2",
+    "@eveshipfit/images": "^3.3561556.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },