@tensor_1/react 2.31.0 → 2.33.0

package/dist/components/SchedulingCalendar.js

@@ -1,7 +1,9 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { addCalendarDays, addCalendarMonths, buildMonthGrid, startOfMonth, zonedDateSpan } from "../calendar-model.js";
+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 { SchedulingTimeGrid } from "./SchedulingTimeGrid.js";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
 import { StatusPill } from "./StatusPill.js";
@@ -10,9 +12,16 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   region: "Scheduling calendar in {timeZone}",
   previous: "Previous",
   next: "Next",
+  previousMonth: "Previous month",
+  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",
@@ -20,21 +29,54 @@ const DEFAULT_SCHEDULING_CALENDAR_LABELS = {
   agendaEmpty: "No scheduled entries match the current filters.",
   grid: "{view} schedule",
   entry: "{title}, {state}, {start} to {end}",
+  overlay: "{title}, {start} to {end}",
   legend: "Schedule state legend",
   moreEntries: "+{count} more",
   moreEntriesLabel: "{count} more entries on {date}",
   fewerEntries: "Show fewer",
-  states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" }
+  moreSpans: "+{count}",
+  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" },
+  timeZone: "{timeZone}",
+  windows: "Windows",
+  moreWindows: "+{count} windows",
+  moreWindowsLabel: "{count} more windows, from {date}",
+  topLane: "All-day and longer entries",
+  continuesFrom: "from {time}",
+  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 intlDate = (date, part, locale) => new Intl.DateTimeFormat(locale, INTL_PARTS[part]).format(utcDate(date));
 const EMPTY_OVERLAYS = [];
+const EMPTY_ENTRIES = [];
+const DEFAULT_LANE_CAP = 2;
+const DEFAULT_CHIP_ROWS = 3;
+function coveredDays(start, end, timeZone) {
+  try {
+    return itemDaySpan(start, end, timeZone);
+  } catch {
+    return itemDaySpan(start, start, timeZone);
+  }
+}
+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: 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,
@@ -44,6 +86,7 @@ function SchedulingCalendar({
   onAnchorDateChange,
   onSelectEntry,
   overlays = EMPTY_OVERLAYS,
+  onSelectOverlay,
   filter,
   renderEntry,
   locale,
@@ -53,6 +96,25 @@ function SchedulingCalendar({
   maxEntriesPerDay,
   onShowMore,
   renderDayBadge,
+  days: dayInfo,
+  dayEntries,
+  spanLayout,
+  windowLaneCap,
+  spanLaneCap,
+  legend,
+  legendCaption,
+  showHeader = true,
+  notice,
+  emptyNote,
+  onSelectDate,
+  timeGrid = false,
+  now,
+  canMove = false,
+  step = 15,
+  onProposeMove,
+  topLaneCrossMidnightMinutes = TOP_LANE_CROSS_MIDNIGHT_MINUTES,
+  topLaneCap = 3,
+  maxLanes = 4,
   loading,
   error,
   onRetry,
@@ -60,28 +122,80 @@ function SchedulingCalendar({
   labels: labelOverrides
 }) {
   const uixLabels = useUixLabels();
+  const overrides = { ...uixLabels.schedulingCalendar, ...labelOverrides };
   const labels = {
     ...DEFAULT_SCHEDULING_CALENDAR_LABELS,
-    ...uixLabels.schedulingCalendar,
-    ...labelOverrides,
-    states: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.states, ...uixLabels.schedulingCalendar?.states, ...labelOverrides?.states }
+    ...overrides,
+    states: { ...DEFAULT_SCHEDULING_CALENDAR_LABELS.states, ...uixLabels.schedulingCalendar?.states, ...labelOverrides?.states },
+    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);
   const [expandedDates, setExpandedDates] = useState(() => /* @__PURE__ */ new Set());
-  const dateText = (date, part) => formatDate?.(date, part) ?? intlDate(date, part, locale);
+  const dateText = (date, part) => formatDate?.(date, part) ?? cachedDateTimeFormat(locale, INTL_PARTS[part]).format(utcDate(date));
+  const formatInstant = (instant) => formatInstantProp?.(instant) ?? `${dateText(zonedDateKey(instant, timeZone), "day")} ${zonedTimeOfDay(instant, timeZone)}`;
   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 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]);
-  const entrySpans = useMemo(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
-  const overlaySpans = useMemo(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
   const monthDays = useMemo(() => buildMonthGrid(startOfMonth(anchorDate), weekStartsOn), [anchorDate, weekStartsOn]);
   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 = [];
+    const every = [];
+    for (const entry of visibleEntries) {
+      const covered = coveredDays(entry.start, entry.end, timeZone);
+      every.push({ entry, ...covered });
+      if (addCalendarDays(covered.start, 1) === covered.end) {
+        const list = byDay.get(covered.start);
+        if (list) list.push(entry);
+        else byDay.set(covered.start, [entry]);
+      } else spans.push({ entry, ...covered });
+    }
+    return { singles: byDay, multiDay: spans, coverage: every };
+  }, [visibleEntries, timeZone]);
+  const entryById = useMemo(() => new Map([...multiDay].reverse().map(({ entry }) => [entry.id, entry])), [multiDay]);
+  const overlayById = useMemo(() => new Map([...overlays].reverse().map((overlay) => [overlay.id, overlay])), [overlays]);
+  const layout = useMemo(() => {
+    if (spanLayout) return spanLayout;
+    if (view === "agenda" || timeGridView) return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
+    const inputs = [];
+    const windowIds = /* @__PURE__ */ new Set();
+    const itemIds = /* @__PURE__ */ new Set();
+    for (const overlay of overlays) {
+      if (windowIds.has(overlay.id) || !(new Date(overlay.end).getTime() >= new Date(overlay.start).getTime())) continue;
+      windowIds.add(overlay.id);
+      inputs.push({ id: overlay.id, start: overlay.start, end: overlay.end, group: "window" });
+    }
+    for (const { entry } of 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]);
+  const placedByRow = useMemo(() => {
+    const rows = /* @__PURE__ */ new Map();
+    for (const placed of layout.placed) {
+      const row = rows.get(placed.weekRow);
+      if (row) row.push(placed);
+      else rows.set(placed.weekRow, [placed]);
+    }
+    return rows;
+  }, [layout]);
+  const lanesUsed = (row, group) => (placedByRow.get(row) ?? []).reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
+  const lanesUsedAnywhere = (group) => layout.placed.reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
   useEffect(() => {
     if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
   }, [activeDate, days, view]);
@@ -89,7 +203,11 @@ 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" : view === "day" ? "Day" : "Week"}`;
+    return overrides[key] ?? overrides[direction] ?? labels[key];
+  };
   const focusDate = (date) => {
     setActiveDate(date);
     requestAnimationFrame(() => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus());
@@ -107,18 +225,10 @@ function SchedulingCalendar({
       focusDate(days[days.length - 1]);
     }
   };
-  const entriesFor = (date) => visibleEntries.filter((entry) => {
-    const span = entrySpans.get(entry.id);
-    return date >= span.start && date <= span.end;
-  });
-  const overlaysFor = (date) => overlays.filter((overlay) => {
-    const span = overlaySpans.get(overlay.id);
-    return date >= span.start && date <= span.end;
-  });
-  const formatInstant = (instant) => formatInstantProp?.(instant) ?? new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
-  const toggleMore = (date, dayEntries) => {
+  const entriesOn = (date) => coverage.filter((covered) => date >= covered.start && date < covered.end).map((covered) => covered.entry);
+  const toggleMore = (date, all) => {
     if (onShowMore) {
-      onShowMore(date, dayEntries);
+      onShowMore(date, all);
       return;
     }
     setExpandedDates((current) => {
@@ -128,21 +238,129 @@ function SchedulingCalendar({
       return next;
     });
   };
+  const statusOf = (entry) => entry.status ?? (entry.state === "in-progress" ? "live" : "committed");
+  const markersOf = (entry) => {
+    const flagged = entry.state === "conflicted" || entry.state === "blackout-violation";
+    return flagged ? [...entry.markers ?? [], { id: "state", label: stateLabel[entry.state], emphasis: "warning" }] : entry.markers ?? [];
+  };
+  const stateText = (entry) => entry.state ? stateLabel[entry.state] : entry.status ? labels.statuses[entry.status] : stateLabel.scheduled;
+  const entryName = (entry) => entry.accessibleName ?? [fillLabel(labels.entry, { title: entry.title, state: stateText(entry), start: formatInstant(entry.start), end: formatInstant(entry.end) }), ...(entry.markers ?? []).map((marker) => marker.label)].join(", ");
+  const overlayName = (overlay) => overlay.accessibleName ?? fillLabel(labels.overlay, { title: [overlay.kindLabel, overlay.label, overlay.scopeLabel].filter(Boolean).join(", "), start: formatInstant(overlay.start), end: formatInstant(overlay.end) });
+  const entryProps = (entry) => ({
+    type: "button",
+    "data-item-id": entry.id,
+    "data-band": entry.band ?? "none",
+    "data-status": statusOf(entry),
+    "data-state": entry.state,
+    onClick: () => onSelectEntry?.(entry),
+    "aria-label": entryName(entry)
+  });
+  const entryContent = (entry, withTime = true) => {
+    const markers = markersOf(entry);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__entry-text", children: renderEntry?.(entry) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        withTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
+          " "
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__title", children: entry.title })
+      ] }) }),
+      markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx(Marker, { marker }, marker.id)) })
+    ] });
+  };
+  const laneStyle = (placed, windowLanes) => ({
+    gridColumn: `${placed.startCol + 1} / ${placed.endCol + 2}`,
+    ["--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 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 hiddenCount = info ? info.overflowCount : picksGiven ? 0 : all.length - shown.length;
+    const onDay = picksGiven ? all : entriesOn(date);
+    const badge = renderDayBadge?.(date, onDay);
+    const hasBadge = badge != null && badge !== false;
+    const dateButton = /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), onClick: onSelectDate ? () => onSelectDate(date) : void 0, "aria-label": dateText(date, "day"), children: Number(date.slice(-2)) });
+    const moreText = fillLabel(labels.moreEntries, { count: hiddenCount });
+    const moreName = fillLabel(labels.moreEntriesLabel, { count: hiddenCount, date: dateText(date, "day") });
+    return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
+      hasBadge || info ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__dayhead", children: [
+        hasBadge && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__badge", children: badge }),
+        info && /* @__PURE__ */ jsxs("span", { className: "uix-scheduling-calendar__count", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: info.count }),
+          /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: info.label ?? fillLabel(labels.dayCount, { count: info.count }) })
+        ] }),
+        info?.markers && info.markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ jsx(Marker, { marker }, marker.id)) }),
+        dateButton
+      ] }) : 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: [
+          /* @__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 })
+      ] })
+    ] }, date);
+  };
+  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 firstHiddenDay = layout.firstHiddenDayByRow?.[row] ?? rowDays[0];
+    const moreText = fillLabel(labels.moreSpans, { count: hidden });
+    const moreName = fillLabel(labels.moreSpansLabel, { count: hidden, date: dateText(firstHiddenDay, "day") });
+    const style = { ["--uix-scheduling-calendar-lanes"]: Math.max(windowLanes + spanLanes, hidden > 0 ? 1 : 0) };
+    return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__week", style, children: [
+      rowDays.map((date, column) => renderDay(date, row * 7 + column)),
+      (placedByRow.get(row) ?? []).map((placed) => {
+        const continues = { "data-continues-before": placed.continuesBefore || void 0, "data-continues-after": placed.continuesAfter || void 0 };
+        if (placed.group === "window") {
+          const overlay = overlayById.get(placed.id);
+          if (!overlay) return null;
+          return /* @__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, "data-kind": overlay.kind, ...continues, style: laneStyle(placed, windowLanes), 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 })
+          ] }) }, `window-${placed.id}`);
+        }
+        const entry = entryById.get(placed.id);
+        if (!entry) 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: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: moreText }),
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: moreName })
+      ] }))
+    ] }, rowDays[0]);
+  };
+  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")),
+      Object.keys(layout.hiddenByRow ?? {}).length > 0 ? 1 : 0
+    )
+  } : void 0;
   return /* @__PURE__ */ jsxs("section", { className: cx("uix-scheduling-calendar", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__header", children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__header", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: labels.previous }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: labels.next })
+        /* @__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) => {
-      const state = entry.state ?? "scheduled";
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onSelectEntry?.(entry), children: [
+      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: [
           /* @__PURE__ */ jsx("strong", { children: renderEntry?.(entry) ?? entry.title }),
           /* @__PURE__ */ jsxs("span", { children: [
@@ -152,40 +370,58 @@ function SchedulingCalendar({
           ] }),
           entry.meta && /* @__PURE__ */ jsx("span", { children: entry.meta })
         ] }),
-        /* @__PURE__ */ jsx(StatusPill, { tone: stateTone(state), children: stateLabel[state] })
+        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"), 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, 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}`)),
-      days.map((date, index) => {
-        const dayEntries = entriesFor(date);
-        const dayOverlays = overlaysFor(date);
-        const overflowing = maxEntriesPerDay !== void 0 && dayEntries.length > maxEntriesPerDay;
-        const collapsed = overflowing && (onShowMore !== void 0 || !expandedDates.has(date));
-        const shownEntries = collapsed ? dayEntries.slice(0, Math.max(0, maxEntriesPerDay)) : dayEntries;
-        const hiddenCount = dayEntries.length - shownEntries.length;
-        const badge = renderDayBadge?.(date, dayEntries);
-        const dateButton = /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), "aria-label": dateText(date, "day"), children: Number(date.slice(-2)) });
-        return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
-          badge == null || badge === false ? dateButton : /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__dayhead", children: [
-            /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__badge", children: badge }),
-            dateButton
-          ] }),
-          dayOverlays.map((overlay) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
-          /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__entries", children: [
-            shownEntries.map((entry) => {
-              const span = entrySpans.get(entry.id);
-              const state = entry.state ?? "scheduled";
-              return /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-scheduling-calendar__entry", "data-state": state, "data-range-start": date === span.start || void 0, "data-range-end": date === span.end || void 0, onClick: () => onSelectEntry?.(entry), "aria-label": fillLabel(labels.entry, { title: entry.title, state: stateLabel[state], start: formatInstant(entry.start), end: formatInstant(entry.end) }), children: [
-                /* @__PURE__ */ jsx("span", { children: renderEntry?.(entry) ?? entry.title }),
-                /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: stateLabel[state] })
-              ] }, entry.id);
-            }),
-            overflowing && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-expanded": onShowMore ? void 0 : !collapsed, "aria-label": collapsed ? fillLabel(labels.moreEntriesLabel, { count: hiddenCount, date: dateText(date, "day") }) : void 0, onClick: () => toggleMore(date, dayEntries), children: collapsed ? fillLabel(labels.moreEntries, { count: hiddenCount }) : labels.fewerEntries })
-          ] })
-        ] }, 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 })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-scheduling-calendar__legend", "aria-label": labels.legend, children: ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ jsx("span", { "data-state": state, children: stateLabel[state] }, state)) })
+    legend ? (legend.length > 0 || legendCaption != null && legendCaption !== false) && /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__legend", role: "group", "aria-label": labels.legend, children: [
+      legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-scheduling-calendar__legend-list", children: legend.map((item) => /* @__PURE__ */ jsxs("li", { "data-legend-id": item.id, children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__swatch", "aria-hidden": "true", "data-band": item.swatch.band, "data-status": item.swatch.status, "data-pattern": item.swatch.pattern, children: item.swatch.icon }),
+        item.label
+      ] }, item.id)) }),
+      legendCaption != null && legendCaption !== false && /* @__PURE__ */ jsx("p", { className: "uix-scheduling-calendar__legend-caption", children: legendCaption })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-calendar__legend", role: "group", "aria-label": labels.legend, children: [
+      ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ jsx("span", { "data-state": state, children: stateLabel[state] }, state)),
+      legendCaption != null && legendCaption !== false && /* @__PURE__ */ jsx("p", { className: "uix-scheduling-calendar__legend-caption", children: legendCaption })
+    ] })
   ] });
 }
 export {

package/dist/components/SchedulingTimeGrid.d.ts

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