gridsmith-ui 0.25.0 → 0.26.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-OTCEJN64.js';
-import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, Label, InlineFieldError, AddAnotherRowCtx, Field } from './chunk-W7GCEJEH.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-W7GCEJEH.js';
-import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-3CUKJ4VP.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-3CUKJ4VP.js';
-import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-HZIP4EJI.js';
-export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-HZIP4EJI.js';
+import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, Label, InlineFieldError, AddAnotherRowCtx, Field } from './chunk-CYN5O567.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-CYN5O567.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-KWLNEH53.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-KWLNEH53.js';
+import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-ZYVXV4WC.js';
+export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-ZYVXV4WC.js';
 import { Skeleton, TITLE_TEXT, formatLocale } from './chunk-X2HEV7FB.js';
 export { Skeleton } from './chunk-X2HEV7FB.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
@@ -14,18 +14,18 @@ import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } fro
 export { useFormContext } from './chunk-XVB55M3N.js';
 import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-RWKCAKN3.js';
 export { Avatar } from './chunk-RWKCAKN3.js';
-import { Link } from './chunk-QGSCF7PN.js';
-export { CodeBlock, Divider, Link } from './chunk-QGSCF7PN.js';
-import { useFillHeight, FillContext } from './chunk-2YSEME33.js';
+import { Link } from './chunk-MYIJNVTK.js';
+export { CodeBlock, Divider, Link } from './chunk-MYIJNVTK.js';
+import { useFillHeight, FillContext, useKeyboardScroll, FOCUS_INSET } from './chunk-SFY2KMHG.js';
 import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-QM4SJKWV.js';
-import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, rovingTabStop, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
-export { useGridKeyboard } from './chunk-JXANCXK6.js';
-import { Badge } from './chunk-FHMCAOAH.js';
-export { Badge } from './chunk-FHMCAOAH.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, rovingTabStop, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-ZI3OQDET.js';
+export { useGridKeyboard } from './chunk-ZI3OQDET.js';
+import { Badge } from './chunk-EX64MN2U.js';
+export { Badge } from './chunk-EX64MN2U.js';
 import { useTextOverflow, Tooltip } from './chunk-MD2EFMES.js';
 export { Tooltip, useTextOverflow } from './chunk-MD2EFMES.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
-import { Icon, slotIcon, warnOnce } from './chunk-HYMXAIXN.js';
+import { Icon, slotIcon, warnOnce } from './chunk-HXVXJUGV.js';
 import { usePosition } from './chunk-HP7WUZPK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
@@ -247,7 +247,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   const listboxId = useId();
   const pos = usePosition(triggerRef, listRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const filtered = options.filter(
-    (o) => !o.disabled && foldForSearch(o.label).includes(foldForSearch(query))
+    (o) => !o.disabled && foldForSearch(o.keywords ? `${o.label} ${o.keywords}` : o.label).includes(foldForSearch(query))
   );
   useActiveOptionInView(listRef, open && filtered[highlightIdx] ? `${listboxId}-opt-${highlightIdx}` : void 0);
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
@@ -485,6 +485,24 @@ function timeZones() {
   const zones = [...new Set(listed.map(canonicalTimeZone))].filter((z) => z !== "UTC").sort((a, b) => a.localeCompare(b));
   return ["UTC", ...zones];
 }
+var RENAMED_CITIES = [
+  ["Kolkata", ["Asia/Calcutta", "Asia/Kolkata"]],
+  ["Kyiv", ["Europe/Kiev", "Europe/Kyiv"]],
+  ["Ho Chi Minh City", ["Asia/Saigon", "Asia/Ho_Chi_Minh"]],
+  ["Yangon", ["Asia/Rangoon", "Asia/Yangon"]],
+  ["Kathmandu", ["Asia/Katmandu", "Asia/Kathmandu"]],
+  ["Nuuk", ["America/Godthab", "America/Nuuk"]],
+  ["Faroe", ["Atlantic/Faeroe", "Atlantic/Faroe"]],
+  ["Chuuk", ["Pacific/Truk", "Pacific/Chuuk"]],
+  ["Pohnpei", ["Pacific/Ponape", "Pacific/Pohnpei"]],
+  ["Kanton", ["Pacific/Enderbury", "Pacific/Kanton"]],
+  ["Asmara", ["Africa/Asmera", "Africa/Asmara"]],
+  ["Atikokan", ["America/Coral_Harbour", "America/Atikokan"]],
+  ["Thimphu", ["Asia/Thimbu", "Asia/Thimphu"]],
+  ["Dhaka", ["Asia/Dacca", "Asia/Dhaka"]],
+  ["Ulaanbaatar", ["Asia/Ulan_Bator", "Asia/Ulaanbaatar"]]
+];
+var CITY_OF = new Map(RENAMED_CITIES.flatMap(([city, zones]) => zones.map((zone) => [zone, city])));
 var labelOf = (zone, at) => {
   const offset = timeZoneOffset(zone, at);
   return offset ? `${zone.replace(/_/g, " ")} (${offset})` : zone.replace(/_/g, " ");
@@ -495,7 +513,7 @@ function zoneOptions() {
   const now = Date.now();
   if (!zoneList || now - zoneList.at > HOUR) {
     const at = new Date(now);
-    zoneList = { at: now, options: timeZones().map((zone) => ({ value: zone, label: labelOf(zone, at) })) };
+    zoneList = { at: now, options: timeZones().map((zone) => ({ value: zone, label: labelOf(zone, at), keywords: CITY_OF.get(zone) })) };
   }
   return zoneList.options;
 }
@@ -506,9 +524,9 @@ function TimezoneSelect({ value, onChange, placeholder = "Search time zones\u202
     if (!stored) {
       const mine = browserTimeZone();
       const label = zones.find((o) => o.value === mine)?.label ?? labelOf(mine, /* @__PURE__ */ new Date());
-      return [{ value: mine, label: `${label} \xB7 your time zone` }, ...zones.filter((o) => o.value !== mine)];
+      return [{ value: mine, label: `${label} \xB7 your time zone`, keywords: CITY_OF.get(mine) }, ...zones.filter((o) => o.value !== mine)];
     }
-    return zones.some((o) => o.value === stored) ? zones : [{ value: stored, label: labelOf(stored, /* @__PURE__ */ new Date()) }, ...zones];
+    return zones.some((o) => o.value === stored) ? zones : [{ value: stored, label: labelOf(stored, /* @__PURE__ */ new Date()), keywords: CITY_OF.get(stored) }, ...zones];
   }, [zones, stored]);
   return /* @__PURE__ */ jsx(Combobox, { value: stored, onChange, options, placeholder, ...rest });
 }
@@ -877,6 +895,279 @@ function dateSegments(dayFirst, daysInMonth = 31) {
   const year = { key: "year", label: "Year", min: 1, max: 9999, maxDigits: 4, placeholder: "yyyy" };
   return dayFirst ? [day, month, year] : [month, day, year];
 }
+
+// ../../showcase/src/components/Calendar/calendar-utils.ts
+var formatters = /* @__PURE__ */ new Map();
+function dtf(options) {
+  const locale = formatLocale();
+  const key = `${locale ?? ""}|${JSON.stringify(options)}`;
+  let f = formatters.get(key);
+  if (!f) {
+    f = new Intl.DateTimeFormat(locale, options);
+    formatters.set(key, f);
+  }
+  return f;
+}
+function monthName(month, width = "long") {
+  return dtf({ month: width }).format(new Date(2026, month, 1));
+}
+function weekdayNames(weekStartsOn, width = "short") {
+  const f = dtf({ weekday: width });
+  return Array.from({ length: 7 }, (_, i) => f.format(new Date(2026, 0, 4 + weekStartsOn + i)));
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function isToday(d) {
+  return isSameDay(d, /* @__PURE__ */ new Date());
+}
+function isWeekend(d) {
+  const day = d.getDay();
+  return day === 0 || day === 6;
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function startOfWeek(d, weekStartsOn = 0) {
+  const date = new Date(d);
+  const day = date.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  date.setDate(date.getDate() - diff);
+  return startOfDay(date);
+}
+function endOfWeek(d, weekStartsOn = 0) {
+  const start = startOfWeek(d, weekStartsOn);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 6);
+  end.setHours(23, 59, 59, 999);
+  return end;
+}
+function addDays2(d, n) {
+  const result = new Date(d);
+  result.setDate(result.getDate() + n);
+  return result;
+}
+function addMonths(d, n) {
+  const result = new Date(d);
+  const day = result.getDate();
+  result.setDate(1);
+  result.setMonth(result.getMonth() + n);
+  result.setDate(Math.min(day, new Date(result.getFullYear(), result.getMonth() + 1, 0).getDate()));
+  return result;
+}
+function getMonthGrid(year, month, weekStartsOn = 0) {
+  const firstOfMonth = new Date(year, month, 1);
+  const gridStart = startOfWeek(firstOfMonth, weekStartsOn);
+  const weeks = [];
+  const current = new Date(gridStart);
+  for (let w = 0; w < 6; w++) {
+    const week = [];
+    for (let d = 0; d < 7; d++) {
+      week.push(new Date(current));
+      current.setDate(current.getDate() + 1);
+    }
+    weeks.push(week);
+  }
+  return weeks;
+}
+function getWeekDays(date, weekStartsOn = 0) {
+  const start = startOfWeek(date, weekStartsOn);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    days.push(addDays2(start, i));
+  }
+  return days;
+}
+var DAY_MS = 864e5;
+function daysBetween(a, b) {
+  return Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / DAY_MS);
+}
+function eventSpan(e) {
+  const first = startOfDay(e.start);
+  if (!e.end) return { first, last: first };
+  const lastInstant = e.allDay ? e.end : new Date(e.end.getTime() - 1);
+  const last = startOfDay(lastInstant);
+  return { first, last: last < first ? first : last };
+}
+function isBarEvent(e) {
+  if (e.allDay) return true;
+  if (!e.end) return false;
+  const dayLater = new Date(e.start);
+  dayLater.setDate(dayLater.getDate() + 1);
+  return e.end.getTime() >= dayLater.getTime();
+}
+function getEventsForDay(events, date) {
+  const day = startOfDay(date).getTime();
+  return events.filter((e) => {
+    const { first, last } = eventSpan(e);
+    return first.getTime() <= day && day <= last.getTime();
+  });
+}
+function dayPieces(events, date) {
+  const dayStart = startOfDay(date);
+  const next = new Date(dayStart.getFullYear(), dayStart.getMonth(), dayStart.getDate() + 1);
+  const pieces = [];
+  for (const event of events) {
+    if (isBarEvent(event)) continue;
+    const ownDayEnd = new Date(event.start.getFullYear(), event.start.getMonth(), event.start.getDate() + 1);
+    const end = event.end && event.end > event.start ? event.end : new Date(Math.min(event.start.getTime() + 36e5, ownDayEnd.getTime()));
+    const start = event.start < dayStart ? dayStart : event.start;
+    const stop = end > next ? next : end;
+    if (stop > start) pieces.push({ event, start, end: stop });
+  }
+  return pieces.sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime());
+}
+function twelveHour() {
+  return /^h1[12]$/.test(dtf({ hour: "numeric" }).resolvedOptions().hourCycle ?? "");
+}
+var timeOptions = () => ({ hour: twelveHour() ? "numeric" : "2-digit", minute: "2-digit" });
+function formatTime(d) {
+  return dtf(timeOptions()).format(d);
+}
+function formatHourLabel(hour) {
+  const at = new Date(2026, 0, 5, hour);
+  return twelveHour() ? dtf({ hour: "numeric" }).format(at) : dtf({ hour: "2-digit", minute: "2-digit" }).format(at);
+}
+function dayOffset(days) {
+  return new Intl.NumberFormat(formatLocale(), { signDisplay: "always" }).format(days);
+}
+function formatTimeRange(start, end) {
+  if (!end) return formatTime(start);
+  const f = dtf(timeOptions());
+  if (daysBetween(start, end) === 0) return f.formatRange(start, end);
+  const sep = f.formatRangeToParts(start, end).find((p) => p.source === "shared" && p.type === "literal")?.value ?? " \u2013 ";
+  const days = endDays(start, end);
+  return days === 0 ? `${f.format(start)}${sep}${f.format(end)}` : `${f.format(start)}${sep}${f.format(end)} (${dayOffset(days)})`;
+}
+function endDays(start, end) {
+  return end > start ? daysBetween(start, new Date(end.getTime() - 1)) : daysBetween(start, end);
+}
+function speakTimeRange(start, end) {
+  if (!end) return formatTime(start);
+  const days = endDays(start, end);
+  const to = `${formatTime(start)} to ${formatTime(end)}`;
+  return days === 0 ? to : days === 1 ? `${to} the next day` : `${to}, ${days} days later`;
+}
+function formatMonthYear(d) {
+  return dtf({ month: "long", year: "numeric" }).format(d);
+}
+function formatDayLong(d) {
+  return dtf({ weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);
+}
+function formatDayShort(d) {
+  return dtf({ weekday: "short", day: "numeric", month: "short" }).format(d);
+}
+function formatDayMedium(d) {
+  return dtf({ day: "numeric", month: "short", year: "numeric" }).format(d);
+}
+function formatDayRange(start, end) {
+  return dtf({ day: "numeric", month: "short", year: "numeric" }).formatRange(startOfDay(start), startOfDay(end));
+}
+function formatMonthRange(start, end) {
+  return dtf({ month: "long", year: "numeric" }).formatRange(new Date(start.getFullYear(), start.getMonth(), 1), new Date(end.getFullYear(), end.getMonth(), 1));
+}
+function formatWeekRange(d, weekStartsOn = 0) {
+  return dtf({ day: "numeric", month: "short", year: "numeric" }).formatRange(startOfWeek(d, weekStartsOn), startOfDay(endOfWeek(d, weekStartsOn)));
+}
+function formatEventWhen(e, spoken = false) {
+  const { first, last } = eventSpan(e);
+  const multiDay = last > first;
+  if (e.allDay) {
+    if (!multiDay) return spoken ? formatDayLong(first) : formatDayShort(first);
+    return dtf(spoken ? { weekday: "long", day: "numeric", month: "long" } : { day: "numeric", month: "short" }).formatRange(first, last);
+  }
+  if (!e.end || !isBarEvent(e)) {
+    const day = spoken ? formatDayLong(e.start) : formatDayShort(e.start);
+    const end = e.end && e.end > e.start ? e.end : void 0;
+    return `${day}, ${spoken ? speakTimeRange(e.start, end) : formatTimeRange(e.start, end)}`;
+  }
+  return dtf({ weekday: "short", day: "numeric", month: "short", hour: "numeric", minute: "2-digit" }).formatRange(e.start, e.end);
+}
+function layoutWeek(events, days, capacity) {
+  const weekStart = startOfDay(days[0]);
+  const weekEnd = startOfDay(days[days.length - 1]);
+  const items = [];
+  for (const event of events) {
+    const { first, last } = eventSpan(event);
+    if (last < weekStart || first > weekEnd) continue;
+    items.push({
+      event,
+      startCol: Math.max(0, daysBetween(weekStart, first)),
+      endCol: Math.min(days.length - 1, daysBetween(weekStart, last)),
+      before: first < weekStart,
+      after: last > weekEnd,
+      length: daysBetween(first, last) + 1
+    });
+  }
+  items.sort((a, b) => {
+    const barA = isBarEvent(a.event) || a.length > 1, barB = isBarEvent(b.event) || b.length > 1;
+    if (barA !== barB) return barA ? -1 : 1;
+    if (barA && a.length !== b.length) return b.length - a.length;
+    return a.event.start.getTime() - b.event.start.getTime() || a.event.title.localeCompare(b.event.title);
+  });
+  const taken = [];
+  const laneOf = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    let lane = 0;
+    while (Array.from({ length: item.endCol - item.startCol + 1 }, (_, k) => taken[lane]?.[item.startCol + k]).some(Boolean)) lane++;
+    taken[lane] ??= [];
+    for (let c = item.startCol; c <= item.endCol; c++) taken[lane][c] = true;
+    laneOf.set(item, lane);
+  }
+  const cap = Math.max(1, capacity);
+  const overflow = days.map((_, c) => items.some((it) => laneOf.get(it) >= cap && it.startCol <= c && c <= it.endCol));
+  const more = days.map((_, c) => overflow[c] ? items.filter((it) => laneOf.get(it) >= cap - 1 && it.startCol <= c && c <= it.endCol).map((it) => it.event) : []);
+  const segments = [];
+  for (const item of items) {
+    const lane = laneOf.get(item);
+    if (lane >= cap) continue;
+    if (lane < cap - 1) {
+      segments.push({ event: item.event, startCol: item.startCol, span: item.endCol - item.startCol + 1, lane, continuesBefore: item.before, continuesAfter: item.after });
+      continue;
+    }
+    let runStart = -1;
+    for (let c = item.startCol; c <= item.endCol + 1; c++) {
+      const free = c <= item.endCol && !overflow[c];
+      if (free && runStart < 0) runStart = c;
+      if (!free && runStart >= 0) {
+        segments.push({ event: item.event, startCol: runStart, span: c - runStart, lane, continuesBefore: runStart > item.startCol || item.before, continuesAfter: c - 1 < item.endCol || item.after });
+        runStart = -1;
+      }
+    }
+  }
+  const lanes = Math.min(cap, taken.length);
+  return { segments, more, lanes };
+}
+function layoutPieces(pieces, minMinutes = 0) {
+  const out = [];
+  let group = [];
+  let columnEnds = [];
+  let groupEnd = -Infinity;
+  const close = () => {
+    for (const placed of group) placed.columns = columnEnds.length;
+    out.push(...group);
+    group = [];
+    columnEnds = [];
+  };
+  for (const piece of pieces) {
+    const at = piece.start.getTime();
+    const end = Math.max(piece.end.getTime(), at + minMinutes * 6e4);
+    if (group.length && at >= groupEnd) close();
+    let column = columnEnds.findIndex((e) => e <= at);
+    if (column < 0) column = columnEnds.push(0) - 1;
+    columnEnds[column] = end;
+    groupEnd = Math.max(group.length ? groupEnd : -Infinity, end);
+    group.push({ piece, column, columns: 0 });
+  }
+  if (group.length) close();
+  return out;
+}
+function timeToFraction(d) {
+  return (d.getHours() * 60 + d.getMinutes()) / (24 * 60);
+}
 var CONTROL_HEIGHT2 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -887,21 +1178,19 @@ var TEXT_SIZE2 = {
   md: "text-sm",
   lg: "text-base"
 };
-var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-var DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
+var ENGLISH_MONTHS = [
+  "january",
+  "february",
+  "march",
+  "april",
+  "may",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december"
 ];
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
@@ -909,12 +1198,9 @@ function getDaysInMonth(year, month) {
 function getFirstDayOfWeek(year, month) {
   return new Date(year, month, 1).getDay();
 }
-function isSameDay(a, b) {
+function isSameDay2(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
-function formatDate(d) {
-  return `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
-}
 function localeDayFirst() {
   try {
     const parts = new Intl.DateTimeFormat(formatLocale()).formatToParts(new Date(2e3, 11, 25));
@@ -923,23 +1209,32 @@ function localeDayFirst() {
     return true;
   }
 }
-function validDate(year, monthIndex, day) {
-  if (monthIndex < 0 || monthIndex > 11 || day < 1) return null;
-  const d = new Date(year, monthIndex, day);
-  return d.getFullYear() === year && d.getMonth() === monthIndex && d.getDate() === day ? d : null;
+function validDate(year, monthIndex2, day) {
+  if (monthIndex2 < 0 || monthIndex2 > 11 || day < 1) return null;
+  const d = new Date(year, monthIndex2, day);
+  return d.getFullYear() === year && d.getMonth() === monthIndex2 && d.getDate() === day ? d : null;
+}
+function monthIndex(name) {
+  const typed = name.toLocaleLowerCase().replace(/\.$/, "");
+  const fold = (m) => m.toLocaleLowerCase().replace(/\.$/, "");
+  const lists = [ENGLISH_MONTHS, Array.from({ length: 12 }, (_, i) => fold(monthName(i, "long"))), Array.from({ length: 12 }, (_, i) => fold(monthName(i, "short")))];
+  for (const list of lists) {
+    const i = list.findIndex((m) => m.startsWith(typed) || typed.length >= 3 && typed.startsWith(m));
+    if (i >= 0) return i;
+  }
+  return -1;
 }
 function parseTypedDate(text, dayFirst = localeDayFirst()) {
   const t = text.trim().replace(/\s+/g, " ");
   if (!t) return null;
   let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t);
   if (m) return validDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
-  const monthIndex = (name) => MONTHS.findIndex((mm) => mm.toLowerCase().startsWith(name.toLowerCase().replace(/\.$/, "")));
-  m = /^([A-Za-z]{3,})\.?\s+(\d{1,2}),?\s+(\d{4})$/.exec(t);
+  m = /^(\p{L}{3,})\.?\s+(\d{1,2}),?\s+(\d{4})$/u.exec(t);
   if (m) {
     const mi = monthIndex(m[1]);
     return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[2]));
   }
-  m = /^(\d{1,2})\s+([A-Za-z]{3,})\.?,?\s+(\d{4})$/.exec(t);
+  m = /^(\d{1,2})\.?\s+(\p{L}{3,})\.?,?\s+(\d{4})$/u.exec(t);
   if (m) {
     const mi = monthIndex(m[2]);
     return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[1]));
@@ -1059,7 +1354,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
     const d = validDate(next.year, next.month - 1, next.day);
     const ok = !!d && (!min || d >= min) && (!max || d <= max);
     setTypedInvalid(!ok);
-    if (d && ok && !(value && isSameDay(value, d))) {
+    if (d && ok && !(value && isSameDay2(value, d))) {
       lastCommitted.current = d.getTime();
       onChange(d);
       setViewDate(d);
@@ -1139,7 +1434,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
   };
   const rangeA = range2?.start ?? null;
   const rangeB = range2?.end ?? null;
-  const otherEnd = value ? rangeA && !isSameDay(rangeA, value) ? rangeA : rangeB : rangeA ?? rangeB;
+  const otherEnd = value ? rangeA && !isSameDay2(rangeA, value) ? rangeA : rangeB : rangeA ?? rangeB;
   const thisEnd = value ?? (otherEnd && hover ? hover : null);
   const [bandStart, bandEnd] = otherEnd && thisEnd ? otherEnd <= thisEnd ? [otherEnd, thisEnd] : [thisEnd, otherEnd] : [null, null];
   const inBand = (d) => !!(bandStart && bandEnd && d > bandStart && d < bandEnd);
@@ -1256,11 +1551,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                 style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
                 children: [
                   /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
-                    MONTHS[month],
-                    " ",
-                    year
-                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: formatMonthYear(viewDate) }),
                   /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
                 ]
               }
@@ -1270,18 +1561,18 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
               {
                 ref: gridRef,
                 role: "grid",
-                "aria-label": `${MONTHS[month]} ${year}`,
+                "aria-label": formatMonthYear(viewDate),
                 onKeyDown: grid.onKeyDown,
                 className: "flex flex-col gap-ds-0.5 tabular-nums",
                 style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
                 children: [
-                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: DAYS.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": DAY_NAMES[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
+                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: weekdayNames(0, "narrow").map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": weekdayNames(0, "long")[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
                   weeks.map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", onMouseLeave: () => setHover(null), children: week.map((day, i) => {
                     if (day === null) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, `empty-${i}`);
                     const dateObj = new Date(year, month, day);
-                    const isSelected = !!value && isSameDay(dateObj, value);
-                    const isOtherEnd = !!otherEnd && isSameDay(dateObj, otherEnd);
-                    const isToday2 = isSameDay(dateObj, today);
+                    const isSelected = !!value && isSameDay2(dateObj, value);
+                    const isOtherEnd = !!otherEnd && isSameDay2(dateObj, otherEnd);
+                    const isToday2 = isSameDay2(dateObj, today);
                     const between = inBand(dateObj);
                     const dis = isDisabledDay(dateObj);
                     return /* @__PURE__ */ jsx(
@@ -1294,12 +1585,12 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                         "aria-disabled": dis || void 0,
                         onClick: () => selectDay(day),
                         onFocus: () => {
-                          if (!isSameDay(dateObj, focusDate)) setFocusDate(dateObj);
+                          if (!isSameDay2(dateObj, focusDate)) setFocusDate(dateObj);
                         },
                         onMouseEnter: () => setHover(dateObj),
                         "aria-selected": isSelected,
                         "aria-current": isToday2 ? "date" : void 0,
-                        "aria-label": formatDate(dateObj),
+                        "aria-label": formatDayLong(dateObj),
                         className: cn(
                           "w-full aspect-square flex items-center justify-center text-xs",
                           "transition-colors cursor-pointer",
@@ -1355,174 +1646,6 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
     )
   ] });
 }
-
-// ../../showcase/src/components/Calendar/calendar-utils.ts
-var MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var MONTH_NAMES_SHORT = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-var DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-var DAY_NAMES_MIN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function getOrderedDayNames(weekStartsOn) {
-  if (weekStartsOn === 1) return [...DAY_NAMES_MIN.slice(1), DAY_NAMES_MIN[0]];
-  return DAY_NAMES_MIN;
-}
-function getOrderedDayNamesShort(weekStartsOn) {
-  if (weekStartsOn === 1) return [...DAY_NAMES_SHORT.slice(1), DAY_NAMES_SHORT[0]];
-  return DAY_NAMES_SHORT;
-}
-function isSameDay2(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function isSameMonth(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
-}
-function isToday(d) {
-  return isSameDay2(d, /* @__PURE__ */ new Date());
-}
-function isWeekend(d) {
-  const day = d.getDay();
-  return day === 0 || day === 6;
-}
-function startOfDay(d) {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
-}
-function startOfWeek(d, weekStartsOn = 0) {
-  const date = new Date(d);
-  const day = date.getDay();
-  const diff = (day - weekStartsOn + 7) % 7;
-  date.setDate(date.getDate() - diff);
-  return startOfDay(date);
-}
-function endOfWeek(d, weekStartsOn = 0) {
-  const start = startOfWeek(d, weekStartsOn);
-  const end = new Date(start);
-  end.setDate(end.getDate() + 6);
-  end.setHours(23, 59, 59, 999);
-  return end;
-}
-function addDays2(d, n) {
-  const result = new Date(d);
-  result.setDate(result.getDate() + n);
-  return result;
-}
-function addMonths(d, n) {
-  const result = new Date(d);
-  result.setMonth(result.getMonth() + n);
-  return result;
-}
-function getMonthGrid(year, month, weekStartsOn = 0) {
-  const firstOfMonth = new Date(year, month, 1);
-  const gridStart = startOfWeek(firstOfMonth, weekStartsOn);
-  const weeks = [];
-  const current = new Date(gridStart);
-  for (let w = 0; w < 6; w++) {
-    const week = [];
-    for (let d = 0; d < 7; d++) {
-      week.push(new Date(current));
-      current.setDate(current.getDate() + 1);
-    }
-    weeks.push(week);
-  }
-  return weeks;
-}
-function getWeekDays(date, weekStartsOn = 0) {
-  const start = startOfWeek(date, weekStartsOn);
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    days.push(addDays2(start, i));
-  }
-  return days;
-}
-function getEventsForDay(events, date) {
-  const dayStart = startOfDay(date);
-  const dayEnd = new Date(dayStart);
-  dayEnd.setHours(23, 59, 59, 999);
-  return events.filter((e) => {
-    const eStart = new Date(e.start);
-    const eEnd = e.end ? new Date(e.end) : eStart;
-    return eStart <= dayEnd && eEnd >= dayStart;
-  });
-}
-function formatTime(d) {
-  const h = d.getHours();
-  const m = d.getMinutes();
-  const ampm = h >= 12 ? "PM" : "AM";
-  const hour = h % 12 || 12;
-  return m === 0 ? `${hour} ${ampm}` : `${hour}:${String(m).padStart(2, "0")} ${ampm}`;
-}
-function formatTimeRange(start, end) {
-  if (!end) return formatTime(start);
-  return `${formatTime(start)} \u2013 ${formatTime(end)}`;
-}
-function formatWeekRange(d, weekStartsOn = 0) {
-  const start = startOfWeek(d, weekStartsOn);
-  const end = endOfWeek(d, weekStartsOn);
-  const sameMonth = start.getMonth() === end.getMonth();
-  if (sameMonth) {
-    return `${MONTH_NAMES_SHORT[start.getMonth()]} ${start.getDate()} \u2013 ${end.getDate()}, ${start.getFullYear()}`;
-  }
-  const sameYear = start.getFullYear() === end.getFullYear();
-  if (sameYear) {
-    return `${MONTH_NAMES_SHORT[start.getMonth()]} ${start.getDate()} \u2013 ${MONTH_NAMES_SHORT[end.getMonth()]} ${end.getDate()}, ${start.getFullYear()}`;
-  }
-  return `${MONTH_NAMES_SHORT[start.getMonth()]} ${start.getDate()}, ${start.getFullYear()} \u2013 ${MONTH_NAMES_SHORT[end.getMonth()]} ${end.getDate()}, ${end.getFullYear()}`;
-}
-function getOverlappingGroups(events) {
-  const timed = events.filter((e) => !e.allDay && e.end).sort((a, b) => a.start.getTime() - b.start.getTime());
-  if (timed.length === 0) return [];
-  const result = [];
-  const columns = [];
-  for (const event of timed) {
-    const eStart = event.start.getTime();
-    const eEnd = (event.end ?? event.start).getTime();
-    let placed = false;
-    for (let col = 0; col < columns.length; col++) {
-      if (columns[col].end <= eStart) {
-        columns[col].end = eEnd;
-        result.push({ event, column: col, totalColumns: 0 });
-        placed = true;
-        break;
-      }
-    }
-    if (!placed) {
-      columns.push({ end: eEnd });
-      result.push({ event, column: columns.length - 1, totalColumns: 0 });
-    }
-  }
-  const totalCols = columns.length;
-  for (const item of result) {
-    item.totalColumns = totalCols;
-  }
-  return result;
-}
-function timeToFraction(d) {
-  return (d.getHours() * 60 + d.getMinutes()) / (24 * 60);
-}
 var CONTROL_HEIGHT3 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -1533,10 +1656,6 @@ var TEXT_SIZE3 = {
   md: "text-sm",
   lg: "text-base"
 };
-var MONTHS2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-function fmt(d) {
-  return `${MONTHS2[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
-}
 var DEFAULT_DATE_RANGE_PRESETS = [
   { label: "Today", range: () => {
     const t = startOfDay(/* @__PURE__ */ new Date());
@@ -1591,7 +1710,8 @@ function DateRangePicker({
   const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : void 0;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const dayNames = getOrderedDayNamesShort(weekStartsOn);
+  const dayNames = weekdayNames(weekStartsOn, "narrow");
+  const dayNamesLong = weekdayNames(weekStartsOn, "long");
   const gridRef = useRef(null);
   const [focusDate, setFocusDate] = useState(() => startOfDay(value.start ?? /* @__PURE__ */ new Date()));
   const [prevOpen, setPrevOpen] = useState(open);
@@ -1605,8 +1725,8 @@ function DateRangePicker({
   }
   const showDay = (d) => {
     setFocusDate(d);
-    const monthIndex = (x) => x.getFullYear() * 12 + x.getMonth();
-    const offset = monthIndex(d) - monthIndex(viewDate);
+    const monthIndex2 = (x) => x.getFullYear() * 12 + x.getMonth();
+    const offset = monthIndex2(d) - monthIndex2(viewDate);
     if (offset < 0) setViewDate(new Date(d.getFullYear(), d.getMonth(), 1));
     else if (offset > 1) setViewDate(new Date(d.getFullYear(), d.getMonth() - 1, 1));
   };
@@ -1668,7 +1788,7 @@ function DateRangePicker({
   const rangeEnd2 = value.end ?? previewEnd;
   const inRange = (d) => !!(rangeStart && rangeEnd2 && d > rangeStart && d < rangeEnd2);
   const months = [viewDate, addMonths(viewDate, 1)];
-  const summary = value.start && value.end ? `${fmt(value.start)} \u2013 ${fmt(value.end)}` : value.start ? `${fmt(value.start)} \u2013 \u2026` : null;
+  const summary = value.start && value.end ? formatDayRange(value.start, value.end) : value.start ? `${formatDayMedium(value.start)} \u2013 \u2026` : null;
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: triggerId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
     control.requiredNote,
@@ -1735,23 +1855,15 @@ function DateRangePicker({
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-tr-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
                 /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
-                  MONTHS2[months[0].getMonth()],
-                  " ",
-                  months[0].getFullYear(),
-                  " \u2013 ",
-                  MONTHS2[months[1].getMonth()],
-                  " ",
-                  months[1].getFullYear()
-                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: formatMonthRange(months[0], months[1]) }),
                 /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": `${MONTHS2[m.getMonth()]} ${m.getFullYear()}`, className: "w-[224px] flex flex-col gap-ds-0.5", children: [
-                /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { role: "columnheader", className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
+              /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": formatMonthYear(m), className: "w-[224px] flex flex-col gap-ds-0.5", children: [
+                /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: dayNames.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": dayNamesLong[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
                 getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", children: week.map((d) => {
                   if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, d.toISOString());
-                  const isStart = !!rangeStart && isSameDay2(d, rangeStart);
-                  const isEnd = !!rangeEnd2 && isSameDay2(d, rangeEnd2);
+                  const isStart = !!rangeStart && isSameDay(d, rangeStart);
+                  const isEnd = !!rangeEnd2 && isSameDay(d, rangeEnd2);
                   const between = inRange(d);
                   const dis = isDisabledDay(d);
                   return /* @__PURE__ */ jsx(
@@ -1764,17 +1876,17 @@ function DateRangePicker({
                       "aria-disabled": dis || void 0,
                       onClick: () => selectDay(d),
                       onFocus: () => {
-                        if (!isSameDay2(d, focusDate)) setFocusDate(d);
+                        if (!isSameDay(d, focusDate)) setFocusDate(d);
                       },
                       onMouseEnter: () => setHover(d),
                       "aria-selected": isStart || isEnd || between,
-                      "aria-current": isSameDay2(d, today) ? "date" : void 0,
-                      "aria-label": fmt(d),
+                      "aria-current": isSameDay(d, today) ? "date" : void 0,
+                      "aria-label": formatDayLong(d),
                       className: cn(
                         "w-full aspect-square flex items-center justify-center text-xs",
                         "transition-colors cursor-pointer",
                         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                        isStart || isEnd ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isSameDay2(d, today) ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
+                        isStart || isEnd ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isSameDay(d, today) ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
                         dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
                       ),
                       children: d.getDate()
@@ -6393,593 +6505,755 @@ function SegmentedControl({
     }
   );
 }
-function EventPopover({ event, category, open, anchorRef }) {
-  const floatingRef = useRef(null);
-  const pos = usePosition(anchorRef, floatingRef, open, {
-    side: "top",
-    align: "center",
-    offset: 8,
-    flip: true
-  });
-  if (!open) return null;
-  const color = category?.color ?? "var(--ds-accent-primary)";
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
+
+// ../../showcase/src/components/Calendar/event-colours.ts
+function eventColours(category) {
+  const colour = category?.color;
+  if (colour === void 0 || colour === "accent" || colour === "var(--ds-accent-primary)") return ACCENT;
+  if (colour === "neutral") return NEUTRAL;
+  if (typeof colour === "number") return Number.isInteger(colour) && colour >= 1 ? supporting(colour) : NEUTRAL;
+  const named = SUPPORTING_TOKEN.exec(colour.trim());
+  if (named) return supporting(Number(named[1]));
+  const chart = CHART_TOKEN.exec(colour.trim());
+  if (chart) return Number(chart[1]) === 1 ? ACCENT : supporting(Number(chart[1]) - 1);
+  return { ...NEUTRAL, edge: colour };
+}
+var SUPPORTING_TOKEN = /^var\(\s*--ds-palette-(\d+)-[a-z-]+\s*\)$/;
+var CHART_TOKEN = /^var\(\s*--ds-chart-(\d+)\s*\)$/;
+var supporting = (n) => ({
+  fill: `var(--ds-palette-${n}-bg, ${NEUTRAL.fill})`,
+  text: `var(--ds-palette-${n}-text, ${NEUTRAL.text})`,
+  edge: `var(--ds-palette-${n}-chart, ${NEUTRAL.edge})`
+});
+var ACCENT = {
+  fill: "var(--ds-accent-bg, var(--ds-accent-subtle))",
+  text: "var(--ds-accent-text, var(--ds-text-primary))",
+  edge: "var(--ds-chart-1)"
+};
+var NEUTRAL = {
+  fill: "var(--ds-bg-muted)",
+  text: "var(--ds-text-primary)",
+  edge: "var(--ds-input-border)"
+};
+function EventBar({ event, category, compact, onOpen, inert, showTime = true, continuesBefore, continuesAfter, className, style }) {
+  const ref = useRef(null);
+  const colours = eventColours(category);
+  const name = eventName(event, category);
+  const look = cn(
+    "border-[length:var(--ds-border-width)] border-solid rounded-[var(--ds-radius-sm)]",
+    continuesBefore && "rounded-s-none border-s-0",
+    continuesAfter && "rounded-e-none border-e-0"
+  );
+  const paint = { backgroundColor: colours.fill, color: colours.text, borderColor: colours.edge, ...style };
+  if (inert) {
+    return /* @__PURE__ */ jsx(
+      "span",
       {
-        ref: floatingRef,
-        className: cn(
-          "fixed z-[var(--ds-z-popover)] w-64 pointer-events-none",
-          "bg-[var(--ds-bg-surface-elevated)]",
-          "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
-          "p-ds-3 space-y-ds-2"
-        ),
-        style: { top: pos.top, left: pos.left },
-        role: "tooltip",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "font-[var(--ds-weight-heading)] text-sm text-[var(--ds-text-primary)] leading-snug", children: event.title }),
-            category && /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "sm", className: "shrink-0", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "inline-block w-1.5 h-1.5 rounded-[var(--ds-radius-full)] mr-ds-1",
-                  style: { backgroundColor: color }
-                }
-              ),
-              category.label
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-secondary)]", children: event.allDay ? "All day" : formatTimeRange(event.start, event.end) }),
-          event.location && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-muted)] flex items-center gap-ds-1", children: [
-            /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
-              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
-            ] }),
-            event.location
-          ] }),
-          event.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] line-clamp-2", children: event.description })
-        ]
+        className: cn("block w-full text-left text-xs leading-tight px-ds-1.5 py-ds-0.5 truncate", look, className),
+        style: paint,
+        children: event.title
       }
-    ),
-    document.body
-  );
-}
-function EventBar({ event, category, compact, onClick, className }) {
-  const [hovered, setHovered] = useState(false);
-  const barRef = useRef(null);
-  const hoverTimeout = useRef(void 0);
-  const color = category?.color ?? "var(--ds-accent-primary)";
-  const handleMouseEnter = () => {
-    hoverTimeout.current = setTimeout(() => setHovered(true), 300);
-  };
-  const handleMouseLeave = () => {
-    clearTimeout(hoverTimeout.current);
-    setHovered(false);
-  };
+    );
+  }
   if (compact) {
     return /* @__PURE__ */ jsx(
       "button",
       {
-        ref: barRef,
-        className: cn(
-          "w-1.5 h-1.5 rounded-[var(--ds-radius-full)] shrink-0 cursor-pointer",
-          className
-        ),
-        style: { backgroundColor: color },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        ref,
+        type: "button",
+        className: cn("w-1.5 h-1.5 rounded-[var(--ds-radius-full)] shrink-0 cursor-pointer", className),
+        style: { backgroundColor: colours.edge },
         onClick: (e) => {
           e.stopPropagation();
-          onClick?.(event);
+          onOpen?.(event, e.currentTarget);
         },
-        "aria-label": event.title,
-        children: /* @__PURE__ */ jsx(
-          EventPopover,
-          {
-            event,
-            category,
-            open: hovered,
-            anchorRef: barRef
-          }
-        )
+        "aria-label": name
       }
     );
   }
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      ref: barRef,
+      ref,
+      type: "button",
+      "data-calendar-event": event.id,
       className: cn(
-        "w-full text-left text-xs leading-tight px-ds-1.5 py-ds-0.5 rounded-[var(--ds-radius-sm)]",
-        "truncate cursor-pointer transition-opacity hover:opacity-80",
+        "w-full text-left text-xs leading-tight px-ds-1.5 py-ds-0.5",
+        look,
+        "truncate cursor-pointer transition-[filter] hover:brightness-95",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         className
       ),
-      style: {
-        backgroundColor: `color-mix(in oklch, ${color} 18%, transparent)`,
-        color,
-        borderLeft: `2px solid ${color}`
-      },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      style: paint,
       onClick: (e) => {
         e.stopPropagation();
-        onClick?.(event);
+        onOpen?.(event, e.currentTarget);
       },
-      title: event.title,
+      "aria-label": name,
       children: [
-        !event.allDay && /* @__PURE__ */ jsx("span", { className: "font-medium mr-ds-1 opacity-70", children: formatTime(event.start) }),
-        event.title,
-        /* @__PURE__ */ jsx(
-          EventPopover,
-          {
-            event,
-            category,
-            open: hovered,
-            anchorRef: barRef
-          }
-        )
+        showTime && !event.allDay && /* @__PURE__ */ jsx("span", { className: "font-medium mr-ds-1", children: formatTime(event.start) }),
+        event.title
       ]
     }
   );
 }
-var MAX_VISIBLE_EVENTS = 3;
-function OverflowPopover({
-  events,
-  categories,
-  date,
-  onEventClick
-}) {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const pos = usePosition(triggerRef, floatingRef, open, {
-    side: "bottom",
-    align: "start",
-    offset: 4,
-    flip: true
-  });
-  const { isTop, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => setOpen(false), tabExits: "edges" });
+function eventName(event, category) {
+  return [event.title, formatEventWhen(event, true), category?.label].filter(Boolean).join(", ");
+}
+var CALENDAR_LAYER = "data-calendar-layer";
+function EventCard({ event, category, anchor, actions, onClose, fallbackFocus }) {
+  const anchorRef = useMemo(() => ({ current: anchor }), [anchor]);
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const pos = usePosition(anchorRef, panelRef, true, { side: "bottom", align: "start", offset: 4, flip: true });
+  const { isTop, returnFocus } = usePopupFocus(true, { trigger: anchorRef, panel: panelRef, close: onClose, tabExits: "edges" });
+  const colours = eventColours(category);
+  const [attendeeScroll, setAttendeeScroll] = useState(null);
+  useKeyboardScroll(attendeeScroll, "Attendees");
+  const closeRef = useLatest(onClose);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      const panel = panelRef.current;
+      if (!panel) return;
+      const actions2 = Array.from(panel.querySelectorAll("[data-card-action]"));
+      const safe = actions2.find((el) => el.getAttribute("data-variant") !== "destructive");
+      if (safe) safe.focus();
+      else if (actions2.length) panel.focus();
+      else focusInitial(panel);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [anchor]);
   useEffect(() => {
-    if (!open) return;
-    const raf = requestAnimationFrame(() => focusInitial(floatingRef.current));
     const onKey = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
       e.preventDefault();
       returnFocus();
-      setOpen(false);
+      closeRef.current();
     };
     const onDown = (e) => {
-      if (!triggerRef.current?.contains(e.target)) setOpen(false);
+      if (!isTop()) return;
+      const t = e.target;
+      if (!(t instanceof Node) || panelRef.current?.contains(t) || anchor.contains(t)) return;
+      if (t instanceof Element && t.closest(`[${CALENDAR_LAYER}]`)) return;
+      closeRef.current();
     };
     document.addEventListener("keydown", onKey);
-    document.addEventListener("mousedown", onDown);
+    document.addEventListener("pointerdown", onDown, true);
     return () => {
-      cancelAnimationFrame(raf);
       document.removeEventListener("keydown", onKey);
-      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("pointerdown", onDown, true);
     };
-  }, [open, isTop, returnFocus]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  }, [anchor, isTop, returnFocus, closeRef]);
+  const run = (action) => {
+    const list = anchor.closest(`[${CALENDAR_LAYER}]`);
+    returnFocus();
+    onClose();
+    action.onClick(event);
+    requestAnimationFrame(() => {
+      const now = document.activeElement;
+      if (now && now !== document.body && now.isConnected) return;
+      if (list?.isConnected && focusInitial(list)) return;
+      fallbackFocus?.()?.focus();
+    });
+  };
+  return createPortal(
     /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
-        ref: triggerRef,
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        className: "text-2xs text-[var(--ds-accent-primary)] font-medium cursor-pointer hover:underline px-ds-1.5",
-        onClick: (e) => {
-          e.stopPropagation();
-          setOpen(!open);
-        },
+        ref: panelRef,
+        role: "dialog",
+        "aria-labelledby": titleId,
+        ...{ [CALENDAR_LAYER]: "" },
+        "data-calendar-card": event.id,
+        tabIndex: -1,
+        className: cn(
+          "fixed z-[var(--ds-z-popover)] w-72 max-w-[calc(100vw-2*var(--ds-space-3))] outline-none",
+          "bg-[var(--ds-bg-surface-elevated)]",
+          "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
+          "p-ds-3 space-y-ds-2"
+        ),
+        style: { top: pos.top, left: pos.left },
         children: [
-          "+",
-          events.length,
-          " more"
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2", children: [
+            /* @__PURE__ */ jsx("h3", { id: titleId, className: "font-[var(--ds-weight-heading)] text-sm text-[var(--ds-text-primary)] leading-snug min-w-0 break-words", children: event.title }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": "Close",
+                ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                onClick: () => {
+                  returnFocus();
+                  onClose();
+                },
+                className: "-mt-ds-1 -mr-ds-1 shrink-0",
+                children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 })
+              }
+            )
+          ] }),
+          category && /* @__PURE__ */ jsxs("p", { className: "inline-flex items-center gap-ds-1.5 text-xs text-[var(--ds-text-secondary)]", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-block w-2 h-2 rounded-[var(--ds-radius-full)]", style: { backgroundColor: colours.edge } }),
+            category.label
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-secondary)] tabular-nums", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: formatEventWhen(event) }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: formatEventWhen(event, true) })
+          ] }),
+          event.location && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-secondary)] flex items-start gap-ds-1", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "map-pin", size: 14, className: "shrink-0 mt-px" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: event.location })
+          ] }),
+          event.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-secondary)] whitespace-pre-line break-words", children: event.description }),
+          event.attendees && event.attendees.length > 0 && /* @__PURE__ */ jsx("div", { ref: setAttendeeScroll, className: "max-h-32 overflow-y-auto", children: /* @__PURE__ */ jsx("ul", { "aria-label": "Attendees", className: "space-y-ds-1", children: event.attendees.map((person, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-2 text-xs text-[var(--ds-text-primary)]", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsx(Avatar, { size: "sm", initials: person.initials ?? person.name }) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: person.name })
+          ] }, `${person.name}-${i}`)) }) }),
+          actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-2 pt-ds-1", children: actions.map((action) => /* @__PURE__ */ jsx(Button, { "data-card-action": "", size: "sm", variant: action.variant ?? "secondary", iconLeft: action.iconLeft, onClick: () => run(action), children: action.label }, action.label)) })
         ]
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: floatingRef,
-          role: "dialog",
-          "aria-label": date.toLocaleDateString(formatLocale(), { weekday: "long", month: "long", day: "numeric" }),
-          className: cn(
-            "fixed z-[var(--ds-z-popover)] w-56 max-h-48 overflow-y-auto",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)]",
-            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
-            "p-ds-2 space-y-ds-1"
-          ),
-          style: { top: pos.top, left: pos.left },
-          onClick: (e) => e.stopPropagation(),
-          onMouseDown: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-1", children: date.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
-            events.map((event) => /* @__PURE__ */ jsx(
-              EventBar,
-              {
-                event,
-                category: categories[event.category ?? ""],
-                onClick: onEventClick
-              },
-              event.id
-            ))
-          ]
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-function MonthView({
-  date,
-  events,
-  categories,
-  selectedDate,
-  onDayClick,
-  onEventClick,
-  weekStartsOn
-}) {
-  const weeks = useMemo(
-    () => getMonthGrid(date.getFullYear(), date.getMonth(), weekStartsOn),
-    [date, weekStartsOn]
+    document.body
   );
-  const dayNames = useMemo(() => getOrderedDayNames(weekStartsOn), [weekStartsOn]);
-  const currentMonth = date.getMonth();
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: dayNames.map((name) => /* @__PURE__ */ jsxs(
+}
+function DayList({ day, events, categories, anchor, onOpenEvent, onNewEvent, onClose }) {
+  const anchorRef = useMemo(() => ({ current: anchor }), [anchor]);
+  const panelRef = useRef(null);
+  const pos = usePosition(anchorRef, panelRef, true, { side: "bottom", align: "start", offset: 4, flip: true });
+  const { isTop, returnFocus } = usePopupFocus(true, { trigger: anchorRef, panel: panelRef, close: onClose, tabExits: "edges" });
+  const closeRef = useLatest(onClose);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [anchor]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      closeRef.current();
+    };
+    const onDown = (e) => {
+      if (!isTop()) return;
+      const t = e.target;
+      if (!(t instanceof Node) || panelRef.current?.contains(t) || anchor.contains(t)) return;
+      if (t instanceof Element && t.closest(`[${CALENDAR_LAYER}]`)) return;
+      closeRef.current();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown, true);
+    };
+  }, [anchor, isTop, returnFocus, closeRef]);
+  return createPortal(
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "text-center text-xs font-medium text-[var(--ds-text-muted)] py-ds-2 px-ds-1",
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": formatDayLong(day),
+        ...{ [CALENDAR_LAYER]: "" },
+        className: cn(
+          "fixed z-[var(--ds-z-popover)] w-60 max-h-72 overflow-y-auto",
+          "bg-[var(--ds-bg-surface-elevated)]",
+          "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
+          "p-ds-2 space-y-ds-1"
+        ),
+        style: { top: pos.top, left: pos.left },
+        onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: name }),
-          /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: name[0] })
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-1", children: formatDayShort(day) }),
+          events.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-secondary)] px-ds-1", children: "No events" }),
+          events.map((event) => /* @__PURE__ */ jsx(EventBar, { event, category: categories[event.category ?? ""], onOpen: onOpenEvent }, event.id)),
+          onNewEvent && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconLeft: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }),
+              className: "w-full justify-start mt-ds-1",
+              onClick: () => {
+                returnFocus();
+                onClose();
+                onNewEvent(day);
+              },
+              children: "New event"
+            }
+          )
         ]
-      },
-      name
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 flex-1 auto-rows-fr", children: weeks.map(
-      (week, wi) => week.map((day, di) => {
-        const dayEvents = getEventsForDay(events, day);
-        const isCurrentMonth = day.getMonth() === currentMonth;
-        const today = isToday(day);
-        const selected = selectedDate && isSameDay2(day, selectedDate);
-        const weekend = isWeekend(day);
-        const visibleEvents = dayEvents.slice(0, MAX_VISIBLE_EVENTS);
-        const overflowEvents = dayEvents.slice(MAX_VISIBLE_EVENTS);
-        const lastCol = di === 6;
+      }
+    ),
+    document.body
+  );
+}
+
+// ../../showcase/src/components/Calendar/styles.ts
+var TODAY_CIRCLE = "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] font-bold";
+var LANES = 3;
+var LANE_H = 20;
+var LANE_GAP = 4;
+var NUMBER_ROW = 30;
+var INSET = "var(--ds-space-1)";
+function MonthView({ date, events, categories, selectedDate, onDayClick, canStartEvent, onOpenEvent, onNavigate, weekStartsOn }) {
+  const weeks = useMemo(() => getMonthGrid(date.getFullYear(), date.getMonth(), weekStartsOn), [date, weekStartsOn]);
+  const phone = useBreakpoint("sm");
+  const names = { short: weekdayNames(weekStartsOn, "short"), narrow: weekdayNames(weekStartsOn, "narrow"), long: weekdayNames(weekStartsOn, "long") };
+  const layouts = useMemo(() => weeks.map((week) => layoutWeek(events, week, LANES)), [weeks, events]);
+  const currentMonth = date.getMonth();
+  const gridRef = useRef(null);
+  const [list, setList] = useState(null);
+  const inMonth = (d) => !!d && d.getMonth() === currentMonth && d.getFullYear() === date.getFullYear();
+  const fallback = inMonth(selectedDate) ? selectedDate : inMonth(/* @__PURE__ */ new Date()) ? /* @__PURE__ */ new Date() : new Date(date.getFullYear(), currentMonth, 1);
+  const [activeDay, setActiveDay] = useState(fallback);
+  const active = inMonth(activeDay) ? activeDay : fallback;
+  const openList = (day, anchor) => setList({ day, anchor });
+  const choose = (day, anchor) => phone ? openList(day, anchor) : onDayClick(day);
+  const grid = useGridKeyboard({
+    container: gridRef,
+    active,
+    setActive: (d) => {
+      setActiveDay(d);
+      if (!inMonth(d)) onNavigate(d);
+    },
+    keyOf: dayKey,
+    move: (from, e) => moveDay(from, e.key, e.shiftKey, weekStartsOn),
+    onActivate: (day, e) => choose(day, e.currentTarget.querySelector(`[data-grid-key="${dayKey(day)}"]`) ?? e.target)
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { ref: gridRef, role: "grid", "aria-label": formatMonthYear(date), onKeyDown: grid.onKeyDown, className: "flex flex-col flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: names.short.map((name, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": names.long[i], className: "text-center text-xs font-medium text-[var(--ds-text-muted)] py-ds-2 px-ds-1", children: phone ? names.narrow[i] : name }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1", children: weeks.map((week, wi) => {
+        const layout = layouts[wi];
         const lastRow = wi === weeks.length - 1;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "min-h-[80px] sm:min-h-[100px] border-[var(--ds-border-subtle)]",
-              !lastRow && "border-b-[length:var(--ds-divider-width)]",
-              !lastCol && "border-r-[length:var(--ds-divider-width)]",
-              "p-ds-1 flex flex-col cursor-pointer transition-colors",
-              "hover:bg-[var(--ds-bg-muted)]",
-              !isCurrentMonth && "opacity-40",
-              selected && "bg-[var(--ds-accent-whisper)]",
-              weekend && isCurrentMonth && "bg-[var(--ds-bg-muted)]/30"
-            ),
-            onClick: () => onDayClick?.(day),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-ds-0.5", children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-xs w-6 h-6 flex items-center justify-center rounded-[var(--ds-radius-full)]",
-                    today ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-secondary)]"
-                  ),
-                  children: day.getDate()
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex flex-col gap-ds-0.5 flex-1 overflow-hidden", children: [
-                visibleEvents.map((event) => /* @__PURE__ */ jsx(
-                  EventBar,
-                  {
-                    event,
-                    category: categories[event.category ?? ""],
-                    onClick: onEventClick
-                  },
-                  event.id
-                )),
-                overflowEvents.length > 0 && /* @__PURE__ */ jsx(
-                  OverflowPopover,
-                  {
-                    events: dayEvents,
-                    categories,
-                    date: day,
-                    onEventClick
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex sm:hidden gap-ds-0.5 flex-wrap mt-ds-0.5", children: [
-                dayEvents.slice(0, 4).map((event) => /* @__PURE__ */ jsx(
-                  EventBar,
-                  {
-                    event,
-                    category: categories[event.category ?? ""],
-                    compact: true,
-                    onClick: onEventClick
-                  },
-                  event.id
-                )),
-                dayEvents.length > 4 && /* @__PURE__ */ jsxs("span", { className: "text-2xs text-[var(--ds-text-muted)]", children: [
-                  "+",
-                  dayEvents.length - 4
+        return /* @__PURE__ */ jsx("div", { role: "row", className: "relative grid grid-cols-7 flex-1", children: week.map((day, di) => {
+          const dayEvents = getEventsForDay(events, day);
+          const isCurrentMonth = day.getMonth() === currentMonth;
+          const today = isToday(day);
+          const selected = !!selectedDate && isSameDay(day, selectedDate);
+          const weekend = isWeekend(day);
+          const more = layout.more[di];
+          const label = phone && dayEvents.length > 0 ? `${formatDayLong(day)}, ${dayEvents.length} ${dayEvents.length === 1 ? "event" : "events"}` : formatDayLong(day);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "gridcell",
+              "data-grid-key": dayKey(day),
+              tabIndex: grid.tabIndexOf(day),
+              "aria-label": label,
+              "aria-selected": selected,
+              "aria-current": today ? "date" : void 0,
+              onFocus: () => {
+                if (!isSameDay(day, active)) setActiveDay(day);
+              },
+              onClick: (e) => choose(day, e.currentTarget),
+              className: cn(
+                "relative min-h-[80px] sm:min-h-[100px] border-[var(--ds-border-subtle)]",
+                !lastRow && "border-b-[length:var(--ds-divider-width)]",
+                di < 6 && "border-r-[length:var(--ds-divider-width)]",
+                "p-ds-1 flex flex-col cursor-pointer transition-colors",
+                FOCUS_INSET,
+                "hover:bg-[var(--ds-bg-muted)]",
+                !isCurrentMonth && "[&>.gs-day-number]:opacity-40",
+                selected && "bg-[var(--ds-accent-whisper)]",
+                weekend && isCurrentMonth && !selected && "bg-[var(--ds-bg-muted)]/30"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn("gs-day-number text-xs w-6 h-6 flex items-center justify-center rounded-[var(--ds-radius-full)] shrink-0", today ? TODAY_CIRCLE : "text-[var(--ds-text-secondary)]"), children: day.getDate() }),
+                phone ? (
+                  // dots, a day's presence of events: the day itself is what a tap opens (D46)
+                  /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "flex gap-ds-0.5 flex-wrap mt-ds-0.5", children: [
+                    dayEvents.slice(0, 4).map((event) => /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-[var(--ds-radius-full)]", style: { backgroundColor: eventColours(categories[event.category ?? ""]).edge } }, event.id)),
+                    dayEvents.length > 4 && /* @__PURE__ */ jsxs("span", { className: "text-2xs text-[var(--ds-text-muted)] leading-none", children: [
+                      "+",
+                      dayEvents.length - 4
+                    ] })
+                  ] })
+                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  layout.segments.filter((s) => s.startCol === di).map((s) => /* @__PURE__ */ jsx(
+                    EventBar,
+                    {
+                      event: s.event,
+                      category: categories[s.event.category ?? ""],
+                      onOpen: onOpenEvent,
+                      continuesBefore: s.continuesBefore,
+                      continuesAfter: s.continuesAfter,
+                      className: "absolute z-[1] flex items-center",
+                      style: {
+                        top: NUMBER_ROW + s.lane * (LANE_H + LANE_GAP),
+                        height: LANE_H,
+                        left: s.continuesBefore ? 0 : INSET,
+                        width: `calc(${s.span} * (100% + var(--ds-divider-width)) - var(--ds-divider-width) - ${s.continuesBefore ? "0px" : INSET} - ${s.continuesAfter ? "0px" : INSET})`
+                      }
+                    },
+                    `${s.event.id}-${s.startCol}`
+                  )),
+                  more.length > 0 && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-haspopup": "dialog",
+                      "aria-expanded": !!list && isSameDay(list.day, day),
+                      className: "absolute z-[1] text-2xs text-[var(--ds-accent-text,var(--ds-accent-primary))] font-medium cursor-pointer hover:underline px-ds-1.5 rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                      style: { top: NUMBER_ROW + (LANES - 1) * (LANE_H + LANE_GAP), left: INSET, height: LANE_H },
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        openList(day, e.currentTarget);
+                      },
+                      children: [
+                        "+",
+                        more.length,
+                        " more"
+                      ]
+                    }
+                  )
                 ] })
-              ] })
-            ]
-          },
-          `${wi}-${di}`
-        );
-      })
-    ) })
+              ]
+            },
+            dayKey(day)
+          );
+        }) }, dayKey(week[0]));
+      }) })
+    ] }),
+    list && /* @__PURE__ */ jsx(
+      DayList,
+      {
+        day: list.day,
+        events: getEventsForDay(events, list.day),
+        categories,
+        anchor: list.anchor,
+        onOpenEvent,
+        onNewEvent: phone && canStartEvent ? onDayClick : void 0,
+        onClose: () => setList(null)
+      }
+    )
   ] });
 }
 var HOUR_HEIGHT = 40;
 var HOURS = Array.from({ length: 24 }, (_, i) => i);
 var GRID_HEIGHT = HOURS.length * HOUR_HEIGHT;
-function formatHour(h) {
-  if (h === 0) return "12 AM";
-  if (h < 12) return `${h} AM`;
-  if (h === 12) return "12 PM";
-  return `${h - 12} PM`;
-}
-function CurrentTimeLine() {
-  const [now, setNow] = useState(/* @__PURE__ */ new Date());
+var MIN_EVENT_PX = 24;
+var MIN_EVENT_MINUTES = MIN_EVENT_PX / HOUR_HEIGHT * 60;
+var ALL_DAY_LANES = 3;
+var LANE_H2 = 20;
+var LANE_GAP2 = 4;
+var WORKING_DAY = 8;
+var HOUR_LABEL_ROOM = 8;
+var FADE = 24;
+var MIN_DAY_WIDTH = 100;
+var hh = (hour) => String(hour).padStart(2, "0");
+var cellKey = (day, hour) => hour === null ? dayKey(day) : `${dayKey(day)}T${hh(hour)}`;
+function parseKey(key) {
+  const [d, h] = key.split("T");
+  const [y, m, dd] = d.split("-").map(Number);
+  return { day: new Date(y, m - 1, dd), hour: h === void 0 ? null : Number(h) };
+}
+function NowLine() {
+  const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
   useEffect(() => {
     const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(id);
   }, []);
-  const top = timeToFraction(now) * GRID_HEIGHT;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "absolute left-0 right-0 z-10 pointer-events-none",
-      style: { top },
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error)] -ml-1" }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 h-[2px] bg-[var(--ds-status-error)]" })
-      ] })
-    }
-  );
-}
-function TimedEvent({
-  event,
-  category,
-  column,
-  totalColumns,
-  onEventClick
-}) {
-  const start = new Date(event.start);
-  const end = event.end ? new Date(event.end) : new Date(start.getTime() + 60 * 6e4);
-  const top = timeToFraction(start) * GRID_HEIGHT;
-  const bottom = timeToFraction(end) * GRID_HEIGHT;
-  const height = Math.max(bottom - top, 20);
-  const color = category?.color ?? "var(--ds-accent-primary)";
-  const width = `calc(${100 / totalColumns}% - 2px)`;
-  const left = `calc(${column / totalColumns * 100}% + 1px)`;
+  return /* @__PURE__ */ jsx("div", { "data-now-line": "", "aria-hidden": "true", className: "absolute left-0 right-0 z-[2] pointer-events-none", style: { top: timeToFraction(now) * GRID_HEIGHT }, children: /* @__PURE__ */ jsx("div", { className: "relative border-t-2 border-[var(--ds-accent-primary)]", children: /* @__PURE__ */ jsx("span", { className: "absolute -left-1 -top-[5px] box-border w-2 h-2 rounded-[var(--ds-radius-full)] border-4 border-[var(--ds-accent-primary)]" }) }) });
+}
+function TimedEvent({ placed, category, onOpen, onFocusEvent }) {
+  const { piece, column, columns } = placed;
+  const { event } = piece;
+  const top = timeToFraction(piece.start) * GRID_HEIGHT;
+  const bottom = piece.end.getHours() === 0 && piece.end.getMinutes() === 0 && piece.end > piece.start ? GRID_HEIGHT : timeToFraction(piece.end) * GRID_HEIGHT;
+  const height = Math.max(bottom - top, MIN_EVENT_PX);
+  const drawnTop = Math.min(top, GRID_HEIGHT - height);
+  const colours = eventColours(category);
+  const end = event.end && event.end > event.start ? event.end : void 0;
+  const cutTop = piece.start > event.start;
+  const cutBottom = !!end && piece.end < end;
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
+      type: "button",
+      "data-calendar-event": event.id,
+      "aria-label": eventName(event, category),
       className: cn(
-        "absolute rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-1 text-xs leading-tight",
-        "flex flex-col items-start justify-start",
-        "overflow-hidden cursor-pointer transition-opacity hover:opacity-80",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+        // a short event keeps its title whole: no padding above and below it
+        "absolute pointer-events-auto text-left px-ds-1.5 text-xs leading-tight",
+        height > 30 ? "py-ds-1" : "py-0 justify-center",
+        "flex flex-col items-start overflow-hidden cursor-pointer transition-[filter] hover:brightness-95",
+        height > 30 && "justify-start",
+        "border-[length:var(--ds-border-width)] border-solid rounded-[var(--ds-radius-sm)]",
+        cutTop && "rounded-t-none border-t-0",
+        cutBottom && "rounded-b-none border-b-0",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)] focus-visible:z-[3]"
       ),
       style: {
-        top,
+        top: drawnTop,
         height,
-        left,
-        width,
-        backgroundColor: `color-mix(in oklch, ${color} 20%, transparent)`,
-        color,
-        borderLeft: `2px solid ${color}`
+        left: `calc(${column / columns * 100}% + 1px)`,
+        width: `calc(${100 / columns}% - 2px)`,
+        backgroundColor: colours.fill,
+        color: colours.text,
+        borderColor: colours.edge
       },
       onClick: (e) => {
         e.stopPropagation();
-        onEventClick?.(event);
+        onOpen(event, e.currentTarget);
       },
-      title: event.title,
-      role: "button",
-      tabIndex: 0,
+      onFocus: onFocusEvent,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "font-medium truncate w-full", children: event.title }),
-        height > 30 && /* @__PURE__ */ jsxs("div", { className: "text-2xs opacity-70 truncate w-full", children: [
-          formatTime(start),
-          " \u2013 ",
-          formatTime(end)
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "font-medium truncate w-full", children: event.title }),
+        height > 30 && /* @__PURE__ */ jsx("span", { className: "text-2xs truncate w-full tabular-nums", children: formatTimeRange(event.start, end) })
       ]
     }
   );
 }
-function WeekView({
-  date,
-  events,
-  categories,
-  selectedDate,
-  onDayClick,
-  onEventClick,
-  weekStartsOn
-}) {
+function WeekView({ date, events, categories, selectedDate, onDayClick, onOpenEvent, onNavigate, weekStartsOn }) {
   const days = useMemo(() => getWeekDays(date, weekStartsOn), [date, weekStartsOn]);
-  const allDayEvents = useMemo(() => {
-    return days.map(
-      (day) => getEventsForDay(events, day).filter((e) => e.allDay)
-    );
-  }, [days, events]);
-  const hasAllDay = allDayEvents.some((d) => d.length > 0);
-  const containerRef = useRef(null);
+  const names = weekdayNames(weekStartsOn, "short");
+  const barEvents = useMemo(() => events.filter(isBarEvent), [events]);
+  const allDay = useMemo(() => layoutWeek(barEvents, days, ALL_DAY_LANES), [barEvents, days]);
+  const pieces = useMemo(() => days.map((day) => layoutPieces(dayPieces(events, day), MIN_EVENT_MINUTES)), [days, events]);
+  const allDayHeight = Math.max(28, 4 + allDay.lanes * (LANE_H2 + LANE_GAP2) + 2);
+  const rootRef = useRef(null);
+  const scrollerRef = useRef(null);
   const syncingScroll = useRef(false);
   const { ref: edgesRef, measure: measureEdges, fadeProps: edgeFade } = useScrollEdges();
+  const [list, setList] = useState(null);
   const handleScroll = useCallback((e) => {
     if (syncingScroll.current) return;
     syncingScroll.current = true;
     const source = e.target;
-    const scrollLeft = source.scrollLeft;
-    const panels = containerRef.current?.querySelectorAll("[data-week-scroll]");
-    panels?.forEach((panel) => {
-      if (panel !== source) panel.scrollLeft = scrollLeft;
+    rootRef.current?.querySelectorAll("[data-week-scroll]").forEach((panel) => {
+      if (panel !== source) panel.scrollLeft = source.scrollLeft;
     });
     syncingScroll.current = false;
   }, []);
   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const panels = container.querySelectorAll("[data-week-scroll]");
-    panels.forEach((panel) => panel.addEventListener("scroll", handleScroll));
-    return () => {
-      panels.forEach((panel) => panel.removeEventListener("scroll", handleScroll));
+    const panels = rootRef.current?.querySelectorAll("[data-week-scroll]");
+    panels?.forEach((panel) => panel.addEventListener("scroll", handleScroll));
+    return () => panels?.forEach((panel) => panel.removeEventListener("scroll", handleScroll));
+  }, [handleScroll]);
+  const starts = pieces.flat().filter((p) => p.piece.start.getTime() === p.piece.event.start.getTime()).map((p) => p.piece.start.getHours() + p.piece.start.getMinutes() / 60);
+  const earliest = Math.floor(Math.min(WORKING_DAY, ...starts));
+  const topOf = (hour) => Math.max(0, hour * HOUR_HEIGHT - HOUR_LABEL_ROOM);
+  const openingHourRef = useLatest(earliest);
+  const opened = useRef(null);
+  const week = dayKey(days[0]);
+  const weekRef = useLatest(week);
+  const [openingHour] = useState(earliest);
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    let done = false;
+    const open = () => {
+      if (done || scroller.scrollHeight <= scroller.clientHeight + 1) return;
+      done = true;
+      scroller.scrollTo({ top: topOf(openingHourRef.current) });
+      opened.current = { top: scroller.scrollTop, week: weekRef.current };
     };
-  }, [handleScroll, hasAllDay]);
-  const MIN_DAY_WIDTH = 100;
+    open();
+    if (done || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      open();
+      if (done) ro.disconnect();
+    });
+    ro.observe(scroller);
+    return () => ro.disconnect();
+  }, [openingHour, openingHourRef, weekRef]);
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    const o = opened.current;
+    if (!scroller || !o || o.week !== week) return;
+    if (Math.abs(scroller.scrollTop - o.top) > 1) {
+      opened.current = null;
+      return;
+    }
+    if (topOf(earliest) >= o.top) return;
+    scroller.scrollTo({ top: topOf(earliest) });
+    opened.current = { top: scroller.scrollTop, week };
+  }, [earliest, week]);
+  const inWeek = (d) => days.some((day) => isSameDay(day, d));
+  const anchorDay = selectedDate && inWeek(selectedDate) ? selectedDate : days.find(isToday) ?? days[0];
+  const [activeKey, setActiveKey] = useState(() => cellKey(anchorDay, openingHour));
+  const active = inWeek(parseKey(activeKey).day) ? activeKey : cellKey(anchorDay, parseKey(activeKey).hour);
+  const firstVisibleHour = () => Math.min(23, Math.ceil((scrollerRef.current?.scrollTop ?? 0) / HOUR_HEIGHT));
+  const placeInView = (_key, el) => {
+    const scroller = scrollerRef.current;
+    if (scroller && scroller.contains(el) && scroller.scrollHeight > scroller.clientHeight + 1) {
+      const top = el.offsetTop;
+      if (top < scroller.scrollTop) scroller.scrollTop = top;
+      else if (top + el.offsetHeight > scroller.scrollTop + scroller.clientHeight) scroller.scrollTop = top + el.offsetHeight - scroller.clientHeight;
+    } else {
+      el.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+    const strip = el.closest("[data-week-scroll]");
+    if (strip) {
+      const cell = el.getBoundingClientRect();
+      const box = strip.getBoundingClientRect();
+      if (cell.left - FADE < box.left) strip.scrollLeft -= box.left - (cell.left - FADE);
+      else if (cell.right + FADE > box.right) strip.scrollLeft += cell.right + FADE - box.right;
+    }
+  };
+  const grid = useGridKeyboard({
+    container: rootRef,
+    active,
+    setActive: (key) => {
+      setActiveKey(key);
+      const { day } = parseKey(key);
+      if (!inWeek(day)) onNavigate(day);
+    },
+    keyOf: (key) => key,
+    move: (from, e) => {
+      const { day, hour } = parseKey(from);
+      const col = days.findIndex((d) => isSameDay(d, day));
+      switch (e.key) {
+        case "ArrowUp":
+          return hour === null ? from : hour === 0 ? cellKey(day, null) : cellKey(day, hour - 1);
+        case "ArrowDown":
+          return hour === null ? cellKey(day, firstVisibleHour()) : cellKey(day, Math.min(23, hour + 1));
+        case "ArrowLeft":
+          return col > 0 ? cellKey(days[col - 1], hour) : from;
+        case "ArrowRight":
+          return col >= 0 && col < days.length - 1 ? cellKey(days[col + 1], hour) : from;
+        case "Home":
+          return cellKey(days[0], hour);
+        case "End":
+          return cellKey(days[days.length - 1], hour);
+        case "PageUp":
+          return cellKey(addDays2(day, -7), hour);
+        case "PageDown":
+          return cellKey(addDays2(day, 7), hour);
+        default:
+          return null;
+      }
+    },
+    onActivate: (key) => {
+      const { day, hour } = parseKey(key);
+      onDayClick(day, hour === null ? void 0 : { time: `${hh(hour)}:00` });
+    },
+    scrollIntoView: placeInView
+  });
   const dayGridColumns = `repeat(${days.length}, minmax(${MIN_DAY_WIDTH}px, 1fr))`;
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full overflow-hidden", children: [
+  const stripWidth = MIN_DAY_WIDTH * days.length;
+  const chooseHour = (day, hour) => (e) => {
+    const minutes = e.nativeEvent.offsetY >= HOUR_HEIGHT / 2 ? 30 : 0;
+    onDayClick(day, { time: `${hh(hour)}:${minutes === 30 ? "30" : "00"}` });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "flex flex-col h-full overflow-hidden", onKeyDown: grid.onKeyDown, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]" }),
-      /* @__PURE__ */ jsx("div", { ref: edgesRef, onScroll: measureEdges, ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "grid",
-          style: { gridTemplateColumns: dayGridColumns, minWidth: MIN_DAY_WIDTH * days.length },
-          children: days.map((day, i) => {
-            const today = isToday(day);
-            const selected = selectedDate && isSameDay2(day, selectedDate);
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "text-center py-ds-2 cursor-pointer transition-colors",
-                  "hover:bg-[var(--ds-bg-muted)]",
-                  i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
-                  selected && "bg-[var(--ds-accent-whisper)]"
-                ),
-                onClick: () => onDayClick?.(day),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: day.toLocaleDateString(formatLocale(), { weekday: "short" }) }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "text-lg font-semibold mt-ds-0.5 mx-auto w-8 h-8 flex items-center justify-center rounded-[var(--ds-radius-full)]",
-                        today ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]"
-                      ),
-                      children: day.getDate()
-                    }
-                  )
-                ]
-              },
-              i
-            );
-          })
-        }
-      ) })
+      /* @__PURE__ */ jsx("div", { ref: edgesRef, onScroll: measureEdges, ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: dayGridColumns, minWidth: stripWidth }, children: days.map((day, i) => /* @__PURE__ */ jsxs("div", { className: cn("text-center py-ds-2", i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", selectedDate && isSameDay(day, selectedDate) && "bg-[var(--ds-accent-whisper)]"), children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: names[i] }),
+        /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold mt-ds-0.5 mx-auto w-8 h-8 flex items-center justify-center rounded-[var(--ds-radius-full)]", isToday(day) ? TODAY_CIRCLE : "text-[var(--ds-text-primary)]"), children: day.getDate() })
+      ] }, i)) }) })
     ] }),
-    hasAllDay && /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
-      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "grid",
-          style: { gridTemplateColumns: dayGridColumns, minWidth: MIN_DAY_WIDTH * days.length },
-          children: allDayEvents.map((dayEvts, i) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "p-ds-0.5 space-y-ds-0.5 min-h-[28px]",
-                i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
-              ),
-              children: dayEvts.map((event) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "All day", "aria-readonly": "true", style: { minWidth: stripWidth }, children: /* @__PURE__ */ jsx("div", { role: "row", className: "grid", style: { gridTemplateColumns: dayGridColumns, height: allDayHeight }, children: days.map((day, i) => {
+        const key = cellKey(day, null);
+        const more = allDay.more[i];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "gridcell",
+            "data-grid-key": key,
+            tabIndex: grid.tabIndexOf(key),
+            "aria-label": `${formatDayLong(day)}, all day`,
+            onFocus: () => {
+              if (active !== key) setActiveKey(key);
+            },
+            onClick: () => onDayClick(day),
+            className: cn("relative cursor-pointer", FOCUS_INSET, i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"),
+            children: [
+              allDay.segments.filter((s) => s.startCol === i).map((s) => /* @__PURE__ */ jsx(
                 EventBar,
                 {
-                  event,
-                  category: categories[event.category ?? ""],
-                  onClick: onEventClick
+                  event: s.event,
+                  category: categories[s.event.category ?? ""],
+                  onOpen: onOpenEvent,
+                  continuesBefore: s.continuesBefore,
+                  continuesAfter: s.continuesAfter,
+                  className: "absolute z-[1] flex items-center",
+                  style: {
+                    top: 2 + s.lane * (LANE_H2 + LANE_GAP2),
+                    height: LANE_H2,
+                    left: s.continuesBefore ? 0 : 2,
+                    width: `calc(${s.span} * (100% + var(--ds-divider-width)) - var(--ds-divider-width) - ${s.continuesBefore ? 0 : 2}px - ${s.continuesAfter ? 0 : 2}px)`
+                  }
                 },
-                event.id
-              ))
+                `${s.event.id}-${s.startCol}`
+              )),
+              more.length > 0 && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": !!list && isSameDay(list.day, day),
+                  className: "absolute z-[1] text-2xs text-[var(--ds-accent-text,var(--ds-accent-primary))] font-medium cursor-pointer hover:underline px-ds-1.5 rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                  style: { top: 2 + (ALL_DAY_LANES - 1) * (LANE_H2 + LANE_GAP2), left: 2, height: LANE_H2 },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setList({ day, anchor: e.currentTarget });
+                  },
+                  children: [
+                    "+",
+                    more.length,
+                    " more"
+                  ]
+                }
+              )
+            ]
+          },
+          i
+        );
+      }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: scrollerRef, className: "flex flex-1 min-h-0 overflow-y-auto", "data-week-hours": "", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 relative border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", style: { height: GRID_HEIGHT }, "aria-hidden": "true", children: HOURS.map((h) => /* @__PURE__ */ jsx("div", { className: "absolute right-0 pr-ds-2 text-2xs text-[var(--ds-text-muted)] -translate-y-1/2 tabular-nums", style: { top: h * HOUR_HEIGHT }, children: h > 0 && formatHourLabel(h) }, h)) }),
+      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 self-start overflow-x-auto overflow-y-hidden gs-scrollbar-none", style: { height: GRID_HEIGHT }, "data-week-scroll": true, children: /* @__PURE__ */ jsxs("div", { className: "relative", style: { height: GRID_HEIGHT, minWidth: stripWidth }, children: [
+        /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": formatWeekRange(date, weekStartsOn), "aria-readonly": "true", className: "absolute inset-0", children: HOURS.map((hour) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid", style: { gridTemplateColumns: dayGridColumns, height: HOUR_HEIGHT }, children: days.map((day, i) => {
+          const key = cellKey(day, hour);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "gridcell",
+              "data-grid-key": key,
+              tabIndex: grid.tabIndexOf(key),
+              "aria-label": `${formatDayLong(day)}, ${formatTime(new Date(day.getFullYear(), day.getMonth(), day.getDate(), hour))}`,
+              onFocus: () => {
+                if (active !== key) setActiveKey(key);
+              },
+              onClick: chooseHour(day, hour),
+              className: cn(
+                "cursor-pointer border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] hover:bg-[var(--ds-bg-muted)]/40",
+                FOCUS_INSET,
+                i > 0 && "border-l-[length:var(--ds-divider-width)]"
+              )
             },
             i
+          );
+        }) }, hour)) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid pointer-events-none", style: { gridTemplateColumns: dayGridColumns }, children: days.map((day, i) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          isToday(day) && /* @__PURE__ */ jsx(NowLine, {}),
+          pieces[i].map((placed) => /* @__PURE__ */ jsx(
+            TimedEvent,
+            {
+              placed,
+              category: categories[placed.piece.event.category ?? ""],
+              onOpen: onOpenEvent,
+              onFocusEvent: () => setActiveKey(cellKey(day, placed.piece.start.getHours()))
+            },
+            `${placed.piece.event.id}-${i}`
           ))
-        }
-      ) })
+        ] }, i)) })
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 relative border-r-[length:var(--ds-divider-width)] border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", style: { height: GRID_HEIGHT }, children: HOURS.map((h) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute right-0 pr-ds-2 text-2xs text-[var(--ds-text-muted)] -translate-y-1/2",
-          style: { top: h * HOUR_HEIGHT },
-          children: h > 0 && formatHour(h)
-        },
-        h
-      )) }),
-      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "relative",
-          style: { height: GRID_HEIGHT, minWidth: MIN_DAY_WIDTH * days.length },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "grid h-full",
-              style: { gridTemplateColumns: dayGridColumns },
-              children: days.map((day, i) => {
-                const dayEvents = getEventsForDay(events, day).filter((e) => !e.allDay);
-                const layout = getOverlappingGroups(dayEvents);
-                const today = isToday(day);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "relative",
-                      i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
-                    ),
-                    onClick: () => onDayClick?.(day),
-                    children: [
-                      HOURS.map((h) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "absolute left-0 right-0 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
-                          style: { top: h * HOUR_HEIGHT }
-                        },
-                        h
-                      )),
-                      today && /* @__PURE__ */ jsx(CurrentTimeLine, {}),
-                      layout.map(({ event, column, totalColumns }) => /* @__PURE__ */ jsx(
-                        TimedEvent,
-                        {
-                          event,
-                          category: categories[event.category ?? ""],
-                          column,
-                          totalColumns,
-                          onEventClick
-                        },
-                        event.id
-                      ))
-                    ]
-                  },
-                  i
-                );
-              })
-            }
-          )
-        }
-      ) })
-    ] })
+    list && /* @__PURE__ */ jsx(DayList, { day: list.day, events: getEventsForDay(barEvents, list.day), categories, anchor: list.anchor, onOpenEvent, onClose: () => setList(null) })
   ] });
 }
 var WEEKS_SHOWN = 6;
@@ -6990,7 +7264,6 @@ function DayCellWithPopover({
   events,
   categories,
   selectedDate,
-  onEventClick,
   isEvenRow
 }) {
   const [open, setOpen] = useState(false);
@@ -7006,7 +7279,7 @@ function DayCellWithPopover({
   const inMonth = day.getMonth() === month;
   const dayEvents = inMonth ? getEventsForDay(events, day) : [];
   const today = inMonth && isToday(day);
-  const selected = inMonth && selectedDate && isSameDay2(day, selectedDate);
+  const selected = inMonth && selectedDate && isSameDay(day, selectedDate);
   const hasEvents = dayEvents.length > 0;
   const handleMouseEnter = () => {
     if (!hasEvents) return;
@@ -7028,7 +7301,6 @@ function DayCellWithPopover({
         inMonth && "cursor-pointer hover:bg-[var(--ds-bg-muted)]",
         !inMonth && "bg-[var(--ds-bg-muted)]/40",
         inMonth && isEvenRow && !today && !selected && "bg-[var(--ds-bg-muted)]/20",
-        today && "bg-[var(--ds-accent-subtle)]",
         selected && !today && "bg-[var(--ds-accent-whisper)]"
       ),
       children: [
@@ -7038,7 +7310,7 @@ function DayCellWithPopover({
             {
               className: cn(
                 "text-2xs leading-none z-[1]",
-                today ? "font-bold text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-secondary)]"
+                today ? cn("w-5 h-5 inline-flex items-center justify-center rounded-[var(--ds-radius-full)]", TODAY_CIRCLE) : "text-[var(--ds-text-secondary)]"
               ),
               children: day.getDate()
             }
@@ -7062,16 +7334,8 @@ function DayCellWithPopover({
               style: { top: pos.top, left: pos.left },
               role: "tooltip",
               children: [
-                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
-                dayEvents.map((event) => /* @__PURE__ */ jsx(
-                  EventBar,
-                  {
-                    event,
-                    category: categories[event.category ?? ""],
-                    onClick: onEventClick
-                  },
-                  event.id
-                ))
+                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: formatDayShort(day) }),
+                dayEvents.map((event) => /* @__PURE__ */ jsx(EventBar, { event, category: categories[event.category ?? ""], inert: true }, event.id))
               ]
             }
           ),
@@ -7088,7 +7352,6 @@ function MonthRow({
   categories,
   selectedDate,
   onClick,
-  onEventClick,
   weekStartsOn
 }) {
   const grid = useMemo(
@@ -7106,7 +7369,7 @@ function MonthRow({
           "border-r-[length:var(--ds-divider-width)] border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]"
         ),
         onClick,
-        children: MONTH_NAMES_SHORT[month]
+        children: monthName(month, "short")
       }
     ),
     flat.map((day, i) => /* @__PURE__ */ jsx(
@@ -7117,7 +7380,6 @@ function MonthRow({
         events,
         categories,
         selectedDate,
-        onEventClick,
         isEvenRow: month % 2 === 0
       },
       i
@@ -7130,11 +7392,10 @@ function YearView({
   categories,
   selectedDate,
   onMonthClick,
-  onEventClick,
   weekStartsOn
 }) {
   const year = date.getFullYear();
-  const dayNames = useMemo(() => getOrderedDayNames(weekStartsOn), [weekStartsOn]);
+  const dayNames = weekdayNames(weekStartsOn, "narrow");
   const repeatedHeaders = useMemo(() => {
     const headers = [];
     for (let w = 0; w < WEEKS_SHOWN; w++) {
@@ -7149,7 +7410,7 @@ function YearView({
     {
       className: "grid min-w-[700px]",
       style: {
-        gridTemplateColumns: `48px repeat(${COLS}, minmax(22px, 1fr))`,
+        gridTemplateColumns: `48px repeat(${COLS}, minmax(24px, 1fr))`,
         gridTemplateRows: `auto repeat(12, 36px)`
       },
       children: [
@@ -7162,7 +7423,7 @@ function YearView({
               "bg-[var(--ds-bg-muted)] border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
               h.isWeekStart && "border-l-[length:var(--ds-divider-width)]"
             ),
-            children: h.label[0]
+            children: h.label
           },
           i
         )),
@@ -7175,7 +7436,6 @@ function YearView({
             categories,
             selectedDate,
             onClick: () => onMonthClick(month),
-            onEventClick,
             weekStartsOn
           },
           month
@@ -7184,191 +7444,83 @@ function YearView({
     }
   ) });
 }
-function CompactDayCell({
-  day,
-  isCurrentMonth,
-  events,
-  categories,
-  selectedDate,
-  onDayClick,
-  onEventClick
-}) {
-  const [open, setOpen] = useState(false);
-  const cellRef = useRef(null);
-  const floatingRef = useRef(null);
-  const pos = usePosition(cellRef, floatingRef, open, {
-    side: "bottom",
-    align: "center",
-    offset: 4,
-    flip: true
+function CompactMonthView({ date, events, categories, selectedDate, onDayClick, onOpenEvent, onNavigate, weekStartsOn }) {
+  const weeks = useMemo(() => getMonthGrid(date.getFullYear(), date.getMonth(), weekStartsOn), [date, weekStartsOn]);
+  const names = { narrow: weekdayNames(weekStartsOn, "narrow"), long: weekdayNames(weekStartsOn, "long") };
+  const currentMonth = date.getMonth();
+  const gridRef = useRef(null);
+  const [list, setList] = useState(null);
+  const inMonth = (d) => !!d && d.getMonth() === currentMonth && d.getFullYear() === date.getFullYear();
+  const fallback = inMonth(selectedDate) ? selectedDate : inMonth(/* @__PURE__ */ new Date()) ? /* @__PURE__ */ new Date() : new Date(date.getFullYear(), currentMonth, 1);
+  const [activeDay, setActiveDay] = useState(fallback);
+  const active = inMonth(activeDay) ? activeDay : fallback;
+  const grid = useGridKeyboard({
+    container: gridRef,
+    active,
+    setActive: (d) => {
+      setActiveDay(d);
+      if (!inMonth(d)) onNavigate(d);
+    },
+    keyOf: dayKey,
+    move: (from, e) => moveDay(from, e.key, e.shiftKey, weekStartsOn)
   });
-  const hoverTimeout = useRef(void 0);
-  const dayEvents = isCurrentMonth ? getEventsForDay(events, day) : [];
-  const today = isCurrentMonth && isToday(day);
-  const selected = isCurrentMonth && selectedDate && isSameDay2(day, selectedDate);
-  const hasEvents = dayEvents.length > 0;
-  const shown = open && hasEvents;
-  const isTop = useOverlayLayer(shown);
-  useCloseOnFocusOut(shown, cellRef, floatingRef, () => setOpen(false), isTop);
-  const eventColors = dayEvents.slice(0, 3).map((e) => categories[e.category ?? ""]?.color ?? "var(--ds-accent-primary)");
-  const handleMouseEnter = () => {
-    if (!hasEvents) return;
-    hoverTimeout.current = setTimeout(() => setOpen(true), 250);
-  };
-  const handleMouseLeave = () => {
-    clearTimeout(hoverTimeout.current);
-    setOpen(false);
-  };
-  const handleClick = () => {
-    onDayClick?.(day);
-    if (hasEvents) {
-      setOpen((prev) => !prev);
-    }
-  };
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
-      e.preventDefault();
-      setOpen(false);
-    };
-    const onClick = (e) => {
-      const t = e.target;
-      if (cellRef.current?.contains(t) || floatingRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    document.addEventListener("keydown", onKey);
-    document.addEventListener("mousedown", onClick);
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.removeEventListener("mousedown", onClick);
-    };
-  }, [open, isTop]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: cellRef,
-        type: "button",
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        className: cn(
-          "flex flex-col items-center justify-center py-ds-1.5 rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          !isCurrentMonth && "opacity-30",
-          selected && "bg-[var(--ds-accent-subtle)]",
-          !selected && "hover:bg-[var(--ds-bg-muted)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-sm w-7 h-7 flex items-center justify-center rounded-[var(--ds-radius-full)]",
-                today ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] font-bold" : "text-[var(--ds-text-primary)]"
-              ),
-              children: day.getDate()
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-ds-0.5 mt-ds-0.5 h-[6px] items-center", children: eventColors.map((color, i) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "w-1.5 h-1.5 rounded-[var(--ds-radius-full)]",
-              style: { backgroundColor: color }
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "var(--ds-space-3) var(--ds-space-2.5)" }, children: [
+    /* @__PURE__ */ jsxs("div", { ref: gridRef, role: "grid", "aria-label": formatMonthYear(date), onKeyDown: grid.onKeyDown, className: "flex flex-col gap-y-ds-0.5", children: [
+      /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 mb-ds-1", children: names.narrow.map((name, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": names.long[i], className: "text-center text-xs font-medium text-[var(--ds-text-muted)] py-ds-1.5", children: name }, i)) }),
+      weeks.map((week) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: week.map((day) => {
+        const isCurrentMonth = day.getMonth() === currentMonth;
+        const dayEvents = isCurrentMonth ? getEventsForDay(events, day) : [];
+        const today = isCurrentMonth && isToday(day);
+        const selected = isCurrentMonth && !!selectedDate && isSameDay(day, selectedDate);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "gridcell",
+            "data-grid-key": dayKey(day),
+            tabIndex: grid.tabIndexOf(day),
+            "aria-label": dayEvents.length ? `${formatDayLong(day)}, ${dayEvents.length} ${dayEvents.length === 1 ? "event" : "events"}` : formatDayLong(day),
+            "aria-selected": selected,
+            "aria-current": today ? "date" : void 0,
+            onFocus: () => {
+              if (!isSameDay(day, active)) setActiveDay(day);
             },
-            i
-          )) })
-        ]
-      }
-    ),
-    open && hasEvents && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: floatingRef,
-          onMouseEnter: () => clearTimeout(hoverTimeout.current),
-          onMouseLeave: () => setOpen(false),
-          className: cn(
-            "fixed z-[var(--ds-z-popover)] w-52 max-h-40 overflow-y-auto",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)]",
-            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
-            "p-ds-2 space-y-ds-1"
-          ),
-          style: { top: pos.top, left: pos.left },
-          role: "tooltip",
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
-            dayEvents.map((event) => /* @__PURE__ */ jsx(
-              EventBar,
-              {
-                event,
-                category: categories[event.category ?? ""],
-                onClick: onEventClick
-              },
-              event.id
-            ))
-          ]
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-function CompactMonthView({
-  date,
-  events,
-  categories,
-  selectedDate,
-  onDayClick,
-  onEventClick,
-  weekStartsOn
-}) {
-  const weeks = useMemo(
-    () => getMonthGrid(date.getFullYear(), date.getMonth(), weekStartsOn),
-    [date, weekStartsOn]
-  );
-  const dayNames = useMemo(() => getOrderedDayNames(weekStartsOn), [weekStartsOn]);
-  const currentMonth = date.getMonth();
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { padding: "var(--ds-space-3) var(--ds-space-2.5)" }, children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-ds-1.5", children: dayNames.map((name) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "text-center text-xs font-medium text-[var(--ds-text-muted)] py-ds-1.5",
-        children: name[0]
-      },
-      name
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-y-ds-0.5", children: weeks.map(
-      (week, wi) => week.map((day, di) => /* @__PURE__ */ jsx(
-        CompactDayCell,
-        {
-          day,
-          isCurrentMonth: day.getMonth() === currentMonth,
-          events,
-          categories,
-          selectedDate,
-          onDayClick,
-          onEventClick
-        },
-        `${wi}-${di}`
-      ))
-    ) })
+            onClick: (e) => {
+              onDayClick(day);
+              const anchor = e.currentTarget;
+              if (dayEvents.length) setList((cur) => cur && isSameDay(cur.day, day) ? null : { day, anchor });
+            },
+            className: cn(
+              "flex flex-col items-center justify-center py-ds-1.5 rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
+              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+              !isCurrentMonth && "opacity-30",
+              selected && "bg-[var(--ds-accent-subtle)]",
+              !selected && "hover:bg-[var(--ds-bg-muted)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-sm w-7 h-7 flex items-center justify-center rounded-[var(--ds-radius-full)]", today ? TODAY_CIRCLE : "text-[var(--ds-text-primary)]"), children: day.getDate() }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex gap-ds-0.5 mt-ds-0.5 h-[6px] items-center", children: dayEvents.slice(0, 3).map((event) => /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-[var(--ds-radius-full)]", style: { backgroundColor: eventColours(categories[event.category ?? ""]).edge } }, event.id)) })
+            ]
+          },
+          dayKey(day)
+        );
+      }) }, dayKey(week[0])))
+    ] }),
+    list && /* @__PURE__ */ jsx(DayList, { day: list.day, events: getEventsForDay(events, list.day), categories, anchor: list.anchor, onOpenEvent, onClose: () => setList(null) })
   ] });
 }
 
 // ../../showcase/src/components/Calendar/types.ts
 var DEFAULT_CATEGORIES = {
-  work: { color: "var(--ds-accent-primary)", label: "Work" },
-  personal: { color: "var(--ds-status-success)", label: "Personal" },
-  meeting: { color: "var(--ds-status-warning)", label: "Meeting" },
-  deadline: { color: "var(--ds-status-error)", label: "Deadline" },
-  travel: { color: "var(--ds-status-info)", label: "Travel" },
-  social: { color: "var(--ds-hue-secondary)", label: "Social" }
+  work: { color: "accent", label: "Work" },
+  personal: { color: 1, label: "Personal" },
+  meeting: { color: 2, label: "Meeting" },
+  deadline: { color: 3, label: "Deadline" },
+  travel: { color: 4, label: "Travel" },
+  social: { color: 5, label: "Social" }
 };
+var notADate = (d) => d !== void 0 && Number.isNaN(new Date(d).getTime());
+var WEEK_FLOOR = 160 + 4 * HOUR_HEIGHT;
 function useControllableState(controlled, defaultValue, onChange) {
   const [internal, setInternal] = useState(defaultValue);
   const value = controlled !== void 0 ? controlled : internal;
@@ -7448,9 +7600,7 @@ function MonthDropdown({
           "pl-ds-3 pr-ds-2 py-ds-1"
         ),
         children: [
-          MONTH_NAMES[currentMonth],
-          " ",
-          currentYear,
+          formatMonthYear(currentDate),
           /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 12, className: cn("transition-transform", open && "rotate-180") })
         ]
       }
@@ -7492,7 +7642,7 @@ function MonthDropdown({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-ds-1", children: MONTH_NAMES_SHORT.map((name, i) => {
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-ds-1", children: Array.from({ length: 12 }, (_, i) => monthName(i, "short")).map((name, i) => {
               const isActive2 = i === currentMonth && browseYear === currentYear;
               return /* @__PURE__ */ jsx(
                 "button",
@@ -7510,7 +7660,7 @@ function MonthDropdown({
                   },
                   children: name
                 },
-                name
+                i
               );
             }) })
           ]
@@ -7663,6 +7813,7 @@ function Calendar({
   onDateRangeChange,
   onEventClick,
   onDayClick,
+  eventActions,
   categories = DEFAULT_CATEGORIES,
   weekStartsOn = 1,
   size = "default",
@@ -7673,14 +7824,21 @@ function Calendar({
     defaultView,
     onViewChange
   );
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
   const [currentDate, setCurrentDate] = useControllableState(
-    controlledDate,
-    defaultDate ?? /* @__PURE__ */ new Date(),
+    notADate(controlledDate) ? today : controlledDate,
+    defaultDate !== void 0 && !notADate(defaultDate) ? defaultDate : today,
     onDateChange
   );
+  const dateUnreadable = notADate(controlledDate) || notADate(defaultDate);
+  useEffect(() => {
+    if (dateUnreadable) warnOnce("Calendar", "its date (or defaultDate) isn't a date, so it shows today: pass a Date, or a date string Date reads.");
+  }, [dateUnreadable]);
   const [selectedDate, setSelectedDate] = useState(null);
   const [isNarrow, setIsNarrow] = useState(false);
+  const rootRef = useRef(null);
   const containerRef = useCallback((node) => {
+    rootRef.current = node;
     if (!node) return;
     const ro = new ResizeObserver((entries) => {
       const width = entries[0]?.contentRect.width ?? 0;
@@ -7689,10 +7847,44 @@ function Calendar({
     ro.observe(node);
     return () => ro.disconnect();
   }, []);
-  const stableEvents = useMemo(
-    () => events.map((e) => ({ ...e, start: new Date(e.start), end: e.end ? new Date(e.end) : void 0 })),
-    [events]
-  );
+  const fillRaw = useFillHeight(rootRef, size !== "compact" && currentView === "week");
+  const fill2 = fillRaw !== null && fillRaw >= WEEK_FLOOR ? fillRaw : null;
+  const inPane = useContext(FillContext) && currentView === "week";
+  const [openEvent, setOpenEvent] = useState(null);
+  const openCard = useCallback((event, from) => {
+    if (onEventClick) {
+      onEventClick(event);
+      return;
+    }
+    setOpenEvent((cur) => cur && cur.event.id === event.id && cur.anchor === from ? null : { event, anchor: from });
+  }, [onEventClick]);
+  const actionsHidden = !!onEventClick && !!eventActions;
+  useEffect(() => {
+    if (actionsHidden) warnOnce("Calendar", "eventActions are never shown while onEventClick is set: the page opens a surface of its own for an event, so no card shows. Pass eventActions for the Calendar's card, or onEventClick for your own (Sprint 25.18).");
+  }, [actionsHidden]);
+  const shownKey = `${currentView}|${currentDate.toDateString()}`;
+  const [cardShownKey, setCardShownKey] = useState(shownKey);
+  if (cardShownKey !== shownKey) {
+    setCardShownKey(shownKey);
+    if (openEvent) setOpenEvent(null);
+  }
+  const { stableEvents, unreadable } = useMemo(() => {
+    const read = [];
+    const left = [];
+    for (const e of events) {
+      const start = new Date(e.start);
+      if (Number.isNaN(start.getTime())) {
+        left.push(String(e.id));
+        continue;
+      }
+      const end = e.end ? new Date(e.end) : void 0;
+      read.push({ ...e, start, end: end && !Number.isNaN(end.getTime()) ? end : void 0 });
+    }
+    return { stableEvents: read, unreadable: left.join(", ") };
+  }, [events]);
+  useEffect(() => {
+    if (unreadable) warnOnce("Calendar", `events with a start that isn't a date aren't drawn (${unreadable}): give each a Date, or a date string Date reads.`);
+  }, [unreadable]);
   useEffect(() => {
     if (!onDateRangeChange) return;
     let start, end;
@@ -7725,9 +7917,10 @@ function Calendar({
     setSelectedDate(/* @__PURE__ */ new Date());
   }, [setCurrentDate]);
   const handleDayClick = useCallback(
-    (date) => {
+    (date, detail) => {
       setSelectedDate(date);
-      onDayClick?.(date);
+      if (detail) onDayClick?.(date, detail);
+      else onDayClick?.(date);
     },
     [onDayClick]
   );
@@ -7742,10 +7935,24 @@ function Calendar({
     if (currentView === "week") return formatWeekRange(currentDate, weekStartsOn);
     return void 0;
   }, [currentView, currentDate, weekStartsOn]);
+  const live = openEvent && stableEvents.find((e) => e.id === openEvent.event.id);
+  const card = openEvent && live ? /* @__PURE__ */ jsx(
+    EventCard,
+    {
+      event: live,
+      category: categories[live.category ?? ""],
+      anchor: openEvent.anchor,
+      actions: typeof eventActions === "function" ? eventActions(live) : eventActions ?? [],
+      onClose: () => setOpenEvent(null),
+      fallbackFocus: () => rootRef.current?.querySelector('[role="gridcell"][tabindex="0"]')
+    },
+    openEvent.event.id
+  ) : null;
   if (size === "compact") {
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: containerRef,
         className: cn(
           "flex flex-col",
           "bg-[var(--ds-bg-surface)]",
@@ -7775,16 +7982,12 @@ function Calendar({
                     children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
                   }
                 ),
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: goToToday,
                     className: "text-sm font-medium text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-primary)] transition-colors cursor-pointer px-ds-2",
-                    children: [
-                      MONTH_NAMES[currentDate.getMonth()],
-                      " ",
-                      currentDate.getFullYear()
-                    ]
+                    children: formatMonthYear(currentDate)
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -7807,10 +8010,12 @@ function Calendar({
               categories,
               selectedDate,
               onDayClick: handleDayClick,
-              onEventClick,
+              onOpenEvent: openCard,
+              onNavigate: setCurrentDate,
               weekStartsOn
             }
-          )
+          ),
+          card
         ]
       }
     );
@@ -7819,6 +8024,7 @@ function Calendar({
     "div",
     {
       ref: containerRef,
+      "data-fill": fill2 != null ? "" : void 0,
       className: cn(
         "flex flex-col",
         "bg-[var(--ds-bg-surface)]",
@@ -7826,8 +8032,10 @@ function Calendar({
         "rounded-[var(--ds-radius-lg)]",
         "shadow-[var(--ds-shadow-sm)]",
         "overflow-hidden",
+        inPane && "h-full min-h-0",
         className
       ),
+      style: fill2 != null ? { height: fill2 } : void 0,
       children: [
         isNarrow ? /* @__PURE__ */ jsxs(
           "div",
@@ -7886,7 +8094,7 @@ function Calendar({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0", style: { minHeight: currentView === "week" ? 420 : currentView === "month" ? isNarrow ? 360 : 500 : void 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0", style: { minHeight: currentView === "week" ? fill2 != null || inPane ? void 0 : 420 : currentView === "month" ? isNarrow ? 360 : 500 : void 0 }, children: [
           currentView === "month" && /* @__PURE__ */ jsx(
             MonthView,
             {
@@ -7895,7 +8103,9 @@ function Calendar({
               categories,
               selectedDate,
               onDayClick: handleDayClick,
-              onEventClick,
+              canStartEvent: !!onDayClick,
+              onOpenEvent: openCard,
+              onNavigate: setCurrentDate,
               weekStartsOn
             }
           ),
@@ -7907,7 +8117,8 @@ function Calendar({
               categories,
               selectedDate,
               onDayClick: handleDayClick,
-              onEventClick,
+              onOpenEvent: openCard,
+              onNavigate: setCurrentDate,
               weekStartsOn
             }
           ),
@@ -7919,11 +8130,11 @@ function Calendar({
               categories,
               selectedDate,
               onMonthClick: handleMonthClick,
-              weekStartsOn,
-              onEventClick
+              weekStartsOn
             }
           )
-        ] })
+        ] }),
+        card
       ]
     }
   );
@@ -9763,9 +9974,9 @@ var StackedList = forwardRef(function StackedList2({
   ] });
 });
 var TIME_ZOOMS = ["day", "week", "month", "quarter"];
-var DAY_MS = 864e5;
+var DAY_MS2 = 864e5;
 var DATE_ONLY2 = /^(\d{4})-(\d{2})-(\d{2})$/;
-var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS);
+var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS2);
 function dayOfDate(d) {
   const t = d.getTime();
   if (Number.isNaN(t)) return NaN;
@@ -9774,7 +9985,7 @@ function dayOfDate(d) {
   first.setHours(0, 0, 0, 0);
   if (first.getTime() === t) return day;
   const ms = ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1e3 + d.getMilliseconds();
-  return day + ms / DAY_MS;
+  return day + ms / DAY_MS2;
 }
 function dayOf(value) {
   if (typeof value === "number") return Number.isFinite(value) ? value : NaN;
@@ -9784,13 +9995,13 @@ function dayOf(value) {
   if (!m) return dayOfDate(new Date(value));
   const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
   const day = utcDay(y, mo, d);
-  const back = new Date(day * DAY_MS);
+  const back = new Date(day * DAY_MS2);
   return back.getUTCFullYear() === y && back.getUTCMonth() === mo && back.getUTCDate() === d ? day : NaN;
 }
 function dateOfDay(day) {
   const whole = Math.floor(day);
-  const u = new Date(whole * DAY_MS);
-  return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole) * DAY_MS));
+  const u = new Date(whole * DAY_MS2);
+  return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole) * DAY_MS2));
 }
 function isWholeDay(value) {
   return typeof value === "string" ? DATE_ONLY2.test(value.trim()) : Number.isInteger(dayOf(value));
@@ -9809,7 +10020,7 @@ function periodStart(unit, day, weekStartsOn) {
   const d = Math.floor(day);
   if (unit === "day") return d;
   if (unit === "week") return d - (weekday(d) - weekStartsOn + 7) % 7;
-  const u = new Date(d * DAY_MS);
+  const u = new Date(d * DAY_MS2);
   const y = u.getUTCFullYear();
   const m = u.getUTCMonth();
   if (unit === "month") return utcDay(y, m, 1);
@@ -9819,7 +10030,7 @@ function periodStart(unit, day, weekStartsOn) {
 function periodAfter(unit, start) {
   if (unit === "day") return start + 1;
   if (unit === "week") return start + 7;
-  const u = new Date(start * DAY_MS);
+  const u = new Date(start * DAY_MS2);
   const y = u.getUTCFullYear();
   const m = u.getUTCMonth();
   if (unit === "month") return utcDay(y, m + 1, 1);
@@ -9838,11 +10049,11 @@ function formatter(given, options) {
   return f;
 }
 function format(day, locale, options) {
-  return formatter(locale, options).format(new Date(day * DAY_MS));
+  return formatter(locale, options).format(new Date(day * DAY_MS2));
 }
 var pad22 = (n) => String(n).padStart(2, "0");
 function keyOf(unit, day) {
-  const u = new Date(day * DAY_MS);
+  const u = new Date(day * DAY_MS2);
   const y = u.getUTCFullYear();
   const m = u.getUTCMonth();
   if (unit === "year") return String(y);
@@ -9857,7 +10068,7 @@ function labelsOf(unit, role, day, locale) {
   else if (unit === "week") forms = [f({ day: "numeric", month: "short" }), f({ day: "numeric" })];
   else if (unit === "month") {
     forms = role === "major" ? [f({ month: "long", year: "numeric" }), f({ month: "short", year: "numeric" }), f({ month: "short" }), f({ month: "narrow" })] : [f({ month: "long" }), f({ month: "short" }), f({ month: "narrow" })];
-  } else if (unit === "quarter") forms = [`Q${Math.floor(new Date(day * DAY_MS).getUTCMonth() / 3) + 1}`];
+  } else if (unit === "quarter") forms = [`Q${Math.floor(new Date(day * DAY_MS2).getUTCMonth() / 3) + 1}`];
   else forms = [f({ year: "numeric" }), f({ year: "2-digit" })];
   return forms;
 }
@@ -9998,8 +10209,8 @@ function formatDateRange(start, end, words) {
   const timed = !isWholeDay(start) || !isWholeDay(until);
   const first = timed ? from : Math.floor(from);
   const last = timed ? Math.max(from, stop) : Math.max(first, Math.ceil(stop) - 1);
-  const a = new Date(first * DAY_MS);
-  const b = new Date(last * DAY_MS);
+  const a = new Date(first * DAY_MS2);
+  const b = new Date(last * DAY_MS2);
   const years = a.getUTCFullYear() !== b.getUTCFullYear() && day.year === void 0;
   const f = formatter(locale, { ...day, ...years ? { year: "numeric" } : {}, ...timed ? time : {} });
   return first === last ? f.format(a) : range(f, a, b, to ?? (english(f) ? " to " : void 0));
@@ -10276,9 +10487,9 @@ function TimeScaleHeader({ todayLabel = "Today", className }) {
 }
 var ZOOM_NAMES = { day: "Days", week: "Weeks", month: "Months", quarter: "Quarters" };
 var SHADE_MIN = 4;
-var INSET = 8;
+var INSET2 = 8;
 var MIN_INSET = 2;
-var MIN_TITLE = 2 * INSET + 12;
+var MIN_TITLE = 2 * INSET2 + 12;
 var PHONE_BELOW = 640;
 var MIN_LABEL = 112;
 var ROW_HEIGHT = 40;
@@ -10632,7 +10843,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
   let label = null;
   if (labels && hasLabels) {
     const widths = labels.map(measure);
-    const inset = Math.min(INSET, Math.max(MIN_INSET, (drawnWidth - borders.start - borders.end - Math.min(...widths)) / 2 - 0.5));
+    const inset = Math.min(INSET2, Math.max(MIN_INSET, (drawnWidth - borders.start - borders.end - Math.min(...widths)) / 2 - 0.5));
     const fits = (i) => `clamp(0, calc((${inView} - ${widths[i] + 2 * inset} + 0.25) * 1000), 1)`;
     const shows = (i) => i === 0 ? fits(0) : `calc(${[fits(i), ...labels.slice(0, i).map((_, j) => `(1 - ${fits(j)})`)].join(" * ")})`;
     const named = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
@@ -10647,7 +10858,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
         "data-time-bar-label": "",
         "data-gs-clip": "",
         className: "sticky flex min-w-0 items-center gap-ds-1 overflow-hidden whitespace-nowrap",
-        style: { ...sticky, paddingInline: INSET, opacity: `clamp(0, calc((${inView} - ${MIN_TITLE}) * 1000), 1)` },
+        style: { ...sticky, paddingInline: INSET2, opacity: `clamp(0, calc((${inView} - ${MIN_TITLE}) * 1000), 1)` },
         children: typeof children === "string" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children
       }
     );