Story Canvas: fit-to-screen, call arrows, character filter, role tinting, legend, route canvas button

- Fit to screen: F shortcut + Fit button (bottom-left) fits all visible blocks into view
- Call vs jump arrows: hollow circle at source for call links, matching Route Canvas convention
- Character filter: dropdown in filter panel dims all blocks not containing selected character's dialogue
- Root/leaf role tinting: green border+bg for story start blocks, amber dashed border+bg for story end blocks
- Legend: collapsible panel (bottom-left) explaining arrows, block roles, and block types
- Open in Route Canvas: hover button on each block header navigates to Route Canvas tab
- Fix: TDZ crash on project open caused by fitToScreen useCallback referencing visibleBlocks before its declaration
- Link.type field added to carry jump/call distinction through to block-level connections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ghirpara

App.tsx

@@ -2743,6 +2743,7 @@ const App: React.FC = () => {
         centerOnBlockRequest={centerOnBlockRequest} flashBlockRequest={flashBlockRequest}
         hoverHighlightIds={hoverHighlightIds} transform={storyCanvasTransform} onTransformChange={setStoryCanvasTransform}
         onCreateBlock={handleCreateBlockFromCanvas} onAddStickyNote={addStickyNote} mouseGestures={appSettings.mouseGestures}
+        onOpenRouteCanvas={() => handleOpenStaticTab('route-canvas')}
       />;
     }
     if (tab.type === 'route-canvas') {

components/CodeBlock.tsx

@@ -7,6 +7,7 @@ interface CodeBlockProps {
   updateBlock: (id: string, newBlockData: Partial<Block>) => void;
   deleteBlock: (id: string) => void;
   onOpenEditor: (id: string) => void;
+  onOpenRouteCanvas?: () => void;
   isSelected: boolean;
   isDragging: boolean;
   isRoot: boolean;
@@ -50,12 +51,13 @@ const BLOCK_COLORS: Record<string, { bg: string, header: string, border: string,
     rose: { bg: 'bg-rose-50 dark:bg-rose-900/20', header: 'bg-rose-100 dark:bg-rose-900/50', border: 'border-rose-200 dark:border-rose-800', dot: '#fda4af' },
 };
 
-const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({ 
-  block, 
-  analysisResult, 
-  updateBlock, 
-  deleteBlock, 
+const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({
+  block,
+  analysisResult,
+  updateBlock,
+  deleteBlock,
   onOpenEditor,
+  onOpenRouteCanvas,
   isSelected,
   isDragging,
   isRoot,
@@ -167,6 +169,10 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({
       borderClass = 'border-red-500/50 dark:border-red-400/50';
   } else if (isScreenBlock) {
       borderClass = 'border-teal-500/50 dark:border-teal-400/50';
+  } else if (isRoot) {
+      borderClass = 'border-green-400 dark:border-green-500';
+  } else if (isLeaf) {
+      borderClass = 'border-dashed border-amber-400 dark:border-amber-500';
   } else {
       borderClass = defaultColor.border;
   }
@@ -190,7 +196,13 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({
       headerClass = defaultColor.header;
   }
 
-  const bgClass = customColor ? customColor.bg : defaultColor.bg;
+  const bgClass = customColor
+    ? customColor.bg
+    : isRoot && !isConfigBlock && !isScreenBlock
+    ? 'bg-green-50 dark:bg-green-900/10'
+    : isLeaf && !isConfigBlock && !isScreenBlock
+    ? 'bg-amber-50 dark:bg-amber-900/10'
+    : defaultColor.bg;
 
   const handleColorSelect = (colorKey: string) => {
       updateBlock(block.id, { color: colorKey === 'default' ? undefined : colorKey });
@@ -201,7 +213,7 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({
     <div
       ref={ref}
       data-block-id={block.id}
-      className={`code-block-wrapper absolute ${bgClass} rounded-lg shadow-2xl border-2 ${borderClass} ${shadowClass} flex flex-col transition-colors duration-200 ${isDimmed ? 'opacity-30' : ''} ${isFlashing ? 'flash-block' : isHoverHighlighted ? 'pulse-block heatmap-highlight' : ''}`}
+      className={`code-block-wrapper group absolute ${bgClass} rounded-lg shadow-2xl border-2 ${borderClass} ${shadowClass} flex flex-col transition-colors duration-200 ${isDimmed ? 'opacity-30' : ''} ${isFlashing ? 'flash-block' : isHoverHighlighted ? 'pulse-block heatmap-highlight' : ''}`}
       style={{
         left: block.position.x,
         top: block.position.y,
@@ -261,6 +273,18 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({
                )}
            </div>
            <button onClick={() => onOpenEditor(block.id)} className="p-1 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" title="Open in Tab"><svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3.586L3.293 6.707A1 1 0 013 6V3zm3.146 2.146a.5.5 0 01.708 0l2.5 2.5a.5.5 0 010 .708l-2.5 2.5a.5.5 0 01-.708-.708L7.793 8 6.146 6.354a.5.5 0 010-.708z" clipRule="evenodd" /></svg></button>
+           {onOpenRouteCanvas && (
+             <button
+               onClick={(e) => { e.stopPropagation(); onOpenRouteCanvas(); }}
+               onPointerDown={e => e.stopPropagation()}
+               className="p-1 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity"
+               title="Open in Route Canvas"
+             >
+               <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                 <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+               </svg>
+             </button>
+           )}
            <button onClick={() => deleteBlock(block.id)} className="p-1 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" title="Delete Block"><svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg></button>
         </div>
       </div>