gridsmith-ui 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,12 +1,13 @@
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './chunk-5B2ZFL2H.js';
 import { Skeleton } from './chunk-M3AARGLI.js';
 export { Skeleton } from './chunk-M3AARGLI.js';
 import { useOverlayLayer, useCloseOnFocusOut, useReturnFocus, focusInitial, useFocusTrap, OVERLAY_CLOSE_ATTR, useNonModalDialog, rovingTabStop } from './chunk-RLUK575N.js';
-import { Link } from './chunk-G6KC5YNY.js';
-export { CodeBlock, Divider, Link } from './chunk-G6KC5YNY.js';
+import { Link } from './chunk-VXKSQ56H.js';
+export { CodeBlock, Divider, Link } from './chunk-VXKSQ56H.js';
 import { Badge } from './chunk-QVNGQ64Q.js';
 export { Badge } from './chunk-QVNGQ64Q.js';
-import { useBreakpoint } from './chunk-EKQHHP72.js';
-export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
+import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
+export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-RLNIRPOH.js';
 export { Tooltip, useTextOverflow } from './chunk-RLNIRPOH.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
@@ -3345,40 +3346,253 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
   ] });
 }
+var variantStyles3 = {
+  info: "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]",
+  success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
+  warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
+  error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
+};
+var indicators = {
+  info: "bg-[var(--ds-accent-primary)]",
+  success: "bg-[var(--ds-status-success)]",
+  warning: "bg-[var(--ds-status-warning)]",
+  error: "bg-[var(--ds-status-error)]"
+};
+var actionColorsByVariant = {
+  info: "text-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-muted)]",
+  success: "text-[var(--ds-status-success)] hover:bg-[color-mix(in_srgb,var(--ds-status-success)_12%,transparent)]",
+  warning: "text-[var(--ds-status-warning)] hover:bg-[color-mix(in_srgb,var(--ds-status-warning)_15%,transparent)]",
+  error: "text-[var(--ds-status-error)] hover:bg-[color-mix(in_srgb,var(--ds-status-error)_12%,transparent)]"
+};
+var Alert = forwardRef(function Alert2({
+  variant,
+  title,
+  children,
+  dismissible,
+  onDismiss,
+  action,
+  actions,
+  placement = "inline",
+  expandableContent,
+  className
+}, ref) {
+  const [detailsExpanded, setDetailsExpanded] = useState(false);
+  const isMobile = useBreakpoint("sm");
+  const resolvedActions = actions ?? (action ? [action] : []);
+  const shouldCollapseActions = isMobile && resolvedActions.length > 1;
+  const placementClasses = placement === "page-top" ? "sticky top-0 z-[var(--ds-z-sticky)] rounded-none" : placement === "section-top" ? "rounded-[var(--ds-radius-md)] my-ds-4" : "rounded-[var(--ds-radius-md)]";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(
+        "flex items-start gap-ds-3 p-ds-4",
+        "border-[length:var(--ds-border-width)]",
+        "shadow-[var(--ds-shadow-sm)]",
+        "text-sm text-[var(--ds-text-primary)]",
+        variantStyles3[variant],
+        placementClasses,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mt-[0.3125em] w-3 h-3 shrink-0 rounded-[var(--ds-radius-sm)]", indicators[variant]) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+            resolvedActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: shouldCollapseActions ? /* @__PURE__ */ jsx(
+              DropdownMenu,
+              {
+                trigger: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: cn(
+                      "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
+                      "transition-colors cursor-pointer",
+                      "border-[length:var(--ds-border-width)] border-current",
+                      actionColorsByVariant[variant]
+                    ),
+                    children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 12 }),
+                      "Actions"
+                    ] })
+                  }
+                ),
+                items: resolvedActions.map((a) => ({
+                  label: a.label,
+                  onClick: a.onClick
+                })),
+                align: "end"
+              }
+            ) : resolvedActions.map((a, i) => {
+              const effectiveVariant = a.variant ?? (i === 0 ? "secondary" : "outline");
+              const isAccent = effectiveVariant === "secondary";
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: a.onClick,
+                  className: cn(
+                    "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
+                    "transition-colors cursor-pointer",
+                    isAccent ? cn("border-[length:var(--ds-border-width)] border-current", actionColorsByVariant[variant]) : cn("border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]")
+                  ),
+                  children: [
+                    a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: a.iconLeft }),
+                    a.label
+                  ]
+                },
+                i
+              );
+            }) })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-1 text-xs text-[var(--ds-text-secondary)]", children }),
+          expandableContent && /* @__PURE__ */ jsxs("div", { className: "mt-ds-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setDetailsExpanded(!detailsExpanded),
+                "aria-expanded": detailsExpanded,
+                className: cn(
+                  "inline-flex items-center gap-ds-1 text-xs font-medium cursor-pointer",
+                  "transition-colors duration-[var(--ds-transition-speed)]",
+                  actionColorsByVariant[variant],
+                  "rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "chevron-right",
+                      size: 12,
+                      className: cn("transition-transform duration-[var(--ds-transition-speed)]", detailsExpanded && "rotate-90")
+                    }
+                  ),
+                  detailsExpanded ? "Hide details" : "Show details"
+                ]
+              }
+            ),
+            detailsExpanded && /* @__PURE__ */ jsx("div", { className: "mt-ds-2 text-xs text-[var(--ds-text-secondary)] border-l-2 border-current/20 pl-ds-3", children: expandableContent })
+          ] })
+        ] }),
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onDismiss,
+            className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+});
 var FormCtx = createContext(null);
 function useFormContext() {
   const ctx = useContext(FormCtx);
   if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
   return ctx;
 }
-function FormWrapper({ onSubmit, validationMode = "onSubmit", children, className, ref }) {
+function collectInvalidFields(form) {
+  const out = [];
+  for (const el of Array.from(form.querySelectorAll("[aria-invalid='true']"))) {
+    const id = el.id || "";
+    const label = id && form.querySelector(`label[for="${CSS.escape(id)}"]`)?.textContent?.replace(/\*\s*$/, "").trim() || el.getAttribute("aria-label") || el.closest("[data-field]")?.querySelector("label")?.textContent?.trim() || id || "A field";
+    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+    const message = described.map((d) => document.getElementById(d)?.textContent?.trim()).find((t) => t && /error|invalid|required|must|enter|choose|select|please/i.test(t)) ?? described.map((d) => document.getElementById(d)?.textContent?.trim()).filter(Boolean).pop() ?? "Needs attention";
+    out.push({ id, label, message });
+  }
+  return out;
+}
+function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions, actionsAlign = "end", focusFirstError = true, errorSummary = true, className, ref }) {
   const [errors, setErrors] = useState({});
   const [submitted, setSubmitted] = useState(false);
+  const [submitCount, setSubmitCount] = useState(0);
+  const [summary, setSummary] = useState([]);
   const errorsRef = useLatest(errors);
+  const formRef = useRef(null);
+  const setRefs = useCallback((node) => {
+    formRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   const pendingSubmit = useRef(false);
+  const pendingFocus = useRef(false);
   const onSubmitRef = useLatest(onSubmit);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
       onSubmitRef.current(errorsRef.current);
     }
-  }, [submitted, errors, errorsRef, onSubmitRef]);
+  }, [submitted, submitCount, errors, errorsRef, onSubmitRef]);
+  const settle = useCallback(() => {
+    const form = formRef.current;
+    if (!form) return;
+    const invalid = collectInvalidFields(form);
+    const next = invalid.length >= 2 ? invalid : [];
+    setSummary((prev) => prev.length === next.length && prev.every((f, i) => f.id === next[i].id && f.message === next[i].message && f.label === next[i].label) ? prev : next);
+    if (pendingFocus.current && invalid.length > 0) {
+      pendingFocus.current = false;
+      const first = form.querySelector("[aria-invalid='true']");
+      if (first) {
+        if (typeof first.scrollIntoView === "function") first.scrollIntoView({ block: "center", behavior: "smooth" });
+        first.focus({ preventScroll: true });
+      }
+    }
+  }, []);
+  useLayoutEffect(() => {
+    if (!submitted) return;
+    settle();
+  }, [submitted, submitCount, errors, settle]);
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form || typeof MutationObserver === "undefined") return;
+    const obs = new MutationObserver(() => settle());
+    obs.observe(form, { subtree: true, childList: true, attributes: true, attributeFilter: ["aria-invalid"] });
+    return () => obs.disconnect();
+  }, [settle]);
+  const userActed = useCallback((e) => {
+    if (!pendingFocus.current) return;
+    const target = e.target;
+    if (target && target.closest("button[type='submit']")) return;
+    pendingFocus.current = false;
+  }, []);
   const setError = useCallback((field, message) => {
     setErrors((prev) => ({ ...prev, [field]: message }));
   }, []);
   const clearErrors = useCallback(() => {
     setErrors({});
     setSubmitted(false);
+    setSummary([]);
   }, []);
   const handleSubmit = useCallback(
     (e) => {
       e.preventDefault();
       pendingSubmit.current = true;
+      pendingFocus.current = focusFirstError;
       setSubmitted(true);
+      setSubmitCount((c) => c + 1);
     },
-    []
+    [focusFirstError]
   );
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsx("form", { ref, onSubmit: handleSubmit, className, noValidate: true, children }) });
+  const focusField = (id) => (e) => {
+    e.preventDefault();
+    const el = id ? document.getElementById(id) : null;
+    if (el) {
+      el.scrollIntoView?.({ block: "center" });
+      el.focus();
+    }
+  };
+  const summaryNode = errorSummary && summary.length >= 2 ? typeof errorSummary === "function" ? errorSummary(summary) : /* @__PURE__ */ jsx(Alert, { variant: "error", title: `${summary.length} fields need attention`, className: "mb-ds-4", children: /* @__PURE__ */ jsx("ul", { className: "list-disc pl-ds-5 flex flex-col gap-ds-1", children: summary.map((f) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx("a", { href: f.id ? `#${f.id}` : void 0, onClick: focusField(f.id), className: "underline underline-offset-2 text-[var(--ds-text-primary)]", children: f.label }),
+    ": ",
+    f.message
+  ] }, f.id || f.label)) }) }) : null;
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className, noValidate: true, children: [
+    summaryNode && /* @__PURE__ */ jsx("div", { "data-form-error-summary": "", children: summaryNode }),
+    children,
+    actions && /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-4 mt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions })
+  ] }) });
 }
 function TransferList({
   available,
@@ -3958,7 +4172,7 @@ function MentionInput({
   ] });
 }
 var CardCtx = createContext(false);
-var variantStyles3 = {
+var variantStyles4 = {
   default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
   featured: [
     `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
@@ -4107,7 +4321,7 @@ var Card = forwardRef(function Card2({
       style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
       className: cn(
         "rounded-[var(--ds-radius-md)] flex flex-col relative",
-        variantStyles3[variant],
+        variantStyles4[variant],
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
         isSelectable && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -4191,32 +4405,33 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
     children
   ] });
 });
-var CardTitle = forwardRef(function CardTitle2({ className, children, ...props }, forwardedRef) {
-  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1 });
+var cardLineClampClasses = {
+  1: "truncate",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, ...props }, forwardedRef) {
+  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
+  const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
   const heading = /* @__PURE__ */ jsx(
     "h3",
     {
       ref: (node) => {
-        overflowRef(node);
+        overflowRef(lines > 0 ? node : null);
         if (typeof forwardedRef === "function") forwardedRef(node);
         else if (forwardedRef) forwardedRef.current = node;
       },
-      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", className),
+      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", lines > 0 && lineClampClass, className),
       ...props,
       children
     }
   );
-  if (!isTruncated) return heading;
+  if (!isTruncated || lines === 0) return heading;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
 });
-var cardLineClampClasses = {
-  1: "truncate",
-  2: "line-clamp-2",
-  3: "line-clamp-3",
-  4: "line-clamp-4",
-  5: "line-clamp-5",
-  6: "line-clamp-6"
-};
 var CardDescription = forwardRef(function CardDescription2({ className, children, lines = 2, ...props }, forwardedRef) {
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
   const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
@@ -4305,10 +4520,12 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
 }
 function TrendBadge({ trend }) {
   const colors = {
-    up: "text-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
-    down: "text-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]",
-    flat: "text-[var(--ds-text-muted)] bg-[var(--ds-bg-muted)]"
+    positive: "text-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
+    negative: "text-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]",
+    neutral: "text-[var(--ds-text-muted)] bg-[var(--ds-bg-muted)]"
   };
+  const defaultSentiment = { up: "positive", down: "negative", flat: "neutral" };
+  const sentiment = trend.sentiment ?? defaultSentiment[trend.direction];
   const arrows = { up: "\u2191", down: "\u2193", flat: "\u2192" };
   const { ref, isTruncated } = useTextOverflow({ lines: 1, content: trend.value });
   const badge = /* @__PURE__ */ jsxs(
@@ -4316,7 +4533,7 @@ function TrendBadge({ trend }) {
     {
       className: cn(
         "inline-flex items-center gap-ds-0.5 text-xs font-medium rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5 min-w-0 max-w-full",
-        colors[trend.direction]
+        colors[sentiment]
       ),
       children: [
         /* @__PURE__ */ jsx("span", { children: arrows[trend.direction] }),
@@ -4381,10 +4598,11 @@ var DescriptionList = forwardRef(function DescriptionList2({
   columns = 1,
   size = "md",
   dividers = false,
-  stackBelow,
+  stackBelow: stackBelowProp,
   className
 }, ref) {
   const s = sizeStyles4[size];
+  const stackBelow = stackBelowProp ?? (columns > 1 ? "sm" : void 0);
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "dl",
@@ -4394,7 +4612,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
           "grid",
           columnClasses[columns],
           "gap-x-ds-6 gap-y-ds-1",
-          stackBelow && stackBreakpoints[stackBelow],
+          stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
           dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
           className
         ),
@@ -4436,7 +4654,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
         "grid",
         columnClasses[columns],
         "gap-x-ds-6",
-        stackBelow && stackBreakpoints[stackBelow],
+        stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
         dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
         className
       ),
@@ -4857,8 +5075,10 @@ function SegmentedControl({
   fullWidth = false,
   onHoverChange,
   className,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  maxOptions = 6
 }) {
+  const collapsed = options.length > maxOptions;
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
   const updateIndicator = useCallback(() => {
@@ -4876,12 +5096,12 @@ function SegmentedControl({
     updateIndicator();
   }, [value, optionsKey, updateIndicator]);
   useLayoutEffect(() => {
-    if (!containerRef.current || typeof ResizeObserver === "undefined") return;
+    if (collapsed || !containerRef.current || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(updateIndicator);
     observer.observe(containerRef.current);
     containerRef.current.querySelectorAll("button").forEach((b) => observer.observe(b));
     return () => observer.disconnect();
-  }, [updateIndicator, optionsKey]);
+  }, [updateIndicator, optionsKey, collapsed]);
   const containerHeight = {
     xs: "h-ds-6",
     sm: "h-[var(--ds-control-height-sm)]",
@@ -4906,6 +5126,19 @@ function SegmentedControl({
       if (b.dataset.value === enabled[next].value) b.focus();
     });
   };
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        "aria-label": ariaLabel,
+        size: size === "md" || size === "lg" ? "md" : "sm",
+        options: options.filter((o) => !o.disabled).map((o) => ({ id: o.value, label: o.label })),
+        value,
+        onChange: (v) => onChange(v),
+        className: cn("inline-block", fullWidth ? "w-full" : "w-auto", className)
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6535,7 +6768,7 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
       ),
       children: [
         iconFrame === "none" && iconNode ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-ds-4", children: iconNode }) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-emphasis)] flex items-center justify-center mb-ds-4", children: iconNode ?? /* @__PURE__ */ jsx("span", { className: "text-2xl text-[var(--ds-text-muted)]", children: defaultIcons[variant] }) }),
-        /* @__PURE__ */ jsx("h3", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+        /* @__PURE__ */ jsx("h3", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] text-center", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-sm text-[var(--ds-text-muted)] max-w-sm text-center", children: description }),
         action && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: action })
       ]
@@ -6559,11 +6792,16 @@ function SkipLink({ href = "#main", children = "Skip to content", className }) {
   );
 }
 function useCompact(ref, breakpoint) {
-  const [compact, setCompact] = useState(false);
+  const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
+  const width = useElementWidth(ref);
+  return width > 0 && width < px;
+}
+function useElementWidth(ref) {
+  const [width, setWidth] = useState(0);
   const check = useCallback(() => {
-    const width = ref.current?.offsetWidth ?? 0;
-    if (width > 0) setCompact(width < breakpoint);
-  }, [ref, breakpoint]);
+    const next = ref.current?.offsetWidth ?? 0;
+    if (next > 0) setWidth(next);
+  }, [ref]);
   useLayoutEffect(() => {
     check();
     if (!ref.current || typeof ResizeObserver === "undefined") return;
@@ -6571,7 +6809,7 @@ function useCompact(ref, breakpoint) {
     observer.observe(ref.current);
     return () => observer.disconnect();
   }, [check, ref]);
-  return compact;
+  return width;
 }
 function TableToolbar({
   search,
@@ -6699,11 +6937,11 @@ function ExpandableDescription({ children, className }) {
     }
   );
 }
-function HorizontalLayout({ items, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start", className), children: items.map((item, i) => {
+function HorizontalLayout({ items, minItemWidth, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-timeline-row": "", className: cn("flex items-start overflow-x-auto snap-x", className), children: items.map((item, i) => {
     const isFirst = i === 0;
     const isLast = i === items.length - 1;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center min-w-[100px]", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 shrink-0 flex-col items-center snap-start", style: { minWidth: minItemWidth }, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -6762,17 +7000,17 @@ function VerticalLayout({ items, className }) {
     ] })
   ] }, i)) });
 }
-function Timeline({ items, orientation = "vertical", className, ref }) {
-  if (orientation === "horizontal") {
-    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(HorizontalLayout, { items }) });
-  }
-  if (orientation === "responsive") {
-    return /* @__PURE__ */ jsxs("div", { ref, className, children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(HorizontalLayout, { items }) }),
-      /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(VerticalLayout, { items }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+function Timeline({ items, orientation = "vertical", minItemWidth = 200, className, ref }) {
+  const measureRef = useRef(null);
+  const width = useElementWidth(measureRef);
+  const setRefs = useCallback((node) => {
+    measureRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const fits = width === 0 || width >= items.length * minItemWidth;
+  const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
+  return /* @__PURE__ */ jsx("div", { ref: setRefs, "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
 }
 var CollapsibleContext = createContext(null);
 function useCollapsible() {
@@ -7282,147 +7520,6 @@ function Carousel({
     }
   );
 }
-var variantStyles4 = {
-  info: "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]",
-  success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
-  warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
-  error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
-};
-var indicators = {
-  info: "bg-[var(--ds-accent-primary)]",
-  success: "bg-[var(--ds-status-success)]",
-  warning: "bg-[var(--ds-status-warning)]",
-  error: "bg-[var(--ds-status-error)]"
-};
-var actionColorsByVariant = {
-  info: "text-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-muted)]",
-  success: "text-[var(--ds-status-success)] hover:bg-[color-mix(in_srgb,var(--ds-status-success)_12%,transparent)]",
-  warning: "text-[var(--ds-status-warning)] hover:bg-[color-mix(in_srgb,var(--ds-status-warning)_15%,transparent)]",
-  error: "text-[var(--ds-status-error)] hover:bg-[color-mix(in_srgb,var(--ds-status-error)_12%,transparent)]"
-};
-var Alert = forwardRef(function Alert2({
-  variant,
-  title,
-  children,
-  dismissible,
-  onDismiss,
-  action,
-  actions,
-  placement = "inline",
-  expandableContent,
-  className
-}, ref) {
-  const [detailsExpanded, setDetailsExpanded] = useState(false);
-  const isMobile = useBreakpoint("sm");
-  const resolvedActions = actions ?? (action ? [action] : []);
-  const shouldCollapseActions = isMobile && resolvedActions.length > 1;
-  const placementClasses = placement === "page-top" ? "sticky top-0 z-[var(--ds-z-sticky)] rounded-none" : placement === "section-top" ? "rounded-[var(--ds-radius-md)] my-ds-4" : "rounded-[var(--ds-radius-md)]";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: cn(
-        "flex items-start gap-ds-3 p-ds-4",
-        "border-[length:var(--ds-border-width)]",
-        "shadow-[var(--ds-shadow-sm)]",
-        "text-sm text-[var(--ds-text-primary)]",
-        variantStyles4[variant],
-        placementClasses,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mt-[0.3125em] w-3 h-3 shrink-0 rounded-[var(--ds-radius-sm)]", indicators[variant]) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
-            resolvedActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: shouldCollapseActions ? /* @__PURE__ */ jsx(
-              DropdownMenu,
-              {
-                trigger: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    className: cn(
-                      "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
-                      "transition-colors cursor-pointer",
-                      "border-[length:var(--ds-border-width)] border-current",
-                      actionColorsByVariant[variant]
-                    ),
-                    children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 12 }),
-                      "Actions"
-                    ] })
-                  }
-                ),
-                items: resolvedActions.map((a) => ({
-                  label: a.label,
-                  onClick: a.onClick
-                })),
-                align: "end"
-              }
-            ) : resolvedActions.map((a, i) => {
-              const effectiveVariant = a.variant ?? (i === 0 ? "secondary" : "outline");
-              const isAccent = effectiveVariant === "secondary";
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: a.onClick,
-                  className: cn(
-                    "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
-                    "transition-colors cursor-pointer",
-                    isAccent ? cn("border-[length:var(--ds-border-width)] border-current", actionColorsByVariant[variant]) : cn("border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]")
-                  ),
-                  children: [
-                    a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: a.iconLeft }),
-                    a.label
-                  ]
-                },
-                i
-              );
-            }) })
-          ] }),
-          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-1 text-xs text-[var(--ds-text-secondary)]", children }),
-          expandableContent && /* @__PURE__ */ jsxs("div", { className: "mt-ds-2", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => setDetailsExpanded(!detailsExpanded),
-                "aria-expanded": detailsExpanded,
-                className: cn(
-                  "inline-flex items-center gap-ds-1 text-xs font-medium cursor-pointer",
-                  "transition-colors duration-[var(--ds-transition-speed)]",
-                  actionColorsByVariant[variant],
-                  "rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      name: "chevron-right",
-                      size: 12,
-                      className: cn("transition-transform duration-[var(--ds-transition-speed)]", detailsExpanded && "rotate-90")
-                    }
-                  ),
-                  detailsExpanded ? "Hide details" : "Show details"
-                ]
-              }
-            ),
-            detailsExpanded && /* @__PURE__ */ jsx("div", { className: "mt-ds-2 text-xs text-[var(--ds-text-secondary)] border-l-2 border-current/20 pl-ds-3", children: expandableContent })
-          ] })
-        ] }),
-        dismissible && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onDismiss,
-            className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-            "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
-          }
-        )
-      ]
-    }
-  );
-});
 function formatTime2(d) {
   return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
@@ -7922,7 +8019,7 @@ function useCornerInset(corner, inset, priority, target) {
     return claimCornerInset(corner, inset, priority, el);
   }, [corner, inset, priority, target]);
 }
-function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
+function Sheet({ open, onClose, title, children, footer, confirm, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
   const titleId = useId();
   const panelRef = useRef(null);
   const [mounted, setMounted] = useState(open);
@@ -8092,6 +8189,7 @@ function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92
                     children
                   }
                 ),
+                confirm,
                 footer && /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -8341,6 +8439,66 @@ function defaultMaxWidth(container) {
   const base = container instanceof HTMLElement ? container.clientWidth : typeof window !== "undefined" ? window.innerWidth : 1200;
   return Math.round(base * 0.6);
 }
+function useDirtyGuard(dirty, onClose, onDiscard) {
+  const [confirming, setConfirming] = useState(false);
+  useEffect(() => {
+    if (!dirty) setConfirming(false);
+  }, [dirty]);
+  const requestClose = useCallback(() => {
+    if (!dirty) {
+      onClose();
+      return;
+    }
+    setConfirming((c) => !c);
+  }, [dirty, onClose]);
+  const keep = useCallback(() => setConfirming(false), []);
+  const discard = useCallback(() => {
+    setConfirming(false);
+    onDiscard?.();
+    onClose();
+  }, [onClose, onDiscard]);
+  return { confirming, requestClose, keep, discard };
+}
+function DiscardConfirm({ open, onKeep, onDiscard }) {
+  const keepRef = useRef(null);
+  const returnTo = useRef(null);
+  const overlay = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlay.current = keepRef.current?.closest("[role='dialog'], [role='alertdialog']") ?? null;
+    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;
+    keepRef.current?.focus();
+    return () => {
+      if (document.activeElement !== document.body) return;
+      const back = returnTo.current;
+      if (back && back.isConnected) {
+        back.focus();
+        return;
+      }
+      const first = overlay.current?.querySelector("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
+      (first ?? overlay.current)?.focus();
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Unsaved changes",
+      "data-discard-confirm": "",
+      className: "shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]",
+      style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--ds-text-primary)]", children: "You have unsaved changes." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+          /* @__PURE__ */ jsx(Button, { ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
+          /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
+        ] })
+      ]
+    }
+  );
+}
 var slideClasses = {
   right: {
     panel: "top-0 right-0 h-full",
@@ -8364,15 +8522,17 @@ var borderByPosition = {
   bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
 };
 function Drawer(props) {
-  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush, keepMounted, id, labelledBy } = props;
+  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush, keepMounted, id, labelledBy, dirty, onDiscard } = props;
   const isPhone = useBreakpoint("sm");
   const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
+  const guard = useDirtyGuard(dirty, onClose, onDiscard);
+  const confirm = /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard });
   if (isPhone && mobileMode === "sheet") {
-    return /* @__PURE__ */ jsx(Sheet, { open, onClose, title, footer, container, flush, snapPoints, keepMounted, id, labelledBy, children });
+    return /* @__PURE__ */ jsx(Sheet, { open, onClose: guard.requestClose, title, footer, confirm, container, flush, snapPoints, keepMounted, id, labelledBy, children });
   }
-  return /* @__PURE__ */ jsx(DrawerPanel, { ...props });
+  return /* @__PURE__ */ jsx(DrawerPanel, { ...props, onClose: guard.requestClose, confirm });
 }
-function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth }) {
+function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth, confirm }) {
   const nonModal = !modal;
   const [chosen, remember] = useRememberedWidth(id ?? labelledBy);
   const canResize = nonModal && resizable && position !== "bottom";
@@ -8518,6 +8678,7 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
                     children
                   }
                 ),
+                confirm,
                 footer && /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -8812,6 +8973,7 @@ var StackedList = forwardRef(function StackedList2({
   divided = true,
   flush = false,
   selectedId,
+  hover = "tint",
   className
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -8859,7 +9021,7 @@ var StackedList = forwardRef(function StackedList2({
               // (1.5× the tab rail; still 0 under tint and pill). Every row carries
               // the rail width as a transparent placeholder so content never shifts.
               "border-l-[length:calc(var(--ds-nav-v-active-rail)*1.5)]",
-              isSelected ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-primary)]" : cn("border-transparent", interactive && "hover:bg-[var(--ds-tab-hover-bg)]")
+              isSelected ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-primary)]" : cn("border-transparent", interactive && hover === "tint" && "hover:bg-[var(--ds-tab-hover-bg)]", interactive && hover === "title" && "group/row")
             ),
             onClick: item.onClick,
             role: interactive ? "button" : void 0,
@@ -8880,7 +9042,9 @@ var StackedList = forwardRef(function StackedList2({
                     {
                       className: cn(
                         "text-sm",
-                        isSelected ? "font-medium text-[var(--ds-nav-v-active-text)]" : hasEmphasis && !item.unread ? "text-[var(--ds-text-secondary)]" : "font-medium text-[var(--ds-text-primary)]"
+                        isSelected ? "font-medium text-[var(--ds-nav-v-active-text)]" : hasEmphasis && !item.unread ? "text-[var(--ds-text-secondary)]" : "font-medium text-[var(--ds-text-primary)]",
+                        // hover="title": the title answers the pointer (accent, underline) instead of the row's background
+                        interactive && hover === "title" && !isSelected && "transition-colors group-hover/row:text-[var(--ds-accent-primary)] group-hover/row:underline underline-offset-2"
                       ),
                       children: item.title
                     }
@@ -9471,6 +9635,104 @@ var Tabs = Object.assign(TabsRoot, {
   Trigger: TabsTrigger,
   Content: TabsContent
 });
+var MIN_PANEL_WIDTH = 480;
+function SettingsLayout({
+  sections,
+  value,
+  onChange,
+  layout: layoutProp,
+  railWidth = 220,
+  collapseBelow = railWidth + MIN_PANEL_WIDTH,
+  "aria-label": ariaLabel = "Settings sections",
+  children,
+  className
+}) {
+  const shell = useAppShell();
+  const layout = layoutProp ?? shell?.theme?.settingsLayout ?? "sidebar";
+  const rootRef = useRef(null);
+  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 })
+    ] });
+  }
+  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 /* @__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 })
+  ] });
+}
+function SplitView({
+  list,
+  detail,
+  aside,
+  asideTitle = "Details",
+  detailOpen = false,
+  onDetailClose,
+  detailMode = "stack",
+  backLabel = "Back",
+  listWidth = 35,
+  listMinWidth = 25,
+  asideWidth = 25,
+  collapseBelow = 768,
+  asideCollapseBelow = 1024,
+  bordered = false,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const rootRef = useRef(null);
+  const compact = useCompact(rootRef, collapseBelow);
+  const asideCollapsed = useCompact(rootRef, asideCollapseBelow);
+  const [asideOpen, setAsideOpen] = useState(false);
+  useEffect(() => {
+    if (!asideCollapsed) setAsideOpen(false);
+  }, [asideCollapsed]);
+  const region = ariaLabel ? { role: "region", "aria-label": ariaLabel } : {};
+  const surface = cn(
+    "h-full min-h-0 w-full bg-[var(--ds-bg-surface)]",
+    bordered && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden",
+    className
+  );
+  if (compact) {
+    const showDetail = detailMode === "stack" && detailOpen;
+    return /* @__PURE__ */ jsx("div", { ref: rootRef, "data-split-view": showDetail ? "detail" : "list", ...region, className: cn(surface, "flex flex-col"), children: showDetail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "shrink-0 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: 14 }), onClick: onDetailClose, children: backLabel }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: detail })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: list }) });
+  }
+  const asideToggle = aside && asideCollapsed ? /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-end px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "info", size: 14 }), onClick: () => setAsideOpen(true), "aria-expanded": asideOpen, children: asideTitle }) }) : null;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-split-view": "split", ...region, className: surface, children: [
+    /* @__PURE__ */ jsxs(ResizablePanelGroup, { direction: "horizontal", stackOnMobile: false, className: "h-full", children: [
+      /* @__PURE__ */ jsx(ResizablePanel, { id: "list", defaultSize: `${listWidth}%`, minSize: `${listMinWidth}%`, children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 overflow-y-auto", children: list }) }),
+      /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+      /* @__PURE__ */ jsx(ResizablePanel, { id: "detail", minSize: "30%", children: /* @__PURE__ */ jsxs("div", { className: "h-full min-h-0 flex flex-col", children: [
+        asideToggle,
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: detail })
+      ] }) }),
+      aside && !asideCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+        /* @__PURE__ */ jsx(ResizablePanel, { id: "aside", defaultSize: `${asideWidth}%`, minSize: "15%", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 overflow-y-auto", children: aside }) })
+      ] })
+    ] }),
+    aside && asideCollapsed && /* @__PURE__ */ jsx(Drawer, { open: asideOpen, onClose: () => setAsideOpen(false), title: asideTitle, position: "right", children: aside })
+  ] });
+}
 function SeparatorIcon({ type, size }) {
   const iconSize = size === "sm" ? 10 : 12;
   if (type === "chevron") return /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: iconSize });
@@ -11031,6 +11293,16 @@ var PageContainer = forwardRef(function PageContainer2({
   renderHeader
 }, ref) {
   const shell = useAppShell();
+  const rootRef = useRef(null);
+  const setRoot = useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const setPinnedHeight = useCallback((px) => {
+    if (px) rootRef.current?.style.setProperty("--ds-sticky-offset", `${px}px`);
+    else rootRef.current?.style.removeProperty("--ds-sticky-offset");
+  }, []);
   const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
   const maxWidthValue = maxWidthValues[resolvedMaxWidth];
   const kids = Children.toArray(children);
@@ -11075,14 +11347,14 @@ var PageContainer = forwardRef(function PageContainer2({
   ) : null;
   const columnClass = (pad2) => cn("w-full", paddingClasses[pad2], centered && "mx-auto");
   const columnStyle = { maxWidth: maxWidthValue, containerType: "inline-size" };
-  const header = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement, containedBreadcrumbs: contained, breadcrumbsInsideHeader, noBottomMargin: block }, children: renderHeader ? renderHeader(headerEl) : headerEl });
+  const header = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement, containedBreadcrumbs: contained, breadcrumbsInsideHeader, noBottomMargin: block, setPinnedHeight }, children: renderHeader ? renderHeader(headerEl) : headerEl });
   const contentPadding = floatingHeader && shell?.isMobile ? "none" : padding;
   const wrapperStyle = floatingHeader || overlap ? {
     ...floatingHeader ? { paddingRight: "var(--ds-space-3)", paddingLeft: r.sidebarFloating ? 0 : "var(--ds-space-3)" } : {},
     ...overlap ? { marginTop: -overlap, position: "relative", zIndex: 1 } : {}
   } : void 0;
   const column = /* @__PURE__ */ jsx("div", { className: cn(columnClass(contentPadding), bottomPaddingClasses[verticalPadding ?? "default"], className), style: columnStyle, children: rest });
-  return /* @__PURE__ */ jsxs("div", { ref, "data-page-container": "", className: "w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", className: "w-full", children: [
     placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlap > 0), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
       strip,
       colourful ? header : /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
@@ -11614,6 +11886,31 @@ function SnappingHeader({
   stickyTop = "top-[var(--ds-navbar-height)]"
 }) {
   const [collapsed, setCollapsed] = useState(false);
+  const container = usePageContainer();
+  const stickyRef = useRef(null);
+  const setStickyRef = useCallback((node) => {
+    stickyRef.current = node;
+    if (typeof headerRef === "function") headerRef(node);
+    else if (headerRef) headerRef.current = node;
+  }, [headerRef]);
+  useLayoutEffect(() => {
+    const report = container?.setPinnedHeight;
+    if (!report) return;
+    const el = stickyRef.current;
+    if (!(pinned && collapsed) || !el) {
+      report(null);
+      return;
+    }
+    const sync = () => report(el.offsetHeight);
+    sync();
+    if (typeof ResizeObserver === "undefined") return () => report(null);
+    const obs = new ResizeObserver(sync);
+    obs.observe(el);
+    return () => {
+      obs.disconnect();
+      report(null);
+    };
+  }, [container?.setPinnedHeight, pinned, collapsed]);
   const sentinelRef = useRef(null);
   const collapsedRef = useRef(false);
   const rafRef = useRef(0);
@@ -11682,7 +11979,7 @@ function SnappingHeader({
   const headerEl = /* @__PURE__ */ jsxs(
     "header",
     {
-      ref: !isFloating ? headerRef : void 0,
+      ref: !isFloating ? setStickyRef : void 0,
       className: cn(
         "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         !isFloating && pinned && collapsed && cn("sticky", stickyTop, "z-[calc(var(--ds-z-sticky,40)-1)]"),
@@ -11820,7 +12117,7 @@ function SnappingHeader({
       /* @__PURE__ */ jsx(
         "div",
         {
-          ref: headerRef,
+          ref: setStickyRef,
           className: cn(
             pinned && collapsed && "sticky z-[calc(var(--ds-z-sticky,40)-1)]",
             pinned && collapsed && "top-0"
@@ -12533,7 +12830,9 @@ var sizeClasses = {
   xl: "max-w-4xl",
   full: "max-w-[calc(100vw-2rem)]"
 };
-function Dialog({ open, onClose, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit }) {
+function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
+  const guard = useDirtyGuard(dirty, onCloseProp, onDiscard);
+  const onClose = guard.requestClose;
   const titleId = useId();
   const descriptionId = useId();
   const isMobile = useBreakpoint("sm");
@@ -12660,6 +12959,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
                           children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children })
                         ] })
                       ] }) }),
+                      /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
                       footer && /* @__PURE__ */ jsx("div", { className: cn(
                         "flex justify-end gap-ds-2 p-ds-4",
                         "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -13846,6 +14146,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AppShell, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, Sheet, Sidebar, SidebarNav, SkipLink, SliderRange, Spinner, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useAppShell, useFormContext, useSidebar, useToast };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AppShell, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SkipLink, SliderRange, Spinner, SplitView, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useAppShell, useFormContext, useSidebar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map