@k2b/ui 0.22.0 → 0.24.0

package/dist/browser/content/CalendarWeekView.js

@@ -0,0 +1,1593 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__now-time aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-calendar-night>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__now-line>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week data-view=week><div class="k2b-calendar-week__scroll k2b-detail-trail"role=group><div class=k2b-calendar-week__grid><div class=k2b-calendar-week__top><div class=k2b-calendar-week__corner aria-hidden=true></div><!$><!/><div class=k2b-calendar-week__all-day-label aria-hidden=true><span class=k2b-calendar-week__all-day-long></span><span class=k2b-calendar-week__all-day-short></span></div><div class=k2b-calendar-week__all-day role=group><!$><!/><!$><!/></div></div><div class=k2b-calendar-week__body><div class=k2b-calendar-week__gutter><!$><!/><!$><!/><button type=button class=k2b-calendar-week__moon><i class="ti ti-moon"aria-hidden=true></i><i aria-hidden=true></i></button><!$><!/></div><div class=k2b-calendar-week__lines aria-hidden=true><!$><!/><!$><!/><!$><!/></div><!$><!/></div></div></div><p class=k2b-calendar-sr></p><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-week__head data-minute=-2><span class=k2b-calendar-week__weekday></span><span class=k2b-calendar-week__number></span><span class=k2b-calendar-week__extra></span><span class=k2b-calendar-week__load aria-hidden=true></span><span class=k2b-calendar-week__cheer aria-hidden=true><i class="ti ti-confetti"aria-hidden=true></i><span class=k2b-calendar-week__cheer-long></span><span class=k2b-calendar-week__cheer-short>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__badge><!$><!/><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__range aria-hidden=true style="grid-row:1 / -1">`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__slot><!$><!/><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__hour aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__hour data-night=true aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__line>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__fold>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__fold-cell><ul class=k2b-calendar-fold__chips>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-calendar-hover aria-hidden=true>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-calendar-now aria-hidden=true>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__column data-calendar-column role=group><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<li><!$><!/><!$><!/>`);
+import { dates as calendar } from "@k2b/stdlib";
+import { createComputed, createEffect, createMemo, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { GESTURE_GAP_MS, snapToColumn, wheelAxis, wheelDelta, wheelPixels } from "./calendar-day-scroll";
+import { addDayKeys, DAY_MINUTES, dayHeightTerms, dayKeyNumber, dayKeyRange, dayMinuteAt, dayY, dayYTerms, markerLanes, readDayGeometry, termsCss } from "./calendar-days";
+import { layoutMonthWeek } from "./calendar-month-layout";
+import { startCalendarPointerSession } from "./calendar-pointer";
+import { EventChip, eventHref, followCalendarHref, textWidth } from "./calendar-shared";
+import { createTimeView, dayBands, dayGaps, dayLoad, eventAccent, foldedEntries, gapAside, isNearNow, longDay, markerAbove, nightHours, reducedMotion, swallowNextClick, TimeBand, TimeCheck, TimeGap, TimeMarker, TimeOverlays, TimeQuickCreate, weekKeysOf } from "./calendar-time-view";
+
+/** Room a bar keeps beside its title and date hint: padding, torn edge, gap, and an icon such as a task box. */
+const HINT_SLACK_PX = 36;
+
+/**
+ * The week view with `dayHours`: the loaded days side by side in one strip, seven on a wide screen and three on a
+ * phone. A trackpad, Shift with the wheel, or a finger scroll it sideways day by day; each gesture keeps the axis it
+ * started on, and the strip settles on a day edge. The arrows move by whole weeks.
+ */
+export const CalendarWeekView = props => {
+  const view = createTimeView(props);
+  const [mounted, setMounted] = createSignal(false);
+  const [firstIndex, setFirstIndex] = createSignal(0);
+  const [visibleCount, setVisibleCount] = createSignal(7);
+  /** The week whose nights decide whether the night rows open, set by navigation, not by free scrolling. */
+  const [nightWeek, setNightWeek] = createSignal(untrack(view.anchorKey));
+  const [nightOverride, setNightOverride] = createSignal(null);
+  const [roving, setRoving] = createSignal("");
+  let scroller;
+  const helpId = createUniqueId();
+  const anchorWeek = () => weekKeysOf(view, view.anchorKey());
+  // The server and the first render draw only the shown week, so the strip never flashes the days before it.
+  const keys = createMemo(() => {
+    const {
+      first,
+      last
+    } = view.range();
+    if (mounted()) return dayKeyRange(first, last);
+    const week = anchorWeek();
+    return week[0] >= first && week[6] <= last ? week : dayKeyRange(first, last);
+  });
+  const indexOf = key => dayKeyNumber(key) - dayKeyNumber(keys()[0]);
+  const nightsOpen = createMemo(() => {
+    const override = nightOverride();
+    if (override !== null) return override;
+    return weekKeysOf(view, nightWeek()).some(key => view.dayOf(key).night);
+  });
+  createEffect(on(nightWeek, () => setNightOverride(null), {
+    defer: true
+  }));
+  const wake = () => view.wake();
+
+  // Columns and scrolling.
+  /** The exact width of a day column: columns are a seventh or a third of the strip, rarely whole pixels. */
+  const columnWidth = () => scroller?.querySelector("[data-calendar-column]")?.getBoundingClientRect().width ?? 0;
+  const gutterWidth = () => scroller?.querySelector(".k2b-calendar-week__gutter")?.offsetWidth ?? 0;
+  const leftOf = index => index * columnWidth();
+  const visibleIndex = () => {
+    const width = columnWidth();
+    return width > 0 && scroller ? Math.round(scroller.scrollLeft / width) : 0;
+  };
+  const visibleKeys = () => {
+    const first = keys()[Math.min(keys().length - 1, Math.max(0, firstIndex()))] ?? view.anchorKey();
+    return {
+      first,
+      last: addDayKeys(first, visibleCount() - 1)
+    };
+  };
+  /** Now shows in the hours while today is among the days in view, like the prototype's week. */
+  const nowShown = () => {
+    const {
+      first,
+      last
+    } = visibleKeys();
+    const today = view.nowKey();
+    return today >= first && today <= last && view.nowMinute() >= 0 && view.nowMinute() < (nightsOpen() ? DAY_MINUTES : wake());
+  };
+  let settling = false;
+  let glideTarget = null;
+  let glideTimer = 0;
+  const glideTo = (left, top) => {
+    if (!scroller) return;
+    const target = Math.max(0, Math.min(left, scroller.scrollWidth - scroller.clientWidth));
+    glideTarget = target;
+    window.clearTimeout(glideTimer);
+    glideTimer = window.setTimeout(() => {
+      glideTarget = null;
+    }, 1600);
+    scroller.scrollTo({
+      left: target,
+      ...(top === undefined ? {} : {
+        top
+      }),
+      behavior: reducedMotion() ? "instant" : "smooth"
+    });
+  };
+  /** The scroll position of a minute in the timeline, with now in the upper third. */
+  const topFor = minute => {
+    if (!scroller) return 0;
+    const body = scroller.querySelector("[data-calendar-body]");
+    const head = scroller.querySelector(".k2b-calendar-week__top");
+    if (!body || !head) return 0;
+    const geometry = readDayGeometry(body, wake(), nightsOpen());
+    const offset = body.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop - head.offsetHeight;
+    return Math.max(0, offset + dayY(geometry, minute) - (scroller.clientHeight - head.offsetHeight) / 3);
+  };
+  /** The first column of a week: its first day, or on a phone a day of it kept inside the week. */
+  const columnFor = (key, phoneDay) => {
+    const week = weekKeysOf(view, key);
+    if (visibleCount() >= 7 || !phoneDay) return indexOf(week[0]);
+    const day = Math.max(0, Math.min(7 - visibleCount(), dayKeyNumber(phoneDay) - dayKeyNumber(week[0])));
+    return indexOf(week[day]);
+  };
+  const positionAt = key => {
+    if (!scroller) return;
+    measureCount();
+    const today = view.nowKey();
+    const inWeek = weekKeysOf(view, key).includes(today);
+    scroller.scrollLeft = leftOf(columnFor(key, key));
+    scroller.scrollTop = inWeek ? topFor(view.nowMinute()) : topFor(60);
+    lastLeft = scroller.scrollLeft;
+    syncFirst();
+  };
+  const measureCount = () => {
+    const width = columnWidth();
+    if (!scroller || width <= 0) return;
+    // Whole-pixel columns leave a few pixels at the right edge; the strip ends at its last whole day instead of
+    // showing a sliver of the next one.
+    const room = scroller.clientWidth + (Number.parseFloat(scroller.style.marginRight) || 0) - gutterWidth();
+    const count = Math.max(1, Math.round(room / width));
+    setVisibleCount(count);
+    const rest = Math.floor(room - count * width);
+    scroller.style.marginRight = rest > 0 ? `${rest}px` : "";
+  };
+  let reportTimer = 0;
+  let reported = "";
+  const syncFirst = () => {
+    const index = visibleIndex();
+    if (index !== untrack(firstIndex)) setFirstIndex(index);
+    if (!untrack(keys)[index]) return;
+    // The host learns the days the reader sees once they changed, after the scroll calmed down.
+    const {
+      first,
+      last
+    } = untrack(visibleKeys);
+    if (`${first}/${last}` === reported) return;
+    reported = `${first}/${last}`;
+    window.clearTimeout(reportTimer);
+    reportTimer = window.setTimeout(() => props.owner.onVisibleDateChange?.(view.parseKey(first), view.parseKey(last)), 250);
+  };
+
+  // A gesture keeps its axis; the strip settles on a day edge once the scroll rests.
+  let axis = null;
+  let lastWheel = 0;
+  let fingers = 0;
+  let restTimer = 0;
+  let ready = false;
+  /** Whether a wheel or a finger moved the strip since it last settled, and the way it last moved. */
+  let gesture = false;
+  let heading = 0;
+  let headingFrom = 0;
+  const settle = () => {
+    if (!scroller || fingers > 0 || settling || glideTarget !== null || view.dragging()) return;
+    const width = columnWidth();
+    const space = Number.parseFloat(getComputedStyle(scroller).scrollPaddingRight) || 0;
+    // A gesture rests on the nearest edge. A scroll without one, such as a reveal, goes on its way, so what it brought
+    // into view stays there; with end space, a revealed day can rest with its end beside the drawer.
+    const target = snapToColumn(scroller.scrollLeft, width, space > 0 ? scroller.clientWidth - gutterWidth() - space : undefined, gesture ? 0 : heading);
+    gesture = false;
+    if (Math.abs(target - scroller.scrollLeft) <= 0.5) return;
+    settling = true;
+    scroller.scrollTo({
+      left: target,
+      behavior: reducedMotion() ? "instant" : "smooth"
+    });
+    window.setTimeout(() => {
+      settling = false;
+    }, 450);
+  };
+  const onWheel = event => {
+    if (!scroller || event.ctrlKey || view.dragging()) return;
+    // A gesture that goes on takes over from a glide onto a day start; the strip settles again once it rests.
+    settling = false;
+    gesture = true;
+    if (event.timeStamp - lastWheel > GESTURE_GAP_MS || axis === null) axis = wheelAxis(event.deltaX, event.deltaY, event.shiftKey);
+    lastWheel = event.timeStamp;
+    const delta = wheelPixels(wheelDelta(axis, event.deltaX, event.deltaY, event.shiftKey), event.deltaMode, axis === "x" ? scroller.clientWidth : scroller.clientHeight);
+    if (axis === "x") {
+      event.preventDefault();
+      glideTarget = null;
+      scroller.scrollLeft += delta;
+    } else if (event.deltaX !== 0) {
+      // A trackpad's slight sideways drift in a vertical gesture would move the days; only the vertical part counts.
+      event.preventDefault();
+      scroller.scrollTop += delta;
+    }
+  };
+  let askedEarlier = "";
+  let askedLater = "";
+  /** The last scroll position the strip read, to tell which way the reader moves. */
+  let lastLeft = 0;
+  /**
+   * Asks for the week before or after once the reader moves within a week of an end. Days loaded before the strip push
+   * it on by a week, so only moving toward an end asks; a glide may load later days, which push nothing.
+   */
+  const loadMore = () => {
+    if (!scroller || !ready || view.dragging()) return;
+    const width = columnWidth();
+    const {
+      first,
+      last
+    } = view.range();
+    const left = scroller.scrollLeft;
+    const direction = Math.sign(left - lastLeft);
+    lastLeft = left;
+    if (direction < 0 && glideTarget === null && left < width * 7 - 1 && props.owner.onLoadEarlier && askedEarlier !== first) {
+      askedEarlier = first;
+      void props.owner.onLoadEarlier();
+    }
+    if (direction > 0 && left + scroller.clientWidth > scroller.scrollWidth - width * 7 + 1 && props.owner.onLoadLater && askedLater !== last) {
+      askedLater = last;
+      void props.owner.onLoadLater();
+    }
+  };
+  let frame = 0;
+  const onScroll = () => {
+    if (!scroller) return;
+    if (glideTarget !== null && Math.abs(scroller.scrollLeft - glideTarget) < 2) glideTarget = null;
+    if (Math.abs(scroller.scrollLeft - headingFrom) > 0.5) heading = Math.sign(scroller.scrollLeft - headingFrom);
+    headingFrom = scroller.scrollLeft;
+    if (!frame) frame = requestAnimationFrame(() => {
+      frame = 0;
+      syncFirst();
+      loadMore();
+      rememberAnchor();
+    });
+    window.clearTimeout(restTimer);
+    restTimer = window.setTimeout(settle, fingers > 0 ? 160 : 140);
+  };
+
+  // Days loaded before the strip's first day shift it; the view keeps its days in place.
+  let anchor = null;
+  /** A day the host moved to before its days loaded; it goes on screen once they arrive. */
+  let pendingTarget = null;
+  /** Notes the day at the start of the strip, read against the days the strip draws, which may still be the old ones. */
+  const rememberAnchor = (drawn = untrack(keys)) => {
+    if (!scroller) return;
+    const width = columnWidth();
+    if (width <= 0) return;
+    const index = Math.floor(scroller.scrollLeft / width);
+    const key = drawn[index];
+    if (key) anchor = {
+      key,
+      offset: scroller.scrollLeft - index * width
+    };
+  };
+  // Before the days change the strip, note its place from the page as it stands. A computation runs before any render
+  // effect touches the page, so no row has shrunk the strip yet.
+  createComputed(on(keys, (next, drawn) => {
+    if (!untrack(mounted) || !drawn) return;
+    rememberAnchor(drawn);
+    // Days that come in before the strip move every index; the first day in view stays the same day, so what
+    // depends on the days in view, such as the all-day row, never sees the days that came in.
+    const shift = dayKeyNumber(drawn[0]) - dayKeyNumber(next[0]);
+    if (shift !== 0) setFirstIndex(index => index + shift);
+  }, {
+    defer: true
+  }));
+  createEffect(on(keys, () => {
+    if (!untrack(mounted) || !scroller) return;
+    if (pendingTarget && loaded(pendingTarget)) {
+      positionAt(pendingTarget);
+      pendingTarget = null;
+      rememberAnchor();
+      syncFirst();
+      return;
+    }
+    if (!anchor) return;
+    const index = indexOf(anchor.key);
+    const left = leftOf(index) + anchor.offset;
+    if (Math.abs(scroller.scrollLeft - left) > 0.5) scroller.scrollLeft = left;
+    lastLeft = scroller.scrollLeft;
+  }, {
+    defer: true
+  }));
+
+  /** The day width the strip last kept its first day for. */
+  let measuredWidth = 0;
+  onMount(() => {
+    setMounted(true);
+    queueMicrotask(() => {
+      positionAt(view.anchorKey());
+      rememberAnchor();
+      ready = true;
+    });
+    const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => {
+      if (!scroller) return;
+      // A reveal the scroll handler has not read yet wins over keeping the first day.
+      const unread = Math.abs(scroller.scrollLeft - lastLeft) > 0.5;
+      const before = untrack(firstIndex);
+      measureCount();
+      // Only days of a new width move the strip back onto its first day. Setting scrollLeft stops a smooth scroll
+      // on its way, such as a reveal, so a drawer's padding or the strip's own trim must not.
+      const width = columnWidth();
+      const resized = Math.abs(width - measuredWidth) > 0.01;
+      measuredWidth = width;
+      if (resized && !unread && Math.abs(scroller.scrollLeft - leftOf(before)) > 0.5) scroller.scrollLeft = leftOf(before);
+      lastLeft = scroller.scrollLeft;
+      syncFirst();
+    });
+    if (scroller) observer?.observe(scroller);
+    onCleanup(() => {
+      observer?.disconnect();
+      window.clearTimeout(restTimer);
+      window.clearTimeout(reportTimer);
+      window.clearTimeout(glideTimer);
+      if (frame) cancelAnimationFrame(frame);
+    });
+  });
+  createEffect(on(view.anchorKey, key => {
+    if (!untrack(mounted)) return;
+    setNightWeek(key);
+    pendingTarget = loaded(key) ? null : key;
+    if (pendingTarget) return;
+    if (key === untrack(visibleKeys).first) {
+      rememberAnchor();
+      return;
+    }
+    queueMicrotask(() => {
+      positionAt(key);
+      rememberAnchor();
+    });
+  }, {
+    defer: true
+  }));
+  const loaded = key => key >= view.range().first && key <= view.range().last;
+  const handle = {
+    visibleKeys,
+    step: direction => {
+      const first = visibleKeys().first;
+      const week = weekKeysOf(view, first);
+      // From the middle of a week the arrows go to the start of a week first.
+      const target = direction > 0 ? addDayKeys(week[0], 7) : first === week[0] ? addDayKeys(week[0], -7) : week[0];
+      const last = addDayKeys(target, Math.min(6, visibleCount() - 1));
+      if (!loaded(target) || !loaded(last)) return false;
+      setNightWeek(target);
+      glideTo(leftOf(indexOf(target)));
+      return true;
+    },
+    goTo: key => {
+      if (!loaded(key)) return false;
+      setNightWeek(key);
+      view.setSelection({
+        key
+      });
+      glideTo(leftOf(columnFor(key, key)));
+      return true;
+    },
+    today: () => {
+      const today = view.nowKey();
+      const week = weekKeysOf(view, today);
+      if (!loaded(week[0]) || !loaded(week[6])) return false;
+      setNightWeek(today);
+      queueMicrotask(() => glideTo(leftOf(columnFor(today, today)), topFor(view.nowMinute())));
+      return true;
+    },
+    todayDirection: () => {
+      const today = view.nowKey();
+      const {
+        first,
+        last
+      } = visibleKeys();
+      if (today < first) return "left";
+      if (today > last) return "right";
+      return "";
+    },
+    controller: {
+      quickCreate: create => {
+        const target = view.createTarget(visibleKeys());
+        const column = scroller?.querySelector(`[data-calendar-body="${target.key}"]`);
+        view.openQuickCreate(target.key, target.start, target.end, slotRect(target.key, target.start, target.end) ?? column ?? scroller, create);
+      },
+      createTarget: () => view.rangeOfSelection(view.createTarget(visibleKeys())),
+      dragIn: (event, item, onDrop) => view.dragIn(event, item, onDrop, scroller)
+    }
+  };
+  const slotRect = (key, start, end) => {
+    const body = scroller?.querySelector(`[data-calendar-body="${key}"]`);
+    if (!body || !scroller) return null;
+    const rect = body.getBoundingClientRect();
+    const bounds = scroller.getBoundingClientRect();
+    if (rect.right < bounds.left + gutterWidth() || rect.left > bounds.right) return null;
+    const geometry = readDayGeometry(body, wake(), nightsOpen());
+    const top = rect.top + dayY(geometry, start);
+    const bottom = rect.top + dayY(geometry, end);
+    if (bottom < bounds.top + 40 || top > bounds.bottom - 20) return null;
+    return new DOMRect(rect.left, Math.max(bounds.top, top), rect.width, Math.max(8, Math.min(bottom, bounds.bottom) - Math.max(bounds.top, top)));
+  };
+  onMount(() => props.register(handle));
+  onCleanup(() => props.register(null));
+
+  // The all-day row: one bar per week, with a torn edge where an event goes on in the week before or after.
+  const allDay = createMemo(() => {
+    const all = keys();
+    const spans = new Map();
+    for (const key of all) for (const span of view.dayOf(key).spans) spans.set(span.item, span);
+    const entries = [...spans.values()].sort((left, right) => left.firstKey.localeCompare(right.firstKey) || right.lastKey.localeCompare(left.lastKey)).map(span => ({
+      item: span,
+      firstKey: span.firstKey,
+      lastKey: span.lastKey,
+      bar: !span.marker
+    }));
+    const weeks = [];
+    for (let index = 0; index < all.length;) {
+      const week = weekKeysOf(view, all[index]).filter(key => key >= all[0] && key <= all[all.length - 1]);
+      const offset = indexOf(week[0]);
+      weeks.push({
+        offset,
+        keys: week
+      });
+      index = offset + week.length;
+    }
+    return weeks.map(week => {
+      const layout = layoutMonthWeek(week.keys, entries);
+      const lanes = Math.max(0, ...layout.bars.map(bar => bar.lane + 1));
+      return {
+        ...week,
+        layout,
+        rows: lanes + Math.max(0, ...layout.singles.map(singles => singles.length))
+      };
+    });
+  });
+  /**
+   * The rows the weeks in view need, as in a week of its own. A week that loads off screen never changes them, so the
+   * hours stay where they are; its entries below these rows wait hidden until it comes into view.
+   */
+  const allDayRows = createMemo(() => {
+    const first = firstIndex();
+    const last = first + visibleCount() - 1;
+    return Math.max(1, ...allDay().filter(week => week.offset <= last && week.offset + week.keys.length - 1 >= first).map(week => week.rows));
+  });
+
+  // Keyboard: one tab stop in the grid; the arrows move between days, entries, and free time. Only what is drawn can
+  // take the focus.
+  const stops = () => [...(scroller?.querySelectorAll("[data-stop]") ?? [])].filter(stop => stop.getClientRects().length > 0);
+  const focusDayKey = () => {
+    const current = view.selection()?.key;
+    const {
+      first,
+      last
+    } = visibleKeys();
+    if (current && current >= first && current <= last) return current;
+    return view.nowKey() >= first && view.nowKey() <= last ? view.nowKey() : first;
+  };
+  const rovingId = () => roving() || `h:${focusDayKey()}`;
+  const tabOf = id => rovingId() === id ? 0 : -1;
+  // An entry that leaves the days gives the grid's tab stop back to a heading after the page has updated.
+  createEffect(on(view.days, () => {
+    queueMicrotask(() => {
+      if (!scroller || !roving()) return;
+      if ([...scroller.querySelectorAll("[data-stop]")].some(stop => stop.dataset.stop === roving())) return;
+      setRoving("");
+      if (!document.activeElement || document.activeElement === document.body) {
+        scroller.querySelector(`[data-stop="h:${focusDayKey()}"]`)?.focus({
+          preventScroll: true
+        });
+      }
+    });
+  }, {
+    defer: true
+  }));
+  const onKeyDown = event => {
+    const current = event.target instanceof HTMLElement ? event.target.closest("[data-stop]") : null;
+    if (!current || event.altKey || event.metaKey || event.ctrlKey) return;
+    const direction = {
+      ArrowUp: "up",
+      ArrowDown: "down",
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      Home: "home",
+      End: "end"
+    }[event.key];
+    if (!direction) return;
+    event.preventDefault();
+    const all = stops();
+    const column = Number(current.dataset.col);
+    const minute = Number(current.dataset.minute);
+    const inColumn = index => all.filter(stop => Number(stop.dataset.col) === index).sort((left, right) => Number(left.dataset.minute) - Number(right.dataset.minute));
+    const list = inColumn(column);
+    const position = list.indexOf(current);
+    let next;
+    if (direction === "down") next = list[position + 1];else if (direction === "up") next = list[position - 1];else if (direction === "home") next = list[0];else if (direction === "end") next = list[list.length - 1];else {
+      const other = inColumn(column + (direction === "left" ? -1 : 1));
+      next = other.reduce((best, stop) => Math.abs(Number(stop.dataset.minute) - minute) < Math.abs(Number(best?.dataset.minute ?? Number.POSITIVE_INFINITY) - minute) ? stop : best, undefined);
+    }
+    if (!next) return;
+    setRoving(next.dataset.stop ?? "");
+    next.focus({
+      preventScroll: Boolean(next.closest(".k2b-calendar-week__top"))
+    });
+    const index = Number(next.dataset.col);
+    const first = untrack(firstIndex);
+    if (index < first) glideTo(leftOf(index));else if (index >= first + visibleCount()) glideTo(leftOf(index - visibleCount() + 1));
+  };
+  const openDay = key => {
+    const href = props.owner.views && !props.owner.views.includes("day") ? undefined : props.owner.getDateHref?.(view.parseKey(key), "day");
+    if (href) followCalendarHref(props.owner, href);else {
+      props.owner.onViewChange?.("day");
+      props.owner.onDateChange?.(view.parseKey(key), "day");
+    }
+  };
+  let lastPointer = "mouse";
+
+  // The all-day row: drag across days for one all-day event; a double-click creates on one day.
+  const startAllDayRange = (pointerEvent, row) => {
+    if (pointerEvent.pointerType !== "mouse" || pointerEvent.button !== 0 || !view.canCreate()) return;
+    const keyAt = clientX => {
+      const width = columnWidth();
+      const rect = row.getBoundingClientRect();
+      const index = Math.max(0, Math.min(keys().length - 1, Math.floor((clientX - rect.left) / width)));
+      return keys()[index];
+    };
+    const origin = keyAt(pointerEvent.clientX);
+    startCalendarPointerSession({
+      event: pointerEvent,
+      resolve: clientX => keyAt(clientX),
+      onPreview: key => setRangeSelection(origin < key ? {
+        first: origin,
+        last: key
+      } : {
+        first: key,
+        last: origin
+      }),
+      onCommit: key => {
+        swallowNextClick();
+        const range = origin < key ? {
+          first: origin,
+          last: key
+        } : {
+          first: key,
+          last: origin
+        };
+        const cells = scroller?.querySelector(".k2b-calendar-week__range");
+        setRangeSelection(null);
+        const start = view.parseKey(range.first);
+        const end = calendar.addDays(view.parseKey(range.last), 1, view.dateConfig());
+        if (props.owner.renderQuickCreate) view.setQuick({
+          range: {
+            start,
+            end,
+            allDay: true
+          },
+          anchor: cells?.getBoundingClientRect() ?? row,
+          key: range.first
+        });else props.owner.onSlotActivate?.({
+          start,
+          end,
+          allDay: true
+        });
+      },
+      onCancel: () => setRangeSelection(null)
+    });
+  };
+  const [rangeSelection, setRangeSelection] = createSignal(null);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$4),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$4.firstChild,
+      _el$12 = _el$5.nextSibling,
+      [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
+      _el$6 = _el$13.nextSibling,
+      _el$7 = _el$6.firstChild,
+      _el$8 = _el$7.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      _el$0 = _el$9.firstChild,
+      [_el$1, _co$] = _$getNextMarker(_el$0.nextSibling),
+      _el$10 = _el$1.nextSibling,
+      [_el$11, _co$2] = _$getNextMarker(_el$10.nextSibling),
+      _el$14 = _el$4.nextSibling,
+      _el$15 = _el$14.firstChild,
+      _el$20 = _el$15.firstChild,
+      [_el$21, _co$4] = _$getNextMarker(_el$20.nextSibling),
+      _el$22 = _el$21.nextSibling,
+      [_el$23, _co$5] = _$getNextMarker(_el$22.nextSibling),
+      _el$16 = _el$23.nextSibling,
+      _el$17 = _el$16.firstChild,
+      _el$18 = _el$17.nextSibling,
+      _el$24 = _el$16.nextSibling,
+      [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
+      _el$26 = _el$15.nextSibling,
+      _el$29 = _el$26.firstChild,
+      [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling),
+      _el$31 = _el$30.nextSibling,
+      [_el$32, _co$8] = _$getNextMarker(_el$31.nextSibling),
+      _el$33 = _el$32.nextSibling,
+      [_el$34, _co$9] = _$getNextMarker(_el$33.nextSibling),
+      _el$35 = _el$26.nextSibling,
+      [_el$36, _co$0] = _$getNextMarker(_el$35.nextSibling),
+      _el$37 = _el$2.nextSibling,
+      _el$38 = _el$37.nextSibling,
+      [_el$39, _co$1] = _$getNextMarker(_el$38.nextSibling);
+    _el$2.addEventListener("touchcancel", event => {
+      fingers = event.touches.length;
+    });
+    _el$2.$$touchend = event => {
+      fingers = event.touches.length;
+      onScroll();
+    };
+    _el$2.$$touchstart = event => {
+      fingers = event.touches.length;
+      gesture = true;
+      glideTarget = null;
+    };
+    _el$2.$$focusin = event => {
+      const stop = event.target instanceof HTMLElement ? event.target.closest("[data-stop]") : null;
+      if (stop?.dataset.stop) setRoving(stop.dataset.stop);
+    };
+    _el$2.$$keydown = onKeyDown;
+    _el$2.addEventListener("wheel", onWheel);
+    _el$2.addEventListener("scroll", onScroll);
+    var _ref$ = scroller;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$2) : scroller = _el$2;
+    _$setAttribute(_el$2, "aria-describedby", helpId);
+    _$insert(_el$5, () => view.messages().calendarWeekNumber({
+      week: isoWeek(visibleKeys().first)
+    }));
+    _$insert(_el$4, _$createComponent(For, {
+      get each() {
+        return keys();
+      },
+      children: key => {
+        const today = () => key === view.calendarToday();
+        const selected = () => {
+          const current = view.selection();
+          return Boolean(current && current.key === key && current.start === undefined);
+        };
+        const badge = () => props.owner.dayBadges?.[key];
+        const load = () => dayLoad(view, key);
+        const date = () => view.parseKey(key);
+        return (() => {
+          var _el$40 = _$getNextElement(_tmpl$5),
+            _el$41 = _el$40.firstChild,
+            _el$42 = _el$41.nextSibling,
+            _el$43 = _el$42.nextSibling,
+            _el$44 = _el$43.nextSibling,
+            _el$45 = _el$44.nextSibling,
+            _el$46 = _el$45.firstChild,
+            _el$47 = _el$46.nextSibling,
+            _el$48 = _el$47.nextSibling;
+          _el$40.$$click = event => {
+            if (event.detail >= 2 || selected() && lastPointer !== "mouse") {
+              openDay(key);
+              return;
+            }
+            view.setTouchDraft(null);
+            view.setSelection(selected() ? null : {
+              key
+            });
+          };
+          _el$40.$$pointerdown = event => {
+            lastPointer = event.pointerType;
+            // The heading stays on top: focusing it must not scroll the grid.
+            if (event.button === 0) {
+              event.preventDefault();
+              event.currentTarget.focus({
+                preventScroll: true
+              });
+            }
+          };
+          _$setAttribute(_el$40, "data-calendar-head", key);
+          _$setAttribute(_el$40, "data-stop", `h:${key}`);
+          _$insert(_el$41, () => date().toLocaleDateString(view.dateConfig().locale ?? "en", {
+            weekday: "short",
+            timeZone: view.dateConfig().timeZone
+          }).replace(/\.$/, ""));
+          _$insert(_el$42, () => calendar.formatDayNumber(date(), view.dateConfig()));
+          _$insert(_el$43, _$createComponent(Show, {
+            get when() {
+              return badge();
+            },
+            children: current => (() => {
+              var _el$49 = _$getNextElement(_tmpl$6),
+                _el$50 = _el$49.firstChild,
+                [_el$51, _co$10] = _$getNextMarker(_el$50.nextSibling),
+                _el$52 = _el$51.nextSibling,
+                [_el$53, _co$11] = _$getNextMarker(_el$52.nextSibling);
+              _$insert(_el$49, _$createComponent(Show, {
+                get when() {
+                  return current().icon;
+                },
+                children: icon => (() => {
+                  var _el$54 = _$getNextElement(_tmpl$7);
+                  _$effect(() => _$className(_el$54, `ti ti-${icon()}`));
+                  return _el$54;
+                })()
+              }), _el$51, _co$10);
+              _$insert(_el$49, () => current().label, _el$53, _co$11);
+              return _el$49;
+            })()
+          }));
+          _$insert(_el$44, _$createComponent(For, {
+            get each() {
+              return load();
+            },
+            children: piece => (() => {
+              var _el$55 = _$getNextElement(_tmpl$8);
+              _$effect(_p$ => {
+                var _v$21 = `${(piece.end - piece.start) / wake() * 100}%`,
+                  _v$22 = piece.color;
+                _v$21 !== _p$.e && _$setStyleProperty(_el$55, "width", _p$.e = _v$21);
+                _v$22 !== _p$.t && _$setStyleProperty(_el$55, "background", _p$.t = _v$22);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$55;
+            })()
+          }));
+          _$insert(_el$47, () => view.messages().calendarAllDone);
+          _$insert(_el$48, () => view.messages().calendarAllDoneShort);
+          _$effect(_p$ => {
+            var _v$13 = indexOf(key),
+              _v$14 = tabOf(`h:${key}`),
+              _v$15 = selected() ? "true" : "false",
+              _v$16 = [longDay(view, key), today() ? view.props.labels.today : "", badge()?.label ?? ""].filter(Boolean).join(", "),
+              _v$17 = today() ? "true" : undefined,
+              _v$18 = key < view.calendarToday() ? "true" : undefined,
+              _v$19 = view.cheered() === key ? "true" : undefined,
+              _v$20 = String(indexOf(key) + 2);
+            _v$13 !== _p$.e && _$setAttribute(_el$40, "data-col", _p$.e = _v$13);
+            _v$14 !== _p$.t && _$setAttribute(_el$40, "tabindex", _p$.t = _v$14);
+            _v$15 !== _p$.a && _$setAttribute(_el$40, "aria-pressed", _p$.a = _v$15);
+            _v$16 !== _p$.o && _$setAttribute(_el$40, "aria-label", _p$.o = _v$16);
+            _v$17 !== _p$.i && _$setAttribute(_el$40, "data-today", _p$.i = _v$17);
+            _v$18 !== _p$.n && _$setAttribute(_el$40, "data-past", _p$.n = _v$18);
+            _v$19 !== _p$.s && _$setAttribute(_el$40, "data-cheer", _p$.s = _v$19);
+            _v$20 !== _p$.h && _$setStyleProperty(_el$40, "grid-column", _p$.h = _v$20);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined,
+            s: undefined,
+            h: undefined
+          });
+          _$runHydrationEvents();
+          return _el$40;
+        })();
+      }
+    }), _el$13, _co$3);
+    _$insert(_el$7, () => view.messages().calendarAllDayRow);
+    _$insert(_el$8, () => view.messages().calendarAllDayRowShort);
+    _el$9.$$dblclick = event => {
+      if (!(event.target instanceof Element) || event.target.closest("a,button,[data-calendar-event]")) return;
+      const width = columnWidth();
+      const rect = event.currentTarget.getBoundingClientRect();
+      const key = keys()[Math.max(0, Math.min(keys().length - 1, Math.floor((event.clientX - rect.left) / width)))];
+      const start = view.parseKey(key);
+      const range = {
+        start,
+        end: calendar.addDays(start, 1, view.dateConfig()),
+        allDay: true
+      };
+      if (props.owner.renderQuickCreate) view.setQuick({
+        range,
+        anchor: new DOMRect(rect.left + indexOf(key) * width, rect.top, width, rect.height),
+        key
+      });else props.owner.onSlotActivate?.(range);
+    };
+    _el$9.$$pointerdown = event => {
+      if (event.target instanceof Element && event.target.closest("a,button,[data-calendar-event]")) return;
+      startAllDayRange(event, event.currentTarget);
+    };
+    _$insert(_el$9, _$createComponent(Show, {
+      get when() {
+        return rangeSelection();
+      },
+      children: range => (() => {
+        var _el$56 = _$getNextElement(_tmpl$9);
+        _$effect(_$p => _$setStyleProperty(_el$56, "grid-column", `${indexOf(range().first) + 1} / ${indexOf(range().last) + 2}`));
+        return _el$56;
+      })()
+    }), _el$1, _co$);
+    _$insert(_el$9, _$createComponent(For, {
+      get each() {
+        return allDay();
+      },
+      children: week => [_$createComponent(For, {
+        get each() {
+          return week.layout.bars;
+        },
+        children: bar => {
+          const span = bar.endColumn - bar.startColumn + 1;
+          const event = bar.item.item;
+          const checked = () => view.checkedOf(event);
+          const hint = (target, kind, before = "") => {
+            const text = kind === "from" ? view.messages().calendarContinuesFrom(hintDate(view, target, visibleKeys().first)) : view.messages().calendarContinuesUntil(hintDate(view, target, visibleKeys().first));
+            const font = `600 11px ${typeof document === "undefined" ? "sans-serif" : getComputedStyle(document.body).fontFamily}`;
+            return textWidth(`${event.title}${before}`, font) + textWidth(text, font) + HINT_SLACK_PX <= span * columnWidthSignal() ? text : undefined;
+          };
+          const start = () => bar.continuesBefore ? hint(bar.item.firstKey, "from") : undefined;
+          const end = () => bar.continuesAfter ? hint(bar.item.lastKey, "until", start() ?? "") : undefined;
+          return (() => {
+            var _el$57 = _$getNextElement(_tmpl$0),
+              _el$58 = _el$57.firstChild,
+              [_el$59, _co$12] = _$getNextMarker(_el$58.nextSibling),
+              _el$60 = _el$59.nextSibling,
+              [_el$61, _co$13] = _$getNextMarker(_el$60.nextSibling);
+            _$insert(_el$57, _$createComponent(Show, {
+              get when() {
+                return checked() !== undefined;
+              },
+              get children() {
+                return _$createComponent(TimeCheck, {
+                  view: view,
+                  event: event,
+                  tabIndex: -1
+                });
+              }
+            }), _el$59, _co$12);
+            _$insert(_el$57, _$createComponent(EventChip, {
+              get event() {
+                return view.normalized(event, bar.item.firstKey);
+              },
+              get owner() {
+                return props.owner;
+              },
+              get href() {
+                return eventHref(props.owner, event);
+              },
+              get label() {
+                return spanLabel(view, bar.item);
+              },
+              compact: true,
+              timeline: true,
+              bar: true,
+              get checkbox() {
+                return checked() !== undefined;
+              },
+              get onCheck() {
+                return view.checkOf(event);
+              },
+              get continuesBefore() {
+                return bar.continuesBefore;
+              },
+              get continuesAfter() {
+                return bar.continuesAfter;
+              },
+              get hintStart() {
+                return start();
+              },
+              get hintEnd() {
+                return end();
+              },
+              get tabIndex() {
+                return tabOf(`a:${event.id}:${week.offset}`);
+              },
+              get stop() {
+                return {
+                  id: `a:${event.id}:${week.offset}`,
+                  column: week.offset + bar.startColumn,
+                  minute: -1 + bar.lane / 100
+                };
+              }
+            }), _el$61, _co$13);
+            _$effect(_p$ => {
+              var _v$23 = checked() !== undefined ? "true" : undefined,
+                _v$24 = checked() ? "true" : undefined,
+                _v$25 = view.justChecked().has(event.id) ? "true" : undefined,
+                _v$26 = `${week.offset + bar.startColumn + 1} / ${week.offset + bar.endColumn + 2}`,
+                _v$27 = String(bar.lane + 1),
+                _v$28 = eventAccent(event),
+                _v$29 = bar.lane + 1 > allDayRows() ? "none" : undefined;
+              _v$23 !== _p$.e && _$setAttribute(_el$57, "data-checkbox", _p$.e = _v$23);
+              _v$24 !== _p$.t && _$setAttribute(_el$57, "data-checked", _p$.t = _v$24);
+              _v$25 !== _p$.a && _$setAttribute(_el$57, "data-just-checked", _p$.a = _v$25);
+              _v$26 !== _p$.o && _$setStyleProperty(_el$57, "grid-column", _p$.o = _v$26);
+              _v$27 !== _p$.i && _$setStyleProperty(_el$57, "grid-row", _p$.i = _v$27);
+              _v$28 !== _p$.n && _$setStyleProperty(_el$57, "--k2b-calendar-accent", _p$.n = _v$28);
+              _v$29 !== _p$.s && _$setStyleProperty(_el$57, "display", _p$.s = _v$29);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined,
+              i: undefined,
+              n: undefined,
+              s: undefined
+            });
+            return _el$57;
+          })();
+        }
+      }), _$createComponent(For, {
+        get each() {
+          return week.layout.singles;
+        },
+        children: (singles, column) => {
+          const lanes = () => Math.max(0, ...week.layout.bars.filter(bar => bar.startColumn <= column() && bar.endColumn >= column()).map(bar => bar.lane + 1));
+          return _$createComponent(For, {
+            each: singles,
+            children: (span, row) => {
+              const event = span.item;
+              const checked = () => view.checkedOf(event);
+              const id = `a:${event.id}:${week.offset}`;
+              return (() => {
+                var _el$62 = _$getNextElement(_tmpl$0),
+                  _el$63 = _el$62.firstChild,
+                  [_el$64, _co$14] = _$getNextMarker(_el$63.nextSibling),
+                  _el$65 = _el$64.nextSibling,
+                  [_el$66, _co$15] = _$getNextMarker(_el$65.nextSibling);
+                _$insert(_el$62, _$createComponent(Show, {
+                  get when() {
+                    return checked() !== undefined;
+                  },
+                  get children() {
+                    return _$createComponent(TimeCheck, {
+                      view: view,
+                      event: event,
+                      tabIndex: -1
+                    });
+                  }
+                }), _el$64, _co$14);
+                _$insert(_el$62, _$createComponent(EventChip, {
+                  get event() {
+                    return view.normalized(event, span.firstKey);
+                  },
+                  get owner() {
+                    return props.owner;
+                  },
+                  get href() {
+                    return eventHref(props.owner, event);
+                  },
+                  compact: true,
+                  timeline: true,
+                  get checkbox() {
+                    return checked() !== undefined;
+                  },
+                  get onCheck() {
+                    return view.checkOf(event);
+                  },
+                  get tabIndex() {
+                    return tabOf(id);
+                  },
+                  get stop() {
+                    return {
+                      id,
+                      column: week.offset + column(),
+                      minute: -1 + (lanes() + row()) / 100
+                    };
+                  }
+                }), _el$66, _co$15);
+                _$effect(_p$ => {
+                  var _v$30 = checked() !== undefined ? "true" : undefined,
+                    _v$31 = checked() ? "true" : undefined,
+                    _v$32 = view.justChecked().has(event.id) ? "true" : undefined,
+                    _v$33 = String(week.offset + column() + 1),
+                    _v$34 = String(lanes() + row() + 1),
+                    _v$35 = eventAccent(event),
+                    _v$36 = lanes() + row() + 1 > allDayRows() ? "none" : undefined;
+                  _v$30 !== _p$.e && _$setAttribute(_el$62, "data-checkbox", _p$.e = _v$30);
+                  _v$31 !== _p$.t && _$setAttribute(_el$62, "data-checked", _p$.t = _v$31);
+                  _v$32 !== _p$.a && _$setAttribute(_el$62, "data-just-checked", _p$.a = _v$32);
+                  _v$33 !== _p$.o && _$setStyleProperty(_el$62, "grid-column", _p$.o = _v$33);
+                  _v$34 !== _p$.i && _$setStyleProperty(_el$62, "grid-row", _p$.i = _v$34);
+                  _v$35 !== _p$.n && _$setStyleProperty(_el$62, "--k2b-calendar-accent", _p$.n = _v$35);
+                  _v$36 !== _p$.s && _$setStyleProperty(_el$62, "display", _p$.s = _v$36);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined,
+                  n: undefined,
+                  s: undefined
+                });
+                return _el$62;
+              })();
+            }
+          });
+        }
+      })]
+    }), _el$11, _co$2);
+    _$insert(_el$15, _$createComponent(For, {
+      get each() {
+        return Array.from({
+          length: wake() / 60 + 1
+        }, (_, index) => index * 60);
+      },
+      children: minute => (() => {
+        var _el$67 = _$getNextElement(_tmpl$1);
+        _$insert(_el$67, () => view.clock(minute));
+        _$effect(_p$ => {
+          var _v$37 = nowShown() && isNearNow(view, view.nowKey(), minute) ? "true" : undefined,
+            _v$38 = termsCss(dayYTerms(wake(), nightsOpen(), minute));
+          _v$37 !== _p$.e && _$setAttribute(_el$67, "data-near-now", _p$.e = _v$37);
+          _v$38 !== _p$.t && _$setStyleProperty(_el$67, "top", _p$.t = _v$38);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$67;
+      })()
+    }), _el$21, _co$4);
+    _$insert(_el$15, _$createComponent(Show, {
+      get when() {
+        return nightsOpen();
+      },
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return nightHours(wake());
+          },
+          children: minute => (() => {
+            var _el$68 = _$getNextElement(_tmpl$10);
+            _$insert(_el$68, () => view.clock(minute));
+            _$effect(_$p => _$setStyleProperty(_el$68, "top", termsCss(dayYTerms(wake(), true, minute))));
+            return _el$68;
+          })()
+        });
+      }
+    }), _el$23, _co$5);
+    _el$16.$$click = () => setNightOverride(!nightsOpen());
+    _$insert(_el$15, _$createComponent(Show, {
+      get when() {
+        return nowShown();
+      },
+      get children() {
+        var _el$19 = _$getNextElement(_tmpl$);
+        _$insert(_el$19, () => view.clock(view.nowMinute()));
+        _$effect(_$p => _$setStyleProperty(_el$19, "top", termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute()))));
+        return _el$19;
+      }
+    }), _el$25, _co$6);
+    _$insert(_el$26, _$createComponent(For, {
+      get each() {
+        return Array.from({
+          length: wake() / 60 + 1
+        }, (_, index) => index * 60);
+      },
+      children: minute => (() => {
+        var _el$69 = _$getNextElement(_tmpl$11);
+        _$effect(_$p => _$setStyleProperty(_el$69, "top", termsCss(dayYTerms(wake(), nightsOpen(), minute))));
+        return _el$69;
+      })()
+    }), _el$30, _co$7);
+    _$insert(_el$26, _$createComponent(Show, {
+      get when() {
+        return nightsOpen();
+      },
+      get fallback() {
+        return (() => {
+          var _el$70 = _$getNextElement(_tmpl$12);
+          _$effect(_$p => _$setStyleProperty(_el$70, "top", `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`));
+          return _el$70;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$27 = _$getNextElement(_tmpl$2);
+          _$effect(_p$ => {
+            var _v$ = termsCss(dayYTerms(wake(), true, wake())),
+              _v$2 = termsCss([0, (DAY_MINUTES - wake()) / 60, 1, 0]);
+            _v$ !== _p$.e && _$setStyleProperty(_el$27, "top", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setStyleProperty(_el$27, "height", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$27;
+        })(), _$createComponent(For, {
+          get each() {
+            return nightHours(wake());
+          },
+          children: minute => (() => {
+            var _el$71 = _$getNextElement(_tmpl$11);
+            _$effect(_p$ => {
+              var _v$39 = view.clock(minute) === "00:00" ? "true" : undefined,
+                _v$40 = termsCss(dayYTerms(wake(), true, minute));
+              _v$39 !== _p$.e && _$setAttribute(_el$71, "data-midnight", _p$.e = _v$39);
+              _v$40 !== _p$.t && _$setStyleProperty(_el$71, "top", _p$.t = _v$40);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$71;
+          })()
+        })];
+      }
+    }), _el$32, _co$8);
+    _$insert(_el$26, _$createComponent(Show, {
+      get when() {
+        return nowShown();
+      },
+      get children() {
+        var _el$28 = _$getNextElement(_tmpl$3);
+        _$effect(_$p => _$setStyleProperty(_el$28, "top", termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute()))));
+        return _el$28;
+      }
+    }), _el$34, _co$9);
+    _$insert(_el$14, _$createComponent(For, {
+      get each() {
+        return keys();
+      },
+      children: key => _$createComponent(WeekColumn, {
+        view: view,
+        dayKey: key,
+        get column() {
+          return indexOf(key);
+        },
+        get expanded() {
+          return nightsOpen();
+        },
+        tabOf: tabOf,
+        lastPointer: () => lastPointer,
+        setLastPointer: value => {
+          lastPointer = value;
+        },
+        scroller: () => scroller
+      })
+    }), _el$36, _co$0);
+    _$setAttribute(_el$37, "id", helpId);
+    _$insert(_el$37, () => view.messages().calendarKeyboardHelp);
+    _$insert(_el$, _$createComponent(TimeQuickCreate, {
+      view: view
+    }), _el$39, _co$1);
+    _$effect(_p$ => {
+      var _v$3 = view.dragging() || undefined,
+        _v$4 = view.messages().calendarWeek,
+        _v$5 = String(keys().length),
+        _v$6 = view.messages().calendarAllDayAndDue,
+        _v$7 = `repeat(${allDayRows()}, var(--k2b-calendar-all-day-row))`,
+        _v$8 = termsCss(dayHeightTerms(wake(), nightsOpen())),
+        _v$9 = nightsOpen() ? "true" : "false",
+        _v$0 = nightsOpen() ? view.messages().calendarFoldNights : view.messages().calendarOpenNights({
+          from: view.clock(wake()).slice(0, 2),
+          to: view.clock(DAY_MINUTES).slice(0, 2)
+        }),
+        _v$1 = nightsOpen() ? view.messages().calendarFoldNights : view.messages().calendarOpenNights({
+          from: view.clock(wake()).slice(0, 2),
+          to: view.clock(DAY_MINUTES).slice(0, 2)
+        }),
+        _v$10 = nightsOpen() ? "true" : undefined,
+        _v$11 = termsCss(dayYTerms(wake(), nightsOpen(), nightsOpen() ? wake() : wake() + 1)),
+        _v$12 = `ti ${nightsOpen() ? "ti-chevron-up" : "ti-chevron-down"}`;
+      _v$3 !== _p$.e && _$setAttribute(_el$, "data-dragging", _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$2, "aria-label", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setStyleProperty(_el$2, "--k2b-calendar-days", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$9, "aria-label", _p$.o = _v$6);
+      _v$7 !== _p$.i && _$setStyleProperty(_el$9, "grid-template-rows", _p$.i = _v$7);
+      _v$8 !== _p$.n && _$setStyleProperty(_el$14, "height", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$16, "aria-expanded", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$16, "aria-label", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setAttribute(_el$16, "title", _p$.r = _v$1);
+      _v$10 !== _p$.d && _$setAttribute(_el$16, "data-open", _p$.d = _v$10);
+      _v$11 !== _p$.l && _$setStyleProperty(_el$16, "top", _p$.l = _v$11);
+      _v$12 !== _p$.u && _$className(_el$18, _p$.u = _v$12);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined
+    });
+    _$runHydrationEvents();
+    return _el$;
+  })();
+  function columnWidthSignal() {
+    // Read through the visible count so a resize recomputes the hints.
+    visibleCount();
+    return columnWidth();
+  }
+};
+const WeekColumn = props => {
+  const view = props.view;
+  const model = createMemo(() => view.dayOf(props.dayKey));
+  const wake = () => view.wake();
+  const bands = createMemo(() => dayBands(view, props.dayKey, props.expanded));
+  const gaps = createMemo(() => dayGaps(view, props.dayKey));
+  const markers = () => model().markers.filter(marker => marker.minute < (props.expanded ? DAY_MINUTES : wake()));
+  /** Deadlines whose pills would cover each other share the width; keyed by marker, so rows keep their elements. */
+  const lanes = createMemo(() => new Map(markerLanes(markers(), wake()).map(entry => [entry.item, entry])));
+  const folded = () => props.expanded ? [] : foldedEntries(view, props.dayKey);
+  const isEmptyTarget = target => target instanceof Element && !target.closest("a,button,[data-calendar-event],.k2b-calendar-band,.k2b-calendar-marker,.k2b-calendar-draft,.k2b-calendar-week__fold-cell");
+  const minuteAt = (element, clientY) => {
+    const geometry = readDayGeometry(element, wake(), props.expanded);
+    return Math.max(0, Math.min((props.expanded ? DAY_MINUTES : wake()) - 15, dayMinuteAt(geometry, clientY - element.getBoundingClientRect().top)));
+  };
+  const nowMinute = () => props.dayKey === view.nowKey() ? view.nowMinute() : null;
+  const selected = () => view.selection()?.key === props.dayKey;
+  /** The quarter hour under the mouse on empty time, as a line with its time, to aim a drag at. */
+  const [hover, setHover] = createSignal(null);
+  const timeline = createMemo(() => [...gaps().map(gap => ({
+    at: gap.start,
+    kind: "gap",
+    gap
+  })), ...bands().map(band => ({
+    at: Math.max(0, band.start),
+    kind: "band",
+    band
+  })), ...markers().map(marker => ({
+    at: marker.minute,
+    kind: "marker",
+    marker
+  }))].sort((left, right) => left.at - right.at));
+  return (() => {
+    var _el$72 = _$getNextElement(_tmpl$16),
+      _el$77 = _el$72.firstChild,
+      [_el$78, _co$16] = _$getNextMarker(_el$77.nextSibling),
+      _el$79 = _el$78.nextSibling,
+      [_el$80, _co$17] = _$getNextMarker(_el$79.nextSibling),
+      _el$81 = _el$80.nextSibling,
+      [_el$82, _co$18] = _$getNextMarker(_el$81.nextSibling),
+      _el$83 = _el$82.nextSibling,
+      [_el$84, _co$19] = _$getNextMarker(_el$83.nextSibling),
+      _el$85 = _el$84.nextSibling,
+      [_el$86, _co$20] = _$getNextMarker(_el$85.nextSibling);
+    _el$72.addEventListener("pointerleave", () => setHover(null));
+    _el$72.$$pointermove = event => {
+      if (event.pointerType !== "mouse" || view.dragging() || !isEmptyTarget(event.target)) return setHover(null);
+      setHover(Math.floor(minuteAt(event.currentTarget, event.clientY) / 15) * 15);
+    };
+    _el$72.$$dblclick = event => {
+      if (!isEmptyTarget(event.target) || props.lastPointer() !== "mouse") return;
+      const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 30) * 30;
+      view.openQuickCreate(props.dayKey, minute, Math.min(minute + 60, props.expanded ? DAY_MINUTES : wake()), event.currentTarget);
+    };
+    _$addEventListener(_el$72, "click", event => {
+      if (!isEmptyTarget(event.target)) return;
+      const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 30) * 30;
+      const end = Math.min(minute + 60, props.expanded ? DAY_MINUTES : wake());
+      if (props.lastPointer() === "mouse") {
+        if (!view.canCreate()) return;
+        view.setTouchDraft(null);
+        view.setSelection({
+          key: props.dayKey,
+          start: minute,
+          end
+        });
+        return;
+      }
+      // A first tap on a column shows its free time; the next one proposes an hour there.
+      if (view.activeKey() !== props.dayKey) {
+        view.setActiveKey(props.dayKey);
+        view.setTouchDraft(null);
+        view.setSelection({
+          key: props.dayKey
+        });
+        return;
+      }
+      if (!view.canCreate()) return;
+      view.setTouchDraft({
+        key: props.dayKey,
+        start: minute,
+        end
+      });
+      view.setSelection({
+        key: props.dayKey,
+        start: minute,
+        end
+      });
+    });
+    _el$72.$$touchstart = () => props.setLastPointer("touch");
+    _el$72.$$pointerdown = event => {
+      props.setLastPointer(event.pointerType);
+      if (event.button !== 0 || !isEmptyTarget(event.target)) return;
+      view.startDraw(event, props.dayKey, props.scroller());
+    };
+    _$use(element => view.registerBody(props.dayKey, element, () => props.expanded), _el$72);
+    _$insert(_el$72, _$createComponent(For, {
+      get each() {
+        return timeline();
+      },
+      children: entry => entry.kind === "gap" ? _$createComponent(TimeGap, {
+        view: view,
+        get gap() {
+          return entry.gap;
+        },
+        get dayKey() {
+          return props.dayKey;
+        },
+        get expanded() {
+          return props.expanded;
+        },
+        get aside() {
+          return gapAside(model(), entry.gap);
+        },
+        get tabIndex() {
+          return props.tabOf(`g:${props.dayKey}:${entry.gap.start}`);
+        },
+        get stop() {
+          return {
+            id: `g:${props.dayKey}:${entry.gap.start}`,
+            column: props.column,
+            minute: entry.gap.start + 0.5
+          };
+        }
+      }) : entry.kind === "band" ? _$createComponent(TimeBand, {
+        view: view,
+        get band() {
+          return entry.band;
+        },
+        get dayKey() {
+          return props.dayKey;
+        },
+        get expanded() {
+          return props.expanded;
+        },
+        hourPx: 48,
+        get tabIndex() {
+          return props.tabOf(`b:${entry.band.item.id}:${props.dayKey}`);
+        },
+        get stop() {
+          return {
+            id: `b:${entry.band.item.id}:${props.dayKey}`,
+            column: props.column,
+            minute: entry.band.start
+          };
+        },
+        get scroller() {
+          return props.scroller;
+        }
+      }) : _$createComponent(TimeMarker, {
+        view: view,
+        get event() {
+          return entry.marker.item;
+        },
+        get minute() {
+          return entry.marker.minute;
+        },
+        get dayKey() {
+          return props.dayKey;
+        },
+        get expanded() {
+          return props.expanded;
+        },
+        get above() {
+          return markerAbove(model(), entry.marker.minute);
+        },
+        get lane() {
+          return lanes().get(entry.marker)?.lane ?? 0;
+        },
+        get lanes() {
+          return lanes().get(entry.marker)?.lanes ?? 1;
+        },
+        showTime: false,
+        get tabIndex() {
+          return props.tabOf(`m:${entry.marker.item.id}`);
+        },
+        get stop() {
+          return {
+            id: `m:${entry.marker.item.id}`,
+            column: props.column,
+            minute: entry.marker.minute
+          };
+        },
+        get scroller() {
+          return props.scroller;
+        }
+      })
+    }), _el$78, _co$16);
+    _$insert(_el$72, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!props.expanded)() && folded().length > 0;
+      },
+      get children() {
+        var _el$73 = _$getNextElement(_tmpl$13),
+          _el$74 = _el$73.firstChild;
+        _$insert(_el$74, _$createComponent(For, {
+          get each() {
+            return folded();
+          },
+          children: (entry, index) => {
+            const checked = () => view.checkedOf(entry.event);
+            return (() => {
+              var _el$87 = _$getNextElement(_tmpl$17),
+                _el$88 = _el$87.firstChild,
+                [_el$89, _co$21] = _$getNextMarker(_el$88.nextSibling),
+                _el$90 = _el$89.nextSibling,
+                [_el$91, _co$22] = _$getNextMarker(_el$90.nextSibling);
+              _$insert(_el$87, _$createComponent(Show, {
+                get when() {
+                  return checked() !== undefined;
+                },
+                get children() {
+                  return _$createComponent(TimeCheck, {
+                    view: view,
+                    get event() {
+                      return entry.event;
+                    },
+                    tabIndex: -1
+                  });
+                }
+              }), _el$89, _co$21);
+              _$insert(_el$87, _$createComponent(EventChip, {
+                get event() {
+                  return view.normalized(entry.event, props.dayKey);
+                },
+                get owner() {
+                  return view.props.owner;
+                },
+                get href() {
+                  return eventHref(view.props.owner, entry.event);
+                },
+                compact: true,
+                timeline: true,
+                get leadingTime() {
+                  return entry.time;
+                },
+                get checkbox() {
+                  return checked() !== undefined;
+                },
+                get onCheck() {
+                  return view.checkOf(entry.event);
+                },
+                get tabIndex() {
+                  return props.tabOf(`f:${entry.event.id}:${props.dayKey}`);
+                },
+                get stop() {
+                  return {
+                    id: `f:${entry.event.id}:${props.dayKey}`,
+                    column: props.column,
+                    minute: wake() + index() / 100
+                  };
+                }
+              }), _el$91, _co$22);
+              _$effect(_p$ => {
+                var _v$49 = checked() !== undefined ? "true" : undefined,
+                  _v$50 = checked() ? "true" : undefined,
+                  _v$51 = eventAccent(entry.event);
+                _v$49 !== _p$.e && _$setAttribute(_el$87, "data-checkbox", _p$.e = _v$49);
+                _v$50 !== _p$.t && _$setAttribute(_el$87, "data-checked", _p$.t = _v$50);
+                _v$51 !== _p$.a && _$setStyleProperty(_el$87, "--k2b-calendar-accent", _p$.a = _v$51);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              return _el$87;
+            })();
+          }
+        }));
+        _$effect(_$p => _$setStyleProperty(_el$73, "top", `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`));
+        return _el$73;
+      }
+    }), _el$80, _co$17);
+    _$insert(_el$72, _$createComponent(TimeOverlays, {
+      view: view,
+      get dayKey() {
+        return props.dayKey;
+      },
+      get expanded() {
+        return props.expanded;
+      }
+    }), _el$82, _co$18);
+    _$insert(_el$72, _$createComponent(Show, {
+      get when() {
+        return hover() !== null;
+      },
+      get children() {
+        var _el$75 = _$getNextElement(_tmpl$14);
+        _$insert(_el$75, () => view.clock(hover()));
+        _$effect(_$p => _$setStyleProperty(_el$75, "top", termsCss(dayYTerms(wake(), props.expanded, hover()))));
+        return _el$75;
+      }
+    }), _el$84, _co$19);
+    _$insert(_el$72, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(nowMinute() !== null && nowMinute() >= 0))() && nowMinute() < (props.expanded ? DAY_MINUTES : wake());
+      },
+      get children() {
+        var _el$76 = _$getNextElement(_tmpl$15);
+        _$effect(_$p => _$setStyleProperty(_el$76, "top", termsCss(dayYTerms(wake(), props.expanded, nowMinute()))));
+        return _el$76;
+      }
+    }), _el$86, _co$20);
+    _$effect(_p$ => {
+      var _v$41 = props.dayKey,
+        _v$42 = props.expanded ? "true" : "false",
+        _v$43 = props.dayKey === view.calendarToday() ? "true" : undefined,
+        _v$44 = selected() ? "true" : undefined,
+        _v$45 = view.activeKey() === props.dayKey ? "true" : undefined,
+        _v$46 = longDay(view, props.dayKey),
+        _v$47 = String(props.column + 2),
+        _v$48 = termsCss(dayHeightTerms(wake(), props.expanded));
+      _v$41 !== _p$.e && _$setAttribute(_el$72, "data-calendar-body", _p$.e = _v$41);
+      _v$42 !== _p$.t && _$setAttribute(_el$72, "data-expanded", _p$.t = _v$42);
+      _v$43 !== _p$.a && _$setAttribute(_el$72, "data-today", _p$.a = _v$43);
+      _v$44 !== _p$.o && _$setAttribute(_el$72, "data-selected", _p$.o = _v$44);
+      _v$45 !== _p$.i && _$setAttribute(_el$72, "data-active", _p$.i = _v$45);
+      _v$46 !== _p$.n && _$setAttribute(_el$72, "aria-label", _p$.n = _v$46);
+      _v$47 !== _p$.s && _$setStyleProperty(_el$72, "grid-column", _p$.s = _v$47);
+      _v$48 !== _p$.h && _$setStyleProperty(_el$72, "height", _p$.h = _v$48);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    _$runHydrationEvents();
+    return _el$72;
+  })();
+};
+
+/** ISO week number of a day key. */
+const isoWeek = key => {
+  const date = new Date(`${key}T00:00:00Z`);
+  const day = date.getUTCDay() || 7;
+  date.setUTCDate(date.getUTCDate() + 4 - day);
+  const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+  return Math.ceil(((date.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
+};
+
+/** The day at a torn end of a bar, with its month when it lies in another month than the shown week. */
+const hintDate = (view, target, shown) => ({
+  day: Number(target.slice(8, 10)),
+  month: target.slice(0, 7) === shown.slice(0, 7) ? undefined : view.parseKey(target).toLocaleDateString(view.dateConfig().locale ?? "en", {
+    month: "short",
+    timeZone: view.dateConfig().timeZone
+  }).replace(/\.$/, "")
+});
+
+/** A long entry's accessible name names the days it spans. */
+const spanLabel = (view, span) => {
+  if (span.firstKey === span.lastKey) return undefined;
+  const format = key => view.parseKey(key).toLocaleDateString(view.dateConfig().locale ?? "en", {
+    month: "long",
+    day: "numeric",
+    timeZone: view.dateConfig().timeZone
+  });
+  return view.messages().calendarEventTime({
+    title: span.item.title,
+    start: format(span.firstKey),
+    end: format(span.lastKey)
+  });
+};
+_$delegateEvents(["keydown", "focusin", "touchstart", "touchend", "pointerdown", "dblclick", "click", "pointermove"]);
+//# sourceMappingURL=CalendarWeekView.js.map