Edit UI for people and life events; existing-person picker in family view

Person detail: an Edit form for name + gender + living status + privacy, and inline edit of each life event (type + structured date). Family view: the add-relative buttons now search existing people (link the real person) or create new — preventing duplicate spouses/parents — and adding a child to someone with one spouse links both parents.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>

CLAUDE.md

@@ -19,6 +19,7 @@ These are product invariants, not preferences. Do not violate them, and flag any
 5. **Sources are first-class.** Don't model citations as free-text afterthoughts. A `Source` is a reusable entity; a `Citation` links it to a specific fact.
 6. **Only legal data sources.** Ship scrapers/connectors only for permissible sources (FamilySearch API, Find A Grave, WikiTree, BLM/GLO, USGS, public-domain newspapers, public county records). Never add connectors for paywalled/terms-prohibited sites (Ancestry, MyHeritage, 23andMe).
 7. **Everything is configurable via environment.** Auth, mail, object storage, database, model providers, scrapers — all twelve-factor. No hard-coded endpoints or keys.
+8. **Full CRUD on every object.** Every stored entity (person, name, event, relationship, source, citation, media, tree, …) must support create, read, **update**, and delete — in the API *and* the UI. Historical research is constant correction and new information, so nothing is write-once. Any new feature or data type ships with all four operations; an entity you can create but not edit is a bug.
 
 ## Tech stack
 

backend/app/api/v1/events.py

@@ -3,7 +3,7 @@ import uuid
 from fastapi import APIRouter, status
 
 from app.api.deps import CurrentUser, SessionDep
-from app.schemas.event import EventCreate, EventRead
+from app.schemas.event import EventCreate, EventRead, EventUpdate
 from app.services import event_service, tree_service
 
 router = APIRouter(prefix="/trees", tags=["events"])
@@ -40,6 +40,25 @@ async def list_person_events(
     return [EventRead.model_validate(e) for e in events]
 
 
+@router.patch("/{tree_id}/events/{event_id}", response_model=EventRead)
+async def update_event(
+    tree_id: uuid.UUID,
+    event_id: uuid.UUID,
+    data: EventUpdate,
+    session: SessionDep,
+    current: CurrentUser,
+) -> EventRead:
+    tree = await tree_service.get_tree(session, viewer_id=current.id, tree_id=tree_id)
+    event = await event_service.update_event(
+        session,
+        actor=current,
+        tree=tree,
+        event_id=event_id,
+        changes=data.model_dump(exclude_unset=True),
+    )
+    return EventRead.model_validate(event)
+
+
 @router.delete("/{tree_id}/events/{event_id}", status_code=status.HTTP_204_NO_CONTENT)
 async def delete_event(
     tree_id: uuid.UUID, event_id: uuid.UUID, session: SessionDep, current: CurrentUser

backend/app/api/v1/persons.py

@@ -3,7 +3,7 @@ import uuid
 from fastapi import APIRouter, status
 
 from app.api.deps import CurrentUser, SessionDep
-from app.schemas.person import PersonCreate, PersonRead
+from app.schemas.person import PersonCreate, PersonRead, PersonUpdate
 from app.services import person_service, tree_service
 
 # Persons are nested under their tree (the tenant boundary).
@@ -36,10 +36,18 @@ async def create_person(
 
 @router.get("/{tree_id}/persons", response_model=list[PersonRead])
 async def list_persons(
-    tree_id: uuid.UUID, session: SessionDep, current: CurrentUser, deleted: bool = False
+    tree_id: uuid.UUID,
+    session: SessionDep,
+    current: CurrentUser,
+    deleted: bool = False,
+    q: str | None = None,
 ) -> list[PersonRead]:
     tree = await tree_service.get_tree(session, viewer_id=current.id, tree_id=tree_id)
-    if deleted:
+    if q:
+        persons = await person_service.search_persons(
+            session, viewer_id=current.id, tree=tree, query=q
+        )
+    elif deleted:
         persons = await person_service.list_deleted_persons(
             session, viewer_id=current.id, tree=tree
         )
@@ -48,6 +56,25 @@ async def list_persons(
     return [PersonRead.model_validate(p) for p in persons]
 
 
+@router.patch("/{tree_id}/persons/{person_id}", response_model=PersonRead)
+async def update_person(
+    tree_id: uuid.UUID,
+    person_id: uuid.UUID,
+    data: PersonUpdate,
+    session: SessionDep,
+    current: CurrentUser,
+) -> PersonRead:
+    tree = await tree_service.get_tree(session, viewer_id=current.id, tree_id=tree_id)
+    person = await person_service.update_person(
+        session,
+        actor=current,
+        tree=tree,
+        person_id=person_id,
+        changes=data.model_dump(exclude_unset=True),
+    )
+    return PersonRead.model_validate(person)
+
+
 @router.delete("/{tree_id}/persons/{person_id}", status_code=status.HTTP_204_NO_CONTENT)
 async def delete_person(
     tree_id: uuid.UUID, person_id: uuid.UUID, session: SessionDep, current: CurrentUser

backend/app/models/person.py

@@ -7,7 +7,7 @@ aliases) so name changes over time are first-class.
 
 import uuid
 
-from sqlalchemy import Boolean, ForeignKey, Integer, String, Text, text
+from sqlalchemy import Boolean, ForeignKey, Index, Integer, String, Text, text
 from sqlalchemy import Enum as SAEnum
 from sqlalchemy.orm import Mapped, mapped_column
 
@@ -33,6 +33,22 @@ class Person(Base, UUIDPrimaryKey, TenantScoped, Timestamps, SoftDelete):
 
 class Name(Base, UUIDPrimaryKey, TenantScoped, Timestamps, SoftDelete):
     __tablename__ = "names"
+    # Trigram indexes for fuzzy name search (Mueller/Müller/Muller). Requires the
+    # pg_trgm extension (enabled in the accompanying migration).
+    __table_args__ = (
+        Index(
+            "ix_names_given_trgm",
+            "given",
+            postgresql_using="gin",
+            postgresql_ops={"given": "gin_trgm_ops"},
+        ),
+        Index(
+            "ix_names_surname_trgm",
+            "surname",
+            postgresql_using="gin",
+            postgresql_ops={"surname": "gin_trgm_ops"},
+        ),
+    )
 
     person_id: Mapped[uuid.UUID] = mapped_column(
         ForeignKey("persons.id", ondelete="CASCADE"), index=True

backend/app/schemas/event.py

@@ -20,6 +20,19 @@ class EventCreate(BaseModel):
     notes: str | None = None
 
 
+class EventUpdate(BaseModel):
+    # All optional; only fields explicitly sent are changed (PATCH semantics).
+    event_type: str | None = None
+    place_id: uuid.UUID | None = None
+    date_value: str | None = None
+    date_start: date | None = None
+    date_end: date | None = None
+    date_precision: str | None = None
+    calendar: str | None = None
+    detail: str | None = None
+    notes: str | None = None
+
+
 class EventRead(BaseModel):
     model_config = ConfigDict(from_attributes=True)
 

backend/app/schemas/person.py

@@ -15,6 +15,16 @@ class PersonCreate(BaseModel):
     notes: str | None = None
 
 
+class PersonUpdate(BaseModel):
+    # Person fields + the primary name's parts; only sent fields are changed.
+    given: str | None = None
+    surname: str | None = None
+    gender: str | None = None
+    is_living: bool | None = None
+    privacy: PersonPrivacy | None = None
+    notes: str | None = None
+
+
 class PersonRead(BaseModel):
     model_config = ConfigDict(from_attributes=True)
 

backend/app/services/event_service.py

@@ -122,6 +122,44 @@ async def list_events_for_person(
     return list((await session.execute(stmt)).scalars().all())
 
 
+async def update_event(
+    session: AsyncSession,
+    *,
+    actor: User,
+    tree: Tree,
+    event_id: uuid.UUID,
+    changes: dict,
+) -> Event:
+    if not await privacy.can_edit_tree(session, user_id=actor.id, tree=tree):
+        raise Forbidden("not an editor of this tree")
+    event = (
+        await session.execute(
+            select(Event).where(
+                Event.id == event_id, Event.tree_id == tree.id, Event.deleted_at.is_(None)
+            )
+        )
+    ).scalar_one_or_none()
+    if event is None:
+        raise NotFound("event not found")
+    if "place_id" in changes and changes["place_id"] is not None:
+        if not await _belongs_to_tree(session, Place, changes["place_id"], tree.id):
+            raise NotFound("place not found in this tree")
+    for key, value in changes.items():
+        setattr(event, key, value)
+    record_audit(
+        session,
+        action="update",
+        entity_type="Event",
+        entity_id=event.id,
+        tree_id=tree.id,
+        actor_user_id=actor.id,
+        after=changes,
+    )
+    await session.commit()
+    await session.refresh(event)
+    return event
+
+
 async def delete_event(
     session: AsyncSession, *, actor: User, tree: Tree, event_id: uuid.UUID
 ) -> None:

backend/app/services/person_service.py

@@ -6,7 +6,7 @@ person through the privacy engine. Each returned Person gets a transient
 import uuid
 from datetime import UTC, datetime
 
-from sqlalchemy import select
+from sqlalchemy import func, or_, select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.enums import PersonPrivacy
@@ -25,6 +25,14 @@ def _format_name(name: Name) -> str | None:
     return joined or name.display_name
 
 
+def _redact(person: Person) -> None:
+    """Minimise a possibly-living person for a non-member view (transient only —
+    never committed)."""
+    person.primary_name = "Living person"
+    person.gender = None
+    person.is_living = True
+
+
 async def _attach_primary_name(session: AsyncSession, person: Person) -> None:
     stmt = (
         select(Name)
@@ -87,6 +95,59 @@ async def create_person(
     return person
 
 
+_PERSON_FIELDS = {"gender", "is_living", "privacy", "notes"}
+
+
+async def update_person(
+    session: AsyncSession, *, actor: User, tree: Tree, person_id: uuid.UUID, changes: dict
+) -> Person:
+    if not await privacy.can_edit_tree(session, user_id=actor.id, tree=tree):
+        raise Forbidden("not an editor of this tree")
+    person = (
+        await session.execute(
+            select(Person).where(
+                Person.id == person_id, Person.tree_id == tree.id, Person.deleted_at.is_(None)
+            )
+        )
+    ).scalar_one_or_none()
+    if person is None:
+        raise NotFound("person not found")
+
+    for key in _PERSON_FIELDS & changes.keys():
+        setattr(person, key, changes[key])
+
+    if "given" in changes or "surname" in changes:
+        name = (
+            await session.execute(
+                select(Name)
+                .where(Name.person_id == person.id, Name.deleted_at.is_(None))
+                .order_by(Name.is_primary.desc(), Name.sort_order)
+            )
+        ).scalars().first()
+        if name is None:
+            name = Name(tree_id=tree.id, person_id=person.id, name_type="birth", is_primary=True)
+            session.add(name)
+        if "given" in changes:
+            name.given = changes["given"]
+        if "surname" in changes:
+            name.surname = changes["surname"]
+        name.display_name = None  # rebuild display from parts
+
+    record_audit(
+        session,
+        action="update",
+        entity_type="Person",
+        entity_id=person.id,
+        tree_id=tree.id,
+        actor_user_id=actor.id,
+        after=changes,
+    )
+    await session.commit()
+    await session.refresh(person)
+    await _attach_primary_name(session, person)
+    return person
+
+
 async def get_person(
     session: AsyncSession, *, viewer_id: uuid.UUID, tree: Tree, person_id: uuid.UUID
 ) -> Person:
@@ -104,12 +165,15 @@ async def get_person(
     if person is None:
         raise NotFound("person not found")
     # Run the single person through the privacy engine (redaction lands Phase 2).
-    if (
+    vis = await privacy.person_visibility(
-        await privacy.person_visibility(session, user_id=viewer_id, tree=tree, person=person)
+        session, user_id=viewer_id, tree=tree, person=person
-        == Visibility.hidden
+    )
-    ):
+    if vis == Visibility.hidden:
         raise NotFound("person not found")
-    await _attach_primary_name(session, person)
+    if vis == Visibility.redacted:
+        _redact(person)
+    else:
+        await _attach_primary_name(session, person)
     return person
 
 
@@ -199,13 +263,66 @@ async def list_persons(
 
     visible: list[Person] = []
     for person in persons:
-        if (
+        vis = await privacy.person_visibility(
-            await privacy.person_visibility(
+            session, user_id=viewer_id, tree=tree, person=person
-                session, user_id=viewer_id, tree=tree, person=person
+        )
-            )
+        if vis == Visibility.hidden:
-            == Visibility.hidden
-        ):
             continue
-        await _attach_primary_name(session, person)
+        if vis == Visibility.redacted:
+            _redact(person)
+        else:
+            await _attach_primary_name(session, person)
         visible.append(person)
     return visible
+
+
+async def search_persons(
+    session: AsyncSession, *, viewer_id: uuid.UUID, tree: Tree, query: str, limit: int = 50
+) -> list[Person]:
+    if not await privacy.can_view_tree(session, user_id=viewer_id, tree=tree):
+        raise Forbidden("not permitted to view this tree")
+    q = query.strip()
+    if not q:
+        return []
+    like = f"%{q}%"
+    score = func.greatest(
+        func.similarity(func.coalesce(Name.given, ""), q),
+        func.similarity(func.coalesce(Name.surname, ""), q),
+    )
+    sub = (
+        select(Name.person_id.label("pid"), func.max(score).label("score"))
+        .where(
+            Name.tree_id == tree.id,
+            Name.deleted_at.is_(None),
+            or_(
+                Name.given.op("%")(q),
+                Name.surname.op("%")(q),
+                Name.given.ilike(like),
+                Name.surname.ilike(like),
+            ),
+        )
+        .group_by(Name.person_id)
+        .order_by(func.max(score).desc())
+        .limit(limit)
+        .subquery()
+    )
+    stmt = (
+        select(Person)
+        .join(sub, sub.c.pid == Person.id)
+        .where(Person.tree_id == tree.id, Person.deleted_at.is_(None))
+        .order_by(sub.c.score.desc())
+    )
+    persons = list((await session.execute(stmt)).scalars().all())
+    out: list[Person] = []
+    for person in persons:
+        vis = await privacy.person_visibility(
+            session, user_id=viewer_id, tree=tree, person=person
+        )
+        if vis == Visibility.hidden:
+            continue
+        if vis == Visibility.redacted:
+            _redact(person)
+        else:
+            await _attach_primary_name(session, person)
+        out.append(person)
+    return out

backend/app/services/privacy.py

@@ -8,14 +8,20 @@ tree's visibility, the per-person override, and (Phase 2) living-person status.
 
 import enum
 import uuid
+from datetime import UTC, datetime
 
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.enums import MembershipRole, PersonPrivacy, TreeVisibility
+from app.models.event import Event
 from app.models.person import Person
 from app.models.tree import Tree, TreeMembership
 
+# A person with no death fact whose birth is within this window (or unknown) is
+# treated as possibly living and redacted from non-members (ARCHITECTURE §6).
+LIVING_RECENCY_YEARS = 100
+
 
 class Visibility(enum.StrEnum):
     full = "full"
@@ -48,15 +54,56 @@ async def can_edit_tree(session: AsyncSession, *, user_id: uuid.UUID | None, tre
     return role in (MembershipRole.owner, MembershipRole.editor)
 
 
+async def is_possibly_living(session: AsyncSession, person: Person) -> bool:
+    """True if the person should be treated as living: explicit flag, or (absent
+    a death fact) a birth within the recency window or an unknown birth."""
+    if person.is_living is True:
+        return True
+    if person.is_living is False:
+        return False
+    death = (
+        await session.execute(
+            select(Event.id)
+            .where(
+                Event.person_id == person.id,
+                Event.event_type == "death",
+                Event.deleted_at.is_(None),
+            )
+            .limit(1)
+        )
+    ).scalar_one_or_none()
+    if death is not None:
+        return False
+    birth = (
+        await session.execute(
+            select(Event.date_start)
+            .where(
+                Event.person_id == person.id,
+                Event.event_type == "birth",
+                Event.date_start.is_not(None),
+                Event.deleted_at.is_(None),
+            )
+            .order_by(Event.date_start)
+            .limit(1)
+        )
+    ).scalar_one_or_none()
+    if birth is None:
+        return True  # unknown birth → treat as possibly living
+    return (datetime.now(UTC).year - birth.year) < LIVING_RECENCY_YEARS
+
+
 async def person_visibility(
     session: AsyncSession, *, user_id: uuid.UUID | None, tree: Tree, person: Person
 ) -> Visibility:
     if not await can_view_tree(session, user_id=user_id, tree=tree):
         return Visibility.hidden
     if await get_membership_role(session, user_id, tree.id) is not None:
-        return Visibility.full
+        return Visibility.full  # members see everyone in their tree
     # Non-member viewing a public/unlisted tree:
     if person.privacy == PersonPrivacy.private:
         return Visibility.hidden
-    # TODO(Phase 2): redact living people for non-members (ARCHITECTURE §6).
+    if person.privacy == PersonPrivacy.public:
+        return Visibility.full  # explicit per-person opt-in
+    if await is_possibly_living(session, person):
+        return Visibility.redacted  # living people are protected by default
     return Visibility.full

backend/migrations/versions/9a2b1c7d4e10_pg_trgm_name_search.py

@@ -0,0 +1,33 @@
+"""pg_trgm extension + trigram name indexes for fuzzy search
+
+Revision ID: 9a2b1c7d4e10
+Revises: 7fc7024ef432
+Create Date: 2026-06-07
+
+"""
+from collections.abc import Sequence
+
+from alembic import op
+
+revision: str = "9a2b1c7d4e10"
+down_revision: str | None = "7fc7024ef432"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
+
+
+def upgrade() -> None:
+    op.execute("CREATE EXTENSION IF NOT EXISTS pg_trgm")
+    op.execute(
+        "CREATE INDEX IF NOT EXISTS ix_names_given_trgm "
+        "ON names USING gin (given gin_trgm_ops)"
+    )
+    op.execute(
+        "CREATE INDEX IF NOT EXISTS ix_names_surname_trgm "
+        "ON names USING gin (surname gin_trgm_ops)"
+    )
+
+
+def downgrade() -> None:
+    op.execute("DROP INDEX IF EXISTS ix_names_surname_trgm")
+    op.execute("DROP INDEX IF EXISTS ix_names_given_trgm")
+    # Leave the pg_trgm extension in place; other features may rely on it.

backend/tests/conftest.py

@@ -11,6 +11,7 @@ import os
 import pytest
 import pytest_asyncio
 from httpx import ASGITransport, AsyncClient
+from sqlalchemy import text
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
 
 import app.models  # noqa: F401 — register all models on Base.metadata
@@ -72,6 +73,7 @@ async def client():
 
     engine = create_async_engine(TEST_DATABASE_URL)
     async with engine.begin() as conn:
+        await conn.execute(text("CREATE EXTENSION IF NOT EXISTS pg_trgm"))
         await conn.run_sync(Base.metadata.drop_all)
         await conn.run_sync(Base.metadata.create_all)
 

backend/tests/test_core_api.py

@@ -68,6 +68,25 @@ async def test_public_tree_viewable_but_not_editable_by_non_member(client):
     assert resp.status_code == 403
 
 
+async def test_person_update(client):
+    token = await register(client, "edit@example.com")
+    h = auth(token)
+    tid = (await client.post("/api/v1/trees", json={"name": "T"}, headers=h)).json()["id"]
+    pid = (
+        await client.post(
+            f"/api/v1/trees/{tid}/persons", json={"given": "Jon", "surname": "Smith"}, headers=h
+        )
+    ).json()["id"]
+    resp = await client.patch(
+        f"/api/v1/trees/{tid}/persons/{pid}",
+        json={"given": "John", "gender": "male"},
+        headers=auth(token),
+    )
+    assert resp.status_code == 200, resp.text
+    assert resp.json()["primary_name"] == "John Smith"
+    assert resp.json()["gender"] == "male"
+
+
 async def test_auth_required_without_token(client):
     resp = await client.get("/api/v1/trees")
     assert resp.status_code == 401

backend/tests/test_graph.py

@@ -48,6 +48,25 @@ async def test_event_create_list_delete(client):
     assert len(listed.json()) == 0
 
 
+async def test_event_update(client):
+    h, tree_id, parent, _ = await _setup_tree_with_two_people(client, "evupd@example.com")
+    eid = (
+        await client.post(
+            f"/api/v1/trees/{tree_id}/events",
+            json={"event_type": "birth", "person_id": parent, "date_value": "1850"},
+            headers=h,
+        )
+    ).json()["id"]
+    resp = await client.patch(
+        f"/api/v1/trees/{tree_id}/events/{eid}",
+        json={"date_value": "ABT 1851", "event_type": "baptism"},
+        headers=h,
+    )
+    assert resp.status_code == 200, resp.text
+    assert resp.json()["date_value"] == "ABT 1851"
+    assert resp.json()["event_type"] == "baptism"
+
+
 async def test_event_requires_exactly_one_subject(client):
     h, tree_id, _, _ = await _setup_tree_with_two_people(client, "ev2@example.com")
     resp = await client.post(

backend/tests/test_privacy_living.py

@@ -0,0 +1,36 @@
+"""Living-person protection: living people are redacted from non-members."""
+
+from tests.conftest import auth, register
+
+
+async def test_living_person_redacted_for_non_members(client):
+    owner = auth(await register(client, "pub-owner@example.com"))
+    tid = (
+        await client.post(
+            "/api/v1/trees", json={"name": "Public", "visibility": "public"}, headers=owner
+        )
+    ).json()["id"]
+    await client.post(
+        f"/api/v1/trees/{tid}/persons",
+        json={"given": "Old", "surname": "Ancestor", "is_living": False},
+        headers=owner,
+    )
+    await client.post(
+        f"/api/v1/trees/{tid}/persons",
+        json={"given": "Young", "surname": "Living", "is_living": True},
+        headers=owner,
+    )
+
+    other = auth(await register(client, "pub-viewer@example.com"))
+    people = (await client.get(f"/api/v1/trees/{tid}/persons", headers=other)).json()
+    names = {p["primary_name"] for p in people}
+    assert "Old Ancestor" in names  # deceased is visible
+    assert "Living person" in names  # living is redacted
+    assert "Young Living" not in names  # the real living name is hidden
+    # The redacted person leaks no gender.
+    living = next(p for p in people if p["primary_name"] == "Living person")
+    assert living["gender"] is None
+
+    # The owner (a member) sees real names.
+    owner_people = (await client.get(f"/api/v1/trees/{tid}/persons", headers=owner)).json()
+    assert "Young Living" in {p["primary_name"] for p in owner_people}

backend/tests/test_search.py

@@ -0,0 +1,24 @@
+"""Fuzzy name search (pg_trgm)."""
+
+from tests.conftest import auth, register
+
+
+async def test_fuzzy_name_search(client):
+    h = auth(await register(client, "search@example.com"))
+    tid = (await client.post("/api/v1/trees", json={"name": "S"}, headers=h)).json()["id"]
+    for given, surname in [("Hans", "Mueller"), ("John", "Smith"), ("Anna", "Vogel")]:
+        await client.post(
+            f"/api/v1/trees/{tid}/persons",
+            json={"given": given, "surname": surname},
+            headers=h,
+        )
+
+    # Trigram fuzziness: "muller" should find "Mueller" (not a substring match).
+    r = await client.get(f"/api/v1/trees/{tid}/persons", params={"q": "muller"}, headers=h)
+    assert r.status_code == 200
+    names = [p["primary_name"] or "" for p in r.json()]
+    assert any("Mueller" in n for n in names)
+
+    # Substring search still works.
+    r2 = await client.get(f"/api/v1/trees/{tid}/persons", params={"q": "smi"}, headers=h)
+    assert any("Smith" in (p["primary_name"] or "") for p in r2.json())

frontend/app/trees/[id]/page.tsx

@@ -34,6 +34,7 @@ export default function FamilyViewPage() {
   const [ready, setReady] = useState(false);
   const [focusId, setFocusId] = useState<string | null>(null);
   const [search, setSearch] = useState("");
+  const [results, setResults] = useState<Person[] | null>(null); // server fuzzy search
   const [firstName, setFirstName] = useState("");
   // Inline add-relative form: which anchor + kind is open, and the typed name.
   // `key` keeps each empty slot's inline form independent (a person has 2
@@ -65,6 +66,22 @@ export default function FamilyViewPage() {
     load();
   }, [load]);
 
+  // Debounced server-side fuzzy search (pg_trgm) across the whole tree.
+  useEffect(() => {
+    const q = search.trim();
+    if (!q) {
+      setResults(null);
+      return;
+    }
+    const t = setTimeout(async () => {
+      const { data } = await api.GET("/api/v1/trees/{tree_id}/persons", {
+        params: { path: { tree_id: treeId }, query: { q } },
+      });
+      setResults(data ?? []);
+    }, 250);
+    return () => clearTimeout(t);
+  }, [search, treeId]);
+
   const byId = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]);
   const parentsOf = (id: string) =>
     rels.filter((r) => r.type === "parent_child" && r.person_to_id === id).map((r) => r.person_from_id);
@@ -105,23 +122,42 @@ export default function FamilyViewPage() {
     load();
   }
 
+  async function postRel(body: components["schemas"]["RelationshipCreate"]) {
+    await api.POST("/api/v1/trees/{tree_id}/relationships", {
+      params: { path: { tree_id: treeId } },
+      body,
+    });
+  }
+
+  // Create the relationship(s) connecting an (existing or new) person to anchor.
+  async function createLink(kind: AddKind, anchor: string, personId: string) {
+    if (kind === "parent") {
+      await postRel({ type: "parent_child", person_from_id: personId, person_to_id: anchor, qualifier: "biological" });
+    } else if (kind === "partner") {
+      await postRel({ type: "partnership", person_from_id: anchor, person_to_id: personId });
+    } else {
+      // child: link to anchor, and to anchor's spouse too (so both parents show)
+      await postRel({ type: "parent_child", person_from_id: anchor, person_to_id: personId, qualifier: "biological" });
+      const partners = partnersOf(anchor);
+      if (partners.length === 1) {
+        await postRel({ type: "parent_child", person_from_id: partners[0], person_to_id: personId, qualifier: "biological" });
+      }
+    }
+  }
+
+  async function linkExisting(personId: string) {
+    if (!adding) return;
+    await createLink(adding.kind, adding.anchor, personId);
+    setAdding(null);
+    setAddName("");
+    load();
+  }
+
   async function submitAdd(e: React.FormEvent) {
     e.preventDefault();
     if (!adding || !addName.trim()) return;
     const newId = await addPerson(addName);
-    if (newId) {
+    if (newId) await createLink(adding.kind, adding.anchor, newId);
-      const { kind, anchor } = adding;
-      const body =
-        kind === "parent"
-          ? { type: "parent_child" as const, person_from_id: newId, person_to_id: anchor, qualifier: "biological" as const }
-          : kind === "child"
-            ? { type: "parent_child" as const, person_from_id: anchor, person_to_id: newId, qualifier: "biological" as const }
-            : { type: "partnership" as const, person_from_id: anchor, person_to_id: newId };
-      await api.POST("/api/v1/trees/{tree_id}/relationships", {
-        params: { path: { tree_id: treeId } },
-        body,
-      });
-    }
     setAdding(null);
     setAddName("");
     load();
@@ -193,26 +229,45 @@ export default function FamilyViewPage() {
     label: string;
   }) =>
     adding?.key === formKey ? (
-      <form onSubmit={submitAdd} className="flex w-44 flex-col gap-1">
+      <form onSubmit={submitAdd} className="flex w-56 flex-col gap-1">
         <Input
           autoFocus
           className="h-9"
-          placeholder="Full name"
+          placeholder="Search existing or type a new name"
           value={addName}
           onChange={(e) => setAddName(e.target.value)}
         />
-        <div className="flex gap-1">
+        {addName.trim() && (
-          <Button type="submit" size="sm">
+          <div className="overflow-hidden rounded-md border border-[var(--border)] bg-[var(--surface)] text-sm">
-            Add
+            {people
-          </Button>
+              .filter(
-          <button
+                (p) =>
-            type="button"
+                  p.id !== anchor &&
-            onClick={() => setAdding(null)}
+                  (p.primary_name ?? "").toLowerCase().includes(addName.trim().toLowerCase()),
-            className="text-xs text-[var(--muted)]"
+              )
-          >
+              .slice(0, 6)
-            cancel
+              .map((p) => (
-          </button>
+                <button
-        </div>
+                  key={p.id}
+                  type="button"
+                  onClick={() => linkExisting(p.id)}
+                  className="flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left hover:bg-bronze/[0.07]"
+                >
+                  <span className="truncate">{p.primary_name ?? "Unnamed"}</span>
+                  <span className="shrink-0 text-xs text-[var(--muted)]">{years.get(p.id) ?? ""}</span>
+                </button>
+              ))}
+            <button
+              type="submit"
+              className="flex w-full items-center gap-1 border-t border-[var(--border)] px-2 py-1.5 text-left text-bronze hover:bg-bronze/[0.07]"
+            >
+              + Create new “{addName.trim()}”
+            </button>
+          </div>
+        )}
+        <button type="button" onClick={() => setAdding(null)} className="text-xs text-[var(--muted)]">
+          cancel
+        </button>
       </form>
     ) : (
       <button
@@ -265,9 +320,9 @@ export default function FamilyViewPage() {
   const sorted = [...people].sort((a, b) =>
     (a.primary_name ?? "").localeCompare(b.primary_name ?? ""),
   );
-  const matches = search
+  // Server fuzzy results when searching; otherwise the loaded set.
-    ? sorted.filter((p) => (p.primary_name ?? "").toLowerCase().includes(search.toLowerCase()))
+  const directory = results ?? sorted;
-    : sorted;
+  const shown = directory.slice(0, 200); // cap DOM nodes; refine search to narrow
 
   return (
     <div className="space-y-8">
@@ -325,32 +380,44 @@ export default function FamilyViewPage() {
         </Card>
       </div>
 
-      {/* Searchable index of everyone in the tree */}
+      {/* Scrollable, searchable people directory (scales to large trees) */}
       <div className="space-y-3">
-        <div className="flex items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
-          <h2 className="font-serif text-base font-semibold">All people ({people.length})</h2>
+          <h2 className="font-serif text-base font-semibold">People ({people.length})</h2>
           <Input
-            className="w-56"
+            className="w-64"
-            placeholder="Search…"
+            placeholder="Search by name…"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div className="flex flex-wrap gap-2">
+        <Card className="overflow-hidden">
-          {matches.map((p) => (
+          <div className="max-h-96 overflow-y-auto">
-            <button
+            {shown.length === 0 ? (
-              key={p.id}
+              <div className="px-4 py-6 text-sm text-[var(--muted)]">No matches.</div>
-              onClick={() => setFocusId(p.id)}
+            ) : (
-              className={`rounded-full border px-3 py-1 text-sm transition-colors ${
+              shown.map((p, i) => (
-                p.id === focusId
+                <button
-                  ? "border-bronze bg-bronze/[0.08] text-bronze"
+                  key={p.id}
-                  : "border-[var(--border)] hover:border-bronze/60"
+                  onClick={() => setFocusId(p.id)}
-              }`}
+                  className={`flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm transition-colors ${
-            >
+                    i > 0 ? "border-t border-[var(--border)]" : ""
-              {p.primary_name ?? "Unnamed"}
+                  } ${p.id === focusId ? "bg-bronze/[0.08]" : "hover:bg-bronze/[0.05]"}`}
-            </button>
+                >
-          ))}
+                  <span className="truncate font-medium">{p.primary_name ?? "Unnamed"}</span>
-        </div>
+                  <span className="shrink-0 text-xs text-[var(--muted)]">
+                    {years.get(p.id) ?? ""}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+          {directory.length > shown.length && (
+            <div className="border-t border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs text-[var(--muted)]">
+              Showing {shown.length} of {directory.length} — refine your search to narrow.
+            </div>
+          )}
+        </Card>
       </div>
     </div>
   );

frontend/app/trees/[id]/persons/[personId]/page.tsx

@@ -33,6 +33,53 @@ const GED_MON = ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SE
 const DATE_QUALS: Record<string, string> = { exact: "", about: "ABT", before: "BEF", after: "AFT" };
 const pad = (n: number, len: number) => String(n).padStart(len, "0");
 
+function composeDate(qual: string, day: string, month: string, year: string) {
+  const y = year.trim();
+  if (!y || Number.isNaN(Number(y))) {
+    return { date_value: null as string | null, date_start: null as string | null, date_precision: null as string | null };
+  }
+  const m = month ? Number(month) : null;
+  const d = day.trim() ? Number(day) : null;
+  const parts: string[] = [];
+  if (d && m) parts.push(String(d));
+  if (m) parts.push(GED_MON[m]);
+  parts.push(y);
+  const prefix = DATE_QUALS[qual];
+  return {
+    date_value: (prefix ? `${prefix} ` : "") + parts.join(" "),
+    date_start: `${pad(Number(y), 4)}-${pad(m ?? 1, 2)}-${pad(d ?? 1, 2)}`,
+    date_precision: qual,
+  };
+}
+
+// Parse a stored date_value (e.g. "ABT 12 MAR 1900") back into form fields.
+function parseDateValue(v: string | null | undefined) {
+  let qual = "exact";
+  let day = "";
+  let month = "";
+  let year = "";
+  if (v) {
+    let s = v.trim();
+    const up = s.toUpperCase();
+    for (const [q, pre] of Object.entries(DATE_QUALS)) {
+      if (pre && up.startsWith(`${pre} `)) {
+        qual = q;
+        s = s.slice(pre.length + 1).trim();
+        break;
+      }
+    }
+    for (const t of s.toUpperCase().split(/\s+/).filter(Boolean)) {
+      if (/^\d{3,4}$/.test(t) && !year) year = t;
+      else if (/^\d{1,2}$/.test(t)) day = String(Number(t));
+      else {
+        const mi = GED_MON.indexOf(t);
+        if (mi > 0) month = String(mi);
+      }
+    }
+  }
+  return { qual, day, month, year };
+}
+
 export default function PersonDetailPage() {
   const router = useRouter();
   const params = useParams<{ id: string; personId: string }>();
@@ -54,6 +101,23 @@ export default function PersonDetailPage() {
   const [dateMonth, setDateMonth] = useState("");
   const [dateYear, setDateYear] = useState("");
 
+  // Inline edit-event form.
+  const [editId, setEditId] = useState<string | null>(null);
+  const [edType, setEdType] = useState("birth");
+  const [edTypeOther, setEdTypeOther] = useState("");
+  const [edQual, setEdQual] = useState("exact");
+  const [edDay, setEdDay] = useState("");
+  const [edMonth, setEdMonth] = useState("");
+  const [edYear, setEdYear] = useState("");
+
+  // Inline edit-person form (name + vitals).
+  const [editingPerson, setEditingPerson] = useState(false);
+  const [pGiven, setPGiven] = useState("");
+  const [pSurname, setPSurname] = useState("");
+  const [pGender, setPGender] = useState("");
+  const [pLiving, setPLiving] = useState("unknown");
+  const [pPrivacy, setPPrivacy] = useState<"inherit" | "private" | "public">("inherit");
+
   const [relKind, setRelKind] = useState<"parent" | "child" | "partner" | "sibling">("parent");
   const [relOther, setRelOther] = useState("");
   const [relQual, setRelQual] = useState<Qualifier>("biological");
@@ -112,30 +176,16 @@ export default function PersonDetailPage() {
   const eventCites = (id: string) => citations.filter((c) => c.event_id === id);
   const personCites = citations.filter((c) => c.person_id === personId);
 
-  function buildDate() {
-    const year = dateYear.trim();
-    if (!year || Number.isNaN(Number(year))) {
-      return { date_value: null, date_start: null, date_precision: null };
-    }
-    const m = dateMonth ? Number(dateMonth) : null;
-    const d = dateDay.trim() ? Number(dateDay) : null;
-    const parts: string[] = [];
-    if (d && m) parts.push(String(d));
-    if (m) parts.push(GED_MON[m]);
-    parts.push(year);
-    const prefix = DATE_QUALS[dateQual];
-    return {
-      date_value: (prefix ? `${prefix} ` : "") + parts.join(" "),
-      date_start: `${pad(Number(year), 4)}-${pad(m ?? 1, 2)}-${pad(d ?? 1, 2)}`,
-      date_precision: dateQual,
-    };
-  }
-
   async function addEvent(e: React.FormEvent) {
     e.preventDefault();
     const event_type = evType === "other" ? evTypeOther.trim() : evType;
     if (!event_type) return;
-    const { date_value, date_start, date_precision } = buildDate();
+    const { date_value, date_start, date_precision } = composeDate(
+      dateQual,
+      dateDay,
+      dateMonth,
+      dateYear,
+    );
     const { error } = await api.POST("/api/v1/trees/{tree_id}/events", {
       params: { path: { tree_id: treeId } },
       body: { event_type, person_id: personId, date_value, date_start, date_precision },
@@ -156,6 +206,33 @@ export default function PersonDetailPage() {
     load();
   }
 
+  function startEdit(ev: Event) {
+    setEditId(ev.id);
+    const known = EVENT_TYPES.includes(ev.event_type);
+    setEdType(known ? ev.event_type : "other");
+    setEdTypeOther(known ? "" : ev.event_type);
+    const parsed = parseDateValue(ev.date_value);
+    setEdQual(parsed.qual);
+    setEdDay(parsed.day);
+    setEdMonth(parsed.month);
+    setEdYear(parsed.year);
+  }
+
+  async function saveEdit() {
+    if (!editId) return;
+    const event_type = edType === "other" ? edTypeOther.trim() : edType;
+    if (!event_type) return;
+    const { date_value, date_start, date_precision } = composeDate(edQual, edDay, edMonth, edYear);
+    const { error } = await api.PATCH("/api/v1/trees/{tree_id}/events/{event_id}", {
+      params: { path: { tree_id: treeId, event_id: editId } },
+      body: { event_type, date_value, date_start, date_precision },
+    });
+    if (!error) {
+      setEditId(null);
+      load();
+    }
+  }
+
   async function addRel(e: React.FormEvent) {
     e.preventDefault();
     if (!relOther) return;
@@ -213,6 +290,33 @@ export default function PersonDetailPage() {
     router.push(`/trees/${treeId}`);
   }
 
+  function startEditPerson(current: Person) {
+    const t = (current.primary_name ?? "").trim().split(/\s+/).filter(Boolean);
+    setPGiven(t.length > 1 ? t.slice(0, -1).join(" ") : (t[0] ?? ""));
+    setPSurname(t.length > 1 ? t[t.length - 1] : "");
+    setPGender(current.gender ?? "");
+    setPLiving(current.is_living === true ? "living" : current.is_living === false ? "deceased" : "unknown");
+    setPPrivacy((current.privacy as "inherit" | "private" | "public") ?? "inherit");
+    setEditingPerson(true);
+  }
+
+  async function savePerson() {
+    const { error } = await api.PATCH("/api/v1/trees/{tree_id}/persons/{person_id}", {
+      params: { path: { tree_id: treeId, person_id: personId } },
+      body: {
+        given: pGiven || null,
+        surname: pSurname || null,
+        gender: pGender || null,
+        is_living: pLiving === "living" ? true : pLiving === "deceased" ? false : null,
+        privacy: pPrivacy,
+      },
+    });
+    if (!error) {
+      setEditingPerson(false);
+      load();
+    }
+  }
+
   if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
   if (!person) return <p className="text-[var(--muted)]">Not found.</p>;
 
@@ -316,15 +420,56 @@ export default function PersonDetailPage() {
         ← Back to tree
       </Link>
 
-      <div className="flex flex-wrap items-center justify-between gap-2">
+      {editingPerson ? (
-        <h1 className="text-3xl font-semibold">{person.primary_name ?? "Unnamed person"}</h1>
+        <form
-        <div className="flex items-center gap-3">
+          onSubmit={(e) => {
-          {citeControl("p", { person_id: personId }, personCites)}
+            e.preventDefault();
-          <Button variant="ghost" size="sm" onClick={removePerson}>
+            savePerson();
-            Delete
+          }}
-          </Button>
+          className="space-y-3 rounded-lg border border-[var(--border)] p-4"
+        >
+          <div className="flex flex-wrap gap-2">
+            <Input className="w-40" placeholder="Given name" value={pGiven} onChange={(e) => setPGiven(e.target.value)} />
+            <Input className="w-40" placeholder="Surname" value={pSurname} onChange={(e) => setPSurname(e.target.value)} />
+            <Input className="w-32" placeholder="Gender" value={pGender} onChange={(e) => setPGender(e.target.value)} />
+            <select className={fieldCls} value={pLiving} onChange={(e) => setPLiving(e.target.value)}>
+              <option value="unknown">Status: unknown</option>
+              <option value="living">Living</option>
+              <option value="deceased">Deceased</option>
+            </select>
+            <select
+              className={fieldCls}
+              value={pPrivacy}
+              onChange={(e) => setPPrivacy(e.target.value as "inherit" | "private" | "public")}
+            >
+              <option value="inherit">Privacy: default</option>
+              <option value="private">Private</option>
+              <option value="public">Public</option>
+            </select>
+          </div>
+          <div className="flex gap-2">
+            <Button type="submit" size="sm">
+              Save
+            </Button>
+            <button type="button" onClick={() => setEditingPerson(false)} className="text-xs text-[var(--muted)]">
+              cancel
+            </button>
+          </div>
+        </form>
+      ) : (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h1 className="text-3xl font-semibold">{person.primary_name ?? "Unnamed person"}</h1>
+          <div className="flex items-center gap-3">
+            {citeControl("p", { person_id: personId }, personCites)}
+            <Button variant="outline" size="sm" onClick={() => startEditPerson(person)}>
+              Edit
+            </Button>
+            <Button variant="ghost" size="sm" onClick={removePerson}>
+              Delete
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
 
       <Card>
         <CardHeader>
@@ -335,26 +480,98 @@ export default function PersonDetailPage() {
             <p className="text-sm text-[var(--muted)]">No events yet.</p>
           ) : (
             <ul className="space-y-2">
-              {events.map((ev) => (
+              {events.map((ev) =>
-                <li key={ev.id} className="flex flex-wrap items-center justify-between gap-2 text-sm">
+                editId === ev.id ? (
-                  <span>
+                  <li key={ev.id}>
-                    <span className="font-medium capitalize">{ev.event_type}</span>
+                    <form
-                    {ev.date_value ? (
+                      onSubmit={(e) => {
-                      <span className="text-[var(--muted)]"> — {ev.date_value}</span>
+                        e.preventDefault();
-                    ) : null}
+                        saveEdit();
-                  </span>
+                      }}
-                  <span className="flex items-center gap-3">
+                      className="flex flex-wrap items-end gap-2"
-                    {citeControl(`e:${ev.id}`, { event_id: ev.id }, eventCites(ev.id))}
-                    <button
-                      onClick={() => removeEvent(ev.id)}
-                      className="text-[var(--muted)] hover:text-bronze"
-                      aria-label="Remove"
                     >
-                      ×
+                      <select
-                    </button>
+                        className={`${fieldCls} capitalize`}
-                  </span>
+                        value={edType}
-                </li>
+                        onChange={(e) => setEdType(e.target.value)}
-              ))}
+                      >
+                        {EVENT_TYPES.map((t) => (
+                          <option key={t} value={t} className="capitalize">
+                            {t}
+                          </option>
+                        ))}
+                      </select>
+                      {edType === "other" && (
+                        <Input
+                          className="h-9 w-32"
+                          placeholder="Custom"
+                          value={edTypeOther}
+                          onChange={(e) => setEdTypeOther(e.target.value)}
+                        />
+                      )}
+                      <select className={fieldCls} value={edQual} onChange={(e) => setEdQual(e.target.value)}>
+                        <option value="exact">on</option>
+                        <option value="about">about</option>
+                        <option value="before">before</option>
+                        <option value="after">after</option>
+                      </select>
+                      <input
+                        className={`${fieldCls} w-14`}
+                        inputMode="numeric"
+                        placeholder="Day"
+                        value={edDay}
+                        onChange={(e) => setEdDay(e.target.value)}
+                      />
+                      <select className={fieldCls} value={edMonth} onChange={(e) => setEdMonth(e.target.value)}>
+                        <option value="">—</option>
+                        {MONTHS.map((m, i) => (i > 0 ? <option key={i} value={i}>{m}</option> : null))}
+                      </select>
+                      <input
+                        className={`${fieldCls} w-20`}
+                        inputMode="numeric"
+                        placeholder="Year"
+                        value={edYear}
+                        onChange={(e) => setEdYear(e.target.value)}
+                      />
+                      <Button type="submit" size="sm">
+                        Save
+                      </Button>
+                      <button
+                        type="button"
+                        onClick={() => setEditId(null)}
+                        className="text-xs text-[var(--muted)]"
+                      >
+                        cancel
+                      </button>
+                    </form>
+                  </li>
+                ) : (
+                  <li key={ev.id} className="flex flex-wrap items-center justify-between gap-2 text-sm">
+                    <span>
+                      <span className="font-medium capitalize">{ev.event_type}</span>
+                      {ev.date_value ? (
+                        <span className="text-[var(--muted)]"> — {ev.date_value}</span>
+                      ) : null}
+                    </span>
+                    <span className="flex items-center gap-3">
+                      {citeControl(`e:${ev.id}`, { event_id: ev.id }, eventCites(ev.id))}
+                      <button
+                        onClick={() => startEdit(ev)}
+                        className="text-xs text-bronze hover:underline"
+                      >
+                        edit
+                      </button>
+                      <button
+                        onClick={() => removeEvent(ev.id)}
+                        className="text-[var(--muted)] hover:text-bronze"
+                        aria-label="Remove"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  </li>
+                ),
+              )}
             </ul>
           )}
           <form onSubmit={addEvent} className="flex flex-wrap items-end gap-2">

frontend/app/trees/[id]/tree/chart.css

@@ -0,0 +1,880 @@
+.f3 {
+  --female-color: rgb(196, 138, 146);
+  --male-color: rgb(120, 159, 172);
+  --genderless-color: lightgray;
+  --background-color: rgb(33, 33, 33);
+  --text-color: #fff;
+
+  font-family: 'Roboto', sans-serif;
+}
+
+.f3 * {
+  box-sizing: border-box;
+}
+
+.f3 .cursor-pointer {
+  cursor: pointer;
+}
+.f3 svg.main_svg {
+  width: 100%;
+  height: 100%;
+}
+.f3 svg.main_svg text {
+  fill: currentColor;
+}
+.f3 rect.card-female, .f3 .card-female .card-body-rect, .f3 .card-female .text-overflow-mask {
+  fill: var(--female-color);
+}
+.f3 rect.card-male, .f3 .card-male .card-body-rect, .f3 .card-male .text-overflow-mask {
+  fill: var(--male-color);
+}
+.f3 .card-genderless .card-body-rect, .f3 .card-genderless .text-overflow-mask {
+  fill: var(--genderless-color);
+}
+.f3 .card_add .card-body-rect {
+  fill: #3b5560;
+  stroke-width: 4px;
+  stroke: #fff;
+  cursor: pointer;
+}
+.f3 g.card_add text {
+  fill: #fff;
+}
+.f3 .card-main-outline {
+  stroke: currentColor;
+  stroke-width: 3px;
+}
+.f3 .card_family_tree rect {
+  transition: 0.3s;
+}
+.f3 .card_family_tree:hover rect {
+  transform: scale(1.1);
+}
+.f3 .card_add_relative {
+  cursor: pointer;
+  color: #fff;
+  transition: 0.3s;
+}
+.f3 .card_add_relative circle {
+  fill: rgba(0, 0, 0, 0);
+}
+.f3 .card_add_relative:hover {
+  color: black;
+}
+.f3 .card_edit.pencil_icon {
+  color: #fff;
+  transition: 0.3s;
+}
+.f3 .card_edit.pencil_icon:hover {
+  color: black;
+}
+.f3 .card_break_link, .f3 .link_upper, .f3 .link_lower, .f3 .link_particles {
+  transform-origin: 50% 50%;
+  transition: 1s;
+}
+.f3 .card_break_link {
+  color: #fff;
+}
+.f3 .card_break_link.closed .link_upper {
+  transform: translate(-140.5px, 655.6px);
+}
+.f3 .card_break_link.closed .link_upper g {
+  transform: rotate(-58deg);
+}
+.f3 .card_break_link.closed .link_particles {
+  transform: scale(0);
+}
+.f3 .input-field input {
+  height: 2.5rem !important;
+}
+.f3 .input-field > label:not(.label-icon).active {
+  -webkit-transform: translateY(-8px) scale(0.8);
+  transform: translateY(-8px) scale(0.8);
+}
+.f3.f3-cont {
+  width:100%;
+  height:900px;
+  max-height:70vh;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.f3 {
+  position: relative;
+  display: flex;
+}
+
+
+
+
+/* form-info */
+.f3-form input[type="text"],
+.f3-form textarea,
+.f3-form select {
+  width: 100%;
+  padding: 8px 12px;
+  margin: 8px 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 14px;
+  background: var(--background-color);
+  color: currentColor;
+}
+
+.f3-form input[type="text"]:focus,
+.f3-form textarea:focus,
+.f3-form select:focus {
+  box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
+}
+
+.f3-form button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  margin: 10px 0;
+  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+.f3-form button[type="submit"] {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.f3-cancel-btn {
+  background-color: #ccc;
+}
+
+.f3-form .f3-delete-btn {
+  background-color: transparent;
+  border: 1px solid #f44336;
+  color: #f44336;
+  width: 100%;
+  padding: 5px 10px;
+}
+
+.f3-delete-btn:hover {
+  background-color: #da190b;
+  border-color: #da190b;
+  color: #fff;
+}
+
+.f3-delete-btn:disabled {
+  opacity: 0.5;
+  background-color: transparent;
+  color: #f44336;
+  cursor: not-allowed;
+}
+
+.f3-form .f3-remove-relative-btn {
+  background-color: transparent;
+  border: 1px solid currentColor;
+  color: currentColor;
+  width: 100%;
+  padding: 5px 10px;
+}
+
+.f3-remove-relative-btn:hover, .f3-remove-relative-btn.active {
+  background-color: var(--text-color);
+  border-color: var(--text-color);
+  color: var(--background-color);
+}
+
+.f3-radio-group {
+  margin: 15px 0;
+}
+
+.f3-radio-group label {
+  margin-right: 15px;
+  cursor: pointer;
+}
+
+.f3-radio-group input[type="radio"] {
+  margin-right: 5px;
+}
+
+.f3-info-field-label, .f3-form-field label {
+  font-weight: bold;
+  font-size: 12px;
+  display: block;
+  opacity: 0.8;
+}
+
+.f3-info-field-value {
+  font-weight: normal;
+  display: block;
+  border: none;
+  outline: none;
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+  padding-bottom: 1px;
+  margin-bottom: 10px;
+  min-height: 18px;
+}
+
+.f3-form-buttons {
+  text-align: right;
+}
+
+.f3-form-title {
+  text-align: center;
+}
+
+.f3-form.non-editable .f3-form-buttons,
+.f3-form.non-editable .f3-delete-btn,
+.f3-form.non-editable .f3-remove-relative-btn,
+.f3-form.non-editable .f3-link-existing-relative {
+  display: none;
+}
+
+.f3-close-btn {
+  cursor: pointer;
+  position: absolute;
+  left: 10px;
+  top: 8px;
+  font-size: 30px;
+  color: var(--text-color);
+}
+
+.f3-edit-btn {
+  position: relative;
+  top: -1px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.f3-add-relative-btn {
+  cursor: pointer;
+  width: 27px;
+  height: 27px;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+/* card-html */
+
+.f3 div.card {
+  cursor: pointer;
+  color: var(--text-color);
+  position: relative;
+  line-height: 1.2;
+}
+
+.f3 div.card-image-circle {
+  border-radius: 50%;
+  padding: 5px;
+  width: 90px;
+  height: 90px;
+}
+
+.f3 div.card-image-circle div.card-label {
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  max-width: 150%;
+  min-height: 22px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 3px;
+  padding: 0 5px;
+}
+
+.f3 div.card-image-circle img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.f3 div.card-image-circle svg {
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.f3 div.card-image-circle img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.f3 div.card-rect {
+  padding: 5px;
+  border-radius: 3px;
+  width: 120px;
+  min-height: 70px;
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+
+.f3 div.card-image-rect {
+  width: 200px;
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.f3 div.card-image-rect .person-icon {
+  height: 70px;
+  width: 70px;
+  object-fit: cover;
+  flex: 0 0 auto;
+  padding: 5px;
+  margin-right: 10px;
+}
+
+.f3 div.card-image-rect img {
+  height: 70px;
+  width: 70px;
+  object-fit: cover;
+  flex: 0 0 auto;
+  padding: 5px;
+  margin-right: 10px;
+  border-radius: 8px;
+}
+
+.f3 div.card-image-rect svg {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  border-radius: 7px;
+}
+
+.f3 div.card-image-rect div.card-label {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.f3 div.mini-tree {
+  text-align: right;
+  position: absolute;
+  top: -15px;
+  right: -2px;
+  z-index: -1;
+}
+.f3 div.mini-tree svg {
+  width: 55px;
+}
+
+.f3 .f3-card-duplicate-tag {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  color: rgb(255, 251, 220);
+  background-color: rgba(255, 251, 220, 0);
+  border-radius: 50%;
+  padding: 2px;
+  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+}
+
+.f3 .f3-card-duplicate-hover div.card-inner {
+  transform: translate(0, -2px);
+  outline: 4px solid rgb(255, 251, 220);
+}
+
+.f3 .f3-card-duplicate-hover .f3-card-duplicate-tag {
+  background-color: rgba(255, 251, 220, .8);
+  color: #000;
+}
+
+.f3 .f3-remove-relative-active .card {
+  background-color: var(--background-color);
+}
+
+.f3 .f3-remove-relative-active .card-inner {
+  transition: border 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  opacity: .75;
+}
+
+.f3 .f3-remove-relative-active .card:hover .card-inner {
+  opacity: .25;
+}
+
+.f3 .f3-remove-relative-active .card-male.card-depth--1:hover .card-inner {
+  transform: translate(-8px, -8px);
+}
+
+.f3 .f3-remove-relative-active .card.card-female.card-depth--1:hover .card-inner {
+  transform: translate(8px, -8px);
+}
+
+.f3 .f3-remove-relative-active .card.card-female.card-depth-0:hover .card-inner {
+  transform: translate(8px, 0);
+}
+
+.f3 .f3-remove-relative-active .card.card-male.card-depth-0:hover .card-inner {
+  transform: translate(-8px, 0);
+}
+
+.f3 .f3-remove-relative-active .card.card-depth-1:hover .card-inner {
+  transform: translate(0, 8px);
+}
+
+.f3 .f3-remove-relative-active .card.card-main .card-inner {
+  transform: translate(0, 0)!important;
+  opacity: 1!important;
+}
+
+
+
+.f3 div.card > div {
+  transition: transform 0.2s ease-in-out;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.8);
+}
+
+.f3 .card-inner {
+  outline: 0px solid rgba(255, 255, 255, 1);
+  transition: outline 0.5s ease-in-out;
+}
+
+.f3 div.card-female .card-inner, .f3 div.card-female .person-icon svg {
+  background-color: var(--female-color);
+}
+.f3 div.card-male .card-inner, .f3 div.card-male .person-icon svg {
+  background-color: var(--male-color);
+}
+.f3 div.card-genderless .card-inner, .f3 div.card-genderless .person-icon svg {
+  background-color: var(--genderless-color);
+}
+
+.f3 div.card-new-rel .card-inner, .f3 div.card-new-rel .person-icon svg {
+  background-color: var(--background-color);
+}
+
+.f3 div.card-to-add .card-inner {
+  background-color: var(--background-color);
+  border: 1px solid;
+}
+
+.f3 div.card-to-add .card-inner .card-label {
+  margin: 0 auto;
+}
+
+.f3 div.card-to-add .person-icon {
+  display: none;
+}
+
+.f3 div.card-new-rel .card-inner {
+  border-width: 1px;
+  border-style: dashed;
+  outline: 0px !important;
+}
+.f3 div.card-new-rel.card-female .card-inner, .f3 div.card-to-add.card-female .card-inner {
+  border-color: var(--female-color);
+  color: var(--female-color);
+}
+.f3 div.card-new-rel.card-male .card-inner, .f3 div.card-to-add.card-male .card-inner {
+  color: var(--male-color);
+  border-color: var(--male-color);
+}
+
+.f3 div.card-unknown .card-inner {
+  background-color: var(--background-color);
+  border: 1px solid;
+}
+
+.f3 div.card-unknown .card-inner .card-label {
+  margin: 0 auto;
+}
+
+.f3 div.card-unknown .person-icon {
+  display: none;
+}
+
+.f3 div.card-new-rel .card-inner {
+  border-width: 1px;
+  border-style: dashed;
+  outline: 0px !important;
+}
+.f3 div.card-new-rel.card-female .card-inner, .f3 div.card-unknown.card-female .card-inner {
+  border-color: var(--female-color);
+  color: var(--female-color);
+}
+.f3 div.card-new-rel.card-male .card-inner, .f3 div.card-unknown.card-male .card-inner {
+  color: var(--male-color);
+  border-color: var(--male-color);
+}
+
+.f3 div.card:hover > div {
+  transform: translate(0, -2px);
+}
+.f3 div.card-main .card-inner, .f3 div.card:hover .card-inner {
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
+}
+
+.f3 div.card-main .card-inner {
+  outline: 4px solid rgba(220, 220, 220, 1);
+}
+
+.f3 div.card-inner.f3-path-to-main {
+  outline: 4px solid rgba(255, 255, 255, 1);
+}
+
+.f3 .link {
+  transition: stroke-width 0.2s ease-in-out;
+}
+
+.f3 .link.f3-path-to-main {
+  stroke-width: 4px;
+}
+
+
+
+
+
+.f3-form-cont {
+  position: relative;
+  z-index: 6;
+  right: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  background-color: var(--background-color);
+  overflow: auto;
+  flex: 0 0 auto;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+}
+
+.f3-form-cont.opened {
+  width: 350px;
+}
+
+.f3-form {
+  padding: 20px;
+}
+
+.f3-form hr {
+  border-style: solid; 
+  border-width: thin 0 0 0;
+  opacity: 0.15;
+}
+
+.f3-nav-cont {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+}
+
+.f3-history-controls {
+  padding: 8px 5px 7px 9px;
+  display: inline-block;
+  position: relative;
+  z-index: 2;
+}
+
+.f3-back-button, .f3-forward-button {
+  width: 30px;
+  height: 30px;
+  transition: opacity 0.3s ease;
+  cursor: pointer;
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+  margin-right: 10px;
+  color: currentColor;
+}
+
+.f3-history-controls svg {
+  height: 100%;
+}
+
+.f3-back-button.disabled, .f3-forward-button.disabled {
+  opacity: 0.5;
+}
+
+.f3-modal {
+  display: none;
+  position: absolute;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.f3-modal-content {
+  position: relative;
+  background-color: var(--background-color);
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  border-radius: 5px;
+  width: 500px;
+  max-width: 90%;
+}
+
+.f3-modal-close {
+  color: #aaa;
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.f3-modal-close:hover,
+.f3-modal-close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+} 
+
+.f3-popup {
+  position: fixed;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
+}
+
+.f3-popup-content {
+  position: relative;
+  background-color: var(--background-color);
+  border: 1px solid #888;
+  border-radius: 5px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.f3-popup-nav {
+  height: 20px;
+}
+
+.f3-popup-content-inner {
+  width: 100%;
+  height: 100%;
+}
+
+.f3-popup-close {
+  color: #aaa;
+  position: absolute;
+  z-index: 4;
+  right: 6px;
+  top: 1px;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.f3-popup-close:hover,
+.f3-popup-close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+} 
+
+
+
+.f3-btn {
+  position: relative;
+  cursor: pointer;
+  padding: 5px 10px;
+
+  overflow: hidden;
+
+  border-width: 0;
+  outline: none;
+  border-radius: 3px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+  
+  background-color: var(--text-color);
+  color: var(--background-color);
+  
+  transition: background-color .3s;
+  font-size: 14px;
+}
+
+.f3-btn:hover, .f3-btn:focus {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.f3-female-bg {
+  background-color: var(--female-color);
+}
+
+.f3-male-bg {
+  background-color: var(--male-color);
+}
+
+.f3-genderless-bg {
+  background-color: var(--genderless-color);
+}
+
+.f3-female-color {
+  color: var(--female-color);
+}
+
+.f3-male-color {
+  color: var(--male-color);
+}
+
+.f3-genderless-color {
+  color: var(--genderless-color);
+}
+
+.f3-autocomplete-cont {
+  position: relative;
+  display: inline-block;
+  z-index: 2;
+  font-size: 14px;
+  width: 200px;
+}
+
+.f3-autocomplete input {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  padding: 10px;
+  width: 100%;
+}
+.f3-autocomplete input:focus {
+  outline: none;
+}
+
+.f3-autocomplete-toggle {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: color 0.3s ease-in-out;
+  width: 20px;
+}
+
+.f3-autocomplete-items {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: none;
+  overflow-y: auto;
+  max-height: 0;
+  background-color: var(--background-color);
+  transition: max-height 0.3s ease-in-out;
+}
+
+.f3-autocomplete.active .f3-autocomplete-items {
+  max-height: 300px;
+}
+
+.f3-autocomplete-item > div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: var(--background-color);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+.f3-autocomplete-item > div:hover, .f3-autocomplete-item.f3-selected > div {
+  background-color: var(--text-color);
+  color: var(--background-color);
+}
+
+.f3-autocomplete-active {
+  background-color: DodgerBlue !important;
+  color: #ffffff;
+}
+
+.f3-kinship-info {
+  padding: 10px 20px;
+}
+
+.f3-kinship-info .f3-info-field {
+  color:#b3b01e
+}
+
+.f3-kinship-info-icon {
+  cursor:pointer;
+  display:inline-block;
+  width:18px;
+  height:18px;
+  color:#04a4f4;
+  position:relative;
+  top:4px;
+  left:2px;
+}
+
+.f3-kinship-info .f3 {
+  width:100%;
+  height: 100%;
+  position:relative;
+  background-color:rgb(33,33,33);
+  color:#fff;
+}
+
+.f3 .f3-kinship-info .card-kinship-self {
+  min-height: 0px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: var(--background-color) !important;
+  border: solid 3px;
+  color: #437fae;
+  font-weight: bold;
+}
+
+.f3 .f3-kinship-info .card-kinship-self.f3-real-label {
+  width: 150px;
+  height: 50px;
+  border-radius: 50px;
+}
+
+.f3 .f3-kinship-info .card-kinship-rel {
+  min-height: 0px;
+  width: 150px;
+  height: 50px;
+  border-radius: 50px;
+  background-color: #1d3456 !important;
+  font-weight: bold;
+}
+
+.f3 .f3-kinship-info .card-kinship-default {
+  min-height: 0px;
+  width: 150px;
+  height: 50px;
+  border-radius: 50px;
+  background-color: var(--background-color) !important;
+  border: solid 1px;
+}
+
+.f3-kinship-labels-toggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  font-size: 12px;
+}
+
+.f3-kinship-labels-toggle label {
+  cursor: pointer;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  padding: 2px 5px;
+}
+
+.f3-kinship-labels-toggle input[type="checkbox"] {
+  cursor: pointer;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}

frontend/app/trees/[id]/tree/page.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+// Vendored from family-chart/dist/styles (the package blocks the CSS subpath export).
+import "./chart.css";
+
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import type { components } from "@/lib/api/schema";
+import { Button } from "@/components/ui/button";
+import { FanChart } from "@/components/fan-chart";
+
+type Person = components["schemas"]["PersonRead"];
+type Relationship = components["schemas"]["RelationshipRead"];
+type Event = components["schemas"]["EventRead"];
+type Mode = "landscape" | "portrait" | "fan";
+
+function splitName(name: string | null | undefined): [string, string] {
+  const t = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  if (t.length <= 1) return [name ?? "", ""];
+  return [t.slice(0, -1).join(" "), t[t.length - 1]];
+}
+
+export default function TreePage() {
+  const router = useRouter();
+  const params = useParams<{ id: string }>();
+  const treeId = params.id;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [people, setPeople] = useState<Person[]>([]);
+  const [rels, setRels] = useState<Relationship[]>([]);
+  const [events, setEvents] = useState<Event[]>([]);
+  const [status, setStatus] = useState<"loading" | "empty" | "ready" | "error">("loading");
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>("landscape");
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const p = await api.GET("/api/v1/trees/{tree_id}/persons", {
+        params: { path: { tree_id: treeId } },
+      });
+      if (p.response.status === 401) {
+        router.push("/login");
+        return;
+      }
+      const [r, e] = await Promise.all([
+        api.GET("/api/v1/trees/{tree_id}/relationships", { params: { path: { tree_id: treeId } } }),
+        api.GET("/api/v1/trees/{tree_id}/events", { params: { path: { tree_id: treeId } } }),
+      ]);
+      if (cancelled) return;
+      const ppl = p.data ?? [];
+      setPeople(ppl);
+      setRels(r.data ?? []);
+      setEvents(e.data ?? []);
+      setFocusId((cur) => cur ?? ppl[0]?.id ?? null);
+      setStatus(ppl.length ? "ready" : "empty");
+    })().catch(() => !cancelled && setStatus("error"));
+    return () => {
+      cancelled = true;
+    };
+  }, [router, treeId]);
+
+  const byId = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]);
+  const parentsOf = useCallback(
+    (id: string) =>
+      rels.filter((x) => x.type === "parent_child" && x.person_to_id === id).map((x) => x.person_from_id),
+    [rels],
+  );
+  const childrenOf = useCallback(
+    (id: string) =>
+      rels.filter((x) => x.type === "parent_child" && x.person_from_id === id).map((x) => x.person_to_id),
+    [rels],
+  );
+  const partnersOf = useCallback(
+    (id: string) =>
+      rels
+        .filter((x) => x.type === "partnership" && (x.person_from_id === id || x.person_to_id === id))
+        .map((x) => (x.person_from_id === id ? x.person_to_id : x.person_from_id)),
+    [rels],
+  );
+  const years = useMemo(() => {
+    const m = new Map<string, string>();
+    for (const ev of events) {
+      if (ev.person_id && ev.event_type === "birth" && !m.has(ev.person_id)) {
+        const y = ev.date_start ? ev.date_start.slice(0, 4) : ev.date_value ?? "";
+        if (y) m.set(ev.person_id, y);
+      }
+    }
+    return m;
+  }, [events]);
+  const nameOf = useCallback((id: string) => byId.get(id)?.primary_name ?? "Unknown", [byId]);
+  const yearOf = useCallback((id: string) => years.get(id) ?? "", [years]);
+
+  // family-chart for landscape/portrait. Intentionally not keyed on focusId —
+  // card clicks recenter via updateMainId without rebuilding the chart.
+  useEffect(() => {
+    if (status !== "ready" || mode === "fan" || !containerRef.current) return;
+    let cancelled = false;
+    (async () => {
+      const data = people.map((pp) => {
+        const [fn, ln] = splitName(pp.primary_name);
+        return {
+          id: pp.id,
+          data: {
+            "first name": fn || "Unnamed",
+            "last name": ln,
+            birthday: years.get(pp.id) ?? "",
+            gender: pp.gender === "female" ? "F" : "M",
+          },
+          rels: { spouses: partnersOf(pp.id), parents: parentsOf(pp.id), children: childrenOf(pp.id) },
+        };
+      });
+      const f3 = await import("family-chart");
+      if (cancelled || !containerRef.current) return;
+      containerRef.current.innerHTML = "";
+      const chart = f3.createChart(containerRef.current, data);
+      chart
+        .setCardHtml()
+        .setCardDisplay([["first name", "last name"], ["birthday"]])
+        .setOnCardClick((_e: unknown, d: { data?: { id?: string } }) => {
+          const id = d?.data?.id;
+          if (id) {
+            setFocusId(id);
+            chart.updateMainId(id);
+            chart.updateTree();
+          }
+        });
+      if (mode === "portrait") chart.setOrientationVertical();
+      else chart.setOrientationHorizontal();
+      if (focusId) chart.updateMainId(focusId);
+      chart.updateTree({ initial: true });
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, mode, people, rels, events]);
+
+  const ModeButton = ({ m, label }: { m: Mode; label: string }) => (
+    <button
+      onClick={() => setMode(m)}
+      className={`rounded-md px-3 py-1.5 text-sm transition-colors ${
+        mode === m ? "bg-bronze text-paper" : "text-[var(--muted)] hover:text-[var(--foreground)]"
+      }`}
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-2xl font-semibold">Tree</h1>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center rounded-lg border border-[var(--border)] p-0.5">
+            <ModeButton m="landscape" label="Landscape" />
+            <ModeButton m="portrait" label="Portrait" />
+            <ModeButton m="fan" label="Fan" />
+          </div>
+          {focusId && (
+            <Link
+              href={`/trees/${treeId}/persons/${focusId}`}
+              className="text-sm text-bronze hover:underline"
+            >
+              Open {nameOf(focusId)} →
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {status === "empty" && (
+        <p className="text-[var(--muted)]">No people yet — add some under People, or import a GEDCOM.</p>
+      )}
+      {status === "error" && <p className="text-[var(--muted)]">Could not render the tree.</p>}
+
+      {status === "ready" && mode === "fan" && focusId ? (
+        <div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4">
+          <FanChart
+            focusId={focusId}
+            parentsOf={parentsOf}
+            nameOf={nameOf}
+            yearOf={yearOf}
+            onSelect={setFocusId}
+          />
+        </div>
+      ) : (
+        <div
+          ref={containerRef}
+          className="f3 rounded-xl border border-[var(--border)]"
+          style={{ width: "100%", height: "74vh", background: "var(--surface)" }}
+        />
+      )}
+
+      <p className="text-sm text-[var(--muted)]">
+        {mode === "fan"
+          ? "Click an ancestor to recenter the fan."
+          : "Drag to pan · scroll to zoom · click a person to recenter."}
+      </p>
+    </div>
+  );
+}

frontend/app/trees/page.tsx

@@ -77,7 +77,7 @@ export default function TreesPage() {
             <li key={tree.id}>
               <Card className="transition-colors hover:border-bronze/50">
                 <CardContent className="flex items-center justify-between p-4">
-                  <Link href={`/trees/${tree.id}`} className="min-w-0 flex-1">
+                  <Link href={`/trees/${tree.id}/tree`} className="min-w-0 flex-1">
                     <div className="truncate font-medium">{tree.name}</div>
                     <div className="text-xs uppercase tracking-wide text-bronze">
                       {tree.visibility}

frontend/components/app-sidebar.tsx

@@ -7,6 +7,7 @@ import {
   FolderTree,
   Image as ImageIcon,
   LogOut,
+  Network,
   Users,
 } from "lucide-react";
 import Link from "next/link";
@@ -77,6 +78,12 @@ export function AppSidebar() {
           <div className="truncate px-3 pb-1 text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
             {treeName ?? "Tree"}
           </div>
+          <Item
+            href={`/trees/${treeId}/tree`}
+            label="Tree"
+            icon={Network}
+            active={pathname.startsWith(`/trees/${treeId}/tree`)}
+          />
           <Item
             href={`/trees/${treeId}`}
             label="People"

frontend/components/fan-chart.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+// Radial fan chart of a focus person's ancestors (family-chart has no fan).
+// Each generation is a ring; slot p in generation g descends from slot floor(p/2)
+// in g-1. Click a wedge to refocus.
+
+type Props = {
+  focusId: string;
+  parentsOf: (id: string) => string[];
+  nameOf: (id: string) => string;
+  yearOf: (id: string) => string;
+  onSelect: (id: string) => void;
+  generations?: number;
+};
+
+const SIZE = 720;
+const CENTER = SIZE / 2;
+const FOCUS_R = 46;
+const SPAN = Math.PI * 1.6; // 288° fan
+
+function polar(r: number, a: number): [number, number] {
+  // a = 0 points up, increasing clockwise.
+  return [CENTER + r * Math.sin(a), CENTER - r * Math.cos(a)];
+}
+
+function sector(r0: number, r1: number, a0: number, a1: number): string {
+  const [x0, y0] = polar(r1, a0);
+  const [x1, y1] = polar(r1, a1);
+  const [x2, y2] = polar(r0, a1);
+  const [x3, y3] = polar(r0, a0);
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  return `M${x0} ${y0} A${r1} ${r1} 0 ${large} 1 ${x1} ${y1} L${x2} ${y2} A${r0} ${r0} 0 ${large} 0 ${x3} ${y3} Z`;
+}
+
+function clip(s: string, n: number): string {
+  return s.length > n ? s.slice(0, n - 1) + "…" : s;
+}
+
+export function FanChart({
+  focusId,
+  parentsOf,
+  nameOf,
+  yearOf,
+  onSelect,
+  generations = 4,
+}: Props) {
+  const gens: (string | null)[][] = [[focusId]];
+  for (let g = 1; g <= generations; g++) {
+    const row: (string | null)[] = [];
+    for (const slot of gens[g - 1]) {
+      const ps = slot ? parentsOf(slot) : [];
+      row.push(ps[0] ?? null, ps[1] ?? null);
+    }
+    gens.push(row);
+  }
+
+  const ringT = (CENTER - 60 - FOCUS_R) / generations;
+  const start = -SPAN / 2;
+  const wedges: React.ReactNode[] = [];
+
+  for (let g = 1; g <= generations; g++) {
+    const row = gens[g];
+    const w = SPAN / row.length;
+    const r0 = FOCUS_R + (g - 1) * ringT;
+    const r1 = FOCUS_R + g * ringT;
+    row.forEach((id, i) => {
+      const a0 = start + i * w;
+      const a1 = start + (i + 1) * w;
+      const mid = (a0 + a1) / 2;
+      const [tx, ty] = polar((r0 + r1) / 2, mid);
+      let deg = (mid * 180) / Math.PI;
+      if (deg > 90 || deg < -90) deg += 180; // keep text upright
+      wedges.push(
+        <g
+          key={`${g}-${i}`}
+          onClick={() => id && onSelect(id)}
+          style={{ cursor: id ? "pointer" : "default" }}
+        >
+          <path
+            d={sector(r0 + 1, r1 - 1, a0 + 0.004, a1 - 0.004)}
+            fill={id ? "var(--surface)" : "transparent"}
+            stroke="var(--border)"
+          />
+          {id && (
+            <text
+              x={tx}
+              y={ty}
+              transform={`rotate(${deg} ${tx} ${ty})`}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              style={{ fontSize: g >= 3 ? 9 : 11, fill: "var(--foreground)" }}
+            >
+              {clip(nameOf(id), g >= 3 ? 12 : 18)}
+            </text>
+          )}
+        </g>,
+      );
+    });
+  }
+
+  const [fx, fy] = [CENTER, CENTER];
+  return (
+    <div className="overflow-auto">
+      <svg viewBox={`0 0 ${SIZE} ${SIZE}`} className="mx-auto block w-full max-w-3xl">
+        {wedges}
+        <circle cx={fx} cy={fy} r={FOCUS_R} fill="var(--color-bronze)" />
+        <text
+          x={fx}
+          y={fy - 4}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: 12, fill: "var(--color-paper)", fontWeight: 600 }}
+        >
+          {clip(nameOf(focusId), 12)}
+        </text>
+        <text
+          x={fx}
+          y={fy + 12}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: 10, fill: "var(--color-paper)" }}
+        >
+          {yearOf(focusId)}
+        </text>
+      </svg>
+    </div>
+  );
+}

frontend/lib/api/schema.d.ts

@@ -243,7 +243,8 @@ export interface paths {
         delete: operations["delete_person_api_v1_trees__tree_id__persons__person_id__delete"];
         options?: never;
         head?: never;
-        patch?: never;
+        /** Update Person */
+        patch: operations["update_person_api_v1_trees__tree_id__persons__person_id__patch"];
         trace?: never;
     };
     "/api/v1/trees/{tree_id}/persons/{person_id}/restore": {
@@ -312,7 +313,8 @@ export interface paths {
         delete: operations["delete_event_api_v1_trees__tree_id__events__event_id__delete"];
         options?: never;
         head?: never;
-        patch?: never;
+        /** Update Event */
+        patch: operations["update_event_api_v1_trees__tree_id__events__event_id__patch"];
         trace?: never;
     };
     "/api/v1/trees/{tree_id}/relationships": {
@@ -676,6 +678,27 @@ export interface components {
              */
             created_at: string;
         };
+        /** EventUpdate */
+        EventUpdate: {
+            /** Event Type */
+            event_type?: string | null;
+            /** Place Id */
+            place_id?: string | null;
+            /** Date Value */
+            date_value?: string | null;
+            /** Date Start */
+            date_start?: string | null;
+            /** Date End */
+            date_end?: string | null;
+            /** Date Precision */
+            date_precision?: string | null;
+            /** Calendar */
+            calendar?: string | null;
+            /** Detail */
+            detail?: string | null;
+            /** Notes */
+            notes?: string | null;
+        };
         /** HTTPValidationError */
         HTTPValidationError: {
             /** Detail */
@@ -798,6 +821,20 @@ export interface components {
              */
             created_at: string;
         };
+        /** PersonUpdate */
+        PersonUpdate: {
+            /** Given */
+            given?: string | null;
+            /** Surname */
+            surname?: string | null;
+            /** Gender */
+            gender?: string | null;
+            /** Is Living */
+            is_living?: boolean | null;
+            privacy?: components["schemas"]["PersonPrivacy"] | null;
+            /** Notes */
+            notes?: string | null;
+        };
         /** RegisterRequest */
         RegisterRequest: {
             /** Email */
@@ -1412,6 +1449,7 @@ export interface operations {
         parameters: {
             query?: {
                 deleted?: boolean;
+                q?: string | null;
             };
             header?: never;
             path: {
@@ -1538,6 +1576,42 @@ export interface operations {
             };
         };
     };
+    update_person_api_v1_trees__tree_id__persons__person_id__patch: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                tree_id: string;
+                person_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PersonUpdate"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PersonRead"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     restore_person_api_v1_trees__tree_id__persons__person_id__restore_post: {
         parameters: {
             query?: never;
@@ -1698,6 +1772,42 @@ export interface operations {
             };
         };
     };
+    update_event_api_v1_trees__tree_id__events__event_id__patch: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                tree_id: string;
+                event_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["EventUpdate"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["EventRead"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     list_relationships_api_v1_trees__tree_id__relationships_get: {
         parameters: {
             query?: never;

frontend/openapi.json

@@ -564,6 +564,22 @@
               "default": false,
               "title": "Deleted"
             }
+          },
+          {
+            "name": "q",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "type": "null"
+                }
+              ],
+              "title": "Q"
+            }
           }
         ],
         "responses": {
@@ -595,6 +611,67 @@
       }
     },
     "/api/v1/trees/{tree_id}/persons/{person_id}": {
+      "patch": {
+        "tags": [
+          "persons"
+        ],
+        "summary": "Update Person",
+        "operationId": "update_person_api_v1_trees__tree_id__persons__person_id__patch",
+        "parameters": [
+          {
+            "name": "tree_id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string",
+              "format": "uuid",
+              "title": "Tree Id"
+            }
+          },
+          {
+            "name": "person_id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string",
+              "format": "uuid",
+              "title": "Person Id"
+            }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/PersonUpdate"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/PersonRead"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      },
       "delete": {
         "tags": [
           "persons"
@@ -900,6 +977,67 @@
       }
     },
     "/api/v1/trees/{tree_id}/events/{event_id}": {
+      "patch": {
+        "tags": [
+          "events"
+        ],
+        "summary": "Update Event",
+        "operationId": "update_event_api_v1_trees__tree_id__events__event_id__patch",
+        "parameters": [
+          {
+            "name": "tree_id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string",
+              "format": "uuid",
+              "title": "Tree Id"
+            }
+          },
+          {
+            "name": "event_id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string",
+              "format": "uuid",
+              "title": "Event Id"
+            }
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/EventUpdate"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/EventRead"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      },
       "delete": {
         "tags": [
           "events"
@@ -2345,6 +2483,114 @@
         ],
         "title": "EventRead"
       },
+      "EventUpdate": {
+        "properties": {
+          "event_type": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Event Type"
+          },
+          "place_id": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "uuid"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Place Id"
+          },
+          "date_value": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Date Value"
+          },
+          "date_start": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "date"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Date Start"
+          },
+          "date_end": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "date"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Date End"
+          },
+          "date_precision": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Date Precision"
+          },
+          "calendar": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Calendar"
+          },
+          "detail": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Detail"
+          },
+          "notes": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Notes"
+          }
+        },
+        "type": "object",
+        "title": "EventUpdate"
+      },
       "HTTPValidationError": {
         "properties": {
           "detail": {
@@ -2693,6 +2939,77 @@
         ],
         "title": "PersonRead"
       },
+      "PersonUpdate": {
+        "properties": {
+          "given": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Given"
+          },
+          "surname": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Surname"
+          },
+          "gender": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Gender"
+          },
+          "is_living": {
+            "anyOf": [
+              {
+                "type": "boolean"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Is Living"
+          },
+          "privacy": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/PersonPrivacy"
+              },
+              {
+                "type": "null"
+              }
+            ]
+          },
+          "notes": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Notes"
+          }
+        },
+        "type": "object",
+        "title": "PersonUpdate"
+      },
       "RegisterRequest": {
         "properties": {
           "email": {

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "family-chart": "^0.9.0",
         "lucide-react": "^0.469.0",
         "next": "^15.1.0",
         "openapi-fetch": "^0.13.0",
@@ -1111,12 +1112,390 @@
       "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
       "dev": true
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "dev": true
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1134,6 +1513,14 @@
         }
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+      "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1156,6 +1543,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/family-chart": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/family-chart/-/family-chart-0.9.0.tgz",
+      "integrity": "sha512-+JdLr1Oo+YFnQWUXgdnk4nCMTbe1MXKdpbx3KEBXPeq2oX+2v5ccmrcK39CZ761/zQfgSHFZ2cT/+gbaeeACcA==",
+      "dependencies": {
+        "d3": "^7.9.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1181,6 +1576,17 @@
         "node": ">= 14"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/index-to-position": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/index-to-position/-/index-to-position-1.2.0.tgz",
@@ -1193,6 +1599,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -1734,6 +2148,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+      "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA=="
+    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",

frontend/package.json

@@ -10,23 +10,24 @@
     "gen:api": "openapi-typescript ./openapi.json -o ./lib/api/schema.d.ts --default-non-nullable false"
   },
   "dependencies": {
-    "next": "^15.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "openapi-fetch": "^0.13.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.6.0",
+    "family-chart": "^0.9.0",
-    "lucide-react": "^0.469.0"
+    "lucide-react": "^0.469.0",
+    "next": "^15.1.0",
+    "openapi-fetch": "^0.13.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.10.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.0",
+    "openapi-typescript": "^7.5.0",
-    "@tailwindcss/postcss": "^4.0.0",
     "postcss": "^8.4.49",
-    "openapi-typescript": "^7.5.0"
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0"
   }
 }

frontend/types/family-chart.d.ts

@@ -0,0 +1,2 @@
+declare module "family-chart";
+declare module "family-chart/dist/styles/family-chart.css";