[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68beb2c9e0e881918e6783ad4b86a022","versionInt","title","Copy of Life Timeline Editor (react + Shadcn + React‑chrono)","type","code/react","content","\"use client\";\n\nimport React, { useMemo, useState, useEffect } from \"react\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Input } from \"@/components/ui/input\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";\nimport { Label } from \"@/components/ui/label\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { toast } from \"sonner\";\nimport { Chrono } from \"react-chrono\";\nimport { motion } from \"framer-motion\";\n\n/**\n * AI Timeline Editor (React + shadcn/ui + react-chrono)\n *\n * Install deps:\n * npm i react-chrono framer-motion sonner\n */\n\n// ---------- Types ----------\n\ntype LifeEvent = {\n id: string;\n title: string;\n start: string; // YYYY[-MM[-DD]]\n end?: string | null;\n description?: string;\n location?: string;\n tags?: string[];\n};\n\n// ---------- Utilities ----------\n\nconst isoLike = /^(\\d{4})(?:-(\\d{2})(?:-(\\d{2}))?)?$/; // YYYY, YYYY-MM, or YYYY-MM-DD\nconst rangeSep = /\\s*\\.\\.\\s*/; // start..end\n\nfunction parseDateToken(tok: string): string | null {\n tok = tok.trim();\n if (!tok) return null;\n const m = tok.match(isoLike);\n if (!m) return null;\n const [_, y, mo, d] = m as any;\n if (y && mo && d) return `${y}-${mo}-${d}`;\n if (y && mo) return `${y}-${mo}`;\n if (y) return `${y}`;\n return null;\n}\n\nfunction toSortable(date: string | undefined | null): string {\n if (!date) return \"9999-12-31\";\n if (isoLike.test(date)) {\n const m = date.match(isoLike)!;\n const [_, y, mo, d] = m as any;\n return `${y}-${mo ?? \"12\"}-${d ?? \"31\"}`;\n }\n return \"9999-12-31\";\n}\n\nfunction uid() {\n return Math.random().toString(36).slice(2, 9);\n}\n\n// ---------- Local Storage ----------\n\nconst STORAGE_KEY = \"ai-timeline-state-v1\";\n\nfunction loadState(): { raw?: string; events?: LifeEvent[]; mode?: \"VERTICAL_ALTERNATING\" | \"VERTICAL\" | \"HORIZONTAL\" } | null {\n if (typeof window === \"undefined\") return null;\n try {\n const s = localStorage.getItem(STORAGE_KEY);\n if (!s) return null;\n return JSON.parse(s);\n } catch {\n return null;\n }\n}\n\nfunction saveState(state: { raw: string; events: LifeEvent[]; mode: \"VERTICAL_ALTERNATING\" | \"VERTICAL\" | \"HORIZONTAL\" }) {\n if (typeof window === \"undefined\") return;\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(state));\n } catch {}\n}\n\n// ---------- Parsing ----------\n\nfunction parseLines(text: string): LifeEvent[] {\n const lines = text\n .split(/\\n+/)\n .map((l) => l.trim())\n .filter((l) => l.length > 0 && !l.startsWith(\"//\"));\n\n const events: LifeEvent[] = [];\n\n // CSV-like quick path\n const looksCSV =\n lines.length > 0 &&\n lines.some((l) => l.split(\",\").length >= 3) &&\n lines.every((l) => l.split(\",\").length === lines[0].split(\",\").length);\n\n if (looksCSV) {\n const first = lines[0].toLowerCase();\n const hasHeader = [\"start\", \"title\"].every((k) => first.includes(k));\n const rows = hasHeader ? lines.slice(1) : lines;\n for (const row of rows) {\n const [startRaw, endRaw, title, description, location, tagsRaw] = row.split(\",\").map((s) => s?.trim());\n const start = parseDateToken(startRaw || \"\");\n if (!title || !start) continue;\n const end = parseDateToken(endRaw || \"\");\n events.push({\n id: uid(),\n title,\n start,\n end: end || undefined,\n description,\n location,\n tags: tagsRaw ? tagsRaw.split(/\\s*;?\\s*|\\s*,\\s*/).filter(Boolean) : [],\n });\n }\n return sortEvents(events);\n }\n\n for (const raw of lines) {\n // Format A: DATE — Title | key: value\n const emdash = raw.indexOf(\"—\");\n const hyphen = raw.indexOf(\" - \");\n const splitIdx = emdash >= 0 ? emdash : hyphen;\n\n const tryA = () => {\n if (splitIdx < 0) return false;\n const left = raw.slice(0, splitIdx).trim();\n const right = raw.slice(splitIdx + (emdash >= 0 ? 1 : 3)).trim();\n\n let start: string | null = null;\n let end: string | null = null;\n if (left.includes(\"..\")) {\n const [a, b] = left.split(rangeSep);\n start = parseDateToken(a || \"\");\n end = parseDateToken(b || \"\");\n } else {\n start = parseDateToken(left);\n }\n if (!start) return false;\n const parts = right.split(\"|\").map((s) => s.trim()).filter(Boolean);\n const title = parts[0];\n if (!title) return false;\n const meta = parts.slice(1);\n const ev: LifeEvent = { id: uid(), title, start, end: end || undefined };\n for (const m of meta) {\n const [kRaw, ...rest] = m.split(\":\");\n if (!rest.length) continue;\n const k = kRaw.trim().toLowerCase();\n const v = rest.join(\":\").trim();\n if ([\"description\", \"desc\", \"note\", \"notes\"].includes(k)) ev.description = v;\n else if ([\"location\", \"where\"].includes(k)) ev.location = v;\n else if ([\"tags\", \"tag\"].includes(k)) ev.tags = v.split(/\\s*,\\s*|\\s*;\\s*/).filter(Boolean);\n }\n events.push(ev);\n return true;\n };\n\n // Format B: Title @ DATE [.. DATE] (#tags) (location)\n const tryB = () => {\n const atIdx = raw.indexOf(\" @ \");\n if (atIdx < 0) return false;\n const title = raw.slice(0, atIdx).trim();\n let rest = raw.slice(atIdx + 3).trim();\n let start: string | null = null;\n let end: string | null = null;\n let location: string | undefined;\n const locMatch = rest.match(/\$([^)]+)\$\\s*$/);\n if (locMatch) {\n location = locMatch[1].trim();\n rest = rest.replace(/\$([^)]+)\$\\s*$/, \"\").trim();\n }\n let tags: string[] = [];\n const tagMatch = rest.match(/#([\\p{L}0-9_-]+)/gu);\n if (tagMatch) {\n tags = tagMatch.map((t) => t.replace(/^#/, \"\").toLowerCase());\n rest = rest.replace(/#([\\p{L}0-9_-]+)/gu, \"\").trim();\n }\n if (rest.includes(\"..\")) {\n const [a, b] = rest.split(rangeSep);\n start = parseDateToken(a || \"\");\n end = parseDateToken(b || \"\");\n } else {\n start = parseDateToken(rest);\n }\n if (!title || !start) return false;\n events.push({ id: uid(), title, start, end: end || undefined, location, tags });\n return true;\n };\n\n if (tryA()) continue;\n if (tryB()) continue;\n\n // Fallback: date | title\n const m = raw.match(/^(.*?)\\s*(?:\\||,)\\s*(.*)$/);\n if (m) {\n const d = parseDateToken(m[1]);\n if (d) {\n events.push({ id: uid(), title: m[2].trim(), start: d });\n }\n }\n }\n\n return sortEvents(events);\n}\n\nfunction sortEvents(events: LifeEvent[]): LifeEvent[] {\n return [...events].sort((a, b) => toSortable(a.start).localeCompare(toSortable(b.start)));\n}\n\nfunction toChronoItems(events: LifeEvent[]) {\n return events.map((e) => ({\n title: e.end ? `${e.start} → ${e.end}` : e.start,\n cardTitle: e.title,\n cardSubtitle: [e.location, e.tags?.length ? `#${e.tags?.join(\" #\")}` : \"\"].filter(Boolean).join(\" · \"),\n cardDetailedText: e.description,\n }));\n}\n\n// ---------- Component ----------\n\nexport default function LifeTimelineEditor() {\n const [raw, setRaw] = useState(sampleText.trim());\n const [events, setEvents] = useState(() => parseLines(sampleText));\n const [mode, setMode] = useState<\"VERTICAL_ALTERNATING\" | \"VERTICAL\" | \"HORIZONTAL\">(\"VERTICAL\");\n const [filter, setFilter] = useState(\"\");\n const [edit, setEdit] = useState(null);\n const [menuOpen, setMenuOpen] = useState(true); // sidebar visibility\n\n // Load from localStorage on first mount\n useEffect(() => {\n const data = loadState();\n if (data?.events) setEvents(sortEvents(data.events));\n if (data?.raw) setRaw(data.raw);\n if (data?.mode) setMode(data.mode);\n\n // --- Dev sanity tests (do not remove tests) ---\n try {\n const parsed = parseLines(sampleText);\n console.assert(parsed.length >= 10, \"Parser test: expected >= 10 events\");\n const md = eventsToMarkdown(parsed.slice(0, 2));\n console.assert(md.includes(\"# AI Timeline\"), \"Markdown export test: header included\");\n } catch (e) {\n console.warn(\"Sanity tests failed\", e);\n }\n }, []);\n\n // Auto-save to localStorage when raw/events/mode change\n useEffect(() => {\n saveState({ raw, events, mode });\n }, [raw, events, mode]);\n\n const filtered = useMemo(() => {\n const q = filter.trim().toLowerCase();\n if (!q) return events;\n return events.filter((e) =>\n [e.title, e.description, e.location, e.tags?.join(\" \")]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase()\n .includes(q)\n );\n }, [events, filter]);\n\n const items = useMemo(() => toChronoItems(filtered), [filtered]);\n\n const gridCols = menuOpen && mode !== \"HORIZONTAL\" ? \"md:grid-cols-2\" : \"md:grid-cols-1\";\n\n function handleParse() {\n const parsed = parseLines(raw);\n if (!parsed.length) toast(\"No valid events found. Check the format.\");\n setEvents(parsed);\n }\n\n function onExport() {\n const blob = new Blob([JSON.stringify({ events }, null, 2)], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `ai-timeline-${new Date().toISOString().slice(0, 10)}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n function eventsToMarkdown(evts: LifeEvent[]): string {\n const sections = evts.map((e) => {\n const date = e.end ? `${e.start} — ${e.end}` : e.start;\n const metaParts = [\n e.location ? `**Location:** ${e.location}` : \"\",\n e.tags && e.tags.length ? `**Tags:** ${e.tags.map((t) => `#${t}`).join(\" \")}` : \"\",\n ].filter(Boolean);\n const meta = metaParts.length ? `\\n\\n${metaParts.join(\" · \")}` : \"\";\n const desc = e.description ? `\\n\\n${e.description}` : \"\";\n return `## ${date} — ${e.title}${desc}${meta}`;\n });\n return [\"# AI Timeline\", \"\", ...sections].join(\"\\n\\n\");\n }\n\n function onExportMarkdown() {\n const md = eventsToMarkdown(events);\n const blob = new Blob([md], { type: \"text/markdown\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `ai-timeline-${new Date().toISOString().slice(0, 10)}.md`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n function onImport(file: File) {\n const reader = new FileReader();\n reader.onload = () => {\n try {\n const data = JSON.parse(String(reader.result));\n if (Array.isArray(data)) setEvents(sortEvents(data));\n else if (Array.isArray(data.events)) setEvents(sortEvents(data.events));\n else toast(\"Invalid JSON schema.\");\n } catch (e) {\n toast(\"Failed to parse JSON.\");\n }\n };\n reader.readAsText(file);\n }\n\n function addQuick(ev: Partial) {\n if (!ev.title || !ev.start) return toast(\"Title and start date required.\");\n const start = parseDateToken(ev.start);\n const end = parseDateToken(ev.end || \"\");\n if (!start) return toast(\"Invalid start date format.\");\n setEvents(\n sortEvents([\n ...events,\n {\n id: uid(),\n title: ev.title,\n start,\n end: end || undefined,\n description: ev.description,\n location: ev.location,\n tags: ev.tags ?? [],\n },\n ])\n );\n }\n\n function startEdit(e: LifeEvent) {\n setEdit({ ...e, tags: e.tags ? [...e.tags] : [] });\n }\n\n function saveEdit() {\n if (!edit) return;\n const start = parseDateToken(edit.start || \"\");\n const end = edit.end ? parseDateToken(edit.end) : undefined;\n if (!start) return toast(\"Invalid start date.\");\n const updated: LifeEvent = { ...edit, start, end } as LifeEvent;\n setEvents((prev) => sortEvents(prev.map((p) => (p.id === updated.id ? updated : p))));\n setEdit(null);\n }\n\n function remove(id: string) {\n setEvents((prev) => prev.filter((p) => p.id !== id));\n }\n\n return (\n

\n {menuOpen && (\n \n \n

\n AI Timeline — Editor\n

\n \n

\n \n \n \n \n Editor\n Formats\n Data\n \n\n \n Enter events (one per line)\n

setRaw(e.target.value)} rows={14} className=\"font-mono\" />\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <Dialog>\n                      <DialogTrigger asChild>\n                        <Button variant=\"secondary\">Quick Add</Button>\n                      </DialogTrigger>\n                      <QuickAddDialog onAdd={addQuick} />\n                    </Dialog>\n                    <Button onClick={handleParse}>Parse & Preview</Button>\n                    <div className=\"ml-auto flex items-center gap-2\">\n                      <Input type=\"file\" accept=\"application/json\" onChange={(e) => e.target.files && onImport(e.target.files[0])} />\n                      <Button variant=\"outline\" onClick={onExport}>Export JSON</Button>\n                      <Button variant=\"outline\" onClick={onExportMarkdown}>Export MD</Button>\n                    </div>\n                  </div>\n                </TabsContent>\n\n                <TabsContent value=\"help\">\n                  <HelpPanel />\n                </TabsContent>\n\n                <TabsContent value=\"data\">\n                  <ScrollArea className=\"h-[300px] rounded border p-3 bg-muted/30\">\n                    <pre className=\"text-sm\">{JSON.stringify(events, null, 2)}</pre>\n                  </ScrollArea>\n                </TabsContent>\n              </Tabs>\n            </CardContent>\n          </Card>\n        )}\n\n        <Card className=\"shadow-sm\">\n          <CardHeader>\n            <div className=\"flex items-center gap-2\">\n              <CardTitle className=\"text-xl\">Preview</CardTitle>\n              <div className=\"ml-auto flex items-center gap-2\">\n                {!menuOpen && (\n                  <Button variant=\"secondary\" size=\"sm\" onClick={() => setMenuOpen(true)}>\n                    Show Editor\n                  </Button>\n                )}\n                <Label className=\"text-xs\">Mode</Label>\n                <select\n                  className=\"rounded-md border bg-background px-2 py-1 text-sm\"\n                  value={mode}\n                  onChange={(e) => {\n                    const next = e.target.value as \"VERTICAL\" | \"VERTICAL_ALTERNATING\" | \"HORIZONTAL\";\n                    setMode(next);\n                    if (next === \"HORIZONTAL\") setMenuOpen(false);\n                  }}\n                >\n                  <option value=\"VERTICAL\">Vertical</option>\n                  <option value=\"VERTICAL_ALTERNATING\">Vertical alternating</option>\n                  <option value=\"HORIZONTAL\">Horizontal</option>\n                </select>\n                <Input placeholder=\"Filter… (tags, text, location)\" value={filter} onChange={(e) => setFilter(e.target.value)} className=\"w-52\" />\n              </div>\n            </div>\n          </CardHeader>\n          <CardContent>\n            <div className=\"rounded-xl border bg-background p-2 overflow-x-auto\">\n              {items.length ? (\n                <Chrono\n                  key={mode}\n                  items={items}\n                  mode={mode}\n                  allowDynamicUpdate\n                  cardWidth={420}\n                  itemWidth={120}\n                  scrollable={{ scrollbar: true }}\n                  cardHeight={120}\n                  useReadMore={false}\n                />\n              ) : (\n                <div className=\"p-6 text-sm text-muted-foreground\">No items to show. Add or parse events on the left.</div>\n              )}\n            </div>\n\n            <div className=\"mt-4\">\n              <Label className=\"mb-1 block text-xs uppercase tracking-wide text-muted-foreground\">Inline list (click to edit)</Label>\n              <ScrollArea className=\"h-[220px] rounded border p-2\">\n                <ul className=\"space-y-2\">\n                  {events.map((e) => (\n                    <motion.li key={e.id} layout className=\"flex items-center gap-2 rounded-lg border bg-card p-2 text-sm\">\n                      <span className=\"shrink-0 rounded-md bg-muted px-2 py-1 font-mono text-xs\">{e.end ? `${e.start}..${e.end}` : e.start}</span>\n                      <span className=\"font-medium\">{e.title}</span>\n                      <span className=\"text-muted-foreground\">{[e.location, e.tags?.length ? `#${e.tags?.join(\" #\")}` : \"\"].filter(Boolean).join(\" · \")}</span>\n                      <div className=\"ml-auto flex items-center gap-2\">\n                        <Button size=\"sm\" variant=\"secondary\" onClick={() => startEdit(e)}>Edit</Button>\n                        <Button size=\"sm\" variant=\"ghost\" onClick={() => remove(e.id)}>Delete</Button>\n                      </div>\n                    </motion.li>\n                  ))}\n                </ul>\n              </ScrollArea>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <EditDialog ev={edit} setEv={setEdit} onSave={saveEdit} />\n    </div>\n  );\n}\n\n// ---------- Quick Add Dialog ----------\n\nfunction QuickAddDialog({ onAdd }: { onAdd: (ev: Partial<LifeEvent>) => void }) {\n  const [title, setTitle] = useState(\"\");\n  const [start, setStart] = useState(\"\");\n  const [end, setEnd] = useState(\"\");\n  const [location, setLocation] = useState(\"\");\n  const [tags, setTags] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n\n  function submit() {\n    onAdd({ title, start, end: end || undefined, location, description, tags: tags.split(/\\s*,\\s*|\\s*;\\s*/).filter(Boolean) });\n    setTitle(\"\");\n    setStart(\"\");\n    setEnd(\"\");\n    setLocation(\"\");\n    setTags(\"\");\n    setDescription(\"\");\n  }\n\n  return (\n    <DialogContent className=\"sm:max-w-[520px]\">\n      <DialogHeader>\n        <DialogTitle>Quick add event</DialogTitle>\n      </DialogHeader>\n      <div className=\"grid gap-3 py-2\">\n        <div className=\"grid grid-cols-3 items-center gap-2\">\n          <Label>Title</Label>\n          <Input className=\"col-span-2\" value={title} onChange={(e) => setTitle(e.target.value)} placeholder=\"ELIZA chatbot\" />\n        </div>\n        <div className=\"grid grid-cols-3 items-center gap-2\">\n          <Label>Start</Label>\n          <Input className=\"col-span-2\" value={start} onChange={(e) => setStart(e.target.value)} placeholder=\"1966 or 1966-01\" />\n        </div>\n        <div className=\"grid grid-cols-3 items-center gap-2\">\n          <Label>End</Label>\n          <Input className=\"col-span-2\" value={end} onChange={(e) => setEnd(e.target.value)} placeholder=\"optional, e.g., 1972\" />\n        </div>\n        <div className=\"grid grid-cols-3 items-center gap-2\">\n          <Label>Location</Label>\n          <Input className=\"col-span-2\" value={location} onChange={(e) => setLocation(e.target.value)} placeholder=\"MIT\" />\n        </div>\n        <div className=\"grid grid-cols-3 items-center gap-2\">\n          <Label>Tags</Label>\n          <Input className=\"col-span-2\" value={tags} onChange={(e) => setTags(e.target.value)} placeholder=\"ai, nlp\" />\n        </div>\n        <div className=\"grid grid-cols-3 items-start gap-2\">\n          <Label>Description</Label>\n          <Textarea className=\"col-span-2\" rows={3} value={description} onChange={(e) => setDescription(e.target.value)} placeholder=\"Why it mattered…\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button onClick={submit}>Add</Button>\n      </DialogFooter>\n    </DialogContent>\n  );\n}\n\n// ---------- Edit Dialog ----------\n\nfunction EditDialog({ ev, setEv, onSave }: { ev: LifeEvent | null; setEv: (e: LifeEvent | null) => void; onSave: () => void }) {\n  if (!ev) return null;\n  return (\n    <Dialog open onOpenChange={(open) => !open && setEv(null)}>\n      <DialogContent className=\"sm:max-w-[560px]\">\n        <DialogHeader>\n          <DialogTitle>Edit event</DialogTitle>\n        </DialogHeader>\n        <div className=\"grid gap-3 py-2\">\n          <div className=\"grid grid-cols-3 items-center gap-2\">\n            <Label>Title</Label>\n            <Input className=\"col-span-2\" value={ev.title} onChange={(e) => setEv({ ...ev, title: e.target.value })} />\n          </div>\n          <div className=\"grid grid-cols-3 items-center gap-2\">\n            <Label>Start</Label>\n            <Input className=\"col-span-2\" value={ev.start} onChange={(e) => setEv({ ...ev, start: e.target.value })} />\n          </div>\n          <div className=\"grid grid-cols-3 items-center gap-2\">\n            <Label>End</Label>\n            <Input className=\"col-span-2\" value={ev.end ?? \"\"} onChange={(e) => setEv({ ...ev, end: e.target.value })} />\n          </div>\n          <div className=\"grid grid-cols-3 items-center gap-2\">\n            <Label>Location</Label>\n            <Input className=\"col-span-2\" value={ev.location ?? \"\"} onChange={(e) => setEv({ ...ev, location: e.target.value })} />\n          </div>\n          <div className=\"grid grid-cols-3 items-center gap-2\">\n            <Label>Tags</Label>\n            <Input className=\"col-span-2\" value={(ev.tags ?? []).join(\", \")} onChange={(e) => setEv({ ...ev, tags: e.target.value.split(/\\s*,\\s*|\\s*;\\s*/).filter(Boolean) })} />\n          </div>\n          <div className=\"grid grid-cols-3 items-start gap-2\">\n            <Label>Description</Label>\n            <Textarea className=\"col-span-2\" rows={3} value={ev.description ?? \"\"} onChange={(e) => setEv({ ...ev, description: e.target.value })} />\n          </div>\n        </div>\n        <DialogFooter>\n          <div className=\"flex w-full justify-between\">\n            <Button variant=\"ghost\" onClick={() => setEv(null)}>Cancel</Button>\n            <div className=\"space-x-2\">\n              <Button variant=\"secondary\" onClick={() => setEv({ ...ev, id: uid() })}>Duplicate</Button>\n              <Button onClick={onSave}>Save</Button>\n            </div>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n// ---------- Help Panel ----------\n\nfunction HelpPanel() {\n  return (\n    <div className=\"prose prose-sm dark:prose-invert max-w-none\">\n      <h3>Text formats</h3>\n      <p>Use one event per line. Supported date formats: <code>YYYY</code>, <code>YYYY-MM</code>, <code>YYYY-MM-DD</code>. Ranges: <code>start..end</code>.</p>\n      <ol>\n        <li>\n          <p><strong>Format A</strong>: <code>DATE — Title | description: ... | location: ... | tags: tag1, tag2</code></p>\n          <p>Examples:</p>\n          <pre>{`2012-06 — Moved to Berlin | description: First big relocation | location: Berlin | tags: life, move\n1999..2004 — University | description: Psychology major | location: St. Petersburg | tags: study`}</pre>\n        </li>\n        <li>\n          <p><strong>Format B</strong>: <code>Title @ DATE [.. DATE] (#tags) (location)</code></p>\n          <pre>{`Started AI Lab @ 2023-01 (#ai, #startup) (Berlin)\nTherapy training @ 2018..2020 (#learning)`}</pre>\n        </li>\n        <li>\n          <p><strong>CSV-like</strong>: <code>start,end,title,description,location,tags</code> (header optional)</p>\n          <pre>{`start,end,title,description,location,tags\n2015-03,,Started Coaching,,Moscow,career; coaching\n2019-09,2021-06,Master's Program,Human-Computer Interaction,Berlin,study`}</pre>\n        </li>\n      </ol>\n      <p className=\"mt-2\">Tip: Use ranges for periods and single dates for point events.</p>\n    </div>\n  );\n}\n\n// ---------- Sample AI Timeline ----------\n\nconst sampleText = `\n1943 — McCulloch & Pitts: \"A Logical Calculus of Ideas Immanent in Nervous Activity\" | description: Foundational neural network formalism | tags: ai, neural-networks\n1950 — Alan Turing: \"Computing Machinery and Intelligence\" | description: Imitation Game (Turing Test) | tags: ai, theory\n1951 — Turing's chess program (simulated) | description: Early heuristic search | tags: ai, games\n1956-07 — Dartmouth Conference | description: Field named \"Artificial Intelligence\" | location: Dartmouth College | tags: ai, history\n1958 — Rosenblatt Perceptron | description: Trainable neural network | tags: ai, neural-networks\n1966 — ELIZA (Weizenbaum) | description: Early NLP chatbot | tags: ai, nlp, chatbot\n1967 — Nearest Neighbor (Cover & Hart) | description: Pattern recognition milestone | tags: ai, ml\n1972 — Shakey the Robot | description: Mobile robot with planning | tags: ai, robotics\n1980 — Expert systems boom | description: Knowledge-based AI in industry | tags: ai, expert-systems\n1987..1993 — AI Winter | description: Funding and interest decline | tags: ai, history\n1997 — Deep Blue defeats Garry Kasparov | description: Game-tree search milestone | tags: ai, games\n2006 — Deep learning renaissance (Hinton et al.) | description: Layer-wise pretraining | tags: ai, deep-learning\n2009 — ImageNet dataset (Deng et al.) | description: Large-scale labeled images | tags: ai, vision, datasets\n2012 — AlexNet wins ImageNet | description: GPU-accelerated CNN breakthrough | tags: ai, deep-learning, vision\n2014 — Seq2Seq & Word2Vec era | description: NMT and distributed semantics | tags: ai, nlp\n2017 — Transformer architecture (Vaswani et al.) | description: Attention-only models | tags: ai, nlp, transformers\n2018 — BERT (Devlin et al.) | description: Bidirectional pretraining | tags: ai, nlp\n2020 — GPT-3 | description: Large-scale autoregressive LM | tags: ai, nlp, gpt\n2021 — AlphaFold2 | description: Protein structure predictions | tags: ai, science, biology\n2022-11 — ChatGPT | description: Conversational AI at scale | tags: ai, nlp, chatgpt\n2023 — GPT-4 | description: Reasoning & multimodal improvements | tags: ai, gpt\n`;\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","9297387334694566943","traceTime",1776415931493]
</article></body></html>