chore: release version v1.37.9

* fix: restore system status colors

.env.example

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

assets/css/app.css

@@ -3,6 +3,8 @@
 @import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
 
+@import '../js/hooks/Mapper/components/map/styles/index.scss';
+
 @layer tailwind-base {
   @tailwind base;
 }

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

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

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

@@ -0,0 +1,173 @@
+// feel free to rename these imports or the file path as you see fit
+import { useMemo } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
+import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+import { MapSolarSystemType } from '../../map.types';
+import {
+  LABELS_INFO,
+  LABELS_ORDER,
+  getActivityType,
+} from '@/hooks/Mapper/components/map/constants.ts';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
+import { OutCommand } from '@/hooks/Mapper/types';
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: 'Caldaria',
+  [Spaces.Matar]: 'Mataria',
+  [Spaces.Amarr]: 'Amarria',
+  [Spaces.Gallente]: 'Gallente',
+};
+
+const sortedLabels = (labels: string[]) => {
+  if (!labels) return [];
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+};
+
+interface UseSolarSystemNodeParams {
+  data: MapSolarSystemType;
+  selected: boolean;
+}
+
+export function useSolarSystemNode({ data, selected }: UseSolarSystemNodeParams) {
+  // 1) Bring in relevant global state
+  const { interfaceSettings } = useMapRootState();
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+  
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+      isThickConnections,
+    },
+    outCommand,
+  } = useMapState();
+
+  // 2) Extract data from the node
+  const {
+    system_class,
+    security,
+    class_title,
+    solar_system_id,
+    statics,
+    effect_name,
+    region_name,
+    region_id,
+    is_shattered,
+    solar_system_name,
+  } = data.system_static_info;
+
+  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};
+  const signatures = data.system_signatures;
+
+  // 3) Compute derived values
+  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 labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
+
+  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 {
+    selected,
+    visible,
+    isWormhole,
+    classTitleColor,
+    killsCount,
+    hasUserCharacters,
+    showHandlers,
+    regionClass,
+    systemName,
+    customName,
+    labelCustom,
+    is_shattered,
+    tag,
+    status,
+    labelsInfo,
+    dbClick,
+    sortedStatics,
+    effect_name,
+    region_name,
+    solar_system_id,
+    locked,
+    hubs,
+    charactersInSystem,
+    unsplashedLeft,
+    unsplashedRight,
+    isThickConnections,
+  };
+}

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

@@ -1,8 +1,11 @@
 .MapRoot {
   width: 100%;
   height: 100%;
-}
 
-.BackgroundAlternateColor {
+  background-color: var(--rf-bg-color, #000000);
 
+  &.BackgroundAlternateColor {
+    background-color: var(--rf-soft-bg-color, #171717);
+    --rf-node-bg-color: var(--rf-node-soft-bg-color, #2b2b2b);
+  }
 }

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

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
@@ -16,8 +16,6 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
-import './styles/neon-theme.scss';
-import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
 import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -25,16 +23,19 @@ import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
-  SolarSystemNode,
+  SolarSystemNodeDefault,
+  SolarSystemNodeTheme,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
+import { wrapNode } from './utils/wrapNode';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
+import { useBackgroundVars } from './hooks/useBackgroundVars';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -76,11 +77,8 @@ const initialEdges = [
   },
 ];
 
-const nodeTypes = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  custom: SolarSystemNode,
-} as never;
+
+
 
 const edgeTypes = {
   floating: SolarSystemEdge,
@@ -101,6 +99,7 @@ interface MapCompProps {
   isThickConnections?: boolean;
   isShowBackgroundPattern?: boolean;
   isSoftBackground?: boolean;
+  theme?: string;
 }
 
 const MapComp = ({
@@ -117,17 +116,30 @@ const MapComp = ({
   isThickConnections,
   isShowBackgroundPattern,
   isSoftBackground,
+  theme,
   onAddSystem,
 }: MapCompProps) => {
-  const { getNode } = useReactFlow();
+  const { getNode, getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
+
+  const nodeTypes = useMemo(() => {
+    return {
+      custom:
+        theme !== '' && theme !== 'default'
+          ? wrapNode(SolarSystemNodeTheme)
+          : wrapNode(SolarSystemNodeDefault),
+    };
+  }, [theme]);
+  
+
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
   const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
+  const { variant, gap, size, color } = useBackgroundVars(theme);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -186,6 +198,12 @@ const MapComp = ({
     (changes: NodeChange[]) => {
       const systemsIdsToRemove: string[] = [];
 
+      // prevents single node deselection on background / same node click
+      // allows deseletion of all nodes if multiple are currently selected
+      if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
+        changes[0].selected = getNodes().filter(node => node.selected).length === 1;
+      }
+
       const nextChanges = changes.reduce((acc, change) => {
         if (change.type !== 'remove') {
           return [...acc, change];
@@ -223,7 +241,7 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { ['bg-neutral-900']: isSoftBackground })}>
+      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -270,7 +288,7 @@ const MapComp = ({
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background />}
+          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE

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

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

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

@@ -1,14 +1,38 @@
-@import "@/hooks/Mapper/components/map/styles/neon-variables";
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
-.react-flow__edge.selected {
-  .EdgePathBack {
-    stroke: $pastel-yellow;
+.EdgePathBack {
+  fill: none;
+  stroke: #80a5c5;
+  stroke-width: 3px;
+
+  &.TimeCrit {
+    stroke: #f11ab2;
+    stroke-width: 4px;
+  }
+
+  &.Hovered {
+    stroke: #b5c8d9;
+
+    &.TimeCrit {
+      stroke: #ef7dce;
+    }
+  }
+
+  &.Tick {
+    stroke-width: 5px;
+
+    &.TimeCrit {
+      stroke-width: 6px;
+    }
+  }
+
+  &.Gate {
+    stroke: #9aff40;
   }
 }
 
 .EdgePathFront {
   fill: none;
-
   stroke: #2c3844;
   stroke-width: 2px;
 
@@ -54,46 +78,29 @@
   }
 }
 
-.EdgePathBack {
-  fill: none;
-
-  stroke: #80a5c5;
-  stroke-width: 3px;
-
-  &.TimeCrit {
-    stroke: #f11ab2;
-    stroke-width: 4px;
-  }
-
-  &.Hovered {
-    stroke: #b5c8d9;
-
-    &.TimeCrit {
-      stroke: #ef7dce;
-    }
-  }
-
-  &.Tick {
-    stroke-width: 5px;
-
-    &.TimeCrit {
-      stroke-width: 6px;
-    }
-  }
-
-  &.Gate {
-    stroke: #9aff40;
-  }
-
-}
-
 .ClickPath {
   fill: none;
   stroke: none;
   stroke-width: 8px;
 }
 
-.LinkLabel{
+.Handle {
+  border: 1px solid var(--pastel-blue);
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+  }
+
+  &.Right {
+    margin-left: 0px;
+  }
+}
+
+.LinkLabel {
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -109,22 +116,3 @@
   height: 8px;
   font-size: 8px;
 }
-
-.Handle {
-  min-width: initial;
-  min-height: initial;
-  border: 1px solid #5a7d9a;
-  width: 5px;
-  height: 5px;
-  z-index: 1001;
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-
-    &.Right {
-      margin-left: 0px;
-    }
-  }
-}
-

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

@@ -130,7 +130,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         />
 
         <div
-          className="absolute flex items-center gap-1"
+          className="absolute flex items-center gap-1 pointer-events-none"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           }}

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

@@ -1,324 +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 {
-  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 {
-    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 } = data || {};
-
-  const customName = solar_system_name !== name ? name : undefined;
-
-  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);
-    // eslint-disable-next-line
-  }, [characters, presentCharacters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-  const lebM = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(lebM.list), [lebM]);
-  const labelCustom = useMemo(() => lebM.customLabel, [lebM]);
-
-  const killsCount = useMemo(() => {
-    const systemKills = kills[solar_system_id];
-    if (!systemKills) {
-      return null;
-    }
-
-    return systemKills;
-  }, [kills, solar_system_id]);
-
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: {
-        system_id: solar_system_id.toString(),
-      },
-    });
-  });
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
-
-  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="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
-            </div>
-          )}
-
-          {is_shattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
-            </div>
-          )}
-
-          {killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[getActivityType(killsCount)])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(classes.RootCustomNode, regionClass, classes[STATUS_CLASSES[status]], {
-          [classes.selected]: selected,
-        })}
-      >
-        {visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
-                {class_title ?? '-'}
-              </div>
-              {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
-              )}
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                )}
-              >
-                {solar_system_name}
-              </div>
-
-              {isWormhole && (
-                <div className={classes.statics}>
-                  {sortedStatics.map(x => (
-                    <WormholeClassComp key={x} id={x} />
-                  ))}
-                </div>
-              )}
-
-              {effect_name !== null && isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effect_name])}></div>
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {customName}
-                </div>
-              )}
-
-              {!isWormhole && !customName && (
-                <div
-                  className={clsx(
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
-                  {region_name}
-                </div>
-              )}
-
-              {isWormhole && !customName && <div />}
-
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>}
-
-                  {hubs.includes(solar_system_id.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>
-                  )}
-
-                  {charactersInSystem.length > 0 && (
-                    <div className={clsx(classes.localCounter, { ['text-amber-300']: hasUserCharacters })}>
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }}></i>
-                      <span className="font-sans">{charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {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 onMouseDownCapture={dbClick} 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

@@ -85,7 +85,7 @@ $tooltip-bg: #202020; // Dark background for tooltips
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  .tooltip {
+  &.tooltip {
     background-color: $tooltip-bg;
     color: $text-color;
     padding: 5px 10px;
@@ -94,42 +94,59 @@ $tooltip-bg: #202020; // Dark background for tooltips
   }
 
   &.eve-system-status-home {
-    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
-    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
-
+    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-home),
+      transparent
+    );
     &.selected {
-      border-color: $eve-solar-system-status-color-home;
+      border-color: var(--eve-solar-system-status-color-home);
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
-    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
-
+    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-friendly-dark30),
+      transparent
+    );
     &.selected {
-      border-color: darken($eve-solar-system-status-color-friendly, 5%);
+      border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
+    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
-
     &.selected {
       border-color: $pastel-pink;
     }
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-warning),
+      transparent
+    );
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-dangerous),
+      transparent
+    );
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
   }
 }
 
@@ -242,10 +259,10 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
   .TagTitle {
     font-size: 11px;
-    font-weight: bold;
+    font-weight: medium;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
 
-    color: #ffb01d;
+    color: var(--rf-tag-color, #38BDF8);
   }
 
   /* Firefox kostyl */

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

@@ -0,0 +1,235 @@
+import { memo } from 'react';
+import { Handle, Position } 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) => {
+  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>
+    </>
+  );
+});

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

@@ -0,0 +1,407 @@
+@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; // Dark background for tooltips
+
+.RootCustomNode {
+  display: flex;
+  width: 130px;
+  height: 34px;
+
+  flex-direction: column;
+  padding: 2px 6px;
+  font-size: 10px;
+
+  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;
+
+  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-family: inherit !important;
+    font-weight: bold;
+  }
+
+  .solarSystemName {
+  }
+}
+
+.BottomRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 19px;
+
+  .regionName {
+    color: var(--rf-region-name, #D6D3D1)
+  }
+
+  .customName {
+    color: var(--rf-custom-name, #93C5FD)
+  }
+
+  .localCounter {
+    display: flex;
+    //align-items: center;
+    gap: 2px;
+
+    .hasUserCharacters {
+      color: var(--rf-has-user-characters, #fbbf24);
+    }
+
+    & > 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/SolarSystemNodeTheme.tsx

@@ -0,0 +1,236 @@
+import { memo } from 'react';
+import { Handle, Position } 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) => {
+  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>
+    </>
+  );
+});

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

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

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

@@ -9,7 +9,7 @@
     width: 13px;
     height: 4px;
     border-radius: 4px;
-    color: #ffffff;
+    color: var(--text-color);
     font-size: 8px;
     text-align: center;
     font-weight: bolder;

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

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

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

@@ -0,0 +1,171 @@
+import { useMemo } from 'react';
+
+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 { 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: any) {
+  const { data, selected, id } = props;
+  const { system_static_info, system_signatures, locked, name, tag, status, labels, temporary_name } = 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;
+
+  // Global map state
+  const { interfaceSettings } = useMapRootState();
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+      isThickConnections,
+    },
+    outCommand,
+  } = useMapState();
+
+  // logic
+  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
+
+  const charactersInSystem = useMemo(() => {
+    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
+    // eslint-disable-next-line
+  }, [characters, presentCharacters, solar_system_id]);
+
+  const isWormhole = isWormholeSpace(system_class);
+
+  const classTitleColor = useMemo(
+    () => getSystemClassStyles({ systemClass: system_class, security }),
+    [security, system_class],
+  );
+
+  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
+  
+  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => labelsManager.customLabel, [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 systemName = (isTempSystemNameEnabled && temporary_name) || solar_system_name;
+  const customName =
+    (isTempSystemNameEnabled && temporary_name && name) || (solar_system_name !== name && name);
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+    return prepareUnsplashedChunks(
+      system_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, system_signatures]);
+
+  const nodeVars = {
+    // original props
+    id,
+    selected,
+    // computed
+    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;
+}

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: #000000;
+  --rf-soft-bg-color: #171717;
+
+  --rf-node-bg-color: #202020;
+  --rf-node-soft-bg-color: #2b2b2b;
+  --rf-text-color: #ffffff;
+  --rf-tag-color:  #38BDF8;
+  --rf-region-name: #D6D3D1;
+  --rf-custom-name: #93C5FD;
+
+
+  --rf-bg-variant: "dots";
+  --rf-bg-gap: 16;
+  --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;
+
+  
+}

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

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

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

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

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

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

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

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

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

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

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

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

assets/js/hooks/Mapper/components/map/utils/wrapNode.tsx

@@ -0,0 +1,11 @@
+// wrapNode.ts
+import { NodeProps } from 'reactflow';
+import { SolarSystemNodeProps } from '../components/SolarSystemNode';
+
+export function wrapNode<T>(
+  SolarSystemNode: React.FC<SolarSystemNodeProps<T>>
+): React.FC<NodeProps<T>> {
+  return function NodeAdapter(props) {
+    return <SolarSystemNode {...props} />;
+  };
+}

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

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

assets/js/hooks/Mapper/components/mapInterface/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/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx

@@ -2,7 +2,10 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
-import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import {
+  getGroupIdByRawGroup,
+  GROUPS_LIST,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -122,13 +125,14 @@ export const SystemSignaturesContent = ({
         }
 
         const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
+        const preparedGroup = getGroupIdByRawGroup(x.group);
 
         if (isCosmicSignature) {
           const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
           if (showCosmicSignatures) {
-            return !x.group || groupSettings.find(y => y.key === x.group)?.value;
+            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
           } else {
-            return !!x.group && groupSettings.find(y => y.key === x.group)?.value;
+            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
           }
         }
 

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

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

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

@@ -16,6 +16,8 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const { interfaceSettings } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
 
+  const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;
+
   const [showOnTheMap, setShowOnTheMap] = useState(false);
   const [showMapSettings, setShowMapSettings] = useState(false);
   const mapInterface = <MapInterface />;
@@ -26,27 +28,29 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   useSkipContextMenu();
 
   return (
-    <Layout map={<MapWrapper />}>
-      {!isShowMenu ? (
-        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-          <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
-            <Topbar />
+    <div className={themeClass}>
+      <Layout map={<MapWrapper />}>
+        {!isShowMenu ? (
+          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+            <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
+              <Topbar />
+              {mapInterface}
+            </div>
+            <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
+              <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+            </div>
+          </div>
+        ) : (
+          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+            <Topbar>
+              <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+            </Topbar>
             {mapInterface}
           </div>
-          <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
-            <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-          </div>
-        </div>
-      ) : (
-        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-          <Topbar>
-            <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-          </Topbar>
-          {mapInterface}
-        </div>
-      )}
-      <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-      <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
-    </Layout>
+        )}
+        <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
+        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
+      </Layout>
+    </div>
   );
 };

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

@@ -3,8 +3,13 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import { InterfaceStoredSettings, InterfaceStoredSettingsProps, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import {
+  InterfaceStoredSettingsProps,
+  useMapRootState,
+  InterfaceStoredSettings,
+} from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
+import { Dropdown } from 'primereact/dropdown';
 
 export enum UserSettingsRemoteProps {
   link_signature_on_splash = 'link_signature_on_splash',
@@ -37,96 +42,171 @@ export interface MapSettingsProps {
   onHide: () => void;
 }
 
-type CheckboxesList = {
+type SettingsListItem = {
   prop: keyof UserSettings;
   label: string;
-}[];
+  type: 'checkbox' | 'dropdown';
+  options?: { label: string; value: string }[];
+};
 
-const COMMON_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowMinimap, label: 'Show Minimap' },
+const COMMON_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowMinimap,
+    label: 'Show Minimap',
+    type: 'checkbox',
+  },
 ];
 
-const SYSTEMS_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowKSpace, label: 'Highlight Low/High-security systems' },
-  { prop: UserSettingsRemoteProps.select_on_spash, label: 'Auto-select splashed' },
+const SYSTEMS_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowKSpace,
+    label: 'Highlight Low/High-security systems',
+    type: 'checkbox',
+  },
+  {
+    prop: UserSettingsRemoteProps.select_on_spash,
+    label: 'Auto-select splashed',
+    type: 'checkbox',
+  },
 ];
 
-const SIGNATURES_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: UserSettingsRemoteProps.link_signature_on_splash, label: 'Link signature on splash' },
-  { prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures, label: 'Show unsplashed signatures' },
+const SIGNATURES_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: UserSettingsRemoteProps.link_signature_on_splash,
+    label: 'Link signature on splash',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures,
+    label: 'Show unsplashed signatures',
+    type: 'checkbox',
+  },
 ];
 
-const CONNECTIONS_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: UserSettingsRemoteProps.delete_connection_with_sigs, label: 'Delete connections to linked signatures' },
-  { prop: InterfaceStoredSettingsProps.isThickConnections, label: 'Thicker connections' },
+const CONNECTIONS_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: UserSettingsRemoteProps.delete_connection_with_sigs,
+    label: 'Delete connections to linked signatures',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isThickConnections,
+    label: 'Thicker connections',
+    type: 'checkbox',
+  },
 ];
 
-const UI_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowMenu, label: 'Enable compact map menu bar' },
-  { prop: InterfaceStoredSettingsProps.isShowBackgroundPattern, label: 'Show background pattern' },
-  { prop: InterfaceStoredSettingsProps.isSoftBackground, label: 'Enable soft background' },
+const UI_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowMenu,
+    label: 'Enable compact map menu bar',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isShowBackgroundPattern,
+    label: 'Show background pattern',
+    type: 'checkbox',
+  },
+  {
+    prop: InterfaceStoredSettingsProps.isSoftBackground,
+    label: 'Enable soft background',
+    type: 'checkbox',
+  },
 ];
 
+const THEME_OPTIONS = [
+  { label: 'Default', value: 'default' },
+  { label: 'Pathfinder', value: 'pathfinder' },
+];
+
+const THEME_SETTING: SettingsListItem = {
+  prop: 'theme',
+  label: 'Theme',
+  type: 'dropdown',
+  options: THEME_OPTIONS,
+};
+
 export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
-  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({ ...DEFAULT_REMOTE_SETTINGS });
+  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
+    ...DEFAULT_REMOTE_SETTINGS,
+  });
 
   const mergedSettings = useMemo(() => {
     return {
-      ...interfaceSettings,
       ...userRemoteSettings,
+      ...interfaceSettings,
     };
   }, [userRemoteSettings, interfaceSettings]);
 
+
   const handleShow = async () => {
     const { user_settings } = await outCommand({
       type: OutCommand.getUserSettings,
       data: null,
     });
-
     setUserRemoteSettings({
       ...user_settings,
     });
   };
 
-  const handleChangeChecked = useCallback(
-    (prop: keyof UserSettings) => async (checked: boolean) => {
-      // @ts-ignore
-      if (UserSettingsRemoteList.includes(prop)) {
+  const handleSettingChange = useCallback(
+    async (prop: keyof UserSettings, value: boolean | string) => {
+      if (UserSettingsRemoteList.includes(prop as any)) {
         const newRemoteSettings = {
           ...userRemoteSettings,
-          [prop]: checked,
+          [prop]: value,
         };
-
         await outCommand({
           type: OutCommand.updateUserSettings,
           data: newRemoteSettings,
         });
-
         setUserRemoteSettings(newRemoteSettings);
-        return;
+      } else {
+        setInterfaceSettings({
+          ...interfaceSettings,
+          [prop]: value,
+        });
       }
-
-      setInterfaceSettings({
-        ...interfaceSettings,
-        [prop]: checked,
-      });
     },
-    [interfaceSettings, outCommand, setInterfaceSettings, userRemoteSettings],
+    [userRemoteSettings, interfaceSettings, outCommand, setInterfaceSettings],
   );
 
-  const renderCheckboxesList = (list: CheckboxesList) => {
-    return list.map(x => {
+  const renderSettingItem = (item: SettingsListItem) => {
+    const currentValue = mergedSettings[item.prop];
+
+    if (item.type === 'checkbox') {
       return (
         <PrettySwitchbox
-          key={x.prop}
-          label={x.label}
-          checked={mergedSettings[x.prop]}
-          setChecked={handleChangeChecked(x.prop)}
+          key={item.prop}
+          label={item.label}
+          checked={!!currentValue}
+          setChecked={(checked) => handleSettingChange(item.prop, checked)}
         />
       );
-    });
+    }
+
+    if (item.type === 'dropdown' && item.options) {
+      return (
+        <div key={item.prop} className="flex items-center gap-2 mt-2">
+          <label className="text-sm">{item.label}:</label>
+          <Dropdown
+            className="text-sm"
+            value={currentValue}
+            options={item.options}
+            onChange={(e) => handleSettingChange(item.prop, e.value)}
+            placeholder="Select a theme"
+          />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const renderSettingsList = (list: SettingsListItem[]) => {
+    return list.map(renderSettingItem);
   };
 
   return (
@@ -137,10 +217,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       style={{ width: '550px' }}
       onShow={handleShow}
       onHide={() => {
-        if (!show) {
-          return;
-        }
-
+        if (!show) return;
         setActiveIndex(0);
         onHide();
       }}
@@ -150,25 +227,35 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
           <div className={styles.verticalTabsContainer}>
             <TabView
               activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
+              onTabChange={(e) => setActiveIndex(e.index)}
               className={styles.verticalTabView}
             >
               <TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">{renderCheckboxesList(COMMON_CHECKBOXES_PROPS)}</div>
-              </TabPanel>
-              <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
                 <div className="w-full h-full flex flex-col gap-1">
-                  {renderCheckboxesList(SYSTEMS_CHECKBOXES_PROPS)}
+                  {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>
+              </TabPanel>
+
               <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(CONNECTIONS_CHECKBOXES_PROPS)}
+                {renderSettingsList(CONNECTIONS_CHECKBOXES_PROPS)}
               </TabPanel>
+
               <TabPanel header="Signatures" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(SIGNATURES_CHECKBOXES_PROPS)}
+                {renderSettingsList(SIGNATURES_CHECKBOXES_PROPS)}
               </TabPanel>
+
               <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(UI_CHECKBOXES_PROPS)}
+                {renderSettingsList(UI_CHECKBOXES_PROPS)}
+              </TabPanel>
+
+              <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
+                {renderSettingItem(THEME_SETTING)}
               </TabPanel>
             </TabView>
           </div>

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

@@ -40,6 +40,7 @@ export const MapWrapper = () => {
       isThickConnections,
       isShowBackgroundPattern,
       isSoftBackground,
+      theme,
     },
   } = useMapRootState();
   const { deleteSystems } = useDeleteSystems();
@@ -166,6 +167,7 @@ export const MapWrapper = () => {
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}
+        theme={theme}
         onAddSystem={onAddSystem}
       />
 

assets/js/hooks/Mapper/helpers/parseSignatures.ts

@@ -1,5 +1,5 @@
-import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { SignatureGroup, SignatureKind, SystemSignature } from '@/hooks/Mapper/types';
+import { MAPPING_TYPE_TO_ENG } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 export const parseSignatures = (value: string, availableKeys: string[]): SystemSignature[] => {
   const outArr: SystemSignature[] = [];
@@ -14,10 +14,12 @@ export const parseSignatures = (value: string, availableKeys: string[]): SystemS
       continue;
     }
 
+    const kind = MAPPING_TYPE_TO_ENG[sigArrInfo[1] as SignatureKind];
+
     outArr.push({
       eve_id: sigArrInfo[0],
-      kind: availableKeys.includes(sigArrInfo[1]) ? sigArrInfo[1] : COSMIC_SIGNATURE,
-      group: sigArrInfo[2],
+      kind: availableKeys.includes(kind) ? kind : SignatureKind.CosmicSignature,
+      group: sigArrInfo[2] as SignatureGroup,
       name: sigArrInfo[3],
       type: '',
     });

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

@@ -37,6 +37,7 @@ export enum InterfaceStoredSettingsProps {
   isShowUnsplashedSignatures = 'isShowUnsplashedSignatures',
   isShowBackgroundPattern = 'isShowBackgroundPattern',
   isSoftBackground = 'isSoftBackground',
+  theme = 'theme',
 }
 
 export type InterfaceStoredSettings = {
@@ -47,6 +48,7 @@ export type InterfaceStoredSettings = {
   isShowUnsplashedSignatures: boolean;
   isShowBackgroundPattern: boolean;
   isSoftBackground: boolean;
+  theme: string;
 };
 
 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
@@ -57,7 +59,8 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowUnsplashedSignatures: false,
   isShowBackgroundPattern: true,
   isSoftBackground: false,
-};
+  theme: 'default',
+}
 
 export interface MapRootContextProps {
   update: ContextStoreDataUpdate<MapRootData>;

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

@@ -129,6 +129,7 @@ export enum OutCommand {
   updateConnectionCustomInfo = 'update_connection_custom_info',
   updateSignatures = 'update_signatures',
   updateSystemName = 'update_system_name',
+  updateSystemTemporaryName = 'update_system_temporary_name',
   updateSystemDescription = 'update_system_description',
   updateSystemLabels = 'update_system_labels',
   updateSystemLocked = 'update_system_locked',

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

@@ -10,6 +10,15 @@ export enum SignatureGroup {
   CombatSite = 'Combat Site',
 }
 
+export enum SignatureKind {
+  CosmicSignature = 'Cosmic Signature',
+  CosmicAnomaly = 'Cosmic Anomaly',
+  Structure = 'Structure',
+  Ship = 'Ship',
+  Deployable = 'Deployable',
+  Drone = 'Drone',
+}
+
 export type GroupType = {
   id: string;
   icon: string;
@@ -19,7 +28,7 @@ export type GroupType = {
 
 export type SystemSignature = {
   eve_id: string;
-  kind: string;
+  kind: SignatureKind;
   name: string;
   custom_info?: string;
   description?: string;
@@ -30,3 +39,41 @@ export type SystemSignature = {
   inserted_at?: string;
   updated_at?: string;
 };
+
+export enum SignatureKindENG {
+  CosmicSignature = 'Cosmic Signature',
+  CosmicAnomaly = 'Cosmic Anomaly',
+  Structure = 'Structure',
+  Ship = 'Ship',
+  Deployable = 'Deployable',
+  Drone = 'Drone',
+}
+
+export enum SignatureKindRU {
+  CosmicSignature = 'Скрытый сигнал',
+  CosmicAnomaly = 'Космическая аномалия',
+  Structure = 'Сооружение',
+  Ship = 'Корабль',
+  Deployable = 'Полевые блоки',
+  Drone = 'Дрон',
+}
+
+export enum SignatureGroupENG {
+  CosmicSignature = 'Cosmic Signature',
+  Wormhole = 'Wormhole',
+  GasSite = 'Gas Site',
+  RelicSite = 'Relic Site',
+  DataSite = 'Data Site',
+  OreSite = 'Ore Site',
+  CombatSite = 'Combat Site',
+}
+
+export enum SignatureGroupRU {
+  CosmicSignature = 'Скрытый сигнал',
+  Wormhole = 'Червоточина',
+  GasSite = 'Газовый район',
+  RelicSite = 'Археологический район',
+  DataSite = 'Информационный район',
+  OreSite = 'Астероидный район',
+  CombatSite = 'Боевой район',
+}

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

@@ -116,6 +116,7 @@ export type SolarSystemRawType = {
   tag: string | null;
   status: number;
   name: string | null;
+  temporary_name: string | null;
 
   system_static_info: SolarSystemStaticInfoRaw;
   system_signatures: SystemSignature[];

assets/js/hooks/copyToClipboard.ts

@@ -1,17 +1,14 @@
 export default {
   mounted() {
-    const hook = this;
-    const url = hook.el.dataset.url;
-    const button = hook.el;
+    const button = this.el;
 
     button.addEventListener('click', function () {
-      // Get the URL from the data attribute
 
       button.classList.remove('copied');
 
       // Copy the URL to the clipboard
       navigator.clipboard
-        .writeText(url)
+        .writeText(button.dataset.url)
         .then(() => {
           button.classList.add('copied');
         })

config/runtime.exs

@@ -48,6 +48,11 @@ port =
 
 scheme = System.get_env("WEB_EXTERNAL_SCHEME", "http")
 
+public_api_disabled =
+  config_dir
+  |> get_var_from_path_or_env("WANDERER_PUBLIC_API_DISABLED", "false")
+  |> String.to_existing_atom()
+
 map_subscriptions_enabled =
   config_dir
   |> get_var_from_path_or_env("WANDERER_MAP_SUBSCRIPTIONS_ENABLED", "false")
@@ -83,6 +88,7 @@ config :wanderer_app,
   admins: admins,
   corp_id: System.get_env("WANDERER_CORP_ID", "-1") |> String.to_integer(),
   corp_wallet: System.get_env("WANDERER_CORP_WALLET", ""),
+  public_api_disabled: public_api_disabled,
   map_subscriptions_enabled: map_subscriptions_enabled,
   wallet_tracking_enabled: wallet_tracking_enabled,
   subscription_settings: %{

lib/wanderer_app/api/map.ex

@@ -21,6 +21,7 @@ defmodule WandererApp.Api.Map do
     define(:update_options, action: :update_options)
     define(:assign_owner, action: :assign_owner)
     define(:mark_as_deleted, action: :mark_as_deleted)
+    define(:update_api_key, action: :update_api_key)
 
     define(:by_id,
       get_by: [:id],
@@ -122,6 +123,11 @@ defmodule WandererApp.Api.Map do
 
       change(set_attribute(:deleted, true))
     end
+
+    update :update_api_key do
+      accept [:public_api_key]
+    end
+
   end
 
   attributes do
@@ -141,6 +147,10 @@ defmodule WandererApp.Api.Map do
     attribute :description, :string
     attribute :personal_note, :string
 
+    attribute :public_api_key, :string do
+      allow_nil? true
+    end
+
     attribute :hubs, {:array, :string} do
       allow_nil?(true)
 

lib/wanderer_app/api/map_system.ex

@@ -46,6 +46,7 @@ defmodule WandererApp.Api.MapSystem do
     define(:update_locked, action: :update_locked)
     define(:update_status, action: :update_status)
     define(:update_tag, action: :update_tag)
+    define(:update_temporary_name, action: :update_temporary_name)
     define(:update_labels, action: :update_labels)
     define(:update_position, action: :update_position)
     define(:update_visible, action: :update_visible)
@@ -102,6 +103,10 @@ defmodule WandererApp.Api.MapSystem do
       accept [:tag]
     end
 
+    update :update_temporary_name do
+      accept [:temporary_name]
+    end
+
     update :update_labels do
       accept [:labels]
     end
@@ -141,6 +146,10 @@ defmodule WandererApp.Api.MapSystem do
       allow_nil? true
     end
 
+    attribute :temporary_name, :string do
+      allow_nil? true
+    end
+
     attribute :labels, :string do
       allow_nil? true
     end

lib/wanderer_app/env.ex

@@ -9,6 +9,7 @@ defmodule WandererApp.Env do
   def custom_route_base_url, do: get_key(:custom_route_base_url, "<CUSTOM_ROUTE_BASE_URL>")
   def invites, do: get_key(:invites, false)
   def map_subscriptions_enabled?, do: get_key(:map_subscriptions_enabled, false)
+  def public_api_disabled?, do: get_key(:public_api_disabled, false)
   def wallet_tracking_enabled?, do: get_key(:wallet_tracking_enabled, false)
   def admins, do: get_key(:admins, [])
   def admin_username, do: get_key(:admin_username)

lib/wanderer_app/map/map_server.ex

@@ -129,6 +129,12 @@ defmodule WandererApp.Map.Server do
       |> map_pid!
       |> GenServer.cast({&Impl.update_system_tag/2, [update]})
 
+    def update_system_temporary_name(map_id, update) when is_binary(map_id),
+    do:
+      map_id
+      |> map_pid!
+      |> GenServer.cast({&Impl.update_system_temporary_name/2, [update]})
+
   def update_system_locked(map_id, update) when is_binary(map_id),
     do:
       map_id

lib/wanderer_app/map/map_server_impl.ex

@@ -150,6 +150,8 @@ defmodule WandererApp.Map.Server.Impl do
 
   defdelegate update_system_tag(state, update), to: SystemsImpl
 
+  defdelegate update_system_temporary_name(state, update), to: SystemsImpl
+
   defdelegate update_system_locked(state, update), to: SystemsImpl
 
   defdelegate update_system_labels(state, update), to: SystemsImpl
@@ -201,7 +203,7 @@ defmodule WandererApp.Map.Server.Impl do
       | map: map |> WandererApp.Map.update_subscription_settings!(subscription_settings)
     }
 
-  def handle_event(:update_characters, %{map_id: map_id} = state) do
+  def handle_event(:update_characters, state) do
     Process.send_after(self(), :update_characters, @update_characters_timeout)
 
     CharactersImpl.update_characters(state)
@@ -259,7 +261,7 @@ defmodule WandererApp.Map.Server.Impl do
     state
   end
 
-  def handle_event(:cleanup_systems, %{map_id: map_id} = state) do
+  def handle_event(:cleanup_systems, state) do
     Process.send_after(self(), :cleanup_systems, @systems_cleanup_timeout)
 
     state |> SystemsImpl.cleanup_systems()
@@ -320,6 +322,8 @@ defmodule WandererApp.Map.Server.Impl do
       layout: options |> Map.get("layout", "left_to_right"),
       store_custom_labels:
         options |> Map.get("store_custom_labels", "false") |> String.to_existing_atom(),
+      show_temp_system_name:
+        options |> Map.get("show_temp_system_name", "false") |> String.to_existing_atom(),
       restrict_offline_showing:
         options |> Map.get("restrict_offline_showing", "false") |> String.to_existing_atom()
     ]
@@ -427,7 +431,8 @@ defmodule WandererApp.Map.Server.Impl do
                                  "name" => name,
                                  "position" => %{"x" => x, "y" => y},
                                  "status" => status,
-                                 "tag" => tag
+                                 "tag" => tag,
+                                 "temporary_name" => temporary_name,
                                } = _system,
                                acc ->
         acc
@@ -446,6 +451,7 @@ defmodule WandererApp.Map.Server.Impl do
         })
         |> update_system_status(%{solar_system_id: id |> String.to_integer(), status: status})
         |> update_system_tag(%{solar_system_id: id |> String.to_integer(), tag: tag})
+        |> update_system_temporary_name(%{solar_system_id: id |> String.to_integer(), temporary_name: temporary_name})
         |> update_system_locked(%{solar_system_id: id |> String.to_integer(), locked: locked})
         |> update_system_labels(%{solar_system_id: id |> String.to_integer(), labels: labels})
       end)

lib/wanderer_app/map/server/map_server_systems_impl.ex

@@ -122,6 +122,13 @@ defmodule WandererApp.Map.Server.SystemsImpl do
       ),
       do: state |> update_system(:update_tag, [:tag], update)
 
+  def update_system_temporary_name(
+        state,
+        update
+      ) do
+      state |> update_system(:update_temporary_name, [:temporary_name], update)
+  end
+
   def update_system_locked(
         state,
         update
@@ -277,7 +284,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
                location.solar_system_id
              ) do
           {:ok, existing_system} when not is_nil(existing_system) ->
-            {:ok, updated_system} =
+            updated_system =
               existing_system
               |> WandererApp.MapSystemRepo.update_position!(%{
                 position_x: position.x,
@@ -285,7 +292,8 @@ defmodule WandererApp.Map.Server.SystemsImpl do
               })
               |> WandererApp.MapSystemRepo.cleanup_labels!(map_opts)
               |> WandererApp.MapSystemRepo.update_visible!(%{visible: true})
-              |> WandererApp.MapSystemRepo.cleanup_tags()
+              |> WandererApp.MapSystemRepo.cleanup_tags!()
+              |> WandererApp.MapSystemRepo.cleanup_temporary_name!()
 
             @ddrt.insert(
               {existing_system.solar_system_id,
@@ -404,6 +412,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
             |> WandererApp.MapSystemRepo.update_position!(%{position_x: x, position_y: y})
             |> WandererApp.MapSystemRepo.cleanup_labels!(map_opts)
             |> WandererApp.MapSystemRepo.cleanup_tags!()
+            |> WandererApp.MapSystemRepo.cleanup_temporary_name!()
             |> WandererApp.MapSystemRepo.update_visible(%{visible: true})
           end
 

lib/wanderer_app/repositories/map_repo.ex

@@ -4,6 +4,7 @@ defmodule WandererApp.MapRepo do
   @default_map_options %{
     "layout" => "left_to_right",
     "store_custom_labels" => "false",
+    "show_temp_system_name" => "false",
     "restrict_offline_showing" => "false"
   }
 

lib/wanderer_app/repositories/map_system_repo.ex

@@ -16,11 +16,13 @@ defmodule WandererApp.MapSystemRepo do
     end
   end
 
-  def get_all_by_map(map_id),
-    do: WandererApp.Api.MapSystem.read_all_by_map(%{map_id: map_id})
+  def get_all_by_map(map_id) do
+    WandererApp.Api.MapSystem.read_all_by_map(%{map_id: map_id})
+  end
 
-  def get_visible_by_map(map_id),
-    do: WandererApp.Api.MapSystem.read_visible_by_map(%{map_id: map_id})
+  def get_visible_by_map(map_id) do
+    WandererApp.Api.MapSystem.read_visible_by_map(%{map_id: map_id})
+  end
 
   def remove_from_map(map_id, solar_system_id) do
     WandererApp.Api.MapSystem.read_by_map_and_solar_system!(%{
@@ -59,6 +61,20 @@ defmodule WandererApp.MapSystemRepo do
     })
   end
 
+  def cleanup_temporary_name(system) do
+    system
+    |> WandererApp.Api.MapSystem.update_temporary_name(%{
+      temporary_name: nil
+    })
+  end
+
+  def cleanup_temporary_name!(system) do
+    system
+    |> WandererApp.Api.MapSystem.update_temporary_name!(%{
+      temporary_name: nil
+    })
+  end
+
   def get_filtered_labels(labels, true) when is_binary(labels) do
     labels
     |> Jason.decode!()
@@ -99,6 +115,11 @@ defmodule WandererApp.MapSystemRepo do
       system
       |> WandererApp.Api.MapSystem.update_tag(update)
 
+  def update_temporary_name(system, update) do
+      system
+      |> WandererApp.Api.MapSystem.update_temporary_name(update)
+  end
+
   def update_labels(system, update),
     do:
       system

lib/wanderer_app_web/components/character_activity.ex

@@ -0,0 +1,47 @@
+defmodule WandererAppWeb.CharacterActivity do
+  use WandererAppWeb, :live_component
+  use LiveViewEvents
+
+  @impl true
+  def mount(socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def update(
+        assigns,
+        socket
+      ) do
+    {:ok,
+     socket
+     |> handle_info_or_assign(assigns)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div id={@id}>
+      <.table class="!max-h-[80vh] !overflow-y-auto" id="activity-tbl" rows={@activity}>
+        <:col :let={row} label="Character">
+          <.character_item character={row.character} />
+        </:col>
+        <:col :let={row} label="Passages">
+          <%= row.count %>
+        </:col>
+      </.table>
+    </div>
+    """
+  end
+
+  def character_item(assigns) do
+    ~H"""
+    <div class="flex items-center gap-3">
+      <div class="avatar">
+        <div class="rounded-md w-12 h-12">
+          <img src={member_icon_url(@character.eve_id)} alt={@character.name} />
+        </div>
+      </div>
+      <%= @character.name %>
+    </div>
+    """
+  end
+end

lib/wanderer_app_web/components/core_components.ex

@@ -393,6 +393,7 @@ defmodule WandererAppWeb.CoreComponents do
               data-pc-name="checkbox"
               data-pc-section="root"
             >
+              <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
               <input
                 id={@id}
                 name={@name}

lib/wanderer_app_web/controllers/api_controller.ex

@@ -0,0 +1,308 @@
+defmodule WandererAppWeb.APIController do
+  use WandererAppWeb, :controller
+
+  import Ash.Query, only: [filter: 2]
+
+  alias WandererApp.Api
+  alias WandererApp.MapSystemRepo
+  alias WandererApp.MapCharacterSettingsRepo
+  alias WandererApp.Api.Character
+  alias WandererApp.CachedInfo
+
+
+# -----------------------------------------------------------------
+# Common
+# -----------------------------------------------------------------
+
+  @doc """
+  GET /api/system-static-info
+
+  Requires 'id' (the solar_system_id)
+
+  Example:
+      GET /api/common/system_static?id=31002229
+      GET /api/common/system_static?id=31002229
+  """
+  def show_system_static(conn, params) do
+    with {:ok, solar_system_str} <- require_param(params, "id"),
+         {:ok, solar_system_id} <- parse_int(solar_system_str) do
+      case CachedInfo.get_system_static_info(solar_system_id) do
+        {:ok, system} ->
+          data = static_system_to_json(system)
+          json(conn, %{data: data})
+
+        {:error, :not_found} ->
+          conn
+          |> put_status(:not_found)
+          |> json(%{error: "System not found"})
+      end
+    else
+      {:error, msg} ->
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: msg})
+    end
+  end
+
+# -----------------------------------------------------------------
+# Map
+# -----------------------------------------------------------------
+
+@doc """
+GET /api/map/systems
+
+Requires either `?map_id=<UUID>` **OR** `?slug=<map-slug>` in the query params.
+
+If `?all=true` is provided, **all** systems are returned.
+Otherwise, only "visible" systems are returned.
+
+Examples:
+    GET /api/map/systems?map_id=466e922b-e758-485e-9b86-afae06b88363
+    GET /api/map/systems?slug=my-unique-wormhole-map
+    GET /api/map/systems?map_id=<UUID>&all=true
+"""
+def list_systems(conn, params) do
+  with {:ok, map_id} <- fetch_map_id(params) do
+    # Decide which function to call based on the "all" param
+    repo_fun =
+      if params["all"] == "true" do
+        &MapSystemRepo.get_all_by_map/1
+      else
+        &MapSystemRepo.get_visible_by_map/1
+      end
+
+    case repo_fun.(map_id) do
+      {:ok, systems} ->
+        data = Enum.map(systems, &map_system_to_json/1)
+        json(conn, %{data: data})
+
+      {:error, reason} ->
+        conn
+        |> put_status(:not_found)
+        |> json(%{error: "Could not fetch systems for map_id=#{map_id}: #{inspect(reason)}"})
+    end
+  else
+    {:error, msg} ->
+      conn
+      |> put_status(:bad_request)
+      |> json(%{error: msg})
+  end
+end
+
+
+  @doc """
+  GET /api/map/system
+
+  Requires 'id' (the solar_system_id)
+  plus either ?map_id=<UUID> or ?slug=<map-slug>.
+
+  Example:
+      GET /api/map/system?id=31002229&map_id=466e922b-e758-485e-9b86-afae06b88363
+      GET /api/map/system?id=31002229&slug=my-unique-wormhole-map
+  """
+  def show_system(conn, params) do
+    with {:ok, solar_system_str} <- require_param(params, "id"),
+         {:ok, solar_system_id} <- parse_int(solar_system_str),
+         {:ok, map_id} <- fetch_map_id(params) do
+      case MapSystemRepo.get_by_map_and_solar_system_id(map_id, solar_system_id) do
+        {:ok, system} ->
+          data = map_system_to_json(system)
+          json(conn, %{data: data})
+
+        {:error, :not_found} ->
+          conn
+          |> put_status(:not_found)
+          |> json(%{error: "System not found in map=#{map_id}"})
+      end
+    else
+      {:error, msg} ->
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: msg})
+    end
+  end
+
+
+
+  @doc """
+  GET /api/map/tracked_characters_with_info
+
+  Example usage:
+    GET /api/map/tracked_characters_with_info?map_id=<uuid>
+    GET /api/map/tracked_characters_with_info?slug=<map-slug>
+
+  Returns a list of tracked records, plus their fully-loaded `character` data.
+  """
+  def tracked_characters_with_info(conn, params) do
+    with {:ok, map_id} <- fetch_map_id(params),
+         {:ok, settings_list} <- get_tracked_by_map_ids(map_id),
+         {:ok, char_list} <-
+           read_characters_by_ids_wrapper(Enum.map(settings_list, & &1.character_id)) do
+
+      chars_by_id = Map.new(char_list, &{&1.id, &1})
+
+      data =
+        Enum.map(settings_list, fn setting ->
+          found_char = Map.get(chars_by_id, setting.character_id)
+
+          %{
+            id: setting.id,
+            map_id: setting.map_id,
+            character_id: setting.character_id,
+            tracked: setting.tracked,
+            inserted_at: setting.inserted_at,
+            updated_at: setting.updated_at,
+            character:
+              if found_char do
+                character_to_json(found_char)
+              else
+                %{}
+              end
+          }
+        end)
+
+      json(conn, %{data: data})
+    else
+      {:error, :get_tracked_error, reason} ->
+        conn
+        |> put_status(:not_found)
+        |> json(%{error: "No tracked records found for map_id: #{inspect(reason)}"})
+
+      {:error, :read_characters_by_ids_error, reason} ->
+        conn
+        |> put_status(:internal_server_error)
+        |> json(%{error: "Could not load Character records: #{inspect(reason)}"})
+
+      {:error, message} ->
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: message})
+    end
+  end
+
+  defp get_tracked_by_map_ids(map_id) do
+    case MapCharacterSettingsRepo.get_tracked_by_map_all(map_id) do
+      {:ok, settings_list} ->
+        {:ok, settings_list}
+
+      {:error, reason} ->
+        {:error, :get_tracked_error, reason}
+    end
+  end
+
+  defp read_characters_by_ids_wrapper(ids) do
+    case read_characters_by_ids(ids) do
+      {:ok, char_list} ->
+        {:ok, char_list}
+
+      {:error, reason} ->
+        {:error, :read_characters_by_ids_error, reason}
+    end
+  end
+
+  defp fetch_map_id(%{"map_id" => mid}) when is_binary(mid) and mid != "" do
+    {:ok, mid}
+  end
+
+  defp fetch_map_id(%{"slug" => slug}) when is_binary(slug) and slug != "" do
+    case WandererApp.Api.Map.get_map_by_slug(slug) do
+      {:ok, map} ->
+        {:ok, map.id}
+
+      {:error, _reason} ->
+        {:error, "No map found for slug=#{slug}"}
+    end
+  end
+
+  defp fetch_map_id(_), do: {:error, "Must provide either ?map_id=UUID or ?slug=SLUG"}
+
+  defp require_param(params, key) do
+    case params[key] do
+      nil -> {:error, "Missing required param: #{key}"}
+      "" -> {:error, "Param #{key} cannot be empty"}
+      val -> {:ok, val}
+    end
+  end
+
+  defp parse_int(str) do
+    case Integer.parse(str) do
+      {num, ""} -> {:ok, num}
+      _ -> {:error, "Invalid integer for param id=#{str}"}
+    end
+  end
+
+  defp read_characters_by_ids(ids) when is_list(ids) do
+    if ids == [] do
+      {:ok, []}
+    else
+      query =
+        Character
+        |> filter(id in ^ids)
+
+      Api.read(query)
+    end
+  end
+
+  defp map_system_to_json(system) do
+    Map.take(system, [
+      :id,
+      :map_id,
+      :solar_system_id,
+      :name,
+      :custom_name,
+      :temporary_name,
+      :description,
+      :tag,
+      :labels,
+      :locked,
+      :visible,
+      :status,
+      :position_x,
+      :position_y,
+      :inserted_at,
+      :updated_at
+    ])
+  end
+
+  defp character_to_json(ch) do
+    Map.take(ch, [
+      :id,
+      :eve_id,
+      :name,
+      :corporation_id,
+      :corporation_name,
+      :corporation_ticker,
+      :alliance_id,
+      :alliance_name,
+      :alliance_ticker,
+      :inserted_at,
+      :updated_at
+    ])
+  end
+
+
+  defp static_system_to_json(system) do
+    system
+    |> Map.take([
+      :solar_system_id,
+      :region_id,
+      :constellation_id,
+      :solar_system_name,
+      :solar_system_name_lc,
+      :constellation_name,
+      :region_name,
+      :system_class,
+      :security,
+      :type_description,
+      :class_title,
+      :is_shattered,
+      :effect_name,
+      :effect_power,
+      :statics,
+      :wandering,
+      :triglavian_invasion_status,
+      :sun_type_id
+    ])
+  end
+
+end

lib/wanderer_app_web/controllers/plugs/check_api_disabled.ex

@@ -0,0 +1,15 @@
+defmodule WandererAppWeb.Plugs.CheckApiDisabled do
+  import Plug.Conn
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    if WandererApp.Env.public_api_disabled?() do
+      conn
+      |> send_resp(403, "Public API is disabled")
+      |> halt()
+    else
+      conn
+    end
+  end
+end

lib/wanderer_app_web/controllers/plugs/check_map_api_key.ex

@@ -0,0 +1,62 @@
+defmodule WandererAppWeb.Plugs.CheckMapApiKey do
+  @moduledoc """
+  A plug that checks the "Authorization: Bearer <token>" header
+  against the map’s stored public_api_key. Halts with 401 if invalid.
+  """
+
+  import Plug.Conn
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    header = get_req_header(conn, "authorization") |> List.first()
+
+    case header do
+      "Bearer " <> incoming_token ->
+        case fetch_map_id(conn.query_params) do
+          {:ok, map_id} ->
+            case WandererApp.Api.Map.by_id(map_id) do
+              {:ok, map} ->
+                if map.public_api_key == incoming_token do
+                  conn
+                else
+                  conn
+                  |> send_resp(401, "Unauthorized (invalid token for map)")
+                  |> halt()
+                end
+
+              {:error, _reason} ->
+                conn
+                |> send_resp(404, "Map not found")
+                |> halt()
+            end
+
+          {:error, msg} ->
+            conn
+            |> send_resp(400, msg)
+            |> halt()
+        end
+
+      _ ->
+        conn
+        |> send_resp(401, "Missing or invalid 'Bearer' token")
+        |> halt()
+    end
+  end
+
+  defp fetch_map_id(%{"map_id" => mid}) when is_binary(mid) and mid != "" do
+    {:ok, mid}
+  end
+
+  defp fetch_map_id(%{"slug" => slug}) when is_binary(slug) and slug != "" do
+    case WandererApp.Api.Map.get_map_by_slug(slug) do
+      {:ok, map} ->
+        {:ok, map.id}
+
+      {:error, _reason} ->
+        {:error, "No map found for slug=#{slug}"}
+    end
+  end
+
+  defp fetch_map_id(_), do: {:error, "Must provide either ?map_id=UUID or ?slug=SLUG"}
+end

lib/wanderer_app_web/live/maps/event_handlers/map_activity_event_handler.ex

@@ -18,15 +18,12 @@ defmodule WandererAppWeb.MapActivityEventHandler do
     do: MapCoreEventHandler.handle_server_event(event, socket)
 
   def handle_ui_event("show_activity", _, %{assigns: %{map_id: map_id}} = socket) do
-    Task.async(fn ->
-      {:ok, character_activity} = map_id |> get_character_activity()
-
-      {:character_activity, character_activity}
-    end)
-
     {:noreply,
      socket
-     |> assign(:show_activity?, true)}
+     |> assign(:show_activity?, true)
+     |> assign_async(:character_activity, fn ->
+       map_id |> get_character_activity()
+     end)}
   end
 
   def handle_ui_event("hide_activity", _, socket),
@@ -44,6 +41,6 @@ defmodule WandererAppWeb.MapActivityEventHandler do
         %{p | character: p.character |> MapEventHandler.map_ui_character_stat()}
       end)
 
-    {:ok, %{jumps: jumps}}
+    {:ok, %{character_activity: jumps}}
   end
 end

lib/wanderer_app_web/live/maps/event_handlers/map_characters_event_handler.ex

@@ -192,16 +192,15 @@ defmodule WandererAppWeb.MapCharactersEventHandler do
   end
 
   def handle_ui_event(
-      "toggle_follow",
-      %{"character-id" => clicked_char_id},
-      %{
-        assigns: %{
-          map_id: map_id,
-          current_user: current_user
-        }
-      } = socket
-    ) do
-
+        "toggle_follow",
+        %{"character-id" => clicked_char_id},
+        %{
+          assigns: %{
+            map_id: map_id,
+            current_user: current_user
+          }
+        } = socket
+      ) do
     {:ok, all_settings} = WandererApp.MapCharacterSettingsRepo.get_all_by_map(map_id)
 
     # Find and filter user's characters
@@ -217,7 +216,7 @@ defmodule WandererAppWeb.MapCharactersEventHandler do
     existing = Enum.find(my_settings, &(&1.character_id == clicked_char_id))
 
     {:ok, target_setting} =
-      if existing do
+      if not is_nil(existing) do
         {:ok, existing}
       else
         WandererApp.MapCharacterSettingsRepo.create(%{
@@ -276,7 +275,6 @@ defmodule WandererAppWeb.MapCharactersEventHandler do
     {:noreply, socket}
   end
 
-
   def handle_ui_event("hide_tracking", _, socket),
     do: {:noreply, socket |> assign(show_tracking?: false)}
 

lib/wanderer_app_web/live/maps/event_handlers/map_core_event_handler.ex

@@ -162,7 +162,7 @@ defmodule WandererAppWeb.MapCoreEventHandler do
         socket
       )
 
-    def handle_ui_event("toggle_follow_" <> character_id, _, socket),
+  def handle_ui_event("toggle_follow_" <> character_id, _, socket),
     do:
       MapCharactersEventHandler.handle_ui_event(
         "toggle_follow",
@@ -234,7 +234,7 @@ defmodule WandererAppWeb.MapCoreEventHandler do
          |> MapCharactersEventHandler.add_character()}
 
   def handle_ui_event(event, body, socket) do
-    Logger.warning(fn -> "unhandled map ui event: #{event} #{inspect(body)}" end)
+    Logger.warning(fn -> "unhandled map ui event: #{inspect(event)} #{inspect(body)}" end)
     {:noreply, socket}
   end
 

lib/wanderer_app_web/live/maps/event_handlers/map_systems_event_handler.ex

@@ -231,6 +231,7 @@ defmodule WandererAppWeb.MapSystemsEventHandler do
         "labels" -> :update_system_labels
         "locked" -> :update_system_locked
         "tag" -> :update_system_tag
+        "temporary_name" -> :update_system_temporary_name
         "status" -> :update_system_status
         _ -> nil
       end
@@ -242,6 +243,7 @@ defmodule WandererAppWeb.MapSystemsEventHandler do
         "labels" -> :labels
         "locked" -> :locked
         "tag" -> :tag
+        "temporary_name" -> :temporary_name
         "status" -> :status
         _ -> :none
       end

lib/wanderer_app_web/live/maps/map_event_handler.ex

@@ -50,6 +50,7 @@ defmodule WandererAppWeb.MapEventHandler do
     "update_system_labels",
     "update_system_locked",
     "update_system_tag",
+    "update_system_temporary_name",
     "update_system_status"
   ]
 
@@ -244,6 +245,7 @@ defmodule WandererAppWeb.MapEventHandler do
           locked: locked,
           tag: tag,
           labels: labels,
+          temporary_name: temporary_name,
           status: status,
           visible: visible
         } = _system,
@@ -269,6 +271,7 @@ defmodule WandererAppWeb.MapEventHandler do
       locked: locked,
       status: status,
       tag: tag,
+      temporary_name: temporary_name,
       visible: visible
     }
   end

lib/wanderer_app_web/live/maps/map_live.ex

@@ -77,13 +77,14 @@ defmodule WandererAppWeb.MapLive do
   def handle_info(:not_all_characters_tracked, %{assigns: %{map_slug: map_slug}} = socket),
     do:
       WandererAppWeb.MapEventHandler.handle_ui_event(
-        %{event: "add_character"},
+        "add_character",
         nil,
         socket
         |> put_flash(
           :error,
           "You should enable tracking for all characters that have access to this map first!"
         )
+        |> push_navigate(to: ~p"/tracking/#{map_slug}")
       )
 
   @impl true
@@ -101,17 +102,4 @@ defmodule WandererAppWeb.MapLive do
     socket
     |> assign(:active_page, :map)
   end
-
-  def character_item(assigns) do
-    ~H"""
-    <div class="flex items-center gap-3">
-      <div class="avatar">
-        <div class="rounded-md w-12 h-12">
-          <img src={member_icon_url(@character.eve_id)} alt={@character.name} />
-        </div>
-      </div>
-      <%= @character.name %>
-    </div>
-    """
-  end
 end

lib/wanderer_app_web/live/maps/map_live.html.heex

@@ -31,6 +31,29 @@
   </.link>
 </div>
 
+<.modal
+  :if={assigns |> Map.get(:show_activity?, false)}
+  id="map-activity-modal"
+  title="Activity of Characters"
+  class="!w-[500px]"
+  show
+  on_cancel={JS.push("hide_activity")}
+>
+  <.async_result :let={character_activity} assign={@character_activity}>
+    <:loading>Loading...</:loading>
+    <:failed :let={reason}><%= reason %></:failed>
+
+    <span :if={character_activity}>
+      <.live_component
+        module={WandererAppWeb.CharacterActivity}
+        id="character-activity"
+        activity={character_activity}
+        notify_to={self()}
+      />
+    </span>
+  </.async_result>
+</.modal>
+
 <.modal
   :if={assigns |> Map.get(:show_tracking?, false)}
   id="map-tracking-modal"

lib/wanderer_app_web/live/maps/maps_live.ex

@@ -127,6 +127,7 @@ defmodule WandererAppWeb.MapsLive do
     |> assign(:page_title, "Maps - Settings")
     |> assign(:map_slug, map_slug)
     |> assign(:map_id, map.id)
+    |> assign(:public_api_key, map.public_api_key)
     |> assign(:map, map)
     |> assign(
       export_settings: export_settings |> _get_export_map_data(),
@@ -179,6 +180,19 @@ defmodule WandererAppWeb.MapsLive do
     {:noreply, socket}
   end
 
+
+  def handle_event("generate-map-api-key", _params, socket) do
+    new_api_key = UUID.uuid4()
+
+    map = WandererApp.Api.Map.by_id!(socket.assigns.map_id)
+
+    {:ok, _updated_map} =
+      WandererApp.Api.Map.update_api_key(map, %{public_api_key: new_api_key})
+
+    {:noreply, assign(socket, public_api_key: new_api_key)}
+  end
+
+
   @impl true
   def handle_event(
         "live_select_change",
@@ -203,7 +217,10 @@ defmodule WandererAppWeb.MapsLive do
         socket.assigns.form,
         form
         |> Map.put("acls", form["acls"] || [])
-        |> Map.put("only_tracked_characters", form["only_tracked_characters"] || false)
+        |> Map.put(
+          "only_tracked_characters",
+          (form["only_tracked_characters"] || "false") |> String.to_existing_atom()
+        )
       )
 
     {:noreply, socket |> assign(form: form)}
@@ -593,7 +610,13 @@ defmodule WandererAppWeb.MapsLive do
         scope -> scope
       end
 
-    form = form |> Map.put("scope", scope)
+    form =
+      form
+      |> Map.put("scope", scope)
+      |> Map.put(
+        "only_tracked_characters",
+        (form["only_tracked_characters"] || "false") |> String.to_existing_atom()
+      )
 
     map
     |> WandererApp.Api.Map.update(form)
@@ -659,7 +682,12 @@ defmodule WandererAppWeb.MapsLive do
       ) do
     options =
       options_form
-      |> Map.take(["layout", "store_custom_labels", "restrict_offline_showing"])
+      |> Map.take([
+        "layout",
+        "store_custom_labels",
+        "show_temp_system_name",
+        "restrict_offline_showing"
+      ])
 
     {:ok, updated_map} = WandererApp.MapRepo.update_options(map, options)
 

lib/wanderer_app_web/live/maps/maps_live.html.heex

@@ -313,6 +313,32 @@
                   style="width: 146px; left: 0px;"
                 >
                 </li>
+                <li
+                  :if={not WandererApp.Env.public_api_disabled?()}
+                  class={[
+                    "p-unselectable-text",
+                    classes("p-tabview-selected p-highlight": @active_settings_tab == "public_api")
+                  ]}
+                  role="presentation"
+                  data-pc-name=""
+                  data-pc-section="header"
+                >
+                  <a
+                    role="tab"
+                    class="p-tabview-nav-link flex p-[10px]"
+                    tabindex="-1"
+                    aria-controls="pr_id_335_content"
+                    aria-selected="false"
+                    aria-disabled="false"
+                    data-pc-section="headeraction"
+                    phx-click="change_settings_tab"
+                    phx-value-tab="public_api"
+                  >
+                    <span class="p-tabview-title" data-pc-section="headertitle">
+                      <.icon name="hero-globe-alt-solid" class="w-4 h-4" />&nbsp;Public Api
+                    </span>
+                  </a>
+                </li>
               </ul>
             </div>
           </div>
@@ -345,6 +371,11 @@
                     field={f[:store_custom_labels]}
                     label="Store system custom labels"
                   />
+                  <.input
+                    type="checkbox"
+                    field={f[:show_temp_system_name]}
+                    label="Allow Temporary System Names"
+                  />
                   <.input
                     type="checkbox"
                     field={f[:restrict_offline_showing]}
@@ -377,6 +408,52 @@
                 </.button>
               </div>
 
+              <div :if={@active_settings_tab == "public_api"and not WandererApp.Env.public_api_disabled?()} class="p-6">
+                <h2 class="text-lg font-semibold mb-4">Public API</h2>
+                <div class="flex flex-col gap-3 items-start w-full">
+                  <div>
+                    <input
+                      :if={not is_nil(@public_api_key)}
+                      class="input input-bordered text-sm truncate bg-neutral-800 text-white w-[350px]"
+                      readonly
+                      type="text"
+                      value={@public_api_key}
+                    />
+                    <input
+                      :if={is_nil(@public_api_key)}
+                      class="input input-bordered text-sm truncate bg-neutral-800 text-gray-400 w-[350px]"
+                      readonly
+                      type="text"
+                      placeholder="No Public API Key yet"
+                    />
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <.button
+                      class="btn btn-primary rounded-md"
+                      phx-click="generate-map-api-key"
+                    >
+                      Generate
+                    </.button>
+                  <.button
+                    phx-hook="CopyToClipboard"
+                    id="copy-map-api-key"
+                    data-url={@public_api_key}
+                    disabled={is_nil(@public_api_key)}
+                    class={
+                      if is_nil(@public_api_key) do
+                        "copy-link btn rounded-md transition-colors duration-300
+                        bg-gray-500 hover:bg-gray-500 text-gray-300 cursor-not-allowed"
+                      else
+                        "copy-link btn rounded-md transition-colors duration-300
+                        bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"
+                      end
+                    }
+                  >
+                    Copy
+                  </.button>
+                  </div>
+                </div>
+              </div>
               <div :if={@active_settings_tab == "balance"}>
                 <div class="stats w-full bg-primary text-primary-content">
                   <div class="stat">

lib/wanderer_app_web/router.ex

@@ -21,9 +21,10 @@ defmodule WandererAppWeb.Router do
   @frame_src if(@code_reloading, do: ~w('self'), else: ~w())
   @style_src ~w('self' 'unsafe-inline' https://fonts.googleapis.com)
   @img_src ~w('self' data: https://images.evetech.net https://web.ccpgamescdn.com https://images.ctfassets.net https://w.appzi.io)
-  @font_src ~w('self' data: https://web.ccpgamescdn.com https://w.appzi.io)
+  @font_src ~w('self' https://fonts.gstatic.com data: https://web.ccpgamescdn.com https://w.appzi.io )
   @script_src ~w('self' )
 
+
   pipeline :admin_bauth do
     plug :admin_basic_auth
   end
@@ -106,8 +107,38 @@ defmodule WandererAppWeb.Router do
 
   pipeline :api do
     plug(:accepts, ["json"])
+    plug WandererAppWeb.Plugs.CheckApiDisabled
   end
 
+  pipeline :api_map do
+    plug WandererAppWeb.Plugs.CheckMapApiKey
+  end
+
+scope "/api/map", WandererAppWeb do
+  pipe_through [:api_map]
+  pipe_through [:api]
+
+  # GET /api/map/systems?map_id=... or ?slug=...
+  get "/systems", APIController, :list_systems
+
+  # GET /api/map/system-static-info?id=... plus either map_id=... or slug=...
+  get "/system-static-info", APIController, :show_system_static
+
+  # GET /api/map/system?id=... plus either map_id=... or slug=...
+  get "/system", APIController, :show_system
+
+  # GET /api/map/characters?map_id=... or slug=...
+  get "/characters", APIController, :tracked_characters_with_info
+end
+
+scope "/api/common", WandererAppWeb do
+  pipe_through [:api]
+
+  # GET /api/common/system-static-info?id=...
+  get "/system-static-info", APIController, :show_system_static
+
+end
+
   scope "/", WandererAppWeb do
     pipe_through [:browser, :blog, :redirect_if_user_is_authenticated]
 

mix.exs

@@ -2,7 +2,8 @@ defmodule WandererApp.MixProject do
   use Mix.Project
 
   @source_url "https://github.com/wanderer-industries/wanderer"
-  @version "1.32.2"
+  
+  @version "1.37.9"
 
   def project do
     [

priv/posts/2025/01-05-map-public-api.md

@@ -0,0 +1,209 @@
+%{
+  title: "User Guide: Public API Endpoints for Map Data",
+  author: "Wanderer Team",
+  cover_image_uri: "/images/news/01-05-map-public-api/generate-key.png",
+  tags: ~w(map public-api guide interface),
+  description: "Learn how to use the Wanderer public API endpoints to retrieve system and character data from your map. This guide covers available endpoints, request examples, and sample responses."
+}
+
+---
+
+## Introduction
+
+As part of the Wanderer platform, a public API has been introduced to help users programmatically retrieve map data, such as system information and character tracking details. This guide explains how to use these endpoints, how to authenticate with the API, and what data to expect in the responses.
+
+**Important:** To use these endpoints, you need a valid API key for the map in question. You can generate or copy this key from within the **Map Settings** modal in the app:
+
+![Generate Map API Key](/images/news/01-05-map-public-api/generate-key.png "Generate Map API Key")
+
+---
+
+## Authentication
+
+Each request to the Wanderer APIs that being with /api/map must include a valid API key in the `Authorization` header. The format is:
+
+    Authorization: Bearer <YOUR_MAP_API_KEY>
+
+If the API key is missing or incorrect, you’ll receive a `401 Unauthorized` response.
+
+No api key is required for routes that being with /api/common
+
+---
+
+## Endpoints Overview
+
+### 1. List Systems
+
+    GET /api/map/systems?map_id=<UUID>
+    GET /api/map/systems?slug=<map-slug>
+
+- **Description:** Retrieves a list of systems associated with the specified map (by `map_id` or `slug`).
+- **Authentication:** Required via `Authorization` header.
+- **Parameters:**
+  - `map_id` (optional if `slug` is provided) — the UUID of the map.
+  - `slug` (optional if `map_id` is provided) — the slug identifier of the map.
+  - `all=true` (optional) — if set, returns *all* systems instead of only "visible" systems.
+
+#### Example Request
+```
+    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/map/systems?slug=some-slug"
+```
+#### Example Response
+```
+    {
+      "data": [
+        {
+          "id": "<REDACTED_ID>",
+          "name": "<REDACTED_NAME>",
+          "status": 0,
+          "tag": null,
+          "visible": false,
+          "description": null,
+          "labels": "<REDACTED_JSON>",
+          "inserted_at": "2025-01-01T13:38:42.875843Z",
+          "updated_at": "2025-01-01T13:40:16.750234Z",
+          "locked": false,
+          "solar_system_id": <REDACTED_NUMBER>,
+          "map_id": "<REDACTED_ID>",
+          "custom_name": null,
+          "position_x": 1125,
+          "position_y": -285
+        },
+        ...
+      ]
+    }
+```
+---
+
+### 2. Show Single System
+
+    GET /api/map/system?id=<SOLAR_SYSTEM_ID>&map_id=<UUID>
+    GET /api/map/system?id=<SOLAR_SYSTEM_ID>&slug=<map-slug>
+
+- **Description:** Retrieves information for a specific system on the specified map. You must provide:
+  - `id` (the `solar_system_id`).
+  - Either `map_id` or `slug`.
+- **Authentication:** Required via `Authorization` header.
+
+#### Example Request
+```
+    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/map/system?id=<REDACTED_NUMBER>&slug=<REDACTED_SLUG>"
+```
+#### Example Response
+```
+    {
+      "data": {
+        "id": "<REDACTED_ID>",
+        "name": "<REDACTED_NAME>",
+        "status": 0,
+        "tag": null,
+        "visible": false,
+        "description": null,
+        "labels": "<REDACTED_JSON>",
+        "inserted_at": "2025-01-03T06:30:02.069090Z",
+        "updated_at": "2025-01-03T07:47:07.471051Z",
+        "locked": false,
+        "solar_system_id": <REDACTED_NUMBER>,
+        "map_id": "<REDACTED_ID>",
+        "custom_name": null,
+        "position_x": 1005,
+        "position_y": 765
+      }
+    }
+```
+---
+
+### 2. Show Single System Static Info
+
+    GET /api/common/static-system-info?id=<SOLAR_SYSTEM_ID>
+
+- **Description:** Retrieves the static information for a specific system.
+
+- **Authentication:** No API token required
+
+#### Example Request
+```
+    curl "https://wanderer.example.com/api/common/static-system-info?id=31002229
+```
+#### Example Response
+```
+{
+  "data": {
+    "solar_system_id": 31002229,
+    "triglavian_invasion_status": "Normal",
+    "solar_system_name": "J132946",
+    "system_class": 5,
+    "region_id": 11000028,
+    "constellation_id": 21000278,
+    "solar_system_name_lc": "j132946",
+    "constellation_name": "E-C00278",
+    "region_name": "E-R00028",
+    "security": "-1.0",
+    "type_description": "Class 5",
+    "class_title": "C5",
+    "is_shattered": false,
+    "effect_name": null,
+    "effect_power": 5,
+    "statics": [
+      "H296"
+    ],
+    "wandering": [
+      "D792",
+      "C140",
+      "Z142"
+    ],
+    "sun_type_id": 38
+  }
+}
+
+```
+---
+
+### 3. List Tracked Characters
+
+    GET /api/map/characters?map_id=<UUID>
+    GET /api/map/characters?slug=<map-slug>
+
+- **Description:** Retrieves a list of tracked characters for the specified map (by `map_id` or `slug`), including metadata such as corporation/alliance details.
+- **Authentication:** Required via `Authorization` header.
+
+#### Example Request
+```
+    curl -H "Authorization: Bearer <REDACTED_TOKEN>" "https://wanderer.example.com/api/map/characters?slug=some-slug"
+```
+#### Example Response
+```
+    {
+      "data": [
+        {
+          "id": "<REDACTED_ID>",
+          "character": {
+            "id": "<REDACTED_ID>",
+            "name": "<REDACTED_NAME>",
+            "inserted_at": "2025-01-01T05:24:18.461721Z",
+            "updated_at": "2025-01-03T07:45:52.294052Z",
+            "alliance_id": "<REDACTED>",
+            "alliance_name": "<REDACTED>",
+            "alliance_ticker": "<REDACTED>",
+            "corporation_id": "<REDACTED>",
+            "corporation_name": "<REDACTED>",
+            "corporation_ticker": "<REDACTED>",
+            "eve_id": "<REDACTED>"
+          },
+          "tracked": true,
+          "map_id": "<REDACTED_ID>"
+        },
+        ...
+      ]
+    }
+```
+---
+
+## Conclusion
+
+Using these APIs, you can programmatically retrieve system and character information from your map. Whether you’re building a custom analytics dashboard, a corp management tool, or just want to explore data outside the standard UI, these endpoints provide a straightforward way to fetch up-to-date map details.
+
+For questions or additional support, please reach out to the Wanderer Team.
+
+Fly safe,
+WANDERER TEAM

priv/repo/migrations/20250103005559_add_temporary_name.exs

@@ -0,0 +1,21 @@
+defmodule WandererApp.Repo.Migrations.AddTemporaryName do
+  @moduledoc """
+  Updates resources based on their most recent snapshots.
+
+  This file was autogenerated with `mix ash_postgres.generate_migrations`
+  """
+
+  use Ecto.Migration
+
+  def up do
+    alter table(:map_system_v1) do
+      add :temporary_name, :text
+    end
+  end
+
+  def down do
+    alter table(:map_system_v1) do
+      remove :temporary_name
+    end
+  end
+end

priv/repo/migrations/20250103121539_add_public_api_key.exs

@@ -0,0 +1,21 @@
+defmodule WandererApp.Repo.Migrations.AddPublicApiKey do
+  @moduledoc """
+  Updates resources based on their most recent snapshots.
+
+  This file was autogenerated with `mix ash_postgres.generate_migrations`
+  """
+
+  use Ecto.Migration
+
+  def up do
+    alter table(:maps_v1) do
+      add :public_api_key, :text
+    end
+  end
+
+  def down do
+    alter table(:maps_v1) do
+      remove :public_api_key
+    end
+  end
+end