@tensor_1/react 2.31.0 → 2.32.0

package/dist/components/SchedulingCalendar.js

@@ -1,7 +1,8 @@
 "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 { itemDaySpan, layoutMonthSpans } from "../scheduling-calendar-model.js";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
 import { StatusPill } from "./StatusPill.js";
@@ -10,6 +11,10 @@ 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",
   viewGroup: "Calendar view",
   viewMonth: "Month",
   viewWeek: "Week",
@@ -20,11 +25,16 @@ 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" }
 };
 const stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
 const utcDate = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
@@ -33,8 +43,24 @@ const INTL_PARTS = {
   weekday: { weekday: "short", timeZone: "UTC" },
   month: { month: "long", year: "numeric", 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 }) {
+  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 })
+  ] });
+}
 function SchedulingCalendar({
   entries,
   anchorDate,
@@ -44,6 +70,7 @@ function SchedulingCalendar({
   onAnchorDateChange,
   onSelectEntry,
   overlays = EMPTY_OVERLAYS,
+  onSelectOverlay,
   filter,
   renderEntry,
   locale,
@@ -53,6 +80,17 @@ function SchedulingCalendar({
   maxEntriesPerDay,
   onShowMore,
   renderDayBadge,
+  days: dayInfo,
+  dayEntries,
+  spanLayout,
+  windowLaneCap,
+  spanLaneCap,
+  legend,
+  legendCaption,
+  showHeader = true,
+  notice,
+  emptyNote,
+  onSelectDate,
   loading,
   error,
   onRetry,
@@ -60,11 +98,12 @@ 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 };
@@ -72,16 +111,66 @@ function SchedulingCalendar({
   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 { 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") 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, 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]);
@@ -90,6 +179,10 @@ function SchedulingCalendar({
     onViewChange?.(next);
   };
   const movePeriod = (direction) => onAnchorDateChange?.(view === "month" ? addCalendarMonths(anchorDate, direction) : addCalendarDays(anchorDate, direction * 7));
+  const periodLabel = (direction) => {
+    const key = `${direction}${view === "month" ? "Month" : "Week"}`;
+    return overrides[key] ?? overrides[direction] ?? labels[key];
+  };
   const focusDate = (date) => {
     setActiveDate(date);
     requestAnimationFrame(() => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus());
@@ -107,18 +200,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 +213,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)) })
     ] }),
+    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 +345,24 @@ 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: [
+    }) }) }) : /* @__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/SchedulingTimeline.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { TimelineRange, TimelineScale } from '../scheduling-timeline-model.js';
 import { SchedulingEntryState } from './SchedulingCalendar.js';
 import '../calendar-model.js';
+import '../scheduling-calendar-model.js';
 
 interface SchedulingTimelineLane {
     id: string;

package/dist/components/Segmented.d.ts

@@ -6,6 +6,14 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
     value?: string;
     /** Fires with the option's value when a different option is chosen. */
     onChange?: (value: string) => void;
+    /**
+     * How the choice is exposed to assistive technology (HAR-1604).
+     * `'toggle'` (default): `role="group"` of buttons with `aria-pressed`, for a view or filter
+     * toggle bar. `'radio'`: `role="radiogroup"` of `role="radio"` with `aria-checked`, for a
+     * setting with exactly one value (theme, density, language). Name the group with
+     * `aria-label` or `aria-labelledby` in either mode. The keyboard model is the same in both.
+     */
+    selection?: 'toggle' | 'radio';
     children?: ReactNode;
 }
 /**
@@ -13,16 +21,22 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
  * (density, audience, view mode …) that reads as one pill with a lifted active
  * segment. Selection state is shared with `<SegmentedOption>` via context, so
  * the caller only wires `value` + `onChange` once.
+ *
+ * Keyboard (HAR-1604): the group is ONE tab stop, on the selected option (the first enabled
+ * one when nothing is selected). Arrow Right/Down and Left/Up move to the next / previous
+ * enabled option and select it, wrapping at the ends; Home and End jump; Left/Right swap in
+ * a right-to-left group. Before 2.32.0 every option was its own tab stop.
  */
-declare function Segmented({ value, onChange, children, className, ...props }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ value, onChange, selection, children, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
 interface SegmentedOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
     value: string;
     children?: ReactNode;
 }
 /**
  * One option in a `<Segmented>`. Active state is derived from the parent's
- * `value`; the pressed segment lifts to the surface via
- * `.uix-segmented__option[aria-pressed="true"]`.
+ * `value`; the selected segment lifts to the surface via
+ * `.uix-segmented__option[aria-pressed="true"]` (or `[aria-checked="true"]` in a
+ * `selection="radio"` group).
  */
 declare function SegmentedOption({ value, children, className, onClick, ...props }: SegmentedOptionProps): react.JSX.Element;
 

package/dist/components/Segmented.js

@@ -1,11 +1,61 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { cx } from "../cx.js";
 const SegmentedCtx = createContext({});
-function Segmented({ value, onChange, children, className, ...props }) {
-  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
-  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
+const OPTION = ".uix-segmented__option";
+function Segmented({ value, onChange, selection = "toggle", children, className, onKeyDown, ...props }) {
+  const ref = useRef(null);
+  const contextValue = useMemo(() => ({ value, onChange, selection }), [value, onChange, selection]);
+  useEffect(() => {
+    const group = ref.current;
+    if (!group) return;
+    const all = Array.from(group.querySelectorAll(OPTION));
+    const enabled = all.filter((o) => !o.disabled);
+    const current = enabled.find((o) => o.getAttribute("aria-pressed") === "true" || o.getAttribute("aria-checked") === "true") ?? enabled[0];
+    for (const o of all) o.tabIndex = o === current ? 0 : -1;
+  });
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    const group = ref.current;
+    const from = event.target.closest(OPTION);
+    if (!group || !from || !group.contains(from)) return;
+    const options = Array.from(group.querySelectorAll(`${OPTION}:not(:disabled)`));
+    const index = options.indexOf(from);
+    if (index < 0) return;
+    const rtl = getComputedStyle(group).direction === "rtl";
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+        next = index + 1;
+        break;
+      case "ArrowUp":
+        next = index - 1;
+        break;
+      case "ArrowRight":
+        next = index + (rtl ? -1 : 1);
+        break;
+      case "ArrowLeft":
+        next = index + (rtl ? 1 : -1);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = options.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const target = options[(next + options.length) % options.length];
+    if (!target || target === from) return;
+    target.focus();
+    target.click();
+  };
+  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, role: selection === "radio" ? "radiogroup" : "group", className: cx("uix-segmented", className), onKeyDown: handleKeyDown, ...props, children }) });
 }
 function SegmentedOption({
   value,
@@ -16,12 +66,16 @@ function SegmentedOption({
 }) {
   const ctx = useContext(SegmentedCtx);
   const selected = ctx.value === value;
+  const radio = ctx.selection === "radio";
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
+      role: radio ? "radio" : void 0,
       className: cx("uix-segmented__option", className),
-      "aria-pressed": selected,
+      "aria-pressed": radio ? void 0 : selected,
+      "aria-checked": radio ? selected : void 0,
+      tabIndex: ctx.selection ? selected ? 0 : -1 : void 0,
       onClick: (e) => {
         ctx.onChange?.(value);
         onClick?.(e);

package/dist/components/Select.d.ts

@@ -1,9 +1,73 @@
 import * as react from 'react';
-import { SelectHTMLAttributes } from 'react';
+import { SelectHTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../overlay-position.js';
+import { SelectOption, SelectGroup } from '../select-model.js';
 
+/** Chrome strings of `Select`; `{count}` is replaced where noted. */
+interface SelectLabels {
+    /** Accessible name of the filter field when the Select has no label of its own. */
+    search: string;
+    /** Placeholder of the filter field. */
+    searchPlaceholder: string;
+    loading: string;
+    /** No options at all. */
+    empty: string;
+    /** A filter matched nothing. */
+    noMatches: string;
+    /** Async `loadOptions` failed. */
+    error: string;
+    retry: string;
+    /** Multi-select: clears every value. */
+    clear: string;
+    /** Multi-select on a phone: closes the sheet. */
+    done: string;
+    /** Multi-select trigger, spoken after the "+N". `{count}` = how many are selected. */
+    selectedCount: string;
+    /** Announced after filtering. `{count}`. */
+    results: string;
+}
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     size?: 'sm' | 'md';
+    /** The options as data, instead of `<option>` / `<optgroup>` children. */
+    options?: readonly (SelectOption | SelectGroup)[];
+    /**
+     * Called with the new value: a string, or every selected value with `multiple`. `option` is the
+     * option that was chosen or toggled. `onChange(e)` still fires as on a native select.
+     */
+    onValueChange?: (value: string | string[], option?: SelectOption) => void;
+    /** Shown while nothing is selected. Also makes "nothing" the starting value (and `required` checks it). */
+    placeholder?: string;
+    /** Marks the control invalid (`aria-invalid`), e.g. from your own validation. */
+    invalid?: boolean;
+    /** Shows and submits the value, but does not open. */
+    readOnly?: boolean;
+    /** A filter field at the top of the list. `'auto'` adds it for more than 12 options. Default `false`. */
+    searchable?: boolean | 'auto';
+    /**
+     * Load the options when the list opens (and, when `searchable`, as the filter changes). The
+     * previous request's `signal` is aborted when a newer one starts or the list closes. Pass the
+     * selected option in `options` so its label shows before the first load.
+     */
+    loadOptions?: (query: string, signal: AbortSignal) => Promise<readonly (SelectOption | SelectGroup)[]>;
+    /** Draw an option's content (the check mark for the selected state is drawn for you). */
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+        active: boolean;
+    }) => ReactNode;
+    /** Draw the trigger's content for the selected option(s). */
+    renderValue?: (selected: readonly SelectOption[]) => ReactNode;
+    /** Preferred side of the list. Default `'bottom-start'`; it flips when there is no room. */
+    placement?: Placement;
+    labels?: Partial<SelectLabels>;
 }
+/**
+ * A select that draws its own list (HAR-1572): the WAI-ARIA APG select-only combobox — focus
+ * stays on the trigger, `aria-activedescendant` marks the active option — in a top-layer popover
+ * placed with `useAnchoredPosition`, or a bottom sheet on a phone. A visually hidden native
+ * `<select>` carries `name`, `required`, `form`, `multiple` and the value, so `<option>` children,
+ * `onChange(e)` with `e.target.value`, FormData, `form.reset()`, `ref` and react-hook-form keep
+ * working; `ref` points at that select.
+ */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
 
-export { Select, type SelectProps };
+export { Select, SelectGroup, type SelectLabels, SelectOption, type SelectProps };