@anymux/ui-kit 0.1.0

package/dist/calendar-DSlrbHoj.js

@@ -0,0 +1,761 @@
+import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { ChevronLeft, ChevronRight, Clock, Loader2, MapPin } from "lucide-react";
+import { BrowserError } from "@anymux/ui/components/browser-error";
+import { flow, makeAutoObservable } from "mobx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/calendar/CalendarModel.ts
+var CalendarModel = class {
+	constructor(provider) {
+		this.provider = provider;
+		this.events = [];
+		this.calendars = [];
+		this.currentDate = new Date();
+		this.viewMode = "month";
+		this.selectedEvent = null;
+		this.loading = false;
+		this.error = null;
+		this.loadEvents = flow(function* () {
+			this.loading = true;
+			this.error = null;
+			try {
+				const { start, end } = this.visibleDateRange;
+				const [events, calendars] = yield Promise.all([this.provider.getEventsByRange(start, end), this.provider.getCalendars()]);
+				this.events = events;
+				this.calendars = calendars;
+			} catch (err) {
+				this.error = err?.message || "Failed to load calendar events";
+			} finally {
+				this.loading = false;
+			}
+		});
+		this.createEvent = flow(function* (event) {
+			const created = yield this.provider.createItem(event);
+			this.events.push(created);
+			return created;
+		});
+		this.deleteEvent = flow(function* (id) {
+			yield this.provider.deleteItem(id);
+			this.events = this.events.filter((e) => e.id !== id);
+			if (this.selectedEvent?.id === id) this.selectedEvent = null;
+		});
+		makeAutoObservable(this);
+	}
+	get visibleDateRange() {
+		const d = this.currentDate;
+		switch (this.viewMode) {
+			case "month": {
+				const start = new Date(d.getFullYear(), d.getMonth(), 1);
+				start.setDate(start.getDate() - start.getDay());
+				const end = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+				end.setDate(end.getDate() + (6 - end.getDay()));
+				return {
+					start,
+					end
+				};
+			}
+			case "week": {
+				const start = new Date(d);
+				start.setDate(d.getDate() - d.getDay());
+				start.setHours(0, 0, 0, 0);
+				const end = new Date(start);
+				end.setDate(start.getDate() + 6);
+				end.setHours(23, 59, 59, 999);
+				return {
+					start,
+					end
+				};
+			}
+			case "day": {
+				const start = new Date(d);
+				start.setHours(0, 0, 0, 0);
+				const end = new Date(d);
+				end.setHours(23, 59, 59, 999);
+				return {
+					start,
+					end
+				};
+			}
+			case "agenda": {
+				const start = new Date(d);
+				start.setHours(0, 0, 0, 0);
+				const end = new Date(d);
+				end.setDate(end.getDate() + 30);
+				return {
+					start,
+					end
+				};
+			}
+		}
+	}
+	get eventsForCurrentView() {
+		const { start, end } = this.visibleDateRange;
+		return this.events.filter((e) => e.endDate >= start && e.startDate <= end);
+	}
+	get eventsByDay() {
+		const map = new Map();
+		for (const event of this.eventsForCurrentView) {
+			const key = event.startDate.toISOString().slice(0, 10);
+			const list = map.get(key) ?? [];
+			list.push(event);
+			map.set(key, list);
+		}
+		return map;
+	}
+	selectEvent(event) {
+		this.selectedEvent = event;
+	}
+	setDate(date) {
+		this.currentDate = date;
+		this.loadEvents();
+	}
+	setViewMode(mode) {
+		this.viewMode = mode;
+		this.loadEvents();
+	}
+	navigateForward() {
+		const d = new Date(this.currentDate);
+		switch (this.viewMode) {
+			case "month":
+				d.setMonth(d.getMonth() + 1);
+				break;
+			case "week":
+				d.setDate(d.getDate() + 7);
+				break;
+			case "day":
+				d.setDate(d.getDate() + 1);
+				break;
+			case "agenda":
+				d.setDate(d.getDate() + 30);
+				break;
+		}
+		this.setDate(d);
+	}
+	navigateBack() {
+		const d = new Date(this.currentDate);
+		switch (this.viewMode) {
+			case "month":
+				d.setMonth(d.getMonth() - 1);
+				break;
+			case "week":
+				d.setDate(d.getDate() - 7);
+				break;
+			case "day":
+				d.setDate(d.getDate() - 1);
+				break;
+			case "agenda":
+				d.setDate(d.getDate() - 30);
+				break;
+		}
+		this.setDate(d);
+	}
+	today() {
+		this.setDate(new Date());
+	}
+};
+
+//#endregion
+//#region src/calendar/EventCard.tsx
+const formatTime = (d) => d.toLocaleTimeString([], {
+	hour: "2-digit",
+	minute: "2-digit"
+});
+const EventCard = ({ event, compact = false, onClick, className = "" }) => {
+	const color = event.color ?? "#3b82f6";
+	if (compact) return /* @__PURE__ */ jsx("button", {
+		onClick,
+		className: `text-left text-xs px-1.5 py-0.5 rounded truncate w-full hover:opacity-80 transition-opacity ${className}`,
+		style: {
+			backgroundColor: `${color}20`,
+			color,
+			borderLeft: `2px solid ${color}`
+		},
+		title: event.title,
+		children: event.title
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		onClick,
+		className: `text-left w-full p-3 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow ${className}`,
+		style: {
+			borderLeftWidth: "3px",
+			borderLeftColor: color
+		},
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm font-medium text-gray-900 truncate",
+			title: event.title,
+			children: event.title
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-1 flex items-center gap-3 text-xs text-gray-500",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx(Clock, { size: 12 }), event.allDay ? "All day" : `${formatTime(event.startDate)} - ${formatTime(event.endDate)}`]
+			}), event.location && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx(MapPin, { size: 12 }), event.location]
+			})]
+		})]
+	});
+};
+
+//#endregion
+//#region src/calendar/MonthView.tsx
+const DAYS$1 = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday"
+];
+const MonthView = observer(({ model, className = "" }) => {
+	const d = model.currentDate;
+	const year = d.getFullYear();
+	const month = d.getMonth();
+	const today = new Date();
+	const firstDay = new Date(year, month, 1).getDay();
+	const daysInMonth = new Date(year, month + 1, 0).getDate();
+	const weeks = [];
+	let week = [];
+	for (let i = 0; i < firstDay; i++) week.push(null);
+	for (let day = 1; day <= daysInMonth; day++) {
+		week.push(day);
+		if (week.length === 7) {
+			weeks.push(week);
+			week = [];
+		}
+	}
+	if (week.length > 0) {
+		while (week.length < 7) week.push(null);
+		weeks.push(week);
+	}
+	const isToday = (day) => day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col h-full ${className}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-7 border-b border-gray-200",
+			children: DAYS$1.map((day) => /* @__PURE__ */ jsx("div", {
+				className: "px-2 py-2 text-xs font-medium text-gray-500 text-center",
+				children: day.slice(0, 3)
+			}, day))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 grid grid-rows-[repeat(auto-fill,1fr)]",
+			children: weeks.map((week$1, wi) => /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-7 border-b border-gray-100 min-h-[80px]",
+				children: week$1.map((day, di) => {
+					const dateKey = day ? `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}` : null;
+					const events = dateKey ? model.eventsByDay.get(dateKey) ?? [] : [];
+					return /* @__PURE__ */ jsx("div", {
+						className: `border-r border-gray-100 p-1 ${day === null ? "bg-gray-50" : ""}`,
+						children: day !== null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							className: `text-xs mb-0.5 w-6 h-6 flex items-center justify-center rounded-full ${isToday(day) ? "bg-blue-500 text-white font-bold" : "text-gray-700"}`,
+							children: day
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "space-y-0.5",
+							children: [events.slice(0, 3).map((ev) => /* @__PURE__ */ jsx(EventCard, {
+								event: ev,
+								compact: true,
+								onClick: () => model.selectEvent(ev)
+							}, ev.id)), events.length > 3 && /* @__PURE__ */ jsxs("p", {
+								className: "text-[10px] text-gray-400 pl-1",
+								children: [
+									"+",
+									events.length - 3,
+									" more"
+								]
+							})]
+						})] })
+					}, di);
+				})
+			}, wi))
+		})]
+	});
+});
+
+//#endregion
+//#region src/calendar/WeekView.tsx
+const HOURS$1 = Array.from({ length: 24 }, (_, i) => i);
+const WeekView = observer(({ model, className = "" }) => {
+	const { start } = model.visibleDateRange;
+	const days = Array.from({ length: 7 }, (_, i) => {
+		const d = new Date(start);
+		d.setDate(start.getDate() + i);
+		return d;
+	});
+	const now = new Date();
+	const isToday = (d) => d.toDateString() === now.toDateString();
+	const currentHour = now.getHours();
+	const currentMinute = now.getMinutes();
+	const allDayEventsByDay = days.map((d) => {
+		const dateKey = d.toISOString().slice(0, 10);
+		return (model.eventsByDay.get(dateKey) ?? []).filter((e) => e.allDay);
+	});
+	const hasAllDay = allDayEventsByDay.some((events) => events.length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col h-full overflow-auto ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sticky top-0 bg-white z-10 border-b border-gray-200",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "grid",
+				style: { gridTemplateColumns: "60px repeat(7, 1fr)" },
+				children: [/* @__PURE__ */ jsx("div", {}), days.map((d, i) => /* @__PURE__ */ jsxs("div", {
+					className: `text-center py-2 border-l border-gray-100 ${isToday(d) ? "bg-blue-50" : ""}`,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs text-gray-500",
+						children: d.toLocaleDateString(void 0, { weekday: "short" })
+					}), /* @__PURE__ */ jsx("div", {
+						className: `text-lg font-medium ${isToday(d) ? "text-blue-600" : "text-gray-900"}`,
+						children: d.getDate()
+					})]
+				}, i))]
+			}), hasAllDay && /* @__PURE__ */ jsxs("div", {
+				className: "grid border-t border-gray-100",
+				style: { gridTemplateColumns: "60px repeat(7, 1fr)" },
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-[10px] text-gray-400 text-right pr-2 py-1",
+					children: "all-day"
+				}), allDayEventsByDay.map((events, i) => /* @__PURE__ */ jsx("div", {
+					className: "border-l border-gray-100 px-0.5 py-0.5 space-y-0.5",
+					children: events.map((ev) => /* @__PURE__ */ jsx("button", {
+						onClick: () => model.selectEvent(ev),
+						className: "w-full text-left text-[10px] px-1 py-0.5 rounded truncate",
+						style: {
+							backgroundColor: `${ev.color ?? "#3b82f6"}20`,
+							color: ev.color ?? "#3b82f6",
+							borderLeft: `2px solid ${ev.color ?? "#3b82f6"}`
+						},
+						title: ev.title,
+						children: ev.title
+					}, ev.id))
+				}, i))]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 relative",
+			children: HOURS$1.map((hour) => /* @__PURE__ */ jsxs("div", {
+				className: "grid border-b border-gray-50",
+				style: {
+					gridTemplateColumns: "60px repeat(7, 1fr)",
+					height: "48px"
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-[10px] text-gray-400 text-right pr-2 -mt-2",
+					children: hour === 0 ? "" : `${hour % 12 || 12} ${hour < 12 ? "AM" : "PM"}`
+				}), days.map((d, i) => {
+					const dateKey = d.toISOString().slice(0, 10);
+					const events = (model.eventsByDay.get(dateKey) ?? []).filter((e) => !e.allDay && e.startDate.getHours() === hour);
+					const showTimeLine = isToday(d) && hour === currentHour;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "border-l border-gray-100 relative",
+						children: [showTimeLine && /* @__PURE__ */ jsxs("div", {
+							className: "absolute left-0 right-0 z-10 pointer-events-none",
+							style: { top: `${currentMinute / 60 * 48}px` },
+							children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full absolute -left-1 -top-1" }), /* @__PURE__ */ jsx("div", { className: "h-px bg-red-500 w-full" })]
+						}), events.map((ev, ei) => {
+							const durationHours = Math.max(.5, (ev.endDate.getTime() - ev.startDate.getTime()) / 36e5);
+							const topOffset = ev.startDate.getMinutes() / 60 * 48;
+							return /* @__PURE__ */ jsx("button", {
+								onClick: () => model.selectEvent(ev),
+								className: "absolute text-xs px-1 py-0.5 rounded truncate z-[1]",
+								title: ev.title,
+								style: {
+									backgroundColor: `${ev.color ?? "#3b82f6"}20`,
+									color: ev.color ?? "#3b82f6",
+									borderLeft: `2px solid ${ev.color ?? "#3b82f6"}`,
+									height: `${durationHours * 48}px`,
+									top: `${topOffset}px`,
+									left: `${ei * 4 + 2}px`,
+									right: "2px"
+								},
+								children: ev.title
+							}, ev.id);
+						})]
+					}, i);
+				})]
+			}, hour))
+		})]
+	});
+});
+
+//#endregion
+//#region src/calendar/DayView.tsx
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const DayView = observer(({ model, className = "" }) => {
+	const d = model.currentDate;
+	const dateKey = d.toISOString().slice(0, 10);
+	const dayEvents = model.eventsByDay.get(dateKey) ?? [];
+	const allDayEvents = dayEvents.filter((e) => e.allDay);
+	const timedEvents = dayEvents.filter((e) => !e.allDay);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col h-full overflow-auto ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border-b border-gray-200 px-4 py-2 sticky top-0 bg-white z-10",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-lg font-medium text-gray-900",
+				children: d.toLocaleDateString(void 0, {
+					weekday: "long",
+					month: "long",
+					day: "numeric"
+				})
+			}), allDayEvents.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex gap-1 mt-1",
+				children: allDayEvents.map((ev) => /* @__PURE__ */ jsx("button", {
+					onClick: () => model.selectEvent(ev),
+					className: "text-xs px-2 py-0.5 rounded",
+					style: {
+						backgroundColor: `${ev.color ?? "#3b82f6"}20`,
+						color: ev.color ?? "#3b82f6"
+					},
+					children: ev.title
+				}, ev.id))
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1",
+			children: HOURS.map((hour) => {
+				const hourEvents = timedEvents.filter((e) => e.startDate.getHours() === hour);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[60px_1fr] border-b border-gray-50 min-h-[48px]",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-[10px] text-gray-400 text-right pr-2 -mt-2",
+						children: hour === 0 ? "" : `${hour % 12 || 12} ${hour < 12 ? "AM" : "PM"}`
+					}), /* @__PURE__ */ jsx("div", {
+						className: "border-l border-gray-100 relative pl-1",
+						children: hourEvents.map((ev) => /* @__PURE__ */ jsxs("button", {
+							onClick: () => model.selectEvent(ev),
+							className: "w-full text-left text-xs p-1.5 rounded mb-0.5",
+							style: {
+								backgroundColor: `${ev.color ?? "#3b82f6"}15`,
+								color: ev.color ?? "#3b82f6",
+								borderLeft: `2px solid ${ev.color ?? "#3b82f6"}`
+							},
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: ev.title
+							}), /* @__PURE__ */ jsx("span", {
+								className: "ml-2 opacity-70",
+								children: ev.startDate.toLocaleTimeString([], {
+									hour: "2-digit",
+									minute: "2-digit"
+								})
+							})]
+						}, ev.id))
+					})]
+				}, hour);
+			})
+		})]
+	});
+});
+
+//#endregion
+//#region src/calendar/AgendaView.tsx
+const AgendaView = observer(({ model, className = "" }) => {
+	const sortedEntries = Array.from(model.eventsByDay.entries()).sort(([a], [b]) => a.localeCompare(b));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `overflow-y-auto p-4 space-y-4 ${className}`,
+		children: [sortedEntries.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center h-32 text-gray-400 text-sm",
+			children: "No upcoming events"
+		}), sortedEntries.map(([dateKey, events]) => {
+			const date = new Date(dateKey + "T00:00:00");
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1",
+				children: date.toLocaleDateString(void 0, {
+					weekday: "long",
+					month: "long",
+					day: "numeric"
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-1.5",
+				children: events.map((ev) => /* @__PURE__ */ jsx(EventCard, {
+					event: ev,
+					onClick: () => model.selectEvent(ev)
+				}, ev.id))
+			})] }, dateKey);
+		})]
+	});
+});
+
+//#endregion
+//#region src/calendar/CalendarSidebar.tsx
+const DAYS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+const CalendarSidebar = observer(({ model, className = "" }) => {
+	const d = model.currentDate;
+	const year = d.getFullYear();
+	const month = d.getMonth();
+	const firstDay = new Date(year, month, 1).getDay();
+	const daysInMonth = new Date(year, month + 1, 0).getDate();
+	const today = new Date();
+	const cells = [];
+	for (let i = 0; i < firstDay; i++) cells.push(null);
+	for (let i = 1; i <= daysInMonth; i++) cells.push(i);
+	const isToday = (day) => day === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+	const isSelected = (day) => day === d.getDate();
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w-56 border-r border-gray-200 bg-gray-50 p-3 ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between mb-2",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => model.navigateBack(),
+						className: "p-1 hover:bg-gray-200 rounded",
+						children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium",
+						children: d.toLocaleDateString(void 0, {
+							month: "long",
+							year: "numeric"
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => model.navigateForward(),
+						className: "p-1 hover:bg-gray-200 rounded",
+						children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-7 gap-0.5 text-center",
+				children: [DAYS.map((day) => /* @__PURE__ */ jsx("div", {
+					className: "text-[10px] text-gray-400 font-medium py-0.5",
+					children: day
+				}, day)), cells.map((day, i) => /* @__PURE__ */ jsx("button", {
+					disabled: day === null,
+					onClick: () => day && model.setDate(new Date(year, month, day)),
+					className: `text-xs py-0.5 rounded ${day === null ? "" : isSelected(day) ? "bg-blue-500 text-white" : isToday(day) ? "bg-blue-100 text-blue-700 font-bold" : "text-gray-700 hover:bg-gray-200"}`,
+					children: day
+				}, i))]
+			})]
+		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2",
+			children: "Calendars"
+		}), model.calendars.map((cal) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-2 py-1.5 text-sm text-gray-700",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "w-3 h-3 rounded-full",
+				style: { backgroundColor: cal.color }
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				title: cal.name,
+				children: cal.name
+			})]
+		}, cal.id))] })]
+	});
+});
+
+//#endregion
+//#region src/calendar/CalendarBrowser.tsx
+const VIEW_LABELS = {
+	month: "Month",
+	week: "Week",
+	day: "Day",
+	agenda: "Agenda"
+};
+const CalendarBrowser = observer(({ model, className = "", showSidebar = true }) => {
+	useEffect(() => {
+		model.loadEvents();
+	}, [model]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`,
+		children: [showSidebar && /* @__PURE__ */ jsx(CalendarSidebar, { model }), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 flex flex-col min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-4 py-2 border-b border-gray-200",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => model.today(),
+						className: "text-sm px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50",
+						children: "Today"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => model.navigateBack(),
+						className: "p-1.5 hover:bg-gray-100 rounded-lg",
+						children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => model.navigateForward(),
+						className: "p-1.5 hover:bg-gray-100 rounded-lg",
+						children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-sm font-medium text-gray-900 ml-2",
+						children: model.currentDate.toLocaleDateString(void 0, {
+							month: "long",
+							year: "numeric",
+							...model.viewMode === "day" ? {
+								day: "numeric",
+								weekday: "long"
+							} : {}
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ml-auto flex items-center border border-gray-200 rounded-lg overflow-hidden",
+						children: Object.keys(VIEW_LABELS).map((mode) => /* @__PURE__ */ jsx("button", {
+							onClick: () => model.setViewMode(mode),
+							className: `px-3 py-1.5 text-xs font-medium ${model.viewMode === mode ? "bg-blue-50 text-blue-600" : "text-gray-500 hover:bg-gray-50"}`,
+							children: VIEW_LABELS[mode]
+						}, mode))
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-hidden",
+				children: model.loading ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-64",
+					children: /* @__PURE__ */ jsx(Loader2, {
+						size: 24,
+						className: "animate-spin text-gray-400"
+					})
+				}) : model.error ? /* @__PURE__ */ jsx(BrowserError, {
+					error: model.error,
+					context: "Calendar",
+					onRetry: () => model.loadEvents()
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					model.viewMode === "month" && /* @__PURE__ */ jsx(MonthView, { model }),
+					model.viewMode === "week" && /* @__PURE__ */ jsx(WeekView, { model }),
+					model.viewMode === "day" && /* @__PURE__ */ jsx(DayView, { model }),
+					model.viewMode === "agenda" && /* @__PURE__ */ jsx(AgendaView, { model })
+				] })
+			})]
+		})]
+	});
+});
+
+//#endregion
+//#region src/calendar/MockCalendarProvider.ts
+const CALENDARS = [
+	{
+		id: "personal",
+		name: "Personal",
+		color: "#3b82f6"
+	},
+	{
+		id: "work",
+		name: "Work",
+		color: "#10b981"
+	},
+	{
+		id: "family",
+		name: "Family",
+		color: "#f59e0b"
+	}
+];
+const EVENT_TITLES = [
+	"Team standup",
+	"Lunch with Sarah",
+	"Design review",
+	"Gym session",
+	"Doctor appointment",
+	"Code review",
+	"Sprint planning",
+	"Movie night",
+	"Grocery shopping",
+	"Piano lesson",
+	"Board meeting",
+	"Yoga class",
+	"Project deadline",
+	"Coffee with Alex",
+	"Dentist",
+	"Book club"
+];
+const LOCATIONS = [
+	"Office",
+	"Zoom",
+	"Conference Room A",
+	"Downtown Cafe",
+	"Home",
+	void 0
+];
+function generateEvents() {
+	const events = [];
+	const now = new Date();
+	const baseDate = new Date(now.getFullYear(), now.getMonth(), 1);
+	for (let i = 0; i < 40; i++) {
+		const day = Math.floor(Math.random() * 35) - 5;
+		const hour = 8 + Math.floor(Math.random() * 10);
+		const duration = 1 + Math.floor(Math.random() * 3);
+		const allDay = i % 8 === 0;
+		const calendar = CALENDARS[i % CALENDARS.length];
+		const startDate = new Date(baseDate);
+		startDate.setDate(startDate.getDate() + day);
+		startDate.setHours(hour, 0, 0, 0);
+		const endDate = new Date(startDate);
+		if (allDay) endDate.setHours(23, 59, 59, 999);
+		else endDate.setHours(hour + duration);
+		events.push({
+			id: `event-${i}`,
+			type: "calendar-event",
+			title: EVENT_TITLES[i % EVENT_TITLES.length],
+			startDate,
+			endDate,
+			allDay,
+			location: LOCATIONS[i % LOCATIONS.length],
+			attendees: i % 3 === 0 ? ["alice@example.com", "bob@example.com"] : void 0,
+			color: calendar.color,
+			calendarId: calendar.id,
+			createdAt: now,
+			updatedAt: now
+		});
+	}
+	return events;
+}
+var MockCalendarProvider = class {
+	constructor() {
+		this.events = generateEvents();
+	}
+	async listItems() {
+		return this.events;
+	}
+	async getItem(id) {
+		return this.events.find((e) => e.id === id) ?? null;
+	}
+	async createItem(item) {
+		const now = new Date();
+		const created = {
+			...item,
+			id: `event-${Date.now()}`,
+			createdAt: now,
+			updatedAt: now
+		};
+		this.events.push(created);
+		return created;
+	}
+	async updateItem(id, updates) {
+		const idx = this.events.findIndex((e) => e.id === id);
+		if (idx === -1) throw new Error("Not found");
+		this.events[idx] = {
+			...this.events[idx],
+			...updates,
+			updatedAt: new Date()
+		};
+		return this.events[idx];
+	}
+	async deleteItem(id) {
+		this.events = this.events.filter((e) => e.id !== id);
+	}
+	async search(query) {
+		const q = query.toLowerCase();
+		return this.events.filter((e) => e.title.toLowerCase().includes(q));
+	}
+	async getCalendars() {
+		return CALENDARS;
+	}
+	async getEventsByRange(start, end) {
+		return this.events.filter((e) => e.endDate >= start && e.startDate <= end);
+	}
+	async getEventsByCalendar(calendarId) {
+		return this.events.filter((e) => e.calendarId === calendarId);
+	}
+};
+
+//#endregion
+export { AgendaView, CalendarBrowser, CalendarModel, CalendarSidebar, DayView, EventCard, MockCalendarProvider, MonthView, WeekView };
+//# sourceMappingURL=calendar-DSlrbHoj.js.map