[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_352":353,"_354":355},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":54,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":60,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",27,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/BlockEditor.tsx","latestPath","fileId","d706eb86-5788-11f1-a659-ee650bb23af1","name","BlockEditor.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nconst cardStyle: any = {\n background: \"rgba(30,41,59,0.6)\",\n border: \"1px solid rgba(71,85,105,0.25)\",\n borderRadius: 16,\n padding: 20,\n};\n\nconst inputStyle: any = {\n padding: \"8px 12px\",\n background: \"rgba(15,23,42,0.8)\",\n border: \"1px solid rgba(71,85,105,0.3)\",\n borderRadius: 8,\n color: \"#e2e8f0\",\n fontSize: 14,\n outline: \"none\",\n fontFamily: \"Inter, sans-serif\",\n width: \"100%\",\n};\n\nconst btnPrimary: any = {\n padding: \"8px 16px\",\n borderRadius: 8,\n border: \"none\",\n cursor: \"pointer\",\n fontSize: 13,\n fontWeight: 600,\n fontFamily: \"Inter, sans-serif\",\n background: \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n color: \"#fff\",\n};\n\nconst BLOCK_TYPES = [\n { type: \"text\", label: \"Text Block\", icon: \"📝\" },\n { type: \"announcement\", label: \"Announcement\", icon: \"📢\" },\n { type: \"exam_schedule\", label: \"Exam Schedule\", icon: \"📅\" },\n { type: \"presentation_list\", label: \"Presentation List\", icon: \"🎤\" },\n { type: \"checklist\", label: \"Checklist\", icon: \"✅\" },\n { type: \"links\", label: \"Useful Links\", icon: \"🔗\" },\n { type: \"table\", label: \"Table\", icon: \"📊\" },\n { type: \"file\", label: \"File Links\", icon: \"📁\" },\n];\n\nexport function BlockEditor({ tab, blocks, onRefresh }: { tab: any; blocks: any[]; onRefresh: () => void }) {\n const [addingType, setAddingType] = useState(null);\n const [editingBlock, setEditingBlock] = useState(null);\n\n const addBlock = async (type: string, title: string, content: any) => {\n await api.createBlock(tab.id, type, title, content);\n setAddingType(null);\n onRefresh();\n };\n\n const updateBlock = async (id: number, title: string, content: any) => {\n await api.updateBlock(id, { title, content });\n setEditingBlock(null);\n onRefresh();\n };\n\n const deleteBlock = async (id: number) => {\n if (!confirm(\"Delete this block?\")) return;\n await api.deleteBlock(id);\n onRefresh();\n };\n\n const moveBlock = async (blockId: number, direction: \"up\" | \"down\") => {\n const idx = blocks.findIndex(b => b.id === blockId);\n if (direction === \"up\" && idx > 0) {\n await api.updateBlock(blocks[idx].id, { sort_order: blocks[idx - 1].sort_order });\n await api.updateBlock(blocks[idx - 1].id, { sort_order: blocks[idx].sort_order });\n } else if (direction === \"down\" && idx < blocks.length - 1) {\n await api.updateBlock(blocks[idx].id, { sort_order: blocks[idx + 1].sort_order });\n await api.updateBlock(blocks[idx + 1].id, { sort_order: blocks[idx].sort_order });\n }\n onRefresh();\n };\n\n return (\n

\n {/* Add Block Type Selector */}\n

➕ Add Content Block

\n {BLOCK_TYPES.map(bt => (\n setAddingType(addingType === bt.type ? null : bt.type)}\n style={{\n padding: \"8px 14px\",\n borderRadius: 10,\n border: addingType === bt.type ? \"1px solid rgba(99,102,241,0.4)\" : \"1px solid rgba(71,85,105,0.3)\",\n background: addingType === bt.type ? \"rgba(99,102,241,0.15)\" : \"rgba(15,23,42,0.5)\",\n color: addingType === bt.type ? \"#818cf8\" : \"#94a3b8\",\n cursor: \"pointer\",\n fontSize: 12,\n fontWeight: 600,\n fontFamily: \"Inter, sans-serif\",\n display: \"flex\",\n alignItems: \"center\",\n gap: 6,\n transition: \"all 0.2s\",\n }}\n >\n {bt.icon} {bt.label}\n \n ))}\n

\n\n {/* Block Creation Form */}\n {addingType && (\n

\n addBlock(addingType, title, content)}\n onCancel={() => setAddingType(null)}\n />\n

\n )}\n

\n\n {/* Existing Blocks */}\n

\n {blocks.map((block, i) => {\n let content: any = {};\n try { content = typeof block.content === \"string\" ? JSON.parse(block.content) : block.content; } catch {}\n const btInfo = BLOCK_TYPES.find(b => b.type === block.block_type);\n\n return (\n

\n {btInfo?.icon || \"📄\"}\n {block.title || btInfo?.label}\n {block.block_type.replace(\"_\", \" \")}\n

\n \n \n setEditingBlock(editingBlock?.id === block.id ? null : { ...block, content })}\n style={{ ...btnPrimary, padding: \"4px 8px\", fontSize: 11, background: \"#334155\" }}\n >✏️\n \n

\n\n {editingBlock?.id === block.id && (\n

\n updateBlock(block.id, title, newContent)}\n onCancel={() => setEditingBlock(null)}\n />\n

\n )}\n

\n );\n })}\n {blocks.length === 0 && (\n

\n No blocks yet. Add one using the buttons above.\n

\n )}\n

\n );\n}\n\nfunction BlockForm({ type, initialTitle, initialContent, onSave, onCancel }: {\n type: string; initialTitle?: string; initialContent?: any; onSave: (title: string, content: any) => void; onCancel: () => void;\n}) {\n const [title, setTitle] = useState(initialTitle || \"\");\n const [content, setContent] = useState(initialContent || {});\n\n const handleSave = () => onSave(title, content);\n\n return (\n

\n Block Title\n setTitle(e.target.value)} placeholder=\"Title...\" style={inputStyle} />\n

\n\n {/* Type-specific editors */}\n {type === \"text\" && (\n

\n Content\n setContent({ ...content, text: e.target.value })}\n placeholder=\"Enter text content...\"\n rows={4}\n style={{ ...inputStyle, resize: \"vertical\" }}\n />\n

\n )}\n\n {type === \"announcement\" && (\n

\n Priority\n setContent({ ...content, priority: e.target.value })}\n style={inputStyle}\n >\n \n \n \n

\n Date\n setContent({ ...content, date: e.target.value })} style={inputStyle} />\n

\n Message\n

setContent({ ...content, text: e.target.value })} placeholder=\"Announcement...\" rows={3} style={{ ...inputStyle, resize: \"vertical\" }} />\n        </div>\n      )}\n\n      {type === \"exam_schedule\" && (\n        <ExamEditor exams={content.exams || []} onChange={exams => setContent({ ...content, exams })} />\n      )}\n\n      {type === \"presentation_list\" && (\n        <ListEditor items={content.items || []} onChange={items => setContent({ ...content, items })} label=\"Student Name\" />\n      )}\n\n      {type === \"checklist\" && (\n        <ChecklistEditor items={content.items || []} onChange={items => setContent({ ...content, items })} />\n      )}\n\n      {type === \"links\" && (\n        <LinksEditor links={content.links || []} onChange={links => setContent({ ...content, links })} />\n      )}\n\n      {type === \"table\" && (\n        <TableEditor headers={content.headers || []} rows={content.rows || []} onChange={(headers, rows) => setContent({ ...content, headers, rows })} />\n      )}\n\n      {type === \"file\" && (\n        <LinksEditor links={content.files || []} onChange={files => setContent({ ...content, files })} labelA=\"File Name\" labelB=\"File URL\" />\n      )}\n\n      <div style={{ display: \"flex\", gap: 8, marginTop: 16 }}>\n        <button onClick={handleSave} style={btnPrimary}>💾 Save Block</button>\n        <button onClick={onCancel} style={{ ...btnPrimary, background: \"#334155\" }}>Cancel</button>\n      </div>\n    </div>\n  );\n}\n\nfunction ExamEditor({ exams, onChange }: { exams: any[]; onChange: (e: any[]) => void }) {\n  const add = () => onChange([...exams, { subject: \"\", date: \"\", time: \"\", room: \"\" }]);\n  const remove = (i: number) => onChange(exams.filter((_, idx) => idx !== i));\n  const update = (i: number, field: string, val: string) => {\n    const copy = [...exams];\n    copy[i] = { ...copy[i], [field]: val };\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 8 }}>Exams</label>\n      {exams.map((exam, i) => (\n        <div key={i} style={{ display: \"flex\", gap: 6, marginBottom: 8, flexWrap: \"wrap\" }}>\n          <input value={exam.subject} onChange={e => update(i, \"subject\", e.target.value)} placeholder=\"Subject\" style={{ ...inputStyle, flex: 2, minWidth: 120 }} />\n          <input type=\"date\" value={exam.date} onChange={e => update(i, \"date\", e.target.value)} style={{ ...inputStyle, flex: 1, minWidth: 120 }} />\n          <input value={exam.time} onChange={e => update(i, \"time\", e.target.value)} placeholder=\"Time\" style={{ ...inputStyle, width: 80 }} />\n          <input value={exam.room} onChange={e => update(i, \"room\", e.target.value)} placeholder=\"Room\" style={{ ...inputStyle, width: 80 }} />\n          <button onClick={() => remove(i)} style={{ padding: \"4px 8px\", borderRadius: 6, border: \"1px solid rgba(239,68,68,0.3)\", background: \"rgba(239,68,68,0.1)\", color: \"#f87171\", cursor: \"pointer\", fontSize: 12, fontFamily: \"Inter\" }}>✕</button>\n        </div>\n      ))}\n      <button onClick={add} style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}>+ Add Exam</button>\n    </div>\n  );\n}\n\nfunction ListEditor({ items, onChange, label }: { items: string[]; onChange: (items: string[]) => void; label: string }) {\n  const [newItem, setNewItem] = useState(\"\");\n  const add = () => { if (newItem.trim()) { onChange([...items, newItem.trim()]); setNewItem(\"\"); } };\n  const remove = (i: number) => onChange(items.filter((_, idx) => idx !== i));\n  const move = (i: number, dir: number) => {\n    const copy = [...items];\n    const j = i + dir;\n    if (j < 0 || j >= copy.length) return;\n    [copy[i], copy[j]] = [copy[j], copy[i]];\n    onChange(copy);\n  };\n  const edit = (i: number, val: string) => {\n    const copy = [...items];\n    copy[i] = val;\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 8 }}>{label}s</label>\n      {items.map((item, i) => (\n        <div key={i} style={{ display: \"flex\", gap: 6, marginBottom: 4, alignItems: \"center\" }}>\n          <span style={{ fontSize: 12, color: \"#64748b\", width: 20, textAlign: \"center\", fontWeight: 700 }}>{i + 1}</span>\n          <input value={item} onChange={e => edit(i, e.target.value)} style={{ ...inputStyle, flex: 1 }} />\n          <button onClick={() => move(i, -1)} disabled={i === 0} style={{ padding: \"4px 6px\", borderRadius: 4, border: \"1px solid rgba(71,85,105,0.3)\", background: \"transparent\", color: i === 0 ? \"#334155\" : \"#94a3b8\", cursor: \"pointer\", fontSize: 11, fontFamily: \"Inter\" }}>↑</button>\n          <button onClick={() => move(i, 1)} disabled={i === items.length - 1} style={{ padding: \"4px 6px\", borderRadius: 4, border: \"1px solid rgba(71,85,105,0.3)\", background: \"transparent\", color: i === items.length - 1 ? \"#334155\" : \"#94a3b8\", cursor: \"pointer\", fontSize: 11, fontFamily: \"Inter\" }}>↓</button>\n          <button onClick={() => remove(i)} style={{ padding: \"4px 6px\", borderRadius: 4, border: \"1px solid rgba(239,68,68,0.3)\", background: \"rgba(239,68,68,0.1)\", color: \"#f87171\", cursor: \"pointer\", fontSize: 11, fontFamily: \"Inter\" }}>✕</button>\n        </div>\n      ))}\n      <div style={{ display: \"flex\", gap: 6, marginTop: 8 }}>\n        <input value={newItem} onChange={e => setNewItem(e.target.value)} placeholder={`Add ${label.toLowerCase()}...`} style={{ ...inputStyle, flex: 1 }} onKeyDown={e => e.key === \"Enter\" && add()} />\n        <button onClick={add} style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}>+ Add</button>\n      </div>\n    </div>\n  );\n}\n\nfunction ChecklistEditor({ items, onChange }: { items: any[]; onChange: (items: any[]) => void }) {\n  const [newText, setNewText] = useState(\"\");\n  const add = () => { if (newText.trim()) { onChange([...items, { text: newText.trim(), done: false, deadline: \"\" }]); setNewText(\"\"); } };\n  const remove = (i: number) => onChange(items.filter((_, idx) => idx !== i));\n  const update = (i: number, field: string, val: any) => {\n    const copy = [...items];\n    copy[i] = { ...copy[i], [field]: val };\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 8 }}>Tasks</label>\n      {items.map((item, i) => (\n        <div key={i} style={{ display: \"flex\", gap: 6, marginBottom: 6, alignItems: \"center\", flexWrap: \"wrap\" }}>\n          <input type=\"checkbox\" checked={item.done} onChange={e => update(i, \"done\", e.target.checked)} />\n          <input value={item.text} onChange={e => update(i, \"text\", e.target.value)} style={{ ...inputStyle, flex: 2, minWidth: 150 }} />\n          <input type=\"date\" value={item.deadline || \"\"} onChange={e => update(i, \"deadline\", e.target.value)} style={{ ...inputStyle, flex: 1, minWidth: 120 }} />\n          <button onClick={() => remove(i)} style={{ padding: \"4px 6px\", borderRadius: 4, border: \"1px solid rgba(239,68,68,0.3)\", background: \"rgba(239,68,68,0.1)\", color: \"#f87171\", cursor: \"pointer\", fontSize: 11, fontFamily: \"Inter\" }}>✕</button>\n        </div>\n      ))}\n      <div style={{ display: \"flex\", gap: 6, marginTop: 8 }}>\n        <input value={newText} onChange={e => setNewText(e.target.value)} placeholder=\"Add task...\" style={{ ...inputStyle, flex: 1 }} onKeyDown={e => e.key === \"Enter\" && add()} />\n        <button onClick={add} style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}>+ Add</button>\n      </div>\n    </div>\n  );\n}\n\nfunction LinksEditor({ links, onChange, labelA, labelB }: { links: any[]; onChange: (l: any[]) => void; labelA?: string; labelB?: string }) {\n  const add = () => onChange([...links, { title: \"\", url: \"\" }]);\n  const remove = (i: number) => onChange(links.filter((_, idx) => idx !== i));\n  const update = (i: number, field: string, val: string) => {\n    const copy = [...links];\n    copy[i] = { ...copy[i], [field]: val };\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 8 }}>{labelA || \"Links\"}</label>\n      {links.map((link, i) => (\n        <div key={i} style={{ display: \"flex\", gap: 6, marginBottom: 6 }}>\n          <input value={link.title || link.name || \"\"} onChange={e => update(i, labelA === \"File Name\" ? \"name\" : \"title\", e.target.value)} placeholder={labelA || \"Title\"} style={{ ...inputStyle, flex: 1 }} />\n          <input value={link.url} onChange={e => update(i, \"url\", e.target.value)} placeholder={labelB || \"URL\"} style={{ ...inputStyle, flex: 2 }} />\n          <button onClick={() => remove(i)} style={{ padding: \"4px 6px\", borderRadius: 4, border: \"1px solid rgba(239,68,68,0.3)\", background: \"rgba(239,68,68,0.1)\", color: \"#f87171\", cursor: \"pointer\", fontSize: 11, fontFamily: \"Inter\" }}>✕</button>\n        </div>\n      ))}\n      <button onClick={add} style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}>+ Add</button>\n    </div>\n  );\n}\n\nfunction TableEditor({ headers, rows, onChange }: { headers: string[]; rows: string[][]; onChange: (h: string[], r: string[][]) => void }) {\n  const addCol = () => {\n    onChange([...headers, `Column ${headers.length + 1}`], rows.map(r => [...r, \"\"]));\n  };\n  const addRow = () => onChange(headers, [...rows, headers.map(() => \"\")]);\n  const removeCol = (ci: number) => {\n    onChange(headers.filter((_, i) => i !== ci), rows.map(r => r.filter((_, i) => i !== ci)));\n  };\n  const removeRow = (ri: number) => onChange(headers, rows.filter((_, i) => i !== ri));\n  const updateHeader = (i: number, val: string) => {\n    const copy = [...headers];\n    copy[i] = val;\n    onChange(copy, rows);\n  };\n  const updateCell = (ri: number, ci: number, val: string) => {\n    const copy = rows.map(r => [...r]);\n    copy[ri][ci] = val;\n    onChange(headers, copy);\n  };\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", gap: 8, marginBottom: 8 }}>\n        <button onClick={addCol} style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}>+ Column</button>\n        <button onClick={addRow} style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}>+ Row</button>\n      </div>\n      {headers.length > 0 && (\n        <div style={{ overflowX: \"auto\" }}>\n          <div style={{ display: \"flex\", gap: 4, marginBottom: 4 }}>\n            {headers.map((h, i) => (\n              <div key={i} style={{ display: \"flex\", gap: 2, flex: 1, minWidth: 100 }}>\n                <input value={h} onChange={e => updateHeader(i, e.target.value)} style={{ ...inputStyle, fontWeight: 700, fontSize: 12 }} />\n                <button onClick={() => removeCol(i)} style={{ padding: \"2px 4px\", borderRadius: 4, border: \"none\", background: \"rgba(239,68,68,0.2)\", color: \"#f87171\", cursor: \"pointer\", fontSize: 10, fontFamily: \"Inter\" }}>✕</button>\n              </div>\n            ))}\n          </div>\n          {rows.map((row, ri) => (\n            <div key={ri} style={{ display: \"flex\", gap: 4, marginBottom: 2, alignItems: \"center\" }}>\n              {row.map((cell, ci) => (\n                <input key={ci} value={cell} onChange={e => updateCell(ri, ci, e.target.value)} style={{ ...inputStyle, flex: 1, minWidth: 100, fontSize: 13 }} />\n              ))}\n              <button onClick={() => removeRow(ri)} style={{ padding: \"2px 6px\", borderRadius: 4, border: \"none\", background: \"rgba(239,68,68,0.2)\", color: \"#f87171\", cursor: \"pointer\", fontSize: 10, fontFamily: \"Inter\", flexShrink: 0 }}>✕</button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nconst cardStyle: any = {\n  background: \"rgba(30,41,59,0.6)\",\n  border: \"1px solid rgba(71,85,105,0.25)\",\n  borderRadius: 16,\n  padding: 20,\n};\n\nconst inputStyle: any = {\n  padding: \"8px 12px\",\n  background: \"rgba(15,23,42,0.8)\",\n  border: \"1px solid rgba(71,85,105,0.3)\",\n  borderRadius: 8,\n  color: \"#e2e8f0\",\n  fontSize: 14,\n  outline: \"none\",\n  fontFamily: \"Inter, sans-serif\",\n  width: \"100%\",\n};\n\nconst btnPrimary: any = {\n  padding: \"8px 16px\",\n  borderRadius: 8,\n  border: \"none\",\n  cursor: \"pointer\",\n  fontSize: 13,\n  fontWeight: 600,\n  fontFamily: \"Inter, sans-serif\",\n  background: \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n  color: \"#fff\",\n};\n\nconst BLOCK_TYPES = [\n  { type: \"text\", label: \"Text Block\", icon: \"📝\" },\n  { type: \"announcement\", label: \"Announcement\", icon: \"📢\" },\n  { type: \"exam_schedule\", label: \"Exam Schedule\", icon: \"📅\" },\n  { type: \"presentation_list\", label: \"Presentation List\", icon: \"🎤\" },\n  { type: \"checklist\", label: \"Checklist\", icon: \"✅\" },\n  { type: \"links\", label: \"Useful Links\", icon: \"🔗\" },\n  { type: \"table\", label: \"Table\", icon: \"📊\" },\n  { type: \"file\", label: \"File Links\", icon: \"📁\" },\n];\n\nexport function BlockEditor(\n  { tab, blocks, onRefresh }: {\n    tab: any;\n    blocks: any[];\n    onRefresh: () => void;\n  },\n) {\n  const [addingType, setAddingType] = useState<string | null>(null);\n  const [editingBlock, setEditingBlock] = useState<any>(null);\n\n  const addBlock = async (type: string, title: string, content: any) => {\n    await api.createBlock(tab.id, type, title, content);\n    setAddingType(null);\n    onRefresh();\n  };\n\n  const updateBlock = async (id: number, title: string, content: any) => {\n    await api.updateBlock(id, { title, content });\n    setEditingBlock(null);\n    onRefresh();\n  };\n\n  const deleteBlock = async (id: number) => {\n    if (!confirm(\"Delete this block?\")) return;\n    await api.deleteBlock(id);\n    onRefresh();\n  };\n\n  const moveBlock = async (blockId: number, direction: \"up\" | \"down\") => {\n    const idx = blocks.findIndex((b) => b.id === blockId);\n    if (direction === \"up\" && idx > 0) {\n      await api.updateBlock(blocks[idx].id, {\n        sort_order: blocks[idx - 1].sort_order,\n      });\n      await api.updateBlock(blocks[idx - 1].id, {\n        sort_order: blocks[idx].sort_order,\n      });\n    } else if (direction === \"down\" && idx < blocks.length - 1) {\n      await api.updateBlock(blocks[idx].id, {\n        sort_order: blocks[idx + 1].sort_order,\n      });\n      await api.updateBlock(blocks[idx + 1].id, {\n        sort_order: blocks[idx].sort_order,\n      });\n    }\n    onRefresh();\n  };\n\n  return (\n    <div>\n      {/* Add Block Type Selector */}\n      <div style={{ ...cardStyle, marginBottom: 20 }}>\n        <h3\n          style={{\n            fontSize: 15,\n            fontWeight: 700,\n            color: \"#f1f5f9\",\n            marginBottom: 12,\n          }}\n        >\n          ➕ Add Content Block\n        </h3>\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n          {BLOCK_TYPES.map((bt) => (\n            <button\n              key={bt.type}\n              onClick={() =>\n                setAddingType(addingType === bt.type ? null : bt.type)}\n              style={{\n                padding: \"8px 14px\",\n                borderRadius: 10,\n                border: addingType === bt.type\n                  ? \"1px solid rgba(99,102,241,0.4)\"\n                  : \"1px solid rgba(71,85,105,0.3)\",\n                background: addingType === bt.type\n                  ? \"rgba(99,102,241,0.15)\"\n                  : \"rgba(15,23,42,0.5)\",\n                color: addingType === bt.type ? \"#818cf8\" : \"#94a3b8\",\n                cursor: \"pointer\",\n                fontSize: 12,\n                fontWeight: 600,\n                fontFamily: \"Inter, sans-serif\",\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 6,\n                transition: \"all 0.2s\",\n              }}\n            >\n              <span>{bt.icon}</span> {bt.label}\n            </button>\n          ))}\n        </div>\n\n        {/* Block Creation Form */}\n        {addingType && (\n          <div className=\"animate-fade\" style={{ marginTop: 16 }}>\n            <BlockForm\n              type={addingType}\n              onSave={(title, content) => addBlock(addingType, title, content)}\n              onCancel={() => setAddingType(null)}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Existing Blocks */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n        {blocks.map((block, i) => {\n          let content: any = {};\n          try {\n            content = typeof block.content === \"string\"\n              ? JSON.parse(block.content)\n              : block.content;\n          } catch {}\n          const btInfo = BLOCK_TYPES.find((b) => b.type === block.block_type);\n\n          return (\n            <div\n              key={block.id}\n              style={{\n                ...cardStyle,\n                borderLeft: \"3px solid rgba(99,102,241,0.5)\",\n                padding: 16,\n              }}\n            >\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"space-between\",\n                  marginBottom: editingBlock?.id === block.id ? 16 : 0,\n                }}\n              >\n                <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                  <span style={{ fontSize: 18 }}>{btInfo?.icon || \"📄\"}</span>\n                  <span\n                    style={{ fontSize: 14, fontWeight: 600, color: \"#e2e8f0\" }}\n                  >\n                    {block.title || btInfo?.label}\n                  </span>\n                  <span\n                    style={{\n                      fontSize: 10,\n                      padding: \"2px 6px\",\n                      borderRadius: 4,\n                      background: \"rgba(99,102,241,0.15)\",\n                      color: \"#818cf8\",\n                      fontWeight: 600,\n                    }}\n                  >\n                    {block.block_type.replace(\"_\", \" \")}\n                  </span>\n                </div>\n                <div style={{ display: \"flex\", gap: 4 }}>\n                  <button\n                    onClick={() => moveBlock(block.id, \"up\")}\n                    disabled={i === 0}\n                    style={{\n                      ...btnPrimary,\n                      padding: \"4px 8px\",\n                      fontSize: 11,\n                      background: i === 0 ? \"#334155\" : btnPrimary.background,\n                    }}\n                  >\n                    ↑\n                  </button>\n                  <button\n                    onClick={() => moveBlock(block.id, \"down\")}\n                    disabled={i === blocks.length - 1}\n                    style={{\n                      ...btnPrimary,\n                      padding: \"4px 8px\",\n                      fontSize: 11,\n                      background: i === blocks.length - 1\n                        ? \"#334155\"\n                        : btnPrimary.background,\n                    }}\n                  >\n                    ↓\n                  </button>\n                  <button\n                    onClick={() =>\n                      setEditingBlock(\n                        editingBlock?.id === block.id\n                          ? null\n                          : { ...block, content },\n                      )}\n                    style={{\n                      ...btnPrimary,\n                      padding: \"4px 8px\",\n                      fontSize: 11,\n                      background: \"#334155\",\n                    }}\n                  >\n                    ✏️\n                  </button>\n                  <button\n                    onClick={() => deleteBlock(block.id)}\n                    style={{\n                      padding: \"4px 8px\",\n                      borderRadius: 8,\n                      border: \"1px solid rgba(239,68,68,0.3)\",\n                      background: \"rgba(239,68,68,0.1)\",\n                      color: \"#f87171\",\n                      cursor: \"pointer\",\n                      fontSize: 11,\n                      fontFamily: \"Inter\",\n                    }}\n                  >\n                    🗑️\n                  </button>\n                </div>\n              </div>\n\n              {editingBlock?.id === block.id && (\n                <div className=\"animate-fade\">\n                  <BlockForm\n                    type={block.block_type}\n                    initialTitle={block.title}\n                    initialContent={content}\n                    onSave={(title, newContent) =>\n                      updateBlock(block.id, title, newContent)}\n                    onCancel={() => setEditingBlock(null)}\n                  />\n                </div>\n              )}\n            </div>\n          );\n        })}\n        {blocks.length === 0 && (\n          <div\n            style={{\n              textAlign: \"center\",\n              padding: 40,\n              color: \"#475569\",\n              fontSize: 14,\n            }}\n          >\n            No blocks yet. Add one using the buttons above.\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction BlockForm({ type, initialTitle, initialContent, onSave, onCancel }: {\n  type: string;\n  initialTitle?: string;\n  initialContent?: any;\n  onSave: (title: string, content: any) => void;\n  onCancel: () => void;\n}) {\n  const [title, setTitle] = useState(initialTitle || \"\");\n  const [content, setContent] = useState<any>(initialContent || {});\n\n  const handleSave = () => onSave(title, content);\n\n  return (\n    <div style={{ borderTop: \"1px solid rgba(71,85,105,0.2)\", paddingTop: 16 }}>\n      <div style={{ marginBottom: 12 }}>\n        <label\n          style={{\n            display: \"block\",\n            fontSize: 12,\n            fontWeight: 600,\n            color: \"#94a3b8\",\n            marginBottom: 4,\n          }}\n        >\n          Block Title\n        </label>\n        <input\n          value={title}\n          onChange={(e) => setTitle(e.target.value)}\n          placeholder=\"Title...\"\n          style={inputStyle}\n        />\n      </div>\n\n      {/* Type-specific editors */}\n      {type === \"text\" && (\n        <div>\n          <label\n            style={{\n              display: \"block\",\n              fontSize: 12,\n              fontWeight: 600,\n              color: \"#94a3b8\",\n              marginBottom: 4,\n            }}\n          >\n            Content\n          </label>\n          <textarea\n            value={content.text || \"\"}\n            onChange={(e) => setContent({ ...content, text: e.target.value })}\n            placeholder=\"Enter text content...\"\n            rows={4}\n            style={{ ...inputStyle, resize: \"vertical\" }}\n          />\n        </div>\n      )}\n\n      {type === \"announcement\" && (\n        <div>\n          <div style={{ marginBottom: 12 }}>\n            <label\n              style={{\n                display: \"block\",\n                fontSize: 12,\n                fontWeight: 600,\n                color: \"#94a3b8\",\n                marginBottom: 4,\n              }}\n            >\n              Priority\n            </label>\n            <select\n              value={content.priority || \"normal\"}\n              onChange={(e) =>\n                setContent({ ...content, priority: e.target.value })}\n              style={inputStyle}\n            >\n              <option value=\"normal\">Normal</option>\n              <option value=\"urgent\">Urgent</option>\n            </select>\n          </div>\n          <div style={{ marginBottom: 12 }}>\n            <label\n              style={{\n                display: \"block\",\n                fontSize: 12,\n                fontWeight: 600,\n                color: \"#94a3b8\",\n                marginBottom: 4,\n              }}\n            >\n              Date\n            </label>\n            <input\n              type=\"date\"\n              value={content.date || \"\"}\n              onChange={(e) => setContent({ ...content, date: e.target.value })}\n              style={inputStyle}\n            />\n          </div>\n          <label\n            style={{\n              display: \"block\",\n              fontSize: 12,\n              fontWeight: 600,\n              color: \"#94a3b8\",\n              marginBottom: 4,\n            }}\n          >\n            Message\n          </label>\n          <textarea\n            value={content.text || \"\"}\n            onChange={(e) => setContent({ ...content, text: e.target.value })}\n            placeholder=\"Announcement...\"\n            rows={3}\n            style={{ ...inputStyle, resize: \"vertical\" }}\n          />\n        </div>\n      )}\n\n      {type === \"exam_schedule\" && (\n        <ExamEditor\n          exams={content.exams || []}\n          onChange={(exams) => setContent({ ...content, exams })}\n        />\n      )}\n\n      {type === \"presentation_list\" && (\n        <ListEditor\n          items={content.items || []}\n          onChange={(items) => setContent({ ...content, items })}\n          label=\"Student Name\"\n        />\n      )}\n\n      {type === \"checklist\" && (\n        <ChecklistEditor\n          items={content.items || []}\n          onChange={(items) => setContent({ ...content, items })}\n        />\n      )}\n\n      {type === \"links\" && (\n        <LinksEditor\n          links={content.links || []}\n          onChange={(links) => setContent({ ...content, links })}\n        />\n      )}\n\n      {type === \"table\" && (\n        <TableEditor\n          headers={content.headers || []}\n          rows={content.rows || []}\n          onChange={(headers, rows) =>\n            setContent({ ...content, headers, rows })}\n        />\n      )}\n\n      {type === \"file\" && (\n        <LinksEditor\n          links={content.files || []}\n          onChange={(files) => setContent({ ...content, files })}\n          labelA=\"File Name\"\n          labelB=\"File URL\"\n        />\n      )}\n\n      <div style={{ display: \"flex\", gap: 8, marginTop: 16 }}>\n        <button onClick={handleSave} style={btnPrimary}>💾 Save Block</button>\n        <button\n          onClick={onCancel}\n          style={{ ...btnPrimary, background: \"#334155\" }}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction ExamEditor(\n  { exams, onChange }: { exams: any[]; onChange: (e: any[]) => void },\n) {\n  const add = () =>\n    onChange([...exams, { subject: \"\", date: \"\", time: \"\", room: \"\" }]);\n  const remove = (i: number) => onChange(exams.filter((_, idx) => idx !== i));\n  const update = (i: number, field: string, val: string) => {\n    const copy = [...exams];\n    copy[i] = { ...copy[i], [field]: val };\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label\n        style={{\n          display: \"block\",\n          fontSize: 12,\n          fontWeight: 600,\n          color: \"#94a3b8\",\n          marginBottom: 8,\n        }}\n      >\n        Exams\n      </label>\n      {exams.map((exam, i) => (\n        <div\n          key={i}\n          style={{ display: \"flex\", gap: 6, marginBottom: 8, flexWrap: \"wrap\" }}\n        >\n          <input\n            value={exam.subject}\n            onChange={(e) => update(i, \"subject\", e.target.value)}\n            placeholder=\"Subject\"\n            style={{ ...inputStyle, flex: 2, minWidth: 120 }}\n          />\n          <input\n            type=\"date\"\n            value={exam.date}\n            onChange={(e) => update(i, \"date\", e.target.value)}\n            style={{ ...inputStyle, flex: 1, minWidth: 120 }}\n          />\n          <input\n            value={exam.time}\n            onChange={(e) => update(i, \"time\", e.target.value)}\n            placeholder=\"Time\"\n            style={{ ...inputStyle, width: 80 }}\n          />\n          <input\n            value={exam.room}\n            onChange={(e) => update(i, \"room\", e.target.value)}\n            placeholder=\"Room\"\n            style={{ ...inputStyle, width: 80 }}\n          />\n          <button\n            onClick={() => remove(i)}\n            style={{\n              padding: \"4px 8px\",\n              borderRadius: 6,\n              border: \"1px solid rgba(239,68,68,0.3)\",\n              background: \"rgba(239,68,68,0.1)\",\n              color: \"#f87171\",\n              cursor: \"pointer\",\n              fontSize: 12,\n              fontFamily: \"Inter\",\n            }}\n          >\n            ✕\n          </button>\n        </div>\n      ))}\n      <button\n        onClick={add}\n        style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}\n      >\n        + Add Exam\n      </button>\n    </div>\n  );\n}\n\nfunction ListEditor(\n  { items, onChange, label }: {\n    items: string[];\n    onChange: (items: string[]) => void;\n    label: string;\n  },\n) {\n  const [newItem, setNewItem] = useState(\"\");\n  const add = () => {\n    if (newItem.trim()) {\n      onChange([...items, newItem.trim()]);\n      setNewItem(\"\");\n    }\n  };\n  const remove = (i: number) => onChange(items.filter((_, idx) => idx !== i));\n  const move = (i: number, dir: number) => {\n    const copy = [...items];\n    const j = i + dir;\n    if (j < 0 || j >= copy.length) return;\n    [copy[i], copy[j]] = [copy[j], copy[i]];\n    onChange(copy);\n  };\n  const edit = (i: number, val: string) => {\n    const copy = [...items];\n    copy[i] = val;\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label\n        style={{\n          display: \"block\",\n          fontSize: 12,\n          fontWeight: 600,\n          color: \"#94a3b8\",\n          marginBottom: 8,\n        }}\n      >\n        {label}s\n      </label>\n      {items.map((item, i) => (\n        <div\n          key={i}\n          style={{\n            display: \"flex\",\n            gap: 6,\n            marginBottom: 4,\n            alignItems: \"center\",\n          }}\n        >\n          <span\n            style={{\n              fontSize: 12,\n              color: \"#64748b\",\n              width: 20,\n              textAlign: \"center\",\n              fontWeight: 700,\n            }}\n          >\n            {i + 1}\n          </span>\n          <input\n            value={item}\n            onChange={(e) => edit(i, e.target.value)}\n            style={{ ...inputStyle, flex: 1 }}\n          />\n          <button\n            onClick={() => move(i, -1)}\n            disabled={i === 0}\n            style={{\n              padding: \"4px 6px\",\n              borderRadius: 4,\n              border: \"1px solid rgba(71,85,105,0.3)\",\n              background: \"transparent\",\n              color: i === 0 ? \"#334155\" : \"#94a3b8\",\n              cursor: \"pointer\",\n              fontSize: 11,\n              fontFamily: \"Inter\",\n            }}\n          >\n            ↑\n          </button>\n          <button\n            onClick={() => move(i, 1)}\n            disabled={i === items.length - 1}\n            style={{\n              padding: \"4px 6px\",\n              borderRadius: 4,\n              border: \"1px solid rgba(71,85,105,0.3)\",\n              background: \"transparent\",\n              color: i === items.length - 1 ? \"#334155\" : \"#94a3b8\",\n              cursor: \"pointer\",\n              fontSize: 11,\n              fontFamily: \"Inter\",\n            }}\n          >\n            ↓\n          </button>\n          <button\n            onClick={() => remove(i)}\n            style={{\n              padding: \"4px 6px\",\n              borderRadius: 4,\n              border: \"1px solid rgba(239,68,68,0.3)\",\n              background: \"rgba(239,68,68,0.1)\",\n              color: \"#f87171\",\n              cursor: \"pointer\",\n              fontSize: 11,\n              fontFamily: \"Inter\",\n            }}\n          >\n            ✕\n          </button>\n        </div>\n      ))}\n      <div style={{ display: \"flex\", gap: 6, marginTop: 8 }}>\n        <input\n          value={newItem}\n          onChange={(e) => setNewItem(e.target.value)}\n          placeholder={`Add ${label.toLowerCase()}...`}\n          style={{ ...inputStyle, flex: 1 }}\n          onKeyDown={(e) => e.key === \"Enter\" && add()}\n        />\n        <button\n          onClick={add}\n          style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}\n        >\n          + Add\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction ChecklistEditor(\n  { items, onChange }: { items: any[]; onChange: (items: any[]) => void },\n) {\n  const [newText, setNewText] = useState(\"\");\n  const add = () => {\n    if (newText.trim()) {\n      onChange([...items, { text: newText.trim(), done: false, deadline: \"\" }]);\n      setNewText(\"\");\n    }\n  };\n  const remove = (i: number) => onChange(items.filter((_, idx) => idx !== i));\n  const update = (i: number, field: string, val: any) => {\n    const copy = [...items];\n    copy[i] = { ...copy[i], [field]: val };\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label\n        style={{\n          display: \"block\",\n          fontSize: 12,\n          fontWeight: 600,\n          color: \"#94a3b8\",\n          marginBottom: 8,\n        }}\n      >\n        Tasks\n      </label>\n      {items.map((item, i) => (\n        <div\n          key={i}\n          style={{\n            display: \"flex\",\n            gap: 6,\n            marginBottom: 6,\n            alignItems: \"center\",\n            flexWrap: \"wrap\",\n          }}\n        >\n          <input\n            type=\"checkbox\"\n            checked={item.done}\n            onChange={(e) => update(i, \"done\", e.target.checked)}\n          />\n          <input\n            value={item.text}\n            onChange={(e) => update(i, \"text\", e.target.value)}\n            style={{ ...inputStyle, flex: 2, minWidth: 150 }}\n          />\n          <input\n            type=\"date\"\n            value={item.deadline || \"\"}\n            onChange={(e) => update(i, \"deadline\", e.target.value)}\n            style={{ ...inputStyle, flex: 1, minWidth: 120 }}\n          />\n          <button\n            onClick={() => remove(i)}\n            style={{\n              padding: \"4px 6px\",\n              borderRadius: 4,\n              border: \"1px solid rgba(239,68,68,0.3)\",\n              background: \"rgba(239,68,68,0.1)\",\n              color: \"#f87171\",\n              cursor: \"pointer\",\n              fontSize: 11,\n              fontFamily: \"Inter\",\n            }}\n          >\n            ✕\n          </button>\n        </div>\n      ))}\n      <div style={{ display: \"flex\", gap: 6, marginTop: 8 }}>\n        <input\n          value={newText}\n          onChange={(e) => setNewText(e.target.value)}\n          placeholder=\"Add task...\"\n          style={{ ...inputStyle, flex: 1 }}\n          onKeyDown={(e) => e.key === \"Enter\" && add()}\n        />\n        <button\n          onClick={add}\n          style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}\n        >\n          + Add\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction LinksEditor(\n  { links, onChange, labelA, labelB }: {\n    links: any[];\n    onChange: (l: any[]) => void;\n    labelA?: string;\n    labelB?: string;\n  },\n) {\n  const add = () => onChange([...links, { title: \"\", url: \"\" }]);\n  const remove = (i: number) => onChange(links.filter((_, idx) => idx !== i));\n  const update = (i: number, field: string, val: string) => {\n    const copy = [...links];\n    copy[i] = { ...copy[i], [field]: val };\n    onChange(copy);\n  };\n\n  return (\n    <div>\n      <label\n        style={{\n          display: \"block\",\n          fontSize: 12,\n          fontWeight: 600,\n          color: \"#94a3b8\",\n          marginBottom: 8,\n        }}\n      >\n        {labelA || \"Links\"}\n      </label>\n      {links.map((link, i) => (\n        <div key={i} style={{ display: \"flex\", gap: 6, marginBottom: 6 }}>\n          <input\n            value={link.title || link.name || \"\"}\n            onChange={(e) =>\n              update(\n                i,\n                labelA === \"File Name\" ? \"name\" : \"title\",\n                e.target.value,\n              )}\n            placeholder={labelA || \"Title\"}\n            style={{ ...inputStyle, flex: 1 }}\n          />\n          <input\n            value={link.url}\n            onChange={(e) => update(i, \"url\", e.target.value)}\n            placeholder={labelB || \"URL\"}\n            style={{ ...inputStyle, flex: 2 }}\n          />\n          <button\n            onClick={() => remove(i)}\n            style={{\n              padding: \"4px 6px\",\n              borderRadius: 4,\n              border: \"1px solid rgba(239,68,68,0.3)\",\n              background: \"rgba(239,68,68,0.1)\",\n              color: \"#f87171\",\n              cursor: \"pointer\",\n              fontSize: 11,\n              fontFamily: \"Inter\",\n            }}\n          >\n            ✕\n          </button>\n        </div>\n      ))}\n      <button\n        onClick={add}\n        style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}\n      >\n        + Add\n      </button>\n    </div>\n  );\n}\n\nfunction TableEditor(\n  { headers, rows, onChange }: {\n    headers: string[];\n    rows: string[][];\n    onChange: (h: string[], r: string[][]) => void;\n  },\n) {\n  const addCol = () => {\n    onChange(\n      [...headers, `Column ${headers.length + 1}`],\n      rows.map((r) => [...r, \"\"]),\n    );\n  };\n  const addRow = () => onChange(headers, [...rows, headers.map(() => \"\")]);\n  const removeCol = (ci: number) => {\n    onChange(\n      headers.filter((_, i) => i !== ci),\n      rows.map((r) => r.filter((_, i) => i !== ci)),\n    );\n  };\n  const removeRow = (ri: number) =>\n    onChange(headers, rows.filter((_, i) => i !== ri));\n  const updateHeader = (i: number, val: string) => {\n    const copy = [...headers];\n    copy[i] = val;\n    onChange(copy, rows);\n  };\n  const updateCell = (ri: number, ci: number, val: string) => {\n    const copy = rows.map((r) => [...r]);\n    copy[ri][ci] = val;\n    onChange(headers, copy);\n  };\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", gap: 8, marginBottom: 8 }}>\n        <button\n          onClick={addCol}\n          style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}\n        >\n          + Column\n        </button>\n        <button\n          onClick={addRow}\n          style={{ ...btnPrimary, padding: \"6px 12px\", fontSize: 12 }}\n        >\n          + Row\n        </button>\n      </div>\n      {headers.length > 0 && (\n        <div style={{ overflowX: \"auto\" }}>\n          <div style={{ display: \"flex\", gap: 4, marginBottom: 4 }}>\n            {headers.map((h, i) => (\n              <div\n                key={i}\n                style={{ display: \"flex\", gap: 2, flex: 1, minWidth: 100 }}\n              >\n                <input\n                  value={h}\n                  onChange={(e) => updateHeader(i, e.target.value)}\n                  style={{ ...inputStyle, fontWeight: 700, fontSize: 12 }}\n                />\n                <button\n                  onClick={() => removeCol(i)}\n                  style={{\n                    padding: \"2px 4px\",\n                    borderRadius: 4,\n                    border: \"none\",\n                    background: \"rgba(239,68,68,0.2)\",\n                    color: \"#f87171\",\n                    cursor: \"pointer\",\n                    fontSize: 10,\n                    fontFamily: \"Inter\",\n                  }}\n                >\n                  ✕\n                </button>\n              </div>\n            ))}\n          </div>\n          {rows.map((row, ri) => (\n            <div\n              key={ri}\n              style={{\n                display: \"flex\",\n                gap: 4,\n                marginBottom: 2,\n                alignItems: \"center\",\n              }}\n            >\n              {row.map((cell, ci) => (\n                <input\n                  key={ci}\n                  value={cell}\n                  onChange={(e) => updateCell(ri, ci, e.target.value)}\n                  style={{\n                    ...inputStyle,\n                    flex: 1,\n                    minWidth: 100,\n                    fontSize: 13,\n                  }}\n                />\n              ))}\n              <button\n                onClick={() => removeRow(ri)}\n                style={{\n                  padding: \"2px 6px\",\n                  borderRadius: 4,\n                  border: \"none\",\n                  background: \"rgba(239,68,68,0.2)\",\n                  color: \"#f87171\",\n                  cursor: \"pointer\",\n                  fontSize: 10,\n                  fontFamily: \"Inter\",\n                  flexShrink: 0,\n                }}\n              >\n                ✕\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}","createdAt",["D",1779639091837],"branchVersion","branchId","eae836ba-5787-11f1-a921-ee650bb23af1","id","eae68036-5787-11f1-a921-ee650bb23af1","groupsite",["D",1779637669836],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","c7ac1f1d-b0fd-421e-ad86-d466b556e78a","pinnedFileId","eaf2e1b4-5787-11f1-a921-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e5aab-80d4-777e-96e3-17e9369f937d","tursoName","eae68036578711f1a921ee650bb23af1","tursoHostname","eae68036578711f1a921ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789498239291],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",33,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","telmanaskerov","handle","displayName","Telman Askerov","avatar","https://lh3.googleusercontent.com/a/ACg8ocIDw-gdZ-qjjbIVV6a0v_fsMoYG6tkDp9DIn1n3TAlTYO8vYQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":347,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":348,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":349,"_85":350,"_87":351,"_89":25},"tree",[169,176,190],"files",[169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190],"counts",{"_158":64,"_159":160,"_161":64,"_162":163,"_164":165},"contents",[131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":60,"_39":156,"_13":64,"_34":150,"_36":-5,"_24":25,"_143":-5,"_27":157},{"_44":145,"_32":146,"_30":147,"_136":-5,"_42":43,"_41":148,"_138":60,"_39":149,"_13":64,"_34":150,"_36":-5,"_24":25,"_143":-5,"_27":151},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":60,"_39":139,"_13":140,"_34":141,"_36":142,"_24":25,"_143":-5,"_27":144},"f3d7af50-578a-11f1-b2a7-ee650bb23af1","main.ts","parentId",25,"latest",["D",1779638973311],3,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { initDB } from \"./backend/db.ts\";\nimport chatRoutes from \"./backend/routes/chat.ts\";\nimport tabRoutes from \"./backend/routes/tabs.ts\";\nimport pollRoutes from \"./backend/routes/polls.ts\";\nimport authRoutes from \"./backend/routes/auth.ts\";\n\nconst app = new Hono();\n\nlet dbReady = false;\n\napp.use(\"*\", async (c, next) => {\n  if (!dbReady) {\n    await initDB();\n    dbReady = true;\n  }\n  await next();\n});\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\napp.get(\"/source\", (c) => {\n  return c.redirect(parseVal(import.meta.url).links.self.val);\n});\n\napp.route(\"/api/auth\", authRoutes);\napp.route(\"/api/chat\", chatRoutes);\napp.route(\"/api/tabs\", tabRoutes);\napp.route(\"/api/polls\", pollRoutes);\n\napp.onError((err, c) => {\n  console.error(err);\n  return c.text(\"Internal Server Error\", 500);\n});\n\nexport default app.fetch;","label",[135],"031221f6-5788-11f1-a941-ee650bb23af1","frontend","031222c8-5788-11f1-a941-ee650bb23af1",5,["D",1779637709231],"directory",[146],"025d75bc-5788-11f1-896e-ee650bb23af1","backend","025d76c0-5788-11f1-896e-ee650bb23af1",4,["D",1779637708797],[153],"pulls","branches",1,"forks","envVars",{"_166":64,"_168":64},"connections",{"_166":64,"_167":64},"count","unfilledCount","emptyCount",{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":60,"_39":344,"_13":64,"_34":150,"_36":-5,"_24":25,"_143":-5,"_192":345,"_27":346},{"_44":339,"_32":314,"_30":308,"_136":154,"_42":43,"_41":340,"_138":60,"_39":341,"_13":64,"_34":150,"_36":-5,"_24":25,"_143":-5,"_192":342,"_27":343},{"_44":331,"_32":332,"_30":333,"_136":308,"_42":43,"_41":334,"_138":60,"_39":335,"_13":64,"_34":35,"_36":336,"_24":25,"_143":-5,"_192":337,"_27":338},{"_44":323,"_32":324,"_30":325,"_136":308,"_42":43,"_41":326,"_138":60,"_39":327,"_13":64,"_34":35,"_36":328,"_24":25,"_143":-5,"_192":329,"_27":330},{"_44":315,"_32":316,"_30":317,"_136":308,"_42":43,"_41":318,"_138":60,"_39":319,"_13":64,"_34":35,"_36":320,"_24":25,"_143":-5,"_192":321,"_27":322},{"_44":305,"_32":306,"_30":307,"_136":308,"_42":43,"_41":309,"_138":60,"_39":310,"_13":64,"_34":35,"_36":311,"_24":25,"_143":-5,"_192":312,"_27":313},{"_44":297,"_32":298,"_30":299,"_136":154,"_42":43,"_41":300,"_138":60,"_39":301,"_13":64,"_34":35,"_36":302,"_24":25,"_143":-5,"_192":303,"_27":304},{"_44":145,"_32":146,"_30":147,"_136":-5,"_42":43,"_41":148,"_138":60,"_39":294,"_13":64,"_34":150,"_36":-5,"_24":25,"_143":-5,"_192":295,"_27":296},{"_44":289,"_32":228,"_30":222,"_136":147,"_42":43,"_41":290,"_138":60,"_39":291,"_13":64,"_34":150,"_36":-5,"_24":25,"_143":-5,"_192":292,"_27":293},{"_44":281,"_32":282,"_30":283,"_136":222,"_42":43,"_41":284,"_138":60,"_39":285,"_13":160,"_34":35,"_36":286,"_24":25,"_143":-5,"_192":287,"_27":288},{"_44":273,"_32":274,"_30":275,"_136":222,"_42":43,"_41":276,"_138":60,"_39":277,"_13":64,"_34":35,"_36":278,"_24":25,"_143":-5,"_192":279,"_27":280},{"_44":269,"_32":33,"_30":31,"_136":222,"_42":43,"_41":14,"_138":25,"_39":270,"_13":160,"_34":35,"_36":38,"_24":25,"_143":-5,"_192":271,"_27":272},{"_44":261,"_32":262,"_30":263,"_136":222,"_42":43,"_41":264,"_138":60,"_39":265,"_13":64,"_34":35,"_36":266,"_24":25,"_143":-5,"_192":267,"_27":268},{"_44":253,"_32":254,"_30":255,"_136":222,"_42":43,"_41":256,"_138":60,"_39":257,"_13":64,"_34":35,"_36":258,"_24":25,"_143":-5,"_192":259,"_27":260},{"_44":245,"_32":246,"_30":247,"_136":222,"_42":43,"_41":248,"_138":60,"_39":249,"_13":64,"_34":35,"_36":250,"_24":25,"_143":-5,"_192":251,"_27":252},{"_44":237,"_32":238,"_30":239,"_136":222,"_42":43,"_41":240,"_138":25,"_39":241,"_13":64,"_34":35,"_36":242,"_24":25,"_143":-5,"_192":243,"_27":244},{"_44":229,"_32":230,"_30":231,"_136":222,"_42":43,"_41":232,"_138":60,"_39":233,"_13":64,"_34":35,"_36":234,"_24":25,"_143":-5,"_192":235,"_27":236},{"_44":219,"_32":220,"_30":221,"_136":222,"_42":43,"_41":223,"_138":60,"_39":224,"_13":64,"_34":35,"_36":225,"_24":25,"_143":-5,"_192":226,"_27":227},{"_44":211,"_32":212,"_30":213,"_136":147,"_42":43,"_41":214,"_138":60,"_39":215,"_13":64,"_34":35,"_36":216,"_24":25,"_143":-5,"_192":217,"_27":218},{"_44":203,"_32":204,"_30":205,"_136":147,"_42":43,"_41":206,"_138":60,"_39":207,"_13":64,"_34":20,"_36":208,"_24":25,"_143":-5,"_192":209,"_27":210},{"_44":195,"_32":196,"_30":197,"_136":147,"_42":43,"_41":198,"_138":60,"_39":199,"_13":64,"_34":35,"_36":200,"_24":25,"_143":-5,"_192":201,"_27":202},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":60,"_39":191,"_13":140,"_34":141,"_36":142,"_24":25,"_143":-5,"_192":193,"_27":194},["D",1779638973311],"children",[],[135],"2a2c820e-5788-11f1-82cb-ee650bb23af1","index.tsx","2a2c82cc-5788-11f1-82cb-ee650bb23af1",14,["D",1779637775868],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\ncreateRoot(root).render(<App />);\n",[],[146,196],"29114f9e-5788-11f1-ac87-ee650bb23af1","index.html","2911508e-5788-11f1-ac87-ee650bb23af1",13,["D",1779637774103],"<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>604.25ES — Group Portal</title>\n    <script src=\"https://cdn.twind.style\" crossorigin></script>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <link href=\"https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css\" rel=\"stylesheet\">\n    <style>\n      * { margin: 0; padding: 0; box-sizing: border-box; }\n      body { font-family: 'Inter', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }\n      #root { min-height: 100vh; }\n      ::-webkit-scrollbar { width: 6px; }\n      ::-webkit-scrollbar-track { background: transparent; }\n      ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }\n      ::-webkit-scrollbar-thumb:hover { background: #475569; }\n      @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n      @keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }\n      @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\n      .animate-fade { animation: fadeIn 0.3s ease-out; }\n      .animate-slide { animation: slideIn 0.3s ease-out; }\n      .glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(71, 85, 105, 0.3); }\n      .glow { box-shadow: 0 0 20px rgba(99, 102, 241, 0.15); }\n      input, textarea, select { font-family: 'Inter', sans-serif; }\n    </style>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script src=\"https://esm.town/v/std/catch\"></script>\n    <script src=\"/frontend/index.tsx\" type=\"module\"></script>\n  </body>\n</html>\n",[],[146,204],"3072e892-5788-11f1-8710-ee650bb23af1","api.ts","3072e964-5788-11f1-8710-ee650bb23af1",15,["D",1779637786511],"const BASE = \"\";\n\nasync function request(path: string, opts?: RequestInit) {\n  const res = await fetch(BASE + path, {\n    ...opts,\n    headers: { \"Content-Type\": \"application/json\", ...opts?.headers },\n  });\n  return res.json();\n}\n\nexport const api = {\n  // Auth\n  login: (username: string, password: string) =>\n    request(\"/api/auth/login\", { method: \"POST\", body: JSON.stringify({ username, password }) }),\n  register: (username: string, display_name: string, password: string) =>\n    request(\"/api/auth/register\", { method: \"POST\", body: JSON.stringify({ username, display_name, password }) }),\n  getUsers: () => request(\"/api/auth/users\"),\n\n  // Chat\n  getMessages: () => request(\"/api/chat/messages\"),\n  sendMessage: (user_id: number, username: string, message: string) =>\n    request(\"/api/chat/messages\", { method: \"POST\", body: JSON.stringify({ user_id, username, message }) }),\n  deleteMessage: (id: number) => request(`/api/chat/messages/${id}`, { method: \"DELETE\" }),\n\n  // Tabs\n  getTabs: () => request(\"/api/tabs\"),\n  createTab: (name: string, icon: string) =>\n    request(\"/api/tabs\", { method: \"POST\", body: JSON.stringify({ name, icon }) }),\n  updateTab: (id: number, data: any) =>\n    request(`/api/tabs/${id}`, { method: \"PUT\", body: JSON.stringify(data) }),\n  deleteTab: (id: number) => request(`/api/tabs/${id}`, { method: \"DELETE\" }),\n  reorderTabs: (orders: { id: number; sort_order: number }[]) =>\n    request(\"/api/tabs/reorder/batch\", { method: \"PUT\", body: JSON.stringify({ orders }) }),\n\n  // Blocks\n  getBlocks: (tabId: number) => request(`/api/tabs/${tabId}/blocks`),\n  createBlock: (tabId: number, block_type: string, title: string, content: any) =>\n    request(`/api/tabs/${tabId}/blocks`, { method: \"POST\", body: JSON.stringify({ block_type, title, content }) }),\n  updateBlock: (id: number, data: any) =>\n    request(`/api/tabs/blocks/${id}`, { method: \"PUT\", body: JSON.stringify(data) }),\n  deleteBlock: (id: number) => request(`/api/tabs/blocks/${id}`, { method: \"DELETE\" }),\n\n  // Polls\n  getPolls: () => request(\"/api/polls\"),\n  createPoll: (question: string, options: string[]) =>\n    request(\"/api/polls\", { method: \"POST\", body: JSON.stringify({ question, options }) }),\n  vote: (pollId: number, user_id: number, option_index: number) =>\n    request(`/api/polls/${pollId}/vote`, { method: \"POST\", body: JSON.stringify({ user_id, option_index }) }),\n  getUserVote: (pollId: number, userId: number) => request(`/api/polls/${pollId}/vote/${userId}`),\n  deletePoll: (pollId: number) => request(`/api/polls/${pollId}`, { method: \"DELETE\" }),\n};\n",[],[146,212],"5b4376b8-5788-11f1-a41c-ee650bb23af1","StudentPortal.tsx","5b43776c-5788-11f1-a41c-ee650bb23af1","04863590-5788-11f1-ac23-ee650bb23af1",18,["D",1779637858336],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\nimport { ChatPanel } from \"./ChatPanel.tsx\";\nimport { BlockRenderer } from \"./BlockRenderer.tsx\";\nimport { PollViewer } from \"./PollViewer.tsx\";\n\nconst sidebarItemStyle = (active: boolean): any => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 10,\n  padding: \"10px 14px\",\n  borderRadius: 10,\n  cursor: \"pointer\",\n  fontSize: 14,\n  fontWeight: active ? 600 : 500,\n  color: active ? \"#fff\" : \"#94a3b8\",\n  background: active ? \"linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15))\" : \"transparent\",\n  border: active ? \"1px solid rgba(99,102,241,0.3)\" : \"1px solid transparent\",\n  transition: \"all 0.2s\",\n  fontFamily: \"Inter, sans-serif\",\n  whiteSpace: \"nowrap\" as const,\n});\n\nexport function StudentPortal({ user }: { user: any }) {\n  const [tabs, setTabs] = useState<any[]>([]);\n  const [activeTab, setActiveTab] = useState<string>(\"chat\");\n  const [blocks, setBlocks] = useState<any[]>([]);\n  const [loadingBlocks, setLoadingBlocks] = useState(false);\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n\n  const loadTabs = useCallback(async () => {\n    const res = await api.getTabs();\n    if (res.tabs) setTabs(res.tabs);\n  }, []);\n\n  useEffect(() => { loadTabs(); }, [loadTabs]);\n\n  const loadBlocks = useCallback(async (tabId: number) => {\n    setLoadingBlocks(true);\n    const res = await api.getBlocks(tabId);\n    if (res.blocks) setBlocks(res.blocks);\n    setLoadingBlocks(false);\n  }, []);\n\n  useEffect(() => {\n    if (activeTab !== \"chat\") {\n      const tab = tabs.find(t => String(t.id) === activeTab);\n      if (tab) loadBlocks(tab.id);\n    }\n  }, [activeTab, tabs, loadBlocks]);\n\n  const activeTabData = tabs.find(t => String(t.id) === activeTab);\n\n  return (\n    <div style={{ display: \"flex\", height: \"calc(100vh - 57px)\" }}>\n      {/* Mobile overlay */}\n      {sidebarOpen && (\n        <div\n          onClick={() => setSidebarOpen(false)}\n          style={{\n            position: \"fixed\", inset: 0, background: \"rgba(0,0,0,0.5)\", zIndex: 30,\n            display: \"none\",\n          }}\n          className=\"mobile-overlay\"\n        />\n      )}\n\n      {/* Sidebar */}\n      <aside style={{\n        width: 240,\n        minWidth: 240,\n        background: \"rgba(15,23,42,0.95)\",\n        borderRight: \"1px solid rgba(71,85,105,0.2)\",\n        padding: \"16px 12px\",\n        overflowY: \"auto\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 4,\n      }}>\n        <div style={{ padding: \"4px 14px 12px\", fontSize: 11, fontWeight: 700, color: \"#475569\", textTransform: \"uppercase\", letterSpacing: 1 }}>\n          Navigation\n        </div>\n\n        {/* Chat tab */}\n        <div\n          onClick={() => { setActiveTab(\"chat\"); setSidebarOpen(false); }}\n          style={sidebarItemStyle(activeTab === \"chat\")}\n        >\n          <span style={{ fontSize: 18 }}>💬</span>\n          <span>Group Chat</span>\n        </div>\n\n        <div style={{ height: 1, background: \"rgba(71,85,105,0.2)\", margin: \"8px 14px\" }} />\n\n        <div style={{ padding: \"4px 14px 8px\", fontSize: 11, fontWeight: 700, color: \"#475569\", textTransform: \"uppercase\", letterSpacing: 1 }}>\n          Sections\n        </div>\n\n        {tabs.map(tab => (\n          <div\n            key={tab.id}\n            onClick={() => { setActiveTab(String(tab.id)); setSidebarOpen(false); }}\n            style={sidebarItemStyle(activeTab === String(tab.id))}\n          >\n            <span style={{ fontSize: 18 }}>{tab.icon}</span>\n            <span style={{ overflow: \"hidden\", textOverflow: \"ellipsis\" }}>{tab.name}</span>\n          </div>\n        ))}\n\n        <div style={{ flex: 1 }} />\n        <div style={{ padding: \"12px 14px\", borderTop: \"1px solid rgba(71,85,105,0.2)\", marginTop: 8 }}>\n          <a href=\"/source\" style={{ color: \"#475569\", fontSize: 11, textDecoration: \"none\", fontWeight: 500 }}>\n            🔗 View Source\n          </a>\n        </div>\n      </aside>\n\n      {/* Main Content */}\n      <div style={{ flex: 1, overflow: \"auto\", background: \"#0f172a\" }}>\n        {/* Mobile menu button */}\n        <button\n          onClick={() => setSidebarOpen(!sidebarOpen)}\n          style={{\n            display: \"none\",\n            position: \"fixed\",\n            bottom: 20,\n            right: 20,\n            zIndex: 40,\n            width: 48,\n            height: 48,\n            borderRadius: \"50%\",\n            background: \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n            border: \"none\",\n            color: \"#fff\",\n            fontSize: 22,\n            cursor: \"pointer\",\n            boxShadow: \"0 4px 16px rgba(99,102,241,0.4)\",\n          }}\n        >☰</button>\n\n        {activeTab === \"chat\" ? (\n          <ChatPanel user={user} />\n        ) : activeTabData ? (\n          <div className=\"animate-fade\" style={{ padding: 24, maxWidth: 900, margin: \"0 auto\" }}>\n            <div style={{ marginBottom: 24 }}>\n              <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginBottom: 4 }}>\n                <span style={{ fontSize: 32 }}>{activeTabData.icon}</span>\n                <h2 style={{ fontSize: 24, fontWeight: 700, color: \"#f1f5f9\" }}>{activeTabData.name}</h2>\n              </div>\n            </div>\n\n            {/* Special poll tab */}\n            {activeTabData.name === \"Polls\" && <PollViewer user={user} />}\n\n            {loadingBlocks ? (\n              <div style={{ textAlign: \"center\", padding: 40, color: \"#64748b\" }}>Loading content...</div>\n            ) : blocks.length === 0 && activeTabData.name !== \"Polls\" ? (\n              <div style={{\n                textAlign: \"center\",\n                padding: 60,\n                color: \"#475569\",\n                background: \"rgba(30,41,59,0.4)\",\n                borderRadius: 16,\n                border: \"1px solid rgba(71,85,105,0.2)\",\n              }}>\n                <div style={{ fontSize: 48, marginBottom: 12 }}>📭</div>\n                <p style={{ fontSize: 16, fontWeight: 600 }}>No content yet</p>\n                <p style={{ fontSize: 13, marginTop: 4 }}>The starosta hasn't added content to this section yet.</p>\n              </div>\n            ) : (\n              <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n                {blocks.map(block => (\n                  <BlockRenderer key={block.id} block={block} user={user} />\n                ))}\n              </div>\n            )}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n",[],[146,228,220],"components","8a9a7bc8-5788-11f1-bf8a-ee650bb23af1","PollViewer.tsx","8a9a7cae-5788-11f1-bf8a-ee650bb23af1",21,["D",1779637937757],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nexport function PollViewer({ user }: { user: any }) {\n  const [polls, setPolls] = useState<any[]>([]);\n  const [userVotes, setUserVotes] = useState<Record<number, number | null>>({});\n  const [voting, setVoting] = useState<number | null>(null);\n\n  const loadPolls = useCallback(async () => {\n    const res = await api.getPolls();\n    if (res.polls) {\n      setPolls(res.polls);\n      // Load user votes\n      const votes: Record<number, number | null> = {};\n      for (const poll of res.polls) {\n        const voteRes = await api.getUserVote(poll.id, user.id);\n        votes[poll.id] = voteRes.vote?.option_index ?? null;\n      }\n      setUserVotes(votes);\n    }\n  }, [user.id]);\n\n  useEffect(() => { loadPolls(); }, [loadPolls]);\n\n  const handleVote = async (pollId: number, optionIndex: number) => {\n    setVoting(pollId);\n    const res = await api.vote(pollId, user.id, optionIndex);\n    if (!res.error) {\n      setUserVotes(prev => ({ ...prev, [pollId]: optionIndex }));\n      await loadPolls();\n    }\n    setVoting(null);\n  };\n\n  if (polls.length === 0) {\n    return (\n      <div style={{\n        textAlign: \"center\",\n        padding: 60,\n        color: \"#475569\",\n        background: \"rgba(30,41,59,0.4)\",\n        borderRadius: 16,\n        border: \"1px solid rgba(71,85,105,0.2)\",\n      }}>\n        <div style={{ fontSize: 48, marginBottom: 12 }}>📊</div>\n        <p style={{ fontSize: 16, fontWeight: 600 }}>No polls yet</p>\n        <p style={{ fontSize: 13, marginTop: 4 }}>Check back later for new polls.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 20 }}>\n      {polls.map(poll => {\n        const hasVoted = userVotes[poll.id] !== null && userVotes[poll.id] !== undefined;\n        const totalVotes = poll.total_votes || 0;\n\n        return (\n          <div key={poll.id} className=\"animate-fade\" style={{\n            background: \"rgba(30,41,59,0.6)\",\n            border: \"1px solid rgba(71,85,105,0.25)\",\n            borderRadius: 16,\n            padding: 24,\n            borderLeft: \"3px solid #6366f1\",\n          }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, marginBottom: 16 }}>\n              <span style={{ fontSize: 22 }}>📊</span>\n              <h3 style={{ fontSize: 17, fontWeight: 700, color: \"#f1f5f9\" }}>{poll.question}</h3>\n            </div>\n\n            <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n              {poll.options.map((option: string, i: number) => {\n                const voteCount = poll.votes.find((v: any) => v.option_index === i)?.count || 0;\n                const pct = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;\n                const isMyVote = userVotes[poll.id] === i;\n\n                return (\n                  <button\n                    key={i}\n                    onClick={() => !hasVoted && handleVote(poll.id, i)}\n                    disabled={hasVoted || voting === poll.id}\n                    style={{\n                      position: \"relative\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"space-between\",\n                      padding: \"12px 16px\",\n                      background: isMyVote ? \"rgba(99,102,241,0.15)\" : \"rgba(15,23,42,0.5)\",\n                      border: isMyVote ? \"1px solid rgba(99,102,241,0.4)\" : \"1px solid rgba(71,85,105,0.2)\",\n                      borderRadius: 10,\n                      cursor: hasVoted ? \"default\" : \"pointer\",\n                      color: \"#e2e8f0\",\n                      fontSize: 14,\n                      fontWeight: 500,\n                      fontFamily: \"Inter, sans-serif\",\n                      overflow: \"hidden\",\n                      textAlign: \"left\",\n                      transition: \"all 0.2s\",\n                    }}\n                  >\n                    {/* Progress bar */}\n                    {hasVoted && (\n                      <div style={{\n                        position: \"absolute\",\n                        left: 0,\n                        top: 0,\n                        bottom: 0,\n                        width: `${pct}%`,\n                        background: isMyVote ? \"rgba(99,102,241,0.1)\" : \"rgba(71,85,105,0.1)\",\n                        transition: \"width 0.5s ease\",\n                        borderRadius: 10,\n                      }} />\n                    )}\n                    <span style={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                      {isMyVote && <span>✓</span>}\n                      {option}\n                    </span>\n                    {hasVoted && (\n                      <span style={{ position: \"relative\", zIndex: 1, fontSize: 13, fontWeight: 700, color: \"#94a3b8\" }}>\n                        {pct}% ({voteCount})\n                      </span>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n\n            <div style={{ marginTop: 12, fontSize: 12, color: \"#64748b\", display: \"flex\", alignItems: \"center\", gap: 8 }}>\n              <span>🗳️ {totalVotes} vote{totalVotes !== 1 ? \"s\" : \"\"}</span>\n              {hasVoted && <span style={{ color: \"#10b981\" }}>✓ You voted</span>}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",[],[146,228,230],"e619afa0-5788-11f1-a659-ee650bb23af1","PollManager.tsx","e619b04a-5788-11f1-a659-ee650bb23af1",24,["D",1779638091273],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nconst cardStyle: any = {\n  background: \"rgba(30,41,59,0.6)\",\n  border: \"1px solid rgba(71,85,105,0.25)\",\n  borderRadius: 16,\n  padding: 20,\n};\n\nconst inputStyle: any = {\n  padding: \"8px 12px\",\n  background: \"rgba(15,23,42,0.8)\",\n  border: \"1px solid rgba(71,85,105,0.3)\",\n  borderRadius: 8,\n  color: \"#e2e8f0\",\n  fontSize: 14,\n  outline: \"none\",\n  fontFamily: \"Inter, sans-serif\",\n  width: \"100%\",\n};\n\nconst btnPrimary: any = {\n  padding: \"8px 16px\",\n  borderRadius: 8,\n  border: \"none\",\n  cursor: \"pointer\",\n  fontSize: 13,\n  fontWeight: 600,\n  fontFamily: \"Inter, sans-serif\",\n  background: \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n  color: \"#fff\",\n};\n\nexport function PollManager({ user }: { user: any }) {\n  const [polls, setPolls] = useState<any[]>([]);\n  const [question, setQuestion] = useState(\"\");\n  const [options, setOptions] = useState([\"\", \"\"]);\n  const [creating, setCreating] = useState(false);\n\n  const loadPolls = useCallback(async () => {\n    const res = await api.getPolls();\n    if (res.polls) setPolls(res.polls);\n  }, []);\n\n  useEffect(() => { loadPolls(); }, [loadPolls]);\n\n  const createPoll = async () => {\n    const validOptions = options.filter(o => o.trim());\n    if (!question.trim() || validOptions.length < 2) return;\n    setCreating(true);\n    await api.createPoll(question.trim(), validOptions);\n    setQuestion(\"\");\n    setOptions([\"\", \"\"]);\n    await loadPolls();\n    setCreating(false);\n  };\n\n  const deletePoll = async (id: number) => {\n    if (!confirm(\"Delete this poll?\")) return;\n    await api.deletePoll(id);\n    loadPolls();\n  };\n\n  return (\n    <div className=\"animate-fade\">\n      <h2 style={{ fontSize: 22, fontWeight: 700, color: \"#f1f5f9\", marginBottom: 20 }}>📊 Poll Manager</h2>\n\n      {/* Create Poll */}\n      <div style={{ ...cardStyle, marginBottom: 20 }}>\n        <h3 style={{ fontSize: 15, fontWeight: 700, color: \"#f1f5f9\", marginBottom: 12 }}>➕ Create New Poll</h3>\n\n        <div style={{ marginBottom: 12 }}>\n          <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 4 }}>Question</label>\n          <input\n            value={question}\n            onChange={e => setQuestion(e.target.value)}\n            placeholder=\"What do you want to ask?\"\n            style={inputStyle}\n          />\n        </div>\n\n        <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 8 }}>Options</label>\n        {options.map((opt, i) => (\n          <div key={i} style={{ display: \"flex\", gap: 6, marginBottom: 6 }}>\n            <input\n              value={opt}\n              onChange={e => {\n                const copy = [...options];\n                copy[i] = e.target.value;\n                setOptions(copy);\n              }}\n              placeholder={`Option ${i + 1}`}\n              style={{ ...inputStyle, flex: 1 }}\n            />\n            {options.length > 2 && (\n              <button\n                onClick={() => setOptions(options.filter((_, idx) => idx !== i))}\n                style={{\n                  padding: \"4px 8px\",\n                  borderRadius: 6,\n                  border: \"1px solid rgba(239,68,68,0.3)\",\n                  background: \"rgba(239,68,68,0.1)\",\n                  color: \"#f87171\",\n                  cursor: \"pointer\",\n                  fontSize: 11,\n                  fontFamily: \"Inter\",\n                }}\n              >✕</button>\n            )}\n          </div>\n        ))}\n\n        <div style={{ display: \"flex\", gap: 8, marginTop: 12 }}>\n          <button\n            onClick={() => setOptions([...options, \"\"])}\n            style={{ ...btnPrimary, background: \"#334155\", padding: \"6px 12px\", fontSize: 12 }}\n          >+ Add Option</button>\n          <button\n            onClick={createPoll}\n            disabled={creating || !question.trim() || options.filter(o => o.trim()).length < 2}\n            style={{\n              ...btnPrimary,\n              opacity: creating || !question.trim() || options.filter(o => o.trim()).length < 2 ? 0.5 : 1,\n            }}\n          >\n            {creating ? \"Creating...\" : \"🗳️ Create Poll\"}\n          </button>\n        </div>\n      </div>\n\n      {/* Existing Polls */}\n      <h3 style={{ fontSize: 15, fontWeight: 700, color: \"#f1f5f9\", marginBottom: 12 }}>Existing Polls</h3>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n        {polls.map(poll => (\n          <div key={poll.id} style={{\n            ...cardStyle,\n            borderLeft: \"3px solid #6366f1\",\n            padding: 16,\n          }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", marginBottom: 12 }}>\n              <h4 style={{ fontSize: 15, fontWeight: 700, color: \"#f1f5f9\" }}>📊 {poll.question}</h4>\n              <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n                <span style={{ fontSize: 12, color: \"#64748b\" }}>🗳️ {poll.total_votes} votes</span>\n                <button\n                  onClick={() => deletePoll(poll.id)}\n                  style={{\n                    padding: \"4px 8px\",\n                    borderRadius: 6,\n                    border: \"1px solid rgba(239,68,68,0.3)\",\n                    background: \"rgba(239,68,68,0.1)\",\n                    color: \"#f87171\",\n                    cursor: \"pointer\",\n                    fontSize: 11,\n                    fontWeight: 600,\n                    fontFamily: \"Inter\",\n                  }}\n                >🗑️ Delete</button>\n              </div>\n            </div>\n\n            {poll.options.map((option: string, i: number) => {\n              const voteCount = poll.votes.find((v: any) => v.option_index === i)?.count || 0;\n              const pct = poll.total_votes > 0 ? Math.round((voteCount / poll.total_votes) * 100) : 0;\n\n              return (\n                <div key={i} style={{\n                  position: \"relative\",\n                  padding: \"8px 12px\",\n                  marginBottom: 4,\n                  background: \"rgba(15,23,42,0.5)\",\n                  borderRadius: 8,\n                  border: \"1px solid rgba(71,85,105,0.2)\",\n                  overflow: \"hidden\",\n                }}>\n                  <div style={{\n                    position: \"absolute\",\n                    left: 0,\n                    top: 0,\n                    bottom: 0,\n                    width: `${pct}%`,\n                    background: \"rgba(99,102,241,0.1)\",\n                    borderRadius: 8,\n                  }} />\n                  <div style={{ position: \"relative\", display: \"flex\", justifyContent: \"space-between\", fontSize: 13 }}>\n                    <span style={{ color: \"#e2e8f0\" }}>{option}</span>\n                    <span style={{ color: \"#818cf8\", fontWeight: 700 }}>{pct}% ({voteCount})</span>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n        {polls.length === 0 && (\n          <div style={{ textAlign: \"center\", padding: 40, color: \"#475569\", fontSize: 14 }}>No polls created yet</div>\n        )}\n      </div>\n    </div>\n  );\n}\n",[],[146,228,238],"4b9107d0-5788-11f1-bb04-ee650bb23af1","LoginScreen.tsx","4b9108f2-5788-11f1-bb04-ee650bb23af1",17,["D",1779637832007],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nconst inputStyle: any = {\n  width: \"100%\",\n  padding: \"12px 16px\",\n  background: \"rgba(15,23,42,0.8)\",\n  border: \"1px solid rgba(71,85,105,0.4)\",\n  borderRadius: 10,\n  color: \"#e2e8f0\",\n  fontSize: 14,\n  outline: \"none\",\n  fontFamily: \"Inter, sans-serif\",\n  transition: \"border-color 0.2s\",\n};\n\nconst btnStyle: any = {\n  width: \"100%\",\n  padding: \"12px\",\n  borderRadius: 10,\n  border: \"none\",\n  cursor: \"pointer\",\n  fontSize: 15,\n  fontWeight: 700,\n  fontFamily: \"Inter, sans-serif\",\n  transition: \"all 0.2s\",\n};\n\nexport function LoginScreen({ onLogin }: { onLogin: (user: any) => void }) {\n  const [mode, setMode] = useState<\"login\" | \"register\">(\"login\");\n  const [username, setUsername] = useState(\"\");\n  const [displayName, setDisplayName] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n\n  const handleSubmit = async (e: any) => {\n    e.preventDefault();\n    setError(\"\");\n    setLoading(true);\n    try {\n      let res;\n      if (mode === \"login\") {\n        res = await api.login(username, password);\n      } else {\n        res = await api.register(username, displayName, password);\n      }\n      if (res.error) {\n        setError(res.error);\n      } else {\n        onLogin(res.user);\n      }\n    } catch (e: any) {\n      setError(\"Connection error\");\n    }\n    setLoading(false);\n  };\n\n  return (\n    <div style={{\n      minHeight: \"100vh\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      background: \"linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%)\",\n      padding: 20,\n    }}>\n      <div className=\"animate-fade\" style={{\n        width: \"100%\",\n        maxWidth: 420,\n        background: \"rgba(30,41,59,0.6)\",\n        backdropFilter: \"blur(20px)\",\n        borderRadius: 20,\n        border: \"1px solid rgba(71,85,105,0.3)\",\n        padding: 40,\n        boxShadow: \"0 25px 50px rgba(0,0,0,0.4), 0 0 60px rgba(99,102,241,0.1)\",\n      }}>\n        {/* Logo */}\n        <div style={{ textAlign: \"center\", marginBottom: 32 }}>\n          <div style={{\n            width: 72,\n            height: 72,\n            borderRadius: 18,\n            background: \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            margin: \"0 auto 16px\",\n            fontSize: 36,\n            boxShadow: \"0 8px 24px rgba(99,102,241,0.3)\",\n          }}>🎓</div>\n          <h1 style={{ fontSize: 28, fontWeight: 800, color: \"#f1f5f9\", marginBottom: 4 }}>604.25ES</h1>\n          <p style={{ color: \"#64748b\", fontSize: 14, fontWeight: 500 }}>University Group Portal</p>\n        </div>\n\n        {/* Mode Toggle */}\n        <div style={{\n          display: \"flex\",\n          background: \"rgba(15,23,42,0.6)\",\n          borderRadius: 10,\n          padding: 3,\n          marginBottom: 24,\n          border: \"1px solid rgba(71,85,105,0.2)\",\n        }}>\n          <button\n            onClick={() => { setMode(\"login\"); setError(\"\"); }}\n            style={{\n              ...btnStyle,\n              padding: \"10px\",\n              fontSize: 13,\n              background: mode === \"login\" ? \"linear-gradient(135deg, #6366f1, #8b5cf6)\" : \"transparent\",\n              color: mode === \"login\" ? \"#fff\" : \"#94a3b8\",\n            }}\n          >Sign In</button>\n          <button\n            onClick={() => { setMode(\"register\"); setError(\"\"); }}\n            style={{\n              ...btnStyle,\n              padding: \"10px\",\n              fontSize: 13,\n              background: mode === \"register\" ? \"linear-gradient(135deg, #6366f1, #8b5cf6)\" : \"transparent\",\n              color: mode === \"register\" ? \"#fff\" : \"#94a3b8\",\n            }}\n          >Register</button>\n        </div>\n\n        {error && (\n          <div style={{\n            padding: \"10px 14px\",\n            background: \"rgba(239,68,68,0.1)\",\n            border: \"1px solid rgba(239,68,68,0.3)\",\n            borderRadius: 8,\n            color: \"#f87171\",\n            fontSize: 13,\n            marginBottom: 16,\n            fontWeight: 500,\n          }}>⚠️ {error}</div>\n        )}\n\n        <form onSubmit={handleSubmit}>\n          <div style={{ marginBottom: 16 }}>\n            <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 6, textTransform: \"uppercase\", letterSpacing: 0.5 }}>\n              Username\n            </label>\n            <input\n              value={username}\n              onChange={(e) => setUsername(e.target.value)}\n              placeholder=\"Enter username\"\n              required\n              style={inputStyle}\n            />\n          </div>\n\n          {mode === \"register\" && (\n            <div style={{ marginBottom: 16 }} className=\"animate-fade\">\n              <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 6, textTransform: \"uppercase\", letterSpacing: 0.5 }}>\n                Display Name\n              </label>\n              <input\n                value={displayName}\n                onChange={(e) => setDisplayName(e.target.value)}\n                placeholder=\"Your full name\"\n                required\n                style={inputStyle}\n              />\n            </div>\n          )}\n\n          <div style={{ marginBottom: 24 }}>\n            <label style={{ display: \"block\", fontSize: 12, fontWeight: 600, color: \"#94a3b8\", marginBottom: 6, textTransform: \"uppercase\", letterSpacing: 0.5 }}>\n              Password\n            </label>\n            <input\n              type=\"password\"\n              value={password}\n              onChange={(e) => setPassword(e.target.value)}\n              placeholder=\"Enter password\"\n              required\n              style={inputStyle}\n            />\n          </div>\n\n          <button\n            type=\"submit\"\n            disabled={loading}\n            style={{\n              ...btnStyle,\n              background: loading ? \"#475569\" : \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n              color: \"#fff\",\n              boxShadow: loading ? \"none\" : \"0 4px 14px rgba(99,102,241,0.4)\",\n            }}\n          >\n            {loading ? \"Please wait...\" : mode === \"login\" ? \"Sign In →\" : \"Create Account →\"}\n          </button>\n        </form>\n\n        <div style={{ marginTop: 20, textAlign: \"center\" }}>\n          <a href=\"/source\" style={{ color: \"#64748b\", fontSize: 12, textDecoration: \"none\" }}>view source</a>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[146,228,246],"6aa795b2-5788-11f1-aac1-ee650bb23af1","ChatPanel.tsx","6aa7965c-5788-11f1-aac1-ee650bb23af1",19,["D",1779637884164],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\n\nexport function ChatPanel({ user }: { user: any }) {\n  const [messages, setMessages] = useState<any[]>([]);\n  const [input, setInput] = useState(\"\");\n  const [sending, setSending] = useState(false);\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const intervalRef = useRef<number | null>(null);\n\n  const loadMessages = useCallback(async () => {\n    const res = await api.getMessages();\n    if (res.messages) setMessages(res.messages);\n  }, []);\n\n  useEffect(() => {\n    loadMessages();\n    intervalRef.current = window.setInterval(loadMessages, 5000);\n    return () => { if (intervalRef.current) clearInterval(intervalRef.current); };\n  }, [loadMessages]);\n\n  useEffect(() => {\n    bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, [messages]);\n\n  const sendMessage = async (e: any) => {\n    e.preventDefault();\n    if (!input.trim() || sending) return;\n    setSending(true);\n    await api.sendMessage(user.id, user.display_name || user.username, input.trim());\n    setInput(\"\");\n    await loadMessages();\n    setSending(false);\n  };\n\n  const formatTime = (dateStr: string) => {\n    const d = new Date(dateStr + \"Z\");\n    return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n  };\n\n  const formatDate = (dateStr: string) => {\n    const d = new Date(dateStr + \"Z\");\n    const today = new Date();\n    if (d.toDateString() === today.toDateString()) return \"Today\";\n    const yesterday = new Date(today);\n    yesterday.setDate(yesterday.getDate() - 1);\n    if (d.toDateString() === yesterday.toDateString()) return \"Yesterday\";\n    return d.toLocaleDateString([], { month: \"short\", day: \"numeric\" });\n  };\n\n  // Group messages by date\n  let lastDate = \"\";\n\n  const getColor = (name: string) => {\n    const colors = [\"#6366f1\", \"#8b5cf6\", \"#06b6d4\", \"#10b981\", \"#f59e0b\", \"#ef4444\", \"#ec4899\", \"#14b8a6\"];\n    let hash = 0;\n    for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);\n    return colors[Math.abs(hash) % colors.length];\n  };\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", height: \"100%\" }}>\n      {/* Header */}\n      <div style={{\n        padding: \"16px 24px\",\n        borderBottom: \"1px solid rgba(71,85,105,0.2)\",\n        background: \"rgba(15,23,42,0.6)\",\n      }}>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n          <span style={{ fontSize: 28 }}>💬</span>\n          <div>\n            <h2 style={{ fontSize: 18, fontWeight: 700, color: \"#f1f5f9\" }}>Group Chat</h2>\n            <span style={{ fontSize: 12, color: \"#64748b\" }}>{messages.length} messages • Auto-refreshes every 5s</span>\n          </div>\n        </div>\n      </div>\n\n      {/* Messages */}\n      <div style={{ flex: 1, overflow: \"auto\", padding: \"16px 24px\" }}>\n        {messages.length === 0 && (\n          <div style={{ textAlign: \"center\", padding: 60, color: \"#475569\" }}>\n            <div style={{ fontSize: 48, marginBottom: 12 }}>💬</div>\n            <p style={{ fontWeight: 600 }}>No messages yet</p>\n            <p style={{ fontSize: 13, marginTop: 4 }}>Be the first to say something!</p>\n          </div>\n        )}\n\n        {messages.map((msg, i) => {\n          const msgDate = formatDate(msg.created_at);\n          const showDate = msgDate !== lastDate;\n          lastDate = msgDate;\n          const isMe = msg.user_id === user.id;\n          const color = getColor(msg.username);\n\n          return (\n            <div key={msg.id}>\n              {showDate && (\n                <div style={{\n                  textAlign: \"center\",\n                  padding: \"12px 0\",\n                }}>\n                  <span style={{\n                    fontSize: 11,\n                    color: \"#64748b\",\n                    background: \"rgba(30,41,59,0.8)\",\n                    padding: \"4px 12px\",\n                    borderRadius: 12,\n                    fontWeight: 600,\n                  }}>{msgDate}</span>\n                </div>\n              )}\n\n              <div style={{\n                display: \"flex\",\n                justifyContent: isMe ? \"flex-end\" : \"flex-start\",\n                marginBottom: 6,\n              }}>\n                <div style={{\n                  maxWidth: \"75%\",\n                  display: \"flex\",\n                  gap: 8,\n                  flexDirection: isMe ? \"row-reverse\" : \"row\",\n                  alignItems: \"flex-end\",\n                }}>\n                  {!isMe && (\n                    <div style={{\n                      width: 32,\n                      height: 32,\n                      borderRadius: \"50%\",\n                      background: color,\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"center\",\n                      fontSize: 13,\n                      fontWeight: 700,\n                      color: \"#fff\",\n                      flexShrink: 0,\n                    }}>\n                      {msg.username[0].toUpperCase()}\n                    </div>\n                  )}\n\n                  <div style={{\n                    background: isMe\n                      ? \"linear-gradient(135deg, #6366f1, #8b5cf6)\"\n                      : \"rgba(30,41,59,0.8)\",\n                    border: isMe ? \"none\" : \"1px solid rgba(71,85,105,0.3)\",\n                    borderRadius: isMe ? \"16px 16px 4px 16px\" : \"16px 16px 16px 4px\",\n                    padding: \"10px 14px\",\n                  }}>\n                    {!isMe && (\n                      <div style={{ fontSize: 12, fontWeight: 700, color: color, marginBottom: 2 }}>\n                        {msg.username}\n                      </div>\n                    )}\n                    <div style={{ fontSize: 14, color: \"#e2e8f0\", lineHeight: 1.5, wordBreak: \"break-word\" }}>\n                      {msg.message}\n                    </div>\n                    <div style={{\n                      fontSize: 10,\n                      color: isMe ? \"rgba(255,255,255,0.6)\" : \"#64748b\",\n                      marginTop: 4,\n                      textAlign: \"right\",\n                    }}>\n                      {formatTime(msg.created_at)}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n        <div ref={bottomRef} />\n      </div>\n\n      {/* Input */}\n      <form onSubmit={sendMessage} style={{\n        padding: \"12px 24px\",\n        borderTop: \"1px solid rgba(71,85,105,0.2)\",\n        background: \"rgba(15,23,42,0.6)\",\n        display: \"flex\",\n        gap: 10,\n      }}>\n        <input\n          value={input}\n          onChange={e => setInput(e.target.value)}\n          placeholder=\"Type a message...\"\n          style={{\n            flex: 1,\n            padding: \"12px 16px\",\n            background: \"rgba(30,41,59,0.8)\",\n            border: \"1px solid rgba(71,85,105,0.3)\",\n            borderRadius: 12,\n            color: \"#e2e8f0\",\n            fontSize: 14,\n            outline: \"none\",\n            fontFamily: \"Inter, sans-serif\",\n          }}\n        />\n        <button\n          type=\"submit\"\n          disabled={!input.trim() || sending}\n          style={{\n            padding: \"12px 20px\",\n            borderRadius: 12,\n            border: \"none\",\n            cursor: input.trim() && !sending ? \"pointer\" : \"not-allowed\",\n            background: input.trim() && !sending ? \"linear-gradient(135deg, #6366f1, #8b5cf6)\" : \"#334155\",\n            color: \"#fff\",\n            fontSize: 14,\n            fontWeight: 700,\n            fontFamily: \"Inter, sans-serif\",\n            transition: \"all 0.2s\",\n          }}\n        >\n          Send →\n        </button>\n      </form>\n    </div>\n  );\n}\n",[],[146,228,254],"7e4e4dfe-5788-11f1-b4f9-ee650bb23af1","BlockRenderer.tsx","7e4e4ea8-5788-11f1-b4f9-ee650bb23af1",20,["D",1779637917130],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nconst cardStyle: any = {\n  background: \"rgba(30,41,59,0.6)\",\n  border: \"1px solid rgba(71,85,105,0.25)\",\n  borderRadius: 16,\n  padding: 24,\n  backdropFilter: \"blur(8px)\",\n};\n\nexport function BlockRenderer({ block, user }: { block: any; user: any }) {\n  let content: any = {};\n  try { content = typeof block.content === \"string\" ? JSON.parse(block.content) : block.content; } catch {}\n\n  const typeConfig: Record<string, { icon: string; accent: string }> = {\n    text: { icon: \"📝\", accent: \"#6366f1\" },\n    announcement: { icon: \"📢\", accent: \"#f59e0b\" },\n    exam_schedule: { icon: \"📅\", accent: \"#ef4444\" },\n    presentation_list: { icon: \"🎤\", accent: \"#8b5cf6\" },\n    checklist: { icon: \"✅\", accent: \"#10b981\" },\n    links: { icon: \"🔗\", accent: \"#06b6d4\" },\n    table: { icon: \"📊\", accent: \"#ec4899\" },\n    file: { icon: \"📁\", accent: \"#14b8a6\" },\n  };\n\n  const cfg = typeConfig[block.block_type] || { icon: \"📄\", accent: \"#6366f1\" };\n\n  return (\n    <div className=\"animate-fade\" style={{\n      ...cardStyle,\n      borderLeft: `3px solid ${cfg.accent}`,\n    }}>\n      {/* Header */}\n      {block.title && (\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, marginBottom: 16 }}>\n          <span style={{ fontSize: 22 }}>{cfg.icon}</span>\n          <h3 style={{ fontSize: 17, fontWeight: 700, color: \"#f1f5f9\" }}>{block.title}</h3>\n          <span style={{\n            fontSize: 10,\n            padding: \"3px 8px\",\n            borderRadius: 6,\n            background: `${cfg.accent}20`,\n            color: cfg.accent,\n            fontWeight: 700,\n            textTransform: \"uppercase\",\n            letterSpacing: 0.5,\n          }}>{block.block_type.replace(\"_\", \" \")}</span>\n        </div>\n      )}\n\n      {/* Content based on type */}\n      {block.block_type === \"text\" && (\n        <div style={{ color: \"#cbd5e1\", fontSize: 14, lineHeight: 1.7, whiteSpace: \"pre-wrap\" }}>\n          {content.text || \"\"}\n        </div>\n      )}\n\n      {block.block_type === \"announcement\" && (\n        <div style={{\n          background: \"rgba(245,158,11,0.08)\",\n          border: \"1px solid rgba(245,158,11,0.2)\",\n          borderRadius: 12,\n          padding: 16,\n        }}>\n          <div style={{ color: \"#fbbf24\", fontSize: 14, fontWeight: 600, marginBottom: 4 }}>\n            {content.priority === \"urgent\" ? \"🚨 URGENT\" : \"📌 Notice\"}\n          </div>\n          <div style={{ color: \"#e2e8f0\", fontSize: 14, lineHeight: 1.6, whiteSpace: \"pre-wrap\" }}>\n            {content.text || \"\"}\n          </div>\n          {content.date && (\n            <div style={{ color: \"#64748b\", fontSize: 12, marginTop: 8 }}>📅 {content.date}</div>\n          )}\n        </div>\n      )}\n\n      {block.block_type === \"exam_schedule\" && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n          {(content.exams || []).map((exam: any, i: number) => (\n            <div key={i} style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: \"12px 16px\",\n              background: \"rgba(15,23,42,0.5)\",\n              borderRadius: 10,\n              border: \"1px solid rgba(71,85,105,0.2)\",\n            }}>\n              <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n                <div style={{\n                  width: 40,\n                  height: 40,\n                  borderRadius: 10,\n                  background: \"rgba(239,68,68,0.15)\",\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  fontSize: 18,\n                }}>📅</div>\n                <div>\n                  <div style={{ fontSize: 14, fontWeight: 600, color: \"#f1f5f9\" }}>{exam.subject}</div>\n                  <div style={{ fontSize: 12, color: \"#64748b\" }}>{exam.room || \"\"}</div>\n                </div>\n              </div>\n              <div style={{ textAlign: \"right\" }}>\n                <div style={{ fontSize: 13, fontWeight: 600, color: \"#f87171\" }}>{exam.date}</div>\n                <div style={{ fontSize: 12, color: \"#64748b\" }}>{exam.time || \"\"}</div>\n              </div>\n            </div>\n          ))}\n          {(!content.exams || content.exams.length === 0) && (\n            <div style={{ textAlign: \"center\", padding: 20, color: \"#475569\", fontSize: 13 }}>No exams scheduled</div>\n          )}\n        </div>\n      )}\n\n      {block.block_type === \"presentation_list\" && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n          {(content.items || []).map((item: string, i: number) => (\n            <div key={i} style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 12,\n              padding: \"10px 14px\",\n              background: \"rgba(15,23,42,0.4)\",\n              borderRadius: 10,\n              border: \"1px solid rgba(71,85,105,0.15)\",\n            }}>\n              <div style={{\n                width: 28,\n                height: 28,\n                borderRadius: 8,\n                background: \"linear-gradient(135deg, #8b5cf6, #6366f1)\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                fontSize: 12,\n                fontWeight: 800,\n                color: \"#fff\",\n                flexShrink: 0,\n              }}>{i + 1}</div>\n              <span style={{ fontSize: 14, color: \"#e2e8f0\", fontWeight: 500 }}>{item}</span>\n            </div>\n          ))}\n          {(!content.items || content.items.length === 0) && (\n            <div style={{ textAlign: \"center\", padding: 20, color: \"#475569\", fontSize: 13 }}>No items in the list</div>\n          )}\n        </div>\n      )}\n\n      {block.block_type === \"checklist\" && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          {(content.items || []).map((item: any, i: number) => (\n            <div key={i} style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 10,\n              padding: \"8px 12px\",\n              borderRadius: 8,\n              background: \"rgba(15,23,42,0.3)\",\n            }}>\n              <span style={{ fontSize: 16 }}>{item.done ? \"✅\" : \"⬜\"}</span>\n              <span style={{\n                fontSize: 14,\n                color: item.done ? \"#64748b\" : \"#e2e8f0\",\n                textDecoration: item.done ? \"line-through\" : \"none\",\n              }}>{item.text}</span>\n              {item.deadline && (\n                <span style={{ marginLeft: \"auto\", fontSize: 11, color: \"#f87171\", fontWeight: 600 }}>\n                  📅 {item.deadline}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {block.block_type === \"links\" && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          {(content.links || []).map((link: any, i: number) => (\n            <a\n              key={i}\n              href={link.url}\n              target=\"_blank\"\n              rel=\"noopener\"\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 10,\n                padding: \"10px 14px\",\n                background: \"rgba(6,182,212,0.08)\",\n                border: \"1px solid rgba(6,182,212,0.2)\",\n                borderRadius: 10,\n                color: \"#22d3ee\",\n                textDecoration: \"none\",\n                fontSize: 14,\n                fontWeight: 500,\n                transition: \"all 0.2s\",\n              }}\n            >\n              <span>🔗</span>\n              <span>{link.title || link.url}</span>\n              <span style={{ marginLeft: \"auto\", fontSize: 12, color: \"#64748b\" }}>↗</span>\n            </a>\n          ))}\n        </div>\n      )}\n\n      {block.block_type === \"table\" && (\n        <div style={{ overflowX: \"auto\" }}>\n          {content.headers && (\n            <table style={{ width: \"100%\", borderCollapse: \"collapse\" }}>\n              <thead>\n                <tr>\n                  {content.headers.map((h: string, i: number) => (\n                    <th key={i} style={{\n                      padding: \"10px 14px\",\n                      textAlign: \"left\",\n                      borderBottom: \"2px solid rgba(71,85,105,0.3)\",\n                      color: \"#94a3b8\",\n                      fontSize: 12,\n                      fontWeight: 700,\n                      textTransform: \"uppercase\",\n                      letterSpacing: 0.5,\n                    }}>{h}</th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {(content.rows || []).map((row: string[], ri: number) => (\n                  <tr key={ri}>\n                    {row.map((cell: string, ci: number) => (\n                      <td key={ci} style={{\n                        padding: \"10px 14px\",\n                        borderBottom: \"1px solid rgba(71,85,105,0.15)\",\n                        color: \"#e2e8f0\",\n                        fontSize: 14,\n                      }}>{cell}</td>\n                    ))}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          )}\n        </div>\n      )}\n\n      {block.block_type === \"file\" && (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n          {(content.files || []).map((file: any, i: number) => (\n            <a\n              key={i}\n              href={file.url}\n              target=\"_blank\"\n              rel=\"noopener\"\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 10,\n                padding: \"10px 14px\",\n                background: \"rgba(20,184,166,0.08)\",\n                border: \"1px solid rgba(20,184,166,0.2)\",\n                borderRadius: 10,\n                color: \"#2dd4bf\",\n                textDecoration: \"none\",\n                fontSize: 14,\n                fontWeight: 500,\n              }}\n            >\n              <span>📁</span>\n              <span>{file.name || file.url}</span>\n              <span style={{ marginLeft: \"auto\", fontSize: 12 }}>⬇️</span>\n            </a>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[146,228,262],"3a94c8f6-578b-11f1-ba51-ee650bb23af1",["D",1779639091837],[],[146,228,33],"3d3b5fa0-5788-11f1-86b0-ee650bb23af1","App.tsx","3d3b607c-5788-11f1-86b0-ee650bb23af1",16,["D",1779637807959],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { LoginScreen } from \"./LoginScreen.tsx\";\nimport { StudentPortal } from \"./StudentPortal.tsx\";\nimport { AdminPanel } from \"./AdminPanel.tsx\";\n\nexport function App() {\n  const [user, setUser] = useState<any>(null);\n  const [view, setView] = useState<\"student\" | \"admin\">(\"student\");\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    const saved = localStorage.getItem(\"604_user\");\n    if (saved) {\n      try { setUser(JSON.parse(saved)); } catch {}\n    }\n    setLoading(false);\n  }, []);\n\n  const handleLogin = useCallback((userData: any) => {\n    setUser(userData);\n    localStorage.setItem(\"604_user\", JSON.stringify(userData));\n  }, []);\n\n  const handleLogout = useCallback(() => {\n    setUser(null);\n    localStorage.removeItem(\"604_user\");\n    setView(\"student\");\n  }, []);\n\n  if (loading) {\n    return (\n      <div style={{ minHeight: \"100vh\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", background: \"#0f172a\" }}>\n        <div style={{ textAlign: \"center\" }}>\n          <div style={{ fontSize: 48, marginBottom: 16 }}>🎓</div>\n          <div style={{ color: \"#94a3b8\", fontSize: 14 }}>Loading...</div>\n        </div>\n      </div>\n    );\n  }\n\n  if (!user) {\n    return <LoginScreen onLogin={handleLogin} />;\n  }\n\n  return (\n    <div style={{ minHeight: \"100vh\", background: \"#0f172a\" }}>\n      {/* Top Header */}\n      <header style={{\n        background: \"linear-gradient(135deg, #1e293b 0%, #0f172a 100%)\",\n        borderBottom: \"1px solid rgba(71,85,105,0.3)\",\n        padding: \"12px 24px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        position: \"sticky\",\n        top: 0,\n        zIndex: 50,\n        backdropFilter: \"blur(12px)\",\n      }}>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n          <span style={{ fontSize: 28 }}>🎓</span>\n          <div>\n            <h1 style={{ fontSize: 18, fontWeight: 700, color: \"#f1f5f9\", lineHeight: 1.2 }}>604.25ES</h1>\n            <span style={{ fontSize: 11, color: \"#64748b\", fontWeight: 500 }}>Group Portal</span>\n          </div>\n        </div>\n\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n          {user.role === \"starosta\" && (\n            <div style={{\n              display: \"flex\",\n              background: \"#1e293b\",\n              borderRadius: 10,\n              padding: 3,\n              border: \"1px solid rgba(71,85,105,0.3)\",\n            }}>\n              <button\n                onClick={() => setView(\"student\")}\n                style={{\n                  padding: \"6px 16px\",\n                  borderRadius: 8,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                  fontSize: 13,\n                  fontWeight: 600,\n                  fontFamily: \"Inter, sans-serif\",\n                  background: view === \"student\" ? \"linear-gradient(135deg, #6366f1, #8b5cf6)\" : \"transparent\",\n                  color: view === \"student\" ? \"#fff\" : \"#94a3b8\",\n                  transition: \"all 0.2s\",\n                }}\n              >\n                📋 Portal\n              </button>\n              <button\n                onClick={() => setView(\"admin\")}\n                style={{\n                  padding: \"6px 16px\",\n                  borderRadius: 8,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                  fontSize: 13,\n                  fontWeight: 600,\n                  fontFamily: \"Inter, sans-serif\",\n                  background: view === \"admin\" ? \"linear-gradient(135deg, #f59e0b, #d97706)\" : \"transparent\",\n                  color: view === \"admin\" ? \"#fff\" : \"#94a3b8\",\n                  transition: \"all 0.2s\",\n                }}\n              >\n                ⚙️ Admin\n              </button>\n            </div>\n          )}\n\n          <div style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8,\n            padding: \"6px 12px\",\n            background: \"rgba(30,41,59,0.8)\",\n            borderRadius: 10,\n            border: \"1px solid rgba(71,85,105,0.3)\",\n          }}>\n            <div style={{\n              width: 28,\n              height: 28,\n              borderRadius: \"50%\",\n              background: user.role === \"starosta\" ? \"linear-gradient(135deg, #f59e0b, #d97706)\" : \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              fontSize: 13,\n              fontWeight: 700,\n              color: \"#fff\",\n            }}>\n              {(user.display_name || user.username)[0].toUpperCase()}\n            </div>\n            <div>\n              <div style={{ fontSize: 13, fontWeight: 600, color: \"#e2e8f0\", lineHeight: 1.2 }}>\n                {user.display_name || user.username}\n              </div>\n              <div style={{ fontSize: 10, color: user.role === \"starosta\" ? \"#fbbf24\" : \"#818cf8\", fontWeight: 600, textTransform: \"uppercase\", letterSpacing: 0.5 }}>\n                {user.role}\n              </div>\n            </div>\n            <button\n              onClick={handleLogout}\n              style={{\n                background: \"rgba(239,68,68,0.15)\",\n                border: \"1px solid rgba(239,68,68,0.3)\",\n                color: \"#f87171\",\n                padding: \"4px 10px\",\n                borderRadius: 6,\n                cursor: \"pointer\",\n                fontSize: 11,\n                fontWeight: 600,\n                fontFamily: \"Inter, sans-serif\",\n                marginLeft: 4,\n              }}\n            >\n              Logout\n            </button>\n          </div>\n        </div>\n      </header>\n\n      {/* Main Content */}\n      <main>\n        {view === \"admin\" && user.role === \"starosta\" ? (\n          <AdminPanel user={user} />\n        ) : (\n          <StudentPortal user={user} />\n        )}\n      </main>\n    </div>\n  );\n}\n",[],[146,228,274],"236565e6-578b-11f1-9738-ee650bb23af1","AdminPanel.tsx","ad280b06-5788-11f1-b2a8-ee650bb23af1",26,["D",1779639053100],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../api.ts\";\nimport { BlockEditor } from \"./BlockEditor.tsx\";\nimport { PollManager } from \"./PollManager.tsx\";\n\nconst cardStyle: any = {\n  background: \"rgba(30,41,59,0.6)\",\n  border: \"1px solid rgba(71,85,105,0.25)\",\n  borderRadius: 16,\n  padding: 20,\n};\n\nconst btnPrimary: any = {\n  padding: \"8px 16px\",\n  borderRadius: 8,\n  border: \"none\",\n  cursor: \"pointer\",\n  fontSize: 13,\n  fontWeight: 600,\n  fontFamily: \"Inter, sans-serif\",\n  background: \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n  color: \"#fff\",\n  transition: \"all 0.2s\",\n};\n\nconst btnDanger: any = {\n  ...btnPrimary,\n  background: \"rgba(239,68,68,0.15)\",\n  border: \"1px solid rgba(239,68,68,0.3)\",\n  color: \"#f87171\",\n};\n\nconst inputStyle: any = {\n  padding: \"8px 12px\",\n  background: \"rgba(15,23,42,0.8)\",\n  border: \"1px solid rgba(71,85,105,0.3)\",\n  borderRadius: 8,\n  color: \"#e2e8f0\",\n  fontSize: 14,\n  outline: \"none\",\n  fontFamily: \"Inter, sans-serif\",\n};\n\nexport function AdminPanel({ user }: { user: any }) {\n  const [section, setSection] = useState<string>(\"tabs\");\n  const [tabs, setTabs] = useState<any[]>([]);\n  const [selectedTab, setSelectedTab] = useState<any>(null);\n  const [blocks, setBlocks] = useState<any[]>([]);\n  const [users, setUsers] = useState<any[]>([]);\n  const [newTabName, setNewTabName] = useState(\"\");\n  const [newTabIcon, setNewTabIcon] = useState(\"📄\");\n  const [editingTab, setEditingTab] = useState<any>(null);\n  const [stats, setStats] = useState({ users: 0, tabs: 0, messages: 0 });\n\n  const loadTabs = useCallback(async () => {\n    const res = await api.getTabs();\n    if (res.tabs) setTabs(res.tabs);\n  }, []);\n\n  const loadUsers = useCallback(async () => {\n    const res = await api.getUsers();\n    if (res.users) {\n      setUsers(res.users);\n      setStats((s) => ({ ...s, users: res.users.length }));\n    }\n  }, []);\n\n  const loadBlocks = useCallback(async (tabId: number) => {\n    const res = await api.getBlocks(tabId);\n    if (res.blocks) setBlocks(res.blocks);\n  }, []);\n\n  useEffect(() => {\n    loadTabs();\n    loadUsers();\n    api.getMessages().then((r) =>\n      setStats((s) => ({ ...s, messages: r.messages?.length || 0 }))\n    );\n  }, [loadTabs, loadUsers]);\n\n  useEffect(() => {\n    setStats((s) => ({ ...s, tabs: tabs.length }));\n  }, [tabs]);\n\n  useEffect(() => {\n    if (selectedTab) loadBlocks(selectedTab.id);\n  }, [selectedTab, loadBlocks]);\n\n  const createTab = async () => {\n    if (!newTabName.trim()) return;\n    await api.createTab(newTabName.trim(), newTabIcon);\n    setNewTabName(\"\");\n    setNewTabIcon(\"📄\");\n    loadTabs();\n  };\n\n  const deleteTab = async (id: number) => {\n    if (!confirm(\"Delete this tab and all its content?\")) return;\n    await api.deleteTab(id);\n    if (selectedTab?.id === id) {\n      setSelectedTab(null);\n      setBlocks([]);\n    }\n    loadTabs();\n  };\n\n  const updateTab = async () => {\n    if (!editingTab) return;\n    await api.updateTab(editingTab.id, {\n      name: editingTab.name,\n      icon: editingTab.icon,\n    });\n    setEditingTab(null);\n    loadTabs();\n  };\n\n  const navItems = [\n    { id: \"dashboard\", icon: \"📊\", label: \"Dashboard\" },\n    { id: \"tabs\", icon: \"📑\", label: \"Manage Tabs\" },\n    { id: \"content\", icon: \"📝\", label: \"Edit Content\" },\n    { id: \"polls\", icon: \"📊\", label: \"Polls\" },\n    { id: \"users\", icon: \"👥\", label: \"Users\" },\n    { id: \"chat\", icon: \"💬\", label: \"Chat Monitor\" },\n  ];\n\n  return (\n    <div style={{ display: \"flex\", height: \"calc(100vh - 57px)\" }}>\n      {/* Admin Sidebar */}\n      <aside\n        style={{\n          width: 220,\n          minWidth: 220,\n          background: \"rgba(15,23,42,0.95)\",\n          borderRight: \"1px solid rgba(71,85,105,0.2)\",\n          padding: \"16px 10px\",\n          overflowY: \"auto\",\n        }}\n      >\n        <div\n          style={{\n            padding: \"4px 14px 12px\",\n            fontSize: 11,\n            fontWeight: 700,\n            color: \"#f59e0b\",\n            textTransform: \"uppercase\",\n            letterSpacing: 1,\n          }}\n        >\n          ⚙️ Admin Panel\n        </div>\n        {navItems.map((item) => (\n          <div\n            key={item.id}\n            onClick={() => setSection(item.id)}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 10,\n              padding: \"10px 14px\",\n              borderRadius: 10,\n              cursor: \"pointer\",\n              fontSize: 13,\n              fontWeight: section === item.id ? 600 : 500,\n              color: section === item.id ? \"#fbbf24\" : \"#94a3b8\",\n              background: section === item.id\n                ? \"rgba(245,158,11,0.1)\"\n                : \"transparent\",\n              border: section === item.id\n                ? \"1px solid rgba(245,158,11,0.2)\"\n                : \"1px solid transparent\",\n              transition: \"all 0.2s\",\n              fontFamily: \"Inter, sans-serif\",\n              marginBottom: 2,\n            }}\n          >\n            <span style={{ fontSize: 16 }}>{item.icon}</span>\n            <span>{item.label}</span>\n          </div>\n        ))}\n      </aside>\n\n      {/* Main Admin Content */}\n      <div style={{ flex: 1, overflow: \"auto\", padding: 24 }}>\n        {/* Dashboard */}\n        {section === \"dashboard\" && (\n          <div className=\"animate-fade\">\n            <h2\n              style={{\n                fontSize: 22,\n                fontWeight: 700,\n                color: \"#f1f5f9\",\n                marginBottom: 20,\n              }}\n            >\n              📊 Dashboard\n            </h2>\n            <div\n              style={{\n                display: \"grid\",\n                gridTemplateColumns: \"repeat(auto-fill, minmax(200px, 1fr))\",\n                gap: 16,\n                marginBottom: 24,\n              }}\n            >\n              {[\n                {\n                  label: \"Total Users\",\n                  value: stats.users,\n                  icon: \"👥\",\n                  color: \"#6366f1\",\n                },\n                {\n                  label: \"Active Tabs\",\n                  value: stats.tabs,\n                  icon: \"📑\",\n                  color: \"#f59e0b\",\n                },\n                {\n                  label: \"Chat Messages\",\n                  value: stats.messages,\n                  icon: \"💬\",\n                  color: \"#10b981\",\n                },\n              ].map((stat, i) => (\n                <div\n                  key={i}\n                  style={{\n                    ...cardStyle,\n                    borderLeft: `3px solid ${stat.color}`,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 14,\n                  }}\n                >\n                  <div\n                    style={{\n                      width: 44,\n                      height: 44,\n                      borderRadius: 12,\n                      background: `${stat.color}15`,\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"center\",\n                      fontSize: 22,\n                    }}\n                  >\n                    {stat.icon}\n                  </div>\n                  <div>\n                    <div\n                      style={{\n                        fontSize: 24,\n                        fontWeight: 800,\n                        color: \"#f1f5f9\",\n                      }}\n                    >\n                      {stat.value}\n                    </div>\n                    <div\n                      style={{\n                        fontSize: 12,\n                        color: \"#64748b\",\n                        fontWeight: 500,\n                      }}\n                    >\n                      {stat.label}\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n            <div style={{ ...cardStyle, marginBottom: 16 }}>\n              <h3\n                style={{\n                  fontSize: 15,\n                  fontWeight: 700,\n                  color: \"#f1f5f9\",\n                  marginBottom: 12,\n                }}\n              >\n                🎓 Welcome, Starosta!\n              </h3>\n              <p style={{ color: \"#94a3b8\", fontSize: 14, lineHeight: 1.6 }}>\n                This is your control center for managing the 604.25ES group\n                portal. Use the sidebar to navigate to different management\n                sections. You can create tabs, add content blocks, manage polls,\n                and monitor the group chat.\n              </p>\n            </div>\n          </div>\n        )}\n\n        {/* Manage Tabs */}\n        {section === \"tabs\" && (\n          <div className=\"animate-fade\">\n            <h2\n              style={{\n                fontSize: 22,\n                fontWeight: 700,\n                color: \"#f1f5f9\",\n                marginBottom: 20,\n              }}\n            >\n              📑 Manage Tabs\n            </h2>\n\n            {/* Create Tab */}\n            <div style={{ ...cardStyle, marginBottom: 20 }}>\n              <h3\n                style={{\n                  fontSize: 15,\n                  fontWeight: 700,\n                  color: \"#f1f5f9\",\n                  marginBottom: 12,\n                }}\n              >\n                ➕ Create New Tab\n              </h3>\n              <div style={{ display: \"flex\", gap: 10, flexWrap: \"wrap\" }}>\n                <input\n                  value={newTabIcon}\n                  onChange={(e) => setNewTabIcon(e.target.value)}\n                  placeholder=\"Icon\"\n                  style={{\n                    ...inputStyle,\n                    width: 60,\n                    textAlign: \"center\",\n                    fontSize: 20,\n                  }}\n                />\n                <input\n                  value={newTabName}\n                  onChange={(e) => setNewTabName(e.target.value)}\n                  placeholder=\"Tab name...\"\n                  style={{ ...inputStyle, flex: 1, minWidth: 200 }}\n                  onKeyDown={(e) => e.key === \"Enter\" && createTab()}\n                />\n                <button onClick={createTab} style={btnPrimary}>\n                  Create Tab\n                </button>\n              </div>\n            </div>\n\n            {/* Tab List */}\n            <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n              {tabs.map((tab) => (\n                <div\n                  key={tab.id}\n                  style={{\n                    ...cardStyle,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    padding: 14,\n                  }}\n                >\n                  {editingTab?.id === tab.id\n                    ? (\n                      <div style={{ display: \"flex\", gap: 8, flex: 1 }}>\n                        <input\n                          value={editingTab.icon}\n                          onChange={(e) =>\n                            setEditingTab({\n                              ...editingTab,\n                              icon: e.target.value,\n                            })}\n                          style={{\n                            ...inputStyle,\n                            width: 50,\n                            textAlign: \"center\",\n                            fontSize: 18,\n                          }}\n                        />\n                        <input\n                          value={editingTab.name}\n                          onChange={(e) =>\n                            setEditingTab({\n                              ...editingTab,\n                              name: e.target.value,\n                            })}\n                          style={{ ...inputStyle, flex: 1 }}\n                          onKeyDown={(e) => e.key === \"Enter\" && updateTab()}\n                        />\n                        <button onClick={updateTab} style={btnPrimary}>\n                          Save\n                        </button>\n                        <button\n                          onClick={() => setEditingTab(null)}\n                          style={{ ...btnPrimary, background: \"#334155\" }}\n                        >\n                          Cancel\n                        </button>\n                      </div>\n                    )\n                    : (\n                      <>\n                        <div\n                          style={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            gap: 10,\n                          }}\n                        >\n                          <span style={{ fontSize: 20 }}>{tab.icon}</span>\n                          <span\n                            style={{\n                              fontSize: 14,\n                              fontWeight: 600,\n                              color: \"#e2e8f0\",\n                            }}\n                          >\n                            {tab.name}\n                          </span>\n                          {tab.is_system\n                            ? (\n                              <span\n                                style={{\n                                  fontSize: 10,\n                                  padding: \"2px 6px\",\n                                  borderRadius: 4,\n                                  background: \"rgba(99,102,241,0.15)\",\n                                  color: \"#818cf8\",\n                                  fontWeight: 600,\n                                }}\n                              >\n                                SYSTEM\n                              </span>\n                            )\n                            : null}\n                        </div>\n                        <div style={{ display: \"flex\", gap: 6 }}>\n                          <button\n                            onClick={() => setEditingTab({ ...tab })}\n                            style={{\n                              ...btnPrimary,\n                              padding: \"6px 12px\",\n                              fontSize: 12,\n                            }}\n                          >\n                            ✏️ Edit\n                          </button>\n                          {!tab.is_system && (\n                            <button\n                              onClick={() => deleteTab(tab.id)}\n                              style={{\n                                ...btnDanger,\n                                padding: \"6px 12px\",\n                                fontSize: 12,\n                              }}\n                            >\n                              🗑️\n                            </button>\n                          )}\n                        </div>\n                      </>\n                    )}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Edit Content */}\n        {section === \"content\" && (\n          <div className=\"animate-fade\">\n            <h2\n              style={{\n                fontSize: 22,\n                fontWeight: 700,\n                color: \"#f1f5f9\",\n                marginBottom: 20,\n              }}\n            >\n              📝 Edit Tab Content\n            </h2>\n\n            {/* Tab Selector */}\n            <div\n              style={{\n                display: \"flex\",\n                gap: 8,\n                flexWrap: \"wrap\",\n                marginBottom: 20,\n              }}\n            >\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  onClick={() => setSelectedTab(tab)}\n                  style={{\n                    padding: \"8px 14px\",\n                    borderRadius: 10,\n                    border: selectedTab?.id === tab.id\n                      ? \"1px solid rgba(99,102,241,0.4)\"\n                      : \"1px solid rgba(71,85,105,0.3)\",\n                    background: selectedTab?.id === tab.id\n                      ? \"rgba(99,102,241,0.15)\"\n                      : \"rgba(30,41,59,0.6)\",\n                    color: selectedTab?.id === tab.id ? \"#818cf8\" : \"#94a3b8\",\n                    cursor: \"pointer\",\n                    fontSize: 13,\n                    fontWeight: 600,\n                    fontFamily: \"Inter, sans-serif\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 6,\n                  }}\n                >\n                  <span>{tab.icon}</span> {tab.name}\n                </button>\n              ))}\n            </div>\n\n            {selectedTab\n              ? (\n                <BlockEditor\n                  tab={selectedTab}\n                  blocks={blocks}\n                  onRefresh={() => loadBlocks(selectedTab.id)}\n                />\n              )\n              : (\n                <div\n                  style={{\n                    textAlign: \"center\",\n                    padding: 60,\n                    color: \"#475569\",\n                    background: \"rgba(30,41,59,0.4)\",\n                    borderRadius: 16,\n                    border: \"1px solid rgba(71,85,105,0.2)\",\n                  }}\n                >\n                  <div style={{ fontSize: 48, marginBottom: 12 }}>👆</div>\n                  <p style={{ fontWeight: 600 }}>\n                    Select a tab above to edit its content\n                  </p>\n                </div>\n              )}\n          </div>\n        )}\n\n        {/* Polls */}\n        {section === \"polls\" && <PollManager user={user} />}\n\n        {/* Users */}\n        {section === \"users\" && (\n          <div className=\"animate-fade\">\n            <h2\n              style={{\n                fontSize: 22,\n                fontWeight: 700,\n                color: \"#f1f5f9\",\n                marginBottom: 20,\n              }}\n            >\n              👥 Registered Users\n            </h2>\n            <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n              {users.map((u) => (\n                <div\n                  key={u.id}\n                  style={{\n                    ...cardStyle,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    padding: 14,\n                  }}\n                >\n                  <div\n                    style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}\n                  >\n                    <div\n                      style={{\n                        width: 36,\n                        height: 36,\n                        borderRadius: \"50%\",\n                        background: u.role === \"starosta\"\n                          ? \"linear-gradient(135deg, #f59e0b, #d97706)\"\n                          : \"linear-gradient(135deg, #6366f1, #8b5cf6)\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: 14,\n                        fontWeight: 700,\n                        color: \"#fff\",\n                      }}\n                    >\n                      {(u.display_name || u.username)[0].toUpperCase()}\n                    </div>\n                    <div>\n                      <div\n                        style={{\n                          fontSize: 14,\n                          fontWeight: 600,\n                          color: \"#e2e8f0\",\n                        }}\n                      >\n                        {u.display_name}\n                      </div>\n                      <div style={{ fontSize: 12, color: \"#64748b\" }}>\n                        @{u.username}\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}\n                  >\n                    <span\n                      style={{\n                        fontSize: 10,\n                        padding: \"3px 8px\",\n                        borderRadius: 6,\n                        background: u.role === \"starosta\"\n                          ? \"rgba(245,158,11,0.15)\"\n                          : \"rgba(99,102,241,0.15)\",\n                        color: u.role === \"starosta\" ? \"#fbbf24\" : \"#818cf8\",\n                        fontWeight: 700,\n                        textTransform: \"uppercase\",\n                      }}\n                    >\n                      {u.role}\n                    </span>\n                    <span style={{ fontSize: 11, color: \"#475569\" }}>\n                      {new Date(u.created_at + \"Z\").toLocaleDateString()}\n                    </span>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Chat Monitor */}\n        {section === \"chat\" && <ChatMonitor />}\n      </div>\n    </div>\n  );\n}\n\nfunction ChatMonitor() {\n  const [messages, setMessages] = useState<any[]>([]);\n\n  useEffect(() => {\n    api.getMessages().then((r) => {\n      if (r.messages) setMessages(r.messages);\n    });\n  }, []);\n\n  const deleteMsg = async (id: number) => {\n    await api.deleteMessage(id);\n    setMessages((msgs) => msgs.filter((m) => m.id !== id));\n  };\n\n  return (\n    <div className=\"animate-fade\">\n      <h2\n        style={{\n          fontSize: 22,\n          fontWeight: 700,\n          color: \"#f1f5f9\",\n          marginBottom: 20,\n        }}\n      >\n        💬 Chat Monitor\n      </h2>\n      <p style={{ color: \"#64748b\", fontSize: 13, marginBottom: 16 }}>\n        View and moderate chat messages. Click the delete button to remove\n        inappropriate messages.\n      </p>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n        {messages.map((msg) => (\n          <div\n            key={msg.id}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: \"10px 14px\",\n              background: \"rgba(30,41,59,0.5)\",\n              borderRadius: 10,\n              border: \"1px solid rgba(71,85,105,0.15)\",\n            }}\n          >\n            <div style={{ flex: 1 }}>\n              <span\n                style={{\n                  fontSize: 12,\n                  fontWeight: 700,\n                  color: \"#818cf8\",\n                  marginRight: 8,\n                }}\n              >\n                {msg.username}\n              </span>\n              <span style={{ fontSize: 13, color: \"#cbd5e1\" }}>\n                {msg.message}\n              </span>\n            </div>\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 8,\n                flexShrink: 0,\n              }}\n            >\n              <span style={{ fontSize: 11, color: \"#475569\" }}>\n                {new Date(msg.created_at + \"Z\").toLocaleString([], {\n                  month: \"short\",\n                  day: \"numeric\",\n                  hour: \"2-digit\",\n                  minute: \"2-digit\",\n                })}\n              </span>\n              <button\n                onClick={() => deleteMsg(msg.id)}\n                style={{\n                  padding: \"4px 8px\",\n                  borderRadius: 6,\n                  border: \"1px solid rgba(239,68,68,0.3)\",\n                  background: \"rgba(239,68,68,0.1)\",\n                  color: \"#f87171\",\n                  cursor: \"pointer\",\n                  fontSize: 11,\n                  fontWeight: 600,\n                  fontFamily: \"Inter, sans-serif\",\n                }}\n              >\n                🗑️\n              </button>\n            </div>\n          </div>\n        ))}\n        {messages.length === 0 && (\n          <div style={{ textAlign: \"center\", padding: 40, color: \"#475569\" }}>\n            No messages yet\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}",[],[146,228,282],"048633c4-5788-11f1-ac23-ee650bb23af1",7,["D",1779637712819],[178,179,180,181,182,183,184,185,186],[146,228],["D",1779637709231],[177,187,188,189],[146],"0cb747e0-5788-11f1-b441-ee650bb23af1","db.ts","0cb74894-5788-11f1-b441-ee650bb23af1",8,["D",1779637726560],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDB() {\n  await sqlite.batch([\n    {\n      sql: `CREATE TABLE IF NOT EXISTS users (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        username TEXT UNIQUE NOT NULL,\n        display_name TEXT NOT NULL,\n        password_hash TEXT NOT NULL,\n        role TEXT DEFAULT 'student' CHECK(role IN ('student','starosta')),\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS chat_messages (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        user_id INTEGER NOT NULL,\n        username TEXT NOT NULL,\n        message TEXT NOT NULL,\n        created_at TEXT DEFAULT (datetime('now')),\n        FOREIGN KEY(user_id) REFERENCES users(id)\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS tabs (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        name TEXT NOT NULL,\n        icon TEXT DEFAULT '📄',\n        sort_order INTEGER DEFAULT 0,\n        is_system INTEGER DEFAULT 0,\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS blocks (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        tab_id INTEGER NOT NULL,\n        block_type TEXT NOT NULL,\n        title TEXT DEFAULT '',\n        content TEXT DEFAULT '{}',\n        sort_order INTEGER DEFAULT 0,\n        created_at TEXT DEFAULT (datetime('now')),\n        FOREIGN KEY(tab_id) REFERENCES tabs(id) ON DELETE CASCADE\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS polls (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        question TEXT NOT NULL,\n        options TEXT NOT NULL DEFAULT '[]',\n        tab_id INTEGER,\n        block_id INTEGER,\n        is_active INTEGER DEFAULT 1,\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS poll_votes (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        poll_id INTEGER NOT NULL,\n        user_id INTEGER NOT NULL,\n        option_index INTEGER NOT NULL,\n        created_at TEXT DEFAULT (datetime('now')),\n        UNIQUE(poll_id, user_id),\n        FOREIGN KEY(poll_id) REFERENCES polls(id) ON DELETE CASCADE,\n        FOREIGN KEY(user_id) REFERENCES users(id)\n      )`,\n    },\n    // Seed default starosta account if not exists\n    {\n      sql: `INSERT OR IGNORE INTO users (username, display_name, password_hash, role) VALUES ('starosta', 'Starosta', 'admin604', 'starosta')`,\n    },\n    // Seed system tabs\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (1, 'Announcements', '📢', 1, 1)`,\n    },\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (2, 'Exam Dates', '📅', 2, 1)`,\n    },\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (3, 'Materials', '📚', 3, 1)`,\n    },\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (4, 'Presentations', '🎤', 4, 1)`,\n    },\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (5, 'Polls', '📊', 5, 1)`,\n    },\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (6, 'Assignments', '✅', 6, 1)`,\n    },\n    {\n      sql: `INSERT OR IGNORE INTO tabs (id, name, icon, sort_order, is_system) VALUES (7, 'Links', '🔗', 7, 1)`,\n    },\n  ]);\n}\n\nexport { sqlite };\n",[],[153,298],"1e0b8d6c-5788-11f1-86b0-ee650bb23af1","tabs.ts","1e0b8e0c-5788-11f1-86b0-ee650bb23af1","046d525a-5788-11f1-ac23-ee650bb23af1",11,["D",1779637755627],"import { Hono } from \"npm:hono\";\nimport { sqlite } from \"../db.ts\";\n\nconst app = new Hono();\n\n// Get all tabs\napp.get(\"/\", async (c) => {\n  const result = await sqlite.execute(\"SELECT * FROM tabs ORDER BY sort_order ASC\");\n  return c.json({ tabs: result.rows });\n});\n\n// Create tab\napp.post(\"/\", async (c) => {\n  const { name, icon } = await c.req.json();\n  const maxOrder = await sqlite.execute(\"SELECT COALESCE(MAX(sort_order),0)+1 as next_order FROM tabs\");\n  const nextOrder = (maxOrder.rows[0] as any).next_order;\n  await sqlite.execute({\n    sql: \"INSERT INTO tabs (name, icon, sort_order, is_system) VALUES (?, ?, ?, 0)\",\n    args: [name, icon || \"📄\", nextOrder],\n  });\n  const result = await sqlite.execute(\"SELECT * FROM tabs ORDER BY id DESC LIMIT 1\");\n  return c.json({ tab: result.rows[0] });\n});\n\n// Update tab\napp.put(\"/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const { name, icon, sort_order } = await c.req.json();\n  if (name !== undefined) {\n    await sqlite.execute({ sql: \"UPDATE tabs SET name = ? WHERE id = ?\", args: [name, id] });\n  }\n  if (icon !== undefined) {\n    await sqlite.execute({ sql: \"UPDATE tabs SET icon = ? WHERE id = ?\", args: [icon, id] });\n  }\n  if (sort_order !== undefined) {\n    await sqlite.execute({ sql: \"UPDATE tabs SET sort_order = ? WHERE id = ?\", args: [sort_order, id] });\n  }\n  const result = await sqlite.execute({ sql: \"SELECT * FROM tabs WHERE id = ?\", args: [id] });\n  return c.json({ tab: result.rows[0] });\n});\n\n// Delete tab (only non-system)\napp.delete(\"/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  await sqlite.execute({ sql: \"DELETE FROM blocks WHERE tab_id = ?\", args: [id] });\n  await sqlite.execute({ sql: \"DELETE FROM tabs WHERE id = ? AND is_system = 0\", args: [id] });\n  return c.json({ success: true });\n});\n\n// Reorder tabs\napp.put(\"/reorder/batch\", async (c) => {\n  const { orders } = await c.req.json(); // [{id, sort_order}]\n  for (const o of orders) {\n    await sqlite.execute({ sql: \"UPDATE tabs SET sort_order = ? WHERE id = ?\", args: [o.sort_order, o.id] });\n  }\n  return c.json({ success: true });\n});\n\n// ---- BLOCKS ----\n\n// Get blocks for a tab\napp.get(\"/:tabId/blocks\", async (c) => {\n  const tabId = parseInt(c.req.param(\"tabId\"));\n  const result = await sqlite.execute({\n    sql: \"SELECT * FROM blocks WHERE tab_id = ? ORDER BY sort_order ASC\",\n    args: [tabId],\n  });\n  return c.json({ blocks: result.rows });\n});\n\n// Create block\napp.post(\"/:tabId/blocks\", async (c) => {\n  const tabId = parseInt(c.req.param(\"tabId\"));\n  const { block_type, title, content } = await c.req.json();\n  const maxOrder = await sqlite.execute({\n    sql: \"SELECT COALESCE(MAX(sort_order),0)+1 as next_order FROM blocks WHERE tab_id = ?\",\n    args: [tabId],\n  });\n  const nextOrder = (maxOrder.rows[0] as any).next_order;\n  await sqlite.execute({\n    sql: \"INSERT INTO blocks (tab_id, block_type, title, content, sort_order) VALUES (?, ?, ?, ?, ?)\",\n    args: [tabId, block_type, title || \"\", JSON.stringify(content || {}), nextOrder],\n  });\n  const result = await sqlite.execute(\"SELECT * FROM blocks ORDER BY id DESC LIMIT 1\");\n  return c.json({ block: result.rows[0] });\n});\n\n// Update block\napp.put(\"/blocks/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const { title, content, sort_order } = await c.req.json();\n  if (title !== undefined) {\n    await sqlite.execute({ sql: \"UPDATE blocks SET title = ? WHERE id = ?\", args: [title, id] });\n  }\n  if (content !== undefined) {\n    await sqlite.execute({ sql: \"UPDATE blocks SET content = ? WHERE id = ?\", args: [JSON.stringify(content), id] });\n  }\n  if (sort_order !== undefined) {\n    await sqlite.execute({ sql: \"UPDATE blocks SET sort_order = ? WHERE id = ?\", args: [sort_order, id] });\n  }\n  const result = await sqlite.execute({ sql: \"SELECT * FROM blocks WHERE id = ?\", args: [id] });\n  return c.json({ block: result.rows[0] });\n});\n\n// Delete block\napp.delete(\"/blocks/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  await sqlite.execute({ sql: \"DELETE FROM blocks WHERE id = ?\", args: [id] });\n  return c.json({ success: true });\n});\n\n// Reorder blocks\napp.put(\"/:tabId/blocks/reorder\", async (c) => {\n  const { orders } = await c.req.json();\n  for (const o of orders) {\n    await sqlite.execute({ sql: \"UPDATE blocks SET sort_order = ? WHERE id = ?\", args: [o.sort_order, o.id] });\n  }\n  return c.json({ success: true });\n});\n\nexport default app;\n",[],[153,314,306],"routes","227423aa-5788-11f1-ac23-ee650bb23af1","polls.ts","22742454-5788-11f1-ac23-ee650bb23af1",12,["D",1779637763010],"import { Hono } from \"npm:hono\";\nimport { sqlite } from \"../db.ts\";\n\nconst app = new Hono();\n\n// Get all polls\napp.get(\"/\", async (c) => {\n  const polls = await sqlite.execute(\"SELECT * FROM polls ORDER BY created_at DESC\");\n  const result = [];\n  for (const poll of polls.rows as any[]) {\n    const votes = await sqlite.execute({\n      sql: \"SELECT option_index, COUNT(*) as count FROM poll_votes WHERE poll_id = ? GROUP BY option_index\",\n      args: [poll.id],\n    });\n    const totalVotes = await sqlite.execute({\n      sql: \"SELECT COUNT(*) as total FROM poll_votes WHERE poll_id = ?\",\n      args: [poll.id],\n    });\n    result.push({\n      ...poll,\n      options: JSON.parse(poll.options),\n      votes: votes.rows,\n      total_votes: (totalVotes.rows[0] as any).total,\n    });\n  }\n  return c.json({ polls: result });\n});\n\n// Create poll\napp.post(\"/\", async (c) => {\n  const { question, options } = await c.req.json();\n  await sqlite.execute({\n    sql: \"INSERT INTO polls (question, options) VALUES (?, ?)\",\n    args: [question, JSON.stringify(options)],\n  });\n  const result = await sqlite.execute(\"SELECT * FROM polls ORDER BY id DESC LIMIT 1\");\n  return c.json({ poll: result.rows[0] });\n});\n\n// Vote\napp.post(\"/:id/vote\", async (c) => {\n  const pollId = parseInt(c.req.param(\"id\"));\n  const { user_id, option_index } = await c.req.json();\n  try {\n    await sqlite.execute({\n      sql: \"INSERT INTO poll_votes (poll_id, user_id, option_index) VALUES (?, ?, ?)\",\n      args: [pollId, user_id, option_index],\n    });\n    return c.json({ success: true });\n  } catch (e: any) {\n    if (e.message?.includes(\"UNIQUE\")) {\n      return c.json({ error: \"Already voted\" }, 409);\n    }\n    return c.json({ error: \"Vote failed\" }, 500);\n  }\n});\n\n// Get user's vote for a poll\napp.get(\"/:id/vote/:userId\", async (c) => {\n  const pollId = parseInt(c.req.param(\"id\"));\n  const userId = parseInt(c.req.param(\"userId\"));\n  const result = await sqlite.execute({\n    sql: \"SELECT option_index FROM poll_votes WHERE poll_id = ? AND user_id = ?\",\n    args: [pollId, userId],\n  });\n  return c.json({ vote: result.rows[0] || null });\n});\n\n// Delete poll\napp.delete(\"/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  await sqlite.execute({ sql: \"DELETE FROM poll_votes WHERE poll_id = ?\", args: [id] });\n  await sqlite.execute({ sql: \"DELETE FROM polls WHERE id = ?\", args: [id] });\n  return c.json({ success: true });\n});\n\nexport default app;\n",[],[153,314,316],"14444878-5788-11f1-b97d-ee650bb23af1","chat.ts","14444936-5788-11f1-b97d-ee650bb23af1",10,["D",1779637739231],"import { Hono } from \"npm:hono\";\nimport { sqlite } from \"../db.ts\";\n\nconst app = new Hono();\n\n// Get messages (last 200)\napp.get(\"/messages\", async (c) => {\n  const result = await sqlite.execute(\n    \"SELECT id, user_id, username, message, created_at FROM chat_messages ORDER BY created_at DESC LIMIT 200\"\n  );\n  return c.json({ messages: result.rows.reverse() });\n});\n\n// Send message\napp.post(\"/messages\", async (c) => {\n  const { user_id, username, message } = await c.req.json();\n  if (!message?.trim()) return c.json({ error: \"Empty message\" }, 400);\n  \n  await sqlite.execute({\n    sql: \"INSERT INTO chat_messages (user_id, username, message) VALUES (?, ?, ?)\",\n    args: [user_id, username, message.trim()],\n  });\n  \n  const result = await sqlite.execute(\n    \"SELECT * FROM chat_messages ORDER BY id DESC LIMIT 1\"\n  );\n  return c.json({ message: result.rows[0] });\n});\n\n// Delete message (admin only)\napp.delete(\"/messages/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  await sqlite.execute({ sql: \"DELETE FROM chat_messages WHERE id = ?\", args: [parseInt(id)] });\n  return c.json({ success: true });\n});\n\nexport default app;\n",[],[153,314,324],"11e40e88-5788-11f1-bbd5-ee650bb23af1","auth.ts","11e40f64-5788-11f1-bbd5-ee650bb23af1",9,["D",1779637735235],"import { Hono } from \"npm:hono\";\nimport { sqlite } from \"../db.ts\";\n\nconst app = new Hono();\n\n// Register\napp.post(\"/register\", async (c) => {\n  const { username, display_name, password } = await c.req.json();\n  if (!username || !display_name || !password) {\n    return c.json({ error: \"All fields required\" }, 400);\n  }\n  try {\n    await sqlite.execute({\n      sql: \"INSERT INTO users (username, display_name, password_hash, role) VALUES (?, ?, ?, 'student')\",\n      args: [username.toLowerCase().trim(), display_name.trim(), password],\n    });\n    const user = await sqlite.execute({\n      sql: \"SELECT id, username, display_name, role FROM users WHERE username = ?\",\n      args: [username.toLowerCase().trim()],\n    });\n    return c.json({ user: user.rows[0] });\n  } catch (e: any) {\n    if (e.message?.includes(\"UNIQUE\")) {\n      return c.json({ error: \"Username already taken\" }, 409);\n    }\n    return c.json({ error: \"Registration failed\" }, 500);\n  }\n});\n\n// Login\napp.post(\"/login\", async (c) => {\n  const { username, password } = await c.req.json();\n  const result = await sqlite.execute({\n    sql: \"SELECT id, username, display_name, role, password_hash FROM users WHERE username = ?\",\n    args: [username.toLowerCase().trim()],\n  });\n  if (result.rows.length === 0) {\n    return c.json({ error: \"User not found\" }, 404);\n  }\n  const user = result.rows[0] as any;\n  if (user.password_hash !== password) {\n    return c.json({ error: \"Invalid password\" }, 401);\n  }\n  const { password_hash, ...safeUser } = user;\n  return c.json({ user: safeUser });\n});\n\n// Get all users (for admin)\napp.get(\"/users\", async (c) => {\n  const result = await sqlite.execute(\"SELECT id, username, display_name, role, created_at FROM users ORDER BY created_at\");\n  return c.json({ users: result.rows });\n});\n\nexport default app;\n",[],[153,314,332],"046d519c-5788-11f1-ac23-ee650bb23af1",6,["D",1779637712650],[171,172,173,174],[153,314],["D",1779637708797],[170,175],[153],["D",1779637669836],["D",1789498239291],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_128":385,"_386":387,"_388":389,"_390":25,"_391":25,"_392":25,"_393":60,"_394":-5,"_395":-7,"_396":-7,"_397":64,"_398":25,"_399":25,"_400":-5,"_401":25,"_402":25,"_403":25,"_404":-5},"ENV",{"_356":357,"_358":359,"_360":91,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v27