added tooltip on how to re-route connectors between items

packages/fossflow-lib/src/components/ConnectorHintTooltip/ConnectorHintTooltip.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { Box, IconButton, Paper, Typography, useTheme } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
+
+const STORAGE_KEY = 'fossflow_connector_hint_dismissed';
+
+interface Props {
+  toolMenuRef?: React.RefObject<HTMLElement>;
+}
+
+export const ConnectorHintTooltip = ({ toolMenuRef }: Props) => {
+  const theme = useTheme();
+  const [isDismissed, setIsDismissed] = useState(true);
+  const [position, setPosition] = useState({ top: 16, right: 16 });
+
+  useEffect(() => {
+    // Check if the hint has been dismissed before
+    const dismissed = localStorage.getItem(STORAGE_KEY);
+    if (dismissed !== 'true') {
+      setIsDismissed(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Calculate position based on toolbar
+    if (toolMenuRef?.current) {
+      const toolMenuRect = toolMenuRef.current.getBoundingClientRect();
+      // Position tooltip below the toolbar with some spacing
+      setPosition({
+        top: toolMenuRect.bottom + 16,
+        right: 16
+      });
+    } else {
+      // Fallback position if no toolbar ref
+      const appPadding = theme.customVars?.appPadding || { x: 16, y: 16 };
+      setPosition({
+        top: appPadding.y + 500, // Approximate toolbar height
+        right: appPadding.x
+      });
+    }
+  }, [toolMenuRef, theme]);
+
+  const handleDismiss = () => {
+    setIsDismissed(true);
+    localStorage.setItem(STORAGE_KEY, 'true');
+  };
+
+  if (isDismissed) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: position.top,
+        right: position.right,
+        zIndex: 1300, // Above most UI elements
+        maxWidth: 320
+      }}
+    >
+      <Paper
+        elevation={4}
+        sx={{
+          p: 2,
+          pr: 5,
+          backgroundColor: 'background.paper',
+          borderLeft: '4px solid',
+          borderLeftColor: 'primary.main'
+        }}
+      >
+        <IconButton
+          size="small"
+          onClick={handleDismiss}
+          sx={{
+            position: 'absolute',
+            right: 4,
+            top: 4
+          }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+        
+        <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}>
+          Tip: Rerouting Connectors
+        </Typography>
+        
+        <Typography variant="body2" color="text.secondary">
+          To reroute a connector track, <strong>right-click</strong> on any point 
+          along the connector line and drag to create or move anchor points.
+        </Typography>
+      </Paper>
+    </Box>
+  );
+};

packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx

@@ -18,6 +18,7 @@ import { useModelStore } from 'src/stores/modelStore';
 import { ExportImageDialog } from '../ExportImageDialog/ExportImageDialog';
 import { HelpDialog } from '../HelpDialog/HelpDialog';
 import { SettingsDialog } from '../SettingsDialog/SettingsDialog';
+import { ConnectorHintTooltip } from '../ConnectorHintTooltip/ConnectorHintTooltip';
 
 const ToolsEnum = {
   MAIN_MENU: 'MAIN_MENU',
@@ -52,6 +53,7 @@ const getEditorModeMapping = (editorMode: keyof typeof EditorModeEnum) => {
 export const UiOverlay = () => {
   const theme = useTheme();
   const contextMenuAnchorRef = useRef();
+  const toolMenuRef = useRef<HTMLDivElement>(null);
   const { appPadding } = theme.customVars;
   const spacing = useCallback(
     (multiplier: number) => {
@@ -125,6 +127,7 @@ export const UiOverlay = () => {
 
         {availableTools.includes('TOOL_MENU') && (
           <Box
+            ref={toolMenuRef}
             sx={{
               position: 'absolute',
               transform: 'translateX(-100%)'
@@ -240,6 +243,9 @@ export const UiOverlay = () => {
 
       {dialog === DialogTypeEnum.SETTINGS && <SettingsDialog />}
 
+      {/* Show connector hint tooltip only in editable mode */}
+      {editorMode === EditorModeEnum.EDITABLE && <ConnectorHintTooltip toolMenuRef={toolMenuRef} />}
+
       <SceneLayer>
         <Box ref={contextMenuAnchorRef} />
         <ContextMenuManager anchorEl={contextMenuAnchorRef.current} />