@octo-cyber/kinship-calc 0.5.2

package/web/components/FamilyTreeDialogs.tsx

@@ -0,0 +1,275 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Input } from '@octo-cyber/ui/components/ui/input'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@octo-cyber/ui/components/ui/select'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@octo-cyber/ui/components/ui/dialog'
+import { kinshipService } from '../services/kinship-service'
+import type { FamilyTree, FamilyTreeGraph, FamilyTreePerson } from '../types/kinship'
+import { ATOM_LABELS } from '../types/kinship'
+
+export function NewTreeDialog({ open, onClose, onCreated }: {
+  open: boolean; onClose: () => void; onCreated: (tree: FamilyTree) => void
+}) {
+  const t = useTranslations('kinship')
+  const [name, setName] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  function handleOpenChange(v: boolean) { if (!v) { setName(''); onClose() } }
+
+  async function handleSubmit() {
+    if (!name.trim()) { toast.error('请输入家谱名称'); return }
+    setSaving(true)
+    try {
+      const tree = await kinshipService.createTree({ name: name.trim() })
+      setName('')
+      onCreated(tree)
+    } catch (err) {
+      toast.error((err as Error).message)
+    } finally { setSaving(false) }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{t('tree.newTitle')}</DialogTitle></DialogHeader>
+        <div className="space-y-3 py-2">
+          <Label>{t('tree.nameLabel')}</Label>
+          <Input value={name} onChange={(e) => setName(e.target.value)}
+            placeholder={t('tree.namePlaceholder')} autoFocus
+            onKeyDown={(e) => e.key === 'Enter' && handleSubmit()} />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={saving || !name.trim()}>
+            {saving ? '保存中…' : t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function AddPersonDialog({ open, treeId, onClose, onAdded }: {
+  open: boolean; treeId: number; onClose: () => void; onAdded: () => void
+}) {
+  const t = useTranslations('kinship')
+  const [name, setName] = useState('')
+  const [gender, setGender] = useState<'male' | 'female'>('male')
+  const [birthYear, setBirthYear] = useState('')
+  const [isRoot, setIsRoot] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  function handleOpenChange(v: boolean) {
+    if (!v) { setName(''); setBirthYear(''); setIsRoot(false); onClose() }
+  }
+
+  async function handleSubmit() {
+    if (!name.trim()) { toast.error('请输入成员姓名'); return }
+    const year = birthYear ? parseInt(birthYear) : undefined
+    if (year !== undefined && (isNaN(year) || year < 1000 || year > 2100)) {
+      toast.error('出生年份格式不正确'); return
+    }
+    setSaving(true)
+    try {
+      await kinshipService.addPerson({ treeId, name: name.trim(), gender, birthYear: year, isRoot })
+      setName(''); setBirthYear(''); setIsRoot(false)
+      onAdded()
+    } catch (err) {
+      toast.error((err as Error).message)
+    } finally { setSaving(false) }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{t('tree.addPersonTitle')}</DialogTitle></DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="space-y-1">
+            <Label>{t('person.name')}</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} autoFocus
+              onKeyDown={(e) => e.key === 'Enter' && handleSubmit()} />
+          </div>
+          <div className="space-y-1">
+            <Label>{t('person.gender')}</Label>
+            <Select value={gender} onValueChange={(v) => setGender(v as 'male' | 'female')}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="male">{t('gender.male')}</SelectItem>
+                <SelectItem value="female">{t('gender.female')}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label>{t('person.birthYear')}</Label>
+            <Input type="number" value={birthYear} onChange={(e) => setBirthYear(e.target.value)} placeholder="可选" />
+          </div>
+          <label className="flex cursor-pointer items-center gap-2 text-sm">
+            <input type="checkbox" checked={isRoot} onChange={(e) => setIsRoot(e.target.checked)} />
+            {t('person.isRoot')}
+          </label>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={saving || !name.trim()}>
+            {saving ? '保存中…' : t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function EditPersonDialog({ open, person, treeId, onClose, onSaved }: {
+  open: boolean
+  person: FamilyTreePerson
+  treeId: number
+  onClose: () => void
+  onSaved: () => void
+}) {
+  const t = useTranslations('kinship')
+  const [name, setName] = useState(person.name)
+  const [gender, setGender] = useState<'male' | 'female'>(person.gender)
+  const [birthYear, setBirthYear] = useState(person.birthYear?.toString() ?? '')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    setName(person.name)
+    setGender(person.gender)
+    setBirthYear(person.birthYear?.toString() ?? '')
+  }, [person])
+
+  async function handleSubmit() {
+    if (!name.trim()) { toast.error('请输入成员姓名'); return }
+    const year = birthYear ? parseInt(birthYear) : null
+    if (year !== null && (isNaN(year) || year < 1000 || year > 2100)) {
+      toast.error('出生年份格式不正确'); return
+    }
+    setSaving(true)
+    try {
+      await kinshipService.updatePerson(person.id, treeId, { name: name.trim(), gender, birthYear: year })
+      onSaved()
+    } catch (err) {
+      toast.error((err as Error).message)
+    } finally { setSaving(false) }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent>
+        <DialogHeader><DialogTitle>编辑成员</DialogTitle></DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="space-y-1">
+            <Label>{t('person.name')}</Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} autoFocus />
+          </div>
+          <div className="space-y-1">
+            <Label>{t('person.gender')}</Label>
+            <Select value={gender} onValueChange={(v) => setGender(v as 'male' | 'female')}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="male">{t('gender.male')}</SelectItem>
+                <SelectItem value="female">{t('gender.female')}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label>{t('person.birthYear')}</Label>
+            <Input type="number" value={birthYear} onChange={(e) => setBirthYear(e.target.value)} placeholder="可选" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={saving || !name.trim()}>
+            {saving ? '保存中…' : t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function AddRelationDialog({ open, graph, onClose, onAdded }: {
+  open: boolean; graph: FamilyTreeGraph; onClose: () => void; onAdded: () => void
+}) {
+  const t = useTranslations('kinship')
+  const [fromId, setFromId] = useState('')
+  const [toId, setToId] = useState('')
+  const [relationType, setRelationType] = useState('F')
+  const [saving, setSaving] = useState(false)
+
+  function handleOpenChange(v: boolean) {
+    if (!v) { setFromId(''); setToId(''); setRelationType('F'); onClose() }
+  }
+
+  async function handleSubmit() {
+    if (!fromId || !toId) { toast.error('请选择双方成员'); return }
+    if (fromId === toId) { toast.error('不能建立自身关系'); return }
+    setSaving(true)
+    try {
+      await kinshipService.addRelation({
+        treeId: graph.tree.id,
+        fromPersonId: parseInt(fromId),
+        toPersonId: parseInt(toId),
+        relationType,
+      })
+      setFromId(''); setToId(''); setRelationType('F')
+      onAdded()
+    } catch (err) {
+      toast.error((err as Error).message)
+    } finally { setSaving(false) }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{t('tree.addRelationTitle')}</DialogTitle></DialogHeader>
+        <div className="space-y-3 py-2">
+          <div className="space-y-1">
+            <Label>{t('relation.from')}</Label>
+            <Select value={fromId} onValueChange={setFromId}>
+              <SelectTrigger><SelectValue placeholder={t('relation.selectPerson')} /></SelectTrigger>
+              <SelectContent>
+                {graph.persons.map((p) => (
+                  <SelectItem key={p.id} value={p.id.toString()}>{p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label>{t('relation.type')}</Label>
+            <Select value={relationType} onValueChange={setRelationType}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {Object.entries(ATOM_LABELS).map(([code, label]) => (
+                  <SelectItem key={code} value={code}>{label}（{code}）</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label>{t('relation.to')}</Label>
+            <Select value={toId} onValueChange={setToId}>
+              <SelectTrigger><SelectValue placeholder={t('relation.selectPerson')} /></SelectTrigger>
+              <SelectContent>
+                {graph.persons.map((p) => (
+                  <SelectItem key={p.id} value={p.id.toString()}>{p.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={saving || !fromId || !toId}>
+            {saving ? '保存中…' : t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/web/components/KinshipResultCard.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { Card, CardContent, CardHeader, CardTitle } from '@octo-cyber/ui/components/ui/card'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { AlertCircle, CheckCircle2, ArrowLeftRight } from 'lucide-react'
+import type { KinshipResult, Region } from '../types/kinship'
+import { REGION_LABELS } from '../types/kinship'
+
+interface KinshipResultCardProps {
+  result: KinshipResult
+  currentRegion: Region
+  className?: string
+}
+
+export function KinshipResultCard({ result, currentRegion, className }: KinshipResultCardProps) {
+  const t = useTranslations('kinship')
+
+  const generationLabel = result.generationDelta > 0
+    ? t('generation.elder', { n: result.generationDelta })
+    : result.generationDelta < 0
+      ? t('generation.younger', { n: Math.abs(result.generationDelta) })
+      : t('generation.same')
+
+  const variantEntries = Object.entries(result.variants) as [Region, string][]
+
+  return (
+    <Card className={`border-2 ${result.isExact ? 'border-green-500/30 dark:border-green-500/20' : 'border-amber-500/30 dark:border-amber-500/20'} ${className}`}>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          {result.isExact
+            ? <CheckCircle2 className="h-4 w-4 text-green-500" />
+            : <AlertCircle className="h-4 w-4 text-amber-500" />}
+          {t('result.title')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Main title */}
+        <div className="text-center">
+          <div className="text-5xl font-bold tracking-wide text-foreground">{result.title}</div>
+          {result.title !== result.standardTitle && (
+            <div className="mt-1 text-sm text-muted-foreground">
+              {t('result.standard')}: {result.standardTitle}
+            </div>
+          )}
+        </div>
+
+        {/* Meta info */}
+        <div className="flex flex-wrap justify-center gap-2">
+          <Badge variant="outline">{generationLabel}</Badge>
+          <Badge variant="outline">
+            {result.relativeGender === 'male' ? t('gender.male') : result.relativeGender === 'female' ? t('gender.female') : t('gender.unknown')}
+          </Badge>
+          <Badge variant={result.isExact ? 'default' : 'secondary'}>
+            {result.isExact ? t('result.exact') : t('result.estimated')}
+          </Badge>
+        </div>
+
+        {/* Reverse title */}
+        {result.reverseTitle && (
+          <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
+            <ArrowLeftRight className="h-3.5 w-3.5" />
+            <span>{t('result.reverseTitle')}: <strong className="text-foreground">{result.reverseTitle}</strong></span>
+          </div>
+        )}
+
+        {/* Regional variants */}
+        {variantEntries.length > 1 && (
+          <div className="space-y-1.5">
+            <div className="text-xs font-medium text-muted-foreground">{t('result.variants')}</div>
+            <div className="grid grid-cols-2 gap-1.5 sm:grid-cols-3">
+              {variantEntries.map(([region, variant]) => (
+                <div
+                  key={region}
+                  className={`rounded border px-2 py-1 text-center text-xs ${
+                    region === currentRegion
+                      ? 'border-primary/40 bg-primary/5 font-medium text-primary dark:bg-primary/10'
+                      : 'border-border bg-muted/30 dark:bg-zinc-800/30'
+                  }`}
+                >
+                  <div className="text-muted-foreground">{REGION_LABELS[region]?.split('（')[0]}</div>
+                  <div className="font-medium">{variant}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Note */}
+        {result.note && (
+          <div className="rounded bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground dark:bg-zinc-800/40">
+            {result.note}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/web/components/RegionSelector.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@octo-cyber/ui/components/ui/select'
+import type { Region } from '../types/kinship'
+
+const REGIONS: Region[] = ['standard', 'northern', 'southern', 'cantonese', 'minnan', 'wu']
+
+interface RegionSelectorProps {
+  value: Region
+  onChange: (region: Region) => void
+  className?: string
+}
+
+export function RegionSelector({ value, onChange, className }: RegionSelectorProps) {
+  const t = useTranslations('kinship')
+
+  return (
+    <Select value={value} onValueChange={(v) => onChange(v as Region)}>
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={t('selectRegion')} />
+      </SelectTrigger>
+      <SelectContent>
+        {REGIONS.map((r) => (
+          <SelectItem key={r} value={r}>
+            {t(`regions.${r}`)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/web/components/RelationChainBuilder.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { ArrowRight, Delete, RotateCcw } from 'lucide-react'
+import { useKinshipStore } from '../stores/kinship-store'
+import { ATOM_LABELS } from '../types/kinship'
+
+const ATOM_GROUPS = [
+  { label: '长辈', atoms: ['F', 'M'] },
+  { label: '晚辈', atoms: ['S', 'D'] },
+  { label: '兄弟姐妹', atoms: ['B+', 'B-', 'Z+', 'Z-'] },
+  { label: '配偶', atoms: ['H', 'W'] },
+]
+
+interface RelationChainBuilderProps {
+  onCalculate?: () => void
+}
+
+export function RelationChainBuilder({ onCalculate }: RelationChainBuilderProps) {
+  const t = useTranslations('kinship')
+  const {
+    chain, atoms, addAtom, removeLastAtom, clearChain,
+    isLoading, loadAtoms,
+  } = useKinshipStore()
+
+  useEffect(() => {
+    loadAtoms()
+  }, [loadAtoms])
+
+  return (
+    <div className="space-y-4">
+      {/* Current chain display */}
+      <div className="min-h-12 flex flex-wrap items-center gap-1 rounded-lg border bg-muted/40 px-3 py-2 dark:bg-zinc-800/40">
+        {chain.length === 0 ? (
+          <span className="text-sm text-muted-foreground">{t('chain.empty')}</span>
+        ) : (
+          chain.map((atom, i) => (
+            <span key={i} className="flex items-center gap-1">
+              {i > 0 && <ArrowRight className="h-3 w-3 text-muted-foreground" />}
+              <Badge variant="secondary" className="text-sm font-medium">
+                {ATOM_LABELS[atom] ?? atom}
+              </Badge>
+            </span>
+          ))
+        )}
+      </div>
+
+      {/* Atom buttons grouped by category */}
+      <div className="space-y-2">
+        {ATOM_GROUPS.map((group) => (
+          <div key={group.label} className="flex items-center gap-2 flex-wrap">
+            <span className="w-20 shrink-0 text-xs text-muted-foreground">{group.label}</span>
+            {group.atoms.map((atom) => (
+              <Button
+                key={atom}
+                variant="outline"
+                size="sm"
+                onClick={() => addAtom(atom)}
+                className="dark:border-zinc-700 dark:hover:bg-zinc-700"
+              >
+                {ATOM_LABELS[atom]}
+              </Button>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Control buttons */}
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={removeLastAtom}
+          disabled={chain.length === 0}
+          className="gap-1"
+        >
+          <Delete className="h-3.5 w-3.5" />
+          {t('chain.undo')}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={clearChain}
+          disabled={chain.length === 0}
+          className="gap-1"
+        >
+          <RotateCcw className="h-3.5 w-3.5" />
+          {t('chain.clear')}
+        </Button>
+        <Button
+          size="sm"
+          onClick={onCalculate}
+          disabled={chain.length === 0 || isLoading}
+          className="ml-auto"
+        >
+          {isLoading ? t('calculating') : t('calculate')}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/web/index.ts

@@ -0,0 +1,29 @@
+// Manifest
+export { kinshipCalcFrontendManifest } from './manifest'
+
+// i18n Messages
+export { default as kinshipCalcMessagesZhCN } from './messages/zh-CN.json'
+export { default as kinshipCalcMessagesEnUS } from './messages/en-US.json'
+
+// Pages
+export { default as KinshipCalcPage } from './pages/KinshipCalcPage'
+export { default as FamilyTreePage } from './pages/FamilyTreePage'
+
+// Components
+export { RegionSelector } from './components/RegionSelector'
+export { RelationChainBuilder } from './components/RelationChainBuilder'
+export { KinshipResultCard } from './components/KinshipResultCard'
+export { FamilyTreeCanvas } from './components/FamilyTreeCanvas'
+
+// Services & Stores
+export { kinshipService } from './services/kinship-service'
+export { useKinshipStore } from './stores/kinship-store'
+
+// Types
+export type {
+  Region, EgoGender, PersonGender,
+  KinshipResult, RelationAtom,
+  FamilyTree, FamilyTreePerson, FamilyTreeRelation,
+  FamilyTreeGraph, ResolveResult,
+} from './types/kinship'
+export { REGION_LABELS, ATOM_LABELS } from './types/kinship'

package/web/manifest.ts

@@ -0,0 +1,24 @@
+import type { IFrontendManifest } from '@octo-cyber/core'
+
+export const kinshipCalcFrontendManifest: IFrontendManifest = {
+  moduleId: 'kinship-calc',
+  icon: 'Users',
+  color: 'amber',
+  position: 'main',
+  titleKey: 'kinshipCalc.title',
+  descriptionKey: 'kinshipCalc.description',
+  pages: [
+    {
+      path: '/kinship-calc',
+      titleKey: 'kinshipCalc.pages.calc',
+      icon: 'Calculator',
+      component: '@octo-cyber/kinship-calc/web/pages/KinshipCalcPage',
+    },
+    {
+      path: '/kinship-calc/family-tree',
+      titleKey: 'kinshipCalc.pages.familyTree',
+      icon: 'TreePine',
+      component: '@octo-cyber/kinship-calc/web/pages/FamilyTreePage',
+    },
+  ],
+}

package/web/messages/en-US.json

@@ -0,0 +1,108 @@
+{
+  "nav": {
+    "kinshipCalc": {
+      "title": "Kinship Calc",
+      "description": "Family relationship & title calculator",
+      "pages": {
+        "calc": "Title Calculator",
+        "familyTree": "Family Tree"
+      }
+    }
+  },
+  "kinshipCalc": {
+    "title": "Kinship Calculator",
+    "description": "Family relationship & title calculator",
+    "pages": {
+      "calc": "Title Calculator",
+      "familyTree": "Family Tree"
+    }
+  },
+  "kinship": {
+    "calc": {
+      "title": "Kinship Title Calculator",
+      "subtitle": "Build a relation chain to calculate the correct Chinese kinship title"
+    },
+    "settings": {
+      "title": "Settings",
+      "egoGender": "My gender",
+      "region": "Dialect region"
+    },
+    "chain": {
+      "title": "Relation Chain",
+      "hint": "Click the relation buttons below to build a chain from 'me' to the person",
+      "empty": "No relations selected yet",
+      "undo": "Undo",
+      "clear": "Clear"
+    },
+    "calculate": "Calculate Title",
+    "calculating": "Calculating…",
+    "selectRegion": "Select dialect",
+    "regions": {
+      "standard": "Standard Mandarin",
+      "northern": "Northern dialect",
+      "southern": "Southern Mandarin",
+      "cantonese": "Cantonese",
+      "minnan": "Min-nan / Hokkien",
+      "wu": "Wu (Shanghainese)"
+    },
+    "gender": {
+      "male": "Male",
+      "female": "Female",
+      "unknown": "Unknown"
+    },
+    "generation": {
+      "elder": "{n} generation(s) older",
+      "younger": "{n} generation(s) younger",
+      "same": "Same generation"
+    },
+    "result": {
+      "title": "Result",
+      "standard": "Standard term",
+      "reverseTitle": "They call me",
+      "variants": "Regional variants",
+      "exact": "Exact match",
+      "estimated": "Estimated"
+    },
+    "examples": {
+      "title": "Quick Examples"
+    },
+    "tree": {
+      "title": "Family Tree",
+      "subtitle": "Visual family tree — click two people to calculate their relationship",
+      "new": "New Tree",
+      "select": "Select tree",
+      "newTitle": "New Family Tree",
+      "nameLabel": "Tree name",
+      "namePlaceholder": "e.g. Zhang Family Tree",
+      "addPerson": "Add Person",
+      "addRelation": "Add Relation",
+      "addPersonTitle": "Add Family Member",
+      "addRelationTitle": "Add Relationship",
+      "relations": "Established relations",
+      "emptyHint": "No members yet — click Add Person",
+      "selectSecondPerson": "Person selected — click another person to calculate their relationship",
+      "deleteConfirm": "Delete this family tree? This cannot be undone.",
+      "deleted": "Family tree deleted"
+    },
+    "person": {
+      "name": "Name",
+      "gender": "Gender",
+      "birthYear": "Birth year",
+      "isRoot": "Set as 'Me' (reference person)"
+    },
+    "relation": {
+      "from": "From (who)",
+      "to": "To (who)",
+      "type": "Relation type",
+      "selectPerson": "Select person"
+    },
+    "common": {
+      "save": "Save",
+      "cancel": "Cancel"
+    },
+    "error": {
+      "calculateFailed": "Calculation failed — please check the relation chain",
+      "loadFailed": "Load failed — please refresh"
+    }
+  }
+}