chore: release version v1.44.1

* fix(Map): Fixed problem with windows.

* fix(Core): Added min heigth for body

---------

Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai>
Co-authored-by: Dmitry Popov <dmitriypopovsamara@gmail.com>

.env.example

@@ -6,3 +6,5 @@ export EVE_CLIENT_WITH_WALLET_ID="<EVE_CLIENT_WITH_WALLET_ID>"
 export EVE_CLIENT_WITH_WALLET_SECRET="<EVE_CLIENT_WITH_WALLET_SECRET>"
 export GIT_SHA="1111"
 export WANDERER_INVITES="false"
+export WANDERER_PUBLIC_API_DISABLED="false"
+export WANDERER_ZKILL_PRELOAD_DISABLED="false"

.github/workflows/build.yml

@@ -78,22 +78,23 @@ jobs:
           fetch-depth: 0
       - name: 😅 Cache deps
         id: cache-deps
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-elixir-deps
         with:
-          path: deps
-          key: ${{ runner.os }}-mix-${{ env.cache-name }}-${{ hashFiles('**/mix.lock') }}
+          path: |
+            deps
+          key: ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-${{ hashFiles('**/mix.lock') }}
           restore-keys: |
-            ${{ runner.os }}-mix-${{ env.cache-name }}-
+            ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-
       - name: 😅 Cache compiled build
         id: cache-build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-compiled-build
         with:
           path: |
-            **/_build
+            _build
           key: ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-${{ hashFiles( '**/lib/**/*.{ex,eex}', '**/config/*.exs', '**/mix.exs' ) }}
           restore-keys: |
             ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-
@@ -122,6 +123,9 @@ jobs:
     name: 🛠 Build Docker Images
     needs: build
     runs-on: ubuntu-22.04
+    outputs:
+      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
+      release-notes: ${{ steps.get-content.outputs.string }}
     permissions:
       checks: write
       contents: write
@@ -135,6 +139,7 @@ jobs:
       matrix:
         platform:
           - linux/amd64
+          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -183,15 +188,28 @@ jobs:
           push: true
           context: .
           file: ./Dockerfile
-          tags: ${{ env.REGISTRY_IMAGE }}:latest,${{ env.REGISTRY_IMAGE }}:${{ steps.get-latest-tag.outputs.tag }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           labels: ${{ steps.meta.outputs.labels }}
           platforms: ${{ matrix.platform }}
+          outputs: type=image,"name=${{ env.REGISTRY_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
           build-args: |
             MIX_ENV=prod
             BUILD_METADATA=${{ steps.meta.outputs.json }}
 
-      - name: Image digest
-        run: echo ${{ steps.build.outputs.digest }}
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
 
       - uses: markpatterson27/markdown-to-output@v1
         id: extract-changelog
@@ -211,16 +229,54 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - docker
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
         with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: ${{ steps.get-content.outputs.string }}
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.WANDERER_DOCKER_USER }}
+          password: ${{ secrets.WANDERER_DOCKER_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.REGISTRY_IMAGE }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{version}},value=${{ needs.docker.outputs.release-tag }}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: docker
+    needs: [docker, merge]
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo
@@ -228,17 +284,11 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Get Release Tag
-        id: get-latest-tag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-        with:
-          fallback: 1.0.0
-
       - name: 🏷 Create Draft Release
         uses: softprops/action-gh-release@v1
         with:
-          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
-          name: Release ${{ steps.get-latest-tag.outputs.tag }}
+          tag_name: ${{ needs.docker.outputs.release-tag }}
+          name: Release ${{ needs.docker.outputs.release-tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -248,3 +298,9 @@ jobs:
             ## How to Promote?
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
+
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ needs.docker.outputs.release-notes }}

Dockerfile

@@ -9,6 +9,9 @@ WORKDIR /app
 # set build ENV
 ENV MIX_ENV="prod"
 
+# Set ERL_FLAGS for ARM compatibility
+ENV ERL_FLAGS="+JPperf true"
+
 # install mix dependencies
 COPY mix.exs mix.lock ./
 RUN rm -Rf _build deps && mix deps.get --only $MIX_ENV

assets/css/app.css

@@ -3,6 +3,8 @@
 @import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
 
+@import '../js/hooks/Mapper/components/map/styles/index.scss';
+
 @layer tailwind-base {
   @tailwind base;
 }
@@ -23,6 +25,10 @@ body {
   width: 400px; /* As IE6 ignores !important it will set width as 400px; */
 }
 
+body > div:first-of-type {
+  min-height: 500px !important;
+}
+
 .lending-normal {
   font-family: 'Shentox', 'Rogan', sans-serif !important;
   font-weight: 500;
@@ -466,3 +472,467 @@ body {
     transform: rotate(-360deg);
   }
 }
+
+/* Map refresh */
+.socket {
+  scale: 0.5;
+  width: 150px;
+  height: 150px;
+  left: 50%;
+  /* margin-left: -75px; */
+  top: 50%;
+  /* margin-top: -50px; */
+}
+
+.hex-brick {
+  background: #000;
+  width: 30px;
+  height: 17px;
+  position: absolute;
+  top: 5px;
+  animation-name: fade;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  -webkit-animation-name: fade;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+.hex-brick--active {
+  animation-name: fade-active;
+  -webkit-animation-name: fade-active;
+}
+
+.h2 {
+  transform: rotate(60deg);
+  -webkit-transform: rotate(60deg);
+}
+
+.h3 {
+  transform: rotate(-60deg);
+  -webkit-transform: rotate(-60deg);
+}
+
+.gel {
+  height: 30px;
+  width: 30px;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.center-gel {
+  margin-left: -15px;
+  margin-top: -15px;
+
+  animation-name: pulse-version;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  -webkit-animation-name: pulse-version;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+.c1 {
+  margin-left: -47px;
+  margin-top: -15px;
+}
+
+.c2 {
+  margin-left: -31px;
+  margin-top: -43px;
+}
+
+.c3 {
+  margin-left: 1px;
+  margin-top: -43px;
+}
+
+.c4 {
+  margin-left: 17px;
+  margin-top: -15px;
+}
+.c5 {
+  margin-left: -31px;
+  margin-top: 13px;
+}
+
+.c6 {
+  margin-left: 1px;
+  margin-top: 13px;
+}
+
+.c7 {
+  margin-left: -63px;
+  margin-top: -43px;
+}
+
+.c8 {
+  margin-left: 33px;
+  margin-top: -43px;
+}
+
+.c9 {
+  margin-left: -15px;
+  margin-top: 41px;
+}
+
+.c10 {
+  margin-left: -63px;
+  margin-top: 13px;
+}
+
+.c11 {
+  margin-left: 33px;
+  margin-top: 13px;
+}
+
+.c12 {
+  margin-left: -15px;
+  margin-top: -71px;
+}
+
+.c13 {
+  margin-left: -47px;
+  margin-top: -71px;
+}
+
+.c14 {
+  margin-left: 17px;
+  margin-top: -71px;
+}
+
+.c15 {
+  margin-left: -47px;
+  margin-top: 41px;
+}
+
+.c16 {
+  margin-left: 17px;
+  margin-top: 41px;
+}
+
+.c17 {
+  margin-left: -79px;
+  margin-top: -15px;
+}
+
+.c18 {
+  margin-left: 49px;
+  margin-top: -15px;
+}
+
+.c19 {
+  margin-left: -63px;
+  margin-top: -99px;
+}
+
+.c20 {
+  margin-left: 33px;
+  margin-top: -99px;
+}
+
+.c21 {
+  margin-left: 1px;
+  margin-top: -99px;
+}
+
+.c22 {
+  margin-left: -31px;
+  margin-top: -99px;
+}
+
+.c23 {
+  margin-left: -63px;
+  margin-top: 69px;
+}
+
+.c24 {
+  margin-left: 33px;
+  margin-top: 69px;
+}
+
+.c25 {
+  margin-left: 1px;
+  margin-top: 69px;
+}
+
+.c26 {
+  margin-left: -31px;
+  margin-top: 69px;
+}
+
+.c27 {
+  margin-left: -79px;
+  margin-top: -15px;
+}
+
+.c28 {
+  margin-left: -95px;
+  margin-top: -43px;
+}
+
+.c29 {
+  margin-left: -95px;
+  margin-top: 13px;
+}
+
+.c30 {
+  margin-left: 49px;
+  margin-top: 41px;
+}
+
+.c31 {
+  margin-left: -79px;
+  margin-top: -71px;
+}
+
+.c32 {
+  margin-left: -111px;
+  margin-top: -15px;
+}
+
+.c33 {
+  margin-left: 65px;
+  margin-top: -43px;
+}
+
+.c34 {
+  margin-left: 65px;
+  margin-top: 13px;
+}
+
+.c35 {
+  margin-left: -79px;
+  margin-top: 41px;
+}
+
+.c36 {
+  margin-left: 49px;
+  margin-top: -71px;
+}
+
+.c37 {
+  margin-left: 81px;
+  margin-top: -15px;
+}
+
+.r1 {
+  animation-name: pulse-version;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.2s;
+  -webkit-animation-name: pulse-version;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.2s;
+}
+
+.r2 {
+  animation-name: pulse-version;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.4s;
+  -webkit-animation-name: pulse-version;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.4s;
+}
+
+.r3 {
+  animation-name: pulse-version;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.6s;
+  -webkit-animation-name: pulse-version;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.6s;
+}
+
+.r1 > .hex-brick {
+  animation-name: fade;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.2s;
+  -webkit-animation-name: fade;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.2s;
+}
+
+.r1 > .hex-brick--active {
+  animation-name: fade-active;
+  -webkit-animation-name: fade-active;
+}
+
+.r2 > .hex-brick {
+  animation-name: fade;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.4s;
+  -webkit-animation-name: fade;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.4s;
+}
+
+.r2 > .hex-brick--active {
+  animation-name: fade-active;
+  -webkit-animation-name: fade-active;
+}
+
+.r3 > .hex-brick {
+  animation-name: fade;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.6s;
+  -webkit-animation-name: fade;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-delay: 0.6s;
+}
+
+.r3 > .hex-brick--active {
+  animation-name: fade-active;
+  -webkit-animation-name: fade-active;
+}
+
+@keyframes pulse-version {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(0.01);
+    transform: scale(0.01);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes fade {
+  0% {
+    background: #09d0e2;
+  }
+
+  50% {
+    background: #8ae6ee;
+  }
+
+  100% {
+    background: #09d0e2;
+  }
+}
+
+@keyframes fade-active {
+  0% {
+    background: #ff52d9;
+  }
+
+  50% {
+    background: #ff52d9;
+  }
+
+  100% {
+    background: #ff52d9;
+  }
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(0.01);
+    transform: scale(0.01);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes fade {
+  0% {
+    background: #abf8ff;
+  }
+
+  50% {
+    background: #389ca6;
+  }
+
+  100% {
+    background: #abf8ff;
+  }
+}
+/* Map refresh END */
+
+.inputContainer {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+}
+.inputContainer > span:nth-child(1),
+.inputContainer > label:nth-child(1) {
+  color: var(--gray-200);
+  font-size: 13px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.inputContainer > :nth-child(2) {
+  border-bottom: 2px dotted #3f3f3f;
+  height: 1px;
+  margin: 0 12px;
+}
+
+.smallInputSwitch {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.smallInputSwitch .p-inputswitch {
+  height: 1rem;
+  width: 2rem;
+}
+.smallInputSwitch .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
+  transform: translateX(1rem);
+}
+.smallInputSwitch .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+  transform: translateX(1rem);
+}
+.smallInputSwitch .p-inputswitch .p-inputswitch-slider::before {
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-top: -0.4rem;
+  margin-left: -3px;
+}
+
+.checkboxRoot.sizeXS {
+  width: 14px;
+  height: 14px;
+}
+.checkboxRoot.sizeXS .p-checkbox-box,
+.checkboxRoot.sizeXS .p-checkbox-input {
+  width: 14px;
+  height: 14px;
+}
+.checkboxRoot.sizeM {
+  width: 16px;
+  height: 16px;
+}
+.checkboxRoot.sizeM .p-checkbox-box,
+.checkboxRoot.sizeM .p-checkbox-input {
+  width: 16px;
+  height: 16px;
+}

assets/js/hooks/Mapper/MapRoot.tsx

@@ -15,11 +15,10 @@ const ErrorFallback = () => {
 };
 
 export default function MapRoot({ hooks }) {
-  const mapRef = useRef<MapHandlers>(null);
   const providerRef = useRef<MapHandlers>(null);
   const hooksRef = useRef<any>(hooks);
 
-  const mapperHandlerRefs = useRef([mapRef, providerRef]);
+  const mapperHandlerRefs = useRef([providerRef]);
 
   const { handleCommand, handleMapEvent, handleMapEvents } = useMapperHandlers(mapperHandlerRefs.current, hooksRef);
 
@@ -41,7 +40,7 @@ export default function MapRoot({ hooks }) {
 
   return (
     <PrimeReactProvider>
-      <MapRootProvider fwdRef={providerRef} outCommand={handleCommand} mapRef={mapRef}>
+      <MapRootProvider fwdRef={providerRef} outCommand={handleCommand}>
         <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
           <ReactFlowProvider>
             <MapRootContent />

assets/js/hooks/Mapper/common-styles/fixes.scss

@@ -108,3 +108,32 @@
 .p-dropdown-empty-message {
   padding: 0.25rem 0.5rem;
 }
+
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+  margin-right: 0 !important;
+}
+
+/* Fixed sizes of Input switch */
+.p-inputswitch {
+  width: 2.0rem;
+  height: 1.15rem;
+
+  .p-inputswitch-slider:before {
+    width: 0.8rem;
+    height: 0.8rem;
+    left: 0.14rem;
+    margin-top: -0.385rem;
+  }
+
+  &.p-highlight .p-inputswitch-slider:before {
+    transform: translateX(0.8rem);
+  }
+
+  &:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgb(255 255 255 / 21%);
+  }
+
+  &.p-highlight .p-inputswitch-slider {
+    background: #966d3d;
+  }
+}

assets/js/hooks/Mapper/components/characters/Characters.tsx

@@ -1,20 +1,19 @@
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { CharacterTypeRaw } from '@/hooks/Mapper/types';
+import { emitMapEvent } from '@/hooks/Mapper/events';
 
 const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
   const [parent] = useAutoAnimate();
-  const { mapRef } = useMapRootState();
 
-  const handleSelect = useCallback(
-    (character: CharacterTypeRaw) => {
-      mapRef.current?.command(Commands.centerSystem, character?.location?.solar_system_id?.toString());
-    },
-    [mapRef],
-  );
+  const handleSelect = useCallback((character: CharacterTypeRaw) => {
+    emitMapEvent({
+      name: Commands.centerSystem,
+      data: character?.location?.solar_system_id?.toString(),
+    });
+  }, []);
 
   const items = data.map(character => (
     <li

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemHandlers.ts

@@ -88,6 +88,23 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     setSystem(undefined);
   }, []);
 
+  const onSystemTemporaryName = useCallback((temporaryName?: string) => {
+    const { system, outCommand } = ref.current;
+    if (!system) {
+      return;
+    }
+
+    outCommand({
+      type: OutCommand.updateSystemTemporaryName,
+      data: {
+        system_id: system,
+        value: temporaryName ?? '',
+      },
+    });
+    setSystem(undefined);
+  }, []);
+
+
   const onSystemStatus = useCallback((status: number) => {
     const { system, outCommand } = ref.current;
     if (!system) {
@@ -161,6 +178,7 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     onLockToggle,
     onHubToggle,
     onSystemTag,
+    onSystemTemporaryName,
     onSystemStatus,
     onSystemLabels,
     onOpenSettings,

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemItems.tsx

@@ -6,6 +6,9 @@ import { PrimeIcons } from 'primereact/api';
 import { ContextMenuSystemProps } from '@/hooks/Mapper/components/contexts';
 import { useWaypointMenu } from '@/hooks/Mapper/components/contexts/hooks';
 import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components';
+import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 
 export const useContextMenuSystemItems = ({
   onDeleteSystem,
@@ -25,6 +28,7 @@ export const useContextMenuSystemItems = ({
   const getStatus = useStatusMenu(systems, systemId, onSystemStatus);
   const getLabels = useLabelsMenu(systems, systemId, onSystemLabels, onCustomLabelDialog);
   const getWaypointMenu = useWaypointMenu(onWaypointSet);
+  const canLockSystem = useMapCheckPermissions([UserPermission.LOCK_SYSTEM]);
 
   return useMemo(() => {
     const system = systemId ? getSystemById(systems, systemId) : undefined;
@@ -41,6 +45,8 @@ export const useContextMenuSystemItems = ({
             <FastSystemActions
               systemId={systemId}
               systemName={system.system_static_info.solar_system_name}
+              regionName={system.system_static_info.region_name}
+              isWH={isWormholeSpace(system.system_static_info.system_class)}
               showEdit
               onOpenSettings={onOpenSettings}
             />
@@ -58,19 +64,25 @@ export const useContextMenuSystemItems = ({
         command: onHubToggle,
       },
       ...(system.locked
-        ? [
-            {
-              label: 'Unlock',
-              icon: PrimeIcons.LOCK_OPEN,
-              command: onLockToggle,
-            },
-          ]
+        ? canLockSystem
+          ? [
+              {
+                label: 'Unlock',
+                icon: PrimeIcons.LOCK_OPEN,
+                command: onLockToggle,
+              },
+            ]
+          : []
         : [
-            {
-              label: 'Lock',
-              icon: PrimeIcons.LOCK,
-              command: onLockToggle,
-            },
+            ...(canLockSystem
+              ? [
+                  {
+                    label: 'Lock',
+                    icon: PrimeIcons.LOCK,
+                    command: onLockToggle,
+                  },
+                ]
+              : []),
             { separator: true },
             {
               label: 'Delete',
@@ -80,6 +92,7 @@ export const useContextMenuSystemItems = ({
           ]),
     ];
   }, [
+    canLockSystem,
     systems,
     systemId,
     getTags,

assets/js/hooks/Mapper/components/contexts/ContextMenuSystemInfo/ContextMenuSystemInfo.tsx

@@ -10,6 +10,7 @@ import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/ty
 import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components';
 import { useJumpPlannerMenu } from '@/hooks/Mapper/components/contexts/hooks';
 import { Route } from '@/hooks/Mapper/types/routes.ts';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 
 export interface ContextMenuSystemInfoProps {
   systemStatics: Map<number, SolarSystemStaticInfoRaw>;
@@ -48,7 +49,6 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
     if (!systemId || !system) {
       return [];
     }
-
     return [
       {
         className: classes.FastActions,
@@ -57,6 +57,8 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
             <FastSystemActions
               systemId={systemId}
               systemName={system.solar_system_name}
+              regionName={system.region_name}
+              isWH={isWormholeSpace(system.system_class)}
               onOpenSettings={onOpenSettings}
             />
           );

assets/js/hooks/Mapper/components/contexts/ContextMenuSystemInfo/useContextMenuSystemInfoHandlers.ts

@@ -1,25 +1,25 @@
-import { RefObject, useCallback, useRef, useState } from 'react';
+import * as React from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { Commands, MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { Commands, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
-import * as React from 'react';
 import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
+import { emitMapEvent } from '@/hooks/Mapper/events';
 
 interface UseContextMenuSystemHandlersProps {
   hubs: string[];
   outCommand: OutCommandHandler;
-  mapRef: RefObject<MapHandlers>;
 }
 
-export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand, mapRef }: UseContextMenuSystemHandlersProps) => {
+export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContextMenuSystemHandlersProps) => {
   const contextMenuRef = useRef<ContextMenu | null>(null);
 
   const [system, setSystem] = useState<string>();
   const routeRef = useRef<(SolarSystemStaticInfoRaw | undefined)[]>([]);
 
-  const ref = useRef({ hubs, system, outCommand, mapRef });
-  ref.current = { hubs, system, outCommand, mapRef };
+  const ref = useRef({ hubs, system, outCommand });
+  ref.current = { hubs, system, outCommand };
 
   const open = useCallback(
     (ev: React.SyntheticEvent, systemId: string, route: (SolarSystemStaticInfoRaw | undefined)[]) => {
@@ -48,7 +48,7 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand, mapRef }: U
   }, []);
 
   const onAddSystem = useCallback(() => {
-    const { system: solarSystemId, outCommand, mapRef } = ref.current;
+    const { system: solarSystemId, outCommand } = ref.current;
     if (!solarSystemId) {
       return;
     }
@@ -60,7 +60,11 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand, mapRef }: U
       },
     });
     setTimeout(() => {
-      mapRef.current?.command(Commands.centerSystem, solarSystemId);
+      emitMapEvent({
+        name: Commands.centerSystem,
+        data: solarSystemId,
+      });
+
       setSystem(undefined);
     }, 200);
   }, []);

assets/js/hooks/Mapper/components/contexts/components/FastSystemActions/FastSystemActions.tsx

@@ -9,13 +9,22 @@ import { PrimeIcons } from 'primereact/api';
 export interface FastSystemActionsProps {
   systemId: string;
   systemName: string;
+  regionName: string;
+  isWH: boolean;
   showEdit?: boolean;
   onOpenSettings(): void;
 }
 
-export const FastSystemActions = ({ systemId, systemName, onOpenSettings, showEdit }: FastSystemActionsProps) => {
-  const ref = useRef({ systemId, systemName });
-  ref.current = { systemId, systemName };
+export const FastSystemActions = ({
+  systemId,
+  systemName,
+  regionName,
+  isWH,
+  onOpenSettings,
+  showEdit,
+}: FastSystemActionsProps) => {
+  const ref = useRef({ systemId, systemName, regionName, isWH });
+  ref.current = { systemId, systemName, regionName, isWH };
 
   const handleOpenZKB = useCallback(
     () => window.open(`https://zkillboard.com/system/${ref.current.systemId}`, '_blank'),
@@ -27,10 +36,17 @@ export const FastSystemActions = ({ systemId, systemName, onOpenSettings, showEd
     [],
   );
 
-  const handleOpenDotlan = useCallback(
-    () => window.open(`https://evemaps.dotlan.net/system/${ref.current.systemName}`, '_blank'),
-    [],
-  );
+  const handleOpenDotlan = useCallback(() => {
+    if (ref.current.isWH) {
+      window.open(`https://evemaps.dotlan.net/system/${ref.current.systemName}`, '_blank');
+      return;
+    }
+
+    return window.open(
+      `https://evemaps.dotlan.net/map/${ref.current.regionName.replace(/ /gim, '_')}/${ref.current.systemName}#jumps`,
+      '_blank',
+    );
+  }, []);
 
   const copySystemNameToClipboard = useCallback(async () => {
     try {
@@ -43,9 +59,9 @@ export const FastSystemActions = ({ systemId, systemName, onOpenSettings, showEd
   return (
     <LayoutEventBlocker className={clsx('flex px-2 gap-2 justify-between items-center h-full')}>
       <div className={clsx('flex gap-2 items-center h-full', classes.Links)}>
-        <WdImgButton source={ZKB_ICON} onClick={handleOpenZKB} />
-        <WdImgButton source={ANOIK_ICON} onClick={handleOpenAnoikis} />
-        <WdImgButton source={DOTLAN_ICON} onClick={handleOpenDotlan} />
+        <WdImgButton tooltip={{ content: 'Open zkillboard' }} source={ZKB_ICON} onClick={handleOpenZKB} />
+        <WdImgButton tooltip={{ content: 'Open Anoikis' }} source={ANOIK_ICON} onClick={handleOpenAnoikis} />
+        <WdImgButton tooltip={{ content: 'Open Dotlan' }} source={DOTLAN_ICON} onClick={handleOpenDotlan} />
       </div>
 
       <div className="flex gap-2 items-center pl-1">

assets/js/hooks/Mapper/components/map/Map.module.scss

@@ -1,4 +1,11 @@
 .MapRoot {
   width: 100%;
   height: 100%;
+
+  background-color: var(--rf-bg-color, #0C0A09);
+
+  &.BackgroundAlternateColor {
+    background-color: var(--rf-soft-bg-color, #171717);
+    --rf-node-bg-color: var(--rf-node-soft-bg-color, #202020);
+  }
 }

assets/js/hooks/Mapper/components/map/Map.tsx

@@ -1,43 +1,39 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useRef } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
-  ConnectionMode,
   Edge,
+  EdgeChange,
   MiniMap,
   Node,
+  NodeChange,
   NodeDragHandler,
   OnConnect,
   OnMoveEnd,
   OnSelectionChangeFunc,
   SelectionDragHandler,
   SelectionMode,
-  useEdgesState,
-  useNodesState,
-  NodeChange,
   useReactFlow,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
-import './styles/neon-theme.scss';
-import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapHandlers, useUpdateNodes } from './hooks';
+import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
-  SolarSystemNode,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { OnMapSelectionChange } from './map.types';
+import { getBehaviorForTheme } from './helpers/getThemeBehavior';
+import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
-import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
+import clsx from 'clsx';
+import { useBackgroundVars } from './hooks/useBackgroundVars';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -79,12 +75,6 @@ const initialEdges = [
   },
 ];
 
-const nodeTypes = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  custom: SolarSystemNode,
-} as never;
-
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
@@ -93,12 +83,19 @@ interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
+  onManualDelete(systems: string[]): void;
+  canRemoveConnection?(connectionId: string): boolean;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
+  onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
   minimapClasses?: string;
   isShowMinimap?: boolean;
   onSystemContextMenu: (event: MouseEvent<Element>, systemId: string) => void;
   showKSpaceBG?: boolean;
+  isThickConnections?: boolean;
+  isShowBackgroundPattern?: boolean;
+  isSoftBackground?: boolean;
+  theme?: string;
 }
 
 const MapComp = ({
@@ -109,26 +106,34 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
+  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
+  isThickConnections,
+  isShowBackgroundPattern,
+  isSoftBackground,
+  theme,
+  onAddSystem,
+  canRemoveConnection,
 }: MapCompProps) => {
-  const { getNode } = useReactFlow();
-  const [nodes, , onNodesChange] = useNodesState<SolarSystemRawType>(initialNodes);
-  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>[]>(initialEdges);
+  const { getEdge, getNode, getNodes } = useReactFlow();
+  const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
+  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
-  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers();
+  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
-  const {
-    data: { systems },
-  } = useMapRootState();
+  const { variant, gap, size, color } = useBackgroundVars(theme);
+  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
 
-  const { deleteSystems } = useDeleteSystems();
-
-  const systemsRef = useRef({ systems });
-  systemsRef.current = { systems };
+  // You can create nodeTypes dynamically based on the node component
+  const nodeTypes = useMemo(() => {
+    return {
+      custom: nodeComponent,
+    };
+  }, [nodeComponent]);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -186,51 +191,97 @@ const MapComp = ({
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
       const systemsIdsToRemove: string[] = [];
+
+      // prevents single node deselection on background / same node click
+      // allows deseletion of all nodes if multiple are currently selected
+      if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
+        changes[0].selected = getNodes().filter(node => node.selected).length === 1;
+      }
+
       const nextChanges = changes.reduce((acc, change) => {
-        if (change.type === 'remove') {
-          const node = getNode(change.id);
-          const { systems = [] } = systemsRef.current;
-          if (node?.data?.id && !systems.map(s => s.id).includes(node?.data?.id)) {
-            return [...acc, change];
-          } else if (!node?.data?.locked) {
-            systemsIdsToRemove.push(node?.data?.id);
-          }
+        if (change.type !== 'remove') {
+          return [...acc, change];
+        }
+
+        const node = getNode(change.id);
+        if (!node) {
+          return [...acc, change];
+        }
+
+        if (node.data.locked) {
           return acc;
         }
+
+        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
-      if (systemsIdsToRemove.length) {
-        deleteSystems(systemsIdsToRemove);
+      if (systemsIdsToRemove.length > 0) {
+        onManualDelete(systemsIdsToRemove);
       }
 
       onNodesChange(nextChanges);
     },
-    [deleteSystems, getNode, onNodesChange],
+    [getNode, getNodes, onManualDelete, onNodesChange],
+  );
+
+  const handleEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const nextChanges = changes.reduce((acc, change) => {
+        if (change.type !== 'remove') {
+          return [...acc, change];
+        }
+
+        if (canRemoveConnection?.(change.id)) {
+          return [...acc, change];
+        }
+
+        const edge = getEdge(change.id);
+        if (!edge) {
+          return [...acc, change];
+        }
+
+        const sourceNode = getNode(edge.source);
+        const targetNode = getNode(edge.target);
+        if (!sourceNode || !targetNode) {
+          return [...acc, change];
+        }
+
+        if (sourceNode.data.locked || targetNode.data.locked) {
+          return acc;
+        }
+
+        return [...acc, change];
+      }, [] as EdgeChange[]);
+
+      onEdgesChange(nextChanges);
+    },
+    [getEdge, getNode, onEdgesChange],
   );
 
   useEffect(() => {
     update(x => ({
       ...x,
       showKSpaceBG: showKSpaceBG,
+      isThickConnections: isThickConnections,
     }));
-  }, [showKSpaceBG, update]);
+  }, [showKSpaceBG, isThickConnections, update]);
 
   return (
     <>
-      <div className={classes.MapRoot}>
+      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
           onNodesChange={handleNodesChange}
-          onEdgesChange={onEdgesChange}
+          onEdgesChange={handleEdgesChange}
           onConnect={onConnect}
           // TODO we need save into session all of this
           //      and on any action do either
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={ConnectionMode.Loose}
+          connectionMode={connectionMode}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -238,6 +289,11 @@ const MapComp = ({
           onConnectStart={() => update({ isConnecting: true })}
           onConnectEnd={() => update({ isConnecting: false })}
           onNodeMouseEnter={(_, node) => update({ hoverNodeId: node.id })}
+          onPaneClick={event => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
+          // onKeyUp=
           onNodeMouseLeave={() => update({ hoverNodeId: null })}
           onEdgeClick={(_, t) => {
             onConnectionInfoClick?.(t.data);
@@ -258,13 +314,19 @@ const MapComp = ({
           maxZoom={1.5}
           elevateNodesOnSelect
           deleteKeyCode={['Delete']}
+          {...(isPanAndDrag
+            ? {
+                selectionOnDrag: true,
+                panOnDrag: [2],
+              }
+            : {})}
           // TODO need create clear example with problem with that flag
           //  if system is not visible edge not drawing (and any render in Custom node is not happening)
           // onlyRenderVisibleElements
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          <Background />
+          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE

assets/js/hooks/Mapper/components/map/MapProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { MapUnionTypes } from '@/hooks/Mapper/types';
+import { MapUnionTypes, SystemSignature } from '@/hooks/Mapper/types';
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
 
 export type MapData = MapUnionTypes & {
@@ -8,6 +8,8 @@ export type MapData = MapUnionTypes & {
   hoverNodeId: string | null;
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
+  isThickConnections: boolean;
+  linkedSigEveId: string;
 };
 
 interface MapProviderProps {
@@ -17,6 +19,7 @@ interface MapProviderProps {
 
 const INITIAL_DATA: MapData = {
   wormholesData: {},
+  wormholes: [],
   effects: {},
   characters: [],
   userCharacters: [],
@@ -27,8 +30,13 @@ const INITIAL_DATA: MapData = {
   isConnecting: false,
   connections: [],
   hoverNodeId: null,
+  linkedSigEveId: '',
   visibleNodes: new Set(),
   showKSpaceBG: false,
+  isThickConnections: false,
+  userPermissions: {},
+  systemSignatures: {} as Record<string, SystemSignature[]>,
+  options: {} as Record<string, string | boolean>,
 };
 
 export interface MapContextProps {

assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.module.scss

@@ -1,15 +1,17 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
 .ConnectionTimeEOL {
-  background-image: linear-gradient(207deg, transparent, #7452c3e3);
+  background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
 }
 
 .ConnectionFrigate {
-  background-image: linear-gradient(207deg, transparent, #325d88);
+  background-image: linear-gradient(207deg, transparent, var(--conn-frigate));
 }
 
 .ConnectionSave {
-  background-image: linear-gradient(207deg, transparent, rgba(155, 102, 45, 0.85));
+  background-image: linear-gradient(207deg, transparent, var(--conn-save));
 }
 
 .SelectedItem {
-  background-color: rgba(98, 98, 98, 0.33);
+  background-color: var(--selected-item-bg);
 }

assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx

@@ -3,10 +3,17 @@ import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
 import { Edge } from '@reactflow/core/dist/esm/types/edges';
-import { MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
+import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import classes from './ContextMenuConnection.module.scss';
-import { MASS_STATE_NAMES, MASS_STATE_NAMES_ORDER } from '@/hooks/Mapper/components/map/constants.ts';
+import {
+  MASS_STATE_NAMES,
+  MASS_STATE_NAMES_ORDER,
+  SHIP_SIZES_NAMES,
+  SHIP_SIZES_NAMES_ORDER,
+  SHIP_SIZES_NAMES_SHORT,
+  SHIP_SIZES_SIZE,
+} from '@/hooks/Mapper/components/map/constants.ts';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;
@@ -35,46 +42,72 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
     }
 
     const isFrigateSize = edge.data?.ship_size_type === ShipSizeStatus.small;
+    const isWormhole = edge.data?.type !== ConnectionType.gate;
 
     return [
-      {
-        label: `EOL`,
-        className: clsx({
-          [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
-        }),
-        icon: PrimeIcons.CLOCK,
-        command: onChangeTimeState,
-      },
-      {
-        label: `Frigate`,
-        className: clsx({
-          [classes.ConnectionFrigate]: isFrigateSize,
-        }),
-        icon: PrimeIcons.CLOUD,
-        command: () =>
-          onChangeShipSizeStatus(
-            edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.normal : ShipSizeStatus.small,
-          ),
-      },
-      {
-        label: `Save mass`,
-        className: clsx({
-          [classes.ConnectionSave]: edge.data?.locked,
-        }),
-        icon: PrimeIcons.LOCK,
-        command: () => onToggleMassSave(!edge.data?.locked),
-      },
-      ...(!isFrigateSize
+      ...(isWormhole
         ? [
             {
-              label: `Mass status`,
-              icon: PrimeIcons.CHART_PIE,
-              items: MASS_STATE_NAMES_ORDER.map(x => ({
-                label: MASS_STATE_NAMES[x],
+              label: `EOL`,
+              className: clsx({
+                [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
+              }),
+              icon: PrimeIcons.CLOCK,
+              command: onChangeTimeState,
+            },
+            {
+              label: `Frigate`,
+              className: clsx({
+                [classes.ConnectionFrigate]: isFrigateSize,
+              }),
+              icon: PrimeIcons.CLOUD,
+              command: () =>
+                onChangeShipSizeStatus(
+                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
+                ),
+            },
+            {
+              label: `Save mass`,
+              className: clsx({
+                [classes.ConnectionSave]: edge.data?.locked,
+              }),
+              icon: PrimeIcons.LOCK,
+              command: () => onToggleMassSave(!edge.data?.locked),
+            },
+            ...(!isFrigateSize
+              ? [
+                  {
+                    label: `Mass status`,
+                    icon: PrimeIcons.CHART_PIE,
+                    items: MASS_STATE_NAMES_ORDER.map(x => ({
+                      label: MASS_STATE_NAMES[x],
+                      className: clsx({
+                        [classes.SelectedItem]: edge.data?.mass_status === x,
+                      }),
+                      command: () => onChangeMassState(x),
+                    })),
+                  },
+                ]
+              : []),
+
+            {
+              label: `Ship Size`,
+              icon: PrimeIcons.CLOUD,
+              items: SHIP_SIZES_NAMES_ORDER.map(x => ({
+                label: (
+                  <div className="grid grid-cols-[20px_120px_1fr_40px] gap-2 items-center">
+                    <div className="text-[12px] font-bold text-stone-400">{SHIP_SIZES_NAMES_SHORT[x]}</div>
+                    <div>{SHIP_SIZES_NAMES[x]}</div>
+                    <div></div>
+                    <div className="flex justify-end whitespace-nowrap text-[12px] font-bold text-stone-500">
+                      {SHIP_SIZES_SIZE[x]} t.
+                    </div>
+                  </div>
+                ) as unknown as string, // TODO my lovely kostyl
                 className: clsx({
-                  [classes.SelectedItem]: edge.data?.mass_status === x,
+                  [classes.SelectedItem]: edge.data?.ship_size_type === x,
                 }),
-                command: () => onChangeMassState(x),
+                command: () => onChangeShipSizeStatus(x),
               })),
             },
           ]
@@ -85,7 +118,7 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
         command: onDeleteConnection,
       },
     ];
-  }, [edge, onChangeTimeState, onDeleteConnection, onChangeMassState, onChangeShipSizeStatus]);
+  }, [edge, onChangeTimeState, onDeleteConnection, onChangeShipSizeStatus, onToggleMassSave, onChangeMassState]);
 
   return (
     <>

assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts

@@ -4,7 +4,7 @@ import { ContextMenu } from 'primereact/contextmenu';
 import { useMapState } from '../../MapProvider.tsx';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { Edge } from '@reactflow/core/dist/esm/types/edges';
-import { MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
+import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 
 export const useContextMenuConnectionHandlers = () => {
@@ -47,6 +47,23 @@ export const useContextMenuConnectionHandlers = () => {
     setEdge(undefined);
   };
 
+  const onChangeType = useCallback((type: ConnectionType) => {
+    const { edge, outCommand } = ref.current;
+
+    if (!edge) {
+      return;
+    }
+
+    outCommand({
+      type: OutCommand.updateConnectionType,
+      data: {
+        source: edge.source,
+        target: edge.target,
+        value: type,
+      },
+    });
+  }, []);
+
   const onChangeMassState = useCallback((status: MassState) => {
     const { edge, outCommand } = ref.current;
 
@@ -80,14 +97,16 @@ export const useContextMenuConnectionHandlers = () => {
       },
     });
 
-    outCommand({
-      type: OutCommand.updateConnectionMassStatus,
-      data: {
-        source: edge.source,
-        target: edge.target,
-        value: MassState.normal,
-      },
-    });
+    if (status === ShipSizeStatus.small) {
+      outCommand({
+        type: OutCommand.updateConnectionMassStatus,
+        data: {
+          source: edge.source,
+          target: edge.target,
+          value: MassState.normal,
+        },
+      });
+    }
   }, []);
 
   const onToggleMassSave = useCallback((locked: boolean) => {
@@ -118,6 +137,7 @@ export const useContextMenuConnectionHandlers = () => {
     contextMenuRef,
     onDeleteConnection,
     onChangeTimeState,
+    onChangeType,
     onChangeMassState,
     onChangeShipSizeStatus,
     onToggleMassSave,

assets/js/hooks/Mapper/components/map/components/ContextMenuRoot/useContextMenuRootHandlers.ts

@@ -1,14 +1,16 @@
 import { useReactFlow, XYPosition } from 'reactflow';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { useMapState } from '../../MapProvider.tsx';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
+import { OnMapAddSystemCallback } from '@/hooks/Mapper/components/map/map.types.ts';
 
-export const useContextMenuRootHandlers = () => {
+type UseContextMenuRootHandlers = {
+  onAddSystem?: OnMapAddSystemCallback;
+};
+
+export const useContextMenuRootHandlers = ({ onAddSystem }: UseContextMenuRootHandlers = {}) => {
   const rf = useReactFlow();
   const contextMenuRef = useRef<ContextMenu | null>(null);
-  const { outCommand } = useMapState();
   const [position, setPosition] = useState<XYPosition | null>(null);
 
   const handleRootContext = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -18,14 +20,17 @@ export const useContextMenuRootHandlers = () => {
     contextMenuRef.current?.show(e);
   };
 
-  const onAddSystem = () => {
-    outCommand({ type: OutCommand.manualAddSystem, data: { coordinates: position } });
-  };
+  const ref = useRef({ onAddSystem, position });
+  ref.current = { onAddSystem, position };
+
+  const onAddSystemCallback = useCallback(() => {
+    ref.current.onAddSystem?.({ coordinates: position });
+  }, [position]);
 
   return {
     handleRootContext,
 
     contextMenuRef,
-    onAddSystem,
+    onAddSystem: onAddSystemCallback,
   };
 };

assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.module.scss

@@ -1,51 +1,7 @@
-@import "@/hooks/Mapper/components/map/styles/neon-variables";
-
-.react-flow__edge.selected {
-  .EdgePathBack {
-    stroke: $pastel-yellow;
-  }
-}
-
-.EdgePathFront {
-  fill: none;
-
-  stroke: #2c3844;
-  stroke-width: 2px;
-
-  &.MassVerge:not(&.Frigate) {
-    stroke: #af2900;
-  }
-
-  &.MassHalf:not(&.Frigate) {
-    stroke: #a85f00;
-  }
-
-  &.Frigate {
-    stroke: #4e62c9;
-  }
-
-  &.Hovered {
-    stroke: #4e5d6c;
-    stroke-width: 2px;
-
-    &.MassVerge:not(&.Frigate) {
-      stroke: #9d4c34;
-    }
-
-    &.MassHalf:not(&.Frigate) {
-      stroke: #ec992c;
-    }
-
-    &.Frigate {
-      stroke: #41acd7;
-    }
-
-  }
-}
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 .EdgePathBack {
   fill: none;
-
   stroke: #80a5c5;
   stroke-width: 3px;
 
@@ -61,6 +17,65 @@
       stroke: #ef7dce;
     }
   }
+
+  &.Tick {
+    stroke-width: 5px;
+
+    &.TimeCrit {
+      stroke-width: 6px;
+    }
+  }
+
+  &.Gate {
+    stroke: #9aff40;
+  }
+}
+
+.EdgePathFront {
+  fill: none;
+  stroke: #2c3844;
+  stroke-width: 2px;
+
+  &.MassVerge:not(&.Frigate) {
+    stroke: #af0000;
+  }
+
+  &.MassHalf:not(&.Frigate) {
+    stroke: #ffd700;
+  }
+
+  &.Frigate {
+    stroke: #d4f0ff;
+  }
+
+  &.Gate {
+    stroke: #1c1e15;
+  }
+
+  &.Hovered {
+    stroke: #4e5d6c;
+    stroke-width: 2px;
+
+    &.MassVerge:not(&.Frigate) {
+      stroke: #9d4c34;
+    }
+
+    &.MassHalf:not(&.Frigate) {
+      stroke: #ec992c;
+    }
+
+    &.Frigate {
+      stroke: #d4f0ff;
+    }
+  }
+
+  &.Tick {
+    stroke-width: 3px;
+
+    &.Hovered {
+      stroke-width: 3px;
+    }
+  }
 }
 
 .ClickPath {
@@ -69,7 +84,23 @@
   stroke-width: 8px;
 }
 
-.LinkLabel{
+.Handle {
+  border: 1px solid var(--pastel-blue);
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+  }
+
+  &.Right {
+    margin-left: 0px;
+  }
+}
+
+.LinkLabel {
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -85,13 +116,3 @@
   height: 8px;
   font-size: 8px;
 }
-
-.Handle {
-  min-width: initial;
-  min-height: initial;
-  border: 1px solid #5a7d9a;
-  width: 5px;
-  height: 5px;
-  z-index: 1001;
-}
-

assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx

@@ -1,39 +1,73 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import classes from './SolarSystemEdge.module.scss';
-import { EdgeLabelRenderer, EdgeProps, getBezierPath, Position, useStore } from 'reactflow';
+import { EdgeLabelRenderer, EdgeProps, getBezierPath, getSmoothStepPath, Position, useStore } from 'reactflow';
 import { getEdgeParams } from '@/hooks/Mapper/components/map/utils.ts';
 import clsx from 'clsx';
-import { MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
+import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import { PrimeIcons } from 'primereact/api';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { SHIP_SIZES_DESCRIPTION, SHIP_SIZES_NAMES_SHORT } from '@/hooks/Mapper/components/map/constants.ts';
 
 const MAP_TRANSLATES: Record<string, string> = {
-  [Position.Top]: 'translate(-50%, 0%)',
+  [Position.Top]: 'translate(-48%, 0%)',
   [Position.Bottom]: 'translate(-50%, -100%)',
   [Position.Left]: 'translate(0%, -50%)',
   [Position.Right]: 'translate(-100%, -50%)',
 };
 
+const MAP_OFFSETS_TICK: Record<string, { x: number; y: number }> = {
+  [Position.Top]: { x: 0, y: 3 },
+  [Position.Bottom]: { x: 0, y: -3 },
+  [Position.Left]: { x: 3, y: 0 },
+  [Position.Right]: { x: -3, y: 0 },
+};
+
+const MAP_OFFSETS: Record<string, { x: number; y: number }> = {
+  [Position.Top]: { x: 0, y: 0 },
+  [Position.Bottom]: { x: 0, y: 0 },
+  [Position.Left]: { x: 0, y: 0 },
+  [Position.Right]: { x: 0, y: 0 },
+};
+
+export const SHIP_SIZES_COLORS = {
+  [ShipSizeStatus.small]: 'bg-indigo-400',
+  [ShipSizeStatus.medium]: 'bg-cyan-500',
+  [ShipSizeStatus.large]: '',
+  [ShipSizeStatus.freight]: 'bg-lime-400',
+  [ShipSizeStatus.capital]: 'bg-red-400',
+};
+
 export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }: EdgeProps<SolarSystemConnection>) => {
   const sourceNode = useStore(useCallback(store => store.nodeInternals.get(source), [source]));
   const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target]));
+  const isWormhole = data?.type !== ConnectionType.gate;
+
+  const {
+    data: { isThickConnections },
+  } = useMapState();
 
   const [hovered, setHovered] = useState(false);
 
   const [path, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos] = useMemo(() => {
     const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
-    const [edgePath, labelX, labelY] = getBezierPath({
-      sourceX: sx,
-      sourceY: sy,
+    const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
+
+    const method = isWormhole ? getBezierPath : getSmoothStepPath;
+
+    const [edgePath, labelX, labelY] = method({
+      sourceX: sx - offset.x,
+      sourceY: sy - offset.y,
       sourcePosition: sourcePos,
       targetPosition: targetPos,
-      targetX: tx,
-      targetY: ty,
+      targetX: tx + offset.x,
+      targetY: ty + offset.y,
     });
+
     return [edgePath, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos];
-  }, [sourceNode, targetNode]);
+  }, [isThickConnections, sourceNode, targetNode, isWormhole]);
 
   if (!sourceNode || !targetNode || !data) {
     return null;
@@ -44,8 +78,10 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
       <path
         id={`back_${id}`}
         className={clsx(classes.EdgePathBack, {
-          [classes.TimeCrit]: data.time_status === TimeStatus.eol,
+          [classes.Tick]: isThickConnections,
+          [classes.TimeCrit]: isWormhole && data.time_status === TimeStatus.eol,
           [classes.Hovered]: hovered,
+          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -54,10 +90,12 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
       <path
         id={`front_${id}`}
         className={clsx(classes.EdgePathFront, {
+          [classes.Tick]: isThickConnections,
           [classes.Hovered]: hovered,
-          [classes.MassVerge]: data.mass_status === MassState.verge,
-          [classes.MassHalf]: data.mass_status === MassState.half,
-          [classes.Frigate]: data.ship_size_type === ShipSizeStatus.small,
+          [classes.MassVerge]: isWormhole && data.mass_status === MassState.verge,
+          [classes.MassHalf]: isWormhole && data.mass_status === MassState.half,
+          [classes.Frigate]: isWormhole && data.ship_size_type === ShipSizeStatus.small,
+          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -75,21 +113,29 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
 
       <EdgeLabelRenderer>
         <div
-          className={clsx(classes.Handle, 'react-flow__handle absolute nodrag pointer-events-none')}
+          className={clsx(
+            classes.Handle,
+            { [classes.Tick]: isThickConnections, [classes.Right]: Position.Right === sourcePos },
+            'react-flow__handle absolute nodrag pointer-events-none',
+          )}
           style={{ transform: `${MAP_TRANSLATES[sourcePos]} translate(${sx}px,${sy}px)` }}
         />
         <div
-          className={clsx(classes.Handle, 'react-flow__handle absolute nodrag pointer-events-none')}
+          className={clsx(
+            classes.Handle,
+            { [classes.Tick]: isThickConnections },
+            'react-flow__handle absolute nodrag pointer-events-none',
+          )}
           style={{ transform: `${MAP_TRANSLATES[targetPos]} translate(${tx}px,${ty}px)` }}
         />
 
         <div
-          className="absolute flex items-center gap-1"
+          className="absolute flex items-center gap-1 pointer-events-none"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           }}
         >
-          {data.locked && (
+          {isWormhole && data.locked && (
             <WdTooltipWrapper
               content="Save mass"
               className={clsx(
@@ -100,6 +146,19 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
               <span className={clsx(PrimeIcons.LOCK, classes.icon)} />
             </WdTooltipWrapper>
           )}
+
+          {isWormhole && data.ship_size_type !== ShipSizeStatus.large && (
+            <WdTooltipWrapper
+              content={SHIP_SIZES_DESCRIPTION[data.ship_size_type]}
+              className={clsx(
+                classes.LinkLabel,
+                'pointer-events-auto rounded opacity-100 cursor-auto text-neutral-900 font-bold',
+                SHIP_SIZES_COLORS[data.ship_size_type],
+              )}
+            >
+              {SHIP_SIZES_NAMES_SHORT[data.ship_size_type]}
+            </WdTooltipWrapper>
+          )}
         </div>
       </EdgeLabelRenderer>
     </>

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNode.tsx

@@ -1,271 +0,0 @@
-import { memo, useMemo } from 'react';
-import { Handle, Position, WrapNodeProps } from 'reactflow';
-import { MapSolarSystemType } from '../../map.types';
-import classes from './SolarSystemNode.module.scss';
-import clsx from 'clsx';
-import {
-  EFFECT_BACKGROUND_STYLES,
-  LABELS_INFO,
-  LABELS_ORDER,
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-} from '@/hooks/Mapper/components/map/constants.ts';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { PrimeIcons } from 'primereact/api';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: classes.Caldaria,
-  [Spaces.Matar]: classes.Mataria,
-  [Spaces.Amarr]: classes.Amarria,
-  [Spaces.Gallente]: classes.Gallente,
-};
-
-const sortedLabels = (labels: string[]) => {
-  if (!labels) {
-    return [];
-  }
-
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
-};
-
-export const getActivityType = (count: number) => {
-  if (count <= 5) {
-    return 'activityNormal';
-  }
-
-  if (count <= 30) {
-    return 'activityWarn';
-  }
-
-  return 'activityDanger';
-};
-
-// eslint-disable-next-line react/display-name
-export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarSystemType>) => {
-  const {
-    system_class,
-    security,
-    class_title,
-    solar_system_id,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = data.system_static_info;
-
-  const { locked, name, tag, status, labels, id } = data || {};
-
-  const customName = solar_system_name !== name ? name : undefined;
-
-  const {
-    data: {
-      characters,
-      presentCharacters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-    },
-    outCommand,
-  } = useMapState();
-
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-
-  const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
-    // eslint-disable-next-line
-  }, [characters, presentCharacters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-  const lebM = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(lebM.list), [lebM]);
-  const labelCustom = useMemo(() => lebM.customLabel, [lebM]);
-
-  const killsCount = useMemo(() => {
-    const systemKills = kills[solar_system_id];
-    if (!systemKills) {
-      return null;
-    }
-
-    return systemKills;
-  }, [kills, solar_system_id]);
-
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: {
-        system_id: solar_system_id.toString(),
-      },
-    });
-  });
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
-
-  return (
-    <>
-      {visible && (
-        <div className={classes.Bookmarks}>
-          {labelCustom !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
-            </div>
-          )}
-
-          {is_shattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
-            </div>
-          )}
-
-          {killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[getActivityType(killsCount)])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(classes.RootCustomNode, regionClass, classes[STATUS_CLASSES[status]], {
-          [classes.selected]: selected,
-        })}
-      >
-        {visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
-                {class_title ?? '-'}
-              </div>
-              {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
-              )}
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                )}
-              >
-                {solar_system_name}
-              </div>
-
-              {isWormhole && (
-                <div className={classes.statics}>
-                  {sortedStatics.map(x => (
-                    <WormholeClassComp key={x} id={x} />
-                  ))}
-                </div>
-              )}
-
-              {effect_name !== null && isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effect_name])}></div>
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {customName}
-                </div>
-              )}
-
-              {!isWormhole && !customName && (
-                <div
-                  className={clsx(
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
-                  {region_name}
-                </div>
-              )}
-
-              {isWormhole && !customName && <div />}
-
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>}
-
-                  {hubs.includes(solar_system_id.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>
-                  )}
-
-                  {charactersInSystem.length > 0 && (
-                    <div className={clsx(classes.localCounter, { ['text-amber-300']: hasUserCharacters })}>
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }}></i>
-                      <span className="font-sans">{charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      <div onMouseDownCapture={dbClick} className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, { [classes.selected]: selected })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, { [classes.selected]: selected })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, { [classes.selected]: selected })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, { [classes.selected]: selected })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss

@@ -6,7 +6,14 @@ $pastel-green: #88b04b;
 $pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
-$tooltip-bg: #202020; // Темный фон для подсказок
+$tooltip-bg: #202020;
+
+$node-bg-color: #202020;
+$node-soft-bg-color: #202020;
+$text-color: #ffffff;
+$tag-color:  #38BDF8;
+$region-name: #D6D3D1;
+$custom-name: #93C5FD;
 
 .RootCustomNode {
   display: flex;
@@ -85,7 +92,7 @@ $tooltip-bg: #202020; // Темный фон для подсказок
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  .tooltip {
+  &.tooltip {
     background-color: $tooltip-bg;
     color: $text-color;
     padding: 5px 10px;
@@ -94,49 +101,66 @@ $tooltip-bg: #202020; // Темный фон для подсказок
   }
 
   &.eve-system-status-home {
-    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
-    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
-
+    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-home),
+      transparent
+    );
     &.selected {
-      border-color: $eve-solar-system-status-color-home;
+      border-color: var(--eve-solar-system-status-color-home);
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
-    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
-
+    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly-dark30),
+      transparent
+    );
     &.selected {
-      border-color: darken($eve-solar-system-status-color-friendly, 5%);
+      border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
+    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
-
     &.selected {
       border-color: $pastel-pink;
     }
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-warning),
+      transparent
+    );
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-dangerous),
+      transparent
+    );
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
   }
 }
 
 .Bookmarks {
   position: absolute;
   width: 100%;
-  z-index: 0;
+  z-index: 1;
   display: flex;
   left: 4px;
 
@@ -182,6 +206,42 @@ $tooltip-bg: #202020; // Темный фон для подсказок
   }
 }
 
+.Unsplashed {
+  position: absolute;
+  width: calc(50% - 4px);
+  z-index: -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  left: 2px;
+
+  &--right {
+    left: calc(50% + 6px);
+  }
+
+  & > .Signature {
+    width: 13px;
+    height: 4px;
+    position: relative;
+    top: 3px;
+    border-radius: 5px;
+    color: #ffffff;
+    font-size: 8px;
+    text-align: center;
+    padding-top: 2px;
+    font-weight: bolder;
+    padding-left: 3px;
+    padding-right: 3px;
+    display: block;
+
+    background-color: #833ca4;
+
+    &:not(:first-child) {
+      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
 .icon {
   width: 8px;
   height: 8px;
@@ -206,10 +266,18 @@ $tooltip-bg: #202020; // Темный фон для подсказок
 
   .TagTitle {
     font-size: 11px;
-    font-weight: bold;
+    font-weight: medium;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
 
-    color: #ffb01d;
+    color: var(--rf-tag-color, #38BDF8);
+  }
+
+  /* Firefox kostyl */
+  @-moz-document url-prefix() {
+    .classSystemName {
+      font-family: inherit !important;
+      font-weight: bold;
+    }
   }
 
   .classSystemName {
@@ -262,6 +330,12 @@ $tooltip-bg: #202020; // Темный фон для подсказок
   & > * {
     line-height: 10px;
   }
+
+  /* Firefox kostyl */
+  @-moz-document url-prefix() {
+    position: relative;
+    top: -1px;
+  }
 }
 
 .Handlers {
@@ -299,4 +373,25 @@ $tooltip-bg: #202020; // Темный фон для подсказок
   &.HandleLeft {
     left: -2px;
   }
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+
+    &.HandleTop {
+      top: -3px;
+    }
+
+    &.HandleRight {
+      right: -3px;
+    }
+
+    &.HandleBottom {
+      bottom: -3px;
+    }
+
+    &.HandleLeft {
+      left: -3px;
+    }
+  }
 }

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx

@@ -0,0 +1,209 @@
+import { memo } from 'react';
+import { MapSolarSystemType } from '../../map.types';
+import { Handle, Position, NodeProps } from 'reactflow';
+import clsx from 'clsx';
+import classes from './SolarSystemNodeDefault.module.scss';
+import { PrimeIcons } from 'primereact/api';
+import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
+import {
+  MARKER_BOOKMARK_BG_STYLES,
+  STATUS_CLASSES,
+  EFFECT_BACKGROUND_STYLES,
+} from '@/hooks/Mapper/components/map/constants';
+import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
+import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+
+export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
+  const nodeVars = useSolarSystemNode(props);
+
+  return (
+    <>
+      {nodeVars.visible && (
+        <div className={classes.Bookmarks}>
+          {nodeVars.labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{nodeVars.labelCustom}</span>
+            </div>
+          )}
+
+          {nodeVars.isShattered && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            </div>
+          )}
+
+          {nodeVars.killsCount && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
+              <div className={clsx(classes.BookmarkWithIcon)}>
+                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
+                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+              </div>
+            </div>
+          )}
+
+          {nodeVars.labelsInfo.map(x => (
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
+              {x.shortName}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          classes.RootCustomNode,
+          nodeVars.regionClass && classes[nodeVars.regionClass],
+          classes[STATUS_CLASSES[nodeVars.status]],
+          {
+            [classes.selected]: nodeVars.selected,
+          },
+        )}
+      >
+        {nodeVars.visible && (
+          <>
+            <div className={classes.HeadRow}>
+              <div
+                className={clsx(
+                  classes.classTitle,
+                  nodeVars.classTitleColor,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
+                )}
+              >
+                {nodeVars.classTitle ?? '-'}
+              </div>
+
+              {nodeVars.tag != null && nodeVars.tag !== '' && (
+                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{nodeVars.tag}</div>
+              )}
+
+              <div
+                className={clsx(
+                  classes.classSystemName,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
+                )}
+              >
+                {nodeVars.systemName}
+              </div>
+
+              {nodeVars.isWormhole && (
+                <div className={classes.statics}>
+                  {nodeVars.sortedStatics.map(whClass => (
+                    <WormholeClassComp key={whClass} id={whClass} />
+                  ))}
+                </div>
+              )}
+
+              {nodeVars.effectName !== null && nodeVars.isWormhole && (
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
+              )}
+            </div>
+
+            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
+              {nodeVars.customName && (
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
+                  {nodeVars.customName}
+                </div>
+              )}
+
+              {!nodeVars.isWormhole && !nodeVars.customName && (
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
+                  {nodeVars.regionName}
+                </div>
+              )}
+
+              {nodeVars.isWormhole && !nodeVars.customName && <div />}
+
+              <div className="flex items-center justify-end">
+                <div className="flex gap-1 items-center">
+                  {nodeVars.locked && (
+                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
+                  )}
+
+                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
+                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
+                  )}
+
+                  {nodeVars.charactersInSystem.length > 0 && (
+                    <div
+                      className={clsx(classes.localCounter, {
+                        ['text-amber-300']: nodeVars.hasUserCharacters,
+                      })}
+                    >
+                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
+                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      {nodeVars.visible && (
+        <>
+          {nodeVars.unsplashedLeft.length > 0 && (
+            <div className={classes.Unsplashed}>
+              {nodeVars.unsplashedLeft.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+
+          {nodeVars.unsplashedRight.length > 0 && (
+            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
+              {nodeVars.unsplashedRight.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleTop, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Left}
+          id="d"
+        />
+      </div>
+    </>
+  );
+});
+
+SolarSystemNodeDefault.displayName = 'SolarSystemNodeDefault';

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.module.scss

@@ -0,0 +1,91 @@
+@import './SolarSystemNodeDefault.module.scss';
+
+/* ---------------------------
+   Only override what's different
+--------------------------- */
+
+/* 1) .RootCustomNode:
+   - new background-color using CSS var
+   - plus color, font-family, and font-weight */
+.RootCustomNode {
+  background-color: var(--rf-node-bg-color, #202020) !important;
+  color: var(--rf-text-color, #ffffff);
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+}
+
+/* 2) .Bookmarks:
+   - add var-based font family/weight
+*/
+.Bookmarks {
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+}
+
+/* 3) .HeadRow, .classTitle, .classSystemName:
+   - add new references to var-based font family/weight
+*/
+.HeadRow {
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+
+  .classTitle {
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+  }
+
+  @-moz-document url-prefix() {
+    .classSystemName {
+      font-family: var(--rf-node-font-family, inherit) !important;
+      font-weight: var(--rf-node-font-weight, inherit) !important;
+    }
+  }
+
+  .classSystemName {
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+  }
+}
+
+/* 4) .BottomRow:
+   - introduces .tagTitle, .regionName, .customName, .localCounter
+     referencing new CSS variables */
+.BottomRow {
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+
+  .tagTitle {
+    font-size: 11px;
+    font-weight: medium;
+    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+    color: var(--rf-tag-color, #38BDF8);
+  }
+
+  .regionName {
+    color: var(--rf-region-name, #D6D3D1);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+  }
+
+  .customName {
+    color: var(--rf-custom-name, #93C5FD);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+  }
+
+  .localCounter {
+    display: flex;
+    color: var(--rf-has-user-characters, #fbbf24);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+    gap: 2px;
+
+    .hasUserCharacters {
+      color: var(--rf-has-user-characters, #fbbf24);
+      font-family: var(--rf-node-font-family, inherit) !important;
+      font-weight: var(--rf-node-font-weight, inherit) !important;
+    }
+  }
+}

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx

@@ -0,0 +1,219 @@
+import { memo } from 'react';
+import { MapSolarSystemType } from '../../map.types';
+import { Handle, Position, NodeProps } from 'reactflow';
+import clsx from 'clsx';
+import classes from './SolarSystemNodeTheme.module.scss';
+import { PrimeIcons } from 'primereact/api';
+import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
+import {
+  MARKER_BOOKMARK_BG_STYLES,
+  STATUS_CLASSES,
+  EFFECT_BACKGROUND_STYLES,
+} from '@/hooks/Mapper/components/map/constants';
+import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
+import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+
+export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
+  const nodeVars = useSolarSystemNode(props);
+
+  return (
+    <>
+      {nodeVars.visible && (
+        <div className={classes.Bookmarks}>
+          {nodeVars.labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{nodeVars.labelCustom}</span>
+            </div>
+          )}
+
+          {nodeVars.isShattered && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            </div>
+          )}
+
+          {nodeVars.killsCount && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
+              <div className={clsx(classes.BookmarkWithIcon)}>
+                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
+                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+              </div>
+            </div>
+          )}
+
+          {nodeVars.labelsInfo.map(x => (
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
+              {x.shortName}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          classes.RootCustomNode,
+          nodeVars.regionClass && classes[nodeVars.regionClass],
+          classes[STATUS_CLASSES[nodeVars.status]],
+          {
+            [classes.selected]: nodeVars.selected,
+          },
+        )}
+      >
+        {nodeVars.visible && (
+          <>
+            <div className={classes.HeadRow}>
+              <div
+                className={clsx(
+                  classes.classTitle,
+                  nodeVars.classTitleColor,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
+                )}
+              >
+                {nodeVars.classTitle ?? '-'}
+              </div>
+
+              {nodeVars.tag != null && nodeVars.tag !== '' && (
+                <div className={clsx(classes.TagTitle)}>{nodeVars.tag}</div>
+              )}
+
+              <div
+                className={clsx(
+                  classes.classSystemName,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap',
+                )}
+              >
+                {nodeVars.systemName}
+              </div>
+
+              {nodeVars.isWormhole && (
+                <div className={classes.statics}>
+                  {nodeVars.sortedStatics.map(whClass => (
+                    <WormholeClassComp key={whClass} id={whClass} />
+                  ))}
+                </div>
+              )}
+
+              {nodeVars.effectName !== null && nodeVars.isWormhole && (
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
+              )}
+            </div>
+
+            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
+              {nodeVars.customName && (
+                <div
+                  className={clsx(
+                    classes.CustomName,
+                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
+                  )}
+                >
+                  {nodeVars.customName}
+                </div>
+              )}
+
+              {!nodeVars.isWormhole && !nodeVars.customName && (
+                <div
+                  className={clsx(
+                    classes.RegionName,
+                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
+                  )}
+                >
+                  {nodeVars.regionName}
+                </div>
+              )}
+
+              {nodeVars.isWormhole && !nodeVars.customName && <div />}
+
+              <div className="flex items-center justify-end">
+                <div className="flex gap-1 items-center">
+                  {nodeVars.locked && (
+                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
+                  )}
+
+                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
+                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
+                  )}
+
+                  {nodeVars.charactersInSystem.length > 0 && (
+                    <div
+                      className={clsx(classes.localCounter, {
+                        [classes.hasUserCharacters]: nodeVars.hasUserCharacters,
+                      })}
+                    >
+                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
+                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      {nodeVars.visible && (
+        <>
+          {nodeVars.unsplashedLeft.length > 0 && (
+            <div className={classes.Unsplashed}>
+              {nodeVars.unsplashedLeft.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+
+          {nodeVars.unsplashedRight.length > 0 && (
+            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
+              {nodeVars.unsplashedRight.map(sig => (
+                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleTop, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, {
+            [classes.selected]: nodeVars.selected,
+            [classes.Tick]: nodeVars.isThickConnections,
+          })}
+          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Left}
+          id="d"
+        />
+      </div>
+    </>
+  );
+});
+
+SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/index.ts

@@ -1 +1,2 @@
-export * from './SolarSystemNode';
+export * from './SolarSystemNodeDefault';
+export * from './SolarSystemNodeTheme';

assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss

@@ -0,0 +1,22 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
+.Signature {
+  position: relative;
+  top: 3px;
+  display: block;
+
+  & > .Box {
+    width: 13px;
+    height: 4px;
+    border-radius: 4px;
+    color: var(--text-color);
+    font-size: 8px;
+    text-align: center;
+    font-weight: bolder;
+    display: block;
+  }
+
+  & > .Eol {
+    display: block;
+  }
+}

assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.tsx

@@ -0,0 +1,70 @@
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import { InfoDrawer } from '@/hooks/Mapper/components/ui-kit';
+
+import classes from './UnsplashedSignature.module.scss';
+import { SystemSignature } from '@/hooks/Mapper/types/signatures';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { renderInfoColumn } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
+import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
+import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo.ts';
+
+interface UnsplashedSignatureProps {
+  signature: SystemSignature;
+}
+export const UnsplashedSignature = ({ signature }: UnsplashedSignatureProps) => {
+  const {
+    data: { wormholesData },
+  } = useMapRootState();
+
+  const whData = useMemo(() => wormholesData[signature.type], [signature.type, wormholesData]);
+  const whClass = useMemo(() => (whData ? WORMHOLES_ADDITIONAL_INFO[whData.dest] : null), [whData]);
+
+  const customInfo = useMemo(() => {
+    return parseSignatureCustomInfo(signature.custom_info);
+  }, [signature]);
+
+  const k162TypeOption = useMemo(() => {
+    if (!customInfo?.k162Type) {
+      return null;
+    }
+
+    return K162_TYPES_MAP[customInfo.k162Type];
+  }, [customInfo]);
+
+  const isEOL = useMemo(() => {
+    return customInfo?.isEOL;
+  }, [customInfo]);
+
+  const whClassStyle = useMemo(() => {
+    if (signature.type === 'K162' && k162TypeOption) {
+      const k162Data = wormholesData[k162TypeOption.whClassName];
+      const k162Class = k162Data ? WORMHOLES_ADDITIONAL_INFO[k162Data.dest] : null;
+      return k162Class ? WORMHOLE_CLASS_STYLES[k162Class.wormholeClassID] : '';
+    }
+    return whClass ? WORMHOLE_CLASS_STYLES[whClass.wormholeClassID] : '';
+  }, [signature, whClass, k162TypeOption, wormholesData]);
+
+  return (
+    <WdTooltipWrapper
+      className={clsx(classes.Signature)}
+      // @ts-ignore
+      content={
+        <div className="flex flex-col gap-1">
+          <InfoDrawer title={<b className="text-slate-50">{signature.eve_id}</b>}>
+            {renderInfoColumn(signature)}
+          </InfoDrawer>
+        </div>
+      }
+    >
+      <div className={clsx(classes.Box, whClassStyle)}>
+        <svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg">
+          <rect y="1" width="13" height="4" rx="2" className={whClassStyle} fill="currentColor" />
+          {isEOL && <rect x="4" width="5" height="6" rx="1" className={clsx(classes.Eol)} fill="#a153ac" />}
+        </svg>
+      </div>
+    </WdTooltipWrapper>
+  );
+};

assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/index.ts

@@ -0,0 +1 @@
+export * from './UnsplashedSignature.tsx';

assets/js/hooks/Mapper/components/map/constants.ts

@@ -1,4 +1,4 @@
-import { MassState } from '@/hooks/Mapper/types';
+import { ConnectionType, MassState, ShipSizeStatus } from '@/hooks/Mapper/types';
 
 export enum SOLAR_SYSTEM_CLASS_IDS {
   ccp1 = -1,
@@ -712,6 +712,13 @@ export const STATUS_CLASSES: Record<number, string> = {
   [STATUSES.dangerous]: 'eve-system-status-dangerous',
 };
 
+export const TYPE_NAMES_ORDER = [ConnectionType.wormhole, ConnectionType.gate];
+
+export const TYPE_NAMES = {
+  [ConnectionType.wormhole]: 'Wormhole',
+  [ConnectionType.gate]: 'Gate',
+};
+
 export const MASS_STATE_NAMES_ORDER = [MassState.verge, MassState.half, MassState.normal];
 
 export const MASS_STATE_NAMES = {
@@ -720,16 +727,41 @@ export const MASS_STATE_NAMES = {
   [MassState.verge]: 'Verge of collapse',
 };
 
-// export const SHIP_SIZES_NAMES_ORDER = [
-//   ShipSizeStatus.small,
-//   ShipSizeStatus.normal,
-//   // ShipSizeStatus.large,
-//   // ShipSizeStatus.capital,
-// ];
-//
-// export const SHIP_SIZES_NAMES = {
-//   [ShipSizeStatus.small]: 'Frigate',
-//   [ShipSizeStatus.normal]: 'Normal',
-//   // [ShipSizeStatus.large]: 'Normal',
-//   // [ShipSizeStatus.capital]: 'Normal',
-// };
+export const SHIP_SIZES_NAMES_ORDER = [
+  ShipSizeStatus.small,
+  ShipSizeStatus.medium,
+  ShipSizeStatus.large,
+  ShipSizeStatus.freight,
+  ShipSizeStatus.capital,
+];
+
+export const SHIP_SIZES_NAMES = {
+  [ShipSizeStatus.small]: 'Frigate',
+  [ShipSizeStatus.medium]: 'Medium',
+  [ShipSizeStatus.large]: 'Normal',
+  [ShipSizeStatus.freight]: 'Huge',
+  [ShipSizeStatus.capital]: 'Capital',
+};
+export const SHIP_SIZES_SIZE = {
+  [ShipSizeStatus.small]: '5K',
+  [ShipSizeStatus.medium]: '62K',
+  [ShipSizeStatus.large]: '375K',
+  [ShipSizeStatus.freight]: '1M',
+  [ShipSizeStatus.capital]: '2M',
+};
+
+export const SHIP_SIZES_DESCRIPTION = {
+  [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
+  [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',
+  [ShipSizeStatus.large]: 'Large wormhole - up to Battleship | 375K t.',
+  [ShipSizeStatus.freight]: 'Huge wormhole - up to Freighter | 1M t.',
+  [ShipSizeStatus.capital]: 'Capital wormhole - up to Capital | 2M t.',
+};
+
+export const SHIP_SIZES_NAMES_SHORT = {
+  [ShipSizeStatus.small]: 'S',
+  [ShipSizeStatus.medium]: 'M',
+  [ShipSizeStatus.large]: 'L',
+  [ShipSizeStatus.freight]: 'H',
+  [ShipSizeStatus.capital]: 'XL',
+};

assets/js/hooks/Mapper/components/map/helpers/getThemeBehavior.ts

@@ -0,0 +1,32 @@
+import { SolarSystemNodeDefault, SolarSystemNodeTheme } from '../components/SolarSystemNode';
+import type { NodeProps } from 'reactflow';
+import type { ComponentType } from 'react';
+import { MapSolarSystemType } from '../map.types';
+import { ConnectionMode } from 'reactflow';
+
+export type SolarSystemNodeComponent = ComponentType<NodeProps<MapSolarSystemType>>;
+
+interface ThemeBehavior {
+  isPanAndDrag: boolean;
+  nodeComponent: SolarSystemNodeComponent;
+  connectionMode: ConnectionMode;
+}
+
+const THEME_BEHAVIORS: {
+  [key: string]: ThemeBehavior;
+} = {
+  default: {
+    isPanAndDrag: false,
+    nodeComponent: SolarSystemNodeDefault,
+    connectionMode: ConnectionMode.Loose,
+  },
+  pathfinder: {
+    isPanAndDrag: true,
+    nodeComponent: SolarSystemNodeTheme,
+    connectionMode: ConnectionMode.Loose,
+  },
+};
+
+export function getBehaviorForTheme(themeName: string) {
+  return THEME_BEHAVIORS[themeName] ?? THEME_BEHAVIORS.default;
+}

assets/js/hooks/Mapper/components/map/helpers/index.ts

@@ -3,3 +3,4 @@ export * from './convertSystem2Node';
 export * from './getSystemClassStyles';
 export * from './getShapeClass';
 export * from './getBackgroundClass';
+export * from './prepareUnsplashedChunks';

assets/js/hooks/Mapper/components/map/helpers/prepareUnsplashedChunks.ts

@@ -0,0 +1,27 @@
+// Helper function to split an array into chunks of size
+const chunkArray = (array: any[], size: number) => {
+  const chunks = [];
+  for (let i = 0; i < array.length; i += size) {
+    chunks.push(array.slice(i, i + size));
+  }
+  return chunks;
+};
+
+export const prepareUnsplashedChunks = (items: any[]) => {
+  // Split the items into chunks of 4
+  const chunks = chunkArray(items, 4);
+
+  // Get the column elements
+  const leftColumn: any[] = [];
+  const rightColumn: any[] = [];
+
+  chunks.forEach((chunk, index) => {
+    const column = index % 2 === 0 ? leftColumn : rightColumn;
+
+    chunk.forEach(item => {
+      column.push(item);
+    });
+  });
+
+  return [leftColumn, rightColumn];
+};

assets/js/hooks/Mapper/components/map/hooks/api/useMapAddSystems.ts

@@ -12,6 +12,7 @@ export const useMapAddSystems = () => {
   return useCallback((systems: CommandAddSystems) => {
     const { rf } = ref.current;
     const nodes = rf.getNodes();
+
     const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node);
     rf.addNodes(prepared);
   }, []);

assets/js/hooks/Mapper/components/map/hooks/api/useMapRemoveSystems.ts

@@ -5,24 +5,21 @@ import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts
 
 export const useMapRemoveSystems = (onSelectionChange: OnMapSelectionChange) => {
   const rf = useReactFlow();
-  const ref = useRef({ onSelectionChange });
-  ref.current = { onSelectionChange };
+  const ref = useRef({ onSelectionChange, rf });
+  ref.current = { onSelectionChange, rf };
 
-  return useCallback(
-    (systems: CommandRemoveSystems) => {
-      rf.deleteElements({ nodes: systems.map(x => ({ id: `${x}` })) });
+  return useCallback((systems: CommandRemoveSystems) => {
+    ref.current.rf.deleteElements({ nodes: systems.map(x => ({ id: `${x}` })) });
 
-      const newSelection = rf
-        .getNodes()
-        .filter(x => !systems.includes(parseInt(x.id)))
-        .filter(x => x.selected)
-        .map(x => x.id);
+    const newSelection = ref.current.rf
+      .getNodes()
+      .filter(x => !systems.includes(parseInt(x.id)))
+      .filter(x => x.selected)
+      .map(x => x.id);
 
-      ref.current.onSelectionChange({
-        systems: newSelection,
-        connections: [],
-      });
-    },
-    [rf],
-  );
+    ref.current.onSelectionChange({
+      systems: newSelection,
+      connections: [],
+    });
+  }, []);
 };

assets/js/hooks/Mapper/components/map/hooks/api/useMapUpdateSystems.ts

@@ -42,7 +42,7 @@ export const useMapUpdateSystems = () => {
         return newSystem;
       });
 
-      update({ systems: out });
+      update({ systems: out }, true);
     },
     [rf, update],
   );

assets/js/hooks/Mapper/components/map/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useMapHandlers';
 export * from './useUpdateNodes';
+export * from './useNodesEdgesState';

assets/js/hooks/Mapper/components/map/hooks/useBackgroundVars.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { BackgroundVariant } from 'reactflow';
+
+export function useBackgroundVars(themeName?: string) {
+  const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Dots);
+  const [gap, setGap] = useState<number>(16);
+  const [size, setSize] = useState<number>(1);
+  const [color, setColor] = useState('#81818b');
+
+  useEffect(() => {
+    // match any element whose entire `class` attribute ends with "-theme"
+    let themeEl = document.querySelector('[class$="-theme"]');
+
+    // If none is found, fall back to the <html> element
+    if (!themeEl) {
+      themeEl = document.documentElement;
+    }
+
+    const style = getComputedStyle(themeEl as HTMLElement);
+
+    const rawVariant = style.getPropertyValue('--rf-bg-variant').replace(/['"]/g, '').trim().toLowerCase();
+    let finalVariant: BackgroundVariant = BackgroundVariant.Dots;
+
+    if (rawVariant === 'lines') {
+      finalVariant = BackgroundVariant.Lines;
+    } else if (rawVariant === 'cross') {
+      finalVariant = BackgroundVariant.Cross;
+    }
+
+    const cssVarGap = style.getPropertyValue('--rf-bg-gap');
+    const cssVarSize = style.getPropertyValue('--rf-bg-size');
+    const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
+
+    const gapNum = parseInt(cssVarGap, 10) || 16;
+    const sizeNum = parseInt(cssVarSize, 10) || 1;
+
+    setVariant(finalVariant);
+    setGap(gapNum);
+    setSize(sizeNum);
+    setColor(cssColor);
+  }, [themeName]);
+
+  return { variant, gap, size, color };
+}

assets/js/hooks/Mapper/components/map/hooks/useMapHandlers.ts

@@ -19,8 +19,6 @@ import {
   MapHandlers,
 } from '@/hooks/Mapper/types/mapHandlers.ts';
 
-import { useMapEventListener } from '@/hooks/Mapper/events';
-
 import {
   useCommandsCharacters,
   useCommandsConnections,
@@ -60,16 +58,19 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               mapInit(data as CommandInit);
               break;
             case Commands.addSystems:
+              setTimeout(() => mapAddSystems(data as CommandAddSystems), 100);
               break;
             case Commands.updateSystems:
               mapUpdateSystems(data as CommandUpdateSystems);
               break;
             case Commands.removeSystems:
+              setTimeout(() => removeSystems(data as CommandRemoveSystems), 100);
               break;
             case Commands.addConnections:
+              setTimeout(() => addConnections(data as CommandAddConnections), 100);
               break;
             case Commands.removeConnections:
-              removeConnections(data as CommandRemoveConnections);
+              setTimeout(() => removeConnections(data as CommandRemoveConnections), 100);
               break;
             case Commands.charactersUpdated:
               charactersUpdated(data as CommandCharactersUpdated);
@@ -111,13 +112,17 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
                   connections: [],
                 });
                 selectSystem(systemId as CommandSelectSystem);
-              }, 100);
+              }, 500);
               break;
 
             case Commands.routes:
               // do nothing here
               break;
 
+            case Commands.signaturesUpdated:
+              // do nothing here
+              break;
+
             case Commands.linkSignatureToSystem:
               // do nothing here
               break;
@@ -131,20 +136,4 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
     },
     [],
   );
-
-  useMapEventListener(event => {
-    switch (event.name) {
-      case Commands.addConnections:
-        addConnections(event.data as CommandAddConnections);
-        break;
-      case Commands.addSystems:
-        mapAddSystems(event.data as CommandAddSystems);
-        break;
-      case Commands.removeSystems:
-        removeSystems(event.data as CommandRemoveSystems);
-        break;
-      default:
-        break;
-    }
-  });
 };

assets/js/hooks/Mapper/components/map/hooks/useNodesEdgesState.ts

@@ -0,0 +1,36 @@
+import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
+
+import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
+import { OnNodesChange, Edge, OnEdgesChange, Node } from 'reactflow';
+
+/**
+ * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
+ *
+ * @public
+ * @param initialNodes
+ * @returns an array [nodes, setNodes, onNodesChange]
+ */
+export function useNodesState<NodeType extends Node>(
+  initialNodes: NodeType[],
+): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange] {
+  const [nodes, setNodes] = useState(initialNodes);
+  const onNodesChange: OnNodesChange = useCallback(changes => setNodes(nds => applyNodeChanges(changes, nds)), []);
+
+  return [nodes, setNodes, onNodesChange];
+}
+
+/**
+ * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
+ *
+ * @public
+ * @param initialEdges
+ * @returns an array [edges, setEdges, onEdgesChange]
+ */
+export function useEdgesState<EdgeType extends Edge = Edge>(
+  initialEdges: EdgeType[],
+): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange] {
+  const [edges, setEdges] = useState(initialEdges);
+  const onEdgesChange: OnEdgesChange = useCallback(changes => setEdges(eds => applyEdgeChanges(changes, eds)), []);
+
+  return [edges, setEdges, onEdgesChange];
+}

assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts

@@ -0,0 +1,254 @@
+import { useMemo } from 'react';
+import { MapSolarSystemType } from '../map.types';
+import { NodeProps } from 'reactflow';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
+import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
+import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
+import { CharacterTypeRaw, OutCommand } from '@/hooks/Mapper/types';
+import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
+
+function getActivityType(count: number) {
+  if (count <= 5) return 'activityNormal';
+  if (count <= 30) return 'activityWarn';
+  return 'activityDanger';
+}
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: 'Caldaria',
+  [Spaces.Matar]: 'Mataria',
+  [Spaces.Amarr]: 'Amarria',
+  [Spaces.Gallente]: 'Gallente',
+};
+
+function sortedLabels(labels: string[]) {
+  if (!labels) return [];
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+}
+
+export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
+  const { id, data, selected } = props;
+  const {
+    system_static_info,
+    system_signatures,
+    locked,
+    name,
+    tag,
+    status,
+    labels,
+    temporary_name,
+    linked_sig_eve_id: linkedSigEveId = '',
+  } = data;
+
+  const {
+    system_class,
+    security,
+    class_title,
+    solar_system_id,
+    statics,
+    effect_name,
+    region_name,
+    region_id,
+    is_shattered,
+    solar_system_name,
+  } = system_static_info;
+
+  const {
+    interfaceSettings,
+    data: { systemSignatures: mapSystemSignatures },
+  } = useMapRootState();
+
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+  const isShowLinkedSigId = useMapGetOption('show_linked_signature_id') === 'true';
+  const isShowLinkedSigIdTempName = useMapGetOption('show_linked_signature_id_temp_name') === 'true';
+
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+      isThickConnections,
+    },
+    outCommand,
+  } = useMapState();
+
+  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
+
+  const systemSignatures = useMemo(
+    () => mapSystemSignatures[solar_system_id] || system_signatures,
+    [system_signatures, solar_system_id, mapSystemSignatures],
+  );
+
+  const charactersInSystem = useMemo(() => {
+    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
+    // eslint-disable-next-line
+  }, [characters, presentCharacters, solar_system_id]);
+
+  const isWormhole = isWormholeSpace(system_class);
+
+  const classTitleColor = useMemo(
+    () => getSystemClassStyles({ systemClass: system_class, security }),
+    [security, system_class],
+  );
+
+  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
+
+  const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
+
+  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => {
+    if (isShowLinkedSigId && linkedSigPrefix) {
+      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
+    }
+    return labelsManager.customLabel;
+  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
+
+  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
+  const killsActivityType = killsCount ? getActivityType(killsCount) : null;
+
+  const hasUserCharacters = useMemo(() => {
+    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
+  }, [charactersInSystem, userCharacters]);
+
+  const dbClick = useDoubleClick(() => {
+    outCommand({
+      type: OutCommand.openSettings,
+      data: { system_id: solar_system_id.toString() },
+    });
+  });
+
+  const showHandlers = isConnecting || hoverNodeId === id;
+
+  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
+  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+
+  const temporaryName = useMemo(() => {
+    if (!isTempSystemNameEnabled) {
+      return '';
+    }
+
+    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
+      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
+    }
+
+    return temporary_name;
+  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, solar_system_name, temporary_name]);
+
+  const systemName = useMemo(() => {
+    if (isTempSystemNameEnabled && temporaryName) {
+      return temporaryName;
+    }
+    return solar_system_name;
+  }, [isTempSystemNameEnabled, solar_system_name, temporaryName]);
+
+  const customName = (isTempSystemNameEnabled && temporaryName && name) || (solar_system_name !== name && name) || null;
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+    return prepareUnsplashedChunks(
+      systemSignatures
+        .filter(s => s.group === 'Wormhole' && !s.linked_system)
+        .map(s => ({
+          eve_id: s.eve_id,
+          type: s.type,
+          custom_info: s.custom_info,
+        })),
+    );
+  }, [isShowUnsplashedSignatures, systemSignatures]);
+
+  const nodeVars = {
+    id,
+    selected,
+
+    visible,
+    isWormhole,
+    classTitleColor,
+    killsCount,
+    killsActivityType,
+    hasUserCharacters,
+    showHandlers,
+    regionClass,
+    systemName,
+    customName,
+    labelCustom,
+    isShattered: is_shattered,
+    tag,
+    status,
+    labelsInfo,
+    dbClick,
+    sortedStatics,
+    effectName: effect_name,
+    regionName: region_name,
+    solarSystemId: solar_system_id,
+    solarSystemName: solar_system_name,
+    locked,
+    hubs,
+    name: name,
+    isConnecting,
+    hoverNodeId,
+    charactersInSystem,
+    unsplashedLeft,
+    unsplashedRight,
+    isThickConnections,
+    classTitle: class_title,
+    temporaryName: temporary_name,
+  };
+
+  return nodeVars;
+}
+
+export interface SolarSystemNodeVars {
+  id: string;
+  selected: boolean;
+  visible: boolean;
+  isWormhole: boolean;
+  classTitleColor: string | null;
+  killsCount: number | null;
+  killsActivityType: string | null;
+  hasUserCharacters: boolean;
+  showHandlers: boolean;
+  regionClass: string | null;
+  systemName: string;
+  customName?: string | null;
+  labelCustom: string | null;
+  isShattered: boolean;
+  tag?: string | null;
+  status?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  labelsInfo: Array<any>;
+  dbClick: (event?: void) => void;
+  sortedStatics: Array<string | number>;
+  effectName: string | null;
+  regionName: string | null;
+  solarSystemId: number;
+  solarSystemName: string | null;
+  locked: boolean;
+  hubs: string[] | number[];
+  name: string | null;
+  isConnecting: boolean;
+  hoverNodeId: string | null;
+  charactersInSystem: Array<CharacterTypeRaw>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unsplashedLeft: Array<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unsplashedRight: Array<any>;
+  isThickConnections: boolean;
+  classTitle: string | null;
+  temporaryName?: string | null;
+}

assets/js/hooks/Mapper/components/map/map.types.ts

@@ -1,5 +1,6 @@
 import { SolarSystemRawType } from '@/hooks/Mapper/types/system';
 import { SolarSystemConnection } from '@/hooks/Mapper/types';
+import { XYPosition } from 'reactflow';
 
 export type MapSolarSystemType = Omit<SolarSystemRawType, 'position'>;
 
@@ -7,3 +8,5 @@ export type OnMapSelectionChange = (event: {
   systems: string[];
   connections: Pick<SolarSystemConnection, 'source' | 'target'>[];
 }) => void;
+
+export type OnMapAddSystemCallback = (props: { coordinates: XYPosition | null }) => void;

assets/js/hooks/Mapper/components/map/styles/default-theme.scss

@@ -0,0 +1,31 @@
+@import './eve-common-variables';
+@import './eve-common';
+
+.default-theme {
+  --rf-bg-color: #0C0A09;
+  --rf-soft-bg-color: #171717;
+
+  --rf-node-bg-color: #202020;
+  --rf-node-soft-bg-color: #202020;
+  --rf-text-color: #ffffff;
+  --rf-tag-color:  #38BDF8;
+  --rf-region-name: #D6D3D1;
+  --rf-custom-name: #93C5FD;
+
+
+  --rf-bg-variant: "dots";
+  --rf-bg-gap: 15;
+  --rf-bg-size: 1;
+  --rf-bg-pattern-color: #81818a;
+
+  --pastel-blue: #5a7d9a;
+  --pastel-pink: #d291bc;
+  --pastel-green: #88b04b;
+  --pastel-yellow: #ffdd59;
+
+  --dark-bg: #2d2d2d;
+  --text-color: #ffffff;
+  --tooltip-bg: #202020;
+
+  --window-corner: #72716f;
+}

assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss

@@ -1,78 +1,121 @@
-$eve-link-color-default: #333;
-$eve-link-color-top-mass-0: #333;
-$eve-link-color-top-mass-1: #5a4520;
-$eve-link-color-top-mass-2: #672c2c;
-$eve-link-color-middle-mass-0: #333;
-$eve-link-color-middle-mass-1: #333;
-$eve-link-color-middle-mass-2: #333;
-$eve-link-color-middle-time-0: #5c5c5c;
-$eve-link-color-middle-time-1: #ff00cd;
-$eve-link-color-middle-time-1-border: #99f3ff;
 
-$eve-link-color-top-mass-1-time-1: #796300;
-$eve-link-color-top-mass-2-time-1: #8c1717;
-$eve-link-color-temp: orange;
+$friendlyBase: #3bbd39;              
+$friendlyAlpha: #3bbd3952;           
+$friendlyDark20: darken($friendlyBase, 20%);
+$friendlyDark30: darken($friendlyBase, 30%);
+$friendlyDark5:  darken($friendlyBase, 5%);
 
-$eve-effect-pulsar: #40aef5;
-$eve-effect-magnetar: #f058f8;
-$eve-effect-wolfRayet: #ef7843;
-$eve-effect-blackHole: #1b1b1b;
-$eve-effect-cataclysmicVariable: #ffea90;
-$eve-effect-redGiant: #fd3c3c;
-$eve-effect-dazhLiminalityLocus: #ff6464;
-$eve-effect-imperialStellarObservatory: #6991ce;
-$eve-effect-stateStellarObservatory: #6991ce;
-$eve-effect-republicStellarObservatory: #6991ce;
-$eve-effect-federalStellarObservatory: #6991ce;
+$lookingForBase: #43c2fd;            
+$lookingForAlpha: rgba(67, 176, 253, 0.48);
+$lookingForDark15: darken($lookingForBase, 15%);
 
-$eve-wh-type-color-high: #5dffd2;
-$eve-wh-type-color-low: #f79400;
-$eve-wh-type-color-null: #fc3c3c;
-$eve-wh-type-color-c1: #69bfce;
-$eve-wh-type-color-c2: #6991ce;
-$eve-wh-type-color-c3: #a8cb70;
-$eve-wh-type-color-c4: #e39c68;
-$eve-wh-type-color-c5: #de8686;
-$eve-wh-type-color-c6: #e76363;
-$eve-wh-type-color-c13: #988cb5;
-$eve-wh-type-color-drifter: #ff44f6;
-$eve-wh-type-color-thera: #ffffff;
-$eve-wh-type-color-zarzakh: #212121;
+$homeBase: rgb(197, 253, 67);
+$homeAlpha: rgba(197, 253, 67, 0.32);
+$homeDark30: darken($homeBase, 30%);
 
-$eve-security-color-10: #2c74df;
-$eve-security-color-09: #3998e8;
-$eve-security-color-08: #4dcbf5;
-$eve-security-color-07: #60d8a2;
-$eve-security-color-06: #71e454;
-$eve-security-color-05: #f2fc81;
-$eve-security-color-04: #d96c07;
-$eve-security-color-03: #cb440f;
-$eve-security-color-02: #b91117;
-$eve-security-color-01: #732020;
-$eve-security-color-00: #8b3263;
-$eve-security-color-m-01: #8b3263;
-$eve-security-color-m-02: #8b3263;
-$eve-security-color-m-03: #8b3263;
-$eve-security-color-m-04: #8b3263;
-$eve-security-color-m-05: #8b3263;
-$eve-security-color-m-06: #8b3263;
-$eve-security-color-m-07: #8b3263;
-$eve-security-color-m-08: #8b3263;
-$eve-security-color-m-09: #8b3263;
-$eve-security-color-m-10: #8b3263;
 
-$eve-solar-system-status-unknown: transparent;
-$eve-solar-system-status-friendly: #3bbd3952;
-$eve-solar-system-status-warning: #906518a6;
-$eve-solar-system-status-target: #b439ff6b;
-$eve-solar-system-status-dangerous: #d54040;
-$eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
-$eve-solar-system-status-home: rgb(197, 253, 67);
+:root {
+  --pastel-blue: #5a7d9a;
+  --pastel-pink: #d291bc;
+  --pastel-green: #88b04b;
+  --pastel-yellow: #ffdd59;
+  --dark-bg: #2d2d2d;
+  --text-color: #ffffff;
+  --tooltip-bg: #202020;
 
-$eve-solar-system-status-color-unknown: transparent;
-$eve-solar-system-status-color-friendly: #3bbd39;
-$eve-solar-system-status-color-warning: #ffb93b;
-$eve-solar-system-status-color-target: #b439ff;
-$eve-solar-system-status-color-dangerous: #d54040;
-$eve-solar-system-status-color-lookingFor: #43c2fd;
-$eve-solar-system-status-color-home: rgb(197, 253, 67);
+  --pastel-blue-darken10: #4f6b86;
+  --pastel-blue-lighten10: #6da3af;
+  --pastel-pink-darken10: #bb7ca9;
+  --pastel-pink-lighten10: #e0a6cb;
+  --pastel-green-darken10: #79a244;
+  --pastel-green-lighten10: #99cf52;
+  --pastel-yellow-darken10: #e6c44f;
+  --pastel-yellow-lighten10: #ffe874;
+
+  --eve-link-color-default: #333;
+  --eve-link-color-top-mass-0: #333;
+  --eve-link-color-top-mass-1: #5a4520;
+  --eve-link-color-top-mass-2: #672c2c;
+  --eve-link-color-middle-mass-0: #333;
+  --eve-link-color-middle-mass-1: #333;
+  --eve-link-color-middle-mass-2: #333;
+  --eve-link-color-middle-time-0: #5c5c5c;
+  --eve-link-color-middle-time-1: #ff00cd;
+  --eve-link-color-middle-time-1-border: #99f3ff;
+  --eve-link-color-top-mass-1-time-1: #796300;
+  --eve-link-color-top-mass-2-time-1: #8c1717;
+  --eve-link-color-temp: orange;
+
+  --eve-effect-pulsar: #40aef5;
+  --eve-effect-magnetar: #f058f8;
+  --eve-effect-wolfRayet: #ef7843;
+  --eve-effect-blackHole: #1b1b1b;
+  --eve-effect-cataclysmicVariable: #ffea90;
+  --eve-effect-redGiant: #fd3c3c;
+  --eve-effect-dazhLiminalityLocus: #ff6464;
+  --eve-effect-imperialStellarObservatory: #6991ce;
+  --eve-effect-stateStellarObservatory: #6991ce;
+  --eve-effect-republicStellarObservatory: #6991ce;
+  --eve-effect-federalStellarObservatory: #6991ce;
+
+  --eve-wh-type-color-high: #5dffd2;
+  --eve-wh-type-color-low: #f79400;
+  --eve-wh-type-color-null: #fc3c3c;
+  --eve-wh-type-color-c1: #69bfce;
+  --eve-wh-type-color-c2: #6991ce;
+  --eve-wh-type-color-c3: #a8cb70;
+  --eve-wh-type-color-c4: #e39c68;
+  --eve-wh-type-color-c5: #de8686;
+  --eve-wh-type-color-c6: #e76363;
+  --eve-wh-type-color-c13: #988cb5;
+  --eve-wh-type-color-drifter: #ff44f6;
+  --eve-wh-type-color-thera: #ffffff;
+  --eve-wh-type-color-zarzakh: #212121;
+
+  --eve-security-color-10: #2c74df;
+  --eve-security-color-09: #3998e8;
+  --eve-security-color-08: #4dcbf5;
+  --eve-security-color-07: #60d8a2;
+  --eve-security-color-06: #71e454;
+  --eve-security-color-05: #f2fc81;
+  --eve-security-color-04: #d96c07;
+  --eve-security-color-03: #cb440f;
+  --eve-security-color-02: #b91117;
+  --eve-security-color-01: #732020;
+  --eve-security-color-00: #8b3263;
+  --eve-security-color-m-01: #8b3263;
+  --eve-security-color-m-02: #8b3263;
+  --eve-security-color-m-03: #8b3263;
+  --eve-security-color-m-04: #8b3263;
+  --eve-security-color-m-05: #8b3263;
+  --eve-security-color-m-06: #8b3263;
+  --eve-security-color-m-07: #8b3263;
+  --eve-security-color-m-08: #8b3263;
+  --eve-security-color-m-09: #8b3263;
+  --eve-security-color-m-10: #8b3263;
+
+  --eve-solar-system-status-unknown: transparent;
+  --eve-solar-system-status-color-unknown: transparent;
+  --eve-solar-system-status-home:                #{$homeAlpha};
+  --eve-solar-system-status-color-home:          #{$homeBase};
+  --eve-solar-system-status-color-home-dark30:   #{$homeDark30};
+  --eve-solar-system-status-friendly:            #{$friendlyAlpha};
+  --eve-solar-system-status-color-friendly:      #{$friendlyBase};
+  --eve-solar-system-status-friendly-dark30:     #{$friendlyDark30};
+  --eve-solar-system-status-color-friendly-dark20: #{$friendlyDark20};
+  --eve-solar-system-status-color-friendly-dark5:  #{$friendlyDark5};
+  --eve-solar-system-status-lookingFor:              #{$lookingForAlpha};
+  --eve-solar-system-status-color-lookingFor:        #{$lookingForBase};
+  --eve-solar-system-status-color-lookingFor-dark15: #{$lookingForDark15};
+  --eve-solar-system-status-warning: #906518a6;
+  --eve-solar-system-status-color-warning: #ffb93b;
+  --eve-solar-system-status-target: #b439ff6b;
+  --eve-solar-system-status-color-target: #b439ff;
+  --eve-solar-system-status-dangerous: #d54040;
+  --eve-solar-system-status-color-dangerous: #d54040;
+
+  --conn-time-eol: #7452c3e3;
+  --conn-frigate: #325d88;
+  --conn-save: rgba(155, 102, 45, 0.85);
+  --selected-item-bg: rgba(98, 98, 98, 0.33);
+}

assets/js/hooks/Mapper/components/map/styles/eve-common.scss

@@ -1,535 +1,504 @@
-@import "eve-common-variables";
+@import './eve-common-variables';
+
 
 .eve-wh-effect-color-pulsar {
-  fill: $eve-effect-pulsar;
-  background-color: $eve-effect-pulsar;
+  fill: var(--eve-effect-pulsar);
+  background-color: var(--eve-effect-pulsar);
 }
 
 .eve-wh-effect-color-magnetar {
-  fill: $eve-effect-magnetar;
-  background-color: $eve-effect-magnetar;
+  fill: var(--eve-effect-magnetar);
+  background-color: var(--eve-effect-magnetar);
 }
 
 .eve-wh-effect-color-wolfRayet {
-  fill: $eve-effect-wolfRayet;
-  background-color: $eve-effect-wolfRayet;
+  fill: var(--eve-effect-wolfRayet);
+  background-color: var(--eve-effect-wolfRayet);
 }
 
 .eve-wh-effect-color-blackHole {
-  fill: $eve-effect-blackHole;
-  background-color: $eve-effect-blackHole;
-  box-shadow: 0 0 8px rgba(255 255 255 / 33);
+  fill: var(--eve-effect-blackHole);
+  background-color: var(--eve-effect-blackHole);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
 }
 
 .eve-wh-effect-color-cataclysmicVariable {
-  fill: $eve-effect-cataclysmicVariable;
-  background-color: $eve-effect-cataclysmicVariable;
+  fill: var(--eve-effect-cataclysmicVariable);
+  background-color: var(--eve-effect-cataclysmicVariable);
 }
 
 .eve-wh-effect-color-redGiant {
-  fill: $eve-effect-redGiant;
-  background-color: $eve-effect-redGiant;
+  fill: var(--eve-effect-redGiant);
+  background-color: var(--eve-effect-redGiant);
 }
 
 .text-eve-wh-effect-color-pulsar {
-  color: $eve-effect-pulsar;
+  color: var(--eve-effect-pulsar);
 }
-
 .text-eve-wh-effect-color-magnetar {
-  color: $eve-effect-magnetar;
+  color: var(--eve-effect-magnetar);
 }
-
 .text-eve-wh-effect-color-wolfRayet {
-  color: $eve-effect-wolfRayet;
+  color: var(--eve-effect-wolfRayet);
 }
-
 .text-eve-wh-effect-color-blackHole {
   color: #fff;
 }
-
 .text-eve-wh-effect-color-cataclysmicVariable {
-  color: $eve-effect-cataclysmicVariable;
+  color: var(--eve-effect-cataclysmicVariable);
 }
-
 .text-eve-wh-effect-color-redGiant {
-  color: $eve-effect-redGiant;
+  color: var(--eve-effect-redGiant);
 }
-
 .text-eve-wh-effect-color-dazhLiminalityLocus {
-  color: $eve-effect-dazhLiminalityLocus;
+  color: var(--eve-effect-dazhLiminalityLocus);
 }
-
 .text-eve-wh-effect-color-imperialStellarObservatory {
-  color: $eve-effect-imperialStellarObservatory;
+  color: var(--eve-effect-imperialStellarObservatory);
 }
-
 .text-eve-wh-effect-color-stateStellarObservatory {
-  color: $eve-effect-stateStellarObservatory;
+  color: var(--eve-effect-stateStellarObservatory);
 }
-
 .text-eve-wh-effect-color-republicStellarObservatory {
-  color: $eve-effect-republicStellarObservatory;
+  color: var(--eve-effect-republicStellarObservatory);
 }
-
 .text-eve-wh-effect-color-federalStellarObservatory {
-  color: $eve-effect-federalStellarObservatory;
+  color: var(--eve-effect-federalStellarObservatory);
 }
 
+/* Security color classes */
 .eve-security-color-10 {
-  color: $eve-security-color-10 !important;
-  fill: $eve-security-color-10;
+  color: var(--eve-security-color-10) !important;
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-color-09 {
-  color: $eve-security-color-09 !important;
-  fill: $eve-security-color-09;
+  color: var(--eve-security-color-09) !important;
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-color-08 {
-  color: $eve-security-color-08 !important;
-  fill: $eve-security-color-08;
+  color: var(--eve-security-color-08) !important;
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-color-07 {
-  color: $eve-security-color-07 !important;
-  fill: $eve-security-color-07;
+  color: var(--eve-security-color-07) !important;
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-color-06 {
-  color: $eve-security-color-06 !important;
-  fill: $eve-security-color-06;
+  color: var(--eve-security-color-06) !important;
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-color-05 {
-  color: $eve-security-color-05 !important;
-  fill: $eve-security-color-05;
+  color: var(--eve-security-color-05) !important;
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-color-04 {
-  color: $eve-security-color-04 !important;
-  fill: $eve-security-color-04;
+  color: var(--eve-security-color-04) !important;
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-color-03 {
-  color: $eve-security-color-03 !important;
-  fill: $eve-security-color-03;
+  color: var(--eve-security-color-03) !important;
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-color-02 {
-  color: $eve-security-color-02 !important;
-  fill: $eve-security-color-02;
+  color: var(--eve-security-color-02) !important;
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-color-01 {
-  color: $eve-security-color-01 !important;
-  fill: $eve-security-color-01;
+  color: var(--eve-security-color-01) !important;
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-color-00 {
-  color: $eve-security-color-00 !important;
-  fill: $eve-security-color-00;
+  color: var(--eve-security-color-00) !important;
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-color-m-01 {
-  color: $eve-security-color-m-01 !important;
-  fill: $eve-security-color-m-01;
+  color: var(--eve-security-color-m-01) !important;
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-color-m-02 {
-  color: $eve-security-color-m-02 !important;
-  fill: $eve-security-color-m-02;
+  color: var(--eve-security-color-m-02) !important;
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-color-m-03 {
-  color: $eve-security-color-m-03 !important;
-  fill: $eve-security-color-m-03;
+  color: var(--eve-security-color-m-03) !important;
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-color-m-04 {
-  color: $eve-security-color-m-04 !important;
-  fill: $eve-security-color-m-04;
+  color: var(--eve-security-color-m-04) !important;
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-color-m-05 {
-  color: $eve-security-color-m-05 !important;
-  fill: $eve-security-color-m-05;
+  color: var(--eve-security-color-m-05) !important;
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-color-m-06 {
-  color: $eve-security-color-m-06 !important;
-  fill: $eve-security-color-m-06;
+  color: var(--eve-security-color-m-06) !important;
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-color-m-07 {
-  color: $eve-security-color-m-07 !important;
-  fill: $eve-security-color-m-07;
+  color: var(--eve-security-color-m-07) !important;
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-color-m-08 {
-  color: $eve-security-color-m-08 !important;
-  fill: $eve-security-color-m-08;
+  color: var(--eve-security-color-m-08) !important;
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-color-m-09 {
-  color: $eve-security-color-m-09 !important;
-  fill: $eve-security-color-m-09;
+  color: var(--eve-security-color-m-09) !important;
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-color-m-10 {
-  color: $eve-security-color-m-10 !important;
-  fill: $eve-security-color-m-10;
+  color: var(--eve-security-color-m-10) !important;
+  fill: var(--eve-security-color-m-10);
 }
 
+/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: $eve-security-color-10;
-  fill: $eve-security-color-10;
+  background-color: var(--eve-security-color-10);
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-background-09 {
-  background-color: $eve-security-color-09;
-  fill: $eve-security-color-09;
+  background-color: var(--eve-security-color-09);
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-background-08 {
-  background-color: $eve-security-color-08;
-  fill: $eve-security-color-08;
+  background-color: var(--eve-security-color-08);
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-background-07 {
-  background-color: $eve-security-color-07;
-  fill: $eve-security-color-07;
+  background-color: var(--eve-security-color-07);
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-background-06 {
-  background-color: $eve-security-color-06;
-  fill: $eve-security-color-06;
+  background-color: var(--eve-security-color-06);
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-background-05 {
-  background-color: $eve-security-color-05;
-  fill: $eve-security-color-05;
+  background-color: var(--eve-security-color-05);
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-background-04 {
-  background-color: $eve-security-color-04;
-  fill: $eve-security-color-04;
+  background-color: var(--eve-security-color-04);
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-background-03 {
-  background-color: $eve-security-color-03;
-  fill: $eve-security-color-03;
+  background-color: var(--eve-security-color-03);
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-background-02 {
-  background-color: $eve-security-color-02;
-  fill: $eve-security-color-02;
+  background-color: var(--eve-security-color-02);
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-background-01 {
-  background-color: $eve-security-color-01;
-  fill: $eve-security-color-01;
+  background-color: var(--eve-security-color-01);
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-background-00 {
-  background-color: $eve-security-color-00;
-  fill: $eve-security-color-00;
+  background-color: var(--eve-security-color-00);
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-background-m-01 {
-  background-color: $eve-security-color-m-01;
-  fill: $eve-security-color-m-01;
+  background-color: var(--eve-security-color-m-01);
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-background-m-02 {
-  background-color: $eve-security-color-m-02;
-  fill: $eve-security-color-m-02;
+  background-color: var(--eve-security-color-m-02);
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-background-m-03 {
-  background-color: $eve-security-color-m-03;
-  fill: $eve-security-color-m-03;
+  background-color: var(--eve-security-color-m-03);
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-background-m-04 {
-  background-color: $eve-security-color-m-04;
-  fill: $eve-security-color-m-04;
+  background-color: var(--eve-security-color-m-04);
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-background-m-05 {
-  background-color: $eve-security-color-m-05;
-  fill: $eve-security-color-m-05;
+  background-color: var(--eve-security-color-m-05);
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-background-m-06 {
-  background-color: $eve-security-color-m-06;
-  fill: $eve-security-color-m-06;
+  background-color: var(--eve-security-color-m-06);
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-background-m-07 {
-  background-color: $eve-security-color-m-07;
-  fill: $eve-security-color-m-07;
+  background-color: var(--eve-security-color-m-07);
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-background-m-08 {
-  background-color: $eve-security-color-m-08;
-  fill: $eve-security-color-m-08;
+  background-color: var(--eve-security-color-m-08);
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-background-m-09 {
-  background-color: $eve-security-color-m-09;
-  fill: $eve-security-color-m-09;
+  background-color: var(--eve-security-color-m-09);
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-background-m-10 {
-  background-color: $eve-security-color-m-10;
-  fill: $eve-security-color-m-10;
+  background-color: var(--eve-security-color-m-10);
+  fill: var(--eve-security-color-m-10);
 }
 
+/* WH Type color classes */
 .eve-wh-type-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high) !important;
+  fill: var(--eve-wh-type-color-high);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low) !important;
+  fill: var(--eve-wh-type-color-low);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null) !important;
+  fill: var(--eve-wh-type-color-null);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c1 {
-  color: $eve-wh-type-color-c1 !important;
-  fill: $eve-wh-type-color-c1;
+  color: var(--eve-wh-type-color-c1) !important;
+  fill: var(--eve-wh-type-color-c1);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c2 {
-  color: $eve-wh-type-color-c2 !important;
-  fill: $eve-wh-type-color-c2;
+  color: var(--eve-wh-type-color-c2) !important;
+  fill: var(--eve-wh-type-color-c2);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c3 {
-  color: $eve-wh-type-color-c3 !important;
-  fill: $eve-wh-type-color-c3;
+  color: var(--eve-wh-type-color-c3) !important;
+  fill: var(--eve-wh-type-color-c3);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c4 {
-  color: $eve-wh-type-color-c4 !important;
-  fill: $eve-wh-type-color-c4;
+  color: var(--eve-wh-type-color-c4) !important;
+  fill: var(--eve-wh-type-color-c4);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c5 {
-  color: $eve-wh-type-color-c5 !important;
-  fill: $eve-wh-type-color-c5;
+  color: var(--eve-wh-type-color-c5) !important;
+  fill: var(--eve-wh-type-color-c5);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c6 {
-  color: $eve-wh-type-color-c6 !important;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6) !important;
+  fill: var(--eve-wh-type-color-c6);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c13 {
-  color: $eve-wh-type-color-c13 !important;
-  fill: $eve-wh-type-color-c13;
+  color: var(--eve-wh-type-color-c13) !important;
+  fill: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-color-drifter {
-  color: $eve-wh-type-color-drifter !important;
-  fill: $eve-wh-type-color-drifter;
+  color: var(--eve-wh-type-color-drifter) !important;
+  fill: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-color-thera {
-  color: $eve-wh-type-color-thera !important;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera) !important;
+  fill: var(--eve-wh-type-color-thera);
 }
 
+/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-wh-type-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-wh-type-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-wh-type-background-c1 {
-  background-color: $eve-wh-type-color-c1;
+  background-color: var(--eve-wh-type-color-c1);
 }
-
 .eve-wh-type-background-c2 {
-  background-color: $eve-wh-type-color-c2;
+  background-color: var(--eve-wh-type-color-c2);
 }
-
 .eve-wh-type-background-c3 {
-  background-color: $eve-wh-type-color-c3;
+  background-color: var(--eve-wh-type-color-c3);
 }
-
 .eve-wh-type-background-c4 {
-  background-color: $eve-wh-type-color-c4;
+  background-color: var(--eve-wh-type-color-c4);
 }
-
 .eve-wh-type-background-c5 {
-  background-color: $eve-wh-type-color-c5;
+  background-color: var(--eve-wh-type-color-c5);
 }
-
 .eve-wh-type-background-c6 {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-wh-type-background-c13 {
-  background-color: $eve-wh-type-color-c13;
+  background-color: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-background-drifter {
-  background-color: $eve-wh-type-color-drifter;
+  background-color: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-wh-type-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }
 
+/* Kind color classes */
 .eve-kind-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high);
+  fill: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low);
+  fill: var(--eve-wh-type-color-low);
   font-weight: bold;
 }
-
 .eve-kind-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null);
+  fill: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-color-wh {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-thera {
-  color: $eve-wh-type-color-thera;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera);
+  fill: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-color-abyss {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-penalty {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-pochven {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-zarzakh {
-  color: $eve-wh-type-color-zarzakh;
-  fill: $eve-wh-type-color-zarzakh;
+  color: var(--eve-wh-type-color-zarzakh);
+  fill: var(--eve-wh-type-color-zarzakh);
 }
 
+/* Kind backgrounds */
 .eve-kind-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-kind-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-background-wh {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-background-abyss {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-penalty {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-pochven {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }
 
+/* System status color classes */
 .eve-system-status-color-clear {
-  color: $eve-solar-system-status-color-unknown;
+  color: var(--eve-solar-system-status-color-unknown);
 }
-
 .eve-system-status-color-home {
-  color: $eve-solar-system-status-color-home;
+  color: var(--eve-solar-system-status-color-home);
 }
-
 .eve-system-status-color-friendly {
-  color: $eve-solar-system-status-color-friendly;
+  color: var(--eve-solar-system-status-color-friendly);
 }
-
 .eve-system-status-color-lookingFor {
-  color: $eve-solar-system-status-color-lookingFor;
+  color: var(--eve-solar-system-status-color-lookingFor);
 }
-
 .eve-system-status-color-warning {
-  color: $eve-solar-system-status-color-warning;
+  color: var(--eve-solar-system-status-color-warning);
 }
-
 .eve-system-status-color-target {
-  color: $eve-solar-system-status-color-target;
+  color: var(--eve-solar-system-status-color-target);
+}
+.eve-system-status-color-dangerous {
+  color: var(--eve-solar-system-status-color-dangerous);
 }
 
-.eve-system-status-color-dangerous {
-  color: $eve-solar-system-status-color-dangerous;
+.eve-system-status-clear {
+  background-color: var(--eve-solar-system-status-unknown);
+}
+.eve-system-status-home {
+  background-color: var(--eve-solar-system-status-home);
+}
+.eve-system-status-friendly {
+  background-color: var(--eve-solar-system-status-friendly);
+}
+.eve-system-status-lookingFor {
+  background-color: var(--eve-solar-system-status-lookingFor);
+}
+.eve-system-status-warning {
+  background-color: var(--eve-solar-system-status-warning);
+}
+.eve-system-status-target {
+  background-color: var(--eve-solar-system-status-target);
+}
+.eve-system-status-dangerous {
+  background-color: var(--eve-solar-system-status-dangerous);
+}
+
+.eve-system-status-clear {
+  background-color: var(--eve-solar-system-status-unknown);
+  color: var(--eve-solar-system-status-color-unknown);
+}
+
+.eve-system-status-home {
+  background-color: var(--eve-solar-system-status-home);
+  color: var(--eve-solar-system-status-color-home);
+}
+
+.eve-system-status-friendly {
+  background-color: var(--eve-solar-system-status-friendly);
+  color: var(--eve-solar-system-status-color-friendly);
+}
+
+.eve-system-status-lookingFor {
+  background-color: var(--eve-solar-system-status-lookingFor);
+  color: var(--eve-solar-system-status-color-lookingFor);
+}
+
+.eve-system-status-warning {
+  background-color: var(--eve-solar-system-status-warning);
+  color: var(--eve-solar-system-status-color-warning);
+}
+
+.eve-system-status-target {
+  background-color: var(--eve-solar-system-status-target);
+  color: var(--eve-solar-system-status-color-target);
+}
+
+.eve-system-status-dangerous {
+  background-color: var(--eve-solar-system-status-dangerous);
+  color: var(--eve-solar-system-status-color-dangerous);
 }
 
 .wd-route-system-shape-triangle {
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }
-
 .wd-route-system-shape-circle {
   border-radius: 40%;
 }
 
+/* Some additional background classes */
 .wd-marker-bookmark-color-shattered {
   background-color: #833ca4;
   margin-top: 1px;
 }
 
-
 .wd-marker-bookmark-color-custom {
   background-color: #282828;
   border: 1px solid #4c4c4c;
@@ -572,3 +541,49 @@
 .wd-marker-bookmark-color-danger {
   background-color: #d10600;
 }
+
+.react-flow {
+  color: var(--text-color);
+
+  &__pane {
+    cursor: auto;
+  }
+
+  &__minimap {
+    background-color: rgba(66, 66, 66, 1);
+    opacity: 0.7;
+    border: 1px solid #2f2f2f;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__minimap-mask {
+    fill: rgba(28, 28, 28, 0.75);
+  }
+
+  &__controls {
+    filter: brightness(1.5);
+  }
+
+  &__minimap-node {
+    fill: #ffb03a;
+  }
+}
+
+.context-menu-active {
+  background-color: rgba(131, 131, 131, 0.33);
+}
+
+.p-dialog {
+  .p-dialog-header {
+    height: 40px;
+    padding: 1rem;
+    padding-right: 10px !important;
+  }
+  .p-dialog-title {
+    font-size: 1rem !important;
+  }
+  .p-dialog-header-icons {
+    align-self: initial !important;
+  }
+}

assets/js/hooks/Mapper/components/map/styles/index.scss

@@ -0,0 +1,2 @@
+@import './default-theme.scss'; 
+@import './pathfinder-theme.scss'; 

assets/js/hooks/Mapper/components/map/styles/neon-theme.scss

@@ -1,74 +0,0 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;
-
-.react-flow {
-  // background-color: $dark-bg;
-  color: $text-color;
-
-  &__node {
-    //cursor: auto;
-  }
-
-  &__pane {
-    cursor: auto;
-  }
-  //&__edge {
-  //  stroke: $pastel-pink;
-  //  stroke-width: 2px;
-  //
-  //  &.selected {
-  //    stroke: $pastel-yellow;
-  //  }
-  //}
-
-  &__handle {
-    //background-color: $pastel-green;
-    //box-shadow: 0 0 5px rgba($pastel-green, 0.5);
-  }
-
-  &__minimap {
-    background-color: rgba(66, 66, 66, 1);
-    opacity: 0.7;
-    //backdrop-filter: blur(5px);
-    border: 1px solid #2f2f2f;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  &__minimap-mask {
-    fill: rgba(28, 28, 28, 0.75);
-  }
-
-  &__controls {
-    filter: brightness(1.5);
-  }
-
-  &__minimap-node {
-    fill: #ffb03a;
-  }
-}
-
-.context-menu-active {
-  background-color: rgba(131, 131, 131, 0.33);
-}
-
-.p-dialog {
-  .p-dialog-header {
-    height: 40px;
-    padding: 1rem;
-    padding-right: 10px !important;
-  }
-
-  .p-dialog-title {
-    font-size: 1rem !important;
-  }
-
-  .p-dialog-header-icons {
-    align-self: initial !important;
-  }
-}

assets/js/hooks/Mapper/components/map/styles/neon-variables.scss

@@ -1,7 +0,0 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;

assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss

@@ -0,0 +1,51 @@
+@import './eve-common-variables';
+@import './eve-common';
+@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
+
+.pathfinder-theme {
+  --rf-bg-color: #000000;
+  --rf-soft-bg-color: #282828;
+
+  --rf-node-bg-color: #202020;
+  --rf-node-soft-bg-color: #313335;
+  --rf-node-font-weight: bold;
+  --rf-text-color: #adadad;
+  --rf-region-name: var(--rf-text-color);
+  --rf-custom-name: var(--rf-text-color);
+
+  --tooltip-bg: #202020;
+
+  --rf-bg-variant: "lines";
+  --rf-bg-gap: 32;
+  --rf-bg-size: 1;
+  --rf-bg-pattern-color: #313131;
+
+  --eve-effect-pulsar: #428bca;
+  --eve-effect-magnetar: #e06fdf;
+  --eve-effect-wolfRayet: #e28a0d;
+  --eve-effect-blackHole: #000000;
+  --eve-effect-cataclysmicVariable: #ffffbb;
+  --eve-effect-redGiant: #d9534f;
+
+  --eve-wh-type-color-high: #5cb85c;
+  --eve-wh-type-color-low: #e28a0d;
+  --eve-wh-type-color-null: #d9534f;
+  --eve-wh-type-color-c1: #428bca;
+  --eve-wh-type-color-c2: #428bca;
+  --eve-wh-type-color-c3: #e28a0d;
+  --eve-wh-type-color-c4: #e28a0d;
+  --eve-wh-type-color-c5: #d9534f;
+  --eve-wh-type-color-c6: #d9534f;
+  --eve-wh-type-color-c13: #7986cb;
+  --eve-wh-type-color-drifter: #44aa82;
+
+  --rf-node-font-weight: bold;
+  --rf-node-line-height: normal;
+  --rf-node-font-family: 'Oxygen', sans-serif;
+  --rf-node-text-color: var(--pf-text-color);
+
+  --rf-tag-color: #fbbf24;
+  --rf-has-user-characters: #5cb85c;
+
+  --window-corner: #72716f;
+}

assets/js/hooks/Mapper/components/map/utils/changes.ts

@@ -0,0 +1,174 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { EdgeChange, NodeChange, Node, Edge } from 'reactflow';
+
+// This function applies changes to nodes or edges that are triggered by React Flow internally.
+// When you drag a node for example, React Flow will send a position change update.
+// This function then applies the changes and returns the updated elements.
+function applyChanges(changes: any[], elements: any[]): any[] {
+  // we need this hack to handle the setNodes and setEdges function of the useReactFlow hook for controlled flows
+  if (changes.some(c => c.type === 'reset')) {
+    return changes.filter(c => c.type === 'reset').map(c => c.item);
+  }
+
+  const updatedElements: any[] = [];
+  // By storing a map of changes for each element, we can a quick lookup as we
+  // iterate over the elements array!
+  const changesMap = new Map<any, any[]>();
+  const addItemChanges: any[] = [];
+
+  for (const change of changes) {
+    if (change.type === 'add') {
+      addItemChanges.push(change);
+      continue;
+    } else if (change.type === 'remove' || change.type === 'replace') {
+      // For a 'remove' change we can safely ignore any other changes queued for
+      // the same element, it's going to be removed anyway!
+      changesMap.set(change.id, [change]);
+    } else {
+      const elementChanges = changesMap.get(change.id);
+
+      if (elementChanges) {
+        // If we have some changes queued already, we can do a mutable update of
+        // that array and save ourselves some copying.
+        elementChanges.push(change);
+      } else {
+        changesMap.set(change.id, [change]);
+      }
+    }
+  }
+
+  for (const element of elements) {
+    const changes = changesMap.get(element.id);
+
+    // When there are no changes for an element we can just push it unmodified,
+    // no need to copy it.
+    if (!changes) {
+      updatedElements.push(element);
+      continue;
+    }
+
+    // If we have a 'remove' change queued, it'll be the only change in the array
+    if (changes[0].type === 'remove') {
+      continue;
+    }
+
+    if (changes[0].type === 'replace') {
+      updatedElements.push({ ...changes[0].item });
+      continue;
+    }
+
+    // For other types of changes, we want to start with a shallow copy of the
+    // object so React knows this element has changed. Sequential changes will
+    /// each _mutate_ this object, so there's only ever one copy.
+    const updatedElement = { ...element };
+
+    for (const change of changes) {
+      applyChange(change, updatedElement);
+    }
+
+    updatedElements.push(updatedElement);
+  }
+
+  // we need to wait for all changes to be applied before adding new items
+  // to be able to add them at the correct index
+  if (addItemChanges.length) {
+    addItemChanges.forEach(change => {
+      if (change.index !== undefined) {
+        updatedElements.splice(change.index, 0, { ...change.item });
+      } else {
+        updatedElements.push({ ...change.item });
+      }
+    });
+  }
+
+  return updatedElements;
+}
+
+// Applies a single change to an element. This is a *mutable* update.
+function applyChange(change: any, element: any): any {
+  switch (change.type) {
+    case 'select': {
+      element.selected = change.selected;
+      break;
+    }
+
+    case 'position': {
+      if (typeof change.position !== 'undefined') {
+        element.position = change.position;
+      }
+
+      if (typeof change.dragging !== 'undefined') {
+        element.dragging = change.dragging;
+      }
+
+      break;
+    }
+
+    case 'dimensions': {
+      if (typeof change.dimensions !== 'undefined') {
+        element.measured ??= {};
+        element.measured.width = change.dimensions.width;
+        element.measured.height = change.dimensions.height;
+
+        if (change.setAttributes) {
+          element.width = change.dimensions.width;
+          element.height = change.dimensions.height;
+        }
+      }
+
+      if (typeof change.resizing === 'boolean') {
+        element.resizing = change.resizing;
+      }
+
+      break;
+    }
+  }
+}
+
+/**
+ * Drop in function that applies node changes to an array of nodes.
+ * @public
+ * @remarks Various events on the <ReactFlow /> component can produce an {@link NodeChange} that describes how to update the edges of your flow in some way.
+ If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
+ * @param changes - Array of changes to apply
+ * @param nodes - Array of nodes to apply the changes to
+ * @returns Array of updated nodes
+ * @example
+ *  const onNodesChange = useCallback(
+      (changes) => {
+        setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
+      },
+      [setNodes],
+    );
+
+    return (
+      <ReactFLow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
+    );
+ */
+export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange[], nodes: NodeType[]): NodeType[] {
+  return applyChanges(changes, nodes) as NodeType[];
+}
+
+/**
+ * Drop in function that applies edge changes to an array of edges.
+ * @public
+ * @remarks Various events on the <ReactFlow /> component can produce an {@link EdgeChange} that describes how to update the edges of your flow in some way.
+ If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
+ * @param changes - Array of changes to apply
+ * @param edges - Array of edge to apply the changes to
+ * @returns Array of updated edges
+ * @example
+ *  const onEdgesChange = useCallback(
+      (changes) => {
+        setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));
+      },
+      [setEdges],
+    );
+
+    return (
+      <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
+    );
+ */
+export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] {
+  return applyChanges(changes, edges) as EdgeType[];
+}

assets/js/hooks/Mapper/components/mapInterface/MapInterface.tsx

@@ -1,77 +1,32 @@
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { WidgetGridItem, WidgetsGrid } from '@/hooks/Mapper/components/mapInterface/components';
-import {
-  LocalCharacters,
-  RoutesWidget,
-  SystemInfo,
-  SystemSignatures,
-} from '@/hooks/Mapper/components/mapInterface/widgets';
-import { useState } from 'react';
-import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
-// import { debounce } from 'lodash/debounce';
-
-const DEFAULT_WINDOWS = [
-  {
-    name: 'info',
-    rightOffset: 5,
-    width: 5,
-    height: 4,
-    item: () => <SystemInfo />,
-  },
-  {
-    name: 'local',
-    rightOffset: 5,
-    topOffset: 4,
-    width: 5,
-    height: 4,
-    item: () => <LocalCharacters />,
-  },
-  { name: 'signatures', width: 8, height: 4, topOffset: 8, rightOffset: 12, item: () => <SystemSignatures /> },
-  {
-    name: 'routes',
-    rightOffset: 0,
-    topOffset: 8,
-    width: 5,
-    height: 6,
-    item: () => <RoutesWidget />,
-  },
-];
-
-const saveWindowsToLS = (toSaveItems: WidgetGridItem[]) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const out = toSaveItems.map(({ item, ...rest }) => rest);
-  localStorage.setItem(SESSION_KEY.windows, JSON.stringify(out));
-};
-
-const restoreWindowsFromLS = (): WidgetGridItem[] => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const raw = localStorage.getItem(SESSION_KEY.windows);
-  if (!raw) {
-    return DEFAULT_WINDOWS;
-  }
-
-  // eslint-disable-next-line no-debugger
-  const out = (JSON.parse(raw) as Omit<WidgetGridItem, 'item'>[])
-    .filter(x => DEFAULT_WINDOWS.find(def => def.name === x.name))
-    .map(x => {
-      const windowItem = DEFAULT_WINDOWS.find(def => def.name === x.name)?.item;
-      return { ...x, item: windowItem! };
-    });
-
-  return out;
-};
+import { useMemo } from 'react';
+import { WindowManager } from '@/hooks/Mapper/components/ui-kit/WindowManager';
+import { DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export const MapInterface = () => {
-  const [items, setItems] = useState<WidgetGridItem[]>(restoreWindowsFromLS());
+  // const [items, setItems] = useState<WindowProps[]>(restoreWindowsFromLS);
+  const { windowsSettings, updateWidgetSettings } = useMapRootState();
+
+  const items = useMemo(() => {
+    return windowsSettings.windows
+      .map(x => {
+        const content = DEFAULT_WIDGETS.find(y => y.id === x.id)?.content;
+        return {
+          ...x,
+          content: content!,
+        };
+      })
+      .filter(x => windowsSettings.visible.some(j => x.id === j));
+  }, [windowsSettings]);
 
   return (
-    <WidgetsGrid
-      items={items}
-      onChange={x => {
-        saveWindowsToLS(x);
-        setItems(x);
-      }}
+    <WindowManager
+      windows={items}
+      viewPort={windowsSettings.viewPort}
+      dragSelector=".react-grid-dragHandleExample"
+      onChange={updateWidgetSettings}
     />
   );
 };

assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/AddSystemDialog.module.scss

@@ -0,0 +1,10 @@
+.SearchItem {
+  & > * {
+    font-size: 13px !important;
+  }
+}
+
+.SearchItemEffect {
+  font-weight: initial !important;
+}
+

assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/AddSystemDialog.tsx

@@ -0,0 +1,203 @@
+import { Dialog } from 'primereact/dialog';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { IconField } from 'primereact/iconfield';
+import { AutoComplete } from 'primereact/autocomplete';
+import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
+import { SystemViewStandalone, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import classes from './AddSystemDialog.module.scss';
+
+import clsx from 'clsx';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+
+export type SearchOnSubmitCallback = (item: SearchSystemItem) => void;
+
+interface AddSystemDialogProps {
+  title?: string;
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+  onSubmit?: SearchOnSubmitCallback;
+  excludedSystems?: number[];
+}
+
+export const AddSystemDialog = ({
+  title = 'Add system',
+  visible,
+  setVisible,
+  onSubmit,
+  excludedSystems = [],
+}: AddSystemDialogProps) => {
+  const {
+    outCommand,
+    data: { wormholesData },
+  } = useMapRootState();
+
+  const inputRef = useRef<any>();
+  const onShow = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const [filteredItems, setFilteredItems] = useState<SearchSystemItem[]>([]);
+  const [selectedItem, setSelectedItem] = useState<SearchSystemItem[] | null>(null);
+
+  const searchItems = useCallback(
+    async (event: { query: string }) => {
+      if (event.query.length < 2) {
+        setFilteredItems([]);
+        return;
+      }
+
+      const query = event.query;
+
+      if (query.length === 0) {
+        setFilteredItems([]);
+      } else {
+        try {
+          const result = await outCommand({
+            type: OutCommand.searchSystems,
+            data: {
+              text: query,
+            },
+          });
+
+          let prepared = (result.systems as SearchSystemItem[]).sort((a, b) => {
+            const amatch = a.label.indexOf(query);
+            const bmatch = b.label.indexOf(query);
+            return amatch - bmatch;
+          });
+
+          if (excludedSystems) {
+            prepared = prepared.filter(x => !excludedSystems.includes(x.system_static_info.solar_system_id));
+          }
+
+          setFilteredItems(prepared);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+          setFilteredItems([]);
+        }
+      }
+    },
+    [excludedSystems, outCommand],
+  );
+
+  const ref = useRef({ onSubmit, selectedItem });
+  ref.current = { onSubmit, selectedItem };
+
+  const handleSubmit = useCallback(() => {
+    const { onSubmit, selectedItem } = ref.current;
+    setFilteredItems([]);
+    setSelectedItem([]);
+
+    if (!selectedItem) {
+      setVisible(false);
+      return;
+    }
+
+    onSubmit?.(selectedItem[0]);
+    setVisible(false);
+  }, [setVisible]);
+
+  return (
+    <Dialog
+      header={title}
+      visible={visible}
+      draggable={false}
+      style={{ width: '520px' }}
+      onShow={onShow}
+      onHide={() => {
+        if (!visible) {
+          return;
+        }
+
+        setVisible(false);
+      }}
+    >
+      <div className="flex flex-col gap-3 px-1.5">
+        <div className="flex flex-col gap-2 py-3.5">
+          <div className="flex flex-col gap-1">
+            <IconField>
+              <AutoComplete
+                ref={inputRef}
+                multiple
+                showEmptyMessage
+                scrollHeight="300px"
+                value={selectedItem}
+                suggestions={filteredItems}
+                completeMethod={searchItems}
+                onChange={e => {
+                  setSelectedItem(e.value.length < 2 ? e.value : [e.value[e.value.length - 1]]);
+                }}
+                emptyMessage="Not found any system..."
+                placeholder="Type here..."
+                field="label"
+                id="value"
+                className="w-full"
+                itemTemplate={(item: SearchSystemItem) => {
+                  const { security, system_class, effect_power, effect_name, statics } = item.system_static_info;
+                  const sortedStatics = sortWHClasses(wormholesData, statics);
+                  const isWH = isWormholeSpace(system_class);
+
+                  return (
+                    <div className={clsx('flex gap-1.5', classes.SearchItem)}>
+                      <SystemViewStandalone
+                        security={security}
+                        system_class={system_class}
+                        solar_system_id={item.value}
+                        class_title={item.class_title}
+                        solar_system_name={item.label}
+                        region_name={item.region_name}
+                      />
+
+                      {effect_name && isWH && (
+                        <WHEffectView
+                          effectName={effect_name}
+                          effectPower={effect_power}
+                          className={classes.SearchItemEffect}
+                        />
+                      )}
+
+                      {isWH && (
+                        <div className="flex gap-1 grow justify-between">
+                          <div></div>
+                          <div className="flex gap-1">
+                            {sortedStatics.map(x => (
+                              <WHClassView key={x} whClassName={x} />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }}
+                selectedItemTemplate={(item: SearchSystemItem) => (
+                  <SystemViewStandalone
+                    security={item.system_static_info.security}
+                    system_class={item.system_static_info.system_class}
+                    solar_system_id={item.value}
+                    class_title={item.class_title}
+                    solar_system_name={item.label}
+                    region_name={item.region_name}
+                  />
+                )}
+              />
+            </IconField>
+
+            <span className="text-[12px] text-stone-400 ml-1">*to search type at least 2 symbols.</span>
+          </div>
+        </div>
+
+        <div className="flex gap-2 justify-end">
+          <Button
+            onClick={handleSubmit}
+            outlined
+            disabled={!selectedItem || selectedItem.length !== 1}
+            size="small"
+            label="Submit"
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/index.ts

@@ -0,0 +1 @@
+export * from './AddSystemDialog';

assets/js/hooks/Mapper/components/mapInterface/components/SystemLinkSignatureDialog/SystemLinkSignatureDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
 
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -6,17 +6,23 @@ import { SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
 import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
+import { SHOW_DESCRIPTION_COLUMN_SETTING } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures';
 import {
   Setting,
   COSMIC_SIGNATURE,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
+import { SignatureGroup } from '@/hooks/Mapper/types';
 
 interface SystemLinkSignatureDialogProps {
   data: CommandLinkSignatureToSystem;
   setVisible: (visible: boolean) => void;
 }
 
-const signatureSettings: Setting[] = [{ key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true }];
+const signatureSettings: Setting[] = [
+  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
+  { key: SignatureGroup.Wormhole, name: 'Wormhole', value: true },
+  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: true, isFilter: false },
+];
 
 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
   const { outCommand } = useMapRootState();
@@ -52,13 +58,14 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
     <Dialog
       header="Select signature to link"
       visible
-      draggable={false}
+      draggable={true}
       style={{ width: '500px' }}
       onHide={handleHide}
       contentClassName="!p-0"
     >
       <SystemSignaturesContent
         systemId={`${data.solar_system_source}`}
+        hideLinkedSignatures
         settings={signatureSettings}
         onSelect={handleSelect}
         selectable={true}

assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx

@@ -3,6 +3,7 @@ import { InputTextarea } from 'primereact/inputtextarea';
 import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
@@ -22,30 +23,21 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
     outCommand,
   } = useMapRootState();
 
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+
   const system = getSystemById(systems, systemId);
 
   const [name, setName] = useState('');
   const [label, setLabel] = useState('');
+  const [temporaryName, setTemporaryName] = useState('');
   const [description, setDescription] = useState('');
   const inputRef = useRef<HTMLInputElement>();
 
-  useEffect(() => {
-    if (!system) {
-      return;
-    }
-
-    const labels = new LabelsManager(system.labels || '');
-
-    setName(system.name || '');
-    setLabel(labels.customLabel);
-    setDescription(system.description || '');
-  }, [system]);
-
-  const ref = useRef({ name, description, label, outCommand, systemId, system });
-  ref.current = { name, description, label, outCommand, systemId, system };
+  const ref = useRef({ name, description, temporaryName, label, outCommand, systemId, system });
+  ref.current = { name, description, label, temporaryName, outCommand, systemId, system };
 
   const handleSave = useCallback(() => {
-    const { name, description, label, outCommand, systemId, system } = ref.current;
+    const { name, description, label, temporaryName, outCommand, systemId, system } = ref.current;
 
     const outLabel = new LabelsManager(system?.labels ?? '');
     outLabel.updateCustomLabel(label);
@@ -58,6 +50,14 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
       },
     });
 
+    outCommand({
+      type: OutCommand.updateSystemTemporaryName,
+      data: {
+        system_id: systemId,
+        value: temporaryName,
+      },
+    });
+
     outCommand({
       type: OutCommand.updateSystemName,
       data: {
@@ -93,6 +93,21 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
     e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9\-[\](){}]/g, '');
   }, []);
 
+  // Attention: this effect should be call only on mount.
+  useEffect(() => {
+    const { system } = ref.current;
+    if (!system) {
+      return;
+    }
+
+    const labels = new LabelsManager(system.labels || '');
+
+    setName(system.name || '');
+    setLabel(labels.customLabel);
+    setTemporaryName(system.temporary_name || '');
+    setDescription(system.description || '');
+  }, []);
+
   return (
     <Dialog
       header="System settings"
@@ -167,6 +182,35 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
               </IconField>
             </div>
 
+            {isTempSystemNameEnabled && (
+              <div className="flex flex-col gap-1">
+                <label htmlFor="username">Temporary Name</label>
+
+                <IconField>
+                  {temporaryName !== '' && (
+                    <WdImgButton
+                      className="pi pi-trash text-red-400"
+                      textSize={WdImageSize.large}
+                      tooltip={{
+                        content: 'Remove temporary name',
+                        className: 'pi p-input-icon',
+                        position: TooltipPosition.top,
+                      }}
+                      onClick={() => setTemporaryName('')}
+                    />
+                  )}
+                  <InputText
+                    id="temporaryName"
+                    aria-describedby="temporaryName"
+                    autoComplete="off"
+                    value={temporaryName}
+                    maxLength={10}
+                    onChange={e => setTemporaryName(e.target.value)}
+                  />
+                </IconField>
+              </div>
+            )}
+
             <div className="flex flex-col gap-1">
               <label htmlFor="username">Description</label>
               <InputTextarea

assets/js/hooks/Mapper/components/mapInterface/components/WidgetsGrid/WidgetsGrid.module.scss

@@ -1,37 +0,0 @@
-.GridLayoutWrapper {
-  width: 100%;
-  height: 100% !important;
-}
-
-.GridLayout {
-  width: 100%;
-  height: 100% !important;
-  pointer-events: none;
-
-  & > div {
-    pointer-events: initial;
-  }
-
-  :global {
-    .react-resizable-handle::after {
-      border-color: #696969 !important;
-    }
-
-    .react-grid-placeholder {
-      background-color: rgba(147, 147, 147, 0.3);
-      //filter: blur(5px);
-      border: 2px dashed #b6b6b6;
-    }
-
-    .react-grid-item {
-      transition-property: none !important;
-    }
-
-    .react-grid-item.cssTransforms {
-      transition-property: none !important;
-    }
-  }
-}
-
-
-

assets/js/hooks/Mapper/components/mapInterface/components/WidgetsGrid/WidgetsGrid.tsx

@@ -1,196 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import classes from './WidgetsGrid.module.scss';
-import { ItemCallback, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
-import clsx from 'clsx';
-import usePageVisibility from '@/hooks/Mapper/hooks/usePageVisibility.ts';
-
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
-const colSize = 50;
-const initState = { breakpoints: 100, cols: 2 };
-
-export type WidgetGridItem = {
-  rightOffset?: number;
-  leftOffset?: number;
-  topOffset?: number;
-  width: number;
-  height: number;
-  name: string;
-  item: () => React.ReactNode;
-};
-
-export interface WidgetsGridProps {
-  items: WidgetGridItem[];
-  onChange: (items: WidgetGridItem[]) => void;
-}
-
-export const WidgetsGrid = ({ items, onChange }: WidgetsGridProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [, setKey] = useState(0);
-  const [callRerenderOfGrid, setCallRerenderOfGrid] = useState(0);
-
-  const isTabVisible = usePageVisibility();
-
-  const refAll = useRef({
-    isReady: false,
-    layouts: {
-      lg: [
-        // { i: 'a', w: 4, h: 16, x: 22, y: 0 },
-        // { i: 'b', w: 5, h: 10, x: 17, y: 0 },
-      ],
-    } as Layouts,
-    breakpoints: { lg: 100, md: 0, sm: 0, xs: 0, xxs: 0 },
-    cols: { lg: 26, md: 0, sm: 0, xs: 0, xxs: 0 },
-    containerWidth: 0,
-    colsPrev: 26,
-    needPostProcess: false,
-    items: [...items],
-  });
-
-  // TODO
-  //  1. onLayoutChange (original) not calling when we change x of any widget
-  //  2. setKey need no call rerender for update props
-  const onLayoutChange: ItemCallback = (newItems, _, newItem) => {
-    const updatedItems = newItems.map(item => {
-      const toLeft = (item.x + item.w / 2) / refAll.current.cols.lg <= 0.5;
-      const original = refAll.current.items.find(x => x.name === item.i)!;
-
-      return {
-        ...original,
-        width: item.w,
-        height: item.h,
-        leftOffset: toLeft ? item.x : undefined,
-        rightOffset: !toLeft ? refAll.current.cols.lg - (item.x + item.w) : undefined,
-        topOffset: item.y,
-      };
-    });
-
-    const sortedItems = [
-      ...updatedItems.filter(x => x.name !== newItem.i),
-      updatedItems.find(x => x.name === newItem.i)!,
-    ];
-
-    refAll.current.layouts = {
-      lg: [...newItems.filter(x => x.i !== newItem.i), newItem],
-    };
-
-    onChange(sortedItems);
-    setKey(x => x + 1);
-  };
-
-  useEffect(() => {
-    refAll.current.items = [...items];
-    setKey(x => x + 1);
-  }, [items]);
-
-  // TODO
-  //  1. Unknown why but if we set layout and cols both instantly it not help...
-  //  1.2 it means that we should make report... until we will send new key on window resize
-  useEffect(() => {
-    const updateItems = () => {
-      if (!containerRef.current) {
-        return;
-      }
-
-      const { width } = containerRef.current.getBoundingClientRect();
-      const newColsCount = (width - (width % colSize)) / colSize;
-
-      refAll.current.layouts = {
-        lg: refAll.current.items.map(({ name, width, height, rightOffset, leftOffset, topOffset = 0 }) => {
-          return {
-            i: name,
-            x: rightOffset != null ? newColsCount - width - rightOffset : leftOffset ?? 0,
-            y: topOffset,
-            w: width,
-            h: height,
-          };
-        }),
-      };
-      refAll.current.cols = { lg: newColsCount, md: 0, sm: 0, xs: 0, xxs: 0 };
-    };
-
-    const updateContainerWidth = () => {
-      if (!containerRef.current) {
-        return;
-      }
-
-      const { width } = containerRef.current.getBoundingClientRect();
-
-      refAll.current.containerWidth = width;
-      const newColsCount = (width - (width % colSize)) / colSize;
-
-      if (width <= 100 || refAll.current.cols.lg === newColsCount) {
-        return false;
-      }
-
-      if (!refAll.current.isReady) {
-        updateItems();
-        setCallRerenderOfGrid(x => x + 1);
-        refAll.current.isReady = true;
-        return;
-      }
-
-      refAll.current.layouts = {
-        lg: refAll.current.layouts.lg.map(lgEl => {
-          const toLeft = (lgEl.x + lgEl.w / 2) / refAll.current.cols.lg <= 0.5;
-          const next = {
-            ...lgEl,
-            x: toLeft ? lgEl.x : newColsCount - (refAll.current.cols.lg - lgEl.x),
-          };
-          return next;
-        }),
-      };
-
-      refAll.current.cols = { lg: newColsCount, md: 0, sm: 0, xs: 0, xxs: 0 };
-      setCallRerenderOfGrid(x => x + 1);
-    };
-
-    setTimeout(() => updateContainerWidth(), 100);
-
-    const withRerender = () => {
-      updateContainerWidth();
-      setCallRerenderOfGrid(x => x + 1);
-    };
-
-    window.addEventListener('resize', withRerender);
-    return () => {
-      window.removeEventListener('resize', withRerender);
-    };
-  }, []);
-
-  const isNotSet = initState.cols === refAll.current.cols.lg;
-
-  return (
-    <div ref={containerRef} className={clsx(classes.GridLayoutWrapper, 'relative p-4')}>
-      {!isNotSet && isTabVisible && (
-        <ResponsiveGridLayout
-          key={callRerenderOfGrid}
-          className={classes.GridLayout}
-          layouts={refAll.current.layouts}
-          breakpoints={refAll.current.breakpoints}
-          cols={refAll.current.cols}
-          rowHeight={30}
-          width={refAll.current.containerWidth}
-          preventCollision={true}
-          compactType={null}
-          allowOverlap
-          onDragStop={onLayoutChange}
-          onResizeStop={onLayoutChange}
-          // onResizeStart={onLayoutChange}
-          // onDragStart={onLayoutChange}
-          isBounded
-          containerPadding={[0, 0]}
-          resizeHandles={['sw', 'se']}
-          draggableHandle=".react-grid-dragHandleExample"
-        >
-          {refAll.current.items.map(x => (
-            <div key={x.name} className="grid-item">
-              {x.item()}
-            </div>
-          ))}
-        </ResponsiveGridLayout>
-      )}
-    </div>
-  );
-};

assets/js/hooks/Mapper/components/mapInterface/components/WidgetsGrid/index.ts

@@ -1 +0,0 @@
-export * from './WidgetsGrid';

assets/js/hooks/Mapper/components/mapInterface/components/index.ts

@@ -1,5 +1,4 @@
 export * from './Widget';
-export * from './WidgetsGrid';
 export * from './SystemSettingsDialog';
 export * from './SystemCustomLabelDialog';
 export * from './SystemLinkSignatureDialog';

assets/js/hooks/Mapper/components/mapInterface/constants.tsx

@@ -0,0 +1,115 @@
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import {
+  LocalCharacters,
+  RoutesWidget,
+  SystemInfo,
+  SystemSignatures,
+  SystemStructures,
+  SystemKills,
+} from '@/hooks/Mapper/components/mapInterface/widgets';
+
+export const CURRENT_WINDOWS_VERSION = 8;
+export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
+
+export enum WidgetsIds {
+  info = 'info',
+  signatures = 'signatures',
+  local = 'local',
+  routes = 'routes',
+  structures = 'structures',
+  kills = 'kills',
+}
+
+export const STORED_VISIBLE_WIDGETS_DEFAULT = [
+  WidgetsIds.info,
+  WidgetsIds.local,
+  WidgetsIds.routes,
+  WidgetsIds.signatures,
+];
+
+export const DEFAULT_WIDGETS: WindowProps[] = [
+  {
+    id: WidgetsIds.info,
+    position: { x: 10, y: 10 },
+    size: { width: 250, height: 200 },
+    zIndex: 0,
+    content: () => <SystemInfo />,
+  },
+  {
+    id: WidgetsIds.signatures,
+    position: { x: 10, y: 220 },
+    size: { width: 250, height: 300 },
+    zIndex: 0,
+    content: () => <SystemSignatures />,
+  },
+  {
+    id: WidgetsIds.local,
+    position: { x: 270, y: 10 },
+    size: { width: 250, height: 510 },
+    zIndex: 0,
+    content: () => <LocalCharacters />,
+  },
+  {
+    id: WidgetsIds.routes,
+    position: { x: 10, y: 530 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <RoutesWidget />,
+  },
+  {
+    id: WidgetsIds.structures,
+    position: { x: 10, y: 730 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <SystemStructures />,
+  },
+  {
+    id: WidgetsIds.kills,
+    position: { x: 270, y: 730 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <SystemKills />,
+  },
+];
+
+type WidgetsCheckboxesType = {
+  id: WidgetsIds;
+  label: string;
+}[];
+
+export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
+  {
+    id: WidgetsIds.info,
+    label: 'System Info',
+  },
+  {
+    id: WidgetsIds.signatures,
+    label: 'Signatures',
+  },
+  {
+    id: WidgetsIds.local,
+    label: 'Local',
+  },
+  {
+    id: WidgetsIds.routes,
+    label: 'Routes',
+  },
+  {
+    id: WidgetsIds.structures,
+    label: 'Structures',
+  },
+  {
+    id: WidgetsIds.kills,
+    label: 'Kills',
+  },
+];
+
+export function getWidgetsCheckboxesProps(detailedKillsDisabled: boolean): WidgetsCheckboxesType {
+  return filterOutKills(WIDGETS_CHECKBOXES_PROPS, detailedKillsDisabled);
+}
+
+
+function filterOutKills<T extends { id: WidgetsIds }>(items: T[], shouldFilter: boolean) {
+  if (!shouldFilter) return items;
+  return items.filter((w) => w.id !== WidgetsIds.kills);
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/LocalCharacters.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
@@ -8,6 +8,10 @@ import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 import { CharacterCard, LayoutEventBlocker, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
 import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
 import useLocalStorageState from 'use-local-storage-state';
+import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 
 type CharItemProps = {
   compact: boolean;
@@ -62,6 +66,14 @@ export const LocalCharacters = () => {
 
   const [systemId] = selectedSystems;
 
+  const restrictOfflineShowing = useMapGetOption('restrict_offline_showing');
+  const isAdminOrManager = useMapCheckPermissions([UserPermission.MANAGE_MAP]);
+
+  const showOffline = useMemo(
+    () => !restrictOfflineShowing || isAdminOrManager,
+    [isAdminOrManager, restrictOfflineShowing],
+  );
+
   const itemTemplate = useItemTemplate();
 
   const sorted = useMemo(() => {
@@ -70,32 +82,39 @@ export const LocalCharacters = () => {
       .map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id), compact: settings.compact }))
       .sort(sortCharacters);
 
-    if (!settings.showOffline) {
+    if (!showOffline || !settings.showOffline) {
       return sorted.filter(c => c.online);
     }
 
     return sorted;
     // eslint-disable-next-line
-  }, [characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
+  }, [showOffline, characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
 
   const isNobodyHere = sorted.length === 0;
   const isNotSelectedSystem = selectedSystems.length !== 1;
   const showList = sorted.length > 0 && selectedSystems.length === 1;
 
+  const ref = useRef<HTMLDivElement>(null);
+  const compact = useMaxWidth(ref, 145);
+
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full">
+        <div className="flex justify-between items-center text-xs w-full" ref={ref}>
           <span className="select-none">Local{showList ? ` [${sorted.length}]` : ''}</span>
           <LayoutEventBlocker className="flex items-center gap-2">
-            <WdCheckbox
-              size="xs"
-              labelSide="left"
-              label={'Show offline'}
-              value={settings.showOffline}
-              classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-              onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
-            />
+            {showOffline && (
+              <WdTooltipWrapper content="Show offline characters in system">
+                <WdCheckbox
+                  size="xs"
+                  labelSide="left"
+                  label={compact ? '' : 'Show offline'}
+                  value={settings.showOffline}
+                  classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
+                  onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
+                />
+              </WdTooltipWrapper>
+            )}
 
             <span
               className={clsx('w-4 h-4 cursor-pointer', {
@@ -115,7 +134,9 @@ export const LocalCharacters = () => {
       )}
 
       {isNobodyHere && !isNotSelectedSystem && (
-        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">Nobody here</div>
+        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
+          Nobody here
+        </div>
       )}
 
       {showList && (

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList/RoutesList.module.scss

@@ -8,7 +8,6 @@
 .RouteSystem {
   width: 8px;
   height: 8px;
-  background: #ffffff;
 
   cursor: pointer;
   transition: opacity 200ms;

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList/RoutesList.tsx

@@ -5,7 +5,7 @@ import { SystemViewStandalone, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapp
 import { getBackgroundClass, getShapeClass } from '@/hooks/Mapper/components/map/helpers';
 import { MouseEvent, useCallback, useRef, useState } from 'react';
 import { Commands } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { emitMapEvent } from '@/hooks/Mapper/events';
 
 export type RouteSystemProps = {
   destination: number;
@@ -88,11 +88,10 @@ export interface RoutesListProps {
 
 export const RoutesList = ({ data, onContextMenu }: RoutesListProps) => {
   const [selected, setSelected] = useState<number | null>(null);
-  const { mapRef } = useMapRootState();
 
   const handleClick = useCallback(
-    (systemId: number) => mapRef.current?.command(Commands.centerSystem, systemId.toString()),
-    [mapRef],
+    (systemId: number) => emitMapEvent({ name: Commands.centerSystem, data: systemId?.toString() }),
+    [],
   );
 
   if (!data.has_connection) {

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx

@@ -1,12 +1,11 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
-import { WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
 import {
   RoutesType,
   useRouteProvider,
 } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
-import { CheckboxChangeEvent } from 'primereact/checkbox';
+import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 
 interface RoutesSettingsDialog {
   visible: boolean;
@@ -38,8 +37,8 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
   currentData.current = data;
 
   const handleChangeEvent = useCallback(
-    (propName: keyof RoutesType) => (event: CheckboxChangeEvent) => {
-      optionsRef.current = { ...optionsRef.current, [propName]: event.checked };
+    (propName: keyof RoutesType) => (event: boolean) => {
+      optionsRef.current = { ...optionsRef.current, [propName]: event };
       updateKey(x => x + 1);
     },
     [],
@@ -71,14 +70,14 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
         setVisible(false);
       }}
     >
-      <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-3 p-2.5">
+        <div className="flex flex-col gap-2 mb-2">
           {checkboxes.map(({ label, propName }) => (
-            <WdCheckbox
+            <PrettySwitchbox
               key={propName}
               label={label}
-              value={optionsRef.current[propName]}
-              onChange={handleChangeEvent(propName)}
+              checked={optionsRef.current[propName]}
+              setChecked={handleChangeEvent(propName)}
             />
           ))}
         </div>

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesWidget.tsx

@@ -19,6 +19,13 @@ import { PrimeIcons } from 'primereact/api';
 import { RoutesSettingsDialog } from './RoutesSettingsDialog';
 import { RoutesProvider, useRouteProvider } from './RoutesProvider.tsx';
 import { ContextMenuSystemInfo, useContextMenuSystemInfoHandlers } from '@/hooks/Mapper/components/contexts';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import {
+  AddSystemDialog,
+  SearchOnSubmitCallback,
+} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+import { OutCommand } from '@/hooks/Mapper/types';
 
 const sortByDist = (a: Route, b: Route) => {
   const distA = a.has_connection ? a.systems?.length || 0 : Infinity;
@@ -30,7 +37,6 @@ const sortByDist = (a: Route, b: Route) => {
 export const RoutesWidgetContent = () => {
   const {
     data: { selectedSystems, hubs = [], systems, routes },
-    mapRef,
     outCommand,
   } = useMapRootState();
 
@@ -42,7 +48,6 @@ export const RoutesWidgetContent = () => {
   const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers({
     outCommand,
     hubs,
-    mapRef,
   });
 
   const preparedHubs = useMemo(() => {
@@ -163,6 +168,12 @@ export const RoutesWidgetContent = () => {
 export const RoutesWidgetComp = () => {
   const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
   const { data, update } = useRouteProvider();
+  const {
+    data: { hubs = [] },
+    outCommand,
+  } = useMapRootState();
+
+  const preparedHubs = useMemo(() => hubs.map(x => parseInt(x)), [hubs]);
 
   const isSecure = data.path_type === 'secure';
   const handleSecureChange = useCallback(() => {
@@ -172,27 +183,70 @@ export const RoutesWidgetComp = () => {
     });
   }, [data, update]);
 
+  const ref = useRef<HTMLDivElement>(null);
+  const compact = useMaxWidth(ref, 155);
+  const [openAddSystem, setOpenAddSystem] = useState<boolean>(false);
+
+  const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
+
+  const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
+    async item => {
+      if (preparedHubs.includes(item.value)) {
+        return;
+      }
+
+      await outCommand({
+        type: OutCommand.addHub,
+        data: { system_id: item.value },
+      });
+    },
+    [hubs, outCommand],
+  );
+
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full">
+        <div className="flex justify-between items-center text-xs w-full" ref={ref}>
           <span className="select-none">Routes</span>
           <LayoutEventBlocker className="flex items-center gap-2">
-            <WdCheckbox
-              size="xs"
-              labelSide="left"
-              label={'Show shortest'}
-              value={!isSecure}
-              onChange={handleSecureChange}
-              classNameLabel={clsx('text-red-400')}
+            <WdImgButton
+              className={PrimeIcons.PLUS_CIRCLE}
+              onClick={onAddSystem}
+              tooltip={{
+                content: 'Click here to add new system to routes',
+              }}
+            />
+
+            <WdTooltipWrapper content="Show shortest route">
+              <WdCheckbox
+                size="xs"
+                labelSide="left"
+                label={compact ? '' : 'Show shortest'}
+                value={!isSecure}
+                onChange={handleSecureChange}
+                classNameLabel={clsx('text-red-400')}
+              />
+            </WdTooltipWrapper>
+            <WdImgButton
+              className={PrimeIcons.SLIDERS_H}
+              onClick={() => setRouteSettingsVisible(true)}
+              tooltip={{
+                content: 'Click here to open Routes settings',
+              }}
             />
-            <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={() => setRouteSettingsVisible(true)} />
           </LayoutEventBlocker>
         </div>
       }
     >
       <RoutesWidgetContent />
       <RoutesSettingsDialog visible={routeSettingsVisible} setVisible={setRouteSettingsVisible} />
+
+      <AddSystemDialog
+        title="Add system to routes"
+        visible={openAddSystem}
+        setVisible={() => setOpenAddSystem(false)}
+        onSubmit={handleSubmitAddSystem}
+      />
     </Widget>
   );
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKills.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useState } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+import { SystemKillsContent } from './SystemKillsContent/SystemKillsContent';
+import { KillsHeader } from './components/SystemKillsHeader';
+import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
+import { useSystemKills } from './hooks/useSystemKills';
+import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
+
+export const SystemKills: React.FC = () => {
+  const {
+    data: { selectedSystems, systems },
+    outCommand,
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
+
+  const systemNameMap = useMemo(() => {
+    const map: Record<string, string> = {};
+    systems.forEach(sys => {
+      map[sys.id] = sys.temporary_name || sys.name || '???';
+    });
+    return map;
+  }, [systems]);
+
+  const [settings] = useKillsWidgetSettings();
+  const visible = settings.showAll;
+
+  const { kills, isLoading, error } = useSystemKills({
+    systemId,
+    outCommand,
+    showAllVisible: visible,
+  });
+
+  const isNothingSelected = !systemId && !visible;
+  const showLoading = isLoading && kills.length === 0;
+
+  return (
+    <div className="h-full flex flex-col min-h-0">
+      <div className="flex flex-col flex-1 min-h-0">
+        <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
+          {isNothingSelected && (
+            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
+              No system selected (or toggle “Show all systems”)
+            </div>
+          )}
+
+          {!isNothingSelected && showLoading && (
+            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
+              Loading Kills...
+            </div>
+          )}
+
+          {!isNothingSelected && !showLoading && error && (
+            <div className="w-full h-full flex justify-center items-center select-none text-center text-red-400 text-sm">
+              {error}
+            </div>
+          )}
+
+          {!isNothingSelected && !showLoading && !error && (!kills || kills.length === 0) && (
+            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
+              No kills found
+            </div>
+          )}
+
+          {!isNothingSelected && !showLoading && !error && (
+            <div className="flex-1 flex flex-col overflow-y-auto">
+              <SystemKillsContent
+                key={settings.compact ? 'compact' : 'normal'}
+                kills={kills}
+                systemNameMap={systemNameMap}
+                compact={settings.compact}
+                onlyOneSystem={!visible}
+              />
+            </div>
+          )}
+        </Widget>
+      </div>
+
+      <KillsSettingsDialog visible={settingsDialogVisible} setVisible={setSettingsDialogVisible} />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss

@@ -0,0 +1,16 @@
+.TableRowCompact {
+  height: 8px;
+  max-height: 8px;
+  font-size: 12px !important;
+  line-height: 8px;
+}
+
+.Table {
+  font-size: 12px;
+  border-collapse: collapse;
+}
+
+.Tooltip {
+  white-space: pre-line;
+  line-height: 1.2rem;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { KillRow } from '../components/SystemKillsRow';
+
+interface SystemKillsContentProps {
+  kills: DetailedKill[];
+  systemNameMap: Record<string, string>;
+  compact?: boolean;
+  onlyOneSystem?: boolean;
+}
+
+export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
+  kills,
+  systemNameMap,
+  compact = false,
+  onlyOneSystem = false,
+}) => {
+  const sortedKills = useMemo(() => {
+    return [...kills].sort((a, b) => {
+      const timeA = a.kill_time ? new Date(a.kill_time).getTime() : 0;
+      const timeB = b.kill_time ? new Date(b.kill_time).getTime() : 0;
+      return timeB - timeA;
+    });
+  }, [kills]);
+
+  return (
+    <div
+      className={clsx(
+        'flex flex-col w-full text-stone-200 text-xs transition-all duration-300',
+        compact ? 'p-1' : 'p-1',
+      )}
+    >
+      {sortedKills.map(kill => {
+        const systemIdStr = String(kill.solar_system_id);
+        const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
+
+        return (
+          <KillRow
+            key={kill.killmail_id}
+            killDetails={kill}
+            systemName={systemName}
+            isCompact={compact}
+            onlyOneSystem={onlyOneSystem}
+          />
+        );
+      })}
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/AttackerRowSubInfo.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import clsx from 'clsx';
+import { zkillLink } from '../helpers';
+import classes from './SystemKillRow.module.scss';
+
+interface AttackerRowSubInfoProps {
+  finalBlowCharId: number | null | undefined;
+  finalBlowCharName?: string;
+  attackerPortraitUrl: string | null;
+
+  finalBlowCorpId: number | null | undefined;
+  finalBlowCorpName?: string;
+  attackerCorpLogoUrl: string | null;
+
+  finalBlowAllianceId: number | null | undefined;
+  finalBlowAllianceName?: string;
+  attackerAllianceLogoUrl: string | null;
+
+  containerHeight?: number;
+}
+
+export const AttackerRowSubInfo: React.FC<AttackerRowSubInfoProps> = ({
+  finalBlowCharId = 0,
+  finalBlowCharName,
+  attackerPortraitUrl,
+  containerHeight = 8,
+}) => {
+  if (!attackerPortraitUrl || finalBlowCharId === null || finalBlowCharId <= 0) {
+    return null;
+  }
+
+  const containerClass = `h-${containerHeight}`;
+
+  return (
+    <div className={clsx('flex items-start gap-1', containerClass)}>
+      <div className="relative shrink-0 w-auto h-full overflow-hidden">
+        <a
+          href={zkillLink('character', finalBlowCharId)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block h-full"
+        >
+          <img
+            src={attackerPortraitUrl}
+            alt={finalBlowCharName || 'AttackerPortrait'}
+            className={clsx(classes.killRowImage, 'h-full w-auto object-contain')}
+          />
+        </a>
+      </div>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/CompactKillRow.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import clsx from 'clsx';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import {
+  formatISK,
+  formatTimeMixed,
+  zkillLink,
+  getAttackerSubscript,
+  buildVictimImageUrls,
+  buildAttackerImageUrls,
+  getPrimaryLogoAndTooltip,
+  getAttackerPrimaryImageAndTooltip,
+} from '../helpers';
+import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
+import classes from './SystemKillRow.module.scss';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+
+export interface CompactKillRowProps {
+  killDetails: DetailedKill;
+  systemName: string;
+  onlyOneSystem: boolean;
+}
+
+export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+  const {
+    killmail_id = 0,
+
+    victim_char_name = 'Unknown Pilot',
+    victim_alliance_ticker = '',
+    victim_corp_ticker = '',
+    victim_ship_name = 'Unknown Ship',
+    victim_corp_name = '',
+    victim_alliance_name = '',
+    victim_char_id = 0,
+    victim_corp_id = 0,
+    victim_alliance_id = 0,
+    victim_ship_type_id = 0,
+
+    final_blow_char_id = 0,
+    final_blow_char_name = '',
+    final_blow_alliance_ticker = '',
+    final_blow_alliance_name = '',
+    final_blow_alliance_id = 0,
+    final_blow_corp_ticker = '',
+    final_blow_corp_id = 0,
+    final_blow_corp_name = '',
+    final_blow_ship_type_id = 0,
+
+    kill_time = '',
+    total_value = 0,
+  } = killDetails || {};
+
+  const attackerIsNpc = final_blow_char_id === 0;
+  const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
+  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
+  const attackerName = attackerIsNpc ? '' : final_blow_char_name;
+  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+  const attackerSubscript = getAttackerSubscript(killDetails);
+
+  const { victimCorpLogoUrl, victimAllianceLogoUrl } = buildVictimImageUrls({
+    victim_char_id,
+    victim_ship_type_id,
+    victim_corp_id,
+    victim_alliance_id,
+  });
+  const { attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
+    final_blow_char_id,
+    final_blow_corp_id,
+    final_blow_alliance_id,
+  });
+
+  const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
+    victimAllianceLogoUrl,
+    victimCorpLogoUrl,
+    victim_alliance_name,
+    victim_corp_name,
+    'Victim',
+  );
+
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
+    attackerIsNpc,
+    attackerAllianceLogoUrl,
+    attackerCorpLogoUrl,
+    final_blow_alliance_name,
+    final_blow_corp_name,
+    final_blow_ship_type_id || 0,
+  );
+
+  return (
+    <div
+      className={clsx(
+        'h-10 flex items-center border-b border-stone-800',
+        'text-xs whitespace-nowrap overflow-hidden leading-none',
+      )}
+    >
+      {victimPrimaryLogoUrl && (
+        <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
+          <a
+            href={zkillLink('kill', killmail_id)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative shrink-0 w-8 h-8 overflow-hidden"
+          >
+            <img
+              src={victimPrimaryLogoUrl}
+              alt="VictimPrimaryLogo"
+              className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+            />
+          </a>
+        </WdTooltipWrapper>
+      )}
+
+      <div className="flex flex-col ml-2 min-w-0 overflow-hidden leading-[1rem]">
+        <div className="truncate text-stone-200">
+          {victim_char_name}
+          <span className="text-stone-400"> / {victimAffiliationTicker}</span>
+        </div>
+        <div className="truncate text-stone-300">
+          {victim_ship_name}
+          {killValueFormatted && (
+            <>
+              <span className="ml-1 text-stone-400">/</span>
+              <span className="ml-1 text-green-400">{killValueFormatted}</span>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center ml-auto gap-2">
+        <div className="flex flex-col items-end min-w-0 overflow-hidden text-right leading-[1rem]">
+          {!attackerIsNpc && (attackerName || attackerTicker) && (
+            <div className="truncate text-stone-200">
+              {attackerName}
+              {attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
+            </div>
+          )}
+          <div className="truncate text-stone-400">
+            {!onlyOneSystem && systemName ? (
+              <>
+                {systemName} / <span className="ml-1 text-red-400">{killTimeAgo}</span>
+              </>
+            ) : (
+              <span className="text-red-400">{killTimeAgo}</span>
+            )}
+          </div>
+        </div>
+
+        {attackerPrimaryImageUrl && (
+          <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
+            <a
+              href={zkillLink('kill', killmail_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative shrink-0 w-8 h-8 overflow-hidden"
+            >
+              <img
+                src={attackerPrimaryImageUrl}
+                alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+              {attackerSubscript && (
+                <span
+                  className={clsx(
+                    classes.attackerCountLabel,
+                    attackerSubscript.cssClass,
+                    'text-[0.6rem] leading-none px-[2px]',
+                  )}
+                  style={{ bottom: 0, right: 0 }}
+                >
+                  {attackerSubscript.label}
+                </span>
+              )}
+            </a>
+          </WdTooltipWrapper>
+        )}
+      </div>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/FullKillRow.tsx

@@ -0,0 +1,197 @@
+// FullKillRow.tsx
+import React from 'react';
+import clsx from 'clsx';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import {
+  formatISK,
+  formatTimeMixed,
+  zkillLink,
+  getAttackerSubscript,
+  buildVictimImageUrls,
+  buildAttackerImageUrls,
+  getPrimaryLogoAndTooltip,
+  getAttackerPrimaryImageAndTooltip,
+} from '../helpers';
+import { VictimRowSubInfo } from './VictimRowSubInfo';
+import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
+import classes from './SystemKillRow.module.scss';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+
+export interface FullKillRowProps {
+  killDetails: DetailedKill;
+  systemName: string;
+  onlyOneSystem: boolean;
+}
+
+export const FullKillRow: React.FC<FullKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+  const {
+    killmail_id = 0,
+
+    victim_char_name = '',
+    victim_alliance_ticker = '',
+    victim_corp_ticker = '',
+    victim_ship_name = '',
+    victim_char_id = 0,
+    victim_corp_id = 0,
+    victim_alliance_id = 0,
+    victim_ship_type_id = 0,
+    victim_corp_name = '',
+    victim_alliance_name = '',
+
+    final_blow_char_id = 0,
+    final_blow_char_name = '',
+    final_blow_alliance_ticker = '',
+    final_blow_corp_ticker = '',
+    final_blow_corp_name = '',
+    final_blow_alliance_name = '',
+    final_blow_corp_id = 0,
+    final_blow_alliance_id = 0,
+    final_blow_ship_name = '',
+    final_blow_ship_type_id = 0,
+
+    total_value = 0,
+    kill_time = '',
+  } = killDetails || {};
+
+  const attackerIsNpc = final_blow_char_id === 0;
+  const victimAffiliation = victim_alliance_ticker || victim_corp_ticker;
+  const attackerAffiliation = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+
+  const killValueFormatted = total_value !== null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
+  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+
+  const { victimPortraitUrl, victimCorpLogoUrl, victimAllianceLogoUrl } = buildVictimImageUrls({
+    victim_char_id,
+    victim_ship_type_id,
+    victim_corp_id,
+    victim_alliance_id,
+  });
+  const { attackerPortraitUrl, attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
+    final_blow_char_id,
+    final_blow_corp_id,
+    final_blow_alliance_id,
+  });
+
+  const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
+    victimAllianceLogoUrl,
+    victimCorpLogoUrl,
+    victim_alliance_name,
+    victim_corp_name,
+    'Victim',
+  );
+
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
+    attackerIsNpc,
+    attackerAllianceLogoUrl,
+    attackerCorpLogoUrl,
+    final_blow_alliance_name,
+    final_blow_corp_name,
+    final_blow_ship_type_id || 0,
+  );
+
+  const attackerSubscript = getAttackerSubscript(killDetails);
+
+  return (
+    <div className={clsx(classes.killRowContainer, 'h-18 w-full justify-between items-start text-sm py-[4px]')}>
+      {/* ---------------- Victim Side ---------------- */}
+      <div className="flex items-start gap-1 min-w-0 h-full">
+        {/* Victim top-level logo (corp or alliance), with tooltip */}
+        {victimPrimaryImageUrl && (
+          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
+            <div className="relative shrink-0 w-14 h-14 overflow-hidden">
+              <a
+                href={zkillLink('kill', killmail_id)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full h-full"
+              >
+                <img
+                  src={victimPrimaryImageUrl}
+                  alt="VictimPrimaryLogo"
+                  className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+                />
+              </a>
+            </div>
+          </WdTooltipWrapper>
+        )}
+        <VictimRowSubInfo
+          victimCharName={victim_char_name}
+          victimCharacterId={victim_char_id}
+          victimPortraitUrl={victimPortraitUrl}
+        />
+        <div className="flex flex-col text-stone-200 leading-4 min-w-0 overflow-hidden">
+          <div className="truncate">
+            <span className="font-semibold">{victim_char_name}</span>
+            {victimAffiliation && <span className="ml-1 text-stone-400">/ {victimAffiliation}</span>}
+          </div>
+          <div className="truncate text-stone-300">
+            {victim_ship_name}
+            {killValueFormatted && (
+              <>
+                <span className="ml-1 text-stone-400">/</span>
+                <span className="ml-1 text-green-400">{killValueFormatted}</span>
+              </>
+            )}
+          </div>
+          <div className="truncate text-stone-400">{!onlyOneSystem && systemName && <span>{systemName}</span>}</div>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-1 min-w-0 h-full">
+        <div className="flex flex-col items-end leading-4 min-w-0 overflow-hidden text-right">
+          {!attackerIsNpc && (
+            <div className="truncate font-semibold">
+              {final_blow_char_name}
+              {attackerAffiliation && <span className="ml-1 text-stone-400">/ {attackerAffiliation}</span>}
+            </div>
+          )}
+          {!attackerIsNpc && final_blow_ship_name && (
+            <div className="truncate text-stone-300">{final_blow_ship_name}</div>
+          )}
+          <div className="truncate text-red-400">{killTimeAgo}</div>
+        </div>
+
+        {!attackerIsNpc && attackerPortraitUrl && final_blow_char_id !== null && final_blow_char_id > 0 && (
+          <div className="relative shrink-0 w-14 h-14 overflow-hidden">
+            <a
+              href={zkillLink('character', final_blow_char_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block w-full h-full"
+            >
+              <img
+                src={attackerPortraitUrl}
+                alt="AttackerPortrait"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+            </a>
+          </div>
+        )}
+
+        {attackerPrimaryImageUrl && (
+          <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
+            <div className="relative shrink-0 w-14 h-14 overflow-hidden">
+              <a
+                href={zkillLink('kill', killmail_id)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full h-full"
+              >
+                <img
+                  src={attackerPrimaryImageUrl}
+                  alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
+                  className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+                />
+                {attackerSubscript && (
+                  <span className={clsx(attackerSubscript.cssClass, classes.attackerCountLabel)}>
+                    {attackerSubscript.label}
+                  </span>
+                )}
+              </a>
+            </div>
+          </WdTooltipWrapper>
+        )}
+      </div>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillRow.module.scss

@@ -0,0 +1,30 @@
+.killRowContainer {
+  @apply flex items-center whitespace-nowrap overflow-hidden;
+  &:not(:last-child) {
+    @apply border-b border-stone-800;
+  }
+  @apply bg-transparent transition-all hover:bg-stone-900 hover:border-stone-700;
+}
+
+.killRowImage {
+  @apply border border-stone-800 rounded-[4px] object-contain;
+}
+
+.attackerCountLabel {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-size: 10px;
+  padding: 0 2px;
+}
+
+.attackerCountLabelCompact {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  font-size: 0.6rem;
+  line-height: 1;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 1px 2px;
+  pointer-events: none;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsHeader.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  LayoutEventBlocker,
+  WdCheckbox,
+  WdImgButton,
+  TooltipPosition,
+  SystemView,
+} from '@/hooks/Mapper/components/ui-kit';
+import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
+import { PrimeIcons } from 'primereact/api';
+
+interface KillsWidgetHeaderProps {
+  systemId?: string;
+  onOpenSettings: () => void;
+}
+
+export const KillsHeader: React.FC<KillsWidgetHeaderProps> = ({ systemId, onOpenSettings }) => {
+  const [settings, setSettings] = useKillsWidgetSettings();
+  const { showAll } = settings;
+
+  const onToggleShowAllVisible = () => {
+    setSettings(prev => ({ ...prev, showAll: !prev.showAll }));
+  };
+
+  return (
+    <div className="flex justify-between items-center text-xs w-full">
+      <div className="flex items-center gap-1">
+        <div className="text-stone-400">
+          Kills
+          {systemId && !showAll && ' in '}
+        </div>
+        {systemId && !showAll && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+      </div>
+
+      <LayoutEventBlocker className="flex gap-2 items-center">
+        <WdCheckbox
+          size="xs"
+          labelSide="left"
+          label="Show all systems"
+          value={showAll}
+          classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
+          onChange={onToggleShowAllVisible}
+        />
+
+        <WdImgButton
+          className={PrimeIcons.SLIDERS_H}
+          onClick={onOpenSettings}
+          tooltip={{
+            content: 'Open Kills Settings',
+            position: TooltipPosition.left,
+          }}
+        />
+      </LayoutEventBlocker>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsRow.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { CompactKillRow } from './CompactKillRow';
+import { FullKillRow } from './FullKillRow';
+
+export interface KillRowProps {
+  killDetails: DetailedKill;
+  systemName: string;
+  isCompact?: boolean;
+  onlyOneSystem?: boolean;
+}
+
+export const KillRow: React.FC<KillRowProps> = ({
+  killDetails,
+  systemName,
+  isCompact = false,
+  onlyOneSystem = false,
+}) => {
+  if (isCompact) {
+    return <CompactKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
+  }
+
+  return <FullKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsSettingsDialog.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { WdImgButton, SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { PrimeIcons } from 'primereact/api';
+import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
+import {
+  AddSystemDialog,
+  SearchOnSubmitCallback,
+} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+
+interface KillsSettingsDialogProps {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+}
+
+export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
+  const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
+  const localRef = useRef({
+    compact: globalSettings.compact,
+    showAll: globalSettings.showAll,
+    excludedSystems: globalSettings.excludedSystems || [],
+  });
+
+  const [, forceRender] = useState(0);
+
+  const [addSystemDialogVisible, setAddSystemDialogVisible] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      localRef.current = {
+        compact: globalSettings.compact,
+        showAll: globalSettings.showAll,
+        excludedSystems: globalSettings.excludedSystems || [],
+      };
+      forceRender(n => n + 1);
+    }
+  }, [visible, globalSettings]);
+
+  const handleCompactChange = useCallback((checked: boolean) => {
+    localRef.current = {
+      ...localRef.current,
+      compact: checked,
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleRemoveSystem = useCallback((sysId: number) => {
+    localRef.current = {
+      ...localRef.current,
+      excludedSystems: localRef.current.excludedSystems.filter(id => id !== sysId),
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleAddSystemSubmit: SearchOnSubmitCallback = useCallback(item => {
+    if (localRef.current.excludedSystems.includes(item.value)) {
+      return;
+    }
+    localRef.current = {
+      ...localRef.current,
+      excludedSystems: [...localRef.current.excludedSystems, item.value],
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleApply = useCallback(() => {
+    setGlobalSettings(prev => ({
+      ...prev,
+      ...localRef.current,
+    }));
+    setVisible(false);
+  }, [setGlobalSettings, setVisible]);
+
+  const handleHide = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  const localData = localRef.current;
+  const excluded = localData.excludedSystems || [];
+
+  return (
+    <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
+      <div className="flex flex-col gap-3 p-2.5">
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="kills-compact-mode"
+            checked={localData.compact}
+            onChange={e => handleCompactChange(e.target.checked)}
+          />
+          <label htmlFor="kills-compact-mode" className="cursor-pointer">
+            Use compact mode
+          </label>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <label className="text-sm text-stone-400">Excluded Systems</label>
+            <WdImgButton
+              className={PrimeIcons.PLUS_CIRCLE}
+              onClick={() => setAddSystemDialogVisible(true)}
+              tooltip={{ content: 'Add system to excluded list' }}
+            />
+          </div>
+          {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
+          {excluded.map(sysId => (
+            <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
+              <SystemView systemId={sysId.toString()} hideRegion compact />
+
+              <WdImgButton
+                className={PrimeIcons.TRASH}
+                onClick={() => handleRemoveSystem(sysId)}
+                tooltip={{ content: 'Remove from excluded', position: TooltipPosition.top }}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Apply + Close button row */}
+        <div className="flex gap-2 justify-end mt-4">
+          <Button onClick={handleApply} label="Apply" outlined size="small" />
+        </div>
+      </div>
+
+      {/* AddSystemDialog for picking new systems to exclude */}
+      <AddSystemDialog
+        title="Add system to kills exclude list"
+        visible={addSystemDialogVisible}
+        setVisible={() => setAddSystemDialogVisible(false)}
+        onSubmit={handleAddSystemSubmit}
+        excludedSystems={excluded}
+      />
+    </Dialog>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/VictimRowSubInfo.tsx

@@ -0,0 +1,40 @@
+// VictimSubRowInfo.tsx
+import React from 'react';
+import clsx from 'clsx';
+import { zkillLink } from '../helpers';
+import classes from './SystemKillRow.module.scss';
+
+interface VictimRowSubInfoProps {
+  victimCharacterId: number | null;
+  victimPortraitUrl: string | null;
+  victimCharName?: string;
+}
+
+export const VictimRowSubInfo: React.FC<VictimRowSubInfoProps> = ({
+  victimCharacterId = 0,
+  victimPortraitUrl,
+  victimCharName,
+}) => {
+  if (!victimPortraitUrl || victimCharacterId === null || victimCharacterId <= 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-start gap-1 h-14">
+      <div className="relative shrink-0 w-14 h-14 overflow-hidden">
+        <a
+          href={zkillLink('character', victimCharacterId)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block w-full h-full"
+        >
+          <img
+            src={victimPortraitUrl}
+            alt={victimCharName || 'Victim Portrait'}
+            className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+          />
+        </a>
+      </div>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './linkHelpers';
+export * from './killRowUtils';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/killRowUtils.ts

@@ -0,0 +1,47 @@
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+
+/** Returns "5m ago", "3h ago", "2.5d ago", etc. */
+export function formatTimeMixed(killTime: string): string {
+  const killDate = new Date(killTime);
+  const diffMs = Date.now() - killDate.getTime();
+  const diffHours = diffMs / (1000 * 60 * 60);
+
+  if (diffHours < 1) {
+    const mins = Math.round(diffHours * 60);
+    return `${mins}m ago`;
+  } else if (diffHours < 24) {
+    const hours = Math.round(diffHours);
+    return `${hours}h ago`;
+  } else {
+    const days = diffHours / 24;
+    const roundedDays = days.toFixed(1);
+    return `${roundedDays}d ago`;
+  }
+}
+
+/** Formats integer ISK values into k/M/B/T. */
+export function formatISK(value: number): string {
+  if (value >= 1_000_000_000_000) {
+    return `${(value / 1_000_000_000_000).toFixed(2)}T`;
+  } else if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(2)}B`;
+  } else if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`;
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(2)}k`;
+  }
+  return Math.round(value).toString();
+}
+
+export function getAttackerSubscript(kill: DetailedKill) {
+  if (kill.npc) {
+    return { label: 'npc', cssClass: 'text-purple-400' };
+  }
+  const count = kill.attacker_count ?? 0;
+  if (count === 1) {
+    return { label: 'solo', cssClass: 'text-green-400' };
+  } else if (count > 1) {
+    return { label: String(count), cssClass: 'text-white' };
+  }
+  return null;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/linkHelpers.ts

@@ -0,0 +1,111 @@
+const ZKILL_URL = 'https://zkillboard.com';
+const BASE_IMAGE_URL = 'https://images.evetech.net';
+
+export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance', id?: number | null): string {
+  if (!id) return `${ZKILL_URL}`;
+  if (type === 'kill') return `${ZKILL_URL}/kill/${id}/`;
+  if (type === 'character') return `${ZKILL_URL}/character/${id}/`;
+  if (type === 'corporation') return `${ZKILL_URL}/corporation/${id}/`;
+  if (type === 'alliance') return `${ZKILL_URL}/alliance/${id}/`;
+  return `${ZKILL_URL}`;
+}
+
+export function eveImageUrl(
+  category: 'characters' | 'corporations' | 'alliances' | 'types',
+  id?: number | null,
+  variation: string = 'icon',
+  size?: number,
+): string | null {
+  if (!id || id <= 0) {
+    return null;
+  }
+  let url = `${BASE_IMAGE_URL}/${category}/${id}/${variation}`;
+  if (size) {
+    url += `?size=${size}`;
+  }
+  return url;
+}
+
+export function buildVictimImageUrls(args: {
+  victim_char_id?: number | null;
+  victim_ship_type_id?: number | null;
+  victim_corp_id?: number | null;
+  victim_alliance_id?: number | null;
+}) {
+  const { victim_char_id, victim_ship_type_id, victim_corp_id, victim_alliance_id } = args;
+
+  const victimPortraitUrl = eveImageUrl('characters', victim_char_id, 'portrait', 64);
+  const victimShipUrl = eveImageUrl('types', victim_ship_type_id, 'render', 64);
+  const victimCorpLogoUrl = eveImageUrl('corporations', victim_corp_id, 'logo', 32);
+  const victimAllianceLogoUrl = eveImageUrl('alliances', victim_alliance_id, 'logo', 32);
+
+  return {
+    victimPortraitUrl,
+    victimShipUrl,
+    victimCorpLogoUrl,
+    victimAllianceLogoUrl,
+  };
+}
+
+export function buildAttackerShipUrl(final_blow_ship_type_id?: number | null): string | null {
+  return eveImageUrl('types', final_blow_ship_type_id, 'render', 64);
+}
+
+export function buildAttackerImageUrls(args: {
+  final_blow_char_id?: number | null;
+  final_blow_corp_id?: number | null;
+  final_blow_alliance_id?: number | null;
+}) {
+  const { final_blow_char_id, final_blow_corp_id, final_blow_alliance_id } = args;
+
+  const attackerPortraitUrl = eveImageUrl('characters', final_blow_char_id, 'portrait', 64);
+  const attackerCorpLogoUrl = eveImageUrl('corporations', final_blow_corp_id, 'logo', 32);
+  const attackerAllianceLogoUrl = eveImageUrl('alliances', final_blow_alliance_id, 'logo', 32);
+
+  return {
+    attackerPortraitUrl,
+    attackerCorpLogoUrl,
+    attackerAllianceLogoUrl,
+  };
+}
+
+export function getPrimaryLogoAndTooltip(
+  allianceUrl: string | null,
+  corpUrl: string | null,
+  allianceName: string,
+  corpName: string,
+  fallback: string,
+) {
+  let url: string | null = null;
+  let tooltip = '';
+
+  if (allianceUrl) {
+    url = allianceUrl;
+    tooltip = allianceName || fallback;
+  } else if (corpUrl) {
+    url = corpUrl;
+    tooltip = corpName || fallback;
+  }
+
+  return { url, tooltip };
+}
+
+export function getAttackerPrimaryImageAndTooltip(
+  isNpc: boolean,
+  allianceUrl: string | null,
+  corpUrl: string | null,
+  allianceName: string,
+  corpName: string,
+  finalBlowShipTypeId: number,
+  npcFallback: string = 'NPC Attacker',
+) {
+  if (isNpc) {
+    const shipUrl = buildAttackerShipUrl(finalBlowShipTypeId);
+    return {
+      url: shipUrl,
+      tooltip: npcFallback,
+    };
+  }
+
+  return getPrimaryLogoAndTooltip(allianceUrl, corpUrl, allianceName, corpName, 'Attacker');
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useKillsWidgetSettings.ts

@@ -0,0 +1,51 @@
+import { useMemo, useCallback } from 'react';
+import useLocalStorageState from 'use-local-storage-state';
+
+export interface KillsWidgetSettings {
+  compact: boolean;
+  showAll: boolean;
+  excludedSystems: number[];
+  version: number;
+}
+
+export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
+  compact: false,
+  showAll: false,
+  excludedSystems: [],
+  version: 0,
+};
+
+function mergeWithDefaults(settings?: Partial<KillsWidgetSettings>): KillsWidgetSettings {
+  if (!settings) {
+    return DEFAULT_KILLS_WIDGET_SETTINGS;
+  }
+
+  return {
+    ...DEFAULT_KILLS_WIDGET_SETTINGS,
+    ...settings,
+    excludedSystems: Array.isArray(settings.excludedSystems) ? settings.excludedSystems : [],
+  };
+}
+
+export function useKillsWidgetSettings() {
+  const [rawValue, setRawValue] = useLocalStorageState<KillsWidgetSettings | undefined>('kills:widget:settings');
+
+  const value = useMemo<KillsWidgetSettings>(() => {
+    return mergeWithDefaults(rawValue);
+  }, [rawValue]);
+
+  const setValue = useCallback(
+    (newVal: KillsWidgetSettings | ((prev: KillsWidgetSettings) => KillsWidgetSettings)) => {
+      setRawValue(prev => {
+        const mergedPrev = mergeWithDefaults(prev);
+
+        const nextUnmerged = typeof newVal === 'function' ? newVal(mergedPrev) : newVal;
+
+        return mergeWithDefaults(nextUnmerged);
+      });
+    },
+    [setRawValue],
+  );
+
+  return [value, setValue] as const;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKills.ts

@@ -0,0 +1,178 @@
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useKillsWidgetSettings } from './useKillsWidgetSettings';
+
+interface UseSystemKillsProps {
+  systemId?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outCommand: (payload: any) => Promise<any>;
+  showAllVisible?: boolean;
+  sinceHours?: number;
+}
+
+function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceHours: number): DetailedKill[] {
+  const cutoff = Date.now() - sinceHours * 60 * 60 * 1000;
+  const byId: Record<string, DetailedKill> = {};
+
+  for (const kill of [...existing, ...incoming]) {
+    if (!kill.kill_time) {
+      continue;
+    }
+    const killTimeMs = new Date(kill.kill_time).valueOf();
+
+    if (killTimeMs >= cutoff) {
+      byId[kill.killmail_id] = kill;
+    }
+  }
+
+  return Object.values(byId);
+}
+
+export function useSystemKills({ systemId, outCommand, showAllVisible = false, sinceHours = 24 }: UseSystemKillsProps) {
+  const { data, update } = useMapRootState();
+  const { detailedKills = {}, systems = [] } = data;
+
+  const [settings] = useKillsWidgetSettings();
+  const excludedSystems = settings.excludedSystems;
+
+  const visibleSystemIds = useMemo(() => {
+    return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));
+  }, [systems, excludedSystems]);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const didFallbackFetch = useRef(Object.keys(detailedKills).length !== 0);
+
+  const mergeKillsIntoGlobal = useCallback(
+    (killsMap: Record<string, DetailedKill[]>) => {
+      update(prev => {
+        const oldMap = prev.detailedKills ?? {};
+        const updated: Record<string, DetailedKill[]> = { ...oldMap };
+
+        for (const [sid, newKills] of Object.entries(killsMap)) {
+          const existing = updated[sid] ?? [];
+          const combined = combineKills(existing, newKills, sinceHours);
+          updated[sid] = combined;
+        }
+
+        return {
+          ...prev,
+          detailedKills: updated,
+        };
+      });
+    },
+    [update, sinceHours],
+  );
+
+  const fetchKills = useCallback(
+    async (forceFallback = false) => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        let eventType: OutCommand;
+        let requestData: Record<string, unknown>;
+
+        if (showAllVisible || forceFallback) {
+          eventType = OutCommand.getSystemsKills;
+          requestData = {
+            system_ids: visibleSystemIds,
+            since_hours: sinceHours,
+          };
+        } else if (systemId) {
+          eventType = OutCommand.getSystemKills;
+          requestData = {
+            system_id: systemId,
+            since_hours: sinceHours,
+          };
+        } else {
+          // If there's no system and not showing all, do nothing
+          setIsLoading(false);
+          return;
+        }
+
+        const resp = await outCommand({
+          type: eventType,
+          data: requestData,
+        });
+
+        // Single system => `resp.kills`
+        if (resp.kills) {
+          const arr = resp.kills as DetailedKill[];
+          const sid = systemId ?? 'unknown';
+          mergeKillsIntoGlobal({ [sid]: arr });
+        }
+        // multiple => `resp.systems_kills`
+        else if (resp.systems_kills) {
+          mergeKillsIntoGlobal(resp.systems_kills as Record<string, DetailedKill[]>);
+        } else {
+          console.warn('[useSystemKills] Unexpected kills response =>', resp);
+        }
+      } catch (err) {
+        console.error('[useSystemKills] Failed to fetch kills:', err);
+        setError(err instanceof Error ? err.message : 'Error fetching kills');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [showAllVisible, systemId, outCommand, visibleSystemIds, sinceHours, mergeKillsIntoGlobal],
+  );
+
+  const debouncedFetchKills = useMemo(
+    () =>
+      debounce(fetchKills, 500, {
+        leading: true,
+        trailing: false,
+      }),
+    [fetchKills],
+  );
+
+  const finalKills = useMemo(() => {
+    if (showAllVisible) {
+      return visibleSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+    } else if (systemId) {
+      return detailedKills[systemId] ?? [];
+    } else if (didFallbackFetch.current) {
+      // if we already did a fallback, we may have data for multiple systems
+      return visibleSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+    }
+    return [];
+  }, [showAllVisible, systemId, didFallbackFetch, visibleSystemIds, detailedKills]);
+
+  const effectiveIsLoading = isLoading && finalKills.length === 0;
+
+  useEffect(() => {
+    if (!systemId && !showAllVisible && !didFallbackFetch.current) {
+      didFallbackFetch.current = true;
+      // Cancel any queued debounced calls, then do the fallback.
+      debouncedFetchKills.cancel();
+      fetchKills(true); // forceFallback => fetch as though showAll
+    }
+  }, [systemId, showAllVisible, debouncedFetchKills, fetchKills, didFallbackFetch]);
+
+  useEffect(() => {
+    if (visibleSystemIds.length === 0) return;
+
+    if (showAllVisible || systemId) {
+      debouncedFetchKills();
+      // Clean up the debounce on unmount or changes
+      return () => debouncedFetchKills.cancel();
+    }
+  }, [showAllVisible, systemId, visibleSystemIds, debouncedFetchKills]);
+
+  const refetch = useCallback(() => {
+    debouncedFetchKills.cancel();
+    fetchKills(); // immediate (non-debounced) call
+  }, [debouncedFetchKills, fetchKills]);
+
+  return {
+    kills: finalKills,
+    isLoading: effectiveIsLoading,
+    error,
+    refetch,
+  };
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/index.ts

@@ -0,0 +1 @@
+export * from './SystemKills';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.module.scss

@@ -0,0 +1,79 @@
+.verticalTabsContainer {
+  display: flex;
+  width: 100%;
+  min-height: 300px;
+
+  :global {
+    .p-tabview {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .p-tabview-panels {
+      padding: 6px 1rem !important;
+      flex-grow: 1;
+    }
+
+    .p-tabview-nav-container {
+      border-right: none;
+      height: 100%;
+    }
+
+    .p-tabview-nav {
+      flex-direction: column;
+      width: 150px;
+      min-height: 100%;
+      border: none;
+
+      li {
+        width: 100%;
+        border-right: 4px solid var(--surface-hover);
+        background-color: var(--surface-card);
+
+        transition:
+          background-color 200ms,
+          border-right-color 200ms;
+
+        &:hover {
+          background-color: var(--surface-hover);
+          border-right: 4px solid var(--surface-100);
+        }
+
+        .p-tabview-nav-link {
+          transition: color 200ms;
+
+          justify-content: flex-end;
+          padding: 10px;
+          //background-color: var(--surface-card);
+          background-color: initial;
+          border: none;
+          color: var(--gray-400);
+
+          border-radius: initial;
+          font-weight: 400;
+          margin: 0;
+        }
+
+        &.p-tabview-selected {
+          background-color: var(--surface-50);
+          border-right: 4px solid var(--primary-color);
+
+          .p-tabview-nav-link {
+            font-weight: 600;
+            color: var(--primary-color);
+          }
+
+          &:hover {
+            //background-color: var(--surface-hover);
+            border-right: 4px solid var(--primary-color);
+          }
+        }
+      }
+    }
+
+    .p-tabview-panel {
+      flex-grow: 1;
+    }
+  }
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx

@@ -1,9 +1,11 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
 import { Button } from 'primereact/button';
-import { Checkbox } from 'primereact/checkbox';
+import { TabPanel, TabView } from 'primereact/tabview';
+import styles from './SystemSignatureSettingsDialog.module.scss';
+import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 
-export type Setting = { key: string; name: string; value: boolean };
+export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean };
 
 export const COSMIC_SIGNATURE = 'Cosmic Signature';
 export const COSMIC_ANOMALY = 'Cosmic Anomaly';
@@ -24,8 +26,12 @@ export const SystemSignatureSettingsDialog = ({
   onSave,
   onCancel,
 }: SystemSignatureSettingsDialogProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
   const [settings, setSettings] = useState<Setting[]>(defaultSettings);
 
+  const filterSettings = settings.filter(setting => setting.isFilter);
+  const userSettings = settings.filter(setting => !setting.isFilter);
+
   const handleSettingsChange = (key: string) => {
     setSettings(prevState => prevState.map(item => (item.key === key ? { ...item, value: !item.value } : item)));
   };
@@ -35,23 +41,45 @@ export const SystemSignatureSettingsDialog = ({
   }, [onSave, settings]);
 
   return (
-    <Dialog header="Filter signatures" visible draggable={false} style={{ width: '300px' }} onHide={onCancel}>
-      <div className="flex flex-col gap-3">
+    <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg h-[500px]">
+      <div className="flex flex-col gap-3 justify-between h-full">
         <div className="flex flex-col gap-2">
-          {settings.map(setting => {
-            return (
-              <div key={setting.key} className="flex items-center">
-                <Checkbox
-                  inputId={setting.key}
-                  checked={setting.value}
-                  onChange={() => handleSettingsChange(setting.key)}
-                />
-                <label htmlFor={setting.key} className="ml-2">
-                  {setting.name}
-                </label>
-              </div>
-            );
-          })}
+          <div className={styles.verticalTabsContainer}>
+            <TabView
+              activeIndex={activeIndex}
+              onTabChange={e => setActiveIndex(e.index)}
+              className={styles.verticalTabView}
+            >
+              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
+                <div className="w-full h-full flex flex-col gap-1">
+                  {filterSettings.map(setting => {
+                    return (
+                      <PrettySwitchbox
+                        key={setting.key}
+                        label={setting.name}
+                        checked={setting.value}
+                        setChecked={() => handleSettingsChange(setting.key)}
+                      />
+                    );
+                  })}
+                </div>
+              </TabPanel>
+              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
+                <div className="w-full h-full flex flex-col gap-1">
+                  {userSettings.map(setting => {
+                    return (
+                      <PrettySwitchbox
+                        key={setting.key}
+                        label={setting.name}
+                        checked={setting.value}
+                        setChecked={() => handleSettingsChange(setting.key)}
+                      />
+                    );
+                  })}
+                </div>
+              </TabPanel>
+            </TabView>
+          </div>
         </div>
 
         <div className="flex gap-2 justify-end">

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx

@@ -1,36 +1,61 @@
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import { InfoDrawer, LayoutEventBlocker, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import {
+  InfoDrawer,
+  LayoutEventBlocker,
+  SystemView,
+  TooltipPosition,
+  WdCheckbox,
+  WdImgButton,
+} from '@/hooks/Mapper/components/ui-kit';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
 import {
-  Setting,
-  SystemSignatureSettingsDialog,
-  COSMIC_SIGNATURE,
   COSMIC_ANOMALY,
+  COSMIC_SIGNATURE,
   DEPLOYABLE,
-  STRUCTURE,
-  STARBASE,
-  SHIP,
   DRONE,
+  Setting,
+  SHIP,
+  STARBASE,
+  STRUCTURE,
+  SystemSignatureSettingsDialog,
 } from './SystemSignatureSettingsDialog';
+import { SignatureGroup } from '@/hooks/Mapper/types';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { PrimeIcons } from 'primereact/api';
 
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+
+const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_2';
+export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
+export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING';
+export const LAZY_DELETE_SIGNATURES_SETTING = 'LAZY_DELETE_SIGNATURES_SETTING';
+export const KEEP_LAZY_DELETE_SETTING = 'KEEP_LAZY_DELETE_ENABLED_SETTING';
 
 const settings: Setting[] = [
-  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true },
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
-  { key: DEPLOYABLE, name: 'Show Deployables', value: true },
-  { key: STRUCTURE, name: 'Show Structures', value: true },
-  { key: STARBASE, name: 'Show Starbase', value: true },
-  { key: SHIP, name: 'Show Ships', value: true },
-  { key: DRONE, name: 'Show Drones And Charges', value: true },
+  { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false },
+  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false },
+  { key: LAZY_DELETE_SIGNATURES_SETTING, name: 'Lazy Delete Signatures', value: false, isFilter: false },
+  { key: KEEP_LAZY_DELETE_SETTING, name: 'Keep "Lazy Delete" Enabled', value: false, isFilter: false },
+  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
+  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
+  { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
+  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
+  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
+  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
+  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
+  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
+  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
+  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
+  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
+  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
+  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
 ];
 
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings';
-
 const defaultSettings = () => {
   return [...settings];
 };
@@ -47,12 +72,25 @@ export const SystemSignatures = () => {
 
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
+  const lazyDeleteValue = useMemo(() => {
+    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!.value;
+  }, [settings]);
+
   const handleSettingsChange = useCallback((settings: Setting[]) => {
     setSettings(settings);
     localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
     setVisible(false);
   }, []);
 
+  const handleLazyDeleteChange = useCallback((value: boolean) => {
+    setSettings(settings => {
+      const lazyDelete = settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!;
+      lazyDelete.value = value;
+      localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
+      return [...settings];
+    });
+  }, []);
+
   useEffect(() => {
     const restoredSettings = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
 
@@ -61,13 +99,34 @@ export const SystemSignatures = () => {
     }
   }, []);
 
+  const ref = useRef<HTMLDivElement>(null);
+  const compact = useMaxWidth(ref, 260);
+
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full h-full">
-          <div className="flex gap-1">System Signatures</div>
+        <div className="flex justify-between items-center text-xs w-full h-full" ref={ref}>
+          <div className="flex justify-between items-center gap-1">
+            {!compact && (
+              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+                Signatures {isNotSelectedSystem ? '' : 'in'}
+              </div>
+            )}
+            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+          </div>
 
           <LayoutEventBlocker className="flex gap-2.5">
+            <WdTooltipWrapper content="Enable Lazy delete">
+              <WdCheckbox
+                size="xs"
+                labelSide="left"
+                label={compact ? '' : 'Lazy delete'}
+                value={lazyDeleteValue}
+                classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
+                onChange={(event: CheckboxChangeEvent) => handleLazyDeleteChange(!!event.checked)}
+              />
+            </WdTooltipWrapper>
+
             <WdImgButton
               className={PrimeIcons.QUESTION_CIRCLE}
               tooltip={{
@@ -91,8 +150,7 @@ export const SystemSignatures = () => {
                     </InfoDrawer>
                     <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
                       For delete any signature first of all you need select before
-                      <br /> and then use <b className="text-sky-500">Del</b> or{' '}
-                      <b className="text-sky-500">Backspace</b>
+                      <br /> and then use <b className="text-sky-500">Del</b>
                     </InfoDrawer>
                   </div>
                 ) as React.ReactNode,
@@ -108,7 +166,7 @@ export const SystemSignatures = () => {
           System is not selected
         </div>
       ) : (
-        <SystemSignaturesContent systemId={systemId} settings={settings} />
+        <SystemSignaturesContent systemId={systemId} settings={settings} onLazyDeleteChange={handleLazyDeleteChange} />
       )}
       {visible && (
         <SystemSignatureSettingsDialog

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx

@@ -1,8 +1,11 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
+import {
+  getGroupIdByRawGroup,
+  GROUPS_LIST,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -11,6 +14,7 @@ import useRefState from 'react-usestateref';
 import { Setting } from '../SystemSignatureSettingsDialog';
 import { useHotkey } from '@/hooks/Mapper/hooks';
 import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
 
 import classes from './SystemSignaturesContent.module.scss';
 import clsx from 'clsx';
@@ -21,40 +25,55 @@ import {
   getRowColorByTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
 import {
+  renderAddedTimeLeft,
+  renderDescription,
   renderIcon,
   renderInfoColumn,
-  renderTimeLeft,
+  renderUpdatedTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
 import useLocalStorageState from 'use-local-storage-state';
 import { PrimeIcons } from 'primereact/api';
 import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
 import { useMapEventListener } from '@/hooks/Mapper/events';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-
+import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
+import {
+  SHOW_DESCRIPTION_COLUMN_SETTING,
+  SHOW_UPDATED_COLUMN_SETTING,
+  LAZY_DELETE_SIGNATURES_SETTING,
+  KEEP_LAZY_DELETE_SETTING,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
 type SystemSignaturesSortSettings = {
   sortField: string;
   sortOrder: SortOrder;
 };
 
 const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
-  sortField: 'updated_at',
+  sortField: 'inserted_at',
   sortOrder: -1,
 };
 
 interface SystemSignaturesContentProps {
   systemId: string;
   settings: Setting[];
+  hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
+  onLazyDeleteChange?: (value: boolean) => void;
 }
-export const SystemSignaturesContent = ({ systemId, settings, selectable, onSelect }: SystemSignaturesContentProps) => {
+export const SystemSignaturesContent = ({
+  systemId,
+  settings,
+  hideLinkedSignatures,
+  selectable,
+  onSelect,
+  onLazyDeleteChange,
+}: SystemSignaturesContentProps) => {
   const { outCommand } = useMapRootState();
 
   const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
   const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
   const [nameColumnWidth, setNameColumnWidth] = useState('auto');
-  const [parsedSignatures, setParsedSignatures] = useState<SystemSignature[]>([]);
-  const [askUser, setAskUser] = useState(false);
   const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
 
   const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
@@ -66,10 +85,20 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
   const tableRef = useRef<HTMLDivElement>(null);
   const compact = useMaxWidth(tableRef, 260);
   const medium = useMaxWidth(tableRef, 380);
+  const refData = useRef({ selectable });
+  refData.current = { selectable };
 
   const tooltipRef = useRef<WdTooltipHandlers>(null);
 
-  const { clipboardContent } = useClipboard();
+  const { clipboardContent, setClipboardContent } = useClipboard();
+
+  const lazyDeleteValue = useMemo(() => {
+    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
+  }, [settings]);
+
+  const keepLazyDeleteValue = useMemo(() => {
+    return settings.find(setting => setting.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
+  }, [settings]);
 
   const handleResize = useCallback(() => {
     if (tableRef.current) {
@@ -80,13 +109,39 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     }
   }, []);
 
+  const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]);
+  const showDescriptionColumn = useMemo(
+    () => settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value,
+    [settings],
+  );
+
+  const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]);
+
   const filteredSignatures = useMemo(() => {
     return signatures
-      .filter(x => settings.find(y => y.key === x.kind)?.value)
+      .filter(x => {
+        if (hideLinkedSignatures && !!x.linked_system) {
+          return false;
+        }
+
+        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
+        const preparedGroup = getGroupIdByRawGroup(x.group);
+
+        if (isCosmicSignature) {
+          const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
+          if (showCosmicSignatures) {
+            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
+          } else {
+            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
+          }
+        }
+
+        return settings.find(y => y.key === x.kind)?.value;
+      })
       .sort((a, b) => {
         return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime();
       });
-  }, [signatures, settings]);
+  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
 
   const handleGetSignatures = useCallback(async () => {
     const { signatures } = await outCommand({
@@ -94,33 +149,17 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
       data: { system_id: systemId },
     });
 
-    setAskUser(false);
     setSignatures(signatures);
   }, [outCommand, systemId]);
 
-  // const updateSignatures = useCallback(
-  //   async (newSignatures: SystemSignature[], updateOnly: boolean) => {
-  //     const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
-
-  //     const { signatures: updatedSignatures } = await outCommand({
-  //       type: OutCommand.updateSignatures,
-  //       data: {
-  //         system_id: systemId,
-  //         added,
-  //         updated,
-  //         removed,
-  //       },
-  //     });
-
-  //     setSignatures(() => updatedSignatures);
-  //     setSelectedSignatures([]);
-  //   },
-  //   [outCommand, systemId],
-  // );
-
   const handleUpdateSignatures = useCallback(
-    async (newSignatures: SystemSignature[], updateOnly: boolean) => {
-      const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
+    async (newSignatures: SystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
+      const { added, updated, removed } = getActualSigs(
+        signaturesRef.current,
+        newSignatures,
+        updateOnly,
+        skipUpdateUntouched,
+      );
 
       const { signatures: updatedSignatures } = await outCommand({
         type: OutCommand.updateSignatures,
@@ -138,34 +177,32 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     [outCommand, systemId],
   );
 
-  const handleDeleteSelected = useCallback(async () => {
-    if (selectable) {
-      return;
-    }
-    if (selectedSignatures.length === 0) {
-      return;
-    }
-    const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
-    await handleUpdateSignatures(
-      signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
-      false,
-    );
-  }, [handleUpdateSignatures, selectable, signatures, selectedSignatures]);
+  const handleDeleteSelected = useCallback(
+    async (e: KeyboardEvent) => {
+      if (selectable) {
+        return;
+      }
+      if (selectedSignatures.length === 0) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
+      await handleUpdateSignatures(
+        signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
+        false,
+        true,
+      );
+    },
+    [handleUpdateSignatures, selectable, signatures, selectedSignatures],
+  );
 
   const handleSelectAll = useCallback(() => {
     setSelectedSignatures(signatures);
   }, [signatures]);
 
-  const handleReplaceAll = useCallback(() => {
-    handleUpdateSignatures(parsedSignatures, false);
-    setAskUser(false);
-  }, [parsedSignatures, handleUpdateSignatures]);
-
-  const handleUpdateOnly = useCallback(() => {
-    handleUpdateSignatures(parsedSignatures, true);
-    setAskUser(false);
-  }, [parsedSignatures, handleUpdateSignatures]);
-
   const handleSelectSignatures = useCallback(
     // TODO still will be good to define types if we use typescript
     // @ts-ignore
@@ -179,38 +216,51 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     [onSelect, selectable],
   );
 
-  useHotkey(true, ['a'], handleSelectAll);
-
-  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
-
-  useEffect(() => {
-    if (selectable) {
-      return;
-    }
-
-    if (!clipboardContent) {
-      return;
-    }
-
+  const handlePaste = async (clipboardContent: string) => {
     const newSignatures = parseSignatures(
       clipboardContent,
       settings.map(x => x.key),
     );
 
-    const { removed } = getActualSigs(signaturesRef.current, newSignatures, false);
+    handleUpdateSignatures(newSignatures, !lazyDeleteValue);
 
-    if (!signaturesRef.current || !signaturesRef.current.length || !removed.length) {
-      handleUpdateSignatures(newSignatures, false);
-    } else {
-      setParsedSignatures(newSignatures);
-      setAskUser(true);
+    if (lazyDeleteValue && !keepLazyDeleteValue) {
+      onLazyDeleteChange?.(false);
     }
-  }, [clipboardContent, selectable]);
+  };
+
+  const handleEnterRow = useCallback(
+    (e: DataTableRowMouseEvent) => {
+      setHoveredSig(filteredSignatures[e.index]);
+      tooltipRef.current?.show(e.originalEvent);
+    },
+    [filteredSignatures],
+  );
+
+  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
+    tooltipRef.current?.hide(e.originalEvent);
+    setHoveredSig(null);
+  }, []);
+
+  useEffect(() => {
+    if (refData.current.selectable) {
+      return;
+    }
+
+    if (!clipboardContent?.text) {
+      return;
+    }
+
+    handlePaste(clipboardContent.text);
+    setClipboardContent(null);
+  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
+
+  useHotkey(true, ['a'], handleSelectAll);
+  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
 
   useEffect(() => {
     if (!systemId) {
       setSignatures([]);
-      setAskUser(false);
       return;
     }
 
@@ -244,19 +294,6 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
     };
   }, []);
 
-  const handleEnterRow = useCallback(
-    (e: DataTableRowMouseEvent) => {
-      setHoveredSig(filteredSignatures[e.index]);
-      tooltipRef.current?.show(e.originalEvent);
-    },
-    [filteredSignatures],
-  );
-
-  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
-    tooltipRef.current?.hide(e.originalEvent);
-    setHoveredSig(null);
-  }, []);
-
   const renderToolbar = (/*row: SystemSignature*/) => {
     return (
       <div className="flex justify-end items-center gap-2 mr-[4px]">
@@ -308,7 +345,7 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
                   return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
                 }
 
-                const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined);
+                const dateClass = getRowColorByTimeLeft(row.inserted_at ? new Date(row.inserted_at) : undefined);
                 if (!dateClass) {
                   return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
                 }
@@ -335,32 +372,56 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
                 header="Group"
                 bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
                 hidden={compact}
+                style={{ maxWidth: 110, minWidth: 110, width: 110 }}
                 sortable
               ></Column>
               <Column
                 field="info"
-                // header="Info"
                 bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
                 body={renderInfoColumn}
                 style={{ maxWidth: nameColumnWidth }}
                 hidden={compact || medium}
               ></Column>
+              {showDescriptionColumn && (
+                <Column
+                  field="description"
+                  header="Description"
+                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                  body={renderDescription}
+                  hidden={compact}
+                  sortable
+                ></Column>
+              )}
+
               <Column
-                field="updated_at"
-                header="Updated"
+                field="inserted_at"
+                header="Added"
                 dataType="date"
                 bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderTimeLeft}
+                body={renderAddedTimeLeft}
                 sortable
               ></Column>
 
-              <Column
-                bodyClassName="p-0 pl-1 pr-2"
-                field="group"
-                body={renderToolbar}
-                // headerClassName={headerClasses}
-                style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-              ></Column>
+              {showUpdatedColumn && (
+                <Column
+                  field="updated_at"
+                  header="Updated"
+                  dataType="date"
+                  bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+                  body={renderUpdatedTimeLeft}
+                  sortable
+                ></Column>
+              )}
+
+              {!selectable && (
+                <Column
+                  bodyClassName="p-0 pl-1 pr-2"
+                  field="group"
+                  body={renderToolbar}
+                  // headerClassName={headerClasses}
+                  style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+                ></Column>
+              )}
             </DataTable>
           </>
         )}
@@ -370,32 +431,13 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
           content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
         />
 
-        <SignatureSettings
-          systemId={systemId}
-          show={showSignatureSettings}
-          onHide={() => setShowSignatureSettings(false)}
-          signatureData={selectedSignature}
-        />
-
-        {askUser && (
-          <div className="absolute left-[1px] top-[29px] h-[calc(100%-30px)] w-[calc(100%-3px)] bg-stone-900/10 backdrop-blur-sm">
-            <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
-              <div className="text-stone-400/80 text-sm">
-                <div className="flex flex-col text-center gap-2">
-                  <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
-                    <span className="p-button-label p-c" onClick={handleUpdateOnly}>
-                      Update
-                    </span>
-                  </button>
-                  <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
-                    <span className="p-button-label p-c" onClick={handleReplaceAll}>
-                      Update & Delete missing
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+        {showSignatureSettings && (
+          <SignatureSettings
+            systemId={systemId}
+            show
+            onHide={() => setShowSignatureSettings(false)}
+            signatureData={selectedSignature}
+          />
         )}
       </div>
     </>

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts

@@ -1,4 +1,12 @@
-import { GroupType, SignatureGroup } from '@/hooks/Mapper/types';
+import {
+  GroupType,
+  SignatureGroup,
+  SignatureGroupENG,
+  SignatureGroupRU,
+  SignatureKind,
+  SignatureKindENG,
+  SignatureKindRU,
+} from '@/hooks/Mapper/types';
 
 export const TIME_ONE_MINUTE = 1000 * 60;
 export const TIME_TEN_MINUTES = 1000 * 60 * 10;
@@ -24,3 +32,43 @@ export const GROUPS: Record<SignatureGroup, GroupType> = {
   [SignatureGroup.Wormhole]: { id: SignatureGroup.Wormhole, icon: '/icons/brackets/wormhole.png', ...wh },
   [SignatureGroup.CosmicSignature]: { id: SignatureGroup.CosmicSignature, icon: '/icons/x_close14.png', w: 9, h: 9 },
 };
+
+export const MAPPING_GROUP_TO_ENG = {
+  // ENGLISH
+  [SignatureGroupENG.GasSite]: SignatureGroup.GasSite,
+  [SignatureGroupENG.RelicSite]: SignatureGroup.RelicSite,
+  [SignatureGroupENG.DataSite]: SignatureGroup.DataSite,
+  [SignatureGroupENG.OreSite]: SignatureGroup.OreSite,
+  [SignatureGroupENG.CombatSite]: SignatureGroup.CombatSite,
+  [SignatureGroupENG.Wormhole]: SignatureGroup.Wormhole,
+  [SignatureGroupENG.CosmicSignature]: SignatureGroup.CosmicSignature,
+
+  // RUSSIAN
+  [SignatureGroupRU.GasSite]: SignatureGroup.GasSite,
+  [SignatureGroupRU.RelicSite]: SignatureGroup.RelicSite,
+  [SignatureGroupRU.DataSite]: SignatureGroup.DataSite,
+  [SignatureGroupRU.OreSite]: SignatureGroup.OreSite,
+  [SignatureGroupRU.CombatSite]: SignatureGroup.CombatSite,
+  [SignatureGroupRU.Wormhole]: SignatureGroup.Wormhole,
+  [SignatureGroupRU.CosmicSignature]: SignatureGroup.CosmicSignature,
+};
+
+export const MAPPING_TYPE_TO_ENG = {
+  // ENGLISH
+  [SignatureKindENG.CosmicSignature]: SignatureKind.CosmicSignature,
+  [SignatureKindENG.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+  [SignatureKindENG.Structure]: SignatureKind.Structure,
+  [SignatureKindENG.Ship]: SignatureKind.Ship,
+  [SignatureKindENG.Deployable]: SignatureKind.Deployable,
+  [SignatureKindENG.Drone]: SignatureKind.Drone,
+
+  // RUSSIAN
+  [SignatureKindRU.CosmicSignature]: SignatureKind.CosmicSignature,
+  [SignatureKindRU.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+  [SignatureKindRU.Structure]: SignatureKind.Structure,
+  [SignatureKindRU.Ship]: SignatureKind.Ship,
+  [SignatureKindRU.Deployable]: SignatureKind.Deployable,
+  [SignatureKindRU.Drone]: SignatureKind.Drone,
+};
+
+export const getGroupIdByRawGroup = (val: string) => MAPPING_GROUP_TO_ENG[val as SignatureGroup];

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getActualSigs.ts

@@ -6,6 +6,7 @@ export const getActualSigs = (
   oldSignatures: SystemSignature[],
   newSignatures: SystemSignature[],
   updateOnly: boolean,
+  skipUpdateUntouched?: boolean,
 ): { added: SystemSignature[]; updated: SystemSignature[]; removed: SystemSignature[] } => {
   const updated: SystemSignature[] = [];
   const removed: SystemSignature[] = [];
@@ -19,6 +20,8 @@ export const getActualSigs = (
       const isNeedUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
       if (isNeedUpgrade) {
         updated.push({ ...oldSig, group: newSig.group, name: newSig.name });
+      } else if (!skipUpdateUntouched) {
+        updated.push({ ...oldSig });
       }
     } else {
       if (!updateOnly) {

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/index.ts

@@ -1,5 +1,7 @@
 export * from './renderIcon';
+export * from './renderDescription';
 export * from './renderName';
-export * from './renderTimeLeft';
+export * from './renderAddedTimeLeft';
+export * from './renderUpdatedTimeLeft';
 export * from './renderLinkedSystem';
 export * from './renderInfoColumn';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderAddedTimeLeft.tsx

@@ -0,0 +1,10 @@
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { TimeLeft } from '@/hooks/Mapper/components/ui-kit';
+
+export const renderAddedTimeLeft = (row: SystemSignature) => {
+  return (
+    <div className="flex w-full items-center">
+      <TimeLeft cDate={row.inserted_at ? new Date(row.inserted_at) : undefined} />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderDescription.tsx

@@ -0,0 +1,5 @@
+import { SystemSignature } from '@/hooks/Mapper/types';
+
+export const renderDescription = (row: SystemSignature) => {
+  return <span title={row?.description}>{row?.description}</span>;
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderInfoColumn.module.scss

@@ -1,3 +0,0 @@
-.whFontSize {
-  font-size: 11px !important;
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderInfoColumn.tsx

@@ -1,18 +1,33 @@
+import { PrimeIcons } from 'primereact/api';
 import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
-import { SystemViewStandalone, WHClassView } from '@/hooks/Mapper/components/ui-kit';
+import { SystemViewStandalone, TooltipPosition, WHClassView } from '@/hooks/Mapper/components/ui-kit';
+
+import { renderK162Type } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureK162TypeSelect';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+
 import clsx from 'clsx';
 import { renderName } from './renderName.tsx';
-import classes from './renderInfoColumn.module.scss';
+import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
+import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo.ts';
 
 export const renderInfoColumn = (row: SystemSignature) => {
   if (!row.group || row.group === SignatureGroup.Wormhole) {
+    const customInfo = parseSignatureCustomInfo(row.custom_info);
+
+    const k162TypeOption = customInfo.k162Type ? K162_TYPES_MAP[customInfo.k162Type] : null;
+
     return (
-      <div className="flex justify-start items-center gap-[6px]">
+      <div className="flex justify-start items-center gap-[4px]">
+        {customInfo.isEOL && (
+          <WdTooltipWrapper offset={5} position={TooltipPosition.top} content="Signature marked as EOL">
+            <div className="pi pi-clock text-fuchsia-400 text-[11px] mr-[2px]"></div>
+          </WdTooltipWrapper>
+        )}
+
         {row.type && (
           <WHClassView
             className="text-[11px]"
-            classNameWh={classes.whFontSize}
-            highlightName
+            classNameWh="!text-[11px] !font-bold"
             hideWhClass={!!row.linked_system}
             whClassName={row.type}
             noOffset
@@ -20,9 +35,10 @@ export const renderInfoColumn = (row: SystemSignature) => {
           />
         )}
 
+        {!row.linked_system && row.type === 'K162' && k162TypeOption && renderK162Type(k162TypeOption)}
+
         {row.linked_system && (
           <>
-            {/*<span className="w-4 h-4 hero-arrow-long-right"></span>*/}
             <span title={row.linked_system?.solar_system_name}>
               <SystemViewStandalone
                 className={clsx('select-none text-center cursor-context-menu')}
@@ -32,13 +48,23 @@ export const renderInfoColumn = (row: SystemSignature) => {
             </span>
           </>
         )}
+        {row.description && (
+          <WdTooltipWrapper content={row.description}>
+            <span className={clsx(PrimeIcons.EXCLAMATION_CIRCLE, 'text-[12px]')}></span>
+          </WdTooltipWrapper>
+        )}
       </div>
     );
   }
 
-  if (row.description != null && row.description.length > 0) {
-    return <span title={row.description}>{row.description}</span>;
-  }
-
-  return renderName(row);
+  return (
+    <div className="flex gap-1 items-center">
+      {renderName(row)}{' '}
+      {row.description && (
+        <WdTooltipWrapper content={row.description}>
+          <span className={clsx(PrimeIcons.EXCLAMATION_CIRCLE, 'text-[12px]')}></span>
+        </WdTooltipWrapper>
+      )}
+    </div>
+  );
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders/renderUpdatedTimeLeft.tsx

@@ -1,7 +1,7 @@
 import { SystemSignature } from '@/hooks/Mapper/types';
 import { TimeLeft } from '@/hooks/Mapper/components/ui-kit';
 
-export const renderTimeLeft = (row: SystemSignature) => {
+export const renderUpdatedTimeLeft = (row: SystemSignature) => {
   return (
     <div className="flex w-full items-center">
       <TimeLeft cDate={row.updated_at ? new Date(row.updated_at) : undefined} />

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructures.tsx

@@ -0,0 +1,118 @@
+import React, { useCallback, ClipboardEvent, useRef } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import {
+  LayoutEventBlocker,
+  WdImgButton,
+  TooltipPosition,
+  InfoDrawer,
+  SystemView,
+} from '@/hooks/Mapper/components/ui-kit';
+import { PrimeIcons } from 'primereact/api';
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+
+import { SystemStructuresContent } from './SystemStructuresContent/SystemStructuresContent';
+import { useSystemStructures } from './hooks/useSystemStructures';
+import { processSnippetText } from './helpers';
+
+export const SystemStructures: React.FC = () => {
+  const {
+    data: { selectedSystems },
+    outCommand,
+  } = useMapRootState();
+  const [systemId] = selectedSystems;
+  const isNotSelectedSystem = selectedSystems.length !== 1;
+
+  const { structures, handleUpdateStructures } = useSystemStructures({ systemId, outCommand });
+
+  const labelRef = useRef<HTMLDivElement>(null);
+  const isCompact = useMaxWidth(labelRef, 260);
+
+  const processClipboard = useCallback(
+    (text: string) => {
+      const updated = processSnippetText(text, structures);
+      handleUpdateStructures(updated);
+    },
+    [structures, handleUpdateStructures],
+  );
+
+  const handlePaste = useCallback(
+    (e: ClipboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      processClipboard(e.clipboardData.getData('text'));
+    },
+    [processClipboard],
+  );
+
+  const handlePasteTimer = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      processClipboard(text);
+    } catch (err) {
+      console.error('Clipboard read error:', err);
+    }
+  }, [processClipboard]);
+
+  function renderWidgetLabel() {
+    return (
+      <div className="flex justify-between items-center text-xs w-full h-full" ref={labelRef}>
+        <div className="flex justify-between items-center gap-1">
+          {!isCompact && (
+            <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+              Structures
+              {!isNotSelectedSystem && ' in'}
+            </div>
+          )}
+          {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+        </div>
+
+        <LayoutEventBlocker className="flex gap-2.5">
+          <WdImgButton
+            className={`${PrimeIcons.CLOCK} text-sky-400 hover:text-sky-200 transition duration-300`}
+            onClick={handlePasteTimer}
+            tooltip={{
+              position: TooltipPosition.left,
+              // @ts-ignore
+              content: 'Add Structures/Timer',
+            }}
+          />
+          <WdImgButton
+            className={PrimeIcons.QUESTION_CIRCLE}
+            tooltip={{
+              position: TooltipPosition.left,
+              // @ts-ignore
+              content: (
+                <div className="flex flex-col gap-1">
+                  <InfoDrawer title={<b className="text-slate-50">How to add/update structures?</b>}>
+                    In game, select one or more structures in D-Scan and then
+                    <br />
+                    use the blue add structure data button
+                  </InfoDrawer>
+                  <InfoDrawer title={<b className="text-slate-50">How to add a timer?</b>}>
+                    In game, select a structure with an active timer, right click to copy, and then
+                    <span className="text-blue-500"> blue </span>
+                    use the blue add structure data button
+                  </InfoDrawer>
+                </div>
+              ),
+            }}
+          />
+        </LayoutEventBlocker>
+      </div>
+    );
+  }
+
+  return (
+    <div tabIndex={0} onPaste={handlePaste} className="h-full flex flex-col" style={{ outline: 'none' }}>
+      <Widget label={renderWidgetLabel()}>
+        {isNotSelectedSystem ? (
+          <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
+            System is not selected
+          </div>
+        ) : (
+          <SystemStructuresContent structures={structures} onUpdateStructures={handleUpdateStructures} />
+        )}
+      </Widget>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresContent/SystemStructuresContent.module.scss

@@ -0,0 +1,24 @@
+.TableRowCompact {
+  height: 8px;
+  max-height: 8px;
+  font-size: 12px !important;
+  line-height: 8px;
+}
+
+.Table {
+  font-size: 12px;
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.Table .p-datatable-tbody > tr > td {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.Tooltip {
+  white-space: pre-line;
+  line-height: 1.2rem;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresContent/SystemStructuresContent.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { DataTable, DataTableRowClickEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { PrimeIcons } from 'primereact/api';
+import clsx from 'clsx';
+
+import { SystemStructuresDialog } from '../SystemStructuresDialog/SystemStructuresDialog';
+import { StructureItem } from '../helpers/structureTypes';
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import classes from './SystemStructuresContent.module.scss';
+import { renderOwnerCell, renderTypeCell, renderTimerCell } from '../renders/cellRenders';
+
+interface SystemStructuresContentProps {
+  structures: StructureItem[];
+  onUpdateStructures: (newList: StructureItem[]) => void;
+}
+
+export const SystemStructuresContent: React.FC<SystemStructuresContentProps> = ({ structures, onUpdateStructures }) => {
+  const [selectedRow, setSelectedRow] = useState<StructureItem | null>(null);
+  const [editingItem, setEditingItem] = useState<StructureItem | null>(null);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+
+  const handleRowClick = (e: DataTableRowClickEvent) => {
+    const row = e.data as StructureItem;
+    setSelectedRow(prev => (prev?.id === row.id ? null : row));
+  };
+
+  const handleRowDoubleClick = (e: DataTableRowClickEvent) => {
+    setEditingItem(e.data as StructureItem);
+    setShowEditDialog(true);
+  };
+
+  // Press Delete => remove selected row
+  const handleDeleteSelected = useCallback(
+    (e: KeyboardEvent) => {
+      if (!selectedRow) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const newList = structures.filter(s => s.id !== selectedRow.id);
+      onUpdateStructures(newList);
+      setSelectedRow(null);
+    },
+    [selectedRow, structures, onUpdateStructures],
+  );
+
+  useHotkey(false, ['Delete', 'Backspace'], handleDeleteSelected);
+
+  const visibleStructures = useMemo(() => {
+    return structures;
+  }, [structures]);
+
+  return (
+    <div className="flex flex-col gap-2 p-2 text-xs text-stone-200 h-full">
+      {visibleStructures.length === 0 ? (
+        <div className="flex-1 flex justify-center items-center text-stone-400/80 text-sm">No structures</div>
+      ) : (
+        <div className="flex-1">
+          <DataTable
+            value={visibleStructures}
+            dataKey="id"
+            className={clsx(classes.Table, 'w-full select-none h-full')}
+            size="small"
+            sortMode="single"
+            rowHover
+            style={{ tableLayout: 'fixed', width: '100%' }}
+            onRowClick={handleRowClick}
+            onRowDoubleClick={handleRowDoubleClick}
+            rowClassName={rowData => {
+              const isSelected = selectedRow?.id === rowData.id;
+              return clsx(
+                classes.TableRowCompact,
+                'transition-colors duration-200 cursor-pointer',
+                isSelected ? 'bg-amber-500/50 hover:bg-amber-500/70' : 'hover:bg-purple-400/20',
+              );
+            }}
+          >
+            <Column
+              header="Type"
+              body={renderTypeCell}
+              style={{
+                width: '160px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            />
+            <Column
+              field="name"
+              header="Name"
+              style={{
+                width: '120px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            />
+            <Column
+              header="Owner"
+              body={renderOwnerCell}
+              style={{
+                width: '120px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            />
+            <Column
+              field="status"
+              header="Status"
+              style={{
+                width: '100px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            />
+            <Column
+              header="Timer"
+              body={renderTimerCell}
+              style={{
+                width: '110px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            />
+            <Column
+              body={(rowData: StructureItem) => (
+                <i
+                  className={clsx(PrimeIcons.PENCIL, 'text-[14px] cursor-pointer')}
+                  title="Edit"
+                  onClick={() => {
+                    setEditingItem(rowData);
+                    setShowEditDialog(true);
+                  }}
+                />
+              )}
+              style={{
+                width: '40px',
+                textAlign: 'center',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            />
+          </DataTable>
+        </div>
+      )}
+
+      {showEditDialog && editingItem && (
+        <SystemStructuresDialog
+          visible={showEditDialog}
+          structure={editingItem}
+          onClose={() => setShowEditDialog(false)}
+          onSave={(updatedItem: StructureItem) => {
+            const newList = structures.map(s => (s.id === updatedItem.id ? updatedItem : s));
+            onUpdateStructures(newList);
+            setShowEditDialog(false);
+          }}
+          onDelete={(deleteId: string) => {
+            const newList = structures.filter(s => s.id !== deleteId);
+            onUpdateStructures(newList);
+            setShowEditDialog(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};