gridsmith-ui 0.22.0 → 0.24.0

package/dist/{chunk-AAYCQXZQ.js → chunk-MV7JXWXK.js}

@@ -1,11 +1,13 @@
 import { PreferencesContext, Button } from './chunk-7TOJ4G7S.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
-import { FormChangeCtx, useReturnFocus, focusInitial, useOverlayLayer, useFocusTrap, OVERLAY_CLOSE_ATTR, useNonModalDialog } from './chunk-RT7RYGC3.js';
-import { useTextOverflow, Tooltip } from './chunk-CXMV7SXJ.js';
+import { FormChangeCtx } from './chunk-XVB55M3N.js';
+import { SurfaceBoundary } from './chunk-2PWGJ4PK.js';
+import { usePopupFocus, useOverlayLayer, useReturnFocus, useFocusTrap, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-JXANCXK6.js';
+import { usePosition, useTextOverflow, Tooltip } from './chunk-CXMV7SXJ.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY } from './chunk-M2QRNBDQ.js';
-import { createContext, version, forwardRef, useState, useCallback, useRef, useEffect, isValidElement, useMemo, useId, useContext, useLayoutEffect } from 'react';
+import { createContext, version, forwardRef, useState, useCallback, useRef, useEffect, isValidElement, useContext, useMemo, useId, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -54,6 +56,126 @@ function useCloseSettle(open, elRef, onSettled) {
     };
   }, [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);
+}
 var OVERLAY_ROOT_ATTR = "data-overlay-root";
 function controlsOf(root) {
   if (!root) return "";
@@ -177,371 +299,69 @@ function useDirtyGuard(dirty, onClose, onDiscard) {
     const then = pending.current;
     pending.current = void 0;
     runAfter(then);
-  }, [onClose, onDiscard, runAfter]);
-  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, { type: "button", ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
-        ] })
-      ]
-    }
-  );
-}
-function Sheet({ open, onClose: onCloseProp, title, children, footer, confirm, dirty, onDiscard, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
-  const standalone = confirm === void 0;
-  const { marked, mark } = useOverlayMark(open);
-  const guards = standalone || dirty !== void 0;
-  const guard = useDirtyGuard(standalone ? dirty ?? marked : dirty, onCloseProp, onDiscard);
-  const onClose = guard.requestClose;
-  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);
-    }
-  }
-  if (open && !mounted) setMounted(true);
-  if (open && hidden) setHidden(false);
-  const viewportHeight = useCallback(
-    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
-    [container]
-  );
-  useCloseSettle(open, panelRef, () => {
-    if (keepMounted) setHidden(true);
-    else setMounted(false);
-  });
-  useReturnFocus(open, panelRef);
-  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" || e.defaultPrevented || !isTopLayer()) return;
-      e.preventDefault();
-      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",
-              "data-gs": "sheet",
-              ...{ [OVERLAY_ROOT_ATTR]: "" },
-              "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`,
-                OVERLAY_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",
-                        {
-                          type: "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: guards ? /* @__PURE__ */ jsx(OverlayCloseCtx, { value: guard.requestClose, children: standalone ? /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children }) : children }) : children
-                  }
-                ),
-                confirm,
-                guards && /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
-                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 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]);
+  }, [onClose, onDiscard, runAfter]);
+  return { confirming, requestClose, keep, discard };
+}
+function DiscardConfirm({ open, onKeep, onDiscard }) {
+  const keepRef = useRef(null);
+  const returnTo = useRef(null);
+  const overlay = useRef(null);
   useEffect(() => {
-    if (!dragging) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape" || !start.current) return;
-      latestOnResize.current(start.current.width);
-      endDrag();
+    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();
     };
-    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(
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
     "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)]"
-          )
-        }
-      )
+      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-page-gutter)" },
+      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, { type: "button", ref: keepRef, variant: "secondary", size: "sm", onClick: onKeep, children: "Keep editing" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: onDiscard, children: "Discard changes" })
+        ] })
+      ]
     }
   );
 }
-var remembered = /* @__PURE__ */ new Map();
-function useRememberedWidth(key) {
-  const [width, setWidth] = useState(() => key ? remembered.get(key) ?? null : null);
-  const remember = useCallback(
-    (w) => {
-      setWidth(w);
-      if (!key) return;
-      if (w === null) remembered.delete(key);
-      else remembered.set(key, w);
-    },
-    [key]
-  );
-  return [width, remember];
-}
-function pxOf(length) {
-  if (!length) return null;
-  const m = /^(\d+(?:\.\d+)?)px$/.exec(length.trim());
-  return m ? parseFloat(m[1]) : null;
-}
-function defaultMaxWidth(container) {
-  const base = container instanceof HTMLElement ? container.clientWidth : typeof window !== "undefined" ? window.innerWidth : 1200;
-  return Math.round(base * 0.6);
+var DrawerWidthCtx = createContext(null);
+function useScrollbarInset() {
+  const observer = useRef(null);
+  return useCallback((el) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    if (!el) return;
+    const measure = () => {
+      const style = getComputedStyle(el);
+      const borders = (parseFloat(style.borderLeftWidth) || 0) + (parseFloat(style.borderRightWidth) || 0);
+      el.style.setProperty("--gs-scrollbar", `${Math.max(0, el.offsetWidth - el.clientWidth - borders)}px`);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const o = new ResizeObserver(measure);
+    o.observe(el);
+    observer.current = o;
+  }, []);
 }
+var insetLessScrollbar = (gutter) => `max(0px, calc(${gutter} - var(--gs-scrollbar, 0px)))`;
 var DrawerFooterCtx = createContext(null);
 var slideClasses = {
   right: {
@@ -566,7 +386,8 @@ var borderByPosition = {
   bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
 };
 function Drawer(props) {
-  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush, keepMounted, id, labelledBy, dirty, onDiscard } = props;
+  const { position = "right", mobile, open, onClose, footer, dirty, onDiscard } = props;
+  const shellWidth = useContext(DrawerWidthCtx) ?? void 0;
   const isPhone = useBreakpoint("sm");
   const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
   const { marked, mark } = useOverlayMark(open);
@@ -589,15 +410,16 @@ function Drawer(props) {
     () => ({ registerActions, unregisterActions }),
     [registerActions, unregisterActions]
   );
-  if (isPhone && mobileMode === "sheet") {
-    return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: guard.requestClose, 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(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: guard.requestClose, children: /* @__PURE__ */ jsx(DrawerPanel, { ...props, footer: effectiveFooter, onClose: guard.requestClose, confirm }) }) }) });
+  return /* @__PURE__ */ jsx(DrawerFooterCtx, { value: footerCtx, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: guard.requestClose, children: /* @__PURE__ */ jsx(DrawerPanel, { ...props, width: props.width ?? shellWidth, form: isPhone && mobileMode === "sheet" ? "sheet" : "panel", 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 }) {
+var INSET = "var(--ds-page-gutter)";
+var DEFAULT_SNAPS = [0.5, 0.92];
+function DrawerPanel({ form, open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset, modal = true, keepMounted = false, id, labelledBy, resizable = false, maxWidth, snapPoints = DEFAULT_SNAPS, confirm }) {
+  const sheet = form === "sheet";
   const nonModal = !modal;
+  const blocking = !nonModal || sheet;
   const [chosen, remember] = useRememberedWidth(id ?? labelledBy);
-  const canResize = nonModal && resizable && position !== "bottom";
+  const canResize = !sheet && 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);
@@ -607,40 +429,104 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
   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) {
+      setSnapIdx(0);
+      setDragOffset(0);
+    }
+  }
   if (open && !mounted) setMounted(true);
   if (open && hidden) setHidden(false);
   const isTopLayer = useOverlayLayer(open);
   useEffect(() => {
-    if (!open || nonModal) return;
+    if (!open || !blocking) return;
     const onKeyDown = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
       e.preventDefault();
       onCloseRef.current();
     };
     document.addEventListener("keydown", onKeyDown);
-    if (!container) lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      if (!container) unlockBodyScroll();
-    };
-  }, [open, nonModal, container, onCloseRef, isTopLayer]);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, blocking, onCloseRef, isTopLayer]);
+  useEffect(() => {
+    if (!open || !blocking || container) return;
+    lockBodyScroll();
+    return () => unlockBodyScroll();
+  }, [open, blocking, container]);
   useReturnFocus(open && !nonModal, panelRef);
-  useFocusTrap(panelRef, open && !topOffset && !nonModal, isTopLayer);
+  useFocusTrap(panelRef, open && blocking && (sheet || !topOffset), 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);
+  const wasBlocking = useRef(blocking);
+  useEffect(() => {
+    const was = wasBlocking.current;
+    wasBlocking.current = blocking;
+    if (!open || !mounted || !blocking || was) return;
+    const panel = panelRef.current;
+    if (panel && !panel.contains(document.activeElement)) focusInitial(panel);
+  }, [open, mounted, blocking]);
+  const bodyRef = useScrollbarInset();
   useCloseSettle(open, panelRef, () => {
     if (keepMounted) setHidden(true);
     else setMounted(false);
   });
+  const viewportHeight = useCallback(
+    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
+    [container]
+  );
+  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;
+    setDragOffset(dragStartY.current - e.clientY);
+  }, [dragging]);
+  const handlePointerUp = useCallback(() => {
+    if (!dragging) return;
+    setDragging(false);
+    const currentFraction = (startHeight.current + dragOffset) / 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 slide = slideClasses[position];
   const isHorizontal = position === "left" || position === "right";
   const positionClass = container ? "absolute" : "fixed";
+  const offset = sheet ? void 0 : topOffset;
+  const baseHeight = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
+  const heightUnit = container ? "%" : "vh";
+  const dragPx = dragging ? dragOffset : 0;
+  const heading = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate";
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
@@ -650,17 +536,17 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
           `${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"
+          blocking ? cn("z-[var(--ds-z-modal)]", open ? "pointer-events-auto" : "pointer-events-none") : "z-[var(--ds-z-overlay)] pointer-events-none",
+          offset ? "left-0 right-0 bottom-0" : "inset-0"
         ),
-        style: topOffset ? { top: topOffset } : void 0,
+        style: offset ? { top: offset } : void 0,
         children: [
-          !nonModal && /* @__PURE__ */ jsx(
+          blocking && /* @__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))]"),
+                sheet ? "bg-black/50" : 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
@@ -672,12 +558,18 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
               ref: panelRef,
               id,
               role: "dialog",
-              "data-gs": "drawer",
+              "data-gs": sheet ? "sheet" : "drawer",
+              "data-ds-sheet": sheet ? "" : void 0,
               ...{ [OVERLAY_ROOT_ATTR]: "" },
-              "aria-modal": nonModal ? void 0 : "true",
+              "aria-modal": blocking ? "true" : void 0,
               "aria-labelledby": title ? titleId : labelledBy,
-              style: {
+              style: sheet ? {
+                containerType: "inline-size",
+                "--ds-form-max": "none",
+                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
+              } : {
                 containerType: "inline-size",
+                "--ds-form-max": "none",
                 width: isHorizontal ? effectiveWidth : void 0,
                 maxWidth: isHorizontal ? "100%" : void 0,
                 height: isMobile ? "100%" : void 0,
@@ -685,23 +577,42 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
               },
               className: cn(
                 `${positionClass} z-10 flex flex-col`,
-                nonModal && "pointer-events-auto",
+                !blocking && "pointer-events-auto",
                 OVERLAY_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
+                sheet ? cn(
+                  "bottom-0 left-0 right-0",
+                  "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"
+                ) : cn(
+                  // 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: [
+                sheet && /* @__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)]" })
+                  }
+                ),
                 canResize && open && /* @__PURE__ */ jsx(
                   ResizeEdge,
                   {
@@ -717,13 +628,13 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
                 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)",
+                    className: "flex items-center justify-between gap-ds-3 shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: sheet ? { padding: `var(--ds-space-2) ${INSET}` } : {
+                      padding: `var(--ds-space-3) ${INSET}`,
                       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 }),
+                      !sheet && titleTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: title, children: /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: heading, children: title }) }) : /* @__PURE__ */ jsx("h2", { ref: titleOverflowRef, id: titleId, className: heading, children: title }),
                       /* @__PURE__ */ jsx(
                         "button",
                         {
@@ -741,9 +652,10 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
                 /* @__PURE__ */ jsx(
                   "div",
                   {
+                    ref: bodyRef,
                     className: "flex-1 overflow-y-auto",
-                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
-                    children
+                    style: flush ? void 0 : { padding: `var(--ds-space-5) ${insetLessScrollbar(INSET)} var(--ds-space-5) ${INSET}` },
+                    children: /* @__PURE__ */ jsx(SurfaceBoundary, { children })
                   }
                 ),
                 confirm,
@@ -751,7 +663,7 @@ function DrawerPanel({ open, onClose, position = "right", width = "400px", title
                   "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)" },
+                    style: { padding: `var(--ds-space-3) ${INSET}` },
                     children: footer
                   }
                 )
@@ -819,7 +731,9 @@ var AppShell = forwardRef(function AppShell2({
   preferences,
   currentPath,
   homePath = "/",
-  focus
+  navigate,
+  focus,
+  drawerWidth = "520px"
 }, ref) {
   if (REACT_VERSION_PROBLEM) throw new Error(REACT_VERSION_PROBLEM);
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -845,6 +759,16 @@ var AppShell = forwardRef(function AppShell2({
       setUnsavedCount((n) => n - 1);
     };
   }, []);
+  const [leftCount, setLeftCount] = useState(0);
+  const markFlowLeft = useCallback(() => {
+    setLeftCount((n) => n + 1);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      setLeftCount((n) => n - 1);
+    };
+  }, []);
   const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
   const [shellEl, setShellEl] = useState(null);
   const [chrome, setChrome] = useState({});
@@ -878,15 +802,20 @@ var AppShell = forwardRef(function AppShell2({
   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(PreferencesContext, { value: preferences ?? null, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PreferencesContext, { value: preferences ?? null, children: /* @__PURE__ */ jsx(DrawerWidthCtx, { value: drawerWidth, children: /* @__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, focus: focus ?? null, hasUnsavedChanges: unsavedCount > 0, addUnsavedChanges },
+      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, focus: focus ?? null, hasUnsavedChanges: unsavedCount > 0, addUnsavedChanges, drawerWidth, navigate: navigate ?? null, flowLeft: leftCount > 0, markFlowLeft },
       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: [
+      }, className: cn(
+        // Sprint 25.16 A42: the dynamic viewport where the browser has it, so nothing hides under a phone browser's
+        // toolbar (100vh is the height with the toolbar hidden)
+        "relative h-screen supports-[height:100dvh]:h-dvh 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,
@@ -901,6 +830,7 @@ var AppShell = forwardRef(function AppShell2({
               {
                 ref: mainRef,
                 id: mainId,
+                "data-shell-main": "",
                 tabIndex: -1,
                 className: cn(
                   "flex-1 min-h-0 focus:outline-none",
@@ -909,7 +839,7 @@ var AppShell = forwardRef(function AppShell2({
                 ),
                 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 }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", "data-shell-content": "", children }),
                   footer
                 ] }) : children : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
               }
@@ -935,7 +865,296 @@ var AppShell = forwardRef(function AppShell2({
         !isSmallMobile && launcher
       ] })
     }
-  ) });
+  ) }) });
+});
+function useCrumbFollow() {
+  const navigate = useAppShell()?.navigate ?? null;
+  return useCallback((e, item) => {
+    if (item.href && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+    if (item.onClick) {
+      e.preventDefault();
+      item.onClick();
+      return;
+    }
+    if (!item.href) {
+      e.preventDefault();
+      return;
+    }
+    if (!navigate || e.defaultPrevented || !onThisSite(item.href)) return;
+    e.preventDefault();
+    navigate(item.href);
+  }, [navigate]);
+}
+function onThisSite(href) {
+  if (typeof window === "undefined") return false;
+  try {
+    return new URL(href, window.location.href).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+var crumbGoes = (item) => !!(item.href || item.onClick);
+function SeparatorIcon({ type, size }) {
+  const iconSize = size === "sm" ? 10 : 12;
+  if (type === "chevron") return /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: iconSize });
+  if (type === "arrow") return /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: iconSize });
+  if (type === "dot") return /* @__PURE__ */ jsx("span", { children: "\xB7" });
+  return /* @__PURE__ */ jsx("span", { children: "/" });
+}
+var Breadcrumbs = forwardRef(function Breadcrumbs2({
+  items,
+  separator = "chevron",
+  variant = "inline",
+  itemVariant,
+  size = "md",
+  showIcons = false,
+  maxItems,
+  bleed = false,
+  contentMaxWidth,
+  className,
+  container,
+  "aria-label": label = "Breadcrumb"
+}, ref) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const follow = useCrumbFollow();
+  const [activeIdx, setActiveIdx] = useState(0);
+  const ellipsisBtnRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const closeDropdown = useCallback(() => setDropdownOpen(false), []);
+  const { isTop, returnFocus } = usePopupFocus(dropdownOpen, { trigger: ellipsisBtnRef, panel: dropdownRef, close: closeDropdown, tabExits: "any" });
+  const pos = usePosition(ellipsisBtnRef, dropdownRef, dropdownOpen, { side: "bottom", align: "start", offset: 4, flip: true });
+  const effectiveMaxItems = maxItems ? Math.max(maxItems, 2) : void 0;
+  const shouldCollapse = effectiveMaxItems && items.length > effectiveMaxItems;
+  const collapsedItems = shouldCollapse ? items.slice(1, -(effectiveMaxItems - 1)) : [];
+  const visibleItems = shouldCollapse ? [...items.slice(0, 1), null, ...items.slice(-(effectiveMaxItems - 1))] : items;
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (ellipsisBtnRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
+      e.preventDefault();
+      returnFocus();
+      setDropdownOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [dropdownOpen, isTop, returnFocus]);
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const id = requestAnimationFrame(() => dropdownRef.current?.querySelector(`[data-index="${activeIdx}"]`)?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [dropdownOpen, activeIdx]);
+  function onMenuKeyDown(e) {
+    const last = collapsedItems.length - 1;
+    const next = e.key === "ArrowDown" ? activeIdx >= last ? 0 : activeIdx + 1 : e.key === "ArrowUp" ? activeIdx <= 0 ? last : activeIdx - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : null;
+    if (next === null) return;
+    e.preventDefault();
+    setActiveIdx(next);
+  }
+  const textClass = size === "sm" ? "text-xs" : "text-sm";
+  const gapClass = size === "sm" ? "gap-ds-1" : "gap-ds-1.5";
+  const iconSize = size === "sm" ? 12 : 14;
+  const isContainedBleed = variant === "contained" && bleed;
+  const wrapperClasses = cn(
+    variant === "contained" && !bleed && cn(
+      "bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-md)]",
+      size === "sm" ? "py-ds-1 px-ds-2" : "py-ds-1.5 px-ds-3"
+    ),
+    !isContainedBleed && className
+  );
+  function renderItem(item, _index, isLast) {
+    const isPill = itemVariant === "pill" || variant === "pill" && !itemVariant;
+    const insideContained = variant === "contained";
+    const pillClasses = isPill ? cn(
+      "rounded-[var(--ds-radius-full)]",
+      insideContained ? "bg-[var(--ds-bg-surface)]" : "bg-[var(--ds-bg-muted)]",
+      size === "sm" ? "px-ds-2 py-[2px]" : "px-ds-2.5 py-ds-0.5"
+    ) : "";
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      showIcons && item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, className: "shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+    ] });
+    if (!crumbGoes(item)) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: cn(
+            "flex items-center",
+            isLast ? "font-medium text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)]",
+            gapClass,
+            pillClasses
+          ),
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href ?? "#",
+        onClick: (e) => follow(e, item),
+        className: cn(
+          "text-[var(--ds-text-secondary)] flex items-center",
+          "hover:text-[var(--ds-text-primary)]",
+          "transition-colors duration-[var(--ds-transition-speed)]",
+          gapClass,
+          pillClasses
+        ),
+        children: content
+      }
+    );
+  }
+  const listContent = /* @__PURE__ */ jsx("ol", { className: cn("flex items-center flex-wrap", gapClass, textClass), children: visibleItems.map((item, i) => {
+    if (item === null) {
+      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", gapClass), children: [
+        i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--ds-text-secondary)] select-none flex items-center", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator, size }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ref: ellipsisBtnRef,
+            onClick: () => {
+              if (!dropdownOpen) setActiveIdx(0);
+              setDropdownOpen(!dropdownOpen);
+            },
+            "aria-label": "Show hidden breadcrumbs",
+            "aria-expanded": dropdownOpen,
+            "aria-haspopup": "menu",
+            className: cn(
+              "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
+              "transition-colors duration-[var(--ds-transition-speed)] cursor-pointer",
+              "flex items-center",
+              (itemVariant === "pill" || variant === "pill" && !itemVariant) && cn(
+                "rounded-[var(--ds-radius-full)]",
+                variant === "contained" ? "bg-[var(--ds-bg-surface)]" : "bg-[var(--ds-bg-muted)]",
+                size === "sm" ? "px-ds-2 py-[2px]" : "px-ds-2.5 py-ds-0.5"
+              )
+            ),
+            children: "\xB7\xB7\xB7"
+          }
+        )
+      ] }, "__ellipsis");
+    }
+    const isLast = i === visibleItems.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", gapClass), children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--ds-text-secondary)] select-none flex items-center", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator, size }) }),
+      renderItem(item, i, isLast)
+    ] }, i);
+  }) });
+  const dropdown = dropdownOpen && collapsedItems.length > 0 && createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dropdownRef,
+        role: "menu",
+        "aria-label": "Hidden breadcrumbs",
+        onKeyDown: onMenuKeyDown,
+        className: cn(
+          "fixed z-[var(--ds-z-popover)] min-w-[160px] max-h-60 overflow-auto",
+          "bg-[var(--ds-bg-surface-elevated)]",
+          "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
+          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+          "rounded-[var(--ds-radius-md)]",
+          "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
+          "py-ds-1"
+        ),
+        style: { top: pos.top, left: pos.left },
+        children: collapsedItems.map((ci, idx) => {
+          const itemClass = cn(
+            "flex items-center w-full text-left text-sm cursor-pointer",
+            "px-ds-3 py-ds-1.5 transition-colors",
+            "text-[var(--ds-text-secondary)]",
+            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
+            "focus-visible:outline-none focus-visible:bg-[var(--ds-bg-muted)] focus-visible:text-[var(--ds-text-primary)] focus-visible:shadow-[inset_var(--ds-shadow-focus)]",
+            gapClass
+          );
+          const label2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+            showIcons && ci.icon && /* @__PURE__ */ jsx(Icon, { name: ci.icon, size: iconSize, className: "shrink-0" }),
+            ci.label
+          ] });
+          return ci.href && !ci.onClick ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              "data-index": idx,
+              role: "menuitem",
+              href: ci.href,
+              tabIndex: idx === activeIdx ? 0 : -1,
+              className: itemClass,
+              onClick: (e) => {
+                setDropdownOpen(false);
+                follow(e, ci);
+              },
+              onKeyDown: (e) => {
+                if (e.key === " ") {
+                  e.preventDefault();
+                  e.currentTarget.click();
+                }
+              },
+              children: label2
+            },
+            idx
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-index": idx,
+              role: "menuitem",
+              tabIndex: idx === activeIdx ? 0 : -1,
+              "aria-disabled": !crumbGoes(ci) || void 0,
+              className: itemClass,
+              onClick: () => {
+                if (!ci.onClick) return;
+                setDropdownOpen(false);
+                ci.onClick();
+              },
+              children: label2
+            },
+            idx
+          );
+        })
+      }
+    ),
+    container ?? document.body
+  );
+  if (isContainedBleed) {
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": label,
+        className: cn(
+          "w-full bg-[var(--ds-bg-muted)]",
+          // Hairline under the band: it sits within ~1.2:1 of both canvas and a tinted header, so the edge needs a line.
+          "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("w-full mx-auto px-ds-6", size === "sm" ? "py-ds-1" : "py-ds-1.5"),
+              style: { maxWidth: contentMaxWidth ?? "var(--ds-bp-xl)" },
+              children: listContent
+            }
+          ),
+          dropdown
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": label, className: wrapperClasses, children: [
+    listContent,
+    dropdown
+  ] });
 });
 function useCompact(ref, breakpoint, band = 0) {
   const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
@@ -964,6 +1183,6 @@ function useElementWidth(ref) {
   return width;
 }
 
-export { AppShell, DiscardConfirm, Drawer, DrawerFooterCtx, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, REACT_VERSION_PROBLEM, ResizeEdge, Sheet, SkipLink, defaultMaxWidth, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useUnsavedChanges };
-//# sourceMappingURL=chunk-AAYCQXZQ.js.map
-//# sourceMappingURL=chunk-AAYCQXZQ.js.map
+export { AppShell, Breadcrumbs, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, crumbGoes, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useCrumbFollow, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
+//# sourceMappingURL=chunk-MV7JXWXK.js.map
+//# sourceMappingURL=chunk-MV7JXWXK.js.map