@k2b/ui 0.22.0 → 0.24.0

package/dist/browser/content/calendar-time-view.js

@@ -0,0 +1,1654 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<svg viewBox="0 0 16 16"aria-hidden=true><rect x=1.75 y=1.75 width=12.5 height=12.5 rx=3.5></rect><path d="M4.6 8.3l2.3 2.3 4.6-4.9">`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-check role=checkbox>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-check aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-calendar-band__fill aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-calendar-band__grip data-edge=start aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-calendar-band__grip data-edge=end aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-calendar-band><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-calendar-marker><span class=k2b-calendar-marker__line aria-hidden=true></span><span class=k2b-calendar-marker__pill><!$><!/><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-calendar-marker__time>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-gap__button><i class="ti ti-plus"aria-hidden=true></i><span class=k2b-calendar-gap__text>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-calendar-gap><span class=k2b-calendar-gap__zone aria-hidden=true></span><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-calendar-slot aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-calendar-draft><span class=k2b-calendar-draft__grip data-edge=start aria-hidden=true></span><button type=button class=k2b-calendar-draft__open><i class="ti ti-plus"aria-hidden=true></i><span><!$><!/>–<!$><!/> · <!$><!/></span></button><span class=k2b-calendar-draft__grip data-edge=end aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-calendar-ghost data-live=true aria-hidden=true><span class=k2b-calendar-ghost__title></span><span class=k2b-calendar-ghost__time></span><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-calendar-ghost__fit>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-popover popover=auto role=dialog data-kind=create>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-calendar-allday-chip><!$><!/><!$><!/>`);
+import { dates as calendar } from "@k2b/stdlib";
+import { createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { announce } from "../feedback/announce";
+import { addDayKeys, buildDays, clockAt, DAY_MINUTES, dayKeyOf, dayLanes, dayMinuteAt, dayTopTerms, dayYTerms, freeGaps, GAP_LABEL_MINUTES, GAP_LONG_MINUTES, gapProposal, instantInDay, instantsInDay, minuteInDay, readDayGeometry, resizedInDay, snapMinutes, subtractTerms, termsCss, wakeMinutes } from "./calendar-days";
+import { useCalendarMessages } from "./calendar-messages";
+import { startCalendarPointerSession } from "./calendar-pointer";
+import { EventChip, eventHref, ownerDateConfig, parseDate, placeCalendarPopover, validDate } from "./calendar-shared";
+
+/**
+ * Shared state and parts of the day and week views with `dayHours`: the time model of the loaded days, the selection,
+ * the quick create, pointer gestures, and the pieces both views draw into a day's timeline.
+ */
+
+/** What the header and the calendar's controller ask of the active day or week view. */
+
+const COLOR_TOKENS = {
+  blue: "#3b82f6",
+  emerald: "#10b981",
+  amber: "#f59e0b",
+  red: "#ef4444",
+  violet: "#8b5cf6",
+  cyan: "#06b6d4",
+  zinc: "#a1a1aa"
+};
+export const eventAccent = event => event.colorHex ?? COLOR_TOKENS[event.color ?? "blue"];
+
+/** Minimum minutes an overlap counts for a band, about the height of its title. */
+const LANE_MINUTES = 20;
+export const reducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+/** Swallows the click a browser sends right after a gesture ends, never the next one. */
+export const swallowNextClick = () => {
+  const stop = event => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  window.addEventListener("click", stop, {
+    capture: true,
+    once: true
+  });
+  window.setTimeout(() => window.removeEventListener("click", stop, {
+    capture: true
+  }), 120);
+};
+export const createTimeView = props => {
+  const messages = useCalendarMessages();
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const hours = () => props.hours;
+  const wake = createMemo(() => wakeMinutes(props.hours));
+  const keyOf = date => calendar.formatDateKey(date, dateConfig());
+  const parseKey = key => calendar.parseCalendarDate(key, dateConfig());
+
+  /** The loaded days: the host's range, or the day or the week of the date. */
+  const range = createMemo(() => {
+    const context = dateConfig();
+    const loaded = props.owner.range;
+    if (loaded) {
+      const from = parseDate(loaded.from, context);
+      const to = parseDate(loaded.to, context);
+      if (validDate(from) && validDate(to)) {
+        const first = calendar.formatDateKey(from, context);
+        const last = calendar.formatDateKey(new Date(Math.max(from.getTime(), to.getTime() - 1)), context);
+        return {
+          first,
+          last
+        };
+      }
+    }
+    const key = calendar.formatDateKey(props.date, context);
+    if (props.view === "day") return {
+      first: key,
+      last: key
+    };
+    const start = calendar.formatDateKey(calendar.startOfWeek(props.date, context), context);
+    return {
+      first: start,
+      last: addDayKeys(start, 6)
+    };
+  }, undefined, {
+    equals: (left, right) => left.first === right.first && left.last === right.last
+  });
+  const anchorKey = createMemo(() => keyOf(props.date));
+
+  /** Checkbox states the reader just set, shown until the host's events agree or drop the entry. */
+  const [checks, setChecks] = createSignal({});
+  const [justChecked, setJustChecked] = createSignal(new Set());
+  createEffect(on(() => props.events, events => {
+    const current = untrack(checks);
+    const ids = Object.keys(current);
+    if (ids.length === 0) return;
+    const next = {
+      ...current
+    };
+    for (const id of ids) {
+      const event = events.find(candidate => candidate.id === id);
+      if (!event || event.checked === current[id]) delete next[id];
+    }
+    setChecks(next);
+  }, {
+    defer: true
+  }));
+  const checkedOf = event => event.checked === undefined ? undefined : checks()[event.id] ?? event.checked;
+  /** What Space on an entry's chip does: check its box, where it has one the reader may change. */
+  const checkOf = event => checkedOf(event) !== undefined && props.owner.onEventCheck ? () => toggleCheck(event) : undefined;
+  const forgetJustChecked = id => setJustChecked(value => {
+    if (!value.has(id)) return value;
+    const rest = new Set(value);
+    rest.delete(id);
+    return rest;
+  });
+  /** Today's day for a moment after its last open to-do was checked off, which its heading celebrates. */
+  const [cheered, setCheered] = createSignal(null);
+  let cheerTimer = 0;
+  // The server renders the view too, and has no window.
+  onCleanup(() => clearTimeout(cheerTimer));
+  /** The entries with a checkbox on a day: its deadlines, the to-dos planned into its hours, and the ones due all day. */
+  const dueOn = key => {
+    const model = dayOf(key);
+    return [...model.markers.map(marker => marker.item), ...model.bands.map(band => band.item), ...model.spans.filter(span => span.marker && span.firstKey === key).map(span => span.item)].filter(item => item.checked !== undefined);
+  };
+  const toggleCheck = event => {
+    const current = checkedOf(event);
+    if (current === undefined || !props.owner.onEventCheck) return;
+    const next = !current;
+    setChecks(value => ({
+      ...value,
+      [event.id]: next
+    }));
+    if (next) {
+      setJustChecked(value => new Set([...value, event.id]));
+      window.setTimeout(() => forgetJustChecked(event.id), 1100);
+      const today = nowKey();
+      const due = dueOn(today);
+      if (due.includes(event) && due.every(item => checkedOf(item))) {
+        // The heading shows it only for a moment, so a screen reader hears it once instead.
+        announce(messages().calendarAllDone);
+        setCheered(today);
+        window.clearTimeout(cheerTimer);
+        cheerTimer = window.setTimeout(() => setCheered(null), 2200);
+      }
+    } else setCheered(null);
+    // A change the host refuses puts the box back as it was.
+    void Promise.resolve(props.owner.onEventCheck(event, next)).catch(() => {
+      forgetJustChecked(event.id);
+      if (next) setCheered(null);
+      setChecks(value => {
+        if (value[event.id] !== next) return value;
+        const rest = {
+          ...value
+        };
+        delete rest[event.id];
+        return rest;
+      });
+    });
+  };
+  const entries = createMemo(() => {
+    const context = dateConfig();
+    return props.events.flatMap(event => {
+      const start = parseDate(event.start, context);
+      if (!validDate(start)) return [];
+      const marker = event.display === "marker";
+      const parsedEnd = event.end ? parseDate(event.end, context) : null;
+      let end = parsedEnd && validDate(parsedEnd) && parsedEnd > start ? parsedEnd : null;
+      if (!end) end = event.allDay ? calendar.addDays(calendar.startOfDay(start, context), 1, context) : marker ? start : new Date(start.getTime() + 3_600_000);
+      return [{
+        item: event,
+        start,
+        end,
+        allDay: Boolean(event.allDay),
+        marker
+      }];
+    });
+  });
+  const days = createMemo(() => buildDays(range().first, range().last, entries(), props.hours, dateConfig()));
+  const emptyModel = key => ({
+    key,
+    bands: [],
+    markers: [],
+    spans: [],
+    night: false,
+    empty: true
+  });
+  const dayOf = key => days().get(key) ?? emptyModel(key);
+  const sourceOf = createMemo(() => new Map(entries().map(entry => [entry.item, entry])));
+
+  /** The day that holds now: before the start hour still the day before. */
+  const nowKey = createMemo(() => dayKeyOf(props.now, props.hours, dateConfig()));
+  const nowMinute = createMemo(() => minuteInDay(nowKey(), props.now, props.hours, dateConfig()));
+  /** Now as a minute of a day: past days lie wholly before it, coming days after. */
+  const nowIn = key => key === nowKey() ? nowMinute() : key < nowKey() ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+  const calendarToday = createMemo(() => keyOf(props.now));
+  const clock = minute => clockAt(minute, props.hours);
+  const duration = minutes => messages().calendarDuration({
+    minutes: Math.max(1, Math.round(minutes))
+  });
+  const instant = (key, minute) => instantInDay(key, minute, props.hours, dateConfig());
+  const slot = (key, start, end) => instantsInDay(key, start, end, props.hours, dateConfig());
+  const dayStartMinute = hour => Math.max(0, (hour - props.hours[0]) * 60);
+
+  /** A day's timed piece as the event chip reads it. */
+  const normalized = (event, key) => {
+    const source = sourceOf().get(event);
+    const start = source?.start ?? parseDate(event.start, dateConfig());
+    const end = source?.end ?? start;
+    return {
+      ...event,
+      startDate: start,
+      endDate: end,
+      sourceStartDate: start,
+      sourceEndDate: end,
+      dayKey: key
+    };
+  };
+  const [selection, setSelection] = createSignal(null);
+  const [touchDraft, setTouchDraft] = createSignal(null);
+  const [activeKey, setActiveKey] = createSignal(null);
+  const [ghost, setGhost] = createSignal(null);
+  const [movingId, setMovingId] = createSignal("");
+  const [dragging, setDragging] = createSignal("");
+  const [nightOverrides, setNightOverrides] = createSignal({});
+  const [quick, setQuick] = createSignal(null);
+  const rangeOfSelection = value => value.start === undefined || value.end === undefined ? {
+    start: parseKey(value.key),
+    end: calendar.addDays(parseKey(value.key), 1, dateConfig()),
+    allDay: true
+  } : {
+    ...slot(value.key, value.start, value.end),
+    allDay: false
+  };
+  createEffect(on(selection, value => props.owner.onSelectionChange?.(value ? rangeOfSelection(value) : null), {
+    defer: true
+  }));
+  onCleanup(() => {
+    if (untrack(selection)) props.owner.onSelectionChange?.(null);
+  });
+
+  // Body elements of the days on screen, for pointer positions.
+  const bodies = new Map();
+  const registerBody = (key, element, expanded) => {
+    bodies.set(key, {
+      element,
+      expanded
+    });
+    onCleanup(() => {
+      if (bodies.get(key)?.element === element) bodies.delete(key);
+    });
+  };
+  const bodyAt = (clientX, clientY) => {
+    for (const [key, body] of bodies) {
+      if (!body.element.isConnected) continue;
+      const rect = body.element.getBoundingClientRect();
+      if (clientX < rect.left || clientX >= rect.right || clientY < rect.top || clientY >= rect.bottom) continue;
+      const geometry = readDayGeometry(body.element, wake(), body.expanded());
+      return {
+        key,
+        element: body.element,
+        geometry,
+        minute: dayMinuteAt(geometry, clientY - rect.top)
+      };
+    }
+    return null;
+  };
+  const limitOf = key => bodies.get(key)?.expanded() ? DAY_MINUTES : wake();
+  const nightOpen = (key, model) => nightOverrides()[key] ?? model.night;
+  const setNight = (key, open) => setNightOverrides(value => ({
+    ...value,
+    [key]: open
+  }));
+
+  /** The gap under a minute while dragging, and whether `need` minutes fit it; the gap shows "fits" or how much is missing. */
+  const fitAt = (key, minute, need, span) => {
+    const gap = freeGaps(dayOf(key).bands, wake(), Number.NEGATIVE_INFINITY).find(candidate => minute >= candidate.start && minute < candidate.end);
+    if (!gap) return null;
+    const fits = gap.end - gap.start >= need;
+    if (fits && span && (span.start < gap.start || span.end > gap.end)) return null;
+    return {
+      gap,
+      fits,
+      text: fits ? messages().calendarFits : messages().calendarTooShort({
+        duration: duration(need - (gap.end - gap.start))
+      })
+    };
+  };
+  const [gapHit, setGapHit] = createSignal(null);
+  const overlapAt = (key, start, end, except) => dayOf(key).bands.find(band => band.item.id !== except && band.start < end && band.end > start)?.item ?? null;
+  const openQuickCreate = (key, start, end, anchor, create) => {
+    const range = rangeOfSelection({
+      key,
+      start,
+      end
+    });
+    setTouchDraft(null);
+    if (!props.owner.renderQuickCreate) {
+      props.owner.onSlotActivate?.(range);
+      return;
+    }
+    setSelection({
+      key,
+      start,
+      end
+    });
+    setQuick({
+      range,
+      anchor,
+      create,
+      key,
+      start,
+      end
+    });
+  };
+  const canCreate = () => Boolean(props.owner.renderQuickCreate || props.owner.onSlotActivate);
+
+  /** The time a new entry takes: the selection, today's next full hour while today shows, else 09:00 of the first day. */
+  const createTarget = visible => {
+    const current = selection();
+    if (current && current.start !== undefined && current.end !== undefined) return {
+      key: current.key,
+      start: current.start,
+      end: current.end
+    };
+    const nine = dayStartMinute(9);
+    const nextHour = key => {
+      const minute = Math.ceil((nowMinute() + 1) / 60) * 60;
+      return key === nowKey() ? minute <= wake() - 60 ? minute : null : nine;
+    };
+    let key;
+    let start;
+    if (current) {
+      key = current.key;
+      start = key === nowKey() ? nextHour(key) : nine;
+    } else if (nowKey() >= visible.first && nowKey() <= visible.last) {
+      key = nowKey();
+      start = nextHour(key);
+    } else {
+      key = visible.first;
+      start = nine;
+    }
+    if (start === null) {
+      key = addDayKeys(key, 1);
+      start = nine;
+    }
+    return {
+      key,
+      start,
+      end: start + 60
+    };
+  };
+
+  // Pointer gestures: moving and resizing bands and markers, drawing a new event, and dragging entries in.
+  let cancelGesture;
+  onCleanup(() => cancelGesture?.());
+  const step = event => event.shiftKey ? 5 : 15;
+  const shiftHeld = {
+    current: false
+  };
+  const trackShift = event => {
+    shiftHeld.current = event.shiftKey;
+  };
+  onMount(() => {
+    window.addEventListener("keydown", trackShift, true);
+    window.addEventListener("keyup", trackShift, true);
+    onCleanup(() => {
+      window.removeEventListener("keydown", trackShift, true);
+      window.removeEventListener("keyup", trackShift, true);
+    });
+  });
+  const endGesture = () => {
+    setGhost(null);
+    setGapHit(null);
+    setMovingId("");
+    setDragging("");
+  };
+  const startMove = (pointerEvent, event, key, start, end, scroller) => {
+    const marker = event.display === "marker";
+    if (!props.owner.onEventDrop) return;
+    const body = bodies.get(key);
+    if (!body) return;
+    const rect = body.element.getBoundingClientRect();
+    const geometry = readDayGeometry(body.element, wake(), body.expanded());
+    const grab = dayMinuteAt(geometry, pointerEvent.clientY - rect.top) - start;
+    const length = end - start;
+    cancelGesture?.();
+    cancelGesture = startCalendarPointerSession({
+      event: pointerEvent,
+      scrollContainer: scroller,
+      resolve: (clientX, clientY) => {
+        const hit = bodyAt(clientX, clientY);
+        if (!hit) return null;
+        const limit = limitOf(hit.key);
+        const from = Math.max(0, Math.min(limit - Math.max(length, 15), snapMinutes(hit.minute - grab, step({
+          shiftKey: shiftHeld.current
+        }))));
+        return {
+          key: hit.key,
+          start: from,
+          end: from + length
+        };
+      },
+      onActivate: () => {
+        setMovingId(event.id);
+        setDragging("move");
+        setSelection(null);
+      },
+      onPreview: next => {
+        const clash = marker ? null : overlapAt(next.key, next.start, next.end, event.id);
+        const fit = marker ? null : fitAt(next.key, next.start + (next.end - next.start) / 2, next.end - next.start, next);
+        setGapHit(fit ? {
+          key: next.key,
+          start: fit.gap.start,
+          fits: fit.fits,
+          text: fit.text
+        } : null);
+        const time = marker ? messages().calendarDue({
+          time: clock(next.start)
+        }) : `${clock(next.start)}–${clock(next.end)} · ${duration(next.end - next.start)}`;
+        setGhost({
+          key: next.key,
+          start: next.start,
+          end: marker ? next.start + 20 : next.end,
+          title: event.title,
+          time: clash ? `${time} · ${messages().calendarOverlaps({
+            title: clash.title
+          })}` : time,
+          colorHex: eventAccent(event),
+          warn: Boolean(clash),
+          fit: fit ? {
+            fits: fit.fits,
+            text: fit.text
+          } : undefined
+        });
+      },
+      onCommit: next => {
+        endGesture();
+        swallowNextClick();
+        if (next.key === key && next.start === start && next.end === end) return;
+        const source = sourceOf().get(event);
+        // A moved entry keeps its real length, also when it lands across a clock change.
+        const startDate = instant(next.key, next.start);
+        const endDate = marker ? startDate : source ? new Date(startDate.getTime() + source.end.getTime() - source.start.getTime()) : slot(next.key, next.start, next.end).end;
+        if (source && source.start.getTime() === startDate.getTime() && source.end.getTime() === endDate.getTime()) return;
+        props.owner.onEventDrop?.(event, {
+          start: startDate,
+          end: endDate,
+          allDay: false
+        });
+      },
+      onCancel: endGesture
+    });
+  };
+  const startResize = (pointerEvent, event, key, start, end, edge, scroller) => {
+    if (!props.owner.onEventResize) return;
+    pointerEvent.preventDefault();
+    pointerEvent.stopPropagation();
+    const body = bodies.get(key);
+    if (!body) return;
+    cancelGesture?.();
+    cancelGesture = startCalendarPointerSession({
+      event: pointerEvent,
+      scrollContainer: scroller,
+      threshold: 1,
+      resolve: (_clientX, clientY) => {
+        const rect = body.element.getBoundingClientRect();
+        const geometry = readDayGeometry(body.element, wake(), body.expanded());
+        const minute = snapMinutes(dayMinuteAt(geometry, clientY - rect.top), step({
+          shiftKey: shiftHeld.current
+        }));
+        const limit = limitOf(key);
+        const size = step({
+          shiftKey: shiftHeld.current
+        });
+        return edge === "end" ? {
+          start,
+          end: Math.max(start + size, Math.min(limit, minute))
+        } : {
+          start: Math.max(0, Math.min(end - size, minute)),
+          end
+        };
+      },
+      onActivate: () => {
+        setMovingId(event.id);
+        setDragging(edge);
+      },
+      onPreview: next => setGhost({
+        key,
+        start: next.start,
+        end: next.end,
+        title: event.title,
+        time: `${clock(next.start)}–${clock(next.end)} · ${duration(next.end - next.start)}`,
+        colorHex: eventAccent(event)
+      }),
+      onCommit: next => {
+        endGesture();
+        swallowNextClick();
+        if (next.start === start && next.end === end) return;
+        const source = sourceOf().get(event);
+        const range = source ? resizedInDay(source, edge, key, next, props.hours, dateConfig()) : slot(key, next.start, next.end);
+        props.owner.onEventResize?.(event, {
+          ...range,
+          allDay: false
+        });
+      },
+      onCancel: endGesture
+    });
+  };
+
+  /** Drawing on free time: a new event with its live length, on a 15-minute grid, with Shift on 5 minutes. */
+  const startDraw = (pointerEvent, key, scroller) => {
+    if (!canCreate() || pointerEvent.pointerType !== "mouse") return;
+    const body = bodies.get(key);
+    if (!body) return;
+    const minuteAt = clientY => {
+      const rect = body.element.getBoundingClientRect();
+      const geometry = readDayGeometry(body.element, wake(), body.expanded());
+      return Math.max(0, Math.min(limitOf(key), dayMinuteAt(geometry, clientY - rect.top)));
+    };
+    const origin = minuteAt(pointerEvent.clientY);
+    cancelGesture?.();
+    cancelGesture = startCalendarPointerSession({
+      event: pointerEvent,
+      scrollContainer: scroller,
+      resolve: (_clientX, clientY) => {
+        const size = step({
+          shiftKey: shiftHeld.current
+        });
+        const minute = minuteAt(clientY);
+        const from = Math.floor(Math.min(origin, minute) / size) * size;
+        let to = Math.ceil(Math.max(origin, minute) / size) * size;
+        if (to - from < size) to = from + size;
+        return {
+          start: from,
+          end: Math.min(to, limitOf(key))
+        };
+      },
+      onActivate: () => {
+        setDragging("draw");
+        setSelection(null);
+        setTouchDraft(null);
+      },
+      onPreview: next => setGhost({
+        key,
+        start: next.start,
+        end: next.end,
+        title: messages().calendarNewEvent,
+        time: `${clock(next.start)}–${clock(next.end)} · ${duration(next.end - next.start)}`
+      }),
+      onCommit: next => {
+        const anchor = document.querySelector(".k2b-calendar-ghost[data-live]")?.getBoundingClientRect() ?? body.element;
+        endGesture();
+        swallowNextClick();
+        openQuickCreate(key, next.start, next.end, anchor);
+      },
+      onCancel: endGesture
+    });
+  };
+
+  /** Follows a pointer that pressed an entry outside the calendar into its free time. */
+  const dragIn = (pointerEvent, item, onDrop, scroller) => {
+    if (pointerEvent.button !== 0 || !pointerEvent.isPrimary) return;
+    cancelGesture?.();
+    cancelGesture = undefined;
+    const length = Math.max(15, Math.round(item.minutes));
+    const color = item.colorHex ?? COLOR_TOKENS[item.color ?? "blue"];
+    let token;
+    let spring;
+    const target = pointerEvent.target instanceof HTMLElement ? pointerEvent.target.closest("li, [data-calendar-drag-source]") : null;
+    let held = false;
+    let cleaned = false;
+    const preventContextMenu = event => event.preventDefault();
+    const preventScroll = event => {
+      if (held) event.preventDefault();
+    };
+    const cleanup = () => {
+      if (cleaned) return;
+      cleaned = true;
+      document.removeEventListener("touchmove", preventScroll);
+      window.removeEventListener("contextmenu", preventContextMenu, true);
+      if (pointerEvent.pointerType === "touch") held = false;
+      if (target) delete target.dataset.lifted;
+      token?.remove();
+      token = undefined;
+      if (spring) window.clearTimeout(spring.timer);
+      spring = undefined;
+      endGesture();
+    };
+    const begin = () => {
+      cancelGesture = startCalendarPointerSession({
+        event: pointerEvent,
+        scrollContainer: scroller,
+        armAutoScroll: true,
+        threshold: held && pointerEvent.pointerType !== "mouse" ? 1 : 6,
+        resolve: (clientX, clientY) => {
+          const hit = bodyAt(clientX, clientY);
+          if (!hit || hit.minute >= limitOf(hit.key)) return {
+            key: "",
+            start: 0,
+            end: 0,
+            clash: null
+          };
+          const fit = fitAt(hit.key, hit.minute, length);
+          let start = snapMinutes(hit.minute - length / 2, 15);
+          if (fit?.fits) start = Math.max(fit.gap.start, Math.min(fit.gap.end - length, start));
+          start = Math.max(0, Math.min(limitOf(hit.key) - length, start));
+          return {
+            key: hit.key,
+            start,
+            end: start + length,
+            clash: overlapAt(hit.key, start, start + length),
+            fit
+          };
+        },
+        onActivate: () => {
+          setDragging("external");
+          setSelection(null);
+          token = document.createElement("div");
+          token.className = "k2b-calendar-token";
+          token.textContent = item.title;
+          token.style.setProperty("--k2b-calendar-accent", color);
+          token.setAttribute("aria-hidden", "true");
+          document.body.append(token);
+        },
+        onMove: (clientX, clientY) => {
+          if (token) token.style.transform = `translate(${clientX + 12}px, ${clientY + 10}px)`;
+          // A folded run of empty days opens when the entry rests on it.
+          const empty = document.elementFromPoint(clientX, clientY)?.closest("[data-calendar-unfold]");
+          if (empty && spring?.element !== empty) {
+            if (spring) window.clearTimeout(spring.timer);
+            spring = {
+              element: empty,
+              timer: window.setTimeout(() => empty.click(), 650)
+            };
+          } else if (!empty && spring) {
+            window.clearTimeout(spring.timer);
+            spring = undefined;
+          }
+        },
+        onPreview: next => {
+          if (token) token.dataset.hidden = next.key ? "true" : "false";
+          if (!next.key) {
+            setGhost(null);
+            setGapHit(null);
+            return;
+          }
+          setGapHit(next.fit ? {
+            key: next.key,
+            start: next.fit.gap.start,
+            fits: next.fit.fits,
+            text: next.fit.text
+          } : null);
+          const time = `${clock(next.start)}–${clock(next.end)} · ${duration(length)}`;
+          setGhost({
+            key: next.key,
+            start: next.start,
+            end: next.end,
+            title: item.title,
+            time: next.clash ? `${time} · ${messages().calendarOverlaps({
+              title: next.clash.title
+            })}` : time,
+            colorHex: color,
+            warn: Boolean(next.clash),
+            fit: next.fit ? {
+              fits: next.fit.fits,
+              text: next.fit.text
+            } : undefined
+          });
+        },
+        onCommit: next => {
+          swallowNextClick();
+          if (next.key) onDrop({
+            ...slot(next.key, next.start, next.end),
+            allDay: false
+          });
+        },
+        onEnd: cleanup
+      });
+    };
+    if (pointerEvent.pointerType === "mouse") {
+      begin();
+      return;
+    }
+    // A finger first holds the entry still, so a short swipe keeps scrolling the list it sits in.
+    const origin = {
+      x: pointerEvent.clientX,
+      y: pointerEvent.clientY
+    };
+    const abort = () => {
+      window.clearTimeout(timer);
+      window.removeEventListener("pointermove", watch);
+      window.removeEventListener("pointerup", abort);
+      window.removeEventListener("pointercancel", abort);
+      window.removeEventListener("contextmenu", preventContextMenu, true);
+      if (target) delete target.dataset.lifted;
+      if (cancelGesture === abort) cancelGesture = undefined;
+    };
+    const watch = event => {
+      if (event.pointerId === pointerEvent.pointerId && Math.hypot(event.clientX - origin.x, event.clientY - origin.y) > 10) abort();
+    };
+    const timer = window.setTimeout(() => {
+      abort();
+      held = true;
+      if (target) target.dataset.lifted = "true";
+      navigator.vibrate?.(8);
+      document.addEventListener("touchmove", preventScroll, {
+        passive: false
+      });
+      window.addEventListener("contextmenu", preventContextMenu, true);
+      begin();
+    }, 420);
+    window.addEventListener("pointermove", watch);
+    window.addEventListener("pointerup", abort);
+    window.addEventListener("pointercancel", abort);
+    window.addEventListener("contextmenu", preventContextMenu, true);
+    cancelGesture = abort;
+  };
+  return {
+    props,
+    messages,
+    dateConfig,
+    hours,
+    wake,
+    range,
+    anchorKey,
+    days,
+    dayOf,
+    keyOf,
+    parseKey,
+    nowKey,
+    nowMinute,
+    nowIn,
+    calendarToday,
+    clock,
+    duration,
+    instant,
+    normalized,
+    checkedOf,
+    toggleCheck,
+    checkOf,
+    justChecked,
+    cheered,
+    selection,
+    setSelection,
+    touchDraft,
+    setTouchDraft,
+    activeKey,
+    setActiveKey,
+    ghost,
+    gapHit,
+    movingId,
+    dragging,
+    nightOpen,
+    setNight,
+    quick,
+    setQuick,
+    openQuickCreate,
+    canCreate,
+    createTarget,
+    rangeOfSelection,
+    registerBody,
+    bodyAt,
+    limitOf,
+    startMove,
+    startResize,
+    startDraw,
+    dragIn,
+    dayStartMinute
+  };
+};
+/**
+ * German short dates read "Fr 9. Okt", without the dots of the abbreviations; with `comma`, a title such as
+ * "Fr, 9. Okt 2026" keeps the comma after the day.
+ */
+export const compactGermanDate = (text, locale, comma = false) => locale?.startsWith("de") ? text.replace(comma ? /\b(Mo|Di|Mi|Do|Fr|Sa|So)\./g : /\b(Mo|Di|Mi|Do|Fr|Sa|So)\.,?/g, "$1").replace(/\b(Jan|Feb|Mär|Apr|Jun|Jul|Aug|Sep|Sept|Okt|Nov|Dez)\./g, "$1") : text;
+
+/** A short day such as "Fri 9" or "Fr 9.", in the calendar's locale. */
+export const shortDay = (view, key, withMonth = false) => compactGermanDate(view.parseKey(key).toLocaleDateString(view.dateConfig().locale ?? "en", {
+  weekday: "short",
+  day: "numeric",
+  ...(withMonth ? {
+    month: "short"
+  } : {}),
+  timeZone: view.dateConfig().timeZone
+}), view.dateConfig().locale);
+
+/** A long day such as "Friday, October 9", with the year when it is not this year's. */
+export const longDay = (view, key) => view.parseKey(key).toLocaleDateString(view.dateConfig().locale ?? "en", {
+  weekday: "long",
+  month: "long",
+  day: "numeric",
+  ...(key.slice(0, 4) !== view.calendarToday().slice(0, 4) ? {
+    year: "numeric"
+  } : {}),
+  timeZone: view.dateConfig().timeZone
+});
+const CHECK_PATH = "M4.6 8.3l2.3 2.3 4.6-4.9";
+
+/** A to-do's checkbox: it draws its check, and the title beside it strikes through. */
+export const TimeCheck = props => {
+  const checked = () => props.view.checkedOf(props.event) ?? false;
+  const box = (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    return _el$;
+  })();
+  return _$createComponent(Show, {
+    get when() {
+      return props.view.props.owner.onEventCheck;
+    },
+    get fallback() {
+      return (() => {
+        var _el$5 = _$getNextElement(_tmpl$3);
+        _$insert(_el$5, box);
+        _$effect(() => _$setAttribute(_el$5, "data-checked", checked() ? "true" : undefined));
+        return _el$5;
+      })();
+    },
+    get children() {
+      var _el$4 = _$getNextElement(_tmpl$2);
+      _el$4.$$click = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        props.view.toggleCheck(props.event);
+      };
+      _el$4.$$pointerdown = event => event.stopPropagation();
+      _$insert(_el$4, box);
+      _$effect(_p$ => {
+        var _v$ = checked() ? "true" : "false",
+          _v$2 = props.view.messages().calendarDone({
+            title: props.event.title
+          }),
+          _v$3 = props.tabIndex,
+          _v$4 = checked() ? "true" : undefined,
+          _v$5 = props.view.justChecked().has(props.event.id) ? "true" : undefined;
+        _v$ !== _p$.e && _$setAttribute(_el$4, "aria-checked", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$4, "aria-label", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$4, "tabindex", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$4, "data-checked", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute(_el$4, "data-just-checked", _p$.i = _v$5);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      _$runHydrationEvents();
+      return _el$4;
+    }
+  });
+};
+
+/** A timed entry in a day's timeline: a band as long as the entry, side by side with overlapping ones. */
+export const TimeBand = props => {
+  const view = props.view;
+  const event = () => props.band.item;
+  const wake = () => view.wake();
+  const limit = () => props.expanded ? DAY_MINUTES : wake();
+  const visibleStart = () => Math.max(0, props.band.start);
+  const visibleEnd = () => Math.min(limit(), props.band.end);
+  const top = () => dayTopTerms(wake(), props.expanded, visibleStart());
+  const bottom = () => dayYTerms(wake(), props.expanded, visibleEnd());
+  const now = () => view.nowIn(props.dayKey);
+  const running = () => now() >= props.band.start && now() < props.band.end && Number.isFinite(now());
+  const past = () => now() >= props.band.end;
+  const length = () => props.band.end - props.band.start;
+  const pixels = () => length() / 60 * props.hourPx - 2;
+  const size = () => pixels() < 27 ? "xs" : pixels() < 40 ? "s" : "m";
+  const checked = () => view.checkedOf(event());
+  const remaining = () => running() ? view.messages().calendarRemaining({
+    duration: view.duration(props.band.end - now())
+  }) : undefined;
+  const lines = () => Math.max(1, Math.floor((pixels() - 24) / 15));
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$7),
+      _el$0 = _el$6.firstChild,
+      [_el$1, _co$] = _$getNextMarker(_el$0.nextSibling),
+      _el$10 = _el$1.nextSibling,
+      [_el$11, _co$2] = _$getNextMarker(_el$10.nextSibling),
+      _el$12 = _el$11.nextSibling,
+      [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = _$getNextMarker(_el$14.nextSibling);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return running();
+      },
+      get children() {
+        return _$getNextElement(_tmpl$4);
+      }
+    }), _el$1, _co$);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return checked() !== undefined;
+      },
+      get children() {
+        return _$createComponent(TimeCheck, {
+          view: view,
+          get event() {
+            return event();
+          },
+          get tabIndex() {
+            return props.tabIndex === undefined ? undefined : -1;
+          }
+        });
+      }
+    }), _el$11, _co$2);
+    _$insert(_el$6, _$createComponent(EventChip, {
+      get event() {
+        return view.normalized(event(), props.dayKey);
+      },
+      get owner() {
+        return view.props.owner;
+      },
+      get href() {
+        return eventHref(view.props.owner, event());
+      },
+      fill: true,
+      timeline: true,
+      get compact() {
+        return props.compact;
+      },
+      get timeLabel() {
+        return `${view.clock(props.band.start)}–${view.clock(props.band.end)}`;
+      },
+      get showLocation() {
+        return _$memo(() => !!(props.showLocation && size() === "m"))() && pixels() >= 64;
+      },
+      get remaining() {
+        return remaining();
+      },
+      get checkbox() {
+        return checked() !== undefined;
+      },
+      get onCheck() {
+        return view.checkOf(event());
+      },
+      get moving() {
+        return view.movingId() === event().id;
+      },
+      get tabIndex() {
+        return props.tabIndex;
+      },
+      get stop() {
+        return props.stop;
+      },
+      get onMovePointerDown() {
+        return view.props.owner.onEventDrop ? pointerEvent => view.startMove(pointerEvent, event(), props.dayKey, props.band.start, props.band.end, props.scroller?.()) : undefined;
+      }
+    }), _el$13, _co$3);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return view.props.owner.onEventResize;
+      },
+      get children() {
+        return [(() => {
+          var _el$8 = _$getNextElement(_tmpl$5);
+          _el$8.$$pointerdown = pointerEvent => view.startResize(pointerEvent, event(), props.dayKey, props.band.start, props.band.end, "start", props.scroller?.());
+          _$runHydrationEvents();
+          return _el$8;
+        })(), _$createComponent(Show, {
+          get when() {
+            return props.band.end <= limit();
+          },
+          get children() {
+            var _el$9 = _$getNextElement(_tmpl$6);
+            _el$9.$$pointerdown = pointerEvent => view.startResize(pointerEvent, event(), props.dayKey, props.band.start, props.band.end, "end", props.scroller?.());
+            _$runHydrationEvents();
+            return _el$9;
+          }
+        })];
+      }
+    }), _el$15, _co$4);
+    _$effect(_p$ => {
+      var _v$6 = event().id,
+        _v$7 = size(),
+        _v$8 = past() ? "true" : undefined,
+        _v$9 = running() ? "true" : undefined,
+        _v$0 = checked() ? "true" : undefined,
+        _v$1 = checked() !== undefined ? "true" : undefined,
+        _v$10 = view.justChecked().has(event().id) ? "true" : undefined,
+        _v$11 = props.band.end > limit() ? "true" : undefined,
+        _v$12 = view.movingId() === event().id ? "true" : undefined,
+        _v$13 = event().display,
+        _v$14 = eventAccent(event()),
+        _v$15 = String(props.band.lane),
+        _v$16 = String(props.band.lanes),
+        _v$17 = String(lines()),
+        _v$18 = running() ? `${((now() - props.band.start) / length() * 100).toFixed(1)}%` : undefined,
+        _v$19 = `calc(${termsCss(top())} + 1px)`,
+        _v$20 = `max(var(--k2b-calendar-band-min), calc(${termsCss(subtractTerms(bottom(), top()))} - 2px))`;
+      _v$6 !== _p$.e && _$setAttribute(_el$6, "data-calendar-entry", _p$.e = _v$6);
+      _v$7 !== _p$.t && _$setAttribute(_el$6, "data-size", _p$.t = _v$7);
+      _v$8 !== _p$.a && _$setAttribute(_el$6, "data-past", _p$.a = _v$8);
+      _v$9 !== _p$.o && _$setAttribute(_el$6, "data-running", _p$.o = _v$9);
+      _v$0 !== _p$.i && _$setAttribute(_el$6, "data-checked", _p$.i = _v$0);
+      _v$1 !== _p$.n && _$setAttribute(_el$6, "data-checkbox", _p$.n = _v$1);
+      _v$10 !== _p$.s && _$setAttribute(_el$6, "data-just-checked", _p$.s = _v$10);
+      _v$11 !== _p$.h && _$setAttribute(_el$6, "data-cut-bottom", _p$.h = _v$11);
+      _v$12 !== _p$.r && _$setAttribute(_el$6, "data-moving", _p$.r = _v$12);
+      _v$13 !== _p$.d && _$setAttribute(_el$6, "data-display", _p$.d = _v$13);
+      _v$14 !== _p$.l && _$setStyleProperty(_el$6, "--k2b-calendar-accent", _p$.l = _v$14);
+      _v$15 !== _p$.u && _$setStyleProperty(_el$6, "--k2b-calendar-lane", _p$.u = _v$15);
+      _v$16 !== _p$.c && _$setStyleProperty(_el$6, "--k2b-calendar-lanes", _p$.c = _v$16);
+      _v$17 !== _p$.w && _$setStyleProperty(_el$6, "--k2b-calendar-lines", _p$.w = _v$17);
+      _v$18 !== _p$.m && _$setStyleProperty(_el$6, "--k2b-calendar-progress", _p$.m = _v$18);
+      _v$19 !== _p$.f && _$setStyleProperty(_el$6, "top", _p$.f = _v$19);
+      _v$20 !== _p$.y && _$setStyleProperty(_el$6, "height", _p$.y = _v$20);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined,
+      w: undefined,
+      m: undefined,
+      f: undefined,
+      y: undefined
+    });
+    return _el$6;
+  })();
+};
+
+/** A point in time such as a deadline: a dashed line across the day and a pill with its checkbox and title. */
+export const TimeMarker = props => {
+  const view = props.view;
+  const checked = () => view.checkedOf(props.event);
+  const past = () => view.nowIn(props.dayKey) >= props.minute;
+  return (() => {
+    var _el$16 = _$getNextElement(_tmpl$8),
+      _el$17 = _el$16.firstChild,
+      _el$18 = _el$17.nextSibling,
+      _el$19 = _el$18.firstChild,
+      [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
+      _el$21 = _el$20.nextSibling,
+      [_el$22, _co$6] = _$getNextMarker(_el$21.nextSibling);
+    _$insert(_el$18, _$createComponent(Show, {
+      get when() {
+        return checked() !== undefined;
+      },
+      get children() {
+        return _$createComponent(TimeCheck, {
+          view: view,
+          get event() {
+            return props.event;
+          },
+          get tabIndex() {
+            return props.tabIndex === undefined ? undefined : -1;
+          }
+        });
+      }
+    }), _el$20, _co$5);
+    _$insert(_el$18, _$createComponent(EventChip, {
+      get event() {
+        return view.normalized(props.event, props.dayKey);
+      },
+      get owner() {
+        return view.props.owner;
+      },
+      get href() {
+        return eventHref(view.props.owner, props.event);
+      },
+      compact: true,
+      timeline: true,
+      get checkbox() {
+        return checked() !== undefined;
+      },
+      get onCheck() {
+        return view.checkOf(props.event);
+      },
+      get tabIndex() {
+        return props.tabIndex;
+      },
+      get stop() {
+        return props.stop;
+      },
+      get trailing() {
+        return _$createComponent(Show, {
+          get when() {
+            return props.showTime;
+          },
+          get children() {
+            var _el$23 = _$getNextElement(_tmpl$9);
+            _$insert(_el$23, () => view.clock(props.minute));
+            return _el$23;
+          }
+        });
+      },
+      get onMovePointerDown() {
+        return view.props.owner.onEventDrop ? pointerEvent => view.startMove(pointerEvent, props.event, props.dayKey, props.minute, props.minute, props.scroller?.()) : undefined;
+      }
+    }), _el$22, _co$6);
+    _$effect(_p$ => {
+      var _v$21 = props.event.id,
+        _v$22 = past() ? "true" : undefined,
+        _v$23 = past() && checked() === false ? "true" : undefined,
+        _v$24 = checked() ? "true" : undefined,
+        _v$25 = view.justChecked().has(props.event.id) ? "true" : undefined,
+        _v$26 = props.above ? "true" : undefined,
+        _v$27 = view.movingId() === props.event.id ? "true" : undefined,
+        _v$28 = eventAccent(props.event),
+        _v$29 = String(props.lane),
+        _v$30 = String(props.lanes),
+        _v$31 = termsCss(dayTopTerms(view.wake(), props.expanded, props.minute));
+      _v$21 !== _p$.e && _$setAttribute(_el$16, "data-calendar-entry", _p$.e = _v$21);
+      _v$22 !== _p$.t && _$setAttribute(_el$16, "data-past", _p$.t = _v$22);
+      _v$23 !== _p$.a && _$setAttribute(_el$16, "data-overdue", _p$.a = _v$23);
+      _v$24 !== _p$.o && _$setAttribute(_el$16, "data-checked", _p$.o = _v$24);
+      _v$25 !== _p$.i && _$setAttribute(_el$16, "data-just-checked", _p$.i = _v$25);
+      _v$26 !== _p$.n && _$setAttribute(_el$16, "data-above", _p$.n = _v$26);
+      _v$27 !== _p$.s && _$setAttribute(_el$16, "data-moving", _p$.s = _v$27);
+      _v$28 !== _p$.h && _$setStyleProperty(_el$16, "--k2b-calendar-accent", _p$.h = _v$28);
+      _v$29 !== _p$.r && _$setStyleProperty(_el$16, "--k2b-calendar-marker-lane", _p$.r = _v$29);
+      _v$30 !== _p$.d && _$setStyleProperty(_el$16, "--k2b-calendar-marker-lanes", _p$.d = _v$30);
+      _v$31 !== _p$.l && _$setStyleProperty(_el$16, "top", _p$.l = _v$31);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined
+    });
+    return _el$16;
+  })();
+};
+
+/** Free time between entries, labelled from an hour on; activating it creates there. */
+export const TimeGap = props => {
+  const view = props.view;
+  const length = () => props.gap.end - props.gap.start;
+  const proposal = () => gapProposal(props.gap, view.hours());
+  const label = () => view.messages().calendarFree({
+    duration: view.duration(length())
+  });
+  const hit = () => {
+    const current = view.gapHit();
+    return current && current.key === props.dayKey && current.start === props.gap.start ? current : null;
+  };
+  const top = () => dayYTerms(view.wake(), props.expanded, props.gap.start);
+  /**
+   * Shorter free time is hidden until something is dragged into it, and past free time has no label, so neither is a
+   * keyboard stop.
+   */
+  const labelled = () => length() >= GAP_LABEL_MINUTES;
+  const stop = () => labelled() && !props.gap.past ? props.stop : undefined;
+  return (() => {
+    var _el$24 = _$getNextElement(_tmpl$1),
+      _el$25 = _el$24.firstChild,
+      _el$29 = _el$25.nextSibling,
+      [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling);
+    _$insert(_el$24, _$createComponent(Show, {
+      get when() {
+        return view.canCreate();
+      },
+      get children() {
+        var _el$26 = _$getNextElement(_tmpl$0),
+          _el$27 = _el$26.firstChild,
+          _el$28 = _el$27.nextSibling;
+        _el$26.$$click = event => {
+          event.stopPropagation();
+          view.openQuickCreate(props.dayKey, proposal()[0], proposal()[1], event.currentTarget);
+        };
+        _$insert(_el$28, (() => {
+          var _c$ = _$memo(() => !!hit());
+          return () => _c$() ? hit().text : label();
+        })());
+        _$effect(_p$ => {
+          var _v$32 = labelled() ? props.tabIndex ?? (props.gap.past ? -1 : 0) : -1,
+            _v$33 = stop()?.id,
+            _v$34 = stop()?.column,
+            _v$35 = stop()?.minute,
+            _v$36 = view.messages().calendarFreeAction({
+              duration: view.duration(length()),
+              from: view.clock(props.gap.start),
+              to: view.clock(props.gap.end),
+              start: view.clock(proposal()[0]),
+              end: view.clock(proposal()[1])
+            }),
+            _v$37 = view.messages().calendarCreateAt({
+              start: view.clock(proposal()[0]),
+              end: view.clock(proposal()[1])
+            });
+          _v$32 !== _p$.e && _$setAttribute(_el$26, "tabindex", _p$.e = _v$32);
+          _v$33 !== _p$.t && _$setAttribute(_el$26, "data-stop", _p$.t = _v$33);
+          _v$34 !== _p$.a && _$setAttribute(_el$26, "data-col", _p$.a = _v$34);
+          _v$35 !== _p$.o && _$setAttribute(_el$26, "data-minute", _p$.o = _v$35);
+          _v$36 !== _p$.i && _$setAttribute(_el$26, "aria-label", _p$.i = _v$36);
+          _v$37 !== _p$.n && _$setAttribute(_el$26, "title", _p$.n = _v$37);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined
+        });
+        _$runHydrationEvents();
+        return _el$26;
+      }
+    }), _el$30, _co$7);
+    _$effect(_p$ => {
+      var _v$38 = labelled() ? undefined : "true",
+        _v$39 = length() >= GAP_LONG_MINUTES ? "true" : undefined,
+        _v$40 = props.gap.past ? "true" : undefined,
+        _v$41 = props.aside ? "true" : undefined,
+        _v$42 = hit() ? hit().fits ? "fit" : "short" : undefined,
+        _v$43 = termsCss(top()),
+        _v$44 = termsCss(subtractTerms(dayYTerms(view.wake(), props.expanded, props.gap.end), top()));
+      _v$38 !== _p$.e && _$setAttribute(_el$24, "data-short", _p$.e = _v$38);
+      _v$39 !== _p$.t && _$setAttribute(_el$24, "data-long", _p$.t = _v$39);
+      _v$40 !== _p$.a && _$setAttribute(_el$24, "data-past", _p$.a = _v$40);
+      _v$41 !== _p$.o && _$setAttribute(_el$24, "data-aside", _p$.o = _v$41);
+      _v$42 !== _p$.i && _$setAttribute(_el$24, "data-hit", _p$.i = _v$42);
+      _v$43 !== _p$.n && _$setStyleProperty(_el$24, "top", _p$.n = _v$43);
+      _v$44 !== _p$.s && _$setStyleProperty(_el$24, "height", _p$.s = _v$44);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
+    });
+    return _el$24;
+  })();
+};
+
+/** The preview of a drag, a draw, or an entry dragged in, and the selected slot. */
+export const TimeOverlays = props => {
+  const view = props.view;
+  const ghost = () => {
+    const current = view.ghost();
+    return current && current.key === props.dayKey ? current : null;
+  };
+  const selected = () => {
+    const current = view.selection();
+    return current && current.key === props.dayKey && current.start !== undefined && current.end !== undefined ? current : null;
+  };
+  const draft = () => {
+    const current = view.touchDraft();
+    return current && current.key === props.dayKey ? current : null;
+  };
+  const box = (start, end) => {
+    const top = dayTopTerms(view.wake(), props.expanded, start);
+    return {
+      top: termsCss(top),
+      height: termsCss(subtractTerms(dayYTerms(view.wake(), props.expanded, end), top))
+    };
+  };
+  return [_$createComponent(Show, {
+    get when() {
+      return selected();
+    },
+    children: slot => (() => {
+      var _el$31 = _$getNextElement(_tmpl$10);
+      _$effect(_$p => _$style(_el$31, box(slot().start, slot().end), _$p));
+      return _el$31;
+    })()
+  }), _$createComponent(Show, {
+    get when() {
+      return draft();
+    },
+    children: slot => (() => {
+      var _el$32 = _$getNextElement(_tmpl$11),
+        _el$33 = _el$32.firstChild,
+        _el$34 = _el$33.nextSibling,
+        _el$35 = _el$34.firstChild,
+        _el$36 = _el$35.nextSibling,
+        _el$39 = _el$36.firstChild,
+        [_el$40, _co$8] = _$getNextMarker(_el$39.nextSibling),
+        _el$37 = _el$40.nextSibling,
+        _el$41 = _el$37.nextSibling,
+        [_el$42, _co$9] = _$getNextMarker(_el$41.nextSibling),
+        _el$38 = _el$42.nextSibling,
+        _el$43 = _el$38.nextSibling,
+        [_el$44, _co$0] = _$getNextMarker(_el$43.nextSibling),
+        _el$45 = _el$34.nextSibling;
+      _el$33.$$pointerdown = event => startDraftResize(view, event, "start");
+      _el$34.$$click = event => view.openQuickCreate(slot().key, slot().start, slot().end, event.currentTarget);
+      _$insert(_el$36, () => view.clock(slot().start), _el$40, _co$8);
+      _$insert(_el$36, () => view.clock(slot().end), _el$42, _co$9);
+      _$insert(_el$36, () => view.duration(slot().end - slot().start), _el$44, _co$0);
+      _el$45.$$pointerdown = event => startDraftResize(view, event, "end");
+      _$effect(_p$ => {
+        var _v$45 = box(slot().start, slot().end),
+          _v$46 = view.messages().calendarCreateAt({
+            start: view.clock(slot().start),
+            end: view.clock(slot().end)
+          });
+        _p$.e = _$style(_el$32, _v$45, _p$.e);
+        _v$46 !== _p$.t && _$setAttribute(_el$34, "aria-label", _p$.t = _v$46);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      _$runHydrationEvents();
+      return _el$32;
+    })()
+  }), _$createComponent(Show, {
+    get when() {
+      return ghost();
+    },
+    children: current => (() => {
+      var _el$46 = _$getNextElement(_tmpl$12),
+        _el$47 = _el$46.firstChild,
+        _el$48 = _el$47.nextSibling,
+        _el$49 = _el$48.nextSibling,
+        [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling);
+      _$insert(_el$47, () => current().title);
+      _$insert(_el$48, () => current().time);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return current().fit;
+        },
+        children: fit => (() => {
+          var _el$51 = _$getNextElement(_tmpl$13);
+          _$insert(_el$51, () => fit().text);
+          _$effect(() => _$setAttribute(_el$51, "data-fit", fit().fits ? "fit" : "short"));
+          return _el$51;
+        })()
+      }), _el$50, _co$1);
+      _$effect(_p$ => {
+        var _v$47 = current().end - current().start < 40 ? "s" : "m",
+          _v$48 = current().warn ? "true" : undefined,
+          _v$49 = {
+            ...box(current().start, current().end),
+            "--k2b-calendar-accent": current().colorHex ?? "var(--k2b-action)"
+          };
+        _v$47 !== _p$.e && _$setAttribute(_el$46, "data-size", _p$.e = _v$47);
+        _v$48 !== _p$.t && _$setAttribute(_el$46, "data-warn", _p$.t = _v$48);
+        _p$.a = _$style(_el$46, _v$49, _p$.a);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      return _el$46;
+    })()
+  })];
+};
+
+/** The handles of a tapped slot change its start or end. */
+const startDraftResize = (view, pointerEvent, edge) => {
+  const draft = view.touchDraft();
+  if (!draft) return;
+  pointerEvent.preventDefault();
+  pointerEvent.stopPropagation();
+  startCalendarPointerSession({
+    event: pointerEvent,
+    threshold: 1,
+    resolve: (clientX, clientY) => {
+      const hit = view.bodyAt(clientX, clientY);
+      if (!hit || hit.key !== draft.key) return null;
+      const minute = snapMinutes(hit.minute, 15);
+      const current = view.touchDraft() ?? draft;
+      return edge === "end" ? {
+        ...current,
+        end: Math.max(current.start + 15, Math.min(view.limitOf(draft.key), minute))
+      } : {
+        ...current,
+        start: Math.max(0, Math.min(current.end - 15, minute))
+      };
+    },
+    onPreview: next => {
+      view.setTouchDraft(next);
+      view.setSelection({
+        key: next.key,
+        start: next.start,
+        end: next.end
+      });
+    },
+    onCommit: () => swallowNextClick()
+  });
+};
+
+/** Free time of a day with the gap of now trimmed, as both views draw it. */
+export const dayGaps = (view, key) => freeGaps(view.dayOf(key).bands, view.wake(), view.nowIn(key));
+
+/** The bands of a day with their lanes, cut to what its timeline draws. */
+export const dayBands = (view, key, expanded) => {
+  const limit = expanded ? DAY_MINUTES : view.wake();
+  const visible = view.dayOf(key).bands.filter(band => Math.min(limit, band.end) > Math.max(0, band.start));
+  return dayLanes(visible, LANE_MINUTES);
+};
+
+/** Entries the folded night hides, as chips with their time. */
+export const foldedEntries = (view, key) => {
+  const model = view.dayOf(key);
+  const wake = view.wake();
+  return [...model.bands.filter(band => band.end > wake).map(band => ({
+    event: band.item,
+    time: band.start >= wake ? view.clock(band.start) : view.messages().calendarUntil({
+      time: view.clock(band.end)
+    })
+  })), ...model.markers.filter(marker => marker.minute >= wake).map(marker => ({
+    event: marker.item,
+    time: view.clock(marker.minute)
+  }))];
+};
+
+/** The quick create at a slot or gap, as in the month view. */
+export const TimeQuickCreate = props => {
+  const view = props.view;
+  let element;
+  let returnFocus = null;
+  createEffect(() => {
+    const current = view.quick();
+    if (!element) return;
+    if (!current) {
+      if (element.matches(":popover-open")) element.hidePopover();
+      return;
+    }
+    returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (!element.matches(":popover-open")) element.showPopover();
+    queueMicrotask(() => {
+      if (view.quick() !== current || !element?.isConnected) return;
+      placeCalendarPopover(current.anchor, element);
+      element.querySelector("input,textarea,select,button,a[href],[tabindex]:not([tabindex='-1'])")?.focus();
+    });
+  });
+  /** Whether the focus is in the popover, or fell to the page as it hid: only then does a close return it. */
+  const focusInPopover = () => element?.contains(document.activeElement) || document.activeElement === document.body;
+  const close = restore => {
+    const current = view.quick();
+    if (!current) return;
+    const selection = view.selection();
+    view.setQuick(null);
+    // A late close must leave a newer selection in place.
+    if (selection?.key === current.key && selection.start === current.start && selection.end === current.end) view.setSelection(null);
+    if (restore && returnFocus?.isConnected) returnFocus.focus({
+      preventScroll: true
+    });
+  };
+  return (() => {
+    var _el$52 = _$getNextElement(_tmpl$14);
+    _el$52.addEventListener("toggle", event => {
+      if (event.newState !== "closed" || !view.quick() || event.currentTarget.matches(":popover-open")) return;
+      close(focusInPopover());
+    });
+    var _ref$ = element;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$52) : element = _el$52;
+    _$insert(_el$52, _$createComponent(Show, {
+      get when() {
+        return view.quick();
+      },
+      keyed: true,
+      children: value => view.props.owner.renderQuickCreate?.(value.range, {
+        create: value.create,
+        close: () => {
+          if (view.quick() === value) close(focusInPopover());
+        }
+      })
+    }));
+    _$effect(() => _$setAttribute(_el$52, "aria-label", view.messages().calendarQuickCreate));
+    return _el$52;
+  })();
+};
+
+/** All-day entries of a day as chips: bars with torn ends where they go on, and points due that day. */
+export const AllDayChips = props => {
+  const view = props.view;
+  return _$createComponent(For, {
+    get each() {
+      return props.spans;
+    },
+    children: span => {
+      const event = span.item;
+      const checked = () => view.checkedOf(event);
+      return (() => {
+        var _el$53 = _$getNextElement(_tmpl$15),
+          _el$54 = _el$53.firstChild,
+          [_el$55, _co$10] = _$getNextMarker(_el$54.nextSibling),
+          _el$56 = _el$55.nextSibling,
+          [_el$57, _co$11] = _$getNextMarker(_el$56.nextSibling);
+        _$insert(_el$53, _$createComponent(Show, {
+          get when() {
+            return checked() !== undefined;
+          },
+          get children() {
+            return _$createComponent(TimeCheck, {
+              view: view,
+              event: event
+            });
+          }
+        }), _el$55, _co$10);
+        _$insert(_el$53, _$createComponent(EventChip, {
+          get event() {
+            return view.normalized(event, props.dayKey);
+          },
+          get owner() {
+            return view.props.owner;
+          },
+          get href() {
+            return eventHref(view.props.owner, event);
+          },
+          compact: true,
+          timeline: true,
+          get bar() {
+            return !span.marker;
+          },
+          get checkbox() {
+            return checked() !== undefined;
+          },
+          get onCheck() {
+            return view.checkOf(event);
+          },
+          get continuesBefore() {
+            return span.firstKey < props.dayKey;
+          },
+          get continuesAfter() {
+            return span.lastKey > props.dayKey;
+          }
+        }), _el$57, _co$11);
+        _$effect(_p$ => {
+          var _v$50 = span.marker ? undefined : "true",
+            _v$51 = checked() !== undefined ? "true" : undefined,
+            _v$52 = checked() ? "true" : undefined,
+            _v$53 = view.justChecked().has(event.id) ? "true" : undefined,
+            _v$54 = eventAccent(event);
+          _v$50 !== _p$.e && _$setAttribute(_el$53, "data-bar", _p$.e = _v$50);
+          _v$51 !== _p$.t && _$setAttribute(_el$53, "data-checkbox", _p$.t = _v$51);
+          _v$52 !== _p$.a && _$setAttribute(_el$53, "data-checked", _p$.a = _v$52);
+          _v$53 !== _p$.o && _$setAttribute(_el$53, "data-just-checked", _p$.o = _v$53);
+          _v$54 !== _p$.i && _$setStyleProperty(_el$53, "--k2b-calendar-accent", _p$.i = _v$54);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        return _el$53;
+      })();
+    }
+  });
+};
+
+/** Hour labels and lines of a day's timeline with the night open, and the date at midnight. */
+export const nightHours = wake => {
+  const hours = [];
+  for (let minute = wake + 60; minute < DAY_MINUTES; minute += 60) hours.push(minute);
+  return hours;
+};
+export const isNearNow = (view, key, minute) => key === view.nowKey() && Math.abs(view.nowMinute() - minute) < 14;
+
+/** Whether a marker sits right above a band's start, so its pill goes above the line. */
+export const markerAbove = (model, minute) => model.bands.some(band => band.start >= minute - 10 && band.start <= minute + 20);
+
+/** Whether a deadline pill sits near the middle of a gap, so the gap's label moves aside. */
+export const gapAside = (model, gap) => {
+  const middle = (gap.start + gap.end) / 2;
+  return model.markers.some(marker => marker.minute > gap.start - 10 && marker.minute < gap.end + 10 && Math.abs(marker.minute - middle) < 25);
+};
+
+/** A day's counts for its header: events and all-day entries, to-dos and deadlines. */
+export const daySummary = (view, key) => {
+  const model = view.dayOf(key);
+  const isTask = event => event.display === "marker" || event.checked !== undefined;
+  const all = [...model.bands.map(band => band.item), ...model.markers.map(marker => marker.item), ...model.spans.map(span => span.item)];
+  const tasks = all.filter(isTask).length;
+  return view.messages().calendarDaySummary({
+    events: all.length - tasks,
+    tasks
+  });
+};
+
+/** What starts within the next hour today, such as "Planning in 12 min". */
+export const soonNote = (view, key) => {
+  if (key !== view.nowKey()) return "";
+  const now = view.nowMinute();
+  const next = view.dayOf(key).bands.filter(band => band.start > now && band.start - now <= 60 && !view.checkedOf(band.item)).sort((left, right) => left.start - right.start)[0];
+  return next ? view.messages().calendarSoon({
+    title: next.item.title,
+    duration: view.duration(next.start - now)
+  }) : "";
+};
+
+/** The busy minutes of a day's waking hours, merged, with the color of the first entry, for the thin load line. */
+export const dayLoad = (view, key) => {
+  const pieces = view.dayOf(key).bands.map(band => ({
+    start: Math.max(0, band.start),
+    end: Math.min(view.wake(), band.end),
+    color: eventAccent(band.item)
+  })).filter(piece => piece.end > piece.start).sort((left, right) => left.start - right.start);
+  const merged = [];
+  for (const piece of pieces) {
+    const last = merged[merged.length - 1];
+    if (last && piece.start <= last.end) last.end = Math.max(last.end, piece.end);else merged.push({
+      ...piece
+    });
+  }
+  return merged;
+};
+
+/** Day keys of the week that holds a day, from its first day. */
+export const weekKeysOf = (view, key) => {
+  const start = view.keyOf(calendar.startOfWeek(view.parseKey(key), view.dateConfig()));
+  return Array.from({
+    length: 7
+  }, (_, index) => addDayKeys(start, index));
+};
+_$delegateEvents(["pointerdown", "click"]);
+//# sourceMappingURL=calendar-time-view.js.map