@tensor_1/react 2.34.0 → 2.36.0

package/dist/components/SchedulingTimeline.js

@@ -1,10 +1,13 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cachedDateTimeFormat, zonedDayBounds, zonedTimeOfDay } from "../calendar-model.js";
+import { proposeMove } from "../scheduling-calendar-model.js";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
-import { defaultTimelineStep, layoutLane, pixelsToMs, placeSpan, shiftSpan, timelineTicks } from "../scheduling-timeline-model.js";
+import { defaultTimelineStep, layoutLane, pixelsToMs, placeSpan, shiftSpan, timelineRepeatedHourOffset, timelineStepDelta, timelineSubTicks, timelineTicks } from "../scheduling-timeline-model.js";
+import { timelineRowExtents, timelineWindow } from "../scheduling-timeline-rows.js";
 const DEFAULT_SCHEDULING_TIMELINE_LABELS = {
   region: "Schedule timeline in {timeZone}",
   lanes: "Lanes",
@@ -19,7 +22,17 @@ const DEFAULT_SCHEDULING_TIMELINE_LABELS = {
   windows: "Windows and markers in this range",
   now: "Now",
   states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" },
-  overlays: { freeze: "Change freeze", maintenance: "Maintenance window", blackout: "Blackout" }
+  overlays: { "freeze": "Change freeze", maintenance: "Maintenance window", "blackout": "Blackout" },
+  statuses: { tentative: "Tentative", committed: "Scheduled", live: "In progress", done: "Done", dead: "Cancelled" },
+  overlay: "{title}, {start} to {end}",
+  moveKeysHint: "Shift and an arrow key moves it.",
+  resizeHint: "Alt, Shift and an arrow key moves its end.",
+  proposeHint: "Hold Shift and press an arrow key to move it. Enter confirms, Escape cancels.",
+  moveProposed: "Move to {start} \u2013 {end}. Enter confirms, Escape cancels.",
+  moveCancelled: "Move cancelled.",
+  gapForward: "That time does not exist on this day. Moved forward to {time}.",
+  groupSummary: "Items: {count}",
+  moveSent: "Requested a move to {start} \u2013 {end}."
 };
 const TICK_WIDTH = { hour: "3.5rem", day: "7rem", week: "6rem", month: "8rem" };
 const TICK_FORMAT = {
@@ -28,6 +41,36 @@ const TICK_FORMAT = {
   week: { day: "numeric", month: "short" },
   month: { month: "short", year: "numeric" }
 };
+const EMPTY_ITEMS = [];
+const EMPTY_OVERLAYS = [];
+const EMPTY_MARKERS = [];
+const DRAG_THRESHOLD = 4;
+const DEFAULT_UNITS = { row: 36, pad: 16, head: 40 };
+const ESTIMATED_VIEWPORT = 720;
+const OVERSCAN_ROWS = 4;
+const BAR_MIN_FALLBACK = 1.5 * 16;
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const sameExtent = (a, b) => a.subRows === b.subRows && a.lanes === b.lanes && a.heads === b.heads;
+const IN_LANE = { scope: "lane", labelTops: ["0%"] };
+const vars = (values) => values;
+const extentCss = (extent) => `calc(${extent.subRows} * var(--timeline-bar-row) + ${extent.lanes} * var(--timeline-lane-pad) + ${extent.heads} * var(--timeline-head))`;
+const between = (from, to) => ({ subRows: to.subRows - from.subRows, lanes: to.lanes - from.lanes, heads: to.heads - from.heads });
+function uniqueKeys(ids) {
+  const seen = /* @__PURE__ */ new Map();
+  return ids.map((id) => {
+    const count = seen.get(id) ?? 0;
+    seen.set(id, count + 1);
+    return count === 0 ? id : `${id}#${count}`;
+  });
+}
+const lanesOf = (target) => target.laneIds !== void 0 ? new Set(target.laneIds) : target.laneId ? /* @__PURE__ */ new Set([target.laneId]) : null;
+function ItemMarker({ marker, showLabel }) {
+  const emphasis = marker.emphasis ?? "neutral";
+  return /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-timeline__item-marker", "data-emphasis": emphasis, "data-glyph": marker.icon == null ? emphasis : void 0, children: [
+    marker.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-marker-icon", "aria-hidden": "true", children: marker.icon }),
+    /* @__PURE__ */ jsx("span", { className: showLabel ? "uix-scheduling-timeline__item-marker-label" : "uix-visually-hidden", children: marker.label })
+  ] });
+}
 function SchedulingTimeline({
   lanes,
   items,
@@ -35,17 +78,28 @@ function SchedulingTimeline({
   scale = "day",
   timeZone,
   locale,
-  overlays = [],
-  markers = [],
+  groups,
+  onToggleGroup,
+  overlays = EMPTY_OVERLAYS,
+  onSelectOverlay,
+  markers = EMPTY_MARKERS,
   now,
   weekStartsOn = 1,
   tickWidth,
   step: stepProp,
+  subTicks,
   formatTick,
   formatInstant: formatInstantProp,
   renderItem,
   onSelectItem,
   onMoveItem,
+  onProposeMove,
+  onResizeItem,
+  flagOverlaps = true,
+  virtualizeAbove = 150,
+  maxHeight,
+  notice,
+  columnNotes,
   loading,
   error,
   onRetry,
@@ -53,47 +107,358 @@ function SchedulingTimeline({
   className
 }) {
   const uixLabels = useUixLabels();
+  const provided = { ...uixLabels.schedulingTimeline, ...labelOverrides };
   const labels = {
     ...DEFAULT_SCHEDULING_TIMELINE_LABELS,
-    ...uixLabels.schedulingTimeline,
-    ...labelOverrides,
+    ...provided,
     states: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.states, ...uixLabels.schedulingTimeline?.states, ...labelOverrides?.states },
-    overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays }
+    overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays },
+    statuses: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.statuses, ...uixLabels.schedulingTimeline?.statuses, ...labelOverrides?.statuses }
   };
   const id = useId();
-  const step = stepProp ?? defaultTimelineStep(scale);
+  const hintId = `${id}-hint`;
+  const step = stepProp !== void 0 && Number.isFinite(stepProp) && stepProp > 0 ? stepProp : defaultTimelineStep(scale);
+  const rootRef = useRef(null);
+  const [scroller, setScroller] = useState(null);
+  const [layerTrack, setLayerTrack] = useState(null);
+  const probeRef = useRef(null);
+  const bodyRef = useRef(null);
+  const barMinRef = useRef(null);
+  const [barShare, setBarShare] = useState(0);
+  const barShareRef = useRef(0);
+  const anchorRef = useRef(null);
+  const [anchorKey, setAnchorKey] = useState(null);
+  const [focusRowKey, setFocusRowKey] = useState(null);
+  const [activeId, setActiveId] = useState();
+  const [focusRequest, setFocusRequest] = useState(null);
+  const [stepDrag, setStepDrag] = useState(null);
+  const [ghost, setGhost] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const [selfCollapsed, setSelfCollapsed] = useState({});
+  const [units, setUnits] = useState(DEFAULT_UNITS);
+  const [view, setView] = useState({ top: 0, height: ESTIMATED_VIEWPORT });
+  const measureViewRef = useRef(null);
+  const proposing = onProposeMove !== void 0;
+  const stepping = !proposing && onMoveItem !== void 0;
+  const resizing = onResizeItem !== void 0;
+  const canMove = (item) => (proposing || stepping) && item.movable !== false;
+  const canResize = (item) => resizing && item.movable !== false;
+  const hint = proposing ? [labels.proposeHint, resizing ? labels.resizeHint : ""].filter(Boolean).join(" ") : stepping ? resizing ? labels.moveHint : labels.moveKeysHint : resizing ? labels.resizeHint : "";
+  const fmtInstant = (instant) => {
+    const custom = formatInstantProp?.(instant);
+    if (custom != null) return custom;
+    const text = cachedDateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
+    const offset = timelineRepeatedHourOffset(instant, timeZone);
+    return offset ? `${text} ${offset}` : text;
+  };
+  const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? cachedDateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
   const ticks = useMemo(() => timelineTicks(range, scale, timeZone, weekStartsOn), [range.start, range.end, scale, timeZone, weekStartsOn]);
-  const laneLayouts = useMemo(
-    () => lanes.map((lane) => ({ lane, placed: layoutLane(items.filter((item) => item.laneId === lane.id), range) })),
-    [lanes, items, range.start, range.end]
+  const minorTicks = useMemo(
+    () => scale === "day" && subTicks && subTicks.length > 0 ? timelineSubTicks(range, subTicks, timeZone) : [],
+    [range.start, range.end, scale, timeZone, subTicks]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const ordered = useMemo(() => laneLayouts.flatMap((l) => l.placed.map((p) => p.item.id)), [laneLayouts]);
-  const [activeId, setActiveId] = useState();
-  const focusId = activeId && ordered.includes(activeId) ? activeId : ordered[0];
-  const [drag, setDrag] = useState(null);
-  const [announcement, setAnnouncement] = useState("");
-  const rootRef = useRef(null);
-  const fmtInstant = (instant) => formatInstantProp?.(instant) ?? new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
-  const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? new Intl.DateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
-  const movable = (item) => !!onMoveItem && item.movable !== false;
+  const tickCount = ticks.length;
+  useIsomorphicLayoutEffect(() => {
+    if (!layerTrack) return void 0;
+    const measure = () => {
+      const width = layerTrack.getBoundingClientRect().width;
+      const bar = barMinRef.current?.getBoundingClientRect().width || BAR_MIN_FALLBACK;
+      const share = width > 0 ? Math.round(bar / width * 1e5) / 1e5 : 0;
+      if (share === barShareRef.current) return;
+      barShareRef.current = share;
+      const body2 = bodyRef.current;
+      const edge = Math.max(0, scroller?.getBoundingClientRect().top ?? 0);
+      const first = body2 ? Array.from(body2.children).find((row) => row.hasAttribute("data-row-key") && row.getBoundingClientRect().bottom > edge + 1) : void 0;
+      anchorRef.current = first ? { key: first.getAttribute("data-row-key"), top: first.getBoundingClientRect().top } : null;
+      setAnchorKey(anchorRef.current?.key ?? null);
+      setBarShare(share);
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(layerTrack);
+    return () => observer?.disconnect();
+  }, [layerTrack, scroller, tickWidth, scale, tickCount]);
+  const minSpan = Math.max(0, (Date.parse(range.end) - Date.parse(range.start)) * barShare) || 0;
+  const isCollapsed = (group) => onToggleGroup ? !!group.collapsed : selfCollapsed[group.id] ?? !!group.collapsed;
+  const collapsedSignature = groups?.map((group) => isCollapsed(group) ? "1" : "0").join("") ?? "";
+  const itemsByLane = useMemo(() => {
+    const byLane = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const list = byLane.get(item.laneId);
+      if (list) list.push(item);
+      else byLane.set(item.laneId, [item]);
+    }
+    return byLane;
+  }, [items]);
+  const rows = useMemo(() => {
+    const laneRow = (lane, laneIndex, groupIndex) => {
+      const placed = layoutLane(itemsByLane.get(lane.id) ?? EMPTY_ITEMS, range, { flagOverlaps, minSpan });
+      return { kind: "lane", key: `lane-${laneIndex}`, lane, laneIndex, groupIndex, placed, keys: uniqueKeys(placed.map((p) => p.item.id)), subRows: placed.reduce((max, p) => Math.max(max, p.row + 1), 1) };
+    };
+    if (!groups) return lanes.map((lane, laneIndex) => laneRow(lane, laneIndex));
+    const indexes = /* @__PURE__ */ new Map();
+    lanes.forEach((lane, laneIndex) => {
+      const list2 = indexes.get(lane.id);
+      if (list2) list2.push(laneIndex);
+      else indexes.set(lane.id, [laneIndex]);
+    });
+    const used = /* @__PURE__ */ new Set();
+    const list = [];
+    groups.forEach((group, groupIndex) => {
+      const collapsed = collapsedSignature[groupIndex] === "1";
+      const stands = /* @__PURE__ */ new Set();
+      list.push({ kind: "head", key: `group-${groupIndex}`, group, groupIndex, collapsed, stands });
+      for (const laneId of group.laneIds) {
+        for (const laneIndex of indexes.get(laneId) ?? []) {
+          if (used.has(laneIndex)) continue;
+          used.add(laneIndex);
+          if (collapsed) stands.add(laneId);
+          else list.push(laneRow(lanes[laneIndex], laneIndex, groupIndex));
+        }
+      }
+    });
+    lanes.forEach((lane, laneIndex) => {
+      if (!used.has(laneIndex)) list.push(laneRow(lane, laneIndex));
+    });
+    return list;
+  }, [lanes, groups, collapsedSignature, itemsByLane, range.start, range.end, flagOverlaps, minSpan]);
+  const laneRows = useMemo(() => rows.filter((row) => row.kind === "lane"), [rows]);
+  const { ordered, rowOfItem } = useMemo(() => {
+    const ids = [];
+    const rowOf = /* @__PURE__ */ new Map();
+    rows.forEach((row, rowIndex) => {
+      if (row.kind !== "lane") return;
+      for (const p of row.placed) {
+        ids.push(p.item.id);
+        if (!rowOf.has(p.item.id)) rowOf.set(p.item.id, rowIndex);
+      }
+    });
+    return { ordered: ids, rowOfItem: rowOf };
+  }, [rows]);
+  const nothingToShow = useMemo(() => {
+    if (ordered.length > 0) return false;
+    const laneIds = new Set(lanes.map((lane) => lane.id));
+    return !items.some((item) => laneIds.has(item.laneId) && placeSpan(item, range) !== null);
+  }, [ordered, lanes, items, range.start, range.end]);
+  const focusId = activeId !== void 0 && rowOfItem.has(activeId) ? activeId : ordered[0];
+  const strips = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    const shown = overlays.filter((overlay) => placeSpan(overlay, range) !== null).map(lanesOf);
+    if (shown.length === 0) return set;
+    rows.forEach((row, index) => {
+      if (row.kind !== "head" || !row.collapsed || row.stands.size === 0) return;
+      if (shown.some((targets) => targets === null || [...row.stands].some((laneId) => targets.has(laneId)))) set.add(index);
+    });
+    return set;
+  }, [rows, overlays, range.start, range.end]);
+  const extents = useMemo(() => timelineRowExtents(rows.map((row, index) => row.kind === "head" ? { kind: "head", subRows: strips.has(index) ? 1 : 0 } : { kind: "lane", subRows: row.subRows })), [rows, strips]);
+  const virtual = lanes.length + (groups?.length ?? 0) > virtualizeAbove;
+  const fixed = virtual || groups !== void 0 || overlays.some((overlay) => overlay.laneIds !== void 0) || markers.some((marker) => marker.laneIds !== void 0);
+  useEffect(() => {
+    if (!virtual || !scroller) return void 0;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const probe = probeRef.current;
+      if (probe) {
+        const [row, pad, head] = Array.from(probe.children, (child) => child.getBoundingClientRect().height);
+        if (row && pad && head) setUnits((current) => current.row === row && current.pad === pad && current.head === head ? current : { row, pad, head });
+      }
+      const box = scroller.getBoundingClientRect();
+      const viewport = window.innerHeight || document.documentElement.clientHeight || 0;
+      const shown = Math.min(box.bottom, viewport) - Math.max(box.top, 0);
+      const top = scroller.scrollTop + Math.max(0, -box.top);
+      const next = { top: Math.round(top), height: shown > 0 ? Math.round(shown) : ESTIMATED_VIEWPORT };
+      setView((current) => Math.abs(current.top - next.top) < 8 && current.height === next.height ? current : next);
+    };
+    const schedule = () => {
+      if (frame) return;
+      frame = -1;
+      const handle = requestAnimationFrame(measure);
+      if (frame === -1) frame = handle || 1;
+    };
+    measure();
+    measureViewRef.current = measure;
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("scroll", schedule, { passive: true, capture: true });
+    window.addEventListener("resize", schedule);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    observer?.observe(scroller);
+    return () => {
+      measureViewRef.current = null;
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("scroll", schedule, { capture: true });
+      window.removeEventListener("resize", schedule);
+      observer?.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [virtual, scroller]);
+  const px = (extent) => extent.subRows * units.row + extent.lanes * units.pad + extent.heads * units.head;
+  const offsets = useMemo(() => virtual ? extents.map(px) : [], [virtual, extents, units]);
+  const overscan = OVERSCAN_ROWS * units.row;
+  const pinned = focusId === void 0 ? -1 : rowOfItem.get(focusId) ?? -1;
+  const focusedRow = useMemo(() => focusRowKey === null ? -1 : rows.findIndex((row) => row.key === focusRowKey), [rows, focusRowKey]);
+  const anchorRow = useMemo(() => anchorKey === null ? -1 : rows.findIndex((row) => row.key === anchorKey), [rows, anchorKey]);
+  const { mounted, windowStart } = useMemo(() => {
+    if (!virtual) return { mounted: rows.map((_, index) => index), windowStart: 0 };
+    const window_ = timelineWindow(offsets, view.top, view.top + view.height, { overscan });
+    const list = [];
+    for (let index = window_.start; index < window_.end; index++) list.push(index);
+    for (const index of /* @__PURE__ */ new Set([pinned, focusedRow, anchorRow])) {
+      if (index !== -1 && (index < window_.start || index >= window_.end)) list.push(index);
+    }
+    list.sort((a, b) => a - b);
+    return { mounted: list, windowStart: window_.start };
+  }, [virtual, rows, offsets, view, overscan, pinned, focusedRow, anchorRow]);
+  useIsomorphicLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    if (anchorKey === null || !anchor || anchor.key !== anchorKey) return;
+    anchorRef.current = null;
+    setAnchorKey(null);
+    const body2 = bodyRef.current;
+    const row = body2 ? Array.from(body2.children).find((child) => child.getAttribute("data-row-key") === anchor.key) : void 0;
+    if (!row || !scroller) return;
+    const delta = row.getBoundingClientRect().top - anchor.top;
+    if (Math.abs(delta) < 1) return;
+    const view_ = scroller.ownerDocument.defaultView;
+    const scrolls = (element) => {
+      const overflow = view_?.getComputedStyle(element).overflowY;
+      return (overflow === "auto" || overflow === "scroll") && element.scrollHeight > element.clientHeight + 1;
+    };
+    let holder = scroller;
+    while (holder && !scrolls(holder)) holder = holder.parentElement;
+    if (holder) holder.scrollTop += delta;
+    else view_?.scrollBy(0, delta);
+    measureViewRef.current?.();
+  }, [anchorKey, barShare]);
+  const barMounted = (rowIndex, placed) => {
+    if (!virtual || placed.item.id === focusId) return true;
+    const top = offsets[rowIndex] + placed.row * units.row;
+    return top + units.row + units.pad > view.top - overscan && top < view.top + view.height + overscan;
+  };
+  const findBar = (itemId) => {
+    for (const candidate of Array.from(rootRef.current?.querySelectorAll("[data-timeline-item]") ?? [])) {
+      if (candidate.getAttribute("data-timeline-item") === itemId) return candidate;
+    }
+    return null;
+  };
   const focusItem = (itemId) => {
-    if (!itemId) return;
+    if (itemId === void 0) return;
     setActiveId(itemId);
-    requestAnimationFrame(() => rootRef.current?.querySelector(`[data-timeline-item="${CSS.escape(itemId)}"]`)?.focus());
+    setFocusRequest({ id: itemId });
+  };
+  useEffect(() => {
+    if (focusRequest) findBar(focusRequest.id)?.focus();
+  }, [focusRequest]);
+  const itemById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const row of laneRows) for (const p of row.placed) if (!map.has(p.item.id)) map.set(p.item.id, p.item);
+    return map;
+  }, [laneRows]);
+  const stepDelta = timelineStepDelta(step);
+  const deltaFor = (ms) => {
+    const steps = Math.round(ms / step);
+    return { days: steps * stepDelta.days, minutes: steps * stepDelta.minutes };
+  };
+  const live = useRef({ itemById, timeZone, range, step, onProposeMove, canMove, deltaFor, labels, fmtInstant });
+  live.current = { itemById, timeZone, range, step, onProposeMove, canMove, deltaFor, labels, fmtInstant };
+  const dragRef = useRef(null);
+  const suppressClick = useRef(false);
+  const refocus = useRef(null);
+  useEffect(() => {
+    if (ghost && !itemById.has(ghost.id)) setGhost(null);
+  }, [ghost, itemById]);
+  useEffect(() => {
+    const wanted = refocus.current;
+    if (!wanted || !rootRef.current) return;
+    const active = document.activeElement;
+    const lost = !active || active === document.body;
+    if (!lost) {
+      if (active.getAttribute("data-item-id") !== wanted) refocus.current = null;
+      return;
+    }
+    findBar(wanted)?.focus();
+  });
+  useEffect(() => () => {
+    dragRef.current?.stop();
+    dragRef.current = null;
+  }, []);
+  useEffect(() => {
+    if (proposing) return;
+    dragRef.current?.stop();
+    dragRef.current = null;
+    if (ghost) {
+      setGhost(null);
+      setAnnouncement("");
+    }
+  }, [proposing]);
+  const send = (itemId, delta) => {
+    const state = live.current;
+    const item = state.itemById.get(itemId);
+    if (!item || !state.onProposeMove || !state.canMove(item) || delta.days === 0 && delta.minutes === 0) {
+      setGhost(null);
+      return;
+    }
+    const proposal = proposeMove(item, delta, state.timeZone);
+    const result = state.onProposeMove(itemId, proposal);
+    setAnnouncement(fillLabel(state.labels.moveSent, { start: state.fmtInstant(proposal.start), end: state.fmtInstant(proposal.end) }));
+    if (result && typeof result.then === "function") {
+      setGhost({ id: itemId, delta, source: "sent", proposal });
+      const clear = () => setGhost((current) => current && current.source === "sent" && current.proposal === proposal ? null : current);
+      result.then(clear, clear);
+    } else setGhost(null);
   };
   const commit = (item, delta, mode) => {
-    if (!onMoveItem || delta === 0) return;
+    const callback = mode === "move" ? onMoveItem : onResizeItem;
+    if (!callback || delta === 0) return;
     const next = shiftSpan(item, delta, mode, step);
-    onMoveItem(item.id, next);
+    callback(item.id, next);
     setAnnouncement(mode === "move" ? fillLabel(labels.moved, { title: item.title, start: fmtInstant(next.start), end: fmtInstant(next.end) }) : fillLabel(labels.resized, { title: item.title, end: fmtInstant(next.end) }));
   };
-  const onItemKeyDown = (event, laneIndex, placed, index) => {
+  const onItemKeyDown = (event, rowIndex, placed, index) => {
     const item = placed[index].item;
+    const pending = ghost && ghost.id === item.id && ghost.source === "keys" ? ghost.delta : null;
+    if (event.key === "Enter" && pending) {
+      event.preventDefault();
+      refocus.current = item.id;
+      setAnnouncement("");
+      send(item.id, pending);
+      return;
+    }
+    if (event.key === "Escape" && pending) {
+      event.preventDefault();
+      event.stopPropagation();
+      setGhost(null);
+      setAnnouncement(labels.moveCancelled);
+      return;
+    }
     const horizontal = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
-    if (horizontal && event.shiftKey && movable(item)) {
+    if (horizontal && event.shiftKey && event.altKey) {
+      if (canResize(item)) {
+        event.preventDefault();
+        commit(item, horizontal * step, "resize");
+      }
+      return;
+    }
+    if (horizontal && event.shiftKey && proposing && canMove(item)) {
       event.preventDefault();
-      commit(item, horizontal * step, event.altKey ? "resize" : "move");
+      const base = pending ?? { days: 0, minutes: 0 };
+      const next = { days: base.days + horizontal * stepDelta.days, minutes: base.minutes + horizontal * stepDelta.minutes };
+      if (next.days === 0 && next.minutes === 0) {
+        setGhost(null);
+        setAnnouncement(labels.moveCancelled);
+        return;
+      }
+      const proposal = proposeMove(item, next, timeZone);
+      setGhost({ id: item.id, delta: next, source: "keys", proposal });
+      const proposed = fillLabel(labels.moveProposed, { start: fmtInstant(proposal.start), end: fmtInstant(proposal.end) });
+      setAnnouncement(proposal.adjusted ? `${fillLabel(labels.gapForward, { time: zonedTimeOfDay(proposal.start, timeZone) })} ${proposed}` : proposed);
+      return;
+    }
+    if (horizontal && event.shiftKey && stepping && canMove(item)) {
+      event.preventDefault();
+      commit(item, horizontal * step, "move");
       return;
     }
     if (horizontal) {
@@ -110,134 +475,393 @@ function SchedulingTimeline({
     if (vertical) {
       event.preventDefault();
       const start = Date.parse(item.start);
-      for (let l = laneIndex + vertical; l >= 0 && l < laneLayouts.length; l += vertical) {
-        const candidates = laneLayouts[l].placed;
-        if (candidates.length === 0) continue;
-        const nearest = candidates.reduce((best, p) => Math.abs(Date.parse(p.item.start) - start) < Math.abs(Date.parse(best.item.start) - start) ? p : best);
+      for (let r = rowIndex + vertical; r >= 0 && r < rows.length; r += vertical) {
+        const row = rows[r];
+        if (row.kind !== "lane" || row.placed.length === 0) continue;
+        const nearest = row.placed.reduce((best, p) => Math.abs(Date.parse(p.item.start) - start) < Math.abs(Date.parse(best.item.start) - start) ? p : best);
         focusItem(nearest.item.id);
         return;
       }
     }
   };
-  const onPointerDown = (event, item) => {
-    if (!movable(item) || event.button !== 0) return;
+  const onStepPointerDown = (event, item) => {
+    if (event.button !== 0) return;
     const track = event.currentTarget.closest(".uix-scheduling-timeline__track");
     if (!track) return;
     event.currentTarget.setPointerCapture?.(event.pointerId);
-    setDrag({ id: item.id, x: event.clientX, width: track.getBoundingClientRect().width, delta: 0, moved: false });
+    setStepDrag({ id: item.id, x: event.clientX, width: track.getBoundingClientRect().width, delta: 0, moved: false });
   };
-  const onPointerMove = (event) => {
-    if (!drag) return;
-    const dx = event.clientX - drag.x;
-    const delta = pixelsToMs(dx, drag.width, range, step);
-    if (delta !== drag.delta || !drag.moved && Math.abs(dx) > 3) setDrag({ ...drag, delta, moved: drag.moved || Math.abs(dx) > 3 });
+  const onStepPointerMove = (event) => {
+    if (!stepDrag) return;
+    const dx = event.clientX - stepDrag.x;
+    const delta = pixelsToMs(dx, stepDrag.width, range, step);
+    if (delta !== stepDrag.delta || !stepDrag.moved && Math.abs(dx) > 3) setStepDrag({ ...stepDrag, delta, moved: stepDrag.moved || Math.abs(dx) > 3 });
   };
-  const onPointerUp = (item) => {
-    if (!drag || drag.id !== item.id) return;
-    if (drag.moved) commit(item, drag.delta, "move");
-    setDrag(drag.moved ? { ...drag, delta: 0 } : null);
-    if (drag.moved) window.setTimeout(() => setDrag(null), 0);
+  const onStepPointerUp = (item) => {
+    if (!stepDrag || stepDrag.id !== item.id) return;
+    if (stepDrag.moved) commit(item, stepDrag.delta, "move");
+    setStepDrag(stepDrag.moved ? { ...stepDrag, delta: 0 } : null);
+    if (stepDrag.moved) window.setTimeout(() => setStepDrag(null), 0);
   };
-  const nowPos = now ? placeSpan({ start: now, end: now }, range) : null;
-  const overlaysFor = (laneId) => overlays.filter((o) => !o.laneId || o.laneId === laneId);
-  const markersFor = (laneId) => markers.filter((m) => !m.laneId || m.laneId === laneId);
+  const onProposalPointerDown = (event, item) => {
+    if (event.button !== 0 || dragRef.current) return;
+    const track = event.currentTarget.closest(".uix-scheduling-timeline__track");
+    if (!track) return;
+    const finish = (drop) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      drag.stop();
+      dragRef.current = null;
+      if (!drag.moved) return;
+      suppressClick.current = true;
+      setTimeout(() => {
+        suppressClick.current = false;
+      }, 0);
+      if (drop && !drag.dropped) send(drag.id, live.current.deltaFor(drag.ms));
+      else setGhost(null);
+    };
+    const onMove = (move) => {
+      const drag = dragRef.current;
+      if (!drag || move.pointerId !== drag.pointerId) return;
+      if (move.buttons === 0 && move.pointerType === "mouse") {
+        finish(false);
+        return;
+      }
+      if (drag.dropped) return;
+      const dx = move.clientX - drag.x;
+      if (!drag.moved && Math.hypot(dx, move.clientY - drag.y) < DRAG_THRESHOLD) return;
+      drag.moved = true;
+      const state = live.current;
+      const ms = pixelsToMs(dx, drag.width, state.range, state.step);
+      if (ms === drag.ms) return;
+      drag.ms = ms;
+      const dragged = state.itemById.get(drag.id);
+      const delta = state.deltaFor(ms);
+      setGhost(dragged && ms !== 0 ? { id: drag.id, delta, source: "pointer", proposal: proposeMove(dragged, delta, state.timeZone) } : null);
+    };
+    const onUp = (up) => {
+      if (up.pointerId === dragRef.current?.pointerId) finish(true);
+    };
+    const onCancel = (cancel) => {
+      if (cancel.pointerId === dragRef.current?.pointerId) finish(false);
+    };
+    const onKey = (key) => {
+      const drag = dragRef.current;
+      if (key.key !== "Escape" || !drag?.moved || drag.dropped) return;
+      key.preventDefault();
+      key.stopPropagation();
+      drag.dropped = true;
+      setGhost(null);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    window.addEventListener("keydown", onKey, true);
+    dragRef.current = {
+      id: item.id,
+      pointerId: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      width: track.getBoundingClientRect().width,
+      moved: false,
+      dropped: false,
+      ms: 0,
+      stop: () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onCancel);
+        window.removeEventListener("keydown", onKey, true);
+      }
+    };
+  };
+  const toggleGroup = (group) => {
+    if (onToggleGroup) {
+      onToggleGroup(group.id);
+      return;
+    }
+    setSelfCollapsed((current) => ({ ...current, [group.id]: !(current[group.id] ?? !!group.collapsed) }));
+  };
+  const statusOf = (item) => item.status ?? (item.state === "in-progress" ? "live" : "committed");
+  const markersOf = (item) => {
+    const flagged = item.state === "conflicted" || item.state === "blackout-violation";
+    return flagged ? [...item.markers ?? [], { id: "state", label: labels.states[item.state], emphasis: "warning" }] : item.markers ?? [];
+  };
+  const stateText = (item) => item.state ? labels.states[item.state] : item.status ? labels.statuses[item.status] : labels.states.scheduled;
+  const itemName = (item, conflict) => item.accessibleName ?? [fillLabel(labels.item, { title: item.title, state: stateText(item), start: fmtInstant(item.start), end: fmtInstant(item.end), conflict: conflict ? labels.conflict : "" }), ...(item.markers ?? []).map((marker) => marker.label)].join(", ");
+  const dataState = (item) => item.state ?? (item.band === void 0 && item.status === void 0 && item.markers === void 0 && item.accessibleName === void 0 ? "scheduled" : void 0);
+  const overlayWords = (overlay) => [overlay.kindLabel ?? (overlay.kind ? labels.overlays[overlay.kind] : void 0), overlay.label, overlay.scopeLabel].filter(Boolean).join(", ");
+  const overlayName = (overlay) => overlay.accessibleName ?? fillLabel(labels.overlay, { title: overlayWords(overlay), start: fmtInstant(overlay.start), end: fmtInstant(overlay.end) });
+  const patternOf = (overlay) => overlay.pattern ?? (overlay.kind === void 0 || overlay.kind === "maintenance" ? "solid" : "diagonal");
   const trackStyle = { minWidth: `calc(${Math.max(ticks.length - 1, 1)} * ${tickWidth ?? TICK_WIDTH[scale]})` };
-  const band = (o, showLabel) => {
-    const pos = placeSpan(o, range);
-    return pos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay", "data-kind": o.kind, style: { left: `${pos.left}%`, width: `${pos.width}%` }, children: showLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay-label", children: o.label }) }, o.id);
-  };
-  return /* @__PURE__ */ jsxs("section", { ref: rootRef, className: cx("uix-scheduling-timeline", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
-    loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__state", role: "alert", children: [
-      /* @__PURE__ */ jsx("p", { children: error }),
-      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      (overlays.length > 0 || markers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-visually-hidden", children: [
-        /* @__PURE__ */ jsx("p", { id: `${id}-windows`, children: labels.windows }),
-        /* @__PURE__ */ jsxs("ul", { "aria-labelledby": `${id}-windows`, children: [
-          overlays.map((o) => /* @__PURE__ */ jsxs("li", { children: [
-            labels.overlays[o.kind],
-            ": ",
-            o.label,
-            ", ",
-            fmtInstant(o.start),
-            " \u2013 ",
-            fmtInstant(o.end)
-          ] }, o.id)),
-          markers.map((m) => /* @__PURE__ */ jsxs("li", { children: [
-            m.label,
-            ", ",
-            fmtInstant(m.at)
-          ] }, m.id))
-        ] })
+  const nowPos = now ? placeSpan({ start: now, end: now }, range) : null;
+  const stretchOf = (index) => {
+    const row = rows[index];
+    if (row.kind === "lane") return { row: index, from: extents[index], to: extents[index + 1] };
+    if (!strips.has(index)) return null;
+    const top = extents[index];
+    return { row: index, from: { subRows: top.subRows, lanes: top.lanes, heads: top.heads + 1 }, to: extents[index + 1] };
+  };
+  const labelTopIn = (run) => {
+    for (const stretch of run) {
+      if (!virtual) return [extentCss(stretch.from)];
+      if (stretch.row < windowStart) continue;
+      const top = px(stretch.from);
+      if (top > view.top + view.height + overscan) return [];
+      if (top >= view.top) return [extentCss(stretch.from)];
+    }
+    return [];
+  };
+  const scopeOf = (targets) => {
+    if (targets === null) {
+      const all = rows.flatMap((_, index) => stretchOf(index) ?? []);
+      const onLane = labelTopIn(all.filter((stretch) => rows[stretch.row].kind === "lane"));
+      return { scope: "all", labelTops: onLane.length > 0 ? onLane : labelTopIn(all) };
+    }
+    const covers = (row) => row.kind === "lane" ? targets.has(row.lane.id) : row.collapsed && [...row.stands].some((laneId) => targets.has(laneId));
+    const runs = [];
+    rows.forEach((row, index) => {
+      const stretch = covers(row) ? stretchOf(index) : null;
+      if (!stretch) return;
+      const last = runs[runs.length - 1];
+      if (last && sameExtent(last[last.length - 1].to, stretch.from)) last.push(stretch);
+      else runs.push([stretch]);
+    });
+    if (runs.length === 0) return null;
+    const clip = `polygon(${runs.map((run) => {
+      const from = extentCss(run[0].from);
+      const to = extentCss(run[run.length - 1].to);
+      return `0 ${from}, 100% ${from}, 100% ${to}, 0 ${to}`;
+    }).join(", ")})`;
+    return { scope: "lanes", clip, labelTops: runs.flatMap(labelTopIn) };
+  };
+  const renderOverlay = (overlay, key, scope) => {
+    const pos = placeSpan(overlay, range);
+    if (!pos || !scope) return null;
+    const shared = {
+      className: "uix-scheduling-timeline__overlay",
+      "data-overlay-id": overlay.id,
+      "data-pattern": patternOf(overlay),
+      "data-kind": overlay.kind,
+      "data-scope": scope.scope,
+      style: { left: `${pos.left}%`, width: `${pos.width}%`, ...vars({ "--uix-timeline-clip": scope.clip }) }
+    };
+    const text = scope.labelTops.map((top) => /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-timeline__overlay-label", style: vars({ "--uix-timeline-label-top": top }), children: [
+      overlay.kindLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay-kind", children: overlay.kindLabel }),
+      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay-name", children: overlay.label }),
+      overlay.scopeLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay-scope", children: overlay.scopeLabel })
+    ] }, top));
+    return onSelectOverlay ? /* @__PURE__ */ jsx("button", { type: "button", ...shared, "aria-label": overlayName(overlay), onClick: () => onSelectOverlay(overlay), children: text }, key) : /* @__PURE__ */ jsx("span", { ...shared, "aria-hidden": "true", children: text }, key);
+  };
+  const renderMarker = (marker, key, scope) => {
+    const pos = placeSpan({ start: marker.at, end: marker.at }, range);
+    if (!pos || !scope) return null;
+    return /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__marker", "data-marker-id": marker.id, "data-scope": scope.scope, style: { left: `${pos.left}%`, ...vars({ "--uix-timeline-clip": scope.clip }) }, title: marker.label, "aria-hidden": "true" }, key);
+  };
+  const overlayKeys = uniqueKeys(overlays.map((overlay) => overlay.id));
+  const markerKeys = uniqueKeys(markers.map((marker) => marker.id));
+  const inLayer = (target) => fixed || lanesOf(target) === null;
+  const columnNoteList = columnNotes ? Object.keys(columnNotes).flatMap((date) => {
+    const node = columnNotes[date];
+    if (node == null || node === false) return [];
+    let pos = null;
+    try {
+      const bounds = zonedDayBounds(date, timeZone);
+      pos = placeSpan({ start: bounds.start.toISOString(), end: bounds.end.toISOString() }, range);
+    } catch {
+      pos = null;
+    }
+    return pos && pos.width > 0 ? [{ date, node, pos }] : [];
+  }) : [];
+  const renderItems = (row, rowIndex) => row.placed.map((p, index) => {
+    if (!barMounted(rowIndex, p)) return null;
+    const item = p.item;
+    const dragging = stepDrag?.id === item.id && stepDrag.moved;
+    const shown = dragging && stepDrag ? placeSpan(shiftSpan(item, stepDrag.delta, "move", step), range) ?? p : p;
+    const movable = canMove(item);
+    const described = movable || canResize(item);
+    const itemMarkers = markersOf(item);
+    return /* @__PURE__ */ jsx("li", { className: "uix-scheduling-timeline__slot", style: { left: `${shown.left}%`, width: `${shown.width}%`, ...vars({ "--uix-timeline-row": p.row }) }, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "uix-scheduling-timeline__item",
+        "data-timeline-item": item.id,
+        "data-item-id": item.id,
+        title: item.title,
+        "data-band": item.band ?? "none",
+        "data-status": statusOf(item),
+        "data-state": dataState(item),
+        "data-conflict": p.conflict || void 0,
+        "data-clipped-start": p.clippedStart || void 0,
+        "data-clipped-end": p.clippedEnd || void 0,
+        "data-movable": movable || void 0,
+        "data-dragging": dragging || void 0,
+        tabIndex: focusId === item.id ? 0 : -1,
+        "aria-label": itemName(item, p.conflict),
+        "aria-describedby": described ? hintId : void 0,
+        onFocus: () => setActiveId(item.id),
+        onBlur: proposing ? () => {
+          refocus.current = null;
+          if (ghost && ghost.id === item.id && ghost.source === "keys") {
+            setGhost(null);
+            setAnnouncement(labels.moveCancelled);
+          }
+        } : void 0,
+        onKeyDown: (event) => onItemKeyDown(event, rowIndex, row.placed, index),
+        onPointerDown: !movable ? void 0 : proposing ? (event) => onProposalPointerDown(event, item) : (event) => onStepPointerDown(event, item),
+        onPointerMove: stepping ? onStepPointerMove : void 0,
+        onPointerUp: stepping ? () => onStepPointerUp(item) : void 0,
+        onPointerCancel: stepping ? () => setStepDrag(null) : void 0,
+        onClick: () => {
+          if (stepDrag?.moved) return;
+          if (ghost && ghost.id === item.id && ghost.source === "keys") return;
+          onSelectItem?.(item);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-title", children: renderItem?.(item) ?? item.title }),
+          item.meta && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-meta", children: item.meta }),
+          itemMarkers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-markers", children: itemMarkers.map((marker) => /* @__PURE__ */ jsx(ItemMarker, { marker }, marker.id)) })
+        ]
+      }
+    ) }, row.keys[index]);
+  });
+  const renderRow = (row, rowIndex) => {
+    if (row.kind === "head") {
+      const { group, collapsed } = row;
+      return /* @__PURE__ */ jsxs("div", { className: cx("uix-scheduling-timeline__row", "uix-scheduling-timeline__row--group", collapsed && "uix-scheduling-timeline__row--summary"), "data-row-key": row.key, "data-group-id": group.id, "data-collapsed": collapsed || void 0, "data-strip": strips.has(rowIndex) || void 0, children: [
+        /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__group-head", children: /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__group-label", children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-timeline__group-toggle", "aria-expanded": !collapsed, onClick: () => toggleGroup(group), children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__group-chevron", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__group-name", id: `${id}-group-${row.groupIndex}`, children: group.label })
+          ] }),
+          group.meta != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__group-meta", children: group.meta }),
+          collapsed && group.summary && /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-timeline__group-summary", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__group-count", children: fillLabel(labels.groupSummary, { count: group.summary.count }) }),
+            group.summary.markers && group.summary.markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-markers", children: group.summary.markers.map((marker) => /* @__PURE__ */ jsx(ItemMarker, { marker, showLabel: true }, marker.id)) })
+          ] })
+        ] }) }),
+        strips.has(rowIndex) && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__group-strip", "aria-hidden": "true" })
+      ] }, row.key);
+    }
+    const { lane } = row;
+    const laneLabelId = `${id}-lane-${row.laneIndex}`;
+    const ghostPlaced = ghost ? row.placed.find((p) => p.item.id === ghost.id) : void 0;
+    const ghostPos = ghost && ghostPlaced && rowOfItem.get(ghost.id) === rowIndex ? placeSpan(ghost.proposal, range) : null;
+    return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row", "data-row-key": row.key, "data-lane-id": lane.id, style: vars({ "--uix-timeline-rows": row.subRows }), children: [
+      /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__lane-label", id: laneLabelId, children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-name", children: lane.label }),
+        lane.meta != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-meta", children: lane.meta })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__scroller", children: /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__grid", children: [
-        /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--axis", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__lane-label", children: labels.lanes }),
-          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__track uix-scheduling-timeline__axis", style: trackStyle, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, children: tick.offset < 100 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick-label", children: fmtTick(tick.at) }) }, tick.at)) })
-        ] }),
-        laneLayouts.map(({ lane, placed }, laneIndex) => {
-          const rows = placed.reduce((max, p) => Math.max(max, p.row + 1), 1);
-          const laneLabelId = `${id}-lane-${laneIndex}`;
-          return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row", style: { "--uix-timeline-rows": rows }, children: [
-            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__lane-label", id: laneLabelId, children: [
-              /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-name", children: lane.label }),
-              lane.meta != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-meta", children: lane.meta })
+      /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: [
+        overlays.map((overlay, index) => !inLayer(overlay) && lanesOf(overlay).has(lane.id) ? renderOverlay(overlay, overlayKeys[index], IN_LANE) : null),
+        markers.map((marker, index) => !inLayer(marker) && lanesOf(marker).has(lane.id) ? renderMarker(marker, markerKeys[index], IN_LANE) : null),
+        /* @__PURE__ */ jsx("ul", { className: "uix-scheduling-timeline__items", "aria-labelledby": row.groupIndex === void 0 ? laneLabelId : `${id}-group-${row.groupIndex} ${laneLabelId}`, children: renderItems(row, rowIndex) }),
+        ghostPos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__ghost", "aria-hidden": "true", "data-sent": ghost?.source === "sent" || void 0, style: { left: `${ghostPos.left}%`, width: `${ghostPos.width}%`, ...vars({ "--uix-timeline-row": ghostPlaced.row }) } })
+      ] })
+    ] }, row.key);
+  };
+  const body = [];
+  let cursor = 0;
+  const spacer = (from, to) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__spacer", "aria-hidden": "true", style: { height: extentCss(between(extents[from], extents[to])) } }, `spacer-${from}`);
+  for (const index of mounted) {
+    if (index > cursor) body.push(spacer(cursor, index));
+    body.push(renderRow(rows[index], index));
+    cursor = index + 1;
+  }
+  if (cursor < rows.length) body.push(spacer(cursor, rows.length));
+  const listed = onSelectOverlay ? EMPTY_OVERLAYS : overlays;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: rootRef,
+      className: cx("uix-scheduling-timeline", className),
+      "aria-label": fillLabel(labels.region, { timeZone }),
+      "data-fixed": fixed || void 0,
+      onClickCapture: (event) => {
+        if (suppressClick.current) {
+          suppressClick.current = false;
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      children: [
+        notice != null && notice !== false && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__notice", children: notice }),
+        loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__state", role: "alert", children: [
+          /* @__PURE__ */ jsx("p", { children: error }),
+          onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          (listed.length > 0 || markers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-visually-hidden", children: [
+            /* @__PURE__ */ jsx("p", { id: `${id}-windows`, children: labels.windows }),
+            /* @__PURE__ */ jsxs("ul", { "aria-labelledby": `${id}-windows`, children: [
+              listed.map((o, index) => /* @__PURE__ */ jsx("li", { children: o.accessibleName ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                o.kindLabel === void 0 && o.kind ? `${labels.overlays[o.kind]}: ${o.label}${o.scopeLabel ? `, ${o.scopeLabel}` : ""}` : overlayWords(o),
+                ", ",
+                fmtInstant(o.start),
+                " \u2013 ",
+                fmtInstant(o.end)
+              ] }) }, overlayKeys[index])),
+              markers.map((m, index) => /* @__PURE__ */ jsxs("li", { children: [
+                m.label,
+                ", ",
+                fmtInstant(m.at)
+              ] }, markerKeys[index]))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { ref: setScroller, className: "uix-scheduling-timeline__scroller", "data-virtual": virtual || void 0, "data-scroll-y": maxHeight !== void 0 || void 0, style: maxHeight !== void 0 ? { maxHeight } : void 0, children: [
+            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__grid", "data-sub-ticks": minorTicks.length > 0 || void 0, children: [
+              /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--axis", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__lane-label", children: labels.lanes }),
+                /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__track uix-scheduling-timeline__axis", style: trackStyle, children: [
+                  ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, children: tick.offset < 100 && /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-timeline__tick-label", children: [
+                    fmtTick(tick.at),
+                    tick.offsetLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick-offset", children: tick.offsetLabel })
+                  ] }) }, tick.at)),
+                  minorTicks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick", "data-minor": "true", style: { left: `${tick.offset}%` }, children: /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick-label", children: formatTick?.(new Date(tick.at), "hour") ?? tick.label }) }, `minor-${tick.at}`))
+                ] })
+              ] }),
+              columnNoteList.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--notes", children: [
+                /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__lane-label" }),
+                /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: columnNoteList.map(({ date, node, pos }) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__column-note", "data-date": date, style: { left: `${pos.left}%`, width: `${pos.width}%` }, children: node }, date)) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: bodyRef,
+                  className: "uix-scheduling-timeline__body",
+                  onFocus: (event) => setFocusRowKey(event.target.closest?.("[data-row-key]")?.getAttribute("data-row-key") ?? null),
+                  onBlur: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) setFocusRowKey(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__layer", children: [
+                      /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__lane-label", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsxs("div", { ref: setLayerTrack, className: "uix-scheduling-timeline__track", style: trackStyle, children: [
+                        /* @__PURE__ */ jsx("span", { ref: barMinRef, className: "uix-scheduling-timeline__bar-min", "aria-hidden": "true" }),
+                        ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__gridline", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, tick.at)),
+                        minorTicks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__gridline", "data-minor": "true", style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, `minor-${tick.at}`)),
+                        overlays.map((overlay, index) => inLayer(overlay) ? renderOverlay(overlay, overlayKeys[index], scopeOf(lanesOf(overlay))) : null),
+                        markers.map((marker, index) => inLayer(marker) ? renderMarker(marker, markerKeys[index], scopeOf(lanesOf(marker))) : null),
+                        nowPos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now", style: { left: `${nowPos.left}%` }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now-label", children: labels.now }) })
+                      ] })
+                    ] }),
+                    body
+                  ]
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: [
-              ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__gridline", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, tick.at)),
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: overlaysFor(lane.id).map((o) => band(o, laneIndex === 0 || !!o.laneId)) }),
-              nowPos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now", style: { left: `${nowPos.left}%` }, "aria-hidden": "true", children: laneIndex === 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now-label", children: labels.now }) }),
-              markersFor(lane.id).map((m) => {
-                const pos = placeSpan({ start: m.at, end: m.at }, range);
-                return pos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__marker", style: { left: `${pos.left}%` }, title: m.label, "aria-hidden": "true" }, m.id);
-              }),
-              /* @__PURE__ */ jsx("ul", { className: "uix-scheduling-timeline__items", "aria-labelledby": laneLabelId, children: placed.map((p, index) => {
-                const item = p.item;
-                const state = item.state ?? "scheduled";
-                const dragging = drag?.id === item.id && drag.moved;
-                const shown = dragging && drag ? placeSpan(shiftSpan(item, drag.delta, "move", step), range) ?? p : p;
-                return /* @__PURE__ */ jsx("li", { className: "uix-scheduling-timeline__slot", style: { left: `${shown.left}%`, width: `${shown.width}%`, "--uix-timeline-row": p.row }, children: /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "uix-scheduling-timeline__item",
-                    "data-timeline-item": item.id,
-                    title: item.title,
-                    "data-state": state,
-                    "data-conflict": p.conflict || void 0,
-                    "data-clipped-start": p.clippedStart || void 0,
-                    "data-clipped-end": p.clippedEnd || void 0,
-                    "data-movable": movable(item) || void 0,
-                    "data-dragging": dragging || void 0,
-                    tabIndex: focusId === item.id ? 0 : -1,
-                    "aria-label": fillLabel(labels.item, { title: item.title, state: labels.states[state], start: fmtInstant(item.start), end: fmtInstant(item.end), conflict: p.conflict ? labels.conflict : "" }),
-                    "aria-describedby": movable(item) ? `${id}-hint` : void 0,
-                    onFocus: () => setActiveId(item.id),
-                    onKeyDown: (event) => onItemKeyDown(event, laneIndex, placed, index),
-                    onPointerDown: (event) => onPointerDown(event, item),
-                    onPointerMove,
-                    onPointerUp: () => onPointerUp(item),
-                    onPointerCancel: () => setDrag(null),
-                    onClick: () => {
-                      if (drag?.moved) return;
-                      onSelectItem?.(item);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-title", children: renderItem?.(item) ?? item.title }),
-                      item.meta && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-meta", children: item.meta })
-                    ]
-                  }
-                ) }, item.id);
-              }) })
+            virtual && /* @__PURE__ */ jsxs("span", { ref: probeRef, className: "uix-scheduling-timeline__probe", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx("span", {})
             ] })
-          ] }, lane.id);
-        })
-      ] }) }),
-      ordered.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-scheduling-timeline__empty", children: labels.empty })
-    ] }),
-    onMoveItem && /* @__PURE__ */ jsx("span", { id: `${id}-hint`, className: "uix-visually-hidden", children: labels.moveHint }),
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
-  ] });
+          ] }),
+          nothingToShow && /* @__PURE__ */ jsx("p", { className: "uix-scheduling-timeline__empty", children: labels.empty })
+        ] }),
+        hint && /* @__PURE__ */ jsx("span", { id: hintId, className: "uix-visually-hidden", children: hint }),
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
 }
 export {
   DEFAULT_SCHEDULING_TIMELINE_LABELS,