gridsmith-ui 0.6.7 → 0.8.0

package/dist/index.js

@@ -1,18 +1,19 @@
+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-R2HNSJJG.js';
-export { CodeBlock, Divider, Link } from './chunk-R2HNSJJG.js';
-import { Badge } from './chunk-ADTPGMOD.js';
-export { Badge } from './chunk-ADTPGMOD.js';
-import { useBreakpoint } from './chunk-EKQHHP72.js';
-export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
-import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-LTV5X3S7.js';
-export { Tooltip, useTextOverflow } from './chunk-LTV5X3S7.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, 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';
-import { Icon } from './chunk-NM3BFWHH.js';
+import { Icon } from './chunk-X4CNZFWC.js';
 import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useContext, useState, memo, useRef, useEffect, useCallback, useLayoutEffect, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, Children, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useContext, useState, memo, useCallback, useRef, useEffect, useLayoutEffect, Children, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -540,7 +541,8 @@ function Dropdown({
   ref,
   container,
   error = false,
-  showChips = true
+  showChips = true,
+  "aria-label": ariaLabel
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -706,6 +708,7 @@ function Dropdown({
         "aria-invalid": error || void 0,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
+        "aria-label": ariaLabel,
         className: cn(
           "w-full flex items-center justify-between gap-ds-2",
           size === "sm" ? "px-ds-2 py-ds-1 text-xs h-[var(--ds-control-height-sm)]" : "px-ds-3 py-ds-2 text-sm h-[var(--ds-control-height-md)]",
@@ -3343,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,
@@ -3956,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}`,
@@ -4105,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)]",
@@ -4189,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}]` : "";
@@ -4303,24 +4520,29 @@ 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" };
-  return /* @__PURE__ */ jsxs(
+  const { ref, isTruncated } = useTextOverflow({ lines: 1, content: trend.value });
+  const badge = /* @__PURE__ */ jsxs(
     "span",
     {
       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",
-        colors[trend.direction]
+        "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[sentiment]
       ),
       children: [
         /* @__PURE__ */ jsx("span", { children: arrows[trend.direction] }),
-        trend.value
+        /* @__PURE__ */ jsx("span", { ref, className: "truncate", children: trend.value })
       ]
     }
   );
+  if (!isTruncated) return badge;
+  return /* @__PURE__ */ jsx(Tooltip, { content: trend.value, children: badge });
 }
 function DataList({ items, columns = 1, className }) {
   return /* @__PURE__ */ jsx(
@@ -4376,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",
@@ -4389,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
         ),
@@ -4431,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
       ),
@@ -4851,8 +5074,11 @@ function SegmentedControl({
   variant = "default",
   fullWidth = false,
   onHoverChange,
-  className
+  className,
+  "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(() => {
@@ -4870,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)]",
@@ -4900,11 +5126,25 @@ 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",
     {
       ref: containerRef,
       role: "radiogroup",
+      "aria-label": ariaLabel,
       onKeyDown: handleKeyDown,
       className: cn(
         "relative items-center",
@@ -6509,25 +6749,161 @@ var defaultIcons = {
   error: "\u26A0",
   "no-permission": "\u{1F512}"
 };
+var FRAME_ICON_SIZE = 28;
+function renderIcon(icon) {
+  if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, { name: icon, size: FRAME_ICON_SIZE, className: "text-[var(--ds-text-muted)]" });
+  if (isValidElement(icon) && icon.type === Icon) return cloneElement(icon, { size: FRAME_ICON_SIZE });
+  return icon;
+}
 function EmptyState({ icon, iconFrame = "circle", title, description, action, variant = "empty", bordered = false, className }) {
+  const iconNode = icon === void 0 || icon === null ? void 0 : renderIcon(icon);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex flex-col items-center justify-center py-[var(--ds-space-10)]",
+        "flex flex-col items-center justify-center py-[var(--ds-space-10)] px-[var(--ds-space-6)]",
         "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
         bordered && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         className
       ),
       children: [
-        iconFrame === "none" && icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-ds-4", children: icon }) : /* @__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: icon ?? /* @__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 }),
+        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)] 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 })
       ]
     }
   );
 }
+function SkipLink({ href = "#main", children = "Skip to content", className }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: cn(
+        "sr-only focus:not-sr-only focus:fixed focus:top-[var(--ds-space-2)] focus:left-[var(--ds-space-2)] focus:z-[var(--ds-z-tooltip)]",
+        "focus:px-[var(--ds-space-3)] focus:py-[var(--ds-space-2)] focus:rounded-[var(--ds-radius-md)] focus:text-sm focus:font-medium",
+        "focus:bg-[var(--ds-bg-surface-elevated)] focus:text-[var(--ds-text-primary)] focus:shadow-[var(--ds-shadow-md)]",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--ds-accent-primary)]",
+        className
+      ),
+      children
+    }
+  );
+}
+function useCompact(ref, breakpoint) {
+  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 next = ref.current?.offsetWidth ?? 0;
+    if (next > 0) setWidth(next);
+  }, [ref]);
+  useLayoutEffect(() => {
+    check();
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [check, ref]);
+  return width;
+}
+function TableToolbar({
+  search,
+  primaryFilter,
+  filters,
+  filtersOpen,
+  onFiltersOpenChange,
+  activeFilterCount,
+  activeFilters,
+  onClearAll,
+  resultCount,
+  resultNoun = ["result", "results"],
+  actions,
+  size = "sm",
+  compactBreakpoint = 680,
+  className
+}) {
+  const rowRef = useRef(null);
+  const compact = useCompact(rowRef, compactBreakpoint);
+  const filterRowId = useId();
+  const [openState, setOpenState] = useState(false);
+  const open = filtersOpen ?? openState;
+  const setOpen = (next) => {
+    setOpenState(next);
+    onFiltersOpenChange?.(next);
+  };
+  const iconSize = size === "sm" ? 14 : 16;
+  const count = activeFilterCount ?? activeFilters?.length ?? 0;
+  const hasChips = !!activeFilters?.length;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-ds-3 min-w-0", className), "data-table-toolbar": "", children: [
+    /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex items-center gap-ds-2 flex-wrap", children: [
+      search && /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": search.label,
+          placeholder: search.placeholder ?? search.label,
+          value: search.value,
+          size,
+          onChange: (e) => search.onChange(e.target.value),
+          className: "flex-1 min-w-[160px] max-w-[280px]"
+        }
+      ),
+      primaryFilter && (compact ? /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          "aria-label": primaryFilter.label,
+          options: primaryFilter.options.map((o) => ({ id: o.value, label: o.label })),
+          value: primaryFilter.value,
+          onChange: (v) => primaryFilter.onChange(v),
+          size,
+          className: "w-[150px]"
+        }
+      ) : /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          "aria-label": primaryFilter.label,
+          options: primaryFilter.options,
+          value: primaryFilter.value,
+          size,
+          onChange: primaryFilter.onChange
+        }
+      )),
+      (filters || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-1 justify-end", children: [
+        filters && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: open ? "secondary" : "outline",
+            size,
+            iconLeft: /* @__PURE__ */ jsx(Icon, { name: "filter", size: iconSize }),
+            onClick: () => setOpen(!open),
+            "aria-expanded": open,
+            "aria-controls": filterRowId,
+            className: "mr-auto",
+            children: [
+              "Filters",
+              count > 0 && !open && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "xs", className: "ml-ds-1", children: count })
+            ]
+          }
+        ),
+        actions
+      ] })
+    ] }),
+    filters && open && /* @__PURE__ */ jsx("div", { id: filterRowId, className: "flex items-center gap-ds-3 flex-wrap", children: filters }),
+    (resultCount !== void 0 || hasChips) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-wrap", children: [
+      resultCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--ds-text-muted)]", "aria-live": "polite", children: [
+        resultCount,
+        " ",
+        resultCount === 1 ? resultNoun[0] : resultNoun[1]
+      ] }),
+      activeFilters?.map((f) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: "subtle", onRemove: f.onRemove, children: f.label }, f.id)),
+      hasChips && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })
+    ] })
+  ] });
+}
 var dotVariant = {
   default: "bg-[var(--ds-accent-primary)] shadow-[0_0_0_3px_var(--ds-accent-primary)]/20",
   success: "bg-[var(--ds-status-success)] shadow-[0_0_0_3px_var(--ds-status-success)]/20",
@@ -6561,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",
@@ -6624,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() {
@@ -7144,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" });
 }
@@ -7784,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);
@@ -7954,6 +8189,7 @@ function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92
                     children
                   }
                 ),
+                confirm,
                 footer && /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -8203,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",
@@ -8226,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";
@@ -8380,6 +8678,7 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
                     children
                   }
                 ),
+                confirm,
                 footer && /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -8410,12 +8709,18 @@ var AppShell = forwardRef(function AppShell2({
   mobileMenuFlush = true,
   navbar,
   mobileNav,
+  footer,
+  skipLink = true,
+  mainId = "main",
   aside,
   asideSide = "right",
   launcher,
   children,
   className,
-  scrollable = true
+  scrollable = true,
+  theme,
+  currentPath,
+  homePath = "/"
 }, ref) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [asideOpen, setAsideOpen] = useState(false);
@@ -8431,15 +8736,29 @@ var AppShell = forwardRef(function AppShell2({
   const hasMobileNav = mobileNav != null;
   const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
   const [shellEl, setShellEl] = useState(null);
+  const [chrome, setChrome] = useState({});
+  const registerChrome = useCallback((kind, position) => {
+    setChrome((c) => c[kind] === position ? c : { ...c, [kind]: position });
+    return () => setChrome((c) => {
+      if (!(kind in c)) return c;
+      const next = { ...c };
+      delete next[kind];
+      return next;
+    });
+  }, []);
+  const navbarFloating = (chrome.navbar ?? theme?.navbarPosition) === "floating";
+  const sidebarFloating = hasSidebar && !isMobile && (chrome.sidebar ?? theme?.sidebarPosition) === "floating";
+  const isHome = currentPath != null && currentPath === homePath;
   return /* @__PURE__ */ jsx(
     AppShellContext,
     {
-      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl },
+      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
         setShellEl(el);
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
       }, className: cn("relative h-screen flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden", className), children: [
+        skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
         layout === "sidebar-header" && navbar,
         layout === "multi-column" && navbar,
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
@@ -8451,13 +8770,18 @@ var AppShell = forwardRef(function AppShell2({
             /* @__PURE__ */ jsx(
               "main",
               {
+                id: mainId,
+                tabIndex: -1,
                 className: cn(
-                  "flex-1 min-h-0",
+                  "flex-1 min-h-0 focus:outline-none",
                   scrollable ? "overflow-y-auto" : "relative",
                   layout === "multi-column" && "flex"
                 ),
                 style: { containerType: "inline-size" },
-                children: scrollable ? children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
+                children: scrollable ? footer ? /* @__PURE__ */ jsxs("div", { className: "min-h-full flex flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+                  footer
+                ] }) : children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
               }
             )
           ] }),
@@ -8491,8 +8815,8 @@ function AsidePanel({
   side = "right",
   width = "420px",
   position = "flush",
-  navbarFloating = false,
-  sidebarFloating = false,
+  navbarFloating: navbarFloatingProp,
+  sidebarFloating: sidebarFloatingProp,
   collapseBelow = "lg",
   keepMounted = true,
   resizable = true,
@@ -8504,6 +8828,8 @@ function AsidePanel({
 }) {
   const collapsed = useBreakpoint(collapseBelow);
   const shell = useAppShell();
+  const navbarFloating = navbarFloatingProp ?? shell?.navbarFloating ?? false;
+  const sidebarFloating = sidebarFloatingProp ?? shell?.sidebarFloating ?? false;
   const setAsideOpen = shell?.setAsideOpen;
   const setAsideFloating = shell?.setAsideFloating;
   const floating = position === "floating";
@@ -8647,6 +8973,7 @@ var StackedList = forwardRef(function StackedList2({
   divided = true,
   flush = false,
   selectedId,
+  hover = "tint",
   className
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -8694,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,
@@ -8715,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
                     }
@@ -8832,7 +9161,7 @@ var subscribeNever = () => () => {
 var getClientSnapshot = () => true;
 var getServerSnapshot = () => false;
 var bodyLaunchers = 0;
-function renderIcon(icon, size) {
+function renderIcon2(icon, size) {
   return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size }) : icon;
 }
 function Launcher({
@@ -8976,7 +9305,7 @@ function Launcher({
               accentGlyph && ACCENT_GLYPH,
               showClose && "rotate-90"
             ),
-            children: renderIcon(glyph, glyphSize)
+            children: renderIcon2(glyph, glyphSize)
           }
         ),
         variant === "pill" && /* @__PURE__ */ jsx("span", { children: label }),
@@ -8996,7 +9325,7 @@ function Launcher({
             children: label
           }
         ),
-        ribbonOverlayClose && /* @__PURE__ */ jsx("span", { "data-launcher-close": "", className: cn("absolute inset-0 inline-flex items-center justify-center", accentGlyph && ACCENT_GLYPH), children: renderIcon("close", glyphSize) }),
+        ribbonOverlayClose && /* @__PURE__ */ jsx("span", { "data-launcher-close": "", className: cn("absolute inset-0 inline-flex items-center justify-center", accentGlyph && ACCENT_GLYPH), children: renderIcon2("close", glyphSize) }),
         badge && !showClose && // A ribbon is flush to the viewport edge, so its badge hangs off the inner corner instead.
         /* @__PURE__ */ jsx("span", { className: "absolute", style: badgeStyle, "data-testid": "launcher-badge", children: typeof badge === "number" ? /* @__PURE__ */ jsx(Badge, { variant: "error", size: "xs", children: badge > 99 ? "99+" : badge }) : /* @__PURE__ */ jsx("span", { className: "block h-ds-2.5 w-ds-2.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error)] ring-2 ring-[var(--ds-bg-surface)]" }) })
       ]
@@ -9306,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 });
@@ -10009,7 +10436,7 @@ var Sidebar = forwardRef(function Sidebar2({
   mini = false,
   type = "traditional",
   position = "flush",
-  navbarFloating,
+  navbarFloating: navbarFloatingProp,
   navSize = "md",
   fill = false,
   className
@@ -10019,6 +10446,11 @@ var Sidebar = forwardRef(function Sidebar2({
   const portalRef = useCallback((node) => setPortalEl(node), []);
   const isControlled = controlledCollapsed !== void 0;
   const appShell = useAppShell();
+  const navbarFloating = navbarFloatingProp ?? appShell?.navbarFloating;
+  useLayoutEffect(() => {
+    if (fill || !appShell) return;
+    return appShell.registerChrome("sidebar", position);
+  }, [appShell?.registerChrome, fill, position]);
   const usesShellState = appShell !== null && !isControlled && defaultCollapsed === void 0 && !fill && type === "traditional";
   const uncontrolledCollapsed = usesShellState ? appShell.sidebarCollapsed : internalCollapsed;
   const collapsed = mini || (isControlled ? controlledCollapsed : uncontrolledCollapsed);
@@ -10772,9 +11204,174 @@ function NavButton({ item, onClick }) {
     }
   );
 }
-function TruncHeading({ as: Tag3 = "h1", className, children }) {
-  const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const heading = /* @__PURE__ */ jsx(Tag3, { ref, className: cn("truncate", className), children });
+
+// ../../showcase/src/lib/shell-theme.ts
+var PAGE_HEADER_MARK = /* @__PURE__ */ Symbol.for("gridsmith.PageHeader");
+function resolvePageHeader(theme, props, facts) {
+  const t = theme?.pageHeader ?? {};
+  const themeVariant = t.variant ?? "default";
+  const homeOnlyElsewhere = themeVariant === "colourful" && !!t.colourfulHomeOnly && !facts.isHome;
+  const variant = props.variant ?? (homeOnlyElsewhere ? t.otherPagesVariant ?? "default" : themeVariant);
+  const behavior = props.behavior ?? t.behavior ?? "static";
+  const position = props.position ?? t.position ?? "flush";
+  const intensity = props.intensity ?? t.intensity ?? "bold";
+  const b = theme?.breadcrumbs ?? {};
+  const navbarFloating = props.navbarFloating ?? facts.navbarFloating;
+  const sidebarFloating = (props.sidebarFloating ?? facts.sidebarFloating) && !facts.isMobile;
+  return {
+    variant,
+    behavior,
+    position,
+    intensity,
+    breadcrumbPosition: b.position ?? "inline",
+    breadcrumbStyle: props.breadcrumbStyle ?? b.style ?? "default",
+    breadcrumbSeparator: props.breadcrumbSeparator ?? b.separator ?? "chevron",
+    navbarFloating,
+    sidebarFloating,
+    outside: variant === "colourful" || behavior === "snapping" || position === "floating"
+  };
+}
+var maxWidthValues = {
+  sm: "var(--ds-bp-sm)",
+  md: "var(--ds-bp-md)",
+  lg: "var(--ds-bp-lg)",
+  xl: "var(--ds-bp-xl)",
+  full: "100%"
+};
+var widthToMaxWidth = {
+  constrained: "xl",
+  full: "full",
+  narrow: "md"
+};
+var paddingClasses = {
+  none: "",
+  default: "px-ds-6",
+  wide: "px-ds-10"
+};
+var verticalPaddingClasses = {
+  none: "",
+  default: "pt-ds-8 pb-ds-12",
+  spacious: "pt-ds-8 pb-ds-16"
+};
+var bottomPaddingClasses = {
+  none: "",
+  default: "pb-ds-12",
+  spacious: "pb-ds-16"
+};
+var FLOATING_BLOCK = cn(
+  "rounded-[var(--ds-radius-md)]",
+  "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+  GLASS_SURFACE,
+  "overflow-hidden"
+);
+var PageContainerContext = createContext(null);
+function usePageContainer() {
+  return useContext(PageContainerContext);
+}
+function isPageHeaderElement(node) {
+  if (!isValidElement(node)) return false;
+  const type = node.type;
+  return !!type && typeof type !== "string" && type[PAGE_HEADER_MARK] === true;
+}
+function floatingBlockPadding(navbarFloating, sidebarFloating, overlap) {
+  return {
+    paddingTop: navbarFloating ? 0 : "var(--ds-space-3)",
+    paddingRight: "var(--ds-space-3)",
+    paddingBottom: overlap ? 0 : "var(--ds-space-3)",
+    paddingLeft: sidebarFloating ? 0 : "var(--ds-space-3)",
+    marginBottom: overlap ? 0 : "var(--ds-space-3)"
+  };
+}
+var PageContainer = forwardRef(function PageContainer2({
+  width,
+  maxWidth = "xl",
+  padding = "default",
+  verticalPadding,
+  centered = true,
+  children,
+  className,
+  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);
+  const headerIdx = kids.findIndex(isPageHeaderElement);
+  if (headerIdx === -1) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          paddingClasses[padding],
+          verticalPaddingClasses[verticalPadding ?? "default"],
+          centered && "mx-auto",
+          className
+        ),
+        style: { maxWidth: maxWidthValue, containerType: "inline-size" },
+        children
+      }
+    );
+  }
+  const headerEl = kids[headerIdx];
+  const rest = kids.filter((_, i) => i !== headerIdx);
+  const r = resolvePageHeader(shell?.theme, headerEl.props, {
+    isHome: shell?.isHome ?? false,
+    isMobile: shell?.isMobile ?? false,
+    navbarFloating: shell?.navbarFloating ?? false,
+    sidebarFloating: shell?.sidebarFloating ?? false
+  });
+  const snapping = r.behavior === "snapping";
+  const floatingHeader = r.position === "floating";
+  const colourful = r.variant === "colourful";
+  const crumbs = Array.isArray(headerEl.props.breadcrumbs) && headerEl.props.breadcrumbs.length > 0 ? headerEl.props.breadcrumbs : null;
+  const contained = r.breadcrumbPosition === "contained" && !!crumbs;
+  const block = floatingHeader && contained && !snapping;
+  const placement = block ? "block" : r.outside ? "outside" : "inside";
+  const breadcrumbsInsideHeader = snapping && floatingHeader && contained;
+  const overlap = colourful && typeof headerEl.props.overlapHeight === "number" && headerEl.props.overlapHeight > 0 ? headerEl.props.overlapHeight : 0;
+  const strip = contained && !breadcrumbsInsideHeader && crumbs ? (
+    // The strip is the whole trail: the path, then this page as the current item (Breadcrumbs renders the last item as text).
+    /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth: maxWidthValue, separator: r.breadcrumbSeparator, items: headerEl.props.title ? [...crumbs, { label: headerEl.props.title }] : crumbs })
+  ) : 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, 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: 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 })
+    ] }) }) : placement === "outside" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      strip,
+      header
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      strip,
+      /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
+    ] }),
+    wrapperStyle ? /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: column }) : column
+  ] });
+});
+function TruncHeading({ as: Tag3 = "h1", className, children, lines: linesProp }) {
+  const lines = linesProp ?? (Tag3 === "h1" ? 2 : 1);
+  const { ref, isTruncated } = useTextOverflow({ lines });
+  const heading = /* @__PURE__ */ jsx(Tag3, { ref, className: cn(lines === 2 ? "line-clamp-2" : "truncate", className), children });
   if (!isTruncated) return heading;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
 }
@@ -10895,30 +11492,49 @@ var PageHeader = forwardRef(function PageHeader2({
   bannerImage,
   as: Heading = "h1",
   className,
-  variant = "default",
-  behavior = "static",
-  intensity = "bold",
+  variant: variantProp,
+  behavior: behaviorProp,
+  intensity: intensityProp,
   backgroundImage,
   overlapHeight,
   expandedContent,
   collapseOffset = 100,
   pinned = true,
-  contentMaxWidth,
+  contentMaxWidth: contentMaxWidthProp,
   tabs,
   breadcrumbStyle,
   breadcrumbSeparator,
-  hideExpandedBreadcrumbs,
-  position = "flush",
-  navbarFloating,
-  sidebarFloating,
-  noBottomMargin,
-  containedBreadcrumbs
+  hideExpandedBreadcrumbs: hideExpandedBreadcrumbsProp,
+  position: positionProp,
+  navbarFloating: navbarFloatingProp,
+  sidebarFloating: sidebarFloatingProp,
+  noBottomMargin: noBottomMarginProp,
+  containedBreadcrumbs: containedBreadcrumbsProp
 }, ref) {
-  const isFloating = position === "floating";
   const shell = useAppShell();
+  const container = usePageContainer();
+  const r = resolvePageHeader(shell?.theme, {
+    variant: variantProp,
+    behavior: behaviorProp,
+    position: positionProp,
+    intensity: intensityProp,
+    breadcrumbStyle,
+    breadcrumbSeparator,
+    navbarFloating: navbarFloatingProp,
+    sidebarFloating: sidebarFloatingProp
+  }, { isHome: shell?.isHome ?? false, isMobile: shell?.isMobile ?? false, navbarFloating: shell?.navbarFloating ?? false, sidebarFloating: shell?.sidebarFloating ?? false });
+  const { variant, behavior, position, intensity, navbarFloating, sidebarFloating } = r;
+  const isFloating = position === "floating";
   const asideFloatingSide = shell?.asideOpen && shell.asideFloating ? shell.asideSide : null;
-  const bcPill = breadcrumbStyle === "pill";
-  const bcSep = breadcrumbSeparator ?? "chevron";
+  const bcPill = r.breadcrumbStyle === "pill";
+  const bcSep = r.breadcrumbSeparator;
+  const contentMaxWidth = contentMaxWidthProp ?? container?.contentMaxWidth;
+  const stickyTop = shell ? "top-0" : "top-[var(--ds-navbar-height)]";
+  const snapping = behavior === "snapping";
+  const inlineBreadcrumbs = container?.containedBreadcrumbs && !snapping ? void 0 : breadcrumbs;
+  const hideExpandedBreadcrumbs = hideExpandedBreadcrumbsProp ?? (!!container?.containedBreadcrumbs && snapping);
+  const containedBreadcrumbs = containedBreadcrumbsProp ?? (container?.breadcrumbsInsideHeader && breadcrumbs?.length ? /* @__PURE__ */ jsx(Breadcrumbs, { variant: "contained", itemVariant: r.breadcrumbStyle, bleed: true, contentMaxWidth, separator: bcSep, items: [...breadcrumbs, { label: title }] }) : void 0);
+  const noBottomMargin = noBottomMarginProp ?? container?.noBottomMargin;
   if (behavior === "snapping") {
     return /* @__PURE__ */ jsx(
       SnappingHeader,
@@ -10926,7 +11542,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -10945,6 +11561,7 @@ var PageHeader = forwardRef(function PageHeader2({
         hideExpandedBreadcrumbs,
         as: Heading,
         className,
+        stickyTop,
         isFloating,
         navbarFloating,
         sidebarFloating,
@@ -10955,7 +11572,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: isFloating ? void 0 : ref, isFloating, contentMaxWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, badge, breadcrumbs: inlineBreadcrumbs, actions, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: isFloating ? void 0 : ref, isFloating, contentMaxWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
@@ -10963,7 +11580,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -10984,7 +11601,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -11009,7 +11626,7 @@ var PageHeader = forwardRef(function PageHeader2({
         title,
         description,
         badge,
-        breadcrumbs,
+        breadcrumbs: inlineBreadcrumbs,
         onBack,
         actions,
         avatar,
@@ -11038,6 +11655,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   return header;
 });
+Object.assign(PageHeader, { [PAGE_HEADER_MARK]: true });
 function floatingContentProps(isFloating, contentMaxWidth, extraClassName) {
   if (!isFloating) return { className: extraClassName, style: void 0 };
   return {
@@ -11131,7 +11749,7 @@ function MinimalHeader({
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && "mt-ds-0.5"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
-        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: 1, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
         badge
       ] }),
       actions && /* @__PURE__ */ jsx(ButtonSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
@@ -11264,9 +11882,35 @@ function SnappingHeader({
   navbarFloating,
   sidebarFloating,
   containedBreadcrumbs,
-  headerRef
+  headerRef,
+  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);
@@ -11335,10 +11979,10 @@ 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 && "sticky top-[var(--ds-navbar-height)] z-[calc(var(--ds-z-sticky,40)-1)]",
+        !isFloating && pinned && collapsed && cn("sticky", stickyTop, "z-[calc(var(--ds-z-sticky,40)-1)]"),
         collapsed && (isFloating ? cn(FLOATING_HEADER, "bg-[var(--ds-bg-surface)]") : ["bg-[var(--ds-bg-surface)]", GLASS_BACKDROP, "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", "shadow-[var(--ds-shadow-sm)]"]),
         !collapsed && isColourful && (isFloating && !wrapperHasCard ? [
           "relative overflow-hidden",
@@ -11432,7 +12076,7 @@ function SnappingHeader({
                             }
                           );
                         })(),
-                        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
+                        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: collapsed ? 1 : void 0, className: cn(
                           "font-[family-name:var(--ds-font-display)] font-[var(--ds-weight-heading)]",
                           collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]")
                         ), children: title }),
@@ -11473,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"
@@ -11777,6 +12421,7 @@ var Navbar = forwardRef(function Navbar2({
   onMenuClick
 }, ref) {
   const appShell = useAppShell();
+  useLayoutEffect(() => appShell?.registerChrome("navbar", position), [appShell?.registerChrome, position]);
   const isSmallPhone = appShell?.isMobile && !appShell.isTablet;
   const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
   const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
@@ -12185,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");
@@ -12312,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)]",
@@ -13192,7 +13840,7 @@ var TOAST_POSITION_CLASSES = {
   "top-center": "top-ds-4 left-1/2 -translate-x-1/2",
   "bottom-center": "bottom-ds-4 left-1/2 -translate-x-1/2"
 };
-function Toast({ variant = "default", message, visible, onDismiss, duration = 3e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
+function Toast({ variant = "default", message, visible, onDismiss, duration = 5e3, pauseOnHover = false, action, position = "bottom-right", mode, container, inline = false }) {
   const isMobile = useBreakpoint("sm");
   const isCentered = position === "top-center" || position === "bottom-center";
   const timerRef = useRef(void 0);
@@ -13295,7 +13943,7 @@ function useToast() {
   return ctx;
 }
 var toastSeq = 0;
-function ToastProvider({ children, maxVisible = 3, position = "bottom-right", duration = 3e3, mode, pauseOnHover = true }) {
+function ToastProvider({ children, maxVisible = 1, position = "bottom-right", duration = 5e3, mode, pauseOnHover = true }) {
   const [queue, setQueue] = useState([]);
   const isMobile = useBreakpoint("sm");
   const dismiss = useCallback((id) => {
@@ -13371,54 +14019,6 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     )
   ] });
 }
-var maxWidthValues = {
-  sm: "var(--ds-bp-sm)",
-  md: "var(--ds-bp-md)",
-  lg: "var(--ds-bp-lg)",
-  xl: "var(--ds-bp-xl)",
-  full: "100%"
-};
-var widthToMaxWidth = {
-  constrained: "xl",
-  full: "full",
-  narrow: "md"
-};
-var paddingClasses = {
-  none: "",
-  default: "px-ds-6",
-  wide: "px-ds-10"
-};
-var verticalPaddingClasses = {
-  none: "",
-  default: "pt-ds-8 pb-ds-12",
-  spacious: "pt-ds-8 pb-ds-16"
-};
-var PageContainer = forwardRef(function PageContainer2({
-  width,
-  maxWidth = "xl",
-  padding = "default",
-  verticalPadding = "default",
-  centered = true,
-  children,
-  className
-}, ref) {
-  const resolvedMaxWidth = width ? widthToMaxWidth[width] : maxWidth;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "w-full",
-        paddingClasses[padding],
-        verticalPaddingClasses[verticalPadding],
-        centered && "mx-auto",
-        className
-      ),
-      style: { maxWidth: maxWidthValues[resolvedMaxWidth], containerType: "inline-size" },
-      children
-    }
-  );
-});
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
   description,
@@ -13546,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, SliderRange, Spinner, StackedList, StatsCard, StatusDot, Stepper, Table, 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