Initial commit

src/components/App/App.tsx

@@ -0,0 +1,68 @@
+/**
+ * App Component
+ *
+ * Main application layout
+ */
+
+import { useEffect } from 'react';
+import { PedigreeCanvas } from '../PedigreeCanvas/PedigreeCanvas';
+import { Toolbar } from '../Toolbar/Toolbar';
+import { PropertyPanel } from '../PropertyPanel/PropertyPanel';
+import { RelationshipPanel } from '../RelationshipPanel/RelationshipPanel';
+import { FilePanel } from '../FilePanel/FilePanel';
+import { usePedigreeStore, useTemporalStore } from '@/store/pedigreeStore';
+import styles from './App.module.css';
+
+export function App() {
+  const { clearSelection, selectedRelationshipId } = usePedigreeStore();
+  const temporal = useTemporalStore();
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Undo: Ctrl/Cmd + Z
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        temporal.getState().undo();
+      }
+
+      // Redo: Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y
+      if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+        e.preventDefault();
+        temporal.getState().redo();
+      }
+
+      // Escape: Clear selection
+      if (e.key === 'Escape') {
+        clearSelection();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [clearSelection, temporal]);
+
+  return (
+    <div className={styles.app}>
+      <header className={styles.header}>
+        <h1 className={styles.title}>Pedigree Draw</h1>
+        <span className={styles.subtitle}>Professional Pedigree Chart Editor</span>
+      </header>
+
+      <Toolbar />
+
+      <main className={styles.main}>
+        <FilePanel />
+        <div className={styles.canvasArea}>
+          <PedigreeCanvas />
+        </div>
+        {selectedRelationshipId ? <RelationshipPanel /> : <PropertyPanel />}
+      </main>
+
+      <footer className={styles.footer}>
+        <span>Pedigree Draw - For genetic counselors and bioinformatics professionals</span>
+        <span>NSGC Standard Symbols</span>
+      </footer>
+    </div>
+  );
+}