gridsmith-ui 0.17.0 → 0.17.2

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Button, useAppShell, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-J43HCK7Q.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-J43HCK7Q.js';
+import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-CIVSNXFG.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-CIVSNXFG.js';
 import { Skeleton } from './chunk-Z63OSN64.js';
 export { Skeleton } from './chunk-Z63OSN64.js';
-import { FOCUSABLE, usePopupFocus, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-YQABRUWD.js';
-export { useGridKeyboard } from './chunk-YQABRUWD.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
+export { useGridKeyboard } from './chunk-JXANCXK6.js';
 import { Link } from './chunk-XGSQOMEY.js';
 export { CodeBlock, Divider, Link } from './chunk-XGSQOMEY.js';
 import { Badge } from './chunk-PVTGMCVR.js';
@@ -2012,8 +2012,8 @@ function DateRangePicker({
   };
   const previewEnd = value.start && !value.end && hover && hover >= value.start ? hover : null;
   const rangeStart = value.start;
-  const rangeEnd = value.end ?? previewEnd;
-  const inRange = (d) => !!(rangeStart && rangeEnd && d > rangeStart && d < rangeEnd);
+  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;
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
@@ -2094,7 +2094,7 @@ function DateRangePicker({
                 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 = !!rangeEnd && isSameDay2(d, rangeEnd);
+                  const isEnd = !!rangeEnd2 && isSameDay2(d, rangeEnd2);
                   const between = inRange(d);
                   const dis = isDisabledDay(d);
                   return /* @__PURE__ */ jsx(
@@ -9329,12 +9329,19 @@ var DAY_MS = 864e5;
 var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
 var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS);
 function dayOfDate(d) {
-  if (Number.isNaN(d.getTime())) return NaN;
+  const t = d.getTime();
+  if (Number.isNaN(t)) return NaN;
+  const day = utcDay(d.getFullYear(), d.getMonth(), d.getDate());
+  const first = new Date(t);
+  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 utcDay(d.getFullYear(), d.getMonth(), d.getDate()) + ms / DAY_MS;
+  return day + ms / DAY_MS;
 }
 function dayOf(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : NaN;
   if (value instanceof Date) return dayOfDate(value);
+  if (typeof value !== "string") return NaN;
   const m = DATE_ONLY.exec(value.trim());
   if (!m) return dayOfDate(new Date(value));
   const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
@@ -9347,10 +9354,15 @@ function dateOfDay(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));
 }
+function isWholeDay(value) {
+  return typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(dayOf(value));
+}
 function endDayOf(value) {
   const day = dayOf(value);
-  const wholeDay2 = typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(day);
-  return wholeDay2 ? day + 1 : day;
+  return typeof value !== "number" && isWholeDay(value) ? day + 1 : day;
+}
+function rangeEnd(start, end) {
+  return end instanceof Date && !isWholeDay(start) ? dayOf(end) : endDayOf(end);
 }
 var MINOR = { day: "day", week: "week", month: "month", quarter: "quarter" };
 var MAJOR = { day: "month", week: "month", month: "year", quarter: "year" };
@@ -9408,26 +9420,33 @@ function labelsOf(unit, role, day, locale) {
     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 forms = [f({ year: "numeric" }), f({ year: "2-digit" })];
-  return [...new Set(forms)];
+  return forms;
 }
 var DENSITY = { day: 56, week: 16, month: 4, quarter: 1.5 };
 var todays = /* @__PURE__ */ new WeakMap();
+var awaiting = /* @__PURE__ */ new WeakSet();
+function awaitsToday(scale) {
+  return awaiting.has(scale);
+}
 function calendarDay(day) {
   const d = Math.floor(day);
   return { day: d, weekday: weekday(d), key: keyOf("day", d) };
 }
 function ticks(unit, role, s) {
   const out = [];
-  for (let p = periodStart(unit, s.startDay, s.weekStartsOn); p < s.endDay; p = periodAfter(unit, p)) {
+  for (let p = periodStart(unit, s.startDay, s.weekStartsOn); p < s.endDay; ) {
+    const next = periodAfter(unit, p);
     const from = Math.max(p, s.startDay);
-    const to = Math.min(periodAfter(unit, p), s.endDay);
+    const to = Math.min(next, s.endDay);
     out.push({ key: keyOf(unit, p), day: from, x: (from - s.startDay) * s.pxPerDay, width: (to - from) * s.pxPerDay, weekday: weekday(from), labels: labelsOf(unit, role, p, s.locale) });
+    if (!(next > p)) break;
+    p = next;
   }
   return out;
 }
 function build(s) {
   const { startDay, pxPerDay } = s;
-  const x = (value) => (startIndex(value) - startDay) * pxPerDay;
+  const x = (value) => (dayOf(value) - startDay) * pxPerDay;
   const inRange = (d) => d >= startDay && d < s.endDay;
   const todayDay = Math.floor(s.todayValue);
   const scale = {
@@ -9437,9 +9456,9 @@ function build(s) {
     pxPerDay,
     width: (s.endDay - startDay) * pxPerDay,
     x,
-    span: (start, end = start) => {
+    span: (start, end) => {
       const x0 = x(start);
-      return { x: x0, width: Math.max(0, (endIndex(end) - startDay) * pxPerDay - x0) };
+      return { x: x0, width: Math.max(0, (rangeEnd(start, end ?? start) - startDay) * pxPerDay - x0) };
     },
     dayAt: (px) => startDay + px / pxPerDay,
     major: ticks(MAJOR[s.zoom], "major", s),
@@ -9452,9 +9471,7 @@ function build(s) {
   todays.set(scale, s.todayValue);
   return scale;
 }
-var toMinute = (day) => Math.round(day * 1440) / 1440;
-var startIndex = (value) => typeof value === "number" ? value : dayOf(value);
-var endIndex = (value) => typeof value === "number" ? value : endDayOf(value);
+var toMinute = (day) => Math.floor(day * 1440 + 1e-6) / 1440;
 function scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, pxPerDay, pad3) {
   const fallback = Number.isFinite(todayValue) ? Math.floor(todayValue) : 0;
   const a = Number.isFinite(from) ? from : fallback;
@@ -9470,28 +9487,44 @@ function scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, pxPerDay, p
   }
   return build({ zoom, startDay, endDay, pxPerDay: pxPerDay > 0 ? pxPerDay : DENSITY[zoom], todayValue, weekStartsOn, locale });
 }
-function extendTimeScale(scale, width) {
-  if (!(width > scale.width) || !(scale.pxPerDay > 0)) return scale;
+function extendedEnd(scale, width) {
+  if (!(width > scale.width) || !(scale.pxPerDay > 0)) return scale.endDay;
   const unit = MINOR[scale.zoom];
   const last = scale.startDay + Math.ceil(width / scale.pxPerDay) - 1;
-  const endDay = periodAfter(unit, periodStart(unit, last, scale.weekStartsOn));
+  return periodAfter(unit, periodStart(unit, last, scale.weekStartsOn));
+}
+function extendTimeScaleTo(scale, endDay) {
+  if (!(endDay > scale.endDay)) return scale;
   const todayValue = todays.get(scale) ?? scale.now ?? scale.today ?? NaN;
-  return build({ zoom: scale.zoom, startDay: scale.startDay, endDay, pxPerDay: scale.pxPerDay, todayValue, weekStartsOn: scale.weekStartsOn, locale: scale.locale });
+  const extended = build({ zoom: scale.zoom, startDay: scale.startDay, endDay, pxPerDay: scale.pxPerDay, todayValue, weekStartsOn: scale.weekStartsOn, locale: scale.locale });
+  if (awaiting.has(scale)) awaiting.add(extended);
+  return extended;
 }
+var noSubscription = () => () => {
+};
+var inBrowser = () => true;
+var onServer = () => false;
 function useTimeScale({ start, end, zoom, today, weekStartsOn = 1, locale, pxPerDay, pad: pad3 = 0 }) {
+  const readable = useSyncExternalStore(noSubscription, inBrowser, onServer);
   const [mounted] = useState(() => toMinute(dayOf(/* @__PURE__ */ new Date())));
-  const from = startIndex(start);
-  const to = endIndex(end);
-  const todayValue = today === void 0 ? mounted : toMinute(dayOf(today));
+  const pending = today === void 0 && !readable;
+  const from = dayOf(start);
+  const to = rangeEnd(start, end);
+  const todayValue = today !== void 0 ? toMinute(dayOf(today)) : pending ? NaN : mounted;
   const density = pxPerDay?.[zoom] ?? DENSITY[zoom];
-  return useMemo(() => scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, density, pad3), [from, to, zoom, todayValue, weekStartsOn, locale, density, pad3]);
+  return useMemo(() => {
+    const scale = scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, density, pad3);
+    if (pending) awaiting.add(scale);
+    return scale;
+  }, [from, to, zoom, todayValue, weekStartsOn, locale, density, pad3, pending]);
 }
 function timeExtent(ranges) {
   let start = Infinity;
   let end = -Infinity;
   for (const r of ranges) {
+    if (r == null) continue;
     const s = dayOf(r.start);
-    const e = endDayOf(r.end ?? r.start);
+    const e = r.end == null ? endDayOf(r.start) : rangeEnd(r.start, r.end);
     if (Number.isFinite(s)) start = Math.min(start, s);
     if (Number.isFinite(e)) end = Math.max(end, e);
   }
@@ -9499,7 +9532,6 @@ function timeExtent(ranges) {
 }
 var DAY_WORDS = { day: "numeric", month: "long" };
 var TIME_WORDS = { hour: "2-digit", minute: "2-digit" };
-var wholeDay = (value) => typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(value instanceof Date ? dayOf(value) : value);
 var SEPARATOR = /\s*[\u2010-\u2015\u2212~\uff5e\u301c-]\s*/;
 var english = (f) => new Intl.Locale(f.resolvedOptions().locale).language === "en";
 function range(f, a, b, to) {
@@ -9518,11 +9550,13 @@ function range(f, a, b, to) {
   if (!joined) out.splice(lastOfStart + 1, 0, to);
   return out.join("");
 }
-function formatDateRange(start, end = start, { locale, to, day = DAY_WORDS, time = TIME_WORDS } = {}) {
-  const from = startIndex(start);
-  const stop = endIndex(end);
+function formatDateRange(start, end, words) {
+  const { locale, to, day = DAY_WORDS, time = TIME_WORDS } = words ?? {};
+  const until = end ?? start;
+  const from = dayOf(start);
+  const stop = rangeEnd(start, until);
   if (!Number.isFinite(from) || !Number.isFinite(stop)) return "";
-  const timed = !wholeDay(start) || !wholeDay(end);
+  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);
@@ -9552,7 +9586,7 @@ function createScrollStore() {
 var TimeViewportCtx = createContext(null);
 var TimeViewportScrollCtx = createContext(null);
 var UNMEASURED = { scrollLeft: 0, visibleWidth: 0 };
-var noSubscription = () => () => {
+var noSubscription2 = () => () => {
 };
 var unmeasured = () => UNMEASURED;
 function useTimeViewportLayout() {
@@ -9562,7 +9596,7 @@ function useTimeViewportLayout() {
 }
 function useTimeViewport() {
   const store = useContext(TimeViewportScrollCtx);
-  const scroll = useSyncExternalStore(store?.subscribe ?? noSubscription, store?.get ?? unmeasured, unmeasured);
+  const scroll = useSyncExternalStore(store?.subscribe ?? noSubscription2, store?.get ?? unmeasured, unmeasured);
   return { ...useTimeViewportLayout(), ...scroll };
 }
 function fitLabels(boxes, measure, { gap = 8, align = "start", visible } = {}) {
@@ -9812,17 +9846,16 @@ var ROW_HEIGHT = 40;
 var MARGIN = 16;
 var WHEEL_STEP = 50;
 var WHEEL_PAUSE = 250;
-var FIELD = "input, select, textarea, [contenteditable='true']";
 var border = "border-[var(--ds-border-subtle)]";
-function writeScroll(el, visibleWidth) {
-  el.style.setProperty("--time-scroll", String(el.scrollLeft));
-  el.style.setProperty("--time-view-end", String(el.scrollLeft + visibleWidth));
+function writeScroll(rows, left, visibleWidth) {
+  rows?.style.setProperty("--time-scroll", String(left));
+  rows?.style.setProperty("--time-view-end", String(left + visibleWidth));
 }
 var TimeViewport = forwardRef(function TimeViewport2({
   scale,
   onZoomChange,
   zooms = TIME_ZOOMS,
-  labelWidth: labelWidthProp = 240,
+  labelWidth = 240,
   labelHeader,
   header,
   toolbar,
@@ -9837,6 +9870,7 @@ var TimeViewport = forwardRef(function TimeViewport2({
 }, ref) {
   const scrollerRef = useRef(null);
   const headerRef = useRef(null);
+  const rowsRef = useRef(null);
   const [frame, setFrame] = useState({ width: 0, header: 0 });
   useLayoutEffect(() => {
     const el = scrollerRef.current;
@@ -9854,19 +9888,22 @@ var TimeViewport = forwardRef(function TimeViewport2({
     return () => ro.disconnect();
   }, []);
   const phone = frame.width > 0 && frame.width < PHONE_BELOW;
-  const labelWidth = phone ? Math.min(labelWidthProp, Math.max(MIN_LABEL, Math.round(frame.width * 0.36))) : labelWidthProp;
-  const visibleWidth = Math.max(0, frame.width - labelWidth);
-  const drawn = useMemo(() => extendTimeScale(scale, visibleWidth), [scale, visibleWidth]);
+  const pinnedWidth = phone ? Math.min(labelWidth, Math.max(MIN_LABEL, Math.round(frame.width * 0.36))) : labelWidth;
+  const visibleWidth = Math.max(0, frame.width - pinnedWidth);
+  const drawnEnd = extendedEnd(scale, visibleWidth);
+  const drawn = useMemo(() => extendTimeScaleTo(scale, drawnEnd), [scale, drawnEnd]);
   const [store] = useState(createScrollStore);
-  const lastLeft = useRef(0);
-  const latest = useLatest({ drawn, visibleWidth, labelWidth, headerHeight: frame.header });
+  const wantLeft = useRef(0);
+  const latest = useLatest({ drawn, visibleWidth, labelWidth: pinnedWidth, headerHeight: frame.header });
   const setLeft = useCallback((left) => {
     const el = scrollerRef.current;
     if (!el) return;
-    el.scrollLeft = Math.max(0, left);
-    lastLeft.current = el.scrollLeft;
-    writeScroll(el, latest.current.visibleWidth);
-    store.set({ scrollLeft: el.scrollLeft, visibleWidth: latest.current.visibleWidth });
+    const target = Math.max(0, left);
+    el.scrollLeft = target;
+    const now = el.scrollLeft;
+    wantLeft.current = Math.abs(now - target) < 1 ? target : now;
+    writeScroll(rowsRef.current, now, latest.current.visibleWidth);
+    store.set({ scrollLeft: now, visibleWidth: latest.current.visibleWidth });
   }, [store, latest]);
   const api = useMemo(() => {
     const ensureVisible = (x0, x1) => {
@@ -9889,9 +9926,18 @@ var TimeViewport = forwardRef(function TimeViewport2({
       },
       page(direction) {
         const { drawn: s, visibleWidth: vw } = latest.current;
-        const target = (scrollerRef.current?.scrollLeft ?? 0) + direction * vw;
-        const tick = s.minor.reduce((best, t) => Math.abs(t.x - target) < Math.abs(best - target) ? t.x : best, Infinity);
-        setLeft(Number.isFinite(tick) ? tick : target);
+        const left = scrollerRef.current?.scrollLeft ?? 0;
+        const target = left + direction * vw;
+        let to = target;
+        let gap = vw / 2;
+        for (const t of s.minor) {
+          const d = Math.abs(t.x - target);
+          if (d <= gap && (t.x - left) * direction >= 1) {
+            to = t.x;
+            gap = d;
+          }
+        }
+        setLeft(to);
       },
       ensureVisible,
       reveal(target) {
@@ -9912,29 +9958,34 @@ var TimeViewport = forwardRef(function TimeViewport2({
   useImperativeHandle(ref, () => api, [api]);
   const todayAtX = todayAt === "now" ? drawn.now === null ? null : drawn.x(drawn.now) : drawn.today === null ? null : drawn.x(drawn.today) + drawn.pxPerDay / 2;
   const todayX = showToday ? todayAtX : null;
-  const layout = useMemo(() => ({ scale: drawn, labelWidth, showToday, todayX, compact: phone, ...api }), [drawn, labelWidth, showToday, todayX, phone, api]);
+  const layout = useMemo(() => ({ scale: drawn, labelWidth: pinnedWidth, showToday, todayX, compact: phone, ...api }), [drawn, pinnedWidth, showToday, todayX, phone, api]);
   const pending = useRef(null);
   const applied = useRef(null);
   useLayoutEffect(() => {
     const el = scrollerRef.current;
     if (!el || visibleWidth <= 0) return;
-    writeScroll(el, visibleWidth);
-    store.set({ scrollLeft: el.scrollLeft, visibleWidth });
+    const left = el.scrollLeft;
+    const publish = () => {
+      writeScroll(rowsRef.current, left, visibleWidth);
+      store.set({ scrollLeft: left, visibleWidth });
+    };
     const prev = applied.current;
-    applied.current = { startDay: drawn.startDay, pxPerDay: drawn.pxPerDay, visibleWidth };
+    let to = null;
     if (!prev) {
+      if (initialDate === void 0 && awaitsToday(drawn)) return publish();
       const at = initialDate !== void 0 ? drawn.x(initialDate) : todayAtX;
-      if (at !== null && Number.isFinite(at)) setLeft(at - visibleWidth / 2);
-      return;
+      if (at !== null && Number.isFinite(at)) to = at - visibleWidth / 2;
+    } else if (prev.startDay !== drawn.startDay || prev.pxPerDay !== drawn.pxPerDay || prev.visibleWidth !== visibleWidth) {
+      const want = pending.current;
+      pending.current = null;
+      const anchor = want && want.zoom === drawn.zoom ? want : { day: prev.startDay + (wantLeft.current + prev.visibleWidth / 2) / prev.pxPerDay, at: visibleWidth / 2 };
+      to = drawn.x(anchor.day) - anchor.at;
     }
-    const rescaled = prev.startDay !== drawn.startDay || prev.pxPerDay !== drawn.pxPerDay;
-    if (!rescaled && prev.visibleWidth === visibleWidth) return;
-    const want = pending.current;
-    pending.current = null;
-    const anchor = want && want.zoom === drawn.zoom ? want : { day: prev.startDay + (lastLeft.current + prev.visibleWidth / 2) / prev.pxPerDay, at: visibleWidth / 2 };
-    setLeft(drawn.x(anchor.day) - anchor.at);
+    applied.current = { startDay: drawn.startDay, pxPerDay: drawn.pxPerDay, visibleWidth };
+    if (to === null) return publish();
+    setLeft(to);
     const focused = document.activeElement;
-    if (focused instanceof HTMLElement && focused !== el && el.contains(focused)) api.reveal(focused);
+    if (prev && focused instanceof HTMLElement && focused !== el && el.contains(focused)) api.reveal(focused);
   }, [drawn, visibleWidth, initialDate, todayAtX, setLeft, store, api]);
   const shaded = [];
   if (shadeDays && drawn.pxPerDay >= SHADE_MIN) {
@@ -9956,7 +10007,7 @@ var TimeViewport = forwardRef(function TimeViewport2({
     const f = document.activeElement;
     if (!(f instanceof HTMLElement) || f === el || !el.contains(f)) return void 0;
     const r = f.getBoundingClientRect();
-    const x = (r.left + r.right) / 2 - el.getBoundingClientRect().left - labelWidth;
+    const x = (r.left + r.right) / 2 - el.getBoundingClientRect().left - pinnedWidth;
     return x >= 0 && x <= visibleWidth ? x : void 0;
   };
   const zoom = (direction, at) => {
@@ -9980,10 +10031,11 @@ var TimeViewport = forwardRef(function TimeViewport2({
   };
   const onKeyDown = (e) => {
     if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    if (!e.currentTarget.contains(e.target)) return;
     if (e.target instanceof HTMLElement && e.target.closest(FIELD)) return;
-    if (e.key === "+" || e.key === "=") {
+    if (ZOOM_KEYS.in.includes(e.key)) {
       if (zoom(-1)) e.preventDefault();
-    } else if (e.key === "-" || e.key === "\u2212") {
+    } else if (ZOOM_KEYS.out.includes(e.key)) {
       if (zoom(1)) e.preventDefault();
     } else if (e.shiftKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
       e.preventDefault();
@@ -9993,13 +10045,15 @@ var TimeViewport = forwardRef(function TimeViewport2({
   const wheel = useRef({ sum: 0, at: -Infinity });
   const onWheel = useLatest((e) => {
     if (!(e.ctrlKey || e.metaKey) || !onZoomChange) return;
-    e.preventDefault();
     const w = wheel.current;
-    if (e.timeStamp - w.at < WHEEL_PAUSE) return;
+    if (e.timeStamp - w.at < WHEEL_PAUSE) return e.preventDefault();
+    const direction = e.deltaY < 0 ? -1 : e.deltaY > 0 ? 1 : 0;
+    if (direction === 0 || zoomTo(direction) === null) return;
+    e.preventDefault();
     w.sum += e.deltaY * (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1);
     if (Math.abs(w.sum) < WHEEL_STEP) return;
     const el = scrollerRef.current;
-    const x = el ? e.clientX - el.getBoundingClientRect().left - labelWidth : NaN;
+    const x = el ? e.clientX - el.getBoundingClientRect().left - pinnedWidth : NaN;
     zoom(w.sum < 0 ? -1 : 1, x >= 0 && x <= visibleWidth ? x : void 0);
     wheel.current = { sum: 0, at: e.timeStamp };
   });
@@ -10030,9 +10084,10 @@ var TimeViewport = forwardRef(function TimeViewport2({
   const onScroll = () => {
     const el = scrollerRef.current;
     if (!el) return;
-    lastLeft.current = el.scrollLeft;
-    writeScroll(el, visibleWidth);
-    store.set({ scrollLeft: el.scrollLeft, visibleWidth });
+    const left = el.scrollLeft;
+    if (Math.abs(left - wantLeft.current) >= 1) wantLeft.current = left;
+    writeScroll(rowsRef.current, left, visibleWidth);
+    store.set({ scrollLeft: left, visibleWidth });
   };
   const headerNode = header === void 0 ? /* @__PURE__ */ jsx(TimeScaleHeader, {}) : header;
   const hasHeader = headerNode != null || labelHeader != null;
@@ -10064,14 +10119,14 @@ var TimeViewport = forwardRef(function TimeViewport2({
             tabIndex: tabStop ? 0 : void 0,
             onScroll,
             className: "peer h-full overflow-auto isolate outline-none",
-            style: { scrollPaddingInlineStart: labelWidth, scrollPaddingTop: frame.header },
-            children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", style: { width: labelWidth + drawn.width }, children: [
+            style: { scrollPaddingInlineStart: pinnedWidth, scrollPaddingTop: frame.header },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", style: { width: pinnedWidth + drawn.width }, children: [
               hasHeader && /* @__PURE__ */ jsxs("div", { ref: headerRef, className: cn("sticky top-0 z-[3] flex shrink-0 bg-[var(--ds-bg-surface)] border-b-[length:var(--ds-border-width)]", border), children: [
                 /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn("sticky start-0 z-[1] flex shrink-0 items-end px-ds-3 py-ds-1.5 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)] text-xs font-medium text-[var(--ds-text-secondary)]", border),
-                    style: { width: labelWidth },
+                    style: { width: pinnedWidth },
                     children: labelHeader
                   }
                 ),
@@ -10090,18 +10145,18 @@ var TimeViewport = forwardRef(function TimeViewport2({
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col", children: [
-                /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0", style: { insetInlineStart: labelWidth, width: drawn.width }, children: [
+                /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0", style: { insetInlineStart: pinnedWidth, width: drawn.width }, children: [
                   shaded.map((b) => /* @__PURE__ */ jsx("span", { "data-shaded-days": "", className: "absolute inset-y-0 bg-[var(--ds-bg-muted)] opacity-70", style: { insetInlineStart: b.x, width: b.width } }, b.key)),
                   drawn.minor.slice(1).map((t) => /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 border-s-[length:1px] border-[var(--ds-border-subtle)]", style: { insetInlineStart: t.x } }, t.key)),
                   todayX !== null && /* @__PURE__ */ jsx("span", { "data-today-line": "", className: "absolute inset-y-0 -translate-x-1/2 border-s-2 border-[var(--ds-accent-primary)]", style: { insetInlineStart: todayX } })
                 ] }),
-                children,
-                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("sticky start-0 z-[2] min-h-0 flex-1 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)]", border), style: { width: labelWidth } })
+                /* @__PURE__ */ jsx("div", { ref: rowsRef, "data-time-rows": "", className: "contents", children }),
+                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("sticky start-0 z-[2] min-h-0 flex-1 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)]", border), style: { width: pinnedWidth } })
               ] })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 peer-focus-visible:shadow-[inset_0_0_0_2px_var(--ds-border-focus)]" })
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 peer-focus-visible:shadow-[inset_0_0_0_2px_var(--ds-border-focus)] peer-focus-visible:outline-2 peer-focus-visible:-outline-offset-2 peer-focus-visible:outline-transparent" })
       ] })
     ] }) }) })
   );
@@ -10157,7 +10212,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
     {
       ...props,
       ref: barRef,
-      className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)] outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", className),
+      className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)] outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]", className),
       style: { insetInlineStart: x, width: drawnWidth, ...style },
       children: label
     }
@@ -10175,13 +10230,39 @@ var HEAD = 6;
 var BESIDE = STUB + 6;
 var groupKey = (id) => `group:${id}`;
 var itemKey = (id) => `item:${id}`;
+var asDate = (value) => value instanceof Date || typeof value === "string" ? value : void 0;
+function datesOf(item) {
+  const start = asDate(item.start);
+  if (start === void 0 || !Number.isFinite(dayOf(start))) return null;
+  if (item.milestone || item.end === void 0 || item.end === null) return { start, end: start };
+  const end = asDate(item.end);
+  return end !== void 0 && Number.isFinite(endDayOf(end)) ? { start, end } : null;
+}
+function uniqueById(list) {
+  const seen = /* @__PURE__ */ new Set();
+  const repeated = /* @__PURE__ */ new Set();
+  const unique = [];
+  for (const entry of list) {
+    if (seen.has(entry.id)) repeated.add(entry.id);
+    else {
+      seen.add(entry.id);
+      unique.push(entry);
+    }
+  }
+  return repeated.size ? { unique, repeated: [...repeated] } : { unique: list, repeated: [] };
+}
 function ganttRows(items, groups, collapsed) {
   const known = new Set(groups.map((g) => g.id));
   const byGroup = /* @__PURE__ */ new Map();
   const loose = [];
   for (const item of items) {
-    if (item.group === void 0 || !known.has(item.group)) loose.push(item);
-    else byGroup.set(item.group, [...byGroup.get(item.group) ?? [], item]);
+    if (item.group === void 0 || !known.has(item.group)) {
+      loose.push(item);
+      continue;
+    }
+    const list = byGroup.get(item.group);
+    if (list) list.push(item);
+    else byGroup.set(item.group, [item]);
   }
   const shown = groups.filter((g) => byGroup.has(g.id));
   const topLevel = shown.length + loose.length;
@@ -10199,16 +10280,23 @@ function ganttRows(items, groups, collapsed) {
   return rows;
 }
 function itemShape(item, scale) {
+  const dates = datesOf(item);
+  if (!dates) return { kind: item.milestone ? "milestone" : "bar", x0: NaN, x1: NaN, in: NaN, out: NaN };
   if (item.milestone) {
-    const centre = scale.x((dayOf(item.start) + endDayOf(item.start)) / 2);
+    const centre = scale.x((dayOf(dates.start) + endDayOf(dates.start)) / 2);
     return { kind: "milestone", x0: centre - TIP, x1: centre + TIP, in: centre - TIP, out: centre + TIP };
   }
-  const { x, width } = scale.span(item.start, item.end ?? item.start);
+  const { x, width } = scale.span(dates.start, dates.end);
   const x1 = x + Math.max(width, MIN_BAR);
   return { kind: "bar", x0: x, x1, in: x, out: x1 };
 }
-function groupExtent(items) {
-  return timeExtent(items.map((i) => ({ start: i.start, end: i.milestone ? void 0 : i.end })));
+function itemsExtent(items) {
+  const ranges = [];
+  for (const item of items) {
+    const dates = datesOf(item);
+    if (dates) ranges.push(dates);
+  }
+  return timeExtent(ranges);
 }
 var drawable = (shape) => !!shape && Number.isFinite(shape.x0) && Number.isFinite(shape.x1);
 function ganttArrows(items, rows, shapeOf, collapsed) {
@@ -10249,19 +10337,37 @@ function labelPlace(shape, textWidth, scaleWidth, { pad: pad3 = 8, gap = BESIDE
   return shape.x0 - gap - textWidth >= 0 ? "before" : "after";
 }
 var TONES = {
-  neutral: { fill: "bg-[var(--ds-status-neutral)]", on: "text-[var(--ds-text-on-neutral)]" },
-  info: { fill: "bg-[var(--ds-status-info)]", on: "text-[var(--ds-text-on-info)]" },
+  neutral: { fill: "bg-[var(--ds-status-neutral)]", on: "text-[var(--ds-text-on-neutral)]", icon: "minus" },
+  info: { fill: "bg-[var(--ds-status-info)]", on: "text-[var(--ds-text-on-info)]", icon: "info" },
   success: { fill: "bg-[var(--ds-status-success)]", on: "text-[var(--ds-text-on-success)]", icon: "check" },
   warning: { fill: "bg-[var(--ds-status-warning)]", on: "text-[var(--ds-text-on-warning)]", icon: "warning" },
   error: { fill: "bg-[var(--ds-status-error)]", on: "text-[var(--ds-text-on-error)]", icon: "error" },
-  accent: { fill: "bg-[var(--ds-accent-primary)]", on: "text-[var(--ds-text-on-primary)]" }
+  accent: { fill: "bg-[var(--ds-accent-primary)]", on: "text-[var(--ds-text-on-primary)]", icon: "star" }
 };
 var ICON = 12;
 var ICON_GAP = 4;
 var LEVEL_INDENT = 16;
 var TARGET = 24;
+var NO_DATES = "no dates";
 var KNOCKOUT = 2;
+var EDGE = "border-[length:1px] border-transparent";
+var EDGE_WIDTH = 1;
 var SELECTED = "outline-solid outline-2 outline-offset-2 outline-[var(--ds-text-primary)]";
+var UNDATED_INSET = 16;
+var NO_GROUPS = [];
+var NO_STATUSES = {};
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+  let dev = false;
+  try {
+    dev = process.env.NODE_ENV !== "production";
+  } catch {
+    dev = false;
+  }
+  if (!dev || warned.has(message)) return;
+  warned.add(message);
+  console.warn(`Gantt: ${message}`);
+}
 function GanttArrows({ arrows, width, height }) {
   const { labelWidth } = useTimeViewportLayout();
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", "data-gantt-arrows": "", className: "pointer-events-none absolute top-0 overflow-visible", style: { insetInlineStart: labelWidth, width, height }, children: arrows.map((a) => /* @__PURE__ */ jsxs("g", { "data-from": a.from, "data-to": a.to, "data-routed": a.routed || void 0, className: "text-[var(--ds-text-muted)]", children: [
@@ -10269,23 +10375,47 @@ function GanttArrows({ arrows, width, height }) {
     /* @__PURE__ */ jsx("path", { d: a.head, fill: "currentColor" })
   ] }, a.key)) });
 }
+function Cue({ name, size }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-gantt-cue": name, className: "flex shrink-0", children: /* @__PURE__ */ jsx(Icon, { name, size }) });
+}
 function Legend({ statuses }) {
   const entries = Object.entries(statuses);
   if (!entries.length) return null;
   return /* @__PURE__ */ jsx("ul", { "aria-label": "Status key", className: "ms-auto flex flex-wrap items-center gap-x-ds-3 gap-y-ds-1 ps-ds-2 text-xs text-[var(--ds-text-secondary)]", children: entries.map(([key, s]) => {
     const tone = TONES[s.tone] ?? TONES.neutral;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-1.5", children: [
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("grid size-4 shrink-0 place-items-center rounded-[var(--ds-radius-sm)]", tone.fill, tone.on), children: tone.icon && /* @__PURE__ */ jsx(Icon, { name: tone.icon, size: 10 }) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("grid size-4 shrink-0 place-items-center rounded-[var(--ds-radius-sm)]", EDGE, tone.fill, tone.on), children: /* @__PURE__ */ jsx(Cue, { name: s.icon ?? tone.icon, size: 10 }) }),
       s.label
     ] }, key);
   }) });
 }
+function NoDates({ cue, selected, className, ...props }) {
+  const { labelWidth } = useTimeViewportLayout();
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center", children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      "data-gantt-shape": "undated",
+      className: cn(
+        "sticky flex cursor-pointer items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] border-[length:1px] border-dashed border-[var(--ds-border-default)] px-ds-1.5 py-ds-0.5 text-xs text-[var(--ds-text-secondary)]",
+        "outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]",
+        selected && SELECTED,
+        className
+      ),
+      style: { insetInlineStart: labelWidth + UNDATED_INSET },
+      children: [
+        cue,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "No dates" })
+      ]
+    }
+  ) });
+}
 function Gantt({
   items,
-  groups = [],
+  groups = NO_GROUPS,
   selectedId,
   onSelect,
-  statuses = {},
+  statuses = NO_STATUSES,
   zoom: zoomProp,
   defaultZoom = "week",
   onZoomChange,
@@ -10293,6 +10423,7 @@ function Gantt({
   weekStartsOn,
   locale,
   renderLabel,
+  describe,
   labelHeader = "Task",
   toolbar,
   "aria-label": ariaLabel,
@@ -10304,31 +10435,53 @@ function Gantt({
     if (zoomProp === void 0) setZoomState(next);
     onZoomChange?.(next);
   };
+  const zoomable = zoomProp === void 0 || onZoomChange !== void 0;
   const [selectedState, setSelectedState] = useState(null);
-  const selected = selectedId !== void 0 ? selectedId : selectedState;
+  const [controlled, setControlled] = useState(selectedId !== void 0);
+  const [overridden, setOverridden] = useState(null);
+  if (!controlled && selectedId !== void 0) {
+    setControlled(true);
+    if (selectedState !== null && selectedState !== selectedId) setOverridden(selectedState);
+  }
+  const isControlled = controlled || selectedId !== void 0;
+  const selected = isControlled ? selectedId ?? null : selectedState;
+  useEffect(() => {
+    if (overridden !== null) {
+      warnOnce("selectedId was given a value after the Gantt had kept a selection of its own. To control the selection, pass selectedId from the first render (null for none); to let the Gantt keep it, leave selectedId out.");
+    }
+  }, [overridden]);
   const select = (item) => {
-    if (selectedId === void 0) setSelectedState(item?.id ?? null);
+    if (!isControlled) setSelectedState(item?.id ?? null);
     onSelect?.(item);
   };
   const [collapsed, setCollapsed] = useState(() => new Set(groups.filter((g) => g.defaultCollapsed).map((g) => g.id)));
-  const extent = useMemo(() => timeExtent(items.map((i) => ({ start: i.start, end: i.milestone ? void 0 : i.end }))), [items]);
+  const plan = useMemo(() => uniqueById(items), [items]);
+  const phases = useMemo(() => uniqueById(groups), [groups]);
+  useEffect(() => {
+    const quoted = (ids) => ids.map((id) => `"${id}"`).join(", ");
+    if (plan.repeated.length) warnOnce(`more than one item has the id ${quoted(plan.repeated)}; only the first of each is shown.`);
+    if (phases.repeated.length) warnOnce(`more than one group has the id ${quoted(phases.repeated)}; only the first of each is shown.`);
+  }, [plan, phases]);
+  const tasks = plan.unique;
+  const extent = useMemo(() => itemsExtent(tasks), [tasks]);
   const scale = useTimeScale({ start: extent.start, end: extent.end, zoom, today, weekStartsOn, locale, pad: 1 });
-  const rows = useMemo(() => ganttRows(items, groups, collapsed), [items, groups, collapsed]);
-  const shapes = useMemo(() => new Map(items.map((i) => [i.id, itemShape(i, scale)])), [items, scale]);
-  const extents = useMemo(() => new Map(rows.filter((r) => r.children).map((r) => [r.group.id, groupExtent(r.children)])), [rows]);
-  const arrows = useMemo(() => ganttArrows(items, rows, (i) => shapes.get(i.id), collapsed), [items, rows, shapes, collapsed]);
+  const rows = useMemo(() => ganttRows(tasks, phases.unique, collapsed), [tasks, phases, collapsed]);
+  const shapes = useMemo(() => new Map(tasks.map((i) => [i.id, itemShape(i, scale)])), [tasks, scale]);
+  const extents = useMemo(() => new Map(rows.filter((r) => r.children).map((r) => [r.group.id, itemsExtent(r.children)])), [rows]);
+  const arrows = useMemo(() => ganttArrows(tasks, rows, (i) => shapes.get(i.id), collapsed), [tasks, rows, shapes, collapsed]);
   const byKey = useMemo(() => new Map(rows.map((r) => [r.key, r])), [rows]);
   const names = useMemo(() => {
-    const byId = new Map(items.map((i) => [i.id, i]));
+    const byId = new Map(tasks.map((i) => [i.id, i]));
     const list = new Intl.ListFormat(locale, { type: "conjunction" });
     const out = /* @__PURE__ */ new Map();
-    for (const item of items) {
+    for (const item of tasks) {
+      const dates = datesOf(item);
       const after = (item.dependsOn ?? []).flatMap((id) => byId.has(id) && id !== item.id ? [byId.get(id).title] : []);
       const status = item.status === void 0 ? void 0 : statuses[item.status];
       out.set(itemKey(item.id), [
         item.title,
         item.milestone ? "milestone" : null,
-        formatDateRange(item.start, item.milestone ? item.start : item.end ?? item.start, { locale }),
+        dates ? formatDateRange(dates.start, dates.end, { locale }) : NO_DATES,
         status?.label ?? null,
         after.length ? `after ${list.format(after)}` : null
       ].filter((part) => part).join(", "));
@@ -10337,31 +10490,66 @@ function Gantt({
       if (!row.group || !row.children) continue;
       const e = extents.get(row.group.id);
       const count = row.children.length === 1 ? "1 item" : `${row.children.length} items`;
-      out.set(row.key, [row.group.title, formatDateRange(e.start, e.end, { locale }), count].filter((part) => part).join(", "));
+      const span = Number.isFinite(e.start) ? formatDateRange(e.start, e.end, { locale }) : NO_DATES;
+      out.set(row.key, [row.group.title, span, count].filter((part) => part).join(", "));
     }
     return out;
-  }, [items, rows, extents, statuses, locale]);
+  }, [tasks, rows, extents, statuses, locale]);
+  const nameOf = (row) => {
+    const name = names.get(row.key) ?? "";
+    const words = row.item && describe ? describe(row.item) : "";
+    return words ? `${name}, ${words}` : name;
+  };
+  const regionLabel = useMemo(() => {
+    const span = Number.isFinite(extent.start) ? formatDateRange(extent.start, extent.end, { locale }) : "";
+    return `${ariaLabel}, ${span || NO_DATES}`;
+  }, [ariaLabel, extent, locale]);
+  const hasStatuses = useMemo(() => Object.keys(statuses).length > 0, [statuses]);
+  const toneOf = (item) => {
+    const status = item.status === void 0 ? void 0 : statuses[item.status];
+    const tone = TONES[status?.tone ?? "neutral"] ?? TONES.neutral;
+    return { tone, cue: hasStatuses ? status?.icon ?? tone.icon : void 0 };
+  };
   const probeRef = useRef(null);
   const measure = useTextMeasure(probeRef);
   const treeRef = useRef(null);
   const viewportRef = useRef(null);
   const [activeState, setActive] = useState(null);
+  const [focusWithin, setFocusWithin] = useState(false);
   const selectedKey = selected === null ? null : itemKey(selected);
-  const active = activeState !== null && byKey.has(activeState) ? activeState : selectedKey !== null && byKey.has(selectedKey) ? selectedKey : rows[0]?.key ?? "";
-  const toggle = (id) => {
-    const key = groupKey(id);
-    const closing = !collapsed.has(id);
-    setCollapsed((cur) => {
-      const next = new Set(cur);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-    if (closing && byKey.get(active)?.parentKey === key) {
-      setActive(key);
-      if (treeRef.current?.contains(document.activeElement)) grid.focus(key);
+  const selectedRow = selectedKey !== null && byKey.has(selectedKey) ? selectedKey : null;
+  const lastFocused = activeState !== null && byKey.has(activeState) ? activeState : null;
+  const active = (focusWithin ? lastFocused : null) ?? selectedRow ?? lastFocused ?? rows[0]?.key ?? "";
+  const focusedRow = useRef(null);
+  useLayoutEffect(() => {
+    const was = focusedRow.current;
+    if (!was) return;
+    const row = byKey.get(was.key);
+    if (row) {
+      if (row.index !== was.index) focusedRow.current = { key: was.key, index: row.index };
+      return;
     }
-  };
+    focusedRow.current = null;
+    const now = document.activeElement;
+    if (now && now !== document.body && now.isConnected) return;
+    const tree = treeRef.current;
+    if (tree) focusAfterRemoval(tree.querySelectorAll("[data-grid-key]"), was.index);
+  }, [byKey]);
+  const lastSelected = useRef(selected);
+  useEffect(() => {
+    if (lastSelected.current === selected) return;
+    lastSelected.current = selected;
+    const tree = treeRef.current;
+    if (selected === null || !tree || tree.contains(document.activeElement)) return;
+    const el = tree.querySelector(`[data-grid-key="${CSS.escape(itemKey(selected))}"]`);
+    if (el) viewportRef.current?.reveal(el);
+  }, [selected]);
+  const toggle = (id) => setCollapsed((cur) => {
+    const next = new Set(cur);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
   const activate = (row) => {
     if (row.group) toggle(row.group.id);
     else if (row.item) select(row.item);
@@ -10417,6 +10605,11 @@ function Gantt({
     }
     grid.onKeyDown(e);
   };
+  const onTreeBlur = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setFocusWithin(false);
+    if (e.relatedTarget) focusedRow.current = null;
+  };
   const onRowClick = (row) => {
     if (row.item) select(row.item.id === selected ? null : row.item);
     else if (row.group) toggle(row.group.id);
@@ -10428,25 +10621,33 @@ function Gantt({
     "aria-level": row.level,
     "aria-setsize": row.setSize,
     "aria-posinset": row.posInSet,
-    "aria-label": names.get(row.key),
+    "aria-label": nameOf(row),
     "data-grid-key": row.key,
     tabIndex: grid.tabIndexOf(row.key),
-    onFocus: () => setActive(row.key)
+    onFocus: () => {
+      setActive(row.key);
+      focusedRow.current = { key: row.key, index: row.index };
+    }
   });
   const renderItem = (row, item) => {
     const shape = shapes.get(item.id);
-    if (!drawable(shape)) return null;
-    const tone = TONES[item.status !== void 0 && statuses[item.status]?.tone || "neutral"] ?? TONES.neutral;
+    const dates = datesOf(item);
     const isSelected = item.id === selected;
-    const textWidth = measure(item.title) + (tone.icon ? ICON + ICON_GAP : 0) + 2 * KNOCKOUT;
-    const place = labelPlace(shape, textWidth, scale.width);
+    const { tone, cue } = toneOf(item);
+    if (!dates || !drawable(shape)) {
+      return /* @__PURE__ */ jsx(NoDates, { ...treeitem(row), "aria-selected": isSelected, selected: isSelected, cue: cue && /* @__PURE__ */ jsx(Cue, { name: cue, size: ICON }) });
+    }
+    const textWidth = measure(item.title) + (cue ? ICON + ICON_GAP : 0) + 2 * KNOCKOUT;
+    const place = labelPlace(shape, textWidth + 2 * EDGE_WIDTH, scale.width);
     const beside = place === "after" ? shape.x1 + BESIDE : shape.x0 - BESIDE - textWidth;
-    const icon = tone.icon && /* @__PURE__ */ jsx(Icon, { name: tone.icon, size: ICON, className: "shrink-0" });
     const title = /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon,
+      cue && /* @__PURE__ */ jsx(Cue, { name: cue, size: ICON }),
       /* @__PURE__ */ jsx("span", { className: "truncate", children: item.title })
     ] });
-    const shapeBox = shape.kind === "milestone" ? /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: cn("group absolute grid cursor-pointer place-items-center", "outline-none"), style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px] group-focus-visible:shadow-[var(--ds-shadow-focus)]", tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) }) : (
+    const shapeBox = shape.kind === "milestone" ? (
+      // the target's own outline is its focus indicator in forced colours, which drop the diamond's shadow ring
+      /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: "group absolute grid cursor-pointer place-items-center outline-none focus-visible:outline-hidden", style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px] group-focus-visible:shadow-[var(--ds-shadow-focus)]", EDGE, tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) })
+    ) : (
       // TimeBar keeps the title in view beside the pinned column while the bar's start is scrolled away
       /* @__PURE__ */ jsx(
         TimeBar,
@@ -10455,10 +10656,10 @@ function Gantt({
           "aria-selected": isSelected,
           "data-gantt-shape": "bar",
           "data-item": item.id,
-          start: item.start,
-          end: item.end ?? item.start,
+          start: dates.start,
+          end: dates.end,
           minWidth: MIN_BAR,
-          className: cn("cursor-pointer text-xs font-medium", tone.fill, tone.on, isSelected && SELECTED),
+          className: cn("cursor-pointer text-xs font-medium", EDGE, tone.fill, tone.on, isSelected && SELECTED),
           style: { top: (ROW_HEIGHT2 - BAR_HEIGHT) / 2, bottom: "auto", height: BAR_HEIGHT },
           children: place === "inside" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex min-w-0 items-center gap-ds-1 overflow-hidden", children: title })
         }
@@ -10479,23 +10680,29 @@ function Gantt({
       )
     ] });
   };
-  const renderGroup = (row, extent2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-[var(--ds-bg-muted)] opacity-60" }),
-    extent2 && Number.isFinite(extent2.start) && // a 24 px target around the thin summary bar it draws
-    /* @__PURE__ */ jsx(
-      TimeBar,
-      {
-        ...treeitem(row),
-        "aria-expanded": !collapsed.has(row.group.id),
-        "data-gantt-shape": "summary",
-        start: extent2.start,
-        end: extent2.end,
-        minWidth: MIN_BAR,
-        className: "cursor-pointer before:absolute before:inset-x-0 before:top-1/2 before:h-ds-2 before:-translate-y-1/2 before:rounded-[var(--ds-radius-full)] before:bg-[var(--ds-text-secondary)]",
-        style: { top: (ROW_HEIGHT2 - TARGET) / 2, bottom: "auto", height: TARGET }
-      }
-    )
-  ] });
+  const renderGroup = (row, group) => {
+    const extent2 = extents.get(group.id);
+    const expanded = !collapsed.has(group.id);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-[var(--ds-bg-muted)] opacity-60" }),
+      extent2 && Number.isFinite(extent2.start) ? (
+        // a 24 px target around the thin summary bar it draws
+        /* @__PURE__ */ jsx(
+          TimeBar,
+          {
+            ...treeitem(row),
+            "aria-expanded": expanded,
+            "data-gantt-shape": "summary",
+            start: extent2.start,
+            end: extent2.end,
+            minWidth: MIN_BAR,
+            className: "cursor-pointer before:absolute before:inset-x-0 before:top-1/2 before:h-ds-2 before:-translate-y-1/2 before:rounded-[var(--ds-radius-full)] before:border-[length:1px] before:border-transparent before:bg-[var(--ds-text-secondary)]",
+            style: { top: (ROW_HEIGHT2 - TARGET) / 2, bottom: "auto", height: TARGET }
+          }
+        )
+      ) : /* @__PURE__ */ jsx(NoDates, { ...treeitem(row), "aria-expanded": expanded })
+    ] });
+  };
   const label = (row) => {
     if (row.group) {
       return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "flex min-w-0 items-center gap-ds-1.5 font-medium", children: [
@@ -10513,27 +10720,30 @@ function Gantt({
       ] })
     );
   };
-  return /* @__PURE__ */ jsx(
+  const legend = /* @__PURE__ */ jsx(Legend, { statuses });
+  const legendApart = toolbar === false && hasStatuses;
+  const chart = /* @__PURE__ */ jsx(
     TimeViewport,
     {
       ref: viewportRef,
       scale,
-      onZoomChange: changeZoom,
+      onZoomChange: zoomable ? changeZoom : void 0,
       labelHeader,
       toolbar: toolbar === false ? false : /* @__PURE__ */ jsxs(Fragment, { children: [
         toolbar,
-        /* @__PURE__ */ jsx(Legend, { statuses })
+        legend
       ] }),
       tabStop: false,
-      "aria-label": ariaLabel,
-      className,
-      children: /* @__PURE__ */ jsxs("div", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: "relative", onKeyDown, children: [
+      "aria-label": regionLabel,
+      className: legendApart ? "h-auto flex-1" : className,
+      children: /* @__PURE__ */ jsxs("div", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: "relative", onKeyDown, onFocus: () => setFocusWithin(true), onBlur: onTreeBlur, children: [
         /* @__PURE__ */ jsx("span", { ref: probeRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute whitespace-nowrap text-xs font-medium", children: "0" }),
         /* @__PURE__ */ jsx(GanttArrows, { arrows, width: scale.width, height: rows.length * ROW_HEIGHT2 }),
         rows.map((row) => /* @__PURE__ */ jsx(
           TimeRow,
           {
             "data-row-key": row.key,
+            height: ROW_HEIGHT2,
             label: label(row),
             className: "cursor-pointer",
             labelClassName: cn(
@@ -10541,13 +10751,18 @@ function Gantt({
               row.item && row.item.id === selected && "bg-[image:linear-gradient(var(--ds-accent-subtle),var(--ds-accent-subtle))] text-[var(--ds-accent-subtle-text)]"
             ),
             onClick: () => onRowClick(row),
-            children: row.group ? renderGroup(row, extents.get(row.group.id)) : renderItem(row, row.item)
+            children: row.group ? renderGroup(row, row.group) : renderItem(row, row.item)
           },
           row.key
         ))
       ] })
     }
   );
+  if (!legendApart) return chart;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 px-ds-2 py-ds-1.5", children: legend }),
+    chart
+  ] });
 }
 var DEFAULT_OFFSET2 = "var(--ds-space-4)";
 var LAUNCHER_SIZES = {
@@ -13053,6 +13268,7 @@ var PageContainer = forwardRef(function PageContainer2({
   className,
   renderHeader
 }, ref) {
+  if (REACT_VERSION_PROBLEM) throw new Error(REACT_VERSION_PROBLEM);
   const shell = useAppShell();
   const rootRef = useRef(null);
   const setRoot = useCallback((node) => {
@@ -16028,7 +16244,9 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 5e
 var ToastContext = createContext(null);
 function useToast() {
   const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  if (!ctx) {
+    throw new Error("useToast must be used within <ToastProvider>: the app shell's (get_app_shell writes it around AppShell). A page outside the shell (sign-in, a public page) shows its messages inline instead: an Alert above the form, and each field's error below the field.");
+  }
   return ctx;
 }
 function useToastOptional() {