gridsmith-ui 0.6.2 → 0.6.4

package/dist/index.js

@@ -1,14 +1,14 @@
 import { Skeleton } from './chunk-QGBG72OB.js';
 export { Skeleton } from './chunk-QGBG72OB.js';
-import { Badge } from './chunk-TYU2LQGK.js';
-export { Badge } from './chunk-TYU2LQGK.js';
-import { useBreakpoint } from './chunk-DPF6776I.js';
-export { BreakpointWidthProvider, useBreakpoint } from './chunk-DPF6776I.js';
-import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-R5QGJURZ.js';
-export { Tooltip, useTextOverflow } from './chunk-R5QGJURZ.js';
+import { Badge } from './chunk-KXNJJKIV.js';
+export { Badge } from './chunk-KXNJJKIV.js';
+import { useBreakpoint } from './chunk-EKQHHP72.js';
+export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
+import { Tooltip, useTextOverflow, usePosition, Slot, useLatest } from './chunk-DDKCQVKO.js';
+export { Tooltip, useTextOverflow } from './chunk-DDKCQVKO.js';
 import { Icon } from './chunk-GX6O72IV.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, HAS_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-TTZSZNJ6.js';
-import { createContext, forwardRef, useContext, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, useMemo, Children, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, FOCUS_RING, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, HAS_FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-TTZSZNJ6.js';
+import { createContext, forwardRef, useContext, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, Children, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -149,11 +149,13 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     if (!isDivider(item) && !item.disabled) acc.push(i);
     return acc;
   }, []);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) setFocusedIdx(-1);
+  }
   useEffect(() => {
-    if (!open) {
-      setFocusedIdx(-1);
-      return;
-    }
+    if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
@@ -534,13 +536,15 @@ function Dropdown({
     }
     setPos({ top, left, width });
   }, []);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setSearch("");
+    else setPositioned(false);
+  }
   useEffect(() => {
-    if (!open) {
-      setPositioned(false);
-      return;
-    }
+    if (!open) return;
     updatePos();
-    setSearch("");
     requestAnimationFrame(() => {
       if (searchRef.current) {
         searchRef.current.focus();
@@ -570,14 +574,14 @@ function Dropdown({
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
   const typeahead = useRef({ buffer: "", at: 0 });
-  const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-  const focusOption = (idx) => {
-    const els = optionButtons();
-    if (els.length === 0) return;
-    els[(idx % els.length + els.length) % els.length].focus();
-  };
   useEffect(() => {
     if (!open) return;
+    const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
+    const focusOption = (idx) => {
+      const els = optionButtons();
+      if (els.length === 0) return;
+      els[(idx % els.length + els.length) % els.length].focus();
+    };
     const onKey = (e) => {
       const inMenu = menuRef.current?.contains(document.activeElement) || triggerRef.current === document.activeElement;
       if (!inMenu) return;
@@ -812,6 +816,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   const [highlightIdx, setHighlightIdx] = useState(0);
   const inputRef = useRef(null);
   const triggerRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
   const listRef = useRef(null);
   const listboxId = useId();
   const pos = usePosition(triggerRef, listRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
@@ -820,9 +825,11 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   );
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const { ref: overflowRef, isTruncated: labelTruncated } = useTextOverflow({ lines: 1, content: selectedLabel, disabled: open });
-  useEffect(() => {
+  const [prevQuery, setPrevQuery] = useState(query);
+  if (query !== prevQuery) {
+    setPrevQuery(query);
     setHighlightIdx(0);
-  }, [query]);
+  }
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -870,6 +877,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   }, [overflowRef]);
   const triggerContent = /* @__PURE__ */ jsxs("div", { ref: (node) => {
     triggerRef.current = node;
+    setTriggerWidth(node?.offsetWidth);
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   }, className: cn("relative", className), children: [
@@ -950,7 +958,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
             "rounded-[var(--ds-radius-md)]",
             "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
           ),
-          style: { top: pos.top, left: pos.left, width: triggerRef.current?.offsetWidth },
+          style: { top: pos.top, left: pos.left, width: triggerWidth },
           children: /* @__PURE__ */ jsx("div", { style: { padding: "var(--ds-space-1)" }, children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-4", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "Loading options" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-3 text-sm text-[var(--ds-text-muted)] text-center", children: "No results" }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
             "button",
             {
@@ -1491,7 +1499,7 @@ function getMonthGrid(year, month, weekStartsOn = 0) {
   const firstOfMonth = new Date(year, month, 1);
   const gridStart = startOfWeek(firstOfMonth, weekStartsOn);
   const weeks = [];
-  let current = new Date(gridStart);
+  const current = new Date(gridStart);
   for (let w = 0; w < 6; w++) {
     const week = [];
     for (let d = 0; d < 7; d++) {
@@ -2292,11 +2300,11 @@ function NumberInput({
   const [focused, setFocused] = useState(false);
   const [draft, setDraft] = useState(String(value));
   const decimals = allowDecimals ?? step % 1 !== 0;
-  useEffect(() => {
-    if (!focused) {
-      setDraft(String(value));
-    }
-  }, [value, focused]);
+  const [prevSync, setPrevSync] = useState({ value, focused });
+  if (value !== prevSync.value || focused !== prevSync.focused) {
+    setPrevSync({ value, focused });
+    if (!focused) setDraft(String(value));
+  }
   const clamp = useCallback(
     (v) => Math.min(max, Math.max(min, v)),
     [min, max]
@@ -2397,7 +2405,7 @@ function NumberInput({
             onMouseDown: (e) => {
               e.preventDefault();
               inputRef.current?.focus();
-              !disabled && !atMin && startRepeat(decrement);
+              if (!disabled && !atMin) startRepeat(decrement);
             },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
@@ -2453,7 +2461,7 @@ function NumberInput({
             onMouseDown: (e) => {
               e.preventDefault();
               inputRef.current?.focus();
-              !disabled && !atMax && startRepeat(increment);
+              if (!disabled && !atMax) startRepeat(increment);
             },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
@@ -3012,11 +3020,12 @@ function ColorPicker({
   const [hexInput, setHexInput] = useState(value);
   const satLightRef = useRef(null);
   const draggingRef = useRef(false);
-  useEffect(() => {
-    const parsed = hexToHsl(value);
-    setHsl(parsed);
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setHsl(hexToHsl(value));
     setHexInput(value);
-  }, [value]);
+  }
   const emitChange = useCallback(
     (newHsl) => {
       setHsl(newHsl);
@@ -3250,17 +3259,15 @@ function useFormContext() {
 function FormWrapper({ onSubmit, validationMode = "onSubmit", children, className, ref }) {
   const [errors, setErrors] = useState({});
   const [submitted, setSubmitted] = useState(false);
-  const errorsRef = useRef(errors);
-  errorsRef.current = errors;
+  const errorsRef = useLatest(errors);
   const pendingSubmit = useRef(false);
-  const onSubmitRef = useRef(onSubmit);
-  onSubmitRef.current = onSubmit;
+  const onSubmitRef = useLatest(onSubmit);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
       onSubmitRef.current(errorsRef.current);
     }
-  }, [submitted, errors]);
+  }, [submitted, errors, errorsRef, onSubmitRef]);
   const setError = useCallback((field, message) => {
     setErrors((prev) => ({ ...prev, [field]: message }));
   }, []);
@@ -3580,13 +3587,30 @@ var sizeStyles3 = {
   md: "h-10 w-10 text-sm",
   lg: "h-12 w-12 text-base"
 };
+var paletteStyles = {
+  1: "bg-[var(--ds-palette-1-bg,var(--ds-bg-muted))] text-[var(--ds-palette-1-text,var(--ds-text-secondary))]",
+  2: "bg-[var(--ds-palette-2-bg,var(--ds-bg-muted))] text-[var(--ds-palette-2-text,var(--ds-text-secondary))]",
+  3: "bg-[var(--ds-palette-3-bg,var(--ds-bg-muted))] text-[var(--ds-palette-3-text,var(--ds-text-secondary))]",
+  4: "bg-[var(--ds-palette-4-bg,var(--ds-bg-muted))] text-[var(--ds-palette-4-text,var(--ds-text-secondary))]",
+  5: "bg-[var(--ds-palette-5-bg,var(--ds-bg-muted))] text-[var(--ds-palette-5-text,var(--ds-text-secondary))]"
+};
+function paletteFor(seed) {
+  let h = 0;
+  for (const ch of seed) h = h * 31 + ch.charCodeAt(0) >>> 0;
+  return h % 5 + 1;
+}
+function colorStyles(color, seed) {
+  if (color === "accent") return "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]";
+  if (color === "neutral") return "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]";
+  return paletteStyles[color === "auto" ? paletteFor(seed) : color];
+}
 var statusVariantMap = {
   online: "success",
   away: "warning",
   busy: "error",
   offline: "offline"
 };
-function Avatar({ initials, src, alt, size = "md", status, className }) {
+function Avatar({ initials, src, alt, size = "md", status, color = "auto", className }) {
   const base = cn(
     "inline-flex items-center justify-center font-medium shrink-0",
     "rounded-[var(--ds-radius-full)]",
@@ -3605,7 +3629,7 @@ function Avatar({ initials, src, alt, size = "md", status, className }) {
     {
       className: cn(
         base,
-        "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
+        colorStyles(color, alt ?? initials ?? ""),
         "border-[length:var(--ds-border-width)] border-transparent"
       ),
       children: initials
@@ -5801,9 +5825,12 @@ function MonthDropdown({
     offset: 8,
     flip: true
   });
-  useEffect(() => {
+  const browseSyncKey = open ? currentDate.getTime() : null;
+  const [prevBrowseSyncKey, setPrevBrowseSyncKey] = useState(browseSyncKey);
+  if (browseSyncKey !== prevBrowseSyncKey) {
+    setPrevBrowseSyncKey(browseSyncKey);
     if (open) setBrowseYear(currentDate.getFullYear());
-  }, [open, currentDate]);
+  }
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -5921,9 +5948,12 @@ function YearDropdown({
   });
   const currentYear = currentDate.getFullYear();
   const [rangeStart, setRangeStart] = useState(() => currentYear - 4);
-  useEffect(() => {
+  const rangeSyncKey = open ? currentYear : null;
+  const [prevRangeSyncKey, setPrevRangeSyncKey] = useState(rangeSyncKey);
+  if (rangeSyncKey !== prevRangeSyncKey) {
+    setPrevRangeSyncKey(rangeSyncKey);
     if (open) setRangeStart(currentYear - 4);
-  }, [open, currentYear]);
+  }
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -6344,6 +6374,7 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
           initials,
           size,
           status: item.status,
+          color: item.color,
           className: ringClass
         },
         i
@@ -6644,6 +6675,13 @@ function TruncLabel2({ children }) {
   if (!isTruncated) return label;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: label });
 }
+function allDescendantIds(node) {
+  const ids = [node.id];
+  if (node.children) {
+    for (const child of node.children) ids.push(...allDescendantIds(child));
+  }
+  return ids;
+}
 function TreeView({
   nodes,
   selectable,
@@ -6686,13 +6724,6 @@ function TreeView({
     },
     [selectable, multiSelect, onSelect]
   );
-  const allDescendantIds = useCallback((node) => {
-    const ids = [node.id];
-    if (node.children) {
-      for (const child of node.children) ids.push(...allDescendantIds(child));
-    }
-    return ids;
-  }, []);
   const handleCheck = useCallback(
     (node) => {
       if (!checkable) return;
@@ -6708,7 +6739,7 @@ function TreeView({
         return next;
       });
     },
-    [checkable, allDescendantIds, onCheck]
+    [checkable, onCheck]
   );
   const getCheckState = useCallback(
     (node) => {
@@ -6719,7 +6750,7 @@ function TreeView({
       if (checkedCount > 0) return "indeterminate";
       return "unchecked";
     },
-    [checked, allDescendantIds]
+    [checked]
   );
   const flatNodes = useCallback(() => {
     const result = [];
@@ -7561,9 +7592,23 @@ function TabsRoot(props) {
     overflow = "scroll",
     className
   } = props;
+  const isMobile = useBreakpoint("md");
+  const effectiveOrientation = orientation === "responsive" ? "vertical" : orientation;
   if ("tabs" in props && props.tabs) {
-    const { tabs } = props;
-    if (orientation === "vertical") {
+    const { tabs, mobile = "scroll" } = props;
+    const collapseToDropdown = isMobile && (orientation === "responsive" || mobile === "dropdown");
+    if (collapseToDropdown) {
+      return /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
+          value: activeTab,
+          onChange: (v) => onTabChange(v),
+          className
+        }
+      );
+    }
+    if (effectiveOrientation === "vertical") {
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -7574,7 +7619,20 @@ function TabsRoot(props) {
             variant === "underline" && "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)] pr-ds-1",
             className
           ),
-          children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, orientation, onTabChange) }, tab.id))
+          children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            tab.group && tab.group !== tabs[i - 1]?.group && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "px-ds-3 pb-ds-1 text-xs font-semibold uppercase tracking-wider text-[var(--ds-text-muted)]",
+                  i > 0 && "mt-ds-3"
+                ),
+                children: tab.group
+              }
+            ),
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
+          ] }, tab.id))
         }
       );
     }
@@ -7591,11 +7649,11 @@ function TabsRoot(props) {
           fullWidth && "w-full",
           className
         ),
-        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, orientation, onTabChange) }, tab.id))
+        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
       }
     );
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation, variant, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, variant, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -7800,6 +7858,11 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
 function Popover({ open, onOpenChange, trigger, children, side = "bottom", align = "center", width, className, container }) {
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
+  const setTriggerNode = useCallback((node) => {
+    triggerRef.current = node;
+    setTriggerWidth(node?.offsetWidth);
+  }, []);
   const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
   useEffect(() => {
     if (!open) return;
@@ -7825,8 +7888,11 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     /* @__PURE__ */ jsx(
       Slot,
       {
-        ref: triggerRef,
-        onClick: () => onOpenChange(!open),
+        ref: setTriggerNode,
+        onClick: () => {
+          setTriggerWidth(triggerRef.current?.offsetWidth);
+          onOpenChange(!open);
+        },
         children: trigger
       }
     ),
@@ -7846,7 +7912,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
           style: {
             top: pos.top,
             left: pos.left,
-            width: width === "trigger" ? triggerRef.current?.offsetWidth : width === "auto" ? void 0 : width
+            width: width === "trigger" ? triggerWidth : width === "auto" ? void 0 : width
           },
           children
         }
@@ -8462,10 +8528,7 @@ function CompactFlyout({
   onMouseEnter,
   onMouseLeave
 }) {
-  const [pos, setPos] = useState(() => computeCompactFlyoutPos(anchorEl, items.length));
-  useLayoutEffect(() => {
-    setPos(computeCompactFlyoutPos(anchorEl, items.length));
-  }, [anchorEl, items.length]);
+  const pos = useMemo(() => computeCompactFlyoutPos(anchorEl, items.length), [anchorEl, items.length]);
   useEffect(() => {
     function handler(e) {
       if (e.key === "Escape") onClose();
@@ -8855,7 +8918,7 @@ function CompactNavItem({
   expanded,
   onToggleExpand
 }) {
-  const triggerRef = useRef(null);
+  const [triggerEl, setTriggerEl] = useState(null);
   const handleMouseEnter = useCallback(() => {
     onCancelClose();
     if (hasChildren && !isOpen) onOpen(flyoutKey);
@@ -8874,7 +8937,7 @@ function CompactNavItem({
     /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: triggerRef,
+        ref: setTriggerEl,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
         onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
         onClick: handleClick,
@@ -8908,12 +8971,12 @@ function CompactNavItem({
         ]
       }
     ),
-    !mobile && isOpen && hasChildren && item.children && triggerRef.current && /* @__PURE__ */ jsx(
+    !mobile && isOpen && hasChildren && item.children && triggerEl && /* @__PURE__ */ jsx(
       CompactFlyout,
       {
         parentLabel: item.label,
         items: item.children,
-        anchorEl: triggerRef.current,
+        anchorEl: triggerEl,
         portalContainer,
         onItemClick,
         onClose,
@@ -9903,6 +9966,187 @@ function Dock({
     }
   );
 }
+function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92], container, flush }) {
+  const titleId = useId();
+  const panelRef = useRef(null);
+  const [mounted, setMounted] = 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);
+      setSnapIdx(0);
+      setDragOffset(0);
+    }
+  }
+  const viewportHeight = useCallback(
+    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
+    [container]
+  );
+  function handleTransitionEnd() {
+    if (!open) setMounted(false);
+  }
+  useReturnFocus(open);
+  useEffect(() => {
+    if (!open || !mounted) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    if (!container) lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (!container) unlockBodyScroll();
+    };
+  }, [open, container, onCloseRef]);
+  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",
+      {
+        className: cn(
+          `${positionClass} inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]`,
+          open ? "pointer-events-auto" : "pointer-events-none"
+        ),
+        onTransitionEnd: handleTransitionEnd,
+        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,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : void 0,
+              "data-ds-sheet": "",
+              className: cn(
+                `${positionClass} bottom-0 left-0 right-0 z-10 flex flex-col`,
+                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                GLASS_OVERLAY,
+                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                "rounded-t-[var(--ds-radius-xl)]",
+                !dragging && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+                open ? "translate-y-0" : "translate-y-full"
+              ),
+              style: {
+                containerType: "inline-size",
+                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
+                    onPointerDown: handlePointerDown,
+                    onPointerMove: handlePointerMove,
+                    onPointerUp: handlePointerUp,
+                    onPointerCancel: handlePointerUp,
+                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
+                  }
+                ),
+                title && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto",
+                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
+                    children
+                  }
+                ),
+                footer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
 var slideClasses = {
   right: {
     panel: "top-0 right-0 h-full",
@@ -9925,19 +10169,23 @@ var borderByPosition = {
   left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
   bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
 };
-function Drawer({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset }) {
+function Drawer(props) {
+  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush } = props;
+  const isPhone = useBreakpoint("sm");
+  const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
+  if (isPhone && mobileMode === "sheet") {
+    return /* @__PURE__ */ jsx(Sheet, { open, onClose, title, footer, container, flush, snapPoints, children });
+  }
+  return /* @__PURE__ */ jsx(DrawerPanel, { ...props });
+}
+function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset }) {
   const titleId = useId();
   const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
   const isMobile = useBreakpoint("sm");
   const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  useEffect(() => {
-    if (open) {
-      setMounted(true);
-    }
-  }, [open]);
+  const [mounted, setMounted] = useState(open);
+  const onCloseRef = useLatest(onClose);
+  if (open && !mounted) setMounted(true);
   function handleTransitionEnd() {
     if (!open) setMounted(false);
   }
@@ -9952,7 +10200,7 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
       document.removeEventListener("keydown", onKeyDown);
       if (!container) unlockBodyScroll();
     };
-  }, [open, container]);
+  }, [open, container, onCloseRef]);
   useReturnFocus(open);
   useEffect(() => {
     if (!open || !mounted) return;
@@ -10087,13 +10335,13 @@ var AppShell = forwardRef(function AppShell2({
   const hasMobileMenu = mobileMenu != null;
   const hasMobileNav = mobileNav != null;
   const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
-  const shellRef = useRef(null);
+  const [shellEl, setShellEl] = useState(null);
   return /* @__PURE__ */ jsx(
     AppShellContext,
     {
       value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
-        shellRef.current = 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: [
@@ -10125,7 +10373,7 @@ var AppShell = forwardRef(function AppShell2({
             onClose: () => setSidebarOpen(false),
             position: "left",
             width: mobileMenuWidth ?? "var(--ds-drawer-width)",
-            container: shellRef.current ?? void 0,
+            container: shellEl ?? void 0,
             flush: mobileMenuFlush,
             lightBackdrop: mobileMenuLightBackdrop,
             topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
@@ -10604,8 +10852,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
   const overlayRef = useRef(null);
   const dialogRef = useRef(null);
   const triggerRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
+  const onCloseRef = useLatest(onClose);
   const trapFocus = useCallback((e) => {
     if (e.key !== "Tab" || !dialogRef.current) return;
     const focusable = dialogRef.current.querySelectorAll(FOCUSABLE);
@@ -10641,7 +10888,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
     return () => {
       document.removeEventListener("keydown", handler);
     };
-  }, [open, trapFocus, alert]);
+  }, [open, trapFocus, alert, onCloseRef]);
   useEffect(() => {
     if (!open) return;
     lockBodyScroll();
@@ -10753,16 +11000,22 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
     groups.get(g).push(cmd);
   }
   const flatFiltered = filtered;
-  useEffect(() => {
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
     if (open) {
       setQuery("");
       setSelectedIdx(0);
-      requestAnimationFrame(() => inputRef.current?.focus());
     }
-  }, [open]);
-  useEffect(() => {
+  }
+  const [prevQuery, setPrevQuery] = useState(query);
+  if (query !== prevQuery) {
+    setPrevQuery(query);
     setSelectedIdx(0);
-  }, [query]);
+  }
+  useEffect(() => {
+    if (open) requestAnimationFrame(() => inputRef.current?.focus());
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -10778,23 +11031,20 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
     },
     [onOpenChange]
   );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSelectedIdx((prev) => Math.min(prev + 1, flatFiltered.length - 1));
-        listRef.current?.children[Math.min(selectedIdx + 1, flatFiltered.length - 1)]?.scrollIntoView({ block: "nearest" });
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSelectedIdx((prev) => Math.max(prev - 1, 0));
-        listRef.current?.children[Math.max(selectedIdx - 1, 0)]?.scrollIntoView({ block: "nearest" });
-      } else if (e.key === "Enter" && flatFiltered[selectedIdx]) {
-        e.preventDefault();
-        handleSelect(flatFiltered[selectedIdx]);
-      }
-    },
-    [flatFiltered, selectedIdx, handleSelect]
-  );
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIdx((prev) => Math.min(prev + 1, flatFiltered.length - 1));
+      listRef.current?.children[Math.min(selectedIdx + 1, flatFiltered.length - 1)]?.scrollIntoView({ block: "nearest" });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIdx((prev) => Math.max(prev - 1, 0));
+      listRef.current?.children[Math.max(selectedIdx - 1, 0)]?.scrollIntoView({ block: "nearest" });
+    } else if (e.key === "Enter" && flatFiltered[selectedIdx]) {
+      e.preventDefault();
+      handleSelect(flatFiltered[selectedIdx]);
+    }
+  };
   if (!open) return null;
   let flatIdx = 0;
   return createPortal(
@@ -11087,179 +11337,6 @@ function ContextMenu({ items, children, className, ref, container }) {
     }
   );
 }
-function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92] }) {
-  const titleId = useId();
-  const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const [snapIdx, setSnapIdx] = useState(0);
-  const [dragOffset, setDragOffset] = useState(0);
-  const isDragging = useRef(false);
-  const dragStartY = useRef(0);
-  const startHeight = useRef(0);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  useEffect(() => {
-    if (open) {
-      setMounted(true);
-      setSnapIdx(0);
-      setDragOffset(0);
-    }
-  }, [open]);
-  function handleTransitionEnd() {
-    if (!open) setMounted(false);
-  }
-  useReturnFocus(open);
-  useEffect(() => {
-    if (!open || !mounted) return;
-    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
-    return () => cancelAnimationFrame(raf);
-  }, [open, mounted]);
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      unlockBodyScroll();
-    };
-  }, [open]);
-  const handlePointerDown = useCallback((e) => {
-    isDragging.current = true;
-    dragStartY.current = e.clientY;
-    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * window.innerHeight;
-    setDragOffset(0);
-    e.target.setPointerCapture(e.pointerId);
-  }, [snapIdx, snapPoints]);
-  const handlePointerMove = useCallback((e) => {
-    if (!isDragging.current) return;
-    const delta = dragStartY.current - e.clientY;
-    setDragOffset(delta);
-  }, []);
-  const handlePointerUp = useCallback(() => {
-    if (!isDragging.current) return;
-    isDragging.current = false;
-    const currentHeightPx = startHeight.current + dragOffset;
-    const currentFraction = currentHeightPx / window.innerHeight;
-    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);
-  }, [dragOffset, snapPoints, onClose]);
-  if (!mounted) return null;
-  const baseHeightVh = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
-  const dragPx = isDragging.current ? dragOffset : 0;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "fixed inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]",
-          open ? "pointer-events-auto" : "pointer-events-none"
-        ),
-        onTransitionEnd: handleTransitionEnd,
-        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,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? titleId : void 0,
-              className: cn(
-                "fixed bottom-0 left-0 right-0 z-10 flex flex-col",
-                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                GLASS_OVERLAY,
-                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                "rounded-t-[var(--ds-radius-xl)]",
-                !isDragging.current && "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(${baseHeightVh}vh + ${dragPx}px)` : `${baseHeightVh}vh`
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
-                    onPointerDown: handlePointerDown,
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: handlePointerUp,
-                    onPointerCancel: handlePointerUp,
-                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
-                  }
-                ),
-                title && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
-                    children: [
-                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto",
-                    style: { padding: "var(--ds-space-5)" },
-                    children
-                  }
-                ),
-                footer && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-                    children: footer
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    document.body
-  );
-}
 function TruncTitle({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: "truncate", children });
@@ -11290,7 +11367,10 @@ function NotificationCenter({
   const [internalFilter, setInternalFilter] = useState("all");
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = isControlled ? (v) => onOpenChange?.(v) : setInternalOpen;
+  const setOpen = useCallback((v) => {
+    if (isControlled) onOpenChange?.(v);
+    else setInternalOpen(v);
+  }, [isControlled, onOpenChange]);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "end", offset: 8, flip: true });
@@ -11314,7 +11394,7 @@ function NotificationCenter({
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, setOpen]);
   const grouped = groupByDate(filteredNotifications);
   if (variant === "page") {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
@@ -11561,11 +11641,13 @@ function Tour({ steps, open, onClose, onComplete, container }) {
     if (el) setRect(el.getBoundingClientRect());
     else setRect(null);
   }, [step]);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) setCurrent(0);
+  }
   useEffect(() => {
-    if (!open) {
-      setCurrent(0);
-      return;
-    }
+    if (!open) return;
     measureTarget();
     window.addEventListener("resize", measureTarget);
     window.addEventListener("scroll", measureTarget, true);
@@ -11574,16 +11656,6 @@ function Tour({ steps, open, onClose, onComplete, container }) {
       window.removeEventListener("scroll", measureTarget, true);
     };
   }, [open, current, measureTarget]);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-      else if (e.key === "ArrowRight") handleNext();
-      else if (e.key === "ArrowLeft") handlePrev();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  });
   const handleNext = useCallback(() => {
     if (current < steps.length - 1) setCurrent((c) => c + 1);
     else {
@@ -11594,6 +11666,16 @@ function Tour({ steps, open, onClose, onComplete, container }) {
   const handlePrev = useCallback(() => {
     if (current > 0) setCurrent((c) => c - 1);
   }, [current]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowRight") handleNext();
+      else if (e.key === "ArrowLeft") handlePrev();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, handleNext, handlePrev]);
   if (!open || !step) return null;
   const padding = 8;
   const spotlightRadius = 8;
@@ -11897,15 +11979,14 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 3e
   const timerRef = useRef(void 0);
   const startedAtRef = useRef(0);
   const remainingRef = useRef(duration);
-  const onDismissRef = useRef(onDismiss);
-  onDismissRef.current = onDismiss;
+  const onDismissRef = useLatest(onDismiss);
   const startTimer = useCallback((ms) => {
     const delay = ms ?? remainingRef.current;
     remainingRef.current = delay;
     startedAtRef.current = Date.now();
     if (!Number.isFinite(delay) || delay <= 0) return;
     timerRef.current = setTimeout(() => onDismissRef.current(), delay);
-  }, []);
+  }, [onDismissRef]);
   const clearTimer = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);