\n \n \n

\n );\n}\n\nfunction ConnectionLine({ type = 'vertical' }) {\n const lineStyle = {\n vertical: {\n width: '2px',\n height: '50px',\n backgroundColor: '#3498db',\n margin: '10px 0'\n },\n horizontal: {\n width: '50px',\n height: '2px',\n backgroundColor: '#e74c3c',\n margin: '0 10px'\n },\n love: {\n fontSize: '24px',\n color: '#e74c3c',\n margin: '0 10px'\n }\n };\n\n return (\n

\n {type === 'love' && '❤️'}\n

\n );\n}\n\nfunction FamilyTreeNode({ \n node, \n onAddSpouse, \n onAddChild, \n onEdit,\n onPhotoUpload,\n onSpousePhotoUpload,\n level = 0 \n}) {\n return (\n

\n {node.photo ? (\n {node.name}

\n ) : (\n No Photo\n )}\n

\n onPhotoUpload(node.id, photo)} \n label=\"Upload Person Photo\"\n />\n

{node.name}

\n\n {node.spouse && (\n <>\n \n

\n {node.spouse.photo ? (\n

\n ) : (\n {node.spouse.name}\n )}\n

\n onSpousePhotoUpload(node.id, photo)} \n label=\"Upload Spouse Photo\"\n />\n

{node.spouse.name}

\n \n )}\n

\n \n

\n \n \n \n

\n );\n}\n\nfunction FamilyTreeChart() {\n const [nodes, setNodes] = useState({});\n const [isLoading, setIsLoading] = useState(true);\n\n // Fetch initial family tree data from server\n useEffect(() => {\n async function fetchFamilyTree() {\n try {\n const response = await fetch('/family-tree');\n const data = await response.json();\n \n // Transform server data into client-side state\n const transformedNodes = data.reduce((acc, node) => {\n acc[node.id] = {\n ...node,\n spouse: node.spouse_id ? {\n id: node.spouse_id,\n name: node.spouse_name,\n photo: node.spouse_photo\n } : null,\n children: node.children ? JSON.parse(node.children) : []\n };\n return acc;\n }, {});\n\n setNodes(transformedNodes);\n setIsLoading(false);\n } catch (error) {\n console.error(\"Failed to fetch family tree\", error);\n setIsLoading(false);\n }\n }\n\n fetchFamilyTree();\n }, []);\n\n const handleAddSpouse = async (parentId) => {\n const newSpouseId = `spouse_${Math.random().toString(36).substr(2, 9)}`;\n const newSpouse = {\n id: newSpouseId,\n name: 'New Spouse',\n photo: null\n };\n\n try {\n // Send new spouse data to server\n const response = await fetch('/add-spouse', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n parentId,\n spouseId: newSpouseId,\n name: newSpouse.name\n })\n });\n\n if (response.ok) {\n setNodes(prevNodes => ({\n ...prevNodes,\n [parentId]: { \n ...prevNodes[parentId], \n spouse: newSpouse \n },\n [newSpouseId]: newSpouse\n }));\n }\n } catch (error) {\n console.error(\"Failed to add spouse\", error);\n }\n };\n\n const handleAddChild = async (parentId) => {\n const newChildId = `child_${Math.random().toString(36).substr(2, 9)}`;\n const newChild = {\n id: newChildId,\n name: 'New Child',\n photo: null,\n parents: [parentId]\n };\n\n try {\n // Send new child data to server\n const response = await fetch('/add-child', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n parentId,\n childId: newChildId,\n name: newChild.name\n })\n });\n\n if (response.ok) {\n setNodes(prevNodes => ({\n ...prevNodes,\n [newChildId]: newChild,\n [parentId]: {\n ...prevNodes[parentId],\n children: [...(prevNodes[parentId].children || []), newChildId]\n }\n }));\n }\n } catch (error) {\n console.error(\"Failed to add child\", error);\n }\n };\n\n const handleEditNode = async (node) => {\n const newName = prompt('Enter new name', node.name);\n \n if (newName !== null) {\n try {\n // Send updated name to server\n const response = await fetch('/edit-node', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n nodeId: node.id,\n name: newName\n })\n });\n\n if (response.ok) {\n setNodes(prevNodes => ({\n ...prevNodes,\n [node.id]: { \n ...prevNodes[node.id], \n name: newName \n }\n }));\n }\n } catch (error) {\n console.error(\"Failed to edit node\", error);\n }\n }\n };\n\n const handlePhotoUpload = async (nodeId, photoData) => {\n try {\n // Send photo to server\n const response = await fetch('/upload-photo', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n nodeId,\n photo: photoData\n })\n });\n\n if (response.ok) {\n setNodes(prevNodes => ({\n ...prevNodes,\n [nodeId]: { \n ...prevNodes[nodeId], \n photo: photoData \n }\n }));\n }\n } catch (error) {\n console.error(\"Failed to upload photo\", error);\n }\n };\n\n const handleSpousePhotoUpload = async (nodeId, photoData) => {\n try {\n // Send spouse photo to server\n const response = await fetch('/upload-spouse-photo', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n nodeId,\n photo: photoData\n })\n });\n\n if (response.ok) {\n setNodes(prevNodes => ({\n ...prevNodes,\n [nodeId]: { \n ...prevNodes[nodeId], \n spouse: {\n ...prevNodes[nodeId].spouse,\n photo: photoData\n }\n }\n }));\n }\n } catch (error) {\n console.error(\"Failed to upload spouse photo\", error);\n }\n };\n\n const renderTree = (nodeId, level = 0) => {\n const node = nodes[nodeId];\n if (!node) return null;\n\n return (\n

\n \n {node.children && node.children.length > 0 && (\n \n )}\n {node.children && node.children.length > 0 && (\n

\n {node.children.map(childId => renderTree(childId, level + 1))}\n

\n )}\n

\n );\n };\n\n if (isLoading) {\n return

;\n }\n\n return (\n

\n {renderTree('1')}\n

\n );\n}\n\nfunction App() {\n return (\n

\n 🌳 Family Tree Builder\n

\n \n

\n );\n}\n\n// Simplified client-side rendering\nfunction renderApp() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n const root = createRoot(rootElement);\n root.render();\n }\n}\n\n// Direct client-side initialization\nif (typeof window !== 'undefined') {\n window.addEventListener('DOMContentLoaded', renderApp);\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"Family100\";\n const SCHEMA_VERSION = 2;\n\n // Create comprehensive tables for storing family tree data\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_family_nodes_${SCHEMA_VERSION} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n photo TEXT,\n spouse_id TEXT,\n spouse_name TEXT,\n spouse_photo TEXT,\n children TEXT,\n parent_ids TEXT\n )\n `);\n\n // Handle different API routes\n const url = new URL(request.url);\n \n // Fetch entire family tree\n if (url.pathname === '/family-tree' && request.method === 'GET') {\n try {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_family_nodes_${SCHEMA_VERSION}\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Add spouse endpoint\n if (url.pathname === '/add-spouse' && request.method === 'POST') {\n try {\n const { parentId, spouseId, name } = await request.json();\n \n await sqlite.execute(`\n UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION}\n SET spouse_id = ?, spouse_name = ?\n WHERE id = ?\n `, [spouseId, name, parentId]);\n\n await sqlite.execute(`\n INSERT OR REPLACE INTO ${KEY}_family_nodes_${SCHEMA_VERSION}\n (id, name, spouse_id) VALUES (?, ?, ?)\n `, [spouseId, name, parentId]);\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Add child endpoint\n if (url.pathname === '/add-child' && request.method === 'POST') {\n try {\n const { parentId, childId, name } = await request.json();\n \n // Retrieve current children and update\n const parentResult = await sqlite.execute(`\n SELECT children FROM ${KEY}_family_nodes_${SCHEMA_VERSION}\n WHERE id = ?\n `, [parentId]);\n\n const currentChildren = parentResult.rows[0]?.children \n ? JSON.parse(parentResult.rows[0].children) \n : [];\n \n const updatedChildren = [...currentChildren, childId];\n\n await sqlite.execute(`\n UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION}\n SET children = ?\n WHERE id = ?\n `, [JSON.stringify(updatedChildren), parentId]);\n\n await sqlite.execute(`\n INSERT OR REPLACE INTO ${KEY}_family_nodes_${SCHEMA_VERSION}\n (id, name, parent_ids) VALUES (?, ?, ?)\n `, [childId, name, JSON.stringify([parentId])]);\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Edit node endpoint\n if (url.pathname === '/edit-node' && request.method === 'POST') {\n try {\n const { nodeId, name } = await request.json();\n \n await sqlite.execute(`\n UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION}\n SET name = ?\n WHERE id = ?\n `, [name, nodeId]);\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Photo upload endpoints\n if (url.pathname === '/upload-photo' && request.method === 'POST') {\n try {\n const { nodeId, photo } = await request.json();\n \n await sqlite.execute(`\n UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION}\n SET photo = ?\n WHERE id = ?\n `, [photo, nodeId]);\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n if (url.pathname === '/upload-spouse-photo' && request.method === 'POST') {\n try {\n const { nodeId, photo } = await request.json();\n \n await sqlite.execute(`\n UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION}\n SET spouse_photo = ?\n WHERE id = ?\n `, [photo, nodeId]);\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Initial root node if not exists\n const rootCheckResult = await sqlite.execute(`\n SELECT * FROM ${KEY}_family_nodes_${SCHEMA_VERSION}\n WHERE id = '1'\n `);\n\n if (rootCheckResult.rows.length === 0) {\n await sqlite.execute(`\n INSERT INTO ${KEY}_family_nodes_${SCHEMA_VERSION}\n (id, name) VALUES ('1', 'Root Person')\n `);\n }\n\n return new Response(`\n \n \n Family Tree Builder\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","deleted","label","children",[],[152],"files",[150],"counts",{"_173":31,"_174":175,"_176":31,"_177":31},"pulls","branches",1,"forks","envVars","contents",[180],{"_107":151,"_100":152,"_153":119,"_154":-5,"_155":140,"_156":139,"_157":121,"_109":181,"_104":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_103":182},["D",1731934523479],[152],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_98":99,"_100":101,"_102":-7,"_104":-7,"_105":190,"_178":194,"_197":-7,"_198":-5,"_199":-5,"_169":200,"_204":205},{"_107":108,"_100":101,"_109":191,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":31,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_133":27,"_21":192,"_137":193},["D",1746215486814],{"_98":99,"_135":136},{"_104":139,"_100":42,"_107":140,"_141":108,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":101,"_147":99},[195],{"_107":151,"_100":152,"_153":119,"_154":-5,"_155":140,"_156":139,"_157":121,"_109":181,"_104":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_103":196},[152],"readme","upstream","pull",[201],{"_107":151,"_100":152,"_153":119,"_154":-5,"_155":140,"_156":139,"_157":121,"_109":158,"_104":159,"_160":161,"_162":163,"_164":27,"_165":-5,"_166":202,"_103":203},[],[152],"previews",[201],"routes/_app","actionData","errors"]