chore: release version v1.43.5

* fix: change structure tooltip to avoid paste confusion

* fix: clarify use of evetime and use primereact calendar

.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 }}

CHANGELOG.md

@@ -2,6 +2,347 @@
 
 <!-- changelog -->
 
+## [v1.43.5](https://github.com/wanderer-industries/wanderer/compare/v1.43.4...v1.43.5) (2025-01-22)
+
+
+
+
+### Bug Fixes:
+
+* Audit: Fix signature added/removed system name
+
+## [v1.43.4](https://github.com/wanderer-industries/wanderer/compare/v1.43.3...v1.43.4) (2025-01-21)
+
+
+
+
+### Bug Fixes:
+
+* improve structure widget styling (#127)
+
+## [v1.43.3](https://github.com/wanderer-industries/wanderer/compare/v1.43.2...v1.43.3) (2025-01-21)
+
+
+
+
+## [v1.43.2](https://github.com/wanderer-industries/wanderer/compare/v1.43.1...v1.43.2) (2025-01-21)
+
+
+
+
+### Bug Fixes:
+
+* prevent constraint error for follow/toggle (#132)
+
+## [v1.43.1](https://github.com/wanderer-industries/wanderer/compare/v1.43.0...v1.43.1) (2025-01-20)
+
+
+
+
+## [v1.43.0](https://github.com/wanderer-industries/wanderer/compare/v1.42.5...v1.43.0) (2025-01-20)
+
+
+
+
+### Features:
+
+* add news post for structures widget (#131)
+
+## [v1.42.5](https://github.com/wanderer-industries/wanderer/compare/v1.42.4...v1.42.5) (2025-01-20)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix link signatures on splash. Fix deleting connection on locked system remove.
+
+## [v1.42.4](https://github.com/wanderer-industries/wanderer/compare/v1.42.3...v1.42.4) (2025-01-20)
+
+
+
+
+### Bug Fixes:
+
+* Fix system statics list (required EVE DB data update). Add system name to signature added/removed audit log
+
+## [v1.42.3](https://github.com/wanderer-industries/wanderer/compare/v1.42.2...v1.42.3) (2025-01-17)
+
+
+
+
+### Bug Fixes:
+
+* change structure tooltip to avoid paste confusion (#125)
+
+* change structure tooltip to avoid paste confusion
+
+* clarify use of evetime and use primereact calendar
+
+## [v1.42.2](https://github.com/wanderer-industries/wanderer/compare/v1.42.1...v1.42.2) (2025-01-16)
+
+
+
+
+## [v1.42.1](https://github.com/wanderer-industries/wanderer/compare/v1.42.0...v1.42.1) (2025-01-16)
+
+
+
+
+### Bug Fixes:
+
+* Map: Remove linked sig ID if system containing signature removed from map
+
+## [v1.42.0](https://github.com/wanderer-industries/wanderer/compare/v1.41.0...v1.42.0) (2025-01-16)
+
+
+
+
+### Features:
+
+* Audit: Add 'Signatures added/removed' map audit events
+
+## [v1.41.0](https://github.com/wanderer-industries/wanderer/compare/v1.40.7...v1.41.0) (2025-01-16)
+
+
+
+
+### Features:
+
+* Audit: Add 'ACL added/removed' map audit events
+
+## [v1.40.7](https://github.com/wanderer-industries/wanderer/compare/v1.40.6...v1.40.7) (2025-01-15)
+
+
+
+
+## [v1.40.6](https://github.com/wanderer-industries/wanderer/compare/v1.40.5...v1.40.6) (2025-01-15)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix follow mode
+
+* center system is not selected text for structures (#122)
+
+* Map: Fix system revert issues
+
+* Map: Fix issues with splashing signatures select & sig ID in temp names
+
+## [v1.40.5](https://github.com/wanderer-industries/wanderer/compare/v1.40.4...v1.40.5) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix follow mode
+
+## [v1.40.4](https://github.com/wanderer-industries/wanderer/compare/v1.40.3...v1.40.4) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* center system is not selected text for structures (#122)
+
+## [v1.40.3](https://github.com/wanderer-industries/wanderer/compare/v1.40.2...v1.40.3) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix system revert issues
+
+## [v1.40.2](https://github.com/wanderer-industries/wanderer/compare/v1.40.1...v1.40.2) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix issues with splashing signatures select & sig ID in temp names
+
+## [v1.40.1](https://github.com/wanderer-industries/wanderer/compare/v1.40.0...v1.40.1) (2025-01-14)
+
+
+
+
+## [v1.40.0](https://github.com/wanderer-industries/wanderer/compare/v1.39.3...v1.40.0) (2025-01-14)
+
+
+
+
+### Features:
+
+* add structure widget with timer and associated api
+
+## [v1.39.3](https://github.com/wanderer-industries/wanderer/compare/v1.39.2...v1.39.3) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Add style of corners for windows. Add ability to reset widgets. A lot of refactoring
+
+## [v1.39.2](https://github.com/wanderer-industries/wanderer/compare/v1.39.1...v1.39.2) (2025-01-13)
+
+
+
+
+## [v1.39.1](https://github.com/wanderer-industries/wanderer/compare/v1.39.0...v1.39.1) (2025-01-13)
+
+
+
+
+### Bug Fixes:
+
+* Map: New windows systems
+
+* Map: Add new windows system and removed old
+
+* Map: First prototype of windows
+
+## [v1.39.0](https://github.com/wanderer-industries/wanderer/compare/v1.38.7...v1.39.0) (2025-01-13)
+
+
+
+
+### Features:
+
+* Map: Added option to show signature ID as system temporary name part
+
+## [v1.38.7](https://github.com/wanderer-industries/wanderer/compare/v1.38.6...v1.38.7) (2025-01-12)
+
+
+
+
+## [v1.38.6](https://github.com/wanderer-industries/wanderer/compare/v1.38.5...v1.38.6) (2025-01-12)
+
+
+
+
+## [v1.38.5](https://github.com/wanderer-industries/wanderer/compare/v1.38.4...v1.38.5) (2025-01-12)
+
+
+
+
+## [v1.38.4](https://github.com/wanderer-industries/wanderer/compare/v1.38.3...v1.38.4) (2025-01-12)
+
+
+
+
+## [v1.38.3](https://github.com/wanderer-industries/wanderer/compare/v1.38.2...v1.38.3) (2025-01-12)
+
+
+
+
+## [v1.38.2](https://github.com/wanderer-industries/wanderer/compare/v1.38.1...v1.38.2) (2025-01-11)
+
+
+
+
+### Bug Fixes:
+
+* Fix connections remove timeouts
+
+## [v1.38.1](https://github.com/wanderer-industries/wanderer/compare/v1.38.0...v1.38.1) (2025-01-10)
+
+
+
+
+### Bug Fixes:
+
+* restored default theme colors (#115)
+
+## [v1.38.0](https://github.com/wanderer-industries/wanderer/compare/v1.37.9...v1.38.0) (2025-01-10)
+
+
+
+
+### Features:
+
+* Map: Ability to store/view audit logs up to 3 months
+
+* Map: Inroduced Env settings for connection auto EOL/remove timeouts
+
+## [v1.37.9](https://github.com/wanderer-industries/wanderer/compare/v1.37.8...v1.37.9) (2025-01-10)
+
+
+
+
+### Bug Fixes:
+
+* restore system status colors (#112)
+
+* restore system status colors
+
+## [v1.37.8](https://github.com/wanderer-industries/wanderer/compare/v1.37.7...v1.37.8) (2025-01-10)
+
+
+
+
+### Bug Fixes:
+
+* fix issue with newly added systems not adding a connection (#114)
+
+* resolve issue with newly added systems not connecting
+
+## [v1.37.7](https://github.com/wanderer-industries/wanderer/compare/v1.37.6...v1.37.7) (2025-01-10)
+
+
+
+
+### Bug Fixes:
+
+* support additional theme names
+
+## [v1.37.6](https://github.com/wanderer-industries/wanderer/compare/v1.37.5...v1.37.6) (2025-01-09)
+
+
+
+
+### Bug Fixes:
+
+* support additional theme names
+
+## [v1.37.5](https://github.com/wanderer-industries/wanderer/compare/v1.37.4...v1.37.5) (2025-01-09)
+
+
+
+
+### Bug Fixes:
+
+* restore node styling, simplify framework for new themes
+
+## [v1.37.4](https://github.com/wanderer-industries/wanderer/compare/v1.37.3...v1.37.4) (2025-01-09)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed dbclick behaviour
+
+## [v1.37.3](https://github.com/wanderer-industries/wanderer/compare/v1.37.2...v1.37.3) (2025-01-09)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed dbclick behaviour
+
+## [v1.37.2](https://github.com/wanderer-industries/wanderer/compare/v1.37.1...v1.37.2) (2025-01-09)
+
+
+
+
 ## [v1.37.1](https://github.com/wanderer-industries/wanderer/compare/v1.37.0...v1.37.1) (2025-01-08)
 
 

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/js/hooks/Mapper/components/map/Map.module.scss

@@ -1,8 +1,11 @@
 .MapRoot {
   width: 100%;
   height: 100%;
-}
 
-.BackgroundAlternateColor {
-  background-color: var(--rf-soft-bg-color, #2f2f2f);
+  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,8 +1,8 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
-  ConnectionMode,
   Edge,
+  EdgeChange,
   MiniMap,
   Node,
   NodeChange,
@@ -17,16 +17,16 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useNodesState, useEdgesState, 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 { 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';
@@ -75,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,
 };
@@ -90,6 +84,7 @@ interface MapCompProps {
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
   onManualDelete(systems: string[]): void;
+  canRemoveConnection?(connectionId: string): boolean;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -119,8 +114,9 @@ const MapComp = ({
   isSoftBackground,
   theme,
   onAddSystem,
+  canRemoveConnection,
 }: MapCompProps) => {
-  const { getNode, getNodes } = useReactFlow();
+  const { getEdge, getNode, getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
@@ -130,6 +126,14 @@ const MapComp = ({
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
   const { variant, gap, size, color } = useBackgroundVars(theme);
+  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
+
+  // You can create nodeTypes dynamically based on the node component
+  const nodeTypes = useMemo(() => {
+    return {
+      custom: nodeComponent,
+    };
+  }, [nodeComponent]);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -218,7 +222,41 @@ const MapComp = ({
 
       onNodesChange(nextChanges);
     },
-    [getNode, onManualDelete, 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(() => {
@@ -236,14 +274,14 @@ const MapComp = ({
           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}
@@ -251,6 +289,10 @@ 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) => {
@@ -272,6 +314,12 @@ 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

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

@@ -9,6 +9,7 @@ export type MapData = MapUnionTypes & {
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
   isThickConnections: boolean;
+  linkedSigEveId: string;
 };
 
 interface MapProviderProps {

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

@@ -1,257 +0,0 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
-
-.RootCustomNode {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-}
-
-/* Region backgrounds */
-.Mataria,
-.Amarria,
-.Gallente,
-.Caldaria {
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-size: cover;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    z-index: -1;
-    border-radius: 3px;
-  }
-}
-.Mataria::before {
-  background-image: url('/images/mataria-180.png');
-  opacity: 0.6;
-  background-position-x: 1px;
-  background-position-y: -14px;
-}
-.Caldaria::before {
-  background-image: url('/images/caldaria-180.png');
-  opacity: 0.6;
-  background-position-x: 1px;
-  background-position-y: -10px;
-}
-.Amarria::before {
-  opacity: 0.45;
-  background-image: url('/images/amarr-180.png');
-  background-position-x: 0;
-  background-position-y: -13px;
-}
-.Gallente::before {
-  opacity: 0.5;
-  background-image: url('/images/gallente-180.png');
-  background-position-x: 1px;
-  background-position-y: 0;
-}
-
-/* Node selected styling */
-.selected {
-  border-color: var(--pastel-pink);
-  box-shadow: 0 0 10px #9a1af1c2;
-}
-
-/* Eve system status backgrounds, etc. */
-.eve-system-status-home {
-  border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly), transparent);
-  &.selected {
-    border-color: var(--eve-solar-system-status-color-home);
-  }
-}
-.eve-system-status-friendly {
-  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: var(--eve-solar-system-status-color-friendly-dark5);
-  }
-}
-.eve-system-status-lookingFor {
-  border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
-  background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
-  &.selected {
-    border-color: var(--pastel-pink);
-  }
-}
-.eve-system-status-warning {
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
-}
-.eve-system-status-dangerous {
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
-}
-.eve-system-status-target {
-  background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
-}
-
-/* Bookmarks row */
-.Bookmarks {
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  display: flex;
-  left: 4px;
-}
-.Bookmark {
-  min-width: 13px;
-  height: 22px;
-  position: relative;
-  top: -13px;
-  border-radius: 5px;
-  color: #ffffff;
-  font-size: 8px;
-  text-align: center;
-  padding-top: 2px;
-  font-weight: bolder;
-  padding-left: 3px;
-  padding-right: 3px;
-  &:not(:first-child) {
-    box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
-  }
-}
-.BookmarkWithIcon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: -2px;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 1);
-  padding-right: 2px;
-  .icon {
-    width: 8px;
-    height: 8px;
-    font-size: 8px;
-  }
-  .text {
-    margin-top: 1px;
-    font-size: 9px;
-  }
-}
-
-/* Slight shadow for text */
-.textShadowThin {
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
-}
-.tagSkyFontMedium {
-  color: #38bdf8;
-  font-weight: 500;
-}
-
-/* HeadRow near the top, possibly ~19px tall. */
-.HeadRow {
-  position: relative;
-  top: 1px;
-  .classTitle {
-    font-weight: bold;
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.73);
-    font-size: 11px;
-  }
-  .TagTitle {
-    font-size: 11px;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    color: #ffb01d;
-  }
-  @-moz-document url-prefix() {
-    .classSystemName {
-      font-family: inherit !important;
-      font-weight: bold;
-    }
-  }
-}
-
-/* Usually ~19px tall for bottom row. */
-.BottomRow {
-  height: 19px;
-  .localCounter {
-    display: flex;
-    gap: 2px;
-  }
-  .hasUserCharacters {
-    color: #fbbf24;
-  }
-}
-
-/* Overflows, effect icons, etc. */
-.systemNameOverflow {
-  flex-grow: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: sans-serif;
-}
-.effect {
-  width: 8px;
-  height: 8px;
-  margin-top: -2px;
-  border-radius: 2px;
-  margin-left: 1px;
-}
-.statics {
-  @-moz-document url-prefix() {
-    position: relative;
-    top: -1px;
-  }
-}
-
-/* The node handlers / double-click area */
-.Handlers {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.Handle {
-  border: 1px solid var(--pastel-blue);
-  width: 5px;
-  height: 5px;
-  &.selected {
-    border-color: var(--pastel-pink);
-  }
-  &.HandleTop {
-    top: -2px;
-  }
-  &.HandleRight {
-    right: -2px;
-  }
-  &.HandleBottom {
-    bottom: -2px;
-  }
-  &.HandleLeft {
-    left: -2px;
-  }
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-
-    &.HandleTop {
-      top: -3px;
-    }
-    &.HandleRight {
-      right: -3px;
-    }
-    &.HandleBottom {
-      bottom: -3px;
-    }
-    &.HandleLeft {
-      left: -3px;
-    }
-  }
-}
-
-/* Unsplashed signature containers */
-.Unsplashed {
-  position: absolute;
-  width: calc(50% - 4px);
-  z-index: -1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  left: 2px;
-  &--right {
-    left: calc(50% + 6px);
-  }
-}

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

@@ -1,336 +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 { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-
-
-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 { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { getSystemClassStyles, prepareUnsplashedChunks } 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 { interfaceSettings } = useMapRootState();
-  const { isShowUnsplashedSignatures } = interfaceSettings;
-
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-
-  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 signatures = data.system_signatures;
-
-  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};
-
-
-  const {
-    data: {
-      characters,
-      presentCharacters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    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);
-  }, [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;
-
-  const systemName = (isTempSystemNameEnabled && temporaryName) || solar_system_name;
-  const customName = (isTempSystemNameEnabled && temporaryName && name) || (solar_system_name !== name && name);
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      signatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, signatures]);
-
-  return (
-    <>
-      {visible && (
-        <div className={classes.Bookmarks}>
-          {labelCustom !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className={classes.textShadowThin}>{labelCustom}</span>
-            </div>
-          )}
-
-          {is_shattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie text-[0.55rem]')} />
-            </div>
-          )}
-
-          {killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[getActivityType(killsCount)])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, 'text-[0.65rem]')} />
-                <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
-        onMouseDownCapture={dbClick}
-        className={clsx(
-          classes.RootCustomNode,
-          regionClass,
-          classes[STATUS_CLASSES[status]],
-          { [classes.selected]: selected },
-          'flex flex-col w-[130px] h-[34px]',
-          'px-[6px] pt-[2px] pb-[3px] text-[10px]',
-          'leading-[1] space-y-[1px]',
-          'bg-[var(--tooltip-bg)] shadow-[0_0_5px_rgba(45,45,45,0.5)]',
-          'border border-[var(--pastel-blue-darken10)] rounded-[5px]'
-        )}
-      >
-        {visible && (
-          <>
-            <div className={clsx(classes.HeadRow, 'flex items-center gap-[3px]')}>
-              <div className={clsx(classes.classTitle, classTitleColor, classes.textShadowThin)}>
-                {class_title ?? '-'}
-              </div>
-
-              {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, classes.tagSkyFontMedium)}>
-                  {tag}
-                </div>
-              )}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  classes.textShadowThin,
-                  classes.systemNameOverflow,
-                  'overflow-hidden'
-                )}
-              >
-                {systemName}
-              </div>
-
-              {isWormhole && (
-                <div className={clsx(classes.statics, 'flex gap-[2px] text-[8px]')}>
-                  {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 gap-[3px]')}>
-              {customName && (
-                <div className={clsx('font-bold', classes.customName)}>
-                  {customName}
-                </div>
-              )}
-              {!isWormhole && !customName && <div className={clsx(classes.regionName)}>{region_name}</div>}
-              {isWormhole && !customName && <div />}
-
-              <div className="flex items-center ml-auto gap-[2px]">
-                {locked && (
-                  <i className={clsx(PrimeIcons.LOCK, 'text-[0.45rem] font-bold')} />
-                )}
-                {hubs.includes(solar_system_id.toString()) && (
-                  <i className={clsx(PrimeIcons.MAP_MARKER, 'text-[0.45rem] font-bold')} />
-                )}
-                {charactersInSystem.length > 0 && (
-                  <div
-                    className={clsx(
-                      classes.localCounter,
-                      { [classes.hasUserCharacters]: hasUserCharacters },
-                      'flex gap-[2px]'
-                    )}
-                  >
-                    <i className="pi pi-users text-[0.50rem]" />
-                    <span className="font-sans text-[0.65rem]">{charactersInSystem.length}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {visible && isShowUnsplashedSignatures && (
-        <div className={classes.Unsplashed}>
-          {unsplashedLeft.map(x => (
-            <UnsplashedSignature key={x.sig_id} signature={x} />
-          ))}
-        </div>
-      )}
-      {visible && isShowUnsplashedSignatures && (
-        <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-          {unsplashedRight.map(x => (
-            <UnsplashedSignature key={x.sig_id} signature={x} />
-          ))}
-        </div>
-      )}
-
-      <div className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});

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

@@ -0,0 +1,397 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
+$pastel-blue: #5a7d9a;
+$pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
+$dark-bg: #2d2d2d;
+$text-color: #ffffff;
+$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;
+  width: 130px;
+  height: 34px;
+
+  flex-direction: column;
+  padding: 2px 6px;
+  font-size: 10px;
+
+  background-color: $tooltip-bg;
+  box-shadow: 0 0 5px rgba($dark-bg, 0.5);
+  border: 1px solid darken($pastel-blue, 10%);
+  border-radius: 5px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+
+  &.Mataria,
+  &.Amarria,
+  &.Gallente,
+  &.Caldaria {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-size: cover;
+      background-position: 50% 50%;
+      z-index: -1;
+      background-repeat: no-repeat;
+      border-radius: 3px;
+    }
+  }
+
+  &.Mataria {
+    &::before {
+      background-image: url('/images/mataria-180.png');
+      opacity: 0.6;
+      background-position-x: 1px;
+      background-position-y: -14px;
+    }
+  }
+
+  &.Caldaria {
+    &::before {
+      background-image: url('/images/caldaria-180.png');
+      opacity: 0.6;
+      background-position-x: 1px;
+      background-position-y: -10px;
+    }
+  }
+
+  &.Amarria {
+    &::before {
+      opacity: 0.45;
+      background-image: url('/images/amarr-180.png');
+      background-position-x: 0;
+      background-position-y: -13px;
+    }
+  }
+
+  &.Gallente {
+    &::before {
+      opacity: 0.5;
+      background-image: url('/images/gallente-180.png');
+      background-position-x: 1px;
+      background-position-y: 0;
+    }
+  }
+
+  &.selected {
+    border-color: $pastel-pink;
+    box-shadow: 0 0 10px #9a1af1c2;
+  }
+
+  &.tooltip {
+    background-color: $tooltip-bg;
+    color: $text-color;
+    padding: 5px 10px;
+    border-radius: 3px;
+    border: 1px solid $pastel-pink;
+  }
+
+  &.eve-system-status-home {
+    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: var(--eve-solar-system-status-color-home);
+    }
+  }
+
+  &.eve-system-status-friendly {
+    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: var(--eve-solar-system-status-color-friendly-dark5);
+    }
+  }
+
+  &.eve-system-status-lookingFor {
+    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,
+      var(--eve-solar-system-status-warning),
+      transparent
+    );
+  }
+
+  &.eve-system-status-dangerous {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-dangerous),
+      transparent
+    );
+  }
+
+  &.eve-system-status-target {
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
+  }
+}
+
+.Bookmarks {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  left: 4px;
+
+  & > .Bookmark {
+    min-width: 13px;
+    height: 22px;
+    position: relative;
+    top: -13px;
+    border-radius: 5px;
+    color: #ffffff;
+    font-size: 8px;
+    text-align: center;
+    padding-top: 2px;
+    font-weight: bolder;
+    padding-left: 3px;
+    padding-right: 3px;
+
+    //background-color: #833ca4;
+
+    &:not(:first-child) {
+      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .BookmarkWithIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -2px;
+    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+    padding-right: 2px;
+
+    & > .icon {
+      width: 8px;
+      height: 8px;
+      font-size: 8px;
+    }
+
+    & > .text {
+      margin-top: 1px;
+      font-size: 9px;
+    }
+  }
+}
+
+.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;
+  font-size: 8px;
+}
+
+.HeadRow {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+  position: relative;
+  top: 1px;
+
+  .classTitle {
+    font-size: 11px;
+    font-weight: bold;
+    text-shadow: 0 0 2px rgb(0 0 0 / 73%);
+  }
+
+  .TagTitle {
+    font-size: 11px;
+    font-weight: medium;
+    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
+
+    color: var(--rf-tag-color, #38BDF8);
+  }
+
+  /* Firefox kostyl */
+  @-moz-document url-prefix() {
+    .classSystemName {
+      font-family: inherit !important;
+      font-weight: bold;
+    }
+  }
+
+  .classSystemName {
+    //font-weight: bold;
+  }
+
+  .solarSystemName {
+  }
+}
+
+.BottomRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 19px;
+
+  .localCounter {
+    display: flex;
+    //align-items: center;
+    gap: 2px;
+
+    & > i {
+      position: relative;
+      top: 1px;
+    }
+
+    & > span {
+      font-size: 9px;
+      line-height: 9px;
+      font-weight: 500;
+      //margin-top: 1px;
+    }
+  }
+}
+
+.effect {
+  width: 8px;
+  height: 8px;
+  margin-top: -2px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin-left: 1px;
+}
+
+.statics {
+  display: flex;
+  gap: 2px;
+  font-size: 8px;
+
+  & > * {
+    line-height: 10px;
+  }
+
+  /* Firefox kostyl */
+  @-moz-document url-prefix() {
+    position: relative;
+    top: -1px;
+  }
+}
+
+.Handlers {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.Handle {
+  min-width: initial;
+  min-height: initial;
+  border: 1px solid $pastel-blue;
+  width: 5px;
+  height: 5px;
+
+  &.selected {
+    border-color: $pastel-pink;
+  }
+
+  &.HandleTop {
+    top: -2px;
+  }
+
+  &.HandleRight {
+    right: -2px;
+  }
+
+  &.HandleBottom {
+    bottom: -2px;
+  }
+
+  &.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/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/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/useBackgroundVars.ts

@@ -1,15 +1,17 @@
 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')
+  const [color, setColor] = useState('#81818b');
 
-  useEffect(() => { 
-    let themeEl = document.querySelector('.pathfinder-theme, .neon-theme');
+  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;
     }
@@ -18,6 +20,7 @@ export function useBackgroundVars(themeName?: string) {
 
     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') {
@@ -26,7 +29,7 @@ export function useBackgroundVars(themeName?: string) {
 
     const cssVarGap = style.getPropertyValue('--rf-bg-gap');
     const cssVarSize = style.getPropertyValue('--rf-bg-size');
-    const cssColor = style.getPropertyValue('--rf-bg-color');
+    const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
 
     const gapNum = parseInt(cssVarGap, 10) || 16;
     const sizeNum = parseInt(cssVarSize, 10) || 1;
@@ -35,8 +38,7 @@ export function useBackgroundVars(themeName?: string) {
     setGap(gapNum);
     setSize(sizeNum);
     setColor(cssColor);
-
-  }, [themeName]); 
+  }, [themeName]);
 
   return { variant, gap, size, color };
 }

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

@@ -70,7 +70,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               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);

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/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,114 +1,121 @@
+
+$friendlyBase: #3bbd39;              
+$friendlyAlpha: #3bbd3952;           
+$friendlyDark20: darken($friendlyBase, 20%);
+$friendlyDark30: darken($friendlyBase, 30%);
+$friendlyDark5:  darken($friendlyBase, 5%);
+
+$lookingForBase: #43c2fd;            
+$lookingForAlpha: rgba(67, 176, 253, 0.48);
+$lookingForDark15: darken($lookingForBase, 15%);
+
+$homeBase: rgb(197, 253, 67);
+$homeAlpha: rgba(197, 253, 67, 0.32);
+$homeDark30: darken($homeBase, 30%);
+
+
 :root {
-    --pastel-blue: #5a7d9a;
-    --pastel-pink: #d291bc;
-    --pastel-green: #88b04b;
-    --pastel-yellow: #ffdd59;
-    --dark-bg: #2d2d2d;
-    --text-color: #ffffff;
-    --tooltip-bg: #202020;
+  --pastel-blue: #5a7d9a;
+  --pastel-pink: #d291bc;
+  --pastel-green: #88b04b;
+  --pastel-yellow: #ffdd59;
+  --dark-bg: #2d2d2d;
+  --text-color: #ffffff;
+  --tooltip-bg: #202020;
 
-    --pastel-blue-darken10: #4f6b86;
-    --pastel-blue-lighten10: #6da3af;
-    --pastel-pink-darken10: #bb7ca9;
-    --pastel-pink-lighten10: #e0a6cb;
+  --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;
 
-    --pastel-green-darken10: #79a244;
-    --pastel-green-lighten10: #99cf52;
+  --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;
 
-    --pastel-yellow-darken10: #e6c44f;
-    --pastel-yellow-lighten10: #ffe874;
+  --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 Link Colors */
-    --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-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;
 
-    /* Wormhole Effects */
-    --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-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;
 
-    /* WH Types */
-    --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-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;
 
-    /* Security Colors */
-    --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;
-
-    /* Solar System Status */
-    --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);
-
-    --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);
-
-    --eve-solar-system-status-color-friendly-dark20: #2d9b2e;
-    --eve-solar-system-status-friendly-dark30: #28892a;
-    --eve-solar-system-status-color-friendly-dark5: #38b538;
-    --eve-solar-system-status-color-lookingFor-dark15: #32aadf;
-
-    /* Context Menu */
-    --conn-time-eol: #7452c3e3;
-    --conn-frigate: #325d88;
-    --conn-save: rgba(155, 102, 45, 0.85);
-    --selected-item-bg: rgba(98, 98, 98, 0.33);
-  }
+  --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

@@ -429,7 +429,63 @@
   color: var(--eve-solar-system-status-color-dangerous);
 }
 
-/* Shapes */
+.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%);
 }
@@ -485,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

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

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

@@ -1,61 +0,0 @@
-@import './eve-common-variables';
-@import './eve-common';
-
-.neon-theme {
-  --pastel-blue: #5a7d9a;
-  --pastel-pink: #d291bc;
-  --pastel-green: #88b04b;
-  --pastel-yellow: #ffdd59;
-  --dark-bg: #2d2d2d;
-  --text-color: #ffffff;
-  --tooltip-bg: #202020;
-
-  --rf-bg-variant: "dots";
-  --rf-bg-gap: 16;
-
-  .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/pathfinder-theme.scss

@@ -1,22 +1,25 @@
-
 @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-bg-variant: "lines";
-  --rf-bg-gap: 32;
-  --rf-bg-color: #353535;
-  --rf-soft-bg-color: #282829;
+  --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;
 
-  --pf-text-color: #adadad;
-  --pf-dark-bg: #2d2d2d;
-  --pf-tooltip-bg: #202020;
   --rf-bg-variant: "lines";
   --rf-bg-gap: 32;
   --rf-bg-size: 1;
-  --rf-bg-color: #313131;
+  --rf-bg-pattern-color: #313131;
+
   --eve-effect-pulsar: #428bca;
   --eve-effect-magnetar: #e06fdf;
   --eve-effect-wolfRayet: #e28a0d;
@@ -36,153 +39,13 @@
   --eve-wh-type-color-c13: #7986cb;
   --eve-wh-type-color-drifter: #44aa82;
 
-  .MapRoot {
-    background-color: var(--rf-bg-color);
+  --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);
 
-    &.isSoftBackground {
-      background-color: var(--rf-soft-bg-color);
-    }
-    &.soft-bg {
-      --rf-bg-color: var(--rf-soft-bg-color);
-    }
-  }
+  --rf-tag-color: #fbbf24;
+  --rf-has-user-characters: #5cb85c;
 
-  .RootCustomNode {
-    background-color: #313335 !important;
-    font-weight: 600;
-    line-height: normal;
-    color: var(--pf-text-color);
-    font-family: 'Oxygen', sans-serif !important;
-  }
-
-  .HeadRow {
-    position: relative;
-    top: 1px;
-
-    .classTitle {
-      font-size: 11px;
-      font-weight: bold;
-      text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
-    }
-
-    @-moz-document url-prefix() {
-      .classSystemName {
-        font-family: inherit !important;
-        font-weight: bold;
-        mix-blend-mode: screen;
-      }
-    }
-
-    .classSystemName {
-      font-family: inherit !important;
-      font-weight: bold;
-      color: var(--pf-text-color);
-      mix-blend-mode: screen;
-      text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
-    }
-
-    .textEllipsis {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .fontSans {
-      font-family: inherit !important;
-    }
-  }
-
-  .BottomRow {
-    .localCounter {
-      display: flex;
-
-      & > i {
-        position: relative;
-        top: 1px;
-      }
-      & > span {
-        font-size: 9px;
-        line-height: 9px;
-        font-weight: 700;
-        mix-blend-mode: screen;
-        color: #5cb85c;
-      }
-    }
-
-    .customName {
-      font-family: inherit !important;
-      font-weight: bold;
-      color: var(--pf-text-color);
-      mix-blend-mode: screen;
-      text-shadow: rgba(0, 0, 0, 0.4) 1px 1px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      flex-shrink: 1;
-    }
-
-    .tagTitle {
-      font-size: 9px;
-      font-family: inherit !important;
-      font-weight: bold;
-      color: #fbbf24 !important;
-      mix-blend-mode: screen;
-    }
-  }
-
-  .Handlers {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .Handle {
-    min-width: initial;
-    min-height: initial;
-    border: 1px solid var(--pastel-blue, #5a7d9a);
-    width: 5px;
-    height: 5px;
-
-    &.selected {
-      border-color: var(--pastel-pink, #d291bc);
-    }
-
-    &.HandleTop {
-      top: -2px;
-    }
-    &.HandleRight {
-      right: -2px;
-    }
-    &.HandleBottom {
-      bottom: -2px;
-    }
-    &.HandleLeft {
-      left: -2px;
-    }
-
-    &.Tick {
-      width: 7px;
-      height: 7px;
-
-      &.HandleTop {
-        top: -3px;
-      }
-      &.HandleRight {
-        right: -3px;
-      }
-      &.HandleBottom {
-        bottom: -3px;
-      }
-      &.HandleLeft {
-        left: -3px;
-      }
-    }
-  }
-
-  .react-flow {
-    color: var(--pf-text-color);
-  }
-}
+  --window-corner: #72716f;
+}

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

@@ -1,78 +1,25 @@
 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) {
-    console.warn('No windows found in local storage!!');
-    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();
 
-  return (
-    <WidgetsGrid
-      items={items}
-      onChange={x => {
-        saveWindowsToLS(x);
-        setItems(x);
-      }}
-    />
-  );
+  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 <WindowManager windows={items} dragSelector=".react-grid-dragHandleExample" onChange={updateWidgetSettings} />;
 };

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';
@@ -58,7 +58,7 @@ 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"

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,92 @@
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import {
+  LocalCharacters,
+  RoutesWidget,
+  SystemInfo,
+  SystemSignatures,
+  SystemStructures,
+} 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',
+}
+
+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 />,
+  },
+];
+
+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',
+  },
+];

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/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>
+  );
+};

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

@@ -0,0 +1,31 @@
+
+   .systemStructureDialog {
+  
+    .p-dialog-content {
+      background-color: var(--surface-800) !important;
+    }
+  
+    .p-dialog-header {
+      background-color: var(--surface-700);
+      color: var(--text-color);
+    }
+  
+    .p-dialog-header-icon,
+    .p-dialog-header-title {
+      color: var(--gray-200);
+    }
+  
+    .p-inputtext {
+      background-color: #2a2a2a !important;
+      color: #ddd !important;
+      font-size: 12px !important;
+      padding: 0.25rem 0.5rem !important;
+    }
+  
+    .p-dialog-footer {
+      .p-button {
+        font-size: 12px !important;
+        padding: 0.3rem 0.75rem !important;
+      }
+    }
+  }

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

@@ -0,0 +1,235 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { AutoComplete } from 'primereact/autocomplete';
+import { Calendar } from 'primereact/calendar';
+import clsx from 'clsx';
+
+import { StructureItem, StructureStatus, statusesRequiringTimer, formatToISO } from '../helpers';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { OutCommand } from '@/hooks/Mapper/types';
+
+interface StructuresEditDialogProps {
+  visible: boolean;
+  structure?: StructureItem;
+  onClose: () => void;
+  onSave: (updatedItem: StructureItem) => void;
+  onDelete: (id: string) => void;
+}
+
+export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
+  visible,
+  structure,
+  onClose,
+  onSave,
+  onDelete,
+}) => {
+  const [editData, setEditData] = useState<StructureItem | null>(null);
+  const [ownerInput, setOwnerInput] = useState('');
+  const [ownerSuggestions, setOwnerSuggestions] = useState<{ label: string; value: string }[]>([]);
+
+  const { outCommand } = useMapRootState();
+
+  const [prevQuery, setPrevQuery] = useState('');
+  const [prevResults, setPrevResults] = useState<{ label: string; value: string }[]>([]);
+
+  useEffect(() => {
+    if (structure) {
+      setEditData(structure);
+      setOwnerInput(structure.ownerName ?? '');
+    } else {
+      setEditData(null);
+      setOwnerInput('');
+    }
+  }, [structure]);
+
+  // Searching corporation owners via auto-complete
+  const searchOwners = useCallback(
+    async (e: { query: string }) => {
+      const newQuery = e.query.trim();
+      if (!newQuery) {
+        setOwnerSuggestions([]);
+        return;
+      }
+
+      // If user typed more text but we have partial match in prevResults
+      if (newQuery.startsWith(prevQuery) && prevResults.length > 0) {
+        const filtered = prevResults.filter(item =>
+          item.label.toLowerCase().includes(newQuery.toLowerCase()),
+        );
+        setOwnerSuggestions(filtered);
+        return;
+      }
+
+      try {
+        const { results = [] } = await outCommand({
+          type: OutCommand.getCorporationNames,
+          data: { search: newQuery },
+        });
+        setOwnerSuggestions(results);
+        setPrevQuery(newQuery);
+        setPrevResults(results);
+      } catch (err) {
+        console.error('Failed to fetch owners:', err);
+        setOwnerSuggestions([]);
+      }
+    },
+    [prevQuery, prevResults, outCommand],
+  );
+
+  const handleChange = (field: keyof StructureItem, val: string | Date) => {
+    // If we want to forbid changing structureTypeId or structureType from the dialog, do so here:
+    if (field === 'structureTypeId' || field === 'structureType') return;
+
+    setEditData(prev => {
+      if (!prev) return null;
+
+      // If this is the endTime (Date from Calendar), we store as ISO or string:
+      if (field === 'endTime' && val instanceof Date) {
+        return { ...prev, endTime: val.toISOString() };
+      }
+
+      return { ...prev, [field]: val };
+    });
+  };
+
+  // when user picks a corp from auto-complete
+  const handleSelectOwner = (selected: { label: string; value: string }) => {
+    setOwnerInput(selected.label);
+    setEditData(prev =>
+      prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null,
+    );
+  };
+
+  const handleStatusChange = (val: string) => {
+    setEditData(prev => {
+      if (!prev) return null;
+      const newStatus = val as StructureStatus;
+      // If new status doesn't require a timer, we clear out endTime
+      const newEndTime = statusesRequiringTimer.includes(newStatus) ? prev.endTime : '';
+      return { ...prev, status: newStatus, endTime: newEndTime };
+    });
+  };
+
+  const handleSaveClick = async () => {
+    if (!editData) return;
+
+    // If status doesn't require a timer, clear endTime
+    if (!statusesRequiringTimer.includes(editData.status)) {
+      editData.endTime = '';
+    } else if (editData.endTime) {
+      // convert to full ISO if not already
+      editData.endTime = formatToISO(editData.endTime);
+    }
+
+    // fetch corporation ticker if we have an ownerId
+    if (editData.ownerId) {
+      try {
+        const { ticker } = await outCommand({
+          type: OutCommand.getCorporationTicker,
+          data: { corp_id: editData.ownerId },
+        });
+        editData.ownerTicker = ticker ?? '';
+      } catch (err) {
+        console.error('Failed to fetch ticker:', err);
+        editData.ownerTicker = '';
+      }
+    }
+
+    onSave(editData);
+  };
+
+  const handleDeleteClick = () => {
+    if (!editData) return;
+    onDelete(editData.id);
+    onClose();
+  };
+
+  if (!editData) return null;
+
+  return (
+    <Dialog
+      visible={visible}
+      onHide={onClose}
+      header={`Edit Structure - ${editData.name ?? ''}`}
+      className={clsx('myStructuresDialog', 'text-stone-200 w-full max-w-md')}
+    >
+      <div className="flex flex-col gap-2 text-[14px]">
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Type:</span>
+          <input
+            readOnly
+            className="p-inputtext p-component cursor-not-allowed"
+            value={editData.structureType ?? ''}
+          />
+        </label>
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Name:</span>
+          <input
+            className="p-inputtext p-component"
+            value={editData.name ?? ''}
+            onChange={e => handleChange('name', e.target.value)}
+          />
+        </label>
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Owner:</span>
+          <AutoComplete
+            id="owner"
+            value={ownerInput}
+            suggestions={ownerSuggestions}
+            completeMethod={searchOwners}
+            minLength={3}
+            delay={400}
+            field="label"
+            placeholder="Corporation name..."
+            onChange={e => setOwnerInput(e.value)}
+            onSelect={e => handleSelectOwner(e.value)}
+          />
+        </label>
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Status:</span>
+          <select
+            className="p-inputtext p-component"
+            value={editData.status}
+            onChange={e => handleStatusChange(e.target.value)}
+          >
+            <option value="Powered">Powered</option>
+            <option value="Anchoring">Anchoring</option>
+            <option value="Unanchoring">Unanchoring</option>
+            <option value="Low Power">Low Power</option>
+            <option value="Abandoned">Abandoned</option>
+            <option value="Reinforced">Reinforced</option>
+          </select>
+        </label>
+
+        {statusesRequiringTimer.includes(editData.status) && (
+          <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+            <span>Timer <br /> (Eve Time):</span>
+            <Calendar
+              value={editData.endTime ? new Date(editData.endTime) : undefined}
+              onChange={(e) => handleChange('endTime', e.value ?? '')}
+              showTime
+              hourFormat="24"
+              dateFormat="yy-mm-dd"
+              showIcon
+            />
+          </label>
+        )}
+
+        <label className="grid grid-cols-[100px_1fr] gap-2 items-start mt-2">
+          <span className="mt-1">Notes:</span>
+          <textarea
+            className="p-inputtext p-component resize-none h-24"
+            value={editData.notes ?? ''}
+            onChange={e => handleChange('notes', e.target.value)}
+          />
+        </label>
+      </div>
+
+      <div className="flex justify-end items-center gap-2 mt-4">
+        <Button label="Delete" severity="danger" className="p-button-sm" onClick={handleDeleteClick} />
+        <Button label="Save" className="p-button-sm" onClick={handleSaveClick} />
+      </div>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from './parserHelper';
+export * from './pasteParser';
+export * from './structureTypes';
+export * from './structureUtils';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/parserHelper.ts

@@ -0,0 +1,92 @@
+import { StructureStatus, StructureItem, STRUCTURE_TYPE_MAP } from './structureTypes';
+import { formatToISO } from './structureUtils';
+
+// Up to you if you'd like to keep a separate constant here or not
+export const statusesRequiringTimer: StructureStatus[] = ['Anchoring', 'Reinforced'];
+
+/**
+ * parseFormatOneLine(line):
+ *  - Splits by tabs
+ *  - First col => structureTypeId
+ *  - Second col => rawName
+ *  - Third col => structureTypeName
+ */
+export function parseFormatOneLine(line: string): StructureItem | null {
+  const columns = line
+    .split('\t')
+    .map(c => c.trim())
+    .filter(Boolean);
+
+  // Expecting e.g. "35832   J214811 - SomeName    Astrahus"
+  if (columns.length < 3) {
+    return null;
+  }
+
+  const [rawTypeId, rawName, rawTypeName] = columns;
+
+  if (columns.length != 4) {
+    return null;
+  }
+
+  if (!STRUCTURE_TYPE_MAP[rawTypeId]) {
+    return null;
+  }
+
+  if (rawTypeName != STRUCTURE_TYPE_MAP[rawTypeId]) {
+    return null;
+  }
+
+  const name = rawName.replace(/^J\d{6}\s*-\s*/, '').trim();
+
+  return {
+    id: crypto.randomUUID(),
+    structureTypeId: rawTypeId,
+    structureType: rawTypeName,
+    name,
+    ownerName: '',
+    notes: '',
+    status: 'Powered', // Default
+    endTime: '', // No timer by default
+  };
+}
+
+export function matchesThreeLineSnippet(lines: string[]): boolean {
+  if (lines.length < 3) return false;
+  return /until\s+\d{4}\.\d{2}\.\d{2}/i.test(lines[2]);
+}
+
+/**
+ * parseThreeLineSnippet:
+ *  - Example lines:
+ *    line1: "J214811 - Folgers"
+ *    line2: "1,475 km"
+ *    line3: "Reinforced until 2025.01.13 23:51"
+ */
+export function parseThreeLineSnippet(lines: string[]): StructureItem {
+  const [line1, , line3] = lines;
+
+  let status: StructureStatus = 'Reinforced';
+  let endTime: string | undefined;
+
+  // e.g. "Reinforced until 2025.01.13 23:27"
+  const match = line3.match(/^(?<stat>\w+)\s+until\s+(?<dateTime>[\d.]+\s+[\d:]+)/i);
+
+  if (match?.groups?.stat) {
+    const candidateStatus = match.groups.stat as StructureStatus;
+    if (statusesRequiringTimer.includes(candidateStatus)) {
+      status = candidateStatus;
+    }
+  }
+  if (match?.groups?.dateTime) {
+    let dt = match.groups.dateTime.trim().replace(/\./g, '-'); // "2025-01-13 23:27"
+    dt = dt.replace(' ', 'T'); // "2025-01-13T23:27"
+    endTime = formatToISO(dt); // => "2025-01-13T23:27:00Z"
+  }
+
+  return {
+    id: crypto.randomUUID(),
+    name: line1.replace(/^J\d{6}\s*-\s*/, '').trim(),
+    status,
+    endTime,
+  };
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/pasteParser.ts

@@ -0,0 +1,56 @@
+import { StructureItem } from './structureTypes';
+import { parseThreeLineSnippet, parseFormatOneLine, matchesThreeLineSnippet } from './parserHelper';
+
+export function processSnippetText(rawText: string, existingStructures: StructureItem[]): StructureItem[] {
+  if (!rawText) {
+    return existingStructures.slice();
+  }
+
+  const lines = rawText
+    .split(/\r?\n/)
+    .map(line => line.trim())
+    .filter(Boolean);
+
+  if (lines.length === 3 && matchesThreeLineSnippet(lines)) {
+    return applyThreeLineSnippet(lines, existingStructures);
+  } else {
+    return applySingleLineParse(lines, existingStructures);
+  }
+}
+
+function applyThreeLineSnippet(snippetLines: string[], existingStructures: StructureItem[]): StructureItem[] {
+  const updatedList = [...existingStructures];
+  const snippetItem = parseThreeLineSnippet(snippetLines);
+
+  const existingIndex = updatedList.findIndex(s => s.name.trim() === snippetItem.name.trim());
+
+  if (existingIndex !== -1) {
+    const existing = updatedList[existingIndex];
+    updatedList[existingIndex] = {
+      ...existing,
+      status: snippetItem.status,
+      endTime: snippetItem.endTime,
+    };
+  }
+
+  return updatedList;
+}
+
+function applySingleLineParse(lines: string[], existingStructures: StructureItem[]): StructureItem[] {
+  const updatedList = [...existingStructures];
+  const newItems: StructureItem[] = [];
+
+  for (const line of lines) {
+    const item = parseFormatOneLine(line);
+    if (!item) continue;
+
+    const isDuplicate = updatedList.some(
+      s => s.structureTypeId === item.structureTypeId && s.name.trim() === item.name.trim(),
+    );
+    if (!isDuplicate) {
+      newItems.push(item);
+    }
+  }
+
+  return [...updatedList, ...newItems];
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/structureTypes.ts

@@ -0,0 +1,32 @@
+export type StructureStatus = 'Powered' | 'Anchoring' | 'Unanchoring' | 'Low Power' | 'Abandoned' | 'Reinforced';
+
+export interface StructureItem {
+  id: string;
+  systemId?: string;
+  structureTypeId?: string;
+  structureType?: string;
+  name: string;
+  ownerName?: string;
+  ownerId?: string;
+  ownerTicker?: string;
+  notes?: string;
+  status: StructureStatus;
+  endTime?: string;
+}
+
+export const STRUCTURE_TYPE_MAP: Record<string, string> = {
+  '35825': 'Raitaru',
+  '35826': 'Azbel',
+  '35827': 'Sotiyo',
+  '35832': 'Astrahus',
+  '35833': 'Fortizar',
+  '35834': 'Keepstar',
+  '35835': 'Athanor',
+  '35836': 'Tatara',
+  '40340': 'Upwell Palatine Keepstar',
+  '47512': "'Moreau' Fortizar",
+  '47513': "'Draccous' Fortizar",
+  '47514': "'Horizon' Fortizar",
+  '47515': "'Marginis' Fortizar",
+  '47516': "'Prometheus' Fortizar",
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/structureUtils.ts

@@ -0,0 +1,59 @@
+import { StructureItem } from './structureTypes';
+
+export function getActualStructures(oldList: StructureItem[], newList: StructureItem[]) {
+  const oldMap = new Map(oldList.map(s => [s.id, s]));
+  const newMap = new Map(newList.map(s => [s.id, s]));
+
+  const added: StructureItem[] = [];
+  const updated: StructureItem[] = [];
+  const removed: StructureItem[] = [];
+
+  for (const newItem of newList) {
+    const oldItem = oldMap.get(newItem.id);
+    if (!oldItem) {
+      added.push(newItem);
+    } else if (JSON.stringify(oldItem) !== JSON.stringify(newItem)) {
+      updated.push(newItem);
+    }
+  }
+
+  for (const oldItem of oldList) {
+    if (!newMap.has(oldItem.id)) {
+      removed.push(oldItem);
+    }
+  }
+
+  return { added, updated, removed };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mapServerStructure(serverData: any): StructureItem {
+  const { owner_id, owner_ticker, structure_type_id, structure_type, owner_name, end_time, system_id, ...rest } =
+    serverData;
+
+  return {
+    ...rest,
+    ownerId: owner_id,
+    ownerTicker: owner_ticker,
+    ownerName: owner_name,
+    structureType: structure_type,
+    structureTypeId: structure_type_id,
+    endTime: end_time ?? '',
+    systemId: system_id,
+  };
+}
+
+export function formatToISO(datetimeLocal: string): string {
+  if (!datetimeLocal) return '';
+
+  // If missing seconds, add :00
+  let iso = datetimeLocal;
+  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(iso)) {
+    iso += ':00';
+  }
+  // Ensure trailing 'Z'
+  if (!iso.endsWith('Z')) {
+    iso += 'Z';
+  }
+  return iso;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/hooks/useSystemStructures.ts

@@ -0,0 +1,85 @@
+import { useEffect, useState, useCallback } from 'react';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { mapServerStructure, getActualStructures, StructureItem, statusesRequiringTimer } from '../helpers';
+
+interface UseSystemStructuresProps {
+  systemId: string | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outCommand: (payload: any) => Promise<any>;
+}
+
+export function useSystemStructures({ systemId, outCommand }: UseSystemStructuresProps) {
+  const [structures, setStructures] = useState<StructureItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchStructures = useCallback(async () => {
+    if (!systemId) {
+      setStructures([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const { structures: fetched = [] } = await outCommand({
+        type: OutCommand.getStructures,
+        data: { system_id: systemId },
+      });
+
+      const mappedStructures = fetched.map(mapServerStructure);
+      setStructures(mappedStructures);
+    } catch (err) {
+      console.error('Failed to get structures:', err);
+      setError('Error fetching structures');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [systemId, outCommand]);
+
+  useEffect(() => {
+    fetchStructures();
+  }, [fetchStructures]);
+
+  const sanitizeEndTimers = useCallback((item: StructureItem) => {
+    if (!statusesRequiringTimer.includes(item.status)) {
+      item.endTime = '';
+    }
+    return item;
+  }, []);
+
+  const sanitizeIds = useCallback((item: StructureItem) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, ...rest } = item;
+    return rest;
+  }, []);
+
+  const handleUpdateStructures = useCallback(
+    async (newList: StructureItem[]) => {
+      const { added, updated, removed } = getActualStructures(structures, newList);
+
+      const sanitizedAdded = added.map(sanitizeIds);
+      const sanitizedUpdated = updated.map(sanitizeEndTimers);
+
+      try {
+        const { structures: updatedStructures = [] } = await outCommand({
+          type: OutCommand.updateStructures,
+          data: {
+            system_id: systemId,
+            added: sanitizedAdded,
+            updated: sanitizedUpdated,
+            removed,
+          },
+        });
+
+        const finalStructures = updatedStructures.map(mapServerStructure);
+        setStructures(finalStructures);
+      } catch (err) {
+        console.error('Failed to update structures:', err);
+      }
+    },
+    [structures, systemId, outCommand, sanitizeIds, sanitizeEndTimers],
+  );
+
+  return { structures, handleUpdateStructures, isLoading, error };
+}

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

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

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

@@ -0,0 +1,50 @@
+// File: TimerCell.tsx
+import React, { useEffect, useState } from 'react';
+import { StructureStatus } from '../helpers/structureTypes';
+import { statusesRequiringTimer } from '../helpers';
+
+interface TimerCellProps {
+  endTime?: string;
+  status: StructureStatus;
+}
+
+function TimerCellImpl({ endTime, status }: TimerCellProps) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!endTime || !statusesRequiringTimer.includes(status)) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [endTime, status]);
+
+  if (!statusesRequiringTimer.includes(status)) {
+    return <span className="text-stone-400"></span>;
+  }
+  if (!endTime) {
+    return <span className="text-sky-400">Set Timer</span>;
+  }
+
+  const msLeft = new Date(endTime).getTime() - now;
+  if (msLeft <= 0) {
+    return <span className="text-red-500">00:00:00</span>;
+  }
+
+  const sec = Math.floor(msLeft / 1000) % 60;
+  const min = Math.floor(msLeft / (1000 * 60)) % 60;
+  const hr = Math.floor(msLeft / (1000 * 3600));
+
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return (
+    <span className="text-sky-400">
+      {pad(hr)}:{pad(min)}:{pad(sec)}
+    </span>
+  );
+}
+
+export const TimerCell = React.memo(TimerCellImpl);

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

@@ -0,0 +1,36 @@
+import { StructureItem } from '../helpers';
+import { TimerCell } from './TimerCell';
+
+export function renderTimerCell(row: StructureItem) {
+  return <TimerCell endTime={row.endTime} status={row.status} />;
+}
+
+export function renderOwnerCell(row: StructureItem) {
+  return (
+    <div className="flex items-center gap-2">
+      {row.ownerId && (
+        <img
+          src={`https://images.evetech.net/corporations/${row.ownerId}/logo?size=32`}
+          alt="corp icon"
+          className="w-5 h-5 object-contain"
+        />
+      )}
+      <span>{row.ownerTicker || row.ownerName}</span>
+    </div>
+  );
+}
+
+export function renderTypeCell(row: StructureItem) {
+  return (
+    <div className="flex items-center gap-1">
+      {row.structureTypeId && (
+        <img
+          src={`https://images.evetech.net/types/${row.structureTypeId}/icon`}
+          alt="icon"
+          className="w-5 h-5 object-contain"
+        />
+      )}
+      <span>{row.structureType ?? ''}</span>
+    </div>
+  );
+}

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

@@ -2,3 +2,4 @@ export * from './LocalCharacters';
 export * from './SystemInfo';
 export * from './RoutesWidget';
 export * from './SystemSignatures';
+export * from './SystemStructures';

assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx

@@ -16,7 +16,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const { interfaceSettings } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
 
-  const themeClass = `${interfaceSettings.theme ?? 'neon'}-theme`;
+  const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;
 
   const [showOnTheMap, setShowOnTheMap] = useState(false);
   const [showMapSettings, setShowMapSettings] = useState(false);

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.module.scss

@@ -13,6 +13,7 @@
     .p-tabview-panels {
       padding: 6px 1rem !important;
       flex-grow: 1;
+      height: 100%;
     }
 
     .p-tabview-nav-container {

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx

@@ -3,13 +3,10 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import {
-  InterfaceStoredSettingsProps,
-  useMapRootState,
-  InterfaceStoredSettings,
-} from '@/hooks/Mapper/mapRootProvider';
+import { InterfaceStoredSettingsProps, useMapRootState, InterfaceStoredSettings } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { Dropdown } from 'primereact/dropdown';
+import { WidgetsSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx';
 
 export enum UserSettingsRemoteProps {
   link_signature_on_splash = 'link_signature_on_splash',
@@ -115,7 +112,7 @@ const UI_CHECKBOXES_PROPS: SettingsListItem[] = [
 ];
 
 const THEME_OPTIONS = [
-  { label: 'Default', value: 'neon' },
+  { label: 'Default', value: 'default' },
   { label: 'Pathfinder', value: 'pathfinder' },
 ];
 
@@ -140,7 +137,6 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
     };
   }, [userRemoteSettings, interfaceSettings]);
 
-
   const handleShow = async () => {
     const { user_settings } = await outCommand({
       type: OutCommand.getUserSettings,
@@ -182,7 +178,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
           key={item.prop}
           label={item.label}
           checked={!!currentValue}
-          setChecked={(checked) => handleSettingChange(item.prop, checked)}
+          setChecked={checked => handleSettingChange(item.prop, checked)}
         />
       );
     }
@@ -195,7 +191,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
             className="text-sm"
             value={currentValue}
             options={item.options}
-            onChange={(e) => handleSettingChange(item.prop, e.value)}
+            onChange={e => handleSettingChange(item.prop, e.value)}
             placeholder="Select a theme"
           />
         </div>
@@ -225,21 +221,13 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-2">
           <div className={styles.verticalTabsContainer}>
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={(e) => setActiveIndex(e.index)}
-              className={styles.verticalTabView}
-            >
+            <TabView activeIndex={activeIndex} onTabChange={e => setActiveIndex(e.index)}>
               <TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {renderSettingsList(COMMON_CHECKBOXES_PROPS)}
-                </div>
+                <div className="w-full h-full flex flex-col gap-1">{renderSettingsList(COMMON_CHECKBOXES_PROPS)}</div>
               </TabPanel>
 
               <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}
-                </div>
+                <div className="w-full h-full flex flex-col gap-1">{renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}</div>
               </TabPanel>
 
               <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
@@ -254,6 +242,10 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
                 {renderSettingsList(UI_CHECKBOXES_PROPS)}
               </TabPanel>
 
+              <TabPanel header="Widgets" className="h-full" headerClassName={styles.verticalTabHeader}>
+                <WidgetsSettings />
+              </TabPanel>
+
               <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
                 {renderSettingItem(THEME_SETTING)}
               </TabPanel>

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx

@@ -0,0 +1,37 @@
+import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
+import { WIDGETS_CHECKBOXES_PROPS, WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback } from 'react';
+
+import { Button } from 'primereact/button';
+
+export interface WidgetsSettingsProps {}
+
+// eslint-disable-next-line no-empty-pattern
+export const WidgetsSettings = ({}: WidgetsSettingsProps) => {
+  const { windowsSettings, toggleWidgetVisibility, resetWidgets } = useMapRootState();
+
+  const handleWidgetSettingsChange = useCallback(
+    (widget: WidgetsIds) => toggleWidgetVisibility(widget),
+    [toggleWidgetVisibility],
+  );
+
+  return (
+    <div className="flex flex-col h-full gap-2">
+      <div>
+        {WIDGETS_CHECKBOXES_PROPS.map(widget => (
+          <PrettySwitchbox
+            key={widget.id}
+            label={widget.label}
+            checked={windowsSettings.visible.some(x => x === widget.id)}
+            setChecked={() => handleWidgetSettingsChange(widget.id)}
+          />
+        ))}
+      </div>
+      <div className="grid grid-cols-[1fr_auto]">
+        <div />
+        <Button className="py-[4px]" onClick={resetWidgets} outlined size="small" label="Reset Widgets"></Button>
+      </div>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx

@@ -14,9 +14,10 @@ import classes from './MapWrapper.module.scss';
 import { Connections } from '@/hooks/Mapper/components/mapRootContent/components/Connections';
 import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
 import { getSystemById } from '@/hooks/Mapper/helpers';
+import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { Node, XYPosition } from 'reactflow';
 
-import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { useCommandsSystems } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { emitMapEvent, useMapEventListener } from '@/hooks/Mapper/events';
 
 import { STORED_INTERFACE_DEFAULT_VALUES } from '@/hooks/Mapper/mapRootProvider/MapRootProvider';
@@ -32,7 +33,7 @@ export const MapWrapper = () => {
   const {
     update,
     outCommand,
-    data: { selectedConnections, selectedSystems, hubs, systems },
+    data: { selectedConnections, selectedSystems, hubs, systems, connections, linkSignatureToSystem },
     interfaceSettings: {
       isShowMenu,
       isShowMinimap = STORED_INTERFACE_DEFAULT_VALUES.isShowMinimap,
@@ -46,25 +47,19 @@ export const MapWrapper = () => {
   const { deleteSystems } = useDeleteSystems();
   const { mapRef, runCommand } = useCommonMapEventProcessor();
 
+  const { updateLinkSignatureToSystem } = useCommandsSystems();
   const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, outCommand });
   const { handleSystemMultipleContext, ...systemMultipleCtxProps } = useContextMenuSystemMultipleHandlers();
 
   const [openSettings, setOpenSettings] = useState<string | null>(null);
-  const [openLinkSignatures, setOpenLinkSignatures] = useState<any | null>(null);
   const [openCustomLabel, setOpenCustomLabel] = useState<string | null>(null);
   const [openAddSystem, setOpenAddSystem] = useState<XYPosition | null>(null);
   const [selectedConnection, setSelectedConnection] = useState<SolarSystemConnection | null>(null);
 
-  const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems });
-  ref.current = { selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems };
+  const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, connections, deleteSystems });
+  ref.current = { selectedConnections, selectedSystems, systemContextProps, systems, connections, deleteSystems };
 
   useMapEventListener(event => {
-    switch (event.name) {
-      case Commands.linkSignatureToSystem:
-        setOpenLinkSignatures(event.data);
-        return true;
-    }
-
     runCommand(event);
   });
 
@@ -93,9 +88,6 @@ export const MapWrapper = () => {
         case OutCommand.openSettings:
           setOpenSettings(event.data.system_id);
           break;
-        case OutCommand.linkSignatureToSystem:
-          setOpenLinkSignatures(event.data);
-          break;
         default:
           return outCommand(event);
       }
@@ -133,6 +125,11 @@ export const MapWrapper = () => {
     setOpenAddSystem(coordinates);
   }, []);
 
+  const canRemoveConnection = useCallback((connectionId: string) => {
+    const { connections } = ref.current;
+    return !connections.some(x => x.id === connectionId);
+  }, []);
+
   const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
     async item => {
       if (ref.current.systems.some(x => x.system_static_info.solar_system_id === item.value)) {
@@ -169,6 +166,7 @@ export const MapWrapper = () => {
         isSoftBackground={isSoftBackground}
         theme={theme}
         onAddSystem={onAddSystem}
+        canRemoveConnection={canRemoveConnection}
       />
 
       {openSettings != null && (
@@ -179,8 +177,8 @@ export const MapWrapper = () => {
         <SystemCustomLabelDialog systemId={openCustomLabel} visible setVisible={() => setOpenCustomLabel(null)} />
       )}
 
-      {openLinkSignatures != null && (
-        <SystemLinkSignatureDialog data={openLinkSignatures} setVisible={() => setOpenLinkSignatures(null)} />
+      {linkSignatureToSystem != null && (
+        <SystemLinkSignatureDialog data={linkSignatureToSystem} setVisible={() => updateLinkSignatureToSystem(null)} />
       )}
 
       <AddSystemDialog

assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.module.scss

@@ -0,0 +1,137 @@
+.windowContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.window {
+  position: absolute;
+  //background: #fff;
+  //border: 1px solid #000;
+  //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  user-select: none;
+
+  pointer-events: initial;
+}
+
+.resizeHandle {
+  position: absolute;
+  //background: rgba(0, 0, 0, 0.2);
+  width: 15px;
+  height: 15px;
+}
+
+.topRight,
+.bottomLeft {
+  cursor: nesw-resize;
+}
+
+.topLeft,
+.bottomRight {
+  cursor: nwse-resize;
+}
+
+.topLeft {
+  top: -7.5px;
+  left: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 7.5px;
+    left: 7.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-left: 1px solid var(--window-corner);
+    border-top: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.topRight {
+  top: -7.5px;
+  right: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 7.5px;
+    right: -2.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-right: 1px solid var(--window-corner);
+    border-top: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.bottomLeft {
+  bottom: -7.5px;
+  left: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 2.5px;
+    left: 7.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-left: 1px solid var(--window-corner);
+    border-bottom: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.bottomRight {
+  bottom: -7.5px;
+  right: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 2.5px;
+    right: -2.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-right: 1px solid var(--window-corner);
+    border-bottom: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.top {
+  top: -5px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+}
+
+.bottom {
+  bottom: -5px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+}
+
+.left {
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  width: 10px;
+  cursor: ew-resize;
+}
+
+.right {
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  width: 10px;
+  cursor: ew-resize;
+}

assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx

@@ -0,0 +1,419 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import styles from './WindowManager.module.scss';
+import debounce from 'lodash.debounce';
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+
+const MIN_WINDOW_SIZE = 100;
+const SNAP_THRESHOLD = 10;
+export const SNAP_GAP = 10;
+
+export enum ActionType {
+  Drag = 'drag',
+  Resize = 'resize',
+}
+
+export const DefaultWindowState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+function getWindowsBySides(windows: WindowProps[], containerWidth: number, containerHeight: number) {
+  const centerX = containerWidth / 2;
+  const centerY = containerHeight / 2;
+
+  const top = windows.filter(window => window.position.y + window.size.height / 2 < centerY);
+  const bottom = windows.filter(window => window.position.y + window.size.height / 2 >= centerY);
+  const left = windows.filter(window => window.position.x + window.size.width / 2 < centerX);
+  const right = windows.filter(window => window.position.x + window.size.width / 2 >= centerX);
+
+  return { top, bottom, left, right };
+}
+
+export type WindowWrapperProps = {
+  onDrag: (e: React.MouseEvent, windowId: string | number) => void;
+  onResize: (e: React.MouseEvent, windowId: string | number, resizeDirection: string) => void;
+} & WindowProps;
+
+export const WindowWrapper = ({ onResize, onDrag, ...window }: WindowWrapperProps) => {
+  const handleMouseDownRoot = (e: React.MouseEvent) => {
+    onDrag(e, window.id);
+  };
+
+  const { handleResizeTL, handleResizeTR, handleResizeBL, handleResizeBR } = useMemo(() => {
+    const handleResizeTL = (e: React.MouseEvent) => onResize(e, window.id, 'top left');
+    const handleResizeTR = (e: React.MouseEvent) => onResize(e, window.id, 'top right');
+    const handleResizeBL = (e: React.MouseEvent) => onResize(e, window.id, 'bottom left');
+    const handleResizeBR = (e: React.MouseEvent) => onResize(e, window.id, 'bottom right');
+
+    return {
+      handleResizeTL,
+      handleResizeTR,
+      handleResizeBL,
+      handleResizeBR,
+    };
+  }, [window]);
+
+  return (
+    <div
+      key={window.id}
+      className={`drag-handle ${styles.window}`}
+      style={{
+        width: window.size.width,
+        height: window.size.height,
+        top: window.position.y,
+        left: window.position.x,
+        zIndex: window.zIndex,
+      }}
+      onMouseDown={handleMouseDownRoot}
+    >
+      {window.content(window)}
+      <div className={styles.resizeHandle + ' ' + styles.topLeft} onMouseDown={handleResizeTL} />
+      <div className={styles.resizeHandle + ' ' + styles.topRight} onMouseDown={handleResizeTR} />
+      <div className={styles.resizeHandle + ' ' + styles.bottomLeft} onMouseDown={handleResizeBL} />
+      <div className={styles.resizeHandle + ' ' + styles.bottomRight} onMouseDown={handleResizeBR} />
+    </div>
+  );
+};
+
+type WindowManagerProps = {
+  windows: WindowProps[];
+  dragSelector?: string;
+  onChange?(windows: WindowProps[]): void;
+};
+
+export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWindows, dragSelector, onChange }) => {
+  const [windows, setWindows] = useState(
+    initialWindows.map((window, index) => ({
+      ...window,
+      zIndex: index + 1,
+    })),
+  );
+
+  useEffect(() => {
+    setWindows(initialWindows.slice(0));
+  }, [initialWindows]);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const activeWindowIdRef = useRef<string | number | null>(null);
+  const actionTypeRef = useRef<ActionType | null>(null);
+  const resizeDirectionRef = useRef<string | null>(null);
+  const startMousePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const startWindowStateRef = useRef<{ x: number; y: number; width: number; height: number }>(DefaultWindowState);
+
+  const ref = useRef({ windows, onChange });
+  ref.current = { windows, onChange };
+
+  const refPrevSize = useRef({ w: 0, h: 0 });
+
+  const onDebouncedChange = useMemo(() => {
+    return debounce(() => {
+      ref.current.onChange?.(ref.current.windows);
+    }, 20);
+  }, []);
+
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    windowId: string | number,
+    actionType: ActionType,
+    resizeDirection?: string,
+  ) => {
+    if (dragSelector && actionType === ActionType.Drag && !(e.target as HTMLElement).closest(dragSelector)) {
+      return;
+    }
+
+    e.stopPropagation();
+    activeWindowIdRef.current = windowId;
+    actionTypeRef.current = actionType;
+    resizeDirectionRef.current = resizeDirection || null;
+    startMousePositionRef.current = { x: e.clientX, y: e.clientY };
+    const targetWindow = windows.find(win => win.id === windowId);
+    if (targetWindow) {
+      startWindowStateRef.current = {
+        x: targetWindow.position.x,
+        y: targetWindow.position.y,
+        width: targetWindow.size.width,
+        height: targetWindow.size.height,
+      };
+    }
+
+    // Bring window to front by updating zIndex
+    setWindows(prevWindows => {
+      const maxZIndex = Math.max(...prevWindows.map(w => w.zIndex));
+      return prevWindows.map(window => (window.id === windowId ? { ...window, zIndex: maxZIndex + 1 } : window));
+    });
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (activeWindowIdRef.current !== null && actionTypeRef.current) {
+      const deltaX = e.clientX - startMousePositionRef.current.x;
+      const deltaY = e.clientY - startMousePositionRef.current.y;
+      const container = containerRef.current;
+
+      setWindows(prevWindows =>
+        prevWindows.map(window => {
+          if (window.id === activeWindowIdRef.current) {
+            let newX = startWindowStateRef.current.x;
+            let newY = startWindowStateRef.current.y;
+            let newWidth = startWindowStateRef.current.width;
+            let newHeight = startWindowStateRef.current.height;
+
+            if (actionTypeRef.current === ActionType.Drag) {
+              newX += deltaX;
+              newY += deltaY;
+
+              // Ensure the window stays within the container boundaries
+              if (container) {
+                newX = Math.max(SNAP_GAP, Math.min(container.clientWidth - window.size.width - SNAP_GAP, newX));
+                newY = Math.max(SNAP_GAP, Math.min(container.clientHeight - window.size.height - SNAP_GAP, newY));
+              }
+
+              // Snap to other windows with or without gap
+              prevWindows.forEach(otherWindow => {
+                if (otherWindow.id === window.id) {
+                  return;
+                }
+
+                // Snap vertically (top and bottom)
+                if (Math.abs(newY - otherWindow.position.y) < SNAP_THRESHOLD) {
+                  newY = otherWindow.position.y; // Align top without gap
+                } else if (Math.abs(newY + window.size.height - otherWindow.position.y) < SNAP_THRESHOLD) {
+                  newY = otherWindow.position.y - window.size.height - SNAP_GAP; // Bottom aligns to top
+                } else if (Math.abs(newY - (otherWindow.position.y + otherWindow.size.height)) < SNAP_THRESHOLD) {
+                  newY = otherWindow.position.y + otherWindow.size.height + SNAP_GAP; // Align bottom without gap
+                } else if (
+                  Math.abs(newY + window.size.height - (otherWindow.position.y + otherWindow.size.height)) <
+                  SNAP_THRESHOLD
+                ) {
+                  newY = otherWindow.position.y + otherWindow.size.height - window.size.height; // Bottom aligns bottom
+                }
+
+                // Snap horizontally (left and right)
+                if (Math.abs(newX - otherWindow.position.x) < SNAP_THRESHOLD) {
+                  newX = otherWindow.position.x; // Align left without gap
+                } else if (Math.abs(newX + window.size.width - otherWindow.position.x) < SNAP_THRESHOLD) {
+                  newX = otherWindow.position.x - window.size.width - SNAP_GAP; // Right aligns to left
+                } else if (Math.abs(newX - (otherWindow.position.x + otherWindow.size.width)) < SNAP_THRESHOLD) {
+                  newX = otherWindow.position.x + otherWindow.size.width + SNAP_GAP; // Align right without gap
+                } else if (
+                  Math.abs(newX + window.size.width - (otherWindow.position.x + otherWindow.size.width)) <
+                  SNAP_THRESHOLD
+                ) {
+                  newX = otherWindow.position.x + otherWindow.size.width - window.size.width; // Right aligns right
+                }
+              });
+            }
+
+            if (actionTypeRef.current === ActionType.Resize && resizeDirectionRef.current) {
+              if (resizeDirectionRef.current.includes('right')) {
+                newWidth = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.width + deltaX);
+
+                // Снап для правой границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Правая граница текущего окна к левой границе другого окна
+                    const snapRightToLeft =
+                      otherWindow.position.x - (startWindowStateRef.current.x + newWidth) - SNAP_THRESHOLD;
+                    if (Math.abs(snapRightToLeft) < SNAP_THRESHOLD) {
+                      newWidth = otherWindow.position.x - startWindowStateRef.current.x - SNAP_THRESHOLD;
+                    }
+
+                    // Правая граница текущего окна к правой границе другого окна
+                    const snapRightToRight =
+                      otherWindow.position.x + otherWindow.size.width - (startWindowStateRef.current.x + newWidth);
+                    if (Math.abs(snapRightToRight) < SNAP_THRESHOLD) {
+                      newWidth = otherWindow.position.x + otherWindow.size.width - startWindowStateRef.current.x;
+                    }
+                  }
+                });
+              }
+
+              if (resizeDirectionRef.current.includes('left')) {
+                newWidth = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.width - deltaX);
+                newX = startWindowStateRef.current.x + (startWindowStateRef.current.width - newWidth);
+
+                // Снап для левой границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Левая граница текущего окна к правой границе другого окна
+                    const snapLeftToRight = newX - (otherWindow.position.x + otherWindow.size.width + SNAP_THRESHOLD);
+                    if (Math.abs(snapLeftToRight) < SNAP_THRESHOLD) {
+                      newX = otherWindow.position.x + otherWindow.size.width + SNAP_THRESHOLD;
+                      newWidth = startWindowStateRef.current.width + startWindowStateRef.current.x - newX;
+                    }
+
+                    // Левая граница текущего окна к левой границе другого окна
+                    const snapLeftToLeft = newX - otherWindow.position.x;
+                    if (Math.abs(snapLeftToLeft) < SNAP_THRESHOLD) {
+                      newX = otherWindow.position.x;
+                      newWidth = startWindowStateRef.current.width + startWindowStateRef.current.x - newX;
+                    }
+                  }
+                });
+              }
+
+              if (resizeDirectionRef.current.includes('bottom')) {
+                newHeight = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.height + deltaY);
+
+                // Снап для нижней границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Нижняя граница текущего окна к верхней границе другого окна
+                    const snapBottomToTop =
+                      otherWindow.position.y - (startWindowStateRef.current.y + newHeight) - SNAP_THRESHOLD;
+                    if (Math.abs(snapBottomToTop) < SNAP_THRESHOLD) {
+                      newHeight = otherWindow.position.y - startWindowStateRef.current.y - SNAP_THRESHOLD;
+                    }
+
+                    // Нижняя граница текущего окна к нижней границе другого окна
+                    const snapBottomToBottom =
+                      otherWindow.position.y + otherWindow.size.height - (startWindowStateRef.current.y + newHeight);
+                    if (Math.abs(snapBottomToBottom) < SNAP_THRESHOLD) {
+                      newHeight = otherWindow.position.y + otherWindow.size.height - startWindowStateRef.current.y;
+                    }
+                  }
+                });
+              }
+
+              if (resizeDirectionRef.current.includes('top')) {
+                newHeight = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.height - deltaY);
+                newY = startWindowStateRef.current.y + (startWindowStateRef.current.height - newHeight);
+
+                // Снап для верхней границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Верхняя граница текущего окна к нижней границе другого окна
+                    const snapTopToBottom = newY - (otherWindow.position.y + otherWindow.size.height + SNAP_THRESHOLD);
+                    if (Math.abs(snapTopToBottom) < SNAP_THRESHOLD) {
+                      newY = otherWindow.position.y + otherWindow.size.height + SNAP_THRESHOLD;
+                      newHeight = startWindowStateRef.current.height + startWindowStateRef.current.y - newY;
+                    }
+
+                    // Верхняя граница текущего окна к верхней границе другого окна
+                    const snapTopToTop = newY - otherWindow.position.y;
+                    if (Math.abs(snapTopToTop) < SNAP_THRESHOLD) {
+                      newY = otherWindow.position.y;
+                      newHeight = startWindowStateRef.current.height + startWindowStateRef.current.y - newY;
+                    }
+                  }
+                });
+              }
+
+              // Ensure the window stays within the container boundaries
+              if (container) {
+                newX = Math.max(0 + SNAP_GAP, Math.min(container.clientWidth - newWidth - SNAP_GAP, newX));
+                newY = Math.max(0 + SNAP_GAP, Math.min(container.clientHeight - newHeight - SNAP_GAP, newY));
+              }
+            }
+
+            return {
+              ...window,
+              position: { x: newX, y: newY },
+              size: { width: newWidth, height: newHeight },
+            };
+          }
+          return window;
+        }),
+      );
+
+      onDebouncedChange();
+    }
+  };
+
+  const handleMouseUp = useCallback(() => {
+    activeWindowIdRef.current = null;
+    actionTypeRef.current = null;
+    resizeDirectionRef.current = null;
+
+    onDebouncedChange();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }, []);
+
+  // Handle resize of the container and reposition windows
+  useEffect(() => {
+    if (containerRef.current) {
+      refPrevSize.current = { w: containerRef.current.clientWidth, h: containerRef.current.clientHeight };
+    }
+
+    const handleResize = () => {
+      const container = containerRef.current;
+      const { windows } = ref.current;
+      if (!container) {
+        return;
+      }
+
+      const deltaX = container.clientWidth - refPrevSize.current.w;
+      const deltaY = container.clientHeight - refPrevSize.current.h;
+
+      const { bottom, right } = getWindowsBySides(windows, refPrevSize.current.w, refPrevSize.current.h);
+
+      setWindows(w => {
+        return w.map(x => {
+          let next = { ...x };
+
+          if (right.some(r => r.id === x.id)) {
+            next = {
+              ...next,
+              position: {
+                ...next.position,
+                x: next.position.x + deltaX,
+              },
+            };
+          }
+
+          if (bottom.some(r => r.id === x.id)) {
+            next = {
+              ...next,
+              position: {
+                ...next.position,
+                y: next.position.y + deltaY,
+              },
+            };
+          }
+
+          if (next.position.x + next.size.width > container.clientWidth - SNAP_GAP) {
+            next.position.x = container.clientWidth - next.size.width - SNAP_GAP;
+          }
+
+          if (next.position.y + next.size.height > container.clientHeight - SNAP_GAP) {
+            next.position.y = container.clientHeight - next.size.height - SNAP_GAP;
+          }
+
+          return next;
+        });
+      });
+
+      onDebouncedChange();
+
+      refPrevSize.current = { w: container.clientWidth, h: container.clientHeight };
+    };
+
+    const tid = setTimeout(handleResize, 10);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      clearTimeout(tid);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const handleDrag = (e: React.MouseEvent, windowId: string | number) => {
+    handleMouseDown(e, windowId, ActionType.Drag);
+  };
+
+  const handleResize = (e: React.MouseEvent, windowId: string | number, resizeDirection: string) => {
+    handleMouseDown(e, windowId, ActionType.Resize, resizeDirection);
+  };
+
+  return (
+    <div ref={containerRef} className={styles.windowContainer}>
+      {windows.map(window => (
+        <WindowWrapper key={window.id} onDrag={handleDrag} onResize={handleResize} {...window} />
+      ))}
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/ui-kit/WindowManager/index.ts

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

assets/js/hooks/Mapper/components/ui-kit/WindowManager/types.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export type WindowProps = {
+  id: string | number;
+  content: (w: WindowProps) => React.ReactNode;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  zIndex: number;
+  visible?: boolean;
+};

assets/js/hooks/Mapper/components/ui-kit/WindowManager/utils.ts

@@ -0,0 +1,13 @@
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx';
+
+export function getWindowsBySides(windows: WindowProps[], containerWidth: number, containerHeight: number) {
+  const centerX = containerWidth / 2;
+  const centerY = containerHeight / 2;
+
+  const top = windows.filter(window => window.position.y + window.size.height / 2 < centerY);
+  const bottom = windows.filter(window => window.position.y + window.size.height / 2 >= centerY);
+  const left = windows.filter(window => window.position.x + window.size.width / 2 < centerX);
+  const right = windows.filter(window => window.position.x + window.size.width / 2 >= centerX);
+
+  return { top, bottom, left, right };
+}

assets/js/hooks/Mapper/constants.ts

@@ -1,6 +1,7 @@
 export enum SESSION_KEY {
   viewPort = 'viewPort',
   windows = 'windows',
+  windowsVisible = 'windowsVisible',
   routes = 'routes',
 }
 

assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx

@@ -1,13 +1,21 @@
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
-import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext } from 'react';
+import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext, useEffect } from 'react';
 import { MapUnionTypes, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
 import { useMapRootHandlers } from '@/hooks/Mapper/mapRootProvider/hooks';
 import { WithChildren } from '@/hooks/Mapper/types/common.ts';
 import useLocalStorageState from 'use-local-storage-state';
+import {
+  ToggleWidgetVisibility,
+  UpdateWidgetSettingsFunc,
+  useStoreWidgets,
+  WindowStoreInfo,
+} from '@/hooks/Mapper/mapRootProvider/hooks/useStoreWidgets.ts';
+import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
 
 export type MapRootData = MapUnionTypes & {
   selectedSystems: string[];
   selectedConnections: Pick<SolarSystemConnection, 'source' | 'target'>[];
+  linkSignatureToSystem: CommandLinkSignatureToSystem | null;
 };
 
 const INITIAL_DATA: MapRootData = {
@@ -18,6 +26,7 @@ const INITIAL_DATA: MapRootData = {
   userCharacters: [],
   presentCharacters: [],
   systems: [],
+  systemSignatures: {},
   hubs: [],
   routes: undefined,
   kills: [],
@@ -27,6 +36,7 @@ const INITIAL_DATA: MapRootData = {
   selectedConnections: [],
   userPermissions: {},
   options: {},
+  linkSignatureToSystem: null,
 };
 
 export enum InterfaceStoredSettingsProps {
@@ -59,8 +69,8 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowUnsplashedSignatures: false,
   isShowBackgroundPattern: true,
   isSoftBackground: false,
-  theme: 'neon',
-}
+  theme: 'default',
+};
 
 export interface MapRootContextProps {
   update: ContextStoreDataUpdate<MapRootData>;
@@ -68,6 +78,10 @@ export interface MapRootContextProps {
   outCommand: OutCommandHandler;
   interfaceSettings: InterfaceStoredSettings;
   setInterfaceSettings: Dispatch<SetStateAction<InterfaceStoredSettings>>;
+  windowsSettings: WindowStoreInfo;
+  toggleWidgetVisibility: ToggleWidgetVisibility;
+  updateWidgetSettings: UpdateWidgetSettingsFunc;
+  resetWidgets: () => void;
 }
 
 const MapRootContext = createContext<MapRootContextProps>({
@@ -101,6 +115,25 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide
       defaultValue: STORED_INTERFACE_DEFAULT_VALUES,
     },
   );
+  const { windowsSettings, toggleWidgetVisibility, updateWidgetSettings, resetWidgets } = useStoreWidgets();
+
+  useEffect(() => {
+    let foundNew = false;
+    const newVals = Object.keys(STORED_INTERFACE_DEFAULT_VALUES).reduce((acc, x) => {
+      if (Object.keys(acc).includes(x)) {
+        return acc;
+      }
+
+      foundNew = true;
+
+      // @ts-ignore
+      return { ...acc, [x]: STORED_INTERFACE_DEFAULT_VALUES[x] };
+    }, interfaceSettings);
+
+    if (foundNew) {
+      setInterfaceSettings(newVals);
+    }
+  }, []);
 
   return (
     <MapRootContext.Provider
@@ -110,6 +143,10 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide
         outCommand: outCommand,
         setInterfaceSettings,
         interfaceSettings,
+        windowsSettings,
+        updateWidgetSettings,
+        toggleWidgetVisibility,
+        resetWidgets,
       }}
     >
       <MapRootHandlers ref={fwdRef}>{children}</MapRootHandlers>

assets/js/hooks/Mapper/mapRootProvider/hooks/api/useCommandsSystems.ts

@@ -1,6 +1,11 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef } from 'react';
-import { CommandAddSystems, CommandRemoveSystems, CommandUpdateSystems } from '@/hooks/Mapper/types';
+import {
+  CommandAddSystems,
+  CommandRemoveSystems,
+  CommandUpdateSystems,
+  CommandLinkSignatureToSystem,
+} from '@/hooks/Mapper/types';
 import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { emitMapEvent } from '@/hooks/Mapper/events';
@@ -8,14 +13,14 @@ import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 export const useCommandsSystems = () => {
   const {
     update,
-    data: { systems },
+    data: { systems, systemSignatures },
     outCommand,
   } = useMapRootState();
 
   const { addSystemStatic } = useLoadSystemStatic({ systems: [] });
 
-  const ref = useRef({ systems, update, addSystemStatic });
-  ref.current = { systems, update, addSystemStatic };
+  const ref = useRef({ systems, systemSignatures, update, addSystemStatic });
+  ref.current = { systems, systemSignatures, update, addSystemStatic };
 
   const addSystems = useCallback((systemsToAdd: CommandAddSystems) => {
     const { update, addSystemStatic, systems } = ref.current;
@@ -57,31 +62,27 @@ export const useCommandsSystems = () => {
     });
 
     update({ systems: out }, true);
+
+    emitMapEvent({ name: Commands.updateSystems, data: out });
   }, []);
 
   const updateSystemSignatures = useCallback(
     async (systemId: string) => {
-      const { update, systems } = ref.current;
-
+      const { update, systemSignatures } = ref.current;
       const { signatures } = await outCommand({
         type: OutCommand.getSignatures,
         data: { system_id: `${systemId}` },
       });
-
-      const out = systems.map(current => {
-        if (current.id === `${systemId}`) {
-          return { ...current, system_signatures: signatures };
-        }
-
-        return current;
-      });
-
-      update({ systems: out }, true);
-
-      emitMapEvent({ name: Commands.updateSystems, data: out });
+      const out = { ...systemSignatures, [`${systemId}`]: signatures };
+      update({ systemSignatures: out }, true);
     },
     [outCommand],
   );
 
-  return { addSystems, removeSystems, updateSystems, updateSystemSignatures };
+  const updateLinkSignatureToSystem = useCallback(async (command: CommandLinkSignatureToSystem) => {
+    const { update } = ref.current;
+    update({ linkSignatureToSystem: command }, true);
+  }, []);
+
+  return { addSystems, removeSystems, updateSystems, updateSystemSignatures, updateLinkSignatureToSystem };
 };

assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts

@@ -32,7 +32,8 @@ import { emitMapEvent } from '@/hooks/Mapper/events';
 
 export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
   const mapInit = useMapInit();
-  const { addSystems, removeSystems, updateSystems, updateSystemSignatures } = useCommandsSystems();
+  const { addSystems, removeSystems, updateSystems, updateSystemSignatures, updateLinkSignatureToSystem } =
+    useCommandsSystems();
   const { addConnections, removeConnections, updateConnection } = useCommandsConnections();
   const { charactersUpdated, characterAdded, characterRemoved, characterUpdated, presentCharacters } =
     useCommandsCharacters();
@@ -93,7 +94,9 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
               break;
 
             case Commands.linkSignatureToSystem: // USED
-              // do nothing here
+              setTimeout(() => {
+                updateLinkSignatureToSystem(data as CommandLinkSignatureToSystem);
+              }, 200);
               break;
 
             case Commands.centerSystem: // USED

assets/js/hooks/Mapper/mapRootProvider/hooks/useStoreWidgets.ts

@@ -0,0 +1,118 @@
+import useLocalStorageState from 'use-local-storage-state';
+import {
+  CURRENT_WINDOWS_VERSION,
+  DEFAULT_WIDGETS,
+  STORED_VISIBLE_WIDGETS_DEFAULT,
+  WidgetsIds,
+  WINDOWS_LOCAL_STORE_KEY,
+} from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import { useCallback, useEffect, useRef } from 'react';
+import { SNAP_GAP } from '@/hooks/Mapper/components/ui-kit/WindowManager';
+
+export type StoredWindowProps = Omit<WindowProps, 'content'>;
+export type WindowStoreInfo = {
+  version: number;
+  windows: StoredWindowProps[];
+  visible: WidgetsIds[];
+};
+export type UpdateWidgetSettingsFunc = (widgets: WindowProps[]) => void;
+export type ToggleWidgetVisibility = (widgetId: WidgetsIds) => void;
+
+export const getDefaultWidgetProps = () => ({
+  version: CURRENT_WINDOWS_VERSION,
+  visible: STORED_VISIBLE_WIDGETS_DEFAULT,
+  windows: DEFAULT_WIDGETS,
+});
+
+export const useStoreWidgets = () => {
+  const [windowsSettings, setWindowsSettings] = useLocalStorageState<WindowStoreInfo>(WINDOWS_LOCAL_STORE_KEY, {
+    defaultValue: getDefaultWidgetProps(),
+  });
+
+  const ref = useRef({ windowsSettings, setWindowsSettings });
+  ref.current = { windowsSettings, setWindowsSettings };
+
+  const updateWidgetSettings: UpdateWidgetSettingsFunc = useCallback(newWindows => {
+    const { setWindowsSettings } = ref.current;
+
+    setWindowsSettings(({ version, visible /*, windows*/ }: WindowStoreInfo) => {
+      return {
+        version,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        windows: DEFAULT_WIDGETS.map(({ content, ...x }) => {
+          const windowProp = newWindows.find(j => j.id === x.id);
+          if (windowProp) {
+            return windowProp;
+          }
+
+          return x;
+        }),
+        visible,
+      };
+    });
+  }, []);
+
+  const toggleWidgetVisibility: ToggleWidgetVisibility = useCallback(widgetId => {
+    const { setWindowsSettings } = ref.current;
+
+    setWindowsSettings(({ visible, windows, ...x }) => {
+      const isCheckedPrev = visible.includes(widgetId);
+      if (!isCheckedPrev) {
+        const maxZIndex = Math.max(...windows.map(w => w.zIndex));
+        return {
+          ...x,
+          windows: windows.map(wnd => {
+            if (wnd.id === widgetId) {
+              return { ...wnd, position: { x: SNAP_GAP, y: SNAP_GAP }, zIndex: maxZIndex + 1 };
+            }
+
+            return wnd;
+          }),
+          visible: [...visible, widgetId],
+        };
+      }
+
+      return {
+        ...x,
+        windows,
+        visible: visible.filter(x => x !== widgetId),
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    const { setWindowsSettings } = ref.current;
+
+    const raw = localStorage.getItem(WINDOWS_LOCAL_STORE_KEY);
+    if (!raw) {
+      console.warn('No windows found in local storage!!');
+
+      setWindowsSettings(getDefaultWidgetProps());
+      return;
+    }
+
+    const { version, windows, visible } = JSON.parse(raw) as WindowStoreInfo;
+    if (!version || CURRENT_WINDOWS_VERSION > version) {
+      setWindowsSettings(getDefaultWidgetProps());
+    }
+
+    // eslint-disable-next-line no-debugger
+    const out = windows.filter(x => DEFAULT_WIDGETS.find(def => def.id === x.id));
+
+    setWindowsSettings({
+      version: CURRENT_WINDOWS_VERSION,
+      windows: out as WindowProps[],
+      visible,
+    });
+  }, []);
+
+  const resetWidgets = useCallback(() => ref.current.setWindowsSettings(getDefaultWidgetProps()), []);
+
+  return {
+    windowsSettings,
+    updateWidgetSettings,
+    toggleWidgetVisibility,
+    resetWidgets,
+  };
+};

assets/js/hooks/Mapper/types/mapHandlers.ts

@@ -118,6 +118,7 @@ export enum OutCommand {
   deleteHub = 'delete_hub',
   getRoutes = 'get_routes',
   getCharacterJumps = 'get_character_jumps',
+  getStructures = 'get_structures',
   getSignatures = 'get_signatures',
   getSystemStaticInfos = 'get_system_static_infos',
   getConnectionInfo = 'get_connection_info',
@@ -127,6 +128,7 @@ export enum OutCommand {
   updateConnectionShipSizeType = 'update_connection_ship_size_type',
   updateConnectionLocked = 'update_connection_locked',
   updateConnectionCustomInfo = 'update_connection_custom_info',
+  updateStructures = 'update_structures',
   updateSignatures = 'update_signatures',
   updateSystemName = 'update_system_name',
   updateSystemTemporaryName = 'update_system_temporary_name',
@@ -147,6 +149,8 @@ export enum OutCommand {
   openUserSettings = 'open_user_settings',
   getPassages = 'get_passages',
   linkSignatureToSystem = 'link_signature_to_system',
+  getCorporationNames = 'get_corporation_names',
+  getCorporationTicker = 'get_corporation_ticker',
 
   // Only UI commands
   openSettings = 'open_settings',

assets/js/hooks/Mapper/types/mapUnionTypes.ts

@@ -5,6 +5,7 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types/system.ts';
 import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
 import { SolarSystemConnection } from '@/hooks/Mapper/types/connection.ts';
 import { UserPermissions } from '@/hooks/Mapper/types';
+import { SystemSignature } from '@/hooks/Mapper/types/signatures';
 
 export type MapUnionTypes = {
   wormholesData: Record<string, WormholeDataRaw>;
@@ -15,6 +16,7 @@ export type MapUnionTypes = {
   presentCharacters: string[];
   hubs: string[];
   systems: SolarSystemRawType[];
+  systemSignatures: Record<string, SystemSignature[]>;
   routes?: RoutesList;
   kills: Record<number, number>;
   connections: SolarSystemConnection[];

assets/js/hooks/Mapper/types/system.ts

@@ -117,6 +117,7 @@ export type SolarSystemRawType = {
   status: number;
   name: string | null;
   temporary_name: string | null;
+  linked_sig_eve_id: string | null;
 
   system_static_info: SolarSystemStaticInfoRaw;
   system_signatures: SystemSignature[];
@@ -130,4 +131,3 @@ export type SearchSystemItem = {
   system_static_info: SolarSystemStaticInfoRaw;
   value: number;
 };
-

config/runtime.exs

@@ -64,7 +64,31 @@ map_subscription_characters_limit =
 
 map_subscription_hubs_limit =
   config_dir
-  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_HUBS_LIMIT", 100)
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_HUBS_LIMIT", 10)
+
+map_subscription_base_price =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_BASE_PRICE", 100_000_000)
+
+map_subscription_extra_characters_100_price =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_EXTRA_CHARACTERS_100_PRICE", 50_000_000)
+
+map_subscription_extra_hubs_10_price =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_EXTRA_HUBS_10_PRICE", 10_000_000)
+
+map_connection_auto_expire_hours =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_CONNECTION_AUTO_EXPIRE_HOURS", 24)
+
+map_connection_auto_eol_hours =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_CONNECTION_AUTO_EOL_HOURS", 21)
+
+map_connection_eol_expire_timeout_mins =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_CONNECTION_EOL_EXPIRE_TIMEOUT_MINS", 60)
 
 wallet_tracking_enabled =
   config_dir
@@ -90,6 +114,9 @@ config :wanderer_app,
   corp_wallet: System.get_env("WANDERER_CORP_WALLET", ""),
   public_api_disabled: public_api_disabled,
   map_subscriptions_enabled: map_subscriptions_enabled,
+  map_connection_auto_expire_hours: map_connection_auto_expire_hours,
+  map_connection_auto_eol_hours: map_connection_auto_eol_hours,
+  map_connection_eol_expire_timeout_mins: map_connection_eol_expire_timeout_mins,
   wallet_tracking_enabled: wallet_tracking_enabled,
   subscription_settings: %{
     plans: [
@@ -102,16 +129,16 @@ config :wanderer_app,
       },
       %{
         id: "omega",
-        characters_limit: 300,
-        hubs_limit: 20,
-        base_price: 250_000_000,
+        characters_limit: map_subscription_characters_limit * 2,
+        hubs_limit: map_subscription_hubs_limit * 2,
+        base_price: map_subscription_base_price,
         month_3_discount: 0.2,
         month_6_discount: 0.4,
         month_12_discount: 0.5
       }
     ],
-    extra_characters_100: 75_000_000,
-    extra_hubs_10: 25_000_000
+    extra_characters_100: map_subscription_extra_characters_100_price,
+    extra_hubs_10: map_subscription_extra_hubs_10_price
   }
 
 config :ueberauth, Ueberauth,

lib/wanderer_app/api.ex

@@ -16,6 +16,7 @@ defmodule WandererApp.Api do
     resource WandererApp.Api.MapState
     resource WandererApp.Api.MapSystem
     resource WandererApp.Api.MapSystemSignature
+    resource WandererApp.Api.MapSystemStructure
     resource WandererApp.Api.MapCharacterSettings
     resource WandererApp.Api.MapSubscription
     resource WandererApp.Api.MapTransaction