gridsmith-ui 0.9.0 → 0.9.2

package/dist/index.js

@@ -1,165 +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-X27PSHOH.js';
-export { CodeBlock, Divider, Link } from './chunk-X27PSHOH.js';
-import { Badge } from './chunk-PHQWHAT3.js';
-export { Badge } from './chunk-PHQWHAT3.js';
-import { inferColumnKinds } from './chunk-PDZL4A6K.js';
-import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
+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, isValidElement, useLayoutEffect, Children, useId, cloneElement, useMemo, Fragment as Fragment$1, 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 ControlSizeContext = createContext(null);
-var ButtonSizeContext = ControlSizeContext;
-var variantStyles = {
-  default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] text-[var(--ds-text-on-primary)] border-transparent hover:bg-[var(--ds-accent-primary-hover)] hover:brightness-110",
-  secondary: "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)]",
-  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-[var(--ds-control-height-sm)] px-ds-4 py-ds-1 text-xs",
-  md: "h-[var(--ds-control-height-md)] px-ds-6 py-ds-2 text-sm",
-  lg: "h-[var(--ds-control-height-lg)] px-ds-8 py-ds-3 text-base",
-  "icon-xs": "h-ds-6 w-ds-6 p-0",
-  "icon-sm": "h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] p-0",
-  icon: "h-[var(--ds-control-height-md)] w-[var(--ds-control-height-md)] p-0",
-  "icon-lg": "h-[var(--ds-control-height-lg)] w-[var(--ds-control-height-lg)] p-0"
-};
-var linkSizeStyles = {
-  xs: "text-xs",
-  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(ControlSizeContext);
-  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";
 }
@@ -235,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",
@@ -2445,7 +2307,7 @@ function TimePicker({
     )
   ] });
 }
-var sizes2 = {
+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" }
@@ -2479,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(
@@ -2519,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);
@@ -2552,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(
@@ -2660,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]",
@@ -2668,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"
 };
@@ -2718,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",
     {
@@ -2737,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",
@@ -2883,7 +2745,7 @@ function TagInput({
     }
   );
 }
-var sizes3 = {
+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"
@@ -2986,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"
           )
         },
@@ -3429,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)]",
@@ -3474,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
       ),
@@ -3570,974 +3432,56 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
-var CardCtx = createContext(false);
-var CardSurfaceCtx = createContext(false);
-var variantStyles4 = {
-  default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
-  featured: [
-    `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
-    "[transition:var(--ds-transition-ambient)]",
-    "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
-  ].join(" "),
-  interactive: [
-    `bg-[var(--ds-bg-surface)] cursor-pointer ${GLASS_SURFACE}`,
-    "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-    "[transition:var(--ds-transition-interactive)]",
-    "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)] hover:bg-[var(--ds-bg-surface-elevated)]",
-    "hover:scale-[var(--_card-scale)] hover:-translate-y-[var(--ds-hover-lift)]"
-  ].join(" "),
-  outline: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] ${GLASS_SURFACE}`,
-  ghost: "bg-transparent border-none shadow-none"
-};
-var INTERACTIVE_SCALE_CAP = { "--_card-scale": "min(var(--ds-hover-scale), 1.04)" };
-function RadioIndicator({ checked, disabled }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "flex items-center justify-center shrink-0 rounded-[var(--ds-radius-full)]",
-        "h-[18px] w-[18px]",
-        "border-[length:var(--ds-border-width)] bg-[var(--ds-input-bg)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        disabled && "opacity-disabled",
-        checked ? "border-[var(--ds-check-border)]" : "border-[var(--ds-input-border)]"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] transition-transform duration-[var(--ds-transition-speed)]",
-            checked ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] scale-100" : "scale-0"
-          )
-        }
-      )
-    }
-  );
+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 });
+  });
 }
-function CheckboxIndicator({ checked, indeterminate, disabled }) {
-  const filled = checked || indeterminate;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "flex items-center justify-center shrink-0",
-        "h-[18px] w-[18px]",
-        "rounded-[calc(var(--ds-radius-sm)*0.6)]",
-        "border-[2px] transition-all duration-[var(--ds-transition-speed)]",
-        disabled && "opacity-disabled",
-        filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: "12",
-          height: "12",
-          viewBox: "0 0 12 12",
-          fill: "none",
-          className: cn(
-            "text-[var(--ds-check-fg)] transition-opacity",
-            filled ? "opacity-100" : "opacity-0"
-          ),
-          children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
-        }
-      )
-    }
-  );
+var FormCtx = createContext(null);
+function useFormContext() {
+  const ctx = useContext(FormCtx);
+  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
+  return ctx;
 }
-function ToggleIndicator({ checked, disabled }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "relative inline-flex shrink-0 items-center overflow-hidden",
-        "border-[length:var(--ds-border-width)] rounded-[var(--ds-radius-full)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        disabled && "opacity-disabled",
-        checked ? "bg-[var(--ds-accent-primary)] border-transparent" : "bg-[var(--ds-bg-muted)] border-[var(--ds-border-default)]"
-      ),
-      style: { width: 44, height: 24 },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "pointer-events-none inline-block shrink-0 bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-full)] transition-transform",
-          style: {
-            width: 16,
-            height: 16,
-            transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
-          }
-        }
-      )
-    }
-  );
+function collectInvalidFields(form) {
+  const out = [];
+  for (const el of Array.from(form.querySelectorAll("[aria-invalid='true']"))) {
+    const id = el.id || "";
+    const label = id && form.querySelector(`label[for="${CSS.escape(id)}"]`)?.textContent?.replace(/\*\s*$/, "").trim() || el.getAttribute("aria-label") || el.closest("[data-field]")?.querySelector("label")?.textContent?.trim() || id || "A field";
+    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+    const message = described.map((d) => document.getElementById(d)?.textContent?.trim()).find((t) => t && /error|invalid|required|must|enter|choose|select|please/i.test(t)) ?? described.map((d) => document.getElementById(d)?.textContent?.trim()).filter(Boolean).pop() ?? "Needs attention";
+    out.push({ id, label, message });
+  }
+  return out;
 }
-var Card = forwardRef(function Card2({
-  variant = "default",
-  loading = false,
-  selected,
-  selectable,
-  selectType,
-  onSelectedChange,
-  name,
-  indeterminate,
-  disabled = false,
-  checkable = false,
-  className,
-  children,
-  onClick,
-  style,
-  ...props
-}, ref) {
-  const isSelectable = selectable || !!selectType;
-  const isToggle = selectType === "toggle";
-  const hasSelectType = !!selectType;
-  const handleClick = isSelectable && !disabled ? (e) => {
-    onSelectedChange?.(!selected);
-    onClick?.(e);
-  } : onClick;
-  const handleKeyDown = isSelectable && !disabled ? (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onSelectedChange?.(!selected);
-    }
-  } : void 0;
-  const handleCheckableClick = (e) => {
-    e.stopPropagation();
-    onSelectedChange?.(!selected);
-  };
-  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable ? "button" : void 0;
-  const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
-  const showRing = isSelectable && !isToggle && !hasSelectType && selected;
-  const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
-  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-card": "",
-      role,
-      tabIndex: isSelectable ? 0 : void 0,
-      "aria-disabled": isSelectable && disabled ? true : void 0,
-      ...name && selectType === "radio" ? { "data-radio-group": name } : {},
-      style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
-      className: cn(
-        "rounded-[var(--ds-radius-md)] flex flex-col relative",
-        variantStyles4[variant],
-        isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-        isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
-        isSelectable && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        (showRing || hasSelectType && selected) && ACTIVE_RING,
-        hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
-        disabled && "opacity-disabled cursor-not-allowed",
-        className
-      ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      ...ariaAttr,
-      ...props,
-      children: [
-        defaultCheckBadge,
-        indicator && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 z-[1]", children: indicator }),
-        checkable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute top-ds-3 left-ds-3 z-[1] cursor-pointer",
-            onClick: handleCheckableClick,
-            role: "checkbox",
-            "aria-checked": !!selected,
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                onSelectedChange?.(!selected);
-              }
-            },
-            children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
-          }
-        ),
-        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-4 w-1/3" }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
-        ] }) : children }) })
-      ]
-    }
-  );
-});
-var CardHeader = forwardRef(function CardHeader2({ className, children, actions, icon, menuItems, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  const hasActions = actions || menuItems;
-  const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0", children: [
-    actions,
-    menuItems && /* @__PURE__ */ jsx(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors duration-[var(--ds-transition-speed)]"
-            ),
-            onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
-          }
-        ),
-        items: menuItems
-      }
-    )
-  ] }) : null;
-  const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
-  if (hasActions) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 min-w-0", children: [
-        iconBlock,
-        children
-      ] }),
-      actionsBlock
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col space-y-ds-1.5 pr-ds-5 pt-ds-4 last:pb-ds-4", pl, className), ...props, children: [
-    iconBlock,
-    children
-  ] });
-});
-var cardLineClampClasses = {
-  1: "truncate",
-  2: "line-clamp-2",
-  3: "line-clamp-3",
-  4: "line-clamp-4",
-  5: "line-clamp-5",
-  6: "line-clamp-6"
-};
-var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, ...props }, forwardedRef) {
-  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
-  const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
-  const heading = /* @__PURE__ */ jsx(
-    "h3",
-    {
-      ref: (node) => {
-        overflowRef(lines > 0 ? node : null);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", lines > 0 && lineClampClass, className),
-      ...props,
-      children
-    }
-  );
-  if (!isTruncated || lines === 0) return heading;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
-});
-var CardDescription = forwardRef(function CardDescription2({ className, children, lines = 2, ...props }, forwardedRef) {
-  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
-  const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
-  const el = /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref: (node) => {
-        if (lines > 0) overflowRef(node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      className: cn("text-sm text-[var(--ds-text-muted)]", lines > 0 && lineClampClass, className),
-      ...props,
-      children
-    }
-  );
-  if (!isTruncated || lines === 0) return el;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
-});
-var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 pr-ds-5 py-ds-4", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
-});
-var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center pr-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
-});
-function transitionMs(el) {
-  const cs = getComputedStyle(el);
-  const parse = (list) => list.split(",").map((raw) => {
-    const s = raw.trim();
-    if (!s) return 0;
-    const n = parseFloat(s);
-    if (Number.isNaN(n)) return 0;
-    return s.endsWith("ms") ? n : n * 1e3;
-  });
-  const durations = parse(cs.transitionDuration || "0s");
-  const delays = parse(cs.transitionDelay || "0s");
-  let max = 0;
-  durations.forEach((d, i) => {
-    const total = d + (delays[i] ?? delays[0] ?? 0);
-    if (total > max) max = total;
-  });
-  return max;
-}
-function useCloseSettle(open, elRef, onSettled) {
-  const cb = useLatest(onSettled);
-  useEffect(() => {
-    if (open) return;
-    const el = elRef.current;
-    const ms = el ? transitionMs(el) : 0;
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      cb.current();
-    };
-    if (!el || ms === 0) {
-      const t2 = setTimeout(finish, 0);
-      return () => clearTimeout(t2);
-    }
-    const onEnd = (e) => {
-      if (e.target === el) finish();
-    };
-    el.addEventListener("transitionend", onEnd);
-    const t = setTimeout(finish, ms + 50);
-    return () => {
-      el.removeEventListener("transitionend", onEnd);
-      clearTimeout(t);
-    };
-  }, [open, elRef, cb]);
-}
-var STEP = 16;
-var BIG_STEP = 64;
-function clamp(v, min, max) {
-  return Math.min(Math.max(v, min), max);
-}
-function ResizeEdge({ edge, width, min, max, defaultWidth, onResize, label, onDraggingChange, className }) {
-  const [dragging, setDragging] = useState(false);
-  const start = useRef(null);
-  const latestOnResize = useLatest(onResize);
-  const direction = edge === "left" ? -1 : 1;
-  const onPointerDown = useCallback(
-    (e) => {
-      if (e.button !== 0) return;
-      e.preventDefault();
-      start.current = { x: e.clientX, width };
-      setDragging(true);
-      e.currentTarget.setPointerCapture(e.pointerId);
-    },
-    [width]
-  );
-  const onPointerMove = useCallback(
-    (e) => {
-      if (!start.current) return;
-      const next = clamp(start.current.width + direction * (e.clientX - start.current.x), min, max());
-      latestOnResize.current(next);
-    },
-    [direction, min, max, latestOnResize]
-  );
-  const endDrag = useCallback(() => {
-    start.current = null;
-    setDragging(false);
-  }, []);
-  const latestOnDraggingChange = useLatest(onDraggingChange);
-  useEffect(() => {
-    latestOnDraggingChange.current?.(dragging);
-  }, [dragging, latestOnDraggingChange]);
-  useEffect(() => {
-    if (!dragging) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape" || !start.current) return;
-      latestOnResize.current(start.current.width);
-      endDrag();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [dragging, endDrag, latestOnResize]);
-  const onKeyDown = (e) => {
-    const step = e.shiftKey ? BIG_STEP : STEP;
-    let next = null;
-    if (e.key === "ArrowLeft") next = width - direction * step;
-    else if (e.key === "ArrowRight") next = width + direction * step;
-    else if (e.key === "Home") next = min;
-    else if (e.key === "End") next = max();
-    else if (e.key === "Enter") next = defaultWidth;
-    if (next === null) return;
-    e.preventDefault();
-    onResize(clamp(next, min, max()));
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "separator",
-      tabIndex: 0,
-      "aria-orientation": "vertical",
-      "aria-label": label,
-      "aria-valuemin": min,
-      "aria-valuemax": max(),
-      "aria-valuenow": Math.round(width),
-      "data-resize-edge": edge,
-      "data-dragging": dragging || void 0,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
-      onDoubleClick: () => onResize(clamp(defaultWidth, min, max())),
-      onKeyDown,
-      className: cn(
-        // A narrow absolutely-positioned strip over the edge — never a flex child that takes width.
-        "group/edge absolute top-0 bottom-0 z-10 w-ds-2 cursor-col-resize touch-none select-none outline-none",
-        edge === "left" ? "-left-ds-1" : "-right-ds-1",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: cn(
-            "absolute top-0 bottom-0 left-1/2 w-px -translate-x-1/2 transition-[width,background-color] duration-[var(--ds-transition-speed)]",
-            "group-hover/edge:w-[3px] group-hover/edge:bg-[var(--ds-accent-primary)]",
-            "group-focus-visible/edge:w-[3px] group-focus-visible/edge:bg-[var(--ds-accent-primary)]",
-            dragging && "w-[3px] bg-[var(--ds-accent-primary)]"
-          )
-        }
-      )
-    }
-  );
-}
-var remembered = /* @__PURE__ */ new Map();
-function useRememberedWidth(key) {
-  const [width, setWidth] = useState(() => key ? remembered.get(key) ?? null : null);
-  const remember = useCallback(
-    (w) => {
-      setWidth(w);
-      if (!key) return;
-      if (w === null) remembered.delete(key);
-      else remembered.set(key, w);
-    },
-    [key]
-  );
-  return [width, remember];
-}
-function pxOf(length) {
-  if (!length) return null;
-  const m = /^(\d+(?:\.\d+)?)px$/.exec(length.trim());
-  return m ? parseFloat(m[1]) : null;
-}
-function defaultMaxWidth(container) {
-  const base = container instanceof HTMLElement ? container.clientWidth : typeof window !== "undefined" ? window.innerWidth : 1200;
-  return Math.round(base * 0.6);
-}
-function useDirtyGuard(dirty, onClose, onDiscard) {
-  const [confirming, setConfirming] = useState(false);
-  useEffect(() => {
-    if (!dirty) setConfirming(false);
-  }, [dirty]);
-  const requestClose = useCallback(() => {
-    if (!dirty) {
-      onClose();
-      return;
-    }
-    setConfirming((c) => !c);
-  }, [dirty, onClose]);
-  const keep = useCallback(() => setConfirming(false), []);
-  const discard = useCallback(() => {
-    setConfirming(false);
-    onDiscard?.();
-    onClose();
-  }, [onClose, onDiscard]);
-  return { confirming, requestClose, keep, discard };
-}
-function DiscardConfirm({ open, onKeep, onDiscard }) {
-  const keepRef = useRef(null);
-  const returnTo = useRef(null);
-  const overlay = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    overlay.current = keepRef.current?.closest("[role='dialog'], [role='alertdialog']") ?? null;
-    returnTo.current = active && active !== document.body && overlay.current?.contains(active) ? active : null;
-    keepRef.current?.focus();
-    return () => {
-      if (document.activeElement !== document.body) return;
-      const back = returnTo.current;
-      if (back && back.isConnected) {
-        back.focus();
-        return;
-      }
-      const first = overlay.current?.querySelector("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])");
-      (first ?? overlay.current)?.focus();
-    };
-  }, [open]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      "aria-label": "Unsaved changes",
-      "data-discard-confirm": "",
-      className: "shrink-0 flex flex-wrap items-center justify-between gap-ds-3 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-status-warning-bg)]",
-      style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-      children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--ds-text-primary)]", children: "You have unsaved changes." }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-          /* @__PURE__ */ jsx(Button, { ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
-          /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
-        ] })
-      ]
-    }
-  );
-}
-function Sheet({ open, onClose, title, children, footer, confirm, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
-  const titleId = useId();
-  const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(open);
-  const [hidden, setHidden] = useState(!open);
-  const [snapIdx, setSnapIdx] = useState(0);
-  const [dragOffset, setDragOffset] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const dragStartY = useRef(0);
-  const startHeight = useRef(0);
-  const onCloseRef = useLatest(onClose);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) {
-      setMounted(true);
-      setHidden(false);
-      setSnapIdx(0);
-      setDragOffset(0);
-    }
-  }
-  const viewportHeight = useCallback(
-    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
-    [container]
-  );
-  useCloseSettle(open, panelRef, () => {
-    if (keepMounted) setHidden(true);
-    else setMounted(false);
-  });
-  useReturnFocus(open);
-  useEffect(() => {
-    if (!open || !mounted) return;
-    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
-    return () => cancelAnimationFrame(raf);
-  }, [open, mounted]);
-  const isTopLayer = useOverlayLayer(open);
-  useFocusTrap(panelRef, open, isTopLayer);
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    if (!container) lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      if (!container) unlockBodyScroll();
-    };
-  }, [open, container, onCloseRef, isTopLayer]);
-  const handlePointerDown = useCallback((e) => {
-    setDragging(true);
-    dragStartY.current = e.clientY;
-    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * viewportHeight();
-    setDragOffset(0);
-    e.target.setPointerCapture(e.pointerId);
-  }, [snapIdx, snapPoints, viewportHeight]);
-  const handlePointerMove = useCallback((e) => {
-    if (!dragging) return;
-    const delta = dragStartY.current - e.clientY;
-    setDragOffset(delta);
-  }, [dragging]);
-  const handlePointerUp = useCallback(() => {
-    if (!dragging) return;
-    setDragging(false);
-    const currentHeightPx = startHeight.current + dragOffset;
-    const currentFraction = currentHeightPx / viewportHeight();
-    if (currentFraction < snapPoints[0] * 0.6) {
-      onClose();
-      setDragOffset(0);
-      return;
-    }
-    let bestIdx = 0;
-    let bestDist = Math.abs(currentFraction - snapPoints[0]);
-    for (let i = 1; i < snapPoints.length; i++) {
-      const dist = Math.abs(currentFraction - snapPoints[i]);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestIdx = i;
-      }
-    }
-    setSnapIdx(bestIdx);
-    setDragOffset(0);
-  }, [dragging, dragOffset, snapPoints, onClose, viewportHeight]);
-  if (!mounted) return null;
-  const baseHeight = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
-  const heightUnit = container ? "%" : "vh";
-  const dragPx = dragging ? dragOffset : 0;
-  const positionClass = container ? "absolute" : "fixed";
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        hidden: keepMounted && hidden ? true : void 0,
-        className: cn(
-          `${positionClass} inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]`,
-          open ? "pointer-events-auto" : "pointer-events-none"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 bg-black/50 transition-opacity duration-[var(--ds-transition-speed)]",
-                open ? "opacity-100" : "opacity-0"
-              ),
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: panelRef,
-              id,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? titleId : labelledBy,
-              "data-ds-sheet": "",
-              className: cn(
-                `${positionClass} bottom-0 left-0 right-0 z-10 flex flex-col`,
-                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                GLASS_OVERLAY,
-                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                "rounded-t-[var(--ds-radius-xl)]",
-                !dragging && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-                open ? "translate-y-0" : "translate-y-full"
-              ),
-              style: {
-                containerType: "inline-size",
-                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
-                    onPointerDown: handlePointerDown,
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: handlePointerUp,
-                    onPointerCancel: handlePointerUp,
-                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
-                  }
-                ),
-                title && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
-                    children: [
-                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto",
-                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
-                    children
-                  }
-                ),
-                confirm,
-                footer && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-                    children: footer
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    container ?? document.body
-  );
-}
-var DrawerFooterCtx = createContext(null);
-var slideClasses = {
-  right: {
-    panel: "top-0 right-0 h-full",
-    open: "translate-x-0",
-    closed: "translate-x-full"
-  },
-  left: {
-    panel: "top-0 left-0 h-full",
-    open: "translate-x-0",
-    closed: "-translate-x-full"
-  },
-  bottom: {
-    panel: "bottom-0 left-0 right-0",
-    open: "translate-y-0",
-    closed: "translate-y-full"
-  }
-};
-var borderByPosition = {
-  right: "border-l-[length:var(--ds-border-width)] border-l-[var(--ds-border-default)]",
-  left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
-  bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
-};
-function Drawer(props) {
-  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush, keepMounted, id, labelledBy, dirty, onDiscard } = props;
-  const isPhone = useBreakpoint("sm");
-  const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
-  const guard = useDirtyGuard(dirty, onClose, onDiscard);
-  const confirm = /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard });
-  const [actionsMap, setActionsMap] = useState(/* @__PURE__ */ new Map());
-  const registerActions = useCallback((formId, acts) => {
-    setActionsMap((prev) => new Map(prev).set(formId, acts));
-  }, []);
-  const unregisterActions = useCallback((formId) => {
-    setActionsMap((prev) => {
-      const next = new Map(prev);
-      next.delete(formId);
-      return next;
-    });
-  }, []);
-  const registeredActions = actionsMap.size > 0 ? /* @__PURE__ */ jsx(Fragment, { children: Array.from(actionsMap.values()) }) : null;
-  const effectiveFooter = footer ?? registeredActions;
-  const footerCtx = useMemo(
-    () => ({ registerActions, unregisterActions }),
-    [registerActions, unregisterActions]
-  );
-  if (isPhone && mobileMode === "sheet") {
-    return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(Sheet, { open, onClose: guard.requestClose, title, footer: effectiveFooter, confirm, container, flush, snapPoints, keepMounted, id, labelledBy, children }) });
-  }
-  return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(DrawerPanel, { ...props, footer: effectiveFooter, onClose: guard.requestClose, confirm }) });
-}
-function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth, confirm }) {
-  const nonModal = !modal;
-  const [chosen, remember] = useRememberedWidth(id ?? labelledBy);
-  const canResize = nonModal && resizable && position !== "bottom";
-  const effectiveWidth = canResize && chosen !== null ? `${chosen}px` : width;
-  const minPx = pxOf(width) ?? 320;
-  const maxPx = () => pxOf(maxWidth) ?? defaultMaxWidth(container instanceof Element ? container : null);
-  const titleId = useId();
-  const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
-  const isMobile = useBreakpoint("sm");
-  const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(open);
-  const [hidden, setHidden] = useState(!open);
-  const onCloseRef = useLatest(onClose);
-  if (open && !mounted) setMounted(true);
-  if (open && hidden) setHidden(false);
-  const isTopLayer = useOverlayLayer(open);
-  useEffect(() => {
-    if (!open || nonModal) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape" && isTopLayer()) onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    if (!container) lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      if (!container) unlockBodyScroll();
-    };
-  }, [open, nonModal, container, onCloseRef, isTopLayer]);
-  useReturnFocus(open && !nonModal);
-  useFocusTrap(panelRef, open && !topOffset && !nonModal, isTopLayer);
-  useEffect(() => {
-    if (!open || !mounted || nonModal) return;
-    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
-    return () => cancelAnimationFrame(raf);
-  }, [open, mounted, nonModal]);
-  useNonModalDialog(panelRef, open && mounted && nonModal, onClose, isTopLayer);
-  useCloseSettle(open, panelRef, () => {
-    if (keepMounted) setHidden(true);
-    else setMounted(false);
-  });
-  if (!mounted) return null;
-  const slide = slideClasses[position];
-  const isHorizontal = position === "left" || position === "right";
-  const positionClass = container ? "absolute" : "fixed";
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        hidden: keepMounted && hidden ? true : void 0,
-        className: cn(
-          `${positionClass} transition-opacity duration-[var(--ds-transition-speed)]`,
-          // A non-modal panel never intercepts the page: the wrapper is inert to the
-          // pointer and only the panel itself accepts events.
-          nonModal ? "z-[var(--ds-z-overlay)] pointer-events-none" : cn("z-[var(--ds-z-modal)]", open ? "pointer-events-auto" : "pointer-events-none"),
-          topOffset ? "left-0 right-0 bottom-0" : "inset-0"
-        ),
-        style: topOffset ? { top: topOffset } : void 0,
-        children: [
-          !nonModal && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 transition-opacity duration-[var(--ds-transition-speed)]",
-                lightBackdrop ? "bg-black/15" : cn("bg-black/50", "[backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))] [-webkit-backdrop-filter:blur(calc(var(--ds-glass-blur)*0.3))]"),
-                open ? "opacity-100" : "opacity-0"
-              ),
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: panelRef,
-              id,
-              role: "dialog",
-              "aria-modal": nonModal ? void 0 : "true",
-              "aria-labelledby": title ? titleId : labelledBy,
-              style: {
-                containerType: "inline-size",
-                width: isHorizontal ? effectiveWidth : void 0,
-                maxWidth: isHorizontal ? "100%" : void 0,
-                height: isMobile ? "100%" : void 0,
-                maxHeight: !isMobile && !isHorizontal ? "80vh" : void 0
-              },
-              className: cn(
-                `${positionClass} z-10 flex flex-col`,
-                nonModal && "pointer-events-auto",
-                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                GLASS_OVERLAY,
-                // flush drops the edge border for children that draw their own (the mobile
-                // menu's Sidebar); a non-modal panel has no backdrop to separate it from
-                // the page, so it always keeps the border.
-                (!flush || nonModal) && borderByPosition[position],
-                "transition-transform duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-                isHorizontal && position === "left" && "rounded-r-[var(--ds-radius-lg)] overflow-hidden",
-                isHorizontal && position === "right" && "rounded-l-[var(--ds-radius-lg)] overflow-hidden",
-                !isHorizontal && "rounded-t-[var(--ds-radius-lg)] overflow-hidden",
-                (lightBackdrop || nonModal) && "shadow-[var(--ds-shadow-overlay)]",
-                slide.panel,
-                open ? slide.open : slide.closed
-              ),
-              children: [
-                canResize && open && /* @__PURE__ */ jsx(
-                  ResizeEdge,
-                  {
-                    edge: position === "right" ? "left" : "right",
-                    width: chosen ?? minPx,
-                    min: minPx,
-                    max: maxPx,
-                    defaultWidth: minPx,
-                    onResize: (w) => remember(w === minPx ? null : w),
-                    label: "Resize panel"
-                  }
-                ),
-                title && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: {
-                      padding: "var(--ds-space-3) var(--ds-space-6)",
-                      minHeight: "calc(var(--ds-space-unit) * 6 + 1.75rem + 2px + var(--ds-border-width))"
-                    },
-                    children: [
-                      titleTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto",
-                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
-                    children
-                  }
-                ),
-                confirm,
-                footer && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-                    children: footer
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    container ?? document.body
-  );
-}
-function stampFormId(node, formId) {
-  return Children.map(node, (child) => {
-    if (!isValidElement(child)) return child;
-    if (child.type === Fragment$1) return stampFormId(child.props.children, formId);
-    return cloneElement(child, { form: formId });
-  });
-}
-var FormCtx = createContext(null);
-function useFormContext() {
-  const ctx = useContext(FormCtx);
-  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
-  return ctx;
-}
-function collectInvalidFields(form) {
-  const out = [];
-  for (const el of Array.from(form.querySelectorAll("[aria-invalid='true']"))) {
-    const id = el.id || "";
-    const label = id && form.querySelector(`label[for="${CSS.escape(id)}"]`)?.textContent?.replace(/\*\s*$/, "").trim() || el.getAttribute("aria-label") || el.closest("[data-field]")?.querySelector("label")?.textContent?.trim() || id || "A field";
-    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
-    const message = described.map((d) => document.getElementById(d)?.textContent?.trim()).find((t) => t && /error|invalid|required|must|enter|choose|select|please/i.test(t)) ?? described.map((d) => document.getElementById(d)?.textContent?.trim()).filter(Boolean).pop() ?? "Needs attention";
-    out.push({ id, label, message });
-  }
-  return out;
-}
-function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions, actionsAlign = "end", focusFirstError = true, errorSummary = true, className, ref }) {
-  const [errors, setErrors] = useState({});
-  const [submitted, setSubmitted] = useState(false);
-  const [submitCount, setSubmitCount] = useState(0);
-  const [summary, setSummary] = useState([]);
-  const errorsRef = useLatest(errors);
-  const formRef = useRef(null);
-  const setRefs = useCallback((node) => {
-    formRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  }, [ref]);
-  const inCard = useContext(CardSurfaceCtx);
-  const drawerFooter = useContext(DrawerFooterCtx);
-  const formId = useId();
-  useEffect(() => {
-    if (!drawerFooter || !actions) return;
-    drawerFooter.registerActions(formId, stampFormId(actions, formId));
-    return () => drawerFooter.unregisterActions(formId);
-  }, [drawerFooter, actions, formId]);
-  const pendingSubmit = useRef(false);
-  const pendingFocus = useRef(false);
-  const onSubmitRef = useLatest(onSubmit);
-  useEffect(() => {
-    if (pendingSubmit.current && submitted) {
-      pendingSubmit.current = false;
-      onSubmitRef.current(errorsRef.current);
+function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions, actionsAlign = "end", focusFirstError = true, errorSummary = true, className, ref }) {
+  const [errors, setErrors] = useState({});
+  const [submitted, setSubmitted] = useState(false);
+  const [submitCount, setSubmitCount] = useState(0);
+  const [summary, setSummary] = useState([]);
+  const errorsRef = useLatest(errors);
+  const formRef = useRef(null);
+  const setRefs = useCallback((node) => {
+    formRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const drawerFooter = useContext(DrawerFooterCtx);
+  const formId = useId();
+  useEffect(() => {
+    if (!drawerFooter || !actions) return;
+    drawerFooter.registerActions(formId, stampFormId(actions, formId));
+    return () => drawerFooter.unregisterActions(formId);
+  }, [drawerFooter, actions, formId]);
+  const pendingSubmit = useRef(false);
+  const pendingFocus = useRef(false);
+  const onSubmitRef = useLatest(onSubmit);
+  useEffect(() => {
+    if (pendingSubmit.current && submitted) {
+      pendingSubmit.current = false;
+      onSubmitRef.current(errorsRef.current);
     }
   }, [submitted, submitCount, errors, errorsRef, onSubmitRef]);
   const settle = useCallback(() => {
@@ -4603,27 +3547,8 @@ function FormWrapper({ onSubmit, validationMode = "onSubmit", children, actions,
     ": ",
     f.message
   ] }, f.id || f.label)) }) }) : null;
-  let actionsNode = null;
-  if (actions && !drawerFooter) {
-    if (inCard) {
-      actionsNode = /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-form-actions": "",
-          "data-form-actions-surface": "card",
-          className: cn(
-            "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-            "flex flex-wrap items-center gap-ds-2 pt-ds-4 mt-ds-6",
-            actionsAlign === "end" ? "justify-end" : "justify-start"
-          ),
-          children: actions
-        }
-      );
-    } else {
-      actionsNode = /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-4 mt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions });
-    }
-  }
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className, noValidate: true, children: [
+  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,
     actionsNode
@@ -4926,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"
@@ -4958,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")
@@ -4971,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 ?? ""),
@@ -5178,34 +4105,326 @@ function MentionInput({
               ),
               onMouseDown: (e) => {
                 e.preventDefault();
-                insertMention(s);
-              },
-              onMouseEnter: () => setActiveIndex(i),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Avatar,
-                  {
-                    src: s.avatar,
-                    initials: s.label.charAt(0).toUpperCase(),
-                    alt: s.label,
-                    size: "sm",
-                    className: "!h-6 !w-6 !text-2xs"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--ds-text-primary)] truncate", children: s.label }),
-                  s.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] truncate", children: s.description })
-                ] })
-              ]
+                insertMention(s);
+              },
+              onMouseEnter: () => setActiveIndex(i),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    src: s.avatar,
+                    initials: s.label.charAt(0).toUpperCase(),
+                    alt: s.label,
+                    size: "sm",
+                    className: "!h-6 !w-6 !text-2xs"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--ds-text-primary)] truncate", children: s.label }),
+                  s.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] truncate", children: s.description })
+                ] })
+              ]
+            },
+            s.id
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+var CardCtx = createContext(false);
+var 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}`,
+    "[transition:var(--ds-transition-ambient)]",
+    "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
+  ].join(" "),
+  interactive: [
+    `bg-[var(--ds-bg-surface)] cursor-pointer ${GLASS_SURFACE}`,
+    "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+    "[transition:var(--ds-transition-interactive)]",
+    "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)] hover:bg-[var(--ds-bg-surface-elevated)]",
+    "hover:scale-[var(--_card-scale)] hover:-translate-y-[var(--ds-hover-lift)]"
+  ].join(" "),
+  outline: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] ${GLASS_SURFACE}`,
+  ghost: "bg-transparent border-none shadow-none"
+};
+var INTERACTIVE_SCALE_CAP = { "--_card-scale": "min(var(--ds-hover-scale), 1.04)" };
+function RadioIndicator({ checked, disabled }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center justify-center shrink-0 rounded-[var(--ds-radius-full)]",
+        "h-[18px] w-[18px]",
+        "border-[length:var(--ds-border-width)] bg-[var(--ds-input-bg)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        disabled && "opacity-disabled",
+        checked ? "border-[var(--ds-check-border)]" : "border-[var(--ds-input-border)]"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] transition-transform duration-[var(--ds-transition-speed)]",
+            checked ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] scale-100" : "scale-0"
+          )
+        }
+      )
+    }
+  );
+}
+function CheckboxIndicator({ checked, indeterminate, disabled }) {
+  const filled = checked || indeterminate;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center justify-center shrink-0",
+        "h-[18px] w-[18px]",
+        "rounded-[calc(var(--ds-radius-sm)*0.6)]",
+        "border-[2px] transition-all duration-[var(--ds-transition-speed)]",
+        disabled && "opacity-disabled",
+        filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          className: cn(
+            "text-[var(--ds-check-fg)] transition-opacity",
+            filled ? "opacity-100" : "opacity-0"
+          ),
+          children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    }
+  );
+}
+function ToggleIndicator({ checked, disabled }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center overflow-hidden",
+        "border-[length:var(--ds-border-width)] rounded-[var(--ds-radius-full)]",
+        "transition-colors duration-[var(--ds-transition-speed)]",
+        disabled && "opacity-disabled",
+        checked ? "bg-[var(--ds-accent-primary)] border-transparent" : "bg-[var(--ds-bg-muted)] border-[var(--ds-border-default)]"
+      ),
+      style: { width: 44, height: 24 },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "pointer-events-none inline-block shrink-0 bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-full)] transition-transform",
+          style: {
+            width: 16,
+            height: 16,
+            transform: checked ? "translateX(calc(25px - var(--ds-border-width)))" : "translateX(calc(1px + var(--ds-border-width)))"
+          }
+        }
+      )
+    }
+  );
+}
+var Card = forwardRef(function Card2({
+  variant = "default",
+  loading = false,
+  selected,
+  selectable,
+  selectType,
+  onSelectedChange,
+  name,
+  indeterminate,
+  disabled = false,
+  checkable = false,
+  className,
+  children,
+  onClick,
+  style,
+  ...props
+}, ref) {
+  const isSelectable = selectable || !!selectType;
+  const isToggle = selectType === "toggle";
+  const hasSelectType = !!selectType;
+  const handleClick = isSelectable && !disabled ? (e) => {
+    onSelectedChange?.(!selected);
+    onClick?.(e);
+  } : onClick;
+  const handleKeyDown = isSelectable && !disabled ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelectedChange?.(!selected);
+    }
+  } : void 0;
+  const handleCheckableClick = (e) => {
+    e.stopPropagation();
+    onSelectedChange?.(!selected);
+  };
+  const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isSelectable ? "button" : void 0;
+  const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
+  const showRing = isSelectable && !isToggle && !hasSelectType && selected;
+  const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
+  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-card": "",
+      role,
+      tabIndex: isSelectable ? 0 : void 0,
+      "aria-disabled": isSelectable && disabled ? true : void 0,
+      ...name && selectType === "radio" ? { "data-radio-group": name } : {},
+      style: variant === "interactive" ? { ...INTERACTIVE_SCALE_CAP, ...style } : style,
+      className: cn(
+        "rounded-[var(--ds-radius-md)] flex flex-col relative",
+        variantStyles3[variant],
+        isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+        isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
+        isSelectable && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        (showRing || hasSelectType && selected) && ACTIVE_RING,
+        hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
+        disabled && "opacity-disabled cursor-not-allowed",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...ariaAttr,
+      ...props,
+      children: [
+        defaultCheckBadge,
+        indicator && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 z-[1]", children: indicator }),
+        checkable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-ds-3 left-ds-3 z-[1] cursor-pointer",
+            onClick: handleCheckableClick,
+            role: "checkbox",
+            "aria-checked": !!selected,
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onSelectedChange?.(!selected);
+              }
             },
-            s.id
-          ))
-        }
-      ),
-      document.body
+            children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
+          }
+        ),
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
+        ] }) : children }) })
+      ]
+    }
+  );
+});
+var CardHeader = forwardRef(function CardHeader2({ className, children, actions, icon, menuItems, ...props }, ref) {
+  const isCheckable = useContext(CardCtx);
+  const hasActions = actions || menuItems;
+  const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
+  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0", children: [
+    actions,
+    menuItems && /* @__PURE__ */ jsx(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
+              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+              "transition-colors duration-[var(--ds-transition-speed)]"
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
+          }
+        ),
+        items: menuItems
+      }
     )
+  ] }) : null;
+  const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
+  if (hasActions) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 min-w-0", children: [
+        iconBlock,
+        children
+      ] }),
+      actionsBlock
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col space-y-ds-1.5 pr-ds-5 pt-ds-4 last:pb-ds-4", pl, className), ...props, children: [
+    iconBlock,
+    children
   ] });
-}
+});
+var cardLineClampClasses = {
+  1: "truncate",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, ...props }, forwardedRef) {
+  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
+  const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
+  const heading = /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref: (node) => {
+        overflowRef(lines > 0 ? node : null);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", lines > 0 && lineClampClass, className),
+      ...props,
+      children
+    }
+  );
+  if (!isTruncated || lines === 0) return heading;
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
+});
+var CardDescription = forwardRef(function CardDescription2({ className, children, lines = 2, ...props }, forwardedRef) {
+  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
+  const lineClampClass = lines > 0 ? cardLineClampClasses[lines] || `line-clamp-[${lines}]` : "";
+  const el = /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref: (node) => {
+        if (lines > 0) overflowRef(node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      className: cn("text-sm text-[var(--ds-text-muted)]", lines > 0 && lineClampClass, className),
+      ...props,
+      children
+    }
+  );
+  if (!isTruncated || lines === 0) return el;
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
+});
+var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
+  const isCheckable = useContext(CardCtx);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 pr-ds-5 py-ds-4", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
+});
+var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
+  const isCheckable = useContext(CardCtx);
+  return (
+    // 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 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", children });
@@ -5318,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" }
@@ -5348,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(
@@ -5400,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
@@ -5622,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",
@@ -5630,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)]"
           ),
@@ -5647,14 +4866,14 @@ function Table({
             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: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 text-[var(--ds-text-primary)] text-right [overflow-wrap:anywhere]", children: row[col.key] })
+              /* @__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",
@@ -5682,12 +4901,15 @@ function Table({
           columns.map((col) => {
             const isSortable = sortable || col.sortable;
             const isActiveSort = sortKey === col.key;
-            const headerAlign = col.align ?? (kindOf(col) === "number" ? "right" : "left");
+            const headerKind = kindOf(col);
+            const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
+            const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
             return /* @__PURE__ */ jsx(
               "th",
               {
                 className: cn(
                   density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+                  shrink && "w-px whitespace-nowrap",
                   "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
                   "text-xs uppercase tracking-wider",
                   headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
@@ -5774,13 +4996,12 @@ function Table({
                     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-[200px] truncate inline-block", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
-                    } else if (kind === "date" || kind === "number") {
-                      inner = /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: cellContent });
+                      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;
                     }
@@ -5790,7 +5011,8 @@ function Table({
                         className: cn(
                           density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
                           "text-[var(--ds-text-primary)]",
-                          alignClass
+                          alignClass,
+                          shrink && "w-px whitespace-nowrap"
                         ),
                         style: col.maxWidth ? { maxWidth: col.maxWidth } : void 0,
                         children: inner
@@ -5815,7 +5037,10 @@ function Table({
     }
   );
 }
-var sizes4 = {
+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",
@@ -5847,9 +5072,34 @@ function SegmentedControl({
 }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
-  const collapsed = options.length > maxOptions;
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+  const 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']");
@@ -5864,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);
@@ -5889,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();
@@ -5933,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],
               bottom: indicatorInset[size],
-              transitionDuration: "var(--ds-transition-speed)",
+              transitionDuration: animate ? "var(--ds-transition-speed)" : "0ms",
               transitionTimingFunction: "var(--ds-transition-ease)"
             }
           }
@@ -5955,7 +5222,7 @@ 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(
@@ -5964,7 +5231,7 @@ function SegmentedControl({
               "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"
             ),
@@ -7529,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)]",
@@ -7544,22 +6812,41 @@ function EmptyState({ icon, iconFrame = "circle", title, description, action, va
     }
   );
 }
-function EntityCell({ avatar, primary, secondary, size = "md", className }) {
-  const isPhone = useBreakpoint("sm");
-  const avatarElement = typeof avatar === "string" ? /* @__PURE__ */ jsx(Avatar, { src: avatar, alt: primary, size }) : avatar;
+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",
     {
       className: cn(
-        "flex gap-ds-2",
-        isPhone ? "flex-col items-center text-center" : "flex-row items-center",
+        "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: [
         /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatarElement }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("p", { className: cn(
-            "font-medium text-[var(--ds-text-primary)] truncate",
+            "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(
@@ -7571,42 +6858,6 @@ function EntityCell({ avatar, primary, secondary, size = "md", className }) {
     }
   );
 }
-function SkipLink({ href = "#main", children = "Skip to content", className }) {
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      className: cn(
-        "sr-only focus:not-sr-only focus:fixed focus:top-[var(--ds-space-2)] focus:left-[var(--ds-space-2)] focus:z-[var(--ds-z-tooltip)]",
-        "focus:px-[var(--ds-space-3)] focus:py-[var(--ds-space-2)] focus:rounded-[var(--ds-radius-md)] focus:text-sm focus:font-medium",
-        "focus:bg-[var(--ds-bg-surface-elevated)] focus:text-[var(--ds-text-primary)] focus:shadow-[var(--ds-shadow-md)]",
-        "focus:outline-none focus:ring-2 focus:ring-[var(--ds-accent-primary)]",
-        className
-      ),
-      children
-    }
-  );
-}
-function useCompact(ref, breakpoint) {
-  const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
-  const width = useElementWidth(ref);
-  return width > 0 && width < px;
-}
-function useElementWidth(ref) {
-  const [width, setWidth] = useState(0);
-  const check = useCallback(() => {
-    const next = ref.current?.offsetWidth ?? 0;
-    if (next > 0) setWidth(next);
-  }, [ref]);
-  useLayoutEffect(() => {
-    check();
-    if (!ref.current || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(check);
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [check, ref]);
-  return width;
-}
 function TableToolbar({
   search,
   primaryFilter,
@@ -7635,6 +6886,8 @@ function TableToolbar({
   const iconSize = size === "sm" ? 14 : 16;
   const count = activeFilterCount ?? activeFilters?.length ?? 0;
   const hasChips = !!activeFilters?.length;
+  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(
@@ -7645,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(
@@ -7668,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,
           {
@@ -8076,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);
@@ -8882,136 +8135,6 @@ function CornerWindow({ open, onClose, edge, align, width, height, offset, ancho
     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;
-  const hasFooter = footer != null && scrollable;
-  const mainRef = useRef(null);
-  useEffect(() => {
-    const main = mainRef.current;
-    if (!hasFooter || !shellEl || !main || typeof ResizeObserver === "undefined") {
-      shellEl?.style.removeProperty("--ds-main-height");
-      return;
-    }
-    const ro = new ResizeObserver(() => shellEl.style.setProperty("--ds-main-height", `${main.clientHeight}px`));
-    ro.observe(main);
-    return () => {
-      ro.disconnect();
-      shellEl.style.removeProperty("--ds-main-height");
-    };
-  }, [hasFooter, shellEl]);
-  const hasLauncher = !!launcher && !isSmallMobile;
-  const launcherProps = isValidElement(launcher) ? launcher.props : null;
-  const launcherCorner = !hasLauncher ? null : launcherProps?.variant === "ribbon" ? null : launcherProps?.edge === "bottom-left" ? "bottom-left" : launcherProps?.edge === "right" || launcherProps?.edge === "left" || launcherProps?.edge === "bottom" ? null : "bottom-right";
-  return /* @__PURE__ */ jsx(
-    AppShellContext,
-    {
-      value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet, sidebarCollapsed, setSidebarCollapsed: setUserCollapsed, asideOpen, setAsideOpen, asideSide, asideFloating, setAsideFloating, container: shellEl, theme: theme ?? null, isHome, navbarFloating, sidebarFloating, registerChrome, hasLauncher, launcherCorner, hasFooter },
-      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",
-              {
-                ref: mainRef,
-                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({
@@ -9173,15 +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",
     {
@@ -9198,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(
@@ -9216,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,
@@ -9242,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: cn("flex gap-ds-2", isPhone ? "flex-col" : "items-center justify-between"), 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 || isPhone) && 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 && !isPhone && trailing,
+              !multiline && !stackMeta && trailing,
               item.actions && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -9314,6 +8457,7 @@ var TONE_SURFACE = {
   )
 };
 var BUTTON_ELEVATION = "shadow-[var(--ds-shadow-button)] active:shadow-[var(--ds-shadow-button-pressed)] active:translate-x-[var(--ds-press-depth)] active:translate-y-[var(--ds-press-depth)]";
+var BUTTON_ELEVATION_SHADOW_ONLY = "shadow-[var(--ds-shadow-button)] active:shadow-[var(--ds-shadow-button-pressed)]";
 var CORNER_SHAPE = cn(BUTTON_ELEVATION, "hover:-translate-y-[var(--ds-hover-lift)]");
 var LAUNCHER_RADIUS = "calc(var(--ds-radius-base) * 4)";
 var ACCENT_GLYPH = cn(
@@ -9489,13 +8633,13 @@ function Launcher({
         variant === "pill" && cn(CORNER_SHAPE, PILL_SIZE[size]),
         isRibbon && !bottomRibbon && cn(
           "flex-col gap-ds-2 px-ds-2 py-ds-4 text-sm",
-          BUTTON_ELEVATION,
+          align === "center" ? BUTTON_ELEVATION_SHADOW_ONLY : BUTTON_ELEVATION,
           side === "right" ? "rounded-l-[var(--ds-radius-md)]" : "rounded-r-[var(--ds-radius-md)]",
           align === "center" && "-translate-y-1/2"
         ),
         bottomRibbon && cn(
           "flex-row gap-ds-2 px-ds-4 py-ds-2 text-sm rounded-t-[var(--ds-radius-md)]",
-          BUTTON_ELEVATION,
+          align === "center" ? BUTTON_ELEVATION_SHADOW_ONLY : BUTTON_ELEVATION,
           align === "center" && "-translate-x-1/2"
         ),
         className
@@ -9569,6 +8713,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 [];
@@ -9708,7 +8946,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",
@@ -9724,10 +8963,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
       ),
@@ -9781,6 +9021,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");
@@ -9819,14 +9062,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
         ),
@@ -9870,78 +9114,18 @@ function SettingsLayout({
       /* @__PURE__ */ jsx(
         Dropdown,
         {
-          "aria-label": ariaLabel,
-          options: sections.filter((s) => !s.disabled).map((s) => ({ id: s.id, label: s.label, group: s.group })),
-          value,
-          onChange: (v) => onChange(v)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", className: cn("flex flex-row items-start gap-ds-8", className), children: [
-    /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, className: "w-full" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
-  ] });
-}
-function SplitView({
-  list,
-  detail,
-  aside,
-  asideTitle = "Details",
-  detailOpen = false,
-  onDetailClose,
-  detailMode = "stack",
-  backLabel = "Back",
-  listWidth = 35,
-  listMinWidth = 25,
-  asideWidth = 25,
-  collapseBelow = 768,
-  asideCollapseBelow = 1024,
-  bordered = false,
-  frame = "page",
-  "aria-label": ariaLabel,
-  className
-}) {
-  const rootRef = useRef(null);
-  const compact = useCompact(rootRef, collapseBelow);
-  const asideCollapsed = useCompact(rootRef, asideCollapseBelow);
-  const [asideOpen, setAsideOpen] = useState(false);
-  useEffect(() => {
-    if (!asideCollapsed) setAsideOpen(false);
-  }, [asideCollapsed]);
-  const region = ariaLabel ? { role: "region", "aria-label": ariaLabel } : {};
-  const isFill = frame === "fill";
-  const shell = useAppShell();
-  const fillStyle = isFill && shell?.hasFooter ? { height: "var(--ds-main-height, 100%)" } : void 0;
-  const surface = cn(
-    "h-full min-h-0 w-full bg-[var(--ds-bg-surface)]",
-    isFill && "rounded-none border-0",
-    bordered && !isFill && "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden",
-    className
-  );
-  if (compact) {
-    const showDetail = detailMode === "stack" && detailOpen;
-    return /* @__PURE__ */ jsx("div", { ref: rootRef, "data-split-view": showDetail ? "detail" : "list", "data-frame": frame, ...region, className: cn(surface, "flex flex-col"), style: fillStyle, children: showDetail ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "shrink-0 px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: 14 }), onClick: onDetailClose, children: backLabel }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: detail })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: list }) });
+          "aria-label": ariaLabel,
+          options: sections.filter((s) => !s.disabled).map((s) => ({ id: s.id, label: s.label, group: s.group })),
+          value,
+          onChange: (v) => onChange(v)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
+    ] });
   }
-  const asideToggle = aside && asideCollapsed ? /* @__PURE__ */ jsx("div", { className: "shrink-0 flex justify-end px-ds-3 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "info", size: 14 }), onClick: () => setAsideOpen(true), "aria-expanded": asideOpen, children: asideTitle }) }) : null;
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-split-view": "split", "data-frame": frame, ...region, className: surface, style: fillStyle, children: [
-    /* @__PURE__ */ jsxs(ResizablePanelGroup, { direction: "horizontal", stackOnMobile: false, className: "h-full", children: [
-      /* @__PURE__ */ jsx(ResizablePanel, { id: "list", defaultSize: `${listWidth}%`, minSize: `${listMinWidth}%`, children: /* @__PURE__ */ jsx("div", { "data-pane": "list", className: "h-full min-h-0 overflow-y-auto", children: list }) }),
-      /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
-      /* @__PURE__ */ jsx(ResizablePanel, { id: "detail", minSize: "30%", children: /* @__PURE__ */ jsxs("div", { "data-pane": "detail", className: "h-full min-h-0 flex flex-col", children: [
-        asideToggle,
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: detail })
-      ] }) }),
-      aside && !asideCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
-        /* @__PURE__ */ jsx(ResizablePanel, { id: "aside", defaultSize: `${asideWidth}%`, minSize: "15%", children: /* @__PURE__ */ jsx("div", { "data-pane": "aside", className: "h-full min-h-0 overflow-y-auto", children: aside }) })
-      ] })
-    ] }),
-    aside && asideCollapsed && /* @__PURE__ */ jsx(Drawer, { open: asideOpen, onClose: () => setAsideOpen(false), title: asideTitle, position: "right", children: aside })
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", className: cn("flex flex-row items-start gap-ds-8", className), children: [
+    /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, className: "w-full" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
   ] });
 }
 function SeparatorIcon({ type, size }) {
@@ -10195,6 +9379,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)]",
@@ -11494,11 +10679,23 @@ function isPageHeaderElement(node) {
 }
 var OVERLAP_MIN = 24;
 var OVERLAP_MAX = 64;
-function overlapTarget(column) {
-  const first = column?.firstElementChild ?? null;
-  if (!first) return null;
-  const bare = first.tagName === "DIV" && !first.getAttribute("style") && !(first.getAttribute("class") ?? "").split(/\s+/).some((c) => /^(?:p[xytblr]?-|m[xytblr]?-|bg-|border|rounded|shadow|grid|@)/.test(c));
-  return bare && first.firstElementChild ? first.firstElementChild : first;
+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 {
@@ -11552,25 +10749,27 @@ var PageContainer = forwardRef(function PageContainer2({
       observedRef.current?.ro.disconnect();
       observedRef.current = null;
     };
-    if (!overlapActive) {
+    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;
     }
-    const target = overlapTarget(columnRef.current);
-    if (!target) {
-      stop();
-      return;
-    }
-    if (observedRef.current?.target === target) return;
+    if (observedRef.current?.target === card) return;
     stop();
     if (typeof ResizeObserver === "undefined") return;
-    const ro = new ResizeObserver(([entry]) => {
-      const h = entry.contentRect.height;
-      rootRef.current?.style.setProperty("--ds-overlap", `${Math.min(OVERLAP_MAX, Math.max(OVERLAP_MIN, Math.round(h / 2)))}px`);
+    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(target);
-    observedRef.current = { target, ro };
+    ro.observe(card);
+    ro.observe(column2);
+    observedRef.current = { target: card, ro };
   });
   useEffect(() => () => {
     observedRef.current?.ro.disconnect();
@@ -12052,6 +11251,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(
@@ -12147,9 +11347,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;
@@ -12236,7 +11438,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)]"),
@@ -12254,6 +11456,7 @@ function SnappingHeader({
         !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(
@@ -12373,7 +11576,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"
@@ -12533,252 +11736,53 @@ function Dock({
                   "cursor-pointer origin-bottom",
                   "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
                 ),
-                style: {
-                  width: baseSize,
-                  height: baseSize,
-                  transition: "transform var(--ds-transition-speed) var(--ds-transition-ease)"
-                },
-                children: [
-                  typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize }) : /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: item.icon }),
-                  item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "absolute -top-1.5 -right-1.5 flex items-center justify-center",
-                        "min-w-[16px] h-4 px-ds-1 text-2xs font-bold rounded-[var(--ds-radius-full)]",
-                        "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
-                        "pointer-events-none"
-                      ),
-                      children: item.badge > 99 ? "99+" : item.badge
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                ref: (el) => {
-                  tooltipRefs.current[i] = el;
-                },
-                className: cn(
-                  "absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-2xs font-medium",
-                  "bg-[var(--ds-bg-elevated)] text-[var(--ds-text-primary)]",
-                  "px-ds-1.5 py-ds-0.5 rounded-[var(--ds-radius-sm)]",
-                  "shadow-[var(--ds-shadow-button)]",
-                  "pointer-events-none opacity-0",
-                  "transition-opacity duration-[var(--ds-transition-speed)]"
-                ),
-                style: { bottom: maxSize + 4 },
-                children: item.label
-              }
-            )
-          ]
-        },
-        item.id
-      ))
-    }
-  );
-}
-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;
-});
+                style: {
+                  width: baseSize,
+                  height: baseSize,
+                  transition: "transform var(--ds-transition-speed) var(--ds-transition-ease)"
+                },
+                children: [
+                  typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize }) : /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize }, children: item.icon }),
+                  item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute -top-1.5 -right-1.5 flex items-center justify-center",
+                        "min-w-[16px] h-4 px-ds-1 text-2xs font-bold rounded-[var(--ds-radius-full)]",
+                        "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
+                        "pointer-events-none"
+                      ),
+                      children: item.badge > 99 ? "99+" : item.badge
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                ref: (el) => {
+                  tooltipRefs.current[i] = el;
+                },
+                className: cn(
+                  "absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-2xs font-medium",
+                  "bg-[var(--ds-bg-elevated)] text-[var(--ds-text-primary)]",
+                  "px-ds-1.5 py-ds-0.5 rounded-[var(--ds-radius-sm)]",
+                  "shadow-[var(--ds-shadow-button)]",
+                  "pointer-events-none opacity-0",
+                  "transition-opacity duration-[var(--ds-transition-speed)]"
+                ),
+                style: { bottom: maxSize + 4 },
+                children: item.label
+              }
+            )
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
 function TruncSpan({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: cn("truncate", className), children });
@@ -12888,6 +11892,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)]",
@@ -12988,6 +11993,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,
@@ -13175,6 +12460,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" },
@@ -14076,7 +13362,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)]",
@@ -14147,7 +13433,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) }),
@@ -14280,35 +13566,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(
-        "mb-[var(--ds-heading-gap)]",
-        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: cn(
           "flex gap-ds-4",
-          isPhone && actions ? "flex-col" : "items-start justify-between"
+          // 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 })
       ]
     }
   );
@@ -14334,7 +13627,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 })
       ]
     }
   );
@@ -14407,6 +13700,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, ControlSizeContext, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SkipLink, SliderRange, Spinner, SplitView, StackedList, StatsCard, StatusDot, Stepper, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimePicker, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, useAppShell, useFormContext, useSidebar, useToast };
+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