@tensor_1/react 2.33.0 → 2.34.0

package/README.md

@@ -412,6 +412,31 @@ 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.
 - **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-DSLQ6AY5.d.ts}

@@ -127,6 +127,20 @@ interface SchedulingCalendarDay {
     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;
@@ -196,6 +210,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 +321,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 +371,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/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-DSLQ6AY5.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,161 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement, 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";
+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 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-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, children: /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-window", style: { paddingTop: virtual.padTop, paddingBottom: virtual.padBottom }, children: virtual.rows.map((item) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda-vrow", "data-kind": item.kind, 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, 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-DSLQ6AY5.js';

package/dist/components/SchedulingCalendar.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, cachedDateTimeFormat, startOfMonth, zonedDateKey, zonedTimeOfDay } from "../calendar-model.js";
 import { TOP_LANE_CROSS_MIDNIGHT_MINUTES, itemDaySpan, layoutMonthSpans } from "../scheduling-calendar-model.js";
+import { SchedulingAgenda } from "./SchedulingAgenda.js";
 import { SchedulingTimeGrid } from "./SchedulingTimeGrid.js";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
@@ -45,6 +46,9 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   moreWindowsLabel: "{count} more windows, from {date}",
   topLane: "All-day and longer entries",
   continuesFrom: "from {time}",
+  allDay: "All day",
+  hiddenInDay: "{count} not shown \u2014 open day",
+  continuesInDay: "Continues: {count} listed under an earlier day",
   moveHint: "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.",
@@ -60,6 +64,7 @@ const INTL_PARTS = {
 };
 const EMPTY_OVERLAYS = [];
 const EMPTY_ENTRIES = [];
+const EMPTY_IDS = [];
 const DEFAULT_LANE_CAP = 2;
 const DEFAULT_CHIP_ROWS = 3;
 function coveredDays(start, end, timeZone) {
@@ -107,6 +112,10 @@ function SchedulingCalendar({
   notice,
   emptyNote,
   onSelectDate,
+  agendaGroups,
+  agendaHeadingLevel = 3,
+  virtualizeAbove = 200,
+  monthDensity = "full",
   timeGrid = false,
   now,
   canMove = false,
@@ -140,7 +149,8 @@ function SchedulingCalendar({
   const gridRef = useRef(null);
   const picksGiven = dayEntries !== void 0;
   const controlled = picksGiven || dayInfo !== void 0;
-  const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0;
+  const countsOnly = monthDensity === "counts" && view === "month";
+  const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0 || countsOnly;
   const windowCap = Math.max(0, windowLaneCap ?? (fixed ? DEFAULT_LANE_CAP : Infinity));
   const spanCap = Math.max(0, spanLaneCap ?? (fixed ? DEFAULT_LANE_CAP : Infinity));
   const visibleEntries = useMemo(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
@@ -178,13 +188,13 @@ function SchedulingCalendar({
       windowIds.add(overlay.id);
       inputs.push({ id: overlay.id, start: overlay.start, end: overlay.end, group: "window" });
     }
-    for (const { entry } of multiDay) {
+    for (const { entry } of countsOnly ? [] : multiDay) {
       if (itemIds.has(entry.id)) continue;
       itemIds.add(entry.id);
       inputs.push({ id: entry.id, start: entry.start, end: entry.end, group: "item" });
     }
     return layoutMonthSpans(inputs, days, { timeZone, laneCap: { window: windowCap, item: spanCap } });
-  }, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap]);
+  }, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap, countsOnly]);
   const placedByRow = useMemo(() => {
     const rows = /* @__PURE__ */ new Map();
     for (const placed of layout.placed) {
@@ -273,13 +283,13 @@ function SchedulingCalendar({
     ["--uix-scheduling-calendar-lane"]: placed.group === "window" ? placed.lane : windowLanes + placed.lane
   });
   const nothingToShow = visibleEntries.length === 0 && !Object.values(dayEntries ?? {}).some((list) => list.length > 0) && !Object.values(dayInfo ?? {}).some((day) => day.count > 0);
-  const chipRows = Math.max(0, maxEntriesPerDay ?? DEFAULT_CHIP_ROWS, ...Object.values(dayEntries ?? {}).map((list) => list.length));
+  const chipRows = countsOnly ? -1 : Math.max(0, maxEntriesPerDay ?? DEFAULT_CHIP_ROWS, ...Object.values(dayEntries ?? {}).map((list) => list.length));
   const renderDay = (date, index) => {
     const info = dayInfo?.[date];
     const all = picksGiven ? dayEntries[date] ?? EMPTY_ENTRIES : singles.get(date) ?? EMPTY_ENTRIES;
     const overflowing = !picksGiven && maxEntriesPerDay !== void 0 && all.length > maxEntriesPerDay;
     const collapsed = overflowing && (controlled || onShowMore !== void 0 || !expandedDates.has(date));
-    const shown = collapsed ? all.slice(0, Math.max(0, maxEntriesPerDay)) : all;
+    const shown = countsOnly ? EMPTY_ENTRIES : collapsed ? all.slice(0, Math.max(0, maxEntriesPerDay)) : all;
     const hiddenCount = info ? info.overflowCount : picksGiven ? 0 : all.length - shown.length;
     const onDay = picksGiven ? all : entriesOn(date);
     const badge = renderDayBadge?.(date, onDay);
@@ -299,7 +309,7 @@ function SchedulingCalendar({
       ] }) : dateButton,
       /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__entries", children: [
         shown.map((entry) => /* @__PURE__ */ jsx("button", { className: "uix-scheduling-calendar__entry", ...entryProps(entry), children: entryContent(entry) }, entry.id)),
-        controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, onDay), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
+        countsOnly ? null : controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, onDay), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__more", children: [
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
           /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
         ] })) : overflowing && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-expanded": onShowMore ? void 0 : !collapsed, "aria-label": collapsed ? moreName : void 0, onClick: () => toggleMore(date, onDay), children: collapsed ? moreText : labels.fewerEntries })
@@ -309,8 +319,10 @@ function SchedulingCalendar({
   const renderWeek = (row) => {
     const rowDays = days.slice(row * 7, row * 7 + 7);
     const windowLanes = lanesUsed(row, "window");
-    const spanLanes = lanesUsed(row, "item");
-    const hidden = layout.hiddenByRow?.[row]?.length ?? 0;
+    const spanLanes = countsOnly ? 0 : lanesUsed(row, "item");
+    const hiddenIds = layout.hiddenByRow?.[row] ?? EMPTY_IDS;
+    const drawnWindows = countsOnly ? new Set((placedByRow.get(row) ?? []).filter((placed) => placed.group === "window").map((placed) => placed.id)) : void 0;
+    const hidden = countsOnly ? hiddenIds.filter((id) => overlayById.has(id) && !drawnWindows.has(id)).length : hiddenIds.length;
     const firstHiddenDay = layout.firstHiddenDayByRow?.[row] ?? rowDays[0];
     const moreText = fillLabel(labels.moreSpans, { count: hidden });
     const moreName = fillLabel(labels.moreSpansLabel, { count: hidden, date: dateText(firstHiddenDay, "day") });
@@ -329,7 +341,7 @@ function SchedulingCalendar({
           ] }) }, `window-${placed.id}`);
         }
         const entry = entryById.get(placed.id);
-        if (!entry) return null;
+        if (!entry || countsOnly) return null;
         return /* @__PURE__ */ jsx("button", { className: "uix-scheduling-calendar__entry uix-scheduling-calendar__span", ...entryProps(entry), ...continues, style: laneStyle(placed, windowLanes), children: entryContent(entry, !placed.continuesBefore) }, `span-${placed.id}`);
       }),
       hidden > 0 && (onShowMore ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": moreName, onClick: () => onShowMore(firstHiddenDay, picksGiven ? dayEntries[firstHiddenDay] ?? EMPTY_ENTRIES : entriesOn(firstHiddenDay)), children: moreText }) : /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__rowmore", children: [
@@ -341,7 +353,7 @@ function SchedulingCalendar({
   const gridStyle = fixed ? {
     ["--uix-scheduling-calendar-chips"]: chipRows,
     ["--uix-scheduling-calendar-lane-cap"]: Math.max(
-      Math.max(Number.isFinite(windowCap) ? windowCap : 0, lanesUsedAnywhere("window")) + Math.max(Number.isFinite(spanCap) ? spanCap : 0, lanesUsedAnywhere("item")),
+      Math.max(Number.isFinite(windowCap) ? windowCap : 0, lanesUsedAnywhere("window")) + (countsOnly ? 0 : Math.max(Number.isFinite(spanCap) ? spanCap : 0, lanesUsedAnywhere("item"))),
       Object.keys(layout.hiddenByRow ?? {}).length > 0 ? 1 : 0
     )
   } : void 0;
@@ -358,7 +370,28 @@ function SchedulingCalendar({
     loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__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 })
-    ] }) : view === "agenda" ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
+    ] }) : view === "agenda" && agendaGroups ? /* @__PURE__ */ jsx(
+      SchedulingAgenda,
+      {
+        groups: agendaGroups,
+        timeZone,
+        labels,
+        headingLevel: agendaHeadingLevel,
+        virtualizeAbove,
+        dateText,
+        formatInstant,
+        entryName,
+        entryStatus: statusOf,
+        entryStatusText: stateText,
+        entryMarkers: markersOf,
+        overlayName,
+        renderEntry,
+        renderMarker,
+        onSelectEntry,
+        onSelectOverlay,
+        onShowMore
+      }
+    ) : view === "agenda" ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ jsx("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
       const markers = markersOf(entry);
       return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", "data-item-id": entry.id, "data-band": entry.band ?? "none", "data-status": statusOf(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), children: [
         /* @__PURE__ */ jsxs("span", { children: [
@@ -407,7 +440,7 @@ function SchedulingCalendar({
         emptyNote,
         nothingToShow
       }
-    ) : /* @__PURE__ */ jsxs("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, style: gridStyle, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
+    ) : /* @__PURE__ */ jsxs("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, "data-density": countsOnly ? "counts" : void 0, style: gridStyle, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
       days.slice(0, 7).map((date) => /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__weekday", "aria-hidden": "true", children: dateText(date, "weekday") }, `weekday-${date}`)),
       Array.from({ length: days.length / 7 }, (_, row) => renderWeek(row)),
       emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__empty", children: emptyNote })

package/dist/components/SchedulingTimeGrid.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import '../scheduling-calendar-model.js';
-export { p as SchedulingTimeGrid, q as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-C4XVbqZr.js';
+export { q as SchedulingTimeGrid, r as SchedulingTimeGridProps, T as TimeGridEntryContext } from '../SchedulingCalendar-DSLQ6AY5.js';
 import '../calendar-model.js';

package/dist/components/SchedulingTimeline.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { TimelineRange, TimelineScale } from '../scheduling-timeline-model.js';
-import { i as SchedulingEntryState } from '../SchedulingCalendar-C4XVbqZr.js';
+import { j as SchedulingEntryState } from '../SchedulingCalendar-DSLQ6AY5.js';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';