@k2b/ui 0.1.0-rc.0

package/dist/browser/content/Calendar.js

@@ -0,0 +1,2168 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__title>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__meta>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__description>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<a class=k2b-calendar-event data-calendar-event>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-event data-calendar-event data-interactive=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-calendar-event role=group data-calendar-event>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div role=radiogroup aria-orientation=horizontal class="k2b-segmented-control k2b-calendar-view-switcher">`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-header__nav-button><i>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-button__label>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-calendar-header__progress aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<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><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month><div class=k2b-calendar-month__weekdays><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__day-target data-interactive=true>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<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>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__day-number>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__badge><!$><!/><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-calendar-dot>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid><div class=k2b-calendar-time-grid__days><div></div><!$><!/></div><!$><!/><div class=k2b-calendar-time-grid__scroll><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__hour><!$><!/>:00`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__now>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__column><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__slot>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview__title>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class="k2b-calendar-preview k2b-calendar-preview--timed"><div class=k2b-calendar-preview__content><!$><!/><div class=k2b-calendar-preview__label><!$><!/> - <!$><!/>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__resize><span class=k2b-calendar-time-grid__resize-icon aria-hidden=true>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__event-position><div class=k2b-calendar-time-grid__event-frame><!$><!/><!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__overflow><span class=k2b-calendar-time-grid__overflow-count>+<!$><!/>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__overflow-menu><div class=k2b-calendar-time-grid__overflow-title><!$><!/> - <!$><!/></div><!$><!/>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year__month><div class=k2b-calendar-year__title></div><div class=k2b-calendar-year__grid>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-calendar-year__indicator>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__events>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month><!$><!/><div class=k2b-calendar-mobile-month__agenda><div class=k2b-calendar-mobile-month__title></div><!$><!/>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__empty>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-calendar-body>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<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 = [(() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, () => props.event.title);
+    return _el$;
+  })(), _$createComponent(Show, {
+    get when() {
+      return showTime();
+    },
+    get children() {
+      var _el$2 = _$getNextElement(_tmpl$2);
+      _$insert(_el$2, timeLabel);
+      return _el$2;
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return showLocation();
+    },
+    get children() {
+      var _el$3 = _$getNextElement(_tmpl$2);
+      _$insert(_el$3, () => props.event.location);
+      return _el$3;
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return showDescription();
+    },
+    get children() {
+      var _el$4 = _$getNextElement(_tmpl$3);
+      _$insert(_el$4, () => props.event.description);
+      return _el$4;
+    }
+  })];
+  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 ? (() => {
+    var _el$5 = _$getNextElement(_tmpl$4);
+    _el$5.$$pointerdown = onPointerDown;
+    _$addEventListener(_el$5, "dragstart", props.onMovePointerDown ? event => event.preventDefault() : undefined);
+    _el$5.$$dblclick = onDoubleClick;
+    _el$5.$$click = onClick;
+    _$insert(_el$5, content);
+    _$effect(_p$ => {
+      var _v$ = props.href,
+        _v$2 = props.event.colorHex ? undefined : color(),
+        _v$3 = selected() ? "true" : undefined,
+        _v$4 = props.compact ? "true" : undefined,
+        _v$5 = props.fill ? "true" : undefined,
+        _v$6 = short() ? "true" : undefined,
+        _v$7 = props.moving ? "true" : undefined,
+        _v$8 = isInteractive() ? "true" : undefined,
+        _v$9 = props.event.display,
+        _v$0 = props.event.dataSpaceItemId,
+        _v$1 = style(),
+        _v$10 = props.onMovePointerDown ? false : undefined,
+        _v$11 = `${props.event.title}${props.event.allDay ? "" : `, ${formatTime(props.event.startDate, dateConfig())} to ${formatTime(props.event.endDate, dateConfig())}`}`;
+      _v$ !== _p$.e && _$setAttribute(_el$5, "href", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$5, "data-color", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$5, "data-selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$5, "data-compact", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$5, "data-fill", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$5, "data-short", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setAttribute(_el$5, "data-moving", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setAttribute(_el$5, "data-interactive", _p$.h = _v$8);
+      _v$9 !== _p$.r && _$setAttribute(_el$5, "data-display", _p$.r = _v$9);
+      _v$0 !== _p$.d && _$setAttribute(_el$5, "data-space-item-id", _p$.d = _v$0);
+      _p$.l = _$style(_el$5, _v$1, _p$.l);
+      _v$10 !== _p$.u && _$setAttribute(_el$5, "draggable", _p$.u = _v$10);
+      _v$11 !== _p$.c && _$setAttribute(_el$5, "aria-label", _p$.c = _v$11);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined
+    });
+    _$runHydrationEvents();
+    return _el$5;
+  })() : isActionable() ? (() => {
+    var _el$6 = _$getNextElement(_tmpl$5);
+    _el$6.$$keydown = onButtonKeyDown;
+    _el$6.$$pointerdown = onPointerDown;
+    _el$6.$$dblclick = onDoubleClick;
+    _el$6.$$click = onClick;
+    _$insert(_el$6, content);
+    _$effect(_p$ => {
+      var _v$12 = props.event.colorHex ? undefined : color(),
+        _v$13 = selected() ? "true" : undefined,
+        _v$14 = props.compact ? "true" : undefined,
+        _v$15 = props.fill ? "true" : undefined,
+        _v$16 = short() ? "true" : undefined,
+        _v$17 = props.moving ? "true" : undefined,
+        _v$18 = props.event.display,
+        _v$19 = style(),
+        _v$20 = `${props.event.title}${props.event.allDay ? "" : `, ${formatTime(props.event.startDate, dateConfig())} to ${formatTime(props.event.endDate, dateConfig())}`}`;
+      _v$12 !== _p$.e && _$setAttribute(_el$6, "data-color", _p$.e = _v$12);
+      _v$13 !== _p$.t && _$setAttribute(_el$6, "data-selected", _p$.t = _v$13);
+      _v$14 !== _p$.a && _$setAttribute(_el$6, "data-compact", _p$.a = _v$14);
+      _v$15 !== _p$.o && _$setAttribute(_el$6, "data-fill", _p$.o = _v$15);
+      _v$16 !== _p$.i && _$setAttribute(_el$6, "data-short", _p$.i = _v$16);
+      _v$17 !== _p$.n && _$setAttribute(_el$6, "data-moving", _p$.n = _v$17);
+      _v$18 !== _p$.s && _$setAttribute(_el$6, "data-display", _p$.s = _v$18);
+      _p$.h = _$style(_el$6, _v$19, _p$.h);
+      _v$20 !== _p$.r && _$setAttribute(_el$6, "aria-label", _p$.r = _v$20);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined
+    });
+    _$runHydrationEvents();
+    return _el$6;
+  })() : (() => {
+    var _el$7 = _$getNextElement(_tmpl$6);
+    _$setAttribute(_el$7, "data-interactive", undefined);
+    _$insert(_el$7, content);
+    _$effect(_p$ => {
+      var _v$21 = props.event.colorHex ? undefined : color(),
+        _v$22 = selected() ? "true" : undefined,
+        _v$23 = props.compact ? "true" : undefined,
+        _v$24 = props.fill ? "true" : undefined,
+        _v$25 = short() ? "true" : undefined,
+        _v$26 = props.moving ? "true" : undefined,
+        _v$27 = props.event.display,
+        _v$28 = style(),
+        _v$29 = `${props.event.title}${props.event.allDay ? "" : `, ${formatTime(props.event.startDate, dateConfig())} to ${formatTime(props.event.endDate, dateConfig())}`}`;
+      _v$21 !== _p$.e && _$setAttribute(_el$7, "data-color", _p$.e = _v$21);
+      _v$22 !== _p$.t && _$setAttribute(_el$7, "data-selected", _p$.t = _v$22);
+      _v$23 !== _p$.a && _$setAttribute(_el$7, "data-compact", _p$.a = _v$23);
+      _v$24 !== _p$.o && _$setAttribute(_el$7, "data-fill", _p$.o = _v$24);
+      _v$25 !== _p$.i && _$setAttribute(_el$7, "data-short", _p$.i = _v$25);
+      _v$26 !== _p$.n && _$setAttribute(_el$7, "data-moving", _p$.n = _v$26);
+      _v$27 !== _p$.s && _$setAttribute(_el$7, "data-display", _p$.s = _v$27);
+      _p$.h = _$style(_el$7, _v$28, _p$.h);
+      _v$29 !== _p$.r && _$setAttribute(_el$7, "aria-label", _p$.r = _v$29);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined
+    });
+    return _el$7;
+  })();
+};
+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 ? (() => {
+    var _el$8 = _$getNextElement(_tmpl$7);
+    _$spread(_el$8, _$mergeProps(() => props.anchorProps, {
+      get href() {
+        return props.href;
+      },
+      "onClick": navigateHref,
+      "onPointerEnter": preload,
+      "onFocus": preload
+    }), false, true);
+    _$insert(_el$8, () => props.children);
+    _$runHydrationEvents();
+    return _el$8;
+  })() : 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;
+    }
+  })) : (() => {
+    var _el$9 = _$getNextElement(_tmpl$7);
+    _$spread(_el$9, _$mergeProps(() => props.anchorProps, {
+      get href() {
+        return props.href;
+      },
+      "onPointerEnter": preload,
+      "onFocus": preload
+    }), false, true);
+    _$insert(_el$9, () => props.children);
+    _$runHydrationEvents();
+    return _el$9;
+  })();
+};
+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 (() => {
+    var _el$0 = _$getNextElement(_tmpl$8);
+    _$insert(_el$0, _$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;
+          }
+        });
+      }
+    }));
+    _$effect(() => _$setAttribute(_el$0, "aria-label", messages().calendarView));
+    return _el$0;
+  })();
+};
+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() {
+        var _el$1 = _$getNextElement(_tmpl$9);
+        _$className(_el$1, `ti ${icon}`);
+        return _el$1;
+      }
+    }) : props.owner.onDateChange ? (() => {
+      var _el$10 = _$getNextElement(_tmpl$0),
+        _el$11 = _el$10.firstChild;
+      _el$10.$$click = () => goDate(date);
+      _$setAttribute(_el$10, "aria-label", label);
+      _$className(_el$11, `ti ${icon}`);
+      _$runHydrationEvents();
+      return _el$10;
+    })() : _$createComponent(CalendarNavigationLink, {
+      get owner() {
+        return props.owner;
+      },
+      href: href ?? "#",
+      anchorProps: {
+        "aria-label": label,
+        title: label,
+        class: "k2b-calendar-header__nav-button"
+      },
+      get children() {
+        var _el$12 = _$getNextElement(_tmpl$9);
+        _$className(_el$12, `ti ${icon}`);
+        return _el$12;
+      }
+    });
+  };
+  const todayButton = () => {
+    const today = calendar.today(dateConfig());
+    const href = props.owner.getDateHref?.(today, props.view);
+    const label = (() => {
+      var _el$13 = _$getNextElement(_tmpl$1);
+      _$insert(_el$13, () => props.labels.today);
+      return _el$13;
+    })();
+    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 (() => {
+    var _el$14 = _$getNextElement(_tmpl$11),
+      _el$15 = _el$14.firstChild,
+      _el$17 = _el$15.firstChild,
+      [_el$18, _co$] = _$getNextMarker(_el$17.nextSibling),
+      _el$19 = _el$18.nextSibling,
+      [_el$20, _co$2] = _$getNextMarker(_el$19.nextSibling),
+      _el$16 = _el$20.nextSibling,
+      _el$21 = _el$15.nextSibling,
+      _el$22 = _el$21.firstChild,
+      [_el$23, _co$3] = _$getNextMarker(_el$22.nextSibling),
+      _el$24 = _el$23.nextSibling,
+      [_el$25, _co$4] = _$getNextMarker(_el$24.nextSibling),
+      _el$26 = _el$25.nextSibling,
+      [_el$27, _co$5] = _$getNextMarker(_el$26.nextSibling),
+      _el$29 = _el$21.nextSibling,
+      [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
+    _$insert(_el$15, () => navButton(previous(), "ti-chevron-left", props.labels.previous), _el$18, _co$);
+    _$insert(_el$15, () => navButton(next(), "ti-chevron-right", props.labels.next), _el$20, _co$2);
+    _$insert(_el$16, title);
+    _$insert(_el$21, todayButton, _el$23, _co$3);
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!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();
+          }
+        });
+      }
+    }), _el$25, _co$4);
+    _$insert(_el$21, () => props.owner.toolbarActions, _el$27, _co$5);
+    _$insert(_el$14, _$createComponent(Show, {
+      get when() {
+        return props.owner.navigationPending;
+      },
+      get children() {
+        return _$getNextElement(_tmpl$10);
+      }
+    }), _el$30, _co$6);
+    return _el$14;
+  })();
+};
+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 (() => {
+    var _el$31 = _$getNextElement(_tmpl$13),
+      _el$32 = _el$31.firstChild,
+      _el$34 = _el$32.firstChild,
+      [_el$35, _co$7] = _$getNextMarker(_el$34.nextSibling),
+      _el$36 = _el$35.nextSibling,
+      [_el$37, _co$8] = _$getNextMarker(_el$36.nextSibling),
+      _el$38 = _el$32.nextSibling,
+      [_el$39, _co$9] = _$getNextMarker(_el$38.nextSibling);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return props.owner.withWeekNumbers;
+      },
+      get children() {
+        var _el$33 = _$getNextElement(_tmpl$12);
+        _$insert(_el$33, () => messages().weekShort);
+        return _el$33;
+      }
+    }), _el$35, _co$7);
+    _$insert(_el$32, _$createComponent(For, {
+      get each() {
+        return weekdays();
+      },
+      children: day => (() => {
+        var _el$40 = _$getNextElement(_tmpl$12);
+        _$insert(_el$40, day);
+        return _el$40;
+      })()
+    }), _el$37, _co$8);
+    _$insert(_el$31, _$createComponent(For, {
+      get each() {
+        return weeks();
+      },
+      children: week => (() => {
+        var _el$41 = _$getNextElement(_tmpl$15),
+          _el$43 = _el$41.firstChild,
+          [_el$44, _co$0] = _$getNextMarker(_el$43.nextSibling),
+          _el$45 = _el$44.nextSibling,
+          [_el$46, _co$1] = _$getNextMarker(_el$45.nextSibling);
+        _$insert(_el$41, _$createComponent(Show, {
+          get when() {
+            return props.owner.withWeekNumbers;
+          },
+          get children() {
+            var _el$42 = _$getNextElement(_tmpl$14);
+            _$insert(_el$42, () => zonedWeekNumber(week[0], dateConfig()));
+            return _el$42;
+          }
+        }), _el$44, _co$0);
+        _$insert(_el$41, _$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 (() => {
+              var _el$47 = _$getNextElement(_tmpl$18),
+                _el$63 = _el$47.firstChild,
+                [_el$64, _co$15] = _$getNextMarker(_el$63.nextSibling),
+                _el$49 = _el$64.nextSibling,
+                _el$50 = _el$49.firstChild,
+                [_el$51, _co$10] = _$getNextMarker(_el$50.nextSibling),
+                _el$52 = _el$51.nextSibling,
+                [_el$53, _co$11] = _$getNextMarker(_el$52.nextSibling),
+                _el$54 = _el$49.nextSibling,
+                _el$56 = _el$54.firstChild,
+                [_el$57, _co$12] = _$getNextMarker(_el$56.nextSibling),
+                _el$58 = _el$57.nextSibling,
+                [_el$59, _co$13] = _$getNextMarker(_el$58.nextSibling),
+                _el$60 = _el$59.nextSibling,
+                [_el$61, _co$14] = _$getNextMarker(_el$60.nextSibling),
+                _el$62 = _el$54.nextSibling;
+              _$setAttribute(_el$47, "data-calendar-day-key", dayKey);
+              _$setAttribute(_el$47, "data-outside", !sameMonth ? "true" : undefined);
+              _$insert(_el$47, _$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() {
+                  var _el$48 = _$getNextElement(_tmpl$16);
+                  _$spread(_el$48, _$mergeProps({
+                    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)), false, false);
+                  _$runHydrationEvents();
+                  return _el$48;
+                }
+              }), _el$64, _co$15);
+              _$insert(_el$49, _$createComponent(Show, {
+                get when() {
+                  return props.owner.onSlotActivate && href;
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$65 = _$getNextElement(_tmpl$19);
+                    _$setAttribute(_el$65, "data-today", isToday ? "true" : undefined);
+                    _$setAttribute(_el$65, "data-outside", !sameMonth ? "true" : undefined);
+                    _$insert(_el$65, () => calendar.formatDayNumber(day, dateConfig()));
+                    return _el$65;
+                  })();
+                },
+                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());
+                  }
+                })
+              }), _el$51, _co$10);
+              _$insert(_el$49, _$createComponent(Show, {
+                when: dayBadge,
+                children: badge => (() => {
+                  var _el$66 = _$getNextElement(_tmpl$20),
+                    _el$67 = _el$66.firstChild,
+                    [_el$68, _co$16] = _$getNextMarker(_el$67.nextSibling),
+                    _el$69 = _el$68.nextSibling,
+                    [_el$70, _co$17] = _$getNextMarker(_el$69.nextSibling);
+                  _$insert(_el$66, _$createComponent(Show, {
+                    get when() {
+                      return badge().icon;
+                    },
+                    children: icon => (() => {
+                      var _el$71 = _$getNextElement(_tmpl$9);
+                      _$effect(() => _$className(_el$71, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
+                      return _el$71;
+                    })()
+                  }), _el$68, _co$16);
+                  _$insert(_el$66, () => badge().label, _el$70, _co$17);
+                  return _el$66;
+                })()
+              }), _el$53, _co$11);
+              _$insert(_el$54, _$createComponent(Show, {
+                get when() {
+                  return eventStack().preview;
+                },
+                get children() {
+                  var _el$55 = _$getNextElement(_tmpl$17);
+                  _$insert(_el$55, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent);
+                  return _el$55;
+                }
+              }), _el$57, _co$12);
+              _$insert(_el$54, _$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;
+                  }
+                })
+              }), _el$59, _co$13);
+              _$insert(_el$54, _$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 ["+", _$memo(() => eventStack().hiddenCount), " more"];
+                    }
+                  });
+                }
+              }), _el$61, _co$14);
+              _$insert(_el$62, _$createComponent(For, {
+                get each() {
+                  return events.slice(0, 4);
+                },
+                children: event => (() => {
+                  var _el$72 = _$getNextElement(_tmpl$21);
+                  _$effect(_p$ => {
+                    var _v$32 = event.colorHex ? undefined : event.color ?? "blue",
+                      _v$33 = event.colorHex ? {
+                        "background-color": event.colorHex
+                      } : undefined;
+                    _v$32 !== _p$.e && _$setAttribute(_el$72, "data-color", _p$.e = _v$32);
+                    _p$.t = _$style(_el$72, _v$33, _p$.t);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  return _el$72;
+                })()
+              }));
+              _$effect(() => _$setAttribute(_el$47, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
+              return _el$47;
+            })();
+          }
+        }), _el$46, _co$1);
+        _$effect(() => _$setAttribute(_el$41, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
+        return _el$41;
+      })()
+    }), _el$39, _co$9);
+    _$effect(_p$ => {
+      var _v$30 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`,
+        _v$31 = props.owner.withWeekNumbers ? "true" : undefined;
+      _v$30 !== _p$.e && _$setStyleProperty(_el$31, "grid-template-rows", _p$.e = _v$30);
+      _v$31 !== _p$.t && _$setAttribute(_el$32, "data-week-numbers", _p$.t = _v$31);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$31;
+  })();
+};
+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 (() => {
+    var _el$73 = _$getNextElement(_tmpl$23),
+      _el$74 = _el$73.firstChild,
+      _el$75 = _el$74.firstChild,
+      _el$76 = _el$75.nextSibling,
+      [_el$77, _co$18] = _$getNextMarker(_el$76.nextSibling),
+      _el$87 = _el$74.nextSibling,
+      [_el$88, _co$21] = _$getNextMarker(_el$87.nextSibling),
+      _el$82 = _el$88.nextSibling,
+      _el$83 = _el$82.firstChild,
+      _el$84 = _el$83.firstChild,
+      _el$85 = _el$84.nextSibling,
+      [_el$86, _co$20] = _$getNextMarker(_el$85.nextSibling);
+    _$insert(_el$74, _$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 [(() => {
+              var _el$89 = _$getNextElement(_tmpl$24);
+              _$insert(_el$89, () => formatDay(day, dateConfig()));
+              _$effect(() => _$setAttribute(_el$89, "data-today", today() ? "true" : undefined));
+              return _el$89;
+            })(), _$createComponent(Show, {
+              when: dayBadge,
+              children: badge => (() => {
+                var _el$90 = _$getNextElement(_tmpl$25),
+                  _el$91 = _el$90.firstChild,
+                  [_el$92, _co$22] = _$getNextMarker(_el$91.nextSibling),
+                  _el$93 = _el$92.nextSibling,
+                  [_el$94, _co$23] = _$getNextMarker(_el$93.nextSibling);
+                _$insert(_el$90, _$createComponent(Show, {
+                  get when() {
+                    return badge().icon;
+                  },
+                  children: icon => (() => {
+                    var _el$95 = _$getNextElement(_tmpl$9);
+                    _$effect(() => _$className(_el$95, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
+                    return _el$95;
+                  })()
+                }), _el$92, _co$22);
+                _$insert(_el$90, () => badge().label, _el$94, _co$23);
+                return _el$90;
+              })()
+            })];
+          }
+        });
+      }
+    }), _el$77, _co$18);
+    _$insert(_el$73, _$createComponent(Show, {
+      get when() {
+        return !props.owner.hideAllDay;
+      },
+      get children() {
+        var _el$78 = _$getNextElement(_tmpl$22),
+          _el$79 = _el$78.firstChild,
+          _el$80 = _el$79.nextSibling,
+          [_el$81, _co$19] = _$getNextMarker(_el$80.nextSibling);
+        _$insert(_el$79, () => props.labels.allDay);
+        _$insert(_el$78, _$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 (() => {
+              var _el$96 = _$getNextElement(_tmpl$26),
+                _el$97 = _el$96.firstChild,
+                _el$98 = _el$97.firstChild,
+                [_el$99, _co$24] = _$getNextMarker(_el$98.nextSibling),
+                _el$100 = _el$99.nextSibling,
+                [_el$101, _co$25] = _$getNextMarker(_el$100.nextSibling);
+              _$setAttribute(_el$96, "data-calendar-day-key", dayKey);
+              _$spread(_el$96, _$mergeProps({
+                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)), false, true);
+              _$insert(_el$97, _$createComponent(For, {
+                each: previewAllDay,
+                children: event => (() => {
+                  var _el$102 = _$getNextElement(_tmpl$17);
+                  _$insert(_el$102, () => event.title);
+                  return _el$102;
+                })()
+              }), _el$99, _co$24);
+              _$insert(_el$97, _$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;
+                  }
+                })
+              }), _el$101, _co$25);
+              _$runHydrationEvents();
+              return _el$96;
+            })();
+          }
+        }), _el$81, _co$19);
+        _$effect(_p$ => {
+          var _v$34 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+            _v$35 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
+          _v$34 !== _p$.e && _$setStyleProperty(_el$78, "grid-template-columns", _p$.e = _v$34);
+          _v$35 !== _p$.t && _$setStyleProperty(_el$78, "max-height", _p$.t = _v$35);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$78;
+      }
+    }), _el$88, _co$21);
+    var _ref$ = scrollContainer;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$82) : scrollContainer = _el$82;
+    var _ref$2 = timeGrid;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$83) : timeGrid = _el$83;
+    var _ref$3 = timeGutter;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$84) : timeGutter = _el$84;
+    _$insert(_el$84, _$createComponent(For, {
+      get each() {
+        return hours();
+      },
+      children: hour => (() => {
+        var _el$103 = _$getNextElement(_tmpl$27),
+          _el$105 = _el$103.firstChild,
+          [_el$106, _co$26] = _$getNextMarker(_el$105.nextSibling),
+          _el$104 = _el$106.nextSibling;
+        _$use(element => {
+          if (hour === businessStartHour()) defaultHourMarker = element;
+        }, _el$103);
+        _$insert(_el$103, () => `${hour}`.padStart(2, "0"), _el$106, _co$26);
+        _$effect(() => _$setAttribute(_el$103, "data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined));
+        return _el$103;
+      })()
+    }));
+    _$insert(_el$83, _$createComponent(For, {
+      get each() {
+        return props.days;
+      },
+      children: day => {
+        const dayKey = calendar.formatDateKey(day, dateConfig());
+        const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
+        return (() => {
+          var _el$107 = _$getNextElement(_tmpl$29),
+            _el$109 = _el$107.firstChild,
+            [_el$110, _co$27] = _$getNextMarker(_el$109.nextSibling),
+            _el$111 = _el$110.nextSibling,
+            [_el$112, _co$28] = _$getNextMarker(_el$111.nextSibling),
+            _el$113 = _el$112.nextSibling,
+            [_el$114, _co$29] = _$getNextMarker(_el$113.nextSibling),
+            _el$115 = _el$114.nextSibling,
+            [_el$116, _co$30] = _$getNextMarker(_el$115.nextSibling),
+            _el$117 = _el$116.nextSibling,
+            [_el$118, _co$31] = _$getNextMarker(_el$117.nextSibling);
+          _$insert(_el$107, _$createComponent(Show, {
+            get when() {
+              return currentTimeLine(day) !== null;
+            },
+            get children() {
+              var _el$108 = _$getNextElement(_tmpl$28);
+              _$effect(_$p => _$setStyleProperty(_el$108, "top", `${currentTimeLine(day) ?? 0}%`));
+              return _el$108;
+            }
+          }), _el$110, _co$27);
+          _$insert(_el$107, _$createComponent(For, {
+            get each() {
+              return hours();
+            },
+            children: hour => (() => {
+              var _el$119 = _$getNextElement(_tmpl$30);
+              _$spread(_el$119, _$mergeProps({
+                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), {
+                "onPointerDown": startRange
+              }), false, false);
+              _$runHydrationEvents();
+              return _el$119;
+            })()
+          }), _el$112, _co$28);
+          _$insert(_el$107, _$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 (() => {
+                var _el$120 = _$getNextElement(_tmpl$32),
+                  _el$121 = _el$120.firstChild,
+                  _el$129 = _el$121.firstChild,
+                  [_el$130, _co$34] = _$getNextMarker(_el$129.nextSibling),
+                  _el$123 = _el$130.nextSibling,
+                  _el$125 = _el$123.firstChild,
+                  [_el$126, _co$32] = _$getNextMarker(_el$125.nextSibling),
+                  _el$124 = _el$126.nextSibling,
+                  _el$127 = _el$124.nextSibling,
+                  [_el$128, _co$33] = _$getNextMarker(_el$127.nextSibling);
+                _$setAttribute(_el$120, "data-short", short ? "true" : undefined);
+                _$insert(_el$121, _$createComponent(Show, {
+                  get when() {
+                    return event.title;
+                  },
+                  get children() {
+                    var _el$122 = _$getNextElement(_tmpl$31);
+                    _$insert(_el$122, () => event.title);
+                    return _el$122;
+                  }
+                }), _el$130, _co$34);
+                _$insert(_el$123, () => formatTime(event.startDate, dateConfig()), _el$126, _co$32);
+                _$insert(_el$123, () => formatTime(event.endDate, dateConfig()), _el$128, _co$33);
+                _$effect(_p$ => {
+                  var _v$41 = `${layout.top}%`,
+                    _v$42 = `${layout.height}%`;
+                  _v$41 !== _p$.e && _$setStyleProperty(_el$120, "top", _p$.e = _v$41);
+                  _v$42 !== _p$.t && _$setStyleProperty(_el$120, "height", _p$.t = _v$42);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$120;
+              })();
+            }
+          }), _el$114, _co$29);
+          _$insert(_el$107, _$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 (() => {
+                var _el$131 = _$getNextElement(_tmpl$34),
+                  _el$132 = _el$131.firstChild,
+                  _el$134 = _el$132.firstChild,
+                  [_el$135, _co$35] = _$getNextMarker(_el$134.nextSibling),
+                  _el$136 = _el$135.nextSibling,
+                  [_el$137, _co$36] = _$getNextMarker(_el$136.nextSibling);
+                _$insert(_el$132, _$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;
+                  }
+                }), _el$135, _co$35);
+                _$insert(_el$132, _$createComponent(Show, {
+                  get when() {
+                    return props.owner.onEventResize;
+                  },
+                  get children() {
+                    var _el$133 = _$getNextElement(_tmpl$33);
+                    _el$133.addEventListener("dragstart", event => event.preventDefault());
+                    _el$133.$$pointerdown = resizeStart;
+                    _$setAttribute(_el$133, "draggable", false);
+                    _$effect(() => _$setAttribute(_el$133, "aria-label", messages().resizeEvent));
+                    _$runHydrationEvents();
+                    return _el$133;
+                  }
+                }), _el$137, _co$36);
+                _$effect(_p$ => {
+                  var _v$43 = `${layout.top}%`,
+                    _v$44 = `${layout.height}%`,
+                    _v$45 = position.left,
+                    _v$46 = position.width,
+                    _v$47 = String(20 + layoutItem.lane);
+                  _v$43 !== _p$.e && _$setStyleProperty(_el$131, "top", _p$.e = _v$43);
+                  _v$44 !== _p$.t && _$setStyleProperty(_el$131, "height", _p$.t = _v$44);
+                  _v$45 !== _p$.a && _$setStyleProperty(_el$131, "left", _p$.a = _v$45);
+                  _v$46 !== _p$.o && _$setStyleProperty(_el$131, "width", _p$.o = _v$46);
+                  _v$47 !== _p$.i && _$setStyleProperty(_el$131, "z-index", _p$.i = _v$47);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined
+                });
+                return _el$131;
+              })();
+            }
+          }), _el$116, _co$30);
+          _$insert(_el$107, _$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 [(() => {
+                var _el$138 = _$getNextElement(_tmpl$35),
+                  _el$139 = _el$138.firstChild,
+                  _el$140 = _el$139.firstChild,
+                  _el$141 = _el$140.nextSibling,
+                  [_el$142, _co$37] = _$getNextMarker(_el$141.nextSibling);
+                _el$138.$$click = event => {
+                  event.stopPropagation();
+                  setExpandedOverflow(expandedOverflow() === key ? "" : key);
+                };
+                _$insert(_el$139, () => overflow.hiddenEvents.length, _el$142, _co$37);
+                _$effect(_p$ => {
+                  var _v$48 = `${layout.top}%`,
+                    _v$49 = `${layout.height}%`,
+                    _v$50 = hiddenTitle(),
+                    _v$51 = messages().hiddenOverlappingEvents({
+                      count: overflow.hiddenEvents.length
+                    });
+                  _v$48 !== _p$.e && _$setStyleProperty(_el$138, "top", _p$.e = _v$48);
+                  _v$49 !== _p$.t && _$setStyleProperty(_el$138, "height", _p$.t = _v$49);
+                  _v$50 !== _p$.a && _$setAttribute(_el$138, "title", _p$.a = _v$50);
+                  _v$51 !== _p$.o && _$setAttribute(_el$138, "aria-label", _p$.o = _v$51);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                _$runHydrationEvents();
+                return _el$138;
+              })(), _$createComponent(Show, {
+                get when() {
+                  return expandedOverflow() === key;
+                },
+                get children() {
+                  var _el$143 = _$getNextElement(_tmpl$36),
+                    _el$144 = _el$143.firstChild,
+                    _el$146 = _el$144.firstChild,
+                    [_el$147, _co$38] = _$getNextMarker(_el$146.nextSibling),
+                    _el$145 = _el$147.nextSibling,
+                    _el$148 = _el$145.nextSibling,
+                    [_el$149, _co$39] = _$getNextMarker(_el$148.nextSibling),
+                    _el$150 = _el$144.nextSibling,
+                    [_el$151, _co$40] = _$getNextMarker(_el$150.nextSibling);
+                  _$insert(_el$144, () => formatTime(overflow.groupStartDate, dateConfig()), _el$147, _co$38);
+                  _$insert(_el$144, () => formatTime(overflow.groupEndDate, dateConfig()), _el$149, _co$39);
+                  _$insert(_el$143, _$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
+                    })
+                  }), _el$151, _co$40);
+                  _$effect(_$p => _$setStyleProperty(_el$143, "top", `${layout.top}%`));
+                  return _el$143;
+                }
+              })];
+            }
+          }), _el$118, _co$31);
+          _$effect(_p$ => {
+            var _v$39 = dayColumnMinWidth(layouts()),
+              _v$40 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+            _v$39 !== _p$.e && _$setStyleProperty(_el$107, "min-width", _p$.e = _v$39);
+            _v$40 !== _p$.t && _$setStyleProperty(_el$107, "grid-template-rows", _p$.t = _v$40);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$107;
+        })();
+      }
+    }), _el$86, _co$20);
+    _$effect(_p$ => {
+      var _v$36 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+        _v$37 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+        _v$38 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+      _v$36 !== _p$.e && _$setStyleProperty(_el$74, "grid-template-columns", _p$.e = _v$36);
+      _v$37 !== _p$.t && _$setStyleProperty(_el$83, "grid-template-columns", _p$.t = _v$37);
+      _v$38 !== _p$.a && _$setStyleProperty(_el$84, "grid-template-rows", _p$.a = _v$38);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$73;
+  })();
+};
+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 (() => {
+    var _el$152 = _$getNextElement(_tmpl$37);
+    _$insert(_el$152, _$createComponent(For, {
+      get each() {
+        return months();
+      },
+      children: month => (() => {
+        var _el$153 = _$getNextElement(_tmpl$38),
+          _el$154 = _el$153.firstChild,
+          _el$155 = _el$154.nextSibling;
+        _$insert(_el$154, () => month.label);
+        _$insert(_el$155, _$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 [_$memo(() => day.number), _$createComponent(Show, {
+                get when() {
+                  return day.events[0];
+                },
+                children: event => (() => {
+                  var _el$156 = _$getNextElement(_tmpl$39);
+                  _$effect(_p$ => {
+                    var _v$52 = event().colorHex ? undefined : event().color ?? "blue",
+                      _v$53 = day.isToday ? "true" : undefined,
+                      _v$54 = event().colorHex ? {
+                        "background-color": day.isToday ? "white" : event().colorHex
+                      } : undefined;
+                    _v$52 !== _p$.e && _$setAttribute(_el$156, "data-color", _p$.e = _v$52);
+                    _v$53 !== _p$.t && _$setAttribute(_el$156, "data-today", _p$.t = _v$53);
+                    _p$.a = _$style(_el$156, _v$54, _p$.a);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined
+                  });
+                  return _el$156;
+                })()
+              })];
+            }
+          })
+        }));
+        return _el$153;
+      })()
+    }));
+    return _el$152;
+  })();
+};
+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 (() => {
+    var _el$157 = _$getNextElement(_tmpl$41),
+      _el$163 = _el$157.firstChild,
+      [_el$164, _co$42] = _$getNextMarker(_el$163.nextSibling),
+      _el$158 = _el$164.nextSibling,
+      _el$159 = _el$158.firstChild,
+      _el$161 = _el$159.nextSibling,
+      [_el$162, _co$41] = _$getNextMarker(_el$161.nextSibling);
+    _$insert(_el$157, _$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;
+      }
+    }), _el$164, _co$42);
+    _$insert(_el$159, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      timeZone: dateConfig().timeZone
+    }));
+    _$insert(_el$158, _$createComponent(Show, {
+      get when() {
+        return selectedEvents().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$165 = _$getNextElement(_tmpl$42);
+          _$insert(_el$165, () => props.labels.noEvents);
+          return _el$165;
+        })();
+      },
+      get children() {
+        var _el$160 = _$getNextElement(_tmpl$40);
+        _$insert(_el$160, _$createComponent(For, {
+          get each() {
+            return selectedEvents();
+          },
+          children: event => _$createComponent(EventChip, {
+            event: event,
+            get owner() {
+              return props.owner;
+            },
+            get href() {
+              return eventHref(props.owner, event);
+            }
+          })
+        }));
+        return _el$160;
+      }
+    }), _el$162, _co$41);
+    return _el$157;
+  })();
+};
+const CalendarBody = props => (() => {
+  var _el$166 = _$getNextElement(_tmpl$43);
+  _$insert(_el$166, () => props.children);
+  return _el$166;
+})();
+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 (() => {
+    var _el$167 = _$getNextElement(_tmpl$44),
+      _el$168 = _el$167.firstChild,
+      [_el$169, _co$43] = _$getNextMarker(_el$168.nextSibling),
+      _el$170 = _el$169.nextSibling,
+      [_el$171, _co$44] = _$getNextMarker(_el$170.nextSibling),
+      _el$172 = _el$171.nextSibling,
+      [_el$173, _co$45] = _$getNextMarker(_el$172.nextSibling);
+    _$insert(_el$167, _$createComponent(CalendarHeader, {
+      get date() {
+        return date();
+      },
+      get view() {
+        return view();
+      },
+      get labels() {
+        return mergedLabels();
+      },
+      owner: owner
+    }), _el$169, _co$43);
+    _$insert(_el$167, () => props.toolbarContent, _el$171, _co$44);
+    _$insert(_el$167, _$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();
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    }), _el$173, _co$45);
+    _$effect(_p$ => {
+      var _v$55 = `k2b-content-calendar ${props.class ?? ""}`,
+        _v$56 = props.navigationPending ? "true" : undefined;
+      _v$55 !== _p$.e && _$className(_el$167, _p$.e = _v$55);
+      _v$56 !== _p$.t && _$setAttribute(_el$167, "aria-busy", _p$.t = _v$56);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$167;
+  })();
+};
+export default Calendar;
+_$delegateEvents(["click", "dblclick", "pointerdown", "keydown"]);
+//# sourceMappingURL=Calendar.js.map