@k2b/ui 0.17.0 → 0.19.0

package/dist/ssr/content/Timeline.js

@@ -0,0 +1,804 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-timeline__today\">", "</span>"],
+  _tmpl$2 = ["<span class=\"k2b-timeline__day\">", "</span>"],
+  _tmpl$3 = ["<span class=\"k2b-timeline__check\"", " aria-hidden=\"true\"><i class=\"ti ti-check\"></i></span>"],
+  _tmpl$4 = ["<span class=\"k2b-timeline__time\">", "</span>"],
+  _tmpl$5 = ["<span class=\"k2b-timeline__detail\">", "</span>"],
+  _tmpl$6 = ["<span class=\"k2b-timeline__text\"><span class=\"k2b-timeline__label\">", "</span>", "", "</span>"],
+  _tmpl$7 = ["<li class=\"k2b-timeline__slot\"", " style=\"", "\">", "</li>"],
+  _tmpl$8 = ["<ol class=\"k2b-timeline__list\"", ">", "</ol>"],
+  _tmpl$9 = ["<div class=\"k2b-timeline__group\"", " style=\"", "\">", "<div class=\"k2b-timeline__decor\" aria-hidden=\"true\">", "", "", "", "</div>", "</div>"],
+  _tmpl$0 = ["<div class=\"k2b-timeline__fold\"", " style=\"", "\"><i class=\"ti ti-moon\"></i><span class=\"k2b-timeline__fold-label\">", "</span></div>"],
+  _tmpl$1 = ["<span class=\"k2b-timeline__hour\" style=\"", "\"><span class=\"k2b-timeline__hour-label\">", "</span></span>"],
+  _tmpl$10 = ["<span class=\"k2b-timeline__gap\"", " style=\"", "\">", "</span>"],
+  _tmpl$11 = ["<span class=\"k2b-timeline__echo\"", " style=\"", "\">", "</span>"],
+  _tmpl$12 = ["<section class=\"", "\"", " aria-describedby=\"", "\"", "><div class=\"k2b-timeline__viewport\"", "><div class=\"k2b-timeline__track\" style=\"", "\">", "<div class=\"k2b-timeline__now\" aria-hidden=\"true\"", " style=\"", "\"><span class=\"k2b-timeline__now-time\">", "</span></div></div></div><span id=\"", "\" class=\"k2b-sr-only\">", "</span></section>"];
+import { createEffect, createMemo, createSignal, createUniqueId, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { Dynamic, isServer } from "solid-js/web";
+import Dropdown from "../actions/Dropdown";
+import { announce } from "../feedback/announce";
+import { useDateConfigLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { buildTimelineModel, parseTimelineTime, spanCss, spanPx, timelineDayKey, timelineHourOf } from "./timeline-model";
+/** Unit sizes of the horizontal axis, as in the stylesheet; the server and the first render use them. */
+const HORIZONTAL_UNITS = [54, 48, 160, 0, 0];
+/** How far beyond the visible area the first render reaches, in pixels. */
+const INITIAL_REACH = 3200;
+/** A scroll rests once this many frames passed without a scroll event and no finger is down. */
+const REST_FRAMES = 8;
+/** A pause between wheel events that starts a new gesture. */
+const GESTURE_GAP_MS = 150;
+/** Wheel steps from this size on, such as a mouse wheel's notches, glide; smaller ones, such as a trackpad's, apply at once. */
+const GLIDE_FROM = 50;
+const COLOR_TOKENS = new Set(["blue", "emerald", "amber", "red", "violet", "cyan", "zinc"]);
+const HEX_COLOR = /^#[0-9a-f]{3,8}$/i;
+const reducedMotion = () => typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const colorAttributes = color => color && HEX_COLOR.test(color) ? {
+  token: undefined,
+  accent: color
+} : {
+  token: color && COLOR_TOKENS.has(color) ? color : "blue",
+  accent: undefined
+};
+const isAllDay = entry => entry.kind === "all-day" || entry.kind === "more" && entry.area === "all-day";
+const asItem = entry => entry.kind === "more" ? undefined : entry;
+const asMore = entry => entry.kind === "more" ? entry : undefined;
+
+/** The nearest ancestor that scrolls vertically, the page included. */
+const verticalScroller = from => {
+  for (let element = from.parentElement; element; element = element.parentElement) {
+    if (element.scrollHeight <= element.clientHeight + 1) continue;
+    const overflow = getComputedStyle(element).overflowY;
+    if (overflow === "auto" || overflow === "scroll" || element === document.scrollingElement) return element;
+  }
+  const root = document.scrollingElement;
+  return root && root.scrollHeight > root.clientHeight + 1 ? root : undefined;
+};
+
+/**
+ * A continuous filmstrip of time: waking hours are proportional, nights and empty days fold, overlapping bands share
+ * lanes. Wide containers show it horizontally, narrow ones vertically; both use the same model.
+ */
+export default function Timeline(props) {
+  const messages = useUiMessages();
+  const context = useDateConfigLocale(() => ({
+    ...props.dateConfig,
+    timeZone: props.timeZone ?? props.dateConfig?.timeZone
+  }));
+  const baseId = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-");
+  const [clock, setClock] = createSignal(Date.now());
+  const now = createMemo(() => {
+    const fixed = parseTimelineTime(props.now, context());
+    return Number.isFinite(fixed) ? fixed : clock();
+  });
+  const today = createMemo(() => timelineDayKey(now(), context()));
+  const latest = createMemo(() => buildTimelineModel({
+    from: parseTimelineTime(props.from, context()),
+    to: parseTimelineTime(props.to, context()),
+    today: today(),
+    items: props.items,
+    context: context()
+  }));
+  /** The model on screen: the latest one, unless that one waits for the reader's scroll to rest (see `resting`). */
+  const [model, setModel] = createSignal(untrack(latest));
+  const groupsByKey = createMemo(() => new Map(model().groups.map(group => [group.key, group])));
+
+  // Formatting.
+  const locale = () => context().locale ?? "en";
+  const timeFormat = createMemo(() => new Intl.DateTimeFormat(locale(), {
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+    timeZone: context().timeZone
+  }));
+  const formatTime = time => timeFormat().format(time);
+  const dayFormat = createMemo(() => new Intl.DateTimeFormat(locale(), {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    timeZone: context().timeZone
+  }));
+  const longDayFormat = createMemo(() => new Intl.DateTimeFormat(locale(), {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    timeZone: context().timeZone
+  }));
+  const hoursFormat = createMemo(() => new Intl.NumberFormat(locale(), {
+    style: "unit",
+    unit: "hour",
+    unitDisplay: "short",
+    maximumFractionDigits: 1
+  }));
+  const noonOf = key => new Date(timelineHourOf(key, 12, context()));
+  const dayRange = (first, last, format) => first === last ? format.format(noonOf(first)) : `${format.format(noonOf(first))} – ${format.format(noonOf(last))}`;
+  const nightLabel = createMemo(() => {
+    const format = new Intl.DateTimeFormat(locale(), {
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23",
+      timeZone: "UTC"
+    });
+    return messages().timelineNight({
+      start: format.format(Date.UTC(2000, 0, 1, 22)),
+      end: format.format(Date.UTC(2000, 0, 1, 6))
+    });
+  });
+  const spoken = entry => {
+    const item = entry.item;
+    const parts = [item.label];
+    if (entry.kind === "all-day") parts.push(messages().allDay);else if (entry.end > entry.start) parts.push(messages().timelineTimeRange({
+      start: formatTime(entry.start),
+      end: formatTime(entry.end)
+    }));else parts.push(formatTime(entry.start));
+    if (item.detail) parts.push(item.detail);
+    parts.push(entry.kind === "all-day" ? dayRange(entry.firstKey, entry.lastKey, longDayFormat()) : longDayFormat().format(new Date(entry.start)));
+    if (item.checked !== undefined) parts.push(item.checked ? messages().timelineDone : messages().timelineOpen);
+    return parts.join(", ");
+  };
+  /** When an item happens, for a "+n" menu row. */
+  const when = entry => {
+    if (entry.kind === "all-day") return `${messages().allDay}, ${dayRange(entry.firstKey, entry.lastKey, dayFormat())}`;
+    return entry.end > entry.start ? `${formatTime(entry.start)}–${formatTime(entry.end)}` : formatTime(entry.start);
+  };
+  const isPast = entry => {
+    if (entry.kind === "more") return entry.hidden.every(isPast);
+    if (entry.kind === "all-day") return entry.lastKey < today();
+    return entry.end <= now();
+  };
+
+  // Layout of the axis the stylesheet chose, read from the viewport.
+  let root;
+  let viewport;
+  let track;
+  const [layout, setLayout] = createSignal({
+    axis: "horizontal",
+    units: HORIZONTAL_UNITS
+  });
+  const readLayout = () => {
+    if (!viewport) return layout();
+    const style = getComputedStyle(viewport);
+    const unit = name => Number.parseFloat(style.getPropertyValue(`--k2b-timeline-${name}`)) || 0;
+    const units = [unit("hour"), unit("night"), unit("fold"), unit("head"), unit("row")];
+    return {
+      axis: style.getPropertyValue("--k2b-timeline-axis").trim() === "vertical" ? "vertical" : "horizontal",
+      units: units.some(value => value > 0) ? units : HORIZONTAL_UNITS
+    };
+  };
+  const px = time => spanPx(model().posOf(time), layout().units);
+
+  /** The visible part of the track in its own pixels, clipped by the viewport and the window. */
+  const visible = () => {
+    if (!viewport || !track) return [0, INITIAL_REACH];
+    const port = viewport.getBoundingClientRect();
+    const box = track.getBoundingClientRect();
+    const [portStart, portEnd, boxStart, limit] = layout().axis === "horizontal" ? [port.left, port.right, box.left, window.innerWidth] : [port.top, port.bottom, box.top, window.innerHeight];
+    const start = Math.max(portStart, 0) - boxStart;
+    return [start, Math.max(start, Math.min(portEnd, limit) - boxStart)];
+  };
+  const scrollBy = (distance, behavior = "instant") => {
+    // In device pixels: positions are sums of unit sizes, and an engine that cuts 4671.9999 to 4671 would move the view.
+    const delta = Math.round(distance * window.devicePixelRatio) / window.devicePixelRatio;
+    if (!viewport || Math.abs(delta) < 0.5) return;
+    const horizontal = layout().axis === "horizontal";
+    const scrollable = horizontal ? viewport.scrollWidth > viewport.clientWidth : viewport.scrollHeight > viewport.clientHeight;
+    if (scrollable) viewport.scrollBy({
+      [horizontal ? "left" : "top"]: delta,
+      behavior
+    });else if (!horizontal) verticalScroller(viewport)?.scrollBy({
+      top: delta,
+      behavior
+    });
+  };
+
+  // Bounded rendering: groups whose reach meets the visible time range, widened by a screen, plus the focused group.
+  const [range, setRange] = createSignal();
+  const shownRange = () => range() ?? [Number.NEGATIVE_INFINITY, model().timeAt(INITIAL_REACH, HORIZONTAL_UNITS)];
+  const [active, setActive] = createSignal();
+  /** The item happening now or next. */
+  const current = () => {
+    const {
+      order,
+      entries
+    } = model();
+    return order.find(id => {
+      const entry = entries.get(id);
+      return !isAllDay(entry) && entry.end >= now();
+    });
+  };
+  const defaultActive = createMemo(() => current() ?? model().order.at(-1));
+  const activeId = () => {
+    const id = active();
+    return id !== undefined && model().entries.has(id) ? id : defaultActive();
+  };
+  const renderedKeys = createMemo(() => {
+    const [low, high] = shownRange();
+    const focusGroup = model().entries.get(activeId() ?? "")?.group;
+    return model().groups.filter(group => group.index === focusGroup || group.reach[1] >= low && group.reach[0] <= high).map(group => group.key);
+  });
+
+  // Reading position: the time at the start edge stays in place when days load or the axis changes.
+  /** The time at the start edge after the last refresh, for an axis change. */
+  let edgeTime;
+  /**
+   * The time to hold in place. A load at the start spreads a leading night or fold over other times, so where the start
+   * edge lies in one, the end of that segment holds instead, and with it everything after.
+   */
+  const anchorAt = (built, start, units) => {
+    const time = built.timeAt(start, units);
+    const first = built.segments.find(segment => segment.t1 > segment.t0);
+    return first && first.kind !== "wake" && time < first.t1 ? first.t1 : time;
+  };
+  /** How far what the reader sees moves from one model to the next. */
+  const shiftOf = (before, after) => {
+    const {
+      units
+    } = layout();
+    const time = anchorAt(before, visible()[0], units);
+    return spanPx(after.posOf(time), units) - spanPx(before.posOf(time), units);
+  };
+  /**
+   * Where each end of the range was, and how long the strip was, when that end was last asked for. An end is asked
+   * again only once the range moved there and the strip's length changed: days that fold into the fold at that end
+   * leave the reader where they were, and asking again would load an empty calendar week after week on its own.
+   */
+  let requestedFrom;
+  let requestedTo;
+  let pendingEarlier = false;
+  let pendingLater = false;
+  const loadEdge = edge => {
+    const load = edge === "earlier" ? props.onLoadEarlier : props.onLoadLater;
+    if (!load) return;
+    const settle = () => {
+      if (edge === "earlier") pendingEarlier = false;else pendingLater = false;
+      queueMicrotask(refresh);
+    };
+    if (edge === "earlier") pendingEarlier = true;else pendingLater = true;
+    Promise.resolve().then(load).then(settle, settle);
+  };
+  const refresh = () => {
+    if (!viewport) return;
+    const built = model();
+    const {
+      units
+    } = layout();
+    const [start, end] = visible();
+    const reach = Math.max(end - start, 600);
+    edgeTime = built.timeAt(start, units);
+    const [low, high] = range() ?? [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY];
+    if (built.timeAt(start - reach / 2, units) < low || built.timeAt(end + reach / 2, units) > high) setRange([built.timeAt(start - reach, units), built.timeAt(end + reach, units)]);
+    const length = spanPx(built.total, units);
+    const due = (requested, at) => requested === undefined || requested.at !== at && requested.length !== length;
+    if (start > reach) requestedFrom = undefined;else if (!pendingEarlier && due(requestedFrom, built.from)) {
+      requestedFrom = {
+        at: built.from,
+        length
+      };
+      loadEdge("earlier");
+    }
+    if (end < length - reach) requestedTo = undefined;else if (!pendingLater && due(requestedTo, built.to)) {
+      requestedTo = {
+        at: built.to,
+        length
+      };
+      loadEdge("later");
+    }
+  };
+  const scrollToTime = (time, align = "start") => {
+    if (!viewport) return;
+    const [start, end] = visible();
+    const target = px(time) - (align === "center" ? (end - start) / 2 : 16);
+    scrollBy(target - start, ownScrollBehavior());
+  };
+
+  // Keyboard: one tab stop, moved by the keys of the axis.
+  const elementOf = id => [...(viewport?.querySelectorAll("[data-entry-id]") ?? [])].find(element => element.dataset.entryId === id);
+  const focusEntry = (id, message) => {
+    if (id === undefined) return;
+    setActive(id);
+    const element = elementOf(id);
+    element?.focus({
+      preventScroll: true
+    });
+    element?.scrollIntoView?.({
+      block: "nearest",
+      inline: "nearest",
+      behavior: ownScrollBehavior()
+    });
+    if (message) announce(message);
+  };
+  const groupLabel = group => dayRange(group.firstKey, group.lastKey, longDayFormat());
+  const onKeyDown = event => {
+    const target = event.target;
+    if (!target || target.closest("[role='menu']") || event.altKey || event.ctrlKey || event.metaKey) return;
+    const id = target.closest("[data-entry-id]")?.dataset.entryId;
+    const {
+      order,
+      entries,
+      groups
+    } = model();
+    const index = id === undefined ? -1 : order.indexOf(id);
+    const entry = id === undefined ? undefined : entries.get(id);
+    const [back, forward] = layout().axis === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+    const key = event.key;
+    const handled = () => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    if (key.toLowerCase() === "t") {
+      handled();
+      const happening = current();
+      if (happening) focusEntry(happening);else scrollToTime(now(), "center");
+      announce(messages().timelineNow({
+        time: formatTime(now())
+      }));
+      return;
+    }
+    if (!entry) return;
+    const group = groups[entry.group];
+    if (key === back || key === forward) {
+      handled();
+      focusEntry(order[Math.max(0, Math.min(order.length - 1, index + (key === forward ? 1 : -1)))]);
+    } else if (key === "PageDown" || key === "PageUp") {
+      handled();
+      const step = key === "PageDown" ? 1 : -1;
+      for (let next = entry.group + step; next >= 0 && next < groups.length; next += step) {
+        const first = groups[next].entries[0];
+        if (first) return focusEntry(first.id, groupLabel(groups[next]));
+      }
+    } else if (key === "Home" || key === "End") {
+      handled();
+      focusEntry((key === "Home" ? group.entries[0] : group.entries.at(-1))?.id);
+    } else if (key === " " && entry.kind !== "more") {
+      handled();
+      if (props.onToggle && entry.item.checked !== undefined) props.onToggle(entry.item, !entry.item.checked);else if (props.onActivate) props.onActivate(entry.item);else if (entry.item.href) target.click();
+    }
+  };
+
+  // The wheel scrolls a horizontal strip sideways only where nothing else scrolls vertically, decided once per gesture.
+  let wheelAt = Number.NEGATIVE_INFINITY;
+  let primary = false;
+  /** Pixels a gliding wheel still moves. Relative, so a scroll from elsewhere, such as days loading, adds to it. */
+  let wheelLeft = 0;
+  let wheelFrame = 0;
+  const glide = () => {
+    wheelFrame = 0;
+    if (!viewport) return;
+    // Whole pixels, so every frame moves until the glide is done or meets an edge.
+    const step = Math.abs(wheelLeft) <= 1 ? wheelLeft : Math.trunc(wheelLeft * 0.35) || Math.sign(wheelLeft);
+    const before = viewport.scrollLeft;
+    viewport.scrollLeft = before + step;
+    wheelLeft -= step;
+    if (wheelLeft !== 0 && viewport.scrollLeft !== before) wheelFrame = requestAnimationFrame(glide);else wheelLeft = 0;
+  };
+  const onWheel = event => {
+    if (!viewport || layout().axis !== "horizontal" || event.ctrlKey || event.shiftKey) return;
+    if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+    const time = performance.now();
+    if (time - wheelAt > GESTURE_GAP_MS) primary = !verticalScroller(viewport);
+    wheelAt = time;
+    if (!primary) return;
+    event.preventDefault();
+    const delta = event.deltaY * (event.deltaMode === 1 ? 40 : event.deltaMode === 2 ? viewport.clientWidth : 1);
+    if (reducedMotion() || Math.abs(delta) < GLIDE_FROM && !wheelFrame) {
+      viewport.scrollLeft += delta;
+      return;
+    }
+    wheelLeft += delta;
+    if (!wheelFrame) wheelFrame = requestAnimationFrame(glide);
+  };
+  const activate = (event, entry) => {
+    const onBox = event.target?.closest(".k2b-timeline__check");
+    if (onBox && props.onToggle && entry.item.checked !== undefined) {
+      event.preventDefault();
+      props.onToggle(entry.item, !entry.item.checked);
+      return;
+    }
+    // A modified click on a link keeps its browser meaning, such as opening a new tab.
+    if (!props.onActivate || entry.item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) return;
+    event.preventDefault();
+    props.onActivate(entry.item);
+  };
+
+  // While the reader scrolls, a scroll write that keeps the view in place would fight a finger or momentum, as on iOS.
+  // So a new model that moves what they see waits until the scroll rests: frames without a scroll event, no finger
+  // down. Counted in frames, as scrolling and momentum report every frame, also when a busy page draws slowly.
+  const [resting, setResting] = createSignal(true);
+  const fingers = new Set();
+  let quietFrames = 0;
+  let restFrame = 0;
+  const countQuiet = () => {
+    restFrame = 0;
+    if (fingers.size > 0) return;
+    if (++quietFrames >= REST_FRAMES) setResting(true);else restFrame = requestAnimationFrame(countQuiet);
+  };
+  const scrolled = () => {
+    setResting(false);
+    quietFrames = 0;
+    if (!restFrame) restFrame = requestAnimationFrame(countQuiet);
+  };
+  /**
+   * How a scroll the timeline starts itself moves. A smooth one reports its first frame only later, and a write that
+   * keeps the view in place stops it, so it counts as scrolling from its start: days that load meanwhile wait until it
+   * arrives instead of cutting it short.
+   */
+  const ownScrollBehavior = () => {
+    if (reducedMotion()) return "auto";
+    scrolled();
+    return "smooth";
+  };
+  const onTouchStart = event => {
+    const target = event.target;
+    if (!target) return;
+    const touches = [...event.changedTouches].map(touch => touch.identifier);
+    for (const touch of touches) fingers.add(touch);
+    setResting(false);
+    // Touch events keep going to where they began, also after that element left the timeline.
+    const release = ended => {
+      for (const touch of ended.changedTouches) fingers.delete(touch.identifier);
+      if (touches.some(touch => fingers.has(touch))) return;
+      target.removeEventListener("touchend", release);
+      target.removeEventListener("touchcancel", release);
+      scrolled();
+    };
+    target.addEventListener("touchend", release);
+    target.addEventListener("touchcancel", release);
+  };
+  /** The item that had focus when the model changed, to keep focus in the timeline if its element goes. */
+  let focused;
+  createEffect(() => {
+    const next = latest();
+    const rest = resting();
+    untrack(() => {
+      const shown = model();
+      if (next === shown || !rest && viewport && Math.abs(shiftOf(shown, next)) >= 0.5) return;
+      focused = root?.contains(document.activeElement) && !document.activeElement?.closest("[role='menu']") ? activeId() : undefined;
+      setModel(next);
+    });
+  });
+  /** The entry that stands in for `id` in the next model: itself, the "+n" entry that hides it, or its nearest neighbour. */
+  const successor = (before, after, id) => {
+    if (after.entries.has(id)) return id;
+    for (const entry of after.entries.values()) if (entry.kind === "more" && entry.hidden.some(hidden => hidden.id === id)) return entry.id;
+    const index = before.order.indexOf(id);
+    return [...before.order.slice(index + 1), ...before.order.slice(0, Math.max(0, index)).reverse()].find(other => after.entries.has(other));
+  };
+  // Days loading at either end, and items changing, keep what the reader sees in place, and keep focus.
+  createEffect(on(model, (current, previous) => {
+    if (!previous) return;
+    scrollBy(shiftOf(previous, current));
+    const id = focused === undefined ? undefined : successor(previous, current, focused);
+    focused = undefined;
+    if (id !== undefined && !root?.contains(document.activeElement)) {
+      setActive(id);
+      // A day that only now holds the tab stop renders right after this update.
+      const focus = () => elementOf(id)?.focus({
+        preventScroll: true
+      });
+      if (!elementOf(id)) queueMicrotask(focus);else focus();
+    }
+    refresh();
+  }));
+  onMount(() => {
+    if (isServer || !viewport || !root) return;
+    setLayout(readLayout());
+    refresh();
+    let frame = 0;
+    const schedule = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        refresh();
+      });
+    };
+    // Scrolls of the strip and of the areas around it, which move it too.
+    const onScroll = event => {
+      const target = event.target;
+      if (target !== document && !(target instanceof Node && viewport && target.contains(viewport))) return;
+      scrolled();
+      schedule();
+    };
+    const resize = new ResizeObserver(() => {
+      const next = readLayout();
+      const previous = layout();
+      if (next.axis !== previous.axis || next.units.some((value, index) => value !== previous.units[index])) {
+        setLayout(next);
+        if (edgeTime !== undefined) scrollBy(px(edgeTime) - visible()[0]);
+        refresh();
+      } else schedule();
+    });
+    resize.observe(viewport);
+    viewport.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    viewport.addEventListener("touchstart", onTouchStart, {
+      passive: true
+    });
+    root.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("scroll", onScroll, {
+      passive: true,
+      capture: true
+    });
+    const timer = props.now === undefined ? setInterval(() => setClock(Date.now()), 30_000) : undefined;
+    onCleanup(() => {
+      resize.disconnect();
+      viewport?.removeEventListener("wheel", onWheel);
+      viewport?.removeEventListener("touchstart", onTouchStart);
+      root?.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("scroll", onScroll, {
+        capture: true
+      });
+      cancelAnimationFrame(frame);
+      cancelAnimationFrame(wheelFrame);
+      cancelAnimationFrame(restFrame);
+      if (timer) clearInterval(timer);
+    });
+    props.controller?.({
+      scrollToTime: (time, options) => scrollToTime(parseTimelineTime(time, context()), options?.align),
+      scrollToNow: () => scrollToTime(now(), "center")
+    });
+  });
+  const nowShown = () => now() >= model().from && now() < model().to;
+  const Heading = headingProps => _$createComponent(Dynamic, {
+    get component() {
+      return `h${props.headingLevel ?? 3}`;
+    },
+    get id() {
+      return `${baseId}-${headingProps.group.key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+    },
+    "class": "k2b-timeline__heading",
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return headingProps.group.today;
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$escape(messages().today));
+        }
+      }), _$ssr(_tmpl$2, _$escape(dayRange(headingProps.group.firstKey, headingProps.group.lastKey, dayFormat())))];
+    }
+  });
+  const ItemControl = itemProps => {
+    const entry = () => itemProps.entry;
+    const name = createMemo(() => spoken(entry()));
+    const time = () => {
+      const current = entry();
+      if (current.kind === "all-day") return "";
+      if (current.kind !== "folded" && current.end > current.start) return `${formatTime(current.start)}–${formatTime(current.end)}`;
+      return formatTime(current.start);
+    };
+    return _$createComponent(Dynamic, {
+      get component() {
+        return entry().item.href ? "a" : "button";
+      },
+      get type() {
+        return entry().item.href ? undefined : "button";
+      },
+      get href() {
+        return entry().item.href;
+      },
+      "class": "k2b-timeline__item",
+      get ["data-entry-id"]() {
+        return entry().id;
+      },
+      get tabindex() {
+        return activeId() === entry().id ? 0 : -1;
+      },
+      get ["aria-label"]() {
+        return name();
+      },
+      get title() {
+        return name();
+      },
+      onClick: event => activate(event, entry()),
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return entry().item.checked !== undefined;
+          },
+          get children() {
+            return _$ssr(_tmpl$3, _$ssrAttribute("data-checked", entry().item.checked ? "true" : _$escape(undefined, true), false));
+          }
+        }), _$ssr(_tmpl$6, _$escape(entry().item.label), _$escape(_$createComponent(Show, {
+          get when() {
+            return time();
+          },
+          get children() {
+            return _$ssr(_tmpl$4, _$escape(time()));
+          }
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return entry().item.detail;
+          },
+          get children() {
+            return _$ssr(_tmpl$5, _$escape(entry().item.detail));
+          }
+        })))];
+      }
+    });
+  };
+  const MoreControl = moreProps => {
+    const entry = () => moreProps.entry;
+    const label = () => {
+      const current = entry();
+      const count = messages().timelineMore({
+        count: current.hidden.length
+      });
+      return current.area === "all-day" ? count : `${count}, ${messages().timelineTimeRange({
+        start: formatTime(current.start),
+        end: formatTime(current.end)
+      })}`;
+    };
+    // A row opens its item as a click on it does. Where only the checkbox may change, the row is that checkbox.
+    const items = () => entry().hidden.map(hidden => {
+      const {
+        item
+      } = hidden;
+      const parts = [when(hidden), ...(item.detail ? [item.detail] : [])];
+      const state = item.checked === undefined ? [] : [item.checked ? messages().timelineDone : messages().timelineOpen];
+      const icon = item.checked === undefined ? undefined : item.checked ? "ti ti-circle-check" : "ti ti-circle";
+      const base = {
+        label: item.label,
+        description: [...parts, ...state].join(", "),
+        icon
+      };
+      const open = props.onActivate;
+      if (open) return item.href ? {
+        ...base,
+        href: item.href,
+        action: () => open(item)
+      } : {
+        ...base,
+        action: () => open(item)
+      };
+      if (item.href) return {
+        ...base,
+        href: item.href
+      };
+      const toggle = props.onToggle;
+      if (toggle && item.checked !== undefined) {
+        const checked = item.checked;
+        return {
+          label: item.label,
+          description: parts.join(", "),
+          choice: "checkbox",
+          checked,
+          action: () => toggle(item, !checked)
+        };
+      }
+      return {
+        ...base,
+        disabled: true
+      };
+    });
+    return _$createComponent(Dropdown.Root, {
+      get items() {
+        return items();
+      },
+      get label() {
+        return label();
+      },
+      "class": "k2b-timeline__more-root",
+      get children() {
+        return _$createComponent(Dropdown.Trigger, {
+          appearance: "plain",
+          "class": "k2b-timeline__item k2b-timeline__more",
+          get ["data-entry-id"]() {
+            return entry().id;
+          },
+          get tabIndex() {
+            return activeId() === entry().id ? 0 : -1;
+          },
+          get label() {
+            return label();
+          },
+          get title() {
+            return label();
+          },
+          get children() {
+            return ["+", entry().hidden.length];
+          }
+        });
+      }
+    });
+  };
+  const Slot = slotProps => {
+    const entry = createMemo(previous => model().entries.get(slotProps.id) ?? previous, model().entries.get(slotProps.id));
+    const color = () => {
+      const current = entry();
+      return colorAttributes(current.kind === "more" ? undefined : current.item.color);
+    };
+    const span = () => {
+      const current = entry();
+      if (current.kind !== "band") return undefined;
+      const minutes = (current.end - current.start) / 60_000;
+      return minutes < 30 ? "xs" : minutes < 60 ? "s" : minutes < 120 ? "m" : "l";
+    };
+    return _$ssr(_tmpl$7, _$ssrAttribute("data-kind", _$escape(entry().kind, true), false) + _$ssrAttribute("data-area", _$escape(asMore(entry())?.area, true), false) + _$ssrAttribute("data-past", isPast(entry()) ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-span", _$escape(span(), true), false) + _$ssrAttribute("data-color", _$escape(color().token, true), false), _$ssrStyleProperty("--k2b-timeline-at:", _$escape(spanCss(entry().at), true)) + _$ssrStyleProperty(";--k2b-timeline-size:", _$escape(spanCss(entry().size), true)) + _$ssrStyleProperty(";--k2b-timeline-lane:", _$escape(String(entry().lane), true)) + _$ssrStyleProperty(";--k2b-timeline-lanes:", _$escape(String(entry().lanes), true)) + _$ssrStyleProperty(";--k2b-timeline-accent:", _$escape(color().accent, true)), _$escape(_$createComponent(Show, {
+      get when() {
+        return asMore(entry());
+      },
+      get fallback() {
+        return _$createComponent(ItemControl, {
+          get entry() {
+            return asItem(entry());
+          }
+        });
+      },
+      children: more => _$createComponent(MoreControl, {
+        get entry() {
+          return more();
+        }
+      })
+    })));
+  };
+  const Group = groupProps => {
+    const group = createMemo(previous => groupsByKey().get(groupProps.key) ?? previous, groupsByKey().get(groupProps.key));
+    const headingId = () => `${baseId}-${group().key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+    return _$ssr(_tmpl$9, _$ssrAttribute("data-kind", _$escape(group().kind, true), false) + _$ssrAttribute("data-today", group().today ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", group().past ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-row", group().row ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-timeline-at:", _$escape(spanCss(group().at), true)) + _$ssrStyleProperty(";--k2b-timeline-size:", _$escape(spanCss(group().size), true)), _$escape(_$createComponent(Heading, {
+      get group() {
+        return group();
+      }
+    })), _$escape(_$createComponent(Index, {
+      get each() {
+        return group().folds;
+      },
+      children: fold => _$ssr(_tmpl$0, _$ssrAttribute("data-kind", _$escape(fold().kind, true), false), _$ssrStyleProperty("--k2b-timeline-at:", _$escape(spanCss(fold().at), true)) + _$ssrStyleProperty(";--k2b-timeline-size:", _$escape(spanCss(fold().size), true)), fold().kind === "night" ? _$escape(nightLabel()) : _$escape(messages().timelineNothingPlanned))
+    })), _$escape(_$createComponent(Index, {
+      get each() {
+        return group().hours;
+      },
+      children: hour => _$ssr(_tmpl$1, _$ssrStyleProperty("--k2b-timeline-at:", _$escape(spanCss(hour().at), true)), _$escape(formatTime(hour().time)))
+    })), _$escape(_$createComponent(Index, {
+      get each() {
+        return group().gaps;
+      },
+      children: gap => _$ssr(_tmpl$10, _$ssrAttribute("data-long", gap().long ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", gap().end <= now() ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-timeline-at:", _$escape(spanCss(gap().at), true)), _$escape(messages().timelineFree({
+        duration: hoursFormat().format(gap().hours)
+      })))
+    })), _$escape(_$createComponent(Index, {
+      get each() {
+        return group().echoes;
+      },
+      children: echo => {
+        const color = () => {
+          const current = echo();
+          return colorAttributes(current.kind === "more" ? undefined : current.item.color);
+        };
+        return (// A pointer shortcut to an item that the keyboard and screen readers reach on the day it starts.
+          // biome-ignore lint/a11y/noStaticElementInteractions: hidden from assistive technology on purpose.
+          // biome-ignore lint/a11y/useKeyWithClickEvents: the item itself is the keyboard target.
+          _$ssr(_tmpl$11, _$ssrAttribute("data-color", _$escape(color().token, true), false) + _$ssrAttribute("data-past", isPast(echo()) ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-timeline-lane:", _$escape(String(echo().lane), true)) + _$ssrStyleProperty(";--k2b-timeline-accent:", _$escape(color().accent, true)), _$escape(asItem(echo())?.item.label ?? `+${asMore(echo())?.hidden.length ?? 0}`))
+        );
+      }
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return group().entries.length > 0;
+      },
+      get children() {
+        return _$ssr(_tmpl$8, _$ssrAttribute("aria-labelledby", _$escape(headingId(), true), false), _$escape(_$createComponent(For, {
+          get each() {
+            return group().entries.map(entry => entry.id);
+          },
+          children: id => _$createComponent(Slot, {
+            id: id
+          })
+        })));
+      }
+    })));
+  };
+  return _$ssr(_tmpl$12, `k2b-timeline ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label ?? messages().timeline, true), false), `${_$escape(baseId, true)}-hint`, _$ssrAttribute("aria-busy", props.busy ? "true" : _$escape(undefined, true), false), _$ssrAttribute("tabindex", model().order.length === 0 ? 0 : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-timeline-length:", _$escape(spanCss(model().total), true)), _$escape(_$createComponent(For, {
+    get each() {
+      return renderedKeys();
+    },
+    children: key => _$createComponent(Group, {
+      key: key
+    })
+  })), _$ssrAttribute("data-hidden", nowShown() ? _$escape(undefined, true) : "true", false), _$ssrStyleProperty("--k2b-timeline-at:", _$escape(spanCss(model().posOf(now())), true)), _$escape(formatTime(now())), `${_$escape(baseId, true)}-hint`, _$escape(messages().timelineHint));
+}
+//# sourceMappingURL=Timeline.js.map