@tensor_1/react 2.32.0 → 2.34.0

package/dist/components/SchedulingCalendar.d.ts

@@ -1,241 +1,4 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { CalendarWeekday } from '../calendar-model.js';
-import { MonthSpanLayout } from '../scheduling-calendar-model.js';
-
-type SchedulingCalendarView = 'month' | 'week' | 'agenda';
-/**
- * @deprecated Use `band`, `status` and `markers` on the entry: they carry no product
- * vocabulary and the consumer supplies every word. The values keep working in 2.x.
- */
-type SchedulingEntryState = 'scheduled' | 'conflicted' | 'in-progress' | 'blackout-violation';
-/** @deprecated Use `pattern` and `kindLabel` on the overlay. The values keep working in 2.x. */
-type SchedulingOverlayKind = 'maintenance' | 'blackout';
-/**
- * The one dimension that takes a hue. `none` and `low` are untinted, `medium` gets a
- * heavier edge, and only `high` is filled. The consumer decides what a band means.
- */
-type SchedulingBand = 'none' | 'low' | 'medium' | 'high';
-/**
- * The state channel, drawn without hue: `tentative` is dashed, `committed` is the plain
- * item, `live` carries a leading dot, `done` is dimmed and `dead` is struck through.
- */
-type SchedulingStatus = 'tentative' | 'committed' | 'live' | 'done' | 'dead';
-type SchedulingMarkerEmphasis = 'refused' | 'warning' | 'neutral';
-/** How a window is hatched. Windows are neutral: the pattern and the visible label tell them apart. */
-type SchedulingOverlayPattern = 'diagonal' | 'cross' | 'dotted' | 'solid';
-/**
- * Which date text a `formatDate` call is for (TENSOR B1/C9, HAR-1347):
- * `day` names one day (each day cell's accessible name, the week-range title);
- * `weekday` is the short column header (the date is any day of that weekday);
- * `month` is the month-view title (the date is the first of the month).
- */
-type SchedulingDatePart = 'day' | 'weekday' | 'month';
-/** A shape or icon with text. The text is always in the accessible name; a marker never relies on colour. */
-interface SchedulingMarker {
-    id: string;
-    /** An icon from `@tensor_1/react/icons`. Without one the marker draws a shape for its `emphasis`. */
-    icon?: ReactNode;
-    label: string;
-    emphasis?: SchedulingMarkerEmphasis;
-}
-interface SchedulingCalendarEntry {
-    id: string;
-    title: string;
-    start: string;
-    end: string;
-    /** @deprecated Use `band`, `status` and `markers`. */
-    state?: SchedulingEntryState;
-    meta?: string;
-    band?: SchedulingBand;
-    status?: SchedulingStatus;
-    markers?: SchedulingMarker[];
-    /** The complete accessible name, built by the consumer from its own words. Replaces `labels.entry`. */
-    accessibleName?: string;
-}
-interface SchedulingCalendarOverlay {
-    id: string;
-    /** The window's name, shown as text. */
-    label: string;
-    start: string;
-    end: string;
-    /** @deprecated Use `pattern` and `kindLabel`. */
-    kind?: SchedulingOverlayKind;
-    /** Defaults to `'solid'`. */
-    pattern?: SchedulingOverlayPattern;
-    /** What kind of window this is, in the consumer's words. Shown before the name. */
-    kindLabel?: string;
-    /** What the window applies to. Shown after the name. */
-    scopeLabel?: string;
-    /** The window applies to everything. A window that is not global never gets the global treatment. */
-    global?: boolean;
-    /** The complete accessible name. Replaces `labels.overlay`. */
-    accessibleName?: string;
-}
-/** What the consumer knows about one day (`YYYY-MM-DD`). The calendar shows these numbers and never derives them. */
-interface SchedulingCalendarDay {
-    /** Every item on the day, shown in the cell even when no chip fits. */
-    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". */
-    label?: string;
-    markers?: SchedulingMarker[];
-}
-interface SchedulingLegendItem {
-    id: string;
-    label: string;
-    swatch: {
-        band?: SchedulingBand;
-        status?: SchedulingStatus;
-        pattern?: SchedulingOverlayPattern;
-        icon?: ReactNode;
-    };
-}
-/**
- * Every word the calendar renders (TENSOR RX-125, UIX-12). `{timeZone}`, `{view}`,
- * `{title}`, `{state}`, `{start}`, `{end}` are placeholders.
- */
-interface SchedulingCalendarLabels {
-    region: string;
-    /** @deprecated Use `previousMonth` and `previousWeek`. Still used when those are not set. */
-    previous: string;
-    /** @deprecated Use `nextMonth` and `nextWeek`. Still used when those are not set. */
-    next: string;
-    previousMonth?: string;
-    nextMonth?: string;
-    /** Also names the agenda's step, which moves by a week. */
-    previousWeek?: string;
-    nextWeek?: string;
-    viewGroup: string;
-    viewMonth: string;
-    viewWeek: string;
-    viewAgenda: string;
-    loading: string;
-    retry: string;
-    agenda: string;
-    agendaEmpty: string;
-    grid: string;
-    /** An entry's accessible name unless it sets `accessibleName`. Its marker labels are appended. */
-    entry: string;
-    /** A window's accessible name unless it sets `accessibleName`. `{title}` is its kind, name and scope. */
-    overlay?: string;
-    legend: string;
-    /** The "+N more" toggle on a day with more entries than `maxEntriesPerDay`. `{count}` placeholder. */
-    moreEntries: string;
-    /** Accessible name of that toggle. `{count}` and `{date}` placeholders. */
-    moreEntriesLabel: string;
-    /** The toggle once the day is expanded in place. */
-    fewerEntries: string;
-    /** The "+N" at the end of a week row whose spans did not all get a lane. `{count}` placeholder. */
-    moreSpans?: string;
-    /** Accessible name of that control. `{count}` and `{date}` (the first day with a hidden span). */
-    moreSpansLabel?: string;
-    /** The accessible text of a day's count when `days[date].label` is not given. `{count}` placeholder. */
-    dayCount?: string;
-    states: Record<SchedulingEntryState, string>;
-    /** The words for `status`, used in the default accessible name and the agenda. */
-    statuses?: Partial<Record<SchedulingStatus, string>>;
-}
-declare const DEFAULT_SCHEDULING_CALENDAR_LABELS: SchedulingCalendarLabels;
-interface SchedulingCalendarProps {
-    /**
-     * The entries. Without `dayEntries` the calendar places each on its day in the order
-     * given; with `dayEntries` only the entries that cover more than one day are read from
-     * here (they are drawn as spans).
-     */
-    entries: SchedulingCalendarEntry[];
-    anchorDate: string;
-    timeZone: string;
-    view?: SchedulingCalendarView;
-    onViewChange?: (view: SchedulingCalendarView) => void;
-    onAnchorDateChange?: (date: string) => void;
-    /** Called by a click or Enter on a chip, a span or an agenda row. */
-    onSelectEntry?: (entry: SchedulingCalendarEntry) => void;
-    overlays?: SchedulingCalendarOverlay[];
-    /** Called by a click or Enter on a window span. */
-    onSelectOverlay?: (overlay: SchedulingCalendarOverlay) => void;
-    filter?: (entry: SchedulingCalendarEntry) => boolean;
-    /** Replaces a chip's content. The default is the start time in `timeZone` (24 h) and the title. */
-    renderEntry?: (entry: SchedulingCalendarEntry) => ReactNode;
-    locale?: string;
-    /** First column of the month and week grids: 0 = Sunday … 6 = Saturday. Defaults to 1 (Monday). */
-    weekStartsOn?: CalendarWeekday;
-    /**
-     * Formats every calendar date the component writes (`date` is `YYYY-MM-DD`). Use it to
-     * apply a product date format such as DD.MM.YYYY; defaults to `Intl` in `locale`.
-     */
-    formatDate?: (date: string, part: SchedulingDatePart) => string;
-    /**
-     * Formats a start or end instant (ISO 8601) for the agenda and the accessible names.
-     * The component does not shift it: render it in `timeZone` yourself. Defaults to the
-     * `day` date text followed by the 24-hour time in `timeZone`.
-     */
-    formatInstant?: (instant: string) => string;
-    /**
-     * How many chips a day shows. Without `dayEntries` the rest collapse behind "+N more";
-     * with `dayEntries` it only sizes the cell (the consumer already cut the list, and a longer
-     * list makes the cells taller, never clipped). Unset shows every entry where the cells
-     * grow, and sizes a fixed cell for three chips.
-     */
-    maxEntriesPerDay?: number;
-    /**
-     * Called by a day's "+N more" and by a week row's "+N" with the day (and, without
-     * `dayEntries`, every entry on it). When set, the consumer shows them (a popover, a
-     * drawer, the day view) and the day stays collapsed. Required with `days` or `dayEntries`:
-     * a controlled day never expands in place.
-     */
-    onShowMore?: (date: string, entries: SchedulingCalendarEntry[]) => void;
-    /**
-     * A small badge beside a day's date, e.g. a collision count. Keep it short (a number or a
-     * glyph): it shares a narrow column with the date and is clipped, not wrapped. It sits
-     * outside the date button, so give it its own accessible text (a visually hidden word next
-     * to the number). Return null for no badge.
-     */
-    renderDayBadge?: (date: string, entries: SchedulingCalendarEntry[]) => ReactNode;
-    /**
-     * Consumer-owned numbers per day (`YYYY-MM-DD`). When set, each listed day shows its
-     * `count` and markers even with no chip, and its "+N" is `overflowCount`, never a number
-     * derived from the entries given. Without `dayEntries` the chips are still this day's
-     * `entries`, cut to `maxEntriesPerDay`; the day never expands in place.
-     */
-    days?: Record<string, SchedulingCalendarDay>;
-    /**
-     * The single-day chips of each day, already ranked and cut by the consumer. When set, the
-     * calendar renders exactly these in the order given: it does not place, rank, cut or count.
-     */
-    dayEntries?: Record<string, SchedulingCalendarEntry[]>;
-    /**
-     * The result of `layoutMonthSpans` for this grid. When set, the calendar draws exactly
-     * these spans and never packs lanes itself. Compute it with `schedulingGridDays`.
-     */
-    spanLayout?: MonthSpanLayout;
-    /**
-     * Lanes kept for windows above the chips. Windows never take a chip slot. Default 2 where
-     * the cells have a fixed height; where they grow with their content every window gets a lane.
-     */
-    windowLaneCap?: number;
-    /** Lanes kept for entries that cover more than one day. Default as for `windowLaneCap`. */
-    spanLaneCap?: number;
-    /** When set, the legend is exactly these items (an empty list draws no legend). Unset keeps the built-in state legend. */
-    legend?: SchedulingLegendItem[];
-    /** A line under the legend, e.g. the display zone. */
-    legendCaption?: ReactNode;
-    /** `false` hides the previous/next buttons, the title and the view switch (the page has its own toolbar). */
-    showHeader?: boolean;
-    /** Shown above the grid, e.g. "Showing the first 2,000 items". */
-    notice?: ReactNode;
-    /** Shown inside the grid, below the day cells, when there is nothing to show. */
-    emptyNote?: ReactNode;
-    /** Called by a click or Enter on a day number. */
-    onSelectDate?: (date: string) => void;
-    loading?: boolean;
-    error?: string;
-    onRetry?: () => void;
-    className?: string;
-    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, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
-
-export { DEFAULT_SCHEDULING_CALENDAR_LABELS, type SchedulingBand, SchedulingCalendar, type SchedulingCalendarDay, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingDatePart, type SchedulingEntryState, type SchedulingLegendItem, type SchedulingMarker, type SchedulingMarkerEmphasis, type SchedulingOverlayKind, type SchedulingOverlayPattern, type SchedulingStatus };
+import 'react';
+import '../calendar-model.js';
+import '../scheduling-calendar-model.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

@@ -2,7 +2,9 @@
 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 { itemDaySpan, layoutMonthSpans } from "../scheduling-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";
 import { StatusPill } from "./StatusPill.js";
@@ -15,9 +17,12 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   nextMonth: "Next month",
   previousWeek: "Previous week",
   nextWeek: "Next week",
+  previousDay: "Previous day",
+  nextDay: "Next day",
   viewGroup: "Calendar view",
   viewMonth: "Month",
   viewWeek: "Week",
+  viewDay: "Day",
   viewAgenda: "Agenda",
   loading: "Loading schedule\u2026",
   retry: "Try again",
@@ -34,17 +39,32 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   moreSpansLabel: "{count} more spanning this week, from {date}",
   dayCount: "{count} entries",
   states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" },
-  statuses: { tentative: "Tentative", committed: "Scheduled", live: "In progress", done: "Done", dead: "Cancelled" }
+  statuses: { tentative: "Tentative", committed: "Scheduled", live: "In progress", done: "Done", dead: "Cancelled" },
+  timeZone: "{timeZone}",
+  windows: "Windows",
+  moreWindows: "+{count} windows",
+  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.",
+  gapForward: "That time does not exist on this day. Moved forward to {time}."
 };
 const stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
 const utcDate = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
 const INTL_PARTS = {
   day: { dateStyle: "full", timeZone: "UTC" },
   weekday: { weekday: "short", timeZone: "UTC" },
-  month: { month: "long", year: "numeric", timeZone: "UTC" }
+  month: { month: "long", year: "numeric", timeZone: "UTC" },
+  column: { weekday: "short", day: "2-digit", month: "2-digit", timeZone: "UTC" }
 };
 const EMPTY_OVERLAYS = [];
 const EMPTY_ENTRIES = [];
+const EMPTY_IDS = [];
 const DEFAULT_LANE_CAP = 2;
 const DEFAULT_CHIP_ROWS = 3;
 function coveredDays(start, end, timeZone) {
@@ -54,13 +74,14 @@ function coveredDays(start, end, timeZone) {
     return itemDaySpan(start, start, timeZone);
   }
 }
-function Marker({ marker }) {
+function Marker({ marker, showLabel }) {
   const emphasis = marker.emphasis ?? "neutral";
   return /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__marker", "data-emphasis": emphasis, "data-glyph": marker.icon == null ? emphasis : void 0, children: [
     marker.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__marker-icon", "aria-hidden": "true", children: marker.icon }),
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: marker.label })
+    /* @__PURE__ */ jsx("span", { className: showLabel ? "uix-scheduling-calendar__marker-label" : "uix-visually-hidden", children: marker.label })
   ] });
 }
+const renderMarker = (marker, showLabel) => /* @__PURE__ */ jsx(Marker, { marker, showLabel });
 function SchedulingCalendar({
   entries,
   anchorDate,
@@ -91,6 +112,18 @@ function SchedulingCalendar({
   notice,
   emptyNote,
   onSelectDate,
+  agendaGroups,
+  agendaHeadingLevel = 3,
+  virtualizeAbove = 200,
+  monthDensity = "full",
+  timeGrid = false,
+  now,
+  canMove = false,
+  step = 15,
+  onProposeMove,
+  topLaneCrossMidnightMinutes = TOP_LANE_CROSS_MIDNIGHT_MINUTES,
+  topLaneCap = 3,
+  maxLanes = 4,
   loading,
   error,
   onRetry,
@@ -106,7 +139,7 @@ function SchedulingCalendar({
     statuses: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.statuses, ...uixLabels.schedulingCalendar?.statuses, ...labelOverrides?.statuses }
   };
   const stateLabel = labels.states;
-  const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, agenda: labels.viewAgenda };
+  const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, day: labels.viewDay, agenda: labels.viewAgenda };
   const [internalView, setInternalView] = useState("month");
   const view = controlledView ?? internalView;
   const [activeDate, setActiveDate] = useState(anchorDate);
@@ -116,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]);
@@ -124,7 +158,8 @@ function SchedulingCalendar({
   const weekday = (utcDate(anchorDate).getUTCDay() - weekStartsOn + 7) % 7;
   const weekStart = addCalendarDays(anchorDate, -weekday);
   const weekDays = useMemo(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
-  const days = useMemo(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
+  const days = useMemo(() => view === "month" ? monthDays.map((day) => day.date) : view === "day" ? [anchorDate] : weekDays, [view, monthDays, weekDays, anchorDate]);
+  const timeGridView = view === "day" || view === "week" && timeGrid;
   const { singles, multiDay, coverage } = useMemo(() => {
     const byDay = /* @__PURE__ */ new Map();
     const spans = [];
@@ -144,7 +179,7 @@ function SchedulingCalendar({
   const overlayById = useMemo(() => new Map([...overlays].reverse().map((overlay) => [overlay.id, overlay])), [overlays]);
   const layout = useMemo(() => {
     if (spanLayout) return spanLayout;
-    if (view === "agenda") return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
+    if (view === "agenda" || timeGridView) return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
     const inputs = [];
     const windowIds = /* @__PURE__ */ new Set();
     const itemIds = /* @__PURE__ */ new Set();
@@ -153,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, 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) {
@@ -178,9 +213,9 @@ function SchedulingCalendar({
     if (controlledView === void 0) setInternalView(next);
     onViewChange?.(next);
   };
-  const movePeriod = (direction) => onAnchorDateChange?.(view === "month" ? addCalendarMonths(anchorDate, direction) : addCalendarDays(anchorDate, direction * 7));
+  const movePeriod = (direction) => onAnchorDateChange?.(view === "month" ? addCalendarMonths(anchorDate, direction) : addCalendarDays(anchorDate, view === "day" ? direction : direction * 7));
   const periodLabel = (direction) => {
-    const key = `${direction}${view === "month" ? "Month" : "Week"}`;
+    const key = `${direction}${view === "month" ? "Month" : view === "day" ? "Day" : "Week"}`;
     return overrides[key] ?? overrides[direction] ?? labels[key];
   };
   const focusDate = (date) => {
@@ -248,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);
@@ -274,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 })
@@ -284,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") });
@@ -304,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: [
@@ -316,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;
@@ -326,14 +363,35 @@ function SchedulingCalendar({
         /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: periodLabel("previous") }),
         /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: periodLabel("next") })
       ] }),
-      /* @__PURE__ */ jsx("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
-      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": labels.viewGroup, children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: viewLabel[option] }, option)) })
+      /* @__PURE__ */ jsx("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : view === "day" ? dateText(anchorDate, "day") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
+      /* @__PURE__ */ jsx("div", { className: "uix-segmented", role: "group", "aria-label": labels.viewGroup, children: (timeGrid || view === "day" ? ["month", "week", "day", "agenda"] : ["month", "week", "agenda"]).map((option) => /* @__PURE__ */ jsx("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: viewLabel[option] }, option)) })
     ] }),
     notice != null && notice !== false && /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__notice", children: notice }),
     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: [
@@ -348,7 +406,41 @@ function SchedulingCalendar({
         markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx(Marker, { marker }, marker.id)) }),
         entry.state ? /* @__PURE__ */ jsx(StatusPill, { tone: stateTone(entry.state), children: stateLabel[entry.state] }) : /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__status", children: stateText(entry) })
       ] }) }, entry.id);
-    }) }) }) : /* @__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: [
+    }) }) }) : timeGridView ? /* @__PURE__ */ jsx(
+      SchedulingTimeGrid,
+      {
+        view: view === "day" ? "day" : "week",
+        days,
+        timeZone,
+        entries: visibleEntries,
+        overlays,
+        dayInfo,
+        labels,
+        gridLabel: fillLabel(labels.grid, { view: viewLabel[view] }),
+        dateText,
+        formatInstant,
+        entryName,
+        entryStatus: statusOf,
+        entryMarkers: markersOf,
+        overlayName,
+        renderEntry,
+        renderMarker,
+        onSelectEntry,
+        onSelectOverlay,
+        onSelectDate,
+        onShowMore,
+        now,
+        canMove,
+        step,
+        onProposeMove,
+        topLaneCrossMidnightMinutes,
+        topLaneCap,
+        windowLaneCap: windowLaneCap ?? DEFAULT_LANE_CAP,
+        maxLanes,
+        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, "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

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