diff --git a/package-lock.json b/package-lock.json
index 1aa46b8..b013f5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "stellarmaps",
-	"version": "0.12.0",
+	"version": "0.13.0-dev",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "stellarmaps",
-			"version": "0.12.0",
+			"version": "0.13.0-dev",
 			"dependencies": {
 				"@electron-toolkit/preload": "^3.0.1",
 				"@electron-toolkit/utils": "^3.0.0",
@@ -85,6 +85,7 @@
 				"svelte-eslint-parser": "^0.34.1",
 				"tailwindcss": "^3.4.3",
 				"typescript": "^5.4.5",
+				"utility-types": "^3.11.0",
 				"vite": "^5.2.8"
 			}
 		},
@@ -13262,6 +13263,15 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/utility-types": {
+			"version": "3.11.0",
+			"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+			"integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4"
+			}
+		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/package.json b/package.json
index 8ae691a..bc2bcf4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
 		"vite:build": "vite build",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
-		"lint": "eslint . --ext .ts",
+		"lint": "eslint . --ext .ts,.svelte",
 		"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
 		"svelte-check": "svelte-check --tsconfig ./tsconfig.json",
 		"typecheck": "npm run typecheck:node && npm run svelte-check",
@@ -68,6 +68,7 @@
 		"svelte-eslint-parser": "^0.34.1",
 		"tailwindcss": "^3.4.3",
 		"typescript": "^5.4.5",
+		"utility-types": "^3.11.0",
 		"vite": "^5.2.8"
 	},
 	"dependencies": {
diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte
index c885dc8..513ff7b 100644
--- a/src/renderer/src/App.svelte
+++ b/src/renderer/src/App.svelte
@@ -1,24 +1,26 @@
 <script>
+	import './app.postcss';
+
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 	import {
 		AppBar,
 		AppShell,
-		Modal,
-		Toast,
 		getModalStore,
 		initializeStores,
+		Modal,
 		storePopup,
+		Toast,
 	} from '@skeletonlabs/skeleton';
-	import './app.postcss';
+
 	import { t } from './intl';
 	import AppSettingsModal from './lib/AppSettingsModal.svelte';
 	import ExportModal from './lib/ExportModal.svelte';
-	import Sidebar from './lib/Sidebar.svelte';
-	import VersionInfo from './lib/VersionInfo.svelte';
 	import Discord from './lib/icons/Discord.svelte';
 	import GitHub from './lib/icons/GitHub.svelte';
 	import HeroiconCog6ToothSolid from './lib/icons/HeroiconCog6ToothSolid.svelte';
 	import MapContainer from './lib/map/MapContainer.svelte';
+	import Sidebar from './lib/Sidebar.svelte';
+	import VersionInfo from './lib/VersionInfo.svelte';
 
 	initializeStores();
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
diff --git a/src/renderer/src/lib/AppSettingsModal.svelte b/src/renderer/src/lib/AppSettingsModal.svelte
index d54164f..b61c14d 100644
--- a/src/renderer/src/lib/AppSettingsModal.svelte
+++ b/src/renderer/src/lib/AppSettingsModal.svelte
@@ -1,11 +1,13 @@
 <script>
 	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
+
 	import { t, translatorModeExtraMessageIDs, translatorModeUntranslatedMessageIDs } from '../intl';
 	import SettingControl from './SettingControl/index.svelte';
 	import { appSettings, appSettingsConfig, asUnknownSettingConfig } from './settings';
 	import { selectTranslatorModeFile, translatorModeFilePath } from './translatorMode';
 
-	const _props = $$props; // this suppresses warning about unknown prop 'parent'
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- this suppresses warning about unknown prop 'parent'
+	const _props = $$props;
 
 	const modalStore = getModalStore();
 	const toastStore = getToastStore();
@@ -38,7 +40,7 @@
 			{:else}
 				<small>{$t('app_settings.translator_mode_no_file')}</small>
 			{/if}
-			{#if $translatorModeFilePath && $translatorModeUntranslatedMessageIDs.length > 0}
+			{#if $translatorModeFilePath != null && $translatorModeUntranslatedMessageIDs.length > 0}
 				<strong class="block text-warning-400">
 					{$t('app_settings.translator_mode_untranslated_messages', {
 						number: $translatorModeUntranslatedMessageIDs.length,
diff --git a/src/renderer/src/lib/ExportModal.svelte b/src/renderer/src/lib/ExportModal.svelte
index 90ffb03..50afaa3 100644
--- a/src/renderer/src/lib/ExportModal.svelte
+++ b/src/renderer/src/lib/ExportModal.svelte
@@ -1,26 +1,28 @@
 <script lang="ts">
 	import {
-		RangeSlider,
-		SlideToggle,
 		getModalStore,
 		getToastStore,
 		localStorageStore,
+		RangeSlider,
+		SlideToggle,
 	} from '@skeletonlabs/skeleton';
 	import { onDestroy } from 'svelte';
+
 	import { t } from '../intl';
-	import type { GalacticObject, GameState } from './GameState';
 	import convertBlobToDataUrl from './convertBlobToDataUrl';
 	import convertSvgToPng from './convertSvgToPng';
-	import Legend from './map/Legend.svelte';
+	import type { GalacticObject, GameState } from './GameState';
 	import type { MapData } from './map/data/processMapData';
+	import Legend from './map/Legend.svelte';
 	import { getBackgroundColor, getFillColorAttributes, resolveColor } from './map/mapUtils';
 	import SolarSystemMap from './map/solarSystemMap/SolarSystemMap.svelte';
 	import processStarScape from './map/starScape/renderStarScape';
-	import { mapSettings, type MapSettings } from './settings';
+	import { type MapSettings, mapSettings } from './settings';
 	import stellarMapsApi from './stellarMapsApi';
 	import { toastError } from './utils';
 
-	const _props = $$props; // this suppresses warning about unknown prop 'parent'
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- this suppresses warning about unknown prop 'parent'
+	const _props = $$props;
 	const modalStore = getModalStore();
 	const toastStore = getToastStore();
 	const galaxyMapSvg: SVGElement = $modalStore[0]?.meta?.svg;
@@ -52,7 +54,7 @@
 	});
 	onDestroy(() => {
 		solarSystemMap?.$destroy();
-		legend?.$destroy();
+		legend.$destroy();
 	});
 
 	const defaultExportSettings = {
@@ -140,7 +142,7 @@
 
 	async function exportPng() {
 		const backgroundImageUrl =
-			openedSystem || !hasBackgroundImage($mapSettings)
+			openedSystem != null || !hasBackgroundImage($mapSettings)
 				? undefined
 				: await processStarScape(
 						gameState,
@@ -190,7 +192,7 @@
 			),
 			filters: [{ extensions: ['png'], name: 'Image' }],
 		});
-		if (savePath && galaxyMapSvg) {
+		if (savePath != null) {
 			await stellarMapsApi.fs.writeBinaryFile(savePath, new Uint8Array(buffer)).then(() => {
 				toastStore.trigger({
 					background: 'variant-filled-success',
@@ -272,7 +274,7 @@
 				.catch(() => ''),
 			filters: [{ extensions: ['svg'], name: 'Image' }],
 		});
-		if (savePath && svgToExport) {
+		if (savePath != null) {
 			await stellarMapsApi.fs.writeFile(savePath, svgString).then(() => {
 				toastStore.trigger({
 					background: 'variant-filled-success',
diff --git a/src/renderer/src/lib/SettingControl/ColorSettingAdjustmentControl.svelte b/src/renderer/src/lib/SettingControl/ColorSettingAdjustmentControl.svelte
index c519a16..2ca98f7 100644
--- a/src/renderer/src/lib/SettingControl/ColorSettingAdjustmentControl.svelte
+++ b/src/renderer/src/lib/SettingControl/ColorSettingAdjustmentControl.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { fly } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import HeroiconTrashMini from '../icons/HeroiconTrashMini.svelte';
 	import {
diff --git a/src/renderer/src/lib/SettingControl/ColorSettingControl.svelte b/src/renderer/src/lib/SettingControl/ColorSettingControl.svelte
index 2c882b9..c402e1f 100644
--- a/src/renderer/src/lib/SettingControl/ColorSettingControl.svelte
+++ b/src/renderer/src/lib/SettingControl/ColorSettingControl.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+
 	import { t } from '../../intl';
 	import {
 		colorDynamicOptions,
@@ -71,7 +72,7 @@
 				{$t('control.color.adjustment.header')}
 				<div class="relative inline-block">
 					<span class="variant-filled-secondary badge-icon absolute left-0 top-[-14px]">
-						{value.colorAdjustments?.length ?? 0}
+						{value.colorAdjustments.length}
 					</span>
 				</div>
 			</svelte:fragment>
diff --git a/src/renderer/src/lib/SettingControl/IconSettingControl.svelte b/src/renderer/src/lib/SettingControl/IconSettingControl.svelte
index 2922bad..3bb3d2d 100644
--- a/src/renderer/src/lib/SettingControl/IconSettingControl.svelte
+++ b/src/renderer/src/lib/SettingControl/IconSettingControl.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+
 	import { t } from '../../intl';
 	import {
 		ICON_POSITIONS,
diff --git a/src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte b/src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte
index ac993b6..c1cd20f 100644
--- a/src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte
+++ b/src/renderer/src/lib/SettingControl/StrokeSettingControl.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Accordion, AccordionItem, popup } from '@skeletonlabs/skeleton';
 	import { fade } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import HeroiconInfoMini from '../icons/HeroiconInfoMini.svelte';
 	import type { SettingConfigStroke, StrokeSetting } from '../settings';
diff --git a/src/renderer/src/lib/SettingControl/index.svelte b/src/renderer/src/lib/SettingControl/index.svelte
index e8fb4e9..c1c9649 100644
--- a/src/renderer/src/lib/SettingControl/index.svelte
+++ b/src/renderer/src/lib/SettingControl/index.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-	import { RangeSlider, SlideToggle, popup } from '@skeletonlabs/skeleton';
+	import { popup, RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
 	import { onDestroy } from 'svelte';
 	import type { FormEventHandler } from 'svelte/elements';
 	import { get, type Readable, type Writable } from 'svelte/store';
 	import { slide } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import HeroiconInfoMini from '../icons/HeroiconInfoMini.svelte';
 	import {
 		asKnownSettingId,
 		emptyOptions,
-		validateSetting,
 		type SelectOption,
 		type UnknownSettingConfig,
+		validateSetting,
 	} from '../settings';
 	import { isDefined } from '../utils';
 	import ColorSettingControl from './ColorSettingControl.svelte';
@@ -53,7 +54,9 @@
 	$: hidden = config.hideIf?.($settings as any);
 
 	const dynamicOptions: Readable<SelectOption[]> =
-		config.type === 'select' && config.dynamicOptions ? config.dynamicOptions : emptyOptions;
+		config.type === 'select' && config.dynamicOptions != null
+			? config.dynamicOptions
+			: emptyOptions;
 
 	$: options = config.type === 'select' ? [...config.options, ...$dynamicOptions] : [];
 	$: groups = Array.from(new Set(options.map((option) => option.group).filter(isDefined)));
@@ -91,6 +94,7 @@
 					class="card variant-filled-secondary z-10 max-w-96 p-2 text-sm"
 					data-popup="{config.id}-tooltip"
 				>
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- this is safe, all tooltip text is provided by the app -->
 					{@html $t(config.tooltip, richTextHandlers)}
 					<div class="variant-filled-secondary arrow" />
 				</div>
@@ -146,7 +150,7 @@
 		{:else if config.type === 'toggle'}
 			<div>
 				<SlideToggle name={config.id} bind:checked={value} active="bg-primary-500">
-					{value ? $t('generic.enabled') : $t('generic.disabled')}
+					{value === true ? $t('generic.enabled') : $t('generic.disabled')}
 				</SlideToggle>
 			</div>
 		{:else if config.type === 'color'}
diff --git a/src/renderer/src/lib/Sidebar.svelte b/src/renderer/src/lib/Sidebar.svelte
index a1f67cb..7ddf9eb 100644
--- a/src/renderer/src/lib/Sidebar.svelte
+++ b/src/renderer/src/lib/Sidebar.svelte
@@ -2,20 +2,21 @@
 	import {
 		Accordion,
 		AccordionItem,
-		ListBox,
-		ListBoxItem,
 		getModalStore,
 		getToastStore,
+		ListBox,
+		ListBoxItem,
 		localStorageStore,
 		popup,
 	} from '@skeletonlabs/skeleton';
+
 	import { t } from '../intl';
 	import ApplyChangesButton from './ApplyChangesButton.svelte';
-	import { gameStatePromise, gameStateSchema } from './GameState';
-	import SettingControl from './SettingControl/index.svelte';
 	import debug from './debug';
+	import { gameStatePromise, gameStateSchema } from './GameState';
 	import HeroiconTrashMini from './icons/HeroiconTrashMini.svelte';
 	import { localizeText } from './map/data/locUtils';
+	import SettingControl from './SettingControl/index.svelte';
 	import {
 		applyMapSettings,
 		asUnknownSettingConfig,
@@ -26,9 +27,9 @@
 		mapSettings,
 		mapSettingsConfig,
 		presetMapSettings,
+		type SavedMapSettings,
 		settingsAreDifferent,
 		validateAndResetMapSettings,
-		type SavedMapSettings,
 	} from './settings';
 	import { speciesOptions } from './settings/options/speciesOptions';
 	import type { StellarisSaveMetadata } from './stellarMapsApi';
@@ -231,7 +232,7 @@
 		class="p-4"
 		on:submit|preventDefault={() => {
 			loadedSave = selectedSave;
-			if (selectedSave) {
+			if (selectedSave != null) {
 				loadSave(selectedSave.path);
 			}
 		}}
@@ -273,9 +274,9 @@
 		<button
 			type="submit"
 			class="variant-filled-primary btn w-full"
-			disabled={!selectedSave}
-			class:variant-filled-primary={selectedSave && selectedSave !== loadedSave}
-			class:variant-filled-surface={!selectedSave || selectedSave === loadedSave}
+			disabled={selectedSave == null}
+			class:variant-filled-primary={selectedSave != null && selectedSave !== loadedSave}
+			class:variant-filled-surface={selectedSave == null || selectedSave === loadedSave}
 		>
 			{$t('side_bar.load_save_button')}
 		</button>
@@ -336,6 +337,7 @@
 											body: $t('confirmation.delete_setting_profile', { name: saved.name }),
 											buttonTextConfirm: 'Delete',
 											response: (response) => {
+												// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions -- this is a boolean, but TS thinks any
 												if (response) {
 													customSavedSettings.update((prev) =>
 														prev.filter((other) => !(other.name === saved.name)),
diff --git a/src/renderer/src/lib/actions/resizeObserver.ts b/src/renderer/src/lib/actions/resizeObserver.ts
new file mode 100644
index 0000000..7a6d62e
--- /dev/null
+++ b/src/renderer/src/lib/actions/resizeObserver.ts
@@ -0,0 +1,17 @@
+import type { ActionReturn } from 'svelte/action';
+export default function resizeObserver(
+	node: HTMLElement,
+	callback: () => void,
+): ActionReturn<() => void> {
+	const callbackRef = { callback };
+	const resizeObserver = new ResizeObserver(() => callbackRef.callback());
+	resizeObserver.observe(node);
+	return {
+		update(updatedCallback) {
+			callbackRef.callback = updatedCallback;
+		},
+		destroy() {
+			resizeObserver.disconnect();
+		},
+	};
+}
diff --git a/src/renderer/src/lib/map/BypassLinks.svelte b/src/renderer/src/lib/map/BypassLinks.svelte
index 57b3187..5fd7583 100644
--- a/src/renderer/src/lib/map/BypassLinks.svelte
+++ b/src/renderer/src/lib/map/BypassLinks.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { mapSettings } from '../settings';
-	import Glow from './Glow.svelte';
 	import type { MapData } from './data/processMapData';
+	import Glow from './Glow.svelte';
 	import { getStrokeAttributes, getStrokeColorAttributes } from './mapUtils';
 	export let data: MapData;
 	export let colors: Record<string, string>;
diff --git a/src/renderer/src/lib/map/CountryBorders.svelte b/src/renderer/src/lib/map/CountryBorders.svelte
index df65abb..af4ed2c 100644
--- a/src/renderer/src/lib/map/CountryBorders.svelte
+++ b/src/renderer/src/lib/map/CountryBorders.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { match } from 'ts-pattern';
+
 	import { mapSettings } from '../settings';
-	import Glow from './Glow.svelte';
 	import type { SectorBorderPath } from './data/processBorders';
 	import type { MapData } from './data/processMapData';
+	import Glow from './Glow.svelte';
 	import {
 		getFillColorAttributes,
 		getStrokeAttributes,
diff --git a/src/renderer/src/lib/map/CountryLabels.svelte b/src/renderer/src/lib/map/CountryLabels.svelte
index a6e544a..fa21658 100644
--- a/src/renderer/src/lib/map/CountryLabels.svelte
+++ b/src/renderer/src/lib/map/CountryLabels.svelte
@@ -9,21 +9,21 @@
 {#each data.labels.filter((label) => label.isKnown || !$mapSettings.terraIncognita) as label}
 	{#each label.labelPoints as { point, emblemWidth, emblemHeight, textWidth, textHeight }}
 		{#if $debug}<circle cx={point[0]} cy={point[1]} r={3} fill="#F0F" />{/if}
-		{#if $debug && emblemWidth && emblemHeight}
+		{#if $debug && emblemWidth != null && emblemHeight != null}
 			<rect
 				stroke-width={1}
 				stroke="#F0F"
 				x={point[0] - emblemWidth / 2}
-				y={point[1] - (textHeight ? emblemHeight : emblemHeight / 2)}
+				y={point[1] - (textHeight != null ? emblemHeight : emblemHeight / 2)}
 				width={emblemWidth}
 				height={emblemHeight}
 				fill="transparent"
 			/>
 		{/if}
-		{#if emblemWidth && emblemHeight && label.emblemKey && data.emblems[label.emblemKey]}
+		{#if emblemWidth != null && emblemHeight != null && label.emblemKey != null && data.emblems[label.emblemKey]}
 			<image
 				x={point[0] - emblemWidth / 2}
-				y={point[1] - (textHeight ? emblemHeight : emblemHeight / 2)}
+				y={point[1] - (textHeight != null ? emblemHeight : emblemHeight / 2)}
 				width={emblemWidth}
 				height={emblemHeight}
 				xlink:href={data.emblems[label.emblemKey]}
@@ -31,7 +31,7 @@
 			{#if label.isUnionLeader && $mapSettings.unionLeaderSymbol !== 'none'}
 				<text
 					transform="translate({point[0]},{point[1] -
-						(textHeight ? emblemHeight : emblemHeight / 2)})"
+						(textHeight != null ? emblemHeight : emblemHeight / 2)})"
 					fill="white"
 					text-anchor="middle"
 					dominant-baseline="bottom"
@@ -41,21 +41,21 @@
 				</text>
 			{/if}
 		{/if}
-		{#if $debug && textWidth && textHeight}
+		{#if $debug && textWidth != null && textHeight != null}
 			<rect
 				stroke-width={1}
 				stroke="#F0F"
 				x={point[0] - textWidth / 2}
-				y={point[1] - (emblemHeight ? 0 : textHeight / 2)}
+				y={point[1] - (emblemHeight != null ? 0 : textHeight / 2)}
 				width={textWidth}
 				height={textHeight}
 				fill="transparent"
 			/>
 		{/if}
-		{#if textWidth && textHeight && label.primaryName}
+		{#if textWidth != null && textHeight != null && label.primaryName}
 			<text
 				x={point[0]}
-				y={point[1] + (emblemHeight ? textHeight / 2 : 0)}
+				y={point[1] + (emblemHeight != null ? textHeight / 2 : 0)}
 				text-anchor="middle"
 				dominant-baseline="middle"
 				font-size={textHeight}
@@ -71,11 +71,11 @@
 				{label.primaryName}
 			</text>
 		{/if}
-		{#if textWidth && textHeight && label.secondaryName}
+		{#if textWidth != null && textHeight != null && label.secondaryName}
 			<text
 				x={point[0]}
 				y={point[1] +
-					(emblemHeight ? textHeight / 2 : 0) +
+					(emblemHeight != null ? textHeight / 2 : 0) +
 					textHeight * ($lastProcessedMapSettings.countryNamesSecondaryRelativeSize ?? 1) * 1.25}
 				text-anchor="middle"
 				dominant-baseline="middle"
diff --git a/src/renderer/src/lib/map/Hyperlanes.svelte b/src/renderer/src/lib/map/Hyperlanes.svelte
index 4ab77f6..4d78048 100644
--- a/src/renderer/src/lib/map/Hyperlanes.svelte
+++ b/src/renderer/src/lib/map/Hyperlanes.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { isColorDynamic, mapSettings } from '../settings';
-	import Glow from './Glow.svelte';
 	import type { MapData } from './data/processMapData';
+	import Glow from './Glow.svelte';
 	import { getStrokeAttributes, getStrokeColorAttributes } from './mapUtils';
 
 	export let data: MapData;
diff --git a/src/renderer/src/lib/map/Legend.svelte b/src/renderer/src/lib/map/Legend.svelte
index e805fef..d407932 100644
--- a/src/renderer/src/lib/map/Legend.svelte
+++ b/src/renderer/src/lib/map/Legend.svelte
@@ -29,7 +29,7 @@
 		borderWidth * 2;
 </script>
 
-{#if data?.legend.items.length && $mapSettings.legend}
+{#if (data?.legend.items.length ?? 0) > 0 && $mapSettings.legend}
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -38,7 +38,7 @@
 		height="{height}px"
 	>
 		<defs>
-			{#if colors}
+			{#if colors && data}
 				<OccupationPatternDefs {colors} {data} />
 			{/if}
 			<Icons />
diff --git a/src/renderer/src/lib/map/Map.svelte b/src/renderer/src/lib/map/Map.svelte
index 5428ef8..41e001f 100644
--- a/src/renderer/src/lib/map/Map.svelte
+++ b/src/renderer/src/lib/map/Map.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { afterUpdate, createEventDispatcher } from 'svelte';
+
 	import debug from '../debug';
 	import { mapSettings } from '../settings';
 	import BypassLinks from './BypassLinks.svelte';
@@ -32,6 +33,7 @@
 </script>
 
 <svg {id} xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -- this is safe, since the content isn't truly dynamic -->
 	{@html fontFace}
 	<defs>
 		{#if data}
diff --git a/src/renderer/src/lib/map/MapContainer.svelte b/src/renderer/src/lib/map/MapContainer.svelte
index 08a7993..80e478c 100644
--- a/src/renderer/src/lib/map/MapContainer.svelte
+++ b/src/renderer/src/lib/map/MapContainer.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
 	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 	import { select } from 'd3-selection';
-	import { ZoomTransform, zoom, zoomIdentity } from 'd3-zoom';
+	import { zoom, zoomIdentity, ZoomTransform } from 'd3-zoom';
 	import { onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
+
 	import { t } from '../../intl';
 	import orbitronPath from '../../static/Orbitron-VariableFont_wght.ttf';
-	import { gameStatePromise, type GalacticObject, type GameState } from '../GameState';
+	import resizeObserver from '../actions/resizeObserver';
 	import { ADDITIONAL_COLORS } from '../colors';
 	import convertBlobToDataUrl from '../convertBlobToDataUrl';
 	import convertSvgToPng from '../convertSvgToPng';
 	import debug from '../debug';
+	import { type GalacticObject, type GameState, gameStatePromise } from '../GameState';
 	import HeroiconArrowsPointingOut from '../icons/HeroiconArrowsPointingOut.svelte';
 	import {
 		loadStellarisData,
@@ -26,11 +28,11 @@
 	} from '../settings';
 	import stellarMapsApi from '../stellarMapsApi';
 	import { debounce, timeItAsync, toastError } from '../utils';
+	import { mapModes } from './data/mapModes';
+	import processMapData from './data/processMapData';
 	import Legend from './Legend.svelte';
 	import Map from './Map.svelte';
 	import MapTooltip from './MapTooltip.svelte';
-	import { mapModes } from './data/mapModes';
-	import processMapData from './data/processMapData';
 	import { getBackgroundColor } from './mapUtils';
 	import SolarSystemMap from './solarSystemMap/SolarSystemMap.svelte';
 	import processStarScape from './starScape/renderStarScape';
@@ -140,7 +142,7 @@
 	}
 	map.$on('map-updated', () => renderMap());
 
-	let container: HTMLDivElement;
+	let container: HTMLDivElement | undefined;
 	let outputWidth = 0;
 	let outputHeight = 0;
 
@@ -151,7 +153,7 @@
 			resizing = false;
 		});
 	}, 250);
-	const resizeObserver = new ResizeObserver(() => {
+	const resizeCallback = () => {
 		tooltip = null;
 		resizing = true;
 		pngDataUrl = '';
@@ -163,14 +165,9 @@
 		lastRenderedTransformStarScapePngDataUrl = '';
 		lastRenderedTransformStarScape = null;
 		onResizeEnd();
-	});
-	$: if (container) {
-		resizeObserver.observe(container);
-	} else {
-		resizeObserver.disconnect();
-	}
+	};
 
-	let svg: SVGElement;
+	let svg: SVGElement | undefined;
 	let transform: ZoomTransform | null = null;
 	let lastRenderedTransform: ZoomTransform | null = null;
 	let lastRenderedTransformPngDataUrl = '';
@@ -209,9 +206,8 @@
 
 	let pngDataUrlPromise = Promise.resolve('');
 	async function renderMap(onlyRenderZoomed = false) {
-		if (!container) return;
-		outputWidth = container.clientWidth;
-		outputHeight = container.clientHeight;
+		outputWidth = container?.clientWidth ?? 0;
+		outputHeight = container?.clientHeight ?? 0;
 
 		let newPngDataUrlRequestId = (Math.random() * 1000000).toFixed(0);
 		pngDataUrlRequestId = newPngDataUrlRequestId;
@@ -305,7 +301,8 @@
 	}
 
 	const renderOnTransformChange = debounce(() => renderMap(true), 500);
-	$: if (transform || transform == null) {
+	// always true, just triggering reactivity
+	$: if (typeof transform === 'object') {
 		renderOnTransformChange();
 	}
 
@@ -337,25 +334,25 @@
 				viewBoxWidth *= outputWidth / outputHeight;
 			}
 			const svgPoint: [number, number] = [
-				((transform || zoomIdentity).invertX(e.offsetX) * viewBoxWidth) / outputWidth -
+				((transform ?? zoomIdentity).invertX(e.offsetX) * viewBoxWidth) / outputWidth -
 					viewBoxWidth / 2,
-				((transform || zoomIdentity).invertY(e.offsetY) * viewBoxHeight) / outputHeight -
+				((transform ?? zoomIdentity).invertY(e.offsetY) * viewBoxHeight) / outputHeight -
 					viewBoxHeight / 2,
 			];
 			const system = dataOrNull.findClosestSystem(-svgPoint[0], svgPoint[1]);
 			if (system) {
 				const countryId = dataOrNull.systemIdToCountry[system.id] ?? null;
 				const settings = get(mapSettings);
-				const processedSystem = dataOrNull?.systems.find((s) => s.id === system.id);
+				const processedSystem = dataOrNull.systems.find((s) => s.id === system.id);
 				if (processedSystem == null) {
 					tooltip = null;
 				} else {
 					const systemPoint: [number, number] = [processedSystem.x, processedSystem.y];
 					const tooltipPoint: [number, number] = [
-						(transform || zoomIdentity).applyX(
+						(transform ?? zoomIdentity).applyX(
 							((systemPoint[0] + viewBoxWidth / 2) * outputWidth) / viewBoxWidth,
 						),
-						(transform || zoomIdentity).applyY(
+						(transform ?? zoomIdentity).applyY(
 							((systemPoint[1] + viewBoxHeight / 2) * outputHeight) / viewBoxHeight,
 						),
 					];
@@ -392,7 +389,8 @@
 	function closeSystemMap() {
 		openedSystem = undefined;
 	}
-	$: if (gameStateOrNull || !gameStateOrNull) {
+	// always true, just triggering reactivity
+	$: if (typeof gameStateOrNull === 'object') {
 		closeSystemMap();
 	}
 
@@ -419,7 +417,12 @@
 	}
 </script>
 
-<div class="relative h-full w-full" style:background={bg} bind:this={container}>
+<div
+	class="relative h-full w-full"
+	style:background={bg}
+	bind:this={container}
+	use:resizeObserver={resizeCallback}
+>
 	{#if dataOrNull && colorsOrNull && openedSystem == null}
 		<div class="absolute left-3 top-3">
 			<Legend data={dataOrNull} colors={colorsOrNull}></Legend>
@@ -510,7 +513,8 @@
 			}}
 			on:click={onMapClick}
 			class:hidden={openedSystem != null}
-			class:cursor-pointer={(mapModes[$mapSettings.mapMode]?.hasPov && tooltip?.countryId) ||
+			class:cursor-pointer={(mapModes[$mapSettings.mapMode]?.hasPov &&
+				tooltip?.countryId != null) ??
 				(tooltip != null && !tooltip.hidden)}
 			class="h-full w-full"
 		>
diff --git a/src/renderer/src/lib/map/MapTooltip.svelte b/src/renderer/src/lib/map/MapTooltip.svelte
index 8f41af2..e1af778 100644
--- a/src/renderer/src/lib/map/MapTooltip.svelte
+++ b/src/renderer/src/lib/map/MapTooltip.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 	import { onDestroy, onMount } from 'svelte';
-	import { locale, t, type MessageID } from '../../intl';
+
+	import { locale, type MessageID, t } from '../../intl';
 	import type { GalacticObject, GameState, LocalizedText } from '../GameState';
 	import HeroiconUserMicro from '../icons/HeroiconUserMicro.svelte';
 	import { mapSettings } from '../settings';
@@ -44,7 +45,7 @@
 				top: arrowData?.y != null ? `${arrowData.y}px` : '',
 				right: '',
 				bottom: '',
-				...(staticSide ? { [staticSide]: '-5px' } : {}),
+				...(staticSide != null ? { [staticSide]: '-5px' } : {}),
 			});
 		});
 	}
@@ -56,9 +57,9 @@
 	onDestroy(() => cleanup?.());
 
 	$: planets = system.colonies
-		?.map((planetId) => gameState?.planets.planet[planetId])
+		.map((planetId) => gameState?.planets.planet[planetId])
 		.filter(isDefined)
-		.sort((a, b) => (b?.num_sapient_pops ?? 0) - (a?.num_sapient_pops ?? 0));
+		.sort((a, b) => (b.num_sapient_pops ?? 0) - (a.num_sapient_pops ?? 0));
 
 	async function localizeValueLabel(
 		message: MessageID | LocalizedText,
@@ -143,7 +144,7 @@
 			{/each}
 		</ul>
 	{/if}
-	{#if planets?.length}
+	{#if planets.length}
 		<strong class="mt-2 block">{$t('map.tooltip.colonies')}</strong>
 		<ul class="ps-4">
 			{#each planets as planet}
diff --git a/src/renderer/src/lib/map/OccupationPatternDefs.svelte b/src/renderer/src/lib/map/OccupationPatternDefs.svelte
index 8b162d1..f9e88ac 100644
--- a/src/renderer/src/lib/map/OccupationPatternDefs.svelte
+++ b/src/renderer/src/lib/map/OccupationPatternDefs.svelte
@@ -5,11 +5,6 @@
 
 	export let data: MapData;
 	export let colors: Record<string, string>;
-
-	$: fullOccupiers = data.occupationBorders.filter((b) => !b.partial).map((b) => b.occupier);
-	$: partialOccupiers = new Set(
-		data.occupationBorders.filter((b) => b.partial).map((b) => b.occupier),
-	);
 </script>
 
 <pattern
diff --git a/src/renderer/src/lib/map/SystemIcons.svelte b/src/renderer/src/lib/map/SystemIcons.svelte
index 019ebb4..67092db 100644
--- a/src/renderer/src/lib/map/SystemIcons.svelte
+++ b/src/renderer/src/lib/map/SystemIcons.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import * as d3Shape from 'd3-shape';
+	import type { PickByValue } from 'utility-types';
+
 	import {
-		mapSettings,
-		mapSettingsConfig,
 		type IconMapSettings,
 		type MapSettings,
+		mapSettings,
+		mapSettingsConfig,
 		type SettingConfigIcon,
 	} from '../settings';
 	import { mapModes } from './data/mapModes';
@@ -16,7 +18,7 @@
 	export let colors: Record<string, string>;
 
 	interface IconSettingMetadata {
-		systemProperty?: keyof ProcessedSystem;
+		systemProperty?: keyof PickByValue<ProcessedSystem, boolean>;
 		mustKnowOwner?: boolean;
 	}
 	const metadata: Record<IconMapSettings, IconSettingMetadata> = {
diff --git a/src/renderer/src/lib/map/data/processLabels.ts b/src/renderer/src/lib/map/data/processLabels.ts
index 0c13ed2..0a736d1 100644
--- a/src/renderer/src/lib/map/data/processLabels.ts
+++ b/src/renderer/src/lib/map/data/processLabels.ts
@@ -169,10 +169,14 @@ export default function processLabels(
 							}
 							return {
 								point: inverseX(pointFromGeoJSON(point)),
-								emblemWidth: emblemWidth != null ? emblemWidth * SCALE : null,
-								emblemHeight: emblemWidth != null ? emblemWidth * emblemAspectRatio * SCALE : null,
-								textWidth: textWidth != null ? textWidth * SCALE : null,
-								textHeight: textWidth != null ? textWidth * textAspectRatio * SCALE : null,
+								emblemWidth: emblemWidth != null && emblemWidth > 0 ? emblemWidth * SCALE : null,
+								emblemHeight:
+									emblemWidth != null && emblemWidth > 0
+										? emblemWidth * emblemAspectRatio * SCALE
+										: null,
+								textWidth: textWidth != null && textWidth > 0 ? textWidth * SCALE : null,
+								textHeight:
+									textWidth != null && textWidth > 0 ? textWidth * textAspectRatio * SCALE : null,
 							};
 						})
 				: [];
diff --git a/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte b/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte
index f3cbd96..79462e3 100644
--- a/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte
+++ b/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { select } from 'd3-selection';
 	import { zoom, zoomIdentity } from 'd3-zoom';
+
 	import { t } from '../../../intl';
 	import type { GalacticObject, GameState, Planet } from '../../GameState';
-	import { mapSettings, type MapSettings } from '../../settings';
+	import { type MapSettings, mapSettings } from '../../settings';
 	import { isDefined } from '../../utils';
 	import { localizeText } from '../data/locUtils';
 	import Glow from '../Glow.svelte';
@@ -21,7 +22,7 @@
 	let g: SVGGElement;
 	let zoomHandler = zoom()
 		.on('zoom', (e) => {
-			if (g) g.setAttribute('transform', e.transform.toString());
+			g.setAttribute('transform', e.transform.toString());
 		})
 		.filter(function filter(event: MouseEvent) {
 			// click and drag for middle button only
@@ -29,13 +30,11 @@
 			// this is the default implementation
 			return (!event.ctrlKey || event.type === 'wheel') && !event.button;
 		});
-	$: if (svg && !exportMode && !previewMode) {
+	$: if (!exportMode && !previewMode) {
 		select(svg).call(zoomHandler as any);
 	}
 	function resetZoom() {
-		if (svg) {
-			select(svg).call(zoomHandler.transform as any, zoomIdentity);
-		}
+		select(svg).call(zoomHandler.transform as any, zoomIdentity);
 	}
 
 	$: planets = system.planet
@@ -518,7 +517,7 @@
 			{#if isStar(planet)}
 				<Glow enabled filterId="starGlow" let:filter>
 					<circle
-						fill={isBlackHole(planet) && filter ? '#FFFFFF' : getPlanetColor(planet)}
+						fill={isBlackHole(planet) && filter !== '' ? '#FFFFFF' : getPlanetColor(planet)}
 						r={getPlanetRadius(planet, $mapSettings)}
 						cx={-planet.coordinate.x}
 						cy={planet.coordinate.y}