gridsmith-ui 0.22.0 → 0.23.0

package/dist/{chunk-AAYCQXZQ.js → chunk-6PL7FXYH.js}

@@ -1,11 +1,12 @@
 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 { FormChangeCtx, useOverlayLayer, useReturnFocus, useFocusTrap, focusInitial, useNonModalDialog, OVERLAY_CLOSE_ATTR } from './chunk-RT7RYGC3.js';
+import { SurfaceBoundary } from './chunk-CKWITUSH.js';
 import { 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 +55,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 "";
@@ -209,7 +330,7 @@ function DiscardConfirm({ open, onKeep, onDiscard }) {
       "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)" },
+      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: [
@@ -220,328 +341,26 @@ function DiscardConfirm({ open, onKeep, onDiscard }) {
     }
   );
 }
-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();
+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`);
     };
-  }, [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);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const o = new ResizeObserver(measure);
+    o.observe(el);
+    observer.current = o;
   }, []);
-  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 insetLessScrollbar = (gutter) => `max(0px, calc(${gutter} - var(--gs-scrollbar, 0px)))`;
 var DrawerFooterCtx = createContext(null);
 var slideClasses = {
   right: {
@@ -566,7 +385,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 +409,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 +428,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 +535,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,11 +557,15 @@ 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",
+                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
+              } : {
                 containerType: "inline-size",
                 width: isHorizontal ? effectiveWidth : void 0,
                 maxWidth: isHorizontal ? "100%" : void 0,
@@ -685,23 +574,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 +625,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 +649,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 +660,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 +728,8 @@ var AppShell = forwardRef(function AppShell2({
   preferences,
   currentPath,
   homePath = "/",
-  focus
+  focus,
+  drawerWidth = "520px"
 }, ref) {
   if (REACT_VERSION_PROBLEM) throw new Error(REACT_VERSION_PROBLEM);
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -878,10 +788,10 @@ 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 },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
         setShellEl(el);
         if (typeof ref === "function") ref(el);
@@ -935,7 +845,7 @@ var AppShell = forwardRef(function AppShell2({
         !isSmallMobile && launcher
       ] })
     }
-  ) });
+  ) }) });
 });
 function useCompact(ref, breakpoint, band = 0) {
   const px = typeof breakpoint === "number" ? breakpoint : readBreakpointPx(breakpoint);
@@ -964,6 +874,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, DiscardConfirm, Drawer, DrawerFooterCtx, DrawerPanel, OVERLAY_ROOT_ATTR, OverlayCloseCtx, OverlayMarkCtx, OverlayMarkScope, REACT_VERSION_PROBLEM, ResizeEdge, SkipLink, defaultMaxWidth, insetLessScrollbar, pxOf, useAppShell, useBelow, useCloseSettle, useCompact, useDirtyGuard, useElementWidth, useOverlayMark, useRememberedWidth, useScrollbarInset, useUnsavedChanges };
+//# sourceMappingURL=chunk-6PL7FXYH.js.map
+//# sourceMappingURL=chunk-6PL7FXYH.js.map