\n {data.photoUrl && 
}\n
\n );\n}\n```\n\n## Built-in Components\n\n### BasicPersonCard\n\nSimple card showing just the name:\n\n```tsx\nimport { BasicPersonCard } from '@alexbrand09/famtreejs';\n```\n\n### DetailedPersonCard\n\nCard with photo, name, and dates:\n\n```tsx\nimport { DetailedPersonCard } from '@alexbrand09/famtreejs';\n\n// Data should include: name, birthDate?, deathDate?, photoUrl?\n```\n\n## Ref API\n\nAccess imperative methods via ref:\n\n```tsx\nimport { useRef } from 'react';\nimport { FamilyTree } from '@alexbrand09/famtreejs';\nimport type { FamilyTreeHandle } from '@alexbrand09/famtreejs';\n\nfunction App() {\n const treeRef = useRef{data.name}
\n {data.birthYear && Born: {data.birthYear}
}\n \n \n Zoom: {Math.round(zoomLevel * 100)}%\n \n \n
\n );\n}\n```\n\n## Theming\n\n### CSS Variables\n\nCustomize the appearance using CSS variables:\n\n```css\n.family-tree {\n --ft-line-color: #333;\n --ft-line-width: 2px;\n --ft-node-background: #fff;\n --ft-node-border: #ddd;\n --ft-node-text: #333;\n --ft-node-shadow: rgba(0, 0, 0, 0.1);\n --ft-node-hover-border: #999;\n --ft-node-selected-border: #0066cc;\n --ft-node-selected-shadow: rgba(0, 102, 204, 0.3);\n}\n```\n\n## Keyboard Navigation\n\n| Key | Action |\n|-----|--------|\n| Arrow keys | Navigate between nodes |\n| Enter / Space | Select focused node |\n| E | Toggle expand/collapse on focused node |\n| + / - | Zoom in / out |\n| 0 | Fit to view |\n| Home / End | Jump to first / last node |\n\n## Accessibility\n\n- ARIA tree structure with `role=\"tree\"` and `role=\"treeitem\"`\n- `aria-selected`, `aria-expanded` states\n- Visible focus indicators\n- Respects `prefers-reduced-motion` media query\n- WCAG AA compliant contrast ratios\n\n## Browser Support\n\n- Modern browsers (Chrome, Firefox, Safari, Edge)\n- React 18+\n\n## License\n\nMIT\n","readmeFilename":"README.md"}