gridsmith-ui 0.8.0 → 0.9.1

package/dist/index.js

@@ -1,163 +1,26 @@
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './chunk-5B2ZFL2H.js';
+import { useAppShell, ControlSizeContext, Button, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, useDirtyGuard, DiscardConfirm, defaultMaxWidth } from './chunk-Z37HO5NU.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell } from './chunk-Z37HO5NU.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-VXKSQ56H.js';
-export { CodeBlock, Divider, Link } from './chunk-VXKSQ56H.js';
-import { Badge } from './chunk-QVNGQ64Q.js';
-export { Badge } from './chunk-QVNGQ64Q.js';
-import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
+import { useOverlayLayer, useCloseOnFocusOut, focusInitial, rovingTabStop, OVERLAY_CLOSE_ATTR, useNonModalDialog, useFocusTrap } from './chunk-RLUK575N.js';
+import { Link } from './chunk-ENBESZS2.js';
+export { CodeBlock, Divider, Link } from './chunk-ENBESZS2.js';
+import { Badge } from './chunk-OVVRMMCO.js';
+export { Badge } from './chunk-OVVRMMCO.js';
+import { inferColumnKinds, CardValue } from './chunk-FDIFQ5UF.js';
+import { SplitPaneCtx, TableCardCtx } from './chunk-RG4KUCRS.js';
+import { useBreakpoint } 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 { useTextOverflow, Tooltip, usePosition } from './chunk-CQADS7JZ.js';
+export { Tooltip, useTextOverflow } from './chunk-CQADS7JZ.js';
+import { mergeRefs, Slot } from './chunk-PKLVP5ZB.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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY } from './chunk-4KVFH5KC.js';
+import { createContext, forwardRef, useState, useContext, memo, useEffect, useRef, useCallback, useLayoutEffect, Children, useMemo, useId, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var sizes = {
-  sm: "h-4 w-4 border-[1.5px]",
-  md: "h-6 w-6 border-2",
-  lg: "h-8 w-8 border-[2.5px]"
-};
-function Spinner({ size = "md", color = "default", label = "Loading", className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      role: "status",
-      "aria-label": label,
-      className: cn(
-        "inline-block rounded-[var(--ds-radius-full)] animate-spin",
-        color === "inherit" ? "border-current/30 border-t-current" : "border-[var(--ds-bg-emphasis)] border-t-[var(--ds-accent-primary)]",
-        sizes[size],
-        className
-      )
-    }
-  );
-}
-var ButtonSizeContext = createContext(null);
-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)]",
-  tertiary: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] border-transparent hover:brightness-95",
-  outline: "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
-  ghost: "bg-transparent text-[var(--ds-text-primary)] border-transparent hover:bg-[var(--ds-bg-muted)] shadow-none",
-  destructive: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)] border-transparent hover:opacity-90",
-  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)] border-transparent hover:opacity-90",
-  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)] border-transparent hover:opacity-90",
-  link: "bg-transparent text-[var(--ds-accent-primary)] hover:text-[var(--ds-accent-primary-hover)] hover:underline"
-};
-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",
-  "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"
-};
-var linkSizeStyles = {
-  xs: "text-xs",
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base",
-  "icon-xs": "text-xs",
-  "icon-sm": "text-xs",
-  icon: "text-sm",
-  "icon-lg": "text-base"
-};
-var iconPaddingReduce = {
-  xs: 2,
-  sm: 2,
-  md: 4,
-  lg: 6
-};
-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 size = sizeProp ?? contextSize ?? "md";
-  const isLink = variant === "link";
-  const spinnerSize = size === "lg" || size === "icon-lg" ? "md" : "sm";
-  let paddingStyle;
-  const isIconSize = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
-  if (!isIconSize && !isLink && (iconLeft || iconRight)) {
-    const reduce = iconPaddingReduce[size];
-    paddingStyle = {};
-    if (iconLeft) paddingStyle.paddingLeft = `calc(${getCssPadding(size)} - ${reduce}px)`;
-    if (iconRight) paddingStyle.paddingRight = `calc(${getCssPadding(size)} - ${reduce}px)`;
-  }
-  const isLoading = loading && !disabled;
-  const isDisabled = !!disabled;
-  const handleClick = isLoading ? (e) => {
-    e.preventDefault();
-  } : onClick;
-  const ariaLabel = props["aria-label"];
-  const btn = /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      "data-variant": variant,
-      className: cn(
-        "relative inline-flex items-center justify-center gap-ds-2 whitespace-nowrap font-medium",
-        isLink ? cn(
-          "px-0 py-ds-0.5 h-auto",
-          linkSizeStyles[size],
-          "transition-colors duration-[var(--ds-transition-speed)]",
-          "focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] focus-visible:outline-offset-2",
-          "cursor-pointer",
-          "active:text-[var(--ds-accent-primary-active)]"
-        ) : cn(
-          "border-[length:var(--ds-border-width)]",
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-shadow-button)]",
-          "hover:scale-[var(--_btn-scale)] hover:-translate-y-[var(--ds-hover-lift)]",
-          "active:shadow-[var(--ds-shadow-button-pressed)] active:translate-x-[var(--ds-press-depth)] active:translate-y-[var(--ds-press-depth)]",
-          "[transition:var(--ds-transition-interactive)]",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
-          sizeStyles[size]
-        ),
-        variantStyles[variant],
-        isLoading && !isLink && "cursor-wait pointer-events-none",
-        className
-      ),
-      disabled: isDisabled,
-      "aria-busy": isLoading || void 0,
-      "aria-disabled": isLoading && !disabled ? true : void 0,
-      onClick: handleClick,
-      style: isLink ? style : { ...HOVER_SCALE_CAP, ...paddingStyle, ...style },
-      ...props,
-      children: [
-        loading && !isLink && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: "inherit" }) }),
-        /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-ds-2 min-w-0", loading && !isLink && "invisible"), children: [
-          iconLeft,
-          children,
-          iconRight
-        ] })
-      ]
-    }
-  );
-  if (isIconSize && ariaLabel) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: ariaLabel, children: btn });
-  }
-  return btn;
-});
-function getCssPadding(size) {
-  switch (size) {
-    case "xs":
-      return "var(--ds-space-3)";
-    case "sm":
-      return "var(--ds-space-4)";
-    case "md":
-      return "var(--ds-space-6)";
-    case "lg":
-      return "var(--ds-space-8)";
-  }
-}
 function isDivider(entry) {
   return "type" in entry && entry.type === "divider";
 }
@@ -233,6 +96,7 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
         {
           ref: menuRef,
           role: "menu",
+          "data-gs": "menu",
           onKeyDown: handleMenuKeyDown,
           className: cn(
             "fixed z-[var(--ds-z-popover)] min-w-[180px] p-ds-1",
@@ -337,7 +201,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) {
@@ -346,7 +222,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,
@@ -367,7 +243,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",
@@ -387,7 +263,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,
@@ -429,7 +306,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)]",
@@ -527,6 +404,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,
@@ -536,7 +418,7 @@ function Dropdown({
   placeholder = "Select...",
   multiple,
   searchable,
-  size = "md",
+  size: sizeProp,
   className,
   ref,
   container,
@@ -544,6 +426,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);
@@ -711,7 +595,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)]",
@@ -848,7 +732,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("");
@@ -939,7 +835,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)]",
@@ -975,7 +871,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"
               )
@@ -1225,6 +1123,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",
@@ -1252,7 +1160,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());
@@ -1328,8 +1238,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)]",
@@ -1622,6 +1533,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()}`;
@@ -1662,8 +1583,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);
@@ -1734,8 +1658,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)]",
@@ -2155,6 +2080,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");
 }
@@ -2190,8 +2125,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);
@@ -2272,7 +2210,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,10 +2307,10 @@ 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" }
+var sizes = {
+  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,
@@ -2382,12 +2322,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);
@@ -2399,18 +2341,18 @@ function NumberInput({
     setPrevSync({ value, focused });
     if (!focused) setDraft(String(value));
   }
-  const clamp2 = useCallback(
+  const clamp = useCallback(
     (v) => Math.min(max, Math.max(min, v)),
     [min, max]
   );
   const valueRef = useLatest(value);
   const commitValue = useCallback((v) => {
-    const clamped = clamp2(v);
+    const clamped = clamp(v);
     valueRef.current = clamped;
     setDraft(String(clamped));
     onChange(clamped);
     return clamped;
-  }, [onChange, clamp2, valueRef]);
+  }, [onChange, clamp, valueRef]);
   const increment = useCallback(() => commitValue(valueRef.current + step), [commitValue, step, valueRef]);
   const decrement = useCallback(() => commitValue(valueRef.current - step), [commitValue, step, valueRef]);
   const startRepeat = useCallback(
@@ -2439,10 +2381,10 @@ function NumberInput({
       setDraft(raw);
       const parsed = parseFloat(raw);
       if (!isNaN(parsed) && isFinite(parsed)) {
-        onChange(clamp2(parsed));
+        onChange(clamp(parsed));
       }
     },
-    [onChange, clamp2, decimals]
+    [onChange, clamp, decimals]
   );
   const handleBlur = useCallback(() => {
     setFocused(false);
@@ -2472,7 +2414,7 @@ function NumberInput({
     },
     [increment, decrement]
   );
-  const s = sizes2[size];
+  const s = sizes[size];
   const atMin = value <= min;
   const atMax = value >= max;
   return /* @__PURE__ */ jsxs(
@@ -2480,6 +2422,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)]",
@@ -2579,7 +2522,7 @@ function NumberInput({
     }
   );
 }
-var variantStyles2 = {
+var variantStyles = {
   default: "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-primary)]",
   subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
   success: "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]",
@@ -2587,7 +2530,7 @@ var variantStyles2 = {
   error: "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]",
   outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
 };
-var sizeStyles2 = {
+var sizeStyles = {
   sm: "px-ds-1 py-[calc(var(--ds-space-1)*0.5)] text-[length:var(--ds-font-size-xs)] gap-[calc(var(--ds-space-1)*0.5)]",
   md: "px-ds-2 py-[calc(var(--ds-space-1)*0.5)] text-[length:var(--ds-font-size-xs)] gap-ds-1"
 };
@@ -2637,7 +2580,7 @@ var Tag = forwardRef(function Tag2({
     e.stopPropagation();
     onRemove?.();
   };
-  const colorClasses = color ? getPaletteClasses(color, variant) : variantStyles2[variant];
+  const colorClasses = color ? getPaletteClasses(color, variant) : variantStyles[variant];
   const tag = /* @__PURE__ */ jsxs(
     "span",
     {
@@ -2656,7 +2599,7 @@ var Tag = forwardRef(function Tag2({
         "inline-flex items-center font-medium max-w-full whitespace-nowrap",
         "rounded-[var(--ds-radius-sm)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
-        sizeStyles2[size],
+        sizeStyles[size],
         colorClasses,
         onClick && !disabled && "cursor-pointer select-none hover:opacity-80",
         disabled && "opacity-disabled cursor-not-allowed",
@@ -2802,10 +2745,10 @@ 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"
+var sizes2 = {
+  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,
@@ -2813,11 +2756,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) => {
@@ -2903,7 +2848,7 @@ function PinInput({
             !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
             error ? ERROR_FOCUS_RING : FOCUS_RING,
             "placeholder:text-[var(--ds-text-muted)]",
-            sizes3[size],
+            sizes2[size],
             disabled && "opacity-disabled cursor-not-allowed"
           )
         },
@@ -3346,7 +3291,7 @@ function Field({ label, children, hint, error, required, labelAction, id: idProp
     hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: error, className: "mt-0" })
   ] });
 }
-var variantStyles3 = {
+var variantStyles2 = {
   info: "border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]",
   success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
   warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
@@ -3391,7 +3336,7 @@ var Alert = forwardRef(function Alert2({
         "border-[length:var(--ds-border-width)]",
         "shadow-[var(--ds-shadow-sm)]",
         "text-sm text-[var(--ds-text-primary)]",
-        variantStyles3[variant],
+        variantStyles2[variant],
         placementClasses,
         className
       ),
@@ -3487,6 +3432,13 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
+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);
@@ -3516,6 +3468,13 @@ function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions,
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   }, [ref]);
+  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);
@@ -3588,10 +3547,11 @@ function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions,
     ": ",
     f.message
   ] }, f.id || f.label)) }) }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className, noValidate: true, children: [
+  const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5", className), noValidate: true, children: [
     summaryNode && /* @__PURE__ */ jsx("div", { "data-form-error-summary": "", children: summaryNode }),
     children,
-    actions && /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-4 mt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions })
+    actionsNode
   ] }) });
 }
 function TransferList({
@@ -3891,7 +3851,7 @@ var StatusDot = forwardRef(function StatusDot2({
     }
   );
 });
-var sizeStyles3 = {
+var sizeStyles2 = {
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
   lg: "h-12 w-12 text-base"
@@ -3923,12 +3883,13 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
   const base = cn(
     "inline-flex items-center justify-center font-medium shrink-0",
     "rounded-[var(--ds-radius-full)]",
-    sizeStyles3[size],
+    sizeStyles2[size],
     className
   );
   const avatarElement = src ? /* @__PURE__ */ jsx(
     "img",
     {
+      "data-avatar": "",
       src,
       alt: alt ?? initials ?? "",
       className: cn(base, "object-cover")
@@ -3936,6 +3897,7 @@ function Avatar({ initials, src, alt, size = "md", status, color = "auto", class
   ) : /* @__PURE__ */ jsx(
     "div",
     {
+      "data-avatar": "",
       className: cn(
         base,
         colorStyles(color, alt ?? initials ?? ""),
@@ -4172,7 +4134,8 @@ function MentionInput({
   ] });
 }
 var CardCtx = createContext(false);
-var variantStyles4 = {
+var CardSurfaceCtx = createContext(false);
+var variantStyles3 = {
   default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
   featured: [
     `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
@@ -4321,7 +4284,7 @@ var Card = forwardRef(function Card2({
       style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
       className: cn(
         "rounded-[var(--ds-radius-md)] flex flex-col relative",
-        variantStyles4[variant],
+        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)]",
@@ -4355,11 +4318,11 @@ var Card = forwardRef(function Card2({
             children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
           }
         ),
-        /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
+        /* @__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 })
+        ] }) : children }) })
       ]
     }
   );
@@ -4457,7 +4420,10 @@ var CardContent = forwardRef(function CardContent2({ className, children, ...pro
 });
 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 });
+  return (
+    // a footer that holds only buttons puts them at the end (round 11: a lone Save sat on the left); text keeps the start
+    /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-ds-2 pr-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0 [&:not(:has(>:not(button)))]:justify-end", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children })
+  );
 });
 function TruncLabel({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
@@ -4571,7 +4537,7 @@ function DataList({ items, columns = 1, className }) {
     }
   );
 }
-var sizeStyles4 = {
+var sizeStyles3 = {
   sm: { gap: "gap-ds-0.5", label: "text-[length:var(--ds-font-size-xs)]", value: "text-[length:var(--ds-font-size-xs)]", iconSize: 12, py: "py-ds-1.5" },
   md: { gap: "gap-ds-1", label: "text-[length:var(--ds-font-size-sm)]", value: "text-[length:var(--ds-font-size-sm)]", iconSize: 14, py: "py-ds-2.5" },
   lg: { gap: "gap-ds-1.5", label: "text-[length:var(--ds-font-size-base)]", value: "text-[length:var(--ds-font-size-base)]", iconSize: 16, py: "py-ds-3" }
@@ -4601,7 +4567,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
   stackBelow: stackBelowProp,
   className
 }, ref) {
-  const s = sizeStyles4[size];
+  const s = sizeStyles3[size];
   const stackBelow = stackBelowProp ?? (columns > 1 ? "sm" : void 0);
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
@@ -4653,7 +4619,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
       className: cn(
         "grid",
         columnClasses[columns],
-        "gap-x-ds-6",
+        "gap-x-ds-8",
         stackBelow && stackBelow !== "none" && stackBreakpoints[stackBelow],
         dividers && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
         className
@@ -4861,6 +4827,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) {
@@ -4869,7 +4841,7 @@ function Table({
     if (data.length === 0 && emptyState) {
       return /* @__PURE__ */ jsx("div", { ref, className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
+    return /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-ds-3 overflow-y-auto", className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
       return /* @__PURE__ */ jsxs(
         "div",
@@ -4877,7 +4849,7 @@ function Table({
           className: cn(
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
             "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
-            "p-ds-4 space-y-ds-2",
+            "p-ds-4 space-y-ds-3",
             isSelected && ACTIVE_RING,
             onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
           ),
@@ -4893,15 +4865,15 @@ 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(CardValue, { value: 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) })
           ]
         },
         i
       );
-    }) });
+    }) }) });
   }
   return /* @__PURE__ */ jsx(
     "div",
@@ -4929,14 +4901,18 @@ function Table({
           columns.map((col) => {
             const isSortable = sortable || col.sortable;
             const isActiveSort = sortKey === col.key;
+            const headerKind = kindOf(col);
+            const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
+            const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
             return /* @__PURE__ */ jsx(
               "th",
               {
                 className: cn(
                   density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+                  shrink && "w-px whitespace-nowrap",
                   "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
                   "text-xs uppercase tracking-wider",
-                  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,
@@ -5017,16 +4993,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];
+                    const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
+                    let inner;
+                    if (truncLines > 0) {
+                      inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
+                    } else if (kind === "email") {
+                      inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
+                    } else {
+                      inner = cellContent;
+                    }
                     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,
+                          shrink && "w-px whitespace-nowrap"
                         ),
                         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
                     );
@@ -5048,11 +5037,14 @@ 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"
+function optionsKeyForFit(options) {
+  return options.map((o) => `${o.value}:${o.label}`).join("|");
+}
+var sizes3 = {
+  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]",
@@ -5061,16 +5053,16 @@ 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,
@@ -5078,9 +5070,36 @@ function SegmentedControl({
   "aria-label": ariaLabel,
   maxOptions = 6
 }) {
-  const collapsed = options.length > maxOptions;
+  const contextSize = useContext(ControlSizeContext);
+  const size = sizeProp ?? contextSize ?? "md";
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+  const parentRef = useRef(null);
+  const neededRef = useRef(0);
+  const [overflows, setOverflows] = useState(false);
+  const measureFit = useCallback(() => {
+    const row = containerRef.current;
+    if (row) {
+      parentRef.current = row.parentElement;
+      if (row.scrollWidth > 0) neededRef.current = row.scrollWidth;
+    }
+    const parent = parentRef.current;
+    const needed = neededRef.current;
+    if (!parent || !needed) return;
+    const style = getComputedStyle(parent);
+    const available = parent.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+    if (available <= 0) return;
+    setOverflows((prev) => prev ? needed > available - 8 : needed > available);
+  }, []);
+  useLayoutEffect(() => {
+    measureFit();
+    const parent = parentRef.current;
+    if (!parent || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measureFit);
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, [measureFit, optionsKeyForFit(options)]);
+  const collapsed = options.length > maxOptions || overflows;
   const updateIndicator = useCallback(() => {
     if (!containerRef.current) return;
     const active = containerRef.current.querySelector("[data-active='true']");
@@ -5095,6 +5114,22 @@ function SegmentedControl({
   useLayoutEffect(() => {
     updateIndicator();
   }, [value, optionsKey, updateIndicator]);
+  useEffect(() => {
+    const fonts = document.fonts;
+    if (!fonts?.ready) return;
+    let live = true;
+    fonts.ready.then(() => {
+      if (live) updateIndicator();
+    });
+    return () => {
+      live = false;
+    };
+  }, [updateIndicator]);
+  const [animate, setAnimate] = useState(false);
+  const select = useCallback((v) => {
+    setAnimate(true);
+    onChange(v);
+  }, [onChange]);
   useLayoutEffect(() => {
     if (collapsed || !containerRef.current || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(updateIndicator);
@@ -5120,7 +5155,7 @@ function SegmentedControl({
     else if (e.key === "End") next = enabled.length - 1;
     if (next === null) return;
     e.preventDefault();
-    onChange(enabled[next].value);
+    select(enabled[next].value);
     const buttons = containerRef.current?.querySelectorAll('[role="radio"]');
     buttons?.forEach((b) => {
       if (b.dataset.value === enabled[next].value) b.focus();
@@ -5164,14 +5199,15 @@ function SegmentedControl({
               "absolute rounded-[var(--ds-radius-md)]",
               "bg-[var(--ds-bg-surface)]",
               variant === "default" && "shadow-[var(--ds-shadow-sm)]",
-              "transition-all"
+              "transition-all motion-reduce:transition-none"
             ),
+            "data-animate": animate ? "true" : "false",
             style: {
               left: indicator.left,
               width: indicator.width,
-              top: indicatorInset[size].top,
-              height: indicatorInset[size].height,
-              transitionDuration: "var(--ds-transition-speed)",
+              top: indicatorInset[size],
+              bottom: indicatorInset[size],
+              transitionDuration: animate ? "var(--ds-transition-speed)" : "0ms",
               transitionTimingFunction: "var(--ds-transition-ease)"
             }
           }
@@ -5186,16 +5222,16 @@ function SegmentedControl({
             "data-value": opt.value,
             tabIndex: i === tabStop ? 0 : -1,
             disabled: opt.disabled,
-            onClick: () => !opt.disabled && onChange(opt.value),
+            onClick: () => !opt.disabled && select(opt.value),
             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",
               "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-              sizes4[size],
+              sizes3[size],
               opt.value === value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]",
               opt.disabled && "opacity-disabled cursor-not-allowed"
             ),
@@ -6760,6 +6796,7 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-gs": "empty-state",
       className: cn(
         "flex flex-col items-center justify-center py-[var(--ds-space-10)] px-[var(--ds-space-6)]",
         "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
@@ -6775,42 +6812,52 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
     }
   );
 }
-function SkipLink({ href = "#main", children = "Skip to content", className }) {
-  return /* @__PURE__ */ jsx(
-    "a",
+function initialsOf(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
+}
+function looksLikeUrl(s) {
+  return /^(?:https?:|data:|blob:|\/|\.{1,2}\/)/.test(s) || /\.[a-z]{2,5}(?:$|[?#])/i.test(s);
+}
+function EntityCell({ avatar, src, initials, primary, secondary, size = "md", className }) {
+  const inTableCard = useContext(TableCardCtx);
+  let avatarElement;
+  if (typeof avatar === "string") {
+    avatarElement = looksLikeUrl(avatar) ? /* @__PURE__ */ jsx(Avatar, { src: avatar, alt: primary, size }) : /* @__PURE__ */ jsx(Avatar, { initials: avatar, alt: primary, size });
+  } else if (avatar != null) {
+    avatarElement = avatar;
+  } else if (src) {
+    avatarElement = /* @__PURE__ */ jsx(Avatar, { src, alt: primary, size });
+  } else {
+    avatarElement = /* @__PURE__ */ jsx(Avatar, { initials: initials ?? initialsOf(primary), alt: primary, size });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      href,
       className: cn(
-        "sr-only focus:not-sr-only focus:fixed focus:top-[var(--ds-space-2)] focus:left-[var(--ds-space-2)] focus:z-[var(--ds-z-tooltip)]",
-        "focus:px-[var(--ds-space-3)] focus:py-[var(--ds-space-2)] focus:rounded-[var(--ds-radius-md)] focus:text-sm focus:font-medium",
-        "focus:bg-[var(--ds-bg-surface-elevated)] focus:text-[var(--ds-text-primary)] focus:shadow-[var(--ds-shadow-md)]",
-        "focus:outline-none focus:ring-2 focus:ring-[var(--ds-accent-primary)]",
+        "flex flex-row items-center gap-ds-2",
+        // Inside a Table or DataGrid card (the phone layout) the cell keeps the avatar beside the text and sits
+        // against the value column's right edge; the name may take two lines, the secondary line truncates
+        // (Sprint 25.4, round 7: the owner's call, replacing decision 2's stacked cell).
+        inTableCard && "justify-end text-right",
         className
       ),
-      children
+      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)]",
+            inTableCard ? "line-clamp-2 [overflow-wrap:anywhere]" : "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 useCompact(ref, breakpoint) {
-  const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
-  const width = useElementWidth(ref);
-  return width > 0 && width < px;
-}
-function useElementWidth(ref) {
-  const [width, setWidth] = useState(0);
-  const check = useCallback(() => {
-    const next = ref.current?.offsetWidth ?? 0;
-    if (next > 0) setWidth(next);
-  }, [ref]);
-  useLayoutEffect(() => {
-    check();
-    if (!ref.current || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(check);
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [check, ref]);
-  return width;
-}
 function TableToolbar({
   search,
   primaryFilter,
@@ -6839,7 +6886,9 @@ 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: [
+  const inPane = useContext(SplitPaneCtx);
+  const searchFills = inPane || !primaryFilter && !filters && !actions;
+  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,
@@ -6849,7 +6898,7 @@ function TableToolbar({
           value: search.value,
           size,
           onChange: (e) => search.onChange(e.target.value),
-          className: "flex-1 min-w-[160px] max-w-[280px]"
+          className: cn("flex-1 min-w-[160px]", !searchFills && "max-w-[280px]")
         }
       ),
       primaryFilter && (compact ? /* @__PURE__ */ jsx(
@@ -6872,7 +6921,7 @@ function TableToolbar({
           onChange: primaryFilter.onChange
         }
       )),
-      (filters || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 flex-1 justify-end", children: [
+      (filters || actions) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-2 justify-end", inPane ? "flex-none" : "flex-1"), children: [
         filters && /* @__PURE__ */ jsxs(
           Button,
           {
@@ -6902,7 +6951,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",
@@ -7280,7 +7329,7 @@ function TreeNodeRow({
           isSelected ? "bg-[var(--ds-tree-active-bg)] text-[var(--ds-tree-active-text)] font-medium border-[var(--ds-accent-primary)]" : "border-transparent text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
-        style: { paddingLeft: `calc(var(--ds-space-5) * ${depth} + var(--ds-space-2))` },
+        style: { paddingLeft: `calc(var(--ds-space-3) * ${depth} + var(--ds-space-2))` },
         onClick: () => {
           if (node.disabled) return;
           if (checkable) handleCheck(node);
@@ -7924,51 +7973,6 @@ function ChatPanel({
     )
   ] });
 }
-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 TOAST_INSET_VARS = {
   "bottom-right": "--ds-toast-inset-bottom-right",
   "bottom-left": "--ds-toast-inset-bottom-left",
@@ -8019,194 +8023,6 @@ function useCornerInset(corner, inset, priority, target) {
     return claimCornerInset(corner, inset, priority, el);
   }, [corner, inset, priority, target]);
 }
-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 DEFAULT_OFFSET = "var(--ds-space-4)";
 var CORNER_PANEL_ANCHOR_INSET = "calc(var(--ds-space-12) + var(--ds-space-3))";
 function CornerPanel({
@@ -8319,494 +8135,6 @@ function CornerWindow({ open, onClose, edge, align, width, height, offset, ancho
     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);
-}
-function useDirtyGuard(dirty, onClose, onDiscard) {
-  const [confirming, setConfirming] = useState(false);
-  useEffect(() => {
-    if (!dirty) setConfirming(false);
-  }, [dirty]);
-  const requestClose = useCallback(() => {
-    if (!dirty) {
-      onClose();
-      return;
-    }
-    setConfirming((c) => !c);
-  }, [dirty, onClose]);
-  const keep = useCallback(() => setConfirming(false), []);
-  const discard = useCallback(() => {
-    setConfirming(false);
-    onDiscard?.();
-    onClose();
-  }, [onClose, onDiscard]);
-  return { confirming, requestClose, keep, discard };
-}
-function DiscardConfirm({ open, onKeep, onDiscard }) {
-  const keepRef = useRef(null);
-  const returnTo = useRef(null);
-  const overlay = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    overlay.current = keepRef.current?.closest("[role='dialog'], [role='alertdialog']") ?? null;
-    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;
-    keepRef.current?.focus();
-    return () => {
-      if (document.activeElement !== document.body) return;
-      const back = returnTo.current;
-      if (back && back.isConnected) {
-        back.focus();
-        return;
-      }
-      const first = overlay.current?.querySelector("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
-      (first ?? overlay.current)?.focus();
-    };
-  }, [open]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      "aria-label": "Unsaved changes",
-      "data-discard-confirm": "",
-      className: "shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]",
-      style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-      children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--ds-text-primary)]", children: "You have unsaved changes." }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-          /* @__PURE__ */ jsx(Button, { ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
-          /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
-        ] })
-      ]
-    }
-  );
-}
-var slideClasses = {
-  right: {
-    panel: "top-0 right-0 h-full",
-    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 });
-  if (isPhone && mobileMode === "sheet") {
-    return /* @__PURE__ */ jsx(Sheet, { open, onClose: guard.requestClose, title, footer, confirm, container, flush, snapPoints, keepMounted, id, labelledBy, children });
-  }
-  return /* @__PURE__ */ jsx(DrawerPanel, { ...props, onClose: guard.requestClose, confirm });
-}
-function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth, 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
-  );
-}
-var AppShellContext = createContext(null);
-function useAppShell() {
-  return useContext(AppShellContext);
-}
-var AppShell = forwardRef(function AppShell2({
-  layout = "sidebar",
-  sidebar,
-  mobileMenu,
-  mobileMenuWidth,
-  mobileMenuLightBackdrop,
-  mobileMenuFlush = true,
-  navbar,
-  mobileNav,
-  footer,
-  skipLink = true,
-  mainId = "main",
-  aside,
-  asideSide = "right",
-  launcher,
-  children,
-  className,
-  scrollable = true,
-  theme,
-  currentPath,
-  homePath = "/"
-}, ref) {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [asideOpen, setAsideOpen] = useState(false);
-  const [asideFloating, setAsideFloating] = useState(false);
-  const isMobile = useBreakpoint("md");
-  const isSmallMobile = useBreakpoint("sm");
-  const isTablet = isMobile && !isSmallMobile;
-  const autoCollapsed = useBreakpoint("lg");
-  const [userCollapsed, setUserCollapsed] = useState(null);
-  const sidebarCollapsed = userCollapsed ?? autoCollapsed;
-  const hasSidebar = (layout === "sidebar" || layout === "sidebar-header") && sidebar != null;
-  const hasMobileMenu = mobileMenu != null;
-  const hasMobileNav = mobileNav != null;
-  const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
-  const [shellEl, setShellEl] = useState(null);
-  const [chrome, setChrome] = useState({});
-  const registerChrome = useCallback((kind, position) => {
-    setChrome((c) => c[kind] === position ? c : { ...c, [kind]: position });
-    return () => setChrome((c) => {
-      if (!(kind in c)) return c;
-      const next = { ...c };
-      delete next[kind];
-      return next;
-    });
-  }, []);
-  const navbarFloating = (chrome.navbar ?? theme?.navbarPosition) === "floating";
-  const sidebarFloating = hasSidebar && !isMobile && (chrome.sidebar ?? theme?.sidebarPosition) === "floating";
-  const isHome = currentPath != null && currentPath === homePath;
-  return /* @__PURE__ */ jsx(
-    AppShellContext,
-    {
-      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome },
-      children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
-        setShellEl(el);
-        if (typeof ref === "function") ref(el);
-        else if (ref) ref.current = el;
-      }, className: cn("relative h-screen flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden", className), children: [
-        skipLink && /* @__PURE__ */ jsx(SkipLink, { href: `#${mainId}` }),
-        layout === "sidebar-header" && navbar,
-        layout === "multi-column" && navbar,
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
-          hasSidebar && !isMobile && /* @__PURE__ */ jsx("div", { className: "shrink-0 h-full", children: sidebar }),
-          aside && asideSide === "left" && aside,
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [
-            layout === "sidebar" && navbar,
-            layout === "stacked" && navbar,
-            /* @__PURE__ */ jsx(
-              "main",
-              {
-                id: mainId,
-                tabIndex: -1,
-                className: cn(
-                  "flex-1 min-h-0 focus:outline-none",
-                  scrollable ? "overflow-y-auto" : "relative",
-                  layout === "multi-column" && "flex"
-                ),
-                style: { containerType: "inline-size" },
-                children: scrollable ? footer ? /* @__PURE__ */ jsxs("div", { className: "min-h-full flex flex-col", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
-                  footer
-                ] }) : children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
-              }
-            )
-          ] }),
-          aside && asideSide === "right" && aside
-        ] }),
-        showMobileDrawer && isMobile && /* @__PURE__ */ jsx(
-          Drawer,
-          {
-            open: sidebarOpen,
-            onClose: () => setSidebarOpen(false),
-            position: "left",
-            width: mobileMenuWidth ?? "var(--ds-drawer-width)",
-            container: shellEl ?? void 0,
-            flush: mobileMenuFlush,
-            lightBackdrop: mobileMenuLightBackdrop,
-            topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
-            children: mobileMenu
-          }
-        ),
-        isSmallMobile && mobileNav && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-[var(--ds-z-sticky)]", children: mobileNav }),
-        !isSmallMobile && launcher
-      ] })
-    }
-  );
-});
 var FALLBACK_MIN_PX = 320;
 var GUTTER = "var(--ds-space-3)";
 function AsidePanel({
@@ -8968,14 +8296,30 @@ function TruncText({ children, className }) {
   if (!isTruncated) return text;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: text });
 }
+var warnedLegacyProps = false;
 var StackedList = forwardRef(function StackedList2({
   items,
   divided = true,
-  flush = false,
+  variant: variantProp,
   selectedId,
-  hover = "tint",
-  className
+  className,
+  flush,
+  hover
 }, ref) {
+  const isPhone = useBreakpoint("sm");
+  const inCard = useContext(CardSurfaceCtx);
+  const inPane = useContext(SplitPaneCtx);
+  const variant = variantProp ?? (flush || hover === "title" ? "articles" : "list");
+  const legacy = flush !== void 0 || hover !== void 0;
+  useEffect(() => {
+    if (!legacy || warnedLegacyProps) return;
+    warnedLegacyProps = true;
+    console.warn('StackedList: `flush` and `hover` are deprecated \u2014 pass variant="articles" for an article list; the default variant takes its inset from the pane or card it sits in.');
+  }, [legacy]);
+  const articles = variant === "articles";
+  const stackMeta = isPhone && articles;
+  const selectable = selectedId !== void 0 || items.some((i) => i.selected !== void 0);
+  const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
   return /* @__PURE__ */ jsx(
     "ul",
     {
@@ -8992,6 +8336,9 @@ var StackedList = forwardRef(function StackedList2({
         const multiline = !!item.description;
         const trailing = item.unread || item.meta ? /* @__PURE__ */ jsxs("div", { className: cn(
           "shrink-0 flex items-center gap-ds-2 text-sm",
+          // Below sm an article's meta sits under the title, left-aligned, whatever alignment its own markup
+          // carries (round 6: a builder's items-end column put its badge mid-row).
+          stackMeta && "self-start [&>*]:items-start! [&>*]:text-left!",
           isSelected ? "text-[var(--ds-nav-v-active-muted)]" : "text-[var(--ds-text-muted)]"
         ), children: [
           item.unread && /* @__PURE__ */ jsx(
@@ -9010,18 +8357,20 @@ var StackedList = forwardRef(function StackedList2({
             className: cn(
               "flex gap-ds-3 py-ds-3",
               multiline ? "items-start" : "items-center",
-              flush ? "px-0" : "px-ds-5",
+              inset,
               interactive && [
                 "cursor-pointer [transition:var(--ds-transition-interactive)]",
                 "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
               ],
-              // Same colours as the vertical Tabs item — the theme's in-page vertical
-              // style decides rail, tint or pill via the --ds-nav-v-* tokens — but a
-              // list row is a full-width band: no radius, ever, and a heavier rail
-              // (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 === "tint" && "hover:bg-[var(--ds-tab-hover-bg)]", interactive && hover === "title" && "group/row")
+              // list: same colours as the vertical Tabs item — the theme's in-page vertical style decides rail, tint
+              // or pill via the --ds-nav-v-* tokens — but a list row is a full-width band: no radius, ever, and a
+              // heavier rail (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, and the inset keeps content off the rail.
+              // articles: no rail, no tint; the title answers the pointer and the current row.
+              // The placeholder exists only where a selection can appear, so a plain canvas list aligns exactly with its heading.
+              !articles && selectable && "border-l-[length:calc(var(--ds-nav-v-active-rail)*1.5)]",
+              !articles && (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)]")),
+              articles && interactive && "group/row"
             ),
             onClick: item.onClick,
             role: interactive ? "button" : void 0,
@@ -9036,25 +8385,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", stackMeta ? "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)]",
-                        // 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"
+                        isSelected ? articles ? "font-medium text-[var(--ds-accent-primary)]" : "font-medium text-[var(--ds-nav-v-active-text)]" : hasEmphasis && !item.unread ? "text-[var(--ds-text-secondary)]" : "font-medium text-[var(--ds-text-primary)]",
+                        // articles: the title answers the pointer (accent, underline) instead of the row's background
+                        articles && interactive && !isSelected && "transition-colors group-hover/row:text-[var(--ds-accent-primary)] group-hover/row:underline underline-offset-2"
                       ),
                       children: item.title
                     }
                   ),
-                  multiline && trailing
+                  (multiline || stackMeta) && 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 && !stackMeta && trailing,
               item.actions && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -9363,6 +8712,100 @@ function trackClasses(orientation) {
     "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
   );
 }
+var FADE = 24;
+function useScrollTrack(activeTab, enabled) {
+  const ref = useRef(null);
+  const [edges, setEdges] = useState({ left: false, right: false });
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const left = el.scrollLeft > 1;
+    const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+    setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+  }, []);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    measure();
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled, measure]);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    const tab = el?.querySelector('[role="tab"][aria-selected="true"]');
+    if (!el || !tab) return;
+    const start = tab.offsetLeft;
+    const end = start + tab.offsetWidth;
+    if (start < el.scrollLeft + FADE) el.scrollLeft = Math.max(0, start - FADE);
+    else if (end > el.scrollLeft + el.clientWidth - FADE) el.scrollLeft = end - el.clientWidth + FADE;
+    measure();
+  }, [activeTab, enabled, measure]);
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+      el.scrollLeft += e.deltaY;
+      e.preventDefault();
+    };
+    let startX = 0, startLeft = 0, dragged = false, down = false;
+    const onDown = (e) => {
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      down = true;
+      dragged = false;
+      startX = e.clientX;
+      startLeft = el.scrollLeft;
+    };
+    const onMove = (e) => {
+      if (!down) return;
+      const dx = e.clientX - startX;
+      if (!dragged && Math.abs(dx) < 5) return;
+      if (!dragged) {
+        dragged = true;
+        el.setPointerCapture?.(e.pointerId);
+      }
+      el.scrollLeft = startLeft - dx;
+    };
+    const onUp = (e) => {
+      if (dragged) el.releasePointerCapture?.(e.pointerId);
+      down = false;
+    };
+    const onClick = (e) => {
+      if (dragged) {
+        e.stopPropagation();
+        e.preventDefault();
+        dragged = false;
+      }
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointercancel", onUp);
+    el.addEventListener("click", onClick, true);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointercancel", onUp);
+      el.removeEventListener("click", onClick, true);
+    };
+  }, [enabled]);
+  const fade = enabled ? [edges.left && "left", edges.right && "right"].filter(Boolean).join(" ") : "";
+  const mask = fade ? `linear-gradient(to right, ${edges.left ? `transparent 0, black ${FADE}px` : "black 0"}, ${edges.right ? `black calc(100% - ${FADE}px), transparent 100%` : "black 100%"})` : void 0;
+  return {
+    ref,
+    onScroll: measure,
+    "data-fade": fade || void 0,
+    style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0
+  };
+}
+var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-w-full";
 function getTabsFromDOM(el) {
   const tablist = el.closest('[role="tablist"]');
   if (!tablist) return [];
@@ -9502,7 +8945,8 @@ function TabButton({
   return btn;
 }
 function TabsList({ children, className }) {
-  const { orientation, fullWidth, overflow } = useTabsCtx();
+  const { orientation, fullWidth, overflow, activeTab } = useTabsCtx();
+  const track = useScrollTrack(activeTab, orientation === "horizontal" && overflow === "scroll");
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -9518,10 +8962,11 @@ function TabsList({ children, className }) {
     "div",
     {
       role: "tablist",
+      ...overflow === "scroll" ? track : {},
       className: cn(
         trackClasses("horizontal"),
         "max-w-full",
-        overflow === "hidden" ? "overflow-hidden" : overflow === "truncate" ? "overflow-hidden" : "overflow-x-auto overflow-y-hidden",
+        overflow === "hidden" ? "overflow-hidden" : overflow === "truncate" ? "overflow-hidden" : SCROLL_TRACK,
         fullWidth && "w-full",
         className
       ),
@@ -9575,6 +9020,9 @@ function TabsRoot(props) {
   } = props;
   const isMobile = useBreakpoint("md");
   const effectiveOrientation = orientation === "responsive" ? "vertical" : orientation;
+  const arrayApi = "tabs" in props && !!props.tabs;
+  const arrayOverflow = arrayApi && props.tabs.some((t) => t.truncate) ? "truncate" : overflow;
+  const track = useScrollTrack(activeTab, arrayApi && effectiveOrientation === "horizontal" && arrayOverflow === "scroll");
   if ("tabs" in props && props.tabs) {
     const { tabs, mobile = "scroll" } = props;
     const collapseToDropdown = isMobile && (orientation === "responsive" || mobile === "dropdown");
@@ -9613,14 +9061,15 @@ function TabsRoot(props) {
         }
       );
     }
-    const effectiveOverflow = tabs.some((t) => t.truncate) ? "truncate" : overflow;
+    const effectiveOverflow = arrayOverflow;
     return /* @__PURE__ */ jsx(
       "div",
       {
         role: "tablist",
+        ...effectiveOverflow === "scroll" ? track : {},
         className: cn(
           trackClasses("horizontal"),
-          effectiveOverflow === "scroll" ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden",
+          effectiveOverflow === "scroll" ? SCROLL_TRACK : "overflow-hidden",
           fullWidth && "w-full",
           className
         ),
@@ -9678,61 +9127,6 @@ function SettingsLayout({
     /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
   ] });
 }
-function SplitView({
-  list,
-  detail,
-  aside,
-  asideTitle = "Details",
-  detailOpen = false,
-  onDetailClose,
-  detailMode = "stack",
-  backLabel = "Back",
-  listWidth = 35,
-  listMinWidth = 25,
-  asideWidth = 25,
-  collapseBelow = 768,
-  asideCollapseBelow = 1024,
-  bordered = false,
-  "aria-label": ariaLabel,
-  className
-}) {
-  const rootRef = useRef(null);
-  const compact = useCompact(rootRef, collapseBelow);
-  const asideCollapsed = useCompact(rootRef, asideCollapseBelow);
-  const [asideOpen, setAsideOpen] = useState(false);
-  useEffect(() => {
-    if (!asideCollapsed) setAsideOpen(false);
-  }, [asideCollapsed]);
-  const region = ariaLabel ? { role: "region", "aria-label": ariaLabel } : {};
-  const surface = cn(
-    "h-full min-h-0 w-full bg-[var(--ds-bg-surface)]",
-    bordered && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden",
-    className
-  );
-  if (compact) {
-    const showDetail = detailMode === "stack" && detailOpen;
-    return /* @__PURE__ */ jsx("div", { ref: rootRef, "data-split-view": showDetail ? "detail" : "list", ...region, className: cn(surface, "flex flex-col"), children: showDetail ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "shrink-0 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: 14 }), onClick: onDetailClose, children: backLabel }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: detail })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: list }) });
-  }
-  const asideToggle = aside && asideCollapsed ? /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-end px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "info", size: 14 }), onClick: () => setAsideOpen(true), "aria-expanded": asideOpen, children: asideTitle }) }) : null;
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-split-view": "split", ...region, className: surface, children: [
-    /* @__PURE__ */ jsxs(ResizablePanelGroup, { direction: "horizontal", stackOnMobile: false, className: "h-full", children: [
-      /* @__PURE__ */ jsx(ResizablePanel, { id: "list", defaultSize: `${listWidth}%`, minSize: `${listMinWidth}%`, children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 overflow-y-auto", children: list }) }),
-      /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
-      /* @__PURE__ */ jsx(ResizablePanel, { id: "detail", minSize: "30%", children: /* @__PURE__ */ jsxs("div", { className: "h-full min-h-0 flex flex-col", children: [
-        asideToggle,
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: detail })
-      ] }) }),
-      aside && !asideCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
-        /* @__PURE__ */ jsx(ResizablePanel, { id: "aside", defaultSize: `${asideWidth}%`, minSize: "15%", children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 overflow-y-auto", children: aside }) })
-      ] })
-    ] }),
-    aside && asideCollapsed && /* @__PURE__ */ jsx(Drawer, { open: asideOpen, onClose: () => setAsideOpen(false), title: asideTitle, position: "right", children: aside })
-  ] });
-}
 function SeparatorIcon({ type, size }) {
   const iconSize = size === "sm" ? 10 : 12;
   if (type === "chevron") return /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: iconSize });
@@ -9984,6 +9378,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
         "div",
         {
           ref: floatingRef,
+          "data-gs": "popover",
           className: cn(
             "fixed z-[var(--ds-z-popover)]",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -10143,7 +9538,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)]",
@@ -10579,9 +9974,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 });
 }
@@ -11054,7 +10451,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,
             {
@@ -11228,7 +10625,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 = {
@@ -11258,6 +10656,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)]",
@@ -11273,6 +10676,26 @@ 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;
+var ROW_MAX = 56;
+function firstCardIn(el) {
+  let cur = el;
+  for (let depth = 0; cur && depth < 6; depth++) {
+    if (cur.hasAttribute("data-card")) return cur;
+    cur = cur.firstElementChild;
+  }
+  return null;
+}
+function overlapCard(column) {
+  if (!column) return null;
+  for (const child of Array.from(column.children)) {
+    const card = firstCardIn(child);
+    if (card) return card;
+    if (child.getBoundingClientRect().height > ROW_MAX) return null;
+  }
+  return null;
+}
 function floatingBlockPadding(navbarFloating, sidebarFloating, overlap) {
   return {
     paddingTop: navbarFloating ? 0 : "var(--ds-space-3)",
@@ -11307,7 +10730,51 @@ var PageContainer = forwardRef(function PageContainer2({
   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;
+    };
+    const column2 = columnRef.current;
+    const card = overlapActive ? overlapCard(column2) : null;
+    if (!card || !column2) {
+      stop();
+      rootRef.current?.style.removeProperty("--ds-overlap");
+      rootRef.current?.style.removeProperty("--ds-overlap-gap");
+      return;
+    }
+    if (observedRef.current?.target === card) return;
+    stop();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const cardHeight = card.getBoundingClientRect().height || (entries.find((e) => e.target === card)?.contentRect.height ?? 0);
+      const rowsAbove = Math.max(0, Math.round(card.getBoundingClientRect().top - column2.getBoundingClientRect().top));
+      const half = Math.min(OVERLAP_MAX, Math.max(OVERLAP_MIN, Math.round(cardHeight / 2)));
+      rootRef.current?.style.setProperty("--ds-overlap", `${rowsAbove + half}px`);
+      rootRef.current?.style.setProperty("--ds-overlap-gap", "0px");
+    });
+    ro.observe(card);
+    ro.observe(column2);
+    observedRef.current = { target: card, ro };
+  });
+  useEffect(() => () => {
+    observedRef.current?.ro.disconnect();
+    observedRef.current = null;
+  }, []);
+  if (headerIdx === -1 || !headerEl || !r) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -11315,23 +10782,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";
@@ -11340,22 +10800,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, setPinnedHeight }, 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 });
+  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, overlap > 0), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, 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: [
@@ -11496,7 +10952,6 @@ var PageHeader = forwardRef(function PageHeader2({
   behavior: behaviorProp,
   intensity: intensityProp,
   backgroundImage,
-  overlapHeight,
   expandedContent,
   collapseOffset = 100,
   pinned = true,
@@ -11535,6 +10990,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,
@@ -11554,7 +11010,7 @@ var PageHeader = forwardRef(function PageHeader2({
         variant,
         intensity,
         backgroundImage,
-        overlapHeight,
+        overlapActive,
         tabs,
         breadcrumbPill: bcPill,
         breadcrumbSeparator: bcSep,
@@ -11608,7 +11064,7 @@ var PageHeader = forwardRef(function PageHeader2({
         filters,
         intensity,
         backgroundImage,
-        overlapHeight,
+        overlapActive,
         contentMaxWidth,
         breadcrumbPill: bcPill,
         breadcrumbSeparator: bcSep,
@@ -11643,7 +11099,6 @@ var PageHeader = forwardRef(function PageHeader2({
     );
   }
   if (isFloating) {
-    const overlapActive = variant === "colourful" && !!overlapHeight;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -11724,7 +11179,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 }) })
         ] })
       ]
     }
@@ -11752,7 +11207,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 }) })
     ] })
   ] }) });
 }
@@ -11767,7 +11222,7 @@ function ColourfulHeader({
   filters,
   intensity = "bold",
   backgroundImage,
-  overlapHeight,
+  overlapActive,
   contentMaxWidth,
   breadcrumbPill,
   breadcrumbSeparator,
@@ -11785,7 +11240,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)]",
@@ -11795,6 +11250,7 @@ function ColourfulHeader({
         ) : isBold ? "border-b-[2px] border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)]" : "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         className
       ),
+      style: overlapActive && !isFloating && !noBottomMargin ? { marginBottom: "var(--ds-overlap-gap, var(--ds-space-6))" } : void 0,
       children: [
         backgroundImage && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -11820,7 +11276,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 }),
@@ -11847,7 +11303,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 }) })
             ]
           }
         )
@@ -11871,7 +11327,7 @@ function SnappingHeader({
   variant = "default",
   intensity = "bold",
   backgroundImage,
-  overlapHeight,
+  overlapActive,
   tabs,
   breadcrumbPill,
   breadcrumbSeparator,
@@ -11890,9 +11346,11 @@ function SnappingHeader({
   const stickyRef = useRef(null);
   const setStickyRef = useCallback((node) => {
     stickyRef.current = node;
+  }, []);
+  const mergedRef = headerRef ? (node) => {
+    setStickyRef(node);
     if (typeof headerRef === "function") headerRef(node);
-    else if (headerRef) headerRef.current = node;
-  }, [headerRef]);
+  } : setStickyRef;
   useLayoutEffect(() => {
     const report = container?.setPinnedHeight;
     if (!report) return;
@@ -11979,7 +11437,7 @@ function SnappingHeader({
   const headerEl = /* @__PURE__ */ jsxs(
     "header",
     {
-      ref: !isFloating ? setStickyRef : void 0,
+      ref: !isFloating ? mergedRef : 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)]"),
@@ -11991,12 +11449,13 @@ 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,
         className
       ),
+      style: !collapsed && isColourful && overlapActive && !(isFloating && !wrapperHasCard) && !wrapperHasCard ? { marginBottom: "var(--ds-overlap-gap, var(--ds-space-6))" } : void 0,
       children: [
         !collapsed && isColourful && backgroundImage && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -12021,9 +11480,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(
@@ -12033,11 +11492,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(
@@ -12088,9 +11547,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 })
               ]
@@ -12105,7 +11564,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)",
@@ -12117,7 +11575,7 @@ function SnappingHeader({
       /* @__PURE__ */ jsx(
         "div",
         {
-          ref: setStickyRef,
+          ref: mergedRef,
           className: cn(
             pinned && collapsed && "sticky z-[calc(var(--ds-z-sticky,40)-1)]",
             pinned && collapsed && "top-0"
@@ -12324,205 +11782,6 @@ function Dock({
     }
   );
 }
-function resolveNavItemType(type) {
-  return type === "default" ? "tint" : type;
-}
-var NavbarTypeContext = createContext("tint");
-var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
-  const contextType = useContext(NavbarTypeContext);
-  const type = resolveNavItemType(typeProp ?? contextType);
-  const baseClasses = cn(
-    "inline-flex items-center gap-ds-2 cursor-pointer select-none",
-    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-    "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-    "text-[length:var(--ds-font-size-sm)]"
-  );
-  const typeClasses = getTypeClasses(type, active);
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      ref,
-      href: href ?? "#",
-      onClick,
-      "aria-current": active ? "page" : void 0,
-      className: cn(baseClasses, typeClasses, className),
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }),
-        children ?? label,
-        type === "underline" && active && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "absolute bottom-0 left-ds-1 right-ds-1 rounded-t-full bg-[var(--ds-accent-primary)]",
-            style: { height: "2px" }
-          }
-        )
-      ]
-    }
-  );
-});
-function getTypeClasses(type, active) {
-  switch (type) {
-    case "pill":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-    case "underline":
-      return cn(
-        "px-ds-2 py-ds-2 relative",
-        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
-      );
-    case "minimal":
-      return cn(
-        "px-ds-2 py-ds-1",
-        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
-      );
-    case "tint":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-  }
-}
-function HamburgerButton({ onClick, open, className: cls }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick,
-      "aria-label": open ? "Close navigation menu" : "Open navigation menu",
-      "aria-expanded": open ?? void 0,
-      className: cn(
-        "flex items-center justify-center shrink-0",
-        "w-10 h-10 rounded-[var(--ds-radius-md)]",
-        "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
-        "hover:bg-[var(--ds-bg-muted)] transition-colors",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        "cursor-pointer",
-        cls
-      ),
-      children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "menu", size: 20 })
-    }
-  );
-}
-var Navbar = forwardRef(function Navbar2({
-  logo,
-  navLinks,
-  search,
-  actions,
-  userMenu,
-  variant = "default",
-  type: typeProp = "tint",
-  align = "left",
-  size,
-  position = "flush",
-  bordered,
-  sticky = true,
-  className,
-  onMenuClick
-}, ref) {
-  const appShell = useAppShell();
-  useLayoutEffect(() => appShell?.registerChrome("navbar", position), [appShell?.registerChrome, position]);
-  const isSmallPhone = appShell?.isMobile && !appShell.isTablet;
-  const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
-  const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
-  const hideNavLinks = appShell?.isMobile && (appShell.hasMobileMenu || appShell.hasMobileNav);
-  const type = resolveNavItemType(typeProp);
-  const isMinimal = type === "minimal";
-  const isFloating = position === "floating";
-  const resolvedSize = size ?? (variant === "compact" ? "sm" : "md");
-  const heightClass = resolvedSize === "sm" ? "min-h-[var(--ds-navbar-height-compact)]" : resolvedSize === "lg" ? "min-h-[var(--ds-size-14,3.5rem)]" : "min-h-[var(--ds-navbar-height)]";
-  const hasBorder = bordered ?? (!isFloating && variant !== "transparent" && !isMinimal);
-  const bgClasses = isMinimal ? "bg-transparent" : variant === "transparent" ? "bg-transparent" : variant === "elevated" ? cn(
-    "bg-[var(--ds-bg-surface)]",
-    "text-[var(--ds-text-primary)]",
-    "shadow-[var(--ds-shadow-elevated)]",
-    hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
-  ) : variant === "blurred" ? cn(
-    "bg-[var(--ds-bg-canvas)]/80 [backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-    "text-[var(--ds-text-primary)]",
-    hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
-  ) : cn(
-    "bg-[var(--ds-bg-surface)]",
-    "text-[var(--ds-text-primary)]",
-    hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-    GLASS_BACKDROP
-  );
-  const isMobile = appShell?.isMobile;
-  const padStyle = resolvedSize === "sm" ? "var(--ds-space-2) var(--ds-space-4)" : resolvedSize === "lg" ? `var(--ds-space-2) var(${isMobile ? "--ds-space-3" : "--ds-space-6"})` : `var(--ds-space-1) var(${isMobile ? "--ds-space-3" : "--ds-space-6"})`;
-  const floatingClasses = isFloating ? cn("rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", GLASS_SURFACE) : void 0;
-  let headerEl;
-  if (align === "center") {
-    headerEl = /* @__PURE__ */ jsxs(
-      "header",
-      {
-        ref: isFloating ? void 0 : ref,
-        className: cn(
-          "shrink-0 grid grid-cols-[1fr_auto_1fr] items-center z-[var(--ds-z-sticky)]",
-          !isFloating && sticky && "sticky top-0",
-          bgClasses,
-          heightClass,
-          floatingClasses,
-          !isFloating && className
-        ),
-        style: { padding: padStyle, gap: "var(--ds-space-4)" },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4", children: [
-            showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
-            logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: logo })
-          ] }),
-          navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-ds-2 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: navLinks }) }) : /* @__PURE__ */ jsx("div", {}),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 justify-end", children: [
-            search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
-            actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
-            userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
-          ] })
-        ]
-      }
-    );
-  } else {
-    headerEl = /* @__PURE__ */ jsxs(
-      "header",
-      {
-        ref: isFloating ? void 0 : ref,
-        className: cn(
-          "shrink-0 flex items-center z-[var(--ds-z-sticky)]",
-          !isFloating && sticky && "sticky top-0",
-          bgClasses,
-          heightClass,
-          floatingClasses,
-          !isFloating && className
-        ),
-        style: { padding: padStyle, gap: "var(--ds-space-4)" },
-        children: [
-          showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
-          logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: logo }),
-          align === "right" && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-          navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-ds-2 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: navLinks }) }),
-          (!navLinks || hideNavLinks) && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-          search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
-          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
-          userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
-        ]
-      }
-    );
-  }
-  if (isFloating) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "shrink-0 z-[var(--ds-z-sticky)]",
-          sticky && "sticky top-0",
-          className
-        ),
-        style: { padding: "var(--ds-space-3)" },
-        children: headerEl
-      }
-    );
-  }
-  return headerEl;
-});
 function TruncSpan({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: cn("truncate", className), children });
@@ -12632,6 +11891,7 @@ function NavMenu({
         {
           ref: panelRef,
           role: "menu",
+          "data-gs": "menu",
           className: cn(
             "fixed z-[var(--ds-z-popover)] py-ds-1.5",
             "bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)]",
@@ -12732,6 +11992,286 @@ function NavMenuGroup({
     ))
   ] });
 }
+function resolveNavItemType(type) {
+  return type === "default" ? "tint" : type;
+}
+var NavbarTypeContext = createContext("tint");
+var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
+  const contextType = useContext(NavbarTypeContext);
+  const type = resolveNavItemType(typeProp ?? contextType);
+  const baseClasses = cn(
+    "inline-flex items-center gap-ds-2 cursor-pointer select-none whitespace-nowrap",
+    // one line: the navbar measures each link (round 12)
+    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+    "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+    "text-[length:var(--ds-font-size-sm)]"
+  );
+  const typeClasses = getTypeClasses(type, active);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      href: href ?? "#",
+      onClick,
+      "aria-current": active ? "page" : void 0,
+      className: cn(baseClasses, typeClasses, className),
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }),
+        children ?? label,
+        type === "underline" && active && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute bottom-0 left-ds-1 right-ds-1 rounded-t-full bg-[var(--ds-accent-primary)]",
+            style: { height: "2px" }
+          }
+        )
+      ]
+    }
+  );
+});
+function getTypeClasses(type, active) {
+  switch (type) {
+    case "pill":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+    case "underline":
+      return cn(
+        "px-ds-2 py-ds-2 relative",
+        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+      );
+    case "minimal":
+      return cn(
+        "px-ds-2 py-ds-1",
+        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
+      );
+    case "tint":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+  }
+}
+function HamburgerButton({ onClick, open, className: cls }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      "aria-label": open ? "Close navigation menu" : "Open navigation menu",
+      "aria-expanded": open ?? void 0,
+      className: cn(
+        "flex items-center justify-center shrink-0",
+        "w-10 h-10 rounded-[var(--ds-radius-md)]",
+        "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
+        "hover:bg-[var(--ds-bg-muted)] transition-colors",
+        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        "cursor-pointer",
+        cls
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "menu", size: 20 })
+    }
+  );
+}
+function flattenLinks(node) {
+  const out = [];
+  Children.forEach(node, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Fragment$1) out.push(...flattenLinks(child.props.children));
+    else out.push(child);
+  });
+  return out;
+}
+var Navbar = forwardRef(function Navbar2({
+  logo,
+  navLinks,
+  search,
+  actions,
+  userMenu,
+  variant = "default",
+  type: typeProp = "tint",
+  align = "left",
+  size,
+  position = "flush",
+  bordered,
+  sticky = true,
+  className,
+  onMenuClick
+}, ref) {
+  const appShell = useAppShell();
+  useLayoutEffect(() => appShell?.registerChrome("navbar", position), [appShell?.registerChrome, position]);
+  const isSmallPhone = appShell?.isMobile && !appShell.isTablet;
+  const headerRef = useRef(null);
+  const navRef = useRef(null);
+  const widthsRef = useRef([]);
+  const moreWidthRef = useRef(88);
+  const [visibleCount, setVisibleCount] = useState(null);
+  const links = useMemo(() => flattenLinks(navLinks), [navLinks]);
+  const mobileHidesLinks = !!appShell?.isMobile && (appShell.hasMobileMenu || appShell.hasMobileNav);
+  useEffect(() => {
+    const header = headerRef.current;
+    if (!header || mobileHidesLinks || links.length === 0 || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const nav = navRef.current;
+      if (!nav) return;
+      const items = Array.from(nav.children);
+      for (let i = 0; i < links.length; i++) {
+        const el = items[i];
+        if (el && !el.hasAttribute("hidden") && el.offsetWidth) widthsRef.current[i] = el.offsetWidth;
+      }
+      const more = nav.querySelector("[data-navbar-more]");
+      if (more?.offsetWidth) moreWidthRef.current = more.offsetWidth;
+      const widths = widthsRef.current;
+      if (widths.length < links.length || widths.some((w) => !w)) return;
+      const style = getComputedStyle(header);
+      const gap = parseFloat(style.columnGap) || parseFloat(style.gap) || 0;
+      const kids = Array.from(header.children).filter((el) => el !== nav && !el.hasAttribute("data-navbar-spacer"));
+      const used = kids.reduce((w, el) => w + Math.max(el.offsetWidth, el.scrollWidth), 0);
+      const available = header.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0) - used - gap * kids.length;
+      const linkGap = parseFloat(getComputedStyle(nav).columnGap) || 8;
+      const total = widths.reduce((a, w) => a + w, 0) + linkGap * (links.length - 1);
+      if (total <= available) {
+        setVisibleCount(null);
+        return;
+      }
+      const room = available - moreWidthRef.current - linkGap;
+      let n = 0, acc = 0;
+      for (const w of widths) {
+        const next = acc + (n ? linkGap : 0) + w;
+        if (next > room) break;
+        acc = next;
+        n++;
+      }
+      setVisibleCount(n);
+    };
+    const ro = new ResizeObserver(measure);
+    ro.observe(header);
+    return () => ro.disconnect();
+  }, [mobileHidesLinks, links]);
+  const hidden = useMemo(() => {
+    if (visibleCount === null || links.length === 0) return /* @__PURE__ */ new Set();
+    return new Set(links.map((_, i) => i).filter((i) => i >= visibleCount));
+  }, [visibleCount, links]);
+  const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
+  const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
+  const hideNavLinks = mobileHidesLinks;
+  const type = resolveNavItemType(typeProp);
+  const isMinimal = type === "minimal";
+  const isFloating = position === "floating";
+  const moreItems = links.filter((_, i) => hidden.has(i)).map((el) => {
+    const p = el.props;
+    return { label: p.label ?? "", href: p.href, active: p.active, icon: p.icon };
+  });
+  const linkRow = links.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    links.map((el, i) => hidden.has(i) ? /* @__PURE__ */ jsx("span", { hidden: true, children: el }, el.key ?? i) : el),
+    hidden.size > 0 && /* @__PURE__ */ jsx("div", { "data-navbar-more": "", className: "shrink-0", children: /* @__PURE__ */ jsx(
+      NavMenu,
+      {
+        label: "More",
+        items: moreItems,
+        active: moreItems.some((m) => m.active),
+        type,
+        onItemClick: (item) => {
+          const el = links.find((l) => l.props.label === item.label);
+          el?.props?.onClick?.({});
+        }
+      }
+    ) })
+  ] }) : navLinks;
+  const resolvedSize = size ?? (variant === "compact" ? "sm" : "md");
+  const heightClass = resolvedSize === "sm" ? "min-h-[var(--ds-navbar-height-compact)]" : resolvedSize === "lg" ? "min-h-[var(--ds-size-14,3.5rem)]" : "min-h-[var(--ds-navbar-height)]";
+  const hasBorder = bordered ?? (!isFloating && variant !== "transparent" && !isMinimal);
+  const bgClasses = isMinimal ? "bg-transparent" : variant === "transparent" ? "bg-transparent" : variant === "elevated" ? cn(
+    "bg-[var(--ds-bg-surface)]",
+    "text-[var(--ds-text-primary)]",
+    "shadow-[var(--ds-shadow-elevated)]",
+    hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+  ) : variant === "blurred" ? cn(
+    "bg-[var(--ds-bg-canvas)]/80 [backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+    "text-[var(--ds-text-primary)]",
+    hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+  ) : cn(
+    "bg-[var(--ds-bg-surface)]",
+    "text-[var(--ds-text-primary)]",
+    hasBorder && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+    GLASS_BACKDROP
+  );
+  const isMobile = appShell?.isMobile;
+  const padStyle = resolvedSize === "sm" ? "var(--ds-space-2) var(--ds-space-4)" : resolvedSize === "lg" ? `var(--ds-space-2) var(${isMobile ? "--ds-space-3" : "--ds-space-6"})` : `var(--ds-space-1) var(${isMobile ? "--ds-space-3" : "--ds-space-6"})`;
+  const floatingClasses = isFloating ? cn("rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", GLASS_SURFACE) : void 0;
+  let headerEl;
+  if (align === "center") {
+    headerEl = /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref: mergeRefs(isFloating ? void 0 : ref, headerRef),
+        className: cn(
+          "shrink-0 grid grid-cols-[1fr_auto_1fr] items-center z-[var(--ds-z-sticky)]",
+          !isFloating && sticky && "sticky top-0",
+          bgClasses,
+          heightClass,
+          floatingClasses,
+          !isFloating && className
+        ),
+        style: { padding: padStyle, gap: "var(--ds-space-4)" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 min-w-max", children: [
+            showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
+            logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0 whitespace-nowrap", children: logo })
+          ] }),
+          navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: "flex items-center gap-ds-2 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: linkRow }) }) : /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 justify-end", children: [
+            search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
+            actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
+            userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
+          ] })
+        ]
+      }
+    );
+  } else {
+    headerEl = /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref: mergeRefs(isFloating ? void 0 : ref, headerRef),
+        className: cn(
+          "shrink-0 flex items-center z-[var(--ds-z-sticky)]",
+          !isFloating && sticky && "sticky top-0",
+          bgClasses,
+          heightClass,
+          floatingClasses,
+          !isFloating && className
+        ),
+        style: { padding: padStyle, gap: "var(--ds-space-4)" },
+        children: [
+          showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
+          logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0 whitespace-nowrap", children: logo }),
+          align === "right" && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
+          navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: cn("flex items-center gap-ds-2 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: linkRow }) }),
+          (!navLinks || hideNavLinks) && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
+          search && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: search }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
+          userMenu && /* @__PURE__ */ jsx("div", { className: cn("flex items-center", resolvedSize === "sm" ? "min-w-0 max-w-[180px]" : "shrink-0"), children: userMenu })
+        ]
+      }
+    );
+  }
+  if (isFloating) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "shrink-0 z-[var(--ds-z-sticky)]",
+          sticky && "sticky top-0",
+          className
+        ),
+        style: { padding: "var(--ds-space-3)" },
+        children: headerEl
+      }
+    );
+  }
+  return headerEl;
+});
 function MobileHeaderMenu({ items, type = "tint", onItemClick, className }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col", className), style: { padding: "var(--ds-space-4)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: type === "underline" ? 0 : "var(--ds-space-1)" }, children: items.map((item, i) => /* @__PURE__ */ jsx(
     MobileMenuItem,
@@ -12919,6 +12459,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                     ref: dialogRef,
                     role: alert ? "alertdialog" : "dialog",
                     "aria-modal": "true",
+                    "data-gs": "dialog",
                     "aria-labelledby": titleId,
                     "aria-describedby": description ? descriptionId : void 0,
                     style: { containerType: "inline-size" },
@@ -13820,7 +13361,7 @@ function getPopoverPosition(rect, placement, padding) {
   top = Math.max(8, Math.min(top, window.innerHeight - popH - 8));
   return { top, left };
 }
-var variantStyles5 = {
+var variantStyles4 = {
   default: "border-[var(--ds-border-default)] bg-[var(--ds-bg-surface)]",
   success: "border-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
   warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
@@ -13891,7 +13432,7 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 5e
         GLASS_DROPDOWN,
         "rounded-[var(--ds-radius-md)]",
         "text-sm text-[var(--ds-text-primary)]",
-        variantStyles5[variant]
+        variantStyles4[variant]
       ),
       children: [
         /* @__PURE__ */ jsx(Icon, { name: icon.name, size: 18, className: cn("shrink-0", icon.className) }),
@@ -14024,30 +13565,42 @@ var SectionHeading = forwardRef(function SectionHeading2({
   description,
   actions,
   badge,
+  count,
   tabs,
   bordered = false,
+  variant = "section",
   className
 }, ref) {
+  const isPhone = useBreakpoint("sm");
+  const pane = variant === "pane";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
+      "data-variant": variant,
       className: cn(
-        bordered && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] pb-ds-4",
+        pane ? "shrink-0 px-ds-4 pt-ds-4 pb-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]" : "mb-[var(--ds-heading-gap)]",
+        !pane && 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",
+          // the actions wrap under the title when the two do not fit on one line (round 11: a search Input in a 284 px
+          // pane's actions slot squeezed "Inbox" to "I."); below sm they always stack
+          isPhone && actions ? "flex-col" : "flex-wrap 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 }),
-              badge
+              badge,
+              count !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", children: count })
             ] }),
             description && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)] line-clamp-2", children: description })
           ] }),
-          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0 max-w-full", children: pane ? /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: actions }) : actions })
         ] }),
-        tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: tabs })
+        tabs && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: pane ? /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: tabs }) : tabs })
       ]
     }
   );
@@ -14073,7 +13626,7 @@ var ActionPanel = forwardRef(function ActionPanel2({
           /* @__PURE__ */ jsx("p", { id: titleId, className: "text-sm font-medium text-[var(--ds-text-primary)]", children: title }),
           description && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "shrink-0", "aria-labelledby": titleId, children: action })
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full @sm:w-auto @max-sm:[&>*]:max-w-none", "aria-labelledby": titleId, children: action })
       ]
     }
   );
@@ -14146,6 +13699,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, 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 };
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useFormContext, useSidebar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map