@eveshipfit/ui-ingame 1.6.0 → 1.7.0

package/dist/index.mjs

@@ -2,7 +2,7 @@ import './style.css';
 import { c } from "react/compiler-runtime";
 import { Activity, createContext, useContext, useDeferredValue, useEffect, useId, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { formatClock, formatDuration, formatNumber, useAttribute, useAttributeTooltip, useBayContents, useBayUsage, useCanFit, useChargeSearch, useChargeTree, useChargedModules, useCharges, useDrag, useDroneRoom, useEngine, useFighterTubeUsage, useFighterTubes, useFit, useFitHistory, useFitPrice, useFitStore, useHardpoints, useHullTree, useImages, useLocalFits, useMissingSkills, useModes, useModuleSearch, useModuleTree, usePersonalFits, usePlacement, usePreview, useRackUsage, useSde, useShownSnapshot, useSlots, useSnapshot, useStats, useType } from "@eveshipfit/react-hooks";
+import { formatClock, formatDuration, formatNumber, useAttribute, useAttributeTooltip, useBayContents, useBayUsage, useBoosters, useCanFit, useChargeSearch, useChargeTree, useChargedModules, useCharges, useDrag, useDroneRoom, useEngine, useFighterTubeUsage, useFighterTubes, useFit, useFitHistory, useFitPrice, useFitStore, useHardpoints, useHullTree, useImages, useImplantSearch, useImplantTree, useImplants, useLocalFits, useMissingSkills, useModes, useModuleSearch, useModuleTree, usePersonalFits, usePlacement, usePreview, useRackUsage, useSde, useShownSnapshot, useSlots, useSnapshot, useStats, useType } from "@eveshipfit/react-hooks";
 //#region src/primitives/Dialog/Dialog.module.css
 var Dialog_module_default = {
 	"close": "kwi1cG_close",
@@ -995,6 +995,16 @@ function rackSize(rack) {
 function slotAngle(rack, index) {
 	return racks$1[rack].first + index * racks$1[rack].step;
 }
+/** Implants run down the left of the wheel, boosters mirror them on the right; in degrees. */
+const augmentations = {
+	first: 96,
+	step: 6
+};
+/** The angle of the `position`th slot of a track, counted from its top; fractions place what goes between. */
+function augmentationAngle(kind, position) {
+	const angle = augmentations.first + position * augmentations.step;
+	return kind === "implant" ? -angle : angle;
+}
 //#endregion
 //#region src/primitives/Wheel/Wheel.module.css
 var Wheel_module_default = {
@@ -1072,19 +1082,19 @@ function Wheel(t0) {
 function polar(angle, radius) {
 	const radians = angle * Math.PI / 180;
 	return {
-		x: round(radius * Math.sin(radians)),
-		y: round(-radius * Math.cos(radians))
+		x: round$1(radius * Math.sin(radians)),
+		y: round$1(-radius * Math.cos(radians))
 	};
 }
 /** Where an element's centre goes, in percentages of the wheel. */
 function placeAt(angle, radius) {
 	const { x, y } = polar(angle, radius);
 	return {
-		left: `${round(50 + x / 286 * 50)}%`,
-		top: `${round(50 + y / 286 * 50)}%`
+		left: `${round$1(50 + x / 286 * 50)}%`,
+		top: `${round$1(50 + y / 286 * 50)}%`
 	};
 }
-function round(value) {
+function round$1(value) {
 	return Math.round(value * 1e3) / 1e3 + 0;
 }
 //#endregion
@@ -1212,7 +1222,7 @@ function SlotPress(t0) {
 			className,
 			"aria-label": label,
 			onClick: onPress,
-			onKeyDown: _temp$18
+			onKeyDown: _temp$19
 		});
 		$[0] = className;
 		$[1] = label;
@@ -1221,7 +1231,7 @@ function SlotPress(t0) {
 	} else t1 = $[3];
 	return t1;
 }
-function _temp$18(event) {
+function _temp$19(event) {
 	if (event.key !== "Enter" && event.key !== " ") return;
 	event.preventDefault();
 	event.currentTarget.dispatchEvent(new MouseEvent("click", {
@@ -1421,7 +1431,7 @@ function WheelSlot(t0) {
 				})
 			});
 		}
-		t8 = row.findLastIndex(_temp$17);
+		t8 = row.findLastIndex(_temp$18);
 		$[25] = chargeTypeId;
 		$[26] = fitted;
 		$[27] = onRemoveCharge;
@@ -1623,7 +1633,7 @@ function WheelSlot(t0) {
 	} else t27 = $[94];
 	return t27;
 }
-function _temp$17(action) {
+function _temp$18(action) {
 	return action !== void 0;
 }
 function frameTexture(fitted, preview, state, activatable) {
@@ -1804,7 +1814,7 @@ function useDecoded(src) {
 			image.decode().then(() => {
 				decoded.add(src);
 				setReady(src);
-			}, _temp$16);
+			}, _temp$17);
 		};
 		t1 = [src];
 		$[0] = src;
@@ -1824,7 +1834,7 @@ function useDecoded(src) {
 	} else t2 = $[5];
 	return t2;
 }
-function _temp$16() {}
+function _temp$17() {}
 function WheelGauge(t0) {
 	const $ = c(15);
 	const { resource, used, total, valueText } = t0;
@@ -2358,6 +2368,368 @@ function WheelModes(t0) {
 	return t2;
 }
 //#endregion
+//#region src/primitives/Wheel/WheelAugmentation.module.css
+var WheelAugmentation_module_default = {
+	"action": "BVBbxW_action",
+	"actions": "BVBbxW_actions",
+	"body": "BVBbxW_body",
+	"bridge": "BVBbxW_bridge",
+	"frame": "BVBbxW_frame",
+	"icon": "BVBbxW_icon",
+	"marker": "BVBbxW_marker",
+	"number": "BVBbxW_number",
+	"slot": "BVBbxW_slot",
+	"track": "BVBbxW_track"
+};
+//#endregion
+//#region src/primitives/Wheel/WheelAugmentationTrack.tsx
+const BOOSTER_MARKET_GROUP_ID = 977;
+const markerRadius = {
+	implant: 323,
+	booster: 319
+};
+/** The band implant or booster slots sit on, outside the wheel, with an icon at its top. */
+function WheelAugmentationTrack(t0) {
+	const $ = c(24);
+	const { kind, length } = t0;
+	const images = useImages();
+	let t1;
+	if ($[0] !== images || $[1] !== kind) {
+		t1 = kind === "implant" ? images.uiTexture("windowicons/augmentations") : images.marketGroupIcon(BOOSTER_MARKET_GROUP_ID);
+		$[0] = images;
+		$[1] = kind;
+		$[2] = t1;
+	} else t1 = $[2];
+	const icon = t1;
+	let t2;
+	if ($[3] !== kind) {
+		t2 = polar(augmentationAngle(kind, -.35), 319);
+		$[3] = kind;
+		$[4] = t2;
+	} else t2 = $[4];
+	const start = t2;
+	let t3;
+	if ($[5] !== kind || $[6] !== length) {
+		t3 = polar(augmentationAngle(kind, length - .65), 319);
+		$[5] = kind;
+		$[6] = length;
+		$[7] = t3;
+	} else t3 = $[7];
+	const end = t3;
+	const sweep = kind === "implant" ? 0 : 1;
+	const t4 = `M ${start.x} ${start.y} A 319 319 0 0 ${sweep} ${end.x} ${end.y}`;
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx("svg", {
+			className: WheelAugmentation_module_default.track,
+			viewBox: `-286 -286 572 572`,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("path", { d: t4 })
+		});
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== kind) {
+		t6 = placeAt(augmentationAngle(kind, -1.3), markerRadius[kind]);
+		$[10] = kind;
+		$[11] = t6;
+	} else t6 = $[11];
+	const t7 = kind === "implant" ? "Implants" : "Boosters";
+	let t8;
+	if ($[12] !== icon || $[13] !== kind) {
+		t8 = /* @__PURE__ */ jsx("img", {
+			src: icon,
+			alt: "",
+			"data-marker": kind,
+			draggable: false
+		});
+		$[12] = icon;
+		$[13] = kind;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t7 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Tooltip, {
+			label: t7,
+			children: t8
+		});
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t6 || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			className: WheelAugmentation_module_default.marker,
+			style: t6,
+			children: t9
+		});
+		$[18] = t6;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t5) {
+		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, t10] });
+		$[21] = t10;
+		$[22] = t5;
+		$[23] = t11;
+	} else t11 = $[23];
+	return t11;
+}
+const slotGap = 3;
+const unfitOffset = 28.99;
+const bridgeOffset = 19.25;
+/** A small slot for an implant or a booster, on its `WheelAugmentationTrack`. */
+function WheelAugmentationSlot(t0) {
+	const $ = c(64);
+	let className;
+	let kind;
+	let number;
+	let onDragEnd;
+	let onDragStart;
+	let onUnfit;
+	let position;
+	let props;
+	let style;
+	let t1;
+	let tooltip;
+	let typeId;
+	let typeName;
+	if ($[0] !== t0) {
+		({kind, position, number, typeId, typeName, preview: t1, tooltip, onDragStart, onDragEnd, onUnfit, className, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = kind;
+		$[3] = number;
+		$[4] = onDragEnd;
+		$[5] = onDragStart;
+		$[6] = onUnfit;
+		$[7] = position;
+		$[8] = props;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = tooltip;
+		$[12] = typeId;
+		$[13] = typeName;
+	} else {
+		className = $[1];
+		kind = $[2];
+		number = $[3];
+		onDragEnd = $[4];
+		onDragStart = $[5];
+		onUnfit = $[6];
+		position = $[7];
+		props = $[8];
+		style = $[9];
+		t1 = $[10];
+		tooltip = $[11];
+		typeId = $[12];
+		typeName = $[13];
+	}
+	const preview = t1 === void 0 ? false : t1;
+	let bridge;
+	let t2;
+	let t3;
+	let t4;
+	let unfit;
+	if ($[14] !== className || $[15] !== kind || $[16] !== position || $[17] !== props) {
+		const angle = augmentationAngle(kind, position);
+		unfit = polar(angle, unfitOffset);
+		bridge = polar(angle, bridgeOffset);
+		t3 = props;
+		let t5;
+		if ($[23] !== className) {
+			t5 = [WheelAugmentation_module_default.slot, className].filter(Boolean);
+			$[23] = className;
+			$[24] = t5;
+		} else t5 = $[24];
+		t4 = t5.join(" ");
+		t2 = placeAt(angle, 319);
+		$[14] = className;
+		$[15] = kind;
+		$[16] = position;
+		$[17] = props;
+		$[18] = bridge;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = unfit;
+	} else {
+		bridge = $[18];
+		t2 = $[19];
+		t3 = $[20];
+		t4 = $[21];
+		unfit = $[22];
+	}
+	let t5;
+	if ($[25] !== style || $[26] !== t2) {
+		t5 = {
+			...t2,
+			...style
+		};
+		$[25] = style;
+		$[26] = t2;
+		$[27] = t5;
+	} else t5 = $[27];
+	const t6 = typeId !== void 0 || void 0;
+	const t7 = preview || void 0;
+	let t8;
+	if ($[28] !== onUnfit) {
+		t8 = onUnfit && ((event) => {
+			event.preventDefault();
+			onUnfit();
+		});
+		$[28] = onUnfit;
+		$[29] = t8;
+	} else t8 = $[29];
+	const t9 = onDragStart !== void 0 || void 0;
+	let t10;
+	if ($[30] !== kind || $[31] !== position) {
+		t10 = framePath(kind, position);
+		$[30] = kind;
+		$[31] = position;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== t10) {
+		t11 = /* @__PURE__ */ jsx("svg", {
+			className: WheelAugmentation_module_default.frame,
+			viewBox: `-16 -16 32 32`,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("path", { d: t10 })
+		});
+		$[33] = t10;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== number || $[36] !== typeId) {
+		t12 = typeId !== void 0 ? /* @__PURE__ */ jsx("span", {
+			className: WheelAugmentation_module_default.icon,
+			children: /* @__PURE__ */ jsx(TypeIcon, {
+				typeId,
+				size: 64,
+				marker: false
+			})
+		}) : number !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: WheelAugmentation_module_default.number,
+			children: number
+		});
+		$[35] = number;
+		$[36] = typeId;
+		$[37] = t12;
+	} else t12 = $[37];
+	let t13;
+	if ($[38] !== onDragEnd || $[39] !== onDragStart || $[40] !== t11 || $[41] !== t12 || $[42] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: WheelAugmentation_module_default.body,
+			draggable: t9,
+			onDragStart,
+			onDragEnd,
+			children: [t11, t12]
+		});
+		$[38] = onDragEnd;
+		$[39] = onDragStart;
+		$[40] = t11;
+		$[41] = t12;
+		$[42] = t9;
+		$[43] = t13;
+	} else t13 = $[43];
+	let t14;
+	if ($[44] !== t13 || $[45] !== tooltip) {
+		t14 = /* @__PURE__ */ jsx(Tooltip, {
+			label: tooltip,
+			children: t13
+		});
+		$[44] = t13;
+		$[45] = tooltip;
+		$[46] = t14;
+	} else t14 = $[46];
+	let t15;
+	if ($[47] !== bridge || $[48] !== kind || $[49] !== onUnfit || $[50] !== typeId || $[51] !== typeName || $[52] !== unfit) {
+		t15 = typeId !== void 0 && onUnfit && /* @__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
+				})
+			})]
+		});
+		$[47] = bridge;
+		$[48] = kind;
+		$[49] = onUnfit;
+		$[50] = typeId;
+		$[51] = typeName;
+		$[52] = unfit;
+		$[53] = t15;
+	} else t15 = $[53];
+	let t16;
+	if ($[54] !== kind || $[55] !== t14 || $[56] !== t15 || $[57] !== t3 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			...t3,
+			className: t4,
+			style: t5,
+			"data-kind": kind,
+			"data-filled": t6,
+			"data-preview": t7,
+			onContextMenu: t8,
+			children: [t14, t15]
+		});
+		$[54] = kind;
+		$[55] = t14;
+		$[56] = t15;
+		$[57] = t3;
+		$[58] = t4;
+		$[59] = t5;
+		$[60] = t6;
+		$[61] = t7;
+		$[62] = t8;
+		$[63] = t16;
+	} else t16 = $[63];
+	return t16;
+}
+/** 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) {
+	const centre = polar(augmentationAngle(kind, position), 319);
+	const corner = (side, radius) => {
+		const edge = augmentationAngle(kind, position + side) * Math.PI / 180;
+		const along = Math.sqrt(radius * radius - (slotGap / 2) ** 2);
+		const off = slotGap / 2 * Math.sign(augmentationAngle(kind, position) - augmentationAngle(kind, position + side));
+		const x = along * Math.sin(edge) + off * Math.cos(edge);
+		const y = -along * Math.cos(edge) + off * Math.sin(edge);
+		return `${round(x - centre.x)} ${round(y - centre.y)}`;
+	};
+	const inner = 303;
+	const outer = 335;
+	const sweep = augmentationAngle(kind, position + .5) > augmentationAngle(kind, position) ? 1 : 0;
+	return [
+		`M ${corner(-.5, inner)}`,
+		`L ${corner(-.5, outer)}`,
+		`A ${outer} ${outer} 0 0 ${sweep} ${corner(.5, outer)}`,
+		`L ${corner(.5, inner)}`,
+		`A ${inner} ${inner} 0 0 ${1 - sweep} ${corner(-.5, inner)}`,
+		"Z"
+	].join(" ");
+}
+function round(value) {
+	return Math.round(value * 100) / 100;
+}
+//#endregion
 //#region src/components/ShipStatistics/units.ts
 /** For the `format` of `useAttribute`. */
 function unit(suffix, divisor = 1) {
@@ -3051,7 +3423,7 @@ function SensorStrengths(t0) {
 	if ($[0] !== strengths) {
 		t4 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			const shown = strengths.filter(_temp$15);
+			const shown = strengths.filter(_temp$16);
 			if (shown.length === 0) {
 				t4 = null;
 				break bb0;
@@ -3106,7 +3478,7 @@ function _temp2$10(strength) {
 		strength.displayName
 	] }, strength.name);
 }
-function _temp$15(t0) {
+function _temp$16(t0) {
 	const { value } = t0;
 	return value;
 }
@@ -3154,14 +3526,14 @@ function Cloak(t0) {
 			itemRef,
 			name: "maxVelocityModifier",
 			decimals: 0,
-			format: _temp$14
+			format: _temp$15
 		});
 		$[0] = itemRef;
 		$[1] = t1;
 	} else t1 = $[1];
 	return t1;
 }
-function _temp$14(value, format) {
+function _temp$15(value, format) {
 	return percent((value - 1) * 100, format);
 }
 //#endregion
@@ -3689,7 +4061,7 @@ function DamageTypes(t0) {
 			t4,
 			t5,
 			t6
-		].filter(_temp$13);
+		].filter(_temp$14);
 		$[0] = t3;
 		$[1] = t4;
 		$[2] = t5;
@@ -3757,7 +4129,7 @@ function _temp2$9(t0) {
 		text
 	}, name_0);
 }
-function _temp$13(damage) {
+function _temp$14(damage) {
 	return damage.value;
 }
 function useDamage(name, itemRef, charge) {
@@ -4007,9 +4379,9 @@ function Resistance$1(t0) {
 /** The resistances a module gives, for every layer. */
 function _temp2$8(t0) {
 	const { resistances } = t0;
-	return resistances.some(_temp$12);
+	return resistances.some(_temp$13);
 }
-function _temp$12(t0) {
+function _temp$13(t0) {
 	const { value } = t0;
 	return value !== 1;
 }
@@ -4217,7 +4589,7 @@ function ResistanceBonus(t0) {
 				t3,
 				t4,
 				t5
-			].filter(_temp$11);
+			].filter(_temp$12);
 			const [first] = bonuses;
 			if (first === void 0) {
 				t6 = null;
@@ -4267,7 +4639,7 @@ function _temp2$7(t0) {
 		text
 	}, name);
 }
-function _temp$11(bonus) {
+function _temp$12(bonus) {
 	return bonus.value;
 }
 //#endregion
@@ -4370,14 +4742,14 @@ function SignatureSuppressor(t0) {
 			itemRef,
 			name: "signatureSuppressorSignatureRadiusBonusPassive",
 			decimals: 0,
-			format: _temp$10
+			format: _temp$11
 		});
 		$[0] = itemRef;
 		$[1] = t1;
 	} else t1 = $[1];
 	return t1;
 }
-function _temp$10(value, format) {
+function _temp$11(value, format) {
 	return percent((1 - value) * 100, format);
 }
 //#endregion
@@ -4480,7 +4852,7 @@ function StasisWebifier(props) {
 		t0 = {
 			of: props.itemRef,
 			decimals: 0,
-			format: _temp$9
+			format: _temp$10
 		};
 		$[0] = props.itemRef;
 		$[1] = t0;
@@ -4510,7 +4882,7 @@ function StasisWebifier(props) {
 	} else t3 = $[8];
 	return t3;
 }
-function _temp$9(value, format) {
+function _temp$10(value, format) {
 	return percent(-value, format);
 }
 //#endregion
@@ -5300,6 +5672,261 @@ function movesTo(fit, ref, rack, index) {
 	return "index" in item.slot && item.slot.index !== index;
 }
 //#endregion
+//#region src/components/FittingWheel/FittingAugmentations.tsx
+/** The implants and boosters of the fit, on tracks outside the wheel. */
+function FittingAugmentations(t0) {
+	const $ = c(16);
+	const { readOnly } = t0;
+	const implants = useImplants();
+	const boosters = useBoosters();
+	let t1;
+	if ($[0] !== implants || $[1] !== readOnly) {
+		t1 = !readOnly || implants.some(_temp$9);
+		$[0] = implants;
+		$[1] = readOnly;
+		$[2] = t1;
+	} else t1 = $[2];
+	const showImplants = t1;
+	let t2;
+	if ($[3] !== boosters || $[4] !== readOnly) {
+		t2 = readOnly ? [...boosters] : [...boosters, void 0];
+		$[3] = boosters;
+		$[4] = readOnly;
+		$[5] = t2;
+	} else t2 = $[5];
+	const boosterSlots = t2;
+	let t3;
+	if ($[6] !== implants || $[7] !== readOnly || $[8] !== showImplants) {
+		t3 = showImplants && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WheelAugmentationTrack, {
+			kind: "implant",
+			length: implants.length
+		}), implants.map((content, position) => /* @__PURE__ */ jsx(FittingAugmentation, {
+			kind: "implant",
+			position,
+			number: content.index,
+			content,
+			readOnly
+		}, content.index))] });
+		$[6] = implants;
+		$[7] = readOnly;
+		$[8] = showImplants;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== boosterSlots || $[11] !== readOnly) {
+		t4 = boosterSlots.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WheelAugmentationTrack, {
+			kind: "booster",
+			length: boosterSlots.length
+		}), boosterSlots.map((content_0, position_0) => /* @__PURE__ */ jsx(FittingAugmentation, {
+			kind: "booster",
+			position: position_0,
+			content: content_0,
+			readOnly
+		}, content_0?.index ?? "empty"))] });
+		$[10] = boosterSlots;
+		$[11] = readOnly;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+function _temp$9(slot) {
+	return slot.item !== void 0;
+}
+function FittingAugmentation(t0) {
+	const $ = c(60);
+	const { kind, position, number, content, readOnly } = t0;
+	const store = useFitStore();
+	const sde = useSde();
+	const placement = usePlacement();
+	const { show, clear } = usePreview();
+	const { dragging, start, end } = useDrag();
+	const item = content?.item;
+	const type = useType(item?.type_id);
+	const ref = content?.ref;
+	const target = `${kind}-${content?.index ?? "empty"}`;
+	let t1;
+	if ($[0] !== kind || $[1] !== number) {
+		t1 = number === void 0 ? void 0 : {
+			type: kind,
+			index: number
+		};
+		$[0] = kind;
+		$[1] = number;
+		$[2] = t1;
+	} else t1 = $[2];
+	const slot = t1;
+	let t2;
+	if ($[3] !== kind || $[4] !== number || $[5] !== placement || $[6] !== sde) {
+		t2 = (drop) => {
+			if (drop?.type !== "type") return false;
+			const dropped = sde.type(drop.typeId);
+			const place = dropped && placement(dropped);
+			return place?.type === kind && (number === void 0 || place.index === number);
+		};
+		$[3] = kind;
+		$[4] = number;
+		$[5] = placement;
+		$[6] = sde;
+		$[7] = t2;
+	} else t2 = $[7];
+	const takes = t2;
+	let t3;
+	if ($[8] !== content || $[9] !== item || $[10] !== kind || $[11] !== type) {
+		t3 = item && type && !content.preview && /* @__PURE__ */ jsxs("span", {
+			className: ModuleTooltip_module_default.tooltip,
+			children: [/* @__PURE__ */ jsx(TypeRow, { typeId: item.type_id }), /* @__PURE__ */ jsx("span", {
+				className: ModuleTooltip_module_default.status,
+				children: `${kind === "implant" ? "Implant" : "Booster"} Slot ${content.index}`
+			})]
+		});
+		$[8] = content;
+		$[9] = item;
+		$[10] = kind;
+		$[11] = type;
+		$[12] = t3;
+	} else t3 = $[12];
+	const tooltip = t3;
+	const t4 = item?.type_id;
+	const t5 = type?.name;
+	const t6 = content?.preview;
+	const t7 = slot === void 0 ? void 0 : `${kind}-${number}`;
+	let t8;
+	if ($[13] !== kind || $[14] !== number || $[15] !== position || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7 || $[20] !== tooltip) {
+		t8 = {
+			kind,
+			position,
+			number,
+			typeId: t4,
+			typeName: t5,
+			preview: t6,
+			tooltip,
+			"data-slot": t7
+		};
+		$[13] = kind;
+		$[14] = number;
+		$[15] = position;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = tooltip;
+		$[21] = t8;
+	} else t8 = $[21];
+	const shown = t8;
+	if (readOnly) {
+		let t9;
+		if ($[22] !== shown) {
+			t9 = /* @__PURE__ */ jsx(WheelAugmentationSlot, { ...shown });
+			$[22] = shown;
+			$[23] = t9;
+		} else t9 = $[23];
+		return t9;
+	}
+	let t9;
+	if ($[24] !== ref || $[25] !== start || $[26] !== type?.name) {
+		t9 = ref === void 0 ? void 0 : (event) => {
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", type?.name ?? "");
+			start({
+				type: "item",
+				ref
+			});
+		};
+		$[24] = ref;
+		$[25] = start;
+		$[26] = type?.name;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== dragging || $[29] !== show || $[30] !== slot || $[31] !== takes || $[32] !== target) {
+		t10 = () => {
+			if (!takes(dragging)) return;
+			const { typeId } = dragging;
+			show((draft) => void draft.fit(typeId, slot), target);
+		};
+		$[28] = dragging;
+		$[29] = show;
+		$[30] = slot;
+		$[31] = takes;
+		$[32] = target;
+		$[33] = t10;
+	} else t10 = $[33];
+	let t11;
+	if ($[34] !== clear || $[35] !== target) {
+		t11 = (event_0) => {
+			if (event_0.currentTarget.contains(event_0.relatedTarget)) return;
+			clear(target);
+		};
+		$[34] = clear;
+		$[35] = target;
+		$[36] = t11;
+	} else t11 = $[36];
+	let t12;
+	if ($[37] !== dragging || $[38] !== takes) {
+		t12 = (event_1) => {
+			if (takes(dragging)) allowDrop(event_1, dragging);
+		};
+		$[37] = dragging;
+		$[38] = takes;
+		$[39] = t12;
+	} else t12 = $[39];
+	let t13;
+	if ($[40] !== clear || $[41] !== dragging || $[42] !== end || $[43] !== slot || $[44] !== store || $[45] !== takes || $[46] !== target) {
+		t13 = (event_2) => {
+			if (!takes(dragging)) return;
+			event_2.preventDefault();
+			clear(target);
+			store.fit(dragging.typeId, slot);
+			end();
+		};
+		$[40] = clear;
+		$[41] = dragging;
+		$[42] = end;
+		$[43] = slot;
+		$[44] = store;
+		$[45] = takes;
+		$[46] = target;
+		$[47] = t13;
+	} else t13 = $[47];
+	let t14;
+	if ($[48] !== ref || $[49] !== store) {
+		t14 = ref === void 0 ? void 0 : () => store.remove(ref);
+		$[48] = ref;
+		$[49] = store;
+		$[50] = t14;
+	} else t14 = $[50];
+	let t15;
+	if ($[51] !== end || $[52] !== shown || $[53] !== t10 || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t9) {
+		t15 = /* @__PURE__ */ jsx(WheelAugmentationSlot, {
+			...shown,
+			onDragStart: t9,
+			onDragEnd: end,
+			onDragEnter: t10,
+			onDragLeave: t11,
+			onDragOver: t12,
+			onDrop: t13,
+			onUnfit: t14
+		});
+		$[51] = end;
+		$[52] = shown;
+		$[53] = t10;
+		$[54] = t11;
+		$[55] = t12;
+		$[56] = t13;
+		$[57] = t14;
+		$[58] = t9;
+		$[59] = t15;
+	} else t15 = $[59];
+	return t15;
+}
+//#endregion
 //#region src/components/FittingWheel/FittingWheel.module.css
 var FittingWheel_module_default = { "centre": "GK_wGG_centre" };
 //#endregion
@@ -5318,7 +5945,7 @@ const racks = [
 ];
 /** The fitting wheel of the fit in the surrounding `EveShipFitProvider`. */
 function FittingWheel(t0) {
-	const $ = c(24);
+	const $ = c(28);
 	const { label: t1, readOnly: t2, hideStats: t3, credit: t4 } = t0;
 	const label = t1 === void 0 ? "Fitting" : t1;
 	const readOnly = t2 === void 0 ? false : t2;
@@ -5326,6 +5953,7 @@ function FittingWheel(t0) {
 	const credit = t4 === void 0 ? false : t4;
 	const ship = useFit().ship.type_id;
 	const { turret, launcher } = useHardpoints();
+	const { structure } = useStats();
 	let t5;
 	if ($[0] !== ship) {
 		t5 = /* @__PURE__ */ jsx(WheelHull, { typeId: ship });
@@ -5359,8 +5987,15 @@ function FittingWheel(t0) {
 		$[8] = t9;
 	} else t9 = $[8];
 	let t10;
-	if ($[9] !== hideStats || $[10] !== launcher || $[11] !== turret) {
-		t10 = !hideStats && /* @__PURE__ */ jsxs(Fragment, { children: [
+	if ($[9] !== readOnly || $[10] !== structure) {
+		t10 = !structure && /* @__PURE__ */ jsx(FittingAugmentations, { readOnly });
+		$[9] = readOnly;
+		$[10] = structure;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== hideStats || $[13] !== launcher || $[14] !== turret) {
+		t11 = !hideStats && /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(WheelHardpoints, {
 				turrets: turret,
 				launchers: launcher
@@ -5381,20 +6016,20 @@ function FittingWheel(t0) {
 				output: "upgradeCapacity"
 			})
 		] });
-		$[9] = hideStats;
-		$[10] = launcher;
-		$[11] = turret;
-		$[12] = t10;
-	} else t10 = $[12];
-	let t11;
-	if ($[13] !== credit) {
-		t11 = credit ? /* @__PURE__ */ jsx(EveShipFitLink, { text: "generated by eveship.fit" }) : !onEveShipFit() && /* @__PURE__ */ jsx(EveShipFitLink, {});
-		$[13] = credit;
-		$[14] = t11;
-	} else t11 = $[14];
+		$[12] = hideStats;
+		$[13] = launcher;
+		$[14] = turret;
+		$[15] = t11;
+	} else t11 = $[15];
 	let t12;
-	if ($[15] !== hideStats || $[16] !== label || $[17] !== t10 || $[18] !== t11 || $[19] !== t5 || $[20] !== t6 || $[21] !== t8 || $[22] !== t9) {
-		t12 = /* @__PURE__ */ jsxs(Wheel, {
+	if ($[16] !== credit) {
+		t12 = credit ? /* @__PURE__ */ jsx(EveShipFitLink, { text: "generated by eveship.fit" }) : !onEveShipFit() && /* @__PURE__ */ jsx(EveShipFitLink, {});
+		$[16] = credit;
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== hideStats || $[19] !== label || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t5 || $[24] !== t6 || $[25] !== t8 || $[26] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(Wheel, {
 			label,
 			hideScales: hideStats,
 			children: [
@@ -5404,20 +6039,22 @@ function FittingWheel(t0) {
 				t8,
 				t9,
 				t10,
-				t11
+				t11,
+				t12
 			]
 		});
-		$[15] = hideStats;
-		$[16] = label;
-		$[17] = t10;
-		$[18] = t11;
-		$[19] = t5;
-		$[20] = t6;
-		$[21] = t8;
-		$[22] = t9;
-		$[23] = t12;
-	} else t12 = $[23];
-	return t12;
+		$[18] = hideStats;
+		$[19] = label;
+		$[20] = t10;
+		$[21] = t11;
+		$[22] = t12;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
 }
 function _temp$8(rack) {
 	return /* @__PURE__ */ jsx(WheelRackMarker, { rack }, rack);
@@ -8955,6 +9592,47 @@ function TypeGroup(t0) {
 	} else t4 = $[9];
 	return t4;
 }
+/** A market group of an already sorted tree: its groups, then its types. */
+function MarketGroup(t0) {
+	const $ = c(11);
+	const { node, actions } = t0;
+	const marketGroupIcon = useMarketGroupIcon();
+	const t1 = node.group.name;
+	let t2;
+	if ($[0] !== marketGroupIcon || $[1] !== node.group.id) {
+		t2 = marketGroupIcon(node.group.id);
+		$[0] = marketGroupIcon;
+		$[1] = node.group.id;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== actions || $[4] !== node.children || $[5] !== node.types) {
+		t3 = () => /* @__PURE__ */ jsxs(Fragment, { children: [node.children.map((child) => /* @__PURE__ */ jsx(MarketGroup, {
+			node: child,
+			actions
+		}, child.group.id)), node.types.map((type) => /* @__PURE__ */ jsx(TypeLeaf, {
+			type,
+			actions
+		}, type.id))] });
+		$[3] = actions;
+		$[4] = node.children;
+		$[5] = node.types;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== node.group.name || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TreeGroup, {
+			label: t1,
+			icon: t2,
+			children: t3
+		});
+		$[7] = node.group.name;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
 /** Search results by root market group; a lone root shows only its types. */
 function SearchResults(t0) {
 	const $ = c(8);
@@ -9124,7 +9802,7 @@ function Charges() {
 				}) : matches !== void 0 ? /* @__PURE__ */ jsx(SearchResults, {
 					roots: found,
 					actions
-				}) : groups.map((node) => /* @__PURE__ */ jsx(ChargeGroup, {
+				}) : groups.map((node) => /* @__PURE__ */ jsx(MarketGroup, {
 					node,
 					actions
 				}, node.group.id))
@@ -9156,46 +9834,6 @@ function Charges() {
 	} else t11 = $[47];
 	return t11;
 }
-function ChargeGroup(t0) {
-	const $ = c(11);
-	const { node, actions } = t0;
-	const marketGroupIcon = useMarketGroupIcon();
-	const t1 = node.group.name;
-	let t2;
-	if ($[0] !== marketGroupIcon || $[1] !== node.group.id) {
-		t2 = marketGroupIcon(node.group.id);
-		$[0] = marketGroupIcon;
-		$[1] = node.group.id;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== actions || $[4] !== node.children || $[5] !== node.types) {
-		t3 = () => /* @__PURE__ */ jsxs(Fragment, { children: [node.children.map((child) => /* @__PURE__ */ jsx(ChargeGroup, {
-			node: child,
-			actions
-		}, child.group.id)), node.types.map((type) => /* @__PURE__ */ jsx(TypeLeaf, {
-			type,
-			actions
-		}, type.id))] });
-		$[3] = actions;
-		$[4] = node.children;
-		$[5] = node.types;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== node.group.name || $[8] !== t2 || $[9] !== t3) {
-		t4 = /* @__PURE__ */ jsx(TreeGroup, {
-			label: t1,
-			icon: t2,
-			children: t3
-		});
-		$[7] = node.group.name;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
-}
 //#endregion
 //#region src/components/ItemBrowser/FitActions.tsx
 const FLASH_MS = 2e3;
@@ -10287,6 +10925,96 @@ function raceName(race) {
 	return race === "other" ? "Non-Empire" : race.charAt(0).toUpperCase() + race.slice(1);
 }
 //#endregion
+//#region src/components/ItemBrowser/Implants.tsx
+/** The Implants tab of the `ItemBrowser`: implants and boosters by market group. */
+function Implants() {
+	const $ = c(22);
+	const { actions, clear, dragImage } = useTypeActions();
+	const [search, setSearch] = useState("");
+	const [collapses, setCollapses] = useState(0);
+	let t0;
+	if ($[0] !== search) {
+		t0 = search.trim().toLowerCase();
+		$[0] = search;
+		$[1] = t0;
+	} else t0 = $[1];
+	const query = t0;
+	let t1;
+	if ($[2] !== query) {
+		t1 = query === "" ? void 0 : (type) => type.name.toLowerCase().includes(query);
+		$[2] = query;
+		$[3] = t1;
+	} else t1 = $[3];
+	const matches = t1;
+	const groups = useImplantTree();
+	const found = useImplantSearch(matches);
+	let t2;
+	if ($[4] !== clear) {
+		t2 = (value) => {
+			clear();
+			setSearch(value);
+		};
+		$[4] = clear;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== collapses) {
+		t3 = () => setCollapses(collapses + 1);
+		$[6] = collapses;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== search || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Search, {
+			value: search,
+			onChange: t2,
+			onCollapse: t3
+		});
+		$[8] = search;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== actions || $[13] !== collapses || $[14] !== found || $[15] !== groups || $[16] !== matches) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: ItemBrowser_module_default.tree,
+			children: matches !== void 0 && found.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: ItemBrowser_module_default.empty,
+				children: "No implants found"
+			}) : /* @__PURE__ */ jsx(TreeList, {
+				label: "Implants",
+				children: matches !== void 0 ? /* @__PURE__ */ jsx(SearchResults, {
+					roots: found,
+					actions
+				}) : groups.map((node) => /* @__PURE__ */ jsx(MarketGroup, {
+					node,
+					actions
+				}, node.group.id))
+			}, collapses)
+		});
+		$[12] = actions;
+		$[13] = collapses;
+		$[14] = found;
+		$[15] = groups;
+		$[16] = matches;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== dragImage || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t4,
+			t5,
+			dragImage
+		] });
+		$[18] = dragImage;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}
+//#endregion
 //#region src/components/ItemBrowser/Modules.tsx
 const slotFilters = [
 	{
@@ -10522,9 +11250,9 @@ function _temp$2() {
 }
 //#endregion
 //#region src/components/ItemBrowser/ItemBrowser.tsx
-/** EVE's browser of hulls and fits, modules and charges, left of the fitting wheel. */
+/** EVE's browser of hulls and fits, modules, charges, and implants, left of the fitting wheel. */
 function ItemBrowser(t0) {
-	const $ = c(15);
+	const $ = c(16);
 	const { label: t1 } = t0;
 	const label = t1 === void 0 ? "Item Browser" : t1;
 	const [tab, setTab] = useState("hulls");
@@ -10550,21 +11278,31 @@ function ItemBrowser(t0) {
 	} else t3 = $[1];
 	let t4;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = [
+		t4 = {
+			tab: "charges",
+			label: "Charges",
+			panel: /* @__PURE__ */ jsx(Charges, {})
+		};
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = [
 			t2,
 			t3,
+			t4,
 			{
-				tab: "charges",
-				label: "Charges",
-				panel: /* @__PURE__ */ jsx(Charges, {})
+				tab: "implants",
+				label: "Implants",
+				panel: /* @__PURE__ */ jsx(Implants, {})
 			}
 		];
-		$[2] = t4;
-	} else t4 = $[2];
-	const tabs = t4;
-	let t5;
-	if ($[3] !== id || $[4] !== tab) {
-		t5 = /* @__PURE__ */ jsx("div", {
+		$[3] = t5;
+	} else t5 = $[3];
+	const tabs = t5;
+	let t6;
+	if ($[4] !== id || $[5] !== tab) {
+		t6 = /* @__PURE__ */ jsx("div", {
 			className: ItemBrowser_module_default.tabs,
 			role: "tablist",
 			children: tabs.map((each) => /* @__PURE__ */ jsx("button", {
@@ -10578,13 +11316,13 @@ function ItemBrowser(t0) {
 				children: each.label
 			}, each.tab))
 		});
-		$[3] = id;
-		$[4] = tab;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== id || $[7] !== ready || $[8] !== tab) {
-		t6 = tabs.map((each_0) => /* @__PURE__ */ jsx("div", {
+		$[4] = id;
+		$[5] = tab;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== id || $[8] !== ready || $[9] !== tab) {
+		t7 = tabs.map((each_0) => /* @__PURE__ */ jsx("div", {
 			id: `${id}-${each_0.tab}-panel`,
 			className: ItemBrowser_module_default.panel,
 			role: "tabpanel",
@@ -10598,33 +11336,33 @@ function ItemBrowser(t0) {
 				children: "Loading…"
 			})
 		}, each_0.tab));
-		$[6] = id;
-		$[7] = ready;
-		$[8] = tab;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(FitActions, {});
+		$[7] = id;
+		$[8] = ready;
+		$[9] = tab;
 		$[10] = t7;
 	} else t7 = $[10];
 	let t8;
-	if ($[11] !== label || $[12] !== t5 || $[13] !== t6) {
-		t8 = /* @__PURE__ */ jsxs("section", {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(FitActions, {});
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== label || $[13] !== t6 || $[14] !== t7) {
+		t9 = /* @__PURE__ */ jsxs("section", {
 			className: ItemBrowser_module_default.browser,
 			"aria-label": label,
 			children: [
-				t5,
 				t6,
-				t7
+				t7,
+				t8
 			]
 		});
-		$[11] = label;
-		$[12] = t5;
+		$[12] = label;
 		$[13] = t6;
-		$[14] = t8;
-	} else t8 = $[14];
-	return t8;
+		$[14] = t7;
+		$[15] = t9;
+	} else t9 = $[15];
+	return t9;
 }
 //#endregion
 //#region src/components/ShipStatistics/ShipStatistics.module.css