@k2b/ui 0.1.0-rc.0

package/dist/ssr/content/Calendar.js

@@ -0,0 +1,1542 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-calendar-event__title\">", "</span>"],
+  _tmpl$2 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
+  _tmpl$3 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
+  _tmpl$4 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", " aria-label=\"", "\">", "</a>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\" aria-label=\"", "\">", "</button>"],
+  _tmpl$6 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\" aria-label=\"", "\">", "</div>"],
+  _tmpl$7 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
+  _tmpl$8 = ["<i class=\"", "\"></i>"],
+  _tmpl$9 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
+  _tmpl$0 = ["<span class=\"k2b-button__label\">", "</span>"],
+  _tmpl$1 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
+  _tmpl$10 = ["<header class=\"k2b-calendar-header\"><div class=\"k2b-calendar-header__navigation\">", "", "<div class=\"k2b-calendar-header__title\">", "</div></div><div class=\"k2b-calendar-header__actions\">", "", "", "</div>", "</header>"],
+  _tmpl$11 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
+  _tmpl$12 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
+  _tmpl$13 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
+  _tmpl$14 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
+  _tmpl$15 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
+  _tmpl$16 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
+  _tmpl$17 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
+  _tmpl$18 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
+  _tmpl$19 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
+  _tmpl$20 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-calendar-time-grid\"><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
+  _tmpl$22 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
+  _tmpl$23 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
+  _tmpl$24 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
+  _tmpl$25 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
+  _tmpl$26 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
+  _tmpl$27 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
+  _tmpl$30 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
+  _tmpl$31 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
+  _tmpl$32 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
+  _tmpl$33 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
+  _tmpl$34 = ["<div class=\"k2b-calendar-year\">", "</div>"],
+  _tmpl$35 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
+  _tmpl$36 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
+  _tmpl$37 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
+  _tmpl$38 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
+  _tmpl$39 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
+  _tmpl$40 = ["<div class=\"k2b-calendar-body\">", "</div>"],
+  _tmpl$41 = ["<section class=\"", "\"", ">", "", "", "</section>"];
+import { Link } from "@k2b/ssr/nav";
+import { dates as calendar } from "@k2b/stdlib";
+import { createMemo, createSignal, For, mergeProps, onCleanup, onMount, Show } from "solid-js";
+import { Button } from "../actions/Button";
+import SegmentedControl from "../actions/SegmentedControl";
+import { useDateConfigLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { layoutCalendarIntervals } from "./calendar-event-layout";
+import { calendarDayIndexAtPoint, calendarMinuteAtPoint, startCalendarPointerSession } from "./calendar-pointer";
+const ownerDateConfig = owner => ({
+  ...owner.dateConfig,
+  timeZone: owner.timeZone ?? owner.dateConfig?.timeZone,
+  firstDayOfWeek: owner.firstDayOfWeek ?? owner.dateConfig?.firstDayOfWeek ?? owner.dateConfig?.weekStartsOn ?? 1
+});
+const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
+const parseDate = (value, context) => {
+  if (value instanceof Date) return new Date(value);
+  if (dateOnlyPattern.test(value)) return calendar.parseCalendarDate(value, context);
+  const normalized = value.includes("T") ? value : value.replace(" ", "T");
+  const parsed = new Date(normalized);
+  if (!Number.isNaN(parsed.getTime())) return parsed;
+  const [year, month = "1", day = "1"] = value.split("-");
+  return new Date(Number(year), Number(month) - 1, Number(day), 12);
+};
+const validDate = value => !Number.isNaN(value.getTime());
+const weekNumber = date => {
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const day = target.getUTCDay() || 7;
+  target.setUTCDate(target.getUTCDate() + 4 - day);
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
+  return Math.ceil(((target.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+};
+const zonedWeekNumber = (date, context) => {
+  if (!context?.timeZone) return weekNumber(date);
+  const [year = "1970", month = "1", day = "1"] = calendar.formatDateKey(date, context).split("-");
+  return weekNumber(new Date(Date.UTC(Number(year), Number(month) - 1, Number(day))));
+};
+const formatTime = (date, context) => calendar.formatTime(date, context);
+const formatDay = (date, context) => date.toLocaleDateString(context?.locale ?? "en", {
+  weekday: "short",
+  day: "numeric",
+  timeZone: context?.timeZone
+});
+const formatMonth = (date, context) => calendar.formatMonthYear(date, context);
+const zonedYearMonth = (date, context) => {
+  const [year = "1970", month = "1"] = calendar.formatDateKey(date, context).split("-");
+  return {
+    year: Number(year),
+    month: Number(month) - 1
+  };
+};
+const zonedMonthDate = (year, month, context) => {
+  const value = `${year}-${String(month + 1).padStart(2, "0")}-01T12:00`;
+  if (!context?.timeZone) return parseDate(value);
+  return new Date(calendar.zonedDateTimeToInstant(value, context.timeZone, {
+    disambiguation: "compatible"
+  }));
+};
+const startOfDay = (date, context) => calendar.startOfDay(date, context);
+const endOfDay = (date, context) => calendar.endOfDay(date, context);
+const isStartOfDay = (date, context) => date.getTime() === startOfDay(date, context).getTime();
+const addMinutes = (date, minutes) => new Date(date.getTime() + minutes * 60 * 1000);
+const zonedHour = (date, context) => {
+  if (!context?.timeZone) return date.getHours() + date.getMinutes() / 60;
+  const value = calendar.instantToZonedInput(date, context.timeZone);
+  return Number(value.slice(11, 13)) + Number(value.slice(14, 16)) / 60;
+};
+const zonedSlot = (day, hour, context) => {
+  return zonedMinuteSlot(day, hour * 60, context);
+};
+const zonedMinuteSlot = (day, minuteOfDay, context) => {
+  const bounded = Math.max(0, Math.min(23 * 60 + 59, minuteOfDay));
+  const hour = Math.floor(bounded / 60);
+  const minute = bounded % 60;
+  const value = `${calendar.formatDateKey(day, context)}T${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  if (!context?.timeZone) return parseDate(value);
+  return new Date(calendar.zonedDateTimeToInstant(value, context.timeZone, {
+    disambiguation: "compatible"
+  }));
+};
+const normalizeEvents = (events, context) => events.flatMap(event => {
+  const startDate = parseDate(event.start, context);
+  if (!validDate(startDate)) return [];
+  const parsedEnd = event.end ? parseDate(event.end, context) : null;
+  const endDate = parsedEnd && validDate(parsedEnd) ? parsedEnd : new Date(startDate.getTime() + 60 * 60 * 1000);
+  const duration = Math.max(60 * 60 * 1000, endDate.getTime() - startDate.getTime());
+  const rangeEnd = endDate > startDate ? endDate : new Date(startDate.getTime() + duration);
+  const startKey = calendar.formatDateKey(startDate, context);
+  const endKey = calendar.formatDateKey(rangeEnd, context);
+  if (!event.allDay && startKey === endKey) {
+    return [{
+      ...event,
+      startDate,
+      endDate: rangeEnd,
+      sourceStartDate: startDate,
+      sourceEndDate: rangeEnd,
+      dayKey: startKey
+    }];
+  }
+  const lastDay = event.allDay && isStartOfDay(rangeEnd, context) ? calendar.addDays(startOfDay(rangeEnd, context), -1, context) : startOfDay(rangeEnd, context);
+  const days = [];
+  for (let day = startOfDay(startDate, context); day <= lastDay; day = calendar.addDays(day, 1, context)) {
+    const segmentStart = day.getTime() === startOfDay(startDate, context).getTime() ? startDate : startOfDay(day, context);
+    const segmentEnd = day.getTime() === startOfDay(rangeEnd, context).getTime() ? rangeEnd : endOfDay(day, context);
+    days.push({
+      ...event,
+      startDate: segmentStart,
+      endDate: segmentEnd,
+      sourceStartDate: startDate,
+      sourceEndDate: rangeEnd,
+      dayKey: calendar.formatDateKey(day, context),
+      allDay: event.allDay
+    });
+  }
+  return days;
+});
+const eventHref = (props, event) => props.getEventHref?.(event) ?? event.href;
+const moveEventTo = (event, target, allDay = false, context) => {
+  const duration = Math.max(30 * 60 * 1000, event.sourceEndDate.getTime() - event.sourceStartDate.getTime());
+  const start = allDay ? startOfDay(target, context) : new Date(target);
+  start.setSeconds(0, 0);
+  return {
+    start,
+    end: new Date(start.getTime() + duration),
+    allDay
+  };
+};
+const moveEventToDay = (event, day, context) => {
+  if (event.allDay) return moveEventTo(event, startOfDay(day, context), true, context);
+  const localStart = context?.timeZone ? calendar.instantToZonedInput(event.sourceStartDate, context.timeZone) : null;
+  const hour = localStart ? Number(localStart.slice(11, 13)) : event.sourceStartDate.getHours();
+  const minute = localStart ? Number(localStart.slice(14, 16)) : event.sourceStartDate.getMinutes();
+  return moveEventTo(event, zonedMinuteSlot(day, hour * 60 + minute, context), false, context);
+};
+const eventTimeChanged = (event, next) => event.sourceStartDate.getTime() !== next.start.getTime() || event.sourceEndDate.getTime() !== next.end.getTime() || Boolean(event.allDay) !== Boolean(next.allDay);
+const previewSegments = (preview, days, context) => preview ? normalizeEvents([{
+  id: `preview-${preview.id}`,
+  title: preview.title ?? "",
+  start: preview.start,
+  end: preview.end,
+  allDay: preview.allDay,
+  color: "blue"
+}], context).filter(event => days.some(day => event.dayKey === calendar.formatDateKey(day, context))) : [];
+const timedEventLayouts = events => {
+  return layoutCalendarIntervals(events, event => ({
+    start: event.startDate.getTime(),
+    end: event.endDate.getTime()
+  })).map(({
+    item: event,
+    lane,
+    lanes,
+    groupId,
+    groupStart,
+    groupEnd
+  }) => ({
+    event,
+    lane,
+    lanes,
+    groupId,
+    groupStartDate: new Date(groupStart),
+    groupEndDate: new Date(groupEnd)
+  }));
+};
+const EventChip = props => {
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const color = () => props.event.color ?? "blue";
+  const selected = () => Boolean(props.owner.selectedEventId) && props.owner.selectedEventId === props.event.id;
+  const style = () => props.event.colorHex ? {
+    "--k2b-calendar-accent": props.event.colorHex
+  } : undefined;
+  const isInteractive = () => Boolean(props.owner.onEventActivate);
+  const durationHours = () => (props.event.endDate.getTime() - props.event.startDate.getTime()) / 3_600_000;
+  const short = () => Boolean(props.fill && !props.event.allDay && durationHours() < 0.75);
+  const showTime = () => !props.event.allDay && !props.compact && durationHours() >= 0.75;
+  const showLocation = () => Boolean(props.event.location && !props.compact && durationHours() >= 1.25);
+  const showDescription = () => Boolean(props.event.description?.trim() && props.fill && !props.event.allDay && !props.compact && durationHours() >= 1.5);
+  const timeLabel = () => `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;
+  const renderedEvent = () => props.owner.renderEvent?.(props.event, {
+    compact: props.compact ?? false,
+    fill: props.fill ?? false,
+    start: props.event.startDate,
+    end: props.event.endDate,
+    allDay: props.event.allDay ?? false,
+    durationHours: durationHours(),
+    timeLabel: timeLabel()
+  });
+  const defaultContent = [_$ssr(_tmpl$, _$escape(props.event.title)), _$createComponent(Show, {
+    get when() {
+      return showTime();
+    },
+    get children() {
+      return _$ssr(_tmpl$2, _$escape(timeLabel()));
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return showLocation();
+    },
+    get children() {
+      return _$ssr(_tmpl$2, _$escape(props.event.location));
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return showDescription();
+    },
+    get children() {
+      return _$ssr(_tmpl$3, _$escape(props.event.description));
+    }
+  })];
+  const content = () => renderedEvent() ?? defaultContent;
+  const isActionable = () => isInteractive() || Boolean(props.onMovePointerDown);
+  let suppressClickUntil = 0;
+  const onClick = event => {
+    if (performance.now() < suppressClickUntil) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (!props.owner.onEventActivate || props.owner.eventActivation === "double") return;
+    event.preventDefault();
+    event.stopPropagation();
+    props.owner.onEventActivate(props.event);
+  };
+  const onDoubleClick = event => {
+    if (!props.owner.onEventActivate || props.owner.eventActivation !== "double") return;
+    event.preventDefault();
+    event.stopPropagation();
+    props.owner.onEventActivate(props.event);
+  };
+  const onButtonKeyDown = event => {
+    if (!isInteractive() || event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    props.owner.onEventActivate?.(props.event);
+  };
+  const onPointerDown = event => {
+    if (event.pointerType === "touch") return;
+    if (props.onMovePointerDown) event.stopPropagation();
+    props.onMovePointerDown?.(event, () => {
+      suppressClickUntil = performance.now() + 400;
+    });
+  };
+  return props.href ? _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content())) : isActionable() ? _$ssr(_tmpl$5, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content())) : _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), `${_$escape(props.event.title, true)}${props.event.allDay ? "" : `, ${_$escape(formatTime(props.event.startDate, dateConfig()), true)} to ${_$escape(formatTime(props.event.endDate, dateConfig()), true)}`}`, _$escape(content()));
+};
+const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
+  const isSlotChild = event => {
+    if (!(event.target instanceof Element)) return false;
+    const control = event.target.closest("a,button,[data-calendar-event]");
+    return Boolean(control && control !== event.currentTarget);
+  };
+  const interactive = Boolean(owner.onSlotActivate);
+  const activate = event => {
+    if (!owner.onSlotActivate || isSlotChild(event) || suppressed?.()) return;
+    event.preventDefault();
+    owner.onSlotActivate(slot());
+  };
+  return {
+    role: interactive && !nativeControl ? "button" : undefined,
+    tabIndex: interactive && !nativeControl ? 0 : undefined,
+    onClick: event => {
+      if (owner.slotActivation === "double") return;
+      activate(event);
+    },
+    onDblClick: event => {
+      if (owner.slotActivation !== "double") return;
+      activate(event);
+    },
+    onKeyDown: nativeControl ? undefined : event => {
+      if (event.key === "Enter" || event.key === " ") activate(event);
+    }
+  };
+};
+/** A real anchor is the baseline; the optional handler only enhances it after hydration. */
+const CalendarNavigationLink = props => {
+  const preload = () => props.owner.onPrefetch?.(props.href);
+  const navigateHref = event => {
+    const anchor = event.currentTarget;
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || anchor.target && anchor.target !== "_self" || anchor.hasAttribute("download") || new URL(anchor.href).origin !== window.location.origin) {
+      return;
+    }
+    event.preventDefault();
+    props.owner.onNavigateHref?.(props.href);
+  };
+  return props.owner.onNavigateHref ? _$ssrElement("a", _$mergeProps(() => props.anchorProps, {
+    get href() {
+      return props.href;
+    }
+  }), _$escape(props.children), false) : props.owner.onNavigate ? _$createComponent(Link, _$mergeProps(() => props.anchorProps, {
+    get href() {
+      return props.href;
+    },
+    scroll: "preserve",
+    get onNavigate() {
+      return props.owner.onNavigate;
+    },
+    onPointerEnter: preload,
+    onFocus: preload,
+    get children() {
+      return props.children;
+    }
+  })) : _$ssrElement("a", _$mergeProps(() => props.anchorProps, {
+    get href() {
+      return props.href;
+    }
+  }), _$escape(props.children), false);
+};
+const CalendarViewLinks = props => {
+  const messages = useUiMessages();
+  const refs = [];
+  const selectRelative = (currentIndex, direction) => {
+    if (props.options.length === 0) return;
+    refs[(currentIndex + direction + props.options.length) % props.options.length]?.click();
+  };
+  const onKeyDown = (event, index) => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      selectRelative(index, 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      selectRelative(index, -1);
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      refs[event.key === "Home" ? 0 : props.options.length - 1]?.click();
+    }
+  };
+  return _$ssr(_tmpl$7, _$ssrAttribute("aria-label", _$escape(messages().calendarView, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return props.options;
+    },
+    children: (option, index) => {
+      const active = () => (props.view === "mobile-month" ? "month" : props.view) === option.value;
+      const href = () => props.owner.getViewHref?.(option.value) ?? "#";
+      return _$createComponent(CalendarNavigationLink, {
+        get owner() {
+          return props.owner;
+        },
+        get href() {
+          return href();
+        },
+        get anchorProps() {
+          return {
+            ref: element => {
+              refs[index()] = element;
+            },
+            role: "radio",
+            "aria-checked": active(),
+            tabIndex: active() ? 0 : -1,
+            class: "k2b-segmented-control__option",
+            "data-divider": index() < props.options.length - 1 && !active() && (props.view === "mobile-month" ? "month" : props.view) !== props.options[index() + 1]?.value ? "true" : undefined,
+            onKeyDown: event => onKeyDown(event, index())
+          };
+        },
+        get children() {
+          return option.label;
+        }
+      });
+    }
+  })));
+};
+const adjacentCalendarDate = (date, view, direction, dateConfig) => {
+  if (view === "year") return calendar.addMonths(date, direction * 12, dateConfig);
+  if (view === "month" || view === "mobile-month") return calendar.addMonths(date, direction, dateConfig);
+  return calendar.addDays(date, direction * (view === "day" ? 1 : 7), dateConfig);
+};
+const CalendarHeader = props => {
+  const messages = useUiMessages();
+  const dateConfig = () => ownerDateConfig(props.owner);
+  const previous = () => adjacentCalendarDate(props.date, props.view, -1, dateConfig());
+  const next = () => adjacentCalendarDate(props.date, props.view, 1, dateConfig());
+  const title = () => {
+    if (props.view === "year") return new Intl.DateTimeFormat(dateConfig().locale ?? "en", {
+      year: "numeric",
+      timeZone: dateConfig().timeZone
+    }).format(props.date);
+    if (props.view === "day") return props.date.toLocaleDateString(dateConfig().locale ?? "en", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      timeZone: dateConfig().timeZone
+    });
+    if (props.view === "week") return `${formatDay(calendar.startOfWeek(props.date, dateConfig()), dateConfig())} - ${formatDay(calendar.addDays(calendar.startOfWeek(props.date, dateConfig()), 6, dateConfig()), dateConfig())}`;
+    return formatMonth(props.date, dateConfig());
+  };
+  const goDate = date => props.owner.onDateChange?.(date, props.view);
+  const goView = view => {
+    if (props.owner.onViewChange) {
+      props.owner.onViewChange(view);
+      return;
+    }
+    const href = props.owner.getViewHref?.(view);
+    if (href) window.location.href = href;
+  };
+  const navButton = (date, icon, label) => {
+    const href = props.owner.getDateHref?.(date, props.view);
+    return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
+      get owner() {
+        return props.owner;
+      },
+      href: href,
+      anchorProps: {
+        "aria-label": label,
+        title: label,
+        class: "k2b-calendar-header__nav-button"
+      },
+      get children() {
+        return _$ssr(_tmpl$8, `ti ${_$escape(icon, true)}`);
+      }
+    }) : props.owner.onDateChange ? _$ssr(_tmpl$9, _$ssrAttribute("aria-label", _$escape(label, true), false), `ti ${_$escape(icon, true)}`) : _$createComponent(CalendarNavigationLink, {
+      get owner() {
+        return props.owner;
+      },
+      href: href ?? "#",
+      anchorProps: {
+        "aria-label": label,
+        title: label,
+        class: "k2b-calendar-header__nav-button"
+      },
+      get children() {
+        return _$ssr(_tmpl$8, `ti ${_$escape(icon, true)}`);
+      }
+    });
+  };
+  const todayButton = () => {
+    const today = calendar.today(dateConfig());
+    const href = props.owner.getDateHref?.(today, props.view);
+    const label = _$ssr(_tmpl$0, _$escape(props.labels.today));
+    return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
+      get owner() {
+        return props.owner;
+      },
+      href: href,
+      anchorProps: {
+        class: "k2b-button k2b-calendar-header__today",
+        "data-size": "sm",
+        "data-variant": "input"
+      },
+      children: label
+    }) : props.owner.onDateChange ? _$createComponent(Button, {
+      type: "button",
+      variant: "input",
+      size: "sm",
+      "class": "k2b-calendar-header__today",
+      onClick: () => goDate(today),
+      get children() {
+        return props.labels.today;
+      }
+    }) : _$createComponent(CalendarNavigationLink, {
+      get owner() {
+        return props.owner;
+      },
+      href: href ?? "#",
+      anchorProps: {
+        class: "k2b-button k2b-calendar-header__today",
+        "data-size": "sm",
+        "data-variant": "input"
+      },
+      children: label
+    });
+  };
+  const viewOptions = createMemo(() => [{
+    value: "day",
+    label: props.labels.day
+  }, {
+    value: "week",
+    label: props.labels.week
+  }, {
+    value: "month",
+    label: props.labels.month
+  }, {
+    value: "year",
+    label: props.labels.year
+  }].filter(option => !props.owner.views || props.owner.views.includes(option.value)));
+  return _$ssr(_tmpl$10, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next)), _$escape(title()), _$escape(todayButton()), _$escape(_$createComponent(Show, {
+    get when() {
+      return !props.owner.onViewChange && props.owner.getViewHref;
+    },
+    get fallback() {
+      return _$createComponent(SegmentedControl, {
+        value: () => props.view === "mobile-month" ? "month" : props.view,
+        onValueChange: goView,
+        get ariaLabel() {
+          return messages().calendarView;
+        },
+        get options() {
+          return viewOptions();
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(CalendarViewLinks, {
+        get owner() {
+          return props.owner;
+        },
+        get view() {
+          return props.view;
+        },
+        get options() {
+          return viewOptions();
+        }
+      });
+    }
+  })), _$escape(props.owner.toolbarActions), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.navigationPending;
+    },
+    get children() {
+      return _$ssr(_tmpl$1);
+    }
+  })));
+};
+const MonthView = props => {
+  const messages = useUiMessages();
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const [movePreview, setMovePreview] = createSignal(null);
+  const [movingEventId, setMovingEventId] = createSignal("");
+  let cancelInteraction;
+  let suppressSlotClickUntil = 0;
+  const month = createMemo(() => zonedYearMonth(props.date, dateConfig()));
+  const weeks = createMemo(() => calendar.getMonthGrid(month().year, month().month, dateConfig()));
+  const weekdays = createMemo(() => calendar.weekdays(dateConfig()));
+  const todayKey = createMemo(() => calendar.formatDateKey(props.now, dateConfig()));
+  const eventsByDay = createMemo(() => {
+    const grouped = new Map();
+    for (const event of props.events) {
+      const events = grouped.get(event.dayKey);
+      if (events) events.push(event);else grouped.set(event.dayKey, [event]);
+    }
+    return grouped;
+  });
+  const clearMove = () => {
+    setMovePreview(null);
+    setMovingEventId("");
+  };
+  const dayAtPoint = (clientX, clientY) => {
+    const target = document.elementFromPoint(clientX, clientY)?.closest("[data-calendar-day-key]");
+    const dayKey = target?.dataset.calendarDayKey;
+    return dayKey ? calendar.parseCalendarDate(dayKey, dateConfig()) : null;
+  };
+  const startMove = (pointerEvent, event, markDragged) => {
+    if (!props.owner.onEventDrop) return;
+    cancelInteraction?.();
+    cancelInteraction = startCalendarPointerSession({
+      event: pointerEvent,
+      resolve: (clientX, clientY) => {
+        const day = dayAtPoint(clientX, clientY);
+        return day ? {
+          id: event.id,
+          ...moveEventToDay(event, day, dateConfig())
+        } : null;
+      },
+      onActivate: () => {
+        markDragged();
+        suppressSlotClickUntil = performance.now() + 400;
+        setMovingEventId(event.id);
+      },
+      onPreview: setMovePreview,
+      onCommit: next => {
+        clearMove();
+        if (eventTimeChanged(event, next)) props.owner.onEventDrop?.(event, next);
+      },
+      onCancel: clearMove
+    });
+  };
+  onCleanup(() => cancelInteraction?.());
+  return _$ssr(_tmpl$12, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.withWeekNumbers;
+    },
+    get children() {
+      return _$ssr(_tmpl$11, _$escape(messages().weekShort));
+    }
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return weekdays();
+    },
+    children: day => _$ssr(_tmpl$11, _$escape(day))
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return weeks();
+    },
+    children: week => _$ssr(_tmpl$14, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      get when() {
+        return props.owner.withWeekNumbers;
+      },
+      get children() {
+        return _$ssr(_tmpl$13, _$escape(zonedWeekNumber(week[0], dateConfig())));
+      }
+    })), _$escape(_$createComponent(For, {
+      each: week,
+      children: day => {
+        const dayKey = calendar.formatDateKey(day, dateConfig());
+        const events = eventsByDay().get(dayKey) ?? [];
+        const href = props.owner.getDateHref?.(day, "day");
+        const dayBadge = props.owner.dayBadges?.[dayKey];
+        const sameMonth = calendar.isSameMonth(day, props.date, dateConfig());
+        const isToday = dayKey === todayKey();
+        const dayLabel = day.toLocaleDateString(dateConfig().locale ?? "en", {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+          timeZone: dateConfig().timeZone
+        });
+        const eventStack = createMemo(() => {
+          const preview = movePreview();
+          const previewForDay = preview && calendar.formatDateKey(preview.start, dateConfig()) === dayKey ? preview : null;
+          const candidates = previewForDay ? events.filter(event => event.id !== previewForDay.id) : events;
+          const visibleLimit = previewForDay ? 2 : 3;
+          return {
+            preview: previewForDay,
+            visibleEvents: candidates.slice(0, visibleLimit),
+            hiddenCount: Math.max(0, candidates.length - visibleLimit)
+          };
+        });
+        return _$ssr(_tmpl$16, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+          get when() {
+            return props.owner.onSlotActivate;
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              when: href,
+              children: dayHref => _$createComponent(CalendarNavigationLink, {
+                get owner() {
+                  return props.owner;
+                },
+                get href() {
+                  return dayHref();
+                },
+                get anchorProps() {
+                  return {
+                    class: "k2b-calendar-month__day-target",
+                    "aria-label": messages().openDate({
+                      label: dayLabel
+                    })
+                  };
+                }
+              })
+            });
+          },
+          get children() {
+            return _$ssrElement("button", _$mergeProps({
+              type: "button",
+              "class": "k2b-calendar-month__day-target",
+              "data-interactive": "true",
+              get ["aria-label"]() {
+                return messages().createEventOn({
+                  label: dayLabel
+                });
+              }
+            }, () => slotInteractionProps(props.owner, () => {
+              const start = startOfDay(day, dateConfig());
+              return {
+                start,
+                end: calendar.addDays(start, 1, dateConfig()),
+                allDay: true
+              };
+            }, () => performance.now() < suppressSlotClickUntil, true)), undefined, false);
+          }
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return props.owner.onSlotActivate && href;
+          },
+          get fallback() {
+            return _$ssr(_tmpl$17, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
+          },
+          children: dayHref => _$createComponent(CalendarNavigationLink, {
+            get owner() {
+              return props.owner;
+            },
+            get href() {
+              return dayHref();
+            },
+            get anchorProps() {
+              return {
+                class: "k2b-calendar-month__day-number",
+                "data-today": isToday ? "true" : undefined,
+                "data-outside": !sameMonth ? "true" : undefined,
+                "aria-label": messages().openDate({
+                  label: dayLabel
+                })
+              };
+            },
+            get children() {
+              return calendar.formatDayNumber(day, dateConfig());
+            }
+          })
+        })), _$escape(_$createComponent(Show, {
+          when: dayBadge,
+          children: badge => _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
+            get when() {
+              return badge().icon;
+            },
+            children: icon => _$ssr(_tmpl$8, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+          })), _$escape(badge().label))
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return eventStack().preview;
+          },
+          get children() {
+            return _$ssr(_tmpl$15, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent));
+          }
+        })), _$escape(_$createComponent(For, {
+          get each() {
+            return eventStack().visibleEvents;
+          },
+          children: event => _$createComponent(EventChip, {
+            event: event,
+            get owner() {
+              return props.owner;
+            },
+            get href() {
+              return eventHref(props.owner, event);
+            },
+            compact: true,
+            get moving() {
+              return movingEventId() === event.id;
+            },
+            get onMovePointerDown() {
+              return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, event, markDragged) : undefined;
+            }
+          })
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return eventStack().hiddenCount > 0;
+          },
+          get children() {
+            return _$createComponent(CalendarNavigationLink, {
+              get owner() {
+                return props.owner;
+              },
+              href: href ?? "#",
+              anchorProps: {
+                class: "k2b-calendar-month__more"
+              },
+              get children() {
+                return ["+", eventStack().hiddenCount, " more"];
+              }
+            });
+          }
+        })), _$escape(_$createComponent(For, {
+          get each() {
+            return events.slice(0, 4);
+          },
+          children: event => _$ssr(_tmpl$19, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
+            "background-color": event.colorHex
+          } : undefined))
+        })));
+      }
+    })))
+  })));
+};
+const TimeGridView = props => {
+  const messages = useUiMessages();
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const gridStartHour = () => props.owner.visibleStartHour ?? 0;
+  const gridEndHour = () => props.owner.visibleEndHour ?? 23;
+  const businessStartHour = () => props.owner.startHour ?? 8;
+  const businessEndHour = () => props.owner.endHour ?? 18;
+  const hours = createMemo(() => Array.from({
+    length: gridEndHour() - gridStartHour() + 1
+  }, (_, index) => gridStartHour() + index));
+  const [timePreview, setTimePreview] = createSignal(null);
+  const [movingEventId, setMovingEventId] = createSignal("");
+  const [expandedOverflow, setExpandedOverflow] = createSignal("");
+  let scrollContainer;
+  let timeGrid;
+  let timeGutter;
+  let defaultHourMarker;
+  let cancelInteraction;
+  let suppressSlotClickUntil = 0;
+  const slotEnd = start => addMinutes(start, 60);
+  const previewEvents = createMemo(() => previewSegments(timePreview(), props.days, dateConfig()));
+  const eventsByDay = createMemo(() => {
+    const grouped = new Map();
+    for (const event of props.events) {
+      const bucket = grouped.get(event.dayKey) ?? {
+        allDay: [],
+        timed: []
+      };
+      (event.allDay ? bucket.allDay : bucket.timed).push(event);
+      grouped.set(event.dayKey, bucket);
+    }
+    return grouped;
+  });
+  const clearInteraction = () => {
+    setTimePreview(null);
+    setMovingEventId("");
+  };
+  const dayAtPoint = (clientX, clientY) => {
+    const target = document.elementFromPoint(clientX, clientY)?.closest("[data-calendar-day-key]");
+    const dayKey = target?.dataset.calendarDayKey;
+    return dayKey ? calendar.parseCalendarDate(dayKey, dateConfig()) : null;
+  };
+  const timeAtPoint = (clientX, clientY) => {
+    if (!timeGrid || !timeGutter) return null;
+    const gridRect = timeGrid.getBoundingClientRect();
+    const gutterRect = timeGutter.getBoundingClientRect();
+    const dayIndex = calendarDayIndexAtPoint(clientX, gutterRect.right, gridRect.right - gutterRect.right, props.days.length);
+    if (dayIndex === null) return null;
+    const minute = Math.min(gridEndHour() * 60 + 45, calendarMinuteAtPoint(clientY, gridRect.top, gridRect.height, gridStartHour(), gridEndHour()));
+    return zonedMinuteSlot(props.days[dayIndex], minute, dateConfig());
+  };
+  const beginInteraction = options => {
+    cancelInteraction?.();
+    cancelInteraction = startCalendarPointerSession(options);
+  };
+  const startTimedMove = (pointerEvent, event, markDragged) => {
+    if (!props.owner.onEventDrop) return;
+    const pointerStart = timeAtPoint(pointerEvent.clientX, pointerEvent.clientY) ?? event.sourceStartDate;
+    const duration = Math.max(15 * 60_000, event.sourceEndDate.getTime() - event.sourceStartDate.getTime());
+    const offsetMinutes = Math.max(0, Math.min(duration / 60_000, Math.round((pointerStart.getTime() - event.sourceStartDate.getTime()) / 900_000) * 15));
+    beginInteraction({
+      event: pointerEvent,
+      scrollContainer,
+      resolve: (clientX, clientY) => {
+        const pointer = timeAtPoint(clientX, clientY);
+        if (!pointer) return null;
+        const start = new Date(pointer.getTime() - offsetMinutes * 60_000);
+        return {
+          id: event.id,
+          title: event.title,
+          start,
+          end: new Date(start.getTime() + duration),
+          allDay: false
+        };
+      },
+      onActivate: () => {
+        markDragged();
+        suppressSlotClickUntil = performance.now() + 400;
+        setMovingEventId(event.id);
+      },
+      onPreview: setTimePreview,
+      onCommit: next => {
+        clearInteraction();
+        if (eventTimeChanged(event, next)) props.owner.onEventDrop?.(event, next);
+      },
+      onCancel: clearInteraction
+    });
+  };
+  const startAllDayMove = (pointerEvent, event, markDragged) => {
+    if (!props.owner.onEventDrop) return;
+    beginInteraction({
+      event: pointerEvent,
+      resolve: (clientX, clientY) => {
+        const day = dayAtPoint(clientX, clientY);
+        return day ? {
+          id: event.id,
+          title: event.title,
+          ...moveEventTo(event, startOfDay(day, dateConfig()), true, dateConfig())
+        } : null;
+      },
+      onActivate: () => {
+        markDragged();
+        suppressSlotClickUntil = performance.now() + 400;
+        setMovingEventId(event.id);
+      },
+      onPreview: setTimePreview,
+      onCommit: next => {
+        clearInteraction();
+        if (eventTimeChanged(event, next)) props.owner.onEventDrop?.(event, next);
+      },
+      onCancel: clearInteraction
+    });
+  };
+  const startRange = pointerEvent => {
+    if (!props.owner.onSlotActivate || pointerEvent.pointerType === "touch") return;
+    const anchor = timeAtPoint(pointerEvent.clientX, pointerEvent.clientY);
+    if (!anchor) return;
+    beginInteraction({
+      event: pointerEvent,
+      scrollContainer,
+      resolve: (clientX, clientY) => {
+        const current = timeAtPoint(clientX, clientY);
+        if (!current) return null;
+        const start = current < anchor ? current : anchor;
+        const endBase = current < anchor ? anchor : current;
+        return {
+          id: "calendar-create-preview",
+          start,
+          end: addMinutes(endBase, 15),
+          allDay: false
+        };
+      },
+      onActivate: () => {
+        suppressSlotClickUntil = performance.now() + 400;
+      },
+      onPreview: setTimePreview,
+      onCommit: next => {
+        clearInteraction();
+        props.owner.onSlotActivate?.(next);
+      },
+      onCancel: clearInteraction
+    });
+  };
+  const timeRangeLayout = (startDate, endDate) => {
+    const start = zonedHour(startDate, dateConfig());
+    const end = zonedHour(endDate, dateConfig());
+    const visibleStart = Math.max(gridStartHour(), start);
+    const visibleEnd = Math.min(gridEndHour() + 1, end);
+    const total = Math.max(1, gridEndHour() - gridStartHour() + 1);
+    return {
+      top: Math.max(0, (visibleStart - gridStartHour()) / total * 100),
+      height: Math.max(1.25, (visibleEnd - visibleStart) / total * 100)
+    };
+  };
+  const eventLayout = event => timeRangeLayout(event.startDate, event.endDate);
+  const isDayView = () => props.days.length === 1;
+  const visibleLaneCount = lanes => isDayView() ? lanes : Math.min(lanes, 3);
+  const overflowLayouts = layouts => {
+    if (isDayView()) return [];
+    const groups = new Map();
+    for (const layout of layouts) {
+      if (layout.lane < visibleLaneCount(layout.lanes)) continue;
+      const existing = groups.get(layout.groupId);
+      if (existing) existing.hiddenEvents.push(layout.event);else groups.set(layout.groupId, {
+        groupId: layout.groupId,
+        hiddenEvents: [layout.event],
+        groupStartDate: layout.groupStartDate,
+        groupEndDate: layout.groupEndDate
+      });
+    }
+    return [...groups.values()];
+  };
+  const dayColumnMinWidth = layouts => {
+    if (!isDayView()) return undefined;
+    const lanes = Math.max(1, ...layouts.map(layout => layout.lanes));
+    return `${Math.max(32, lanes * 12)}rem`;
+  };
+  const laneStyle = layoutItem => {
+    if (isDayView()) {
+      const laneWidth = 100 / layoutItem.lanes;
+      return {
+        left: `calc(${layoutItem.lane * laneWidth}% + 0.25rem)`,
+        width: `calc(${laneWidth}% - 0.5rem)`
+      };
+    }
+    const visibleLanes = visibleLaneCount(layoutItem.lanes);
+    return {
+      left: `${layoutItem.lanes <= 1 ? 0 : 28 / Math.max(1, visibleLanes - 1) * layoutItem.lane}%`,
+      width: `${layoutItem.lanes <= 1 ? 100 : layoutItem.lanes > visibleLanes ? 68 : 72}%`
+    };
+  };
+  const currentTimeLine = day => {
+    const now = props.now;
+    if (calendar.formatDateKey(day, dateConfig()) !== calendar.formatDateKey(now, dateConfig())) return null;
+    const hour = zonedHour(now, dateConfig());
+    if (hour < gridStartHour() || hour > gridEndHour() + 1) return null;
+    return (hour - gridStartHour()) / Math.max(1, gridEndHour() - gridStartHour() + 1) * 100;
+  };
+  onCleanup(() => cancelInteraction?.());
+  onMount(() => {
+    requestAnimationFrame(() => {
+      if (!scrollContainer || !defaultHourMarker) return;
+      const targetTop = defaultHourMarker.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top;
+      scrollContainer.scrollTo({
+        top: Math.max(0, scrollContainer.scrollTop + targetTop),
+        behavior: "smooth"
+      });
+    });
+  });
+  return _$ssr(_tmpl$21, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
+    get each() {
+      return props.days;
+    },
+    children: day => {
+      const dayBadge = props.owner.dayBadges?.[calendar.formatDateKey(day, dateConfig())];
+      const today = () => calendar.isToday(day, dateConfig());
+      return _$createComponent(CalendarNavigationLink, {
+        get owner() {
+          return props.owner;
+        },
+        get href() {
+          return props.owner.getDateHref?.(day, "day") ?? "#";
+        },
+        anchorProps: {
+          class: "k2b-calendar-time-grid__day"
+        },
+        get children() {
+          return [_$ssr(_tmpl$22, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
+            when: dayBadge,
+            children: badge => _$ssr(_tmpl$23, _$escape(_$createComponent(Show, {
+              get when() {
+                return badge().icon;
+              },
+              children: icon => _$ssr(_tmpl$8, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
+            })), _$escape(badge().label))
+          })];
+        }
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return !props.owner.hideAllDay;
+    },
+    get children() {
+      return _$ssr(_tmpl$20, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
+        get each() {
+          return props.days;
+        },
+        children: day => {
+          const dayKey = calendar.formatDateKey(day, dateConfig());
+          const allDay = () => eventsByDay().get(dayKey)?.allDay ?? [];
+          const previewAllDay = previewEvents().filter(event => event.dayKey === dayKey && event.allDay);
+          return _$ssrElement("div", _$mergeProps({
+            "class": "k2b-calendar-time-grid__all-day-cell",
+            "data-calendar-day-key": dayKey,
+            get ["data-drop-preview"]() {
+              return timePreview()?.allDay && calendar.formatDateKey(timePreview().start, dateConfig()) === dayKey ? "true" : undefined;
+            },
+            get ["data-interactive"]() {
+              return props.owner.onSlotActivate ? "true" : undefined;
+            }
+          }, () => slotInteractionProps(props.owner, () => {
+            const start = startOfDay(day, dateConfig());
+            return {
+              start,
+              end: calendar.addDays(start, 1, dateConfig()),
+              allDay: true
+            };
+          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$24, _$escape(_$createComponent(For, {
+            each: previewAllDay,
+            children: event => _$ssr(_tmpl$15, _$escape(event.title))
+          })), _$escape(_$createComponent(For, {
+            get each() {
+              return allDay();
+            },
+            children: event => _$createComponent(EventChip, {
+              event: event,
+              get owner() {
+                return props.owner;
+              },
+              get href() {
+                return eventHref(props.owner, event);
+              },
+              compact: true,
+              get moving() {
+                return movingEventId() === event.id;
+              },
+              get onMovePointerDown() {
+                return props.owner.onEventDrop ? (pointerEvent, markDragged) => startAllDayMove(pointerEvent, event, markDragged) : undefined;
+              }
+            })
+          }))), false);
+        }
+      })));
+    }
+  })), _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$ssrStyleProperty("grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(For, {
+    get each() {
+      return hours();
+    },
+    children: hour => _$ssr(_tmpl$25, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return props.days;
+    },
+    children: day => {
+      const dayKey = calendar.formatDateKey(day, dateConfig());
+      const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
+      return _$ssr(_tmpl$27, _$ssrStyleProperty("min-width:", _$escape(dayColumnMinWidth(layouts()), true)) + _$ssrStyleProperty(";grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
+        get when() {
+          return currentTimeLine(day) !== null;
+        },
+        get children() {
+          return _$ssr(_tmpl$26, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
+        }
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return hours();
+        },
+        children: hour => _$ssrElement("div", _$mergeProps({
+          "class": "k2b-calendar-time-grid__slot",
+          get ["data-outside-business"]() {
+            return hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined;
+          },
+          get ["data-interactive"]() {
+            return props.owner.onSlotActivate ? "true" : undefined;
+          }
+        }, () => slotInteractionProps(props.owner, () => {
+          const start = zonedSlot(day, hour, dateConfig());
+          return {
+            start,
+            end: slotEnd(start),
+            allDay: false
+          };
+        }, () => performance.now() < suppressSlotClickUntil)), undefined, false)
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return previewEvents().filter(event => event.dayKey === dayKey && !event.allDay);
+        },
+        children: event => {
+          const layout = eventLayout(event);
+          const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
+          return _$ssr(_tmpl$29, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
+            get when() {
+              return event.title;
+            },
+            get children() {
+              return _$ssr(_tmpl$28, _$escape(event.title));
+            }
+          })), _$escape(formatTime(event.startDate, dateConfig())), _$escape(formatTime(event.endDate, dateConfig())));
+        }
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return layouts();
+        },
+        children: layoutItem => {
+          if (!isDayView() && layoutItem.lane >= visibleLaneCount(layoutItem.lanes)) return null;
+          const event = layoutItem.event;
+          const layout = eventLayout(event);
+          const position = laneStyle(layoutItem);
+          const resizeStart = pointerEvent => {
+            if (!props.owner.onEventResize) return;
+            pointerEvent.preventDefault();
+            pointerEvent.stopPropagation();
+            beginInteraction({
+              event: pointerEvent,
+              scrollContainer,
+              threshold: 1,
+              resolve: (clientX, clientY) => {
+                const pointer = timeAtPoint(clientX, clientY);
+                if (!pointer) return null;
+                const minimumEnd = addMinutes(event.sourceStartDate, 15);
+                const end = pointer > minimumEnd ? pointer : minimumEnd;
+                return {
+                  id: event.id,
+                  title: event.title,
+                  start: event.sourceStartDate,
+                  end,
+                  allDay: false
+                };
+              },
+              onActivate: () => {
+                suppressSlotClickUntil = performance.now() + 400;
+                setMovingEventId(event.id);
+              },
+              onPreview: setTimePreview,
+              onCommit: next => {
+                clearInteraction();
+                if (eventTimeChanged(event, next)) props.owner.onEventResize?.(event, next);
+              },
+              onCancel: clearInteraction
+            });
+          };
+          return _$ssr(_tmpl$31, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
+            event: event,
+            get owner() {
+              return props.owner;
+            },
+            get href() {
+              return eventHref(props.owner, event);
+            },
+            fill: true,
+            get moving() {
+              return movingEventId() === event.id;
+            },
+            get onMovePointerDown() {
+              return props.owner.onEventDrop ? (pointerEvent, markDragged) => startTimedMove(pointerEvent, event, markDragged) : undefined;
+            }
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return props.owner.onEventResize;
+            },
+            get children() {
+              return _$ssr(_tmpl$30, _$ssrAttribute("aria-label", _$escape(messages().resizeEvent, true), false));
+            }
+          })));
+        }
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return overflowLayouts(layouts());
+        },
+        children: overflow => {
+          const layout = timeRangeLayout(overflow.groupStartDate, overflow.groupEndDate);
+          const key = `${dayKey}-${overflow.groupId}`;
+          const hiddenTitle = () => overflow.hiddenEvents.map(event => `${formatTime(event.startDate, dateConfig())} ${event.title}`).join("\n");
+          return [_$ssr(_tmpl$32, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(messages().hiddenOverlappingEvents({
+            count: overflow.hiddenEvents.length
+          }), true), false), _$escape(overflow.hiddenEvents.length)), _$createComponent(Show, {
+            get when() {
+              return expandedOverflow() === key;
+            },
+            get children() {
+              return _$ssr(_tmpl$33, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
+                get each() {
+                  return overflow.hiddenEvents;
+                },
+                children: event => _$createComponent(EventChip, {
+                  event: event,
+                  get owner() {
+                    return props.owner;
+                  },
+                  get href() {
+                    return eventHref(props.owner, event);
+                  },
+                  compact: true
+                })
+              })));
+            }
+          })];
+        }
+      })));
+    }
+  })));
+};
+const YearView = props => {
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const year = createMemo(() => zonedYearMonth(props.date, dateConfig()).year);
+  const todayKey = createMemo(() => calendar.formatDateKey(props.now, dateConfig()));
+  const eventsByDay = createMemo(() => {
+    const grouped = new Map();
+    for (const event of props.events) {
+      const events = grouped.get(event.dayKey);
+      if (events) events.push(event);else grouped.set(event.dayKey, [event]);
+    }
+    return grouped;
+  });
+  const months = createMemo(() => {
+    const context = dateConfig();
+    return Array.from({
+      length: 12
+    }, (_, month) => {
+      const date = zonedMonthDate(year(), month, context);
+      return {
+        date,
+        label: date.toLocaleDateString(context.locale ?? "en", {
+          month: "long",
+          timeZone: context.timeZone
+        }),
+        days: calendar.getMonthGrid(year(), month, context).flat().map(day => {
+          const key = calendar.formatDateKey(day, context);
+          return {
+            date: day,
+            events: eventsByDay().get(key) ?? [],
+            isToday: key === todayKey(),
+            outside: !calendar.isSameMonth(day, date, context),
+            number: calendar.formatDayNumber(day, context)
+          };
+        })
+      };
+    });
+  });
+  return _$ssr(_tmpl$34, _$escape(_$createComponent(For, {
+    get each() {
+      return months();
+    },
+    children: month => _$ssr(_tmpl$35, _$escape(month.label), _$escape(_$createComponent(For, {
+      get each() {
+        return month.days;
+      },
+      children: day => _$createComponent(CalendarNavigationLink, {
+        get owner() {
+          return props.owner;
+        },
+        get href() {
+          return props.owner.getDateHref?.(day.date, "day") ?? "#";
+        },
+        get anchorProps() {
+          return {
+            class: "k2b-calendar-year__day",
+            "data-today": day.isToday ? "true" : undefined,
+            "data-outside": day.outside ? "true" : undefined
+          };
+        },
+        get children() {
+          return [day.number, _$createComponent(Show, {
+            get when() {
+              return day.events[0];
+            },
+            children: event => _$ssr(_tmpl$36, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
+              "background-color": day.isToday ? "white" : event().colorHex
+            } : undefined))
+          })];
+        }
+      })
+    })))
+  })));
+};
+const MobileMonthView = props => {
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const selectedDateKey = createMemo(() => calendar.formatDateKey(props.selectedDate, dateConfig()));
+  const selectedEvents = createMemo(() => props.events.filter(event => event.dayKey === selectedDateKey()));
+  return _$ssr(_tmpl$38, _$escape(_$createComponent(MonthView, {
+    get owner() {
+      return {
+        ...props.owner,
+        withWeekNumbers: false
+      };
+    },
+    get date() {
+      return props.date;
+    },
+    get now() {
+      return props.now;
+    },
+    get events() {
+      return props.events;
+    },
+    get labels() {
+      return props.labels;
+    }
+  })), _$escape(props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    timeZone: dateConfig().timeZone
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return selectedEvents().length > 0;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$39, _$escape(props.labels.noEvents));
+    },
+    get children() {
+      return _$ssr(_tmpl$37, _$escape(_$createComponent(For, {
+        get each() {
+          return selectedEvents();
+        },
+        children: event => _$createComponent(EventChip, {
+          event: event,
+          get owner() {
+            return props.owner;
+          },
+          get href() {
+            return eventHref(props.owner, event);
+          }
+        })
+      })));
+    }
+  })));
+};
+const CalendarBody = props => _$ssr(_tmpl$40, _$escape(props.children));
+const Calendar = props => {
+  const messages = useUiMessages();
+  // Subviews derive their date config from the owner props, so the inherited
+  // render locale is merged here once; an explicit dateConfig.locale wins.
+  const localizedConfig = useDateConfigLocale(() => props.dateConfig);
+  const owner = mergeProps(props, {
+    get dateConfig() {
+      return localizedConfig();
+    }
+  });
+  const view = () => props.view ?? "month";
+  const dateConfig = createMemo(() => ownerDateConfig(owner));
+  const safeDate = value => {
+    const parsed = parseDate(value, dateConfig());
+    return validDate(parsed) ? parsed : calendar.today(dateConfig());
+  };
+  const date = createMemo(() => safeDate(props.date));
+  const selectedDate = createMemo(() => safeDate(props.selectedDate ?? props.date));
+  const [now, setNow] = createSignal(new Date());
+  const normalizedEvents = createMemo(() => normalizeEvents(props.events, dateConfig()));
+  const mergedLabels = createMemo(() => ({
+    today: messages().today,
+    day: messages().day,
+    week: messages().week,
+    month: messages().month,
+    year: messages().year,
+    allDay: messages().allDay,
+    noEvents: messages().noEvents,
+    previous: messages().previous,
+    next: messages().next,
+    ...props.labels
+  }));
+  const days = createMemo(() => {
+    if (view() === "day") return [date()];
+    return calendar.getWeekDays(date(), dateConfig());
+  });
+  onMount(() => {
+    const updateNow = () => setNow(new Date());
+    const interval = window.setInterval(updateNow, 60_000);
+    document.addEventListener("visibilitychange", updateNow);
+    onCleanup(() => {
+      window.clearInterval(interval);
+      document.removeEventListener("visibilitychange", updateNow);
+    });
+  });
+  return _$ssr(_tmpl$41, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
+    get date() {
+      return date();
+    },
+    get view() {
+      return view();
+    },
+    get labels() {
+      return mergedLabels();
+    },
+    owner: owner
+  })), _$escape(props.toolbarContent), _$escape(_$createComponent(Show, {
+    get when() {
+      return view() !== "month";
+    },
+    get fallback() {
+      return _$createComponent(CalendarBody, {
+        get children() {
+          return _$createComponent(MonthView, {
+            owner: owner,
+            get date() {
+              return date();
+            },
+            get now() {
+              return now();
+            },
+            get events() {
+              return normalizedEvents();
+            },
+            get labels() {
+              return mergedLabels();
+            }
+          });
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return view() !== "year";
+        },
+        get fallback() {
+          return _$createComponent(CalendarBody, {
+            get children() {
+              return _$createComponent(YearView, {
+                owner: owner,
+                get date() {
+                  return date();
+                },
+                get now() {
+                  return now();
+                },
+                get events() {
+                  return normalizedEvents();
+                }
+              });
+            }
+          });
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return view() !== "mobile-month";
+            },
+            get fallback() {
+              return _$createComponent(CalendarBody, {
+                get children() {
+                  return _$createComponent(MobileMonthView, {
+                    owner: owner,
+                    get date() {
+                      return date();
+                    },
+                    get now() {
+                      return now();
+                    },
+                    get selectedDate() {
+                      return selectedDate();
+                    },
+                    get events() {
+                      return normalizedEvents();
+                    },
+                    get labels() {
+                      return mergedLabels();
+                    }
+                  });
+                }
+              });
+            },
+            get children() {
+              return _$createComponent(TimeGridView, {
+                owner: owner,
+                get date() {
+                  return date();
+                },
+                get now() {
+                  return now();
+                },
+                get events() {
+                  return normalizedEvents();
+                },
+                get labels() {
+                  return mergedLabels();
+                },
+                get days() {
+                  return days();
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  })));
+};
+export default Calendar;
+//# sourceMappingURL=Calendar.js.map