gridsmith-ui 0.17.1 → 0.17.3

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Button, useAppShell, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-J43HCK7Q.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-J43HCK7Q.js';
+import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-CIVSNXFG.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-CIVSNXFG.js';
 import { Skeleton } from './chunk-Z63OSN64.js';
 export { Skeleton } from './chunk-Z63OSN64.js';
-import { FOCUSABLE, usePopupFocus, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-YQABRUWD.js';
-export { useGridKeyboard } from './chunk-YQABRUWD.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
+export { useGridKeyboard } from './chunk-JXANCXK6.js';
 import { Link } from './chunk-XGSQOMEY.js';
 export { CodeBlock, Divider, Link } from './chunk-XGSQOMEY.js';
 import { Badge } from './chunk-PVTGMCVR.js';
@@ -2012,8 +2012,8 @@ function DateRangePicker({
   };
   const previewEnd = value.start && !value.end && hover && hover >= value.start ? hover : null;
   const rangeStart = value.start;
-  const rangeEnd = value.end ?? previewEnd;
-  const inRange = (d) => !!(rangeStart && rangeEnd && d > rangeStart && d < rangeEnd);
+  const rangeEnd2 = value.end ?? previewEnd;
+  const inRange = (d) => !!(rangeStart && rangeEnd2 && d > rangeStart && d < rangeEnd2);
   const months = [viewDate, addMonths(viewDate, 1)];
   const summary = value.start && value.end ? `${fmt(value.start)} \u2013 ${fmt(value.end)}` : value.start ? `${fmt(value.start)} \u2013 \u2026` : null;
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
@@ -2094,7 +2094,7 @@ function DateRangePicker({
                 getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", children: week.map((d) => {
                   if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, d.toISOString());
                   const isStart = !!rangeStart && isSameDay2(d, rangeStart);
-                  const isEnd = !!rangeEnd && isSameDay2(d, rangeEnd);
+                  const isEnd = !!rangeEnd2 && isSameDay2(d, rangeEnd2);
                   const between = inRange(d);
                   const dis = isDisabledDay(d);
                   return /* @__PURE__ */ jsx(
@@ -2325,18 +2325,21 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     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: "*" })
+  return (
+    // In a settings panel a field keeps the narrow reading width however wide the page is (--ds-form-max, Sprint 25.9 A4)
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", 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
       ] }),
-      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" })
-  ] });
+      /* @__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 });
@@ -2506,7 +2509,8 @@ function SliderRange({
   label,
   "aria-label": ariaLabel,
   "aria-describedby": describedByProp,
-  trackStyle
+  trackStyle,
+  formatValue
 }) {
   const field = useField();
   const ownId = useId();
@@ -2519,6 +2523,8 @@ function SliderRange({
   const high = isRange ? value[1] : value;
   const trackRef = useRef(null);
   const pct = (v) => (v - min) / (max - min) * 100;
+  const shown = (v) => formatValue ? formatValue(v) : v;
+  const valueText = (v) => formatValue ? formatValue(v) : void 0;
   const handleChange = useCallback(
     (which, raw) => {
       const v = Math.round(raw / step) * step;
@@ -2571,7 +2577,7 @@ function SliderRange({
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-ds-1", disabled && "opacity-disabled", className), children: [
     (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 })
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-xs font-mono tabular-nums text-[var(--ds-text-muted)]", children: isRange ? `${shown(low)} \u2013 ${shown(high)}` : shown(low) })
     ] }),
     isRange && nameId && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { id: `${ownId}-minimum`, hidden: true, children: "minimum" }),
@@ -2604,6 +2610,7 @@ function SliderRange({
               "aria-valuemin": min,
               "aria-valuemax": high,
               "aria-valuenow": low,
+              "aria-valuetext": valueText(low),
               "aria-invalid": error || void 0,
               onKeyDown: handleKeyDown("low"),
               onPointerDown: handlePointerDown("low"),
@@ -2629,6 +2636,7 @@ function SliderRange({
               "aria-valuemin": isRange ? low : min,
               "aria-valuemax": max,
               "aria-valuenow": high,
+              "aria-valuetext": valueText(high),
               "aria-invalid": error || void 0,
               onKeyDown: handleKeyDown("high"),
               onPointerDown: handlePointerDown("high"),
@@ -4302,7 +4310,7 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     f.message
   ] }, f.id || f.label)) }) }) : null;
   const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5", className), noValidate: true, children: [
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
     summaryNode && /* @__PURE__ */ jsx("div", { "data-form-error-summary": "", children: summaryNode }),
     children,
     actionsNode
@@ -5381,11 +5389,27 @@ var columnClasses = {
   3: "grid-cols-3",
   4: "grid-cols-4"
 };
+var autoColumnClasses = {
+  horizontal: {
+    2: "grid-cols-[repeat(auto-fill,minmax(max(min(20rem,100%),calc((100%_-_var(--ds-space-8))/2)),1fr))]",
+    3: "grid-cols-[repeat(auto-fill,minmax(max(min(20rem,100%),calc((100%_-_2*var(--ds-space-8))/3)),1fr))]",
+    4: "grid-cols-[repeat(auto-fill,minmax(max(min(20rem,100%),calc((100%_-_3*var(--ds-space-8))/4)),1fr))]"
+  },
+  vertical: {
+    2: "grid-cols-[repeat(auto-fill,minmax(max(min(8rem,100%),calc((100%_-_var(--ds-space-6))/2)),1fr))]",
+    3: "grid-cols-[repeat(auto-fill,minmax(max(min(8rem,100%),calc((100%_-_2*var(--ds-space-6))/3)),1fr))]",
+    4: "grid-cols-[repeat(auto-fill,minmax(max(min(8rem,100%),calc((100%_-_3*var(--ds-space-6))/4)),1fr))]"
+  }
+};
 var spanClasses = {
   2: "col-span-2",
   3: "col-span-3",
   4: "col-span-4"
 };
+function spanClass(span, columns) {
+  if (!span || span <= 1) return void 0;
+  return span >= columns ? "col-span-full" : spanClasses[span];
+}
 var stackBreakpoints = {
   sm: "max-sm:grid-cols-1",
   md: "max-md:grid-cols-1",
@@ -5402,6 +5426,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
 }, ref) {
   const s = sizeStyles3[size];
   const stackBelow = stackBelowProp ?? (columns > 1 ? "sm" : void 0);
+  const templateClass = (layout) => columns > 1 && stackBelow !== "none" ? autoColumnClasses[layout][columns] : columnClasses[columns];
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "dl",
@@ -5409,7 +5434,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
         ref,
         className: cn(
           "grid",
-          columnClasses[columns],
+          templateClass("vertical"),
           "gap-x-ds-6 gap-y-ds-1",
           stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
           dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
@@ -5420,7 +5445,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
           {
             className: cn(
               s.py,
-              item.span && item.span > 1 && spanClasses[item.span]
+              spanClass(item.span, columns)
             ),
             children: [
               /* @__PURE__ */ jsxs(
@@ -5451,7 +5476,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
       ref,
       className: cn(
         "grid",
-        columnClasses[columns],
+        templateClass("horizontal"),
         "gap-x-ds-8",
         stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
         dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
@@ -5464,7 +5489,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
             "flex items-start justify-between",
             s.py,
             s.gap,
-            item.span && item.span > 1 && spanClasses[item.span]
+            spanClass(item.span, columns)
           ),
           children: [
             /* @__PURE__ */ jsxs(
@@ -5581,6 +5606,22 @@ function TruncCell({ children, lines }) {
   if (!isTruncated) return cell;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: cell });
 }
+var TITLE_CLASSES = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] break-words";
+var FRAME_CLASSES = cn(
+  "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+  "rounded-[var(--ds-radius-md)]",
+  GLASS_SURFACE,
+  "bg-[var(--ds-bg-surface)]"
+);
+function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
+  return /* @__PURE__ */ jsxs("div", { "data-table-heading": "", className: cn("flex flex-wrap items-start justify-between gap-ds-4", inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
+      /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title }),
+      description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-[var(--ds-text-muted)]", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: actions })
+  ] });
+}
 function Table({
   columns,
   data,
@@ -5601,8 +5642,14 @@ function Table({
   emptyState,
   onRowClick,
   mobileBreakpoint: mobileBreakpointProp,
+  title,
+  description,
+  actions,
   ref
 }) {
+  const headingId = useId();
+  const titleId = `${headingId}-title`;
+  const descriptionId = `${headingId}-description`;
   const [internalSortKey, setInternalSortKey] = useState(null);
   const [internalSortDir, setInternalSortDir] = useState(null);
   const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
@@ -5669,14 +5716,21 @@ function Table({
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
+  const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
+  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", className), children: [
+    cardHeading,
+    body
+  ] });
   if (isMobile) {
     if (loading) {
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
+      if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-10", children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) }));
+      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
     }
     if (data.length === 0 && emptyState) {
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
+      if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", children: emptyState }));
+      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    return /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref: title ? void 0 : ref, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
       return /* @__PURE__ */ jsxs(
         "div",
@@ -5710,173 +5764,179 @@ function Table({
         i
       );
     }) }) });
+    return title ? titledCards(cards) : cards;
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-ds-list": "",
-      className: cn(
-        "w-full overflow-x-auto",
-        "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-        "rounded-[var(--ds-radius-md)]",
-        GLASS_SURFACE,
-        "bg-[var(--ds-bg-surface)]",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
-          selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: allSelected,
-              indeterminate: someSelected,
-              onChange: toggleAll
-            }
-          ) }),
-          expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
-          columns.map((col) => {
-            const isSortable = sortable || col.sortable;
-            const isActiveSort = sortKey === col.key;
-            const headerKind = kindOf(col);
-            const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
-            const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
-            return /* @__PURE__ */ jsx(
-              "th",
-              {
-                className: cn(
-                  density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
-                  shrink && "w-px whitespace-nowrap",
-                  "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
-                  "text-xs uppercase tracking-wider",
-                  headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
-                  isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
-                ),
-                style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
-                onClick: isSortable ? () => handleSort(col.key) : void 0,
-                children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
-                  col.header,
-                  isSortable && isActiveSort && /* @__PURE__ */ jsx(
+  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : {}, children: [
+    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
+      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: allSelected,
+          indeterminate: someSelected,
+          onChange: toggleAll
+        }
+      ) }),
+      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
+      columns.map((col) => {
+        const isSortable = sortable || col.sortable;
+        const isActiveSort = sortKey === col.key;
+        const headerKind = kindOf(col);
+        const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
+        const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: cn(
+              density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+              shrink && "w-px whitespace-nowrap",
+              "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
+              "text-xs uppercase tracking-wider",
+              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
+              isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
+            ),
+            style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
+            onClick: isSortable ? () => handleSort(col.key) : void 0,
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
+              col.header,
+              isSortable && isActiveSort && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "chevron-right",
+                  size: 12,
+                  className: cn(
+                    "transition-transform",
+                    sortDir === "asc" ? "-rotate-90" : "rotate-90"
+                  )
+                }
+              )
+            ] })
+          },
+          col.key
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        className: "px-ds-4 py-ds-10 text-center",
+        children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
+      }
+    ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
+        children: emptyState
+      }
+    ) }) : sortedWithIndices.map(({ row, originalIdx }, i) => {
+      const isSelected = selectedSet.has(originalIdx);
+      const isExpanded = expandedRows.has(i);
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: cn(
+              "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
+              "transition-colors",
+              isSelected ? "bg-[var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50" : "hover:bg-[var(--ds-bg-muted)]",
+              onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
+            ),
+            onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(row, originalIdx);
+              }
+            } : void 0,
+            children: [
+              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx) }) }),
+              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => toggleExpand(i),
+                  className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
+                  "aria-expanded": isExpanded,
+                  "aria-label": "Expand row",
+                  children: /* @__PURE__ */ jsx(
                     Icon,
                     {
                       name: "chevron-right",
-                      size: 12,
-                      className: cn(
-                        "transition-transform",
-                        sortDir === "asc" ? "-rotate-90" : "rotate-90"
-                      )
+                      size: 14,
+                      className: cn("transition-transform", isExpanded && "rotate-90")
                     }
                   )
-                ] })
-              },
-              col.key
-            );
-          })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-          "td",
-          {
-            colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
-            className: "px-ds-4 py-ds-10 text-center",
-            children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
+                }
+              ) }),
+              columns.map((col) => {
+                const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
+                const kind = kindOf(col);
+                const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
+                const cellContent = row[col.key];
+                const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
+                let inner;
+                if (truncLines > 0) {
+                  inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
+                } else if (kind === "email") {
+                  inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
+                } else {
+                  inner = cellContent;
+                }
+                const align = col.align ?? (kind === "number" ? "right" : "left");
+                if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
+                  inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
+                }
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(
+                      density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+                      "text-[var(--ds-text-primary)]",
+                      alignClass,
+                      shrink && "w-px whitespace-nowrap"
+                    ),
+                    style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
+                    children: inner
+                  },
+                  col.key
+                );
+              })
+            ]
           }
-        ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        ),
+        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
           "td",
           {
-            colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
-            className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
-            children: emptyState
+            colSpan: columns.length + (selectable ? 1 : 0) + 1,
+            className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
+            children: renderExpanded(row, i)
           }
-        ) }) : sortedWithIndices.map(({ row, originalIdx }, i) => {
-          const isSelected = selectedSet.has(originalIdx);
-          const isExpanded = expandedRows.has(i);
-          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsxs(
-              "tr",
-              {
-                className: cn(
-                  "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
-                  "transition-colors",
-                  isSelected ? "bg-[var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50" : "hover:bg-[var(--ds-bg-muted)]",
-                  onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
-                ),
-                onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
-                tabIndex: onRowClick ? 0 : void 0,
-                onKeyDown: onRowClick ? (e) => {
-                  if (e.target !== e.currentTarget) return;
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    onRowClick(row, originalIdx);
-                  }
-                } : void 0,
-                children: [
-                  selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx) }) }),
-                  expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => toggleExpand(i),
-                      className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
-                      "aria-expanded": isExpanded,
-                      "aria-label": "Expand row",
-                      children: /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          name: "chevron-right",
-                          size: 14,
-                          className: cn("transition-transform", isExpanded && "rotate-90")
-                        }
-                      )
-                    }
-                  ) }),
-                  columns.map((col) => {
-                    const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
-                    const kind = kindOf(col);
-                    const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
-                    const cellContent = row[col.key];
-                    const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
-                    let inner;
-                    if (truncLines > 0) {
-                      inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
-                    } else if (kind === "email") {
-                      inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
-                    } else {
-                      inner = cellContent;
-                    }
-                    const align = col.align ?? (kind === "number" ? "right" : "left");
-                    if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
-                      inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
-                    }
-                    return /* @__PURE__ */ jsx(
-                      "td",
-                      {
-                        className: cn(
-                          density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
-                          "text-[var(--ds-text-primary)]",
-                          alignClass,
-                          shrink && "w-px whitespace-nowrap"
-                        ),
-                        style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
-                        children: inner
-                      },
-                      col.key
-                    );
-                  })
-                ]
-              }
-            ),
-            expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-              "td",
-              {
-                colSpan: columns.length + (selectable ? 1 : 0) + 1,
-                className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
-                children: renderExpanded(row, i)
-              }
-            ) })
-          ] }, i);
-        }) })
-      ] })
-    }
-  );
+        ) })
+      ] }, i);
+    }) })
+  ] });
+  if (!title) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-ds-list": "",
+        "data-gs": "table",
+        className: cn(
+          "w-full overflow-x-auto",
+          FRAME_CLASSES,
+          className
+        ),
+        children: table
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("w-full flex flex-col", FRAME_CLASSES, className), children: [
+    /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
+    /* @__PURE__ */ jsx("div", { "data-table-scroll": "", className: "min-h-0 overflow-x-auto rounded-b-[inherit]", children: table })
+  ] });
 }
 function optionsKeyForFit(options) {
   return options.map((o) => `${o.value}:${o.label}`).join("|");
@@ -8386,6 +8446,7 @@ function Carousel({
     "div",
     {
       ref,
+      "data-gs-clip": "",
       className: cn(
         "relative overflow-hidden rounded-[var(--ds-radius-md)]",
         "bg-[var(--ds-bg-muted)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -9329,12 +9390,19 @@ var DAY_MS = 864e5;
 var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
 var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS);
 function dayOfDate(d) {
-  if (Number.isNaN(d.getTime())) return NaN;
+  const t = d.getTime();
+  if (Number.isNaN(t)) return NaN;
+  const day = utcDay(d.getFullYear(), d.getMonth(), d.getDate());
+  const first = new Date(t);
+  first.setHours(0, 0, 0, 0);
+  if (first.getTime() === t) return day;
   const ms = ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1e3 + d.getMilliseconds();
-  return utcDay(d.getFullYear(), d.getMonth(), d.getDate()) + ms / DAY_MS;
+  return day + ms / DAY_MS;
 }
 function dayOf(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : NaN;
   if (value instanceof Date) return dayOfDate(value);
+  if (typeof value !== "string") return NaN;
   const m = DATE_ONLY.exec(value.trim());
   if (!m) return dayOfDate(new Date(value));
   const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
@@ -9347,10 +9415,15 @@ function dateOfDay(day) {
   const u = new Date(whole * DAY_MS);
   return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole) * DAY_MS));
 }
+function isWholeDay(value) {
+  return typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(dayOf(value));
+}
 function endDayOf(value) {
   const day = dayOf(value);
-  const wholeDay2 = typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(day);
-  return wholeDay2 ? day + 1 : day;
+  return typeof value !== "number" && isWholeDay(value) ? day + 1 : day;
+}
+function rangeEnd(start, end) {
+  return end instanceof Date && !isWholeDay(start) ? dayOf(end) : endDayOf(end);
 }
 var MINOR = { day: "day", week: "week", month: "month", quarter: "quarter" };
 var MAJOR = { day: "month", week: "month", month: "year", quarter: "year" };
@@ -9408,26 +9481,33 @@ function labelsOf(unit, role, day, locale) {
     forms = role === "major" ? [f({ month: "long", year: "numeric" }), f({ month: "short", year: "numeric" }), f({ month: "short" }), f({ month: "narrow" })] : [f({ month: "long" }), f({ month: "short" }), f({ month: "narrow" })];
   } else if (unit === "quarter") forms = [`Q${Math.floor(new Date(day * DAY_MS).getUTCMonth() / 3) + 1}`];
   else forms = [f({ year: "numeric" }), f({ year: "2-digit" })];
-  return [...new Set(forms)];
+  return forms;
 }
 var DENSITY = { day: 56, week: 16, month: 4, quarter: 1.5 };
 var todays = /* @__PURE__ */ new WeakMap();
+var awaiting = /* @__PURE__ */ new WeakSet();
+function awaitsToday(scale) {
+  return awaiting.has(scale);
+}
 function calendarDay(day) {
   const d = Math.floor(day);
   return { day: d, weekday: weekday(d), key: keyOf("day", d) };
 }
 function ticks(unit, role, s) {
   const out = [];
-  for (let p = periodStart(unit, s.startDay, s.weekStartsOn); p < s.endDay; p = periodAfter(unit, p)) {
+  for (let p = periodStart(unit, s.startDay, s.weekStartsOn); p < s.endDay; ) {
+    const next = periodAfter(unit, p);
     const from = Math.max(p, s.startDay);
-    const to = Math.min(periodAfter(unit, p), s.endDay);
+    const to = Math.min(next, s.endDay);
     out.push({ key: keyOf(unit, p), day: from, x: (from - s.startDay) * s.pxPerDay, width: (to - from) * s.pxPerDay, weekday: weekday(from), labels: labelsOf(unit, role, p, s.locale) });
+    if (!(next > p)) break;
+    p = next;
   }
   return out;
 }
 function build(s) {
   const { startDay, pxPerDay } = s;
-  const x = (value) => (startIndex(value) - startDay) * pxPerDay;
+  const x = (value) => (dayOf(value) - startDay) * pxPerDay;
   const inRange = (d) => d >= startDay && d < s.endDay;
   const todayDay = Math.floor(s.todayValue);
   const scale = {
@@ -9437,9 +9517,9 @@ function build(s) {
     pxPerDay,
     width: (s.endDay - startDay) * pxPerDay,
     x,
-    span: (start, end = start) => {
+    span: (start, end) => {
       const x0 = x(start);
-      return { x: x0, width: Math.max(0, (endIndex(end) - startDay) * pxPerDay - x0) };
+      return { x: x0, width: Math.max(0, (rangeEnd(start, end ?? start) - startDay) * pxPerDay - x0) };
     },
     dayAt: (px) => startDay + px / pxPerDay,
     major: ticks(MAJOR[s.zoom], "major", s),
@@ -9452,9 +9532,7 @@ function build(s) {
   todays.set(scale, s.todayValue);
   return scale;
 }
-var toMinute = (day) => Math.round(day * 1440) / 1440;
-var startIndex = (value) => typeof value === "number" ? value : dayOf(value);
-var endIndex = (value) => typeof value === "number" ? value : endDayOf(value);
+var toMinute = (day) => Math.floor(day * 1440 + 1e-6) / 1440;
 function scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, pxPerDay, pad3) {
   const fallback = Number.isFinite(todayValue) ? Math.floor(todayValue) : 0;
   const a = Number.isFinite(from) ? from : fallback;
@@ -9470,28 +9548,44 @@ function scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, pxPerDay, p
   }
   return build({ zoom, startDay, endDay, pxPerDay: pxPerDay > 0 ? pxPerDay : DENSITY[zoom], todayValue, weekStartsOn, locale });
 }
-function extendTimeScale(scale, width) {
-  if (!(width > scale.width) || !(scale.pxPerDay > 0)) return scale;
+function extendedEnd(scale, width) {
+  if (!(width > scale.width) || !(scale.pxPerDay > 0)) return scale.endDay;
   const unit = MINOR[scale.zoom];
   const last = scale.startDay + Math.ceil(width / scale.pxPerDay) - 1;
-  const endDay = periodAfter(unit, periodStart(unit, last, scale.weekStartsOn));
+  return periodAfter(unit, periodStart(unit, last, scale.weekStartsOn));
+}
+function extendTimeScaleTo(scale, endDay) {
+  if (!(endDay > scale.endDay)) return scale;
   const todayValue = todays.get(scale) ?? scale.now ?? scale.today ?? NaN;
-  return build({ zoom: scale.zoom, startDay: scale.startDay, endDay, pxPerDay: scale.pxPerDay, todayValue, weekStartsOn: scale.weekStartsOn, locale: scale.locale });
+  const extended = build({ zoom: scale.zoom, startDay: scale.startDay, endDay, pxPerDay: scale.pxPerDay, todayValue, weekStartsOn: scale.weekStartsOn, locale: scale.locale });
+  if (awaiting.has(scale)) awaiting.add(extended);
+  return extended;
 }
+var noSubscription = () => () => {
+};
+var inBrowser = () => true;
+var onServer = () => false;
 function useTimeScale({ start, end, zoom, today, weekStartsOn = 1, locale, pxPerDay, pad: pad3 = 0 }) {
+  const readable = useSyncExternalStore(noSubscription, inBrowser, onServer);
   const [mounted] = useState(() => toMinute(dayOf(/* @__PURE__ */ new Date())));
-  const from = startIndex(start);
-  const to = endIndex(end);
-  const todayValue = today === void 0 ? mounted : toMinute(dayOf(today));
+  const pending = today === void 0 && !readable;
+  const from = dayOf(start);
+  const to = rangeEnd(start, end);
+  const todayValue = today !== void 0 ? toMinute(dayOf(today)) : pending ? NaN : mounted;
   const density = pxPerDay?.[zoom] ?? DENSITY[zoom];
-  return useMemo(() => scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, density, pad3), [from, to, zoom, todayValue, weekStartsOn, locale, density, pad3]);
+  return useMemo(() => {
+    const scale = scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, density, pad3);
+    if (pending) awaiting.add(scale);
+    return scale;
+  }, [from, to, zoom, todayValue, weekStartsOn, locale, density, pad3, pending]);
 }
 function timeExtent(ranges) {
   let start = Infinity;
   let end = -Infinity;
   for (const r of ranges) {
+    if (r == null) continue;
     const s = dayOf(r.start);
-    const e = endDayOf(r.end ?? r.start);
+    const e = r.end == null ? endDayOf(r.start) : rangeEnd(r.start, r.end);
     if (Number.isFinite(s)) start = Math.min(start, s);
     if (Number.isFinite(e)) end = Math.max(end, e);
   }
@@ -9499,7 +9593,6 @@ function timeExtent(ranges) {
 }
 var DAY_WORDS = { day: "numeric", month: "long" };
 var TIME_WORDS = { hour: "2-digit", minute: "2-digit" };
-var wholeDay = (value) => typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(value instanceof Date ? dayOf(value) : value);
 var SEPARATOR = /\s*[\u2010-\u2015\u2212~\uff5e\u301c-]\s*/;
 var english = (f) => new Intl.Locale(f.resolvedOptions().locale).language === "en";
 function range(f, a, b, to) {
@@ -9518,11 +9611,13 @@ function range(f, a, b, to) {
   if (!joined) out.splice(lastOfStart + 1, 0, to);
   return out.join("");
 }
-function formatDateRange(start, end = start, { locale, to, day = DAY_WORDS, time = TIME_WORDS } = {}) {
-  const from = startIndex(start);
-  const stop = endIndex(end);
+function formatDateRange(start, end, words) {
+  const { locale, to, day = DAY_WORDS, time = TIME_WORDS } = words ?? {};
+  const until = end ?? start;
+  const from = dayOf(start);
+  const stop = rangeEnd(start, until);
   if (!Number.isFinite(from) || !Number.isFinite(stop)) return "";
-  const timed = !wholeDay(start) || !wholeDay(end);
+  const timed = !isWholeDay(start) || !isWholeDay(until);
   const first = timed ? from : Math.floor(from);
   const last = timed ? Math.max(from, stop) : Math.max(first, Math.ceil(stop) - 1);
   const a = new Date(first * DAY_MS);
@@ -9552,7 +9647,7 @@ function createScrollStore() {
 var TimeViewportCtx = createContext(null);
 var TimeViewportScrollCtx = createContext(null);
 var UNMEASURED = { scrollLeft: 0, visibleWidth: 0 };
-var noSubscription = () => () => {
+var noSubscription2 = () => () => {
 };
 var unmeasured = () => UNMEASURED;
 function useTimeViewportLayout() {
@@ -9562,7 +9657,7 @@ function useTimeViewportLayout() {
 }
 function useTimeViewport() {
   const store = useContext(TimeViewportScrollCtx);
-  const scroll = useSyncExternalStore(store?.subscribe ?? noSubscription, store?.get ?? unmeasured, unmeasured);
+  const scroll = useSyncExternalStore(store?.subscribe ?? noSubscription2, store?.get ?? unmeasured, unmeasured);
   return { ...useTimeViewportLayout(), ...scroll };
 }
 function fitLabels(boxes, measure, { gap = 8, align = "start", visible } = {}) {
@@ -9812,17 +9907,16 @@ var ROW_HEIGHT = 40;
 var MARGIN = 16;
 var WHEEL_STEP = 50;
 var WHEEL_PAUSE = 250;
-var FIELD = "input, select, textarea, [contenteditable='true']";
 var border = "border-[var(--ds-border-subtle)]";
-function writeScroll(el, visibleWidth) {
-  el.style.setProperty("--time-scroll", String(el.scrollLeft));
-  el.style.setProperty("--time-view-end", String(el.scrollLeft + visibleWidth));
+function writeScroll(rows, left, visibleWidth) {
+  rows?.style.setProperty("--time-scroll", String(left));
+  rows?.style.setProperty("--time-view-end", String(left + visibleWidth));
 }
 var TimeViewport = forwardRef(function TimeViewport2({
   scale,
   onZoomChange,
   zooms = TIME_ZOOMS,
-  labelWidth: labelWidthProp = 240,
+  labelWidth = 240,
   labelHeader,
   header,
   toolbar,
@@ -9837,6 +9931,7 @@ var TimeViewport = forwardRef(function TimeViewport2({
 }, ref) {
   const scrollerRef = useRef(null);
   const headerRef = useRef(null);
+  const rowsRef = useRef(null);
   const [frame, setFrame] = useState({ width: 0, header: 0 });
   useLayoutEffect(() => {
     const el = scrollerRef.current;
@@ -9854,19 +9949,22 @@ var TimeViewport = forwardRef(function TimeViewport2({
     return () => ro.disconnect();
   }, []);
   const phone = frame.width > 0 && frame.width < PHONE_BELOW;
-  const labelWidth = phone ? Math.min(labelWidthProp, Math.max(MIN_LABEL, Math.round(frame.width * 0.36))) : labelWidthProp;
-  const visibleWidth = Math.max(0, frame.width - labelWidth);
-  const drawn = useMemo(() => extendTimeScale(scale, visibleWidth), [scale, visibleWidth]);
+  const pinnedWidth = phone ? Math.min(labelWidth, Math.max(MIN_LABEL, Math.round(frame.width * 0.36))) : labelWidth;
+  const visibleWidth = Math.max(0, frame.width - pinnedWidth);
+  const drawnEnd = extendedEnd(scale, visibleWidth);
+  const drawn = useMemo(() => extendTimeScaleTo(scale, drawnEnd), [scale, drawnEnd]);
   const [store] = useState(createScrollStore);
-  const lastLeft = useRef(0);
-  const latest = useLatest({ drawn, visibleWidth, labelWidth, headerHeight: frame.header });
+  const wantLeft = useRef(0);
+  const latest = useLatest({ drawn, visibleWidth, labelWidth: pinnedWidth, headerHeight: frame.header });
   const setLeft = useCallback((left) => {
     const el = scrollerRef.current;
     if (!el) return;
-    el.scrollLeft = Math.max(0, left);
-    lastLeft.current = el.scrollLeft;
-    writeScroll(el, latest.current.visibleWidth);
-    store.set({ scrollLeft: el.scrollLeft, visibleWidth: latest.current.visibleWidth });
+    const target = Math.max(0, left);
+    el.scrollLeft = target;
+    const now = el.scrollLeft;
+    wantLeft.current = Math.abs(now - target) < 1 ? target : now;
+    writeScroll(rowsRef.current, now, latest.current.visibleWidth);
+    store.set({ scrollLeft: now, visibleWidth: latest.current.visibleWidth });
   }, [store, latest]);
   const api = useMemo(() => {
     const ensureVisible = (x0, x1) => {
@@ -9889,9 +9987,18 @@ var TimeViewport = forwardRef(function TimeViewport2({
       },
       page(direction) {
         const { drawn: s, visibleWidth: vw } = latest.current;
-        const target = (scrollerRef.current?.scrollLeft ?? 0) + direction * vw;
-        const tick = s.minor.reduce((best, t) => Math.abs(t.x - target) < Math.abs(best - target) ? t.x : best, Infinity);
-        setLeft(Number.isFinite(tick) ? tick : target);
+        const left = scrollerRef.current?.scrollLeft ?? 0;
+        const target = left + direction * vw;
+        let to = target;
+        let gap = vw / 2;
+        for (const t of s.minor) {
+          const d = Math.abs(t.x - target);
+          if (d <= gap && (t.x - left) * direction >= 1) {
+            to = t.x;
+            gap = d;
+          }
+        }
+        setLeft(to);
       },
       ensureVisible,
       reveal(target) {
@@ -9912,29 +10019,34 @@ var TimeViewport = forwardRef(function TimeViewport2({
   useImperativeHandle(ref, () => api, [api]);
   const todayAtX = todayAt === "now" ? drawn.now === null ? null : drawn.x(drawn.now) : drawn.today === null ? null : drawn.x(drawn.today) + drawn.pxPerDay / 2;
   const todayX = showToday ? todayAtX : null;
-  const layout = useMemo(() => ({ scale: drawn, labelWidth, showToday, todayX, compact: phone, ...api }), [drawn, labelWidth, showToday, todayX, phone, api]);
+  const layout = useMemo(() => ({ scale: drawn, labelWidth: pinnedWidth, showToday, todayX, compact: phone, ...api }), [drawn, pinnedWidth, showToday, todayX, phone, api]);
   const pending = useRef(null);
   const applied = useRef(null);
   useLayoutEffect(() => {
     const el = scrollerRef.current;
     if (!el || visibleWidth <= 0) return;
-    writeScroll(el, visibleWidth);
-    store.set({ scrollLeft: el.scrollLeft, visibleWidth });
+    const left = el.scrollLeft;
+    const publish = () => {
+      writeScroll(rowsRef.current, left, visibleWidth);
+      store.set({ scrollLeft: left, visibleWidth });
+    };
     const prev = applied.current;
-    applied.current = { startDay: drawn.startDay, pxPerDay: drawn.pxPerDay, visibleWidth };
+    let to = null;
     if (!prev) {
+      if (initialDate === void 0 && awaitsToday(drawn)) return publish();
       const at = initialDate !== void 0 ? drawn.x(initialDate) : todayAtX;
-      if (at !== null && Number.isFinite(at)) setLeft(at - visibleWidth / 2);
-      return;
+      if (at !== null && Number.isFinite(at)) to = at - visibleWidth / 2;
+    } else if (prev.startDay !== drawn.startDay || prev.pxPerDay !== drawn.pxPerDay || prev.visibleWidth !== visibleWidth) {
+      const want = pending.current;
+      pending.current = null;
+      const anchor = want && want.zoom === drawn.zoom ? want : { day: prev.startDay + (wantLeft.current + prev.visibleWidth / 2) / prev.pxPerDay, at: visibleWidth / 2 };
+      to = drawn.x(anchor.day) - anchor.at;
     }
-    const rescaled = prev.startDay !== drawn.startDay || prev.pxPerDay !== drawn.pxPerDay;
-    if (!rescaled && prev.visibleWidth === visibleWidth) return;
-    const want = pending.current;
-    pending.current = null;
-    const anchor = want && want.zoom === drawn.zoom ? want : { day: prev.startDay + (lastLeft.current + prev.visibleWidth / 2) / prev.pxPerDay, at: visibleWidth / 2 };
-    setLeft(drawn.x(anchor.day) - anchor.at);
+    applied.current = { startDay: drawn.startDay, pxPerDay: drawn.pxPerDay, visibleWidth };
+    if (to === null) return publish();
+    setLeft(to);
     const focused = document.activeElement;
-    if (focused instanceof HTMLElement && focused !== el && el.contains(focused)) api.reveal(focused);
+    if (prev && focused instanceof HTMLElement && focused !== el && el.contains(focused)) api.reveal(focused);
   }, [drawn, visibleWidth, initialDate, todayAtX, setLeft, store, api]);
   const shaded = [];
   if (shadeDays && drawn.pxPerDay >= SHADE_MIN) {
@@ -9956,7 +10068,7 @@ var TimeViewport = forwardRef(function TimeViewport2({
     const f = document.activeElement;
     if (!(f instanceof HTMLElement) || f === el || !el.contains(f)) return void 0;
     const r = f.getBoundingClientRect();
-    const x = (r.left + r.right) / 2 - el.getBoundingClientRect().left - labelWidth;
+    const x = (r.left + r.right) / 2 - el.getBoundingClientRect().left - pinnedWidth;
     return x >= 0 && x <= visibleWidth ? x : void 0;
   };
   const zoom = (direction, at) => {
@@ -9980,10 +10092,11 @@ var TimeViewport = forwardRef(function TimeViewport2({
   };
   const onKeyDown = (e) => {
     if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    if (!e.currentTarget.contains(e.target)) return;
     if (e.target instanceof HTMLElement && e.target.closest(FIELD)) return;
-    if (e.key === "+" || e.key === "=") {
+    if (ZOOM_KEYS.in.includes(e.key)) {
       if (zoom(-1)) e.preventDefault();
-    } else if (e.key === "-" || e.key === "\u2212") {
+    } else if (ZOOM_KEYS.out.includes(e.key)) {
       if (zoom(1)) e.preventDefault();
     } else if (e.shiftKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
       e.preventDefault();
@@ -9993,13 +10106,15 @@ var TimeViewport = forwardRef(function TimeViewport2({
   const wheel = useRef({ sum: 0, at: -Infinity });
   const onWheel = useLatest((e) => {
     if (!(e.ctrlKey || e.metaKey) || !onZoomChange) return;
-    e.preventDefault();
     const w = wheel.current;
-    if (e.timeStamp - w.at < WHEEL_PAUSE) return;
+    if (e.timeStamp - w.at < WHEEL_PAUSE) return e.preventDefault();
+    const direction = e.deltaY < 0 ? -1 : e.deltaY > 0 ? 1 : 0;
+    if (direction === 0 || zoomTo(direction) === null) return;
+    e.preventDefault();
     w.sum += e.deltaY * (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1);
     if (Math.abs(w.sum) < WHEEL_STEP) return;
     const el = scrollerRef.current;
-    const x = el ? e.clientX - el.getBoundingClientRect().left - labelWidth : NaN;
+    const x = el ? e.clientX - el.getBoundingClientRect().left - pinnedWidth : NaN;
     zoom(w.sum < 0 ? -1 : 1, x >= 0 && x <= visibleWidth ? x : void 0);
     wheel.current = { sum: 0, at: e.timeStamp };
   });
@@ -10030,9 +10145,10 @@ var TimeViewport = forwardRef(function TimeViewport2({
   const onScroll = () => {
     const el = scrollerRef.current;
     if (!el) return;
-    lastLeft.current = el.scrollLeft;
-    writeScroll(el, visibleWidth);
-    store.set({ scrollLeft: el.scrollLeft, visibleWidth });
+    const left = el.scrollLeft;
+    if (Math.abs(left - wantLeft.current) >= 1) wantLeft.current = left;
+    writeScroll(rowsRef.current, left, visibleWidth);
+    store.set({ scrollLeft: left, visibleWidth });
   };
   const headerNode = header === void 0 ? /* @__PURE__ */ jsx(TimeScaleHeader, {}) : header;
   const hasHeader = headerNode != null || labelHeader != null;
@@ -10064,14 +10180,14 @@ var TimeViewport = forwardRef(function TimeViewport2({
             tabIndex: tabStop ? 0 : void 0,
             onScroll,
             className: "peer h-full overflow-auto isolate outline-none",
-            style: { scrollPaddingInlineStart: labelWidth, scrollPaddingTop: frame.header },
-            children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", style: { width: labelWidth + drawn.width }, children: [
+            style: { scrollPaddingInlineStart: pinnedWidth, scrollPaddingTop: frame.header },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", style: { width: pinnedWidth + drawn.width }, children: [
               hasHeader && /* @__PURE__ */ jsxs("div", { ref: headerRef, className: cn("sticky top-0 z-[3] flex shrink-0 bg-[var(--ds-bg-surface)] border-b-[length:var(--ds-border-width)]", border), children: [
                 /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn("sticky start-0 z-[1] flex shrink-0 items-end px-ds-3 py-ds-1.5 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)] text-xs font-medium text-[var(--ds-text-secondary)]", border),
-                    style: { width: labelWidth },
+                    style: { width: pinnedWidth },
                     children: labelHeader
                   }
                 ),
@@ -10090,18 +10206,18 @@ var TimeViewport = forwardRef(function TimeViewport2({
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col", children: [
-                /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0", style: { insetInlineStart: labelWidth, width: drawn.width }, children: [
+                /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0", style: { insetInlineStart: pinnedWidth, width: drawn.width }, children: [
                   shaded.map((b) => /* @__PURE__ */ jsx("span", { "data-shaded-days": "", className: "absolute inset-y-0 bg-[var(--ds-bg-muted)] opacity-70", style: { insetInlineStart: b.x, width: b.width } }, b.key)),
                   drawn.minor.slice(1).map((t) => /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 border-s-[length:1px] border-[var(--ds-border-subtle)]", style: { insetInlineStart: t.x } }, t.key)),
                   todayX !== null && /* @__PURE__ */ jsx("span", { "data-today-line": "", className: "absolute inset-y-0 -translate-x-1/2 border-s-2 border-[var(--ds-accent-primary)]", style: { insetInlineStart: todayX } })
                 ] }),
-                children,
-                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("sticky start-0 z-[2] min-h-0 flex-1 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)]", border), style: { width: labelWidth } })
+                /* @__PURE__ */ jsx("div", { ref: rowsRef, "data-time-rows": "", className: "contents", children }),
+                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("sticky start-0 z-[2] min-h-0 flex-1 bg-[var(--ds-bg-surface)] border-e-[length:var(--ds-border-width)]", border), style: { width: pinnedWidth } })
               ] })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 peer-focus-visible:shadow-[inset_0_0_0_2px_var(--ds-border-focus)]" })
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 peer-focus-visible:shadow-[inset_0_0_0_2px_var(--ds-border-focus)] peer-focus-visible:outline-2 peer-focus-visible:-outline-offset-2 peer-focus-visible:outline-transparent" })
       ] })
     ] }) }) })
   );
@@ -10138,7 +10254,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
     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)) }),
+      /* @__PURE__ */ jsx("span", { "data-time-bar-label": "", "data-gs-clip": "", "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) {
@@ -10146,6 +10262,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
       "span",
       {
         "data-time-bar-label": "",
+        "data-gs-clip": "",
         className: "sticky flex min-w-0 items-center gap-ds-1 overflow-hidden whitespace-nowrap",
         style: { ...sticky, paddingInline: INSET, opacity: `clamp(0, calc((${inView} - ${MIN_TITLE}) * 1000), 1)` },
         children: typeof children === "string" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children
@@ -10157,7 +10274,8 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
     {
       ...props,
       ref: barRef,
-      className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)] outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", className),
+      "data-gs-clip": "",
+      className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)] outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]", className),
       style: { insetInlineStart: x, width: drawnWidth, ...style },
       children: label
     }
@@ -10175,13 +10293,39 @@ var HEAD = 6;
 var BESIDE = STUB + 6;
 var groupKey = (id) => `group:${id}`;
 var itemKey = (id) => `item:${id}`;
+var asDate = (value) => value instanceof Date || typeof value === "string" ? value : void 0;
+function datesOf(item) {
+  const start = asDate(item.start);
+  if (start === void 0 || !Number.isFinite(dayOf(start))) return null;
+  if (item.milestone || item.end === void 0 || item.end === null) return { start, end: start };
+  const end = asDate(item.end);
+  return end !== void 0 && Number.isFinite(endDayOf(end)) ? { start, end } : null;
+}
+function uniqueById(list) {
+  const seen = /* @__PURE__ */ new Set();
+  const repeated = /* @__PURE__ */ new Set();
+  const unique = [];
+  for (const entry of list) {
+    if (seen.has(entry.id)) repeated.add(entry.id);
+    else {
+      seen.add(entry.id);
+      unique.push(entry);
+    }
+  }
+  return repeated.size ? { unique, repeated: [...repeated] } : { unique: list, repeated: [] };
+}
 function ganttRows(items, groups, collapsed) {
   const known = new Set(groups.map((g) => g.id));
   const byGroup = /* @__PURE__ */ new Map();
   const loose = [];
   for (const item of items) {
-    if (item.group === void 0 || !known.has(item.group)) loose.push(item);
-    else byGroup.set(item.group, [...byGroup.get(item.group) ?? [], item]);
+    if (item.group === void 0 || !known.has(item.group)) {
+      loose.push(item);
+      continue;
+    }
+    const list = byGroup.get(item.group);
+    if (list) list.push(item);
+    else byGroup.set(item.group, [item]);
   }
   const shown = groups.filter((g) => byGroup.has(g.id));
   const topLevel = shown.length + loose.length;
@@ -10199,16 +10343,23 @@ function ganttRows(items, groups, collapsed) {
   return rows;
 }
 function itemShape(item, scale) {
+  const dates = datesOf(item);
+  if (!dates) return { kind: item.milestone ? "milestone" : "bar", x0: NaN, x1: NaN, in: NaN, out: NaN };
   if (item.milestone) {
-    const centre = scale.x((dayOf(item.start) + endDayOf(item.start)) / 2);
+    const centre = scale.x((dayOf(dates.start) + endDayOf(dates.start)) / 2);
     return { kind: "milestone", x0: centre - TIP, x1: centre + TIP, in: centre - TIP, out: centre + TIP };
   }
-  const { x, width } = scale.span(item.start, item.end ?? item.start);
+  const { x, width } = scale.span(dates.start, dates.end);
   const x1 = x + Math.max(width, MIN_BAR);
   return { kind: "bar", x0: x, x1, in: x, out: x1 };
 }
-function groupExtent(items) {
-  return timeExtent(items.map((i) => ({ start: i.start, end: i.milestone ? void 0 : i.end })));
+function itemsExtent(items) {
+  const ranges = [];
+  for (const item of items) {
+    const dates = datesOf(item);
+    if (dates) ranges.push(dates);
+  }
+  return timeExtent(ranges);
 }
 var drawable = (shape) => !!shape && Number.isFinite(shape.x0) && Number.isFinite(shape.x1);
 function ganttArrows(items, rows, shapeOf, collapsed) {
@@ -10249,19 +10400,37 @@ function labelPlace(shape, textWidth, scaleWidth, { pad: pad3 = 8, gap = BESIDE
   return shape.x0 - gap - textWidth >= 0 ? "before" : "after";
 }
 var TONES = {
-  neutral: { fill: "bg-[var(--ds-status-neutral)]", on: "text-[var(--ds-text-on-neutral)]" },
-  info: { fill: "bg-[var(--ds-status-info)]", on: "text-[var(--ds-text-on-info)]" },
+  neutral: { fill: "bg-[var(--ds-status-neutral)]", on: "text-[var(--ds-text-on-neutral)]", icon: "minus" },
+  info: { fill: "bg-[var(--ds-status-info)]", on: "text-[var(--ds-text-on-info)]", icon: "info" },
   success: { fill: "bg-[var(--ds-status-success)]", on: "text-[var(--ds-text-on-success)]", icon: "check" },
   warning: { fill: "bg-[var(--ds-status-warning)]", on: "text-[var(--ds-text-on-warning)]", icon: "warning" },
   error: { fill: "bg-[var(--ds-status-error)]", on: "text-[var(--ds-text-on-error)]", icon: "error" },
-  accent: { fill: "bg-[var(--ds-accent-primary)]", on: "text-[var(--ds-text-on-primary)]" }
+  accent: { fill: "bg-[var(--ds-accent-primary)]", on: "text-[var(--ds-text-on-primary)]", icon: "star" }
 };
 var ICON = 12;
 var ICON_GAP = 4;
 var LEVEL_INDENT = 16;
 var TARGET = 24;
+var NO_DATES = "no dates";
 var KNOCKOUT = 2;
+var EDGE = "border-[length:1px] border-transparent";
+var EDGE_WIDTH = 1;
 var SELECTED = "outline-solid outline-2 outline-offset-2 outline-[var(--ds-text-primary)]";
+var UNDATED_INSET = 16;
+var NO_GROUPS = [];
+var NO_STATUSES = {};
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+  let dev = false;
+  try {
+    dev = process.env.NODE_ENV !== "production";
+  } catch {
+    dev = false;
+  }
+  if (!dev || warned.has(message)) return;
+  warned.add(message);
+  console.warn(`Gantt: ${message}`);
+}
 function GanttArrows({ arrows, width, height }) {
   const { labelWidth } = useTimeViewportLayout();
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", "data-gantt-arrows": "", className: "pointer-events-none absolute top-0 overflow-visible", style: { insetInlineStart: labelWidth, width, height }, children: arrows.map((a) => /* @__PURE__ */ jsxs("g", { "data-from": a.from, "data-to": a.to, "data-routed": a.routed || void 0, className: "text-[var(--ds-text-muted)]", children: [
@@ -10269,23 +10438,47 @@ function GanttArrows({ arrows, width, height }) {
     /* @__PURE__ */ jsx("path", { d: a.head, fill: "currentColor" })
   ] }, a.key)) });
 }
+function Cue({ name, size }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-gantt-cue": name, className: "flex shrink-0", children: /* @__PURE__ */ jsx(Icon, { name, size }) });
+}
 function Legend({ statuses }) {
   const entries = Object.entries(statuses);
   if (!entries.length) return null;
   return /* @__PURE__ */ jsx("ul", { "aria-label": "Status key", className: "ms-auto flex flex-wrap items-center gap-x-ds-3 gap-y-ds-1 ps-ds-2 text-xs text-[var(--ds-text-secondary)]", children: entries.map(([key, s]) => {
     const tone = TONES[s.tone] ?? TONES.neutral;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-1.5", children: [
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("grid size-4 shrink-0 place-items-center rounded-[var(--ds-radius-sm)]", tone.fill, tone.on), children: tone.icon && /* @__PURE__ */ jsx(Icon, { name: tone.icon, size: 10 }) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("grid size-4 shrink-0 place-items-center rounded-[var(--ds-radius-sm)]", EDGE, tone.fill, tone.on), children: /* @__PURE__ */ jsx(Cue, { name: s.icon ?? tone.icon, size: 10 }) }),
       s.label
     ] }, key);
   }) });
 }
+function NoDates({ cue, selected, className, ...props }) {
+  const { labelWidth } = useTimeViewportLayout();
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center", children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      "data-gantt-shape": "undated",
+      className: cn(
+        "sticky flex cursor-pointer items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] border-[length:1px] border-dashed border-[var(--ds-border-default)] px-ds-1.5 py-ds-0.5 text-xs text-[var(--ds-text-secondary)]",
+        "outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]",
+        selected && SELECTED,
+        className
+      ),
+      style: { insetInlineStart: labelWidth + UNDATED_INSET },
+      children: [
+        cue,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "No dates" })
+      ]
+    }
+  ) });
+}
 function Gantt({
   items,
-  groups = [],
+  groups = NO_GROUPS,
   selectedId,
   onSelect,
-  statuses = {},
+  statuses = NO_STATUSES,
   zoom: zoomProp,
   defaultZoom = "week",
   onZoomChange,
@@ -10293,6 +10486,7 @@ function Gantt({
   weekStartsOn,
   locale,
   renderLabel,
+  describe,
   labelHeader = "Task",
   toolbar,
   "aria-label": ariaLabel,
@@ -10304,31 +10498,53 @@ function Gantt({
     if (zoomProp === void 0) setZoomState(next);
     onZoomChange?.(next);
   };
+  const zoomable = zoomProp === void 0 || onZoomChange !== void 0;
   const [selectedState, setSelectedState] = useState(null);
-  const selected = selectedId !== void 0 ? selectedId : selectedState;
+  const [controlled, setControlled] = useState(selectedId !== void 0);
+  const [overridden, setOverridden] = useState(null);
+  if (!controlled && selectedId !== void 0) {
+    setControlled(true);
+    if (selectedState !== null && selectedState !== selectedId) setOverridden(selectedState);
+  }
+  const isControlled = controlled || selectedId !== void 0;
+  const selected = isControlled ? selectedId ?? null : selectedState;
+  useEffect(() => {
+    if (overridden !== null) {
+      warnOnce("selectedId was given a value after the Gantt had kept a selection of its own. To control the selection, pass selectedId from the first render (null for none); to let the Gantt keep it, leave selectedId out.");
+    }
+  }, [overridden]);
   const select = (item) => {
-    if (selectedId === void 0) setSelectedState(item?.id ?? null);
+    if (!isControlled) setSelectedState(item?.id ?? null);
     onSelect?.(item);
   };
   const [collapsed, setCollapsed] = useState(() => new Set(groups.filter((g) => g.defaultCollapsed).map((g) => g.id)));
-  const extent = useMemo(() => timeExtent(items.map((i) => ({ start: i.start, end: i.milestone ? void 0 : i.end }))), [items]);
+  const plan = useMemo(() => uniqueById(items), [items]);
+  const phases = useMemo(() => uniqueById(groups), [groups]);
+  useEffect(() => {
+    const quoted = (ids) => ids.map((id) => `"${id}"`).join(", ");
+    if (plan.repeated.length) warnOnce(`more than one item has the id ${quoted(plan.repeated)}; only the first of each is shown.`);
+    if (phases.repeated.length) warnOnce(`more than one group has the id ${quoted(phases.repeated)}; only the first of each is shown.`);
+  }, [plan, phases]);
+  const tasks = plan.unique;
+  const extent = useMemo(() => itemsExtent(tasks), [tasks]);
   const scale = useTimeScale({ start: extent.start, end: extent.end, zoom, today, weekStartsOn, locale, pad: 1 });
-  const rows = useMemo(() => ganttRows(items, groups, collapsed), [items, groups, collapsed]);
-  const shapes = useMemo(() => new Map(items.map((i) => [i.id, itemShape(i, scale)])), [items, scale]);
-  const extents = useMemo(() => new Map(rows.filter((r) => r.children).map((r) => [r.group.id, groupExtent(r.children)])), [rows]);
-  const arrows = useMemo(() => ganttArrows(items, rows, (i) => shapes.get(i.id), collapsed), [items, rows, shapes, collapsed]);
+  const rows = useMemo(() => ganttRows(tasks, phases.unique, collapsed), [tasks, phases, collapsed]);
+  const shapes = useMemo(() => new Map(tasks.map((i) => [i.id, itemShape(i, scale)])), [tasks, scale]);
+  const extents = useMemo(() => new Map(rows.filter((r) => r.children).map((r) => [r.group.id, itemsExtent(r.children)])), [rows]);
+  const arrows = useMemo(() => ganttArrows(tasks, rows, (i) => shapes.get(i.id), collapsed), [tasks, rows, shapes, collapsed]);
   const byKey = useMemo(() => new Map(rows.map((r) => [r.key, r])), [rows]);
   const names = useMemo(() => {
-    const byId = new Map(items.map((i) => [i.id, i]));
+    const byId = new Map(tasks.map((i) => [i.id, i]));
     const list = new Intl.ListFormat(locale, { type: "conjunction" });
     const out = /* @__PURE__ */ new Map();
-    for (const item of items) {
+    for (const item of tasks) {
+      const dates = datesOf(item);
       const after = (item.dependsOn ?? []).flatMap((id) => byId.has(id) && id !== item.id ? [byId.get(id).title] : []);
       const status = item.status === void 0 ? void 0 : statuses[item.status];
       out.set(itemKey(item.id), [
         item.title,
         item.milestone ? "milestone" : null,
-        formatDateRange(item.start, item.milestone ? item.start : item.end ?? item.start, { locale }),
+        dates ? formatDateRange(dates.start, dates.end, { locale }) : NO_DATES,
         status?.label ?? null,
         after.length ? `after ${list.format(after)}` : null
       ].filter((part) => part).join(", "));
@@ -10337,31 +10553,66 @@ function Gantt({
       if (!row.group || !row.children) continue;
       const e = extents.get(row.group.id);
       const count = row.children.length === 1 ? "1 item" : `${row.children.length} items`;
-      out.set(row.key, [row.group.title, formatDateRange(e.start, e.end, { locale }), count].filter((part) => part).join(", "));
+      const span = Number.isFinite(e.start) ? formatDateRange(e.start, e.end, { locale }) : NO_DATES;
+      out.set(row.key, [row.group.title, span, count].filter((part) => part).join(", "));
     }
     return out;
-  }, [items, rows, extents, statuses, locale]);
+  }, [tasks, rows, extents, statuses, locale]);
+  const nameOf = (row) => {
+    const name = names.get(row.key) ?? "";
+    const words = row.item && describe ? describe(row.item) : "";
+    return words ? `${name}, ${words}` : name;
+  };
+  const regionLabel = useMemo(() => {
+    const span = Number.isFinite(extent.start) ? formatDateRange(extent.start, extent.end, { locale }) : "";
+    return `${ariaLabel}, ${span || NO_DATES}`;
+  }, [ariaLabel, extent, locale]);
+  const hasStatuses = useMemo(() => Object.keys(statuses).length > 0, [statuses]);
+  const toneOf = (item) => {
+    const status = item.status === void 0 ? void 0 : statuses[item.status];
+    const tone = TONES[status?.tone ?? "neutral"] ?? TONES.neutral;
+    return { tone, cue: hasStatuses ? status?.icon ?? tone.icon : void 0 };
+  };
   const probeRef = useRef(null);
   const measure = useTextMeasure(probeRef);
   const treeRef = useRef(null);
   const viewportRef = useRef(null);
   const [activeState, setActive] = useState(null);
+  const [focusWithin, setFocusWithin] = useState(false);
   const selectedKey = selected === null ? null : itemKey(selected);
-  const active = activeState !== null && byKey.has(activeState) ? activeState : selectedKey !== null && byKey.has(selectedKey) ? selectedKey : rows[0]?.key ?? "";
-  const toggle = (id) => {
-    const key = groupKey(id);
-    const closing = !collapsed.has(id);
-    setCollapsed((cur) => {
-      const next = new Set(cur);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-    if (closing && byKey.get(active)?.parentKey === key) {
-      setActive(key);
-      if (treeRef.current?.contains(document.activeElement)) grid.focus(key);
+  const selectedRow = selectedKey !== null && byKey.has(selectedKey) ? selectedKey : null;
+  const lastFocused = activeState !== null && byKey.has(activeState) ? activeState : null;
+  const active = (focusWithin ? lastFocused : null) ?? selectedRow ?? lastFocused ?? rows[0]?.key ?? "";
+  const focusedRow = useRef(null);
+  useLayoutEffect(() => {
+    const was = focusedRow.current;
+    if (!was) return;
+    const row = byKey.get(was.key);
+    if (row) {
+      if (row.index !== was.index) focusedRow.current = { key: was.key, index: row.index };
+      return;
     }
-  };
+    focusedRow.current = null;
+    const now = document.activeElement;
+    if (now && now !== document.body && now.isConnected) return;
+    const tree = treeRef.current;
+    if (tree) focusAfterRemoval(tree.querySelectorAll("[data-grid-key]"), was.index);
+  }, [byKey]);
+  const lastSelected = useRef(selected);
+  useEffect(() => {
+    if (lastSelected.current === selected) return;
+    lastSelected.current = selected;
+    const tree = treeRef.current;
+    if (selected === null || !tree || tree.contains(document.activeElement)) return;
+    const el = tree.querySelector(`[data-grid-key="${CSS.escape(itemKey(selected))}"]`);
+    if (el) viewportRef.current?.reveal(el);
+  }, [selected]);
+  const toggle = (id) => setCollapsed((cur) => {
+    const next = new Set(cur);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
   const activate = (row) => {
     if (row.group) toggle(row.group.id);
     else if (row.item) select(row.item);
@@ -10417,6 +10668,11 @@ function Gantt({
     }
     grid.onKeyDown(e);
   };
+  const onTreeBlur = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setFocusWithin(false);
+    if (e.relatedTarget) focusedRow.current = null;
+  };
   const onRowClick = (row) => {
     if (row.item) select(row.item.id === selected ? null : row.item);
     else if (row.group) toggle(row.group.id);
@@ -10428,25 +10684,33 @@ function Gantt({
     "aria-level": row.level,
     "aria-setsize": row.setSize,
     "aria-posinset": row.posInSet,
-    "aria-label": names.get(row.key),
+    "aria-label": nameOf(row),
     "data-grid-key": row.key,
     tabIndex: grid.tabIndexOf(row.key),
-    onFocus: () => setActive(row.key)
+    onFocus: () => {
+      setActive(row.key);
+      focusedRow.current = { key: row.key, index: row.index };
+    }
   });
   const renderItem = (row, item) => {
     const shape = shapes.get(item.id);
-    if (!drawable(shape)) return null;
-    const tone = TONES[item.status !== void 0 && statuses[item.status]?.tone || "neutral"] ?? TONES.neutral;
+    const dates = datesOf(item);
     const isSelected = item.id === selected;
-    const textWidth = measure(item.title) + (tone.icon ? ICON + ICON_GAP : 0) + 2 * KNOCKOUT;
-    const place = labelPlace(shape, textWidth, scale.width);
+    const { tone, cue } = toneOf(item);
+    if (!dates || !drawable(shape)) {
+      return /* @__PURE__ */ jsx(NoDates, { ...treeitem(row), "aria-selected": isSelected, selected: isSelected, cue: cue && /* @__PURE__ */ jsx(Cue, { name: cue, size: ICON }) });
+    }
+    const textWidth = measure(item.title) + (cue ? ICON + ICON_GAP : 0) + 2 * KNOCKOUT;
+    const place = labelPlace(shape, textWidth + 2 * EDGE_WIDTH, scale.width);
     const beside = place === "after" ? shape.x1 + BESIDE : shape.x0 - BESIDE - textWidth;
-    const icon = tone.icon && /* @__PURE__ */ jsx(Icon, { name: tone.icon, size: ICON, className: "shrink-0" });
     const title = /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon,
+      cue && /* @__PURE__ */ jsx(Cue, { name: cue, size: ICON }),
       /* @__PURE__ */ jsx("span", { className: "truncate", children: item.title })
     ] });
-    const shapeBox = shape.kind === "milestone" ? /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: cn("group absolute grid cursor-pointer place-items-center", "outline-none"), style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px] group-focus-visible:shadow-[var(--ds-shadow-focus)]", tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) }) : (
+    const shapeBox = shape.kind === "milestone" ? (
+      // the target's own outline is its focus indicator in forced colours, which drop the diamond's shadow ring
+      /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: "group absolute grid cursor-pointer place-items-center outline-none focus-visible:outline-hidden", style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px] group-focus-visible:shadow-[var(--ds-shadow-focus)]", EDGE, tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) })
+    ) : (
       // TimeBar keeps the title in view beside the pinned column while the bar's start is scrolled away
       /* @__PURE__ */ jsx(
         TimeBar,
@@ -10455,12 +10719,12 @@ function Gantt({
           "aria-selected": isSelected,
           "data-gantt-shape": "bar",
           "data-item": item.id,
-          start: item.start,
-          end: item.end ?? item.start,
+          start: dates.start,
+          end: dates.end,
           minWidth: MIN_BAR,
-          className: cn("cursor-pointer text-xs font-medium", tone.fill, tone.on, isSelected && SELECTED),
+          className: cn("cursor-pointer text-xs font-medium", EDGE, tone.fill, tone.on, isSelected && SELECTED),
           style: { top: (ROW_HEIGHT2 - BAR_HEIGHT) / 2, bottom: "auto", height: BAR_HEIGHT },
-          children: place === "inside" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex min-w-0 items-center gap-ds-1 overflow-hidden", children: title })
+          children: place === "inside" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-gs-clip": "", className: "flex min-w-0 items-center gap-ds-1 overflow-hidden", children: title })
         }
       )
     );
@@ -10479,23 +10743,29 @@ function Gantt({
       )
     ] });
   };
-  const renderGroup = (row, extent2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-[var(--ds-bg-muted)] opacity-60" }),
-    extent2 && Number.isFinite(extent2.start) && // a 24 px target around the thin summary bar it draws
-    /* @__PURE__ */ jsx(
-      TimeBar,
-      {
-        ...treeitem(row),
-        "aria-expanded": !collapsed.has(row.group.id),
-        "data-gantt-shape": "summary",
-        start: extent2.start,
-        end: extent2.end,
-        minWidth: MIN_BAR,
-        className: "cursor-pointer before:absolute before:inset-x-0 before:top-1/2 before:h-ds-2 before:-translate-y-1/2 before:rounded-[var(--ds-radius-full)] before:bg-[var(--ds-text-secondary)]",
-        style: { top: (ROW_HEIGHT2 - TARGET) / 2, bottom: "auto", height: TARGET }
-      }
-    )
-  ] });
+  const renderGroup = (row, group) => {
+    const extent2 = extents.get(group.id);
+    const expanded = !collapsed.has(group.id);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-[var(--ds-bg-muted)] opacity-60" }),
+      extent2 && Number.isFinite(extent2.start) ? (
+        // a 24 px target around the thin summary bar it draws
+        /* @__PURE__ */ jsx(
+          TimeBar,
+          {
+            ...treeitem(row),
+            "aria-expanded": expanded,
+            "data-gantt-shape": "summary",
+            start: extent2.start,
+            end: extent2.end,
+            minWidth: MIN_BAR,
+            className: "cursor-pointer before:absolute before:inset-x-0 before:top-1/2 before:h-ds-2 before:-translate-y-1/2 before:rounded-[var(--ds-radius-full)] before:border-[length:1px] before:border-transparent before:bg-[var(--ds-text-secondary)]",
+            style: { top: (ROW_HEIGHT2 - TARGET) / 2, bottom: "auto", height: TARGET }
+          }
+        )
+      ) : /* @__PURE__ */ jsx(NoDates, { ...treeitem(row), "aria-expanded": expanded })
+    ] });
+  };
   const label = (row) => {
     if (row.group) {
       return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "flex min-w-0 items-center gap-ds-1.5 font-medium", children: [
@@ -10513,27 +10783,30 @@ function Gantt({
       ] })
     );
   };
-  return /* @__PURE__ */ jsx(
+  const legend = /* @__PURE__ */ jsx(Legend, { statuses });
+  const legendApart = toolbar === false && hasStatuses;
+  const chart = /* @__PURE__ */ jsx(
     TimeViewport,
     {
       ref: viewportRef,
       scale,
-      onZoomChange: changeZoom,
+      onZoomChange: zoomable ? changeZoom : void 0,
       labelHeader,
       toolbar: toolbar === false ? false : /* @__PURE__ */ jsxs(Fragment, { children: [
         toolbar,
-        /* @__PURE__ */ jsx(Legend, { statuses })
+        legend
       ] }),
       tabStop: false,
-      "aria-label": ariaLabel,
-      className,
-      children: /* @__PURE__ */ jsxs("div", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: "relative", onKeyDown, children: [
+      "aria-label": regionLabel,
+      className: legendApart ? "h-auto flex-1" : className,
+      children: /* @__PURE__ */ jsxs("div", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: "relative", onKeyDown, onFocus: () => setFocusWithin(true), onBlur: onTreeBlur, children: [
         /* @__PURE__ */ jsx("span", { ref: probeRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute whitespace-nowrap text-xs font-medium", children: "0" }),
         /* @__PURE__ */ jsx(GanttArrows, { arrows, width: scale.width, height: rows.length * ROW_HEIGHT2 }),
         rows.map((row) => /* @__PURE__ */ jsx(
           TimeRow,
           {
             "data-row-key": row.key,
+            height: ROW_HEIGHT2,
             label: label(row),
             className: "cursor-pointer",
             labelClassName: cn(
@@ -10541,13 +10814,18 @@ function Gantt({
               row.item && row.item.id === selected && "bg-[image:linear-gradient(var(--ds-accent-subtle),var(--ds-accent-subtle))] text-[var(--ds-accent-subtle-text)]"
             ),
             onClick: () => onRowClick(row),
-            children: row.group ? renderGroup(row, extents.get(row.group.id)) : renderItem(row, row.item)
+            children: row.group ? renderGroup(row, row.group) : renderItem(row, row.item)
           },
           row.key
         ))
       ] })
     }
   );
+  if (!legendApart) return chart;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 px-ds-2 py-ds-1.5", children: legend }),
+    chart
+  ] });
 }
 var DEFAULT_OFFSET2 = "var(--ds-space-4)";
 var LAUNCHER_SIZES = {
@@ -11096,6 +11374,7 @@ function TabsList({ children, className }) {
     {
       role: "tablist",
       ...overflow === "scroll" ? track : {},
+      "data-gs-clip": overflow === "scroll" ? void 0 : "",
       className: cn(
         trackClasses("horizontal"),
         "max-w-full",
@@ -11200,6 +11479,7 @@ function TabsRoot(props) {
       {
         role: "tablist",
         ...effectiveOverflow === "scroll" ? track : {},
+        "data-gs-clip": effectiveOverflow === "scroll" ? void 0 : "",
         className: cn(
           trackClasses("horizontal"),
           effectiveOverflow === "scroll" ? SCROLL_TRACK : "overflow-hidden",
@@ -11217,14 +11497,35 @@ var Tabs = Object.assign(TabsRoot, {
   Trigger: TabsTrigger,
   Content: TabsContent
 });
-var MIN_PANEL_WIDTH = 480;
+var MIN_PANEL_WIDTH = 560;
+var PANEL_STYLE = {
+  "--ds-form-max": "calc(var(--ds-bp-md) - 2 * var(--ds-space-6))"
+};
+var PANEL_CLASSES = "min-w-0 @container";
+function useColumnGap(ref) {
+  const [gap, setGap] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const read = () => {
+      const px = parseFloat(getComputedStyle(el).columnGap);
+      setGap(Number.isFinite(px) ? px : 0);
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return gap;
+}
 function SettingsLayout({
   sections,
   value,
   onChange,
   layout: layoutProp,
   railWidth = 220,
-  collapseBelow = railWidth + MIN_PANEL_WIDTH,
+  collapseBelow: collapseBelowProp,
   "aria-label": ariaLabel = "Settings sections",
   children,
   className
@@ -11232,32 +11533,37 @@ function SettingsLayout({
   const shell = useAppShell();
   const layout = layoutProp ?? shell?.theme?.settingsLayout ?? "sidebar";
   const rootRef = useRef(null);
+  const gap = useColumnGap(rootRef);
+  const collapseBelow = collapseBelowProp ?? railWidth + gap + MIN_PANEL_WIDTH;
   const compact = useCompact(rootRef, collapseBelow);
   const tabs = sections.map((s) => ({ id: s.id, label: s.label, icon: s.icon, group: s.group, disabled: s.disabled }));
   const stickyTop = shell ? "var(--ds-sticky-offset, 0px)" : "calc(var(--ds-navbar-height) + var(--ds-sticky-offset, 0px))";
   if (layout === "tabs") {
     return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "tabs", className: cn("flex flex-col gap-ds-6", className), children: [
       /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Tabs, { orientation: "horizontal", mobile: "dropdown", tabs, activeTab: value, onTabChange: onChange }) }),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
+      /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
     ] });
   }
   if (compact) {
-    return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", "data-collapsed": "true", className: cn("flex flex-col gap-ds-6", className), children: [
-      /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          "aria-label": ariaLabel,
-          options: sections.filter((s) => !s.disabled).map((s) => ({ id: s.id, label: s.label, group: s.group })),
-          value,
-          onChange: (v) => onChange(v)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
-    ] });
+    return (
+      // gap-x-ds-8 is the rail's gap, unused in one column: the threshold reads the same gap as the row (useColumnGap)
+      /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", "data-collapsed": "true", className: cn("flex flex-col gap-y-ds-6 gap-x-ds-8", className), children: [
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            "aria-label": ariaLabel,
+            options: sections.filter((s) => !s.disabled).map((s) => ({ id: s.id, label: s.label, group: s.group })),
+            value,
+            onChange: (v) => onChange(v)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
+      ] })
+    );
   }
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", className: cn("flex flex-row items-start gap-ds-8", className), children: [
     /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, className: "w-full" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
+    /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: cn("flex-1", PANEL_CLASSES), style: PANEL_STYLE, children })
   ] });
 }
 function SeparatorIcon({ type, size }) {
@@ -12969,6 +13275,16 @@ var widthToMaxWidth = {
   full: "full",
   narrow: "md"
 };
+var dataWidthOf = {
+  sm: "sm",
+  md: "narrow",
+  lg: "lg",
+  xl: "constrained",
+  full: "full"
+};
+function pageMaxWidth(resolved) {
+  return resolved === "md" ? `var(--ds-page-max, ${maxWidthValues.md})` : maxWidthValues[resolved];
+}
 var paddingClasses = {
   none: "",
   default: "px-ds-6",
@@ -13053,6 +13369,7 @@ var PageContainer = forwardRef(function PageContainer2({
   className,
   renderHeader
 }, ref) {
+  if (REACT_VERSION_PROBLEM) throw new Error(REACT_VERSION_PROBLEM);
   const shell = useAppShell();
   const rootRef = useRef(null);
   const setRoot = useCallback((node) => {
@@ -13065,7 +13382,8 @@ var PageContainer = forwardRef(function PageContainer2({
     else rootRef.current?.style.removeProperty("--ds-sticky-offset");
   }, []);
   const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
-  const maxWidthValue = maxWidthValues[resolvedMaxWidth];
+  const maxWidthValue = pageMaxWidth(resolvedMaxWidth);
+  const dataWidth = dataWidthOf[resolvedMaxWidth];
   const [requestedWidth, setRequestedWidth] = useState(null);
   const requestContentWidth = useCallback((w) => setRequestedWidth(w), []);
   const effectiveContentWidth = contentWidth ?? requestedWidth ?? void 0;
@@ -13129,6 +13447,7 @@ var PageContainer = forwardRef(function PageContainer2({
       {
         ref: setRoot,
         "data-page-container": wrappedHeader ? "" : void 0,
+        "data-width": dataWidth,
         className: cn(
           "w-full",
           paddingClasses[padding],
@@ -13160,7 +13479,7 @@ var PageContainer = forwardRef(function PageContainer2({
     ...overlapActive ? { marginTop: "calc(-1 * var(--ds-overlap, 0px))", position: "relative", zIndex: 1 } : {}
   } : void 0;
   const column = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx("div", { ref: columnRef, className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, children: capped(rest) }) });
-  return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", className: "w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", "data-width": dataWidth, className: "w-full", children: [
     placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlapActive), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
       strip,
       colourful ? header : /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
@@ -13421,7 +13740,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    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 });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, description, 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,
@@ -13596,6 +13915,7 @@ function DefaultHeader({
 }
 function MinimalHeader({
   title,
+  description,
   caption,
   focusBack,
   badge,
@@ -13623,6 +13943,7 @@ function MinimalHeader({
       ] }),
       actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
     ] }),
+    description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description }),
     tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
   ] }) });
 }
@@ -13911,6 +14232,7 @@ function SnappingHeader({
               ] }),
               actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
             ] }),
+            description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description }),
             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(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
@@ -16028,7 +16350,9 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 5e
 var ToastContext = createContext(null);
 function useToast() {
   const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  if (!ctx) {
+    throw new Error("useToast must be used within <ToastProvider>: the app shell's (get_app_shell writes it around AppShell). A page outside the shell (sign-in, a public page) shows its messages inline instead: an Alert above the form, and each field's error below the field.");
+  }
   return ctx;
 }
 function useToastOptional() {
@@ -16271,6 +16595,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
     "div",
     {
       ref,
+      "data-gs": "section-heading",
       "data-variant": variant,
       className: cn(
         pane ? "shrink-0 px-ds-4 pt-ds-4 pb-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]" : "mb-[var(--ds-heading-gap)]",
@@ -16286,7 +16611,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
         ), children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-              /* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+              /* @__PURE__ */ jsx("h2", { className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", pane ? "truncate" : "min-w-0 break-words"), children: title }),
               badge,
               count !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", children: count })
             ] }),