@k2b/ui 0.22.0 → 0.23.0

package/dist/browser/content/CalendarDayView.js

@@ -0,0 +1,1187 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<p class=k2b-calendar-days__more>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-calendar-days data-view=day><div class=k2b-calendar-days__scroll tabindex=-1><div class=k2b-calendar-days__track><!$><!/><!$><!/></div></div><p class=k2b-calendar-sr></p><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__today>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i class="ti ti-clock"aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-calendar-days__all-day role=group>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-calendar-night aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-night__bar aria-expanded=true><i class="ti ti-moon"aria-hidden=true></i><span></span><span class=k2b-calendar-night__action><!$><!/><i class="ti ti-chevron-up"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-calendar-now aria-hidden=true><span class=k2b-calendar-now__time>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<section class=k2b-calendar-days__day data-calendar-group><header class=k2b-calendar-days__head><h2 class=k2b-calendar-days__title><button type=button class=k2b-calendar-days__title-button><!$><!/><span class=k2b-calendar-days__long></span><span class=k2b-calendar-days__short></span></button></h2><span class=k2b-calendar-days__note><span class=k2b-calendar-days__soon></span><span class=k2b-calendar-days__cheer aria-hidden=true><i class="ti ti-confetti"aria-hidden=true></i><!$><!/></span></span><!$><!/><span class=k2b-calendar-days__summary></span></header><!$><!/><div class=k2b-calendar-days__body><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__badge><!$><!/><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__line aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__hour aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<ul class=k2b-calendar-fold__chips>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-fold><button type=button class=k2b-calendar-fold__toggle aria-expanded=false><i class="ti ti-moon"aria-hidden=true></i><span></span><i class="ti ti-chevron-down"aria-hidden=true></i></button><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<li><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__hour data-night=true aria-hidden=true>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__midnight aria-hidden=true>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-calendar-hover aria-hidden=true>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<section class=k2b-calendar-days__day data-calendar-group data-empty=true><header class=k2b-calendar-days__head><h2 class=k2b-calendar-days__title><span class=k2b-calendar-days__run></span></h2><span class=k2b-calendar-days__note></span><!$><!/><span class=k2b-calendar-days__summary></span></header><button type=button class=k2b-calendar-days__empty data-calendar-unfold><span></span><span class=k2b-calendar-days__empty-action><i class="ti ti-arrows-vertical"aria-hidden=true></i><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__badge-day>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-calendar-days__badge data-run=true><!$><!/><!$><!/><!$><!/>`);
+import { createComputed, createEffect, createMemo, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { brakedScroll, GESTURE_GAP_MS, SETTLE_RADIUS, settleTarget, stopCrossing, stopIndexAt, wheelPixels } from "./calendar-day-scroll";
+import { addDayKeys, DAY_MINUTES, dayGroups, dayHeightTerms, dayKeyRange, dayMinuteAt, dayY, dayYTerms, markerLanes, readDayGeometry, termsCss } from "./calendar-days";
+import { EventChip, eventHref } from "./calendar-shared";
+import { AllDayChips, createTimeView, dayBands, dayGaps, daySummary, eventAccent, foldedEntries, gapAside, isNearNow, longDay, markerAbove, nightHours, reducedMotion, shortDay, soonNote, TimeBand, TimeCheck, TimeGap, TimeMarker, TimeOverlays, TimeQuickCreate } from "./calendar-time-view";
+const groupId = group => group.kind === "day" ? `d:${group.key}` : `e:${group.keys.join(",")}`;
+const groupFirst = group => group.kind === "day" ? group.key : group.keys[0];
+
+/**
+ * The day view with `dayHours`: the loaded days one below the other in a single scroll, each with its heading kept on
+ * top while it is in view. Runs of empty days fold into one row. The view slows down and settles at each day start,
+ * and a line at the top of the heading fills while a day start passes.
+ */
+export const CalendarDayView = props => {
+  const view = createTimeView(props);
+  const [mounted, setMounted] = createSignal(false);
+  const [unfolded, setUnfolded] = createSignal(new Set());
+  const [topKey, setTopKey] = createSignal(untrack(view.anchorKey));
+  const [hover, setHover] = createSignal(null);
+  /** Where today's day lies from the view, kept current while scrolling for the Today button's arrow. */
+  const [todayPlace, setTodayPlace] = createSignal("");
+  let scroller;
+  let track;
+  const helpId = createUniqueId();
+
+  // The server and the first render start at the shown day, so the page never flashes the days before it; once
+  // mounted the earlier days join above it without moving the view.
+  const keys = createMemo(() => {
+    const {
+      first,
+      last
+    } = view.range();
+    const anchor = view.anchorKey();
+    const from = mounted() || anchor < first || anchor > last ? first : anchor;
+    return dayKeyRange(from, last);
+  });
+  // Today and the day the reader opened never fold, so a day opened from the month shows its hours to create in.
+  const groups = createMemo(() => dayGroups(keys(), key => view.dayOf(key).empty, new Set([view.nowKey(), view.anchorKey(), ...unfolded()])));
+  const unfold = keys => setUnfolded(value => new Set([...value, ...keys]));
+  const groupIds = createMemo(() => groups().map(groupId));
+  const groupsById = createMemo(() => new Map(groups().map(group => [groupId(group), group])));
+
+  // Where each group starts in the scroll, measured after every change of the groups and on resize.
+  let sections = [];
+  let tops = [];
+  const measure = () => {
+    if (!track) return;
+    sections = [...track.querySelectorAll(":scope > [data-calendar-group]")];
+    tops = sections.map(section => section.offsetTop);
+  };
+  const keysOf = section => (section?.dataset.calendarKeys ?? "").split(",").filter(Boolean);
+  const sectionOf = key => sections.find(section => keysOf(section).includes(key));
+
+  /** The group at the top of the view and how far into it the view is, kept across changes above it. */
+  let anchor = null;
+  /** A day the host moved to before its days loaded; it goes on screen once they arrive. */
+  let pendingTarget = null;
+  /** The last scroll position the view read, to tell the reader's direction. */
+  let lastScrollTop = 0;
+  const rememberAnchor = () => {
+    if (!scroller || sections.length === 0) return;
+    const index = stopIndexAt(tops, scroller.scrollTop);
+    const section = sections[index];
+    if (section) anchor = {
+      key: keysOf(section)[0],
+      delta: scroller.scrollTop - tops[index]
+    };
+  };
+  const restoreAnchor = () => {
+    if (!scroller || !anchor) return;
+    const saved = anchor;
+    let index = sections.findIndex(section => keysOf(section).includes(saved.key));
+    if (index < 0) index = sections.findIndex(section => keysOf(section)[0] >= saved.key);
+    if (index < 0) return;
+    const top = tops[index] + Math.min(saved.delta, sections[index].offsetHeight - 1);
+    if (Math.abs(scroller.scrollTop - top) > 0.5) scroller.scrollTop = top;
+    lastScrollTop = scroller.scrollTop;
+  };
+
+  /** The scroll position of a minute of a day, or of the day's start without a minute. */
+  const topFor = (key, minute) => {
+    const section = sectionOf(key);
+    if (!section) return null;
+    const index = sections.indexOf(section);
+    const body = section.querySelector("[data-calendar-body]");
+    if (minute === undefined || !body) return tops[index];
+    const geometry = readDayGeometry(body, view.wake(), body.dataset.expanded === "true");
+    return tops[index] + body.offsetTop + dayY(geometry, minute);
+  };
+
+  // Gliding: arrows, Today, and Go to scroll smoothly; the stops and loading wait until the glide arrived.
+  let glideTarget = null;
+  let glideTimer = 0;
+  const glide = top => {
+    if (!scroller) return;
+    const target = Math.round(Math.max(0, Math.min(top, scroller.scrollHeight - scroller.clientHeight)));
+    glideTarget = target;
+    window.clearTimeout(glideTimer);
+    glideTimer = window.setTimeout(() => {
+      glideTarget = null;
+    }, 1600);
+    // What the view keeps in place from now on is where the glide arrives, not where it started.
+    const index = stopIndexAt(tops, target);
+    const section = sections[index];
+    if (section) anchor = {
+      key: keysOf(section)[0],
+      delta: target - tops[index]
+    };
+    scroller.scrollTo({
+      top: target,
+      behavior: reducedMotion() ? "instant" : "smooth"
+    });
+  };
+
+  /** Puts a day on screen: now in the upper third today, else an hour before its first entry, else its start. */
+  const positionAt = key => {
+    if (!scroller) return;
+    measure();
+    if (key === view.nowKey()) {
+      const top = topFor(key, view.nowMinute());
+      // Now in the upper third, but never showing the end of the day before above the day's own heading.
+      if (top !== null) scroller.scrollTop = Math.max(topFor(key) ?? 0, top - scroller.clientHeight / 3);
+      lastScrollTop = scroller.scrollTop;
+      return;
+    }
+    const model = view.dayOf(key);
+    const first = Math.min(...model.bands.map(band => band.start), ...model.markers.map(marker => marker.minute), Number.POSITIVE_INFINITY);
+    const start = topFor(key);
+    if (start === null) return;
+    const entry = Number.isFinite(first) && first > 120 ? topFor(key, first - 60) : null;
+    scroller.scrollTop = entry === null ? start : Math.max(start, entry - 44);
+    lastScrollTop = scroller.scrollTop;
+  };
+
+  // Input: the wheel brakes at day starts; a resting scroll glides onto a near one.
+  let lastInput = "other";
+  let fingers = 0;
+  let settling = false;
+  let restTimer = 0;
+  let frame = 0;
+  let ready = false;
+  let carry = 0;
+  let lastWheel = 0;
+  const settle = () => {
+    if (!scroller || fingers > 0 || settling || glideTarget !== null || view.dragging()) return;
+    const target = settleTarget(tops.slice(1), scroller.scrollTop, lastInput === "touch" ? SETTLE_RADIUS.touch : SETTLE_RADIUS.wheel);
+    if (target === undefined) return;
+    settling = true;
+    scroller.scrollTo({
+      top: target,
+      behavior: reducedMotion() ? "instant" : "smooth"
+    });
+    window.setTimeout(() => {
+      settling = false;
+    }, 450);
+  };
+  const onWheel = event => {
+    if (!scroller || event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY) || view.dragging()) return;
+    const delta = wheelPixels(event.deltaY, event.deltaMode, scroller.clientHeight);
+    const top = scroller.scrollTop;
+    const max = scroller.scrollHeight - scroller.clientHeight;
+    // At the ends the wheel asks for more days instead.
+    if (delta > 0 && top >= max - 1 || delta < 0 && top <= 1) {
+      loadMore(delta > 0 ? "later" : "earlier");
+      return;
+    }
+    if (event.timeStamp - lastWheel > GESTURE_GAP_MS) carry = 0;
+    // A gesture that goes on takes over from a glide onto a day start; the view settles again once it rests.
+    settling = false;
+    lastWheel = event.timeStamp;
+    const next = brakedScroll(tops, top + carry, delta);
+    lastInput = "wheel";
+    if (next === undefined) {
+      carry = 0;
+      return;
+    }
+    event.preventDefault();
+    glideTarget = null;
+    const bounded = Math.max(0, Math.min(max, next));
+    scroller.scrollTop = bounded;
+    // Steps too small for a pixel add up instead of vanishing.
+    carry = bounded - scroller.scrollTop;
+  };
+
+  // Loading: each end asks once per range, and only after the view settled at its first position.
+  let askedEarlier = "";
+  let askedLater = "";
+  const loadMore = edge => {
+    // Days that come in above move the view, so they wait for a glide to arrive; days below move nothing.
+    if (!ready || view.dragging() || edge === "earlier" && glideTarget !== null) return;
+    const {
+      first,
+      last
+    } = view.range();
+    if (edge === "earlier" && props.owner.onLoadEarlier && askedEarlier !== first) {
+      askedEarlier = first;
+      void props.owner.onLoadEarlier();
+    }
+    if (edge === "later" && props.owner.onLoadLater && askedLater !== last) {
+      askedLater = last;
+      void props.owner.onLoadLater();
+    }
+  };
+  let reportTimer = 0;
+  let reported = "";
+  /** Tells the host the days the reader sees once they changed, after the scroll calmed down. */
+  const reportVisible = () => {
+    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);
+  };
+  const updateChrome = () => {
+    if (!scroller) return;
+    const top = scroller.scrollTop;
+    const index = stopIndexAt(tops, top);
+    const key = keysOf(sections[index])[0];
+    if (key && key !== untrack(topKey)) setTopKey(key);
+    reportVisible();
+    for (const [position, section] of sections.entries()) {
+      const head = section.firstElementChild;
+      if (!head) continue;
+      const crossing = position > 0 ? stopCrossing(tops[position], top) : 0;
+      if (crossing > 0) head.style.setProperty("--k2b-calendar-cross", String(crossing));else if (head.style.getPropertyValue("--k2b-calendar-cross")) head.style.removeProperty("--k2b-calendar-cross");
+    }
+    setTodayPlace(placeOfToday());
+    // Only the reader's own scrolling asks for more: days that came in above push the view down, and runs of empty
+    // days are short, so asking whenever the view is near an end would load one empty week after the other.
+    const direction = Math.sign(top - lastScrollTop);
+    lastScrollTop = top;
+    if (direction > 0 && top + scroller.clientHeight > scroller.scrollHeight - 2 * scroller.clientHeight) loadMore("later");else if (direction < 0 && top < scroller.clientHeight) loadMore("earlier");
+    rememberAnchor();
+  };
+  const onScroll = () => {
+    if (!scroller) return;
+    if (glideTarget !== null && Math.abs(scroller.scrollTop - glideTarget) < 2) glideTarget = null;
+    if (!frame) frame = requestAnimationFrame(() => {
+      frame = 0;
+      updateChrome();
+    });
+    window.clearTimeout(restTimer);
+    restTimer = window.setTimeout(settle, lastInput === "touch" ? 90 : 160);
+  };
+  onMount(() => {
+    setMounted(true);
+    queueMicrotask(() => {
+      positionAt(view.anchorKey());
+      rememberAnchor();
+      ready = true;
+      updateChrome();
+    });
+    const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => {
+      measure();
+      // A glide owns the scroll until it arrives; putting the view back meanwhile would stop it.
+      if (glideTarget === null) restoreAnchor();
+    });
+    if (track) observer?.observe(track);
+    onCleanup(() => {
+      observer?.disconnect();
+      window.clearTimeout(restTimer);
+      window.clearTimeout(reportTimer);
+      window.clearTimeout(glideTimer);
+      if (frame) cancelAnimationFrame(frame);
+    });
+  });
+  // Before new days or an unfolded run change the page, note where the reader is from the page as it stands: the
+  // place remembered in the last frame can be a scroll behind on a busy page. A computation runs before any render
+  // effect touches the page.
+  createComputed(on(() => [groupIds(), view.days()], () => {
+    if (!untrack(mounted)) return;
+    measure();
+    rememberAnchor();
+  }, {
+    defer: true
+  }));
+  // New days above or below, a folded night, or an unfolded run: keep what the reader looks at in place.
+  createEffect(on(() => [groupIds(), view.days()], () => {
+    if (!untrack(mounted)) return;
+    measure();
+    if (pendingTarget && loaded(pendingTarget)) {
+      positionAt(pendingTarget);
+      pendingTarget = null;
+      rememberAnchor();
+    } else restoreAnchor();
+    updateChrome();
+  }, {
+    defer: true
+  }));
+  // Another date from the host puts that day on screen.
+  createEffect(on(view.anchorKey, key => {
+    if (!untrack(mounted)) return;
+    pendingTarget = loaded(key) ? null : key;
+    if (pendingTarget) return;
+    if (key === untrack(visibleKeys).first) {
+      rememberAnchor();
+      return;
+    }
+    queueMicrotask(() => {
+      positionAt(key);
+      rememberAnchor();
+      updateChrome();
+    });
+  }, {
+    defer: true
+  }));
+
+  /** Whether today's day is above, below, or in the view. */
+  const placeOfToday = () => {
+    const key = view.nowKey();
+    if (!scroller) return "";
+    const section = sectionOf(key);
+    if (!section) return key < untrack(topKey) ? "up" : "down";
+    const index = sections.indexOf(section);
+    const top = scroller.scrollTop;
+    if (tops[index] + section.offsetHeight < top) return "up";
+    if (tops[index] > top + scroller.clientHeight) return "down";
+    return "";
+  };
+  const visibleKeys = () => {
+    const first = topKey();
+    if (!scroller || sections.length === 0) return {
+      first,
+      last: first
+    };
+    const bottom = scroller.scrollTop + scroller.clientHeight;
+    const index = stopIndexAt(tops, bottom - 1);
+    const keysAtBottom = keysOf(sections[index]);
+    return {
+      first,
+      last: keysAtBottom[keysAtBottom.length - 1] ?? first
+    };
+  };
+  const loaded = key => key >= view.range().first && key <= view.range().last;
+  const goTo = key => {
+    if (!loaded(key) || !scroller) return false;
+    // A day inside a run of empty days opens on its own, so the view goes to that day and not to the run.
+    if (untrack(groups).some(group => group.kind === "empty" && group.keys.includes(key))) unfold([key]);
+    measure();
+    const top = topFor(key);
+    if (top === null) return false;
+    glide(top);
+    return true;
+  };
+  const handle = {
+    visibleKeys,
+    step: direction => {
+      if (!scroller) return false;
+      measure();
+      const top = scroller.scrollTop;
+      const index = stopIndexAt(tops, top);
+      const target = direction > 0 ? tops[index + 1] : top - tops[index] > 8 ? tops[index] : tops[index - 1];
+      if (target === undefined) return false;
+      glide(target);
+      return true;
+    },
+    goTo,
+    today: () => {
+      const key = view.nowKey();
+      if (!loaded(key) || !scroller) return false;
+      measure();
+      const top = topFor(key, view.nowMinute());
+      if (top === null) return false;
+      glide(Math.max(topFor(key) ?? 0, top - scroller.clientHeight / 3));
+      return true;
+    },
+    todayDirection: () => {
+      const key = view.nowKey();
+      const {
+        first,
+        last
+      } = view.range();
+      if (key < first) return "up";
+      if (key > last) return "down";
+      return todayPlace();
+    },
+    controller: {
+      quickCreate: create => {
+        const target = view.createTarget(visibleKeys());
+        const body = scroller?.querySelector(`[data-calendar-body="${target.key}"]`);
+        view.openQuickCreate(target.key, target.start, target.end, anchorFor(target.key, target.start, target.end) ?? body ?? scroller, create);
+      },
+      createTarget: () => {
+        const target = view.createTarget(visibleKeys());
+        return view.rangeOfSelection(target);
+      },
+      dragIn: (event, item, onDrop) => view.dragIn(event, item, onDrop, scroller)
+    }
+  };
+  /** The place of a slot on screen for the quick create, when it is in view. */
+  const anchorFor = (key, start, end) => {
+    const body = scroller?.querySelector(`[data-calendar-body="${key}"]`);
+    if (!body || !scroller) return null;
+    const rect = body.getBoundingClientRect();
+    const bounds = scroller.getBoundingClientRect();
+    const geometry = readDayGeometry(body, view.wake(), body.dataset.expanded === "true");
+    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;
+    const left = rect.left + 56;
+    const clampedTop = Math.max(bounds.top, top);
+    return new DOMRect(left, clampedTop, Math.min(rect.right - left, 320), Math.max(8, Math.min(bottom, bounds.bottom) - clampedTop));
+  };
+  onMount(() => props.register(handle));
+  onCleanup(() => props.register(null));
+
+  /** Tab into the stream lands on the first stop on screen, not on the first loaded day weeks above. */
+  let tabbedAt = -1e9;
+  onMount(() => {
+    const note = event => {
+      if (event.key === "Tab") {
+        tabbedAt = performance.now();
+        if (scroller) restingTop = scroller.scrollTop;
+      }
+    };
+    window.addEventListener("keydown", note, true);
+    onCleanup(() => window.removeEventListener("keydown", note, true));
+  });
+  let restingTop = 0;
+  const onFocusIn = event => {
+    if (!scroller) return;
+    const from = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+    if (performance.now() - tabbedAt > 400 || from && scroller.contains(from)) {
+      restingTop = scroller.scrollTop;
+      return;
+    }
+    // Undo the scroll to the focused stop, which some engines make before this runs and some after; a stop on screen
+    // keeps the focus.
+    if (Math.abs(scroller.scrollTop - restingTop) >= 1) scroller.scrollTop = restingTop;
+    const bounds = scroller.getBoundingClientRect();
+    const visible = element => {
+      const rect = element.getBoundingClientRect();
+      return rect.height > 0 && rect.top >= bounds.top - 1 && rect.bottom <= bounds.bottom + 1;
+    };
+    if (event.target instanceof Element && visible(event.target)) return;
+    const stops = [...scroller.querySelectorAll("a[href],button:not([tabindex='-1'])")].filter(visible);
+    const back = Boolean(from && scroller.compareDocumentPosition(from) & Node.DOCUMENT_POSITION_FOLLOWING);
+    (back ? stops[stops.length - 1] : stops[0])?.focus({
+      preventScroll: true
+    });
+  };
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$2),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$5 = _el$3.firstChild,
+      [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
+      _el$9 = _el$2.nextSibling,
+      _el$0 = _el$9.nextSibling,
+      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling);
+    _el$2.$$focusin = onFocusIn;
+    _el$2.addEventListener("touchcancel", event => {
+      fingers = event.touches.length;
+    });
+    _el$2.$$touchend = event => {
+      fingers = event.touches.length;
+    };
+    _el$2.$$touchstart = event => {
+      fingers = event.touches.length;
+      lastInput = "touch";
+      glideTarget = null;
+    };
+    _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);
+    var _ref$2 = track;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$3) : track = _el$3;
+    _$insert(_el$3, _$createComponent(For, {
+      get each() {
+        return groupIds();
+      },
+      children: id => {
+        const group = () => groupsById().get(id);
+        return _$createComponent(Show, {
+          get when() {
+            return group();
+          },
+          children: current => current().kind === "day" ? _$createComponent(DaySection, {
+            view: view,
+            get dayKey() {
+              return groupFirst(current());
+            },
+            hover: hover,
+            setHover: setHover,
+            scroller: () => scroller
+          }) : _$createComponent(EmptyRun, {
+            view: view,
+            get keys() {
+              return current().keys;
+            },
+            onUnfold: unfold
+          })
+        });
+      }
+    }), _el$6, _co$);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return props.owner.onLoadLater;
+      },
+      get children() {
+        var _el$4 = _$getNextElement(_tmpl$);
+        _$insert(_el$4, () => view.messages().calendarMoreDays);
+        return _el$4;
+      }
+    }), _el$8, _co$2);
+    _$setAttribute(_el$9, "id", helpId);
+    _$insert(_el$9, () => view.messages().calendarDayKeyboardHelp);
+    _$insert(_el$, _$createComponent(TimeQuickCreate, {
+      view: view
+    }), _el$1, _co$3);
+    _$effect(() => _$setAttribute(_el$, "data-dragging", view.dragging() || undefined));
+    _$runHydrationEvents();
+    return _el$;
+  })();
+};
+const DaySection = props => {
+  const view = props.view;
+  const model = createMemo(() => view.dayOf(props.dayKey));
+  const expanded = () => view.nightOpen(props.dayKey, model());
+  const headingId = createUniqueId();
+  const badge = () => view.props.owner.dayBadges?.[props.dayKey];
+  const today = () => props.dayKey === view.calendarToday();
+  const selectedDay = () => {
+    const current = view.selection();
+    return Boolean(current && current.key === props.dayKey && current.start === undefined);
+  };
+  const soon = () => soonNote(view, props.dayKey);
+  const wake = () => view.wake();
+  const nowMinute = () => props.dayKey === view.nowKey() ? view.nowMinute() : null;
+  const bands = createMemo(() => dayBands(view, props.dayKey, expanded()));
+  const gaps = createMemo(() => dayGaps(view, props.dayKey));
+  const markers = () => model().markers.filter(marker => marker.minute < (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 = () => expanded() ? [] : foldedEntries(view, props.dayKey);
+  const nightLabel = () => view.messages().calendarNight({
+    from: shortDay(view, props.dayKey),
+    to: shortDay(view, addDayKeys(props.dayKey, 1))
+  });
+  const foldLabel = () => view.messages().calendarNightHours({
+    from: view.clock(wake()).slice(0, 2),
+    to: view.clock(DAY_MINUTES).slice(0, 2)
+  });
+
+  // Gaps, bands, and markers in one time order, so Tab runs through the day as it reads. Unchanged rows keep their
+  // elements and focus when the clock updates the gaps.
+  const timeline = createMemo(previous => [...gaps().map(gap => previous.find(row => row.kind === "gap" && row.gap.start === gap.start && row.gap.end === gap.end && row.gap.past === gap.past) ?? {
+    at: gap.start,
+    kind: "gap",
+    gap
+  }), ...bands().map(band => previous.find(row => row.kind === "band" && row.band === band) ?? {
+    at: Math.max(0, band.start),
+    kind: "band",
+    band
+  }), ...markers().map(marker => previous.find(row => row.kind === "marker" && row.marker === marker) ?? {
+    at: marker.minute,
+    kind: "marker",
+    marker
+  })].sort((left, right) => left.at - right.at), []);
+  const isEmptyTarget = target => target instanceof Element && !target.closest("a,button,[data-calendar-event],.k2b-calendar-band,.k2b-calendar-marker,.k2b-calendar-draft,.k2b-calendar-fold");
+  const minuteAt = (element, clientY) => {
+    const geometry = readDayGeometry(element, wake(), expanded());
+    const rect = element.getBoundingClientRect();
+    return Math.max(0, Math.min((expanded() ? DAY_MINUTES : wake()) - 15, dayMinuteAt(geometry, clientY - rect.top)));
+  };
+  let lastPointer = "mouse";
+  return (() => {
+    var _el$10 = _$getNextElement(_tmpl$0),
+      _el$11 = _el$10.firstChild,
+      _el$12 = _el$11.firstChild,
+      _el$13 = _el$12.firstChild,
+      _el$17 = _el$13.firstChild,
+      [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
+      _el$15 = _el$18.nextSibling,
+      _el$16 = _el$15.nextSibling,
+      _el$19 = _el$12.nextSibling,
+      _el$20 = _el$19.firstChild,
+      _el$23 = _el$20.nextSibling,
+      _el$24 = _el$23.firstChild,
+      _el$25 = _el$24.nextSibling,
+      [_el$26, _co$5] = _$getNextMarker(_el$25.nextSibling),
+      _el$28 = _el$19.nextSibling,
+      [_el$29, _co$6] = _$getNextMarker(_el$28.nextSibling),
+      _el$27 = _el$29.nextSibling,
+      _el$54 = _el$11.nextSibling,
+      [_el$55, _co$12] = _$getNextMarker(_el$54.nextSibling),
+      _el$31 = _el$55.nextSibling,
+      _el$42 = _el$31.firstChild,
+      [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
+      _el$44 = _el$43.nextSibling,
+      [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling),
+      _el$46 = _el$45.nextSibling,
+      [_el$47, _co$0] = _$getNextMarker(_el$46.nextSibling),
+      _el$48 = _el$47.nextSibling,
+      [_el$49, _co$1] = _$getNextMarker(_el$48.nextSibling),
+      _el$50 = _el$49.nextSibling,
+      [_el$51, _co$10] = _$getNextMarker(_el$50.nextSibling),
+      _el$52 = _el$51.nextSibling,
+      [_el$53, _co$11] = _$getNextMarker(_el$52.nextSibling);
+    _$setAttribute(_el$10, "aria-labelledby", headingId);
+    _$setAttribute(_el$12, "id", headingId);
+    _el$13.$$click = () => {
+      view.setTouchDraft(null);
+      view.setSelection(selectedDay() ? null : {
+        key: props.dayKey
+      });
+    };
+    _$insert(_el$13, _$createComponent(Show, {
+      get when() {
+        return today();
+      },
+      get children() {
+        var _el$14 = _$getNextElement(_tmpl$3);
+        _$insert(_el$14, () => view.props.labels.today);
+        return _el$14;
+      }
+    }), _el$18, _co$4);
+    _$insert(_el$15, () => longDay(view, props.dayKey));
+    _$insert(_el$16, () => shortDay(view, props.dayKey, true));
+    _$insert(_el$20, _$createComponent(Show, {
+      get when() {
+        return soon();
+      },
+      get children() {
+        return [_$getNextElement(_tmpl$4), (() => {
+          var _el$22 = _$getNextElement(_tmpl$5);
+          _$insert(_el$22, soon);
+          return _el$22;
+        })()];
+      }
+    }));
+    _$insert(_el$23, () => view.messages().calendarAllDone, _el$26, _co$5);
+    _$insert(_el$11, _$createComponent(Show, {
+      get when() {
+        return badge();
+      },
+      children: current => (() => {
+        var _el$56 = _$getNextElement(_tmpl$1),
+          _el$57 = _el$56.firstChild,
+          [_el$58, _co$13] = _$getNextMarker(_el$57.nextSibling),
+          _el$59 = _el$58.nextSibling,
+          [_el$60, _co$14] = _$getNextMarker(_el$59.nextSibling);
+        _$insert(_el$56, _$createComponent(Show, {
+          get when() {
+            return current().icon;
+          },
+          children: icon => (() => {
+            var _el$61 = _$getNextElement(_tmpl$10);
+            _$effect(() => _$className(_el$61, `ti ti-${icon()}`));
+            return _el$61;
+          })()
+        }), _el$58, _co$13);
+        _$insert(_el$56, () => current().label, _el$60, _co$14);
+        return _el$56;
+      })()
+    }), _el$29, _co$6);
+    _$insert(_el$27, () => daySummary(view, props.dayKey));
+    _$insert(_el$10, _$createComponent(Show, {
+      get when() {
+        return model().spans.length > 0;
+      },
+      get children() {
+        var _el$30 = _$getNextElement(_tmpl$6);
+        _$insert(_el$30, _$createComponent(AllDayChips, {
+          view: view,
+          get dayKey() {
+            return props.dayKey;
+          },
+          get spans() {
+            return model().spans;
+          }
+        }));
+        _$effect(() => _$setAttribute(_el$30, "aria-label", view.messages().calendarAllDayAndDue));
+        return _el$30;
+      }
+    }), _el$55, _co$12);
+    _el$31.addEventListener("pointerleave", () => {
+      if (props.hover()?.key === props.dayKey) props.setHover(null);
+    });
+    _el$31.$$pointermove = event => {
+      if (event.pointerType !== "mouse" || view.dragging() || !isEmptyTarget(event.target)) {
+        if (props.hover()?.key === props.dayKey) props.setHover(null);
+        return;
+      }
+      const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 15) * 15;
+      props.setHover({
+        key: props.dayKey,
+        minute
+      });
+    };
+    _el$31.$$dblclick = event => {
+      if (!isEmptyTarget(event.target) || lastPointer !== "mouse") return;
+      const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 30) * 30;
+      view.openQuickCreate(props.dayKey, minute, Math.min(minute + 60, expanded() ? DAY_MINUTES : wake()), event.currentTarget);
+    };
+    _$addEventListener(_el$31, "click", event => {
+      if (!isEmptyTarget(event.target) || !view.canCreate()) return;
+      const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 30) * 30;
+      const end = Math.min(minute + 60, expanded() ? DAY_MINUTES : wake());
+      if (lastPointer === "mouse") {
+        view.setTouchDraft(null);
+        view.setSelection({
+          key: props.dayKey,
+          start: minute,
+          end
+        });
+        return;
+      }
+      view.setTouchDraft({
+        key: props.dayKey,
+        start: minute,
+        end
+      });
+      view.setSelection({
+        key: props.dayKey,
+        start: minute,
+        end
+      });
+    });
+    _el$31.$$touchstart = () => {
+      lastPointer = "touch";
+    };
+    _el$31.$$pointerdown = event => {
+      lastPointer = event.pointerType;
+      if (event.button !== 0 || !isEmptyTarget(event.target)) return;
+      view.startDraw(event, props.dayKey, props.scroller());
+    };
+    _$use(element => view.registerBody(props.dayKey, element, expanded), _el$31);
+    _$insert(_el$31, _$createComponent(For, {
+      get each() {
+        return Array.from({
+          length: wake() / 60 + 1
+        }, (_, index) => index * 60);
+      },
+      children: minute => [(() => {
+        var _el$62 = _$getNextElement(_tmpl$11);
+        _$effect(_$p => _$setStyleProperty(_el$62, "top", termsCss(dayYTerms(wake(), expanded(), minute))));
+        return _el$62;
+      })(), (() => {
+        var _el$63 = _$getNextElement(_tmpl$12);
+        _$insert(_el$63, () => view.clock(minute));
+        _$effect(_p$ => {
+          var _v$10 = isNearNow(view, props.dayKey, minute) ? "true" : undefined,
+            _v$11 = termsCss(dayYTerms(wake(), expanded(), minute));
+          _v$10 !== _p$.e && _$setAttribute(_el$63, "data-near-now", _p$.e = _v$10);
+          _v$11 !== _p$.t && _$setStyleProperty(_el$63, "top", _p$.t = _v$11);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$63;
+      })()]
+    }), _el$43, _co$8);
+    _$insert(_el$31, _$createComponent(Show, {
+      get when() {
+        return expanded();
+      },
+      get fallback() {
+        return (() => {
+          var _el$64 = _$getNextElement(_tmpl$14),
+            _el$65 = _el$64.firstChild,
+            _el$66 = _el$65.firstChild,
+            _el$67 = _el$66.nextSibling,
+            _el$69 = _el$65.nextSibling,
+            [_el$70, _co$15] = _$getNextMarker(_el$69.nextSibling);
+          _el$65.$$click = () => view.setNight(props.dayKey, true);
+          _$insert(_el$67, foldLabel);
+          _$insert(_el$64, _$createComponent(Show, {
+            get when() {
+              return folded().length > 0;
+            },
+            get children() {
+              var _el$68 = _$getNextElement(_tmpl$13);
+              _$insert(_el$68, _$createComponent(For, {
+                get each() {
+                  return folded();
+                },
+                children: entry => {
+                  const checked = () => view.checkedOf(entry.event);
+                  return (() => {
+                    var _el$71 = _$getNextElement(_tmpl$15),
+                      _el$72 = _el$71.firstChild,
+                      [_el$73, _co$16] = _$getNextMarker(_el$72.nextSibling),
+                      _el$74 = _el$73.nextSibling,
+                      [_el$75, _co$17] = _$getNextMarker(_el$74.nextSibling);
+                    _$insert(_el$71, _$createComponent(Show, {
+                      get when() {
+                        return checked() !== undefined;
+                      },
+                      get children() {
+                        return _$createComponent(TimeCheck, {
+                          view: view,
+                          get event() {
+                            return entry.event;
+                          }
+                        });
+                      }
+                    }), _el$73, _co$16);
+                    _$insert(_el$71, _$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);
+                      }
+                    }), _el$75, _co$17);
+                    _$effect(_p$ => {
+                      var _v$14 = checked() !== undefined ? "true" : undefined,
+                        _v$15 = checked() ? "true" : undefined,
+                        _v$16 = eventAccent(entry.event);
+                      _v$14 !== _p$.e && _$setAttribute(_el$71, "data-checkbox", _p$.e = _v$14);
+                      _v$15 !== _p$.t && _$setAttribute(_el$71, "data-checked", _p$.t = _v$15);
+                      _v$16 !== _p$.a && _$setStyleProperty(_el$71, "--k2b-calendar-accent", _p$.a = _v$16);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined,
+                      a: undefined
+                    });
+                    return _el$71;
+                  })();
+                }
+              }));
+              return _el$68;
+            }
+          }), _el$70, _co$15);
+          _$effect(_p$ => {
+            var _v$12 = `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`,
+              _v$13 = view.messages().calendarOpenNight;
+            _v$12 !== _p$.e && _$setStyleProperty(_el$64, "top", _p$.e = _v$12);
+            _v$13 !== _p$.t && _$setAttribute(_el$65, "aria-label", _p$.t = _v$13);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          _$runHydrationEvents();
+          return _el$64;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$32 = _$getNextElement(_tmpl$7);
+          _$effect(_p$ => {
+            var _v$ = termsCss(dayYTerms(wake(), true, wake())),
+              _v$2 = termsCss(dayHeightTermsNight(wake()));
+            _v$ !== _p$.e && _$setStyleProperty(_el$32, "top", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setStyleProperty(_el$32, "height", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$32;
+        })(), (() => {
+          var _el$33 = _$getNextElement(_tmpl$8),
+            _el$34 = _el$33.firstChild,
+            _el$35 = _el$34.nextSibling,
+            _el$36 = _el$35.nextSibling,
+            _el$38 = _el$36.firstChild,
+            [_el$39, _co$7] = _$getNextMarker(_el$38.nextSibling),
+            _el$37 = _el$39.nextSibling;
+          _el$33.$$click = () => view.setNight(props.dayKey, false);
+          _$insert(_el$35, nightLabel);
+          _$insert(_el$36, () => view.messages().calendarFoldNight, _el$39, _co$7);
+          _$effect(_$p => _$setStyleProperty(_el$33, "top", termsCss(dayYTerms(wake(), true, wake()))));
+          _$runHydrationEvents();
+          return _el$33;
+        })(), _$createComponent(For, {
+          get each() {
+            return nightHours(wake());
+          },
+          children: minute => [(() => {
+            var _el$76 = _$getNextElement(_tmpl$11);
+            _$effect(_p$ => {
+              var _v$17 = view.clock(minute) === "00:00" ? "true" : undefined,
+                _v$18 = termsCss(dayYTerms(wake(), true, minute));
+              _v$17 !== _p$.e && _$setAttribute(_el$76, "data-midnight", _p$.e = _v$17);
+              _v$18 !== _p$.t && _$setStyleProperty(_el$76, "top", _p$.t = _v$18);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$76;
+          })(), (() => {
+            var _el$77 = _$getNextElement(_tmpl$16);
+            _$insert(_el$77, () => view.clock(minute));
+            _$effect(_$p => _$setStyleProperty(_el$77, "top", termsCss(dayYTerms(wake(), true, minute))));
+            return _el$77;
+          })(), _$createComponent(Show, {
+            get when() {
+              return view.clock(minute) === "00:00";
+            },
+            get children() {
+              var _el$78 = _$getNextElement(_tmpl$17);
+              _$insert(_el$78, () => shortDay(view, addDayKeys(props.dayKey, 1), true));
+              _$effect(_$p => _$setStyleProperty(_el$78, "top", termsCss(dayYTerms(wake(), true, minute))));
+              return _el$78;
+            }
+          })]
+        })];
+      }
+    }), _el$45, _co$9);
+    _$insert(_el$31, _$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 expanded();
+        },
+        get aside() {
+          return gapAside(model(), entry.gap);
+        }
+      }) : entry.kind === "band" ? _$createComponent(TimeBand, {
+        view: view,
+        get band() {
+          return entry.band;
+        },
+        get dayKey() {
+          return props.dayKey;
+        },
+        get expanded() {
+          return expanded();
+        },
+        showLocation: true,
+        hourPx: 56,
+        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 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: true,
+        get scroller() {
+          return props.scroller;
+        }
+      })
+    }), _el$47, _co$0);
+    _$insert(_el$31, _$createComponent(TimeOverlays, {
+      view: view,
+      get dayKey() {
+        return props.dayKey;
+      },
+      get expanded() {
+        return expanded();
+      }
+    }), _el$49, _co$1);
+    _$insert(_el$31, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => props.hover()?.key === props.dayKey)() && props.hover();
+      },
+      children: current => (() => {
+        var _el$79 = _$getNextElement(_tmpl$18);
+        _$insert(_el$79, () => view.clock(current().minute));
+        _$effect(_$p => _$setStyleProperty(_el$79, "top", termsCss(dayYTerms(wake(), expanded(), current().minute))));
+        return _el$79;
+      })()
+    }), _el$51, _co$10);
+    _$insert(_el$31, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(nowMinute() !== null && nowMinute() >= 0))() && nowMinute() < (expanded() ? DAY_MINUTES : wake());
+      },
+      get children() {
+        var _el$40 = _$getNextElement(_tmpl$9),
+          _el$41 = _el$40.firstChild;
+        _$insert(_el$41, () => view.clock(nowMinute()));
+        _$effect(_$p => _$setStyleProperty(_el$40, "top", termsCss(dayYTerms(wake(), expanded(), nowMinute()))));
+        return _el$40;
+      }
+    }), _el$53, _co$11);
+    _$effect(_p$ => {
+      var _v$3 = props.dayKey,
+        _v$4 = today() ? "true" : undefined,
+        _v$5 = props.dayKey < view.nowKey() ? "true" : undefined,
+        _v$6 = selectedDay() ? "true" : undefined,
+        _v$7 = selectedDay() ? "true" : "false",
+        _v$8 = view.cheered() === props.dayKey ? "true" : undefined,
+        _v$9 = props.dayKey,
+        _v$0 = expanded() ? "true" : "false",
+        _v$1 = termsCss(dayHeightTerms(wake(), expanded()));
+      _v$3 !== _p$.e && _$setAttribute(_el$10, "data-calendar-keys", _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$10, "data-today", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setAttribute(_el$10, "data-past", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$10, "data-selected", _p$.o = _v$6);
+      _v$7 !== _p$.i && _$setAttribute(_el$13, "aria-pressed", _p$.i = _v$7);
+      _v$8 !== _p$.n && _$setAttribute(_el$19, "data-cheer", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$31, "data-calendar-body", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$31, "data-expanded", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setStyleProperty(_el$31, "height", _p$.r = _v$1);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined
+    });
+    _$runHydrationEvents();
+    return _el$10;
+  })();
+};
+const dayHeightTermsNight = wake => {
+  const total = dayHeightTerms(wake, true);
+  return [0, total[1], total[2], 0];
+};
+const EmptyRun = props => {
+  const view = props.view;
+  const headingId = createUniqueId();
+  const first = () => props.keys[0];
+  const last = () => props.keys[props.keys.length - 1];
+  const title = () => props.keys.length === 1 ? longDay(view, first()) : `${shortDay(view, first())} – ${shortDay(view, last(), true)}`;
+  return (() => {
+    var _el$80 = _$getNextElement(_tmpl$19),
+      _el$81 = _el$80.firstChild,
+      _el$82 = _el$81.firstChild,
+      _el$83 = _el$82.firstChild,
+      _el$84 = _el$82.nextSibling,
+      _el$86 = _el$84.nextSibling,
+      [_el$87, _co$18] = _$getNextMarker(_el$86.nextSibling),
+      _el$85 = _el$87.nextSibling,
+      _el$88 = _el$81.nextSibling,
+      _el$89 = _el$88.firstChild,
+      _el$90 = _el$89.nextSibling,
+      _el$91 = _el$90.firstChild,
+      _el$92 = _el$91.nextSibling,
+      [_el$93, _co$19] = _$getNextMarker(_el$92.nextSibling);
+    _$setAttribute(_el$80, "aria-labelledby", headingId);
+    _$setAttribute(_el$82, "id", headingId);
+    _$insert(_el$83, title);
+    _$insert(_el$81, _$createComponent(For, {
+      get each() {
+        return props.keys.filter(key => view.props.owner.dayBadges?.[key]);
+      },
+      children: key => {
+        const badge = view.props.owner.dayBadges[key];
+        return (() => {
+          var _el$94 = _$getNextElement(_tmpl$21),
+            _el$96 = _el$94.firstChild,
+            [_el$97, _co$20] = _$getNextMarker(_el$96.nextSibling),
+            _el$98 = _el$97.nextSibling,
+            [_el$99, _co$21] = _$getNextMarker(_el$98.nextSibling),
+            _el$100 = _el$99.nextSibling,
+            [_el$101, _co$22] = _$getNextMarker(_el$100.nextSibling);
+          _$insert(_el$94, _$createComponent(Show, {
+            get when() {
+              return props.keys.length > 1;
+            },
+            get children() {
+              var _el$95 = _$getNextElement(_tmpl$20);
+              _$insert(_el$95, () => shortDay(view, key).split(/[\s,.]/)[0]);
+              return _el$95;
+            }
+          }), _el$97, _co$20);
+          _$insert(_el$94, _$createComponent(Show, {
+            get when() {
+              return badge.icon;
+            },
+            children: icon => (() => {
+              var _el$102 = _$getNextElement(_tmpl$10);
+              _$effect(() => _$className(_el$102, `ti ti-${icon()}`));
+              return _el$102;
+            })()
+          }), _el$99, _co$21);
+          _$insert(_el$94, () => badge.label, _el$101, _co$22);
+          return _el$94;
+        })();
+      }
+    }), _el$87, _co$18);
+    _$insert(_el$85, (() => {
+      var _c$ = _$memo(() => props.keys.length > 1);
+      return () => _c$() ? view.messages().calendarDayCount({
+        count: props.keys.length
+      }) : "";
+    })());
+    _el$88.$$click = () => props.onUnfold(props.keys);
+    _$insert(_el$89, () => view.messages().calendarNothingPlannedShort);
+    _$insert(_el$90, () => view.messages().calendarUnfoldDays({
+      count: props.keys.length
+    }), _el$93, _co$19);
+    _$effect(_p$ => {
+      var _v$19 = props.keys.join(","),
+        _v$20 = last() < view.nowKey() ? "true" : undefined;
+      _v$19 !== _p$.e && _$setAttribute(_el$80, "data-calendar-keys", _p$.e = _v$19);
+      _v$20 !== _p$.t && _$setAttribute(_el$80, "data-past", _p$.t = _v$20);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    _$runHydrationEvents();
+    return _el$80;
+  })();
+};
+_$delegateEvents(["touchstart", "touchend", "focusin", "click", "pointerdown", "dblclick", "pointermove"]);
+//# sourceMappingURL=CalendarDayView.js.map