@tensor_1/react 2.33.0 → 2.35.0

package/README.md

@@ -412,6 +412,54 @@ const spanLayout = layoutMonthSpans(spansInSalienceOrder, grid, { timeZone, week
     change stays where it was, so a refused move snaps back by construction. `movable: false` pins an entry.
   - Overlapping items share at most `maxLanes` lanes, fewer in a narrow column; the column "+N" is the consumer's
     `days[date].overflowCount`. `renderEntry(entry, { availableLines })` says how many text lines fit.
+- **Agenda grouped by day** (`agendaGroups`, HAR-1520): the consumer builds the day groups and the calendar renders
+  them in order, each under a heading.
+
+  ```tsx
+  <SchedulingCalendar view="agenda" timeZone="Europe/Berlin" anchorDate="2026-10-07" entries={[]} showHeader={false}
+    agendaGroups={[
+      { date: '2026-10-07', annotations: [hold], rows: firstTen, hiddenCount: 4 },   // "4 not shown — open day"
+      { date: '2026-10-08', rows: [], hiddenCount: 12, continuesCount: 2 },           // the heading stays
+    ]}
+    onSelectEntry={openItem} onSelectOverlay={openWindow} onShowMore={openDay}
+    notice={truncated && <p>Showing the first 500 items.</p>} />
+  ```
+
+  Above `virtualizeAbove` rows (default 200) the agenda is one scroller of 44 px rows and only the rows near the
+  viewport are mounted, on the server too; each window note then has a row of its own under the heading. In a box
+  of 576 px or less those rows are 64 px with three lines: the title, the time, then markers and status. A row
+  there holds one line of title, so `renderEntry` content must fit one line. A row shows its status as words and
+  its markers with their text. Its time is two times of day when the entry starts on that day and ends within a
+  day by the clock; otherwise both ends go through `formatInstant` (pass a short form for narrow screens: an end
+  that does not fit its half of the line is cut), and an `allDay` entry reads `labels.allDay` or the days it
+  covers. Crossing `virtualizeAbove` swaps the two forms, which resets focus and scroll inside the agenda. Type
+  the groups with `SchedulingAgendaGroup`.
+- **A narrow month** (`monthDensity="counts"`): a cell is the date, the consumer's `days[date].count` and its markers.
+  No entry is drawn and none is counted: a row's "+N" is for windows over `windowLaneCap` only. The setting does not
+  touch the week.
+- **Keyboard (HAR-1527).** The month grid, the time grid and the agenda are each **one tab stop**; no item is a
+  tab stop of its own.
+  - Month: arrows move between days, Home/End go to the first/last day shown. **Enter** on a day with items moves
+    into them (ArrowUp/ArrowDown, Home, End between them; Enter calls `onSelectEntry`; **Esc** returns to the day).
+    **Space** or a click on the day number calls `onSelectDate`; so does Enter on a day with no items.
+  - Week/Day time grid: the tab stop is a day head (ArrowLeft/ArrowRight between days). Enter goes into the
+    day's items and windows. On an item, Enter selects it, or confirms a pending move (`onProposeMove`); Esc drops
+    a pending move, otherwise returns to the day head.
+  - Agenda (grouped or flat): ArrowUp/ArrowDown, Home and End walk rows, window notes and "open day", also
+    through the rows a long agenda has not mounted yet.
+  - The keys act on the calendar's own items only: a field or link you render inside a cell or an item keeps its
+    keys. A row's "+N" is reached from the day it opens. An item reached with the pointer takes the tab stop to
+    its day. Esc on an item returns to its day and is not passed on; a second Esc reaches a surrounding dialog.
+  - A day button is named with the date and `days[date].label` (the count and the highest signal), through
+    `labels.dayName` (`'{date}, {label}'`). If your labels already say the date, set `dayName: '{label}'`.
+  - To put focus back on an item after closing your own panel: `querySelector('[data-item-id="…"]')?.focus()`.
+- **Emphasis.** `entry.emphasis: 'highlight' | 'dim'` sets `data-highlight` / `data-dim` on that item in every
+  view. Highlight is a heavier edge in the text colour and a heavier weight, dim is quieter text;
+  neither changes a hue, the line style of the state, or the band's leading edge. With forced colours a
+  highlighted title is underlined and dimmed text is grey.
+- **`<List roving>`**: the items are one tab stop (ArrowUp/ArrowDown, Home, End; Enter or Space activates the
+  focused item's `onClick`). A control inside an item keeps its own tab stop and keys. Items may be wrapped or
+  rendered later by a child component.
 - **Colour.** Every calendar colour is named once at the top of `scheduling-calendar.css` (`--calendar-*`).
 - **Deprecated, still working in 2.x:** `entry.state` / `SchedulingEntryState`, `overlay.kind` /
   `SchedulingOverlayKind` and the `previous` / `next` labels. An entry with `state` is no longer tinted: the two

package/dist/{SchedulingCalendar-C4XVbqZr.d.ts → SchedulingCalendar-B6TakO2h.d.ts}

@@ -97,6 +97,12 @@ interface SchedulingCalendarEntry {
     allDay?: boolean;
     /** `false` keeps this entry where it is when the grid allows moves (`canMove`). */
     movable?: boolean;
+    /**
+     * Draws the item with more or less weight than its neighbours, for example the partners of
+     * the item the user picked (`'highlight'`) against everything else (`'dim'`). It is a line
+     * weight and a quieter text colour, never a hue.
+     */
+    emphasis?: 'highlight' | 'dim';
 }
 interface SchedulingCalendarOverlay {
     id: string;
@@ -123,10 +129,28 @@ interface SchedulingCalendarDay {
     count: number;
     /** The "+N" of the cell. 0 shows none. */
     overflowCount: number;
-    /** The accessible text of the count, e.g. "7 items, 2 need review". */
+    /**
+     * The accessible text of the count, e.g. "7 items, 2 need review". The day's button is named
+     * with the date and this text (`labels.dayName`), so a screen reader hears the date, the count
+     * and the highest signal in one go.
+     */
     label?: string;
     markers?: SchedulingMarker[];
 }
+/** One day of the agenda, built by the consumer. The calendar renders the groups and their rows in the order given. */
+interface SchedulingAgendaGroup {
+    /** The day the group is for (`YYYY-MM-DD`). */
+    date: string;
+    /** Replaces the heading text. Default: the date through `formatDate(date, 'day')`. */
+    heading?: ReactNode;
+    /** Windows that touch the day: one note each beside the heading, never one per row. */
+    annotations?: SchedulingCalendarOverlay[];
+    rows: SchedulingCalendarEntry[];
+    /** Entries of the day that are not in `rows`. Shows "N not shown — open day", which calls `onShowMore`. */
+    hiddenCount?: number;
+    /** Entries that go on into this day and are listed under an earlier one. */
+    continuesCount?: number;
+}
 interface SchedulingLegendItem {
     id: string;
     label: string;
@@ -179,6 +203,8 @@ interface SchedulingCalendarLabels {
     moreSpans?: string;
     /** Accessible name of that control. `{count}` and `{date}` (the first day with a hidden span). */
     moreSpansLabel?: string;
+    /** The name of a day's button when `days[date].label` is given. `{date}` and `{label}` placeholders; use `'{label}'` if your labels already say the date. */
+    dayName?: string;
     /** The accessible text of a day's count when `days[date].label` is not given. `{count}` placeholder. */
     dayCount?: string;
     states: Record<SchedulingEntryState, string>;
@@ -196,6 +222,12 @@ interface SchedulingCalendarLabels {
     topLane?: string;
     /** The cue on the second-day part of an entry that crosses midnight. `{time}` is its start. */
     continuesFrom?: string;
+    /** The time text of an agenda row whose entry has no time of day (`allDay`). */
+    allDay?: string;
+    /** Under an agenda day whose rows are not all listed. `{count}` placeholder. */
+    hiddenInDay?: string;
+    /** Under an agenda day that entries from an earlier day run into. `{count}` placeholder. */
+    continuesInDay?: string;
     /** Read after an item's name when it can be moved. */
     moveHint?: string;
     /** Announced for a pending move. `{start}` and `{end}` placeholders. */
@@ -301,6 +333,23 @@ interface SchedulingCalendarProps {
     emptyNote?: ReactNode;
     /** Called by a click or Enter on a day number. */
     onSelectDate?: (date: string) => void;
+    /**
+     * The agenda as day groups built by the consumer: which entry is listed under which day,
+     * in which order, and how many are left out. When set, `view="agenda"` renders exactly
+     * these, each day under a heading, and never sorts, groups or counts. Unset keeps the flat
+     * list sorted by start.
+     */
+    agendaGroups?: SchedulingAgendaGroup[];
+    /** The heading level of an agenda day. Default 3. */
+    agendaHeadingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Above this many agenda rows only the rows near the viewport are mounted. Default 200. */
+    virtualizeAbove?: number;
+    /**
+     * `'counts'` draws each month cell with the consumer's `days[date].count` and markers
+     * only: no chips and no entry bars, and narrower columns, for a narrow screen. Windows keep
+     * their bar and name. Default `'full'`.
+     */
+    monthDensity?: 'full' | 'counts';
     /**
      * Draws `view="week"` as a time grid: seven day columns on an hour axis. `view="day"` is
      * always a time grid. Default `false`: the week stays seven day cells.
@@ -334,6 +383,6 @@ interface SchedulingCalendarProps {
     labels?: Partial<SchedulingCalendarLabels>;
 }
 /** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
-declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, onSelectOverlay, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, days: dayInfo, dayEntries, spanLayout, windowLaneCap, spanLaneCap, legend, legendCaption, showHeader, notice, emptyNote, onSelectDate, timeGrid, now, canMove, step, onProposeMove, topLaneCrossMidnightMinutes, topLaneCap, maxLanes, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
+declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, onSelectOverlay, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, days: dayInfo, dayEntries, spanLayout, windowLaneCap, spanLaneCap, legend, legendCaption, showHeader, notice, emptyNote, onSelectDate, agendaGroups, agendaHeadingLevel, virtualizeAbove, monthDensity, timeGrid, now, canMove, step, onProposeMove, topLaneCrossMidnightMinutes, topLaneCap, maxLanes, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
 
-export { DEFAULT_SCHEDULING_CALENDAR_LABELS as D, type SchedulingBand as S, type TimeGridEntryContext as T, SchedulingCalendar as a, type SchedulingCalendarDay as b, type SchedulingCalendarEntry as c, type SchedulingCalendarLabels as d, type SchedulingCalendarOverlay as e, type SchedulingCalendarProps as f, type SchedulingCalendarView as g, type SchedulingDatePart as h, type SchedulingEntryState as i, type SchedulingLegendItem as j, type SchedulingMarker as k, type SchedulingMarkerEmphasis as l, type SchedulingOverlayKind as m, type SchedulingOverlayPattern as n, type SchedulingStatus as o, SchedulingTimeGrid as p, type SchedulingTimeGridProps as q };
+export { DEFAULT_SCHEDULING_CALENDAR_LABELS as D, type SchedulingAgendaGroup as S, type TimeGridEntryContext as T, type SchedulingBand as a, SchedulingCalendar as b, type SchedulingCalendarDay as c, type SchedulingCalendarEntry as d, type SchedulingCalendarLabels as e, type SchedulingCalendarOverlay as f, type SchedulingCalendarProps as g, type SchedulingCalendarView as h, type SchedulingDatePart as i, type SchedulingEntryState as j, type SchedulingLegendItem as k, type SchedulingMarker as l, type SchedulingMarkerEmphasis as m, type SchedulingOverlayKind as n, type SchedulingOverlayPattern as o, type SchedulingStatus as p, SchedulingTimeGrid as q, type SchedulingTimeGridProps as r };

package/dist/components/List.d.ts

@@ -3,9 +3,16 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 interface ListProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
+    /**
+     * Makes the list one tab stop: ArrowUp and ArrowDown move between its `ListItem`s, Home and
+     * End go to the first and last, Enter and Space activate the focused item (its `onClick`).
+     * Focus stays on the same item across re-renders with the same keys. A roving list is a
+     * client component; without `roving` the list stays server-renderable.
+     */
+    roving?: boolean;
 }
 /** Bordered, rounded list container over `.uix-list`. */
-declare function List({ children, className, ...props }: ListProps): react.JSX.Element;
+declare function List({ children, className, roving, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     meta?: ReactNode;

package/dist/components/List.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function List({ children, className, ...props }) {
+import { RovingList } from "./ListRoving.js";
+function List({ children, className, roving, ...props }) {
+  if (roving) return /* @__PURE__ */ jsx(RovingList, { className, ...props, children });
   return /* @__PURE__ */ jsx("div", { className: cx("uix-list", className), ...props, children });
 }
 function ListItem({ title, meta, trail, leading, children, className, ...props }) {

package/dist/components/ListRoving.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * `List` with `roving`: the items of the list are one tab stop. ArrowUp and ArrowDown move
+ * between them, Home and End go to the first and last, Enter and Space activate the focused
+ * item (its `onClick`). A control inside an item keeps its own tab stop and its own keys.
+ * Internal: rendered by `List`, which stays a server component without it.
+ */
+declare function RovingList({ children, className, onKeyDown, onFocus, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+export { RovingList };

package/dist/components/ListRoving.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "../cx.js";
+import { syncRovingStop } from "../roving.js";
+function RovingList({ children, className, onKeyDown, onFocus, ...props }) {
+  const ref = useRef(null);
+  const stop = useRef({ node: null, index: 0 });
+  const items = () => Array.from(ref.current?.querySelectorAll(".uix-list__item") ?? []).filter((element) => element.closest(".uix-list") === ref.current);
+  const sync = (next) => {
+    const all = items();
+    for (const element of all) if (!element.hasAttribute("role")) element.setAttribute("role", "listitem");
+    stop.current = syncRovingStop(all, stop.current, next);
+  };
+  useEffect(() => {
+    sync();
+  });
+  useEffect(() => {
+    const list = ref.current;
+    if (!list || typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(() => sync());
+    observer.observe(list, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const all = items();
+    const index = all.indexOf(event.target);
+    if (index === -1) return;
+    const target = event.key === "ArrowDown" ? index + 1 : event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? all.length - 1 : null;
+    if (target !== null) {
+      event.preventDefault();
+      const next = all[Math.max(0, Math.min(all.length - 1, target))];
+      sync(next);
+      next.focus();
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      all[index].click();
+    }
+  };
+  const handleFocus = (event) => {
+    onFocus?.(event);
+    const item = items().find((element) => element === event.target);
+    if (item) sync(item);
+  };
+  return /* @__PURE__ */ jsx("div", { ref, role: "list", ...props, className: cx("uix-list", "uix-list--roving", className), onKeyDown: handleKeyDown, onFocus: handleFocus, children });
+}
+export {
+  RovingList
+};

package/dist/components/SchedulingAgenda.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { S as SchedulingAgendaGroup, e as SchedulingCalendarLabels, i as SchedulingDatePart, d as SchedulingCalendarEntry, l as SchedulingMarker, f as SchedulingCalendarOverlay } from '../SchedulingCalendar-B6TakO2h.js';
+import '../calendar-model.js';
+import '../scheduling-calendar-model.js';
+
+/** The height of one row of the virtualised agenda, in px. The stylesheet uses the same number. */
+declare const AGENDA_VIRTUAL_ROW = 44;
+interface SchedulingAgendaProps {
+    groups: SchedulingAgendaGroup[];
+    timeZone: string;
+    labels: Required<SchedulingCalendarLabels>;
+    headingLevel: 2 | 3 | 4 | 5 | 6;
+    virtualizeAbove: number;
+    dateText: (date: string, part: SchedulingDatePart) => string;
+    formatInstant: (instant: string) => string;
+    entryName: (entry: SchedulingCalendarEntry) => string;
+    entryStatus: (entry: SchedulingCalendarEntry) => string;
+    entryStatusText: (entry: SchedulingCalendarEntry) => string;
+    entryMarkers: (entry: SchedulingCalendarEntry) => SchedulingMarker[];
+    overlayName: (overlay: SchedulingCalendarOverlay) => string;
+    renderEntry?: (entry: SchedulingCalendarEntry) => ReactNode;
+    renderMarker: (marker: SchedulingMarker, showLabel?: boolean) => ReactNode;
+    onSelectEntry?: (entry: SchedulingCalendarEntry) => void;
+    onSelectOverlay?: (overlay: SchedulingCalendarOverlay) => void;
+    onShowMore?: (date: string, entries: SchedulingCalendarEntry[]) => void;
+}
+/** Day headings with their rows, in the consumer's order. */
+declare function SchedulingAgenda(props: SchedulingAgendaProps): react.JSX.Element;
+
+export { AGENDA_VIRTUAL_ROW, SchedulingAgenda, type SchedulingAgendaProps };

package/dist/components/SchedulingAgenda.js

@@ -0,0 +1,258 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { addCalendarDays, zonedDateKey, zonedTimeOfDay } from "../calendar-model.js";
+import { itemDaySpan } from "../scheduling-calendar-model.js";
+import { useVirtualRows } from "../hooks/useVirtualRows.js";
+import { fillLabel } from "../fill-label.js";
+import { syncRovingStop } from "../roving.js";
+const AGENDA_VIRTUAL_ROW = 44;
+const AGENDA_NARROW_WIDTH = 576;
+const AGENDA_NARROW_ROW = 64;
+const AGENDA_VIRTUAL_VIEWPORT = 640;
+function uniqueKeys(ids) {
+  const used = /* @__PURE__ */ new Set();
+  return ids.map((id) => {
+    let key = id;
+    for (let times = 1; used.has(key); times++) key = `${id}#${times}`;
+    used.add(key);
+    return key;
+  });
+}
+function SchedulingAgenda(props) {
+  const rowCount = props.groups.reduce((sum, group) => sum + group.rows.length, 0);
+  const flat = rowCount > props.virtualizeAbove;
+  return /* @__PURE__ */ jsx(AgendaBody, { ...props, flat }, flat ? "flat" : "grouped");
+}
+function AgendaBody({
+  groups,
+  flat,
+  timeZone,
+  labels,
+  headingLevel,
+  dateText,
+  formatInstant,
+  entryName,
+  entryStatus,
+  entryStatusText,
+  entryMarkers,
+  overlayName,
+  renderEntry,
+  renderMarker,
+  onSelectEntry,
+  onSelectOverlay,
+  onShowMore
+}) {
+  const groupKeys = uniqueKeys(groups.map((group) => group.date));
+  const flatRows = [];
+  if (flat) {
+    groups.forEach((group, index) => {
+      const groupKey = groupKeys[index];
+      flatRows.push({ kind: "heading", key: `h-${groupKey}`, group });
+      const noteKeys = uniqueKeys((group.annotations ?? []).map((overlay) => overlay.id));
+      (group.annotations ?? []).forEach((overlay, at) => flatRows.push({ kind: "note", key: `n-${groupKey}-${noteKeys[at]}`, group, overlay }));
+      const rowKeys = uniqueKeys(group.rows.map((entry) => entry.id));
+      group.rows.forEach((entry, at) => flatRows.push({ kind: "entry", key: `e-${groupKey}-${rowKeys[at]}`, group, entry }));
+      if ((group.hiddenCount ?? 0) > 0) flatRows.push({ kind: "hidden", key: `m-${groupKey}`, group });
+      if ((group.continuesCount ?? 0) > 0) flatRows.push({ kind: "continues", key: `c-${groupKey}`, group });
+    });
+  }
+  const [narrow, setNarrow] = useState(false);
+  const virtual = useVirtualRows(flatRows, { rowHeight: narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW, threshold: 0, estimatedViewportHeight: AGENDA_VIRTUAL_VIEWPORT });
+  const scroller = virtual.containerRef;
+  useLayoutEffect(() => {
+    const box = scroller.current;
+    if (!box) return;
+    const measure = () => setNarrow(box.clientWidth > 0 && box.clientWidth <= AGENDA_NARROW_WIDTH);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [scroller]);
+  const grouped = useRef(null);
+  useLayoutEffect(() => {
+    const box = grouped.current;
+    if (!box) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const head = entry.target;
+        head.parentElement?.style.setProperty("--uix-scheduling-calendar-agenda-head", `${Math.ceil(head.getBoundingClientRect().height)}px`);
+      }
+    });
+    box.querySelectorAll(":scope > section > .uix-scheduling-calendar__agenda-head").forEach((head) => observer.observe(head));
+    return () => observer.disconnect();
+  }, [groups]);
+  const stop = useRef({ node: null, index: 0 });
+  const container = () => flat ? scroller.current : grouped.current;
+  const controls = () => Array.from(container()?.querySelectorAll("button") ?? []);
+  const focusStop = (target) => {
+    if (!target) return;
+    stop.current = syncRovingStop(controls(), stop.current, target);
+    target.focus();
+  };
+  const holdsControl = (row2) => row2 !== void 0 && (row2.kind === "entry" || row2.kind === "note" || row2.kind === "hidden" && onShowMore !== void 0);
+  const controlAt = (index) => scroller.current?.querySelector(`[data-flat-index="${index}"] button`) ?? null;
+  const focusIn = (box) => {
+    const tree = box.getRootNode();
+    const active = tree.activeElement ?? null;
+    return active === document.body ? null : active;
+  };
+  const focusIsElsewhere = (box) => {
+    const active = focusIn(box);
+    if (active) return !box.contains(active);
+    const outer = document.activeElement;
+    return box.getRootNode() !== document && outer !== null && outer !== document.body && !outer.contains(box);
+  };
+  const rowHeight = narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW;
+  const scrollToRow = (box, index) => {
+    box.scrollTop = Math.max(0, index * rowHeight - (box.clientHeight - rowHeight) / 2);
+  };
+  const landing = useRef(null);
+  const land = () => {
+    const wanted = landing.current;
+    if (!wanted) return;
+    const box = container();
+    const index = flatRows[wanted.index]?.key === wanted.key ? wanted.index : flatRows.findIndex((row2) => row2.key === wanted.key);
+    if (!box || index === -1 || !holdsControl(flatRows[index]) || focusIsElsewhere(box)) {
+      landing.current = null;
+      return;
+    }
+    const target = controlAt(index);
+    if (target) {
+      landing.current = null;
+      focusStop(target);
+      return;
+    }
+    if (index !== wanted.index) {
+      landing.current = { key: wanted.key, index };
+      scrollToRow(box, index);
+    }
+  };
+  useEffect(() => {
+    const all = controls();
+    stop.current = syncRovingStop(all, stop.current);
+    const box = flat ? scroller.current : null;
+    if (box) {
+      if (all.length === 0 || focusIn(box) === box) box.tabIndex = 0;
+      else box.removeAttribute("tabindex");
+    }
+    land();
+  });
+  const onFocus = (event) => {
+    stop.current = syncRovingStop(controls(), stop.current, event.target);
+  };
+  const onBlur = (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) landing.current = null;
+    if (event.target === event.currentTarget && controls().length > 0) event.currentTarget.removeAttribute("tabindex");
+  };
+  const dropLanding = () => {
+    landing.current = null;
+  };
+  const onKeyDown = (event) => {
+    const from = event.target;
+    if (event.defaultPrevented || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || !controls().includes(from)) return;
+    event.preventDefault();
+    const box = flat ? scroller.current : null;
+    if (!box) {
+      const all = controls();
+      const to = event.key === "Home" ? 0 : event.key === "End" ? all.length - 1 : all.indexOf(from) + (event.key === "ArrowDown" ? 1 : -1);
+      focusStop(all[Math.max(0, Math.min(all.length - 1, to))]);
+      return;
+    }
+    const at = Number(from.closest("[data-flat-index]")?.getAttribute("data-flat-index"));
+    let target = -1;
+    if (event.key === "Home") target = flatRows.findIndex(holdsControl);
+    else if (event.key === "End") {
+      for (let index = flatRows.length - 1; index >= 0 && target === -1; index--) if (holdsControl(flatRows[index])) target = index;
+    } else if (Number.isFinite(at)) {
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      for (let index = at + step; index >= 0 && index < flatRows.length && target === -1; index += step) if (holdsControl(flatRows[index])) target = index;
+    }
+    if (target === -1) return;
+    const mounted = controlAt(target);
+    if (mounted) {
+      landing.current = null;
+      focusStop(mounted);
+      return;
+    }
+    landing.current = { key: flatRows[target].key, index: target };
+    scrollToRow(box, target);
+  };
+  const note = (overlay) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__window", "data-overlay-id": overlay.id, "data-pattern": overlay.pattern ?? "solid", "data-global": overlay.global || void 0, onClick: () => onSelectOverlay?.(overlay), "aria-label": overlayName(overlay), children: /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__window-text", children: [
+    overlay.kindLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
+    /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
+    overlay.scopeLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
+  ] }) });
+  const heading = (group, withNotes) => /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__agenda-head", children: [
+    createElement(`h${headingLevel}`, { className: "uix-scheduling-calendar__agenda-heading" }, group.heading ?? dateText(group.date, "day")),
+    withNotes && group.annotations && group.annotations.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-scheduling-calendar__agenda-notes", children: uniqueKeys(group.annotations.map((overlay) => overlay.id)).map((key, at) => /* @__PURE__ */ jsx("li", { children: note(group.annotations[at]) }, key)) })
+  ] });
+  const timeText = (entry, date) => {
+    const part = (text) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__agenda-time-part", children: text });
+    const dash = /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \u2013 " });
+    if (entry.allDay) {
+      let span;
+      try {
+        span = itemDaySpan(entry.start, entry.end, timeZone);
+      } catch {
+        span = itemDaySpan(entry.start, entry.start, timeZone);
+      }
+      const last = addCalendarDays(span.end, -1);
+      if (span.start === date && last === date) return labels.allDay;
+      return span.start === last ? part(dateText(last, "day")) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        part(dateText(span.start, "day")),
+        dash,
+        part(dateText(last, "day"))
+      ] });
+    }
+    const startTime = zonedTimeOfDay(entry.start, timeZone);
+    const endTime = zonedTimeOfDay(entry.end, timeZone);
+    const endDay = zonedDateKey(entry.end, timeZone);
+    const underItsDay = zonedDateKey(entry.start, timeZone) === date && (endDay === date || endDay === addCalendarDays(date, 1) && endTime < startTime);
+    return underItsDay ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      startTime,
+      dash,
+      endTime
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      part(formatInstant(entry.start)),
+      dash,
+      part(formatInstant(entry.end))
+    ] });
+  };
+  const row = (entry, date) => {
+    const markers = entryMarkers(entry);
+    const name = entry.accessibleName ?? (entry.meta ? `${entryName(entry)}, ${entry.meta}` : entryName(entry));
+    return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__agenda-row", "data-item-id": entry.id, "data-highlight": entry.emphasis === "highlight" || void 0, "data-dim": entry.emphasis === "dim" || void 0, "data-band": entry.band ?? "none", "data-status": entryStatus(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), "aria-label": name, children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__swatch", "aria-hidden": "true", "data-band": entry.band ?? "none", "data-status": entryStatus(entry) }),
+      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__agenda-time", children: timeText(entry, date) }),
+      /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__agenda-main", children: [
+        renderEntry?.(entry) ?? /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__title", children: entry.title }),
+        entry.meta && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__agenda-meta", children: entry.meta })
+      ] }),
+      markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker, true) }, marker.id)) }),
+      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__status", children: entryStatusText(entry) })
+    ] });
+  };
+  const hidden = (group) => {
+    const text = fillLabel(labels.hiddenInDay, { count: group.hiddenCount ?? 0 });
+    return onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__agenda-more", onClick: () => onShowMore(group.date, group.rows), children: text }) : /* @__PURE__ */ jsx("p", { className: "uix-scheduling-calendar__agenda-more", children: text });
+  };
+  const continues = (group) => /* @__PURE__ */ jsx("p", { className: "uix-scheduling-calendar__agenda-continues", children: fillLabel(labels.continuesInDay, { count: group.continuesCount ?? 0 }) });
+  if (groups.length === 0) return /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) });
+  if (flat) {
+    return /* @__PURE__ */ jsx("div", { ref: virtual.containerRef, className: "uix-scheduling-calendar__agenda uix-scheduling-calendar__agenda--virtual", "data-narrow": narrow || void 0, role: "region", "aria-label": labels.agenda, onKeyDown, onFocus, onBlur, onWheel: dropLanding, onPointerDown: dropLanding, children: /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-window", style: { paddingTop: virtual.padTop, paddingBottom: virtual.padBottom }, children: virtual.rows.map((item, at) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-vrow", "data-kind": item.kind, "data-flat-index": virtual.startIndex + at, children: item.kind === "heading" ? heading(item.group, false) : item.kind === "note" ? note(item.overlay) : item.kind === "entry" ? row(item.entry, item.group.date) : item.kind === "hidden" ? hidden(item.group) : continues(item.group) }, item.key)) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: grouped, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, onKeyDown, onFocus, children: groups.map((group, index) => {
+    const rowKeys = uniqueKeys(group.rows.map((entry) => entry.id));
+    return /* @__PURE__ */ jsxs("section", { className: "uix-scheduling-calendar__agenda-group", "data-date": group.date, children: [
+      heading(group, true),
+      group.rows.length > 0 && /* @__PURE__ */ jsx("ol", { className: "uix-scheduling-calendar__agenda-rows", children: group.rows.map((entry, at) => /* @__PURE__ */ jsx("li", { children: row(entry, group.date) }, rowKeys[at])) }),
+      (group.hiddenCount ?? 0) > 0 && hidden(group),
+      (group.continuesCount ?? 0) > 0 && continues(group)
+    ] }, groupKeys[index]);
+  }) });
+}
+export {
+  AGENDA_VIRTUAL_ROW,
+  SchedulingAgenda
+};

package/dist/components/SchedulingCalendar.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';
-export { D as DEFAULT_SCHEDULING_CALENDAR_LABELS, S as SchedulingBand, a as SchedulingCalendar, b as SchedulingCalendarDay, c as SchedulingCalendarEntry, d as SchedulingCalendarLabels, e as SchedulingCalendarOverlay, f as SchedulingCalendarProps, g as SchedulingCalendarView, h as SchedulingDatePart, i as SchedulingEntryState, j as SchedulingLegendItem, k as SchedulingMarker, l as SchedulingMarkerEmphasis, m as SchedulingOverlayKind, n as SchedulingOverlayPattern, o as SchedulingStatus } from '../SchedulingCalendar-C4XVbqZr.js';
+export { D as DEFAULT_SCHEDULING_CALENDAR_LABELS, S as SchedulingAgendaGroup, a as SchedulingBand, b as SchedulingCalendar, c as SchedulingCalendarDay, d as SchedulingCalendarEntry, e as SchedulingCalendarLabels, f as SchedulingCalendarOverlay, g as SchedulingCalendarProps, h as SchedulingCalendarView, i as SchedulingDatePart, j as SchedulingEntryState, k as SchedulingLegendItem, l as SchedulingMarker, m as SchedulingMarkerEmphasis, n as SchedulingOverlayKind, o as SchedulingOverlayPattern, p as SchedulingStatus } from '../SchedulingCalendar-B6TakO2h.js';