@eveshipfit/ui-ingame 1.8.0 → 1.9.0

package/dist/index.d.mts

@@ -14,6 +14,7 @@ interface TreeListProps {
   label: string;
   children: ReactNode;
 }
+/** Arrow keys, Home and End walk the open rows. */
 export declare function TreeList({ label, children }: TreeListProps): import("react").JSX.Element;
 interface TreeGroupProps {
   label: ReactNode;

package/dist/index.mjs

@@ -365,6 +365,7 @@ var TreeList_module_default = {
 };
 //#endregion
 //#region src/primitives/TreeList/TreeList.tsx
+/** Arrow keys, Home and End walk the open rows. */
 function TreeList(t0) {
 	const $ = c(3);
 	const { label, children } = t0;
@@ -373,6 +374,7 @@ function TreeList(t0) {
 		t1 = /* @__PURE__ */ jsx("ul", {
 			className: TreeList_module_default.tree,
 			"aria-label": label,
+			onKeyDown: walk,
 			children
 		});
 		$[0] = children;
@@ -381,22 +383,89 @@ function TreeList(t0) {
 	} else t1 = $[2];
 	return t1;
 }
+function rows(scope) {
+	return [...scope.querySelectorAll(`.${TreeList_module_default.row}`)];
+}
+const walkKeys = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+function hasModifier(event) {
+	return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+function walk(event) {
+	if (event.defaultPrevented || hasModifier(event) || !walkKeys.has(event.key)) return;
+	const tree = event.currentTarget;
+	const all = rows(tree);
+	const row = event.target;
+	const index = all.indexOf(row);
+	if (index === -1) return;
+	let next;
+	switch (event.key) {
+		case "ArrowDown":
+			next = all[index + 1];
+			break;
+		case "ArrowUp":
+			next = all[index - 1];
+			break;
+		case "Home":
+			next = all[0];
+			break;
+		case "End":
+			next = all.at(-1);
+			break;
+		case "ArrowRight":
+			if (row.getAttribute("aria-expanded") === "true") next = all[index + 1];
+			break;
+		case "ArrowLeft": {
+			const parent = row.closest("li")?.parentElement?.closest("li");
+			if (parent && tree.contains(parent)) next = parent.querySelector(`.${TreeList_module_default.row}`) ?? void 0;
+			break;
+		}
+	}
+	if (next === void 0) return;
+	event.preventDefault();
+	next.focus();
+}
+/** Focuses the first row of the first `TreeList` in `scope`. */
+function focusTree(scope) {
+	const first = scope.querySelector(`.${TreeList_module_default.tree} .${TreeList_module_default.row}`);
+	first?.focus();
+	return first !== null;
+}
+function isTreeRow(element) {
+	return element.matches(`.${TreeList_module_default.tree} .${TreeList_module_default.row}`);
+}
 function TreeGroup(t0) {
-	const $ = c(34);
+	const $ = c(36);
 	const { label, typeId, icon, description, defaultOpen: t1, after, onDragStart, onDragEnd, children } = t0;
 	const [open, setOpen] = useState(t1 === void 0 ? false : t1);
 	const descriptionId = useId();
 	const t2 = description !== void 0 ? descriptionId : void 0;
 	const t3 = onDragStart !== void 0 || void 0;
 	let t4;
+	let t5;
 	if ($[0] !== open) {
 		t4 = () => setOpen(!open);
+		t5 = (event) => {
+			if (hasModifier(event) || event.key !== (open ? "ArrowLeft" : "ArrowRight")) return;
+			event.preventDefault();
+			setOpen(!open);
+		};
 		$[0] = open;
 		$[1] = t4;
-	} else t4 = $[1];
-	let t5;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx("svg", {
+		$[2] = t5;
+	} else {
+		t4 = $[1];
+		t5 = $[2];
+	}
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx("svg", {
 			className: TreeList_module_default.chevron,
 			viewBox: "0 0 12 12",
 			"aria-hidden": true,
@@ -405,113 +474,115 @@ function TreeGroup(t0) {
 				fill: "currentColor"
 			})
 		});
-		$[2] = t5;
-	} else t5 = $[2];
-	let t6;
-	if ($[3] !== typeId) {
-		t6 = typeId !== void 0 && /* @__PURE__ */ jsx(RowIcon, { typeId });
-		$[3] = typeId;
-		$[4] = t6;
-	} else t6 = $[4];
+		$[3] = t6;
+	} else t6 = $[3];
 	let t7;
-	if ($[5] !== icon) {
-		t7 = icon !== void 0 && /* @__PURE__ */ jsx("img", {
+	if ($[4] !== typeId) {
+		t7 = typeId !== void 0 && /* @__PURE__ */ jsx(RowIcon, { typeId });
+		$[4] = typeId;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] !== icon) {
+		t8 = icon !== void 0 && /* @__PURE__ */ jsx("img", {
 			className: TreeList_module_default.smallIcon,
 			src: icon,
 			alt: "",
 			draggable: false
 		});
-		$[5] = icon;
-		$[6] = t7;
-	} else t7 = $[6];
-	let t8;
-	if ($[7] !== label) {
-		t8 = /* @__PURE__ */ jsx("span", {
+		$[6] = icon;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== label) {
+		t9 = /* @__PURE__ */ jsx("span", {
 			className: TreeList_module_default.label,
 			children: label
 		});
-		$[7] = label;
-		$[8] = t8;
-	} else t8 = $[8];
-	let t9;
-	if ($[9] !== description || $[10] !== descriptionId) {
-		t9 = description !== void 0 && /* @__PURE__ */ jsx("span", {
+		$[8] = label;
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== description || $[11] !== descriptionId) {
+		t10 = description !== void 0 && /* @__PURE__ */ jsx("span", {
 			id: descriptionId,
 			className: TreeList_module_default.label,
 			"aria-hidden": true,
 			children: description
 		});
-		$[9] = description;
-		$[10] = descriptionId;
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] !== t8 || $[13] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("span", {
+		$[10] = description;
+		$[11] = descriptionId;
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] !== t10 || $[14] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("span", {
 			className: TreeList_module_default.text,
-			children: [t8, t9]
+			children: [t9, t10]
 		});
-		$[12] = t8;
-		$[13] = t9;
-		$[14] = t10;
-	} else t10 = $[14];
-	let t11;
-	if ($[15] !== onDragEnd || $[16] !== onDragStart || $[17] !== open || $[18] !== t10 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t6 || $[23] !== t7) {
-		t11 = /* @__PURE__ */ jsxs("button", {
+		$[13] = t10;
+		$[14] = t9;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== onDragEnd || $[17] !== onDragStart || $[18] !== open || $[19] !== t11 || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t7 || $[25] !== t8) {
+		t12 = /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: TreeList_module_default.row,
 			"aria-expanded": open,
 			"aria-describedby": t2,
 			draggable: t3,
 			onClick: t4,
+			onKeyDown: t5,
 			onDragStart,
 			onDragEnd,
 			children: [
-				t5,
 				t6,
 				t7,
-				t10
+				t8,
+				t11
 			]
 		});
-		$[15] = onDragEnd;
-		$[16] = onDragStart;
-		$[17] = open;
-		$[18] = t10;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t6;
-		$[23] = t7;
-		$[24] = t11;
-	} else t11 = $[24];
-	let t12;
-	if ($[25] !== after || $[26] !== t11) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+		$[16] = onDragEnd;
+		$[17] = onDragStart;
+		$[18] = open;
+		$[19] = t11;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== after || $[28] !== t12) {
+		t13 = /* @__PURE__ */ jsxs("div", {
 			className: TreeList_module_default.head,
-			children: [t11, after]
+			children: [t12, after]
 		});
-		$[25] = after;
-		$[26] = t11;
-		$[27] = t12;
-	} else t12 = $[27];
-	let t13;
-	if ($[28] !== children || $[29] !== open) {
-		t13 = open && /* @__PURE__ */ jsx("ul", {
+		$[27] = after;
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== children || $[31] !== open) {
+		t14 = open && /* @__PURE__ */ jsx("ul", {
 			className: TreeList_module_default.group,
 			children: children()
 		});
-		$[28] = children;
-		$[29] = open;
-		$[30] = t13;
-	} else t13 = $[30];
-	let t14;
-	if ($[31] !== t12 || $[32] !== t13) {
-		t14 = /* @__PURE__ */ jsxs("li", { children: [t12, t13] });
-		$[31] = t12;
-		$[32] = t13;
-		$[33] = t14;
-	} else t14 = $[33];
-	return t14;
+		$[30] = children;
+		$[31] = open;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== t13 || $[34] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("li", { children: [t13, t14] });
+		$[33] = t13;
+		$[34] = t14;
+		$[35] = t15;
+	} else t15 = $[35];
+	return t15;
 }
 /** Activates on double click, as EVE's own lists do, unless `activateOnClick` is set. */
 function TreeLeaf(t0) {
@@ -1270,7 +1341,7 @@ function SlotPress(t0) {
 			className,
 			"aria-label": label,
 			onClick: onPress,
-			onKeyDown: _temp$21
+			onKeyDown: _temp$22
 		});
 		$[0] = className;
 		$[1] = label;
@@ -1279,7 +1350,7 @@ function SlotPress(t0) {
 	} else t1 = $[3];
 	return t1;
 }
-function _temp$21(event) {
+function _temp$22(event) {
 	if (event.key !== "Enter" && event.key !== " ") return;
 	event.preventDefault();
 	event.currentTarget.dispatchEvent(new MouseEvent("click", {
@@ -1487,7 +1558,7 @@ function WheelSlot(t0) {
 				})
 			});
 		}
-		t8 = row.findLastIndex(_temp$20);
+		t8 = row.findLastIndex(_temp$21);
 		$[27] = chargeTypeId;
 		$[28] = fitted;
 		$[29] = onRemoveCharge;
@@ -1692,7 +1763,7 @@ function WheelSlot(t0) {
 	} else t27 = $[100];
 	return t27;
 }
-function _temp$20(action) {
+function _temp$21(action) {
 	return action !== void 0;
 }
 function frameTexture(fitted, preview, state, activatable) {
@@ -1873,7 +1944,7 @@ function useDecoded(src) {
 			image.decode().then(() => {
 				decoded.add(src);
 				setReady(src);
-			}, _temp$19);
+			}, _temp$20);
 		};
 		t1 = [src];
 		$[0] = src;
@@ -1893,7 +1964,7 @@ function useDecoded(src) {
 	} else t2 = $[5];
 	return t2;
 }
-function _temp$19() {}
+function _temp$20() {}
 function WheelGauge(t0) {
 	const $ = c(15);
 	const { resource, used, total, valueText } = t0;
@@ -2527,7 +2598,8 @@ var WheelAugmentation_module_default = {
 	"number": "BVBbxW_number",
 	"press": "BVBbxW_press",
 	"slot": "BVBbxW_slot",
-	"track": "BVBbxW_track"
+	"track": "BVBbxW_track",
+	"tray": "BVBbxW_tray"
 };
 //#endregion
 //#region src/primitives/Wheel/WheelAugmentationTrack.tsx
@@ -2631,12 +2703,19 @@ function WheelAugmentationTrack(t0) {
 	} else t10 = $[20];
 	return t10;
 }
+//#endregion
+//#region src/primitives/Wheel/WheelAugmentationSlot.tsx
+const slotSize = 32;
 const slotGap = 3;
-const unfitOffset = 28.99;
-const bridgeOffset = 19.25;
+const actionSize = 12.97;
+/** From the slot's centre, inward: where the tray with the actions starts. */
+const trayStart = 20;
+const trayLength = 31.94;
+const unfitOffset = -28.485;
+const infoOffset = -43.455;
 /** A small slot for an implant or a booster, on its `WheelAugmentationTrack`. */
 function WheelAugmentationSlot(t0) {
-	const $ = c(70);
+	const $ = c(77);
 	let className;
 	let kind;
 	let label;
@@ -2644,16 +2723,18 @@ function WheelAugmentationSlot(t0) {
 	let onDragEnd;
 	let onDragStart;
 	let onPress;
+	let onShowInfo;
 	let onUnfit;
 	let position;
 	let props;
 	let style;
 	let t1;
+	let t2;
 	let tooltip;
 	let typeId;
 	let typeName;
 	if ($[0] !== t0) {
-		({kind, position, number, typeId, typeName, preview: t1, tooltip, onDragStart, onDragEnd, onUnfit, onPress, label, className, style, ...props} = t0);
+		({kind, position, number, typeId, typeName, preview: t1, tooltip, onDragStart, onDragEnd, onUnfit, onShowInfo, onPress, label, actions: t2, className, style, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = kind;
@@ -2662,14 +2743,16 @@ function WheelAugmentationSlot(t0) {
 		$[5] = onDragEnd;
 		$[6] = onDragStart;
 		$[7] = onPress;
-		$[8] = onUnfit;
-		$[9] = position;
-		$[10] = props;
-		$[11] = style;
-		$[12] = t1;
-		$[13] = tooltip;
-		$[14] = typeId;
-		$[15] = typeName;
+		$[8] = onShowInfo;
+		$[9] = onUnfit;
+		$[10] = position;
+		$[11] = props;
+		$[12] = style;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = tooltip;
+		$[16] = typeId;
+		$[17] = typeName;
 	} else {
 		className = $[1];
 		kind = $[2];
@@ -2678,93 +2761,99 @@ function WheelAugmentationSlot(t0) {
 		onDragEnd = $[5];
 		onDragStart = $[6];
 		onPress = $[7];
-		onUnfit = $[8];
-		position = $[9];
-		props = $[10];
-		style = $[11];
-		t1 = $[12];
-		tooltip = $[13];
-		typeId = $[14];
-		typeName = $[15];
+		onShowInfo = $[8];
+		onUnfit = $[9];
+		position = $[10];
+		props = $[11];
+		style = $[12];
+		t1 = $[13];
+		t2 = $[14];
+		tooltip = $[15];
+		typeId = $[16];
+		typeName = $[17];
 	}
 	const preview = t1 === void 0 ? false : t1;
-	let bridge;
-	let t2;
+	const actions = t2 === void 0 ? true : t2;
+	let angle;
+	let info;
 	let t3;
 	let t4;
+	let t5;
 	let unfit;
-	if ($[16] !== className || $[17] !== kind || $[18] !== position || $[19] !== props) {
-		const angle = augmentationAngle(kind, position);
+	if ($[18] !== className || $[19] !== kind || $[20] !== position || $[21] !== props) {
+		angle = augmentationAngle(kind, position);
 		unfit = polar(angle, unfitOffset);
-		bridge = polar(angle, bridgeOffset);
-		t3 = props;
-		let t5;
-		if ($[25] !== className) {
-			t5 = [WheelAugmentation_module_default.slot, className].filter(Boolean);
-			$[25] = className;
-			$[26] = t5;
-		} else t5 = $[26];
-		t4 = t5.join(" ");
-		t2 = placeAt(angle, 319);
-		$[16] = className;
-		$[17] = kind;
-		$[18] = position;
-		$[19] = props;
-		$[20] = bridge;
-		$[21] = t2;
-		$[22] = t3;
-		$[23] = t4;
-		$[24] = unfit;
+		info = polar(angle, infoOffset);
+		t4 = props;
+		let t6;
+		if ($[28] !== className) {
+			t6 = [WheelAugmentation_module_default.slot, className].filter(Boolean);
+			$[28] = className;
+			$[29] = t6;
+		} else t6 = $[29];
+		t5 = t6.join(" ");
+		t3 = placeAt(angle, 319);
+		$[18] = className;
+		$[19] = kind;
+		$[20] = position;
+		$[21] = props;
+		$[22] = angle;
+		$[23] = info;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t5;
+		$[27] = unfit;
 	} else {
-		bridge = $[20];
-		t2 = $[21];
-		t3 = $[22];
-		t4 = $[23];
-		unfit = $[24];
+		angle = $[22];
+		info = $[23];
+		t3 = $[24];
+		t4 = $[25];
+		t5 = $[26];
+		unfit = $[27];
 	}
-	let t5;
-	if ($[27] !== style || $[28] !== t2) {
-		t5 = {
-			...t2,
+	let t6;
+	if ($[30] !== style || $[31] !== t3) {
+		t6 = {
+			...t3,
 			...style
 		};
-		$[27] = style;
-		$[28] = t2;
-		$[29] = t5;
-	} else t5 = $[29];
-	const t6 = typeId !== void 0 || void 0;
-	const t7 = preview || void 0;
-	let t8;
-	if ($[30] !== onUnfit) {
-		t8 = onUnfit && ((event) => {
+		$[30] = style;
+		$[31] = t3;
+		$[32] = t6;
+	} else t6 = $[32];
+	const t7 = typeId !== void 0 || void 0;
+	const t8 = preview || void 0;
+	let t9;
+	if ($[33] !== onUnfit) {
+		t9 = onUnfit && ((event) => {
 			event.preventDefault();
 			onUnfit();
 		});
-		$[30] = onUnfit;
-		$[31] = t8;
-	} else t8 = $[31];
-	const t9 = onDragStart !== void 0 || void 0;
-	let t10;
-	if ($[32] !== kind || $[33] !== position) {
-		t10 = framePath(kind, position);
-		$[32] = kind;
-		$[33] = position;
-		$[34] = t10;
-	} else t10 = $[34];
+		$[33] = onUnfit;
+		$[34] = t9;
+	} else t9 = $[34];
+	const t10 = onDragStart !== void 0 || void 0;
 	let t11;
-	if ($[35] !== t10) {
-		t11 = /* @__PURE__ */ jsx("svg", {
+	if ($[35] !== kind || $[36] !== position) {
+		t11 = framePath(kind, position);
+		$[35] = kind;
+		$[36] = position;
+		$[37] = t11;
+	} else t11 = $[37];
+	let t12;
+	if ($[38] !== t11) {
+		t12 = /* @__PURE__ */ jsx("svg", {
 			className: WheelAugmentation_module_default.frame,
 			viewBox: `-16 -16 32 32`,
 			"aria-hidden": true,
-			children: /* @__PURE__ */ jsx("path", { d: t10 })
+			children: /* @__PURE__ */ jsx("path", { d: t11 })
 		});
-		$[35] = t10;
-		$[36] = t11;
-	} else t11 = $[36];
-	let t12;
-	if ($[37] !== number || $[38] !== typeId) {
-		t12 = typeId !== void 0 ? /* @__PURE__ */ jsx("span", {
+		$[38] = t11;
+		$[39] = t12;
+	} else t12 = $[39];
+	let t13;
+	if ($[40] !== number || $[41] !== typeId) {
+		t13 = typeId !== void 0 ? /* @__PURE__ */ jsx("span", {
 			className: WheelAugmentation_module_default.icon,
 			children: /* @__PURE__ */ jsx(TypeIcon, {
 				typeId,
@@ -2775,108 +2864,127 @@ function WheelAugmentationSlot(t0) {
 			className: WheelAugmentation_module_default.number,
 			children: number
 		});
-		$[37] = number;
-		$[38] = typeId;
-		$[39] = t12;
-	} else t12 = $[39];
-	let t13;
-	if ($[40] !== label || $[41] !== onPress) {
-		t13 = onPress && /* @__PURE__ */ jsx(SlotPress, {
+		$[40] = number;
+		$[41] = typeId;
+		$[42] = t13;
+	} else t13 = $[42];
+	let t14;
+	if ($[43] !== label || $[44] !== onPress) {
+		t14 = onPress && /* @__PURE__ */ jsx(SlotPress, {
 			className: WheelAugmentation_module_default.press,
 			label,
 			onPress
 		});
-		$[40] = label;
-		$[41] = onPress;
-		$[42] = t13;
-	} else t13 = $[42];
-	let t14;
-	if ($[43] !== onDragEnd || $[44] !== onDragStart || $[45] !== t11 || $[46] !== t12 || $[47] !== t13 || $[48] !== t9) {
-		t14 = /* @__PURE__ */ jsxs("div", {
+		$[43] = label;
+		$[44] = onPress;
+		$[45] = t14;
+	} else t14 = $[45];
+	let t15;
+	if ($[46] !== onDragEnd || $[47] !== onDragStart || $[48] !== t10 || $[49] !== t12 || $[50] !== t13 || $[51] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
 			className: WheelAugmentation_module_default.body,
-			draggable: t9,
+			draggable: t10,
 			onDragStart,
 			onDragEnd,
 			children: [
-				t11,
 				t12,
-				t13
+				t13,
+				t14
 			]
 		});
-		$[43] = onDragEnd;
-		$[44] = onDragStart;
-		$[45] = t11;
-		$[46] = t12;
-		$[47] = t13;
-		$[48] = t9;
-		$[49] = t14;
-	} else t14 = $[49];
-	let t15;
-	if ($[50] !== t14 || $[51] !== tooltip) {
-		t15 = /* @__PURE__ */ jsx(Tooltip, {
-			label: tooltip,
-			children: t14
-		});
-		$[50] = t14;
-		$[51] = tooltip;
+		$[46] = onDragEnd;
+		$[47] = onDragStart;
+		$[48] = t10;
+		$[49] = t12;
+		$[50] = t13;
+		$[51] = t14;
 		$[52] = t15;
 	} else t15 = $[52];
 	let t16;
-	if ($[53] !== bridge || $[54] !== kind || $[55] !== onUnfit || $[56] !== typeId || $[57] !== typeName || $[58] !== unfit) {
-		t16 = typeId !== void 0 && onUnfit && /* @__PURE__ */ jsxs("fieldset", {
+	if ($[53] !== t15 || $[54] !== tooltip) {
+		t16 = /* @__PURE__ */ jsx(Tooltip, {
+			label: tooltip,
+			children: t15
+		});
+		$[53] = t15;
+		$[54] = tooltip;
+		$[55] = t16;
+	} else t16 = $[55];
+	let t17;
+	if ($[56] !== actions || $[57] !== angle || $[58] !== info || $[59] !== kind || $[60] !== onShowInfo || $[61] !== onUnfit || $[62] !== preview || $[63] !== typeId || $[64] !== typeName || $[65] !== unfit) {
+		t17 = typeId !== void 0 && actions && /* @__PURE__ */ jsxs("fieldset", {
 			className: WheelAugmentation_module_default.actions,
 			"aria-label": typeName,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: WheelAugmentation_module_default.bridge,
-				style: {
-					"--x": bridge.x,
-					"--y": bridge.y
-				}
-			}), /* @__PURE__ */ jsx("span", {
-				className: WheelAugmentation_module_default.action,
-				style: {
-					"--x": unfit.x,
-					"--y": unfit.y
-				},
-				children: /* @__PURE__ */ jsx(SlotAction, {
-					icon: "module-unfit",
-					label: kind === "implant" ? "Unfit Implant" : "Unfit Booster",
-					onPress: onUnfit
+			inert: preview,
+			style: {
+				"--angle": `${angle}deg`,
+				"--slot-size": slotSize,
+				"--action-size": actionSize,
+				"--tray-start": trayStart,
+				"--tray-length": trayLength,
+				"--tray-width": 16.97
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", { className: WheelAugmentation_module_default.bridge }),
+				/* @__PURE__ */ jsx("span", { className: WheelAugmentation_module_default.tray }),
+				onUnfit && /* @__PURE__ */ jsx("span", {
+					className: WheelAugmentation_module_default.action,
+					style: {
+						"--x": unfit.x,
+						"--y": unfit.y
+					},
+					children: /* @__PURE__ */ jsx(SlotAction, {
+						icon: "module-unfit",
+						label: kind === "implant" ? "Unfit Implant" : "Unfit Booster",
+						onPress: onUnfit
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: WheelAugmentation_module_default.action,
+					style: {
+						"--x": info.x,
+						"--y": info.y
+					},
+					children: /* @__PURE__ */ jsx(SlotInfo, { onPress: onShowInfo })
 				})
-			})]
+			]
 		});
-		$[53] = bridge;
-		$[54] = kind;
-		$[55] = onUnfit;
-		$[56] = typeId;
-		$[57] = typeName;
-		$[58] = unfit;
-		$[59] = t16;
-	} else t16 = $[59];
-	let t17;
-	if ($[60] !== kind || $[61] !== t15 || $[62] !== t16 || $[63] !== t3 || $[64] !== t4 || $[65] !== t5 || $[66] !== t6 || $[67] !== t7 || $[68] !== t8) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			...t3,
-			className: t4,
-			style: t5,
+		$[56] = actions;
+		$[57] = angle;
+		$[58] = info;
+		$[59] = kind;
+		$[60] = onShowInfo;
+		$[61] = onUnfit;
+		$[62] = preview;
+		$[63] = typeId;
+		$[64] = typeName;
+		$[65] = unfit;
+		$[66] = t17;
+	} else t17 = $[66];
+	let t18;
+	if ($[67] !== kind || $[68] !== t16 || $[69] !== t17 || $[70] !== t4 || $[71] !== t5 || $[72] !== t6 || $[73] !== t7 || $[74] !== t8 || $[75] !== t9) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			...t4,
+			className: t5,
+			style: t6,
 			"data-kind": kind,
-			"data-filled": t6,
-			"data-preview": t7,
-			onContextMenu: t8,
-			children: [t15, t16]
+			"data-filled": t7,
+			"data-preview": t8,
+			onContextMenu: t9,
+			children: [t16, t17]
 		});
-		$[60] = kind;
-		$[61] = t15;
-		$[62] = t16;
-		$[63] = t3;
-		$[64] = t4;
-		$[65] = t5;
-		$[66] = t6;
-		$[67] = t7;
-		$[68] = t8;
+		$[67] = kind;
+		$[68] = t16;
 		$[69] = t17;
-	} else t17 = $[69];
-	return t17;
+		$[70] = t4;
+		$[71] = t5;
+		$[72] = t6;
+		$[73] = t7;
+		$[74] = t8;
+		$[75] = t9;
+		$[76] = t18;
+	} else t18 = $[76];
+	return t18;
 }
 /** The slot as a piece of its track, around its centre; the gaps to its neighbours as wide inside as out. */
 function framePath(kind, position) {
@@ -3598,7 +3706,7 @@ function SensorStrengths(t0) {
 	if ($[0] !== strengths) {
 		t4 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			const shown = strengths.filter(_temp$18);
+			const shown = strengths.filter(_temp$19);
 			if (shown.length === 0) {
 				t4 = null;
 				break bb0;
@@ -3653,7 +3761,7 @@ function _temp2$10(strength) {
 		strength.displayName
 	] }, strength.name);
 }
-function _temp$18(t0) {
+function _temp$19(t0) {
 	const { value } = t0;
 	return value;
 }
@@ -3701,14 +3809,14 @@ function Cloak(t0) {
 			itemRef,
 			name: "maxVelocityModifier",
 			decimals: 0,
-			format: _temp$17
+			format: _temp$18
 		});
 		$[0] = itemRef;
 		$[1] = t1;
 	} else t1 = $[1];
 	return t1;
 }
-function _temp$17(value, format) {
+function _temp$18(value, format) {
 	return percent((value - 1) * 100, format);
 }
 //#endregion
@@ -4236,7 +4344,7 @@ function DamageTypes(t0) {
 			t4,
 			t5,
 			t6
-		].filter(_temp$16);
+		].filter(_temp$17);
 		$[0] = t3;
 		$[1] = t4;
 		$[2] = t5;
@@ -4304,7 +4412,7 @@ function _temp2$9(t0) {
 		text
 	}, name_0);
 }
-function _temp$16(damage) {
+function _temp$17(damage) {
 	return damage.value;
 }
 function useDamage(name, itemRef, charge) {
@@ -4554,9 +4662,9 @@ function Resistance$1(t0) {
 /** The resistances a module gives, for every layer. */
 function _temp2$8(t0) {
 	const { resistances } = t0;
-	return resistances.some(_temp$15);
+	return resistances.some(_temp$16);
 }
-function _temp$15(t0) {
+function _temp$16(t0) {
 	const { value } = t0;
 	return value !== 1;
 }
@@ -4764,7 +4872,7 @@ function ResistanceBonus(t0) {
 				t3,
 				t4,
 				t5
-			].filter(_temp$14);
+			].filter(_temp$15);
 			const [first] = bonuses;
 			if (first === void 0) {
 				t6 = null;
@@ -4814,7 +4922,7 @@ function _temp2$7(t0) {
 		text
 	}, name);
 }
-function _temp$14(bonus) {
+function _temp$15(bonus) {
 	return bonus.value;
 }
 //#endregion
@@ -4917,14 +5025,14 @@ function SignatureSuppressor(t0) {
 			itemRef,
 			name: "signatureSuppressorSignatureRadiusBonusPassive",
 			decimals: 0,
-			format: _temp$13
+			format: _temp$14
 		});
 		$[0] = itemRef;
 		$[1] = t1;
 	} else t1 = $[1];
 	return t1;
 }
-function _temp$13(value, format) {
+function _temp$14(value, format) {
 	return percent((1 - value) * 100, format);
 }
 //#endregion
@@ -5027,7 +5135,7 @@ function StasisWebifier(props) {
 		t0 = {
 			of: props.itemRef,
 			decimals: 0,
-			format: _temp$12
+			format: _temp$13
 		};
 		$[0] = props.itemRef;
 		$[1] = t0;
@@ -5057,7 +5165,7 @@ function StasisWebifier(props) {
 	} else t3 = $[8];
 	return t3;
 }
-function _temp$12(value, format) {
+function _temp$13(value, format) {
 	return percent(-value, format);
 }
 //#endregion
@@ -5945,7 +6053,7 @@ function FittingAugmentations(t0) {
 	const boosters = useBoosters();
 	let t1;
 	if ($[0] !== implants || $[1] !== readOnly) {
-		t1 = !readOnly || implants.some(_temp$11);
+		t1 = !readOnly || implants.some(_temp$12);
 		$[0] = implants;
 		$[1] = readOnly;
 		$[2] = t1;
@@ -6000,11 +6108,11 @@ function FittingAugmentations(t0) {
 	} else t5 = $[15];
 	return t5;
 }
-function _temp$11(slot) {
+function _temp$12(slot) {
 	return slot.item !== void 0;
 }
 function FittingAugmentation(t0) {
-	const $ = c(67);
+	const $ = c(73);
 	const { kind, position, number, content, readOnly } = t0;
 	const store = useFitStore();
 	const sde = useSde();
@@ -6012,6 +6120,7 @@ function FittingAugmentation(t0) {
 	const { show, clear } = usePreview();
 	const { dragging, start, end } = useDrag();
 	const { browse } = useBrowse();
+	const { show: showInfo } = useShowInfo();
 	const item = content?.item;
 	const type = useType(item?.type_id);
 	const ref = content?.ref;
@@ -6089,7 +6198,10 @@ function FittingAugmentation(t0) {
 	if (readOnly) {
 		let t9;
 		if ($[22] !== shown) {
-			t9 = /* @__PURE__ */ jsx(WheelAugmentationSlot, { ...shown });
+			t9 = /* @__PURE__ */ jsx(WheelAugmentationSlot, {
+				...shown,
+				actions: false
+			});
 			$[22] = shown;
 			$[23] = t9;
 		} else t9 = $[23];
@@ -6169,21 +6281,36 @@ function FittingAugmentation(t0) {
 		$[50] = t14;
 	} else t14 = $[50];
 	let t15;
-	if ($[51] !== browse || $[52] !== content?.index || $[53] !== kind || $[54] !== number) {
-		t15 = () => browse({
+	if ($[51] !== item || $[52] !== kind || $[53] !== ref || $[54] !== showInfo) {
+		t15 = item && ref !== void 0 ? (element) => showInfo({
+			typeId: item.type_id,
+			ref
+		}, {
+			element,
+			side: kind === "implant" ? "right" : "left"
+		}) : void 0;
+		$[51] = item;
+		$[52] = kind;
+		$[53] = ref;
+		$[54] = showInfo;
+		$[55] = t15;
+	} else t15 = $[55];
+	let t16;
+	if ($[56] !== browse || $[57] !== content?.index || $[58] !== kind || $[59] !== number) {
+		t16 = () => browse({
 			type: kind,
 			index: number ?? content?.index
 		});
-		$[51] = browse;
-		$[52] = content?.index;
-		$[53] = kind;
-		$[54] = number;
-		$[55] = t15;
-	} else t15 = $[55];
-	const t16 = type?.name ?? (number === void 0 ? `Empty ${slotName}` : `Empty ${slotName} ${number}`);
-	let t17;
-	if ($[56] !== end || $[57] !== shown || $[58] !== t10 || $[59] !== t11 || $[60] !== t12 || $[61] !== t13 || $[62] !== t14 || $[63] !== t15 || $[64] !== t16 || $[65] !== t9) {
-		t17 = /* @__PURE__ */ jsx(WheelAugmentationSlot, {
+		$[56] = browse;
+		$[57] = content?.index;
+		$[58] = kind;
+		$[59] = number;
+		$[60] = t16;
+	} else t16 = $[60];
+	const t17 = type?.name ?? (number === void 0 ? `Empty ${slotName}` : `Empty ${slotName} ${number}`);
+	let t18;
+	if ($[61] !== end || $[62] !== shown || $[63] !== t10 || $[64] !== t11 || $[65] !== t12 || $[66] !== t13 || $[67] !== t14 || $[68] !== t15 || $[69] !== t16 || $[70] !== t17 || $[71] !== t9) {
+		t18 = /* @__PURE__ */ jsx(WheelAugmentationSlot, {
 			...shown,
 			onDragStart: t9,
 			onDragEnd: end,
@@ -6192,22 +6319,24 @@ function FittingAugmentation(t0) {
 			onDragOver: t12,
 			onDrop: t13,
 			onUnfit: t14,
-			onPress: t15,
-			label: t16
-		});
-		$[56] = end;
-		$[57] = shown;
-		$[58] = t10;
-		$[59] = t11;
-		$[60] = t12;
-		$[61] = t13;
-		$[62] = t14;
-		$[63] = t15;
-		$[64] = t16;
-		$[65] = t9;
-		$[66] = t17;
-	} else t17 = $[66];
-	return t17;
+			onShowInfo: t15,
+			onPress: t16,
+			label: t17
+		});
+		$[61] = end;
+		$[62] = shown;
+		$[63] = t10;
+		$[64] = t11;
+		$[65] = t12;
+		$[66] = t13;
+		$[67] = t14;
+		$[68] = t15;
+		$[69] = t16;
+		$[70] = t17;
+		$[71] = t9;
+		$[72] = t18;
+	} else t18 = $[72];
+	return t18;
 }
 //#endregion
 //#region src/components/FittingWheel/FittingWheel.module.css
@@ -6257,7 +6386,7 @@ function FittingWheel(t0) {
 	} else t7 = $[5];
 	let t8;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = markedRacks.map(_temp$10);
+		t8 = markedRacks.map(_temp$11);
 		$[6] = t8;
 	} else t8 = $[6];
 	let t9;
@@ -6347,7 +6476,7 @@ function FittingWheel(t0) {
 	} else t14 = $[30];
 	return t14;
 }
-function _temp$10(rack) {
+function _temp$11(rack) {
 	return /* @__PURE__ */ jsx(WheelRackMarker, { rack }, rack);
 }
 function onEveShipFit() {
@@ -7266,7 +7395,7 @@ function Variations(t0) {
 	const swapper = t6;
 	let t7;
 	if ($[13] !== anchor || $[14] !== sde || $[15] !== show || $[16] !== swapper || $[17] !== target.typeId || $[18] !== variations) {
-		const groups = Map.groupBy(variations, _temp$9);
+		const groups = Map.groupBy(variations, _temp$10);
 		t7 = /* @__PURE__ */ jsx("ul", {
 			className: ItemInfo_module_default.list,
 			children: [...groups].map((t8) => {
@@ -7299,7 +7428,7 @@ function Variations(t0) {
 	} else t7 = $[19];
 	return t7;
 }
-function _temp$9(type_0) {
+function _temp$10(type_0) {
 	return type_0.metaGroupId;
 }
 function Variation(t0) {
@@ -7391,7 +7520,8 @@ function Variation(t0) {
 }
 function slotName(slot) {
 	const name = slotNames$1[slot.type] ?? slot.type;
-	return "index" in slot ? `${name} ${slot.index + 1}` : name;
+	if (!("index" in slot)) return name;
+	return `${name} ${slot.type === "implant" || slot.type === "booster" ? slot.index : slot.index + 1}`;
 }
 //#endregion
 //#region src/components/ShipStatistics/AttributeTooltip.tsx
@@ -7986,7 +8116,7 @@ function FighterTooltip(t0) {
 	} else t7 = $[10];
 	let t8;
 	if ($[11] !== itemRef || $[12] !== quantity || $[13] !== type?.fighterAbilities) {
-		t8 = type?.fighterAbilities.filter(_temp$8).map((ability) => /* @__PURE__ */ jsx(AbilityLines, {
+		t8 = type?.fighterAbilities.filter(_temp$9).map((ability) => /* @__PURE__ */ jsx(AbilityLines, {
 			itemRef,
 			ability,
 			quantity
@@ -8044,7 +8174,7 @@ function FighterTooltip(t0) {
 	} else t12 = $[26];
 	return t12;
 }
-function _temp$8(t0) {
+function _temp$9(t0) {
 	const { slot } = t0;
 	return slot !== 1;
 }
@@ -8468,7 +8598,7 @@ function BayContents(t0) {
 	const maxActive = t1;
 	let t2;
 	if ($[2] !== contents || $[3] !== fighters || $[4] !== fit) {
-		const launched = fighters ? fit.items.flatMap(_temp$7) : [];
+		const launched = fighters ? fit.items.flatMap(_temp$8) : [];
 		t2 = [...contents.flatMap(_temp2$5), ...launched];
 		$[2] = contents;
 		$[3] = fighters;
@@ -8662,7 +8792,7 @@ function _temp2$5(t0) {
 	const { refs } = t0;
 	return refs;
 }
-function _temp$7(item, ref) {
+function _temp$8(item, ref) {
 	return item.slot.type === "fighter_tube" ? [ref] : [];
 }
 function DroneSelection(t0) {
@@ -9394,7 +9524,7 @@ function FitName() {
 					defaultValue: fit.name,
 					placeholder: ship?.name,
 					ref: input,
-					onFocus: _temp$6,
+					onFocus: _temp$7,
 					onBlur: (event_0) => rename(event_0.currentTarget.value),
 					onKeyDown: (event_1) => {
 						if (event_1.key === "Escape") event_1.currentTarget.value = fit.name ?? "";
@@ -9423,7 +9553,7 @@ function FitName() {
 	} else t5 = $[12];
 	return t5;
 }
-function _temp$6(event) {
+function _temp$7(event) {
 	return event.currentTarget.select();
 }
 const violationKinds = [
@@ -11124,7 +11254,7 @@ function NameForm(t0) {
 		t5 = /* @__PURE__ */ jsx("input", {
 			id,
 			value: name,
-			onFocus: _temp$5,
+			onFocus: _temp$6,
 			onChange: t4
 		});
 		$[10] = id;
@@ -11189,7 +11319,7 @@ function NameForm(t0) {
 	} else t11 = $[26];
 	return t11;
 }
-function _temp$5(event_0) {
+function _temp$6(event_0) {
 	return event_0.currentTarget.select();
 }
 function ImportForm(t0) {
@@ -11413,7 +11543,7 @@ function HullsAndFits() {
 	const anySource = browserFits || personalFits;
 	let t2;
 	if ($[4] !== anySource || $[5] !== browserFits || $[6] !== fits || $[7] !== personal.fits || $[8] !== personalFits) {
-		const listed = [...!anySource || browserFits ? fits.map(_temp$4) : [], ...!anySource || personalFits ? personal.fits.map(_temp2$2) : []].toSorted(_temp3);
+		const listed = [...!anySource || browserFits ? fits.map(_temp$5) : [], ...!anySource || personalFits ? personal.fits.map(_temp2$2) : []].toSorted(_temp3);
 		t2 = Map.groupBy(listed, _temp4);
 		$[4] = anySource;
 		$[5] = browserFits;
@@ -11586,7 +11716,7 @@ function HullsAndFits() {
 	if ($[47] !== personal.character || $[48] !== personalFits) {
 		t17 = personalFits && personal.character?.canReadFits !== true && /* @__PURE__ */ jsx("p", {
 			className: ItemBrowser_module_default.empty,
-			children: personal.character === void 0 ? "Pick a logged-in character" : "Log in again to see fittings"
+			children: personal.character === void 0 ? "Log in or pick a character with the Character button" : "Log in again with the Character button to see fittings"
 		});
 		$[47] = personal.character;
 		$[48] = personalFits;
@@ -11708,7 +11838,7 @@ function _temp2$2(fit_0) {
 		kind: "fits-personal"
 	};
 }
-function _temp$4(fit) {
+function _temp$5(fit) {
 	return {
 		fit,
 		kind: "fits-browser"
@@ -11891,7 +12021,7 @@ function Implants() {
 	const placement = usePlacement();
 	const missingSkills = useMissingSkills();
 	const [search, setSearch] = useState("");
-	const [kinds, setKinds] = useState(_temp$3);
+	const [kinds, setKinds] = useState(_temp$4);
 	const [flyable, setFlyable] = useState(false);
 	const [view, setView] = useState("market");
 	const [collapses, setCollapses] = useState(0);
@@ -12139,7 +12269,7 @@ function Implants() {
 	} else t19 = $[49];
 	return t19;
 }
-function _temp$3() {
+function _temp$4() {
 	return /* @__PURE__ */ new Set();
 }
 function KindToggle(t0) {
@@ -12261,7 +12391,7 @@ function Modules() {
 	const canFit = useCanFit();
 	const missingSkills = useMissingSkills();
 	const [search, setSearch] = useState("");
-	const [slots, setSlots] = useState(_temp$2);
+	const [slots, setSlots] = useState(_temp$3);
 	const [hullRestrictions, setHullRestrictions] = useState(false);
 	const [flyable, setFlyable] = useState(false);
 	const [collapses, setCollapses] = useState(0);
@@ -12464,7 +12594,7 @@ function Modules() {
 function _temp2$1(slot) {
 	return slot.places;
 }
-function _temp$2() {
+function _temp$3() {
 	return /* @__PURE__ */ new Set();
 }
 //#endregion
@@ -12553,6 +12683,7 @@ function ItemBrowser(t0) {
 			role: "tabpanel",
 			"aria-labelledby": `${id}-${each_0.tab}-tab`,
 			hidden: tab !== each_0.tab,
+			onKeyDown: _temp$2,
 			children: ready ? /* @__PURE__ */ jsx(Activity, {
 				mode: tab === each_0.tab ? "visible" : "hidden",
 				children: each_0.panel
@@ -12589,6 +12720,20 @@ function ItemBrowser(t0) {
 	} else t9 = $[15];
 	return t9;
 }
+function _temp$2(event) {
+	if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+	const panel = event.currentTarget;
+	const target = event.target;
+	if (event.key === "ArrowDown" && target.matches("input[type=search]")) {
+		if (focusTree(panel)) event.preventDefault();
+	} else if (event.key === "ArrowUp" && isTreeRow(target)) {
+		const search = panel.querySelector("input[type=search]");
+		if (search === null) return;
+		event.preventDefault();
+		search.focus();
+	}
+}
 //#endregion
 //#region src/components/ShipStatistics/ShipStatistics.module.css
 var ShipStatistics_module_default = {

package/dist/style.css

@@ -1083,6 +1083,10 @@
   inset: 0;
 }
 
+.BVBbxW_slot:hover, .BVBbxW_slot:has(:focus-visible) {
+  z-index: 1;
+}
+
 .BVBbxW_slot:hover > .BVBbxW_actions, .BVBbxW_slot:has(:focus-visible) > .BVBbxW_actions {
   opacity: 1;
 }
@@ -1092,21 +1096,36 @@
 }
 
 .BVBbxW_action {
-  height: calc(12.97 * var(--wheel-unit));
+  height: calc(var(--action-size) * var(--wheel-unit));
   left: calc(50% + var(--x) * var(--wheel-unit));
-  margin: calc(-6.49 * var(--wheel-unit));
+  margin: calc(var(--action-size) / -2 * var(--wheel-unit));
   top: calc(50% + var(--y) * var(--wheel-unit));
-  width: calc(12.97 * var(--wheel-unit));
+  width: calc(var(--action-size) * var(--wheel-unit));
   position: absolute;
 }
 
 .BVBbxW_bridge {
-  height: calc(8 * var(--wheel-unit));
-  left: calc(50% + var(--x) * var(--wheel-unit));
-  margin: calc(-4 * var(--wheel-unit));
-  top: calc(50% + var(--y) * var(--wheel-unit));
-  width: calc(8 * var(--wheel-unit));
+  height: calc((var(--tray-start) + var(--tray-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;
+  width: calc(var(--slot-size) * var(--wheel-unit));
+  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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eveshipfit/ui-ingame",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "EVE Online ship fitting UI that looks like the in-game one",
   "license": "MIT",
   "author": "EVEShipFit Team <info@eveship.fit>",
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@eveshipfit/react-hooks": "2.3.0"
+    "@eveshipfit/react-hooks": "2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
@@ -43,7 +43,7 @@
     "storybook": "^10.6.0",
     "tsdown": "^0.23.0",
     "vite": "^8.3.0",
-    "@eveshipfit/fitting": "2.3.0",
+    "@eveshipfit/fitting": "2.4.0",
     "@eveshipfit/sde-loader": "3.0.0"
   },
   "peerDependencies": {