gridsmith-ui 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,18 +1,20 @@
+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 { 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 { Link } from './chunk-X27PSHOH.js';
+export { CodeBlock, Divider, Link } from './chunk-X27PSHOH.js';
+import { Badge } from './chunk-PHQWHAT3.js';
+export { Badge } from './chunk-PHQWHAT3.js';
+import { inferColumnKinds } from './chunk-PDZL4A6K.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-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, useCallback, useRef, useEffect, useLayoutEffect, Children, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useContext, useState, memo, useCallback, useRef, useEffect, isValidElement, useLayoutEffect, Children, useId, cloneElement, useMemo, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -36,7 +38,8 @@ function Spinner({ size = "md", color = "default", label = "Loading", className
     }
   );
 }
-var ButtonSizeContext = createContext(null);
+var ControlSizeContext = createContext(null);
+var ButtonSizeContext = ControlSizeContext;
 var variantStyles = {
   default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
   secondary: "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
@@ -51,13 +54,13 @@ var variantStyles = {
 var sizeStyles = {
   // xs / icon-xs: dense tool chrome (builder toolbars, inline row actions).
   xs: "h-ds-6 px-ds-3 py-0 text-xs",
-  sm: "h-ds-8 px-ds-4 py-ds-1 text-xs",
-  md: "h-ds-10 px-ds-6 py-ds-2 text-sm",
-  lg: "h-ds-12 px-ds-8 py-ds-3 text-base",
+  sm: "h-[var(--ds-control-height-sm)] px-ds-4 py-ds-1 text-xs",
+  md: "h-[var(--ds-control-height-md)] px-ds-6 py-ds-2 text-sm",
+  lg: "h-[var(--ds-control-height-lg)] px-ds-8 py-ds-3 text-base",
   "icon-xs": "h-ds-6 w-ds-6 p-0",
-  "icon-sm": "h-ds-8 w-ds-8 p-0",
-  icon: "h-ds-10 w-ds-10 p-0",
-  "icon-lg": "h-ds-12 w-ds-12 p-0"
+  "icon-sm": "h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] p-0",
+  icon: "h-[var(--ds-control-height-md)] w-[var(--ds-control-height-md)] p-0",
+  "icon-lg": "h-[var(--ds-control-height-lg)] w-[var(--ds-control-height-lg)] p-0"
 };
 var linkSizeStyles = {
   xs: "text-xs",
@@ -77,7 +80,7 @@ var iconPaddingReduce = {
 };
 var HOVER_SCALE_CAP = { "--_btn-scale": "min(var(--ds-hover-scale), 1.02)" };
 var Button = forwardRef(function Button2({ variant = "default", size: sizeProp, iconLeft, iconRight, loading, className, children, disabled, style, onClick, ...props }, ref) {
-  const contextSize = useContext(ButtonSizeContext);
+  const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const isLink = variant === "link";
   const spinnerSize = size === "lg" || size === "icon-lg" ? "md" : "sm";
@@ -336,7 +339,19 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     }
   );
 }
-function Input({ className, size = "md", error = false, prefix, suffix, ...props }) {
+var INPUT_HEIGHT = {
+  sm: "h-[var(--ds-control-height-sm)]",
+  md: "h-[var(--ds-control-height-md)]",
+  lg: "h-[var(--ds-control-height-lg)]"
+};
+var INPUT_TEXT = {
+  sm: "px-ds-2 py-ds-1 text-xs",
+  md: "px-ds-3 py-ds-2 text-sm",
+  lg: "px-ds-4 py-ds-3 text-base"
+};
+function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
   const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
   if (prefix || suffix) {
@@ -345,7 +360,7 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
       {
         className: cn(
           "flex items-center w-full",
-          size === "sm" ? "h-[var(--ds-control-height-sm)]" : "h-[var(--ds-control-height-md)]",
+          INPUT_HEIGHT[size],
           "bg-[var(--ds-input-bg)]",
           "border-[length:var(--ds-border-width)]",
           borderColor,
@@ -366,7 +381,7 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
               "aria-invalid": error || void 0,
               className: cn(
                 "flex-1 min-w-0 bg-transparent outline-none",
-                size === "sm" ? "px-ds-2 py-ds-1 text-xs" : "px-ds-3 py-ds-2 text-sm",
+                INPUT_TEXT[size],
                 "text-[var(--ds-text-primary)]",
                 "placeholder:text-[var(--ds-text-muted)]",
                 "disabled:cursor-not-allowed",
@@ -386,7 +401,8 @@ function Input({ className, size = "md", error = false, prefix, suffix, ...props
       "aria-invalid": error || void 0,
       className: cn(
         "flex w-full",
-        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)]",
+        INPUT_TEXT[size],
+        INPUT_HEIGHT[size],
         "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
         "border-[length:var(--ds-border-width)]",
         borderColor,
@@ -428,7 +444,7 @@ function Textarea({ className, autoResize, maxRows, error = false, ref, ...props
       ref: textareaRef,
       "aria-invalid": error || void 0,
       className: cn(
-        "flex min-h-[80px] w-full px-ds-3 py-ds-2 text-sm",
+        "flex min-h-[var(--ds-control-height-md)] w-full px-ds-3 py-ds-2 text-sm",
         "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
         "border-[length:var(--ds-border-width)]",
         error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-input-border-hover)]",
@@ -526,6 +542,11 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
     }
   );
 }
+var DROPDOWN_HEIGHT = {
+  sm: "px-ds-2 py-ds-1 text-xs h-[var(--ds-control-height-sm)]",
+  md: "px-ds-3 py-ds-2 text-sm h-[var(--ds-control-height-md)]",
+  lg: "px-ds-4 py-ds-3 text-base h-[var(--ds-control-height-lg)]"
+};
 function Dropdown({
   options,
   value,
@@ -535,7 +556,7 @@ function Dropdown({
   placeholder = "Select...",
   multiple,
   searchable,
-  size = "md",
+  size: sizeProp,
   className,
   ref,
   container,
@@ -543,6 +564,8 @@ function Dropdown({
   showChips = true,
   "aria-label": ariaLabel
 }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [positioned, setPositioned] = useState(false);
@@ -710,7 +733,7 @@ function Dropdown({
         "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)]",
+          DROPDOWN_HEIGHT[size],
           "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
           "border-[length:var(--ds-border-width)]",
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
@@ -847,7 +870,19 @@ function OptionButton({
     }
   );
 }
-function Combobox({ value, onChange, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false }) {
+var CONTROL_HEIGHT = {
+  sm: "h-[var(--ds-control-height-sm)]",
+  md: "h-[var(--ds-control-height-md)]",
+  lg: "h-[var(--ds-control-height-lg)]"
+};
+var TEXT_SIZE = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function Combobox({ value, onChange, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   useOverlayLayer(open);
   const [query, setQuery] = useState("");
@@ -938,7 +973,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
       {
         className: cn(
           "flex items-center",
-          "h-[var(--ds-control-height-md)]",
+          CONTROL_HEIGHT[size],
           "border-[length:var(--ds-border-width)]",
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
@@ -974,7 +1009,9 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
               onBlur: handleBlur,
               onKeyDown: handleKeyDown,
               className: cn(
-                "flex-1 bg-transparent text-sm text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
+                "flex-1 bg-transparent",
+                TEXT_SIZE[size],
+                "text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)]",
                 "outline-none min-w-0",
                 "py-ds-2 px-ds-2"
               )
@@ -1224,6 +1261,16 @@ function RadioGroup({ value, onChange, options, orientation = "vertical", classN
     )
   ] });
 }
+var CONTROL_HEIGHT2 = {
+  sm: "h-[var(--ds-control-height-sm)]",
+  md: "h-[var(--ds-control-height-md)]",
+  lg: "h-[var(--ds-control-height-lg)]"
+};
+var TEXT_SIZE2 = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var MONTHS = [
   "January",
@@ -1251,7 +1298,9 @@ function isSameDay(a, b) {
 function formatDate(d) {
   return `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
 }
-function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, min, max, range }) {
+function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const [hover, setHover] = useState(null);
   const [viewDate, setViewDate] = useState(() => value ?? range?.start ?? range?.end ?? /* @__PURE__ */ new Date());
@@ -1327,8 +1376,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         className: cn(
-          "flex items-center gap-ds-2 text-sm w-full",
-          "h-[var(--ds-control-height-md)]",
+          "flex items-center gap-ds-2 w-full",
+          CONTROL_HEIGHT2[size],
+          TEXT_SIZE2[size],
           "border-[length:var(--ds-border-width)]",
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
@@ -1621,6 +1671,16 @@ function getOverlappingGroups(events) {
 function timeToFraction(d) {
   return (d.getHours() * 60 + d.getMinutes()) / (24 * 60);
 }
+var CONTROL_HEIGHT3 = {
+  sm: "h-[var(--ds-control-height-sm)]",
+  md: "h-[var(--ds-control-height-md)]",
+  lg: "h-[var(--ds-control-height-lg)]"
+};
+var TEXT_SIZE3 = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
 var MONTHS2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 function fmt(d) {
   return `${MONTHS2[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
@@ -1661,8 +1721,11 @@ function DateRangePicker({
   min,
   max,
   presets = DEFAULT_DATE_RANGE_PRESETS,
-  weekStartsOn = 0
+  weekStartsOn = 0,
+  size: sizeProp
 }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const [viewDate, setViewDate] = useState(() => value.start ?? /* @__PURE__ */ new Date());
   const [hover, setHover] = useState(null);
@@ -1733,8 +1796,9 @@ function DateRangePicker({
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         className: cn(
-          "flex items-center gap-ds-2 text-sm w-full",
-          "h-[var(--ds-control-height-md)]",
+          "flex items-center gap-ds-2 w-full",
+          CONTROL_HEIGHT3[size],
+          TEXT_SIZE3[size],
           "border-[length:var(--ds-border-width)]",
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
@@ -2154,6 +2218,16 @@ function SliderRange({
     )
   ] });
 }
+var CONTROL_HEIGHT4 = {
+  sm: "h-[var(--ds-control-height-sm)]",
+  md: "h-[var(--ds-control-height-md)]",
+  lg: "h-[var(--ds-control-height-lg)]"
+};
+var TEXT_SIZE4 = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
 function pad(n) {
   return n.toString().padStart(2, "0");
 }
@@ -2189,8 +2263,11 @@ function TimePicker({
   ref,
   container,
   error = false,
-  id
+  id,
+  size: sizeProp
 }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
@@ -2271,7 +2348,9 @@ function TimePicker({
         "aria-expanded": open,
         "aria-controls": open ? listboxId : void 0,
         className: cn(
-          "flex w-full items-center gap-ds-2 text-sm",
+          "flex w-full items-center gap-ds-2",
+          CONTROL_HEIGHT4[size],
+          TEXT_SIZE4[size],
           "border-[length:var(--ds-border-width)]",
           error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
@@ -2367,9 +2446,9 @@ function TimePicker({
   ] });
 }
 var sizes2 = {
-  sm: { input: "text-xs h-8", btn: "w-7 text-xs" },
-  md: { input: "text-sm h-10", btn: "w-9 text-sm" },
-  lg: { input: "text-base h-12", btn: "w-10 text-base" }
+  sm: { box: "h-[var(--ds-control-height-sm)]", input: "text-xs self-stretch", btn: "w-7 text-xs" },
+  md: { box: "h-[var(--ds-control-height-md)]", input: "text-sm self-stretch", btn: "w-9 text-sm" },
+  lg: { box: "h-[var(--ds-control-height-lg)]", input: "text-base self-stretch", btn: "w-10 text-base" }
 };
 function NumberInput({
   value,
@@ -2381,12 +2460,14 @@ function NumberInput({
   placeholder = "0",
   prefix,
   suffix,
-  size = "md",
+  size: sizeProp,
   className,
   error = false,
   allowDecimals,
   id
 }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const intervalRef = useRef(void 0);
   const timeoutRef = useRef(void 0);
   const inputRef = useRef(null);
@@ -2479,6 +2560,7 @@ function NumberInput({
     {
       className: cn(
         "flex items-center w-full",
+        s.box,
         "border-[length:var(--ds-border-width)]",
         error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
         "rounded-[var(--ds-radius-md)]",
@@ -2802,9 +2884,9 @@ function TagInput({
   );
 }
 var sizes3 = {
-  sm: "w-8 h-8 text-sm",
-  md: "w-10 h-10 text-base",
-  lg: "w-12 h-12 text-lg"
+  sm: "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] text-sm",
+  md: "w-[var(--ds-control-height-md)] h-[var(--ds-control-height-md)] text-base",
+  lg: "w-[var(--ds-control-height-lg)] h-[var(--ds-control-height-lg)] text-lg"
 };
 function PinInput({
   value,
@@ -2812,11 +2894,13 @@ function PinInput({
   length = 6,
   mask = false,
   disabled = false,
-  size = "md",
+  size: sizeProp,
   className,
   error = false,
   id
 }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const inputsRef = useRef([]);
   const digits = value.padEnd(length, " ").slice(0, length).split("");
   const focusAt = useCallback((idx) => {
@@ -3345,55 +3429,1220 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
   ] });
 }
-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 }) {
-  const [errors, setErrors] = useState({});
-  const [submitted, setSubmitted] = useState(false);
-  const errorsRef = useLatest(errors);
-  const pendingSubmit = useRef(false);
-  const onSubmitRef = useLatest(onSubmit);
-  useEffect(() => {
-    if (pendingSubmit.current && submitted) {
-      pendingSubmit.current = false;
-      onSubmitRef.current(errorsRef.current);
+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 CardCtx = createContext(false);
+var CardSurfaceCtx = createContext(false);
+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}`,
+    "[transition:var(--ds-transition-ambient)]",
+    "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
+  ].join(" "),
+  interactive: [
+    `bg-[var(--ds-bg-surface)] cursor-pointer ${GLASS_SURFACE}`,
+    "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+    "[transition:var(--ds-transition-interactive)]",
+    "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)] hover:bg-[var(--ds-bg-surface-elevated)]",
+    "hover:scale-[var(--_card-scale)] hover:-translate-y-[var(--ds-hover-lift)]"
+  ].join(" "),
+  outline: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] ${GLASS_SURFACE}`,
+  ghost: "bg-transparent border-none shadow-none"
+};
+var INTERACTIVE_SCALE_CAP = { "--_card-scale": "min(var(--ds-hover-scale), 1.04)" };
+function RadioIndicator({ checked, disabled }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center justify-center shrink-0 rounded-[var(--ds-radius-full)]",
+        "h-[18px] w-[18px]",
+        "border-[length:var(--ds-border-width)] bg-[var(--ds-input-bg)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        disabled && "opacity-disabled",
+        checked ? "border-[var(--ds-check-border)]" : "border-[var(--ds-input-border)]"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] transition-transform duration-[var(--ds-transition-speed)]",
+            checked ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] scale-100" : "scale-0"
+          )
+        }
+      )
     }
-  }, [submitted, errors, errorsRef, onSubmitRef]);
-  const setError = useCallback((field, message) => {
-    setErrors((prev) => ({ ...prev, [field]: message }));
-  }, []);
-  const clearErrors = useCallback(() => {
-    setErrors({});
-    setSubmitted(false);
-  }, []);
-  const handleSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-      pendingSubmit.current = true;
-      setSubmitted(true);
-    },
-    []
   );
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsx("form", { ref, onSubmit: handleSubmit, className, noValidate: true, children }) });
 }
-function TransferList({
-  available,
-  selected,
-  onChange,
-  availableTitle = "Available",
-  selectedTitle = "Selected",
-  searchable = true,
-  className,
-  ref
-}) {
-  const [checkedAvailable, setCheckedAvailable] = useState(/* @__PURE__ */ new Set());
-  const [checkedSelected, setCheckedSelected] = useState(/* @__PURE__ */ new Set());
-  const [searchLeft, setSearchLeft] = useState("");
-  const [searchRight, setSearchRight] = useState("");
+function CheckboxIndicator({ checked, indeterminate, disabled }) {
+  const filled = checked || indeterminate;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center justify-center shrink-0",
+        "h-[18px] w-[18px]",
+        "rounded-[calc(var(--ds-radius-sm)*0.6)]",
+        "border-[2px] transition-all duration-[var(--ds-transition-speed)]",
+        disabled && "opacity-disabled",
+        filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          className: cn(
+            "text-[var(--ds-check-fg)] transition-opacity",
+            filled ? "opacity-100" : "opacity-0"
+          ),
+          children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    }
+  );
+}
+function ToggleIndicator({ checked, disabled }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center overflow-hidden",
+        "border-[length:var(--ds-border-width)] rounded-[var(--ds-radius-full)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        disabled && "opacity-disabled",
+        checked ? "bg-[var(--ds-accent-primary)] border-transparent" : "bg-[var(--ds-bg-muted)] border-[var(--ds-border-default)]"
+      ),
+      style: { width: 44, height: 24 },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "pointer-events-none inline-block shrink-0 bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-full)] transition-transform",
+          style: {
+            width: 16,
+            height: 16,
+            transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
+          }
+        }
+      )
+    }
+  );
+}
+var Card = forwardRef(function Card2({
+  variant = "default",
+  loading = false,
+  selected,
+  selectable,
+  selectType,
+  onSelectedChange,
+  name,
+  indeterminate,
+  disabled = false,
+  checkable = false,
+  className,
+  children,
+  onClick,
+  style,
+  ...props
+}, ref) {
+  const isSelectable = selectable || !!selectType;
+  const isToggle = selectType === "toggle";
+  const hasSelectType = !!selectType;
+  const handleClick = isSelectable && !disabled ? (e) => {
+    onSelectedChange?.(!selected);
+    onClick?.(e);
+  } : onClick;
+  const handleKeyDown = isSelectable && !disabled ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelectedChange?.(!selected);
+    }
+  } : void 0;
+  const handleCheckableClick = (e) => {
+    e.stopPropagation();
+    onSelectedChange?.(!selected);
+  };
+  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable ? "button" : void 0;
+  const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
+  const showRing = isSelectable && !isToggle && !hasSelectType && selected;
+  const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
+  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-card": "",
+      role,
+      tabIndex: isSelectable ? 0 : void 0,
+      "aria-disabled": isSelectable && disabled ? true : void 0,
+      ...name && selectType === "radio" ? { "data-radio-group": name } : {},
+      style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
+      className: cn(
+        "rounded-[var(--ds-radius-md)] flex flex-col relative",
+        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)]",
+        (showRing || hasSelectType && selected) && ACTIVE_RING,
+        hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
+        disabled && "opacity-disabled cursor-not-allowed",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...ariaAttr,
+      ...props,
+      children: [
+        defaultCheckBadge,
+        indicator && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 z-[1]", children: indicator }),
+        checkable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-ds-3 left-ds-3 z-[1] cursor-pointer",
+            onClick: handleCheckableClick,
+            role: "checkbox",
+            "aria-checked": !!selected,
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onSelectedChange?.(!selected);
+              }
+            },
+            children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
+          }
+        ),
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
+        ] }) : children }) })
+      ]
+    }
+  );
+});
+var CardHeader = forwardRef(function CardHeader2({ className, children, actions, icon, menuItems, ...props }, ref) {
+  const isCheckable = useContext(CardCtx);
+  const hasActions = actions || menuItems;
+  const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
+  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0", children: [
+    actions,
+    menuItems && /* @__PURE__ */ jsx(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
+              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+              "transition-colors duration-[var(--ds-transition-speed)]"
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
+          }
+        ),
+        items: menuItems
+      }
+    )
+  ] }) : null;
+  const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
+  if (hasActions) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 min-w-0", children: [
+        iconBlock,
+        children
+      ] }),
+      actionsBlock
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col space-y-ds-1.5 pr-ds-5 pt-ds-4 last:pb-ds-4", pl, className), ...props, children: [
+    iconBlock,
+    children
+  ] });
+});
+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(lines > 0 ? node : null);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", lines > 0 && lineClampClass, className),
+      ...props,
+      children
+    }
+  );
+  if (!isTruncated || lines === 0) return heading;
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
+});
+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}]` : "";
+  const el = /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref: (node) => {
+        if (lines > 0) overflowRef(node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      className: cn("text-sm text-[var(--ds-text-muted)]", lines > 0 && lineClampClass, className),
+      ...props,
+      children
+    }
+  );
+  if (!isTruncated || lines === 0) return el;
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
+});
+var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
+  const isCheckable = useContext(CardCtx);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 pr-ds-5 py-ds-4", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
+});
+var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
+  const isCheckable = useContext(CardCtx);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center pr-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
+});
+function transitionMs(el) {
+  const cs = getComputedStyle(el);
+  const parse = (list) => list.split(",").map((raw) => {
+    const s = raw.trim();
+    if (!s) return 0;
+    const n = parseFloat(s);
+    if (Number.isNaN(n)) return 0;
+    return s.endsWith("ms") ? n : n * 1e3;
+  });
+  const durations = parse(cs.transitionDuration || "0s");
+  const delays = parse(cs.transitionDelay || "0s");
+  let max = 0;
+  durations.forEach((d, i) => {
+    const total = d + (delays[i] ?? delays[0] ?? 0);
+    if (total > max) max = total;
+  });
+  return max;
+}
+function useCloseSettle(open, elRef, onSettled) {
+  const cb = useLatest(onSettled);
+  useEffect(() => {
+    if (open) return;
+    const el = elRef.current;
+    const ms = el ? transitionMs(el) : 0;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      cb.current();
+    };
+    if (!el || ms === 0) {
+      const t2 = setTimeout(finish, 0);
+      return () => clearTimeout(t2);
+    }
+    const onEnd = (e) => {
+      if (e.target === el) finish();
+    };
+    el.addEventListener("transitionend", onEnd);
+    const t = setTimeout(finish, ms + 50);
+    return () => {
+      el.removeEventListener("transitionend", onEnd);
+      clearTimeout(t);
+    };
+  }, [open, elRef, cb]);
+}
+var STEP = 16;
+var BIG_STEP = 64;
+function clamp(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function ResizeEdge({ edge, width, min, max, defaultWidth, onResize, label, onDraggingChange, className }) {
+  const [dragging, setDragging] = useState(false);
+  const start = useRef(null);
+  const latestOnResize = useLatest(onResize);
+  const direction = edge === "left" ? -1 : 1;
+  const onPointerDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      start.current = { x: e.clientX, width };
+      setDragging(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [width]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!start.current) return;
+      const next = clamp(start.current.width + direction * (e.clientX - start.current.x), min, max());
+      latestOnResize.current(next);
+    },
+    [direction, min, max, latestOnResize]
+  );
+  const endDrag = useCallback(() => {
+    start.current = null;
+    setDragging(false);
+  }, []);
+  const latestOnDraggingChange = useLatest(onDraggingChange);
+  useEffect(() => {
+    latestOnDraggingChange.current?.(dragging);
+  }, [dragging, latestOnDraggingChange]);
+  useEffect(() => {
+    if (!dragging) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || !start.current) return;
+      latestOnResize.current(start.current.width);
+      endDrag();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [dragging, endDrag, latestOnResize]);
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? BIG_STEP : STEP;
+    let next = null;
+    if (e.key === "ArrowLeft") next = width - direction * step;
+    else if (e.key === "ArrowRight") next = width + direction * step;
+    else if (e.key === "Home") next = min;
+    else if (e.key === "End") next = max();
+    else if (e.key === "Enter") next = defaultWidth;
+    if (next === null) return;
+    e.preventDefault();
+    onResize(clamp(next, min, max()));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      tabIndex: 0,
+      "aria-orientation": "vertical",
+      "aria-label": label,
+      "aria-valuemin": min,
+      "aria-valuemax": max(),
+      "aria-valuenow": Math.round(width),
+      "data-resize-edge": edge,
+      "data-dragging": dragging || void 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onDoubleClick: () => onResize(clamp(defaultWidth, min, max())),
+      onKeyDown,
+      className: cn(
+        // A narrow absolutely-positioned strip over the edge — never a flex child that takes width.
+        "group/edge absolute top-0 bottom-0 z-10 w-ds-2 cursor-col-resize touch-none select-none outline-none",
+        edge === "left" ? "-left-ds-1" : "-right-ds-1",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "absolute top-0 bottom-0 left-1/2 w-px -translate-x-1/2 transition-[width,background-color] duration-[var(--ds-transition-speed)]",
+            "group-hover/edge:w-[3px] group-hover/edge:bg-[var(--ds-accent-primary)]",
+            "group-focus-visible/edge:w-[3px] group-focus-visible/edge:bg-[var(--ds-accent-primary)]",
+            dragging && "w-[3px] bg-[var(--ds-accent-primary)]"
+          )
+        }
+      )
+    }
+  );
+}
+var remembered = /* @__PURE__ */ new Map();
+function useRememberedWidth(key) {
+  const [width, setWidth] = useState(() => key ? remembered.get(key) ?? null : null);
+  const remember = useCallback(
+    (w) => {
+      setWidth(w);
+      if (!key) return;
+      if (w === null) remembered.delete(key);
+      else remembered.set(key, w);
+    },
+    [key]
+  );
+  return [width, remember];
+}
+function pxOf(length) {
+  if (!length) return null;
+  const m = /^(\d+(?:\.\d+)?)px$/.exec(length.trim());
+  return m ? parseFloat(m[1]) : null;
+}
+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" })
+        ] })
+      ]
+    }
+  );
+}
+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);
+  const [hidden, setHidden] = useState(!open);
+  const [snapIdx, setSnapIdx] = useState(0);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const dragStartY = useRef(0);
+  const startHeight = useRef(0);
+  const onCloseRef = useLatest(onClose);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setMounted(true);
+      setHidden(false);
+      setSnapIdx(0);
+      setDragOffset(0);
+    }
+  }
+  const viewportHeight = useCallback(
+    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
+    [container]
+  );
+  useCloseSettle(open, panelRef, () => {
+    if (keepMounted) setHidden(true);
+    else setMounted(false);
+  });
+  useReturnFocus(open);
+  useEffect(() => {
+    if (!open || !mounted) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted]);
+  const isTopLayer = useOverlayLayer(open);
+  useFocusTrap(panelRef, open, isTopLayer);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    if (!container) lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (!container) unlockBodyScroll();
+    };
+  }, [open, container, onCloseRef, isTopLayer]);
+  const handlePointerDown = useCallback((e) => {
+    setDragging(true);
+    dragStartY.current = e.clientY;
+    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * viewportHeight();
+    setDragOffset(0);
+    e.target.setPointerCapture(e.pointerId);
+  }, [snapIdx, snapPoints, viewportHeight]);
+  const handlePointerMove = useCallback((e) => {
+    if (!dragging) return;
+    const delta = dragStartY.current - e.clientY;
+    setDragOffset(delta);
+  }, [dragging]);
+  const handlePointerUp = useCallback(() => {
+    if (!dragging) return;
+    setDragging(false);
+    const currentHeightPx = startHeight.current + dragOffset;
+    const currentFraction = currentHeightPx / viewportHeight();
+    if (currentFraction < snapPoints[0] * 0.6) {
+      onClose();
+      setDragOffset(0);
+      return;
+    }
+    let bestIdx = 0;
+    let bestDist = Math.abs(currentFraction - snapPoints[0]);
+    for (let i = 1; i < snapPoints.length; i++) {
+      const dist = Math.abs(currentFraction - snapPoints[i]);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestIdx = i;
+      }
+    }
+    setSnapIdx(bestIdx);
+    setDragOffset(0);
+  }, [dragging, dragOffset, snapPoints, onClose, viewportHeight]);
+  if (!mounted) return null;
+  const baseHeight = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
+  const heightUnit = container ? "%" : "vh";
+  const dragPx = dragging ? dragOffset : 0;
+  const positionClass = container ? "absolute" : "fixed";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        hidden: keepMounted && hidden ? true : void 0,
+        className: cn(
+          `${positionClass} inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]`,
+          open ? "pointer-events-auto" : "pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 bg-black/50 transition-opacity duration-[var(--ds-transition-speed)]",
+                open ? "opacity-100" : "opacity-0"
+              ),
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              id,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : labelledBy,
+              "data-ds-sheet": "",
+              className: cn(
+                `${positionClass} bottom-0 left-0 right-0 z-10 flex flex-col`,
+                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                GLASS_OVERLAY,
+                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                "rounded-t-[var(--ds-radius-xl)]",
+                !dragging && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+                open ? "translate-y-0" : "translate-y-full"
+              ),
+              style: {
+                containerType: "inline-size",
+                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
+                    onPointerDown: handlePointerDown,
+                    onPointerMove: handlePointerMove,
+                    onPointerUp: handlePointerUp,
+                    onPointerCancel: handlePointerUp,
+                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
+                  }
+                ),
+                title && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto",
+                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
+                    children
+                  }
+                ),
+                confirm,
+                footer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
+var DrawerFooterCtx = createContext(null);
+var slideClasses = {
+  right: {
+    panel: "top-0 right-0 h-full",
+    open: "translate-x-0",
+    closed: "translate-x-full"
+  },
+  left: {
+    panel: "top-0 left-0 h-full",
+    open: "translate-x-0",
+    closed: "-translate-x-full"
+  },
+  bottom: {
+    panel: "bottom-0 left-0 right-0",
+    open: "translate-y-0",
+    closed: "translate-y-full"
+  }
+};
+var borderByPosition = {
+  right: "border-l-[length:var(--ds-border-width)] border-l-[var(--ds-border-default)]",
+  left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
+  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, 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 });
+  const [actionsMap, setActionsMap] = useState(/* @__PURE__ */ new Map());
+  const registerActions = useCallback((formId, acts) => {
+    setActionsMap((prev) => new Map(prev).set(formId, acts));
+  }, []);
+  const unregisterActions = useCallback((formId) => {
+    setActionsMap((prev) => {
+      const next = new Map(prev);
+      next.delete(formId);
+      return next;
+    });
+  }, []);
+  const registeredActions = actionsMap.size > 0 ? /* @__PURE__ */ jsx(Fragment, { children: Array.from(actionsMap.values()) }) : null;
+  const effectiveFooter = footer ?? registeredActions;
+  const footerCtx = useMemo(
+    () => ({ registerActions, unregisterActions }),
+    [registerActions, unregisterActions]
+  );
+  if (isPhone && mobileMode === "sheet") {
+    return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(Sheet, { open, onClose: guard.requestClose, title, footer: effectiveFooter, confirm, container, flush, snapPoints, keepMounted, id, labelledBy, children }) });
+  }
+  return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(DrawerPanel, { ...props, footer: effectiveFooter, 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, confirm }) {
+  const nonModal = !modal;
+  const [chosen, remember] = useRememberedWidth(id ?? labelledBy);
+  const canResize = nonModal && resizable && position !== "bottom";
+  const effectiveWidth = canResize && chosen !== null ? `${chosen}px` : width;
+  const minPx = pxOf(width) ?? 320;
+  const maxPx = () => pxOf(maxWidth) ?? defaultMaxWidth(container instanceof Element ? container : null);
+  const titleId = useId();
+  const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
+  const isMobile = useBreakpoint("sm");
+  const panelRef = useRef(null);
+  const [mounted, setMounted] = useState(open);
+  const [hidden, setHidden] = useState(!open);
+  const onCloseRef = useLatest(onClose);
+  if (open && !mounted) setMounted(true);
+  if (open && hidden) setHidden(false);
+  const isTopLayer = useOverlayLayer(open);
+  useEffect(() => {
+    if (!open || nonModal) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    if (!container) lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (!container) unlockBodyScroll();
+    };
+  }, [open, nonModal, container, onCloseRef, isTopLayer]);
+  useReturnFocus(open && !nonModal);
+  useFocusTrap(panelRef, open && !topOffset && !nonModal, isTopLayer);
+  useEffect(() => {
+    if (!open || !mounted || nonModal) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted, nonModal]);
+  useNonModalDialog(panelRef, open && mounted && nonModal, onClose, isTopLayer);
+  useCloseSettle(open, panelRef, () => {
+    if (keepMounted) setHidden(true);
+    else setMounted(false);
+  });
+  if (!mounted) return null;
+  const slide = slideClasses[position];
+  const isHorizontal = position === "left" || position === "right";
+  const positionClass = container ? "absolute" : "fixed";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        hidden: keepMounted && hidden ? true : void 0,
+        className: cn(
+          `${positionClass} transition-opacity duration-[var(--ds-transition-speed)]`,
+          // A non-modal panel never intercepts the page: the wrapper is inert to the
+          // pointer and only the panel itself accepts events.
+          nonModal ? "z-[var(--ds-z-overlay)] pointer-events-none" : cn("z-[var(--ds-z-modal)]", open ? "pointer-events-auto" : "pointer-events-none"),
+          topOffset ? "left-0 right-0 bottom-0" : "inset-0"
+        ),
+        style: topOffset ? { top: topOffset } : void 0,
+        children: [
+          !nonModal && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 transition-opacity duration-[var(--ds-transition-speed)]",
+                lightBackdrop ? "bg-black/15" : cn("bg-black/50", "[backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]"),
+                open ? "opacity-100" : "opacity-0"
+              ),
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              id,
+              role: "dialog",
+              "aria-modal": nonModal ? void 0 : "true",
+              "aria-labelledby": title ? titleId : labelledBy,
+              style: {
+                containerType: "inline-size",
+                width: isHorizontal ? effectiveWidth : void 0,
+                maxWidth: isHorizontal ? "100%" : void 0,
+                height: isMobile ? "100%" : void 0,
+                maxHeight: !isMobile && !isHorizontal ? "80vh" : void 0
+              },
+              className: cn(
+                `${positionClass} z-10 flex flex-col`,
+                nonModal && "pointer-events-auto",
+                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                GLASS_OVERLAY,
+                // flush drops the edge border for children that draw their own (the mobile
+                // menu's Sidebar); a non-modal panel has no backdrop to separate it from
+                // the page, so it always keeps the border.
+                (!flush || nonModal) && borderByPosition[position],
+                "transition-transform duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+                isHorizontal && position === "left" && "rounded-r-[var(--ds-radius-lg)] overflow-hidden",
+                isHorizontal && position === "right" && "rounded-l-[var(--ds-radius-lg)] overflow-hidden",
+                !isHorizontal && "rounded-t-[var(--ds-radius-lg)] overflow-hidden",
+                (lightBackdrop || nonModal) && "shadow-[var(--ds-shadow-overlay)]",
+                slide.panel,
+                open ? slide.open : slide.closed
+              ),
+              children: [
+                canResize && open && /* @__PURE__ */ jsx(
+                  ResizeEdge,
+                  {
+                    edge: position === "right" ? "left" : "right",
+                    width: chosen ?? minPx,
+                    min: minPx,
+                    max: maxPx,
+                    defaultWidth: minPx,
+                    onResize: (w) => remember(w === minPx ? null : w),
+                    label: "Resize panel"
+                  }
+                ),
+                title && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: {
+                      padding: "var(--ds-space-3) var(--ds-space-6)",
+                      minHeight: "calc(var(--ds-space-unit) * 6 + 1.75rem + 2px + var(--ds-border-width))"
+                    },
+                    children: [
+                      titleTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto",
+                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
+                    children
+                  }
+                ),
+                confirm,
+                footer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
+function stampFormId(node, formId) {
+  return Children.map(node, (child) => {
+    if (!isValidElement(child)) return child;
+    if (child.type === Fragment$1) return stampFormId(child.props.children, formId);
+    return cloneElement(child, { form: formId });
+  });
+}
+var FormCtx = createContext(null);
+function useFormContext() {
+  const ctx = useContext(FormCtx);
+  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
+  return ctx;
+}
+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 inCard = useContext(CardSurfaceCtx);
+  const drawerFooter = useContext(DrawerFooterCtx);
+  const formId = useId();
+  useEffect(() => {
+    if (!drawerFooter || !actions) return;
+    drawerFooter.registerActions(formId, stampFormId(actions, formId));
+    return () => drawerFooter.unregisterActions(formId);
+  }, [drawerFooter, actions, formId]);
+  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, 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]
+  );
+  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;
+  let actionsNode = null;
+  if (actions && !drawerFooter) {
+    if (inCard) {
+      actionsNode = /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-form-actions": "",
+          "data-form-actions-surface": "card",
+          className: cn(
+            "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+            "flex flex-wrap items-center gap-ds-2 pt-ds-4 mt-ds-6",
+            actionsAlign === "end" ? "justify-end" : "justify-start"
+          ),
+          children: actions
+        }
+      );
+    } else {
+      actionsNode = /* @__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 });
+    }
+  }
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className, noValidate: true, children: [
+    summaryNode && /* @__PURE__ */ jsx("div", { "data-form-error-summary": "", children: summaryNode }),
+    children,
+    actionsNode
+  ] }) });
+}
+function TransferList({
+  available,
+  selected,
+  onChange,
+  availableTitle = "Available",
+  selectedTitle = "Selected",
+  searchable = true,
+  className,
+  ref
+}) {
+  const [checkedAvailable, setCheckedAvailable] = useState(/* @__PURE__ */ new Set());
+  const [checkedSelected, setCheckedSelected] = useState(/* @__PURE__ */ new Set());
+  const [searchLeft, setSearchLeft] = useState("");
+  const [searchRight, setSearchRight] = useState("");
   const filteredAvailable = useMemo(
     () => searchLeft ? available.filter((i) => i.label.toLowerCase().includes(searchLeft.toLowerCase())) : available,
     [available, searchLeft]
@@ -3853,397 +5102,110 @@ function MentionInput({
       setActiveIndex((i) => (i - 1 + filtered.length) % filtered.length);
     } else if (e.key === "Enter" || e.key === "Tab") {
       e.preventDefault();
-      insertMention(filtered[activeIndex]);
-    } else if (e.key === "Escape") {
-      setShowPopup(false);
-    }
-  };
-  useEffect(() => {
-    if (!showPopup) return;
-    const handler = (e) => {
-      if (popupRef.current && !popupRef.current.contains(e.target) && inputRef.current && !inputRef.current.contains(e.target)) {
-        setShowPopup(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [showPopup]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: inputRef,
-        value,
-        onChange: handleInput,
-        onKeyDown: handleKeyDown,
-        placeholder,
-        disabled,
-        rows: 3,
-        className: cn(
-          "flex w-full px-ds-3 py-ds-2 text-sm resize-none",
-          "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-input-shadow)]",
-          "placeholder:text-[var(--ds-text-muted)]",
-          "hover:border-[var(--ds-input-border-hover)]",
-          FOCUS_RING,
-          "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
-          "transition-colors duration-[var(--ds-transition-speed)]"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: mirrorRef,
-        "aria-hidden": true,
-        className: "fixed top-0 left-0 -z-50 opacity-0 pointer-events-none"
-      }
-    ),
-    showPopup && filtered.length > 0 && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: popupRef,
-          role: "listbox",
-          className: cn(
-            "fixed z-[var(--ds-z-popover)] min-w-[200px] max-h-[200px] overflow-y-auto",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
-            "py-ds-1"
-          ),
-          style: { top: popupPos.top, left: popupPos.left },
-          children: filtered.map((s, i) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": i === activeIndex,
-              className: cn(
-                "flex items-center gap-ds-2.5 w-full px-ds-3 py-ds-1.5 text-left text-sm cursor-pointer",
-                "transition-colors duration-[var(--ds-transition-speed)]",
-                i === activeIndex ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
-              ),
-              onMouseDown: (e) => {
-                e.preventDefault();
-                insertMention(s);
-              },
-              onMouseEnter: () => setActiveIndex(i),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Avatar,
-                  {
-                    src: s.avatar,
-                    initials: s.label.charAt(0).toUpperCase(),
-                    alt: s.label,
-                    size: "sm",
-                    className: "!h-6 !w-6 !text-2xs"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--ds-text-primary)] truncate", children: s.label }),
-                  s.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] truncate", children: s.description })
-                ] })
-              ]
-            },
-            s.id
-          ))
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-var CardCtx = createContext(false);
-var variantStyles3 = {
-  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}`,
-    "[transition:var(--ds-transition-ambient)]",
-    "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
-  ].join(" "),
-  interactive: [
-    `bg-[var(--ds-bg-surface)] cursor-pointer ${GLASS_SURFACE}`,
-    "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-    "[transition:var(--ds-transition-interactive)]",
-    "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)] hover:bg-[var(--ds-bg-surface-elevated)]",
-    "hover:scale-[var(--_card-scale)] hover:-translate-y-[var(--ds-hover-lift)]"
-  ].join(" "),
-  outline: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] ${GLASS_SURFACE}`,
-  ghost: "bg-transparent border-none shadow-none"
-};
-var INTERACTIVE_SCALE_CAP = { "--_card-scale": "min(var(--ds-hover-scale), 1.04)" };
-function RadioIndicator({ checked, disabled }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "flex items-center justify-center shrink-0 rounded-[var(--ds-radius-full)]",
-        "h-[18px] w-[18px]",
-        "border-[length:var(--ds-border-width)] bg-[var(--ds-input-bg)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        disabled && "opacity-disabled",
-        checked ? "border-[var(--ds-check-border)]" : "border-[var(--ds-input-border)]"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] transition-transform duration-[var(--ds-transition-speed)]",
-            checked ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] scale-100" : "scale-0"
-          )
-        }
-      )
-    }
-  );
-}
-function CheckboxIndicator({ checked, indeterminate, disabled }) {
-  const filled = checked || indeterminate;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "flex items-center justify-center shrink-0",
-        "h-[18px] w-[18px]",
-        "rounded-[calc(var(--ds-radius-sm)*0.6)]",
-        "border-[2px] transition-all duration-[var(--ds-transition-speed)]",
-        disabled && "opacity-disabled",
-        filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: "12",
-          height: "12",
-          viewBox: "0 0 12 12",
-          fill: "none",
-          className: cn(
-            "text-[var(--ds-check-fg)] transition-opacity",
-            filled ? "opacity-100" : "opacity-0"
-          ),
-          children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
-        }
-      )
-    }
-  );
-}
-function ToggleIndicator({ checked, disabled }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "relative inline-flex shrink-0 items-center overflow-hidden",
-        "border-[length:var(--ds-border-width)] rounded-[var(--ds-radius-full)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        disabled && "opacity-disabled",
-        checked ? "bg-[var(--ds-accent-primary)] border-transparent" : "bg-[var(--ds-bg-muted)] border-[var(--ds-border-default)]"
-      ),
-      style: { width: 44, height: 24 },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "pointer-events-none inline-block shrink-0 bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-full)] transition-transform",
-          style: {
-            width: 16,
-            height: 16,
-            transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
-          }
-        }
-      )
-    }
-  );
-}
-var Card = forwardRef(function Card2({
-  variant = "default",
-  loading = false,
-  selected,
-  selectable,
-  selectType,
-  onSelectedChange,
-  name,
-  indeterminate,
-  disabled = false,
-  checkable = false,
-  className,
-  children,
-  onClick,
-  style,
-  ...props
-}, ref) {
-  const isSelectable = selectable || !!selectType;
-  const isToggle = selectType === "toggle";
-  const hasSelectType = !!selectType;
-  const handleClick = isSelectable && !disabled ? (e) => {
-    onSelectedChange?.(!selected);
-    onClick?.(e);
-  } : onClick;
-  const handleKeyDown = isSelectable && !disabled ? (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onSelectedChange?.(!selected);
+      insertMention(filtered[activeIndex]);
+    } else if (e.key === "Escape") {
+      setShowPopup(false);
     }
-  } : void 0;
-  const handleCheckableClick = (e) => {
-    e.stopPropagation();
-    onSelectedChange?.(!selected);
   };
-  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable ? "button" : void 0;
-  const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
-  const showRing = isSelectable && !isToggle && !hasSelectType && selected;
-  const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
-  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-card": "",
-      role,
-      tabIndex: isSelectable ? 0 : void 0,
-      "aria-disabled": isSelectable && disabled ? true : void 0,
-      ...name && selectType === "radio" ? { "data-radio-group": name } : {},
-      style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
-      className: cn(
-        "rounded-[var(--ds-radius-md)] flex flex-col relative",
-        variantStyles3[variant],
-        isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-        isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
-        isSelectable && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        (showRing || hasSelectType && selected) && ACTIVE_RING,
-        hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
-        disabled && "opacity-disabled cursor-not-allowed",
-        className
-      ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      ...ariaAttr,
-      ...props,
-      children: [
-        defaultCheckBadge,
-        indicator && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 z-[1]", children: indicator }),
-        checkable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute top-ds-3 left-ds-3 z-[1] cursor-pointer",
-            onClick: handleCheckableClick,
-            role: "checkbox",
-            "aria-checked": !!selected,
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                onSelectedChange?.(!selected);
-              }
-            },
-            children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
-          }
-        ),
-        /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-4 w-1/3" }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
-        ] }) : children })
-      ]
-    }
-  );
-});
-var CardHeader = forwardRef(function CardHeader2({ className, children, actions, icon, menuItems, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  const hasActions = actions || menuItems;
-  const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0", children: [
-    actions,
-    menuItems && /* @__PURE__ */ jsx(
-      DropdownMenu,
+  useEffect(() => {
+    if (!showPopup) return;
+    const handler = (e) => {
+      if (popupRef.current && !popupRef.current.contains(e.target) && inputRef.current && !inputRef.current.contains(e.target)) {
+        setShowPopup(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showPopup]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
       {
-        trigger: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors duration-[var(--ds-transition-speed)]"
-            ),
-            onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
-          }
-        ),
-        items: menuItems
+        ref: inputRef,
+        value,
+        onChange: handleInput,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled,
+        rows: 3,
+        className: cn(
+          "flex w-full px-ds-3 py-ds-2 text-sm resize-none",
+          "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-input-shadow)]",
+          "placeholder:text-[var(--ds-text-muted)]",
+          "hover:border-[var(--ds-input-border-hover)]",
+          FOCUS_RING,
+          "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
+          "transition-colors duration-[var(--ds-transition-speed)]"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mirrorRef,
+        "aria-hidden": true,
+        className: "fixed top-0 left-0 -z-50 opacity-0 pointer-events-none"
       }
+    ),
+    showPopup && filtered.length > 0 && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popupRef,
+          role: "listbox",
+          className: cn(
+            "fixed z-[var(--ds-z-popover)] min-w-[200px] max-h-[200px] overflow-y-auto",
+            "bg-[var(--ds-bg-surface-elevated)]",
+            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+            "rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
+            "py-ds-1"
+          ),
+          style: { top: popupPos.top, left: popupPos.left },
+          children: filtered.map((s, i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": i === activeIndex,
+              className: cn(
+                "flex items-center gap-ds-2.5 w-full px-ds-3 py-ds-1.5 text-left text-sm cursor-pointer",
+                "transition-colors duration-[var(--ds-transition-speed)]",
+                i === activeIndex ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
+              ),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                insertMention(s);
+              },
+              onMouseEnter: () => setActiveIndex(i),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    src: s.avatar,
+                    initials: s.label.charAt(0).toUpperCase(),
+                    alt: s.label,
+                    size: "sm",
+                    className: "!h-6 !w-6 !text-2xs"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--ds-text-primary)] truncate", children: s.label }),
+                  s.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] truncate", children: s.description })
+                ] })
+              ]
+            },
+            s.id
+          ))
+        }
+      ),
+      document.body
     )
-  ] }) : null;
-  const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
-  if (hasActions) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 min-w-0", children: [
-        iconBlock,
-        children
-      ] }),
-      actionsBlock
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col space-y-ds-1.5 pr-ds-5 pt-ds-4 last:pb-ds-4", pl, className), ...props, children: [
-    iconBlock,
-    children
   ] });
-});
-var CardTitle = forwardRef(function CardTitle2({ className, children, ...props }, forwardedRef) {
-  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1 });
-  const heading = /* @__PURE__ */ jsx(
-    "h3",
-    {
-      ref: (node) => {
-        overflowRef(node);
-        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),
-      ...props,
-      children
-    }
-  );
-  if (!isTruncated) 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}]` : "";
-  const el = /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref: (node) => {
-        if (lines > 0) overflowRef(node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      className: cn("text-sm text-[var(--ds-text-muted)]", lines > 0 && lineClampClass, className),
-      ...props,
-      children
-    }
-  );
-  if (!isTruncated || lines === 0) return el;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
-});
-var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 pr-ds-5 py-ds-4", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
-});
-var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center pr-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
-});
+}
 function TruncLabel({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", children });
@@ -4305,10 +5267,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 +5280,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 +5345,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 +5359,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 +5401,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
       ),
@@ -4643,6 +5608,12 @@ function Table({
       return next;
     });
   };
+  const columnKeys = useMemo(() => columns.map((c) => c.key), [columns]);
+  const inferredKinds = useMemo(() => inferColumnKinds(data, columnKeys), [data, columnKeys]);
+  const kindOf = useCallback(
+    (col) => col.kind ?? inferredKinds.get(col.key),
+    [inferredKinds]
+  );
   const isMobile = useBreakpoint(mobileBreakpoint);
   if (isMobile) {
     if (loading) {
@@ -4675,8 +5646,8 @@ function Table({
           children: [
             selectable && /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), label: "Select" }),
             columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
-              /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-primary)] text-right", children: row[col.key] })
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 text-[var(--ds-text-primary)] text-right [overflow-wrap:anywhere]", children: row[col.key] })
             ] }, col.key)),
             expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, i) })
           ]
@@ -4711,6 +5682,7 @@ function Table({
           columns.map((col) => {
             const isSortable = sortable || col.sortable;
             const isActiveSort = sortKey === col.key;
+            const headerAlign = col.align ?? (kindOf(col) === "number" ? "right" : "left");
             return /* @__PURE__ */ jsx(
               "th",
               {
@@ -4718,7 +5690,7 @@ function Table({
                   density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
                   "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
                   "text-xs uppercase tracking-wider",
-                  col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left",
+                  headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
                   isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
                 ),
                 style: col.maxWidth ? { maxWidth: col.maxWidth } : void 0,
@@ -4799,16 +5771,29 @@ function Table({
                   ) }),
                   columns.map((col) => {
                     const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
+                    const kind = kindOf(col);
+                    const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
+                    const cellContent = row[col.key];
+                    let inner;
+                    if (truncLines > 0) {
+                      inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
+                    } else if (kind === "email") {
+                      inner = /* @__PURE__ */ jsx("span", { className: "max-w-[200px] truncate inline-block", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
+                    } else if (kind === "date" || kind === "number") {
+                      inner = /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: cellContent });
+                    } else {
+                      inner = cellContent;
+                    }
                     return /* @__PURE__ */ jsx(
                       "td",
                       {
                         className: cn(
                           density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
                           "text-[var(--ds-text-primary)]",
-                          col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"
+                          alignClass
                         ),
                         style: col.maxWidth ? { maxWidth: col.maxWidth } : void 0,
-                        children: truncLines > 0 ? /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: row[col.key] }) : row[col.key]
+                        children: inner
                       },
                       col.key
                     );
@@ -4831,10 +5816,10 @@ function Table({
   );
 }
 var sizes4 = {
-  xs: "text-xs h-5 px-ds-2",
-  sm: "text-xs h-7 px-ds-3",
-  md: "text-sm h-9 px-ds-3",
-  lg: "text-base h-11 px-ds-3"
+  xs: "text-xs px-ds-2",
+  sm: "text-xs px-ds-3",
+  md: "text-sm px-ds-3",
+  lg: "text-base px-ds-3"
 };
 var containerPadding = {
   xs: "p-[2px] gap-[2px]",
@@ -4843,22 +5828,26 @@ var containerPadding = {
   lg: "p-ds-1 gap-ds-0.5"
 };
 var indicatorInset = {
-  xs: { top: "2px", height: "calc(100% - 4px)" },
-  sm: { top: "4px", height: "calc(100% - 8px)" },
-  md: { top: "4px", height: "calc(100% - 8px)" },
-  lg: { top: "4px", height: "calc(100% - 8px)" }
+  xs: "2px",
+  sm: "4px",
+  md: "4px",
+  lg: "4px"
 };
 function SegmentedControl({
   value,
   onChange,
   options,
-  size = "md",
+  size: sizeProp,
   variant = "default",
   fullWidth = false,
   onHoverChange,
   className,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  maxOptions = 6
 }) {
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
+  const collapsed = options.length > maxOptions;
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
   const updateIndicator = useCallback(() => {
@@ -4876,12 +5865,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 +5895,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",
     {
@@ -4936,8 +5938,8 @@ function SegmentedControl({
             style: {
               left: indicator.left,
               width: indicator.width,
-              top: indicatorInset[size].top,
-              height: indicatorInset[size].height,
+              top: indicatorInset[size],
+              bottom: indicatorInset[size],
               transitionDuration: "var(--ds-transition-speed)",
               transitionTimingFunction: "var(--ds-transition-ease)"
             }
@@ -4957,7 +5959,7 @@ function SegmentedControl({
             onMouseEnter: onHoverChange && !opt.disabled ? () => onHoverChange(opt.value) : void 0,
             onMouseLeave: onHoverChange ? () => onHoverChange(null) : void 0,
             className: cn(
-              "relative z-10 inline-flex items-center justify-center font-medium whitespace-nowrap",
+              "relative z-10 inline-flex items-center justify-center self-stretch font-medium whitespace-nowrap",
               fullWidth && "flex-1",
               "rounded-[var(--ds-radius-md)]",
               "transition-colors cursor-pointer",
@@ -6535,13 +7537,40 @@ 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 })
       ]
     }
   );
 }
+function EntityCell({ avatar, primary, secondary, size = "md", className }) {
+  const isPhone = useBreakpoint("sm");
+  const avatarElement = typeof avatar === "string" ? /* @__PURE__ */ jsx(Avatar, { src: avatar, alt: primary, size }) : avatar;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-ds-2",
+        isPhone ? "flex-col items-center text-center" : "flex-row items-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatarElement }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: cn(
+            "font-medium text-[var(--ds-text-primary)] truncate",
+            size === "sm" ? "text-xs" : "text-sm"
+          ), children: primary }),
+          secondary && /* @__PURE__ */ jsx("p", { className: cn(
+            "text-[var(--ds-text-secondary)] truncate",
+            size === "sm" ? "text-xs" : "text-sm"
+          ), children: secondary })
+        ] })
+      ]
+    }
+  );
+}
 function SkipLink({ href = "#main", children = "Skip to content", className }) {
   return /* @__PURE__ */ jsx(
     "a",
@@ -6559,11 +7588,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 +7605,7 @@ function useCompact(ref, breakpoint) {
     observer.observe(ref.current);
     return () => observer.disconnect();
   }, [check, ref]);
-  return compact;
+  return width;
 }
 function TableToolbar({
   search,
@@ -6601,7 +7635,7 @@ function TableToolbar({
   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: [
+  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children: /* @__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,
@@ -6664,7 +7698,7 @@ function TableToolbar({
       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",
@@ -6699,11 +7733,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 +7796,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 +8316,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" });
 }
@@ -7782,95 +8675,50 @@ function ChatPanel({
   return /* @__PURE__ */ jsxs("div", { id: panelId, "data-chat-panel": "", className: cn("flex h-full min-h-0 flex-col bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]", className), children: [
     /* @__PURE__ */ jsxs(
       "header",
-      {
-        className: "flex shrink-0 items-center gap-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-        style: { padding: "var(--ds-space-3) var(--ds-space-4)" },
-        children: [
-          typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-ds-8 w-ds-8 shrink-0 items-center justify-center rounded-[var(--ds-radius-md)] bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)]", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 18 }) }) : (
-            // An element (an Avatar, a logo) brings its own shape — no tinted box around it.
-            /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon })
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-ds-2", children: [
-              isTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: heading }) : heading,
-              status && /* @__PURE__ */ jsx(StatusDot, { variant: STATUS_VARIANT[status.tone ?? "success"], label: status.label })
-            ] }),
-            description && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--ds-text-muted)]", children: description })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-ds-1", children: [
-            actions,
-            onNewConversation && /* @__PURE__ */ jsx(Tooltip, { content: "New conversation", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "New conversation", onClick: onNewConversation, children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) }) }),
-            onExpandedChange && /* @__PURE__ */ jsx(Tooltip, { content: expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-sm",
-                "aria-label": expanded ? "Collapse" : "Expand",
-                "aria-pressed": expanded,
-                onClick: () => onExpandedChange(!expanded),
-                children: /* @__PURE__ */ jsx(Icon, { name: expanded ? "minimize-2" : "maximize-2", size: 16 })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Tooltip, { content: "Close", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: onClose, ...{ [OVERLAY_CLOSE_ATTR]: "" }, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) }) })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children }),
-    footer && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "shrink-0 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)] text-center text-2xs text-[var(--ds-text-muted)]",
-        style: { padding: "var(--ds-space-2) var(--ds-space-4)" },
-        children: footer
-      }
-    )
-  ] });
-}
-function transitionMs(el) {
-  const cs = getComputedStyle(el);
-  const parse = (list) => list.split(",").map((raw) => {
-    const s = raw.trim();
-    if (!s) return 0;
-    const n = parseFloat(s);
-    if (Number.isNaN(n)) return 0;
-    return s.endsWith("ms") ? n : n * 1e3;
-  });
-  const durations = parse(cs.transitionDuration || "0s");
-  const delays = parse(cs.transitionDelay || "0s");
-  let max = 0;
-  durations.forEach((d, i) => {
-    const total = d + (delays[i] ?? delays[0] ?? 0);
-    if (total > max) max = total;
-  });
-  return max;
-}
-function useCloseSettle(open, elRef, onSettled) {
-  const cb = useLatest(onSettled);
-  useEffect(() => {
-    if (open) return;
-    const el = elRef.current;
-    const ms = el ? transitionMs(el) : 0;
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      cb.current();
-    };
-    if (!el || ms === 0) {
-      const t2 = setTimeout(finish, 0);
-      return () => clearTimeout(t2);
-    }
-    const onEnd = (e) => {
-      if (e.target === el) finish();
-    };
-    el.addEventListener("transitionend", onEnd);
-    const t = setTimeout(finish, ms + 50);
-    return () => {
-      el.removeEventListener("transitionend", onEnd);
-      clearTimeout(t);
-    };
-  }, [open, elRef, cb]);
+      {
+        className: "flex shrink-0 items-center gap-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        style: { padding: "var(--ds-space-3) var(--ds-space-4)" },
+        children: [
+          typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-ds-8 w-ds-8 shrink-0 items-center justify-center rounded-[var(--ds-radius-md)] bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)]", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 18 }) }) : (
+            // An element (an Avatar, a logo) brings its own shape — no tinted box around it.
+            /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon })
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-ds-2", children: [
+              isTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: heading }) : heading,
+              status && /* @__PURE__ */ jsx(StatusDot, { variant: STATUS_VARIANT[status.tone ?? "success"], label: status.label })
+            ] }),
+            description && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--ds-text-muted)]", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-ds-1", children: [
+            actions,
+            onNewConversation && /* @__PURE__ */ jsx(Tooltip, { content: "New conversation", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "New conversation", onClick: onNewConversation, children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) }) }),
+            onExpandedChange && /* @__PURE__ */ jsx(Tooltip, { content: expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": expanded ? "Collapse" : "Expand",
+                "aria-pressed": expanded,
+                onClick: () => onExpandedChange(!expanded),
+                children: /* @__PURE__ */ jsx(Icon, { name: expanded ? "minimize-2" : "maximize-2", size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tooltip, { content: "Close", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: onClose, ...{ [OVERLAY_CLOSE_ATTR]: "" }, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children }),
+    footer && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "shrink-0 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)] text-center text-2xs text-[var(--ds-text-muted)]",
+        style: { padding: "var(--ds-space-2) var(--ds-space-4)" },
+        children: footer
+      }
+    )
+  ] });
 }
 var TOAST_INSET_VARS = {
   "bottom-right": "--ds-toast-inset-bottom-right",
@@ -7895,219 +8743,32 @@ function winner(claims) {
   for (const c of claims) {
     if (!best || c.priority > best.priority || c.priority === best.priority && c.seq > best.seq) best = c;
   }
-  return best;
-}
-function apply(target, corner) {
-  const style = target.style;
-  if (!style) return;
-  const best = winner(claimsFor(target)[corner]);
-  if (best) style.setProperty(TOAST_INSET_VARS[corner], best.inset);
-  else style.removeProperty(TOAST_INSET_VARS[corner]);
-}
-function claimCornerInset(corner, inset, priority, target) {
-  const claim = { inset, priority, seq: ++seq };
-  const list = claimsFor(target)[corner];
-  list.push(claim);
-  apply(target, corner);
-  return () => {
-    const i = list.indexOf(claim);
-    if (i >= 0) list.splice(i, 1);
-    apply(target, corner);
-  };
-}
-function useCornerInset(corner, inset, priority, target) {
-  useEffect(() => {
-    if (!corner || !inset) return;
-    const el = target ?? document.documentElement;
-    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 }) {
-  const titleId = useId();
-  const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(open);
-  const [hidden, setHidden] = useState(!open);
-  const [snapIdx, setSnapIdx] = useState(0);
-  const [dragOffset, setDragOffset] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const dragStartY = useRef(0);
-  const startHeight = useRef(0);
-  const onCloseRef = useLatest(onClose);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) {
-      setMounted(true);
-      setHidden(false);
-      setSnapIdx(0);
-      setDragOffset(0);
-    }
-  }
-  const viewportHeight = useCallback(
-    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
-    [container]
-  );
-  useCloseSettle(open, panelRef, () => {
-    if (keepMounted) setHidden(true);
-    else setMounted(false);
-  });
-  useReturnFocus(open);
-  useEffect(() => {
-    if (!open || !mounted) return;
-    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
-    return () => cancelAnimationFrame(raf);
-  }, [open, mounted]);
-  const isTopLayer = useOverlayLayer(open);
-  useFocusTrap(panelRef, open, isTopLayer);
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    if (!container) lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      if (!container) unlockBodyScroll();
-    };
-  }, [open, container, onCloseRef, isTopLayer]);
-  const handlePointerDown = useCallback((e) => {
-    setDragging(true);
-    dragStartY.current = e.clientY;
-    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * viewportHeight();
-    setDragOffset(0);
-    e.target.setPointerCapture(e.pointerId);
-  }, [snapIdx, snapPoints, viewportHeight]);
-  const handlePointerMove = useCallback((e) => {
-    if (!dragging) return;
-    const delta = dragStartY.current - e.clientY;
-    setDragOffset(delta);
-  }, [dragging]);
-  const handlePointerUp = useCallback(() => {
-    if (!dragging) return;
-    setDragging(false);
-    const currentHeightPx = startHeight.current + dragOffset;
-    const currentFraction = currentHeightPx / viewportHeight();
-    if (currentFraction < snapPoints[0] * 0.6) {
-      onClose();
-      setDragOffset(0);
-      return;
-    }
-    let bestIdx = 0;
-    let bestDist = Math.abs(currentFraction - snapPoints[0]);
-    for (let i = 1; i < snapPoints.length; i++) {
-      const dist = Math.abs(currentFraction - snapPoints[i]);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestIdx = i;
-      }
-    }
-    setSnapIdx(bestIdx);
-    setDragOffset(0);
-  }, [dragging, dragOffset, snapPoints, onClose, viewportHeight]);
-  if (!mounted) return null;
-  const baseHeight = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
-  const heightUnit = container ? "%" : "vh";
-  const dragPx = dragging ? dragOffset : 0;
-  const positionClass = container ? "absolute" : "fixed";
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        hidden: keepMounted && hidden ? true : void 0,
-        className: cn(
-          `${positionClass} inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]`,
-          open ? "pointer-events-auto" : "pointer-events-none"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 bg-black/50 transition-opacity duration-[var(--ds-transition-speed)]",
-                open ? "opacity-100" : "opacity-0"
-              ),
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: panelRef,
-              id,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? titleId : labelledBy,
-              "data-ds-sheet": "",
-              className: cn(
-                `${positionClass} bottom-0 left-0 right-0 z-10 flex flex-col`,
-                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                GLASS_OVERLAY,
-                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                "rounded-t-[var(--ds-radius-xl)]",
-                !dragging && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-                open ? "translate-y-0" : "translate-y-full"
-              ),
-              style: {
-                containerType: "inline-size",
-                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
-                    onPointerDown: handlePointerDown,
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: handlePointerUp,
-                    onPointerCancel: handlePointerUp,
-                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
-                  }
-                ),
-                title && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
-                    children: [
-                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto",
-                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
-                    children
-                  }
-                ),
-                footer && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-                    children: footer
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    container ?? document.body
-  );
+  return best;
+}
+function apply(target, corner) {
+  const style = target.style;
+  if (!style) return;
+  const best = winner(claimsFor(target)[corner]);
+  if (best) style.setProperty(TOAST_INSET_VARS[corner], best.inset);
+  else style.removeProperty(TOAST_INSET_VARS[corner]);
+}
+function claimCornerInset(corner, inset, priority, target) {
+  const claim = { inset, priority, seq: ++seq };
+  const list = claimsFor(target)[corner];
+  list.push(claim);
+  apply(target, corner);
+  return () => {
+    const i = list.indexOf(claim);
+    if (i >= 0) list.splice(i, 1);
+    apply(target, corner);
+  };
+}
+function useCornerInset(corner, inset, priority, target) {
+  useEffect(() => {
+    if (!corner || !inset) return;
+    const el = target ?? document.documentElement;
+    return claimCornerInset(corner, inset, priority, el);
+  }, [corner, inset, priority, target]);
 }
 var DEFAULT_OFFSET = "var(--ds-space-4)";
 var CORNER_PANEL_ANCHOR_INSET = "calc(var(--ds-space-12) + var(--ds-space-3))";
@@ -8148,388 +8809,74 @@ function CornerPanel({
       labelledBy,
       keepMounted,
       container,
-      className,
-      children
-    }
-  );
-}
-var RIBBON_INSET = "calc(var(--ds-space-8) + var(--ds-space-3))";
-function CornerWindow({ open, onClose, edge, align, width, height, offset, anchorInset, expanded, id, labelledBy, keepMounted, container, children, className }) {
-  const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(open);
-  const [hidden, setHidden] = useState(!open);
-  if (open && !mounted) setMounted(true);
-  if (open && hidden) setHidden(false);
-  const side = edge.endsWith("left") ? "left" : "right";
-  const vertical = edge.startsWith("bottom") ? "bottom" : edge.startsWith("top") ? "top" : "side";
-  const x = offset?.x ?? (vertical === "side" ? RIBBON_INSET : DEFAULT_OFFSET);
-  const y = offset?.y ?? DEFAULT_OFFSET;
-  const bottom = vertical === "bottom" ? `calc(${y} + ${anchorInset})` : y;
-  const isTopLayer = useOverlayLayer(open);
-  useNonModalDialog(panelRef, open && mounted, onClose, isTopLayer);
-  useCloseSettle(open, panelRef, () => {
-    if (keepMounted) setHidden(true);
-    else setMounted(false);
-  });
-  const claim = vertical === "bottom" ? side === "right" ? "bottom-right" : "bottom-left" : side;
-  const containerEl = container instanceof Element ? container : null;
-  useCornerInset(
-    open && mounted && !expanded ? claim : null,
-    vertical === "bottom" ? `calc(${bottom} + ${height} + var(--ds-space-3))` : `calc(${x} + ${width} + var(--ds-space-3))`,
-    PANEL_INSET_PRIORITY,
-    containerEl
-  );
-  if (!mounted) return null;
-  const positionClass = container ? "absolute" : "fixed";
-  const viewport = container ? "100%" : "100dvh";
-  const style = expanded ? { top: y, bottom: vertical === "top" ? DEFAULT_OFFSET : y, left: vertical === "side" ? DEFAULT_OFFSET : x, right: vertical === "side" ? DEFAULT_OFFSET : x } : {
-    ...vertical === "bottom" ? { bottom: `calc(${bottom} + env(safe-area-inset-bottom))`, maxHeight: `calc(${viewport} - ${bottom} - ${y})` } : vertical === "top" ? { top: `calc(${y} + env(safe-area-inset-top))`, maxHeight: `calc(${viewport} - ${y} - ${DEFAULT_OFFSET})` } : align === "center" ? { top: `max(${y}, calc(50% - ${height} / 2))`, maxHeight: `calc(${viewport} - ${y} * 2)` } : { bottom: `calc(${y} + env(safe-area-inset-bottom))`, maxHeight: `calc(${viewport} - ${y} * 2)` },
-    [side]: `calc(${x} + env(safe-area-inset-${side}))`,
-    width,
-    height,
-    maxWidth: `calc(100% - ${x} - ${DEFAULT_OFFSET})`
-  };
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: panelRef,
-        id,
-        role: "dialog",
-        "aria-labelledby": labelledBy,
-        hidden: keepMounted && hidden ? true : void 0,
-        "data-corner-panel": "",
-        "data-edge": edge,
-        "data-expanded": expanded || void 0,
-        style,
-        className: cn(
-          positionClass,
-          "z-[var(--ds-z-overlay)] flex flex-col overflow-hidden",
-          "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-          // The dropdown grade, like Popover and NotificationCenter: it floats over a
-          // live page with no backdrop, so the modal shadow reads far too heavy.
-          GLASS_DROPDOWN,
-          "rounded-[var(--ds-radius-lg)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-          "transition-[opacity,transform,inset,width,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-          vertical === "bottom" ? side === "right" ? "origin-bottom-right" : "origin-bottom-left" : vertical === "top" ? side === "right" ? "origin-top-right" : "origin-top-left" : side === "right" ? "origin-right" : "origin-left",
-          open ? "opacity-100 translate-y-0 scale-100" : vertical === "top" ? "opacity-0 -translate-y-ds-2 scale-95" : "opacity-0 translate-y-ds-2 scale-95",
-          className
-        ),
-        children
-      }
-    ),
-    container ?? document.body
-  );
-}
-var STEP = 16;
-var BIG_STEP = 64;
-function clamp(v, min, max) {
-  return Math.min(Math.max(v, min), max);
-}
-function ResizeEdge({ edge, width, min, max, defaultWidth, onResize, label, onDraggingChange, className }) {
-  const [dragging, setDragging] = useState(false);
-  const start = useRef(null);
-  const latestOnResize = useLatest(onResize);
-  const direction = edge === "left" ? -1 : 1;
-  const onPointerDown = useCallback(
-    (e) => {
-      if (e.button !== 0) return;
-      e.preventDefault();
-      start.current = { x: e.clientX, width };
-      setDragging(true);
-      e.currentTarget.setPointerCapture(e.pointerId);
-    },
-    [width]
-  );
-  const onPointerMove = useCallback(
-    (e) => {
-      if (!start.current) return;
-      const next = clamp(start.current.width + direction * (e.clientX - start.current.x), min, max());
-      latestOnResize.current(next);
-    },
-    [direction, min, max, latestOnResize]
-  );
-  const endDrag = useCallback(() => {
-    start.current = null;
-    setDragging(false);
-  }, []);
-  const latestOnDraggingChange = useLatest(onDraggingChange);
-  useEffect(() => {
-    latestOnDraggingChange.current?.(dragging);
-  }, [dragging, latestOnDraggingChange]);
-  useEffect(() => {
-    if (!dragging) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape" || !start.current) return;
-      latestOnResize.current(start.current.width);
-      endDrag();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [dragging, endDrag, latestOnResize]);
-  const onKeyDown = (e) => {
-    const step = e.shiftKey ? BIG_STEP : STEP;
-    let next = null;
-    if (e.key === "ArrowLeft") next = width - direction * step;
-    else if (e.key === "ArrowRight") next = width + direction * step;
-    else if (e.key === "Home") next = min;
-    else if (e.key === "End") next = max();
-    else if (e.key === "Enter") next = defaultWidth;
-    if (next === null) return;
-    e.preventDefault();
-    onResize(clamp(next, min, max()));
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "separator",
-      tabIndex: 0,
-      "aria-orientation": "vertical",
-      "aria-label": label,
-      "aria-valuemin": min,
-      "aria-valuemax": max(),
-      "aria-valuenow": Math.round(width),
-      "data-resize-edge": edge,
-      "data-dragging": dragging || void 0,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
-      onDoubleClick: () => onResize(clamp(defaultWidth, min, max())),
-      onKeyDown,
-      className: cn(
-        // A narrow absolutely-positioned strip over the edge — never a flex child that takes width.
-        "group/edge absolute top-0 bottom-0 z-10 w-ds-2 cursor-col-resize touch-none select-none outline-none",
-        edge === "left" ? "-left-ds-1" : "-right-ds-1",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: cn(
-            "absolute top-0 bottom-0 left-1/2 w-px -translate-x-1/2 transition-[width,background-color] duration-[var(--ds-transition-speed)]",
-            "group-hover/edge:w-[3px] group-hover/edge:bg-[var(--ds-accent-primary)]",
-            "group-focus-visible/edge:w-[3px] group-focus-visible/edge:bg-[var(--ds-accent-primary)]",
-            dragging && "w-[3px] bg-[var(--ds-accent-primary)]"
-          )
-        }
-      )
-    }
-  );
-}
-var remembered = /* @__PURE__ */ new Map();
-function useRememberedWidth(key) {
-  const [width, setWidth] = useState(() => key ? remembered.get(key) ?? null : null);
-  const remember = useCallback(
-    (w) => {
-      setWidth(w);
-      if (!key) return;
-      if (w === null) remembered.delete(key);
-      else remembered.set(key, w);
-    },
-    [key]
-  );
-  return [width, remember];
-}
-function pxOf(length) {
-  if (!length) return null;
-  const m = /^(\d+(?:\.\d+)?)px$/.exec(length.trim());
-  return m ? parseFloat(m[1]) : null;
-}
-function defaultMaxWidth(container) {
-  const base = container instanceof HTMLElement ? container.clientWidth : typeof window !== "undefined" ? window.innerWidth : 1200;
-  return Math.round(base * 0.6);
-}
-var slideClasses = {
-  right: {
-    panel: "top-0 right-0 h-full",
-    open: "translate-x-0",
-    closed: "translate-x-full"
-  },
-  left: {
-    panel: "top-0 left-0 h-full",
-    open: "translate-x-0",
-    closed: "-translate-x-full"
-  },
-  bottom: {
-    panel: "bottom-0 left-0 right-0",
-    open: "translate-y-0",
-    closed: "translate-y-full"
-  }
-};
-var borderByPosition = {
-  right: "border-l-[length:var(--ds-border-width)] border-l-[var(--ds-border-default)]",
-  left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
-  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 isPhone = useBreakpoint("sm");
-  const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
-  if (isPhone && mobileMode === "sheet") {
-    return /* @__PURE__ */ jsx(Sheet, { open, onClose, title, footer, container, flush, snapPoints, keepMounted, id, labelledBy, children });
-  }
-  return /* @__PURE__ */ jsx(DrawerPanel, { ...props });
-}
-function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth }) {
-  const nonModal = !modal;
-  const [chosen, remember] = useRememberedWidth(id ?? labelledBy);
-  const canResize = nonModal && resizable && position !== "bottom";
-  const effectiveWidth = canResize && chosen !== null ? `${chosen}px` : width;
-  const minPx = pxOf(width) ?? 320;
-  const maxPx = () => pxOf(maxWidth) ?? defaultMaxWidth(container instanceof Element ? container : null);
-  const titleId = useId();
-  const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
-  const isMobile = useBreakpoint("sm");
+      className,
+      children
+    }
+  );
+}
+var RIBBON_INSET = "calc(var(--ds-space-8) + var(--ds-space-3))";
+function CornerWindow({ open, onClose, edge, align, width, height, offset, anchorInset, expanded, id, labelledBy, keepMounted, container, children, className }) {
   const panelRef = useRef(null);
   const [mounted, setMounted] = useState(open);
   const [hidden, setHidden] = useState(!open);
-  const onCloseRef = useLatest(onClose);
   if (open && !mounted) setMounted(true);
   if (open && hidden) setHidden(false);
+  const side = edge.endsWith("left") ? "left" : "right";
+  const vertical = edge.startsWith("bottom") ? "bottom" : edge.startsWith("top") ? "top" : "side";
+  const x = offset?.x ?? (vertical === "side" ? RIBBON_INSET : DEFAULT_OFFSET);
+  const y = offset?.y ?? DEFAULT_OFFSET;
+  const bottom = vertical === "bottom" ? `calc(${y} + ${anchorInset})` : y;
   const isTopLayer = useOverlayLayer(open);
-  useEffect(() => {
-    if (!open || nonModal) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    if (!container) lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      if (!container) unlockBodyScroll();
-    };
-  }, [open, nonModal, container, onCloseRef, isTopLayer]);
-  useReturnFocus(open && !nonModal);
-  useFocusTrap(panelRef, open && !topOffset && !nonModal, isTopLayer);
-  useEffect(() => {
-    if (!open || !mounted || nonModal) return;
-    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
-    return () => cancelAnimationFrame(raf);
-  }, [open, mounted, nonModal]);
-  useNonModalDialog(panelRef, open && mounted && nonModal, onClose, isTopLayer);
+  useNonModalDialog(panelRef, open && mounted, onClose, isTopLayer);
   useCloseSettle(open, panelRef, () => {
     if (keepMounted) setHidden(true);
     else setMounted(false);
   });
+  const claim = vertical === "bottom" ? side === "right" ? "bottom-right" : "bottom-left" : side;
+  const containerEl = container instanceof Element ? container : null;
+  useCornerInset(
+    open && mounted && !expanded ? claim : null,
+    vertical === "bottom" ? `calc(${bottom} + ${height} + var(--ds-space-3))` : `calc(${x} + ${width} + var(--ds-space-3))`,
+    PANEL_INSET_PRIORITY,
+    containerEl
+  );
   if (!mounted) return null;
-  const slide = slideClasses[position];
-  const isHorizontal = position === "left" || position === "right";
   const positionClass = container ? "absolute" : "fixed";
+  const viewport = container ? "100%" : "100dvh";
+  const style = expanded ? { top: y, bottom: vertical === "top" ? DEFAULT_OFFSET : y, left: vertical === "side" ? DEFAULT_OFFSET : x, right: vertical === "side" ? DEFAULT_OFFSET : x } : {
+    ...vertical === "bottom" ? { bottom: `calc(${bottom} + env(safe-area-inset-bottom))`, maxHeight: `calc(${viewport} - ${bottom} - ${y})` } : vertical === "top" ? { top: `calc(${y} + env(safe-area-inset-top))`, maxHeight: `calc(${viewport} - ${y} - ${DEFAULT_OFFSET})` } : align === "center" ? { top: `max(${y}, calc(50% - ${height} / 2))`, maxHeight: `calc(${viewport} - ${y} * 2)` } : { bottom: `calc(${y} + env(safe-area-inset-bottom))`, maxHeight: `calc(${viewport} - ${y} * 2)` },
+    [side]: `calc(${x} + env(safe-area-inset-${side}))`,
+    width,
+    height,
+    maxWidth: `calc(100% - ${x} - ${DEFAULT_OFFSET})`
+  };
   return createPortal(
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
+        ref: panelRef,
+        id,
+        role: "dialog",
+        "aria-labelledby": labelledBy,
         hidden: keepMounted && hidden ? true : void 0,
+        "data-corner-panel": "",
+        "data-edge": edge,
+        "data-expanded": expanded || void 0,
+        style,
         className: cn(
-          `${positionClass} transition-opacity duration-[var(--ds-transition-speed)]`,
-          // A non-modal panel never intercepts the page: the wrapper is inert to the
-          // pointer and only the panel itself accepts events.
-          nonModal ? "z-[var(--ds-z-overlay)] pointer-events-none" : cn("z-[var(--ds-z-modal)]", open ? "pointer-events-auto" : "pointer-events-none"),
-          topOffset ? "left-0 right-0 bottom-0" : "inset-0"
+          positionClass,
+          "z-[var(--ds-z-overlay)] flex flex-col overflow-hidden",
+          "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+          // The dropdown grade, like Popover and NotificationCenter: it floats over a
+          // live page with no backdrop, so the modal shadow reads far too heavy.
+          GLASS_DROPDOWN,
+          "rounded-[var(--ds-radius-lg)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+          "transition-[opacity,transform,inset,width,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+          vertical === "bottom" ? side === "right" ? "origin-bottom-right" : "origin-bottom-left" : vertical === "top" ? side === "right" ? "origin-top-right" : "origin-top-left" : side === "right" ? "origin-right" : "origin-left",
+          open ? "opacity-100 translate-y-0 scale-100" : vertical === "top" ? "opacity-0 -translate-y-ds-2 scale-95" : "opacity-0 translate-y-ds-2 scale-95",
+          className
         ),
-        style: topOffset ? { top: topOffset } : void 0,
-        children: [
-          !nonModal && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 transition-opacity duration-[var(--ds-transition-speed)]",
-                lightBackdrop ? "bg-black/15" : cn("bg-black/50", "[backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]"),
-                open ? "opacity-100" : "opacity-0"
-              ),
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: panelRef,
-              id,
-              role: "dialog",
-              "aria-modal": nonModal ? void 0 : "true",
-              "aria-labelledby": title ? titleId : labelledBy,
-              style: {
-                containerType: "inline-size",
-                width: isHorizontal ? effectiveWidth : void 0,
-                maxWidth: isHorizontal ? "100%" : void 0,
-                height: isMobile ? "100%" : void 0,
-                maxHeight: !isMobile && !isHorizontal ? "80vh" : void 0
-              },
-              className: cn(
-                `${positionClass} z-10 flex flex-col`,
-                nonModal && "pointer-events-auto",
-                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                GLASS_OVERLAY,
-                // flush drops the edge border for children that draw their own (the mobile
-                // menu's Sidebar); a non-modal panel has no backdrop to separate it from
-                // the page, so it always keeps the border.
-                (!flush || nonModal) && borderByPosition[position],
-                "transition-transform duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-                isHorizontal && position === "left" && "rounded-r-[var(--ds-radius-lg)] overflow-hidden",
-                isHorizontal && position === "right" && "rounded-l-[var(--ds-radius-lg)] overflow-hidden",
-                !isHorizontal && "rounded-t-[var(--ds-radius-lg)] overflow-hidden",
-                (lightBackdrop || nonModal) && "shadow-[var(--ds-shadow-overlay)]",
-                slide.panel,
-                open ? slide.open : slide.closed
-              ),
-              children: [
-                canResize && open && /* @__PURE__ */ jsx(
-                  ResizeEdge,
-                  {
-                    edge: position === "right" ? "left" : "right",
-                    width: chosen ?? minPx,
-                    min: minPx,
-                    max: maxPx,
-                    defaultWidth: minPx,
-                    onResize: (w) => remember(w === minPx ? null : w),
-                    label: "Resize panel"
-                  }
-                ),
-                title && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: {
-                      padding: "var(--ds-space-3) var(--ds-space-6)",
-                      minHeight: "calc(var(--ds-space-unit) * 6 + 1.75rem + 2px + var(--ds-border-width))"
-                    },
-                    children: [
-                      titleTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto",
-                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
-                    children
-                  }
-                ),
-                footer && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-                    children: footer
-                  }
-                )
-              ]
-            }
-          )
-        ]
+        children
       }
     ),
     container ?? document.body
@@ -8588,10 +8935,28 @@ var AppShell = forwardRef(function AppShell2({
   const navbarFloating = (chrome.navbar ?? theme?.navbarPosition) === "floating";
   const sidebarFloating = hasSidebar && !isMobile && (chrome.sidebar ?? theme?.sidebarPosition) === "floating";
   const isHome = currentPath != null && currentPath === homePath;
+  const hasFooter = footer != null && scrollable;
+  const mainRef = useRef(null);
+  useEffect(() => {
+    const main = mainRef.current;
+    if (!hasFooter || !shellEl || !main || typeof ResizeObserver === "undefined") {
+      shellEl?.style.removeProperty("--ds-main-height");
+      return;
+    }
+    const ro = new ResizeObserver(() => shellEl.style.setProperty("--ds-main-height", `${main.clientHeight}px`));
+    ro.observe(main);
+    return () => {
+      ro.disconnect();
+      shellEl.style.removeProperty("--ds-main-height");
+    };
+  }, [hasFooter, shellEl]);
+  const hasLauncher = !!launcher && !isSmallMobile;
+  const launcherProps = isValidElement(launcher) ? launcher.props : null;
+  const launcherCorner = !hasLauncher ? null : launcherProps?.variant === "ribbon" ? null : launcherProps?.edge === "bottom-left" ? "bottom-left" : launcherProps?.edge === "right" || launcherProps?.edge === "left" || launcherProps?.edge === "bottom" ? null : "bottom-right";
   return /* @__PURE__ */ jsx(
     AppShellContext,
     {
-      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 },
+      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, hasLauncher, launcherCorner, hasFooter },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
         setShellEl(el);
         if (typeof ref === "function") ref(el);
@@ -8609,6 +8974,7 @@ var AppShell = forwardRef(function AppShell2({
             /* @__PURE__ */ jsx(
               "main",
               {
+                ref: mainRef,
                 id: mainId,
                 tabIndex: -1,
                 className: cn(
@@ -8812,8 +9178,10 @@ var StackedList = forwardRef(function StackedList2({
   divided = true,
   flush = false,
   selectedId,
+  hover = "tint",
   className
 }, ref) {
+  const isPhone = useBreakpoint("sm");
   return /* @__PURE__ */ jsx(
     "ul",
     {
@@ -8859,7 +9227,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,
@@ -8874,23 +9242,25 @@ var StackedList = forwardRef(function StackedList2({
             children: [
               item.leading && /* @__PURE__ */ jsx("div", { className: cn("shrink-0", multiline && "mt-ds-0.5"), children: item.leading }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("flex gap-ds-2", isPhone ? "flex-col" : "items-center justify-between"), children: [
                   /* @__PURE__ */ jsx(
                     TruncText,
                     {
                       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
                     }
                   ),
-                  multiline && trailing
+                  (multiline || isPhone) && trailing
                 ] }),
                 item.subtitle && /* @__PURE__ */ jsx(TruncText, { className: cn("text-sm", isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-secondary)]"), children: item.subtitle }),
                 item.description && /* @__PURE__ */ jsx(TruncText, { className: cn("text-xs", isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-muted)]"), children: item.description })
               ] }),
-              !multiline && trailing,
+              !multiline && !isPhone && trailing,
               item.actions && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -9471,6 +9841,109 @@ 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,
+  frame = "page",
+  "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 isFill = frame === "fill";
+  const shell = useAppShell();
+  const fillStyle = isFill && shell?.hasFooter ? { height: "var(--ds-main-height, 100%)" } : void 0;
+  const surface = cn(
+    "h-full min-h-0 w-full bg-[var(--ds-bg-surface)]",
+    isFill && "rounded-none border-0",
+    bordered && !isFill && "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", "data-frame": frame, ...region, className: cn(surface, "flex flex-col"), style: fillStyle, 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", "data-frame": frame, ...region, className: surface, style: fillStyle, 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", { "data-pane": "list", 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", { "data-pane": "detail", 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", { "data-pane": "aside", 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 });
@@ -9881,7 +10354,7 @@ function EllipsisJumper({ totalPages, onPageChange }) {
               type: "button",
               onClick: handleGo,
               className: cn(
-                "px-ds-2.5 h-8 text-xs font-medium cursor-pointer",
+                "px-ds-2.5 h-[var(--ds-control-height-sm)] text-xs font-medium cursor-pointer",
                 "rounded-[var(--ds-radius-md)]",
                 "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
                 "transition-colors duration-[var(--ds-transition-speed)]",
@@ -10317,9 +10790,11 @@ var Sidebar = forwardRef(function Sidebar2({
   }
   return /* @__PURE__ */ jsx(SidebarContext, { value: { collapsed, onCollapsedChange: handleCollapsedChange, portalContainer: portalEl, type, position: "flush", navbarFloating: !!navbarFloating, navSize }, children: aside });
 });
-function TruncLabel3({ children, className, side = "right", container }) {
-  const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const label = /* @__PURE__ */ jsx("span", { ref, className: cn("truncate", className), children });
+function TruncLabel3({ children, className, side = "right", container, lines = 1 }) {
+  const { ref, isTruncated } = useTextOverflow({ lines });
+  const clampMap = { 2: "line-clamp-2", 3: "line-clamp-3" };
+  const clampClass = lines <= 1 ? "truncate" : clampMap[lines] ?? "truncate";
+  const label = /* @__PURE__ */ jsx("span", { ref, className: cn(clampClass, className), children });
   if (!isTruncated) return label;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, side, delay: 200, container, children: label });
 }
@@ -10792,7 +11267,7 @@ function CompactNavItem({
               className: cn((item.active || childActive) && "text-[var(--ds-sidebar-active-accent)]")
             }
           ),
-          /* @__PURE__ */ jsx(TruncLabel3, { className: "text-[clamp(9px,var(--ds-font-size-2xs),12px)] leading-tight max-w-full", side: "right", container: portalContainer ?? void 0, children: item.label }),
+          /* @__PURE__ */ jsx(TruncLabel3, { className: "text-[clamp(9px,var(--ds-font-size-2xs),12px)] leading-tight max-w-full text-center", lines: 2, side: "right", container: portalContainer ?? void 0, children: item.label }),
           mobile && hasChildren && /* @__PURE__ */ jsx(
             Icon,
             {
@@ -10966,7 +11441,8 @@ function resolvePageHeader(theme, props, facts) {
     breadcrumbSeparator: props.breadcrumbSeparator ?? b.separator ?? "chevron",
     navbarFloating,
     sidebarFloating,
-    outside: variant === "colourful" || behavior === "snapping" || position === "floating"
+    outside: variant === "colourful" || behavior === "snapping" || position === "floating",
+    overlap: variant === "colourful" && (t.overlap ?? false)
   };
 }
 var maxWidthValues = {
@@ -10996,6 +11472,11 @@ var bottomPaddingClasses = {
   default: "pb-ds-12",
   spacious: "pb-ds-16"
 };
+var bottomPaddingValues = {
+  none: "0px",
+  default: "var(--ds-space-12)",
+  spacious: "var(--ds-space-16)"
+};
 var FLOATING_BLOCK = cn(
   "rounded-[var(--ds-radius-md)]",
   "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -11011,6 +11492,14 @@ function isPageHeaderElement(node) {
   const type = node.type;
   return !!type && typeof type !== "string" && type[PAGE_HEADER_MARK] === true;
 }
+var OVERLAP_MIN = 24;
+var OVERLAP_MAX = 64;
+function overlapTarget(column) {
+  const first = column?.firstElementChild ?? null;
+  if (!first) return null;
+  const bare = first.tagName === "DIV" && !first.getAttribute("style") && !(first.getAttribute("class") ?? "").split(/\s+/).some((c) => /^(?:p[xytblr]?-|m[xytblr]?-|bg-|border|rounded|shadow|grid|@)/.test(c));
+  return bare && first.firstElementChild ? first.firstElementChild : first;
+}
 function floatingBlockPadding(navbarFloating, sidebarFloating, overlap) {
   return {
     paddingTop: navbarFloating ? 0 : "var(--ds-space-3)",
@@ -11031,11 +11520,63 @@ 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);
   const headerIdx = kids.findIndex(isPageHeaderElement);
-  if (headerIdx === -1) {
+  const launcherCorner = shell?.launcherCorner ?? null;
+  const vPad = verticalPadding ?? "default";
+  const launcherPadding = launcherCorner ? { paddingBottom: `max(${bottomPaddingValues[vPad]}, var(--ds-toast-inset-${launcherCorner}, 0px))` } : {};
+  const headerEl = headerIdx === -1 ? null : kids[headerIdx];
+  const r = headerEl ? resolvePageHeader(shell?.theme, headerEl.props, {
+    isHome: shell?.isHome ?? false,
+    isMobile: shell?.isMobile ?? false,
+    navbarFloating: shell?.navbarFloating ?? false,
+    sidebarFloating: shell?.sidebarFloating ?? false
+  }) : null;
+  const overlapActive = !!r && r.variant === "colourful" && r.overlap;
+  const columnRef = useRef(null);
+  const observedRef = useRef(null);
+  useEffect(() => {
+    const stop = () => {
+      observedRef.current?.ro.disconnect();
+      observedRef.current = null;
+    };
+    if (!overlapActive) {
+      stop();
+      rootRef.current?.style.removeProperty("--ds-overlap");
+      return;
+    }
+    const target = overlapTarget(columnRef.current);
+    if (!target) {
+      stop();
+      return;
+    }
+    if (observedRef.current?.target === target) return;
+    stop();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([entry]) => {
+      const h = entry.contentRect.height;
+      rootRef.current?.style.setProperty("--ds-overlap", `${Math.min(OVERLAP_MAX, Math.max(OVERLAP_MIN, Math.round(h / 2)))}px`);
+    });
+    ro.observe(target);
+    observedRef.current = { target, ro };
+  });
+  useEffect(() => () => {
+    observedRef.current?.ro.disconnect();
+    observedRef.current = null;
+  }, []);
+  if (headerIdx === -1 || !headerEl || !r) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -11043,23 +11584,16 @@ var PageContainer = forwardRef(function PageContainer2({
         className: cn(
           "w-full",
           paddingClasses[padding],
-          verticalPaddingClasses[verticalPadding ?? "default"],
+          verticalPaddingClasses[vPad],
           centered && "mx-auto",
           className
         ),
-        style: { maxWidth: maxWidthValue, containerType: "inline-size" },
+        style: { maxWidth: maxWidthValue, containerType: "inline-size", ...launcherPadding },
         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";
@@ -11068,22 +11602,18 @@ var PageContainer = forwardRef(function PageContainer2({
   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 strip = contained && !breadcrumbsInsideHeader && crumbs ? /* @__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 }, children: renderHeader ? renderHeader(headerEl) : headerEl });
+  const header = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement, containedBreadcrumbs: contained, breadcrumbsInsideHeader, noBottomMargin: block, overlap: overlapActive, setPinnedHeight }, children: renderHeader ? renderHeader(headerEl) : headerEl });
   const contentPadding = floatingHeader && shell?.isMobile ? "none" : padding;
-  const wrapperStyle = floatingHeader || overlap ? {
+  const wrapperStyle = floatingHeader || overlapActive ? {
     ...floatingHeader ? { paddingRight: "var(--ds-space-3)", paddingLeft: r.sidebarFloating ? 0 : "var(--ds-space-3)" } : {},
-    ...overlap ? { marginTop: -overlap, position: "relative", zIndex: 1 } : {}
+    ...overlapActive ? { marginTop: "calc(-1 * var(--ds-overlap, 0px))", 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: [
-    placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlap > 0), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
+  const column = /* @__PURE__ */ jsx("div", { ref: columnRef, className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, 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, overlapActive), 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: [
@@ -11224,7 +11754,6 @@ var PageHeader = forwardRef(function PageHeader2({
   behavior: behaviorProp,
   intensity: intensityProp,
   backgroundImage,
-  overlapHeight,
   expandedContent,
   collapseOffset = 100,
   pinned = true,
@@ -11263,6 +11792,7 @@ var PageHeader = forwardRef(function PageHeader2({
   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;
+  const overlapActive = container?.overlap ?? false;
   if (behavior === "snapping") {
     return /* @__PURE__ */ jsx(
       SnappingHeader,
@@ -11282,7 +11812,7 @@ var PageHeader = forwardRef(function PageHeader2({
         variant,
         intensity,
         backgroundImage,
-        overlapHeight,
+        overlapActive,
         tabs,
         breadcrumbPill: bcPill,
         breadcrumbSeparator: bcSep,
@@ -11336,7 +11866,7 @@ var PageHeader = forwardRef(function PageHeader2({
         filters,
         intensity,
         backgroundImage,
-        overlapHeight,
+        overlapActive,
         contentMaxWidth,
         breadcrumbPill: bcPill,
         breadcrumbSeparator: bcSep,
@@ -11371,7 +11901,6 @@ var PageHeader = forwardRef(function PageHeader2({
     );
   }
   if (isFloating) {
-    const overlapActive = variant === "colourful" && !!overlapHeight;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -11452,7 +11981,7 @@ function DefaultHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3 mt-ds-4", children: filters })
+          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) })
         ] })
       ]
     }
@@ -11480,7 +12009,7 @@ function MinimalHeader({
         /* @__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 }) })
+      actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
     ] })
   ] }) });
 }
@@ -11495,7 +12024,7 @@ function ColourfulHeader({
   filters,
   intensity = "bold",
   backgroundImage,
-  overlapHeight,
+  overlapActive,
   contentMaxWidth,
   breadcrumbPill,
   breadcrumbSeparator,
@@ -11513,7 +12042,7 @@ function ColourfulHeader({
       ref: headerRef,
       className: cn(
         "relative overflow-hidden w-full",
-        !isFloating && !overlapHeight && !noBottomMargin && "mb-ds-6",
+        !isFloating && !overlapActive && !noBottomMargin && "mb-ds-6",
         isBold ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box]" : "bg-[var(--ds-tint-base)]",
         isFloating ? cn(
           "rounded-[var(--ds-radius-md)]",
@@ -11548,7 +12077,7 @@ function ColourfulHeader({
             style: {
               maxWidth: contentMaxWidth ?? "var(--ds-bp-xl)",
               containerType: "inline-size",
-              ...overlapHeight ? { paddingBottom: `calc(var(--ds-space-6) + ${overlapHeight}px)` } : {}
+              ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : {}
             },
             children: [
               hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight: isBold, onTint: !isBold, pill: breadcrumbPill, separator: breadcrumbSeparator }),
@@ -11575,7 +12104,7 @@ function ColourfulHeader({
                 ] }),
                 actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
               ] }),
-              filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3 mt-ds-4", children: filters })
+              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) })
             ]
           }
         )
@@ -11599,7 +12128,7 @@ function SnappingHeader({
   variant = "default",
   intensity = "bold",
   backgroundImage,
-  overlapHeight,
+  overlapActive,
   tabs,
   breadcrumbPill,
   breadcrumbSeparator,
@@ -11614,6 +12143,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 +12236,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)]"),
@@ -11694,7 +12248,7 @@ function SnappingHeader({
           isBoldColourful ? "border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box]" : cn("border-[var(--ds-border-subtle)] bg-[var(--ds-tint-base)]", GLASS_SURFACE)
         ] : [
           "relative overflow-hidden",
-          !overlapHeight && !wrapperHasCard && "mb-ds-6",
+          !overlapActive && !wrapperHasCard && "mb-ds-6",
           isBoldColourful ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] border-b-[2px] border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)]" : "bg-[var(--ds-tint-base)] border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
         ]),
         !collapsed && !isColourful && isFloating && !wrapperHasCard && FLOATING_HEADER,
@@ -11724,9 +12278,9 @@ function SnappingHeader({
                 /* @__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 }),
                 badge
               ] }),
-              actions && /* @__PURE__ */ jsx(ButtonSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
+              actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
             ] }),
-            filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3 mt-ds-3", children: filters }),
+            filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-3", children: filters }) }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
             tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-3 -mx-ds-1", children: tabs })
           ] }) : /* @__PURE__ */ jsxs(
@@ -11736,11 +12290,11 @@ function SnappingHeader({
                 "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
                 isColourful && !collapsed && "relative z-10",
                 collapsed ? cn("flex items-center justify-between gap-ds-4 py-ds-2", !effectiveMaxWidth && "px-ds-4") : [
-                  (!isColourful || !overlapHeight) && "pb-ds-6",
+                  (!isColourful || !overlapActive) && "pb-ds-6",
                   hasBreadcrumbs && !hideExpandedBreadcrumbs ? "pt-ds-3" : "pt-ds-6"
                 ]
               ),
-              style: !collapsed && isColourful && overlapHeight ? { paddingBottom: `calc(var(--ds-space-6) + ${overlapHeight}px)` } : void 0,
+              style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : void 0,
               children: [
                 !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight, onTint, pill: breadcrumbPill, separator: breadcrumbSeparator }),
                 /* @__PURE__ */ jsxs("div", { className: cn(
@@ -11791,9 +12345,9 @@ function SnappingHeader({
                       ), children: description })
                     ] })
                   ] }),
-                  actions && (collapsed ? /* @__PURE__ */ jsx(ButtonSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }))
+                  actions && (collapsed ? /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }))
                 ] }),
-                !collapsed && filters && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-3 mt-ds-4", children: filters }),
+                !collapsed && filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
                 !collapsed && expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: expandedContent }),
                 !collapsed && tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-4 -mx-ds-1", children: tabs })
               ]
@@ -11808,7 +12362,6 @@ function SnappingHeader({
     }
   );
   if (isFloating) {
-    const overlapActive = !collapsed && isColourful && !!overlapHeight;
     const floatingStyle = collapsed ? {
       paddingTop: navbarFloating ? 0 : "var(--ds-space-3)",
       paddingRight: "var(--ds-space-3)",
@@ -11820,7 +12373,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 +13086,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 +13215,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)]",
@@ -13728,16 +14284,21 @@ var SectionHeading = forwardRef(function SectionHeading2({
   bordered = false,
   className
 }, ref) {
+  const isPhone = useBreakpoint("sm");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       className: cn(
+        "mb-[var(--ds-heading-gap)]",
         bordered && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] pb-ds-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(
+          "flex gap-ds-4",
+          isPhone && actions ? "flex-col" : "items-start justify-between"
+        ), children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
               /* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
@@ -13846,6 +14407,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, ControlSizeContext, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, 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