@k2b/ui 0.20.0 → 0.21.0

package/dist/ssr/content/Calendar.js

@@ -4,61 +4,85 @@ import { ssrElement as _$ssrElement } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { ssrStyle as _$ssrStyle } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
-import { escape as _$escape } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
-var _tmpl$ = "<span class=\"k2b-calendar-event__marker\" aria-hidden=\"true\"></span>",
-  _tmpl$2 = ["<span class=\"k2b-calendar-event__title\">", "", "</span>"],
-  _tmpl$3 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
-  _tmpl$4 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
-  _tmpl$5 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
-  _tmpl$6 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
-  _tmpl$7 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
-  _tmpl$8 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
-  _tmpl$9 = ["<i class=\"", "\"></i>"],
-  _tmpl$0 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
-  _tmpl$1 = ["<span class=\"k2b-button__label\">", "</span>"],
-  _tmpl$10 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
-  _tmpl$11 = ["<header class=\"k2b-calendar-header\"><div class=\"k2b-calendar-header__navigation\">", "", "<div class=\"k2b-calendar-header__title\">", "</div></div><div class=\"k2b-calendar-header__actions\">", "", "", "</div>", "</header>"],
-  _tmpl$12 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
-  _tmpl$13 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
-  _tmpl$14 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
-  _tmpl$15 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
-  _tmpl$16 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
-  _tmpl$17 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
-  _tmpl$18 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
-  _tmpl$19 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
-  _tmpl$20 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
-  _tmpl$21 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-calendar-time-grid\"><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
-  _tmpl$23 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
-  _tmpl$24 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
-  _tmpl$25 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
-  _tmpl$26 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
-  _tmpl$27 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
-  _tmpl$28 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
-  _tmpl$30 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
-  _tmpl$31 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
-  _tmpl$32 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
-  _tmpl$33 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
-  _tmpl$34 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
-  _tmpl$35 = ["<div class=\"k2b-calendar-year\">", "</div>"],
-  _tmpl$36 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
-  _tmpl$37 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
-  _tmpl$38 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
-  _tmpl$39 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
-  _tmpl$40 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
-  _tmpl$41 = ["<div class=\"k2b-calendar-body\">", "</div>"],
-  _tmpl$42 = ["<section class=\"", "\"", ">", "", "", "</section>"];
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-calendar-event__time\">", "</span>"],
+  _tmpl$2 = "<span class=\"k2b-calendar-event__marker\" aria-hidden=\"true\"></span>",
+  _tmpl$3 = ["<span class=\"k2b-calendar-event__title\">", "", "</span>"],
+  _tmpl$4 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
+  _tmpl$5 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
+  _tmpl$6 = ["<span class=\"k2b-calendar-event__hint\" data-edge=\"start\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$7 = ["<span class=\"k2b-calendar-event__hint\" data-edge=\"end\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$8 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
+  _tmpl$9 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
+  _tmpl$0 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
+  _tmpl$1 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
+  _tmpl$10 = ["<i class=\"", "\"></i>"],
+  _tmpl$11 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
+  _tmpl$12 = ["<span class=\"k2b-button__label\">", "</span>"],
+  _tmpl$13 = ["<div class=\"k2b-calendar-header__content\">", "</div>"],
+  _tmpl$14 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
+  _tmpl$15 = ["<header class=\"k2b-calendar-header\"><div class=\"k2b-calendar-header__navigation\">", "", "<div class=\"k2b-calendar-header__title\"><span>", "</span>", "</div></div>", "<div class=\"k2b-calendar-header__actions\">", "", "", "</div>", "</header>"],
+  _tmpl$16 = ["<span class=\"k2b-calendar-header__title-size\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$17 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
+  _tmpl$18 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
+  _tmpl$19 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
+  _tmpl$20 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
+  _tmpl$22 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
+  _tmpl$23 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
+  _tmpl$24 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
+  _tmpl$25 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
+  _tmpl$26 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\">", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\" role=\"row\"", ">", "", "</div>", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\"", ">", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-calendar-month__week-number\" role=\"rowheader\">", "</div>"],
+  _tmpl$30 = ["<div class=\"k2b-calendar-month__week\" role=\"row\"", ">", "", "</div>"],
+  _tmpl$31 = ["<button type=\"button\" class=\"k2b-calendar-month__week-link\" tabindex=\"-1\"", ">", "</button>"],
+  _tmpl$32 = ["<button type=\"button\" class=\"k2b-calendar-month__more\" tabindex=\"-1\" style=\"", "\"", " aria-haspopup=\"dialog\"", "><span class=\"k2b-calendar-month__more-long\">", "</span><span class=\"k2b-calendar-month__more-short\">+", "</span></button>"],
+  _tmpl$33 = ["<div class=\"k2b-calendar-month__day\" role=\"gridcell\"", "><div class=\"k2b-calendar-month__day-header\"><span class=\"k2b-calendar-month__day-number\"", ">", "</span>", "</div><div class=\"k2b-calendar-month__lanes\">", "", "", "</div></div>"],
+  _tmpl$34 = ["<div class=\"k2b-calendar-month__segment\" style=\"", "\">", "</div>"],
+  _tmpl$35 = ["<ul class=\"k2b-calendar-day-list__events\">", "</ul>"],
+  _tmpl$36 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
+  _tmpl$37 = ["<div class=\"k2b-calendar-day-list\"><div class=\"k2b-calendar-day-list__title\">", "</div>", "<div class=\"k2b-calendar-day-list__actions\">", "", "</div></div>"],
+  _tmpl$38 = ["<p class=\"k2b-calendar-day-list__empty\">", "</p>"],
+  _tmpl$39 = ["<li>", "</li>"],
+  _tmpl$40 = "<i class=\"ti ti-zoom-in\" aria-hidden=\"true\"></i>",
+  _tmpl$41 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
+  _tmpl$42 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
+  _tmpl$43 = ["<div class=\"k2b-calendar-time-grid\"><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
+  _tmpl$44 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
+  _tmpl$45 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
+  _tmpl$46 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
+  _tmpl$47 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
+  _tmpl$48 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
+  _tmpl$49 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
+  _tmpl$50 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
+  _tmpl$51 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
+  _tmpl$52 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
+  _tmpl$53 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
+  _tmpl$54 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
+  _tmpl$55 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
+  _tmpl$56 = ["<div class=\"k2b-calendar-year\">", "</div>"],
+  _tmpl$57 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
+  _tmpl$58 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
+  _tmpl$59 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
+  _tmpl$60 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
+  _tmpl$61 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
+  _tmpl$62 = ["<div class=\"k2b-calendar-body\">", "</div>"],
+  _tmpl$63 = ["<section class=\"", "\"", ">", "", "</section>"];
 import { Link } from "@k2b/ssr/nav";
 import { dates as calendar } from "@k2b/stdlib";
-import { createMemo, createSignal, For, mergeProps, onCleanup, onMount, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, For, mergeProps, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Button } from "../actions/Button";
+import { GestureMenu } from "../actions/GestureMenu";
 import SegmentedControl from "../actions/SegmentedControl";
 import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { layoutCalendarIntervals } from "./calendar-event-layout";
+import { useCalendarMessages } from "./calendar-messages";
+import { fitMonthWeek, layoutMonthWeek, monthLaneCapacity } from "./calendar-month-layout";
 import { calendarDayIndexAtPoint, calendarMinuteAtPoint, startCalendarPointerSession } from "./calendar-pointer";
 
 /** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
@@ -235,7 +259,7 @@ const EventChip = props => {
   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 ariaLabel = () => {
-    const label = props.event.allDay ? props.event.title : messages().calendarEventTime({
+    const label = props.label ? props.label : props.event.allDay ? props.event.title : messages().calendarEventTime({
       title: props.event.title,
       start: formatTime(props.event.startDate, dateConfig()),
       end: formatTime(props.event.endDate, dateConfig())
@@ -249,38 +273,60 @@ const EventChip = props => {
     end: props.event.endDate,
     allDay: props.event.allDay ?? false,
     durationHours: durationHours(),
-    timeLabel: timeLabel()
+    timeLabel: timeLabel(),
+    leadingTime: props.leadingTime
   });
-  const defaultContent = [_$ssr(_tmpl$2, _$escape(_$createComponent(Show, {
+  const defaultContent = [_$createComponent(Show, {
+    get when() {
+      return props.leadingTime;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$escape(props.leadingTime));
+    }
+  }), _$ssr(_tmpl$3, _$escape(_$createComponent(Show, {
     get when() {
       return props.event.display === "marker";
     },
     get children() {
-      return _$ssr(_tmpl$);
+      return _$ssr(_tmpl$2);
     }
   })), _$escape(props.event.title)), _$createComponent(Show, {
     get when() {
       return showTime();
     },
     get children() {
-      return _$ssr(_tmpl$3, _$escape(timeLabel()));
+      return _$ssr(_tmpl$4, _$escape(timeLabel()));
     }
   }), _$createComponent(Show, {
     get when() {
       return showLocation();
     },
     get children() {
-      return _$ssr(_tmpl$3, _$escape(props.event.location));
+      return _$ssr(_tmpl$4, _$escape(props.event.location));
     }
   }), _$createComponent(Show, {
     get when() {
       return showDescription();
     },
     get children() {
-      return _$ssr(_tmpl$4, _$escape(props.event.description));
+      return _$ssr(_tmpl$5, _$escape(props.event.description));
+    }
+  })];
+  const content = () => [_$createComponent(Show, {
+    get when() {
+      return props.hintStart;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$escape(props.hintStart));
+    }
+  }), renderedEvent() ?? defaultContent, _$createComponent(Show, {
+    get when() {
+      return props.hintEnd;
+    },
+    get children() {
+      return _$ssr(_tmpl$7, _$escape(props.hintEnd));
     }
   })];
-  const content = () => renderedEvent() ?? defaultContent;
   const isActionable = () => isInteractive() || Boolean(props.onMovePointerDown);
   let suppressClickUntil = 0;
   const onClick = event => {
@@ -312,7 +358,7 @@ const EventChip = props => {
       suppressClickUntil = performance.now() + 400;
     });
   };
-  return props.href ? _$ssr(_tmpl$5, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$7, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
+  return props.href ? _$ssr(_tmpl$8, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-before", props.continuesBefore ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-after", props.continuesAfter ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-bar", props.bar ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$9, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-before", props.continuesBefore ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-after", props.continuesAfter ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-bar", props.bar ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$0, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-before", props.continuesBefore ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-after", props.continuesAfter ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-bar", props.bar ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
 };
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
   const isSlotChild = event => {
@@ -395,13 +441,17 @@ const CalendarViewLinks = props => {
       refs[event.key === "Home" ? 0 : props.options.length - 1]?.click();
     }
   };
-  return _$ssr(_tmpl$8, _$ssrAttribute("aria-label", _$escape(messages().calendarView, true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(messages().calendarView, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.options;
     },
     children: (option, index) => {
       const active = () => (props.view === "mobile-month" ? "month" : props.view) === option.value;
-      const href = () => props.owner.getViewHref?.(option.value) ?? "#";
+      const href = () => {
+        const day = props.focusDay;
+        const atDay = day && !active() ? props.owner.getDateHref?.(day, option.value) : undefined;
+        return atDay ?? props.owner.getViewHref?.(option.value) ?? "#";
+      };
       return _$createComponent(CalendarNavigationLink, {
         get owner() {
           return props.owner;
@@ -430,12 +480,28 @@ const CalendarViewLinks = props => {
   })));
 };
 
+/**
+ * The same day some months later, or the last day of that month when it is shorter: a step from January 31 lands on
+ * February 28, never in March. stdlib's `addMonths` runs over into the next month.
+ */
+const addMonthsClamped = (date, months, dateConfig) => {
+  const moved = calendar.addMonths(date, months, dateConfig);
+  if (calendar.formatDateKey(moved, dateConfig).slice(8) === calendar.formatDateKey(date, dateConfig).slice(8)) return moved;
+  return calendar.addDays(calendar.startOfMonth(moved, dateConfig), -1, dateConfig);
+};
+
 /** Custom views page by day, like the day view. */
 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);
+  if (view === "year") return addMonthsClamped(date, direction * 12, dateConfig);
+  if (view === "month" || view === "mobile-month") return addMonthsClamped(date, direction, dateConfig);
   return calendar.addDays(date, direction * (view === "week" ? 7 : 1), dateConfig);
 };
+
+/** Opens a view at a day through the host's callbacks. Hosts may keep the view and the date apart, so both hear it. */
+const openViewAt = (owner, date, view) => {
+  owner.onViewChange?.(view);
+  owner.onDateChange?.(date, view);
+};
 const CalendarHeader = props => {
   const messages = useUiMessages();
   const dateConfig = () => ownerDateConfig(props.owner);
@@ -456,8 +522,51 @@ const CalendarHeader = props => {
     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());
   };
+  /**
+   * The titles this view can show around the current date: the months of the year, the weeks of the month, or a day
+   * of each weekday in every month. Their widest one sets the title's width.
+   */
+  const titleWidths = createMemo(() => {
+    const context = dateConfig();
+    if (props.view === "year") return [];
+    const {
+      year
+    } = zonedYearMonth(props.date, context);
+    if (props.view === "month" || props.view === "mobile-month") return Array.from({
+      length: 12
+    }, (_, month) => formatMonth(zonedMonthDate(year, month, context), context));
+    if (props.view === "week") {
+      const first = calendar.startOfWeek(calendar.startOfMonth(props.date, context), context);
+      return Array.from({
+        length: 6
+      }, (_, week) => {
+        const start = calendar.addDays(first, week * 7, context);
+        return `${formatDay(start, context)} - ${formatDay(calendar.addDays(start, 6, context), context)}`;
+      });
+    }
+    return Array.from({
+      length: 12
+    }, (_, month) => month).flatMap(month => {
+      const first = zonedMonthDate(year, month, context);
+      return Array.from({
+        length: 7
+      }, (_, offset) => calendar.addDays(first, 21 + offset, context).toLocaleDateString(context.locale ?? "en", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: context.timeZone
+      }));
+    });
+  });
   const goDate = date => props.owner.onDateChange?.(date, props.view);
   const goView = view => {
+    // Like the switcher's links, the other views open at the day selected in the month view.
+    const day = props.focusDay;
+    if (day && props.owner.onDateChange && view !== props.view) {
+      openViewAt(props.owner, day, view);
+      return;
+    }
     if (props.owner.onViewChange) {
       props.owner.onViewChange(view);
       return;
@@ -478,9 +587,9 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        return _$ssr(_tmpl$9, `ti ${_$escape(icon, true)}`);
+        return _$ssr(_tmpl$10, `ti ${_$escape(icon, true)}`);
       }
-    }) : props.owner.onDateChange ? _$ssr(_tmpl$0, _$ssrAttribute("aria-label", _$escape(label, true), false), `ti ${_$escape(icon, true)}`) : _$createComponent(CalendarNavigationLink, {
+    }) : props.owner.onDateChange ? _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(label, true), false), `ti ${_$escape(icon, true)}`) : _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
       },
@@ -491,14 +600,14 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        return _$ssr(_tmpl$9, `ti ${_$escape(icon, true)}`);
+        return _$ssr(_tmpl$10, `ti ${_$escape(icon, true)}`);
       }
     });
   };
   const todayButton = () => {
     const today = calendar.today(dateConfig());
     const href = props.owner.getDateHref?.(today, props.view);
-    const label = _$ssr(_tmpl$1, _$escape(props.labels.today));
+    const label = _$ssr(_tmpl$12, _$escape(props.labels.today));
     return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
@@ -545,7 +654,19 @@ const CalendarHeader = props => {
     value: "year",
     label: props.labels.year
   }].filter(option => !props.owner.views || props.owner.views.includes(option.value)), ...(props.owner.customViews ?? [])]);
-  return _$ssr(_tmpl$11, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next)), _$escape(title()), _$escape(todayButton()), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$15, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next)), _$escape(title()), _$escape(_$createComponent(For, {
+    get each() {
+      return titleWidths();
+    },
+    children: candidate => _$ssr(_tmpl$16, _$escape(candidate))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.toolbarContent;
+    },
+    get children() {
+      return _$ssr(_tmpl$13, _$escape(props.owner.toolbarContent));
+    }
+  })), _$escape(todayButton()), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!!props.owner.onViewChange)() && props.owner.getViewHref;
     },
@@ -571,6 +692,9 @@ const CalendarHeader = props => {
         },
         get options() {
           return viewOptions();
+        },
+        get focusDay() {
+          return props.focusDay;
         }
       });
     }
@@ -579,12 +703,15 @@ const CalendarHeader = props => {
       return props.owner.navigationPending;
     },
     get children() {
-      return _$ssr(_tmpl$10);
+      return _$ssr(_tmpl$14);
     }
   })));
 };
-const MonthView = props => {
+
+/** The compact month of `mobile-month`: a picker whose days link to their agenda. */
+const MonthPickerView = props => {
   const messages = useUiMessages();
+  const calendarMessages = useCalendarMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const [movePreview, setMovePreview] = createSignal(null);
   const [movingEventId, setMovingEventId] = createSignal("");
@@ -637,28 +764,28 @@ const MonthView = props => {
     });
   };
   onCleanup(() => cancelInteraction?.());
-  return _$ssr(_tmpl$13, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$18, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.withWeekNumbers;
     },
     get children() {
-      return _$ssr(_tmpl$12, _$escape(messages().weekShort));
+      return _$ssr(_tmpl$17, _$escape(messages().weekShort));
     }
   })), _$escape(_$createComponent(For, {
     get each() {
       return weekdays();
     },
-    children: day => _$ssr(_tmpl$12, _$escape(day))
+    children: day => _$ssr(_tmpl$17, _$escape(day))
   })), _$escape(_$createComponent(For, {
     get each() {
       return weeks();
     },
-    children: week => _$ssr(_tmpl$15, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    children: week => _$ssr(_tmpl$20, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
       get when() {
         return props.owner.withWeekNumbers;
       },
       get children() {
-        return _$ssr(_tmpl$14, _$escape(zonedWeekNumber(week[0], dateConfig())));
+        return _$ssr(_tmpl$19, _$escape(zonedWeekNumber(week[0], dateConfig())));
       }
     })), _$escape(_$createComponent(For, {
       each: week,
@@ -687,7 +814,7 @@ const MonthView = props => {
             hiddenCount: Math.max(0, candidates.length - visibleLimit)
           };
         });
-        return _$ssr(_tmpl$17, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        return _$ssr(_tmpl$22, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
           get when() {
             return props.owner.onSlotActivate;
           },
@@ -736,7 +863,7 @@ const MonthView = props => {
             return props.owner.onSlotActivate && href;
           },
           get fallback() {
-            return _$ssr(_tmpl$18, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
+            return _$ssr(_tmpl$23, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
           },
           children: dayHref => _$createComponent(CalendarNavigationLink, {
             get owner() {
@@ -761,18 +888,18 @@ const MonthView = props => {
           })
         })), _$escape(_$createComponent(Show, {
           when: dayBadge,
-          children: badge => _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+          children: badge => _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
             get when() {
               return badge().icon;
             },
-            children: icon => _$ssr(_tmpl$9, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+            children: icon => _$ssr(_tmpl$10, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
           })), _$escape(badge().label))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return eventStack().preview;
           },
           get children() {
-            return _$ssr(_tmpl$16, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent));
+            return _$ssr(_tmpl$21, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent));
           }
         })), _$escape(_$createComponent(For, {
           get each() {
@@ -808,7 +935,9 @@ const MonthView = props => {
                 class: "k2b-calendar-month__more"
               },
               get children() {
-                return ["+", eventStack().hiddenCount, " more"];
+                return calendarMessages().calendarMoreEvents({
+                  count: eventStack().hiddenCount
+                });
               }
             });
           }
@@ -816,7 +945,7 @@ const MonthView = props => {
           get each() {
             return events.slice(0, 4);
           },
-          children: event => _$ssr(_tmpl$20, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
+          children: event => _$ssr(_tmpl$25, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
             "background-color": event.colorHex
           } : undefined))
         })));
@@ -824,6 +953,989 @@ const MonthView = props => {
     })))
   })));
 };
+
+/** One entry of the month grid: its whole range, and the days it covers as `YYYY-MM-DD` keys. */
+
+/** Lane height and gap of the month entries, in rem; the stylesheet reads both from the grid's custom properties. */
+const MONTH_LANE_REM = 1.25;
+const MONTH_LANE_GAP_REM = 0.125;
+/** Rows drawn before the browser has measured the cells, as in the server response. */
+const MONTH_DEFAULT_LANES = 3;
+/** Room a bar keeps beside its title and date hint: padding, torn edge, gap, and an icon such as a task box or a flag. */
+const MONTH_HINT_SLACK_REM = 2.25;
+const dayKeyNumber = key => {
+  const [year = "1970", month = "1", day = "1"] = key.split("-");
+  return Date.UTC(Number(year), Number(month) - 1, Number(day)) / 86_400_000;
+};
+const orderedSelection = (anchor, focus) => anchor <= focus ? {
+  first: anchor,
+  last: focus
+} : {
+  first: focus,
+  last: anchor
+};
+
+/** Groups the per-day pieces of the events back into one entry each: bars first, then the others by time. */
+const monthItems = events => {
+  const items = new Map();
+  for (const piece of events) {
+    const key = `${piece.id}\u0000${piece.sourceStartDate.getTime()}`;
+    const item = items.get(key);
+    if (item) {
+      if (piece.dayKey < item.firstKey) item.firstKey = piece.dayKey;
+      if (piece.dayKey > item.lastKey) item.lastKey = piece.dayKey;
+      item.days.set(piece.dayKey, piece);
+      continue;
+    }
+    items.set(key, {
+      key,
+      event: {
+        ...piece,
+        startDate: piece.sourceStartDate,
+        endDate: piece.sourceEndDate
+      },
+      firstKey: piece.dayKey,
+      lastKey: piece.dayKey,
+      bar: false,
+      days: new Map([[piece.dayKey, piece]])
+    });
+  }
+  for (const item of items.values()) item.bar = item.firstKey !== item.lastKey || Boolean(item.event.allDay && item.event.display !== "marker");
+  return [...items.values()].sort((left, right) => Number(right.bar) - Number(left.bar) || left.event.sourceStartDate.getTime() - right.event.sourceStartDate.getTime() || left.event.title.localeCompare(right.event.title));
+};
+
+/** Places a calendar popover below its anchor when there is room and above it otherwise, inside the viewport. */
+const placeCalendarPopover = (anchor, popover) => {
+  const margin = 8;
+  const gap = 4;
+  const rect = anchor.getBoundingClientRect();
+  const width = Math.min(popover.offsetWidth || 288, window.innerWidth - margin * 2);
+  const height = popover.offsetHeight;
+  const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));
+  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
+  const above = height > roomBelow && rect.top - gap - margin > roomBelow;
+  const top = above ? Math.max(margin, rect.top - height - gap) : Math.min(rect.bottom + gap, window.innerHeight - height - margin);
+  popover.style.left = `${left}px`;
+  popover.style.top = `${Math.max(margin, top)}px`;
+};
+let measureContext;
+/** The width of a text in a font, from a canvas, so a bar can tell whether its title leaves room for a date hint. */
+const textWidth = (text, font) => {
+  measureContext ??= typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+  if (!measureContext) return Number.POSITIVE_INFINITY;
+  measureContext.font = font;
+  return measureContext.measureText(text).width;
+};
+
+/** Follows a calendar link the way the calendar's own links do: through the host's navigation when it has one. */
+const followCalendarHref = (owner, href) => {
+  if (owner.onNavigateHref) owner.onNavigateHref(href);else window.location.assign(href);
+};
+const PRINTABLE_KEY = /^.$/u;
+
+/**
+ * The month grid. A click selects a day and never navigates, a drag or Shift selects a range, and the arrow keys move
+ * the selection. The quick create opens at the selection: quietly after a click, with the focus after a drag, a
+ * double-click, Enter, or N. Every event is one bar per week row in a lane it keeps on each of its days, and each
+ * cell shows as many entries as its height holds.
+ */
+const MonthView = props => {
+  const messages = useUiMessages();
+  const calendarMessages = useCalendarMessages();
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  // The shown month and its grid change only with the month, so a refresh of the same month keeps every cell and its
+  // focus.
+  const month = createMemo(() => zonedYearMonth(props.date, dateConfig()), undefined, {
+    equals: (previous, next) => previous.year === next.year && previous.month === next.month
+  });
+  const weeks = createMemo(() => calendar.getMonthGrid(month().year, month().month, dateConfig()).map(week => week.map(day => ({
+    day,
+    key: calendar.formatDateKey(day, dateConfig())
+  }))), undefined, {
+    equals: (previous, next) => previous.map(week => week[0]?.key).join() === next.map(week => week[0]?.key).join()
+  });
+  const weekdays = createMemo(() => calendar.weekdays(dateConfig()));
+  const todayKey = createMemo(() => calendar.formatDateKey(props.now, dateConfig()));
+  const items = createMemo(() => monthItems(props.events));
+  const weekLayouts = createMemo(() => weeks().map(week => layoutMonthWeek(week.map(entry => entry.key), items().map(item => ({
+    item,
+    firstKey: item.firstKey,
+    lastKey: item.lastKey,
+    bar: item.bar
+  })))));
+  const [capacities, setCapacities] = createSignal([]);
+  const [cellWidth, setCellWidth] = createSignal(0);
+  const [barFont, setBarFont] = createSignal("");
+  const [anchorKey, setAnchorKey] = createSignal(null);
+  const [focusKey, setFocusKey] = createSignal(null);
+  const [popover, setPopover] = createSignal(null);
+  /** Whether the quick create holds the focus; until then the grid keeps it. */
+  const [createActive, setCreateActive] = createSignal(false);
+  const [linkedItem, setLinkedItem] = createSignal("");
+  const [movePreview, setMovePreview] = createSignal(null);
+  const [movingEventId, setMovingEventId] = createSignal("");
+  const cells = new Map();
+  let popoverElement;
+  let cancelInteraction;
+  let suppressClickUntil = 0;
+  let lastPointer = "mouse";
+  let menuKey = null;
+  /** The day to select once paging with Page Up or Page Down has shown its month. */
+  let pendingKey = null;
+  const selection = createMemo(() => {
+    const anchor = anchorKey();
+    const focus = focusKey();
+    return anchor && focus ? orderedSelection(anchor, focus) : null;
+  });
+  const parseKey = key => calendar.parseCalendarDate(key, dateConfig());
+  const rangeOf = range => ({
+    start: parseKey(range.first),
+    end: calendar.addDays(parseKey(range.last), 1, dateConfig()),
+    allDay: true
+  });
+  const visibleKeys = createMemo(() => weeks().flatMap(week => week.map(entry => entry.key)));
+  const rovingKey = createMemo(() => {
+    const keys = visibleKeys();
+    const focus = focusKey();
+    if (focus && keys.includes(focus)) return focus;
+    if (keys.includes(todayKey())) return todayKey();
+    return calendar.formatDateKey(zonedMonthDate(month().year, month().month, dateConfig()), dateConfig());
+  });
+  const dropRange = createMemo(() => {
+    const preview = movePreview();
+    if (!preview) return null;
+    const keys = previewSegments(preview, visibleKeys().map(parseKey), dateConfig()).map(piece => piece.dayKey);
+    if (keys.length === 0) return null;
+    keys.sort();
+    return {
+      first: keys[0],
+      last: keys[keys.length - 1]
+    };
+  });
+  const within = (range, key) => Boolean(range && key >= range.first && key <= range.last);
+  /** Where a day sits in the selection: alone, at its start or end, or in between. */
+  const selectionPart = key => {
+    const range = selection();
+    if (!range || !within(range, key)) return undefined;
+    if (range.first === range.last) return "single";
+    return key === range.first ? "start" : key === range.last ? "end" : "middle";
+  };
+  const select = (anchor, focus = anchor) => {
+    setAnchorKey(anchor);
+    setFocusKey(focus);
+  };
+  // The host learns every change of the selected days, and a new month starts without a selection. The selection
+  // goes with the view, so switching to another view reports that nothing is selected.
+  createEffect(on(selection, range => props.owner.onSelectionChange?.(range ? rangeOf(range) : null), {
+    defer: true
+  }));
+  onCleanup(() => {
+    if (untrack(selection)) props.owner.onSelectionChange?.(null);
+  });
+  createEffect(on(selection, range => props.onFocusDay?.(range ? parseKey(range.first) : null)));
+  createEffect(on(month, () => {
+    setPopover(null);
+    const key = pendingKey;
+    pendingKey = null;
+    if (key && visibleKeys().includes(key)) {
+      select(key);
+      queueMicrotask(() => focusCell(key));
+    } else select(null);
+  }, {
+    defer: true
+  }));
+  const dayLabel = day => day.toLocaleDateString(dateConfig().locale ?? "en", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: dateConfig().timeZone
+  });
+  const shortDayLabel = (key, withMonth = true) => parseKey(key).toLocaleDateString(dateConfig().locale ?? "en", {
+    day: "numeric",
+    ...(withMonth ? {
+      month: "short"
+    } : {}),
+    timeZone: dateConfig().timeZone
+  });
+  const monthDayLabel = (date, withTime) => date.toLocaleString(dateConfig().locale ?? "en", {
+    month: "long",
+    day: "numeric",
+    ...(withTime ? {
+      hour: "2-digit",
+      minute: "2-digit"
+    } : {}),
+    timeZone: dateConfig().timeZone
+  });
+  /** A long event names the days it spans; a one-day event keeps the chip's own title and time. */
+  const itemLabel = item => {
+    if (item.firstKey === item.lastKey) return undefined;
+    const allDay = Boolean(item.event.allDay);
+    return messages().calendarEventTime({
+      title: item.event.title,
+      start: monthDayLabel(allDay ? parseKey(item.firstKey) : item.event.sourceStartDate, !allDay),
+      end: monthDayLabel(allDay ? parseKey(item.lastKey) : item.event.sourceEndDate, !allDay)
+    });
+  };
+  /** The start time before the title of a one-day entry; bars and all-day entries show none. */
+  const leadingTime = item => item.bar || item.event.allDay ? undefined : formatTime(item.event.sourceStartDate, dateConfig());
+  /** The day at a torn end of a bar, with its month when that day lies outside the shown month. */
+  const hintDate = target => ({
+    day: Number(target.slice(8, 10)),
+    month: Number(target.slice(0, 4)) === month().year && Number(target.slice(5, 7)) === month().month + 1 ? undefined : parseKey(target).toLocaleDateString(dateConfig().locale ?? "en", {
+      month: "short",
+      timeZone: dateConfig().timeZone
+    }).replace(/\.$/, "")
+  });
+  const selectionHeading = range => {
+    if (range.first === range.last) return parseKey(range.first).toLocaleDateString(dateConfig().locale ?? "en", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      timeZone: dateConfig().timeZone
+    });
+    const days = dayKeyNumber(range.last) - dayKeyNumber(range.first) + 1;
+    return calendarMessages().calendarSelectedDays({
+      start: shortDayLabel(range.first),
+      end: shortDayLabel(range.last),
+      count: days
+    });
+  };
+  const viewAvailable = view => !props.owner.views || props.owner.views.includes(view);
+  const viewHref = (key, view) => viewAvailable(view) ? props.owner.getDateHref?.(parseKey(key), view) : undefined;
+  /** Whether the calendar can open another view at a day: through a link, or through the host's date change. */
+  const canOpenView = view => viewAvailable(view) && Boolean(props.owner.getDateHref || props.owner.onDateChange);
+  const openView = (key, view) => {
+    const href = viewHref(key, view);
+    if (href) followCalendarHref(props.owner, href);else openViewAt(props.owner, parseKey(key), view);
+  };
+  /** The calendar's own entries of the day menu, Open day and Open week, need no application entries. */
+  const hasMenu = () => Boolean(props.owner.selectionMenu) || canOpenView("day") || canOpenView("week");
+
+  /** The day cell under a point, from the cells' boxes: a bar lies over days that are not its parent. */
+  const dayKeyAtPoint = (clientX, clientY) => {
+    for (const [key, cell] of cells) {
+      if (!cell.isConnected) continue;
+      const rect = cell.getBoundingClientRect();
+      if (clientX >= rect.left && clientX < rect.right && clientY >= rect.top && clientY < rect.bottom) return key;
+    }
+    return null;
+  };
+  const focusCell = key => cells.get(key)?.focus({
+    preventScroll: true
+  });
+  const closePopover = (restoreFocus = true) => {
+    if (!popover()) return;
+    setPopover(null);
+    setCreateActive(false);
+    if (restoreFocus) focusCell(rovingKey());
+  };
+  const popoverFocusable = () => popoverElement?.querySelector("input,textarea,select,button,a[href],[tabindex]:not([tabindex='-1'])") ?? null;
+
+  /**
+   * Opens the quick create at the selection. Quietly, it only shows beside the grid, which keeps the focus until the
+   * person types or tabs into it; otherwise it takes the focus at once.
+   */
+  const openCreate = (range, options) => {
+    if (!props.owner.renderQuickCreate) return false;
+    const anchor = cells.get(focusKey() && within(range, focusKey()) ? focusKey() : range.last);
+    if (!anchor) return false;
+    setCreateActive(options.active);
+    setPopover({
+      kind: "create",
+      range,
+      anchor,
+      create: options.create
+    });
+    return true;
+  };
+  const activateCreate = () => {
+    if (popover()?.kind !== "create") return false;
+    setCreateActive(true);
+    popoverFocusable()?.focus();
+    return true;
+  };
+  /** Enter, a double-click, and N create on the selection, with the quick create or the host's own create action. */
+  const createOnSelection = () => {
+    const range = selection();
+    if (!range) return;
+    if (openCreate(range, {
+      active: true
+    })) return;
+    if (props.owner.onSlotActivate) props.owner.onSlotActivate(rangeOf(range));
+  };
+  const openDayList = key => {
+    const anchor = cells.get(key);
+    if (!anchor) return;
+    setCreateActive(true);
+    setPopover({
+      kind: "day",
+      dayKey: key,
+      anchor
+    });
+  };
+  /** A quiet quick create follows the selection; any other popover closes when the selection changes. */
+  const followSelection = () => {
+    const current = popover();
+    const range = selection();
+    if (!current) return;
+    if (current.kind === "create" && !createActive() && range) openCreate(range, {
+      active: false
+    });else closePopover(false);
+  };
+  const pageTo = target => {
+    const date = parseKey(target);
+    const href = props.owner.getDateHref?.(date, "month");
+    // Only a month that is on its way may select the day, so a host that cannot page never leaves one behind.
+    if (props.owner.onDateChange) {
+      pendingKey = target;
+      props.owner.onDateChange(date, "month");
+    } else if (href) {
+      pendingKey = target;
+      followCalendarHref(props.owner, href);
+    }
+  };
+  const moveFocus = (key, extend) => {
+    if (!visibleKeys().includes(key)) {
+      pageTo(key);
+      return;
+    }
+    if (extend) select(anchorKey() ?? focusKey() ?? key, key);else select(key);
+    focusCell(key);
+    followSelection();
+  };
+  const onCellKeyDown = (event, key) => {
+    if (event.target !== event.currentTarget || event.ctrlKey || event.metaKey || event.altKey) return;
+    const current = popover();
+    const quiet = current?.kind === "create" && !createActive();
+    // The quiet quick create takes over once the person types or tabs into it. Space stays the grid's key for the day
+    // list; N is a title's first letter like any other, as the quick create it would open is already there.
+    if (quiet && (event.key === "Tab" && !event.shiftKey || PRINTABLE_KEY.test(event.key) && event.key !== " ")) {
+      const field = popoverFocusable();
+      if (field) {
+        if (event.key === "Tab") event.preventDefault();
+        setCreateActive(true);
+        field.focus();
+        return;
+      }
+    }
+    const day = parseKey(key);
+    const shift = days => calendar.formatDateKey(calendar.addDays(day, days, dateConfig()), dateConfig());
+    const weekday = (dayKeyNumber(key) - dayKeyNumber(calendar.formatDateKey(calendar.startOfWeek(day, dateConfig()), dateConfig()))) % 7;
+    const target = event.key === "ArrowLeft" ? shift(-1) : event.key === "ArrowRight" ? shift(1) : event.key === "ArrowUp" ? shift(-7) : event.key === "ArrowDown" ? shift(7) : event.key === "Home" ? shift(-weekday) : event.key === "End" ? shift(6 - weekday) : null;
+    if (target) {
+      event.preventDefault();
+      moveFocus(target, event.shiftKey);
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      pageTo(calendar.formatDateKey(addMonthsClamped(day, event.key === "PageUp" ? -1 : 1, dateConfig()), dateConfig()));
+      return;
+    }
+    if (event.key === "Enter" || (event.key === "n" || event.key === "N") && !event.shiftKey) {
+      event.preventDefault();
+      if (!within(selection(), key)) select(key);
+      createOnSelection();
+      return;
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+      if (!within(selection(), key)) select(key);
+      openDayList(key);
+      return;
+    }
+    if (event.key === "Escape") {
+      if (current) closePopover(false);else if (selection()) select(null);else return;
+      event.preventDefault();
+      return;
+    }
+    // The keyboard opens the day's menu where the day is, as a right-click there would.
+    if (hasMenu() && (event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) {
+      event.preventDefault();
+      event.stopPropagation();
+      menuKey = key;
+      const rect = event.currentTarget.getBoundingClientRect();
+      event.currentTarget?.dispatchEvent(new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        clientX: rect.left + 12,
+        clientY: rect.top + 12
+      }));
+    }
+  };
+  const fromControl = event => event.target instanceof Element && Boolean(event.target.closest("a,button,[data-calendar-event],.k2b-calendar-month__lanes > *"));
+  const onCellClick = (event, key) => {
+    if (fromControl(event) || performance.now() < suppressClickUntil) return;
+    // A second tap on the one selected day opens the quick create, as a double-click does with a mouse.
+    if (lastPointer === "touch") {
+      const range = selection();
+      if (range && range.first === key && range.last === key && openCreate(range, {
+        active: true
+      })) return;
+      select(key);
+      closePopover(false);
+      return;
+    }
+    if (event.shiftKey && anchorKey()) select(anchorKey(), key);else select(key);
+    focusCell(key);
+    const range = selection();
+    if (range) openCreate(range, {
+      active: false
+    });
+  };
+  const onCellDoubleClick = (event, key) => {
+    if (fromControl(event) || lastPointer === "touch") return;
+    event.preventDefault();
+    if (!within(selection(), key)) select(key);
+    if (popover()?.kind === "create") activateCreate();else createOnSelection();
+  };
+  /** The day under the pointer: a bar that spans several days sits in the cell of its first day. */
+  const pressedKey = (event, key) => dayKeyAtPoint(event.clientX, event.clientY) ?? key;
+  const onCellPointerDown = (event, key) => {
+    lastPointer = event.pointerType;
+    // The menu acts on the pressed day, or on the selection when the press is inside it.
+    menuKey = pressedKey(event, key);
+    if (event.pointerType !== "mouse" || event.button !== 0 || event.shiftKey || fromControl(event)) return;
+    cancelInteraction?.();
+    cancelInteraction = startCalendarPointerSession({
+      event,
+      resolve: (clientX, clientY) => dayKeyAtPoint(clientX, clientY),
+      onActivate: () => {
+        suppressClickUntil = performance.now() + 400;
+        closePopover(false);
+        select(key);
+      },
+      onPreview: current => select(key, current),
+      onCommit: current => {
+        select(key, current);
+        focusCell(current);
+        const range = orderedSelection(key, current);
+        openCreate(range, {
+          active: range.first !== range.last
+        });
+      },
+      onCancel: () => select(key)
+    });
+  };
+  const onMenuOpen = () => {
+    closePopover(false);
+    const key = menuKey;
+    if (key && !within(selection(), key)) select(key);
+  };
+  // Until a day is selected, the menu acts on the day that takes focus, so it is never empty.
+  const menuItems = createMemo(() => {
+    if (!hasMenu()) return [];
+    const range = selection() ?? {
+      first: rovingKey(),
+      last: rovingKey()
+    };
+    const own = props.owner.selectionMenu?.(rangeOf(range), {
+      quickCreate: create => {
+        select(range.first, range.last);
+        if (!openCreate(range, {
+          active: true,
+          create
+        })) props.owner.onSlotActivate?.(rangeOf(range));
+      }
+    }) ?? [];
+    const actions = own.filter(item => !("items" in item));
+    const sections = own.filter(item => "items" in item);
+    const navigation = [...(canOpenView("day") ? [{
+      label: calendarMessages().calendarOpenDay,
+      icon: "ti ti-zoom-in",
+      action: () => openView(range.first, "day")
+    }] : []), ...(canOpenView("week") ? [{
+      label: calendarMessages().calendarOpenWeek,
+      icon: "ti ti-calendar-week",
+      action: () => openView(range.first, "week")
+    }] : []), ...(range.first !== range.last ? [{
+      label: calendarMessages().calendarClearSelection,
+      icon: "ti ti-x",
+      action: () => select(null)
+    }] : [])];
+    const groups = [{
+      items: actions
+    }, ...sections, {
+      items: navigation
+    }].filter(section => section.items.length > 0);
+    // The first group names the days the menu acts on, also when the calendar's own entries are all it has.
+    const [first, ...rest] = groups;
+    return first && !first.sectionLabel ? [{
+      ...first,
+      sectionLabel: selectionHeading(range)
+    }, ...rest] : groups;
+  });
+  const clearMove = () => {
+    setMovePreview(null);
+    setMovingEventId("");
+  };
+  const startMove = (pointerEvent, item, markDragged) => {
+    if (!props.owner.onEventDrop) return;
+    const event = item.event;
+    const grabbed = dayKeyAtPoint(pointerEvent.clientX, pointerEvent.clientY) ?? item.firstKey;
+    const firstDay = startOfDay(event.sourceStartDate, dateConfig());
+    cancelInteraction?.();
+    cancelInteraction = startCalendarPointerSession({
+      event: pointerEvent,
+      resolve: (clientX, clientY) => {
+        const key = dayKeyAtPoint(clientX, clientY);
+        if (!key) return null;
+        // The event moves by as many days as the pointer, wherever on the bar it was grabbed.
+        const day = calendar.addDays(firstDay, dayKeyNumber(key) - dayKeyNumber(grabbed), dateConfig());
+        return {
+          id: event.id,
+          title: event.title,
+          ...moveEventToDay(event, day, dateConfig())
+        };
+      },
+      onActivate: () => {
+        markDragged();
+        suppressClickUntil = performance.now() + 400;
+        closePopover(false);
+        setMovingEventId(event.id);
+      },
+      onPreview: setMovePreview,
+      onCommit: next => {
+        clearMove();
+        if (eventTimeChanged(event, next)) props.owner.onEventDrop?.(event, next);
+      },
+      onCancel: clearMove
+    });
+  };
+
+  // Each week row measures the room below its day numbers; the rows only resize with the grid, never with content.
+  let observer;
+  const lanesOf = new WeakMap();
+  const measure = (element, week) => {
+    const style = getComputedStyle(element);
+    const rootSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const capacity = monthLaneCapacity(element.clientHeight, MONTH_LANE_REM * rootSize, MONTH_LANE_GAP_REM * rootSize);
+    setCapacities(current => {
+      if (current[week] === capacity) return current;
+      const next = [...current];
+      next[week] = capacity;
+      return next;
+    });
+    if (week === 0) {
+      setCellWidth(element.clientWidth);
+      setBarFont(`600 ${0.6875 * rootSize}px ${style.fontFamily}`);
+    }
+  };
+  const observeLanes = (element, week) => {
+    lanesOf.set(element, week);
+    if (typeof ResizeObserver === "undefined") return;
+    observer ??= new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const index = lanesOf.get(entry.target);
+        if (index !== undefined) measure(entry.target, index);
+      }
+    });
+    observer.observe(element);
+    onCleanup(() => observer?.unobserve(element));
+  };
+  /** A date hint shows only when the bar holds its title and the hint whole; screen readers get the range anyway. */
+  const hintFits = (title, hint, span) => {
+    const width = cellWidth();
+    const font = barFont();
+    if (width <= 0 || !font) return false;
+    const rootSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    return textWidth(title, font) + textWidth(hint, font) + MONTH_HINT_SLACK_REM * rootSize <= span * width;
+  };
+  createEffect(() => {
+    const current = popover();
+    const element = popoverElement;
+    if (!element) return;
+    if (!current) {
+      if (element.matches(":popover-open")) element.hidePopover();
+      return;
+    }
+    if (!element.matches(":popover-open")) element.showPopover();
+    const focus = untrack(createActive);
+    queueMicrotask(() => {
+      if (popover() !== current || !element.isConnected) return;
+      placeCalendarPopover(current.anchor, element);
+      if (focus) popoverFocusable()?.focus();
+    });
+  });
+  onMount(() => {
+    const reposition = () => {
+      const current = popover();
+      if (current && popoverElement) placeCalendarPopover(current.anchor, popoverElement);
+    };
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    });
+  });
+  onCleanup(() => {
+    cancelInteraction?.();
+    observer?.disconnect();
+  });
+  const dayEntries = dayKey => items().filter(item => item.days.has(dayKey));
+  /** Every bar of a long entry lights up with the one under the pointer. */
+  const linkProps = item => ({
+    onPointerEnter: event => {
+      if (event.pointerType === "mouse") setLinkedItem(item.key);
+    },
+    onPointerLeave: () => {
+      if (linkedItem() === item.key) setLinkedItem("");
+    }
+  });
+  const grid = () => _$ssr(_tmpl$27, _$ssrAttribute("aria-label", _$escape(formatMonth(props.date, dateConfig()), true), false), _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`) + _$ssrStyleProperty(";--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.withWeekNumbers;
+    },
+    get children() {
+      return _$ssr(_tmpl$26, _$escape(messages().weekShort));
+    }
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return weekdays();
+    },
+    children: (day, index) => _$ssr(_tmpl$28, _$ssrAttribute("data-weekend", index() > 4 ? "true" : _$escape(undefined, true), false), _$escape(day))
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return weeks();
+    },
+    children: (week, weekIndex) => {
+      const fit = createMemo(() => fitMonthWeek(weekLayouts()[weekIndex()] ?? {
+        bars: [],
+        singles: []
+      }, capacities()[weekIndex()] ?? MONTH_DEFAULT_LANES));
+      const weekHref = () => viewHref(week[0].key, "week");
+      const weekNumber = () => zonedWeekNumber(week[0].day, dateConfig());
+      return _$ssr(_tmpl$30, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.owner.withWeekNumbers;
+        },
+        get children() {
+          return _$ssr(_tmpl$29, _$escape(_$createComponent(Show, {
+            get when() {
+              return weekHref();
+            },
+            get fallback() {
+              return _$createComponent(Show, {
+                get when() {
+                  return canOpenView("week");
+                },
+                get fallback() {
+                  return weekNumber();
+                },
+                get children() {
+                  return _$ssr(_tmpl$31, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
+                    week: weekNumber()
+                  }), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarOpenWeekNumber({
+                    week: weekNumber()
+                  }), true), false), _$escape(weekNumber()));
+                }
+              });
+            },
+            children: href => _$createComponent(CalendarNavigationLink, {
+              get owner() {
+                return props.owner;
+              },
+              get href() {
+                return href();
+              },
+              get anchorProps() {
+                return {
+                  class: "k2b-calendar-month__week-link",
+                  tabIndex: -1,
+                  title: calendarMessages().calendarOpenWeekNumber({
+                    week: weekNumber()
+                  }),
+                  "aria-label": calendarMessages().calendarOpenWeekNumber({
+                    week: weekNumber()
+                  })
+                };
+              },
+              get children() {
+                return weekNumber();
+              }
+            })
+          })));
+        }
+      })), _$escape(_$createComponent(For, {
+        each: week,
+        children: ({
+          day,
+          key
+        }, column) => {
+          const dayBadge = props.owner.dayBadges?.[key];
+          const sameMonth = calendar.isSameMonth(day, props.date, dateConfig());
+          const label = dayLabel(day);
+          const bars = createMemo(() => fit().bars.filter(bar => bar.startColumn === column()));
+          const cell = () => fit().cells[column()] ?? {
+            top: 0,
+            shown: [],
+            hidden: 0
+          };
+          return _$ssr(_tmpl$33, _$ssrAttribute("tabindex", rovingKey() === key ? 0 : -1, false) + _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("aria-selected", within(selection(), key) ? "true" : "false", false) + _$ssrAttribute("aria-current", key === todayKey() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("data-calendar-day-key", _$escape(key, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", column() > 4 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", key < todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", _$escape(selectionPart(key), true), false) + _$ssrAttribute("data-drop-preview", within(dropRange(), key) ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-today", key === todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())), _$escape(_$createComponent(Show, {
+            when: dayBadge,
+            children: badge => _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+              get when() {
+                return badge().icon;
+              },
+              children: icon => _$ssr(_tmpl$10, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+            })), _$escape(badge().label))
+          })), _$escape(_$createComponent(For, {
+            get each() {
+              return bars();
+            },
+            children: bar => {
+              const span = bar.endColumn - bar.startColumn + 1;
+              const startHint = () => {
+                if (!bar.continuesBefore) return undefined;
+                const hint = calendarMessages().calendarContinuesFrom(hintDate(bar.item.firstKey));
+                return hintFits(bar.item.event.title, hint, span) ? hint : undefined;
+              };
+              const endHint = () => {
+                if (!bar.continuesAfter) return undefined;
+                const hint = calendarMessages().calendarContinuesUntil(hintDate(bar.item.lastKey));
+                return hintFits(`${bar.item.event.title}${startHint() ?? ""}`, hint, span) ? hint : undefined;
+              };
+              return _$ssrElement("div", _$mergeProps({
+                "class": "k2b-calendar-month__segment",
+                get style() {
+                  return {
+                    "--k2b-calendar-span": String(span),
+                    "--k2b-calendar-row": String(bar.lane)
+                  };
+                },
+                "data-bar": "true",
+                get ["data-linked"]() {
+                  return linkedItem() === bar.item.key && bar.item.firstKey !== bar.item.lastKey ? "true" : undefined;
+                },
+                get ["data-continues-before"]() {
+                  return bar.continuesBefore ? "true" : undefined;
+                },
+                get ["data-continues-after"]() {
+                  return bar.continuesAfter ? "true" : undefined;
+                }
+              }, () => linkProps(bar.item)), _$escape(_$createComponent(EventChip, {
+                get event() {
+                  return bar.item.event;
+                },
+                get owner() {
+                  return props.owner;
+                },
+                get href() {
+                  return eventHref(props.owner, bar.item.event);
+                },
+                get label() {
+                  return itemLabel(bar.item);
+                },
+                compact: true,
+                bar: true,
+                get continuesBefore() {
+                  return bar.continuesBefore;
+                },
+                get continuesAfter() {
+                  return bar.continuesAfter;
+                },
+                get hintStart() {
+                  return startHint();
+                },
+                get hintEnd() {
+                  return endHint();
+                },
+                get moving() {
+                  return movingEventId() === bar.item.event.id;
+                },
+                get onMovePointerDown() {
+                  return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, bar.item, markDragged) : undefined;
+                }
+              })), false);
+            }
+          })), _$escape(_$createComponent(For, {
+            get each() {
+              return cell().shown;
+            },
+            children: (item, index) => _$ssr(_tmpl$34, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
+              get event() {
+                return item.event;
+              },
+              get owner() {
+                return props.owner;
+              },
+              get href() {
+                return eventHref(props.owner, item.event);
+              },
+              compact: true,
+              get leadingTime() {
+                return leadingTime(item);
+              },
+              get moving() {
+                return movingEventId() === item.event.id;
+              },
+              get onMovePointerDown() {
+                return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, item, markDragged) : undefined;
+              }
+            })))
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return cell().hidden > 0;
+            },
+            get children() {
+              return _$ssr(_tmpl$32, _$ssrStyleProperty("--k2b-calendar-row:", _$escape(String(cell().top + cell().shown.length), true)), _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarMoreEventsOn({
+                count: cell().hidden,
+                label
+              }), true), false), _$ssrAttribute("aria-expanded", (() => {
+                const current = popover();
+                return current?.kind === "day" && _$escape(current.dayKey, true) === _$escape(key, true);
+              })(), false), _$escape(calendarMessages().calendarMoreEvents({
+                count: cell().hidden
+              })), _$escape(cell().hidden));
+            }
+          })));
+        }
+      })));
+    }
+  })));
+  const dayList = dayKey => {
+    const day = parseKey(dayKey);
+    const href = viewHref(dayKey, "day");
+    // Read where it renders, so a refresh while the list is open updates it as it does the grid.
+    const entries = () => dayEntries(dayKey);
+    return _$ssr(_tmpl$37, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
+      get when() {
+        return entries().length > 0;
+      },
+      get fallback() {
+        return _$ssr(_tmpl$38, _$escape(calendarMessages().calendarNothingPlanned));
+      },
+      get children() {
+        return _$ssr(_tmpl$35, _$escape(_$createComponent(For, {
+          get each() {
+            return entries();
+          },
+          children: item => _$ssr(_tmpl$39, _$escape(_$createComponent(EventChip, {
+            get event() {
+              return item.event;
+            },
+            get owner() {
+              return props.owner;
+            },
+            get href() {
+              return eventHref(props.owner, item.event);
+            },
+            get label() {
+              return itemLabel(item);
+            },
+            compact: true,
+            get bar() {
+              return item.bar;
+            },
+            get leadingTime() {
+              return leadingTime(item);
+            }
+          })))
+        })));
+      }
+    })), _$escape(_$createComponent(Show, {
+      when: href,
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return canOpenView("day");
+          },
+          get children() {
+            return _$createComponent(Button, {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => openView(dayKey, "day"),
+              get children() {
+                return [_$ssr(_tmpl$40), calendarMessages().calendarOpenDay];
+              }
+            });
+          }
+        });
+      },
+      children: dayHref => _$createComponent(CalendarNavigationLink, {
+        get owner() {
+          return props.owner;
+        },
+        get href() {
+          return dayHref();
+        },
+        anchorProps: {
+          class: "k2b-button",
+          "data-variant": "ghost",
+          "data-size": "sm"
+        },
+        get children() {
+          return [_$ssr(_tmpl$40), calendarMessages().calendarOpenDay];
+        }
+      })
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return props.owner.renderQuickCreate;
+      },
+      get children() {
+        return _$createComponent(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            select(dayKey);
+            openCreate({
+              first: dayKey,
+              last: dayKey
+            }, {
+              active: true
+            });
+          },
+          get children() {
+            return [_$ssr(_tmpl$36), calendarMessages().calendarNewEvent];
+          }
+        });
+      }
+    })));
+  };
+  return [_$createComponent(Show, {
+    get when() {
+      return hasMenu();
+    },
+    get fallback() {
+      return grid();
+    },
+    get children() {
+      return _$createComponent(GestureMenu, {
+        get items() {
+          return menuItems();
+        },
+        get label() {
+          return calendarMessages().calendarSelectionActions;
+        },
+        tabIndex: -1,
+        onOpen: onMenuOpen,
+        "class": "k2b-calendar-month-menu",
+        get children() {
+          return grid();
+        }
+      });
+    }
+  }), _$ssr(_tmpl$41, _$ssrAttribute("aria-label", (() => {
+    const current = popover();
+    if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
+    return _$escape(calendarMessages().calendarQuickCreate, true);
+  })(), false) + _$ssrAttribute("data-kind", _$escape(popover()?.kind, true), false) + _$ssrAttribute("data-quiet", popover()?.kind === "create" && !createActive() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return popover();
+    },
+    keyed: true,
+    children: value => value.kind === "create" ? props.owner.renderQuickCreate?.(rangeOf(value.range), {
+      create: value.create,
+      close: () => {
+        if (popover() === value) closePopover();
+      }
+    }) : dayList(value.dayKey)
+  })))];
+};
 const TimeGridView = props => {
   const messages = useUiMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
@@ -1035,7 +2147,7 @@ const TimeGridView = props => {
       });
     });
   });
-  return _$ssr(_tmpl$22, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$43, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
     },
@@ -1053,13 +2165,13 @@ const TimeGridView = props => {
           class: "k2b-calendar-time-grid__day"
         },
         get children() {
-          return [_$ssr(_tmpl$23, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
+          return [_$ssr(_tmpl$44, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
             when: dayBadge,
-            children: badge => _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+            children: badge => _$ssr(_tmpl$45, _$escape(_$createComponent(Show, {
               get when() {
                 return badge().icon;
               },
-              children: icon => _$ssr(_tmpl$9, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
+              children: icon => _$ssr(_tmpl$10, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
             })), _$escape(badge().label))
           })];
         }
@@ -1070,7 +2182,7 @@ const TimeGridView = props => {
       return !props.owner.hideAllDay;
     },
     get children() {
-      return _$ssr(_tmpl$21, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$42, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
         get each() {
           return props.days;
         },
@@ -1094,9 +2206,9 @@ const TimeGridView = props => {
               end: calendar.addDays(start, 1, dateConfig()),
               allDay: true
             };
-          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$25, _$escape(_$createComponent(For, {
+          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$46, _$escape(_$createComponent(For, {
             each: previewAllDay,
-            children: event => _$ssr(_tmpl$16, _$escape(event.title))
+            children: event => _$ssr(_tmpl$21, _$escape(event.title))
           })), _$escape(_$createComponent(For, {
             get each() {
               return allDay();
@@ -1125,7 +2237,7 @@ const TimeGridView = props => {
     get each() {
       return hours();
     },
-    children: hour => _$ssr(_tmpl$26, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
+    children: hour => _$ssr(_tmpl$47, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
   })), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
@@ -1133,12 +2245,12 @@ const TimeGridView = props => {
     children: day => {
       const dayKey = calendar.formatDateKey(day, dateConfig());
       const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
-      return _$ssr(_tmpl$28, _$ssrStyleProperty("min-width:", _$escape(dayColumnMinWidth(layouts()), true)) + _$ssrStyleProperty(";grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$49, _$ssrStyleProperty("min-width:", _$escape(dayColumnMinWidth(layouts()), true)) + _$ssrStyleProperty(";grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
         get when() {
           return currentTimeLine(day) !== null;
         },
         get children() {
-          return _$ssr(_tmpl$27, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
+          return _$ssr(_tmpl$48, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
         }
       })), _$escape(_$createComponent(For, {
         get each() {
@@ -1167,12 +2279,12 @@ const TimeGridView = props => {
         children: event => {
           const layout = eventLayout(event);
           const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
-          return _$ssr(_tmpl$30, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$51, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
             get when() {
               return event.title;
             },
             get children() {
-              return _$ssr(_tmpl$29, _$escape(event.title));
+              return _$ssr(_tmpl$50, _$escape(event.title));
             }
           })), _$escape(formatTime(event.startDate, dateConfig())), _$escape(formatTime(event.endDate, dateConfig())));
         }
@@ -1218,7 +2330,7 @@ const TimeGridView = props => {
               onCancel: clearInteraction
             });
           };
-          return _$ssr(_tmpl$32, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
+          return _$ssr(_tmpl$53, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
             event: event,
             get owner() {
               return props.owner;
@@ -1238,7 +2350,7 @@ const TimeGridView = props => {
               return props.owner.onEventResize;
             },
             get children() {
-              return _$ssr(_tmpl$31, _$ssrAttribute("aria-label", _$escape(messages().resizeEvent, true), false));
+              return _$ssr(_tmpl$52, _$ssrAttribute("aria-label", _$escape(messages().resizeEvent, true), false));
             }
           })));
         }
@@ -1250,14 +2362,14 @@ const TimeGridView = props => {
           const layout = timeRangeLayout(overflow.groupStartDate, overflow.groupEndDate);
           const key = `${dayKey}-${overflow.groupId}`;
           const hiddenTitle = () => overflow.hiddenEvents.map(event => `${formatTime(event.startDate, dateConfig())} ${event.title}`).join("\n");
-          return [_$ssr(_tmpl$33, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(messages().hiddenOverlappingEvents({
+          return [_$ssr(_tmpl$54, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(messages().hiddenOverlappingEvents({
             count: overflow.hiddenEvents.length
           }), true), false), _$escape(overflow.hiddenEvents.length)), _$createComponent(Show, {
             get when() {
               return expandedOverflow() === key;
             },
             get children() {
-              return _$ssr(_tmpl$34, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
+              return _$ssr(_tmpl$55, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
                 get each() {
                   return overflow.hiddenEvents;
                 },
@@ -1316,11 +2428,11 @@ const YearView = props => {
       };
     });
   });
-  return _$ssr(_tmpl$35, _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$56, _$escape(_$createComponent(For, {
     get each() {
       return months();
     },
-    children: month => _$ssr(_tmpl$36, _$escape(month.label), _$escape(_$createComponent(For, {
+    children: month => _$ssr(_tmpl$57, _$escape(month.label), _$escape(_$createComponent(For, {
       get each() {
         return month.days;
       },
@@ -1343,7 +2455,7 @@ const YearView = props => {
             get when() {
               return day.events[0];
             },
-            children: event => _$ssr(_tmpl$37, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
+            children: event => _$ssr(_tmpl$58, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
               "background-color": day.isToday ? "white" : event().colorHex
             } : undefined))
           })];
@@ -1356,7 +2468,7 @@ const MobileMonthView = props => {
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const selectedDateKey = createMemo(() => calendar.formatDateKey(props.selectedDate, dateConfig()));
   const selectedEvents = createMemo(() => props.events.filter(event => event.dayKey === selectedDateKey()));
-  return _$ssr(_tmpl$39, _$escape(_$createComponent(MonthView, {
+  return _$ssr(_tmpl$60, _$escape(_$createComponent(MonthPickerView, {
     get owner() {
       return {
         ...props.owner,
@@ -1386,10 +2498,10 @@ const MobileMonthView = props => {
       return selectedEvents().length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$40, _$escape(props.labels.noEvents));
+      return _$ssr(_tmpl$61, _$escape(props.labels.noEvents));
     },
     get children() {
-      return _$ssr(_tmpl$38, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$59, _$escape(_$createComponent(For, {
         get each() {
           return selectedEvents();
         },
@@ -1406,7 +2518,7 @@ const MobileMonthView = props => {
     }
   })));
 };
-const CalendarBody = props => _$ssr(_tmpl$41, _$escape(props.children));
+const CalendarBody = props => _$ssr(_tmpl$62, _$escape(props.children));
 const CalendarRoot = props => {
   const messages = useUiMessages();
   // Subviews derive their date config from the owner props, so the inherited
@@ -1427,6 +2539,8 @@ const CalendarRoot = props => {
   const date = createMemo(() => safeDate(props.date));
   const selectedDate = createMemo(() => safeDate(props.selectedDate ?? props.date));
   const [now, setNow] = createSignal(new Date());
+  /** The first day selected in the month view, so the view switcher opens the other views at it. */
+  const [focusDay, setFocusDay] = createSignal(null);
   const normalizedEvents = createMemo(() => normalizeEvents(props.events, dateConfig()));
   const mergedLabels = createMemo(() => ({
     today: messages().today,
@@ -1453,7 +2567,7 @@ const CalendarRoot = props => {
       document.removeEventListener("visibilitychange", updateNow);
     });
   });
-  return _$ssr(_tmpl$42, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
+  return _$ssr(_tmpl$63, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
     get date() {
       return date();
     },
@@ -1463,8 +2577,11 @@ const CalendarRoot = props => {
     get labels() {
       return mergedLabels();
     },
-    owner: owner
-  })), _$escape(props.toolbarContent), _$escape(_$createComponent(Show, {
+    owner: owner,
+    get focusDay() {
+      return _$memo(() => view() === "month")() ? focusDay() : null;
+    }
+  })), _$escape(_$createComponent(Show, {
     get when() {
       return !custom();
     },
@@ -1496,7 +2613,8 @@ const CalendarRoot = props => {
                 },
                 get labels() {
                   return mergedLabels();
-                }
+                },
+                onFocusDay: setFocusDay
               });
             }
           });