gridsmith-ui 0.16.0 → 0.17.0

package/dist/index.js

@@ -1,8 +1,9 @@
-import { useAppShell, ControlSizeContext, Button, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-2U2X6E2X.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-2U2X6E2X.js';
+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 { 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-5XOJZQIP.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 { Link } from './chunk-XGSQOMEY.js';
 export { CodeBlock, Divider, Link } from './chunk-XGSQOMEY.js';
 import { Badge } from './chunk-PVTGMCVR.js';
@@ -18,7 +19,7 @@ import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, useId, memo, useEffect, Children, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, useId, memo, useEffect, useImperativeHandle, Children, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -1311,12 +1312,12 @@ function parseTypedDate(text, dayFirst = localeDayFirst()) {
   }
   return null;
 }
-function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range }) {
+function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2 }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const [hover, setHover] = useState(null);
-  const [viewDate, setViewDate] = useState(() => value ?? range?.start ?? range?.end ?? /* @__PURE__ */ new Date());
+  const [viewDate, setViewDate] = useState(() => value ?? range2?.start ?? range2?.end ?? /* @__PURE__ */ new Date());
   const triggerRef = useRef(null);
   const buttonRef = useRef(null);
   const panelRef = useRef(null);
@@ -1331,12 +1332,12 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const today = useMemo(() => /* @__PURE__ */ new Date(), []);
   const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
   const isDisabledDay = (d) => !!min && d < startOf(min) || !!max && d > startOf(max);
-  const [focusDate, setFocusDate] = useState(() => startOf(value ?? range?.start ?? range?.end ?? /* @__PURE__ */ new Date()));
+  const [focusDate, setFocusDate] = useState(() => startOf(value ?? range2?.start ?? range2?.end ?? /* @__PURE__ */ new Date()));
   const [prevOpen, setPrevOpen] = useState(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) {
-      const start = startOf(value ?? range?.start ?? range?.end ?? today);
+      const start = startOf(value ?? range2?.start ?? range2?.end ?? today);
       setFocusDate(start);
       setViewDate(new Date(start.getFullYear(), start.getMonth(), 1));
     }
@@ -1493,8 +1494,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     if (isDisabledDay(d)) return;
     choose(d);
   };
-  const rangeA = range?.start ?? null;
-  const rangeB = range?.end ?? null;
+  const rangeA = range2?.start ?? null;
+  const rangeB = range2?.end ?? null;
   const otherEnd = value ? rangeA && !isSameDay(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];
@@ -2182,12 +2183,12 @@ function fileFormat(file) {
 function matches(file, tokens) {
   if (tokens.length === 0 || tokens.some((t) => t.kind === "any")) return true;
   const name = file.name.toLowerCase();
-  const format = fileFormat(file);
+  const format2 = fileFormat(file);
   const type = file.type.toLowerCase();
   return tokens.some((t) => {
     if (t.kind === "family") return type === "" || type.startsWith(`${t.family}/`);
     if (t.kind !== "format") return false;
-    return t.name === format || t.suffix != null && name.endsWith(t.suffix) || t.mime != null && t.mime === type;
+    return t.name === format2 || t.suffix != null && name.endsWith(t.suffix) || t.mime != null && t.mime === type;
   });
 }
 var joinOr = (items) => items.length < 2 ? items.join("") : `${items.slice(0, -1).join(", ")} or ${items[items.length - 1]}`;
@@ -2199,9 +2200,9 @@ function typeWords(accept) {
   const tokens = parseAccept(accept);
   if (tokens.length === 0 || tokens.some((t) => t.kind === "any" || t.kind === "family" && !FAMILIES[t.family])) return null;
   const families = [...new Set(tokens.flatMap((t) => t.kind === "family" ? [t.family] : []))].map((f) => FAMILIES[f]);
-  const formats = [...new Set(tokens.flatMap((t) => t.kind === "format" ? [t.name] : []))];
-  const many = `${joinOr([...families.map((f) => f.many), ...formats])}${formats.length ? " files" : ""}`;
-  const one = families.length === 0 ? `${article(formats[0])} ${joinOr(formats)}` : joinOr([...families.map((f) => f.one), ...formats.map((f) => `${article(f)} ${f}`)]);
+  const formats2 = [...new Set(tokens.flatMap((t) => t.kind === "format" ? [t.name] : []))];
+  const many = `${joinOr([...families.map((f) => f.many), ...formats2])}${formats2.length ? " files" : ""}`;
+  const one = families.length === 0 ? `${article(formats2[0])} ${joinOr(formats2)}` : joinOr([...families.map((f) => f.one), ...formats2.map((f) => `${article(f)} ${f}`)]);
   return { one, many };
 }
 function sizeWords(bytes) {
@@ -9323,6 +9324,1231 @@ var StackedList = forwardRef(function StackedList2({
     }
   );
 });
+var TIME_ZOOMS = ["day", "week", "month", "quarter"];
+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 ms = ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1e3 + d.getMilliseconds();
+  return utcDay(d.getFullYear(), d.getMonth(), d.getDate()) + ms / DAY_MS;
+}
+function dayOf(value) {
+  if (value instanceof Date) return dayOfDate(value);
+  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])];
+  const day = utcDay(y, mo, d);
+  const back = new Date(day * DAY_MS);
+  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));
+}
+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;
+}
+var MINOR = { day: "day", week: "week", month: "month", quarter: "quarter" };
+var MAJOR = { day: "month", week: "month", month: "year", quarter: "year" };
+var weekday = (day) => (day % 7 + 7 + 4) % 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 y = u.getUTCFullYear();
+  const m = u.getUTCMonth();
+  if (unit === "month") return utcDay(y, m, 1);
+  if (unit === "quarter") return utcDay(y, m - m % 3, 1);
+  return utcDay(y, 0, 1);
+}
+function periodAfter(unit, start) {
+  if (unit === "day") return start + 1;
+  if (unit === "week") return start + 7;
+  const u = new Date(start * DAY_MS);
+  const y = u.getUTCFullYear();
+  const m = u.getUTCMonth();
+  if (unit === "month") return utcDay(y, m + 1, 1);
+  if (unit === "quarter") return utcDay(y, m + 3, 1);
+  return utcDay(y + 1, 0, 1);
+}
+var formats = /* @__PURE__ */ new Map();
+function formatter(locale, options) {
+  const key = `${locale ?? ""}|${JSON.stringify(options)}`;
+  let f = formats.get(key);
+  if (!f) {
+    f = new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" });
+    formats.set(key, f);
+  }
+  return f;
+}
+function format(day, locale, options) {
+  return formatter(locale, options).format(new Date(day * DAY_MS));
+}
+var pad22 = (n) => String(n).padStart(2, "0");
+function keyOf(unit, day) {
+  const u = new Date(day * DAY_MS);
+  const y = u.getUTCFullYear();
+  const m = u.getUTCMonth();
+  if (unit === "year") return String(y);
+  if (unit === "quarter") return `${y}-Q${Math.floor(m / 3) + 1}`;
+  if (unit === "month") return `${y}-${pad22(m + 1)}`;
+  return `${y}-${pad22(m + 1)}-${pad22(u.getUTCDate())}`;
+}
+function labelsOf(unit, role, day, locale) {
+  const f = (options) => format(day, locale, options);
+  let forms;
+  if (unit === "day") forms = [f({ weekday: "short", day: "numeric" }), f({ day: "numeric" })];
+  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 forms = [f({ year: "numeric" }), f({ year: "2-digit" })];
+  return [...new Set(forms)];
+}
+var DENSITY = { day: 56, week: 16, month: 4, quarter: 1.5 };
+var todays = /* @__PURE__ */ new WeakMap();
+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)) {
+    const from = Math.max(p, s.startDay);
+    const to = Math.min(periodAfter(unit, p), 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) });
+  }
+  return out;
+}
+function build(s) {
+  const { startDay, pxPerDay } = s;
+  const x = (value) => (startIndex(value) - startDay) * pxPerDay;
+  const inRange = (d) => d >= startDay && d < s.endDay;
+  const todayDay = Math.floor(s.todayValue);
+  const scale = {
+    zoom: s.zoom,
+    startDay,
+    endDay: s.endDay,
+    pxPerDay,
+    width: (s.endDay - startDay) * pxPerDay,
+    x,
+    span: (start, end = start) => {
+      const x0 = x(start);
+      return { x: x0, width: Math.max(0, (endIndex(end) - startDay) * pxPerDay - x0) };
+    },
+    dayAt: (px) => startDay + px / pxPerDay,
+    major: ticks(MAJOR[s.zoom], "major", s),
+    minor: ticks(MINOR[s.zoom], "minor", s),
+    today: inRange(todayDay) ? todayDay : null,
+    now: inRange(s.todayValue) ? s.todayValue : null,
+    weekStartsOn: s.weekStartsOn,
+    locale: s.locale
+  };
+  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);
+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;
+  const b = Number.isFinite(to) ? to : Math.floor(a) + 1;
+  const lo = Math.floor(Math.min(a, b));
+  const hi = Math.max(Math.ceil(Math.max(a, b)), lo + 1);
+  const unit = MINOR[zoom];
+  let startDay = periodStart(unit, lo, weekStartsOn);
+  let endDay = periodAfter(unit, periodStart(unit, hi - 1, weekStartsOn));
+  for (let i = 0; i < pad3; i++) {
+    startDay = periodStart(unit, startDay - 1, weekStartsOn);
+    endDay = periodAfter(unit, endDay);
+  }
+  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;
+  const unit = MINOR[scale.zoom];
+  const last = scale.startDay + Math.ceil(width / scale.pxPerDay) - 1;
+  const endDay = periodAfter(unit, periodStart(unit, last, scale.weekStartsOn));
+  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 });
+}
+function useTimeScale({ start, end, zoom, today, weekStartsOn = 1, locale, pxPerDay, pad: pad3 = 0 }) {
+  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 density = pxPerDay?.[zoom] ?? DENSITY[zoom];
+  return useMemo(() => scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, density, pad3), [from, to, zoom, todayValue, weekStartsOn, locale, density, pad3]);
+}
+function timeExtent(ranges) {
+  let start = Infinity;
+  let end = -Infinity;
+  for (const r of ranges) {
+    const s = dayOf(r.start);
+    const e = endDayOf(r.end ?? r.start);
+    if (Number.isFinite(s)) start = Math.min(start, s);
+    if (Number.isFinite(e)) end = Math.max(end, e);
+  }
+  return Number.isFinite(start) && Number.isFinite(end) ? { start, end: Math.max(start, end) } : { start: NaN, end: NaN };
+}
+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) {
+  if (typeof f.formatRangeToParts !== "function") return to === void 0 ? f.formatRange(a, b) : `${f.format(a)}${to}${f.format(b)}`;
+  const parts = f.formatRangeToParts(a, b);
+  const lastOfStart = parts.map((p) => p.source).lastIndexOf("startRange");
+  const firstOfEnd = parts.findIndex((p) => p.source === "endRange");
+  if (lastOfStart < 0 || firstOfEnd < 0) return f.format(a);
+  if (to === void 0) return parts.map((p) => p.value).join("");
+  let joined = false;
+  const out = parts.map((p, i) => {
+    if (joined || i <= lastOfStart || i >= firstOfEnd || !SEPARATOR.test(p.value)) return p.value;
+    joined = true;
+    return p.value.replace(SEPARATOR, 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);
+  if (!Number.isFinite(from) || !Number.isFinite(stop)) return "";
+  const timed = !wholeDay(start) || !wholeDay(end);
+  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 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));
+}
+function createScrollStore() {
+  let current = { scrollLeft: 0, visibleWidth: 0 };
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => current,
+    set(next) {
+      if (next.scrollLeft === current.scrollLeft && next.visibleWidth === current.visibleWidth) return;
+      current = next;
+      listeners.forEach((l) => l());
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+var TimeViewportCtx = createContext(null);
+var TimeViewportScrollCtx = createContext(null);
+var UNMEASURED = { scrollLeft: 0, visibleWidth: 0 };
+var noSubscription = () => () => {
+};
+var unmeasured = () => UNMEASURED;
+function useTimeViewportLayout() {
+  const layout = useContext(TimeViewportCtx);
+  if (!layout) throw new Error("A time-axis row or header must be inside a <TimeViewport>.");
+  return layout;
+}
+function useTimeViewport() {
+  const store = useContext(TimeViewportScrollCtx);
+  const scroll = useSyncExternalStore(store?.subscribe ?? noSubscription, store?.get ?? unmeasured, unmeasured);
+  return { ...useTimeViewportLayout(), ...scroll };
+}
+function fitLabels(boxes, measure, { gap = 8, align = "start", visible } = {}) {
+  const out = boxes.map((b) => ({ key: b.key, x: b.x, width: 0, text: null }));
+  const n = boxes.length;
+  const levels = boxes.reduce((most, b) => Math.max(most, b.labels.length), 0);
+  if (!n || !levels) return out;
+  const widths = /* @__PURE__ */ new Map();
+  const w = (text) => {
+    let v = widths.get(text);
+    if (v === void 0) {
+      v = Math.max(0, measure(text) || 0);
+      widths.set(text, v);
+    }
+    return v;
+  };
+  const order = boxes.map((_, i) => i).sort((a, b) => boxes[a].x - boxes[b].x || a - b);
+  const rowEnd = order.reduce((end, i) => Math.max(end, boxes[i].x + Math.max(0, boxes[i].width)), -Infinity);
+  const form = (b, level) => b.labels.length ? b.labels[Math.min(level, b.labels.length - 1)] : null;
+  for (let step = 1; step <= n; step++) {
+    const shown = [];
+    for (let k = 0; k < n; k += step) shown.push(order[k]);
+    const room = shown.map((i, s) => ({ start: boxes[i].x, end: s + 1 < shown.length ? boxes[shown[s + 1]].x : rowEnd }));
+    const fits = (s, text) => text === null || w(text) + gap <= room[s].end - room[s].start;
+    const decides = (s) => shown.length < 3 || s > 0 && s < shown.length - 1;
+    let level = -1;
+    for (let l = 0; l < levels && level < 0; l++) {
+      if (shown.every((i, s) => !decides(s) || fits(s, form(boxes[i], l)))) level = l;
+    }
+    if (level < 0) continue;
+    shown.forEach((i, s) => {
+      const b = boxes[i];
+      const lo = Math.max(room[s].start + gap / 2, visible ? visible.start + gap / 2 : -Infinity);
+      const hi = Math.min(room[s].end - gap / 2, visible ? visible.end - gap / 2 : Infinity);
+      let text = null;
+      for (let l = level; l < Math.max(level + 1, b.labels.length) && text === null; l++) {
+        const t = form(b, l);
+        if (t !== null && fits(s, t) && w(t) <= hi - lo) text = t;
+      }
+      if (text === null) return;
+      const tw = w(text);
+      const from = visible ? Math.max(b.x, visible.start) : b.x;
+      const to = Math.min(b.x + Math.max(0, b.width), visible ? visible.end : Infinity);
+      const x = align === "center" ? (from + to) / 2 - tw / 2 : lo;
+      out[i] = { key: b.key, x: Math.min(Math.max(x, lo), hi - tw), width: tw, text };
+    });
+    return out;
+  }
+  return out;
+}
+function fitLabel(labels, width, measure, { gap = 8 } = {}) {
+  return labels.find((text) => Math.max(0, measure(text) || 0) + gap <= width) ?? null;
+}
+var context;
+function canvasContext() {
+  if (context !== void 0) return context;
+  context = null;
+  if (typeof document === "undefined" || typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return context;
+  try {
+    context = document.createElement("canvas").getContext("2d");
+  } catch {
+    context = null;
+  }
+  return context;
+}
+function fontOf(el) {
+  const cs = getComputedStyle(el);
+  const size = parseFloat(cs.fontSize) || 12;
+  return { font: `${cs.fontStyle || "normal"} ${cs.fontWeight || "400"} ${size}px ${cs.fontFamily || "sans-serif"}`, size, letterSpacing: cs.letterSpacing || "normal" };
+}
+function measurer(info) {
+  const cache = /* @__PURE__ */ new Map();
+  return (text) => {
+    let v = cache.get(text);
+    if (v !== void 0) return v;
+    const ctx = info ? canvasContext() : null;
+    if (ctx && info) {
+      ctx.font = info.font;
+      if ("letterSpacing" in ctx) ctx.letterSpacing = info.letterSpacing === "normal" ? "0px" : info.letterSpacing;
+      v = ctx.measureText(text).width;
+    } else {
+      v = text.length * (info?.size ?? 12) * 0.6;
+    }
+    cache.set(text, v);
+    return v;
+  };
+}
+function useTextMeasure(ref) {
+  const [info, setInfo] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let live = true;
+    const read = (fresh) => {
+      if (!live) return;
+      const next = fontOf(el);
+      setInfo((cur) => !fresh && cur && cur.font === next.font && cur.letterSpacing === next.letterSpacing ? cur : next);
+    };
+    read(false);
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => read(false));
+    ro?.observe(el);
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    const loaded = () => read(true);
+    fonts?.addEventListener?.("loadingdone", loaded);
+    fonts?.ready?.then(loaded, () => {
+    });
+    return () => {
+      live = false;
+      ro?.disconnect();
+      fonts?.removeEventListener?.("loadingdone", loaded);
+    };
+  }, [ref]);
+  return useMemo(() => measurer(info), [info]);
+}
+var fontGeneration = 0;
+var fontListeners = /* @__PURE__ */ new Set();
+var fontsWatched = false;
+function watchFonts() {
+  if (fontsWatched || typeof document === "undefined" || !document.fonts) return;
+  fontsWatched = true;
+  const moveOn = () => {
+    fontGeneration++;
+    shared.clear();
+    fontListeners.forEach((l) => l());
+  };
+  document.fonts.addEventListener?.("loadingdone", moveOn);
+  document.fonts.ready?.then(moveOn, () => {
+  });
+}
+var shared = /* @__PURE__ */ new Map();
+function sharedMeasurer(info) {
+  const key = `${fontGeneration}|${info.font}|${info.letterSpacing}`;
+  let m = shared.get(key);
+  if (!m) {
+    m = measurer(info);
+    shared.set(key, m);
+  }
+  return m;
+}
+var textWatchers = /* @__PURE__ */ new Map();
+var textObserver = null;
+function watchText(el, onResize) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  textObserver ??= new ResizeObserver((entries) => entries.forEach((e) => textWatchers.get(e.target)?.()));
+  textWatchers.set(el, onResize);
+  textObserver.observe(el);
+  return () => {
+    textWatchers.delete(el);
+    textObserver?.unobserve(el);
+  };
+}
+var NO_BORDERS = { start: 0, end: 0 };
+function useElementMetrics(ref, deps, text) {
+  const [read, setRead] = useState({ info: null, borders: NO_BORDERS });
+  const [generation, setGeneration] = useState(fontGeneration);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const readNow = () => {
+      const cs = getComputedStyle(el);
+      const next = fontOf(el);
+      const start = parseFloat(cs.borderInlineStartWidth || cs.borderLeftWidth) || 0;
+      const end = parseFloat(cs.borderInlineEndWidth || cs.borderRightWidth) || 0;
+      setRead(
+        (cur) => cur.info?.font === next.font && cur.info.letterSpacing === next.letterSpacing && cur.borders.start === start && cur.borders.end === end ? cur : { info: next, borders: { start, end } }
+      );
+    };
+    readNow();
+    const watched = text?.current;
+    return watched ? watchText(watched, readNow) : void 0;
+  }, deps);
+  useLayoutEffect(() => {
+    watchFonts();
+    const listener = () => setGeneration(fontGeneration);
+    fontListeners.add(listener);
+    return () => {
+      fontListeners.delete(listener);
+    };
+  }, []);
+  const measure = useMemo(() => read.info ? sharedMeasurer(read.info) : measurer(null), [read.info, generation]);
+  return { measure, borders: read.borders };
+}
+function useFittedLabels(boxes, ref, options = {}) {
+  const measure = useTextMeasure(ref);
+  const { gap, align } = options;
+  const start = options.visible?.start;
+  const end = options.visible?.end;
+  return useMemo(
+    () => fitLabels(boxes, measure, { gap, align, visible: start === void 0 || end === void 0 ? void 0 : { start, end } }),
+    [boxes, measure, gap, align, start, end]
+  );
+}
+var TODAY_INSET = 4;
+var TODAY_PAD_X = 6;
+function TimeScaleHeader({ todayLabel = "Today", className }) {
+  const { scale, scrollLeft, visibleWidth, todayX: line } = useTimeViewport();
+  const majorRef = useRef(null);
+  const minorRef = useRef(null);
+  const todayRef = useRef(null);
+  const measured = visibleWidth > 0;
+  const view = { start: scrollLeft, end: scrollLeft + visibleWidth };
+  const major = useFittedLabels(scale.major, majorRef, measured ? { visible: view } : {});
+  const minor = useFittedLabels(scale.minor, minorRef, measured ? { align: "center", visible: view } : { align: "center" });
+  const measureToday = useTextMeasure(todayRef);
+  const todayWidth = measureToday(todayLabel) + TODAY_PAD_X * 2;
+  const todayShown = line !== null && (!measured || line >= view.start && line <= view.end);
+  let todayX = line === null ? 0 : line - todayWidth / 2;
+  if (measured) todayX = Math.max(view.start + TODAY_INSET, Math.min(todayX, view.end - TODAY_INSET - todayWidth));
+  const underToday = (x, width) => todayShown && x < todayX + todayWidth + TODAY_INSET && x + width > todayX - TODAY_INSET;
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", "data-time-scale": "", className: cn("relative select-none text-xs", className), style: { width: scale.width }, children: [
+    /* @__PURE__ */ jsxs("div", { "data-scale-row": "major", className: "relative h-7 font-medium text-[var(--ds-text-primary)]", children: [
+      /* @__PURE__ */ jsx("span", { ref: majorRef, className: "invisible absolute whitespace-nowrap leading-none", children: "0" }),
+      scale.major.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 } }, `line-${t.key}`)),
+      major.map((l) => l.text && /* @__PURE__ */ jsx("span", { "data-scale-label": "", className: "absolute top-1/2 -translate-y-1/2 whitespace-nowrap leading-none", style: { insetInlineStart: l.x }, children: l.text }, l.key))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "data-scale-row": "minor", className: "relative h-7 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] text-[var(--ds-text-secondary)]", children: [
+      /* @__PURE__ */ jsx("span", { ref: minorRef, className: "invisible absolute whitespace-nowrap leading-none tabular-nums", children: "0" }),
+      scale.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 } }, `line-${t.key}`)),
+      minor.map((l) => l.text && !underToday(l.x, l.width) && /* @__PURE__ */ jsx("span", { "data-scale-label": "", className: "absolute top-1/2 -translate-y-1/2 whitespace-nowrap leading-none tabular-nums", style: { insetInlineStart: l.x }, children: l.text }, l.key)),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: todayRef,
+          "data-scale-today": "",
+          className: cn(
+            "absolute top-1/2 -translate-y-1/2 whitespace-nowrap leading-none font-medium",
+            // the transparent border draws the pill's outline in forced-colours mode
+            "rounded-[var(--ds-radius-full)] py-ds-0.5 border-[length:1px] border-transparent bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+            !todayShown && "invisible"
+          ),
+          style: { insetInlineStart: todayX, paddingInline: TODAY_PAD_X },
+          children: todayLabel
+        }
+      )
+    ] })
+  ] });
+}
+var ZOOM_NAMES = { day: "Days", week: "Weeks", month: "Months", quarter: "Quarters" };
+var SHADE_MIN = 4;
+var INSET = 8;
+var MIN_INSET = 2;
+var MIN_TITLE = 2 * INSET + 12;
+var PHONE_BELOW = 640;
+var MIN_LABEL = 112;
+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));
+}
+var TimeViewport = forwardRef(function TimeViewport2({
+  scale,
+  onZoomChange,
+  zooms = TIME_ZOOMS,
+  labelWidth: labelWidthProp = 240,
+  labelHeader,
+  header,
+  toolbar,
+  initialDate,
+  showToday = true,
+  todayAt = "day",
+  shadeDays,
+  tabStop = true,
+  children,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const scrollerRef = useRef(null);
+  const headerRef = useRef(null);
+  const [frame, setFrame] = useState({ width: 0, header: 0 });
+  useLayoutEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const read = () => {
+      const width = el.clientWidth;
+      const headerHeight = headerRef.current?.offsetHeight ?? 0;
+      setFrame((cur) => cur.width === width && cur.header === headerHeight ? cur : { width, header: headerHeight });
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(read);
+    ro.observe(el);
+    if (headerRef.current) ro.observe(headerRef.current);
+    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 [store] = useState(createScrollStore);
+  const lastLeft = useRef(0);
+  const latest = useLatest({ drawn, visibleWidth, labelWidth, 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 });
+  }, [store, latest]);
+  const api = useMemo(() => {
+    const ensureVisible = (x0, x1) => {
+      const el = scrollerRef.current;
+      if (!el) return;
+      const vw = latest.current.visibleWidth;
+      const left = el.scrollLeft;
+      const lo = Math.min(x0, x1);
+      const hi = Math.max(x0, x1);
+      if (hi - lo > vw - 2 * MARGIN) {
+        if (hi < left + MARGIN || lo > left + vw - MARGIN) setLeft(lo - MARGIN);
+      } else if (lo < left + MARGIN) setLeft(lo - MARGIN);
+      else if (hi > left + vw - MARGIN) setLeft(hi - vw + MARGIN);
+    };
+    return {
+      scrollToDate(value, align = "start") {
+        const { drawn: s, visibleWidth: vw } = latest.current;
+        const x = s.x(value);
+        setLeft(align === "center" ? x - vw / 2 : x - MARGIN);
+      },
+      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);
+      },
+      ensureVisible,
+      reveal(target) {
+        const el = scrollerRef.current;
+        if (!el || !el.contains(target)) return;
+        const { labelWidth: lw, headerHeight } = latest.current;
+        const box = el.getBoundingClientRect();
+        const r = target.getBoundingClientRect();
+        const top = box.top + headerHeight;
+        const bottom = box.top + el.clientHeight;
+        if (r.top < top) el.scrollTop -= top - r.top;
+        else if (r.bottom > bottom) el.scrollTop += Math.min(r.bottom - bottom, r.top - top);
+        const x0 = r.left - box.left - lw + el.scrollLeft;
+        ensureVisible(x0, x0 + r.width);
+      }
+    };
+  }, [latest, setLeft]);
+  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 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 prev = applied.current;
+    applied.current = { startDay: drawn.startDay, pxPerDay: drawn.pxPerDay, visibleWidth };
+    if (!prev) {
+      const at = initialDate !== void 0 ? drawn.x(initialDate) : todayAtX;
+      if (at !== null && Number.isFinite(at)) setLeft(at - visibleWidth / 2);
+      return;
+    }
+    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);
+    const focused = document.activeElement;
+    if (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) {
+    for (let d = drawn.startDay; d < drawn.endDay; d++) {
+      if (!shadeDays(calendarDay(d))) continue;
+      const last = shaded[shaded.length - 1];
+      if (last && Math.abs(last.x + last.width - drawn.x(d)) < 0.5) last.width += drawn.pxPerDay;
+      else shaded.push({ key: String(d), x: drawn.x(d), width: drawn.pxPerDay });
+    }
+  }
+  const levels = TIME_ZOOMS.filter((z) => zooms.includes(z));
+  const zoomTo = (direction) => {
+    if (!onZoomChange) return null;
+    const at = TIME_ZOOMS.indexOf(scale.zoom);
+    const side = levels.filter((z) => direction < 0 ? TIME_ZOOMS.indexOf(z) < at : TIME_ZOOMS.indexOf(z) > at);
+    return (direction < 0 ? side[side.length - 1] : side[0]) ?? null;
+  };
+  const focusedAt = (el) => {
+    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;
+    return x >= 0 && x <= visibleWidth ? x : void 0;
+  };
+  const zoom = (direction, at) => {
+    const next = zoomTo(direction);
+    if (!next || !onZoomChange) return false;
+    const el = scrollerRef.current;
+    if (el && visibleWidth > 0) {
+      const x = at ?? focusedAt(el) ?? visibleWidth / 2;
+      pending.current = { zoom: next, day: drawn.dayAt(el.scrollLeft + x), at: x };
+    }
+    onZoomChange(next);
+    return true;
+  };
+  const canZoomIn = zoomTo(-1) !== null;
+  const canZoomOut = zoomTo(1) !== null;
+  const panByPeriod = (direction) => {
+    const left = scrollerRef.current?.scrollLeft ?? 0;
+    const xs = drawn.minor.map((t) => t.x);
+    const target = direction > 0 ? xs.find((x) => x > left + 1) ?? drawn.width : [...xs].reverse().find((x) => x < left - 1) ?? 0;
+    setLeft(target);
+  };
+  const onKeyDown = (e) => {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    if (e.target instanceof HTMLElement && e.target.closest(FIELD)) return;
+    if (e.key === "+" || e.key === "=") {
+      if (zoom(-1)) e.preventDefault();
+    } else if (e.key === "-" || e.key === "\u2212") {
+      if (zoom(1)) e.preventDefault();
+    } else if (e.shiftKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      e.preventDefault();
+      panByPeriod(e.key === "ArrowRight" ? 1 : -1);
+    }
+  };
+  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;
+    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;
+    zoom(w.sum < 0 ? -1 : 1, x >= 0 && x <= visibleWidth ? x : void 0);
+    wheel.current = { sum: 0, at: e.timeStamp };
+  });
+  useEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const listener = (e) => onWheel.current(e);
+    el.addEventListener("wheel", listener, { passive: false });
+    return () => el.removeEventListener("wheel", listener);
+  }, [onWheel]);
+  const drag = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const onScaleDown = (e) => {
+    if (e.button !== 0 || e.pointerType === "touch" || !scrollerRef.current) return;
+    drag.current = { id: e.pointerId, x: e.clientX, left: scrollerRef.current.scrollLeft };
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    setDragging(true);
+  };
+  const onScaleMove = (e) => {
+    const d = drag.current;
+    if (d && d.id === e.pointerId) setLeft(d.left - (e.clientX - d.x));
+  };
+  const onScaleUp = (e) => {
+    if (drag.current?.id !== e.pointerId) return;
+    drag.current = null;
+    setDragging(false);
+  };
+  const onScroll = () => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    lastLeft.current = el.scrollLeft;
+    writeScroll(el, visibleWidth);
+    store.set({ scrollLeft: el.scrollLeft, visibleWidth });
+  };
+  const headerNode = header === void 0 ? /* @__PURE__ */ jsx(TimeScaleHeader, {}) : header;
+  const hasHeader = headerNode != null || labelHeader != null;
+  const bar = toolbar === false ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-wrap items-center gap-ds-1 px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)]", border), children: [
+    onZoomChange && levels.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "min-w-[4.5rem] text-center text-xs text-[var(--ds-text-secondary)]", children: ZOOM_NAMES[scale.zoom] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
+      if (todayAtX !== null) setLeft(todayAtX - visibleWidth / 2);
+    }, children: "Today" }),
+    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
+    toolbar
+  ] });
+  return (
+    // Inline-size containment: the rows' width never widens the frame (in a grid or flex parent it would, and the
+    // wider frame would extend the scale again). The viewport takes the width it is given and scrolls inside it.
+    /* @__PURE__ */ jsx("div", { "data-time-viewport": "", "data-compact": phone || void 0, className: cn("flex h-full min-h-0 w-full min-w-0 flex-col [contain:inline-size] bg-[var(--ds-bg-surface)]", className), onKeyDown, children: /* @__PURE__ */ jsx(TimeViewportCtx, { value: layout, children: /* @__PURE__ */ jsxs(TimeViewportScrollCtx, { value: store, children: [
+      bar,
+      /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollerRef,
+            role: "region",
+            "aria-label": ariaLabel,
+            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: [
+              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 },
+                    children: labelHeader
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-time-scale-area": "",
+                    className: cn("shrink-0 select-none", dragging ? "cursor-grabbing" : "cursor-grab"),
+                    style: { width: drawn.width },
+                    onPointerDown: onScaleDown,
+                    onPointerMove: onScaleMove,
+                    onPointerUp: onScaleUp,
+                    onPointerCancel: onScaleUp,
+                    children: headerNode
+                  }
+                )
+              ] }),
+              /* @__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: [
+                  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", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 peer-focus-visible:shadow-[inset_0_0_0_2px_var(--ds-border-focus)]" })
+      ] })
+    ] }) }) })
+  );
+});
+function TimeRow({ label, children, height = ROW_HEIGHT, labelClassName, className, style, ...props }) {
+  const { scale, labelWidth } = useTimeViewportLayout();
+  return /* @__PURE__ */ jsxs("div", { ...props, className: cn("flex shrink-0", className), style: { height, ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("sticky start-0 z-[2] flex shrink-0 items-center px-ds-3 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)] border-b-[length:var(--ds-border-width)] text-sm text-[var(--ds-text-primary)]", border, labelClassName),
+        style: { width: labelWidth },
+        children: /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate", children: label })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn("relative shrink-0 border-b-[length:var(--ds-border-width)]", border), style: { width: scale.width }, children })
+  ] });
+}
+function TimeBar({ start, end, minWidth = 0, labels, children, className, style, ...props }) {
+  const { scale, labelWidth } = useTimeViewportLayout();
+  const barRef = useRef(null);
+  const textRef = useRef(null);
+  const hasLabels = !!labels?.length;
+  const { measure, borders } = useElementMetrics(barRef, [className, hasLabels], textRef);
+  const { x, width } = scale.span(start, end ?? start);
+  const drawnWidth = Math.max(width, minWidth);
+  const inView = `(min(${x + drawnWidth - borders.end}, var(--time-view-end, 1e9)) - max(${x + borders.start}, var(--time-scroll, 0)))`;
+  const sticky = { insetInlineStart: labelWidth, maxWidth: `min(100%, calc(${inView} * 1px))` };
+  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 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;
+    label = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "data-time-bar-label": "", "aria-hidden": "true", className: "sticky grid overflow-hidden whitespace-nowrap", style: { ...sticky, paddingInline: inset }, children: labels.map((text, i) => /* @__PURE__ */ jsx("span", { ref: i === 0 ? textRef : void 0, "data-time-bar-form": "", className: "justify-self-start [grid-area:1/1]", style: { opacity: shows(i) }, children: text }, i)) }),
+      !named && /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels[0] })
+    ] });
+  } else if (children != null && children !== false) {
+    label = /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-time-bar-label": "",
+        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)` },
+        children: typeof children === "string" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...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),
+      style: { insetInlineStart: x, width: drawnWidth, ...style },
+      children: label
+    }
+  );
+}
+
+// ../../showcase/src/lib/gantt-layout.ts
+var ROW_HEIGHT2 = 40;
+var BAR_HEIGHT = 24;
+var MIN_BAR = 6;
+var DIAMOND = 12;
+var TIP = DIAMOND * Math.SQRT2 / 2;
+var STUB = 8;
+var HEAD = 6;
+var BESIDE = STUB + 6;
+var groupKey = (id) => `group:${id}`;
+var itemKey = (id) => `item:${id}`;
+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]);
+  }
+  const shown = groups.filter((g) => byGroup.has(g.id));
+  const topLevel = shown.length + loose.length;
+  const rows = [];
+  const push = (row) => rows.push({ ...row, index: rows.length, top: rows.length * ROW_HEIGHT2 });
+  let pos = 0;
+  for (const group of shown) {
+    const children = byGroup.get(group.id);
+    const key = groupKey(group.id);
+    push({ key, kind: "group", level: 1, setSize: topLevel, posInSet: ++pos, group, children });
+    if (collapsed.has(group.id)) continue;
+    children.forEach((item, i) => push({ key: itemKey(item.id), kind: "item", level: 2, setSize: children.length, posInSet: i + 1, parentKey: key, item }));
+  }
+  for (const item of loose) push({ key: itemKey(item.id), kind: "item", level: 1, setSize: topLevel, posInSet: ++pos, item });
+  return rows;
+}
+function itemShape(item, scale) {
+  if (item.milestone) {
+    const centre = scale.x((dayOf(item.start) + endDayOf(item.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 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 })));
+}
+var drawable = (shape) => !!shape && Number.isFinite(shape.x0) && Number.isFinite(shape.x1);
+function ganttArrows(items, rows, shapeOf, collapsed) {
+  const rowOf = /* @__PURE__ */ new Map();
+  const groupRow = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    if (row.item) rowOf.set(row.item.id, row);
+    if (row.group) groupRow.set(row.group.id, row);
+  }
+  const drawnRow = (item) => rowOf.get(item.id) ?? (item.group !== void 0 && collapsed.has(item.group) ? groupRow.get(item.group) : void 0);
+  const byId = new Map(items.map((i) => [i.id, i]));
+  const arrows = [];
+  for (const succ of items) {
+    for (const id of new Set(succ.dependsOn ?? [])) {
+      const pred = byId.get(id);
+      if (!pred || pred === succ) continue;
+      const from = drawnRow(pred);
+      const to = drawnRow(succ);
+      const a = shapeOf(pred);
+      const b = shapeOf(succ);
+      if (!from || !to || from === to || !drawable(a) || !drawable(b)) continue;
+      const x1 = a.out;
+      const y1 = from.top + ROW_HEIGHT2 / 2;
+      const x2 = b.in;
+      const y2 = to.top + ROW_HEIGHT2 / 2;
+      const routed = x2 < x1 + STUB + HEAD;
+      const edge = y2 > y1 ? from.top + ROW_HEIGHT2 : from.top;
+      const d = routed ? `M${x1} ${y1}H${x1 + STUB}V${edge}H${x2 - STUB - HEAD}V${y2}H${x2}` : `M${x1} ${y1}H${x1 + STUB}V${y2}H${x2}`;
+      const head = `M${x2} ${y2}L${x2 - HEAD} ${y2 - HEAD / 2}L${x2 - HEAD} ${y2 + HEAD / 2}Z`;
+      arrows.push({ key: `${pred.id}>${succ.id}`, from: pred.id, to: succ.id, d, head, routed, x1, y1, x2, y2 });
+    }
+  }
+  return arrows;
+}
+function labelPlace(shape, textWidth, scaleWidth, { pad: pad3 = 8, gap = BESIDE } = {}) {
+  if (shape.kind === "bar" && textWidth + 2 * pad3 <= shape.x1 - shape.x0) return "inside";
+  if (shape.x1 + gap + textWidth <= scaleWidth) return "after";
+  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)]" },
+  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)]" }
+};
+var ICON = 12;
+var ICON_GAP = 4;
+var LEVEL_INDENT = 16;
+var TARGET = 24;
+var KNOCKOUT = 2;
+var SELECTED = "outline-solid outline-2 outline-offset-2 outline-[var(--ds-text-primary)]";
+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: [
+    /* @__PURE__ */ jsx("path", { d: a.d, fill: "none", stroke: "currentColor", strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsx("path", { d: a.head, fill: "currentColor" })
+  ] }, a.key)) });
+}
+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 }) }),
+      s.label
+    ] }, key);
+  }) });
+}
+function Gantt({
+  items,
+  groups = [],
+  selectedId,
+  onSelect,
+  statuses = {},
+  zoom: zoomProp,
+  defaultZoom = "week",
+  onZoomChange,
+  today,
+  weekStartsOn,
+  locale,
+  renderLabel,
+  labelHeader = "Task",
+  toolbar,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const [zoomState, setZoomState] = useState(defaultZoom);
+  const zoom = zoomProp ?? zoomState;
+  const changeZoom = (next) => {
+    if (zoomProp === void 0) setZoomState(next);
+    onZoomChange?.(next);
+  };
+  const [selectedState, setSelectedState] = useState(null);
+  const selected = selectedId !== void 0 ? selectedId : selectedState;
+  const select = (item) => {
+    if (selectedId === void 0) 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 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 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 list = new Intl.ListFormat(locale, { type: "conjunction" });
+    const out = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      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 }),
+        status?.label ?? null,
+        after.length ? `after ${list.format(after)}` : null
+      ].filter((part) => part).join(", "));
+    }
+    for (const row of rows) {
+      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(", "));
+    }
+    return out;
+  }, [items, rows, extents, statuses, locale]);
+  const probeRef = useRef(null);
+  const measure = useTextMeasure(probeRef);
+  const treeRef = useRef(null);
+  const viewportRef = useRef(null);
+  const [activeState, setActive] = useState(null);
+  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 activate = (row) => {
+    if (row.group) toggle(row.group.id);
+    else if (row.item) select(row.item);
+  };
+  const grid = useGridKeyboard({
+    container: treeRef,
+    active,
+    setActive,
+    keyOf: (key) => key,
+    move: (from, e) => {
+      if (e.shiftKey) return null;
+      const row = byKey.get(from);
+      if (!row) return null;
+      const next = rows[row.index + 1];
+      switch (e.key) {
+        case "ArrowDown":
+          return next?.key ?? from;
+        case "ArrowUp":
+          return rows[row.index - 1]?.key ?? from;
+        case "Home":
+          return rows[0].key;
+        case "End":
+          return rows[rows.length - 1].key;
+        case "ArrowRight":
+          if (!row.group) return from;
+          if (collapsed.has(row.group.id)) {
+            toggle(row.group.id);
+            return from;
+          }
+          return next?.parentKey === row.key ? next.key : from;
+        case "ArrowLeft":
+          if (row.group) {
+            if (!collapsed.has(row.group.id)) toggle(row.group.id);
+            return from;
+          }
+          return row.parentKey ?? from;
+        default:
+          return null;
+      }
+    },
+    onActivate: (key) => {
+      const row = byKey.get(key);
+      if (row) activate(row);
+    },
+    typeahead: { items: rows.map((r) => r.key), labelOf: (key) => byKey.get(key)?.item?.title ?? byKey.get(key)?.group?.title ?? "" },
+    scrollIntoView: (_key, el) => viewportRef.current?.reveal(el)
+  });
+  const onKeyDown = (e) => {
+    if (e.key === "Escape" && selected !== null && !e.defaultPrevented && !e.altKey && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      select(null);
+      return;
+    }
+    grid.onKeyDown(e);
+  };
+  const onRowClick = (row) => {
+    if (row.item) select(row.item.id === selected ? null : row.item);
+    else if (row.group) toggle(row.group.id);
+    setActive(row.key);
+    grid.focus(row.key);
+  };
+  const treeitem = (row) => ({
+    role: "treeitem",
+    "aria-level": row.level,
+    "aria-setsize": row.setSize,
+    "aria-posinset": row.posInSet,
+    "aria-label": names.get(row.key),
+    "data-grid-key": row.key,
+    tabIndex: grid.tabIndexOf(row.key),
+    onFocus: () => setActive(row.key)
+  });
+  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 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 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,
+      /* @__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 } }) }) : (
+      // TimeBar keeps the title in view beside the pinned column while the bar's start is scrolled away
+      /* @__PURE__ */ jsx(
+        TimeBar,
+        {
+          ...treeitem(row),
+          "aria-selected": isSelected,
+          "data-gantt-shape": "bar",
+          "data-item": item.id,
+          start: item.start,
+          end: item.end ?? item.start,
+          minWidth: MIN_BAR,
+          className: cn("cursor-pointer text-xs font-medium", 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 })
+        }
+      )
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      shapeBox,
+      place !== "inside" && // Beside the bar, past the turn an arrow makes; its own background keeps lines that cross the row off the
+      // text. Once it is partly under the pinned column or past the view's end it is hidden, never a fragment.
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-surface)] text-xs font-medium leading-4 text-[var(--ds-text-primary)]",
+          style: { insetInlineStart: beside, paddingInline: KNOCKOUT, opacity: `clamp(0, calc(min(${beside} - var(--time-scroll, 0), var(--time-view-end, 1e9) - ${beside + textWidth}) * 1000), 1)` },
+          children: title
+        }
+      )
+    ] });
+  };
+  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 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: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: cn("shrink-0 transition-transform", !collapsed.has(row.group.id) && "rotate-90") }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: row.group.title })
+      ] });
+    }
+    const item = row.item;
+    return (
+      // a container, so what renderLabel adds gives way to the title when the column is narrow (a phone)
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "@container flex min-w-0 items-center gap-ds-2", style: { paddingInlineStart: row.level === 2 ? LEVEL_INDENT : 0 }, children: [
+        item.milestone && /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rotate-45 rounded-[1px] bg-[var(--ds-text-secondary)]" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.title }),
+        renderLabel && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center @max-[10rem]:hidden", children: renderLabel(item) })
+      ] })
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    TimeViewport,
+    {
+      ref: viewportRef,
+      scale,
+      onZoomChange: changeZoom,
+      labelHeader,
+      toolbar: toolbar === false ? false : /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar,
+        /* @__PURE__ */ jsx(Legend, { statuses })
+      ] }),
+      tabStop: false,
+      "aria-label": ariaLabel,
+      className,
+      children: /* @__PURE__ */ jsxs("div", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: "relative", onKeyDown, 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,
+            label: label(row),
+            className: "cursor-pointer",
+            labelClassName: cn(
+              row.group && "bg-[image:linear-gradient(var(--ds-bg-muted),var(--ds-bg-muted))]",
+              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)
+          },
+          row.key
+        ))
+      ] })
+    }
+  );
+}
 var DEFAULT_OFFSET2 = "var(--ds-space-4)";
 var LAUNCHER_SIZES = {
   md: "var(--ds-space-10)",
@@ -14935,7 +16161,7 @@ function usePagination(list, options = {}) {
   const grows = style !== "pagination";
   const start = grows ? 0 : (current - 1) * pageSize;
   const items = list.slice(start, current * pageSize);
-  const range = items.length === 0 ? [0, 0] : [start + 1, start + items.length];
+  const range2 = items.length === 0 ? [0, 0] : [start + 1, start + items.length];
   const hasMore = current < totalPages;
   const setPage = (next) => setPageState(Math.min(Math.max(1, Math.floor(next)), totalPages));
   const loadMore = () => setPageState((p) => Math.min(p + 1, totalPages));
@@ -14950,7 +16176,7 @@ function usePagination(list, options = {}) {
     pageSize,
     totalItems,
     totalPages,
-    range,
+    range: range2,
     shown: items.length,
     hasMore,
     loadMore,
@@ -15167,6 +16393,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useContentWidth, useDestructiveAction, useFormContext, usePagination, useSidebar, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, Gantt, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map