gridsmith-ui 0.15.0 → 0.17.0

package/dist/index.js

@@ -1,25 +1,26 @@
-import { useAppShell, ControlSizeContext, Button, Spinner, OverlayCloseCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-ATONRIEB.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-ATONRIEB.js';
-import { Skeleton } from './chunk-M3AARGLI.js';
-export { Skeleton } from './chunk-M3AARGLI.js';
-import { usePopupFocus, focusInitial, focusAfterRemoval, useOverlayLayer, rovingTabStop, useGridKeyboard, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap, useFocusBeforeOpen, rememberFocus, useReturnFocus } from './chunk-VFAKME7Q.js';
-import { Link } from './chunk-LU3YRNES.js';
-export { CodeBlock, Divider, Link } from './chunk-LU3YRNES.js';
-import { Badge } from './chunk-XCSTU6IJ.js';
-export { Badge } from './chunk-XCSTU6IJ.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-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';
+export { Badge } from './chunk-PVTGMCVR.js';
 import { inferColumnKinds, CardValue } from './chunk-OENJCGTJ.js';
 import { SplitPaneCtx, useShellPreferences, TableCardCtx, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-TKVTZWBN.js';
 export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-TKVTZWBN.js';
-import { useBreakpoint } from './chunk-CRQ6KCRD.js';
+import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { useTextOverflow, Tooltip, usePosition } from './chunk-EMCSARQO.js';
 export { Tooltip, useTextOverflow } from './chunk-EMCSARQO.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-X4CNZFWC.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useState, useContext, memo, useEffect, useRef, useCallback, useLayoutEffect, Children, useMemo, useId, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
+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, 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';
 
 function isDivider(entry) {
@@ -44,10 +45,10 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const target = e.target;
@@ -523,7 +524,7 @@ function Dropdown({
       const els = optionButtons();
       const current = els.findIndex((el) => el === document.activeElement);
       if (e.key === "Escape") {
-        if (!isTopLayer()) return;
+        if (e.defaultPrevented || !isTopLayer()) return;
         e.preventDefault();
         returnFocus();
         setOpen(false);
@@ -585,14 +586,14 @@ function Dropdown({
   };
   const chipsRef = useRef(null);
   const pendingChipFocus = useRef(null);
-  const chipCount = selectedValues.length;
   useLayoutEffect(() => {
-    const index = pendingChipFocus.current;
-    if (index === null) return;
+    const pending = pendingChipFocus.current;
+    if (pending === null) return;
     pendingChipFocus.current = null;
+    if (selectedValues.includes(pending.value)) return;
     const chips = Array.from(chipsRef.current?.querySelectorAll("[data-chip-remove]") ?? []);
-    focusAfterRemoval(chips, index, triggerRef.current);
-  }, [chipCount]);
+    focusAfterRemoval(chips, pending.index, triggerRef.current);
+  });
   const displayLabel = multiple ? selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder : options.find((o) => o.id === selectedValues[0])?.label ?? placeholder;
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1, content: displayLabel });
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
@@ -705,7 +706,7 @@ function Dropdown({
               {
                 "data-chip-remove": "",
                 onClick: () => {
-                  pendingChipFocus.current = i;
+                  pendingChipFocus.current = { index: i, value: v };
                   handleSelect(v);
                 },
                 className: "hover:text-[var(--ds-text-primary)] cursor-pointer",
@@ -845,9 +846,14 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
       } else if (e.key === "Enter" && open && filtered[highlightIdx]) {
         e.preventDefault();
         handleSelect(filtered[highlightIdx].value);
-      } else if (e.key === "Tab" && open && moved && filtered[highlightIdx]) {
-        onChange(filtered[highlightIdx].value);
-      } else if (e.key === "Escape") {
+      } else if (e.key === "Tab" && open) {
+        if (moved && filtered[highlightIdx]) onChange(filtered[highlightIdx].value);
+        flushSync(() => {
+          setOpen(false);
+          setQuery("");
+        });
+      } else if (e.key === "Escape" && open) {
+        e.preventDefault();
         setOpen(false);
         setQuery("");
       }
@@ -1306,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);
@@ -1326,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));
     }
@@ -1362,8 +1368,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
     const raf = requestAnimationFrame(() => focusActiveDay.current());
     return () => cancelAnimationFrame(raf);
   }, [open, focusActiveDay]);
-  const closeAndRefocus = () => {
+  const choose = (d) => {
     returnFocus();
+    onChange(d);
     setOpen(false);
   };
   const dayFirst = useMemo(() => localeDayFirst(), []);
@@ -1388,10 +1395,10 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
       setOpen(false);
     };
     const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", keyHandler);
@@ -1485,11 +1492,10 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const selectDay = (day) => {
     const d = new Date(year, month, day);
     if (isDisabledDay(d)) return;
-    onChange(d);
-    closeAndRefocus();
+    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];
@@ -1676,8 +1682,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                       onClick: () => {
                         const now = /* @__PURE__ */ new Date();
                         setViewDate(now);
-                        onChange(now);
-                        closeAndRefocus();
+                        choose(now);
                       },
                       children: "Today"
                     }
@@ -1687,10 +1692,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
                     {
                       variant: "ghost",
                       size: "sm",
-                      onClick: () => {
-                        onChange(null);
-                        closeAndRefocus();
-                      },
+                      onClick: () => choose(null),
                       children: "Clear"
                     }
                   )
@@ -1962,6 +1964,10 @@ function DateRangePicker({
     keyOf: dayKey,
     move: (from, e) => moveDay(from, e.key, e.shiftKey, weekStartsOn)
   });
+  const pageMonths = (n) => {
+    setViewDate(addMonths(viewDate, n));
+    setFocusDate(addMonthsClamped(focusDate, n));
+  };
   const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
   const focusActiveDay = useLatest(grid.focusActive);
   useEffect(() => {
@@ -1977,10 +1983,10 @@ function DateRangePicker({
       setOpen(false);
     };
     const onKey = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", onMouse);
     document.addEventListener("keydown", onKey);
@@ -2071,7 +2077,7 @@ function DateRangePicker({
             }, children: p.label }, p.label)) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-tr-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setViewDate(addMonths(viewDate, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
                 /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: [
                   MONTHS2[months[0].getMonth()],
                   " ",
@@ -2081,7 +2087,7 @@ function DateRangePicker({
                   " ",
                   months[1].getFullYear()
                 ] }),
-                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setViewDate(addMonths(viewDate, 1)), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
               ] }),
               /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": `${MONTHS2[m.getMonth()]} ${m.getFullYear()}`, className: "w-[224px] flex flex-col gap-ds-0.5", children: [
                 /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { role: "columnheader", className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, d)) }),
@@ -2135,6 +2141,96 @@ function DateRangePicker({
     )
   ] });
 }
+
+// ../../showcase/src/lib/file-accept.ts
+var MIME_NAMES = {
+  "text/plain": "TXT",
+  "audio/mpeg": "MP3",
+  "video/quicktime": "MOV",
+  "application/msword": "DOC",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.ms-powerpoint": "PPT",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX"
+};
+var EXT_NAMES = { jpeg: "JPG", tif: "TIFF", htm: "HTML", yml: "YAML" };
+var FAMILIES = {
+  image: { one: "an image", many: "images" },
+  video: { one: "a video", many: "videos" },
+  audio: { one: "an audio file", many: "audio files" },
+  text: { one: "a text file", many: "text files" }
+};
+var READ_AS_WORD = /* @__PURE__ */ new Set(["FLAC", "HEIC", "HEIF", "LOG", "MIDI", "MOV", "RAR", "RAW"]);
+var extName = (ext) => EXT_NAMES[ext] ?? ext.toUpperCase();
+function mimeName(mime) {
+  if (MIME_NAMES[mime]) return MIME_NAMES[mime];
+  const subtype = mime.slice(mime.indexOf("/") + 1).replace(/\+.*$/, "").replace(/^(?:x-|vnd\.)/, "");
+  return extName(subtype.slice(subtype.lastIndexOf(".") + 1));
+}
+function parseAccept(accept) {
+  return (accept ?? "").split(",").map((t) => t.trim().toLowerCase()).filter(Boolean).map((t) => {
+    if (t === "*" || t === "*/*") return { kind: "any" };
+    if (t.startsWith(".")) return { kind: "format", name: extName(t.slice(1)), suffix: t };
+    if (t.endsWith("/*")) return { kind: "family", family: t.slice(0, -2) };
+    return { kind: "format", name: mimeName(t), mime: t };
+  });
+}
+function fileFormat(file) {
+  const dot = file.name.lastIndexOf(".");
+  return dot > 0 ? extName(file.name.slice(dot + 1).toLowerCase()) : null;
+}
+function matches(file, tokens) {
+  if (tokens.length === 0 || tokens.some((t) => t.kind === "any")) return true;
+  const name = file.name.toLowerCase();
+  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 === 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]}`;
+var article = (name) => {
+  const asWord = name.replace(/[^A-Z]/g, "").length >= 5 || READ_AS_WORD.has(name);
+  return (asWord ? /^[AEIOU]/ : /^[AEFHILMNORSX]/).test(name) ? "an" : "a";
+};
+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 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) {
+  const units = [["GB", 1024 ** 3], ["MB", 1024 ** 2], ["KB", 1024]];
+  for (const [unit, size] of units) if (bytes >= size) return `${Math.round(bytes / size * 10) / 10} ${unit}`;
+  return `${bytes} bytes`;
+}
+var capitalise = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+function fileConstraints(accept, maxSize, multiple) {
+  const types = typeWords(accept)?.many;
+  const size = maxSize != null ? `up to ${sizeWords(maxSize)}${multiple ? " each" : ""}` : null;
+  const line = [types, size].filter(Boolean).join(" ");
+  return line ? capitalise(line) : null;
+}
+function checkFiles(files, { accept, maxSize, multiple }) {
+  if (!multiple && files.length > 1) return { accepted: [], message: "You can only select one file" };
+  const tokens = parseAccept(accept);
+  const types = typeWords(accept);
+  const accepted = [];
+  const reasons = [];
+  for (const file of files) {
+    const subject = multiple ? file.name : "The selected file";
+    if (!matches(file, tokens)) reasons.push(types ? `${subject} must be ${types.one}` : `${subject} is not a file type that can be added here`);
+    else if (maxSize != null && file.size > maxSize) reasons.push(`${subject} must be smaller than ${sizeWords(maxSize)}`);
+    else accepted.push(file);
+  }
+  return { accepted, message: reasons.length ? reasons.join("; ") : null };
+}
 var variantFills = {
   default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]",
   success: "bg-[var(--ds-status-success)]",
@@ -2182,6 +2278,66 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
     ] })
   ] });
 }
+function InlineFieldError({ message, id, className }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      id,
+      role: "alert",
+      className: cn(
+        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
+        "mt-ds-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+}
+var FieldContext = createContext(null);
+function useField() {
+  return useContext(FieldContext);
+}
+function Field({ label, children, hint, error, required, labelAction, id: idProp, className }) {
+  const generated = useId();
+  const id = idProp ?? `field-${generated}`;
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+  const hasError = typeof error === "string" && error.length > 0;
+  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
+  const labelId = `${id}-label`;
+  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy }), [id, labelId, describedBy]);
+  const controlProps = {
+    id,
+    "aria-describedby": describedBy,
+    ...hasError ? { "aria-invalid": true, error: true } : {},
+    ...required ? { "aria-required": true, required: true } : {}
+  };
+  let control;
+  if (typeof children === "function") {
+    control = children(controlProps);
+  } else {
+    const child = Children.only(children);
+    if (!isValidElement(child)) throw new Error("Field expects a single form control as its child");
+    const isNative = typeof child.type === "string";
+    const { error: errorFlag, ...ariaOnly } = controlProps;
+    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+      /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+      ] }),
+      labelAction
+    ] }),
+    /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
+    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
+    hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
+  ] });
+}
 function TruncFileName({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("p", { ref, className: cn("truncate", className), children });
@@ -2193,37 +2349,57 @@ function formatSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function FileUpload({ onFiles, accept, multiple = true, maxSize, className, error = false, label }) {
+function FileUpload({ onFiles, accept, multiple = true, maxSize, className, error = false, label, id }) {
   const [files, setFiles] = useState([]);
   const [dragOver, setDragOver] = useState(false);
-  const inputId = useId();
+  const [rejected, setRejected] = useState(null);
   const inputRef = useRef(null);
+  const nextEntryId = useRef(0);
+  const timers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const running = timers.current;
+    return () => running.forEach(clearInterval);
+  }, []);
+  const field = useField();
+  const ownId = useId();
+  const inputId = id ?? `${ownId}-input`;
+  const constraintsId = `${ownId}-constraints`;
+  const rejectedId = `${ownId}-rejected`;
+  const showLabel = label != null && !field;
+  const constraints = fileConstraints(accept, maxSize, multiple);
+  const invalid = error || rejected != null;
+  const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null].filter(Boolean).join(" ") || void 0;
+  const stopTimer = (id2) => {
+    clearInterval(timers.current.get(id2));
+    timers.current.delete(id2);
+  };
   const addFiles = useCallback(
     (fileList) => {
-      const arr = Array.from(fileList);
-      const valid = maxSize ? arr.filter((f) => f.size <= maxSize) : arr;
-      const entries = valid.map((f) => ({ file: f, progress: 0, status: "uploading" }));
-      setFiles((prev) => [...prev, ...entries]);
-      onFiles(valid);
-      entries.forEach((_, i) => {
+      const { accepted, message } = checkFiles(Array.from(fileList), { accept, maxSize, multiple });
+      setRejected(message);
+      if (accepted.length === 0) return;
+      const entries = accepted.map((file) => ({ id: nextEntryId.current++, file, progress: 0, status: "uploading" }));
+      if (!multiple) {
+        timers.current.forEach(clearInterval);
+        timers.current.clear();
+      }
+      setFiles((prev) => multiple ? [...prev, ...entries] : entries);
+      onFiles(accepted);
+      for (const { id: id2 } of entries) {
         let progress = 0;
-        const interval = setInterval(() => {
-          progress += Math.random() * 30 + 10;
-          if (progress >= 100) {
-            progress = 100;
-            clearInterval(interval);
-            setFiles(
-              (prev) => prev.map((f, fi) => fi === prev.length - entries.length + i ? { ...f, progress: 100, status: "complete" } : f)
-            );
-          } else {
-            setFiles(
-              (prev) => prev.map((f, fi) => fi === prev.length - entries.length + i ? { ...f, progress } : f)
-            );
+        const timer = setInterval(() => {
+          progress = Math.min(100, progress + Math.random() * 30 + 10);
+          const done = progress >= 100;
+          if (done) {
+            clearInterval(timer);
+            timers.current.delete(id2);
           }
+          setFiles((prev) => prev.map((f) => f.id === id2 ? { ...f, progress, status: done ? "complete" : "uploading" } : f));
         }, 300);
-      });
+        timers.current.set(id2, timer);
+      }
     },
-    [maxSize, onFiles]
+    [accept, maxSize, multiple, onFiles]
   );
   const handleDrop = useCallback(
     (e) => {
@@ -2233,63 +2409,66 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
     },
     [addFiles]
   );
-  const removeFile = (index) => {
-    setFiles((prev) => prev.filter((_, i) => i !== index));
+  const removeFile = (id2) => {
+    stopTimer(id2);
+    setFiles((prev) => prev.filter((f) => f.id !== id2));
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-ds-3", className), children: [
-    label && /* @__PURE__ */ jsx("label", { id: inputId, className: "block text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-labelledby": label ? inputId : void 0,
-        onDragOver: (e) => {
-          e.preventDefault();
-          setDragOver(true);
-        },
-        onDragLeave: () => setDragOver(false),
-        onDrop: handleDrop,
-        onClick: () => inputRef.current?.click(),
-        "aria-invalid": error || void 0,
-        className: cn(
-          "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
-          "border-2 border-dashed rounded-[var(--ds-radius-md)]",
-          "transition-colors",
-          // The real file input is visually hidden inside; Tab lands on it and
-          // Enter/Space open the picker natively, so the zone shows its focus.
-          HAS_FOCUS_RING,
-          error ? "border-[var(--ds-status-error)]" : dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
-        ),
-        style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: cn(
-            "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
-            "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
-          ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: "Drop files here or click to browse" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: [
-              accept ? `Accepted: ${accept}` : "Any file type",
-              maxSize && ` \u2022 Max ${formatSize(maxSize)}`
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              accept,
-              multiple,
-              className: "sr-only",
-              onChange: (e) => {
-                if (e.target.files?.length) addFiles(e.target.files);
-                e.target.value = "";
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
+      showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragOver(true);
+          },
+          onDragLeave: () => setDragOver(false),
+          onDrop: handleDrop,
+          onClick: () => inputRef.current?.click(),
+          className: cn(
+            "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
+            "border-2 border-dashed rounded-[var(--ds-radius-md)]",
+            "transition-colors",
+            // The real file input is visually hidden inside; Tab lands on it and
+            // Enter/Space open the picker natively, so the zone shows its focus.
+            invalid ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+            dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
+          ),
+          style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
+              "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
+            ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: multiple ? "Drop files here or browse" : "Drop a file here or browse" }),
+              constraints && /* @__PURE__ */ jsx("p", { id: constraintsId, className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: constraints })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "file",
+                accept,
+                multiple,
+                className: "sr-only",
+                "aria-labelledby": field ? field.labelId : void 0,
+                "aria-describedby": describedBy,
+                "aria-invalid": invalid || void 0,
+                onChange: (e) => {
+                  if (e.target.files?.length) addFiles(e.target.files);
+                  e.target.value = "";
+                }
               }
-            }
-          )
-        ]
-      }
-    ),
-    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-ds-2", children: files.map((entry, i) => /* @__PURE__ */ jsxs(
+            )
+          ]
+        }
+      ),
+      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" })
+    ] }),
+    files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-ds-2", children: files.map((entry) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: cn(
@@ -2306,10 +2485,10 @@ function FileUpload({ onFiles, accept, multiple = true, maxSize, className, erro
             entry.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: entry.progress, size: "sm", className: "mt-ds-1" })
           ] }),
           entry.status === "complete" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0" }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => removeFile(i), "aria-label": "Remove file", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => removeFile(entry.id), "aria-label": "Remove file", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
         ]
       },
-      `${entry.file.name}-${i}`
+      entry.id
     )) })
   ] });
 }
@@ -2324,9 +2503,17 @@ function SliderRange({
   className,
   ref,
   error = false,
-  label = "Value",
+  label,
+  "aria-label": ariaLabel,
+  "aria-describedby": describedByProp,
   trackStyle
 }) {
+  const field = useField();
+  const ownId = useId();
+  const showLabel = label != null && !field;
+  const nameId = field ? field.labelId : showLabel ? `${ownId}-label` : void 0;
+  const describedBy = [...new Set([describedByProp, field?.describedBy].join(" ").split(" ").filter(Boolean))].join(" ") || void 0;
+  const thumbName = (part) => nameId ? { "aria-labelledby": part ? `${nameId} ${ownId}-${part}` : nameId } : { "aria-label": ariaLabel ? part ? `${ariaLabel} ${part}` : ariaLabel : void 0 };
   const isRange = Array.isArray(value);
   const low = isRange ? value[0] : value;
   const high = isRange ? value[1] : value;
@@ -2382,7 +2569,14 @@ function SliderRange({
     [disabled, min, max, handleChange]
   );
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-ds-1", disabled && "opacity-disabled", className), children: [
-    showValue && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${low} \u2013 ${high}` : low }) }),
+    (showLabel || showValue) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2", showLabel ? "justify-between" : "justify-end"), children: [
+      showLabel && /* @__PURE__ */ jsx("span", { id: `${ownId}-label`, className: "text-sm font-medium leading-none text-[var(--ds-text-secondary)]", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${low} \u2013 ${high}` : low })
+    ] }),
+    isRange && nameId && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { id: `${ownId}-minimum`, hidden: true, children: "minimum" }),
+      /* @__PURE__ */ jsx("span", { id: `${ownId}-maximum`, hidden: true, children: "maximum" })
+    ] }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2405,7 +2599,8 @@ function SliderRange({
             {
               role: "slider",
               tabIndex: disabled ? -1 : 0,
-              "aria-label": `${label} minimum`,
+              ...thumbName("minimum"),
+              "aria-describedby": describedBy,
               "aria-valuemin": min,
               "aria-valuemax": high,
               "aria-valuenow": low,
@@ -2429,7 +2624,8 @@ function SliderRange({
             {
               role: "slider",
               tabIndex: disabled ? -1 : 0,
-              "aria-label": isRange ? `${label} maximum` : label,
+              ...thumbName(isRange ? "maximum" : void 0),
+              "aria-describedby": describedBy,
               "aria-valuemin": isRange ? low : min,
               "aria-valuemax": max,
               "aria-valuenow": high,
@@ -2605,10 +2801,10 @@ function TimePicker({
       setOpen(false);
     };
     const keyHandler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", keyHandler);
@@ -3246,14 +3442,14 @@ function TagInput({
   );
   const containerRef = useRef(null);
   const pendingFocus = useRef(null);
-  const tagCount = value.length;
   useLayoutEffect(() => {
-    const index = pendingFocus.current;
-    if (index === null) return;
+    const pending = pendingFocus.current;
+    if (pending === null) return;
     pendingFocus.current = null;
+    if (value.includes(pending.tag)) return;
     const buttons = Array.from(containerRef.current?.querySelectorAll("[data-tag-remove]") ?? []);
-    focusAfterRemoval(buttons, index, inputRef.current);
-  }, [tagCount]);
+    focusAfterRemoval(buttons, pending.index, inputRef.current);
+  });
   const handleKeyDown = useCallback(
     (e) => {
       if ((e.key === "Enter" || e.key === ",") && input.trim()) {
@@ -3308,7 +3504,7 @@ function TagInput({
           Tag,
           {
             onRemove: disabled ? void 0 : () => {
-              pendingFocus.current = i;
+              pendingFocus.current = { index: i, tag };
               removeTag(tag);
             },
             disabled,
@@ -3837,60 +4033,6 @@ function ColorPicker({
     }
   );
 }
-function InlineFieldError({ message, id, className }) {
-  return /* @__PURE__ */ jsxs(
-    "p",
-    {
-      id,
-      role: "alert",
-      className: cn(
-        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
-        "mt-ds-1.5",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
-        /* @__PURE__ */ jsx("span", { children: message })
-      ]
-    }
-  );
-}
-function Field({ label, children, hint, error, required, labelAction, id: idProp, className }) {
-  const generated = useId();
-  const id = idProp ?? `field-${generated}`;
-  const hintId = `${id}-hint`;
-  const errorId = `${id}-error`;
-  const hasError = typeof error === "string" && error.length > 0;
-  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
-  const controlProps = {
-    id,
-    "aria-describedby": describedBy,
-    ...hasError ? { "aria-invalid": true, error: true } : {},
-    ...required ? { "aria-required": true, required: true } : {}
-  };
-  let control;
-  if (typeof children === "function") {
-    control = children(controlProps);
-  } else {
-    const child = Children.only(children);
-    if (!isValidElement(child)) throw new Error("Field expects a single form control as its child");
-    const isNative = typeof child.type === "string";
-    const { error: errorFlag, ...ariaOnly } = controlProps;
-    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
-      ] }),
-      labelAction
-    ] }),
-    control,
-    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
-    hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
-  ] });
-}
 var variantStyles2 = {
   info: "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]",
   success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
@@ -4566,7 +4708,6 @@ function MentionInput({
   const value = controlledValue ?? internalValue;
   const [query, setQuery] = useState("");
   const [showPopup, setShowPopup] = useState(false);
-  useOverlayLayer(showPopup);
   const [activeIndex, setActiveIndex] = useState(0);
   const [triggerStart, setTriggerStart] = useState(-1);
   const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
@@ -4576,6 +4717,7 @@ function MentionInput({
   const filtered = suggestions.filter(
     (s) => s.label.toLowerCase().includes(query.toLowerCase()) || s.description?.toLowerCase().includes(query.toLowerCase())
   );
+  useOverlayLayer(showPopup && filtered.length > 0);
   const updateValue = useCallback(
     (v) => {
       if (controlledValue === void 0) setInternalValue(v);
@@ -4654,6 +4796,7 @@ function MentionInput({
       e.preventDefault();
       insertMention(filtered[activeIndex]);
     } else if (e.key === "Escape") {
+      e.preventDefault();
       setShowPopup(false);
     }
   };
@@ -4757,6 +4900,8 @@ function MentionInput({
   ] });
 }
 var CardCtx = createContext(false);
+var CardActionCtx = createContext(null);
+var CARD_ACTION_ATTR = "data-card-action";
 var CardSurfaceCtx = createContext(false);
 var variantStyles3 = {
   default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
@@ -4876,11 +5021,33 @@ var Card = forwardRef(function Card2({
   const isSelectable = selectable || !!selectType;
   const isToggle = selectType === "toggle";
   const hasSelectType = !!selectType;
+  const isAction = !isSelectable && variant === "interactive" && !!onClick;
+  const rootRef = useRef(null);
+  const setRoot = useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const [inner, setInner] = useState({ controls: false, titleId: null });
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || !isAction && !checkable) return;
+    const controls = Array.from(root.querySelectorAll(FOCUSABLE)).some((el) => !el.hasAttribute(CARD_ACTION_ATTR));
+    const titleId = root.querySelector("[data-card-title]")?.id || null;
+    setInner((cur) => cur.controls === controls && cur.titleId === titleId ? cur : { controls, titleId });
+  }, [isAction, checkable, loading, children]);
+  const holdsControls = isAction && inner.controls;
+  const action = useMemo(() => holdsControls ? { activate: () => rootRef.current?.click(), disabled } : null, [holdsControls, disabled]);
   const handleClick = isSelectable && !disabled ? (e) => {
     onSelectedChange?.(!selected);
     onClick?.(e);
-  } : onClick;
-  const isAction = !isSelectable && variant === "interactive" && !!onClick;
+  } : isAction && disabled ? void 0 : onClick;
+  const handleCardClick = (e) => {
+    if (disabled || !(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
+    const control = e.target.closest(FOCUSABLE);
+    if (control && control !== e.currentTarget && e.currentTarget.contains(control)) return;
+    onClick?.(e);
+  };
   const handleKeyDown = isSelectable && !disabled ? (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
@@ -4903,7 +5070,8 @@ var Card = forwardRef(function Card2({
     e.stopPropagation();
     onSelectedChange?.(!selected);
   };
-  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable || isAction ? "button" : void 0;
+  const isButton = isSelectable || isAction && !holdsControls;
+  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isButton ? "button" : void 0;
   const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
   const showRing = isSelectable && !isToggle && !hasSelectType && selected;
   const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
@@ -4911,11 +5079,11 @@ var Card = forwardRef(function Card2({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
+      ref: setRoot,
       "data-card": "",
       role,
-      tabIndex: isSelectable || isAction && !disabled ? 0 : void 0,
-      "aria-disabled": (isSelectable || isAction) && disabled ? true : void 0,
+      tabIndex: isSelectable || isButton && !disabled ? 0 : void 0,
+      "aria-disabled": isButton && disabled ? true : void 0,
       ...name && selectType === "radio" ? { "data-radio-group": name } : {},
       style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
       className: cn(
@@ -4923,15 +5091,15 @@ var Card = forwardRef(function Card2({
         variantStyles3[variant],
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
-        (isSelectable || isAction) && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        isButton && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         (showRing || hasSelectType && selected) && ACTIVE_RING,
         hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
+      onClick: holdsControls ? handleCardClick : handleClick,
+      onKeyDown: holdsControls ? void 0 : handleKeyDown,
+      onKeyUp: holdsControls ? void 0 : handleKeyUp,
       ...ariaAttr,
       ...props,
       children: [
@@ -4944,6 +5112,7 @@ var Card = forwardRef(function Card2({
             onClick: handleCheckableClick,
             role: "checkbox",
             "aria-checked": !!selected,
+            ...inner.titleId ? { "aria-labelledby": inner.titleId } : { "aria-label": "Select" },
             tabIndex: 0,
             onKeyDown: (e) => {
               if (e.key === "Enter" || e.key === " ") {
@@ -4955,7 +5124,7 @@ var Card = forwardRef(function Card2({
             children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
           }
         ),
-        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? (
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? (
           // Round 15 (the owner's 52.1): a placeholder stands where the content will stand — inside the card's
           // content inset (CardContent's padding), a title-height line then two body lines — never flush against the border.
           /* @__PURE__ */ jsx("div", { "data-card-loading": "", "aria-busy": "true", className: cn("pr-ds-5 py-ds-4", checkable ? "pl-ds-10" : "pl-ds-5"), children: /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
@@ -4963,7 +5132,7 @@ var Card = forwardRef(function Card2({
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
           ] }) })
-        ) : children }) })
+        ) : children }) }) })
       ]
     }
   );
@@ -4981,6 +5150,7 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
           "button",
           {
             type: "button",
+            "aria-label": "More actions",
             className: cn(
               "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
               "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
@@ -5017,20 +5187,42 @@ var cardLineClampClasses = {
   5: "line-clamp-5",
   6: "line-clamp-6"
 };
-var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, ...props }, forwardedRef) {
+var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, id, ...props }, forwardedRef) {
+  const action = useContext(CardActionCtx);
+  const generatedId = useId();
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
   const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
   const heading = /* @__PURE__ */ jsx(
     "h3",
     {
       ref: (node) => {
-        overflowRef(lines > 0 ? node : null);
+        if (!action) overflowRef(lines > 0 ? node : null);
         if (typeof forwardedRef === "function") forwardedRef(node);
         else if (forwardedRef) forwardedRef.current = node;
       },
-      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", lines > 0 && lineClampClass, className),
+      id: id ?? generatedId,
+      "data-card-title": "",
+      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", !action && lines > 0 && lineClampClass, className),
       ...props,
-      children
+      children: action ? (
+        // The card's action when the card holds controls of its own (Sprint 25.7): a real button, which a click
+        // elsewhere on the card also runs. Its ::after spans the card to draw the card's focus ring, taking no clicks.
+        // The clamp moves inside, since a button lays out its own lines.
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...{ [CARD_ACTION_ATTR]: "" },
+            disabled: action.disabled,
+            onClick: action.activate,
+            className: cn(
+              "block w-full text-left cursor-pointer [text-overflow:inherit] focus-visible:outline-none disabled:cursor-not-allowed",
+              "after:absolute after:inset-0 after:rounded-[var(--ds-radius-md)] after:pointer-events-none focus-visible:after:shadow-[var(--ds-shadow-focus)]"
+            ),
+            children: /* @__PURE__ */ jsx("span", { ref: (node) => overflowRef(lines > 0 ? node : null), className: cn("block [text-overflow:inherit]", lines > 0 && lineClampClass), children })
+          }
+        )
+      ) : children
     }
   );
   if (!isTruncated || lines === 0) return heading;
@@ -6047,10 +6239,10 @@ function OverflowPopover({
     if (!open) return;
     const raf = requestAnimationFrame(() => focusInitial(floatingRef.current));
     const onKey = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onDown = (e) => {
       if (!triggerRef.current?.contains(e.target)) setOpen(false);
@@ -6705,6 +6897,9 @@ function CompactDayCell({
   const today = isCurrentMonth && isToday(day);
   const selected = isCurrentMonth && selectedDate && isSameDay2(day, selectedDate);
   const hasEvents = dayEvents.length > 0;
+  const shown = open && hasEvents;
+  const isTop = useOverlayLayer(shown);
+  useCloseOnFocusOut(shown, cellRef, floatingRef, () => setOpen(false), isTop);
   const eventColors = dayEvents.slice(0, 3).map((e) => categories[e.category ?? ""]?.color ?? "var(--ds-accent-primary)");
   const handleMouseEnter = () => {
     if (!hasEvents) return;
@@ -6723,7 +6918,9 @@ function CompactDayCell({
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -6736,7 +6933,7 @@ function CompactDayCell({
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, isTop]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -6908,10 +7105,10 @@ function MonthDropdown({
       (panel?.querySelector("[data-current]") ?? panel?.querySelector("button"))?.focus();
     });
     const onKey = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -7042,10 +7239,10 @@ function YearDropdown({
       (panel?.querySelector("[data-current]") ?? panel?.querySelector("button"))?.focus();
     });
     const onKey = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const t = e.target;
@@ -9127,9 +9324,1234 @@ var StackedList = forwardRef(function StackedList2({
     }
   );
 });
-var DEFAULT_OFFSET2 = "var(--ds-space-4)";
-var LAUNCHER_SIZES = {
-  md: "var(--ds-space-10)",
+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)",
   lg: "var(--ds-space-12)"
 };
 function launcherSize(size = "lg") {
@@ -9877,10 +11299,10 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
       setDropdownOpen(false);
     };
     const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTop()) {
-        returnFocus();
-        setDropdownOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setDropdownOpen(false);
     };
     document.addEventListener("mousedown", handler);
     document.addEventListener("keydown", onKeyDown);
@@ -10080,27 +11502,31 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     setTriggerWidth(node?.offsetWidth);
   }, []);
   const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChange(false), tabExits: "edges" });
+  const onOpenChangeRef = useLatest(onOpenChange);
+  const { props: pressMarks, marked } = usePressMarks();
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChangeRef.current(false), tabExits: "edges", marked });
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        onOpenChange(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      const active = document.activeElement;
+      if (active && active !== document.body && !triggerRef.current?.contains(active) && !floatingRef.current?.contains(active)) return;
+      e.preventDefault();
+      returnFocus();
+      onOpenChangeRef.current(false);
     };
-    const onClick = (e) => {
+    const onPress = (e) => {
       const target = e.target;
-      if (triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
-      onOpenChange(false);
+      if (marked(e) || triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
+      onOpenChangeRef.current(false);
     };
     document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("mousedown", onClick);
+    document.addEventListener("mousedown", onPress);
     return () => {
       document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("mousedown", onPress);
     };
-  }, [open, onOpenChange, isTopLayer, returnFocus]);
+  }, [open, onOpenChangeRef, isTopLayer, returnFocus, marked]);
   useEffect(() => {
     if (open) focusInitial(floatingRef.current);
   }, [open]);
@@ -10122,6 +11548,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
         {
           ref: floatingRef,
           "data-gs": "popover",
+          ...pressMarks,
           onClick: (e) => e.stopPropagation(),
           className: cn(
             "fixed z-[var(--ds-z-popover)]",
@@ -10337,10 +11764,87 @@ function EllipsisJumper({ totalPages, onPageChange }) {
     }
   );
 }
+var HeaderTabRowContext = createContext(null);
+function useHeaderTabRow() {
+  return useContext(HeaderTabRowContext);
+}
+function useNarrowRow(row) {
+  const [narrow, setNarrow] = useState(false);
+  useLayoutEffect(() => {
+    if (!row) return;
+    const limit = readBreakpointPx("sm");
+    const measure = () => setNarrow(row.clientWidth < limit);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(row);
+    return () => ro.disconnect();
+  }, [row]);
+  return narrow;
+}
 function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal", className }) {
   const isHorizontal = orientation === "horizontal";
+  const tabRow = useHeaderTabRow();
+  const narrow = useNarrowRow(tabRow?.row ?? null);
+  const inHeader = isHorizontal && tabRow != null;
+  if (inHeader && narrow) {
+    const current = steps[currentStep];
+    const where = `Step ${Math.min(currentStep + 1, steps.length)} of ${steps.length}`;
+    return /* @__PURE__ */ jsxs("nav", { "data-gs": "stepper", "aria-label": "Progress", className: cn("mx-ds-1", className), children: [
+      /* @__PURE__ */ jsxs("p", { className: cn("mb-ds-2 text-sm font-medium text-[var(--ds-text-secondary)]", tabRow.hasCaption && "sr-only"), children: [
+        where,
+        current ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          ": ",
+          current.label
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex gap-ds-1", children: steps.map((step, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-1.5 flex-1 rounded-[var(--ds-radius-full)] transition-colors",
+            step.status === "error" ? "bg-[var(--ds-status-error)]" : i <= currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+          )
+        },
+        i
+      )) })
+    ] });
+  }
+  if (inHeader) {
+    return /* @__PURE__ */ jsx("nav", { "data-gs": "stepper", "aria-label": "Progress", className: cn("flex items-start mx-ds-1", className), children: steps.map((step, i) => {
+      const status = step.status ?? (i < currentStep ? "complete" : i === currentStep ? "current" : "upcoming");
+      const isLast = i === steps.length - 1;
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start min-w-0", isLast ? "flex-none" : "flex-1"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+          /* @__PURE__ */ jsx(StepCircle, { status, index: i, onClick: onStepChange ? () => onStepChange(i) : void 0, clickable: !!onStepChange }),
+          !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 h-0.5 mx-ds-2 transition-colors",
+                i < currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-ds-2 pr-ds-2", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs font-medium",
+                status === "current" ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)]"
+              ),
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] mt-ds-0.5", children: step.description })
+        ] })
+      ] }, i);
+    }) });
+  }
   if (!isHorizontal) {
-    return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", className: cn("flex flex-col", className), children: steps.map((step, i) => {
+    return /* @__PURE__ */ jsx("nav", { "data-gs": "stepper", "aria-label": "Progress", className: cn("flex flex-col", className), children: steps.map((step, i) => {
       const status = step.status ?? (i < currentStep ? "complete" : i === currentStep ? "current" : "upcoming");
       const isLast = i === steps.length - 1;
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-3", children: [
@@ -10375,6 +11879,7 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
   return /* @__PURE__ */ jsx(
     "nav",
     {
+      "data-gs": "stepper",
       "aria-label": "Progress",
       className: cn("flex items-start", className),
       children: steps.map((step, i) => {
@@ -10795,6 +12300,7 @@ function computeCompactFlyoutPos(anchorEl, itemsLength) {
   return { top: Math.max(8, top), left: rect.right - (FLYOUT_BRIDGE_PX - 4) };
 }
 function CompactFlyout({
+  id,
   parentLabel,
   items,
   anchorEl,
@@ -10808,22 +12314,23 @@ function CompactFlyout({
   const pos = useMemo(() => computeCompactFlyoutPos(anchorEl, items.length), [anchorEl, items.length]);
   const anchorRef = useRef(anchorEl);
   const panelRef = useRef(null);
+  const headingId = useId();
   const { isTop: isTopLayer, returnFocus } = usePopupFocus(true, { trigger: anchorRef, panel: panelRef, close: onClose, tabExits: "edges" });
   useEffect(() => {
     if (!focusIn) return;
-    const raf = requestAnimationFrame(() => panelRef.current?.querySelector('[role="menuitem"]')?.focus());
+    const raf = requestAnimationFrame(() => panelRef.current?.querySelector("a[href]")?.focus());
     return () => cancelAnimationFrame(raf);
   }, [focusIn]);
   useEffect(() => {
     function handler(e) {
-      if (!isTopLayer()) return;
+      if (e.defaultPrevented || !isTopLayer()) return;
       const inside = !!panelRef.current?.contains(document.activeElement);
       if (e.key === "Escape" || e.key === "ArrowLeft" && inside) {
         e.preventDefault();
         if (inside) returnFocus();
         onClose();
       } else if (inside && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-        const links = Array.from(panelRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+        const links = Array.from(panelRef.current?.querySelectorAll("a[href]") ?? []);
         const at = links.indexOf(document.activeElement);
         const next = links[(at + (e.key === "ArrowDown" ? 1 : -1) + links.length) % links.length];
         if (next) {
@@ -10846,8 +12353,7 @@ function CompactFlyout({
         "div",
         {
           ref: panelRef,
-          role: "menu",
-          "aria-label": parentLabel,
+          id,
           className: cn(
             "min-w-[160px] py-ds-1",
             "bg-[var(--ds-sidebar-bg)] rounded-[var(--ds-radius-md)]",
@@ -10855,12 +12361,11 @@ function CompactFlyout({
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
           ),
           children: [
-            /* @__PURE__ */ jsx("p", { className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("p", { id: headingId, className: "px-ds-2 pt-ds-1 pb-ds-1.5 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-sidebar-text-muted)]", children: parentLabel }),
+            /* @__PURE__ */ jsx("ul", { "aria-labelledby": headingId, className: "flex flex-col px-ds-1", style: { gap: "var(--ds-space-0\\.5)" }, children: items.map((child, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
               "a",
               {
                 href: child.href ?? "#",
-                role: "menuitem",
                 onClick: (e) => {
                   e.preventDefault();
                   onItemClick?.(child, i);
@@ -10875,9 +12380,8 @@ function CompactFlyout({
                   /* @__PURE__ */ jsx(TruncLabel3, { children: child.label }),
                   child.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: child.badge })
                 ]
-              },
-              child.label
-            )) })
+              }
+            ) }, child.label)) })
           ]
         }
       )
@@ -11224,6 +12728,7 @@ function CompactNavItem({
   onToggleExpand
 }) {
   const [triggerEl, setTriggerEl] = useState(null);
+  const flyoutId = useId();
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   if (!isOpen && keyboardOpen) setKeyboardOpen(false);
   const handleMouseEnter = useCallback(() => {
@@ -11255,8 +12760,8 @@ function CompactNavItem({
           setKeyboardOpen(true);
           onOpen(flyoutKey);
         } : void 0,
-        "aria-haspopup": !mobile && hasChildren ? "menu" : void 0,
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
+        "aria-controls": !mobile && hasChildren && isOpen ? flyoutId : void 0,
         className: cn(
           "relative flex flex-col items-center justify-center gap-[3px] w-full py-ds-3 px-ds-1 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
           // Compact tiles have no edge to stroke: they read the fill and text
@@ -11291,6 +12796,7 @@ function CompactNavItem({
     !mobile && isOpen && hasChildren && item.children && triggerEl && /* @__PURE__ */ jsx(
       CompactFlyout,
       {
+        id: flyoutId,
         parentLabel: item.label,
         items: item.children,
         anchorEl: triggerEl,
@@ -11766,6 +13272,35 @@ function BackButton({ onLight, onClick }) {
     }
   );
 }
+function BackLink({ onClick, onLight }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "inline-flex items-center gap-ds-1 mb-ds-3 text-sm underline underline-offset-4 cursor-pointer",
+        "rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-primary)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }),
+        "Back"
+      ]
+    }
+  );
+}
+function Caption({ children, onLight, onTint }) {
+  return /* @__PURE__ */ jsx("p", { className: cn(
+    "mb-ds-1 text-sm font-medium",
+    onLight ? "text-[var(--ds-text-on-primary)]/80" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]"
+  ), children });
+}
+function TabRow({ children, hasCaption, className, onBand }) {
+  const [row, setRow] = useState(null);
+  const value = useMemo(() => ({ row, hasCaption }), [row, hasCaption]);
+  return /* @__PURE__ */ jsx("div", { ref: setRow, className: cn(className, onBand && "mx-0 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] px-ds-3 py-ds-2"), children: /* @__PURE__ */ jsx(HeaderTabRowContext.Provider, { value, children }) });
+}
 var FLOATING_HEADER = cn(
   "rounded-[var(--ds-radius-md)]",
   "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -11783,9 +13318,10 @@ function computeFloatingPadding(navbarFloating, sidebarFloating, overlapActive,
 var PageHeader = forwardRef(function PageHeader2({
   title,
   description,
+  caption,
   badge,
   breadcrumbs,
-  onBack,
+  onBack: onBackProp,
   actions,
   avatar,
   filters,
@@ -11844,12 +13380,16 @@ var PageHeader = forwardRef(function PageHeader2({
   const containedBreadcrumbs = containedBreadcrumbsProp ?? (container?.breadcrumbsInsideHeader && breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth: gutterWidth, separator: bcSep, items: [...breadcrumbs, { label: title }] }) : void 0);
   const noBottomMargin = noBottomMarginProp ?? container?.noBottomMargin;
   const overlapActive = container?.overlap ?? false;
+  const focusBack = shell?.focus ? onBackProp : void 0;
+  const onBack = focusBack ? void 0 : onBackProp;
   if (behavior === "snapping") {
     return /* @__PURE__ */ jsx(
       SnappingHeader,
       {
         title,
         description,
+        caption,
+        focusBack,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11881,13 +13421,15 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs: inlineBreadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, caption, focusBack, badge, breadcrumbs: inlineBreadcrumbs, actions, tabs, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
       {
         title,
         description,
+        caption,
+        focusBack,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11910,6 +13452,9 @@ var PageHeader = forwardRef(function PageHeader2({
         gutter: !insidePaddedColumn,
         title,
         description,
+        caption,
+        focusBack,
+        tabs,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11935,6 +13480,9 @@ var PageHeader = forwardRef(function PageHeader2({
       {
         title,
         description,
+        caption,
+        focusBack,
+        tabs,
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
@@ -11975,6 +13523,9 @@ function floatingContentProps(isFloating, contentMaxWidth, extraClassName) {
 function DefaultHeader({
   title,
   description,
+  caption,
+  focusBack,
+  tabs,
   badge,
   breadcrumbs,
   onBack,
@@ -11997,6 +13548,7 @@ function DefaultHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: headerRef,
       className: cn(
         !hasBanner && (hasBreadcrumbs ? "pt-ds-3 pb-ds-6" : "py-ds-6"),
@@ -12015,6 +13567,7 @@ function DefaultHeader({
       children: [
         hasBanner && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[var(--ds-bg-canvas)]/85" }),
         /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+          focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
           hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
           /* @__PURE__ */ jsxs("div", { className: cn(
             "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
@@ -12024,6 +13577,7 @@ function DefaultHeader({
               onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
               avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                   /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
                   badge
@@ -12033,7 +13587,8 @@ function DefaultHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) })
+          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+          tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
         ] })
       ]
     }
@@ -12041,9 +13596,12 @@ function DefaultHeader({
 }
 function MinimalHeader({
   title,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   actions,
+  tabs,
   breadcrumbPill,
   breadcrumbSeparator,
   as: Heading = "h1",
@@ -12054,20 +13612,26 @@ function MinimalHeader({
 }) {
   const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
   const inner = floatingContentProps(isFloating, contentMaxWidth);
-  return /* @__PURE__ */ jsx("header", { ref: headerRef, className: cn("py-ds-2", hasBreadcrumbs && "pt-ds-1", isFloating && FLOATING_HEADER, className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+  return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn("py-ds-2", hasBreadcrumbs && "pt-ds-1", tabs && "pb-ds-4", isFloating && FLOATING_HEADER, className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+    focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+    caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && "mt-ds-0.5"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
         /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: 1, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
         badge
       ] }),
       actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
-    ] })
+    ] }),
+    tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
   ] }) });
 }
 function ColourfulHeader({
   title,
   description,
+  caption,
+  focusBack,
+  tabs,
   badge,
   breadcrumbs,
   onBack,
@@ -12092,6 +13656,7 @@ function ColourfulHeader({
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: headerRef,
       className: cn(
         "relative overflow-hidden w-full",
@@ -12135,6 +13700,7 @@ function ColourfulHeader({
               ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : {}
             },
             children: [
+              focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight: isBold }),
               hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight: isBold, onTint: !isBold, pill: breadcrumbPill, separator: breadcrumbSeparator }),
               /* @__PURE__ */ jsxs("div", { className: cn(
                 "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
@@ -12144,6 +13710,7 @@ function ColourfulHeader({
                   onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack, onLight: isBold }),
                   avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    caption && /* @__PURE__ */ jsx(Caption, { onLight: isBold, onTint: !isBold, children: caption }),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                       /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
                         "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)]",
@@ -12159,7 +13726,8 @@ function ColourfulHeader({
                 ] }),
                 actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
               ] }),
-              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) })
+              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+              tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBold, children: tabs })
             ]
           }
         )
@@ -12170,6 +13738,8 @@ function ColourfulHeader({
 function SnappingHeader({
   title,
   description,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   onBack,
@@ -12293,6 +13863,7 @@ function SnappingHeader({
   const headerEl = /* @__PURE__ */ jsxs(
     "header",
     {
+      "data-gs": "page-header",
       ref: !isFloating ? mergedRef : void 0,
       className: cn(
         "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
@@ -12329,8 +13900,10 @@ function SnappingHeader({
         onTint && !backgroundImage && /* @__PURE__ */ jsx(TintWash, {}),
         (() => {
           const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
-          const innerContent = isMinimal && !collapsed ? /* @__PURE__ */ jsxs("div", { className: cn("py-ds-2", hasBreadcrumbs && !hideExpandedBreadcrumbs && "pt-ds-1"), children: [
+          const innerContent = isMinimal && !collapsed ? /* @__PURE__ */ jsxs("div", { className: cn("py-ds-2", hasBreadcrumbs && !hideExpandedBreadcrumbs && "pt-ds-1", tabs && "pb-ds-4"), children: [
+            focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
             hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+            caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
             /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && !hideExpandedBreadcrumbs && "mt-ds-0.5"), children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
                 /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
@@ -12340,7 +13913,7 @@ function SnappingHeader({
             ] }),
             filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-3", children: filters }) }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
-            tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-3 -mx-ds-1", children: tabs })
+            tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
           ] }) : /* @__PURE__ */ jsxs(
             "div",
             {
@@ -12354,6 +13927,7 @@ function SnappingHeader({
               ),
               style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : void 0,
               children: [
+                !collapsed && focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight }),
                 !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight, onTint, pill: breadcrumbPill, separator: breadcrumbSeparator }),
                 /* @__PURE__ */ jsxs("div", { className: cn(
                   "flex justify-between gap-ds-4",
@@ -12365,6 +13939,7 @@ function SnappingHeader({
                     onBack && !collapsed && /* @__PURE__ */ jsx(BackButton, { onClick: onBack, onLight }),
                     avatar && !collapsed && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
                     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      !collapsed && caption && /* @__PURE__ */ jsx(Caption, { onLight, onTint, children: caption }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                         collapsed && hasBreadcrumbs && (() => {
                           const lastCrumb = breadcrumbs[breadcrumbs.length - 1];
@@ -12407,7 +13982,7 @@ function SnappingHeader({
                 ] }),
                 !collapsed && filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
                 !collapsed && expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: expandedContent }),
-                !collapsed && tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-4 -mx-ds-1", children: tabs })
+                !collapsed && tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBoldColourful, children: tabs })
               ]
             }
           );
@@ -12455,6 +14030,8 @@ function SnappingHeader({
 function TabsIntegratedHeader({
   title,
   description,
+  caption,
+  focusBack,
   badge,
   breadcrumbs,
   onBack,
@@ -12471,7 +14048,8 @@ function TabsIntegratedHeader({
 }) {
   const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
   const inner = floatingContentProps(isFloating, contentMaxWidth);
-  return /* @__PURE__ */ jsx("header", { ref: headerRef, className: cn(hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6", "pb-ds-4", isFloating && cn(FLOATING_HEADER, "overflow-hidden"), className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+  return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn(hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6", "pb-ds-4", isFloating && cn(FLOATING_HEADER, "overflow-hidden"), className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
+    focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
     /* @__PURE__ */ jsxs("div", { className: cn(
       "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
@@ -12481,6 +14059,7 @@ function TabsIntegratedHeader({
         onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
         avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
             /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
             badge
@@ -12490,7 +14069,7 @@ function TabsIntegratedHeader({
       ] }),
       actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
     ] }),
-    tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-4 -mx-ds-1", children: tabs })
+    tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
   ] }) });
 }
 var DEFAULT_BASE = 48;
@@ -12655,6 +14234,7 @@ function NavMenu({
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const panelId = useId();
   const [pos, setPos] = useState({ top: 0, left: 0, minWidth: 0 });
   const close = useCallback(() => setOpen(false), []);
   const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close, tabExits: "edges" });
@@ -12680,10 +14260,10 @@ function NavMenu({
       }
     }
     function handleKey(e) {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        close();
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      close();
     }
     document.addEventListener("mousedown", handleClick);
     document.addEventListener("keydown", handleKey);
@@ -12725,7 +14305,7 @@ function NavMenu({
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-expanded": open,
-        "aria-haspopup": "true",
+        "aria-controls": open ? panelId : void 0,
         className: triggerClasses,
         children: [
           label,
@@ -12745,7 +14325,7 @@ function NavMenu({
         "div",
         {
           ref: panelRef,
-          role: "menu",
+          id: panelId,
           "data-gs": "menu",
           className: cn(
             "fixed z-[var(--ds-z-popover)] py-ds-1.5",
@@ -12754,7 +14334,7 @@ function NavMenu({
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
           ),
           style: { top: pos.top, left: pos.left, minWidth: pos.minWidth },
-          children: items.map((item, i) => {
+          children: /* @__PURE__ */ jsx("ul", { children: items.map((item, i) => {
             if (item.children?.length) {
               return /* @__PURE__ */ jsx(
                 NavMenuGroup,
@@ -12780,7 +14360,7 @@ function NavMenu({
               },
               item.label
             );
-          })
+          }) })
         }
       ),
       document.body
@@ -12791,11 +14371,10 @@ function NavMenuItemRow({
   item,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
     "a",
     {
       href: item.href ?? "#",
-      role: "menuitem",
       onClick: (e) => {
         e.preventDefault();
         onClick();
@@ -12821,14 +14400,15 @@ function NavMenuItemRow({
         ] })
       ]
     }
-  );
+  ) });
 }
 function NavMenuGroup({
   group,
   isFirst,
   onItemClick
 }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
+  const headingId = useId();
+  return /* @__PURE__ */ jsxs("li", { children: [
     !isFirst && /* @__PURE__ */ jsx(
       "div",
       {
@@ -12836,15 +14416,15 @@ function NavMenuGroup({
         style: { height: "var(--ds-divider-width, 1px)", marginTop: "var(--ds-space-1)", marginBottom: "var(--ds-space-1)" }
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: "px-ds-3 pt-ds-1.5 pb-ds-1 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-text-muted)]", children: group.label }),
-    group.children.map((child) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("p", { id: headingId, className: "px-ds-3 pt-ds-1.5 pb-ds-1 text-2xs font-semibold uppercase tracking-wider text-[var(--ds-text-muted)]", children: group.label }),
+    /* @__PURE__ */ jsx("ul", { "aria-labelledby": headingId, children: group.children.map((child) => /* @__PURE__ */ jsx(
       NavMenuItemRow,
       {
         item: child,
         onClick: () => onItemClick(child)
       },
       child.label
-    ))
+    )) })
   ] });
 }
 function resolveNavItemType(type) {
@@ -12883,30 +14463,198 @@ var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href,
       ]
     }
   );
-});
-function getTypeClasses(type, active) {
-  switch (type) {
-    case "pill":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-    case "underline":
-      return cn(
-        "px-ds-2 py-ds-2 relative",
-        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
-      );
-    case "minimal":
-      return cn(
-        "px-ds-2 py-ds-1",
-        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
-      );
-    case "tint":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-  }
+});
+function getTypeClasses(type, active) {
+  switch (type) {
+    case "pill":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+    case "underline":
+      return cn(
+        "px-ds-2 py-ds-2 relative",
+        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+      );
+    case "minimal":
+      return cn(
+        "px-ds-2 py-ds-1",
+        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
+      );
+    case "tint":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+  }
+}
+var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
+var sizeClasses = {
+  // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100vw-2rem)]"
+};
+function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
+  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
+  const onClose = guard.requestClose;
+  const titleId = useId();
+  const descriptionId = useId();
+  const isMobile = useBreakpoint("sm");
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
+  const opener = useRef(null);
+  const defaultButtonRef = useRef(null);
+  const onCloseRef = useLatest(onClose);
+  const onSubmitRef = useLatest(onSubmit);
+  const isTopLayer = useOverlayLayer(open);
+  useFocusTrap(dialogRef, open, isTopLayer);
+  const before = useFocusBeforeOpen(open);
+  useEffect(() => {
+    if (!open) return;
+    const active = before.current;
+    opener.current = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
+  }, [open, before]);
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => {
+      focusInitial(dialogRef.current, { destructive: variant === "destructive" });
+    });
+  }, [open, variant]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      onCloseRef.current();
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [open, onCloseRef, isTopLayer]);
+  useEffect(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return () => {
+      unlockBodyScroll();
+      const r = opener.current;
+      opener.current = null;
+      const active = document.activeElement;
+      if (!active || active === document.body || !active.isConnected) r?.restore();
+    };
+  }, [open]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        className: "fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center p-ds-4",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed inset-0 bg-black/50 [backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]",
+              onClick: alert ? void 0 : onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "form",
+            {
+              onSubmit: (e) => {
+                e.preventDefault();
+                if (variant === "destructive") return;
+                const submitter = e.nativeEvent.submitter;
+                const implicit = !submitter || submitter === defaultButtonRef.current;
+                if (!implicit && submitter.getAttribute("type") !== "submit") return;
+                if (implicit) {
+                  const explicit = e.currentTarget.querySelector(`button[type="submit"]:not([${DEFAULT_BUTTON_ATTR}])`);
+                  if (explicit?.disabled) return;
+                }
+                onSubmitRef.current?.();
+              },
+              className: "contents",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: defaultButtonRef,
+                    type: "submit",
+                    tabIndex: -1,
+                    "aria-hidden": "true",
+                    className: "sr-only",
+                    ...{ [DEFAULT_BUTTON_ATTR]: "" }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: dialogRef,
+                    role: alert ? "alertdialog" : "dialog",
+                    "aria-modal": "true",
+                    "data-gs": "dialog",
+                    "aria-labelledby": titleId,
+                    "aria-describedby": description ? descriptionId : void 0,
+                    style: { containerType: "inline-size" },
+                    className: cn(
+                      "relative z-10 w-full",
+                      isMobile ? "max-w-none h-full" : sizeClasses[size],
+                      "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                      GLASS_OVERLAY,
+                      "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
+                      "overflow-hidden",
+                      "animate-in fade-in-0 zoom-in-95"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "p-ds-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-3", children: [
+                        variant === "destructive" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error-bg)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 20, className: "text-[var(--ds-status-error)]" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx(
+                            "h2",
+                            {
+                              id: titleId,
+                              className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] leading-none tracking-tight",
+                              children: title
+                            }
+                          ),
+                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
+                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
+                        ] })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
+                      footer && /* @__PURE__ */ jsx("div", { className: cn(
+                        "flex justify-end gap-ds-2 p-ds-4",
+                        "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                        "bg-[var(--ds-bg-muted)]",
+                        "rounded-b-[var(--ds-radius-xl)]"
+                      ), children: footer })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
 }
 function HamburgerButton({ onClick, open, className: cls }) {
   return /* @__PURE__ */ jsx(
@@ -12963,9 +14711,11 @@ var Navbar = forwardRef(function Navbar2({
   const [visibleCount, setVisibleCount] = useState(null);
   const links = useMemo(() => flattenLinks(navLinks), [navLinks]);
   const mobileHidesLinks = !!appShell?.isMobile && (appShell.hasMobileMenu || appShell.hasMobileNav);
+  const focus = appShell?.focus ?? null;
+  const [confirmExit, setConfirmExit] = useState(false);
   useEffect(() => {
     const header = headerRef.current;
-    if (!header || mobileHidesLinks || links.length === 0 || typeof ResizeObserver === "undefined") return;
+    if (!header || mobileHidesLinks || focus || links.length === 0 || typeof ResizeObserver === "undefined") return;
     const measure = () => {
       const nav = navRef.current;
       if (!nav) return;
@@ -13002,7 +14752,7 @@ var Navbar = forwardRef(function Navbar2({
     const ro = new ResizeObserver(measure);
     ro.observe(header);
     return () => ro.disconnect();
-  }, [mobileHidesLinks, links]);
+  }, [mobileHidesLinks, focus, links]);
   const [topInset, setTopInset] = useState(null);
   const shellEl = appShell?.container ?? null;
   useLayoutEffect(() => {
@@ -13034,7 +14784,40 @@ var Navbar = forwardRef(function Navbar2({
   }, [visibleCount, links]);
   const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
   const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
-  const hideNavLinks = mobileHidesLinks;
+  const hideNavLinks = mobileHidesLinks || !!focus;
+  const shownSearch = focus ? null : search;
+  const requestExit = () => {
+    if (!focus) return;
+    if (focus.kind === "in-app" && appShell?.hasUnsavedChanges) {
+      setConfirmExit(true);
+      return;
+    }
+    focus.onExit?.();
+  };
+  const exitControl = focus ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
+  const shownUserMenu = focus?.kind === "before-app" ? null : userMenu;
+  const asking = confirmExit && focus?.kind === "in-app" && !!appShell?.hasUnsavedChanges;
+  if (confirmExit && !asking) setConfirmExit(false);
+  const exitDialog = focus?.kind === "in-app" ? /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: asking,
+      onClose: () => setConfirmExit(false),
+      title: "You have unsaved changes",
+      description: "Exit now and your changes are lost.",
+      variant: "destructive",
+      size: "sm",
+      alert: true,
+      container: shellEl ?? void 0,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setConfirmExit(false), children: "Keep editing" }),
+        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => {
+          setConfirmExit(false);
+          focus.onExit?.();
+        }, children: "Discard changes" })
+      ] })
+    }
+  ) : null;
   const type = resolveNavItemType(typeProp);
   const isMinimal = type === "minimal";
   const isFloating = position === "floating";
@@ -13100,9 +14883,10 @@ var Navbar = forwardRef(function Navbar2({
           ] }),
           navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: "flex items-center gap-ds-2 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: linkRow }) }) : /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 justify-end", children: [
-            search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
+            shownSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: shownSearch }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
-            userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
+            exitControl && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: exitControl }),
+            shownUserMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: shownUserMenu })
           ] })
         ]
       }
@@ -13127,15 +14911,16 @@ var Navbar = forwardRef(function Navbar2({
           align === "right" && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
           navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: cn("flex items-center gap-ds-2 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: linkRow }) }),
           (!navLinks || hideNavLinks) && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
-          search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
+          shownSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: shownSearch }),
           actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
-          userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
+          exitControl && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: exitControl }),
+          shownUserMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: shownUserMenu })
         ]
       }
     );
   }
   if (isFloating) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -13145,11 +14930,17 @@ var Navbar = forwardRef(function Navbar2({
           className
         ),
         style: { padding: "var(--ds-space-3)" },
-        children: headerEl
+        children: [
+          headerEl,
+          exitDialog
+        ]
       }
     );
   }
-  return headerEl;
+  return exitDialog ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    headerEl,
+    exitDialog
+  ] }) : headerEl;
 });
 function MobileHeaderMenu({ items, type = "tint", onItemClick, className }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col", className), style: { padding: "var(--ds-space-4)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: type === "underline" ? 0 : "var(--ds-space-1)" }, children: items.map((item, i) => /* @__PURE__ */ jsx(
@@ -13241,172 +15032,6 @@ function MobileMenuItem({
     }
   );
 }
-var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
-var sizeClasses = {
-  // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
-  sm: "max-w-md",
-  md: "max-w-lg",
-  lg: "max-w-2xl",
-  xl: "max-w-4xl",
-  full: "max-w-[calc(100vw-2rem)]"
-};
-function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
-  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
-  const onClose = guard.requestClose;
-  const titleId = useId();
-  const descriptionId = useId();
-  const isMobile = useBreakpoint("sm");
-  const overlayRef = useRef(null);
-  const dialogRef = useRef(null);
-  const opener = useRef(null);
-  const defaultButtonRef = useRef(null);
-  const onCloseRef = useLatest(onClose);
-  const onSubmitRef = useLatest(onSubmit);
-  const isTopLayer = useOverlayLayer(open);
-  useFocusTrap(dialogRef, open, isTopLayer);
-  const before = useFocusBeforeOpen(open);
-  useEffect(() => {
-    if (!open) return;
-    const active = before.current;
-    opener.current = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
-  }, [open, before]);
-  useEffect(() => {
-    if (!open) return;
-    requestAnimationFrame(() => {
-      focusInitial(dialogRef.current, { destructive: variant === "destructive" });
-    });
-  }, [open, variant]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (e.key === "Escape" && !alert && isTopLayer()) onCloseRef.current();
-    };
-    document.addEventListener("keydown", handler);
-    return () => {
-      document.removeEventListener("keydown", handler);
-    };
-  }, [open, alert, onCloseRef, isTopLayer]);
-  useEffect(() => {
-    if (!open) return;
-    lockBodyScroll();
-    return () => {
-      unlockBodyScroll();
-      const r = opener.current;
-      opener.current = null;
-      const active = document.activeElement;
-      if (!active || active === document.body || !active.isConnected) r?.restore();
-    };
-  }, [open]);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: overlayRef,
-        className: "fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center p-ds-4",
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "fixed inset-0 bg-black/50 [backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]",
-              onClick: alert ? void 0 : onClose,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "form",
-            {
-              onSubmit: (e) => {
-                e.preventDefault();
-                if (variant === "destructive") return;
-                const submitter = e.nativeEvent.submitter;
-                const implicit = !submitter || submitter === defaultButtonRef.current;
-                if (!implicit && submitter.getAttribute("type") !== "submit") return;
-                if (implicit) {
-                  const explicit = e.currentTarget.querySelector(`button[type="submit"]:not([${DEFAULT_BUTTON_ATTR}])`);
-                  if (explicit?.disabled) return;
-                }
-                onSubmitRef.current?.();
-              },
-              className: "contents",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    ref: defaultButtonRef,
-                    type: "submit",
-                    tabIndex: -1,
-                    "aria-hidden": "true",
-                    className: "sr-only",
-                    ...{ [DEFAULT_BUTTON_ATTR]: "" }
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    ref: dialogRef,
-                    role: alert ? "alertdialog" : "dialog",
-                    "aria-modal": "true",
-                    "data-gs": "dialog",
-                    "aria-labelledby": titleId,
-                    "aria-describedby": description ? descriptionId : void 0,
-                    style: { containerType: "inline-size" },
-                    className: cn(
-                      "relative z-10 w-full",
-                      isMobile ? "max-w-none h-full" : sizeClasses[size],
-                      "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                      GLASS_OVERLAY,
-                      "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
-                      "overflow-hidden",
-                      "animate-in fade-in-0 zoom-in-95"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: "p-ds-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-3", children: [
-                        variant === "destructive" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error-bg)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 20, className: "text-[var(--ds-status-error)]" }) }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx(
-                            "h2",
-                            {
-                              id: titleId,
-                              className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] leading-none tracking-tight",
-                              children: title
-                            }
-                          ),
-                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) })
-                        ] })
-                      ] }) }),
-                      /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
-                      footer && /* @__PURE__ */ jsx("div", { className: cn(
-                        "flex justify-end gap-ds-2 p-ds-4",
-                        "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                        "bg-[var(--ds-bg-muted)]",
-                        "rounded-b-[var(--ds-radius-xl)]"
-                      ), children: footer })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    container ?? document.body
-  );
-}
 function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a command\u2026", loading = false, container }) {
   const [query, setQuery] = useState("");
   const [selectedIdx, setSelectedIdx] = useState(0);
@@ -13443,14 +15068,17 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
   const isTopLayer = useOverlayLayer(open);
   useFocusTrap(dialogRef, open, isTopLayer);
   const returnFocus = useReturnFocus(open, dialogRef);
+  const onOpenChangeRef = useLatest(onOpenChange);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      if (e.key === "Escape" && isTopLayer()) onOpenChange(false);
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      onOpenChangeRef.current(false);
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [open, onOpenChange, isTopLayer]);
+  }, [open, onOpenChangeRef, isTopLayer]);
   const handleSelect = useCallback(
     (cmd) => {
       returnFocus();
@@ -13664,7 +15292,9 @@ function ContextMenu({ items, children, className, ref, container }) {
     };
     const keyHandler = (e) => {
       if (e.key === "Escape") {
-        if (isTopLayer()) setOpen(false);
+        if (e.defaultPrevented || !isTopLayer()) return;
+        e.preventDefault();
+        setOpen(false);
         return;
       }
       const actionable = items.filter((it) => !it.separator && !it.disabled);
@@ -13801,10 +15431,11 @@ function NotificationCenter({
   const [internalFilter, setInternalFilter] = useState("all");
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
+  const onOpenChangeRef = useLatest(onOpenChange);
   const setOpen = useCallback((v) => {
-    if (isControlled) onOpenChange?.(v);
+    if (isControlled) onOpenChangeRef.current?.(v);
     else setInternalOpen(v);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChangeRef]);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "end", offset: 8, flip: true });
@@ -13821,10 +15452,10 @@ function NotificationCenter({
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && isTopLayer()) {
-        returnFocus();
-        setOpen(false);
-      }
+      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
+      e.preventDefault();
+      returnFocus();
+      setOpen(false);
     };
     const onClick = (e) => {
       const target = e.target;
@@ -13946,6 +15577,8 @@ function NotificationCenter({
         ref: triggerRef,
         onClick: () => setOpen(!open),
         "aria-label": `Notifications${unreadCount ? ` (${unreadCount} unread)` : ""}`,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
         className: cn(
           "relative flex items-center justify-center w-9 h-9",
           "rounded-[var(--ds-radius-md)]",
@@ -13964,6 +15597,8 @@ function NotificationCenter({
         "div",
         {
           ref: panelRef,
+          role: "dialog",
+          "aria-label": "Notifications",
           className: cn(
             "fixed z-[var(--ds-z-popover)] w-[360px] max-h-[480px] flex flex-col",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -14119,17 +15754,21 @@ function Tour({ steps, open, onClose, onComplete, container }) {
     const raf = requestAnimationFrame(() => nextRef.current?.focus());
     return () => cancelAnimationFrame(raf);
   }, [open, current]);
+  const onCloseRef = useLatest(onClose);
+  const handleNextRef = useLatest(handleNext);
+  const handlePrevRef = useLatest(handlePrev);
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (!isTopLayer()) return;
-      if (e.key === "Escape") onClose();
-      else if (e.key === "ArrowRight") handleNext();
-      else if (e.key === "ArrowLeft") handlePrev();
+      if (e.defaultPrevented || !isTopLayer()) return;
+      const act = e.key === "Escape" ? onCloseRef.current : e.key === "ArrowRight" ? handleNextRef.current : e.key === "ArrowLeft" ? handlePrevRef.current : null;
+      if (!act) return;
+      e.preventDefault();
+      act();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose, handleNext, handlePrev, isTopLayer]);
+  }, [open, isTopLayer, onCloseRef, handleNextRef, handlePrevRef]);
   if (!open || !step) return null;
   const padding = 8;
   const spotlightRadius = 8;
@@ -14522,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));
@@ -14537,7 +16176,7 @@ function usePagination(list, options = {}) {
     pageSize,
     totalItems,
     totalPages,
-    range,
+    range: range2,
     shown: items.length,
     hasMore,
     loadMore,
@@ -14593,7 +16232,7 @@ function useDestructiveAction(options) {
     }
     setOpen(true);
   };
-  const matches = !typedRequired || typed.trim().toLowerCase() === typedText.trim().toLowerCase();
+  const matches2 = !typedRequired || typed.trim().toLowerCase() === typedText.trim().toLowerCase();
   const element = open ? /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -14604,7 +16243,7 @@ function useDestructiveAction(options) {
       variant: "destructive",
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, disabled: busy, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => void confirm(), disabled: !matches || busy, loading: busy, children: label })
+        /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => void confirm(), disabled: !matches2 || busy, loading: busy, children: label })
       ] }),
       children: typedRequired && /* @__PURE__ */ jsx(Field, { label: /* @__PURE__ */ jsxs(Fragment, { children: [
         "Type ",
@@ -14754,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