{open && (

שפה

עץ

שמות

תצוגת שמות

אירועי חיים

אפקטים

)}

); } function RecordsMenu({ onPick }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, [open]); if (!window.FTEditorMode) return null; const P = window.FAMILY ? window.FAMILY.people.length : 0; const W = window.WORLD_EVENTS ? window.WORLD_EVENTS.length : 0; const ic = { desk: , people: , world: , places: , photos: , health: , }; const items = [ ['desk', 'The desk', 'health, coverage & what to do next', null], ['people', 'People', 'names, events, relationships', P], ['world', 'World events', 'the history band', W], ['places', 'Places', 'registry & duplicates', null], ['photos', 'Photos', 'slots, crops, pending', null], ]; return (

{open && (

Records Room

{items.map(([k, lab, sub, n]) => ( ))}

setOpen(false)}> Baked with ♥ by Aviran Revach

github.com/aviranrevach

)}

); } function TopBar({ lang, setLang, nameMode, setNameMode, showSide, setShowSide, familyFocus, setFamilyFocus, lifeEffects, setLifeEffects, year, onOpenPublish, onOpenRecords, editing, onToggleEdit }) { return (

window.open('README Preview.html', '_blank')} style={{ cursor: 'pointer' }} title="Open the guide (README)">

שלשלת חב"ד My Family Story · תק״ה–תשנ״ד

מקורות

); } // generation chapters for the default (no-person) scrubber state function genChapters(R, min, max) { const firstBirth = {}; R.F.people.forEach(p => { const g = p.gen ?? 0, y = p.birth.year; if(y==null)return; if (firstBirth[g] == null || y < firstBirth[g]) firstBirth[g] = y; }); const gens = Object.keys(firstBirth).map(Number).sort((a, b) => a - b); const ORD = ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh']; const out = []; gens.forEach((g, i) => { const s = i === 0 ? min : Math.max(min, firstBirth[g]); const e = i === gens.length - 1 ? max : Math.min(max, firstBirth[gens[i + 1]]); if (e > s) out.push({ s, e, lab: 'דור ' + (g+1), short: 'דור '+(g+1) }); }); return out; } function Scrubber({ year, setYear, playing, setPlaying, min, max, events, personId, openEvId }) { const R = window.REL; // rAF-smoothed display year: the playhead glides toward `year` (sub-year precision), // so play reads as continuous motion and scrubbing trails the cursor slightly. const [disp, setDisp] = React.useState(year); const dispRef = React.useRef(year); const yearRef = React.useRef(year); yearRef.current = year; const playingRef = React.useRef(playing); playingRef.current = playing; React.useEffect(() => { let raf; const step = () => { const d = dispRef.current, t = yearRef.current; if (d !== t) { const diff = t - d; let nd; if (playingRef.current) { // while playing the target ticks +1yr at a fixed rate — pure proportional // easing converges to constant velocity, so motion reads as continuous nd = d + diff * 0.12; } else { // scrubbing: proportional ease with a minimum speed — pure proportional // easing stalls near the target after a direction change (feels "stuck") const mag = Math.min(Math.abs(diff), Math.max(Math.abs(diff) * 0.18, 0.45)); nd = Math.abs(diff) < 0.02 ? t : d + Math.sign(diff) * mag; } dispRef.current = nd; setDisp(nd); } raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, []); const pct = ((disp - min) / (max - min)) * 100; const X = (y) => ((y - min) / (max - min)) * 100; const segs = null; const person = personId ? R.get(personId) : null; const chapters = React.useMemo(() => genChapters(R, min, max), [min, max]); // track pixel width — used to shorten/hide chapter labels that would collide const trackRef = React.useRef(null); const [trackW, setTrackW] = React.useState(0); React.useEffect(() => { const m = () => { if (trackRef.current) setTrackW(trackRef.current.offsetWidth); }; m(); window.addEventListener('resize', m); return () => window.removeEventListener('resize', m); }, []); // intro invite (I + J blend): the app opens a third of the way in, the playhead // drags itself back to the beginning, then a blue tooltip invites scrubbing. // Any pointer interaction cancels/dismisses it. const [introTip, setIntroTip] = React.useState(false); // false | true | 'out' React.useEffect(() => { // once per page load — the Scrubber remounts when returning from the focus // view, and the intro rewind must NOT replay then if (window.CHABAD || window.__ftIntroDone) return; window.__ftIntroDone = true; const st = { done:false, raf:0, timer:0, fade:0 }; const HOT = 'button, input, a, .scrubber, .node, .toggle-chip, .seg, .gear-btn, .drawer, .settings-pop'; const fadeOut = () => { if (st.done) return; st.done = true; clearTimeout(st.timer); cancelAnimationFrame(st.raf); window.removeEventListener('pointerdown', fadeOut, true); window.removeEventListener('pointerover', onOver, true); setIntroTip(v => v ? 'out' : false); st.fade = setTimeout(() => setIntroTip(false), 300); }; const onOver = (e) => { if (e.target.closest && e.target.closest(HOT)) fadeOut(); }; window.addEventListener('pointerdown', fadeOut, true); const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; st.timer = setTimeout(() => { if (st.done) return; if (reduce) { setYear(min); setIntroTip(true); window.addEventListener('pointerover', onOver, true); return; } const from = yearRef.current, dur = 1800, t0 = performance.now(); const step = (ts) => { if (st.done) return; const u = Math.min(1, (ts - t0) / dur); const e = .5 - .5 * Math.cos(u * Math.PI); setYear(Math.round(from + (min - from) * e)); if (u < 1) st.raf = requestAnimationFrame(step); else { setIntroTip(true); window.addEventListener('pointerover', onOver, true); } }; st.raf = requestAnimationFrame(step); }, 900); return () => { clearTimeout(st.timer); clearTimeout(st.fade); cancelAnimationFrame(st.raf); window.removeEventListener('pointerdown', fadeOut, true); window.removeEventListener('pointerover', onOver, true); }; }, []); // drag the playhead tab / year chip (they poke outside the bar, beyond the range input) const dragFrom = (e) => { const trk = trackRef.current; if (!trk) return; e.preventDefault(); e.stopPropagation(); const tgt = e.currentTarget; const move = (ev) => { const r = trk.getBoundingClientRect(); const p = Math.max(0, Math.min(1, (ev.clientX - r.left) / r.width)); setYear(Math.round(min + p * (max - min))); }; setPlaying(false); tgt.setPointerCapture(e.pointerId); move(e); const up = () => { tgt.removeEventListener('pointermove', move); tgt.removeEventListener('pointerup', up); tgt.removeEventListener('pointercancel', up); }; tgt.addEventListener('pointermove', move); tgt.addEventListener('pointerup', up); tgt.addEventListener('pointercancel', up); }; const mixOf = (c) => `color-mix(in srgb, ${c} 60%, var(--line-2))`; const stageOfYear = (y) => segs && segs.find(s => y >= s.startYear && y < s.endYear); const dotColor = (y) => { if (y <= disp) return 'var(--amber)'; const st = stageOfYear(y); return st ? mixOf(st.color) : 'var(--line-2)'; }; const birthY = person ? person.birth.year : 0; const endY = person ? (person.death ? person.death.year : max) : 0; const ticks = []; for (let y = Math.ceil(min / 10) * 10; y <= max; y += 10) ticks.push(y); return (

{window.heYear(year)} שנה עברית

{window.WorldHorizon && } {/* default state: generation chapters */} {!segs && chapters.map((c,i)=>{ const px = trackW ? ((X(c.e)-X(c.s))/100)*trackW : 9999; const lab = px >= 150 ? c.lab : (px >= 58 ? c.short : null); return ( {lab && {lab}} ); })}

{/* selected person: stage-tinted life band on the ruler */} {segs && (

{segs.map((s,i)=>( ))}

{segs.map((s,i)=>( ))} {person.death && } {R.fullName(person,'en')} · {birthY}–{person.death ? endY : 'now'} )} {/* decade ticks + year labels */} {ticks.map(y=>())} {ticks.filter(y=>y%20===0 && y-min>7 && max-y>7).map(y=>( {window.heYear(y)} ))} {window.heYear(min)} {window.heYear(max)} {/* event dots, recoloured as the fill passes them */} {events.map((e,i)=>())}

{/* playhead */}

{window.heYear(year)}

{introTip && (

Drag to travel through the years

and watch the family grow

)} { setYear(+e.target.value); setPlaying(false); }} />

); } function RelChip({ id, lang, label, onSelect }) { const R = window.REL; const p = R.get(id); const dead = !!p.death; return ( ); } function Drawer({ personId, lang, nameMode, year, setYear, onClose, onSelect, onOpenFocus }) { const R = window.REL; const p = R.get(personId); const [tab, setTab] = React.useState('story'); // FLIP morph between the two tab layouts: the drawer animates its size, the // avatar flies from the story circle to the bio rounded-square (a ghost // clone rides on top), and the incoming pane fades in. const drawerRef = React.useRef(null), morphRef = React.useRef(null); const switchTab = (next) => { if (next === tab) return; const box = drawerRef.current; if (box) { const srcEl = box.querySelector(tab === 'story' ? '.mys-cwrap' : '.av-frame'); const slot = srcEl && srcEl.querySelector('image-slot'); morphRef.current = { w: box.offsetWidth, h: box.offsetHeight, av: (srcEl && slot) ? { r: srcEl.getBoundingClientRect(), br: getComputedStyle(srcEl).borderRadius, id: slot.getAttribute('id'), src: slot.getAttribute('src') } : null, }; } setTab(next); }; React.useLayoutEffect(() => { const m = morphRef.current; morphRef.current = null; const box = drawerRef.current; if (!m || !box) return; const toW = box.offsetWidth, toH = box.offsetHeight; const tgtSel = tab === 'story' ? '.mys-cwrap' : '.av-frame'; let tEl = box.querySelector(tgtSel); const pr = (v, w) => (String(v).indexOf('%') !== -1 ? parseFloat(v) * w / 100 : parseFloat(v) || 0); let ghost = null, s = null, r0 = 0; if (m.av && tEl) { tEl.style.opacity = '0'; s = m.av.r; r0 = pr(m.av.br, s.width); ghost = document.createElement('div'); ghost.className = 'tab-ghost'; ghost.style.cssText = `left:${s.left}px;top:${s.top}px;width:${s.width}px;height:${s.height}px;border-radius:${m.av.br};`; const gs = document.createElement('image-slot'); gs.setAttribute('id', m.av.id); gs.setAttribute('shape', 'rect'); gs.setAttribute('fit', 'cover'); gs.setAttribute('no-reframe', ''); if (m.av.src) gs.setAttribute('src', m.av.src); // square-normalized like .av-frame: the slot is a centred SQUARE of the // frame's longer side (avatar crops are square-authored), the ghost clips. // Without this the photo's framing zooms differently than the real cards. const S0 = Math.max(s.width, s.height); gs.style.cssText = `position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:${S0}px;height:${S0}px;pointer-events:none;`; ghost.appendChild(gs); ghost._gs = gs; document.body.appendChild(ghost); } // ONE rAF loop drives BOTH the drawer size and the ghost flight. Time-based // style animations (CSS transitions / WAAPI) can sit play-pending for up to // a second in this embedded context — the drawer then snaps to its new size // AFTER the ghost has landed, which reads as a 20-40px avatar jump. rAF // demonstrably ticks reliably, so everything rides on it. The ghost chases // the target's LIVE rect (the constellation re-centres just after mount) // and keeps tracking through its own fade-out, so the handoff cannot jump. box.style.maxHeight = 'none'; const dur = 420, t0 = performance.now(); let done = false; const setGhostSize = (w, h) => { ghost.style.width = w + 'px'; ghost.style.height = h + 'px'; const S = Math.max(w, h); ghost._gs.style.width = S + 'px'; ghost._gs.style.height = S + 'px'; }; const pinGhost = () => { if (!ghost || !tEl || !tEl.isConnected) return; const t = tEl.getBoundingClientRect(); ghost.style.left = t.left + 'px'; ghost.style.top = t.top + 'px'; setGhostSize(t.width, t.height); ghost.style.borderRadius = getComputedStyle(tEl).borderRadius; }; const step = (ts) => { if (done) { // ghost fading out: stay glued to the live avatar underneath if (ghost && ghost.isConnected) { pinGhost(); requestAnimationFrame(step); } return; } if (ghost && (!tEl || !tEl.isConnected)) { // target remounted mid-flight tEl = box.querySelector(tgtSel); if (tEl) tEl.style.opacity = '0'; } const u = Math.min(1, (ts - t0) / dur), e = .5 - .5 * Math.cos(u * Math.PI); box.style.width = (m.w + (toW - m.w) * e) + 'px'; box.style.height = (m.h + (toH - m.h) * e) + 'px'; if (ghost && tEl && tEl.isConnected) { const t = tEl.getBoundingClientRect(); const r1 = pr(getComputedStyle(tEl).borderRadius, t.width); ghost.style.left = (s.left + (t.left - s.left) * e) + 'px'; ghost.style.top = (s.top + (t.top - s.top) * e) + 'px'; setGhostSize(s.width + (t.width - s.width) * e, s.height + (t.height - s.height) * e); ghost.style.borderRadius = (r0 + (r1 - r0) * e) + 'px'; } if (u >= 1) { done = true; // release the drawer to natural layout FIRST, then pin the ghost to the // avatar's settled rect and reveal it under the fading ghost box.style.width = box.style.height = box.style.maxHeight = ''; pinGhost(); if (tEl && tEl.isConnected) tEl.style.opacity = ''; if (ghost) { ghost.style.transition = 'opacity .18s ease'; ghost.style.opacity = '0'; setTimeout(() => ghost.remove(), 220); } } requestAnimationFrame(step); }; requestAnimationFrame(step); }, [tab]); const status = R.statusAt(p, year); const age = R.ageAt(p, year); const end = p.death ? p.death.year : R.NOW; const lifeAge = Math.min(age == null ? 0 : age, end - p.birth.year); const era = lifeAge < 22 ? 'young' : lifeAge < 59 ? 'adult' : 'elder'; const slot = `ph-${personId}-${era}`; const events = React.useMemo(() => R.lifeEvents(personId, lang), [personId, lang]); const recent = events.filter(e => e.year <= year).pop(); const union = R.unionsOf(personId).find(u => year >= u.year && !(u.endYear && year >= u.endYear)); const spouse = union ? R.partnerInUnion(union, personId) : null; const kids = R.childrenOf(personId).map(R.get).filter(c => c.birth.year <= year); const first = id => R.fullName(R.get(id), lang).split(' ')[0]; const sib = R.siblings(personId); const steps = R.stepParents(personId); const stepKids = R.stepChildren(personId); const partners = R.unionsOf(personId).map(u => ({ id: R.partnerInUnion(u, personId), u })); const kidsAll = R.childrenOf(personId); const links = R.sideLinksOf(personId); // name-change context line (né/née · born surname, or later surname in birth mode) const ncLine = (() => { if (!p.nameChange || !p.names || !p.names.birth) return null; const bs = p.names.birth.en.split(' ').slice(-1)[0]; const cs = p.name.en.split(' ').slice(-1)[0]; const showingBirth = R.usesBirthName ? R.usesBirthName(p, nameMode) : (nameMode === 'birth'); if (showingBirth) return `later ${cs} \u00b7 from ${p.nameChange.year}`; const pre = p.nameChange.kind === 'marriage' ? (p.sex==='f'?'n\u00e9e':'n\u00e9') : 'born'; return `${pre} ${bs}`; })(); const Section = ({ title, children }) => (

{title}

{children}

); const storyTabs = (

); return (

{storyTabs} {tab === 'story' ? (

{React.createElement(window.StoryPanel, { personId, year, setYear, lang, onSelect })}

) : (

{/* mini screen — updates as you scrub the main timeline */}

{status === 'unborn' ?

: (() => { const av = window.autoAvatar ? window.autoAvatar(personId, year) : { idx: -1, u: null }; const idx = av.idx >= 0 ? av.idx : 0; return React.createElement(window.PhotoMenuSlot, { personId, idx, mode: 'avatar', shape: 'rounded', radius: '13', placeholder: initials(p), style: { width: '100%', height: 'clamp(120px,22vh,190px)' }, }); })()}

{ncLine &&

{ncLine}

}

{p.birth.year}{p.death?`\u2013${p.death.year}`:'\u2013present'} · {p.sex==='f'?'Female':'Male'}

{status === 'living' && <>Age {age}in {year}Living} {status === 'dead' && <>Died {p.death.year}aged {p.death.year-p.birth.year}} {status === 'unborn' && <>Not yet bornarrives {p.birth.year}}

{status !== 'unborn' && (

Place{status==='dead'?p.death.place:p.birth.place}

{spouse &&

{union.type==='marriage'?'Married':'Partner'}onSelect(spouse)}>{R.fullName(R.get(spouse),lang)} · {union.year}

} {kids.length>0 &&

Children{kids.map((c,i)=>onSelect(c.id)}>{first(c.id)}{i)}

} {recent &&

Latest{recent.label} · {recent.year}

}

)}

{p.bio &&

{(lang === 'he' && p.bio.he) ? p.bio.he : p.bio.en}

} {(p.parents.length+steps.length)>0 &&

{p.parents.map(id=>)}{steps.map(id=>)}

} {(sib.full.length+sib.half.length)>0 &&

{sib.full.map(id=>)}{sib.half.map(id=>)}

} {partners.length>0 &&

{partners.map(({id,u})=>)}

} {kidsAll.length>0 &&

{kidsAll.map(id=>)}

} {stepKids.length>0 &&

{stepKids.map(id=>)}

} {links.length>0 &&

{links.map((l,i)=>)}

}

)} {/* shared footer — the SAME button in both tabs, so it never blinks on flip */}

); } class RrBoundary extends React.Component { constructor(props) { super(props); this.state = { err: null }; } static getDerivedStateFromError(err) { return { err }; } render() { if (this.state.err) return (

The Records Room hit a snag

The tree itself is fine. Close this and try again — if it repeats, tell Claude what you clicked.

); return this.props.children; } } function App() { const R = window.REL; const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [year, setYear] = useState(() => { try { const q = parseInt(new URLSearchParams(location.search).get("year"), 10); return q > 5400 && q < 5900 ? q : 5534; } catch (e) { return 5534; } }); // structural edits (edit mode) change the people set — re-run layout when they land const [treeRev, setTreeRev] = useState(0); useEffect(() => { const h = () => setTreeRev((n) => n + 1); window.addEventListener('ft-tree-changed', h); return () => window.removeEventListener('ft-tree-changed', h); }, []); // layout recomputes only when the set of visible people changes (cards glide between) const visKey = React.useMemo(() => [...R.visibleSet(year)].sort().join(','), [year, treeRev]); const layout = React.useMemo(() => R.computeLayout(R.visibleSet(year)), [visKey]); const eventYears = React.useMemo(() => { const ys = new Set(); R.F.people.forEach(p=>{ if(p.birth.year!=null)ys.add(p.birth.year); if(p.death?.year!=null) ys.add(p.death.year); }); R.F.unions.forEach(u=>{if(u.year!=null)ys.add(u.year)}); return [...ys]; }, []); const [playing, setPlaying] = useState(false); // global scrub-speed gauge (years/sec → 0..1 "slow" factor) — image-slot reads // window.__ftScrubSlow to stretch its photo crossfade when scrubbing slowly const scrubRef = React.useRef({ y: year, t: performance.now(), slow: 0 }); useEffect(() => { const r = scrubRef.current; if (year === r.y) return; const now = performance.now(); const v = Math.abs(year - r.y) / (Math.max(16, now - r.t) / 1000); const slow = Math.max(0, Math.min(1, (8 - v) / 7)); r.slow = r.slow * 0.5 + slow * 0.5; r.y = year; r.t = now; window.__ftScrubSlow = r.slow; }, [year]); const [lang, setLang] = useState('he'); const [nameMode, setNameModeRaw] = useState(() => { try { const m = localStorage.getItem('ft.nameMode'); return (m==='birth'||m==='current'||m==='time')?m:'time'; } catch(e){ return 'time'; } }); const setNameMode = (v) => { const m = (v==='birth'||v==='time')?v:'current'; if (R.setNameMode) R.setNameMode(m); setNameModeRaw(m); }; useEffect(() => { if (R.setNameMode) R.setNameMode(nameMode); }, []); const [showSide, setShowSide] = useState(true); const [familyFocus, setFamilyFocus] = useState(false); const [lifeEffects, setLifeEffectsRaw] = useState(() => { try { return localStorage.getItem('ft.lifeEffects') || 'hurray'; } catch (e) { return 'hurray'; } }); const setLifeEffects = (v) => { setLifeEffectsRaw(v); try { localStorage.setItem('ft.lifeEffects', v); } catch (e) {} }; const [selectedId, setSelectedId] = useState(null); const [worldEv, setWorldEv] = useState(null); const [worldRoom, setWorldRoom] = useState(null); const [focusId, setFocusId] = useState(null); const [pubOpen, setPubOpen] = useState(false); const [recordsOpen, setRecordsOpen] = useState(null); // null | screen name ('people', 'world', …) // edit-the-tree mode: timeline slides away, nodes compact, toolbar rises const [editing, setEditing] = useState(false); const prevYearRef = React.useRef(null); // rAF-driven scrubber slide (CSS transitions stall in this embedded context) const scrubDockRef = React.useRef(null); const firstScrubFx = React.useRef(true); useEffect(() => { if (firstScrubFx.current) { firstScrubFx.current = false; return; } const el = scrubDockRef.current && scrubDockRef.current.querySelector('.scrubber'); if (!el) return; const from = editing ? 0 : 160, to = editing ? 160 : 0; const t0 = performance.now(), dur = 450; let raf, done = false; const land = () => { if (done) return; done = true; if (editing) { el.style.transform = 'translateY(160%)'; el.style.opacity = '0'; } else { el.style.transform = ''; el.style.opacity = ''; } }; const step = (ts) => { if (done) return; const u = Math.min(1, (ts - t0) / dur), e = .5 - .5 * Math.cos(u * Math.PI); const y = from + (to - from) * e; el.style.transform = `translateY(${y}%)`; el.style.opacity = String(1 - (y / 160)); if (u < 1) raf = requestAnimationFrame(step); else land(); }; raf = requestAnimationFrame(step); const wd = setTimeout(land, dur + 200); // watchdog: rAF can stall in throttled contexts return () => { cancelAnimationFrame(raf); clearTimeout(wd); land(); }; }, [editing]); const toggleEdit = () => { setEditing((v) => { if (!v) { prevYearRef.current = year; setPlaying(false); setSelectedId(null); setWorldEv(null); setWorldRoom(null); setFocusId(null); setYear(R.MAX_YEAR); return true; } if (prevYearRef.current != null) setYear(prevYearRef.current); return false; }); }; // tiny toast for undo/redo/discard feedback const [toast, setToast] = useState(null); const toastTimer = React.useRef(null); const showToast = React.useCallback((msg) => { setToast(msg); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 2600); }, []); // Cmd/Ctrl+Z undo, Shift+Cmd/Ctrl+Z redo — through the change store useEffect(() => { const h = (e) => { const t = e.target; if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return; if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z' && window.FTStore) { e.preventDefault(); const l = e.shiftKey ? window.FTStore.redo() : window.FTStore.undo(); if (l) showToast(`${e.shiftKey ? 'Redone' : 'Undone'} · ${l}`); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [showToast]); // apply heritage accent useEffect(() => { document.documentElement.style.setProperty('--amber', t.heritage); }, [t.heritage]); // play loop useEffect(() => { if (!playing) return; if (year >= R.MAX_YEAR) setYear(R.MIN_YEAR); const iv = setInterval(() => { setYear(y => { if (y >= R.MAX_YEAR) { setPlaying(false); return R.MAX_YEAR; } return y + 1; }); }, 170); return () => clearInterval(iv); }, [playing]); const select = (id) => { setSelectedId(id); setWorldEv(null); }; const openFocus = (id) => { setFocusId(id); setSelectedId(null); setWorldEv(null); }; // world-event stars/blooms dispatch a global event (they live deep inside the scrubber) useEffect(() => { const h = (e) => { setWorldEv(e.detail); setSelectedId(null); }; window.addEventListener('ft-world-open', h); return () => window.removeEventListener('ft-world-open', h); }, []); const textureBg = { dots: 'radial-gradient(var(--canvas-dot) 1.2px, transparent 1.2px)', grid: 'linear-gradient(var(--canvas-dot) 1px, transparent 1px), linear-gradient(90deg, var(--canvas-dot) 1px, transparent 1px)', plain: 'none', }[t.canvasTexture]; const textureSize = t.canvasTexture === 'plain' ? 'auto' : '26px 26px'; // keep the year-aware name resolver in sync (for the 'לפי השנה' surname mode) if (R.setNameYear) R.setNameYear(year); return (

setRecordsOpen(s || 'desk')} lang={lang} setLang={setLang} nameMode={nameMode} setNameMode={setNameMode} showSide={showSide} setShowSide={setShowSide} familyFocus={familyFocus} setFamilyFocus={setFamilyFocus} lifeEffects={lifeEffects} setLifeEffects={setLifeEffects} year={year} onOpenPublish={()=>setPubOpen(true)} />

{focusId ? ( setFocusId(null)} onOpenFull={(id)=>setFocusId(id)} /> ) : ( )} {worldEv && !focusId && ( React.createElement(window.WorldEventDrawer, { evId: worldEv, year, setYear, personId: selectedId, onClose: () => setWorldEv(null), onOpenRoom: (id) => { setWorldRoom(id); setWorldEv(null); } }) )} {worldRoom && React.createElement(window.WorldRoom, { evId: worldRoom, year, setYear, onClose: () => setWorldRoom(null) })} {selectedId && !focusId && !worldRoom && ( setSelectedId(null)} onSelect={select} onOpenFocus={openFocus} /> )}

{!focusId && !worldRoom &&

} {editing && !focusId && !worldRoom && window.EditToolbar && setPubOpen(true)} />} {pubOpen && setPubOpen(false)} onToast={showToast} />} {recordsOpen && window.FTEditorMode && window.RecordsRoom && setRecordsOpen(null)}>setRecordsOpen(null)} onToast={showToast} onJump={(id)=>{ select(id); }} onOpenPublish={()=>setPubOpen(true)} />}

{toast || ''}

); } ReactDOM.createRoot(document.getElementById('root')).render();