feat(web): add hierarchical/tree layout to graph (task-7)

- Create hierarchical layout algorithm in packages/algorithms/src/layout/
- Implement Reingold-Tilford inspired tree layout with level-based positioning
- Add useGraphLayout hook for applying different graph layouts
- Create LayoutSelector component for layout selection UI
- Add nodePositions prop to OptimizedForceGraphVisualization
- Integrate layout selector into graph page with enableSimulation toggle
- Support hierarchical, circular, bipartite, and timeline layouts

Technical details:
- Parent-child relationship detection for AUTHORSHIP, AFFILIATION, REFERENCE edges
- Root node selection (automatic or manual)
- Level-based horizontal positioning with vertical sibling spacing
- Fixed node positions (fx, fy) for static layouts
- Force simulation disabled when using static layouts

Follows constitution principles:
- No any types, proper TypeScript strict mode
- Atomic commit for single task
- Export from algorithms package via index.ts
- Named exports and constants to prevent unstable context

Author: Mearman

apps/web/src/components/graph/LayoutSelector.tsx

@@ -0,0 +1,143 @@
+/**
+ * Layout Selector Component
+ *
+ * Provides UI for selecting different graph layout algorithms:
+ * - Force-directed (default)
+ * - Hierarchical/tree layout
+ * - Circular layout
+ * - Bipartite layout (two-column)
+ * - Timeline layout
+ *
+ * @module components/graph/LayoutSelector
+ */
+
+import type { GraphEdge, GraphNode } from '@bibgraph/types';
+import { SegmentedControl, Stack } from '@mantine/core';
+import { IconChartDots, IconGitBranch, IconHierarchy, IconRoute,IconTimeline } from '@tabler/icons-react';
+
+import { ICON_SIZE } from '@/config/style-constants';
+import type { GraphLayoutType } from '@/hooks/useGraphLayout';
+
+/**
+ * Layout options with metadata
+ */
+export interface LayoutOption {
+  description: string;
+  icon: React.ReactNode;
+  label: string;
+  value: GraphLayoutType;
+}
+
+/**
+ * Layout options configuration
+ */
+export const LAYOUT_OPTIONS: LayoutOption[] = [
+  {
+    description: 'Force-directed layout (physics simulation)',
+    icon: <IconChartDots size={ICON_SIZE.SM} />,
+    label: 'Force',
+    value: 'force',
+  },
+  {
+    description: 'Hierarchical tree layout',
+    icon: <IconHierarchy size={ICON_SIZE.SM} />,
+    label: 'Tree',
+    value: 'hierarchical',
+  },
+  {
+    description: 'Circular arrangement',
+    icon: <IconRoute size={ICON_SIZE.SM} />,
+    label: 'Circle',
+    value: 'circular',
+  },
+  {
+    description: 'Two-column bipartite layout',
+    icon: <IconGitBranch size={ICON_SIZE.SM} />,
+    label: 'Split',
+    value: 'bipartite',
+  },
+  {
+    description: 'Timeline-based layout',
+    icon: <IconTimeline size={ICON_SIZE.SM} />,
+    label: 'Timeline',
+    value: 'timeline',
+  },
+];
+
+/**
+ * Empty arrays (defined outside component to prevent re-renders)
+ */
+const EMPTY_NODES: GraphNode[] = [];
+const EMPTY_EDGES: GraphEdge[] = [];
+
+/**
+ * Layout selector component props
+ */
+export interface LayoutSelectorProps {
+  /** Callback when layout changes */
+  onChange: (layout: GraphLayoutType) => void;
+  /** Edges for layout-specific options */
+  edges?: GraphEdge[];
+  /** Nodes for layout-specific options */
+  nodes?: GraphNode[];
+  /** Current layout type */
+  value: GraphLayoutType;
+}
+
+/**
+ * Layout selector UI component
+ *
+ * @param props
+ * @param props.edges
+ * @param props.nodes
+ * @param props.onChange
+ * @param props.value
+ */
+export const LayoutSelector: React.FC<LayoutSelectorProps> = (props) => {
+  const { edges = EMPTY_EDGES, nodes = EMPTY_NODES, onChange, value } = props;
+  // Only show layouts that make sense for the current graph
+  const availableLayouts = LAYOUT_OPTIONS.filter((option) => {
+    // Force is always available
+    if (option.value === 'force') {
+      return true;
+    }
+
+    // Hierarchical requires parent-child relationships
+    if (option.value === 'hierarchical') {
+      return edges.some((e) => e.type === 'AUTHORSHIP' || e.type === 'AFFILIATION' || e.type === 'REFERENCE');
+    }
+
+    // Bipartite requires a way to split nodes
+    if (option.value === 'bipartite') {
+      return nodes.some((n) => n.entityType === 'authors' || n.entityType === 'institutions');
+    }
+
+    // Timeline requires nodes with publication dates
+    if (option.value === 'timeline') {
+      return nodes.some((n) => 'publication_year' in n);
+    }
+
+    // Circular always works
+    return true;
+  });
+
+  const data = availableLayouts.map((option) => ({
+    label: option.label,
+    value: option.value,
+  }));
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  return (
+    <Stack gap="xs">
+      <SegmentedControl
+        data={data}
+        size="xs"
+        value={value}
+        onChange={(newValue) => onChange(newValue as GraphLayoutType)}
+      />
+    </Stack>
+  );
+};

apps/web/src/components/graph/OptimizedForceGraphVisualization.tsx

@@ -117,6 +117,8 @@ export interface OptimizedForceGraphVisualizationProps {
   onBackgroundClick?: () => void;
   /** Enable/disable force simulation */
   enableSimulation?: boolean;
+  /** Fixed node positions for static layouts (nodeId -> {x, y}) */
+  nodePositions?: Map<string, { x: number; y: number }>;
   /** Seed for deterministic initial positions (defaults to 42 for reproducibility) */
   seed?: number;
   /** Callback when graph methods become available (for external control like zoomToFit) */
@@ -160,6 +162,7 @@ export const OptimizedForceGraphVisualization = ({
   onNodeHover,
   onBackgroundClick,
   enableSimulation = true,
+  nodePositions,
   seed,
   onGraphReady,
   enableOptimizations = true,
@@ -302,15 +305,21 @@ export const OptimizedForceGraphVisualization = ({
     });
 
     // Transform nodes for force graph
-    const transformedNodes: ForceGraphNode[] = deduplicatedNodes.map(node => ({
-      id: node.id,
-      entityType: node.entityType,
-      label: node.label || node.id,
-      entityId: node.id,
-      x: node.x ?? (random() - 0.5) * 200,
-      y: node.y ?? (random() - 0.5) * 200,
-      originalNode: node,
-    }));
+    const transformedNodes: ForceGraphNode[] = deduplicatedNodes.map(node => {
+      const fixedPosition = nodePositions?.get(node.id);
+      return {
+        id: node.id,
+        entityType: node.entityType,
+        label: node.label || node.id,
+        entityId: node.id,
+        x: node.x ?? (random() - 0.5) * 200,
+        y: node.y ?? (random() - 0.5) * 200,
+        // Use fixed positions if provided (for static layouts)
+        fx: fixedPosition?.x,
+        fy: fixedPosition?.y,
+        originalNode: node,
+      };
+    });
 
     // Transform edges, only include edges where both endpoints are visible
     const visibleNodeIds = new Set(transformedNodes.map(n => n.id));
@@ -329,7 +338,7 @@ export const OptimizedForceGraphVisualization = ({
       }));
 
     return { nodes: transformedNodes, links: transformedEdges };
-  }, [renderNodes, edges, seed]);
+  }, [renderNodes, edges, seed, nodePositions]);
 
   // Node highlighting logic
   const isNodeHighlighted = useCallback((nodeId: string): boolean => {