@fluid-app/portal-sdk 0.1.211 → 0.1.212

package/dist/CalendarWidget-CmVC7I4i.cjs

@@ -0,0 +1,627 @@
+const require_chunk = require("./chunk-9hOWP6kD.cjs");
+const require_registry_context = require("./registry-context-RWj2xJlC.cjs");
+const require_error_state = require("./error-state-C-AalLnz.cjs");
+const require_registries = require("./registries-CpUM406S.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region ../widgets/src/hooks/use-calendar-events.preview.ts
+const today = /* @__PURE__ */ new Date();
+const inTwoDays = new Date(today);
+inTwoDays.setDate(inTwoDays.getDate() + 2);
+function toISO(date, hours, minutes = 0) {
+	const d = new Date(date);
+	d.setHours(hours, minutes, 0, 0);
+	return d.toISOString();
+}
+function toDateString(date) {
+	return date.toISOString().split("T")[0];
+}
+const PREVIEW_DATA = [
+	{
+		id: 1,
+		title: "Team Strategy Call",
+		start: toISO(today, 9, 0),
+		end: toISO(today, 10, 0),
+		status: "active",
+		color: "#4f46e5"
+	},
+	{
+		id: 2,
+		title: "Product Launch Webinar",
+		start: toISO(today, 14, 0),
+		end: toISO(today, 15, 30),
+		status: "active",
+		color: "#0891b2",
+		venue: "Zoom"
+	},
+	{
+		id: 3,
+		title: "Annual Leadership Summit",
+		start: `${toDateString(inTwoDays)}T00:00:00.000Z`,
+		end: `${toDateString(inTwoDays)}T23:59:59.000Z`,
+		status: "active",
+		color: "#059669",
+		isAllDay: true,
+		venue: "Convention Center"
+	}
+];
+//#endregion
+//#region ../widgets/src/hooks/use-calendar-events.ts
+function useCalendarEvents() {
+	const widgetsApi = require_error_state.useWidgetsApi();
+	const { isPreview } = require_error_state.useWidgetPreviewContext();
+	const { baseUrl } = require_registry_context.useDataSourceRegistryConfig();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"portal-widget-use",
+			"calendar-events",
+			isPreview ? "preview" : baseUrl
+		],
+		queryFn: ({ signal }) => widgetsApi.fetchCalendarEvents(signal),
+		enabled: !isPreview,
+		...isPreview && { placeholderData: PREVIEW_DATA }
+	});
+}
+//#endregion
+//#region ../widgets/src/widgets/CalendarWidget.tsx
+var CalendarWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	CalendarWidget: () => CalendarWidget,
+	calendarWidgetPropertySchema: () => calendarWidgetPropertySchema
+});
+const DAY_NAMES = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const startOfDay = (d) => {
+	const x = new Date(d);
+	x.setHours(0, 0, 0, 0);
+	return x;
+};
+const addDays = (d, n) => {
+	const x = new Date(d);
+	x.setDate(x.getDate() + n);
+	return x;
+};
+const diffDays = (a, b) => {
+	const ms = startOfDay(a).getTime() - startOfDay(b).getTime();
+	return Math.round(ms / 864e5);
+};
+const generateMonthGrid = (year, month) => {
+	const daysInMonth = getDaysInMonth(year, month);
+	const firstDay = getFirstDayOfMonth(year, month);
+	const today = /* @__PURE__ */ new Date();
+	const cells = [];
+	for (let i = 0; i < firstDay; i++) cells.push({
+		date: null,
+		isToday: false,
+		isCurrentMonth: false
+	});
+	for (let day = 1; day <= daysInMonth; day++) {
+		const date = new Date(year, month, day);
+		cells.push({
+			date,
+			isToday: isSameDay(date, today),
+			isCurrentMonth: true
+		});
+	}
+	return cells;
+};
+const generateWeekGrid = () => {
+	const today = /* @__PURE__ */ new Date();
+	const weekday = today.getDay();
+	return Array.from({ length: 7 }, (_, i) => {
+		const date = addDays(today, -weekday + i);
+		return {
+			date,
+			isToday: isSameDay(date, today)
+		};
+	});
+};
+const formatTime = (iso) => new Date(iso).toLocaleTimeString("en-US", {
+	hour: "numeric",
+	minute: "2-digit"
+});
+const formatContextualDate = (date) => {
+	const d = diffDays(date, /* @__PURE__ */ new Date());
+	const weekday = date.toLocaleDateString("en-US", { weekday: "short" });
+	const monthDay = date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	});
+	if (d === 0) return {
+		lead: "Today",
+		detail: `${weekday}, ${monthDay}`
+	};
+	if (d === 1) return {
+		lead: "Tomorrow",
+		detail: `${weekday}, ${monthDay}`
+	};
+	if (d === -1) return {
+		lead: "Yesterday",
+		detail: `${weekday}, ${monthDay}`
+	};
+	return {
+		lead: null,
+		detail: `${weekday}, ${monthDay}`
+	};
+};
+function DayCellButton({ date, isToday, isSelected, eventCount, accentColor, textColor, showEventDensity, onClick }) {
+	const dotCount = showEventDensity ? Math.min(eventCount, 3) : eventCount > 0 ? 1 : 0;
+	const baseClasses = "group relative flex aspect-square w-full flex-col items-center justify-center rounded-lg text-sm tabular-nums transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0";
+	const stateClasses = isSelected ? `bg-${accentColor} text-${accentColor}-foreground focus-visible:ring-${accentColor}/40` : isToday ? `bg-${accentColor}/10 text-${accentColor} font-semibold hover:bg-${accentColor}/20 focus-visible:ring-${accentColor}/40` : `text-${textColor} hover:bg-${accentColor}/10 focus-visible:ring-${accentColor}/40`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		"aria-label": date.toLocaleDateString("en-US", {
+			weekday: "long",
+			month: "long",
+			day: "numeric"
+		}),
+		"aria-current": isToday ? "date" : void 0,
+		"aria-pressed": isSelected,
+		className: `${baseClasses} ${stateClasses}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "leading-none",
+			children: date.getDate()
+		}), dotCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "absolute bottom-1.5 flex items-center gap-[2px]",
+			children: Array.from({ length: dotCount }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `size-1 rounded-full ${isSelected ? `bg-${accentColor}-foreground/70` : `bg-${accentColor}`}` }, i))
+		})]
+	});
+}
+function EventCard({ event, accentColor, textColor }) {
+	const accentVar = `var(--color-${accentColor})`;
+	const barColor = event.color || accentVar;
+	const timeText = event.isAllDay ? "All day" : `${formatTime(event.start)} – ${formatTime(event.end)}`;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "w-[2px] shrink-0 self-stretch rounded-full",
+		style: { backgroundColor: barColor }
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0 flex-1",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `truncate text-sm font-semibold text-${textColor} leading-tight`,
+				children: event.title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `mt-1 text-[11px] tabular-nums text-${textColor}/60 font-medium`,
+				children: timeText
+			}),
+			event.venue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `mt-1.5 flex items-center gap-1 text-[11px] text-${textColor}/55`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MapPin, { className: "size-2.5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: event.venue
+				})]
+			})
+		]
+	})] });
+	const wrapperClasses = `group flex gap-x-2 rounded-md px-2 py-2 transition-colors -mx-2`;
+	const interactiveClasses = `hover:bg-${accentColor}/5`;
+	if (event.url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: event.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: `${wrapperClasses} ${interactiveClasses}`,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: wrapperClasses,
+		children: content
+	});
+}
+function NavButton({ icon: Icon, label, variant, accentColor, textColor, onClick }) {
+	const classes = variant === "accent" ? `bg-${accentColor} text-${accentColor}-foreground hover:bg-${accentColor}/90 focus-visible:ring-${accentColor}/40` : `bg-${textColor}/5 text-${textColor} hover:bg-${textColor}/10 focus-visible:ring-${textColor}/20`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		"aria-label": label,
+		className: `flex size-8 items-center justify-center rounded-full text-[12px] transition-colors focus:outline-none focus-visible:ring-2 ${classes}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-4" })
+	});
+}
+function CalendarWidget({ titleEnabled = true, titleText = "Calendar", titleFontSize = "xl", titleColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", showEventDensity = true, showTodayButton = true, weekendDim = true, showYearEyebrow = true, className, ...props }) {
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const [view, setView] = (0, react.useState)(() => {
+		const now = /* @__PURE__ */ new Date();
+		return {
+			month: now.getMonth(),
+			year: now.getFullYear()
+		};
+	});
+	const currentMonth = view.month;
+	const currentYear = view.year;
+	const [isCollapsed, setIsCollapsed] = (0, react.useState)(false);
+	const [selectedDate, setSelectedDate] = (0, react.useState)(() => /* @__PURE__ */ new Date());
+	const [gridTransitioning, setGridTransitioning] = (0, react.useState)(false);
+	const { data: events = [], isLoading, isError } = useCalendarEvents();
+	const monthGrid = (0, react.useMemo)(() => generateMonthGrid(currentYear, currentMonth), [currentYear, currentMonth]);
+	const weekGrid = generateWeekGrid();
+	const eventsByDate = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const event of events) {
+			const start = startOfDay(new Date(event.start));
+			const end = startOfDay(new Date(event.end));
+			for (let cur = start; cur <= end; cur = addDays(cur, 1)) {
+				const key = `${cur.getFullYear()}-${cur.getMonth()}-${cur.getDate()}`;
+				const list = map.get(key);
+				if (list) list.push(event);
+				else map.set(key, [event]);
+			}
+		}
+		return map;
+	}, [events]);
+	const lookupEventsForDate = (0, react.useCallback)((date) => {
+		const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+		return eventsByDate.get(key) ?? [];
+	}, [eventsByDate]);
+	const selectedDateEvents = (0, react.useMemo)(() => {
+		if (!selectedDate) return [];
+		return lookupEventsForDate(selectedDate);
+	}, [selectedDate, lookupEventsForDate]);
+	const transitionTimeoutRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		if (transitionTimeoutRef.current !== null) window.clearTimeout(transitionTimeoutRef.current);
+	}, []);
+	const navigate = (0, react.useCallback)((direction) => {
+		if (transitionTimeoutRef.current !== null) window.clearTimeout(transitionTimeoutRef.current);
+		setGridTransitioning(true);
+		transitionTimeoutRef.current = window.setTimeout(() => {
+			setView((prev) => {
+				const next = prev.month + direction;
+				if (next < 0) return {
+					month: 11,
+					year: prev.year - 1
+				};
+				if (next > 11) return {
+					month: 0,
+					year: prev.year + 1
+				};
+				return {
+					month: next,
+					year: prev.year
+				};
+			});
+			setGridTransitioning(false);
+			transitionTimeoutRef.current = null;
+		}, 120);
+	}, []);
+	const goToToday = (0, react.useCallback)(() => {
+		if (transitionTimeoutRef.current !== null) window.clearTimeout(transitionTimeoutRef.current);
+		const now = /* @__PURE__ */ new Date();
+		setGridTransitioning(true);
+		transitionTimeoutRef.current = window.setTimeout(() => {
+			setView({
+				month: now.getMonth(),
+				year: now.getFullYear()
+			});
+			setSelectedDate(now);
+			setGridTransitioning(false);
+			transitionTimeoutRef.current = null;
+		}, 80);
+	}, []);
+	const now = /* @__PURE__ */ new Date();
+	const viewingCurrentMonth = currentMonth === now.getMonth() && currentYear === now.getFullYear();
+	const monthLabel = new Date(currentYear, currentMonth).toLocaleString("en-US", { month: "long" });
+	const yearLabel = String(currentYear);
+	const contextualDate = selectedDate ? formatContextualDate(selectedDate) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className ?? ""}`,
+		style: { backgroundImage },
+		...props,
+		children: [titleEnabled && titleText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `p-${padding} pb-0`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: `text-${titleFontSize} text-${titleColor} font-bold tracking-[-0.012em]`,
+				children: titleText
+			})
+		}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `flex min-h-[300px] items-center justify-center p-${padding}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `text-${accentColor}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-8 animate-spin rounded-full border-2 border-current border-t-transparent" })
+			})
+		}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_error_state.ErrorState, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `p-${padding}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "@md:flex @md:gap-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "@md:flex-none",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mb-4 flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex min-w-0 flex-col",
+								children: [showYearEyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `text-[10px] font-bold tracking-[0.16em] uppercase text-${textColor}/55`,
+									children: yearLabel
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `text-xl leading-tight font-bold tracking-[-0.015em] text-${textColor}`,
+									children: monthLabel
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex shrink-0 items-center gap-1.5",
+								children: [
+									showTodayButton && !viewingCurrentMonth && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										onClick: goToToday,
+										className: `flex items-center gap-1 rounded-full bg-${accentColor}/10 px-2.5 py-1 text-[11px] font-semibold text-${accentColor} transition-colors hover:bg-${accentColor}/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-${accentColor}/40`,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarCheck, { className: "size-3" }), "Today"]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavButton, {
+										icon: lucide_react.ChevronLeft,
+										label: "Previous month",
+										variant: "ghost",
+										accentColor,
+										textColor,
+										onClick: () => navigate(-1)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavButton, {
+										icon: lucide_react.ChevronRight,
+										label: "Next month",
+										variant: "accent",
+										accentColor,
+										textColor,
+										onClick: () => navigate(1)
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mb-2 grid grid-cols-7 gap-1 text-center",
+							children: DAY_NAMES.map((day, idx) => {
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: `text-[10px] font-semibold tracking-[0.12em] uppercase text-${textColor}/${weekendDim && (idx === 0 || idx === 6) ? "40" : "55"}`,
+									children: day
+								}, day);
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "transition-opacity duration-150 ease-out",
+							style: { opacity: gridTransitioning ? .3 : 1 },
+							children: [isCollapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "grid grid-cols-7 gap-1 @md:hidden",
+								children: weekGrid.map(({ date, isToday }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayCellButton, {
+									date,
+									isToday,
+									isSelected: !!selectedDate && isSameDay(selectedDate, date),
+									eventCount: lookupEventsForDate(date).length,
+									accentColor,
+									textColor,
+									showEventDensity,
+									onClick: () => setSelectedDate(date)
+								}, date.toISOString()))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `grid grid-cols-7 gap-1 ${isCollapsed ? "hidden @md:grid" : "grid"}`,
+								children: monthGrid.map((cell, idx) => {
+									if (!cell.date) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "aspect-square" }, `empty-${idx}`);
+									const eventCount = lookupEventsForDate(cell.date).length;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayCellButton, {
+										date: cell.date,
+										isToday: cell.isToday,
+										isSelected: !!selectedDate && isSameDay(selectedDate, cell.date),
+										eventCount,
+										accentColor,
+										textColor,
+										showEventDensity,
+										onClick: () => setSelectedDate(cell.date)
+									}, cell.date.toISOString());
+								})
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: () => setIsCollapsed(!isCollapsed),
+							className: `mt-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/40 transition-colors hover:text-${textColor}/60 @md:hidden`,
+							"aria-label": isCollapsed ? "Expand calendar" : "Collapse calendar",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-px w-1/2 bg-${textColor}/20` }),
+								isCollapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsDown, { className: "size-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUp, { className: "size-3" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-px w-1/2 bg-${textColor}/20` })
+							]
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `mt-4 border-${textColor}/10 @md:mt-0 @md:w-56 @md:border-l @md:pl-6`,
+					children: [contextualDate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mb-3",
+						children: [contextualDate.lead && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `text-[10px] font-bold tracking-[0.16em] uppercase text-${accentColor}`,
+							children: contextualDate.lead
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `text-sm font-semibold text-${textColor} tabular-nums`,
+							children: contextualDate.detail
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "animate-in fade-in slide-in-from-bottom-2 flex flex-col duration-200 ease-out",
+						children: selectedDateEvents.length > 0 ? selectedDateEvents.map((event, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EventCard, {
+							event,
+							accentColor,
+							textColor
+						}, `${event.id}-${idx}`)) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: `flex flex-col items-start gap-1 rounded-md border border-dashed border-${textColor}/15 px-3 py-3`,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarCheck, { className: `size-3 text-${textColor}/40` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `text-[11px] font-semibold text-${textColor}/60`,
+									children: "Nothing scheduled"
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `text-[11px] text-${textColor}/45`,
+								children: "Enjoy the breather."
+							})]
+						})
+					}, selectedDate?.toISOString() ?? "none")]
+				})]
+			})
+		})]
+	});
+}
+const calendarWidgetPropertySchema = {
+	widgetType: "CalendarWidget",
+	displayName: "Calendar Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the calendar",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Title text displayed above the calendar",
+			defaultValue: "Calendar",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		require_registries.getFontSizeField({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the widget title",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		require_registries.getColorField({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the widget title",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the calendar container",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		},
+		require_registries.getColorField({
+			key: "textColor",
+			label: "Text Color",
+			description: "Default text color for calendar content",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getColorField({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Drives today highlight, event dots, Today pill, and selected day",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		require_registries.getPaddingField({
+			key: "padding",
+			label: "Padding",
+			description: "Padding around the calendar container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		require_registries.getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the calendar container",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "showYearEyebrow",
+			label: "Year Eyebrow",
+			type: "boolean",
+			description: "Small uppercase year label above the month (e.g. '2026 / November').",
+			defaultValue: true,
+			tab: "styling",
+			group: "Polish"
+		},
+		{
+			key: "showTodayButton",
+			label: "Today Button",
+			type: "boolean",
+			description: "Show a 'Today' pill when viewing a different month.",
+			defaultValue: true,
+			tab: "styling",
+			group: "Polish"
+		},
+		{
+			key: "showEventDensity",
+			label: "Event Density Dots",
+			type: "boolean",
+			description: "Show 1–3 dots per day based on event count (off = single dot).",
+			defaultValue: true,
+			tab: "styling",
+			group: "Polish"
+		},
+		{
+			key: "weekendDim",
+			label: "Dim Weekends",
+			type: "boolean",
+			description: "Subtly dim the Sun/Sat day-of-week headers for visual rhythm.",
+			defaultValue: true,
+			tab: "styling",
+			group: "Polish"
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "CalendarWidget", {
+	enumerable: true,
+	get: function() {
+		return CalendarWidget;
+	}
+});
+Object.defineProperty(exports, "CalendarWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return CalendarWidget_exports;
+	}
+});
+Object.defineProperty(exports, "calendarWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return calendarWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=CalendarWidget-CmVC7I4i.cjs.map