@k2b/ui 0.21.0 → 0.23.0

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

@@ -0,0 +1,1306 @@
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+var _tmpl$ = "<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\"></path></svg>",
+  _tmpl$2 = ["<button type=\"button\" class=\"k2b-calendar-check\" role=\"checkbox\"", ">", "</button>"],
+  _tmpl$3 = ["<span class=\"k2b-calendar-check\"", " aria-hidden=\"true\">", "</span>"],
+  _tmpl$4 = "<span class=\"k2b-calendar-band__fill\" aria-hidden=\"true\"></span>",
+  _tmpl$5 = "<span class=\"k2b-calendar-band__grip\" data-edge=\"start\" aria-hidden=\"true\"></span>",
+  _tmpl$6 = "<span class=\"k2b-calendar-band__grip\" data-edge=\"end\" aria-hidden=\"true\"></span>",
+  _tmpl$7 = ["<div class=\"k2b-calendar-band\"", " style=\"", "\">", "", "", "", "</div>"],
+  _tmpl$8 = ["<div class=\"k2b-calendar-marker\"", " style=\"", "\"><span class=\"k2b-calendar-marker__line\" aria-hidden=\"true\"></span><span class=\"k2b-calendar-marker__pill\">", "", "</span></div>"],
+  _tmpl$9 = ["<span class=\"k2b-calendar-marker__time\">", "</span>"],
+  _tmpl$0 = ["<button type=\"button\" class=\"k2b-calendar-gap__button\"", "><i class=\"ti ti-plus\" aria-hidden=\"true\"></i><span class=\"k2b-calendar-gap__text\">", "</span></button>"],
+  _tmpl$1 = ["<div class=\"k2b-calendar-gap\"", " style=\"", "\"><span class=\"k2b-calendar-gap__zone\" aria-hidden=\"true\"></span>", "</div>"],
+  _tmpl$10 = ["<span class=\"k2b-calendar-slot\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$11 = ["<div class=\"k2b-calendar-draft\" style=\"", "\"><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\"></span></div>"],
+  _tmpl$12 = ["<div class=\"k2b-calendar-ghost\" data-live=\"true\"", " style=\"", "\" aria-hidden=\"true\"><span class=\"k2b-calendar-ghost__title\">", "</span><span class=\"k2b-calendar-ghost__time\">", "</span>", "</div>"],
+  _tmpl$13 = ["<span class=\"k2b-calendar-ghost__fit\"", ">", "</span>"],
+  _tmpl$14 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", " data-kind=\"create\">", "</div>"],
+  _tmpl$15 = ["<span class=\"k2b-calendar-allday-chip\"", " style=\"", "\">", "", "</span>"];
+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 = _$ssr(_tmpl$);
+  return _$createComponent(Show, {
+    get when() {
+      return props.view.props.owner.onEventCheck;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$3, _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false), _$escape(box));
+    },
+    get children() {
+      return _$ssr(_tmpl$2, _$ssrAttribute("aria-checked", checked() ? "true" : "false", false) + _$ssrAttribute("aria-label", _$escape(props.view.messages().calendarDone({
+        title: props.event.title
+      }), true), false) + _$ssrAttribute("tabindex", _$escape(props.tabIndex, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-just-checked", props.view.justChecked().has(props.event.id) ? "true" : _$escape(undefined, true), false), _$escape(box));
+    }
+  });
+};
+
+/** 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 _$ssr(_tmpl$7, _$ssrAttribute("data-calendar-entry", _$escape(event().id, true), false) + _$ssrAttribute("data-size", _$escape(size(), true), false) + _$ssrAttribute("data-past", past() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checkbox", checked() !== undefined ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-just-checked", view.justChecked().has(event().id) ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-cut-bottom", props.band.end > limit() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", view.movingId() === event().id ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(event().display, true), false), _$ssrStyleProperty("--k2b-calendar-accent:", _$escape(eventAccent(event()), true)) + _$ssrStyleProperty(";--k2b-calendar-lane:", _$escape(String(props.band.lane), true)) + _$ssrStyleProperty(";--k2b-calendar-lanes:", _$escape(String(props.band.lanes), true)) + _$ssrStyleProperty(";--k2b-calendar-lines:", _$escape(String(lines()), true)) + _$ssrStyleProperty(";--k2b-calendar-progress:", running() ? `${_$escape(((now() - props.band.start) / length() * 100).toFixed(1), true)}%` : _$escape(undefined, true)) + _$ssrStyleProperty(";top:", `calc(${_$escape(termsCss(top()), true)} + 1px)`) + _$ssrStyleProperty(";height:", `max(var(--k2b-calendar-band-min), calc(${_$escape(termsCss(subtractTerms(bottom(), top())), true)} - 2px))`), _$escape(_$createComponent(Show, {
+    get when() {
+      return running();
+    },
+    get children() {
+      return _$ssr(_tmpl$4);
+    }
+  })), _$escape(_$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;
+        }
+      });
+    }
+  })), _$escape(_$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;
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return view.props.owner.onEventResize;
+    },
+    get children() {
+      return [_$ssr(_tmpl$5), _$createComponent(Show, {
+        get when() {
+          return props.band.end <= limit();
+        },
+        get children() {
+          return _$ssr(_tmpl$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 _$ssr(_tmpl$8, _$ssrAttribute("data-calendar-entry", _$escape(props.event.id, true), false) + _$ssrAttribute("data-past", past() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-overdue", past() && checked() === false ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-just-checked", view.justChecked().has(props.event.id) ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-above", props.above ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", view.movingId() === props.event.id ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-calendar-accent:", _$escape(eventAccent(props.event), true)) + _$ssrStyleProperty(";--k2b-calendar-marker-lane:", _$escape(String(props.lane), true)) + _$ssrStyleProperty(";--k2b-calendar-marker-lanes:", _$escape(String(props.lanes), true)) + _$ssrStyleProperty(";top:", _$escape(termsCss(dayTopTerms(view.wake(), props.expanded, props.minute)), true)), _$escape(_$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;
+        }
+      });
+    }
+  })), _$escape(_$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() {
+          return _$ssr(_tmpl$9, _$escape(view.clock(props.minute)));
+        }
+      });
+    },
+    get onMovePointerDown() {
+      return view.props.owner.onEventDrop ? pointerEvent => view.startMove(pointerEvent, props.event, props.dayKey, props.minute, props.minute, props.scroller?.()) : undefined;
+    }
+  })));
+};
+
+/** 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 _$ssr(_tmpl$1, _$ssrAttribute("data-short", labelled() ? _$escape(undefined, true) : "true", false) + _$ssrAttribute("data-long", length() >= GAP_LONG_MINUTES ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", props.gap.past ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-aside", props.aside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-hit", hit() ? hit().fits ? "fit" : "short" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", _$escape(termsCss(top()), true)) + _$ssrStyleProperty(";height:", _$escape(termsCss(subtractTerms(dayYTerms(view.wake(), props.expanded, props.gap.end), top())), true)), _$escape(_$createComponent(Show, {
+    get when() {
+      return view.canCreate();
+    },
+    get children() {
+      return _$ssr(_tmpl$0, _$ssrAttribute("tabindex", labelled() ? _$escape(props.tabIndex ?? (props.gap.past ? -1 : 0), true) : -1, false) + _$ssrAttribute("data-stop", _$escape(stop()?.id, true), false) + _$ssrAttribute("data-col", _$escape(stop()?.column, true), false) + _$ssrAttribute("data-minute", _$escape(stop()?.minute, true), false) + _$ssrAttribute("aria-label", _$escape(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])
+      }), true), false) + _$ssrAttribute("title", _$escape(view.messages().calendarCreateAt({
+        start: view.clock(proposal()[0]),
+        end: view.clock(proposal()[1])
+      }), true), false), hit() ? _$escape(hit().text) : _$escape(label()));
+    }
+  })));
+};
+
+/** 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 => _$ssr(_tmpl$10, _$ssrStyle(box(slot().start, slot().end)))
+  }), _$createComponent(Show, {
+    get when() {
+      return draft();
+    },
+    children: slot => _$ssr(_tmpl$11, _$ssrStyle(box(slot().start, slot().end)), _$ssrAttribute("aria-label", _$escape(view.messages().calendarCreateAt({
+      start: view.clock(slot().start),
+      end: view.clock(slot().end)
+    }), true), false), _$escape(view.clock(slot().start)), _$escape(view.clock(slot().end)), _$escape(view.duration(slot().end - slot().start)))
+  }), _$createComponent(Show, {
+    get when() {
+      return ghost();
+    },
+    children: current => _$ssr(_tmpl$12, _$ssrAttribute("data-size", current().end - current().start < 40 ? "s" : "m", false) + _$ssrAttribute("data-warn", current().warn ? "true" : _$escape(undefined, true), false), _$ssrStyle({
+      ...box(current().start, current().end),
+      "--k2b-calendar-accent": current().colorHex ?? "var(--k2b-action)"
+    }), _$escape(current().title), _$escape(current().time), _$escape(_$createComponent(Show, {
+      get when() {
+        return current().fit;
+      },
+      children: fit => _$ssr(_tmpl$13, _$ssrAttribute("data-fit", fit().fits ? "fit" : "short", false), _$escape(fit().text))
+    })))
+  })];
+};
+
+/** 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();
+    });
+  });
+  const close = restore => {
+    if (!view.quick()) return;
+    view.setQuick(null);
+    view.setSelection(null);
+    if (restore && returnFocus?.isConnected) returnFocus.focus({
+      preventScroll: true
+    });
+  };
+  return _$ssr(_tmpl$14, _$ssrAttribute("aria-label", _$escape(view.messages().calendarQuickCreate, true), false), _$escape(_$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(true);
+      }
+    })
+  })));
+};
+
+/** 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 _$ssr(_tmpl$15, _$ssrAttribute("data-bar", span.marker ? _$escape(undefined, true) : "true", false) + _$ssrAttribute("data-checkbox", checked() !== undefined ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-checked", checked() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-just-checked", view.justChecked().has(event.id) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-calendar-accent:", _$escape(eventAccent(event), true)), _$escape(_$createComponent(Show, {
+        get when() {
+          return checked() !== undefined;
+        },
+        get children() {
+          return _$createComponent(TimeCheck, {
+            view: view,
+            event: event
+          });
+        }
+      })), _$escape(_$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;
+        }
+      })));
+    }
+  });
+};
+
+/** 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));
+};
+//# sourceMappingURL=calendar-time-view.js.map