@k2b/ui 0.22.0 → 0.24.0

package/dist/ssr/content/CalendarWeekView.js

@@ -0,0 +1,1090 @@
+import { memo as _$memo } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-calendar-week__now-time\" style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$2 = ["<span class=\"k2b-calendar-night\" style=\"", "\"></span>"],
+  _tmpl$3 = ["<span class=\"k2b-calendar-week__now-line\" style=\"", "\"></span>"],
+  _tmpl$4 = ["<div class=\"k2b-calendar-week\" data-view=\"week\"", "><div class=\"k2b-calendar-week__scroll k2b-detail-trail\" role=\"group\"", " style=\"", "\"><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\"", " style=\"", "\">", "", "</div></div><div class=\"k2b-calendar-week__body\" style=\"", "\"><div class=\"k2b-calendar-week__gutter\">", "", "<button type=\"button\" class=\"k2b-calendar-week__moon\"", " style=\"", "\"><i class=\"ti ti-moon\" aria-hidden=\"true\"></i><i class=\"", "\" 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>", "</div>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-week__head\"", " data-stop=\"", "\"", " data-minute=\"-2\"", " style=\"", "\"><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\">", "</span></span></button>"],
+  _tmpl$6 = ["<span class=\"k2b-calendar-week__badge\">", "", "</span>"],
+  _tmpl$7 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$8 = ["<span style=\"", "\"></span>"],
+  _tmpl$9 = ["<div class=\"k2b-calendar-week__range\" style=\"", "\" aria-hidden=\"true\"></div>"],
+  _tmpl$0 = ["<div class=\"k2b-calendar-week__slot\"", " style=\"", "\">", "", "</div>"],
+  _tmpl$1 = ["<span class=\"k2b-calendar-week__hour\"", " style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$10 = ["<span class=\"k2b-calendar-week__hour\" data-night=\"true\" style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$11 = ["<span class=\"k2b-calendar-week__line\" style=\"", "\"></span>"],
+  _tmpl$12 = ["<span class=\"k2b-calendar-week__fold\" style=\"", "\"></span>"],
+  _tmpl$13 = ["<span class=\"k2b-calendar-week__line\"", " style=\"", "\"></span>"],
+  _tmpl$14 = ["<div class=\"k2b-calendar-week__fold-cell\" style=\"", "\"><ul class=\"k2b-calendar-fold__chips\">", "</ul></div>"],
+  _tmpl$15 = ["<span class=\"k2b-calendar-hover\" style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$16 = ["<div class=\"k2b-calendar-now\" style=\"", "\" aria-hidden=\"true\"></div>"],
+  _tmpl$17 = ["<div class=\"k2b-calendar-week__column\" data-calendar-column", " role=\"group\"", " style=\"", "\">", "", "", "", "", "</div>"],
+  _tmpl$18 = ["<li", " style=\"", "\">", "", "</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 _$ssr(_tmpl$4, _$ssrAttribute("data-dragging", _$escape(view.dragging() || undefined, true), false), _$ssrAttribute("aria-label", _$escape(view.messages().calendarWeek, true), false) + _$ssrAttribute("aria-describedby", _$escape(helpId, true), false), _$ssrStyleProperty("--k2b-calendar-days:", _$escape(String(keys().length), true)), _$escape(view.messages().calendarWeekNumber({
+    week: isoWeek(visibleKeys().first)
+  })), _$escape(_$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 _$ssr(_tmpl$5, _$ssrAttribute("data-calendar-head", _$escape(key, true), false), `h:${_$escape(key, true)}`, _$ssrAttribute("data-col", _$escape(indexOf(key), true), false), _$ssrAttribute("tabindex", _$escape(tabOf(`h:${key}`), true), false) + _$ssrAttribute("aria-pressed", selected() ? "true" : "false", false) + _$ssrAttribute("aria-label", _$escape([longDay(view, key), today() ? view.props.labels.today : "", badge()?.label ?? ""].filter(Boolean).join(", "), true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", key < view.calendarToday() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-cheer", view.cheered() === key ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("grid-column:", _$escape(String(indexOf(key) + 2), true)), _$escape(date().toLocaleDateString(view.dateConfig().locale ?? "en", {
+        weekday: "short",
+        timeZone: view.dateConfig().timeZone
+      }).replace(/\.$/, "")), _$escape(calendar.formatDayNumber(date(), view.dateConfig())), _$escape(_$createComponent(Show, {
+        get when() {
+          return badge();
+        },
+        children: current => _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
+          get when() {
+            return current().icon;
+          },
+          children: icon => _$ssr(_tmpl$7, `ti ti-${_$escape(icon(), true)}`)
+        })), _$escape(current().label))
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return load();
+        },
+        children: piece => _$ssr(_tmpl$8, _$ssrStyleProperty("width:", `${(_$escape(piece.end, true) - _$escape(piece.start, true)) / _$escape(wake(), true) * 100}%`) + _$ssrStyleProperty(";background:", _$escape(piece.color, true)))
+      })), _$escape(view.messages().calendarAllDone), _$escape(view.messages().calendarAllDoneShort));
+    }
+  })), _$escape(view.messages().calendarAllDayRow), _$escape(view.messages().calendarAllDayRowShort), _$ssrAttribute("aria-label", _$escape(view.messages().calendarAllDayAndDue, true), false), _$ssrStyleProperty("grid-template-rows:", `repeat(${_$escape(allDayRows(), true)}, var(--k2b-calendar-all-day-row))`), _$escape(_$createComponent(Show, {
+    get when() {
+      return rangeSelection();
+    },
+    children: range => _$ssr(_tmpl$9, _$ssrStyleProperty("grid-column:", `${_$escape(indexOf(range().first), true) + 1} / ${_$escape(indexOf(range().last), true) + 2}`) + _$ssrStyleProperty(";grid-row:", "1 / -1"))
+  })), _$escape(_$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 _$ssr(_tmpl$0, _$ssrAttribute("data-checkbox", checked() !== undefined ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-just-checked", view.justChecked().has(event.id) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("grid-column:", `${_$escape(week.offset, true) + _$escape(bar.startColumn, true) + 1} / ${_$escape(week.offset, true) + _$escape(bar.endColumn, true) + 2}`) + _$ssrStyleProperty(";grid-row:", _$escape(String(bar.lane + 1), true)) + _$ssrStyleProperty(";--k2b-calendar-accent:", _$escape(eventAccent(event), true)) + _$ssrStyleProperty(";display:", bar.lane + 1 > allDayRows() ? "none" : _$escape(undefined, true)), _$escape(_$createComponent(Show, {
+          get when() {
+            return checked() !== undefined;
+          },
+          get children() {
+            return _$createComponent(TimeCheck, {
+              view: view,
+              event: event,
+              tabIndex: -1
+            });
+          }
+        })), _$escape(_$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
+            };
+          }
+        })));
+      }
+    }), _$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 _$ssr(_tmpl$0, _$ssrAttribute("data-checkbox", checked() !== undefined ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-just-checked", view.justChecked().has(event.id) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("grid-column:", _$escape(String(week.offset + column() + 1), true)) + _$ssrStyleProperty(";grid-row:", _$escape(String(lanes() + row() + 1), true)) + _$ssrStyleProperty(";--k2b-calendar-accent:", _$escape(eventAccent(event), true)) + _$ssrStyleProperty(";display:", lanes() + row() + 1 > allDayRows() ? "none" : _$escape(undefined, true)), _$escape(_$createComponent(Show, {
+              get when() {
+                return checked() !== undefined;
+              },
+              get children() {
+                return _$createComponent(TimeCheck, {
+                  view: view,
+                  event: event,
+                  tabIndex: -1
+                });
+              }
+            })), _$escape(_$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
+                };
+              }
+            })));
+          }
+        });
+      }
+    })]
+  })), _$ssrStyleProperty("height:", _$escape(termsCss(dayHeightTerms(wake(), nightsOpen())), true)), _$escape(_$createComponent(For, {
+    get each() {
+      return Array.from({
+        length: wake() / 60 + 1
+      }, (_, index) => index * 60);
+    },
+    children: minute => _$ssr(_tmpl$1, _$ssrAttribute("data-near-now", nowShown() && isNearNow(view, view.nowKey(), minute) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), nightsOpen(), minute)), true)), _$escape(view.clock(minute)))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return nightsOpen();
+    },
+    get children() {
+      return _$createComponent(For, {
+        get each() {
+          return nightHours(wake());
+        },
+        children: minute => _$ssr(_tmpl$10, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, minute)), true)), _$escape(view.clock(minute)))
+      });
+    }
+  })), _$ssrAttribute("aria-expanded", nightsOpen() ? "true" : "false", false) + _$ssrAttribute("aria-label", nightsOpen() ? _$escape(view.messages().calendarFoldNights, true) : _$escape(view.messages().calendarOpenNights({
+    from: view.clock(wake()).slice(0, 2),
+    to: view.clock(DAY_MINUTES).slice(0, 2)
+  }), true), false) + _$ssrAttribute("title", nightsOpen() ? _$escape(view.messages().calendarFoldNights, true) : _$escape(view.messages().calendarOpenNights({
+    from: view.clock(wake()).slice(0, 2),
+    to: view.clock(DAY_MINUTES).slice(0, 2)
+  }), true), false) + _$ssrAttribute("data-open", nightsOpen() ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), nightsOpen(), nightsOpen() ? wake() : wake() + 1)), true)), `ti ${nightsOpen() ? "ti-chevron-up" : "ti-chevron-down"}`, _$escape(_$createComponent(Show, {
+    get when() {
+      return nowShown();
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute())), true)), _$escape(view.clock(view.nowMinute())));
+    }
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return Array.from({
+        length: wake() / 60 + 1
+      }, (_, index) => index * 60);
+    },
+    children: minute => _$ssr(_tmpl$11, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), nightsOpen(), minute)), true)))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return nightsOpen();
+    },
+    get fallback() {
+      return _$ssr(_tmpl$12, _$ssrStyleProperty("top:", `calc(${_$escape(termsCss(dayYTerms(wake(), false, wake())), true)} + 3px)`));
+    },
+    get children() {
+      return [_$ssr(_tmpl$2, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, wake())), true)) + _$ssrStyleProperty(";height:", _$escape(termsCss([0, (DAY_MINUTES - wake()) / 60, 1, 0]), true))), _$createComponent(For, {
+        get each() {
+          return nightHours(wake());
+        },
+        children: minute => _$ssr(_tmpl$13, _$ssrAttribute("data-midnight", view.clock(minute) === "00:00" ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, minute)), true)))
+      })];
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return nowShown();
+    },
+    get children() {
+      return _$ssr(_tmpl$3, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute())), true)));
+    }
+  })), _$escape(_$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
+    })
+  })), _$ssrAttribute("id", _$escape(helpId, true), false), _$escape(view.messages().calendarKeyboardHelp), _$escape(_$createComponent(TimeQuickCreate, {
+    view: view
+  })));
+  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 _$ssr(_tmpl$17, _$ssrAttribute("data-calendar-body", _$escape(props.dayKey, true), false) + _$ssrAttribute("data-expanded", props.expanded ? "true" : "false", false) + _$ssrAttribute("data-today", props.dayKey === view.calendarToday() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", view.activeKey() === props.dayKey ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(longDay(view, props.dayKey), true), false), _$ssrStyleProperty("grid-column:", _$escape(String(props.column + 2), true)) + _$ssrStyleProperty(";height:", _$escape(termsCss(dayHeightTerms(wake(), props.expanded)), true)), _$escape(_$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;
+      }
+    })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!!props.expanded)() && folded().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$14, _$ssrStyleProperty("top:", `calc(${_$escape(termsCss(dayYTerms(wake(), false, wake())), true)} + 3px)`), _$escape(_$createComponent(For, {
+        get each() {
+          return folded();
+        },
+        children: (entry, index) => {
+          const checked = () => view.checkedOf(entry.event);
+          return _$ssr(_tmpl$18, _$ssrAttribute("data-checkbox", checked() !== undefined ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-calendar-accent:", _$escape(eventAccent(entry.event), true)), _$escape(_$createComponent(Show, {
+            get when() {
+              return checked() !== undefined;
+            },
+            get children() {
+              return _$createComponent(TimeCheck, {
+                view: view,
+                get event() {
+                  return entry.event;
+                },
+                tabIndex: -1
+              });
+            }
+          })), _$escape(_$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
+              };
+            }
+          })));
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(TimeOverlays, {
+    view: view,
+    get dayKey() {
+      return props.dayKey;
+    },
+    get expanded() {
+      return props.expanded;
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return hover() !== null;
+    },
+    get children() {
+      return _$ssr(_tmpl$15, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), props.expanded, hover())), true)), _$escape(view.clock(hover())));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(nowMinute() !== null && nowMinute() >= 0))() && nowMinute() < (props.expanded ? DAY_MINUTES : wake());
+    },
+    get children() {
+      return _$ssr(_tmpl$16, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), props.expanded, nowMinute())), true)));
+    }
+  })));
+};
+
+/** 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)
+  });
+};
+//# sourceMappingURL=CalendarWeekView.js.map