\n );\n }\n\n // Build effective calendar colors\n const effectiveColors: Record = {};\n for (const cal of calendars) {\n effectiveColors[cal.id] = preferences.calendarColors[cal.id] || cal.color;\n }\n\n return (\n <>\n {/* Header */}\n

\n \n

\n\n

\n \n {year}\n \n \n

\n\n

\n handleViewModeChange(\"grid\")}\n title={UI_TEXT.VIEW_GRID}\n >\n ▦\n \n handleViewModeChange(\"weekly\")}\n title={UI_TEXT.VIEW_WEEKLY}\n >\n ☰\n \n

\n \n ↻\n \n

\n\n {/* Calendar */}\n {viewMode === \"grid\" ? (\n \n ) : (\n \n )}\n\n {/* Sidebar */}\n setSidebarOpen(false)}\n calendars={calendars}\n preferences={preferences}\n onToggleCalendar={handleToggleCalendar}\n onChangeColor={handleChangeColor}\n onAddCalendar={handleAddCalendar}\n onDeleteCalendar={handleDeleteCalendar}\n onToggleShowDaysOfWeek={handleToggleShowDaysOfWeek}\n lastUpdated={lastUpdated}\n />\n \n );\n}\n\nexport default App;\n",[],[227,233,240],{"_107":248,"_99":249,"_162":250,"_164":234,"_165":147,"_166":251,"_168":169,"_109":252,"_104":235,"_171":210,"_173":253,"_174":22,"_175":-5,"_176":254,"_102":255},"dada43ea-ebc5-11f0-b7b5-42dde27851f2","Sidebar.tsx","686c5910-ebb6-11f0-9e31-42dde27851f2",58,["D",1767789546084],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { CalendarSource, UserPreferences } from \"../../shared/types.ts\";\nimport { UI_TEXT } from \"../../shared/constants.ts\";\n\ninterface SidebarProps {\n isOpen: boolean;\n onClose: () => void;\n calendars: CalendarSource[];\n preferences: UserPreferences;\n onToggleCalendar: (id: string, selected: boolean) => void;\n onChangeColor: (id: string, color: string) => void;\n onAddCalendar: (name: string, url: string) => Promise;\n onDeleteCalendar: (id: string) => Promise;\n onToggleShowDaysOfWeek: (show: boolean) => void;\n lastUpdated: string | null;\n}\n\nexport function Sidebar({\n isOpen,\n onClose,\n calendars,\n preferences,\n onToggleCalendar,\n onChangeColor,\n onAddCalendar,\n onDeleteCalendar,\n onToggleShowDaysOfWeek,\n lastUpdated,\n}: SidebarProps) {\n const [newName, setNewName] = useState(\"\");\n const [newUrl, setNewUrl] = useState(\"\");\n const [isAdding, setIsAdding] = useState(false);\n const [addError, setAddError] = useState(\"\");\n // Track pending color changes locally (only save on blur)\n const [pendingColors, setPendingColors] = useState>({});\n\n const formatLastUpdated = (dateStr: string | null): string => {\n if (!dateStr) return UI_TEXT.NEVER;\n const date = new Date(dateStr);\n return date.toLocaleString(\"de-AT\", {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n if (!isOpen) return null;\n\n const handleAddCalendar = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!newName.trim() || !newUrl.trim()) return;\n\n setIsAdding(true);\n setAddError(\"\");\n try {\n await onAddCalendar(newName.trim(), newUrl.trim());\n setNewName(\"\");\n setNewUrl(\"\");\n } catch (err) {\n setAddError(UI_TEXT.FAILED_TO_ADD);\n } finally {\n setIsAdding(false);\n }\n };\n\n const handleDelete = async (id: string, name: string) => {\n if (!confirm(UI_TEXT.CONFIRM_REMOVE(name))) return;\n try {\n await onDeleteCalendar(id);\n } catch (err) {\n alert(UI_TEXT.FAILED_TO_REMOVE);\n }\n };\n\n return (\n <>\n {/* Overlay */}\n

\n\n {/* Sidebar */}\n

\n {/* Header */}\n

{UI_TEXT.CALENDARS}

\n\n {/* Calendar list */}\n

\n {calendars.length === 0 ? (\n

\n {UI_TEXT.NO_CALENDARS}\n

\n ) : (\n calendars.map((cal) => {\n const isSelected = preferences.selectedCalendarIds.includes(cal.id);\n const savedColor = preferences.calendarColors[cal.id] || cal.color;\n const displayColor = pendingColors[cal.id] ?? savedColor;\n return (\n

\n onToggleCalendar(cal.id, e.target.checked)}\n />\n \n {cal.name}\n \n \n

\n {\n // Update local state immediately for responsive UI\n setPendingColors((prev) => ({ ...prev, [cal.id]: e.target.value }));\n }}\n onBlur={(e) => {\n // Save to server only when color picker closes\n const newColor = e.target.value;\n if (newColor !== savedColor) {\n onChangeColor(cal.id, newColor);\n }\n // Clear pending state\n setPendingColors((prev) => {\n const next = { ...prev };\n delete next[cal.id];\n return next;\n });\n }}\n title={`${UI_TEXT.COLOR_FOR} ${cal.name}`}\n />\n \n handleDelete(cal.id, cal.name)}\n title={UI_TEXT.REMOVE_CALENDAR}\n >\n ✕\n \n

\n );\n })\n )}\n

\n\n {/* Settings */}\n

\n \n onToggleShowDaysOfWeek(e.target.checked)}\n />\n {UI_TEXT.SHOW_DAYS_OF_WEEK}\n \n

\n {UI_TEXT.LAST_UPDATED}: {formatLastUpdated(lastUpdated)}\n

\n\n {/* Add calendar form */}\n

\n\n {/* Footer */}\n

\n \n {UI_TEXT.SIGN_OUT}\n \n

\n \n );\n}\n\nexport default Sidebar;\n",[],[227,233,249],{"_107":257,"_99":258,"_162":259,"_164":234,"_165":147,"_166":260,"_168":169,"_109":261,"_104":235,"_171":210,"_173":262,"_174":22,"_175":-5,"_176":263,"_102":264},"1864a4e8-ebd1-11f0-8784-42dde27851f2","WeeklyCalendar.tsx","44fa7fbc-ebc9-11f0-9765-42dde27851f2",77,["D",1767794373835],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useMemo, useState, useRef, useEffect, useLayoutEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { AllDayEvent, CalendarSource } from \"../../shared/types.ts\";\nimport { UI_TEXT } from \"../../shared/constants.ts\";\n\ninterface WeeklyCalendarProps {\n year: number;\n events: AllDayEvent[];\n calendars: CalendarSource[];\n calendarColors: Record;\n}\n\ninterface WeekDay {\n key: string;\n date: Date;\n month: number;\n isCurrentYear: boolean;\n}\n\ninterface Week {\n weekNumber: number;\n days: WeekDay[];\n primaryMonth: number; // The month that has the most days in this week\n}\n\n// Short month names\nconst monthShort = UI_TEXT.MONTHS.map((m) => m.substring(0, 3).toUpperCase());\n\n// Calculate contrast text color based on background luminance\nfunction getContrastTextColor(hexColor: string): string {\n const hex = hexColor.replace(\"#\", \"\");\n const r = parseInt(hex.substring(0, 2), 16) / 255;\n const g = parseInt(hex.substring(2, 4), 16) / 255;\n const b = parseInt(hex.substring(4, 6), 16) / 255;\n // Calculate relative luminance\n const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n return luminance > 0.5 ? \"#1a1a1a\" : \"#ffffff\";\n}\n\nfunction formatDateKey(date: Date): string {\n const y = date.getFullYear();\n const m = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const d = `${date.getDate()}`.padStart(2, \"0\");\n return `${y}-${m}-${d}`;\n}\n\n// Get ISO week number\nfunction getISOWeekNumber(date: Date): number {\n const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));\n const dayNum = d.getUTCDay() || 7;\n d.setUTCDate(d.getUTCDate() + 4 - dayNum);\n const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));\n return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);\n}\n\n// Get Monday of the week containing the given date\nfunction getMondayOfWeek(date: Date): Date {\n const d = new Date(date);\n const day = d.getDay();\n const diff = d.getDate() - day + (day === 0 ? -6 : 1);\n return new Date(d.setDate(diff));\n}\n\n// Generate all weeks for a year (includes partial weeks at start/end)\nfunction generateWeeksForYear(year: number): Week[] {\n const weeks: Week[] = [];\n\n // Start from the Monday of the week containing Jan 1\n const jan1 = new Date(year, 0, 1);\n let currentMonday = getMondayOfWeek(jan1);\n\n // End at the Sunday of the week containing Dec 31\n const dec31 = new Date(year, 11, 31);\n const lastSunday = new Date(getMondayOfWeek(dec31));\n lastSunday.setDate(lastSunday.getDate() + 6);\n\n while (currentMonday <= lastSunday) {\n const days: WeekDay[] = [];\n const monthCounts: Record = {};\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(currentMonday);\n date.setDate(date.getDate() + i);\n const month = date.getMonth();\n const isCurrentYear = date.getFullYear() === year;\n\n days.push({\n key: formatDateKey(date),\n date: new Date(date),\n month,\n isCurrentYear,\n });\n\n if (isCurrentYear) {\n monthCounts[month] = (monthCounts[month] || 0) + 1;\n }\n }\n\n // Determine primary month (most days in this week from current year)\n let primaryMonth = days[0].month;\n let maxCount = 0;\n for (const [month, count] of Object.entries(monthCounts)) {\n if (count > maxCount) {\n maxCount = count;\n primaryMonth = parseInt(month);\n }\n }\n\n weeks.push({\n weekNumber: getISOWeekNumber(days[3].date), // Thursday determines week number\n days,\n primaryMonth,\n });\n\n currentMonday.setDate(currentMonday.getDate() + 7);\n }\n\n return weeks;\n}\n\n// Calculate month spans for labels\nfunction calculateMonthSpans(weeks: Week[]): Array<{ month: number; startIdx: number; span: number }> {\n const spans: Array<{ month: number; startIdx: number; span: number }> = [];\n let currentMonth = -1;\n let startIdx = 0;\n\n for (let i = 0; i < weeks.length; i++) {\n const week = weeks[i];\n if (week.primaryMonth !== currentMonth) {\n if (currentMonth !== -1) {\n spans.push({ month: currentMonth, startIdx, span: i - startIdx });\n }\n currentMonth = week.primaryMonth;\n startIdx = i;\n }\n }\n\n // Add last span\n if (currentMonth !== -1) {\n spans.push({ month: currentMonth, startIdx, span: weeks.length - startIdx });\n }\n\n return spans;\n}\n\nfunction formatDisplayRange(startIsoDate: string, endIsoDate: string) {\n const start = new Date(startIsoDate + \"T00:00:00\");\n const end = new Date(endIsoDate + \"T00:00:00\");\n const endInclusive = new Date(end.getTime() - 86400000);\n const locale = \"de-AT\";\n const opts: Intl.DateTimeFormatOptions = { day: \"numeric\", month: \"short\", year: \"numeric\" };\n\n if (start.toDateString() === endInclusive.toDateString()) {\n return start.toLocaleString(locale, opts);\n }\n return `${start.toLocaleString(locale, opts)} – ${endInclusive.toLocaleString(locale, opts)}`;\n}\n\n// Popover component (similar to YearCalendar)\ninterface PopoverProps {\n popoverRef: React.RefObject;\n x: number;\n y: number;\n onClose: () => void;\n event: AllDayEvent;\n calendarColors: Record;\n calendarNames: Record;\n}\n\nfunction Popover({ popoverRef, x, y, onClose, event, calendarColors, calendarNames }: PopoverProps) {\n const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n\n useLayoutEffect(() => {\n if (!popoverRef.current) return;\n const rect = popoverRef.current.getBoundingClientRect();\n const padding = 8;\n let newX = x - rect.width / 2;\n let newY = y;\n\n if (newX + rect.width > window.innerWidth - padding) {\n newX = window.innerWidth - rect.width - padding;\n }\n if (newX < padding) newX = padding;\n if (newY + rect.height > window.innerHeight - padding) {\n newY = y - rect.height - 16;\n }\n if (newY < padding) newY = padding;\n\n setPosition({ x: newX, y: newY });\n }, [x, y, popoverRef]);\n\n const bg = event.calendarId ? calendarColors[event.calendarId] : \"#94a3b8\";\n const textColor = getContrastTextColor(bg);\n const calName = event.calendarId ? calendarNames[event.calendarId] : \"\";\n\n return (\n \n

\n {event.summary}\n \n

{formatDisplayRange(event.startDate, event.endDate)}

\n {calName &&

{calName}

}\n

\n );\n}\n\n// Day events popover component\ninterface DayEventsPopoverProps {\n popoverRef: React.RefObject;\n x: number;\n y: number;\n onClose: () => void;\n date: Date;\n events: AllDayEvent[];\n calendarColors: Record;\n calendarNames: Record;\n onEventClick: (event: AllDayEvent, x: number, y: number) => void;\n}\n\nfunction DayEventsPopover({\n popoverRef,\n x,\n y,\n onClose,\n date,\n events,\n calendarColors,\n calendarNames,\n onEventClick,\n}: DayEventsPopoverProps) {\n const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n\n useLayoutEffect(() => {\n if (!popoverRef.current) return;\n\n const rect = popoverRef.current.getBoundingClientRect();\n const padding = 8;\n\n let newX = x - rect.width / 2;\n let newY = y;\n\n if (newX + rect.width > window.innerWidth - padding) {\n newX = window.innerWidth - rect.width - padding;\n }\n if (newX < padding) newX = padding;\n if (newY + rect.height > window.innerHeight - padding) {\n newY = y - rect.height - 16;\n }\n if (newY < padding) newY = padding;\n\n setPosition({ x: newX, y: newY });\n }, [x, y, popoverRef]);\n\n const locale = \"de-AT\";\n const dateStr = date.toLocaleDateString(locale, { weekday: \"long\", day: \"numeric\", month: \"long\", year: \"numeric\" });\n\n return (\n \n

\n {dateStr}\n \n

\n {events.map((ev) => {\n const bg = ev.calendarId ? calendarColors[ev.calendarId] : \"#94a3b8\";\n const calName = ev.calendarId ? calendarNames[ev.calendarId] : \"\";\n return (\n {\n const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n onEventClick(ev, rect.left + rect.width / 2, rect.bottom + 8);\n }}\n >\n \n {ev.summary}\n {calName && {calName}}\n

\n );\n })}\n

\n \n );\n}\n\nexport function WeeklyCalendar({ year, events, calendars, calendarColors }: WeeklyCalendarProps) {\n const todayKey = formatDateKey(new Date());\n const weeks = useMemo(() => generateWeeksForYear(year), [year]);\n const monthSpans = useMemo(() => calculateMonthSpans(weeks), [weeks]);\n\n const containerRef = useRef(null);\n const [cellHeight, setCellHeight] = useState(70);\n const [containerWidth, setContainerWidth] = useState(0);\n const [popover, setPopover] = useState<{ event: AllDayEvent | null; x: number; y: number }>({\n event: null,\n x: 0,\n y: 0,\n });\n const popoverRef = useRef(null);\n\n // Day popover state\n const [dayPopover, setDayPopover] = useState<{ date: Date | null; events: AllDayEvent[]; x: number; y: number }>({\n date: null,\n events: [],\n x: 0,\n y: 0,\n });\n const dayPopoverRef = useRef(null);\n\n // Measure cell height and container width\n const measureDimensions = useCallback(() => {\n if (!containerRef.current) return;\n const cell = containerRef.current.querySelector('[data-day-cell]');\n if (cell) {\n setCellHeight(cell.getBoundingClientRect().height);\n }\n setContainerWidth(containerRef.current.offsetWidth);\n }, []);\n\n useLayoutEffect(() => {\n measureDimensions();\n }, [weeks, measureDimensions]);\n\n // Re-measure on window resize\n useEffect(() => {\n const handleResize = () => {\n measureDimensions();\n };\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [measureDimensions]);\n\n // Close popovers on outside click or escape\n useEffect(() => {\n function onDocMouseDown(e: MouseEvent) {\n if (e.target instanceof Node) {\n if (popover.event && popoverRef.current && !popoverRef.current.contains(e.target)) {\n setPopover({ event: null, x: 0, y: 0 });\n }\n if (dayPopover.date && dayPopoverRef.current && !dayPopoverRef.current.contains(e.target)) {\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n }\n }\n }\n function onKey(e: KeyboardEvent) {\n if (e.key === \"Escape\") {\n setPopover({ event: null, x: 0, y: 0 });\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n }\n }\n document.addEventListener(\"mousedown\", onDocMouseDown);\n document.addEventListener(\"keydown\", onKey);\n return () => {\n document.removeEventListener(\"mousedown\", onDocMouseDown);\n document.removeEventListener(\"keydown\", onKey);\n };\n }, [popover.event, dayPopover.date]);\n\n // Build calendar name map\n const calendarNames = useMemo(() => {\n const map: Record = {};\n for (const cal of calendars) map[cal.id] = cal.name;\n return map;\n }, [calendars]);\n\n // Build date map for events per day\n const dateMap = useMemo(() => {\n const map = new Map();\n for (const ev of events) {\n const start = new Date(ev.startDate + \"T00:00:00\");\n const end = new Date(ev.endDate + \"T00:00:00\"); // exclusive\n for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {\n const key = formatDateKey(d);\n const list = map.get(key) ?? [];\n list.push(ev);\n map.set(key, list);\n }\n }\n return map;\n }, [events]);\n\n // Build week index map for event positioning\n const weekIndexByDate = useMemo(() => {\n const map = new Map();\n weeks.forEach((week, weekIdx) => {\n week.days.forEach((day, dayIdx) => {\n map.set(day.key, { weekIdx, dayIdx });\n });\n });\n return map;\n }, [weeks]);\n\n // Segment events for weekly view\n const eventSegments = useMemo(() => {\n type Seg = { weekIdx: number; startCol: number; endCol: number; ev: AllDayEvent };\n const segments: Seg[] = [];\n\n for (const ev of events) {\n const startPos = weekIndexByDate.get(ev.startDate);\n // endDate is exclusive, so get the day before\n const endDate = new Date(ev.endDate + \"T00:00:00\");\n endDate.setDate(endDate.getDate() - 1);\n const endKey = formatDateKey(endDate);\n const endPos = weekIndexByDate.get(endKey);\n\n if (!startPos || !endPos) continue;\n\n // Create segments for each week the event spans\n for (let weekIdx = startPos.weekIdx; weekIdx <= endPos.weekIdx; weekIdx++) {\n const startCol = weekIdx === startPos.weekIdx ? startPos.dayIdx : 0;\n const endCol = weekIdx === endPos.weekIdx ? endPos.dayIdx : 6;\n segments.push({ weekIdx, startCol, endCol, ev });\n }\n }\n\n return segments;\n }, [events, weekIndexByDate]);\n\n // Group segments by week for lane allocation\n const segmentsByWeek = useMemo(() => {\n const map = new Map();\n for (const seg of eventSegments) {\n const list = map.get(seg.weekIdx) || [];\n list.push(seg);\n map.set(seg.weekIdx, list);\n }\n // Sort each week's segments by start column\n for (const [, segs] of map) {\n segs.sort((a, b) => a.startCol - b.startCol);\n }\n return map;\n }, [eventSegments]);\n\n // Compute event bars and overflow\n const eventBarsAndOverflow = useMemo(() => {\n const bars: React.ReactElement[] = [];\n const overflow = new Map();\n const headerHeight = 28;\n const monthColWidth = 20;\n const kwColWidth = 30;\n const dayColStart = monthColWidth + kwColWidth;\n\n if (!containerWidth) return { bars: null, overflow };\n const dayColWidth = (containerWidth - dayColStart) / 7;\n\n const dayNumberHeight = 18;\n const laneHeight = 16;\n const maxLanes = Math.max(1, Math.floor((cellHeight - dayNumberHeight - 4) / laneHeight));\n\n for (const [weekIdx, segs] of segmentsByWeek) {\n const laneEnds: number[] = [];\n\n for (const seg of segs) {\n let lane = 0;\n while (lane < laneEnds.length && seg.startCol <= laneEnds[lane]) {\n lane++;\n }\n\n // Track overflow for each day the segment covers\n if (lane >= maxLanes) {\n for (let col = seg.startCol; col <= seg.endCol; col++) {\n const dayKey = weeks[weekIdx]?.days[col]?.key;\n if (dayKey) {\n overflow.set(dayKey, (overflow.get(dayKey) || 0) + 1);\n }\n }\n continue;\n }\n\n if (lane === laneEnds.length) laneEnds.push(seg.endCol);\n else laneEnds[lane] = seg.endCol;\n\n const left = dayColStart + seg.startCol * dayColWidth;\n const top = headerHeight + weekIdx * cellHeight + dayNumberHeight + lane * laneHeight;\n const width = (seg.endCol - seg.startCol + 1) * dayColWidth - 2;\n const bg = seg.ev.calendarId ? calendarColors[seg.ev.calendarId] : \"#94a3b8\";\n\n bars.push(\n {\n e.stopPropagation();\n const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n setPopover({\n event: seg.ev,\n x: rect.left + rect.width / 2,\n y: rect.bottom + 8,\n });\n }}\n >\n {seg.ev.summary}\n \n );\n }\n }\n return { bars, overflow };\n }, [segmentsByWeek, weeks, cellHeight, containerWidth, calendarColors]);\n\n // Handler for clicking on a day to see all events\n const handleDayClick = (date: Date, key: string, e: React.MouseEvent) => {\n const dayEvents = dateMap.get(key) || [];\n if (dayEvents.length === 0) return;\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n setDayPopover({\n date,\n events: dayEvents,\n x: rect.left + rect.width / 2,\n y: rect.bottom + 8,\n });\n };\n\n return (\n

\n {/* Header row */}\n

{UI_TEXT.CALENDAR_WEEK}

\n {UI_TEXT.WEEKDAYS_SHORT.map((day, i) => (\n

= 5 ? (i === 5 ? 'saturday' : 'sunday') : ''}`}>\n {day}\n

\n ))}\n\n {/* Week rows */}\n {weeks.map((week, weekIdx) => {\n // Check if this is the start of a new month span\n const monthSpan = monthSpans.find(s => s.startIdx === weekIdx);\n\n // Find month boundary index within this week (first day of new month)\n let boundaryIdx = -1;\n for (let i = 1; i < week.days.length; i++) {\n if (week.days[i].month !== week.days[i - 1].month) {\n boundaryIdx = i;\n break;\n }\n }\n\n return (\n \n {/* Month label cell (spans multiple rows) */}\n {monthSpan && (\n \n {monthShort[monthSpan.month]}\n

\n )}\n\n {/* Week number */}\n

{week.weekNumber}

\n\n {/* Day cells */}\n {week.days.map((day, dayIdx) => {\n const isToday = day.key === todayKey;\n const isSaturday = dayIdx === 5;\n const isSunday = dayIdx === 6;\n const isMonthBoundary = boundaryIdx === dayIdx;\n // Horizontal borders: bottom for days before boundary, top for days at/after\n const hasBottomBorder = boundaryIdx > 0 && dayIdx < boundaryIdx;\n const hasTopBorder = boundaryIdx > 0 && dayIdx >= boundaryIdx;\n const overflowCount = eventBarsAndOverflow.overflow.get(day.key) || 0;\n const hasEvents = (dateMap.get(day.key)?.length || 0) > 0;\n\n return (\n handleDayClick(day.date, day.key, e)}\n >\n

\n {day.date.getDate()}\n {overflowCount > 0 && (\n +{overflowCount}\n )}\n

\n );\n })}\n \n );\n })}\n \n\n {/* Events overlay */}\n

\n {eventBarsAndOverflow.bars}\n

\n\n {/* Event popover */}\n {popover.event && (\n setPopover({ event: null, x: 0, y: 0 })}\n event={popover.event}\n calendarColors={calendarColors}\n calendarNames={calendarNames}\n />\n )}\n\n {/* Day events popover */}\n {dayPopover.date && (\n setDayPopover({ date: null, events: [], x: 0, y: 0 })}\n onEventClick={(ev, x, y) => {\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n setPopover({ event: ev, x, y });\n }}\n />\n )}\n \n );\n}\n\nexport default WeeklyCalendar;\n",[],[227,233,258],{"_107":266,"_99":267,"_162":268,"_164":234,"_165":147,"_166":146,"_168":169,"_109":269,"_104":270,"_171":210,"_173":271,"_174":22,"_175":-5,"_176":272,"_102":273},"67d397c2-ebd2-11f0-b2fb-42dde27851f2","YearCalendar.tsx","685e5f0e-ebb6-11f0-9782-42dde27851f2",["D",1767794936514],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useMemo, useState, useRef, useEffect, useLayoutEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { AllDayEvent, CalendarSource } from \"../../shared/types.ts\";\nimport { UI_TEXT } from \"../../shared/constants.ts\";\n\ninterface YearCalendarProps {\n year: number;\n events: AllDayEvent[];\n calendars: CalendarSource[];\n calendarColors: Record;\n showDaysOfWeek?: boolean;\n}\n\n// Short month names (first 3 chars)\nconst monthShort = UI_TEXT.MONTHS.map((m) => m.substring(0, 3));\n// Weekdays starting from Sunday (to match Date.getDay())\nconst dayOfWeekShort = [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"];\n\n// Calculate contrasting text color based on background luminance\nfunction getContrastTextColor(hexColor: string): string {\n // Remove # if present\n const hex = hexColor.replace(\"#\", \"\");\n const r = parseInt(hex.substring(0, 2), 16) / 255;\n const g = parseInt(hex.substring(2, 4), 16) / 255;\n const b = parseInt(hex.substring(4, 6), 16) / 255;\n\n // Calculate relative luminance (sRGB)\n const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n // Use white text for dark backgrounds, dark text for light backgrounds\n return luminance > 0.5 ? \"#1a1a1a\" : \"#ffffff\";\n}\n\nfunction formatDateKey(date: Date): string {\n const y = date.getFullYear();\n const m = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const d = `${date.getDate()}`.padStart(2, \"0\");\n return `${y}-${m}-${d}`;\n}\n\nfunction expandEventsToDateMap(events: AllDayEvent[]) {\n const map = new Map();\n for (const ev of events) {\n const start = new Date(ev.startDate + \"T00:00:00Z\");\n const end = new Date(ev.endDate + \"T00:00:00Z\"); // exclusive\n for (let d = new Date(start); d < end; d.setUTCDate(d.getUTCDate() + 1)) {\n const local = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()));\n const key = formatDateKey(new Date(local.getUTCFullYear(), local.getUTCMonth(), local.getUTCDate()));\n const list = map.get(key) ?? [];\n list.push(ev);\n map.set(key, list);\n }\n }\n return map;\n}\n\nfunction generateYearDays(year: number) {\n const start = new Date(year, 0, 1);\n const end = new Date(year + 1, 0, 1);\n const days: Array<{ key: string; date: Date }> = [];\n for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {\n const date = new Date(d);\n days.push({ key: formatDateKey(date), date });\n }\n return days;\n}\n\nfunction computeSquareGridColumns(totalDays: number, width: number, height: number, gapPx = 1) {\n if (width <= 0 || height <= 0) return { cols: 1, cell: 10 };\n let bestCols = 1;\n let bestCell = 0;\n const maxCols = Math.min(totalDays, Math.max(1, Math.floor(width)));\n for (let cols = 1; cols <= maxCols; cols++) {\n const usableWidth = width - (cols - 1) * gapPx;\n const cellSize = Math.floor(usableWidth / cols);\n if (cellSize <= 0) break;\n const rows = Math.ceil(totalDays / cols);\n const totalHeight = rows * cellSize + (rows - 1) * gapPx;\n if (totalHeight <= height) {\n if (cellSize > bestCell) {\n bestCell = cellSize;\n bestCols = cols;\n }\n }\n }\n if (bestCell === 0) {\n const usableWidth = width - (bestCols - 1) * gapPx;\n bestCell = Math.max(10, Math.floor(usableWidth / bestCols));\n }\n return { cols: bestCols, cell: bestCell };\n}\n\nfunction formatDisplayRange(startIsoDate: string, endIsoDate: string) {\n const start = new Date(startIsoDate + \"T00:00:00\");\n const end = new Date(endIsoDate + \"T00:00:00\"); // exclusive\n const endInclusive = new Date(end.getTime() - 86400000);\n const sameMonth =\n start.getFullYear() === endInclusive.getFullYear() && start.getMonth() === endInclusive.getMonth();\n const optsDay: Intl.DateTimeFormatOptions = { day: \"numeric\" };\n const optsMon: Intl.DateTimeFormatOptions = { month: \"short\" };\n const optsYear: Intl.DateTimeFormatOptions = { year: \"numeric\" };\n const locale = \"de-AT\";\n if (start.toDateString() === endInclusive.toDateString()) {\n return `${start.toLocaleString(locale, { ...optsMon, ...optsDay })}, ${start.toLocaleString(locale, optsYear)}`;\n }\n if (sameMonth) {\n return `${start.toLocaleString(locale, { ...optsMon, ...optsDay })}–${endInclusive.toLocaleString(locale, optsDay)}, ${start.toLocaleString(locale, optsYear)}`;\n }\n const left = `${start.toLocaleString(locale, { ...optsMon, ...optsDay })}, ${start.toLocaleString(locale, optsYear)}`;\n const right = `${endInclusive.toLocaleString(locale, { ...optsMon, ...optsDay })}, ${endInclusive.toLocaleString(locale, optsYear)}`;\n return `${left} – ${right}`;\n}\n\ninterface PopoverWithBoundsProps {\n popoverRef: React.RefObject;\n x: number;\n y: number;\n onClose: () => void;\n event: AllDayEvent;\n calendarColors: Record;\n calendarNames: Record;\n}\n\ninterface DayEventsPopoverProps {\n popoverRef: React.RefObject;\n x: number;\n y: number;\n onClose: () => void;\n date: Date;\n events: AllDayEvent[];\n calendarColors: Record;\n calendarNames: Record;\n onEventClick: (event: AllDayEvent, x: number, y: number) => void;\n}\n\nfunction PopoverWithBounds({\n popoverRef,\n x,\n y,\n onClose,\n event,\n calendarColors,\n calendarNames,\n}: PopoverWithBoundsProps) {\n const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n\n useLayoutEffect(() => {\n if (!popoverRef.current) return;\n\n const rect = popoverRef.current.getBoundingClientRect();\n const padding = 8;\n const popoverWidth = rect.width;\n const popoverHeight = rect.height;\n\n // Start centered on x\n let newX = x - popoverWidth / 2;\n let newY = y;\n\n // Adjust horizontal position to stay in bounds\n if (newX + popoverWidth > window.innerWidth - padding) {\n newX = window.innerWidth - popoverWidth - padding;\n }\n if (newX < padding) {\n newX = padding;\n }\n\n // Adjust vertical position to stay in bounds\n if (newY + popoverHeight > window.innerHeight - padding) {\n // Place above the click point instead\n newY = y - popoverHeight - 16;\n }\n if (newY < padding) {\n newY = padding;\n }\n\n setPosition({ x: newX, y: newY });\n }, [x, y, popoverRef]);\n\n const bg = event.calendarId ? calendarColors[event.calendarId] : \"#94a3b8\";\n const textColor = getContrastTextColor(bg);\n const calName = event.calendarId ? calendarNames[event.calendarId] : \"\";\n\n return (\n \n

\n {event.summary}\n \n

{formatDisplayRange(event.startDate, event.endDate)}

\n {calName &&

{calName}

}\n

\n \n );\n}\n\nfunction DayEventsPopover({\n popoverRef,\n x,\n y,\n onClose,\n date,\n events,\n calendarColors,\n calendarNames,\n onEventClick,\n}: DayEventsPopoverProps) {\n const [position, setPosition] = useState<{ x: number; y: number } | null>(null);\n\n useLayoutEffect(() => {\n if (!popoverRef.current) return;\n\n const rect = popoverRef.current.getBoundingClientRect();\n const padding = 8;\n const popoverWidth = rect.width;\n const popoverHeight = rect.height;\n\n let newX = x - popoverWidth / 2;\n let newY = y;\n\n if (newX + popoverWidth > window.innerWidth - padding) {\n newX = window.innerWidth - popoverWidth - padding;\n }\n if (newX < padding) {\n newX = padding;\n }\n if (newY + popoverHeight > window.innerHeight - padding) {\n newY = y - popoverHeight - 16;\n }\n if (newY < padding) {\n newY = padding;\n }\n\n setPosition({ x: newX, y: newY });\n }, [x, y, popoverRef]);\n\n const locale = \"de-AT\";\n const dateStr = date.toLocaleDateString(locale, { weekday: \"long\", day: \"numeric\", month: \"long\", year: \"numeric\" });\n\n return (\n \n

\n {dateStr}\n \n

\n );\n })}\n \n \n );\n}\n\nexport function YearCalendar({ year, events, calendars, calendarColors, showDaysOfWeek = false }: YearCalendarProps) {\n const todayKey = formatDateKey(new Date());\n const dateMap = useMemo(() => expandEventsToDateMap(events), [events]);\n const days = useMemo(() => generateYearDays(year), [year]);\n const dayIndexByKey = useMemo(() => {\n const map = new Map();\n days.forEach((d, i) => map.set(d.key, i));\n return map;\n }, [days]);\n\n const containerRef = useRef(null);\n const gridRef = useRef(null);\n const [cellSizePx, setCellSizePx] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n const [popover, setPopover] = useState<{ event: AllDayEvent | null; x: number; y: number }>({\n event: null,\n x: 0,\n y: 0,\n });\n const [dayPopover, setDayPopover] = useState<{ date: Date | null; events: AllDayEvent[]; x: number; y: number }>({\n date: null,\n events: [],\n x: 0,\n y: 0,\n });\n const popoverRef = useRef(null);\n const dayPopoverRef = useRef(null);\n\n const [gridDims, setGridDims] = useState<{ cols: number; cell: number }>(() => ({ cols: 12, cell: 12 }));\n\n // Calculate grid dimensions based on container size\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n function updateDims() {\n if (!containerRef.current) return;\n const width = containerRef.current.clientWidth;\n const height = containerRef.current.clientHeight;\n setGridDims(computeSquareGridColumns(days.length, width, height));\n }\n\n // Use ResizeObserver for accurate container measurements\n const resizeObserver = new ResizeObserver(() => {\n updateDims();\n });\n resizeObserver.observe(container);\n updateDims();\n\n return () => resizeObserver.disconnect();\n }, [days.length]);\n\n // Measure cell size after render\n useLayoutEffect(() => {\n const grid = gridRef.current;\n if (!grid) return;\n const firstCell = grid.querySelector('[data-day-cell=\"1\"]');\n if (firstCell) {\n const rect = firstCell.getBoundingClientRect();\n if (rect.width && rect.height) {\n setCellSizePx({ w: rect.width, h: rect.height });\n }\n }\n }, [gridDims.cols, gridDims.cell, year]);\n\n // Close popovers on outside click or escape\n useEffect(() => {\n function onDocMouseDown(e: MouseEvent) {\n if (e.target instanceof Node) {\n if (popover.event && popoverRef.current && !popoverRef.current.contains(e.target)) {\n setPopover({ event: null, x: 0, y: 0 });\n }\n if (dayPopover.date && dayPopoverRef.current && !dayPopoverRef.current.contains(e.target)) {\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n }\n }\n }\n function onKey(e: KeyboardEvent) {\n if (e.key === \"Escape\") {\n setPopover({ event: null, x: 0, y: 0 });\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n }\n }\n document.addEventListener(\"mousedown\", onDocMouseDown);\n document.addEventListener(\"keydown\", onKey);\n return () => {\n document.removeEventListener(\"mousedown\", onDocMouseDown);\n document.removeEventListener(\"keydown\", onKey);\n };\n }, [popover.event, dayPopover.date]);\n\n // Build calendar name map\n const calendarNames = useMemo(() => {\n const map: Record = {};\n for (const cal of calendars) {\n map[cal.id] = cal.name;\n }\n return map;\n }, [calendars]);\n\n // Compute event bars and overflow indicators\n const eventBarsAndOverflow = useMemo(() => {\n const cols = gridDims.cols || 12;\n const gap = 1;\n if (!cols || !cellSizePx.w || !cellSizePx.h) {\n return { bars: null, overflow: new Map() };\n }\n\n type Seg = { row: number; startCol: number; endCol: number; ev: AllDayEvent };\n const rowToSegs = new Map();\n\n for (const ev of events) {\n const startIdx = dayIndexByKey.get(ev.startDate);\n const endIdxExclusive = dayIndexByKey.get(ev.endDate);\n if (startIdx == null || endIdxExclusive == null) continue;\n\n let segStart = startIdx;\n while (segStart < endIdxExclusive) {\n const row = Math.floor(segStart / cols);\n const rowEndExclusive = Math.min(endIdxExclusive, (row + 1) * cols);\n const startCol = segStart % cols;\n const endCol = rowEndExclusive % cols === 0 ? cols : rowEndExclusive % cols;\n const list = rowToSegs.get(row) ?? [];\n list.push({ row, startCol, endCol, ev });\n rowToSegs.set(row, list);\n segStart = rowEndExclusive;\n }\n }\n\n const bars: React.ReactElement[] = [];\n const labelOffset = 16;\n const laneHeight = 16;\n const maxLanes = Math.max(1, Math.floor((cellSizePx.h - labelOffset - 2) / laneHeight));\n\n // Track overflow per day\n const overflow = new Map();\n\n for (const [row, segs] of rowToSegs) {\n segs.sort((a, b) => a.startCol - b.startCol);\n const laneEnds: number[] = [];\n\n for (const seg of segs) {\n let lane = 0;\n while (lane < laneEnds.length && seg.startCol < laneEnds[lane]) {\n lane++;\n }\n\n // Track overflow for each day the segment covers\n if (lane >= maxLanes) {\n for (let col = seg.startCol; col < seg.endCol; col++) {\n const dayIdx = row * cols + col;\n const dayKey = days[dayIdx]?.key;\n if (dayKey) {\n overflow.set(dayKey, (overflow.get(dayKey) || 0) + 1);\n }\n }\n continue;\n }\n\n if (lane === laneEnds.length) laneEnds.push(seg.endCol);\n else laneEnds[lane] = seg.endCol;\n\n const left = seg.startCol * (cellSizePx.w + gap);\n const top = row * (cellSizePx.h + gap) + labelOffset + lane * laneHeight;\n const span = seg.endCol - seg.startCol;\n const width = span * cellSizePx.w + (span - 1) * gap;\n const barKey = `${seg.ev.id}:${row}:${seg.startCol}-${seg.endCol}:${lane}`;\n const bg = seg.ev.calendarId ? calendarColors[seg.ev.calendarId] : \"#94a3b8\";\n\n bars.push(\n {\n e.stopPropagation();\n const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n setPopover({\n event: seg.ev,\n x: rect.left + rect.width / 2,\n y: rect.bottom + 8,\n });\n }}\n >\n \n {seg.ev.summary}\n \n \n );\n }\n }\n return { bars, overflow };\n }, [events, days, dayIndexByKey, gridDims.cols, cellSizePx, calendarColors]);\n\n // Handler for clicking on a day to see all events\n const handleDayClick = (date: Date, key: string, e: React.MouseEvent) => {\n const dayEvents = dateMap.get(key) || [];\n if (dayEvents.length === 0) return;\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n setDayPopover({\n date,\n events: dayEvents,\n x: rect.left + rect.width / 2,\n y: rect.bottom + 8,\n });\n };\n\n return (\n

\n {/* Day grid */}\n \n {days.map(({ key, date }) => {\n const isToday = key === todayKey;\n const isFirstOfMonth = date.getDate() === 1;\n const isSaturday = date.getDay() === 6;\n const isSunday = date.getDay() === 0;\n const overflowCount = eventBarsAndOverflow.overflow.get(key) || 0;\n const hasEvents = (dateMap.get(key)?.length || 0) > 0;\n return (\n handleDayClick(date, key, e)}\n >\n {isFirstOfMonth && (\n

\n {monthShort[date.getMonth()]}\n {showDaysOfWeek && {dayOfWeekShort[date.getDay()]}}\n

\n )}\n

\n \n {!isFirstOfMonth && showDaysOfWeek && (\n {dayOfWeekShort[date.getDay()]}\n )}\n {date.getDate()}\n \n {overflowCount > 0 && (\n +{overflowCount}\n )}\n

\n );\n })}\n

\n\n {/* Event bars overlay */}\n

\n {eventBarsAndOverflow.bars}\n

\n \n\n {/* Event popover */}\n {popover.event && (\n setPopover({ event: null, x: 0, y: 0 })}\n event={popover.event}\n calendarColors={calendarColors}\n calendarNames={calendarNames}\n />\n )}\n\n {/* Day events popover */}\n {dayPopover.date && (\n setDayPopover({ date: null, events: [], x: 0, y: 0 })}\n date={dayPopover.date}\n events={dayPopover.events}\n calendarColors={calendarColors}\n calendarNames={calendarNames}\n onEventClick={(ev, x, y) => {\n setDayPopover({ date: null, events: [], x: 0, y: 0 });\n setPopover({ event: ev, x, y });\n }}\n />\n )}\n \n );\n}\n\nexport default YearCalendar;\n",[],[227,233,267],[227,233],{"_107":276,"_99":277,"_162":278,"_164":228,"_165":147,"_166":279,"_168":169,"_109":280,"_104":167,"_171":185,"_173":281,"_174":22,"_175":-5,"_176":282,"_102":283},"8bd938da-ebd1-11f0-80bd-42dde27851f2","index.html","684dc414-ebb6-11f0-9e31-42dde27851f2",81,["D",1767794567204],"\n\n\n \n \n Jahreskalender\n \n \n \n\n\n

\n \n\n\n",[],[227,277],{"_107":285,"_99":286,"_162":287,"_164":228,"_165":147,"_166":270,"_168":169,"_109":288,"_104":33,"_171":210,"_173":289,"_174":22,"_175":-5,"_176":290,"_102":291},"68488a3a-ebb6-11f0-8732-42dde27851f2","index.tsx","68488ae4-ebb6-11f0-8732-42dde27851f2",["D",1767782911460],"/** @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) {\n createRoot(root).render();\n}\n",[],[227,286],{"_107":293,"_99":294,"_162":295,"_164":228,"_165":147,"_166":296,"_168":169,"_109":297,"_104":298,"_171":185,"_173":299,"_174":22,"_175":-5,"_176":300,"_102":301},"67c93a70-ebd2-11f0-9d43-42dde27851f2","style.css","687bd7be-ebb6-11f0-9691-42dde27851f2",82,["D",1767794936511],13,"/* Year Calendar Styles */\n\n* {\n box-sizing: border-box;\n}\n\n:root {\n --background: #ffffff;\n --foreground: #0a0a0a;\n --muted: #f5f5f5;\n --muted-foreground: #737373;\n --border: #e5e5e5;\n --primary: #3b82f6;\n --card: #ffffff;\n --ring: #3b82f6;\n --saturday-bg: #fafafa;\n --sunday-bg: #f5f5f5;\n --today-bg: #dbeafe;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n margin: 0;\n padding: 0;\n background: var(--background);\n color: var(--foreground);\n overflow: hidden;\n}\n\n/* Full height layout with iOS safe areas */\n#root {\n height: 100vh;\n height: 100dvh; /* Dynamic viewport height for mobile browsers */\n width: 100vw;\n display: flex;\n flex-direction: column;\n}\n\n/* Spin animation */\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.spin {\n animation: spin 1s linear infinite;\n}\n\n/* Header */\n.header {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n padding: 0.25rem 0.5rem;\n border-bottom: 1px solid var(--border);\n}\n\n.header-left,\n.header-right {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.header-right {\n justify-content: flex-end;\n}\n\n.header-center {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n\n.year-display {\n font-weight: 600;\n font-size: 1.125rem;\n min-width: 5ch;\n text-align: center;\n}\n\n/* Buttons */\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n border-radius: 9999px;\n border: 1px solid var(--border);\n background: var(--background);\n color: var(--foreground);\n font-size: 0.875rem;\n cursor: pointer;\n transition: background-color 0.15s;\n}\n\n.btn:hover {\n background: var(--muted);\n}\n\n.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-icon {\n padding: 0.5rem;\n border: none;\n background: transparent;\n}\n\n.btn-ghost {\n border: none;\n background: transparent;\n}\n\n/* Menu button */\n.menu-btn {\n font-size: 1.5rem;\n padding: 0.5rem;\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n/* Calendar Grid Container */\n.calendar-container {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* Year Grid */\n.year-grid {\n display: grid;\n height: 100%;\n width: 100%;\n background: var(--border);\n padding: 1px;\n gap: 1px;\n}\n\n/* Day Cell */\n.day-cell {\n position: relative;\n background: var(--background);\n padding: 4px;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n.day-cell.saturday {\n background: var(--saturday-bg);\n}\n\n.day-cell.sunday {\n background: var(--sunday-bg);\n}\n\n.day-cell.today {\n box-shadow: inset 0 0 0 1px var(--primary);\n}\n\n/* Month label */\n.month-label {\n position: absolute;\n top: 4px;\n left: 4px;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--primary);\n}\n\n/* Day header row (number + overflow) */\n.day-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 2px;\n}\n\n.day-header.has-month {\n margin-left: 24px;\n}\n\n/* Day number */\n.day-number {\n font-size: 10px;\n color: var(--muted-foreground);\n}\n\n.day-number.today {\n color: var(--primary);\n font-weight: 600;\n}\n\n/* Day cell with events - clickable */\n.day-cell.has-events {\n cursor: pointer;\n}\n\n/* Overflow indicator */\n.day-overflow {\n font-size: 8px;\n color: var(--primary);\n font-weight: 600;\n}\n\n/* Day events popover list */\n.day-events-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-height: 300px;\n overflow-y: auto;\n}\n\n.day-event-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.15s;\n}\n\n.day-event-item:hover {\n background: var(--muted);\n}\n\n.day-event-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.day-event-title {\n flex: 1;\n font-size: 0.875rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.day-event-calendar {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n flex-shrink: 0;\n}\n\n/* Event overlay container */\n.events-overlay {\n position: absolute;\n inset: 0;\n padding: 1px;\n pointer-events: none;\n}\n\n/* Event bar */\n.event-bar {\n position: absolute;\n padding: 0 4px;\n pointer-events: auto;\n cursor: pointer;\n}\n\n.event-bar-inner {\n height: 100%;\n border-radius: 2px;\n padding: 0 4px;\n font-size: 10px;\n line-height: 14px;\n color: white;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n/* Event Popover */\n.event-popover {\n position: fixed;\n z-index: 50;\n width: 320px;\n max-width: 90vw;\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: 6px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--border);\n}\n\n.popover-title {\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n.popover-close {\n padding: 0.25rem;\n border: none;\n background: transparent;\n cursor: pointer;\n color: var(--muted-foreground);\n}\n\n.popover-close:hover {\n color: var(--foreground);\n}\n\n.popover-body {\n padding: 0.75rem;\n}\n\n.popover-calendar {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n color: var(--muted-foreground);\n}\n\n.calendar-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.popover-date {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n color: var(--muted-foreground);\n margin-top: 0.5rem;\n}\n\n/* Sidebar */\n.sidebar-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 40;\n}\n\n.sidebar {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 288px;\n max-width: 80vw;\n background: var(--card);\n border-right: 1px solid var(--border);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n z-index: 50;\n display: flex;\n flex-direction: column;\n}\n\n.sidebar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem;\n border-bottom: 1px solid var(--border);\n}\n\n.sidebar-title {\n font-weight: 600;\n}\n\n.sidebar-actions {\n display: flex;\n gap: 0.25rem;\n}\n\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.sidebar-footer {\n padding: 0.75rem;\n border-top: 1px solid var(--border);\n}\n\n/* Calendar list item */\n.calendar-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem;\n border-radius: 4px;\n font-size: 0.875rem;\n}\n\n.calendar-item:hover {\n background: var(--muted);\n}\n\n.calendar-item input[type=\"checkbox\"] {\n accent-color: var(--foreground);\n}\n\n.calendar-item-name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.color-picker-label {\n display: inline-block;\n cursor: pointer;\n flex-shrink: 0;\n position: relative;\n}\n\n.color-picker-swatch {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 1px solid var(--border);\n}\n\n.color-picker-swatch:hover {\n opacity: 0.8;\n}\n\n.color-picker-label input[type=\"color\"] {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.calendar-item-delete {\n padding: 0.25rem;\n border: none;\n background: transparent;\n cursor: pointer;\n color: var(--muted-foreground);\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.calendar-item:hover .calendar-item-delete {\n opacity: 1;\n}\n\n.calendar-item-delete:hover {\n color: #dc2626;\n}\n\n/* Add calendar form */\n.add-calendar-form {\n padding: 0.75rem;\n border-top: 1px solid var(--border);\n}\n\n.add-calendar-form input {\n width: 100%;\n padding: 0.5rem;\n margin-bottom: 0.5rem;\n border: 1px solid var(--border);\n border-radius: 4px;\n font-size: 0.875rem;\n}\n\n.add-calendar-form input:focus {\n outline: none;\n border-color: var(--primary);\n}\n\n.add-calendar-form button {\n width: 100%;\n}\n\n/* Settings section */\n.settings-section {\n padding: 0.75rem;\n border-top: 1px solid var(--border);\n}\n\n.settings-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem;\n border-radius: 4px;\n font-size: 0.875rem;\n cursor: pointer;\n}\n\n.settings-item:hover {\n background: var(--muted);\n}\n\n.last-updated {\n font-size: 0.75rem;\n color: var(--muted-foreground);\n padding: 0.5rem;\n text-align: center;\n}\n\n/* Loading spinner */\n.loading {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.spinner {\n width: 32px;\n height: 32px;\n border: 3px solid var(--border);\n border-top-color: var(--primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n/* View toggle */\n.view-toggle {\n display: flex;\n gap: 0.25rem;\n margin-right: 0.5rem;\n}\n\n.view-toggle .btn.active {\n background: var(--muted);\n}\n\n/* Weekly Calendar */\n.weekly-calendar-container {\n flex: 1;\n position: relative;\n overflow-y: auto;\n}\n\n.weekly-calendar {\n display: grid;\n grid-template-columns: 20px 30px repeat(7, 1fr);\n min-height: 100%;\n}\n\n/* Header row */\n.weekly-header-month,\n.weekly-header-kw,\n.weekly-header-day {\n position: sticky;\n top: 0;\n z-index: 10;\n background: var(--background);\n border-bottom: 1px solid var(--border);\n padding: 0.25rem;\n font-size: 0.75rem;\n font-weight: 600;\n text-align: center;\n}\n\n.weekly-header-day.saturday {\n background: var(--saturday-bg);\n}\n\n.weekly-header-day.sunday {\n background: var(--sunday-bg);\n}\n\n/* Month label */\n.weekly-month-label {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.65rem;\n font-weight: 600;\n background: var(--muted);\n color: var(--muted-foreground);\n border-bottom: 1px solid var(--border);\n padding: 0.25rem 0;\n}\n\n/* Week number */\n.weekly-kw {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.65rem;\n color: var(--muted-foreground);\n background: var(--background);\n border-bottom: 1px solid var(--border);\n}\n\n/* Day cells */\n.weekly-day {\n border-bottom: 1px solid var(--border);\n border-right: 1px solid var(--border);\n padding: 0.25rem;\n min-height: 70px;\n position: relative;\n}\n\n.weekly-day.saturday {\n background: var(--saturday-bg);\n}\n\n.weekly-day.sunday {\n background: var(--sunday-bg);\n}\n\n.weekly-day.today {\n background: var(--today-bg);\n}\n\n.weekly-day.today.saturday,\n.weekly-day.today.sunday {\n background: var(--today-bg);\n}\n\n/* Month boundary borders - stepped line across the week */\n.weekly-day.month-boundary-left {\n border-left: 2px solid var(--foreground);\n}\n\n.weekly-day.month-boundary-bottom {\n border-bottom: 2px solid var(--foreground);\n}\n\n.weekly-day.month-boundary-top {\n border-top: 2px solid var(--foreground);\n}\n\n.weekly-day.other-year {\n color: var(--muted-foreground);\n opacity: 0.5;\n}\n\n.weekly-day-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 2px;\n}\n\n.weekly-day-number {\n font-size: 0.75rem;\n}\n\n.weekly-day-overflow {\n font-size: 0.6rem;\n color: var(--primary);\n font-weight: 600;\n}\n\n.weekly-day.has-events {\n cursor: pointer;\n}\n\n/* Events overlay */\n.weekly-events-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n\n.weekly-event-bar {\n position: absolute;\n border-radius: 2px;\n padding: 0 4px;\n overflow: hidden;\n cursor: pointer;\n pointer-events: auto;\n display: flex;\n align-items: center;\n}\n\n.weekly-event-bar:hover {\n opacity: 0.9;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.weekly-event-title {\n font-size: 0.65rem;\n color: white;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n",[],[227,294],[227],{"_107":304,"_99":305,"_162":306,"_164":-5,"_165":147,"_166":307,"_168":169,"_109":308,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":309,"_102":346},"67e33bc6-ebb6-11f0-9e31-42dde27851f2","shared","67e33c66-ebb6-11f0-9e31-42dde27851f2",4,["D",1767782910795],[310,319,328,337],{"_107":311,"_99":312,"_162":313,"_164":306,"_165":147,"_166":314,"_168":169,"_109":315,"_104":184,"_171":210,"_173":316,"_174":22,"_175":-5,"_176":317,"_102":318},"279143a6-ebc5-11f0-882e-42dde27851f2","auth.ts","68e0717e-ebb6-11f0-a961-42dde27851f2",55,["D",1767789245322],"const JWT_SECRET = Deno.env.get(\"JWT_SECRET\");\nconst SESSION_DURATION_MS = 15 * 60 * 1000; // 15 minutes\n\nif (!JWT_SECRET) {\n throw new Error(\"JWT_SECRET environment variable must be set\");\n}\n\ninterface JWTPayload {\n exp: number;\n iat: number;\n}\n\n/**\n * Create a JWT token using Web Crypto API\n */\nexport async function createJWT(): Promise {\n const header = {\n alg: \"HS256\",\n typ: \"JWT\",\n };\n\n const payload: JWTPayload = {\n iat: Math.floor(Date.now() / 1000),\n exp: Math.floor((Date.now() + SESSION_DURATION_MS) / 1000),\n };\n\n const encodedHeader = btoa(JSON.stringify(header)).replace(/=/g, \"\");\n const encodedPayload = btoa(JSON.stringify(payload)).replace(/=/g, \"\");\n\n const message = `${encodedHeader}.${encodedPayload}`;\n const key = await crypto.subtle.importKey(\n \"raw\",\n new TextEncoder().encode(JWT_SECRET),\n { name: \"HMAC\", hash: \"SHA-256\" },\n false,\n [\"sign\"],\n );\n\n const signature = await crypto.subtle.sign(\n \"HMAC\",\n key,\n new TextEncoder().encode(message),\n );\n\n const encodedSignature = btoa(String.fromCharCode(...new Uint8Array(signature)))\n .replace(/=/g, \"\")\n .replace(/\\+/g, \"-\")\n .replace(/\\//g, \"_\");\n\n return `${message}.${encodedSignature}`;\n}\n\n/**\n * Verify a JWT token and check expiration\n */\nexport async function verifyJWT(token: string): Promise {\n try {\n const [header, payload, signature] = token.split(\".\");\n if (!header || !payload || !signature) return false;\n\n const message = `${header}.${payload}`;\n const key = await crypto.subtle.importKey(\n \"raw\",\n new TextEncoder().encode(JWT_SECRET),\n { name: \"HMAC\", hash: \"SHA-256\" },\n false,\n [\"verify\"],\n );\n\n const signatureData = Uint8Array.from(\n atob(signature.replace(/-/g, \"+\").replace(/_/g, \"/\")),\n (c) => c.charCodeAt(0),\n );\n\n const isValid = await crypto.subtle.verify(\n \"HMAC\",\n key,\n signatureData,\n new TextEncoder().encode(message),\n );\n\n if (!isValid) return false;\n\n const decodedPayload = JSON.parse(atob(payload)) as JWTPayload;\n const now = Math.floor(Date.now() / 1000);\n\n return decodedPayload.exp > now;\n } catch {\n return false;\n }\n}\n\n/**\n * Extract auth token from Cookie header\n */\nexport function getAuthCookie(req: Request): string | null {\n const cookieHeader = req.headers.get(\"Cookie\");\n if (!cookieHeader) return null;\n const match = cookieHeader.match(/auth=([^;]+)/);\n return match ? match[1] : null;\n}\n\n/**\n * Create Set-Cookie header value for auth token\n */\nexport function createAuthCookie(token: string): string {\n return `auth=${token}; HttpOnly; SameSite=Strict; Max-Age=${SESSION_DURATION_MS / 1000}; Path=/`;\n}\n\n/**\n * Create Set-Cookie header value to clear auth cookie\n */\nexport function clearAuthCookie(): string {\n return \"auth=; HttpOnly; SameSite=Strict; Max-Age=0; Path=/\";\n}\n\n/**\n * Check if request is authenticated\n */\nexport async function isAuthenticated(req: Request): Promise {\n const token = getAuthCookie(req);\n if (!token) return false;\n return await verifyJWT(token);\n}\n",[],[305,312],{"_107":320,"_99":321,"_162":322,"_164":306,"_165":147,"_166":323,"_168":169,"_109":324,"_104":167,"_171":210,"_173":325,"_174":22,"_175":-5,"_176":326,"_102":327},"4515a508-ebc9-11f0-a0c0-42dde27851f2","constants.ts","2e9654a8-ebba-11f0-8d5a-42dde27851f2",64,["D",1767791012512],"// Blob storage keys\nexport const BLOB_KEYS = {\n CALENDARS: \"year-calendar-sources\",\n PREFERENCES: \"year-calendar-preferences\",\n CACHED_EVENTS: \"year-calendar-events-cache\",\n} as const;\n\n// UI Text (Austrian German)\nexport const UI_TEXT = {\n // Header\n TODAY: \"Heute\",\n PREVIOUS_YEAR: \"Vorheriges Jahr\",\n NEXT_YEAR: \"Nächstes Jahr\",\n OPEN_MENU: \"Menü öffnen\",\n\n // Sidebar\n CALENDARS: \"Kalender\",\n REFRESH: \"Aktualisieren\",\n REFRESHING: \"Aktualisiere...\",\n NO_CALENDARS: \"Noch keine Kalender. Füge unten einen hinzu.\",\n REMOVE_CALENDAR: \"Kalender entfernen\",\n COLOR_FOR: \"Farbe für\",\n SETTINGS: \"Einstellungen\",\n SHOW_DAYS_OF_WEEK: \"Wochentage anzeigen\",\n CALENDAR_NAME: \"Kalendername\",\n ICS_URL: \"ICS URL (https://...)\",\n ADD_CALENDAR: \"Kalender hinzufügen\",\n ADDING: \"Füge hinzu...\",\n FAILED_TO_ADD: \"Kalender konnte nicht hinzugefügt werden\",\n FAILED_TO_REMOVE: \"Kalender konnte nicht entfernt werden\",\n CONFIRM_REMOVE: (name: string) => `Kalender \"${name}\" entfernen?`,\n SIGN_OUT: \"Abmelden\",\n\n // Page\n PAGE_TITLE: \"Jahreskalender\",\n\n // Login\n LOGIN_TITLE: \"Jahreskalender\",\n PASSWORD: \"Passwort\",\n SIGN_IN: \"Anmelden\",\n INVALID_PASSWORD: \"Ungültiges Passwort\",\n\n // Calendar\n LOADING: \"Laden...\",\n LAST_UPDATED: \"Zuletzt aktualisiert\",\n NEVER: \"Nie\",\n\n // Months (Austrian German)\n MONTHS: [\n \"Jänner\",\n \"Februar\",\n \"März\",\n \"April\",\n \"Mai\",\n \"Juni\",\n \"Juli\",\n \"August\",\n \"September\",\n \"Oktober\",\n \"November\",\n \"Dezember\",\n ],\n\n // Weekdays (short)\n WEEKDAYS_SHORT: [\"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\", \"So\"],\n\n // Weekly view\n CALENDAR_WEEK: \"KW\",\n VIEW_GRID: \"Raster\",\n VIEW_WEEKLY: \"Wochen\",\n} as const;\n",[],[305,321],{"_107":329,"_99":330,"_162":331,"_164":306,"_165":147,"_166":332,"_168":169,"_109":333,"_104":167,"_171":210,"_173":334,"_174":22,"_175":-5,"_176":335,"_102":336},"44eff574-ebc9-11f0-9fc5-42dde27851f2","types.ts","68a9bd00-ebb6-11f0-9782-42dde27851f2",62,["D",1767791012517],"export interface CalendarSource {\n id: string;\n name: string;\n url: string;\n color: string;\n}\n\nexport interface AllDayEvent {\n id: string;\n summary: string;\n startDate: string; // YYYY-MM-DD\n endDate: string; // YYYY-MM-DD (exclusive)\n calendarId: string;\n}\n\nexport interface UserPreferences {\n selectedCalendarIds: string[];\n calendarColors: Record;\n showDaysOfWeek: boolean;\n}\n\nexport interface CachedEvents {\n lastUpdated: string; // ISO date string\n events: AllDayEvent[];\n}\n\nexport type ViewMode = \"grid\" | \"weekly\";\n",[],[305,330],{"_107":338,"_99":339,"_162":340,"_164":306,"_165":147,"_166":341,"_168":169,"_109":342,"_104":194,"_171":210,"_173":343,"_174":22,"_175":-5,"_176":344,"_102":345},"b353d0fa-ebbd-11f0-abbf-42dde27851f2","utils.ts","6902b8a6-ebb6-11f0-bb1f-42dde27851f2",44,["D",1767786043837],"import { blob } from \"https://esm.town/v/std/blob\";\nimport type { AllDayEvent, CalendarSource, CachedEvents } from \"./types.ts\";\nimport { BLOB_KEYS } from \"./constants.ts\";\n\n/**\n * Format a Date as YYYY-MM-DD string\n */\nexport function formatDateKey(date: Date): string {\n const y = date.getFullYear();\n const m = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const d = `${date.getDate()}`.padStart(2, \"0\");\n return `${y}-${m}-${d}`;\n}\n\n/**\n * Parse ICS content and extract events (all-day events and multi-day events with times)\n * Also handles recurring events (RRULE) for yearly events like birthdays\n */\nexport function parseICS(icsContent: string, calendarId: string): AllDayEvent[] {\n const events: AllDayEvent[] = [];\n\n // Unfold lines (ICS spec: lines starting with space/tab are continuations)\n const unfolded = icsContent.replace(/\\r\\n[ \\t]/g, \"\").replace(/\\r/g, \"\");\n const lines = unfolded.split(\"\\n\");\n\n let inEvent = false;\n let currentEvent: Partial & {\n dtstart?: string;\n dtend?: string;\n dtstartRaw?: string;\n dtendRaw?: string;\n isAllDay?: boolean;\n rrule?: string;\n } = {};\n\n for (const line of lines) {\n const trimmedLine = line.trim();\n\n if (trimmedLine === \"BEGIN:VEVENT\") {\n inEvent = true;\n currentEvent = {};\n continue;\n }\n\n if (trimmedLine === \"END:VEVENT\") {\n inEvent = false;\n\n if (currentEvent.summary && currentEvent.dtstart) {\n let startDate = currentEvent.dtstart;\n let endDate: string;\n\n if (currentEvent.isAllDay) {\n // All-day event: use dates as-is\n endDate = currentEvent.dtend || addDays(startDate, 1);\n } else {\n // Event with times: check if it spans multiple days\n endDate = currentEvent.dtend || addDays(startDate, 1);\n\n // For events with times, endDate should be the day AFTER the last day\n // If event ends at any time on a day, that day should be included\n if (currentEvent.dtendRaw && /T\\d{6}/.test(currentEvent.dtendRaw)) {\n // Has end time - add one day to include the end date in display\n endDate = addDays(currentEvent.dtend!, 1);\n }\n\n // Skip single-day events with times (not relevant for year view)\n if (startDate === currentEvent.dtend) {\n currentEvent = {};\n continue;\n }\n }\n\n // Handle recurring events\n if (currentEvent.rrule) {\n const occurrences = expandRecurringEvent(\n currentEvent.id || `${calendarId}-${startDate}-${currentEvent.summary}`,\n currentEvent.summary,\n startDate,\n endDate,\n currentEvent.rrule,\n calendarId\n );\n events.push(...occurrences);\n } else {\n events.push({\n id: currentEvent.id || `${calendarId}-${startDate}-${currentEvent.summary}`,\n summary: currentEvent.summary,\n startDate,\n endDate,\n calendarId,\n });\n }\n }\n\n currentEvent = {};\n continue;\n }\n\n if (!inEvent) continue;\n\n // Parse property\n const colonIndex = trimmedLine.indexOf(\":\");\n if (colonIndex === -1) continue;\n\n const propertyPart = trimmedLine.substring(0, colonIndex);\n const valuePart = trimmedLine.substring(colonIndex + 1);\n\n // Extract property name and parameters\n const semicolonIndex = propertyPart.indexOf(\";\");\n const propertyName = semicolonIndex === -1 ? propertyPart : propertyPart.substring(0, semicolonIndex);\n const params = semicolonIndex === -1 ? \"\" : propertyPart.substring(semicolonIndex + 1);\n\n switch (propertyName) {\n case \"UID\":\n currentEvent.id = `${calendarId}|${valuePart}`;\n break;\n\n case \"SUMMARY\":\n currentEvent.summary = unescapeICS(valuePart);\n break;\n\n case \"DTSTART\":\n // Check if it's an all-day event (VALUE=DATE or no time component)\n if (params.includes(\"VALUE=DATE\") || /^\\d{8}$/.test(valuePart)) {\n currentEvent.isAllDay = true;\n currentEvent.dtstart = parseICSDate(valuePart);\n } else if (/^\\d{8}T\\d{6}/.test(valuePart)) {\n // Has time component - still parse the date part\n currentEvent.isAllDay = false;\n currentEvent.dtstart = parseICSDate(valuePart);\n currentEvent.dtstartRaw = valuePart;\n }\n break;\n\n case \"DTEND\":\n if (params.includes(\"VALUE=DATE\") || /^\\d{8}$/.test(valuePart)) {\n currentEvent.dtend = parseICSDate(valuePart);\n } else if (/^\\d{8}T\\d{6}/.test(valuePart)) {\n // Has time component - still parse the date part\n currentEvent.dtend = parseICSDate(valuePart);\n currentEvent.dtendRaw = valuePart;\n }\n break;\n\n case \"RRULE\":\n currentEvent.rrule = valuePart;\n break;\n }\n }\n\n return events;\n}\n\n/**\n * Expand a recurring event into individual occurrences\n * Currently supports YEARLY and MONTHLY frequencies\n */\nfunction expandRecurringEvent(\n baseId: string,\n summary: string,\n originalStart: string,\n originalEnd: string,\n rrule: string,\n calendarId: string\n): AllDayEvent[] {\n const events: AllDayEvent[] = [];\n\n // Parse RRULE components\n const parts: Record = {};\n for (const part of rrule.split(\";\")) {\n const [key, value] = part.split(\"=\");\n if (key && value) {\n parts[key] = value;\n }\n }\n\n const freq = parts[\"FREQ\"];\n const count = parts[\"COUNT\"] ? parseInt(parts[\"COUNT\"], 10) : undefined;\n const until = parts[\"UNTIL\"] ? parseICSDate(parts[\"UNTIL\"]) : undefined;\n const interval = parts[\"INTERVAL\"] ? parseInt(parts[\"INTERVAL\"], 10) : 1;\n\n // Calculate duration in days\n const startD = new Date(originalStart + \"T00:00:00Z\");\n const endD = new Date(originalEnd + \"T00:00:00Z\");\n const durationDays = Math.round((endD.getTime() - startD.getTime()) / (24 * 60 * 60 * 1000));\n\n // Generate occurrences for a reasonable range (5 years back, 5 years forward)\n const currentYear = new Date().getFullYear();\n const rangeStart = currentYear - 5;\n const rangeEnd = currentYear + 5;\n\n const originalMonth = startD.getUTCMonth();\n const originalDay = startD.getUTCDate();\n\n let occurrenceCount = 0;\n const maxOccurrences = count || 100; // Limit to prevent infinite loops\n\n if (freq === \"YEARLY\") {\n for (let year = rangeStart; year <= rangeEnd && occurrenceCount < maxOccurrences; year++) {\n // Check if this year is on the interval\n const yearDiff = year - startD.getUTCFullYear();\n if (yearDiff < 0 || yearDiff % interval !== 0) continue;\n\n const occurrenceStart = `${year}-${String(originalMonth + 1).padStart(2, \"0\")}-${String(originalDay).padStart(2, \"0\")}`;\n const occurrenceEnd = addDays(occurrenceStart, durationDays);\n\n // Check UNTIL constraint\n if (until && occurrenceStart > until) break;\n\n events.push({\n id: `${baseId}|${occurrenceStart}`,\n summary,\n startDate: occurrenceStart,\n endDate: occurrenceEnd,\n calendarId,\n });\n occurrenceCount++;\n }\n } else if (freq === \"MONTHLY\") {\n for (let year = rangeStart; year <= rangeEnd && occurrenceCount < maxOccurrences; year++) {\n for (let month = 0; month < 12 && occurrenceCount < maxOccurrences; month++) {\n const monthsSinceStart = (year - startD.getUTCFullYear()) * 12 + (month - originalMonth);\n if (monthsSinceStart < 0 || monthsSinceStart % interval !== 0) continue;\n\n // Handle days that don't exist in some months (e.g., Jan 31 -> Feb 28)\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const day = Math.min(originalDay, daysInMonth);\n\n const occurrenceStart = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(day).padStart(2, \"0\")}`;\n const occurrenceEnd = addDays(occurrenceStart, durationDays);\n\n // Check UNTIL constraint\n if (until && occurrenceStart > until) break;\n\n events.push({\n id: `${baseId}|${occurrenceStart}`,\n summary,\n startDate: occurrenceStart,\n endDate: occurrenceEnd,\n calendarId,\n });\n occurrenceCount++;\n }\n }\n } else if (freq === \"WEEKLY\") {\n // For weekly, generate occurrences\n const msPerWeek = 7 * 24 * 60 * 60 * 1000 * interval;\n let current = new Date(startD);\n const rangeStartDate = new Date(rangeStart, 0, 1);\n const rangeEndDate = new Date(rangeEnd + 1, 0, 1);\n\n while (current < rangeEndDate && occurrenceCount < maxOccurrences) {\n if (current >= rangeStartDate) {\n const occurrenceStart = formatDateKey(new Date(current.getUTCFullYear(), current.getUTCMonth(), current.getUTCDate()));\n const occurrenceEnd = addDays(occurrenceStart, durationDays);\n\n // Check UNTIL constraint\n if (until && occurrenceStart > until) break;\n\n events.push({\n id: `${baseId}|${occurrenceStart}`,\n summary,\n startDate: occurrenceStart,\n endDate: occurrenceEnd,\n calendarId,\n });\n occurrenceCount++;\n }\n current = new Date(current.getTime() + msPerWeek);\n }\n } else {\n // For unsupported frequencies, just include the original event\n events.push({\n id: baseId,\n summary,\n startDate: originalStart,\n endDate: originalEnd,\n calendarId,\n });\n }\n\n return events;\n}\n\n/**\n * Parse ICS date format (YYYYMMDD) to YYYY-MM-DD\n */\nfunction parseICSDate(value: string): string {\n // Handle both YYYYMMDD and YYYYMMDDTHHMMSS formats\n const dateStr = value.substring(0, 8);\n const year = dateStr.substring(0, 4);\n const month = dateStr.substring(4, 6);\n const day = dateStr.substring(6, 8);\n return `${year}-${month}-${day}`;\n}\n\n/**\n * Add days to a date string (YYYY-MM-DD)\n */\nfunction addDays(dateStr: string, days: number): string {\n const date = new Date(dateStr + \"T00:00:00Z\");\n date.setUTCDate(date.getUTCDate() + days);\n return formatDateKey(new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));\n}\n\n/**\n * Unescape ICS text values\n */\nfunction unescapeICS(value: string): string {\n return value\n .replace(/\\\\n/g, \"\\n\")\n .replace(/\\\\,/g, \",\")\n .replace(/\\\\;/g, \";\")\n .replace(/\\\\\\\\/g, \"\\\\\");\n}\n\n/**\n * Generate a random color for a calendar\n */\nexport function generateRandomColor(): string {\n const colors = [\n \"#3b82f6\", // blue\n \"#10b981\", // emerald\n \"#f59e0b\", // amber\n \"#ef4444\", // red\n \"#8b5cf6\", // violet\n \"#ec4899\", // pink\n \"#06b6d4\", // cyan\n \"#84cc16\", // lime\n \"#f97316\", // orange\n \"#6366f1\", // indigo\n ];\n return colors[Math.floor(Math.random() * colors.length)];\n}\n\n/**\n * Generate a unique ID\n */\nexport function generateId(): string {\n return crypto.randomUUID();\n}\n\n/**\n * Fetch and parse events from all calendars\n */\nexport async function fetchAllEvents(\n calendars: { id: string; name: string; url: string }[]\n): Promise {\n const fetchPromises = calendars.map(async (calendar) => {\n try {\n // Convert webcal:// to https://\n let fetchUrl = calendar.url;\n if (fetchUrl.startsWith(\"webcal://\")) {\n fetchUrl = fetchUrl.replace(\"webcal://\", \"https://\");\n }\n\n const response = await fetch(fetchUrl, {\n headers: {\n \"User-Agent\": \"Year-Calendar/1.0\",\n },\n });\n\n if (!response.ok) {\n console.error(`Failed to fetch ${calendar.name}: ${response.status}`);\n return [];\n }\n\n const icsContent = await response.text();\n return parseICS(icsContent, calendar.id);\n } catch (error) {\n console.error(`Error fetching ${calendar.name}:`, error);\n return [];\n }\n });\n\n const eventsArrays = await Promise.all(fetchPromises);\n const allEvents = eventsArrays.flat();\n\n // Sort events by start date\n allEvents.sort((a, b) => a.startDate.localeCompare(b.startDate));\n\n return allEvents;\n}\n\n/**\n * Refresh the events cache by fetching all ICS calendars\n * Used by both the cron job and the manual refresh endpoint\n */\nexport async function refreshEventsCache(): Promise<{ eventCount: number; lastUpdated: string }> {\n // Get all calendars\n let calendars: CalendarSource[] = [];\n try {\n const data = await blob.getJSON(BLOB_KEYS.CALENDARS);\n calendars = (data as CalendarSource[]) || [];\n } catch {\n calendars = [];\n }\n\n // Fetch all events (empty array if no calendars)\n const events = calendars.length > 0 ? await fetchAllEvents(calendars) : [];\n\n // Save to cache\n const cache: CachedEvents = {\n lastUpdated: new Date().toISOString(),\n events,\n };\n\n await blob.setJSON(BLOB_KEYS.CACHED_EVENTS, cache);\n\n console.log(`Event refresh complete. Cached ${events.length} events from ${calendars.length} calendars.`);\n\n return { eventCount: events.length, lastUpdated: cache.lastUpdated };\n}\n",[],[305,339],[305],{"_107":348,"_99":349,"_162":350,"_164":-5,"_165":147,"_166":351,"_168":169,"_109":352,"_104":33,"_171":185,"_173":353,"_174":22,"_175":-5,"_176":354,"_102":355},"dad2c566-ebc5-11f0-be84-42dde27851f2",".gitignore","dad2c638-ebc5-11f0-be84-42dde27851f2",56,["D",1767789546076],"# Val.town\n.vt/\n\n# IDE\n.vscode/\n.idea/\n\n# Claude\n.claude/\n\n# OS\n.DS_Store\n",[],[349],{"_107":357,"_99":358,"_162":359,"_164":-5,"_165":147,"_166":360,"_168":169,"_109":361,"_104":33,"_171":185,"_173":362,"_174":22,"_175":-5,"_176":363,"_102":364},"68c91470-ebb6-11f0-9782-42dde27851f2",".vtignore","68c9151a-ebb6-11f0-9782-42dde27851f2",20,["D",1767782912299],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[358],{"_107":366,"_99":367,"_162":368,"_164":-5,"_165":147,"_166":369,"_168":169,"_109":370,"_104":33,"_171":185,"_173":371,"_174":22,"_175":-5,"_176":372,"_102":373},"68b73a48-ebb6-11f0-9782-42dde27851f2","AGENTS.md","68b73b06-ebb6-11f0-9782-42dde27851f2",19,["D",1767782912183],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[367],{"_107":375,"_99":376,"_162":377,"_164":-5,"_165":147,"_166":378,"_168":169,"_109":379,"_104":184,"_171":185,"_173":380,"_174":22,"_175":-5,"_176":381,"_102":382},"186ed9f4-ebd1-11f0-82ce-42dde27851f2","README.md","dadeb10a-ebc5-11f0-83e8-42dde27851f2",78,["D",1767794373896],"# Jahreskalender\n\nEin Jahreskalender für Val.town, der Events aus ICS-Kalendern anzeigt.\n\n## Features\n\n- **Zwei Ansichten**: Jahres-Grid und Wochenansicht (umschaltbar)\n- Unterstützung für ICS/iCal Kalender-Feeds\n- Wiederkehrende Events (RRULE: YEARLY, MONTHLY, WEEKLY)\n- Mehrtägige Events als Balken dargestellt\n- Overflow-Indikator (+N) wenn mehr Events als Platz vorhanden\n- Klick auf Tag zeigt alle Events des Tages\n- Unterschiedliche Hintergrundfarben für Samstag/Sonntag\n- JWT-basierte Authentifizierung\n- Caching der Events in Val.town Blob Storage\n- Österreichisches Deutsch (de-AT)\n\n## Technologie\n\n- **Backend**: Hono Framework auf Val.town\n- **Frontend**: React 18\n- **Storage**: Val.town Blob Storage\n- **Auth**: JWT mit HttpOnly Cookies (15 Min. Session)\n\n## Umgebungsvariablen\n\n```\nAUTH_PASSWORD=\nJWT_SECRET=\n```\n\n## Projektstruktur\n\n```\n├── main.http.ts # Hono App Entry Point\n├── refresh.cron.ts # Cron Job für Event-Cache\n├── backend/\n│ └── routes/\n│ ├── calendars.ts # Kalender-Verwaltung API\n│ └── events.ts # Events API\n├── frontend/\n│ ├── index.html\n│ ├── index.tsx\n│ ├── style.css\n│ └── components/\n│ ├── App.tsx\n│ ├── Sidebar.tsx\n│ ├── WeeklyCalendar.tsx\n│ └── YearCalendar.tsx\n└── shared/\n ├── auth.ts # JWT Auth\n ├── constants.ts # UI Text & Config\n ├── types.ts # TypeScript Types\n └── utils.ts # ICS Parser & Utilities\n```\n\n## Deployment\n\nDas Projekt läuft auf [Val.town](https://val.town). Push mit:\n\n```bash\nvt push\n```\n",[],[376],{"_107":384,"_99":385,"_162":386,"_164":-5,"_165":147,"_166":387,"_168":169,"_109":388,"_104":33,"_171":185,"_173":389,"_174":22,"_175":-5,"_176":390,"_102":391},"688cd78a-ebb6-11f0-bb1f-42dde27851f2","deno.json","688cd820-ebb6-11f0-bb1f-42dde27851f2",14,["D",1767782911906],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[385],{"_107":393,"_99":103,"_162":394,"_164":-5,"_165":147,"_166":395,"_168":169,"_109":396,"_104":167,"_171":397,"_173":398,"_174":22,"_175":399,"_176":400,"_102":401},"fec95352-ebc2-11f0-85d1-42dde27851f2","687f8486-ebb6-11f0-9260-42dde27851f2",49,["D",1767788317915],"http","import { Hono } from \"https://esm.sh/hono@4\";\nimport type { Context, Next } from \"https://esm.sh/hono@4\";\nimport { serveFile, readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport {\n createJWT,\n createAuthCookie,\n clearAuthCookie,\n isAuthenticated,\n} from \"./shared/auth.ts\";\nimport { UI_TEXT } from \"./shared/constants.ts\";\nimport calendarsRoutes from \"./backend/routes/calendars.ts\";\nimport eventsRoutes from \"./backend/routes/events.ts\";\n\nconst AUTH_PASSWORD = Deno.env.get(\"AUTH_PASSWORD\");\n\nif (!AUTH_PASSWORD) {\n throw new Error(\"AUTH_PASSWORD environment variable must be set\");\n}\n\nconst app = new Hono();\n\n// Re-throw errors to see full stack traces\napp.onError((err: Error, _c: Context) => {\n throw err;\n});\n\n// ============== Auth Routes (no auth required) ==============\n\n// Login page\napp.get(\"/login\", async (c: Context) => {\n // If already authenticated, redirect to home\n if (await isAuthenticated(c.req.raw)) {\n return new Response(null, {\n status: 302,\n headers: { Location: \"/\" },\n });\n }\n\n const error = c.req.query(\"error\");\n const html = `\n \n \n \n \n \n ${UI_TEXT.LOGIN_TITLE}\n \n \n \n \n \n \n \n `;\n return c.html(html);\n});\n\n// Login POST\napp.post(\"/login\", async (c: Context) => {\n const formData = await c.req.formData();\n const password = formData.get(\"password\");\n\n if (password === AUTH_PASSWORD) {\n const token = await createJWT();\n return new Response(null, {\n status: 302,\n headers: {\n Location: \"/\",\n \"Set-Cookie\": createAuthCookie(token),\n },\n });\n } else {\n return new Response(null, {\n status: 302,\n headers: { Location: \"/login?error=1\" },\n });\n }\n});\n\n// Logout\napp.get(\"/logout\", (_c: Context) => {\n return new Response(null, {\n status: 302,\n headers: {\n Location: \"/login\",\n \"Set-Cookie\": clearAuthCookie(),\n },\n });\n});\n\n// Auth check endpoint (for frontend)\napp.get(\"/api/auth/check\", async (c: Context) => {\n const authenticated = await isAuthenticated(c.req.raw);\n return c.json({ authenticated });\n});\n\n// ============== Protected Routes ==============\n\n// Auth middleware for API routes\napp.use(\"/api/*\", async (c: Context, next: Next) => {\n // Skip auth check for /api/auth/check\n if (c.req.path === \"/api/auth/check\") {\n return next();\n }\n\n const authenticated = await isAuthenticated(c.req.raw);\n if (!authenticated) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n return next();\n});\n\n// Mount API routes\napp.route(\"/api/calendars\", calendarsRoutes);\napp.route(\"/api/events\", eventsRoutes);\n\n// ============== Static Files ==============\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c: Context) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c: Context) => serveFile(c.req.path, import.meta.url));\n\n// Main page - serve index.html (with auth check)\napp.get(\"/\", async (c: Context) => {\n const authenticated = await isAuthenticated(c.req.raw);\n if (!authenticated) {\n return new Response(null, {\n status: 302,\n headers: { Location: \"/login\" },\n });\n }\n\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Export for Val.town\nexport default app.fetch;\n","year-calender",[],[103],{"_107":403,"_99":404,"_162":405,"_164":-5,"_165":147,"_166":406,"_168":169,"_109":407,"_104":184,"_171":408,"_173":409,"_174":22,"_175":-5,"_176":410,"_102":411},"0abfcf72-ebbb-11f0-b60a-42dde27851f2","refresh.cron.ts","e7ab0b82-ebba-11f0-a23c-42dde27851f2",43,["D",1767784902017],"interval","import { refreshEventsCache } from \"./shared/utils.ts\";\n\n/**\n * Cron job to refresh events from all ICS calendars and cache them.\n * Configure the interval in Val.town UI.\n */\nexport default async function () {\n await refreshEventsCache();\n}\n",[],[404],"files",[159,178,190,197,204,214,225,231,238,247,256,265,275,284,292,303,310,319,328,337,347,356,365,374,383,392,402],"counts",{"_416":33,"_417":184,"_418":33,"_419":420,"_423":424},"pulls","branches","forks","envVars",{"_421":167,"_422":33},"count","emptyCount","connections",{"_421":33,"_425":33},"unfilledCount","contents",[],{"_107":393,"_99":103,"_162":394,"_164":-5,"_165":147,"_166":395,"_168":169,"_109":429,"_104":167,"_171":397,"_173":398,"_174":22,"_175":399,"_102":430},["D",1767788317915],[103],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":45,"_104":-7,"_102":103,"_105":439,"_157":444,"_412":553,"_185":554,"_426":557,"_558":-5,"_559":-5,"_560":-5,"_561":-5,"_562":563,"_419":-5},{"_107":108,"_99":100,"_109":440,"_111":-5,"_112":22,"_113":114,"_115":76,"_116":-5,"_14":117,"_118":-5,"_119":22,"_120":-5,"_121":-5,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":441,"_139":442,"_144":443,"_156":22},["D",1767780427065],{"_97":98,"_137":138},{"_97":98,"_141":138,"_14":117,"_142":143},{"_104":146,"_99":45,"_107":147,"_148":108,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":100,"_155":98},[445,453,469,505,525,529,533,537,541,545,549],{"_107":160,"_99":161,"_162":163,"_164":-5,"_165":147,"_166":167,"_168":169,"_109":446,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":447,"_102":452},["D",1767782910334],[448],{"_107":179,"_99":180,"_162":181,"_164":163,"_165":147,"_166":182,"_168":169,"_109":449,"_104":184,"_171":185,"_173":186,"_174":22,"_175":-5,"_176":450,"_102":451},["D",1767783845595],[],[161,180],[161],{"_107":191,"_99":192,"_162":193,"_164":-5,"_165":147,"_166":194,"_168":169,"_109":454,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":455,"_102":468},["D",1767782910565],[456],{"_107":198,"_99":199,"_162":200,"_164":193,"_165":147,"_166":201,"_168":169,"_109":457,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":458,"_102":467},["D",1767782911195],[459,463],{"_107":205,"_99":206,"_162":207,"_164":200,"_165":147,"_166":208,"_168":169,"_109":460,"_104":167,"_171":210,"_173":211,"_174":22,"_175":-5,"_176":461,"_102":462},["D",1767784532852],[],[192,199,206],{"_107":215,"_99":216,"_162":217,"_164":200,"_165":147,"_166":218,"_168":169,"_109":464,"_104":194,"_171":210,"_173":220,"_174":22,"_175":-5,"_176":465,"_102":466},["D",1767784843126],[],[192,199,216],[192,199],[192],{"_107":226,"_99":227,"_162":228,"_164":-5,"_165":147,"_166":184,"_168":169,"_109":470,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":471,"_102":504},["D",1767782909907],[472,492,496,500],{"_107":232,"_99":233,"_162":234,"_164":228,"_165":147,"_166":235,"_168":169,"_109":473,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":474,"_102":491},["D",1767782910998],[475,479,483,487],{"_107":239,"_99":240,"_162":241,"_164":234,"_165":147,"_166":242,"_168":169,"_109":476,"_104":194,"_171":210,"_173":244,"_174":22,"_175":-5,"_176":477,"_102":478},["D",1767791012505],[],[227,233,240],{"_107":248,"_99":249,"_162":250,"_164":234,"_165":147,"_166":251,"_168":169,"_109":480,"_104":235,"_171":210,"_173":253,"_174":22,"_175":-5,"_176":481,"_102":482},["D",1767789546084],[],[227,233,249],{"_107":257,"_99":258,"_162":259,"_164":234,"_165":147,"_166":260,"_168":169,"_109":484,"_104":235,"_171":210,"_173":262,"_174":22,"_175":-5,"_176":485,"_102":486},["D",1767794373835],[],[227,233,258],{"_107":266,"_99":267,"_162":268,"_164":234,"_165":147,"_166":146,"_168":169,"_109":488,"_104":270,"_171":210,"_173":271,"_174":22,"_175":-5,"_176":489,"_102":490},["D",1767794936514],[],[227,233,267],[227,233],{"_107":276,"_99":277,"_162":278,"_164":228,"_165":147,"_166":279,"_168":169,"_109":493,"_104":167,"_171":185,"_173":281,"_174":22,"_175":-5,"_176":494,"_102":495},["D",1767794567204],[],[227,277],{"_107":285,"_99":286,"_162":287,"_164":228,"_165":147,"_166":270,"_168":169,"_109":497,"_104":33,"_171":210,"_173":289,"_174":22,"_175":-5,"_176":498,"_102":499},["D",1767782911460],[],[227,286],{"_107":293,"_99":294,"_162":295,"_164":228,"_165":147,"_166":296,"_168":169,"_109":501,"_104":298,"_171":185,"_173":299,"_174":22,"_175":-5,"_176":502,"_102":503},["D",1767794936511],[],[227,294],[227],{"_107":304,"_99":305,"_162":306,"_164":-5,"_165":147,"_166":307,"_168":169,"_109":506,"_104":33,"_171":172,"_173":-5,"_174":22,"_175":-5,"_176":507,"_102":524},["D",1767782910795],[508,512,516,520],{"_107":311,"_99":312,"_162":313,"_164":306,"_165":147,"_166":314,"_168":169,"_109":509,"_104":184,"_171":210,"_173":316,"_174":22,"_175":-5,"_176":510,"_102":511},["D",1767789245322],[],[305,312],{"_107":320,"_99":321,"_162":322,"_164":306,"_165":147,"_166":323,"_168":169,"_109":513,"_104":167,"_171":210,"_173":325,"_174":22,"_175":-5,"_176":514,"_102":515},["D",1767791012512],[],[305,321],{"_107":329,"_99":330,"_162":331,"_164":306,"_165":147,"_166":332,"_168":169,"_109":517,"_104":167,"_171":210,"_173":334,"_174":22,"_175":-5,"_176":518,"_102":519},["D",1767791012517],[],[305,330],{"_107":338,"_99":339,"_162":340,"_164":306,"_165":147,"_166":341,"_168":169,"_109":521,"_104":194,"_171":210,"_173":343,"_174":22,"_175":-5,"_176":522,"_102":523},["D",1767786043837],[],[305,339],[305],{"_107":348,"_99":349,"_162":350,"_164":-5,"_165":147,"_166":351,"_168":169,"_109":526,"_104":33,"_171":185,"_173":353,"_174":22,"_175":-5,"_176":527,"_102":528},["D",1767789546076],[],[349],{"_107":357,"_99":358,"_162":359,"_164":-5,"_165":147,"_166":360,"_168":169,"_109":530,"_104":33,"_171":185,"_173":362,"_174":22,"_175":-5,"_176":531,"_102":532},["D",1767782912299],[],[358],{"_107":366,"_99":367,"_162":368,"_164":-5,"_165":147,"_166":369,"_168":169,"_109":534,"_104":33,"_171":185,"_173":371,"_174":22,"_175":-5,"_176":535,"_102":536},["D",1767782912183],[],[367],{"_107":375,"_99":376,"_162":377,"_164":-5,"_165":147,"_166":378,"_168":169,"_109":538,"_104":184,"_171":185,"_173":380,"_174":22,"_175":-5,"_176":539,"_102":540},["D",1767794373896],[],[376],{"_107":384,"_99":385,"_162":386,"_164":-5,"_165":147,"_166":387,"_168":169,"_109":542,"_104":33,"_171":185,"_173":389,"_174":22,"_175":-5,"_176":543,"_102":544},["D",1767782911906],[],[385],{"_107":393,"_99":103,"_162":394,"_164":-5,"_165":147,"_166":395,"_168":169,"_109":546,"_104":167,"_171":397,"_173":398,"_174":22,"_175":399,"_176":547,"_102":548},["D",1767788317915],[],[103],{"_107":403,"_99":404,"_162":405,"_164":-5,"_165":147,"_166":406,"_168":169,"_109":550,"_104":184,"_171":408,"_173":409,"_174":22,"_175":-5,"_176":551,"_102":552},["D",1767784902017],[],[404],[445,448,453,456,459,463,469,472,475,479,483,487,492,496,500,505,508,512,516,520,525,529,533,537,541,545,549],{"_107":393,"_99":103,"_162":394,"_164":-5,"_165":147,"_166":395,"_168":169,"_109":555,"_104":167,"_171":397,"_173":398,"_174":22,"_175":399,"_102":556},["D",1767788317915],[103],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

dervondenbergen

jahreskalender