@k2b/ui 0.21.0 → 0.23.0

package/dist/ssr/content/CalendarDayView.js

@@ -0,0 +1,800 @@
+import { memo as _$memo } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<p class=\"k2b-calendar-days__more\">", "</p>"],
+  _tmpl$2 = ["<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>", "</div>"],
+  _tmpl$3 = ["<span class=\"k2b-calendar-days__today\">", "</span>"],
+  _tmpl$4 = "<i class=\"ti ti-clock\" aria-hidden=\"true\"></i>",
+  _tmpl$5 = ["<span>", "</span>"],
+  _tmpl$6 = ["<div class=\"k2b-calendar-days__all-day\" role=\"group\"", ">", "</div>"],
+  _tmpl$7 = ["<span class=\"k2b-calendar-night\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$8 = ["<button type=\"button\" class=\"k2b-calendar-night__bar\" aria-expanded=\"true\" style=\"", "\"><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\"></i></span></button>"],
+  _tmpl$9 = ["<div class=\"k2b-calendar-now\" style=\"", "\" aria-hidden=\"true\"><span class=\"k2b-calendar-now__time\">", "</span></div>"],
+  _tmpl$0 = ["<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\"", " style=\"", "\">", "", "", "", "", "", "</div></section>"],
+  _tmpl$1 = ["<span class=\"k2b-calendar-days__badge\">", "", "</span>"],
+  _tmpl$10 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$11 = ["<span class=\"k2b-calendar-days__line\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$12 = ["<span class=\"k2b-calendar-days__hour\"", " style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$13 = ["<ul class=\"k2b-calendar-fold__chips\">", "</ul>"],
+  _tmpl$14 = ["<div class=\"k2b-calendar-fold\" style=\"", "\"><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>", "</div>"],
+  _tmpl$15 = ["<li", " style=\"", "\">", "", "</li>"],
+  _tmpl$16 = ["<span class=\"k2b-calendar-days__line\"", " style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$17 = ["<span class=\"k2b-calendar-days__hour\" data-night=\"true\" style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$18 = ["<span class=\"k2b-calendar-days__midnight\" style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$19 = ["<span class=\"k2b-calendar-hover\" style=\"", "\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$20 = ["<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>", "</span></button></section>"],
+  _tmpl$21 = ["<span class=\"k2b-calendar-days__badge-day\">", "</span>"],
+  _tmpl$22 = ["<span class=\"k2b-calendar-days__badge\" data-run=\"true\">", "", "", "</span>"];
+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 _$ssr(_tmpl$2, _$ssrAttribute("data-dragging", _$escape(view.dragging() || undefined, true), false), _$ssrAttribute("aria-describedby", _$escape(helpId, true), false), _$escape(_$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
+        })
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.onLoadLater;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$escape(view.messages().calendarMoreDays));
+    }
+  })), _$ssrAttribute("id", _$escape(helpId, true), false), _$escape(view.messages().calendarDayKeyboardHelp), _$escape(_$createComponent(TimeQuickCreate, {
+    view: view
+  })));
+};
+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 _$ssr(_tmpl$0, _$ssrAttribute("data-calendar-keys", _$escape(props.dayKey, true), false) + _$ssrAttribute("aria-labelledby", _$escape(headingId, true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", props.dayKey < view.nowKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", selectedDay() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("id", _$escape(headingId, true), false), _$ssrAttribute("aria-pressed", selectedDay() ? "true" : "false", false), _$escape(_$createComponent(Show, {
+    get when() {
+      return today();
+    },
+    get children() {
+      return _$ssr(_tmpl$3, _$escape(view.props.labels.today));
+    }
+  })), _$escape(longDay(view, props.dayKey)), _$escape(shortDay(view, props.dayKey, true)), _$ssrAttribute("data-cheer", view.cheered() === props.dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return soon();
+    },
+    get children() {
+      return [_$ssr(_tmpl$4), _$ssr(_tmpl$5, _$escape(soon()))];
+    }
+  })), _$escape(view.messages().calendarAllDone), _$escape(_$createComponent(Show, {
+    get when() {
+      return badge();
+    },
+    children: current => _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
+      get when() {
+        return current().icon;
+      },
+      children: icon => _$ssr(_tmpl$10, `ti ti-${_$escape(icon(), true)}`)
+    })), _$escape(current().label))
+  })), _$escape(daySummary(view, props.dayKey)), _$escape(_$createComponent(Show, {
+    get when() {
+      return model().spans.length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$ssrAttribute("aria-label", _$escape(view.messages().calendarAllDayAndDue, true), false), _$escape(_$createComponent(AllDayChips, {
+        view: view,
+        get dayKey() {
+          return props.dayKey;
+        },
+        get spans() {
+          return model().spans;
+        }
+      })));
+    }
+  })), _$ssrAttribute("data-calendar-body", _$escape(props.dayKey, true), false) + _$ssrAttribute("data-expanded", expanded() ? "true" : "false", false), _$ssrStyleProperty("height:", _$escape(termsCss(dayHeightTerms(wake(), expanded())), true)), _$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(), expanded(), minute)), true))), _$ssr(_tmpl$12, _$ssrAttribute("data-near-now", isNearNow(view, props.dayKey, minute) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), expanded(), minute)), true)), _$escape(view.clock(minute)))]
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return expanded();
+    },
+    get fallback() {
+      return _$ssr(_tmpl$14, _$ssrStyleProperty("top:", `calc(${_$escape(termsCss(dayYTerms(wake(), false, wake())), true)} + 3px)`), _$ssrAttribute("aria-label", _$escape(view.messages().calendarOpenNight, true), false), _$escape(foldLabel()), _$escape(_$createComponent(Show, {
+        get when() {
+          return folded().length > 0;
+        },
+        get children() {
+          return _$ssr(_tmpl$13, _$escape(_$createComponent(For, {
+            get each() {
+              return folded();
+            },
+            children: entry => {
+              const checked = () => view.checkedOf(entry.event);
+              return _$ssr(_tmpl$15, _$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;
+                    }
+                  });
+                }
+              })), _$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 children() {
+      return [_$ssr(_tmpl$7, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, wake())), true)) + _$ssrStyleProperty(";height:", _$escape(termsCss(dayHeightTermsNight(wake())), true))), _$ssr(_tmpl$8, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, wake())), true)), _$escape(nightLabel()), _$escape(view.messages().calendarFoldNight)), _$createComponent(For, {
+        get each() {
+          return nightHours(wake());
+        },
+        children: minute => [_$ssr(_tmpl$16, _$ssrAttribute("data-midnight", view.clock(minute) === "00:00" ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, minute)), true))), _$ssr(_tmpl$17, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, minute)), true)), _$escape(view.clock(minute))), _$createComponent(Show, {
+          get when() {
+            return view.clock(minute) === "00:00";
+          },
+          get children() {
+            return _$ssr(_tmpl$18, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), true, minute)), true)), _$escape(shortDay(view, addDayKeys(props.dayKey, 1), 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 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;
+      }
+    })
+  })), _$escape(_$createComponent(TimeOverlays, {
+    view: view,
+    get dayKey() {
+      return props.dayKey;
+    },
+    get expanded() {
+      return expanded();
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => props.hover()?.key === props.dayKey)() && props.hover();
+    },
+    children: current => _$ssr(_tmpl$19, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), expanded(), current().minute)), true)), _$escape(view.clock(current().minute)))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(nowMinute() !== null && nowMinute() >= 0))() && nowMinute() < (expanded() ? DAY_MINUTES : wake());
+    },
+    get children() {
+      return _$ssr(_tmpl$9, _$ssrStyleProperty("top:", _$escape(termsCss(dayYTerms(wake(), expanded(), nowMinute())), true)), _$escape(view.clock(nowMinute())));
+    }
+  })));
+};
+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 _$ssr(_tmpl$20, _$ssrAttribute("data-calendar-keys", _$escape(props.keys.join(","), true), false), _$ssrAttribute("data-past", last() < view.nowKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-labelledby", _$escape(headingId, true), false), _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(title()), _$escape(_$createComponent(For, {
+    get each() {
+      return props.keys.filter(key => view.props.owner.dayBadges?.[key]);
+    },
+    children: key => {
+      const badge = view.props.owner.dayBadges[key];
+      return _$ssr(_tmpl$22, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.keys.length > 1;
+        },
+        get children() {
+          return _$ssr(_tmpl$21, _$escape(shortDay(view, key).split(/[\s,.]/)[0]));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return badge.icon;
+        },
+        children: icon => _$ssr(_tmpl$10, `ti ti-${_$escape(icon(), true)}`)
+      })), _$escape(badge.label));
+    }
+  })), props.keys.length > 1 ? _$escape(view.messages().calendarDayCount({
+    count: props.keys.length
+  })) : "", _$escape(view.messages().calendarNothingPlannedShort), _$escape(view.messages().calendarUnfoldDays({
+    count: props.keys.length
+  })));
+};
+//# sourceMappingURL=CalendarDayView.js.map